/* ============================================================
   BijakDana — BDC-system for the category forms.  Scoped to .bd-form.
   RESTRAINT: forms are focused wizards ("one thing per screen") — the
   forms are already calm + warm. We ONLY (1) raise the step
   question to "Helvetica Neue",Helvetica,Arial,sans-serif editorial authority, (2) align the wordmark with
   the landing, (3) add a touch more breathing. Do NOT decorate.
   Depends on "Helvetica Neue",Helvetica,Arial,sans-serif being loaded in the form <head>.
   ============================================================ */

/* wordmark → match the landing mark */
.bd-form nav a[href="/"]{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight:600;
  letter-spacing:normal;
}

/* the step QUESTION = confident big-type authority (the one BDC signal a
   wizard should carry). Overrides the inline `text-xl sm:text-2xl font-bold`. */
.bd-form main h2{
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important;
  font-weight:600;
  letter-spacing:normal;
  line-height:1.12;
  font-size:clamp(1.5rem, 1.15rem + 1.5vw, 2.05rem) !important;
  color:#1A1512;
}

/* a calm sub-line under a question keeps its softer body voice */
.bd-form main h2 + p{ line-height:1.55; }

/* slightly more breathing in the card on larger screens */
@media (min-width:640px){
  .bd-form main > div.bg-white{ padding:2.75rem; }
}

/* category-form owner banner — a real face sets context above the wizard */
.bd-form .bd-owner{width:100%;max-width:560px;margin:0 0 1.25rem;border-radius:1rem;overflow:hidden;position:relative;height:190px;box-shadow:0 22px 44px -26px rgba(26,21,18,.45);}
.bd-form .bd-owner img{width:100%;height:100%;object-fit:cover;display:block;}
.bd-form .bd-owner figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.25rem 1rem;background:linear-gradient(to top,rgba(26,21,18,.85),rgba(26,21,18,.18) 68%,transparent);color:#fff;}
.bd-form .bd-owner .k{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8);}
.bd-form .bd-owner .t{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:600;letter-spacing:normal;font-size:1.15rem;margin-top:.15rem;line-height:1.15;}
/* Photos removed (brief 2026-09-30 B): a typographic hero in the mineral tokens replaces the
   owner banner — flat, no gradient/glow. The headline is the LCP element now. */
.bd-form .bd-hero-t{width:100%;max-width:560px;margin:0 0 1.5rem;}
.bd-form .bd-hero-t .k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#8A5410;}
.bd-form .bd-hero-t h1{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.02em;font-size:1.7rem;line-height:1.14;margin:.4rem 0 0;color:#1A1512;}
.bd-form .bd-hero-t p{margin:.5rem 0 0;color:#5F584E;font-size:.98rem;line-height:1.5;}

/* Alpine anti-CLS: these form pages load bdc-forms.css (NOT explainer.css, which
   is where the shared [x-cloak] rule lives), so without this the multi-step wizard
   painted ALL x-show steps before Alpine hydrated, then collapsed to step 1 — a
   large layout shift (the audit's CLS 0.30 on /penilaian/*). x-cloak the step
   wrapper so nothing paints until hydrated; the card min-height reserves the space
   so revealing step 1 doesn't shift the page. Hero/nav/progress stay visible (LCP). */
[x-cloak]{display:none !important;}
.bd-form main > div.bg-white{min-height:26rem;}

/* the primary action picks up the landing button's depth (radius stays the
   form's pill — calm) so it reads as one family across pages */
.bd-form button.bg-primary{
  box-shadow:0 12px 28px -12px rgba(26,21,18,.5);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .3s, background .18s;
}
.bd-form button.bg-primary:hover{
  box-shadow:0 18px 36px -14px rgba(26,21,18,.55);
  transform:translateY(-1px);
}