/* Bölüme özel düzenler */

/* ══ Sayfa başı marka şeridi ════════════════════════════
   Sayfanın tepesinde duran sade katman: logo + tek CTA. Menü linki yok —
   kaydırınca yerini yüzen dock alır ve bu şerit yukarı kayıp kaybolur. */

.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 45;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease),
    visibility 0.4s;
}

.topbar.is-gone {
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 84px;
}

.topbar__logo img {
  height: clamp(20px, 2.4vw, 26px);
  width: auto;
}

.topbar__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  transition: color 0.25s var(--ease);
}
.topbar__cta svg {
  width: 17px;
  height: 17px;
  transition: transform 0.3s var(--ease);
}
.topbar__cta:hover {
  color: var(--lime);
}
.topbar__cta:hover svg {
  transform: translateY(2px);
}

@media (max-width: 560px) {
  .topbar__cta span,
  .topbar__cta {
    font-size: 0.875rem;
  }
}

/* ══ Yüzen dock ═════════════════════════════════════════
   Cam kapsül. Kenarlığı düz bir çizgi değil, lime'dan beyaza geçen bir
   degrade — mask ile yalnızca 1px'lik çerçeve olarak boyanıyor. */

.dock {
  position: fixed;
  z-index: 50;
  top: 18px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem;
  border-radius: var(--r-pill);
  background: rgba(18, 18, 20, 0.72);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 30px 70px -40px rgba(187, 228, 72, 0.55);

  /* Görünürlük: JS `is-in` (hero geçildi) ve `is-hidden` (aşağı kaydırılıyor)
     sınıflarını yönetir. İkisi de yokken dock yukarıda gizli bekler. */
  translate: -50% 0;
  opacity: 0;
  transform: translateY(-140%) scale(0.94);
  visibility: hidden;
  transition: opacity 0.45s var(--ease), transform 0.55s var(--ease),
    visibility 0.55s;
}

.dock.is-in {
  opacity: 1;
  transform: none;
  visibility: visible;
}

.dock.is-in.is-hidden {
  opacity: 0;
  transform: translateY(-140%) scale(0.94);
  visibility: hidden;
}

/* Degrade hairline */
.dock::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    130deg,
    rgba(187, 228, 72, 0.65),
    rgba(255, 255, 255, 0.14) 38%,
    rgba(255, 255, 255, 0.05) 62%,
    rgba(212, 240, 126, 0.4)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.dock__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.dock__links a {
  position: relative;
  z-index: 1;
  padding: 0.6rem 1.05rem;
  border-radius: var(--r-pill);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-2);
  white-space: nowrap;
  transition: color 0.3s var(--ease);
}
.dock__links a:hover,
.dock__links a.is-active {
  color: var(--text);
}

/* Aktif bölümü gösteren kayan hap. Konum ve genişlik JS'ten gelir. */
.dock__pill {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 0;
  height: calc(100% + 2px);
  width: var(--pill-w, 0px);
  border-radius: var(--r-pill);
  background: linear-gradient(
    140deg,
    rgba(187, 228, 72, 0.24),
    rgba(187, 228, 72, 0.1) 55%,
    rgba(255, 255, 255, 0.06)
  );
  box-shadow: 0 0 0 1px rgba(187, 228, 72, 0.3) inset,
    0 6px 18px -8px rgba(187, 228, 72, 0.55);
  translate: var(--pill-x, 0px) -50%;
  opacity: 0;
  transition: translate 0.45s var(--ease), width 0.45s var(--ease),
    opacity 0.3s var(--ease);
  pointer-events: none;
}
.dock__pill.is-on {
  opacity: 1;
}

.dock__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--on-lime);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 8px 22px -10px rgba(187, 228, 72, 0.9);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.dock__cta:hover {
  background: var(--lime-bright);
  box-shadow: 0 12px 28px -10px rgba(187, 228, 72, 1);
}
.dock__cta svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Mobil: dock alta iner — uygulamanın kendi alt menüsünün yankısı.
   CTA metni gizlenir, lime daire olarak kalır. */
@media (max-width: 720px) {
  .dock {
    top: auto;
    bottom: max(14px, env(safe-area-inset-bottom));
    width: calc(100% - 2 * var(--gutter));
    max-width: 460px;
    justify-content: space-between;
  }
  .dock,
  .dock.is-in.is-hidden {
    transform: translateY(160%) scale(0.94);
  }
  .dock.is-in {
    transform: none;
  }
  .dock__links {
    flex: 1;
    justify-content: space-around;
  }
  .dock__links a {
    padding: 0.6rem 0.5rem;
    font-size: 0.8125rem;
  }
  .dock__cta {
    width: 40px;
    height: 40px;
    padding: 0;
    justify-content: center;
    flex: none;
  }
  .dock__cta span {
    display: none;
  }
  .dock__cta svg {
    width: 18px;
    height: 18px;
  }
}

/* 320–400px: dört bağlantı + CTA kapsüle sığmıyordu, dock taşıyordu. */
@media (max-width: 400px) {
  .dock {
    gap: 0.25rem;
    padding: 0.3rem;
  }
  .dock__links a {
    padding: 0.55rem 0.3rem;
    font-size: 0.75rem;
    letter-spacing: -0.02em;
  }
  .dock__cta {
    width: 36px;
    height: 36px;
  }
  .dock__cta svg {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dock,
  .dock__pill,
  .topbar {
    transition-duration: 0.01ms;
  }
}

/* ══ Hero — sinematik fotoğraf ══════════════════════════
   İki ayrı çekim var: geniş olan masaüstünde (sporcu solda, sağ taraf
   metin için boş), dikey olan mobilde (sporcu altta, üst taraf boş).
   Seçimi <picture> yapıyor; burada sadece kadraj ve karartma var. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: clamp(6rem, 11vh, 8rem) clamp(4rem, 8vh, 6rem);
}

.hero__media,
.hero__media picture {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 44%;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    /* sağ tarafa lime sıcaklık */
    radial-gradient(58% 70% at 76% 44%, rgba(187, 228, 72, 0.1), transparent 70%),
    /* metnin oturduğu sağ taraf koyulaşsın */
    linear-gradient(
      90deg,
      rgba(11, 11, 12, 0.45) 0%,
      rgba(11, 11, 12, 0.1) 22%,
      rgba(11, 11, 12, 0.55) 52%,
      rgba(11, 11, 12, 0.86) 78%,
      rgba(11, 11, 12, 0.94) 100%
    ),
    /* üstte logo, altta bir sonraki bölüme geçiş */
    linear-gradient(
      180deg,
      rgba(11, 11, 12, 0.72) 0%,
      rgba(11, 11, 12, 0.08) 22%,
      rgba(11, 11, 12, 0.2) 60%,
      rgba(11, 11, 12, 0.97) 100%
    );
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

@media (min-width: 940px) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  }
  /* Metin sağdaki boşlukta durur ama kendi içinde SOLA yaslıdır —
     ortalanmış hâlde başlığın satır başları birbirini tutmuyordu. */
  .hero__copy {
    grid-column: 2;
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Hero etiketi. Bilerek düğmeye benzemiyor: zemin, kenarlık ve dolu çip
   yok — onlar varken tıklanabilir okunuyordu. Kalan sinyal yalnızca nabız
   atan lime nokta. */
.hero__kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2.1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--text-2);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
}
.hero__kicker b {
  color: var(--lime);
  font-weight: 800;
}
.hero__kicker span {
  opacity: 0.45;
  margin-inline: 0.15rem;
}

.hero__pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
  box-shadow: 0 0 12px rgba(187, 228, 72, 0.9);
}
.hero__pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  animation: pulse 2.6s var(--ease) infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.55);
    opacity: 0.85;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .hero__kicker {
    font-size: 0.6875rem;
    letter-spacing: 0.11em;
  }
}

.hero__title {
  /* Dört satırlık yeni başlık (D-30): eski üç satırlık ölçek ekrana
     sığmıyor, CTA katlanıyordu. */
  font-size: clamp(2.6rem, 0.8rem + 6vw, 5.6rem);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.15rem 2.4rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--on-lime);
  font-size: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: 0 18px 44px -18px rgba(187, 228, 72, 0.95);
  transition: transform 0.28s var(--ease), background-color 0.28s var(--ease),
    box-shadow 0.28s var(--ease);
}
.hero__cta svg {
  width: 19px;
  height: 19px;
  transition: transform 0.3s var(--ease);
}
.hero__cta:hover {
  background: var(--lime-bright);
  transform: translateY(-3px);
  box-shadow: 0 24px 54px -18px rgba(187, 228, 72, 1);
}
.hero__cta:hover svg {
  transform: translateX(4px);
}

.hero__note {
  margin-top: 1.1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--lime);
  letter-spacing: -0.005em;
}

.hero__actions {
  margin-top: 2.25rem;
}

.hero__laurels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  font-size: 0.8125rem;
  color: var(--text-3);
}
@media (min-width: 940px) {
  .hero__laurels {
    justify-content: center;
  }
}
.hero__laurels b {
  color: var(--text);
  font-weight: 700;
  font-size: 0.9375rem;
  margin-right: 0.3rem;
}

/* Kaydırma işareti */
.hero__cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  translate: -50% 0;
  width: 26px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  display: grid;
  justify-items: center;
  padding-top: 8px;
  z-index: 2;
  transition: border-color 0.3s var(--ease);
}
.hero__cue:hover {
  border-color: var(--lime);
}
.hero__cue span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--lime);
  animation: cue 1.9s var(--ease-in-out) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
  100% {
    transform: translateY(16px);
    opacity: 0;
  }
}

/* Dar ekran: dikey çekim kullanılıyor — sporcu altta, üst yarısı boş.
   Bu yüzden metin masaüstünün aksine ÜSTTE duruyor. */
@media (max-width: 939px) {
  .hero {
    padding-block: clamp(6.5rem, 16vh, 9rem) clamp(4rem, 10vh, 6rem);
    align-items: start;
  }
  .hero__photo {
    object-position: 50% 62%;
  }
  .hero__scrim {
    background: radial-gradient(
        70% 45% at 50% 18%,
        rgba(187, 228, 72, 0.1),
        transparent 70%
      ),
      linear-gradient(
        180deg,
        rgba(11, 11, 12, 0.9) 0%,
        rgba(11, 11, 12, 0.78) 34%,
        rgba(11, 11, 12, 0.42) 58%,
        rgba(11, 11, 12, 0.55) 78%,
        rgba(11, 11, 12, 0.97) 100%
      );
  }
  .hero__title {
    font-size: clamp(2.75rem, 1rem + 11vw, 4.5rem);
  }
  .hero__cue {
    display: none;
  }
  /* Alt dock'un altında kalmasın */
  .hero__laurels {
    margin-bottom: 3.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue span {
    animation: none;
  }
}

/* ── Cihaz çerçevesi — iPhone 16 Pro oranları ─────────────
   Ölçüler gerçek cihazdan alındı:
     ekran   1206 × 2622 px  → 0.4599 en/boy
     gövde   71.5 × 149.6 mm → 0.4779 en/boy
     ekran köşe yarıçapı 62pt (ekran 402 × 874pt)
   Çerçeve kalınlığı bu ikisinin farkından çıkıyor: gövde oranının
   tutması için ekranın her yanında gövde genişliğinin ~%3.4'ü kadar
   pay gerekiyor → hesaplanan gövde oranı 0.4774, gerçeği 0.4779.

   ÖNEMLİ: pay `padding: %` ile verilemez — yüzdelik padding cihazın
   kendi genişliğine değil EBEVEYNİNİN genişliğine göre çözülür, o
   yüzden üç farklı boydaki telefonda çerçeve farklı kalınlıkta
   çıkıyordu. `container-type: inline-size` + `cqw` ile pay artık
   telefonun kendi genişliğine bağlı. Margin'in ebeveyne taşmaması için
   .device `display: grid`.

   Köşe yarıçapları yüzdelik ve eliptik (yatay / dikey ayrı), böylece
   150px'lik telefonda da 260px'likte de aynı köşe oranı çıkıyor. */

.device {
  position: relative;
  display: grid;
  container-type: inline-size;
  border-radius: 17.75% / 8.5%;
  /* Titanyum gövde: üstte parlak, ortada mat, altta ikinci bir yansıma */
  background: linear-gradient(
    150deg,
    #7f868d 0%,
    #b7bdc3 9%,
    #5f656b 27%,
    #43484e 52%,
    #61676d 74%,
    #a5abb1 93%,
    #6d747a 100%
  );
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.9),
    0 12px 26px -14px rgba(0, 0, 0, 0.7);
}

.device__screen {
  position: relative;
  /* Çerçeve payı — cihazın kendi genişliğinin %3.4'ü, her yanda eşit */
  margin: 3.4cqw;
  border-radius: 15.4% / 7.1%;
  overflow: hidden;
  /* Ekran görüntülerinin dolgu rengiyle aynı — yuvarlatılmış köşelerde
     siyah zemin ile içerik arasında ince bir dikiş görünmesin. */
  background: rgb(16, 19, 15);
  aspect-ratio: 1206 / 2622;
  /* Cam ile titanyum arasındaki ince koyu hat */
  box-shadow: 0 0 0 0.5cqw #16181a;
}

/* Ana ekran çubuğu (home indicator) — 140 × 5pt, alttan 8pt.
   .device__screen'in ::after'ı; ekran görüntülerinde bu çubuk yok. */
.device__screen::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.9%;
  translate: -50% 0;
  width: 34.8%;
  height: 0.57%;
  min-height: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  z-index: 3;
}

/* Dynamic Island — 125 × 36.7pt, ekranın üstünden 11pt aşağıda.
   Ekran görüntülerinde iOS durum çubuğu YOK (içerik kırpılarak
   alınmış), bu yüzden ada üstteki boşluğa oturuyor ve içeriği
   örtmüyor. Yeni ekran görüntüsü eklenirken tepede bu pay bırakılmalı. */
.device__island {
  position: absolute;
  top: 1.3%;
  left: 50%;
  translate: -50% 0;
  width: 31%;
  aspect-ratio: 125 / 36.7;
  border-radius: 999px;
  background: #000;
  z-index: 2;
}

/* Yan tuşlar. Yarısı gövdenin dışında kalıyor (gerçekte de öyle).
   Dikey konumlar gövde yüksekliğinin yüzdesi. */
/* Sarmalayıcı .device'ın grid'inde satır AÇMAMALI — display: contents
   kutuyu kaldırıyor, tuşlar yine .device'a göre konumlanıyor. */
.device__frame {
  display: contents;
}

.device__btn {
  position: absolute;
  width: 1.3%;
  border-radius: 0.7cqw;
  background: linear-gradient(90deg, #5c6167, #b4bac1 50%, #6b7178);
  z-index: 1;
}
/* Sol: Action Button, ses aç, ses kıs */
.device__btn--action {
  left: -0.65%;
  top: 20.5%;
  height: 3.6%;
}
.device__btn--volup {
  left: -0.65%;
  top: 26.5%;
  height: 5.4%;
}
.device__btn--voldown {
  left: -0.65%;
  top: 33.5%;
  height: 5.4%;
}
/* Sağ: yan tuş (güç) ve 16 Pro'nun Camera Control'ü */
.device__btn--power {
  right: -0.65%;
  top: 27%;
  height: 8.6%;
}
.device__btn--camera {
  right: -0.65%;
  top: 39.5%;
  height: 4.2%;
}

.device__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ══ Rakam şeridi ═══════════════════════════════════════ */

.stats {
  border-block: 1px solid var(--hairline);
  background: var(--bg);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
}

.stats__grid {
  display: grid;
  /* Alt sınır 160px iken 375px'lik telefonda iki sütun sığmıyor ve dört
     rakam alt alta diziliyordu (2×160 + 24 boşluk = 344 > 335). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 138px), 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}

.stat b {
  display: block;
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.875rem;
  color: var(--text-2);
}

.marquee {
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 0;
  animation: marquee 42s linear infinite;
}
.marquee__group {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  flex: none;
}
.marquee span {
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.375rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-3);
  white-space: nowrap;
}
.marquee i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  flex: none;
}
.marquee:hover .marquee__track {
  animation-play-state: paused;
}

/* ══ Nasıl çalışır ══════════════════════════════════════ */

.how {
  padding-block: var(--section-y);
  position: relative;
}

.how__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  /* Sabitlenen bant: bölüm ekrana çakılır, kaydırma adımı ilerletir.
     Yükseklik burada belirlenir — büyütmek geçişi yavaşlatır. */
  .how {
    padding-block: 0;
  }
  .how__track {
    /* Adım başına düşen kaydırma yolu. Büyütmek yavaşlatır, küçültmek
       hızlandırır. 4 adım × ~70vh. */
    height: 280vh;
  }
  .how__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: grid;
    align-items: center;
    /* Üstte yüzen dock'un altında kalmasın */
    padding-block: 92px 40px;
    box-sizing: border-box;
  }
  .how__grid {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* 5 adım + telefon tek ekrana sığsın: kart içi boşluk, aralık ve yazı
   boyu ekran YÜKSEKLİĞİNE bağlandı. Dört adımda sabit değerler
   yetiyordu; beşincisi eklenince sağdaki sütun 100vh'yi taşırıyor ve
   soldaki telefon alttan kesiliyordu. Adım sayısı değişirse buradaki
   vh katsayıları da gözden geçirilmeli. */
@media (min-width: 900px) {
  .how .steps {
    gap: clamp(0.45rem, 1.1vh, 1rem);
  }
  .how .step {
    padding: clamp(0.8rem, 1.7vh, 1.6rem) clamp(1.1rem, 1.5vw, 1.6rem);
    gap: clamp(0.85rem, 1.4vw, 1.25rem);
  }
  .how .step h3 {
    font-size: clamp(1rem, 0.92rem + 0.35vw, 1.25rem);
  }
  .how .step p {
    font-size: clamp(0.8125rem, 0.78rem + 0.25vw, 0.9375rem);
    line-height: 1.55;
  }
}

/* Kısa ekranlarda (dizüstü, 1280×720) daha da kıs — ölçüldü, bu değerlerle
   5 adım + telefon 720px'e sığıyor. */
@media (min-width: 900px) and (max-height: 820px) {
  .how__sticky {
    padding-block: 78px 24px;
  }
  .how .step__no {
    width: 34px;
    height: 34px;
  }
  .how .steps {
    gap: 0.35rem;
  }
  .how .step {
    padding: 0.6rem 1rem;
  }
  .how .step p {
    font-size: 0.8125rem;
    line-height: 1.5;
  }
}

/* Adım listesi ve ilerleme rayı */
.how__panel {
  position: relative;
}
.how__rail {
  display: none;
}
@media (min-width: 900px) {
  .how__rail {
    display: block;
    position: absolute;
    left: -1.5rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    border-radius: 2px;
    background: var(--hairline);
    overflow: hidden;
  }
  .how__rail span {
    display: block;
    width: 100%;
    height: var(--rail, 0%);
    background: linear-gradient(180deg, var(--lime-bright), var(--lime));
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(187, 228, 72, 0.7);
    transition: height 0.25s linear;
  }
}

.how__aside .device {
  /* En/boy oranı .device__screen'den geliyor; boyu KIRPMAK yerine
     genişliği kısıyoruz — yükseklik verince object-fit: cover ekranı
     kesiyordu. 5 adım eklendikten sonra sabit 260px 100vh'ye sığmıyordu. */
  width: clamp(150px, 19vh, 260px);
  margin-top: clamp(0.9rem, 2.6vh, 2.5rem);
}

/* ── Dar ekranda da sabitlenmiş bant ──────────────────────
   Önceden telefon adımların ÜSTÜNDE duruyor, kaydırılınca ekrandan
   çıkıyordu: adım değişirken telefonun ekranının da değiştiği hiç
   görülmüyordu. Artık bölüm telefonda da ekrana çakılıyor; telefon
   ortada durur, altındaki tek adım kaydırmayla değişir.

   `.js` altında: betik çalışmıyorsa adım seçilemez, o zaman eski
   akıcı düzen (telefon üstte, dört adım alt alta) geçerli kalır. */

@media (max-width: 899px) {
  .js .how {
    padding-block: 0;
  }
  .js .how__track {
    /* Adım başına ~100svh kaydırma yolu. Büyütmek yavaşlatır. 4 adım. */
    height: 400svh;
  }
  .js .how__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    display: grid;
    align-content: center;
    padding-block: 40px 88px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .js .how__grid {
    gap: clamp(0.9rem, 2.2vh, 1.4rem);
  }

  /* Sabit bantta yer telefona ayrıldı: açıklama paragrafı kalkıyor,
     başlık tek satıra iniyor — aynı bilgi zaten adımlarda var. */
  .js .how__aside {
    text-align: center;
  }
  .js .how__aside .eyebrow {
    margin-bottom: 0.5rem;
  }
  .js .how__aside .h2 {
    font-size: clamp(1.35rem, 0.9rem + 2.6vw, 1.9rem);
  }
  .js .how__aside .h2 br {
    display: none;
  }
  .js .how__aside .lead {
    display: none;
  }
  /* GENİŞLİKLE ölçülüyor, yükseklikle değil: .device artık
     `container-type: inline-size` ve çerçeve payı `cqw` cinsinden —
     `width: fit-content` verilirse genişlik içeriğe, içerik genişliğe
     bağlanıp döngü oluşuyor ve tarayıcı genişliği 0 çözüyor.
     Katsayı gövde oranı 0.4774: genişlik = istenen boy × 0.4774. */
  .js .how__aside .device {
    width: clamp(119px, 26.7svh, 267px);
    margin: clamp(0.6rem, 1.8vh, 1.1rem) auto 0;
  }

  /* Adımlar üst üste duruyor; yalnızca sıradaki görünür. */
  .js .how .steps {
    display: grid;
  }
  .js .how .how__panel .steps .step {
    grid-area: 1 / 1;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.85rem;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    /* Giden adım HIZLI çıkar. İkisi de 0.45s'de solarken iki adımın
       yazıları birbirinin üstüne biniyordu. */
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease),
      visibility 0.18s;
  }
  .js .how .how__panel .steps .step.is-current {
    opacity: 1;
    visibility: visible;
    transform: none;
    /* Gelen adım, giden tamamen kaybolduktan SONRA girer. */
    transition: opacity 0.3s var(--ease) 0.18s,
      transform 0.3s var(--ease) 0.18s, visibility 0s 0.18s;
  }
  .js .how .how__panel .steps .step__no {
    width: 38px;
    height: 38px;
    font-size: 0.875rem;
  }
  /* Telefona yer açmak için açıklama paragrafı yok — başlık yeterli. */
  .js .how .how__panel .steps .step p {
    display: none;
  }
  .js .how .how__panel .steps .step h3 {
    margin-bottom: 0;
    font-size: clamp(1.0625rem, 0.9rem + 1.2vw, 1.375rem);
  }

  /* İlerleme rayı burada yatay: telefonun altında ince bir şerit. */
  .js .how__rail {
    display: block;
    position: static;
    width: 100%;
    height: 3px;
    margin-bottom: 1.1rem;
    border-radius: 2px;
    background: var(--hairline);
    overflow: hidden;
  }
  .js .how__rail span {
    display: block;
    height: 100%;
    width: var(--rail, 0%);
    border-radius: 2px;
    background: linear-gradient(90deg, var(--lime-bright), var(--lime));
    box-shadow: 0 0 12px rgba(187, 228, 72, 0.7);
    transition: width 0.25s linear;
  }
}

/* Tablet: tek sütun ekranın yarısını boş bırakıyordu — telefon solda,
   sıradaki adım sağda. Dört adımın hepsi yan yana ancak 900px'ten
   itibaren sığıyor, o düzen yukarıdaki bloktan geliyor. */
@media (min-width: 620px) and (max-width: 899px) {
  .js .how__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(1.75rem, 4vw, 3rem);
  }
  .js .how__panel {
    text-align: left;
  }
  .js .how__aside .h2 {
    font-size: clamp(1.5rem, 0.9rem + 2vw, 2.25rem);
  }
  .js .how__aside .device {
    width: clamp(143px, 26.7svh, 258px);
  }
}

/* Tek sütunda telefon ortada duruyor; altındaki adım da ortalansın. */
@media (max-width: 619px) {
  .js .how .steps {
    justify-items: center;
  }
}

/* Kısa telefonlarda (SE gibi) tek ekrana sığması için ölçüleri kıs */
@media (max-width: 899px) and (max-height: 720px) {
  .js .how__sticky {
    padding-block: 28px 78px;
  }
  .js .how__aside .eyebrow {
    display: none;
  }
  .js .how__aside .device {
    width: clamp(95px, 25.8svh, 220px);
  }
  .js .how__rail {
    margin-bottom: 0.85rem;
  }
}

@media (min-width: 900px) {
  /* Sabitlenmiş bantta yer telefona ayrıldı: başlık küçüldü, açıklama
     paragrafı kaldırıldı — aynı bilgi zaten sağdaki adımlarda var. */
  .how__aside .lead {
    display: none;
  }
  .how__aside .h2 {
    font-size: clamp(1.6rem, 1rem + 1.7vw, 2.5rem);
  }
  .how__aside .device {
    width: clamp(143px, 30.6vh, 334px);
    margin-top: clamp(1.25rem, 3.5vh, 2.5rem);
  }
}

/* Kaynak ekran görüntülerinin altı eksikti: yakalama sırasında uygulamanın
   alt menü etiketleri resmin kenarında ortadan kesilmişti. Görüntüler kendi
   temiz satır sınırlarından kesilip zeminle dolduruldu; 09.09.2026'da beşi
   birden iPhone 16 Pro ekran oranına (1206/2622) getirildi — hepsi
   560x1218 ve dolgu rengi uygulamanın kendi zemini rgb(16,19,15).
   Ham hâlleri assets/screens/app/_orig/ içinde duruyor. Artık bu çerçeveye
   ayrı bir en/boy oranı GEREKMİYOR, .device__screen'inki geçerli. */

/* Ekranlar üst üste duruyor; aktif olan görünür oluyor. */
.how__device .device__screen img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease), scale 1.1s var(--ease);
  scale: 1.05;
}
.how__device .device__screen img.is-on {
  opacity: 1;
  scale: 1;
}

/* Revizyon 03: örnek sonuç ekranı, çizim. Ölçüler .device genişliğine
   (cqw) bağlı; telefon büyüyüp küçüldükçe ekran içeriği de ölçeklenir. */
.how__device .planscreen {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  display: flex;
  flex-direction: column;
  padding: 22cqw 7cqw 8cqw;
  background: rgb(16, 19, 15);
  color: #f4f4f5;
  font-size: 4.6cqw;
  text-align: left;
}
.how__device .planscreen.is-on {
  opacity: 1;
}
.planscreen__title {
  font-size: 9cqw;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 5cqw;
}
.planscreen ul {
  display: grid;
  gap: 3.4cqw;
}
.planscreen li {
  position: relative;
  padding-left: 8cqw;
  line-height: 1.3;
}
.planscreen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: var(--lime);
}
.planscreen__sub {
  margin: 6cqw 0 4cqw;
  color: #8a8a93;
  font-size: 4.2cqw;
}
.planscreen__card {
  display: grid;
  gap: 1.6cqw;
  padding: 5cqw;
  border: 1px solid rgba(187, 228, 72, 0.4);
  border-radius: 4cqw;
  background: rgba(187, 228, 72, 0.05);
}
.planscreen__card span {
  color: var(--lime);
  font-size: 4cqw;
}
.planscreen__card b {
  font-size: 6.2cqw;
  font-weight: 700;
}
.planscreen__card small {
  color: #8a8a93;
  font-size: 3.8cqw;
}
.planscreen__btn {
  margin-top: auto;
  padding: 4.4cqw;
  border-radius: 4cqw;
  background: var(--lime);
  color: var(--on-lime);
  text-align: center;
  font-weight: 600;
}

.steps {
  display: grid;
  gap: 1rem;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent);
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.step:hover {
  border-color: var(--hairline-strong);
  transform: translateX(4px);
}

/* Kaydırılan adım vurgulanır — sol taraftaki ekran da onunla değişir.
   Opaklık `.js .how .steps .step` ile veriliyor: `.step` aynı zamanda
   `.reveal` ve animations.css'teki `.js .reveal.is-visible { opacity: 1 }`
   daha yüksek özgüllükte + sonra yüklendiği için sade `.step` kuralı
   eziliyordu — soluklaştırma hiç çalışmıyordu. */
.step {
  transition: border-color 0.35s var(--ease), background-color 0.35s var(--ease),
    transform 0.35s var(--ease), opacity 0.45s var(--ease);
}
.js .how .steps .step {
  opacity: 0.42;
}
.js .how .steps .step.is-current {
  opacity: 1;
}
.step.is-current {
  opacity: 1;
  border-color: rgba(187, 228, 72, 0.45);
  background: linear-gradient(180deg, rgba(187, 228, 72, 0.09), transparent 70%);
}
.step.is-current .step__no {
  background: var(--lime);
  color: var(--on-lime);
  border-color: var(--lime);
  box-shadow: 0 0 24px -6px rgba(187, 228, 72, 0.8);
}
.step.is-current p {
  color: var(--text);
}
.step__no {
  transition: background-color 0.35s var(--ease), color 0.35s var(--ease),
    box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.step__no {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--lime);
  color: var(--lime);
  font-weight: 800;
  font-size: 0.9375rem;
  flex: none;
}
.step__no::before {
  content: counter(step, decimal-leading-zero);
}

.step h3 {
  margin-bottom: 0.4rem;
}
.step p {
  color: var(--text-2);
  font-size: 0.9375rem;
}

/* ══ Özellikler — bento ═════════════════════════════════ */

.bento {
  display: grid;
  gap: clamp(0.875rem, 1.4vw, 1.25rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-rows: minmax(200px, auto);
  }
  .b-hero {
    grid-column: span 4;
    grid-row: span 2;
  }
  .b-tall {
    grid-column: span 2;
    grid-row: span 2;
  }
  .b-wide {
    grid-column: span 3;
  }
  .b-third {
    grid-column: span 2;
  }
}

/* Telefonda iki sütun kalan kutucukları okunmaz yapıyordu: "Su takibi ve
   hatırlatıcılar" 110px'lik bir alanda beş satıra iniyordu. Tek sütuna geç. */
@media (max-width: 599px) {
  .bento {
    grid-template-columns: minmax(0, 1fr);
  }
  .b-hero,
  .b-tall,
  .b-wide,
  .b-third {
    /* Tek sütunlu ızgarada `span 2` örtük ikinci bir sütun yaratırdı. */
    grid-column: auto;
  }
}

@media (min-width: 600px) and (max-width: 759px) {
  .b-hero,
  .b-tall {
    grid-column: span 2;
  }
}

.tile {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.35rem, 2.2vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
  isolation: isolate;
}
.tile:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-4px);
}

.tile__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(187, 228, 72, 0.13);
  color: var(--lime);
  margin-bottom: 0.5rem;
  flex: none;
}
.tile__icon svg {
  width: 22px;
  height: 22px;
}

.tile h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.tile p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tile__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-3);
  /* Flex kutu olduğunda kalın kısım ayrı bir öğe sayılıp "Tek / çağrı"
     diye ikiye bölünüyordu; bu satır düz metin gibi aksın. */
  line-height: 1.5;
}
.tile__meta b {
  color: var(--lime);
  font-weight: 700;
}

/* Bento içi görseller */
.tile__shot {
  margin: 1.25rem -1px -1px;
  border-radius: var(--r) var(--r) 0 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  background: var(--bg);
  /* Burada bir maske vardı: görüntü kartın alt kenarında uygulamanın alt
     menü etiketlerini tam ortadan bölüyordu. Ekran görüntüsünün kendisi
     temiz satır sınırından kesildiği için artık gerek kalmadı — alt kenar
     zaten düz zemin, kartın rengiyle dikişsiz birleşiyor. */
}
.tile__shot img {
  width: 100%;
  display: block;
}

.tile--dark {
  background: linear-gradient(160deg, #1b2410, #121214 55%);
}

.tile__art {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
.tile__art--runner {
  right: -14%;
  bottom: -6%;
  width: 62%;
  opacity: 0.85;
}
.tile__art--athlete {
  right: -8%;
  bottom: -8%;
  width: 54%;
  opacity: 0.55;
  mask-image: linear-gradient(180deg, #000 55%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
}

/* Koç kartı: örnek konuşma (revizyon 07) */
.coachchat {
  display: grid;
  gap: 0.5rem;
  max-width: 34rem;
  margin: 0.9rem 0 0;
}
.coachchat figcaption {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tile .coachchat__msg {
  margin: 0;
  padding: 0.7rem 0.9rem;
  border-radius: 14px 14px 14px 4px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
}
.tile .coachchat__msg--me {
  justify-self: end;
  border-radius: 14px 14px 4px 14px;
  background: var(--lime);
  border-color: transparent;
  color: var(--on-lime);
  font-weight: 600;
}
.macros--compact {
  gap: 0.45rem;
  margin-top: 0.9rem;
  opacity: 0.8;
}
.macros--compact .macro {
  font-size: 0.75rem;
}

/* Makro çubukları — Bugün ekranındaki renklerle */
.macros {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.25rem;
}
.macro {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.macro__bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.macro__bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  width: 0;
  transition: width 1.1s var(--ease);
}
.is-visible .macro__bar i {
  width: var(--w);
}
.macro__val {
  font-variant-numeric: tabular-nums;
  color: var(--text);
  font-weight: 600;
}

/* ══ Move ve egzersiz kütüphanesi ═══════════════════════ */

/* Üstündeki Yöntem bölümü de koyu; iki koyu bölüm arasında ince bir ayrım. */
.moveex {
  border-top: 1px solid var(--hairline);
}

.moveex__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .moveex__grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: stretch;
  }
}

/* Sağ sütun: egzersiz duvarı + HIIT, alt alta ve sola eşit boyda */
.moveex__stack {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-rows: auto auto;
  min-height: 0;
}

.movecard,
.exwall,
.hiitcard {
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.movecard {
  background: linear-gradient(165deg, #1b2410, #17181b 55%);
  align-items: center;
  text-align: center;
}
.movecard .device {
  width: min(260px, 72%);
  flex: none;
}
.movecard__copy p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-top: 0.6rem;
}
.movecard__list {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  text-align: left;
  font-size: 0.875rem;
  color: var(--text-2);
}
.movecard__list li {
  position: relative;
  padding-left: 1.35rem;
}
.movecard__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
}

/* Move ekranının stilize çizimi */
.movescreen {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 0%, #1a1c17, #0d0e0c 60%);
  display: flex;
  flex-direction: column;
  padding: 13% 7% 7%;
}
.movescreen__top {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}
.movescreen__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.movescreen__map {
  flex: 1;
  width: 100%;
  min-height: 0;
  margin-block: 6%;
}
.movescreen__streets path {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 8;
  fill: none;
}
.movescreen__route {
  stroke: url(#routeGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(187, 228, 72, 0.55));
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: draw-route 4.5s var(--ease) forwards;
}
@keyframes draw-route {
  to {
    stroke-dashoffset: 0;
  }
}
.movescreen__start {
  fill: #0d0e0c;
  stroke: var(--lime);
  stroke-width: 3;
}
.movescreen__now {
  fill: var(--lime);
  stroke: rgba(187, 228, 72, 0.25);
  stroke-width: 8;
}

.movescreen__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2%;
  text-align: center;
}
.movescreen__stats b {
  display: block;
  font-size: clamp(0.6875rem, 1.6vw, 0.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.movescreen__stats span {
  display: block;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-top: 0.15rem;
}

/* Egzersiz duvarı */
.exwall {
  gap: 1.25rem;
}
.exwall__copy p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.65;
  margin-top: 0.6rem;
}
.exwall__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
}
@media (max-width: 520px) {
  .exwall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.exwall__grid figure {
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 5;
}
.exwall__grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 0.5s var(--ease);
}
.exwall__grid figure:hover img {
  scale: 1.07;
}
.exwall__grid figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.4rem 0.5rem 0.45rem;
  background: linear-gradient(0deg, rgba(11, 11, 12, 0.92), transparent);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-align: center;
}
.exwall__more {
  font-size: 0.8125rem;
  color: var(--text-3);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .movescreen__route {
    animation: none;
    stroke-dashoffset: 0;
  }
  .movescreen__dot {
    animation: none;
  }
}

/* HIIT kartı — turuncu, uygulamadaki HIIT kartının rengiyle aynı aile */
.hiitcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
  background: linear-gradient(150deg, #2a1a0d, #1c1613 58%);
  border-color: rgba(255, 122, 26, 0.22);
  overflow: hidden;
  position: relative;
}
@media (min-width: 560px) {
  .hiitcard {
    grid-template-columns: minmax(0, 1fr) 152px;
    gap: 1.75rem;
  }
}

.hiitcard__badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--flame);
  color: #1a0d03;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.hiitcard__copy p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-top: 0.5rem;
}
.hiitcard__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.hiitcard__stats b {
  display: block;
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--flame);
  line-height: 1.1;
}
.hiitcard__stats span {
  font-size: 0.6875rem;
  color: var(--text-3);
}

/* Telefon önce karttan taşırılıyordu; kart `overflow: hidden` olduğu için
   telefonun altı ve ekranındaki alt menü ortadan kesik görünüyordu. Artık
   tamamı kartın içinde duruyor. */
.hiitcard__device {
  align-self: center;
}

/* 560px altında ızgara tek sütuna düşüyor; telefon kart genişliğine
   yayılınca 640px boyunda bir dikdörtgen oluyordu. */
@media (max-width: 559px) {
  .hiitcard__device {
    width: min(190px, 56%);
    justify-self: center;
  }
}

/* ══ Ekran turu (açık zemin) ════════════════════════════ */

.tour {
  overflow: hidden;
}

.tour__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tour__nav {
  display: flex;
  gap: 0.6rem;
}
.tour__nav button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--paper-line);
  display: grid;
  place-items: center;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease), opacity 0.25s var(--ease);
}
.tour__nav button:hover:not(:disabled) {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: var(--paper);
}
.tour__nav button:disabled {
  opacity: 0.3;
  cursor: default;
}
.tour__nav svg {
  width: 18px;
  height: 18px;
}

.tour__rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  /* Şeridin sonuna gelince kaydırma tarayıcının "geri" hareketine
     devrolmasın — iOS'ta ekran turu sayfadan çıkarıyordu. */
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 1rem;
  /* kenardan kenara taşsın */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.tour__rail::-webkit-scrollbar {
  display: none;
}

.tour__item {
  flex: none;
  width: clamp(230px, 30vw, 300px);
  scroll-snap-align: center;
}
.tour__item img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--paper-line);
  background: var(--paper-2);
  box-shadow: 0 30px 50px -34px rgba(20, 21, 15, 0.55);
  transition: transform 0.4s var(--ease);
}
.tour__item:hover img {
  transform: translateY(-6px);
}
.tour__item figcaption {
  margin-top: 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tour__item p {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  margin-top: 0.15rem;
}

/* ══ Bilim / metodoloji ═════════════════════════════════ */

.science {
  position: relative;
  overflow: hidden;
}
.science__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 940px) {
  .science__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  }
}

.science__art {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--hairline);
}
.science__art img {
  width: 100%;
  filter: saturate(0.85) contrast(1.05);
}
.science__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(187, 228, 72, 0.16), transparent 55%),
    linear-gradient(0deg, rgba(11, 11, 12, 0.85), transparent 55%);
}

/* auto-fit, 1440px'de üç sütun + tek başına kalan dördüncü veriyordu.
   2×2 her genişlikte dengeli duruyor ve logolara yer bırakıyor. */
.refs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 2rem;
}
.ref {
  padding: 1rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.02);
}
.ref img {
  height: 26px;
  width: auto;
  margin-bottom: 0.6rem;
  /* Logolar açık zemin için üretilmiş; koyu bölümde parlaklık dengelemesi */
  filter: brightness(0) invert(1) opacity(0.92);
  transition: filter 0.3s var(--ease);
}
.ref:hover img {
  filter: brightness(0) invert(1) opacity(1);
}
.ref b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.ref span {
  font-size: 0.75rem;
  color: var(--text-3);
}

.notes {
  display: grid;
  gap: 1.1rem;
  margin-top: 2.25rem;
}
.note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}
.note svg {
  width: 22px;
  height: 22px;
  color: var(--lime);
  flex: none;
  margin-top: 2px;
}
.note b {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.note p {
  font-size: 0.875rem;
  color: var(--text-2);
}
/* 13.10.2026: antrenör belgesi bağlantısı (sources.html#uzman) */
.note p a,
.faq__a p a {
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.note p a:hover,
.faq__a p a:hover {
  color: var(--lime-bright);
}

/* Yöntem bölümünün 3B nokta alanı — içeriğin arkasında, kenarları maskeli */
.science__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.55;
  -webkit-mask-image: radial-gradient(
    ellipse 80% 70% at 50% 55%,
    #000 25%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 80% 70% at 50% 55%,
    #000 25%,
    transparent 78%
  );
}
.science .wrap {
  position: relative;
  z-index: 1;
}

/* ══ İçerik vitrini ═════════════════════════════════════ */

.showcase__tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.showcase__tabs button {
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--paper-line);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease),
    border-color 0.25s var(--ease);
}
.showcase__tabs button[aria-selected="true"] {
  background: var(--paper-ink);
  border-color: var(--paper-ink);
  color: var(--paper);
}

.showcase__grid {
  display: grid;
  /* 200px alt sınır, 1240px'lik kapsayıcıda tam 5 sütun veriyor —
     her panelde 5 kart var, geniş ekranda tek sıra oluyor. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.5rem);
  animation: panelIn 0.45s var(--ease) both;
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .showcase__grid {
    animation: none;
  }
}

.recipe {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.recipe:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 44px -30px rgba(20, 21, 15, 0.6);
}
.recipe__img {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.recipe__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.recipe__kcal {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: rgba(11, 11, 12, 0.78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.recipe__body {
  padding: 1rem 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.recipe__body h3 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.recipe__body p {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.recipe__foot {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  gap: 0.9rem;
  font-size: 0.75rem;
  color: var(--paper-muted);
  font-weight: 600;
}
.recipe__foot span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.guide {
  border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
  background: #fff;
  border: 1px solid var(--paper-line);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.guide:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 44px -30px rgba(20, 21, 15, 0.6);
}
.guide .micro {
  color: var(--lime-olive);
}
.guide h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.guide p {
  font-size: 0.8125rem;
  color: var(--paper-muted);
  line-height: 1.55;
}

/* ══ Neden Healife ══════════════════════════════════════
   Eskiden yorum kartlarıydı; sahte yorumlar kaldırılınca yerine
   uygulamadan doğrulanabilir üç madde geldi. Kart iskeleti aynı. */

.whys {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}

.why {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.why:hover {
  border-color: var(--hairline-strong);
  transform: translateY(-4px);
}

.why__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(187, 228, 72, 0.13);
  color: var(--lime);
  margin-bottom: 0.35rem;
  flex: none;
}
.why__icon svg {
  width: 22px;
  height: 22px;
}

.why h3 {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.why p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.why__meta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-3);
  line-height: 1.5;
}

/* ══ Fiyatlandırma ══════════════════════════════════════ */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  align-items: start;
}

/* Tek sütuna düşünce "En kapsamlı" etiketi üstteki karta değiyordu. */
@media (max-width: 719px) {
  .plans {
    gap: 1.75rem;
  }
}

.plan {
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.plan--featured {
  border-color: rgba(187, 228, 72, 0.45);
  background: linear-gradient(180deg, rgba(187, 228, 72, 0.08), var(--surface) 45%);
  box-shadow: 0 30px 60px -40px rgba(187, 228, 72, 0.5);
}
.plan__tag {
  position: absolute;
  top: -11px;
  left: clamp(1.5rem, 2.6vw, 2.25rem);
  padding: 0.25rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--lime);
  color: var(--on-lime);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan h3 {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
.plan__price {
  font-size: 0.875rem;
  color: var(--text-3);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--hairline);
}
.plan ul {
  display: grid;
  gap: 0.7rem;
  font-size: 0.9375rem;
}
.plan li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  color: var(--text-2);
}
.plan li svg {
  width: 18px;
  height: 18px;
  color: var(--lime);
  flex: none;
  margin-top: 3px;
}
.plan li.is-off {
  color: var(--text-3);
}
.plan li.is-off svg {
  color: var(--text-3);
  opacity: 0.5;
}
.plan .btn {
  margin-top: auto;
  width: 100%;
}

/* ── Ne, hangi pakette ────────────────────────────────────
   Üç kartın altındaki ayrıntı: her kapı için ücretsizde ne var, hangi
   abonelik neyi açıyor. Tablo yerine tanım listesi — dört sütunlu bir
   tablo telefonda okunmuyor, bu düzen her genişlikte aynı kalıyor. */

.gates {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
  /* Kartlar satırdaki en uzuna göre uzayınca kısa olanların altında
     400px boşluk kalıyordu; her kart kendi boyunda dursun. */
  align-items: start;
}

.gates__title {
  grid-column: 1 / -1;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.gate {
  padding: clamp(1.35rem, 2.2vw, 1.85rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.gate h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.gate dl {
  display: grid;
  gap: 0.9rem;
  margin: 1.1rem 0 0;
}
.gate dl > div {
  display: grid;
  /* Etiket sütunu içeriğe göre ölçülüyor — satırlar aynı ızgarayı
     paylaştığı için "Ücretsiz" ve "Program" alt alta hizalı kalıyor. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.85rem;
  align-items: start;
}
.gate dt {
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
}
.gate__free {
  background: var(--surface-2);
  color: var(--text-2);
}
.gate__on {
  background: var(--lime);
  color: var(--on-lime);
}
.gate dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-2);
}
.gate dd b {
  color: var(--text);
  font-weight: 700;
}

.gates__note {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.1rem, 2vw, 1.5rem);
  border: 1px solid rgba(187, 228, 72, 0.28);
  border-radius: var(--r);
  background: rgba(187, 228, 72, 0.06);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 74ch;
}
.gates__note b {
  color: var(--text);
  font-weight: 700;
}

/* ══ SSS ════════════════════════════════════════════════ */

.faq {
  max-width: 860px;
  margin-inline: auto;
}
.faq__item {
  border-bottom: 1px solid var(--hairline);
}
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  text-align: left;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color 0.25s var(--ease);
}
.faq__q:hover {
  color: var(--lime);
}
.faq__icon {
  width: 26px;
  height: 26px;
  flex: none;
  position: relative;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translateY(-50%);
  transition: transform 0.35s var(--ease), opacity 0.25s var(--ease);
}
.faq__icon::after {
  transform: translateY(-50%) rotate(90deg);
}
.faq__q[aria-expanded="true"] .faq__icon {
  color: var(--lime);
}
.faq__q[aria-expanded="true"] .faq__icon::after {
  transform: translateY(-50%) rotate(0);
  opacity: 0;
}

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq__a > div {
  overflow: hidden;
}
.faq__a[data-open="true"] {
  grid-template-rows: 1fr;
}
.faq__a p {
  color: var(--text-2);
  padding-bottom: 1.75rem;
  max-width: 68ch;
}

/* ══ Final CTA ══════════════════════════════════════════ */

.final {
  position: relative;
  overflow: hidden;
  background: var(--lime);
  color: var(--on-lime);
  text-align: center;
}
.final .lead {
  color: rgba(10, 10, 10, 0.72);
  margin-inline: auto;
  max-width: 52ch;
}
.final__art {
  position: absolute;
  bottom: -6%;
  right: -4%;
  width: min(420px, 44vw);
  opacity: 0.16;
  pointer-events: none;
  filter: grayscale(1);
}
.final .stores {
  justify-content: center;
  margin-top: 2.5rem;
}
.final .store {
  background: var(--ink);
  color: var(--text);
}
.final__note {
  margin-top: 1.75rem;
  font-size: 0.8125rem;
  color: rgba(10, 10, 10, 0.6);
}

/* ══ Footer ═════════════════════════════════════════════ */

.footer {
  background: var(--ink);
  padding-block: clamp(3.5rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--hairline);
}
.footer__top {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--hairline);
}
@media (min-width: 800px) {
  .footer__top {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}
.footer__brand img {
  height: 26px;
  width: auto;
  margin-bottom: 1.25rem;
}
/* Şirket kimliği: açıklama metniyle aynı boyut ve renk; <address>'in
   varsayılan italiği kapalı. */
.footer__company {
  margin-top: 0.9rem;
  font-style: normal;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-3);
}
.footer__company a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.footer__company a:hover {
  color: var(--text-2);
}
.footer__brand p {
  font-size: 0.875rem;
  color: var(--text-3);
  max-width: 34ch;
}
.footer h4 {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-3);
  margin-bottom: 1rem;
}
.footer li + li {
  margin-top: 0.6rem;
}
.footer li a {
  font-size: 0.9375rem;
  color: var(--text-2);
  transition: color 0.2s var(--ease);
}
.footer li a:hover {
  color: var(--lime);
}
/* Bağlantı listeleri tek sütunda footer'ı gereksiz uzatıyordu. */
@media (min-width: 460px) and (max-width: 799px) {
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

/* Yüzen dock alta indiği ölçülerde sayfanın son satırının üstüne
   biniyordu — dock yüksekliği kadar pay bırak. */
@media (max-width: 720px) {
  .footer {
    padding-bottom: calc(2rem + 62px + env(safe-area-inset-bottom));
  }
}

/* Ödeme logoları (PayTR şartı): koyu logolar açık zeminde okunur. */
.footer__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding-top: 1.75rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.paycards {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* .footer li + li dikey boşluk veriyor; yatay sırada sıfırla. */
.footer .paycards li {
  margin: 0;
  display: grid;
  place-items: center;
  width: 54px;
  height: 34px;
  border-radius: 7px;
  background: #fff;
}
.paycards img {
  display: block;
  height: auto;
}
.footer__bottom {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.footer__disclaimer {
  margin-top: 1.5rem;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 80ch;
  opacity: 0.8;
}

/* Yöntem bölümünden kaynaklar sayfasına giden bağlantı. Düğme değil —
   metnin devamı gibi okunsun diye altı çizili bir satır. */
.science__link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--lime);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: gap 0.25s var(--ease);
}
.science__link svg {
  width: 17px;
  height: 17px;
  flex: none;
}
.science__link:hover {
  gap: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════
   REVİZYON 11.09.2026 — yeni bileşenler
   ═══════════════════════════════════════════════════════════ */

/* ── Hero: destek cümlesi, kaynak bağlantısı, telefon (D-31, D-41, E-46) ── */
.hero__sub {
  max-width: 44ch;
  margin-bottom: 1.6rem;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.2rem);
  line-height: 1.5;
  color: var(--text-2);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.hero__note a,
.final__note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(187, 228, 72, 0.5);
}
.hero__note a:hover,
.final__note a:hover {
  text-decoration-color: currentColor;
}
.hero__device {
  display: none;
}
@media (min-width: 1180px) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) minmax(200px, 0.42fr);
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 3rem);
  }
  .hero__device {
    display: grid;
    grid-column: 3;
    width: min(100%, 250px);
    justify-self: end;
    rotate: 4deg;
  }
  .hero__device .device__screen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }
}

/* ── Güven şeridi (E-51) ── */
.trust {
  background: var(--ink);
  border-top: 1px solid var(--hairline);
}
.trust__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem clamp(1.25rem, 3vw, 2.75rem);
  padding-block: 1.1rem;
  font-size: 0.8125rem;
  color: var(--text-3);
}
.trust__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}
.trust__list svg {
  width: 18px;
  height: 18px;
  color: var(--lime);
  flex: none;
}
.trust__list b {
  color: var(--text);
  font-weight: 700;
}

/* ── Keşfet: Tarif Pişir (revizyon 08) ── */
.cook {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.35rem, 2.6vw, 2.25rem);
  border-radius: var(--r-lg);
  background: #121214;
  color: #f4f4f5;
}
@media (min-width: 900px) {
  .cook {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}
.cook .h3 {
  margin: 0.4rem 0 0.75rem;
  color: #fff;
}
.cook__copy > p:not(.micro) {
  color: #b4b4bb;
  line-height: 1.6;
}
.cook__note {
  margin-top: 0.9rem;
  font-size: 0.8125rem;
  color: #8a8a93 !important;
}
.cook__steps {
  display: grid;
  gap: 0.6rem;
  counter-reset: cook;
}
.cook__steps li {
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 1rem 0.9rem 3rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r);
  background: #1c1c20;
  counter-increment: cook;
  font-size: 0.875rem;
  color: #b4b4bb;
}
.cook__steps li::before {
  content: counter(cook);
  position: absolute;
  left: 1rem;
  top: 0.9rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--lime);
  color: var(--on-lime);
  font-size: 0.75rem;
  font-weight: 800;
}
.cook__steps b {
  color: #fff;
  font-size: 0.9375rem;
}
.cook__field {
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: #2a2a2f;
  color: #e4e4e7;
  font-size: 0.8125rem;
}
.cook__field--warn {
  background: rgba(187, 228, 72, 0.12);
  color: var(--lime);
}
.cook__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cook__chips i {
  font-style: normal;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.75rem;
}
.cook__chips i.is-on {
  background: var(--lime);
  border-color: transparent;
  color: var(--on-lime);
  font-weight: 700;
}

/* ── Kimler için (revizyon 10) ── */
.audience {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 0.75rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.audience li {
  padding: 1rem 1.1rem;
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--lime);
  border-radius: var(--r);
  background: var(--surface);
}
.audience b {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.audience span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  color: var(--text-3);
  line-height: 1.4;
}

/* ── Yöntem: metin rozetleri (D-40) ve formül/AI ayrımı (D-36) ── */
.ref b {
  color: var(--lime);
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.split__col {
  padding: 1.1rem 1.2rem;
  border-radius: var(--r);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.02);
}
.split__col--ai {
  border-color: rgba(187, 228, 72, 0.35);
  background: rgba(187, 228, 72, 0.06);
}
.split__head {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}
.split__col--ai .split__head {
  color: var(--lime);
}
.split ul {
  display: grid;
  gap: 0.4rem;
  font-size: 0.875rem;
  color: var(--text-2);
}
.split li {
  padding-left: 1rem;
  position: relative;
}
.split li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* ── Neden Healife: dört sütun (D-33) ── */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(0.875rem, 1.6vw, 1.25rem);
}
.pillar {
  padding: clamp(1.5rem, 2.4vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: border-color 0.35s var(--ease), transform 0.35s var(--ease);
}
.pillar:hover {
  border-color: rgba(187, 228, 72, 0.4);
  transform: translateY(-4px);
}
.pillar__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(187, 228, 72, 0.13);
  color: var(--lime);
  margin-bottom: 0.35rem;
}
.pillar__icon svg {
  width: 22px;
  height: 22px;
}
.pillar h3 {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pillar p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.pillar__meta {
  margin-top: auto;
  padding-top: 0.8rem;
  font-size: 0.75rem !important;
  color: var(--text-3) !important;
}
.whys--compact {
  margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}

/* ── Fiyat: kart özeti, karşılaştırma tablosu, abonelik notu (C-29, A-12) ── */
.plan__list {
  display: grid;
  gap: 0.5rem;
}
.plan__list li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.plan__list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.38em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--lime);
  border-bottom: 2px solid var(--lime);
  transform: rotate(-45deg);
}
.plan .btn {
  margin-top: auto;
}
.plan__desc {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.compare {
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow-x: auto;
  /* Tablodaki .sr-only etiketler position:absolute. Bu kutu konumlanmış
     olmazsa kaydırma alanının dışına (sayfaya) taşıyor ve telefonda tüm
     sayfa sağa-sola kayıyordu. */
  position: relative;
}
.compare table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
  font-size: 0.9375rem;
}
.compare caption {
  text-align: left;
  padding: 1.25rem 1.5rem 0.5rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.compare th,
.compare td {
  padding: 0.8rem 1rem;
  border-top: 1px solid var(--hairline);
  vertical-align: middle;
}
.compare thead th {
  border-top: 0;
  padding-top: 1rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.compare thead th:last-child {
  color: var(--lime);
}
.compare tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--text);
  padding-left: 1.5rem;
}
.compare td {
  text-align: center;
  color: var(--text-2);
  width: 20%;
}
.compare td svg {
  width: 18px;
  height: 18px;
  color: var(--lime);
  vertical-align: middle;
}
.compare td i {
  font-style: normal;
  color: var(--text-3);
  opacity: 0.55;
}
.compare td.is-text {
  font-size: 0.8125rem;
}
.compare tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}
.terms {
  margin-top: clamp(2rem, 4vw, 3rem);
}
.terms__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-2);
}
.terms__grid b {
  display: block;
  color: var(--text);
  margin-bottom: 0.15rem;
}

/* ── Kapanış: rozetler + QR (B-14) ── */
.final__get {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2.5rem;
  margin-top: 2.5rem;
}
.final__get .stores {
  margin-top: 0;
}
.final__qr {
  display: none;
  align-items: center;
  gap: 0.35rem;
  flex-direction: column;
  padding: 0.6rem;
  border-radius: var(--r-sm);
  background: #fff;
  color: #000;
}
.final__qr img {
  width: 104px;
  height: 104px;
  display: block;
}
.final__qr figcaption {
  font-size: 0.6875rem;
  font-weight: 700;
  color: rgba(10, 10, 10, 0.7);
}
@media (min-width: 940px) and (hover: hover) and (pointer: fine) {
  .final__qr {
    display: flex;
  }
}

/* ── Egzersiz duvarı: hover/dokunma videosu (E-54) ── */
.exwall__grid figure {
  position: relative;
}
.exwall__grid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
}
.exwall__grid figure.is-playing video {
  opacity: 1;
}
.exwall__grid figure.is-playing figcaption {
  z-index: 1;
}

/* Dar ekranda tablo yatay kayar; ilk sütun sabit kalsın, kaydırma ipucu görünsün */
@media (max-width: 720px) {
  .compare tbody th {
    position: sticky;
    left: 0;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--hairline);
    padding-left: 1rem;
    font-size: 0.875rem;
    max-width: 44vw;
  }
  .compare caption {
    padding-inline: 1rem;
  }
  .compare caption::after {
    content: "Sütunları görmek için yana kaydır →";
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--text-3);
  }
}

/* ── Üst şerit: cihaza göre mağaza rozeti ── */
.topbar__cta-generic {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.topbar__badge {
  display: none;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--text);
  color: var(--ink);
  line-height: 1.05;
  transition: background-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.topbar__badge svg {
  width: 20px;
  height: 20px;
  transition: none;
}
.topbar__badge em {
  font-style: normal;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.topbar__badge span {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.topbar__badge strong {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.topbar__cta:hover .topbar__badge {
  background: var(--lime);
  transform: translateY(-1px);
}
.topbar__cta:hover .topbar__badge svg {
  transform: none;
}
html[data-platform="ios"] .topbar__cta-generic,
html[data-platform="android"] .topbar__cta-generic {
  display: none;
}
html[data-platform="ios"] .topbar__badge--ios,
html[data-platform="android"] .topbar__badge--android {
  display: inline-flex;
}

/* ── Footer: mağaza rozetleri ── */
.footer__stores {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.store--sm {
  padding: 0.5rem 1rem 0.5rem 0.8rem;
}
.store--sm svg {
  width: 20px;
  height: 20px;
}
.store--sm strong {
  font-size: 0.875rem;
}

/* ── Hero: kısa masaüstü ekranlar (24.09.2026) ──
   Başlık yalnızca genişliğe göre büyüdüğü için 900px'ten kısa pencerelerde
   hero ekrana sığmıyor, mağaza rozetleri katlanıyor ve alttaki kaydırma
   ipucu rozetlerin üstüne biniyordu. Kısa ekranda ipucu gizlenir, boşluklar
   sıkılaşır ve başlık yüksekliğe göre de ölçeklenir: 28rem = başlık dışındaki
   içerik + dolgular, 4.2 = dört satırın satır yüksekliğiyle payı. */
@media (min-width: 940px) and (max-height: 900px) {
  .hero {
    padding-block: 5.75rem 2rem;
  }
  .hero__kicker {
    margin-bottom: 1.1rem;
  }
  .hero__title {
    font-size: clamp(2.6rem, min(0.8rem + 6vw, (100svh - 28rem) / 4.2), 5.6rem);
    margin-bottom: 1rem;
  }
  .hero__sub {
    margin-bottom: 1rem;
  }
  .hero__actions {
    margin-top: 1.25rem;
  }
  .hero__cue {
    display: none;
  }
}