/* =========================================================
   Tek ekran, adim adim ilerleyen mektup.
   Sayfa kaydirilmaz. Arka plan: cogaltilmis kedi videosu.
   Radius kurali: butonlar pill, kart ve alanlar 14px.
   ========================================================= */

:root {
  --bg:        #0c0b0f;
  --paper:     #faf7f3;
  --paper-2:   #f1ebe4;
  --ink:       #191520;
  --ink-dim:   #6c6472;
  --accent:    #c94063;   /* buton zemini: beyaz yazi ile 4.8:1 */
  --accent-hi: #b0304f;
  --accent-ink:#a32f4c;   /* kagit uzerine yazilan vurgu: 5.8:1 */

  --radius: 14px;
  --flap: clamp(84px, 16vw, 138px);
  /* kedi videosunun kirpmasi: cerceveyi ve filigrani disarida birakiyor */
  --kedi-kirp: scale(1.22) translateY(2.4%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;                 /* sayfa kaymaz, mektup ilerler */
}

/* ---------------- Kedi video duvari ---------------- */

.videowall {
  position: fixed;
  inset: -2vmin;
  z-index: 0;
  display: grid;
  gap: 2px;
  pointer-events: none;
}

/* Karonun icinde video buyutulup yukari kaydiriliyor: kenardaki parilti
   cercevesi ve sag alttaki filigran disarida kaliyor, sadece kediler geliyor. */
.videowall .karo {
  position: relative;
  overflow: hidden;
  opacity: 0.5;
  filter: saturate(0.8) contrast(1.04);
}
.videowall .karo:nth-child(3n)   { opacity: 0.3; transform: scaleX(-1); }
.videowall .karo:nth-child(4n+1) { opacity: 0.62; }
.videowall .karo:nth-child(5n)   { transform: scaleX(-1); }

.videowall video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: var(--kedi-kirp);
}

.videowall-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(115% 85% at 50% 50%, rgba(12, 11, 15, 0.52) 0%, rgba(12, 11, 15, 0.86) 66%, #0c0b0f 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Sahne ve mektup ---------------- */

.stage {
  position: relative;
  z-index: 10;
  height: 100dvh;
  display: grid;
  place-items: center;
  /* acik duran kapak kartin ustunde yer kapliyor */
  padding: calc(var(--flap) + 22px) 24px 24px;
}

/* Zarf: kapak + icindeki mektup */
.envelope {
  position: relative;
  width: min(620px, 100%);
  perspective: 1500px;
}

/* Kapak: acikken arkaya katli (rotateX 180), kapaninca one iner (rotateX 0) */
.flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--flap);
  z-index: 0;
  transform-origin: top center;
  transform: rotateX(180deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #efe7dd 0%, #e3d8cb 100%);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45));
  transition: transform 0.95s var(--ease), z-index 0s linear 0.5s;
}

/* Kapanis iki adimda: once zarfin yuzu asagidan kayip mektubu tamamen
   orter, sonra kapak ucundan tutulup asagi iner ve muhurlenir. */
.envelope.is-closed .flap {
  transform: rotateX(0deg);
  z-index: 6;
  transition: z-index 0s linear 0s;
  animation: flapClose 1.15s cubic-bezier(0.45, 0.02, 0.2, 1) 0.45s forwards;
}

@keyframes flapClose {
  0%   { transform: rotateX(180deg); }
  15%  { transform: rotateX(194deg); }
  60%  { transform: rotateX(-8deg); }
  80%  { transform: rotateX(3.5deg); }
  92%  { transform: rotateX(-1.5deg); }
  100% { transform: rotateX(0deg); }
}

/* Zarfin on yuzu: normalde kartin altinda bekliyor, kapanirken yukari
   kayip mektubun tamamini ortuyor. .letter overflow:hidden oldugu icin
   bekleme halinde disari tasmiyor. */
.letter__yuz {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: linear-gradient(180deg, #f2eade 0%, #e4d8c7 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transform: translateY(100%);
  transition: transform 0.6s var(--ease);
}

/* alt kapagin kivrimi, zarf yuzu duz bir dikdortgen gibi durmasin */
.letter__yuz::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(90, 65, 35, 0.05), rgba(90, 65, 35, 0.13));
  clip-path: polygon(0 100%, 50% 30%, 100% 100%);
}
.letter__yuz::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(90, 65, 35, 0.07), transparent 26%,
                                     transparent 74%, rgba(90, 65, 35, 0.07));
}

.envelope.is-closed .letter__yuz { transform: translateY(0); }

/* Kapak otururken kagit hafifce iceri bastiriliyor */
.letter { transition: transform 0.5s var(--ease); }
.envelope.is-closed .letter { transform: translateY(4px); transition-delay: 1s; }

/* Muhur: yalnizca kapak kapaliyken gorunur */
.flap__wax {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #e4657f 0%, var(--accent) 46%, #96233d 100%);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
}
.envelope.is-closed .flap__wax {
  opacity: 1;
  transform: scale(1);
  transition-delay: 1.17s;   /* kapak yerine oturdugu an */
}

.letter {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: calc(100dvh - var(--flap) - 46px);
  display: flex;
  flex-direction: column;
  padding: 34px 40px 28px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 34px 90px rgba(0, 0, 0, 0.62),
    0 4px 18px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  animation: enter 0.9s var(--ease) both;
}

/* kagit dokusu ve hafif kivrim golgesi */
.letter::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, transparent 6%, transparent 94%, rgba(0, 0, 0, 0.05) 100%);
}

/* Muhurlendikten sonra zarf once toparlanip kuculuyor,
   sonra kuculerek yukari dogru uzaklasiyor. */
.envelope.is-gone {
  animation: envelopeGone 1.1s cubic-bezier(0.5, 0, 0.75, 0) forwards;
  pointer-events: none;
}

@keyframes envelopeGone {
  0%   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
  26%  { transform: translateY(14px) scale(0.88) rotate(-1.2deg); opacity: 1; }
  100% { transform: translateY(-125vh) scale(0.32) rotate(-8deg); opacity: 0; }
}

.gate__baslik {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 4.4vw, 2.2rem);
  line-height: 1.16;
  letter-spacing: -0.028em;
  font-weight: 700;
}
.gate__baslik em {
  font-style: italic;
  color: var(--accent-ink);
  padding-bottom: 2px;
}

.gate__alt {
  margin: 0;
  max-width: 52ch;
  color: #4a4351;
  font-size: 1.03rem;
  line-height: 1.7;
}

/* ---------------- Butonlar ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 13px 26px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hi); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0) scale(0.98); }

.btn--ghost {
  background: transparent;
  border-color: rgba(25, 21, 32, 0.22);
  color: #3c3644;
}
.btn--ghost:hover { background: rgba(25, 21, 32, 0.06); transform: translateY(-2px); }
.btn--ghost:active { transform: translateY(0) scale(0.98); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------- Tarih formu ---------------- */

.dateform {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr 1fr;
  gap: 12px;
  align-items: end;
  margin-top: 24px;
}
.dateform > .btn { grid-column: 1 / -1; margin-top: 6px; }

.field { display: grid; gap: 7px; }

.field label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #57505f;
}

.field input,
.field select {
  width: 100%;
  padding: 12px 13px;
  border-radius: 10px;
  border: 1px solid rgba(25, 21, 32, 0.24);
  background: #fffdfb;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input::placeholder { color: #8d8695; }
.field input:hover,
.field select:hover { border-color: rgba(25, 21, 32, 0.42); }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(210, 74, 104, 0.16);
}

.msg {
  min-height: 24px;
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--ink-dim);
}
.msg[data-state="error"] { color: #b32b46; }
.msg[data-state="ok"]    { color: var(--accent-ink); }

.letter.is-wrong .dateform { animation: shake 0.45s var(--ease); }

/* ---------------- Sayac ---------------- */

.counter {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 22px 0 20px;
}

.counter__cell { display: grid; gap: 4px; }

.counter__num {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: clamp(1.4rem, 4.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.counter__lbl {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ---------------- Mektup: tek sayfa eski not ---------------- */

.scene--not { width: min(540px, 100%); }

.not { display: grid; justify-items: center; gap: 16px; }

.not__kagit {
  --satir: 30px;              /* cizgi araligi, satir yuksekligiyle ayni */
  width: 100%;
  max-height: calc(100dvh - 150px);
  overflow-y: auto;
  padding: 30px 34px 34px;
  border-radius: 3px;
  transform: rotate(-0.5deg);
  color: #2f2a44;
  /* Ink Free noktasiz i'yi "u" gibi cizdigi icin once Segoe Script geliyor */
  font-family: "Segoe Script", "Segoe Print", "Bradley Hand", "Snell Roundhand",
               "Brush Script MT", cursive;
  font-size: 1.18rem;
  line-height: var(--satir);
  /* eskimis kagit: sararmis lekeler, kenar cizgisi ve defter cizgileri */
  background-color: #f6efdd;
  background-image:
    radial-gradient(60% 45% at 12% 8%, rgba(176, 137, 74, 0.13), transparent 70%),
    radial-gradient(50% 40% at 88% 26%, rgba(150, 110, 60, 0.11), transparent 70%),
    radial-gradient(70% 50% at 70% 96%, rgba(160, 120, 65, 0.14), transparent 70%),
    linear-gradient(90deg, rgba(150, 60, 60, 0.16) 0 1px, transparent 1px),
    repeating-linear-gradient(
      180deg,
      transparent 0 calc(var(--satir) - 1px),
      rgba(90, 105, 140, 0.20) calc(var(--satir) - 1px) var(--satir)
    );
  background-position: 0 0, 0 0, 0 0, 26px 0, 0 12px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 26px 60px rgba(0, 0, 0, 0.55),
    0 2px 10px rgba(0, 0, 0, 0.35);
  animation: enter 0.7s var(--ease) both;
}

.not__kagit p { margin: 0 0 var(--satir); }
.not__kagit p:last-child { margin-bottom: 0; }

.not__tarih {
  margin: 0 0 var(--satir);
  text-align: right;
  color: #6a6180;
  font-size: 0.95rem;
}

/* Kapanis satiri: buyuk harfli, vurgulu */
.not__final {
  color: var(--accent-ink);
  line-height: 1.35;
}

.not__imza {
  margin-top: var(--satir);
  text-align: right;
  font-size: 1.4rem;
  color: var(--accent-ink);
}

/* Bu dugme kagidin uzerinde degil, koyu zeminin uzerinde duruyor */
.not .btn--ghost {
  border-color: rgba(255, 255, 255, 0.3);
  color: #efe9e4;
}
.not .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ---------------- Bulmaca ---------------- */

.stage.is-flat { padding: 24px; }

.puzzle { width: min(430px, 100%); }

.puzzle__card {
  padding: 26px 26px 22px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 34px 90px rgba(0, 0, 0, 0.62);
  animation: enter 0.7s var(--ease) both;
}

.puzzle__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.puzzle__title {
  margin: 0;
  max-width: 22ch;
  font-size: 1.45rem;
  line-height: 1.15;
  letter-spacing: -0.028em;
  font-weight: 700;
}

/* Tahtanin altindaki aciklama satiri */
.puzzle__sub {
  margin: 14px 0 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #5a5361;
}

.puzzle__thumb {
  flex: none;
  width: 52px;
  height: 69px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid rgba(25, 21, 32, 0.18);
  filter: saturate(0.9);
}

.board {
  position: relative;
  width: min(100%, calc((100dvh - 330px) * 0.75));
  min-width: 210px;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: #ded6cd;
  touch-action: manipulation;
}

.tile {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% / 3);
  height: calc(100% / 4);
  padding: 0;
  border: 0;
  background-repeat: no-repeat;
  background-size: 300% 400%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.2s var(--ease);
}
.tile:hover { box-shadow: inset 0 0 0 2px rgba(210, 74, 104, 0.75); }

/* Eksik kose parcasi: yalnizca bulmaca cozulunce yerine oturur.
   Kendi hucresinde durdugu icin oraya kayan parcanin tiklamasini yutmamali. */
.tile--last {
  opacity: 0;
  cursor: default;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.board.is-solved .tile--last { opacity: 1; }
.board.is-solved .tile { box-shadow: none; cursor: default; }

.puzzle__nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.puzzle__moves {
  font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  margin-right: auto;
}

.puzzle__nav .btn { padding: 11px 22px; font-size: 14px; }

.puzzle__card.no-image .board,
.puzzle__card.no-image .puzzle__thumb { display: none; }

/* ---------------- Kacan "Evet" dugmeleri ---------------- */

.tease { width: min(430px, 100%); }

.tease__card {
  padding: 30px 26px 26px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 34px 90px rgba(0, 0, 0, 0.62);
  animation: enter 0.7s var(--ease) both;
}

.tease__title {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 4.6vw, 1.9rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.tease__msg {
  margin: 0;
  min-height: 26px;
  font-size: 1rem;
  color: #5a5361;
}

/* Dugmeler bu alanin ust ve alt seridinde dolasiyor, ortasi kediye ayrildi */
.tease__field {
  position: relative;
  height: 250px;
  margin-top: 18px;
}

.kitty-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.kitty {
  display: block;
  width: 118px;
  height: auto;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.16));
  animation: kittyBob 2.6s ease-in-out infinite;
}

.kitty__bow {
  transform-box: fill-box;
  transform-origin: center;
  animation: kittyBow 2.6s ease-in-out infinite;
}

.kitty__eye {
  transform-box: fill-box;
  transform-origin: center;
  animation: kittyBlink 4.4s steps(1, end) infinite;
}

@keyframes kittyBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7%); }
}

@keyframes kittyBow {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(5deg); }
}

@keyframes kittyBlink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.12); }
}

.tease__btn {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 116px;
  transform: var(--yer, translate(0, 0));
  transition: transform 0.42s var(--ease), background-color 0.25s var(--ease);
}
.tease__btn:hover { transform: var(--yer) scale(1.04); }
.tease__btn:active { transform: var(--yer) scale(0.97); }

/* Cikis: once dugmeler kucululup kayboluyor, kedi bir sevinip
   buyuyor, sonra kartin tamami suzulerek gidiyor. */
.tease__card.is-cikis { animation: teaseCikis 0.55s var(--ease) 0.5s forwards; }

.tease__card.is-cikis .tease__btn {
  opacity: 0;
  transform: var(--yer) scale(0.35);
  transition: transform 0.45s var(--ease), opacity 0.35s var(--ease);
}

.tease__card.is-cikis .kitty { animation: kittySevinc 0.7s var(--ease) both; }

@keyframes teaseCikis {
  to { opacity: 0; transform: translateY(-16px) scale(0.95); }
}

@keyframes kittySevinc {
  0%   { transform: scale(1) rotate(0deg); }
  45%  { transform: scale(1.24) rotate(-6deg); }
  75%  { transform: scale(1.1) rotate(4deg); }
  100% { transform: scale(1.14) rotate(0deg); }
}

/* ---------------- Dort kare menu ---------------- */

.menu { width: min(430px, 100%); }

.menu__card,
.scene__card {
  padding: 28px 26px 24px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 34px 90px rgba(0, 0, 0, 0.62);
  animation: enter 0.7s var(--ease) both;
}

.menu__title,
.scene__title {
  margin: 0 0 6px;
  font-size: clamp(1.45rem, 4.4vw, 1.85rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.menu__sub,
.scene__text {
  margin: 0;
  font-size: 0.96rem;
  color: #5a5361;
}

.menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 20px;
}

.kare {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  aspect-ratio: 1 / 1;
  padding: 12px;
  border: 1px solid rgba(25, 21, 32, 0.16);
  border-radius: 10px;
  background: #fffdfb;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.kare:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 10px 24px rgba(25, 21, 32, 0.12);
}
.kare:active { transform: translateY(0) scale(0.98); }

.kare__ikon { width: 52px; height: 52px; image-rendering: pixelated; }

.kare__ad { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------------- Gizemli kutu ---------------- */

.gizem {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 1px dashed rgba(210, 74, 104, 0.55);
  border-radius: 10px;
  background: #fffdfb;
  font: inherit;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  animation:
    gizemGel 0.6s var(--ease) both,
    gizemNabiz 2.6s ease-in-out 0.6s infinite;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.gizem:hover { border-style: solid; transform: translateY(-2px); }
.gizem:active { transform: translateY(0) scale(0.99); }

.gizem__ikon {
  flex: none;
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
  animation: gizemSalla 2.2s ease-in-out infinite;
}

.gizem__ad { font-size: 0.92rem; font-weight: 600; }

@keyframes gizemGel {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

@keyframes gizemNabiz {
  0%, 100% { box-shadow: 0 0 0 0 rgba(210, 74, 104, 0); }
  50%      { box-shadow: 0 0 0 7px rgba(210, 74, 104, 0.10); }
}

@keyframes gizemSalla {
  0%, 82%, 100% { transform: rotate(0deg); }
  86%           { transform: rotate(-9deg); }
  92%           { transform: rotate(8deg); }
  96%           { transform: rotate(-4deg); }
}

/* Ilk ekrandaki karsilama fotografi */
.giris-foto {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 44dvh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(25, 21, 32, 0.14);
  margin: 0 auto 16px;
}

/* Kutudan firlayan surpriz */
.son-foto {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 46dvh;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid rgba(25, 21, 32, 0.14);
  margin: 0 auto 16px;
  transform-origin: center bottom;
  /* Yay hissi keyframe'lerdeki asma-ve-oturma ile veriliyor,
     zamanlama egrisi duz ease-out kaliyor. */
  animation: booFirla 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.boo__yazi {
  color: var(--accent-ink);
  animation: booSalla 0.7s var(--ease) 0.34s both;
}

@keyframes booFirla {
  0%   { opacity: 0; transform: scale(0.16) rotate(-14deg) translateY(40px); }
  55%  { opacity: 1; transform: scale(1.09) rotate(3deg) translateY(0); }
  75%  { transform: scale(0.97) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes booSalla {
  0%   { opacity: 0; transform: scale(0.7); }
  45%  { opacity: 1; transform: scale(1.14) rotate(-2.5deg); }
  70%  { transform: scale(0.98) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---------------- Buket ve cicek yagmuru ---------------- */

.scene { width: min(430px, 100%); }

.scene__card { text-align: center; }

.scene__card .btn { margin-top: 20px; }

.scene__nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.buket {
  display: block;
  width: 196px;
  height: 196px;
  margin: 0 auto 16px;
  image-rendering: pixelated;
  animation: kittyBob 3.2s ease-in-out infinite;
}

.yagmur {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.cicek {
  position: absolute;
  top: -14vh;
  image-rendering: pixelated;
  animation-name: cicekDus;
  animation-timing-function: linear;
  animation-fill-mode: both;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.28));
}

@keyframes cicekDus {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translate3d(var(--kay, 0), 126vh, 0) rotate(var(--don, 180deg)); opacity: 0; }
}

/* ---------------- Film seritleri ---------------- */

#galleryScene { width: min(720px, 100%); }

.galeri {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}

/* Film bandi: koyu zemin, ustunde ve altinda perforasyon delikleri */
.serit {
  position: relative;
  padding: 13px 0;
  background: #17141c;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.serit::before,
.serit::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 7px;
  background-image: repeating-linear-gradient(
    to right,
    var(--paper-2) 0 7px,
    transparent 7px 17px
  );
  pointer-events: none;
  z-index: 2;
}
.serit::before { top: 3px; }
.serit::after  { bottom: 3px; }

.serit__ray {
  display: flex;
  gap: 4px;
  width: max-content;
  animation-name: seritKay;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.serit:hover .serit__ray { animation-play-state: paused; }

@keyframes seritKay {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.kare-foto {
  flex: none;
  width: 116px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  overflow: hidden;
  background: #0f0d12;
  cursor: pointer;
  transition: filter 0.25s var(--ease);
}
.kare-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.kare-foto:hover { filter: brightness(1.12); }

/* Tam ekran fotograf */
.buyutec {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  gap: 16px;
  padding: 28px;
  background: rgba(9, 8, 11, 0.92);
  cursor: zoom-out;
  animation: enter 0.3s var(--ease) both;
}

.buyutec img {
  max-width: min(92vw, 900px);
  max-height: 82dvh;
  border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.buyutec__ipucu {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------------- Hareket ---------------- */

@keyframes enter {
  from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}

/* ---------------- Mobil ---------------- */

@media (max-width: 620px) {
  body { font-size: 16px; }
  .stage { padding: 16px; }
  .letter { padding: 26px 22px 22px; max-height: calc(100dvh - 32px); }
  .dateform { grid-template-columns: 1fr 1fr; }
  /* Mobilde ay ustte tam genislik, gun ile yil altta yan yana */
  .dateform .field:nth-child(2) { grid-column: 1 / -1; order: -1; }
  .counter { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .puzzle__card { padding: 20px 18px 18px; }
  .tease__card { padding: 24px 18px 20px; }
  .tease__field { height: 262px; }
  .tease__btn { min-width: 100px; padding: 12px 16px; }
  .kitty { width: 88px; }
  .board { width: min(100%, calc((100dvh - 300px) * 0.75)); }
}

@media (max-height: 620px) {
  :root { --flap: 62px; }
  .letter { padding: 22px 26px 18px; }
}

/* ---------------- Erisilebilirlik ---------------- */

@media (prefers-reduced-motion: reduce) {
  .letter { animation: none; }
  .flap, .flap__wax, .letter__yuz { transition: none; }
  .tease__btn, .tile { transition: none; }
  .kitty, .kitty__bow, .kitty__eye { animation: none; }
  /* Seritler kaymasin, elle kaydirilsin */
  .serit { overflow-x: auto; }
  .serit__ray { animation: none; }
  .gizem, .gizem__ikon { animation: none; }
  .son-foto, .boo__yazi { animation: none; opacity: 1; transform: none; }
  .btn:hover, .btn:active { transform: none; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}