/* Bycle BSync — komponen layout yang dipakai lintas halaman.

   File ini di-link otomatis ke setiap halaman oleh build.js (dicari tag
   <link rel="stylesheet" href="/global.css">, disisipkan sebelum support.js),
   jadi menambah aturan di sini langsung berlaku di semua .dc.html tanpa
   menyalin apa pun. Ini pengecualian yang disengaja dari aturan "markup
   bersama diduplikasi di tiap halaman" di CLAUDE.md.

   ── BREAKPOINTS — desktop-first ───────────────────────────────────────────
   Aturan di blok DASAR adalah versi desktop. Blok media menimpanya berurutan:

     ≥1001px  desktop  → blok DASAR saja
     ≤1000px  tablet   → DASAR + TABLET   (nav situs juga collapse di sini)
     ≤640px   mobile   → DASAR + TABLET + MOBILE

   Rentangnya bertingkat, bukan terpisah: di 500px blok TABLET dan MOBILE
   sama-sama aktif, MOBILE menang karena ditulis terakhir. Cukup tulis
   selisihnya di tiap blok.

   ── Kenapa ada !important di blok MOBILE ──────────────────────────────────
   support.js menyuntikkan stylesheet runtime (cari `st.textContent`) yang
   memakai !important untuk .bs-stats di ≤480px. Saat dua aturan sama-sama
   !important, pemenangnya ditentukan spesifisitas — jadi selector di bawah
   sengaja memakai dua class agar mengungguli aturan suntikan itu. Detailnya
   ada di komentar masing-masing aturan.
   ────────────────────────────────────────────────────────────────────────── */

/* ── DASAR (desktop) ─────────────────────────────────────────────────────── */

.header-point {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 45px;
  animation: bsFade 0.6s ease 0.24s both;
}

.content-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.platform-title {
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0 0 16px;
  white-space: nowrap;
}

.footer-container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 60px 24px 40px;
  display: grid;
  grid-template-columns: 1.5fr 4.3fr;
  gap: 40px;
}

.footer-data {
  margin: 0 auto;
  /* padding: 0px 24px 40px; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.3fr;
}

.bs-foot-brand {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* ── TABLET — ≤1000px ────────────────────────────────────────────────────── */

@media only screen and (max-width: 1000px) {
  .header-point {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Di ≤1100px stylesheet suntikan memaksa
     `.bs-foot { grid-template-columns: repeat(2,1fr) !important }`, jadi kolom
     data cuma dapat separuh layar dan 4 kolomnya jadi sempit. Elemennya punya
     dua class (`bs-foot footer-container`), jadi selector (0,2,0) di bawah
     mengungguli suntikan itu: brand satu baris penuh, data satu baris penuh. */
  .bs-foot.footer-container {
    grid-template-columns: 1fr !important;
    max-width: none;
    gap: 40px;
  }

  .footer-container .bs-foot-brand {
    max-width: 560px !important;
  }

  .footer-data {
    margin: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: left;
  }
}

/* ── MOBILE — ≤640px ─────────────────────────────────────────────────────── */

@media only screen and (max-width: 640px) {
  .header-point {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 32px;
  }

  /* Di ≤480px stylesheet suntikan memaksa
     `.bs-stats { grid-template-columns: 1fr !important }`, bobotnya (0,1,0) —
     sama dengan `.header-point`, jadi !important-nya menang dan kolomnya jatuh
     ke 1. Selector dua-class ini (0,2,0) yang membuat 2 kolom bertahan sampai
     lebar terkecil. */
  .bs-stats.header-point {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
    max-width: 660px !important;
  }

  .content-header {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* `.bs-stats > div { display:flex !important }` dari stylesheet suntikan
     aktif di ≤480px dan membuat angka & label sejajar. Selector di sini sengaja
     `.bs-stats > .stat-item` (0,2,0) agar mengalahkan `.bs-stats > div`
     (0,1,1); `.stat-item` saja akan kalah, bahkan dengan !important. */
  .bs-stats>.stat-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  .platform-title {
    white-space: normal;
  }

  .footer-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 24px 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }

  .footer-data {
    margin: 0 auto;
    /* padding: 0px 24px 40px; */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
  }

  .footer-container .bs-foot-brand img {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .footer-data .bs-foot-links {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .footer-data .bs-foot-contact {
    align-items: flex-start !important;
  }

  .footer-data .bs-foot-contact a,
  .footer-data .bs-foot-contact>span {
    justify-content: flex-start !important;
    text-align: left !important;
  }
}