#pagepiling > .pengaduan-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-artikel.jpg'); background-position: center bottom; background-size: cover; color: #153967; }
.pengaduan-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)); }
.pengaduan-container { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.45fr); align-items: stretch; gap: 32px; width: 100%; max-width: 1380px; margin: 0 auto; }
.pengaduan-heading { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(26px, 3vw, 44px); border: 1px solid #32638e; border-radius: 30px 30px 72px 30px; background: linear-gradient(145deg, #12396a, #1b5284 70%, #236774); color: #fff; box-shadow: 0 18px 38px #15396724; }
.pengaduan-heading::before, .pengaduan-heading::after { content: ''; position: absolute; z-index: -1; width: 250px; height: 250px; border: 1px solid #ffffff18; border-radius: 50%; right: -140px; top: -80px; pointer-events: none; }
.pengaduan-heading::after { width: 340px; height: 340px; right: -185px; top: -125px; }
.pengaduan-intro-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin-bottom: 30px; border: 1px solid #ffffff38; border-radius: 20px 20px 28px 20px; background: #ffffff0f; color: #bce997; font-size: 1.8rem; }
.pengaduan-eyebrow { color: #c5e2f5; font-size: .65rem; font-weight: 700; letter-spacing: .13em; line-height: 1.6; }
.pengaduan-heading h2 { max-width: 350px; margin: 12px 0 18px; color: #fff; font-size: clamp(2.1rem, 3.7vw, 3.5rem); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; }
.pengaduan-heading p { max-width: 350px; margin: 0; color: #dce9f7; font-size: .95rem; line-height: 1.8; }
.pengaduan-intro-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; width: 100%; margin-top: 32px; padding-top: 20px; border-top: 1px solid #ffffff26; font-size: .7rem; color: #dae9f7; }
.pengaduan-intro-footer > span:first-child { padding: 6px 10px; border-radius: 20px; background: #d5edc5; color: #244a31; font-weight: 700; }
.pengaduan-intro-footer i { margin-left: 6px; }
.pengaduan-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: center; }
.pengaduan-card { --channel-accent: #347bc1; position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 24px; min-width: 0; padding: 20px 24px; border: 1px solid #cadcec; border-radius: 20px; background: #fff; color: #153967; box-shadow: 0 8px 24px #173f7512; transition: transform .2s, box-shadow .2s, border-color .2s; }
.pengaduan-card:nth-child(2) { --channel-accent: #438054; }
.pengaduan-card:nth-child(3) { --channel-accent: #256b81; }
.pengaduan-card::before { content: ''; position: absolute; left: -1px; top: 28px; bottom: 28px; width: 3px; border-radius: 0 3px 3px 0; background: var(--channel-accent); }
.pengaduan-logo { display: flex; align-items: center; justify-content: center; width: 104px; height: 104px; padding: 10px; border: 1px solid #e3ebf4; border-radius: 18px; background: #fff; }
.pengaduan-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pengaduan-card-body { min-width: 0; padding-right: 48px; }
.pengaduan-channel-label { display: block; color: var(--channel-accent); font-size: .6rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5; }
.pengaduan-card h3 { margin: 5px 0 7px; color: #153967; font-size: 1.2rem; font-weight: 700; line-height: 1.35; text-align: left; }
.pengaduan-card p { margin: 0 0 10px; color: #596f87; font-size: .8rem; line-height: 1.6; }
.pengaduan-action { display: inline-flex; align-items: center; min-height: 24px; color: #235da8; font-size: .75rem; font-weight: 700; }
.pengaduan-action i { position: absolute; right: 22px; top: calc(50% - 22px); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid #d6e5f4; border-radius: 50%; background: #edf4fc; color: #235da8; transition: background .2s, color .2s, transform .2s; }
.pengaduan-card:hover { color: #153967; text-decoration: none; transform: translateY(-2px); border-color: #8eafd0; box-shadow: 0 12px 28px #173f7521; }
.pengaduan-card:hover .pengaduan-action i, .pengaduan-card:focus-visible .pengaduan-action i { background: #235da8; color: #fff; transform: rotate(-35deg); }
.pengaduan-card:focus-visible { outline: 3px solid #537fa9; outline-offset: 4px; }
@media (max-width: 1199px) { .pengaduan-container { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 22px; } .pengaduan-card { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 18px; } .pengaduan-logo { width: 80px; height: 80px; padding: 8px; } .pengaduan-action i { right: 16px; } }
@media (max-width: 991px) { .pengaduan-container { grid-template-columns: minmax(0, 1fr); } .pengaduan-heading { border-radius: 24px 24px 48px 24px; padding: 28px; } .pengaduan-intro-icon { width: 48px; height: 48px; font-size: 1.4rem; margin-bottom: 18px; } .pengaduan-heading h2, .pengaduan-heading p { max-width: none; } .pengaduan-intro-footer { margin-top: 20px; padding-top: 16px; } }
@media (max-width: 479px) { .pengaduan-card { grid-template-columns: 62px minmax(0, 1fr); gap: 12px; padding: 16px 12px; align-items: start; } .pengaduan-logo { width: 62px; height: 62px; padding: 5px; border-radius: 12px; } .pengaduan-card-body { padding-right: 0; } .pengaduan-card h3 { font-size: 1.05rem; } .pengaduan-action { display: flex; justify-content: space-between; gap: 8px; min-height: 36px; } .pengaduan-action i { position: static; flex-shrink: 0; width: 32px; height: 32px; } }
@media (prefers-reduced-motion: reduce) { .pengaduan-card, .pengaduan-action i { transition: none; } .pengaduan-card:hover, .pengaduan-card:hover .pengaduan-action i, .pengaduan-card:focus-visible .pengaduan-action i { transform: none; } }
body.aksesibilitas-mode #pagepiling > .pengaduan-section, body.aksesibilitas-mode .pengaduan-heading, body.aksesibilitas-mode .pengaduan-card, body.aksesibilitas-mode .pengaduan-action i { background: #000; color: #ffd700; border-color: #ffd700; }
body.aksesibilitas-mode .pengaduan-heading p, body.aksesibilitas-mode .pengaduan-card p, body.aksesibilitas-mode .pengaduan-eyebrow, body.aksesibilitas-mode .pengaduan-channel-label, body.aksesibilitas-mode .pengaduan-action, body.aksesibilitas-mode .pengaduan-intro-footer { color: #ffd700; }