/* ============================================================
   EmlakDiyo · Açılış animasyonu (paylaşılan)
   Dağınık kaynaklar merkeze akıp markada birleşir.
   Hem kılavuzda (index.html) hem sunumda (sunum.html) kullanılır.
   Kendi renk değişkenleri vardır; sayfanın temasından bağımsızdır.
   ============================================================ */
.giris{
  --g-mor:#8B7CF6;
  --g-metin:#F5F4FA;
  --g-metin-2:#B9B7CE;
  --g-metin-3:#77748F;
  --g-cizgi:#26263C;
}
.giris{
  position:fixed;inset:0;z-index:200;
  background:radial-gradient(120% 100% at 50% 50%, #14122A 0%, #0A0A12 62%);
  display:grid;place-items:center;
  overflow:hidden;
}
body.giris-bitti .giris{
  opacity:0;pointer-events:none;
  transition:opacity 700ms ease 200ms;
}
body.giris-yok .giris{display:none}

/* --- merkez çekim alanı --- */
.giris-merkez{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:1px;height:1px;
}

/* --- dağınık kaynak kartları --- */
.parca{
  position:absolute;top:50%;left:50%;
  display:flex;align-items:center;gap:.85vmin;
  padding:1.1vmin 1.6vmin;border-radius:1.1vmin;
  background:rgba(24,24,40,.92);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1.4vmin 3vmin rgba(0,0,0,.55);
  white-space:nowrap;
  font-size:1.5vmin;color:var(--g-metin-2);
  opacity:0;
  transform:translate(-50%,-50%);
  animation:parca-ak 3400ms cubic-bezier(.5,0,.25,1) forwards;
  animation-delay:var(--gec,0ms);
}
.parca .sim{
  width:2.6vmin;height:2.6vmin;border-radius:.7vmin;
  display:grid;place-items:center;flex-shrink:0;
  background:var(--sim-zemin,#2A2A42);
}
.parca .sim svg{width:1.6vmin;height:1.6vmin;stroke-width:2}

@keyframes parca-ak{
  0%{
    opacity:0;
    transform:translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.55) rotate(var(--r));
  }
  14%{ opacity:1; }
  46%{
    opacity:1;
    transform:translate(calc(-50% + var(--x) * .86), calc(-50% + var(--y) * .86)) scale(1) rotate(0deg);
  }
  78%{
    opacity:.85;
    transform:translate(calc(-50% + var(--x) * .16), calc(-50% + var(--y) * .16)) scale(.5) rotate(0deg);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.08) rotate(0deg);
  }
}

/* --- birleşme parlaması --- */
.cakim{
  position:absolute;top:50%;left:50%;
  width:2vmin;height:2vmin;border-radius:50%;
  transform:translate(-50%,-50%) scale(0);
  background:radial-gradient(circle, #fff 0%, var(--g-mor) 38%, transparent 70%);
  opacity:0;
  animation:cakim 900ms ease-out 3050ms forwards;
}
@keyframes cakim{
  0%{opacity:0;transform:translate(-50%,-50%) scale(0)}
  35%{opacity:.95;transform:translate(-50%,-50%) scale(14)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(30)}
}

/* --- halka dalgası --- */
.halka{
  position:absolute;top:50%;left:50%;
  width:6vmin;height:6vmin;border-radius:50%;
  border:.22vmin solid var(--g-mor);
  transform:translate(-50%,-50%) scale(.2);opacity:0;
  animation:halka 1500ms ease-out forwards;
  animation-delay:var(--hgec,3150ms);
}
@keyframes halka{
  0%{opacity:.7;transform:translate(-50%,-50%) scale(.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(9)}
}

/* --- ortaya çıkan marka --- */
.giris-marka{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  opacity:0;
  animation:marka-gel 1100ms cubic-bezier(.2,.8,.3,1) 3250ms forwards;
}
@keyframes marka-gel{
  0%{opacity:0;transform:scale(.72)}
  60%{opacity:1;transform:scale(1.03)}
  100%{opacity:1;transform:scale(1)}
}
.giris-marka img{width:9vmin;height:9vmin;border-radius:2vmin;margin-bottom:2.6vmin}
.giris-ad{font-size:7vmin;font-weight:800;letter-spacing:-.03em;line-height:1}
.giris-ad span{color:var(--g-mor)}
.giris-slogan{
  font-size:2.1vmin;color:var(--g-metin-2);margin-top:2vmin;text-align:center;
  opacity:0;animation:yaz 900ms ease 4100ms forwards;
}
@keyframes yaz{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.giris-atla{
  position:absolute;bottom:4vmin;left:50%;transform:translateX(-50%);
  font-size:1.5vmin;color:var(--g-metin-3);
  padding:1vmin 2vmin;border-radius:99px;border:1px solid var(--g-cizgi);
  opacity:0;animation:yaz 600ms ease 900ms forwards;
}
.giris-atla:hover{color:var(--g-metin);border-color:var(--g-mor)}

@media (prefers-reduced-motion:reduce){
  .parca,.cakim,.halka,.giris-marka,.giris-slogan{animation:none!important;opacity:1!important;transform:translate(-50%,-50%)!important}
  .parca{display:none}
  .giris-marka{transform:none!important}
}