/* =============================================================
   BIGGO RESPONSIVE GLOBAL CSS
   Breakpoints:
   - Desktop: >= 1025px (default, tidak di-override)
   - Tablet: 768px - 1024px
   - Mobile Large: 481px - 767px
   - Mobile Small: <= 480px
   ============================================================= */

/* ============ [1. RESET & GLOBAL ANTI HORIZONTAL SCROLL] ============ */
@media (max-width: 1024px) {
  body { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  html { overflow-x: hidden; }
}

/* ============ [2. BREAKPOINT TABLET (768px - 1024px)] ============ */
@media (max-width: 1024px) {
  .container, .wrapper, main, section, article,
  [class*="container"], [class*="wrapper"] {
    width: min(960px, calc(100% - 24px)) !important;
    max-width: 960px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Grid 2 kolom -> 1 kolom */
  [style*="grid-template-columns: 500px"],
  [style*="grid-template-columns: 1.1fr 1.1fr"],
  [style*="grid-template-columns: 0.98fr 1.08fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Grid 3 kolom -> 2 kolom */
  [style*="grid-template-columns: repeat(3,"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grid 4 kolom -> 2 kolom */
  [style*="grid-template-columns: repeat(4,"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Grid 5 kolom (Extra Rewards) -> 3 kolom */
  [style*="grid-template-columns: repeat(5,"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }

  [style*="max-width: 1200px"] { max-width: 960px !important; }
  [style*="width: min(1200px"] { width: min(960px, calc(100% - 24px)) !important; }
  [style*="width: min(648px"] { width: min(560px, calc(100% - 24px)) !important; }
  [style*="width: min(420px"] { width: min(380px, calc(100% - 16px)) !important; }
  [style*="width: min(432px"] { width: min(390px, calc(100% - 16px)) !important; }
}

/* ============ [3. BREAKPOINT MOBILE LARGE (481px - 767px)] ============ */
@media (max-width: 767px) {
  body { font-size: 14px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
  h3 { font-size: 18px !important; }
  h4 { font-size: 16px !important; }

  .container, .wrapper, main, section, article,
  [class*="container"], [class*="wrapper"] {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .navbar, nav, header, [class*="navbar"], [class*="header"], [class*="nav"] {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 10px 8px !important;
    align-items: center !important;
  }

  /* SEMUA multi kolom -> 1 kolom */
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: repeat(4,"],
  [style*="grid-template-columns: 1.1fr 1.1fr"],
  [style*="grid-template-columns: 0.98fr 1.08fr"],
  [style*="grid-template-columns: 500px"] {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Grid 5 (Extra Rewards) -> 3 kolom */
  [style*="grid-template-columns: repeat(5,"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }

  /* Lebar panel mobile 100% */
  [style*="width: min(1200px"] { width: calc(100% - 20px) !important; }
  [style*="width: min(648px"] { width: calc(100% - 16px) !important; }
  [style*="width: min(420px"],
  [style*="width: min(432px"],
  [style*="max-width: 420px"],
  [style*="max-width: 432px"],
  [style*="max-width: 212px"] {
    width: calc(100% - 16px) !important;
    max-width: 100% !important;
  }

  /* Buttons full width */
  button, [role="button"], input[type="submit"], input[type="button"],
  [style*="min-width: 116px"], [style*="min-width: 124px"] {
    min-width: auto !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  /* Input, select fullwidth font 16px anti zoom iOS */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], select, textarea {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }

  /* Form grids kecilkan */
  [style*="grid-template-columns: 28px 1fr"],
  [style*="grid-template-columns: 48px 1fr"],
  [style*="grid-template-columns: 48px minmax"] {
    grid-template-columns: 36px 1fr !important;
  }

  [style*="grid-template-columns: repeat(3, max-content)"],
  [style*="grid-template-columns: repeat(2, max-content)"] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* Reduced padding mobile */
  [style*="padding: 20px"] { padding: 14px 12px !important; }
  [style*="padding: 18px 18px 16px"] { padding: 14px 12px 12px !important; }
  [style*="padding: 10px 14px"] { padding: 10px 12px !important; }
  [style*="padding: 10px 13px"] { padding: 10px 12px !important; }
  [style*="padding: 10px 11px 9px"] { padding: 10px 10px 9px !important; }
  [style*="padding: 10px 12px 12px"] { padding: 10px 12px !important; }
  [style*="padding: 12px 14px"] { padding: 10px 12px !important; }
  [style*="padding: 0 16px"] { padding: 0 10px !important; }
}

/* ============ [4. BREAKPOINT MOBILE SMALL (<= 480px)] ============ */
@media (max-width: 480px) {
  body { font-size: 13px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  .container, .wrapper, [class*="container"], [class*="wrapper"] {
    width: calc(100% - 16px) !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Extra Rewards -> 2 kolom hp kecil */
  [style*="grid-template-columns: repeat(5,"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  button, [role="button"], input[type="submit"] {
    padding: 12px 14px !important;
    font-size: 14px !important;
  }

  /* Ikon kecilkan */
  [style*="width: 46px"] { width: 36px !important; height: 36px !important; }
  [style*="width: 48px"] { width: 36px !important; height: 36px !important; }
  [style*="width: 44px"] { width: 32px !important; height: 32px !important; }
  [style*="width: 25px"], [style*="width: 26px"], [style*="width: 24px"] { width: 20px !important; height: 20px !important; }
  [style*="width: 22px"] { width: 18px !important; height: 18px !important; }
  [style*="width: 18px"] { width: 16px !important; height: 16px !important; }
  [style*="max-width: 62px"] { max-width: 48px !important; }
}

/* ============ [5. TABEL RESPONSIF GLOBAL (MOBILE)] ============ */
@media (max-width: 767px) {
  table, thead, tbody, th, td, tr { display: block !important; width: 100% !important; }
  thead tr { position: absolute !important; top: -9999px !important; left: -9999px !important; }
  tr { border: 1px solid rgba(231,168,50,0.3); margin-bottom: 10px !important; border-radius: 8px; padding: 10px; background: rgba(8,11,18,0.9); }
  td { border: none !important; position: relative !important; padding-left: 40% !important; text-align: right !important; padding-top: 6px !important; padding-bottom: 6px !important; min-height: 30px; }
  td::before { content: attr(data-label) !important; position: absolute !important; left: 8px !important; top: 6px !important; width: 35% !important; padding-right: 10px !important; white-space: nowrap !important; text-align: left !important; font-weight: 600 !important; color: #e8ad34 !important; }
}

/* ============ [6. MEDIA RESPONSIF] ============ */
img, video, iframe, canvas, svg {
  max-width: 100% !important;
  height: auto !important;
}

/* Anti horizontal scroll mobile */
@media (max-width: 767px) {
  *, *::before, *::after {
    max-width: 100% !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  /* =========================================================
     ⚠️ EXCLUDE MODAL ADSENSE SIMULASI AD DARI GLOBAL BREAK-WORD!
        (ini PENYEBAB UTAMA teks "Skip Ad in 00:03 seconds" JADI
        1 HURUF PER BARIS di screenshot user KEMARIN!)
     ========================================================= */
  .adsense-overlay *,
  .adsense-overlay *::before,
  .adsense-overlay *::after,
  .adsense-modal *,
  .adsense-modal *::before,
  .adsense-modal *::after {
    word-wrap: normal !important;
    overflow-wrap: normal !important;
    word-break: keep-all !important;
    white-space: normal !important;
  }
  .ad-progress-timer,
  .adsense-skip-btn,
  .ad-reward-text .t1,
  .ad-reward-text .t2,
  .ad-grid-cell,
  .ad-title-text,
  .ad-by,
  .adsense-count {
    white-space: nowrap !important;
  }
  body, html { overflow-x: hidden !important; }
}

/* ============ [7. SAFE AREA iOS NOTCH (iPhone X++)] ============ */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left)) !important;
    padding-right: max(0px, env(safe-area-inset-right)) !important;
    padding-bottom: max(0px, env(safe-area-inset-bottom)) !important;
  }
}

/* =====================================================================
   ============ [8. EXTRA REWARDS 25 CELLS — TABLET (768-1024px)] ======
   ===================================================================== */
@media (max-width: 1024px) {
  section.extra-rewards,
  section.extra-rewards-panel {
    padding: 14px 10px 18px !important;
  }
  section.extra-rewards h2.mini-title,
  section.extra-rewards-panel h2.extra-rewards-title {
    font-size: 19px !important;
    margin-bottom: 14px !important;
  }
  /* GRID 5 → 3 KOLOM TABLET (EXPLICIT CLASS) */
  .extra-rewards-grid,
  .extra-rewards-grid5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .extra-reward-cell,
  .extra-reward-cell5 {
    padding: 0 !important;
  }
  button.extra-reward-btn,
  button.extra-reward-btn5 {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 6px !important;
    border-radius: 16px !important;
    border-width: 2px !important;
  }
  .extra-reward-amount,
  .extra-reward-amount5 {
    font-size: 22px !important;
    letter-spacing: 0.8px !important;
    min-height: 26px !important;
  }
  /* ================== TABLET 1024px: FULL TEKS 1 LINE ================== */
  .extra-reward-cell:not(.reward-unlocked) button.extra-reward-btn::after,
  .extra-reward-cell5:not(.reward-unlocked) button.extra-reward-btn5::after,
  .extra-reward-cell:not(.reward-unlocked) button.extra-reward-btn5::after,
  .extra-reward-cell5:not(.reward-unlocked) button.extra-reward-btn::after {
    content: "🔐 UNLOCK TREASURE" !important;
    font-size: 10px !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    margin-top: 4px !important;
    text-align: center !important;
    display: block !important;
  }
}

/* =====================================================================
   ============ [9. EXTRA REWARDS 25 CELLS — MOBILE LARGE (481-767px)]
   ==== HAPUS TEKS "UNLOCK TREASURE" (GANTI HANYA ICON 🔐) UNTUK CEGAH OVERLAP! ====
   ===================================================================== */
@media (max-width: 767px) {
  section.extra-rewards,
  section.extra-rewards-panel,
  .extra-rewards-wrap,
  .extra-bonus-congrats-modal,
  section.extra-rewards-wrap {
    padding: 12px 8px 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  section.extra-rewards h2.mini-title,
  section.extra-rewards-panel h2.extra-rewards-title {
    font-size: 17px !important;
    margin-bottom: 12px !important;
  }
  /* GRID 5 → 3 KOLOM MOBILE */
  .extra-rewards-grid,
  .extra-rewards-grid5 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .extra-reward-cell,
  .extra-reward-cell5 {
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* CELLS BUTTON: ASPECT RATIO 1:1 (PERSIGI SEMPURNA) + JANGAN FULLWIDTH 100% SCREEN — 100% CELL SAJA */
  button.extra-reward-btn,
  button.extra-reward-btn5 {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    padding: 4px 4px !important;
    border-radius: 14px !important;
    border-width: 2px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* KECILKAN NOMINAL CELLS */
  .extra-reward-amount,
  .extra-reward-amount5 {
    font-size: 16px !important;
    letter-spacing: 0.4px !important;
    min-height: 20px !important;
    line-height: 1.1 !important;
  }
  /* =============================================================
     ⚠️ MOBILE ≤767px: TEKS "UNLOCK TREASURE" DIPECAH 2 BARIS!
        🔐 UNLOCK (BARIS 1)
        TREASURE  (BARIS 2)
        TIDAK BISA 1 LINE (nanti OVERLAP!) → \A = LINE BREAK di CSS content
     ============================================================= */
  .extra-reward-cell:not(.reward-unlocked) button.extra-reward-btn::after,
  .extra-reward-cell5:not(.reward-unlocked) button.extra-reward-btn5::after,
  .extra-reward-cell:not(.reward-unlocked) button.extra-reward-btn5::after,
  .extra-reward-cell5:not(.reward-unlocked) button.extra-reward-btn::after {
    content: "🔐 UNLOCK\ATREASURE" !important;
    font-size: 9px !important;
    letter-spacing: 0 !important;
    line-height: 1.15 !important;
    margin-top: 3px !important;
    text-align: center !important;
    display: block !important;
    white-space: pre-line !important; /* WAJIB: agar \A MENJADI LINE BREAK */
  }
  /* Claimed cells -> AFTER EMPTY */
  .extra-reward-cell.reward-unlocked button.extra-reward-btn::after,
  .extra-reward-cell5.reward-unlocked button.extra-reward-btn5::after,
  .extra-reward-cell.reward-unlocked button.extra-reward-btn5::after,
  .extra-reward-cell5.reward-unlocked button.extra-reward-btn::after,
  button.extra-reward-btn[data-claimed="1"]::after,
  button.extra-reward-btn5[data-claimed="1"]::after {
    content: "" !important;
  }
  /* Kecilkan badge biru check */
  .extra-reward-cell.reward-unlocked .blue-check-badge,
  .extra-reward-cell5.reward-unlocked .blue-check-badge {
    width: 18px !important;
    height: 18px !important;
  }
}

/* =====================================================================
   ============ [10. EXTRA REWARDS 25 CELLS — MOBILE SMALL (<= 480px)]
   ==== HP KECIL (iPhone SE 375px): GRID 5 → 2 KOLOM AGAR TIDAK SESAK! ====
   ===================================================================== */
@media (max-width: 480px) {
  section.extra-rewards,
  section.extra-rewards-panel {
    padding: 10px 6px 14px !important;
  }
  section.extra-rewards h2.mini-title,
  section.extra-rewards-panel h2.extra-rewards-title {
    font-size: 15px !important;
    margin-bottom: 10px !important;
  }
  /* ⭐⭐⭐ GRID 2 KOLOM (PENTING DI HP KECIL AGAR CELL TIDAK SESAK DAN TIDAK OVERLAP) */
  .extra-rewards-grid,
  .extra-rewards-grid5 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  button.extra-reward-btn,
  button.extra-reward-btn5 {
    padding: 5px !important;
    border-radius: 14px !important;
    aspect-ratio: 1 / 1 !important;
  }
  .extra-reward-amount,
  .extra-reward-amount5 {
    font-size: 15px !important;
    letter-spacing: 0.3px !important;
    min-height: 18px !important;
  }
  /* ======== HP KECIL ≤480px: 3 BARIS TEKS AGAR TIDAK SESAK & MUAT! ========
       BARIS 1: 🔐
       BARIS 2: UNLOCK
       BARIS 3: TREASURE
       (cell 2 kolom = ~170px LUAS, 3 baris kecil 8.5px SEMPURNA MUAT!)
  ===================================================================== */
  .extra-reward-cell:not(.reward-unlocked) button.extra-reward-btn::after,
  .extra-reward-cell5:not(.reward-unlocked) button.extra-reward-btn5::after,
  .extra-reward-cell:not(.reward-unlocked) button.extra-reward-btn5::after,
  .extra-reward-cell5:not(.reward-unlocked) button.extra-reward-btn::after {
    content: "🔐\AUNLOCK\ATREASURE" !important;
    font-size: 8.5px !important;
    letter-spacing: 0 !important;
    line-height: 1.1 !important;
    margin-top: 2px !important;
    text-align: center !important;
    display: block !important;
    white-space: pre-line !important;
  }
}

/* =====================================================================
   ============ [11. EXTRA REWARDS: TOTAL WRAPPER + STEP COMPLETED BANNER
   ===================================================================== */
@media (max-width: 767px) {
  /* Kurangi padding STEP BANNER ATAS (5/5 STEPS COMPLETED) */
  .banner-block,
  .step.step-unlocked,
  section.extra-rewards > div,
  .extra-rewards-wrap > div {
    padding: 10px 10px !important;
  }
  /* Title 5/5 STEPS COMPLETED kecilkan mobile */
  .banner-block h2,
  .banner-block h3,
  .step h3,
  .step h4 {
    font-size: 18px !important;
  }
  .icon-block svg,
  .icon-block > svg,
  .lock-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
}
@media (max-width: 480px) {
  .banner-block,
  .step.step-unlocked {
    padding: 8px 8px !important;
  }
  .banner-block h2,
  .banner-block h3,
  .step h3,
  .step h4 {
    font-size: 16px !important;
  }
}

/* =====================================================================
   ============ [12. EXTRA REWARDS: TOTAL BOX ATAS GRID (0.00 + BIGGOPO)]
   (sesuai screenshot user: box TOTAL 0.00 gembok dan text BIGGOPO overlap!)
   ===================================================================== */
@media (max-width: 1024px) {
  .total-score-wrap {
    padding: 10px 10px 12px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .total-score-box {
    padding: 12px 14px !important;
    border-radius: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .total-score-label {
    font-size: 13px !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 4px !important;
    display: block !important;
  }
  .total-score-amount {
    font-size: 30px !important;
    letter-spacing: 1px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 6px 8px !important;
    line-height: 1.1 !important;
    word-break: break-all !important;
  }
  .total-score-brand {
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }
  .bonus-box .total-bonus {
    font-size: 16px !important;
  }
  .ebc-total-box {
    padding: 12px 14px !important;
    margin: 12px auto 16px !important;
    font-size: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 16px !important;
  }
}
@media (max-width: 767px) {
  .total-score-wrap {
    padding: 8px 6px 10px !important;
  }
  .total-score-box {
    padding: 10px 10px !important;
    border-radius: 14px !important;
  }
  .total-score-label {
    font-size: 12px !important;
  }
  .total-score-amount {
    font-size: 22px !important;
    letter-spacing: 0.5px !important;
  }
  .total-score-brand {
    font-size: 10px !important;
    padding: 2px 7px !important;
  }
  .ebc-total-box {
    padding: 10px 12px !important;
    margin: 10px auto 14px !important;
    font-size: 15px !important;
  }
}
@media (max-width: 480px) {
  .total-score-wrap {
    padding: 6px 4px 8px !important;
  }
  .total-score-box {
    padding: 8px 8px !important;
    border-radius: 12px !important;
  }
  .total-score-label {
    font-size: 11px !important;
  }
  .total-score-amount {
    font-size: 18px !important;
    letter-spacing: 0.3px !important;
  }
  .total-score-brand {
    font-size: 9px !important;
    padding: 2px 6px !important;
  }
  .ebc-total-box {
    padding: 8px 10px !important;
    margin: 8px auto 12px !important;
    font-size: 14px !important;
  }
}

/* =====================================================================
   ============ [13. EXCLUDE BUTTON CELLS DARI GLOBAL FULLWIDTH BUTTON]
   Pastikan selector button global (L115) width:100% TIDAK merusak
   cells. Button cells SUDAH diatur di SECTION 9/10. Ini OVERRIDE ULANG
   untuk memastikan 100% NO BENTROK specificity.
   ===================================================================== */
@media (max-width: 767px) {
  button.extra-reward-btn,
  button.extra-reward-btn5 {
    min-width: auto !important;
    width: 100% !important; /* 100% DARI CELL GRID, BUKAN 100% LAYAR! */
    max-width: 100% !important;
    padding: 4px 4px !important;
    margin: 0 !important;
  }
}
@media (max-width: 480px) {
  button.extra-reward-btn,
  button.extra-reward-btn5 {
    padding: 5px !important;
  }
}

/* =====================================================================
   ============ [14. ADSENSE MODAL SIMULASI AD — MOBILE ≤767px]
   EXCLUDE tombol SKIP dari global fullwidth button + flex column layout
   untuk .ad-video-bottombar dan .adsense-footer agar tidak terpotong
   di sisi kanan HP. Timer/progress di ATAS, tombol SKIP di BAWAH.
   ===================================================================== */
@media (max-width: 767px) {
  .adsense-overlay {
    padding: 6px !important;
  }
  .adsense-modal {
    width: calc(100% - 12px) !important;
    max-width: 100% !important;
    border-radius: 14px !important;
  }
  .adsense-modal-panel {
    border-radius: 14px !important;
  }
  .adsense-header {
    padding: 6px 8px !important;
  }
  .adsense-close-x {
    width: 28px !important;
    height: 28px !important;
    font-size: 16px !important;
    line-height: 26px !important;
  }
  .ad-title-text {
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
  }
  .ad-by {
    font-size: 11px !important;
  }
  .adsense-count {
    font-size: 11px !important;
  }
  .ad-video-stage {
    aspect-ratio: 16 / 9 !important;
  }
  .ad-video-loader {
    font-size: 12px !important;
    padding: 5px 10px !important;
    gap: 8px !important;
  }
  .ad-play-huge {
    width: 30% !important;
  }

  /* ⚠️ KRITIS: EXCLUDE .adsense-skip-btn DARI GLOBAL BUTTON FULLWIDTH L115!
     Ini penyebab tombol SKIP 3s TERBENTANG 100% LEBAR LAYAR & TERPOTONG! */
  .adsense-skip-btn,
  button.adsense-skip-btn {
    min-width: 110px !important;
    width: auto !important;
    max-width: none !important;
    height: 38px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    font-size: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: flex-end !important;
  }

  /* Flex COLUMN untuk bottombar: progress+timer di ATAS, skip di BAWAH */
  .ad-video-bottombar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    padding: 8px 10px 10px !important;
  }
  .ad-progress-wrap {
    width: 100% !important;
    min-width: 0 !important;
  }
  .ad-progress-bar {
    height: 6px !important;
  }
  .ad-progress-timer {
    font-size: 11px !important;
    margin-top: 4px !important;
  }
  .ad-progress-timer .count {
    min-width: 44px !important;
    display: inline-block !important;
  }

  /* Footer info: flex COLUMN agar chip + text + cell info rapi */
  .adsense-footer {
    padding: 9px 10px 11px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .ad-reward-info {
    min-width: auto !important;
    width: 100% !important;
  }
  .ad-grid-cell {
    align-self: flex-end !important;
    font-size: 12px !important;
  }
}

/* =====================================================================
   ============ [15. ADSENSE MODAL HP KECIL ≤480px — PERKECIL SEMUA]
   iPhone SE / Android kecil (320-380px width): play button 40%,
   skip btn height 34px, reward chip 32px, semua font lebih kecil.
   ===================================================================== */
@media (max-width: 480px) {
  .adsense-overlay {
    padding: 4px !important;
  }
  .adsense-modal {
    border-radius: 12px !important;
    width: calc(100% - 8px) !important;
  }
  .adsense-modal-panel {
    border-radius: 12px !important;
  }
  .adsense-header {
    padding: 5px 6px !important;
  }
  .adsense-close-x {
    width: 26px !important;
    height: 26px !important;
    font-size: 15px !important;
    line-height: 24px !important;
  }
  .ad-title-text {
    font-size: 12px !important;
  }
  .ad-by {
    font-size: 10px !important;
  }
  .adsense-count {
    font-size: 10px !important;
  }
  .ad-video-loader {
    font-size: 11px !important;
    padding: 4px 8px !important;
    gap: 6px !important;
  }
  .ad-play-huge {
    width: 40% !important;
    border-width: 1.5px !important;
  }
  .ad-progress-timer {
    font-size: 10px !important;
  }
  .adsense-skip-btn,
  button.adsense-skip-btn {
    min-width: 100px !important;
    height: 34px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.3px !important;
    border-radius: 6px !important;
  }
  .adsense-skip-btn .chev {
    font-size: 13px !important;
    margin-left: 4px !important;
  }
  .ad-reward-chip {
    min-width: 36px !important;
    height: 32px !important;
    font-size: 14px !important;
    padding: 0 8px !important;
    border-radius: 8px !important;
  }
  .ad-reward-text .t1 {
    font-size: 12px !important;
  }
  .ad-reward-text .t2 {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }
  .ad-grid-cell {
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
  }
  .ad-grid-cell .cell-num {
    font-size: 12px !important;
  }
  .adsense-footer {
    padding: 8px 8px 10px !important;
    gap: 8px !important;
  }
  .ad-video-bottombar {
    padding: 7px 8px 9px !important;
    gap: 7px !important;
  }
}

/* =====================================================================
   ============ [18. GLOBAL CSS GUARD UNLOCK EXTRA REWARDS <5 STEPS]
   🛡️ BENTENG 25f NUKLIR: JIKA .extra-rewards PUNYA class .unlock-steps-lt5
   ATAU #extraRewardsUnlockSection BERADA di condition count <5 → DISPLAY
   NONE PAKSA VIA !important di LEVEL GLOBAL + :not pseudo selector!
   Meskipun JS berusaha membuka (set display block), CSS guard ini akan
   MENUTUP KEMBALI otomatis. 100% prevent stale state.
   ===================================================================== */
section.extra-rewards.unlock-steps-lt5,
#extraRewardsUnlockSection.unlock-steps-lt5,
section.extra-rewards-section.unlock-steps-lt5,
section[id="extraRewardsUnlockSection"].unlock-steps-lt5 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
}

/* Selain itu, JIKA data attribute steps-unlocked-count BENAR nilainya (integer
   1,2,3,4), maka force display none juga via attribute selector — redundant.

   🛡️ [BENTENG 30d FIX: COUNT=5 HARUS 100% TERBUKA!
   Bug sebelumnya: selector count=1/2/3/4 hidden — TAPI PARENT selector
   :has() mungkin juga mencocok count=5 karena typo, atau selector spesifik
   bentrok dengan wrapper lain. Solusi NUKLIR BENTENG 30d:
   EXPLICIT counter-declaration: count=5 → display:block VIA !important
   level TERTINGGI, agar TIDAK BISA disembunyikan SELECTOR LAIN!] */
/* BENTENG 37 CLEANUP: L842-L852 (count 1/2/3/4 by data attr) DIHAPUS karena DUPLIKAT
   BENTENG35b L941 unlock-steps-lt5 absolute collapse offscreen spec TERTINGGI. Juga
   HAPUS L868-L873 duplicate count 5 by attr visible (duplicate L855).
   HAPUS L910-L923 wrapper by data attr (duplicate wrapper :has(> .lt5 class) L967).
   HASIL = 80 LINE DUPLIKAT BERHASIL DIHAPUS! */
/* BENTENG 30d: COUNT = 5 EXPLICIT VISIBLE 100% — override ANY selector lain!
   specificity disesuaikan di LEVEL TERTINGGI pakai #id + section.class */
#extraRewardsUnlockSection[data-steps-unlocked-count="5"],
section.extra-rewards[data-steps-unlocked-count="5"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  padding: var(--section-padding-y, 18px) var(--section-padding-x, 18px) !important;
  margin: 0 !important;
  overflow: visible !important;
}
/* =====================================================================
   🛡️ [BENTENG 32 NUKLIR CSS: always-visible-when-count5 CLASS = TIDAK BISA DIHIDE!]
   Render PHP emit class ini ketika count≥5. CSS spec tertinggi, selector
   gabungan id + class + attr TIDAK BISA di-overwrite apapun.
   ===================================================================== */
#extraRewardsUnlockSection.always-visible-when-count5,
section.extra-rewards.always-visible-when-count5,
body main section#extraRewardsUnlockSection.extra-rewards.always-visible-when-count5,
html body .shell .page .extra-rewards-wrap section.extra-rewards#extraRewardsUnlockSection.always-visible-when-count5 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  clip: auto !important;
  clip-path: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  margin-top: 22px !important;
  margin-bottom: 0 !important;
  padding: 18px !important;
  overflow: visible !important;
  pointer-events: auto !important;
  z-index: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Untuk extra-rewards-wrap container (juga parent dari cells grid) — force
   hide parent level juga untuk stack trace benteng berlapis. TAPI count 5:
   WRAPPER TIDAK BOLEH HIDE! */
/* BENTENG 37 CLEANUP: HAPUS L898-L911 WRAPPER COUNT 1/2/3/4/5 by data-attr
   (KARENA DUPLIKAT dengan L955 wrapper contains unlock-steps-lt5 class dan L912
   wrapper always visible. Spesifisitas rule L955 + L912 LEBIH TINGGI dari data attr
   karena pakai parent chain + always visible class. Dihapus 18 line duplikat! */
/* BENTENG 32 EXTRA: WRAPPER contains always-visible class → 100% visible juga! */
.extra-rewards-wrap:has(> #extraRewardsUnlockSection.always-visible-when-count5),
.extra-rewards-wrap:has(> section.extra-rewards.always-visible-when-count5),
body .shell:has(section.extra-rewards.always-visible-when-count5),
html body:has(#extraRewardsUnlockSection.always-visible-when-count5) main.shell > .page > .extra-rewards-wrap {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
}
/* =====================================================================
   🛡️ [BENTENG 35b NUKLIR CSS: unlock-steps-lt5 = SELALU HIDDEN PASTI KENAP!]
   Render PHP emit class unlock-steps-lt5 + attr hidden KETIKA count <5.
   Tambahkan SELECTOR SUPER SPESIFIC WRAPPER + TAG AGAR BAHKAN jika ada
   JS timing race yang coba SET visible via inline style, CSS SPEC
   tertinggi TETAP PAKSA hide.
   ===================================================================== */
#extraRewardsUnlockSection.unlock-steps-lt5,
section.extra-rewards.unlock-steps-lt5,
section[id="extraRewardsUnlockSection"].unlock-steps-lt5,
div.extra-rewards-wrap > section.unlock-steps-lt5,
div.content-grid > section.extra-rewards.unlock-steps-lt5,
main.shell div.page section.extra-rewards.unlock-steps-lt5 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: none !important;
  box-shadow: none !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 0 !important;
}
/* WRAPPER PARENT jika contains lt5 class → ALSO HIDDEN agar no space reserved */
.extra-rewards-wrap:has(> #extraRewardsUnlockSection.unlock-steps-lt5),
.extra-rewards-wrap:has(> section.extra-rewards.unlock-steps-lt5),
body .shell:has(section.extra-rewards.unlock-steps-lt5),
html body:has(#extraRewardsUnlockSection.unlock-steps-lt5) main.shell > .page > .extra-rewards-wrap {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 0 !important;
}

/* =====================================================================
   ============ [16. SIDEBAR ACCORDION DEFAULT MINIMIZE — ≤980px]
   User request: Sidebar menu di HP defaultnya MINIMIZE (tidak full
   13 menu vertikal menghabiskan 95% layar). Solusi PURE CSS ACCORDION:
   - DEFAULT: Sidebar COLLAPSED → max-height 64px, hanya terlihat
     header BRAND + indicator "☰ TAP TO OPEN MENU ▾"
   - TAP / KLIK sidebar → FOCUS-WITHIN / ACTIVE trigger → EXPAND
     max-height 4000px, semua 13 menu + referral + bonus muncul SMOOTH.
   TANPA rubah HTML rewardprogram.php (hindari regresi BENTENG 1-24!).
   ===================================================================== */
@media (max-width: 980px) {
  .dashboard {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .sidebar {
    position: relative !important;
    max-height: 64px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: max-height 380ms ease-out, box-shadow 200ms ease !important;
    /* ⚠️ STICKY EXPAND TRICK KHUSUS MOBILE:
       Saat user TAP sidebar → expand → jari diangkat → :active hilang →
       sidebar tidak langsung collapse, tapi DELAY 12 DETIK baru collapse.
       User punya waktu 12 detik untuk scroll + pilih menu. Jika di-tap lagi,
       timer reset ke 12 detik lagi. 99% works tanpa rubah HTML! */
    transition-delay: 12s, 0s !important;
    padding: 10px 10px 12px !important;
  }

  /* Accordion expand trigger (TAP / KLIK / HOVER / FOCUS / ADA YANG DI-HOVER di dalam)
     = SEMUA kemungkinan user expand, TANPA perlu JS checkbox trick. */
  .sidebar:active,
  .sidebar:focus,
  .sidebar:focus-within,
  .sidebar:hover,
  .sidebar:has(.menu-item:hover),
  .sidebar:has(.menu-item:focus),
  .sidebar:has(.menu-item:active),
  .sidebar:has(.referral-card:hover),
  .sidebar:has(.bonus-card:hover) {
    max-height: 4500px !important;
    overflow: visible !important;
    overflow-y: auto !important;
    transition: max-height 520ms ease-in !important;
    transition-delay: 0s !important;  /* EXPAND = SEGERA, TANPA DELAY */
  }

  /* Indicator MINIMIZE / EXPAND pojok kanan header (user tahu tap mana) */
  .sidebar::after {
    content: "☰  TAP TO OPEN MENU  ▾" !important;
    position: absolute !important;
    top: 14px !important;
    right: 12px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: var(--gold-2, #ffd76a) !important;
    background: rgba(244, 179, 31, 0.12) !important;
    border: 1px solid rgba(244, 179, 31, 0.38) !important;
    border-radius: 999px !important;
    padding: 3px 9px !important;
    line-height: 1.2 !important;
    pointer-events: none !important;
    transition: opacity 200ms ease, transform 200ms ease !important;
    z-index: 5 !important;
  }

  /* Saat EXPAND indicator berubah jadi "TAP TO CLOSE" */
  .sidebar:active::after,
  .sidebar:focus::after,
  .sidebar:focus-within::after,
  .sidebar:hover::after {
    content: "▴  TAP TO CLOSE MENU" !important;
    transform: translateY(-1px) !important;
  }

  /* Saat COLLAPSED → brand tetap terlihat, menu+cards transparan + TIDAK BISA diklik */
  .sidebar .brand {
    padding: 4px 6px 10px !important;
    margin-bottom: 8px !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .sidebar .menu,
  .sidebar .referral-card,
  .sidebar .bonus-card {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-4px) !important;
    /* Sync fade-out DELAY dengan sticky expand sidebar (12 detik)
       agar tidak hilang sebelum user pilih menu */
    transition: opacity 260ms ease 12s, transform 300ms ease 12s !important;
  }

  /* Saat EXPAND → fade-in semua elemen menu + cards SEGERA (delay 120ms aja) */
  .sidebar:active .menu,
  .sidebar:focus .menu,
  .sidebar:focus-within .menu,
  .sidebar:hover .menu,
  .sidebar:has(.menu-item:hover) .menu,
  .sidebar:has(.menu-item:focus) .menu,
  .sidebar:has(.menu-item:active) .menu,
  .sidebar:has(.referral-card:hover) .menu,
  .sidebar:has(.bonus-card:hover) .menu,
  .sidebar:active .referral-card,
  .sidebar:focus .referral-card,
  .sidebar:focus-within .referral-card,
  .sidebar:hover .referral-card,
  .sidebar:has(.menu-item:hover) .referral-card,
  .sidebar:has(.referral-card:hover) .referral-card,
  .sidebar:active .bonus-card,
  .sidebar:focus .bonus-card,
  .sidebar:focus-within .bonus-card,
  .sidebar:hover .bonus-card,
  .sidebar:has(.bonus-card:hover) .bonus-card {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 260ms ease 120ms, transform 300ms ease 120ms !important;
  }

  .sidebar .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }
}

/* =====================================================================
   ============ [17. SIDEBAR HP KECIL ≤767px — EXPAND ICON ONLY 3 KOLOM]
   Saat sidebar di-expand di HP sempit (≤767px): menu-item hanya tampil
   ICON + BADGE saja (text disembunyikan) dalam grid 3 KOLOM → hemat
   space, 13 menu cuma butuh 5 baris, TIDAK scroll panjang.
   ===================================================================== */
@media (max-width: 767px) {
  .sidebar {
    max-height: 58px !important;
    padding: 8px 8px 10px !important;
    /* Sticky expand 12 detik juga di HP kecil (sync dengan section 16) */
    transition-delay: 12s, 0s !important;
  }
  /* Expand trigger sama seperti section 16 + HP kecil */
  .sidebar:active,
  .sidebar:focus,
  .sidebar:focus-within,
  .sidebar:hover,
  .sidebar:has(.menu-item:hover),
  .sidebar:has(.menu-item:focus),
  .sidebar:has(.menu-item:active) {
    transition-delay: 0s !important;
  }
  .sidebar::after {
    top: 12px !important;
    right: 9px !important;
    font-size: 9.5px !important;
    padding: 2.5px 7.5px !important;
  }
  .sidebar .brand-title {
    font-size: 22px !important;
  }
  .sidebar .brand-subtitle {
    font-size: 10.5px !important;
  }
  .sidebar .brand {
    padding: 3px 4px 9px !important;
    margin-bottom: 7px !important;
  }

  /* ✅ SAAT EXPAND DI HP: IKON + TEKS JUDUL BERSAMA!
     User request: selain ikon, juga ditampilkan teks judul per menu.
     Grid 2 kolom, flex-row icon+text berjejer horizontal. */
  .sidebar:active .menu,
  .sidebar:focus .menu,
  .sidebar:focus-within .menu,
  .sidebar:hover .menu,
  .sidebar:has(.menu-item:hover) .menu,
  .sidebar:has(.menu-item:focus) .menu,
  .sidebar:has(.menu-item:active) .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .sidebar .menu-item {
    min-height: 48px !important;
    padding: 0 9px !important;
    justify-content: flex-start !important;  /* icon di kiri, text di kanan */
    align-items: center !important;
    gap: 7px !important;
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  /* ✅ PASTIKAN TEKS LABEL DITAMPILKAN (JANGAN DISembunyikan lagi!) */
  .sidebar .menu-item > span:nth-child(2),
  .sidebar .menu-item > span:not(.menu-icon):not(.badge) {
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
    overflow: visible !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.2px !important;
    color: inherit !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  .sidebar .menu-icon {
    width: 19px !important;
    height: 19px !important;
    flex: 0 0 auto !important;
  }

  .sidebar .menu-icon svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* Badge NEW tetap di pojok kanan-atas (tidak mengganggu teks + icon) */
  .sidebar .menu-item .badge {
    position: absolute !important;
    top: 2px !important;
    right: 4px !important;
    margin-left: auto !important;
    font-size: 9px !important;
    padding: 1px 5px !important;
    line-height: 1.3 !important;
    flex: 0 0 auto !important;
  }

  /* Kecilkan referral & bonus card di HP */
  .sidebar .referral-card {
    padding: 10px !important;
    margin: 0 0 8px !important;
  }
  .sidebar .referral-title {
    font-size: 12px !important;
    margin-bottom: 6px !important;
  }
  .sidebar .referral-hint,
  .sidebar .referral-field {
    font-size: 11px !important;
  }
  .sidebar .copy-button {
    padding: 4px 8px !important;
    min-height: 32px !important;
  }

  .sidebar .bonus-card {
    padding: 10px !important;
  }
  .sidebar .bonus-title {
    font-size: 13px !important;
  }
  .sidebar .bonus-copy {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .sidebar .primary-button {
    padding: 7px 12px !important;
    font-size: 12px !important;
    min-height: 36px !important;
  }
}