/* Canlı örnekler (yenilikler sayfasıyla aynı parçalar) */
.stage { position: relative; height: 340px; border-radius: 22px; background: var(--sky-2); overflow: hidden; }
.stage .play { position: absolute; right: 12px; top: 12px; z-index: 5; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink-2); font: 500 13px/1 'Instrument Sans', sans-serif; cursor: pointer; }
.stage.paused * { animation-play-state: paused !important; }

/* Ortak cihaz parçaları */
.stage .phone { position: absolute; width: 168px; height: 300px; left: 50%; top: 22px; margin-left: -84px; border-radius: 26px; background: var(--dev); border: 2px solid var(--dev-edge); box-shadow: var(--shadow); overflow: hidden; }
.stage .phone .bar { margin: 12px 10px 0; height: 22px; border-radius: 8px; background: var(--dev-ui); font-size: 9.5px; color: var(--ink-3); display: flex; align-items: center; justify-content: center; }
.stage .win { position: absolute; left: 50%; top: 30px; width: 400px; max-width: calc(100% - 40px); height: 270px; transform: translateX(-50%); border-radius: 14px; background: var(--dev); border: 1px solid var(--dev-edge); box-shadow: var(--shadow); overflow: hidden; }
.stage .win .chrome { height: 26px; display: flex; gap: 6px; align-items: center; padding: 0 10px; background: var(--dev-ui); border-bottom: 1px solid var(--line); }
.stage .win .chrome i { width: 9px; height: 9px; border-radius: 50%; background: var(--dev-edge); }
.stage .ln { height: 8px; border-radius: 4px; background: var(--dev-ui); }
.stage .btn { font-style: normal; display: inline-flex; align-items: center; justify-content: center; height: 26px; padding: 0 12px; border-radius: 7px; background: var(--kite); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.stage .btn.ghost { background: var(--dev-ui); color: var(--ink-2); }
.stage .cursor { font-style: normal; position: absolute; width: 18px; height: 18px; z-index: 4; filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.stage .toast { position: absolute; left: 12px; right: 12px; bottom: 14px; padding: 9px 11px; border-radius: 10px; background: var(--ink); color: var(--sky); font-size: 11px; line-height: 1.35; }
.stage .toast b { display: block; font-size: 11.5px; }

/* Örnek A: tarayıcıda aç, ana ekrana ekle */
.dA { --t: 9s; }
.dA .site { position: absolute; inset: 44px 12px 0; }
.dA .site .ln { margin-bottom: 9px; }
.dA .site .hero-ln { height: 16px; width: 70%; background: var(--ink); opacity: .85; margin: 16px 0 12px; }
.dA .sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 18px; background: var(--paper); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; transform: translateY(110%); animation: sheet var(--t) ease-in-out infinite; }
.dA .sheet .row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 11px; color: var(--ink-2); }
.dA .sheet .row.add { animation: rowHit var(--t) ease-in-out infinite; }
.dA .sheet .row span { width: 16px; height: 16px; border-radius: 4px; background: var(--dev-ui); }
.dA .home { position: absolute; inset: 0; background: linear-gradient(160deg, #6b8aa6, #2e4a63); padding: 46px 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; align-content: start; opacity: 0; animation: homeIn var(--t) ease-in-out infinite; }
.dA .home i { width: 100%; aspect-ratio: 1; border-radius: 9px; background: rgba(255,255,255,.28); }
.dA .home .gk { background: url('kite.png') center/cover; transform: scale(0); animation: popIn var(--t) cubic-bezier(.3, 1.6, .5, 1) infinite; }
.dA .home .label { grid-column: 1 / -1; color: #fff; font-size: 10.5px; opacity: .85; margin-top: -6px; }
@keyframes sheet { 0%, 18% { transform: translateY(110%); } 26%, 46% { transform: translateY(0); } 52%, 100% { transform: translateY(110%); } }
@keyframes rowHit { 0%, 36% { background: transparent; } 40%, 46% { background: var(--kite-3); color: var(--ink); } 50%, 100% { background: transparent; } }
@keyframes homeIn { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes popIn { 0%, 58% { transform: scale(0); } 66%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

/* Örnek B: davet linki */
.dB { --t: 10s; }
.dB .card { position: absolute; left: 6%; top: 52px; width: 46%; padding: 14px; border-radius: 14px; background: var(--dev); border: 1px solid var(--dev-edge); box-shadow: var(--shadow); font-size: 11.5px; }
.dB .card b { display: block; font-size: 12.5px; margin-bottom: 8px; }
.dB .link { display: flex; gap: 6px; align-items: center; }
.dB .link span { flex: 1; min-width: 0; height: 26px; border-radius: 7px; background: var(--dev-ui); color: var(--ink-3); font-size: 10px; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; }
.dB .link .btn { animation: press var(--t) ease-in-out infinite; }
.dB .copied { margin-top: 10px; color: var(--done); font-weight: 600; opacity: 0; animation: copied var(--t) ease-in-out infinite; }
.dB .msg { position: absolute; left: 44%; top: 118px; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: var(--kite); color: #fff; font-size: 10.5px; opacity: 0; animation: fly var(--t) ease-in-out infinite; }
.dB .phone { left: auto; right: 7%; margin-left: 0; }
.dB .invite { margin: 18px 10px 0; padding: 10px; border-radius: 12px; background: var(--kite-3); font-size: 10.5px; line-height: 1.35; color: var(--ink); opacity: 0; animation: inviteIn var(--t) ease-in-out infinite; }
.dB .invite b { display: block; font-size: 11.5px; }
.dB .invite .ws { width: 26px; height: 26px; border-radius: 8px; background: #3451e0; color: #fff; display: grid; place-items: center; font-weight: 700; float: left; margin-right: 8px; }
.dB .form { margin: 12px 10px 0; opacity: 0; animation: inviteIn var(--t) ease-in-out infinite; }
.dB .form .ln { height: 22px; margin-bottom: 8px; border-radius: 6px; }
.dB .form .btn { width: 100%; animation: press2 var(--t) ease-in-out infinite; }
.dB .toast { opacity: 0; transform: translateY(8px); animation: joined var(--t) ease-in-out infinite; }
@keyframes press { 0%, 14% { transform: scale(1); } 17% { transform: scale(.92); } 20%, 100% { transform: scale(1); } }
@keyframes copied { 0%, 17% { opacity: 0; } 21%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes fly { 0%, 24% { opacity: 0; transform: translate(0, 0) scale(.8); } 28% { opacity: 1; transform: translate(0, 0) scale(1); } 40% { opacity: 1; transform: translate(60px, -30px) scale(1); } 46%, 100% { opacity: 0; transform: translate(90px, -40px) scale(.8); } }
@keyframes inviteIn { 0%, 42% { opacity: 0; } 48%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes press2 { 0%, 64% { transform: scale(1); } 67% { transform: scale(.94); } 70%, 100% { transform: scale(1); } }
@keyframes joined { 0%, 70% { opacity: 0; transform: translateY(8px); } 75%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* Örnek C: açılışta güncelleme penceresi */
.dC { --t: 9s; }
.dC .app { position: absolute; inset: 26px 0 0; display: grid; grid-template-columns: 90px 1fr; }
.dC .app .side { background: var(--dev-ui); padding: 14px 10px; }
.dC .app .side .ln { margin-bottom: 9px; background: var(--dev-edge); }
.dC .app .main { padding: 18px; }
.dC .app .main .ln { margin-bottom: 10px; }
.dC .app .main .h { height: 14px; width: 50%; background: var(--ink); opacity: .8; }
.dC .veil { position: absolute; inset: 26px 0 0; background: rgba(20, 32, 43, .35); opacity: 0; animation: veil var(--t) ease-in-out infinite; }
.dC .dlg { position: absolute; left: 50%; top: 58px; width: 230px; margin-left: -115px; padding: 14px; border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); font-size: 11px; opacity: 0; transform: translateY(10px) scale(.97); animation: dlg var(--t) ease-in-out infinite; }
.dC .dlg small { color: var(--ink-3); }
.dC .dlg h4 { margin: 0 0 8px; font-size: 14px; }
.dC .dlg .notes { padding: 8px; border-radius: 8px; background: var(--dev-ui); color: var(--ink-2); line-height: 1.4; }
.dC .dlg .acts { display: flex; justify-content: space-between; margin-top: 10px; }
.dC .dlg .now { position: relative; }
.dC .dlg .now::after { content: 'Şimdi güncelle'; }
.dC .dlg .now { animation: nowBtn var(--t) steps(1) infinite; }
.dC .flash { position: absolute; inset: 26px 0 0; background: var(--paper); opacity: 0; animation: flash var(--t) ease-in-out infinite; }
.dC .cursor { left: 64%; top: 82%; animation: curC var(--t) ease-in-out infinite; }
.dC .newtag { position: absolute; right: 14px; top: 40px; padding: 4px 8px; border-radius: 999px; background: var(--done); color: #fff; font-size: 10px; font-weight: 600; opacity: 0; animation: newtag var(--t) ease-in-out infinite; }
@keyframes veil { 0%, 8% { opacity: 0; } 14%, 60% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes dlg { 0%, 8% { opacity: 0; transform: translateY(10px) scale(.97); } 14%, 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes curC { 0%, 20% { left: 64%; top: 82%; } 36%, 46% { left: 62%; top: 63%; } 100% { left: 62%; top: 63%; } }
@keyframes nowBtn { 0%, 44% { opacity: 1; } 45%, 100% { opacity: .75; } }
@keyframes flash { 0%, 60% { opacity: 0; } 64% { opacity: 1; } 72%, 100% { opacity: 0; } }
@keyframes newtag { 0%, 70% { opacity: 0; } 76%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* Örnek D: yorum bildirimleri tek bildirimde toplanır */
.dD { --t: 8s; }
.dD .stack { position: absolute; left: 50%; top: 56px; width: 300px; max-width: calc(100% - 40px); transform: translateX(-50%); }
.dD .n { position: absolute; left: 0; right: 0; display: flex; gap: 10px; align-items: center; padding: 11px 12px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); font-size: 12px; }
.dD .n .av { width: 30px; height: 30px; border-radius: 50%; background: #1f9a63; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: none; }
.dD .n b { display: block; font-size: 12.5px; }
.dD .n small { color: var(--ink-3); }
.dD .n1 { top: 0; animation: n1 var(--t) ease-in-out infinite; }
.dD .n2 { top: 64px; animation: n2 var(--t) ease-in-out infinite; }
.dD .n3 { top: 128px; animation: n3 var(--t) ease-in-out infinite; }
.dD .merged { top: 0; opacity: 0; animation: merged var(--t) ease-in-out infinite; }
.dD .merged .count { margin-left: auto; min-width: 22px; height: 22px; border-radius: 11px; background: var(--kite); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; }
@keyframes n1 { 0% { opacity: 0; transform: translateY(-8px); } 6%, 46% { opacity: 1; transform: none; } 56%, 100% { opacity: 0; transform: none; } }
@keyframes n2 { 0%, 14% { opacity: 0; transform: translateY(-8px); } 20%, 42% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(-64px); } }
@keyframes n3 { 0%, 28% { opacity: 0; transform: translateY(-8px); } 34%, 42% { opacity: 1; transform: none; } 52%, 100% { opacity: 0; transform: translateY(-128px); } }
@keyframes merged { 0%, 48% { opacity: 0; transform: scale(.96); } 56%, 92% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* Örnek E: yorumda @bahsetme */
.dE { --t: 8s; }
.dE .panel { position: absolute; left: 50%; top: 34px; width: 320px; max-width: calc(100% - 40px); transform: translateX(-50%); padding: 16px; border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); font-size: 12px; }
.dE .cm { display: flex; gap: 8px; margin-bottom: 12px; }
.dE .cm .av { width: 24px; height: 24px; border-radius: 50%; background: #3451e0; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.dE .cm p { color: var(--ink-2); line-height: 1.4; }
.dE .box { position: relative; height: 34px; border: 1.5px solid var(--kite); border-radius: 9px; display: flex; align-items: center; padding: 0 10px; gap: 4px; }
.dE .typed { white-space: nowrap; overflow: hidden; width: 0; animation: typeAt var(--t) steps(3) infinite; color: var(--ink); }
.dE .chip { padding: 1px 6px; border-radius: 5px; background: var(--kite-3); color: var(--kite); font-weight: 600; opacity: 0; animation: chip var(--t) ease-in-out infinite; position: absolute; left: 10px; }
.dE .rest { white-space: nowrap; overflow: hidden; width: 0; position: absolute; left: 104px; animation: typeRest var(--t) steps(14) infinite; color: var(--ink); }
.dE .pop { position: absolute; left: 0; bottom: 42px; width: 210px; padding: 5px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; animation: pop var(--t) ease-in-out infinite; }
.dE .pop div { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 7px; }
.dE .pop div:first-child { background: var(--dev-ui); }
.dE .pop i { width: 18px; height: 18px; border-radius: 50%; background: #e5701e; }
.dE .pop div + div i { background: #12a594; }
@keyframes typeAt { 0%, 8% { width: 0; } 20%, 38% { width: 26px; } 40%, 100% { width: 0; } }
@keyframes pop { 0%, 20% { opacity: 0; transform: translateY(4px); } 24%, 36% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; } }
@keyframes chip { 0%, 38% { opacity: 0; } 41%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes typeRest { 0%, 44% { width: 0; } 70%, 94% { width: 140px; } 100% { width: 0; } }

/* Örnek F: takvimde sürükleyip tarih değiştirme */
.dF { --t: 7s; }
.dF .cal { position: absolute; left: 50%; top: 30px; width: 360px; max-width: calc(100% - 40px); transform: translateX(-50%); border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); padding: 12px; }
.dF .cal .m { font-weight: 650; font-size: 13px; margin-bottom: 8px; }
.dF .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.dF .grid > div { height: 40px; border-radius: 6px; background: var(--dev-ui); font-size: 9.5px; color: var(--ink-3); padding: 3px 4px; position: relative; }
.dF .grid .today { box-shadow: inset 0 0 0 1.5px var(--kite); }
.dF .grid .target { animation: target var(--t) ease-in-out infinite; }
.dF .grid .from { overflow: visible; z-index: 2; }
.dF .mover { position: absolute; left: 3px; right: 3px; bottom: 4px; height: 14px; z-index: 3; animation: dragF var(--t) ease-in-out infinite; }
.dF .drag { display: block; height: 14px; border-radius: 4px; background: var(--kite); box-shadow: 0 6px 14px rgba(228, 80, 44, .3); font-size: 8.5px; line-height: 12px; color: #fff; font-weight: 600; padding: 1px 4px; white-space: nowrap; overflow: hidden; }
.dF .mover .cursor { left: 60%; top: 6px; }
@keyframes target { 0%, 30% { background: var(--dev-ui); } 38%, 60% { background: var(--kite-3); } 70%, 100% { background: var(--dev-ui); } }
@keyframes dragF { 0%, 12% { transform: none; } 18% { transform: rotate(-4deg) scale(1.06); } 52% { transform: translate(calc(100% + 9px), 43px) rotate(-4deg) scale(1.06); } 60%, 100% { transform: translate(calc(100% + 9px), 43px); } }

/* Örnek G: esnek tekrar */
.dG { --t: 7s; }
.dG .rp { position: absolute; left: 50%; top: 60px; width: 300px; max-width: calc(100% - 40px); transform: translateX(-50%); padding: 14px; border-radius: 14px; background: var(--paper); box-shadow: var(--shadow); font-size: 12px; }
.dG .rp .title { font-weight: 650; margin-bottom: 10px; }
.dG .days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dG .days span { height: 32px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 11px; }
.dG .days .d1 { animation: dOn var(--t) steps(1) infinite; }
.dG .days .d3 { animation: dOn3 var(--t) steps(1) infinite; }
.dG .days .d5 { animation: dOn5 var(--t) steps(1) infinite; }
.dG .rule { margin-top: 12px; color: var(--ink-2); }
.dG .rule b { color: var(--ink); }
@keyframes dOn { 0%, 14% { background: transparent; color: var(--ink-2); border-color: var(--line); } 15%, 90% { background: var(--kite); color: #fff; border-color: var(--kite); } 91%, 100% { background: transparent; color: var(--ink-2); border-color: var(--line); } }
@keyframes dOn3 { 0%, 34% { background: transparent; color: var(--ink-2); border-color: var(--line); } 35%, 90% { background: var(--kite); color: #fff; border-color: var(--kite); } 91%, 100% { background: transparent; color: var(--ink-2); border-color: var(--line); } }
@keyframes dOn5 { 0%, 54% { background: transparent; color: var(--ink-2); border-color: var(--line); } 55%, 90% { background: var(--kite); color: #fff; border-color: var(--kite); } 91%, 100% { background: transparent; color: var(--ink-2); border-color: var(--line); } }


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .stage .play { display: none; }
  /* hareketsiz hâlde her örneğin sonucu görünsün */
  .dA .home, .dB .invite, .dB .form, .dB .toast, .dC .newtag, .dD .merged, .dE .chip, .dB .copied { opacity: 1 !important; transform: none !important; }
  .dA .home .gk { transform: none !important; }
  .dD .n1, .dD .n2, .dD .n3 { opacity: 0 !important; }
  .dE .rest { width: 140px !important; }
  .dC .dlg, .dC .veil { opacity: 1 !important; transform: none !important; }
  .dF .mover { transform: translate(calc(100% + 9px), 43px); }
}