/* ======================================================================
   MODE SIMULASI NOVA
   Lapisan ini hanya menambahkan interaksi di dalam dua mockup ponsel.
   Tata letak, tipografi, warna, serta susunan landing page tidak diubah.
   ====================================================================== */

.simulasi-siap { isolation: isolate; }
.simulasi-tappable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  user-select: none;
}
.simulasi-tappable:hover { filter: brightness(.985); }
.simulasi-tappable:active { transform: scale(.965); }
.simulasi-tappable:focus-visible {
  outline: 2px solid rgba(163,214,53,.9);
  outline-offset: 2px;
}
.kartu-melayang.simulasi-tappable:hover { transform: translateY(-7px); }

.simulasi-petunjuk {
  position: absolute;
  z-index: 68;
  left: 50%;
  bottom: 66px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 25px;
  padding: 0 9px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  color: #14532d;
  background: rgba(255,255,255,.94);
  box-shadow: 0 9px 24px rgba(5,46,22,.17);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .025em;
  white-space: nowrap;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  animation: simulasiPetunjuk 2.1s ease-in-out infinite;
  transition: opacity .25s ease, transform .25s ease;
}
.simulasi-petunjuk::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}
.simulasi-petunjuk.hilang {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
}
@keyframes simulasiPetunjuk {
  0%,100% { box-shadow: 0 9px 24px rgba(5,46,22,.17); }
  50% { box-shadow: 0 11px 28px rgba(22,163,74,.3); }
}

.simulasi-lapisan {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: inherit;
  color: #0f172a;
  background: #f7faf8;
  opacity: 0;
  pointer-events: none;
  transform: translateX(103%);
  transition: transform .3s cubic-bezier(.22,.8,.25,1), opacity .2s ease;
}
.simulasi-lapisan.aktif {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}
.simulasi-lapisan[data-arah="kembali"] { transform: translateX(-16%); }
.simulasi-lapisan[data-arah="kembali"].aktif { transform: translateX(0); }

.simulasi-status {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  color: white;
  background: linear-gradient(135deg,#0a5b2e,#178346);
  font-size: 7px;
  font-weight: 800;
}
.simulasi-status.terang {
  color: #052e16;
  background: white;
  border-bottom: 1px solid #edf2ee;
}
.simulasi-header {
  flex: 0 0 51px;
  display: grid;
  grid-template-columns: 30px minmax(0,1fr) 30px;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  color: #052e16;
  background: white;
  border-bottom: 1px solid #e5ede7;
  box-shadow: 0 5px 16px rgba(15,23,42,.025);
}
.simulasi-header.hijau {
  color: white;
  background: linear-gradient(135deg,#0a5b2e,#178346);
  border-bottom-color: rgba(255,255,255,.1);
}
.simulasi-header button {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: currentColor;
  background: #f1f6f2;
}
.simulasi-header.hijau button { background: rgba(255,255,255,.13); }
.simulasi-header button svg { width: 14px; height: 14px; }
.simulasi-header .simulasi-judul {
  min-width: 0;
  text-align: center;
  line-height: 1.15;
}
.simulasi-header .simulasi-judul b {
  display: block;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.simulasi-header .simulasi-judul small {
  display: block;
  margin-top: 3px;
  color: #7b8e82;
  font-size: 6px;
}
.simulasi-header.hijau .simulasi-judul small { color: rgba(255,255,255,.68); }
.simulasi-header .simulasi-aksi-kanan {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #15803d;
  background: #f1f6f2;
}
.simulasi-header.hijau .simulasi-aksi-kanan { color: white; background: rgba(255,255,255,.13); }
.simulasi-header .simulasi-aksi-kanan svg { width: 14px; }

.simulasi-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 11px 12px 70px;
  background:
    radial-gradient(circle at 94% 0, rgba(163,214,53,.09), transparent 28%),
    #f7faf8;
  scrollbar-width: none;
}
.simulasi-body::-webkit-scrollbar { display: none; }
.simulasi-body.tanpa-nav { padding-bottom: 16px; }
.simulasi-body.tengah {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.simulasi-nav {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  display: grid;
  grid-template-columns: repeat(5,1fr);
  align-items: stretch;
  padding: 3px 3px 4px;
  border-top: 1px solid #e5ece7;
  background: rgba(255,255,255,.98);
  box-shadow: 0 -8px 20px rgba(15,23,42,.035);
  backdrop-filter: blur(10px);
}
.simulasi-nav button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #9aa7a0;
  background: transparent;
  font-size: 5.6px;
}
.simulasi-nav button > i {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-style: normal;
}
.simulasi-nav button svg { width: 14px; height: 14px; }
.simulasi-nav button.aktif { color: #15803d; background: transparent; }
.simulasi-nav button.simulasi-nav-notifikasi > i {
  margin-top: -14px;
  border: 3px solid white;
  background: linear-gradient(145deg,#d8ee62,#f0bf39);
  color: #14532d;
  box-shadow: 0 5px 12px rgba(20,83,45,.16);
}

.simulasi-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #15803d;
  font-size: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.simulasi-kicker::before { content:""; width: 14px; height: 1px; background: currentColor; }
.simulasi-h2 {
  margin: 6px 0 4px;
  color: #052e16;
  font-size: 15px;
  line-height: 1.13;
  letter-spacing: -.035em;
}
.simulasi-paragraf {
  margin: 0;
  color: #64748b;
  font-size: 7px;
  line-height: 1.55;
}
.simulasi-judul-bagian {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 12px 1px 7px;
}
.simulasi-judul-bagian b { color: #052e16; font-size: 8px; }
.simulasi-judul-bagian span { color: #15803d; font-size: 6px; font-weight: 800; }

.simulasi-hero-mini {
  position: relative;
  min-height: 112px;
  overflow: hidden;
  padding: 15px;
  border-radius: 17px;
  color: white;
  background:
    radial-gradient(circle at 83% 20%, rgba(215,238,99,.48), transparent 22%),
    linear-gradient(135deg,#07592d,#1d934d);
  box-shadow: 0 13px 26px rgba(20,83,45,.17);
}
.simulasi-hero-mini::after {
  content:"";
  position:absolute;
  width: 115px;
  height: 115px;
  right: -35px;
  bottom: -52px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 50%;
  box-shadow: 0 0 0 23px rgba(255,255,255,.035), 0 0 0 45px rgba(255,255,255,.025);
}
.simulasi-hero-mini small { color: #d9f99d; font-size: 6px; font-weight: 800; letter-spacing: .06em; }
.simulasi-hero-mini h3 { max-width: 190px; margin: 5px 0 5px; font-size: 15px; line-height: 1.12; letter-spacing: -.035em; }
.simulasi-hero-mini p { max-width: 190px; margin: 0; color: rgba(255,255,255,.72); font-size: 7px; line-height: 1.48; }
.simulasi-hero-mini .simulasi-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 5px 7px;
  border-radius: 999px;
  color: #052e16;
  background: #d9f99d;
  font-size: 6px;
  font-weight: 900;
}

.simulasi-cari {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0;
  padding: 0 10px;
  border: 1px solid #dfe9e2;
  border-radius: 11px;
  color: #94a3b8;
  background: white;
  box-shadow: 0 6px 16px rgba(20,83,45,.04);
  font-size: 7px;
}
.simulasi-cari svg { width: 13px; color: #15803d; }

.simulasi-grid-menu {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 9px 3px;
  padding: 10px 5px;
  border: 1px solid rgba(22,163,74,.14);
  border-radius: 15px;
  background: linear-gradient(135deg,#eafbf0,#cff4dc 55%,#e6f9ed);
}
.simulasi-grid-menu button {
  min-width: 0;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 1px;
  border: 0;
  border-radius: 0;
  color: #334155;
  background: transparent;
  box-shadow: none;
  font-size: 5.5px;
  font-weight: 700;
}
.simulasi-grid-menu button i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 0;
  color: #15803d;
  background: transparent;
  font-style: normal;
}
.simulasi-grid-menu button .simulasi-menu-aset {
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.simulasi-kartu,
.simulasi-daftar > button,
.simulasi-daftar > div {
  width: 100%;
  border: 1px solid #e0e9e2;
  border-radius: 14px;
  color: #1e293b;
  background: white;
  box-shadow: 0 6px 18px rgba(20,83,45,.045);
}
.simulasi-kartu { padding: 11px; }
.simulasi-daftar { display: grid; gap: 8px; }
.simulasi-daftar > button {
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) 13px;
  align-items: center;
  gap: 9px;
  padding: 9px;
  text-align: left;
}
.simulasi-daftar > button i,
.simulasi-list-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #15803d;
  background: #f0fdf4;
  font-style: normal;
}
.simulasi-daftar > button i svg,
.simulasi-list-icon svg { width: 15px; }
.simulasi-daftar > button span { min-width: 0; display: flex; flex-direction: column; line-height: 1.18; }
.simulasi-daftar > button b { color: #052e16; font-size: 8px; }
.simulasi-daftar > button small { margin-top: 4px; color: #94a3b8; font-size: 6px; line-height: 1.35; }
.simulasi-daftar > button em { color: #94a3b8; font-size: 12px; font-style: normal; }

.simulasi-properti-gambar {
  position: relative;
  height: 108px;
  overflow: hidden;
  border-radius: 13px;
  background: linear-gradient(#dcf1f1 0 56%,#bfe2a6 56%);
}
.simulasi-properti-gambar::after {
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  height: 22px;
  background: linear-gradient(155deg, transparent 49%, rgba(31,112,50,.18) 50%);
}
.simulasi-rumah {
  position:absolute;
  z-index:2;
  left: 20px;
  bottom: 21px;
  width: 82px;
  height: 44px;
  border-radius: 3px;
  background: #fff;
  box-shadow: 0 7px 15px rgba(20,83,45,.15);
}
.simulasi-rumah::before {
  content:"";
  position:absolute;
  left:-8px;
  top:-28px;
  border-left:49px solid transparent;
  border-right:49px solid transparent;
  border-bottom:35px solid #166534;
}
.simulasi-rumah::after {
  content:"";
  position:absolute;
  left: 34px;
  bottom: 0;
  width: 21px;
  height: 29px;
  background:#cde3ce;
}
.simulasi-gedung {
  position:absolute;
  z-index:1;
  right: 20px;
  bottom: 25px;
  width: 43px;
  height: 72px;
  border: 2px solid rgba(255,255,255,.55);
  background:
    repeating-linear-gradient(0deg,transparent 0 9px,rgba(255,255,255,.38) 10px 11px),
    repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.38) 9px 10px),
    linear-gradient(90deg,#74a5a5,#c6dddd);
}
.simulasi-properti-gambar .simulasi-label {
  position:absolute;
  z-index:3;
  left: 9px;
  top: 9px;
  padding: 4px 7px;
  border-radius:999px;
  color:#166534;
  background:rgba(255,255,255,.9);
  font-size:5.5px;
  font-weight:900;
}
.simulasi-info-properti { padding-top: 9px; }
.simulasi-info-properti small { color:#15803d; font-size:5.8px; font-weight:800; }
.simulasi-info-properti h4 { margin:3px 0 3px; color:#052e16; font-size:10px; line-height:1.25; }
.simulasi-info-properti p { margin:0; color:#94a3b8; font-size:6px; }
.simulasi-info-properti strong { display:block; margin-top:6px; color:#15803d; font-size:8px; }
.simulasi-fitur-mini { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.simulasi-fitur-mini span { padding:4px 6px; border-radius:999px; color:#475569; background:#f1f5f9; font-size:5.7px; }

.simulasi-produk-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.simulasi-produk {
  overflow:hidden;
  padding:0;
  border:1px solid #e1ebe3;
  border-radius:13px;
  color:#1e293b;
  background:white;
  text-align:left;
  box-shadow:0 6px 16px rgba(20,83,45,.04);
}
.simulasi-produk-visual {
  height:72px;
  display:grid;
  place-items:center;
  color:#166534;
  background:
    radial-gradient(circle at 75% 25%,rgba(215,238,99,.65),transparent 22%),
    linear-gradient(145deg,#edfbe7,#bfe6ad);
}
.simulasi-produk-visual svg { width:28px; height:28px; }
.simulasi-produk div:last-child { padding:8px; }
.simulasi-produk b { display:block; color:#052e16; font-size:7px; line-height:1.25; }
.simulasi-produk small { display:block; margin-top:3px; color:#94a3b8; font-size:5.5px; }
.simulasi-produk strong { display:block; margin-top:6px; color:#15803d; font-size:7px; }

.simulasi-dompet {
  position:relative;
  overflow:hidden;
  padding:15px;
  border-radius:17px;
  color:white;
  background:linear-gradient(135deg,#073e21,#178346);
  box-shadow:0 13px 28px rgba(20,83,45,.19);
}
.simulasi-dompet::after {
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  right:-45px;
  bottom:-48px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  box-shadow:0 0 0 22px rgba(255,255,255,.035);
}
.simulasi-dompet small { color:#d9f99d; font-size:6px; }
.simulasi-dompet strong { display:block; margin-top:4px; font-size:18px; letter-spacing:-.035em; }
.simulasi-dompet p { margin:14px 0 0; color:rgba(255,255,255,.68); font-size:6px; }
.simulasi-aksi-tiga { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:10px; }
.simulasi-aksi-tiga button {
  min-height:57px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:6px;
  border:1px solid #e1ebe3;
  border-radius:12px;
  color:#334155;
  background:white;
  font-size:6px;
  font-weight:700;
}
.simulasi-aksi-tiga i { width:29px;height:29px;display:grid;place-items:center;border-radius:9px;color:#15803d;background:#f0fdf4;font-style:normal; }
.simulasi-aksi-tiga svg { width:14px; }

.simulasi-form { display:grid; gap:9px; }
.simulasi-form label { display:grid; gap:4px; color:#334155; font-size:6.5px; font-weight:750; }
.simulasi-form input,
.simulasi-form select,
.simulasi-form textarea {
  width:100%;
  min-height:34px;
  padding:8px 9px;
  border:1px solid #dce8df;
  border-radius:10px;
  outline:0;
  color:#0f172a;
  background:white;
  font-size:8px;
}
.simulasi-form textarea { min-height:63px; resize:none; }
.simulasi-form input:focus,
.simulasi-form select:focus,
.simulasi-form textarea:focus { border-color:#4ade80; box-shadow:0 0 0 3px rgba(74,222,128,.13); }
.simulasi-form input[type="range"] { min-height:auto; padding:0; accent-color:#15803d; }
.simulasi-dua-kolom { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.simulasi-tombol-utama,
.simulasi-tombol-sekunder {
  width:100%;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  border-radius:11px;
  font-size:7.5px;
  font-weight:850;
}
.simulasi-tombol-utama { border:0; color:white; background:linear-gradient(135deg,#166534,#16a34a); box-shadow:0 8px 18px rgba(22,101,52,.2); }
.simulasi-tombol-sekunder { border:1px solid #cfe0d3; color:#14532d; background:white; }
.simulasi-tombol-baris { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }

.simulasi-ringkasan-kpr {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin:10px 0;
}
.simulasi-ringkasan-kpr div { padding:9px;border:1px solid #dce9df;border-radius:11px;background:white; }
.simulasi-ringkasan-kpr small { color:#94a3b8;font-size:5.5px; }
.simulasi-ringkasan-kpr b { display:block;margin-top:3px;color:#052e16;font-size:9px; }
.simulasi-hasil-kpr { padding:13px;border-radius:14px;color:white;background:linear-gradient(135deg,#0b5f31,#1d934d);text-align:center; }
.simulasi-hasil-kpr small { color:#d9f99d;font-size:6px; }
.simulasi-hasil-kpr strong { display:block;margin-top:4px;font-size:18px;letter-spacing:-.035em; }
.simulasi-hasil-kpr p { margin:5px 0 0;color:rgba(255,255,255,.65);font-size:5.8px; }

.simulasi-chip-row { display:flex; gap:5px; overflow-x:auto; padding-bottom:3px; scrollbar-width:none; }
.simulasi-chip-row::-webkit-scrollbar { display:none; }
.simulasi-chip-row button,
.simulasi-chip-row span {
  flex:0 0 auto;
  padding:6px 8px;
  border:1px solid #dce8df;
  border-radius:999px;
  color:#166534;
  background:white;
  font-size:5.8px;
  font-weight:750;
}
.simulasi-chip-row .aktif { color:white;background:#15803d;border-color:#15803d; }

.simulasi-chat { display:grid; gap:8px; margin-top:10px; }
.simulasi-pesan { max-width:83%; padding:8px 9px; border-radius:12px; font-size:6.6px; line-height:1.45; }
.simulasi-pesan.pengguna { justify-self:end; color:white; background:#15803d; border-radius:12px 12px 3px 12px; }
.simulasi-pesan.ai { justify-self:start; border:1px solid #dce8df; color:#334155; background:white; border-radius:3px 12px 12px 12px; }
.simulasi-input-chat {
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px;
  gap:6px;
  margin-top:9px;
}
.simulasi-input-chat input { height:34px;padding:0 10px;border:1px solid #dce8df;border-radius:11px;font-size:7px;outline:0; }
.simulasi-input-chat button { width:32px;height:34px;display:grid;place-items:center;border:0;border-radius:11px;color:white;background:#15803d; }
.simulasi-input-chat svg { width:14px; }

.simulasi-qr {
  width:138px;
  height:138px;
  display:grid;
  grid-template-columns:repeat(13,1fr);
  gap:2px;
  margin:10px auto;
  padding:10px;
  border:1px solid #e2e8f0;
  border-radius:15px;
  background:white;
  box-shadow:0 13px 25px rgba(15,23,42,.08);
}
.simulasi-qr i { border-radius:1px;background:#052e16; }
.simulasi-qr i.kosong { background:transparent; }

.simulasi-sukses-ikon {
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:22px;
  color:#15803d;
  background:linear-gradient(145deg,#dcfce7,#d9f99d);
  box-shadow:0 15px 35px rgba(22,163,74,.18);
}
.simulasi-sukses-ikon svg { width:30px;height:30px; }
.simulasi-sukses h2 { margin:17px 0 7px;color:#052e16;font-size:17px;letter-spacing:-.04em; }
.simulasi-sukses p { max-width:220px;margin:0;color:#64748b;font-size:7px;line-height:1.55; }
.simulasi-sukses .simulasi-tombol-utama { margin-top:18px;max-width:190px; }
.simulasi-referensi { margin-top:10px;padding:7px 10px;border-radius:9px;color:#166534;background:#f0fdf4;font-size:6px;font-weight:800; }

.simulasi-toast {
  position:absolute;
  z-index:95;
  left:50%;
  bottom:66px;
  max-width:82%;
  padding:8px 11px;
  border-radius:999px;
  color:white;
  background:rgba(5,46,22,.94);
  box-shadow:0 12px 28px rgba(5,46,22,.25);
  font-size:6.4px;
  font-weight:750;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,10px);
  transition:.22s ease;
}
.simulasi-toast.terlihat { opacity:1; transform:translate(-50%,0); }

.simulasi-placeholder-art {
  height:92px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#15803d;
  background:
    radial-gradient(circle at 74% 24%,rgba(215,238,99,.6),transparent 20%),
    linear-gradient(145deg,#effbea,#c9ebbb);
}
.simulasi-placeholder-art svg { width:34px;height:34px; }

.simulasi-notif {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
  padding:10px;
  border:1px solid #e0e9e2;
  border-radius:13px;
  background:white;
}
.simulasi-notif + .simulasi-notif { margin-top:7px; }
.simulasi-notif i { width:32px;height:32px;display:grid;place-items:center;border-radius:10px;color:#15803d;background:#f0fdf4;font-style:normal; }
.simulasi-notif svg { width:15px; }
.simulasi-notif span { display:flex;flex-direction:column;line-height:1.25; }
.simulasi-notif b { color:#052e16;font-size:7.5px; }
.simulasi-notif small { margin-top:4px;color:#94a3b8;font-size:5.8px;line-height:1.4; }

.simulasi-cari-padat { margin-top: 0; }
.simulasi-catatan-dummy {
  margin: 10px 2px 0;
  color: #94a3b8;
  font-size: 5.7px;
  line-height: 1.45;
  text-align: center;
}

.simulasi-peta-kawasan {
  position: relative;
  height: 136px;
  overflow: hidden;
  border: 1px solid #dce7df;
  border-radius: 15px;
  background: #eaf1eb;
  box-shadow: 0 8px 22px rgba(15,23,42,.06);
}
.simulasi-peta-kawasan > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.82) contrast(.96);
}
.simulasi-peta-kawasan::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 46%,rgba(3,45,24,.74));
  pointer-events: none;
}
.simulasi-peta-kawasan > div {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 9px;
  display: flex;
  flex-direction: column;
  color: white;
}
.simulasi-peta-kawasan > div b { font-size: 8px; }
.simulasi-peta-kawasan > div small { margin-top: 2px; color: rgba(255,255,255,.72); font-size: 5.5px; }
.simulasi-pin {
  position: absolute;
  z-index: 3;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 3px solid white;
  border-radius: 50% 50% 50% 4px;
  color: white;
  background: #16a34a;
  box-shadow: 0 5px 12px rgba(15,23,42,.18);
  transform: rotate(-45deg);
}
.simulasi-pin svg { width: 11px; transform: rotate(45deg); }
.simulasi-pin.p1 { top: 27px; left: 28%; }
.simulasi-pin.p2 { top: 49px; right: 25%; background: #0f766e; }

.simulasi-kawasan-list { display: grid; gap: 7px; }
.simulasi-kawasan-list > button {
  width: 100%;
  display: grid;
  grid-template-columns: 47px minmax(0,1fr) 12px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid #e1e9e3;
  border-radius: 13px;
  color: #334155;
  background: white;
  text-align: left;
  box-shadow: 0 5px 15px rgba(15,23,42,.035);
}
.simulasi-kawasan-thumb {
  width: 47px;
  height: 43px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: #edf7ef;
  color: #15803d;
}
.simulasi-kawasan-thumb img { width: 100%; height: 100%; object-fit: cover; }
.simulasi-kawasan-thumb svg { width: 18px; }
.simulasi-kawasan-list > button > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
.simulasi-kawasan-list b { color: #052e16; font-size: 8px; }
.simulasi-kawasan-list small { display: flex; align-items: center; gap: 3px; margin-top: 4px; color: #64748b; font-size: 5.7px; }
.simulasi-kawasan-list small svg { width: 8px; color: #16a34a; }
.simulasi-kawasan-list em { margin-top: 3px; color: #94a3b8; font-size: 5.3px; font-style: normal; }
.simulasi-kawasan-list strong { color: #94a3b8; font-size: 13px; }

.simulasi-filter-notif { margin-bottom: 3px; }
.simulasi-notif-list { display: grid; gap: 4px; }
.simulasi-notif-list > button {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 35px minmax(0,1fr) 7px;
  align-items: center;
  gap: 9px;
  padding: 9px 6px;
  border: 0;
  border-bottom: 1px solid #e8eee9;
  color: #334155;
  background: transparent;
  text-align: left;
}
.simulasi-notif-list > button.belum-dibaca {
  border-radius: 11px;
  background: #effaf2;
}
.simulasi-notif-list > button > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #15803d;
  background: #dcfce7;
  font-style: normal;
}
.simulasi-notif-list > button > i.pesanan { color: #7c3aed; background: #ede9fe; }
.simulasi-notif-list > button > i.koin { color: #a16207; background: #fef3c7; }
.simulasi-notif-list > button > i.chat { color: #0369a1; background: #e0f2fe; }
.simulasi-notif-list > button > i svg { width: 15px; }
.simulasi-notif-list > button > span { min-width: 0; display: flex; flex-direction: column; }
.simulasi-notif-list b { color: #052e16; font-size: 7.7px; }
.simulasi-notif-list small { margin-top: 3px; color: #64748b; font-size: 5.7px; line-height: 1.4; }
.simulasi-notif-list em { margin-top: 4px; color: #94a3b8; font-size: 5.2px; font-style: normal; }
.simulasi-notif-list > button > strong {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
}

.simulasi-favorit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.simulasi-favorit-grid > button {
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid #e1e9e3;
  border-radius: 13px;
  background: white;
  text-align: left;
  box-shadow: 0 7px 18px rgba(15,23,42,.055);
}
.simulasi-favorit-gambar { position: relative; height: 82px; display: block; overflow: hidden; background: #eef4ef; }
.simulasi-favorit-gambar img { width: 100%; height: 100%; object-fit: cover; }
.simulasi-favorit-gambar i {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ef4444;
  background: rgba(255,255,255,.93);
  box-shadow: 0 3px 10px rgba(15,23,42,.14);
}
.simulasi-favorit-gambar i svg { width: 11px; }
.simulasi-favorit-grid > button > span:last-child { display: flex; flex-direction: column; padding: 7px; }
.simulasi-favorit-grid small { color: #16a34a; font-size: 5px; font-weight: 800; }
.simulasi-favorit-grid b { margin-top: 3px; color: #052e16; font-size: 7px; line-height: 1.25; }
.simulasi-favorit-grid em { display: flex; align-items: center; gap: 2px; margin-top: 4px; color: #94a3b8; font-size: 5px; font-style: normal; }
.simulasi-favorit-grid em svg { width: 7px; color: #16a34a; }
.simulasi-favorit-grid strong { margin-top: 5px; color: #15803d; font-size: 6.5px; }

.simulasi-profile-card {
  position: relative;
  display: grid;
  grid-template-columns: 43px minmax(0,1fr);
  gap: 9px;
  padding: 13px 12px 10px;
  border-radius: 17px;
  color: white;
  background:
    radial-gradient(circle at 86% 16%,rgba(215,238,99,.38),transparent 22%),
    linear-gradient(135deg,#065f32,#14934d);
  box-shadow: 0 12px 26px rgba(20,83,45,.18);
}
.simulasi-profile-card > button {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: white;
  background: rgba(255,255,255,.14);
}
.simulasi-profile-card > button svg { width: 11px; }
.simulasi-avatar {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 50%;
  color: #14532d;
  background: #dcfce7;
}
.simulasi-avatar svg { width: 21px; }
.simulasi-profile-card > span:nth-of-type(2) { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.simulasi-profile-card > span small { color: rgba(255,255,255,.72); font-size: 5.5px; }
.simulasi-profile-card > span b { margin-top: 2px; font-size: 10px; }
.simulasi-profile-card > span em { margin-top: 3px; color: #d9f99d; font-size: 5.5px; font-style: normal; }
.simulasi-profile-card > div {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,.2);
}
.simulasi-profile-card > div button {
  min-width: 0;
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  gap: 1px 3px;
  padding: 8px 4px 1px;
  border: 0;
  color: white;
  background: transparent;
  text-align: left;
}
.simulasi-profile-card > div button + button { border-left: 1px solid rgba(255,255,255,.16); }
.simulasi-profile-card > div svg { grid-row: 1/3; width: 12px; align-self: center; }
.simulasi-profile-card > div small { color: rgba(255,255,255,.8); font-size: 5.2px; }
.simulasi-profile-card > div b { color: white; font-size: 6px; }
.simulasi-merchant-entry {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0,1fr) 12px;
  align-items: center;
  gap: 9px;
  margin-top: 9px;
  padding: 8px 10px;
  border: 1px solid #dce9df;
  border-radius: 13px;
  background: white;
  text-align: left;
}
.simulasi-merchant-entry > span:first-child { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #15803d; background: #ecfdf3; }
.simulasi-merchant-entry svg { width: 14px; }
.simulasi-merchant-entry > span:nth-child(2) { display: flex; flex-direction: column; }
.simulasi-merchant-entry b { color: #052e16; font-size: 7.5px; }
.simulasi-merchant-entry small { margin-top: 3px; color: #94a3b8; font-size: 5.4px; }
.simulasi-merchant-entry strong { color: #94a3b8; font-size: 12px; }
.simulasi-digital-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; }
.simulasi-digital-grid button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 2px; border: 0; border-radius: 10px; color: #334155; background: #f8faf9; }
.simulasi-digital-grid img { width: 27px; height: 27px; object-fit: contain; }
.simulasi-digital-grid small { font-size: 5.3px; }
.simulasi-account-menu { display: grid; margin-top: 9px; border-top: 1px solid #e6ede8; }
.simulasi-account-menu button { display: grid; grid-template-columns: 22px minmax(0,1fr) 10px; align-items: center; gap: 7px; padding: 9px 2px; border: 0; border-bottom: 1px solid #e6ede8; color: #334155; background: transparent; text-align: left; }
.simulasi-account-menu i { display: grid; place-items: center; color: #15803d; font-style: normal; }
.simulasi-account-menu i svg { width: 13px; }
.simulasi-account-menu span { color: #1f2937; font-size: 6.7px; font-weight: 700; }
.simulasi-account-menu em { color: #94a3b8; font-size: 10px; font-style: normal; }

@media (max-width:620px) {
  .simulasi-petunjuk { bottom:59px; }
  .simulasi-status { flex-basis:27px; }
  .simulasi-header { flex-basis:47px; }
  .simulasi-nav { height:51px; }
  .simulasi-body { padding:10px 10px 62px; }
  .simulasi-h2 { font-size:14px; }
}

@media (prefers-reduced-motion: reduce) {
  .simulasi-lapisan,.simulasi-petunjuk,.simulasi-toast,.simulasi-tappable { transition:none!important;animation:none!important; }
}
.simulasi-header button[data-sim-action="back"] svg { transform: rotate(180deg); }


/* Dashboard Developer KPR pada lapisan simulasi */
.simulasi-dev-body { padding-bottom: 68px; background: #f7faf8; }
.simulasi-dev-nav { position:absolute; left:0; right:0; bottom:0; z-index:6; height:58px; display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid #e4ece6; background:white; }
.simulasi-dev-nav button { border:0; background:transparent; color:#9aa7a0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:6px; }
.simulasi-dev-nav button svg { width:14px; height:14px; }
.simulasi-dev-nav button.aktif { color:#15803d; }
.simulasi-dev-hero { padding:14px; border-radius:15px; background:linear-gradient(135deg,#063f22,#168248); color:white; }
.simulasi-dev-hero small { color:#d9f99d; font-size:6.5px; font-weight:800; letter-spacing:.08em; }
.simulasi-dev-hero h3 { margin:4px 0 0; font-size:13px; line-height:1.2; }
.simulasi-dev-hero p { margin:5px 0 0; color:rgba(255,255,255,.72); font-size:7px; }
.simulasi-dev-hero span { display:inline-flex; margin-top:9px; padding:5px 8px; border-radius:999px; background:rgba(255,255,255,.12); color:#d9f99d; font-size:6px; font-weight:800; }
.simulasi-dev-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:9px; }
.simulasi-dev-stats button,.simulasi-dev-stats > span { min-height:72px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:8px; border:1px solid #dfebe2; border-radius:12px; background:white; color:#052e16; text-align:left; }
.simulasi-dev-stats small { color:#748379; font-size:6px; }
.simulasi-dev-stats b { margin-top:4px; color:#052e16; font-size:9px; }
.simulasi-dev-stats span span,.simulasi-dev-stats button span { margin-top:auto; color:#15803d; font-size:5.5px; }