/* GNGR Labs — yakında sayfası: yalnız logo. 8.11.2026: Bilirkişi Portal / serkangungor.online Panorama-Cam diline geçti
   (panelle aynı zemin görseli, koyu cam pano, kenarda dönen ışık, film greni). Bilinçli olarak yalnız koyu:
   krom/altın logo açık zeminde okunmaz — bu yüzden zemin karartılır, logo koyu camın üstünde durur. */
:root{
  --zemin:#08090b;
  --altin-2:#e8b030;
  --glass:rgba(18,19,23,.30); --glass2:rgba(40,42,48,.30); --glass-hi:rgba(255,255,255,.2);
  --line:rgba(255,255,255,.12);
  --r:clamp(24px,2.4vw,40px);
  --ease:cubic-bezier(.2,.7,.2,1); --ease-io:cubic-bezier(.65,0,.25,1);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100svh;
  background:var(--zemin);
  overflow:hidden;
}
::selection{background:var(--altin-2);color:#111}

/* ——— film greni ——— */
body::after{content:"";position:fixed;inset:-50%;z-index:10;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:gren 1.2s steps(6) infinite}
@keyframes gren{0%{transform:translate(0,0)}33%{transform:translate(-3%,2%)}66%{transform:translate(2%,-3%)}100%{transform:translate(-1%,1%)}}

/* ——— zemin: panelle aynı görsel, karartılmış, çok yavaş nefes alır ——— */
.zemin{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--zemin)}
.zemin::before{content:"";position:absolute;inset:-4%;
  background:url(/img/cam-zemin.png) center/cover no-repeat;
  filter:grayscale(.2) contrast(1.05) brightness(.78);
  opacity:0;transform:scale(1.08);
  animation:zeminGel 2.4s .1s var(--ease) forwards,nefes 40s 2.5s ease-in-out infinite alternate}
.zemin::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 75% 70% at 50% 50%,transparent 0%,rgba(8,9,11,.25) 70%,rgba(8,9,11,.6) 100%),
    linear-gradient(180deg,rgba(8,9,11,.12),rgba(8,9,11,.3))}
@keyframes zeminGel{to{opacity:1;transform:scale(1.06)}}
@keyframes nefes{from{translate:0 0}to{translate:-2% -1.5%}}

/* ——— sahne: ekranı dolduran koyu cam pano ——— */
.sahne{position:relative;z-index:2;height:100vh;height:100svh;padding:clamp(10px,1.4vw,24px)}
.pano{
  position:relative;height:100%;border-radius:var(--r);
  display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(155deg,var(--glass2),var(--glass) 60%);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(30px) saturate(150%);backdrop-filter:blur(30px) saturate(150%);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 1px rgba(255,255,255,.02),0 40px 80px -40px rgba(0,0,0,.9);
  opacity:0;transform:scale(.985);
  animation:panoGel 1.4s .3s var(--ease) forwards;
}
@keyframes panoGel{to{opacity:1;transform:none}}

/* kenarda dönen ince ışık */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.pano::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--a),transparent 0 64%,rgba(255,255,255,.9) 78%,rgba(255,255,255,.2) 86%,transparent 94%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:don 9s linear infinite}
@keyframes don{to{--a:360deg}}
/* camın üzerinden ara ara geçen yansıma */
.pano::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.08) 48%,rgba(255,255,255,.02) 54%,transparent 62%);
  background-size:250% 100%;background-position:120% 0;
  animation:gec 11s 3s var(--ease-io) infinite}
@keyframes gec{0%{background-position:120% 0}22%,100%{background-position:-40% 0}}

.logo-kap{position:relative;z-index:2;margin:0;font-size:0;line-height:0}
.logo{
  position:relative;display:inline-block;
  width:min(560px,80vw);aspect-ratio:3/1;
  opacity:0;filter:blur(12px);transform:scale(.97);
  animation:logoGel 1.8s .6s cubic-bezier(.2,.7,.1,1) forwards;
}
.logo img{width:100%;height:100%;display:block;object-fit:contain;
  /* katmanlı gölge (8.11, kullanıcı: daha profesyonel): temas + yakın + yumuşak + geniş ortam; arkada leke yok */
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)) drop-shadow(0 4px 6px rgba(0,0,0,.25)) drop-shadow(0 14px 22px rgba(0,0,0,.28)) drop-shadow(0 34px 48px rgba(0,0,0,.22))}
@keyframes logoGel{to{opacity:1;filter:blur(0);transform:none}}
/* Krom parıltı: logonun kendi pikselleriyle maskelenir, logo değiştirilmez. */
.logo-parilti{
  position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(/img/gngr-logo.png) center/contain no-repeat;
          mask:url(/img/gngr-logo.png) center/contain no-repeat;
  background:linear-gradient(105deg,transparent 0%,transparent 42%,rgba(255,255,255,.7) 50%,transparent 58%,transparent 100%);
  background-size:300% 100%;background-position:120% 0;
  mix-blend-mode:overlay;
  animation:parilti 9s 2.6s ease-in-out infinite;
}
@keyframes parilti{0%{background-position:120% 0}24%,100%{background-position:-20% 0}}

/* ——— hareket azaltma: durağan tek kare ——— */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .logo-parilti,.pano::after{display:none}
  body::after{animation:none}
  .pano::before{--a:200deg}
}