/* Panel Silicagel — Gelombang 1. Palet navy, tipografi sistem (tanpa CDN). */
:root {
  --navy-950: #071226; --navy-900: #0b1b38; --navy-800: #12284f; --navy-700: #1b3a6e;
  --aksen: #2f7cf6; --aksen-lembut: #e8f0ff; --teks: #0f1b2d; --redup: #5b6b82;
  --garis: #e3e8f0; --latar: #f5f7fb; --kartu: #ffffff;
  --hijau: #0f8a5f; --hijau-l: #e3f6ee; --kuning: #a86400; --kuning-l: #fff3dc; --biru-l: #e8f0ff; --abu-l: #eef1f5;
  --merah: #b42318; --merah-l: #fdecea;
  --r: 14px; --bayang: 0 1px 2px rgba(7,18,38,.06), 0 8px 24px rgba(7,18,38,.06);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--teks); background: var(--latar);
}
@media (prefers-color-scheme: dark) {
  :root { --teks: #e7edf7; --redup: #93a3bb; --garis: #1f2f4d; --latar: #071226; --kartu: #0d1c38;
    --aksen-lembut: #14305c; --biru-l: #14305c; --hijau-l: #0c3a2c; --kuning-l: #3d2b07; --abu-l: #1a2944; --merah-l: #3d1512;
    --hijau: #4fd1a1; --kuning: #f2b34a; --merah: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--latar); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--aksen); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; letter-spacing: -.02em; } h2 { font-size: 1rem; margin: 0 0 .9rem; }
h3 { margin: 0 0 .3rem; } .redup { color: var(--redup); }
.kode { font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-size: .92em; }

.merek { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; color: inherit; }
.merek-titik { width: .7rem; height: .7rem; border-radius: 50%; background: linear-gradient(135deg, #5aa2ff, var(--aksen)); box-shadow: 0 0 0 4px rgba(47,124,246,.18); }
.merek-tld { color: var(--redup); font-weight: 600; margin-left: -.45rem; }

/* Login */
.latar-masuk { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(1200px 600px at 20% -10%, var(--navy-700), transparent 60%), linear-gradient(160deg, var(--navy-950), var(--navy-900)); }
.kartu-masuk { width: 100%; max-width: 400px; background: var(--kartu); border-radius: 20px; padding: 2rem; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.kartu-masuk.tengah { text-align: center; }
.kartu-masuk h1 { margin-top: 1.4rem; }
.kartu-masuk form { display: grid; gap: 1rem; margin-top: 1.4rem; }
label { display: grid; gap: .35rem; font-size: .85rem; font-weight: 600; }
input, select { font: inherit; padding: .75rem .9rem; border: 1px solid var(--garis); border-radius: 10px; background: var(--kartu); color: var(--teks); min-height: 44px; }
input:focus, select:focus { outline: 3px solid rgba(47,124,246,.3); border-color: var(--aksen); }
.peringatan { background: var(--merah-l); color: var(--merah); padding: .7rem .9rem; border-radius: 10px; font-size: .9rem; margin-top: 1rem; }

.tombol { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .6rem 1.1rem;
  border-radius: 10px; border: 1px solid var(--garis); background: var(--kartu); color: var(--teks); font: inherit; font-weight: 600; cursor: pointer; }
.tombol:hover { text-decoration: none; border-color: var(--aksen); }
.tombol.utama { background: var(--aksen); border-color: var(--aksen); color: #fff; }
.tombol.utama:hover { background: #1f68dc; }
.tombol.hantu { background: transparent; border-color: rgba(255,255,255,.25); color: #fff; min-height: 36px; padding: .35rem .8rem; }

/* Kerangka panel */
.atas { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  padding: .8rem clamp(16px, 4vw, 40px); background: linear-gradient(90deg, var(--navy-950), var(--navy-800)); color: #fff; }
.atas-merek { color: #fff; display: flex; align-items: center; gap: .7rem; } .atas-merek:hover { text-decoration: none; }
.atas .merek-tld { color: #9fb3d6; }
.lencana { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .2rem .5rem; border-radius: 999px; background: rgba(255,255,255,.12); }
.atas nav { display: flex; gap: .3rem; flex: 1; overflow-x: auto; }
.atas nav a { color: #c9d6ee; padding: .45rem .8rem; border-radius: 8px; white-space: nowrap; font-weight: 600; font-size: .92rem; }
.atas nav a[aria-current] { background: rgba(255,255,255,.12); color: #fff; } .atas nav a:hover { text-decoration: none; color: #fff; }
.keluar { display: flex; align-items: center; gap: .7rem; margin: 0; } .keluar .redup { color: #9fb3d6; font-size: .9rem; }
.isi { max-width: 1200px; margin: 0 auto; padding: 1.6rem clamp(16px, 4vw, 40px) 4rem; }
.judul-hal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1.4rem; }
.aksi { display: flex; gap: .5rem; flex-wrap: wrap; }
.kembali { display: inline-block; margin-bottom: .8rem; font-weight: 600; }

.kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.kpi-kartu { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--bayang); display: grid; gap: .2rem; }
.kpi-kartu strong { font-size: 1.7rem; letter-spacing: -.02em; }
.tab { display: flex; gap: .3rem; margin-bottom: 1rem; overflow-x: auto; border-bottom: 1px solid var(--garis); }
.tab a { padding: .6rem .9rem; color: var(--redup); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab a[aria-current] { color: var(--aksen); border-color: var(--aksen); } .tab a:hover { text-decoration: none; color: var(--teks); }

.tabel-bungkus { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); overflow-x: auto; box-shadow: var(--bayang); }
.tabel { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabel th { text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--redup); padding: .8rem 1rem; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: .85rem 1rem; border-bottom: 1px solid var(--garis); vertical-align: top; }
.tabel tr:last-child td { border-bottom: 0; } .tabel tbody tr:hover { background: var(--aksen-lembut); }

.status { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.status.biru { background: var(--biru-l); color: var(--aksen); } .status.kuning { background: var(--kuning-l); color: var(--kuning); }
.status.hijau { background: var(--hijau-l); color: var(--hijau); } .status.abu { background: var(--abu-l); color: var(--redup); }

.kosong { text-align: center; padding: 3.5rem 1rem; background: var(--kartu); border: 1px dashed var(--garis); border-radius: var(--r); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.panel { background: var(--kartu); border: 1px solid var(--garis); border-radius: var(--r); padding: 1.3rem; box-shadow: var(--bayang); }
.panel h2 + * { margin-top: 0; } .panel h2:not(:first-child) { margin-top: 1.6rem; }
.rincian { display: grid; grid-template-columns: max-content 1fr; gap: .55rem 1.2rem; margin: 0; }
.rincian dt { color: var(--redup); font-size: .88rem; } .rincian dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.baris-form { display: flex; gap: .6rem; flex-wrap: wrap; } .baris-form select { flex: 1; min-width: 160px; }
.riwayat { margin: 0; padding-left: 1.1rem; display: grid; gap: .4rem; font-size: .9rem; }

@media (max-width: 760px) {
  .kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .judul-hal > div, .panel { min-width: 0; }
  .blok-kode { white-space: pre-wrap; word-break: break-all; }
  .rincian { grid-template-columns: 1fr; gap: .1rem; } .rincian dd { margin-bottom: .6rem; }
  .atas nav { order: 3; flex-basis: 100%; }
  h1 { font-size: 1.35rem; }
}
.sorot { border-color: var(--aksen); box-shadow: 0 0 0 4px rgba(47,124,246,.15), var(--bayang); margin-bottom: 1rem; }
.blok-kode { font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace; font-size: .85rem; background: var(--navy-950); color: #d6e4ff; padding: 1rem; border-radius: 10px; overflow-x: auto; user-select: all; }
.tabel-bungkus.datar { box-shadow: none; } .kecil { font-size: .85rem; }
.peringatan + * { margin-top: 1rem; }
h1.kode { font-size: 1.5rem; letter-spacing: 0; }

/* Update versi */
.status.merah { background: var(--merah-l); color: var(--merah); }
.daftar-info { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0 0 1.4rem; }
.daftar-info dt { color: var(--redup); } .daftar-info dd { margin: 0; font-weight: 700; }
.kartu-patch { border: 1px solid var(--garis); border-radius: var(--r); padding: 1rem 1.1rem; margin-bottom: .9rem; background: var(--kartu); }
.kartu-patch p { margin: 0 0 .4rem; } .kartu-patch ul { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.form-tumpuk { display: grid; gap: .6rem; margin: .7rem 0 .5rem; }
.form-tumpuk label { display: grid; gap: .3rem; font-size: .88rem; color: var(--redup); }
.form-tumpuk input { font: inherit; padding: .6rem .75rem; border: 1px solid var(--garis); border-radius: 10px; background: var(--latar); color: var(--teks); }
.kartu-patch .blok-kode { white-space: pre-wrap; word-break: break-word; max-height: 16rem; overflow: auto; font-size: .8rem; }
.riwayat li { overflow-wrap: anywhere; }
#form-unggah { flex-wrap: wrap; } #form-unggah input[type=file] { min-width: 0; max-width: 100%; flex: 1 1 14rem; }