#pagepiling > .ikm-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-ikm.jpg'); background-position: center bottom; background-size: cover; color: #153967; }
.ikm-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)); }
.ikm-container { width: 100%; max-width: 1380px; margin: 0 auto; }
.ikm-heading { margin-bottom: 28px; }
.ikm-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: #4c6d92; }
.ikm-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; }
.ikm-heading p { margin: 0; color: #566e88; font-size: .95rem; line-height: 1.7; }
.ikm-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr); gap: 28px; align-items: stretch; }
.ikm-score-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 26px; border: 1px solid #376791; border-radius: 28px 28px 56px 28px; background: linear-gradient(145deg, #12396a, #1d5985 75%, #286b78); color: #fff; box-shadow: 0 16px 36px #15396726; }
.ikm-score-card::before { content: ''; position: absolute; z-index: -1; top: -120px; right: -160px; width: 390px; height: 390px; border: 1px solid #ffffff15; border-radius: 50%; box-shadow: 0 0 0 45px #ffffff04, 0 0 0 90px #ffffff03; pointer-events: none; }
.ikm-score-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.ikm-score-top h3 { margin: 0; color: #e0ecf8; font-size: .85rem; font-weight: 600; }
.ikm-score-top > span { padding: 6px 11px; border: 1px solid #ffffff38; border-radius: 20px; background: #ffffff0d; font-size: .7rem; }
.ikm-score-display { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; padding: 30px 0; }
.ikm-score-label { color: #c6e0f2; font-size: .6rem; letter-spacing: .1em; text-align: center; }
.ikm-score-value { display: block; margin: 10px 0 18px; color: #fff; font-size: clamp(4.5rem, 7vw, 7rem); line-height: 1; font-weight: 800; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.ikm-grade { display: inline-flex; align-items: center; gap: 10px; padding: 6px 15px 6px 6px; border: 1px solid #b6dca0; border-radius: 30px; background: #e7f5de; color: #2e613b; font-size: .85rem; font-weight: 700; }
.ikm-grade b { display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: 50%; background: #347246; color: #fff; }
.ikm-report-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 4px 2px; border-top: 1px solid #ffffff30; color: #fff; font-size: .82rem; font-weight: 600; }
.ikm-report-link small { display: block; margin: 5px 0 0 20px; color: #c2d9ed; font-size: .65rem; font-weight: 400; }
.ikm-report-link:hover { color: #d5f2bc; text-decoration: none; }
.ikm-report-link .fa-file-pdf { margin-right: 6px; }
.ikm-participation { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.ikm-commitment { display: flex; align-items: flex-start; gap: 16px; padding: 24px 26px; border: 1px solid #cddfc7; border-radius: 22px; background: linear-gradient(120deg, #f0f8e9, #fff); }
.ikm-quote-icon { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #e2f0d8; color: #487a35; }
.ikm-commitment h3 { margin: 0 0 8px; color: #214c41; font-size: 1.05rem; font-weight: 700; line-height: 1.4; }
.ikm-commitment p { margin: 0; color: #526f66; font-size: .82rem; line-height: 1.8; }
.ikm-survey-card { display: grid; grid-template-columns: minmax(0, 1fr) 160px; flex: 1; align-items: center; gap: 24px; padding: 26px; border: 1px solid #b8cde3; border-radius: 24px 24px 42px 24px; background: #fff; box-shadow: 0 12px 28px #173f751a; }
.ikm-survey-label { color: #4c6d92; font-size: .6rem; letter-spacing: .1em; font-weight: 700; }
.ikm-survey-copy h3 { margin: 10px 0; color: #153967; font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; line-height: 1.4; }
.ikm-survey-copy p { margin: 0 0 20px; color: #596f87; font-size: .85rem; line-height: 1.7; }
.ikm-survey-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 44px; padding: 12px 16px; border-left: 3px solid #8bd553; border-radius: 11px; background: #235da8; color: #fff; font-size: .8rem; font-weight: 600; box-shadow: 0 5px 12px #173f751a; transition: background .2s, box-shadow .2s; }
.ikm-survey-button:hover { background: #17477f; color: #fff; text-decoration: none; box-shadow: 0 8px 18px #173f7526; }
.ikm-qr { margin: 0; padding: 12px; border: 1px solid #dce7f2; border-radius: 18px; background: #f5f9ff; text-align: center; }
.ikm-qr a { display: block; padding: 8px; border-radius: 10px; background: #fff; }
.ikm-qr img { display: block; width: 100%; height: auto; }
.ikm-qr figcaption { margin-top: 10px; color: #56718d; font-size: .7rem; line-height: 1.5; }
.ikm-section a:focus-visible { outline: 3px solid #70a2d4; outline-offset: 4px; }
@media (max-width: 1199px) { .ikm-layout { gap: 20px; } .ikm-survey-card { grid-template-columns: minmax(0, 1fr) 140px; gap: 16px; padding: 22px; } }
@media (max-width: 991px) { .ikm-layout { grid-template-columns: minmax(0, 1fr); } .ikm-score-display { padding: 24px 0; } .ikm-score-value { font-size: 5.5rem; } }
@media (max-width: 575px) { .ikm-score-card { padding: 22px; } .ikm-commitment { gap: 12px; padding: 20px; } .ikm-survey-card { grid-template-columns: minmax(0, 1fr); } .ikm-qr { width: 160px; justify-self: center; } .ikm-survey-button { display: flex; } }
@media (prefers-reduced-motion: reduce) { .ikm-survey-button { transition: none; } }
body.aksesibilitas-mode #pagepiling > .ikm-section, body.aksesibilitas-mode .ikm-score-card, body.aksesibilitas-mode .ikm-commitment, body.aksesibilitas-mode .ikm-survey-card, body.aksesibilitas-mode .ikm-survey-button { background: #000; color: #ffd700; border-color: #ffd700; }
body.aksesibilitas-mode .ikm-section p, body.aksesibilitas-mode .ikm-score-label, body.aksesibilitas-mode .ikm-eyebrow, body.aksesibilitas-mode .ikm-survey-label, body.aksesibilitas-mode .ikm-report-link, body.aksesibilitas-mode .ikm-report-link small { color: #ffd700; }