/* ============================================================
   HALAMAN KECIL — masuk, daftar, home, 404, segera hadir
   ------------------------------------------------------------
   Halaman ini me-link tokens.css + landing.css + file ini.
   landing.css sengaja ikut di-link supaya .btn punya SATU sumber
   kebenaran — resep tombol Fikri tidak boleh disalin ke sini,
   karena salinan pasti drift (lihat design.md §3).
   Selektor khas landing (.hero, .pin, .pola) tidak pernah cocok
   di sini, jadi tidak ada efek samping.
   ============================================================ */

/* ── Rangka halaman ─────────────────────────────────────────
   Latar sama dengan hero supaya perpindahan dari landing tidak
   terasa seperti pindah aplikasi. */
.page {
  position: relative; isolation: isolate;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 28px 20px 44px;
}
.page-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.page-bg img {
  position: absolute; left: 50%; bottom: -10%;
  width: min(1700px, 160%); transform: translateX(-50%);
  opacity: .13;
  filter: blur(2px);
  -webkit-mask-image: radial-gradient(110% 70% at 50% 100%, #000 0%, #000 10%, transparent 55%);
          mask-image: radial-gradient(110% 70% at 50% 100%, #000 0%, #000 10%, transparent 55%);
}
.page-orbits {
  position: absolute; top: 46%; left: 50%;
  width: min(1000px, 128vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("../assets/orbits.svg") center / contain no-repeat;
  opacity: .7;
}

/* ── Logo kecil di atas ── */
.page-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: 23px; line-height: 1;
  color: var(--ink); text-decoration: none; margin-bottom: auto;
}
.page-brand img { width: 24px; height: 24px; }

/* ── Kartu tengah ── */
.card-mid {
  width: 100%; max-width: 424px;
  margin: 34px 0;
  padding: clamp(26px, 5vw, 38px);
  background: var(--grad-card); border: 0;
  border-radius: var(--radius-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2);
  text-align: left;
}
.card-mid h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(29px, 6vw, 36px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
}
.card-mid .sub { margin-top: 10px; font-size: 15px; color: var(--ink-2); }

/* ── Form ── */
.field { margin-top: 18px; }
.field label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.01em;
}
.field input {
  width: 100%; padding: 13px 15px;
  font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 0; border-radius: var(--radius-sm);
  box-shadow: var(--rim-dark), inset 0 1px 2px rgba(21,22,30,.05);
  transition: box-shadow .16s ease;
}
.field input:focus {
  outline: 0;
  box-shadow: 0 0 0 2px var(--brand-2), inset 0 1px 2px rgba(21,22,30,.05);
}
.field .hint { margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }

.check-row {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
}
.check-row input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.check-row a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.card-mid .btn { width: 100%; margin-top: 22px; }

/* ── Masuk dengan Google ──
   Putih dengan garis tipis, sesuai pedoman merek Google: tombolnya
   tidak boleh memakai hijau Berdua, dan logonya tidak boleh diwarnai
   ulang. Sengaja lebih tenang daripada .btn-primary — ini pilihan
   setara, bukan aksi utama yang harus menang secara visual. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #fff; color: var(--ink);
  box-shadow: var(--rim-dark), var(--lift-1);
}
.btn-google:hover { background: #fff; transform: translateY(-1px); box-shadow: var(--rim-dark), var(--lift-2); }
.btn-google svg { flex: none; }

/* Pemisah "atau pakai email" — garis di kiri-kanan teks. */
.pemisah {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0 2px; font-size: 12.5px; color: var(--ink-3);
}
.pemisah::before, .pemisah::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Keterangan kecil di bawah form — mis. penjelasan bahwa akun Google
   belum punya kata sandi. Sengaja tenang: ini catatan untuk yang
   kebingungan, bukan sesuatu yang perlu dibaca semua orang. */
.catatan-kecil {
  margin-top: 10px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3); text-align: center;
}
.catatan-kecil a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.catatan-kecil a:hover { color: var(--ink); }
.card-mid .sub + .catatan-kecil { text-align: left; margin-top: 8px; }

/* Email akun Google yang sedang didaftarkan, di halaman /lengkapi. */
.akun-chip {
  display: flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 11px 14px;
  border-radius: var(--radius-sm); background: var(--bg-alt);
  box-shadow: var(--rim-dark);
  font-size: 13.5px; color: var(--ink-2); word-break: break-all;
}

.alt {
  margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px; color: var(--ink-2); text-align: center;
}
.alt a { color: var(--ink); font-weight: 600; text-decoration: none; }
.alt a:hover { text-decoration: underline; }

/* ── Pesan form ──
   Satu elemen untuk error dan sukses; warnanya yang membedakan.
   Selalu diisi lewat textContent (lihat js/auth.js). */
.formsg {
  margin-top: 16px; padding: 11px 14px;
  border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.45;
}
.formsg.is-error { background: #FDECEC; color: #8E1F1F; box-shadow: inset 0 0 0 1px #F5CFCF; }
.formsg.is-ok    { background: var(--accent-soft); color: var(--brand-1); box-shadow: inset 0 0 0 1px #BFE8CE; }

/* ── Halaman status: 404 & segera hadir ── */
.status { max-width: 520px; margin: auto 0; text-align: center; }
.status-ic {
  width: 76px; height: 76px; margin: 0 auto 22px;
  border-radius: 22px; display: grid; place-items: center;
  background: var(--grad-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2);
}
.status-ic img { width: 46px; height: 46px; }
.status-ic svg { width: 34px; height: 34px; color: var(--ink-2); }
.status h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 8vw, 54px); line-height: 1.05; letter-spacing: -.025em;
  margin: 0; color: var(--brand-1);
}
.status .kode {
  font-size: 12px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px;
}
.status p { margin-top: 14px; font-size: 16px; color: var(--ink-2); }
.status .aksi { display: flex; flex-wrap: wrap; gap: 11px; justify-content: center; margin-top: 30px; }

/* Daftar section yang sudah jalan — biar halaman "segera" tidak
   jadi jalan buntu. */
.jalur { margin-top: 34px; display: grid; gap: 9px; text-align: left; }
.jalur a {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 16px; border-radius: var(--radius-sm);
  background: var(--grad-card); text-decoration: none; color: var(--ink);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1);
  transition: transform .16s ease, box-shadow .16s ease;
}
.jalur a:hover { transform: translateY(-2px); box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2); }
.jalur a span:last-child { margin-left: auto; color: var(--ink-3); }

.page-foot { margin-top: auto; padding-top: 28px; font-size: 13px; color: var(--ink-3); text-align: center; }
.page-foot a { color: var(--ink-2); text-decoration: none; }
.page-foot a:hover { color: var(--ink); }

/* ── Banner "belum terkonfigurasi" ──
   Muncul kalau js/supabase-config.js masih kosong. Tanpa ini,
   form-nya kelihatan normal, di-submit, lalu tidak terjadi
   apa-apa — kegagalan paling membingungkan yang bisa dikirim. */
.setup {
  width: 100%; max-width: 424px;
  margin-top: 14px; padding: 13px 16px;
  border-radius: var(--radius-sm);
  background: #FFF6E0; color: #6B4E00;
  box-shadow: inset 0 0 0 1px #F0DFAE;
  font-size: 13px; line-height: 1.5;
}
.setup code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

/* ══════════════════════════════════════════════════════
   HALAMAN DOKUMEN — aturan-komunitas, privasi, ketentuan
   ══════════════════════════════════════════════════════ */

.doc {
  max-width: 660px;
  width: 100%;
  margin: 24px 0 0;
  padding: clamp(26px, 5vw, 44px);
  background: var(--grad-card);
  border-radius: var(--radius-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2);
  text-align: left;
}
.doc h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 6vw, 40px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.doc-meta {
  font-size: 12.5px;
  color: var(--ink-3);
  margin: 10px 0 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.doc h2 {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 34px 0 10px;
  letter-spacing: -.01em;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.doc p { font-size: 14.5px; color: var(--ink-2); line-height: 1.72; margin: 0 0 14px; }
.doc ul, .doc ol { padding-left: 20px; margin: 0 0 16px; }
.doc li { font-size: 14.5px; color: var(--ink-2); line-height: 1.72; margin-bottom: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--brand-2); text-decoration: underline; text-underline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 13.5px; }
.doc th {
  text-align: left;
  padding: 9px 12px;
  background: var(--bg-alt);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
  border-bottom: 2px solid var(--line);
}
.doc td { padding: 10px 12px; color: var(--ink-2); border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.55; }
.doc .note { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 13px 16px; margin: 14px 0; font-size: 14px; color: var(--brand-1); line-height: 1.6; box-shadow: inset 0 0 0 1px #BFE8CE; }
.doc .warn { background: #FFF6E0; border-radius: var(--radius-sm); padding: 13px 16px; margin: 14px 0; font-size: 14px; color: #6B4E00; line-height: 1.6; box-shadow: inset 0 0 0 1px #F0DFAE; }
.doc-footer { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; }
.doc-footer a { color: var(--ink-2); text-decoration: none; }
.doc-footer a:hover { color: var(--ink); }

/* ══════════════════════════════════════════════════════
   APP NAV — navbar sticky untuk halaman app (jelajah, acak)
   ══════════════════════════════════════════════════════ */

.app-body { background: var(--bg); min-height: 100svh; }
.app-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px;
  background: rgba(247,241,230,.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  gap: 16px;
}
.app-nav .page-brand { margin-bottom: 0; }
.app-nav .nav-end { display: flex; gap: 8px; align-items: center; }
.app-nav .btn { padding: 9px 18px; font-size: 13.5px; }

/* ══════════════════════════════════════════════════════
   JELAJAH — browse talent
   ══════════════════════════════════════════════════════ */

.jelajah-main { max-width: var(--wrap); margin: 0 auto; padding: 28px 24px 80px; }

.login-wall {
  background: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 100%);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  margin-bottom: 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  box-shadow: 0 4px 22px rgba(6,72,42,.22);
}
.login-wall-t h2 { font-family: var(--font-display); font-weight: 400; font-size: 19px; color: #fff; margin: 0 0 3px; }
.login-wall-t p { font-size: 13px; color: rgba(255,255,255,.72); margin: 0; }
.btn-white {
  background: #fff; color: var(--brand-1);
  border-radius: var(--radius-btn); padding: 10px 22px;
  font-family: var(--font); font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: opacity .14s; flex: none;
}
.btn-white:hover { opacity: .88; }

.filter-bar { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-family: var(--font); font-size: 13px; font-weight: 600; border: 0; cursor: pointer;
  background: var(--bg-card); color: var(--ink-2);
  box-shadow: var(--rim-dark), var(--lift-1);
  transition: all .14s ease;
}
.chip:hover { color: var(--ink); transform: translateY(-1px); box-shadow: var(--rim-dark), var(--lift-2); }
.chip.is-on { background: var(--accent-ink); color: #fff; box-shadow: var(--rim-dark), var(--lift-1); }

.talent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 16px;
}
.talent-card {
  background: var(--grad-card);
  border-radius: var(--radius-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  text-decoration: none; color: inherit; display: block;
}
.talent-card:hover { transform: translateY(-4px); box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-3); }
.tc-photo { width: 100%; aspect-ratio: 1; overflow: hidden; }
.tc-photo img { width: 100%; height: 100%; object-fit: cover; filter: blur(8px); transform: scale(1.07); display: block; transition: filter .3s ease; }
.talent-card:hover .tc-photo img { filter: blur(6px); }
.tc-body { padding: 13px 15px 15px; }
.tc-name { font-size: 14.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.tc-dot { width: 7px; height: 7px; border-radius: 50%; background: #2FBF71; flex: none; animation: pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.45; } }
.tc-spec { font-size: 12px; color: var(--ink-3); margin-bottom: 9px; }
.tc-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tc-tag { padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; background: var(--bg-alt); color: var(--ink-2); }

/* ══════════════════════════════════════════════════════
   ACAK — ngobrol acak
   ══════════════════════════════════════════════════════ */

.acak-main {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: calc(100svh - 57px);
  padding: 40px 24px 60px; text-align: center;
}
.acak-icon {
  width: 90px; height: 90px; border-radius: 26px;
  background: var(--grad-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-3);
  display: grid; place-items: center; margin: 0 auto 24px;
}
.acak-icon svg { width: 40px; height: 40px; color: var(--brand-2); }
.acak-h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 8vw, 52px); line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 12px; max-width: 520px;
  background: var(--grad-brand);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.acak-sub {
  font-size: 15.5px; color: var(--ink-2); line-height: 1.65;
  margin: 0 auto 28px; max-width: 420px;
}
.acak-not-yet {
  background: #FFF6E0; border-radius: var(--radius-card);
  padding: 18px 22px; margin: 0 auto 28px; max-width: 480px; width: 100%; text-align: left;
  box-shadow: inset 0 0 0 1px #F0DFAE;
}
.acak-not-yet b { display: block; font-size: 13px; color: #6B4E00; margin-bottom: 5px; }
.acak-not-yet p { font-size: 13px; color: #8A6500; line-height: 1.55; margin: 0; }
.acak-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 44px; }
.acak-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 520px; width: 100%; }
.how-card {
  background: var(--grad-card); border-radius: var(--radius-sm);
  padding: 16px 14px; box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-1); text-align: left;
}
.how-card .how-n { font-size: 11px; font-weight: 700; color: var(--accent-lo); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.how-card p { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
@media (max-width: 480px) {
  .acak-how { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════
   DAFTAR TALENT — form multi-langkah
   ══════════════════════════════════════════════════════ */

.card-wide {
  width: 100%; max-width: 520px;
  margin: 28px 0;
  padding: clamp(26px, 5vw, 42px);
  background: var(--grad-card);
  border-radius: var(--radius-card);
  box-shadow: var(--rim-dark), var(--spec-soft), var(--lift-2);
  text-align: left;
}
.card-wide h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 5vw, 34px); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.card-wide .sub { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); margin-bottom: 28px; }

.step-bar { display: flex; margin-bottom: 30px; }
.step-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step-item::before {
  content: '';
  position: absolute; top: 13px;
  left: calc(-50% + 13px); right: calc(50% + 13px);
  height: 2px; background: var(--line);
}
.step-item:first-child::before { display: none; }
.step-item.done::before { background: var(--accent); }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--line); color: var(--ink-3);
  position: relative; z-index: 1;
  transition: background .2s ease, color .2s ease;
}
.step-item.active .step-num { background: var(--accent); color: var(--accent-ink); }
.step-item.done .step-num { background: var(--accent); color: var(--accent-ink); }
.step-label { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-align: center; white-space: nowrap; }
.step-item.active .step-label, .step-item.done .step-label { color: var(--ink-2); }

.step-panel { display: none; }
.step-panel.active { display: block; }

.svc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.svc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--radius-sm);
  background: var(--bg-alt); box-shadow: var(--rim-dark);
  transition: background .15s, box-shadow .15s;
}
.svc-row:has(input:checked) { background: var(--accent-soft); box-shadow: inset 0 0 0 1px #BFE8CE; }
.svc-row input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); flex: none; cursor: pointer; }
.svc-label { flex: 1; }
.svc-label b { font-size: 13.5px; font-weight: 600; color: var(--ink); display: block; }
.svc-label small { font-size: 11.5px; color: var(--ink-3); }
.tarif-wrap { display: flex; align-items: center; gap: 5px; }
.tarif-wrap span { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.tarif-input { width: 88px; padding: 6px 9px; font: inherit; font-size: 12.5px; border: 0; border-radius: 8px; background: #fff; box-shadow: var(--rim-dark); text-align: right; }

.upload-zone {
  border: 2px dashed var(--line); border-radius: var(--radius-sm);
  padding: 30px 20px; text-align: center; margin-top: 14px;
  cursor: pointer; transition: border-color .15s, background .15s;
  position: relative;
}
.upload-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone svg { width: 30px; height: 30px; color: var(--ink-3); margin-bottom: 10px; display: block; margin-left: auto; margin-right: auto; }
.upload-zone p { font-size: 13.5px; color: var(--ink-3); margin: 0; line-height: 1.5; }
.upload-zone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.step-nav { display: flex; gap: 10px; margin-top: 22px; }
.step-nav .btn { flex: 1; justify-content: center; }

/* ══════════════════════════════════════════════════════
   MOBILE — aksesibilitas & touch
   Target utama: layar 390px (iPhone 14), minimum 320px.
   ══════════════════════════════════════════════════════ */

/* 1. Focus-visible — keyboard, switch access, dan screen reader navigation.
      Harus terlihat jelas di atas semua warna latar. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* 2. iOS zoom prevention.
      Safari mobile zoom otomatis kalau font-size input < 16px.
      Override hanya di mobile supaya desktop tetap seperti desain. */
@media (max-width: 768px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* 3. Touch target minimum 44px (Apple HIG & WCAG 2.5.5).
      Chip saat ini ~29px tinggi — terlalu kecil untuk jari. */
.chip {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* 4. Filter bar — scroll horizontal di mobile, bukan wrap.
      Wrap artinya 3-4 baris chip, memakan terlalu banyak ruang vertikal. */
@media (max-width: 640px) {
  .filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;       /* Firefox */
    padding-bottom: 4px;
    /* Extend ke tepi layar supaya chip terakhir tidak terpotong */
    margin-right: -16px;
    padding-right: 16px;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .chip { white-space: nowrap; flex: none; }
}

/* 5. Halaman jelajah — padding lebih kecil di mobile */
@media (max-width: 640px) {
  .jelajah-main { padding: 20px 16px 80px; }
}

/* 6. Login wall — stack vertikal di layar sempit */
@media (max-width: 520px) {
  .login-wall {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .btn-white { text-align: center; display: block; padding: 13px 22px; }
}

/* 7. Talent grid — 2 kolom ketat di mobile, 1 kolom di layar sangat kecil */
@media (max-width: 440px) {
  .talent-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tc-body { padding: 10px 12px 12px; }
  .tc-name { font-size: 13px; }
  .tc-spec { font-size: 11px; }
}
@media (max-width: 320px) {
  .talent-grid { grid-template-columns: 1fr; }
}

/* 8. App nav — lebih kompak di mobile */
@media (max-width: 540px) {
  .app-nav { padding: 10px 16px; }
  .app-nav .page-brand { font-size: 19px; }
  .app-nav .btn { padding: 8px 14px; font-size: 13px; }
}

/* 9. Doc pages — tabel scroll horizontal, padding lebih kecil */
@media (max-width: 640px) {
  .doc { padding: 22px 18px; }
  .doc table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Shadows subtle sebagai hint ada konten di kanan */
    background:
      linear-gradient(to right, var(--bg-card), var(--bg-card)) left center / 20px 100% no-repeat,
      linear-gradient(to left, var(--bg-card), var(--bg-card)) right center / 20px 100% no-repeat,
      radial-gradient(ellipse at left, rgba(21,22,30,.10), transparent 70%) left center / 20px 100% no-repeat,
      radial-gradient(ellipse at right, rgba(21,22,30,.10), transparent 70%) right center / 20px 100% no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
  .doc-footer { flex-direction: column; gap: 12px; }
  .doc h1 { font-size: clamp(24px, 7vw, 34px); }
}

/* 10. Svc rows daftar-talent — tarif pindah ke baris baru di mobile.
       Di desktop rapi satu baris; di mobile terlalu cramped. */
@media (max-width: 500px) {
  .svc-row { flex-wrap: wrap; row-gap: 8px; }
  .svc-label { min-width: 0; }
  .tarif-wrap {
    width: 100%;
    padding-left: 26px;   /* sejajar dengan label (checkbox = 16px + gap 10px) */
  }
  .tarif-input { flex: 1; width: 100%; text-align: left; }
  .tarif-wrap > span:last-child { white-space: nowrap; }
}

/* 11. Step bar — sembunyikan label teks di layar sangat sempit */
@media (max-width: 360px) {
  .step-label { display: none; }
}

/* 12. Card mid & wide — kurangi padding di mobile kecil */
@media (max-width: 400px) {
  .card-mid, .card-wide { padding: 20px 16px; }
}

/* 13. Acak — stack how cards, kurangi padding */
@media (max-width: 420px) {
  .acak-main { padding: 28px 16px 40px; }
  .acak-how { grid-template-columns: 1fr; }
}

/* 14. Upload zone — lebih compact di mobile */
@media (max-width: 500px) {
  .upload-zone { padding: 22px 16px; }
}

/* 15. Step nav — tumpuk di layar sangat kecil */
@media (max-width: 340px) {
  .step-nav { flex-direction: column; }
}

/* 16. Safe area insets — notch iPhone, Android punch-hole.
       Padding bawah footer supaya konten tidak tertutup home indicator. */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .page-foot,
  footer {
    padding-bottom: calc(1em + env(safe-area-inset-bottom));
  }
  .app-nav {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  @media (max-width: 540px) {
    .app-nav {
      padding-left: max(16px, env(safe-area-inset-left));
      padding-right: max(16px, env(safe-area-inset-right));
    }
  }
}