/* FRAI-PWA-V1 · base.css — reset, tipografi, utilitas, komponen dasar */

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4{ margin:0; letter-spacing:-.02em; line-height:1.2; font-weight:800; }
h1{ font-size:clamp(24px,4.6vw,34px); }
h2{ font-size:clamp(20px,3.4vw,26px); }
h3{ font-size:17px; font-weight:750; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
img{ max-width:100%; display:block; }
/* Safari iOS memperbesar (zoom) seluruh halaman begitu ada input ber-fokus yang
   font-nya di bawah 16px, dan setelah selesai halaman TETAP ter-zoom sehingga
   tata letak terlihat melewati batas layar. Paksa 16px untuk semua isian di
   perangkat sentuh; awalan `html body` supaya menang dari aturan yang lebih
   spesifik di components/pages.css tanpa perlu !important. */
@media (hover:none) and (pointer:coarse){
  html body input:not([type=range]):not([type=checkbox]):not([type=radio]),
  html body select,
  html body textarea{ font-size:16px; }
  html body .otp-inputs input{ font-size:21px; }
}
ul,ol{ margin:0; padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--ai); outline-offset:2px; border-radius:6px; }
::selection{ background:var(--primary-soft); color:var(--primary-ink); }
[data-theme="dark"] ::selection{ background:#0d4a34; color:#EAF0FF; }

/* scrollbar halus */
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-track{ background:transparent; }

/* ---------- utilitas ---------- */
.muted{ color:var(--muted); }
.small{ font-size:13px; }
.tiny{ font-size:12px; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.bold{ font-weight:750; }
.row{ display:flex; align-items:center; gap:var(--sp-2); }
.row-4{ display:flex; align-items:center; gap:var(--sp-4); }
.col{ display:flex; flex-direction:column; }
.between{ justify-content:space-between; }
.wrap{ flex-wrap:wrap; }
.grow{ flex:1; min-width:0; }
.center{ display:grid; place-items:center; }
.truncate{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nowrap{ white-space:nowrap; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.hidden{ display:none !important; }

.grad-text{ background:var(--grad-ai); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------- kartu ---------- */
/* .card WAJIB punya padding sendiri: semua pemakaiannya menaruh teks (.small,
   .kv, .steps, paragraf legal) langsung sebagai anak, jadi tanpa padding teks
   menempel ke tepi kotak. */
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow);
  padding:var(--sp-4);
}
/* Daftar baris yang sudah punya padding internal sendiri (list-row 15px) ditarik
   ke tepi kartu supaya tidak berpadding ganda dan sorotan baris selebar kartu. */
.card > .doc-list, .card > .list-card, .card > .list-row{ margin-inline:calc(-1 * var(--sp-4)); }
.card > .doc-list > .list-row:first-child, .card > .list-row:first-child{ border-top-left-radius:var(--r-lg); border-top-right-radius:var(--r-lg); }
.card > .doc-list > .list-row:last-child, .card > .list-row:last-child{ border-bottom-left-radius:var(--r-lg); border-bottom-right-radius:var(--r-lg); }
.card-flat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.pad{ padding:var(--sp-4); }
.pad-6{ padding:var(--sp-6); }

/* ---------- tombol ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px; border-radius:var(--r-pill);
  font-weight:700; font-size:14.5px; border:1px solid transparent;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur);
  white-space:nowrap; user-select:none;
}
.btn:active{ transform:scale(.975); }
.btn[disabled]{ opacity:.55; pointer-events:none; }
.btn-primary{ background:var(--primary); color:#fff; box-shadow:0 6px 18px rgba(16,185,129,.32); }
.btn-primary:hover{ background:var(--primary-600); }
.btn-ai{ background:var(--grad-ai); color:#fff; box-shadow:0 8px 22px rgba(99,102,241,.32); }
.btn-ghost{ background:var(--surface-2); color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-outline{ background:transparent; border-color:var(--line-strong); color:var(--text); }
.btn-outline:hover{ background:var(--surface-2); }
.btn-sm{ min-height:36px; padding:0 14px; font-size:13.5px; }
.btn-lg{ min-height:52px; padding:0 26px; font-size:16px; }
.btn-block{ width:100%; }

.icon-btn{
  display:inline-grid; place-items:center; width:44px; height:44px; border-radius:var(--r-md);
  color:var(--text-2); transition:background var(--dur) var(--ease), color var(--dur);
}
.icon-btn:hover{ background:var(--surface-2); color:var(--text); }
.icon-btn[aria-pressed="true"]{ background:var(--primary-soft); color:var(--primary-600); }
[data-theme="dark"] .icon-btn[aria-pressed="true"]{ color:#6EE7B7; }
.icon-btn svg{ width:22px; height:22px; }

/* ---------- chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 13px;
  border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line);
  font-size:13px; font-weight:650; color:var(--text-2); white-space:nowrap;
  transition:background var(--dur), border-color var(--dur), color var(--dur);
}
.chip:hover{ background:var(--surface-3); }
.chip[aria-pressed="true"], .chip.is-active{
  background:var(--primary); border-color:var(--primary); color:#fff;
}
.chip-ai{ background:var(--grad-ai-soft); border-color:rgba(99,102,241,.28); color:var(--ai-600); }
[data-theme="dark"] .chip-ai{ color:#A5B4FC; }
.badge{
  display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill);
  font-size:11px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
}
.badge-promo{ background:var(--promo); color:var(--promo-ink); }
.badge-demo{ background:var(--surface-3); color:var(--muted); border:1px solid var(--line); }
.badge-booth{ background:rgba(11,18,32,.72); color:#fff; backdrop-filter:blur(8px); }

/* ---------- form ---------- */
.field{ display:flex; flex-direction:column; gap:6px; }
.label{ font-size:13px; font-weight:700; color:var(--text-2); }
.input{
  width:100%; min-height:48px; padding:0 14px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--line-strong); color:var(--text);
  transition:border-color var(--dur), box-shadow var(--dur);
}
.input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.input::placeholder{ color:var(--muted); }
textarea.input{ min-height:96px; padding:12px 14px; resize:vertical; line-height:1.5; }
.hint{ font-size:12px; color:var(--muted); }
.err{ font-size:12.5px; color:#E11D48; font-weight:600; }
[data-theme="dark"] .err{ color:#FDA4AF; }

/* ---------- skeleton / empty / error ---------- */
.sk{ background:var(--skeleton); background-size:200% 100%; animation:shimmer 1.4s infinite linear; border-radius:var(--r-md); }
@keyframes shimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
.empty, .errbox{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:var(--sp-8) var(--sp-4); color:var(--muted);
}
.empty h3, .errbox h3{ color:var(--text); }
.empty svg, .errbox svg{ width:40px; height:40px; opacity:.6; }

/* ---------- skip link: jangan tampil sampai difokus keyboard ---------- */
.skip-link{
  position:absolute; left:-9999px; top:0; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:8px; top:8px; width:auto; height:auto; overflow:visible;
  z-index:calc(var(--z-sheet) + 2); padding:8px 12px; font-size:13px; font-weight:650;
  background:var(--surface); color:var(--text); border:1px solid var(--line-strong);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
}

/* ---------- sheet / modal ---------- */
.overlay{
  position:fixed; inset:0; background:var(--overlay); z-index:var(--z-sheet);
  opacity:0; pointer-events:none; transition:opacity var(--dur-2) var(--ease);
  backdrop-filter:blur(2px);
}
.overlay.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; bottom:0; z-index:calc(var(--z-sheet) + 1);
  background:var(--surface); border-radius:var(--r-xl) var(--r-xl) 0 0;
  border-top:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateY(102%); transition:transform var(--dur-2) var(--ease);
  max-height:92vh; overflow:auto; padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.sheet.open{ transform:translateY(0); }
@media (min-width:640px){
  .sheet{ left:50%; right:auto; bottom:auto; top:50%; width:min(520px,92vw);
    border-radius:var(--r-xl); transform:translate(-50%,-46%) scale(.98); opacity:0;
    border:1px solid var(--line); }
  .sheet.open{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}
.sheet-grip{ width:44px; height:4px; border-radius:999px; background:var(--line-strong); margin:10px auto 0; }
@media (min-width:640px){
  /* sheet lebar untuk popup flyer & tabel pembanding */
  .sheet.sheet--wide{ width:min(860px,94vw); }
}
.sheet-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 20px 8px; }
.sheet-body{ padding:0 20px 8px; }
.sheet-foot{ padding:8px 20px 4px; display:flex; gap:10px; }

/* ---------- toast ---------- */
#toasts{ position:fixed; left:50%; bottom:calc(var(--bottombar-h) + 18px); transform:translateX(-50%);
  z-index:var(--z-toast); display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
@media (min-width:640px){ #toasts{ bottom:24px; } }
.toast{
  background:#0B1220; color:#fff; padding:11px 16px; border-radius:var(--r-pill);
  font-size:13.5px; font-weight:650; box-shadow:var(--shadow-lg); max-width:86vw;
  animation:toastIn var(--dur-2) var(--ease);
}
.toast.ok{ background:var(--primary-600); }
.toast.err{ background:#BE123C; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* ---------- animasi masuk ---------- */
@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.anim-in{ animation:fadeUp var(--dur-2) var(--ease) both; }
@media (prefers-reduced-motion: reduce){ .anim-in{ animation:none; } }