/* =========================================================
   TRACKSPACE CSS MERGED & DEDUPLICATED
   Sumber: Teks yang ditempel (1)(925).txt + Teks yang ditempel (2)(54).txt
   - Hanya rule identik yang dihapus.
   - Override dengan isi berbeda tetap dipertahankan agar cascade/rule lama tidak berubah.
   - Patch terakhir hanya memperbaiki tampilan dan keterlihatan gambar hero smartphone.
   ========================================================= */


.finance-chart-shell {
            background: rgba(255, 255, 255, .97) !important;
            border: 1px solid rgba(31, 92, 211, .14) !important;
            border-radius: 24px;
            box-shadow: 0 20px 48px rgba(10, 32, 91, .12);
        }

        .finance-chart-shell canvas {
            color: #112b6f;
        }

        .finance-tab-panel h3,
        .finance-tab-stat strong,
        .finance-tab-stat small,
        .finance-expense-row strong,
        .finance-expense-row span {
            color: #112b6f !important;
        }

        .finance-tab-heading h3,
        .finance-tab-heading p,
        .finance-monitor-titlebar h2,
        .finance-monitor-titlebar p {
            color: #112b6f !important;
        }

        .finance-tab-badge {
            color: #ffffff !important;
            background: linear-gradient(135deg, #1f5ed8, #112b6f) !important;
            box-shadow: 0 12px 26px rgba(31, 94, 216, .22);
        }

        /* === RESPONSIVE FIX: header, hero, card, tab, dan grafik tetap elegan di tablet/HP === */
        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
            -webkit-text-size-adjust: 100%;
        }

        .finance-landing-page {
            font-family: "Roboto Condensed", system-ui, sans-serif !important;
        }

        .finance-hero-shell {
            width: 100%;
            min-height: auto !important;
            padding: 22px clamp(14px, 4vw, 46px) 70px !important;
            overflow: hidden;
        }

        .finance-navbar {
            width: min(1120px, 100%) !important;
            max-width: 1120px !important;
            margin: 0 auto clamp(30px, 5vw, 62px) !important;
            padding: clamp(14px, 2vw, 22px) clamp(18px, 4vw, 42px) !important;
            min-height: unset !important;
            display: flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            border-radius: 0 !important;
            box-sizing: border-box !important;
        }

        .finance-logo-stack.finance-logo-wordmark {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: flex-start !important;
            gap: 10px !important;
            width: auto !important;
            min-width: 0 !important;
            text-decoration: none !important;
        }

        .finance-logo-arrow {
            width: clamp(34px, 4vw, 44px) !important;
            height: clamp(34px, 4vw, 44px) !important;
            flex: 0 0 clamp(34px, 4vw, 44px) !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .finance-logo-text {
            font-size: clamp(1.75rem, 4vw, 2.65rem) !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        .finance-hero-grid {
            width: min(1120px, 100%) !important;
            max-width: 1120px !important;
            margin: 0 auto !important;
            display: grid !important;
            grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr) !important;
            align-items: center !important;
            gap: clamp(28px, 5vw, 62px) !important;
        }

        .finance-hero-copy {
            min-width: 0 !important;
            width: 100% !important;
        }

        .finance-kicker {
            width: fit-content !important;
            max-width: 100% !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
        }

        .finance-hero-copy h1 {
            max-width: 760px !important;
            margin-top: clamp(20px, 3vw, 30px) !important;
            font-size: clamp(2.65rem, 5.8vw, 4.95rem) !important;
            line-height: .98 !important;
            letter-spacing: -0.06em !important;
            text-wrap: balance;
            overflow-wrap: break-word;
        }

        .finance-period-form {
            width: min(610px, 100%) !important;
            display: flex !important;
            align-items: end !important;
            gap: 12px !important;
            flex-wrap: nowrap !important;
            box-sizing: border-box !important;
        }

        .finance-period-form .flex-grow-1 {
            min-width: 0 !important;
        }

        .finance-period-form .form-control,
        .finance-period-form .form-select {
            min-width: 0 !important;
            width: 100% !important;
        }

        .finance-period-form .btn {
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }

        .finance-actions {
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
            flex-wrap: wrap !important;
        }

        .finance-primary,
        .finance-secondary {
            white-space: nowrap !important;
        }

        .finance-hero-visual-card,
        .finance-hero-kas-card,
        .finance-dashboard-preview {
            width: 100% !important;
            max-width: 520px !important;
            justify-self: end !important;
            box-sizing: border-box !important;
        }

        .finance-preview-header {
            display: flex !important;
            align-items: flex-start !important;
            justify-content: space-between !important;
            gap: 14px !important;
            flex-wrap: wrap !important;
        }

        .finance-preview-badges {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 10px !important;
            flex-wrap: wrap !important;
        }

        .finance-card-grid {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 12px !important;
        }

        .finance-stat-card {
            min-width: 0 !important;
            overflow: hidden !important;
        }

        .finance-stat-card .number,
        .finance-tab-stat strong {
            overflow-wrap: anywhere !important;
        }

        .finance-month-ribbon {
            max-width: calc(100% - 28px) !important;
            white-space: nowrap !important;
        }

        .finance-ribbon {
            display: none !important;
        }

        .finance-monitor-section {
            width: 100% !important;
            padding: clamp(28px, 5vw, 64px) clamp(14px, 4vw, 46px) !important;
            overflow: hidden !important;
        }

        .finance-monitor-card {
            width: min(1120px, 100%) !important;
            max-width: 1120px !important;
            margin: 0 auto !important;
            box-sizing: border-box !important;
        }

        .finance-monitor-titlebar {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 18px !important;
            flex-wrap: wrap !important;
        }

        .finance-title-left {
            min-width: 0 !important;
        }

        .finance-monitor-filter {
            width: min(360px, 100%) !important;
            flex: 0 1 360px !important;
        }

        .finance-monitor-select {
            display: flex !important;
            gap: 8px !important;
        }

        .finance-monitor-tabs {
            width: 100% !important;
            display: flex !important;
            flex-wrap: nowrap !important;
            overflow-x: auto !important;
            overflow-y: hidden !important;
            gap: 10px !important;
            padding: 0 2px 8px !important;
            scrollbar-width: thin;
            -webkit-overflow-scrolling: touch;
        }

        .finance-monitor-tabs .nav-item {
            flex: 0 0 auto !important;
        }

        .finance-monitor-tabs .nav-link {
            min-width: clamp(150px, 24vw, 230px) !important;
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            gap: 10px !important;
            white-space: nowrap !important;
        }

        .finance-tab-content,
        .finance-tab-panel {
            width: 100% !important;
            min-width: 0 !important;
            box-sizing: border-box !important;
        }

        .finance-tab-header {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 14px !important;
            flex-wrap: wrap !important;
        }

        .finance-tab-heading {
            min-width: 0 !important;
        }

        .finance-tab-stat-grid,
        .finance-cash-card-grid {
            display: grid !important;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
            gap: 14px !important;
        }

        .finance-chart-shell {
            width: 100% !important;
            min-height: clamp(300px, 48vw, 430px) !important;
            overflow: hidden !important;
        }

        .finance-chart-shell.doughnut {
            min-height: clamp(280px, 48vw, 380px) !important;
        }

        .finance-expense-grid {
            display: grid !important;
            grid-template-columns: minmax(260px, .9fr) minmax(260px, 1fr) !important;
            gap: 18px !important;
            align-items: stretch !important;
        }

        .finance-expense-list {
            min-width: 0 !important;
        }

        @media (max-width: 1199.98px) {
            .finance-hero-grid {
                grid-template-columns: minmax(0, 1fr) minmax(330px, .9fr) !important;
                gap: 34px !important;
            }

            .finance-hero-copy h1 {
                font-size: clamp(2.45rem, 5vw, 4.2rem) !important;
            }

            .finance-dashboard-preview {
                max-width: 500px !important;
            }
        }

        @media (max-width: 991.98px) {
            .finance-hero-shell {
                padding-top: 16px !important;
            }

            .finance-navbar {
                margin-bottom: 34px !important;
                justify-content: center !important;
                padding: 15px 20px !important;
            }

            .finance-logo-text {
                font-size: clamp(1.85rem, 6vw, 2.45rem) !important;
            }

            .finance-hero-grid {
                grid-template-columns: 1fr !important;
                text-align: center !important;
                gap: 34px !important;
            }

            .finance-hero-copy {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }

            .finance-kicker {
                justify-content: center !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            .finance-hero-copy h1 {
                max-width: 720px !important;
                text-align: center !important;
                font-size: clamp(2.5rem, 8vw, 4.4rem) !important;
            }

            .finance-period-form {
                margin-left: auto !important;
                margin-right: auto !important;
            }

            .finance-actions {
                justify-content: center !important;
            }

            .finance-dashboard-preview,
            .finance-hero-kas-card {
                justify-self: center !important;
                max-width: 640px !important;
                margin: 0 auto !important;
            }

            .finance-month-ribbon {
                position: static !important;
                margin: 0 0 14px !important;
                width: fit-content !important;
            }

            .finance-preview-header {
                align-items: center !important;
            }

            .finance-preview-badges {
                justify-content: flex-start !important;
            }

            .finance-monitor-titlebar {
                align-items: flex-start !important;
            }

            .finance-monitor-filter {
                width: 100% !important;
                flex-basis: 100% !important;
            }

            .finance-expense-grid {
                grid-template-columns: 1fr !important;
            }
        }

        @media (max-width: 767.98px) {
            .finance-hero-shell {
                padding-left: 14px !important;
                padding-right: 14px !important;
            }

            .finance-navbar {
                width: 100% !important;
                margin-bottom: 28px !important;
                border-radius: 0 !important;
            }

            .finance-logo-arrow {
                width: 36px !important;
                height: 36px !important;
                flex-basis: 36px !important;
            }

            .finance-logo-text {
                font-size: 2rem !important;
            }

            .finance-hero-copy h1 {
                font-size: clamp(2.15rem, 11vw, 3.45rem) !important;
                line-height: 1 !important;
                letter-spacing: -0.05em !important;
                max-width: 100% !important;
            }

            .finance-period-form {
                flex-direction: column !important;
                align-items: stretch !important;
                width: 100% !important;
                max-width: 520px !important;
                padding: 12px !important;
            }

            .finance-period-form .btn {
                width: 100% !important;
                justify-content: center !important;
            }

            .finance-actions {
                width: 100% !important;
                max-width: 520px !important;
            }

            .finance-primary,
            .finance-secondary {
                flex: 1 1 100% !important;
                justify-content: center !important;
                text-align: center !important;
            }

            .finance-card-grid {
                grid-template-columns: 1fr !important;
            }

            .finance-preview-header {
                flex-direction: column !important;
                align-items: stretch !important;
                text-align: left !important;
            }

            .finance-preview-badges {
                width: 100% !important;
                justify-content: flex-start !important;
            }

            .finance-status-pill,
            .finance-transaction-pill {
                flex: 1 1 auto !important;
                justify-content: center !important;
                min-width: 0 !important;
                text-align: center !important;
            }

            .finance-monitor-section {
                padding-left: 12px !important;
                padding-right: 12px !important;
            }

            .finance-monitor-card {
                border-radius: 28px !important;
            }

            .finance-title-left {
                align-items: flex-start !important;
                text-align: left !important;
            }

            .finance-monitor-titlebar h2 {
                font-size: clamp(1.6rem, 8vw, 2.25rem) !important;
            }

            .finance-monitor-tabs {
                margin-left: -2px !important;
                margin-right: -2px !important;
            }

            .finance-monitor-tabs .nav-link {
                min-width: 168px !important;
                padding: 13px 14px !important;
            }

            .finance-tab-panel {
                padding-left: clamp(14px, 4vw, 22px) !important;
                padding-right: clamp(14px, 4vw, 22px) !important;
            }

            .finance-tab-stat-grid,
            .finance-cash-card-grid {
                grid-template-columns: 1fr !important;
            }

            .finance-chart-shell {
                min-height: 320px !important;
                padding: 8px !important;
            }
        }

        @media (max-width: 420px) {
            .finance-logo-text {
                font-size: 1.75rem !important;
            }

            .finance-hero-copy h1 {
                font-size: clamp(1.95rem, 12vw, 2.85rem) !important;
            }

            .finance-kicker {
                font-size: .82rem !important;
            }

            .finance-monitor-tabs .nav-link {
                min-width: 150px !important;
            }

            .finance-status-pill,
            .finance-transaction-pill,
            .finance-month-ribbon {
                width: 100% !important;
            }
        }


        /* === DAFTAR TRANSAKSI LANDING PAGE === */
        .finance-transaction-section {
            width: 100%;
            margin-top: clamp(22px, 4vw, 36px);
            padding-top: clamp(20px, 3vw, 32px);
            border-top: 1px solid rgba(31, 94, 216, .12);
        }

        .finance-transaction-card {
            width: 100%;
            overflow: hidden;
            border-radius: 28px;
            background: rgba(255, 255, 255, .98);
            border: 1px solid rgba(31, 94, 216, .14);
            box-shadow: 0 22px 54px rgba(10, 32, 91, .11);
        }

        .finance-transaction-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            padding: clamp(18px, 3vw, 26px) clamp(18px, 3vw, 28px) 0;
        }

        .finance-transaction-title {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .finance-transaction-title .title-icon {
            width: 54px;
            height: 54px;
            border-radius: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 54px;
            color: #ffffff;
            background: linear-gradient(135deg, #1f5ed8, #112b6f);
            box-shadow: 0 16px 30px rgba(31, 94, 216, .22);
            font-size: 1.35rem;
        }

        .finance-transaction-title h3 {
            margin: 0;
            font-size: clamp(1.55rem, 3vw, 2.25rem);
            line-height: 1.05;
            font-weight: 900;
            color: #112b6f !important;
            letter-spacing: -.035em;
        }

        .finance-transaction-title p {
            margin: 5px 0 0;
            color: rgba(17, 43, 111, .68);
            font-weight: 700;
        }

        .finance-transaction-counter {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            min-height: 42px;
            padding: 10px 15px;
            border-radius: 999px;
            color: #ffffff;
            background: linear-gradient(135deg, #1f5ed8, #48c6ff);
            font-weight: 900;
            box-shadow: 0 14px 26px rgba(31, 94, 216, .20);
            white-space: nowrap;
        }

        .finance-transaction-filter {
            margin: clamp(18px, 3vw, 24px) clamp(18px, 3vw, 28px) 0;
            padding: 16px;
            border-radius: 24px;
            background: linear-gradient(135deg, rgba(246, 248, 255, .98), rgba(255, 255, 255, .96));
            border: 1px solid rgba(31, 94, 216, .10);
        }

        .finance-transaction-filter label {
            color: #112b6f;
            font-weight: 900;
            margin-bottom: 7px;
        }

        .finance-transaction-filter .form-control,
        .finance-transaction-filter .form-select {
            min-height: 48px;
            border-radius: 16px;
            border: 1px solid rgba(31, 94, 216, .16);
            background-color: #ffffff;
            color: #112b6f;
            font-weight: 800;
            box-shadow: none !important;
        }

        .finance-transaction-filter .form-control:focus,
        .finance-transaction-filter .form-select:focus {
            border-color: #1f5ed8;
            box-shadow: 0 0 0 .22rem rgba(31, 94, 216, .11) !important;
        }

        .finance-transaction-filter .btn-filter,
        .finance-transaction-filter .btn-reset {
            min-height: 48px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-weight: 900;
            white-space: nowrap;
        }

        .finance-transaction-filter .btn-filter {
            border: none;
            color: #ffffff;
            background: linear-gradient(135deg, #1f5ed8, #112b6f);
            box-shadow: 0 14px 26px rgba(31, 94, 216, .20);
        }

        .finance-transaction-filter .btn-reset {
            color: #1f5ed8;
            background: #ffffff;
            border: 1px solid rgba(31, 94, 216, .18);
            text-decoration: none;
        }

        .finance-transaction-table-wrap {
            padding: clamp(18px, 3vw, 28px);
        }

        .finance-transaction-table {
            margin: 0;
            border-collapse: separate;
            border-spacing: 0 10px;
        }

        .finance-transaction-table thead th {
            border: none;
            padding: 0 14px 8px;
            color: rgba(17, 43, 111, .78);
            font-size: .86rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
        }

        .finance-transaction-table tbody tr {
            box-shadow: 0 14px 28px rgba(10, 32, 91, .06);
        }

        .finance-transaction-table tbody td {
            border: none;
            background: #ffffff;
            padding: 16px 14px;
            color: #112b6f;
            font-weight: 700;
            vertical-align: middle;
        }

        .finance-transaction-table tbody td:first-child {
            border-radius: 18px 0 0 18px;
        }

        .finance-transaction-table tbody td:last-child {
            border-radius: 0 18px 18px 0;
        }

        .finance-transaction-table .tx-main-title {
            display: block;
            color: #112b6f;
            font-weight: 900;
            line-height: 1.15;
        }

        .finance-transaction-table .tx-sub-text {
            display: block;
            margin-top: 4px;
            color: rgba(17, 43, 111, .58);
            font-weight: 700;
            font-size: .86rem;
        }

        .finance-tx-type,
        .finance-tx-status {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            min-height: 34px;
            padding: 7px 11px;
            border-radius: 999px;
            font-size: .84rem;
            font-weight: 900;
            white-space: nowrap;
        }

        .finance-tx-type.type-income {
            color: #0b6b56;
            background: rgba(56, 242, 183, .16);
        }

        .finance-tx-type.type-expense {
            color: #1f5ed8;
            background: rgba(31, 94, 216, .12);
        }

        .finance-tx-status.status-terverifikasi {
            color: #0b6b56;
            background: rgba(56, 242, 183, .16);
        }

        .finance-tx-status.status-draft {
            color: #8a5b00;
            background: rgba(255, 193, 7, .18);
        }

        .finance-tx-status.status-ditolak {
            color: #a51f1f;
            background: rgba(255, 80, 80, .14);
        }

        .finance-transaction-empty {
            padding: 42px 18px !important;
            text-align: center;
            color: rgba(17, 43, 111, .62) !important;
            font-weight: 800 !important;
            border-radius: 22px !important;
        }

        .finance-transaction-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap;
            padding: 0 clamp(18px, 3vw, 28px) clamp(20px, 3vw, 28px);
        }

        .finance-transaction-info {
            color: rgba(17, 43, 111, .68);
            font-weight: 800;
        }

        .finance-pagination {
            display: flex;
            align-items: center;
            gap: 7px;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .finance-pagination a,
        .finance-pagination span {
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            font-weight: 900;
            color: #1f5ed8;
            background: #ffffff;
            border: 1px solid rgba(31, 94, 216, .14);
        }

        .finance-pagination .active span {
            color: #ffffff;
            background: linear-gradient(135deg, #1f5ed8, #112b6f);
            border-color: transparent;
            box-shadow: 0 12px 24px rgba(31, 94, 216, .20);
        }

        .finance-pagination .disabled span {
            color: rgba(17, 43, 111, .32);
            background: #f3f6ff;
        }



        /* =========================================================
           FIX STYLE DAFTAR TRANSAKSI LANDING
           Penyebab tampilan berantakan biasanya karena CSS inline
           tidak terbaca CSP atau masih kalah oleh style Bootstrap.
           Blok ini dibuat lebih spesifik dan memakai !important.
           ========================================================= */

        .finance-transaction-section,
        .finance-transaction-section * {
            box-sizing: border-box !important;
        }

        .finance-transaction-section {
            width: 100% !important;
            margin-top: clamp(24px, 4vw, 40px) !important;
            padding-top: clamp(22px, 3vw, 34px) !important;
            border-top: 1px solid rgba(31, 94, 216, .12) !important;
        }

        .finance-transaction-card {
            width: 100% !important;
            overflow: hidden !important;
            border-radius: 34px !important;
            background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,251,255,.98)) !important;
            border: 1px solid rgba(31, 94, 216, .12) !important;
            box-shadow: 0 24px 58px rgba(10, 32, 91, .10) !important;
        }

        .finance-transaction-head {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 16px !important;
            flex-wrap: wrap !important;
            padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 30px) 0 !important;
        }

        .finance-transaction-title {
            display: flex !important;
            align-items: center !important;
            gap: 14px !important;
            min-width: 0 !important;
            flex: 1 1 420px !important;
        }

        .finance-transaction-title .title-icon {
            width: 56px !important;
            height: 56px !important;
            min-width: 56px !important;
            border-radius: 20px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #1f5ed8, #112b6f) !important;
            box-shadow: 0 16px 30px rgba(31, 94, 216, .22) !important;
            font-size: 1.35rem !important;
            line-height: 1 !important;
        }

        .finance-transaction-title h3 {
            margin: 0 !important;
            color: #112b6f !important;
            font-size: clamp(1.65rem, 3vw, 2.35rem) !important;
            line-height: 1.05 !important;
            font-weight: 900 !important;
            letter-spacing: -.035em !important;
        }

        .finance-transaction-title p {
            margin: 6px 0 0 !important;
            color: rgba(17, 43, 111, .68) !important;
            font-size: .98rem !important;
            font-weight: 700 !important;
        }

        .finance-transaction-counter {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            min-height: 44px !important;
            padding: 10px 16px !important;
            border-radius: 999px !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #1f5ed8, #48c6ff) !important;
            font-weight: 900 !important;
            box-shadow: 0 14px 26px rgba(31, 94, 216, .20) !important;
            white-space: nowrap !important;
        }

        .finance-transaction-filter {
            display: block !important;
            margin: clamp(18px, 3vw, 24px) clamp(18px, 3vw, 30px) 0 !important;
            padding: 16px !important;
            border-radius: 26px !important;
            background: linear-gradient(135deg, rgba(246,248,255,.98), rgba(255,255,255,.96)) !important;
            border: 1px solid rgba(31, 94, 216, .10) !important;
        }

        .finance-transaction-filter .row {
            display: grid !important;
            grid-template-columns: minmax(150px, 220px) minmax(280px, 1fr) minmax(130px, 150px) minmax(110px, 130px) !important;
            gap: 14px !important;
            align-items: end !important;
            margin: 0 !important;
        }

        .finance-transaction-filter .row > [class*="col-"] {
            width: 100% !important;
            max-width: none !important;
            flex: none !important;
            padding: 0 !important;
        }

        .finance-transaction-filter label {
            display: block !important;
            color: #112b6f !important;
            font-size: .9rem !important;
            font-weight: 900 !important;
            margin-bottom: 7px !important;
        }

        .finance-transaction-filter .form-control,
        .finance-transaction-filter .form-select {
            width: 100% !important;
            min-height: 50px !important;
            border-radius: 17px !important;
            border: 1px solid rgba(31, 94, 216, .16) !important;
            background-color: #ffffff !important;
            color: #112b6f !important;
            font-weight: 800 !important;
            box-shadow: none !important;
        }

        .finance-transaction-filter .form-control:focus,
        .finance-transaction-filter .form-select:focus {
            border-color: #1f5ed8 !important;
            box-shadow: 0 0 0 .22rem rgba(31, 94, 216, .11) !important;
        }

        .finance-transaction-filter .btn-filter,
        .finance-transaction-filter .btn-reset {
            width: 100% !important;
            min-height: 50px !important;
            border-radius: 17px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 8px !important;
            font-weight: 900 !important;
            text-decoration: none !important;
            white-space: nowrap !important;
        }

        .finance-transaction-filter .btn-filter {
            border: none !important;
            color: #ffffff !important;
            background: linear-gradient(135deg, #1f5ed8, #112b6f) !important;
            box-shadow: 0 14px 26px rgba(31, 94, 216, .20) !important;
        }

        .finance-transaction-filter .btn-reset {
            color: #1f5ed8 !important;
            background: #ffffff !important;
            border: 1px solid rgba(31, 94, 216, .18) !important;
        }

        .finance-transaction-table-wrap {
            width: 100% !important;
            padding: clamp(18px, 3vw, 28px) !important;
        }

        .finance-transaction-table-wrap .table-responsive {
            width: 100% !important;
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch !important;
            border-radius: 24px !important;
        }

        table.finance-transaction-table {
            width: 100% !important;
            min-width: 980px !important;
            margin: 0 !important;
            border-collapse: separate !important;
            border-spacing: 0 10px !important;
        }

        table.finance-transaction-table thead th {
            border: none !important;
            padding: 0 14px 8px !important;
            color: rgba(17, 43, 111, .78) !important;
            background: transparent !important;
            font-size: .82rem !important;
            font-weight: 900 !important;
            text-transform: uppercase !important;
            letter-spacing: .04em !important;
            white-space: nowrap !important;
        }

        table.finance-transaction-table tbody tr {
            box-shadow: 0 14px 28px rgba(10, 32, 91, .06) !important;
            border-radius: 18px !important;
        }

        table.finance-transaction-table tbody td {
            border: none !important;
            background: #ffffff !important;
            padding: 16px 14px !important;
            color: #112b6f !important;
            font-size: .94rem !important;
            font-weight: 700 !important;
            vertical-align: middle !important;
            border-top: 1px solid rgba(31, 94, 216, .08) !important;
            border-bottom: 1px solid rgba(31, 94, 216, .08) !important;
        }

        table.finance-transaction-table tbody td:first-child {
            border-left: 1px solid rgba(31, 94, 216, .08) !important;
            border-radius: 18px 0 0 18px !important;
        }

        table.finance-transaction-table tbody td:last-child {
            border-right: 1px solid rgba(31, 94, 216, .08) !important;
            border-radius: 0 18px 18px 0 !important;
        }

        .finance-transaction-table .tx-main-title {
            display: block !important;
            color: #112b6f !important;
            font-weight: 900 !important;
            line-height: 1.18 !important;
        }

        .finance-transaction-table .tx-sub-text {
            display: block !important;
            margin-top: 4px !important;
            color: rgba(17, 43, 111, .58) !important;
            font-weight: 700 !important;
            font-size: .84rem !important;
        }

        .finance-tx-type,
        .finance-tx-status {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 7px !important;
            min-height: 34px !important;
            padding: 7px 11px !important;
            border-radius: 999px !important;
            font-size: .82rem !important;
            font-weight: 900 !important;
            white-space: nowrap !important;
        }

        .finance-tx-type.type-income {
            color: #0b6b56 !important;
            background: rgba(56, 242, 183, .16) !important;
        }

        .finance-tx-type.type-expense {
            color: #b42318 !important;
            background: rgba(255, 80, 80, .12) !important;
        }

        .finance-tx-status.status-terverifikasi {
            color: #0b6b56 !important;
            background: rgba(56, 242, 183, .16) !important;
        }

        .finance-tx-status.status-draft {
            color: #8a5b00 !important;
            background: rgba(255, 193, 7, .18) !important;
        }

        .finance-tx-status.status-ditolak {
            color: #a51f1f !important;
            background: rgba(255, 80, 80, .14) !important;
        }

        .finance-transaction-footer {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            gap: 14px !important;
            flex-wrap: wrap !important;
            padding: 0 clamp(18px, 3vw, 28px) clamp(22px, 3vw, 30px) !important;
        }

        .finance-transaction-info {
            color: rgba(17, 43, 111, .68) !important;
            font-weight: 800 !important;
        }

        ul.finance-pagination,
        .finance-pagination {
            display: flex !important;
            align-items: center !important;
            justify-content: flex-end !important;
            gap: 7px !important;
            flex-wrap: wrap !important;
            margin: 0 !important;
            padding: 0 !important;
            list-style: none !important;
        }

        .finance-pagination li {
            display: inline-flex !important;
            list-style: none !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        .finance-pagination a,
        .finance-pagination span {
            min-width: 40px !important;
            height: 40px !important;
            padding: 0 12px !important;
            border-radius: 14px !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            text-decoration: none !important;
            font-weight: 900 !important;
            color: #1f5ed8 !important;
            background: #ffffff !important;
            border: 1px solid rgba(31, 94, 216, .14) !important;
        }

        .finance-pagination .active span {
            color: #ffffff !important;
            background: linear-gradient(135deg, #1f5ed8, #112b6f) !important;
            border-color: transparent !important;
            box-shadow: 0 12px 24px rgba(31, 94, 216, .20) !important;
        }

        .finance-pagination .disabled span {
            color: rgba(17, 43, 111, .32) !important;
            background: #f3f6ff !important;
        }

        @media (max-width: 991.98px) {
            .finance-transaction-filter .row {
                grid-template-columns: 1fr 1fr !important;
            }

            .finance-transaction-title {
                flex-basis: 100% !important;
            }
        }

        @media (max-width: 576px) {
            .finance-transaction-card {
                border-radius: 28px !important;
            }

            .finance-transaction-head {
                align-items: flex-start !important;
            }

            .finance-transaction-title {
                align-items: flex-start !important;
            }

            .finance-transaction-title .title-icon {
                width: 48px !important;
                height: 48px !important;
                min-width: 48px !important;
                border-radius: 17px !important;
            }

            .finance-transaction-title h3 {
                font-size: 1.65rem !important;
            }

            .finance-transaction-counter {
                width: 100% !important;
            }

            .finance-transaction-filter .row {
                grid-template-columns: 1fr !important;
            }

            .finance-transaction-footer {
                align-items: stretch !important;
            }

            .finance-transaction-info,
            .finance-pagination {
                width: 100% !important;
                justify-content: center !important;
                text-align: center !important;
            }
        }
        
        /* =====================================================
   FIX HEADER BMNCARE FULL WIDTH DESKTOP
   Header benar-benar penuh dari kiri sampai kanan layar.
   Font tetap Roboto Condensed.
   ===================================================== */

.finance-hero-shell {
    --finance-hero-pad-x: clamp(14px, 4vw, 46px);
    padding-top: 0 !important;
    padding-left: var(--finance-hero-pad-x) !important;
    padding-right: var(--finance-hero-pad-x) !important;
}

.finance-hero-shell > .finance-navbar {
    width: calc(100% + (var(--finance-hero-pad-x) * 2)) !important;
    max-width: none !important;
    min-width: calc(100% + (var(--finance-hero-pad-x) * 2)) !important;

    margin-left: calc(var(--finance-hero-pad-x) * -1) !important;
    margin-right: calc(var(--finance-hero-pad-x) * -1) !important;
    margin-top: 0 !important;
    margin-bottom: clamp(30px, 5vw, 62px) !important;

    padding-top: 20px !important;
    padding-bottom: 20px !important;
    padding-left: max(24px, calc((100vw - 1120px) / 2 + 24px)) !important;
    padding-right: max(24px, calc((100vw - 1120px) / 2 + 24px)) !important;

    border-radius: 0 !important;
    box-sizing: border-box !important;

    background:
        linear-gradient(
            90deg,
            rgba(31, 132, 255, .96) 0%,
            rgba(31, 94, 216, .96) 34%,
            rgba(17, 43, 111, .98) 100%
        ) !important;

    box-shadow: 0 18px 42px rgba(7, 27, 85, .22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

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

    font-family: "Roboto Condensed", system-ui, sans-serif !important;
}

.finance-hero-shell > .finance-navbar .finance-logo-stack.finance-logo-wordmark {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: auto !important;
    min-width: 0 !important;
    text-decoration: none !important;
    font-family: "Roboto Condensed", system-ui, sans-serif !important;
}

.finance-hero-shell > .finance-navbar .finance-logo-arrow {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 14px !important;

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

    background: linear-gradient(135deg, #5ef8d1, #48c6ff) !important;
    color: #112b6f !important;
    box-shadow: 0 14px 28px rgba(72, 198, 255, .25) !important;
}

.finance-hero-shell > .finance-navbar .finance-logo-text {
    font-family: "Roboto Condensed", system-ui, sans-serif !important;
    font-size: clamp(2rem, 4vw, 2.8rem) !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    color: #ffffff !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    .finance-hero-shell {
        --finance-hero-pad-x: 14px;
        padding-top: 0 !important;
    }

    .finance-hero-shell > .finance-navbar {
        padding: 16px 22px !important;
        margin-bottom: 30px !important;
    }

    .finance-hero-shell > .finance-navbar .finance-logo-text {
        font-size: clamp(1.85rem, 7vw, 2.4rem) !important;
    }
}

/* HP */
@media (max-width: 576px) {
    .finance-hero-shell {
        --finance-hero-pad-x: 14px;
    }

    .finance-hero-shell > .finance-navbar {
        padding: 14px 18px !important;
    }

    .finance-hero-shell > .finance-navbar .finance-logo-arrow {
        width: 38px !important;
        height: 38px !important;
        flex-basis: 38px !important;
        border-radius: 13px !important;
    }

    .finance-hero-shell > .finance-navbar .finance-logo-text {
        font-size: 2rem !important;
    }
}
    

        /* =====================================================
           GLOBAL FONT ROBOTO CONDENSED
           Semua teks halaman landing, form, tabel, tombol,
           tab, pagination, footer, dan komponen Bootstrap
           dipaksa memakai Roboto Condensed.
           Rule PHP, query, filter, pagination, dan chart tetap.
           ===================================================== */
        :root {
            --bs-font-sans-serif: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
            --bs-body-font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        }

        html,
        body,
        body.finance-landing-page,
        .finance-landing-page,
        .finance-landing-page *:not(i):not(.bi),
        .finance-landing-page input,
        .finance-landing-page select,
        .finance-landing-page textarea,
        .finance-landing-page button,
        .finance-landing-page .btn,
        .finance-landing-page .form-control,
        .finance-landing-page .form-select,
        .finance-landing-page .table,
        .finance-landing-page .dropdown-menu,
        .finance-landing-page .pagination,
        .finance-landing-page .modal,
        .finance-landing-page .tooltip,
        .finance-landing-page .popover {
            font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        }

        .finance-landing-page input::placeholder,
        .finance-landing-page textarea::placeholder {
            font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        }

        .finance-logo-text,
        .finance-hero-copy h1,
        .finance-kicker,
        .finance-period-form label,
        .finance-period-form .btn,
        .finance-primary,
        .finance-secondary,
        .finance-preview-title,
        .finance-status-pill,
        .finance-transaction-pill,
        .finance-stat-card,
        .finance-stat-card .number,
        .finance-stat-card .label,
        .finance-monitor-titlebar,
        .finance-monitor-tabs .nav-link,
        .finance-tab-panel,
        .finance-tab-heading,
        .finance-tab-stat,
        .finance-expense-row,
        .finance-transaction-section,
        .finance-transaction-section *,
        .finance-footer-note,
        .landing-footer-login-text {
            font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
        }

        .bi,
        [class^="bi-"],
        [class*=" bi-"] {
            font-family: "bootstrap-icons" !important;
        }




        /* =====================================================
           DAFTAR TRANSAKSI MASUK KE DALAM TAB
           Tab tetap satu baris dan transaksi tidak tampil sebagai
           section terpisah di bawah card.
           ===================================================== */
        .finance-monitor-tabs {
            flex-wrap: nowrap !important;
            white-space: nowrap !important;
        }

        

        .finance-monitor-tabs .nav-link {
            min-width: clamp(132px, 18vw, 190px) !important;
            white-space: nowrap !important;
        }

        .finance-transaction-tab-panel {
            padding-top: clamp(18px, 3vw, 26px) !important;
        }

        .finance-transaction-tab-panel .finance-transaction-section {
            margin-top: 0 !important;
            padding-top: 0 !important;
            border-top: 0 !important;
        }

        .finance-transaction-tab-panel .finance-transaction-card {
            box-shadow: none !important;
            border-radius: 26px !important;
        }

        @media (max-width: 991.98px) {
            .finance-monitor-tabs {
                overflow-x: auto !important;
                overflow-y: hidden !important;
                flex-wrap: nowrap !important;
                -webkit-overflow-scrolling: touch !important;
            }

            .finance-monitor-tabs .nav-link {
                min-width: 145px !important;
            }
        }

/*footer*/
.finance-footer-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    font-family: "Roboto Condensed", system-ui, sans-serif !important;
    font-weight: 800;
}

.finance-footer-note i {
    color: #1f5ed8;
    font-size: 1rem;
}

.finance-footer-note .footer-separator {
    color: rgba(17, 43, 111, .45);
    font-weight: 900;
}


/*logo nav bar*/
/* =====================================================
   LOGO BESAR, NAVBAR TETAP KECIL PROPORSIONAL
   ===================================================== */

.finance-hero-shell > .finance-navbar {
    min-height: clamp(78px, 7vw, 104px) !important;
    padding-top: clamp(8px, 1.2vw, 12px) !important;
    padding-bottom: clamp(8px, 1.2vw, 12px) !important;
    align-items: center !important;
    overflow: visible !important;
}

.finance-logo-image-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    overflow: visible !important;
}

.finance-logo-brand-image {
    display: block !important;
    width: auto !important;

    /* logo diperbesar, tetapi tidak membuat navbar membengkak */
    height: clamp(105px, 10vw, 150px) !important;

    max-height: none !important;
    max-width: min(62vw, 620px) !important;
    object-fit: contain !important;
    object-position: left center !important;

    transform: translateY(0);
}

/* sembunyikan icon/text lama */
.finance-logo-arrow,
.finance-logo-text {
    display: none !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    .finance-hero-shell > .finance-navbar {
        min-height: clamp(72px, 10vw, 92px) !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .finance-logo-brand-image {
        height: clamp(86px, 14vw, 120px) !important;
        max-width: min(72vw, 460px) !important;
    }
}

/* HP */
@media (max-width: 576px) {
    .finance-hero-shell > .finance-navbar {
        min-height: 66px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .finance-logo-brand-image {
        height: clamp(68px, 20vw, 92px) !important;
        max-width: 82vw !important;
    }
}

/* =====================================================
   NAV HEADER LEBIH PENDEK / RAMPING
   Logo tetap proporsional
   ===================================================== */

.finance-hero-shell > .finance-navbar {
    min-height: 64px !important;
    height: 64px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: max(18px, calc((100vw - 1120px) / 2 + 18px)) !important;
    padding-right: max(18px, calc((100vw - 1120px) / 2 + 18px)) !important;
    margin-bottom: clamp(24px, 4vw, 42px) !important;
    align-items: center !important;
    overflow: visible !important;
}

.finance-logo-image-link {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow: visible !important;
}

.finance-logo-brand-image {
    display: block !important;
    width: auto !important;
    height: 84px !important;
    max-height: none !important;
    max-width: min(52vw, 460px) !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Tablet */
@media (max-width: 991.98px) {
    .finance-hero-shell > .finance-navbar {
        min-height: 58px !important;
        height: 58px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-bottom: 26px !important;
    }

    .finance-logo-brand-image {
        height: 74px !important;
        max-width: min(62vw, 360px) !important;
    }
}

/* HP */
@media (max-width: 576px) {
    .finance-hero-shell > .finance-navbar {
        min-height: 54px !important;
        height: 54px !important;
        padding-top: 3px !important;
        padding-bottom: 3px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        margin-bottom: 22px !important;
    }

    .finance-logo-brand-image {
        height: 64px !important;
        max-width: 76vw !important;
    }
}

/* =====================================================
   LOGO WHITE GLOW ANIMATION
   Efek logo berpendar putih halus
   ===================================================== */

.finance-logo-brand-image {
    position: relative !important;
    z-index: 2 !important;
    animation: bmnLogoWhiteGlow 2.8s ease-in-out infinite !important;
    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, .75))
        drop-shadow(0 0 14px rgba(255, 255, 255, .45))
        drop-shadow(0 0 26px rgba(255, 255, 255, .25)) !important;
}

.finance-logo-image-link {
    position: relative !important;
    overflow: visible !important;
}

.finance-logo-image-link::before {
    content: "";
    position: absolute;
    inset: -14px -22px;
    border-radius: 999px;
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 255, .38) 0%,
            rgba(255, 255, 255, .20) 32%,
            rgba(255, 255, 255, .08) 58%,
            rgba(255, 255, 255, 0) 76%
        );
    opacity: .68;
    filter: blur(14px);
    animation: bmnLogoAuraPulse 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes bmnLogoWhiteGlow {
    0%,
    100% {
        filter:
            drop-shadow(0 0 5px rgba(255, 255, 255, .62))
            drop-shadow(0 0 12px rgba(255, 255, 255, .34))
            drop-shadow(0 0 22px rgba(255, 255, 255, .18));
        transform: translateY(0) scale(1);
    }

    50% {
        filter:
            drop-shadow(0 0 10px rgba(255, 255, 255, .96))
            drop-shadow(0 0 24px rgba(255, 255, 255, .70))
            drop-shadow(0 0 42px rgba(255, 255, 255, .40));
        transform: translateY(0) scale(1.018);
    }
}

@keyframes bmnLogoAuraPulse {
    0%,
    100% {
        opacity: .42;
        transform: scale(.96);
    }

    50% {
        opacity: .88;
        transform: scale(1.06);
    }
}

/* Kurangi animasi bila user/device memakai preferensi reduce motion */
@media (prefers-reduced-motion: reduce) {
    .finance-logo-brand-image,
    .finance-logo-image-link::before {
        animation: none !important;
    }
}

/* =====================================================
   MOBILE APP DASHBOARD MODE
   Tampilan HP dibuat seperti dashboard Android wallet/GoPay:
   app header, balance card, shortcut chips, rounded cards,
   horizontal tabs, dan bottom navigation.
   Rule PHP/query/chart/transaksi tidak diubah.
   ===================================================== */
@media (max-width: 767.98px) {
    html,
    body {
        background: #f4f7fb !important;
        overflow-x: hidden !important;
    }

    body.finance-landing-page {
        padding-bottom: 86px !important;
        color: #112b6f !important;
    }

    .finance-hero-shell {
        min-height: auto !important;
        padding: 0 14px 28px !important;
        overflow: visible !important;
        background:
            radial-gradient(circle at 12% 4%, rgba(255, 255, 255, .30), transparent 34%),
            linear-gradient(180deg, #1764e8 0%, #0e3fbb 52%, #f4f7fb 52%, #f4f7fb 100%) !important;
        border-radius: 0 0 30px 30px !important;
    }

    .finance-bg-orb,
    .finance-shimmer-layer {
        display: none !important;
    }

    .finance-hero-shell > .finance-navbar {
        width: calc(100% + 28px) !important;
        min-width: calc(100% + 28px) !important;
        height: 58px !important;
        min-height: 58px !important;
        margin: 0 -14px 12px !important;
        padding: 8px 16px !important;
        border-radius: 0 !important;
        background: rgba(13, 69, 198, .96) !important;
        box-shadow: none !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        justify-content: flex-start !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 50 !important;
    }

    .finance-logo-image-link {
        height: 100% !important;
        max-width: 72vw !important;
        overflow: visible !important;
    }

    .finance-logo-brand-image {
        height: 58px !important;
        max-width: 72vw !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .finance-logo-image-link::before {
        inset: -8px -14px !important;
        opacity: .38 !important;
        filter: blur(10px) !important;
    }

    .finance-hero-grid {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 14px !important;
        text-align: left !important;
        margin: 0 !important;
    }

    .finance-hero-copy {
        width: 100% !important;
        align-items: stretch !important;
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .finance-kicker {
        margin: 6px 0 8px !important;
        width: fit-content !important;
        min-height: 30px !important;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, .18) !important;
        border: 1px solid rgba(255, 255, 255, .22) !important;
        color: #ffffff !important;
        font-size: .82rem !important;
        font-weight: 900 !important;
        letter-spacing: .01em !important;
        box-shadow: none !important;
    }

    .finance-hero-copy h1 {
        color: #ffffff !important;
        text-align: left !important;
        max-width: 100% !important;
        margin: 0 0 14px !important;
        font-size: clamp(2rem, 10vw, 2.9rem) !important;
        line-height: .98 !important;
        letter-spacing: -.052em !important;
        text-shadow: 0 10px 24px rgba(0, 0, 0, .14) !important;
    }

    .finance-period-form {
        order: 4 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: end !important;
        gap: 10px !important;
        padding: 12px !important;
        margin: 14px 0 0 !important;
        border-radius: 22px !important;
        background: rgba(255, 255, 255, .96) !important;
        border: 1px solid rgba(17, 43, 111, .08) !important;
        box-shadow: 0 16px 36px rgba(8, 29, 90, .14) !important;
    }

    .finance-period-form label {
        color: rgba(17, 43, 111, .62) !important;
        font-size: .82rem !important;
        font-weight: 900 !important;
        margin-bottom: 5px !important;
    }

    .finance-period-form .form-control,
    .finance-period-form .form-select {
        min-height: 42px !important;
        height: 42px !important;
        border-radius: 16px !important;
        font-size: .95rem !important;
        background: #f5f8ff !important;
    }

    .finance-period-form .btn {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        padding: 0 !important;
        border-radius: 17px !important;
        font-size: 0 !important;
        box-shadow: 0 12px 22px rgba(31, 94, 216, .24) !important;
    }

    .finance-period-form .btn i {
        font-size: 1.08rem !important;
        margin: 0 !important;
    }

    .finance-actions {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 4px 0 0 !important;
    }

    .finance-primary,
    .finance-secondary {
        min-height: 50px !important;
        border-radius: 20px !important;
        padding: 12px 10px !important;
        justify-content: center !important;
        text-align: center !important;
        font-size: .95rem !important;
        font-weight: 900 !important;
        box-shadow: 0 14px 28px rgba(10, 32, 91, .13) !important;
    }

    .finance-secondary {
        background: rgba(255, 255, 255, .95) !important;
        color: #1454d8 !important;
        border: 1px solid rgba(31, 94, 216, .12) !important;
    }

    .finance-dashboard-preview.finance-hero-kas-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 16px !important;
        border-radius: 28px !important;
        background:
            linear-gradient(155deg, rgba(255,255,255,.99), rgba(235,244,255,.98)) !important;
        border: 1px solid rgba(255, 255, 255, .78) !important;
        box-shadow: 0 22px 48px rgba(8, 29, 90, .18) !important;
        overflow: visible !important;
    }

    .finance-month-ribbon {
        position: static !important;
        width: fit-content !important;
        max-width: 100% !important;
        min-height: 32px !important;
        margin: 0 0 12px !important;
        padding: 7px 12px !important;
        border-radius: 999px !important;
        background: rgba(31, 94, 216, .10) !important;
        color: #1454d8 !important;
        box-shadow: none !important;
    }

    .finance-preview-header {
        display: block !important;
        text-align: left !important;
    }

    .finance-preview-title strong {
        display: block !important;
        color: #112b6f !important;
        font-size: 1.14rem !important;
        font-weight: 900 !important;
        margin-bottom: 10px !important;
    }

    .finance-preview-badges {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .finance-preview-badges::-webkit-scrollbar {
        display: none !important;
    }

    .finance-status-pill,
    .finance-transaction-pill {
        flex: 0 0 auto !important;
        width: auto !important;
        min-height: 34px !important;
        padding: 8px 11px !important;
        border-radius: 999px !important;
        font-size: .82rem !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    .finance-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }

    .finance-stat-card {
        min-height: 112px !important;
        padding: 13px !important;
        border-radius: 22px !important;
        background: #ffffff !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
        box-shadow: 0 12px 24px rgba(10, 32, 91, .08) !important;
        text-align: left !important;
    }

    .finance-stat-icon {
        width: 34px !important;
        height: 34px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
        font-size: 1rem !important;
    }

    .finance-stat-card .number {
        font-size: clamp(1.02rem, 4.6vw, 1.32rem) !important;
        line-height: 1.05 !important;
        color: #112b6f !important;
        letter-spacing: -.025em !important;
    }

    .finance-stat-card .label {
        margin-top: 6px !important;
        font-size: .78rem !important;
        line-height: 1.15 !important;
        color: rgba(17, 43, 111, .58) !important;
    }

    .finance-monitor-section {
        padding: 18px 12px 88px !important;
        background: #f4f7fb !important;
        overflow: visible !important;
    }

    .finance-monitor-card {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 30px !important;
        padding: 14px !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 18px 44px rgba(10, 32, 91, .10) !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
    }

    .finance-monitor-titlebar {
        display: block !important;
        margin-bottom: 12px !important;
    }

    .finance-title-left {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
        margin-bottom: 12px !important;
    }

    .finance-title-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 17px !important;
        flex: 0 0 42px !important;
    }

    .finance-monitor-titlebar h2 {
        font-size: 1.42rem !important;
        line-height: 1.05 !important;
        letter-spacing: -.035em !important;
        margin: 0 !important;
    }

    .finance-monitor-filter {
        width: 100% !important;
        flex: none !important;
        padding: 12px !important;
        border-radius: 22px !important;
        background: #f5f8ff !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
    }

    .finance-monitor-filter label {
        font-size: .82rem !important;
        color: rgba(17, 43, 111, .62) !important;
        font-weight: 900 !important;
    }

    .finance-monitor-select .form-select {
        min-height: 42px !important;
        border-radius: 16px !important;
        font-weight: 900 !important;
    }

    .finance-monitor-select button {
        width: 44px !important;
        min-width: 44px !important;
        border-radius: 16px !important;
    }

    .finance-monitor-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 9px !important;
        width: calc(100% + 8px) !important;
        margin: 0 -4px 12px !important;
        padding: 2px 4px 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .finance-monitor-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .finance-monitor-tabs .nav-link {
        min-width: auto !important;
        height: 48px !important;
        padding: 10px 13px !important;
        border-radius: 18px !important;
        gap: 7px !important;
        background: #f5f8ff !important;
        color: rgba(17, 43, 111, .72) !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
        box-shadow: none !important;
    }

    .finance-monitor-tabs .nav-link.active {
        color: #ffffff !important;
        background: linear-gradient(135deg, #1f5ed8, #112b6f) !important;
        box-shadow: 0 12px 22px rgba(31, 94, 216, .24) !important;
    }

    .finance-monitor-tabs .nav-link .tab-icon {
        width: 28px !important;
        height: 28px !important;
        border-radius: 11px !important;
        flex: 0 0 28px !important;
    }

    .finance-monitor-tabs .nav-link strong {
        font-size: .88rem !important;
        font-weight: 900 !important;
    }

    .finance-tab-panel {
        padding: 14px !important;
        border-radius: 26px !important;
        background: #ffffff !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
        box-shadow: none !important;
    }

    .finance-tab-header {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }

    .finance-tab-heading {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .finance-tab-large-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 16px !important;
        flex: 0 0 40px !important;
    }

    .finance-tab-heading h3 {
        font-size: 1.18rem !important;
        line-height: 1.08 !important;
        margin: 0 !important;
    }

    .finance-tab-stat-grid,
    .finance-cash-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .finance-tab-stat,
    .finance-cash-card {
        min-height: 104px !important;
        padding: 12px !important;
        border-radius: 22px !important;
        box-shadow: 0 10px 22px rgba(10, 32, 91, .07) !important;
    }

    .finance-tab-stat strong {
        font-size: clamp(.98rem, 4.1vw, 1.22rem) !important;
        line-height: 1.08 !important;
    }

    .finance-tab-stat small {
        font-size: .76rem !important;
        line-height: 1.12 !important;
    }

    .finance-chart-shell {
        min-height: 300px !important;
        border-radius: 22px !important;
        padding: 8px !important;
        box-shadow: 0 12px 28px rgba(10, 32, 91, .08) !important;
    }

    .finance-expense-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .finance-expense-row {
        border-radius: 18px !important;
        padding: 12px !important;
        background: #f8fbff !important;
    }

    .finance-transaction-tab-panel {
        padding-top: 0 !important;
    }

    .finance-transaction-tab-panel .finance-transaction-card,
    .finance-transaction-card {
        border-radius: 26px !important;
        box-shadow: none !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
    }

    .finance-transaction-head {
        padding: 16px 14px 0 !important;
        align-items: flex-start !important;
    }

    .finance-transaction-title {
        flex: 1 1 100% !important;
        gap: 10px !important;
    }

    .finance-transaction-title .title-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        border-radius: 17px !important;
    }

    .finance-transaction-title h3 {
        font-size: 1.32rem !important;
    }

    .finance-transaction-title p {
        font-size: .84rem !important;
    }

    .finance-transaction-counter {
        width: 100% !important;
        min-height: 38px !important;
        margin-top: 10px !important;
        border-radius: 16px !important;
    }

    .finance-transaction-filter {
        margin: 14px 14px 0 !important;
        padding: 12px !important;
        border-radius: 22px !important;
        background: #f5f8ff !important;
    }

    .finance-transaction-filter .row {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .finance-transaction-filter .form-control,
    .finance-transaction-filter .form-select,
    .finance-transaction-filter .btn-filter,
    .finance-transaction-filter .btn-reset {
        min-height: 44px !important;
        border-radius: 16px !important;
    }

    .finance-transaction-table-wrap {
        padding: 14px !important;
    }

    .finance-transaction-table-wrap .table-responsive {
        border-radius: 20px !important;
    }

    table.finance-transaction-table {
        min-width: 900px !important;
        border-spacing: 0 8px !important;
    }

    table.finance-transaction-table tbody td {
        padding: 12px 11px !important;
        font-size: .86rem !important;
    }

    .finance-transaction-footer {
        padding: 0 14px 16px !important;
        justify-content: center !important;
    }

    .finance-pagination {
        justify-content: center !important;
    }

    .finance-pagination a,
    .finance-pagination span {
        min-width: 36px !important;
        height: 36px !important;
        border-radius: 13px !important;
    }

    .finance-footer-note {
        margin: 0 12px 88px !important;
        padding: 14px 16px !important;
        border-radius: 22px !important;
        background: #ffffff !important;
        box-shadow: 0 12px 28px rgba(10, 32, 91, .08) !important;
        font-size: .88rem !important;
    }

    .finance-mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        z-index: 80 !important;
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
        min-height: 64px !important;
        padding: 8px !important;
        border-radius: 24px !important;
        background: rgba(255, 255, 255, .94) !important;
        border: 1px solid rgba(31, 94, 216, .10) !important;
        box-shadow: 0 18px 44px rgba(10, 32, 91, .18) !important;
        backdrop-filter: blur(16px) !important;
        -webkit-backdrop-filter: blur(16px) !important;
    }

    .finance-mobile-bottom-nav a,
    .finance-mobile-bottom-nav button {
        appearance: none !important;
        border: none !important;
        background: transparent !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        color: rgba(17, 43, 111, .58) !important;
        text-decoration: none !important;
        font-family: "Roboto Condensed", system-ui, sans-serif !important;
        font-weight: 900 !important;
        font-size: .70rem !important;
        line-height: 1 !important;
        border-radius: 18px !important;
        padding: 7px 4px !important;
    }

    .finance-mobile-bottom-nav i {
        font-size: 1.12rem !important;
        line-height: 1 !important;
        font-family: "bootstrap-icons" !important;
    }

    .finance-mobile-bottom-nav .active,
    .finance-mobile-bottom-nav a:active,
    .finance-mobile-bottom-nav button:active {
        color: #1f5ed8 !important;
        background: rgba(31, 94, 216, .09) !important;
    }
}

@media (min-width: 768px) {
    .finance-mobile-bottom-nav {
        display: none !important;
    }
}

    

/* =====================================================
   HIGHLIGHT CARD SALDO AKHIR DASHBOARD
   Menonjolkan posisi saldo akhir tanpa mengubah rule data.
   ===================================================== */
.finance-final-balance-card {
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(17, 43, 111, .98) 0%, rgba(31, 94, 216, .96) 52%, rgba(72, 198, 255, .92) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    box-shadow:
        0 22px 46px rgba(31, 94, 216, .30),
        inset 0 1px 0 rgba(255, 255, 255, .30) !important;
}

.finance-final-balance-card::before {
    content: "";
    position: absolute;
    inset: -45% -30% auto auto;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
    z-index: 0;
    animation: finalBalanceGlow 3.2s ease-in-out infinite;
}

.finance-final-balance-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .20) 42%, transparent 72%);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 0;
    animation: finalBalanceShimmer 4.2s ease-in-out infinite;
}

.finance-final-balance-card > *,
.finance-final-balance-card .finance-stat-icon,
.finance-final-balance-card .number,
.finance-final-balance-card .label,
.finance-final-balance-card .mini-icon,
.finance-final-balance-card strong,
.finance-final-balance-card small {
    position: relative !important;
    z-index: 1 !important;
    color: #ffffff !important;
}

.finance-final-balance-card .finance-stat-icon,
.finance-final-balance-card .mini-icon {
    background: rgba(255, 255, 255, .20) !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16) !important;
}

.finance-final-balance-card .number,
.finance-final-balance-card strong {
    text-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important;
}

.finance-final-balance-card .label,
.finance-final-balance-card small {
    color: rgba(255, 255, 255, .86) !important;
}

@keyframes finalBalanceGlow {
    0%, 100% {
        opacity: .46;
        transform: scale(.92);
    }
    50% {
        opacity: .88;
        transform: scale(1.08);
    }
}

@keyframes finalBalanceShimmer {
    0%, 35% {
        transform: translateX(-130%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    75%, 100% {
        transform: translateX(130%);
        opacity: 0;
    }
}

@media (max-width: 767.98px) {
    .finance-final-balance-card {
        border-radius: 22px !important;
        box-shadow:
            0 18px 38px rgba(31, 94, 216, .26),
            inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .finance-final-balance-card::before,
    .finance-final-balance-card::after {
        animation: none !important;
    }
}


/* =====================================================
   SINKRON CARD SALDO AKHIR POSISI KAS PERIODIK
   Card saldo akhir di tab/posisi kas dibuat sama dengan
   card saldo akhir utama di dashboard atas.
   ===================================================== */
.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card,
.finance-tab-stat.finance-cash-card.finance-final-balance-card {
    position: relative !important;
    overflow: hidden !important;
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(17, 43, 111, .98) 0%, rgba(31, 94, 216, .96) 52%, rgba(72, 198, 255, .92) 100%) !important;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    box-shadow:
        0 22px 46px rgba(31, 94, 216, .30),
        inset 0 1px 0 rgba(255, 255, 255, .30) !important;
    border-radius: 24px !important;
    min-height: 154px !important;
    padding: clamp(18px, 2.5vw, 24px) !important;
    align-items: flex-start !important;
    justify-content: center !important;
    isolation: isolate !important;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card::before,
.finance-tab-stat.finance-cash-card.finance-final-balance-card::before {
    content: "";
    position: absolute;
    inset: -45% -30% auto auto;
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 68%);
    pointer-events: none;
    z-index: 0;
    animation: finalBalanceGlow 3.2s ease-in-out infinite;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card::after,
.finance-tab-stat.finance-cash-card.finance-final-balance-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .20) 42%, transparent 72%);
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 0;
    animation: finalBalanceShimmer 4.2s ease-in-out infinite;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card > *,
.finance-tab-stat.finance-cash-card.finance-final-balance-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card .mini-icon,
.finance-tab-stat.finance-cash-card.finance-final-balance-card .mini-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 14px !important;
    background: rgba(255, 255, 255, .20) !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .16) !important;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card .mini-icon i,
.finance-tab-stat.finance-cash-card.finance-final-balance-card .mini-icon i {
    color: #ffffff !important;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card strong,
.finance-tab-stat.finance-cash-card.finance-final-balance-card strong {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important;
}

.finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card small,
.finance-tab-stat.finance-cash-card.finance-final-balance-card small {
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 800 !important;
}

@media (max-width: 767.98px) {
    .finance-tab-stat.finance-cash-card.highlight.finance-final-balance-card,
    .finance-tab-stat.finance-cash-card.finance-final-balance-card {
        border-radius: 22px !important;
        min-height: 132px !important;
        box-shadow:
            0 18px 38px rgba(31, 94, 216, .26),
            inset 0 1px 0 rgba(255, 255, 255, .28) !important;
    }
}


/* ==========================================================
   PREMIUM FINTECH LANDING HERO - desain mengikuti referensi
   ========================================================== */
:root {
    --lp-blue-900: #0045c8;
    --lp-blue-800: #0758df;
    --lp-blue-700: #0b68f2;
    --lp-blue-500: #1aa4ff;
    --lp-blue-100: #eaf5ff;
    --lp-ink: #0f2147;
    --lp-muted: #6d7b98;
    --lp-white: #ffffff;
    --lp-card-shadow: 0 24px 62px rgba(15, 47, 116, .14);
}

body.finance-landing-page {
    background: #f6f9ff !important;
    color: var(--lp-ink);
}

.finance-hero-shell.finova-hero {
    position: relative;
    min-height: 760px !important;
    padding: 28px clamp(18px, 5vw, 74px) 0 !important;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 88% 18%, rgba(119, 203, 255, .95) 0, rgba(119, 203, 255, .58) 21%, transparent 44%),
        radial-gradient(circle at 52% 62%, rgba(79, 160, 255, .72) 0, transparent 34%),
        linear-gradient(135deg, #003fc3 0%, #0068f1 48%, #73c8ff 100%) !important;
}

.finance-hero-shell.finova-hero::before,
.finance-hero-shell.finova-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: -1;
}

.finance-hero-shell.finova-hero::before {
    width: 780px;
    height: 780px;
    right: -210px;
    top: 38px;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.finance-hero-shell.finova-hero::after {
    inset: 0;
    background-image:
        radial-gradient(rgba(255,255,255,.20) 1px, transparent 1px),
        linear-gradient(115deg, transparent 0 56%, rgba(255,255,255,.18) 56% 72%, transparent 72%);
    background-size: 42px 42px, 100% 100%;
    opacity: .32;
}

.finova-navbar {
    position: relative;
    z-index: 5;
    width: min(1240px, 100%) !important;
    margin: 0 auto 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.finova-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff !important;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: -.02em;
}

.finova-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.96);
    color: #0758df;
    box-shadow: 0 14px 30px rgba(0, 44, 131, .20);
}

.finova-brand-mark img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.finova-brand-text {
    font-size: clamp(1.45rem, 2vw, 2rem);
    line-height: 1;
}

.finova-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 3vw, 42px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.finova-menu a {
    position: relative;
    color: rgba(255,255,255,.92);
    font-weight: 800;
    text-decoration: none;
    padding: 12px 0;
}

.finova-menu a.active::after,
.finova-menu a:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 3px;
    border-radius: 999px;
    background: #fff;
}

.finova-nav-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.finova-login,
.finova-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border-radius: 14px;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
}

.finova-login {
    color: #fff;
    padding: 0 8px;
}

.finova-register {
    color: #0758df;
    background: #fff;
    padding: 0 24px;
    box-shadow: 0 16px 38px rgba(0, 54, 154, .18);
}

.finova-hero-grid {
    position: relative;
    z-index: 3;
    width: min(1240px, 100%) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .92fr) minmax(430px, 1.08fr) !important;
    align-items: center !important;
    gap: clamp(28px, 5vw, 70px) !important;
}

.finova-kicker {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 18px;
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
    font-weight: 800;
}

.finova-hero-copy h1 {
    margin: 26px 0 18px;
    color: #fff !important;
    font-size: clamp(3.4rem, 6.3vw, 5.75rem) !important;
    line-height: .96 !important;
    font-weight: 900 !important;
    letter-spacing: -.065em !important;
    max-width: 620px;
}

.finova-hero-copy p {
    width: min(540px, 100%);
    color: rgba(255,255,255,.92) !important;
    font-size: clamp(1.02rem, 1.4vw, 1.23rem);
    line-height: 1.58;
    font-weight: 500;
    margin: 0 0 26px;
}

.finova-period-form {
    width: min(540px, 100%);
    margin: 0 0 22px;
    padding: 10px;
    display: flex;
    align-items: end;
    gap: 10px;
    border-radius: 20px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(16px);
}

.finova-period-form label {
    color: rgba(255,255,255,.85);
    font-size: .83rem;
    font-weight: 800;
    margin: 0 0 6px 4px;
}

.finova-period-form .form-control {
    min-height: 50px;
    border: 0;
    border-radius: 15px;
    color: #103071;
    font-weight: 900;
    background: #fff;
    box-shadow: none !important;
}

.finova-period-form .btn {
    min-height: 50px;
    padding: 0 20px;
    border: 0;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #0758df;
    background: #fff;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(0, 44, 131, .16);
}

.finova-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.finova-primary,
.finova-secondary {
    min-height: 56px;
    padding: 0 25px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 900;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease;
}

.finova-primary:hover,
.finova-secondary:hover {
    transform: translateY(-2px);
}

.finova-primary {
    color: #0758df;
    background: #fff;
    box-shadow: 0 18px 42px rgba(0, 44, 131, .20);
}

.finova-secondary {
    color: #fff;
    border: 1px solid rgba(255,255,255,.36);
    background: rgba(255,255,255,.08);
}

.finova-secondary .play-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.58);
}

.finova-joined {
    margin-top: 26px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-weight: 800;
}

.finova-avatar-stack {
    display: flex;
    align-items: center;
}

.finova-avatar-stack span {
    width: 34px;
    height: 34px;
    margin-left: -8px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: linear-gradient(135deg, #ffe3d4, #a5d8ff);
    box-shadow: 0 8px 18px rgba(0, 35, 100, .18);
}

.finova-avatar-stack span:first-child { margin-left: 0; }

.finova-visual {
    position: relative;
    min-height: 620px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.finova-visual::before {
    content: "";
    position: absolute;
    width: min(800px, 112%);
    height: 78%;
    right: -12%;
    bottom: 0;
    border-radius: 48% 0 0 48%;
    background: rgba(255,255,255,.18);
    transform: skewX(-8deg);
    filter: blur(.2px);
}

.finova-hero-people {
    position: relative;
    z-index: 2;
    width: min(840px, 128%);
    max-height: 710px;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 34px 58px rgba(0, 34, 101, .30));
    transform: translateX(34px);
}

.finova-float-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 178px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255,255,255,.92);
    color: #103071;
    box-shadow: var(--lp-card-shadow);
    backdrop-filter: blur(14px);
}

.finova-float-card i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0b68f2, #1aa4ff);
}

.finova-float-card strong,
.finova-float-card small {
    display: block;
    line-height: 1.15;
}

.finova-float-card strong { font-weight: 900; }
.finova-float-card small { color: var(--lp-muted); font-weight: 700; }
.finova-float-card.card-one { left: 3%; bottom: 30%; }
.finova-float-card.card-two { right: 0; top: 20%; }

.finova-feature-strip-wrap {
    position: relative;
    z-index: 7;
    width: min(1240px, calc(100% - 36px));
    margin: -54px auto 0;
}

.finova-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(15, 72, 180, .08);
    box-shadow: 0 24px 60px rgba(15, 47, 116, .14);
}

.finova-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    min-width: 0;
    border-right: 1px solid rgba(15, 72, 180, .10);
}

.finova-feature-item > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.finova-feature-item:last-child { border-right: 0; }

.finova-feature-icon {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #0865f6, #3aaeff);
    box-shadow: 0 14px 28px rgba(8, 101, 246, .20);
    position: relative;
}

.finova-feature-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.42rem;
    line-height: 1;
    transform: translateY(.5px);
}

.finova-feature-item:nth-child(2) .finova-feature-icon { background: linear-gradient(135deg, #08be89, #2be3b2); }
.finova-feature-item:nth-child(3) .finova-feature-icon { background: linear-gradient(135deg, #a139e8, #da63ff); }
.finova-feature-item:nth-child(4) .finova-feature-icon { background: linear-gradient(135deg, #ff8f2f, #ffc15a); }

.finova-feature-item strong,
.finova-feature-item span {
    display: block;
    line-height: 1.28;
}

.finova-feature-item strong {
    color: var(--lp-ink);
    font-weight: 900;
    font-size: 1.06rem;
    line-height: 1.15;
}

.finova-feature-item span {
    margin-top: 5px;
    color: var(--lp-muted);
    font-weight: 700;
    line-height: 1.32;
}

.finova-preview-section {
    width: min(1240px, calc(100% - 36px));
    margin: 30px auto 42px;
    display: grid;
    grid-template-columns: 1.08fr 1.1fr .92fr;
    gap: 22px;
}

.finova-mini-card,
.finova-blue-panel {
    border-radius: 24px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(15, 72, 180, .08);
    box-shadow: 0 18px 46px rgba(15, 47, 116, .10);
    padding: 22px;
    min-width: 0;
}

.finova-mini-card h3 {
    margin: 0 0 18px;
    color: var(--lp-ink) !important;
    font-size: 1.35rem;
    font-weight: 900;
}

.finova-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 15px;
    border-radius: 18px;
    background: #f8fbff;
    border: 1px solid rgba(15, 72, 180, .06);
}

.finova-summary-row small,
.finova-invoice-row small {
    color: var(--lp-muted);
    font-weight: 800;
}

.finova-summary-row strong,
.finova-invoice-row strong {
    display: block;
    color: var(--lp-ink);
    font-weight: 900;
    font-size: 1.22rem;
}

.finova-chip-up,
.finova-chip-down {
    padding: 5px 9px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.finova-chip-up { color: #078462; background: rgba(8,190,137,.13); }
.finova-chip-down { color: #0a78c0; background: rgba(26,164,255,.14); }

.finova-chart-placeholder {
    height: 126px;
    border-radius: 18px;
    background:
        linear-gradient(to top, rgba(8,101,246,.10), transparent),
        url("data:image/svg+xml,%3Csvg width='520' height='150' viewBox='0 0 520 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 115 C54 80 90 105 136 84 C182 62 226 72 267 51 C311 28 354 82 398 50 C444 17 476 40 520 18' fill='none' stroke='%230865f6' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    border: 1px solid rgba(8,101,246,.08);
}

.finova-invoice-row {
    display: grid;
    grid-template-columns: 42px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15,72,180,.08);
}
.finova-invoice-row:last-child { border-bottom: 0; }
.finova-invoice-row .doc {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0758df;
    background: #eef6ff;
}
.finova-invoice-row .amount {
    color: var(--lp-ink);
    font-weight: 900;
    white-space: nowrap;
}

.finova-blue-panel {
    color: #fff;
    background: linear-gradient(135deg, #003fc3, #0a83ff);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.finova-blue-panel::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -62px;
    top: -62px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
}
.finova-blue-panel h3 {
    position: relative;
    margin: 0 0 12px;
    color: #fff !important;
    font-weight: 900;
    font-size: clamp(1.55rem, 2.5vw, 2.1rem);
    line-height: 1.05;
}
.finova-blue-panel p {
    position: relative;
    margin: 0 0 22px;
    color: rgba(255,255,255,.88);
    font-weight: 600;
    line-height: 1.5;
}
.finova-blue-panel a {
    position: relative;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px;
    color: #0758df;
    background: #fff;
    text-decoration: none;
    font-weight: 900;
}

@media (max-width: 1100px) {
    .finova-menu { display: none; }
    .finova-hero-grid { grid-template-columns: 1fr !important; text-align: center; }
    .finova-hero-copy { display: flex; flex-direction: column; align-items: center; }
    .finova-visual { min-height: 520px; }
    .finova-hero-people { transform: translateX(0); width: min(760px, 100%); max-height: 680px; }
    .finova-feature-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .finova-feature-item:nth-child(2) { border-right: 0; }
    .finova-feature-item:nth-child(-n/**/+2) { border-bottom: 1px solid rgba(15,72,180,.10); }
    .finova-preview-section { grid-template-columns: 1fr 1fr; }
    .finova-blue-panel { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .finance-hero-shell.finova-hero {
        min-height: auto !important;
        padding: 18px 14px 86px !important;
    }
    .finova-navbar { margin-bottom: 30px !important; }
    .finova-brand-text { font-size: 1.45rem; }
    .finova-register { display: none; }
    .finova-hero-copy h1 {
        font-size: clamp(2.45rem, 12vw, 3.65rem) !important;
        max-width: 100%;
    }
    .finova-period-form { flex-direction: column; align-items: stretch; }
    .finova-period-form .btn { width: 100%; }
    .finova-actions { width: 100%; }
    .finova-primary,
    .finova-secondary { flex: 1 1 100%; }
    .finova-joined { justify-content: center; flex-wrap: wrap; }
    .finova-visual { min-height: 430px; margin-top: 6px; }
    .finova-hero-people { width: min(620px, 130%); max-height: 560px; }
    .finova-float-card { display: none; }
    .finova-feature-strip-wrap { margin-top: -58px; }
    .finova-feature-strip { grid-template-columns: 1fr; border-radius: 22px; }
    .finova-feature-item { border-right: 0 !important; border-bottom: 1px solid rgba(15,72,180,.10); padding: 18px; }
    .finova-feature-item:last-child { border-bottom: 0; }
    .finova-preview-section { grid-template-columns: 1fr; margin-top: 22px; }
}

@media (max-width: 420px) {
    .finova-brand-mark { width: 38px; height: 38px; border-radius: 13px; }
    .finova-login { font-size: .92rem; }
    .finova-hero-copy p { font-size: .98rem; }
    .finova-visual { min-height: 360px; }
}


/* === FINOVA PREMIUM POLISH V3: navbar, hero, feature card === */
.finova-hero {
    background:
        radial-gradient(circle at 82% 14%, rgba(255,255,255,.42), transparent 26%),
        radial-gradient(circle at 62% 78%, rgba(77,190,255,.38), transparent 31%),
        linear-gradient(135deg, #0049d9 0%, #0877f2 48%, #8fd4ff 100%) !important;
}

/* Navbar dikembalikan ke rule semula: tidak dioverride oleh polish V3. */

.finova-hero-grid {
    grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr) !important;
    gap: clamp(24px, 3.5vw, 48px) !important;
}

.finova-hero-copy {
    padding-top: 8px;
}

.finova-kicker {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.28) !important;
    box-shadow: 0 12px 28px rgba(0, 52, 160, .12);
}

.finova-hero-copy h1 {
    max-width: 650px !important;
    font-size: clamp(3.25rem, 5.95vw, 5.85rem) !important;
}

.finova-hero-copy p {
    max-width: 560px !important;
    font-size: clamp(1.04rem, 1.18vw, 1.22rem) !important;
}

.finova-visual {
    min-height: 690px !important;
    align-items: flex-end;
}

.finova-visual::before {
    width: min(880px, 120%) !important;
    height: 80% !important;
    right: -17% !important;
    bottom: 2% !important;
    opacity: .9;
}

.finova-hero-people {
    width: min(930px, 142%) !important;
    max-height: 790px !important;
    transform: translateX(58px) translateY(4px) !important;
    filter: drop-shadow(0 38px 64px rgba(0, 34, 101, .34)) !important;
}

.finova-float-card {
    border: 1px solid rgba(255,255,255,.55);
}

.finova-float-card.card-one {
    left: 0;
    bottom: 24%;
}

.finova-float-card.card-two {
    right: -3%;
    top: 18%;
}

.finova-feature-strip-wrap {
    width: min(1280px, calc(100% - 32px)) !important;
    margin-top: -70px !important;
}

.finova-feature-strip {
    border-radius: 26px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    box-shadow: 0 26px 64px rgba(13, 47, 118, .16) !important;
    backdrop-filter: blur(18px);
}

.finova-feature-item {
    position: relative;
    gap: 18px !important;
    padding: 24px 26px !important;
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.finova-feature-item:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, rgba(245,249,255,.96), rgba(255,255,255,.98));
    box-shadow: inset 0 -3px 0 rgba(8,101,246,.14);
}

.finova-feature-icon {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px !important;
    border-radius: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 16px 30px rgba(8,101,246,.22), inset 0 1px 0 rgba(255,255,255,.34) !important;
    position: relative !important;
    overflow: hidden !important;
}

.finova-feature-icon::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
    pointer-events: none;
}

.finova-feature-icon i {
    position: relative;
    z-index: 1;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 2rem !important;
    line-height: 1 !important;
    transform: none !important;
}

.finova-feature-item strong {
    font-size: 1.12rem !important;
    letter-spacing: -.01em;
}

.finova-feature-item span {
    font-size: .94rem;
}

.finova-preview-section {
    margin-top: 34px !important;
}

@media (max-width: 1100px) {    .finova-hero-grid {
        grid-template-columns: 1fr !important;
    }
    .finova-hero-copy h1,
    .finova-hero-copy p {
        max-width: 760px !important;
    }
    .finova-visual {
        min-height: 600px !important;
    }
    .finova-hero-people {
        width: min(820px, 112%) !important;
        max-height: 720px !important;
        transform: translateX(0) translateY(0) !important;
    }
    .finova-feature-strip-wrap {
        margin-top: -62px !important;
    }
}

@media (max-width: 720px) {    .finova-hero-copy h1 {
        font-size: clamp(2.55rem, 12vw, 3.85rem) !important;
    }
    .finova-visual {
        min-height: 450px !important;
    }
    .finova-hero-people {
        width: min(650px, 136%) !important;
        max-height: 590px !important;
        transform: translateX(0) translateY(0) !important;
    }
    .finova-feature-strip-wrap {
        margin-top: -52px !important;
    }
    .finova-feature-item {
        padding: 18px !important;
        align-items: center !important;
    }
    .finova-feature-icon {
        width: 62px !important;
        height: 62px !important;
        flex-basis: 62px !important;
        border-radius: 20px !important;
    }

    .finova-feature-icon i {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 420px) {
    .finova-visual {
        min-height: 380px !important;
    }
    .finova-hero-people {
        width: min(560px, 146%) !important;
    }
}


/* =====================================================
   HERO SPACING & VISUAL POSITION UPDATE
   - Jarak navbar ke card BMN Care Monitoring dibuat lebih lega
   - Card Terverifikasi diturunkan dekat kepala gambar
   - Gambar cowcewkeren.png diperbesar
   ===================================================== */

main.finance-hero-shell.finova-hero > .finova-navbar {
    margin-bottom: clamp(8px, 1.2vw, 18px) !important;
}

.finova-hero-grid {
    grid-template-columns: minmax(380px, .88fr) minmax(470px, 1.12fr) !important;
    gap: clamp(28px, 4.5vw, 64px) !important;
}

.finova-hero-copy {
    padding-top: 4px !important;
}

.finova-kicker {
    margin-top: 0 !important;
}

.finova-visual {
    min-height: 710px !important;
    align-items: flex-end !important;
}

.finova-visual::before {
    width: min(940px, 128%) !important;
    height: 82% !important;
    right: -18% !important;
    bottom: 0 !important;
}

.finova-hero-people {
    width: min(980px, 150%) !important;
    max-height: 840px !important;
    transform: translateX(58px) translateY(18px) !important;
    filter: drop-shadow(0 42px 70px rgba(0, 34, 101, .34)) !important;
}

.finova-float-card.card-two {
    right: 3% !important;
    top: 35% !important;
    transform: translateY(-50%) !important;
}

.finova-float-card.card-one {
    left: 1% !important;
    bottom: 24% !important;
}

@media (max-width: 1100px) {
    main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-bottom: clamp(8px, 1.6vw, 16px) !important;
    }

    .finova-hero-grid {
        grid-template-columns: 1fr !important;
    }

    .finova-visual {
        min-height: 620px !important;
    }

    .finova-hero-people {
        width: min(860px, 118%) !important;
        max-height: 760px !important;
        transform: translateX(0) translateY(12px) !important;
    }

    .finova-float-card.card-two {
        right: 10% !important;
        top: 24% !important;
        transform: none !important;
    }
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-bottom: 8px !important;
    }

    .finova-visual {
        min-height: 470px !important;
    }

    .finova-hero-people {
        width: min(680px, 142%) !important;
        max-height: 620px !important;
        transform: translateX(0) translateY(10px) !important;
    }

    .finova-float-card.card-two {
        right: 4% !important;
        top: 18% !important;
        transform: none !important;
    }

    .finova-float-card.card-one {
        left: 3% !important;
        bottom: 20% !important;
    }
}

@media (max-width: 420px) {
    .finova-visual {
        min-height: 390px !important;
    }

    .finova-hero-people {
        width: min(590px, 152%) !important;
        max-height: 540px !important;
    }
}


/* =====================================================
   FIX FINAL: JARAK NAVBAR KE BMN CARE MONITORING DIPEPETKAN
   Override diletakkan paling akhir agar mengalahkan rule sebelumnya.
   ===================================================== */

main.finance-hero-shell.finova-hero {
    padding-top: 0 !important;
}

main.finance-hero-shell.finova-hero > .finova-navbar {
    margin-bottom: 0 !important;
}

main.finance-hero-shell.finova-hero .finova-hero-grid {
    margin-top: -92px !important;
    padding-top: 0 !important;
    align-items: center !important;
}

main.finance-hero-shell.finova-hero .finova-hero-copy {
    padding-top: 0 !important;
    transform: translateY(-18px) !important;
}

main.finance-hero-shell.finova-hero .finova-kicker {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Visual kanan ikut dinaikkan sedikit agar tetap sejajar */
main.finance-hero-shell.finova-hero .finova-visual {
    transform: translateY(-28px) !important;
}

/* Feature strip tidak terlalu menabrak setelah hero dinaikkan */
.finova-feature-strip-wrap {
    margin-top: -58px !important;
}

@media (max-width: 1100px) {
    main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-bottom: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid {
        margin-top: -42px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-copy {
        transform: translateY(-8px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual {
        transform: translateY(-12px) !important;
    }
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-bottom: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid {
        margin-top: -20px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-copy {
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual {
        transform: none !important;
    }
}


/* =====================================================
   FIX FINAL: JARAK GAMBAR HERO KE FEATURE CARD DIPEPETKAN
   - Gambar cowcewkeren diturunkan mendekati card fitur
   - Feature strip dinaikkan sedikit agar jarak makin rapat
   ===================================================== */

main.finance-hero-shell.finova-hero {
    padding-bottom: 22px !important;
}

main.finance-hero-shell.finova-hero .finova-visual {
    transform: translateY(24px) !important;
}

main.finance-hero-shell.finova-hero .finova-hero-people {
    transform: translateX(58px) translateY(64px) !important;
}

.finova-feature-strip-wrap {
    margin-top: -96px !important;
}

@media (max-width: 1100px) {
    main.finance-hero-shell.finova-hero {
        padding-bottom: 18px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual {
        transform: translateY(18px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people {
        transform: translateX(0) translateY(46px) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -86px !important;
    }
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero {
        padding-bottom: 12px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual {
        transform: translateY(8px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people {
        transform: translateX(0) translateY(28px) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -66px !important;
    }
}


/* =====================================================
   V11: UKURAN GAMBAR DIPERBESAR 2 KALI LIPAT
   ===================================================== */

main.finance-hero-shell.finova-hero .finova-hero-people {
    width: min(1960px, 300%) !important;
    max-height: 1680px !important;
}

@media (max-width: 1100px) {
    main.finance-hero-shell.finova-hero .finova-hero-people {
        width: min(1720px, 236%) !important;
        max-height: 1520px !important;
    }
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero .finova-hero-people {
        width: min(1360px, 284%) !important;
        max-height: 1240px !important;
    }
}

@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-hero-people {
        width: min(1180px, 304%) !important;
        max-height: 1080px !important;
    }
}


/* =====================================================
   V12 FINAL RESPONSIVE: HP & TABLET DIRAPIKAN
   Fokus:
   - Desktop tetap mengikuti rule sebelumnya.
   - Tablet dan HP tidak memakai gambar 2x yang terlalu besar.
   - Hero, gambar, card fitur, navbar, dan tombol dibuat rapi.
   ===================================================== */

/* TABLET LANDSCAPE & TABLET PORTRAIT */
@media (min-width: 768px) and (max-width: 1199.98px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    main.finance-hero-shell.finova-hero {
        min-height: auto !important;
        padding: 0 22px 42px !important;
        overflow: hidden !important;
    }

    main.finance-hero-shell.finova-hero > .finova-navbar {
        width: calc(100% + 44px) !important;
        min-width: calc(100% + 44px) !important;
        margin-left: -22px !important;
        margin-right: -22px !important;
        margin-bottom: 18px !important;
        height: 62px !important;
        min-height: 62px !important;
        padding: 8px 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: visible !important;
    }

    .finance-logo-brand-image {
        height: 66px !important;
        max-width: 240px !important;
        object-fit: contain !important;
    }

    .finova-menu {
        display: flex !important;
        gap: 14px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .finova-menu a {
        font-size: .9rem !important;
        padding: 7px 4px !important;
        white-space: nowrap !important;
    }

    .finova-nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .finova-login {
        font-size: .9rem !important;
    }

    .finova-register {
        min-height: 40px !important;
        padding: 0 16px !important;
        border-radius: 14px !important;
        font-size: .9rem !important;
    }

    .finova-hero-grid {
        width: min(980px, 100%) !important;
        max-width: 980px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center !important;
        align-items: center !important;
    }

    .finova-hero-copy {
        width: 100% !important;
        max-width: 760px !important;
        margin: 0 auto !important;
        padding-top: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .finova-kicker {
        margin: 8px auto 18px !important;
        padding: 9px 15px !important;
        font-size: .95rem !important;
    }

    .finova-hero-copy h1 {
        max-width: 760px !important;
        margin: 0 auto 14px !important;
        font-size: clamp(3rem, 8vw, 5.2rem) !important;
        line-height: .95 !important;
        text-align: center !important;
    }

    .finova-hero-copy p {
        max-width: 660px !important;
        margin: 0 auto 18px !important;
        text-align: center !important;
        font-size: 1.08rem !important;
        line-height: 1.45 !important;
    }

    .finova-period-form {
        width: min(620px, 100%) !important;
        margin: 0 auto 16px !important;
    }

    .finova-actions {
        justify-content: center !important;
        width: min(620px, 100%) !important;
    }

    .finova-joined {
        justify-content: center !important;
        margin-top: 16px !important;
    }

    .finova-visual {
        width: 100% !important;
        min-height: 470px !important;
        margin: -4px auto 0 !important;
        transform: none !important;
        overflow: visible !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .finova-visual::before {
        width: min(820px, 110%) !important;
        height: 76% !important;
        right: 50% !important;
        transform: translateX(50%) skewX(-8deg) !important;
        bottom: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        width: min(760px, 108%) !important;
        max-height: 610px !important;
        transform: translateX(0) translateY(28px) !important;
        object-fit: contain !important;
        object-position: bottom center !important;
    }

    .finova-float-card.card-one {
        left: 8% !important;
        bottom: 14% !important;
        transform: scale(.9) !important;
    }

    .finova-float-card.card-two {
        right: 10% !important;
        top: 24% !important;
        transform: scale(.9) !important;
    }

    .finova-feature-strip-wrap {
        width: min(980px, calc(100% - 32px)) !important;
        margin: -36px auto 0 !important;
        position: relative !important;
        z-index: 10 !important;
    }

    .finova-feature-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        border-radius: 24px !important;
    }

    .finova-feature-item {
        min-height: 112px !important;
        padding: 18px !important;
        gap: 14px !important;
    }

    .finova-feature-item:nth-child(2) {
        border-right: 0 !important;
    }

    .finova-feature-item:nth-child(-n/**/+2) {
        border-bottom: 1px solid rgba(15,72,180,.10) !important;
    }

    .finova-feature-icon {
        width: 58px !important;
        height: 58px !important;
        flex: 0 0 58px !important;
        border-radius: 19px !important;
    }

    .finova-feature-icon i {
        font-size: 1.75rem !important;
        color: #fff !important;
    }

    .finova-preview-section,
    .finance-monitor-section {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* HP / SMARTPHONE */
@media (max-width: 767.98px) {
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        background: #f4f7fb !important;
    }

    body.finance-landing-page {
        padding-bottom: 80px !important;
    }

    main.finance-hero-shell.finova-hero {
        min-height: auto !important;
        padding: 0 14px 30px !important;
        overflow: hidden !important;
        border-radius: 0 0 28px 28px !important;
        background:
            radial-gradient(circle at 12% 4%, rgba(255,255,255,.25), transparent 34%),
            linear-gradient(180deg, #1764e8 0%, #0e4ed1 58%, #f4f7fb 58%, #f4f7fb 100%) !important;
    }

    main.finance-hero-shell.finova-hero > .finova-navbar {
        width: calc(100% + 28px) !important;
        min-width: calc(100% + 28px) !important;
        margin-left: -14px !important;
        margin-right: -14px !important;
        margin-bottom: 14px !important;
        height: 56px !important;
        min-height: 56px !important;
        padding: 6px 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        overflow: visible !important;
    }

    .finance-logo-image-link {
        height: 100% !important;
        max-width: 58vw !important;
    }

    .finance-logo-brand-image {
        height: 58px !important;
        max-width: 58vw !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .finova-menu {
        display: none !important;
    }

    .finova-nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        margin-left: auto !important;
    }

    .finova-login {
        font-size: .82rem !important;
        padding: 0 !important;
    }

    .finova-register {
        min-height: 34px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        font-size: .78rem !important;
        white-space: nowrap !important;
    }

    .finova-hero-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        margin: 0 auto !important;
        text-align: center !important;
        align-items: center !important;
    }

    .finova-hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
        transform: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .finova-kicker {
        margin: 6px auto 14px !important;
        padding: 8px 12px !important;
        max-width: 100% !important;
        font-size: .82rem !important;
        border-radius: 999px !important;
        white-space: normal !important;
    }

    .finova-hero-copy h1 {
        max-width: 100% !important;
        margin: 0 auto 12px !important;
        font-size: clamp(2.35rem, 13vw, 3.75rem) !important;
        line-height: .95 !important;
        letter-spacing: -.055em !important;
        text-align: center !important;
    }

    .finova-hero-copy p {
        max-width: 96% !important;
        margin: 0 auto 16px !important;
        color: rgba(255,255,255,.88) !important;
        font-size: .98rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    .finova-period-form {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto 14px !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
        border-radius: 18px !important;
    }

    .finova-period-form .btn,
    .finova-period-form select,
    .finova-period-form .form-control {
        width: 100% !important;
        min-height: 46px !important;
        border-radius: 14px !important;
    }

    .finova-actions {
        width: 100% !important;
        max-width: 420px !important;
        margin: 0 auto !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        justify-content: center !important;
    }

    .finova-primary,
    .finova-secondary {
        width: 100% !important;
        min-height: 46px !important;
        justify-content: center !important;
        padding: 0 12px !important;
        font-size: .86rem !important;
        white-space: nowrap !important;
    }

    .finova-joined {
        justify-content: center !important;
        margin-top: 14px !important;
        font-size: .86rem !important;
        text-align: center !important;
    }

    .finova-avatar-stack span {
        width: 28px !important;
        height: 28px !important;
    }

    .finova-visual {
        width: 100% !important;
        min-height: 330px !important;
        margin: -2px auto 0 !important;
        transform: none !important;
        overflow: visible !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    .finova-visual::before {
        width: 125% !important;
        height: 72% !important;
        right: 50% !important;
        bottom: 0 !important;
        border-radius: 44% 44% 0 0 !important;
        transform: translateX(50%) skewX(-6deg) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        width: min(520px, 126%) !important;
        max-height: 410px !important;
        transform: translateX(0) translateY(20px) !important;
        object-fit: contain !important;
        object-position: bottom center !important;
        filter: drop-shadow(0 24px 36px rgba(0, 34, 101, .30)) !important;
    }

    .finova-float-card {
        min-width: auto !important;
        padding: 9px 10px !important;
        border-radius: 14px !important;
        gap: 8px !important;
    }

    .finova-float-card i {
        width: 32px !important;
        height: 32px !important;
        border-radius: 11px !important;
        font-size: .9rem !important;
    }

    .finova-float-card strong {
        font-size: .82rem !important;
    }

    .finova-float-card small {
        font-size: .7rem !important;
    }

    .finova-float-card.card-one {
        left: 2% !important;
        bottom: 12% !important;
        transform: scale(.86) !important;
    }

    .finova-float-card.card-two {
        right: 2% !important;
        top: 16% !important;
        transform: scale(.84) !important;
    }

    .finova-feature-strip-wrap {
        width: calc(100% - 22px) !important;
        margin: -24px auto 0 !important;
        position: relative !important;
        z-index: 12 !important;
    }

    .finova-feature-strip {
        display: grid !important;
        grid-template-columns: 1fr !important;
        border-radius: 22px !important;
        overflow: hidden !important;
    }

    .finova-feature-item {
        min-height: 94px !important;
        padding: 16px !important;
        gap: 13px !important;
        align-items: center !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(15,72,180,.10) !important;
    }

    .finova-feature-item:last-child {
        border-bottom: 0 !important;
    }

    .finova-feature-icon {
        width: 54px !important;
        height: 54px !important;
        flex: 0 0 54px !important;
        border-radius: 18px !important;
    }

    .finova-feature-icon i {
        font-size: 1.6rem !important;
        color: #fff !important;
    }

    .finova-feature-item strong {
        font-size: 1rem !important;
        line-height: 1.15 !important;
    }

    .finova-feature-item span {
        font-size: .86rem !important;
        line-height: 1.25 !important;
    }

    .finova-preview-section {
        width: calc(100% - 22px) !important;
        margin: 22px auto 0 !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .finance-monitor-section {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .finance-monitor-card {
        border-radius: 24px !important;
    }
}

/* HP sangat kecil */
@media (max-width: 420px) {
    .finova-hero-copy h1 {
        font-size: clamp(2.08rem, 12.4vw, 3.05rem) !important;
    }

    .finova-actions {
        grid-template-columns: 1fr !important;
    }

    .finova-visual {
        min-height: 300px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        width: min(470px, 132%) !important;
        max-height: 370px !important;
        transform: translateX(0) translateY(18px) !important;
    }

    .finova-float-card.card-two {
        top: 12% !important;
        right: -2% !important;
    }

    .finova-float-card.card-one {
        left: -3% !important;
    }
}


/* =====================================================
   V13 NAVBAR UPDATE
   - Logo BMNCare diperbesar 4x
   - Menu navbar ditambah icon Bootstrap
   - Tombol Login Admin/Masuk dibuat pink seperti tombol filter
   - Navbar diberi jarak dari batas atas agar tidak terlalu mepet
   Rule lain tetap dipertahankan.
   ===================================================== */

main.finance-hero-shell.finova-hero {
    padding-top: clamp(14px, 1.8vw, 24px) !important;
}

main.finance-hero-shell.finova-hero > .finova-navbar {
    margin-top: clamp(8px, 1.1vw, 16px) !important;
    overflow: visible !important;
}

.finance-logo-image-link,
.finova-brand {
    overflow: visible !important;
}

.finance-logo-brand-image,
.finova-brand-mark img {
    height: clamp(150px, 12vw, 230px) !important;
    max-height: none !important;
    max-width: min(68vw, 760px) !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.finova-brand-mark {
    width: clamp(70px, 6vw, 112px) !important;
    height: clamp(70px, 6vw, 112px) !important;
    flex: 0 0 clamp(70px, 6vw, 112px) !important;
    border-radius: 26px !important;
}

.finova-brand-text {
    font-size: clamp(2.2rem, 4.2vw, 4.2rem) !important;
    line-height: 1 !important;
}

.finova-menu a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    line-height: 1 !important;
}

.finova-menu a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    transform: translateY(.5px);
}

.finova-menu a span {
    display: inline-block !important;
}

.finova-nav-actions .finova-login,
.finova-nav-actions .finova-register {
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff4fa3, #ff2d7f) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    box-shadow: 0 14px 30px rgba(255, 45, 127, .28) !important;
}

.finova-nav-actions .finova-login:hover,
.finova-nav-actions .finova-register:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(255, 45, 127, .36) !important;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero {
        padding-top: 12px !important;
    }

    main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-top: 8px !important;
        min-height: 74px !important;
        height: 74px !important;
    }

    .finance-logo-brand-image,
    .finova-brand-mark img {
        height: clamp(118px, 14vw, 176px) !important;
        max-width: min(42vw, 430px) !important;
    }

    .finova-brand-mark {
        width: 76px !important;
        height: 76px !important;
        flex-basis: 76px !important;
        border-radius: 22px !important;
    }

    .finova-brand-text {
        font-size: clamp(2rem, 4vw, 3.1rem) !important;
    }

    .finova-menu {
        gap: 10px !important;
    }

    .finova-menu a {
        gap: 5px !important;
        font-size: .82rem !important;
    }

    .finova-menu a i {
        font-size: .9rem !important;
    }
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero {
        padding-top: 10px !important;
    }

    main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-top: 6px !important;
        min-height: 66px !important;
        height: 66px !important;
        overflow: visible !important;
    }

    .finance-logo-brand-image,
    .finova-brand-mark img {
        height: clamp(88px, 24vw, 124px) !important;
        max-width: 64vw !important;
    }

    .finova-brand-mark {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
        border-radius: 18px !important;
    }

    .finova-brand-text {
        font-size: clamp(1.65rem, 7vw, 2.45rem) !important;
    }

    .finova-nav-actions .finova-login,
    .finova-nav-actions .finova-register {
        min-height: 36px !important;
        padding: 0 12px !important;
        border-radius: 12px !important;
        font-size: .78rem !important;
    }
}


/* =====================================================
   V14 LOGO BMNCARE PROPORSIONAL
   - Ukuran logobmncare.png diperbesar secara proporsional
   - Disesuaikan agar pas dengan card/box logo di navbar
   - Rule lain tetap
   ===================================================== */

/* Jika logo memakai box/mark + text */
.finova-brand {
    gap: 14px !important;
    align-items: center !important;
}

.finova-brand-mark {
    width: 66px !important;
    height: 66px !important;
    flex: 0 0 66px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 6px !important;
}

.finova-brand-mark img {
    width: 88% !important;
    height: 88% !important;
    max-width: 88% !important;
    max-height: 88% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.finova-brand-text {
    font-size: clamp(2rem, 3.4vw, 2.9rem) !important;
    line-height: 1 !important;
}

/* Jika halaman memakai image logo versi penuh */
.finance-logo-image-link {
    height: auto !important;
    max-width: none !important;
}

.finance-logo-brand-image {
    height: clamp(86px, 7vw, 118px) !important;
    max-width: min(42vw, 420px) !important;
    width: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .finova-brand {
        gap: 12px !important;
    }

    .finova-brand-mark {
        width: 58px !important;
        height: 58px !important;
        flex-basis: 58px !important;
        border-radius: 16px !important;
        padding: 5px !important;
    }

    .finova-brand-mark img {
        width: 88% !important;
        height: 88% !important;
        max-width: 88% !important;
        max-height: 88% !important;
    }

    .finova-brand-text {
        font-size: clamp(1.8rem, 3vw, 2.4rem) !important;
    }

    .finance-logo-brand-image {
        height: clamp(74px, 8.5vw, 98px) !important;
        max-width: min(44vw, 340px) !important;
    }
}

/* HP */
@media (max-width: 767.98px) {
    .finova-brand {
        gap: 10px !important;
    }

    .finova-brand-mark {
        width: 50px !important;
        height: 50px !important;
        flex-basis: 50px !important;
        border-radius: 14px !important;
        padding: 4px !important;
    }

    .finova-brand-mark img {
        width: 88% !important;
        height: 88% !important;
        max-width: 88% !important;
        max-height: 88% !important;
    }

    .finova-brand-text {
        font-size: clamp(1.45rem, 6vw, 2rem) !important;
    }

    .finance-logo-brand-image {
        height: clamp(58px, 13vw, 78px) !important;
        max-width: 58vw !important;
    }
}


/* =====================================================
   V15 LOGO TANPA CARD + DIPERBESAR 4X
   - Hilangkan card/box di belakang logo
   - Perbesar logobmncare.png 4x lipat
   - Rule lain tetap
   ===================================================== */

/* Jika memakai struktur brand mark + text */
.finova-brand {
    gap: 12px !important;
    align-items: center !important;
}

.finova-brand-mark {
    width: auto !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    overflow: visible !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.finova-brand-mark img {
    width: auto !important;
    height: clamp(92px, 8vw, 132px) !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* Jika memakai logo image penuh */
.finance-logo-image-link {
    overflow: visible !important;
    max-width: none !important;
}

.finance-logo-brand-image {
    width: auto !important;
    height: clamp(116px, 10vw, 168px) !important;
    max-width: min(70vw, 760px) !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: left center !important;
    filter:
        drop-shadow(0 0 6px rgba(255, 255, 255, .75))
        drop-shadow(0 0 14px rgba(255, 255, 255, .45))
        drop-shadow(0 0 26px rgba(255, 255, 255, .25)) !important;
}

/* Teks brand tetap proporsional */
.finova-brand-text {
    font-size: clamp(1.95rem, 3.2vw, 2.8rem) !important;
    line-height: 1 !important;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .finova-brand-mark img {
        height: clamp(78px, 9vw, 110px) !important;
    }

    .finance-logo-brand-image {
        height: clamp(94px, 11vw, 128px) !important;
        max-width: min(62vw, 520px) !important;
    }

    .finova-brand-text {
        font-size: clamp(1.8rem, 3vw, 2.35rem) !important;
    }
}

/* HP */
@media (max-width: 767.98px) {
    .finova-brand {
        gap: 10px !important;
    }

    .finova-brand-mark img {
        height: clamp(60px, 13vw, 82px) !important;
    }

    .finance-logo-brand-image {
        height: clamp(66px, 16vw, 92px) !important;
        max-width: 66vw !important;
    }

    .finova-brand-text {
        font-size: clamp(1.4rem, 5.8vw, 1.9rem) !important;
    }
}


/* =====================================================
   V19 FINAL: COWCEWKEREN FULL DESKTOP + RESPONSIVE HP/TABLET
   Masalah sebelumnya: width besar belum tampak penuh karena parent/grid
   dan max-height masih membatasi rendering gambar.
   Solusi: desktop dibuat absolute-fill di sisi kanan hero, sedangkan
   tablet/HP dikembalikan proporsional agar tidak merusak layout.
   ===================================================== */

/* DESKTOP: gambar memenuhi area kanan hero */
@media (min-width: 1200px) {
    main.finance-hero-shell.finova-hero {
        overflow: hidden !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid {
        grid-template-columns: minmax(410px, .82fr) minmax(560px, 1.18fr) !important;
        align-items: center !important;
        gap: clamp(20px, 3vw, 42px) !important;
        min-height: 720px !important;
        position: relative !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        position: relative !important;
        min-height: 760px !important;
        height: 760px !important;
        width: 100% !important;
        overflow: visible !important;
        display: block !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual::before,
    .finova-visual::before {
        width: 1040px !important;
        height: 82% !important;
        right: -260px !important;
        bottom: 0 !important;
        transform: skewX(-8deg) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        position: absolute !important;
        z-index: 3 !important;
        right: -310px !important;
        bottom: -58px !important;
        width: min(1380px, 92vw) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: bottom right !important;
        transform: none !important;
        filter: drop-shadow(0 42px 74px rgba(0, 34, 101, .34)) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one {
        left: -12px !important;
        bottom: 28% !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two {
        right: 26px !important;
        top: 26% !important;
        transform: none !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -74px !important;
        position: relative !important;
        z-index: 20 !important;
    }
}

/* TABLET: gambar besar tetapi tetap rapi, tidak memotong layout */
@media (min-width: 768px) and (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero {
        overflow: hidden !important;
        padding-bottom: 38px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        text-align: center !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        position: relative !important;
        min-height: 560px !important;
        height: 560px !important;
        width: 100% !important;
        margin: -8px auto 0 !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual::before,
    .finova-visual::before {
        width: min(900px, 116%) !important;
        height: 76% !important;
        right: 50% !important;
        bottom: 0 !important;
        transform: translateX(50%) skewX(-8deg) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        position: relative !important;
        z-index: 3 !important;
        width: min(900px, 122%) !important;
        max-width: none !important;
        max-height: none !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: bottom center !important;
        transform: translateY(40px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one {
        left: 8% !important;
        bottom: 16% !important;
        transform: scale(.9) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two {
        right: 8% !important;
        top: 22% !important;
        transform: scale(.9) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -36px !important;
        position: relative !important;
        z-index: 20 !important;
    }
}

/* SMARTPHONE: hero dirapikan, gambar tetap besar tetapi tidak melebar berantakan */
@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero {
        overflow: hidden !important;
        padding-bottom: 28px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        position: relative !important;
        width: 100% !important;
        min-height: 380px !important;
        height: 380px !important;
        margin: -4px auto 0 !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual::before,
    .finova-visual::before {
        width: 132% !important;
        height: 72% !important;
        right: 50% !important;
        bottom: 0 !important;
        border-radius: 44% 44% 0 0 !important;
        transform: translateX(50%) skewX(-6deg) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        position: relative !important;
        z-index: 3 !important;
        width: min(660px, 150%) !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
        object-fit: contain !important;
        object-position: bottom center !important;
        transform: translateY(28px) !important;
        filter: drop-shadow(0 24px 36px rgba(0, 34, 101, .30)) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one {
        left: -2% !important;
        bottom: 13% !important;
        transform: scale(.82) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two {
        right: -2% !important;
        top: 15% !important;
        transform: scale(.82) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -30px !important;
        position: relative !important;
        z-index: 20 !important;
    }
}

/* HP kecil */
@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: 330px !important;
        height: 330px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        width: min(600px, 158%) !important;
        transform: translateY(24px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two {
        top: 10% !important;
        right: -8% !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one {
        left: -8% !important;
    }
}


/* =====================================================
   V21: HILANGKAN LATAR PUTIH DI BELAKANG COWCEWKEREN
   UNTUK TABLET & SMARTPHONE
   - Area hero mobile/tablet dibuat full biru, tidak turun ke putih
   - Background/shape di area visual gambar dihilangkan
   - Rule lain tetap dipertahankan
   ===================================================== */

/* TABLET */
@media (min-width: 768px) and (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero {
        background:
            radial-gradient(circle at 85% 18%, rgba(255,255,255,.18), transparent 30%),
            radial-gradient(circle at 18% 12%, rgba(255,255,255,.16), transparent 26%),
            linear-gradient(135deg, #0f57df 0%, #2174ef 48%, #71bbff 100%) !important;
        border-radius: 0 0 32px 32px !important;
        padding-bottom: 54px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual::before,
    main.finance-hero-shell.finova-hero .finova-visual::after,
    .finova-visual::before,
    .finova-visual::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: min(940px, 126%) !important;
        max-width: none !important;
        max-height: none !important;
        transform: translateY(34px) !important;
        filter: drop-shadow(0 22px 34px rgba(0,34,101,.22)) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -26px !important;
        position: relative !important;
        z-index: 20 !important;
    }
}

/* SMARTPHONE */
@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero {
        background:
            radial-gradient(circle at 86% 16%, rgba(255,255,255,.18), transparent 30%),
            radial-gradient(circle at 14% 8%, rgba(255,255,255,.16), transparent 25%),
            linear-gradient(180deg, #1764e8 0%, #0f54d9 54%, #2c77ed 100%) !important;
        border-radius: 0 0 28px 28px !important;
        padding-bottom: 36px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid {
        padding-bottom: 8px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual::before,
    main.finance-hero-shell.finova-hero .finova-visual::after,
    .finova-visual::before,
    .finova-visual::after {
        display: none !important;
        content: none !important;
        background: transparent !important;
        box-shadow: none !important;
        filter: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        width: min(990px, 100%) !important;
        max-width: none !important;
        max-height: none !important;
        transform: translateY(22px) !important;
        filter: drop-shadow(0 20px 30px rgba(0,34,101,.22)) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -18px !important;
        position: relative !important;
        z-index: 20 !important;
    }
}

/* HP kecil */
@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-hero-people {
        width: min(620px, 162%) !important;
        transform: translateY(20px) !important;
    }

    .finova-feature-strip-wrap {
        margin-top: -14px !important;
    }
}


/* =====================================================
   V22 FINAL:
   - Logo BMNCare berpendar putih dan biru
   - Semua tulisan dipaksa memakai Roboto Condensed
   - Rule lain tetap dipertahankan
   ===================================================== */

/* IMPORT / ENFORCE FONT ROBOTO CONDENSED */


html,
body,
body.finance-landing-page,
.finance-landing-page,
.finance-landing-page *:not(i):not(.bi):not([class^="bi-"]):not([class*=" bi-"]),
.finance-landing-page input,
.finance-landing-page select,
.finance-landing-page textarea,
.finance-landing-page button,
.finance-landing-page .btn,
.finance-landing-page .form-control,
.finance-landing-page .form-select,
.finance-landing-page .table,
.finance-landing-page .dropdown-menu,
.finance-landing-page .nav,
.finance-landing-page .nav-link,
.finance-landing-page .pagination,
.finance-landing-page .modal,
.finance-landing-page .tooltip,
.finance-landing-page .popover,
.finance-landing-page label,
.finance-landing-page p,
.finance-landing-page h1,
.finance-landing-page h2,
.finance-landing-page h3,
.finance-landing-page h4,
.finance-landing-page h5,
.finance-landing-page h6,
.finance-landing-page span,
.finance-landing-page small,
.finance-landing-page strong,
.finance-landing-page a,
.finance-landing-page li,
.finance-landing-page th,
.finance-landing-page td {
    font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.finance-landing-page input::placeholder,
.finance-landing-page textarea::placeholder,
.finance-landing-page select,
.finance-landing-page option {
    font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}



/* LOGO BMNCARE BERPENDAR PUTIH DAN BIRU */
.finance-logo-image-link,
.finova-brand,
.finova-brand-mark {
    position: relative !important;
    overflow: visible !important;
}

.finance-logo-brand-image,
.finova-brand-mark img {
    position: relative !important;
    z-index: 2 !important;
    animation: bmncareWhiteBlueGlow 2.8s ease-in-out infinite !important;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.95))
        drop-shadow(0 0 18px rgba(255,255,255,.72))
        drop-shadow(0 0 32px rgba(39,133,255,.75))
        drop-shadow(0 0 56px rgba(0,102,255,.42)) !important;
}

.finance-logo-image-link::before,
.finova-brand::before {
    content: "" !important;
    position: absolute !important;
    inset: -16px -26px !important;
    border-radius: 999px !important;
    background:
        radial-gradient(circle,
            rgba(255,255,255,.52) 0%,
            rgba(255,255,255,.24) 24%,
            rgba(70,165,255,.24) 48%,
            rgba(0,102,255,.14) 66%,
            rgba(0,102,255,0) 82%) !important;
    filter: blur(16px) !important;
    opacity: .92 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    animation: bmncareAuraPulse 2.8s ease-in-out infinite !important;
}

@keyframes bmncareWhiteBlueGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 6px rgba(255,255,255,.72))
            drop-shadow(0 0 14px rgba(255,255,255,.46))
            drop-shadow(0 0 24px rgba(80,165,255,.52))
            drop-shadow(0 0 40px rgba(0,102,255,.24));
        transform: translateY(0) scale(1);
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(255,255,255,1))
            drop-shadow(0 0 22px rgba(255,255,255,.86))
            drop-shadow(0 0 42px rgba(98,182,255,.92))
            drop-shadow(0 0 68px rgba(0,102,255,.46));
        transform: translateY(0) scale(1.02);
    }
}

@keyframes bmncareAuraPulse {
    0%, 100% {
        opacity: .60;
        transform: scale(.96);
    }
    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

/* Sedikit pertegas elemen judul dan navbar agar konsisten */
.finance-logo-brand-image,
.finance-logo-text,
.finova-brand-text,
.finova-menu a,
.finova-login,
.finova-register,
.finova-hero-copy h1,
.finova-hero-copy p,
.finova-feature-item strong,
.finova-feature-item span,
.finance-monitor-titlebar h2,
.finance-monitor-titlebar p,
.finance-transaction-title h3,
.finance-transaction-title p {
    font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

@media (prefers-reduced-motion: reduce) {
    .finance-logo-brand-image,
    .finova-brand-mark img,
    .finance-logo-image-link::before,
    .finova-brand::before {
        animation: none !important;
    }
}



/* =====================================================
   V23 FINAL MOBILE/TABLET ICON-FIRST DASHBOARD
   Tampilan gadget mengikuti pola aplikasi mobile:
   - Menu utama berupa ikon bulat seperti contoh KAI Access
   - Kartu diringkas agar halaman tidak penuh card besar
   - Desktop tetap memakai rule yang sudah ada
   ===================================================== */
.finova-mobile-action-wrap {
    display: none !important;
}

@media (max-width: 991.98px) {
    .finova-mobile-action-wrap,
    .finova-mobile-action-wrap * {
        box-sizing: border-box !important;
        font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    }

    .finova-mobile-action-wrap {
        display: block !important;
        width: min(940px, calc(100% - 24px)) !important;
        margin: -38px auto 20px !important;
        position: relative !important;
        z-index: 46 !important;
    }

    .finova-mobile-action-card {
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 32px !important;
        background: rgba(255, 255, 255, .98) !important;
        border: 1px solid rgba(31, 94, 216, .12) !important;
        box-shadow:
            0 24px 54px rgba(8, 29, 90, .16),
            inset 0 1px 0 rgba(255, 255, 255, .72) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
    }

    .finova-mobile-wallet-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 18px 18px 14px !important;
        border-bottom: 1px solid rgba(17, 43, 111, .08) !important;
        background:
            radial-gradient(circle at 92% 8%, rgba(72, 198, 255, .20), transparent 34%),
            linear-gradient(180deg, rgba(255,255,255,.99), rgba(247,250,255,.96)) !important;
    }

    .finova-wallet-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: 11px !important;
        min-width: 0 !important;
    }

    .finova-wallet-logo {
        width: 46px !important;
        height: 46px !important;
        flex: 0 0 46px !important;
        border-radius: 17px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 1.32rem !important;
        background: linear-gradient(135deg, #112b6f 0%, #1f5ed8 48%, #48c6ff 100%) !important;
        box-shadow: 0 14px 28px rgba(31, 94, 216, .24) !important;
    }

    .finova-wallet-logo i,
    .finova-mobile-action-item i {
        font-family: "bootstrap-icons" !important;
    }

    .finova-wallet-brand strong {
        display: block !important;
        color: #112b6f !important;
        font-size: 1.28rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: -.025em !important;
    }

    .finova-wallet-brand small {
        display: block !important;
        margin-top: 4px !important;
        color: rgba(17, 43, 111, .58) !important;
        font-size: .84rem !important;
        font-weight: 800 !important;
        line-height: 1.05 !important;
    }

    .finova-wallet-activate {
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        padding: 9px 14px !important;
        border-radius: 999px !important;
        text-decoration: none !important;
        color: #1f5ed8 !important;
        background: #ffffff !important;
        border: 1px solid rgba(31, 94, 216, .22) !important;
        box-shadow: 0 10px 22px rgba(31, 94, 216, .10) !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .finova-mobile-point-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 12px 18px !important;
        border-bottom: 1px solid rgba(17, 43, 111, .08) !important;
        background: #ffffff !important;
    }

    .finova-mobile-point-row > span,
    .finova-mobile-point-row > a {
        min-width: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        text-decoration: none !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .finova-mobile-point-row > span {
        color: #f28a1a !important;
    }

    .finova-mobile-point-row > span strong {
        color: #112b6f !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .finova-mobile-point-row > a {
        color: #b58a00 !important;
        padding: 8px 11px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, rgba(255, 228, 107, .32), rgba(255, 246, 198, .82)) !important;
    }

    .finova-mobile-main-icons,
    .finova-mobile-sub-icons {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 16px 12px !important;
        padding: 18px 16px 12px !important;
    }

    .finova-mobile-sub-icons {
        padding: 10px 16px 20px !important;
        gap: 14px 10px !important;
    }

    .finova-mobile-action-item {
        appearance: none !important;
        border: 0 !important;
        background: transparent !important;
        width: 100% !important;
        min-width: 0 !important;
        display: inline-flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 0 !important;
        text-decoration: none !important;
        color: #101828 !important;
        font-size: .92rem !important;
        font-weight: 900 !important;
        line-height: 1.08 !important;
        text-align: center !important;
        cursor: pointer !important;
    }

    .finova-mobile-action-item .round {
        width: 64px !important;
        height: 64px !important;
        border-radius: 999px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        font-size: 1.55rem !important;
        box-shadow: 0 15px 26px rgba(15, 66, 175, .22) !important;
        transition: transform .18s ease, box-shadow .18s ease !important;
    }

    .finova-mobile-action-item:active .round {
        transform: scale(.94) !important;
        box-shadow: 0 8px 18px rgba(15, 66, 175, .18) !important;
    }

    .finova-mobile-action-item span:last-child {
        display: block !important;
        max-width: 100% !important;
        color: #101828 !important;
        overflow-wrap: anywhere !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(1) .round {
        background: linear-gradient(145deg, #8877ff 0%, #2b2fe8 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(2) .round {
        background: linear-gradient(145deg, #ffc23d 0%, #ff7b00 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(3) .round {
        background: linear-gradient(145deg, #ff8a22 0%, #ef1212 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(4) .round {
        background: linear-gradient(145deg, #c61aff 0%, #db0a9d 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(5) .round {
        background: linear-gradient(145deg, #62d7ff 0%, #087bc4 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(6) .round {
        background: linear-gradient(145deg, #45f1bc 0%, #0a9e7a 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(7) .round {
        background: linear-gradient(145deg, #5a9cff 0%, #0d4ed6 100%) !important;
    }

    .finova-mobile-main-icons .finova-mobile-action-item:nth-child(8) .round {
        background: linear-gradient(145deg, #ff6b7b 0%, #d51b51 100%) !important;
    }

    .finova-mobile-sub-icons .finova-mobile-action-item .round {
        width: 58px !important;
        height: 58px !important;
        color: #1f5ed8 !important;
        background: #eef5ff !important;
        box-shadow: none !important;
        border: 1px solid rgba(31, 94, 216, .08) !important;
    }

    .finova-mobile-sub-icons .finova-mobile-action-item {
        color: #1d2939 !important;
        font-size: .88rem !important;
    }

    /* Di tablet/HP, feature strip dan preview card lama disembunyikan agar tidak terasa penuh card. */
    .finova-feature-strip-wrap,
    .finova-preview-section {
        display: none !important;
    }

    /* Ringkasan tab dibuat compact horizontal, bukan menumpuk banyak card besar. */
    .finance-tab-stat-grid,
    .finance-cash-card-grid {
        display: flex !important;
        grid-template-columns: none !important;
        gap: 10px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 2px 2px 10px !important;
        margin-left: -2px !important;
        margin-right: -2px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .finance-tab-stat-grid::-webkit-scrollbar,
    .finance-cash-card-grid::-webkit-scrollbar {
        display: none !important;
    }

    .finance-tab-stat,
    .finance-cash-card {
        flex: 0 0 clamp(166px, 33vw, 214px) !important;
        min-height: 94px !important;
        padding: 12px !important;
        border-radius: 22px !important;
    }

    .finance-tab-stat strong,
    .finance-cash-card strong {
        font-size: clamp(1rem, 3.8vw, 1.22rem) !important;
        line-height: 1.06 !important;
    }

    .finance-tab-stat small,
    .finance-cash-card small {
        font-size: .78rem !important;
        line-height: 1.1 !important;
    }

    .finance-tab-large-icon {
        display: none !important;
    }

    .finance-tab-heading h3 {
        font-size: clamp(1.15rem, 4vw, 1.36rem) !important;
    }

    .finance-monitor-section {
        padding-top: 12px !important;
    }
}

@media (max-width: 767.98px) {
    .finova-mobile-action-wrap {
        width: calc(100% - 22px) !important;
        margin-top: -30px !important;
        margin-bottom: 16px !important;
    }

    .finova-mobile-action-card {
        border-radius: 28px !important;
    }

    .finova-mobile-wallet-row {
        padding: 16px 15px 12px !important;
    }

    .finova-wallet-brand strong {
        font-size: 1.15rem !important;
    }

    .finova-wallet-brand small {
        font-size: .78rem !important;
    }

    .finova-wallet-activate {
        min-height: 38px !important;
        padding: 8px 11px !important;
        font-size: .82rem !important;
    }

    .finova-mobile-point-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        align-items: stretch !important;
        padding: 11px 15px !important;
    }

    .finova-mobile-point-row > span,
    .finova-mobile-point-row > a {
        width: 100% !important;
        justify-content: center !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .finova-mobile-main-icons,
    .finova-mobile-sub-icons {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px 8px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .finova-mobile-action-item {
        font-size: .82rem !important;
    }

    .finova-mobile-action-item .round {
        width: 56px !important;
        height: 56px !important;
        font-size: 1.34rem !important;
    }

    .finova-mobile-sub-icons .finova-mobile-action-item .round {
        width: 52px !important;
        height: 52px !important;
    }
}

@media (max-width: 390px) {
    .finova-mobile-main-icons,
    .finova-mobile-sub-icons {
        gap: 12px 6px !important;
    }

    .finova-mobile-action-item .round {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.22rem !important;
    }

    .finova-mobile-sub-icons .finova-mobile-action-item .round {
        width: 48px !important;
        height: 48px !important;
    }

    .finova-mobile-action-item {
        font-size: .78rem !important;
    }
}


/* =====================================================
   SIMPLE MOBILE/TABLET PERIOD FILTER & HERO ACTIONS
   Filter bulan + tombol Tampilkan/Mulai Monitoring/Lihat Grafik
   dibuat lebih ramping agar layar gadget tidak penuh card besar.
   Rule lain tetap dipertahankan.
   ===================================================== */
@media (max-width: 991.98px) {
    main.finance-hero-shell.finova-hero .finova-period-form {
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        margin: 4px auto 8px !important;
        padding: 8px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 8px !important;
        flex-direction: initial !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .18) !important;
        border: 1px solid rgba(255, 255, 255, .26) !important;
        box-shadow: 0 8px 22px rgba(8, 29, 90, .10) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .flex-grow-1 {
        width: 100% !important;
        min-width: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .form-control,
    main.finance-hero-shell.finova-hero .finova-period-form .form-select,
    main.finance-hero-shell.finova-hero .finova-period-form select {
        width: 100% !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        border-radius: 14px !important;
        border: 0 !important;
        color: #103071 !important;
        background: rgba(255, 255, 255, .96) !important;
        font-size: .92rem !important;
        font-weight: 900 !important;
        box-shadow: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .btn {
        width: auto !important;
        min-width: 42px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 13px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        color: #0758df !important;
        background: #ffffff !important;
        font-size: .88rem !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        box-shadow: 0 8px 18px rgba(0, 44, 131, .14) !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .btn i {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    main.finance-hero-shell.finova-hero .finova-actions {
        width: min(620px, 100%) !important;
        max-width: 620px !important;
        margin: 0 auto 4px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
    }

    main.finance-hero-shell.finova-hero .finova-primary,
    main.finance-hero-shell.finova-hero .finova-secondary {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 0 12px !important;
        border-radius: 15px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        font-size: .88rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-align: center !important;
        box-shadow: 0 8px 20px rgba(8, 29, 90, .12) !important;
    }

    main.finance-hero-shell.finova-hero .finova-secondary .play-dot {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        font-size: .75rem !important;
    }

    .finance-monitor-filter {
        padding: 8px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, .78) !important;
        border: 1px solid rgba(31, 94, 216, .12) !important;
        box-shadow: none !important;
    }

    .finance-monitor-filter label {
        margin-bottom: 5px !important;
        font-size: .78rem !important;
        font-weight: 900 !important;
    }

    .finance-monitor-select {
        gap: 7px !important;
    }

    .finance-monitor-select .form-select {
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 13px !important;
        font-size: .86rem !important;
        font-weight: 900 !important;
    }

    .finance-monitor-select button {
        width: 40px !important;
        min-width: 40px !important;
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 13px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero .finova-period-form {
        max-width: 100% !important;
        margin: 0 auto 7px !important;
        padding: 6px !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        gap: 6px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, .14) !important;
        border-color: rgba(255, 255, 255, .22) !important;
        box-shadow: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .form-control,
    main.finance-hero-shell.finova-hero .finova-period-form .form-select,
    main.finance-hero-shell.finova-hero .finova-period-form select {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 11px !important;
        border-radius: 13px !important;
        font-size: .88rem !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        font-size: 0 !important;
        gap: 0 !important;
        box-shadow: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-period-form .btn i {
        font-size: 1.02rem !important;
        margin: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-actions {
        max-width: 100% !important;
        margin: 0 auto 2px !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    main.finance-hero-shell.finova-hero .finova-primary,
    main.finance-hero-shell.finova-hero .finova-secondary {
        min-height: 38px !important;
        padding: 0 8px !important;
        border-radius: 14px !important;
        font-size: .78rem !important;
        gap: 5px !important;
        box-shadow: none !important;
        letter-spacing: -.005em !important;
    }

    main.finance-hero-shell.finova-hero .finova-primary i {
        font-size: .92rem !important;
    }

    main.finance-hero-shell.finova-hero .finova-secondary .play-dot {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        font-size: .68rem !important;
    }

    .finance-monitor-titlebar {
        gap: 10px !important;
    }

    .finance-monitor-filter {
        width: 100% !important;
        padding: 7px !important;
        border-radius: 14px !important;
        background: #ffffff !important;
        margin-top: 2px !important;
    }

    .finance-monitor-filter label {
        display: none !important;
    }

    .finance-monitor-select .form-select {
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
        font-size: .84rem !important;
    }

    .finance-monitor-select button {
        width: 38px !important;
        min-width: 38px !important;
        height: 36px !important;
        min-height: 36px !important;
        border-radius: 12px !important;
    }
}

@media (max-width: 390px) {
    main.finance-hero-shell.finova-hero .finova-primary,
    main.finance-hero-shell.finova-hero .finova-secondary {
        font-size: .74rem !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    main.finance-hero-shell.finova-hero .finova-secondary .play-dot {
        display: none !important;
    }
}

/* =====================================================
   TRACKSPACE CONTENT ADJUSTMENT ONLY
   Struktur, class, radius, responsive, dan rasa visual
   mengikuti rule/style BMNCare Finova.
   ===================================================== */
.finova-brand-mark img { max-height: 76px !important; width: auto !important; object-fit: contain !important; }
.finova-brand-text::after { content: ""; color: #fff; font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.045em; }
.finova-hero-copy h1 { max-width: 760px !important; }
.finova-hero-copy h1::after { content: "Position "; color: #0758df; }
.finova-hero-copy p.trackspace-lead { max-width: 620px; color: rgba(255,255,255,.82); font-weight: 700; font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.55; margin: 16px 0 0; }
.trackspace-update-box { display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(610px,100%); margin-top:24px; padding:12px; border-radius:22px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); backdrop-filter:blur(14px); }
.trackspace-update-box label { display:block; color:#eaf7ff; font-weight:900; margin-bottom:3px; }
.trackspace-update-box strong { display:block; color:#fff; font-size:1.08rem; }
.trackspace-update-box a { min-height:48px; border-radius:16px; color:#112b6f; background:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; font-weight:900; text-decoration:none; white-space:nowrap; }
.finova-visual .finova-hero-people { filter: drop-shadow(0 30px 50px rgba(5,20,80,.24)); }
.trackspace-mini-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:18px; }
.trackspace-mini-card { padding:16px; border-radius:22px; background:rgba(255,255,255,.98); border:1px solid rgba(31,94,216,.12); box-shadow:0 18px 36px rgba(10,32,91,.08); }
.trackspace-mini-card span { display:block; color:rgba(17,43,111,.62); font-weight:800; font-size:.92rem; }
.trackspace-mini-card strong { display:block; color:#112b6f; font-size:clamp(1.45rem,3vw,2.2rem); font-weight:900; line-height:1; margin-top:5px; }
.trackspace-chart-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.trackspace-chart-shell { background:rgba(255,255,255,.98); border:1px solid rgba(31,92,211,.14); border-radius:28px; box-shadow:0 20px 48px rgba(10,32,91,.12); padding:18px; min-height:360px; }
.trackspace-chart-shell h4 { color:#112b6f; font-weight:900; margin:0 0 12px; }

/* =====================================================
   FIX CHART.JS RESIZE LOOP LANDING
   Canvas diberi tinggi tetap agar card grafik tidak terus
   membesar dan mendorong tampilan turun ke bawah.
   ===================================================== */
.trackspace-chart-shell {
    height: 360px !important;
    min-height: 360px !important;
    max-height: 360px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
.trackspace-chart-shell h4 {
    flex: 0 0 auto !important;
}
.trackspace-chart-shell canvas {
    display: block !important;
    width: 100% !important;
    height: 280px !important;
    max-height: 280px !important;
    flex: 1 1 auto !important;
}
@media (max-width: 576px) {
    .trackspace-chart-shell {
        height: 310px !important;
        min-height: 310px !important;
        max-height: 310px !important;
    }
    .trackspace-chart-shell canvas {
        height: 232px !important;
        max-height: 232px !important;
    }
}
.trackspace-table-card { background:#fff; border-radius:28px; border:1px solid rgba(31,92,211,.12); box-shadow:0 20px 48px rgba(10,32,91,.10); overflow:hidden; }
.trackspace-table-card .table { min-width:960px; margin-bottom:0; }
.trackspace-table-card th { color:rgba(17,43,111,.72); font-weight:900; text-transform:uppercase; font-size:.82rem; background:#f6f9ff; white-space:nowrap; }
.trackspace-table-card td { color:#112b6f; font-weight:700; vertical-align:middle; }
.trackspace-status-pill { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:7px 11px; border-radius:999px; font-size:.82rem; font-weight:900; white-space:nowrap; }
.trackspace-status-pill.ok { color:#0b6b56; background:rgba(56,242,183,.16); }
.trackspace-status-pill.warn { color:#8a5b00; background:rgba(255,193,7,.18); }
.trackspace-status-pill.blue { color:#1f5ed8; background:rgba(31,94,216,.12); }
.trackspace-list { display:grid; gap:12px; }
.trackspace-list-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:18px; background:#fff; border:1px solid rgba(31,92,211,.10); box-shadow:0 12px 26px rgba(10,32,91,.06); }
.trackspace-list-row strong { color:#112b6f; font-weight:900; }
.trackspace-list-row span { color:rgba(17,43,111,.62); font-weight:800; }
@media (max-width: 991.98px) { .trackspace-chart-grid { grid-template-columns:1fr; } .trackspace-mini-row { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 576px) { .trackspace-update-box { flex-direction:column; align-items:stretch; text-align:left; } .trackspace-update-box a { width:100%; } .trackspace-mini-row { grid-template-columns:1fr; } .trackspace-chart-shell { min-height:310px; padding:14px; } .finova-brand-text::after { font-size:1.55rem; } }


/* =====================================================
   TRACKSPACE TAB STYLE BMNCARE
   Tab monitoring disamakan dengan style BMNCare seperti contoh:
   titlebar putih, filter kanan, strip tab biru muda, tab aktif putih.
   ===================================================== */
.finance-monitor-section#grafik {
    background: #f7f9ff !important;
}

.finance-monitor-card {
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 30px !important;
    background: rgba(255, 255, 255, .98) !important;
    border: 1px solid rgba(31, 94, 216, .10) !important;
    box-shadow: 0 24px 60px rgba(10, 32, 91, .11) !important;
}

.finance-monitor-card > .alert {
    margin-left: clamp(18px, 3vw, 32px) !important;
    margin-right: clamp(18px, 3vw, 32px) !important;
}

.trackspace-bmncare-titlebar,
.finance-monitor-titlebar.trackspace-bmncare-titlebar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(18px, 3vw, 32px) !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    padding: clamp(22px, 3vw, 30px) clamp(22px, 4vw, 34px) clamp(18px, 2.6vw, 24px) !important;
    background: #ffffff !important;
}

.trackspace-bmncare-titlebar .finance-title-left,
.finance-monitor-titlebar.trackspace-bmncare-titlebar .finance-title-left {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}

.trackspace-bmncare-titlebar .finance-title-icon,
.finance-monitor-titlebar.trackspace-bmncare-titlebar .finance-title-icon {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f72ff, #2455e8) !important;
    box-shadow: 0 16px 32px rgba(31, 94, 216, .24) !important;
    font-size: 1.42rem !important;
}

.trackspace-bmncare-titlebar h2,
.finance-monitor-titlebar.trackspace-bmncare-titlebar h2 {
    margin: 0 !important;
    color: #112b6f !important;
    font-size: clamp(1.85rem, 3vw, 2.7rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -.055em !important;
    font-weight: 900 !important;
}

.trackspace-bmncare-titlebar p,
.finance-monitor-titlebar.trackspace-bmncare-titlebar p {
    margin: 6px 0 0 !important;
    color: rgba(17, 43, 111, .62) !important;
    font-size: .98rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}

.trackspace-monitor-access,
.finance-monitor-filter.trackspace-monitor-access {
    width: min(360px, 100%) !important;
    flex: 0 1 360px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.trackspace-monitor-access label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #20335c !important;
    font-size: .92rem !important;
    font-weight: 900 !important;
}

.trackspace-monitor-access .finance-monitor-select {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 8px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(31, 94, 216, .10) !important;
    box-shadow: 0 12px 30px rgba(10, 32, 91, .06) !important;
}

.trackspace-monitor-select-link {
    min-width: 0 !important;
    height: 40px !important;
    padding: 0 14px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    color: #112b6f !important;
    background: #ffffff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
}

.trackspace-monitor-select-link span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.trackspace-monitor-filter-button {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #ff6ba1, #ff4f8f) !important;
    text-decoration: none !important;
    box-shadow: 0 14px 26px rgba(255, 79, 143, .22) !important;
}

.trackspace-bmncare-tabs,
ul.finance-monitor-tabs.trackspace-bmncare-tabs {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: clamp(6px, 1.2vw, 18px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 clamp(18px, 3vw, 34px) 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    background: #f2f5ff !important;
    border-top: 1px solid rgba(31, 94, 216, .07) !important;
    border-bottom: 1px solid rgba(31, 94, 216, .07) !important;
}

.trackspace-bmncare-tabs::-webkit-scrollbar,
ul.finance-monitor-tabs.trackspace-bmncare-tabs::-webkit-scrollbar {
    display: none !important;
}

.trackspace-bmncare-tabs .nav-item,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-item {
    flex: 1 0 auto !important;
    min-width: clamp(138px, 13.5vw, 176px) !important;
    display: flex !important;
}

.trackspace-bmncare-tabs .nav-link,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    color: rgba(17, 43, 111, .58) !important;
    background: transparent !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.trackspace-bmncare-tabs .nav-link.active,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link.active {
    color: #112b6f !important;
    background: #ffffff !important;
    border-radius: 20px 20px 0 0 !important;
    box-shadow: 0 -8px 28px rgba(10, 32, 91, .06) !important;
    transform: translateY(0) !important;
}

.trackspace-bmncare-tabs .nav-link .tab-icon,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link .tab-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6e7eab !important;
    background: rgba(31, 94, 216, .08) !important;
    font-size: 1.06rem !important;
    box-shadow: none !important;
}

.trackspace-bmncare-tabs .nav-link.active .tab-icon,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link.active .tab-icon {
    color: #ffffff !important;
    background: linear-gradient(135deg, #2f72ff, #2455e8) !important;
    box-shadow: 0 12px 24px rgba(31, 94, 216, .22) !important;
}

.trackspace-bmncare-tabs .nav-link strong,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link strong {
    display: block !important;
    color: inherit !important;
    font-size: .98rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: -.01em !important;
}

.finance-tab-content {
    padding: clamp(14px, 2.5vw, 24px) !important;
    margin-top: 0 !important;
    background: #ffffff !important;
}

@media (max-width: 991.98px) {
    .trackspace-bmncare-titlebar,
    .finance-monitor-titlebar.trackspace-bmncare-titlebar {
        align-items: flex-start !important;
        padding: 20px 18px 16px !important;
    }

    .trackspace-monitor-access,
    .finance-monitor-filter.trackspace-monitor-access {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    .trackspace-bmncare-tabs,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs {
        padding-left: 14px !important;
        padding-right: 14px !important;
        gap: 8px !important;
    }

    .trackspace-bmncare-tabs .nav-item,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-item {
        min-width: 150px !important;
        flex: 0 0 auto !important;
    }
}

@media (max-width: 576px) {
    .finance-monitor-card {
        border-radius: 26px !important;
    }

    .trackspace-bmncare-titlebar .finance-title-icon,
    .finance-monitor-titlebar.trackspace-bmncare-titlebar .finance-title-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        border-radius: 17px !important;
    }

    .trackspace-bmncare-titlebar h2,
    .finance-monitor-titlebar.trackspace-bmncare-titlebar h2 {
        font-size: 1.55rem !important;
    }

    .trackspace-bmncare-titlebar p,
    .finance-monitor-titlebar.trackspace-bmncare-titlebar p {
        display: none !important;
    }

    .trackspace-monitor-access label {
        display: none !important;
    }

    .trackspace-bmncare-tabs .nav-link,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link {
        min-height: 62px !important;
        padding: 12px 13px !important;
        gap: 9px !important;
    }

    .trackspace-bmncare-tabs .nav-link .tab-icon,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link .tab-icon {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        border-radius: 13px !important;
    }

    .trackspace-bmncare-tabs .nav-link strong,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link strong {
        font-size: .9rem !important;
    }
}

    

/* =====================================================
   TRACKSPACE FINAL 5 TABS BMNCARE
   Menyamakan tab menjadi 5 menu utama: ringkasan, DBR,
   SIP, kondisi/usia, satker/nilai. Style lain tetap.
   ===================================================== */
ul.finance-monitor-tabs.trackspace-bmncare-tabs.trackspace-five-tabs {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

@media (min-width: 992px) {
    ul.finance-monitor-tabs.trackspace-bmncare-tabs.trackspace-five-tabs {
        display: grid !important;
        overflow: visible !important;
    }

    ul.finance-monitor-tabs.trackspace-bmncare-tabs.trackspace-five-tabs .nav-item {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }

    ul.finance-monitor-tabs.trackspace-bmncare-tabs.trackspace-five-tabs .nav-link {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}

@media (max-width: 991.98px) {
    ul.finance-monitor-tabs.trackspace-bmncare-tabs.trackspace-five-tabs {
        display: flex !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }
}

.trackspace-combined-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(31, 94, 216, .08);
    color: #112b6f;
    font-weight: 900;
    white-space: nowrap;
}


/* =====================================================
   TRACKSPACE COMPACT 80% FONT + RINGKASAN CHART 80%
   Huruf tetap Roboto Condensed. Data/rule/read-only tetap.
   ===================================================== */
.finance-monitor-card,
.finance-monitor-card *:not(i):not(.bi),
.finance-tab-content,
.finance-tab-content *:not(i):not(.bi),
.trackspace-chart-shell,
.trackspace-chart-shell *:not(i):not(.bi),
.trackspace-mini-card,
.trackspace-mini-card *:not(i):not(.bi),
.trackspace-list,
.trackspace-list *:not(i):not(.bi),
.trackspace-table-card,
.trackspace-table-card *:not(i):not(.bi) {
    font-family: "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.finance-monitor-card {
    font-size: 80% !important;
}

.trackspace-bmncare-titlebar,
.finance-monitor-titlebar.trackspace-bmncare-titlebar {
    padding: 22px 26px 16px !important;
}

.trackspace-bmncare-titlebar .finance-title-icon,
.finance-monitor-titlebar.trackspace-bmncare-titlebar .finance-title-icon {
    width: 43px !important;
    height: 43px !important;
    min-width: 43px !important;
    border-radius: 15px !important;
    font-size: 1rem !important;
}

.trackspace-bmncare-titlebar h2,
.finance-monitor-titlebar.trackspace-bmncare-titlebar h2 {
    font-size: clamp(1.35rem, 2.45vw, 1.95rem) !important;
    line-height: 1.02 !important;
}

.trackspace-bmncare-titlebar p,
.finance-monitor-titlebar.trackspace-bmncare-titlebar p,
.finance-tab-heading p {
    font-size: .78rem !important;
    line-height: 1.35 !important;
}

.trackspace-monitor-access label,
.finance-monitor-filter.trackspace-monitor-access label {
    font-size: .72rem !important;
}

.trackspace-monitor-access .trackspace-access-pill,
.finance-monitor-filter.trackspace-monitor-access .trackspace-access-pill {
    min-height: 39px !important;
    padding: 8px 12px !important;
    font-size: .78rem !important;
}

.trackspace-bmncare-tabs,
ul.finance-monitor-tabs.trackspace-bmncare-tabs {
    padding: 12px 20px 0 !important;
    gap: 8px !important;
}

.trackspace-bmncare-tabs .nav-link,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link {
    min-height: 55px !important;
    padding: 10px 12px !important;
    gap: 8px !important;
}

.trackspace-bmncare-tabs .nav-link .tab-icon,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link .tab-icon {
    width: 31px !important;
    height: 31px !important;
    min-width: 31px !important;
    border-radius: 11px !important;
    font-size: .86rem !important;
}

.trackspace-bmncare-tabs .nav-link strong,
ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link strong {
    font-size: .78rem !important;
    line-height: 1 !important;
}

.finance-tab-content {
    padding: 16px !important;
}

.finance-tab-heading h3 {
    font-size: clamp(1.12rem, 2vw, 1.52rem) !important;
    line-height: 1.08 !important;
}

.finance-tab-badge,
.trackspace-combined-note,
.trackspace-status-pill {
    font-size: .76rem !important;
    padding: 7px 10px !important;
}

.trackspace-mini-row {
    gap: 10px !important;
}

.trackspace-mini-card {
    padding: 13px 14px !important;
    border-radius: 18px !important;
}

.trackspace-mini-card span,
.trackspace-mini-card small,
.trackspace-list-row span,
.trackspace-table-card .table th,
.trackspace-table-card .table td {
    font-size: .76rem !important;
}

.trackspace-mini-card strong {
    font-size: clamp(1.12rem, 2.2vw, 1.55rem) !important;
    line-height: 1.02 !important;
}

.trackspace-chart-shell {
    border-radius: 19px !important;
    padding: 14px !important;
    min-height: 224px !important;
}

.trackspace-chart-shell h4,
.trackspace-list h4 {
    font-size: 1rem !important;
    line-height: 1.05 !important;
    margin-bottom: 10px !important;
}

.trackspace-list-row {
    padding: 10px 0 !important;
}

.trackspace-list-row strong {
    font-size: .86rem !important;
}

/* Ringkasan: grafik menjadi 80% dari ukuran awal 280px, tetap center dan tidak resize-loop. */
#tab-ringkasan .trackspace-chart-grid {
    width: 80% !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 12px !important;
}

#tab-ringkasan .trackspace-chart-shell {
    height: 224px !important;
    min-height: 224px !important;
    max-height: 224px !important;
    padding: 13px !important;
}

#tab-ringkasan .trackspace-chart-shell canvas {
    height: 176px !important;
    max-height: 176px !important;
}

@media (max-width: 991.98px) {
    .finance-monitor-card {
        font-size: 80% !important;
    }

    #tab-ringkasan .trackspace-chart-grid {
        width: 88% !important;
        max-width: 88% !important;
    }
}

@media (max-width: 576px) {
    .trackspace-bmncare-titlebar,
    .finance-monitor-titlebar.trackspace-bmncare-titlebar {
        padding: 17px 15px 13px !important;
    }

    .trackspace-bmncare-titlebar h2,
    .finance-monitor-titlebar.trackspace-bmncare-titlebar h2 {
        font-size: 1.28rem !important;
    }

    .trackspace-bmncare-tabs .nav-link,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link {
        min-height: 52px !important;
        padding: 10px 11px !important;
    }

    .trackspace-bmncare-tabs .nav-link strong,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link strong {
        font-size: .74rem !important;
    }

    .trackspace-bmncare-tabs .nav-link .tab-icon,
    ul.finance-monitor-tabs.trackspace-bmncare-tabs .nav-link .tab-icon {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        font-size: .78rem !important;
    }

    #tab-ringkasan .trackspace-chart-grid {
        width: 100% !important;
        max-width: 100% !important;
    }

    #tab-ringkasan .trackspace-chart-shell {
        height: 186px !important;
        min-height: 186px !important;
        max-height: 186px !important;
    }

    #tab-ringkasan .trackspace-chart-shell canvas {
        height: 142px !important;
        max-height: 142px !important;
    }
}

        

        /* =====================================================
           FEATURE STRIP DATABASE VALUES
           Menampilkan nilai ringkas dari database di bawah label fitur.
           Font tetap Roboto Condensed.
           ===================================================== */
        .finova-feature-item > div {
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: center !important;
            gap: 4px !important;
            min-width: 0 !important;
        }

        .finova-feature-value {
            display: block !important;
            width: 100% !important;
            margin-top: 2px !important;
            color: rgba(17, 43, 111, .58) !important;
            font-family: "Roboto Condensed", system-ui, sans-serif !important;
            font-size: clamp(.76rem, 1.2vw, .88rem) !important;
            line-height: 1.05 !important;
            font-weight: 800 !important;
            letter-spacing: .01em !important;
            white-space: nowrap !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
        }

        .finova-feature-item:nth-child(1) .finova-feature-value { color: rgba(31, 94, 216, .72) !important; }
        .finova-feature-item:nth-child(2) .finova-feature-value { color: rgba(8, 150, 115, .72) !important; }
        .finova-feature-item:nth-child(3) .finova-feature-value { color: rgba(139, 55, 220, .72) !important; }
        .finova-feature-item:nth-child(4) .finova-feature-value { color: rgba(202, 105, 18, .78) !important; }

        @media (max-width: 991.98px) {
            .finova-feature-value {
                font-size: .82rem !important;
                white-space: normal !important;
            }
        }


        /* =====================================================
           FEATURE STRIP MULTILINE RESPONSIVE VALUES
           Nilai database dibuat fleksibel: boleh 1, 2, atau lebih baris.
           Font tetap Roboto Condensed dan layout tidak terpotong.
           ===================================================== */
        .finova-feature-strip {
            align-items: stretch !important;
        }

        .finova-feature-item {
            align-items: flex-start !important;
            min-height: 122px !important;
            overflow: visible !important;
        }

        .finova-feature-item > div {
            width: 100% !important;
            min-width: 0 !important;
            overflow: visible !important;
        }

        .finova-feature-item strong {
            white-space: normal !important;
            overflow-wrap: anywhere !important;
        }

        .finova-feature-lines {
            width: 100% !important;
            display: flex !important;
            flex-wrap: wrap !important;
            align-items: flex-start !important;
            justify-content: flex-start !important;
            gap: 4px 7px !important;
            margin-top: 6px !important;
            min-width: 0 !important;
            overflow: visible !important;
        }

        .finova-feature-lines .finova-feature-chip {
            display: inline-flex !important;
            align-items: center !important;
            width: auto !important;
            max-width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            color: rgba(17, 43, 111, .62) !important;
            font-family: "Roboto Condensed", system-ui, sans-serif !important;
            font-size: clamp(.70rem, .95vw, .82rem) !important;
            line-height: 1.18 !important;
            font-weight: 800 !important;
            letter-spacing: .005em !important;
            white-space: normal !important;
            overflow: visible !important;
            overflow-wrap: anywhere !important;
            word-break: normal !important;
            text-overflow: clip !important;
        }

        .finova-feature-item:nth-child(1) .finova-feature-chip { color: rgba(31, 94, 216, .74) !important; }
        .finova-feature-item:nth-child(2) .finova-feature-chip { color: rgba(8, 150, 115, .74) !important; }
        .finova-feature-item:nth-child(3) .finova-feature-chip { color: rgba(139, 55, 220, .76) !important; }
        .finova-feature-item:nth-child(4) .finova-feature-chip { color: rgba(202, 105, 18, .80) !important; }

        @media (max-width: 1199.98px) {
            .finova-feature-item {
                min-height: 132px !important;
            }
        }

        @media (max-width: 991.98px) {
            .finova-feature-item {
                min-height: auto !important;
            }
            .finova-feature-lines .finova-feature-chip {
                font-size: .78rem !important;
            }
        }

        @media (max-width: 576px) {
            .finova-feature-lines {
                gap: 3px 6px !important;
            }
            .finova-feature-lines .finova-feature-chip {
                flex: 1 1 100% !important;
                font-size: .78rem !important;
            }
        }


/* =====================================================
   FIX HERO FLOATING CARDS SAFE POSITION
   - Card melayang tidak saling menutupi
   - Card tidak terpotong di kanan/kiri/atas hero
   - Nilai panjang seperti Rupiah bisa turun baris
   - Font tetap Roboto Condensed
   ===================================================== */
main.finance-hero-shell.finova-hero {
    overflow: hidden !important;
}

main.finance-hero-shell.finova-hero .finova-hero-grid {
    position: relative !important;
    overflow: visible !important;
}

main.finance-hero-shell.finova-hero .finova-visual,
.finova-visual {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate !important;
    padding-left: clamp(18px, 3vw, 54px) !important;
    padding-right: clamp(18px, 3vw, 54px) !important;
}

main.finance-hero-shell.finova-hero .finova-float-card,
.finova-float-card {
    z-index: 12 !important;
    max-width: min(310px, calc(100vw - 52px)) !important;
    min-width: clamp(188px, 16vw, 260px) !important;
    width: max-content !important;
    padding: 11px 14px !important;
    border-radius: 18px !important;
    gap: 10px !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    font-family: "Roboto Condensed", system-ui, sans-serif !important;
}

main.finance-hero-shell.finova-hero .finova-float-card span,
.finova-float-card span {
    min-width: 0 !important;
    display: block !important;
}

main.finance-hero-shell.finova-hero .finova-float-card strong,
.finova-float-card strong {
    display: block !important;
    max-width: 100% !important;
    font-family: "Roboto Condensed", system-ui, sans-serif !important;
    font-size: clamp(.9rem, 1vw, 1.08rem) !important;
    line-height: 1.05 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}

main.finance-hero-shell.finova-hero .finova-float-card small,
.finova-float-card small {
    display: block !important;
    max-width: 100% !important;
    margin-top: 2px !important;
    font-family: "Roboto Condensed", system-ui, sans-serif !important;
    font-size: clamp(.72rem, .78vw, .84rem) !important;
    line-height: 1.1 !important;
    overflow-wrap: anywhere !important;
}

main.finance-hero-shell.finova-hero .finova-float-card i,
.finova-float-card i {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
}

/* Desktop: kartu dipisahkan jauh dari tepi dan dari strip fitur */
@media (min-width: 1200px) {
    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: clamp(52px, 6vw, 112px) !important;
        right: auto !important;
        top: auto !important;
        bottom: clamp(176px, 31%, 250px) !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: clamp(88px, 8vw, 148px) !important;
        left: auto !important;
        top: clamp(54px, 9%, 86px) !important;
        bottom: auto !important;
        transform: none !important;
    }
}

/* Tablet: kartu tetap di dalam area visual, tidak tertutup strip */
@media (min-width: 768px) and (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card,
    .finova-float-card {
        min-width: 184px !important;
        max-width: 280px !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 7% !important;
        right: auto !important;
        top: auto !important;
        bottom: 24% !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 7% !important;
        left: auto !important;
        top: 10% !important;
        bottom: auto !important;
    }
}

/* Smartphone: kartu disusun aman secara vertikal agar tidak bertabrakan */
@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card,
    .finova-float-card {
        min-width: 168px !important;
        max-width: calc(100% - 24px) !important;
        padding: 8px 10px !important;
        border-radius: 15px !important;
        gap: 8px !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card i,
    .finova-float-card i {
        flex-basis: 32px !important;
        width: 32px !important;
        height: 32px !important;
        border-radius: 11px !important;
        font-size: .9rem !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card strong,
    .finova-float-card strong {
        font-size: .82rem !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card small,
    .finova-float-card small {
        font-size: .68rem !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        left: 12px !important;
        right: auto !important;
        top: 12px !important;
        bottom: auto !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 12px !important;
        right: auto !important;
        top: auto !important;
        bottom: 82px !important;
    }
}

@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-float-card,
    .finova-float-card {
        min-width: 150px !important;
        max-width: calc(100% - 20px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        left: 10px !important;
        top: 10px !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 10px !important;
        bottom: 66px !important;
    }
}



/* =====================================================
   FIX HERO UPDATE CARD COMPACT
   Card "Update data publik" diperkecil agar tidak menempel
   dengan tombol/elemen lain dan tetap responsif.
   ===================================================== */
main.finance-hero-shell.finova-hero .trackspace-update-box,
.trackspace-update-box {
    width: fit-content !important;
    max-width: min(465px, 100%) !important;
    min-width: 0 !important;
    margin-top: 18px !important;
    margin-bottom: 14px !important;
    padding: 9px 10px 9px 13px !important;
    border-radius: 18px !important;
    gap: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    box-sizing: border-box !important;
}

main.finance-hero-shell.finova-hero .trackspace-update-box > div,
.trackspace-update-box > div {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    padding-right: 4px !important;
}

main.finance-hero-shell.finova-hero .trackspace-update-box label,
.trackspace-update-box label {
    font-size: .82rem !important;
    line-height: 1.05 !important;
    margin-bottom: 4px !important;
    white-space: nowrap !important;
}

main.finance-hero-shell.finova-hero .trackspace-update-box strong,
.trackspace-update-box strong {
    font-size: .96rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
}

main.finance-hero-shell.finova-hero .trackspace-update-box a,
.trackspace-update-box a {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 13px !important;
    border-radius: 14px !important;
    gap: 7px !important;
    font-size: .84rem !important;
    line-height: 1 !important;
    box-shadow: 0 10px 22px rgba(8, 29, 90, .13) !important;
}

main.finance-hero-shell.finova-hero .trackspace-update-box a i,
.trackspace-update-box a i {
    font-size: .92rem !important;
    line-height: 1 !important;
}

main.finance-hero-shell.finova-hero .finova-actions {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    main.finance-hero-shell.finova-hero .trackspace-update-box,
    .trackspace-update-box {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 14px !important;
        margin-bottom: 12px !important;
        padding: 9px !important;
        border-radius: 16px !important;
        gap: 9px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
    }

    main.finance-hero-shell.finova-hero .trackspace-update-box label,
    .trackspace-update-box label {
        font-size: .76rem !important;
    }

    main.finance-hero-shell.finova-hero .trackspace-update-box strong,
    .trackspace-update-box strong {
        font-size: .86rem !important;
    }

    main.finance-hero-shell.finova-hero .trackspace-update-box a,
    .trackspace-update-box a {
        width: auto !important;
        min-width: 126px !important;
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 10px !important;
        border-radius: 13px !important;
        font-size: .76rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 430px) {
    main.finance-hero-shell.finova-hero .trackspace-update-box,
    .trackspace-update-box {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    main.finance-hero-shell.finova-hero .trackspace-update-box a,
    .trackspace-update-box a {
        width: 100% !important;
        min-width: 0 !important;
    }
}


/* =====================================================
   V23 HERO IMAGE FIX - 100% VIEWPORT PROPORSIONAL + WHITE GLOW
   - Gambar diperkecil agar pada zoom 100% terlihat utuh.
   - Tetap penuh, proporsional, transparan, dan tidak memotong konten.
   - Animasi pendar putih dibuat halus dan premium.
   Letakkan blok ini PALING BAWAH sebelum agar mengalahkan rule lama.
   ===================================================== */
main.finance-hero-shell.finova-hero .finova-visual,
.finova-visual {
    min-height: clamp(430px, 57vh, 620px) !important;
    height: auto !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

main.finance-hero-shell.finova-hero .finova-visual::before,
main.finance-hero-shell.finova-hero .finova-visual::after,
.finova-visual::before,
.finova-visual::after {
    display: none !important;
    content: none !important;
}

main.finance-hero-shell.finova-hero .finova-hero-people,
.finova-visual .finova-hero-people,
.finova-hero-people {
    display: block !important;
    width: clamp(360px, 41vw, 575px) !important;
    max-width: 100% !important;
    max-height: min(68vh, 620px) !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
    margin-inline: auto !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateX(0) translateY(0) scale(.96) !important;
    transform-origin: center bottom !important;
    will-change: filter, transform !important;
    animation: trackspacePeopleWhiteGlow 3.4s ease-in-out infinite !important;
    filter:
        drop-shadow(0 0 8px rgba(255,255,255,.88))
        drop-shadow(0 0 20px rgba(255,255,255,.54))
        drop-shadow(0 0 34px rgba(255,255,255,.30))
        drop-shadow(0 26px 44px rgba(0,34,101,.25)) !important;
}

@keyframes trackspacePeopleWhiteGlow {
    0%, 100% {
        transform: translateX(0) translateY(0) scale(.96) !important;
        filter:
            drop-shadow(0 0 7px rgba(255,255,255,.74))
            drop-shadow(0 0 18px rgba(255,255,255,.42))
            drop-shadow(0 0 30px rgba(255,255,255,.22))
            drop-shadow(0 24px 42px rgba(0,34,101,.24)) !important;
    }
    50% {
        transform: translateX(0) translateY(-4px) scale(.985) !important;
        filter:
            drop-shadow(0 0 12px rgba(255,255,255,1))
            drop-shadow(0 0 28px rgba(255,255,255,.76))
            drop-shadow(0 0 48px rgba(255,255,255,.42))
            drop-shadow(0 30px 52px rgba(0,34,101,.30)) !important;
    }
}

@media (min-width: 1200px) {
    main.finance-hero-shell.finova-hero .finova-hero-grid,
    .finova-hero-grid {
        grid-template-columns: minmax(420px, .98fr) minmax(390px, .82fr) !important;
        align-items: center !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: clamp(420px, 38vw, 590px) !important;
        max-height: min(66vh, 620px) !important;
    }
}

@media (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(92vw, 540px) !important;
        max-height: min(62vh, 560px) !important;
        transform: translateX(0) translateY(0) scale(.95) !important;
    }
}

@media (max-width: 991.98px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(360px, 54vh, 520px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(92vw, 500px) !important;
        max-height: min(58vh, 500px) !important;
        transform: translateX(0) translateY(0) scale(.94) !important;
    }
}

@media (max-width: 576px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(300px, 50vh, 420px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(96vw, 410px) !important;
        max-height: min(50vh, 405px) !important;
        transform: translateX(0) translateY(0) scale(.93) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        animation: none !important;
    }
}




/* =====================================================
   FINAL FIX COWCEWKEREN 820PX + CARD KANAN + RESPONSIVE
   - Desktop: 820px, lebih kecil dari versi 900px
   - Posisi kanan tetap sejajar card-two
   - Card paling kanan tetap berada di depan/menutupi gambar
   - Tablet, HP, smartphone tetap proporsional dan responsif
   ===================================================== */

main.finance-hero-shell.finova-hero .finova-visual,
.finova-visual {
    position: relative !important;
    min-height: clamp(620px, 76vh, 820px) !important;
    height: clamp(620px, 76vh, 820px) !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}



/* DESKTOP BESAR: gambar 820px, posisi tetap di kanan */
main.finance-hero-shell.finova-hero .finova-hero-people,
.finova-visual .finova-hero-people,
.finova-hero-people {
    position: absolute !important;
    z-index: 5 !important;
    width: 820px !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    right: 0 !important;
    bottom: -12px !important;
    object-fit: contain !important;
    object-position: bottom right !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    transform-origin: right bottom !important;
    will-change: filter !important;
    animation: cowcewkerenGlow820 2.8s ease-in-out infinite !important;
    filter:
        drop-shadow(0 0 11px rgba(255,255,255,.90))
        drop-shadow(0 0 30px rgba(255,255,255,.58))
        drop-shadow(0 30px 50px rgba(0,34,101,.24)) !important;
}

/* CARD KANAN TETAP MENUTUPI GAMBAR */
main.finance-hero-shell.finova-hero .finova-float-card.card-two,
.finova-float-card.card-two {
    right: 0 !important;
    top: 24% !important;
    transform: none !important;
    z-index: 22 !important;
}

main.finance-hero-shell.finova-hero .finova-float-card.card-one,
.finova-float-card.card-one {
    left: 4% !important;
    bottom: 28% !important;
    transform: none !important;
    z-index: 21 !important;
}

@keyframes cowcewkerenGlow820 {
    0%, 100% {
        filter:
            drop-shadow(0 0 9px rgba(255,255,255,.72))
            drop-shadow(0 0 22px rgba(255,255,255,.42))
            drop-shadow(0 28px 46px rgba(0,34,101,.20));
    }
    50% {
        filter:
            drop-shadow(0 0 20px rgba(255,255,255,1))
            drop-shadow(0 0 46px rgba(255,255,255,.78))
            drop-shadow(0 34px 58px rgba(0,34,101,.28));
    }
}

/* TABLET LANDSCAPE / LAPTOP KECIL */
@media (min-width: 992px) and (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: 610px !important;
        height: 610px !important;
        display: block !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        position: absolute !important;
        z-index: 5 !important;
        width: min(780px, 106vw) !important;
        max-width: none !important;
        right: 50% !important;
        bottom: -6px !important;
        transform: translateX(50%) !important;
        object-position: bottom center !important;
        animation: cowcewkerenGlow820 2.8s ease-in-out infinite !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 8% !important;
        top: 22% !important;
        z-index: 22 !important;
    }
}

/* TABLET PORTRAIT / HP BESAR */
@media (max-width: 991.98px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(420px, 56vh, 590px) !important;
        height: auto !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        position: relative !important;
        z-index: 5 !important;
        width: min(720px, 108vw) !important;
        max-width: none !important;
        height: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: translateY(5px) !important;
        object-fit: contain !important;
        object-position: bottom center !important;
        animation: cowcewkerenGlow820 2.8s ease-in-out infinite !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 8% !important;
        top: 20% !important;
        z-index: 22 !important;
    }
}

/* SMARTPHONE */
@media (max-width: 576px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(340px, 50vh, 470px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
width: min(1100px, 150vw) !important;
        transform: translateY(3px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 4% !important;
        top: 17% !important;
        transform: scale(.90) !important;
        transform-origin: right top !important;
        z-index: 22 !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 3% !important;
        bottom: 18% !important;
        transform: scale(.88) !important;
        transform-origin: left bottom !important;
        z-index: 21 !important;
    }
}

@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(320px, 48vh, 440px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(520px, 122vw) !important;
        transform: translateY(2px) !important;
    }
}






/* =====================================================
   FINAL FIX: GAMBAR COWCEWKEREN DI BAWAH SEMUA TULISAN
   - Hero dibuat 1 kolom: tulisan di atas, gambar di bawah
   - Gambar tetap proporsional, halus, responsif
   - Card melayang tetap berada di atas gambar
   ===================================================== */

main.finance-hero-shell.finova-hero .finova-hero-grid,
.finova-hero-grid {
    width: min(1120px, 100%) !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
        "copy"
        "visual" !important;
    align-items: center !important;
    justify-items: center !important;
    gap: clamp(14px, 2.4vw, 26px) !important;
    text-align: center !important;
}

main.finance-hero-shell.finova-hero .finova-hero-copy,
.finova-hero-copy {
    grid-area: copy !important;
    order: 1 !important;
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding-top: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    position: relative !important;
    z-index: 30 !important;
}

main.finance-hero-shell.finova-hero .finova-kicker,
.finova-kicker {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    text-align: center !important;
}

main.finance-hero-shell.finova-hero .finova-hero-copy h1,
.finova-hero-copy h1 {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    text-wrap: balance !important;
}

main.finance-hero-shell.finova-hero .finova-hero-copy p,
.finova-hero-copy p {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

main.finance-hero-shell.finova-hero .finova-period-form,
.finova-period-form,
main.finance-hero-shell.finova-hero .finova-actions,
.finova-actions,
main.finance-hero-shell.finova-hero .finova-joined,
.finova-joined {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}

main.finance-hero-shell.finova-hero .finova-visual,
.finova-visual {
    grid-area: visual !important;
    order: 2 !important;
    position: relative !important;
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    min-height: clamp(500px, 62vh, 720px) !important;
    height: clamp(500px, 62vh, 720px) !important;
    margin: clamp(6px, 1.4vw, 16px) auto 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
}



main.finance-hero-shell.finova-hero .finova-hero-people,
.finova-visual .finova-hero-people,
.finova-hero-people {
    position: absolute !important;
    z-index: 5 !important;
width: min(1100px, 150vw) !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    right: 50% !important;
    left: auto !important;
    bottom: -10px !important;
    object-fit: contain !important;
    object-position: bottom center !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateX(50%) !important;
    transform-origin: center bottom !important;
    will-change: filter !important;
    animation: cowcewkerenGlowBelowText 2.8s ease-in-out infinite !important;
    filter:
        drop-shadow(0 0 11px rgba(255,255,255,.90))
        drop-shadow(0 0 30px rgba(255,255,255,.58))
        drop-shadow(0 30px 50px rgba(0,34,101,.24)) !important;
}

/* Card tetap melayang di atas gambar, bukan menutupi tulisan */
main.finance-hero-shell.finova-hero .finova-float-card,
.finova-float-card {
    z-index: 22 !important;
}

main.finance-hero-shell.finova-hero .finova-float-card.card-two,
.finova-float-card.card-two {
    right: 9% !important;
    top: 26% !important;
    transform: none !important;
    z-index: 24 !important;
}

main.finance-hero-shell.finova-hero .finova-float-card.card-one,
.finova-float-card.card-one {
    left: 10% !important;
    bottom: 24% !important;
    transform: none !important;
    z-index: 23 !important;
}

@keyframes cowcewkerenGlowBelowText {
    0%, 100% {
        filter:
            drop-shadow(0 0 9px rgba(255,255,255,.72))
            drop-shadow(0 0 22px rgba(255,255,255,.42))
            drop-shadow(0 28px 46px rgba(0,34,101,.20));
    }
    50% {
        filter:
            drop-shadow(0 0 20px rgba(255,255,255,1))
            drop-shadow(0 0 46px rgba(255,255,255,.78))
            drop-shadow(0 34px 58px rgba(0,34,101,.28));
    }
}

/* TABLET LANDSCAPE / LAPTOP KECIL */
@media (min-width: 992px) and (max-width: 1199.98px) {
    main.finance-hero-shell.finova-hero .finova-hero-grid,
    .finova-hero-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "copy"
            "visual" !important;
        gap: 18px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        width: min(960px, 100%) !important;
        min-height: 600px !important;
        height: 600px !important;
        margin-top: 4px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(760px, 94vw) !important;
        right: 50% !important;
        bottom: -8px !important;
        transform: translateX(50%) !important;
        object-position: bottom center !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 8% !important;
        top: 22% !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 8% !important;
        bottom: 22% !important;
    }
}

/* TABLET PORTRAIT / HP BESAR */
@media (max-width: 991.98px) {
    main.finance-hero-shell.finova-hero .finova-hero-grid,
    .finova-hero-grid {
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "copy"
            "visual" !important;
        gap: 14px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        width: 100% !important;
        min-height: clamp(430px, 56vh, 590px) !important;
        height: clamp(430px, 56vh, 590px) !important;
        margin-top: 2px !important;
        display: block !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        position: absolute !important;
        width: min(700px, 106vw) !important;
        right: 50% !important;
        bottom: -4px !important;
        transform: translateX(50%) !important;
        object-position: bottom center !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 7% !important;
        top: 18% !important;
        transform: scale(.92) !important;
        transform-origin: right top !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 7% !important;
        bottom: 18% !important;
        transform: scale(.92) !important;
        transform-origin: left bottom !important;
    }
}

/* SMARTPHONE */
@media (max-width: 576px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(360px, 48vh, 460px) !important;
        height: clamp(360px, 48vh, 460px) !important;
        margin-top: 0 !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(540px, 116vw) !important;
        bottom: -2px !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    .finova-float-card.card-two {
        right: 3% !important;
        top: 14% !important;
        transform: scale(.84) !important;
    }

    main.finance-hero-shell.finova-hero .finova-float-card.card-one,
    .finova-float-card.card-one {
        left: 3% !important;
        bottom: 15% !important;
        transform: scale(.82) !important;
    }
}

/* HP KECIL */
@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(330px, 46vh, 420px) !important;
        height: clamp(330px, 46vh, 420px) !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(500px, 122vw) !important;
    }
}





/* =====================================================
   FIX FINAL KHUSUS SMARTPHONE
   - Hanya mengatur posisi gambar hero saat diakses dari HP
   - Gambar diturunkan dan dirapatkan ke card mobile di bawahnya
   - Rule desktop/tablet besar dan style card tetap dipertahankan
   ===================================================== */
@media (max-width: 576px) {
    main.finance-hero-shell.finova-hero {
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-grid,
    .finova-hero-grid {
        gap: 4px !important;
        margin-bottom: -18px !important;
    }

    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(365px, 49vh, 450px) !important;
        height: clamp(365px, 49vh, 450px) !important;
        margin-top: -4px !important;
        margin-bottom: -24px !important;
        overflow: visible !important;
        transform: none !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(560px, 124vw) !important;
        right: 50% !important;
        left: auto !important;
        bottom: -18px !important;
        transform: translateX(50%) !important;
        object-position: bottom center !important;
    }

    .finova-mobile-action-wrap {
        margin-top: -36px !important;
        margin-bottom: 14px !important;
        position: relative !important;
        z-index: 46 !important;
    }
}

@media (max-width: 420px) {
    main.finance-hero-shell.finova-hero .finova-visual,
    .finova-visual {
        min-height: clamp(340px, 47vh, 420px) !important;
        height: clamp(340px, 47vh, 420px) !important;
        margin-bottom: -28px !important;
    }

    main.finance-hero-shell.finova-hero .finova-hero-people,
    .finova-visual .finova-hero-people,
    .finova-hero-people {
        width: min(520px, 126vw) !important;
        bottom: -22px !important;
    }

    .finova-mobile-action-wrap {
        margin-top: -42px !important;
    }
}

/* =====================================================
   FIX: HILANGKAN PEMBUNGKUS LUAR FILTER LOKASI SATKER
   Yang tersisa hanya dropdown putihnya saja.
   ===================================================== */

.trackspace-satker-filter-clean,
.trackspace-monitor-access.trackspace-satker-filter-clean,
.trackspace-bmncare-titlebar .trackspace-satker-filter-clean,
.finance-monitor-titlebar .trackspace-satker-filter-clean {
    width: min(420px, 100%) !important;
    min-width: min(420px, 100%) !important;
    flex: 0 1 420px !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.trackspace-satker-filter-clean label {
    display: none !important;
}

.trackspace-satker-filter-clean .finance-monitor-select {
    width: 100% !important;
    display: block !important;

    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.trackspace-satker-filter-clean .trackspace-monitor-select-control,
.trackspace-satker-filter-clean .trackspace-monitor-select-link {
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid rgba(31, 94, 216, .08) !important;
    box-shadow: 0 14px 32px rgba(10, 32, 91, .08) !important;
}

@media (max-width: 767.98px) {
    .trackspace-satker-filter-clean,
    .trackspace-monitor-access.trackspace-satker-filter-clean,
    .trackspace-bmncare-titlebar .trackspace-satker-filter-clean,
    .finance-monitor-titlebar .trackspace-satker-filter-clean {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;

        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}



/* =====================================================
   V24 FINAL HERO DECOR ICON + DASHED ARROW FLOW
   - Menambahkan ikon Bootstrap relevan di belakang gambar hero
   - Menambahkan panah/garis putus-putus seperti referensi
   - Rule ukuran gambar, posisi card, desktop/tablet/HP tetap dipertahankan
   ===================================================== */
.finova-visual {
    isolation: isolate !important;
}

.finova-visual::before {
    z-index: 0 !important;
}

.finova-visual-decor,
.finova-visual-arrows,
.finova-decor-icon,
.finova-decor-dot {
    pointer-events: none !important;
}

.finova-visual-decor {
    position: absolute !important;
    inset: -24px -40px -10px -40px !important;
    z-index: 1 !important;
    overflow: visible !important;
}

.finova-visual-arrows {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    opacity: .9 !important;
}

.finova-arrow-path {
    fill: none !important;
    stroke: rgba(255, 255, 255, .78) !important;
    stroke-width: 4.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-dasharray: 9 16 !important;
    marker-end: url(#finovaArrowHead) !important;
    filter: drop-shadow(0 8px 14px rgba(7, 51, 151, .16)) !important;
}

.finova-arrow-head {
    fill: rgba(255, 255, 255, .84) !important;
}

.finova-decor-icon {
    position: absolute !important;
    width: clamp(54px, 5vw, 88px) !important;
    height: clamp(54px, 5vw, 88px) !important;
    border-radius: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: rgba(255, 255, 255, .78) !important;
    border: 2px solid rgba(255, 255, 255, .42) !important;
    background: rgba(255, 255, 255, .055) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .18),
        0 14px 30px rgba(0, 45, 130, .10) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
    opacity: .78 !important;
    transform-origin: center !important;
}

.finova-decor-icon i {
    font-family: "bootstrap-icons" !important;
    font-size: clamp(1.75rem, 3.2vw, 3rem) !important;
    line-height: 1 !important;
    color: currentColor !important;
}

.finova-decor-icon.icon-dashboard {
    left: 1.5% !important;
    top: 10% !important;
    transform: rotate(-1deg) !important;
}

.finova-decor-icon.icon-chart {
    left: 5% !important;
    bottom: 28% !important;
    transform: rotate(-2deg) !important;
}

.finova-decor-icon.icon-clipboard {
    left: 12% !important;
    bottom: 8% !important;
    transform: rotate(2deg) !important;
}

.finova-decor-icon.icon-bars {
    left: 28% !important;
    top: 23% !important;
    transform: rotate(-4deg) scale(.82) !important;
}

.finova-decor-icon.icon-speed {
    left: 34% !important;
    bottom: 5% !important;
    transform: rotate(4deg) !important;
}

.finova-decor-icon.icon-wallet {
    right: 23% !important;
    top: 12% !important;
    transform: rotate(1deg) !important;
}

.finova-decor-icon.icon-cash {
    right: 3% !important;
    top: 17% !important;
    transform: rotate(-12deg) !important;
}

.finova-decor-icon.icon-activity {
    right: 7% !important;
    bottom: 26% !important;
    transform: rotate(4deg) scale(.88) !important;
}

.finova-decor-dot {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    border-radius: 999px !important;
    border: 4px solid rgba(255, 255, 255, .78) !important;
    filter: drop-shadow(0 8px 16px rgba(7, 51, 151, .12)) !important;
    opacity: .78 !important;
}

.finova-decor-dot::before,
.finova-decor-dot::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 34px !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .78) !important;
    transform: translate(-50%, -50%) !important;
}

.finova-decor-dot::after {
    transform: translate(-50%, -50%) rotate(90deg) !important;
}

.finova-decor-dot.dot-one { left: 43%; top: 14%; }
.finova-decor-dot.dot-two { left: 50%; top: 38%; transform: scale(.82); }
.finova-decor-dot.dot-three { left: 24%; bottom: 24%; transform: scale(.72); }
.finova-decor-dot.dot-four { right: 18%; bottom: 12%; transform: scale(1.05); }

main.finance-hero-shell.finova-hero .finova-hero-people,
.finova-hero-people {
    z-index: 3 !important;
}

main.finance-hero-shell.finova-hero .finova-float-card,
.finova-float-card {
    z-index: 5 !important;
}

@media (min-width: 1200px) {
    main.finance-hero-shell.finova-hero .finova-visual-decor {
        inset: -34px -72px -18px -54px !important;
    }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .finova-visual-decor {
        inset: -18px -28px -8px -28px !important;
        opacity: .92 !important;
    }

    .finova-arrow-path {
        stroke-width: 4.2 !important;
        stroke-dasharray: 8 15 !important;
    }

    .finova-decor-icon {
        width: clamp(48px, 7vw, 74px) !important;
        height: clamp(48px, 7vw, 74px) !important;
        border-radius: 20px !important;
        opacity: .62 !important;
    }

    .finova-decor-icon i {
        font-size: clamp(1.45rem, 4.4vw, 2.35rem) !important;
    }

    .finova-decor-icon.icon-dashboard { left: 7% !important; top: 9% !important; }
    .finova-decor-icon.icon-chart { left: 8% !important; bottom: 20% !important; }
    .finova-decor-icon.icon-clipboard { left: 18% !important; bottom: 5% !important; }
    .finova-decor-icon.icon-bars { left: 34% !important; top: 16% !important; }
    .finova-decor-icon.icon-speed { left: 36% !important; bottom: 4% !important; }
    .finova-decor-icon.icon-wallet { right: 25% !important; top: 8% !important; }
    .finova-decor-icon.icon-cash { right: 8% !important; top: 13% !important; }
    .finova-decor-icon.icon-activity { right: 9% !important; bottom: 22% !important; }
}

@media (max-width: 767.98px) {
    .finova-visual-decor {
        inset: -10px -20px -6px -20px !important;
        opacity: .78 !important;
    }

    .finova-arrow-path {
        stroke-width: 3.5 !important;
        stroke-dasharray: 7 13 !important;
    }

    .finova-decor-icon {
        width: clamp(38px, 12vw, 56px) !important;
        height: clamp(38px, 12vw, 56px) !important;
        border-radius: 16px !important;
        border-width: 1.6px !important;
        opacity: .48 !important;
    }

    .finova-decor-icon i {
        font-size: clamp(1.16rem, 7vw, 1.82rem) !important;
    }

    .finova-decor-icon.icon-dashboard { left: 0 !important; top: 8% !important; }
    .finova-decor-icon.icon-chart { left: 3% !important; bottom: 24% !important; }
    .finova-decor-icon.icon-clipboard { display: none !important; }
    .finova-decor-icon.icon-bars { left: 31% !important; top: 15% !important; }
    .finova-decor-icon.icon-speed { left: 30% !important; bottom: 2% !important; }
    .finova-decor-icon.icon-wallet { right: 24% !important; top: 7% !important; }
    .finova-decor-icon.icon-cash { right: 0 !important; top: 17% !important; }
    .finova-decor-icon.icon-activity { right: 1% !important; bottom: 26% !important; }

    .finova-decor-dot {
        width: 9px !important;
        height: 9px !important;
        border-width: 3px !important;
        opacity: .5 !important;
    }

    .finova-decor-dot::before,
    .finova-decor-dot::after {
        width: 24px !important;
        height: 3px !important;
    }
}

@media (max-width: 420px) {
    .finova-visual-decor {
        inset: -8px -12px -4px -12px !important;
        opacity: .72 !important;
    }

    .finova-decor-icon.icon-chart,
    .finova-decor-icon.icon-speed {
        opacity: .36 !important;
    }
}

/* =====================================================
   V25 HERO BACKGROUND ANIMATION
   - Background ikon Bootstrap bergerak halus
   - Panah putus-putus berjalan
   - Elemen dekoratif berdenyut / breathing pulse
   - Tidak mengubah posisi utama gambar, card, dan responsive rule
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
    main.finance-hero-shell.finova-hero .finova-visual::before,
    .finova-visual::before {
        animation: finovaBluePanelPulse 7.2s ease-in-out infinite !important;
        /*transform-origin: center bottom !important;*/
        will-change: filter, opacity, scale !important;
    }

    .finova-visual-decor {
        animation: finovaDecorLayerDrift 12s ease-in-out infinite alternate !important;
        will-change: translate, opacity !important;
    }

    .finova-visual-decor::before,
    .finova-visual-decor::after {
        content: "" !important;
        position: absolute !important;
        pointer-events: none !important;
        border-radius: 999px !important;
        z-index: 0 !important;
        opacity: .38 !important;
        filter: blur(1px) !important;
        background:
            radial-gradient(circle, rgba(255, 255, 255, .24) 0 0, rgba(255, 255, 255, .16) 18%, rgba(255, 255, 255, 0) 64%) !important;
        mix-blend-mode: screen !important;
    }

    .finova-visual-decor::before {
        width: clamp(170px, 22vw, 320px) !important;
        height: clamp(170px, 22vw, 320px) !important;
        left: 4% !important;
        top: 12% !important;
        animation: finovaHaloPulseOne 8.4s ease-in-out infinite !important;
    }

    .finova-visual-decor::after {
        width: clamp(140px, 18vw, 270px) !important;
        height: clamp(140px, 18vw, 270px) !important;
        right: 8% !important;
        bottom: 16% !important;
        animation: finovaHaloPulseTwo 9.6s ease-in-out infinite !important;
        animation-delay: -2.4s !important;
    }

    .finova-visual-arrows,
    .finova-decor-icon,
    .finova-decor-dot {
        position: absolute !important;
        z-index: 2 !important;
        will-change: transform, opacity, filter !important;
    }

    .finova-arrow-path {
        stroke-dasharray: 9 16 !important;
        stroke-dashoffset: 0 !important;
        animation:
            finovaArrowMove 7.8s linear infinite,
            finovaArrowBreathe 3.8s ease-in-out infinite !important;
        will-change: stroke-dashoffset, opacity, filter !important;
    }

    .finova-arrow-path:nth-of-type(2n) {
        animation-duration: 9.4s, 4.6s !important;
        animation-delay: -1.8s, -.7s !important;
    }

    .finova-arrow-path:nth-of-type(3n) {
        animation-duration: 6.9s, 3.4s !important;
        animation-delay: -3.1s, -1.2s !important;
    }

    .finova-arrow-head {
        animation: finovaArrowHeadPulse 2.8s ease-in-out infinite !important;
        transform-origin: center !important;
    }

    .finova-decor-icon {
        --finova-icon-base: rotate(0deg) scale(1);
        --finova-icon-x: 4px;
        --finova-icon-y: -9px;
        --finova-icon-delay: 0s;
        transform: var(--finova-icon-base) !important;
        animation:
            finovaIconFloat 5.8s ease-in-out infinite,
            finovaIconPulse 3.2s ease-in-out infinite !important;
        animation-delay: var(--finova-icon-delay), var(--finova-icon-delay) !important;
    }

    .finova-decor-icon i {
        animation: finovaIconInnerGlow 2.7s ease-in-out infinite !important;
        animation-delay: var(--finova-icon-delay) !important;
        transform-origin: center !important;
    }

    .finova-decor-icon.icon-dashboard {
        --finova-icon-base: rotate(-1deg) scale(1);
        --finova-icon-x: 5px;
        --finova-icon-y: -10px;
        --finova-icon-delay: -.2s;
    }

    .finova-decor-icon.icon-chart {
        --finova-icon-base: rotate(-2deg) scale(1);
        --finova-icon-x: -6px;
        --finova-icon-y: -8px;
        --finova-icon-delay: -.9s;
    }

    .finova-decor-icon.icon-clipboard {
        --finova-icon-base: rotate(2deg) scale(1);
        --finova-icon-x: 7px;
        --finova-icon-y: 7px;
        --finova-icon-delay: -1.4s;
    }

    .finova-decor-icon.icon-bars {
        --finova-icon-base: rotate(-4deg) scale(.82);
        --finova-icon-x: -4px;
        --finova-icon-y: -12px;
        --finova-icon-delay: -.55s;
    }

    .finova-decor-icon.icon-speed {
        --finova-icon-base: rotate(4deg) scale(1);
        --finova-icon-x: 6px;
        --finova-icon-y: -7px;
        --finova-icon-delay: -1.9s;
    }

    .finova-decor-icon.icon-wallet {
        --finova-icon-base: rotate(1deg) scale(1);
        --finova-icon-x: -7px;
        --finova-icon-y: -10px;
        --finova-icon-delay: -1.1s;
    }

    .finova-decor-icon.icon-cash {
        --finova-icon-base: rotate(-12deg) scale(1);
        --finova-icon-x: 5px;
        --finova-icon-y: 8px;
        --finova-icon-delay: -.35s;
    }

    .finova-decor-icon.icon-activity {
        --finova-icon-base: rotate(4deg) scale(.88);
        --finova-icon-x: -6px;
        --finova-icon-y: 7px;
        --finova-icon-delay: -1.65s;
    }

    .finova-decor-dot {
        --finova-dot-base: scale(1);
        --finova-dot-x: 0px;
        --finova-dot-y: -5px;
        --finova-dot-delay: 0s;
        transform: var(--finova-dot-base) !important;
        animation:
            finovaDotFloat 4.8s ease-in-out infinite,
            finovaDotPulse 2.4s ease-in-out infinite !important;
        animation-delay: var(--finova-dot-delay), var(--finova-dot-delay) !important;
    }

    .finova-decor-dot.dot-one {
        --finova-dot-base: scale(1);
        --finova-dot-x: 4px;
        --finova-dot-y: -8px;
        --finova-dot-delay: -.3s;
    }

    .finova-decor-dot.dot-two {
        --finova-dot-base: scale(.82);
        --finova-dot-x: -5px;
        --finova-dot-y: 6px;
        --finova-dot-delay: -.8s;
    }

    .finova-decor-dot.dot-three {
        --finova-dot-base: scale(.72);
        --finova-dot-x: 5px;
        --finova-dot-y: -5px;
        --finova-dot-delay: -1.25s;
    }

    .finova-decor-dot.dot-four {
        --finova-dot-base: scale(1.05);
        --finova-dot-x: -4px;
        --finova-dot-y: -9px;
        --finova-dot-delay: -1.7s;
    }

    @keyframes finovaBluePanelPulse {
        0%, 100% {
            opacity: 1;
            filter: saturate(1) brightness(1);
            scale: 1;
        }
        50% {
            opacity: .96;
            filter: saturate(1.18) brightness(1.06);
            scale: 1.018;
        }
    }

    @keyframes finovaDecorLayerDrift {
        0% {
            translate: 0 0;
            opacity: .92;
        }
        50% {
            translate: 5px -7px;
            opacity: .98;
        }
        100% {
            translate: -4px 5px;
            opacity: .9;
        }
    }

    @keyframes finovaHaloPulseOne {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(.92);
            opacity: .20;
        }
        50% {
            transform: translate3d(16px, -12px, 0) scale(1.18);
            opacity: .44;
        }
    }

    @keyframes finovaHaloPulseTwo {
        0%, 100% {
            transform: translate3d(0, 0, 0) scale(.88);
            opacity: .18;
        }
        50% {
            transform: translate3d(-18px, 10px, 0) scale(1.22);
            opacity: .40;
        }
    }

    @keyframes finovaArrowMove {
        0% { stroke-dashoffset: 0; }
        100% { stroke-dashoffset: -180; }
    }

    @keyframes finovaArrowBreathe {
        0%, 100% {
            opacity: .58;
            filter: drop-shadow(0 8px 14px rgba(7, 51, 151, .12));
        }
        50% {
            opacity: .95;
            filter: drop-shadow(0 10px 20px rgba(255, 255, 255, .20));
        }
    }

    @keyframes finovaArrowHeadPulse {
        0%, 100% { opacity: .68; }
        50% { opacity: 1; }
    }

    @keyframes finovaIconFloat {
        0%, 100% {
            transform: translate3d(0, 0, 0) var(--finova-icon-base);
        }
        50% {
            transform: translate3d(var(--finova-icon-x), var(--finova-icon-y), 0) var(--finova-icon-base);
        }
    }

    @keyframes finovaIconPulse {
        0%, 100% {
            opacity: .58;
            filter: drop-shadow(0 10px 22px rgba(0, 45, 130, .08));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .14),
                0 14px 30px rgba(0, 45, 130, .10) !important;
        }
        50% {
            opacity: .88;
            filter: drop-shadow(0 0 18px rgba(255, 255, 255, .28));
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, .28),
                0 18px 38px rgba(31, 94, 216, .18),
                0 0 0 8px rgba(255, 255, 255, .045) !important;
        }
    }

    @keyframes finovaIconInnerGlow {
        0%, 100% {
            transform: scale(1);
            opacity: .86;
        }
        50% {
            transform: scale(1.07);
            opacity: 1;
        }
    }

    @keyframes finovaDotFloat {
        0%, 100% {
            transform: translate3d(0, 0, 0) var(--finova-dot-base);
        }
        50% {
            transform: translate3d(var(--finova-dot-x), var(--finova-dot-y), 0) var(--finova-dot-base);
        }
    }

    @keyframes finovaDotPulse {
        0%, 100% {
            opacity: .45;
            filter: drop-shadow(0 6px 12px rgba(7, 51, 151, .10));
        }
        50% {
            opacity: .92;
            filter: drop-shadow(0 0 16px rgba(255, 255, 255, .34));
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .finova-visual::before,
    .finova-visual-decor,
    .finova-visual-decor::before,
    .finova-visual-decor::after,
    .finova-arrow-path,
    .finova-arrow-head,
    .finova-decor-icon,
    .finova-decor-icon i,
    .finova-decor-dot {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    .finova-arrow-path {
        animation-duration: 10s, 5.2s !important;
    }

    .finova-decor-icon {
        animation-duration: 6.8s, 4.2s !important;
    }

    .finova-decor-dot {
        animation-duration: 5.8s, 3.2s !important;
    }
}

/* =====================================================
   FINAL FIX: VARIASI UKURAN ICON HERO
   - Icon besar, sedang, dan kecil
   - Hanya mengatur ukuran .finova-decor-icon
   - Posisi, panah, animasi, gambar, dan card tetap
   ===================================================== */

/* Ukuran default = sedang */
.finova-decor-icon {
    width: var(--decor-icon-size, 68px) !important;
    height: var(--decor-icon-size, 68px) !important;
    border-radius: var(--decor-icon-radius, 22px) !important;
}

.finova-decor-icon i {
    font-size: var(--decor-icon-font, 2rem) !important;
}

/* ICON BESAR */
.finova-decor-icon.icon-dashboard,
.finova-decor-icon.icon-cash {
    --decor-icon-size: 88px;
    --decor-icon-radius: 28px;
    --decor-icon-font: 2.85rem;
    opacity: .82 !important;
}

/* ICON SEDANG */
.finova-decor-icon.icon-chart,
.finova-decor-icon.icon-wallet,
.finova-decor-icon.icon-activity {
    --decor-icon-size: 70px;
    --decor-icon-radius: 23px;
    --decor-icon-font: 2.15rem;
    opacity: .72 !important;
}

/* ICON KECIL */
.finova-decor-icon.icon-clipboard,
.finova-decor-icon.icon-bars,
.finova-decor-icon.icon-speed {
    --decor-icon-size: 54px;
    --decor-icon-radius: 18px;
    --decor-icon-font: 1.55rem;
    opacity: .58 !important;
}

/* Penyesuaian posisi agar icon besar/kecil tetap rapi */
.finova-decor-icon.icon-dashboard {
    left: 0 !important;
    top: 8% !important;
}

.finova-decor-icon.icon-cash {
    right: 1% !important;
    top: 13% !important;
}

.finova-decor-icon.icon-chart {
    left: 5% !important;
    bottom: 30% !important;
}

.finova-decor-icon.icon-wallet {
    right: 24% !important;
    top: 11% !important;
}

.finova-decor-icon.icon-activity {
    right: 8% !important;
    bottom: 26% !important;
}

.finova-decor-icon.icon-clipboard {
    left: 14% !important;
    bottom: 8% !important;
}

.finova-decor-icon.icon-bars {
    left: 30% !important;
    top: 24% !important;
}

.finova-decor-icon.icon-speed {
    left: 35% !important;
    bottom: 5% !important;
}

/* TABLET */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .finova-decor-icon.icon-dashboard,
    .finova-decor-icon.icon-cash {
        --decor-icon-size: 72px;
        --decor-icon-radius: 24px;
        --decor-icon-font: 2.25rem;
    }

    .finova-decor-icon.icon-chart,
    .finova-decor-icon.icon-wallet,
    .finova-decor-icon.icon-activity {
        --decor-icon-size: 58px;
        --decor-icon-radius: 20px;
        --decor-icon-font: 1.75rem;
    }

    .finova-decor-icon.icon-clipboard,
    .finova-decor-icon.icon-bars,
    .finova-decor-icon.icon-speed {
        --decor-icon-size: 44px;
        --decor-icon-radius: 15px;
        --decor-icon-font: 1.28rem;
    }

    .finova-decor-icon.icon-dashboard {
        left: 5% !important;
        top: 8% !important;
    }

    .finova-decor-icon.icon-cash {
        right: 5% !important;
        top: 12% !important;
    }

    .finova-decor-icon.icon-chart {
        left: 7% !important;
        bottom: 24% !important;
    }

    .finova-decor-icon.icon-wallet {
        right: 24% !important;
        top: 8% !important;
    }

    .finova-decor-icon.icon-activity {
        right: 8% !important;
        bottom: 22% !important;
    }

    .finova-decor-icon.icon-bars {
        left: 33% !important;
        top: 16% !important;
    }

    .finova-decor-icon.icon-speed {
        left: 36% !important;
        bottom: 4% !important;
    }
}

/* SMARTPHONE */
@media (max-width: 767.98px) {
    .finova-decor-icon.icon-dashboard,
    .finova-decor-icon.icon-cash {
        --decor-icon-size: 54px;
        --decor-icon-radius: 18px;
        --decor-icon-font: 1.68rem;
        opacity: .55 !important;
    }

    .finova-decor-icon.icon-chart,
    .finova-decor-icon.icon-wallet,
    .finova-decor-icon.icon-activity {
        --decor-icon-size: 44px;
        --decor-icon-radius: 15px;
        --decor-icon-font: 1.32rem;
        opacity: .45 !important;
    }

    .finova-decor-icon.icon-clipboard,
    .finova-decor-icon.icon-bars,
    .finova-decor-icon.icon-speed {
        --decor-icon-size: 34px;
        --decor-icon-radius: 12px;
        --decor-icon-font: 1rem;
        opacity: .34 !important;
    }

    .finova-decor-icon.icon-dashboard {
        left: 0 !important;
        top: 7% !important;
    }

    .finova-decor-icon.icon-cash {
        right: 0 !important;
        top: 15% !important;
    }

    .finova-decor-icon.icon-chart {
        left: 4% !important;
        bottom: 25% !important;
    }

    .finova-decor-icon.icon-wallet {
        right: 24% !important;
        top: 7% !important;
    }

    .finova-decor-icon.icon-activity {
        right: 2% !important;
        bottom: 27% !important;
    }

    .finova-decor-icon.icon-bars {
        left: 32% !important;
        top: 14% !important;
    }

    .finova-decor-icon.icon-speed {
        left: 30% !important;
        bottom: 2% !important;
    }
}

/* HP kecil */
@media (max-width: 420px) {
    .finova-decor-icon.icon-dashboard,
    .finova-decor-icon.icon-cash {
        --decor-icon-size: 48px;
        --decor-icon-font: 1.48rem;
    }

    .finova-decor-icon.icon-chart,
    .finova-decor-icon.icon-wallet,
    .finova-decor-icon.icon-activity {
        --decor-icon-size: 38px;
        --decor-icon-font: 1.15rem;
    }

    .finova-decor-icon.icon-clipboard,
    .finova-decor-icon.icon-bars,
    .finova-decor-icon.icon-speed {
        --decor-icon-size: 30px;
        --decor-icon-font: .92rem;
    }
}

.trackspace-satker-filter{min-width:min(420px,100%);}
        .trackspace-monitor-select-control{width:100%;min-height:44px;border:0;outline:0;background:#fff;color:#10224a;border-radius:18px;padding:0 42px 0 16px;font-weight:700;font-family:"Roboto Condensed",sans-serif;box-shadow:0 12px 30px rgba(10,31,68,.08);appearance:auto;}
        .trackspace-monitor-select-static{cursor:default;text-decoration:none;}
        .trackspace-filter-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;font-size:.82rem;font-weight:700;}
        .trackspace-filter-actions a{color:#0b4fc4;text-decoration:none;display:inline-flex;align-items:center;gap:5px;}
        /* =========================================================
           LIMA KARTU RINGKASAN — STYLE MISTER BONGKAR
           Data, target tab, filter, dan rule lama tidak diubah.
        ========================================================= */
        .finova-feature-strip-wrap{
            padding-left:10px!important;
            padding-right:10px!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards{
            display:grid!important;
            grid-template-columns:repeat(5,minmax(0,1fr))!important;
            gap:0!important;
            width:100%!important;
            padding:0!important;
            overflow:hidden!important;
            border:1px solid #d8e3f1!important;
            border-radius:20px!important;
            background:#fff!important;
            box-shadow:0 14px 35px rgba(28,72,139,.10)!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item{
            min-width:0!important;
            min-height:200px!important;
            height:100%!important;
            margin:0!important;
            padding:0!important;
            display:block!important;
            overflow:hidden!important;
            border:0!important;
            border-right:1px solid #d8e3f1!important;
            border-radius:0!important;
            background:#fff!important;
            color:#0b2f70!important;
            text-decoration:none!important;
            box-shadow:none!important;
            transform:none!important;
            transition:background-color .18s ease,box-shadow .18s ease!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:last-child{
            border-right:0!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:hover{
            background:#fbfdff!important;
            box-shadow:inset 0 -4px 0 #3d84e6!important;
            transform:none!important;
        }

        .trackspace-kpi-head{
            width:100%!important;
            min-height:72px!important;
            margin:0!important;
            padding:14px 16px!important;
            display:flex!important;
            align-items:center!important;
            justify-content:flex-start!important;
            gap:12px!important;
            color:#fff!important;
            background:linear-gradient(90deg,#2e63c8 0%,#315fc2 100%)!important;
            box-shadow:none!important;
        }

        .trackspace-kpi-card:nth-child(2) .trackspace-kpi-head{
            background:linear-gradient(90deg,#4d88e8 0%,#5593eb 100%)!important;
        }

        .trackspace-kpi-card:nth-child(3) .trackspace-kpi-head{
            background:linear-gradient(90deg,#4fa9e7 0%,#45a0df 100%)!important;
        }

        .trackspace-kpi-card:nth-child(4) .trackspace-kpi-head,
        .trackspace-kpi-card:nth-child(5) .trackspace-kpi-head{
            background:linear-gradient(90deg,#2b579f 0%,#274f94 100%)!important;
        }

        .trackspace-kpi-head-icon{
            width:42px!important;
            height:42px!important;
            flex:0 0 42px!important;
            display:grid!important;
            place-items:center!important;
            border:1px solid rgba(255,255,255,.30)!important;
            border-radius:13px!important;
            background:rgba(255,255,255,.10)!important;
            color:#fff!important;
            font-size:1.16rem!important;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),0 6px 14px rgba(10,42,91,.10)!important;
        }

        .trackspace-kpi-head strong{
            min-width:0!important;
            margin:0!important;
            color:#fff!important;
            font-size:clamp(.92rem,1.35vw,1.18rem)!important;
            font-weight:900!important;
            line-height:1.08!important;
            letter-spacing:.01em!important;
            text-transform:uppercase!important;
            white-space:normal!important;
        }

        .trackspace-kpi-body{
            min-height:202px!important;
            padding:21px 16px 17px!important;
            display:flex!important;
            flex-direction:column!important;
            align-items:stretch!important;
            justify-content:flex-start!important;
            gap:14px!important;
            background:linear-gradient(180deg,#fbfcfe 0%,#f2f5f9 100%)!important;
        }

        .trackspace-kpi-main{
            min-width:0!important;
            display:grid!important;
            grid-template-columns:58px minmax(0,1fr)!important;
            grid-template-rows:auto auto!important;
            align-items:center!important;
            column-gap:14px!important;
            row-gap:4px!important;
            width:100%!important;
            flex:0 0 auto!important;
        }

        .trackspace-kpi-main-icon{
            grid-column:1!important;
            grid-row:1 / span 2!important;
            width:58px!important;
            height:58px!important;
            margin:0!important;
            display:grid!important;
            place-items:center!important;
            border:1px solid #cbdff3!important;
            border-radius:50%!important;
            color:#5c7da8!important;
            background:linear-gradient(180deg,#f8fbff 0%,#eaf1f8 100%)!important;
            box-shadow:inset 0 0 0 6px rgba(245,249,253,.96),0 5px 13px rgba(73,120,184,.07)!important;
            font-size:1.42rem!important;
        }

        .trackspace-kpi-card:nth-child(2) .trackspace-kpi-main-icon,
        .trackspace-kpi-card:nth-child(3) .trackspace-kpi-main-icon{
            color:#4299e9!important;
            border-color:#cde5f8!important;
            background:linear-gradient(180deg,#f8fdff 0%,#ebf7ff 100%)!important;
        }

        .trackspace-kpi-card:nth-child(4) .trackspace-kpi-main-icon,
        .trackspace-kpi-card:nth-child(5) .trackspace-kpi-main-icon{
            color:#2f64bb!important;
        }

        .trackspace-kpi-value{
            grid-column:2!important;
            grid-row:1!important;
            display:block!important;
            max-width:100%!important;
            margin:0!important;
            color:#0a3070!important;
            font-size:clamp(2rem,3vw,2.72rem)!important;
            font-weight:900!important;
            line-height:.92!important;
            letter-spacing:-.04em!important;
            white-space:nowrap!important;
            overflow:hidden!important;
            text-overflow:ellipsis!important;
        }

        .trackspace-kpi-value.is-money{
            font-size:clamp(1.5rem,2.1vw,2.15rem)!important;
            letter-spacing:-.025em!important;
        }

        .trackspace-kpi-caption{
            grid-column:2!important;
            grid-row:2!important;
            display:block!important;
            margin:0!important;
            color:#7285a3!important;
            font-size:.69rem!important;
            font-weight:800!important;
            line-height:1.25!important;
        }

        /* Rincian lama tetap ditampilkan. Hanya presentasinya dirapikan
           agar menyatu dengan style kartu Mister Bongkar. */
        .trackspace-kpi-details{
            width:100%!important;
            min-width:0!important;
            margin:0!important;
            padding:12px 0 0!important;
            display:grid!important;
            grid-template-columns:1fr!important;
            align-content:start!important;
            gap:5px!important;
            border-top:1px solid #dbe5f1!important;
        }

        .trackspace-kpi-detail-row{
            min-width:0!important;
            display:grid!important;
            grid-template-columns:minmax(0,1fr) auto!important;
            align-items:start!important;
            gap:8px!important;
            margin:0!important;
            padding:0!important;
            color:#37567f!important;
            font-size:.82rem!important;
            font-weight:800!important;
            line-height:1.28!important;
        }

        .trackspace-kpi-detail-row span,
        .trackspace-kpi-detail-row b{
            font-size:.82rem!important;
            line-height:1.28!important;
        }

        .trackspace-kpi-detail-row span{
            min-width:0!important;
            color:#536f96!important;
            font-weight:800!important;
            overflow-wrap:anywhere!important;
        }

        .trackspace-kpi-detail-row b{
            min-width:0!important;
            color:#0b3778!important;
            font-weight:900!important;
            text-align:right!important;
            white-space:nowrap!important;
        }

        .trackspace-kpi-detail-row.is-single{
            grid-template-columns:1fr!important;
            gap:2px!important;
        }

        .trackspace-kpi-detail-row.is-single b{
            text-align:left!important;
            white-space:normal!important;
            overflow-wrap:anywhere!important;
        }

        /* Kondisi dapat memiliki lebih banyak baris; ukurannya tetap padat. */
        .trackspace-kpi-card:nth-child(3) .trackspace-kpi-details{
            grid-template-columns:repeat(2,minmax(0,1fr))!important;
            column-gap:12px!important;
        }

        .trackspace-kpi-card:nth-child(3) .trackspace-kpi-detail-row{
            grid-template-columns:minmax(0,1fr) auto!important;
        }

        @media(max-width:1199.98px){
            .finova-feature-strip.trackspace-five-feature-cards{
                grid-template-columns:repeat(3,minmax(0,1fr))!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:nth-child(3n){
                border-right:0!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:nth-child(n/**/+4){
                border-top:1px solid #d8e3f1!important;
            }
        }

        @media(max-width:767.98px){
            .finova-feature-strip.trackspace-five-feature-cards{
                grid-template-columns:repeat(2,minmax(0,1fr))!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item{
                border-right:1px solid #d8e3f1!important;
                border-top:1px solid #d8e3f1!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:nth-child(-n/**/+2){
                border-top:0!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:nth-child(even){
                border-right:0!important;
            }
        }

        @media(max-width:479.98px){
            .finova-feature-strip.trackspace-five-feature-cards{
                grid-template-columns:1fr!important;
                border-radius:18px!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item{
                border-right:0!important;
                border-top:1px solid #d8e3f1!important;
            }
            .finova-feature-strip.trackspace-five-feature-cards .finova-feature-item:first-child{
                border-top:0!important;
            }
            .trackspace-kpi-head{
                min-height:66px!important;
                padding:12px 15px!important;
            }
            .trackspace-kpi-body{
                min-height:194px!important;
                padding:19px 17px 16px!important;
            }

            .trackspace-kpi-card:nth-child(3) .trackspace-kpi-details{
                grid-template-columns:1fr!important;
            }
            .trackspace-kpi-value{
                font-size:2.45rem!important;
            }
            .trackspace-kpi-value.is-money{
                font-size:1.85rem!important;
            }
        }

        /* =========================================================
           ENAM TAB MONITORING — lima tab lama tetap dipertahankan.
           Selector dibuat lebih kuat agar rule lama trackspace-five-tabs
           tidak menyembunyikan atau membatasi tab keenam.
        ========================================================= */
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs{
            display:flex!important;
            flex-direction:row!important;
            flex-wrap:nowrap!important;
            align-items:stretch!important;
            justify-content:flex-start!important;
            width:100%!important;
            max-width:100%!important;
            height:auto!important;
            max-height:none!important;
            margin:0!important;
            padding:0!important;
            gap:0!important;
            overflow-x:auto!important;
            overflow-y:hidden!important;
            overscroll-behavior-inline:contain;
            scroll-snap-type:x proximity;
            -webkit-overflow-scrolling:touch;
            scrollbar-width:thin;
        }
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item,
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item:nth-child(6),
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item:last-child{
            display:block!important;
            visibility:visible!important;
            opacity:1!important;
            position:relative!important;
            float:none!important;
            flex:1 0 150px!important;
            width:auto!important;
            min-width:150px!important;
            max-width:none!important;
            margin:0!important;
            padding:0!important;
            transform:none!important;
            scroll-snap-align:start;
        }
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
            display:flex!important;
            align-items:center!important;
            justify-content:center!important;
            width:100%!important;
            min-width:0!important;
            min-height:56px!important;
            margin:0!important;
            padding:8px 6px!important;
            gap:7px!important;
            font-size:.82rem!important;
            line-height:1.15!important;
            white-space:nowrap!important;
            overflow:visible!important;
        }
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link .tab-icon{
            flex:0 0 auto!important;
        }
        body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link strong{
            white-space:nowrap!important;
        }
        .trackspace-gedung-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px;}
        .trackspace-gedung-summary .trackspace-mini-card{min-width:0;}
        .trackspace-gedung-table table{min-width:1050px;margin-bottom:0;}
        .trackspace-ruangan-table table{min-width:900px;margin-bottom:0;}
        .trackspace-gedung-table thead th,.trackspace-ruangan-table thead th{white-space:nowrap;}
        .trackspace-gedung-kondisi{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:rgba(17,43,111,.08);color:#112b6f;font-weight:800;font-size:.76rem;white-space:normal;}
        .trackspace-gedung-empty{padding:28px 18px;text-align:center;color:#62718d;font-weight:700;}
        /* Daftar gedung bertingkat: klik gedung untuk melihat seluruh ruang. */
        .trackspace-gedung-accordion{display:grid;gap:14px;margin-top:20px;}
        .trackspace-gedung-accordion .accordion-item{border:1px solid rgba(17,43,111,.10);border-radius:20px!important;overflow:hidden;background:#fff;box-shadow:0 12px 34px rgba(17,43,111,.07);}
        .trackspace-gedung-accordion .accordion-header{margin:0;}
        .trackspace-gedung-accordion .accordion-button{padding:0;background:#fff;color:#112b6f;box-shadow:none!important;border:0;}
        .trackspace-gedung-accordion .accordion-button:not(.collapsed){background:linear-gradient(135deg,rgba(31,94,216,.08),rgba(72,198,255,.08));color:#112b6f;}
        .trackspace-gedung-accordion .accordion-button::after{margin-right:18px;flex:0 0 auto;}
        .trackspace-gedung-head{width:100%;display:grid;grid-template-columns:minmax(220px,1.45fr) minmax(150px,.9fr) repeat(3,minmax(90px,.48fr));gap:12px;align-items:center;padding:16px 12px 16px 18px;}
        .trackspace-gedung-title{min-width:0;display:flex;align-items:center;gap:12px;text-align:left;}
        .trackspace-gedung-title-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#1f5ed8;color:#fff;font-size:1.15rem;box-shadow:0 10px 22px rgba(31,94,216,.22);flex:0 0 auto;}
        .trackspace-gedung-title strong{display:block;font-size:1rem;line-height:1.2;overflow-wrap:anywhere;}
        .trackspace-gedung-title small{display:block;margin-top:4px;color:#71809d;font-weight:700;overflow-wrap:anywhere;}
        .trackspace-gedung-location{min-width:0;display:flex;align-items:center;gap:7px;color:#536583;font-weight:700;text-align:left;overflow-wrap:anywhere;}
        .trackspace-gedung-stat{text-align:center;min-width:0;}
        .trackspace-gedung-stat strong{display:block;font-size:1rem;color:#112b6f;}
        .trackspace-gedung-stat small{display:block;color:#7a88a3;font-weight:700;font-size:.74rem;}
        .trackspace-gedung-accordion .accordion-body{padding:18px;background:#fbfcff;border-top:1px solid rgba(17,43,111,.08);}
        .trackspace-gedung-detail-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:16px;}
        .trackspace-gedung-detail{background:#fff;border:1px solid rgba(17,43,111,.08);border-radius:14px;padding:11px 12px;min-width:0;}
        .trackspace-gedung-detail span{display:block;color:#7a88a3;font-size:.75rem;font-weight:700;margin-bottom:3px;}
        .trackspace-gedung-detail strong{display:block;color:#112b6f;font-size:.9rem;overflow-wrap:anywhere;}
        .trackspace-room-table-wrap{border:1px solid rgba(17,43,111,.08);border-radius:16px;overflow:hidden;background:#fff;}
        .trackspace-room-table-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 15px;border-bottom:1px solid rgba(17,43,111,.08);}
        .trackspace-room-table-title h5{margin:0;color:#112b6f;font-size:.95rem;font-weight:800;}
        .trackspace-room-table{min-width:760px;margin:0;}
        .trackspace-room-table thead th{background:#f1f5ff;color:#52617e;font-size:.76rem;font-weight:800;white-space:nowrap;border-bottom:0;}
        .trackspace-room-table tbody td{font-size:.84rem;vertical-align:middle;}
        .trackspace-room-empty{padding:24px!important;text-align:center;color:#6c7a95;font-weight:700;}
        /* Pagination daftar gedung */
        .trackspace-gedung-pagination-toolbar{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            margin-top:20px;
            padding:12px 14px;
            border:1px solid rgba(17,43,111,.09);
            border-radius:16px;
            background:#fff;
            box-shadow:0 10px 28px rgba(17,43,111,.05);
        }
        .trackspace-gedung-page-size{
            display:flex;
            align-items:center;
            gap:8px;
            color:#536583;
            font-weight:800;
            font-size:.84rem;
        }
        .trackspace-gedung-page-size select{
            min-width:76px;
            height:38px;
            padding:0 30px 0 11px;
            border:1px solid rgba(17,43,111,.14);
            border-radius:11px;
            background:#f8faff;
            color:#112b6f;
            font-weight:800;
            outline:0;
        }
        .trackspace-gedung-page-size select:focus{
            border-color:#1f5ed8;
            box-shadow:0 0 0 3px rgba(31,94,216,.12);
        }
        .trackspace-gedung-pagination-info{
            color:#6c7a95;
            font-size:.82rem;
            font-weight:800;
        }
        .trackspace-gedung-pagination-nav{
            display:flex;
            justify-content:center;
            margin-top:16px;
        }
        .trackspace-gedung-pagination-nav .pagination{
            display:flex;
            flex-wrap:wrap;
            justify-content:center;
            gap:6px;
            margin:0;
        }
        .trackspace-gedung-pagination-nav .page-item{margin:0;}
        .trackspace-gedung-pagination-nav .page-link{
            min-width:38px;
            height:38px;
            display:grid;
            place-items:center;
            padding:0 10px;
            border:1px solid rgba(17,43,111,.12);
            border-radius:11px!important;
            background:#fff;
            color:#112b6f;
            font-weight:800;
            box-shadow:none;
        }
        .trackspace-gedung-pagination-nav .page-link:hover{
            background:#eef4ff;
            color:#1f5ed8;
            border-color:rgba(31,94,216,.22);
        }
        .trackspace-gedung-pagination-nav .page-item.active .page-link{
            background:#1f5ed8;
            border-color:#1f5ed8;
            color:#fff;
            box-shadow:0 9px 20px rgba(31,94,216,.20);
        }
        .trackspace-gedung-pagination-nav .page-item.disabled .page-link{
            background:#f3f5f9;
            color:#9aa5b8;
            border-color:rgba(17,43,111,.07);
            pointer-events:none;
        }
        .trackspace-gedung-pagination-nav .page-item.ellipsis .page-link{
            border-color:transparent;
            background:transparent;
            min-width:28px;
            padding:0;
        }
        @media (max-width:1199px){
            .trackspace-gedung-head{grid-template-columns:minmax(210px,1.25fr) minmax(135px,.8fr) repeat(3,minmax(74px,.42fr));gap:8px;}
            .trackspace-gedung-detail-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
        }
        @media (max-width:991px){
            body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item{
                flex-basis:145px!important;
                min-width:145px!important;
            }
            .trackspace-gedung-summary{grid-template-columns:repeat(2,minmax(0,1fr));}
            .trackspace-gedung-head{grid-template-columns:minmax(0,1fr) repeat(3,minmax(70px,.32fr));}
            .trackspace-gedung-location{grid-column:1/-1;order:5;padding-left:54px;}
            .trackspace-gedung-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
        }
        @media (max-width:576px){
            body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item{
                flex-basis:132px!important;
                min-width:132px!important;
            }
            body.finance-landing-page .finance-monitor-card #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{min-height:52px!important;font-size:.78rem!important;padding:7px 8px!important;}
            .trackspace-gedung-summary{grid-template-columns:1fr 1fr;gap:8px;}
            .trackspace-gedung-accordion{gap:10px;}
            .trackspace-gedung-head{grid-template-columns:minmax(0,1fr) repeat(2,minmax(58px,.26fr));padding:12px 4px 12px 12px;}
            .trackspace-gedung-head .trackspace-gedung-stat:nth-of-type(5){display:none;}
            .trackspace-gedung-title-icon{width:38px;height:38px;border-radius:12px;}
            .trackspace-gedung-title strong{font-size:.9rem;}
            .trackspace-gedung-title small{font-size:.72rem;}
            .trackspace-gedung-location{padding-left:50px;font-size:.76rem;}
            .trackspace-gedung-detail-grid{grid-template-columns:1fr 1fr;gap:8px;}
            .trackspace-gedung-accordion .accordion-body{padding:12px;}
            .trackspace-gedung-pagination-toolbar{
                align-items:stretch;
                padding:10px;
                gap:8px;
            }
            .trackspace-gedung-page-size{
                width:100%;
                justify-content:space-between;
            }
            .trackspace-gedung-pagination-info{
                width:100%;
                text-align:center;
            }
            .trackspace-gedung-pagination-nav .page-link{
                min-width:34px;
                height:34px;
                padding:0 8px;
                font-size:.78rem;
            }
        }

        @media (max-width: 768px){.trackspace-satker-filter{width:100%;}.trackspace-monitor-select-control{min-height:42px;font-size:.9rem;}.trackspace-filter-actions{justify-content:center;}}


/* DESKTOP: bikin gambar hero benar-benar besar */
@media (min-width: 992px){
    body.finance-landing-page .finova-hero-visual,
    body.finance-landing-page .finova-hero-media,
    body.finance-landing-page .finova-hero-illustration{
        min-height: 620px !important;
        overflow: visible !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    body.finance-landing-page .finova-hero-people{
        position: relative !important;
        width: 121% !important;
        max-width: none !important;
        min-width: 121% !important;
        margin-left: -18% !important;
        margin-bottom: -22px !important;
        transform: translateY(-18px) !important;
        z-index: 3 !important;
    }
}

/* SMARTPHONE: gambar hero diperbesar dan dinaikkan */
/* SMARTPHONE: gambar diperbesar dan diturunkan */
@media (max-width: 767.98px){
    body.finance-landing-page .finance-hero-shell,
    body.finance-landing-page .finova-hero-grid{
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    body.finance-landing-page .finova-visual{
        width: 100% !important;
        /*min-height: 410px !important;*/
        /*margin-top: -12px !important;*/
        overflow: visible !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }

    body.finance-landing-page .finova-visual > picture{
        width: 100% !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    body.finance-landing-page .finova-hero-people{
        position: relative !important;

        width: 248% !important;
        min-width: 248% !important;
        max-width: none !important;
        height: auto !important;

        margin-left: -24% !important;
        margin-right: -24% !important;
        margin-bottom: -8px !important;

        /* Nilai positif = gambar turun */
        transform: translateY(30px) !important;

 
        z-index: 3 !important;
    }
}
        /* =========================================================
           SKALA LANDING PAGE 90%
           - Desktop dan tablet dibuat setara browser zoom 90%.
           - Mobile dipertahankan 100% agar teks/tombol tetap nyaman.
           - Tidak mengubah query, fungsi PHP, atau JavaScript.
        ========================================================= */
        @media (min-width: 768px) {
            body.finance-landing-page {
                zoom: 0.9;
            }
        }

        /* Fallback untuk browser yang tidak mendukung properti zoom. */
        @supports not (zoom: 1) {
            @media (min-width: 768px) {
                body.finance-landing-page {
                    width: 111.111111%;
                    min-height: 111.111111vh;
                    transform: scale(0.9);
                    transform-origin: top left;
                }
            }
        }

        @media (max-width: 767.98px) {
            body.finance-landing-page {
                zoom: 1;
                width: 100%;
                min-height: 100vh;
                transform: none;
            }
        }
    
        /* =========================================================
           FINAL HEADER CARD ALIGNMENT
           Ikon di kiri dan judul tepat di sebelah kanan seperti referensi.
           Hanya presentasi header; isi, data, tab, filter, dan rule tetap.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-head{
            width:100%!important;
            min-height:78px!important;
            height:78px!important;
            margin:0!important;
            padding:14px 16px!important;
            display:grid!important;
            grid-template-columns:42px minmax(0,1fr)!important;
            grid-template-rows:1fr!important;
            align-items:center!important;
            justify-content:stretch!important;
            column-gap:13px!important;
            row-gap:0!important;
            flex-direction:initial!important;
            flex-wrap:initial!important;
            text-align:left!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-head-icon{
            grid-column:1!important;
            grid-row:1!important;
            width:42px!important;
            height:42px!important;
            min-width:42px!important;
            max-width:42px!important;
            flex:none!important;
            margin:0!important;
            align-self:center!important;
            justify-self:start!important;
            display:grid!important;
            place-items:center!important;
            line-height:1!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-head-icon > i{
            display:grid!important;
            place-items:center!important;
            width:100%!important;
            height:100%!important;
            margin:0!important;
            padding:0!important;
            line-height:1!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-head strong{
            grid-column:2!important;
            grid-row:1!important;
            width:auto!important;
            min-width:0!important;
            max-width:100%!important;
            margin:0!important;
            padding:0!important;
            align-self:center!important;
            justify-self:stretch!important;
            display:block!important;
            color:#fff!important;
            font-size:clamp(.84rem,1.08vw,1rem)!important;
            font-weight:900!important;
            line-height:1.12!important;
            letter-spacing:.008em!important;
            text-align:left!important;
            text-transform:uppercase!important;
            white-space:normal!important;
            word-break:normal!important;
            overflow-wrap:normal!important;
        }

        /* Judul panjang hanya membungkus secara normal di samping ikon. */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card:last-child
        .trackspace-kpi-head strong{
            font-size:clamp(.76rem,.94vw,.91rem)!important;
            line-height:1.08!important;
        }

        @media(max-width:1199.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-head{
                grid-template-columns:40px minmax(0,1fr)!important;
                column-gap:11px!important;
                height:74px!important;
                min-height:74px!important;
                padding:13px 14px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-head-icon{
                width:40px!important;
                height:40px!important;
                min-width:40px!important;
                max-width:40px!important;
            }
        }

        @media(max-width:479.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-head{
                grid-template-columns:38px minmax(0,1fr)!important;
                column-gap:10px!important;
                height:68px!important;
                min-height:68px!important;
                padding:12px 14px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-head-icon{
                width:38px!important;
                height:38px!important;
                min-width:38px!important;
                max-width:38px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-head strong{
                font-size:.88rem!important;
                line-height:1.1!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card:last-child
            .trackspace-kpi-head strong{
                font-size:.82rem!important;
            }
        }


        /* =========================================================
           FINAL MAIN VALUE TYPOGRAPHY
           Semua angka utama mengikuti proporsi kartu Nilai Aset.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-value,
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-value.is-money{
            display:block!important;
            margin:0!important;
            color:#0a3070!important;
            font-size:clamp(1.55rem,2.05vw,2rem)!important;
            font-weight:900!important;
            line-height:1!important;
            letter-spacing:-.025em!important;
            white-space:nowrap!important;
            overflow:visible!important;
            text-overflow:clip!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-caption{
            margin-top:4px!important;
            color:#7184a3!important;
            font-size:.69rem!important;
            font-weight:800!important;
            line-height:1.2!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-main{
            align-items:center!important;
            row-gap:2px!important;
        }

        @media(max-width:767.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-value,
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-value.is-money{
                font-size:1.85rem!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-caption{
                font-size:.67rem!important;
            }
        }

        @media(max-width:479.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-value,
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-value.is-money{
                font-size:1.75rem!important;
            }
        }


        /* =========================================================
           FINAL ALIGNMENT LIKE REFERENCE
           Meratakan blok ikon + angka + caption seperti contoh kedua.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-body{
            padding:18px 16px 16px!important;
            gap:10px!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-main{
            width:100%!important;
            min-height:72px!important;
            display:grid!important;
            grid-template-columns:56px minmax(0,1fr)!important;
            grid-template-rows:auto auto!important;
            align-items:center!important;
            align-content:center!important;
            column-gap:12px!important;
            row-gap:2px!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-main-icon{
            grid-column:1!important;
            grid-row:1 / span 2!important;
            width:52px!important;
            height:52px!important;
            min-width:52px!important;
            max-width:52px!important;
            margin:0!important;
            align-self:center!important;
            justify-self:start!important;
            font-size:1.22rem!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-value,
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-value.is-money{
            grid-column:2!important;
            grid-row:1!important;
            align-self:end!important;
            justify-self:start!important;
            margin:0!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-caption{
            grid-column:2!important;
            grid-row:2!important;
            align-self:start!important;
            justify-self:start!important;
            margin:0!important;
            padding-top:1px!important;
        }

        /* Buat batas detail mulai pada posisi yang konsisten */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-details{
            margin-top:0!important;
            padding-top:9px!important;
        }

        @media(max-width:767.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-body{
                padding:17px 15px 15px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-main{
                min-height:68px!important;
                grid-template-columns:52px minmax(0,1fr)!important;
                column-gap:11px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-main-icon{
                width:48px!important;
                height:48px!important;
                min-width:48px!important;
                max-width:48px!important;
                font-size:1.14rem!important;
            }
        }

        @media(max-width:479.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-main{
                min-height:64px!important;
                grid-template-columns:50px minmax(0,1fr)!important;
                column-gap:10px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-main-icon{
                width:46px!important;
                height:46px!important;
                min-width:46px!important;
                max-width:46px!important;
                font-size:1.06rem!important;
            }
        }


        /* =========================================================
           FINAL DETAIL ALIGNMENT
           Rincian dirapikan mengikuti pola Nilai Aset Satker:
           label di atas, nilai di bawah, rata kiri, lebih konsisten.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-details{
            width:100%!important;
            display:grid!important;
            grid-template-columns:1fr!important;
            gap:8px!important;
            padding-top:10px!important;
            margin-top:0!important;
            border-top:1px solid #dbe5f1!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-detail-row{
            display:block!important;
            min-width:0!important;
            margin:0!important;
            padding:0!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-detail-row span{
            display:block!important;
            margin:0 0 2px 0!important;
            color:#5f7698!important;
            font-size:.67rem!important;
            font-weight:800!important;
            line-height:1.14!important;
            text-align:left!important;
            overflow-wrap:anywhere!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-detail-row b{
            display:block!important;
            margin:0!important;
            color:#0b3778!important;
            font-size:.84rem!important;
            font-weight:900!important;
            line-height:1.12!important;
            text-align:left!important;
            white-space:normal!important;
            overflow-wrap:anywhere!important;
        }

        /* Kondisi barang tetap 2 kolom agar muat, tetapi setiap item mengikuti
           pola label-di-atas dan nilai-di-bawah seperti kartu Nilai Aset. */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card:nth-child(3)
        .trackspace-kpi-details{
            grid-template-columns:repeat(2,minmax(0,1fr))!important;
            column-gap:14px!important;
            row-gap:8px!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card:nth-child(3)
        .trackspace-kpi-detail-row{
            display:block!important;
        }

        @media(max-width:767.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-details{
                gap:7px!important;
                padding-top:9px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-detail-row span{
                font-size:.65rem!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-detail-row b{
                font-size:.79rem!important;
            }
        }

        @media(max-width:479.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card:nth-child(3)
            .trackspace-kpi-details{
                grid-template-columns:1fr!important;
            }
        }


        /* =========================================================
           RINCIAN PROGRESS BERNOMOR
           Nomor, label, nilai, bar progres, dan penanda bulat.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-list{
            width:100%;
            display:grid;
            grid-template-columns:1fr;
            gap:10px;
            margin:0;
            padding:11px 0 0;
            border-top:1px solid #dbe5f1;
        }

        .trackspace-kpi-progress-row{
            --progress-value:0%;
            --progress-start:#65d7df;
            --progress-end:#21aabc;
            min-width:0;
            display:grid;
            grid-template-columns:28px minmax(0,1fr);
            align-items:center;
            column-gap:9px;
        }

        .trackspace-kpi-progress-row.tone-2{
            --progress-start:#5cb5f4;
            --progress-end:#187fe4;
        }

        .trackspace-kpi-progress-row.tone-3{
            --progress-start:#8977f2;
            --progress-end:#6546e2;
        }

        .trackspace-kpi-progress-row.tone-4{
            --progress-start:#f2a45d;
            --progress-end:#df7332;
        }

        .trackspace-kpi-progress-no{
            grid-column:1;
            grid-row:1 / span 2;
            display:block;
            color:#50617c;
            font-size:1.08rem;
            font-weight:900;
            line-height:1;
            letter-spacing:.02em;
            text-align:left;
        }

        .trackspace-kpi-progress-content{
            grid-column:2;
            min-width:0;
        }

        .trackspace-kpi-progress-meta{
            min-width:0;
            display:grid;
            grid-template-columns:minmax(0,1fr) auto;
            align-items:baseline;
            gap:7px;
            margin-bottom:5px;
        }

        .trackspace-kpi-progress-label{
            min-width:0;
            color:#4e627f;
            font-size:.68rem;
            font-weight:800;
            line-height:1.15;
            overflow-wrap:anywhere;
        }

        .trackspace-kpi-progress-label em{
            display:inline;
            margin-left:4px;
            color:#0b3778;
            font-size:.70rem;
            font-style:normal;
            font-weight:900;
            white-space:nowrap;
        }

        .trackspace-kpi-progress-value{
            color:#0758bf;
            font-size:.71rem;
            font-weight:900;
            line-height:1;
            white-space:nowrap;
        }

        .trackspace-kpi-progress-track{
            position:relative;
            width:100%;
            height:10px;
            overflow:visible;
            border-radius:999px;
            background:#e5edf6;
        }

        .trackspace-kpi-progress-fill{
            position:absolute;
            inset:0 auto 0 0;
            width:var(--progress-value);
            max-width:100%;
            min-width:0;
            border-radius:999px;
            background:linear-gradient(90deg,var(--progress-start),var(--progress-end));
        }

        .trackspace-kpi-progress-dot{
            position:absolute;
            top:50%;
            left:var(--progress-value);
            width:12px;
            height:12px;
            border:2px solid #fff;
            border-radius:50%;
            background:var(--progress-end);
            box-shadow:0 3px 8px rgba(37,78,133,.28);
            transform:translate(-50%,-50%);
        }

        .trackspace-kpi-progress-row.is-zero .trackspace-kpi-progress-dot{
            left:5px;
        }

        /* Kondisi mempunyai empat rincian; tetap satu kolom agar bar terbaca. */
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-card:nth-child(3)
        .trackspace-kpi-progress-list{
            gap:8px;
        }

        /* Nilai aset dapat memuat nama satker yang panjang. */
        .trackspace-kpi-progress-row.is-text
        .trackspace-kpi-progress-label em{
            display:block;
            margin:2px 0 0;
            white-space:normal;
        }

        @media(max-width:767.98px){
            .trackspace-kpi-progress-row{
                grid-template-columns:26px minmax(0,1fr);
                column-gap:8px;
            }

            .trackspace-kpi-progress-no{
                font-size:1rem;
            }

            .trackspace-kpi-progress-label{
                font-size:.66rem;
            }

            .trackspace-kpi-progress-label em,
            .trackspace-kpi-progress-value{
                font-size:.68rem;
            }

            .trackspace-kpi-progress-track{
                height:9px;
            }

            .trackspace-kpi-progress-dot{
                width:11px;
                height:11px;
            }
        }


        /* =========================================================
           FINAL CARD BODY — SATU WARNA PENUH
           Menghilangkan perbedaan warna abu-abu dan putih di area rincian.
           Header tetap biru; data, progress, filter, dan rule tidak berubah.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card{
            display:flex!important;
            flex-direction:column!important;
            align-items:stretch!important;
            justify-content:flex-start!important;
            background:#f3f6fa!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card:hover{
            background:#f3f6fa!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-head{
            flex:0 0 auto!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-body{
            width:100%!important;
            height:auto!important;
            min-height:0!important;
            flex:1 1 auto!important;
            align-self:stretch!important;
            background:#f3f6fa!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-main,
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-progress-list,
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-progress-row,
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-progress-content{
            background:transparent!important;
        }

        /* Pastikan warna body mengisi sampai dasar card meskipun isi rincian berbeda. */
        .finova-feature-strip.trackspace-five-feature-cards{
            align-items:stretch!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card::after{
            content:"";
            display:block;
            flex:1 1 auto;
            min-height:0;
            background:#f3f6fa;
        }

        /* Body sudah memakai flex penuh, sehingga pseudo-element hanya menjadi
           pengisi aman dan tidak menambah ruang apabila body telah memenuhi card. */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-body + *{
            background:#f3f6fa!important;
        }


        /* =========================================================
           FINAL TOP ALIGNMENT
           Tarik konten utama lebih ke atas dan ratakan antar-card.
           Warna body tetap satu warna penuh.
        ========================================================= */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card{
            align-items:stretch!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-body{
            padding:12px 16px 14px!important;
            display:flex!important;
            flex-direction:column!important;
            align-items:stretch!important;
            justify-content:flex-start!important;
            gap:8px!important;
            align-content:flex-start!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-main{
            width:100%!important;
            min-height:60px!important;
            margin:0!important;
            align-self:flex-start!important;
            align-items:center!important;
            align-content:center!important;
            grid-template-columns:56px minmax(0,1fr)!important;
            column-gap:12px!important;
            row-gap:1px!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-main-icon{
            width:50px!important;
            height:50px!important;
            min-width:50px!important;
            max-width:50px!important;
            margin:0!important;
            align-self:center!important;
            justify-self:start!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-value,
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-value.is-money{
            align-self:end!important;
            justify-self:start!important;
            margin:0!important;
            line-height:1!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-caption{
            align-self:start!important;
            justify-self:start!important;
            margin:0!important;
            padding-top:0!important;
        }

        /* Rincian dimulai lebih dekat setelah blok utama agar tidak turun terlalu jauh */
        .finova-feature-strip.trackspace-five-feature-cards
        .finova-feature-item.trackspace-kpi-card
        .trackspace-kpi-progress-list{
            margin-top:2px!important;
            padding-top:8px!important;
            gap:9px!important;
        }

        /* Pertahankan body terisi penuh satu warna, tetapi tanpa mendorong
           blok utama turun dari area atas card */
        

        @media(max-width:767.98px){
            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-body{
                padding:11px 15px 13px!important;
                gap:7px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-main{
                min-height:56px!important;
                grid-template-columns:52px minmax(0,1fr)!important;
                column-gap:11px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-main-icon{
                width:46px!important;
                height:46px!important;
                min-width:46px!important;
                max-width:46px!important;
            }

            .finova-feature-strip.trackspace-five-feature-cards
            .finova-feature-item.trackspace-kpi-card
            .trackspace-kpi-progress-list{
                padding-top:7px!important;
                gap:8px!important;
            }
        }


        /* =========================================================
           HIGHLIGHT PERINGATAN DINAMIS
           Aktif hanya untuk Belum DBR, Belum SIP, dan Rusak Berat
           ketika nilainya lebih dari nol.
        ========================================================= */
        @keyframes trackspaceDangerPulse{
            0%,100%{
                background-color:rgba(239,68,68,.045);
                box-shadow:0 0 0 0 rgba(220,38,38,0);
            }
            50%{
                background-color:rgba(239,68,68,.14);
                box-shadow:0 0 0 3px rgba(220,38,38,.10);
            }
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink{
            --progress-start:#ff6b6b!important;
            --progress-end:#dc2626!important;
            position:relative!important;
            margin:-3px -6px!important;
            padding:5px 6px!important;
            border:1px solid rgba(220,38,38,.20)!important;
            border-radius:10px!important;
            background:rgba(239,68,68,.055)!important;
            animation:trackspaceDangerPulse 1.65s ease-in-out infinite!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-no,
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-label,
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-label em,
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-value{
            color:#b91c1c!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-track{
            background:#fee2e2!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-fill{
            background:linear-gradient(90deg,#ff7a7a 0%,#ef4444 58%,#dc2626 100%)!important;
            box-shadow:0 0 9px rgba(220,38,38,.30)!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-dot{
            border-color:#fff!important;
            background:#dc2626!important;
            box-shadow:0 0 0 3px rgba(239,68,68,.17),0 3px 8px rgba(153,27,27,.28)!important;
        }

        @media(prefers-reduced-motion:reduce){
            .finova-feature-strip.trackspace-five-feature-cards
            .trackspace-kpi-progress-row.is-danger-blink{
                animation:none!important;
                background:rgba(239,68,68,.11)!important;
            }
        }


        /* =========================================================
           FINAL DANGER PULSE — TEKS SAJA
           Kotak dan progress tetap stabil; label/angka berdenyut halus.
        ========================================================= */
        @keyframes trackspaceDangerTextPulse{
            0%,100%{
                opacity:1;
                color:#b91c1c;
                text-shadow:0 0 0 rgba(220,38,38,0);
            }
            50%{
                opacity:.58;
                color:#ef4444;
                text-shadow:0 0 7px rgba(220,38,38,.42);
            }
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink{
            animation:none!important;
            background:rgba(239,68,68,.09)!important;
            box-shadow:0 0 0 2px rgba(220,38,38,.08)!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-no,
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-label,
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-label em,
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-value{
            animation:trackspaceDangerTextPulse 1.2s ease-in-out infinite!important;
            will-change:opacity,color,text-shadow;
        }

        /* Sedikit beda fase agar denyut terasa lebih alami tetapi tetap rapi. */
        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-value{
            animation-delay:.12s!important;
        }

        .finova-feature-strip.trackspace-five-feature-cards
        .trackspace-kpi-progress-row.is-danger-blink
        .trackspace-kpi-progress-label em{
            animation-delay:.06s!important;
        }

        @media(prefers-reduced-motion:reduce){
            .finova-feature-strip.trackspace-five-feature-cards
            .trackspace-kpi-progress-row.is-danger-blink
            .trackspace-kpi-progress-no,
            .finova-feature-strip.trackspace-five-feature-cards
            .trackspace-kpi-progress-row.is-danger-blink
            .trackspace-kpi-progress-label,
            .finova-feature-strip.trackspace-five-feature-cards
            .trackspace-kpi-progress-row.is-danger-blink
            .trackspace-kpi-progress-label em,
            .finova-feature-strip.trackspace-five-feature-cards
            .trackspace-kpi-progress-row.is-danger-blink
            .trackspace-kpi-progress-value{
                animation:none!important;
                opacity:1!important;
                color:#b91c1c!important;
                text-shadow:none!important;
            }
        }


        /* Semua tab monitoring mengikuti desain card referensi. */
        .trackspace-summary-report-card{overflow:hidden;border:1px solid #dce6f4;border-radius:22px;background:#fff;box-shadow:0 15px 38px rgba(31,72,135,.10)}
        .trackspace-summary-report-head{min-height:72px;padding:13px 18px;display:flex;align-items:center;gap:13px;color:#fff;background:linear-gradient(90deg,#2860d4,#4d84f3)}
        .trackspace-summary-report-icon,.trackspace-module-heading-icon{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);border-radius:13px;background:rgba(255,255,255,.13);color:#fff;font-size:1.12rem}
        .trackspace-summary-report-head strong{display:block;font-size:1.08rem;font-weight:900;line-height:1.05}.trackspace-summary-report-head small,.trackspace-module-heading small{display:block;margin-top:4px;color:rgba(255,255,255,.82);font-size:.72rem;font-weight:600}
        .trackspace-summary-report-time{margin-left:auto;padding:8px 10px;border-radius:9px;background:rgba(10,45,118,.30);font-size:.69rem;font-weight:800;white-space:nowrap}
        .trackspace-summary-report-body{min-height:250px;padding:22px 26px;display:grid;grid-template-columns:260px minmax(180px,.75fr) minmax(270px,1.25fr);align-items:center;gap:24px;background:#fff}
        .trackspace-summary-chart-block{text-align:center}.trackspace-summary-chart-block h4,.trackspace-summary-sip-chart h4{margin:0 0 8px;color:#123778;font-size:.86rem;font-weight:900;text-align:left}.trackspace-summary-chart-block canvas{max-height:154px!important}
        .trackspace-summary-legend{display:flex;justify-content:center;gap:13px;margin-top:7px;color:#64799b;font-size:.65rem;font-weight:800}.trackspace-summary-legend span{display:flex;align-items:center;gap:5px}.trackspace-summary-legend i{width:14px;height:7px;border-radius:999px;background:#16b981}.trackspace-summary-legend i.is-process{background:#ff9418}
        .trackspace-summary-number-block,.trackspace-summary-value-block{min-width:0;padding-left:24px;border-left:1px solid #e1e8f2}.trackspace-summary-number-block>span,.trackspace-summary-value-block>span{display:block;color:#7d8ba5;font-size:.72rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
        .trackspace-summary-number-block>strong{display:block;margin-top:8px;color:#0b3376;font-size:2.2rem;font-weight:900;line-height:1}.trackspace-summary-value-block>strong{display:block;margin-top:8px;color:#0b3376;font-size:clamp(1.45rem,2.4vw,2.1rem);font-weight:900;line-height:1.06;overflow-wrap:anywhere}
        .trackspace-summary-number-block>small,.trackspace-summary-value-block>small{display:block;margin-top:9px;color:#7c8da9;font-size:.72rem;line-height:1.35}.trackspace-summary-substats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}.trackspace-summary-substats div{padding:9px 10px;border-radius:12px;background:#f4f7fc}.trackspace-summary-substats b{display:block;color:#18488f;font-size:1rem}.trackspace-summary-substats em{display:block;margin-top:2px;color:#7b8ca8;font-size:.62rem;font-style:normal;font-weight:800}.trackspace-summary-sip-chart{margin-top:14px}.trackspace-summary-sip-chart canvas{max-height:82px!important}
        .finance-tab-content>.finance-tab-panel:not(#tab-ringkasan){padding:0 0 22px!important;overflow:hidden!important;border:1px solid #dce6f4!important;border-radius:22px!important;background:#fff!important;box-shadow:0 15px 38px rgba(31,72,135,.10)!important}
        .finance-tab-content>.finance-tab-panel:not(#tab-ringkasan)>.finance-tab-header{min-height:72px!important;margin:0!important;padding:13px 18px!important;display:flex!important;align-items:center!important;gap:14px!important;color:#fff!important;background:linear-gradient(90deg,#2860d4,#4d84f3)!important;border:0!important}
        #tab-sip>.finance-tab-header{background:linear-gradient(90deg,#3979df,#5995ee)!important}#tab-kondisi>.finance-tab-header{background:linear-gradient(90deg,#3a9ed8,#54b0e6)!important}#tab-satker>.finance-tab-header,#tab-gedung>.finance-tab-header{background:linear-gradient(90deg,#28569f,#2e62b4)!important}
        .trackspace-module-heading{min-width:0!important;display:flex!important;align-items:center!important;gap:13px!important}.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan) .trackspace-module-heading h3{margin:0!important;color:#fff!important;font-size:1.08rem!important;font-weight:900!important;line-height:1.06!important}
        .finance-tab-content>.finance-tab-panel:not(#tab-ringkasan)>.finance-tab-header .trackspace-combined-note{margin-left:auto!important;padding:8px 10px!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:9px!important;background:rgba(10,45,118,.28)!important;color:#fff!important;font-size:.69rem!important;font-weight:800!important;white-space:nowrap!important;box-shadow:none!important}
        .finance-tab-content>.finance-tab-panel:not(#tab-ringkasan)>:not(.finance-tab-header){margin-left:20px!important;margin-right:20px!important}
        .finance-tab-content>.finance-tab-panel:not(#tab-ringkasan) .trackspace-chart-shell,.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan) .trackspace-list,.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan) .trackspace-table-card,.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan) .trackspace-mini-card{border-color:#dfe8f4!important;border-radius:16px!important;background:#fff!important;box-shadow:0 9px 24px rgba(31,72,135,.07)!important}
        #tab-gedung .trackspace-gedung-accordion .accordion-item{overflow:hidden!important;border-color:#dfe8f4!important;border-radius:15px!important;box-shadow:0 8px 22px rgba(31,72,135,.06)!important}
        @media(max-width:900px){.trackspace-summary-report-body{grid-template-columns:1fr 1fr}.trackspace-summary-chart-block{grid-row:1/span 2}}
        @media(max-width:767.98px){.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan)>.finance-tab-header{min-height:68px!important;padding:12px 14px!important;align-items:flex-start!important;flex-wrap:wrap!important}.trackspace-module-heading-icon{width:40px;height:40px;flex-basis:40px}.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan)>.finance-tab-header .trackspace-combined-note{width:100%!important;margin-left:53px!important;white-space:normal!important}.finance-tab-content>.finance-tab-panel:not(#tab-ringkasan)>:not(.finance-tab-header){margin-left:12px!important;margin-right:12px!important}}
        @media(max-width:600px){.trackspace-summary-report-head{align-items:flex-start;flex-wrap:wrap}.trackspace-summary-report-time{width:100%;margin-left:56px}.trackspace-summary-report-body{grid-template-columns:1fr;padding:20px}.trackspace-summary-chart-block{grid-row:auto}.trackspace-summary-number-block,.trackspace-summary-value-block{padding:16px 0 0;border-left:0;border-top:1px solid #e1e8f2}}

        /* =========================================================
           FINAL — SEMUA TAB MENJADI SATU CARD UTUH
           Mengikuti pola visual tab Ringkasan:
           header biru + body putih menyatu + separator rapi.
        ========================================================= */
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan){
            padding:0!important;
            overflow:hidden!important;
            border:1px solid #dce6f4!important;
            border-radius:22px!important;
            background:#fff!important;
            box-shadow:0 15px 38px rgba(31,72,135,.10)!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        > .finance-tab-header{
            margin:0!important;
            border-radius:0!important;
        }

        /* Hilangkan kesan card terpisah pada seluruh isi tab. */
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-mini-card,
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-chart-shell,
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-list,
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-table-card{
            margin:0!important;
            border:0!important;
            border-radius:0!important;
            background:#fff!important;
            box-shadow:none!important;
        }

        /* DBR — ringkasan angka menyatu seperti bagian tengah card contoh. */
        #tab-dbr > .trackspace-mini-row{
            margin:0!important;
            padding:20px 22px!important;
            display:grid!important;
            grid-template-columns:repeat(4,minmax(0,1fr))!important;
            gap:0!important;
            border-bottom:1px solid #e1e8f2!important;
            background:#fff!important;
        }

        #tab-dbr > .trackspace-mini-row .trackspace-mini-card{
            min-height:92px!important;
            padding:12px 20px!important;
            border-left:1px solid #e1e8f2!important;
        }

        #tab-dbr > .trackspace-mini-row .trackspace-mini-card:first-child{
            border-left:0!important;
        }

        /* Gedung — enam ringkasan menyatu dalam satu bidang. */
        #tab-gedung > .trackspace-gedung-summary{
            margin:0!important;
            padding:20px 22px!important;
            display:grid!important;
            grid-template-columns:repeat(3,minmax(0,1fr))!important;
            gap:0!important;
            border-bottom:1px solid #e1e8f2!important;
            background:#fff!important;
        }

        #tab-gedung > .trackspace-gedung-summary .trackspace-mini-card{
            min-height:88px!important;
            padding:12px 20px!important;
            border-left:1px solid #e1e8f2!important;
            border-bottom:1px solid #edf2f8!important;
        }

        #tab-gedung > .trackspace-gedung-summary .trackspace-mini-card:nth-child(3n/**/+1){
            border-left:0!important;
        }

        #tab-gedung > .trackspace-gedung-summary .trackspace-mini-card:nth-last-child(-n/**/+3){
            border-bottom:0!important;
        }

        /* Area grafik/list menyatu dan menggunakan separator seperti contoh. */
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        > .trackspace-chart-grid{
            margin:0!important;
            padding:0!important;
            display:grid!important;
            grid-template-columns:repeat(2,minmax(0,1fr))!important;
            gap:0!important;
            border-top:1px solid #e1e8f2!important;
            background:#fff!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        > .trackspace-chart-grid:first-of-type{
            border-top:0!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        > .trackspace-chart-grid > *{
            min-width:0!important;
            padding:22px 24px!important;
            border-left:1px solid #e1e8f2!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        > .trackspace-chart-grid > *:first-child{
            border-left:0!important;
        }

        /* Satker: grafik dan tabel tetap satu card, dipisah garis. */
        #tab-satker > .trackspace-chart-shell{
            margin:0!important;
            padding:22px 24px!important;
            border-bottom:1px solid #e1e8f2!important;
        }

        #tab-satker > .trackspace-table-card{
            margin:0!important;
            padding:0 22px 22px!important;
        }

        /* Gedung: toolbar, accordion, dan pagination tetap di dalam card utama. */
        #tab-gedung > .trackspace-gedung-pagination-toolbar{
            margin:0!important;
            padding:16px 22px!important;
            border:0!important;
            border-bottom:1px solid #e1e8f2!important;
            border-radius:0!important;
            background:#f8fbff!important;
            box-shadow:none!important;
        }

        #tab-gedung > .trackspace-gedung-accordion{
            margin:0!important;
            padding:18px 22px 4px!important;
        }

        #tab-gedung > .trackspace-gedung-pagination-nav{
            margin:0!important;
            padding:12px 22px 22px!important;
        }

        #tab-gedung > .alert{
            margin:20px 22px!important;
        }

        /* Tipografi isi dibuat sama dengan tab Ringkasan. */
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-mini-card span{
            color:#7d8ba5!important;
            font-size:.70rem!important;
            font-weight:900!important;
            text-transform:uppercase!important;
            letter-spacing:.035em!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-mini-card strong{
            display:block!important;
            margin-top:7px!important;
            color:#0b3376!important;
            font-size:clamp(1.45rem,2.2vw,2rem)!important;
            font-weight:900!important;
            line-height:1.05!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-mini-card small{
            display:block!important;
            margin-top:7px!important;
            color:#7c8da9!important;
            font-size:.69rem!important;
            font-weight:700!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-chart-shell h4,
        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-list h4{
            margin:0 0 12px!important;
            color:#123778!important;
            font-size:.90rem!important;
            font-weight:900!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-list-row{
            padding:11px 0!important;
            border-bottom:1px solid #edf2f8!important;
        }

        .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
        .trackspace-list-row:last-child{
            border-bottom:0!important;
        }

        @media(max-width:900px){
            #tab-dbr > .trackspace-mini-row,
            #tab-gedung > .trackspace-gedung-summary{
                grid-template-columns:repeat(2,minmax(0,1fr))!important;
            }

            #tab-dbr > .trackspace-mini-row .trackspace-mini-card:nth-child(odd),
            #tab-gedung > .trackspace-gedung-summary .trackspace-mini-card:nth-child(odd){
                border-left:0!important;
            }

            #tab-dbr > .trackspace-mini-row .trackspace-mini-card:nth-child(n/**/+3){
                border-top:1px solid #edf2f8!important;
            }
        }

        @media(max-width:650px){
            .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
            > .trackspace-chart-grid{
                grid-template-columns:1fr!important;
            }

            .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
            > .trackspace-chart-grid > *{
                border-left:0!important;
                border-top:1px solid #e1e8f2!important;
                padding:18px 16px!important;
            }

            .finance-tab-content > .finance-tab-panel:not(#tab-ringkasan)
            > .trackspace-chart-grid > *:first-child{
                border-top:0!important;
            }

            #tab-dbr > .trackspace-mini-row,
            #tab-gedung > .trackspace-gedung-summary{
                grid-template-columns:1fr!important;
                padding:0!important;
            }

            #tab-dbr > .trackspace-mini-row .trackspace-mini-card,
            #tab-gedung > .trackspace-gedung-summary .trackspace-mini-card{
                padding:16px 18px!important;
                border-left:0!important;
                border-top:1px solid #edf2f8!important;
                border-bottom:0!important;
            }

            #tab-dbr > .trackspace-mini-row .trackspace-mini-card:first-child,
            #tab-gedung > .trackspace-gedung-summary .trackspace-mini-card:first-child{
                border-top:0!important;
            }

            #tab-satker > .trackspace-chart-shell{
                padding:18px 16px!important;
            }

            #tab-satker > .trackspace-table-card{
                padding:0 12px 16px!important;
            }

            #tab-gedung > .trackspace-gedung-accordion{
                padding:14px 12px 4px!important;
            }
        }


        /* =========================================================
           TAB SEGMENTED NUANSA BIRU
           Mengikuti bentuk referensi tanpa mengubah fungsi Bootstrap tab.
        ========================================================= */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs{
            position:relative!important;
            display:flex!important;
            flex-wrap:nowrap!important;
            align-items:stretch!important;
            width:100%!important;
            margin:0!important;
            padding:0!important;
            gap:0!important;
            overflow-x:auto!important;
            overflow-y:visible!important;
            border:1px solid #d8e1ec!important;
            border-radius:13px!important;
            background:#eef2f7!important;
            box-shadow:0 6px 14px rgba(31,72,135,.12)!important;
            scrollbar-width:thin;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item{
            position:relative!important;
            flex:1 0 168px!important;
            min-width:168px!important;
            margin:0!important;
            padding:0!important;
            border-right:1px solid #d7dee8!important;
            scroll-snap-align:start;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item:last-child{
            border-right:0!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
            position:relative!important;
            z-index:1!important;
            width:100%!important;
            min-height:62px!important;
            margin:0!important;
            padding:10px 16px!important;
            display:grid!important;
            grid-template-columns:38px minmax(0,1fr) auto!important;
            align-items:center!important;
            justify-content:stretch!important;
            column-gap:10px!important;
            border:0!important;
            border-radius:0!important;
            background:linear-gradient(180deg,#f3f5f8 0%,#e8edf3 100%)!important;
            color:#7c8798!important;
            text-align:left!important;
            box-shadow:inset 0 -3px 0 rgba(116,132,153,.12)!important;
            transition:background-color .18s ease,color .18s ease,box-shadow .18s ease!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li:first-child > .nav-link{
            border-radius:12px 0 0 12px!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li:last-child > .nav-link{
            border-radius:0 12px 12px 0!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link:hover{
            color:#2456a6!important;
            background:linear-gradient(180deg,#f7f9fc 0%,#edf2f8 100%)!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link.active{
            z-index:3!important;
            color:#fff!important;
            background:linear-gradient(135deg,#1766dc 0%,#3d8bf2 100%)!important;
            box-shadow:inset 0 -3px 0 rgba(11,68,168,.20),0 5px 14px rgba(29,103,220,.22)!important;
        }

        /* Penunjuk segitiga tab aktif seperti referensi. */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link.active::after{
            content:""!important;
            position:absolute!important;
            left:50%!important;
            bottom:-10px!important;
            width:0!important;
            height:0!important;
            border-left:10px solid transparent!important;
            border-right:10px solid transparent!important;
            border-top:10px solid #2f81ee!important;
            transform:translateX(-50%)!important;
            filter:drop-shadow(0 3px 2px rgba(27,83,169,.14));
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .tab-icon{
            grid-column:1!important;
            width:34px!important;
            height:34px!important;
            flex:0 0 34px!important;
            display:grid!important;
            place-items:center!important;
            margin:0!important;
            border-radius:10px!important;
            background:rgba(255,255,255,.66)!important;
            color:#7d899a!important;
            box-shadow:inset 0 0 0 1px rgba(95,113,139,.08)!important;
            font-size:.98rem!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .nav-link.active .tab-icon{
            color:#fff!important;
            background:rgba(255,255,255,.18)!important;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.20)!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-label{
            grid-column:2!important;
            min-width:0!important;
            display:block!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
            display:block!important;
            color:inherit!important;
            font-size:.80rem!important;
            font-weight:900!important;
            line-height:1.12!important;
            white-space:normal!important;
            overflow-wrap:anywhere!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-count{
            grid-column:3!important;
            min-width:26px!important;
            height:24px!important;
            padding:0 7px!important;
            display:inline-flex!important;
            align-items:center!important;
            justify-content:center!important;
            border-radius:999px!important;
            background:rgba(255,255,255,.72)!important;
            color:#7b8798!important;
            font-size:.65rem!important;
            font-weight:900!important;
            line-height:1!important;
            white-space:nowrap!important;
            box-shadow:inset 0 0 0 1px rgba(101,118,143,.08)!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .nav-link.active .trackspace-tab-count{
            background:rgba(255,255,255,.22)!important;
            color:#fff!important;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important;
        }

        /* Beri ruang untuk segitiga tab aktif sebelum panel isi. */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs + .finance-tab-content{
            margin-top:18px!important;
        }

        @media(max-width:991.98px){
            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item{
                flex-basis:158px!important;
                min-width:158px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
                min-height:58px!important;
                padding:9px 12px!important;
                grid-template-columns:34px minmax(0,1fr) auto!important;
                column-gap:8px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .tab-icon{
                width:32px!important;
                height:32px!important;
                flex-basis:32px!important;
            }
        }

        @media(max-width:575.98px){
            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs{
                border-radius:11px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item{
                flex-basis:145px!important;
                min-width:145px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
                min-height:56px!important;
                padding:8px 10px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
                font-size:.75rem!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-count{
                min-width:23px!important;
                height:22px!important;
                padding:0 6px!important;
                font-size:.61rem!important;
            }
        }


        /* =========================================================
           PANAH BAWAH DI SETIAP TAB
           - Semua tab punya panah bawah.
           - Tab aktif tetap biru.
           - Tab nonaktif abu terang seperti contoh.
        ========================================================= */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs{
            padding-bottom:12px!important; /* ruang untuk panah */
            overflow-y:visible!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item{
            overflow:visible!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
            overflow:visible!important;
        }

        /* Panah default untuk semua tab */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link::after{
            content:""!important;
            position:absolute!important;
            left:50%!important;
            bottom:-10px!important;
            width:0!important;
            height:0!important;
            border-left:10px solid transparent!important;
            border-right:10px solid transparent!important;
            border-top:10px solid #e8edf3!important;
            transform:translateX(-50%)!important;
            filter:drop-shadow(0 2px 2px rgba(125,140,160,.12));
            opacity:1!important;
        }

        /* Panah tab aktif */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link.active::after{
            border-top-color:#2f81ee!important;
            filter:drop-shadow(0 3px 2px rgba(27,83,169,.16));
        }

        /* Sedikit penegasan pada tab hover */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link:hover::after{
            border-top-color:#edf2f8!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link.active:hover::after{
            border-top-color:#2f81ee!important;
        }

        /* Beri jarak panel isi agar panah tidak menempel */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs + .finance-tab-content{
            margin-top:12px!important;
        }


        /* =========================================================
           ANGKA TAB DI BAWAH JUDUL
           Ikon tetap di kiri; judul dan badge angka tersusun vertikal.
        ========================================================= */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
            min-height:70px!important;
            padding:10px 14px!important;
            display:grid!important;
            grid-template-columns:38px minmax(0,1fr)!important;
            grid-template-rows:auto auto!important;
            align-items:center!important;
            align-content:center!important;
            column-gap:10px!important;
            row-gap:4px!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .tab-icon{
            grid-column:1!important;
            grid-row:1 / span 2!important;
            align-self:center!important;
            justify-self:start!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-label{
            grid-column:2!important;
            grid-row:1!important;
            align-self:end!important;
            justify-self:start!important;
            width:100%!important;
            min-width:0!important;
            margin:0!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
            display:block!important;
            margin:0!important;
            font-size:.80rem!important;
            font-weight:900!important;
            line-height:1.12!important;
            text-align:left!important;
            white-space:normal!important;
            overflow-wrap:anywhere!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-count{
            grid-column:2!important;
            grid-row:2!important;
            align-self:start!important;
            justify-self:start!important;
            width:auto!important;
            min-width:28px!important;
            height:20px!important;
            margin:0!important;
            padding:0 7px!important;
            display:inline-flex!important;
            align-items:center!important;
            justify-content:center!important;
            border-radius:999px!important;
            background:rgba(47,101,180,.10)!important;
            color:#647691!important;
            font-size:.62rem!important;
            font-weight:900!important;
            line-height:1!important;
            white-space:nowrap!important;
            box-shadow:inset 0 0 0 1px rgba(75,101,139,.07)!important;
        }

        

        @media(max-width:991.98px){
            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
                min-height:66px!important;
                padding:9px 11px!important;
                grid-template-columns:34px minmax(0,1fr)!important;
                column-gap:8px!important;
                row-gap:3px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
                font-size:.76rem!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-count{
                min-width:26px!important;
                height:19px!important;
                padding:0 6px!important;
                font-size:.59rem!important;
            }
        }

        @media(max-width:575.98px){
            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
                min-height:64px!important;
                padding:8px 10px!important;
                grid-template-columns:32px minmax(0,1fr)!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
                font-size:.73rem!important;
                line-height:1.1!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-count{
                min-width:24px!important;
                height:18px!important;
                padding:0 6px!important;
                font-size:.57rem!important;
            }
        }


        /* =========================================================
           TAB TANPA ANGKA — JUDUL DIPERBESAR PROPORSIONAL
           Ikon di kiri, judul di kanan, tanpa badge angka.
        ========================================================= */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
            min-height:66px!important;
            padding:10px 15px!important;
            display:grid!important;
            grid-template-columns:40px minmax(0,1fr)!important;
            grid-template-rows:1fr!important;
            align-items:center!important;
            align-content:center!important;
            column-gap:11px!important;
            row-gap:0!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .tab-icon{
            grid-column:1!important;
            grid-row:1!important;
            width:36px!important;
            height:36px!important;
            flex:0 0 36px!important;
            align-self:center!important;
            justify-self:start!important;
            font-size:1rem!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-label{
            grid-column:2!important;
            grid-row:1!important;
            align-self:center!important;
            justify-self:start!important;
            width:100%!important;
            min-width:0!important;
            margin:0!important;
        }

        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
            display:block!important;
            margin:0!important;
            color:inherit!important;
            font-size:clamp(.88rem,1.05vw,1.02rem)!important;
            font-weight:900!important;
            line-height:1.14!important;
            letter-spacing:.005em!important;
            text-align:left!important;
            white-space:normal!important;
            word-break:normal!important;
            overflow-wrap:anywhere!important;
        }

        /* Pastikan aturan badge lama tidak memengaruhi layout */
        body.finance-landing-page .finance-monitor-card
        #assetTabs.trackspace-six-tabs .trackspace-tab-count{
            display:none!important;
        }

        @media(max-width:991.98px){
            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
                min-height:62px!important;
                padding:9px 12px!important;
                grid-template-columns:36px minmax(0,1fr)!important;
                column-gap:9px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .tab-icon{
                width:33px!important;
                height:33px!important;
                flex-basis:33px!important;
                font-size:.95rem!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
                font-size:.88rem!important;
                line-height:1.12!important;
            }
        }

        @media(max-width:575.98px){
            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs > li.nav-item > .nav-link{
                min-height:60px!important;
                padding:8px 10px!important;
                grid-template-columns:34px minmax(0,1fr)!important;
                column-gap:8px!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .tab-icon{
                width:31px!important;
                height:31px!important;
                flex-basis:31px!important;
                font-size:.90rem!important;
            }

            body.finance-landing-page .finance-monitor-card
            #assetTabs.trackspace-six-tabs .trackspace-tab-label strong{
                font-size:.84rem!important;
                line-height:1.10!important;
            }
        }


        /* =========================================================
           ULTRA LIGHT RENDERING
           Tidak mengubah desain/rule; hanya mengurangi biaya paint/layout.
        ========================================================= */
        :root{
            font-synthesis:none;
        }
        html{
            text-rendering:optimizeSpeed;
        }
        body,
        button,
        input,
        select,
        textarea{
            font-family:"Arial Narrow","Roboto Condensed","Liberation Sans Narrow",
                        system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
        }
        img{
            max-width:100%;
            height:auto;
        }
        picture{
            display:contents;
        }
        .finova-feature-strip-wrap,
        .finance-monitor-section,
        .finance-tab-content,
        .finova-footer{
            content-visibility:auto;
            contain-intrinsic-size:1px 720px;
        }
        .finance-tab-panel:not(.active){
            content-visibility:hidden;
        }
        canvas{
            contain:strict;
        }
        @media(prefers-reduced-motion:reduce){
            *,*::before,*::after{
                scroll-behavior:auto!important;
                animation-duration:.01ms!important;
                animation-iteration-count:1!important;
                transition-duration:.01ms!important;
            }
        }

        /* =========================================================
           TYPOGRAPHY PATCH — ROBOTO CONDENSED
           Teks umum normal; tebal hanya untuk elemen penting.
        ========================================================= */
        html,
        body,
        button,
        input,
        select,
        textarea,
        option,
        optgroup{
            font-family:"Roboto Condensed",Arial,sans-serif!important;
        }

        body,
        body *:not(.bi):not([class^="bi-"]):not([class*=" bi-"]){
            font-family:"Roboto Condensed",Arial,sans-serif!important;
        }

        body *:not(strong):not(b):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
            font-weight:400!important;
        }

        /* Penekanan yang memang perlu tetap tebal, tetapi tidak berlebihan. */
        h1,h2,h3,h4,h5,h6,
        strong,b,
        .navbar-brand,
        .brand-title,
        .trackspace-brand,
        .trackspace-kpi-value,
        .trackspace-kpi-card-value,
        .trackspace-summary-number-block>strong,
        .trackspace-summary-value-block>strong,
        .trackspace-gedung-stat strong,
        .trackspace-room-table-title h5,
        .finance-tab-panel .trackspace-module-heading h3,
        .btn-primary,
        .btn-login{
            font-weight:600!important;
        }

        /* Judul utama dan angka KPI boleh sedikit lebih kuat. */
        .trackspace-hero h1,
        .hero-title,
        .trackspace-kpi-value,
        .trackspace-kpi-card-value,
        .trackspace-summary-number-block>strong,
        .trackspace-summary-value-block>strong{
            font-weight:700!important;
        }

        /* Label, tab, tombol, tabel, dan kontrol dibuat sedang agar tetap jelas. */
        .nav-link,
        .finance-tab-button,
        .trackspace-monitor-select-control,
        .trackspace-filter-actions,
        .trackspace-room-table thead th,
        label,
        button,
        .btn{
            font-weight:500!important;
        }

        /* Teks pendukung tetap ringan dan nyaman dibaca. */
        p,small,
        .text-muted,
        .trackspace-kpi-detail-row span,
        .trackspace-gedung-title small,
        .trackspace-gedung-location,
        .trackspace-gedung-stat small,
        .trackspace-gedung-detail span,
        .trackspace-summary-legend,
        .trackspace-summary-report-time,
        .trackspace-combined-note{
            font-weight:400!important;
        }

/* =========================================================
   FINAL MOBILE HERO — BESAR, PROPORSIONAL, UTUH, TANPA SCROLL HERO
   - Menggantikan patch 172–176vw yang saling bertabrakan.
   - Tinggi visual mengikuti tinggi gambar asli, bukan wadah fixed.
   - Tidak ada overflow/scroll internal pada hero.
   - Jarak atas dan bawah visual dirapatkan agar menyatu.
   - Ornamen animasi belakang hero dimatikan pada smartphone.
   ========================================================= */
@media (max-width: 767.98px) {
    html,
    body.finance-landing-page {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: none !important;
        background-attachment: scroll !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finova-navbar {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-grid {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-areas:
            "copy"
            "visual" !important;
        align-items: start !important;
        justify-items: center !important;
        gap: 0 !important;
        row-gap: 0 !important;
        overflow: hidden !important;
        transform: none !important;
        translate: none !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy {
        grid-area: copy !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 clamp(12px, 4vw, 22px) !important;
        transform: none !important;
        translate: none !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .trackspace-update-box {
        margin-bottom: 0 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual {
        grid-area: visual !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        margin: clamp(-18px, -3vw, -8px) 0 0 !important;
        padding: 0 !important;
        display: grid !important;
        place-items: end center !important;
        overflow: hidden !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
        overscroll-behavior: none !important;
        touch-action: pan-y !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        animation: none !important;
        transition: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        contain: layout paint !important;
        isolation: isolate !important;
        z-index: 10 !important;
    }

    /* Hilangkan seluruh ornamen/animasi di belakang gambar pada HP. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual::before,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual-decor,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual-arrows,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-decor-icon,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-decor-dot {
        display: none !important;
        visibility: hidden !important;
        animation: none !important;
        transition: none !important;
    }

    /* Picture menjadi sumber ukuran alami visual agar tidak ada area kosong palsu. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: min(760px, 122vw) !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 auto clamp(-22px, -4vw, -10px) !important;
        padding: 0 !important;
        overflow: visible !important;
        transform: none !important;
        translate: none !important;
        animation: none !important;
        transition: none !important;
        z-index: 5 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture > img.finova-hero-people,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-people,
    html body.finance-landing-page .finova-visual .finova-hero-people {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        object-fit: contain !important;
        object-position: center bottom !important;
        transform: none !important;
        translate: none !important;
        rotate: none !important;
        scale: none !important;
        transform-origin: center bottom !important;
        animation: none !important;
        transition: none !important;
        will-change: auto !important;
        pointer-events: none !important;
        touch-action: pan-y !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -webkit-user-drag: none !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        filter: drop-shadow(0 24px 38px rgba(0, 34, 101, .22)) !important;
        z-index: 5 !important;
    }

    /* Kartu data tetap terlihat, tetapi dijaga aman di dalam viewport HP. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card {
        max-width: 43vw !important;
        animation: none !important;
        transition: none !important;
        z-index: 24 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card.card-two {
        top: 24% !important;
        right: 2% !important;
        bottom: auto !important;
        left: auto !important;
        transform: scale(.78) !important;
        transform-origin: right top !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card.card-one {
        top: auto !important;
        right: auto !important;
        bottom: 17% !important;
        left: 2% !important;
        transform: scale(.78) !important;
        transform-origin: left bottom !important;
    }

    /* Bagian sesudah hero langsung menempel tanpa ruang kosong tambahan. */
    html body.finance-landing-page .finova-mobile-action-wrap {
        margin-top: 0 !important;
    }
}

@media (max-width: 420px) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual {
        margin-top: -14px !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture {
        width: min(680px, 126vw) !important;
        margin-bottom: -18px !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card.card-two,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card.card-one {
        transform: scale(.70) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual * {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   FINAL FORCE OVERLAP MOBILE CARD — TrackSPACE BMN
   Menggunakan transform/top, bukan hanya negative margin,
   agar tetap bekerja meskipun rule lama mengubah margin hero.
   ========================================================= */
@media (max-width: 767.98px) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        position: relative !important;
        z-index: 1 !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual {
        position: relative !important;
        z-index: 2 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    html body.finance-landing-page > section.finova-mobile-action-wrap {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 100 !important;
        width: calc(100% - 20px) !important;
        max-width: 940px !important;
        margin: 0 auto -46px !important;
        padding: 0 !important;
        transform: translate3d(0, -46px, 0) !important;
        overflow: visible !important;
        isolation: isolate !important;
    }

    html body.finance-landing-page > section.finova-mobile-action-wrap > .finova-mobile-action-card {
        position: relative !important;
        z-index: 101 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        overflow: hidden !important;
        border: 1px solid rgba(255,255,255,.82) !important;
        box-shadow:
            0 -10px 24px rgba(8, 38, 105, .14),
            0 20px 44px rgba(8, 38, 105, .20) !important;
    }

    html body.finance-landing-page > section.finova-feature-strip-wrap {
        position: relative !important;
        z-index: 2 !important;
        margin-top: 46px !important;
    }
}

@media (max-width: 420px) {
    html body.finance-landing-page > section.finova-mobile-action-wrap {
        width: calc(100% - 16px) !important;
        margin-bottom: -38px !important;
        transform: translate3d(0, -38px, 0) !important;
    }

    html body.finance-landing-page > section.finova-feature-strip-wrap {
        margin-top: 38px !important;
    }
}

/* =========================================================
   FINAL MOBILE POSITION PATCH
   - Card TrackSPACE diturunkan sedikit, overlap tetap terlihat.
   - Logo dan tombol Masuk diberi safe-space dari tepi layar.
   ========================================================= */
@media (max-width: 767.98px) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: calc(100% - 28px) !important;
        min-width: 0 !important;
        max-width: calc(100% - 28px) !important;
        min-height: 58px !important;
        height: 58px !important;
        margin: 10px auto 12px !important;
        padding: 7px 10px !important;
        box-sizing: border-box !important;
        border-radius: 18px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        overflow: visible !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar > a.finova-brand {
        position: relative !important;
        left: auto !important;
        margin: 0 !important;
        padding: 0 0 0 2px !important;
        min-width: 0 !important;
        max-width: calc(100% - 84px) !important;
        height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        overflow: visible !important;
        flex: 0 1 auto !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark {
        width: 72px !important;
        height: 48px !important;
        min-width: 72px !important;
        flex: 0 0 72px !important;
        margin: 0 !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark picture,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark img {
        display: block !important;
        width: 72px !important;
        max-width: 72px !important;
        height: 48px !important;
        max-height: 48px !important;
        margin: 0 !important;
        object-fit: contain !important;
        object-position: left center !important;
        transform: none !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar > .finova-nav-actions {
        position: relative !important;
        right: auto !important;
        margin: 0 !important;
        padding: 0 2px 0 0 !important;
        flex: 0 0 auto !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-login {
        min-width: 58px !important;
        min-height: 38px !important;
        margin: 0 !important;
        padding: 8px 13px !important;
        border-radius: 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
    }

    /* Turunkan card: overlap dari 46px menjadi 30px. */
    html body.finance-landing-page > section.finova-mobile-action-wrap {
        width: calc(100% - 20px) !important;
        margin: 0 auto -30px !important;
        transform: translate3d(0, -30px, 0) !important;
    }

    html body.finance-landing-page > section.finova-feature-strip-wrap {
        margin-top: 30px !important;
    }
}

@media (max-width: 420px) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar {
        width: calc(100% - 22px) !important;
        max-width: calc(100% - 22px) !important;
        margin-top: 8px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark picture,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark img {
        width: 66px !important;
        max-width: 66px !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar .finova-brand-mark {
        min-width: 66px !important;
        flex-basis: 66px !important;
    }

    html body.finance-landing-page > section.finova-mobile-action-wrap {
        width: calc(100% - 16px) !important;
        margin-bottom: -25px !important;
        transform: translate3d(0, -25px, 0) !important;
    }

    html body.finance-landing-page > section.finova-feature-strip-wrap {
        margin-top: 25px !important;
    }
}


/* =========================================================
   FINAL OVERRIDE — MOBILE NAV SELALU PALING ATAS + HERO 2X
   - Navigasi Home/DBR/SIP/Satker/Login tidak tertimpa elemen lain.
   - Posisi, bentuk, warna, dan ukuran navigasi lama dipertahankan.
   - Gambar hero diperbesar tepat 2x dari ukuran final sebelumnya.
   - Diletakkan paling akhir agar tidak dikalahkan patch lama.
   ========================================================= */
@media (max-width: 767.98px) {
    /* Kunci navigasi mobile pada viewport dan lapisan paling depan. */
    html body.finance-landing-page .finance-mobile-bottom-nav {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: max(12px, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        z-index: 2147483646 !important;
        isolation: isolate !important;
        transform: translate3d(0, 0, 0) !important;
        translate: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        overflow: visible !important;
        contain: layout style !important;
        will-change: transform !important;
    }

    html body.finance-landing-page .finance-mobile-bottom-nav::before,
    html body.finance-landing-page .finance-mobile-bottom-nav::after,
    html body.finance-landing-page .finance-mobile-bottom-nav > * {
        position: relative !important;
        z-index: 1 !important;
    }

    /* Semua bagian hero/card tetap berada di bawah navigasi mobile. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card,
    html body.finance-landing-page > section.finova-mobile-action-wrap,
    html body.finance-landing-page > section.finova-feature-strip-wrap,
    html body.finance-landing-page .finance-monitor-section {
        z-index: auto !important;
    }

    /*
     * Ukuran sebelumnya 122vw. Nilai 244vw = tepat 2x.
     * Picture tetap menjadi sumber tinggi alami agar hero tidak gepeng.
     */
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture {
        width: min(1520px, 244vw) !important;
        min-width: min(1520px, 244vw) !important;
        max-width: none !important;
        height: auto !important;
        margin-left: 50% !important;
        margin-right: 0 !important;
        transform: translateX(-50%) !important;
        transform-origin: center bottom !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture > img.finova-hero-people,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-people,
    html body.finance-landing-page .finova-visual .finova-hero-people {
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
        object-fit: contain !important;
        object-position: center bottom !important;
    }

    /* Sisakan ruang bawah agar konten terakhir tidak tertutup navigasi. */
    html body.finance-landing-page {
        padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
    }
}

@media (max-width: 420px) {
    html body.finance-landing-page .finance-mobile-bottom-nav {
        left: 8px !important;
        right: 8px !important;
        bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }

    /* Ukuran sebelumnya 126vw. Nilai 252vw = tepat 2x. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture {
        width: min(1360px, 252vw) !important;
        min-width: min(1360px, 252vw) !important;
    }
}

/* =========================================================
   FINAL OVERRIDE — HERO 2X TEPAT DI TENGAH
   - Ukuran hero 2x tetap dipertahankan.
   - Gambar dikunci simetris pada pusat kontainer.
   - Navigasi dan komponen lain tidak diubah.
   ========================================================= */
@media (max-width: 767.98px) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        text-align: center !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        flex: 0 0 auto !important;
        align-self: flex-end !important;
        justify-self: center !important;

        width: min(1520px, 244vw) !important;
        min-width: min(1520px, 244vw) !important;
        max-width: none !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        translate: none !important;
        transform-origin: center bottom !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture > img.finova-hero-people,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-people,
    html body.finance-landing-page .finova-visual .finova-hero-people {
        display: block !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        height: auto !important;

        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
        translate: none !important;

        object-fit: contain !important;
        object-position: center bottom !important;
    }
}

@media (max-width: 420px) {
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture {
        width: min(1360px, 252vw) !important;
        min-width: min(1360px, 252vw) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        transform: none !important;
    }
}



/* =========================================================
   FINAL MOBILE HERO TOUCH-SCROLL PATCH
   - Usapan vertikal pada area hero langsung menggulir halaman.
   - Menghapus penguncian overscroll dari patch sebelumnya.
   - Gambar besar tetap berada di tengah dan tidak dapat diseret.
   - Navbar, tombol, form, serta card tetap bisa disentuh/diklik.
   ========================================================= */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    html {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.finance-landing-page {
        height: auto !important;
        min-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hero bukan lagi scroll-container yang mengunci gesture vertikal. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        overflow-x: clip !important;
        overflow-y: visible !important;
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-grid,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual {
        overscroll-behavior-y: auto !important;
        touch-action: pan-y pinch-zoom !important;
    }

    /* Lapisan visual tidak menangkap sentuhan, sehingga swipe jatuh ke halaman. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual > picture,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-people,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-float-card,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual-decor,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-visual-arrows,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-decor-icon,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-decor-dot {
        pointer-events: none !important;
        touch-action: pan-y pinch-zoom !important;
    }

    /* Elemen interaktif hero tetap normal. */
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar *,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy a,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy button,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy input,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy select,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy textarea,
    html body.finance-landing-page main.finance-hero-shell.finova-hero .finova-hero-copy label {
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }
}

/* Fallback browser lama yang belum mendukung overflow: clip. */
@supports not (overflow: clip) {
    @media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
        html body.finance-landing-page main.finance-hero-shell.finova-hero {
            overflow-x: hidden !important;
            overflow-y: visible !important;
        }
    }
}

/* =========================================================
   FINAL MOBILE FIX — HILANGKAN GARIS PUTIH DI ATAS NAVBAR
   - Menghapus margin bawaan browser pada body.
   - Menghilangkan border/outline atas tanpa mengubah logo,
     tombol Masuk, posisi navbar, hero, atau rule lainnya.
   ========================================================= */
@media (max-width: 767.98px) {
    html,
    body,
    body.finance-landing-page {
        margin: 0 !important;
        border-top: 0 !important;
        outline: 0 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        margin-top: 0 !important;
        border-top: 0 !important;
        outline: 0 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar {
        border-top: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar::before,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > nav.finova-navbar::after {
        display: none !important;
        content: none !important;
        border: 0 !important;
    }
}

/* =========================================================
   FINAL HARD FIX — HAPUS GARIS/CELAH DI ATAS LOGO & LOGIN
   - Menonaktifkan efek rubber-band/overscroll putih di sisi atas.
   - Selector tidak dibatasi tag <nav>, sehingga tetap bekerja
     bila navbar menggunakan <div>, <header>, atau elemen lainnya.
   - Scroll vertikal/swipe ke atas tetap aktif.
   - Posisi logo, tombol Masuk, hero, dan card tidak diubah.
   ========================================================= */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    html,
    body,
    body.finance-landing-page {
        margin: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
        outline: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        /* Scroll tetap aktif, tetapi pantulan putih di atas dibuang. */
        overscroll-behavior-x: none !important;
        overscroll-behavior-y: none !important;
        touch-action: pan-y pinch-zoom !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /*
     * Warna cadangan viewport dibuat sama dengan bagian atas hero.
     * Ini mencegah kilatan/garis putih saat browser menggambar ulang.
     */
    html,
    body.finance-landing-page {
        background-color: #1764e8 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        margin-top: 0 !important;
        padding-top: 0 !important;
        border-top: 0 !important;
        outline: 0 !important;
        top: 0 !important;

        overscroll-behavior-y: none !important;
        touch-action: pan-y pinch-zoom !important;

        background-color: #1764e8 !important;
        background-clip: border-box !important;
    }

    /*
     * Gunakan selector kelas, bukan hanya nav.finova-navbar.
     * Inilah yang memastikan margin atas lama benar-benar dikalahkan.
     */
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finova-navbar,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finance-navbar {
        margin-top: 0 !important;
        border-top: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        top: 0 !important;
    }

    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finova-navbar::before,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finova-navbar::after,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finance-navbar::before,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finance-navbar::after {
        content: none !important;
        display: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /*
     * Menutup kemungkinan celah subpixel 1px akibat scaling browser.
     * Tidak menggeser isi navbar secara visual.
     */
    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        clip-path: inset(0 0 0 0) !important;
    }
}

/* =========================================================
   FINAL COLOR FIX — GARIS ATAS BIRU, FOOTER TETAP SEPERTI SEMULA
   - Celah/garis paling atas memakai warna biru senada dengan hero.
   - Background body dikembalikan ke warna halaman semula.
   - Footer tidak diberi override warna baru.
   - Posisi logo, tombol login, hero, card, dan swipe tidak berubah.
   ========================================================= */
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    /*
     * Warna root dipakai oleh area viewport/safe-area paling atas.
     * Karena hanya html yang biru, footer tidak ikut berubah biru.
     */
    html {
        background: #1764e8 !important;
        background-color: #1764e8 !important;
    }

    /*
     * Batalkan rule sebelumnya yang membuat seluruh body biru.
     * Dengan ini area konten bawah dan footer kembali seperti semula.
     */
    body,
    body.finance-landing-page {
        background: #f4f7fb !important;
        background-color: #f4f7fb !important;
    }

    /*
     * Hero tetap biru dan diperpanjang sedikit ke atas untuk menutup
     * celah putih/subpixel tanpa menambah tinggi atau menggeser navbar.
     */
    html body.finance-landing-page main.finance-hero-shell.finova-hero {
        background-color: #1764e8 !important;
        box-shadow: 0 -40px 0 0 #1764e8 !important;
    }

    /*
     * Navbar mengikuti warna biru hero. Tidak ada border putih atas.
     */
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finova-navbar,
    html body.finance-landing-page main.finance-hero-shell.finova-hero > .finance-navbar {
        border-top-color: transparent !important;
        outline: 0 !important;
    }

    /*
     * Footer sengaja tidak diubah. Selector berikut hanya memastikan
     * footer transparan terhadap background halaman semula, bukan biru.
     */
    footer,
    .finova-footer,
    .finance-footer-note {
        background-color: transparent !important;
    }
}