/* Hareket: konsept demolar ve canlandırılmış örnek figürler. Kurallar: design.md · Hareket.
 *
 * Mekanizma: public/js/demos.js hareket serbestse [data-demo] öğesine .is-armed ekler; animasyonlar ilk
 * karede duraklatılmış bekler. Öğe ekrana girince .is-playing gelir ve bir kez oynar. JS yoksa ya da
 * "hareketi azalt" açıksa hiçbir animasyon kurulmaz: statik stil zaten son karedir.
 * Yalnız transform ve opacity; sonsuz döngü, sekme, aşma yok. Satır içi stil yok (CSP), gecikmeler
 * nth-child ile verilen --i sırasından hesaplanır.
 */

@keyframes demo-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes demo-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes demo-grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes demo-grow-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes demo-fade {
  from {
    opacity: 0;
  }
}

/* Sıra numarası: kademeli gecikmeler için (calc(var(--i) * var(--demo-step))) */
[data-demo] li:nth-child(2) { --i: 1; }
[data-demo] li:nth-child(3) { --i: 2; }
[data-demo] li:nth-child(4) { --i: 3; }
[data-demo] li:nth-child(5) { --i: 4; }
[data-demo] li:nth-child(6) { --i: 5; }
[data-demo] li:nth-child(7) { --i: 6; }
[data-demo] li:nth-child(8) { --i: 7; }
[data-demo] li:nth-child(9) { --i: 8; }
[data-demo] li:nth-child(10) { --i: 9; }
[data-demo] li:nth-child(11) { --i: 10; }
[data-demo] li:nth-child(12) { --i: 11; }

/* Kurulu demo: ortak süre ve eğri */
[data-demo].is-armed .funnel > li,
[data-demo].is-armed .chip-row > .chip,
[data-demo].is-armed .weeks > li,
[data-demo].is-armed .bars > li,
[data-demo].is-armed .slider__track::before,
[data-demo].is-armed .slider__track::after,
[data-demo].is-armed .calendar > li::after,
[data-demo].is-armed .flow > li,
[data-demo].is-armed .flow__node::after {
  animation-duration: var(--dur-demo);
  animation-timing-function: var(--ease-settle);
  animation-fill-mode: both;
}

/* Kurulu ama henüz oynamayan demo: tüm animasyonlar ilk karede bekler */
[data-demo].is-armed:not(.is-playing) *,
[data-demo].is-armed:not(.is-playing) *::before,
[data-demo].is-armed:not(.is-playing) *::after {
  animation-play-state: paused !important;
}

/* --- Ana sayfa ve hizmetler: ölçüm hunisi (başlık sabit, satırlar sırayla gelir) -------------- */
[data-demo].is-armed .funnel > li {
  animation-name: demo-rise;
  animation-delay: calc(var(--i, 0) * var(--demo-step) + 200ms);
}

/* Bant: önce değersiz metrikler, sonra raporladıklarımız */
[data-demo].is-armed.ledger .chip-row > .chip {
  animation-name: demo-rise;
  animation-delay: calc(var(--i, 0) * 90ms);
}

[data-demo].is-armed.ledger .ledger__panel--accent .chip-row > .chip {
  animation-delay: calc(var(--i, 0) * 110ms + 700ms);
}

/* İlk beş hafta */
[data-demo].is-armed .weeks > li {
  animation-name: demo-rise;
  animation-delay: calc(var(--i, 0) * var(--demo-step));
}

/* Örnek çıktılar: rapor barları, ses kartı, içerik planı */
[data-demo].is-armed .bars > li {
  transform-origin: bottom;
  animation-name: demo-grow-y;
  animation-delay: calc(var(--i, 0) * 70ms + 100ms);
}

.slider__track::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--color-accent-soft);
  transform-origin: left;
}

.slider:nth-child(1) .slider__track::before { width: 68%; }
.slider:nth-child(2) .slider__track::before { width: 82%; }
.slider:nth-child(3) .slider__track::before { width: 55%; }

[data-demo].is-armed .slider__track::before {
  animation-name: demo-grow-x;
  animation-delay: calc(var(--i, 0) * 160ms + 300ms);
}

[data-demo].is-armed .slider__track::after {
  animation-name: demo-pop;
  animation-delay: calc(var(--i, 0) * 160ms + 640ms);
}

[data-demo] .calendar > li:nth-child(5n + 2) { --c: 1; }
[data-demo] .calendar > li:nth-child(5n + 3) { --c: 2; }
[data-demo] .calendar > li:nth-child(5n + 4) { --c: 3; }
[data-demo] .calendar > li:nth-child(5n) { --c: 4; }

[data-demo].is-armed .calendar > li::after {
  animation-name: demo-pop;
  animation-delay: calc(var(--c, 0) * 120ms + 500ms);
}

/* Yönetici markası: haftalık akış, adım adım */
[data-demo].is-armed .flow > li {
  animation-name: demo-rise;
  animation-delay: calc(var(--i, 0) * 260ms);
}

[data-demo].is-armed .flow__node::after {
  transform-origin: left;
  animation-name: demo-grow-x;
  animation-delay: calc(var(--i, 0) * 260ms + 220ms);
}

/* --- Demo çerçevesi ----------------------------------------------------------------------- */
.demo {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.demo__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  min-height: 28px;
}

.demo__tag {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-ink);
}

.demo__replay {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-2);
  background: transparent;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}

.demo__replay:hover {
  border-color: var(--color-rule-strong);
  color: var(--color-ink);
}

.demo__replay:active {
  transform: translateY(1px);
}

.demo__replay:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.demo__replay[hidden] {
  display: none;
}

.demo__stage {
  position: relative;
  min-width: 0;
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--radius-lg);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-paper-2);
  overflow: hidden;
}

.demo__caption {
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--color-ink-3);
  max-width: var(--measure);
}

/* --- Growth Engine: üç iş tek tabloda ------------------------------------------------------ */
.gather {
  display: grid;
  gap: var(--space-sm);
  max-width: 36rem;
  margin-inline: auto;
}

.gather__h {
  display: grid;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: var(--tracking-heading);
}

.gather__h > span {
  grid-area: 1 / 1;
}

.gather__h-before {
  opacity: 0;
}

.gather__panel {
  position: relative;
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-card);
}

.gather__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: var(--rule-hair) solid var(--color-rule);
  pointer-events: none;
}

.gather__rows {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}

.gather__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
}

.gather__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.gather__dot {
  flex: 0 0 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}

.gather__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: var(--rule-hair) solid var(--color-rule-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-ink-2);
}

/* İmleç: tam sahne boyunda bir katman; % ötelemesi sahneye göre hesaplanır */
.cursor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  color: var(--color-ink);
}

.cursor svg {
  display: block;
  fill: currentColor;
  stroke: var(--color-card);
  stroke-width: 1.2;
}

/* Sahne: satırlar dağınık başlar, imleç üzerlerinden geçer, tabloya yerleşirler, başlık değişir */
.gather__row:nth-child(1) { --fx: -10%; --fy: -30%; --fr: -3deg; }
.gather__row:nth-child(2) { --fx: 8%; --fy: 20%; --fr: 2deg; }
.gather__row:nth-child(3) { --fx: -4%; --fy: 70%; --fr: -1.5deg; }

@keyframes gather-in {
  from {
    transform: translate(var(--fx), var(--fy)) rotate(var(--fr));
  }
}

@keyframes gather-cursor {
  0% {
    opacity: 0;
    transform: translate(70%, 20%);
  }
  12% {
    opacity: 1;
  }
  40% {
    transform: translate(28%, 42%);
  }
  70% {
    opacity: 1;
    transform: translate(52%, 58%);
  }
  100% {
    opacity: 0;
    transform: translate(52%, 58%);
  }
}

@keyframes demo-swap-out {
  0%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

[data-demo].is-armed .gather__row {
  animation: gather-in 700ms var(--ease-settle) calc(var(--i, 0) * 120ms + 1300ms) both;
}

[data-demo].is-armed .gather__panel::before,
[data-demo].is-armed .gather__foot {
  animation: demo-fade var(--dur-long) var(--ease-out) 2200ms both;
}

[data-demo].is-armed .gather__h-before {
  animation: demo-swap-out 2500ms linear both;
}

[data-demo].is-armed .gather__h-after {
  animation: demo-fade var(--dur-long) var(--ease-out) 2450ms both;
}

[data-demo].is-armed .cursor {
  animation: gather-cursor 1900ms var(--ease-in-out) 300ms both;
}

/* --- B2B creator kampanyası: kısa liste --------------------------------------------------- */
.shortlist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-2xs);
}

.shortlist__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
  padding: 12px;
  border-radius: var(--radius-md);
  border: var(--rule-hair) solid var(--color-rule);
  background: var(--color-card);
}

.shortlist__card.is-pick {
  border-color: var(--color-accent-rule);
  box-shadow: inset 0 0 0 1px var(--color-accent-rule);
}

.shortlist__card.is-out {
  border-style: dashed;
}

.shortlist__card.is-out .shortlist__name,
.shortlist__card.is-out .shortlist__marks {
  color: var(--color-ink-3);
}

.shortlist__name {
  font-weight: 600;
  font-size: var(--text-sm);
}

.shortlist__marks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
  font-size: var(--text-2xs);
  color: var(--color-ink-2);
}

.shortlist__marks li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.shortlist__mark {
  flex: 0 0 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-accent);
}

.is-no .shortlist__mark {
  background: transparent;
  border: var(--rule-hair) dashed var(--color-ink-3);
}

.shortlist__status {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.02em;
  color: var(--color-ink-3);
}

.is-pick .shortlist__status {
  color: var(--color-accent-ink);
  font-weight: 600;
}

/* Kartlar sırayla değerlendirilir, ölçütler işaretlenir, sonunda eleme */
.shortlist__marks li:nth-child(2) { --m: 1; }
.shortlist__marks li:nth-child(3) { --m: 2; }

[data-demo].is-armed .shortlist__card {
  animation: demo-rise var(--dur-demo) var(--ease-settle) calc(var(--i, 0) * 90ms) both;
}

[data-demo].is-armed .shortlist__mark {
  animation: demo-pop 360ms var(--ease-settle) calc(var(--m, 0) * 260ms + 600ms) both;
}

[data-demo].is-armed .shortlist__status {
  animation: demo-fade var(--dur-long) var(--ease-out) 2000ms both;
}

/* --- Çalışan creator programı: 12 hafta ---------------------------------------------------- */
.cohort {
  display: grid;
  gap: var(--space-sm);
}

.cohort__weeks,
.cohort__phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}

.cohort__weeks li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.cohort__dot {
  width: 100%;
  max-width: 34px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-accent);
}

.cohort__weeks li:nth-child(n + 5) .cohort__dot {
  background: var(--color-ink);
}

.cohort__weeks li:nth-child(n + 9) .cohort__dot {
  background: var(--color-accent-light);
}

.cohort__n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
}

.cohort__phases li {
  grid-column: span 4;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-2xs);
  border-top: 2px solid var(--color-accent);
}

.cohort__phases li:nth-child(2) {
  border-top-color: var(--color-ink);
}

.cohort__phases li:nth-child(3) {
  border-top-color: var(--color-accent-light);
}

.cohort__phase {
  font-weight: 600;
  font-size: var(--text-sm);
}

.cohort__range {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
}

@media (max-width: 40rem) {
  .cohort__weeks {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .cohort__phases {
    grid-template-columns: 1fr;
  }

  .cohort__phases li {
    grid-column: auto;
  }
}

[data-demo].is-armed .cohort__dot {
  animation: demo-pop 420ms var(--ease-settle) calc(var(--i, 0) * 150ms + 150ms) both;
}

[data-demo].is-armed .cohort__phases li {
  animation: demo-rise var(--dur-demo) var(--ease-settle) calc(var(--i, 0) * 600ms + 600ms) both;
}

/* --- Yönetici markası: dijital ikiz -------------------------------------------------------- */
.twin {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
  gap: var(--space-md);
  align-items: center;
}

.twin__source {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background: var(--color-accent-wash);
  border: var(--rule-hair) solid var(--color-accent-rule);
}

.twin__from {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--color-ink-3);
}

.twin__outs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-2xs);
}

.twin__out {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px var(--space-xs);
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--color-card);
  border: var(--rule-hair) solid var(--color-rule);
}

.twin__kind {
  font-weight: 600;
  font-size: var(--text-sm);
}

.twin__what {
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  min-width: 0;
}

.twin__out .chip {
  grid-column: 2;
  justify-self: start;
}

.twin__status {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  white-space: nowrap;
}

.twin__status > span {
  grid-area: 1 / 1;
  justify-self: end;
}

.twin__wait {
  opacity: 0;
  color: var(--color-ink-3);
}

.twin__ok {
  color: var(--color-success);
  font-weight: 600;
}

@media (max-width: 40rem) {
  .twin {
    grid-template-columns: 1fr;
  }

  .twin__out {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .twin__kind {
    grid-column: 1;
  }

  .twin__what,
  .twin__out .chip {
    grid-column: 1 / -1;
  }

  .twin__status {
    grid-column: 2;
  }
}

.twin-parts {
  margin-top: var(--space-md);
}

[data-demo].is-armed .twin__source {
  animation: demo-rise var(--dur-demo) var(--ease-settle) 100ms both;
}

[data-demo].is-armed .twin__out {
  animation: demo-rise var(--dur-demo) var(--ease-settle) calc(var(--i, 0) * 220ms + 600ms) both;
}

[data-demo].is-armed .twin__wait {
  animation: demo-swap-out 1700ms linear calc(var(--i, 0) * 260ms + 900ms) both;
}

[data-demo].is-armed .twin__ok {
  animation: demo-fade var(--dur-long) var(--ease-out) calc(var(--i, 0) * 260ms + 2400ms) both;
}

/* Yazdırma: kurulu demo ilk karede kalmasın */
@media print {
  [data-demo].is-armed *,
  [data-demo].is-armed *::before,
  [data-demo].is-armed *::after {
    animation: none !important;
  }
}