body{
  margin:0;
  font-family:sans-serif;
  background:#0b1a2b;
  color:white;
}

header{
  background:linear-gradient(90deg,purple,pink);
  padding:15px;
  text-align:center;
  font-weight:bold;
}

.hidden{display:none}

/* GRID GAME */
#gameList{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
}

.card{
  background:#1c2a3a;
  border-radius:12px;
  padding:10px;
  text-align:center;
}

.card img{
  width:100%;
  height: 220px;
  object-fit: cover;
  border-radius:10px;
}

/* TAG FILTER */
.tag-container{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:10px;
}

.tag{
  padding:6px 12px;
  background:#1c2a3a;
  border-radius:999px;
  font-size:12px;
}

.tag.active{
  background:#00ff88;
  color:black;
}

/* PRODUK */
#produk{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
}

.item{
  background:#1c2a3a;
  padding:10px;
  border-radius:10px;
  text-align:center;
}

.item.active{
  border:2px solid #00ff88;
}

/* INPUT */
input{
  width:100%;
  padding:10px;
  margin:10px 0;
  border-radius:10px;
  border:none;
  box-sizing: border-box;
}

/* BUTTON */
button{
  width:100%;
  padding:10px;
  border:none;
  border-radius:10px;
  background:#2d6cdf;
  color:white;
}

#splash {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#0b1a2b;
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
  animation: fadeOut 1s ease forwards;
  animation-delay: 2s;
}

#splash h1 {
  color:white;
  font-size:28px;
  letter-spacing:2px;
  animation: zoom 2s ease;
}

@keyframes fadeOut {
  to {
    opacity:0;
    visibility:hidden;
  }
}

@keyframes zoom {
  0% {
    transform:scale(0.8);
    opacity:0;
  }
  100% {
    transform:scale(1);
    opacity:1;
  }
}