/* NeoSMS panel, design Opsi L "Neon Malam", refined as "Kaca Laut Malam" (docs/design/ui-opsi-3/opsi-l.md).
   A deep sea-glass night: tinted glass tiles with cool hairlines, one spotlit tile per page carrying the lit edge and
   the tray, a floating island with a menu whose lit segment glides to the open page, the cyan-to-mint gradient for
   the primary action, large light titles, tabular figures. Dark only. */
/* Geist and Geist Mono (Vercel, SIL OFL 1.1; fonts/LISENSI.txt), variable weight, served from this server (CSP self) */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geist-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geistmono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/geistmono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: dark;
  --bg: #04090b; --surface: #0a1316; --s2: #0f1b1f; --s3: #142328; --fg: #e8f2f1; --muted: #8ea4a6; --ph: #7d9395;
  --line: rgb(178 236 230 / .085); --line-strong: rgb(178 236 230 / .16);
  --acc: #2ee6d6; --acc-2: #7cf29a; --acc-fg: #04130f; --acc-ink: #2ee6d6; --acc-soft: rgb(46 230 214 / .12);
  --grad: linear-gradient(120deg, var(--acc), var(--acc-2));
  --edge: linear-gradient(160deg, rgb(178 236 230 / .16), rgb(178 236 230 / .045) 38%, rgb(178 236 230 / .03) 70%, rgb(46 230 214 / .16));
  --ok: #6ee7a0; --ok-s: rgb(110 231 160 / .10); --warn: #f5c451; --warn-s: rgb(245 196 81 / .10); --bad: #ff7a7a; --bad-s: rgb(255 122 122 / .10); --idle: #8b9a9c;
  --danger: #ff7a7a; --danger-hover: #ff9a9a; --danger-fg: #1a0606; /* filled red button, dark text: 7.8:1 */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", sans-serif;
  --display: "Geist", system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 12px; --rt: 20px; /* controls, tiles */
  --pad: 22px; /* tile padding; rows and tables reach the tile edge */
  --gut: clamp(16px, 4vw, 32px); /* page side margin, never under a notch */
  --ease: cubic-bezier(.16, 1, .3, 1); /* every arrival decelerates the same way */
  interpolate-size: allow-keywords;
  scrollbar-color: #1d2e33 var(--bg);
}
@property --a { syntax: "<angle>"; inherits: false; initial-value: 140deg; }

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; caret-color: var(--acc); }
::selection { background: rgb(46 230 214 / .30); color: #fff; }
h1, h2, h3 { margin: 0; line-height: 1.25; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-family: var(--display); font-size: clamp(30px, calc(14px + 3.2vw), 46px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
h2, h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -.012em; }
h3 { font-size: 15px; }
p, ul { margin: 0; }
a { color: var(--acc-ink); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--acc-2); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; }
.ic { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono, .num { font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.code, kbd { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* shell: a floating glass island (logo, menu track, command field, account) detached from the top, content at 1240 px.
   Under 1200 px the menu takes its own row inside the island; on a phone the island scrolls away with the page. */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }
/* the page's backdrop: a faint light from the top corner and a softer one low on the left, over a slightly lighter
   top. Fixed and screen-sized, so it fills the screen whatever the page's height and scrolling repaints nothing. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1000px 560px at 86% -14%, rgb(46 230 214 / .10), transparent 70%), radial-gradient(760px 560px at -10% 42%, rgb(124 242 154 / .04), transparent 70%),
    linear-gradient(180deg, #071114, var(--bg) 70%); }
.top { padding-top: 14px; }
.isl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 8px 8px 14px; border-radius: 24px;
  background: rgb(10 19 22 / .72); -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 0 0 1px rgb(178 236 230 / .08), inset 0 1px 0 rgb(255 255 255 / .06), 0 24px 48px -28px rgb(0 0 0 / .9); }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-right: 6px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); text-decoration: none; white-space: nowrap; }
.brand:hover { color: var(--fg); }
/* the mark: a small lit tile holding a gradient chip */
.logo { position: relative; width: 30px; height: 30px; flex: none; border-radius: 10px; border: 1px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; }
.logo::after { content: ""; position: absolute; inset: 5px; background: var(--grad); -webkit-mask: url(mark.svg) center / contain no-repeat; mask: url(mark.svg) center / contain no-repeat; filter: drop-shadow(0 0 6px rgb(46 230 214 / .5)); }
.cmd { flex: 0 1 270px; min-width: 150px; margin-left: auto; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 14px;
  background: rgb(255 255 255 / .04); border: 1px solid var(--line); border-radius: 999px; outline: 3px solid transparent; outline-offset: 0;
  transition: background-color .3s var(--ease), border-color .3s var(--ease), outline-color .3s var(--ease); }
.cmd:focus-within { background: var(--s2); border-color: rgb(46 230 214 / .6); outline-color: rgb(46 230 214 / .16); }
.cmd > .ic, .kbd { transition: color .2s, opacity .2s; }
.cmd:focus-within > .ic { color: var(--acc); }
.cmd:focus-within .kbd { opacity: 0; }
.cmd > .ic { width: 17px; height: 17px; color: var(--muted); }
.cmd input { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--fg); }
.cmd input::placeholder { color: var(--ph); }
.cmd input::-webkit-search-cancel-button { display: none; }
.kbd { padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 11.5px; line-height: 1.4; white-space: nowrap; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.who form { margin: 0; }
.ava { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-size: 14px; font-weight: 600; color: var(--acc); text-transform: uppercase;
  background: radial-gradient(circle at 30% 25%, rgb(46 230 214 / .22), rgb(46 230 214 / .06)); box-shadow: inset 0 0 0 1px rgb(46 230 214 / .3); cursor: default; }
.nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--muted); }
.out { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer;
  transition: color .25s var(--ease), background-color .25s var(--ease); }
.out .ic { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.out:hover { color: var(--fg); background: rgb(255 255 255 / .05); }
.out:hover .ic { transform: translateX(2px); }
/* menu: a segmented track; the open page's segment is the lit pill (.ink). Moving to another page, a line of light
   runs over to the next segment and round it (.trail, drawn by gerak.js), under the labels */
.nav { position: relative; isolation: isolate; display: flex; gap: 2px; min-width: 0; padding: 3px; border-radius: 999px;
  background: rgb(255 255 255 / .035); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
.nav.fr { mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.nav.fl { mask-image: linear-gradient(90deg, transparent, #000 48px); }
.nav.fl.fr { mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.nav a { position: relative; display: flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted);
  text-decoration: none; white-space: nowrap; transition: color .25s var(--ease), background-color .25s var(--ease); }
.nav a:hover { color: var(--fg); background-color: rgb(255 255 255 / .05); }
.nav a[aria-current] { color: var(--fg); background-color: transparent; }
/* the pill is a quiet pill (.ink) under its lit edge and glow (::after), so the edge can light up on its own */
.ink { position: absolute; inset: 0; z-index: -1; border-radius: 999px; border: 1px solid rgb(255 255 255 / .1); background: padding-box var(--s2);
  transition: opacity .4s var(--ease); }
.ink::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid transparent;
  background: linear-gradient(var(--s2), var(--s2)) padding-box, linear-gradient(120deg, var(--acc), rgb(124 242 154 / .35) 45%, rgb(255 255 255 / .08)) border-box;
  box-shadow: 0 6px 18px -8px rgb(46 230 214 / .55), inset 0 1px 0 rgb(255 255 255 / .06); transition: opacity .5s var(--ease); }
.nav a:focus-visible { outline-offset: -2px; }
/* one row from 1200 px: logo, menu, command field, account; the name rests behind the initial */
@media (min-width: 1200px) {
  .isl { flex-wrap: nowrap; }
  .nav { flex: none; } /* the menu keeps its width; the command field gives way */
  .who .nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 1200px) and (max-width: 1359px) { .kbd { display: none; } } /* the field is narrow there: room for the words */
@media (max-width: 1199px) {
  .nav { order: 5; flex-basis: 100%; width: fit-content; max-width: 100%; flex-grow: 0; }
  .cmd { flex: 1 1 260px; max-width: 520px; }
  .who { margin-left: auto; }
  .who .ava { display: none; }
}
.main { display: flex; flex-direction: column; gap: 24px; padding-top: clamp(28px, 5vw, 56px); padding-bottom: max(clamp(56px, 8vw, 96px), env(safe-area-inset-bottom)); }

/* page header */
.ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 4px; }
.ph-t { display: grid; gap: 6px; min-width: 0; }
.lead { max-width: 60ch; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.sub { color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.hint { color: var(--muted); font-size: 13px; }
.empty { display: grid; justify-items: center; gap: 14px; padding: 22px 12px 10px; text-align: center; color: var(--muted); font-size: 15px; }
.empty::before { content: ""; width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle, var(--acc) 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 11px, rgb(46 230 214 / .35) 11.5px 12.5px, transparent 13px),
    radial-gradient(circle, transparent 0 19px, rgb(46 230 214 / .16) 19.5px 20.5px, transparent 21px), radial-gradient(circle, rgb(46 230 214 / .08), transparent 70%);
  box-shadow: inset 0 0 0 1px rgb(46 230 214 / .1); }
.sec > .empty:only-child, .sec > .sec-h + .empty:last-child { padding-bottom: 14px; }
.empty ~ .acts { justify-content: center; }
.empty ~ .hint, .empty ~ .sub { text-align: center; }

/* tiles: dark, a lit gradient edge, header row with title and count */
.secs { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
:root { --tray: 0 0 0 6px rgb(255 255 255 / .022), 0 0 0 7px rgb(255 255 255 / .055), inset 0 1px 0 rgb(255 255 255 / .05), 0 30px 60px -40px rgb(0 0 0 / .9); }
.sec { position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: hidden; padding: var(--pad); border: 1px solid transparent; border-radius: var(--rt);
  background: linear-gradient(180deg, rgb(178 236 230 / .025), transparent 120px) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045), 0 30px 60px -44px rgb(0 0 0 / .95); }
.sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; padding: 20px var(--pad) 14px; border-bottom: 1px solid var(--line); }
.sec-h a { font-size: 14px; font-weight: 500; }
.n { display: inline-grid; place-items: center; min-width: 26px; height: 24px; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: var(--acc-soft); color: var(--acc);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; vertical-align: 1px; }
.sec .rows, .sec .tblw { margin-inline: calc(-1 * var(--pad)); }
.sec-h + .rows, .sec-h + .tblw { margin-top: -16px; }
.sec > .rows:last-child { margin-bottom: calc(-1 * var(--pad)); }
.sec > :not(.sec-h) + .rows { border-top: 1px solid var(--line); }
.sec > .rows:not(:last-child) { border-bottom: 1px solid var(--line); }
/* the one tile that matters on a page: a soft light from its top and an edge the light runs around once */
.spot { box-shadow: var(--tray); background: radial-gradient(600px 200px at 20% 0%, rgb(46 230 214 / .10), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
  conic-gradient(from var(--a), rgb(255 255 255 / .05), rgb(46 230 214 / .62) 9%, rgb(124 242 154 / .32) 17%, rgb(255 255 255 / .06) 30%, rgb(255 255 255 / .14) 62%, rgb(255 255 255 / .05)) border-box; }

/* Beranda: a bento of tiles, the problems tile large, the primary action a tile of its own */
.cta { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 150px; padding: 22px; border-radius: var(--rt); background: var(--grad); color: var(--acc-fg);
  font-size: 19px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; box-shadow: 0 0 0 6px rgb(46 230 214 / .06), 0 0 0 7px rgb(46 230 214 / .14), inset 0 1px 0 rgb(255 255 255 / .4), 0 24px 48px -24px rgb(46 230 214 / .65); transition: filter .3s, transform .5s cubic-bezier(.32, .72, 0, 1); }
.cta .ic { box-sizing: content-box; width: 22px; height: 22px; padding: 12px; border-radius: 50%; background: rgb(4 19 15 / .12); box-shadow: inset 0 1px 0 rgb(255 255 255 / .35); transition: transform .5s cubic-bezier(.32, .72, 0, 1), background-color .3s; }
@media (hover: hover) { .cta:hover .ic { transform: translate(3px, -2px) scale(1.06); background: rgb(4 19 15 / .18); } }
.cta:hover { color: var(--acc-fg); filter: brightness(1.06); transform: translateY(-2px); }
.cta:active { transform: scale(.98); transition-duration: .06s; }
@media (min-width: 900px) {
  .secs.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; align-items: start; }
  .bento > .b-todo { grid-column: 1 / 3; grid-row: 1 / 3; }
  .bento > .b-run { grid-column: 3 / 5; grid-row: 1; }
  .bento > .b-lic { grid-column: 3; grid-row: 2; }
  .bento > .b-cta { grid-column: 4; grid-row: 2; align-self: stretch; }
  .bento:not(:has(.b-lic)) > .b-cta { grid-column: 3 / 5; }
}

@media (min-width: 900px) {
  .sec.split { display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); column-gap: 40px; row-gap: 16px; padding: 28px 32px; }
  .sec.split > .sec-h { grid-column: 1; grid-row: 1; align-self: start; margin: 0; padding: 0; border: 0; }
  .sec.split > :not(.sec-h) { grid-column: 2; }
}

/* buttons: 44 px; primary the gradient, secondary dark with a fine edge, danger outlined (filled on the confirm pages) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid rgb(255 255 255 / .10); border-radius: 999px;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--fg); background: var(--s2); text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), filter .3s var(--ease), transform .4s cubic-bezier(.32, .72, 0, 1); }
.btn .ic { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover { color: #fff; background: var(--s3); border-color: var(--line-strong); }
.btn:active { transform: scale(.98); transition-duration: .08s; }
.btn.pri { padding: 0 20px; font-weight: 600; color: var(--acc-fg); background: var(--grad); border-color: transparent; box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), 0 10px 28px -12px rgb(46 230 214 / .65); }
.btn.pri:has(> .ic) { flex-direction: row-reverse; padding: 0 6px 0 20px; gap: 12px; }
.btn.pri > .ic { box-sizing: content-box; width: 16px; height: 16px; padding: 8px; border-radius: 50%; background: rgb(4 19 15 / .12); transition: transform .5s cubic-bezier(.32, .72, 0, 1), background-color .3s; }
@media (hover: hover) { .btn.pri:hover > .ic { transform: translate(2px, -1px) scale(1.06); background: rgb(4 19 15 / .2); } }
.btn.pri:hover { color: var(--acc-fg); filter: brightness(1.07); }
.btn.danger { color: var(--bad); border-color: rgb(255 122 122 / .45); background: transparent; }
.btn.danger:hover { background: var(--bad-s); border-color: var(--bad); }
.btn.pri.danger { color: var(--danger-fg); background: var(--danger); border-color: var(--danger); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), 0 10px 28px -12px rgb(255 122 122 / .55); }
.btn.pri.danger:hover, .btn.pri.danger:focus-visible { background: var(--danger-hover); border-color: var(--danger-hover); filter: none; }
.btn.link, .btn.ghost { padding-inline: 10px; border-color: transparent; background: none; }
.btn.ghost { color: var(--acc-ink); }
.btn.danger.link { color: var(--bad); }
.btn.link:hover, .btn.ghost:hover { border-color: transparent; background: rgb(255 255 255 / .05); }
.btn.sm { padding: 0 14px; }
.acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acts form { margin: 0; }
.acts:empty { display: none; }
/* the plane on "Mulai Kirim" leans forward on hover and flies off when the form goes (gerak.js) */

.btn.go.pergi .ic { animation: m-fly .5s cubic-bezier(.5, 0, .75, 0) forwards; }

/* status chip: a dark pill, icon + short label in the status colour */
.st { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 26px; padding: 0 10px 0 8px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .05);
  font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; vertical-align: middle; }
.st .ic { width: 14px; height: 14px; }
.st-ok { color: var(--ok); }
.st-warn { color: var(--warn); }
.st-bad { color: var(--bad); }
.st-off { color: var(--idle); }
.st-run { color: var(--acc); }

/* messages: a tint of the status colour on the dark */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid rgb(245 196 81 / .22); border-radius: var(--r); background: var(--warn-s); color: var(--fg); overflow-wrap: anywhere; }
.note > .ic { margin-top: 2px; color: var(--warn); }
.note.ok { background: var(--ok-s); border-color: rgb(110 231 160 / .22); }
.note.ok > .ic { color: var(--ok); }
.note.bad { background: var(--bad-s); border-color: rgb(255 122 122 / .25); }
.note.bad > .ic { color: var(--bad); }
.note.info { background: rgb(255 255 255 / .04); border-color: var(--line); }
.note.info > .ic { color: var(--acc); }
.note-b { display: grid; gap: 4px; justify-items: start; min-width: 0; }
.note-b .acts { margin-top: 4px; }
.errs { margin: 0; padding-left: 18px; }
.notes { display: grid; gap: 8px; }
.notes:empty { display: none; }

/* rows: separated by 1 px lines, edge to edge in a tile */
.rows { list-style: none; padding: 0; display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 15px var(--pad); border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row.ri { grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 8px 14px; }
.ri-i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: rgb(255 255 255 / .04); border: 1px solid var(--line); }
.ri-i .ic { width: 18px; height: 18px; }
.row { transition: background-color .3s var(--ease); }
@media (hover: hover) { .rows > .row:has(a:not(.btn)):hover { background: rgb(255 255 255 / .022); } }
.row.sel { background: rgb(46 230 214 / .06); box-shadow: inset 0 0 0 1px rgb(46 230 214 / .18); }
/* a problem row reads as text; it lights up when pointed at */
/* a problem row reads as text; the whole row is the link (a finger-sized target) and lights up when pointed at */
.row.ri { position: relative; }
.row.ri a { color: var(--fg); text-decoration: none; transition: color .15s; }
.row.ri a::after { content: ""; position: absolute; inset: 0; }
.row.ri:has(a):hover { background: rgb(46 230 214 / .04); }
.row.ri a:hover, .row.ri a:focus-visible { color: var(--acc); text-decoration: underline; }
.row.ri a:focus-visible { outline: none; }
.row.ri:has(a:focus-visible) { box-shadow: inset 0 0 0 2px var(--acc); }
.row.sel .row-t a { color: var(--fg); text-decoration: none; }
/* USSD on a wide screen: the saved list on the left, the dictionary and the run form on the right */
@media (min-width: 900px) {
  .secs.ussd { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
  .secs.ussd > .sec:first-child { grid-row: span 2; }
  .secs.ussd > .sec.wide { grid-column: 1 / -1; }
}
.row-main { display: grid; gap: 6px; min-width: 0; }
.row-tl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.row-t { font-size: 15px; font-weight: 600; color: var(--fg); }
.row-t a, a.row-t { color: inherit; text-decoration: none; }
.row-t a:hover, .row-t a:focus-visible, a.row-t:hover, a.row-t:focus-visible { color: var(--acc); }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; font-size: 13px; }
.meta div { display: flex; flex-wrap: wrap; column-gap: 6px; align-items: center; }
.meta dt { color: var(--muted); }
.meta dd { margin: 0; font-size: 13px; }

/* tables: rows inside the tile on a computer, stacked on a phone */
.tblw { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; background: rgb(178 236 230 / .02); }
.tbl tbody tr { transition: background-color .3s var(--ease); }
@media (hover: hover) { .tbl tbody tr:hover { background: rgb(178 236 230 / .025); } }
.tbl td { font-variant-numeric: tabular-nums; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--pad); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--pad); }
.tbl .t { font-weight: 600; }
.tbl .win { margin-left: 6px; font-size: 12px; font-weight: 400; color: var(--muted); } /* the COM name, as Windows shows it */
.tbl .check { min-height: 36px; }
.tbl tr.dim { opacity: .55; }
.tbl.stale td { color: var(--muted); }
.tbl.stale .st { filter: grayscale(1); }
.inline { display: flex; gap: 8px; align-items: center; margin: 0; }
.inline .in { width: auto; }
.pst { display: none; }

/* forms */
.form { display: flex; flex-direction: column; gap: 18px; max-width: 560px; margin: 0; }
.form > .btn { align-self: flex-start; }
.field { display: grid; gap: 8px; min-width: 0; }
.field > label, .lbl { font-size: 13px; font-weight: 500; color: var(--muted); }
.in { width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 15px; color: var(--fg); background: var(--s2);
  border: 1px solid var(--line); border-radius: var(--r); outline: 3px solid transparent; outline-offset: 0;
  transition: border-color .18s, outline-color .18s, background-color .18s; }
.in::placeholder { color: var(--ph); }
.in:hover { border-color: var(--line-strong); }
.in:focus { outline-color: rgb(46 230 214 / .18); border-color: rgb(46 230 214 / .6); background: var(--s3); }
input.in[type=date], input.in[type=time] { font-variant-numeric: tabular-nums; }
input.in[type=file] { padding: 8px; }
input.in[type=file]::file-selector-button { margin-right: 12px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--s3); color: var(--fg); font: inherit; font-size: 13px; cursor: pointer; }
input[type=search] { -webkit-appearance: none; appearance: none; }
select.in { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background: url(chev.svg) right 14px center / 16px no-repeat, var(--s2); }
select.in:focus { background: url(chev.svg) right 14px center / 16px no-repeat, var(--s3); }
textarea.in { min-height: 112px; resize: vertical; line-height: 1.5; }
.check { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; }
input[type=checkbox], input[type=radio] { -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer;
  border: 1.5px solid rgb(178 236 230 / .28); border-radius: 6px; background: var(--s2); vertical-align: middle;
  transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease); }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]:hover, input[type=radio]:hover { border-color: rgb(46 230 214 / .6); }
input[type=checkbox]:checked { border-color: transparent; background: url(cek.svg) center / 14px no-repeat, var(--grad); box-shadow: 0 0 12px -2px rgb(46 230 214 / .55); }
input[type=radio]:checked { border-color: var(--acc); background: radial-gradient(circle, var(--acc) 0 4.5px, transparent 5px), var(--s2); box-shadow: 0 0 12px -3px rgb(46 230 214 / .55); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .4; cursor: not-allowed; }
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; }
legend { font-size: 13px; font-weight: 500; color: var(--muted); padding: 0; margin-bottom: 8px; }
.opts { display: grid; gap: 10px; }
@media (min-width: 720px) { .opts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opt-card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--s2); cursor: pointer;
  transition: border-color .2s, box-shadow .25s var(--ease), background-color .2s, transform .14s var(--ease); }
.opt-card:hover { border-color: var(--line-strong); }
.opt-card:active { transform: scale(.99); }
.opt-card:has(input:checked) { border-color: rgb(46 230 214 / .6); background: rgb(46 230 214 / .06); box-shadow: 0 0 0 3px rgb(46 230 214 / .10); }
.opt-card > input { margin-top: 1px; }
.opt-card b { display: block; font-weight: 600; }
.opt-card small { display: block; color: var(--muted); font-size: 13px; }
.opt-card > span { min-width: 0; flex: 1; }
.addlic { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 0; }
.addlic .field { flex: 1 1 150px; }
.sep { margin: 4px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
details > summary { cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.more > summary { list-style: none; color: var(--acc-ink); font-size: 14px; font-weight: 500; min-height: 44px; display: flex; align-items: center; gap: 6px; }
.more > summary .ic { transition: transform .3s var(--ease); }
.more[open] > summary .ic { transform: rotate(180deg); }
/* a disclosure opens to its height instead of jumping (browsers with ::details-content) */
details::details-content { block-size: 0; opacity: 0; overflow: clip; overflow-clip-margin: 6px;
  transition: block-size .35s var(--ease), opacity .25s, content-visibility .35s allow-discrete; }
details[open]::details-content { block-size: auto; opacity: 1; }
.more > div { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.more legend { margin-bottom: 4px; }
.reveal > summary { list-style: none; display: inline-flex; }
.reveal[open] > summary { display: none; }
.submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 8px; }
.submit .sum { margin-right: auto; color: var(--muted); font-size: 14px; }
.submit .sum b { color: var(--fg); font-weight: 600; font-variant-numeric: tabular-nums; } /* "12 nomor": a phrase, so not mono */

/* sign-in and other pages without a session: logo, title, one centred spotlit tile */
.lg { width: 100%; max-width: 440px; margin: 0 auto; padding: 72px 16px 48px; display: flex; flex-direction: column; gap: 20px; }
.lg .brand { align-self: flex-start; }
.lg-card { position: relative; display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid transparent; border-radius: var(--rt);
  background: radial-gradient(500px 180px at 20% 0%, rgb(46 230 214 / .10), transparent 70%) padding-box, linear-gradient(var(--surface), var(--surface)) padding-box,
  conic-gradient(from var(--a), rgb(255 255 255 / .05), rgb(46 230 214 / .62) 9%, rgb(124 242 154 / .32) 17%, rgb(255 255 255 / .06) 30%, rgb(255 255 255 / .14) 62%, rgb(255 255 255 / .05)) border-box; box-shadow: var(--tray); }
.lg-card .form { max-width: none; }
.lg-card .btn.pri { width: 100%; }
.lg-card .secs, .lg-card .sec { gap: 16px; padding: 0; border: 0; background: none; }

/* laptops and ports */
.sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; vertical-align: -3px; }
.sig i { width: 4px; background: rgb(255 255 255 / .12); border-radius: 1px; }
.sig i:nth-child(1) { height: 30%; } .sig i:nth-child(2) { height: 55%; } .sig i:nth-child(3) { height: 78%; } .sig i:nth-child(4) { height: 100%; }
.sig.s1 i:nth-child(-n+1), .sig.s2 i:nth-child(-n+2), .sig.s3 i:nth-child(-n+3), .sig.s4 i:nth-child(-n+4) { background: var(--acc); box-shadow: 0 0 6px rgb(46 230 214 / .45); }
.sig.s1 i:nth-child(1) { background: var(--warn); box-shadow: none; }
.bigcode { font-family: var(--mono); font-size: 44px; font-weight: 600; letter-spacing: .08em; text-align: center; padding: 18px 0; border: 1px solid rgb(46 230 214 / .3); border-radius: var(--r);
  background: rgb(46 230 214 / .07); color: var(--acc); text-shadow: 0 0 18px rgb(46 230 214 / .45); }

/* campaign builder: each step a tile, "1 Penerima" in its header */
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; max-width: 780px; }
.steps + .submit { position: sticky; bottom: 0; z-index: 5; max-width: 780px; margin-top: 0; padding: 14px 0 max(14px, env(safe-area-inset-bottom));
  background: rgb(7 8 11 / .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
.step { min-width: 0; border: 1px solid transparent; border-radius: var(--rt); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--edge) border-box; box-shadow: inset 0 1px 0 rgb(255 255 255 / .045); }
.step-h { display: flex; align-items: center; gap: 12px; padding: 16px var(--pad); }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--acc-soft); box-shadow: inset 0 0 0 1px rgb(46 230 214 / .3); font-size: 13.5px; font-weight: 600; color: var(--acc); font-variant-numeric: tabular-nums; }
.step-b { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: var(--pad); border-top: 1px solid var(--line); }
.step.off { background: none; border: 1px dashed var(--line-strong); box-shadow: none; }
.step.off .step-n { background: rgb(255 255 255 / .05); color: var(--muted); }
.step.off h2 { color: var(--muted); }
.file { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--r); background: var(--s2); }
.file > .ic { width: 26px; height: 26px; color: var(--acc); }
.file > div { flex: 1; min-width: 150px; }
.file b { display: block; overflow-wrap: anywhere; }
.file > details[open] { flex-basis: 100%; }
.ganti { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.ganti .field { align-self: stretch; }
.mini-w { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); }
.mini { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.mini th, .mini td { padding: 10px 16px; text-align: left; white-space: nowrap; }
.mini th { font-size: 12.5px; font-weight: 500; color: var(--muted); background: rgb(255 255 255 / .02); }
.mini td { border-top: 1px solid var(--line); }
.composer { display: grid; gap: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chips > span { color: var(--muted); font-size: 13px; }
.chip { display: inline-flex; gap: 6px; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px;
  font: inherit; font-size: 14px; color: var(--fg); background: var(--s2); cursor: pointer; transition: border-color .18s, background-color .18s, transform .14s var(--ease); }
.chip:hover { border-color: rgb(46 230 214 / .5); background: var(--s3); }
.chip:active { transform: scale(.96); }
.chip b { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--acc); }
.words { display: flex; flex-wrap: wrap; gap: 6px; }
.w { position: relative; display: inline-flex; cursor: pointer; }
.w span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--s2);
  transition: border-color .18s, background-color .18s, color .18s, transform .14s var(--ease); }
.w:active span { transform: scale(.95); }
.w input[type=checkbox] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.w input:checked + span { border-color: rgb(46 230 214 / .6); color: var(--acc); background: var(--acc-soft); font-weight: 500; }
.w input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
.msg-f { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.ex { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--s2); }
.ex li { padding: 12px 16px; font-size: 14px; overflow-wrap: anywhere; white-space: pre-wrap; }
.ex li + li { border-top: 1px solid var(--line); }
.inrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.inrow .in { width: auto; flex: 1 1 140px; }
.inrow input[type=date] { flex: 1 1 170px; } /* "dd/mm/yyyy" and its calendar need the room; on a phone it takes its own row */

/* campaign progress: a glowing gradient bar, the numbers in mono under it */
.prog { display: grid; gap: 8px; }
.prog progress { appearance: none; -webkit-appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / .08); }
.prog progress::-webkit-progress-bar { background: rgb(255 255 255 / .08); }
.prog progress::-webkit-progress-value { background-image: var(--grad); border-radius: 999px; }
.prog progress::-moz-progress-bar { background-image: var(--grad); border-radius: 999px; }
.prog { filter: drop-shadow(0 0 6px rgb(46 230 214 / .22)); }
.nums { display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 13.5px; color: var(--muted); }
.nums b { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; }

/* USSD and Kotak Masuk */
.code { font-weight: 500; }
.code::placeholder { font-family: var(--sans); font-weight: 400; }
.rules { display: grid; gap: 8px; }
.rule { display: grid; grid-template-columns: minmax(0, 1fr) 18px 7.5rem; gap: 8px; align-items: center; }
.rule.head { color: var(--muted); font-size: 13px; font-weight: 500; }
.rule .ic { color: var(--muted); justify-self: center; }
.tip > summary { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; font-weight: 600; color: var(--acc); list-style: none;
  transition: border-color .18s, background-color .18s; }
.tip[open] > summary, .tip > summary:hover { border-color: rgb(46 230 214 / .6); background: var(--acc-soft); }
.tip > p { margin-top: 8px; color: var(--muted); font-size: 14px; }
.reveal-del > summary { list-style: none; padding: 6px 0; }
.reveal-del[open] > summary { display: none; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.log li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 10px; }
.log li > span:first-child { color: var(--muted); }
.pre { white-space: pre-line; overflow-wrap: anywhere; }
.port-pick { margin-top: 8px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filters .srch { flex: 1 1 200px; }
.filters select.in { width: auto; flex: 1 1 140px; }
.when { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--fg); font-size: 15px; }
.secs.inbox .sec.det { order: -1; } /* the open message sits above the list */
.reply { display: grid; gap: 12px; }
.bub { display: grid; gap: 6px; justify-items: start; max-width: min(460px, 88%); padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px 16px 16px 6px; background: var(--s2); overflow-wrap: anywhere; }
.bub p { white-space: pre-wrap; }
.bub time { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.bub.me { justify-self: end; border-radius: 16px 16px 6px 16px; background: rgb(46 230 214 / .10); border-color: rgb(46 230 214 / .28); }

/* phone: the command field gets its own row, the track scrolls sideways, tables stack */
@media (max-width: 640px) {
  :root { --pad: 18px; }
  body { font-size: 15.5px; }
  .top { padding-top: 10px; }
  .isl { padding: 8px; border-radius: 22px; }
  .cmd { order: 3; flex: 1 1 100%; max-width: none; margin-left: 0; }
  .main { padding-top: 28px; }
  .kbd { display: none; }
  .in, .cmd input { font-size: 16px; }
  .nav { width: 100%; flex-basis: 100%; }
  .row { grid-template-columns: minmax(0, 1fr); }
  .row.ri { grid-template-columns: 36px minmax(0, 1fr); }
  .lg { padding-top: 40px; }
  .lg-card { padding: 24px 20px; }
  .bigcode { font-size: 36px; }
  .cta { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 14px 16px; font-size: 17px; }

  .tbl thead { display: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl tr { padding: 10px var(--pad); border-bottom: 1px solid var(--line); }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td, .tbl td:first-child, .tbl td:last-child { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 0; border: 0; }
  .tbl td::before { content: attr(data-l); color: var(--muted); font-size: 13px; }
  .tbl td[data-l=""] { grid-template-columns: minmax(0, 1fr); }
  .tbl td[data-l=""]::before { display: none; }
  .tbl td:first-child { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; }
  .tbl td.stc { display: none; }
  .tbl tr.held td:not(:first-child) { display: none; } /* held by another program: nothing to read but its status */
  .tbl td > .btn { justify-self: start; }
  .inline .in { flex: 1 1 0; }
  .pst { display: inline; }

  .ph > .btn.pri { flex: 1 1 100%; }
  .submit { row-gap: 10px; }
  .submit .acts { flex: 1 1 100%; flex-wrap: nowrap; }
  .submit .acts .btn.pri { flex: 1; }
  .rule { grid-template-columns: minmax(0, 1fr) 6.5rem; }
  .rule > .ic, .rule .go { display: none; }
}

/* a tablet or computer keeps the bar and the menu in reach; on a phone they scroll away to leave room */
@media (min-width: 641px) {
  .top { position: sticky; top: 0; z-index: 20; }
  html { scroll-padding-top: 160px; }
}
@media (min-width: 1200px) { html { scroll-padding-top: 110px; } }
html:has(.steps + .submit) { scroll-padding-bottom: 96px; }
@media (max-width: 380px) { .nm { display: none; } }
@media (pointer: coarse) { .chip, .w span { min-height: 44px; } }

/* motion. A night console that comes alive where it matters: a page arrives with a short rise (cross-document view
   transition) while a line of light runs from the old menu tab round the new one, the spotlit tile's edge carries the
   light around once, a running campaign's bar carries a slow sweep and its counters roll to the new numbers on each refresh
   (gerak.js), lists arrive as lists, every press answers at once. Entrances run only under html.m-in, a fresh visit
   (gerak.js): a page that reloads itself to follow a campaign stays still. */
@view-transition { navigation: auto; types: halaman; }
.top { view-transition-name: top; }
/* the top bar is the same on every page: the new one shows at once */
::view-transition-old(top) { display: none; }
::view-transition-new(top) { animation: none; }
/* the menu's line of light (gerak.js): a tab opened from the menu stays unlit until the line reaches it, and its
   pill's edge stays quiet until the line has run round it; the line is a bright head with a fading tail, the old
   tab's pill a ghost that fades as the line leaves it */
.m-tab .ink { opacity: 0; }
.m-tab .nav a[aria-current] { color: var(--muted); }
.m-run .ink::after { opacity: 0; }
.trail { position: absolute; left: 0; top: 0; z-index: -1; overflow: visible; pointer-events: none; }
.trail path { fill: none; stroke-linecap: round; }
.trail .tail { stroke: #7cf29a; stroke-width: 1.5; opacity: .45; }
.trail .mid { stroke: var(--acc); stroke-width: 1.75; opacity: .85; }
.trail .head { stroke: #e6fffb; stroke-width: 2.25; filter: drop-shadow(0 0 4px var(--acc)); }
.trail .ghost { fill: var(--s2); stroke: rgb(46 230 214 / .45); }
html:active-view-transition-type(halaman)::view-transition-old(root) { animation: .16s ease-in both m-out; }
html:active-view-transition-type(halaman)::view-transition-new(root) { animation: .42s cubic-bezier(.16, 1, .3, 1) both m-rise; }

/* first arrival without a view transition (a typed address, or a browser without them) */
.m-in:not(.m-vt) :is(.main, .lg) > * { animation: m-rise .5s var(--ease) both; }
.m-in:not(.m-vt) :is(.main, .lg) > :nth-child(2) { animation-delay: .05s; }
.m-in:not(.m-vt) :is(.main, .lg) > :nth-child(n+3) { animation-delay: .1s; }
.m-in:not(.m-vt) .logo::after { animation: m-logo .8s var(--ease) both .1s; }
/* the light runs once around the spotlit tile's edge, then rests */
.m-in :is(.spot, .lg-card) { animation: l-sweep 2.4s var(--ease) .3s both; }


/* lists arrive one item after another, the whole list within a quarter second */
.m-in :is(.rows, tbody, .steps, .ex, .reply, .log) > * { animation: m-row .45s var(--ease) both; animation-delay: calc(var(--k, 0) * 32ms); }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(2) { --k: 1; }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(3) { --k: 2; }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(4) { --k: 3; }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(5) { --k: 4; }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(6) { --k: 5; }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(7) { --k: 6; }
:is(.rows, tbody, .steps, .ex, .reply, .log) > :nth-child(n+8) { --k: 7; }

/* a message unrolls from its top edge; the builder's check results do so each time they appear */
.m-in .note, #risiko, #contoh-w, #yakin-w { animation: m-note .45s var(--ease) both; }
/* "Semua aman": the check draws itself */
.m-in .note.ok > .ic { stroke-dasharray: 60; animation: m-draw 1s var(--ease) both .15s; }

/* live: a running campaign's icon breathes and its bar carries a slow sweep; a counter that moved flashes cyan */
.st-run .ic { animation: m-breathe 2.2s ease-in-out infinite; }
:is(.row, .sec):has(.st-run) .prog progress::-webkit-progress-value {
  background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent), var(--grad); background-size: 45% 100%, 100% 100%; background-repeat: no-repeat;
  animation: m-sweep 2s cubic-bezier(.45, 0, .55, 1) infinite; }
:is(.row, .sec):has(.st-run) .prog progress::-moz-progress-bar {
  background-image: linear-gradient(90deg, transparent, rgb(255 255 255 / .75), transparent), var(--grad); background-size: 45% 100%, 100% 100%; background-repeat: no-repeat;
  animation: m-sweep 2s cubic-bezier(.45, 0, .55, 1) infinite; }
.nums b.roll { animation: m-tick 1.4s ease-out; }

/* signal bars rise; a new connect code comes into focus */
.m-in .sig i { transform-origin: bottom; animation: m-bar .6s var(--ease) both; }
.m-in .sig i:nth-child(2) { animation-delay: .06s; }
.m-in .sig i:nth-child(3) { animation-delay: .12s; }
.m-in .sig i:nth-child(4) { animation-delay: .18s; }
.m-in .bigcode { animation: m-code .9s var(--ease) both .1s; }

@keyframes m-out { to { opacity: 0; } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes m-row { from { opacity: 0; transform: translateY(8px); } }
@keyframes m-note { from { opacity: 0; clip-path: inset(0 0 100% 0 round 12px); } to { opacity: 1; clip-path: inset(0 0 0 0 round 12px); } }
@keyframes m-draw { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
@keyframes m-logo { from { transform: rotate(-135deg) scale(0); } }
@keyframes m-breathe { 50% { opacity: .35; } }
@keyframes m-sweep { from { background-position: -100% 0, 0 0; } to { background-position: 200% 0, 0 0; } }
@keyframes m-tick { from { color: var(--acc); text-shadow: 0 0 10px rgb(46 230 214 / .6); } }
@keyframes m-bar { from { transform: scaleY(.15); } }
@keyframes m-code { from { opacity: 0; letter-spacing: .45em; filter: blur(8px); } }
@keyframes m-fly { 30% { transform: translate(-2px, 2px); } to { transform: translate(22px, -22px) scale(.5); opacity: 0; } }
@keyframes l-sweep { from { --a: 140deg; } to { --a: 500deg; } }

/* reduced motion: nothing travels, loops stop; fades and colour changes still say what changed */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation-duration: 0s; }
  html:active-view-transition-type(halaman)::view-transition-old(root) { animation: .15s both m-out; }
  html:active-view-transition-type(halaman)::view-transition-new(root) { animation: .2s both m-fade; }
  #risiko, #contoh-w, #yakin-w { animation-name: m-fade; }
  .m-in :is(.spot, .lg-card) { animation: none; }
  .st-run .ic, .btn.go.pergi .ic { animation: none; }
  :is(.row, .sec):has(.st-run) .prog progress::-webkit-progress-value { animation: none; background-image: var(--grad); }
  :is(.row, .sec):has(.st-run) .prog progress::-moz-progress-bar { animation: none; background-image: var(--grad); }
  .btn:active, .opt-card:active, .chip:active, .w:active span, .cta:active, .cta:hover { transform: none; }
  .nav { scroll-behavior: auto; }
  details::details-content { transition-property: opacity, content-visibility; }
}