/* ============================================================
   GAİA — portal sonrası sahne
   free fall · build · DROP · impact · party world
   Renk: siyah / derin kırmızı / elektrik mavisi / beyaz
   ============================================================ */
.sahne{
  /* KENDİ yığın bağlamını kurmalı: yoksa içindeki efekt katmanlarının
     z-index'leri (grain 38, flaş 40, siyah 41) üst bağlama karışıp
     kardeş olan #gece'nin ÜSTÜNDE kalıyor ve içeriği örtüyordu. */
  z-index:1;isolation:isolate;
  --sx:0px; --sy:0px; --sr:0deg;
  --rgb:0px; --yakin:1; --blur:0px; --bozulma:0; --hiz:0; --yog:.5;
  --kirmizi:#ff1a00;
  --kirmizi2:#ff003c;
  --mavi:#0066ff;
  --mavi2:#00c8ff;
  position:absolute;inset:0;overflow:hidden;
  background:#050505;
  opacity:0;visibility:hidden;
  transition:opacity .35s linear,visibility 0s linear .35s;
}
.sahne.acik{opacity:1;visibility:visible;transition:opacity .35s linear,visibility 0s}

/* kamera: sarsıntı + zoom + bulanıklık hepsi burada toplanıyor */
.dusus,.parti{
  position:absolute;inset:0;
  transform:translate3d(var(--sx),var(--sy),0) rotate(var(--sr)) scale(var(--yakin));
  filter:blur(var(--blur));
  will-change:transform,filter;
}

/* ---------------- SERBEST DÜŞÜŞ ---------------- */
.dusus{
  perspective:820px;perspective-origin:50% 50%;
  background:radial-gradient(90% 70% at 50% 50%, #0a0a0c 0%, #050505 60%, #000 100%);
}
.dusus-ic{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

/* düşerken yanından geçen ışık çizgileri */
.dusus .isik{
  position:absolute;left:50%;top:50%;width:2px;
  height:var(--h);
  margin-left:-1px;
  transform:translate3d(var(--x),var(--y),var(--z));
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.9),transparent);
  opacity:var(--o);
  filter:blur(calc(var(--hiz) * 2px));
}
/* hız arttıkça çizgiler uzuyor */
.dusus .isik{ height:calc(var(--h) * (1 + var(--hiz) * 2.2)); }

/* medya düzlemleri */
.dusus .duzlem{
  position:absolute;left:50%;top:50%;
  width:clamp(240px,26vw,420px);height:clamp(320px,34vw,560px);
  margin:-1px 0 0 -1px;
  transform:translate3d(var(--x),var(--y),var(--z)) translate(-50%,-50%)
            rotateZ(var(--rz)) rotateY(var(--ry));
  will-change:transform,opacity;
  box-shadow:0 30px 90px rgba(0,0,0,.8);
  outline:1px solid rgba(255,255,255,.10);outline-offset:-1px;
  background:#000;overflow:hidden;
}
.dusus .duzlem.video{width:clamp(220px,22vw,360px);height:clamp(390px,39vw,640px)}
.dusus .duzlem > img,.dusus .duzlem > video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* ortak renk dili: siyahlar derin, kırmızı güçlü, kontrast yüksek */
  filter:contrast(1.18) saturate(1.12) brightness(.96);
}

/* ---------------- PARTİ DÜNYASI ---------------- */
.parti{
  opacity:0;visibility:hidden;background:#050505;
  transition:opacity .18s linear,visibility 0s linear .18s;
}
.parti.acik{opacity:1;visibility:visible;transition:opacity .18s linear,visibility 0s}
.parti .p-kat{
  position:absolute;inset:0;opacity:0;
  background:#000;
}
.parti .p-kat.gorun{opacity:1}
.parti .p-kat > img,.parti .p-kat > video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.20) saturate(1.15) brightness(calc(.92 + var(--yog) * .18));
  transform:scale(calc(1.04 + var(--yog) * .03));
}

/* tipografi — müzik videosu katmanı, sabit başlık değil */
.parti .p-yazi{
  position:absolute;inset:0;display:grid;place-content:center;
  pointer-events:none;opacity:0;
  font-family:"Alfabet",ui-sans-serif,system-ui,sans-serif;
  font-weight:700;letter-spacing:-.02em;
  font-size:clamp(46px,13vw,190px);line-height:.92;
  color:#fff;text-align:center;
  text-shadow:0 0 40px rgba(0,0,0,.7);
  mix-blend-mode:difference;
}
.parti .p-yazi.carp{animation:yaziCarp 300ms cubic-bezier(.1,.9,.2,1)}
@keyframes yaziCarp{
  0%{opacity:0;transform:scale(1.22) translateY(10px);letter-spacing:.12em}
  12%{opacity:1;transform:scale(1) translateY(0);letter-spacing:-.02em}
  78%{opacity:1}
  100%{opacity:0}
}

/* ---------------- EFEKT KATMANLARI ---------------- */
.ef-flas,.ef-kirmizi,.ef-siyah{
  position:absolute;inset:0;pointer-events:none;opacity:0;
}
.ef-flas{background:#fff;z-index:40;mix-blend-mode:screen}
.ef-kirmizi{background:radial-gradient(70% 60% at 50% 50%,var(--kirmizi) 0%,rgba(255,0,60,.35) 45%,transparent 78%);z-index:39;mix-blend-mode:screen}
.ef-siyah{background:#000;z-index:41;transition:opacity 60ms linear}

/* film grain + scanline + vignette — hep hafif, hep açık */
.ef-cam{
  position:absolute;inset:0;pointer-events:none;z-index:38;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    radial-gradient(72% 62% at 50% 50%, transparent 40%, rgba(0,0,0,.72) 100%);
  opacity:.85;
  mix-blend-mode:normal;
}
.ef-cam::after{
  content:"";position:absolute;inset:-40%;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.5'/></svg>");
  opacity:.055;animation:grain 1.1s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}     20%{transform:translate(-4%,3%)}
  40%{transform:translate(3%,-4%)} 60%{transform:translate(-3%,-3%)}
  80%{transform:translate(4%,2%)}  100%{transform:translate(0,0)}
}

/* RGB split — kick/snare anlarında */
.sahne .dusus::after,.sahne .parti::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:37;
  backdrop-filter:none;
  box-shadow:
    inset var(--rgb) 0 0 rgba(255,0,60,.30),
    inset calc(var(--rgb) * -1) 0 0 rgba(0,200,255,.30);
  opacity:calc(var(--rgb) / 7px);
}

/* dijital bozulma */
.sahne .dusus,.sahne .parti{
  clip-path:inset(calc(var(--bozulma) * 6%) 0 calc(var(--bozulma) * 4%) 0);
}

/* hız arttıkça kenar karartma ve kırmızı kaçış */
.dusus::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:36;
  background:radial-gradient(60% 52% at 50% 50%, transparent 0%,
    rgba(0,0,0,calc(.25 + var(--hiz) * .5)) 100%);
}

/* ---------------- kontroller ---------------- */
#gaia-ctrl{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:95;
  display:flex;align-items:center;gap:14px;
  padding:9px 16px;border-radius:999px;
  background:rgba(8,8,10,.62);backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);
  font-family:"SerrifMono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.18em;color:#fff;text-transform:uppercase;
  opacity:.9;
}
#gaia-ctrl button{
  background:none;border:0;color:#fff;cursor:pointer;font:inherit;
  padding:2px 4px;opacity:.85;
}
#gaia-ctrl button:hover{opacity:1}
#gaia-ctrl .cizgi{width:1px;height:12px;background:rgba(255,255,255,.22)}
#gaia-ctrl .sure{font-variant-numeric:tabular-nums;opacity:.75}
#gaia-ctrl .bpm{opacity:.55}

@media (prefers-reduced-motion: reduce){
  .ef-cam::after{animation:none}
  .dusus .duzlem{transition:none}
}
@media (max-width:760px){
  .dusus .duzlem{width:42vw;height:56vw}
  .dusus .duzlem.video{width:38vw;height:66vw}
  .ef-cam{opacity:.6}
}


/* ---------------- SOLUCAN DELİĞİ (WebGL) ----------------
   Düzlemlerin ARKASINDA; kareler tünelin içinden geçiyor. */
.dusus .solucan{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:0;
}
.dusus-ic{z-index:1}
.dusus{background:#000}


/* Düzlemler kameraya yaklaşmadan söndüğü için dünyada daha BÜYÜK
   olmalılar; ekranda okunabilir boyutta kalsınlar diye. */
.dusus .duzlem{width:clamp(320px,36vw,620px);height:clamp(430px,48vw,820px)}
.dusus .duzlem.video{width:clamp(300px,31vw,520px);height:clamp(530px,55vw,920px)}


/* ============================================================
   PARTİ KARESİ — dikey medya, yatay ekran
   `cover` ile karenin %70'i kırpılıyor ve okunmuyordu. Kare artık
   kendi oranında ve tam boy; arkayı aynı karenin bulanık kopyası
   dolduruyor.
   ============================================================ */
.parti .p-kat > .p-arka{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:blur(38px) saturate(1.25) brightness(calc(.34 + var(--yog) * .16));
  transform:scale(1.18);
}
.parti .p-kat > .p-on{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(calc(1 + var(--yog) * .015));
  height:100%;width:auto;max-width:100%;
  object-fit:contain;display:block;
  filter:contrast(1.16) saturate(1.10) brightness(calc(.96 + var(--yog) * .12));
  box-shadow:0 0 90px rgba(0,0,0,.65);
}
/* yazı katmanı karenin üstünde kalsın */
.parti .p-yazi{z-index:3}
@media(max-width:760px){
  .parti .p-kat > .p-on{height:auto;width:100%;max-height:100%}
}