<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<style>
  :root{
    --brand:#FF8500;--ink:#1a1a1a;--card:#fff;--soft:rgba(0,0,0,.08);
    --pill:#ffffff1a;--ok:#12b76a;--mid:#f59e0b;--low:#ef4444;
  }
  *{box-sizing:border-box}
  body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:var(--brand);color:#fff}
  .container{display:flex;flex-direction:column;min-height:100vh;background:var(--brand);overflow-x:hidden}

  /* Swiper: compact di mobile */
  .swiper{width:100%;padding:10px 0}
  .swiper-slide{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:6px;text-align:center;background:transparent;border:1px solid transparent;border-radius:10px;
    cursor:pointer;padding:6px;transition:transform .2s ease,border-color .2s ease,background .2s ease;
  }
  .swiper-slide img{width:30px;height:30px;object-fit:contain}
  .swiper-slide span{font-size:10px;font-weight:800;letter-spacing:.2px;color:#fff;text-transform:uppercase}
  .swiper-slide.active{background:var(--pill);border-color:#fff}
  .swiper-slide:hover{transform:translateY(-1px)}
  .swiper-button-next,.swiper-button-prev{color:#fff}
  .swiper-pagination-bullet{background:#fff!important}
  /* Sembunyikan arrow di mobile */
  @media (max-width:767.98px){.swiper-button-next,.swiper-button-prev{display:none}}

  /* Tablet+ */
  @media (min-width:768px){
    .swiper{padding:14px 0}
    .swiper-slide{padding:8px}
    .swiper-slide img{width:40px;height:40px}
    .swiper-slide span{font-size:12px}
  }
  @media (min-width:1024px){
    .swiper-slide img{width:48px;height:48px}
    .swiper-slide span{font-size:14px}
  }

  /* Grid konten */
  .content{display:none;padding:16px}
  .content.active{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
  .content ul{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;list-style:none;padding:0;margin:0;width:100%}
  .content li{background:var(--card);color:var(--ink);width:48%;border-radius:12px;box-shadow:0 6px 18px var(--soft);padding:10px;transition:transform .15s ease}
  .content li:hover{transform:translateY(-2px)}
  .content img{width:100%;border-radius:10px;margin-bottom:8px}

  /* RTP */
  .rtp-wrap{position:relative;margin-top:6px}
  .rtp-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
  .rtp-title{font-size:12px;font-weight:700;color:var(--ink)}
  .rtp-chip{font-size:11px;font-weight:800;color:#fff;background:#00000080;border-radius:999px;padding:5px 8px;min-width:40px;text-align:center}
  progress{width:100%;height:9px;border:none;border-radius:999px;background:#ececec;overflow:hidden}
  progress::-webkit-progress-bar{background:#ececec;border-radius:999px}
  progress::-webkit-progress-value{border-radius:999px;background:var(--mid)}
  progress.rtp--high::-webkit-progress-value{background:var(--ok)}
  progress.rtp--mid::-webkit-progress-value{background:var(--mid)}
  progress.rtp--low::-webkit-progress-value{background:var(--low)}
  progress::-moz-progress-bar{background:var(--mid);border-radius:999px}
  progress.rtp--high::-moz-progress-bar{background:var(--ok)}
  progress.rtp--mid::-moz-progress-bar{background:var(--mid)}
  progress.rtp--low::-moz-progress-bar{background:var(--low)}

  /* Tablet+ grid kolom lebih banyak */
  @media (min-width:768px){.content{padding:20px}.content li{width:31%}}
  @media (min-width:1024px){.content li{width:18%}}
</style>

