/* Copia — sitedeki hareketli sahneler. Yalnızca CSS (sitenin CSP'si betik çalıştırmaya izin vermez).
   Taban stiller son kareyi gösterir: "Hareketi azalt" açıksa animasyon yerine sahnenin sonucu görünür.
   Sahneler: .s-hero (⌘V V), .s-snip (şablon + soru kartı), .s-vault (Kasa + Touch ID). */

.stage {
  container-type: inline-size;
  position: relative;
  aspect-ratio: 16 / 13.5;
  border-radius: 22px;
  background: var(--card);
  overflow: hidden;
  --d: 10s;
}
.stage-inner { position: absolute; inset: 0; font-size: calc(100cqw / 38); }

/* Ortak parçalar */
.win {
  position: absolute; left: 6%; right: 6%; top: 6%;
  background: #fff; border-radius: 1em; box-shadow: 0 .6em 1.6em -0.8em rgba(20,18,21,.35);
  padding: 1em 1.4em; color: var(--ink);
}
.win .bar { display: flex; gap: .45em; margin-bottom: 1.1em; align-items: center; }
.win .bar i { width: .75em; height: .75em; border-radius: 50%; background: #E3DFD8; display: block; flex: none; }
.win .title { font-weight: 800; font-size: 1.15em; margin-bottom: .5em; }
.win .line { font-size: 1.05em; color: #3B373E; display: flex; align-items: baseline; white-space: nowrap; min-height: 1.5em; }
.caret { display: inline-block; width: .12em; height: 1.15em; background: var(--wine); margin-left: .1em; transform: translateY(.15em);
  animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.keys { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; align-items: center; gap: .7em; }
.key {
  min-width: 2.6em; height: 2.6em; padding: 0 .7em; border-radius: .55em; background: #fff; color: var(--ink);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05em;
  border: .08em solid rgba(20,18,21,.14); box-shadow: 0 .18em 0 rgba(20,18,21,.18);
}
.hint { font-size: .85em; color: var(--muted); margin-left: .6em; min-width: 10em; position: relative; height: 1.3em; }
.hint span { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }

/* ───────── 1. ⌘V V ───────── */
.s-hero .win { height: 40%; }
.s-hero .pasted { color: var(--ink); font-weight: 600; background: rgba(123,35,53,.10); border-radius: .25em; padding: 0 .2em;
  animation: hero-pasted var(--d) infinite; }
@keyframes hero-pasted { 0%, 56% { opacity: 0; max-width: 0; } 57%, 94% { opacity: 1; max-width: 30em; } 100% { opacity: 0; max-width: 30em; } }

.hud {
  position: absolute; left: 7%; right: 7%; top: 25%;
  background: #141215; border-radius: 1.1em; padding: 1em 1.1em .8em;
  box-shadow: 0 1.4em 3em -1em rgba(20,18,21,.6); color: #F7F5F0;
  animation: hero-hud var(--d) infinite; transform-origin: 50% 30%;
  opacity: 0;
}
@keyframes hero-hud {
  0%, 21% { opacity: 0; transform: scale(.96) translateY(.4em); }
  23%, 54% { opacity: 1; transform: none; }
  57%, 100% { opacity: 0; transform: scale(.98); }
}
.hud .head { display: flex; align-items: center; gap: .8em; font-size: .78em; padding-bottom: .7em; border-bottom: .12em solid #F7F5F0; margin-bottom: .45em; }
.hud .head b { letter-spacing: .25em; font-weight: 800; }
.hud .head span { color: #8E8993; }
.hud .rows { position: relative; }
.hud .row { position: relative; z-index: 1; height: 2.2em; display: flex; align-items: center; gap: .9em; font-size: .92em; padding: 0 .7em; white-space: nowrap; overflow: hidden; color: rgba(247,245,240,.72); }
.hud .row .n { width: 1.6em; font-weight: 900; color: #E7C9CF; font-variant-numeric: tabular-nums; flex: none; }
.hud .row .lock, .hud .row .pin { width: 1.6em; flex: none; color: #E7C9CF; }
.hud .row svg { width: .85em; height: .85em; display: block; }
.hud .row .dots { letter-spacing: .08em; }
.hud .row em { font-style: normal; font-weight: 700; color: #F7F5F0; }
.hud .sel { position: absolute; left: 0; right: 0; height: 2.2em; top: 0; border-radius: .55em; background: #7B2335;
  font-size: .92em; animation: hero-sel var(--d) infinite; transform: translateY(300%); }
@keyframes hero-sel { 0%, 30% { transform: translateY(100%); } 31.5%, 39% { transform: translateY(200%); } 40.5%, 100% { transform: translateY(300%); } }
.hud .foot { display: flex; justify-content: space-between; font-size: .7em; color: #8E8993; margin-top: .5em; padding-top: .3em; }
.hud .foot b { color: #E7C9CF; font-weight: 700; }

.s-hero .k1 { animation: hero-cmd var(--d) infinite; }
.s-hero .k2 { animation: hero-v var(--d) infinite; }
@keyframes hero-cmd {
  0%, 9%, 56%, 100% { transform: none; box-shadow: 0 .18em 0 rgba(20,18,21,.18); background: #fff; color: var(--ink); }
  10%, 55% { transform: translateY(.14em); box-shadow: 0 .04em 0 rgba(20,18,21,.18); background: #7B2335; color: #fff; }
}
@keyframes hero-v {
  0%, 13%, 16%, 21%, 24%, 30%, 33%, 39%, 42%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  14%, 15%, 22%, 23%, 31%, 32%, 40%, 41% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
.s-hero .h1 { animation: hero-h1 var(--d) infinite; }
.s-hero .h2 { animation: hero-h2 var(--d) infinite; }
.s-hero .h3 { animation: hero-h3 var(--d) infinite; opacity: 1; }
@keyframes hero-h1 { 0%, 9% { opacity: 0; } 10%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes hero-h2 { 0%, 21% { opacity: 0; } 22%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes hero-h3 { 0%, 55% { opacity: 0; } 56%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* ───────── 2. Şablon: "teklif" + Tab Tab → soru kartı → metin ───────── */
.s-snip { --d: 11s; }
.s-snip .win { height: 46%; }
.s-snip .body { position: relative; }
.s-snip .typing-line { position: absolute; left: 0; top: 0; animation: snip-tline var(--d) infinite; opacity: 0; }
@keyframes snip-tline { 0%, 31% { opacity: 1; } 32%, 100% { opacity: 0; } }
.s-snip .typed { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95em; color: var(--ink); overflow: hidden; display: inline-block;
  white-space: nowrap; vertical-align: bottom; animation: snip-typed var(--d) infinite; width: 0; }
@keyframes snip-typed { 0%, 4% { width: 0; } 22%, 31% { width: 6ch; } 32%, 100% { width: 0; } }
.s-snip .out { animation: snip-out var(--d) infinite; }
@keyframes snip-out { 0%, 57% { opacity: 0; transform: translateY(.3em); } 59%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.s-snip .out .line { margin-bottom: .35em; }
.s-snip .out .fill { background: rgba(123,35,53,.10); border-radius: .25em; padding: 0 .2em; font-weight: 600; color: var(--ink); }

.ask {
  position: absolute; left: 22%; right: 22%; top: 32%;
  background: #141215; color: #F7F5F0; border-radius: 1em; padding: 1em 1.1em .9em;
  box-shadow: 0 1.4em 3em -1em rgba(20,18,21,.6);
  animation: snip-ask var(--d) infinite; opacity: 0;
}
@keyframes snip-ask { 0%, 33% { opacity: 0; transform: scale(.96) translateY(.4em); } 35%, 55% { opacity: 1; transform: none; } 57%, 100% { opacity: 0; transform: scale(.98); } }
.ask .who { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: #E7C9CF; font-weight: 700; font-size: .9em; margin-bottom: .7em; }
.ask .lbl { display: block; font-size: .78em; font-weight: 700; color: rgba(247,245,240,.6); margin-bottom: .35em; }
.ask .field { background: rgba(255,255,255,.08); border: .08em solid rgba(231,201,207,.45); border-radius: .5em; padding: .45em .6em; font-weight: 600; display: flex; align-items: center; }
.ask .val { overflow: hidden; display: inline-block; white-space: nowrap; animation: snip-val var(--d) infinite; width: 4.4ch; }
@keyframes snip-val { 0%, 37% { width: 0; } 50%, 100% { width: 4.4ch; } }
.ask .field .caret { background: #F7F5F0; }
.ask .foot { display: flex; gap: 1em; font-size: .72em; color: rgba(247,245,240,.55); margin-top: .8em; }

.s-snip .k1 { animation: snip-tab var(--d) infinite; }
.s-snip .k2 { animation: snip-ret var(--d) infinite; }
@keyframes snip-tab {
  0%, 24%, 27%, 28%, 31%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  25%, 26%, 29%, 30% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
@keyframes snip-ret {
  0%, 53%, 56%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  54%, 55% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
.s-snip .h1 { animation: snip-h1 var(--d) infinite; }
.s-snip .h2 { animation: snip-h2 var(--d) infinite; }
.s-snip .h3 { animation: snip-h3 var(--d) infinite; }
.s-snip .h4 { animation: snip-h4 var(--d) infinite; opacity: 1; }
@keyframes snip-h1 { 0%, 23% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes snip-h2 { 0%, 24% { opacity: 0; } 25%, 33% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes snip-h3 { 0%, 34% { opacity: 0; } 35%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes snip-h4 { 0%, 57% { opacity: 0; } 58%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* ───────── 3. Kasa: şifre alanı → ⌘V ⇧ → seç → Touch ID → dolu ───────── */
.s-vault { --d: 11s; }
.s-vault .win { height: 64%; padding-top: .9em; }
.s-vault .addr { flex: 1; margin-left: .8em; background: #F1EEE9; border-radius: .45em; font-size: .75em; color: var(--muted); padding: .25em .7em; }
.s-vault .form { width: 58%; }
.s-vault .lbl { display: block; font-size: .75em; font-weight: 700; color: #6B6770; margin: .6em 0 .3em; }
.s-vault .input { height: 2.3em; border: .1em solid #DEDAD3; border-radius: .5em; padding: 0 .7em; display: flex; align-items: center; font-size: .95em; color: var(--ink); background: #fff; }
.s-vault .input.pw { border-color: #7B2335; box-shadow: 0 0 0 .18em rgba(123,35,53,.12); }
.s-vault .pwdots { overflow: hidden; display: inline-block; white-space: nowrap; letter-spacing: .12em; font-weight: 900; width: 9.6em; animation: vault-dots var(--d) infinite; }
@keyframes vault-dots { 0%, 60% { width: 0; } 66%, 94% { width: 9.6em; } 97%, 100% { width: 0; } }
.s-vault .pw .caret { visibility: hidden; animation: blink 1s steps(1) infinite, vault-pwcaret var(--d) infinite; }
@keyframes vault-pwcaret { 0%, 60% { visibility: visible; } 61%, 100% { visibility: hidden; } }
.s-vault .btn { margin-top: 1em; height: 2.3em; border-radius: .5em; background: #7B2335; color: #fff; font-weight: 700; font-size: .9em;
  display: flex; align-items: center; justify-content: center; animation: vault-btn var(--d) infinite; }
@keyframes vault-btn { 0%, 64% { opacity: .35; } 67%, 94% { opacity: 1; } 100% { opacity: .35; } }

.picker {
  position: absolute; left: 50%; top: 40%; width: 40%;
  background: #141215; color: #F7F5F0; border-radius: .9em; padding: .5em; font-size: .92em;
  box-shadow: 0 1.4em 3em -1em rgba(20,18,21,.6);
  animation: vault-picker var(--d) infinite; opacity: 0;
}
@keyframes vault-picker { 0%, 25% { opacity: 0; transform: scale(.96) translateY(.4em); } 27%, 37% { opacity: 1; transform: none; } 39%, 100% { opacity: 0; transform: scale(.98); } }
.picker .it { display: flex; align-items: center; gap: .6em; height: 2em; padding: 0 .7em; border-radius: .5em; color: rgba(247,245,240,.75); white-space: nowrap; }
.picker .it svg { width: .8em; height: .8em; color: #E7C9CF; flex: none; }
.picker .it.on { background: #7B2335; color: #fff; font-weight: 700; }
.picker .sep { border-top: .08em solid rgba(247,245,240,.15); margin: .35em .3em; }

.touch {
  position: absolute; left: 28%; right: 28%; top: 33%;
  background: rgba(255,255,255,.97); border-radius: 1.1em; padding: 1.3em 1em 1.1em; text-align: center; color: var(--ink);
  box-shadow: 0 1.6em 3.4em -1em rgba(20,18,21,.45);
  animation: vault-touch var(--d) infinite; opacity: 0;
}
@keyframes vault-touch { 0%, 39% { opacity: 0; transform: scale(.96); } 41%, 58% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: scale(.98); } }
.touch .fp { width: 3.4em; height: 3.4em; margin: 0 auto .7em; color: #C9566C; animation: vault-fp var(--d) infinite; }
.touch .fp svg { width: 100%; height: 100%; display: block; }
@keyframes vault-fp { 0%, 46% { color: #C9566C; transform: none; } 48% { transform: scale(1.08); } 50%, 100% { color: #7B2335; transform: none; } }
.touch b { display: block; font-size: 1em; margin-bottom: .25em; }
.touch small { font-size: .8em; color: var(--muted); }

.s-vault .k1 { animation: vault-cmd var(--d) infinite; }
.s-vault .k2 { animation: vault-v var(--d) infinite; }
.s-vault .k3 { animation: vault-shift var(--d) infinite; }
.s-vault .k4 { animation: vault-ret var(--d) infinite; }
@keyframes vault-cmd {
  0%, 9%, 21%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  10%, 20% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
@keyframes vault-v {
  0%, 13%, 16%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  14%, 15% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
@keyframes vault-shift {
  0%, 22%, 25%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  23%, 24% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
@keyframes vault-ret {
  0%, 35%, 38%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  36%, 37% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); }
}
.s-vault .h1 { animation: vault-h1 var(--d) infinite; }
.s-vault .h2 { animation: vault-h2 var(--d) infinite; }
.s-vault .h3 { animation: vault-h3 var(--d) infinite; }
.s-vault .h4 { animation: vault-h4 var(--d) infinite; opacity: 1; }
@keyframes vault-h1 { 0%, 9% { opacity: 0; } 10%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes vault-h2 { 0%, 26% { opacity: 0; } 27%, 38% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes vault-h3 { 0%, 39% { opacity: 0; } 40%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes vault-h4 { 0%, 60% { opacity: 0; } 61%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* Hareketi azalt: her sahnenin son karesi */
@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before, .stage *::after { animation: none !important; }
  .s-snip .typing-line { display: none; }
  .s-vault .pw .caret { visibility: hidden; }
}

/* ───────── Ortak: küçük "fotoğraf", PDF simgesi, ikinci tip HUD satırları ───────── */
.photo { position: relative; overflow: hidden; border-radius: .35em;
  background: linear-gradient(180deg, #F6C28B 0%, #E98A7A 48%, #9E3A4C 100%); }
.photo::before { content: ""; position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: #FFE8B8; left: 54%; top: 18%; }
.photo::after { content: ""; position: absolute; inset: 0; background: #3B1A25;
  clip-path: polygon(0 100%, 0 72%, 22% 50%, 40% 68%, 62% 40%, 86% 66%, 100% 56%, 100% 100%); }
.pdf { position: relative; width: 1.3em; height: 1.6em; background: #fff; border-radius: .18em; border: .08em solid #D8D3CC; flex: none; }
.pdf::after { content: "PDF"; position: absolute; left: -.15em; right: -.15em; bottom: .25em; background: #C9384B; color: #fff;
  font-size: .38em; font-weight: 900; text-align: center; border-radius: .15em; line-height: 1.5; }
.hud .row .thumb { width: 1.9em; height: 1.25em; flex: none; }
.hud .row .ico { width: 1.6em; flex: none; display: flex; justify-content: center; }
.hud .row .ico .pdf { font-size: .9em; }
.hud .row .src { margin-left: auto; font-size: .78em; color: #8E8993; }
.aa { margin-left: auto; font-family: Georgia, serif; font-weight: 700; color: #E7C9CF; font-size: .9em; }

/* Hepsi aynı tuş basışı görünümü */
@keyframes kp { from, to { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }

/* ───────── 4. Görseller ve dosyalar (12 sn): görsel → nota, PDF → Finder'a ───────── */
.s-media { --d: 12s; }
.s-media .win.doc { right: 34%; height: 44%; }
.s-media .doc .photo { width: 62%; aspect-ratio: 16/9; margin-top: .3em; animation: media-img var(--d) infinite; }
@keyframes media-img { 0%, 26% { opacity: 0; transform: scale(.94); } 28%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.s-media .win.finder { left: 46%; right: 5%; top: 46%; height: 30%; padding: .8em 1em; }
.s-media .finder .title { font-size: .95em; }
.s-media .finder .file { display: flex; flex-direction: column; align-items: center; gap: .3em; width: 5em; margin-top: .4em; font-size: .8em; color: var(--ink);
  animation: media-file var(--d) infinite; }
.s-media .finder .file .pdf { font-size: 2em; }
@keyframes media-file { 0%, 73% { opacity: 0; transform: scale(.9); } 75%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.s-media .hud { top: 18%; left: 9%; right: 9%; animation: media-hud var(--d) infinite; }
@keyframes media-hud {
  0%, 12% { opacity: 0; transform: scale(.96) translateY(.4em); } 14%, 25% { opacity: 1; transform: none; } 27%, 55% { opacity: 0; transform: scale(.98); }
  57%, 71% { opacity: 1; transform: none; } 73%, 100% { opacity: 0; transform: scale(.98); }
}
.s-media .hud .sel { animation: media-sel var(--d) infinite; transform: translateY(100%); }
@keyframes media-sel { 0%, 62% { transform: translateY(100%); } 63.5%, 100% { transform: translateY(200%); } }
.s-media .k1 { animation: media-cmd var(--d) infinite; }
.s-media .k2 { animation: media-v var(--d) infinite; }
@keyframes media-cmd { 0%, 5%, 26%, 49%, 72%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  6%, 25%, 50%, 71% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
@keyframes media-v { 0%, 8%, 11%, 12%, 15%, 52%, 55%, 56%, 59%, 62%, 65%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  9%, 10%, 13%, 14%, 53%, 54%, 57%, 58%, 63%, 64% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
.s-media .h1 { animation: media-h1 var(--d) infinite; }
.s-media .h2 { animation: media-h2 var(--d) infinite; }
.s-media .h3 { animation: media-h3 var(--d) infinite; }
.s-media .h4 { animation: media-h4 var(--d) infinite; opacity: 1; }
@keyframes media-h1 { 0%, 5% { opacity: 0; } 6%, 26% { opacity: 1; } 27%, 100% { opacity: 0; } }
@keyframes media-h2 { 0%, 26% { opacity: 0; } 27%, 48% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes media-h3 { 0%, 49% { opacity: 0; } 50%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes media-h4 { 0%, 72% { opacity: 0; } 73%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* ───────── 5. Biçim (11 sn): önce biçimiyle, sonra Tab → düz metin ───────── */
.s-fmt { --d: 11s; }
.s-fmt .win { height: 44%; }
.s-fmt .win .line { display: block; }  /* esnek kutuda kelime arası boşluklar kayboluyordu */
.s-fmt .rich { font-weight: 800; color: var(--wine); }
.s-fmt .rich i { font-style: normal; font-weight: 600; color: #2E6B4F; text-decoration: underline; }
.s-fmt .p1 { animation: fmt-p1 var(--d) infinite; }
.s-fmt .p2 { animation: fmt-p2 var(--d) infinite; }
@keyframes fmt-p1 { 0%, 25% { opacity: 0; transform: translateY(.3em); } 27%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes fmt-p2 { 0%, 70% { opacity: 0; transform: translateY(.3em); } 72%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.s-fmt .hud { animation: fmt-hud var(--d) infinite; top: 30%; }
@keyframes fmt-hud {
  0%, 11% { opacity: 0; transform: scale(.96) translateY(.4em); } 13%, 24% { opacity: 1; transform: none; } 26%, 51% { opacity: 0; transform: scale(.98); }
  53%, 69% { opacity: 1; transform: none; } 71%, 100% { opacity: 0; transform: scale(.98); }
}
.s-fmt .hud .sel { animation: none; transform: translateY(100%); }
.s-fmt .hud .styled b { color: #F2B6C1; font-weight: 800; }
.s-fmt .hud .styled i { font-style: normal; color: #9FD3B8; text-decoration: underline; }
.s-fmt .hud .styled { animation: fmt-styled var(--d) infinite; }
.s-fmt .hud .plain { position: absolute; left: 3.2em; animation: fmt-plain var(--d) infinite; opacity: 0; }
@keyframes fmt-styled { 0%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes fmt-plain { 0%, 59% { opacity: 0; } 60%, 100% { opacity: 1; } }
.s-fmt .aa { animation: fmt-aa var(--d) infinite; }
@keyframes fmt-aa { 0%, 59% { text-decoration: none; opacity: 1; } 60%, 100% { text-decoration: line-through; opacity: .5; } }
.s-fmt .k1 { animation: fmt-cmd var(--d) infinite; }
.s-fmt .k2 { animation: fmt-v var(--d) infinite; }
.s-fmt .k3 { animation: fmt-tab var(--d) infinite; }
@keyframes fmt-cmd { 0%, 5%, 25%, 46%, 70%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  6%, 24%, 47%, 69% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
@keyframes fmt-v { 0%, 8%, 11%, 12%, 15%, 49%, 52%, 53%, 56%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  9%, 10%, 13%, 14%, 50%, 51%, 54%, 55% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
@keyframes fmt-tab { 0%, 58%, 61%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  59%, 60% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
.s-fmt .h1 { animation: fmt-h1 var(--d) infinite; }
.s-fmt .h2 { animation: fmt-h2 var(--d) infinite; }
.s-fmt .h3 { animation: fmt-h3 var(--d) infinite; }
.s-fmt .h4 { animation: fmt-h4 var(--d) infinite; opacity: 1; }
@keyframes fmt-h1 { 0%, 5% { opacity: 0; } 6%, 25% { opacity: 1; } 26%, 100% { opacity: 0; } }
@keyframes fmt-h2 { 0%, 25% { opacity: 0; } 26%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes fmt-h3 { 0%, 47% { opacity: 0; } 48%, 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes fmt-h4 { 0%, 70% { opacity: 0; } 71%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* ───────── 6. iCloud: iki Mac yan yana (12 sn) ───────── */
.s-cloud { --d: 12s; aspect-ratio: 16 / 10.5; }
.s-cloud .mac { position: absolute; top: 8%; width: 42%; }
.s-cloud .mac.a { left: 4%; }
.s-cloud .mac.b { right: 4%; }
.s-cloud .screen { background: #141215; border-radius: .7em; padding: .45em; aspect-ratio: 16 / 11; }
.s-cloud .screen .in { position: relative; background: #fff; border-radius: .35em; height: 100%; padding: .6em .7em; overflow: hidden; }
.s-cloud .base { height: .55em; margin: 0 -6%; background: #CFCAC3; border-radius: 0 0 .6em .6em; }
.s-cloud .name { text-align: center; font-size: .78em; font-weight: 700; color: var(--muted); margin-top: .5em; letter-spacing: .02em; }
.s-cloud .in .t { font-weight: 800; font-size: .8em; margin-bottom: .4em; color: var(--ink); }
.s-cloud .a .photo { width: 78%; aspect-ratio: 16/9; outline: .18em solid transparent; outline-offset: .1em; animation: cloud-sel var(--d) infinite; }
@keyframes cloud-sel { 0%, 7% { outline-color: transparent; } 8%, 24% { outline-color: #7B2335; } 26%, 100% { outline-color: transparent; } }
.s-cloud .b .photo { width: 78%; aspect-ratio: 16/9; animation: cloud-img var(--d) infinite; }
@keyframes cloud-img { 0%, 66% { opacity: 0; transform: scale(.94); } 68%, 94% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.s-cloud .sky { position: absolute; left: 45%; right: 45%; top: 22%; display: flex; justify-content: center; color: #7B2335; }
.s-cloud .sky svg { width: 2.6em; height: 2.6em; }
.s-cloud .pkt { position: absolute; top: 24%; left: 30%; width: 1.5em; height: 1.5em; border-radius: 50%; background: #7B2335; color: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 .3em .8em -0.2em rgba(123,35,53,.6); animation: cloud-pkt var(--d) infinite; opacity: 0; }
.s-cloud .pkt svg { width: .75em; height: .75em; }
@keyframes cloud-pkt {
  0%, 22% { opacity: 0; left: 34%; top: 32%; }
  24% { opacity: 1; left: 36%; top: 27%; }
  32% { opacity: 1; left: 47.5%; top: 14%; }
  40% { opacity: 1; left: 59%; top: 27%; }
  42%, 100% { opacity: 0; left: 61%; top: 32%; }
}
.s-cloud .mini { position: absolute; left: 5%; right: 5%; top: 30%; background: #141215; color: #F7F5F0; border-radius: .5em; padding: .35em; font-size: .74em;
  box-shadow: 0 .8em 1.6em -0.6em rgba(20,18,21,.6); animation: cloud-mini var(--d) infinite; opacity: 0; }
@keyframes cloud-mini { 0%, 50% { opacity: 0; transform: scale(.95); } 52%, 65% { opacity: 1; transform: none; } 67%, 100% { opacity: 0; } }
.s-cloud .mini .r { display: flex; align-items: center; gap: .5em; padding: .3em .4em; border-radius: .35em; white-space: nowrap; overflow: hidden; color: rgba(247,245,240,.7); }
.s-cloud .mini .r.on { background: #7B2335; color: #fff; font-weight: 700; }
.s-cloud .mini .thumb { width: 1.8em; height: 1.15em; flex: none; }
.s-cloud .mini .src { margin-left: auto; font-size: .85em; opacity: .8; }
.s-cloud .k1 { animation: cloud-cmd var(--d) infinite; }
.s-cloud .k2 { animation: cloud-c var(--d) infinite; }
.s-cloud .k3 { animation: cloud-v var(--d) infinite; }
@keyframes cloud-cmd { 0%, 9%, 16%, 45%, 66%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  10%, 15%, 46%, 65% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
@keyframes cloud-c { 0%, 11%, 14%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  12%, 13% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
@keyframes cloud-v { 0%, 47%, 50%, 51%, 54%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  48%, 49%, 52%, 53% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
.s-cloud .h1 { animation: cloud-h1 var(--d) infinite; }
.s-cloud .h2 { animation: cloud-h2 var(--d) infinite; }
.s-cloud .h3 { animation: cloud-h3 var(--d) infinite; }
.s-cloud .h4 { animation: cloud-h4 var(--d) infinite; opacity: 1; }
@keyframes cloud-h1 { 0%, 9% { opacity: 0; } 10%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes cloud-h2 { 0%, 21% { opacity: 0; } 22%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes cloud-h3 { 0%, 44% { opacity: 0; } 45%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes cloud-h4 { 0%, 66% { opacity: 0; } 67%, 92% { opacity: 1; } 95%, 100% { opacity: 0; } }

/* ───────── 7. Gizli bilgi tanıma (11 sn): şifre kopyalanır → gizlenir → 2 dk sonra silinir ───────── */
.s-secret { --d: 11s; }
.s-secret .win { height: 30%; }
.s-secret .pwtext { border-radius: .2em; padding: 0 .1em; animation: sec-hl var(--d) infinite; font-weight: 600; }
@keyframes sec-hl { 0%, 6% { background: transparent; } 8%, 20% { background: rgba(10,132,255,.25); } 22%, 100% { background: transparent; } }
.s-secret .list { position: absolute; left: 10%; right: 10%; top: 42%; background: #fff; border-radius: 1em; padding: .6em .8em;
  box-shadow: 0 .8em 2em -0.8em rgba(20,18,21,.35); }
.s-secret .list .r { display: flex; align-items: center; gap: .8em; height: 2.3em; font-size: .92em; color: #3B373E; border-bottom: .06em solid #EFECE6; white-space: nowrap; overflow: hidden; }
.s-secret .list .r:last-child { border-bottom: 0; }
.s-secret .list .n { width: 1.6em; font-weight: 900; color: #7B2335; flex: none; }
.s-secret .list .lock { width: 1.6em; flex: none; color: #7B2335; }
.s-secret .list .lock svg { width: .9em; height: .9em; display: block; }
.s-secret .list .sec { animation: sec-row var(--d) infinite; height: 0; opacity: 0; border-bottom-width: 0; }
@keyframes sec-row {
  0%, 21% { height: 0; opacity: 0; border-bottom-width: 0; }
  24%, 82% { height: 3.8em; opacity: 1; border-bottom-width: .06em; }
  86%, 100% { height: 0; opacity: 0; border-bottom-width: 0; }
}
.s-secret .list .sec .what { display: flex; flex-direction: column; gap: .25em; flex: 1; }
.s-secret .list .sec .what b { font-weight: 700; color: var(--ink); }
.s-secret .list .sec .what small { font-size: .75em; color: var(--muted); }
.s-secret .list .sec .bar2 { height: .32em; border-radius: .2em; background: #EFECE6; overflow: hidden; width: 70%; }
.s-secret .list .sec .bar2 i { display: block; height: 100%; background: #7B2335; animation: sec-bar var(--d) infinite; width: 0; }
@keyframes sec-bar { 0%, 24% { width: 100%; } 82%, 100% { width: 0; } }
.s-secret .k1 { animation: sec-cmd var(--d) infinite; }
.s-secret .k2 { animation: sec-c var(--d) infinite; }
@keyframes sec-cmd { 0%, 11%, 18%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  12%, 17% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
@keyframes sec-c { 0%, 13%, 16%, 100% { transform: none; background: #fff; color: var(--ink); box-shadow: 0 .18em 0 rgba(20,18,21,.18); }
  14%, 15% { transform: translateY(.14em); background: #7B2335; color: #fff; box-shadow: 0 .04em 0 rgba(20,18,21,.18); } }
.s-secret .h1 { animation: sec-h1 var(--d) infinite; }
.s-secret .h2 { animation: sec-h2 var(--d) infinite; }
.s-secret .h3 { animation: sec-h3 var(--d) infinite; opacity: 1; }
@keyframes sec-h1 { 0%, 5% { opacity: 0; } 6%, 21% { opacity: 1; } 22%, 100% { opacity: 0; } }
@keyframes sec-h2 { 0%, 22% { opacity: 0; } 23%, 83% { opacity: 1; } 84%, 100% { opacity: 0; } }
@keyframes sec-h3 { 0%, 84% { opacity: 0; } 85%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .s-media .hud, .s-fmt .hud, .s-cloud .mini, .s-cloud .pkt { opacity: 0; }
  .s-fmt .hud .plain { opacity: 1; }
  .s-secret .list .sec { height: 3.8em; opacity: 1; border-bottom-width: .06em; }
  .s-secret .list .sec .bar2 i { width: 60%; }
  .s-secret .h2 { opacity: 1; } .s-secret .h3 { opacity: 0; }
}