:root{
  --bg: #050505;
  --panel: #0b0b0b;
  --panel2:#101010;
  --line: #00c8ff;
  --red: #e10000;
  --yellow: #ffe100;
  --text: #f2f2f2;
  --muted:#cfcfcf;
  --border:#232323;
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  font-family: Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;

  /* efek dot merah halus seperti nuansa gambar */
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255,0,0,.18) 1px, transparent 1px),
    radial-gradient(circle at 24px 24px, rgba(255,0,0,.10) 1px, transparent 1px);
  background-size: 26px 26px;
}

.container{
  width: min(520px, 100%);
  margin: 0 auto;
  background: linear-gradient(180deg, #000 0%, #070707 40%, #000 100%);
  min-height: 100vh;

  /* “frame” biar desktop tetap rapi */
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.65);
}

/* HEADER */
.header{
  background:#000;
  padding: 14px 12px;
  display:flex;
  justify-content:center; /* logo tengah */
  align-items:center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.logo{
  display:flex;
  justify-content:center;
  align-items:center;
}

.logo img{
  height: 52px;
  width: auto;
  display:block;
  filter: drop-shadow(0 0 10px rgba(255,0,0,.25));
}

/* RUNNING TEXT */
.running-text{
  background: #0a0a0a;
  border-bottom: 2px solid var(--line);
  overflow:hidden;
  white-space:nowrap;
}

.marquee{
  display:inline-block;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .2px;

  /* marquee */
  animation: marquee 14s linear infinite;
  padding-left: 100%;
}

@keyframes marquee{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* BUTTONS */
.auth-buttons{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  background:#000;
}

.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 13px 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-decoration:none;
  border-radius: 4px;
  user-select:none;
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.btn:active{ transform: scale(.99); }

.btn.daftar{
  background: var(--yellow);
  color:#000;
}

.btn.login{
  background: var(--red);
  color:#fff;
}

.btn:hover{
  filter: brightness(1.05);
  border-color: rgba(255,255,255,.18);
}

/* BANNER */
.banner{
  padding: 10px 16px;
  background:#000;
}

.banner img{
  width:100%;
  height:auto;

  /* supaya seluruh gambar tampil */
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.10);
  background:#000;
}


/* GRID MENU */
.menu-grid{
  padding: 10px 16px 20px;
  background:#000;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.card{
  display:block;
  border-radius: 6px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: #0b0b0b;
  transition: transform .16s ease, border-color .16s ease;
}

.card img{
  width:100%;
  display:block;

  /* DIPERKECIL */
  max-height: 150px;
  object-fit: contain;
  background:#000;
}

.card:hover{
  transform: translateY(-2px);
  border-color: rgba(255,0,0,.45);
  filter: brightness(1.03);
}

/* DESKRIPSI */
.description{
  padding: 18px 14px 28px;
  background: #0a0a0a;
  border-top: 1px solid rgba(255,255,255,.06);
  line-height: 1.75;
  font-size: 14px;
  color: #eaeaea;
}

.description h2{
  font-size: 18px;
  margin-bottom: 10px;
  color: #ffcc00;
  letter-spacing:.2px;
}

.description h3{
  margin-top: 18px;
  margin-bottom: 8px;
  font-size: 16px;
  color: #ff3b3b;
}

/* Desktop enhancement: tetap center dan enak dilihat */
@media (min-width: 900px){
  body{
    display:flex;
    justify-content:center;
  }
  .container{
    margin: 18px auto;
    border-radius: 12px;
    overflow:hidden;
    min-height: auto;
  }
}