/* ==========================================================================
   genTDA Design System — komponen & base styles
   Dipakai bersama Tailwind Play CDN + gentda-tailwind.js
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  --brand:#1D5AA6; --brand-600:#18488A;   /* biru East Ventures */
  --ink:#161A23; --ink-800:#1E2431;
  --bg:#FFFFFF; --bg-soft:#F5F6F8; --bg-muted:#ECEEF2;   /* light gray east */
  --text:#171A21; --text-soft:#4A5568; --text-mute:#7A8496;
  --border:#E4E7EC; --card:#FFFFFF;
}
.dark{
  --bg:#0D1017; --bg-soft:#12161F; --bg-muted:#1A1F2B;
  --text:#EAEEF5; --text-soft:#AAB4C6; --text-mute:#79849A;
  --border:#232B3A; --card:#141922;
}

*{ -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection{ background:rgba(29,90,166,.25); }

/* Scrollbar halus */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:10px; }
::-webkit-scrollbar-thumb:hover{ background:#c9d0e0; }

/* ---- Surfaces & helpers ------------------------------------------------- */
.surface{ background:var(--bg); }
.surface-soft{ background:var(--bg-soft); }
.surface-muted{ background:var(--bg-muted); }
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius:1.25rem; box-shadow:var(--tw-shadow,0 1px 3px rgba(19,26,45,.06),0 12px 32px -16px rgba(19,26,45,.14));
}
.border-app{ border-color:var(--border) !important; }
.text-soft{ color:var(--text-soft); }
.text-mute{ color:var(--text-mute); }
.divide-app > * + *{ border-color:var(--border); }

/* Aksen solid (tanpa gradasi warna) & tint hero */
.text-gradient{ color:var(--brand-600); }
.dark .text-gradient{ color:#7BA3D6; }
/* .mesh-hero: dinonaktifkan (tanpa gradasi). Latar memakai warna solid section. */
.mesh-hero{ background:transparent; }
.grid-lines{
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:44px 44px; opacity:.5;
}

/* ---- Buttons ------------------------------------------------------------ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.925rem; line-height:1; border-radius:.75rem;
  padding:.72rem 1.15rem; transition:.18s ease; cursor:pointer; border:1px solid transparent; white-space:nowrap; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--brand); color:#fff; box-shadow:0 8px 22px -10px rgba(29,90,166,.7); }
.btn-primary:hover{ background:var(--brand-600); }
.btn-ink{ background:var(--ink); color:#fff; }
.dark .btn-ink{ background:#fff; color:var(--ink); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border); }
.btn-ghost:hover{ background:var(--bg-muted); }
.btn-soft{ background:var(--bg-muted); color:var(--text); }
.btn-soft:hover{ background:var(--border); }
.btn-sm{ padding:.5rem .8rem; font-size:.82rem; border-radius:.6rem; }
.btn-lg{ padding:.9rem 1.5rem; font-size:1rem; }

/* ---- Badges / pills ----------------------------------------------------- */
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.72rem;
  padding:.28rem .6rem; border-radius:999px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text-soft); }
.badge-brand{ background:rgba(29,90,166,.12); color:#18488A; border-color:rgba(29,90,166,.25); }
.dark .badge-brand{ color:#7BA3D6; }
.badge-mint{ background:rgba(73,159,189,.12); color:#28657D; border-color:rgba(73,159,189,.25); }
.dark .badge-mint{ color:#84C1D7; }
.badge-ink{ background:rgba(30,36,49,.1); color:var(--ink-800); border-color:rgba(30,36,49,.2); }
.dark .badge-ink{ color:#9DB1D2; }
.dot{ width:.5rem; height:.5rem; border-radius:999px; }

/* ---- Forms -------------------------------------------------------------- */
.field{ display:block; width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--border); border-radius:.7rem; padding:.7rem .9rem; font-size:.925rem; transition:.15s; }
.field::placeholder{ color:var(--text-mute); }
.field:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(29,90,166,.18); }
.label{ display:block; font-weight:600; font-size:.82rem; margin-bottom:.4rem; color:var(--text); }

/* ---- Nav ---------------------------------------------------------------- */
.nav-link{ font-weight:500; font-size:.9rem; color:var(--text-soft); padding:.5rem .2rem; transition:.15s; }
.nav-link:hover{ color:var(--text); }
.nav-link.active{ color:var(--brand); }
.glass{ background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); }

/* Sidebar (dashboard) */
.side-link{ display:flex; align-items:center; gap:.75rem; padding:.62rem .8rem; border-radius:.7rem;
  font-weight:500; font-size:.9rem; color:var(--text-soft); transition:.15s; }
.side-link:hover{ background:var(--bg-muted); color:var(--text); }
.side-link.active{ background:rgba(29,90,166,.12); color:#18488A; font-weight:600; }
.dark .side-link.active{ color:#7BA3D6; }

/* Avatar */
.avatar{ border-radius:999px; object-fit:cover; background:var(--bg-muted); }

/* Table */
.table-app{ width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem; }
.table-app th{ text-align:left; font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-mute); padding:.75rem 1rem; border-bottom:1px solid var(--border); }
.table-app td{ padding:.85rem 1rem; border-bottom:1px solid var(--border); color:var(--text); }
.table-app tbody tr:hover{ background:var(--bg-soft); }

/* Utilities */
.container-app{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:1.25rem; }
.eyebrow{ font-weight:700; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brand); }
.section{ padding-block:5rem; }
@media (max-width:768px){ .section{ padding-block:3.25rem; } }
.hover-lift{ transition:transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover{ transform:translateY(-4px); }
/* Progressive enhancement: hanya sembunyikan bila JS aktif (html.js-reveal).
   Tanpa JS / bila observer gagal, konten tetap tampil. */
html.js-reveal .reveal{ opacity:0; }
.reveal.in{ animation:fade-up .6s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fade-up{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)} }