@charset "UTF-8";
/* ==========================================================================
   Ana sayfa — "Nefes"
   Sinematik hero (kaydırmayla sarılan film) + editoryal bölümler.
   Palet filmden örneklendi: duvar #213A4B, perde #6A8D9E, ay #B7C2C6.
   Yalnız ana sayfada yüklenir; sitenin geri kalanı app.css ile çalışır.
   ========================================================================== */

/* Red Hat Display artık app.css'te, bütün sitede tanımlı. */

.is-home {
  /* Gece — filmden örneklendi, film değişmedi */
  --night:        #0F1E28;
  --moon:         #FFF3EC;
  --moon-dim:     #D9BFB4;
  --air:          #F0B49B;   /* nefes çizgisi: şafak ışığının rengi */
  --air-glow:     rgba(240, 180, 155, .35);

  /* Şafak — sabah tarafı. Ece kırmızısından türetildi, krem/bej değil. */
  --morning:      #FFF6F3;   /* sayfa zemini, rose-tinted */
  --morning-2:    #FCE9E3;   /* pudra bant */
  --blush:        #F8D5CB;   /* mercan bant */
  --cta:          #C8102E;   /* Ece kırmızısı: tek eylem rengi */
  --cta-hover:    #A50D26;
  --brand-navy:   #2E3192;   /* logodaki lacivert: rakamlar bandı */

  /* Zemin, mürekkep, aksan ve gösteri yazısı app.css'teki ortak token'lardan
     gelir. Önceden burada ezilip iç sayfalar soğuk kalıyordu. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io:  cubic-bezier(.65, 0, .35, 1);
  --tshadow: 0 1px 2px rgba(20, 8, 4, .85), 0 3px 14px rgba(20, 8, 4, .55), 0 12px 48px rgba(20, 8, 4, .5);

  background: var(--morning);
}
html:has(body.is-home), .is-home { overflow-x: hidden; overflow-x: clip; }

/* Gösteri yazısı: Archivo geniş kesim */
.disp {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.021em;
  line-height: 1.02;
  text-wrap: balance;
}

/* --- Başlık: filmin üstünde saydam, sonra buzlu cam ---------------------- */
.is-home .topbar { display: none; }
.is-home .header {
  position: fixed; inset: 0 0 auto; z-index: 100;
  background: rgba(255, 246, 243, .9);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule);
  transition: background .5s var(--ease-io), border-color .5s var(--ease-io), color .5s var(--ease-io);
}
.is-home.over-dark .header {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.is-home.over-dark .header .nav-link,
.is-home.over-dark .header .burger { color: var(--moon); }
.is-home.over-dark .header .nav-link:hover,
.is-home.over-dark .header .nav-link[aria-expanded="true"] { background: rgba(255, 243, 236, .1); color: #fff; }
.is-home .logo img { transition: filter .5s var(--ease-io); }
.is-home.over-dark .logo img { filter: brightness(0) invert(1); }
.is-home.over-dark .header-cta .btn--primary { background: var(--cta); }
.is-home.over-dark .header-cta .btn--primary:hover { background: var(--cta-hover); }

/* ==========================================================================
   HERO — masaüstü: sabitlenmiş sahne, film kaydırmayla sarılır
   ========================================================================== */
.cine { position: relative; height: 700vh; background: var(--night); }
.cine-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--night) center / cover no-repeat;
  isolation: isolate;
}
.cine-poster, .cine-still {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 60% 50%;
}
.cine-poster { background-size: cover; background-position: 60% 50%; }

/* Film penceresi: her filmin kendi tuvali. Açık olan görünür, kapanan
   fade biterken altta tam opaklıkta durur, böylece geçiş karartmaya
   düşmeden çapraz geçiş olur. */
.cine-win {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; visibility: hidden;
  transition: opacity .85s var(--ease-io);
}
.cine-win canvas {
  display: block; width: 100%; height: 100%;
  transform: translateZ(0);
}
.cine-win.is-lit.is-active { opacity: 1; visibility: visible; }
.cine-win.is-active { visibility: visible; }
.cine-win.was-active { opacity: 1; visibility: visible; z-index: -1; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .cine-win { transition: none; }
}

/* Okunaklılık katman 1: genel taban perde — hiçbir kare çıplak kalmaz */
.cine-scrim {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(90deg, rgba(10, 20, 27, .72) 0%, rgba(10, 20, 27, .45) 30%, rgba(10, 20, 27, 0) 58%),
    linear-gradient(0deg, rgba(10, 20, 27, .7) 0%, rgba(10, 20, 27, 0) 32%),
    linear-gradient(180deg, rgba(10, 20, 27, .55) 0%, rgba(10, 20, 27, 0) 18%);
}
/* Şafak ışığı: film dinlenirken pencereden gelen çok hafif aydınlanma */
.cine-dawn {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--dawn, 0);
  background:
    radial-gradient(ellipse 46% 64% at 74% 40%, rgba(255, 196, 150, .5), rgba(255, 176, 140, .1) 54%, rgba(255, 176, 140, 0) 72%);
  mix-blend-mode: screen;
}

/* Metin bantları */
.band {
  position: absolute; z-index: 2; left: max(24px, calc((100vw - 1320px) / 2 + 24px));
  width: min(40vw, 620px);
  color: var(--moon); text-shadow: var(--tshadow);
  opacity: 0; visibility: hidden; will-change: opacity;
}
/* Okunaklılık katman 2: bant perdesi — yalnız bant açıkken derinleşir */
.band::before {
  content: ''; position: absolute; inset: -30% -40% -30% -30%; z-index: -1; pointer-events: none;
  opacity: calc(.3 + .7 * var(--k, 1));
  background: radial-gradient(ellipse 70% 62% at 36% 50%, rgba(8, 16, 22, .62) 0%, rgba(8, 16, 22, .36) 48%, rgba(8, 16, 22, 0) 76%);
}
.band .disp { font-size: clamp(3rem, 6.2vw, 6rem); color: #fff; }
.band .sub {
  --ks: clamp(0, (var(--k, 0) - .5) * 2.6, 1);
  margin-top: 1.4rem; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.55;
  color: var(--moon-dim); max-width: 36ch;
  opacity: var(--ks, 1); transform: translateY(calc((1 - var(--ks, 1)) * 14px));
}
.band--top    { top: 20vh; }
.band--mid    { top: 30vh; }
.band--low    { bottom: 22vh; }
.band--settle { top: 50%; translate: 0 -50%; width: min(56vw, 860px); }
.band--settle .disp { font-size: clamp(2.6rem, 4.7vw, 4.6rem); }
.band--settle::before {
  inset: -34% -46% -34% -34%;
  background:
    linear-gradient(90deg, rgba(8, 14, 20, .68) 0%, rgba(8, 14, 20, .5) 42%, rgba(8, 14, 20, 0) 82%),
    radial-gradient(ellipse 72% 68% at 32% 50%, rgba(8, 14, 20, .68) 0%, rgba(8, 14, 20, .4) 52%, rgba(8, 14, 20, 0) 80%);
}

/* Ekran okuyucu için tam cümle; görsel kopya aria-hidden */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.w { display: inline-block; white-space: pre; }
.line { display: block; }

/* Giriş (a) bulanıktan netliğe — sis açılır. filter canlandırılmaz: iki kopya
   üst üste, yalnız opaklık çaprazlanır. */
.fx-blur { position: relative; }
.fx-blur .soft { position: absolute; inset: 0; filter: blur(12px); opacity: calc(1 - var(--k, 0)); }
.fx-blur .sharp { opacity: var(--k, 0); transform: scale(calc(1.035 - .035 * var(--k, 0))); transform-origin: 0 60%; }

/* Giriş (b) aşağı süzülme — akım iner, kelimeler iner */
.fx-drift .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.8, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -0.42em));
}

/* Giriş (c) kelime vuruşu — üç kelime, üç vuruş */
.fx-punch .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
  --ks: clamp(0, (var(--k, 0) - var(--th, 0) - .12) * 3.2, 1);
  opacity: var(--kc);
  transform: scale(calc(.72 + .38 * var(--kc) - .1 * var(--ks)));
  transform-origin: 0 70%;
}

/* Giriş (d) maskeli satır yükselişi — ışık iplikleri gibi satır satır */
.fx-lines .line { overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.fx-lines .line > span {
  display: inline-block;
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 2.6, 1);
  transform: translateY(calc((1 - var(--kc)) * 108%));
}

/* Giriş (e) kademeli yerleşme — kelimeler, sonra alt satır, sonra düğmeler */
.fx-settle .w {
  --kc: clamp(0, (var(--k, 0) - var(--th, 0)) * 3, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * .5em));
}
.fx-settle .acts {
  --kb: clamp(0, (var(--k, 0) - .78) * 5, 1);
  opacity: var(--kb); transform: translateY(calc((1 - var(--kb)) * 12px));
  pointer-events: none;
}
.band.live .acts { pointer-events: auto; }

.acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; text-shadow: none; }
.btn-cta, .btn-ghost {
  display: inline-flex; align-items: center; gap: .6rem;
  min-height: 52px; padding: 0 1.6rem; border-radius: 999px;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; white-space: nowrap;
  transition: background .35s var(--ease-io), color .35s var(--ease-io), border-color .35s var(--ease-io), transform .35s var(--ease-out);
}
.btn-cta { background: var(--cta); color: #fff; }
.btn-cta:hover { background: var(--cta-hover); color: #fff; }
.btn-ghost { color: var(--moon); border: 1px solid rgba(255, 243, 236, .45); }
.btn-ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 243, 236, .08); }
.btn-cta:active, .btn-ghost:active { transform: scale(.98); }
.btn-cta svg, .btn-ghost svg { flex: none; }
.acts :focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* HUD: saat + nefes çizgisi (imza öğesi) */
.cine-hud {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 max(24px, calc((100vw - 1320px) / 2 + 24px)) 28px;
  display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 28px;
  color: var(--moon-dim); pointer-events: none;
}
.clock {
  font-family: var(--display); font-weight: 600;
  font-size: .8125rem; letter-spacing: .14em; text-transform: uppercase;
  display: grid; gap: 4px; min-width: 7.5em;
}
.clock b { font-size: 1.5rem; letter-spacing: .02em; color: var(--moon); font-weight: 600; font-variant-numeric: tabular-nums; }
.breath { width: 100%; height: 56px; overflow: visible; }
.breath .trace { fill: none; stroke: rgba(143, 179, 196, .16); stroke-width: 1; }
.breath .draw { fill: none; stroke: var(--air); stroke-width: 1.5; stroke-linecap: round; }
.breath .glow { fill: none; stroke: var(--air-glow); stroke-width: 6; stroke-linecap: round; filter: blur(4px); }
.breath .head { fill: #fff; }
.breath .halo { fill: var(--air-glow); }
.cue {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display); font-weight: 600; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--moon-dim);
  opacity: var(--cue, 1); transition: opacity .4s var(--ease-io);
}
.cue-line { position: relative; width: 1px; height: 36px; background: rgba(255, 243, 236, .2); overflow: hidden; }
.cue-line::after {
  content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--moon);
  animation: cue 2.4s var(--ease-io) infinite; animation-delay: -1.1s;
}
@keyframes cue { to { top: 100%; } }
.ring { width: 28px; height: 28px; color: var(--air); transform: rotate(-90deg); transition: opacity .6s var(--ease-io); }
.ring circle { transition: stroke-dashoffset .1s linear; }
.cine-win.is-lit ~ .cine-hud .ring { opacity: 0; }

/* ==========================================================================
   Film rayı: her film bir satır. Açık satır uzar ve o filmin ilerlemesiyle
   dolar, yani hem hangi film açık hem de neredeyiz, tek çizgide okunur.
   ========================================================================== */
.cine-rail {
  position: absolute; z-index: 4; right: clamp(14px, 2.4vw, 34px); top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; align-items: flex-end;
}
.cine-dot {
  --fp: 0;
  display: flex; align-items: center; gap: 10px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: rgba(255, 255, 255, .62);
  font: 500 12px/1 var(--font-display, inherit);
  letter-spacing: .02em;
  transition: color .3s var(--ease-io);
}
.cine-dot-label {
  opacity: 0; transform: translateX(6px);
  transition: opacity .35s var(--ease-io), transform .35s var(--ease-io);
  white-space: nowrap;
}
.cine-rail:hover .cine-dot-label,
.cine-dot:focus-visible .cine-dot-label,
.cine-dot[aria-selected="true"] .cine-dot-label { opacity: 1; transform: none; }
.cine-dot[aria-selected="true"] { color: #fff; }
.cine-tick {
  display: block; width: 2px; height: 22px; border-radius: 2px;
  background: rgba(255, 255, 255, .26); position: relative; overflow: hidden;
  transition: height .35s var(--ease-io), background .3s var(--ease-io);
}
.cine-dot[aria-selected="true"] .cine-tick { height: 48px; }
.cine-tick i {
  position: absolute; inset: 0 0 auto 0; display: block;
  height: calc(var(--fp) * 100%);
  background: #fff;
}
.cine-dot:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 3px; }
.cine.leaving .cine-rail { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-io); }

/* Telefon: ray alta iner ve yatay olur, başparmağın ulaştığı yere. */
@media (max-width: 760px) {
  .cine-rail {
    right: auto; left: 50%; top: auto; bottom: calc(16px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    flex-direction: row; gap: 18px; align-items: center;
  }
  .cine-dot { flex-direction: column-reverse; gap: 7px; }
  .cine-dot-label { opacity: 1; transform: none; font-size: 11px; }
  .cine-tick { width: 26px; height: 2px; }
  .cine-dot[aria-selected="true"] .cine-tick { height: 2px; width: 44px; }
  .cine-tick i { inset: 0 auto 0 0; height: 100%; width: calc(var(--fp) * 100%); }
}

/* Film setleri üst üste durur; yalnız açık olanın bantları canlandırılır.
   Kapalı set `inert` olduğu için tıklama ve odak de almaz. */
.cine-set { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.cine-set .band { pointer-events: none; }
.cine-set.is-active .band.live .acts { pointer-events: auto; }

/* Metin karenin boş kalan yanında durur. Servis filminde tezgâhın sağı
   boş olduğu için metin oraya geçer, perde de o yöne döner. */
/* Sağa yaslı metin rayın soluna kadar gelir, üstüne binmez. */
.cine-stage[data-anchor="right"] .band {
  left: auto;
  right: max(112px, calc((100vw - 1320px) / 2 + 112px));
  text-align: right;
}
.cine-stage[data-anchor="right"] .band .sub { margin-left: auto; }
.cine-stage[data-anchor="right"] .band .acts { justify-content: flex-end; }
.cine-stage[data-anchor="right"] .band::before {
  inset: -30% -30% -30% -40%;
  background: radial-gradient(ellipse 70% 62% at 64% 50%, rgba(8, 16, 22, .62) 0%, rgba(8, 16, 22, .36) 48%, rgba(8, 16, 22, 0) 76%);
}
/* Aydınlık filmlerde köşeli perde görünür oluyordu: düz geçiş kutunun
   üst ve alt kenarında sertçe bitiyor. Gece filmi dışındaki filmlerde
   perde yalnız eliptik olur, dört yöne de söner. */
.cine-stage:not([data-film="nefes"]) .band--settle::before {
  inset: -42% -44%;
  background: radial-gradient(ellipse 60% 62% at 50% 50%, rgba(8, 14, 20, .74) 0%, rgba(8, 14, 20, .42) 46%, rgba(8, 14, 20, 0) 78%);
}
.cine-stage:not([data-film="nefes"]) .band::before {
  inset: -40% -42%;
  background: radial-gradient(ellipse 58% 60% at 50% 50%, rgba(8, 16, 22, .7) 0%, rgba(8, 16, 22, .38) 46%, rgba(8, 16, 22, 0) 78%);
}
.cine-stage[data-anchor="right"] .cine-scrim {
  background:
    linear-gradient(270deg, rgba(10, 20, 27, .72) 0%, rgba(10, 20, 27, .45) 30%, rgba(10, 20, 27, 0) 58%),
    linear-gradient(0deg, rgba(10, 20, 27, .7) 0%, rgba(10, 20, 27, 0) 32%),
    linear-gradient(180deg, rgba(10, 20, 27, .55) 0%, rgba(10, 20, 27, 0) 18%);
}

/* Telefonda ray alttayken bantlar onun üstüne binmesin. */
@media (max-width: 760px) {
  .cine-stage[data-anchor="right"] .band { text-align: left; right: auto; left: 24px; }
  .band--settle { width: auto; right: 24px; }
}

/* Saat ve nefes çizgisi geceye ait. Diğer filmlerde bir gece saati
   göstermek yanlış bilgi olurdu, bu yüzden yalnız gece filminde durur. */
.cine-hud { transition: opacity .5s var(--ease-io); }
.cine.leaving .cine-hud,
.cine-stage:not([data-film="nefes"]) .cine-hud { opacity: 0; pointer-events: none; }

/* Kısa masaüstü pencereleri: HUD'a yer yok */
@media (max-height: 560px) { .cine-hud { display: none; } }

/* ==========================================================================
   HERO — mobil: video yok. Filmden 6 kare, dikey kadraj, üstünden geçen
   bölümler. Aynı hikaye, başparmak için yeniden dizilmiş.
   ========================================================================== */
.story { display: none; position: relative; background: var(--night); grid-template: 1fr / 1fr; }
/* Sahne ve bölümler aynı hücrede: sabit sahne hikayenin sonunda durur,
   sonraki bölümlerin üstüne taşmaz (eksi alt boşluk hilesi taşıyordu). */
.story-stage {
  grid-area: 1 / 1; align-self: start;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.story-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%; opacity: 0;
}
.story-frame:first-child { opacity: 1; }
.story-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(10, 20, 27, .94) 0%, rgba(10, 20, 27, .72) 34%, rgba(10, 20, 27, .12) 62%, rgba(10, 20, 27, .35) 100%);
}
.story-clock {
  position: absolute; z-index: 1; left: 20px; top: calc(var(--header-h) + 16px);
  color: var(--moon-dim);
}
.story-beats { grid-area: 1 / 1; position: relative; z-index: 1; }
.beat {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 20px calc(56px + env(safe-area-inset-bottom) + 40px);
  color: var(--moon);
}
.beat .disp { font-size: clamp(2.5rem, 11.5vw, 3.6rem); color: #fff; text-shadow: var(--tshadow); }
.beat .sub { margin-top: 1rem; font-size: 1.0625rem; line-height: 1.55; color: var(--moon-dim); max-width: 34ch; text-shadow: var(--tshadow); }
.beat .acts { margin-top: 1.5rem; }
.beat .acts a { flex: 1 1 auto; justify-content: center; }
/* Mobil giriş: maskeli satır, sonra alt satır — IO ile, geri kaydırınca geri alınır */
.beat .line { overflow: hidden; padding: .06em 0 .14em; margin: -.06em 0 -.14em; }
.beat .line > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease-out); }
.beat .line:nth-child(2) > span { transition-delay: .08s; }
.beat .line:nth-child(3) > span { transition-delay: .16s; }
.beat .sub, .beat .acts { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--ease-io) .22s, transform .8s var(--ease-out) .22s; }
.beat.in .line > span { transform: none; }
.beat.in .sub, .beat.in .acts { opacity: 1; transform: none; }

/* --- Beş kapı: CSS tarafı. JS'teki GATES dizisiyle karakteri karakterine aynı. --- */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .cine { display: none; }
  .story { display: grid; }
}

/* ==========================================================================
   SAFAK — geceden sabaha geçiş, sayfanın açık yarısı başlar
   ========================================================================== */
.dawn {
  position: relative;
  padding: 42vh 0 14vh;
  background: linear-gradient(180deg, var(--night) 0%, #2E2B42 12%, #7A4C56 26%, #D59080 38%, #F6C4AE 50%, var(--morning) 66%);
  color: var(--ink);
}
.dawn-clock { position: absolute; top: 9vh; left: max(24px, calc((100vw - 1320px) / 2 + 24px)); color: var(--moon-dim); }
.dawn-clock b { color: var(--moon); }
.dawn .lead {
  font-size: clamp(2.1rem, 4.6vw, 4.5rem); color: var(--ink);
  max-width: 17ch;
}
.dawn .lead em { font-style: normal; color: var(--cta); }

/* Bölüm kabuğu */
.h-wrap { width: 100%; max-width: 1320px; margin-inline: auto; padding-inline: 24px; }
.h-sec { padding-block: clamp(4.5rem, 11vw, 9rem); }
.h-title { font-size: clamp(2.25rem, 5vw, 4.75rem); color: var(--ink); max-width: 14ch; }
.h-lede { margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); color: var(--ink-muted); max-width: 52ch; }
.label {
  font-family: var(--display); font-weight: 600; font-size: .8125rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
}

/* Kaydırmayla beliren içerik: satır maskesi + dikey kayma, girişte bir kez */
.rv { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-io), transform 1.1s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
.rv-mask { overflow: hidden; padding: .06em 0 .16em; margin: -.06em 0 -.16em; }
.rv-mask > span { display: block; transform: translateY(105%); transition: transform 1.1s var(--ease-out); }
.rv-mask.in > span { transform: none; }

/* Nefes çizgisi ayırıcıları: görünüre girince kendini çizer */
.sep { display: block; width: 100%; height: 48px; margin-block: 0; overflow: visible; color: #D59080; }
.sep path { fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease-io); }
.sep.in path { stroke-dashoffset: 0; }

/* ==========================================================================
   AİLELER — editoryal dizin
   ========================================================================== */
.idx { margin-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--rule-strong); }
.idx-row {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem 2rem;
  padding: clamp(1.25rem, 2.4vw, 2rem) 0; border-bottom: 1px solid var(--rule-strong);
  color: var(--ink); text-decoration: none;
}
.idx-row::before {
  content: ''; position: absolute; inset: 0 -24px; z-index: -1; background: var(--morning-2);
  opacity: 0; transform: scaleY(.6); transition: opacity .45s var(--ease-io), transform .55s var(--ease-out);
}
.idx-row:hover::before, .idx-row:focus-visible::before { opacity: 1; transform: none; }
.idx-name { font-size: clamp(1.75rem, 3.6vw, 3.25rem); transition: transform .55s var(--ease-out); }
.idx-row:hover .idx-name { transform: translateX(10px); }
.idx-meta { display: flex; align-items: center; gap: 1.25rem; color: var(--ink-muted); }
.idx-n { font-family: var(--display); font-weight: 600; font-size: .9375rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.idx-go {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--rule-strong); color: var(--ink);
  transition: background .35s var(--ease-io), color .35s var(--ease-io), border-color .35s var(--ease-io), transform .45s var(--ease-out);
}
.idx-row:hover .idx-go { background: var(--ink); color: #fff; border-color: var(--ink); transform: rotate(-45deg); }
.idx-lede { grid-column: 1 / -1; max-width: 60ch; color: var(--ink-muted); font-size: 1rem; }

/* ==========================================================================
   ETKİLEŞİM ANI — "Bir nefes tutun."
   ========================================================================== */
.hold {
  position: relative; overflow: hidden; border-radius: 28px;
  background: radial-gradient(120% 90% at 80% 10%, #1B3243 0%, var(--night) 60%);
  color: var(--moon); padding: clamp(2rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hold .h-title { color: #fff; }
.hold .h-lede { color: var(--moon-dim); }
.hold-btn {
  position: relative; margin-top: 2rem; display: inline-flex; align-items: center; gap: .9rem;
  min-height: 60px; padding: 0 1.75rem 0 .5rem; border-radius: 999px;
  background: rgba(255, 243, 236, .06); border: 1px solid rgba(255, 243, 236, .28);
  color: #fff; font-weight: 600; font-size: 1.0625rem;
  user-select: none; -webkit-user-select: none; touch-action: none; -webkit-touch-callout: none;
  transition: border-color .35s var(--ease-io), background .35s var(--ease-io);
}
.hold-btn:hover { border-color: rgba(255, 243, 236, .6); }
.hold-btn .dial { width: 46px; height: 46px; transform: rotate(-90deg); }
.hold-btn .dial circle { fill: none; stroke-width: 2.5; }
.hold-btn .dial .bg { stroke: rgba(255, 243, 236, .16); }
.hold-btn .dial .fg { stroke: #fff; stroke-dasharray: 126; stroke-dashoffset: calc(126 * (1 - var(--hp, 0))); }
.hold-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hold.done .hold-btn { border-color: var(--air); }
.hold-wave { width: 100%; height: auto; overflow: visible; }
.hold-wave .axis { stroke: rgba(255, 243, 236, .14); stroke-width: 1; }
.hold-wave .base { fill: none; stroke: rgba(143, 179, 196, .18); stroke-width: 1.5; }
.hold-wave .live { fill: none; stroke: var(--air); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--hp, 0)); }
.hold-wave .fill { fill: url(#holdFill); opacity: calc(var(--hp, 0) * .9); }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(255, 243, 236, .12); border-radius: 18px; overflow: hidden; }
.fact { background: rgba(15, 30, 40, .92); padding: 1.75rem 1.5rem; }
.fact .label { color: var(--moon-dim); }
.fact b { display: block; margin-top: .6rem; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: #fff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fact p { margin-top: .5rem; color: var(--moon-dim); font-size: .9375rem; line-height: 1.5; }
.hold .fact { opacity: .28; transform: translateY(10px); transition: opacity .8s var(--ease-io), transform .9s var(--ease-out); }
.hold.done .fact { opacity: 1; transform: none; }
.hold.done .fact:nth-child(2) { transition-delay: .14s; }
.hold.done .fact:nth-child(3) { transition-delay: .28s; }
.hold-note { grid-column: 1 / -1; font-size: .875rem; color: var(--moon-dim); }

/* ==========================================================================
   SORULAR — alıcıların kendi dili
   ========================================================================== */
.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 3rem); }
.faq-list { border-top: 1px solid var(--rule-strong); }
.q { padding: clamp(1.5rem, 2.6vw, 2.25rem) 0; border-bottom: 1px solid var(--rule-strong); }
.q h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.375rem, 2.2vw, 1.875rem); letter-spacing: -0.02em; line-height: 1.15; }
.q p { margin-top: .75rem; color: var(--ink-body); max-width: 60ch; }

/* ==========================================================================
   ŞUBELER — şehir dizini
   ========================================================================== */
.cities { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--rule-strong); }
.city { padding: 1.5rem 1.25rem 2rem 0; border-bottom: 1px solid var(--rule-strong); }
.city + .city { padding-left: 1.25rem; border-left: 1px solid var(--rule-strong); }
.city h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2.25rem); letter-spacing: -0.025em; }
.city .label { display: block; margin-top: .35rem; }
.city ul { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: .5rem; }
.city a { color: var(--ink-body); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; }
.city a:hover { color: var(--accent-dark); }
.city a svg { opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease-io), transform .35s var(--ease-out); }
.city a:hover svg { opacity: 1; transform: none; }

/* ==========================================================================
   SON ÇAĞRI — telefon numarası gösteri boyunda
   ========================================================================== */
.close { padding-block: clamp(5rem, 12vw, 10rem); text-align: left; }
.close .h-lede { margin-top: 0; }
.phone-xl {
  display: inline-block; margin-top: 1.5rem;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(3.25rem, 11vw, 10rem); line-height: .9; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 .06em no-repeat;
  transition: background-size .7s var(--ease-out), color .4s var(--ease-io);
}
.phone-xl:hover { background-size: 100% .06em; color: var(--cta); }
.close-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.5rem; }
.close .btn-ghost { color: var(--ink); border-color: var(--rule-strong); }
.close .btn-ghost:hover { color: var(--ink); border-color: var(--ink); background: var(--morning-2); }
.hours { margin-top: 1.5rem; color: var(--ink-muted); }

/* Tek sabit ortam katmanı: sabah tarafında çok yavaş kayan soğuk sis */
.env {
  position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 30% at 20% 30%, rgba(143, 179, 196, .16), transparent 70%),
    radial-gradient(35% 28% at 80% 70%, rgba(143, 179, 196, .12), transparent 70%);
  animation: drift 80s var(--ease-io) infinite alternate; animation-delay: -30s;
}
@keyframes drift { to { transform: translate3d(6%, -4%, 0) scale(1.08); } }

/* Sayfa gizliyken tüm döngüler durur (animation-play-state kalıtılmaz) */
body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* Mevcut bileşenlerin bu sayfadaki uyumu */
.is-home .matrix-shell { border-radius: 22px; }
.is-home .stats { background: var(--night); }
.is-home .footer { margin-top: 0; }

/* ==========================================================================
   Duyarlı: mobil ayrı düzen, küçültülmüş masaüstü değil
   ========================================================================== */
@media (max-width: 1080px) {
  .hold { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
  .faq-head { position: static; }
  .cities { grid-template-columns: repeat(2, 1fr); }
  .city + .city { padding-left: 0; border-left: 0; }
  .city:nth-child(even) { padding-left: 1.25rem; border-left: 1px solid var(--rule-strong); }
}
@media (max-width: 720px) {
  .h-wrap { padding-inline: 20px; }
  .dawn { padding: 38vh 0 10vh; }
  .idx-row { grid-template-columns: 1fr auto; }
  .idx-meta .idx-n { display: none; }
  .idx-lede { font-size: .9375rem; }
  .facts { grid-template-columns: 1fr; }
  .hold { border-radius: 22px; padding: 2rem 1.25rem; }
  .hold-btn { width: 100%; justify-content: flex-start; }
  .cities { grid-template-columns: 1fr; }
  .city:nth-child(even) { padding-left: 0; border-left: 0; }
  .close-acts a { flex: 1 1 100%; justify-content: center; }
  .env { display: none; }
}
@media (pointer: coarse) {
  .city a, .idx-row { min-height: 44px; }
}

/* ==========================================================================
   Hareketi azalt: her şey son hâlinde, sürüşler durur
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-mask > span, .beat .line > span, .beat .sub, .beat .acts, .hold .fact, .sep path {
    opacity: 1 !important; transform: none !important; transition: none !important; stroke-dashoffset: 0 !important;
  }
  .cue-line::after, .env { animation: none !important; }
  .hold-btn { display: none; }
}

/* Ana sayfada tek eylem rengi: kırmızı. Başlık, bölümler ve bantlar aynı ızgara. */
.is-home .header .wrap { max-width: 1320px; padding-inline: 24px; }
.is-home .header-cta .btn--primary { background: var(--cta); }
.is-home .header-cta .btn--primary:hover { background: var(--cta-hover); }
.is-home .stat-n { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
.is-home .stats .wrap { max-width: 1320px; padding-inline: 24px; }
@media (pointer: coarse) {
  .is-home .matrix .yes { min-width: 44px; min-height: 44px; }
}
.is-home .matrix thead th { background: var(--morning-2); }
.is-home .matrix .no { color: var(--rule-strong); }

/* ==========================================================================
   ISITMA TURU — fotoğraflı bölümler, yumuşak kutular, kavisli geçişler
   Referans ölçümü: hero/resmed-dna.json. Yapı ödünç alındı, palet bize ait.
   ========================================================================== */
.photo { border-radius: 28px; overflow: hidden; background: var(--morning-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }

/* Şafak: gece filmi biter, sabah birinin eli perdeyi açar */
.dawn-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.dawn .lead { max-width: 18ch; }
.dawn-photo { aspect-ratio: 16 / 10; box-shadow: 0 30px 80px rgba(90, 40, 28, .22); }

/* Aileler: sabah çayı solda, aileler yumuşak kutularda */
.fam-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: clamp(2rem, 4vw, 3.5rem); }
.fam-photo { position: sticky; top: calc(var(--header-h) + 2rem); aspect-ratio: 3 / 4; }
.idx { margin-top: 0; border-top: 0; display: grid; gap: .75rem; }
.idx-row {
  border-bottom: 0; background: #fff; border-radius: 22px;
  padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.2rem, 2vw, 1.8rem);
  box-shadow: 0 1px 2px rgba(90, 40, 30, .05), 0 12px 30px rgba(90, 40, 30, .06);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-io);
}
.idx-row::before { inset: 0; border-radius: 22px; background: var(--accent-wash); }
.idx-row:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(90, 40, 30, .06), 0 20px 44px rgba(90, 40, 30, .1); }
.idx-go { border-color: var(--rule-strong); }
.idx-row:hover .idx-go { background: var(--cta); border-color: var(--cta); }

/* Bir nefes: koyu panel yerine sabah ışığı paneli */
.hold {
  background: linear-gradient(150deg, #FCE9E3 0%, #F8D5CB 58%, #F2C0B2 100%);
  color: var(--ink-body); grid-template-columns: 1.05fr .95fr; align-items: start;
}
.hold .h-title { color: var(--ink); }
.hold .h-lede { color: var(--ink-body); }
.hold-wave { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.hold-wave .axis { stroke: rgba(36, 26, 34, .12); }
.hold-wave .base { stroke: rgba(200, 16, 46, .22); }
.hold-wave .live { stroke: var(--cta); }
.hold-photo { aspect-ratio: 3 / 4; }
.hold-btn { background: #fff; border-color: var(--rule-strong); color: var(--ink); }
.hold-btn:hover { border-color: var(--cta); }
.hold-btn .dial .bg { stroke: rgba(36, 26, 34, .14); }
.hold-btn .dial .fg { stroke: var(--cta); }
.hold-btn:focus-visible { outline-color: var(--cta); }
.hold.done .hold-btn { border-color: var(--cta); }
.facts { background: var(--rule); border-radius: 22px; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.hold .fact { background: #fff; }
.fact .label { color: var(--ink-muted); }
.fact b { color: var(--ink); }
.fact p { color: var(--ink-body); }
.hold-note { color: var(--ink-muted); margin-top: 1rem; }

/* Sorular: baştaki sütunda el ele görseli */
.faq-photo { aspect-ratio: 4 / 3; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.faq-list { border-top: 0; }
.q { border-bottom: 1px solid var(--rule); }
.q:last-child { border-bottom: 0; }

/* Rakamlar: lacivert bant, üstü kavisli (ResMed'in ark geçişi, bizim rengimiz) */
.is-home .stats {
  background: var(--brand-navy);
  border-start-start-radius: 50% 6vw; border-start-end-radius: 50% 6vw;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.is-home .stat-n { color: #fff; }
.is-home .stat-l { color: #CBCCF0; }
.is-home .stat + .stat { border-left-color: rgba(255, 255, 255, .2); }

/* Şubeler: gerçek şube fotoğraflarıyla */
.cities { border-top: 0; gap: clamp(1rem, 2vw, 1.5rem); }
.city { border-bottom: 0; padding: 0; }
.city + .city { border-left: 0; padding-left: 0; }
.city-photo { aspect-ratio: 4 / 3; border-radius: 18px; margin-bottom: 1rem; }
.city h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); }

/* Son çağrı: numara solda, telefonu tutan el sağda, üstü kavisli */
.close {
  background: var(--morning-2);
  border-start-start-radius: 50% 6vw; border-start-end-radius: 50% 6vw;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.close-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.close-photo { aspect-ratio: 3 / 4; max-width: 340px; margin-left: auto; }

/* Ortam katmanı da ısınır */
.env {
  background:
    radial-gradient(42% 32% at 18% 26%, rgba(248, 213, 203, .55), transparent 70%),
    radial-gradient(36% 28% at 82% 74%, rgba(255, 222, 198, .5), transparent 70%);
}

@media (max-width: 1080px) {
  .dawn-grid, .fam-grid, .close-grid { grid-template-columns: 1fr; }
  .fam-photo { position: static; aspect-ratio: 16 / 10; }
  .hold { grid-template-columns: 1fr; }
  .close-photo { max-width: 420px; margin: 0; }
  .is-home .stats, .close { border-start-start-radius: 50% 9vw; border-start-end-radius: 50% 9vw; }
}
@media (max-width: 720px) {
  .cities { grid-template-columns: 1fr 1fr; }
  .city-photo { aspect-ratio: 5 / 4; }
  .photo, .idx-row, .facts { border-radius: 18px; }
  .close-photo { max-width: none; }
}

/* ==========================================================================
   ÜRÜN ŞERİDİ — dikey kaydırma yatay harekete çevrilir.
   Şeridin kendisi de kaydırılabilir kalır (klavye, dokunmatik, trackpad),
   çünkü kaydırmayı ele geçiren ama başka yolu olmayan bölümler erişilemez
   oluyor. Hareket yalnız transform ile yapılır.
   ========================================================================== */
.strip { position: relative; }
.strip-stage {
  position: sticky; top: 0; height: 100svh;
  /* Sütun ekran genişliğinde sabitlenir. Yoksa 13 kartlık şerit sütunu
     kendi genişliğine çeker ve başlık ekranın dışına itilir. */
  display: grid; grid-template-columns: minmax(0, 100%); grid-template-rows: auto 1fr;
  align-content: center;
  gap: clamp(1.6rem, 3.4vh, 2.8rem);
  overflow: hidden; padding: clamp(96px, 14vh, 150px) 0 clamp(40px, 8vh, 90px);
}
/* Başlık kartlarla aynı hizada başlasın diye h-wrap'in kendi genişliği
   korunur; daraltma metnin kendisine uygulanır. */
.strip-head .h-title { font-size: clamp(2.1rem, 3.6vw, 3.4rem); max-width: 20ch; }
.strip-head .h-lede { max-width: 46ch; }
/* Şerit sütun genişliğinde durur, kartlar kutusundan taşar. Kırpmayı
   sahne yapar; taşmayı şeridin kendisine verirsek kırpma pencere de
   şeritle birlikte kayar ve sağ tarafta boşluk açılır. */
.strip-track {
  display: flex; align-items: start; gap: clamp(14px, 1.6vw, 26px);
  width: 100%; min-width: 0;
  padding-inline: max(24px, calc((100vw - 1320px) / 2 + 24px));
  will-change: transform;
  transform: translate3d(calc(var(--rx, 0) * -1px), 0, 0);
}
.strip-card {
  flex: 0 0 auto; width: clamp(200px, 19vw, 260px);
  display: grid; grid-template-rows: auto auto auto; gap: .5rem;
  text-decoration: none; color: inherit;
  padding: 14px 14px 18px; border-radius: 18px;
  background: var(--morning-2, #f3efe9);
  border: 1px solid rgba(15, 30, 40, .08);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}
.strip-card:hover, .strip-card:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(15, 30, 40, .16);
  box-shadow: 0 18px 40px -22px rgba(15, 30, 40, .5);
}
.strip-shot {
  display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
  background: #fff;
}
.strip-shot img { width: 100%; height: 100%; object-fit: contain; display: block; }
.strip-kind { font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted, #6b7580); }
.strip-name { font-weight: 600; line-height: 1.35; }
.strip-card--all {
  display: grid; align-content: center; justify-items: start; gap: .3rem;
  background: var(--night, #0f1e28); color: #fff; border-color: transparent;
}
.strip-card--all .strip-n, .strip-all-n {
  font-family: var(--font-display, inherit); font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1;
}
.strip-card--all .strip-name { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }

/* Hareketi azalt: şerit yerinde durur, kendi kaydırmasıyla gezilir. */
@media (prefers-reduced-motion: reduce) {
  .strip-stage { position: static; min-height: 0; padding: 8vh 0; }
  .strip-track { transform: none; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 1rem; }
  .strip-card { scroll-snap-align: start; }
}

/* Telefon: sabitleme yok, parmakla kaydırılan klasik şerit. */
@media (max-width: 760px) {
  .strip-stage { position: static; min-height: 0; padding: 10vh 0; }
  .strip-track {
    transform: none; overflow-x: auto; scroll-snap-type: x proximity;
    padding-bottom: 1rem; -webkit-overflow-scrolling: touch;
  }
  .strip-card { scroll-snap-align: start; width: 68vw; max-width: 260px; }
}



/* ==========================================================================
   HERO SLAYTLARI
   İlk slayt Nefes (gece filmi, beş mesaj, saat ve nefes çizgisi). Ürün
   slaytlarında cihaz şeffaf zeminle doğrudan filmin üstünde durur. Değerler
   soldan gelir, her birinin sağından cihazın kenarına uzanan bir kılavuz
   çizgi çizilir (imza hareketi, uzunluğu home.js ölçer).
   ========================================================================== */
/* Nefes'in beş mesajı ürün slaytlarının üç değerinden uzun bir yol ister. */
.cine { height: 460vh; }

/* Saat ve nefes çizgisi gecenin hikayesine ait: yalnız Nefes slaytında.
   (.cine-stage:not([data-film="nefes"]) .cine-hud kuralı ürün slaytlarında
   bütün göstergeyi zaten gizliyor.) */

.pslide {
  position: absolute; inset: 0; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(32px, 6vw, 96px);
  padding: clamp(96px, 13vh, 132px) calc(max(24px, (100vw - 1320px) / 2 + 24px) + 96px) clamp(40px, 7vh, 72px) max(24px, calc((100vw - 1320px) / 2 + 24px));
  opacity: 0; visibility: hidden;
  transition: opacity .7s var(--ease-io), visibility .7s;
}
.pslide.is-active { opacity: 1; visibility: visible; }
.pslide a { pointer-events: auto; }

.pslide-copy { position: relative; max-width: 540px; color: var(--moon); text-shadow: var(--tshadow); }
/* Metnin arkasındaki perde, yalnız metnin durduğu yerde. Üretim filminin
   ilk karesinde parlak makine tanıtım cümlesinin tam arkasındaydı ve
   kontrast 2,47:1'e düşüyordu. Bütün kareyi karartmak yerine eliptik bir
   perde dört yöne de söner. */
.pslide-copy::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -16% -34% -14% -42%;
  background: radial-gradient(ellipse 62% 60% at 40% 50%, rgba(8, 16, 22, .74) 0%, rgba(8, 16, 22, .5) 48%, rgba(8, 16, 22, 0) 80%);
}
.pslide-name {
  font-size: .9375rem; line-height: 1.4; color: var(--moon-dim); max-width: 44ch;
}
.pslide-model {
  margin-top: .6rem; font-family: var(--display); font-weight: 600;
  font-size: clamp(2.8rem, 5.4vw, 5.2rem); line-height: 1.02; letter-spacing: -0.025em;
  color: #fff; text-wrap: balance;
}
.pslide-intro {
  margin-top: 1rem; font-size: clamp(1.0625rem, 1.25vw, 1.2rem); line-height: 1.5;
  color: var(--moon-dim); max-width: 38ch;
}

/* Değerler: motorun bant düzeneğini kullanır (opaklık ve --k), ama mutlak
   konum ve bant perdesi burada kapatılır. */
.pslide-specs { list-style: none; margin: clamp(1.4rem, 3.4vh, 2.4rem) 0 0; padding: 0; display: grid; gap: clamp(.9rem, 2.2vh, 1.4rem); }
.pslide .band { position: relative; left: auto; top: auto; bottom: auto; translate: none; width: auto; text-shadow: var(--tshadow); }
.pslide .band::before { content: none; }
/* .pslide .pspec: ".pslide .band { width:auto }" kuralını ezmek için aynı
   özgüllük. Satır metin kadar geniş olmalı ki çizgi değerin hemen yanından
   başlasın; yoksa sütunun sonundan, değerden kopuk başlıyordu. */
.pslide .pspec {
  --lead: 0px;
  width: fit-content; display: grid; gap: 2px;
  transform: translateX(calc((1 - var(--k, 1)) * -14px));
}
.pspec b {
  font-family: var(--display); font-weight: 600; color: #fff;
  font-size: clamp(1.5rem, 2.3vw, 2.2rem); line-height: 1.05; letter-spacing: -0.015em;
}
.pspec span { font-size: .9375rem; color: var(--moon-dim); }

/* Kılavuz çizgi: değerin sağından cihazın kenarına. Uçta küçük bir halka. */
.pspec::after, .pspec::before {
  content: ''; position: absolute; top: .6em; pointer-events: none;
}
.pspec::after {
  left: calc(100% + 18px); width: var(--lead); height: 1px;
  background: linear-gradient(90deg, rgba(255, 243, 236, .75), rgba(255, 243, 236, .35));
  transform-origin: left center; transform: scaleX(var(--k, 0));
}
.pspec::before {
  left: calc(100% + 18px + var(--lead) - 4px); width: 7px; height: 7px; margin-top: -3px;
  border-radius: 50%; border: 1px solid rgba(255, 243, 236, .8); background: var(--night);
  opacity: clamp(0, (var(--k, 0) - .85) * 7, 1);
}

.pslide-acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.4rem, 3.4vh, 2.4rem); }

/* Ürün görseli: şeffaf zeminli, görünür sınırına kırpılmış. Kutu yok;
   cihaz filmin üstünde durur. Görselin kendi boyutu kullanılır (object-fit
   yok) ki kutunun kenarı cihazın kenarı olsun ve kılavuz çizgi orada bitsin.
   Gölge görselin şeklini izler (drop-shadow alfa kanalını okur), cihaz
   havada süzülmez, zemine oturur. */
.pslide-shot {
  margin: 0; display: flex; align-items: center; justify-content: center;
  width: min(40vw, 620px); height: min(62vh, 560px);
}
.pslide-shot img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)) drop-shadow(0 34px 38px rgba(0, 0, 0, .55));
  transform: translateY(18px) scale(.97);
  transition: transform .9s var(--ease-out);
}
.pslide.is-active .pslide-shot img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pslide, .pslide-shot img { transition: none; }
  .pspec { transform: none; }
}

/* Dar masaüstü: görsel küçülür, çizgiler kısalır ama kaybolmaz. */
@media (max-width: 1100px) {
  .pslide { gap: 28px; }
  .pslide-shot { width: min(34vw, 420px); height: min(52vh, 420px); }
}

/* ==========================================================================
   TELEFON: aynı üç cihaz, yana kaydırılan kartlarda. Film kareleri
   indirilmez; her kart filmin tek bir karesini zemin olarak kullanır.
   ========================================================================== */
.pstory { background: var(--night); padding: 96px 0 40px; }
.pstory-track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%;
  gap: 14px; padding: 0 24px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.pstory-track::-webkit-scrollbar { display: none; }
.pstory-card {
  position: relative; isolation: isolate; overflow: hidden;
  scroll-snap-align: center; border-radius: 24px;
  padding: 22px 20px 24px; color: var(--moon);
  display: grid; align-content: start; gap: 10px;
  background: var(--night) var(--bg) center / cover no-repeat;
}
.pstory-card::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10, 20, 27, .55) 0%, rgba(10, 20, 27, .82) 60%, rgba(10, 20, 27, .92) 100%);
}
.pstory-card .pslide-model { font-size: clamp(2rem, 9vw, 2.6rem); margin-top: 0; }
/* Telefonda görsel yüksekliği sınırlı: kare kutu 420px kaplıyor, düğme ilk
   ekrandan düşüyordu. */
.pstory-card .pslide-shot { width: 100%; height: 220px; margin: 6px 0; }
.pstory-card .pslide-shot img { transform: none; filter: drop-shadow(0 20px 22px rgba(0, 0, 0, .55)); }
/* Nefes kartı: görselsiz, mesaj ve iki eylem. */
.pstory-card--brand { align-content: end; min-height: 460px; }
.pstory-card--brand .acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 6px; }
.pstory-card .pslide-intro { margin-top: 0; font-size: 1rem; }
.pstory-specs { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 10px; }
.pstory-specs li { display: grid; gap: 1px; padding-left: 12px; border-left: 2px solid rgba(255, 243, 236, .35); }
.pstory-specs b { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: #fff; line-height: 1.1; }
.pstory-specs span { font-size: .875rem; color: var(--moon-dim); }
.pstory-card .btn-cta { justify-self: start; }