/* ==========================================================================
   MODE PENGEMBANGAN — Marketplace diburamkan & dikunci
   --------------------------------------------------------------------------
   Catatan: CSS ini menahan TAMPILAN, bukan data. Data sudah ditahan di server
   (src/lib/devlock.js) sehingga tidak ada detail postingan/harga/foto yang
   sampai ke browser sama sekali. Di sini hanya menyisakan kesan visual:
   bentuk dasar, blok abu-abu/biru, dan aksen estetika — samar-samar.
   ====================================================================== */
.mkt-dev{position:relative;margin-top:16px;border-radius:18px;overflow:hidden}
.mkt-dev-blur{display:flex;flex-direction:column;gap:14px;
  /* 10% → blur(7px): cukup untuk mengaburkan, siluet blok tetap terbaca sebagai bentuk.
     (Isi teksnya sendiri memang tidak pernah dikirim server, jadi dijamin tak terbaca.) */
  filter:blur(7px);opacity:.85;transform:scale(1.012);pointer-events:none;user-select:none}
.mkt-dev-blur::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.22))}
/* kerangka postingan palsu — penanda blok abu-abu, bukan data nyata */
.mkt-skeleton{background:#f7f9fd;border:1px solid #e3eaf4;border-radius:16px;padding:14px;
  box-shadow:0 1px 3px rgba(0,0,0,.05)}
.sk-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sk-av{width:38px;height:38px;border-radius:50%;background:#bfd3ea;flex-shrink:0}
.sk-name{height:11px;width:38%;border-radius:6px;background:#bfd3ea}
.sk-line{height:10px;border-radius:6px;background:#d5e2f1;margin-bottom:9px}
.sk-line.w90{width:90%} .sk-line.w70{width:70%}
.sk-img{margin-top:6px;height:132px;border-radius:12px;
  background:linear-gradient(135deg,#a9c9f0 0%,#cfe0f7 45%,#bfd3ea 100%)}
.sk-foot{display:flex;gap:8px;margin-top:12px}
.sk-chip{height:24px;width:78px;border-radius:999px;background:#cbdcef}
.sk-chip:last-child{width:52px;background:var(--blue-soft);border:1px solid #c9e0ff}

/* lapisan tipis di atas area blur — hanya menampung badge status, bukan kartu besar */
.mkt-dev-lock{position:absolute;inset:0;display:grid;place-items:center;padding:18px;
  background:rgba(255,255,255,.06)}
/* badge mungil "coming soon" + logo loading */
.cs-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);
  box-shadow:0 10px 24px -12px rgba(15,40,80,.34),0 1px 3px rgba(15,40,80,.06);
  font-size:12.5px;font-weight:700;letter-spacing:.2px;color:var(--txt2)}
.cs-spin{width:18px;height:18px;border-radius:50%;flex-shrink:0;
  border:2.5px solid rgba(24,119,242,.35);border-top-color:var(--blue);
  animation:csputar .7s linear infinite}
@keyframes csputar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .cs-spin{animation-duration:1.8s} }

@media(max-width:640px){ .sk-img{height:104px} }

/* Header disembunyikan di HP supaya "clean look" (logo + nama + badge mengambil
   ruang tanpa guna); bottom-nav sudah jadi navigasi utama. */
@media(max-width:640px){
  /* HANYA saat mode pengembangan — tampilan normal tidak diubah (burger &
     tombol akun tetap ada di luar masa pengembangan). */
  body.dev-mode .top{display:none}
  body.dev-mode{padding-top:12px}
}