.map-page { min-height: 100vh; background: #f8fafc; }
.map-heading { padding: 150px 0 70px; color: white; background: linear-gradient(120deg, #082b59, #1261c9); }
.map-heading h1 { margin: 0 0 16px; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.07em; }
.map-heading h1 span { color: #ffc857; }
.map-heading p:not(.eyebrow) { max-width: 560px; margin: 0; color: #d5e7fb; font-size: 1.05rem; line-height: 1.7; }
.map-workspace { padding: 58px 0 90px; }
.map-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; min-height: 600px; }
.map-sidebar { padding: 28px; background: white; border: 1px solid #dce8f5; border-radius: 16px; box-shadow: 0 10px 28px rgba(21,73,127,.06); }
.filter-heading { padding-bottom: 24px; border-bottom: 1px solid #dce8f5; }
.filter-heading h2 { margin: 8px 0 0; color: #082b59; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; letter-spacing: -.04em; }
.map-filter-group { padding: 24px 0; border-bottom: 1px solid #dce8f5; }
.map-label { display: block; margin-bottom: 14px; color: #61728a; font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.check-filter { display: flex; align-items: center; gap: 10px; padding: 9px 0; color: #10233d; cursor: pointer; font-size: .92rem; }
.check-filter input { width: 17px; height: 17px; accent-color: #1261c9; }
.check-filter b { margin-left: auto; color: #61728a; font-size: .78rem; font-weight: 600; }
.map-sidebar > .btn { margin-top: 24px; }
.map-canvas-wrap { position: relative; min-width: 0; overflow: hidden; border: 1px solid #dce8f5; border-radius: 16px; box-shadow: 0 16px 40px rgba(21,73,127,.1); }
.peta-map { width: 100%; height: 600px; }
.umkm-marker-wrapper, .user-location-marker { display: grid; place-items: center; background: transparent; border: 0; }
.umkm-marker { position: relative; display: grid; width: 32px; height: 32px; place-items: center; background: var(--marker-color); border: 3px solid #fff; border-radius: 50% 50% 50% 0; box-shadow: 0 3px 9px rgba(15,23,42,.3); transform: rotate(-45deg); transition: transform .2s ease, filter .2s ease; }
.umkm-marker::after { position: absolute; bottom: -7px; left: 8px; width: 11px; height: 11px; background: var(--marker-color); border-radius: 0 0 0 2px; content: ''; }
.umkm-marker-dot { position: relative; z-index: 1; width: 9px; height: 9px; background: #fff; border-radius: 50%; transform: rotate(45deg); }
.umkm-marker-wrapper:hover .umkm-marker { filter: brightness(1.08); transform: rotate(-45deg) scale(1.1); }
.user-location-marker { color: #fff; background: #dc2626; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 2px 10px rgba(220,38,38,.45); font-size: 1.1rem; }
.map-boundary-label { position: absolute; z-index: 400; top: 18px; left: 18px; padding: 8px 12px; color: #0d47a1; background: rgba(255,255,255,.92); border: 1px solid rgba(13,71,161,.2); border-radius: 7px; box-shadow: 0 5px 14px rgba(15,23,42,.12); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.map-location-button { position: absolute; z-index: 400; right: 18px; bottom: 18px; padding: 10px 14px; color: #0d47a1; background: #fff; border: 1px solid #cbdced; border-radius: 8px; box-shadow: 0 5px 14px rgba(15,23,42,.14); font-size: .72rem; font-weight: 700; }
.map-location-button:hover { color: #fff; background: #0d47a1; }
.boundary-editor { position: absolute; z-index: 500; left: 18px; bottom: 18px; max-width: min(430px, calc(100% - 36px)); }
.boundary-editor button { margin: 3px; }
.boundary-editor [hidden] { display: none; }
.boundary-editor > div { padding: 12px; background: rgba(255,255,255,.96); border: 1px solid #dce8f5; border-radius: 8px; box-shadow: 0 5px 14px rgba(15,23,42,.14); }
.boundary-editor p { margin: 0 0 8px; color: #10233d; font-size: .78rem; line-height: 1.5; }
.rw15-boundary-tooltip { padding: 5px 8px; color: #0D47A1; background: rgba(255,255,255,.88); border: 1px solid rgba(13,71,161,.35); border-radius: 5px; box-shadow: 0 2px 8px rgba(15,23,42,.14); font-size: .65rem; font-weight: 800; letter-spacing: .08em; }
.rw15-boundary-tooltip::before { display: none; }
.umkm-marker-popup { display: grid; min-width: 155px; gap: 5px; }
.umkm-marker-popup strong { color: #082b59; font-family: 'Space Grotesk', sans-serif; font-size: .95rem; }
.umkm-marker-popup span { color: #61728a; font-size: .78rem; }
.umkm-popup-detail { padding: 0; color: #1261c9; background: transparent; border: 0; font-size: .78rem; font-weight: 700; text-align: left; cursor: pointer; }
.umkm-detail-modal { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px; }
.umkm-detail-modal[hidden] { display: none; }
.umkm-detail-backdrop { position: absolute; inset: 0; background: rgba(8,43,89,.48); backdrop-filter: blur(3px); }
.umkm-detail-dialog { position: relative; width: min(520px, 100%); padding: 32px; background: #fff; border: 1px solid #dce8f5; border-radius: 18px; box-shadow: 0 24px 70px rgba(3,25,58,.28); }
.umkm-detail-dialog h2 { margin: 6px 0 8px; color: #082b59; font-family: 'Space Grotesk', sans-serif; font-size: 1.8rem; }
.umkm-detail-meta { margin: 0 0 18px; color: #1261c9; font-size: .88rem; font-weight: 700; }
.umkm-detail-description { margin: 0; color: #61728a; line-height: 1.7; }
.umkm-detail-close { position: absolute; top: 12px; right: 16px; width: 34px; height: 34px; color: #61728a; background: transparent; border: 0; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.umkm-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.modal-open { overflow: hidden; }
.map-status { position: absolute; z-index: 500; top: 18px; right: 18px; display: flex; flex-direction: column; padding: 12px 16px; background: rgba(255,255,255,.94); border: 1px solid #dce8f5; border-radius: 12px; box-shadow: 0 8px 18px rgba(21,73,127,.12); }
.map-status strong { color: #082b59; font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; }
.map-status span { color: #61728a; font-size: .72rem; }
.mobile-filter-trigger { display: none; }
.map-note { padding: 90px 0; color: white; background: #082b59; }
.map-note h2 { max-width: 690px; margin: 0; font-family: 'Space Grotesk', sans-serif; font-size: clamp(2rem, 4vw, 3.4rem); letter-spacing: -.06em; }
.map-note p:not(.eyebrow) { color: #b7cbe4; line-height: 1.8; }
.map-note .text-link { color: #ffc857; text-decoration: none; font-weight: 700; }
.offcanvas .check-filter { color: #10233d; }
@media (max-width: 991px) { .map-layout { grid-template-columns: 230px minmax(0, 1fr); gap: 16px; } .map-sidebar { padding: 22px; } }
@media (max-width: 767px) { .map-heading { padding: 120px 0 55px; } .map-workspace { padding-top: 28px; } .mobile-filter-trigger { display: inline-block; margin-bottom: 16px; } .map-sidebar { display: none; } .map-layout { display: block; min-height: 0; } .peta-map { height: 500px; } .map-status { top: 12px; right: 12px; } .map-note { padding: 65px 0; } }