/* ============================================================
   Dilara & Harun — ana davetiye sayfası (açılıştan sonra)
   Beş kaydırılabilir bölüm; her biri kendi sahne görseli üzerinde.
   Açılış dosyalarına dokunulmaz; buradaki kurallar yalnızca
   #mainstage ve gövde durumunu (body.is-site) ilgilendirir.
   ============================================================ */

/* ── sayfa durumu: açılış bitince gövde kaydırılabilir olur ── */
/* açılış html/body yüksekliğini %100'e sabitliyor; ana sayfada belge
   normal kaysın (pencere kaydırıcısı, mobilde adres çubuğu doğal davranır) */
html.is-site,body.is-site{height:auto; min-height:100%}
body.is-site{overflow:visible; overflow-x:clip; overscroll-behavior:auto}
html.is-site{overflow-y:auto; overflow-x:hidden}
body.is-site .invite{display:none}

/* ── #mainstage: açılıştaki yer tutucu kuralları burada geçersiz kılınır ── */
.mainstage{
  position:relative; inset:auto; display:block; place-items:initial; z-index:1;
  width:100%; min-height:100vh; overflow:visible; overflow-x:clip;
  color:#F4EEE8;
  font-family:"Caudex",Georgia,serif; font-weight:400;
  -webkit-font-smoothing:antialiased;
  /* açılıştan sis geçişi: opacity + hafif bulanıklıktan netliğe */
  transition:opacity 1.6s cubic-bezier(.3,0,.25,1), visibility 0s linear 1.6s, filter 1.8s ease;
  filter:blur(6px);
}
.mainstage.is-in{filter:none}

/* ── görseller yüklenene kadar ve bölüm geçişlerinde görünen zemin ── */
.site__bg{position:fixed; inset:0; z-index:-3; pointer-events:none; overflow:hidden;
  background:linear-gradient(180deg,#0A1024 0%,#111A3A 40%,#191837 70%,#0B0F22 100%)}
/* önceki atmosfer katmanları: sahne görselleri geldiği için kapalı (kod duruyor) */
.site__forest,.site__mist,.site__vignette,.site__paper{display:none}
.mainstage{--sy:0px}

/* ── eşlik eden parıltı: GEÇİCİ olarak görünmez (kod duruyor) ── */
.site__trail{position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; display:none}
.mainstage .accent{display:none !important}

/* ── anlatıcı ışık ve ortam parıltıları (guide.js) ──
   Katman sırası: sahne görselleri, kenar geçişleri (negatif z) → bu tuval →
   bölümlerin yazı ve formları (tuvalden sonra gelen konumlu öğeler). Böylece
   ışık arka planın üstünde, yazının altında akar. */
.guiding-sparkle-layer{position:fixed; inset:0; width:100vw; height:100dvh; pointer-events:none; z-index:0}

/* ════════════ BÖLÜMLER ════════════ */
.sec{position:relative; z-index:auto; width:100%; min-height:100svh;
  display:grid; align-items:center; justify-items:center;
  padding:clamp(56px,8vh,104px) clamp(24px,7vw,128px)}
.sec__inner{position:relative; width:100%; max-width:660px; margin:0 auto; text-align:center}

/* ── sahne katmanları (alttan üste) ──
   .sec__bg              görsel: hafif blur + koyulaştırma, scroll'a bağlı ölçek/kayma
   .sec::after           üst ve alt kenarda zeminle uyumlu geniş geçiş
   .sec::before          bölüm çıkarken sahneyi yumuşakça koyulaştırır
   İçerik bunların üstünde ve keskin kalır.
   --scroll-progress main.js'ten gelir: 0 bölüm alttan giriyor · .5 ekran
   merkezinde · 1 üstten çıktı. */
.sec{--scroll-progress:.5; --sp:var(--scroll-progress);
  --d:max(calc(var(--sp) - .5), calc(.5 - var(--sp)));     /* merkeze uzaklık 0–.5 */
  --out:max(0, calc(var(--sp) - .5))}                      /* çıkış payı 0–.5 */
.sec__light,.halo{display:none}

/* ── sahne görseli ──
   Üst ve alttan taşar; taşan kısım maskeyle sönerek komşu bölümle karışır.
   Blur kenar boşluğu bırakmasın diye görsel her an en az %3,5 büyük. */
.sec__bg{--x:60px; position:absolute; left:0; right:0; top:calc(-1 * var(--x)); bottom:calc(-1 * var(--x));
  z-index:-2; pointer-events:none;
  background-repeat:no-repeat; background-size:cover;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--x) * 2), #000 calc(100% - var(--x) * 2), transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--x) * 2), #000 calc(100% - var(--x) * 2), transparent 100%);
  filter:blur(3.2px) brightness(var(--bright, .72)) saturate(.86);
  /* sinematik derinlik: orman en yavaş katman — sayfadan ±20 px geride kalır
     (bölüm geçişinde ~20 px fark). Sabit %3,5 pay blur kenarını gizler; zoom ve sallanma yok */
  transform:translate3d(0, calc((var(--sp) - .5) * 40px), 0) scale(1.035); transform-origin:50% 50%; will-change:transform}
/* bölüm sınırındaki atmosfer bandı ormandan farklı hızda (±12 px); yazılar normal kaydırmada */
.sec::after{transform:translate3d(0, calc((var(--sp) - .5) * 24px), 0)}

/* bölüm sınırı: zeminle uyumlu geniş, şeffaf geçiş. Sınırın iki yanına
   simetrik yayılır (önceki bölümün altı + bu bölümün üstü); hiçbir yerde
   aniden başlamadığı için düz bir çizgi oluşmaz. */
.sec::after{content:""; position:absolute; left:0; right:0; top:-90px; height:300px; z-index:-2; pointer-events:none;
  background:linear-gradient(180deg, rgba(10,13,30,0) 0, rgba(10,13,30,.24) 45px, rgba(10,13,30,.44) 90px,
                                     rgba(10,13,30,.24) 150px, rgba(10,13,30,.08) 215px, rgba(10,13,30,0) 100%)}
.sec--hello::after{display:none}
/* bölüm çıkarken sahne hafifçe koyulaşıp yumuşar */
.sec::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:#080B1A; opacity:calc(var(--out) * .7);
  /* alt kenarda sönerek biter: bölüm sınırında düz çizgi oluşmaz */
  -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
          mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%)}

.sec--hello .sec__bg{background-image:url("../img/bg-01-karsilama.webp"); background-position:50% 55%;
  top:0; -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - var(--x) * 2), transparent 100%);
                 mask-image:linear-gradient(180deg, #000 calc(100% - var(--x) * 2), transparent 100%)}
.sec--when  .sec__bg{background-image:url("../img/bg-02-tarih.webp");     background-position:72% 50%;
  --bright:.8}   /* görsel zaten karanlık: bitkiler seçilebilsin */
.sec--where .sec__bg{background-image:url("../img/bg-03-mekan.webp");     background-position:26% 50%}
.sec--rsvp  .sec__bg{background-image:url("../img/bg-04-katilim.webp");   background-position:28% 62%}
/* nişan akışı: karşılama görselinin patikalı alt kısmı, aynalanmış ve daha loş —
   akışın ‘yolu’ görselin patikasıyla aynı hizada */
.sec--flow  .sec__bg{background-image:url("../img/bg-01-karsilama.webp");   background-position:50% 92%; --bright:.6;
  transform:translate3d(0, calc((var(--sp) - .5) * 40px), 0) scale(-1.035, 1.035)}
/* kapanış: alt kısım acele etmeden, uzun bir geçişle geceye söner */
.sec--end   .sec__bg{background-image:url("../img/bg-05-kapanis.webp");   background-position:74% 50%;
  bottom:0; -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--x) * 2), #000 70%, rgba(0,0,0,.55) 88%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 calc(var(--x) * 2), #000 70%, rgba(0,0,0,.55) 88%, transparent 100%);
  /* son bölüm: sayfanın dibinden aşağı taşmasın diye yalnızca yukarı kayar */
  transform:translate3d(0, min(0px, calc((var(--sp) - .5) * 40px)), 0) scale(1.035)}

/* ── masaüstü yerleşimleri: görselin önemli bölgeleri açık kalır ── */
@media (min-width:900px){
  /* tarih: sol taraf — sağdaki bitkiler açık */
  .sec--when{justify-items:start}
  .sec--when .sec__inner{margin:0; max-width:560px; text-align:left}
  /* mekân: sağ-orta — soldaki ağaç ve ışıklar açık */
  .sec--where{justify-items:end}
  .sec--where .sec__inner{margin:0; max-width:540px; text-align:left}
  /* katılım: sağ-orta — sol ve alttaki bitkiler açık */
  .sec--rsvp{justify-items:end}
  .sec--rsvp .sec__inner{margin:0; max-width:540px; text-align:left}
  /* kapanış: sol-orta — sağdaki ağaç açık */
  .sec--end{justify-items:start; padding-left:clamp(48px,9vw,160px)}
  .sec--end .sec__inner{margin:0; max-width:620px; text-align:left}

  .sec--when .eyebrow,.sec--where .eyebrow,.sec--rsvp .eyebrow,.sec--when .time{text-indent:0}
  .sec--when .count{justify-content:flex-start; margin-left:0}
  .sec--when .count__unit:first-child{text-align:left}
  .sec--where .address,.sec--rsvp .rsvp__lead,.sec--end .lead{margin-left:0; margin-right:0}
  .sec--where .weather{align-items:flex-start}
  .sec--rsvp .letter{margin-left:clamp(28px,3.4vw,56px)}   /* kâğıt metin ekseninden hafifçe ayrık */
  .sec--rsvp .rsvp__lead{margin-left:clamp(28px,3.4vw,56px); margin-top:clamp(30px,4.4vh,44px)}   /* soru | not → kâğıt: iki grup, çapraz okuma */
  .sec--rsvp .letter{margin-top:clamp(20px,2.8vh,28px)}
  .sec--rsvp.is-done .letter{margin-left:0}
}

/* görünmez çapa noktaları (parıltı yolu; parıltı şimdilik kapalı) */
.anchor{display:block; width:100%; height:0; pointer-events:none}
.anchor--rest{position:absolute; width:0}
.sec--hello .anchor--rest{right:-4%; top:72%}
.sec--when  .anchor--rest{right:-3%; top:64%}
.sec--where .anchor--rest{left:-3%; top:100%}
.sec--rsvp  .anchor--rest{right:-2%; top:42%}
.sec--end   .anchor--rest{left:50%; top:100%}

/* azaltılmış hareket: parıltı yerine sabit yumuşak vurgu (şimdilik kapalı) */
.mainstage.is-rm .accent{position:absolute; left:50%; top:18%; width:220px; height:120px; transform:translate(-50%,0);
  pointer-events:none; z-index:-1; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(195,115,91,.22), rgba(195,115,91,0) 70%)}
.mainstage:not(.is-rm) .accent{display:none}

/* ════════════ TİPOGRAFİ ════════════
   İsimler: Cormorant Upright 600 · Başlıklar: Cormorant Upright 700 ·
   Diğer her şey: Caudex 400 (yedek: Georgia, serif).
   Sıcak kırık beyaz metin, soluk pudra-lila vurgular. Yazılarda glow,
   gölge, kontur, parıltı ya da ayrı giriş efekti yok: düz renk. Tek hareket
   kaydırmaya bağlı geçiştir (main.js · scrollFx). */
.mainstage{--ink:#F4EEE8; --soft:#F4EEE8; --accent:#D9C6DA;
  /* ortak dil: rakam ve saatler inci-lavanta, küçük etiketler soluk mürdüm */
  --lav:#E4D9EA; --lavsoft:rgba(228,217,234,.94); --plumsoft:200,160,184;
  /* yazı gölgesi ve başlık derinlik gölgesi kaldırıldı */
  --shade:none; --hshadow:none}
.names,.date,.venue,.rsvp__title,.flow__title,.flow__name{font-family:"Cormorant Upright",Georgia,serif; font-style:normal}
.date,.venue,.rsvp__title,.flow__title,.flow__name{font-weight:700}
.names{margin:0; font-weight:600; color:var(--ink); line-height:1.08; letter-spacing:.004em}
.names span{font-style:normal; color:var(--accent); -webkit-text-fill-color:var(--accent); font-size:.7em; padding:0 .12em; vertical-align:.04em}
.names--hero{font-size:clamp(54px,7.6vw,114px); white-space:nowrap}
.sec--hello .sec__inner{max-width:900px}

/* ── 1. karşılama ──
   Orman fotoğrafı ve düz yazılar; ek sis, ışık katmanı ya da süs yok.
   Renkler: sıcak inci, soluk lila, mürdüm-gül kurusu (saf beyaz yok). */
.sec--hello{--pearl:#F1E8DF; --lilac:#D7C3D9; --rose:#C08E9E}

/* ── ortak dil: IŞIK ──
   Her sahnenin tek bir ışık fikri var; süs, çiçek ya da çerçeve yok. Renkler mevcut paletten:
   inci-lavanta #E4D9EA, kırık beyaz #F4EEE8 / #F1E8DF, mauve #C08E9E, soluk mürdüm #C8A0B8. */
.sep{display:block; height:auto}
.sep--when,.sep--rsvp{display:none}              /* yalnızca eski yer tutucular */

/* yazılar: isimler ana odak; üst başlık ve "&" daha yumuşak; gövde aydınlık inci */
.hello__kicker{margin:0 0 clamp(20px,3vh,32px); font-size:clamp(13px,1vw,15px); letter-spacing:.16em; text-indent:.16em;
  text-transform:uppercase; color:rgba(215,195,217,.92); text-shadow:var(--shade)}
.sec--hello .names{color:var(--pearl)}
.names--hero span{position:relative; font-size:.84em; padding:0 .16em; vertical-align:.03em;
  color:rgba(192,142,158,.96); -webkit-text-fill-color:rgba(192,142,158,.96)}
/* sahnenin gizli başlangıç noktası "&": altından sis içinde belli belirsiz bir ışık izi iner, bir
   kısmı kaybolur ve davet metninin ilk satırına varmadan söner. Yakınında simetrik olmayan üç
   küçük sedef nokta. Çizgi ya da süs değil; yumuşak, bulanık, yarı görünür bir iz */
.names--hero span::after{content:""; position:absolute; left:50%; top:0; width:2.8em; height:2.6em; margin-left:-1.6em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 260'%3E%3Cdefs%3E%3ClinearGradient id='t' gradientUnits='userSpaceOnUse' x1='162' y1='102' x2='50' y2='180'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='.16' stop-color='%23F1E8DF' stop-opacity='.6'/%3E%3Cstop offset='.55' stop-color='%23F1E8DF' stop-opacity='.3'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='.5'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='w' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='8'/%3E%3C/filter%3E%3Cfilter id='b' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='2.4'/%3E%3C/filter%3E%3Cfilter id='s' x='-40%' y='-60%' width='180%' height='220%'%3E%3CfeGaussianBlur stdDeviation='1.1'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M162 102C156 128 120 152 50 180' fill='none' stroke='url(%23t)' stroke-width='22' stroke-linecap='round' opacity='.16' filter='url(%23w)'/%3E%3Cpath d='M162 102C156 128 120 152 50 180' fill='none' stroke='url(%23t)' stroke-width='4' stroke-linecap='round' stroke-dasharray='30 14 12 22 60' opacity='.3' filter='url(%23b)'/%3E%3Cpath d='M162 102C156 128 120 152 50 180' fill='none' stroke='url(%23t)' stroke-width='.9' stroke-linecap='round' stroke-dasharray='16 12 6 24 22 50' opacity='.36' filter='url(%23s)'/%3E%3Ccircle cx='205' cy='35' r='6' fill='url(%23h)'/%3E%3Ccircle cx='205' cy='35' r='1.25' fill='%23F4EEE8' fill-opacity='.85'/%3E%3Ccircle cx='126' cy='163' r='4.5' fill='url(%23h)'/%3E%3Ccircle cx='126' cy='163' r='.85' fill='%23F4EEE8' fill-opacity='.65'/%3E%3Ccircle cx='184' cy='141' r='.75' fill='%23E4D9EA' fill-opacity='.42'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}
/* açıklama: NİŞANIMIZA DAVETLİSİNİZ ve isimlerle aynı ana eksende, kontrollü bir ölçüde şiirsel ve
   dengeli bir blok (3 + 2 satır, satırlar birbirine yakın). İsimlerle arasında geniş nefes; ışık izi
   bu boşlukta söner. Tarih bloğun sakin final noktası */
.sec--hello .lead{width:100%; max-width:20em; margin:clamp(46px,6.8vh,70px) auto 0; text-align:center; color:var(--pearl)}
.sec--hello .lead p{margin:0; letter-spacing:0; text-wrap:balance}
.sec--hello .lead p + p{margin-top:.6em}
.hello__date{margin:clamp(44px,6.4vh,64px) 0 0; font-size:clamp(14px,1.05vw,16px); letter-spacing:.2em; text-indent:.2em;
  text-transform:uppercase; color:rgba(241,232,223,.94); text-shadow:var(--shade)}
@media (max-width:760px){ .sec--hello .lead{margin-top:clamp(30px,4.4vh,40px)} .hello__date{margin-top:clamp(34px,5vh,46px)} }
.eyebrow{margin:0 0 clamp(16px,2.4vh,24px); font-weight:400; font-size:clamp(12.5px,.95vw,14px);
  letter-spacing:.18em; text-indent:.18em; text-transform:uppercase; color:rgba(var(--plumsoft),.96); text-shadow:var(--shade)}
.lead{margin:0 auto; max-width:46ch; font-size:clamp(18px,1.55vw,22px); line-height:1.65;
  color:var(--soft); letter-spacing:.01em; text-wrap:balance; text-shadow:var(--shade)}
.lead .line{display:block; text-wrap:balance}

/* ── kaydırmaya bağlı geçiş (main.js · scrollFx) ──
   Bölümden aşağı ayrılırken metin grupları hiyerarşi sırasıyla yalnızca ~10 px
   yukarı süzülür ve opaklıkla temizce kaybolur. Yazının kendisine hiçbir
   maske, gürültü, parçacık, filtre ya da boyama uygulanmaz; harfler son ana
   dek keskin kalır. Peri hissi ayrı bir katmandan gelir: yazı solmaya
   başladığında çevresinden 4–6 küçük, yumuşak sedef ışık zerresi hafif
   kavislerle yukarı süzülüp söner (.fx-motes). Değerler yalnızca kaydırmadan
   gelir; dinlenmede hiçbir stil kalmaz. */
.fx-motes{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:2}

/* ── 2. tarih, saat, geri sayım ── */
.date{margin:0; font-size:clamp(48px,5.8vw,82px); line-height:1.06; color:var(--ink); letter-spacing:-.005em}
.time{margin:clamp(14px,2vh,20px) 0 0; font-weight:400; font-size:clamp(14px,1.1vw,16.5px);
  letter-spacing:.16em; text-indent:.16em; text-transform:uppercase; color:rgba(244,238,232,.92); text-shadow:var(--shade)}
.count{display:flex; justify-content:center; align-items:flex-start; gap:clamp(20px,3.4vw,46px);
  margin:clamp(44px,7vh,76px) auto 0; font-variant-numeric:tabular-nums lining-nums}
.count__unit{position:relative; min-width:2.6ch; text-align:center}
.count__unit + .count__unit::before{content:""; position:absolute; left:calc(-1 * clamp(10px,1.7vw,23px)); top:14%;
  width:1px; height:52%; background:linear-gradient(180deg, rgba(222,206,226,0), rgba(222,206,226,.18) 30% 70%, rgba(222,206,226,0))}
.count__num{display:block; font-weight:400; font-size:clamp(42px,4.8vw,68px); line-height:1; color:var(--ink); text-shadow:var(--shade);
}
.count__label{display:block; margin-top:clamp(10px,1.4vh,14px); font-weight:400; font-size:clamp(12px,.9vw,13.5px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); text-shadow:var(--shade)}
.count__today{display:none; margin:clamp(36px,5vh,56px) 0 0; font-size:clamp(24px,2.6vw,34px); font-style:normal; color:var(--ink); text-shadow:var(--shade)}
.count.is-over{display:none}
.count.is-over + .count__today{display:block}

/* ── 2. tarih ve geri sayım ──
   İçerik solda ama biraz daha geniş ve merkeze yakın. Başlık sıcak kırık
   beyaz, rakamlar inci-lavanta, küçük etiketler soluk mürdüm. Süs yok. */
@media (min-width:900px){
  .sec--when{padding-left:clamp(56px,13vw,240px)}
  .sec--when .sec__inner{max-width:680px}
}
/* hiyerarşi: küçük üst başlık → büyük tarih (tek odak) → daha sakin, geniş aralıklı gün/saat → sayaç */
.sec--when .eyebrow{margin-bottom:clamp(18px,2.6vh,28px)}
.sec--when .time{margin-top:clamp(16px,2.3vh,24px); font-size:clamp(13px,1vw,15px); letter-spacing:.22em; color:var(--lavsoft)}
.sec--when .count__num{color:var(--lav)}
.sec--when .count__label{color:rgba(var(--plumsoft),.96)}
/* sayaç: dört eşit sütun, aynı hizada; aralarında iki ucu sönen, ortada en belirgin çok ince
   soluk mürdüm kıl (düz mekanik çubuk değil) */
.sec--when .count{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0;
  width:min(100%, 560px); max-width:none; margin:clamp(46px,6.6vh,70px) 0 0}
.sec--when .count__unit,.sec--when .count__unit:first-child{min-width:0; flex:none; margin:0; text-align:center; padding:0 clamp(6px,1.2vw,16px)}
.sec--when .count__unit + .count__unit::before{display:block; left:0; top:22%; height:38%; width:1px;
  background:linear-gradient(180deg, rgba(var(--plumsoft),0), rgba(var(--plumsoft),.28) 50%, rgba(var(--plumsoft),0))}
@media (min-resolution:2dppx){ .sec--when .count__unit + .count__unit::before{width:.5px; background:linear-gradient(180deg, rgba(var(--plumsoft),0), rgba(var(--plumsoft),.4) 50%, rgba(var(--plumsoft),0))} }
/* sahnenin gizli fikri: ormanın ve sisin içine karışmış dev bir "17". Okunacak bir başlık değil;
   sahne görseliyle aynı katmanda (aynı bulanıklık, aynı derinlik hareketi), çok düşük
   opaklıkta sedef bir tipografik gölge. Rakamlar tarihle aynı (Cormorant, eski stil) */
.sec--when .sec__bg::after{content:"17"; position:absolute; pointer-events:none;
  left:22vw; top:46%; transform:translateY(-50%);
  font-family:"Cormorant Upright",Georgia,serif; font-weight:600; font-size:clamp(420px,88vh,900px); line-height:1; letter-spacing:-.04em; font-variant-numeric:lining-nums;
  color:rgba(241,232,223,.088); mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg, #000 36%, rgba(0,0,0,.62) 76%, transparent 97%), linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.86) 40%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.62) 80%, rgba(0,0,0,.3) 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(180deg, #000 36%, rgba(0,0,0,.62) 76%, transparent 97%), linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.86) 40%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.62) 80%, rgba(0,0,0,.3) 100%);
          mask-composite:intersect}/* dar ekran: içerik ortalı; sayaç da ortada, dört birim tek satırda */
@media (max-width:899px){
  .sec--when .count{margin-left:auto; margin-right:auto}
}
@media (max-width:760px){
  .sec--when .count{width:100%; margin-top:clamp(38px,5.6vh,52px)}
  .sec--when .count__num{font-size:clamp(32px,9.8vw,42px)}
  .sec--when .count__label{font-size:11.5px; letter-spacing:.1em}
}

/* ── 3. mekân, adres, hava ── */
.venue{margin:0; font-size:clamp(44px,4.8vw,72px); line-height:1.06; color:var(--ink); letter-spacing:-.004em}
.address{margin:clamp(18px,2.6vh,26px) auto 0; max-width:50ch; font-size:clamp(18px,1.4vw,21px); line-height:1.65;
  color:rgba(244,238,232,.94); text-shadow:var(--shade)}
.address span{display:block; text-wrap:balance}
/* yol tarifi: çerçevesiz, zarif bir metin bağlantısı; altında kısa, incelerek kaybolan kıl çizgi
   (üzerine gelince çizgi yazının boyunca uzanır, ok hafifçe ilerler) */
.route{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em; min-height:44px;
  margin-top:clamp(22px,3.1vh,32px); padding:8px 0 10px;
  font-weight:400; font-size:clamp(13.5px,1vw,15px); letter-spacing:.2em; text-transform:uppercase;
  color:#F2E2E8; text-decoration:none; border:0; border-radius:0; background:none;
  transition:color .4s ease}
.route::after{content:""; position:absolute; left:0; bottom:4px; width:38px; height:1px; pointer-events:none;
  background:linear-gradient(90deg, rgba(var(--plumsoft),.85), rgba(var(--plumsoft),0));
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.route i{font-style:normal; letter-spacing:0; font-size:1.1em; line-height:1; transition:transform .4s ease}
.route:hover,.route:focus-visible{color:#FFF6F8}
.route:hover::after,.route:focus-visible::after{width:100%}
.route:hover i{transform:translateX(4px)}
.route:focus-visible{outline:1px solid rgba(222,206,226,.7); outline-offset:6px}

/* hava durumu: kart ya da çerçeve yok — küçük ikon + sakin bir bilgi satırı */
.weather{position:relative; display:flex; flex-direction:column; align-items:center;
  width:100%; margin:clamp(26px,3.8vh,40px) auto 0; padding:0}
.weather__panel{display:flex; align-items:center; gap:12px; max-width:440px; width:auto;
  padding:0; text-align:left; border-radius:0; background:none; box-shadow:none}
.weather__note{margin:0; font-size:16px; line-height:1.55; color:rgba(244,238,232,.82); text-shadow:var(--shade); text-wrap:balance}
/* canlı tahmin: tek, kompakt satır — ikon · 18° · Parçalı bulutlu, yanında küçük soluk ek bilgi */
.weather__live{display:none; font-size:16px; line-height:1.55}
.weather.is-live .weather__note{display:none}
.weather.is-live .weather__live{display:block}
.weather__temp{margin-right:.45em}
.weather__icon{flex:none; width:24px; height:24px; stroke:rgba(233,210,222,.78); stroke-width:1.1; fill:none; stroke-linecap:round; stroke-linejoin:round}
.weather__temp{font-family:"Cormorant Upright",Georgia,serif; font-weight:700; font-size:20px; line-height:1; color:var(--ink); font-variant-numeric:lining-nums}
.weather__meta{display:inline; text-align:left; font-weight:400; font-size:16px; letter-spacing:0; line-height:1.55; text-transform:none;
  color:rgba(244,238,232,.88); text-shadow:var(--shade)}
.weather__meta b{display:inline; font-weight:400; color:rgba(244,238,232,.94)}
.weather__meta b::before{content:"·"; margin:0 .45em 0 0; color:rgba(var(--plumsoft),.9)}
.weather__meta span{margin-left:.7em; font-size:12.5px; letter-spacing:.06em; color:rgba(var(--plumsoft),.92)}
.weather__meta span:empty{display:none}
/* mekân: tek editoryal bilgi grubu — MEKÂN / Baben Restaurant / adres / yol tarifi / hava.
   Sahnenin gizli fikri: yol tarifinin ok yönünden başlayan, çok düşük opaklıkta minimal bir masal
   haritası izi — birkaç ince yol parçası, iki küçük kesişim, soyut bir yön işareti ve yolun
   sonunda tek bir sedef ışık ile yanında küçücük "Baben". Hava satırının üstünden geçmez;
   tıklanmaz, ekran okuyucuya okunmaz (bağlantının kutusunu ve anlatıcı ölçüsünü değiştirmez) */
.sec--where .address{margin-top:clamp(16px,2.4vh,24px)}
.route::before{content:"Baben"; content:"Baben" / ""; position:absolute; left:calc(100% + 12px); top:50%; width:420px; height:290px; margin-top:-16px;
  box-sizing:border-box; padding:1px 0 0 38px; pointer-events:none;
  font-family:"Cormorant Upright",Georgia,serif; font-weight:600; font-size:12px; line-height:1; letter-spacing:.1em; text-transform:none;
  color:rgba(241,232,223,.5); white-space:nowrap;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 290'%3E%3Cdefs%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='24' y1='16' x2='404' y2='288'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='.34'/%3E%3Cstop offset='.5' stop-color='%23E4D9EA' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s' gradientUnits='userSpaceOnUse' x1='140' y1='14' x2='190' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='.2'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='c' gradientUnits='userSpaceOnUse' x1='326' y1='188' x2='420' y2='154'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='.45' stop-color='%23E4D9EA' stop-opacity='.17'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M24 16C38 16.5 52 16.5 66 15.8' fill='none' stroke='%23E4D9EA' stroke-opacity='.38' stroke-width='.9' stroke-linecap='round' stroke-dasharray='1 4.2'/%3E%3Cpath d='M66 15.8C92 14.5 112 11 140 14C176 18 206 30 240 40C288 54 330 62 356 88C377 110 384 140 382 168C380 205 392 240 404 288' fill='none' stroke='url(%23r)' stroke-width='.85' stroke-linecap='round'/%3E%3Cpath d='M140 14C153 9 168 4 190 1' fill='none' stroke='url(%23s)' stroke-width='.7' stroke-linecap='round'/%3E%3Cpath d='M326 188C348 179 366 172 382 168C396 164 408 159 420 154' fill='none' stroke='url(%23c)' stroke-width='.7' stroke-linecap='round'/%3E%3Ccircle cx='140' cy='14' r='1.1' fill='%23E4D9EA' fill-opacity='.28'/%3E%3Ccircle cx='382' cy='168' r='1.1' fill='%23E4D9EA' fill-opacity='.24'/%3E%3Cpath d='M404 60V40M400.5 44.5L404 39L407.5 44.5' fill='none' stroke='%23E4D9EA' stroke-opacity='.26' stroke-width='.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='404' cy='64' r='.9' fill='%23E4D9EA' fill-opacity='.26'/%3E%3Ccircle cx='24' cy='16' r='11' fill='url(%23h)'/%3E%3Ccircle cx='24' cy='16' r='2' fill='%23F4EEE8' fill-opacity='.9'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}

/* ── 4. katılım formu: inci-kâğıt mektup yüzeyi ── */
.rsvp__title{margin:0; font-size:clamp(36px,3.9vw,58px); line-height:1.08; color:var(--ink)}
/* başlık grubu formun dışında, kendi tipografik kompozisyonu: KATILIM → büyük soru → sakin, dar
   açıklama. Kâğıt bu metin ekseninden biraz sağa ve aşağıya bırakılmış bir nesne gibi durur */
.rsvp__lead{margin:clamp(16px,2.2vh,22px) auto 0; max-width:31ch; font-size:clamp(18px,1.35vw,20px); line-height:1.65; color:rgba(244,238,232,.95); text-shadow:var(--shade)}
/* sahnenin fikri: form, ormanın içinde duran bir cevap kâğıdı — açık sedef / kırık beyaz yüzey,
   çok hafif doğal doku, kenarları neredeyse fark edilmeyecek kadar düzensiz, çok az eğik, en az gölge.
   Parşömen, kraft ya da yanık kenar değil */
.letter{position:relative; margin:clamp(34px,5vh,50px) auto 0; max-width:500px; text-align:left;
  perspective:1200px}
.letter__sheet{position:relative; isolation:isolate; padding:clamp(30px,3.6vw,42px) clamp(26px,3.6vw,40px) clamp(26px,3vw,36px);
  box-shadow:0 1px 1px rgba(10,8,16,.12), 0 6px 16px rgba(10,8,24,.16);
  color:#3F2431; border-radius:2px; rotate:-.3deg;
  transition:opacity .6s ease, transform .6s ease}
/* kâğıdın yüzeyi ve düzensiz kenarı ayrı katmanda: yazılar ve alan çizgileri net kalır */
.letter__sheet::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:2px; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .14'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(130% 100% at 50% 50%, rgba(255,250,246,0) 62%, rgba(190,168,172,.16) 100%),
    radial-gradient(120% 90% at 22% 0%, rgba(255,250,246,.3), rgba(255,250,246,0) 55%),
    linear-gradient(165deg,rgba(244,238,233,.93) 0%,rgba(239,231,229,.9) 55%,rgba(230,220,225,.88) 100%);
  background-size:200px 200px, 100% 100%, 100% 100%, 100% 100%;
  -webkit-backdrop-filter:blur(6px) saturate(1.05); backdrop-filter:blur(6px) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(244,238,232,.6);   /* üst kenarda ince kâğıt kalınlığı ışığı; kenar çok hafif düzensiz */
  clip-path:polygon(.3px 1.1px, 19% .2px, 42% 1.35px, 67% .25px, 89% 1.05px, calc(100% - .2px) .3px, calc(100% - 1.2px) 23%, 100% 48%, calc(100% - .95px) 77%, calc(100% - .25px) calc(100% - .4px), 81% calc(100% - 1.3px), 56% calc(100% - .2px), 31% calc(100% - 1.15px), 9% calc(100% - .3px), .5px calc(100% - .9px), 0 79%, 1.1px 52%, .15px 26%)}
/* gizli detay: sağ üst köşede matbaada basılmış gibi küçücük bir işaret (logo değil; yalnızca bakan görür) */
.letter__sheet::after{content:"D & H\A 17 · 10 · 26"; content:"D & H\A 17 · 10 · 26" / ""; position:absolute; top:clamp(15px,1.9vw,21px); right:clamp(18px,2.4vw,26px);
  white-space:pre; text-align:right; pointer-events:none;
  font-family:"Cormorant Upright",Georgia,serif; font-weight:600; font-size:10px; line-height:1.55; letter-spacing:.24em; font-variant-numeric:lining-nums;
  color:rgba(126,82,100,.5)}
.letter__gilt{position:absolute; inset:0; border-radius:2px; pointer-events:none; border:1px solid rgba(178,118,136,.36); inset:1.6px;
  -webkit-mask:linear-gradient(118deg,#000 0%,rgba(0,0,0,.3) 24%,rgba(0,0,0,0) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.35) 78%,#000 100%);
          mask:linear-gradient(118deg,#000 0%,rgba(0,0,0,.3) 24%,rgba(0,0,0,0) 42%,rgba(0,0,0,0) 58%,rgba(0,0,0,.35) 78%,#000 100%)}
/* alanlar: mektup satırları gibi — küçük aralıklı başlıklar, ince kıl çizgiler */
.field{display:block; margin:0 0 clamp(20px,2.6vh,26px)}
.field__label{display:block; margin-bottom:4px; font-weight:400;
  font-size:11.5px; letter-spacing:.18em; color:#7E5264}
.field__input{display:block; width:100%; padding:7px 2px 8px; border:0; border-bottom:1px solid rgba(126,82,100,.28);
  background:transparent; color:#3F2431; font-family:"Caudex",Georgia,serif; font-weight:400; font-size:18px; line-height:1.4;
  border-radius:0; outline:none; transition:border-color .35s ease}
.field__input::placeholder{color:#8A6874; opacity:1}
.field__input:focus{border-bottom-color:rgba(126,82,100,.75)}
textarea.field__input{resize:vertical; min-height:64px}
select.field__input{-webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#7E5264 50%),linear-gradient(135deg,#7E5264 50%,transparent 50%);
  background-position:calc(100% - 14px) 55%, calc(100% - 9px) 55%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
/* seçenekler: mürekkep halkası; seçilince içinde küçük bir nokta */
.choice{display:flex; gap:clamp(18px,4vw,36px); flex-wrap:wrap}
.choice label{position:relative; display:inline-flex; align-items:center; gap:10px; min-height:40px; cursor:pointer;
  font-size:18px; color:#3F2431}
.choice input{position:absolute; opacity:0; width:0; height:0}
.choice i{width:13px; height:13px; border-radius:50%; border:1px solid rgba(126,82,100,.6); flex:none;
  transition:background-color .3s ease, box-shadow .3s ease}
.choice input:checked + i{background:#7E5264; box-shadow:inset 0 0 0 3px #F3ECE6}
.choice input:focus-visible + i{outline:1px solid #7E5264; outline-offset:3px}
.field--count{display:none}
.field--count.is-on{display:block}
.rsvp__actions{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:clamp(8px,1.2vh,12px)}
/* gönder: kutu değil, mektubun altına atılmış bir satır gibi — ince alt çizgi */
.btn{font-family:"Caudex",Georgia,serif; font-weight:400; font-size:17px; letter-spacing:.06em;
  color:#5A2430; background:transparent; border:0; border-bottom:1px solid rgba(90,36,48,.42); border-radius:0;
  min-height:44px; padding:10px 2px 6px; cursor:pointer;
  transition:color .4s ease, border-color .4s ease}
.btn:hover,.btn:focus-visible{background:transparent; color:#3F2431; border-bottom-color:#5A2430}
.btn:focus-visible{outline:1px solid #7E5264; outline-offset:4px}
.btn[disabled]{opacity:.6; cursor:default}
.rsvp__error{margin:0; font-size:17px; color:#7A2E3A; opacity:0; transition:opacity .4s ease}
.rsvp__error.is-on{opacity:1}

/* gönderim (~2.1 s): cevap kâğıdı zarfın üstünde belirir → zarfın içine süzülür (arka yüz < kâğıt < ön cep,
   kâğıt zarfın dışına hiç taşmaz) → kapak kapanır → zarf ışığa karışarak yukarı doğru ayrılır → teşekkür */
.letter.is-sending .letter__sheet{opacity:0; transform:scale(.985); pointer-events:none; transition:opacity .3s ease, transform .4s ease}
.envelope{position:absolute; left:50%; top:clamp(150px,44%,210px); width:150px; height:96px; margin-left:-75px; opacity:0; pointer-events:none;
  transform-origin:50% 50%}
.envelope__back{position:absolute; inset:0; z-index:1; border-radius:3px; background:linear-gradient(180deg,#D3ACB9,#C69AA9);
  box-shadow:0 8px 18px rgba(10,8,16,.28)}
.envelope__pocket{position:absolute; inset:0; z-index:4; border-radius:3px; overflow:hidden}
.envelope__pocket::before{content:""; position:absolute; left:0; right:0; bottom:0; height:100%;
  background:linear-gradient(160deg,#F4EEE8,#E9DFD6); clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}
.envelope__flap{position:absolute; left:0; right:0; top:0; z-index:2; height:58%; transform-origin:50% 0;
  background:linear-gradient(170deg,#F6F0EA,#EBE1D8); clip-path:polygon(0 0,100% 0,50% 100%);
  transform:rotateX(180deg); backface-visibility:visible}
/* kâğıt: zarftan dar, zarfın içinde durur; açık kapağın önünde, ön cebin arkasında */
.note{position:absolute; left:50%; bottom:8px; z-index:3; width:122px; margin-left:-61px; opacity:0; pointer-events:none;
  transform:translateY(-58px)}
.note__half{padding:8px 10px; background:linear-gradient(165deg,#F7F2EC,#EEE6DE); color:#3F2431; text-align:center;
  font-size:11.5px; line-height:1.45; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.note__half--top{border-radius:2px 2px 0 0; padding-top:10px; font-family:"Cormorant Upright",Georgia,serif; font-weight:600; font-size:14px}
.note__half--bottom{border-radius:0 0 2px 2px; padding-top:0; padding-bottom:12px; color:#7E5264}
.note__half--bottom i{display:none}
.letter.is-sending .envelope:not(.envelope--final){animation:envSeq 2.1s cubic-bezier(.4,.05,.3,1) forwards}
.letter.is-sending .note{animation:noteIn 1.2s cubic-bezier(.45,.05,.25,1) .1s forwards}
.letter.is-sending .envelope:not(.envelope--final) .envelope__flap{animation:flapClose .34s cubic-bezier(.4,.05,.25,1) 1.24s forwards}
@keyframes envSeq{
  0%   {opacity:0; transform:translateY(8px)}
  14%  {opacity:1; transform:translateY(0)}
  76%  {opacity:1; transform:translateY(0) scale(1)}
  100% {opacity:0; transform:translateY(-34px) scale(.9)}}
/* kâğıt içeri girerken yazısı zarfın açıklığında görünmesin: son bölümde söner, kapak bunun üstüne kapanır */
@keyframes noteIn{
  0%   {opacity:0; transform:translateY(-58px)}
  24%  {opacity:1; transform:translateY(-58px)}
  40%  {opacity:1; transform:translateY(-58px)}
  56%  {opacity:1}
  100% {opacity:0; transform:translateY(0)}}
@keyframes flapClose{from{transform:rotateX(180deg); z-index:5} to{transform:rotateX(0); z-index:5}}

/* teşekkür: formun yerinde, bölümün kendi kompozisyonunda — KATILIM, çok küçük kapalı zarf ve ışığı,
   iki satırlık mesaj (başlık ölçüsünde soru yerine cevap). Sahnede gereksiz büyük zarf kalmaz */
.letter.is-done .letter__sheet,.letter.is-done .envelope:not(.envelope--final){display:none}
.rsvp__final{display:none; flex-direction:column; align-items:flex-start; gap:clamp(16px,2.4vh,22px); padding:0}
.letter.is-done .rsvp__final{display:flex; animation:finalIn .9s cubic-bezier(.3,.1,.25,1) both}
@keyframes finalIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
.envelope--final{position:relative; left:auto; top:auto; margin:0; opacity:1; width:46px; height:30px; transform:none}
.envelope--final .envelope__back{box-shadow:0 0 22px 6px rgba(241,232,223,.14), 0 4px 10px rgba(10,8,16,.25)}
.envelope--final .envelope__flap{transform:rotateX(0); z-index:5}
.envelope__seal{position:absolute; left:50%; top:54%; z-index:6; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #7B3448, #5A2233 60%, #461A28)}
.rsvp__done{margin:0; text-align:left; color:var(--ink); text-shadow:var(--shade)}
.rsvp__done span{display:block}
.rsvp__done span:first-child{font-family:"Cormorant Upright",Georgia,serif; font-weight:700; font-size:clamp(34px,3.4vw,50px); line-height:1.1}
.rsvp__done span:last-child{margin-top:.55em; font-size:clamp(18px,1.35vw,20px); line-height:1.6; color:rgba(244,238,232,.86)}
.sec--rsvp.is-done .rsvp__title,.sec--rsvp.is-done .rsvp__lead{display:none}
.sec--rsvp.is-done .letter{margin-top:clamp(18px,2.8vh,28px)}

/* ── 5. nişan akışı: gecenin beş ışık durağı ──
   Program çizelgesi değil, ormanda ilerleyen küçük bir yolculuk. Sis içinde belli belirsiz
   ilerleyen tek bir sedef ışık yolu; duraklarda ışık birikir, aralarda söner. Beş durak bu yolun
   farklı yerlerinde (eşit aralıklı kolonlar değil); bilgiler sırayla yolun biraz altında, biraz
   üstünde durur. Yol, her adımın kendi parçasından oluşur (parçalar aynı yükseklik ve eğimle
   buluşur, kaydırmada adımla birlikte süzülür); eğri flowpath.ps1 ile hesaplandı. */
.sec--flow{--gut:clamp(24px,7vw,128px); grid-template-columns:minmax(0,1fr)}   /* kaydırılan şerit sütunu genişletmesin */
.sec--flow .sec__inner{max-width:1180px; min-width:0}
.flow__title{margin:0; font-size:clamp(40px,4.3vw,66px); line-height:1.08; color:var(--ink)}
.flow{position:relative; display:flex; list-style:none; margin:clamp(76px,11vh,124px) auto 0; padding:0; max-width:1120px; text-align:left}
.flow__item{position:relative; flex:1 1 0; min-width:0; box-sizing:border-box; padding:0}
/* durakların yol üzerindeki yeri (adım genişliğinin yüzdesi) ve yolun o noktadaki yüksekliği */
.flow__item:nth-child(1){--nx:30%; --ny:-7px; --ly:4px}
.flow__item:nth-child(2){--nx:26%; --ny:9px; --ly:12px}
.flow__item:nth-child(3){--nx:16%; --ny:-5px; --ly:15px}
.flow__item:nth-child(4){--nx:24%; --ny:10px; --ly:2px}
.flow__item:nth-child(5){--nx:14%; --ny:-6px; --ly:8px}
.flow__rail{position:relative; display:block; height:2px; margin:-1px 0; pointer-events:none}   /* 2 px: kaydırma geçişi ölçebilsin; yerleşimde 0 */
.flow__rail::before{content:""; position:absolute; left:0; right:0; top:-29px; height:60px; background-repeat:no-repeat; background-size:100% 100%}
/* yol ilk ve son durağın ötesine yarım adım uzanır: ekranın kenarındaki sisten gelir, sise gider */
.flow__item:first-child .flow__rail::before{left:-50%}
.flow__item:last-child .flow__rail::before{right:-50%}
/* masaüstü rota parçaları (flowpath.ps1 ile üretildi) */
.flow__item:nth-child(1) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 300 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='300' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.07' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.13' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.27' stop-color='%23F1E8DF' stop-opacity='0.17'/%3E%3Cstop offset='0.33' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.47' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.53' stop-color='%23F1E8DF' stop-opacity='0.57'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.67' stop-color='%23F1E8DF' stop-opacity='0.39'/%3E%3Cstop offset='0.73' stop-color='%23F1E8DF' stop-opacity='0.19'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.04'/%3E%3Cstop offset='0.87' stop-color='%23F1E8DF' stop-opacity='0.03'/%3E%3Cstop offset='0.93' stop-color='%23F1E8DF' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.31'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='300' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.07' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.13' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.27' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.33' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.47' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.53' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.67' stop-color='%23E4D9EA' stop-opacity='0.18'/%3E%3Cstop offset='0.73' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.87' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.93' stop-color='%23E4D9EA' stop-opacity='0.06'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.14'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='340' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='340' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 3C53.33 -0.33 106.67 -7 160 -7C206.67 -7 253.33 1.51 300 6.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 3C53.33 -0.33 106.67 -7 160 -7C206.67 -7 253.33 1.51 300 6.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 3C53.33 -0.33 106.67 -7 160 -7C206.67 -7 253.33 1.51 300 6.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
.flow__item:nth-child(2) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.31'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.48'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.35'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.23'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.14'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.21'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.33'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.14'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.16'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.1'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.06'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.09'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 6.11C17.33 7.83 34.67 9 52 9C101.33 9 150.67 -0.46 200 -3.83' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 6.11C17.33 7.83 34.67 9 52 9C101.33 9 150.67 -0.46 200 -3.83' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 6.11C17.33 7.83 34.67 9 52 9C101.33 9 150.67 -0.46 200 -3.83' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
.flow__item:nth-child(3) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.48'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.35'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.21'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.09'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.04'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.16'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.16'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.1'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.04'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.07'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 -3.83C10.67 -4.56 21.33 -5 32 -5C88 -5 144 4.07 200 8.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 -3.83C10.67 -4.56 21.33 -5 32 -5C88 -5 144 4.07 200 8.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 -3.83C10.67 -4.56 21.33 -5 32 -5C88 -5 144 4.07 200 8.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
.flow__item:nth-child(4) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.34'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.48'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.45'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.29'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.1'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.09'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.29'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.47'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.04'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 8.11C16 9.26 32 10 48 10C98.67 10 149.33 -1.41 200 -4.96' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 8.11C16 9.26 32 10 48 10C98.67 10 149.33 -1.41 200 -4.96' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 8.11C16 9.26 32 10 48 10C98.67 10 149.33 -1.41 200 -4.96' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
.flow__item:nth-child(5) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 300 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='300' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.47'/%3E%3Cstop offset='0.07' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.13' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.27' stop-color='%23F1E8DF' stop-opacity='0.33'/%3E%3Cstop offset='0.33' stop-color='%23F1E8DF' stop-opacity='0.21'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3Cstop offset='0.47' stop-color='%23F1E8DF' stop-opacity='0.04'/%3E%3Cstop offset='0.53' stop-color='%23F1E8DF' stop-opacity='0.01'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.03'/%3E%3Cstop offset='0.67' stop-color='%23F1E8DF' stop-opacity='0.05'/%3E%3Cstop offset='0.73' stop-color='%23F1E8DF' stop-opacity='0.06'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.87' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.93' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='300' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.07' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.13' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.27' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='0.33' stop-color='%23E4D9EA' stop-opacity='0.09'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.47' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.53' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.67' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.73' stop-color='%23E4D9EA' stop-opacity='0.03'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.87' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.93' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='340' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='340' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 -4.96C9.33 -5.61 18.67 -6 28 -6C118.67 -6 209.33 -0.67 300 2' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 -4.96C9.33 -5.61 18.67 -6 28 -6C118.67 -6 209.33 -0.67 300 2' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 -4.96C9.33 -5.61 18.67 -6 28 -6C118.67 -6 209.33 -0.67 300 2' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
/* durak: standart daire değil, küçük sedef ışık düğümü ve çok yumuşak hâlesi;
   anlatıcı ışık geçerken tutuşur (guide.js .is-lit ekler) */
.flow__dot{position:absolute; left:var(--nx); top:calc(1px + var(--ny)); width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #F4EEE8 0 22%, rgba(241,232,223,.6) 42%, rgba(228,217,234,.18) 66%, rgba(228,217,234,0) 76%);
  box-shadow:0 0 12px 4px rgba(241,232,223,.09); opacity:.78; transform:scale(.92);
  transition:opacity 1.1s ease, transform 1.2s cubic-bezier(.22,1,.36,1), box-shadow 1.4s ease}
.flow__item.is-lit .flow__dot{opacity:1; transform:scale(1.12);
  box-shadow:0 0 14px 4px rgba(241,232,223,.24), 0 0 32px 10px rgba(242,176,111,.09)}
.flow__item.is-lit .flow__time{color:#F4EEE8}
/* bilgi: durağın hizasından başlar (yolun üstündeki bir etiket gibi), sola yaslı.
   Hiyerarşi: saat en güçlü küçük bilgi · etkinlik adı ikinci seviye · açıklama sakin */
.flow__label{display:block; box-sizing:border-box; margin:calc(clamp(20px,2.8vh,28px) + var(--ly, 0px)) 0 0 calc(var(--nx) - 4px); max-width:17em}
.flow__time{display:block; font-family:"Cormorant Upright",Georgia,serif; font-weight:700; font-size:clamp(20px,1.75vw,26px); letter-spacing:.05em; line-height:1.1;
  color:#F1E8DF; text-shadow:var(--shade); font-variant-numeric:tabular-nums lining-nums}
.flow__name{display:block; margin-top:5px; font-weight:600; font-size:clamp(20px,1.55vw,22.5px); line-height:1.25; letter-spacing:.005em; text-wrap:balance;
  color:rgba(244,238,232,.9); text-shadow:var(--shade)}.flow__desc{margin:10px 0 0; max-width:25ch; font-size:15px; line-height:1.62; color:rgba(244,238,232,.72);
  text-shadow:var(--shade); text-wrap:balance}
@media (min-width:1360px){ .flow__desc{font-size:15.5px} }
/* geniş ekran: yol ortada tek bir satır; bilgiler sırayla altında (1·3·5) ve üstünde (2·4).
   Bütün adımlar aynı üç satırı paylaşır (subgrid), böylece yol her adımda aynı yükseklikte kalır */
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .flow{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); grid-template-rows:auto 0 auto; column-gap:0;
      margin-top:clamp(56px,8.4vh,100px)}
    .flow__item{grid-row:1 / span 3; display:grid; grid-template-rows:subgrid}
    .flow__rail{grid-row:2}
    .flow__label{grid-row:3; align-self:start; width:112%}   /* komşu durağın bilgisi yolun öbür yanında: taşabilir */
    .flow__item:nth-child(even) .flow__label{grid-row:1; align-self:end; margin-top:0; margin-bottom:calc(clamp(20px,2.8vh,28px) + var(--ly, 0px))}
  }
}
/* dar ekran: adımlar yan yana, parmakla soldan sağa kaydırılan bir şerit; sonraki adımın bir kısmı
   görünür kalır. Yol şeridin üstünde, bilgiler altında; salınım daha küçük */
@media (max-width:900px){
  .flow{overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * var(--gut)); margin-right:calc(-1 * var(--gut)); padding:30px var(--gut) 8px; max-width:none;
    scroll-padding:0 var(--gut);
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent);
            mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 44px), transparent)}
  .flow::-webkit-scrollbar{display:none}
  .flow__item{flex:0 0 min(66vw, 280px); scroll-snap-align:start}
  .flow__item:nth-child(n){--nx:50%; --ly:0px}
  .flow__item:nth-child(1){--ny:-4px}
  .flow__item:nth-child(2){--ny:5px}
  .flow__item:nth-child(3){--ny:-3px}
  .flow__item:nth-child(4){--ny:6px}
  .flow__item:nth-child(5){--ny:-4px}
  .flow__item:first-child .flow__rail::before{left:0}
  .flow__item:last-child .flow__rail::before{right:0}
  .flow__label{margin:clamp(30px,4.4vh,40px) 0 0; width:auto; max-width:none; padding:0 12px; text-align:center}
  .flow__desc{max-width:24ch; margin-left:auto; margin-right:auto}
/* dar ekran rota parçaları */
  .flow__item:nth-child(1) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.54'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.35'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.09'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.06'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.12'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.1'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.16'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.04'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.03'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 0C33.33 -1.33 66.67 -4 100 -4C133.33 -4 166.67 -1.75 200 0.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 0C33.33 -1.33 66.67 -4 100 -4C133.33 -4 166.67 -1.75 200 0.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 0C33.33 -1.33 66.67 -4 100 -4C133.33 -4 166.67 -1.75 200 0.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(2) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.1'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.17'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.57'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.17'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 0.5C33.33 2.75 66.67 5 100 5C133.33 5 166.67 3 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 0.5C33.33 2.75 66.67 5 100 5C133.33 5 166.67 3 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 0.5C33.33 2.75 66.67 5 100 5C133.33 5 166.67 3 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(3) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.17'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.53'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.33'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.07'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.07'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.12'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.03'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.03'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.06'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1C33.33 -1 66.67 -3 100 -3C133.33 -3 166.67 -0.75 200 1.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 1C33.33 -1 66.67 -3 100 -3C133.33 -3 166.67 -0.75 200 1.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 1C33.33 -1 66.67 -3 100 -3C133.33 -3 166.67 -0.75 200 1.5' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(4) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.17'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.5'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.26'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.05'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.23'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.12'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.06'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1.5C33.33 3.75 66.67 6 100 6C133.33 6 166.67 3.5 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 1.5C33.33 3.75 66.67 6 100 6C133.33 6 166.67 3.5 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 1.5C33.33 3.75 66.67 6 100 6C133.33 6 166.67 3.5 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(5) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.17'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.28'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.41'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.2'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.03'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.19'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.09'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 1C33.33 -1.5 66.67 -4 100 -4C133.33 -4 166.67 -0.67 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 1C33.33 -1.5 66.67 -4 100 -4C133.33 -4 166.67 -0.67 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 1C33.33 -1.5 66.67 -4 100 -4C133.33 -4 166.67 -0.67 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
}@media (max-width:760px){ .sec--flow{--gut:20px} }
/* tablet (761–900): kaydırılan şerit korunur ama eşit kolonlu çizelge gibi durmaz — duraklar farklı
   yerlerde, bilgiler durağın hizasından sola yaslı, küçük dikey farklarla */
@media (min-width:761px) and (max-width:900px){
  .flow__item:nth-child(1){--nx:30%; --ly:4px} .flow__item:nth-child(2){--nx:26%; --ly:12px} .flow__item:nth-child(3){--nx:16%; --ly:15px}
  .flow__item:nth-child(4){--nx:24%; --ly:2px} .flow__item:nth-child(5){--nx:14%; --ly:8px}
  .flow__label{margin:calc(clamp(30px,4.4vh,40px) + var(--ly)) 0 0 calc(var(--nx) - 4px); padding:0 14px 0 0; text-align:left}
  .flow__desc{margin-left:0; margin-right:0}
  .flow__item:nth-child(1) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.57'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.52'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.39'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.19'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.04'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.03'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.14'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.31'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.24'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.18'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.08'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.06'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.14'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 0C20 -2.33 40 -7 60 -7C106.67 -7 153.33 1.51 200 6.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 0C20 -2.33 40 -7 60 -7C106.67 -7 153.33 1.51 200 6.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 0C20 -2.33 40 -7 60 -7C106.67 -7 153.33 1.51 200 6.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(2) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.31'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.48'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.35'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.23'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.14'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.21'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.33'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.14'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.16'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.1'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.06'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.09'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 6.11C17.33 7.83 34.67 9 52 9C101.33 9 150.67 -0.46 200 -3.83' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 6.11C17.33 7.83 34.67 9 52 9C101.33 9 150.67 -0.46 200 -3.83' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 6.11C17.33 7.83 34.67 9 52 9C101.33 9 150.67 -0.46 200 -3.83' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(3) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.48'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.35'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.21'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.09'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.04'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.16'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.34'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.16'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.1'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.04'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.07'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 -3.83C10.67 -4.56 21.33 -5 32 -5C88 -5 144 4.07 200 8.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 -3.83C10.67 -4.56 21.33 -5 32 -5C88 -5 144 4.07 200 8.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 -3.83C10.67 -4.56 21.33 -5 32 -5C88 -5 144 4.07 200 8.11' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(4) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.34'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.48'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.45'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.29'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.1'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.09'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0.29'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0.47'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.01'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0.04'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0.13'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 8.11C16 9.26 32 10 48 10C98.67 10 149.33 -1.41 200 -4.96' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 8.11C16 9.26 32 10 48 10C98.67 10 149.33 -1.41 200 -4.96' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 8.11C16 9.26 32 10 48 10C98.67 10 149.33 -1.41 200 -4.96' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
  .flow__item:nth-child(5) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -30 200 60' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0.47'/%3E%3Cstop offset='0.1' stop-color='%23F1E8DF' stop-opacity='0.56'/%3E%3Cstop offset='0.2' stop-color='%23F1E8DF' stop-opacity='0.55'/%3E%3Cstop offset='0.3' stop-color='%23F1E8DF' stop-opacity='0.46'/%3E%3Cstop offset='0.4' stop-color='%23F1E8DF' stop-opacity='0.33'/%3E%3Cstop offset='0.5' stop-color='%23F1E8DF' stop-opacity='0.21'/%3E%3Cstop offset='0.6' stop-color='%23F1E8DF' stop-opacity='0.11'/%3E%3Cstop offset='0.7' stop-color='%23F1E8DF' stop-opacity='0.04'/%3E%3Cstop offset='0.8' stop-color='%23F1E8DF' stop-opacity='0.01'/%3E%3Cstop offset='0.9' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='200' y2='0'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='0.22'/%3E%3Cstop offset='0.1' stop-color='%23E4D9EA' stop-opacity='0.26'/%3E%3Cstop offset='0.2' stop-color='%23E4D9EA' stop-opacity='0.25'/%3E%3Cstop offset='0.3' stop-color='%23E4D9EA' stop-opacity='0.21'/%3E%3Cstop offset='0.4' stop-color='%23E4D9EA' stop-opacity='0.15'/%3E%3Cstop offset='0.5' stop-color='%23E4D9EA' stop-opacity='0.09'/%3E%3Cstop offset='0.6' stop-color='%23E4D9EA' stop-opacity='0.05'/%3E%3Cstop offset='0.7' stop-color='%23E4D9EA' stop-opacity='0.02'/%3E%3Cstop offset='0.8' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='0.9' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cfilter id='m' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cfilter id='g' filterUnits='userSpaceOnUse' x='-20' y='-30' width='240' height='60'%3E%3CfeGaussianBlur stdDeviation='1.4'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M0 -4.96C9.33 -5.61 18.67 -6 28 -6C85.33 -6 142.67 -1.33 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-opacity='.34' stroke-width='14' filter='url(%23m)'/%3E%3Cpath d='M0 -4.96C9.33 -5.61 18.67 -6 28 -6C85.33 -6 142.67 -1.33 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23b)' stroke-width='3.4' filter='url(%23g)'/%3E%3Cpath d='M0 -4.96C9.33 -5.61 18.67 -6 28 -6C85.33 -6 142.67 -1.33 200 1' fill='none' stroke-linecap='round' vector-effect='non-scaling-stroke' stroke='url(%23a)' stroke-width='.8'/%3E%3C/svg%3E")}
}
/* ── dar ekran (≤760): nişan akışı dikey bir ışık yolculuğu ──
   Beş durak yatay sıkıştırılmaz; ışık rotası aşağı doğru ilerler. Her durakta rota bilginin yanından
   dikey iner, bilgi bittikten sonraki boşlukta yumuşak bir S ile öbür yana geçer; duraklar
   dönüşümlü solda ve sağda. Rota metnin üstünden hiç geçmez. Masaüstü düzen etkilenmez */
@media (max-width:760px){
  .flow{display:block; overflow:visible; scroll-snap-type:none; margin:clamp(44px,6.5vh,60px) 0 0; padding:34px 0 0; max-width:none;
    -webkit-mask-image:none; mask-image:none}
  .flow__item{--mx:42%; flex:none; width:auto; padding:0 0 48px; scroll-snap-align:none}
  .flow__item:nth-child(even){--mx:58%}
  .flow__item:last-child{padding-bottom:6px}
  .flow__rail{position:absolute; left:0; right:0; top:11px; height:100%; margin:0}
  /* rota: duraklar arasında tek, pürüzsüz bir sinüs dalgası — duraklarda yönü dikey, hiçbir yerde köşe ya da titreme yok.
     Bilgiler dalganın şiştiği yönün dışına yerleşir; dalga yazıların arasından geçer, üstünden asla */
  .flow__item:nth-child(n) .flow__rail::before{left:0; right:0; top:0; bottom:0; width:auto; height:auto; margin:0; box-shadow:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M42 0C42 36.4 58 63.6 58 100' fill='none' stroke='%23C8A0B8' stroke-opacity='.4' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M42 0C42 36.4 58 63.6 58 100' fill='none' stroke='%23F4EEE8' stroke-opacity='.78' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}
  .flow__item:nth-child(even) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M58 0C58 36.4 42 63.6 42 100' fill='none' stroke='%23C8A0B8' stroke-opacity='.4' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M58 0C58 36.4 42 63.6 42 100' fill='none' stroke='%23F4EEE8' stroke-opacity='.78' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .flow__rail::after{display:none}
  .flow__item:first-child .flow__rail::after{display:block; content:""; position:absolute; left:0; right:0; top:-40px; bottom:auto; height:40px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23F4EEE8' stop-opacity='0.78'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C8A0B8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C8A0B8' stop-opacity='0.39'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M42 0V100' fill='none' stroke='url(%23g)' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M42 0V100' fill='none' stroke='url(%23v)' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}
  .flow__item:last-child .flow__rail::before{bottom:auto; height:70px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='0.78'/%3E%3Cstop offset='1' stop-color='%23F4EEE8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C8A0B8' stop-opacity='0.39'/%3E%3Cstop offset='1' stop-color='%23C8A0B8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M42 0V100' fill='none' stroke='url(%23g)' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M42 0V100' fill='none' stroke='url(%23v)' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  /* sis içindeki ışık: rota çizgisine yumuşak sedef ışıma, duraklarda belirgin hâle */
  .flow__item:nth-child(n) .flow__rail::before,.flow__item:nth-child(n) .flow__rail::after{filter:drop-shadow(0 0 2px rgba(244,238,232,.7)) drop-shadow(0 0 7px rgba(200,160,184,.5)) drop-shadow(0 0 16px rgba(200,160,184,.2))}
  .flow__dot{width:9px; height:9px; margin:-4.5px 0 0 -4.5px; opacity:.9; box-shadow:0 0 12px 4px rgba(244,238,232,.3), 0 0 28px 9px rgba(200,160,184,.22)}
  .flow__item.is-lit .flow__dot{box-shadow:0 0 14px 5px rgba(244,238,232,.4), 0 0 36px 12px rgba(200,160,184,.26)}
  /* duraklarda küçük toz pembe yıldız parıltısı (ışınlar yazıya ulaşmaz) */
  .flow__dot::before{content:""; position:absolute; left:50%; top:50%; width:20px; height:20px; margin:-10px 0 0 -10px; pointer-events:none; filter:drop-shadow(0 0 3px rgba(200,160,184,.55));
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='s' cx='.5' cy='.5' r='.5'%3E%3Cstop offset='0' stop-color='%23F4EEE8'/%3E%3Cstop offset='.35' stop-color='%23EBC9D8' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23D9A9BF' stop-opacity='.2'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 0L11.4 8.6L20 10L11.4 11.4L10 20L8.6 11.4L0 10L8.6 8.6Z' fill='url(%23s)'/%3E%3Ccircle cx='10' cy='10' r='2' fill='%23F4EEE8'/%3E%3C/svg%3E") center / 100% 100% no-repeat; animation:dotStar 3.4s ease-in-out infinite alternate}
  .flow__item:nth-child(2) .flow__dot::before{animation-delay:-1.2s} .flow__item:nth-child(3) .flow__dot::before{animation-delay:-2.3s}
  .flow__item:nth-child(4) .flow__dot::before{animation-delay:-.6s} .flow__item:nth-child(5) .flow__dot::before{animation-delay:-1.8s}
  .flow__dot{left:var(--mx); top:0}
  .flow__label{margin:0 calc(100% - var(--mx) + 16px) 0 0; padding:0; max-width:none; text-align:right}
  .flow__item:nth-child(even) .flow__label{margin:0 0 0 calc(var(--mx) + 16px); text-align:left}
  .flow__time{font-size:20px}
  .flow__name{margin-top:4px; font-size:19px}
  .flow__desc{margin:6px 0 0; max-width:none; font-size:14.5px; line-height:1.55}
  /* hava: sıcaklık ve durum bir satırda, ek bilgi altında */
  .weather__meta span{display:block; margin:1px 0 0}
}

@media (max-width:480px){
  .flow__item{--mx:9%}
  .flow__item:nth-child(even){--mx:19%}
  .flow__item:nth-child(n) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M9 0C9 36.4 19 63.6 19 100' fill='none' stroke='%23C8A0B8' stroke-opacity='.4' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 0C9 36.4 19 63.6 19 100' fill='none' stroke='%23F4EEE8' stroke-opacity='.78' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .flow__item:nth-child(even) .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M19 0C19 36.4 9 63.6 9 100' fill='none' stroke='%23C8A0B8' stroke-opacity='.4' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M19 0C19 36.4 9 63.6 9 100' fill='none' stroke='%23F4EEE8' stroke-opacity='.78' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .flow__item:first-child .flow__rail::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23F4EEE8' stop-opacity='0.78'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C8A0B8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C8A0B8' stop-opacity='0.39'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9 0V100' fill='none' stroke='url(%23g)' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 0V100' fill='none' stroke='url(%23v)' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .flow__item:last-child .flow__rail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='0.78'/%3E%3Cstop offset='1' stop-color='%23F4EEE8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23C8A0B8' stop-opacity='0.39'/%3E%3Cstop offset='1' stop-color='%23C8A0B8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M9 0V100' fill='none' stroke='url(%23g)' stroke-width='3.6' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M9 0V100' fill='none' stroke='url(%23v)' stroke-width='.9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E")}
  .flow__label,.flow__item:nth-child(even) .flow__label{margin:0 0 0 calc(19% + 18px); text-align:left}
}/* ── 6. kapanış: sinematik bir kapanış karesi ──
   Sakin iki kıta (sol-orta) → biraz içeriden başlayan, biraz daha belirgin final cümlesi → hemen
   altında, hafifçe sağa taşan küçük bir imza. İkisini tek bir kapanışa bağlayan, final cümlesinin
   altından imzaya inen çok küçük bir sedef ışık izi. Dekor orman ve ışıklar; alt bölge biriken
   ışıklar için boş */
.sec--end{--kin:clamp(22px,3.4vw,58px); padding-bottom:clamp(140px,22vh,240px)}
.sec--end .sec__inner{text-align:left}
.sec--end .lead{max-width:none; margin:0; font-size:clamp(18px,1.45vw,21px); line-height:1.72; color:rgba(244,238,232,.86); text-wrap:initial}
.sec--end .lead .line{margin-bottom:1.05em; text-wrap:initial}
.sec--end .lead .line--key{width:fit-content; margin:clamp(30px,4.6vh,46px) 0 0 var(--kin);
  font-family:"Cormorant Upright",Georgia,serif; font-weight:600; font-size:1.36em; line-height:1.3; letter-spacing:.008em; color:var(--ink)}
.sec--end .names{margin-top:clamp(12px,1.8vh,18px)}
.names--end{position:relative; font-style:normal; font-size:clamp(18px,1.55vw,23px); letter-spacing:.03em; color:rgba(241,232,223,.86);
  padding-left:calc(var(--kin) + 7.4em); white-space:nowrap}
.names--end span{font-size:.78em}
.names--end::before{content:""; position:absolute; left:calc(var(--kin) + 4.5em); top:-.95em; width:2.8em; height:1.5em; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 60'%3E%3Cdefs%3E%3ClinearGradient id='t' gradientUnits='userSpaceOnUse' x1='4' y1='4' x2='104' y2='50'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%23F1E8DF' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='b' x='-30%25' y='-60%25' width='160%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='s' x='-30%25' y='-60%25' width='160%25' height='220%25'%3E%3CfeGaussianBlur stdDeviation='.7'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M4 4C30 8 62 26 104 50' fill='none' stroke='url(%23t)' stroke-width='5' stroke-linecap='round' opacity='.3' filter='url(%23b)'/%3E%3Cpath d='M4 4C30 8 62 26 104 50' fill='none' stroke='url(%23t)' stroke-width='.8' stroke-linecap='round' stroke-dasharray='14 8 22 10 40' opacity='.5' filter='url(%23s)'/%3E%3Ccircle cx='40' cy='12' r='4.5' fill='url(%23h)'/%3E%3Ccircle cx='40' cy='12' r='1' fill='%23F4EEE8' fill-opacity='.8'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat}

@media (min-width:900px){
  /* içerik grupları biraz daha geniş ve merkeze yakın (tarih bölümüyle aynı dil) */
  .sec--where,.sec--rsvp{padding-right:clamp(56px,11vw,200px)}
  .sec--where .sec__inner,.sec--rsvp .sec__inner{max-width:580px}
  .sec--end{padding-left:clamp(56px,12vw,220px)}
  .sec--end .sec__inner{max-width:600px}
}
@media (min-width:900px){
  .sec--where{padding-right:min(200px, 11vw, max(clamp(28px,4vw,48px), calc(4vw + (100vw - 1180px) * .8)))}
}
/* dar ekran: gizli yol sadeleşir — yalnızca kısa bir yol parçası, ışık ve "Baben" (hava satırına değmez) */
@media (max-width:899px){
  .route::before{left:calc(100% + 6px); width:96px; height:40px; margin-top:-14px; padding:0 0 0 20px; font-size:11px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 40'%3E%3Cdefs%3E%3ClinearGradient id='r' gradientUnits='userSpaceOnUse' x1='10' y1='14' x2='96' y2='34'%3E%3Cstop offset='0' stop-color='%23E4D9EA' stop-opacity='.34'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='0' stop-color='%23F4EEE8' stop-opacity='.55'/%3E%3Cstop offset='1' stop-color='%23E4D9EA' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M10 14C18 14.3 24 14.3 30 13.9' fill='none' stroke='%23E4D9EA' stroke-opacity='.38' stroke-width='.9' stroke-linecap='round' stroke-dasharray='1 3.6'/%3E%3Cpath d='M30 13.9C44 13 54 13 64 16C76 20 86 27 96 36' fill='none' stroke='url(%23r)' stroke-width='.85' stroke-linecap='round'/%3E%3Cpath d='M52 13.2C58 9 64 6 72 4' fill='none' stroke='%23E4D9EA' stroke-opacity='.14' stroke-width='.7' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14' r='9' fill='url(%23h)'/%3E%3Ccircle cx='10' cy='14' r='1.8' fill='%23F4EEE8' fill-opacity='.9'/%3E%3C/svg%3E")}
}/* dar ekran: ortalı düzende yol tarifi çizgisi ortadan iki yana söner */
@media (max-width:899px){
  .route::after{left:50%; width:44px; margin-left:-22px;
    background:linear-gradient(90deg, rgba(var(--plumsoft),0), rgba(var(--plumsoft),.85) 50%, rgba(var(--plumsoft),0))}
  .route:hover::after,.route:focus-visible::after{width:100%; margin-left:0; left:0}
}

/* ════════════ MOBİL ════════════ */
@media (max-width:899px){
  /* dikey ekranda görselin hangi kısmı görünsün */
  .sec--hello .sec__bg{background-position:44% 60%}
  .sec--when  .sec__bg{background-position:70% 50%}
  .sec--where .sec__bg{background-position:24% 50%}
  .sec--rsvp  .sec__bg{background-position:58% 55%}
  .sec--end   .sec__bg{background-position:70% 50%}
  .sec--flow  .sec__bg{background-position:56% 90%}
  /* dev 17: dar ekranda ortada, ekrana sığan ölçüde (kesilmeden tanınır) */
  .sec--when .sec__bg::after{left:50%; top:46%; transform:translate(-50%,-50%); font-size:min(112vw, 70vh)}
  .names--hero{white-space:normal; text-wrap:balance}
  /* mobilde daha hafif blur */
  .sec__bg{filter:blur(2.5px) brightness(var(--bright, .72)) saturate(.86)}
  /* katılım bitişi: dar ekranda ortalı */
  .rsvp__final{align-items:center}
  .rsvp__done{text-align:center}
}
@media (max-width:899px) and (orientation:landscape){
  .sec--when .sec__bg::after{left:66%; font-size:92vh}
}
@media (max-width:760px){
  .sec{padding:clamp(72px,11vh,110px) 20px}
  .names--hero{font-size:clamp(42px,11.4vw,62px)}
  .count{gap:clamp(14px,4vw,22px); flex-wrap:wrap; max-width:320px}
  .count__unit{flex:0 0 calc(50% - 11px); margin-bottom:22px}
  .count__unit:nth-child(3)::before{display:none}
  .count__unit + .count__unit::before{left:-11px}
  .sec--hello .anchor--rest{right:2%; top:78%}
  .sec--when  .anchor--rest{right:3%; top:70%}
  .sec--rsvp  .anchor--rest{right:0; top:38%}
  .letter__sheet{padding:26px 20px 24px}
  /* kapanış: dizeler telefonda da verilen satır düzeninde kalsın */
  .sec--end .lead{font-size:16.5px}
  .sec--end{--kin:14px}
  .sec--end .lead .line--key{font-size:1.3em}
  .field__input{font-size:17px}
  /* karşılama: açıklama ortalı */
  .sec--hello{padding-left:16px; padding-right:16px}   /* açıklama telefonda 3 dengeli satıra sığsın */
}
@media (max-width:380px){
  .sec--end .lead{font-size:15px}
  .sec--end{--kin:8px}
  .sec--end .lead .line--key{font-size:1.22em}
  .names--end{font-size:16px}
}
@media (max-width:340px){
  .sec--end{padding-left:16px; padding-right:16px}
  .sec--end .lead{font-size:14.5px}
}
@media (max-width:400px){
  .names--hero{font-size:clamp(34px,10.4vw,40px)}
  .date{font-size:42px}
  .count__num{font-size:42px}
  .choice{gap:14px}
  .choice label{font-size:17px}
  .btn{padding:10px 2px 6px}
}

/* ════════════ AZALTILMIŞ HAREKET ════════════ */
@media (prefers-reduced-motion:reduce){
  /* derinlik kapalı; kaydırmada yazılar yalnızca opaklıkla geçer (main.js: toz, gren, sedef ve kayma yok) */
  .sec{--scroll-progress:.5 !important}
  .sec__bg{transform:scale(1.035) !important}
  .sec::after{transform:none !important}
  .sec::before{opacity:0 !important}
  .sec--flow .sec__bg{transform:scale(-1.035, 1.035) !important}
  .flow__dot{transition:opacity .7s ease}
  .mainstage{filter:none; transition:opacity .9s ease, visibility 0s linear .9s}
  .letter.is-sending .note,.letter.is-sending .envelope,.letter.is-sending .note__half--bottom,.letter.is-sending .envelope__flap{animation:none}
  .letter.is-sending .note,.letter.is-sending .envelope:not(.envelope--final){display:none}
}

/* ════════════ MÜZİK DÜĞMESİ ve AŞAĞI DEVAM GÖSTERGESİ (music.js) ════════════ */
/* müzik: sağ altta dört ince sedef çizgi — ormandaki küçük ışıkların titreşimi gibi, medya oynatıcı değil.
   Açıkken çok yavaş kıpırdar; kapalıyken durur ve daha soluktur. Dokunma alanı 44 px; safe-area dikkate alınır */
.music{position:fixed; right:calc(12px + env(safe-area-inset-right, 0px)); bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:90;
  display:flex; align-items:center; justify-content:center; gap:3px; width:44px; height:44px; padding:0; margin:0;
  border:0; border-radius:50%; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
/* telefonda da fark edilsin: çizgilerin arkasında gece renginde, buzlu ince halkalı küçük bir daire */
.music::before{content:""; position:absolute; inset:2px; z-index:-1; border-radius:50%;
  background:rgba(11,18,38,.5); border:1px solid rgba(241,232,223,.3); box-shadow:0 0 12px rgba(200,160,184,.18);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:border-color .8s ease, box-shadow .8s ease}
.music.is-on::before{border-color:rgba(241,232,223,.4); box-shadow:0 0 14px rgba(200,160,184,.28)}
.music i{display:block; width:2px; height:16px; border-radius:1px; background:rgba(241,232,223,.66);
  transform:scaleY(.3); transition:transform .8s ease, background-color .8s ease, box-shadow .8s ease}
.music.is-on i{background:rgba(244,238,232,.94); box-shadow:0 0 6px rgba(241,232,223,.4); animation:musicLight 2.8s ease-in-out infinite alternate}
/* ses dokunuş bekliyorsa: toz pembe ışık halkası nefes alır; yanında kısa bir davet */
.music.is-waiting::before{animation:musicCall 2.6s ease-out infinite}
@keyframes musicCall{0%{box-shadow:0 0 0 0 rgba(200,160,184,.55), 0 0 12px rgba(200,160,184,.2)}
  70%{box-shadow:0 0 0 12px rgba(200,160,184,0), 0 0 12px rgba(200,160,184,.2)} 100%{box-shadow:0 0 0 0 rgba(200,160,184,0), 0 0 12px rgba(200,160,184,.2)}}
.music__hint{position:absolute; right:calc(100% + 2px); top:50%; transform:translate(6px,-50%); white-space:nowrap;
  padding:8px 13px; border-radius:999px; background:rgba(11,18,38,.52); border:1px solid rgba(241,232,223,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:"Caudex",Georgia,serif; font-size:13px; line-height:1; letter-spacing:.04em; color:rgba(244,238,232,.94);
  opacity:0; pointer-events:none; transition:opacity .5s ease, transform .5s ease}
.music.is-waiting:not(.is-compact) .music__hint{opacity:1; transform:translate(0,-50%); pointer-events:auto; transition-duration:.9s; transition-delay:1.2s}
/* açılış sahnesinde davet zarfın kendisinde ("Zarfı açmak için dokunun"); müzik de o dokunuşla başlar */
html:not(.is-site) .music__hint{display:none}
html:not(.is-site) .music.is-waiting::before{animation:none}
/* dar ekranda yazı düğmenin üstünde durur; alttaki "aşağı devam" ışıklarıyla çakışmaz */
@media (max-width:600px){
  .music__hint{right:2px; top:auto; bottom:calc(100% + 4px); transform:translateY(6px)}
  .music.is-waiting:not(.is-compact) .music__hint{transform:translateY(0)}
}
.music.is-on i:nth-child(2){animation-duration:3.4s; animation-delay:-1.1s}
.music.is-on i:nth-child(3){animation-duration:2.4s; animation-delay:-.5s}
.music.is-on i:nth-child(4){animation-duration:3.9s; animation-delay:-2s}
@keyframes musicLight{0%{transform:scaleY(.3)} 45%{transform:scaleY(.78)} 100%{transform:scaleY(.46)}}
.music:focus-visible{outline:1px solid rgba(222,206,226,.6); outline-offset:1px}
@media (hover:hover) and (min-width:900px){
  .music::after{content:attr(data-tip); position:absolute; right:100%; top:50%; margin-right:4px; transform:translateY(-50%);
    white-space:nowrap; font-family:"Caudex",Georgia,serif; font-size:12px; letter-spacing:.08em; color:rgba(241,232,223,.78);
    opacity:0; pointer-events:none; transition:opacity .35s ease}
  .music:hover::after,.music:focus-visible::after{opacity:1}
  .music.is-waiting:not(.is-compact)::after{display:none}
}
/* aşağı devam: bölümün alt ortasında iki küçük sedef ışık sırayla ~11 px aşağı süzülüp söner; altında çok ince,
   yumuşak bir kıvrım. Zıplama ya da ok yok. İlk sahnede biraz daha belirgin; son sahnede hiç yok.
   Bölüm ekrandan çıkarken kendisi de söner */
.next{position:absolute; left:50%; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); z-index:3; width:44px; height:44px; margin:0 0 0 -22px; padding:0;
  border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent;
  opacity:calc(var(--next-o, .8) * (1 - var(--out, 0) * 2))}
.sec--hello .next{--next-o:1}
.next i{position:absolute; left:50%; top:6px; width:6px; height:6px; margin-left:-3px; border-radius:50%; opacity:.5;
  background:radial-gradient(circle, #F4EEE8 0 38%, rgba(241,232,223,.55) 62%, rgba(241,232,223,0) 100%);
  box-shadow:0 0 8px 2px rgba(241,232,223,.3), 0 0 16px 4px rgba(200,160,184,.22); animation:nextLight 2.7s ease-in-out infinite}
.next i:nth-child(2){width:4.5px; height:4.5px; margin-left:-2.25px; animation-delay:.5s}
.next b{position:absolute; left:50%; top:27px; width:16px; height:8px; margin-left:-8px; opacity:.75;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 6'%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3Cstop offset='.5' stop-color='%23F1E8DF'/%3E%3Cstop offset='1' stop-color='%23F1E8DF' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cpath d='M1 1C3.2 3.4 4.7 4.8 6 4.8S8.8 3.4 11 1' fill='none' stroke='url(%23g)' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat}
@keyframes nextLight{0%{opacity:0; transform:translateY(0)} 25%{opacity:1} 70%{opacity:.6} 100%{opacity:0; transform:translateY(12px)}}
.next:focus-visible{outline:1px solid rgba(222,206,226,.6); outline-offset:-4px; border-radius:50%}
@media (prefers-reduced-motion:reduce){
  .music.is-on i{animation:none; transform:scaleY(.6)}
  .music.is-waiting::before{animation:none; box-shadow:0 0 0 3px rgba(200,160,184,.3), 0 0 12px rgba(200,160,184,.2)}
  .next i{animation:none; opacity:.9}
  .next i:nth-child(2){transform:translateY(7px); opacity:.45}
}
@keyframes dotStar{from{opacity:.6; transform:scale(.82) rotate(0deg)} to{opacity:1; transform:scale(1.04) rotate(10deg)}}
@media (prefers-reduced-motion:reduce){ .flow__dot::before{animation:none; opacity:.9} }