/* Form Kebutuhan Interior Best Group — gaya Apple (SF, abu lapang, tombol pill) dengan aksen emas Best Group. */
:root{
  --bg:#F5F5F7;--card:#FFFFFF;--ink:#1D1D1F;--ink2:#6E6E73;--ink3:#86868B;--line:#E5E5EA;--fill:#E8E8ED;
  --brand:#E3B551;--brand-ink:#8A6516;--cta:#1D1D1F;--cta-ink:#FFFFFF;--sel:#1D1D1F;--link:#0066CC;
  --ok:#248A3D;--okbg:#34C759;--warn:#C93400;--hero:#000000;--hero-ink:#F5F5F7;--hero-ink2:#A1A1A6;
  --shadow:0 1px 3px rgba(0,0,0,.12);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#000000;--card:#1C1C1E;--ink:#F5F5F7;--ink2:#A1A1A6;--ink3:#8E8E93;--line:#38383A;--fill:#2C2C2E;
  --brand-ink:#E3B551;--cta:#F5F5F7;--cta-ink:#1D1D1F;--sel:#F5F5F7;--link:#2997FF;--ok:#30D158;--warn:#FF9F0A;--hero:#000000;--shadow:0 1px 3px rgba(0,0,0,.6);
}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font:17px/1.47 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",sans-serif;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;letter-spacing:inherit;color:inherit}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--link);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;padding:0 20px calc(24px + env(safe-area-inset-bottom,0px))}
.top{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding-top:env(safe-area-inset-top,0px)}
.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;padding:0 8px 0 0;border:0;background:none;color:var(--link);font-size:17px;cursor:pointer}
.back svg{width:20px;height:20px}
.step{font-size:13px;color:var(--ink2)}
.bar{display:flex;gap:4px;margin:2px 0 0}
.bar i{flex:1;height:4px;border-radius:999px;background:var(--fill)}
.bar i.on{background:var(--brand)}
.brandmini{display:flex;align-items:center;gap:8px}
.brandmini img{height:22px;width:auto;display:block}

.eyebrow{margin:32px 4px 0;font-size:14px;font-weight:600;color:var(--brand-ink)}
h1.t{margin:6px 4px 0;font-size:34px;line-height:1.1;font-weight:700;letter-spacing:-.025em}
p.lead{margin:8px 4px 0;font-size:17px;color:var(--ink2)}
.skipnote{margin:16px 0 0;padding:14px 16px;border-radius:16px;background:var(--card);display:flex;gap:12px;align-items:center;font-size:15px;color:var(--ink2)}
.skipnote button{margin-left:auto;flex:none}

.q{margin-top:16px;background:var(--card);border-radius:20px;padding:20px;scroll-margin-top:24px}
.q.flash{animation:flash 1.4s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--brand)}100%{box-shadow:0 0 0 0 transparent}}
.q h2{margin:0;font-size:20px;line-height:1.2;font-weight:600;display:flex;gap:8px;align-items:flex-start}
.q h2 .ck{margin-left:auto;flex:none;width:22px;height:22px;border-radius:50%;background:var(--okbg);display:flex;align-items:center;justify-content:center}
.q h2 .ck svg{width:12px;height:12px}
.q .hint{margin:6px 0 0;font-size:15px;line-height:1.4;color:var(--ink2)}
.q .body{margin-top:14px}
.sublabel{margin:18px 0 8px;font-size:15px;color:var(--ink2)}

/* segmented */
.seg{display:grid;gap:2px;padding:3px;border-radius:980px;background:var(--fill)}
.seg button{min-height:38px;border:0;border-radius:980px;background:transparent;font-size:15px;cursor:pointer;padding:0 6px}
.seg button[aria-pressed="true"]{background:var(--card);box-shadow:var(--shadow);font-weight:600}
/* list */
.list{border-radius:14px;background:var(--bg);overflow:hidden}
.list button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer}
.list button:first-child{border-top:0}
.list .l{flex:1}
.list .l b{display:block;font-weight:400;font-size:17px}
.list .l small{display:block;font-size:13px;color:var(--ink2)}
.list .tick{width:20px;height:20px;flex:none;opacity:0}
.list button[aria-pressed="true"] .tick{opacity:1}
.list button[aria-pressed="true"] .l b{font-weight:600}
/* swatch */
.sw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.sw button{position:relative;display:flex;flex-direction:column;padding:0;border:0;border-radius:18px;background:var(--bg);overflow:hidden;cursor:pointer;text-align:left}
.sw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--sel)}
.sw .wall{height:84px}
.sw .wood{height:34px;display:grid;grid-template-columns:repeat(4,1fr)}
.sw .wood i{border-right:1px solid rgba(0,0,0,.14)}
.sw .cap{padding:10px 12px 12px}
.sw .cap b{display:block;font-size:16px;font-weight:600}
.sw .cap small{display:block;font-size:12px;line-height:1.3;color:var(--ink2);margin-top:2px}
.badge{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--sel);display:none;align-items:center;justify-content:center}
.badge svg{width:14px;height:14px}
button[aria-pressed="true"]>.badge{display:flex}
/* bed */
.beds{display:grid;gap:10px}
.beds button{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 6px 12px;border:0;border-radius:16px;background:var(--bg);cursor:pointer}
.beds button[aria-pressed="true"]{background:var(--card);box-shadow:inset 0 0 0 2px var(--sel)}
.beds .frame{height:64px;display:flex;align-items:flex-end}
.beds .mat{height:60px;border-radius:7px;border:2px solid var(--ink3);display:flex;gap:3px;padding:5px}
.beds button[aria-pressed="true"] .mat{border-color:var(--sel)}
.beds .mat i{flex:1;height:11px;border-radius:3px;background:var(--ink3);opacity:.4}
.beds b{font-size:15px;font-weight:600;white-space:nowrap}
.beds small{font-size:12px;color:var(--ink2);margin-top:-8px}
/* chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:0;border-radius:980px;background:var(--fill);font-size:15px;cursor:pointer}
.chips button svg{width:14px;height:14px;display:none}
.chips button[aria-pressed="true"]{background:var(--sel);color:var(--card)}
.chips button[aria-pressed="true"] svg{display:block}
.chips .none{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2)}
/* slider */
.split{display:flex;height:112px;border-radius:14px;overflow:hidden;gap:3px}
.split .a{background:var(--fill);display:flex;flex-direction:column;justify-content:flex-end;gap:5px;padding:12px;transition:width .15s}
.split .a i{height:9px;border-radius:3px;background:var(--ink3);opacity:.7}
.split .b{flex:1;background:#1D1D1F;color:#F5F5F7;display:flex;flex-direction:column;justify-content:space-between;padding:12px;min-width:0}
.split .rod{height:2px;background:#A1A1A6;border-radius:2px}
.split .hang{display:flex;gap:6px;flex:1;padding-top:6px}
.split .hang i{width:8px;border-radius:3px;background:#6E6E73}
.split b{font-size:13px;font-weight:600;white-space:nowrap}
.split.unset{opacity:.45}
input[type=range]{width:100%;height:30px;margin:12px 0 0;accent-color:var(--sel)}
.ends{display:flex;justify-content:space-between;font-size:13px;color:var(--ink2)}

/* fields */
.group{margin-top:28px;background:var(--card);border-radius:20px;overflow:hidden}
.group label{display:block;padding:12px 16px;border-top:1px solid var(--line)}
.group label:first-child{border-top:0}
.group span{display:block;font-size:13px;color:var(--ink2)}
.group input{display:block;width:100%;border:0;outline:none;padding:4px 0 0;background:transparent;color:var(--ink);font:inherit;font-size:17px}
.group input::placeholder{color:var(--ink3)}
.fine{display:flex;gap:8px;margin:12px 16px 0;font-size:13px;line-height:1.4;color:var(--ink2)}
.fine svg{flex:none;width:16px;height:16px;margin-top:1px}
.err{margin:12px 4px 0;font-size:15px;color:var(--warn)}

/* actions */
.grow{flex:1;min-height:28px}
.actions{position:sticky;bottom:0;padding:16px 0 calc(8px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(0,0,0,0),var(--bg) 22px);display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border:0;border-radius:980px;background:var(--cta);color:var(--cta-ink);font-size:17px;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{text-decoration:none;opacity:.92}
.btn:disabled{opacity:.5;cursor:wait}
.btn.sec{background:var(--fill);color:var(--ink)}
.btn.wa{background:#25D366;color:#052E14}
.btn svg{width:20px;height:20px}
.lnk{align-self:center;min-height:44px;padding:0 12px;border:0;background:none;color:var(--link);font-size:15px;cursor:pointer}
.small{font-size:13px;color:var(--ink2);text-align:center}

/* hero */
.hero{background:var(--hero);color:var(--hero-ink);min-height:100vh;min-height:100dvh}
.hero .app{padding-top:env(safe-area-inset-top,0px)}
.hero .logo{display:block;width:auto;height:30px}
.hero .mark{display:block;width:110px;height:auto;margin:48px auto 0}
.hero .eyebrow{color:var(--brand);margin-top:44px}
.hero h1{margin:8px 4px 0;font-size:40px;line-height:1.08;font-weight:600;letter-spacing:-.03em}
.hero p{margin:14px 4px 0;color:var(--hero-ink2)}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 4px 0;font-size:13px;color:var(--hero-ink2)}
.meta span{display:flex;align-items:center;gap:6px}
.meta svg{width:16px;height:16px}
.hero .btn{background:#F5F5F7;color:#1D1D1F}
.hero .lnk{color:#2997FF}
.hero .actions{background:linear-gradient(to bottom,rgba(0,0,0,0),#000 22px)}

/* review */
.rows{margin-top:24px;background:var(--card);border-radius:20px;overflow:hidden}
.rows h3{margin:0;padding:14px 16px 0;font-size:13px;font-weight:600;color:var(--ink2)}
.rows button,.rows .row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 16px;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;cursor:pointer;color:var(--ink)}
.rows>:first-child{border-top:0}
.rows .l{flex:1;min-width:0}
.rows .l small{display:block;font-size:13px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows .st{font-size:15px;color:var(--ink2);white-space:nowrap}
.rows .st.miss{color:var(--warn)}
.rows .st.ok{color:var(--ok)}
.rows .chev{width:14px;height:14px;flex:none;color:var(--ink3)}
.kv{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line);font-size:15px}
.kv:first-of-type{border-top:0}
.kv span{flex:none;width:42%;color:var(--ink2)}
.kv b{flex:1;font-weight:400;text-align:right}
.sec-h{margin:22px 16px 8px;font-size:13px;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.02em}

/* sheet */
.dim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:30;display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:var(--card);border-radius:28px 28px 0 0;padding:10px 24px calc(28px + env(safe-area-inset-bottom,0px));animation:up .25s ease}
.grab{width:36px;height:5px;border-radius:999px;background:var(--line);margin:0 auto}
.sheet h2{margin:22px 0 0;font-size:24px;line-height:1.15;font-weight:700}
.sheet p{margin:8px 0 0;font-size:15px;color:var(--ink2)}
.sheet .list{margin-top:16px}
.sheet .actions{position:static;background:none;padding:0;margin-top:20px}
@keyframes fade{from{opacity:0}}
@keyframes up{from{transform:translateY(40px);opacity:0}}

/* done */
.okc{width:56px;height:56px;border-radius:50%;background:var(--okbg);display:flex;align-items:center;justify-content:center;margin-top:56px}
.okc svg{width:28px;height:28px}
.keep{margin-top:24px;border-radius:20px;background:#1D1D1F;padding:18px;color:#F5F5F7}
.keep small{display:block;font-size:13px;color:#A1A1A6}
.keep .pin{font-size:34px;font-weight:600;letter-spacing:.18em;margin:2px 0 12px;font-variant-numeric:tabular-nums}
.keep .url{font-size:15px;word-break:break-all;margin:2px 0 14px}
.keep .row2{display:flex;gap:8px}
.keep .row2 button{flex:1;min-height:40px;border:0;border-radius:980px;background:#2C2C2E;color:#F5F5F7;font-size:14px;cursor:pointer}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:980px;font-size:15px;z-index:40;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* PIN */
.pinbox{display:flex;gap:8px;justify-content:center;margin-top:28px}
.pinbox input{width:100%;max-width:280px;text-align:center;font-size:32px;letter-spacing:.4em;padding:14px 0 14px .4em;border:0;border-radius:16px;background:var(--card);color:var(--ink);font-variant-numeric:tabular-nums}
.center{text-align:center}
.center .eyebrow,.center h1.t,.center p.lead{margin-left:0;margin-right:0}
.preview{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--brand);color:#1D1D1F;font-size:13px;font-weight:600;text-align:center;padding:6px}
@media (min-width:700px){.app{padding-top:24px}h1.t{font-size:40px}}
.splitlbl{margin-top:10px;text-align:center;font-size:15px;font-weight:600}
.split.unset+.splitlbl{font-weight:400;color:var(--ink2)}
.ro .body{pointer-events:none}
.ro .body button[aria-pressed="false"]{opacity:.5}

/* Layar lebar: konten sambutan di tengah, tombol tepat di bawah teks (tidak terlempar ke dasar layar). */
@media (min-width:700px){
  .hero .app{justify-content:center;padding-top:48px;padding-bottom:48px}
  .hero .mark{margin-top:0}
  .hero .grow{flex:0 0 8px;min-height:8px}
  .hero .actions{position:static;background:none;padding-bottom:0;flex-direction:row;justify-content:flex-start}
  .hero .actions .btn{min-width:220px}
  .hero h1{font-size:52px}
  .hero p{font-size:19px;max-width:520px}
  .app{padding-top:40px}
  .actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;background:linear-gradient(to bottom,rgba(0,0,0,0),var(--bg) 22px)}
  .actions .btn{min-width:200px}
  .actions .small,.actions .lnk{flex-basis:100%;text-align:right}
  .dim{align-items:center}
  .sheet{border-radius:28px;max-width:480px}
}
.chev{width:14px;height:14px;flex:none;color:var(--ink3)}
.sheet .list .l small{display:block;font-size:13px;color:var(--ink2)}
.sheet .list .l b{font-weight:400}