/* ===== CYBERPUNK ANIMASYONLAR ===== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Share+Tech+Mono&display=swap');

/* --- Tam ekran giriş (intro) --- */
#intro{
  position:fixed;inset:0;z-index:9999;background:#05070a;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;transition:opacity .8s ease,visibility .8s;
}
#intro.done{opacity:0;visibility:hidden}
/* matrix yagmur canvas */
#matrix{position:absolute;inset:0;opacity:.35}
/* izgara zemin */
#intro::before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(52,152,219,.08) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(231,76,60,.08) 1px,transparent 1px);
  background-size:40px 40px;
  transform:perspective(400px) rotateX(60deg) scale(2);
  animation:gridmove 6s linear infinite;
}
@keyframes gridmove{from{background-position:0 0}to{background-position:0 40px}}
/* baslik */
#intro .glitch{
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:clamp(2.2em,8vw,5em);
  color:#fff;letter-spacing:4px;position:relative;text-transform:uppercase;
  text-shadow:0 0 10px #3498db,0 0 20px #3498db;
}
#intro .glitch::before,#intro .glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;overflow:hidden;
}
#intro .glitch::before{color:#e74c3c;animation:glitch1 2s infinite linear alternate-reverse;clip-path:inset(0 0 55% 0)}
#intro .glitch::after{color:#3498db;animation:glitch2 1.5s infinite linear alternate-reverse;clip-path:inset(55% 0 0 0)}
@keyframes glitch1{0%{transform:translate(0)}20%{transform:translate(-3px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(3px,1px)}100%{transform:translate(0)}}
@keyframes glitch2{0%{transform:translate(0)}20%{transform:translate(3px,-2px)}40%{transform:translate(2px,2px)}60%{transform:translate(-3px,-1px)}100%{transform:translate(0)}}
#intro .sub{
  font-family:'Share Tech Mono',monospace;color:#2ecc71;margin-top:14px;font-size:clamp(.9em,2.5vw,1.3em);
  letter-spacing:2px;text-shadow:0 0 8px #2ecc71;
}
#intro .bar{width:min(60%,420px);height:4px;background:#1b2631;margin-top:34px;border-radius:2px;overflow:hidden}
#intro .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e74c3c,#3498db);animation:load 2.4s ease forwards}
@keyframes load{to{width:100%}}
#intro .skip{position:absolute;bottom:24px;color:#666;font-family:'Share Tech Mono';font-size:.8em;cursor:pointer}
#intro .skip:hover{color:#3498db}

/* --- Genel cyberpunk dokunuşlar --- */
.cyber-title{
  font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:2px;
  background:linear-gradient(90deg,#3498db,#e74c3c);-webkit-background-clip:text;background-clip:text;color:transparent;
  position:relative;
}
.neon{border:1px solid #3498db;box-shadow:0 0 8px rgba(52,152,219,.5),inset 0 0 8px rgba(52,152,219,.2)}
.neon:hover{box-shadow:0 0 16px rgba(52,152,219,.8),inset 0 0 12px rgba(52,152,219,.3);border-color:#e74c3c}

/* scroll-reveal */
.reveal{opacity:0;transform:translateY(30px);transition:.7s ease}
.reveal.in{opacity:1;transform:none}

/* hero yazı yazma efekti */
.typewriter{font-family:'Share Tech Mono',monospace;color:var(--green);overflow:hidden;white-space:nowrap;border-right:2px solid var(--green);width:0;animation:typing 3s steps(40) .5s forwards,blink 1s step-end infinite}
@keyframes typing{to{width:100%}}
@keyframes blink{50%{border-color:transparent}}