/* Halaman Sejarah: linimasa vertikal berselang-seling */
.hfacts { max-width: 760px; }
.hbody { padding: 52px 0 32px; background: linear-gradient(#0B1120, #0D1626); }
.hline { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; position: relative; display: grid; gap: 34px; }
.hline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: linear-gradient(#475569, #22D3EE 60%, #34D399); opacity: .55; }
.hs { display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: center; position: relative; }
.hs__year { grid-column: 2; grid-row: 1; justify-self: center; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 1.1rem; color: #fff; background: #0B1120; border: 2px solid #22D3EE; box-shadow: 0 0 0 8px #0D1626, 0 0 28px rgba(34,211,238,.4); position: relative; z-index: 1; }
.hs__card { grid-column: 1; grid-row: 1; padding: 24px 26px; border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); border: 1px solid rgba(255,255,255,.12); transition: border-color .25s, transform .25s; }
.hs--r .hs__card { grid-column: 3; }
.hs__card:hover { border-color: #22D3EE; transform: translateY(-4px); }
.hs__tag { display: inline-block; margin-bottom: 8px; padding: 4px 12px; border-radius: 99px; font-size: .74rem; font-weight: 700; color: #67E8F9; border: 1px solid rgba(103,232,249,.5); }
.hs__card h3 { font-size: 1.2rem; margin: 0 0 8px; }
.hs__card p { margin: 0 0 10px; font-size: .95rem; line-height: 1.7; color: #CBD5E1; }
.hs__card small { color: #94A3B8; font-size: .8rem; }
.hs:last-child .hs__year { border-color: #34D399; box-shadow: 0 0 0 8px #0D1626, 0 0 30px rgba(52,211,153,.5); }
.hmarks { padding: 52px 0 64px; background: #0D1626; }
.hm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.hm { padding: 24px 22px; border-radius: 18px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hm b { display: block; font-size: 1.5rem; color: #6EE7B7; margin-bottom: 8px; }
.hm p { margin: 0; font-size: .9rem; color: #CBD5E1; }
.sejarah .cta-band { background: #0D1626; }
@media (max-width: 760px) {
  .hline::before { left: 36px; }
  .hs, .hs--r { grid-template-columns: 74px minmax(0, 1fr); }
  .hs__year { grid-column: 1; width: 64px; height: 64px; font-size: .95rem; justify-self: start; }
  .hs__card, .hs--r .hs__card { grid-column: 2; padding: 18px; }
}