/* ===== Selisik — Wacana & Koordinasi Digital (Poppins, GELAP sebagai bawaan) ===== */ @font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("../vendor/poppins/latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("../vendor/poppins/latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 600; font-display: swap; src: url("../vendor/poppins/latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Poppins"; font-weight: 700; font-display: swap; src: url("../vendor/poppins/latin-700-normal.woff2") format("woff2"); } /* Tema GELAP adalah bawaan: ia tinggal di :root, sehingga halaman tampil gelap bahkan sebelum JavaScript apa pun berjalan. Tema terang menimpa lewat [data-theme="light"] yang dipasang skrip inline di sebelum render. Palet mengikuti referensi: hitam pekat, oranye tajam, putih hangat. */ :root { /* gelap (bawaan) */ color-scheme: dark; --bg: #0d0d0f; --surface: #161618; --surface-2: #1f1f23; --sidebar-bg: #111113; --ink: #f7f4f0; --ink-soft: #b5b0a9; --muted: #837f79; --line: #27272b; --line-2: #36363c; --primary: #ff7a1a; --primary-ink: #1a0d02; --primary-soft: #2e1a09; --amber: #e8b04b; --amber-soft: #2b2210; --danger: #f2695f; --danger-soft: #2c1615; --ok: #4fc98a; --ok-soft: #123023; --accent: #ff7a1a; --edge: #3a3a41; --node: #6e6a64; --danger-node: #f2695f; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow: 0 1px 3px rgba(0,0,0,.5), 0 14px 34px rgba(0,0,0,.45); /* Pil navbar publik SELALU terang (krem) — di tema gelap maupun terang. Ia bagian dari identitas halaman publik, bukan permukaan yang ikut tema, jadi token --nav-* ini sengaja TIDAK ditimpa di :root[data-theme="light"]. Dipisah dari --ink/--surface agar warnanya tak merembet ke komponen lain. */ --nav-bg: #f7f4f0; --nav-ink: #17161a; --nav-ink-soft: #4d4a52; --nav-line: #ded8ce; --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; --radius: 18px; /* Container tunggal halaman publik: navbar, hero, seksi, footer. Lebarnya bertangga mengikuti breakpoint (cara Bootstrap), bukan satu nilai tetap: di bawah 576px ia fluid (100% lebar layar), lalu mengunci ke lebar tetap tiap breakpoint agar baris teks tidak ikut melar di layar lebar. Tangganya ada di blok "Tangga container" di bawah. */ --container: 100%; --container-pad: clamp(20px, 5vw, 40px); } /* Tema terang memakai aksen BIRU, bukan oranye — oranye pekat di atas latar terang membaca sebagai peringatan, sementara di atas hitam ia membaca sebagai energi. Netralnya ikut didinginkan: biru di atas krem hangat bentrok suhu. */ :root[data-theme="light"] { color-scheme: light; --bg: #f4f6fa; --surface: #ffffff; --surface-2: #eef1f7; --sidebar-bg: #ffffff; --ink: #15181f; --ink-soft: #495264; --muted: #7b8496; --line: #e3e7f0; --line-2: #d2d9e6; --primary: #1d5fd1; --primary-ink: #ffffff; --primary-soft: #e6eefc; --amber: #9a6b0f; --amber-soft: #fbf0d9; --danger: #cb4034; --danger-soft: #fbe7e4; --ok: #1f8b5c; --ok-soft: #e0f3e9; --accent: #1d5fd1; --edge: #c3ccdd; --node: #97a1b5; --danger-node: #cb4034; --shadow-sm: 0 1px 2px rgba(16,22,38,.06); --shadow: 0 1px 3px rgba(16,22,38,.07), 0 12px 30px rgba(16,22,38,.08); /* --nav-* sengaja tidak ada di sini: pil navbar tetap krem di kedua tema. Di latar terang ia terbaca sebagai kartu mengambang — dipisahkan oleh --nav-line + --shadow, bukan oleh kontras nilai. Jangan ditimpa. */ } /* ---------- Tangga container (breakpoint ala Bootstrap) ---------- Ambang sm/md/lg/xl/xxl sengaja disamakan dengan Bootstrap supaya lebar halaman terasa familiar dan mudah dirujuk. Ditulis min-width agar bertambah naik dari basis fluid; nilai terakhir yang cocok yang menang. */ @media (min-width: 576px) { :root { --container: 540px; } } /* sm */ @media (min-width: 768px) { :root { --container: 720px; } } /* md */ @media (min-width: 992px) { :root { --container: 960px; } } /* lg */ @media (min-width: 1200px) { :root { --container: 1140px; } } /* xl */ @media (min-width: 1400px) { :root { --container: 1320px; } } /* xxl */ * { box-sizing: border-box; } [x-cloak] { display: none !important; } html, body { background: var(--bg); } body { margin: 0; color: var(--ink); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; font-size: 15px; } a { color: var(--primary); text-decoration: none; } .mono { font-family: var(--mono); } .small { font-size: 12.5px; } .muted { color: var(--muted); } .err { color: var(--danger); font-size: 13.5px; margin-top: 12px; font-weight: 500; } h1, h2, h3 { letter-spacing: -.015em; } /* ---------- App shell ---------- */ /* 268px, bukan 252: pada lebar lama subjudul merek membungkus jadi dua baris dan meter kuota kehabisan ruang untuk angkanya. */ .app { display: grid; grid-template-columns: 268px 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; background: var(--sidebar-bg); border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; padding: 22px 18px; } .brand-row { display: flex; align-items: center; gap: 6px; padding-bottom: 14px; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px; flex: 1; min-width: 0; } .rail-btn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; font-size: 12px; transition: background .13s, color .13s; } .rail-btn:hover { background: var(--surface-2); color: var(--ink); } .brand-mark { width: 40px; height: 40px; flex: none; display: grid; place-items: center; background: var(--primary); color: var(--primary-ink); border-radius: 11px; font-size: 17px; box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 30%, transparent); } .brand-text { display: flex; flex-direction: column; line-height: 1.2; font-weight: 500; min-width: 0; } .brand-text b { font-weight: 700; } /* Satu baris atau terpotong rapi — subjudul yang membungkus merusak tinggi baris merek dan mendorong seluruh menu turun. */ .brand-text small { color: var(--muted); font-size: 10.5px; font-weight: 500; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav { display: flex; flex-direction: column; gap: 2px; } /* Kapsi seksi: satu definisi dipakai sidebar DAN palet perintah. */ .nav-cap { font-family: var(--mono); text-transform: uppercase; letter-spacing: .09em; font-size: 9.5px; color: var(--muted); margin: 16px 0 5px; padding-left: 13px; } .nav-cap:first-child { margin-top: 2px; } .nav-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 13px; border-radius: 10px; color: var(--ink-soft); font-weight: 500; font-size: 14px; transition: background .13s, color .13s; } .nav-item i { width: 18px; flex: none; text-align: center; color: var(--muted); font-size: 15px; } .nav-item:hover { background: var(--surface-2); color: var(--ink); } .nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; } .nav-item.active i { color: var(--primary); } /* Garis aksen kiri: latar lembut saja mudah tenggelam, terutama di tema gelap. */ .nav-item.active::before { content: ""; position: absolute; left: -18px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); } .nav-badge, .nav-kbd { margin-left: auto; } .nav-kbd { font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; } /* Tombol palet perintah. Sengaja berbentuk kolom cari, bukan item menu: ⌘K membuka palet, jadi lencananya harus menempel di sini — bukan di tautan Pencarian yang tak dipicu pintasan itu. */ .nav-search { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; margin-bottom: 4px; border-radius: 10px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--muted); font-family: var(--font); font-size: 13px; text-align: left; } .nav-search:hover { color: var(--ink); border-color: var(--primary); } .nav-search i { font-size: 12.5px; } .nav-search span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Mendorong footer ke dasar. Menggantikan margin-top:auto agar panel analisis berjalan bisa duduk tepat di bawah menu, bukan ikut terlempar ke bawah. */ .nav-spacer { flex: 1; min-height: 12px; } /* Admin Django meninggalkan desain aplikasi — dipisah & diredam. */ .nav-aside { padding-top: 10px; border-top: 1px dashed var(--line-2); } .nav-aside .nav-item { font-size: 13px; color: var(--muted); } .nav-ext { margin-left: auto; font-size: 10px !important; } /* ---------- Panel analisis berjalan (sidebar) ---------- */ .jobcard { margin-top: 14px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } /* display pada kelas mengalahkan [hidden] bawaan browser — tanpa baris ini panel tetap tampak (kosong) padahal tak ada analisis yang berjalan. */ .jobcard[hidden] { display: none; } .jc-top { display: flex; align-items: center; gap: 8px; } .jc-dot { width: 7px; height: 7px; flex: none; border-radius: 999px; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); animation: jc-pulse 1.8s ease-in-out infinite; } @keyframes jc-pulse { 50% { opacity: .35; } } .jc-top b { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); } .jc-x { margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0 2px; color: var(--muted); font-size: 12px; } .jc-x:hover { color: var(--danger); } .jc-key { display: block; font-size: 13px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jc-key:hover { color: var(--primary); } .jc-meta { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .jc-meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Bar tipis dipakai panel analisis DAN meter kuota. */ .meter { height: 4px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .meter > i { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .3s ease; } .meter > i.ok { background: var(--ok); } .meter > i.warn { background: var(--amber); } .meter > i.danger { background: var(--danger); } /* ---------- Meter kuota (footer sidebar) ---------- */ .quota { display: flex; flex-direction: column; gap: 6px; padding: 2px 6px 10px; } .quota-row { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; } .quota-row b { color: var(--ink-soft); font-weight: 600; } .quota-note { margin: 0; font-family: var(--mono); font-size: 10px; color: var(--ok); } .sidebar-foot { margin-top: auto; padding: 12px 0 0; border-top: 1px solid var(--line); } .theme-toggle { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); border-radius: 10px; padding: 10px; cursor: pointer; font-family: var(--font); font-size: 13.5px; font-weight: 500; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .main { min-width: 0; display: flex; flex-direction: column; } .mainbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 30px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .page-title { font-size: 21px; font-weight: 600; margin: 0; } .page-sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; } .content { padding: 26px 32px 64px; width: 100%; } /* ---------- Buttons ---------- */ /* line-height WAJIB eksplisit: peramban memberi