:root{
  --navy:#0b2f6b;--blue:#176bff;--blue2:#3d8dff;--cyan:#22c7df;--indigo:#5c56e8;
  --green:#17a673;--purple:#7b4de2;--ink:#16233f;--muted:#71809d;--line:#e4ebf5;
  --panel:#ffffff;--page:#f6f9fd;--shadow:0 18px 44px rgba(23,62,120,.09)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:'Roboto Condensed',sans-serif;color:var(--ink);background:#fff}.landing-dashboard{min-height:100vh;background:linear-gradient(180deg,#fff 0,#f8fbff 19%,#f5f8fc 100%)}
.landing-header{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:minmax(240px,340px) 1fr auto;align-items:center;gap:18px;min-height:84px;padding:12px clamp(18px,4vw,64px);background:rgba(255,255,255,.96);border-bottom:1px solid #e6edf7;backdrop-filter:blur(16px)}
.landing-brand{display:flex;align-items:center;min-width:0;height:58px}.landing-brand img{display:block;width:min(100%,330px);height:100%;object-fit:contain;object-position:left center}.header-meta{display:flex;justify-content:flex-end;align-items:center;gap:18px;color:#7b89a1;font-size:12px}.header-meta span{display:flex;align-items:center;gap:7px}.header-meta i,.landing-footer i{width:8px;height:8px;border-radius:50%;background:#19b873;box-shadow:0 0 0 5px rgba(25,184,115,.12)}.landing-entry{display:flex;align-items:center;gap:9px;padding:12px 18px;border-radius:12px;color:#fff;background:linear-gradient(135deg,#176bff,#254ed8);font-weight:800;text-decoration:none;box-shadow:0 10px 24px rgba(23,107,255,.25)}
.dashboard-shell{width:min(1540px,100%);margin:auto;padding:26px clamp(14px,3vw,44px) 34px}.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.page-heading span,.panel-head>div>span{font-size:11px;font-weight:900;letter-spacing:.14em;color:#4778bf}.page-heading h1{margin:5px 0 0;font-size:clamp(27px,3vw,42px);line-height:1.04}.heading-rate{min-width:170px;padding:13px 16px;border-radius:15px;background:#fff;border:1px solid var(--line);box-shadow:0 10px 26px rgba(31,72,130,.06);text-align:right}.heading-rate small{display:block;color:var(--muted);font-size:11px}.heading-rate strong{font-size:26px;color:var(--blue)}
.meter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.meter-card{position:relative;overflow:hidden;padding:18px 20px 16px;border-radius:24px;background:#fff;border:1px solid #e2eaf5;box-shadow:var(--shadow)}.meter-card:before{content:"";position:absolute;right:-90px;top:-115px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(39,124,255,.14),rgba(39,124,255,0) 68%)}.meter-equipment:before{background:radial-gradient(circle,rgba(105,76,232,.14),rgba(105,76,232,0) 68%)}.meter-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between}.meter-type{display:flex;align-items:center;gap:11px}.meter-type i{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#176bff,#28c8df);box-shadow:0 10px 22px rgba(23,107,255,.22)}.meter-equipment .meter-type i{background:linear-gradient(135deg,#7048e8,#2d79f5)}.meter-type b{font-size:clamp(19px,1.8vw,25px)}.meter-live{font-size:10px;font-weight:900;letter-spacing:.13em;color:#7d8ca8}.meter-live i{display:inline-block;width:8px;height:8px;margin-right:7px;border-radius:50%;background:#15b978;box-shadow:0 0 0 5px rgba(21,185,120,.12)}
.gauge-wrap{position:relative;width:min(100%,500px);margin:-5px auto -17px}.gauge{display:block;width:100%;overflow:visible}.gauge-track,.gauge-value{fill:none;stroke-width:25;stroke-linecap:round}.gauge-track{stroke:#edf2f8}.gauge-value{stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 6px 9px rgba(23,107,255,.24));transition:stroke-dashoffset 1.45s cubic-bezier(.2,.8,.2,1)}.ticks line{stroke:#c4d2e7;stroke-width:2}.needle{transform-origin:180px 185px;transform:rotate(-140deg);transition:transform 1.45s cubic-bezier(.2,.8,.2,1)}.needle line{stroke:#1f6af2;stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 4px 7px rgba(31,106,242,.27))}.meter-equipment .needle line{stroke:#654fe5}.needle circle:first-of-type{fill:#fff;stroke:#2477f4;stroke-width:8}.meter-equipment .needle circle:first-of-type{stroke:#654fe5}.needle circle:last-of-type{fill:#163a78}.gauge-readout{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);text-align:center}.gauge-readout strong{display:block;font-size:clamp(32px,4vw,54px);line-height:.95;color:#17315f}.gauge-readout small{font-size:10px;color:#8b99b1;letter-spacing:.1em}.meter-summary{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.meter-summary div{padding:11px 10px;border-radius:13px;background:#f7f9fd;border:1px solid #e9eef6}.meter-summary span{display:block;font-size:10px;color:#7d8da8}.meter-summary strong{display:block;margin-top:4px;font-size:clamp(16px,1.6vw,21px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1a3159}
.kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:13px;margin:18px 0}.kpi-card{display:flex;align-items:center;gap:12px;min-width:0;padding:15px;border-radius:17px;background:#fff;border:1px solid var(--line);box-shadow:0 11px 27px rgba(31,72,130,.055)}.kpi-icon{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;border-radius:13px;color:#fff;font-size:19px}.kpi-icon.blue{background:linear-gradient(135deg,#176bff,#4b95ff)}.kpi-icon.cyan{background:linear-gradient(135deg,#14a8c2,#31d2e8)}.kpi-icon.indigo{background:linear-gradient(135deg,#4d54de,#7776f2)}.kpi-icon.green{background:linear-gradient(135deg,#13966a,#29c38d)}.kpi-icon.purple{background:linear-gradient(135deg,#7945da,#a16bf2)}.kpi-icon.navy{background:linear-gradient(135deg,#0d326e,#245da5)}.kpi-card div{min-width:0}.kpi-card small,.kpi-card span{display:block;color:#7d8ca7;font-size:10px}.kpi-card strong{display:block;margin:2px 0;font-size:clamp(20px,2vw,27px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wide-value{grid-column:span 1}
.analytics-grid,.detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.75fr);gap:16px;margin-bottom:16px}.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{min-width:0;padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:0 13px 32px rgba(31,72,130,.06)}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:14px}.panel-head h2{margin:4px 0 0;font-size:21px}.panel-head a{color:#2465d5;text-decoration:none;font-weight:800;font-size:12px}.chart-legend{display:flex;gap:14px;color:#72809a;font-size:11px}.chart-legend span:before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%}.building-dot:before{background:#176bff}.equipment-dot:before{background:#7152e5}.canvas-wrap{height:265px}.canvas-wrap canvas{width:100%;height:100%}.donut-layout{display:grid;grid-template-columns:minmax(170px,230px) 1fr;align-items:center;gap:12px}.donut-layout canvas{width:100%;height:auto}.donut-legend{display:grid;gap:8px}.donut-legend div{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:8px;color:#6d7c97;font-size:11px}.donut-legend i{width:9px;height:9px;border-radius:50%}.donut-legend div:nth-child(1) i{background:#aab5c8}.donut-legend div:nth-child(2) i{background:#2c82f6}.donut-legend div:nth-child(3) i{background:#6c55dc}.donut-legend div:nth-child(4) i{background:#19ac78}.donut-legend div:nth-child(5) i{background:#e06377}.donut-legend strong{color:#17315c;font-size:13px}
.bar-list{display:grid;gap:13px}.bar-item>div:first-child{display:flex;justify-content:space-between;margin-bottom:6px;font-size:11px;color:#657590}.bar-item strong{color:#20375f}.bar-track{height:10px;border-radius:999px;background:#edf2f8;overflow:hidden}.bar-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#176bff,#27c7df);transition:width 1.1s ease}.bar-list.is-visible .bar-track i{width:var(--bar-width)}.method-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.method-list>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:13px;background:#f8fafd;border:1px solid #e9eef6}.method-name{display:flex;align-items:center;gap:8px;color:#586983;font-size:11px}.method-name i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:#fff;background:linear-gradient(135deg,#2c72ee,#33b9d8)}.method-list strong{font-size:18px;color:#18335f}
.table-panel{margin-bottom:8px}.table-scroll{overflow-x:auto;border:1px solid #e5ebf4;border-radius:14px}.landing-table{width:100%;min-width:1080px;border-collapse:collapse}.landing-table th{padding:11px 12px;background:#f3f6fb;color:#70809b;font-size:10px;text-align:left;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}.landing-table td{padding:12px;border-top:1px solid #edf1f6;color:#40516e;font-size:11px;vertical-align:middle}.landing-table tbody tr:hover td{background:#fafcff}.object-cell{display:flex;align-items:center;gap:9px}.object-cell>i{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;color:#176bff;background:#eaf2ff}.object-cell span{min-width:0}.object-cell strong,.object-cell small,.cell-sub{display:block}.object-cell small,.cell-sub{margin-top:3px;color:#8a97ab;font-size:10px}.category-badge,.status-badge{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border-radius:999px;font-weight:800;font-size:10px;white-space:nowrap}.category-badge.building{color:#145ac8;background:#e9f2ff}.category-badge.equipment{color:#6540cb;background:#f0eaff}.status-badge.success{color:#10865e;background:#e7f8f1}.status-badge.approved{color:#5b43ca;background:#eeeafe}.status-badge.process{color:#1263d8;background:#e8f1ff}.status-badge.danger{color:#c34358;background:#fdecef}.status-badge.muted{color:#71809a;background:#eef2f6}.table-empty{display:grid;place-items:center;gap:6px;padding:30px;color:#8a98ad}.table-empty i{font-size:26px}.landing-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:12px clamp(18px,4vw,64px);border-top:1px solid #e5ebf4;color:#7d8ba3;font-size:11px;background:#fff}.landing-footer span:first-child{display:flex;align-items:center;gap:9px}
@media(max-width:1250px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.analytics-grid{grid-template-columns:1.35fr .85fr}}
@media(max-width:960px){.landing-header{grid-template-columns:1fr auto}.header-meta{display:none}.meter-grid,.analytics-grid,.detail-grid{grid-template-columns:1fr}.meter-card{max-width:760px;width:100%;margin:auto}.donut-layout{grid-template-columns:220px 1fr}.canvas-wrap{height:250px}}
@media(max-width:680px){.landing-header{min-height:72px;padding:8px 12px}.landing-brand{height:50px}.landing-entry{padding:11px 13px}.landing-entry span{display:none}.dashboard-shell{padding:18px 10px 26px}.page-heading{align-items:flex-start}.heading-rate{min-width:112px;padding:10px}.heading-rate strong{font-size:22px}.meter-card{padding:15px 12px;border-radius:18px}.gauge-wrap{margin:-10px auto -20px}.meter-summary{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kpi-card{padding:12px 10px}.kpi-icon{width:38px;height:38px;flex-basis:38px}.analytics-grid,.detail-grid{gap:10px}.panel{padding:14px;border-radius:16px}.canvas-wrap{height:220px}.donut-layout{grid-template-columns:1fr}.donut-layout canvas{max-width:210px;margin:auto}.method-list{grid-template-columns:1fr}.landing-footer{flex-direction:column;align-items:flex-start;padding:10px 12px}}
@media(max-width:430px){.page-heading{display:block}.heading-rate{margin-top:10px;text-align:left}.kpi-grid{grid-template-columns:1fr}.chart-legend{display:none}}

/* TABS LANDING */
.landing-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 18px;border:1px solid #dfe6f1;border-radius:15px;background:#eef1f5;box-shadow:0 8px 22px rgba(20,54,105,.09);overflow:visible}.landing-tab{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 14px;border:0;border-right:1px solid #d7dee9;background:transparent;color:#8793a7;font-family:inherit;font-size:12px;font-weight:900;cursor:pointer}.landing-tab:first-child{border-radius:14px 0 0 14px}.landing-tab:last-child{border-right:0;border-radius:0 14px 14px 0}.landing-tab i{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.72);font-size:15px}.landing-tab b{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;border-radius:999px;background:#fff;color:#6c7890;font-size:10px}.landing-tab.is-active{z-index:2;color:#fff;background:linear-gradient(135deg,#176bff,#1e8df1);box-shadow:0 10px 24px rgba(23,107,255,.25)}.landing-tab.is-active:after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);border-left:11px solid transparent;border-right:11px solid transparent;border-top:10px solid #1d83f3}.landing-tab.is-active i,.landing-tab.is-active b{color:#fff;background:rgba(255,255,255,.18)}.landing-tab-panel{animation:tabIn .22s ease}.landing-tab-panel[hidden]{display:none!important}@keyframes tabIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.speedometer-panel{margin-bottom:16px;padding:18px}.speedometer-panel>.panel-head{margin-bottom:6px}.speedometer-panel .meter-grid{gap:0;border:1px solid #e5ebf4;border-radius:18px;overflow:hidden}.speedometer-panel .meter-card{border:0;border-radius:0;box-shadow:none;padding:16px 20px;background:linear-gradient(180deg,#fff,#fbfdff)}.speedometer-panel .meter-card+ .meter-card{border-left:1px solid #e5ebf4}.speedometer-panel .meter-card:before{display:none}.process-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.process-step{position:relative;display:flex;align-items:center;gap:12px;min-height:104px;padding:15px;border:1px solid #e4ebf5;border-radius:15px;background:linear-gradient(145deg,#fff,#f7faff);overflow:hidden}.process-step>i{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:13px;color:#fff;background:linear-gradient(135deg,#176bff,#25bfdc);font-size:18px}.process-number{position:absolute;right:10px;top:7px;color:#e6ecf5;font-size:30px;font-weight:900}.process-step div{position:relative;z-index:1}.process-step small{color:#8a97ab;font-size:9px}.process-step h3{margin:3px 0 6px;font-size:15px}.process-step strong{color:#176bff;font-size:12px}
@media(max-width:900px){.landing-tabs{display:flex;overflow-x:auto}.landing-tab{flex:0 0 210px}.speedometer-panel .meter-grid{grid-template-columns:1fr}.speedometer-panel .meter-card+ .meter-card{border-left:0;border-top:1px solid #e5ebf4}.process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.landing-tab{flex-basis:175px;padding:9px 10px}.landing-tab span{white-space:nowrap}.speedometer-panel{padding:12px}.process-grid{grid-template-columns:1fr}}

/* SPEEDOMETER HALF GAUGE V4 */
.meter-grid-modern{gap:16px!important}.meter-grid-modern .meter-card{padding:18px 18px 15px!important;background:#fff!important}.meter-head{gap:12px}.meter-type span{display:flex;flex-direction:column}.meter-type small{font-size:9px;color:#8b98ad;font-weight:800;letter-spacing:.12em}.meter-score{display:flex;align-items:flex-end;gap:5px;padding:8px 11px;border-radius:12px;background:#f2f7ff}.meter-score b{font-size:22px;color:#165fe5}.meter-score small{font-size:10px;color:#7b8aa4;margin-bottom:3px}.meter-content{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(180px,.65fr);align-items:center;gap:14px}.gauge-half{width:100%;max-width:470px;margin:-4px auto -8px}.gauge-base,.gauge-zone,.gauge-value{fill:none;stroke-linecap:butt}.gauge-base{stroke:#edf2f8;stroke-width:48}.gauge-zone{stroke-width:42}.gauge-zone.zone-one{stroke:#7ee3ed;stroke-dasharray:31 69}.gauge-zone.zone-two{stroke:#2a95f7;stroke-dasharray:31 69;stroke-dashoffset:-34.5}.gauge-zone.zone-three{stroke:#2149c8;stroke-dasharray:31 69;stroke-dashoffset:-69}.meter-equipment .gauge-zone.zone-one{stroke:#8fdaf2}.meter-equipment .gauge-zone.zone-two{stroke:#5879ef}.meter-equipment .gauge-zone.zone-three{stroke:#653cc9}.gauge-value{stroke:#fff;stroke-width:7;stroke-dasharray:100;stroke-dashoffset:100;filter:drop-shadow(0 2px 4px rgba(15,78,174,.3));transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1)}.gauge-scale text{font:800 12px 'Roboto Condensed';fill:#7890b1;text-anchor:middle}.gauge-zones-label text{font:900 9px 'Roboto Condensed';fill:#fff;text-anchor:middle;letter-spacing:.08em}.needle{transform-origin:210px 220px;transform:rotate(-90deg);transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}.needle polygon{fill:#30476d}.needle circle:first-of-type{fill:#fff;stroke:#dce5f1;stroke-width:7}.needle circle:last-of-type{fill:#244d96}.gauge-readout{bottom:21px}.gauge-readout small{display:block;font-size:9px}.gauge-readout strong{font-size:42px;color:#17315f;line-height:1}.gauge-readout strong em{font-style:normal;font-size:20px;color:#2b77ed}.gauge-readout>span{display:block;margin-top:3px;font-size:10px;color:#8a98ad}.meter-progress-list{display:grid;gap:15px;padding:10px 5px}.progress-row{display:grid;grid-template-columns:30px 1fr;gap:9px;align-items:center}.progress-no{font-size:20px;font-weight:900;color:#48566d}.progress-info>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.progress-info b{font-size:11px;color:#52647e}.progress-info strong{font-size:11px;color:#1b5bc7}.progress-track{position:relative;height:11px;border-radius:999px;background:#edf2f8;overflow:visible}.progress-track i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#89e5ee,#17a9be);transition:width 1.25s cubic-bezier(.2,.8,.2,1)}.progress-track.blue i{background:linear-gradient(90deg,#62b7ff,#2079f2)}.progress-track.indigo i{background:linear-gradient(90deg,#8f83f2,#5941c7)}.progress-track span{position:absolute;top:50%;left:0;width:13px;height:13px;border:3px solid #fff;border-radius:50%;background:#158fa4;box-shadow:0 2px 7px rgba(31,75,145,.28);transform:translate(-50%,-50%);transition:left 1.25s cubic-bezier(.2,.8,.2,1)}.progress-track.blue span{background:#1f6fe8}.progress-track.indigo span{background:#5b42c8}
@media(max-width:1120px){.meter-content{grid-template-columns:1fr}.meter-progress-list{grid-template-columns:repeat(3,minmax(0,1fr));padding:0 4px 8px}.progress-row{grid-template-columns:26px 1fr}.progress-no{font-size:17px}}
@media(max-width:720px){.meter-progress-list{grid-template-columns:1fr;gap:11px}.gauge-half{max-width:390px}.gauge-readout strong{font-size:34px}.meter-score{padding:7px 9px}.meter-score b{font-size:18px}}


/* KPI CARD REFERENCE — segmented blue dashboard */
.kpi-grid-reference{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:20px 0 18px;border:1px solid #dce7f5;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 15px 36px rgba(27,74,140,.12)}
.kpi-grid-reference .kpi-card-reference{display:block;min-width:0;padding:0;border:0;border-radius:0;background:#fff;box-shadow:none;overflow:hidden}
.kpi-grid-reference .kpi-card-reference+.kpi-card-reference{border-left:1px solid #d8e4f2}
.kpi-card-head{display:flex;align-items:center;gap:14px;min-height:82px;padding:18px 20px;color:#fff;background:linear-gradient(135deg,#2b63ce,#2857bd)}
.tone-process .kpi-card-head{background:linear-gradient(135deg,#4380ec,#4c8ef0)}
.tone-finish .kpi-card-head{background:linear-gradient(135deg,#48a7ed,#43a8e8)}
.tone-value .kpi-card-head{background:linear-gradient(135deg,#24539d,#21498c)}
.kpi-head-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border:2px solid rgba(255,255,255,.22);border-radius:14px;background:rgba(255,255,255,.08);font-size:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.kpi-card-head>strong{font-size:clamp(18px,1.7vw,25px);font-weight:900;letter-spacing:.015em;white-space:nowrap}
.kpi-card-body{display:flex;align-items:center;gap:18px;min-height:142px;padding:24px 22px;background:linear-gradient(180deg,#fff,#fbfdff)}
.kpi-body-icon{display:grid;place-items:center;flex:0 0 62px;width:62px;height:62px;border:2px solid #d4e2f7;border-radius:50%;color:#2b66ce;background:#f4f8ff;font-size:29px;box-shadow:inset 0 0 18px rgba(55,114,205,.06)}
.tone-process .kpi-body-icon,.tone-finish .kpi-body-icon{color:#3d9deb;border-color:#d7ebfa;background:#f4fbff}
.tone-value .kpi-body-icon{color:#2b5fbb;border-color:#d2dff3;background:#f5f8ff}
.kpi-rupiah-icon{font-size:22px;font-weight:900}
.kpi-card-body>div{min-width:0}
.kpi-card-body strong{display:block;margin:0;color:#082b65;font-size:clamp(38px,4vw,58px);font-weight:900;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-card-body .kpi-value-text{font-size:clamp(28px,3.2vw,48px)}
.kpi-card-body small{display:block;margin-top:8px;color:#788aa5;font-size:11px;font-weight:700}
@media(max-width:1050px){.kpi-grid-reference{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}.kpi-grid-reference .kpi-card-reference:nth-child(3){border-left:0;border-top:1px solid #d8e4f2}.kpi-grid-reference .kpi-card-reference:nth-child(4){border-top:1px solid #d8e4f2}}
@media(max-width:620px){.kpi-grid-reference{grid-template-columns:1fr;border-radius:18px}.kpi-grid-reference .kpi-card-reference+.kpi-card-reference{border-left:0;border-top:1px solid #d8e4f2}.kpi-card-head{min-height:68px;padding:13px 16px}.kpi-head-icon{width:42px;height:42px;flex-basis:42px;font-size:20px}.kpi-card-body{min-height:112px;padding:20px 18px}.kpi-body-icon{width:56px;height:56px;flex-basis:56px}.kpi-card-body strong{font-size:42px}.kpi-card-body .kpi-value-text{font-size:34px}}


/* KPI ICON FIX v6 — center Bootstrap Icons inside square/circle frames */
.kpi-head-icon,.kpi-body-icon{position:relative;overflow:hidden;isolation:isolate;padding:0!important;line-height:1!important}
.kpi-head-icon{color:#fff!important;font-size:25px!important}
.kpi-body-icon{font-size:30px!important}
.kpi-head-icon>.bi,.kpi-body-icon>.bi{display:flex!important;align-items:center!important;justify-content:center!important;position:static!important;inset:auto!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;color:inherit!important;font-size:inherit!important;line-height:1!important;transform:none!important}.kpi-head-icon>.bi,.kpi-head-icon>.bi::before{color:#fff!important;opacity:1!important}
.kpi-head-icon>.bi::before,.kpi-body-icon>.bi::before{display:block!important;position:static!important;inset:auto!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;font-family:"bootstrap-icons"!important;font-size:inherit!important;font-style:normal!important;font-weight:400!important;line-height:1!important;vertical-align:0!important;transform:none!important}
.kpi-head-icon>.bi::after,.kpi-body-icon>.bi::after{display:none!important}
@media(max-width:620px){.kpi-head-icon{font-size:22px!important}.kpi-body-icon{font-size:27px!important}}

/* =========================================================
   FOOTER MISTER BONGKAR
   ========================================================= */
.landing-footer {
    width: 100%;
    padding: 18px 20px;
    margin: 0 auto;
    background: #ffffff;
    border-top: 1px solid #e5edf8;

    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;

    text-align: center !important;
    font-family: "Roboto Condensed", sans-serif;
    box-sizing: border-box;
}

.landing-footer .footer-version,
.landing-footer .footer-copyright {
    width: 100%;
    margin: 0 auto;
    text-align: center !important;

    display: flex;
    align-items: center;
    justify-content: center !important;
    flex-wrap: wrap;
}

.landing-footer .footer-version {
    gap: 8px;
    color: #1e4f9d;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.landing-footer .footer-version i {
    font-size: 14px;
    color: #2563eb; /* warna perisai */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.landing-footer .footer-copyright {
    color: #64748b;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
}

/* Mobile */
@media (max-width: 768px) {
    .landing-footer {
        padding: 16px 14px;
        gap: 6px;
    }

    .landing-footer .footer-version,
    .landing-footer .footer-copyright {
        justify-content: center !important;
        text-align: center !important;
        align-items: center !important;
    }

    .landing-footer .footer-version {
        font-size: 15px;
    }

    .landing-footer .footer-copyright {
        font-size: 13px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .landing-footer {
        padding: 14px 12px;
    }

    .landing-footer .footer-version {
        font-size: 14px;
    }

    .landing-footer .footer-version i {
        font-size: 13px;
    }

    .landing-footer .footer-copyright {
        font-size: 12px;
        line-height: 1.5;
    }
}

/* =========================================================
   FOOTER MISTER BONGKAR
   ========================================================= */
.landing-footer {
    width: 100%;
    min-height: 76px;
    margin: 0;
    padding: 18px 24px;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px;

    text-align: center !important;
    font-family: "Roboto Condensed", sans-serif;
    color: #64748b;
    background: #ffffff;
    border-top: 1px solid #e5edf8;
    box-sizing: border-box;
}

.landing-footer > span {
    width: 100% !important;
    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    line-height: 1.4;
}

.landing-footer .footer-version {
    gap: 8px;
    color: #1e4f9d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.25px;
}

.landing-footer .footer-version i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    color: #2563eb !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;

    font-size: 14px;
    line-height: 1;
}

.landing-footer .footer-copyright {
    color: #718096;
    font-size: 12px;
    font-weight: 500;
}

/* =========================================================
   MOBILE BOTTOM NAVIGATION
   ========================================================= */
.mobile-bottom-nav {
    display: none;
}

/* HP, smartphone, dan tablet */
@media (max-width: 991.98px) {

    body {
        padding-bottom: calc(112px + env(safe-area-inset-bottom));
    }

    .landing-footer {
        min-height: 92px;
        padding: 16px 14px;
        margin-bottom: 0;

        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .landing-footer > span,
    .landing-footer .footer-version,
    .landing-footer .footer-copyright {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;

        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .landing-footer .footer-version {
        font-size: 12px;
    }

    .landing-footer .footer-copyright {
        padding: 0 10px;
        font-size: 11px;
        line-height: 1.5;
    }

    .mobile-bottom-nav {
        position: fixed;
        z-index: 9999;
        left: 50%;
        bottom: 10px;

        width: calc(100% - 24px);
        max-width: 720px;
        min-height: 88px;

        padding:
            8px
            10px
            calc(8px + env(safe-area-inset-bottom));

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        gap: 4px;

        background: rgba(255, 255, 255, 0.97);
        border: 1px solid rgba(219, 229, 243, 0.95);
        border-radius: 28px;

        box-shadow:
            0 18px 45px rgba(19, 54, 107, 0.18),
            0 4px 14px rgba(19, 54, 107, 0.08);

        transform: translateX(-50%);
        box-sizing: border-box;
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-nav-item {
        position: relative;
        min-width: 0;
        min-height: 72px;
        padding: 9px 4px 7px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;

        color: #6f7c93;
        text-align: center;
        text-decoration: none;

        border-radius: 22px;
        transition:
            background-color 0.2s ease,
            color 0.2s ease,
            transform 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-nav-item:hover,
    .mobile-nav-item:focus {
        color: #175dc7;
        text-decoration: none;
    }

    .mobile-nav-item:active {
        transform: scale(0.96);
    }

    .mobile-nav-icon {
        width: 34px;
        height: 34px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-nav-icon i {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        color: currentColor;
        font-size: 29px;
        line-height: 1;
    }

    .mobile-nav-label {
        display: block;
        max-width: 100%;

        color: currentColor;
        font-family: "Roboto Condensed", sans-serif;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.1;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-nav-item.is-active {
        color: #1261cc;
        background: linear-gradient(
            145deg,
            #edf5ff 0%,
            #e4efff 100%
        );
    }

    .mobile-nav-item.is-active .mobile-nav-icon i {
        color: #1261cc;
    }
}

/* Smartphone kecil */
@media (max-width: 480px) {

    body {
        padding-bottom: calc(102px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        bottom: 7px;
        width: calc(100% - 14px);
        min-height: 82px;
        padding:
            6px
            5px
            calc(6px + env(safe-area-inset-bottom));
        gap: 1px;
        border-radius: 24px;
    }

    .mobile-nav-item {
        min-height: 68px;
        padding: 8px 2px 6px;
        gap: 5px;
        border-radius: 19px;
    }

    .mobile-nav-icon {
        width: 30px;
        height: 30px;
    }

    .mobile-nav-icon i {
        font-size: 25px;
    }

    .mobile-nav-label {
        font-size: 11.5px;
    }

    .landing-footer {
        padding: 14px 10px;
    }

    .landing-footer .footer-copyright {
        padding: 0 4px;
        font-size: 10.5px;
    }
}

/* Layar sangat kecil */
@media (max-width: 360px) {

    .mobile-nav-icon i {
        font-size: 23px;
    }

    .mobile-nav-label {
        font-size: 10.5px;
    }
}

/* Navigasi disembunyikan ketika dicetak */
@media print {
    .mobile-bottom-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}