#pagepiling > #news-1 { display: block; 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-size: cover; background-position: center bottom; color: #153967; }
#news-1 > .fp-tableCell { display: block; height: auto !important; }
.news-container { width: 100%; max-width: 1440px; margin: 0 auto; }
.news-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.news-eyebrow { color: #4c6d92; font-size: .7rem; font-weight: 700; letter-spacing: .13em; }
.news-heading h2 { margin: 8px 0 12px; color: #153967; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 800; letter-spacing: -.025em; }
.news-heading p { margin: 0; color: #566e88; font-size: .95rem; line-height: 1.7; }
.news-all-link { display: inline-flex; align-items: center; gap: 16px; flex-shrink: 0; min-height: 44px; padding: 11px 18px; border: 1px solid #b8cde3; border-radius: 12px; background: #fff; color: #235da8; font-size: .8rem; font-weight: 700; }
.news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding: 10px 8px 22px 0; }
.news-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: linear-gradient(135deg, #fff 50%, #f2f7fd); box-shadow: 0 10px 22px #173f751a; transition: transform .2s, box-shadow .2s; }
.news-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); }
.news-card::after { content: ''; position: absolute; z-index: -1; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #fff 50%, #f2f7fd); }
.news-image { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 14px 14px 24px 14px; background: #e5eff9; }
.news-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.news-card-body { display: flex; flex-direction: column; flex: 1; padding: 16px 8px 8px; }
.news-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.news-tags:empty { display: none; }
.news-tags span { max-width: 100%; padding: 4px 8px; border-radius: 6px; background: #edf6e7; color: #39632e; font-size: .65rem; font-weight: 600; overflow-wrap: anywhere; }
.news-card h3 { margin: 0 0 10px; font-size: 1rem; font-weight: 700; line-height: 1.5; text-align: left; }
.news-card h3 a { color: #153967; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card p { margin: 0 0 20px; color: #596f87; font-size: .8rem; line-height: 1.7; }
.news-read-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; min-height: 44px; padding: 10px 12px; border-left: 3px solid #8bd553; border-radius: 11px; background: #235da8; color: #fff; font-size: .75rem; font-weight: 600; }
.news-read-link:hover { color: #fff; background: #17477f; text-decoration: none; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px #173f7526; }
.news-card:hover img { transform: scale(1.025); }
.news-controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.news-controls span { font-size: .75rem; color: #566e88; }
.news-controls button { width: 44px; height: 44px; border: 1px solid #b8cde3; border-radius: 50%; background: #fff; color: #235da8; cursor: pointer; }
.news-controls button:hover, .news-all-link:hover { background: #edf4ff; color: #17477f; text-decoration: none; }
#news-1 a:focus-visible, #news-1 button:focus-visible { outline: 3px solid #537fa9; outline-offset: 3px; }
.news-empty { padding: 24px; border: 1px solid #d7e4f2; border-radius: 18px; background: #fff; }
.news-instagram-heading { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; color: #153967; font-size: 1.3rem; font-weight: 700; }
.news-instagram-heading i { color: #235da8; }
#news-1 .instagram-box { width: 23%; min-width: 0; margin-bottom: 16px; padding: 8px; border: 1px solid #cbdcf0; border-radius: 18px; background: #fff; box-shadow: 0 8px 22px #173f7514; overflow: hidden; }
#news-1 .instagram-media { min-width: 0 !important; max-width: 100% !important; }
#carouselInstagram [data-slide] { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #235da8 !important; }
@media (max-width: 1199px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #news-1 .instagram-box { width: 48%; } }
@media (max-width: 575px) { .news-heading { align-items: flex-start; flex-direction: column; gap: 16px; } .news-grid { grid-template-columns: minmax(0, 1fr); } #news-1 .instagram-box { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .news-card, .news-image img { transition: none; } .news-card:hover, .news-card:hover img { transform: none; } }
body.aksesibilitas-mode #pagepiling > #news-1, body.aksesibilitas-mode .news-card, body.aksesibilitas-mode .news-card::before, body.aksesibilitas-mode .news-card::after, body.aksesibilitas-mode .news-read-link, body.aksesibilitas-mode .news-all-link, body.aksesibilitas-mode .news-controls button { background: #000; color: #ffd700; border-color: #ffd700; }
body.aksesibilitas-mode .news-card a, body.aksesibilitas-mode .news-card p, body.aksesibilitas-mode .news-heading p, body.aksesibilitas-mode .news-eyebrow, body.aksesibilitas-mode .news-controls span { color: #ffd700; }