* { margin:0; padding:0; box-sizing:border-box; font-family:'SF Pro Display',-apple-system,sans-serif;}
html, body { height:100%; background:#121212; color:#fff; overflow-x:hidden; }

/* Navbar */
.navbar {
  position: fixed; top:0; left:0; width:100%; height:50px;
  background: rgba(30,30,30,0.8);
  backdrop-filter: blur(15px);
  display:flex; align-items:center;
  padding:0 20px; z-index:1000;
}
.navbar .logo { font-weight:bold; font-size:18px; margin-right:30px; }
.navbar .nav-toggle { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; margin-left:auto; }
.navbar .nav-toggle span { display:block; width:22px; height:2px; background:#fff; border-radius:1px; transition:0.3s; }
.navbar .nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.navbar .nav-toggle.open span:nth-child(2) { opacity:0; }
.navbar .nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }
.navbar ul.nav-menu { list-style:none; display:flex; align-items:center; gap:20px; margin-left:auto; }
.navbar ul.nav-menu li { cursor:pointer; transition:0.3s; }
.navbar ul.nav-menu li:hover { color:#0af; }
.buy-btn {
  background: linear-gradient(145deg, #d1d1d1, #f0f0f0);
  color:#121212; font-weight:bold;
  padding:6px 15px; border-radius:12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  cursor:pointer; transition: all 0.3s ease; display:inline-flex; align-items:center;
  text-decoration:none;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}
a.buy-btn { color:#121212; }
a.buy-btn:hover { color:#121212; }
.buy-btn img { margin-right:5px; }
.buy-btn:hover {
  background: linear-gradient(145deg, #e8e8e8, #f5f5f5);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* Body padding for navbar */
body { padding-top:50px; position:relative; z-index:1; }

/* Fullscreen background video: tıklanamaz, duraklatılamaz, indirilemez */
.bg-video-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.bg-video-pixel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.bg-video-pixel .bg-video {
  pointer-events: none;
}
/* Video: mobilde tam ekran düzgün, masaüstünde pixelli */
.bg-video-pixel .bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
  transition: opacity 0.2s ease;
  -webkit-transform: translate(-50%, -50%);
}
.bg-video-pixel .bg-video:not(.active) {
  opacity: 0;
  pointer-events: none;
}
.bg-video-pixel .bg-video.active {
  opacity: 1;
  z-index: 1;
}
.bg-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Mobil: tam ekran, düzgün oran, performanslı */
@media (max-width: 1023px) {
  .bg-video-wrap {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .bg-video-pixel .bg-video {
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}

/* Büyük ekran: çok pixelli, büyük eski ekranda izliyormuş havası */
@media (min-width: 1024px) {
  .bg-video-pixel .bg-video {
    width: 200px;
    height: 112px;
    min-width: 0;
    min-height: 0;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    transform: translate(-50%, -50%) scale(10);
    -webkit-transform: translate(-50%, -50%) scale(10);
    filter: contrast(1.12) saturate(0.88) brightness(0.98);
  }
  .bg-video-pixel {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
  }
}

/* Games */
.games { padding:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:25px; }
.card { background: rgba(255,255,255,0.05); backdrop-filter: blur(12px); border-radius:15px; overflow:hidden; cursor:pointer; transition:0.3s; }
.card:hover { transform:scale(1.05); }
.card img { width:100%; height:200px; object-fit:cover; }
.card-content { padding:15px; }
.card-content h3 { margin-bottom:8px; }
.card-content p { font-size:14px; opacity:0.8; }

/* Video Section */
.video-section { padding:20px; display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-bottom:120px; }
.video-section h2 { grid-column:1/-1; margin-bottom:20px; text-align:center; color:#fff; }

/* Video Card */
.video-card { position:relative; background:#000; border-radius:15px; overflow:hidden; cursor:pointer; height:225px; }
.video-card img, .video-card video { width:100%; height:100%; object-fit:cover; border-radius:15px; }
.video-card .play-btn {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:60px; height:60px;
  background: rgba(0, 170, 255,0.8);
  border-radius:50%; display:flex; justify-content:center; align-items:center;
  font-size:30px; color:#121212; transition:0.3s;
}
.video-card .play-btn:hover { background: rgba(0,170,255,1); }

/* Footer macOS Dock Style */
.footer {
  position: fixed; bottom:20px; left:50%; transform:translateX(-50%);
  display:flex; gap:20px; justify-content:center;
  background: rgba(30,30,30,0.7); backdrop-filter: blur(15px);
  padding:10px 25px; border-radius:25px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  z-index:1000;
}
.footer a { display: inline-block; color: inherit; text-decoration: none; }
.footer img { width:50px; height:50px; cursor:pointer; transition: transform 0.3s, box-shadow 0.3s; border-radius:12px; }
.footer img:hover { transform: scale(1.4); box-shadow:0 5px 15px rgba(0,170,255,0.7); }

/* Mobil: navbar hamburger ve menü */
@media (max-width: 768px) {
  .navbar { flex-wrap: wrap; padding-right: 12px; }
  .navbar .nav-toggle { display: flex; }
  .navbar ul.nav-menu {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: rgba(30,30,30,0.98);
    backdrop-filter: blur(15px);
    padding: 16px 20px 24px;
    gap: 0;
    margin: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .navbar ul.nav-menu.show {
    max-height: 320px;
    opacity: 1;
  }
  .navbar ul.nav-menu li {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .navbar ul.nav-menu li:last-child { border-bottom: none; padding-bottom: 0; }
  .navbar ul.nav-menu li .buy-btn { width: 100%; justify-content: center; }
  .video-section, .games { grid-template-columns: 1fr; }
}