/* Beranda: "Lihat gamenya beraksi" — pemutar cuplikan 8 game */
/* PC: tidak terlalu besar, di tengah */
.promo-stage { display: grid; gap: var(--space-4); max-width: 820px; margin-inline: auto; }
.promo-screen {
  position: relative; border-radius: var(--radius-2xl); overflow: hidden;
  background: #000; aspect-ratio: 16 / 9;
  border: 1px solid var(--color-border);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04);
}
.promo-screen video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
.promo-live {
  position: absolute; top: var(--space-3); left: var(--space-3);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.promo-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; animation: promo-blink 1.2s infinite; }
@keyframes promo-blink { 50% { opacity: .25; } }
.promo-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .15); }
.promo-progress span { display: block; height: 100%; width: 0; background: var(--color-primary); }
.promo-playbtn {
  position: absolute; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, .55); color: #fff; font-size: 30px; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .15s;
}
.promo-playbtn:hover { transform: scale(1.06); }

.promo-cap {
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-xl);
  background: var(--color-surface); border: 1px solid var(--color-border);
}
.promo-cap-emoji { font-size: 32px; line-height: 1; }
.promo-cap-text { display: grid; gap: 2px; flex: 1 1 220px; min-width: 0; }
.promo-cap-text strong { font-family: var(--font-heading); font-size: var(--text-lg, 1.125rem); color: var(--color-text-primary); }
.promo-cap-text span { color: var(--color-text-secondary); font-size: var(--text-sm, .875rem); }
.promo-cap .badge { flex-shrink: 0; }

.promo-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.promo-thumb {
  position: relative; display: grid; gap: 6px; padding: 6px 6px 10px; text-align: left; cursor: pointer;
  border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text-primary); font: inherit; font-size: 13px; font-weight: 600;
  transition: border-color .15s, transform .15s;
}
.promo-thumb:hover { transform: translateY(-2px); }
.promo-thumb img { width: 100%; height: auto; align-self: start; aspect-ratio: 16 / 9; object-fit: cover; border-radius: calc(var(--radius-lg) - 4px); display: block; background: #000; }
.promo-thumb > span { padding: 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo-thumb em {
  position: absolute; top: 10px; right: 10px; font-style: normal; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: var(--radius-full); background: rgba(0, 0, 0, .7); color: #fde68a;
}
.promo-thumb[aria-selected="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }

@media (max-width: 760px) {
  /* HP: potong pinggiran hitam kiri-kanan supaya isi game lebih besar */
  .promo-screen { aspect-ratio: 4 / 3; }
  .promo-thumbs {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-2);
    margin: 0 calc(var(--space-4) * -1); padding: 2px var(--space-4) var(--space-2);
    scrollbar-width: none;
  }
  .promo-thumbs::-webkit-scrollbar { display: none; }
  .promo-thumb { flex: 0 0 42%; scroll-snap-align: start; font-size: 12px; }
  .promo-cap { padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .promo-cap-emoji { font-size: 26px; }
  .promo-cap .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .promo-live::before { animation: none; } }

/* Tombol suara di pojok kanan bawah video */
.promo-sound {
  position: absolute; right: var(--space-3); bottom: calc(var(--space-3) + 4px);
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 0; border-radius: var(--radius-full);
  background: rgba(0, 0, 0, .65); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 0 rgba(249, 115, 22, .6); animation: promo-pulse 2s infinite;
}
.promo-sound.is-on { animation: none; background: var(--color-primary); }
@keyframes promo-pulse { 70% { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); } 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } }
@media (prefers-reduced-motion: reduce) { .promo-sound { animation: none; } }