/* =====================================================================
   TEMA "TECH INNOVATION" — LAPISAN TAMPILAN APSS TURN AROUND
   ---------------------------------------------------------------------
   Palet resmi tema (dari skill theme-factory):

       Electric Blue   #0066ff    aksen utama
       Neon Cyan       #00ffff    sorotan / cahaya
       Dark Gray       #1e1e1e    latar dalam
       White           #ffffff    teks & kontras

   ---------------------------------------------------------------------
   TIGA ATURAN YANG TIDAK BOLEH DILANGGAR DI BERKAS INI
   ---------------------------------------------------------------------
   1.  SELURUH isi berkas dikurung dalam @media screen.
       Laporan cetak memakai satuan pt dan tata letak tanda tangannya
       punya arti hukum. Satu baris CSS yang bocor ke media cetak bisa
       menggeser kotak tanda tangan. Karena itu: tidak ada satu pun
       aturan di sini yang berlaku waktu dicetak.

   2.  Tidak ada elemen yang default-nya disembunyikan.
       Animasi "muncul" dipasang oleh gerak-apss.js lewat penambahan
       kelas. Kalau JS-nya gagal jalan, halaman tetap tampil utuh —
       bukan jadi halaman kosong. Ini juga yang menjaga 357 uji tetap
       lulus, karena Playwright tidak akan mencari tombol yang hilang.

   3.  Berkas ini hanya MENUMPUK di atas AdminLTE, tidak menggantinya.
       adminlte.css tidak disentuh sama sekali. Mau dicabut? Hapus satu
       baris <link> di layout, semuanya kembali seperti semula.

   ---------------------------------------------------------------------
   Dipasang SESUDAH blok <style> bawaan di layout, supaya nilai
   --aps-* di bawah ini yang menang (specificity sama, yang belakangan
   yang dipakai).
   ===================================================================== */

@media screen {

  /* ==================================================================
     1. TOKEN WARNA
     ------------------------------------------------------------------
     Nama --aps-* sengaja dipertahankan supaya CSS lama yang sudah
     memakainya ikut berubah warna tanpa perlu diedit satu-satu.
     ================================================================== */
  :root {
    /* -- palet tema -- */
    --aps-listrik:    #0066ff;
    --aps-listrik-t:  #3d8bff;   /* terang, untuk hover */
    --aps-listrik-g:  #0047b3;   /* gelap, untuk ditekan */
    --aps-cyan:       #00ffff;
    --aps-cyan-r:     #00d4d4;   /* redup, untuk teks di latar terang */
    --aps-arang:      #1e1e1e;

    /* -- pemetaan ke nama lama -- */
    --aps-biru:       #0d1424;
    --aps-biru-mud:   var(--aps-listrik);
    --aps-aksen:      var(--aps-cyan);
    --aps-radius:     14px;

    /* -- latar & permukaan -- */
    --aps-latar:      #eef2fa;
    --aps-permukaan:  #ffffff;
    --aps-garis:      rgba(13, 20, 36, .08);
    --aps-teks:       #16203a;
    --aps-teks-redup: #5b6780;

    /* -- kedalaman: tiga tingkat, makin tinggi makin "melayang" -- */
    --aps-bayang:     0 1px 2px rgba(13,20,36,.04), 0 4px 14px rgba(13,20,36,.06);
    --aps-bayang-2:   0 2px 6px rgba(13,20,36,.06), 0 14px 34px rgba(13,20,36,.11);
    --aps-bayang-3:   0 4px 10px rgba(13,20,36,.08), 0 26px 56px rgba(13,20,36,.16);

    /* -- cahaya (glow) khas tema ini -- */
    --aps-pendar:     0 0 0 1px rgba(0,102,255,.22), 0 8px 26px rgba(0,102,255,.20);
    --aps-pendar-cy:  0 0 0 1px rgba(0,255,255,.30), 0 8px 26px rgba(0,212,212,.22);

    /* -- gerak: satu kurva untuk semua, supaya terasa satu sistem -- */
    --aps-lentur:     cubic-bezier(.22, 1, .36, 1);
    --aps-cepat:      .18s var(--aps-lentur);
    --aps-sedang:     .32s var(--aps-lentur);
  }

  /* ==================================================================
     2. HURUF
     ------------------------------------------------------------------
     Space Grotesk untuk judul & angka (geometris, berkesan teknis),
     IBM Plex Sans untuk teks isi — huruf ini memang dirancang untuk
     konteks industri dan enak dibaca pada tabel yang padat.

     Rantai cadangannya panjang dan disengaja: kalau Google Fonts tidak
     terjangkau (jaringan kilang diblokir, atau HP sedang luring),
     tampilannya turun ke huruf bawaan sistem tanpa teks berkedip dan
     tanpa halaman rusak.
     ================================================================== */
  body,
  .content-wrapper,
  .modal,
  .swal2-container {
    font-family: "IBM Plex Sans", "Source Sans Pro", "Segoe UI", Roboto,
                 "DejaVu Sans", system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, h2, h3, h4, h5, h6,
  .brand-text-main,
  .card-title,
  .page-title,
  .small-box h3,
  .info-box-number,
  .modal-title,
  .nav-tabs .nav-link {
    font-family: "Space Grotesk", "IBM Plex Sans", "Segoe UI", Roboto,
                 "DejaVu Sans", system-ui, sans-serif;
    letter-spacing: -.012em;
  }

  /* Angka pada tabel & kartu statistik dibuat rata lebar, supaya deret
     angka tidak "bergoyang" waktu nilainya berubah saat dianimasikan. */
  .small-box h3,
  .info-box-number,
  .table td,
  .angka-hidup {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ==================================================================
     3. LATAR — gradien halus yang bergerak sangat lambat
     ------------------------------------------------------------------
     Dua lingkaran cahaya (biru & cyan) yang bergeser pelan. Sengaja
     40 detik per putaran: cukup untuk terasa "hidup" kalau diperhatikan,
     tapi tidak mengganggu waktu orang sedang membaca tabel.
     ================================================================== */
  body.hold-transition,
  .content-wrapper {
    background-color: var(--aps-latar);
    color: var(--aps-teks);
  }

  .content-wrapper {
    position: relative;
    background-image:
      radial-gradient(58rem 40rem at 12% -8%,  rgba(0,102,255,.10), transparent 62%),
      radial-gradient(48rem 34rem at 92% 4%,   rgba(0,212,212,.10), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
  }

  /* ==================================================================
     4. SIDEBAR & HEADER — sisi gelap tema ini
     ------------------------------------------------------------------
     Isi halaman tetap terang supaya tabel padat gampang dibaca di
     bawah lampu kantor maupun di lapangan. Yang digelapkan hanya
     kerangkanya: sidebar dan header.
     ================================================================== */
  .main-sidebar,
  .main-sidebar .sidebar {
    background: linear-gradient(180deg, #131a2b 0%, #0d1424 55%, #0a1020 100%) !important;
  }

  .main-sidebar {
    box-shadow: 1px 0 0 rgba(0,255,255,.07), 4px 0 24px rgba(10,16,32,.16);
  }

  .brand-link {
    background: rgba(0,0,0,.24) !important;
    border-bottom: 1px solid rgba(0,255,255,.12) !important;
    position: relative;
  }

  /* Garis cahaya tipis di bawah logo — penanda khas tema ini. */
  .brand-link::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--aps-cyan), transparent);
    opacity: .5;
  }

  .brand-text-main { color: #fff; }
  .brand-text-sub  { color: rgba(0,255,255,.65); opacity: 1; }

  /* -- butir menu -- */
  .nav-sidebar .nav-link {
    border-radius: 10px;
    margin: 1px .45rem;
    transition: background var(--aps-cepat), color var(--aps-cepat),
                transform var(--aps-cepat);
    position: relative;
  }

  .nav-sidebar .nav-link:hover:not(.active) {
    background: rgba(0,102,255,.16);
    transform: translateX(3px);
  }

  .nav-sidebar .nav-link.active {
    background: linear-gradient(135deg, rgba(0,102,255,.95), rgba(0,102,255,.55)) !important;
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,102,255,.35);
  }

  /* Batang cahaya cyan di tepi kiri menu yang sedang aktif. */
  .nav-sidebar .nav-link.active::before {
    content: '';
    position: absolute; left: -.45rem; top: 18%; bottom: 18%;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--aps-cyan);
    box-shadow: 0 0 10px var(--aps-cyan);
  }

  .nav-sidebar .nav-link.active .nav-icon { color: var(--aps-cyan) !important; }

  .sidebar-user-panel {
    border-bottom: 1px solid rgba(0,255,255,.10);
    background: rgba(0,102,255,.07);
  }
  .sidebar-user-panel .user-role { color: rgba(0,255,255,.62); }

  /* -- header atas -- */
  .main-header {
    background: rgba(255,255,255,.82) !important;
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--aps-garis) !important;
    box-shadow: 0 1px 20px rgba(13,20,36,.05);
  }
  .main-header .page-title { color: var(--aps-teks); }
  .main-header .nav-link   { transition: color var(--aps-cepat); }
  .main-header .nav-link:hover { color: var(--aps-listrik); }

  .breadcrumb-wrap {
    background: linear-gradient(90deg, rgba(0,102,255,.06), rgba(0,212,212,.04));
    border-bottom: 1px solid var(--aps-garis);
  }

  /* -- batang kemajuan di puncak layar -- */
  #nprogress-bar {
    background: linear-gradient(90deg, var(--aps-listrik), var(--aps-cyan));
    box-shadow: 0 0 12px rgba(0,255,255,.75);
    height: 3px;
  }

  /* ==================================================================
     5. KARTU — kaca, kedalaman, dan tepi yang menyala saat disentuh
     ================================================================== */
  /* Tanpa backdrop-filter dan tanpa will-change, dan itu disengaja.
     Keduanya MEMBUAT stacking context di setiap .card. Selama tidak ada
     modal yang bersarang di dalam kartu hal itu tidak terasa, tapi ia
     ranjau yang siap meledak begitu ada yang menaruh satu modal di sana
     (persis bug yang sempat mengurung 8 modal di .content-wrapper).
     Ongkosnya pun nyata: will-change permanen memaksa satu lapisan
     kompositor per kartu, dan halaman WBS bisa punya belasan kartu.
     Rugi kinerjanya pasti, untungnya nyaris tak terlihat — blur di
     balik putih 93% di atas gradien yang sudah amat halus.
     Kaca sungguhan tetap dipakai di halaman masuk & daftar (bagian 15),
     yang latarnya memang kaya warna dan tidak punya modal sama sekali. */
  .card {
    background: rgba(255,255,255,.93);
    border: 1px solid var(--aps-garis);
    border-radius: var(--aps-radius);
    box-shadow: var(--aps-bayang);
    transition: box-shadow var(--aps-sedang),
                transform var(--aps-sedang),
                border-color var(--aps-sedang);
  }

  .card:hover {
    box-shadow: var(--aps-bayang-2);
    border-color: rgba(0,102,255,.26);
  }

  .card-header {
    background: transparent;
    border-bottom: 1px solid var(--aps-garis);
    border-radius: var(--aps-radius) var(--aps-radius) 0 0 !important;
    position: relative;
  }

  /* Aksen garis pendek di kiri judul kartu. */
  .card-header .card-title::before {
    content: '';
    display: inline-block; vertical-align: middle;
    width: 3px; height: .95em; margin-right: .5rem;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--aps-listrik), var(--aps-cyan));
  }

  /* ==================================================================
     6. KARTU STATISTIK (small-box / info-box) — yang paling "3D"
     ------------------------------------------------------------------
     Inilah kartu yang dimiringkan oleh gerak-apss.js waktu kursor
     lewat di atasnya. Perspektifnya dipasang di sini; sudutnya diatur
     dari JS lewat custom property --sdt-x / --sdt-y.
     ================================================================== */
  .small-box,
  .info-box {
    border-radius: var(--aps-radius);
    box-shadow: var(--aps-bayang);
    border: 1px solid var(--aps-garis);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: box-shadow var(--aps-sedang), transform var(--aps-sedang);
    will-change: transform;
  }

  /* Kilau diagonal yang menyapu saat kursor lewat. */
  .small-box::after,
  .info-box::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 38%,
                rgba(255,255,255,.34) 50%, transparent 62%);
    transform: translateX(-120%);
    transition: transform .75s var(--aps-lentur);
    pointer-events: none;
  }
  .small-box:hover::after,
  .info-box:hover::after { transform: translateX(120%); }

  .small-box:hover,
  .info-box:hover { box-shadow: var(--aps-bayang-3); }

  .small-box .icon > i { transition: transform var(--aps-sedang), opacity var(--aps-cepat); }
  .small-box:hover .icon > i { transform: scale(1.12) rotate(-6deg); }

  /* Warna bawaan AdminLTE diselaraskan ke palet tema. */
  .small-box.bg-info,    .bg-info    { background: linear-gradient(135deg, #0066ff, #0aa2c0) !important; }
  .small-box.bg-primary, .bg-primary { background: linear-gradient(135deg, #0047b3, #0066ff) !important; }
  .small-box.bg-success, .bg-success { background: linear-gradient(135deg, #067a6f, #00c2a8) !important; }
  .small-box.bg-warning, .bg-warning { background: linear-gradient(135deg, #b06f00, #f0a500) !important; color: #fff !important; }
  .small-box.bg-danger,  .bg-danger  { background: linear-gradient(135deg, #a11d3a, #e4405f) !important; }

  /* ==================================================================
     7. TOMBOL
     ================================================================== */
  .btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: .1px;
    position: relative;
    overflow: hidden;
    transition: transform var(--aps-cepat), box-shadow var(--aps-cepat),
                filter var(--aps-cepat);
  }

  .btn:not(:disabled):not(.disabled):hover  { transform: translateY(-2px); }
  .btn:not(:disabled):not(.disabled):active { transform: translateY(0); }

  .btn-primary {
    background: linear-gradient(135deg, var(--aps-listrik), var(--aps-listrik-g));
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(0,102,255,.30);
  }
  .btn-primary:hover {
    background: linear-gradient(135deg, var(--aps-listrik-t), var(--aps-listrik));
    box-shadow: 0 8px 24px rgba(0,102,255,.42);
  }

  .btn-success { background: linear-gradient(135deg, #00a88f, #067a6f); border-color: transparent; }
  .btn-info    { background: linear-gradient(135deg, #00b8d4, #0086a8); border-color: transparent; }
  .btn-danger  { background: linear-gradient(135deg, #e4405f, #a11d3a); border-color: transparent; }

  .btn-outline-primary {
    border-color: rgba(0,102,255,.5);
    color: var(--aps-listrik);
  }
  .btn-outline-primary:hover {
    background: var(--aps-listrik);
    box-shadow: 0 6px 20px rgba(0,102,255,.32);
  }

  /* Riak sentuh — elemennya dibuat oleh gerak-apss.js lalu dibuang
     sendiri sesudah animasinya habis. */
  .riak {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.55);
    animation: aps-riak .55s ease-out forwards;
    pointer-events: none;
  }
  @keyframes aps-riak { to { transform: scale(2.6); opacity: 0; } }

  /* ==================================================================
     8. BORANG / ISIAN
     ================================================================== */
  .form-control,
  .custom-select,
  .select2-container--default .select2-selection--single {
    border-radius: 10px;
    border: 1px solid var(--aps-garis);
    background-color: rgba(255,255,255,.9);
    transition: border-color var(--aps-cepat), box-shadow var(--aps-cepat),
                background-color var(--aps-cepat);
  }

  .form-control:focus,
  .custom-select:focus {
    border-color: var(--aps-listrik);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(0,102,255,.16), 0 0 0 1px rgba(0,255,255,.28);
  }

  .input-group-text {
    border-radius: 10px;
    border-color: var(--aps-garis);
    background: rgba(0,102,255,.06);
    color: var(--aps-listrik);
  }

  /* ==================================================================
     9. TABEL
     ================================================================== */
  .table thead th {
    border-top: 0;
    border-bottom: 2px solid rgba(0,102,255,.16);
    background: linear-gradient(180deg, rgba(0,102,255,.07), rgba(0,102,255,.02));
    color: var(--aps-teks);
    font-weight: 700;
    letter-spacing: .2px;
    text-transform: uppercase;
    font-size: .74rem;
  }

  .table tbody tr {
    transition: background var(--aps-cepat), box-shadow var(--aps-cepat);
  }
  .table-hover tbody tr:hover {
    background: rgba(0,102,255,.055);
    box-shadow: inset 3px 0 0 var(--aps-listrik);
  }

  .table td, .table th { border-color: var(--aps-garis); }

  /* ==================================================================
     10. LABEL, TAB, MODAL, PEMBERITAHUAN
     ================================================================== */
  .badge { border-radius: 999px; padding: .3em .7em; letter-spacing: .2px; }
  .badge-primary { background: var(--aps-listrik); }
  .badge-info    { background: #0086a8; }

  .nav-tabs { border-bottom: 1px solid var(--aps-garis); }
  .nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
    color: var(--aps-teks-redup);
    transition: color var(--aps-cepat), border-color var(--aps-cepat),
                background var(--aps-cepat);
  }
  .nav-tabs .nav-link:hover { color: var(--aps-listrik); background: rgba(0,102,255,.05); }
  .nav-tabs .nav-link.active {
    color: var(--aps-listrik);
    background: transparent;
    border-bottom-color: var(--aps-listrik);
    box-shadow: 0 2px 12px -6px var(--aps-listrik);
  }

  .modal-content {
    border: 1px solid var(--aps-garis);
    border-radius: 18px;
    box-shadow: var(--aps-bayang-3);
    overflow: hidden;
  }
  .modal-header {
    background: linear-gradient(135deg, rgba(0,102,255,.10), rgba(0,212,212,.06));
    border-bottom: 1px solid var(--aps-garis);
  }
  .modal-title { color: var(--aps-teks); font-weight: 700; }

  .alert { border: 0; border-left: 3px solid; border-radius: 10px; }
  .alert-info    { border-left-color: var(--aps-listrik); background: rgba(0,102,255,.08);  color: #0b2d63; }
  .alert-success { border-left-color: #00a88f;            background: rgba(0,168,143,.10); color: #0a4b42; }
  .alert-warning { border-left-color: #f0a500;            background: rgba(240,165,0,.10); color: #6b4900; }
  .alert-danger  { border-left-color: #e4405f;            background: rgba(228,64,95,.09); color: #7a1229; }

  .swal2-popup { border-radius: 18px; }

  /* Pemuat tabel diselaraskan dengan warna tema. */
  .tbl-spinner { border-color: rgba(0,102,255,.18); border-top-color: var(--aps-listrik); }
  .tbl-loading-overlay { background: rgba(238,242,250,.78); backdrop-filter: blur(2px); }

  /* Tombol darurat tetap merah — memang harus mencolok, jangan diikutkan
     ke palet biru/cyan. Cuma bayangannya yang diselaraskan. */
  .emergency-btn { box-shadow: 0 6px 22px rgba(228,64,95,.45); }

  /* ==================================================================
     11. KELAS GERAK
     ------------------------------------------------------------------
     PENTING: kelas-kelas di bawah ini hanya dipasang oleh JS.
     Tanpa JS, tidak ada satu pun elemen yang tersembunyi.
     ================================================================== */

  /* Animasi masuk. .aps-masuk dipasang lebih dulu (menyembunyikan),
     lalu .aps-tampak menyusul untuk memunculkan. Karena keduanya
     dipasang dari JS dalam frame yang sama, elemen tidak akan
     "nyangkut" tak terlihat kalau skripnya mati di tengah jalan. */
  .aps-masuk {
    opacity: 0;
    transform: translateY(14px) scale(.985);
    transition: opacity .5s var(--aps-lentur), transform .5s var(--aps-lentur);
  }
  .aps-masuk.aps-tampak { opacity: 1; transform: none; }

  /* Kemiringan 3D. Sudutnya dikirim JS lewat --sdt-x / --sdt-y. */
  .aps-miring {
    transform: perspective(900px)
               rotateX(var(--sdt-x, 0deg))
               rotateY(var(--sdt-y, 0deg))
               translateY(-5px);
    transition: transform .12s linear, box-shadow var(--aps-sedang);
  }
  .aps-miring-lepas { transition: transform .5s var(--aps-lentur); }

  /* Peralihan halaman: isi konten memudar masuk sekali saat dimuat.
     gerak-apss.js MELEPAS kelas ini begitu animasinya selesai — baca
     alasan lengkapnya di sana. Ringkasnya: selama animasi menempel,
     .content-wrapper punya transform, dan itu menjadikannya stacking
     context yang mengurung modal di bawah .modal-backdrop. */
  .aps-halaman-masuk { animation: aps-masuk-halaman .45s var(--aps-lentur) both; }
  @keyframes aps-masuk-halaman {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
  }

  /* Jaring pengaman lapis kedua, murni CSS: begitu Bootstrap membuka
     modal apa pun ia menaruh .modal-open di <body>. Saat itu terjadi,
     animasi dipaksa berhenti sehingga transform-nya hilang dan stacking
     context-nya bubar — modal kembali bisa diklik walaupun JS pelepas
     kelasnya gagal jalan. Kekhususan 0,0,2,0 mengalahkan aturan di atas
     (0,0,1,0), jadi tidak perlu !important. */
  body.modal-open .content-wrapper,
  body.modal-open .lp-isi { animation: none; }

  /* ==================================================================
     14. DASHBOARD
     ------------------------------------------------------------------
     Dashboard menulis gayanya sendiri di dalam <style> pada bagian
     content — artinya blok itu dibaca peramban SESUDAH berkas ini, dan
     pada kekhususan yang sama ia yang menang. Karena itu semua pemilih
     di bawah diawali .content-wrapper: cukup untuk menang, tanpa perlu
     satu pun !important dan tanpa mengubah berkas dashboard-nya.

     Warna semantik sengaja DIPERTAHANKAN maknanya: merah tetap untuk
     kendala, kuning tetap untuk peringatan. Yang diganti hanya nada
     warnanya supaya sekeluarga dengan biru listrik, bukan artinya.
     ================================================================== */

  /* ── Kepala project & judul panel ── */
  .content-wrapper .kepala,
  .content-wrapper .pintasan-judul {
    background: linear-gradient(135deg, #0d1424 0%, #123061 55%, var(--aps-listrik) 100%);
    box-shadow: var(--aps-bayang-2);
  }
  .content-wrapper .kepala {
    border-radius: var(--aps-radius);
    position: relative;
    overflow: hidden;
  }
  /* Garis sian tipis di tepi bawah — tanda "ini panel utama". */
  .content-wrapper .kepala::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
    background: linear-gradient(90deg,
                rgba(0,255,255,0) 0%, var(--aps-cyan) 35%,
                var(--aps-listrik-t) 65%, rgba(0,255,255,0) 100%);
    opacity: .8;
  }
  .content-wrapper .kepala .nm {
    font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
    letter-spacing: -.01em;
  }
  .content-wrapper .pintasan {
    border-radius: var(--aps-radius);
    box-shadow: var(--aps-bayang);
    border: 1px solid var(--aps-garis);
  }

  /* ── Kepala kartu berwarna ── */
  .content-wrapper .dash-head { letter-spacing: .3px; }
  .content-wrapper .hd-biru   { background: linear-gradient(135deg, #08306b, var(--aps-listrik)); }
  .content-wrapper .hd-hijau  { background: linear-gradient(135deg, #06403a, #0f9b8e); }
  .content-wrapper .hd-merah  { background: linear-gradient(135deg, #5c1220, #e0344f); }
  .content-wrapper .hd-jingga { background: linear-gradient(135deg, #6b3d05, #e8930c); }
  .content-wrapper .hd-ungu   { background: linear-gradient(135deg, #2c1a5e, #6c4bd6); }
  .content-wrapper .hd-gelap  { background: linear-gradient(135deg, #0a1020, #24314d); }
  .content-wrapper .dash-card {
    border-radius: var(--aps-radius);
    box-shadow: var(--aps-bayang);
    border: 1px solid var(--aps-garis);
    overflow: hidden;
  }
  .content-wrapper .dash-head {
    border-radius: calc(var(--aps-radius) - 1px) calc(var(--aps-radius) - 1px) 0 0 !important;
  }

  /* ── Papan angka: ini yang paling terasa "3D" di dashboard ── */
  .content-wrapper .angka {
    background: var(--aps-permukaan);
    border: 1px solid var(--aps-garis);
    border-top-width: 3px;
    border-radius: var(--aps-radius);
    box-shadow: var(--aps-bayang);
    padding: .7rem .55rem;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    will-change: transform;
    transition: box-shadow var(--aps-sedang), transform var(--aps-sedang);
  }
  /* Kilau diagonal yang menyapu waktu kursor mendekat. */
  .content-wrapper .angka::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(115deg,
                rgba(255,255,255,0) 35%,
                rgba(0,102,255,.10) 48%,
                rgba(0,255,255,.16) 54%,
                rgba(255,255,255,0) 68%);
    transform: translateX(-120%);
    transition: transform .75s var(--aps-lentur);
    pointer-events: none;
  }
  .content-wrapper .angka:hover::after { transform: translateX(120%); }
  .content-wrapper .angka:hover { box-shadow: var(--aps-bayang-3); }
  /* Waktu kartu sedang dimiringkan, transisinya harus pendek supaya
     kemiringan mengikuti kursor, bukan mengejarnya. Kekhususan di sini
     harus setara .content-wrapper .angka di atas — kalau tidak, transisi
     .32s dari aturan itu yang menang dan gerakannya terasa lengket. */
  .content-wrapper .angka.aps-miring {
    transition: transform .12s linear, box-shadow var(--aps-sedang);
    box-shadow: var(--aps-bayang-3);
  }
  .content-wrapper .angka.aps-miring-lepas {
    transition: transform .5s var(--aps-lentur), box-shadow var(--aps-sedang);
  }
  .content-wrapper .angka .nil {
    font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
    font-size: 1.55rem;
    letter-spacing: -.02em;
    /* Angka dikunci pada lebar digit yang sama supaya waktu dihitung
       naik oleh gerak-apss.js, kotaknya tidak bergoyang tiap ganti
       digit. Detail kecil, tapi goyangnya sangat kelihatan. */
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }
  .content-wrapper .angka .ket { color: var(--aps-teks-redup); letter-spacing: .4px; }

  .content-wrapper .a-hijau  { border-top-color: #0f9b8e; }
  .content-wrapper .a-hijau  .nil { color: #06695f; }
  .content-wrapper .a-biru   { border-top-color: var(--aps-listrik); }
  .content-wrapper .a-biru   .nil { color: #0047b3; }
  .content-wrapper .a-merah  { border-top-color: #e0344f; }
  .content-wrapper .a-merah  .nil { color: #9c1024; }
  .content-wrapper .a-jingga { border-top-color: #e8930c; }
  .content-wrapper .a-jingga .nil { color: #8a5405; }
  .content-wrapper .a-ungu   { border-top-color: #6c4bd6; }
  .content-wrapper .a-ungu   .nil { color: #3f2b8f; }
  .content-wrapper .a-abu    { border-top-color: #8b98ad; }
  .content-wrapper .a-abu    .nil { color: #4a5568; }

  /* ── Pintasan menu ── */
  .content-wrapper .pintas {
    border: 1px solid var(--aps-garis);
    border-radius: 11px;
    background: #fbfcff;
    transition: transform var(--aps-cepat), box-shadow var(--aps-cepat),
                border-color var(--aps-cepat), background var(--aps-cepat);
  }
  .content-wrapper .pintas:hover {
    border-color: rgba(0,102,255,.45);
    background: #fff;
    box-shadow: var(--aps-pendar);
    transform: translateY(-2px);
  }
  .content-wrapper .pintas-judul { color: var(--aps-teks); }
  .content-wrapper .pintas-ket   { color: var(--aps-teks-redup); }
  .content-wrapper .pintas-ikon  { box-shadow: 0 3px 10px rgba(13,20,36,.18); }

  /* ── Tabel dashboard ── */
  .content-wrapper .tabel-dash thead th {
    background: linear-gradient(180deg, #eef3fd, #e4ecfa);
    color: #3d4a63;
    letter-spacing: .5px;
    border-bottom: 1px solid var(--aps-garis);
  }
  .content-wrapper .tabel-dash a       { color: #0b3f9e; }
  .content-wrapper .tabel-dash a:hover { color: var(--aps-listrik); }
  .content-wrapper .gulung::-webkit-scrollbar-thumb,
  .content-wrapper .gulung-pendek::-webkit-scrollbar-thumb,
  .content-wrapper .gulung-fase::-webkit-scrollbar-thumb {
    background: #b9c8e4;
  }

  /* ── Bilah kemajuan kecil di dalam tabel ── */
  .content-wrapper .bar   { background: #e3eaf6; }
  .content-wrapper .bar > i { box-shadow: 0 0 8px rgba(0,102,255,.35); }
  .content-wrapper #donat-nil {
    font-family: "Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
    color: #0d1424;
    letter-spacing: -.02em;
  }
  .content-wrapper #donat-ket { color: var(--aps-teks-redup); letter-spacing: .6px; }

  /* ==================================================================
     15. HALAMAN MASUK & DAFTAR
     ------------------------------------------------------------------
     Halaman pertama yang dilihat semua orang, jadi di sinilah tema
     boleh paling tegas. Tetap TERANG: banyak yang membukanya di HP
     sambil berdiri di luar.
     ================================================================== */

  body.login-page,
  body.register-page {
    background:
      radial-gradient(1100px 620px at 12% -12%, rgba(0,102,255,.16), transparent 62%),
      radial-gradient(900px 560px at 92% 8%,   rgba(0,255,255,.14), transparent 60%),
      radial-gradient(760px 520px at 50% 118%, rgba(0,102,255,.10), transparent 60%),
      #eef2fa;
    position: relative;
  }
  /* Kisi tipis di latar — bahasa visual "teknis", bukan hiasan berat.
     Dipasang sebagai ::before pada body supaya tidak menambah satu pun
     elemen ke HTML dan tidak bisa menghalangi klik. */
  body.login-page::before,
  body.register-page::before {
    content: '';
    position: fixed; inset: 0;
    background-image:
      linear-gradient(rgba(13,20,36,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(13,20,36,.045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(1000px 700px at 50% 30%, #000 0%, transparent 78%);
            mask-image: radial-gradient(1000px 700px at 50% 30%, #000 0%, transparent 78%);
    pointer-events: none;
    z-index: 0;
  }
  body.login-page > *,
  body.register-page > * { position: relative; z-index: 1; }

  body.login-page .card,
  body.register-page .card {
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 18px;
    box-shadow:
      0 1px 2px rgba(13,20,36,.05),
      0 18px 48px rgba(13,20,36,.13),
      0 0 0 1px rgba(0,102,255,.06);
    background: rgba(255,255,255,.86);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
            backdrop-filter: blur(14px) saturate(1.4);
  }
  body.login-page .card-body,
  body.register-page .card-body { padding: 1.6rem 1.5rem; }

  /* Tombol utama halaman masuk dibuat lebih berani. */
  body.login-page .btn-primary,
  body.register-page .btn-primary {
    box-shadow: 0 6px 20px rgba(0,102,255,.34);
    letter-spacing: .3px;
  }
  body.login-page .btn-primary:hover,
  body.register-page .btn-primary:hover {
    box-shadow: 0 10px 28px rgba(0,102,255,.44);
  }

  /* ==================================================================
     12. LAYAR KECIL — 3D DIMATIKAN
     ------------------------------------------------------------------
     Di HP lapangan, kemiringan 3D tidak ada gunanya (tidak ada kursor)
     dan hanya memakan baterai. Efek kaca juga dikurangi karena
     backdrop-filter adalah salah satu penyebab utama tersendatnya
     gulir di HP kelas bawah.
     ================================================================== */
  @media (max-width: 991.98px) {
    .card,
    .main-header,
    body.login-page .card,
    body.register-page .card {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      background: #fff;
    }
    .content-wrapper { background-attachment: scroll; }
    .small-box::after,
    .info-box::after,
    .content-wrapper .angka::after,
    body.login-page::before,
    body.register-page::before { display: none; }
  }

  @media (hover: none), (pointer: coarse) {
    .aps-miring { transform: none; }
    .btn:not(:disabled):not(.disabled):hover { transform: none; }
  }

  /* ==================================================================
     13. HORMATI SETELAN "KURANGI GERAK" DI PERANGKAT
     ------------------------------------------------------------------
     Kalau pengguna menyalakan "reduce motion" di HP atau laptopnya —
     biasanya karena mabuk gerak atau memang mau hemat baterai — semua
     animasi dimatikan, tapi tidak ada yang hilang dari layar.
     ================================================================== */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .001ms !important;
      scroll-behavior: auto !important;
    }
    .aps-masuk { opacity: 1 !important; transform: none !important; }
    .aps-miring { transform: none !important; }
    .small-box::after,
    .info-box::after,
    .content-wrapper .angka::after { display: none; }
  }

} /* ==== akhir @media screen — di bawah baris ini tidak boleh ada CSS ==== */