/* fonts.css */
/* =============================================================================
   Self-hosted webfonts.

   GENERATED by tools/fetch-fonts.mjs — jangan diedit tangan, ubah skripnya.

   Berkas ada di public/fonts/ dan ikut terkirim bersama situs, jadi pengunjung
   tidak perlu menghubungi Google sama sekali. Isi ulang folder itu dengan:

     npm run fetch:fonts

   Selama folder itu kosong, aturan di bawah gagal dimuat dan stack cadangan di
   tokens.css yang dipakai — situs tetap tampil benar, hanya dengan font sistem.
   font-display: swap berarti teks langsung terlihat dalam kedua keadaan.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../public/fonts/inter.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../public/fonts/jetbrains-mono.woff2") format("woff2");
}


/* tokens.css */
/* =============================================================================
   Design tokens — the single source of truth for the visual language.
   Change a value here and it propagates everywhere. Nothing below this file
   should hard-code a colour, a radius, a duration or a font size.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- brand ------------------------------------------------------------ */
  --brand-50:  #fff4ec;
  --brand-100: #ffe4d1;
  --brand-200: #ffc7a3;
  --brand-300: #ffa26a;
  --brand-400: #ff8236;
  --brand-500: #ff6600;   /* sampled from the Cohexa mark */
  --brand-600: #e05500;
  --brand-700: #b84500;

  /* --- neutrals --------------------------------------------------------- */
  --ink-950: #08090a;
  --ink-900: #0d0f11;
  --ink-800: #16191c;
  --ink-700: #22272b;
  --ink-600: #3a4249;
  --ink-500: #59646d;
  --ink-400: #7b868f;
  --ink-300: #a6afb6;
  --ink-200: #d0d6da;
  --ink-100: #e6eaec;
  --ink-50:  #f4f6f7;
  --white:   #ffffff;

  /* --- semantic --------------------------------------------------------- */
  --text-strong:  var(--ink-900);
  --text:         var(--ink-700);
  --text-muted:   var(--ink-500);
  --text-subtle:  var(--ink-400);
  --text-invert:  var(--white);

  --surface:          var(--white);
  --surface-subtle:   var(--ink-50);
  --surface-raised:   var(--white);
  --surface-inverse:  var(--ink-950);

  --line:        var(--ink-100);
  --line-strong: var(--ink-200);
  --line-invert: rgba(255, 255, 255, 0.12);

  --accent:       var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft:  var(--brand-50);

  --success: #15805c;
  --warning: #b7791f;
  --danger:  #c8412a;

  /* --- typography ------------------------------------------------------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;

  --fs-display: clamp(2.6rem, 1.35rem + 3.9vw, 4.5rem);
  --fs-h1:      clamp(2.1rem, 1.35rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem);
  --fs-h3:      clamp(1.12rem, 1.02rem + 0.35vw, 1.3rem);
  --fs-lead:    clamp(1.02rem, 0.96rem + 0.28vw, 1.16rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;
  --fs-2xs:     0.7rem;

  --lh-tight: 1.06;
  --lh-snug:  1.28;
  --lh-body:  1.68;

  --tracking-tight: -0.022em;
  --tracking-wide:  0.09em;

  /* --- space (4px base) ------------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-7: 1.75rem;  --sp-8: 2rem;
  --sp-10: 2.5rem;  --sp-12: 3rem;    --sp-14: 3.5rem;  --sp-16: 4rem;
  --sp-20: 5rem;    --sp-24: 6rem;

  --section-y: clamp(4rem, 2.5rem + 5vw, 7rem);
  --container:      1200px;
  --container-pad:  clamp(1.15rem, 0.6rem + 2vw, 2.5rem);

  /* --- radii ------------------------------------------------------------ */
  --r-xs: 6px;  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-xl: 28px;
  --r-pill: 999px;

  /* --- elevation -------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(13, 15, 17, 0.04), 0 2px 8px rgba(13, 15, 17, 0.04);
  --sh-2: 0 2px 4px rgba(13, 15, 17, 0.04), 0 12px 28px rgba(13, 15, 17, 0.08);
  --sh-3: 0 8px 16px rgba(13, 15, 17, 0.06), 0 28px 56px rgba(13, 15, 17, 0.14);
  --sh-brand: 0 10px 30px rgba(255, 102, 0, 0.28);

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.72, 0.28, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 520ms;

  --z-header: 50;
  --z-overlay: 80;

  /* --- legacy aliases ---------------------------------------------------
     The dashboard and login screens were written against the previous token
     names. Mapping them here keeps those views working untouched while the
     rest of the site moves to the new system. */
  --ink: var(--text-strong);
  --muted: var(--text-muted);
  --surface-strong: var(--ink-50);
  --teal: var(--brand-500);
  --teal-dark: var(--brand-600);
  --amber: #b7791f;
  --coral: #c8412a;
  --green: #15805c;
  --blue: #2e6fba;
  --radius: var(--r-sm);
  --shadow: var(--sh-2);
}


/* base.css */
/* =============================================================================
   Base — reset, document defaults, typography primitives.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

h1, h2, h3, h4 {
  color: var(--text-strong);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-500); color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* layout.css */
/* =============================================================================
   Layout — page shell, containers, sections, generic grids.
   ========================================================================== */

.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-shell > main { flex: 1; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--narrow { max-width: 880px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.62); }
.section--subtle { background: var(--surface-subtle); }
.section--inverse { background: var(--surface-inverse); color: rgba(255,255,255,0.74); }
.section--inverse h2, .section--inverse h3 { color: var(--white); }

/* A single grid primitive drives every card listing on the site. */
.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1040px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.stack { display: grid; gap: var(--sp-4); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }


/* components.css */
/* =============================================================================
   Components — reusable UI primitives. Each block is self-contained and styled
   only through tokens, so a component can be dropped on any surface.
   ========================================================================== */

/* --- eyebrow ------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: var(--r-pill);
}

/* --- section head -------------------------------------------------------- */
.section-head { max-width: 720px; display: grid; gap: var(--sp-4); justify-items: start; }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head__lead { color: var(--text-muted); font-size: var(--fs-lead); }

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding-inline: var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn svg { flex: 0 0 auto; }

.btn--primary { color: var(--white); background: var(--accent); box-shadow: var(--sh-brand); }
.btn--primary:hover { background: var(--accent-hover); }

.btn--secondary {
  color: var(--text-strong);
  background: var(--surface);
  border-color: var(--line-strong);
  box-shadow: var(--sh-1);
}
.btn--secondary:hover { border-color: var(--ink-300); background: var(--ink-50); }

.btn--ghost { color: var(--text-strong); }
.btn--ghost:hover { background: var(--ink-50); }

.btn--dark { color: var(--white); background: var(--ink-900); }
.btn--dark:hover { background: var(--ink-800); }

.btn--on-dark {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255,255,255,0.4); }

.btn--sm { min-height: 40px; padding-inline: var(--sp-4); font-size: var(--fs-xs); }
.btn--block { width: 100%; }

/* --- badges -------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 5px var(--sp-3);
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.badge--accent { color: var(--brand-700); background: var(--accent-soft); border-color: var(--brand-100); }
.badge--mono {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-strong);
  background: var(--ink-50);
}
.badge--on-dark {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

/* --- card ---------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-raised);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.card__body { display: grid; gap: var(--sp-3); padding: var(--sp-6); }
.card__body > p { color: var(--text-muted); font-size: var(--fs-sm); }
.card__media { position: relative; overflow: hidden; background: var(--ink-50); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }

.card--interactive:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: var(--sh-2);
}
.card--interactive:hover .card__media img { transform: scale(1.04); }

/* --- icon tile ----------------------------------------------------------- */
.icon-tile {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-sm);
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--brand-100);
}

.icon-tile--on-dark {
  color: var(--brand-400);
  background: rgba(255, 102, 0, 0.12);
  border-color: rgba(255, 102, 0, 0.28);
}

/* --- stat ---------------------------------------------------------------- */
.stat { display: grid; gap: var(--sp-1); }
.stat__value {
  font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  line-height: 1.05;
}
.stat__label { color: var(--text-muted); font-size: var(--fs-sm); }
.stat--on-dark .stat__value { color: var(--white); }
.stat--on-dark .stat__label { color: rgba(255, 255, 255, 0.6); }

/* --- brand mark ---------------------------------------------------------- */
.brand-logo { display: block; color: var(--accent); }
.brand-lockup { display: inline-flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.brand-lockup svg { flex: 0 0 auto; }
.brand-lockup__text { display: grid; min-width: 0; }
.brand-lockup__name {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-lockup__tag {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.brand-lockup--invert .brand-lockup__name { color: var(--white); }
.brand-lockup--invert .brand-lockup__tag { color: rgba(255, 255, 255, 0.55); }

/* --- skeleton ------------------------------------------------------------ */
.skeleton {
  background: linear-gradient(90deg, var(--ink-50) 25%, var(--ink-100) 37%, var(--ink-50) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--r-xs);
}
.skeleton--line { height: 12px; }
.skeleton--title { height: 17px; width: 68%; }
.skeleton--short { width: 42%; }
.skeleton--media { aspect-ratio: 4 / 5; border-radius: 0; }

@keyframes skeleton-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: 0 0; }
}

/* --- scroll reveal ------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* --- toolbar (filter row above a listing) -------------------------------- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.toolbar__search {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: min(420px, 100%);
  padding-inline: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-subtle);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.toolbar__search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.toolbar__search input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  border: 0;
  background: none;
  color: var(--text-strong);
  font-size: var(--fs-sm);
}

.toolbar__search input:focus-visible { outline: none; }
.toolbar__search input::placeholder { color: var(--text-subtle); }

.toolbar__count { color: var(--text-muted); font-size: var(--fs-sm); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- language switcher --------------------------------------------------- */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
}

.lang-switch__option {
  min-width: 38px;
  height: 32px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.lang-switch__option:hover { color: var(--text-strong); }

.lang-switch__option.is-active {
  color: var(--white);
  background: var(--ink-900);
}


/* patterns.css */
/* =============================================================================
   Patterns — composed, page-level blocks: header, hero, footer, listings.
   ========================================================================== */

/* --- site header --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(1.6);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: rgba(255, 255, 255, 0.94);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 76px;
}

/* The bar carries more than a text column should: wordmark, seven links, the
   language switcher and two actions. It gets a wider container than the rest
   of the site so none of it has to shrink or spill. */
.site-header > .container { max-width: 1320px; }

/* Nothing in the bar shrinks: the wordmark stays whole and the controls keep
   their size. The tagline lives in the footer instead — with the language
   switcher present there is no longer room for it beside the navigation. */
.site-header__inner > a:first-child { flex: 0 0 auto; min-width: 0; }
.site-header__actions { flex: 0 0 auto; }
.site-header .brand-lockup__tag { display: none; }
.site-header .brand-lockup__name { font-size: 0.92rem; }

.site-nav { display: flex; align-items: center; gap: var(--sp-1); }

.site-nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-xs);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

/* the drawer's call to action is duplicated in the header actions on desktop */
.site-nav > .btn { display: none; }

.site-nav a:hover { color: var(--text-strong); background: var(--ink-50); }

.site-nav a.router-link-active {
  color: var(--text-strong);
  font-weight: 700;
}

.site-nav a.router-link-active::after {
  content: "";
  position: absolute;
  left: var(--sp-3);
  right: var(--sp-3);
  bottom: 2px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.site-header__actions { display: flex; align-items: center; gap: var(--sp-3); }

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xs);
  color: var(--text-strong);
}

@media (max-width: 1260px) {
  .nav-toggle { display: grid; }
  /* the drawer carries these actions instead */
  .site-header__actions .btn { display: none; }
  .site-nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--sp-4) var(--container-pad) var(--sp-6);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { height: 46px; }
  .site-nav a.router-link-active::after { display: none; }
  .site-nav .btn { display: inline-flex; margin-top: var(--sp-3); }
}

/* --- hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 7vw, 8.5rem);
  color: rgba(255, 255, 255, 0.72);
  background: var(--ink-950);
  isolation: isolate;
}

/* engineered grid + a single brand glow: technical, not decorative */
.hero__grid,
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.hero__grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}

.hero__glow {
  background:
    radial-gradient(46rem 26rem at 78% 8%, rgba(255, 102, 0, 0.30), transparent 68%),
    radial-gradient(38rem 24rem at 8% 92%, rgba(255, 102, 0, 0.12), transparent 70%);
}

.hero__mark {
  position: absolute;
  top: 50%;
  right: clamp(-12rem, -6vw, -4rem);
  z-index: -1;
  translate: 0 -50%;
  color: var(--brand-500);
  opacity: 0.09;
  pointer-events: none;
}

@media (max-width: 1100px) { .hero__mark { display: none; } }

.hero__inner { position: relative; display: grid; gap: var(--sp-8); max-width: 880px; }
.hero h1 { color: var(--white); font-size: var(--fs-display); }
.hero__lead { font-size: var(--fs-lead); max-width: 640px; }
.hero .eyebrow { color: var(--brand-400); }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-6);
  max-width: 640px;
  margin-top: var(--sp-4);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--line-invert);
}

@media (max-width: 620px) { .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- page hero (inner pages) --------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.25rem, 2.2rem + 4.2vw, 5.5rem);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--line);
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(36rem 20rem at 88% -20%, rgba(255, 102, 0, 0.10), transparent 70%);
}

.page-hero__inner { position: relative; display: grid; gap: var(--sp-5); max-width: 820px; }
.page-hero h1 { font-size: var(--fs-h1); }
.page-hero__lead { color: var(--text-muted); font-size: var(--fs-lead); }

/* --- capability card ------------------------------------------------------ */
.capability { padding: var(--sp-7); display: grid; gap: var(--sp-4); align-content: start; }
.capability p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- numbered process ----------------------------------------------------- */
.step { display: grid; gap: var(--sp-3); padding-top: var(--sp-5); border-top: 2px solid var(--line); }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- team ----------------------------------------------------------------- */
.team-card__media { aspect-ratio: 4 / 5; }
.team-card__media img { object-position: center top; }
.team-card__role {
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.team-card__name { font-size: 1.05rem; }
.team-card__bio { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- product / portfolio -------------------------------------------------- */
.media-card__media { aspect-ratio: 16 / 10; background: var(--ink-950); }
.media-card__media img { object-fit: contain; padding: var(--sp-4); }

/* --- business field (KBLI) ------------------------------------------------ */
.field-card { padding: var(--sp-6); display: grid; gap: var(--sp-3); align-content: start; }
.field-card h3 { font-size: 1rem; }
.field-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* --- CTA band -------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
  gap: var(--sp-10);
  align-items: center;
  padding: clamp(2rem, 1.2rem + 3vw, 3.5rem);
  border-radius: var(--r-lg);
  background: var(--ink-950);
  color: rgba(255, 255, 255, 0.68);
}

.cta-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(30rem 18rem at 92% 110%, rgba(255, 102, 0, 0.34), transparent 70%);
}

.cta-band > * { position: relative; }
.cta-band h2 { color: var(--white); }

@media (max-width: 860px) { .cta-band { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } }

/* --- footer ---------------------------------------------------------------- */
.site-footer { padding-block: var(--sp-16) var(--sp-8); background: var(--ink-950); color: rgba(255,255,255,0.6); }
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: var(--sp-10);
}
.site-footer__about { max-width: 380px; display: grid; gap: var(--sp-5); justify-items: start; }
.site-footer h4 {
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.site-footer__col { display: grid; gap: var(--sp-3); align-content: start; }
.site-footer__col a, .site-footer__col span { font-size: var(--fs-sm); transition: color var(--dur) var(--ease); }
.site-footer__col a:hover { color: var(--brand-400); }
.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-14);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line-invert);
  font-size: var(--fs-xs);
}

@media (max-width: 900px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); } }

/* --- misc ----------------------------------------------------------------- */
.empty-state {
  padding: var(--sp-8);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  color: var(--text-muted);
  text-align: center;
}

/* Below this width the wordmark no longer fits beside the language switcher
   and the menu button, so the mark alone carries the brand. */
@media (max-width: 620px) {
  .site-header__inner { gap: var(--sp-3); }
  .brand-lockup__text { display: none; }
}


/* admin.css */
/* =============================================================================
   Admin — login and dashboard. These two views keep their original markup, so
   the historic class names are preserved here and simply re-skinned with the
   new tokens. Nothing outside /login and /dashboard uses this file.
   ========================================================================== */

/* --- shared control shapes used by the admin views ----------------------- */
.primary-button, .secondary-button, .danger-button, .google-button, .small-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 46px;
  padding-inline: var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.primary-button { color: var(--white); background: var(--accent); }
.primary-button:hover { background: var(--accent-hover); }

.secondary-button {
  color: var(--text-strong);
  background: var(--surface);
  border-color: var(--line-strong);
}
.secondary-button:hover { background: var(--ink-50); }

.danger-button { color: var(--danger); background: var(--surface); border-color: var(--line-strong); }
.danger-button:hover { color: var(--white); background: var(--danger); border-color: var(--danger); }

.google-button { width: 100%; color: var(--white); background: var(--ink-900); }
.google-button:hover { background: var(--ink-800); }

.small-button { min-height: 36px; padding-inline: var(--sp-3); font-size: var(--fs-xs); }
.small-button:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- login --------------------------------------------------------------- */
.login-page {
  display: grid;
  place-items: center;
  min-height: calc(100svh - 240px);
  padding: var(--sp-20) var(--container-pad);
  background:
    radial-gradient(34rem 22rem at 12% 8%, rgba(255, 102, 0, 0.12), transparent 68%),
    var(--surface-subtle);
}

.login-panel {
  width: min(460px, 100%);
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-10);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-2);
}

.login-panel h1 { font-size: var(--fs-h2); }

.auth-message {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--danger);
  border-radius: var(--r-xs);
  color: #8a3524;
  background: #fdf0ec;
  font-size: var(--fs-sm);
}

/* --- dashboard shell ------------------------------------------------------ */
.dashboard-page { padding-block: var(--sp-12) var(--sp-20); background: var(--surface-subtle); }

.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
}

.dashboard-header h1 { font-size: var(--fs-h2); }
.dashboard-header p { margin-top: var(--sp-1); color: var(--text-muted); overflow-wrap: anywhere; }

.admin-profile { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }

.admin-profile img, .avatar-fallback {
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  border-radius: var(--r-pill);
  object-fit: cover;
  border: 3px solid var(--white);
  box-shadow: var(--sh-2);
}

.avatar-fallback {
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--accent);
  font-weight: 800;
}

/* --- stats ---------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.extended-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.stat-card {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}
.stat-card svg { color: var(--accent); }
.stat-card span {
  display: block;
  margin-top: var(--sp-4);
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
}
.stat-card p { margin-top: var(--sp-1); color: var(--text-muted); font-size: var(--fs-sm); }

@media (max-width: 1040px) { .extended-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .stats-grid, .extended-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- sections, tabs, forms, tables --------------------------------------- */
.dashboard-section { margin-top: var(--sp-8); }
.dashboard-section h2 { margin-bottom: var(--sp-4); font-size: var(--fs-h3); }

.dashboard-notice {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid #b7e2d1;
  border-radius: var(--r-sm);
  color: #12624f;
  background: #eefaf5;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* --- pintu masuk Konfigurasi Web ------------------------------------------
   Sebuah kartu, bukan tab: menekannya berpindah halaman. Bentuknya sengaja
   berbeda dari deretan tab di bawahnya agar perbedaan itu terbaca. */
.config-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.config-entry:hover { border-color: var(--ink-300); box-shadow: var(--shadow); }

.config-entry__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  color: var(--brand-500);
  background: var(--brand-50);
}

/* Mendorong chevron ke tepi kanan tanpa margin-left:auto di elemen lain. */
.config-entry__text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.config-entry__text strong { font-size: var(--fs-base); }
.config-entry__text small { color: var(--text-muted); font-size: var(--fs-sm); }

@media (max-width: 540px) {
  .config-entry__text small { display: none; }
}

.dashboard-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-5) 0 var(--sp-3); }

.dashboard-tabs button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding-inline: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: all var(--dur) var(--ease);
}
.dashboard-tabs button:hover { border-color: var(--ink-300); }
.dashboard-tabs button.active { color: var(--white); background: var(--ink-900); border-color: var(--ink-900); }

.admin-panel { display: grid; gap: var(--sp-5); }

.crud-form {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
}

.crud-form-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.crud-form h3 { font-size: 1.05rem; }

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.form-grid label { display: grid; gap: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--text); }

.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-grid textarea { min-height: 104px; resize: vertical; }

.upload-field input[type="file"] { padding: var(--sp-2); cursor: pointer; }
.upload-path { color: var(--text-muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }

.image-preview, .table-thumb {
  width: 96px;
  height: 72px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--ink-50);
}
.table-thumb { width: 74px; height: 54px; }

.full-span { grid-column: 1 / -1; }
.action-cell { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}

.dashboard-page table { width: 100%; min-width: 760px; border-collapse: collapse; }
.dashboard-page th, .dashboard-page td {
  padding: var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.dashboard-page th {
  color: var(--text-strong);
  background: var(--ink-50);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dashboard-page td { color: var(--text); font-size: var(--fs-sm); }
.dashboard-page tbody tr:last-child td { border-bottom: 0; }

@media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }


/* workspace.css */
/* =============================================================================
   Workspace — the project management surface inside the dashboard.
   Scoped under .workspace so nothing here can leak into the marketing site.
   ========================================================================== */

.workspace {
  --ws-side: 240px;
  --ws-panel: 380px;
  display: grid;
  grid-template-columns: var(--ws-side) minmax(0, 1fr);
  min-height: 620px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}

.workspace:has(.task-panel) {
  grid-template-columns: var(--ws-side) minmax(0, 1fr) var(--ws-panel);
}

/* --- sidebar -------------------------------------------------------------- */
.ws-side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--line);
  background: var(--ink-50);
  overflow-y: auto;
}

.ws-side__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-1);
}

.ws-side__head--sub { margin-top: var(--sp-4); border-top: 1px solid var(--line); padding-top: var(--sp-4); }

.ws-side__label {
  color: var(--text-subtle);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.ws-side__list { display: grid; gap: 2px; }

.ws-side__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 34px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-xs);
  color: var(--text);
  font-size: var(--fs-sm);
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ws-side__item:hover { background: var(--ink-100); }
.ws-side__item.is-active { color: var(--text-strong); background: var(--white); font-weight: 650; box-shadow: var(--sh-1); }
.ws-side__icon { flex: 0 0 auto; font-size: 0.95rem; }
.ws-side__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-side__hint { padding: var(--sp-2); color: var(--text-subtle); font-size: var(--fs-xs); }

/* --- top bar -------------------------------------------------------------- */
.ws-main { display: flex; flex-direction: column; min-width: 0; }

.ws-top {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.ws-top__burger { display: none; }
.ws-top__title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.ws-top__title h2 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-top__icon { font-size: 1.15rem; }
.ws-top__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

.ws-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--text-subtle);
}
.ws-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ws-search input { width: 170px; min-height: 34px; border: 0; background: none; font-size: var(--fs-sm); }
.ws-search input:focus-visible { outline: none; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-xs);
  color: var(--text-muted);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.icon-btn:hover { color: var(--text-strong); background: var(--ink-100); }

/* --- view tabs ------------------------------------------------------------ */
.ws-views {
  display: flex;
  gap: var(--sp-1);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.ws-views__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding-inline: var(--sp-3);
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ws-views__tab:hover { color: var(--text-strong); }
.ws-views__tab.is-active { color: var(--text-strong); border-bottom-color: var(--accent); }

.ws-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--brand-100);
  background: var(--accent-soft);
  color: var(--brand-700);
  font-size: var(--fs-xs);
}
.ws-banner button { margin-left: auto; color: inherit; font-weight: 700; text-decoration: underline; }

.ws-body { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-5); }

/* --- board ---------------------------------------------------------------- */
.board { display: flex; align-items: flex-start; gap: var(--sp-4); min-height: 100%; }

.board__column {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 0 0 272px;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--ink-50);
}
.board__column--new { background: none; }

.board__head { display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-1); }
.board__head h3 { font-size: var(--fs-sm); }
.board__dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: 0 0 auto; }
.board__count { color: var(--text-subtle); font-size: var(--fs-xs); font-weight: 700; }
.board__head .icon-btn { margin-left: auto; }

.board__list { display: grid; gap: var(--sp-2); align-content: start; min-height: 60px; }

.board__card {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--sh-1);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.board__card:hover { border-color: var(--brand-200); box-shadow: var(--sh-2); }
.board__card:active { cursor: grabbing; }
.board__title { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); line-height: 1.45; }
.board__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }

/* The insertion line that shows where a dragged card will land. */
.board__marker { height: 2px; border-radius: var(--r-pill); background: var(--accent); }

.board__add {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  min-height: 34px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-xs);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.board__add:hover { color: var(--text-strong); background: var(--ink-100); }

.board__compose textarea,
.board__column--new input {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--white);
  font-size: var(--fs-sm);
  resize: none;
}
.board__compose textarea:focus-visible,
.board__column--new input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* --- shared chips --------------------------------------------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--ink-100);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 700;
}
.pill--high { color: #9a2f1c; background: #fdeae5; }
.pill--low { color: #2b5f8f; background: #e8f1fa; }
.pill--normal { display: none; }
.pill--date.is-overdue { color: #9a2f1c; background: #fdeae5; }
.pill--date.is-soon { color: var(--brand-700); background: var(--accent-soft); }
.pill--quiet { background: transparent; }

/* On a card and in a list row the assignee sits at the far right; inside a
   table cell it stays with the name it belongs to. */
.board__meta .avatar,
.db-list li > .avatar { margin-left: auto; }

.avatar {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 800;
}

.muted { color: var(--text-subtle); }
.is-done { color: var(--text-subtle); text-decoration: line-through; }

/* --- table ---------------------------------------------------------------- */
.db-table { border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; }
.db-table table { width: 100%; min-width: 720px; border-collapse: collapse; }
.db-table th { background: var(--ink-50); text-align: left; }
.db-table th, .db-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.db-table tbody tr { cursor: pointer; }
.db-table tbody tr:hover { background: var(--ink-50); }
.db-table tbody tr:last-child td { border-bottom: 0; }
.db-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.db-table__name { font-weight: 600; color: var(--text-strong); }
.db-table__name-col { width: 38%; }
.db-table__dot { display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-2); border-radius: var(--r-pill); }
.db-table__empty { color: var(--text-subtle); text-align: center; }
.db-table .is-overdue { color: #9a2f1c; font-weight: 650; }
.db-table .is-soon { color: var(--brand-700); font-weight: 650; }

/* --- list ----------------------------------------------------------------- */
.db-list { display: grid; gap: var(--sp-6); }
.db-list__group header { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.db-list__group h3 { font-size: var(--fs-sm); }
.db-list ul { list-style: none; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); }
.db-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  cursor: pointer;
}
.db-list li:last-child { border-bottom: 0; }
.db-list li:hover { background: var(--ink-50); }
.db-list__title { flex: 1; color: var(--text-strong); }
.db-list__due { color: var(--text-muted); font-size: var(--fs-xs); }
.db-list__due.is-overdue { color: #9a2f1c; font-weight: 650; }
.db-list__due.is-soon { color: var(--brand-700); font-weight: 650; }
.db-list__empty { color: var(--text-subtle); cursor: default; }

/* --- calendar ------------------------------------------------------------- */
.calendar__bar { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.calendar__bar h3 { font-size: 1rem; min-width: 190px; }
.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.calendar__weekday {
  padding: var(--sp-2);
  background: var(--ink-50);
  border-bottom: 1px solid var(--line);
  color: var(--text-subtle);
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}
.calendar__cell {
  display: grid;
  gap: 3px;
  align-content: start;
  min-height: 104px;
  padding: var(--sp-2);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.calendar__cell:nth-child(7n + 7) { border-right: 0; }
.calendar__cell.is-outside { background: var(--ink-50); }
.calendar__cell.is-outside .calendar__date { color: var(--ink-300); }
.calendar__date { font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted); }
.calendar__cell.is-today .calendar__date {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--white);
}
.calendar__event {
  padding: 3px var(--sp-2);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  background: var(--ink-50);
  color: var(--text-strong);
  font-size: var(--fs-2xs);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar__event:hover { background: var(--ink-100); }

/* --- timeline ------------------------------------------------------------- */
.timeline__scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.timeline__head, .timeline__row { display: grid; align-items: center; }
.timeline__head { position: sticky; top: 0; background: var(--ink-50); border-bottom: 1px solid var(--line); }
.timeline__corner { position: sticky; left: 0; z-index: 2; height: 100%; background: var(--ink-50); }
.timeline__day {
  display: grid;
  justify-items: center;
  padding: var(--sp-2) 0;
  border-left: 1px solid var(--line);
  font-size: var(--fs-2xs);
  color: var(--text-subtle);
}
.timeline__day.is-weekend, .timeline__slot.is-weekend { background: rgba(0, 0, 0, 0.025); }
.timeline__day.is-today strong { color: var(--accent); }
.timeline__row { position: relative; border-bottom: 1px solid var(--line); }
.timeline__row:last-child { border-bottom: 0; }
.timeline__label {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  left: 0;
  z-index: 2;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border-right: 1px solid var(--line);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.timeline__slot { height: 44px; border-left: 1px solid var(--line); }
.timeline__slot.is-today { background: var(--accent-soft); }
.timeline__caption {
  grid-row: 1;
  align-self: center;
  justify-self: start;
  padding-inline: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: 650;
  white-space: nowrap;
  pointer-events: auto;
}

.timeline__bar {
  grid-row: 1;
  align-self: center;
  height: 26px;
  margin-inline: 3px;
  padding-inline: var(--sp-2);
  border-radius: var(--r-pill);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

/* --- task panel ----------------------------------------------------------- */
.task-panel { display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--white); }
.task-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.task-panel__body { flex: 1; overflow-y: auto; padding: var(--sp-5); display: grid; gap: var(--sp-5); }
.task-panel__title {
  width: 100%;
  border: 0;
  color: var(--text-strong);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: 1.3;
  resize: none;
  overflow: hidden;
}
.task-panel__title:focus-visible { outline: none; }
.task-panel__section { display: grid; gap: var(--sp-3); }
.task-panel__section h4 {
  display: flex;
  gap: var(--sp-2);
  color: var(--text-subtle);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.props { display: grid; gap: var(--sp-1); }
.props__row { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: var(--sp-2); }
.props__row dt { display: flex; align-items: center; gap: var(--sp-2); color: var(--text-subtle); font-size: var(--fs-xs); }
.props__control {
  width: 100%;
  min-height: 32px;
  padding: 4px var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--text-strong);
  font-size: var(--fs-sm);
}
.props__control:hover { background: var(--ink-50); }
.props__control:focus-visible { outline: none; border-color: var(--accent); background: var(--white); }
.props__control--area { border-color: var(--line); resize: vertical; }

.subtasks { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.subtasks li { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }
.subtasks__add { display: flex; gap: var(--sp-2); }
.subtasks__add input {
  flex: 1;
  min-height: 32px;
  padding-inline: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
}

.comments { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.comments li { display: flex; gap: var(--sp-3); font-size: var(--fs-sm); }
.comments__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background: var(--ink-100);
  font-size: 0.62rem;
  font-weight: 800;
}
.comments__meta { display: flex; gap: var(--sp-2); align-items: baseline; }
.comments__meta time { color: var(--text-subtle); font-size: var(--fs-2xs); }
.comments__empty { color: var(--text-subtle); font-size: var(--fs-xs); }
.comments__add { display: grid; gap: var(--sp-2); justify-items: end; }
.comments__add textarea {
  width: 100%;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-sm);
  resize: vertical;
}

/* --- page + block editor -------------------------------------------------- */
.ws-page { max-width: 760px; margin-inline: auto; display: grid; gap: var(--sp-4); }
.ws-page__title {
  border: 0;
  color: var(--text-strong);
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
}
.ws-page__title:focus-visible { outline: none; }
.ws-page__saved { color: var(--text-subtle); font-size: var(--fs-2xs); }

.blocks { position: relative; display: grid; gap: 2px; }
.block { display: flex; align-items: flex-start; gap: var(--sp-2); padding: 2px 0; }
.block__text { flex: 1; min-height: 1.6em; line-height: 1.7; outline: none; }
.block__text:empty::before { content: attr(data-placeholder); color: var(--ink-300); }
.block__bullet { min-width: 18px; color: var(--text-muted); line-height: 1.7; }
.block__check { margin-top: 6px; }
.block__toggle { margin-top: 3px; color: var(--text-muted); }

.block--heading1 .block__text { font-size: 1.7rem; font-weight: 800; letter-spacing: var(--tracking-tight); }
.block--heading2 .block__text { font-size: 1.32rem; font-weight: 800; letter-spacing: var(--tracking-tight); }
.block--heading3 .block__text { font-size: 1.08rem; font-weight: 750; }
.block--quote { border-left: 3px solid var(--accent); padding-left: var(--sp-3); }
.block--quote .block__text { color: var(--text-muted); font-style: italic; }
.block--code {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--ink-950);
}
.block--code .block__text { color: #e6eaec; font-family: var(--font-mono); font-size: var(--fs-sm); white-space: pre-wrap; }
.block--divider { border-top: 1px solid var(--line); margin-block: var(--sp-3); }
.block--divider .block__text { display: none; }
.block.is-checked .block__text { color: var(--text-subtle); text-decoration: line-through; }

.blocks__add {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  color: var(--text-subtle);
  font-size: var(--fs-sm);
}
.blocks__add:hover { color: var(--text-strong); }

.slash {
  position: absolute;
  z-index: 5;
  width: 268px;
  max-height: 300px;
  overflow-y: auto;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--white);
  box-shadow: var(--sh-3);
}
.slash__label {
  padding: var(--sp-1) var(--sp-2);
  color: var(--text-subtle);
  font-size: var(--fs-2xs);
  font-weight: 800;
  text-transform: uppercase;
}
.slash__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2);
  border-radius: var(--r-xs);
  text-align: left;
}
.slash__item:hover, .slash__item.is-active { background: var(--ink-50); }
.slash__item strong { display: block; font-size: var(--fs-sm); color: var(--text-strong); }
.slash__item small { color: var(--text-subtle); font-size: var(--fs-2xs); }
.slash__glyph {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* --- responsive ----------------------------------------------------------- */
/* The project name earns the room before the search field does. */
@media (max-width: 1080px) {
  .ws-search input { width: 120px; }
}

@media (max-width: 1180px) {
  .workspace:has(.task-panel) { grid-template-columns: var(--ws-side) minmax(0, 1fr); }
  .task-panel {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-overlay);
    width: min(420px, 100%);
    box-shadow: var(--sh-3);
  }
}

@media (max-width: 860px) {
  .workspace, .workspace:has(.task-panel) { grid-template-columns: minmax(0, 1fr); }
  .ws-top__burger { display: grid; }
  .ws-side {
    position: absolute;
    z-index: 4;
    width: var(--ws-side);
    height: 100%;
    display: none;
  }
  .ws-side.is-open { display: flex; }
  .ws-search input { width: 110px; }
}

/* --- placement inside the dashboard --------------------------------------- */
/* The dashboard container is sized for reading, the workspace is not: three
   columns need room. This widens the section back out without leaving the page
   flow — no transform, so the fixed task panel still anchors to the viewport. */
.dashboard-section--workspace {
  --ws-width: min(1560px, calc(100vw - 2 * var(--container-pad)));
  width: var(--ws-width);
  margin-left: calc(50% - var(--ws-width) / 2);
}

/* --- dialog: buat proyek, kelola anggota ----------------------------------
   Dua dialog memakai kerangka yang sama. Latar gelap menutupi papan supaya
   perhatian tidak terbagi, dan kotaknya dibatasi tinggi layar agar daftar
   anggota yang panjang tetap bisa digulir tanpa memanjangkan halaman. */
.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  background: rgb(13 15 17 / 55%);
}

.ws-modal__box {
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: calc(100vh - 2 * var(--sp-4));
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 24px 60px rgb(13 15 17 / 28%);
}

.ws-modal__head,
.ws-modal__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding: var(--sp-4) var(--sp-5);
}
.ws-modal__head { border-bottom: 1px solid var(--line); }
.ws-modal__head h3 { flex: 1 1 auto; font-size: var(--fs-base); }

.ws-modal__foot { justify-content: flex-end; border-top: 1px solid var(--line); }
.ws-modal__foot--split { justify-content: space-between; }

.ws-modal__body {
  display: grid;
  gap: var(--sp-4);
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--sp-5);
}

.ws-modal__error {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: #8a1f11;
  background: #fdecea;
  font-size: var(--fs-sm);
}

.ws-field { display: grid; gap: var(--sp-2); }
.ws-field > span { font-size: var(--fs-sm); font-weight: 600; }
.ws-field small { color: var(--text-muted); font-size: var(--fs-xs); }
.ws-field input,
.ws-field textarea,
.ws-members select,
.ws-members__add input,
.ws-members__add select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.ws-field textarea { resize: vertical; }

/* Ikon dan nama berdampingan; ikonnya cukup selebar satu emoji. */
.ws-field--split { display: grid; grid-template-columns: 72px 1fr; gap: var(--sp-3); }
.ws-field--split label { display: grid; gap: var(--sp-2); }
.ws-field--split > label > span { font-size: var(--fs-sm); font-weight: 600; }
.ws-field__icon { text-align: center; }

.ws-members { display: grid; gap: var(--sp-2); }
.ws-members li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.ws-members__who { display: grid; flex: 1 1 auto; min-width: 0; }
.ws-members__who strong { font-size: var(--fs-sm); }
.ws-members__who small { color: var(--text-muted); font-size: var(--fs-xs); }
.ws-members select { width: auto; }
.ws-members__empty { justify-content: center; color: var(--text-muted); font-size: var(--fs-sm); }

.ws-members__add { display: grid; grid-template-columns: 1fr auto auto; gap: var(--sp-2); }

.btn--danger { color: #8a1f11; border-color: #f1c4be; background: #fdecea; }
.btn--danger:hover { border-color: #e39c92; background: #fbdcd8; }

.ws-banner--muted { color: var(--text-muted); background: var(--ink-50); border-color: var(--line); }

@media (max-width: 560px) {
  .ws-members__add { grid-template-columns: 1fr; }
  .ws-members li { flex-wrap: wrap; }
}


/* nota.css */
/* =============================================================================
   Nota cetak — setengah A4 melintang, 210 x 148 mm.

   Seluruh ukuran di berkas ini memakai milimeter. Piksel tidak berarti apa-apa
   di atas kertas: browser memetakan milimeter ke ukuran fisik yang sebenarnya,
   sedangkan piksel bergantung kerapatan layar. Nota yang meleset beberapa
   milimeter akan terpotong saat digunting dari lembar A4.
   ========================================================================== */

.nota {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 210mm;
  height: 148mm;
  padding: 8mm 10mm;
  background: #fff;
  color: #111;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 3.1mm;
  line-height: 1.35;
}

.nota * { box-sizing: border-box; }

/* Halaman nota memakai kelas .dashboard-page, dan aturan tabel admin ikut
   mengenai tabel di dalam lembar ini: min-width 760px (kira-kira 201 mm) plus
   padding besar dan latar abu-abu pada thead. Itulah yang membuat kolom Total
   terpotong tepi kertas pada percobaan cetak pertama. Semua diseragamkan ulang
   di sini — sebelum aturan khusus nota di bawah, supaya yang khusus menang. */
.nota table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}
.nota th,
.nota td {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  line-height: inherit;
  text-transform: none;
  vertical-align: top;
}

/* Kotak penampung untuk garis potong dan cap, yang keduanya diletakkan di atas
   lembar tanpa menggeser isinya. */
.nota { position: relative; }

/* Garis potong.
   Nota dicetak pada lembar 210 x 148 mm, dan di banyak kantor satu lembar A4
   dipotong menjadi dua. Garis putus-putus ini menandai batas potongnya.
   Ditarik 3 mm ke dalam dari tepi kertas dengan sengaja: hampir semua printer
   punya batas yang tidak bisa dicetak di sekeliling kertas, dan garis yang
   ditaruh persis di tepi akan hilang sebagian. Isi nota mulai pada 8 mm, jadi
   garis ini tidak pernah menyentuh teks. */
.nota--potong::after {
  content: '';
  position: absolute;
  inset: 3mm;
  border: 0.3mm dashed #9a9a9a;
  pointer-events: none;
}

/* Penjaga terakhir: apa pun yang tidak muat tidak boleh membuat halaman kedua.
   Nota adalah satu lembar — lembar kedua yang berisi sepotong tanda tangan
   lebih buruk daripada baris yang terpotong. Formulir memperingatkan sebelum
   itu terjadi. */
.nota { overflow: hidden; }

/* Invoice memakai lembar yang sama, hanya lebih tinggi. Semua aturan di bawah
   berlaku untuk keduanya; hanya ukuran kertas dan beberapa blok yang berbeda. */
.nota--a4 {
  height: 297mm;
  padding: 12mm 14mm;
  font-size: 3.3mm;
}

/* --- kop ------------------------------------------------------------------ */
.nota__kop {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6mm;
  padding-bottom: 2.5mm;
  border-bottom: 0.4mm solid #111;
}

.nota__brand { display: flex; align-items: center; gap: 3mm; }
/* Marka Cohexa tidak bujur sangkar (838:528), jadi tingginya dibiarkan
   mengikuti rasio. Lebar dalam milimeter, bukan mengandalkan atribut width
   bawaan komponen yang bersatuan piksel. */
.nota__logo {
  width: 17mm;
  height: auto;
  flex: 0 0 auto;
  color: #ff6600;
}
.nota__brand strong { display: block; font-size: 4.4mm; line-height: 1.15; }
.nota__brand small { display: block; color: #555; font-size: 2.8mm; }

.nota__kontak { display: grid; justify-items: end; color: #444; font-size: 2.7mm; text-align: right; }

/* --- judul dan nomor ------------------------------------------------------ */
.nota__judul {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 3mm;
}
.nota__judul h1 { font-size: 7mm; letter-spacing: 1.4mm; line-height: 1; }
.nota__judul dl { display: flex; gap: 6mm; font-size: 2.9mm; }
.nota__judul dt { color: #666; font-size: 2.5mm; }
.nota__judul dd { font-weight: 700; }

.nota .mono { font-family: "JetBrains Mono", ui-monospace, monospace; }

/* --- tujuan --------------------------------------------------------------- */
.nota__kepada { display: grid; margin-top: 2.5mm; }
.nota__label { color: #666; font-size: 2.5mm; text-transform: uppercase; letter-spacing: 0.3mm; }
.nota__kepada strong { font-size: 3.4mm; }
.nota__alamat { white-space: pre-line; }

/* --- daftar barang --------------------------------------------------------
   Tabel yang memanjang: flex 1 mendorong bagian kaki tetap menempel di bawah
   lembar berapa pun jumlah barisnya, sehingga tanda tangan selalu di tempat
   yang sama pada setiap nota. */
/* Pembungkus tabel, bukan tabelnya sendiri, yang menjadi bagian lentur.
   Elemen <table> tidak menyusut dengan patuh di dalam flex; sebuah div biasa
   menyusut, dan min-height:0 mencabut batas bawaan flex yang mencegahnya. */
.nota__isi {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.nota__tabel {
  width: 100%;
  margin-top: 2.5mm;
  border-collapse: collapse;
  font-size: 2.9mm;
  table-layout: fixed;
}
/* Lebar kolom dipatok: tanpa ini lebar kolom berubah-ubah mengikuti isinya,
   sehingga angka pada dua nota berbeda tidak sejajar. */
.nota__tabel th:nth-child(2) { width: auto; }
.nota__tabel th:nth-child(3) { width: 24mm; }
.nota__tabel th:nth-child(4) { width: 26mm; }
.nota__tabel th:nth-child(5) { width: 30mm; }
.nota__tabel td:nth-child(2) { overflow-wrap: anywhere; }
.nota__tabel thead th {
  padding: 1.2mm 1.5mm;
  border-bottom: 0.3mm solid #111;
  color: #333;
  font-size: 2.6mm;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.2mm;
}
.nota__tabel tbody td {
  padding: 1.1mm 1.5mm;
  border-bottom: 0.2mm solid #ddd;
  vertical-align: top;
}
.nota__tabel tbody tr:last-child td { border-bottom: none; }
.nota__no { width: 8mm; text-align: center; }
.nota__angka { text-align: right; white-space: nowrap; }
.nota__tabel th.nota__angka { text-align: right; }

/* --- kaki: terbilang dan jumlah ------------------------------------------- */
/* Grid, bukan flex: lebar kolom kanan dipatok. Dengan flex, <table> jumlah
   memakai lebar max-content sebagai dasar dan menghimpit kolom terbilang
   sampai hampir nol — persis yang terjadi sebelum ini diperbaiki. */
.nota__kaki {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58mm;
  align-items: start;
  gap: 6mm;
  padding-top: 2mm;
  border-top: 0.3mm solid #111;
}

.nota__terbilang { display: grid; min-width: 0; }
.nota__terbilang em { font-size: 3mm; font-style: italic; }
.nota__catatan { margin-top: 1.5mm; color: #555; font-size: 2.7mm; white-space: pre-line; }

.nota__jumlah { width: 100%; border-collapse: collapse; font-size: 3mm; }
.nota__jumlah th { padding: 0.6mm 3mm 0.6mm 0; color: #555; font-weight: 500; text-align: left; }
.nota__jumlah td { padding: 0.6mm 0; text-align: right; white-space: nowrap; }
.nota__total th, .nota__total td { padding-top: 1.4mm; border-top: 0.3mm solid #111; font-size: 3.6mm; font-weight: 700; }
.nota__total th { color: #111; }

/* --- tanda tangan --------------------------------------------------------- */
.nota__ttd {
  display: flex;
  justify-content: space-between;
  gap: 10mm;
  margin-top: 3mm;
  font-size: 2.8mm;
}
.nota__ttd > div { display: grid; justify-items: center; min-width: 42mm; }
.nota__garis { width: 42mm; height: 11mm; border-bottom: 0.25mm solid #999; }
.nota__ttd strong { margin-top: 0.8mm; font-size: 2.9mm; }

/* --- blok khusus invoice --------------------------------------------------- */

/* Pengirim tagihan dan nomor pesanan pelanggan berdampingan; nomor PO adalah
   yang dicari bagian keuangan mereka untuk mencocokkan tagihan ini. */
.inv-tujuan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 8mm;
  margin-top: 3mm;
}
.inv-tujuan__po { justify-items: end; text-align: right; }

.nota--a4 .nota__judul { position: relative; }

/* Cap LUNAS diletakkan di atas lembar, tidak menggeser apa pun di bawahnya,
   sehingga tata letak invoice lunas dan belum lunas tetap sama persis.
   Titiknya di celah antara dua blok tanda tangan: satu-satunya bagian lembar
   yang pasti kosong berapa pun jumlah barisnya. Percobaan pertama menaruhnya
   di kanan atas, dan pada invoice berbaris sedikit ia justru menutupi kolom
   harga. */
.nota__cap {
  position: absolute;
  bottom: 14mm;
  left: 50%;
  margin-left: -22mm;
  padding: 2mm 6mm;
  border: 1mm solid #15805c;
  border-radius: 2mm;
  color: #15805c;
  font-size: 8mm;
  font-weight: 800;
  letter-spacing: 1mm;
  transform: rotate(-11deg);
  opacity: 0.85;
}

.inv-bank {
  display: grid;
  gap: 1mm;
  margin-top: 4mm;
  padding: 3mm 4mm;
  border: 0.3mm solid #111;
  border-radius: 1.5mm;
}
.inv-bank p { display: flex; flex-wrap: wrap; gap: 4mm; align-items: baseline; }
.inv-bank strong { font-size: 3.4mm; }

/* =============================================================================
   Tampilan di layar
   ========================================================================== */

.nota-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-6);
  align-items: start;
  margin-top: var(--sp-6);
}

.nota-form { display: grid; gap: var(--sp-4); }
.nota-subhead { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.nota-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.nota-grid label, .nota-full { display: grid; gap: var(--sp-2); }
.nota-grid > label > span, .nota-full > span { font-size: var(--fs-sm); font-weight: 600; }

/* Kolom baris barang. Lebarnya dipatok supaya angka tetap sejajar antar baris
   walau keterangannya panjang. */
.nota-items { display: grid; gap: var(--sp-2); }
.nota-items__head,
.nota-items__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 7.5rem 6.5rem 2rem;
  gap: var(--sp-2);
  align-items: center;
}
.nota-items__head { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.nota-items__head > span:nth-child(n + 2):nth-child(-n + 5) { text-align: right; }
.nota-items__total { text-align: right; font-variant-numeric: tabular-nums; }

.nota-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.nota-error {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: #8a1f11;
  background: #fdecea;
  font-size: var(--fs-sm);
}

/* Pratinjau: lembar berukuran sebenarnya, diperkecil agar muat di layar.
   transform tidak mengubah ruang yang dipakai elemennya, jadi tingginya
   dipatok manual pada bingkai — 148mm x 0.5. Skala dipilih supaya kolom
   formulir di sebelahnya tetap cukup lebar untuk mengetik keterangan barang. */
.nota-preview { position: sticky; top: var(--sp-6); display: grid; gap: var(--sp-2); }
.nota-preview__label { color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; }
.nota-preview__frame {
  width: calc(210mm * 0.5);
  height: calc(148mm * 0.5);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--shadow);
}
.nota-scale { transform: scale(0.5); transform-origin: top left; }

/* Invoice lebih tinggi, jadi skalanya lebih kecil agar pratinjaunya tetap
   muat di samping formulir tanpa membuat halaman ikut memanjang. */
.nota-preview__frame--a4 { width: calc(210mm * 0.42); height: calc(297mm * 0.42); }
.nota-scale--a4 { transform: scale(0.42); }

/* Lembar cetak tidak ditampilkan di layar; hanya media cetak yang memakainya. */
.nota-print-root { display: none; }

@media (max-width: 1180px) {
  .nota-layout { grid-template-columns: minmax(0, 1fr); }
  .nota-preview { position: static; }
}

@media (max-width: 720px) {
  .nota-grid { grid-template-columns: 1fr; }
  .nota-items__head { display: none; }
  .nota-items__row { grid-template-columns: 1fr 1fr; }
  .nota-preview__frame { width: 100%; height: auto; overflow: auto; }
}

/* =============================================================================
   Cetak

   Yang keluar dari printer hanya .nota-print-root. Sisanya disembunyikan
   dengan display:none pada saudara-saudaranya, bukan pada seluruh isi halaman:
   menyembunyikan induk akan ikut menyembunyikan notanya.
   ========================================================================== */
@media print {
  /* Ukuran kertas TIDAK ditetapkan di sini. Aturan @page berlaku untuk seluruh
     dokumen, sedangkan aplikasi ini punya dua ukuran lembar, jadi halaman yang
     sedang terbuka yang memasangnya lewat useUkuranCetak(). Halaman bernama
     sudah dicoba dan diabaikan Chromium di sini — hasilnya US Letter. */

  html, body {
    margin: 0;
    padding: 0;
    background: #fff;
  }

  /* Apa pun yang bertanda no-print, dan seluruh kerangka situs, tidak ikut. */
  .no-print,
  .site-header,
  .site-footer,
  .dashboard-section,
  .nota-layout { display: none !important; }

  /* Cap dan garis harus tetap tercetak walau printer disetel hemat tinta. */
  .nota__cap, .inv-bank, .nota--potong::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .nota-page, .container { margin: 0; padding: 0; max-width: none; }

  /* Aliran normal, bukan position:absolute. Elemen yang diposisikan absolut
     tidak ikut membentuk kotak halaman, sehingga properti `page` pada isinya
     diabaikan dan browser jatuh ke ukuran kertas bawaan — itulah yang membuat
     invoice tercetak sebagai US Letter dua halaman. */
  .nota-print-root { display: block; }

  /* Warna latar dan garis harus benar-benar tercetak, bukan dihilangkan
     browser demi menghemat tinta. */
  .nota { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.nota-warn {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid #f0d48a;
  border-radius: var(--r-sm);
  color: #7a5600;
  background: #fdf6e3;
  font-size: var(--fs-sm);
}

/* Penanda status pembayaran di daftar invoice. */
.pill--lunas { color: #12624f; background: #e6f6ef; }
.pill--belum { color: #7a5600; background: #fdf6e3; }
.inv-telat { color: #8a1f11; font-weight: 700; }

/* --- memilih nota untuk dicetak bersamaan --------------------------------- */
.nota-daftar__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.nota-daftar__petunjuk { margin-top: var(--sp-2); color: var(--text-muted); font-size: var(--fs-sm); }

.dashboard-page th.nota-pilih,
.dashboard-page td.nota-pilih { width: 3rem; padding-right: 0; text-align: center; }
.nota-pilih input { width: 1.05rem; height: 1.05rem; cursor: pointer; }
.dashboard-page tr.is-terpilih td { background: var(--brand-50); }

/* Satu lembar A4 memuat dua nota bersusun: 2 x 148 mm = 296 mm pada 297 mm.
   Tingginya dipatok agar jumlah nota per lembar tidak bergantung pembulatan
   browser, dan tiap lembar memaksa halaman baru sesudahnya. */
.lembar-a4 {
  width: 210mm;
  height: 297mm;
  overflow: hidden;
}

@media print {
  .lembar-a4 { break-after: page; page-break-after: always; }
  .lembar-a4:last-child { break-after: auto; page-break-after: auto; }
}