/* ===== modul manajemen aset ===== */
#mainnav { display: flex; gap: 2px; margin-left: 12px; overflow-x: auto; }
#mainnav a { padding: 6px 10px; color: var(--mut); text-decoration: none; font-size: 13px; white-space: nowrap; border-bottom: 2px solid transparent; }
#mainnav a:hover { color: var(--ink); } #mainnav a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.bell { color: var(--mut); text-decoration: none; font-size: 12.5px; white-space: nowrap; } .bell b { background: #a8402a; color: #fff; padding: 1px 6px; border-radius: 9px; font-size: 11px; margin-left: 3px; }
.pagemode main { display: none; } #page { flex: 1; overflow-y: auto; background: #fafaf7; min-height: 0; }
.top #crumbs:empty { display: none; }
.pg { max-width: 1280px; margin: 0 auto; padding: 22px 28px 60px; }
.pgh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .pgh h1 { margin: 2px 0 0; font-size: 22px; } .pgh .eyebrow a { text-transform: none; letter-spacing: 0; margin-left: 8px; }
.acts { display: flex; gap: 8px; align-items: center; } a.btn.ghost, a.ghost.btn { display: inline-block; margin: 0; text-decoration: none; color: var(--ink); } a.btn2 { display: block; margin-top: 10px; font-size: 12.5px; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; } .tabs a { padding: 8px 14px; color: var(--mut); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a.on { color: var(--accent); border-color: var(--accent); font-weight: 600; } .tabs a:hover { color: var(--ink); }
.card { background: #fff; border: 1px solid var(--line); padding: 16px 18px; margin-bottom: 16px; min-width: 0; } .ch { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 10px; } .ch h3 { margin: 0; font-size: 14px; font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .two-col.wide-l { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 980px) { .two-col, .two-col.wide-l { grid-template-columns: 1fr; } .pg { padding: 16px; } }
.kpis4, .kpis6 { display: grid; gap: 12px; margin-bottom: 16px; grid-template-columns: repeat(4, 1fr); } .kpis6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px) { .kpis4 { grid-template-columns: 1fr 1fr; } .kpis6 { grid-template-columns: 1fr 1fr 1fr; } }
.kpi { background: #fff; border: 1px solid var(--line); padding: 12px 14px; border-top: 3px solid var(--accent); } .kpi b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; } .kpi span { font-size: 12px; color: var(--mut); display: block; margin-top: 2px; } .kpi small { display: block; color: var(--mut); font-size: 11px; margin-top: 3px; }
.kpi.bad { border-top-color: #a8402a; } .kpi.bad b { color: #a8402a; } .kpi.warn { border-top-color: #a88625; } .kpi.ok { border-top-color: #2f7d4a; }
.tbl { overflow-x: auto; } table { border-collapse: collapse; width: 100%; font-size: 12.5px; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--mut); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--ink); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--line2); vertical-align: top; } tr:hover td { background: #f8f9f5; } .r { text-align: right; } td.r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.empty { color: var(--mut); padding: 14px 0; } .neg { color: #a8402a; } .pos { color: #2f7d4a; }
.bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .bar input { max-width: 300px; } .bar select { width: auto; min-width: 150px; } .sp { flex: 1; }
.bdg { display: inline-block; padding: 1px 8px; font-size: 11.5px; border-radius: 2px; border: 1px solid; white-space: nowrap; font-weight: 500; }
.bdg.ok { color: #1f6a3a; background: #eaf4ed; border-color: #bfdcc9; } .bdg.warn { color: #7a5c0c; background: #f8f0d8; border-color: #e6d28e; } .bdg.bad { color: #96321f; background: #f9e7e3; border-color: #e7b9af; } .bdg.info { color: #285b6b; background: #e6f1f3; border-color: #b7d4da; } .bdg.mut { color: var(--mut); background: #f3f3ee; border-color: var(--line); }
.mini { font-size: 11.5px; padding: 3px 8px; border: 1px solid var(--line); background: #fff; border-radius: 2px; } .mini:hover { border-color: var(--accent); color: var(--accent); } .mini.pri { background: var(--accent); color: #fff; border-color: var(--accent); } .mini.pri:hover { background: #1f4a2d; color: #fff; }
.alrt { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; padding: 8px 10px; margin-bottom: 6px; border-left: 3px solid; text-decoration: none; color: var(--ink); background: #fafaf7; font-size: 12.5px; }
.alrt b { font-weight: 600; } .alrt span { grid-column: 1; color: var(--mut); } .alrt em { grid-column: 2; grid-row: 1 / 3; font-style: normal; color: var(--mut); align-self: center; white-space: nowrap; font-size: 12px; } .alrt:hover { background: #f1f3ec; }
.alrt.bad { border-color: #a8402a; } .alrt.warn { border-color: #a88625; } .alrt.info { border-color: #3d7f7a; } .alrt.ok { border-color: #2f7d4a; }
.stb { color: var(--c); font-weight: 600; text-transform: none; letter-spacing: 0; }
.minimap { height: 380px; border: 1px solid var(--line); position: relative; } .minimap.tall { height: 460px; } .leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--mut); margin-top: 8px; } .leg span { display: flex; align-items: center; gap: 5px; } .leg i { width: 10px; height: 10px; display: inline-block; }
#swipe { position: absolute; z-index: 800; left: 0; width: 100%; top: 0; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; } .swl { position: absolute; z-index: 700; top: 0; bottom: 0; width: 3px; background: #fff; box-shadow: 0 0 6px rgba(0,0,0,.5); pointer-events: none; }
.row2 { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .row2.tight { align-items: end; margin: 0 0 10px; } .row2.tight label { margin: 0; flex: 1; min-width: 140px; }
textarea { width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 2px; padding: 7px 9px; font: inherit; resize: vertical; }
.svres { margin-top: 12px; } .err { color: #a8402a; }
.chart { width: 100%; height: auto; display: block; } .chart .gl { stroke: #e7e7df; stroke-width: 1; } .chart .ax { font-size: 10px; fill: #7a7f77; }
.hbar { grid-template-columns: 150px 1fr 90px; }
.mk-st-vacant i { background: #d1b45a; } .mk-st-leased i { background: #285b38; } .mk-st-development i { background: #3d7f7a; } .mk-st-sale i { background: #a8402a; }
.seg.two2 { grid-template-columns: 1fr 1fr; }
dialog.frm { width: min(620px, 94vw); max-height: 92vh; overflow-y: auto; } dialog.frm.sm { width: min(380px, 94vw); } dialog.frm.phone { width: min(420px, 96vw); }
dialog.frm .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } dialog.frm .grid .w2 { grid-column: 1 / -1; } dialog.frm h2 { margin-bottom: 10px; }
dialog.frm .row, dialog.frm .row2 { display: flex; gap: 8px; } dialog.frm .row.end { justify-content: space-between; margin-top: 14px; align-items: center; } dialog small.mut { display: block; margin-top: 3px; }
.step { border-top: 1px solid var(--line2); padding: 12px 0; } .step b { display: block; margin-bottom: 6px; } .gpsbox { padding: 8px 10px; background: #f5f6f1; margin-bottom: 8px; font-size: 12.5px; }
.photos3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-top: 6px; } .photos3 img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.chk2 { padding: 4px 0; font-size: 13px; }
#toast { position: fixed; bottom: 22px; left: 50%; transform: translate(-50%, 20px); background: var(--ink); color: #fff; padding: 9px 16px; font-size: 13px; opacity: 0; transition: .2s; z-index: 5000; pointer-events: none; } #toast.on { opacity: 1; transform: translate(-50%, 0); }
.cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; } .cam { background: #fff; border: 1px solid var(--line); } .feed { height: 160px; background: linear-gradient(135deg, #2b3a30, #1a221d); position: relative; overflow: hidden; }
.feed::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); } .feed .live { position: absolute; top: 8px; left: 10px; color: #ff6b5b; font-size: 11px; font-weight: 600; z-index: 1; } .feed .ts { position: absolute; bottom: 8px; right: 10px; color: #cfe0d6; font: 11px var(--mono); z-index: 1; }
.ci { padding: 10px 12px; } .sens { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--mut); margin-top: 6px; } .sens .w { color: #a8402a; }
.gantt { position: relative; padding-left: 230px; } .gr { display: flex; align-items: center; height: 28px; position: relative; } .gr > span { position: absolute; left: -230px; width: 220px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gt { flex: 1; position: relative; height: 12px; background: var(--line2); } .gt i { position: absolute; top: 0; bottom: 0; background: #cfd8c4; } .gt u { display: block; height: 100%; background: var(--accent); }
.now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #a88625; z-index: 2; }
.stg { display: flex; gap: 3px; margin-bottom: 3px; } .stg i { width: 18px; height: 5px; background: var(--line); } .stg i.on { background: var(--accent); }
.deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; } .deal .chk { margin: 4px 0; }
.appr { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border: 1px solid var(--line); margin-bottom: 4px; font-size: 12.5px; } .appr.ok { background: #eaf4ed; border-color: #bfdcc9; } .appr em { font-style: normal; color: var(--mut); font-size: 12px; }
.rep { display: grid; grid-template-columns: 240px 1fr; gap: 20px; } .replist { display: flex; flex-direction: column; font-size: 13px; } .replist b { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--mut); margin: 12px 0 4px; } .replist b:first-child { margin-top: 0; } .replist a { padding: 6px 10px; color: var(--ink); text-decoration: none; border-left: 2px solid transparent; } .replist a:hover { background: #f1f3ec; } .replist a.on { border-color: var(--accent); background: #eaf1ea; font-weight: 600; }
@media (max-width: 980px) { .rep { grid-template-columns: 1fr; } }
.portal { background: #fff; } .pbanner { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid var(--accent); padding-bottom: 14px; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .pbanner h1 { margin: 2px 0 0; } .pbanner label { margin: 0; min-width: 260px; }

/* ===== peta gaya marketplace ===== */
main.market { grid-template-columns: minmax(440px, 50%) 1fr; }
#side.market { display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.mhead { flex: none; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); display: grid; gap: 9px; background: #fff; }
.mhead input[type=search] { padding: 10px 12px; font-size: 14px; }
.frow { display: grid; grid-template-columns: 1fr 1.2fr; gap: 8px; align-items: center; } .frow.rng { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.fgrp > label { margin: 0 0 3px; display: block; }
.fgrp .two input { padding: 6px 8px; font-size: 12.5px; }
.pre { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; } .pre button { font-size: 11px; padding: 2px 7px; background: #fff; border: 1px solid var(--line); border-radius: 10px; color: var(--mut); } .pre button:hover { border-color: var(--accent); color: var(--accent); }
.resbar { display: flex; align-items: center; gap: 12px; font-size: 12.5px; flex-wrap: wrap; } .resbar #resCount { flex: 1; color: var(--mut); min-width: 150px; } .resbar #resCount b { color: var(--ink); }
.resbar select { width: auto; padding: 5px 8px; font-size: 12.5px; } .resbar .chk { margin: 0; font-size: 12.5px; }
.mres { flex: 1; overflow-y: auto; padding: 12px 16px 24px; background: #fafaf7; }
.dashbox { background: #fff; border: 1px solid var(--line); margin-bottom: 12px; } .dashbox summary { padding: 8px 12px; cursor: pointer; font-size: 12.5px; font-weight: 600; } .dashbox > div { padding: 4px 12px 12px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pcard { background: #fff; border: 1px solid var(--line); cursor: pointer; transition: box-shadow .15s, border-color .15s; overflow: hidden; }
.pcard:hover, .pcard.hl { border-color: var(--accent); box-shadow: 0 4px 14px rgba(40,91,56,.18); } .pcard.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ph { aspect-ratio: 5/3; background-size: cover; background-position: center; position: relative; }
.av { position: absolute; left: 8px; top: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; color: #fff; border-radius: 2px; } .av.free { background: #2f7d4a; } .av.full { background: #1e2a22; } .av.end { background: #a88625; }
.kd { position: absolute; right: 8px; bottom: 8px; font-size: 11px; padding: 1px 7px; background: rgba(255,255,255,.92); border-radius: 2px; }
.pb { padding: 10px 12px 12px; } .pp { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; } .pp b { font-size: 17px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .pp span { font-size: 11.5px; color: var(--mut); }
.pb h4 { margin: 4px 0 1px; font-size: 13.5px; font-weight: 600; line-height: 1.3; } .pb .loc { margin: 0; font-size: 12px; color: var(--mut); } .pb .ar { margin: 6px 0 4px; font-size: 12.5px; }
.pb .sbar { margin: 4px 0 3px; } .pb .sm { margin: 0; font-size: 11.5px; } .pb .hit { margin: 6px 0 0; font-size: 12px; color: var(--accent); font-weight: 600; }
.none { grid-column: 1 / -1; text-align: center; padding: 40px 10px; color: var(--mut); } .none b { color: var(--ink); display: block; margin-bottom: 4px; }
.pricebox { margin: 10px 0 4px; padding: 8px 12px; background: #eaf1ea; border-left: 3px solid var(--accent); } .pricebox b { font-size: 19px; } .pricebox span { color: var(--mut); font-size: 12px; } .pricebox small { display: block; color: var(--mut); font-size: 11.5px; }
.mkp { background: none; border: 0; } .mkp .pill { position: absolute; transform: translate(-50%, -100%); margin-top: -4px; white-space: nowrap; font: 600 11.5px/1 var(--f); padding: 5px 8px; border-radius: 12px; border: 1px solid; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; transition: transform .12s; }
.mkp .pill::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px; background: inherit; border: inherit; border-top: 0; border-left: 0; transform: translateX(-50%) rotate(45deg); }
.pill.free { background: #2f7d4a; border-color: #1f5a33; color: #fff; } .pill.full { background: #fff; border-color: #1e2a22; color: #1e2a22; } .pill.end { background: #a88625; border-color: #7a5f12; color: #fff; }
.mkp.hl .pill, .mkp.sel .pill { transform: translate(-50%, -100%) scale(1.22); z-index: 5; box-shadow: 0 3px 10px rgba(0,0,0,.45); } .mkp.sel .pill { outline: 2px solid #111; }
.pillk { display: inline-block; width: 22px; height: 12px; border-radius: 6px; border: 1px solid; } .pillk.free { background: #2f7d4a; border-color: #1f5a33; } .pillk.full { background: #fff; border-color: #1e2a22; } .pillk.end { background: #a88625; border-color: #7a5f12; }
@media (max-width: 860px) { main.market { grid-template-columns: 1fr; grid-template-rows: 42vh 1fr; } .frow, .frow.rng { grid-template-columns: 1fr; } }
.brand { white-space: nowrap; } #mainnav { flex: 1 1 auto; min-width: 0; } .top .spacer { flex: 0; }

/* panel 1/3 layar + dapat ditutup */
main.market { grid-template-columns: minmax(360px, 33.333%) 1fr; }
main.market.collapsed { grid-template-columns: 0 1fr; } main.market.collapsed #side { display: none; }
.ptoggle { position: absolute; z-index: 650; left: 12px; top: 12px; background: #fff; border: 1px solid #b8bdb3; padding: 7px 12px; font-size: 12.5px; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.ptoggle:hover { border-color: var(--accent); color: var(--accent); }
.mhead { padding: 10px 12px 8px; gap: 7px; } .mhead input[type=search] { padding: 8px 10px; font-size: 13.5px; }
.frow { grid-template-columns: 1fr; } .frow.rng { grid-template-columns: 1fr 1fr; }
.adv > summary { cursor: pointer; font-size: 12.5px; color: var(--mut); padding: 2px 0 6px; } .adv[open] > summary { color: var(--ink); } .adv summary em { font-style: normal; color: var(--accent); font-weight: 600; }
.chips button { padding: 3px 7px; font-size: 11.5px; }
.cards { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; } .mres { padding: 10px 12px 20px; }
.pp b { font-size: 15px; } .pb { padding: 8px 10px 10px; }
.seg button { padding: 5px 4px; font-size: 12px; }
main.market.collapsed { grid-template-columns: 1fr; }