/* Malaka Sarpras — halaman depan */
.msp{--s-p:#0b6fb4;--s-p2:#08527f;--s-ijo:#1d8a3f;--s-ln:#dde8f1;--s-bg:#f2f7fb;--s-ink:#12263a;
  font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:#3c4c5c;line-height:1.7;max-width:1000px;margin:0 auto}
.msp *,.msp *::before,.msp *::after{box-sizing:border-box}
.msp h3,.msp h4{color:var(--s-ink);margin-top:0}

.msp-panel{background:#fff;border:1px solid var(--s-ln);border-radius:14px;padding:28px}
.msp-panel--tengah{max-width:440px;margin:0 auto;text-align:center}
.msp-sub{margin:0 0 20px;color:#647787;font-size:.95rem}
.msp-kosong{background:var(--s-bg);border:1px dashed var(--s-ln);border-radius:12px;padding:22px;text-align:center;color:#647787}

.msp-form{display:grid;gap:16px}
.msp-baris{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msp-field{display:block}
.msp-field span{display:block;font-weight:700;color:var(--s-ink);font-size:.87rem;margin-bottom:6px}
.msp-field input,.msp-field select,.msp-field textarea{width:100%;padding:.78rem 1rem;border:1px solid var(--s-ln);border-radius:8px;
  font-family:inherit;font-size:.98rem;background:#fff;color:var(--s-ink)}
.msp-field textarea{resize:vertical;line-height:1.7}
.msp-field input:focus,.msp-field select:focus,.msp-field textarea:focus{outline:none;border-color:var(--s-p);box-shadow:0 0 0 3px rgba(11,111,180,.14)}
.msp-sembunyi{position:absolute;left:-9999px}

.msp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.85rem 1.6rem;border:2px solid transparent;border-radius:99px;
  font-family:inherit;font-weight:700;font-size:.96rem;cursor:pointer;text-decoration:none;transition:.18s}
.msp-btn--utama{background:var(--s-p);color:#fff}
.msp-btn--utama:hover{background:var(--s-p2);color:#fff}

.msp-alert{padding:12px 16px;border-radius:8px;font-size:.93rem;margin-bottom:16px}
.msp-alert--ok{background:#e8f6ec;border:1px solid #b6e2c3;color:#1d6b33}
.msp-alert--err{background:#fdebec;border:1px solid #f5c2c5;color:#9b1620}

.msp-katalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.msp-kartu{background:#fff;border:1px solid var(--s-ln);border-radius:12px;overflow:hidden}
.msp-kartu__foto{aspect-ratio:4/3;background:var(--s-bg)}
.msp-kartu__foto img{width:100%;height:100%;object-fit:cover}
.msp-kartu__isi{padding:14px 16px 16px}
.msp-kartu__isi h4{margin:0 0 4px;font-size:1rem;line-height:1.35}
.msp-kartu__kat{margin:0 0 8px;font-size:.82rem;color:var(--s-p)}
.msp-kartu__meta{margin:0 0 10px;font-size:.82rem;color:#8598a8;display:flex;gap:12px;flex-wrap:wrap}

.msp-ruang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.msp-ruang{background:#fff;border:1px solid var(--s-ln);border-left:4px solid var(--s-p);border-radius:12px;padding:18px}
.msp-ruang h4{margin:0 0 2px;font-size:1.05rem}
.msp-ruang__jenis{margin:0 0 10px;font-size:.83rem;color:var(--s-p)}
.msp-ruang__meta{list-style:none;margin:0 0 12px;padding:0;font-size:.85rem;color:#647787}
.msp-ruang__meta li{padding:2px 0}

.msp-tag{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.msp-tag--ijo{background:#e8f6ec;color:#1d6b33}
.msp-tag--kuning{background:#fcf3e3;color:#8a5700}
.msp-tag--merah{background:#fdebec;color:#9b1620}

@media (max-width:600px){
  .msp-baris{grid-template-columns:1fr}
  .msp-panel{padding:20px}
}