/* Kaydırmayla açılıp solan zambaklar. Ana sayfada yüklenir; ayrı deneme hâlleri ../sitem/tasarim-yonleri/ altında. */
.cicek-sahne { position: relative; height: 420vh; background: #07060a; }
.cicek-sahne[data-tur="kagit"] { background: var(--bg); }
.cicek-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.cicek-pin canvas { display: block; width: 100%; height: 100%; }
/* Hareket azaltmada kaydırma sahnesi yok: tek ekran, üç açık çiçek. */
@media (prefers-reduced-motion: reduce) {
  .cicek-sahne { height: auto; }
  .cicek-pin { position: relative; }
}

/* Ana sayfa zaman çizgisi: kâğıttan gün batımı üzerinden geceye inilir, saplar duraklardan çıkar.
   Temel hâl telefon ve hareket azaltma: çiçek yazının üstünde akışta durur, sabitlenen bir şey yok. */
.path--cicek { padding: 0; background: #100a0d; color: var(--bg); }
.path__gecis { height: 34vh; background: linear-gradient(var(--bg), #e8c4a8 22%, #a8452c 50%, #3d1216 76%, #100a0d); }
.path--cicek .cicek-sahne { height: auto; background: #100a0d; }
.path--cicek .cicek-pin { position: relative; height: auto; overflow: visible; }
.path--cicek canvas { height: 58vh; height: 58svh; }
.path__alt { position: relative; z-index: 1; padding: 10px var(--pad) clamp(40px, 5vw, 64px); }
.path--cicek .path__line { margin-top: 0; }
.path--cicek .path__line::before { background: #3a2a2c; }
.path--cicek .step::before { background: #100a0d; }
.path--cicek .step .y, .path--cicek .step p { color: #b5aea6; }
.path--cicek .path__more { margin-top: clamp(22px, 3vw, 36px); border-color: var(--bg); }
/* Aydınlık kipte çiçekler kâğıtta mürekkep (cicek.js); gün batımı geçişi çiçeklerden sonraya, koyu kapanışın önüne iner.
   Karanlık kipte her şey yukarıdaki gibi: kâğıttan gün batımıyla geceye. */
html:not(.karanlik) .path--cicek { background: var(--bg); color: var(--ink); }
html:not(.karanlik) .path--cicek .cicek-sahne { background: var(--bg); }
html:not(.karanlik) .path__gecis { display: none; }
html:not(.karanlik) .path--cicek::after { content: ""; display: block; height: 34vh; background: linear-gradient(var(--bg), #e8c4a8 22%, #a8452c 50%, #3d1216 76%, #100a0d); }
html:not(.karanlik) .path--cicek .path__line::before { background: var(--line); }
html:not(.karanlik) .path--cicek .step::before { background: var(--bg); }
html:not(.karanlik) .path--cicek .step .y, html:not(.karanlik) .path--cicek .step p { color: var(--ink-2); }
html:not(.karanlik) .path--cicek .path__more { border-color: var(--ink); }
.path__sinyal { display: none; }
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  /* Sabit kalış sinyalin yolu kadar: son çiçek açınca sinyal çizginin ucuna varır, bölüm biter, kapanış gelir
     (Meyrem: "son çiçek açtıktan sonra bekliyor"). */
  .path--cicek .cicek-sahne { height: 180vh; }
  .path--cicek .cicek-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
  .path--cicek canvas { position: absolute; inset: 0; height: 100%; }

  /* Sinir ağı gibi iletim (cicek.js --sinyal, .ates): çizgi soldan sağa dolar, önünde ışıklı bir paket gider.
     Paket bir durağa varınca düğüm ateşlenir, yazısı aydınlanır; çiçeği olan durakta sinyal sapa tırmanır ve çiçek açar.
     Geri kaydırınca hepsi geri sarılır. */
  .path--cicek .path__line::after { transform: scaleX(var(--sinyal, 0)); transition: none; }
  .path--cicek .path__line .step, .path--cicek .path__line.on .step { opacity: .34; transform: none; transition: opacity .5s; transition-delay: 0s; }
  .path--cicek .path__line .step.ates { opacity: 1; }
  .path--cicek .step::before { transition: background-color .3s, box-shadow .5s; }
  html .path--cicek .path__line .step.ates::before { background: var(--hot); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hot) 22%, transparent), 0 0 18px 2px color-mix(in srgb, var(--hot) 70%, transparent); }
  .path--cicek .step::after { content: ""; position: absolute; left: -6px; top: -6px; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--hot); opacity: 0; pointer-events: none; }
  .path--cicek .step.ates::after { animation: ates .9s var(--ease); }
  .path__sinyal {
    display: block; position: absolute; z-index: 1; top: 8px; left: calc(var(--sinyal, 0) * 100%); width: 110px; height: 14px; margin: -7px 0 0 -104px;
    opacity: var(--sinyal-a, 0); pointer-events: none; border-radius: 99px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hot) 55%, transparent) 70%, #ffe2c8 94%, transparent);
    filter: drop-shadow(0 0 6px var(--hot));
  }
  html:not(.karanlik) .path__sinyal { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--hot) 45%, transparent) 70%, var(--hot) 94%, transparent); }
}
@keyframes ates { from { opacity: .9; transform: scale(.5); } to { opacity: 0; transform: scale(2.4); } }