<style>
    :root {
      --navy:   #0a1628;
      --blue:   #1a3a6e;
      --accent: #e8a020;
      --gold:   #f5c842;
      --light:  #f0f4fa;
      --white:  #ffffff;
      --green:  #22c55e;
      --orange: #f97316;
      --red:    #ef4444;
      --gray:   #94a3b8;
      --border: #d1daea;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--light); color: var(--navy); min-height: 100vh; }

    /* HEADER */
    header { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 60%, #1e4d9e 100%); padding: 0; position: relative; overflow: hidden; }
    header::before { content: ''; position: absolute; top: -60px; right: -80px; width: 340px; height: 340px; border-radius: 50%; background: rgba(232,160,32,.12); }
    header::after  { content: ''; position: absolute; bottom: -40px; left: 30%; width: 220px; height: 220px; border-radius: 50%; background: rgba(245,200,66,.07); }

    .header-inner { max-width: 1100px; margin: 0 auto; padding: 48px 32px 40px; position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; }
    .header-logo { width: 72px; height: 72px; background: var(--accent); border-radius: 18px; display: grid; place-items: center; font-size: 32px; flex-shrink: 0; box-shadow: 0 8px 24px rgba(232,160,32,.4); }
    .header-text h1 { font-size: 2rem; font-weight: 800; color: var(--white); letter-spacing: -.5px; line-height: 1.15; }
    .header-text h1 span { color: var(--gold); }
    .header-text p { color: rgba(255,255,255,.65); font-size: .88rem; margin-top: 4px; font-weight: 500; letter-spacing: .3px; }
    .badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: var(--gold); font-size: .75rem; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-top: 10px; letter-spacing: .5px; text-transform: uppercase; }

    /* BACK LINK */
    .back-link { max-width: 1100px; margin: 0 auto; padding: 20px 32px 0; }
    .back-link a { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 600; color: var(--blue); text-decoration: none; transition: gap .2s; }
    .back-link a:hover { gap: 10px; color: var(--navy); }

    /* MAIN */
    main { max-width: 1100px; margin: 0 auto; padding: 28px 32px 60px; }

    /* INFO BAND */
    .info-band { background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--accent); border-radius: 12px; padding: 20px 24px; margin-bottom: 32px; display: flex; align-items: flex-start; gap: 14px; }
    .info-icon { font-size: 24px; flex-shrink: 0; margin-top: 2px; }
    .info-band p { font-size: .92rem; color: #475569; line-height: 1.7; }
    .info-band strong { color: var(--navy); }

    /* STAT CARDS */
    .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 32px; }
    .stat-card { background: var(--white); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
    .stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(10,22,40,.08); }
    .sc-label { font-size: .73rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--gray); margin-bottom: 8px; }
    .sc-value { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; font-weight: 600; color: var(--navy); }
    .sc-sub { font-size: .75rem; color: var(--gray); margin-top: 4px; }
    .sc-dot { width: 10px; height: 10px; border-radius: 50%; position: absolute; top: 20px; right: 20px; }

    /* TABLE SECTION */
    .table-card { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(10,22,40,.05); }
    .table-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--border); }
    .table-header h2 { font-size: 1rem; font-weight: 700; color: var(--navy); }

    .search-form { display: flex; align-items: center; gap: 8px; background: var(--light); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; }
    .search-form input { border: none; background: transparent; outline: none; font-family: inherit; font-size: .85rem; color: var(--navy); width: 180px; }

    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; font-size: .875rem; }
    thead tr { background: linear-gradient(90deg, var(--navy) 0%, var(--blue) 100%); }
    thead th { padding: 14px 16px; text-align: left; color: rgba(255,255,255,.85); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; white-space: nowrap; }
    thead th:first-child { text-align: center; width: 52px; }
    thead th.num-col { text-align: right; }
    tbody tr { border-bottom: 1px solid #edf2f8; transition: background .15s; }
    tbody tr:hover { background: #f7faff; }
    tbody tr:last-child { border-bottom: none; }
    tbody td { padding: 14px 16px; color: #334155; vertical-align: middle; }
    tbody td:first-child { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: .78rem; color: var(--gray); font-weight: 500; }
    td.jumlah { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--navy); text-align: right; font-size: .83rem; }
    td.volume { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; color: #475569; }
    td.uraian strong { display: block; color: var(--navy); font-weight: 600; margin-bottom: 2px; }
    td.uraian span { font-size: .78rem; color: var(--gray); }

    /* PILL STATUS */
    .pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
    .pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; }
    .pill.selesai      { background: #dcfce7; color: #15803d; } .pill.selesai::before      { background: #22c55e; }
    .pill.proses       { background: #fef3c7; color: #b45309; } .pill.proses::before       { background: #f59e0b; }
    .pill.belum        { background: #fee2e2; color: #b91c1c; } .pill.belum::before        { background: #ef4444; }
    .pill.direncanakan { background: #e0f2fe; color: #0369a1; } .pill.direncanakan::before { background: #38bdf8; }

    /* BULAN CHIP */
    .bulan-chip { display: inline-block; background: #eff6ff; color: var(--blue); border: 1px solid #bfdbfe; border-radius: 6px; padding: 3px 9px; font-size: .73rem; font-weight: 700; letter-spacing: .3px; }

    /* TOTAL ROW */
    .total-row td { background: #f8fafc; font-weight: 700; color: var(--navy); border-top: 2px solid var(--border) !important; }
    .total-row td.jumlah { color: var(--accent); font-size: .9rem; }

    /* TABLE FOOTER */
    .table-footer { padding: 14px 24px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--gray); }
    .table-footer strong { color: var(--navy); }

    /* EMPTY */
    .empty-table { text-align: center; padding: 40px; color: var(--gray); font-size: .9rem; }

    footer { text-align: center; padding: 20px; font-size: .78rem; color: var(--gray); border-top: 1px solid var(--border); }

    @media (max-width: 640px) {
      .header-inner { padding: 32px 20px 28px; gap: 16px; }
      .header-text h1 { font-size: 1.4rem; }
      .header-logo { width: 52px; height: 52px; font-size: 22px; }
      main { padding: 24px 16px 48px; }
      .search-form { display: none; }
      .table-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    }
</style>