/* ============================================================
   bengkel.top — Halaman statis (Tentang, Bantuan, Kontak,
   Privasi, Syarat). Melengkapi design token di landing.css.
   ============================================================ */

.pg-hero { padding: clamp(52px, 7vw, 92px) 0 clamp(18px, 3vw, 34px); }
.pg-hero h1 { font-size: clamp(1.85rem, 4.2vw, 2.85rem); line-height: 1.15; margin: 0; }
.pg-hero .lead {
  color: var(--text-2); max-width: 720px;
  margin-top: 16px; font-size: 1.03rem;
}

.crumbs { font-size: .8rem; color: var(--text-2); margin-bottom: 14px; }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--cyan); }
.crumbs span { opacity: .5; margin: 0 6px; }

.prose { max-width: 830px; }
.prose h2 {
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  margin: 42px 0 0;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--font-head); font-weight: 600;
  font-size: 1.03rem; margin: 26px 0 0;
}
.prose p, .prose li { color: var(--text-2); font-size: .945rem; line-height: 1.78; }
.prose p { margin: 14px 0 0; }
.prose ul, .prose ol { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--cyan); }
.prose a:hover { text-decoration: underline; }

.note {
  margin-top: 30px; padding: 18px 20px; border-radius: var(--radius);
  background: rgba(18, 207, 243, .05);
  border: 1px solid var(--border);
  font-size: .895rem; color: var(--text-2); line-height: 1.7;
}
.note b { color: var(--text); font-family: var(--font-head); }

.cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }

.kcard {
  padding: 22px; border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255,255,255,.026), rgba(255,255,255,.008));
  border: 1px solid rgba(159,176,195,.13);
}
.kcard b { display: block; font-family: var(--font-head); font-size: .99rem; margin-bottom: 7px; }
.kcard span { font-size: .87rem; color: var(--text-2); line-height: 1.65; }
.kcard .ic {
  width: 34px; height: 34px; border-radius: 10px; margin-bottom: 14px;
  display: grid; place-items: center;
  background: rgba(18,207,243,.09); border: 1px solid var(--border);
}
.kcard .ic svg { width: 17px; height: 17px; stroke: var(--cyan); fill: none; stroke-width: 1.8; }

.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.ct-item {
  padding: 24px; border-radius: var(--radius);
  border: 1px solid var(--border); background: rgba(18,207,243,.035);
}
.ct-item b { font-family: var(--font-head); display: block; margin-bottom: 7px; font-size: .99rem; }
.ct-item span { font-size: .875rem; color: var(--text-2); display: block; margin-bottom: 12px; }
.ct-item a { color: var(--cyan); font-size: .95rem; font-weight: 500; }
.ct-item a:hover { text-decoration: underline; }

.pg-cta {
  margin-top: clamp(48px, 6vw, 76px);
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, rgba(18,207,243,.09), rgba(40,123,255,.05));
  border: 1px solid var(--border-strong);
  text-align: center;
}
.pg-cta h2 { font-family: var(--font-head); font-size: clamp(1.3rem, 3vw, 1.85rem); margin: 0; }
.pg-cta p { color: var(--text-2); margin: 14px auto 0; max-width: 560px; font-size: .95rem; }
.pg-cta .acts { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .cards2, .cards3, .contact-grid { grid-template-columns: 1fr; }
}