/* Ruko pages + Geo ProperView location analysis (2026-10-06). Uses the landing tokens from properview-landing.css. */
:root {
  --lp-brand: #005EA6;
  --lp-brand-2: #004380;
  --lp-brand-mint: #22B24C;
  --lp-border-brand: rgba(0, 94, 166, 0.35);
  --lp-grad: linear-gradient(135deg, #005EA6 0%, #0077D4 50%, #004380 100%);
  --lp-grad-h: linear-gradient(90deg, #005EA6, #0088F0);
  --lp-shadow-brand: 0 10px 28px rgba(0, 94, 166, 0.28);
  --ruko-lo: #1f8a4c;
  --ruko-lo-bg: rgba(34, 178, 76, 0.12);
  --ruko-ok: #8a6a00;
  --ruko-ok-bg: rgba(240, 180, 0, 0.16);
  --ruko-hi: #b3261e;
  --ruko-hi-bg: rgba(179, 38, 30, 0.10);
}
.lp-header .lp-brand__name { display: none; }

.ruko-lead { max-width: 44rem; color: var(--lp-text-2); line-height: 1.7; margin: 0.5rem 0 1.5rem; }
.ruko-empty { color: var(--lp-text-2); }
.ruko-source, .ruko-credit { margin-top: 1rem; font-size: 0.8rem; color: var(--lp-text-3); line-height: 1.6; }
.ruko-source a { color: inherit; text-decoration: underline; }

.ruko-card .lp-unit-card__media { position: relative; }
.ruko-card__link { color: inherit; text-decoration: none; }
.ruko-card__link:hover { text-decoration: underline; }
.ruko-card__headline { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--lp-brand); font-weight: 600; line-height: 1.5; }

.ruko-facts { margin: 0 0 1.25rem; padding-left: 1.1rem; color: var(--lp-text-2); line-height: 1.8; }

/* lock */
.ruko-analisa { position: relative; margin-top: 0.5rem; }
.ruko-lock { position: relative; min-height: 18rem; border-radius: var(--lp-radius-card); overflow: hidden; border: 1px solid var(--lp-border); background: var(--lp-surface, #fff); }
.ruko-lock__preview { padding: 1.25rem; filter: blur(5px); opacity: 0.55; pointer-events: none; }
.ruko-skel { height: 1.1rem; margin: 0.8rem 0; border-radius: 6px; background: linear-gradient(90deg, #e3e9f0, #f2f5f9, #e3e9f0); }
.ruko-skel--tabs { width: 14rem; height: 2rem; }
.ruko-skel--short { width: 55%; }
.ruko-lock__card {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(92%, 26rem); padding: 1.4rem 1.4rem 1.5rem; text-align: center;
  background: #fff; border: 1px solid var(--lp-border-brand); border-radius: var(--lp-radius-card);
  box-shadow: var(--lp-shadow-brand);
}
.ruko-lock__title { margin: 0 0 0.4rem; font-family: var(--lp-display, inherit); font-size: 1.15rem; font-weight: 700; color: var(--lp-text-1); }
.ruko-lock__sub { margin: 0 0 1rem; font-size: 0.9rem; color: var(--lp-text-2); line-height: 1.6; }

/* analysis */
.ruko-analisa__body { border: 1px solid var(--lp-border); border-radius: var(--lp-radius-card); background: var(--lp-surface, #fff); padding: 1.25rem; }
.ruko-headline { margin: 0 0 1rem; font-weight: 700; color: var(--lp-brand); line-height: 1.5; }
.ruko-tabs { display: inline-flex; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1.1rem; border-radius: 999px; background: var(--lp-surface-2, #eef2f6); }
.ruko-tab { border: 0; background: transparent; padding: 0.4rem 0.9rem; border-radius: 999px; font: inherit; font-weight: 600; font-size: 0.85rem; color: var(--lp-text-2); cursor: pointer; }
.ruko-tab.is-active { background: var(--lp-brand); color: #fff; }
.ruko-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .ruko-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); } }
.ruko-pop { margin: 0 0 0.9rem; color: var(--lp-text-2); }
.ruko-pop strong { color: var(--lp-text-1); font-size: 1.15rem; }
.ruko-fit { padding: 1rem; border-radius: var(--lp-radius); background: var(--lp-surface-2, #f3f6f9); }
.ruko-fit__eyebrow { margin: 0 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lp-text-3); }
.ruko-fit__use { margin: 0 0 0.35rem; font-size: 1.2rem; font-weight: 700; color: var(--lp-text-1); }
.ruko-fit__basis { margin: 0 0 0.5rem; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgba(0, 94, 166, 0.08); color: var(--lp-brand); font-size: 0.82rem; font-weight: 600; line-height: 1.5; }
.ruko-fit__nums { margin: 0 0 0.35rem; color: var(--lp-text-2); }
.ruko-fit__verdict { margin: 0 0 0.35rem; color: var(--lp-text-1); }
.ruko-fit__demand { margin: 0; padding-left: 1.1rem; color: var(--lp-text-2); line-height: 1.7; }
.ruko-near { margin: 1rem 0 0; padding: 0; list-style: none; font-size: 0.88rem; line-height: 1.8; }
.ruko-tag { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.ruko-tag--lo { color: var(--ruko-lo); background: var(--ruko-lo-bg); }
.ruko-tag--ok { color: var(--ruko-ok); background: var(--ruko-ok-bg); }
.ruko-tag--hi { color: var(--ruko-hi); background: var(--ruko-hi-bg); }
.ruko-table-wrap { overflow-x: auto; }
.ruko-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ruko-table th, .ruko-table td { padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--lp-border); text-align: left; vertical-align: top; }
.ruko-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--lp-text-3); font-weight: 700; }
.ruko-table .num { text-align: right; white-space: nowrap; }
@media (min-width: 900px) { .ruko-table td:first-child { min-width: 7.5rem; } }
.ruko-muted { color: var(--lp-text-3); }
.ruko-small { font-size: 0.8rem; line-height: 1.7; margin: 0.6rem 0 0; }
@media (max-width: 600px) { .ruko-hide-sm { display: none; } }

/* Unit cards on /ruko/: the same rules as the inline <style> in index.php (the list reuses that markup). */
.lp-unit-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .lp-unit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .lp-unit-grid { grid-template-columns: repeat(3, 1fr); }
}
.lp-unit-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  background: var(--lp-surface, #fff);
}
.lp-unit-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #0f1216;
  overflow: hidden;
}
.lp-unit-card__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.lp-unit-card__slide.is-active { opacity: 1; pointer-events: auto; }
.lp-unit-card__slide img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.lp-unit-card__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,0.92); color: #1a1a1a;
  font-size: 1.25rem; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.lp-unit-card__nav--prev { left: 0.6rem; }
.lp-unit-card__nav--next { right: 0.6rem; }
.lp-unit-card__dots {
  position: absolute; left: 0; right: 0; bottom: 0.55rem;
  z-index: 2; display: flex; justify-content: center; gap: 0.35rem;
}
.lp-unit-card__dot {
  width: 1.1rem; height: 3px; border: 0; border-radius: 2px;
  padding: 0; background: rgba(255,255,255,0.45); cursor: pointer;
}
.lp-unit-card__dot.is-active { background: #fff; }
.lp-unit-card__body {
  display: flex; flex-direction: column; gap: 0.75rem;
  padding: 1.1rem 1.15rem 1.2rem; flex: 1;
}
.lp-unit-card__body h3 {
  margin: 0;
  font-family: var(--lp-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--lp-text-1);
}
.lp-unit-card__price-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--lp-text-2);
  margin-bottom: 0.15rem;
}
.lp-unit-card__price {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--lp-brand);
  line-height: 1.2;
}
.lp-unit-card__rule {
  border: 0; border-top: 1px solid var(--lp-border);
  margin: 0.15rem 0;
}
.lp-unit-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  text-align: center;
}
.lp-unit-card__metric {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  font-size: 0.78rem; font-weight: 600;
  color: var(--lp-text-2);
}
.lp-unit-card__metric i {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.8;
  color: var(--lp-text-2);
}
.lp-unit-card__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin-top: auto;
  padding-top: 0.25rem;
}
.lp-unit-card__actions .lp-btn {
  justify-content: center;
  padding: 0.7rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 8px;
}
.lp-unit-card__actions .lp-btn--ghost {
  background: #fff;
  border: 1.5px solid var(--lp-brand);
  color: var(--lp-brand);
}
.lp-unit-card__actions .lp-btn--ghost:hover {
  background: rgba(0, 94, 166, 0.06);
}
.lp-unit-card__actions .lp-btn--brand {
  gap: 0.4rem;
}
.lp-unit-card__actions .lp-btn__wa {
  width: 1rem; height: 1rem; flex: 0 0 auto;
}

/* Phone hero: the text spans the full width, so veil the whole photo (ruko photos are busy storefronts). */
@media (max-width: 767px) {
  .lp-model-hero__shade {
    background: linear-gradient(180deg, rgba(247,248,250,0.9) 0%, rgba(247,248,250,0.84) 65%, rgba(247,248,250,0.7) 100%);
  }
}

/* location map (ruko-map.js, Geo ProperView style) */
.ruko-map { position: relative; margin: 0 0 1.25rem; }
.ruko-map__canvas { position: relative; height: 380px; border-radius: var(--lp-radius-card); overflow: hidden; border: 1px solid var(--lp-border); background: #eef2f6; }
@media (max-width: 600px) { .ruko-map__canvas { height: 300px; } }
.ruko-map__note { margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--lp-text-3); }

/* Category panel in the visual language of the Geo ProperView layer panel: a white card, letter-spaced group heads with
   a bullet, one compact checkbox row per category (swatch, name, muted count). From 601px it floats over the left of
   the map (ruko-map.js fits the ring to the right of it); on phones it sits under the map, folded behind "Kategori". */
.ruko-map__legend {
  margin-top: 0.75rem; padding: 12px; border: 1px solid rgba(15, 26, 31, 0.11); border-radius: 14px;
  background: rgba(255, 255, 255, 0.95); box-shadow: 0 10px 30px rgba(15, 26, 31, 0.14); font-size: 13px; color: var(--lp-text-1);
}
.ruko-map__legend[hidden] { display: none; }
@media (min-width: 601px) {
  .ruko-map__legend {
    position: absolute; top: 12px; left: 12px; z-index: 2; width: 260px; max-height: calc(100% - 24px); margin: 0;
    overflow-y: auto; scrollbar-width: thin; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    /* scroll shadows: a soft shade at the bottom while more rows are below, at the top once scrolled (white covers
       ride with the content and hide each shade at its end) */
    background:
      linear-gradient(#fff 40%, rgba(255, 255, 255, 0)) center top / 100% 28px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), #fff 60%) center bottom / 100% 28px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(15, 26, 31, 0.16), rgba(15, 26, 31, 0)) center top / 100% 10px no-repeat,
      radial-gradient(farthest-side at 50% 100%, rgba(15, 26, 31, 0.16), rgba(15, 26, 31, 0)) center bottom / 100% 10px no-repeat,
      rgba(255, 255, 255, 0.95);
  }
  /* a failed map keeps its message clear of the panel */
  .ruko-map:has(.ruko-map__legend:not([hidden])) .ruko-map__fail { padding-left: 290px; }
}
.ruko-map__group + .ruko-map__group { margin-top: 14px; }
.ruko-map__group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2px 8px; margin: 0 0 2px; }
.ruko-map__group-title { display: flex; align-items: center; gap: 7px; margin: 0; font-family: var(--lp-display); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-text-2); }
.ruko-map__group-title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lp-brand); flex: 0 0 auto; }
.ruko-map__group--f .ruko-map__group-title::before { background: var(--lp-brand-mint); }
.ruko-map__legend ul { margin: 0; padding: 0; list-style: none; }
/* whole row = target (26px, 44px on touch screens); unchecked fades only the swatch, never the text */
.ruko-map__cat { display: flex; align-items: center; gap: 9px; min-height: 26px; padding: 4px; border-radius: 7px; line-height: 18px; cursor: pointer; }
.ruko-map__sw { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.ruko-map__n { margin-left: auto; padding-left: 8px; font-size: 11.5px; color: var(--lp-text-2); font-variant-numeric: tabular-nums; }
.ruko-map__all { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 0 4px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--lp-text-2); white-space: nowrap; cursor: pointer; }
.ruko-map__legend input { width: 15px; height: 15px; margin: 0; flex: 0 0 auto; accent-color: var(--lp-brand); cursor: pointer; }
.ruko-map__all input { width: 13px; height: 13px; }
.ruko-map__legend input:focus-visible, .ruko-map__toggle:focus-visible { outline: 2px solid var(--lp-brand); outline-offset: 2px; }
.ruko-map__cat input:not(:checked) + .ruko-map__sw { opacity: 0.3; }
@media (hover: hover) { .ruko-map__cat:hover, .ruko-map__all:hover { background: rgba(15, 26, 31, 0.05); } }
.ruko-map__status { margin: 0; font-size: 12.5px; color: var(--lp-text-2); }
.ruko-map__group-head + .ruko-map__status { padding: 2px 4px 0; }
/* the "Kategori" fold button exists on phones only */
.ruko-map__toggle {
  display: none; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0; padding: 0 4px; border: 0; border-radius: 8px;
  background: none; font: 600 13px/1.3 var(--lp-display); color: var(--lp-text-1); text-align: left; cursor: pointer;
}
.ruko-map__toggle::after { content: ''; width: 7px; height: 7px; margin: 0 6px 4px auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.ruko-map__legend.is-open .ruko-map__toggle::after { margin-bottom: -4px; transform: rotate(-135deg); }
.ruko-map__sum { font: 500 12px/1.3 var(--lp-font); color: var(--lp-text-2); }
@media (max-width: 600px) {
  .ruko-map__toggle { display: flex; }
  .ruko-map__legend { padding: 4px 12px; }
  .ruko-map__legend > .ruko-map__status { padding: 12px 4px; }
  .ruko-map__legend:not(.is-open) .ruko-map__cats { display: none; }
  .ruko-map__cats { margin: 2px 0 8px; padding-top: 10px; border-top: 1px solid var(--lp-border); }
}
@media (pointer: coarse), (max-width: 600px) { .ruko-map__cat, .ruko-map__all { min-height: 44px; } }
.ruko-map__fail { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; padding: 1rem; text-align: center; font-size: 0.85rem; color: var(--lp-text-2); }
.ruko-map .maplibregl-popup-content { font: 0.82rem/1.5 var(--font-dm-sans, system-ui, sans-serif); padding: 0.6rem 0.9rem 0.6rem 0.8rem; border-radius: 10px; }

/* sold out (availability: sold_out) */
.ruko-soldout {
  position: absolute; right: 0.6rem; top: 0.6rem; z-index: 2;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: #B3261E; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
}

/* map licence attribution (ODbL / CC BY / CARTO terms): kept, but small and faint until hovered or opened (Nick 12141) */
.ruko-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact {
  margin: 0 4px 4px 0; min-height: 18px; padding: 0 18px 0 0; background: transparent; box-shadow: none;
  opacity: 0.3; transition: opacity 0.2s;
}
/* keyed to compact-show, not [open]: MapLibre 5.6 drops only the class when the map is dragged and leaves [open] */
.ruko-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact.maplibregl-compact-show,
.ruko-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact:hover,
.ruko-map .maplibregl-ctrl.maplibregl-ctrl-attrib.maplibregl-compact:focus-within { opacity: 1; background: rgba(255, 255, 255, 0.92); }
.ruko-map .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { width: 18px; height: 18px; background-size: 14px 14px; background-position: center; }
.ruko-map .maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner { font-size: 10px; padding: 1px 4px; }

/* "data masih dilengkapi" with a status chip (ruko.js mode 'notes'): small, no icon. In the business table it sits directly
   under the chip in the same Status cell on every screen (the column is too narrow for both on one line). 12px in
   --lp-text-2 (6,1:1 on white; --lp-text-3 was 2,9:1), so it reads clearly next to the verdict. */
.ruko-note { display: inline-block; margin-left: 0.4rem; font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--lp-text-2); white-space: nowrap; vertical-align: middle; }
.ruko-table .ruko-note { display: block; margin: 0.2rem 0 0; }
@media (max-width: 600px) { .ruko-table .ruko-note { white-space: normal; } }