/* ==========================================================
   GENEL AYARLAR ve RENK DEĞİŞKENLERİ
   — Tema renkleri, tipografi ve temel gövde davranışı
   ========================================================== */

:root{
  --bg:#000;
  --text:#fff;
  --muted:#cfcfcf;
  --gold:#d9b46f;
  --gold2:#b89d5f;
  --glass:rgba(255,255,255,0.08);
  --glass-hover:rgba(217,180,111,0.16);
}

*{ box-sizing:border-box; }

html,body{ height:100%; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  overflow-x:hidden;
}


/* ==========================================================
   ARKA PLAN EFEKTLERİ
   — Dalga parıltıları ve altın damar animasyon katmanları
   ========================================================== */

#particles{
  position:fixed; inset:0; z-index:0; /* boş bırakıldı: JS ile kullanılırsa hazır */
}

/* Altın dalga parıltıları */
.bg-waves{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(217,180,111,0.35) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(217,180,111,0.22) 0%, transparent 55%),
    linear-gradient(180deg, #050505 0%, #000 100%);
  filter: blur(70px) brightness(1.05);
  animation: wavesPulse 10s ease-in-out infinite alternate;
}
@keyframes wavesPulse{
  0%{ transform:scale(1) translate(0,0); opacity:.9; }
  100%{ transform:scale(1.15) translate(-3%,4%); opacity:1; }
}

/* İnce dönen altın damarlar */
.bg-golds{
  position:fixed; inset:-10vmax; z-index:-2;
  background:
    conic-gradient(from 0deg, rgba(217,180,111,.06), transparent 30%, rgba(217,180,111,.05) 60%, transparent 85%),
    radial-gradient(80vmax 80vmax at 50% 50%, rgba(255,255,255,.02), transparent 60%);
  filter: blur(12px);
  animation: goldSpin 24s linear infinite;
}
@keyframes goldSpin{ to{ transform: rotate(360deg) } }


/* ==========================================================
   ANA KAPSAYICI
   — İçerik genişliği ve dikey boşluklar
   ========================================================== */

.content{
  position:relative; z-index:1;
  max-width:880px;
  margin:0 auto;
  padding:72px 20px 30px;
  min-height:120vh;
}


/* ==========================================================
   KAHRAMAN BÖLÜMÜ (Avatar + İsim + Tagline)
   ========================================================== */

.hero{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  margin-bottom:28px;
}

.avatar{
  width:140px; height:140px; border-radius:50%;
  border:3px solid var(--gold);
  box-shadow:0 0 34px rgba(217,180,111,.55);
  margin-bottom:12px;
}

.hero h1{ margin:6px 0 4px; font-size:clamp(1.8rem, 2.6vw, 2.4rem); }

.tagline{ color:var(--muted); margin:0 0 10px; }


/* ==========================================================
   GENEL BUTONLAR (Cam efektli link butonları)
   ========================================================== */

.links{
  display:flex; flex-direction:column; align-items:center;
  gap:14px; margin-top:30px;
}

.button{
  position:relative;
  display:block; width:min(92%,560px);
  padding:16px 20px;
  text-decoration:none; color:var(--text);
  font-weight:600; letter-spacing:.2px;
  border-radius:16px;
  background:var(--glass);
  backdrop-filter: blur(14px) saturate(160%);
  border:1px solid rgba(217,180,111,.38);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.button:hover{
  background:var(--glass-hover);
  border-color:rgba(217,180,111,.85);
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 14px 36px rgba(217,180,111,.28);
}

/* Sağdan sola tek geçişli parlama çizgisi */
.button::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);
  transform:translateX(-100%);
  pointer-events:none;
}
.button.playing::before{ animation: linePass .35s ease forwards; }
@keyframes linePass{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }


/* ==========================================================
   BÖLÜM AYIRTACI (CHANNELS / DISCORD / ROBLOX başlıkları)
   ========================================================== */

.section-divider{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  margin:40px auto 40px; width:90%;
}
.section-divider::before,
.section-divider::after{
  content:""; flex:1; height:2px;
  background:linear-gradient(90deg, transparent, rgba(217,180,111,.8), transparent);
  filter:drop-shadow(0 0 4px rgba(217,180,111,.6));
}
.section-divider span{
  color:#d9b46f; font-weight:600; letter-spacing:2px;
  margin:0 16px; font-size:1.1rem; text-transform:uppercase;
}


/* ==========================================================
   KANAL BUTONLARI (Profil + Sosyal ikon grubu)
   ========================================================== */

.channel-buttons{
  display:flex; flex-direction:column; align-items:center;
  gap:24px; margin-top:60px;
}

.channel-button{
  position:relative;
  display:flex; justify-content:space-between; align-items:center;
  width:min(95%,650px);
  padding:18px 24px;
  background:var(--glass);
  border:1px solid rgba(217,180,111,0.4);
  border-radius:16px;
  color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,0.45);
  transition:all .3s ease;
  overflow:hidden;
}

.channel-button:hover{
  background:var(--glass-hover);
  border-color:rgba(217,180,111,.85);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 36px rgba(217,180,111,.3);
}

/* Kanal butonu üzerinde sağdan sola parlama */
.channel-button::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transform:translateX(-100%);
  pointer-events:none;
}
.channel-button.playing::before{ animation: channelLight .35s ease forwards; }
@keyframes channelLight{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* Sol blok: profil görseli + metinler */
.channel-left{ display:flex; align-items:center; gap:16px; }

.channel-left img{
  width:70px; height:70px; border-radius:50%;
  border:2px solid rgba(217,180,111,.5);
  box-shadow:0 0 10px rgba(217,180,111,.3);
  object-fit:cover;
}

.channel-info h3{ margin:0; font-size:1.2rem; color:#fff; }
.channel-info p { margin:4px 0 0; color:#b3b3b3; font-size:.9rem; }

/* Sağ blok: sosyal medya ikonları */
.channel-socials{
  display:flex; align-items:center; gap:18px;
}
.channel-socials img{
  width:34px; height:34px; object-fit:contain;
  transition: transform .25s ease, filter .25s ease;
  filter:brightness(.95);
}
.channel-socials img:hover{
  transform:scale(1.25);
  filter:brightness(1.15);
}

/* Mobil hizalama: blokları alt alta çek */
@media (max-width:600px){
  .channel-button{ flex-direction:column; align-items:flex-start; gap:16px; text-align:left; }
  .channel-socials{ justify-content:flex-start; }
}


/* ==========================================================
   DISCORD WIDGET KARTLARI (Canlı üyeler için iframe)
   ========================================================== */

.discord-widgets{
  display:flex; justify-content:center; align-items:flex-start;
  gap:40px; flex-wrap:wrap; margin-top:60px;
}

.discord-widget{
  flex:1 1 360px; max-width:420px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(217,180,111,0.35);
  border-radius:16px;
  box-shadow:0 8px 30px rgba(217,180,111,0.25);
  padding:0 12px 8px;
  backdrop-filter: blur(10px) saturate(150%);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.discord-widget:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 40px rgba(217,180,111,0.3);
  border-color:rgba(217,180,111,0.8);
}

.discord-widget h3{
  color:#d9b46f; text-align:center; font-size:1.05rem;
  margin-bottom:10px; letter-spacing:.5px;
}

.discord-widget iframe{
  width:100%; height:500px; border:none; border-radius:12px;
}

/* Mobilde alt alta dizilim */
@media (max-width:768px){
  .discord-widgets{ flex-direction:column; align-items:center; gap:24px; }
  .discord-widget{ width:90%; max-width:420px; }
}


/* ==========================================================
   ROBLOX KARAKTER KARTLARI (Giriş animasyonu + hover parıltı)
   ========================================================== */

.characters{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:24px; margin-top:60px;
}

.char-card{
  position:relative;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(217,180,111,0.3);
  border-radius:16px;
  width:240px; text-align:center;
  padding:20px 16px 28px;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  overflow:hidden;

  /* giriş animasyonu */
  opacity:0; transform:translateY(30px) scale(.96);
  transition:
    opacity .9s cubic-bezier(.22,1,.36,1),
    transform .9s cubic-bezier(.22,1,.36,1),
    box-shadow .3s ease,
    border-color .3s ease;
}

/* Kart görünür olduğunda (JS .in ekler) */
.char-card.in{ opacity:1; transform:translateY(0) scale(1); }

/* Altın çerçeve parıltısı */
.char-card::before{
  content:""; position:absolute; inset:-2px; border-radius:18px;
  background:linear-gradient(120deg,
    rgba(217,180,111,.5),
    rgba(217,180,111,.05),
    rgba(217,180,111,.5));
  opacity:0; transition:opacity .6s ease; z-index:0;
}
.char-card.in::before{ opacity:.35; animation: cardGlow 3s ease-in-out infinite alternate; }

.char-card:hover{
  transform:translateY(-8px) scale(1.04);
  box-shadow:0 12px 40px rgba(217,180,111,.25);
  border-color:rgba(217,180,111,.9);
}
.char-card:hover::before{ opacity:.8; animation: cardGlowFast 1.2s ease-in-out infinite alternate; }

/* Kart içeriği */
.char-card img{
  width:100%; height:220px; object-fit:cover;
  border-radius:12px; border:2px solid rgba(217,180,111,.4);
  margin-bottom:12px; position:relative; z-index:1;
}
.char-card h3{
  color:#fff; margin:8px 0 12px; font-size:1rem; position:relative; z-index:1;
}
.char-btn{
  display:inline-block;
  background:#d9b46f; color:#000; font-weight:600;
  padding:10px 22px; border-radius:10px; text-decoration:none;
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative; z-index:1; box-shadow:0 0 10px rgba(217,180,111,.25);
}
.char-btn:hover{ background-color:#e4c57f; transform:scale(1.06); box-shadow:0 0 18px rgba(217,180,111,.4); }

/* Parıltı keyframeleri (kart içi) */
@keyframes cardGlow{
  0%{ filter:brightness(1) blur(1px); }
  100%{ filter:brightness(1.3) blur(3px); }
}
@keyframes cardGlowFast{
  0%{ filter:brightness(1.1) blur(1px); }
  100%{ filter:brightness(1.6) blur(4px); }
}

/* Mobilde kart genişliği */
@media (max-width:768px){ .char-card{ width:90%; } }


/* ==========================================================
   ALT BÖLÜM (Footer)
   ========================================================== */

.footer{ margin-top:34px; text-align:center; }
.footer small{ color:#8a8a8a; }

.gold-line{
  height:2px; width:min(82%,560px);
  margin:0 auto 14px;
  background:linear-gradient(90deg, transparent, rgba(217,180,111,.85), transparent);
  filter:drop-shadow(0 0 6px rgba(217,180,111,.6));
  animation: goldShine 2.6s ease-in-out infinite;
}
@keyframes goldShine{ 0%,100%{opacity:.6} 50%{opacity:1} }


/* ==========================================================
   GİRİŞ ANİMASYON YARDIMCILARI (reveal)
   — .reveal öğeleri JS ile .in sınıfını aldığında görünür
   ========================================================== */

.reveal{
  opacity:0; transform:translateY(14px);
  will-change:opacity, transform;
}
.reveal.in{
  opacity:1; transform:translateY(0);
  transition: opacity .7s ease, transform .7s ease;
}
/* Örnek: .links içindeki reveal'lere gecikme verilebilir
   .links .reveal.in{ transition-delay: var(--stagger, 0ms); } */


/* ==========================================================
   ERİŞİLEBİLİRLİK: Animasyonları azaltmayı tercih edenler için
   ========================================================== */

@media (prefers-reduced-motion: reduce){
  .bg-waves, .bg-golds, .gold-line,
  .button::before, .channel-button::before,
  .char-card::before{ animation:none !important; }

  .reveal, .reveal.in{
    transition:none !important; transform:none !important; opacity:1 !important;
  }
}


/* ==========================================================
   KÜÇÜK EKRAN AYARLARI (Header ve Buton tipografisi)
   ========================================================== */

@media (max-width:480px){
  .avatar{ width:110px; height:110px; }
  .button{ font-size:.98rem; }
}





/* ==========================================================
   ROBLOX GRUP KARTI (Dikey tasarım)
   ========================================================== */
.group-card-vertical{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  width:min(90%,320px);
  margin:70px auto 0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(217,180,111,0.35);
  border-radius:18px;
  box-shadow:0 8px 30px rgba(217,180,111,0.25);
  padding:28px 20px 34px;
  overflow:hidden;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.group-card-vertical::before{
  content:"";
  position:absolute; inset:-2px; border-radius:20px;
  background:linear-gradient(120deg,
    rgba(217,180,111,.5),
    rgba(217,180,111,.05),
    rgba(217,180,111,.5));
  opacity:.35;
  z-index:0;
  animation: cardGlow 3s ease-in-out infinite alternate;
}
.group-card-vertical:hover{
  transform:translateY(-8px) scale(1.04);
  box-shadow:0 14px 40px rgba(217,180,111,0.3);
  border-color:rgba(217,180,111,.8);
}
.group-image-vertical{
  width:220px; height:220px;
  border-radius:12px;
  border:2px solid rgba(217,180,111,0.5);
  box-shadow:0 0 14px rgba(217,180,111,.3);
  object-fit:cover;
  margin-bottom:18px;
  position:relative; z-index:1;
}
.group-card-vertical h3{
  color:#fff; margin:8px 0 8px; font-size:1.4rem; position:relative; z-index:1;
}
.group-card-vertical p{
  color:#b3b3b3; margin:0 0 20px; font-size:1rem; position:relative; z-index:1;
}
.group-btn{
  display:inline-block;
  background:#d9b46f; color:#000; font-weight:600;
  padding:12px 26px; border-radius:10px; text-decoration:none;
  transition:all .25s ease;
  box-shadow:0 0 10px rgba(217,180,111,.25);
  position:relative; z-index:1;
}
.group-btn:hover{
  background:#e4c57f; transform:scale(1.06);
  box-shadow:0 0 18px rgba(217,180,111,.4);
}

/* Parıltı animasyonu (zaten var ama bağımsız tanımla) */
@keyframes cardGlow{
  0%{ filter:brightness(1) blur(1px); }
  100%{ filter:brightness(1.3) blur(3px); }
}
/* ==========================================================
   FOOTER LOGO (Vatadex)
   ========================================================== */
.vatadex-logo{
  width:110px; height:auto;
  display:block;
  margin:14px auto 10px;
  opacity:0.9;
  filter:drop-shadow(0 0 10px rgba(217,180,111,.45));
  transition:transform .3s ease, filter .3s ease;
}
.vatadex-logo:hover{
  transform:scale(1.06);
  filter:drop-shadow(0 0 18px rgba(217,180,111,.8));
}
@media(max-width:480px){
  .vatadex-logo{width:90px;}
}