/* ───────────────────────────────────────────────────────────────────────────
   Aurora Bloom UI — gabungan tiga design system milik USER
     · KOMPONEN  dari Sakura Bloom  (kaca candy, KPI berikon + orb, gradient bloom)
     · LATAR     dari Pastel Glass  (.app-bg: aurora 3 blob + grain, mesh, solid)
     · ANIMASI   dari FrostedGlass  (reveal, tilt, kilau pointer, ripple, pegas)

   Kontrol di <html>:
     data-theme="dark|light"            tema
     data-bg="aurora|mesh|solid"        gaya latar (bawaan aurora)
     data-accent="sakura|ice|sky|mint|peach|rose"  campuran gradient ungu (bawaan sakura)
     data-ab-motion="full|auto|reduced" mode gerak (pakai "full" untuk proyek USER)
   Warna per kartu: style="--accent: var(--mint)" (bawaan lavender).
   Font: Plus Jakarta Sans (400–800) + JetBrains Mono (400–600).
   ─────────────────────────────────────────────────────────────────────────── */

/* ───── Section: Token tema dark (default) ───── */
:root {
  color-scheme: dark;

  /* Latar — nilai Pastel Glass */
  --bg: #0d0d18;
  --bg-2: #14142a;
  --aurora-a: #6b6bd6;
  --aurora-b: #c77fb3;
  --aurora-c: #4f8fc9;
  --aurora-opacity: 0.4;

  /* Teks & kaca — nilai Sakura Bloom */
  --text: #f1ecfa;
  --muted: #a69dbd;
  --faint: #6f6787;
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.11);
  --rim: rgba(255, 255, 255, 0.16);
  --shadow: rgba(4, 2, 12, 0.45);
  --track: rgba(255, 255, 255, 0.08);
  --grid: rgba(255, 255, 255, 0.06);
  --well: rgba(10, 8, 18, 0.35);
  --pop: #1f1a30;                 /* panel melayang yang pekat (menu, select, toast) */

  /* Palet Sakura Bloom */
  --lav: #c6b6ff;
  --lav-deep: #9d86f5;
  --sakura: #ffb3d1;
  --sakura-deep: #f27fb0;
  --mint: #9eefc8;
  --amber: #ffd59a;
  --rose: #ff9fb0;
  --sky: #a9d4ff;
  --bloom: linear-gradient(90deg, var(--lav), var(--mix));         /* --mix diatur preset aksen */
  --bloom-diag: linear-gradient(140deg, var(--lav), var(--mix));
  --on-bloom: #1d1233;            /* teks di atas gradient bloom */

  --radius-panel: 22px;
  --radius-card: 16px;
  --radius-ctl: 12px;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Gerak — token FrostedGlass */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 160ms;
  --t: 320ms;
  --t-slow: 700ms;
}

/* ───── Section: Token tema light ───── */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f4fa;
  --bg-2: #e6eaf5;
  --aurora-a: #b0b0ff;
  --aurora-b: #f6ceeb;
  --aurora-c: #a9d8ff;
  --aurora-opacity: 0.55;

  --text: #2a2140;
  --muted: #6c6385;
  --faint: #9d95b3;
  --glass: rgba(255, 255, 255, 0.52);
  --glass-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.85);
  --rim: rgba(255, 255, 255, 0.95);
  --shadow: rgba(110, 86, 160, 0.16);
  --track: rgba(80, 60, 130, 0.1);
  --grid: rgba(80, 60, 130, 0.08);
  --well: rgba(255, 255, 255, 0.45);
  --pop: #ffffff;

  --lav: #7b63e0;
  --lav-deep: #6a50d6;
  --sakura: #d9558e;
  --sakura-deep: #c63f7a;
  --mint: #1f9a68;
  --amber: #b9741a;
  --rose: #d23f5c;
  --sky: #2f7fd0;
  --on-bloom: #ffffff;
}

/* ───── Section: Preset aksen ─────
   Gradient bloom selalu berangkat dari UNGU (--lav) menuju warna campuran (--mix).
   Pilih lewat <html data-accent="...">; tanpa atribut = sakura (ungu → pink).
   Tiap preset punya nilai dark (pastel) dan light (digelapkan agar tetap terbaca). */
:root { --mix: var(--sakura); --mix-deep: var(--sakura-deep); }
:root[data-accent="ice"]   { --mix: #dce8fa; --mix-deep: #a9c8f5; }   /* ungu → biru es #DCE8FA */
:root[data-accent="sky"]   { --mix: #a9d4ff; --mix-deep: #6fb2f5; }   /* ungu → biru langit    */
:root[data-accent="mint"]  { --mix: #9eefc8; --mix-deep: #5fd6a4; }   /* ungu → mint           */
:root[data-accent="peach"] { --mix: #ffd3b0; --mix-deep: #f5a56a; }   /* ungu → persik         */
:root[data-accent="rose"]  { --mix: #ff9fb0; --mix-deep: #f06a85; }   /* ungu → mawar          */
:root[data-theme="light"][data-accent="ice"]   { --mix: #5b93dc; --mix-deep: #3f78c8; }
:root[data-theme="light"][data-accent="sky"]   { --mix: #2f8fd8; --mix-deep: #2272b8; }
:root[data-theme="light"][data-accent="mint"]  { --mix: #1f9a68; --mix-deep: #17805a; }
:root[data-theme="light"][data-accent="peach"] { --mix: #c97636; --mix-deep: #b0601f; }
:root[data-theme="light"][data-accent="rose"]  { --mix: #d23f5c; --mix-deep: #b82f4b; }

/* Pemilih aksen: deretan titik gradient. <button class="ab-accent" data-ab-accent="ice"> */
.ab-accents { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
.ab-accent {
  --sw: #ffb3d1;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: linear-gradient(140deg, #9d86f5 15%, var(--sw) 85%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 2px 6px -2px var(--shadow);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out);
}
.ab-accent[data-ab-accent="ice"] { --sw: #dce8fa; } .ab-accent[data-ab-accent="sky"] { --sw: #a9d4ff; }
.ab-accent[data-ab-accent="mint"] { --sw: #9eefc8; } .ab-accent[data-ab-accent="peach"] { --sw: #ffd3b0; }
.ab-accent[data-ab-accent="rose"] { --sw: #ff9fb0; }
.ab-accent:hover { transform: scale(1.2); }
.ab-accent:active { transform: scale(.9); }
.ab-accent[aria-pressed="true"] { transform: scale(1.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 2px var(--bg), 0 0 0 4px var(--lav), 0 0 12px var(--mix); }

/* ───── Section: Dasar ───── */
* { box-sizing: border-box; }
html { background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0; min-height: 100vh; background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: 14px; line-height: 1.5;
  transition: color 0.4s ease;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); }
.tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--lav); outline-offset: 2px; border-radius: 6px; }
.wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 28px 24px 48px; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ───── Section: Latar (dari Pastel Glass) — aurora / mesh / solid + grain ─────
   Kaca butuh sesuatu berwarna di belakangnya; tanpa ini blur tak terlihat. */
.app-bg { position: fixed; inset: 0; z-index: -10; overflow: hidden; background: var(--bg); pointer-events: none; transition: background 0.4s ease; }
.solid-layer { position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg-2), var(--bg) 40%); }
.aurora-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: var(--aurora-opacity); will-change: transform; }
.aurora-a { width: 58vmax; height: 58vmax; left: -14vmax; top: -22vmax; background: radial-gradient(circle, var(--aurora-a), transparent 65%); animation: drift-a 52s ease-in-out infinite alternate; }
.aurora-b { width: 50vmax; height: 50vmax; right: -16vmax; top: 8vmax; background: radial-gradient(circle, var(--aurora-b), transparent 65%); animation: drift-b 44s ease-in-out infinite alternate; }
.aurora-c { width: 46vmax; height: 46vmax; left: 18vmax; bottom: -26vmax; background: radial-gradient(circle, var(--aurora-c), transparent 65%); animation: drift-c 58s ease-in-out infinite alternate; }
@keyframes drift-a { to { transform: translate3d(12vmax, 8vmax, 0) scale(1.12); } }
@keyframes drift-b { to { transform: translate3d(-10vmax, 10vmax, 0) scale(0.92); } }
@keyframes drift-c { to { transform: translate3d(8vmax, -9vmax, 0) scale(1.08); } }
.mesh-layer {
  position: absolute; inset: 0; opacity: calc(var(--aurora-opacity) * 1.6); display: none;
  background:
    radial-gradient(60% 50% at 8% 6%, color-mix(in oklab, var(--aurora-a) 70%, transparent), transparent 70%),
    radial-gradient(50% 45% at 92% 22%, color-mix(in oklab, var(--aurora-b) 60%, transparent), transparent 70%),
    radial-gradient(55% 50% at 60% 100%, color-mix(in oklab, var(--aurora-c) 55%, transparent), transparent 70%);
}
.grain {
  position: absolute; inset: -50%; opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
[data-theme="light"] .grain { opacity: 0.06; mix-blend-mode: multiply; }
/* Pilih gaya latar lewat <html data-bg="..."> */
[data-bg="mesh"] .aurora-blob, [data-bg="solid"] .aurora-blob { display: none; }
[data-bg="mesh"] .mesh-layer { display: block; }

/* ───── Section: Kaca (dari Sakura Bloom) ───── */
.glass {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-panel);
  box-shadow: inset 0 1px 0 var(--rim), 0 12px 36px -8px var(--shadow);
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.glass:has(.ab-menu.is-open), .glass:has(.ab-select.is-open) { z-index: 30; }

/* Tombol ikon persegi-bulat & pil "Live" */
.icon-btn {
  position: relative; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; cursor: pointer;
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--text);
  box-shadow: inset 0 1px 0 var(--rim);
  transition: transform var(--t) var(--ease-spring), background 0.3s ease, box-shadow var(--t) var(--ease-out);
}
.icon-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--rim), 0 8px 18px -8px var(--shadow); }
.icon-btn:active { transform: scale(.93); transition-duration: 90ms; }
.icon-btn svg { width: 19px; height: 19px; }
.live {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px;
  background: var(--glass-strong); border: 1px solid var(--glass-border); color: var(--muted); font-size: 12.5px;
}
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, var(--mint)); animation: bloom-pulse 2s infinite; }
@keyframes bloom-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--mint)) 70%, transparent); }
  100% { box-shadow: 0 0 0 9px transparent; }
}

/* Tile logo gradient (brand) */
.logo-tile {
  width: 44px; height: 44px; border-radius: 14px; flex: none; display: grid; place-items: center;
  background: var(--bloom-diag); color: var(--on-bloom);
  box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--mix-deep) 60%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ───── Section: Kartu KPI (ikon + orb glow pojok) ───── */
.kpi { padding: 18px 18px 16px; overflow: hidden; min-height: 150px; display: flex; flex-direction: column; }
.kpi::after {
  content: ""; position: absolute; width: 140px; height: 140px; right: -50px; top: -60px; border-radius: 50%;
  background: var(--accent, var(--lav)); opacity: 0.13; filter: blur(30px); pointer-events: none;
  transition: opacity var(--t), transform var(--t-slow) var(--ease-out);
}
.kpi:hover::after { opacity: 0.24; transform: scale(1.25); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: 0.02em; }
.kpi-icon {
  width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--lav)) 18%, transparent); color: var(--accent, var(--lav));
  transition: transform var(--t-slow) var(--ease-spring);
}
.kpi-icon svg { width: 16px; height: 16px; }
.kpi:hover .kpi-icon { transform: rotate(-8deg) scale(1.15); }
.kpi-value { font-size: 32px; font-weight: 800; letter-spacing: -0.03em; margin-top: 10px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.kpi-foot { margin-top: auto; padding-top: 10px; color: var(--muted); font-size: 12.5px; }
.status-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 14px var(--mint); display: inline-block; }

/* Bar & ring progres bergradient. Bar: <div class="bar"><span style="width:30%"></span></div>
   Ring: <circle class="fg" pathLength="100"> + style="--v:65" pada <svg class="ring"> */
.bar { height: 8px; border-radius: 99px; background: var(--track); overflow: hidden; margin-top: 12px; }
.bar > span { position: relative; display: block; height: 100%; border-radius: inherit; overflow: hidden; background: var(--bloom); transition: width 1.4s var(--ease-out); }
.bar > span::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.6) 50%, transparent 70%);
  animation: ab-shimmer 2.4s var(--ease-soft) infinite;
}
.ring { --v: 60; width: 62px; height: 62px; flex: none; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring .bg { stroke: var(--track); }
.ring .fg { stroke: url(#bloomGrad); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v)); transition: stroke-dashoffset 1.8s var(--ease-out); }

/* Angka hero bergradient (hemat: 1 per layar/kartu) */
.bloom-text {
  background: linear-gradient(95deg, var(--lav-deep), var(--mix-deep));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ───── Section: Kartu konten & kontrol (dari Sakura Bloom) ───── */
.card { padding: 18px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.count { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: color-mix(in srgb, var(--lav) 20%, transparent); color: var(--lav); }

/* Segmented: wadah track; yang aktif berupa "kaca kecil" yang MELUNCUR (indikator .ab-seg__ind) */
.seg { position: relative; display: inline-flex; padding: 3px; border-radius: 12px; background: var(--track); gap: 2px; }
.seg button {
  position: relative; z-index: 1; border: 0; background: none; color: var(--muted); font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 9px; cursor: pointer; transition: color 0.2s, transform var(--t) var(--ease-spring);
}
.seg button:active { transform: scale(.94); }
.seg button.is-active, .seg button[aria-pressed="true"] { color: var(--text); }
.seg:not([data-ab-seg]) button[aria-pressed="true"] { background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--rim), 0 2px 8px var(--shadow); }
.ab-seg__ind {
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 9px;
  background: var(--glass-strong); box-shadow: inset 0 1px 0 var(--rim), 0 2px 8px var(--shadow);
}
.ab-seg__ind.is-ready { transition: transform .55s var(--ease-spring), width .45s var(--ease-out), height .45s var(--ease-out); }
.ab-panels > [data-ab-panel] { display: none; }
.ab-panels > [data-ab-panel].is-active { display: block; animation: ab-rise .5s var(--ease-out) both; }

.chip {
  position: relative; border: 1px solid var(--glass-border); background: var(--glass-strong); color: var(--text);
  font-size: 12.5px; font-weight: 600; padding: 6px 12px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out);
}
.chip:hover { transform: translateY(-1px) scale(1.03); box-shadow: 0 6px 14px -8px var(--shadow); }
.chip:active { transform: scale(.95); }
.tag { font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; letter-spacing: 0.04em; background: color-mix(in srgb, var(--accent, var(--sakura)) 22%, transparent); color: var(--accent, var(--sakura)); }

.search {
  display: flex; align-items: center; gap: 8px; padding: 0 12px; height: 36px; border-radius: var(--radius-ctl);
  background: var(--track); color: var(--muted); min-width: 0;
  transition: box-shadow var(--t) var(--ease-out), color var(--t);
}
.search:focus-within { color: var(--text); box-shadow: 0 0 0 1.5px var(--lav), 0 0 0 5px color-mix(in srgb, var(--lav) 20%, transparent); }
.search input { border: 0; background: none; outline: none; width: 100%; min-width: 0; }
.search input::placeholder { color: var(--faint); }

/* Baris list: hover menjadi kaca + bergeser sedikit */
.row-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; transition: background 0.2s, transform var(--t) var(--ease-spring); }
.row-item:hover { background: var(--glass-strong); transform: translateX(4px); }
.avatar { width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; background: var(--bloom-diag); color: var(--on-bloom); font-size: 12px; font-weight: 800; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }

/* Area dalam (log/kode) */
.well { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.7; background: var(--well); border: 1px solid var(--glass-border); border-radius: 16px; padding: 12px 14px; overflow: auto; }
.lvl { font-weight: 600; font-size: 11px; padding: 0 6px; border-radius: 5px; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }

/* Toast/tooltip kaca */
.glass-pop {
  background: var(--glass-strong); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 8px 20px var(--shadow);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* ───── Section: Varian "kaca susu" (kartu sorotan / overlay stream) ───── */
.milk-card {
  --ink: #2f1d47; --ink-soft: #4f3a68; --ink-mute: #7a6592;
  position: relative; overflow: hidden; border-radius: 24px; padding: 18px 20px 20px; color: var(--ink);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(205, 188, 255, 0.55), transparent 58%),
    radial-gradient(110% 100% at 100% 100%, rgba(255, 186, 214, 0.6), transparent 60%),
    linear-gradient(145deg, rgba(247, 241, 255, 0.9), rgba(255, 239, 247, 0.9));
  -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(150, 110, 200, 0.22),
    0 0 0 1px rgba(70, 35, 110, 0.22), 0 18px 36px -12px rgba(38, 16, 66, 0.6), 0 4px 10px -2px rgba(38, 16, 66, 0.25);
}
.halo { position: relative; }
.halo::before {
  content: ""; position: absolute; inset: -14px -10px -18px; border-radius: 34px; z-index: -1; filter: blur(18px);
  background:
    radial-gradient(60% 70% at 18% 30%, rgba(196, 178, 255, 0.55), transparent 70%),
    radial-gradient(60% 70% at 85% 75%, rgba(255, 182, 210, 0.55), transparent 70%);
  animation: bloom-halo 3.2s ease-in-out infinite alternate;
}
@keyframes bloom-halo { from { opacity: 0.75; } to { opacity: 1; } }

/* ───── Section: Komponen pelengkap (bahasa Sakura Bloom, perilaku FrostedGlass) ─────
   Sakura Bloom tidak punya tombol aksi, field, switch, select, menu, modal, toast.
   Semuanya memakai resep yang sama: isi kaca tipis + border 1px + rim atas 1px,
   dan gradient bloom hanya untuk aksi utama / state aktif. */

/* Tombol: ripple + sheen + pegas */
.ab-btn {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-ctl); cursor: pointer; white-space: nowrap; user-select: none;
  font-size: 13.5px; font-weight: 700; color: var(--text);
  background: var(--glass-strong); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--rim), 0 4px 12px -6px var(--shadow);
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease-out), filter var(--t);
  -webkit-tap-highlight-color: transparent;
}
.ab-btn::after {                 /* sheen yang menyapu saat hover */
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.4) 50%, transparent 62%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
}
.ab-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--rim), 0 12px 22px -10px var(--shadow); filter: brightness(1.05); }
.ab-btn:hover::after { background-position: -60% 0; transition: background-position .8s var(--ease-out); }
.ab-btn:active { transform: translateY(1px) scale(.965); transition-duration: 90ms; }
.ab-btn:disabled { opacity: .5; pointer-events: none; }
.ab-btn > * { position: relative; z-index: 2; }
.ab-btn--primary {
  color: var(--on-bloom); border-color: transparent; background: var(--bloom-diag);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 8px 22px -6px color-mix(in srgb, var(--mix-deep) 60%, transparent);
}
.ab-btn--primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 14px 28px -8px color-mix(in srgb, var(--mix-deep) 70%, transparent); }
.ab-btn--ghost { background: none; border-color: var(--glass-border); box-shadow: none; }
.ab-btn--sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.ab-ripples { position: absolute !important; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1 !important; }
.ab-ripples i { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), transparent); transform: scale(0); animation: ab-ripple .75s var(--ease-out) forwards; }

/* Field: label kecil di atas, kotak track, fokus bercincin lavender */
.ab-field { display: grid; gap: 6px; min-width: 0; }
.ab-field__label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.ab-field__box {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-ctl);
  background: var(--track); color: var(--muted); border: 1px solid transparent;
  transition: box-shadow var(--t) var(--ease-out), border-color var(--t), color var(--t);
}
.ab-field__box:focus-within, .ab-select.is-open { color: var(--text); border-color: var(--lav); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lav) 20%, transparent); }
.ab-field__box > .ico { transition: transform var(--t) var(--ease-spring); }
.ab-field__box:focus-within > .ico:first-child { transform: scale(1.15) rotate(-6deg); color: var(--lav); }
.ab-field__box input, .ab-field__box textarea { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); padding: 9px 0; }
.ab-field__box textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
.ab-field__box input::placeholder, .ab-field__box textarea::placeholder { color: var(--faint); }
.ab-field__box.is-invalid { border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 20%, transparent); animation: ab-shake .4s var(--ease-soft); }

/* Select kustom: JS mengubah <select> di dalam .ab-select menjadi listbox (jangan pakai dropdown OS) */
.ab-select { cursor: pointer; }
.ab-select.is-enhanced select { position: absolute; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; }
.ab-select select { flex: 1; border: 0; outline: 0; background: none; color: var(--text); }
.ab-select__btn { flex: 1; min-width: 0; padding: 9px 0; border: 0; outline: 0; background: none; cursor: pointer; text-align: left; color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-select__value { display: inline-block; }
.ab-select__value.is-swap { animation: ab-rise .4s var(--ease-out) both; }
.ab-select__chev { transition: transform .5s var(--ease-spring); }
.ab-select.is-open .ab-select__chev { transform: rotate(180deg); }
.ab-select__panel, .ab-menu__panel {
  position: absolute; z-index: 40; padding: 6px; border-radius: 14px; cursor: default;
  background: var(--pop); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--rim), 0 18px 40px -10px var(--shadow), 0 4px 10px -4px var(--shadow);
  opacity: 0; visibility: hidden; scale: .96; translate: 0 -10px;
  transition: opacity var(--t-fast), scale var(--t) var(--ease-spring), translate var(--t) var(--ease-spring), visibility 0s var(--t);
}
.ab-select__panel { left: -1px; right: -1px; top: calc(100% + 8px); transform-origin: 50% 0; }
.ab-select.is-up .ab-select__panel { top: auto; bottom: calc(100% + 8px); translate: 0 10px; transform-origin: 50% 100%; }
.ab-select.is-open .ab-select__panel, .ab-menu.is-open .ab-menu__panel { opacity: 1; visibility: visible; scale: 1; translate: 0 0; transition-delay: 0s; }
.ab-select__list { display: grid; gap: 2px; max-height: 252px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--lav) 45%, transparent) transparent; }
.ab-select__opt, .ab-menu__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px;
  background: none; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none;
  opacity: 0; translate: 0 -6px;
  transition: background var(--t-fast), color var(--t-fast), padding var(--t) var(--ease-out), opacity var(--t), translate var(--t) var(--ease-out);
}
.ab-menu__item { justify-content: flex-start; }
.ab-select.is-open .ab-select__opt, .ab-menu.is-open .ab-menu__item { opacity: 1; translate: 0 0; transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 40ms + 50ms), calc(var(--i, 0) * 40ms + 50ms); }
.ab-select__opt.is-active, .ab-menu__item:hover { background: color-mix(in srgb, var(--lav) 16%, transparent); color: var(--text); padding-left: 16px; }
.ab-select__opt.is-selected { color: var(--text); background: color-mix(in srgb, var(--lav) 22%, transparent); }
.ab-select__opt.is-disabled { opacity: .4; cursor: not-allowed; }
.ab-select__opt svg { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--lav); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.ab-select__opt path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .35s var(--ease-out); }
.ab-select__opt.is-selected path { stroke-dashoffset: 0; }

/* Menu */
.ab-menu { position: relative; display: inline-block; }
.ab-menu__panel { top: calc(100% + 8px); right: 0; min-width: 190px; transform-origin: 100% 0; }
.ab-menu__sep { height: 1px; margin: 6px 8px; background: var(--glass-border); }

/* Switch: aktif = gradient bloom, thumb memantul */
.ab-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.ab-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ab-switch__track { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: var(--track); transition: box-shadow var(--t); }
.ab-switch__track::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bloom); opacity: 0; transition: opacity var(--t); }
.ab-switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 99px; background: #fff; box-shadow: 0 2px 6px rgba(20, 10, 50, 0.35); transition: transform .5s var(--ease-spring), width var(--t) var(--ease-out); }
.ab-switch:active .ab-switch__thumb { width: 25px; }
.ab-switch input:checked + .ab-switch__track::before { opacity: 1; }
.ab-switch input:checked + .ab-switch__track { box-shadow: 0 0 14px color-mix(in srgb, var(--mix) 50%, transparent); }
.ab-switch input:checked + .ab-switch__track .ab-switch__thumb { transform: translateX(18px); }
.ab-switch:active input:checked + .ab-switch__track .ab-switch__thumb { transform: translateX(13px); }
.ab-switch input:focus-visible + .ab-switch__track { outline: 2px solid var(--lav); outline-offset: 2px; }

/* Tooltip (bungkus tombol dengan <span data-ab-tip>, karena .ab-btn memakai ::after untuk sheen) */
[data-ab-tip] { position: relative; }
[data-ab-tip]::after {
  content: attr(data-ab-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 60; padding: 6px 10px; border-radius: 9px;
  white-space: nowrap; pointer-events: none; font: 600 12px/1.2 var(--font-sans); color: var(--text);
  background: var(--pop); border: 1px solid var(--glass-border); box-shadow: 0 8px 20px var(--shadow);
  opacity: 0; translate: -50% 6px; scale: .9; transform-origin: 50% 100%;
  transition: opacity var(--t-fast), translate var(--t) var(--ease-spring), scale var(--t) var(--ease-spring);
}
[data-ab-tip]:hover::after, [data-ab-tip]:focus-visible::after { opacity: 1; translate: -50% 0; scale: 1; }

/* Modal */
.ab-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; visibility: hidden; transition: visibility 0s .45s; }
.ab-modal.is-open { visibility: visible; transition-delay: 0s; }
.ab-modal__scrim { position: absolute; inset: 0; background: rgba(8, 6, 20, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s var(--ease-soft); }
.ab-modal.is-open .ab-modal__scrim { opacity: 1; }
.ab-modal__panel { width: min(440px, 100%); padding: 22px; display: grid; gap: 16px; opacity: 0; scale: .86; translate: 0 30px; filter: blur(8px); transition: opacity .3s, scale .55s var(--ease-spring), translate .55s var(--ease-spring), filter .4s; }
.ab-modal.is-open .ab-modal__panel { opacity: 1; scale: 1; translate: 0 0; filter: blur(0); }

/* Toast */
.ab-toasts { position: fixed; right: 20px; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.ab-toast {
  --accent: var(--lav);
  position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: center; gap: 12px;
  width: min(330px, calc(100vw - 40px)); padding: 12px 12px 14px 14px; border-radius: 14px;
  background: var(--pop); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--rim), 0 18px 40px -10px var(--shadow);
  opacity: 0; translate: 110% 0; scale: .9;
  transition: opacity .3s, translate .6s var(--ease-spring), scale .6s var(--ease-spring), margin .4s var(--ease-out);
}
.ab-toast.is-in { opacity: 1; translate: 0 0; scale: 1; }
.ab-toast.is-out { opacity: 0; translate: 0 12px; scale: .92; }
.ab-toast--success { --accent: var(--mint); } .ab-toast--warn { --accent: var(--amber); }
.ab-toast--danger { --accent: var(--rose); } .ab-toast--pink { --accent: var(--sakura); } .ab-toast--info { --accent: var(--sky); }
.ab-toast__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent), 0 0 12px var(--accent); animation: ab-pop .6s .15s var(--ease-spring) both; }
.ab-toast__body { flex: 1; min-width: 0; display: grid; gap: 1px; font-size: 13px; }
.ab-toast__body strong { font-weight: 700; font-size: 13.5px; }
.ab-toast__body span { color: var(--muted); }
.ab-toast__x { flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--faint); font-size: 17px; line-height: 1; transition: background var(--t-fast), color var(--t-fast), transform var(--t) var(--ease-spring); }
.ab-toast__x:hover { background: var(--track); color: var(--text); transform: rotate(90deg); }
.ab-toast__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: 0 50%; background: var(--bloom); animation: ab-shrink linear forwards; }

/* Toggle tema: .icon-btn + data-ab-theme-toggle, ikon bulan/matahari bertukar sambil berputar */
[data-ab-theme-toggle] svg { position: absolute; transition: transform .6s var(--ease-spring), opacity var(--t); }
[data-ab-theme-toggle] .icon-sun { opacity: 0; transform: rotate(-90deg) scale(.4); }
:root[data-theme="light"] [data-ab-theme-toggle] .icon-sun { opacity: 1; transform: none; }
:root[data-theme="light"] [data-ab-theme-toggle] .icon-moon { opacity: 0; transform: rotate(90deg) scale(.4); }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: ab-vt .75s var(--ease-out); }

/* ───── Section: Animasi (dari FrostedGlass) ───── */

/* Kilau spekular mengikuti pointer (JS mengisi --mx / --my). Pakai ::before karena .kpi::after = orb. */
[data-ab-spot]::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.12), transparent 62%);
  opacity: 0; transition: opacity var(--t) var(--ease-soft);
}
[data-ab-spot]:hover::before { opacity: 1; }

/* Tilt 3D (JS mengisi --rx / --ry) */
[data-ab-tilt] {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px));
  transition: transform var(--_tf, .55s) var(--ease-out), box-shadow var(--t) var(--ease-out), background 0.4s ease, border-color 0.4s ease;
  will-change: transform;
}
[data-ab-tilt]:hover { --ty: -4px; z-index: 3; box-shadow: inset 0 1px 0 var(--rim), 0 24px 48px -12px var(--shadow); }
[data-ab-tilt].is-tilting { --_tf: .12s; }

/* Reveal: naik + skala + blur → jernih, bertahap lewat --d (diisi otomatis oleh data-ab-stagger).
   Memakai translate/scale tersendiri supaya tidak bentrok dengan transform milik tilt/hover. */
.ab-js [data-ab-reveal] {
  transition:
    opacity .7s var(--ease-out) calc(var(--d, 0) * 70ms),
    translate .9s var(--ease-out) calc(var(--d, 0) * 70ms),
    scale .9s var(--ease-out) calc(var(--d, 0) * 70ms),
    filter .7s var(--ease-out) calc(var(--d, 0) * 70ms),
    transform var(--_tf, .55s) var(--ease-out),
    box-shadow var(--t) var(--ease-out), background 0.4s ease, border-color 0.4s ease;
}
.ab-js [data-ab-reveal]:not(.is-in) { opacity: 0; translate: 0 22px; scale: .97; filter: blur(8px); }
.ab-js [data-ab-reveal="left"]:not(.is-in) { translate: -26px 0; }
.ab-js [data-ab-reveal="zoom"]:not(.is-in) { translate: 0 0; scale: .86; }
/* isi yang ikut "tumbuh" ketika induknya masuk */
.ab-js [data-ab-reveal]:not(.is-in) .bar > span { width: 0 !important; }
.ab-js [data-ab-reveal]:not(.is-in) .ring .fg { stroke-dashoffset: 100; }
.ab-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-out) .25s; }
.ab-js [data-ab-reveal]:not(.is-in) .ab-draw { stroke-dashoffset: 1; }
.ab-wipe { clip-path: inset(-12px 0 -12px 0); transition: clip-path 1.8s var(--ease-out) .25s; }
.ab-js [data-ab-reveal]:not(.is-in) .ab-wipe { clip-path: inset(-12px 100% -12px 0); }

.ab-float { animation: ab-float 6s var(--ease-soft) infinite alternate; }
.slide-in { animation: ab-rise .45s var(--ease-out) both; }

@keyframes ab-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@keyframes ab-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes ab-ripple { to { transform: scale(1); opacity: 0; } }
@keyframes ab-shimmer { to { transform: translateX(100%); } }
@keyframes ab-shrink { to { transform: scaleX(0); } }
@keyframes ab-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes ab-float { from { transform: translateY(-5px); } to { transform: translateY(5px); } }
@keyframes ab-vt { from { clip-path: circle(0 at var(--ab-vt-x, 90%) var(--ab-vt-y, 5%)); } to { clip-path: circle(150vmax at var(--ab-vt-x, 90%) var(--ab-vt-y, 5%)); } }

/* ───── Section: Mode gerak ─────
   full = selalu beranimasi · auto = ikuti sistem (bawaan tanpa atribut) · reduced = selalu diam */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-ab-motion="full"]) *, :root:not([data-ab-motion="full"]) *::before, :root:not([data-ab-motion="full"]) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  :root:not([data-ab-motion="full"]).ab-js [data-ab-reveal]:not(.is-in) { opacity: 1; translate: none; scale: none; filter: none; }
}
:root[data-ab-motion="reduced"] *, :root[data-ab-motion="reduced"] *::before, :root[data-ab-motion="reduced"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
:root[data-ab-motion="reduced"].ab-js [data-ab-reveal]:not(.is-in) { opacity: 1; translate: none; scale: none; filter: none; }