/* MAİD — açılış (splash) ekranı */

:root{
  --red:#d02e26;
  --red-hot:#f04236;
  --ink:#000000;
  --bg-0:#050507;
  --bg-1:#0b0b10;
  --bg-2:#131318;
  --light:#ffffff;

  /* tüm logo kilidinin genişliği — sembol ve yazı bundan türetilir */
  --lockup-w: clamp(260px, min(46vw, 96vh), 620px);
  --ease-out: cubic-bezier(.16,.84,.28,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg-0);
  color:var(--light);
  font-family:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ─────────────────────────  ARKA PLAN  ───────────────────────── */

.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; background:
  radial-gradient(120% 90% at 50% 8%, var(--bg-2) 0%, var(--bg-1) 38%, var(--bg-0) 72%); }

/* ince teknik grid */
.bg-grid{
  position:absolute; inset:-2px;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(78% 70% at 50% 50%, #000 25%, transparent 82%);
  -webkit-mask-image:radial-gradient(78% 70% at 50% 50%, #000 25%, transparent 82%);
  opacity:0;
  animation:grid-in 2.4s var(--ease-soft) .35s forwards, grid-drift 34s linear infinite;
}
@keyframes grid-in{ to{ opacity:.55; } }
@keyframes grid-drift{ from{ background-position:0 0,0 0; } to{ background-position:72px 72px,72px 72px; } }

/* yumuşak ışık alanları */
.bg-glow{
  position:absolute; border-radius:50%; filter:blur(90px);
  opacity:0; transform:translate(-50%,-50%); will-change:transform,opacity;
}
.bg-glow--red{
  width:58vmax; height:58vmax; left:50%; top:46%;
  background:radial-gradient(circle, rgba(208,46,38,.42) 0%, rgba(208,46,38,.12) 42%, transparent 68%);
  animation:glow-in 2.6s var(--ease-soft) .2s forwards, float-a 18s ease-in-out 2s infinite;
}
.bg-glow--cool{
  width:46vmax; height:46vmax; left:22%; top:78%;
  background:radial-gradient(circle, rgba(120,140,190,.20) 0%, transparent 66%);
  animation:glow-in 3s var(--ease-soft) .5s forwards, float-b 22s ease-in-out 2s infinite;
}
@keyframes glow-in{ from{ opacity:0; transform:translate(-50%,-50%) scale(.7); }
                    to  { opacity:1; transform:translate(-50%,-50%) scale(1); } }
@keyframes float-a{ 0%,100%{ transform:translate(-50%,-50%) scale(1); }
                    50%   { transform:translate(-52%,-46%) scale(1.09); } }
@keyframes float-b{ 0%,100%{ transform:translate(-50%,-50%) scale(1); }
                    50%   { transform:translate(-44%,-56%) scale(1.14); } }

/* bağlantı ağı (canvas) */
.bg-net{ position:absolute; inset:0; width:100%; height:100%; opacity:0; animation:net-in 3s var(--ease-soft) .8s forwards; }
@keyframes net-in{ to{ opacity:.85; } }

.bg-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(115% 85% at 50% 45%, transparent 42%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.88) 100%);
}

/* film grenliği */
.bg-noise{
  position:absolute; inset:-150%; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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='.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grain 1.1s steps(4) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(3%,3%)}
}

/* ekranı geçen ince ışık süpürmesi */
.bg-sweep{
  position:absolute; top:-30%; left:-40%; width:38%; height:170%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.06) 45%, transparent);
  transform:rotate(12deg); filter:blur(26px);
  animation:sweep 9s ease-in-out 4.6s infinite;
}
@keyframes sweep{ 0%{ left:-45%; opacity:0 } 12%{opacity:1} 55%{ left:118%; opacity:0 } 100%{ left:118%; opacity:0 } }

/* ─────────────────────────  LOGO  ───────────────────────── */

.stage{
  position:relative; z-index:2;
  height:100dvh; display:grid; place-items:center;
  padding:6vmin 6vmin clamp(120px, 19vh, 180px);   /* altta footer için pay */
}

.lockup{
  width:var(--lockup-w); max-width:100%; min-width:0;   /* grid öğesinin içerik minimumu taşmasın */
  display:flex; flex-direction:column; align-items:center; gap:clamp(18px,3.2vmin,40px);
  opacity:0;
  animation:lockup-in 1.2s var(--ease-out) .15s forwards, breathe 7s ease-in-out 3.6s infinite;
}
@keyframes lockup-in{ from{ opacity:0; transform:scale(.965) } to{ opacity:1; transform:scale(1) } }
@keyframes breathe{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.014) } }

/* — sembol — */
.mark{
  width:calc(var(--lockup-w) * .42); max-width:42%; height:auto; overflow:visible;
  animation:mark-settle 2.2s var(--ease-out) .1s both;
}
@keyframes mark-settle{ from{ transform:rotate(-38deg) scale(.72) } to{ transform:rotate(0) scale(1) } }

.ring{
  fill:none; stroke:rgba(255,255,255,.16); stroke-width:1.2;
  stroke-dasharray:34 22; opacity:0;
  transform-box:fill-box; transform-origin:center;
  animation:ring-in .9s var(--ease-soft) 1.5s forwards, spin 26s linear 1.5s infinite;
}
.ring--2{
  stroke:rgba(208,46,38,.55); stroke-dasharray:6 92;
  animation:ring-in .9s var(--ease-soft) 1.7s forwards, spin 13s linear 1.7s infinite reverse;
}
@keyframes ring-in{ to{ opacity:1 } }
@keyframes spin{ to{ transform:rotate(360deg) } }

/* kanatlar kendi açılarında dışarıdan merkeze doğru toplanır */
.blade{
  transform-box:fill-box; transform-origin:50% 100%;   /* uç nokta = merkeze bakan sivri uç */
  opacity:0;
  animation:blade-in 1s var(--ease-out) forwards;
  animation-delay:calc(.3s + var(--i) * .09s);
}
.blade--light{ fill:#fff; }
.blade--red  { fill:var(--red); }

@keyframes blade-in{
  0%  { opacity:0; transform:translateY(-58px) scale(.78); }
  55% { opacity:1; }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

.dot{
  fill:var(--red);
  transform-box:fill-box; transform-origin:center;
  opacity:0;
  animation:dot-pop .8s cubic-bezier(.2,1.5,.35,1) 1.05s forwards, dot-pulse 3.4s ease-in-out 2.4s infinite;
}
@keyframes dot-pop{ from{ opacity:0; transform:scale(0) } to{ opacity:1; transform:scale(1) } }
@keyframes dot-pulse{ 0%,100%{ filter:drop-shadow(0 0 0 rgba(208,46,38,0)) }
                      50%    { filter:drop-shadow(0 0 14px rgba(208,46,38,.85)) } }

/* — yazı markası (logonun kendi tipografisi) — */
.wordmark{ position:relative; width:100%; min-width:0; line-height:0; }
.wordmark img{
  display:block; width:100%; max-width:100%; height:auto;
  opacity:0;
  animation:word-in 1.4s var(--ease-out) 1.15s forwards;
}
@keyframes word-in{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:translateY(0) } }

/* harflerin üzerinden geçen ışık parıltısı — maske logonun kendi formu */
.wordmark-wipe{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
  background-size:260% 100%;
  -webkit-mask:url("../img/wordmark-light.png") center/100% 100% no-repeat;
          mask:url("../img/wordmark-light.png") center/100% 100% no-repeat;
  mix-blend-mode:screen; opacity:0;
  animation:shine 7.5s var(--ease-soft) 1.5s infinite;
}
@keyframes shine{
  0%  { opacity:0; background-position:135% 0 }
  4%  { opacity:1 }
  20% { opacity:1 }
  24% { opacity:0; background-position:-135% 0 }
  100%{ opacity:0; background-position:-135% 0 }
}

/* ─────────────────────────  ALT YÜKLEME ÇİZGİSİ  ───────────────────────── */

.loader{
  position:fixed; left:50%; bottom:clamp(96px,15vh,142px); transform:translateX(-50%);
  width:clamp(90px,12vw,150px); height:1.5px; z-index:3;
  background:rgba(255,255,255,.12); border-radius:2px; overflow:hidden;
  opacity:0; animation:fade-in .8s ease 2.2s forwards;
}
.loader span{
  position:absolute; inset:0 auto 0 0; width:40%;
  background:linear-gradient(90deg, transparent, var(--red-hot), transparent);
  animation:load 1.9s var(--ease-soft) 2.4s infinite;
}
@keyframes fade-in{ to{ opacity:1 } }
@keyframes load{ 0%{ transform:translateX(-110%) } 100%{ transform:translateX(360%) } }

/* ─────────────────────────  ALT BİLGİ  ───────────────────────── */

.footer{
  position:fixed; left:0; right:0; bottom:0; z-index:3;
  padding:0 5vw clamp(20px,3.4vh,38px);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  text-align:center;
  opacity:0; animation:fade-in 1.4s var(--ease-soft) 2.7s forwards;
}

.footer-addr,
.footer-copy{
  margin:0; font-style:normal; text-transform:uppercase;
  color:rgba(255,255,255,.46);
}

.footer-addr{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.55em 1.05em;
  font-size:clamp(9.5px,1.02vw,11.5px); letter-spacing:.2em; line-height:1.6;
}
.footer-addr .sep{
  width:3px; height:3px; border-radius:50%; background:var(--red);
  flex:none; box-shadow:0 0 6px rgba(208,46,38,.7);
}

.footer-copy{
  font-size:clamp(9px,.92vw,10.5px); letter-spacing:.15em; line-height:1.6;
  color:rgba(255,255,255,.28);
}

/* ─────────────────────────  UYARLAMALAR  ───────────────────────── */

@media (max-width:640px){
  :root{ --lockup-w: min(80vw, 380px); }
  .bg-grid{ background-size:52px 52px; }
  .footer-addr{ gap:.4em .8em; letter-spacing:.16em; }
  .footer-addr .sep{ display:none; }        /* dar ekranda satır satır okunsun */
  .footer-addr span{ flex:0 0 100%; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; }
  .lockup,.wordmark img,.blade,.dot,.ring,.bg-grid,.bg-net,.loader,.footer{ opacity:1; transform:none; }
  .bg-glow{ opacity:1; transform:translate(-50%,-50%); }
  .bg-sweep,.wordmark-wipe{ display:none; }
}