/* =========================================================
   TepatUkur · Design tokens & komponen dasar  (v1.0, Okt 2026)
   Pakai: <link rel="stylesheet" href="/css/tepatukur.css">
   Font : Plus Jakarta Sans (Google Fonts), lihat PANDUAN-PASANG.txt
   ========================================================= */
:root{
  /* Warna merek */
  --tu-red:#E0242A;        /* utama: tombol, ikon, aksen */
  --tu-red-hover:#C81E24;
  --tu-red-active:#A9181D;
  --tu-blue:#1636D8;       /* titik target: tautan, status terpilih, fokus */
  --tu-ink:#0C1238;        /* teks utama */
  --tu-blush:#FDEEEE;      /* latar lembut */
  --tu-white:#FFFFFF;
  /* Netral pendukung */
  --tu-slate:#5B6280;      /* teks sekunder */
  --tu-muted:#9097B0;      /* placeholder, teks nonaktif */
  --tu-line:#E4E6EF;       /* garis & border */
  --tu-surface:#F6F7FB;    /* latar halaman */
  --tu-blue-soft:#E8ECFD;  /* latar status biru */
  --tu-danger:#E0242A;
  /* Huruf */
  --tu-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --tu-fs-xs:12px; --tu-fs-sm:14px; --tu-fs-md:16px; --tu-fs-lg:20px; --tu-fs-xl:28px; --tu-fs-2xl:40px;
  /* Bentuk */
  --tu-radius-sm:10px; --tu-radius:14px; --tu-radius-lg:20px; --tu-radius-pill:999px;
  --tu-shadow:0 1px 2px rgba(12,18,56,.06),0 8px 24px rgba(12,18,56,.08);
  --tu-focus:0 0 0 4px rgba(22,54,216,.18);
}
.tu, .tu *{box-sizing:border-box}
.tu{font-family:var(--tu-font);color:var(--tu-ink);-webkit-font-smoothing:antialiased}
.tu h1,.tu h2,.tu h3{font-weight:800;letter-spacing:-.01em;margin:0}
.tu a{color:var(--tu-blue);font-weight:600;text-decoration:none}
.tu a:hover{text-decoration:underline}

/* Tombol */
.tu-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;
  border:0;border-radius:var(--tu-radius);font:700 var(--tu-fs-md)/1 var(--tu-font);cursor:pointer;
  background:var(--tu-red);color:#fff;transition:background .15s,box-shadow .15s}
.tu-btn:hover{background:var(--tu-red-hover)}
.tu-btn:active{background:var(--tu-red-active)}
.tu-btn:focus-visible{outline:0;box-shadow:var(--tu-focus)}
.tu-btn:disabled{background:#F1C2C4;cursor:not-allowed}
.tu-btn--block{width:100%}
.tu-btn--secondary{background:#fff;color:var(--tu-ink);box-shadow:inset 0 0 0 1.5px var(--tu-line)}
.tu-btn--secondary:hover{background:var(--tu-surface)}
.tu-btn--ghost{background:transparent;color:var(--tu-blue)}
.tu-btn--ghost:hover{background:var(--tu-blue-soft)}

/* Isian formulir */
.tu-field{display:block;margin-bottom:16px}
.tu-label{display:block;font-weight:700;font-size:var(--tu-fs-sm);margin-bottom:6px}
.tu-hint{display:block;font-size:var(--tu-fs-xs);color:var(--tu-slate);margin-top:6px}
.tu-input,.tu-select{width:100%;height:48px;padding:0 14px;border:1.5px solid var(--tu-line);border-radius:var(--tu-radius);
  background:#fff;font:500 var(--tu-fs-md) var(--tu-font);color:var(--tu-ink);transition:border-color .15s,box-shadow .15s}
.tu-input::placeholder{color:var(--tu-muted)}
.tu-input:focus,.tu-select:focus{outline:0;border-color:var(--tu-blue);box-shadow:var(--tu-focus)}
.tu-input.is-error{border-color:var(--tu-danger)}
.tu-input-group{display:flex;align-items:center;border:1.5px solid var(--tu-line);border-radius:var(--tu-radius);background:#fff;height:48px}
.tu-input-group:focus-within{border-color:var(--tu-blue);box-shadow:var(--tu-focus)}
.tu-input-group .tu-prefix{padding:0 12px;font-weight:700;color:var(--tu-slate);border-right:1.5px solid var(--tu-line);height:100%;display:flex;align-items:center}
.tu-input-group input{flex:1;border:0;outline:0;height:100%;padding:0 14px;font:500 var(--tu-fs-md) var(--tu-font);background:transparent;color:var(--tu-ink)}
.tu-check{display:flex;gap:10px;align-items:flex-start;font-size:var(--tu-fs-sm);color:var(--tu-slate);line-height:1.45}
.tu-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--tu-red);flex:none}

/* Kartu & label status */
.tu-card{background:#fff;border:1px solid var(--tu-line);border-radius:var(--tu-radius-lg);box-shadow:var(--tu-shadow)}
.tu-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--tu-radius-pill);font-size:var(--tu-fs-xs);font-weight:700}
.tu-badge--ok{background:var(--tu-blue-soft);color:var(--tu-blue)}
.tu-badge--warn{background:var(--tu-blush);color:var(--tu-red)}
.tu-badge--off{background:#EEF0F5;color:var(--tu-muted)}