/* ============================================================
   YÇFİT — BÖLÜMLER
   Her bölümün kendi düzeni. Ortak jetonlar tokens.css'te.
   ============================================================ */

/* ============================================================
   01 · HERO
   Gerçek tanıtım videosu tam kanama. Üstünde iki derece katmanı:
   (a) alttan yukarı siyah rampa — metin kontrastı,
   (b) zemin hizasında kehribar çizgi — salonun LED şeridinin devamı.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: clip;
  isolation: isolate;
}

.hero__media {
  /* Kutu bilerek viewport'tan uzun: kaydırma parallaksında üst/alt kenar açılmıyor. */
  position: absolute; left: 0; right: 0; top: -10%; height: 120%;
  z-index: -2; will-change: transform;
}
.hero__media img,
.hero__media video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  /* Görüntü salonun gerçek renginde. brightness .5 iken sahne kapkaranlıktı;
     .78'e açıldı, okunurluk artık filtreden değil aşağıdaki perdeden geliyor. */
  filter: contrast(1.06) saturate(.95) brightness(.78);
}
/* Afiş videonun poster niteliğinde; opaklık geçişi YOK — geçiş olsaydı
   afiş de gecikmeli boyanır ve LCP'yi geriye atardı. */
.hero__video { position: absolute; inset: 0; }

.hero__grade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__grade::before {
  content: ""; position: absolute; inset: 0;
  /* Dikey rampa okunurluk için; yatay perde ise sol taraftaki başlığı
     gündüz çekilmiş açık cepheden ayırıyor. */
  background:
    linear-gradient(180deg, rgba(6,6,5,.88) 0%, rgba(6,6,5,.10) 24%, rgba(6,6,5,.06) 44%, rgba(6,6,5,.88) 86%, var(--ink) 100%),
    /* Yatay perde yalnız başlığın oturduğu sol şeritte; sağ taraf açık kalıyor. */
    linear-gradient(90deg, rgba(6,6,5,.80) 0%, rgba(6,6,5,.42) 38%, rgba(6,6,5,0) 68%);
}
.hero__grade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 22%, var(--ember) 62%, transparent);
  opacity: .55;
  box-shadow: 0 0 40px 6px var(--ember-glow);
}

.hero__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--nav-h) + var(--s-6));
  padding-bottom: var(--s-6);
}
.hero__kicker {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--bone); margin-bottom: var(--s-6);
}
.hero__kicker i { font-style: normal; width: 7px; height: 7px; background: var(--blood); flex: none; }

/* Başlık bilerek --t-mega'dan küçük: tam boy kullanıldığında videoyu
   neredeyse tamamen örtüyordu. Sahne başrolde, yazı üstünde. */
.hero__title {
  font-size: clamp(2.3rem, 7.4vw, 6.4rem);
  line-height: 1;
  letter-spacing: var(--track-mega);
}
.hero__title .cut-line + .cut-line { margin-top: -.10em; }
.hero__title em { font-style: normal; color: var(--acid); }
/* İkinci satır bilerek girintili — merkezî blok değil, kayan bir yığın */
.hero__title .cut-line:nth-child(2) > span { padding-left: clamp(0px, 4vw, 3.4rem); }

.hero__foot {
  display: grid; gap: var(--s-5);
  margin-top: var(--s-7);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 880px) {
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-7); }
}
.hero__claim { max-width: 44ch; color: var(--bone); font-size: var(--t-md); line-height: 1.45; }
/* Sabit ara/WhatsApp çubuğu hero'nun butonlarını örtüyordu. */
@media (max-width: 859px) {
  .hero__body { padding-bottom: calc(var(--s-6) + 58px); }
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Video kontrolleri — WCAG: otomatik oynayan medya durdurulabilir olmalı */
.vctl {
  position: absolute; right: var(--gutter); top: calc(var(--nav-h) + var(--s-4));
  display: flex; gap: var(--s-2); z-index: 3;
}
.vctl button {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(6,6,5,.55); border: 1px solid var(--line);
  color: var(--bone); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background var(--d-fast) var(--e-cut), color var(--d-fast) var(--e-cut),
              border-color var(--d-fast) var(--e-cut);
}
.vctl button:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.vctl svg { width: 18px; height: 18px; }
.vctl [data-icon="off"] { display: none; }
.vctl button[aria-pressed="true"] [data-icon="on"]  { display: none; }
.vctl button[aria-pressed="true"] [data-icon="off"] { display: block; }

/* Kaydırma işareti */
/* Sağ kenarda dikey. Solda kalınca hero metniyle çakışıyordu. */
.scrollcue {
  display: none;
  position: absolute; right: var(--gutter); top: 50%;
  transform: translateY(-50%);
  flex-direction: column; align-items: center; gap: var(--s-4);
  font-size: var(--t-micro); letter-spacing: .28em; text-transform: uppercase;
  color: var(--ash);
  writing-mode: vertical-rl;
}
@media (min-width: 1024px) { .scrollcue { display: flex; } }
.scrollcue__rail { position: relative; width: 1px; height: 62px; background: var(--line); overflow: hidden; }
.scrollcue__dot { position: absolute; left: -1px; top: 0; width: 3px; height: 16px; background: var(--acid); }

/* ============================================================
   02 · MANİFESTO — sabitlenmiş, kelimeler kaydırmayla yanar
   ============================================================ */
.manifesto { position: relative; background: var(--ink); }
.manifesto__stage {
  /* 100svh değil: sabitlenmiş sahne değil bu, akan bir blok.
     Tam ekran yükseklik başlıkla metin arasında ölü boşluk açıyordu. */
  display: grid; align-content: center; gap: var(--s-6);
}
.manifesto__text {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5.1vw, 4.3rem);
  line-height: 1.16;
  text-transform: uppercase;
  letter-spacing: var(--track-head);
  max-width: 22ch;
}
/* Varsayılan okunur. Sönük başlangıcı yalnız GSAP kurar; hareket
   azaltmada veya JS düşerse metin tam kontrastla durur. */
.manifesto__text .w { color: var(--bone); will-change: color; }

.manifesto__grid {
  display: grid; gap: var(--s-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 980px) {
  .manifesto__grid { grid-template-columns: 1.35fr .65fr; gap: var(--s-8); align-items: center; }
}
.manifesto__aside { display: grid; gap: var(--s-5); }
.manifesto__shot {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line-soft);
}
.manifesto__shot img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.manifesto__shot figcaption {
  position: absolute; left: 0; bottom: 0;
  padding: .45rem .7rem; background: var(--ink);
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--ash);
}

/* Üç sütunlu ilke listesi */
.tenets {
  display: grid; gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--s-8);
}
@media (min-width: 760px) { .tenets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tenet {
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 760px) {
  .tenet { border-bottom: 0; border-left: 1px solid var(--line-soft); padding-left: var(--s-5); }
  .tenet:first-child { border-left: 0; padding-left: 0; }
}
.tenet__n {
  font-family: var(--font-display); font-size: 2.4rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--acid-2);
  display: block; margin-bottom: var(--s-3);
}
.tenet h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.tenet p { color: var(--ash); font-size: var(--t-sm); line-height: 1.6; }

/* ============================================================
   03 · SALON — yatay sabitlenmiş sahne
   ============================================================ */
.salon { position: relative; background: var(--ink-1); overflow: clip; }
.salon__pin { height: 100svh; display: flex; align-items: center; }
.salon__track { display: flex; gap: clamp(1rem, 2.4vw, 2.4rem); padding-inline: var(--gutter); will-change: transform; }
.salon__panel {
  position: relative; flex: none;
  width: clamp(260px, 62vw, 780px);
  height: clamp(360px, 74svh, 700px);

  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.salon__panel img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.salon__panel figcaption {
  position: absolute; left: 0; bottom: 0; right: 0;
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: linear-gradient(180deg, transparent, rgba(6,6,5,.92));
  display: flex; align-items: baseline; gap: var(--s-3);
}
.salon__panel b {
  font-family: var(--font-display); font-size: var(--t-md);
  text-transform: uppercase; letter-spacing: .01em; font-weight: 400;
}
.salon__panel span { font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--acid); }
@media (max-width: 720px) {
  /* Dar ekranda panel dar+uzun oluyordu; yatay kareler dilime dönüşüyordu. */
  .salon__panel { width: 84vw; height: clamp(300px, 50svh, 440px); }
  .salon__intro { width: 82vw; padding-right: 0; }
  .salon__hud { bottom: 66px; }
}

/* Sabitlenmiş sahnenin künyesi: yatay kaydırırken nerede olduğunu söyler
   ve panellerin üstündeki ölü boşluğu doldurur. */
.salon__hud {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: clamp(1rem, 3vh, 2.5rem);
  display: flex; align-items: center; gap: var(--s-4);
  pointer-events: none; z-index: 2;
}
.salon__hud-k {
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: var(--track-eyebrow); text-transform: uppercase;
  color: var(--ash-dim); white-space: nowrap;
}
.salon__hud-k b { color: var(--acid); font-weight: var(--fw-max); margin-right: .5em; }
.salon__hud-bar { flex: 1; height: 1px; background: var(--line); overflow: hidden; }
.salon__hud-bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--ember), var(--acid));
  transform: scaleX(0); transform-origin: left;
}

/* İlk panel bilerek dar ve metinli — yatay ritmi baştan kırar */
.salon__intro {
  flex: none; width: clamp(240px, 58vw, 420px);
  display: grid; align-content: center; gap: var(--s-4);
  padding-right: var(--s-5);
}
.salon__intro h2 { font-size: var(--t-xl); }
.salon__intro p { color: var(--ash); font-size: var(--t-sm); }
.salon__hint { display: flex; align-items: center; gap: var(--s-3); color: var(--ash-dim);
  font-size: var(--t-micro); letter-spacing: .24em; text-transform: uppercase; }
.salon__hint i { display: block; width: 42px; height: 1px; background: var(--ember); font-style: normal; }

/* ============================================================
   04 · HİZMETLER — 3B eğilen kartlar
   ============================================================ */
.svc__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .svc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .svc__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.svc {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-soft);
  background: var(--ink-2);
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-5);
  transition: border-color var(--d-mid) var(--e-cut);
  will-change: transform;
}
.svc:hover { border-color: var(--acid-3); }
/* İlk iki kart geniş — eşit ızgara yerine ağırlıklı ritim */
@media (min-width: 1180px) {
  .svc:nth-child(1) { grid-column: span 3; min-height: 420px; }
  .svc:nth-child(2) { grid-column: span 3; min-height: 420px; }
  .svc:nth-child(n+3) { grid-column: span 2; }
}
.svc__bg { position: absolute; inset: 0; z-index: 0; }
.svc__bg img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.44) saturate(.85) contrast(1.05);
  transform: scale(1.04);
  transition: transform .8s var(--e-load), filter .6s var(--e-load);
  will-change: transform;
}
.svc:hover .svc__bg img { transform: scale(1.12); filter: brightness(.58) saturate(1) contrast(1.08); }
.svc__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(6,6,5,.10) 30%, rgba(6,6,5,.90) 100%);
}
.svc__in { position: relative; z-index: 2; will-change: transform; }
.svc__n {
  position: absolute; top: var(--s-5); left: var(--s-5); z-index: 2;
  font-size: var(--t-micro); font-weight: var(--fw-max); letter-spacing: .26em;
  color: var(--acid);
}
.svc h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.svc p { color: var(--ash); font-size: var(--t-sm); line-height: 1.55; max-width: 34ch; }
.svc__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.svc__tags span {
  font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .55rem; border: 1px solid var(--line); color: var(--ash);
}
/* Alt kenarda kehribar LED — hover'da soldan sağa dolar */
.svc::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: var(--ember);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-mid) var(--e-cut);
}
.svc:hover::after, .svc:focus-within::after { transform: scaleX(1); }

/* ============================================================
   05 · NEDEN YÇFİT — sayaçlar + yıldız dolumu
   ============================================================ */
.why { background: var(--ink-1); }
.why__grid {
  display: grid; gap: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 980px) { .why__grid { grid-template-columns: .9fr 1.1fr; gap: var(--s-8); align-items: center; } }

.rating {
  border: 1px solid var(--line); background: var(--ink-2);
  padding: var(--s-6);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.rating__score {
  font-family: var(--font-display); font-size: clamp(4.5rem, 13vw, 8.5rem);
  line-height: .9; color: var(--acid); font-variant-numeric: tabular-nums;
}
.rating__of { font-family: var(--font-body); font-size: var(--t-md); color: var(--ash-dim); font-weight: var(--fw-body); }
.stars { display: flex; gap: 6px; margin-block: var(--s-4) var(--s-3); }
.star { position: relative; width: 26px; height: 26px; }
.star svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.star__bg { color: var(--steel-2); }
.star__fg { color: var(--ember); }
.rating__meta { font-size: var(--t-sm); color: var(--ash); }
.rating__meta b { color: var(--bone); font-weight: var(--fw-strong); }

.stats { display: grid; gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: var(--s-5) var(--s-4) var(--s-5) 0; border-bottom: 1px solid var(--line-soft); }
@media (min-width: 640px) {
  .stat { border-bottom: 0; border-left: 1px solid var(--line-soft); padding-left: var(--s-4); }
  .stat:first-child { border-left: 0; padding-left: 0; }
}
.stat__n {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.stat__n i { font-style: normal; color: var(--acid); }
.stat__l { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim); margin-top: var(--s-2); display: block; }

.why__points { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.point { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.point i {
  font-style: normal; display: block; width: 10px; height: 10px; margin-top: .55em;
  background: var(--acid); flex: none;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.point b { display: block; font-weight: var(--fw-strong); margin-bottom: 2px; }
.point p { color: var(--ash); font-size: var(--t-sm); line-height: 1.55; }

/* ============================================================
   05 · ÜYELER — foto + klip duvarı
   Galeri karolarıyla aynı .tile dili; aralarına iki video karosu giriyor.
   ============================================================ */
.mem__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
}
@media (min-width: 700px)  { .mem__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mem__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mem-tile { aspect-ratio: 3 / 4; }

.mem-video {
  position: relative; margin: 0; overflow: hidden;
  background: var(--steel); border: 1px solid var(--line-soft);
}
.mem-video video { width: 100%; height: 100%; object-fit: cover; }
/* Yatay klip iki sütun; satır yüksekliği 3/4 karolarla aynı hizada kalsın diye 3/2 */
.mem--wide { grid-column: span 2; aspect-ratio: 3 / 2; }
/* Dikey klip iki satır — en-boy oranı vermiyoruz, ızgara yüksekliğini alsın */
.mem--tall { grid-row: span 2; }

.mem-video figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: var(--s-5) var(--s-4) var(--s-3);
  background: linear-gradient(180deg, transparent, rgba(6,6,5,.92));
  display: flex; align-items: baseline; gap: var(--s-3);
}
.mem-video figcaption b {
  font-family: var(--font-display); font-size: var(--t-md);
  text-transform: uppercase; font-weight: 400;
}
.mem-video figcaption span {
  font-size: var(--t-micro); letter-spacing: .22em;
  text-transform: uppercase; color: var(--acid);
}
/* Duraklatılmışken köşede oynat işareti — klip olduğu belli olsun */
.mem-video::after {
  content: ""; position: absolute; right: var(--s-4); top: var(--s-4); z-index: 2;
  width: 0; height: 0; opacity: 0;
  border-left: 13px solid var(--acid);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  transition: opacity var(--d-mid) var(--e-cut);
}
.mem-video[data-paused="true"]::after { opacity: 1; }

/* Çalışma saatleri listesi */
.hours { display: grid; gap: var(--s-3); }
.hours i {
  display: block; font-style: normal;
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ash-dim); margin-bottom: 2px;
}

/* ============================================================
   06 · GALERİ
   ============================================================ */
.gal__bar {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-6);
}
.chip {
  padding: .55rem 1rem; background: transparent; cursor: pointer;
  border: 1px solid var(--line); color: var(--ash);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--d-fast) var(--e-cut), color var(--d-fast) var(--e-cut),
              border-color var(--d-fast) var(--e-cut);
}
.chip:hover { color: var(--bone); border-color: var(--ash-dim); }
.chip[aria-pressed="true"] { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.chip small { font-variant-numeric: tabular-nums; opacity: .6; margin-left: .4em; }

/* Sayfayı kısaltmak için galeri kapalı başlıyor: karolar ancak bir çipe
   basılınca iniyor. Kapalıyken ızgara hiç yer kaplamıyor. */
.gal__hint {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-6) 0;
  font-size: var(--t-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ash-dim);
  border-top: 1px solid var(--line-soft);
}
.gal__hint i { display: block; width: 34px; height: 2px; background: var(--ember); flex: none; }
.gal__grid[hidden], .gal__hint[hidden] { display: none; }

.gal__grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
}
@media (min-width: 620px)  { .gal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .gal__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .gal__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tile {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: var(--steel); cursor: pointer;
  overflow: hidden; aspect-ratio: 3 / 4;
}
.tile--wide { grid-column: span 2; aspect-ratio: 4 / 3; }
@media (max-width: 619px) { .tile--wide { grid-column: span 2; } }
.tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--e-load), filter .45s var(--e-load);
  filter: brightness(.82) saturate(.9);
  will-change: transform;
}

/* Odak yalıtımı: imleç duvarın üstündeyken TÜM karolar biraz sönüyor,
   yalnız imlecin altındaki aydınlanıyor ve büyüyor. Karo değil karonun
   kendisi büyüyor — komşularının üstüne binsin diye z-index yükseliyor. */
[data-lightbox]:hover .tile img,
[data-lightbox]:focus-within .tile img { filter: brightness(.42) saturate(.55); }

[data-lightbox] .tile {
  transition: transform .55s var(--e-load), z-index 0s;
  z-index: 1;
}
[data-lightbox] .tile:hover,
[data-lightbox] .tile:focus-visible {
  transform: scale(1.045);
  z-index: 3;
}
[data-lightbox]:hover .tile:hover img,
[data-lightbox] .tile:focus-visible img { filter: brightness(1.06) saturate(1.05); }
.tile:hover img, .tile:focus-visible img { transform: scale(1.05); }

/* Aynı sönme kuralı üye duvarındaki kliplere de uygulanıyor ki
   sadece fotoğraflar değil tüm duvar tek bir organizma gibi davransın. */
[data-lightbox]:hover .mem-video video { filter: brightness(.42) saturate(.55); }
.mem-video video { transition: filter .45s var(--e-load); }
.tile__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  padding: .35rem .6rem; background: var(--ink);
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase;
  color: var(--acid);
  transform: translateY(101%);
  transition: transform var(--d-mid) var(--e-cut);
}
.tile:hover .tile__tag, .tile:focus-visible .tile__tag { transform: translateY(0); }
.tile:focus-visible { outline-offset: -3px; cursor: pointer; }
.tile[hidden] { display: none; }
/* İşaretçi ancak özel imleç gerçekten devredeyse gizlenir. JS düşerse
   veya hareket azaltma açıksa normal işaretçi kalır. */
body[data-cursor="on"] .tile { cursor: none; }

/* ============================================================
   07 · YORUMLAR
   ============================================================ */
.rev__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 760px)  { .rev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .rev__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rev {
  border: 1px solid var(--line-soft); background: var(--ink-2);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4);
  transition: border-color var(--d-mid) var(--e-cut), transform var(--d-mid) var(--e-load);
}
.rev:hover { border-color: var(--line); transform: translateY(-4px); }
.rev__stars { display: flex; gap: 4px; color: var(--ember); }
.rev__stars svg { width: 15px; height: 15px; }
.rev p { color: var(--bone); font-size: var(--t-sm); line-height: 1.62; flex: 1; }
.rev footer { display: flex; align-items: center; gap: var(--s-3); border-top: 1px solid var(--line-soft); padding-top: var(--s-4); }
.rev__who { font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--ash); }
.rev__ph {
  display: inline-block; font-size: var(--t-micro); letter-spacing: .1em;
  text-transform: uppercase; color: var(--bone); background: var(--blood-2);
  padding: .2rem .5rem;
}
.rev--note { background: transparent; border-style: dashed; border-color: var(--line); }

.gbadge {
  display: inline-flex; align-items: center; gap: var(--s-3);
  border: 1px solid var(--line); padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.gbadge b { font-family: var(--font-display); font-size: var(--t-md); color: var(--acid); }
.gbadge span { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }

/* ============================================================
   08 · ÜYELİK / ÇAĞRI
   ============================================================ */
/* Görsel artık arka plan değil: kendi yerinde, tam kare, kırpılmadan
   duruyor. Yazılar resmin ALTINDA — üstünde hiçbir metin yok. */
.join { position: relative; isolation: isolate; }
.join__shot { margin: 0 0 var(--s-7); }
.join__shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--line-soft);
  filter: saturate(1.02);
  transition: filter .7s var(--e-load);
}
.join__shot:hover img { filter: saturate(1.08) brightness(1.04); }
.join__in { display: grid; gap: var(--s-6); }
@media (min-width: 980px) { .join__in { grid-template-columns: 1.25fr .75fr; gap: var(--s-8); align-items: end; } }
.join h2 { font-size: var(--t-xxl); }
.join__note { font-size: var(--t-sm); color: var(--ash); max-width: 40ch; }
.join__box {
  border: 1px solid var(--line); background: rgba(10,10,8,.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  padding: var(--s-6); display: grid; gap: var(--s-4);
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.join__box h3 { font-size: var(--t-lg); }
.join__phone {
  font-family: var(--font-display); font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  color: var(--bone); line-height: 1; letter-spacing: .01em;
  display: inline-block;
  transition: color var(--d-fast) var(--e-cut);
}
.join__phone:hover { color: var(--acid); }
.join__list { display: grid; gap: var(--s-2); font-size: var(--t-sm); color: var(--ash); }
.join__list li { display: flex; gap: var(--s-3); align-items: baseline; list-style: none; }
.join__list i { font-style: normal; color: var(--acid); font-weight: var(--fw-max); }
.join__list ul, .join__box ul { margin: 0; padding: 0; }

/* ============================================================
   09 · İLETİŞİM
   ============================================================ */
.contact__grid { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .contact__grid { grid-template-columns: .85fr 1.15fr; gap: var(--s-7); } }

.info { display: grid; gap: var(--s-5); align-content: start; }
.info__row { display: grid; gap: var(--s-2); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-soft); }
.info__row:last-child { border-bottom: 0; padding-bottom: 0; }
.info__k { font-size: var(--t-micro); letter-spacing: .26em; text-transform: uppercase; color: var(--ash-dim); }
.info__v { font-size: var(--t-md); line-height: 1.4; color: var(--bone); }
.info__v small { display: block; font-size: var(--t-sm); color: var(--ash); margin-top: var(--s-2); line-height: 1.5; }

.map {
  position: relative; border: 1px solid var(--line-soft);
  aspect-ratio: 4 / 3; background: var(--steel);
}
@media (min-width: 980px) { .map { aspect-ratio: auto; min-height: 460px; } }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.86); }
.map__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.map__shots figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-soft); }
.map__shots img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.86); transition: transform .7s var(--e-load); }
.map__shots figure:hover img { transform: scale(1.06); }
.map__shots figcaption {
  position: absolute; left: 0; bottom: 0; padding: .3rem .55rem; background: var(--ink);
  font-size: var(--t-micro); letter-spacing: .16em; text-transform: uppercase; color: var(--ash);
}

/* ============================================================
   ORTAK: KEN BURNS TAŞIYICISI
   Statik fotoğrafın yavaş kayması — GSAP kaydırmaya bağlar,
   hareket azaltmada JS hiç kurmaz.
   ============================================================ */
.kb { overflow: hidden; }
.kb > img { transform: scale(1.14); will-change: transform; }


/* ============================================================
   İŞLETME DOLDURACAK rozeti
   Yer tutucu içerik hiçbir zaman gerçekmiş gibi görünmesin diye
   her yerde aynı işaret kullanılıyor.
   ============================================================ */
.tag-todo {
  display: inline-block; margin-right: .6em;
  padding: .18rem .5rem;
  background: var(--blood-2); color: var(--bone);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .14em; text-transform: uppercase;
  vertical-align: .1em;
}

/* ============================================================
   KADRO
   ============================================================ */
.crew { background: var(--ink-1); }
.crew__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px)  { .crew__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .crew__grid { gap: var(--s-5); } }
.crew__card {
  position: relative;
  border: 1px solid var(--line-soft); background: var(--ink-2);
  padding: var(--s-5);
  display: grid; gap: var(--s-3); align-content: start;
  transition: border-color var(--d-mid) var(--e-cut), transform var(--d-mid) var(--e-load);
}
.crew__card:hover { border-color: var(--acid-3); transform: translateY(-4px); }
.crew__photo {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; margin-bottom: var(--s-3);
  border: 1px solid var(--line-soft); background: var(--steel);
}
.crew__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.86) saturate(.95);
  transition: filter .6s var(--e-load), transform .8s var(--e-load);
}
.crew__card:hover .crew__photo img { filter: brightness(1.04) saturate(1.05); transform: scale(1.04); }
.crew__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(6,6,5,.72) 100%);
}
.crew__n {
  position: absolute; top: var(--s-5); right: var(--s-5);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .24em; color: var(--acid);
}
.crew__name { font-size: var(--t-lg); color: var(--bone); }
.crew__role { font-size: var(--t-sm); color: var(--bone); font-weight: var(--fw-strong); }
.crew__spec { font-size: var(--t-sm); color: var(--ash); }

/* ============================================================
   ÖNCE / SONRA
   ============================================================ */
.ba { margin-top: var(--s-8); border-top: 1px solid var(--line-soft); padding-top: var(--s-6); }
.ba__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 900px) {
  .ba__head { grid-template-columns: 22ch minmax(0, 1fr); gap: var(--s-7); align-items: baseline; }
}
.ba__title { font-size: var(--t-lg); }
.ba__note { font-size: var(--t-sm); color: var(--ash); max-width: 62ch; }
.ba__note strong { color: var(--bone); }

.ba__stage {
  position: relative; overflow: hidden;
  max-width: 720px; margin-inline: auto;
  aspect-ratio: 1170 / 1344;
  border: 1px solid var(--line-soft);
  background: var(--steel);
  touch-action: pan-y;
}
.ba__layer { position: absolute; inset: 0; display: block; }
.ba__layer img { width: 100%; height: 100%; object-fit: cover; }
/* "Önce" katmanı sağdan kırpılıyor; oran JS tarafından --ba ile veriliyor */
.ba__layer--before { clip-path: inset(0 calc(100% - var(--ba, 50%)) 0 0); }

.ba__tag {
  position: absolute; top: var(--s-4); z-index: 3;
  padding: .3rem .6rem; background: var(--ink);
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ash);
}
.ba__tag--l { left: var(--s-4); }
.ba__tag--r { right: var(--s-4); color: var(--acid); }

.ba__handle {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--ba, 50%);
  width: 2px; margin-left: -1px;
  background: var(--acid);
  box-shadow: 0 0 22px var(--acid-glow);
  pointer-events: none;
}
.ba__handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 2px solid var(--acid); background: rgba(6,6,5,.72);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
/* Aralık girdisi görünmez ama tam sahneyi kaplıyor: fare, dokunuş ve
   klavye (ok tuşları) aynı bileşenden geliyor — ayrı sürükleme kodu yok. */
.ba__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
  -webkit-appearance: none; appearance: none; background: transparent;
}
.ba__range:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; opacity: 0; }
.ba__stage:focus-within .ba__handle { box-shadow: 0 0 30px var(--acid); }

/* ============================================================
   ÜYELİK PAKETLERİ
   ============================================================ */
.plans { background: var(--ink-1); }
.plans__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 860px) { .plans__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Süre paketleri dörtlü: dar ekranda tek, orta ekranda iki, geniş ekranda dört */
@media (min-width: 620px)  { .plans__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px)  { .plans__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .plans__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.plan {
  position: relative;
  border: 1px solid var(--line-soft); background: var(--ink-2);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: border-color var(--d-mid) var(--e-cut), transform var(--d-mid) var(--e-load);
}
.plan:hover { border-color: var(--line); transform: translateY(-4px); }
.plan--hot {
  border-color: var(--acid-3);
  background: linear-gradient(180deg, rgba(200,255,0,.05), transparent 42%), var(--ink-2);
}
.plan--hot:hover { border-color: var(--acid); }
.plan__flag {
  position: absolute; top: 0; right: 0;
  background: var(--acid); color: var(--ink);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .14em; text-transform: uppercase;
  padding: .32rem .7rem;
}
.plan__name { font-size: var(--t-lg); }
.plan__price { display: flex; align-items: baseline; gap: .4em; }
.plan__num {
  font-family: var(--font-display); font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--acid);
}
.plan__price i {
  font-style: normal; font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ash-dim);
}
/* fiyatın altındaki aylık karşılık satırı */
.plan__sub {
  margin: calc(var(--s-3) * -1) 0 0;
  font-size: var(--t-sm); color: var(--ash-dim);
}
.plan--hot .plan__sub { color: var(--acid-3); }
.plan__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); flex: 1; }
.plan__list li {
  position: relative; padding-left: 1.4em;
  font-size: var(--t-sm); color: var(--ash); line-height: 1.5;
}
.plan__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--acid-3);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.plan--hot .plan__list li::before { background: var(--acid); }
.plan .btn { align-self: start; }

/* ============================================================
   DENEME FORMU
   ============================================================ */
.tryform { display: grid; gap: var(--s-4); }
.tryform__row { display: grid; gap: var(--s-2); }
.tryform label {
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim);
}
.tryform input, .tryform select {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--ink); color: var(--bone);
  border: 1px solid var(--line);
  font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--e-cut), background var(--d-fast) var(--e-cut);
}
.tryform input::placeholder { color: var(--ash-dim); }
.tryform input:focus, .tryform select:focus {
  outline: none; border-color: var(--acid); background: var(--ink-2);
}
.tryform input:focus-visible, .tryform select:focus-visible {
  outline: 2px solid var(--acid); outline-offset: 2px;
}
.tryform input[aria-invalid="true"] { border-color: var(--blood); }
.tryform__err {
  font-size: var(--t-sm); color: var(--bone);
  background: var(--blood-2); padding: .5rem .7rem;
}
.tryform__err[hidden] { display: none; }
.tryform select {
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--acid) 50%),
                    linear-gradient(135deg, var(--acid) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.4rem;
}


/* ============================================================
   MARKA BANDI — harflerin içinde oynayan salon görüntüsü
   Teknik: üstteki katman saf siyah zemin + beyaz yazı, mix-blend-mode:
   multiply. Beyaz × video = video (harfler), siyah × video = siyah (zemin).
   Karışım desteklenmeyen tarayıcıda video hiç yüklenmiyor, beyaz yazı
   siyah üstünde okunur kalıyor — bozulma yok.
   ============================================================ */
.filmtype {
  position: relative; isolation: isolate; overflow: hidden;
  background: #000;
  /* Yükseklik içerikten değil buradan geliyor: maske katmanı mutlak konumlu
     olduğu için akışta yer kaplamıyor. */
  min-height: clamp(230px, 30vw, 460px);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: grid; place-items: center;
  border-block: 1px solid var(--line-soft);
  z-index: 2;
}
.filmtype__v {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.25) saturate(1.1) brightness(1.25);
  opacity: 0;
  transition: opacity .8s var(--e-load);
}
.filmtype__v[data-ready="true"] { opacity: 1; }
/* Maske BÖLÜMÜN TAMAMINI kaplamalı: yalnız yazıyı sarınca video harflerin
   dışında da görünüyordu. Siyah zemin × video = siyah, beyaz harf × video = video. */
.filmtype__mask {
  position: absolute; inset: 0; z-index: 1;
  background: #000;
  padding-inline: var(--gutter);
  /* Ç'nin kuyruğu taban çizgisinin altına sarkıyor; alt yazıyla çakışmasın
     diye kelime biraz yukarı alınıyor. */
  padding-bottom: clamp(2.2rem, 4.5vw, 4rem);
  display: grid; place-items: center;
}
.filmtype__word {
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 19vw, 17rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: #fff;
  text-align: center;
  margin: 0;
}
.filmtype__sub {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(.9rem, 2.5vw, 1.8rem); z-index: 2;
  width: max-content; max-width: calc(100% - 2 * var(--gutter));
  text-align: center;
  font-size: var(--t-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ash);
  background: #000; padding: .3rem .8rem;
}
/* Dar ekranda tek satıra sığmıyor — harf aralığı kısalıyor, satır sarıyor */
@media (max-width: 620px) {
  .filmtype__sub { letter-spacing: .14em; width: auto; white-space: normal; }
}
@supports (mix-blend-mode: multiply) {
  .filmtype__mask { mix-blend-mode: multiply; }
}
/* Karışım yoksa videoyu hiç indirme — JS bu sınıfı kontrol ediyor */
@supports not (mix-blend-mode: multiply) {
  .filmtype__v { display: none; }
}

/* ============================================================
   SALON MİNİ PLAN — hangi paneldesin
   ============================================================ */
.salon__map { display: flex; gap: 4px; flex: none; }
.salon__map i {
  display: block; width: 14px; height: 3px;
  background: var(--line); font-style: normal;
  transition: background var(--d-fast) var(--e-cut), transform var(--d-fast) var(--e-cut);
}
.salon__map i[data-on="true"] { background: var(--acid); transform: scaleY(2.2); }
@media (max-width: 720px) { .salon__map { display: none; } }

/* 3B derinlik: paneller merkezden geçerken hafifçe dönüyor */
.salon__panel { transform-style: flat; will-change: transform; }

/* ============================================================
   İMLEÇ IŞIK İZİ
   Tek katman, screen karışımı; yalnız ince işaretçili cihazlarda.
   ============================================================ */
.glow {
  position: fixed; top: 0; left: 0; z-index: 3;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255,154,31,.16) 0%, rgba(255,154,31,.06) 38%, transparent 68%);
  mix-blend-mode: screen;
  transition: opacity .5s linear;
  will-change: transform;
}
.glow[data-on="true"] { opacity: 1; }
@media (hover: none), (pointer: coarse) { .glow { display: none; } }
@media (prefers-reduced-motion: reduce) { .glow { display: none !important; } }

/* Kadro foto çerçevesi kareye yakın — boş çerçeveler sayfayı şişirmesin */
.crew__photo { aspect-ratio: 1 / 1; }


/* ============================================================
   ÜYE KLİPLERİ — ızgaradan ayrıldı, fotoğraflar katlanır oldu
   ============================================================ */
/* Klipler KIRPILMIYOR: her kutu kendi videosunun en-boy oranını alıyor
   (yatay klip 1124×720, dikey klip 576×1024). Sütun genişlikleri de bu
   oranlara göre verildi — 2,7753 : 1 — böylece iki kutunun yüksekliği
   birebir eşit çıkıyor ve satır düzgün duruyor.
   Önceden kutu 16/9'du, video "cover" ile kesiliyordu: kadrajın kenarları
   ve üstteki kişi ekran dışında kalıyordu. */
.mem__clips {
  display: grid; gap: 12px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: var(--s-5);
}
@media (min-width: 800px) {
  .mem__clips { grid-template-columns: 2.7753fr 1fr; align-items: start; }
}
.mem__clips .mem--wide { grid-column: auto; aspect-ratio: 1124 / 720; }
.mem__clips .mem--tallclip { aspect-ratio: 576 / 1024; }
/* Oran kutuyla eşit olduğu için "contain" bant bırakmıyor; yuvarlama
   farkında bile kırpmak yerine kılpayı bant bırakmayı tercih ediyoruz. */
.mem__clips .mem-video video { object-fit: contain; background: var(--ink); }

/* Üzerine gelinen klip parlıyor, diğerleri kararıyor — salon sahnesindeki
   odak davranışının aynısı. Büyütme `scale` özelliğiyle, transform ile değil. */
.mem__clips .mem-video { transition: filter .35s var(--e-cut), scale .35s var(--e-load); }
.mem__clips:hover .mem-video video { filter: brightness(.38) saturate(.6); }
.mem__clips .mem-video:hover video,
.mem__clips .mem-video:focus-within video { filter: brightness(1.06) saturate(1.05); }
.mem__clips .mem-video:hover,
.mem__clips .mem-video:focus-within { scale: 1.02; z-index: 2; }
.mem__grid[hidden] { display: none; }

/* Panelden sonradan yayınlanan klipler. Sabit ikilinin oran kilidine
   girmiyorlar: kendi ızgaraları var, boşken hiç yer kaplamıyorlar.
   Parlama/karartma ve büyüme davranışı yukarıdakiyle aynı. */
.mem__clips--added:empty { display: none; }
.mem__clips--added { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
@media (min-width: 800px) {
  .mem__clips--added { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
/* Kutunun oranını dosyanın kendi oranı belirliyor (JS satır içi
   aspect-ratio yazıyor), o yüzden sabit oran sınıfları burada iptal.
   Bant kalmıyor, dikey klip de ekranı kaplamıyor. */
.mem__clips--added .mem--wide     { grid-column: auto; aspect-ratio: auto; }
.mem__clips--added .mem--tallclip { aspect-ratio: auto; }
.mem__clips--added .mem-video { max-height: 62vh; }
.mem__clips--added .mem-video video,
.mem__clips--added .mem-video img {
  display: block; width: 100%; height: 100%;
  object-fit: contain; background: var(--ink);
  transition: filter .45s var(--e-load);
}
/* Dar kutuda başlık kareyi yutmasın */
.mem__clips--added .mem-video figcaption {
  padding: var(--s-5) var(--s-3) var(--s-2);
  flex-wrap: wrap; gap: var(--s-2);
}
.mem__clips--added .mem-video figcaption b { font-size: var(--t-sm); line-height: 1.15; }
.mem__clips--added:hover .mem-video img { filter: brightness(.38) saturate(.6); }
.mem__clips--added .mem-video:hover img,
.mem__clips--added .mem-video:focus-within img { filter: brightness(1.06) saturate(1.05); }

/* ============================================================
   YORUMLAR — artık "Neden" bölümünün içinde
   ============================================================ */
.revs { margin-top: var(--s-8); border-top: 1px solid var(--line-soft); padding-top: var(--s-6); }
.revs__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 900px) {
  .revs__head { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr); gap: var(--s-7); align-items: baseline; }
}
.revs__title { font-size: var(--t-lg); }
.revs__note { font-size: var(--t-sm); color: var(--ash); max-width: 60ch; }
.rev p { font-size: var(--t-md); line-height: 1.45; color: var(--bone); }

/* ---- ziyaretçi yorum formu ---- */
.revform {
  margin-top: var(--s-6);
  border: 1px solid var(--line-soft); background: var(--ink-2);
  padding: var(--s-6) var(--s-5);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}
.revform__title { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.revform__note { font-size: var(--t-sm); color: var(--ash); max-width: 62ch; margin-bottom: var(--s-5); }
.revform form { display: grid; gap: var(--s-4); max-width: 640px; }
.revform .label {
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim);
}
.revform textarea {
  width: 100%; padding: .85rem 1rem; resize: vertical;
  background: var(--ink); color: var(--bone); border: 1px solid var(--line);
  font: inherit; font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--e-cut);
}
.revform textarea:focus { outline: none; border-color: var(--acid); background: var(--ink-2); }
.revform textarea:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.revform__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

.rvstars { display: flex; gap: 4px; }
.rvstars button {
  background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-size: 1.75rem; line-height: 1; color: var(--steel-2);
  transition: color var(--d-fast) var(--e-cut), transform var(--d-fast) var(--e-impact);
}
.rvstars button[data-on="true"] { color: var(--ember); }
.rvstars button:hover { transform: translateY(-2px); }
.rvstars button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

/* ============================================================
   SPOR VE DİYET PROGRAMLARI
   ============================================================ */
.prog { background: var(--ink-1); }
.prog__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .prog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Dörtlü seviye ızgarası: telefon 1, tablet 2, geniş ekran 4 */
.prog__grid--4 { grid-template-columns: minmax(0, 1fr); }
/* display:grid, hidden özniteliğinin display:none'ını eziyor —
   kapalı panel gerçekten kapansın diye açıkça geri alınıyor. */
.prog__grid[hidden] { display: none; }
@media (min-width: 620px)  { .prog__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .prog__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1140px) { .prog__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Süre seçici — başlık, sekmeler, uyarı */
.prog__pick { margin-bottom: var(--s-5); }
.prog__pickh {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-family: var(--font-display); line-height: .95;
  text-transform: uppercase; letter-spacing: .01em;
  margin: 0 0 var(--s-3);
}
.prog__picknote {
  margin: 0 0 var(--s-4);
  font-size: var(--t-sm); color: var(--ash);
}
.prog__tabnote {
  max-width: 54ch; margin: var(--s-4) 0 0;
  font-size: var(--t-sm); color: var(--ash-dim); line-height: 1.6;
}

}
/* Fiyatın altındaki iki küçük satır */
.prog__sub {
  margin: calc(var(--s-3) * -1) 0 0;
  font-size: var(--t-sm); color: var(--ash);
}
.prog__sub--dim { margin-top: calc(var(--s-4) * -1 + .25rem); color: var(--ash-dim); }
.prog__card--hot .prog__sub { color: var(--acid-3); }
.prog__card {
  position: relative;
  border: 1px solid var(--line-soft); background: var(--ink-2);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-4);
  transition: border-color var(--d-mid) var(--e-cut), transform var(--d-mid) var(--e-load);
}
.prog__card:hover { border-color: var(--line); transform: translateY(-4px); }
.prog__card--hot {
  border-color: var(--acid-3);
  background: linear-gradient(180deg, rgba(200,255,0,.055), transparent 44%), var(--ink-2);
}
.prog__card--hot:hover { border-color: var(--acid); }
.prog__flag {
  position: absolute; top: 0; right: 0;
  background: var(--acid); color: var(--ink);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .14em; text-transform: uppercase; padding: .32rem .7rem;
}
.prog__n {
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .26em; color: var(--ember);
}
.prog__name { font-size: var(--t-lg); }
.prog__price { display: flex; align-items: baseline; gap: .4em; }
.prog__num {
  font-family: var(--font-display); font-size: clamp(2.4rem, 4.6vw, 3.2rem);
  line-height: 1; color: var(--acid);
}
.prog__price i {
  font-style: normal; font-size: var(--t-sm);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ash-dim);
}
/* align-content:start — madde sayısı az olan kartta satırlar esneyip
   aralarında boşluk açmasın; kart yine kolonu doldursun. */
.prog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); flex: 1; align-content: start; }
.prog__list li {
  position: relative; padding-left: 1.4em;
  font-size: var(--t-sm); color: var(--ash); line-height: 1.5;
}
.prog__list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; background: var(--acid-3);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.prog__card--hot .prog__list li::before { background: var(--acid); }
.prog__card .btn { align-self: start; }

/* Programı yazan kişi — küçük künye */
.prog__by {
  display: flex; align-items: center; gap: var(--s-4);
  margin-top: var(--s-5);
  border-left: 2px solid var(--ember); padding-left: var(--s-4);
}
.prog__by img {
  width: 64px; height: 64px; flex: none; object-fit: cover;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.prog__by b { display: block; font-weight: var(--fw-strong); color: var(--bone); }
.prog__by span { font-size: var(--t-sm); color: var(--ash); }

/* ============================================================
   SABİT WHATSAPP DÜĞMESİ
   ============================================================ */
.wafab {
  position: fixed; right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: calc(var(--z-nav) + 2);
  display: grid; place-items: center;
  width: 62px; height: 62px;
  background: #25D366; color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55);
  animation: wapulse 3.4s var(--e-load) infinite;
  transition: transform var(--d-fast) var(--e-impact);
}
.wafab:hover { transform: translateY(-3px) scale(1.05); }
.wafab:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }
.wafab__tip {
  position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(8px);
  white-space: nowrap; padding: .45rem .75rem;
  background: var(--ink); color: var(--bone); border: 1px solid var(--line);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .14em; text-transform: uppercase;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-fast) var(--e-cut), transform var(--d-fast) var(--e-cut);
}
.wafab:hover .wafab__tip, .wafab:focus-visible .wafab__tip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
@keyframes wapulse {
  0%   { box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.5); }
  60%  { box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 16px rgba(37,211,102,0); }
  100% { box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,0); }
}
/* Mobilde alttaki ara/WhatsApp çubuğunun üstünde dursun */
@media (max-width: 859px) { .wafab { bottom: 66px; width: 56px; height: 56px; } .wafab__tip { display: none; } }
@media (prefers-reduced-motion: reduce) { .wafab { animation: none; } }


/* ============================================================
   SES DAVETİ — hero'da bir kez görünür
   ============================================================ */
.soundcue {
  position: absolute; right: var(--gutter);
  top: calc(var(--nav-h) + var(--s-4) + 56px);
  z-index: 4;
  display: flex; align-items: center; gap: var(--s-3);
  padding: .55rem .8rem;
  background: rgba(6,6,5,.82); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ash);
  animation: cuein .6s var(--e-load) both;
}
.soundcue[hidden] { display: none; }
.soundcue button {
  background: var(--acid); color: var(--ink); border: 0; cursor: pointer;
  padding: .35rem .6rem;
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .14em; text-transform: uppercase;
}
@keyframes cuein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .soundcue { left: var(--gutter); right: var(--gutter); justify-content: space-between; } }

/* ============================================================
   KAT PLANI
   ============================================================ */
.plan2 { background: var(--ink-1); }
.plan2__wrap { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .plan2__wrap { grid-template-columns: minmax(0, 1fr) 24ch; gap: var(--s-7); align-items: start; } }
.plan2__svg { width: 100%; height: auto; display: block; }
.plan2__svg .zone rect {
  fill: var(--ink-2); stroke: var(--line); stroke-width: 2;
  transition: fill var(--d-fast) var(--e-cut), stroke var(--d-fast) var(--e-cut);
}
.plan2__svg .zone { cursor: pointer; }
.plan2__svg .zone:hover rect,
.plan2__svg .zone:focus-visible rect { fill: #14170B; stroke: var(--acid); }
.plan2__svg .zone:focus-visible { outline: none; }
.plan2__svg .zone__t {
  fill: var(--ember); font-family: var(--font-body); font-weight: 800;
  font-size: 20px; letter-spacing: .22em;
}
.plan2__svg .zone__n {
  fill: var(--bone); font-family: var(--font-display); font-size: 34px;
  text-transform: uppercase;
}
.plan2__svg .zone:hover .zone__n { fill: var(--acid); }
.plan2__svg .zone__s { fill: var(--ash); font-family: var(--font-body); font-size: 16px; }
.plan2__side { display: grid; gap: var(--s-4); align-content: start; }
.plan2__hint {
  display: flex; align-items: center; gap: var(--s-3);
  font-size: var(--t-micro); letter-spacing: var(--track-eyebrow);
  text-transform: uppercase; color: var(--ash-dim);
}
.plan2__hint i { display: block; width: 30px; height: 2px; background: var(--ember); font-style: normal; }
.plan2__note { font-size: var(--t-sm); color: var(--ash); line-height: 1.55; }

/* ============================================================
   SALON TURU
   ============================================================ */
.tour {
  position: fixed; inset: 0; z-index: var(--z-light);
  background: rgba(4,4,3,.97);
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  opacity: 0; visibility: hidden;
  transition: opacity var(--d-mid) var(--e-cut), visibility 0s linear var(--d-mid);
}
.tour[data-open="true"] {
  opacity: 1; visibility: visible;
  transition: opacity var(--d-mid) var(--e-cut), visibility 0s linear 0s;
}
.tour__bar, .tour__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-4) var(--gutter);
}
.tour__bar { border-bottom: 1px solid var(--line-soft); }
.tour__foot { border-top: 1px solid var(--line-soft); }
.tour__zone {
  font-family: var(--font-display); font-size: var(--t-md);
  text-transform: uppercase; color: var(--acid);
}
.tour__count, .tour__cap { font-size: var(--t-micro); letter-spacing: .22em; color: var(--ash); text-transform: uppercase; }
.tour__stage {
  position: relative; overflow: hidden; min-height: 0;
  cursor: grab; touch-action: pan-y;
}
.tour__stage:active { cursor: grabbing; }
.tour__stage img {
  position: absolute; inset: 0; box-sizing: border-box;
  width: 100%; height: 100%;
  padding: var(--s-4) var(--gutter);
  object-fit: contain;
  user-select: none; -webkit-user-drag: none;
}
.tour__grab {
  position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%);
  padding: .4rem .8rem; background: rgba(6,6,5,.7); border: 1px solid var(--line);
  font-size: var(--t-micro); letter-spacing: .22em; text-transform: uppercase; color: var(--ash);
  pointer-events: none;
  transition: opacity var(--d-mid) var(--e-cut);
}
.tour[data-moved="true"] .tour__grab { opacity: 0; }
.tour__rail { flex: 1; max-width: 380px; height: 2px; background: var(--line); overflow: hidden; }
.tour__rail i { display: block; height: 100%; width: 0; background: var(--acid); transition: width .25s var(--e-cut); }

/* ============================================================
   EKİPMAN KÜTÜPHANESİ
   ============================================================ */
.eqlib { margin-top: var(--s-8); border-top: 1px solid var(--line-soft); padding-top: var(--s-6); }
.eqlib__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-5); }
@media (min-width: 900px) { .eqlib__head { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr); gap: var(--s-7); align-items: start; } }
.eqlib__title { font-size: var(--t-lg); }
.eqlib__head .btn { grid-column: 1 / -1; justify-self: start; }
.eqlib__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px)  { .eqlib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .eqlib__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eqlib__grid[hidden] { display: none; }
.eq {
  border: 1px solid var(--line-soft); background: var(--ink-2);
  display: grid; gap: var(--s-2); align-content: start;
  padding-bottom: var(--s-4);
  transition: border-color var(--d-mid) var(--e-cut), transform var(--d-mid) var(--e-load);
}
.eq:hover { border-color: var(--acid-3); transform: translateY(-3px); }
.eq__ph { overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: var(--s-2); }
.eq__ph img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.85); transition: transform .7s var(--e-load); }
.eq:hover .eq__ph img { transform: scale(1.06); }
.eq__name { font-size: var(--t-md); font-family: var(--font-display); text-transform: uppercase; padding-inline: var(--s-4); }
.eq__zone { font-size: var(--t-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--acid); padding-inline: var(--s-4); }
.eq__desc { font-size: var(--t-sm); color: var(--parchment); line-height: 1.5; padding-inline: var(--s-4); }

/* ============================================================
   AYIN TABLOSU + DÖNÜŞÜMLER
   ============================================================ */
.board, .trans { margin-top: var(--s-7); border-top: 1px solid var(--line-soft); padding-top: var(--s-6); }
.board__head { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
@media (min-width: 900px) { .board__head { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr); gap: var(--s-7); align-items: start; } }
.board__title { font-size: var(--t-lg); }
.board__note { font-size: var(--t-sm); color: var(--ash); max-width: 62ch; }
.board__head .btn { grid-column: 1 / -1; justify-self: start; }
.board__body[hidden], .trans__body[hidden] { display: none; }
.board__empty, .trans__empty { color: var(--ash-dim); font-size: var(--t-sm); padding: var(--s-4) 0; }

.trans__grid { display: grid; gap: var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .trans__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.trans__card { border: 1px solid var(--line-soft); background: var(--ink-2); padding: var(--s-5); display: grid; gap: var(--s-3); }
.trans__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trans__pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; }
.trans__name { font-size: var(--t-lg); }
.trans__meta { font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase; color: var(--acid); }
.trans__note { font-size: var(--t-sm); color: var(--parchment); }

/* ============================================================
   ARAÇLAR
   ============================================================ */
.tools { background: var(--ink-1); }
.tools__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.tools__tab {
  padding: .7rem 1.1rem; cursor: pointer;
  background: transparent; border: 1px solid var(--line); color: var(--ash);
  font-size: var(--t-micro); font-weight: var(--fw-max);
  letter-spacing: .18em; text-transform: uppercase;
  transition: background var(--d-fast) var(--e-cut), color var(--d-fast) var(--e-cut), border-color var(--d-fast) var(--e-cut);
}
.tools__tab:hover { color: var(--bone); border-color: var(--ash-dim); }
.tools__tab[aria-selected="true"] { background: var(--acid); border-color: var(--acid); color: var(--ink); }
.tool { display: grid; gap: var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .tool { grid-template-columns: minmax(0, 34ch) minmax(0, 1fr); gap: var(--s-7); align-items: start; } }
.tool[hidden] { display: none; }
.tool__form { display: grid; gap: var(--s-4); align-content: start; }
.tool__form input, .tool__form select {
  width: 100%; padding: .85rem 1rem;
  background: var(--ink); color: var(--bone); border: 1px solid var(--line);
  font: inherit; font-size: var(--t-body);
  transition: border-color var(--d-fast) var(--e-cut);
}
.tool__form input:focus, .tool__form select:focus { outline: none; border-color: var(--acid); background: var(--ink-2); }
.tool__form input:focus-visible, .tool__form select:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
.tool__form .label { font-size: var(--t-micro); font-weight: var(--fw-max); letter-spacing: .2em; text-transform: uppercase; color: var(--ash-dim); }
.tool__out { display: grid; gap: var(--s-4); align-content: start; }
.tool__big { display: flex; align-items: baseline; gap: .5em; }
.tool__big span {
  font-family: var(--font-display); font-size: clamp(2.8rem, 6vw, 4.4rem);
  line-height: 1; color: var(--acid); font-variant-numeric: tabular-nums;
}
.tool__big i { font-style: normal; font-size: var(--t-sm); letter-spacing: .12em; text-transform: uppercase; color: var(--ash-dim); }
.tool__hint { font-size: var(--t-sm); color: var(--ash); line-height: 1.55; max-width: 62ch; }
.tool__table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tool__table th, .tool__table td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--line-soft); }
.tool__table th {
  font-size: var(--t-micro); letter-spacing: .18em; text-transform: uppercase;
  color: var(--ash-dim); font-weight: var(--fw-max);
}
.tool__table td { color: var(--parchment); font-variant-numeric: tabular-nums; }
.tool__table tr:hover td { color: var(--bone); background: rgba(255,255,255,.02); }

.seg { display: inline-flex; border: 1px solid var(--line); }
.seg button {
  background: none; border: 0; cursor: pointer; padding: .7rem 1.1rem;
  font-size: var(--t-micro); font-weight: var(--fw-max); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ash);
  transition: background var(--d-fast) var(--e-cut), color var(--d-fast) var(--e-cut);
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--acid); color: var(--ink); }
.seg button:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }

.tool__chartwrap { border: 1px solid var(--line-soft); background: var(--ink-2); padding: var(--s-4); }
.tool__chart { width: 100%; height: auto; display: block; }
.tool__rows { display: grid; gap: 0; }
.tool__row {
  display: grid; grid-template-columns: 11ch repeat(4, minmax(0, 1fr)) auto;
  gap: var(--s-3); align-items: baseline;
  padding: .6rem 0; border-bottom: 1px solid var(--line-soft);
  font-size: var(--t-sm); color: var(--parchment); font-variant-numeric: tabular-nums;
}
.tool__row b { color: var(--bone); font-weight: var(--fw-strong); }
.tool__row button {
  background: none; border: 1px solid var(--line); color: var(--ash);
  cursor: pointer; padding: .15rem .45rem; font-size: var(--t-micro);
}
.tool__row button:hover { border-color: var(--blood); color: var(--bone); background: var(--blood); }
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ============================================================
   İSTEK KUTUSU — sayfanın sonu
   Küçük dursun diye kendi bölümü var ama başlık dev punto değil:
   burası bir çağrı değil, açık bırakılmış bir kapı.
   ============================================================ */
.wish { padding-block: var(--s-8); }
.wish__box {
  border: 1px solid var(--line-soft); background: var(--ink-2);
  padding: var(--s-6) var(--s-5);
  display: grid; gap: var(--s-5);
}
@media (min-width: 900px) {
  .wish__box { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s-7); align-items: start; }
}
.wish__title {
  font-family: var(--font-display); font-size: var(--t-lg);
  text-transform: uppercase; margin: 0 0 var(--s-3);
}
.wish__note { margin: 0; font-size: var(--t-sm); color: var(--ash); max-width: 44ch; }
.wish__form { display: grid; gap: var(--s-4); }
.wish__form .btn { justify-self: start; }