:root {
  --accent:    #8b5cf6;
  --accent2:   #3b82f6;
  --accent-soft: rgba(139,92,246,0.16);
  --discord:   #5865F2;
  --spotify:   #1DB954;
  --bg:        #03040a;
  --panel:     rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.10);
  --text:      #f8f8fb;
  --muted:     rgba(255,255,255,0.72);
  --soft:      rgba(255,255,255,0.56);
  --line:      rgba(255,255,255,0.12);
  --font:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display:   'Space Grotesk', 'Inter', sans-serif;
  --wordmark:  'Orbitron', 'Space Grotesk', sans-serif;
  --mono:      'Share Tech Mono', monospace;
  --mono-i18n: 'JetBrains Mono', 'Share Tech Mono', monospace;
  --spotify-font: 'Sora', 'Inter', system-ui, sans-serif;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

html,body{
  min-height:100%; min-height:100dvh; overflow-x:hidden;
  font-family:var(--font);
  background:
    radial-gradient(circle at top left, rgba(139,92,246,.18), transparent 32%),
    radial-gradient(circle at 80% 12%, rgba(59,130,246,.15), transparent 24%),
    radial-gradient(circle at bottom right, rgba(88,101,242,.12), transparent 28%),
    linear-gradient(135deg, #03040a 0%, #070812 45%, #020307 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
body::before,
body::after{
  content:'';
  position:fixed;
  inset:-15%;
  pointer-events:none;
  z-index:0;
  filter:blur(70px);
  opacity:.65;
}
body::before{
  background:radial-gradient(circle at 15% 20%, rgba(139,92,246,.22), transparent 30%);
  animation:driftA 16s ease-in-out infinite alternate;
}
body::after{
  background:radial-gradient(circle at 85% 80%, rgba(59,130,246,.16), transparent 30%);
  animation:driftB 18s ease-in-out infinite alternate;
}
@keyframes driftA{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(3%,2%,0) scale(1.07)}}
@keyframes driftB{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-3%,-2%,0) scale(1.06)}}

/* CSS YILDIZLAR */
.star-layer{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
#s1,#s2,#s3{position:absolute;top:0;left:0;background:transparent;}
#s1::after,#s2::after,#s3::after{content:'';position:absolute;top:2000px;left:0;background:transparent;}

#s1{
  width:1px;height:1px;
  animation:starMove 60s linear infinite;
  box-shadow:
    120px 450px #fff,340px 80px #fff,780px 330px #fff,55px 900px #fff,
    450px 1200px #fff,890px 60px #fff,200px 750px #fff,670px 520px #fff,
    1100px 300px #fff,300px 1400px #fff,500px 200px #fff,960px 880px #fff,
    150px 1600px #fff,730px 1100px #fff,1400px 400px #fff,820px 700px #fff,
    60px 1800px #fff,1200px 150px #fff,430px 1700px #fff,990px 1500px #fff,
    1650px 550px #fff,250px 600px #fff,1050px 1200px #fff,1800px 900px #fff,
    370px 1300px #fff,1500px 1700px #fff,640px 1800px #fff,90px 250px #fff,
    1750px 100px #fff,480px 950px #fff,1300px 700px #fff,710px 1600px #fff,
    1600px 1400px #fff,35px 1100px #fff,1900px 600px #fff,580px 400px #fff,
    1450px 1000px #fff,820px 1900px #fff,170px 350px #fff,1100px 1800px #fff,
    940px 450px #fff,1700px 1200px #fff,280px 1950px #fff,1350px 200px #fff,
    760px 850px #fff,1850px 1600px #fff,410px 70px #fff,1250px 1400px #fff,
    600px 1500px #fff,1000px 600px #fff,1550px 300px #fff,850px 1750px #fff,
    400px 1050px #fff,1950px 800px #fff,70px 1950px #fff,1450px 1600px #fff;
}
#s1::after{width:1px;height:1px;box-shadow:inherit;}

#s2{
  width:2px;height:2px;
  animation:starMove 100s linear infinite;
  box-shadow:
    200px 300px rgba(139,92,246,.7),700px 150px rgba(139,92,246,.5),
    1400px 600px rgba(59,130,246,.5),500px 1000px rgba(139,92,246,.6),
    900px 800px rgba(255,255,255,.8),1600px 200px rgba(59,130,246,.4),
    300px 1600px rgba(255,255,255,.7),1100px 400px rgba(139,92,246,.4),
    800px 1800px rgba(255,255,255,.8),1800px 1000px rgba(59,130,246,.5),
    400px 500px rgba(255,255,255,.7),1200px 1600px rgba(139,92,246,.6),
    650px 700px rgba(255,255,255,.8),1700px 1400px rgba(59,130,246,.4),
    100px 1200px rgba(255,255,255,.7),1500px 800px rgba(139,92,246,.5),
    950px 1100px rgba(255,255,255,.8),350px 1900px rgba(59,130,246,.4),
    1350px 300px rgba(255,255,255,.7),750px 450px rgba(139,92,246,.5),
    1850px 700px rgba(255,255,255,.6),550px 1350px rgba(59,130,246,.4);
}
#s2::after{width:2px;height:2px;box-shadow:inherit;}

#s3{
  width:3px;height:3px;
  animation:starMove 150s linear infinite;
  box-shadow:
    450px 900px rgba(139,92,246,.6),1100px 500px rgba(255,255,255,.9),
    700px 1400px rgba(59,130,246,.7),1600px 1100px rgba(139,92,246,.5),
    250px 700px rgba(255,255,255,.9),1300px 1700px rgba(59,130,246,.6),
    850px 300px rgba(255,255,255,.9),1800px 500px rgba(139,92,246,.5),
    500px 1700px rgba(59,130,246,.7),1200px 900px rgba(255,255,255,.9);
}
#s3::after{width:3px;height:3px;box-shadow:inherit;}

@keyframes starMove{from{transform:translateY(0)}to{transform:translateY(-2000px)}}

/* VİDEO */
#video{
  position:fixed;inset:0;width:100vw;height:100vh;
  object-fit:cover;z-index:2;opacity:0;transition:opacity 1.4s ease;
  background:transparent;
}
#video.show{opacity:1;}
.video-overlay{
  position:fixed;inset:0;z-index:3;
  background:rgba(0,0,0,.5);pointer-events:none;
}

/* CYBER RAIN CANVAS */
#bg-fx{
  position:fixed;inset:0;z-index:1;
  width:100%;height:100%;
  pointer-events:none;
  opacity:1;
}

/* OVERLAY */
.overlay{
  position:fixed;inset:0;background:linear-gradient(180deg, rgba(5,6,11,.62), rgba(8,9,16,.72));
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  z-index:1000;cursor:pointer;
  transition:opacity 1.2s cubic-bezier(.2,.8,.2,1);
  user-select:none;
  overflow:hidden;
}
.overlay-bg{
  position:absolute;inset:-10%;
  background:
    radial-gradient(circle at 20% 20%, rgba(139,92,246,.38), transparent 28%),
    radial-gradient(circle at 80% 20%, rgba(59,130,246,.24), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(88,101,242,.20), transparent 34%);
  filter:blur(16px);
  animation:floatBg 13s ease-in-out infinite alternate;
}

/* NYRAXE WORDMARK — giriş ekranı, panelin ÜSTÜNDE, kendi hizasında */
.mega-word-wrap{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:26px;
  opacity:0;transform:translateY(16px);
  animation:overlayRise 1s ease forwards .02s;
}
.mega-word{
  position:relative;z-index:2;
  font-family:var(--wordmark);
  font-weight:800;
  font-size:clamp(2.6rem, 9vw, 5rem);
  letter-spacing:.14em;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  user-select:none;
  padding:0 .06em;
  overflow:visible;
  display:inline-flex;
}

/* Her harf ayrı bir span — sabit beyaz, hafif sürekli glow */
.mw-letter{
  display:inline-block;
  margin-right:.14em;
  color:#fff;
  text-shadow:
    0 0 10px rgba(255,255,255,.55),
    0 0 22px rgba(255,255,255,.3),
    0 0 44px rgba(255,255,255,.14);
}
.mw-letter:last-child{margin-right:0;}
.mw-letter.mw-space{width:.3em;}

/* GLOW — tek, parlak bir ışık; soldan sağa, sinüs eğrisi gibi dalgalanarak akar, loop */
.mega-word::after{
  content:attr(data-text);
  position:absolute;inset:0;
  color:transparent;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.7) 30%, rgba(255,255,255,.25) 55%, transparent 75%);
  background-repeat:no-repeat;
  background-size:26% 240%;
  -webkit-background-clip:text;background-clip:text;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:glowWave 3.8s linear infinite;
}
@keyframes glowWave{
  0%   {background-position:-15%   50%;}
  8.33%{background-position:-4.17% 76%;}
  16.67%{background-position:6.67% 76%;}
  25%  {background-position:17.5%  50%;}
  33.33%{background-position:28.33% 24%;}
  41.67%{background-position:39.17% 24%;}
  50%  {background-position:50%    50%;}
  58.33%{background-position:60.83% 76%;}
  66.67%{background-position:71.67% 76%;}
  75%  {background-position:82.5%  50%;}
  83.33%{background-position:93.33% 24%;}
  91.67%{background-position:104.17% 24%;}
  100% {background-position:115%   50%;}
}

.mega-word-rule{
  margin-top:12px;width:120px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, rgba(139,92,246,.9), rgba(59,130,246,.9), transparent);
  box-shadow:0 0 12px rgba(139,92,246,.7);
  position:relative;overflow:hidden;
}
.mega-word-rule::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
  width:40%;
  animation:ruleSweep 3.2s ease-in-out infinite;
}
.mega-word-tag{
  margin-top:10px;
  font-family:var(--mono);
  font-size:.62rem;
  letter-spacing:.5em;
  color:rgba(255,255,255,.4);
  padding-left:.5em;
}
@keyframes ruleSweep{0%{transform:translateX(-150%)}60%,100%{transform:translateX(350%)}}

@media(max-width:480px){
  .mega-word{letter-spacing:.1em;}
  .mega-word-tag{letter-spacing:.36em;}
}
.overlay-bg::before{
  content:'';position:absolute;inset:-20% 0;
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.06) 30%, transparent 60%, rgba(255,255,255,.06) 100%);
  transform:translateY(-100%);
  animation:flowDown 9s ease-in-out infinite;
}
@keyframes floatBg{0%{transform:scale(1.02) translate3d(0,-1%,0)}100%{transform:scale(1.12) translate3d(-2%,2%,0)}}
@keyframes flowDown{0%{transform:translateY(-110%)}100%{transform:translateY(140%)}}
.overlay-panel{
  position:relative;z-index:1;
  padding:34px 46px;border-radius:22px;
  border:1px solid transparent;
  background:
    linear-gradient(rgba(8,10,17,.74),rgba(8,10,17,.74)) padding-box,
    linear-gradient(135deg, rgba(167,139,250,.85) 0%, rgba(59,130,246,.55) 32%, rgba(139,92,246,.18) 52%, rgba(59,130,246,.6) 75%, rgba(167,139,250,.85) 100%) border-box;
  background-size:100% 100%, 260% 260%;
  animation:borderFlow 9s ease-in-out infinite;
  box-shadow:0 30px 90px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(20px) saturate(140%);
  text-align:center;
  overflow:hidden;
}
@keyframes borderFlow{
  0%{background-position:0 0, 0% 50%}
  50%{background-position:0 0, 100% 50%}
  100%{background-position:0 0, 0% 50%}
}
.hud-corner{
  position:absolute;width:20px;height:20px;
  pointer-events:none;z-index:2;
  opacity:.9;
  filter:drop-shadow(0 0 6px rgba(139,92,246,.7));
}
.hud-corner::before,.hud-corner::after{content:'';position:absolute;background:linear-gradient(90deg,#c4b5fd,#60a5fa);border-radius:2px;}
.hud-corner::before{width:100%;height:2px;top:0;left:0;}
.hud-corner::after{width:2px;height:100%;top:0;left:0;}
.hud-tl{top:-1px;left:-1px;}
.hud-tr{top:-1px;right:-1px;transform:scaleX(-1);}
.hud-bl{bottom:-1px;left:-1px;transform:scaleY(-1);}
.hud-br{bottom:-1px;right:-1px;transform:scale(-1,-1);}
@media(max-width:480px){
  .hud-corner{width:14px;height:14px;}
}
.overlay-panel::before{
  content:'';
  position:absolute;
  inset:-45% auto auto 50%;
  width:150%;
  height:260%;
  background:conic-gradient(from 180deg, transparent 0%, rgba(139,92,246,.28) 8%, rgba(59,130,246,.22) 30%, transparent 50%, rgba(88,101,242,.24) 72%, transparent 100%);
  transform:translateX(-50%) rotate(-12deg);
  filter:blur(48px);
  animation:beamSweep 10s linear infinite;
  opacity:1;
  pointer-events:none;
}
.overlay-panel::after{
  content:'';
  position:absolute;
  inset:-28px;
  border-radius:28px;
  background:radial-gradient(circle at center, rgba(255,255,255,.10), transparent 65%);
  filter:blur(34px);
  pointer-events:none;
  animation:glowBurst 2.2s ease-in-out infinite alternate;
}
@keyframes beamSweep{0%{transform:translateX(-50%) rotate(-12deg) translateY(-22%)}50%{transform:translateX(-50%) rotate(-12deg) translateY(22%)}100%{transform:translateX(-50%) rotate(-12deg) translateY(-22%)}}
@keyframes glowBurst{0%{transform:scale(.95);opacity:.7}100%{transform:scale(1.08);opacity:1}}
.overlay::before,
.overlay::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
}
.overlay::before{
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.12) 45%, transparent 70%);
  transform:translateX(-160%);
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1);
}
.overlay::after{
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  transform:translateY(-160%);
  transition:transform 1.6s cubic-bezier(.2,.8,.2,1) .08s;
}
.overlay.opening::before{transform:translateX(160%);}
.overlay.opening::after{transform:translateY(160%);}
.overlay.hidden{opacity:0;pointer-events:none;}
.overlay-scanline{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,
    rgba(255,255,255,.012) 2px,rgba(255,255,255,.012) 4px
  );
}

.enter-text{
  display:inline-flex;align-items:center;gap:22px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.08rem,3.2vw,1.42rem);
  letter-spacing:.46em;
  text-transform:uppercase;
  color:#f6f4ff;
  text-shadow:
    0 0 14px rgba(139,92,246,.4),
    0 0 32px rgba(59,130,246,.22),
    0 0 60px rgba(139,92,246,.12);
  animation:enterBreathe 4.2s ease-in-out infinite;
}
.enter-text-line{
  width:38px;height:1px;flex:none;
  background:linear-gradient(90deg, transparent, rgba(196,181,253,.5));
}
.enter-text-line.r{background:linear-gradient(90deg, rgba(196,181,253,.5), transparent);}
@keyframes enterBreathe{
  0%,100%{
    text-shadow:0 0 14px rgba(139,92,246,.4),0 0 32px rgba(59,130,246,.22),0 0 60px rgba(139,92,246,.12);
    opacity:.94;
  }
  50%{
    text-shadow:0 0 20px rgba(139,92,246,.55),0 0 44px rgba(59,130,246,.32),0 0 78px rgba(139,92,246,.2);
    opacity:1;
  }
}
@media(max-width:480px){
  .enter-text{letter-spacing:.28em;gap:12px;}
  .enter-text-line{width:20px;}
}

.tap-hint{
  font-family:var(--mono);font-size:.75rem;
  color:rgba(255,255,255,.72);
  letter-spacing:.26em;
  text-shadow:0 0 8px rgba(139,92,246,.24), 0 0 16px rgba(59,130,246,.16);
  animation:blinkAnim 1.4s step-end infinite;
}

.status-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.72rem;
  color:rgba(255,255,255,.8);letter-spacing:.32em;font-weight:700;
  text-shadow:0 0 10px rgba(139,92,246,.22);
}
.status-dot{
  width:7px;height:7px;border-radius:50%;
  background:#34d399;
  box-shadow:0 0 6px #34d399, 0 0 14px rgba(52,211,153,.7);
  animation:dotPulse 1.6s ease-in-out infinite;
  flex:none;
}
@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

.security-line{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:.6rem;
  color:rgba(255,255,255,.42);letter-spacing:.16em;
  padding:7px 14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}
.security-line svg{flex:none;opacity:.75;}
@keyframes blinkAnim{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes overlayRise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ÜST KONTROLLER */
.top-controls{
  position:fixed;top:18px;right:18px;z-index:100;
  display:none;gap:10px;
}
.top-controls.show{display:flex;}
.ctrl-btn{
  width:42px;height:42px;border-radius:50%;
  background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.1);
  color:white;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;
}
.ctrl-btn:hover{background:rgba(139,92,246,.15);border-color:var(--accent);}

.eq{display:flex;align-items:flex-end;gap:2px;height:14px;}
.eq span{
  width:3px;border-radius:2px;background:var(--accent);
  animation:eqBar .8s ease-in-out infinite alternate;
}
.eq span:nth-child(1){height:5px;animation-delay:0s;}
.eq span:nth-child(2){height:12px;animation-delay:.15s;}
.eq span:nth-child(3){height:8px;animation-delay:.3s;}
.eq span:nth-child(4){height:14px;animation-delay:.1s;}
@keyframes eqBar{to{transform:scaleY(.25)}}

.mute-icon{display:none;color:rgba(255,255,255,.5);}
.ctrl-btn.muted .eq{display:none;}
.ctrl-btn.muted .mute-icon{display:block;}
.ctrl-btn.muted{border-color:rgba(255,255,255,.18);}

/* KART */
@property --beam-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
html.pre-enter, html.pre-enter body{
  overflow:hidden !important;
}
/* Giriş ekranı ("CLICK TO ENTER") hâlâ aktifken, altındaki
   kaydır göstergesi ve yeni bölümler yarı saydam overlay'in
   arkasından sızıp görünmesin. */
html.pre-enter .scroll-cue,
html.pre-enter .site-section,
html.pre-enter .site-footer{
  visibility:hidden;
}

/* HERO ALANI — kart bu alanda ortalanır, viewport yüksekliğinde.
   Altta bilinçli bir boşluk bırakılır ki sonraki bölümün başlığı
   ekranın en altında görünsün — sayfanın kaydırılabilir olduğu
   ilk bakışta anlaşılsın. Boşluk, .site-section'ın üst padding'ini
   aşacak kadar büyük olmalı, yoksa sadece boş alan görünür. */
.hero-slot{
  position:relative;
  width:100%;
  min-height:100vh; min-height:calc(100dvh - 132px);
  z-index:20;
}
@media(max-height:560px){
  .hero-slot{min-height:100vh; min-height:100dvh;}
}

.card{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.90);
  width:360px;
  max-height:min(96vh, calc(100dvh - 132px - 76px));
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  --beam-angle:0deg;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035)) padding-box,
    rgba(8,10,16,.88) padding-box,
    conic-gradient(from var(--beam-angle),
      rgba(139,92,246,0) 0deg,
      rgba(139,92,246,.95) 18deg,
      rgba(96,165,250,.95) 40deg,
      rgba(139,92,246,0) 78deg,
      rgba(139,92,246,0) 360deg) border-box;
  backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);
  border:1.5px solid transparent;
  border-radius:24px;
  box-shadow:
    0 34px 90px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.05) inset,
    0 0 60px rgba(139,92,246,.08);
  opacity:0;
  transition:opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1), box-shadow .3s ease;
  animation:cardBeamSpin 5s linear infinite;
  z-index:20;user-select:none;
}
@keyframes cardBeamSpin{to{--beam-angle:360deg;}}
@media (prefers-reduced-motion: reduce){
  .card{animation:none;}
}
.card::-webkit-scrollbar{display:none;}
.card.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
.card:hover{
  box-shadow:0 30px 70px rgba(0,0,0,.85),
             0 0 50px rgba(139,92,246,.08),
             0 0 0 1px rgba(139,92,246,.1);
}
.reveal-block{
  opacity:0;
  transform:translateY(18px) scale(.98);
  filter:blur(6px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.19,1,.22,1), filter .7s ease;
}
.reveal-block.active{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}

/* BANNER */
.banner{
  height:104px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(167,139,250,.24), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(111,241,199,.16), transparent 32%),
    linear-gradient(135deg, rgba(167,139,250,.16), rgba(111,241,199,.08), rgba(7,7,12,.98));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);
}
.banner::before,
.banner::after{
  content:'';
  position:absolute;left:-10%;right:-10%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(59,130,246,.95), rgba(139,92,246,.95), transparent);
  box-shadow:0 0 12px rgba(59,130,246,.5), 0 0 24px rgba(139,92,246,.22);
  animation:flowLines 4.8s linear infinite;
  opacity:.9;
}
.banner::before{top:24%;animation-delay:0s;}
.banner::after{top:68%;animation-delay:1.6s;}
@keyframes flowLines{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.banner-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:18px 18px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 95%);
}
.banner-grid::before,
.banner-grid::after{
  content:'';
  position:absolute;inset:0;
  pointer-events:none;
}
.banner-grid::before{
  background:linear-gradient(180deg, transparent 0%, rgba(255,255,255,.03) 45%, transparent 100%);
  animation:scanAnim 2.8s ease-in-out infinite;
}
.banner-grid::after{
  background:radial-gradient(circle at 20% 20%, rgba(139,92,246,.22), transparent 24%),
              radial-gradient(circle at 80% 60%, rgba(59,130,246,.18), transparent 22%);
  filter:blur(22px);
  animation:glowPulse 3.8s ease-in-out infinite alternate;
}
@keyframes scanAnim{0%,100%{transform:translateY(-100%)}50%{transform:translateY(100%)}}
@keyframes glowPulse{0%{transform:scale(.96);opacity:.7}100%{transform:scale(1.04);opacity:1}}
.banner-glow{
  position:absolute;bottom:-16px;left:50%;transform:translateX(-50%);
  width:240px;height:90px;
  background:radial-gradient(ellipse,rgba(139,92,246,.32),rgba(59,130,246,.16),transparent 72%);
  filter:blur(14px);
  animation:pulseGlow 3.6s ease-in-out infinite alternate;
}
@keyframes pulseGlow{0%{transform:translateX(-50%) scale(.94);opacity:.7}100%{transform:translateX(-50%) scale(1.08);opacity:1}}
.banner-dots{
  position:absolute;inset:0;
  background-image:radial-gradient(circle, rgba(255,255,255,.5) 0 1px, transparent 2px);
  background-size:24px 24px;
  opacity:.18;
  animation:driftDots 10s linear infinite;
}
@keyframes driftDots{0%{transform:translateY(0)}100%{transform:translateY(18px)}}
.banner-info{
  position:absolute;font-family:var(--mono);
  font-size:.5rem;color:rgba(255,255,255,.45);letter-spacing:.12em;
}
.bi-tl{top:8px;left:10px;}
.bi-tr{top:8px;right:10px;}
.bi-bl{bottom:8px;left:10px;}

/* AVATAR */
.profile-wrap{
  position:relative;width:90px;height:90px;
  margin:-45px auto 10px;
}
.avatar-ring{
  position:absolute;inset:-3px;border-radius:50%;
  background:conic-gradient(var(--accent),#6366f1,#3b82f6,var(--accent2),#a78bfa,var(--accent));
  animation:spinRing 3s linear infinite;
}
@keyframes spinRing{to{transform:rotate(360deg)}}
.profile-img{
  position:relative;width:90px;height:90px;border-radius:50%;
  background:linear-gradient(135deg,rgba(167,139,250,.18),rgba(8,10,16,.96));
  border:3px solid rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  font-size:2.2rem;font-weight:900;color:var(--accent);
  z-index:1;overflow:hidden;
  transition:transform .3s ease;
  box-shadow:0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
.profile-img:hover{transform:scale(1.06) rotate(5deg);}
.profile-img img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.badge-verified{
  position:absolute;bottom:2px;right:2px;z-index:2;
  width:22px;height:22px;border-radius:50%;
  background:#0095f6;border:2px solid #0d0d0d;
  display:flex;align-items:center;justify-content:center;font-size:.68rem;
}
.badge-online{
  position:absolute;top:2px;right:2px;z-index:2;
  width:13px;height:13px;border-radius:50%;
  background:var(--accent2);border:2px solid #0d0d0d;
  box-shadow:0 0 8px var(--accent2);
  animation:onlinePulse 2s ease infinite;
}
@keyframes onlinePulse{0%,100%{box-shadow:0 0 8px var(--accent2)}50%{box-shadow:0 0 18px var(--accent2)}}

/* CONTENT */
.content{padding:10px 22px 22px;text-align:center;}

/* NAME - GLITCH */
.name-wrap{display:inline-block;position:relative;margin:8px 0 2px;}
.name{
  font-family:var(--display);
  font-size:2.0rem;font-weight:700;color:#fff;
  letter-spacing:.02em;
  text-shadow:0 0 20px rgba(255,255,255,.10);
  display:block;
}
.name-ghost{
  position:absolute;top:0;left:0;width:100%;
  font-family:var(--display);
  font-size:1.85rem;font-weight:700;
  overflow:hidden;pointer-events:none;
}
.name-ghost.r{
  color:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
  animation:glitch1 5s infinite;
}
.name-ghost.b{
  color:#3b82f6;
  clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
  animation:glitch2 5s infinite;
}
@keyframes glitch1{0%,87%,100%{transform:translate(0);opacity:0}88%{transform:translate(-3px,1px);opacity:.8}90%{transform:translate(3px,-1px);opacity:.6}92%{transform:translate(-2px);opacity:.7}}
@keyframes glitch2{0%,87%,100%{transform:translate(0);opacity:0}88%{transform:translate(3px,-1px);opacity:.7}90%{transform:translate(-3px,1px);opacity:.5}92%{transform:translate(2px);opacity:.6}}

.handle{font-family:var(--mono);font-size:.72rem;color:var(--muted);letter-spacing:.1em;margin-bottom:10px;}

.title-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Space Grotesk', var(--font);font-size:.72rem; /* Space Grotesk looks site-appropriate and supports Turkish */
  font-weight:600;
  color:var(--soft);letter-spacing:.10em;text-transform:none;
  margin:0 0 16px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.title-tag::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 8px var(--accent);
  animation:onlinePulse 1.5s ease infinite;
}

/* SOSYAL */
.social-row{display:flex;justify-content:center;gap:14px;margin-bottom:26px;}
.s-btn{
  position:relative;
  width:46px;height:46px;border-radius:15px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.78);text-decoration:none;cursor:pointer;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, background .3s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  isolation:isolate;
}
.s-btn::before{
  content:'';
  position:absolute;inset:-9px;
  border-radius:19px;
  background:radial-gradient(circle, var(--glow-c, rgba(139,92,246,.22)), transparent 72%);
  filter:blur(3px); /* reduce blur */
  opacity:.22;
  z-index:-1;
  pointer-events:none;
  animation:sBtnGlowPulse 2.8s ease-in-out infinite;
}
.s-btn{color:var(--soft);} /* default icon color */
.s-btn.discord{--glow-c:rgba(88,101,242,.28); color:var(--discord);} 
.s-btn.spotify{--glow-c:rgba(30,185,84,.28); color:var(--spotify);} 
.s-btn.instagram{--glow-c:rgba(139,92,246,.28); color:var(--accent);} 
.s-btn.github{--glow-c:rgba(255,255,255,.38); color:var(--muted);} 
@keyframes sBtnGlowPulse{
  0%,100%{opacity:.35;transform:scale(.94);}
  50%{opacity:.7;transform:scale(1.05);}
}
@media (prefers-reduced-motion: reduce){
  .s-btn::before{animation:none;opacity:.45;}
}
.s-icon{
  display:block;width:20px;height:20px;object-fit:contain;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), filter .28s ease;
  will-change:transform,filter;
}
.s-btn.discord .s-icon{filter:drop-shadow(0 0 6px rgba(88,101,242,.24));}
.s-btn.spotify .s-icon{filter:drop-shadow(0 0 6px rgba(30,185,84,.24));}
.s-btn.instagram .s-icon{filter:drop-shadow(0 0 6px rgba(139,92,246,.24));}
.s-btn.github .s-icon{filter:drop-shadow(0 0 10px rgba(255,255,255,.32));}
.s-btn-label{
  position:absolute;top:100%;left:50%;
  margin-top:8px;
  transform:translateX(-50%);
  white-space:nowrap;
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
  pointer-events:none;
}
.s-btn:hover,
.s-btn:focus-visible{
  transform:translateY(-3px) scale(1.05);
  color:#fff;
  outline:none;
}
.s-btn:hover::before,
.s-btn:focus-visible::before{
  opacity:0.9;
  animation-play-state:paused;
  transform:scale(1.06); /* smaller scale to avoid strong blur */
}
.s-btn:hover .s-btn-label,
.s-btn:focus-visible .s-btn-label{
  opacity:1;
  visibility:visible;
}
.s-btn:active{transform:translateY(-1px) scale(.97);}

.s-btn.discord:hover{border-color:var(--discord);background:rgba(88,101,242,.12);box-shadow:0 8px 20px rgba(88,101,242,.18);} 
.s-btn.discord:hover .s-icon{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(88,101,242,.36));}
.s-btn.discord:hover .s-btn-label{color:#c8cffb;}

.s-btn.spotify:hover{border-color:var(--spotify);background:rgba(30,185,84,.12);box-shadow:0 8px 20px rgba(30,185,84,.16);} 
.s-btn.spotify:hover .s-icon{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(30,185,84,.36));}
.s-btn.spotify:hover .s-btn-label{color:#9ef0b8;}

.s-btn.instagram:hover{border-color:var(--accent);background:rgba(139,92,246,.08);box-shadow:0 8px 20px rgba(139,92,246,.18);} 
.s-btn.instagram:hover .s-icon{transform:scale(1.08);filter:drop-shadow(0 0 10px rgba(139,92,246,.36));}
.s-btn.instagram:hover .s-btn-label{color:#e9c8ff;}

.s-btn.github:hover{border-color:rgba(255,255,255,.14);background:rgba(255,255,255,.02);box-shadow:0 8px 18px rgba(255,255,255,.06);} 
.s-btn.github .s-icon{filter:drop-shadow(0 0 12px rgba(255,255,255,.36));} /* stronger base glow for github */
.s-btn.github::before{--glow-c:rgba(255,255,255,.45);} /* make the pseudo-glow brighter */
.s-btn.github:hover .s-icon{transform:scale(1.12);filter:drop-shadow(0 0 26px rgba(255,255,255,.6));}
.s-btn.github:hover .s-btn-label{color:rgba(255,255,255,.9);} 
.s-btn.github:hover .s-btn-label{color:rgba(255,255,255,.9);}

/* GITHUB */
.s-btn.github{--glow-c:rgba(100,100,100,.55);} 
.s-btn.github .s-icon{filter:drop-shadow(0 0 6px rgba(0,0,0,.6));color:var(--text);}
.s-btn.github:hover{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.04);box-shadow:0 10px 26px rgba(255,255,255,.06);} 
.s-btn.github:hover .s-icon{transform:scale(1.12);filter:drop-shadow(0 0 9px rgba(255,255,255,.12));}
.s-btn.github:hover .s-btn-label{color:rgba(255,255,255,.85);} 

/* Force icons visible if some browsers/styles hide them */
.s-icon{visibility:visible !important;opacity:1 !important;}

/* DIVIDER */
.divider{
  height:1px;margin:2px 0 14px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.3),transparent);
}

/* DESC LINES */
.desc-line{
  font-size:.92rem;color:rgba(255,255,255,.78);
  margin-bottom:8px;line-height:1.55;
}
.hl{
  color:var(--accent);font-weight:600;
  text-shadow:0 0 8px rgba(139,92,246,.5);
  animation:hlPulse 2.2s ease infinite;
}
@keyframes hlPulse{0%,100%{text-shadow:0 0 8px rgba(139,92,246,.5)}50%{text-shadow:0 0 20px rgba(139,92,246,1)}}
.hl2{color:var(--accent2);font-weight:600;text-shadow:0 0 8px rgba(59,130,246,.4);}
.code-tag{
  font-family:var(--mono);font-size:.75rem;
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.2);
  border-radius:4px;padding:1px 6px;color:var(--accent);
}

/* SPOTIFY */
.spotify-title{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:16px 0 10px;
  font-family:var(--spotify-font);
  font-weight:600;
  font-size:.68rem;
  color:rgba(167,139,250,.92);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.spotify-title::before,
.spotify-title::after{
  content:'';
  width:32px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.45));
}
.spotify-title::after{transform:scaleX(-1);}
.spotify-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 10px rgba(139,92,246,.9);
  animation:spotifyPulse 1.4s ease infinite;
}
@keyframes spotifyPulse{0%,100%{box-shadow:0 0 8px rgba(139,92,246,.72)}50%{box-shadow:0 0 18px rgba(139,92,246,1)}}
.spotify-now{
  position:relative;
  display:flex;align-items:center;gap:12px;
  width:100%;
  padding:12px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  margin:0 0 10px;
  text-align:left;
}
.spotify-now::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(139,92,246,.14),rgba(255,255,255,.025) 48%,transparent 100%);
  opacity:.72;
  pointer-events:none;
}
.sp-cover-wrap{
  position:relative;
  width:54px;height:54px;
  flex-shrink:0;
  border-radius:12px;
  overflow:hidden;
  background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 20px rgba(0,0,0,.24);
  z-index:1;
}
.sp-cover{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.08) contrast(1.04);
  transform:scale(1.02);
}
.sp-cover-glow{
  position:absolute;inset:-26px;
  background:radial-gradient(circle at 30% 30%, rgba(139,92,246,.48), transparent 55%),
             radial-gradient(circle at 70% 70%, rgba(255,255,255,.16), transparent 50%);
  opacity:0;
  transition:opacity .35s ease;
}
.spotify-now.show .sp-cover-glow{opacity:.85;}
.sp-cover-fallback{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);
  color:rgba(255,255,255,.35);
  font-size:1.35rem;
}
.sp-meta{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  z-index:1;
}
.sp-top{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sp-title,
#song{
  font-family:var(--mono-i18n);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.05em;
  color:rgba(255,255,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sp-artist,
#sp-sub{
  font-family:var(--mono-i18n);
  font-size:.6rem;
  color:rgba(255,255,255,.5);
  letter-spacing:.09em; /* artırıldı: okunabilirlik için */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sp-bottom{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sp-progress{
  width:100%;
  height:3px;
  background:rgba(255,255,255,.08);
  border-radius:50px;
  overflow:hidden;
  position:relative;
}
#sp-progress-bar{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:50px;
  transition:width .25s linear;
}
.sp-time{
  font-family:var(--mono);
  font-size:.53rem;
  color:rgba(255,255,255,.34);
  letter-spacing:.08em;
}

@media(max-width:400px){
  .spotify-title{font-size:.56rem;letter-spacing:.14em;}
  .spotify-title::before,
  .spotify-title::after{width:22px;}
  .spotify-now{gap:10px;padding:10px;}
  .sp-cover-wrap{width:48px;height:48px;border-radius:11px;}
}

/* SCANLINES ON TOP */
.global-scan{
  position:fixed;inset:0;z-index:5;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,
    rgba(0,0,0,.06) 2px,rgba(0,0,0,.06) 4px
  );
}

@media(max-width:480px){
  .card{width:min(92vw, 360px);border-radius:20px;max-height:min(94vh, calc(100dvh - 132px - 66px));}
  .banner{height:92px;}
  .overlay-panel{padding:24px 26px;border-radius:20px;}
  .name{font-size:1.82rem;}
  .content{padding:14px 16px 20px;}
  .name{font-size:1.58rem;}
  .name-ghost{font-size:1.58rem;}
  .handle{font-size:.66rem;margin-bottom:8px;}
  .title-tag{font-size:.6rem;padding:6px 9px;}
  .social-row{gap:9px;margin-bottom:14px;}
  .s-btn{width:42px;height:42px;border-radius:12px;}
  .desc-line{font-size:.86rem;line-height:1.45;}
  .spotify-now{padding:10px;gap:10px;}
  .sp-cover-wrap{width:48px;height:48px;border-radius:11px;}
  .sp-title,#song{font-size:.67rem;letter-spacing:.045em;}
  .sp-artist,#sp-sub{font-size:.57rem;letter-spacing:.08em;}
}

/* KÜÇÜK EKRANLAR (iPhone SE vb.) */
@media(max-width:360px){
  .card{width:94vw;}
  .name,.name-ghost{font-size:1.4rem;}
  .content{padding:12px 14px 18px;}
  .desc-line{font-size:.8rem;}
  .title-tag{font-size:.56rem;padding:5px 8px;}
}

/* KISA / YATAY EKRANLAR */
@media(max-height:700px){
  .card{transform:translate(-50%,-50%) scale(.82);}
  .card.show{transform:translate(-50%,-50%) scale(.88);}
  .banner{height:76px;}
  .profile-wrap{width:74px;height:74px;margin:-37px auto 8px;}
  .profile-img{width:74px;height:74px;}
  .avatar-ring{inset:-3px;}
}
@media(max-height:560px){
  .card{max-height:98vh;max-height:98dvh;overflow-y:auto;}
  .spotify-now{padding:8px;}
  .desc-line{margin-bottom:5px;}
  .scroll-cue{display:none;}
}



/* =========================================================
   YENİ ÖZELLİKLER — interaktif eklentiler
   ========================================================= */

/* ---- 3D CANVAS PARALLAX WRAPPER ---- */
#bg-fx-wrap{
  position:fixed;inset:0;z-index:1;
  overflow:hidden;
  pointer-events:none;
  perspective:1200px;
}
#bg-fx{
  position:absolute;
  inset:-4%;
  width:108%;height:108%;
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform .2s ease-out;
}

/* ---- LIVE TELEMETRY BAR ---- */
.telemetry{
  margin-top:12px;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:8px 10px;
  font-family:var(--mono);
  font-size:.66rem;
  letter-spacing:.06em;
  color:rgba(167,139,250,.6);
}
.telemetry-item{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.42);}
.telemetry-item b{color:rgba(210,200,255,.85);font-weight:600;}
.telemetry-sep{color:rgba(255,255,255,.18);}
.t-dot{
  width:6px;height:6px;border-radius:50%;
  background:#34d399;
  box-shadow:0 0 6px #34d399;
  animation:dotPulse 1.6s ease-in-out infinite;
  flex:none;
}
.t-dot.bad{background:#f87171;box-shadow:0 0 6px #f87171;}
@media(max-width:400px){
  .telemetry{font-size:.6rem;gap:6px 8px;}
}

/* =========================================================
   MOBİL PERFORMANS — kasmayı önlemek için ağır efektleri
   dokunmatik / küçük ekranlarda sadeleştir
   ========================================================= */
@media (max-width:680px), (pointer:coarse){
  /* Kartın sürekli dönen conic-gradient border'ı + 26px blur
     birlikte mobilde en pahalı ikili — animasyonu durdur,
     blur'u ciddi oranda düşür. Gradient border görsel olarak kalıyor. */
  .card{
    animation:none;
    backdrop-filter:blur(10px) saturate(130%);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
  }
  .overlay-panel{
    animation:none;
    backdrop-filter:blur(10px) saturate(130%);
    -webkit-backdrop-filter:blur(10px) saturate(130%);
  }
  .overlay-panel::before{animation:none;opacity:.5;}

  /* NYRAXE glow — background-position animasyonu paint tetikliyor, mobilde sadeleştir */
  .mega-word::after{animation:none;opacity:.4;}
}

@media (prefers-reduced-motion: reduce){
  .card{animation:none;}
  .mega-word::after{animation:none;opacity:.4;}
}

/* =========================================================
   AŞAĞI KAYDIR GÖSTERGESİ
   Kartın altında, ayrı ve kendi başına konumlanan bir öğe —
   profil/ikon alanına karışmaz, hero-slot'un alt kısmına
   sabitlenir.
   ========================================================= */
.scroll-cue{
  position:absolute;left:50%;bottom:6px;
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  text-decoration:none;color:var(--soft);
  z-index:25;
  opacity:.9;
  transition:opacity .2s ease;
  animation:scrollCueAppear .6s ease 1s both;
}
.scroll-cue:hover{opacity:1;}
@keyframes scrollCueAppear{
  from{opacity:0;transform:translateX(-50%) translateY(10px);}
  to{opacity:.9;transform:translateX(-50%) translateY(0);}
}
.scroll-cue-label{
  font-family:var(--mono-i18n);font-size:.62rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);
}
.scroll-cue-wheel{
  width:22px;height:34px;border-radius:13px;
  border:1.5px solid rgba(255,255,255,.32);
  display:flex;justify-content:center;
  padding-top:6px;
  box-shadow:0 0 12px rgba(59,130,246,.18);
  background:rgba(3,4,10,.25);
}
.scroll-cue-dot{
  width:4px;height:7px;border-radius:3px;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 8px var(--accent2);
  animation:scrollCueDot 1.8s ease-in-out infinite;
}
@keyframes scrollCueDot{
  0%{transform:translateY(0);opacity:1;}
  60%{transform:translateY(11px);opacity:0;}
  61%{transform:translateY(0);opacity:0;}
  100%{transform:translateY(0);opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{animation:none;opacity:.9;}
  .scroll-cue-dot{animation:none;opacity:.8;}
}
@media(max-width:680px), (pointer:coarse){
  .scroll-cue{bottom:4px;}
  .scroll-cue-wheel{width:19px;height:30px;}
}

/* =========================================================
   İÇERİK BÖLÜMLERİ — ORTAK
   ========================================================= */
.site-section{
  position:relative;z-index:2;
  padding:70px 20px;
}
.section-inner{
  max-width:640px;margin:0 auto;
}
.section-kicker{
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono-i18n);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);margin-bottom:14px;
}
.kicker-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  flex:none;
}
.site-section.in-view .kicker-dot{
  animation:kickerPulse 2.4s ease-in-out .8s infinite;
}
@keyframes kickerPulse{
  0%,100%{box-shadow:0 0 8px var(--accent);opacity:1;}
  50%{box-shadow:0 0 16px var(--accent2);opacity:.65;}
}
.section-title{
  font-family:var(--display);
  font-size:clamp(1.5rem,5vw,2rem);font-weight:700;
  color:#fff;letter-spacing:-.01em;
}
.section-rule{
  width:0;height:2px;margin:16px 0 22px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 12px rgba(139,92,246,.3);
  transition:width .8s cubic-bezier(.19,1,.22,1) .3s;
}
.site-section.in-view .section-rule{
  width:44px;
}
.section-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:22px;
  font-family:var(--mono-i18n);font-size:.78rem;
  color:var(--accent2);text-decoration:none;
  border-bottom:1px solid rgba(59,130,246,.35);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.section-link:hover{color:#fff;border-color:#fff;}
.empty-note{
  font-family:var(--mono-i18n);font-size:.8rem;
  color:var(--soft);opacity:.6;
}

/* Scroll'a girince kademeli (staggered) reveal — JS ile .in-view eklenir.
   .scroll-reveal'ın kendisi görünür kalır; içindeki her doğrudan çocuk
   ve galeri/skill öğeleri teker teker, hafif blur + yukarı kayma ile
   sırayla belirir. */
.scroll-reveal{ }

.site-section .section-inner > *{
  opacity:0;
  transform:translateY(22px) scale(.97);
  filter:blur(6px);
  transition:
    opacity .7s cubic-bezier(.19,1,.22,1),
    transform .7s cubic-bezier(.19,1,.22,1),
    filter .7s ease;
}
.site-section.in-view .section-inner > *{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0);
}
.site-section .section-inner > *:nth-child(1){transition-delay:.02s;}
.site-section .section-inner > *:nth-child(2){transition-delay:.11s;}
.site-section .section-inner > *:nth-child(3){transition-delay:.20s;}
.site-section .section-inner > *:nth-child(4){transition-delay:.29s;}
.site-section .section-inner > *:nth-child(5){transition-delay:.38s;}
.site-section .section-inner > *:nth-child(6){transition-delay:.47s;}
.site-section .section-inner > *:nth-child(7){transition-delay:.56s;}

.skill-chip, .gal-item, .contact-card{
  opacity:0;
  transform:translateY(12px) scale(.96);
  transition:
    opacity .5s cubic-bezier(.19,1,.22,1),
    transform .5s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i, 0) * 55ms + .1s);
}
.site-section.in-view .skill-chip,
.site-section.in-view .gal-item,
.site-section.in-view .contact-card{
  opacity:1;
  transform:translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce){
  .site-section .section-inner > *,
  .skill-chip, .gal-item, .contact-card{
    opacity:1;transform:none;filter:none;transition:none;
  }
}

/* =========================================================
   HAKKIMDA
   ========================================================= */
.about-text{
  font-size:.94rem;line-height:1.75;
  color:rgba(255,255,255,.78);
  white-space:pre-line;
}
.about-text-wrap{
  position:relative;
  overflow:hidden;
  max-height:none;
  transition:max-height .5s cubic-bezier(.19,1,.22,1);
}
.about-text-wrap.is-collapsed{
  max-height:220px;
}
.about-text-wrap.is-collapsed::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(180deg,transparent,var(--bg) 88%);
  pointer-events:none;
}
.about-toggle{
  display:flex;align-items:center;gap:6px;
  margin-top:14px;
  padding:0;border:0;background:none;
  font-family:var(--mono-i18n);font-size:.76rem;
  color:var(--accent2);cursor:pointer;
}
.about-toggle-label{
  border-bottom:1px solid rgba(59,130,246,.35);
  padding-bottom:2px;
  transition:color .2s ease, border-color .2s ease;
}
.about-toggle:hover .about-toggle-label{color:#fff;border-color:#fff;}
.about-toggle-arrow{
  width:7px;height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s ease;
}
.about-toggle.is-open .about-toggle-arrow{
  transform:rotate(225deg);
}
.skills-wrap{margin-top:26px;}
.skills-label{
  font-family:var(--mono-i18n);font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);opacity:.7;margin-bottom:10px;
}
.skills-grid{
  display:flex;flex-wrap:wrap;gap:8px;
}
.skill-chip{
  font-family:var(--mono-i18n);font-size:.76rem;
  padding:7px 12px;border-radius:999px;
  color:rgba(255,255,255,.85);
  background:rgba(139,92,246,.08);
  border:1px solid rgba(139,92,246,.22);
}

/* =========================================================
   GALERİ
   ========================================================= */
.gal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.gal-item{
  position:relative;
  aspect-ratio:1/1;
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  padding:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .2s ease, transform .2s ease;
}
.gal-item:hover, .gal-item:focus-visible{
  border-color:rgba(139,92,246,.5);
  transform:translateY(-2px);
}
.gal-item img{
  width:100%;height:100%;object-fit:cover;display:block;
}
@media(max-width:480px){
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(3,4,10,.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease;
}
.lightbox.show{
  opacity:1;visibility:visible;pointer-events:auto;
}
.lightbox-fig{
  max-width:min(92vw,720px);max-height:86vh;
  margin:0;text-align:center;
}
.lightbox-fig img{
  max-width:100%;max-height:78vh;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  object-fit:contain;
}
.lightbox-fig figcaption{
  margin-top:12px;
  font-family:var(--mono-i18n);font-size:.78rem;
  color:var(--soft);
}
.lightbox-close{
  position:absolute;top:18px;right:18px;
  width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;font-size:1.3rem;line-height:1;
  cursor:pointer;
}

/* =========================================================
   SAYAÇ · KUMBARA
   ========================================================= */
.mini-clock{
  display:flex;gap:10px;margin-top:24px;
  flex-wrap:wrap;
}
.mc-seg{
  flex:1;min-width:64px;
  text-align:center;
  padding:14px 8px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
}
.mc-num{
  display:block;
  font-family:var(--mono-i18n);font-weight:700;
  font-size:clamp(1.3rem,5vw,1.7rem);
  color:#fff;font-variant-numeric:tabular-nums;
}
.mc-unit{
  display:block;margin-top:4px;
  font-family:var(--mono-i18n);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);opacity:.7;
}
.kumbara{margin-top:26px;}
.kumbara-track{
  width:100%;height:16px;border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.kumbara-fill{
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  box-shadow:0 0 14px rgba(139,92,246,.4);
  transition:width .6s ease;
}
.kumbara-row{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  justify-content:space-between;
  margin-top:10px;
  font-family:var(--mono-i18n);font-size:.72rem;
  color:var(--soft);
}
.kumbara-row b{color:#fff;font-weight:600;}
.kumbara-pct{color:var(--accent2);font-weight:600;}

/* =========================================================
   İLETİŞİM
   ========================================================= */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.contact-card{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  text-decoration:none;
  transition:border-color .2s ease, background .2s ease;
}
.contact-card:hover{
  border-color:rgba(139,92,246,.4);
  background:rgba(139,92,246,.06);
}
.contact-card-static{cursor:default;}
.cc-label{
  font-family:var(--mono-i18n);font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft);opacity:.7;
}
.cc-value{
  font-size:.86rem;color:#fff;font-weight:500;
  word-break:break-word;
}
@media(max-width:480px){
  .contact-grid{grid-template-columns:1fr;}
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{
  position:relative;z-index:2;
  padding:36px 20px 40px;
}
.footer-inner{
  max-width:640px;margin:0 auto;
}
.footer-top{
  display:flex;flex-wrap:wrap;gap:18px;
  align-items:center;justify-content:space-between;
}
.footer-brand{display:flex;flex-direction:column;gap:2px;}
.footer-word{
  font-family:var(--wordmark);font-weight:800;
  font-size:.9rem;letter-spacing:.14em;color:#fff;
}
.footer-tag{
  font-family:var(--mono-i18n);font-size:.66rem;
  color:var(--soft);opacity:.7;
}
.footer-nav{
  display:flex;flex-wrap:wrap;gap:14px;
}
.footer-nav a{
  font-family:var(--mono-i18n);font-size:.74rem;
  color:var(--soft);text-decoration:none;
}
.footer-nav a:hover{color:#fff;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  color:var(--soft);
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  text-decoration:none;
}
.footer-social a:hover{color:#fff;border-color:rgba(255,255,255,.2);}
.footer-rule{
  height:1px;margin:22px 0 16px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
}
.footer-bottom{
  display:flex;flex-wrap:wrap;gap:6px 10px;
  font-family:var(--mono-i18n);font-size:.68rem;
  color:var(--soft);opacity:.65;
}
.footer-sep{opacity:.5;}

@media(max-width:480px){
  .site-section{padding:52px 18px;}
  .footer-top{flex-direction:column;align-items:flex-start;}
}

@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth;}
}