/* ---------- cinayet dosyası: "Pixel Paşa cinayeti" (js/mystery.js çiziyor) ---------- */
.mystery { overflow-x: clip; }
.mystery__stage { padding: 0 var(--pad) 16vh; }
.mys { display: grid; gap: 28px; max-width: 1500px; }
.mys [hidden] { display: none !important; }
.mys__h { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -.02em; font-size: clamp(20px, 2.2vw, 30px); line-height: 1; }

/* olay yeri: beton zemin, fayans derzleri, lamba ışığı, bir de çay lekesi */
.mys__crime { position: relative; scroll-margin-top: 84px; }
.mys__scene {
  position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; isolation: isolate; container-type: inline-size;
  background:
    radial-gradient(ellipse 60% 55% at 52% 48%, rgba(255, 248, 230, .09), transparent 70%),
    radial-gradient(ellipse 9% 6% at 27% 71%, rgba(150, 96, 40, .3), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .42) 0 2px, transparent 2px 12.5%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .42) 0 2px, transparent 2px 16.667%),
    radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 9px 9px,
    radial-gradient(rgba(0, 0, 0, .3) 1px, transparent 1.7px) 4px 5px / 13px 13px,
    #23272e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 0 90px rgba(0, 0, 0, .8);
}

/* polis şeridi: iki köşeyi keser, hafifçe dalgalanır */
.mys__tape {
  --r: -33deg; --th: clamp(18px, 5.5cqi, 34px);
  position: absolute; z-index: 2; left: -12.5%; top: calc(15% - var(--th) / 2); width: 60%; height: var(--th);
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  font: 700 clamp(8px, 1.9cqi, 13px)/1 var(--mono); letter-spacing: .18em; color: #0c0b0a;
  background: linear-gradient(#0c0b0a 0 2px, transparent 2px calc(100% - 2px), #0c0b0a calc(100% - 2px)), #ffd400;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .55);
  transform: rotate(var(--r));
  animation: mys-flutter 3.4s ease-in-out infinite;
}
.mys__tape--b { --r: -30deg; left: 55%; top: calc(85% - var(--th) / 2); animation-duration: 4.1s; animation-delay: -1.6s; }
.mys__scene.is-off .mys__tape { animation-play-state: paused; }
@keyframes mys-flutter {
  0%, 100% { transform: rotate(var(--r)); }
  35% { transform: rotate(calc(var(--r) + .9deg)) translateY(-1.5px) skewX(-2deg); }
  70% { transform: rotate(calc(var(--r) - .5deg)) translateY(1px) skewX(1.2deg); }
}

/* tebeşir: filtre sabit, sadece çizgi bir kez akar */
.mys__chalk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; }
.is-drawn .mys__chalk { opacity: 1; }
.mys__chalk path { stroke: #f2efe8; stroke-width: 2.8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.7s cubic-bezier(.5, .1, .3, 1); }
.mys__chalk .mys__dust { stroke-width: 9; opacity: .09; }
.mys__chalk .mys__pad path { stroke-width: 2.2; transition-duration: .8s; transition-delay: 1.4s; }
.is-drawn .mys__chalk path { stroke-dashoffset: 0; }

/* sarı delil işaretleri */
.mys__tent {
  position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: clamp(38px, 7.5cqi, 58px); aspect-ratio: 1; translate: -50% -50%; perspective: 260px;
  opacity: 0; scale: .2;
  transition: opacity .25s, scale .55s cubic-bezier(.34, 1.7, .5, 1);
  transition-delay: calc(1.3s + var(--i) * .1s);
}
.is-drawn .mys__tent { opacity: 1; scale: 1; }
.mys__tent::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -4%; height: 16%; z-index: -1; border-radius: 50%; background: rgba(0, 0, 0, .55); filter: blur(3px); }
.mys__tent-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: rotate .6s var(--ease-out), translate .25s var(--ease-out); }
.mys__tent:hover .mys__tent-in { translate: 0 -4px; }
.mys__tent.is-found .mys__tent-in { rotate: y 180deg; }
.mys__tent-in b, .mys__tent-in em {
  position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 12%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(#0c0b0a 0 9%, transparent 9%), linear-gradient(90deg, #ffe14d 50%, #f0b800 50%);
  font: 900 clamp(15px, 3.4cqi, 26px)/1 var(--display); font-style: normal; color: #0c0b0a;
}
.mys__tent-in em { rotate: y 180deg; background: linear-gradient(#0c0b0a 0 9%, transparent 9%), linear-gradient(90deg, #f0b800 50%, #ffe14d 50%); }
.mys__tent.is-found { animation: mys-pop .5s var(--ease-out); }
@keyframes mys-pop { 40% { scale: 1.35; } }

/* ÇÖZÜLDÜ damgası */
.mys__stamp {
  position: absolute; z-index: 5; left: 50%; top: 50%; translate: -50% -50%; rotate: -12deg; opacity: 0; pointer-events: none;
  font: 900 12cqi/.9 var(--display); letter-spacing: .02em; color: #ff3b30; white-space: nowrap;
  padding: .12em .3em; border: .07em solid currentColor; border-radius: .12em; outline: .035em solid currentColor; outline-offset: .07em;
  background: rgba(255, 59, 48, .12);
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 56%, #000 70%); mask-image: radial-gradient(circle at 30% 40%, #000 55%, rgba(0, 0, 0, .55) 56%, #000 70%);
}
.is-stamped .mys__stamp { animation: mys-slam .42s cubic-bezier(.55, 0, .9, .3) forwards; }
.mys__scene.is-stamped { animation: mys-thud .4s .38s; }
@keyframes mys-slam { from { opacity: 0; scale: 2.6; rotate: -28deg; } 55% { opacity: 1; } to { opacity: .95; scale: 1; rotate: -12deg; } }
@keyframes mys-thud { 20% { translate: -6px 4px; } 45% { translate: 5px -3px; } 70% { translate: -3px 2px; } }

/* ayak bileği etiketi */
.mys__tag {
  position: relative; z-index: 4; width: min(100% - 24px, 360px); margin: -22px 0 0 14px; rotate: -1.6deg;
  padding: 14px 16px 14px 34px; background: #efe9df; color: #1b140e; border-radius: 4px 12px 12px 4px;
  font-size: 14px; line-height: 1.4; box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
}
.mys__tag::before { content: ''; position: absolute; left: 12px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px rgba(27, 20, 14, .35); }
.mys__tag b { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }

/* delil kaydı */
.mys__side { display: grid; gap: 22px; align-content: start; }
.mys__log-head, .mys__lineup-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 20px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mys__log-head { margin-bottom: 16px; }
.mys__count { color: var(--accent); font-weight: 600; }
.mys__slots { display: grid; gap: 12px; }
.mys__slot { min-height: 76px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px dashed var(--line); border-radius: 10px; color: var(--mute); }
.mys__empty { font: 700 20px/1 'Caveat', cursive; }
.mys__slot.is-found { display: block; padding: 0; border: 0; }
.mys__clue { position: relative; padding: 12px 16px 12px; background: #f3ead8; color: #1b140e; border-radius: 3px; rotate: var(--r); box-shadow: 0 10px 22px rgba(0, 0, 0, .4); animation: mys-drop .5s var(--ease-out) both; }
.mys__clue::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; translate: -50% 0; rotate: -3deg; background: rgba(255, 228, 150, .55); }
.mys__clue .mono, .mys__verdict .mono { color: #8a2a12; font-size: 11px; }
.mys__clue p { margin-top: 2px; font: 700 clamp(22px, 1.9vw, 27px)/1.1 'Caveat', cursive; }
.mys__clue code, .mys__confess code { font: 600 .62em var(--mono); background: rgba(27, 20, 14, .09); padding: .12em .4em; border-radius: 4px; white-space: nowrap; }
.mys__slot.is-flash .mys__clue { animation: mys-flash .6s var(--ease-out); }
@keyframes mys-drop { from { opacity: 0; translate: 0 -16px; scale: 1.12; rotate: calc(var(--r, 0deg) - 7deg); } }
@keyframes mys-flash { 30% { scale: 1.05; box-shadow: 0 0 0 4px var(--accent), 0 10px 22px rgba(0, 0, 0, .4); } }

/* itiraf */
.mys__verdict { --r: -1.2deg; position: relative; display: grid; gap: 10px; justify-items: start; padding: 20px 20px 22px; background: #f3ead8; color: #1b140e; border-radius: 4px; rotate: var(--r); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); animation: mys-drop .6s .5s var(--ease-out) both; }
.mys__gut { font: 700 22px/1.1 'Caveat', cursive; color: #b3261e; }
.mys__confess { font: 700 clamp(26px, 2.3vw, 34px)/1.08 'Caveat', cursive; }
.mys__again { --bc: #1b140e; color: #1b140e; margin-top: 6px; }
.mys__again i { color: #f3ead8; }
.mys__again:hover { color: #f3ead8; }
.mys__again:hover i { background: #f3ead8; color: #1b140e; }

/* şüpheliler: boy çizelgesi önünde vesikalık */
.mys__lineup { display: grid; gap: 18px; }
.mys__hint { font: 700 clamp(20px, 1.8vw, 26px)/1.1 'Caveat', cursive; color: #ffb199; }
.mys__hint.is-nudge { animation: mys-shake .45s; }
.mys__suspects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mys__sus { display: grid; gap: 10px; align-content: start; transition: opacity .4s; }
.mys__sus.is-cleared { animation: mys-shake .45s; }
.is-solved .mys__sus:not(.is-guilty) { opacity: .55; }
@keyframes mys-shake { 15% { translate: -8px 0; } 35% { translate: 7px 0; } 55% { translate: -5px 0; } 75% { translate: 3px 0; } }
.mys__mug { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: linear-gradient(#1e232b, #14181e); box-shadow: inset 0 0 0 1px var(--line); transition: filter .4s; }
.is-locked .mys__mug { filter: grayscale(1) brightness(.7); }
.mys__chart { position: absolute; inset: 6% 0 0; display: grid; grid-template-rows: repeat(6, 1fr); }
.mys__chart i { padding: 3px 0 0 6px; border-top: 1px solid rgba(233, 237, 242, .24); font: 600 9px/1 var(--mono); font-style: normal; color: rgba(233, 237, 242, .5); background: linear-gradient(rgba(233, 237, 242, .1), rgba(233, 237, 242, .1)) 0 50% / 100% 1px no-repeat; }
.mys__face { position: absolute; left: 50%; bottom: 0; width: 84%; translate: -50% 0; }
.mys__mini-stamp {
  position: absolute; z-index: 2; left: 50%; top: 42%; translate: -50% -50%; rotate: -12deg; display: none;
  padding: 6px 10px; border: 3px solid currentColor; border-radius: 6px; background: rgba(13, 15, 18, .72);
  font: 900 clamp(13px, 1.5vw, 19px)/1 var(--display); letter-spacing: .04em; white-space: nowrap; color: #ff3b30;
}
.is-cleared .mys__mini-stamp, .is-guilty .mys__mini-stamp { display: block; animation: mys-slam .36s cubic-bezier(.55, 0, .9, .3) both; }
.mys__plate { display: grid; gap: 2px; padding: 10px 12px; background: #0a0b0d; border: 1px solid var(--line); border-radius: 8px; }
.mys__plate .mono { font-size: 10px; color: var(--mute); }
.mys__plate b { font: 900 clamp(14px, 1.4vw, 19px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mys__plate small { font: 700 19px/1.05 'Caveat', cursive; color: #ffb199; }
.mys__accuse {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  border: 1px solid #ff5a3c; border-radius: 99px; font-weight: 700; font-size: 15px; color: #ffd9cf; transition: background-color .25s, color .25s;
}
.mys__accuse::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ff5a3c; }
.mys__accuse:not([aria-disabled="true"]):hover { background: #ff5a3c; color: #0d0f12; }
.mys__accuse:not([aria-disabled="true"]):hover::before { background: #0d0f12; }
.mys__accuse[aria-disabled="true"] { border-style: dashed; border-color: var(--line); color: var(--mute); }
.mys__accuse[aria-disabled="true"]::before { background: currentColor; }
.is-guilty .mys__accuse { border: 1px solid #ff3b30; color: #ff6b5e; }
.mys__alibi { --r: 0deg; padding-left: 10px; border-left: 2px solid #ff3b30; font-size: 14px; line-height: 1.4; color: #ffc9bd; animation: mys-drop .4s var(--ease-out) both; }

@media (min-width: 760px) { .mys__suspects { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 900px) {
  .mys { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px 48px; align-items: start; }
  .mys__lineup { grid-column: 1 / -1; margin-top: 2vh; }
}

/* azaltılmış harekette gecikmeler de sıfır: her şey anında yerine otursun */
.reduce-motion .mys, .reduce-motion .mys * { transition-delay: 0s !important; animation-delay: 0s !important; }