:root{
  --ink:#1a1a1a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --brand:#7E1B1B;      /* merah utama */
  --brand-dk:#681616;   /* merah lebih gelap untuk hover */
  --bg:#fafafa;
}

/* === SLB Sans — self-hosted === */
/* Rekomendasi: konversi ke .woff2 untuk ukuran lebih kecil, tapi .otf juga jalan */
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Jika kamu lebih suka Book/BookItalic untuk 400, gunakan dua blok ini dan hapus Regular di atas
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-BookItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
*/
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'SLBSans';
  src: url('/assets/fonts/SLBSans-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'SLBSans', system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  margin:0;
}

/* Card container untuk form */
.form-wrap{
  max-width:960px;
  margin:24px auto;
  padding:20px 20px 28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}

/* Judul form */
.form-title{
  font-weight:700;
  margin:10px 0 14px;
}

/* Bantuan teks */
small.muted{color:var(--muted)}

/* Required asterisk */
.required::after{
  content:" *";
  color:#ef4444;
}

/* Note box */
.note{
  padding:12px;
  border:1px dashed var(--line);
  border-radius:10px;
  background:#fcfcfc;
}

/* Tombol brand */
.btn-brand{
  background:var(--brand);
  color:#fff;
  border:none;
  transition:background-color .2s ease, box-shadow .2s ease;
}
.btn-brand:hover,
.btn-brand:focus,
.btn-brand:active{
  background:var(--brand-dk);
  color:#fff;
  outline:0;
}
.btn-brand:focus{
  box-shadow:0 0 0 .15rem rgba(126,27,27,.25);
}
.btn-brand:disabled{
  background:#a35c5c;
  color:#fff;
  opacity:.85;
}

/* Section title */
.form-section-title{
  font-weight:600;
  margin-top:18px;
}

/* Validasi */
.is-invalid{border-color:#ef4444 !important}
.invalid-feedback{display:block}

/* KV banner DI DALAM container form, tidak terpotong */
.kv-in{
  width:100%;
  height:auto;            /* pertahankan rasio, tidak crop */
  display:block;
  border-radius:12px;
  border:1px solid var(--line);
}

/* Gambar KV kecil di thankyou (kalau dipakai) */
.kv-mini{
  width:100%;
  max-height:200px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid var(--line);
}

/* QR image */
.qr{
  width:220px;
  height:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
  background:#fff;
}

/* Kartu thanks */
.thanks-card{
  max-width:820px;
  margin:24px auto;
  padding:20px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(16,24,40,.06);
}

/* Posisi tombol submit/download center */
.actions-center{
  display:flex;
  justify-content:center;
  margin-top:8px;
}

/* Helper hide/show rep block */
.hidden{display:none}

/* Responsiveness */
@media (max-width: 992px){
  .form-wrap{margin:16px auto; padding:16px}
}
@media (max-width: 576px){
  .form-wrap{margin:12px auto; border-radius:12px}
  .kv-in{border-radius:10px}
  .thanks-card{margin:12px auto; border-radius:12px}
}

/* Tweak ringan Bootstrap */
.form-control, .form-select{ border-color:#d7dce3 }
.form-control:focus, .form-select:focus{
  border-color:#b7c2d6;
  box-shadow:0 0 0 0.15rem rgba(126,27,27,0.08);
}

/* Radio/checkbox alignment rapi */
.form-check-input{
  width:1.05rem;
  height:1.05rem;
  margin-top:0.25rem;
}
.form-check-label{ user-select:none }