#pagepiling > .uptd-section { display: flex; flex-direction: column; justify-content: center; height: auto !important; padding: var(--home-section-top) clamp(20px, 4vw, 64px) var(--home-section-bottom); background-color: #f5faff; background-image: var(--home-background-edges), var(--home-background-wash), url('../img/pelayanan/bg-standar-pelayanan.jpg'); background-position: center bottom; background-size: cover; color: #153967; }
.uptd-section > .fp-tableCell { display: flex; align-items: center; flex: 1 0 auto; height: auto !important; min-height: calc(var(--home-screen-height) - var(--home-section-top) - var(--home-section-bottom)); }
.uptd-container { width: 100%; max-width: 1440px; margin: 0 auto; }
.uptd-heading { margin-bottom: 28px; }
.uptd-eyebrow { color: #4c6d92; font-size: .7rem; font-weight: 700; letter-spacing: .13em; }
.uptd-heading h2 { margin: 8px 0 12px; color: #153967; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; }
.uptd-heading h2 span { color: #235da8; white-space: nowrap; }
.uptd-heading p { margin: 0; color: #566e88; font-size: .95rem; line-height: 1.7; }
.uptd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding: 8px 8px 12px 0; }
.uptd-service-card { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; padding: 10px; border: 1px solid #b8cde3; border-radius: 22px 22px 38px 22px; background: #fff; box-shadow: 0 12px 28px #173f751f; transition: transform .2s, box-shadow .2s; }
.uptd-service-card::before { content: ''; position: absolute; z-index: -1; inset: -7px -7px 30px 18px; border: 1px solid #9dbbdf; border-radius: 22px 22px 44px 22px; background: linear-gradient(135deg, #dceafb, #eaf5e4); }
.uptd-service-card::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #fff 50%, #f2f7fd); }
.uptd-service-image { position: relative; height: clamp(150px, calc(var(--home-screen-height) - var(--home-navbar-height) - 420px), 260px); overflow: hidden; border-radius: 14px 14px 26px 14px; background: #e5eff9; }
.uptd-service-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.uptd-image-label { position: absolute; bottom: 12px; left: 12px; padding: 6px 9px; border-left: 3px solid #8bd553; border-radius: 6px; background: #12396a; color: #fff; font-size: .6rem; font-weight: 600; letter-spacing: .08em; }
.uptd-service-body { display: flex; flex-direction: column; flex: 1; padding: 18px 10px 10px; }
.uptd-service-body h3 { margin: 0 0 10px; color: #153967; font-size: clamp(1.1rem, 1.5vw, 1.35rem); font-weight: 700; line-height: 1.4; text-align: left; }
.uptd-service-body p { margin: 0 0 22px; color: #596f87; font-size: .88rem; line-height: 1.7; }
.uptd-profile-link { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; min-height: 44px; padding: 11px 16px; border-left: 3px solid #8bd553; border-radius: 11px; background: #235da8; color: #fff; box-shadow: 0 5px 12px #173f751a; font-size: .8rem; font-weight: 600; }
.uptd-profile-link:hover { background: #17477f; color: #fff; text-decoration: none; }
.uptd-profile-link:focus-visible { outline: 3px solid #537fa9; outline-offset: 3px; }
.uptd-service-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px #173f7526; }
.uptd-service-card:hover img { transform: scale(1.025); }
@media (max-width: 991px) { .uptd-grid { gap: 18px; } .uptd-service-body { padding: 16px 4px 6px; } }
@media (max-width: 767px) { .uptd-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } .uptd-service-image { height: auto; aspect-ratio: 16 / 9; } .uptd-heading { margin-bottom: 22px; } .uptd-service-body { padding: 18px 10px 10px; } }
@media (prefers-reduced-motion: reduce) { .uptd-service-card, .uptd-service-image img { transition: none; } .uptd-service-card:hover, .uptd-service-card:hover img { transform: none; } }
body.aksesibilitas-mode #pagepiling > .uptd-section, body.aksesibilitas-mode .uptd-service-card, body.aksesibilitas-mode .uptd-service-card::before, body.aksesibilitas-mode .uptd-service-card::after, body.aksesibilitas-mode .uptd-profile-link { background: #000; color: #ffd700; border-color: #ffd700; }
body.aksesibilitas-mode .uptd-service-body p, body.aksesibilitas-mode .uptd-heading p, body.aksesibilitas-mode .uptd-heading h2 span, body.aksesibilitas-mode .uptd-eyebrow { color: #ffd700; }