/* Penyempurnaan tampilan HP (< 768px). Dimuat setelah tailwind.css supaya menang. */
@media (max-width: 767px) {
  /* Tipografi: label mono 9px terlalu kecil di HP */
  html .text-label-cyber-sm { font-size: 10.5px; line-height: 14px; letter-spacing: .1em; }
  html .text-label-cyber-md { font-size: 11.5px; line-height: 15px; }
  html .text-headline-lg { font-size: 26px; line-height: 31px; letter-spacing: -.01em; }
  html .text-headline-md { font-size: 20px; line-height: 26px; }
  html .text-display-hero { font-size: 34px; line-height: 40px; }

  /* Target sentuh: tombol form & tombol kecil minimal 40-44px */
  main form button[type="submit"] { min-height: 44px; }
  main a[class*="py-spacing-2xs"], main button[class*="py-spacing-2xs"], main a[class*="py-1 "], main button[class*="py-1 "],
  main a[class*="py-spacing-3xs"], main button[class*="py-spacing-3xs"] { min-height: 40px; display: inline-flex; align-items: center; }
  main .material-symbols-outlined[class*="text-\[14px\]"] { font-size: 16px; }

  /* Baris chip filter: geser ke samping, jangan membungkus jadi 4 baris */
  main .flex.flex-wrap:has(> a[class*="uppercase"][class*="rounded-lg"]:nth-child(3)),
  main .flex.flex-wrap:has(> button[class*="uppercase"][class*="rounded-lg"]:nth-child(3)),
  main form.flex.flex-wrap:has(> a[class*="uppercase"]) {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; padding-right: 1rem; scroll-snap-type: x proximity;
  }
  main .flex.flex-wrap:has(> a[class*="uppercase"][class*="rounded-lg"]:nth-child(3))::-webkit-scrollbar,
  main .flex.flex-wrap:has(> button[class*="uppercase"][class*="rounded-lg"]:nth-child(3))::-webkit-scrollbar { display: none; }
  main .flex.flex-wrap:has(> a[class*="uppercase"][class*="rounded-lg"]:nth-child(3)) > *,
  main .flex.flex-wrap:has(> button[class*="uppercase"][class*="rounded-lg"]:nth-child(3)) > * { flex: 0 0 auto; white-space: nowrap; scroll-snap-align: start; }

  /* Deretan KPI: geser horizontal (ditandai .mk-scroll-sm) */
  .mk-scroll-sm { display: flex !important; overflow-x: auto; gap: .5rem; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; }
  .mk-scroll-sm::-webkit-scrollbar { display: none; }
  .mk-scroll-sm > * { flex: 0 0 68%; scroll-snap-align: start; }

  /* Tab dalam halaman (data-mtabs): hanya tab aktif yang tampil */
  .mk-mtabs { display: flex; gap: .375rem; overflow-x: auto; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .25rem; position: sticky; top: 5rem; z-index: 30; background: rgba(21,17,31,.92); backdrop-filter: blur(12px); }
  .mk-mtabs::-webkit-scrollbar { display: none; }
  .mk-mtabs button { flex: 0 0 auto; padding: .55rem .9rem; border-radius: .5rem; font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; background: #1d1928; color: #cbc3d7; min-height: 40px; }
  .mk-mtabs button.is-active { background: #a078ff; color: #340080; }
  [data-mtab].mk-mtab-hidden { display: none !important; }

  /* Kartu bracket lebih ringkas */
  #bracket-board .bracket-round > div { padding: .6rem; }

  /* Kalkulator: kartu bisa dilipat, tombol lompat ke stat */
  .mk-collapsible > :first-child { cursor: pointer; }
  .mk-collapsible.is-collapsed > :not(:first-child) { display: none !important; }
  .mk-collapsible > :first-child::after { content: "expand_less"; font-family: "Material Symbols Outlined"; font-size: 20px; margin-left: auto; color: #958ea0; }
  .mk-collapsible.is-collapsed > :first-child::after { content: "expand_more"; }
  .mk-jump-stat { position: fixed; right: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 35; }

  /* Tombol simpan form panjang menempel di bawah */
  .mk-sticky-submit { position: sticky; bottom: calc(4.25rem + env(safe-area-inset-bottom)); z-index: 20; box-shadow: 0 -8px 24px rgba(5,2,12,.6); }

  /* Tabel admin -> kartu per baris (data-label diisi JS) */
  .admin-shell table.mk-cards, .admin-shell table.mk-cards tbody, .admin-shell table.mk-cards tr, .admin-shell table.mk-cards td { display: block; width: 100%; }
  .admin-shell table.mk-cards thead { display: none; }
  .admin-shell table.mk-cards tr { border: 1px solid rgba(73,68,84,.4); border-radius: .75rem; margin-bottom: .6rem; padding: .35rem .25rem; background: #211d2c; }
  .admin-shell table.mk-cards td { display: flex; justify-content: space-between; gap: .75rem; padding: .35rem .6rem !important; border: 0 !important; text-align: right; }
  .admin-shell table.mk-cards td::before { content: attr(data-label); font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #958ea0; text-align: left; flex: 0 0 38%; }
  .admin-shell table.mk-cards td:not([data-label])::before { content: none; }

  /* Placeholder gambar: rasio tetap supaya layout tidak lompat */
  .mk-img-box { aspect-ratio: 16 / 9; background: #211d2c; overflow: hidden; }
  .mk-img-box img { width: 100%; height: 100%; object-fit: cover; }
}

/* Header HP/tablet: judul halaman detail yang panjang dulu mendorong avatar keluar layar.
   Grup kiri boleh menyusut (judul yang dipotong "..."), grup kanan (lonceng + avatar) tidak. */
@media (max-width: 1023px) {
  #mk-hdr-left { gap: .5rem; flex: 1 1 auto; min-width: 0; }
  #mk-hdr-left > .mk-hdr-title { flex: 1 1 auto; max-width: none; }
  #mk-hdr-right { gap: .25rem; flex-shrink: 0; }
}

/* Header laptop: menu desktop + saldo + tombol baru muat penuh mulai ~1350px (akun admin).
   < 1600px: "Bantuan & Rulebook" disingkat "Bantuan". 1280-1439px: teks logo disembunyikan (ikon tetap). */
@media (max-width: 1599px) {
  .mk-hdr-long { display: none; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .mk-hdr-brand { display: none !important; }
  /* Menu desktop punya 5 kelompok; di laptop 1280px jaraknya dirapatkan sedikit supaya tetap
     ada ruang lega untuk saldo yang angkanya panjang. */
  #mk-hdr-left nav { column-gap: .5rem; }
}

/* Progress bar tipis saat pindah halaman (semua ukuran) */
#mk-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #a078ff, #eec200, #4cd7f6); z-index: 100; transition: width .25s ease, opacity .3s; pointer-events: none; }
main.mk-fade-in { animation: mkFade .22s ease-out; }
@keyframes mkFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { main.mk-fade-in { animation: none; } }

/* ===== Wizard kalkulator (HP) ===== */
@media (max-width: 767px) {
  .mk-wiz-bar { display: flex; gap: .35rem; margin: .25rem 0 .5rem; }
  .mk-wiz-bar button { flex: 1 1 0; min-height: 40px; border-radius: .5rem; background: #1d1928; color: #cbc3d7; font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; padding: .3rem .2rem; }
  .mk-wiz-bar button.is-active { background: #a078ff; color: #340080; }
  .mk-wiz-bar button.is-done { color: #4cd7f6; }
  .mk-wiz-hidden { display: none !important; }
  .mk-wiz-nav { display: flex; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
  .mk-wiz-nav button { min-height: 44px; flex: 1; border-radius: .5rem; font-weight: 700; font-size: 14px; }
  .mk-wiz-nav .prev { background: #2c2837; color: #e7dff3; }
  .mk-wiz-nav .next { background: #eec200; color: #3c2f00; }
  .mk-jump-stat { display: none; } /* diganti wizard */

  /* ===== Skeleton saat halaman lambat dimuat ===== */
  #mk-skeleton { position: fixed; inset: 5rem 0 4rem; z-index: 45; background: #15111f; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
  #mk-skeleton .sk { border-radius: .75rem; background: linear-gradient(90deg, #211d2c 25%, #2c2837 37%, #211d2c 63%); background-size: 400% 100%; animation: mkSk 1.2s ease infinite; }
  @keyframes mkSk { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

  /* ===== Mode hemat kuota (Save-Data) ===== */
  html.mk-lite [class*="blur-3xl"], html.mk-lite [class*="blur-\[100px\]"], html.mk-lite [class*="blur-\[110px\]"] { display: none !important; }
  html.mk-lite .animate-ping, html.mk-lite .animate-pulse, html.mk-lite .animate-shimmer, html.mk-lite .animate-cosmic { animation: none !important; }
  html.mk-lite main img.mk-hero-img { display: none !important; }
  /* Hero yang dipasang sebagai background-image (profil tim, landing) — gambarnya tidak diunduh sama sekali. */
  html.mk-lite .mk-hero-bg { background-image: none !important; }
  html.mk-lite [class*="backdrop-blur"] { backdrop-filter: none !important; }

  /* ===== Onboarding ===== */
  #mk-onboard { position: fixed; inset: 0; z-index: 80; background: rgba(5,2,12,.92); display: flex; align-items: flex-end; justify-content: center; padding: 1rem; }
  #mk-onboard .card { width: 100%; max-width: 420px; background: #211d2c; border-radius: 1.25rem; padding: 1.5rem 1.25rem 1.25rem; box-shadow: 0 24px 80px rgba(0,0,0,.7); }
  #mk-onboard .slide { display: none; text-align: center; }
  #mk-onboard .slide.is-active { display: block; animation: mkFade .25s ease-out; }
  #mk-onboard .dots { display: flex; justify-content: center; gap: .4rem; margin: 1rem 0; }
  #mk-onboard .dots span { width: 8px; height: 8px; border-radius: 99px; background: #494454; }
  #mk-onboard .dots span.is-active { background: #eec200; width: 22px; }
}