/* Halaman /bengkel/ — "Papan Bengkel" di atas sistem Kertas & Tinta (style.css).
   Tabrakan: papan kerja bengkel (pelat nomor, magnet status, kartu WO) × kertas berstempel + anotasi pulpen.
   Warna tetap token situs; --cta kuning hanya untuk tombol WhatsApp. Semua ilustrasi = HTML/CSS, data fiktif. */

.bk{--pen:#C8402B;--plate:#FFFFFF;--board:#1C2024}

/* ---------- Hero ---------- */
.bk-hero{padding:36px 0 40px}
.bk-hero-grid{display:grid;gap:34px;align-items:start}
@media (min-width:980px){.bk-hero{padding:56px 0 64px}.bk-hero-grid{grid-template-columns:1.02fr .98fr;gap:56px}}
.bk-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:17ch;margin-bottom:.4em}
.bk-hero .sub{font-size:1.12rem;color:var(--muted);max-width:52ch;margin:0 0 22px}
.bk-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.bk-fine{font-size:.92rem;color:var(--muted);margin:12px 0 0;max-width:46ch}
.bk-harga{display:inline-block;margin-top:14px;padding:6px 12px;border:1px dashed var(--ink);border-radius:10px;font-size:.95rem;background:var(--card)}
.bk-harga b{font-family:var(--display)}

/* Pelat nomor (wildcard) */
.plate{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:132px;padding:5px 12px 3px;background:var(--plate);
  border:2px solid var(--ink);border-radius:6px;box-shadow:inset 0 0 0 2px var(--plate),inset 0 0 0 3px var(--ink);font-family:var(--display);
  font-weight:700;letter-spacing:.08em;line-height:1.05;color:var(--ink);white-space:nowrap}
.plate b{font-size:1.25rem;font-weight:700}
.plate small{font-family:var(--body);font-size:.62rem;letter-spacing:.12em;font-weight:600}
.plate-sm{min-width:0;padding:3px 8px 2px}
.plate-sm b{font-size:.92rem}

/* Kartu Work Order (hero) */
.wo{position:relative;background:var(--card);border:1.5px solid var(--ink);border-radius:16px;box-shadow:6px 6px 0 var(--ink);padding:18px 18px 16px;max-width:520px}
@media (min-width:980px){.wo{margin-top:18px;transform:rotate(.6deg)}}
.wo-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:12px;border-bottom:1px dashed #C9C0B0}
.wo-no{font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.pill{display:inline-flex;align-items:center;gap:6px;border:var(--line);border-radius:999px;padding:2px 10px;font-size:.82rem;font-weight:600;background:var(--card);white-space:nowrap}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--ink);display:block}
.pill.kerja{background:var(--brand-tint)}.pill.kerja i{background:var(--brand-deep)}
.pill.antri i{background:#9A9384}
.pill.siap{background:#E3F5EC}.pill.siap i{background:#0E7A4F}
.wo-car{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:14px 0 10px}
.wo-car p{margin:0;font-size:.95rem;line-height:1.35}
.wo-car p span{display:block;color:var(--muted);font-size:.86rem}
.wo-hist{position:relative;background:var(--paper-2);border-radius:10px;padding:9px 12px;font-size:.9rem;margin:0 0 12px}
.wo-hist b{font-weight:600}
.wo-items{list-style:none;margin:0 0 12px;padding:0;font-size:.93rem}
.wo-items li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule);margin:0}
.wo-items li span:last-child{color:var(--muted);white-space:nowrap}
.wo-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px}
.wo-foot small{color:var(--muted);font-size:.86rem}
.wo-send{display:inline-flex;align-items:center;gap:8px;border:var(--line);border-radius:999px;padding:6px 12px;font-size:.88rem;font-weight:600;background:#E7F6EC}
.wo-send svg{width:16px;height:16px}
.anno{font-family:var(--hand);font-weight:600;color:var(--pen);font-size:1.35rem;line-height:1.05;margin:0}
.wo-anno{display:flex;align-items:flex-end;gap:4px;margin:-6px 0 10px 96px;transform:rotate(-3deg);font-size:1.3rem}
.wo-anno svg{width:34px;height:24px;flex:none;color:var(--pen)}
@media (max-width:519px){.wo-anno{margin-left:40px;font-size:1.2rem}}
.ilus{font-size:.82rem;color:var(--muted);margin:10px 0 0}
@media (min-width:980px){.bk-hero figure .ilus{text-align:right;max-width:520px}}

/* ---------- Pita fakta ---------- */
.bk-fakta{border-top:var(--line);border-bottom:var(--line);background:var(--card);padding:22px 0}
.bk-fakta ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600}
.bk-fakta li{margin:0}
.bk-fakta li span{color:var(--muted);font-weight:400}
@media (max-width:699px){.bk-fakta ul{flex-direction:column;gap:6px}}

/* ---------- Masalah ---------- */
.bk-masalah-grid{display:grid;gap:30px;align-items:center}
@media (min-width:900px){.bk-masalah-grid{grid-template-columns:1.15fr .85fr;gap:56px}}
.chat{background:#EFE8DC;border:var(--line);border-radius:18px;padding:16px;max-width:400px}
.chat-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;border-bottom:1px solid #D8CFC0;margin-bottom:12px;font-weight:600;font-size:.95rem}
.chat-head i{width:30px;height:30px;border-radius:50%;background:var(--card);border:var(--line);display:block}
.bubble{background:var(--card);border:1px solid #D8CFC0;border-radius:4px 14px 14px 14px;padding:9px 12px;margin:0 0 8px;font-size:.95rem;max-width:88%;line-height:1.4}
.bubble small{display:block;text-align:right;color:var(--muted);font-size:.74rem;margin-top:2px}
.chat .anno{margin:6px 0 0 8px;transform:rotate(-2deg)}

/* ---------- Fitur (hari ini) ---------- */
.fitur{display:grid;gap:22px;margin-top:30px}
.fitur-row{display:grid;gap:18px;align-items:center;padding:24px 0;border-top:1px dashed #C9C0B0}
.fitur-row:first-child{border-top:0;padding-top:0}
@media (min-width:860px){.fitur-row{grid-template-columns:1fr 1fr;gap:48px}.fitur-row:nth-child(even) .fitur-vis{order:-1}}
.fitur-row h3{font-size:1.35rem;margin-bottom:.35em}
.fitur-row p{color:var(--ink)}
.fitur-row .no{display:inline-grid;place-items:center;width:32px;height:32px;border:var(--line);border-radius:50%;font-family:var(--display);font-size:.95rem;background:var(--brand-tint);margin-bottom:10px}
.tag-live{display:inline-block;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:var(--line);border-radius:999px;padding:2px 9px;margin-left:8px;vertical-align:middle;background:#E3F5EC}
.fitur-vis{background:var(--card);border:var(--line);border-radius:16px;padding:16px;max-width:460px;width:100%}
@media (min-width:860px){.fitur-vis{justify-self:center}}

.timeline{list-style:none;margin:14px 0 0;padding:0 0 0 18px;border-left:2px solid var(--ink)}
.timeline li{position:relative;margin:0 0 12px;font-size:.92rem;line-height:1.35}
.timeline li::before{content:"";position:absolute;left:-25px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--card);border:2px solid var(--ink)}
.timeline li:first-child::before{background:var(--brand)}
.timeline b{display:block;font-weight:600}
.timeline span{color:var(--muted)}

.antre{list-style:none;margin:0;padding:0}
.antre li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);margin:0;font-size:.92rem}
.antre li:last-child{border-bottom:0}
.antre .car{line-height:1.25}.antre .car span{display:block;color:var(--muted);font-size:.82rem}
@media (max-width:420px){.antre li{grid-template-columns:1fr auto}.antre .plate{grid-column:1/-1;justify-self:start}}

.hp{max-width:300px;margin:0 auto;background:var(--board);border-radius:28px;padding:9px;border:1px solid var(--ink)}
.hp-scr{background:#EFE8DC;border-radius:20px;padding:12px 10px 14px}
.hp-top{font-size:.8rem;font-weight:600;color:var(--ink);padding:0 4px 8px;border-bottom:1px solid #D8CFC0;margin-bottom:10px}
.hp .bubble{max-width:100%;font-size:.86rem}
.hp .bubble b{font-weight:600}
.nota{display:block;margin-top:4px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;line-height:1.45;white-space:pre-line}

.stok{list-style:none;margin:0;padding:0}
.stok li{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);margin:0;font-size:.92rem}
.stok li:last-child{border-bottom:0}
.stok .q{font-family:var(--display);font-weight:700;min-width:3ch;text-align:right}
.st{font-size:.76rem;font-weight:600;border:var(--line);border-radius:999px;padding:1px 8px;white-space:nowrap}
.st.ok{background:#E3F5EC}.st.tipis{background:#FFF1D6}.st.habis{background:#FBEAE6}
.fitur-vis .anno{margin-top:8px;transform:rotate(-2deg)}

.rekap{list-style:none;margin:0;padding:0}
.rekap li{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:10px;margin:0 0 10px;font-size:.92rem}
.rekap .bar{height:14px;border:var(--line);border-radius:4px;background:var(--paper-2);overflow:hidden}
.rekap .bar i{display:block;height:100%;background:var(--brand)}
.rekap b{font-family:var(--display);text-align:right}

/* Cara kerja */
.langkah3{list-style:none;counter-reset:l;margin:34px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:860px){.langkah3{grid-template-columns:repeat(3,1fr)}}
.langkah3 li{counter-increment:l;background:var(--card);border:var(--line);border-radius:var(--radius-lg);padding:20px;margin:0}
.langkah3 li::before{content:counter(l);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--display);margin-bottom:10px}
.langkah3 h3{font-size:1.12rem;margin-bottom:.3em}
.langkah3 p{margin:0;color:var(--muted)}

/* ---------- Papan status (sedang dibangun) ---------- */
.papan-wrap{margin-top:28px;background:var(--board);border:1px solid #3A3F44;border-radius:20px;padding:22px 20px 18px}
.papan{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 8px;align-items:center}
.papan li{margin:0;display:flex;align-items:center;gap:8px}
.mag{display:inline-flex;align-items:center;gap:8px;background:#F1EFEA;color:var(--ink);border-radius:8px;padding:8px 12px;font-weight:600;font-size:.92rem;
  box-shadow:0 3px 0 #0006;border:1px solid #000}
.mag i{font-style:normal;font-family:var(--display);font-size:.78rem;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--ink)}
.mag.cabang{background:#FFF1D6}.mag.batal{background:transparent;color:#C9C5BC;border:1px dashed #6B665E;box-shadow:none}
.mag.batal i{background:#6B665E;color:#F1EFEA}
.papan .ar{color:#9FE0FA;font-weight:700}
.putaran{display:grid;gap:12px;margin:22px 0 0;padding:0;list-style:none}
@media (min-width:860px){.putaran{grid-template-columns:repeat(3,1fr)}}
.putaran li{margin:0;border:1px dashed #6B665E;border-radius:14px;padding:14px 16px;color:#C9C5BC;font-size:.93rem}
.putaran b{display:block;color:#fff;font-family:var(--display);font-size:1.02rem;margin-bottom:3px}
.papan-wrap .anno{color:#FFB4A6;margin:14px 0 0}
.rilis{list-style:none;counter-reset:r;margin:30px 0 0;padding:0;display:grid;gap:14px}
@media (min-width:860px){.rilis{grid-template-columns:1fr 1fr}}
.rilis li{counter-increment:r;margin:0;border:1px dashed #6B665E;border-radius:var(--radius-lg);padding:18px 18px 16px 64px;position:relative;color:#C9C5BC}
.rilis li::before{content:counter(r);position:absolute;left:18px;top:16px;width:32px;height:32px;border-radius:50%;border:1px solid #F1EFEA;color:#F1EFEA;display:grid;place-items:center;font-family:var(--display)}
.rilis h3{color:#fff;font-size:1.08rem;margin-bottom:.3em}
.rilis p{margin:0}
.tag-bangun{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border:1px solid #9FE0FA;color:#9FE0FA;border-radius:999px;padding:1px 8px;margin-bottom:8px}

/* ---------- Ringkasan & cabang ---------- */
.bk-ringkas{display:grid;gap:22px}
@media (min-width:900px){.bk-ringkas{grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}}
.fakta-list{list-style:none;margin:16px 0 0;padding:0}
.fakta-list li{display:grid;grid-template-columns:26px 1fr;gap:10px;margin:0 0 10px}
.fakta-list li::before{content:"";width:16px;height:16px;margin-top:5px;border:var(--line);border-radius:4px;background:var(--brand-tint)}
.cabang-box{background:var(--card);border:var(--line);border-radius:var(--radius-lg);padding:22px}
.cabang-box h3{margin-bottom:.4em}
.updated{font-size:.88rem;color:var(--muted);margin-top:14px}

/* ---------- FAQ di halaman ini ---------- */
.bk .faq{margin-top:24px}

@media (prefers-reduced-motion:reduce){.wo{transform:none}}