/* style.css — Neon theme with responsive nav, popular section, detail card kept */
/* --- Container bar --- */
.top-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  background: #0e1a2b;        /* gelap lembut */
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* --- Tab default --- */
.tab {
  color: #bcd1ff;              /* biru muda lembut */
  padding: 10px 22px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border-radius: 8px;
  transition: 0.25s ease;
}

/* --- Hover effect --- */
.tab:hover {
  background: rgba(0, 122, 255, 0.15);
  color: #ffffff;
  transform: translateY(-2px);
}

/* --- Tab aktif --- */
.tab.active {
  background: #2196f3;        /* biru terang neon */
  color: #ffffff;
  box-shadow: 0 0 12px rgba(33,150,243,0.7);
}

/* --- Saat ditekan --- */
.tab:active {
  transform: scale(0.95);
  background: rgba(33,150,243,0.7);
}

/* Responsive */
@media (max-width: 600px) {
  .top-tabs {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
  }
  .tab {
    padding: 8px 18px;
    font-size: 14px;
  }
}

/* TOP TABS */
.top-tabs {
    display: flex;
    background: #1A2D3A;
}

.top-tabs .tab {
    flex: 1;
    padding: 15px 0;
    text-align: center;
    background: #1A2D3A;
    color: #bcdfff;
    font-weight: bold;
}

.top-tabs .active {
    background: #4FC3FF;
    color: #001119;
}

/* CATEGORY GRID */
.category-grid {
    background: #1C2D38;
    padding: 20px 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.category-grid .cat {
    background: #243848;
    padding: 12px;
    text-align: center;
    border-radius: 6px;
    color: #d3eeff;
    font-size: 14px;
    cursor: pointer;
}

.category-grid .cat:hover {
    background: #2f4e61;
}

:root{
  --bg:#0b0f17;
  --panel:#071023;
  --neon:#00f0ff;
  --accent:#ff3ec6;
  --muted:#94a3b8;
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, Arial, sans-serif;background:linear-gradient(180deg,var(--bg),#05060a);color:#e6f7ff;min-height:100vh}

/* Header / navigation */
.nav{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,0.03);backdrop-filter:blur(6px);position:sticky;top:0;background:linear-gradient(180deg, rgba(11,15,23,0.6), rgba(5,6,10,0.6));z-index:40}
.brand{font-weight:700;letter-spacing:1px;font-size:20px;color:var(--neon);text-shadow:0 0 8px rgba(0,240,255,0.18)}
.menu{display:flex;align-items:center}
.menu a{margin-left:14px;text-decoration:none;color:var(--muted);padding:8px 12px;border-radius:8px;transition:all .18s}
.menu a:hover{color:#fff;background:var(--glass);box-shadow:0 0 10px rgba(0,240,255,0.06)}
.menu a.active{color:var(--neon);background:rgba(0,240,255,0.03)}
.burger{display:none;background:transparent;border:none;color:var(--muted);font-size:20px;padding:6px}

/* Container */
.container{max-width:1100px;margin:24px auto;padding:18px}
.section-title{margin:6px 0 12px;font-size:18px;color:var(--neon)}
.lead{color:var(--muted)}

/* Popular row */
.popular-row{display:flex;gap:12px;overflow:auto;padding-bottom:6px}
.popular-item{min-width:220px;border-radius:10px;padding:8px;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.02));border:1px solid rgba(255,255,255,0.03)}
.popular-item img{width:100%;height:90px;object-fit:cover;border-radius:8px}
.popular-item h4{margin:8px 0 4px;font-size:14px;color:#fff}
.popular-item p{margin:0;font-size:12px;color:var(--muted)}

/* Grid for games */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:12px}
.game{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:12px;border:1px solid rgba(255,255,255,0.03)}
.game img{width:100%;height:120px;object-fit:cover;border-radius:8px}
.game h3{margin:8px 0;font-size:16px;color:#fff}
.game p{margin:0;color:var(--muted);font-size:13px}
.game .actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
.btn{display:inline-block;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);color:#fff;text-decoration:none;cursor:pointer;font-size:13px}
.btn.secondary{background:transparent;color:var(--muted)}

/* Pagination */
.pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:22px 0}
.page-btn{background:transparent;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);cursor:pointer;color:var(--muted)}
.page-btn:hover{box-shadow:0 0 10px rgba(0,240,255,0.04);color:#fff}
.page-btn.active{background:linear-gradient(90deg,var(--neon),var(--accent));color:#0a0a0a;border:none;}

/* Donate floating button */
.donate-btn{position:fixed;right:22px;bottom:22px;z-index:60;border:none;padding:14px 16px;border-radius:999px;font-size:20px;cursor:pointer;background:linear-gradient(90deg,var(--neon),var(--accent));box-shadow:0 8px 30px rgba(0,0,0,0.6),0 0 18px rgba(0,240,255,0.12);transform:translateY(0);transition:transform .18s, box-shadow .18s}
.donate-btn:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,0.65),0 0 30px rgba(255,62,198,0.12)}

/* Popup */
.popup{position:fixed;right:22px;bottom:86px;width:320px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:14px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 10px 40px rgba(0,0,0,0.6);z-index:80}
.popup.hidden{display:none}
.popup h3{margin:0 0 8px;color:var(--neon)}
.qr-wrap{display:flex;justify-content:center;padding:8px 0}

/* Detail card */
.detail-card{padding:20px;display:grid;grid-template-columns:320px 1fr;gap:20px}
.detail-card img{width:100%;height:auto;border-radius:10px}
.detail-meta h2{margin:0 0 10px}
.detail-meta p{color:var(--muted)}

/* Small helpers */
.card{background:var(--panel);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.back-link{display:inline-block;margin-bottom:12px;color:var(--muted);text-decoration:none}
@media(max-width:900px){.detail-card{grid-template-columns:1fr}.popular-row{gap:10px}.menu{display:none}.burger{display:block}}
.tags, .detail-tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  background: #1b2a4a;
  color: #fff;
  padding: 3px 8px;
  margin: 2px;
  font-size: 12px;
  border-radius: 6px;
}

.filter-box {
    margin: 15px 0;
    display: flex;
    gap: 10px;
    align-items: center;
}

.menu {
  display: none;
  flex-direction: column;
  background: #0b1226;
  padding: 10px;
  border-radius: 10px;
}

.menu.open {
  display: flex;
}

/* === DETAIL PAGE SLIDER === */
.detail-media {
  width: 100%;
  max-width: 450px;
  margin-bottom: 20px;
}

.slider {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.slider-inner {
  display: flex;
  transition: transform 0.3s ease;
}

.slider-inner img {
  width: 100%;
  flex-shrink: 0;
  border-radius: 10px;
}

.slider-prev,
.slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 28px;
  background: rgba(0,0,0,0.4);
  border: none;
  cursor: pointer;
  padding: 5px 15px;
  color: white;
  border-radius: 6px;
}

.slider-prev:hover,
.slider-next:hover {
  background: rgba(0,0,0,0.6);
}

.slider-prev { left: 10px; }
.slider-next { right: 10px; }
.search-box {
  width: 100%;
  padding: 12px 15px;
  margin: 15px 0;
  border-radius: 10px;
  font-size: 16px;
  border: 2px solid #1e88e5;
  outline: none;
}

.report-btn {
  background: #ff3b3b;
  color: #fff;
  padding: 12px 15px;
  border-radius: 8px;
  border: none;
  width: 100%;
  margin-top: 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
}

.report-btn:hover {
  background: #d62828;
}

/* Dropdown Genre */
.genre-dropdown {
  display: none;
  margin-top: 10px;
  background: #0e1a2b;
  padding: 10px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  transition: .3s ease;
}

.genre-dropdown .cat {
  margin: 6px 0;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.12);
}

.genre-dropdown .cat:hover {
  background:#2196f3;
}

.dropdown-btn {
  cursor: pointer;
}

/* ===== Upgrade Tombol Download ===== */
.actions .btn.secondary {
  background: #0dcaf0;       /* biru cerah */
  color: #00101f;
  font-weight: 700;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 10px;
  border: 2px solid #0ba6c8;
  transition: 0.2s ease;
}

/* Hover effect */
.actions .btn.secondary:hover {
  background: #0ba6c8;
  color: white;
  transform: scale(1.05);
}

/* ===== Atur tombol "Lihat Detail" biar seimbang ===== */
.actions .btn {
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 10px;
}

/* ===============================
   TOMBOL DOWNLOAD — GAME DETAIL
================================*/
.detail-downloads .btn {
  display: block;
  width: 100%;
  max-width: 260px;

  background: #0dcaf0;     /* biru neon */
  color: #00101f;
  text-align: center;
  font-size: 17px;
  font-weight: 700;

  padding: 12px 18px;
  margin: 8px 0;

  border-radius: 12px;
  border: 2px solid #0ba6c8;

  transition: 0.2s ease;
}

/* Hover effect */
.detail-downloads .btn:hover {
  background: #0ba6c8;
  color: white;
  transform: translateY(-2px) scale(1.03);
}

/* --- SEARCH INPUT --- */
.search-box {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 15px auto;
  text-align: left;
}

#searchInput {
  width: 100%;
  padding: 10px 14px;
  border-radius: 8px;
  border: 2px solid #0ff;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 16px;
}

/* --- AUTO SUGGEST BOX --- */
.suggest-list {
  position: absolute;
  top: 44px;
  width: 100%;
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #0ff;
  border-radius: 6px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  z-index: 99;
}

.suggest-item {
  padding: 10px;
  cursor: pointer;
  color: #eee;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.suggest-item:hover {
  background: rgba(0, 255, 255, 0.15);
}

#recommendation {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.rekom-box {
  background: #0d1a36;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
  text-align: center;
}

.rekom-box:hover {
  transform: scale(1.05);
}

.rekom-box img {
  width: 100%;
  height: 200px;        /* 🔥 Ukuran gambar diperbesar dari default */
  object-fit: cover;
  border-radius: 10px;
}

.rekom-title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  line-height: 1.3em;
}