/* ══════════ Giriş kapısı ("kulüp kapısı + kesik") ══════════
   Fotoğraf sahne: kapı fotoğrafı ekranı kaplar, kapı bölgesi aynı fotoğraftan
   iki parçaya kesilip üstüne bindirilir. Kapı ayrılınca arkasında kulüp içi görünür.
   Katmanlar: kamera (fotoğraf, neon, kapı) → karartma → efekt canvas'ı → ışık dalgası → butonlar.
   Hareketler yalnızca transform/opacity: telefonda akıcı kalsın. */

.gate { display: none; }
html.gate-on { overflow: hidden; }
html.gate-on .gate {
  display: block;
  position: fixed; inset: 0; z-index: 300;
  overflow: hidden;
  background: #030202;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  --neon: 1;        /* neonun anlık parlaklığı (JS günceller) */
  /* fotoğraf ve kapı konumları JS'ten gelir */
  --img-x: 0px; --img-y: 0px; --img-w: 100vw; --img-h: 100vh;
  --dx: 40vw; --dy: 30vh; --dw: 20vw; --dh: 40vh;
}

/* ── Kamera: yaklaşma (zoom) burada, bas sarsıntısı içteki katmanda ── */
.gate-cam {
  position: absolute; inset: 0;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transition: transform 1.05s cubic-bezier(0.45, 0, 0.2, 1);
  will-change: transform;
}
/* Basla gelen hafif titreşimi JS verir (şarkının gerçek baslarına göre) */
.gate-shake { position: absolute; inset: 0; }
@keyframes cam {
  0% { transform: translate3d(0, 0, 0); }
  6% { transform: translate3d(0.6px, 1px, 0); }
  14% { transform: translate3d(-0.5px, -0.3px, 0); }
  24% { transform: translate3d(0.2px, 0.2px, 0); }
  40%, 100% { transform: translate3d(0, 0, 0); }
}
.gate.shake .gate-shake { animation: hit 0.32s cubic-bezier(0.3, 0.8, 0.3, 1) 1; }
@keyframes hit {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  18% { transform: translate3d(-3px, 4px, 0) scale(0.994); }
  40% { transform: translate3d(2px, -2px, 0) scale(1.002); }
  70% { transform: translate3d(-1px, 1px, 0); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* ── Fotoğraf ── */
.gate-photo {
  position: absolute; left: var(--img-x); top: var(--img-y); width: var(--img-w); height: var(--img-h);
  max-width: none;
  filter: brightness(1.12) contrast(1.06) saturate(1.05);
  opacity: 0; transition: opacity 0.9s ease;
}
.gate.ready .gate-photo { opacity: 1; }

/* ── Neon tabela ── */
.neon {
  position: absolute; z-index: 3;
  left: calc(var(--dx) + var(--dw) / 2); top: var(--neon-top, 10%);
  width: var(--neon-w, 320px);
  translate: -50% 0;
  opacity: 0; transition: opacity 1.2s ease 0.3s, transform 0.7s cubic-bezier(0.5, 0, 0.2, 1);
}
.gate.ready .neon { opacity: 1; }
/* Tabelanın duvara vurduğu kırmızı ışık */
.neon::before {
  content: ''; position: absolute; left: -45%; right: -45%; top: -110%; bottom: -170%;
  background: radial-gradient(closest-side, rgba(255, 45, 30, calc(0.42 * var(--neon))), rgba(214, 42, 32, calc(0.14 * var(--neon))) 55%, transparent);
  mix-blend-mode: screen;
  pointer-events: none;
}
/* Neondan aşağı süzülen ışık konisi (sisin içinde görünür) */
.neon::after {
  content: ''; position: absolute; left: 4%; right: 4%; top: 88%; height: 170%;
  background: linear-gradient(180deg, rgba(255, 70, 50, calc(0.2 * var(--neon))), rgba(255, 40, 20, calc(0.06 * var(--neon))) 55%, transparent);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
}
.neon svg { position: relative; display: block; width: 100%; height: auto; overflow: visible; }
.neon .tube-off { fill: none; stroke: #5a2a28; stroke-width: 2.6; opacity: 0.55; }
.neon .tube-glow { fill: none; stroke: #ff2a1a; stroke-width: 9; filter: url(#neonBlur); opacity: calc(0.85 * var(--n, 1)); }
.neon .tube { fill: none; stroke: #ff4b3a; stroke-width: 3.6; opacity: var(--n, 1); }
.neon .tube-core { fill: none; stroke: #fff1ec; stroke-width: 1.3; opacity: var(--n, 1); }
.neon .grp { --n: var(--neon); }
.neon .grp.cut { --n: var(--neon-cut, 1); }
.neon .mount { fill: #1d1d1f; stroke: #333; stroke-width: 0.6; }
.neon .wire { fill: none; stroke: #0b0b0b; stroke-width: 1.4; }
.neon .mark-glow { opacity: calc(0.9 * var(--neon)); filter: url(#neonBlur); }
.neon .mark-tube { opacity: var(--neon); }

/* ── Kapı (fotoğraftaki kapının tam üstü) ── */
.door-box {
  position: absolute; z-index: 2;
  left: var(--dx); top: var(--dy); width: var(--dw); height: var(--dh);
  perspective: 900px;
}
/* Kapı açılınca arkasında görünen kulüp içi */
.door-opening { position: absolute; inset: 0; overflow: hidden; background: #1a0503; }
.door-opening img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; transform: scale(1.15); }
.door-inner {
  position: absolute; inset: -30%;
  background: radial-gradient(55% 40% at 50% 45%, rgba(255, 246, 239, 0.9) 0%, rgba(255, 179, 163, 0.55) 18%, rgba(255, 59, 38, 0.25) 42%, transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.4;
}
.door-rays {
  position: absolute; left: 50%; top: 45%; width: 300%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 195, 0.28) 0deg 4deg, transparent 4deg 13deg, rgba(255, 90, 70, 0.2) 13deg 16deg, transparent 16deg 27deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 75%);
  mask-image: radial-gradient(closest-side, #000 10%, transparent 75%);
  mix-blend-mode: screen;
  filter: blur(5px);
  opacity: 0;
}

/* Kapının iki parçası: arka plan olarak aynı fotoğraf, kapının hizasına kaydırılmış */
.door-half {
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  background-size: var(--img-w) var(--img-h);
  background-position: calc(var(--img-x) - var(--dx)) calc(var(--img-y) - var(--dy));
  filter: brightness(1.12) contrast(1.06) saturate(1.05);
  will-change: transform, opacity;
  transform-style: preserve-3d;
}
/* Kesik: sol üst köşeden sağ alt köşeye. A = üst-sağ üçgen, B = alt-sol üçgen
   (B kesik boyunca 2px taşar ki kesikten önce birleşim yeri görünmesin) */
.door-a { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.door-b { clip-path: polygon(0 -2px, 100% calc(100% - 2px), 100% 100%, 0 100%); }
/* neon ışığı kapının üst kısmına vuruyor */
.door-half::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255, 60, 40, calc(0.2 * var(--neon))), transparent 32%);
  mix-blend-mode: screen;
}
.hot-edge {
  position: absolute; left: 0; top: 0;
  width: var(--cut-len, 120%); height: 3px; margin-top: -1.5px;
  transform-origin: 0 50%;
  transform: rotate(var(--cut-angle, 50deg));
  background: linear-gradient(90deg, #ffb070, #fff4d0 30%, #ffd08a 70%, #ff8a40);
  box-shadow: 0 0 6px #ffcf8a, 0 0 18px #ff5a1f, 0 0 32px rgba(255, 40, 10, 0.8);
  opacity: 0;
}
.door-ink { position: absolute; left: 50%; top: 50%; width: 86%; translate: -50% -50%; rotate: -9deg; opacity: 0; mix-blend-mode: screen; }

/* Kapı kenarlarından sızan ışık: fotoğraftakini basla birlikte atar */
.leak-glow {
  position: absolute; inset: -2px; pointer-events: none;
  box-shadow: 0 0 10px 1px rgba(255, 55, 35, 0.7), inset 0 0 6px rgba(255, 55, 35, 0.25);
  mix-blend-mode: screen;
  /* şarkının basıyla atar; içeriden gölge geçince kararır */
  opacity: calc((0.4 + var(--bass, 0.4) * 0.75) * var(--shade, 1));
}
.leak-glow::after {
  content: ''; position: absolute; left: -8%; right: -8%; bottom: -10px; height: 18px;
  background: radial-gradient(closest-side, rgba(255, 110, 80, 0.95), rgba(255, 40, 20, 0.4) 55%, transparent);
  filter: blur(2px);
}
@keyframes leak { 0% { opacity: 1; } 55%, 100% { opacity: 0.45; } }
/* Islak zemindeki yansıma da atar */
.puddle-glow {
  position: absolute; z-index: 1; pointer-events: none;
  left: calc(var(--dx) - var(--dw) * 0.25); width: calc(var(--dw) * 1.5);
  top: calc(var(--dy) + var(--dh)); height: calc(var(--dh) * 0.55);
  background: radial-gradient(50% 60% at 50% 0%, rgba(255, 60, 35, 0.5), rgba(255, 40, 20, 0.12) 55%, transparent 80%);
  mix-blend-mode: screen;
  opacity: calc((0.35 + var(--bass, 0.4) * 0.8) * var(--shade, 1));
}

/* ── Damga (kapının içinde: kamera yaklaşınca onunla birlikte büyür) ── */
.stamp {
  position: absolute; z-index: 5; left: 50%; top: 50%;
  width: 86%; aspect-ratio: 1;
  translate: -50% -50%;
  pointer-events: none;
}
.stamp-block {
  position: absolute; inset: -7%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #3a2a1f 0 30%, #2a1e16 31% 44%, #171210 45% 60%, #0d0b0a 61%), #111;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.05), inset 0 6px 14px rgba(255, 220, 180, 0.12), 0 40px 60px rgba(0, 0, 0, 0.75);
  opacity: 0; transform: scale(1.75) translateY(-6%);
}
.stamp-block::before {
  content: ''; position: absolute; inset: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8a6a4f, #4b3526 55%, #2a1d15);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5), 0 6px 14px rgba(0, 0, 0, 0.6);
}
.stamp-imprint { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transform: scale(1.04) rotate(-9deg); mix-blend-mode: screen; }

/* ── Kenar karartma ── */
.gate-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(75% 65% at 50% 48%, transparent 40%, rgba(0, 0, 0, 0.75));
}
/* Film greni: sinematik doku, büyütülmüş fotoğraftaki yumuşaklığı da örter */
.gate-grain {
  position: absolute; inset: -60px; z-index: 6; pointer-events: none;
  opacity: 0.11; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.6s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-18px, 12px); }
  50% { transform: translate(14px, -22px); }
  75% { transform: translate(-8px, 26px); }
  100% { transform: translate(0, 0); }
}
.gate-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; display: block; pointer-events: none; mix-blend-mode: screen; }

/* ── Işık dalgası (yumuşak, flaş değil) ── */
.gate-wash {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 45%, rgba(255, 235, 225, 0.95), rgba(255, 110, 85, 0.75) 45%, rgba(120, 10, 5, 0.7));
  opacity: 0;
}

/* ── Sinema bantları: GİR'e basınca üstten ve alttan kayarak gelir ── */
.cine {
  position: absolute; left: 0; right: 0; z-index: 8; height: 0;
  background: #000; pointer-events: none;
  transition: height 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}
.cine-top { top: 0; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.6); }
.cine-bot { bottom: 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.6); }
.gate.go .cine { height: 9svh; }
.gate.reveal .cine { height: 0; transition: height 0.7s cubic-bezier(0.5, 0, 0.3, 1); }

/* ── Arayüz ── */
.gate-ui {
  position: absolute; z-index: 9; left: 0; right: 0;
  bottom: calc(26px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; transition: opacity 0.6s ease 0.5s;
}
.gate.ready .gate-ui { opacity: 1; }
.gate-enter {
  min-width: 176px; min-height: 58px; padding: 0 36px;
  border: 1.5px solid rgba(255, 80, 60, 0.9); border-radius: 0;
  background: linear-gradient(180deg, rgba(214, 42, 32, 0.32), rgba(110, 12, 6, 0.42));
  color: #fff;
  font: 400 26px/1 var(--display); letter-spacing: 0.24em; text-indent: 0.24em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 50, 30, 0.35), inset 0 0 18px rgba(255, 60, 40, 0.25);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: enter-glow 2s ease-in-out infinite;
  transition: transform 0.12s;
}
.gate-enter:active { transform: scale(0.96); }
@keyframes enter-glow { 50% { box-shadow: 0 0 38px rgba(255, 50, 30, 0.6), inset 0 0 24px rgba(255, 60, 40, 0.4); } }
.gate-hint { margin: 0; font: 600 10px/1 var(--body); letter-spacing: 0.3em; color: #9a918a; text-transform: uppercase; }
.gate-hint::before { content: '♪ '; letter-spacing: 0; }

.gate-skip {
  position: absolute; z-index: 10;
  top: calc(14px + env(safe-area-inset-top)); right: calc(14px + env(safe-area-inset-right));
  min-height: 40px; padding: 0 16px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.2);
  color: #e1dbd4; font: 700 12px/1 var(--body); letter-spacing: 0.16em; text-transform: uppercase;
  cursor: pointer; transition: opacity 0.3s;
}

/* ══════════ Sekans ══════════ */
.gate.go .gate-ui { opacity: 0; pointer-events: none; transition: opacity 0.25s; }

/* Damga: blok iner, basar, kalkar */
.gate.stamping .stamp-block { animation: block 0.78s cubic-bezier(0.3, 0, 0.2, 1) forwards; }
@keyframes block {
  0% { opacity: 0; transform: scale(1.75) translateY(-6%); box-shadow: inset 0 0 0 3px rgba(255,255,255,.05), 0 60px 80px rgba(0,0,0,.6); }
  20% { opacity: 1; }
  46% { opacity: 1; transform: scale(1) translateY(0); box-shadow: inset 0 0 0 3px rgba(255,255,255,.05), 0 4px 8px rgba(0,0,0,.9); }
  58% { transform: scale(0.975) translateY(0); }
  74% { opacity: 1; transform: scale(1.08) translateY(-3%); }
  100% { opacity: 0; transform: scale(1.5) translateY(-10%); }
}
.gate.inked .stamp-imprint { animation: ink 0.5s ease-out forwards; }
@keyframes ink {
  0% { opacity: 0; transform: scale(1.04) rotate(-9deg); }
  30% { opacity: 1; }
  100% { opacity: 0.95; transform: scale(1) rotate(-9deg); }
}
/* Mürekkep kapıya geçer, kesikle birlikte ikiye bölünür */
.gate.cutting .stamp { opacity: 0; transition: opacity 0.12s; }
.gate.cutting .door-ink { opacity: 0.95; }

/* Kesik tamam: kenarlar akkor */
.gate.cut .hot-edge { animation: hot 1.4s ease-out forwards; }
@keyframes hot {
  0% { opacity: 1; filter: none; }
  40% { opacity: 1; filter: hue-rotate(-12deg) saturate(1.3); }
  100% { opacity: 0.25; filter: hue-rotate(-25deg) brightness(0.7); }
}

/* Çatlama: parçalar kesik boyunca birkaç piksel kayar, aradan kulüp ışığı sızar */
.gate.crack .door-a { transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); transform: translate3d(1.6%, -1.2%, 0) rotateZ(0.4deg); }
.gate.crack .door-b { transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1); transform: translate3d(-1.6%, 1.2%, 0) rotateZ(-0.4deg); }
.gate.crack .door-inner { transition: opacity 0.2s; opacity: 1; }

/* Kapı ikiye ayrılır */
.gate.split .gate-shake { animation: none; }
.gate.split .door-a {
  transition: transform 1.15s cubic-bezier(0.6, 0, 0.35, 1), opacity 0.7s ease 0.5s;
  transform: translate3d(125%, -22%, 0) rotateZ(9deg) rotateY(-18deg);
  opacity: 0;
}
.gate.split .door-b {
  transition: transform 1.15s cubic-bezier(0.6, 0, 0.35, 1), opacity 0.7s ease 0.5s;
  transform: translate3d(-125%, 22%, 0) rotateZ(-9deg) rotateY(18deg);
  opacity: 0;
}
.gate.split .door-opening img { transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); transform: scale(1); }
.gate.split .door-inner { transition: opacity 0.5s ease; opacity: 1; }
.gate.split .door-rays { transition: opacity 0.6s ease 0.15s; opacity: 1; animation: rays 6s linear infinite; }
@keyframes rays { to { rotate: 25deg; } }
.gate.split .neon { opacity: 0; transform: translateY(-30px) scale(1.04); transition: opacity 0.5s, transform 0.7s; }
.gate.split .leak-glow, .gate.split .puddle-glow { animation: none; opacity: 0; transition: opacity 0.4s; }

.gate.wash .gate-wash { transition: opacity 0.55s ease-in; opacity: 0.9; }
.gate.reveal { transition: opacity 0.85s ease; opacity: 0; }
.gate.reveal .gate-skip { opacity: 0; pointer-events: none; }

/* ── Ses butonu (kapıdan sonra, sol altta) ── */
.sound-btn {
  position: fixed; z-index: 310; /* kapı ekranının da üstünde: kapıdayken de kapatılabilsin */
  left: calc(16px + env(safe-area-inset-left)); bottom: calc(16px + env(safe-area-inset-bottom));
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.72); border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #fff; cursor: pointer;
  transition: opacity 0.4s, transform 0.4s;
}
.sound-btn svg { width: 22px; height: 22px; }
.menu-open .sound-btn { opacity: 0; pointer-events: none; }
.sound-btn.hide { opacity: 0; transform: scale(0.85); pointer-events: none; }
.sound-btn .eq { display: flex; gap: 2px; align-items: flex-end; height: 16px; }
.sound-btn .eq i { width: 3px; background: #ff3b2f; animation: eq 0.5s ease-in-out infinite alternate; }
.sound-btn .eq i:nth-child(2) { animation-delay: 0.15s; }
.sound-btn .eq i:nth-child(3) { animation-delay: 0.3s; }
@keyframes eq { from { height: 4px; } to { height: 16px; } }

/* ── Drop anı: ana sayfadaki logo darbeyle yerine oturur ── */
.drop-hit .hero-logo { animation: slam 0.95s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes slam {
  0% { transform: scale(1.45); opacity: 0; filter: brightness(1.8) drop-shadow(0 0 30px rgba(255, 60, 40, 0.9)); }
  35% { transform: scale(0.96); opacity: 1; }
  60% { transform: scale(1.02); }
  100% { transform: scale(1); filter: none; }
}
.drop-hit .tagline, .drop-hit .intro, .drop-hit .cta { animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.drop-hit .intro { animation-delay: 0.08s; }
.drop-hit .cta { animation-delay: 0.16s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gate-shake, .leak-glow, .puddle-glow, .gate-enter { animation: none !important; }
}