/* Steal a Jajanan — landing. Palet = UI game: malam navy, terpal merah, krim, emas lampu, pink neon. */
:root {
  --malam: #141a33;
  --malam-2: #1f2749;
  --permukaan: #232c4e;
  --garis: #3b4670;
  --krim: #f5e9cf;
  --krim-redup: #b9b3a6;
  --emas: #ffd23f;
  --merah: #d63a3a;
  --pink: #ff2e88;
  --teal: #3ec7b9;
  --lime: #b8ff3c;
  --display: "Luckiest Guy", "Impact", sans-serif;
  --body: "Fredoka", "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --maks: 1120px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--malam);
  color: var(--krim);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: 0.01em; }
h2 { font-size: clamp(30px, 4.6vw, 48px); color: var(--emas); text-shadow: 0 3px 0 #6b4a00; }
h3 { font-size: 22px; color: var(--krim); }
.sub { margin: 6px 0 28px; color: var(--krim-redup); max-width: 60ch; }
section { padding: clamp(48px, 8vw, 96px) var(--gutter); max-width: var(--maks); margin: 0 auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--emas); color: var(--malam); padding: 8px 12px; border-radius: 8px; z-index: 99; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }

/* tombol: gaya tombol in-game (bulat penuh, bayangan solid) */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 18px; border: 3px solid rgba(0,0,0,.25);
  box-shadow: 0 5px 0 rgba(0,0,0,.35); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(0,0,0,.35); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.btn-utama { background: var(--emas); color: #2b1d00; }
.btn-sekunder { background: var(--permukaan); color: var(--krim); border-color: var(--garis); }
.btn-kecil { padding: 9px 16px; font-size: 15px; background: var(--merah); color: #fff; }
.btn-discord { background: #5865f2; color: #fff; border-color: #3c46b8; }
.btn-tiktok { background: #111; color: #fff; border-color: #333; box-shadow: 0 5px 0 rgba(0,0,0,.35), -2px 0 0 var(--teal) inset, 2px 0 0 var(--pink) inset; }
.btn .ik { width: 20px; height: 20px; vertical-align: -4px; margin-right: 6px; }
.nav-kanan { display: flex; align-items: center; gap: 14px; }
.nav-sosial { color: var(--krim-redup); text-decoration: none; font-weight: 600; font-size: 15px; }
.nav-sosial:hover { color: var(--krim); }
@media (max-width: 640px) { .nav-sosial { display: none; } }

/* ---------------- komunitas ---------------- */
.grid-komunitas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kartu-komunitas {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 14px;
  padding: 18px 20px; border-radius: 18px; text-decoration: none; color: #fff;
  border: 2px solid rgba(255,255,255,.12); box-shadow: 0 6px 0 rgba(0,0,0,.35); transition: transform .12s ease, box-shadow .12s ease;
}
.kartu-komunitas:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(0,0,0,.35); }
.kartu-komunitas.discord { background: linear-gradient(135deg, #5865f2, #3c46b8); }
.kartu-komunitas.tiktok { background: linear-gradient(135deg, #1b1b1f, #000); border-color: var(--pink); }
.kk-ikon { width: 56px; height: 56px; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: 14px; }
.kk-ikon .ik { width: 32px; height: 32px; }
.kk-isi { display: flex; flex-direction: column; gap: 4px; }
.kk-isi b { font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .01em; }
.kk-isi span { font-size: 14px; opacity: .85; }
.kk-isi code { background: rgba(255,255,255,.18); padding: 1px 6px; border-radius: 6px; font-family: var(--body); font-weight: 700; }
.kk-aksi { font-weight: 700; white-space: nowrap; }
@media (max-width: 420px) { .kartu-komunitas { grid-template-columns: 48px 1fr; } .kk-aksi { grid-column: 2; } }
.footer-sosial a { color: var(--krim); font-weight: 600; text-decoration: none; }
.footer-sosial a:hover { color: var(--emas); }

/* ---------------- hero: langit pasar malam + rantai bohlam ---------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 70% -10%, #2b3565 0%, transparent 60%),
    radial-gradient(800px 400px at 10% 30%, #2a1f3f 0%, transparent 60%),
    var(--malam);
  padding: 0 var(--gutter) 0;
}
.lampu { position: absolute; inset: 0 0 auto 0; height: 140px; pointer-events: none; }
.lampu svg { width: 100%; height: 140px; }
.bohlam circle { fill: var(--emas); filter: drop-shadow(0 0 10px rgba(255, 210, 63, .9)); animation: kedip 2.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes kedip { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.nav { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; max-width: var(--maks); margin: 0 auto; padding: 22px 0 0; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 20px; color: var(--krim); }
.brand img { border-radius: 10px; }
.hero-isi { position: relative; z-index: 2; max-width: var(--maks); margin: 0 auto; padding: clamp(56px, 9vw, 120px) 0 24px; }
.eyebrow { margin: 0 0 10px; color: var(--teal); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 13px; }
h1 { line-height: .9; }
h1 .baris1 { display: block; font-size: clamp(34px, 6vw, 64px); color: var(--krim); }
h1 .baris2 {
  display: block; font-size: clamp(76px, 15vw, 168px); color: var(--emas);
  text-shadow: 0 4px 0 #8a5a00, 0 10px 0 rgba(0,0,0,.35);
}
.lede { max-width: 56ch; font-size: clamp(17px, 2vw, 21px); margin: 22px 0 26px; }
.lede strong { color: var(--pink); font-weight: 700; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.statistik { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 28px 0 0; padding: 0; color: var(--krim-redup); }
.statistik b { color: var(--krim); font-size: 20px; margin-right: 4px; }

/* thumbnail sebagai "tenda": bingkai terpal garis merah-putih */
.tenda {
  position: relative; z-index: 2; margin: 24px auto 0; max-width: var(--maks);
  padding: 14px 14px 10px; border-radius: 22px 22px 0 0;
  background: repeating-linear-gradient(90deg, var(--merah) 0 40px, var(--krim) 40px 80px);
  transform: rotate(-1.2deg);
}
.tenda img { border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5); width: 100%; }
.tenda figcaption { position: absolute; right: 26px; bottom: 22px; background: var(--malam); color: var(--emas); font-family: var(--display); padding: 6px 12px; border-radius: 10px; font-size: 15px; }

/* ---------------- conveyor: signature ---------------- */
.conveyor { max-width: none; padding: 0; margin-top: -8px; background: #10142a; }
.rel {
  position: relative; overflow: hidden; padding: 26px 0;
  background: repeating-linear-gradient(90deg, #262a3d 0 36px, #1d2033 36px 72px);
  border-top: 4px solid var(--emas); border-bottom: 4px solid var(--emas);
  box-shadow: 0 0 24px rgba(255, 210, 63, .35), inset 0 0 24px rgba(255, 210, 63, .25);
}
.jalur { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; width: max-content; animation: jalan 90s linear infinite; }
.rel:hover .jalur { animation-play-state: paused; }
@keyframes jalan { to { transform: translateX(-50%); } }
.item {
  width: 120px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--permukaan); border: 2px solid var(--r); border-radius: 14px; padding: 8px 6px 10px; cursor: pointer;
  transition: transform .15s ease;
}
.item:hover { transform: translateY(-8px) rotate(-3deg); }
.item.dicuri { animation: dicuri .9s ease forwards; }
@keyframes dicuri { 30% { transform: translateY(-30px) rotate(8deg); } 100% { transform: translateY(-120px) rotate(20deg); opacity: 0; } }
.item .nm { font-weight: 600; font-size: 13px; line-height: 1.15; margin-top: 4px; color: var(--r); }
.item .rr { font-size: 11px; color: var(--krim-redup); }
.conveyor-ket { max-width: var(--maks); margin: 14px auto 0; padding: 0 var(--gutter) 18px; color: var(--krim-redup); font-size: 15px; }

/* ---------------- cara main: benar-benar urutan ---------------- */
.langkah { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: l; }
.langkah li { background: var(--permukaan); border: 2px solid var(--garis); border-radius: 18px; padding: 22px 22px 20px; position: relative; }
.langkah .no { position: absolute; top: -16px; left: 18px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--emas); color: #2b1d00; font-family: var(--display); font-size: 22px; border-radius: 50%; box-shadow: 0 4px 0 #8a5a00; }
.langkah h3 { margin: 10px 0 6px; }
.langkah p { margin: 0; color: var(--krim-redup); }

/* ---------------- fitur ---------------- */
.grid-fitur { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-fitur li { background: linear-gradient(180deg, var(--malam-2), var(--permukaan)); border: 2px solid var(--garis); border-radius: 18px; padding: 20px; }
.grid-fitur h3 { font-size: 20px; color: var(--emas); }
.grid-fitur p { margin: 8px 0 0; color: var(--krim-redup); }

/* ---------------- pets ---------------- */
.grid-pet { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 1000px) { .grid-pet { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 520px) { .grid-pet { grid-template-columns: repeat(2, 1fr); } .pet img { width: 110px; } }
.pet { background: var(--permukaan); border: 2px solid var(--garis); border-radius: 18px; padding: 14px; text-align: center; }
.pet img { margin: 0 auto; width: 140px; transition: transform .25s ease; }
.pet:hover img { transform: translateY(-10px) scale(1.06); }
.pet h3 { font-size: 19px; margin-top: 6px; }
.pet p { margin: 4px 0 8px; font-size: 14px; color: var(--krim-redup); min-height: 2.6em; }
.pet .harga { display: inline-block; background: var(--malam); color: var(--emas); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: 14px; }

/* ---------------- teriakan pedagang ---------------- */
.teriak { max-width: none; padding: 0; overflow: hidden; border-top: 2px solid var(--garis); border-bottom: 2px solid var(--garis); background: var(--malam-2); }
.teriak-jalur { display: flex; gap: 40px; width: max-content; padding: 16px 0; animation: jalan 60s linear infinite; font-family: var(--display); font-size: clamp(18px, 2.4vw, 26px); color: var(--krim); }
.teriak-jalur span::before { content: "🗣"; margin-right: 10px; }

/* ---------------- ajakan & footer ---------------- */
.ajakan { text-align: center; }
.ajakan p { color: var(--krim-redup); max-width: 50ch; margin: 10px auto 26px; }
footer { padding: 32px var(--gutter) 40px; text-align: center; color: var(--krim-redup); font-size: 14px; border-top: 1px solid var(--garis); }

@media (max-width: 640px) {
  .tenda { transform: none; padding: 10px 10px 8px; border-radius: 16px 16px 0 0; }
  .tenda figcaption { right: 16px; bottom: 16px; }
  .item { width: 104px; }
  .statistik b { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .jalur, .teriak-jalur { animation: none; }
  .bohlam circle { animation: none; }
  .item, .pet img, .btn { transition: none; }
  html { scroll-behavior: auto; }
}