.bidang-detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.bidang-detail-heading > div { max-width: 850px; }
.bidang-detail-heading h1 { margin: 10px 0 0; color: #153967; font-size: clamp(1.7rem, 3.1vw, 3rem); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; overflow-wrap: anywhere; }
.bidang-detail-heading > p { flex: 0 1 280px; margin: 0; padding-left: 16px; border-left: 3px solid #89bc78; color: #587089; font-size: .85rem; line-height: 1.8; }
.bidang-detail-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 28px; }
.bidang-detail-navigation a { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 96px; padding: 18px 20px; overflow: hidden; border: 1px solid #d2e1ec; border-radius: 16px; background: #ffffffd9; color: #153967; box-shadow: 0 4px 14px #15396706; transition: background .2s, border-color .2s; }
.bidang-detail-navigation strong { font-size: .96rem; font-weight: 700; }
.bidang-detail-navigation span { margin-top: 6px; font-size: .73rem; color: #61778c; line-height: 1.6; }
.bidang-detail-navigation a:hover { text-decoration: none; background: #edf5fa; border-color: #a8c8db; }
.bidang-detail-navigation a[aria-current] { border-color: #21556a; background: radial-gradient(ellipse at 100% 100%, #2b806b80, transparent 75%), #153967; color: #fff; box-shadow: 0 6px 18px #15396718; }
.bidang-detail-navigation a[aria-current] span { color: #d4e7ed; }
.bidang-detail-navigation a[aria-current]::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: #9bcf85; }
.bidang-detail-story { border-radius: 24px 24px 34px 24px; }
.bidang-detail-content { overflow-wrap: anywhere; }
.bidang-detail-content > :first-child { margin-top: 0; }
.bidang-detail-content table { max-width: 100%; }
.bidang-detail-content iframe { width: 100%; }
.bidang-detail-bottom { margin-top: 28px; padding-top: 20px; border-top: 1px solid #e1eaf3; }
.bidang-detail-bottom a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 15px; border: 1px solid #d0e2ed; border-radius: 12px; background: #f2f7fc; color: #235da8; font-size: .8rem; font-weight: 600; }
.bidang-detail-bottom a:hover { background: #e7f1f8; text-decoration: none; }
.bidang-detail-help .profile-eyebrow { margin-bottom: 12px; color: #c7e5c2; }
@media (max-width: 991px) { .bidang-detail-heading { flex-direction: column; align-items: flex-start; gap: 18px; } .bidang-detail-heading > p { flex: auto; max-width: 560px; } .bidang-detail-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .bidang-detail-navigation { gap: 8px; } .bidang-detail-navigation a { padding: 14px; min-height: 100px; border-radius: 13px; } .bidang-detail-navigation span { font-size: .7rem; } .bidang-detail-heading h1 { font-size: 1.7rem; } }
@media (prefers-reduced-motion: reduce) { .bidang-detail-navigation a { transition: none; } }
body.aksesibilitas-mode .bidang-detail-navigation a, body.aksesibilitas-mode .bidang-detail-bottom a { background: #000; color: #ffd700; border-color: #ffd700; }
body.aksesibilitas-mode .bidang-detail-heading h1, body.aksesibilitas-mode .bidang-detail-navigation span { color: #ffd700; }
body.aksesibilitas-mode .bidang-detail-navigation a[aria-current] { outline: 2px solid #ffd700; outline-offset: -4px; }