.jenis-pelayanan.bg-layanan {
    padding: 80px 24px;
    background: linear-gradient(90deg, rgb(139, 139, 139) 0%, rgb(82, 104, 115) 100%);
    color: #fff;
}
.jenis-pelayanan.fp-auto-height,
.jenis-pelayanan.fp-auto-height > .fp-tableCell { height: auto !important; }
.jenis-container { max-width: 1180px; margin: 0 auto; }
.jenis-topline { display: flex; justify-content: space-between; align-items: center; gap: 32px; margin-bottom: 32px; }
.jenis-heading { flex: 1; min-width: 0; max-width: 660px; }
.jenis-eyebrow { display: inline-block; margin-bottom: 14px; color: #fff1cf; font-size: .75rem; font-weight: 700; letter-spacing: .14em; }
.jenis-heading h2 { margin: 0 0 18px; font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.jenis-heading h2 span { color: #fff; }
.jenis-heading p { margin: 0; color: #fff; font-size: 1rem; line-height: 1.8; }
.jenis-hours { display: flex; align-items: center; gap: 16px; flex-shrink: 0; padding: 20px 24px; border: 1px solid #fff; border-radius: 16px; background: #ffffffeb; color: #172b45; box-shadow: 0 8px 30px #233e5910; }
.jenis-hours-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; color: #315c7e; background: #e7eff7; font-size: 1.35rem; }
.jenis-hours strong, .jenis-hours div > span { display: block; }
.jenis-hours strong { margin: 4px 0; font-size: 1rem; }
.jenis-hours-label { color: #5c7187; font-size: .68rem; font-weight: 700; letter-spacing: .12em; }
.jenis-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.jenis-card { --jenis-accent: #276d6a; --jenis-tint: #e9f5f1; position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 12px 18px; overflow: hidden; border: 1px solid #dfe7ef; border-radius: 20px; background: #fff; color: #172b45; box-shadow: 0 6px 22px #223c5810; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.jenis-card::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--jenis-accent); }
.jenis-card-skkm { --jenis-accent: #3564a0; --jenis-tint: #edf3fc; }
.jenis-card-desil { --jenis-accent: #986520; --jenis-tint: #fff4df; }
.jenis-card-disabilitas { --jenis-accent: #75569d; --jenis-tint: #f3eef9; }
.jenis-card:hover { color: #172b45; text-decoration: none; transform: translateY(-6px); border-color: var(--jenis-accent); box-shadow: 0 18px 35px #233e591c; }
.jenis-card:focus-visible { outline: 3px solid #b17a12; outline-offset: 4px; }
.jenis-card-image { position: relative; flex-shrink: 0; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #e9eef4; border-radius: 12px; background: #fff; }
.jenis-card-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.jenis-card-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 8px 0; padding-top: 12px; border-top: 1px solid #e9eef4; color: var(--jenis-accent); font-size: .85rem; font-weight: 700; }
.jenis-card-link i { display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--jenis-tint); }
.jenis-free-note { display: flex; align-items: center; gap: 16px; margin-top: 26px; padding: 20px 24px; border: 1px solid #d7e8e1; border-radius: 14px; background: #edf7f2; color: #265849; }
.jenis-free-icon { font-size: 1.7rem; }
.jenis-free-note strong { font-size: 1rem; }
.jenis-free-note p { margin: 4px 0 0; color: #466a5e; font-size: .88rem; line-height: 1.6; }
.jenis-free-badge { margin-left: auto; flex-shrink: 0; padding: 8px 12px; border: 1px solid #b9d9c9; border-radius: 7px; font-size: .65rem; font-weight: 700; letter-spacing: .1em; }
body.aksesibilitas-mode .jenis-card, body.aksesibilitas-mode .jenis-hours, body.aksesibilitas-mode .jenis-free-note { background: #111; border-color: #ffd700; color: #ffd700; }
body.aksesibilitas-mode .jenis-pelayanan h3, body.aksesibilitas-mode .jenis-pelayanan strong, body.aksesibilitas-mode .jenis-pelayanan i { color: #ffd700; }
body.aksesibilitas-mode .jenis-card-link i, body.aksesibilitas-mode .jenis-hours-icon { background: #222; }
@media (max-width: 991px) {
    .jenis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jenis-topline { flex-direction: column; align-items: stretch; gap: 24px; }
    .jenis-hours { padding: 18px; }
}
@media (max-width: 767px) {
    .jenis-pelayanan.bg-layanan { padding: 48px 18px; }
    .jenis-topline { flex-direction: column; gap: 24px; }
    .jenis-hours { width: 100%; }
    .jenis-grid { gap: 16px; }
    .jenis-card { padding: 10px 10px 16px; }
    .jenis-free-note { padding: 18px; align-items: flex-start; }
    .jenis-free-badge { display: none; }
}
@media (max-width: 479px) {
    .jenis-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .jenis-card { transition: none; }
    .jenis-card:hover { transform: none; }
}