/* ── Blok "Card Model 3" (page-builder) ──
   Kartu riwayat/tonggak sejarah: judul (tanggal/peristiwa) + deskripsi, dengan
   bar aksen di tepi kiri yang warnanya bisa diatur admin (color picker).
   Warna bar DITULIS INLINE (background-color) di elemen .bk-milestone-bar
   sungguhan — bukan lewat ::before/custom-property — karena pseudo-element
   tidak bisa ditarget inline style dari HTML, dan custom property (--x)
   dibuang HtmlSanitizer. Bentuk/posisi bar (rounded, lebar, dsb) tetap lewat
   class di sini karena border-radius per-sudut dibuang sanitizer kalau
   inline (lihat HtmlSanitizer::clean()).

   Efek HOVER di sini cuma "angkat" (translateY + shadow membesar + bar
   melebar) — TIDAK bergantung warna aksen admin sama sekali, jadi cukup
   :hover CSS biasa, tidak perlu JS seperti stat_card (lihat catatan di
   builder-program-card.css). */

.bk-milestone-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
    padding: 20px 24px 20px 28px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.bk-milestone-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .14);
}

.bk-milestone-bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
    transition: width .2s ease;
}

.bk-milestone-card:hover .bk-milestone-bar {
    width: 8px;
}

.bk-milestone-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 6px;
}

.bk-milestone-desc {
    color: #6c757d;
    font-size: .92rem;
    line-height: 1.5;
    margin-bottom: 0;
    white-space: pre-line;
}