/* TinggalIsi: token & komponen dasar (dipakai situs, dasbor, halaman legal) */
:root {
  --ink: #16211B;
  --ink-2: #2B3832;
  --muted: #5A665F;
  --faint: #8A958F;
  --line: #DCE2DE;
  --line-2: #EBEFEC;
  --paper: #F4F6F4;
  --card: #FFFFFF;
  --accent: #0E6B3A;          /* hijau TinggalIsi: warna merek */
  --accent-d: #0A5430;
  --accent-soft: #E4F2EA;
  --blue: #2F5BEA;            /* "isi" pada logo & label Baru */
  --blue-soft: #E8EEFF;
  --wa: #128C4A;              /* tombol yang membuka WhatsApp */
  --wa-d: #0D7039;
  --wa-soft: #E4F4EA;
  --bad: #B42318;
  --bad-soft: #FDEDEB;
  --warn: #9A5B05;
  --warn-soft: #FFF4DE;
  --ok: #0E7A45;
  --ok-soft: #E3F4EA;
  --r: 12px;
  --font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 { line-height: 1.2; text-wrap: balance; margin: 0; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; min-width: 0; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* logo */
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; white-space: nowrap; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo b { color: var(--blue); font-weight: 700; }

/* tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px;
  border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font-weight: 650; font-size: .95rem; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.btn:hover { border-color: #BCC6C0; background: #FAFBFA; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-d); border-color: var(--accent-d); }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn.wa:hover { background: var(--wa-d); border-color: var(--wa-d); }
.btn.dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.dark:hover { background: var(--ink-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: rgba(22, 33, 27, .06); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: #F2C6C0; }
.btn.danger.solid { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.sm { min-height: 36px; padding: 6px 12px; font-size: .88rem; border-radius: 9px; }
.btn.icon { padding: 0; width: 40px; min-height: 40px; }
.btn.icon.sm { width: 34px; min-height: 34px; }
.btn.is-busy { cursor: progress; opacity: .75; }

/* isian */
.in {
  display: block; width: 100%; min-height: 44px; padding: 9px 12px; font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
textarea.in { resize: vertical; min-height: 84px; line-height: 1.5; }
select.in {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235A665F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
}
.in:hover { border-color: #BCC6C0; }
.in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.in::placeholder { color: #9AA59F; }
.in.is-bad { border-color: var(--bad); }
.lbl { display: block; font-weight: 650; font-size: .9rem; margin: 0 0 6px; }
.hint { font-size: .84rem; color: var(--muted); margin-top: 6px; }
.hint.bad { color: var(--bad); font-weight: 550; }
.fld + .fld { margin-top: 18px; }

/* sakelar */
.sw { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-track { flex: none; position: relative; width: 42px; height: 24px; margin-top: 1px; border-radius: 99px; background: #C9D1CC; transition: background .15s; }
.sw-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s; }
.sw input:checked + .sw-track { background: var(--accent); }
.sw input:checked + .sw-track::after { transform: translateX(18px); }
.sw input:focus-visible + .sw-track { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px; }
.sw-text { min-width: 0; }
.sw-text b { display: block; font-weight: 650; font-size: .95rem; }
.sw-text span { display: block; font-size: .84rem; color: var(--muted); }

/* label status */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 99px; font-size: .78rem; font-weight: 650; white-space: nowrap; background: var(--line-2); color: var(--ink-2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.pill.on { background: var(--ok-soft); color: var(--ok); }
.pill.off { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.new { background: var(--blue-soft); color: var(--blue); }

/* kartu */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; }

/* modal */
.modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; padding: 16px; background: rgba(16, 24, 20, .45); animation: fade .15s ease-out; }
.sheet { width: 100%; max-width: 440px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 16px; padding: 22px 20px 18px; box-shadow: 0 24px 60px rgba(10, 20, 15, .25); animation: rise .18s ease-out; }
.sheet h2 { font-size: 1.12rem; margin-bottom: 8px; }
.sheet .msg { color: var(--ink-2); white-space: pre-line; }
.sheet .row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
@media (min-width: 640px) { .modal { place-items: center; } }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(12px); opacity: 0; } }

/* notifikasi ringan */
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 90; transform: translateX(-50%); max-width: calc(100vw - 32px);
  padding: 11px 16px; border-radius: 10px; background: var(--ink); color: #fff; font-size: .92rem; font-weight: 550;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .2); animation: rise .18s ease-out;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }