/* ============================================================
   GAİA — GECE
   Drop'tan sonraki alan. Bölüm değil, gecenin farklı bölgeleri:
   main floor → etkinlikler → hafıza → rezervasyon → after hours.
   Scroll = kamera. Her bölgenin kendi atmosferi ve geçişi var.
   ============================================================ */
#gece{
  --kirmizi:#ff1a00;
  --kirmizi2:#ff003c;
  --mavi:#0066ff;
  --mavi2:#00c8ff;
  --kemik:#f4f1ec;
  --sonuk:rgba(244,241,236,.52);
  --cizgi:rgba(244,241,236,.14);
  --kenar:clamp(20px,5vw,80px);
  --yog:.5;            /* müzik yoğunluğu, JS sürüyor */
  --vurus:0;           /* anlık kick */

  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  z-index:2;                     /* sahne katmanlarının üstünde */
  background:#050505;color:var(--kemik);
  font-family:"Alfabet",ui-sans-serif,system-ui,sans-serif;
  opacity:0;visibility:hidden;
  transition:opacity .9s ease,visibility 0s linear .9s;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
#gece::-webkit-scrollbar{display:none}
#gece.acik{opacity:1;visibility:visible;transition:opacity 1.1s ease,visibility 0s}

/* ---------- bölge iskeleti ---------- */
.bolge{
  position:relative;min-height:100svh;
  display:grid;align-content:center;
  padding:clamp(70px,12vh,150px) var(--kenar);
  isolation:isolate;
}
/* arka plan katmanı — kamera gibi davranıyor (parallax + zoom) */
.bolge .fon{
  position:absolute;inset:-6% -2%;z-index:-2;overflow:hidden;
  transform:translate3d(0,var(--par,0px),0) scale(var(--fonOlcek,1.06));
  will-change:transform;
}
.bolge .fon > video,.bolge .fon > img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.16) saturate(1.08) brightness(var(--parlak,.5));
}
/* her bölgenin ışık rengi */
.bolge .isik{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  mix-blend-mode:screen;opacity:calc(.22 + var(--yog) * .3);
}
.bolge::after{                    /* ortak doku: grain + vignette */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    radial-gradient(78% 68% at 50% 50%, transparent 38%, rgba(0,0,0,.82) 100%);
}

/* ---------- MAIN FLOOR ---------- */
#floor{min-height:104svh}
#floor .isik{background:radial-gradient(60% 50% at 50% 60%,rgba(255,26,0,.34),transparent 70%)}
#floor .marka{
  justify-self:center;text-align:center;
  font-family:"Apple Garamond Light",ui-serif,Georgia,serif;
  font-size:clamp(46px,9vw,140px);letter-spacing:.3em;text-indent:.3em;
  line-height:1;margin:0;
  transform:scale(calc(1 + var(--vurus) * .02));
}
#floor .satir{
  justify-self:center;margin:18px 0 0;text-align:center;
  font-family:"SerrifMono",ui-monospace,monospace;
  font-size:clamp(10px,1.1vw,12.5px);letter-spacing:.34em;
  text-transform:uppercase;color:var(--sonuk);
  min-height:1.4em;
}
#floor .ok{
  justify-self:center;margin-top:44px;font-size:15px;color:var(--sonuk);
  animation:inip 2.6s ease-in-out infinite;
}
@keyframes inip{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(8px);opacity:1}}

/* ---------- bölge başlığı ---------- */
.bolge-bas{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(26px,4vh,54px);
}
.bolge-bas h2{
  margin:0;font-family:"Alfabet",sans-serif;font-weight:700;
  font-size:clamp(34px,7vw,104px);line-height:.92;letter-spacing:-.02em;
  text-transform:uppercase;
}
.bolge-bas em{
  font-style:normal;font-family:"SerrifMono",ui-monospace,monospace;
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--sonuk);
}

/* ---------- ETKİNLİKLER — poster gibi ---------- */
#etkinlik .isik{background:radial-gradient(55% 60% at 70% 40%,rgba(255,0,60,.30),transparent 68%)}
.gece-liste{display:grid;gap:clamp(10px,1.6vh,20px)}
.gece-etkinlik{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);
  padding:clamp(16px,2.4vh,30px) clamp(14px,2vw,28px);
  border-top:1px solid var(--cizgi);
  overflow:hidden;cursor:pointer;
  transition:background .45s ease;
}
.gece-etkinlik:last-child{border-bottom:1px solid var(--cizgi)}
.gece-etkinlik .onizleme{
  position:absolute;inset:0;z-index:-1;opacity:0;
  transition:opacity .5s ease;
}
.gece-etkinlik .onizleme video,.gece-etkinlik .onizleme img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.2) saturate(1.1) brightness(.42);
}
.gece-etkinlik:hover .onizleme{opacity:1}
.gece-etkinlik:hover{background:rgba(255,26,0,.05)}
.gece-etkinlik .gun{
  font-family:"Alfabet",sans-serif;font-weight:700;
  font-size:clamp(30px,5vw,64px);line-height:.9;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;min-width:2.2ch;
}
.gece-etkinlik .gun small{
  display:block;font-size:10.5px;font-weight:400;letter-spacing:.24em;
  color:var(--sonuk);text-transform:uppercase;margin-top:6px;
}
.gece-etkinlik h3{
  margin:0 0 6px;font-size:clamp(17px,2.2vw,28px);font-weight:500;
  letter-spacing:-.01em;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.gece-etkinlik:hover h3{transform:translateX(12px)}
.gece-etkinlik p{
  margin:0;font-family:"SerrifMono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sonuk);
}
.gece-etkinlik .bilet{
  font-family:"SerrifMono",ui-monospace,monospace;font-size:10.5px;
  letter-spacing:.22em;text-transform:uppercase;
  padding:11px 20px;border:1px solid var(--cizgi);border-radius:999px;
  color:var(--kemik);text-decoration:none;white-space:nowrap;
  transition:background .3s,color .3s,border-color .3s;
}
.gece-etkinlik .bilet:hover{background:var(--kirmizi);border-color:var(--kirmizi);color:#fff}
@media(max-width:720px){
  .gece-etkinlik{grid-template-columns:auto 1fr;row-gap:12px}
  .gece-etkinlik .bilet{grid-column:2;justify-self:start}
}

/* ---------- HAFIZA (galeri) — grid değil, dağınık ---------- */
#hafiza .isik{background:radial-gradient(50% 50% at 30% 50%,rgba(0,102,255,.26),transparent 70%)}
.hafiza-akis{
  position:relative;display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(8px,1.4vw,18px);
}
.an{
  position:relative;overflow:hidden;background:#000;cursor:pointer;
  border:1px solid rgba(244,241,236,.08);
  transform:translateY(var(--kay,0px));
  will-change:transform;
}
.an img,.an video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.14) saturate(1.06) brightness(.82);
  transition:filter .5s ease,transform .8s cubic-bezier(.2,.8,.2,1);
}
.an:hover img,.an:hover video{filter:contrast(1.2) saturate(1.16) brightness(1);transform:scale(1.05)}
/* dağınık yerleşim — hepsi farklı ölçüde */
.an.k1{grid-column:span 5;aspect-ratio:3/4}
.an.k2{grid-column:span 3;aspect-ratio:9/16;align-self:end}
.an.k3{grid-column:span 4;aspect-ratio:1/1;align-self:center}
.an.k4{grid-column:span 7;aspect-ratio:16/10}
.an.k5{grid-column:span 5;aspect-ratio:3/4;align-self:end}
.an.k6{grid-column:span 4;aspect-ratio:9/16}
.an.k7{grid-column:span 8;aspect-ratio:16/9}
.an.k8{grid-column:span 3;aspect-ratio:3/4;align-self:center}
@media(max-width:720px){
  .an.k1,.an.k4,.an.k5,.an.k7{grid-column:span 12}
  .an.k2,.an.k3,.an.k6,.an.k8{grid-column:span 6}
}
.an .etiket{
  position:absolute;left:12px;bottom:10px;
  font-family:"SerrifMono",ui-monospace,monospace;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.62);
  opacity:0;transition:opacity .4s;
}
.an:hover .etiket{opacity:1}

/* ---------- REZERVASYON — dark luxury ---------- */
#rezerve .isik{background:radial-gradient(60% 60% at 50% 50%,rgba(255,26,0,.14),transparent 72%)}
#rezerve .fon > video{filter:contrast(1.1) saturate(.8) brightness(.24) blur(3px)}
.rez-kutu{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:clamp(14px,2vw,26px);max-width:1080px;align-items:end;
}
.rez-alan{display:grid;gap:10px}
.rez-alan label{
  font-family:"SerrifMono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.26em;text-transform:uppercase;color:var(--sonuk);
}
.rez-alan input,.rez-alan select{
  width:100%;min-width:0;background:transparent;color:var(--kemik);
  border:0;border-bottom:1px solid var(--cizgi);
  font-family:"Alfabet",sans-serif;font-size:clamp(16px,2vw,22px);
  padding:10px 2px;border-radius:0;
  transition:border-color .3s;
}
.rez-alan input:focus,.rez-alan select:focus{outline:0;border-bottom-color:var(--kirmizi)}
.rez-alan select option{background:#0a0a0c;color:var(--kemik)}
.rez-gonder{
  margin-top:clamp(22px,4vh,44px);
  display:inline-flex;align-items:center;gap:12px;
  background:none;border:1px solid var(--cizgi);color:var(--kemik);
  font-family:"SerrifMono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;
  padding:16px 30px;border-radius:999px;cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}
.rez-gonder:hover{background:var(--kemik);color:#050505}
#rez-cevap{
  margin-top:18px;min-height:1.5em;
  font-family:"SerrifMono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.12em;color:var(--sonuk);
}
#rez-cevap a{color:var(--kemik)}

/* ---------- AFTER HOURS ---------- */
#sonrasi .isik{background:radial-gradient(60% 60% at 50% 70%,rgba(0,102,255,.14),transparent 74%)}
#sonrasi .fon > video{filter:contrast(1.05) saturate(.55) brightness(.20)}
.son-izgara{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:clamp(24px,4vw,60px);margin-top:clamp(20px,3vh,40px);
}
.son-izgara h4{
  margin:0 0 10px;font-family:"SerrifMono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sonuk);font-weight:400;
}
.son-izgara p,.son-izgara a{
  margin:0;font-size:clamp(15px,1.6vw,19px);line-height:1.6;
  color:var(--kemik);text-decoration:none;
}
.son-izgara a:hover{text-decoration:underline;text-underline-offset:5px}
#sonrasi .kapanis{
  margin-top:clamp(50px,9vh,110px);
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:20px;flex-wrap:wrap;
  padding-top:24px;border-top:1px solid var(--cizgi);
  font-family:"SerrifMono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sonuk);
}
#sonrasi .kapanis b{
  font-family:"Apple Garamond Light",ui-serif,Georgia,serif;
  font-weight:400;font-size:clamp(20px,3vw,34px);letter-spacing:.3em;
  color:var(--kemik);
}

/* ---------- gezinti — başta gizli ---------- */
#gece-nav{
  position:fixed;top:0;left:0;right:0;z-index:92;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:14px var(--kenar);
  background:linear-gradient(to bottom,rgba(5,5,5,.86),rgba(5,5,5,0));
  backdrop-filter:blur(10px);
  font-family:"SerrifMono",ui-monospace,monospace;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  opacity:0;transform:translateY(-14px);pointer-events:none;
  transition:opacity .45s ease,transform .45s ease;
}
#gece-nav.gorun{opacity:1;transform:none;pointer-events:auto}
#gece-nav .ad{
  font-family:"Apple Garamond Light",ui-serif,Georgia,serif;
  font-size:15px;letter-spacing:.42em;text-indent:.42em;text-transform:none;
}
#gece-nav nav{display:flex;gap:clamp(10px,2vw,26px);flex-wrap:wrap}
#gece-nav button{
  background:none;border:0;color:var(--sonuk);cursor:pointer;font:inherit;
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .3s,border-color .3s;
}
#gece-nav button:hover,#gece-nav button.etkin{
  color:var(--kemik);border-bottom-color:var(--kirmizi);
}

/* büyütme */
#an-buyut{
  position:fixed;inset:0;z-index:96;display:none;place-items:center;
  background:rgba(3,3,4,.95);backdrop-filter:blur(10px);
}
#an-buyut.acik{display:grid}
#an-buyut img,#an-buyut video{
  max-width:min(94vw,1100px);max-height:90vh;object-fit:contain;
  border:1px solid var(--cizgi);
}
#an-buyut .kapa{
  position:absolute;top:22px;right:26px;width:44px;height:44px;
  border-radius:999px;border:1px solid var(--cizgi);
  background:none;color:var(--kemik);font-size:18px;cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  .bolge .fon{transform:none}
  .an{transform:none}
  #floor .ok{animation:none}
}


/* ============================================================
   BÖLGEYE GÖRE ARKA PLAN PARLAKLIĞI
   Tek değer her yerde yanlıştı: main floor'da kulüp görünmüyordu,
   hafızada ise arka plan öne çıkıp düz bir kırmızı yıkamaya
   dönüyordu. Artık içeriğin yoğun olduğu bölgelerde arka plan
   geri çekiliyor, floor'da ise gece görünüyor.
   ============================================================ */
#floor    .fon > video{filter:contrast(1.14) saturate(1.10) brightness(.68)}
#etkinlik .fon > video{filter:contrast(1.16) saturate(1.02) brightness(.26)}
#hafiza   .fon > video{filter:contrast(1.10) saturate(.72)  brightness(.14) blur(2px)}
#rezerve  .fon > video{filter:contrast(1.08) saturate(.68)  brightness(.20) blur(4px)}
#sonrasi  .fon > video{filter:contrast(1.04) saturate(.50)  brightness(.16) blur(2px)}

/* ışık katmanı içeriğin önüne geçmesin */
#hafiza .isik,#rezerve .isik,#sonrasi .isik{opacity:calc(.10 + var(--yog) * .14)}

/* gezinti: sağdaki son madde kadraja taşıyordu */
#gece-nav{flex-wrap:wrap;row-gap:8px}
#gece-nav nav{flex:1 1 auto;justify-content:flex-end;min-width:0}
#gece-nav .ad{flex:0 0 auto}
@media(max-width:720px){
  #gece-nav nav{justify-content:flex-start}
}


/* ============================================================
   KATMAN SIRASI — arka plan videosu metnin üstüne çıkıyordu.
   .fon'a z-index:-2 verilmiş olsa da `will-change:transform` ile
   kompozit katmana yükselince sıralama bozuluyordu (ölçüm:
   elementsFromPoint ilk sırada VIDEO döndürüyordu). İçeriği açıkça
   öne alıyoruz; negatif z-index'e güvenmiyoruz.
   ============================================================ */
.bolge > *{position:relative;z-index:1}
.bolge > .fon{z-index:0}
.bolge > .isik{z-index:0}
.bolge::after{z-index:0}
.bolge{background:#050505}


/* will-change kompozit katmana yükseltip sıralamayı bozuyordu */
.bolge .fon{will-change:auto}


/* ============================================================
   KATMAN KURGUSU — sade ve kesin
   .bolge: sadece konumlandırıcı. Arka plan ve ışık altta, doku
   ortada, İÇERİK en üstte. Negatif z-index kullanılmıyor.
   ============================================================ */
.bolge{
  isolation:auto;
  display:block;                 /* grid + align-content:center yerine */
  position:relative;
  padding:0;
}
.bolge > .fon { z-index:0 }
.bolge > .isik{ z-index:1 }
.bolge::after { z-index:2 }
.bolge > .ic{
  position:relative;z-index:3;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(70px,12vh,150px) var(--kenar);
  gap:clamp(18px,3vh,40px);
}
#floor > .ic{align-items:center;text-align:center}
.bolge > .ic > *{width:100%}
#floor > .ic > *{width:auto}