/* ===================================================================
   SOKKAN — Unified Design System  ·  v2.0
   Satu file tema untuk semua produk: Flotilla · Knot · Buoy · Anjungan
   Dipasang di atas Metronic 8 / Bootstrap 5 (opsional) atau berdiri sendiri.

   PENTING: jangan bungkus file ini dengan @layer — CSS tanpa layer
   selalu menang atas CSS ber-layer, jadi Bootstrap akan menimpa Sokkan.

   §1  Token
   §2  Base & reset
   §3  Utilitas layout & teks
   §4  Tombol
   §5  Form
   §6  Shell aplikasi (layout, sidebar, drawer, topbar)
   §7  Konten (page header, metrik, panel, toolbar, filter)
   §8  Tabel & paginator
   §9  Status (LED, badge, tag, chip, stage)
   §10 Feedback (toast, alert, empty, skeleton, progress)
   §11 Overlay (dialog, drawer kanan)
   §12 Board & detail (kanban, kartu, tabs, timeline, info grid)
   §13 Landing page
   §14 Halaman maintenance
   §15 Jembatan Bootstrap / Metronic
   §16 Responsif
   §17 Motion & reduced-motion
   §18 Print
   =================================================================== */


/* §1  TOKEN ──────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;

  /* — Permukaan — */
  --sk-bg:        #0C141E;  --sk-bg-rgb: 12,20,30;
  --sk-surface:   #12202E;
  --sk-surface-2: #0E1926;
  --sk-surface-3: rgba(22,39,53,.5);

  /* — Garis — */
  --sk-line:      #213648;
  --sk-line-soft: #182838;

  /* — Teks (maksimal 3 level) — */
  --sk-ink:       #EEF2EF;
  --sk-muted:     #8DA3B4;
  --sk-muted-dim: #5D7183;

  /* — Aksen utama — */
  --sk-brass:     #C9A15A;  --sk-brass-rgb: 201,161,90;
  --sk-brass-hi:  #DCB36B;
  --sk-brass-dim: #3A3018;
  --sk-on-brass:  var(--sk-bg);   /* teks di atas isian brass */

  /* — Aksen sekunder (hemat: focus ring & live) — */
  --sk-sea:       #74D6C4;  --sk-sea-rgb: 116,214,196;
  --sk-sea-bg:    #14313A;

  /* — Status — */
  --sk-ok:        #5CBE8E;  --sk-ok-rgb: 92,190,142;    --sk-ok-bg:     #15302A;
  --sk-warn:      #E2A93F;  --sk-warn-rgb: 226,169,63;  --sk-warn-bg:   #332A15;
  --sk-danger:    #E36756;  --sk-danger-rgb: 227,103,86;--sk-danger-bg: #331C18;

  /* — Turunan (jangan tulis rgba mentah di komponen) — */
  --sk-ring:      0 0 0 3px rgba(var(--sk-sea-rgb),.15);
  --sk-shadow-1:  0 2px 8px rgba(0,0,0,.25);
  --sk-shadow-2:  0 12px 32px rgba(0,0,0,.35);
  --sk-shadow-3:  0 24px 64px rgba(0,0,0,.60);
  --sk-overlay:   rgba(0,0,0,.60);
  --sk-glass:     rgba(var(--sk-bg-rgb),.88);
  --sk-chevron:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238DA3B4' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* — Tipografi: 3 peran, tidak lebih — */
  --sk-display: 'Instrument Serif', Georgia, serif;
  --sk-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --sk-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* alias — dipakai kode lama, jangan dihapus */
  --sk-font-display: var(--sk-display);
  --sk-font-body:    var(--sk-body);
  --sk-font-mono:    var(--sk-mono);

  /* — Skala ukuran teks — */
  --sk-fs-2xs:  10px;   /* label mono mikro, count */
  --sk-fs-xs:   11px;   /* meta, hint, badge */
  --sk-fs-sm:   12px;   /* tombol, chip, kolom mono */
  --sk-fs-md:   13px;   /* isi tabel & form */
  --sk-fs-base: 14px;   /* body */
  --sk-fs-lg:   16px;
  --sk-fs-xl:   20px;
  --sk-fs-title: clamp(24px, 3vw, 32px);   /* judul halaman (serif) */
  --sk-fs-metric: 38px;                    /* angka metrik (serif) */

  --sk-ls-label: .14em;   /* label mono UPPERCASE */
  --sk-ls-mono:  .04em;   /* angka/ID mono biasa */

  /* — Spasi: kelipatan 8 (4 untuk rapat) — */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --sk-s1: var(--s1); --sk-s2: var(--s2); --sk-s3: var(--s3); --sk-s4: var(--s4);
  --sk-s5: var(--s5); --sk-s6: var(--s6); --sk-s7: var(--s7); --sk-s8: var(--s8);

  /* — Radius — */
  --sk-r-sm:   2px;   /* chip, badge kecil */
  --sk-r:      4px;   /* kartu, tombol, input, panel */
  --sk-r-lg:   6px;   /* dialog, drawer */
  --sk-r-pill: 999px;
  --radius:    var(--sk-r);   /* alias lama */

  /* — Motion — */
  --sk-t-fast: 120ms;
  --sk-t:      150ms;
  --sk-t-slow: 300ms;
  --sk-ease:   cubic-bezier(.4, 0, .2, 1);

  /* — Lapisan — */
  --sk-z-nav:    50;
  --sk-z-topbar: 100;
  --sk-z-drawer: 200;
  --sk-z-dialog: 300;
  --sk-z-toast:  400;

  /* — Ukuran shell — */
  --sk-side-w: 230px;
}

/* Mode terang — untuk dokumen, invoice, halaman publik, print.
   Pasang di <html data-theme="light"> atau di container mana pun. */
[data-theme="light"] {
  color-scheme: light;
  --sk-bg:        #F7F5F0;  --sk-bg-rgb: 247,245,240;
  --sk-surface:   #FFFFFF;
  --sk-surface-2: #F1EEE7;
  --sk-surface-3: rgba(22,39,53,.045);
  --sk-line:      #D9D3C6;
  --sk-line-soft: #E8E3D9;
  --sk-ink:       #16232F;
  --sk-muted:     #566675;
  --sk-muted-dim: #7C8B98;
  --sk-brass:     #8A6A3A;  --sk-brass-rgb: 138,106,58;
  --sk-brass-hi:  #6E5329;
  --sk-brass-dim: #EFE6D4;
  --sk-on-brass:  #FFFFFF;
  --sk-sea:       #1C8474;  --sk-sea-rgb: 28,132,116;
  --sk-sea-bg:    #DCF0EC;
  --sk-ok:        #2C7F5B;  --sk-ok-rgb: 44,127,91;      --sk-ok-bg:     #DFF0E7;
  --sk-warn:      #8A6410;  --sk-warn-rgb: 138,100,16;   --sk-warn-bg:   #F7EBD3;
  --sk-danger:    #B23A2B;  --sk-danger-rgb: 178,58,43;  --sk-danger-bg: #F8E2DE;
  --sk-shadow-1:  0 1px 3px rgba(22,35,47,.10);
  --sk-shadow-2:  0 8px 24px rgba(22,35,47,.12);
  --sk-shadow-3:  0 20px 48px rgba(22,35,47,.18);
  --sk-overlay:   rgba(22,35,47,.35);
  --sk-glass:     rgba(var(--sk-bg-rgb),.88);
  --sk-chevron:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23566675' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Ensure that setting data-theme="light" on root or container also toggles micro elements */
[data-theme="light"] .sk-nav-badge { background: var(--sk-surface-2); color: var(--sk-muted); }
[data-theme="light"] .sk-side { background: var(--sk-surface); }
[data-theme="light"] .sk-topbar { background: var(--sk-glass); }


/* §2  BASE & RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background:  var(--sk-bg);
  color:       var(--sk-ink);
  font-family: var(--sk-body);
  font-size:   var(--sk-fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x:  hidden;
}

a      { color: inherit; text-decoration: none; }
img    { display: block; max-width: 100%; }
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }
svg    { flex: none; }

::selection      { background: var(--sk-brass); color: var(--sk-on-brass); }
:focus-visible   { outline: 2px solid var(--sk-sea); outline-offset: 2px; }
[hidden]         { display: none !important; }

/* Scrollbar senada tema */
* { scrollbar-width: thin; scrollbar-color: var(--sk-line) transparent; }
*::-webkit-scrollbar        { width: 10px; height: 10px; }
*::-webkit-scrollbar-track  { background: transparent; }
*::-webkit-scrollbar-thumb  { background: var(--sk-line); border: 3px solid transparent; background-clip: content-box; border-radius: var(--sk-r-pill); }
*::-webkit-scrollbar-thumb:hover { background: var(--sk-muted-dim); background-clip: content-box; }


/* §3  UTILITAS ───────────────────────────────────────────────────── */

/* Ikon — semua ikon garis, stroke mengikuti warna teks */
.ic,
.sk-btn svg, .sk-rowbtn svg, .sk-nav-item svg,
.sk-dialog-close svg, .sk-empty svg, .sk-toast svg {
  stroke: currentColor; fill: none; stroke-width: 1.6;
  display: block; flex: none;
}
.sk-helm { width: 32px; height: 32px; flex: none; }
.sk-helm circle, .sk-helm line { stroke: var(--sk-brass); fill: none; stroke-width: 1.5; }

/* Teks */
.sk-mono      { font-family: var(--sk-mono); letter-spacing: var(--sk-ls-mono); }
.sk-serif     { font-family: var(--sk-display); font-weight: 400; }
.sk-muted     { color: var(--sk-muted); }
.sk-dim       { color: var(--sk-muted-dim); }
.sk-brass     { color: var(--sk-brass); }
.sk-link      { color: var(--sk-brass); }
.sk-link:hover{ color: var(--sk-brass-hi); text-decoration: underline; }
.sk-num       { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); letter-spacing: var(--sk-ls-mono); color: var(--sk-muted); }
.sk-caplabel  { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); letter-spacing: var(--sk-ls-label); text-transform: uppercase; color: var(--sk-muted-dim); }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.sk-truncate  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Layout mikro — pakai ini, bukan style="display:flex;gap:8px" */
.sk-row     { display: flex; align-items: center; gap: var(--s2); }
.sk-row--top{ align-items: flex-start; }
.sk-row--end{ justify-content: flex-end; }
.sk-row--wrap { flex-wrap: wrap; }
.sk-col     { display: flex; flex-direction: column; gap: var(--s2); }
.sk-gap-1 { gap: var(--s1); } .sk-gap-2 { gap: var(--s2); }
.sk-gap-3 { gap: var(--s3); } .sk-gap-4 { gap: var(--s4); }
.sk-grow    { flex: 1; min-width: 0; }
.sk-ml-auto { margin-left: auto; }
.sk-mt-2 { margin-top: var(--s2); } .sk-mt-3 { margin-top: var(--s3); }
.sk-mt-4 { margin-top: var(--s4); } .sk-mt-5 { margin-top: var(--s5); }
.sk-mb-2 { margin-bottom: var(--s2); } .sk-mb-3 { margin-bottom: var(--s3); }
.sk-mb-4 { margin-bottom: var(--s4); } .sk-mb-5 { margin-bottom: var(--s5); }
.sk-pad  { padding: var(--s4); }
.sk-pad-5{ padding: var(--s5); }
.sk-divider { height: 1px; background: var(--sk-line-soft); border: 0; margin: var(--s4) 0; }

/* Aksesibilitas */
.sk-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sk-skip {
  position: absolute; left: var(--s4); top: -60px; z-index: var(--sk-z-toast);
  background: var(--sk-brass); color: var(--sk-on-brass);
  padding: var(--s2) var(--s4); border-radius: var(--sk-r);
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm);
  transition: top var(--sk-t) var(--sk-ease);
}
.sk-skip:focus { top: var(--s4); }


/* §4  TOMBOL ─────────────────────────────────────────────────────── */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--sk-mono);
  font-size: var(--sk-fs-sm);
  letter-spacing: var(--sk-ls-mono);
  padding: 8px 14px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r);
  background: transparent;
  color: var(--sk-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--sk-t), color var(--sk-t), background var(--sk-t);
}
.sk-btn:hover           { border-color: var(--sk-brass); color: var(--sk-brass); }
.sk-btn .ic, .sk-btn svg{ width: 14px; height: 14px; }

.sk-btn--primary        { background: var(--sk-brass); border-color: var(--sk-brass); color: var(--sk-on-brass); font-weight: 500; }
.sk-btn--primary:hover  { background: var(--sk-brass-hi); border-color: var(--sk-brass-hi); color: var(--sk-on-brass); }
.sk-btn--ghost          { border-color: var(--sk-line-soft); color: var(--sk-muted); }
.sk-btn--ghost:hover    { border-color: var(--sk-brass); color: var(--sk-brass); }
.sk-btn--quiet          { border-color: transparent; color: var(--sk-muted); }
.sk-btn--quiet:hover    { border-color: transparent; background: var(--sk-surface); color: var(--sk-ink); }
.sk-btn--danger         { background: rgba(var(--sk-danger-rgb),.14); border-color: var(--sk-danger); color: var(--sk-danger); }
.sk-btn--danger:hover   { background: var(--sk-danger); border-color: var(--sk-danger); color: var(--sk-bg); }
.sk-btn--active         { background: var(--sk-brass-dim); border-color: var(--sk-brass-dim); color: var(--sk-brass); }

.sk-btn--sm             { font-size: var(--sk-fs-xs); padding: 5px 10px; gap: 5px; }
.sk-btn--sm .ic, .sk-btn--sm svg { width: 12px; height: 12px; }
.sk-btn--icon           { padding: 8px; }
.sk-btn--icon.sk-btn--sm{ padding: 5px; }
.sk-btn--block          { width: 100%; }

/* Nonaktif & sedang berjalan — wajib dipakai untuk aksi async */
.sk-btn:disabled,
.sk-btn[aria-disabled="true"],
.sk-btn.is-disabled     { opacity: .45; cursor: not-allowed; pointer-events: none; }
.sk-btn[aria-busy="true"]::before {
  content: ""; width: 12px; height: 12px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: sk-spin .7s linear infinite;
}

/* Skala landing */
.sk-btn-lg {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-md);
  letter-spacing: .02em; padding: 11px 20px;
  border: 1px solid transparent; border-radius: var(--sk-r-sm);
  cursor: pointer;
  transition: background var(--sk-t-slow), border-color var(--sk-t-slow), color var(--sk-t-slow), transform var(--sk-t-slow);
}
.sk-btn-lg--primary       { background: var(--sk-brass); color: var(--sk-on-brass); font-weight: 500; }
.sk-btn-lg--primary:hover { background: var(--sk-brass-hi); transform: translateY(-1px); }
.sk-btn-lg--ghost         { background: transparent; color: var(--sk-ink); border-color: var(--sk-line); }
.sk-btn-lg--ghost:hover   { border-color: var(--sk-brass); color: var(--sk-brass); }

/* Tombol aksi di baris tabel */
.sk-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.sk-rowbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  color: var(--sk-muted);
  padding: 5px 9px;
  border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r);
  background: transparent; cursor: pointer;
  transition: border-color var(--sk-t), color var(--sk-t), background var(--sk-t);
}
.sk-rowbtn:hover { border-color: var(--sk-brass); color: var(--sk-brass); }
.sk-rowbtn svg   { width: 14px; height: 14px; }
.sk-rowbtn.sk-rowbtn--danger       { color: var(--sk-danger); border-color: rgba(var(--sk-danger-rgb),.4); }
.sk-rowbtn.sk-rowbtn--danger:hover { background: var(--sk-danger); border-color: var(--sk-danger); color: var(--sk-bg); }

/* Segmented control & view toggle */
.sk-seg, .sk-lang {
  display: inline-flex; flex: none;
  border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  overflow: hidden;
}
.sk-seg button, .sk-lang button {
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm);
  padding: 5px 11px; color: var(--sk-muted); cursor: pointer;
  transition: background var(--sk-t), color var(--sk-t);
}
.sk-seg button:hover, .sk-lang button:hover { color: var(--sk-ink); }
.sk-seg button.active, .sk-lang button.active { background: var(--sk-brass); color: var(--sk-on-brass); }

.sk-view-toggle {
  display: inline-flex; gap: 2px; padding: 2px;
  background: var(--sk-surface); border: 1px solid var(--sk-line-soft);
  border-radius: var(--sk-r);
}
.sk-view-toggle .sk-btn { border-color: transparent; padding: 5px 9px; }
.sk-view-toggle .sk-btn:hover,
.sk-view-toggle .sk-btn--active { background: var(--sk-surface-2); color: var(--sk-ink); border-color: transparent; }


/* §5  FORM ───────────────────────────────────────────────────────── */
.sk-input, .sk-select, .sk-textarea {
  width: 100%;
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r);
  color: var(--sk-ink);
  font-family: var(--sk-body);
  font-size: var(--sk-fs-md);
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--sk-t-fast), box-shadow var(--sk-t-fast);
}
.sk-input:focus, .sk-select:focus, .sk-textarea:focus {
  border-color: var(--sk-sea); box-shadow: var(--sk-ring);
}
.sk-input::placeholder, .sk-textarea::placeholder { color: var(--sk-muted-dim); }
.sk-input:disabled, .sk-select:disabled, .sk-textarea:disabled { opacity: .5; cursor: not-allowed; }
.sk-input.is-invalid, .sk-select.is-invalid, .sk-textarea.is-invalid { border-color: var(--sk-danger); }

.sk-input--sm    { padding: 6px 10px; font-size: var(--sk-fs-sm); }
.sk-input--mono  { font-family: var(--sk-mono); letter-spacing: var(--sk-ls-mono); }
.sk-input[type="file"] { padding: 6px 12px; cursor: pointer; }
.sk-textarea, .sk-input--textarea { resize: vertical; min-height: 72px; line-height: 1.5; }

.sk-select {
  padding-right: 32px;
  appearance: none; -webkit-appearance: none;
  background-image: var(--sk-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.sk-select--sm { padding: 6px 28px 6px 10px; font-size: var(--sk-fs-sm); }

.sk-label {
  display: block;
  font-family: var(--sk-mono);
  font-size: var(--sk-fs-xs);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sk-muted);
  margin-bottom: 6px;
}
.sk-label .req { color: var(--sk-danger); margin-left: 2px; }
.sk-hint       { font-size: var(--sk-fs-xs); color: var(--sk-muted-dim); margin-top: var(--s1); }
.sk-hint--err  { color: var(--sk-danger); }

.sk-form-group         { display: flex; flex-direction: column; gap: var(--s1); }
.sk-form-group--full   { grid-column: 1 / -1; }
.sk-form-group--inline { flex-direction: row; align-items: center; gap: var(--s3); }
.sk-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s5) var(--s5);
  padding: var(--s5);
}

/* Checkbox & radio — pakai input asli, bukan div */
.sk-cbx {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex: none;
  border: 1.5px solid var(--sk-line); border-radius: 3px;
  background: var(--sk-surface-2);
  display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: middle;
  transition: background var(--sk-t-fast), border-color var(--sk-t-fast);
}
.sk-cbx:checked, .sk-cbx.checked { background: var(--sk-brass); border-color: var(--sk-brass); }
.sk-cbx::after {
  content: ""; width: 8px; height: 5px;
  border-left: 2px solid var(--sk-on-brass); border-bottom: 2px solid var(--sk-on-brass);
  transform: rotate(-45deg) translate(1px,-1px) scale(0);
  transition: transform var(--sk-t-fast) var(--sk-ease);
}
.sk-cbx:checked::after, .sk-cbx.checked::after { transform: rotate(-45deg) translate(1px,-1px) scale(1); }
.sk-cbx[type="radio"], .sk-cbx--radio { border-radius: 50%; }
.sk-cbx:indeterminate { background: var(--sk-brass); border-color: var(--sk-brass); }
.sk-cbx:indeterminate::after { width: 8px; height: 0; border-bottom: 2px solid var(--sk-on-brass); border-left: 0; transform: none; }

/* Toggle switch — WAJIB ada <span class="slider"> */
.sk-switch       { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.sk-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sk-switch .slider {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--sk-line); border-radius: var(--sk-r-pill);
  transition: background 200ms var(--sk-ease);
}
.sk-switch .slider::before {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sk-muted);
  transition: transform 200ms var(--sk-ease), background 200ms var(--sk-ease);
}
.sk-switch input:checked ~ .slider           { background: var(--sk-ok); }
.sk-switch input:checked ~ .slider::before   { transform: translateX(16px); background: var(--sk-surface); }
.sk-switch input:focus-visible ~ .slider     { outline: 2px solid var(--sk-sea); outline-offset: 2px; }

/* Kotak pencarian dengan ikon */
.sk-search       { position: relative; display: inline-flex; }
.sk-search input {
  width: 220px;
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  color: var(--sk-ink);
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm);
  padding: 8px 12px 8px 30px; outline: none;
  transition: border-color var(--sk-t-fast), box-shadow var(--sk-t-fast);
}
.sk-search input::placeholder { color: var(--sk-muted-dim); }
.sk-search input:focus        { border-color: var(--sk-sea); box-shadow: var(--sk-ring); }
.sk-search .ic {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--sk-muted-dim); pointer-events: none;
}


/* §6  SHELL APLIKASI ─────────────────────────────────────────────── */
.sk-layout { display: grid; grid-template-columns: var(--sk-side-w) 1fr; min-height: 100vh; }
.sk-main   { display: flex; flex-direction: column; min-width: 0; }

/* Sidebar */
.sk-side {
  display: flex; flex-direction: column;
  background: var(--sk-surface-2);
  border-right: 1px solid var(--sk-line-soft);
  padding: var(--s4) 0;
  position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.sk-brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s5) var(--s5); }
.sk-brand .name { font-family: var(--sk-display); font-size: 22px; }
.sk-brand .name small {
  display: block; margin-top: -3px;
  font-family: var(--sk-mono); font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--sk-muted-dim);
}
.sk-nav-group { padding: 0 var(--s3); margin-bottom: var(--s5); }
.sk-nav-label {
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-muted-dim);
  padding: 0 var(--s3) var(--s2);
}
.sk-nav-item {
  display: flex; align-items: center; gap: var(--s3);
  padding: 9px var(--s3); margin-bottom: 2px;
  border-radius: var(--sk-r);
  color: var(--sk-muted); font-size: var(--sk-fs-md);
  cursor: pointer;
  transition: background var(--sk-t), color var(--sk-t);
}
.sk-nav-item:hover  { background: var(--sk-surface); color: var(--sk-ink); }
.sk-nav-item.active { background: var(--sk-brass-dim); color: var(--sk-brass); }
.sk-nav-item .ic, .sk-nav-item svg { width: 16px; height: 16px; }
.sk-nav-badge {
  margin-left: auto;
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  background: var(--sk-surface); color: var(--sk-muted);
  padding: 1px 6px; border-radius: var(--sk-r-pill);
}
.sk-nav-item.active .sk-nav-badge { background: var(--sk-brass); color: var(--sk-on-brass); }

.sk-side-foot {
  margin-top: auto;
  padding: var(--s4) var(--s5) 0;
  border-top: 1px solid var(--sk-line-soft);
  display: flex; align-items: center; gap: var(--s3);
}
.sk-side-foot .who       { font-size: var(--sk-fs-sm); min-width: 0; }
.sk-side-foot .who small { display: block; color: var(--sk-muted-dim); font-size: var(--sk-fs-xs); }
.sk-side-logout {
  margin-left: auto; padding: 6px; flex: none;
  display: flex; align-items: center;
  color: var(--sk-muted-dim); border-radius: var(--sk-r); cursor: pointer;
  transition: color var(--sk-t-fast), background var(--sk-t-fast);
}
.sk-side-logout:hover { color: var(--sk-danger); background: rgba(var(--sk-danger-rgb),.12); }

/* Backdrop drawer mobile (hanya aktif di §16) */
.sk-side-backdrop {
  display: none; position: fixed; inset: 0;
  background: var(--sk-overlay); z-index: calc(var(--sk-z-drawer) - 1);
}

.sk-avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sk-brass-dim); color: var(--sk-brass);
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm); font-weight: 600;
  letter-spacing: var(--sk-ls-mono);
}
.sk-avatar--lg { width: 56px; height: 56px; border-radius: var(--sk-r-lg); font-size: var(--sk-fs-lg); }

/* Topbar */
.sk-topbar {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--sk-line-soft);
  position: sticky; top: 0; z-index: var(--sk-z-topbar);
  background: var(--sk-glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sk-crumb {
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--sk-muted-dim);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.sk-crumb b     { color: var(--sk-ink); font-weight: 500; }
.sk-crumb a:hover { color: var(--sk-brass); }
.sk-crumb .sep  { color: var(--sk-line); }
.sk-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.sk-nav-toggle  { display: none; }


/* §7  KONTEN ─────────────────────────────────────────────────────── */
.sk-content { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }

.sk-page-h {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
}
.sk-page-h h1 {
  font-family: var(--sk-display); font-weight: 400;
  font-size: var(--sk-fs-title); line-height: 1.05;
}
.sk-page-h .sub {
  margin-top: 6px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  letter-spacing: var(--sk-ls-mono); color: var(--sk-muted-dim);
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.sk-page-h .acts { display: flex; align-items: center; gap: var(--s2); }

/* Metrik — maksimal 4 per baris */
.sk-metrics    { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }
.sk-metrics--3 { grid-template-columns: repeat(3, 1fr); }
.sk-metrics--2 { grid-template-columns: repeat(2, 1fr); }
.sk-metric {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft);
  border-radius: var(--sk-r);
  padding: var(--s4) var(--s5);
}
.sk-metric .k {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  letter-spacing: var(--sk-ls-label); text-transform: uppercase;
  color: var(--sk-muted-dim);
}
.sk-metric .k .dot   { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sk-brass); }
.sk-metric .v        { font-family: var(--sk-display); font-size: var(--sk-fs-metric); line-height: 1; margin-top: 10px; }
.sk-metric .v small  { font-family: var(--sk-mono); font-size: var(--sk-fs-md); color: var(--sk-muted); margin-left: var(--s1); }
.sk-metric .d        { font-family: var(--sk-mono); font-size: var(--sk-fs-xs); color: var(--sk-muted-dim); margin-top: var(--s2); }
.sk-metric .d b      { color: var(--sk-ok); font-weight: 500; }
.sk-metric .d b.down { color: var(--sk-danger); }

/* Panel */
.sk-panel {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft);
  border-radius: var(--sk-r);
  overflow: hidden;
}
.sk-panel-h {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--sk-line-soft);
}
.sk-panel-h .t {
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sk-brass);
}
.sk-panel-b { padding: var(--s5); }
.sk-panel-f { padding: var(--s3) var(--s5); border-top: 1px solid var(--sk-line-soft); }

/* Toolbar & filter */
.sk-filters { margin-left: auto; display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.sk-filter-bar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line-soft);
  border-radius: var(--sk-r);
}
.sk-filter-bar .sk-input,
.sk-filter-bar .sk-select { width: auto; min-width: 160px; flex: 1 1 140px; max-width: 240px; }

/* Bar mode seleksi (aksi massal) */
.sk-selbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: 10px var(--s5);
  background: var(--sk-brass-dim);
  border-bottom: 1px solid var(--sk-brass);
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm);
  color: var(--sk-brass);
}
.sk-selbar .acts { margin-left: auto; display: flex; gap: var(--s2); }
.sk-selbar .act {
  padding: 5px 11px;
  border: 1px solid var(--sk-brass); border-radius: var(--sk-r);
  color: var(--sk-brass); background: transparent;
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm);
  cursor: pointer;
  transition: background var(--sk-t), color var(--sk-t);
}
.sk-selbar .act:hover { background: var(--sk-brass); color: var(--sk-on-brass); }


/* §8  TABEL ──────────────────────────────────────────────────────── */
.sk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sk-table      { width: 100%; border-collapse: collapse; font-size: var(--sk-fs-md); }
.sk-table thead th {
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sk-muted-dim); text-align: left; font-weight: 400;
  padding: 11px var(--s5);
  border-bottom: 1px solid var(--sk-line);
  background: var(--sk-surface-2);
  white-space: nowrap;
}
.sk-table thead th.text-right { text-align: right; }
.sk-table tbody td { padding: 12px var(--s5); border-bottom: 1px solid var(--sk-line-soft); vertical-align: middle; }
.sk-table tbody tr { transition: background var(--sk-t-fast); }
.sk-table tbody tr:hover { background: var(--sk-surface-3); }
.sk-table tbody tr:last-child td { border-bottom: none; }
.sk-table tbody tr.is-selected { background: rgba(var(--sk-brass-rgb),.07); }
.sk-table tfoot td {
  padding: 14px var(--s5);
  border-top: 1px solid var(--sk-line);
  background: var(--sk-surface-2);
  vertical-align: middle;
}
.sk-table--compact thead th { padding: 8px var(--s4); }
.sk-table--compact tbody td { padding: 8px var(--s4); }
.sk-table--compact tfoot td { padding: 10px var(--s4); }

/* Sel nama + ikon perangkat */
.sk-dev-name { display: flex; align-items: center; gap: var(--s3); }
.sk-dev-ic {
  width: 30px; height: 38px; flex: none; position: relative;
  border: 1.5px solid var(--sk-line); border-radius: var(--sk-r);
  background: var(--sk-surface-2);
}
.sk-dev-ic::after {
  content: ""; position: absolute; left: 50%; bottom: 3px;
  width: 8px; height: 2px; background: var(--sk-line);
  transform: translateX(-50%); border-radius: 2px;
}
.sk-dev-name .n       { font-weight: 600; font-size: var(--sk-fs-md); }
.sk-dev-name .n small { display: block; font-weight: 400; font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); color: var(--sk-muted-dim); }

/* Bar progres mini di dalam sel */
.sk-bar   { display: inline-block; vertical-align: middle; width: 64px; height: 6px; margin-right: var(--s2); background: var(--sk-surface-2); border-radius: 3px; overflow: hidden; }
.sk-bar i { display: block; height: 100%; border-radius: 3px; background: var(--sk-brass); }

/* Paginator */
.sk-pager {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s5);
  border-top: 1px solid var(--sk-line-soft);
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm); color: var(--sk-muted-dim);
}
.sk-pager .pg        { margin-left: auto; display: flex; gap: var(--s1); }
.sk-pager .pg button, .sk-pager .pg a {
  min-width: 26px; height: 26px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  color: var(--sk-muted); cursor: pointer;
  transition: border-color var(--sk-t), color var(--sk-t), background var(--sk-t);
}
.sk-pager .pg button:hover, .sk-pager .pg a:hover { border-color: var(--sk-brass); color: var(--sk-brass); }
.sk-pager .pg .active { background: var(--sk-brass); border-color: var(--sk-brass); color: var(--sk-on-brass); }


/* §9  STATUS ─────────────────────────────────────────────────────── */
/* LED + label mono — bentuk baku untuk semua status */
.sk-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sk-mono); font-size: var(--sk-fs-sm); }
.sk-status .led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 6px currentColor; }
.sk-status--ok,     .sk-status--online { color: var(--sk-ok); }
.sk-status--busy,   .sk-status--live   { color: var(--sk-sea); }
.sk-status--warn                       { color: var(--sk-warn); }
.sk-status--danger                     { color: var(--sk-danger); }
.sk-status--off { color: var(--sk-muted-dim); }
.sk-status--off .led { box-shadow: none; }
.sk-status--live .led { animation: sk-blink 2s infinite; }

.sk-status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
.sk-live       { display: inline-flex; align-items: center; gap: 6px; color: var(--sk-sea); }
.sk-led--sea   { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sk-sea); box-shadow: 0 0 7px var(--sk-sea); animation: sk-blink 2s infinite; }

/* Badge lembut — teks status di atas bg status gelap */
.sk-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  padding: 3px 8px; border-radius: 3px;
  background: var(--sk-surface-2); color: var(--sk-muted);
}
.sk-badge--ok     { color: var(--sk-ok);     background: var(--sk-ok-bg); }
.sk-badge--warn   { color: var(--sk-warn);   background: var(--sk-warn-bg); }
.sk-badge--danger { color: var(--sk-danger); background: var(--sk-danger-bg); }
.sk-badge--sea    { color: var(--sk-sea);    background: var(--sk-sea-bg); }
.sk-badge--brass  { color: var(--sk-brass);  background: var(--sk-brass-dim); }

/* Tag outline ringan */
.sk-tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  color: var(--sk-muted);
  border: 1px solid var(--sk-line-soft); border-radius: 3px;
  padding: 2px 7px;
}
.sk-tag--brass { border-color: var(--sk-brass-dim); color: var(--sk-brass); }

/* Chip filter (bisa diklik) */
.sk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  padding: 4px 10px;
  border: 1px solid var(--sk-line); border-radius: var(--sk-r-pill);
  color: var(--sk-muted); cursor: pointer;
  transition: border-color var(--sk-t), color var(--sk-t);
}
.sk-chip:hover  { color: var(--sk-ink); }
.sk-chip.active { border-color: var(--sk-brass); color: var(--sk-brass); }
.sk-chip .x     { color: var(--sk-muted-dim); }

/* Stage badge (warna dinamis dari data) */
.sk-stage {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 3px;
  border: 1px solid currentColor;
  background: var(--sk-surface-2);
}
.sk-stage-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }


/* §10 FEEDBACK ───────────────────────────────────────────────────── */
.sk-toast {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s6);
  font-family: var(--sk-mono); font-size: var(--sk-fs-md);
  border-bottom: 1px solid transparent;
}
.sk-toast--ok     { background: var(--sk-ok-bg);     color: var(--sk-ok);     border-color: rgba(var(--sk-ok-rgb),.25); }
.sk-toast--warn   { background: var(--sk-warn-bg);   color: var(--sk-warn);   border-color: rgba(var(--sk-warn-rgb),.25); }
.sk-toast--danger { background: var(--sk-danger-bg); color: var(--sk-danger); border-color: rgba(var(--sk-danger-rgb),.25); }
.sk-toast-close   { margin-left: auto; opacity: .6; padding: 2px var(--s1); font-size: var(--sk-fs-md); color: inherit; cursor: pointer; }
.sk-toast-close:hover { opacity: 1; }

/* Toast mengambang (opsional) */
.sk-toast-stack {
  position: fixed; right: var(--s5); bottom: var(--s5); z-index: var(--sk-z-toast);
  display: flex; flex-direction: column; gap: var(--s2); max-width: min(380px, 90vw);
}
.sk-toast-stack .sk-toast {
  border: 1px solid; border-radius: var(--sk-r);
  box-shadow: var(--sk-shadow-2);
  padding: var(--s3) var(--s4);
  animation: sk-slide-in var(--sk-t-slow) var(--sk-ease);
}

.sk-alert {
  padding: var(--s3) var(--s4);
  border: 1px solid transparent; border-radius: var(--sk-r);
  font-size: var(--sk-fs-md);
}
.sk-alert--ok     { background: var(--sk-ok-bg);     border-color: rgba(var(--sk-ok-rgb),.3);     color: var(--sk-ok); }
.sk-alert--warn   { background: var(--sk-warn-bg);   border-color: rgba(var(--sk-warn-rgb),.3);   color: var(--sk-warn); }
.sk-alert--danger { background: var(--sk-danger-bg); border-color: rgba(var(--sk-danger-rgb),.3); color: var(--sk-danger); }
.sk-alert ul      { margin: var(--s2) 0 0; padding-left: var(--s4); }

/* Empty state — selalu beri arah, bukan sekadar "kosong" */
.sk-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s3); padding: var(--s7) var(--s5);
  color: var(--sk-muted-dim);
}
.sk-empty svg { opacity: .4; width: 40px; height: 40px; stroke-width: 1.4; }
.sk-empty p   { font-size: var(--sk-fs-md); max-width: 40ch; }

/* Skeleton — jangan pernah layar blank saat loading */
.sk-skel {
  background: linear-gradient(90deg, var(--sk-surface-2) 25%, var(--sk-line-soft) 37%, var(--sk-surface-2) 63%);
  background-size: 400% 100%;
  border-radius: var(--sk-r);
  animation: sk-shimmer 1.4s ease infinite;
}
.sk-skel--text { height: 12px; margin-bottom: var(--s2); }
.sk-skel--line { height: 12px; width: 60%; }
.sk-skel--row  { height: 40px; margin-bottom: var(--s1); }

/* Progres */
.sk-progress      { height: 5px; background: var(--sk-surface-2); border-radius: 3px; overflow: hidden; }
.sk-progress-fill { height: 100%; border-radius: 3px; background: var(--sk-brass); transition: width var(--sk-t-slow) var(--sk-ease); }


/* §11 OVERLAY ────────────────────────────────────────────────────── */
.sk-dialog {
  position: fixed; inset: 0; margin: auto;
  width: min(520px, 94vw); max-height: min(90vh, 720px);
  padding: 0; overflow-y: auto;
  background: var(--sk-surface);
  border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg);
  color: var(--sk-ink);
  box-shadow: var(--sk-shadow-3);
}
.sk-dialog--sm { width: min(380px, 94vw); }
.sk-dialog--lg { width: min(760px, 94vw); }
.sk-dialog::backdrop { background: var(--sk-overlay); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.sk-dialog-inner { display: flex; flex-direction: column; padding: var(--s5); gap: var(--s4); }

/* Kompatibilitas markup dialog lama: header/body/footer tanpa sk-dialog-inner */
.sk-dialog-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--sk-line-soft);
  font-size: var(--sk-fs-lg); font-weight: 600;
}
.sk-dialog-header > span,
.sk-dialog-header > .t {
  font-size: var(--sk-fs-lg);
  font-weight: 600;
  color: var(--sk-ink);
}
.sk-dialog-header > button {
  flex: none;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sk-muted);
  border: 1px solid var(--sk-line-soft);
  border-radius: var(--sk-r);
  background: transparent;
  font-size: var(--sk-fs-md);
  line-height: 1;
  cursor: pointer;
  transition: color var(--sk-t-fast), border-color var(--sk-t-fast), background var(--sk-t-fast);
}
.sk-dialog-header > button:hover {
  color: var(--sk-ink);
  border-color: var(--sk-line);
  background: var(--sk-surface-2);
}
.sk-dialog-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s4); border-bottom: 1px solid var(--sk-line-soft);
  font-size: var(--sk-fs-lg); font-weight: 600;
}
.sk-dialog-h .t     { font-size: var(--sk-fs-lg); font-weight: 600; color: var(--sk-ink); }
.sk-dialog-close {
  flex: none; padding: var(--s1) var(--s2);
  color: var(--sk-muted); border-radius: var(--sk-r); cursor: pointer;
  font-size: var(--sk-fs-lg); line-height: 1;
  transition: color var(--sk-t-fast), background var(--sk-t-fast);
}
.sk-dialog-close:hover { background: var(--sk-line-soft); color: var(--sk-ink); }
.sk-dialog-body {
  padding: var(--s5);
  font-size: var(--sk-fs-md);
  line-height: 1.6;
}
.sk-dialog-body .sk-form-grid { padding: 0; }
.sk-dialog-hint { font-size: var(--sk-fs-sm); color: var(--sk-muted); line-height: 1.5; }
.sk-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--sk-line-soft);
}
.sk-dialog-foot, .sk-dialog-f {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s2);
  padding-top: var(--s4); border-top: 1px solid var(--sk-line-soft);
}

/* Drawer kanan */
.sk-drawer-overlay { position: fixed; inset: 0; background: var(--sk-overlay); z-index: var(--sk-z-drawer); }
.sk-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(480px, 95vw);
  z-index: calc(var(--sk-z-drawer) + 1);
  display: flex; flex-direction: column;
  background: var(--sk-surface); border-left: 1px solid var(--sk-line);
  box-shadow: var(--sk-shadow-3);
  transform: translateX(100%);
  transition: transform 280ms var(--sk-ease);
}
.sk-drawer.open  { transform: none; }
.sk-drawer-h {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s5); border-bottom: 1px solid var(--sk-line-soft); flex: none;
}
.sk-drawer-h .t   { font-size: var(--sk-fs-base); font-weight: 600; color: var(--sk-ink); }
.sk-drawer-body   { flex: 1; overflow-y: auto; padding: var(--s5); }
.sk-drawer-foot   { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--sk-line-soft); flex: none; }


/* §12 BOARD & DETAIL ─────────────────────────────────────────────── */
/* Tabs */
.sk-tabs { display: flex; gap: 0; overflow-x: auto; border-bottom: 1px solid var(--sk-line-soft); }
.sk-tab {
  padding: 10px var(--s4);
  border-bottom: 2px solid transparent;
  font-size: var(--sk-fs-md); color: var(--sk-muted);
  white-space: nowrap; cursor: pointer;
  transition: color var(--sk-t-fast), border-color var(--sk-t-fast);
}
.sk-tab:hover  { color: var(--sk-ink); }
.sk-tab.active { color: var(--sk-brass); border-bottom-color: var(--sk-brass); font-weight: 500; }
.sk-tab-panel        { display: none; }
.sk-tab-panel.active { display: block; }

/* Kanban */
.sk-kanban { display: flex; gap: var(--s3); align-items: flex-start; overflow-x: auto; padding-bottom: var(--s4); min-height: 400px; }
.sk-kanban-col {
  flex: 0 0 240px; display: flex; flex-direction: column;
  max-height: calc(100vh - 200px);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r);
  transition: border-color var(--sk-t), background var(--sk-t);
}
.sk-kanban-col.drag-over { background: var(--sk-surface-2); border-color: var(--sk-brass); }
.sk-kanban-col-h {
  display: flex; align-items: center; gap: 6px; flex: none;
  padding: 10px var(--s3);
  border-bottom: 1px solid var(--sk-line-soft);
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--sk-muted);
}
.sk-kanban-col-h .count { margin-left: auto; background: var(--sk-surface-2); border-radius: 3px; padding: 1px 6px; }
.sk-kanban-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2); min-height: 60px; }
.sk-kanban-empty { padding: var(--s5) var(--s3); text-align: center; color: var(--sk-muted-dim); font-size: var(--sk-fs-sm); }
.sk-kanban-add {
  flex: none; width: 100%; padding: var(--s2);
  border-top: 1px solid var(--sk-line-soft);
  color: var(--sk-muted-dim); font-size: var(--sk-fs-sm); text-align: center; cursor: pointer;
  transition: color var(--sk-t-fast), background var(--sk-t-fast);
}
.sk-kanban-add:hover { color: var(--sk-ink); background: var(--sk-surface-2); }

/* Kartu di board */
.sk-deal-card, .sk-task-card {
  background: var(--sk-surface-2);
  border: 1px solid var(--sk-line); border-radius: var(--sk-r);
  padding: 10px var(--s3);
  cursor: grab; user-select: none;
  transition: border-color var(--sk-t-fast), box-shadow var(--sk-t-fast);
}
.sk-deal-card:hover, .sk-task-card:hover { border-color: var(--sk-brass); box-shadow: var(--sk-shadow-1); }
.sk-deal-card.dragging, .sk-task-card.dragging { opacity: .4; }
.sk-deal-card .title  { font-size: var(--sk-fs-md); font-weight: 500; color: var(--sk-ink); line-height: 1.4; margin-bottom: 3px; }
.sk-deal-card .title .sk-link       { color: inherit; }
.sk-deal-card .title .sk-link:hover { color: var(--sk-brass); }
.sk-deal-card .client { font-size: var(--sk-fs-xs); color: var(--sk-muted); margin-bottom: 5px; }
.sk-deal-card .meta   { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.sk-deal-card .value  { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); color: var(--sk-brass); }
.sk-deal-card .prob   { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); color: var(--sk-muted-dim); }
.sk-task-card .tc-title { font-size: var(--sk-fs-md); color: var(--sk-ink); line-height: 1.4; margin-bottom: 5px; }
.sk-task-card .tc-meta  { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.sk-task-card .tc-prio {
  flex: none; padding: 1px 6px; border: 1px solid currentColor; border-radius: 2px;
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  letter-spacing: .08em; text-transform: uppercase;
}
.sk-task-card .tc-due { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); color: var(--sk-muted-dim); text-align: right; }

/* Header entitas + info grid */
.sk-client-hdr {
  display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap;
  padding: var(--s5);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r);
}
.sk-client-hdr h2 { font-size: var(--sk-fs-xl); font-weight: 600; color: var(--sk-ink); }
.sk-quickstat     { text-align: center; }
.sk-quickstat .v  { font-family: var(--sk-mono); font-size: var(--sk-fs-xl); font-weight: 600; color: var(--sk-ink); }
.sk-quickstat .k  { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); letter-spacing: var(--sk-ls-label); text-transform: uppercase; color: var(--sk-muted-dim); margin-top: var(--s1); }

.sk-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.sk-info-item .k {
  font-family: var(--sk-mono); font-size: var(--sk-fs-2xs);
  letter-spacing: var(--sk-ls-label); text-transform: uppercase;
  color: var(--sk-muted-dim); margin-bottom: 3px;
}
.sk-info-item .v { font-size: var(--sk-fs-md); color: var(--sk-ink); }

/* Timeline milestone */
.sk-timeline { position: relative; display: flex; flex-direction: column; padding-left: var(--s5); }
.sk-timeline::before { content: ""; position: absolute; left: 7px; top: var(--s2); bottom: var(--s2); width: 2px; background: var(--sk-line-soft); }
.sk-timeline-item { position: relative; padding: 0 0 var(--s5) var(--s4); }
.sk-timeline-item::before {
  content: ""; position: absolute; left: -9px; top: var(--s1);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--sk-surface); border: 2px solid var(--sk-line);
}
.sk-timeline-item.done::before    { background: var(--sk-ok);     border-color: var(--sk-ok); }
.sk-timeline-item.active::before  { background: var(--sk-brass);  border-color: var(--sk-brass); }
.sk-timeline-item.delayed::before { background: var(--sk-danger); border-color: var(--sk-danger); }
.sk-timeline-item:last-child      { padding-bottom: 0; }


/* §13 LANDING PAGE ───────────────────────────────────────────────── */
.sk-wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s6); }

.sk-land-nav {
  position: sticky; top: 0; z-index: var(--sk-z-nav);
  background: var(--sk-glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sk-line-soft);
}
.sk-land-nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; }
.sk-land-brand     { display: flex; align-items: center; gap: var(--s2); font-family: var(--sk-display); font-size: 24px; letter-spacing: .02em;}
.sk-nav-right      { display: flex; align-items: center; gap: var(--s5); }
.sk-nav-links      { display: flex; align-items: center; gap: var(--s6); }
.sk-nav-links a    { font-size: var(--sk-fs-base); color: var(--sk-muted); transition: color var(--sk-t-slow); }
.sk-nav-links a:hover { color: var(--sk-ink); }

.sk-hero      { padding: var(--s8) 0 var(--s7); }
.sk-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--s8); align-items: center; }
.sk-eyebrow   { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); letter-spacing: .24em; text-transform: uppercase; color: var(--sk-brass); }
.sk-hero h1   { font-family: var(--sk-display); font-weight: 400; font-size: clamp(42px, 6vw, 74px); line-height: 1.04; margin: var(--s4) 0 var(--s5); }
.sk-hero h1 .it { font-style: italic; color: var(--sk-brass); }
.sk-hero .lead  { font-size: 19px; max-width: 46ch; margin-bottom: var(--s6); color: var(--sk-muted); }
.sk-hero-cta    { display: flex; gap: var(--s3); flex-wrap: wrap; }
.sk-bearings {
  margin-top: var(--s5);
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm);
  letter-spacing: var(--sk-ls-label); text-transform: uppercase; color: var(--sk-muted-dim);
}
.sk-bearings b   { color: var(--sk-sea); font-weight: 400; }
.sk-name-gloss   { display: block; margin-top: var(--s3); font-family: var(--sk-mono); font-size: var(--sk-fs-sm); letter-spacing: .24em; text-transform: uppercase; color: var(--sk-muted-dim); }

/* Ilustrasi instrumen / kompas */
.sk-instrument   { position: relative; width: 100%; aspect-ratio: 1/1; max-width: 440px; margin: 0 auto; }
.sk-instrument svg { width: 100%; height: 100%; overflow: visible; }
.sk-ring         { fill: none; stroke: var(--sk-line); }
.sk-ring--thin   { stroke: var(--sk-line-soft); }
.sk-tick         { stroke: var(--sk-muted-dim); }
.sk-tick--major  { stroke: var(--sk-brass); }
.sk-cardinal     { font-family: var(--sk-mono); font-size: var(--sk-fs-md); fill: var(--sk-brass); letter-spacing: .06em; }
.sk-cardinal--minor { fill: var(--sk-muted-dim); font-size: var(--sk-fs-2xs); }
.sk-spoke        { stroke: var(--sk-brass); stroke-width: 1.3; opacity: .55; }
.sk-peg-c        { fill: var(--sk-surface); stroke: var(--sk-brass); stroke-width: 1.3; }
.sk-needle-p     { fill: var(--sk-brass); }
.sk-hub          { fill: var(--sk-surface-2); stroke: var(--sk-brass); stroke-width: 1.4; }
.sk-cross        { stroke: var(--sk-line-soft); stroke-width: 1; }
.sk-hdg          { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); fill: var(--sk-muted); letter-spacing: var(--sk-ls-label); }
#sk-ticks, #sk-wheel { transform-box: fill-box; transform-origin: center; }
#sk-ticks { animation: sk-spin 90s linear infinite; }
#sk-wheel { animation: sk-spin-rev 120s linear infinite; }

.sk-strip       { border-top: 1px solid var(--sk-line-soft); border-bottom: 1px solid var(--sk-line-soft); }
.sk-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); }
.sk-pos         { padding: var(--s6) var(--s5); border-right: 1px solid var(--sk-line-soft); }
.sk-pos:last-child { border-right: none; }
.sk-pos .k      { font-family: var(--sk-mono); font-size: var(--sk-fs-xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sk-brass); }
.sk-pos .v      { font-family: var(--sk-display); font-size: 26px; line-height: 1.15; margin-top: var(--s2); }

.sk-section     { padding: var(--s8) 0; }
.sk-section--alt{ background: var(--sk-surface-2); border-top: 1px solid var(--sk-line-soft); border-bottom: 1px solid var(--sk-line-soft); }
.sk-sec-head    { max-width: 660px; margin-bottom: var(--s7); }
.sk-sec-head h2 { font-family: var(--sk-display); font-weight: 400; font-size: clamp(30px, 4vw, 46px); margin-top: var(--s3); }
.sk-sec-head p  { margin-top: var(--s4); font-size: 17px; color: var(--sk-muted); }

.sk-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4); }
.sk-card {
  position: relative; padding: var(--s6);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r);
  transition: border-color var(--sk-t-slow), transform var(--sk-t-slow);
}
.sk-card:hover      { border-color: var(--sk-line); transform: translateY(-3px); }
.sk-card--flagship  { border-color: var(--sk-brass-dim); }
.sk-card .no        { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); letter-spacing: .1em; color: var(--sk-muted-dim); }
.sk-card h3         { font-family: var(--sk-display); font-weight: 400; font-size: 27px; line-height: 1.1; margin: var(--s3) 0; }
.sk-card p          { color: var(--sk-muted); font-size: 15px; }
.sk-card .tags      { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.sk-card .more      { display: inline-flex; gap: 7px; margin-top: var(--s4); font-family: var(--sk-mono); font-size: var(--sk-fs-md); color: var(--sk-brass); }
.sk-flag-badge      { position: absolute; top: var(--s5); right: var(--s5); font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); letter-spacing: var(--sk-ls-label); text-transform: uppercase; color: var(--sk-brass); }
.sk-land-tag        { font-family: var(--sk-mono); font-size: var(--sk-fs-xs); color: var(--sk-muted-dim); border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r-sm); padding: var(--s1) 10px; }

.sk-waypoints   { display: grid; grid-template-columns: repeat(4, 1fr); }
.sk-wp          { padding: 0 var(--s6); border-left: 1px solid var(--sk-line-soft); }
.sk-wp:first-child { padding-left: 0; border-left: none; }
.sk-wp .bearing { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); letter-spacing: .1em; color: var(--sk-brass); }
.sk-wp h3       { font-family: var(--sk-display); font-weight: 400; font-size: 24px; margin: var(--s3) 0 10px; }
.sk-wp p        { color: var(--sk-muted); font-size: var(--sk-fs-base); }

.sk-stack     { display: flex; flex-wrap: wrap; gap: var(--s3); }
.sk-chip-tech {
  font-family: var(--sk-mono); font-size: var(--sk-fs-base);
  color: var(--sk-ink);
  background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-r-sm);
  padding: 11px var(--s4);
  transition: border-color var(--sk-t-slow), color var(--sk-t-slow);
}
.sk-chip-tech:hover { border-color: var(--sk-brass); color: var(--sk-brass); }

.sk-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.sk-note {
  display: flex; flex-direction: column; gap: var(--s3);
  min-height: 200px; padding: var(--s5);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r);
  transition: border-color var(--sk-t-slow);
}
.sk-note:hover  { border-color: var(--sk-line); }
.sk-note .cat   { font-family: var(--sk-mono); font-size: var(--sk-fs-xs); letter-spacing: var(--sk-ls-label); text-transform: uppercase; color: var(--sk-sea); }
.sk-note h3     { font-family: var(--sk-display); font-weight: 400; font-size: 23px; line-height: 1.14; }
.sk-note .meta  { margin-top: auto; font-family: var(--sk-mono); font-size: var(--sk-fs-sm); color: var(--sk-muted-dim); }
.sk-ph-note {
  display: inline-block; margin-top: var(--s5);
  font-family: var(--sk-mono); font-size: var(--sk-fs-sm); color: var(--sk-brass);
  background: var(--sk-brass-dim); border: 1px dashed rgba(var(--sk-brass-rgb),.45);
  padding: 6px 11px; border-radius: 3px;
}

.sk-demos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.sk-demo {
  display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s5);
  background: var(--sk-surface);
  border: 1px solid var(--sk-line-soft); border-radius: var(--sk-r);
  transition: border-color var(--sk-t-slow), transform var(--sk-t-slow);
}
.sk-demo:hover  { border-color: var(--sk-brass-dim); transform: translateY(-3px); }
.sk-demo-top    { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sk-demo .host  { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); letter-spacing: var(--sk-ls-mono); color: var(--sk-muted-dim); }
.sk-demo h3     { font-family: var(--sk-display); font-weight: 400; font-size: 25px; line-height: 1.12; }
.sk-demo p      { color: var(--sk-muted); font-size: var(--sk-fs-base); flex: 1; }
.sk-demo .tags  { display: flex; gap: 7px; flex-wrap: wrap; }
.sk-status-live { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sk-sea); display: inline-flex; align-items: center; gap: 6px; }
.sk-status-live .led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sk-sea); box-shadow: 0 0 8px var(--sk-sea); animation: sk-blink 2s infinite; }
.sk-status-maintenance { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sk-brass); display: inline-flex; align-items: center; gap: 6px; }
.sk-status-maintenance .led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sk-brass); box-shadow: 0 0 8px var(--sk-brass); animation: sk-blink 2s infinite; }
.sk-status-offline { font-family: var(--sk-mono); font-size: var(--sk-fs-2xs); letter-spacing: .16em; text-transform: uppercase; color: var(--sk-err); display: inline-flex; align-items: center; gap: 6px; }
.sk-status-offline .led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sk-err); box-shadow: 0 0 8px var(--sk-err); }
.sk-demo-links  { display: flex; gap: var(--s4); margin-top: 6px; padding-top: var(--s4); border-top: 1px solid var(--sk-line-soft); }
.sk-demo-links a { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sk-mono); font-size: var(--sk-fs-md); transition: color var(--sk-t-slow); }
.sk-demo-links a.live         { color: var(--sk-brass); }
.sk-demo-links a.live:hover   { color: var(--sk-brass-hi); }
.sk-demo-links a.detail       { color: var(--sk-muted); }
.sk-demo-links a.detail:hover { color: var(--sk-ink); }

.sk-contact     { text-align: center; padding: var(--s8) 0; }
.sk-contact h2  { font-family: var(--sk-display); font-weight: 400; font-size: clamp(34px, 5vw, 56px); margin: var(--s4) 0 var(--s5); }
.sk-contact p   { color: var(--sk-muted); font-size: 19px; max-width: 46ch; margin: 0 auto var(--s6); }
.sk-contact-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }

.sk-land-footer { border-top: 1px solid var(--sk-line-soft); padding: var(--s6) 0; }
.sk-foot-inner  { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); flex-wrap: wrap; }
.sk-foot-small  { font-family: var(--sk-mono); font-size: var(--sk-fs-sm); color: var(--sk-muted-dim); }

.sk-reveal      { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.sk-reveal.in   { opacity: 1; transform: none; }


/* §14 HALAMAN MAINTENANCE ────────────────────────────────────────── */
.sk-maint-body  { min-height: 100vh; display: flex; flex-direction: column; }
.sk-maint-stage { flex: 1; display: flex; align-items: center; padding: var(--s8) 0; }
.sk-maint-grid  { display: grid; grid-template-columns: 1.08fr .92fr; gap: var(--s8); align-items: center; }
.sk-maint-stage h1 { font-family: var(--sk-display); font-weight: 400; font-size: clamp(42px, 6vw, 64px); line-height: 1.04; margin-bottom: var(--s5); }
.sk-maint-stage h1 .it   { font-style: italic; color: var(--sk-brass); }
.sk-maint-stage p.lead   { font-size: 19px; max-width: 46ch; margin-bottom: var(--s6); color: var(--sk-muted); }
.sk-cta-group   { display: flex; gap: var(--s3); flex-wrap: wrap; }
.sk-maint-footer{ margin-top: auto; border-top: 1px solid var(--sk-line-soft); padding: var(--s5) 0; }

.sk-status-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s5); padding: 6px var(--s3);
  font-family: var(--sk-mono); font-size: var(--sk-fs-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sk-sea);
  background: var(--sk-surface-2); border: 1px solid var(--sk-line); border-radius: 3px;
}
.sk-status-badge .led { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--sk-sea); box-shadow: 0 0 8px var(--sk-sea); animation: sk-blink 2s infinite; }

.sk-toggle-display { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 50%; }
.sk-toggle-display--on  { background: var(--sk-danger-bg); border: 2px solid var(--sk-danger); }
.sk-toggle-display--off { background: var(--sk-ok-bg);     border: 2px solid var(--sk-ok); }
.sk-toggle-display-dot  { width: 20px; height: 20px; border-radius: 50%; }
.sk-toggle-display--on  .sk-toggle-display-dot { background: var(--sk-danger); box-shadow: 0 0 12px var(--sk-danger); animation: sk-blink 1.5s infinite; }
.sk-toggle-display--off .sk-toggle-display-dot { background: var(--sk-ok); }


/* §15 JEMBATAN BOOTSTRAP / METRONIC ──────────────────────────────── */
/* Hanya berlaku kalau Bootstrap/Metronic ikut dimuat.
   Tujuannya supaya komponen bawaan tidak terlihat "asing". */
:root {
  --bs-body-bg:                  #0C141E;
  --bs-body-color:               #EEF2EF;
  --bs-body-font-family:         'Hanken Grotesk', sans-serif;
  --bs-body-font-size:           14px;
  --bs-border-radius:            4px;
  --bs-primary:                  #C9A15A;  --bs-primary-rgb:   201,161,90;
  --bs-secondary:                #8DA3B4;  --bs-secondary-rgb: 141,163,180;
  --bs-success:                  #5CBE8E;  --bs-success-rgb:   92,190,142;
  --bs-warning:                  #E2A93F;  --bs-warning-rgb:   226,169,63;
  --bs-danger:                   #E36756;  --bs-danger-rgb:    227,103,86;
  --bs-info:                     #74D6C4;  --bs-info-rgb:      116,214,196;
  --bs-border-color:             #213648;
  --bs-border-color-translucent: rgba(33,54,72,.5);
  --bs-card-bg:                  #12202E;
  --bs-card-border-color:        #182838;
  --bs-card-cap-bg:              #0E1926;
  --bs-link-color:               #C9A15A;
  --bs-link-hover-color:         #DCB36B;
  --bs-secondary-bg:             #12202E;
  --bs-tertiary-bg:              #0E1926;
  --bs-emphasis-color:           #EEF2EF;
  --bs-heading-color:            #EEF2EF;
}
.form-control, .form-select {
  background-color: var(--sk-surface-2); border-color: var(--sk-line); color: var(--sk-ink);
}
.form-control:focus, .form-select:focus {
  background-color: var(--sk-surface-2); border-color: var(--sk-sea); color: var(--sk-ink); box-shadow: var(--sk-ring);
}
.form-control::placeholder { color: var(--sk-muted-dim); }
.btn-primary {
  --bs-btn-bg: var(--sk-brass); --bs-btn-border-color: var(--sk-brass); --bs-btn-color: var(--sk-on-brass);
  --bs-btn-hover-bg: var(--sk-brass-hi); --bs-btn-hover-border-color: var(--sk-brass-hi); --bs-btn-hover-color: var(--sk-on-brass);
  --bs-btn-active-bg: var(--sk-brass-hi); --bs-btn-active-border-color: var(--sk-brass-hi);
}
.card     { background: var(--sk-surface); border-color: var(--sk-line-soft); border-radius: var(--sk-r); }
.dropdown-menu {
  --bs-dropdown-bg: var(--sk-surface); --bs-dropdown-border-color: var(--sk-line);
  --bs-dropdown-link-color: var(--sk-muted); --bs-dropdown-link-hover-bg: var(--sk-surface-2);
  --bs-dropdown-link-hover-color: var(--sk-ink); --bs-dropdown-link-active-bg: var(--sk-brass-dim);
  --bs-dropdown-link-active-color: var(--sk-brass);
}
.modal-content { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-r-lg); }
.table         { --bs-table-color: var(--sk-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--sk-line-soft); --bs-table-hover-bg: var(--sk-surface-3); }


/* §16 RESPONSIF ──────────────────────────────────────────────────── */
@media (max-width: 1050px) {
  /* Sidebar jadi drawer — jangan pernah display:none tanpa pengganti */
  .sk-layout { grid-template-columns: 1fr; }
  .sk-side {
    position: fixed; inset: 0 auto 0 0;
    width: 270px; height: 100vh;
    z-index: var(--sk-z-drawer);
    transform: translateX(-100%);
    transition: transform var(--sk-t-slow) var(--sk-ease);
    box-shadow: var(--sk-shadow-2);
  }
  .sk-side.open          { transform: none; }
  /* Backdrop: use opacity transition and pointer-events for smooth UX */
  .sk-side-backdrop {
    display: block; /* always present but hidden by opacity/pointer-events */
    position: fixed; inset: 0; z-index: calc(var(--sk-z-drawer) - 1);
    background: var(--sk-overlay);
    opacity: 0; pointer-events: none;
    transition: opacity 200ms var(--sk-ease);
  }
  .sk-side-backdrop.open { opacity: 1; pointer-events: auto; }
  .sk-nav-toggle         { display: inline-flex; }

  .sk-content { padding: var(--s4); gap: var(--s4); }
  .sk-topbar  { padding: var(--s3) var(--s4); }
  .sk-metrics { grid-template-columns: repeat(2, 1fr); }
  .sk-table thead th, .sk-table tbody td, .sk-table tfoot td { padding-left: var(--s4); padding-right: var(--s4); }
  .col-hide   { display: none; }

  .sk-hero-grid   { grid-template-columns: 1fr; gap: var(--s7); }
  .sk-instrument  { max-width: 340px; }
  .sk-cards       { grid-template-columns: 1fr; }
  .sk-strip-inner { grid-template-columns: 1fr; }
  .sk-pos         { border-right: none; border-bottom: 1px solid var(--sk-line-soft); }
  .sk-pos:last-child { border-bottom: none; }
  .sk-waypoints   { grid-template-columns: 1fr 1fr; }
  .sk-wp          { border-left: none; padding: 0 0 6px; }
  .sk-notes, .sk-demos { grid-template-columns: 1fr; }
  .sk-nav-links   { display: none; }
  .sk-section     { padding: var(--s7) 0; }
  .sk-maint-grid  { grid-template-columns: 1fr; gap: var(--s7); text-align: center; }
  .sk-maint-stage p.lead { margin: 0 auto var(--s6); }
  .sk-cta-group, .sk-foot-inner { justify-content: center; text-align: center; }

  /* Make drawer occupy full height and slide with accessible focus trap hint */
  .sk-side { width: 270px; }
  .sk-side.open { box-shadow: var(--sk-shadow-2); }
  /* when open, prevent body scroll on mobile via helper class applied by JS if needed */
  .sk-side-open-body { overflow: hidden; }
}

@media (max-width: 700px) {
  .sk-form-grid  { grid-template-columns: 1fr; padding: var(--s4); }
  .sk-info-grid  { grid-template-columns: 1fr; }
  .sk-metrics    { grid-template-columns: 1fr; }
  .sk-page-h     { align-items: flex-start; }
  .sk-page-h .acts { width: 100%; }
  .sk-page-h .acts .sk-btn { flex: 1; }
  .sk-filter-bar .sk-input,
  .sk-filter-bar .sk-select { max-width: none; flex: 1 1 100%; }
  .sk-search input { width: 100%; }
  .sk-waypoints  { grid-template-columns: 1fr; }
  .sk-wrap       { padding: 0 var(--s4); }
  .sk-toast      { padding: var(--s3) var(--s4); }
  .sk-toast-stack{ left: var(--s4); right: var(--s4); bottom: var(--s4); max-width: none; }
}


/* §17 MOTION ─────────────────────────────────────────────────────── */
@keyframes sk-blink    { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
@keyframes sk-spin     { to { transform: rotate(360deg) } }
@keyframes sk-spin-rev { to { transform: rotate(-360deg) } }
@keyframes sk-shimmer  { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@keyframes sk-slide-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Wajib dihormati — blok ini harus tetap paling akhir sebelum print. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sk-reveal { opacity: 1; transform: none; }
}


/* §18 PRINT ──────────────────────────────────────────────────────── */
@media print {
  :root {
    color-scheme: light;
    --sk-bg: #FFF; --sk-surface: #FFF; --sk-surface-2: #FAF9F6; --sk-surface-3: transparent;
    --sk-ink: #16232F; --sk-muted: #40505E; --sk-muted-dim: #6B7A87;
    --sk-line: #C9C3B6; --sk-line-soft: #E0DACE;
    --sk-brass: #8A6A3A; --sk-on-brass: #FFF;
  }
  body { background: #FFF; color: #16232F; }
  .sk-side, .sk-topbar, .sk-side-backdrop, .sk-pager,
  .sk-row-actions, .sk-filter-bar, .sk-selbar, .sk-toast-stack,
  .sk-drawer, .sk-drawer-overlay, .sk-btn, .sk-nav-toggle { display: none !important; }
  .sk-layout  { display: block; }
  .sk-content { padding: 0; }
  .sk-panel, .sk-metric, .sk-card { border-color: #C9C3B6; box-shadow: none; break-inside: avoid; }
  .sk-table thead { display: table-header-group; }
  .sk-table tbody tr { break-inside: avoid; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #6B7A87; }
}