/* Landing /jadwal-pembinaan (hub jadwal) — semua class berawalan .jh- agar tidak bocor ke halaman lain */
.jh-page {
  --jh-ink: #16243a;
  --jh-muted: #566579;
  --jh-deep: #0d1b2a;
  --jh-forest: #1b365d;
  --jh-forest-2: #24487c;
  --jh-gold: #f39c12;
  --jh-gold-soft: #ffd089;
  --jh-cream: #f3f6fb;
  --jh-line: #dfe6f0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--jh-ink);
  line-height: 1.65;
  scroll-behavior: smooth;
}
.jh-page *, .jh-page *::before, .jh-page *::after { box-sizing: border-box; }
.jh-page h1, .jh-page h2, .jh-page h3 { line-height: 1.2; margin: 0; }
.jh-page a { color: inherit; }
.jh-page :focus-visible { outline: 3px solid var(--jh-gold); outline-offset: 3px; border-radius: 4px; }
.jh-wrap { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; }
.jh-serif, .jh-page h1, .jh-page h2 { font-family: "Fraunces", Georgia, "Times New Roman", serif; }

.jh-hero { background: radial-gradient(1200px 500px at 80% -10%, #2a5bb8 0%, transparent 60%), linear-gradient(160deg, var(--jh-deep), var(--jh-forest) 70%); color: #fff; padding: 28px 0 56px; }
.jh-crumb { font-size: .82rem; margin-bottom: 36px; }
.jh-crumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; color: #bccde3; }
.jh-crumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.jh-crumb a { text-decoration: none; color: #dbe6f3; }
.jh-grid2 { display: grid; gap: 36px; align-items: center; }
.jh-eyebrow { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--jh-gold); font-weight: 700; margin-bottom: 14px; }
.jh-hero h1 { font-weight: 700; font-size: clamp(1.9rem, 5.2vw, 3rem); letter-spacing: -.01em; }
.jh-em { color: var(--jh-gold); }
.jh-lead { margin: 18px 0 26px; color: #d6e1f0; font-size: 1.04rem; max-width: 40rem; }
.jh-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.jh-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 10px; font-weight: 700; text-decoration: none !important; border: 2px solid transparent; font-size: .95rem; transition: transform .15s, background .15s; cursor: pointer; }
.jh-btn:hover { transform: translateY(-1px); }
.jh-btn-gold { background: var(--jh-gold); color: #1b1203 !important; }
.jh-btn-gold:hover { background: #f7ae36; }
.jh-btn-ghost { border-color: rgba(255,255,255,.35); color: #fff !important; }
.jh-btn-dark { background: var(--jh-forest); color: #fff !important; }
.jh-btn-dark:hover { background: var(--jh-forest-2); }
.jh-btn-line { border-color: var(--jh-forest); color: var(--jh-forest) !important; background: transparent; }
.jh-btn-sm { padding: 8px 14px; font-size: .86rem; }

.jh-panel { background: #16304f; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 20px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.jh-panel label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #9db4d0; font-weight: 700; margin-bottom: 6px; }
.jh-panel select, .jh-panel input { width: 100%; padding: 11px 12px; border-radius: 9px; border: 1px solid rgba(255,255,255,.2); background: #fff; color: var(--jh-ink); font: inherit; margin-bottom: 14px; }
.jh-panel small { color: #9db4d0; font-size: .78rem; }

.jh-sec { padding: 60px 0; }
.jh-cream { background: var(--jh-cream); }
.jh-dark { background: var(--jh-forest); color: #fff; }
.jh-label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #a8660a; font-weight: 700; margin-bottom: 10px; }
.jh-dark .jh-label { color: var(--jh-gold); }
.jh-sec h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin-bottom: 14px; }
.jh-sub { color: var(--jh-muted); max-width: 44rem; margin: 0 0 28px; }
.jh-dark .jh-sub { color: #c3d3e8; }
.jh-grid { display: grid; gap: 16px; }

.jh-card { background: #fff; border: 1px solid var(--jh-line); border-radius: 16px; display: flex; flex-direction: column; height: 100%; transition: border-color .15s, box-shadow .15s; }
.jh-card:hover { border-color: var(--jh-gold); box-shadow: 0 10px 28px rgba(27,54,93,.1); }
.jh-card .jh-body { padding: 20px 20px 8px; flex: 1; }
.jh-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.jh-card p { color: var(--jh-muted); font-size: .9rem; margin: 0; }
.jh-card .jh-foot { padding: 14px 20px 20px; display: flex; gap: 8px; flex-wrap: wrap; }
.jh-empty { color: var(--jh-muted); margin-top: 20px; }
.jh-hidden { display: none !important; }

.jh-steps { display: grid; gap: 14px; }
.jh-step { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 22px; }
.jh-step b { font-family: "Fraunces", Georgia, serif; color: var(--jh-gold); font-size: 1.6rem; display: block; margin-bottom: 6px; }
.jh-step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.jh-step p { margin: 0; font-size: .9rem; color: #c3d3e8; }

.jh-band { background: #fff; border: 1px solid var(--jh-line); border-radius: 18px; padding: 28px; display: grid; gap: 18px; align-items: center; }
.jh-band h2 { margin-bottom: 8px; font-size: 1.5rem; }
.jh-band p { margin: 0; color: var(--jh-muted); }

.jh-faq { max-width: 820px; }
.jh-faq details { background: #fff; border: 1px solid var(--jh-line); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.jh-faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.jh-faq summary::-webkit-details-marker { display: none; }
.jh-faq summary::after { content: "+"; color: var(--jh-gold); font-size: 1.3rem; line-height: 1; }
.jh-faq details[open] summary::after { content: "\2212"; }
.jh-faq details p { margin: 0 0 16px; color: var(--jh-muted); }

@media (min-width: 768px) {
  .jh-grid2 { grid-template-columns: 1.2fr .8fr; }
  .jh-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .jh-cols-3 { grid-template-columns: repeat(2, 1fr); }
  .jh-steps { grid-template-columns: repeat(3, 1fr); }
  .jh-band { grid-template-columns: 1.6fr .4fr; }
  .jh-band .jh-btns { justify-content: flex-end; }
}
@media (min-width: 992px) {
  .jh-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .jh-page { scroll-behavior: auto; }
  .jh-btn, .jh-card { transition: none; }
}

/* Daftar per kategori */
.jh-cat { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-size: 1.25rem !important; }
.jh-cat span { font-family: "Inter", system-ui, sans-serif; font-size: .72rem; font-weight: 700; background: #fff; border: 1px solid var(--jh-line); color: var(--jh-muted); padding: 3px 10px; border-radius: 99px; }
.jh-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.jh-toc a { text-decoration: none; font-size: .85rem; padding: 7px 14px; border: 1px solid var(--jh-line); border-radius: 99px; background: #fff; color: var(--jh-forest); font-weight: 600; }
.jh-toc a:hover { border-color: var(--jh-gold); }

/* /sio/jadwal */
.jh-calbox { background: #fff; border: 1px solid var(--jh-line); border-radius: 16px; padding: 16px; }
.jh-months { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jh-months a { display: block; text-decoration: none; background: #fff; border: 1px solid var(--jh-line); border-radius: 12px; padding: 14px; }
.jh-months a:hover { border-color: var(--jh-gold); }
.jh-months small { color: var(--jh-muted); }
.jh-tablewrap { overflow-x: auto; background: #fff; border: 1px solid var(--jh-line); border-radius: 16px; }
.jh-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.jh-table th { text-align: left; background: var(--jh-cream); padding: 12px 16px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--jh-muted); }
.jh-table td { padding: 14px 16px; border-top: 1px solid var(--jh-line); vertical-align: middle; }
.jh-table small { display: block; color: var(--jh-muted); }
.jh-link-strong { font-weight: 700; text-decoration: none; color: var(--jh-forest); }
.jh-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.jh-chips a { font-size: .78rem; padding: 4px 10px; border: 1px solid var(--jh-line); border-radius: 99px; text-decoration: none; background: var(--jh-cream); }
.jh-chips a:hover { border-color: var(--jh-gold); }
@media (min-width: 768px) { .jh-months { grid-template-columns: repeat(4, 1fr); } .jh-steps-4 { grid-template-columns: repeat(4, 1fr) !important; } }
@media (min-width: 992px) { .jh-months { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 640px) {
  .jh-table thead { display: none; }
  .jh-table, .jh-table tbody, .jh-table tr, .jh-table td { display: block; width: 100%; }
  .jh-table tr { border-top: 1px solid var(--jh-line); padding: 8px 0; }
  .jh-table td { border: 0; padding: 6px 16px; }
}