/* ---------- ROOT COLORS ---------- */
:root{
  --red: #ff2a2a;
  --deep-red: #b00000;
  --bg: #080808;
  --card: #141414;
  --muted: rgba(255,255,255,0.8);
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:#fff;
  font-family: Inter, "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- INTRO ---------- */
.intro{
  position:fixed;inset:0;background:#000;display:flex;align-items:center;justify-content:center;z-index:9999;
  animation:introFade 3s forwards;
}
.intro-inner{position:relative;text-align:center}
.intro-logo{
  font-weight:900;font-size:72px;color:var(--red);letter-spacing:6px;
  text-shadow:0 0 30px rgba(255,42,42,0.8),0 0 70px rgba(176,0,0,0.65);
  transform:scale(.95);
  animation:introPop 1.2s ease-out 0.2s forwards;
  opacity:0;
}
.flare{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-40%);width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%, rgba(255,90,90,0.18), transparent 35%);
  filter:blur(40px);opacity:0.95;mix-blend-mode:screen;
  animation:flarePulse 2.2s infinite ease-in-out;
}

@keyframes introFade{0%{opacity:1}80%{opacity:1}100%{opacity:0;visibility:hidden}}
@keyframes introPop{0%{opacity:0;transform:scale(.9)}100%{opacity:1;transform:scale(1)}}
@keyframes flarePulse{0%{transform:translate(-50%,-40%) scale(0.95)}50%{transform:translate(-50%,-40%) scale(1.05)}100%{transform:translate(-50%,-40%) scale(0.95)}}

/* ---------- NAVBAR ---------- */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;justify-content:space-between;align-items:center;padding:18px 36px;
  background:rgba(0,0,0,0.28);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.04)
}
.logo{font-weight:900;color:var(--red);font-size:22px;letter-spacing:2px}
.controls{display:flex;gap:14px;align-items:center}

/* language */
.lang-switch{display:flex;gap:8px}
.lang-btn{
  background:transparent;border:1px solid rgba(255,255,255,0.12);color:#ddd;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .18s;
}
.lang-btn.active{background:var(--red);border-color:var(--red);color:#050505;box-shadow:0 6px 20px rgba(255,42,42,0.12);font-weight:700}

/* menu button */
.menu-btn{width:44px;height:36px;border-radius:8px;border:none;background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;flex-direction:column;justify-content:center;gap:5px;padding:8px;cursor:pointer}
.menu-btn span{display:block;height:3px;background:#fff;border-radius:2px;transition:all .25s}
.menu-btn:active span{transform:scaleX(.9)}

/* ---------- SIDE MENU ---------- */
.side-menu{
  position:fixed;top:0;right:-340px;height:100vh;width:340px;background:linear-gradient(180deg,rgba(10,10,10,0.96),rgba(6,6,6,0.98));
  box-shadow: -20px 0 50px rgba(0,0,0,0.6);padding:90px 28px;z-index:120;transition:right .38s cubic-bezier(.2,.9,.2,1);
  border-left:1px solid rgba(255,0,0,0.06);
}
.side-menu.open{right:0}
.side-menu .close-btn{position:absolute;top:20px;right:18px;font-size:34px;background:none;border:none;color:#fff;cursor:pointer}
.side-menu ul{list-style:none;margin-top:8px}
.side-menu a{display:block;padding:18px 6px;color:#fff;text-decoration:none;font-size:20px;border-radius:6px;transition:all .18s;opacity:.95}
.side-menu a:hover{color:var(--red);transform:translateX(6px)}

/* ---------- HERO ---------- */
.hero{position:relative;height:95vh;display:flex;align-items:center;justify-content:center;padding:0 24px;overflow:hidden}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;filter:brightness(.45)}
.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%, rgba(255,42,42,0.08), transparent 20%), linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.6));z-index:-2}
.hero-content{text-align:center;z-index:5;max-width:980px;padding:60px 20px}
.hero-title{font-size:58px;font-weight:900;letter-spacing:2px;color:#fff;text-transform:uppercase;text-shadow:0 0 18px rgba(255,42,42,0.18)}
.hero-sub{margin-top:18px;font-size:18px;opacity:.92;color:rgba(255,255,255,0.9)}
.hero-actions{margin-top:24px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 22px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--red);color:#070707;box-shadow:0 10px 30px rgba(255,42,42,0.12)}
.btn-ghost{border:1px solid rgba(255,255,255,0.08);color:#fff;background:transparent}

/* ---------- SECTIONS ---------- */
.section{padding:120px 64px}
.section.dark{background:linear-gradient(180deg,rgba(0,0,0,0.7),rgba(6,6,6,0.85))}
.section-title{font-size:36px;margin-bottom:22px;color:var(--red);font-weight:800;text-shadow:0 0 8px rgba(255,42,42,0.06)}
.center-text{max-width:880px;margin:0 auto;color:rgba(255,255,255,0.92);line-height:1.7}

/* ---------- GAMES GRID ---------- */
.games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;margin-top:18px}
.game-card{background:var(--card);padding:16px;border-radius:12px;border:1px solid rgba(255,255,255,0.03);overflow:hidden;transition:transform .32s,box-shadow .32s}
.game-card:hover{transform:translateY(-8px);box-shadow:0 12px 40px rgba(176,0,0,0.12)}
.img-wrap{position:relative;border-radius:10px;overflow:hidden}
.img-wrap img{width:100%;display:block;transition:transform .5s}
.game-card:hover .img-wrap img{transform:scale(1.03)}
h3{margin-top:12px;margin-bottom:8px;font-size:20px}

/* ---------- SMOKE HOVER ---------- */
.smoke-hover .smoke{
  position:absolute;inset:0;background-image:url("https://i.gifer.com/2GU.gif");background-size:cover;opacity:0;mix-blend-mode:screen;transition:opacity .45s ease;
}
.smoke-hover:hover .smoke{opacity:0.6;}

/* ---------- FOOTER ---------- */
/* Footer Stilini Güncelleme */
footer {
    display: flex;
    flex-direction: column; /* İçerikleri dikey hizala */
    align-items: center; /* Yatayda ortala */
    padding: 2rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04); /* Footer'ınızdaki beyaz solidi biraz yumuşattım */
}

/* Sosyal Medya Linkleri Alanı */
.sosyal-linkler {
    margin-bottom: 1rem; /* Telif hakkı metninden ayır */
    display: flex;
    gap: 1.5rem; /* İkonlar arasındaki boşluk */
}

/* İkon Linklerinin Stili */
.sosyal-linkler a {
    /* İKONLARIN GÖRÜNMESİ İÇİN RENK EKLEME */
    color: #fff; /* İkonlara beyaz renk verin */ 
    font-size: 1.75rem; /* İkon boyutu */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* İkonların Üzerine Gelme (Hover) Stili */
.sosyal-linkler a:hover {
    color: var(--red); /* Hover'da kırmızı renk verin */
    transform: scale(1.1); /* Hafif büyütme efekti */
}

/* Telif Hakkı Metni Stili */
footer p {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.993);
    margin: 0;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .hero-title{font-size:40px}
  .section{padding:90px 28px}
  .navbar{padding:12px 18px}
  .side-menu{width:92vw;right:-92vw}
  .side-menu.open{right:0}
}