/* ---------- kapi ---------- */
body.locked { overflow: hidden; }
.gate {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(70% 60% at 50% 40%, rgba(26, 8, 24, 0.72), rgba(10, 3, 10, 0.92));
  backdrop-filter: blur(16px) saturate(0.9);
  transition: opacity 1s ease, backdrop-filter 1s ease;
}
/* Yatay telefonda (~844x340) kart ~600px; ortalaninca ustten ve alttan tasiyor,
   'Kapiyi ac' ve yanlis cevap uyarisi ekran disinda kaliyordu. Kisa ekranda
   kapi kaydirilabiliyor ve kart ustten basliyor. */
@media (max-height: 660px) {
  .gate { overflow-y: auto; align-items: start; -webkit-overflow-scrolling: touch; }
}
.gate.open { opacity: 0; backdrop-filter: blur(0px); pointer-events: none; }
.gate-card {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  padding: clamp(30px, 5vw, 52px);
  border: 1px solid var(--edge);
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(50, 14, 38, 0.72), rgba(16, 6, 16, 0.8));
  box-shadow: 0 50px 110px -60px #000;
  text-align: center;
  overflow: hidden;
  transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1),
              height 1.2s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.8s ease, box-shadow 0.8s ease;
}
.gate-card.shake { animation: shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-3px); }
  20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}
.gate-title { font-size: clamp(1.9rem, 5.4vw, 2.7rem); line-height: 1.16; margin-bottom: 18px; }
.gate-title .script { font-size: 1.5em; color: #fff; line-height: 1.05; display: inline-block; margin: 0.04em 0; }
.gate-lede { margin: 0 0 22px; color: var(--ink-soft); font-size: 1.02rem; font-style: italic; }
.gate-q { margin: 0 0 18px; font-size: 1.16rem; color: var(--ink); }
.date-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 22px;
  font-family: var(--serif);
}
.date-in span { color: var(--ink-dim); font-size: 1.5rem; }
.date-in input {
  width: 3.1rem;
  padding: 12px 6px;
  border: 1px solid var(--edge);
  border-radius: 11px;
  background: rgba(12, 4, 12, 0.6);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.45rem;
  text-align: center;
  letter-spacing: 0.04em;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.date-in input[data-k="y"] { width: 5.2rem; }
.date-in input::placeholder { color: rgba(253, 238, 242, 0.26); font-size: 0.95rem; letter-spacing: 0.1em; }
.date-in input:focus { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(255, 147, 182, 0.16); }
.gate-msg {
  min-height: 1.5em;
  margin: 16px 0 0;
  font-size: 1rem;
  font-style: italic;
  color: var(--rose);
  opacity: 0;
  transition: opacity 0.4s;
}
.gate-msg.show { opacity: 1; }
.gate-msg.ok { color: #ffd9a0; }
@media (max-width: 420px) {
  .date-in input { font-size: 1.25rem; width: 2.8rem; }
  .date-in input[data-k="y"] { width: 4.6rem; }
}

/* ---------- kapi acilis gosterisi ---------- */
.win {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: hidden;
}
.win[hidden] { display: none; }
.win-rays {
  position: absolute;
  width: 150vmax;
  height: 150vmax;
  opacity: 0;
  transform: scale(0.2);
}
.win-rays i {
  display: block;
  width: 100%;
  height: 100%;
  /* iki farkli acisal periyot: huzmeler esit araliklarla dizilmis bir desen
     yerine dogal bir isima gibi duruyor */
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255, 206, 230, 0.40) 0deg 0.75deg, rgba(255, 206, 230, 0) 0.75deg 6deg),
    repeating-conic-gradient(from 3.5deg,
      rgba(255, 168, 205, 0.20) 0deg 2.2deg, rgba(255, 168, 205, 0) 2.2deg 14.5deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.62) 12%, rgba(0,0,0,0.2) 30%, transparent 48%);
  mask-image: radial-gradient(circle, #000 0%, rgba(0,0,0,0.62) 12%, rgba(0,0,0,0.2) 30%, transparent 48%);
  filter: blur(1.6px);
  animation: rays-spin 50s linear infinite;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
.win-glow {
  position: absolute;
  width: min(760px, 120vw);
  height: min(760px, 120vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 170, 205, 0.5), rgba(255, 110, 165, 0.18) 38%, transparent 68%);
  opacity: 0;
}
.win-body { position: relative; text-align: center; will-change: transform; }
.win-text {
  margin: 0;
  font-size: clamp(3rem, 11vw, 7rem);
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 44px rgba(255, 120, 170, 0.75), 0 0 120px rgba(255, 60, 125, 0.45);
}
.win-sub {
  margin: 0.5em 0 0;
  font-family: var(--sans);
  font-size: clamp(0.72rem, 2vw, 0.9rem);
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: rgba(255, 226, 238, 0.82);
}
/* Kart cercevesi kaliyor, icerigi soluyor: buyuk yazi tam onun ustune oturuyor */
.gate-card > * { transition: opacity 0.6s ease; }
.gate-card.hushed > * { opacity: 0; }
.gate-card.seated {
  width: min(390px, 92vw);
  border-color: rgba(255, 184, 208, 0.45);
  box-shadow: 0 0 70px -16px rgba(255, 110, 165, 0.5), 0 50px 110px -60px #000;
  /* width/height burada da olmali: seated eklendigi anda gecis listesi bu oluyor,
     eksik olunca kart 560x610'dan 390x172'ye animasyonsuz atliyordu */
  transition: width 1.2s cubic-bezier(0.65, 0, 0.35, 1), height 1.2s cubic-bezier(0.65, 0, 0.35, 1),
              border-color 0.8s ease, box-shadow 0.8s ease;
}