:root {
     --pa-green: #0f6b45;
     --pa-green-dark: #06402d;
     --pa-gold: #d6a72a;
     --pa-bg: #f4f8f6;
     --pa-text: #17312b;
     --pa-muted: #64746f;
     --pa-border: #e2ebe6;
     --pa-radius: 16px;
     --pa-shadow: 0 4px 20px rgba(0, 0, 0, .06)
 }


 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }


 html,
 body {
     background: var(--pa-bg);
     color: var(--pa-text);
     font-family: 'Segoe UI', Arial, sans-serif;
     line-height: 1.6;
     overflow-x: hidden
 }


 a {
     text-decoration: none;
     color: inherit
 }


 img {
     max-width: 100%;
     height: auto;
     display: block
 }


 #container,
 #main {
     width: 100% !important;
     max-width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
     background: var(--pa-bg) !important
 }


 body {
     background: var(--pa-bg) !important
 }


 .pa-container {
     width: 100%;
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 20px
 }



 /* Topbar */
 .pa-topbar {
     width: min(1180px, calc(100% - 32px));
     margin: 0 auto;
     background: var(--pa-green-dark);
     color: #fff;
     font-size: 13px;
     padding: 8px 0
 }


 .pa-topbar-inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 8px 20px
 }


 .pa-topbar i {
     color: var(--pa-gold);
     margin-right: 5px
 }


 .pa-topbar-left,
 .pa-topbar-right {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 6px 18px
 }



 /* Header */
 .pa-header {
     width: min(1180px, calc(100% - 32px));
     margin: 0 auto;
     background: #fff;
     border-bottom: 1px solid var(--pa-border);
     padding: 16px 0
 }


 .pa-header-inner {
     display: flex;
     align-items: center;
     gap: 16px
 }


 .pa-logo {
     width: 100px;
     height: 100px;
     flex-shrink: 0
 }


 .pa-logo img {
     width: 100%;
     height: 100%;
     object-fit: contain
 }


 .pa-logo-fallback {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: var(--pa-green);
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-weight: 700;
     font-size: 20px;
     flex-shrink: 0
 }


 .pa-header-text {
     flex: 1;
     min-width: 0
 }


 .pa-header-text small {
     display: inline-block;
     color: var(--pa-green);
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     opacity: .8;
     margin-bottom: 2px
 }


 .pa-header-text h1 {
     font-size: clamp(20px, 2.8vw, 30px);
     color: var(--pa-green-dark);
     font-weight: 900;
     line-height: 1.15;
     margin: 0 0 4px;
     letter-spacing: -.3px
 }


 .pa-header-text p {
     color: var(--pa-muted);
     font-size: 12px;
     letter-spacing: .5px;
     font-weight: 500
 }


 .pa-header-right {
     display: flex;
     align-items: center;
     gap: 10px;
     flex-shrink: 0
 }


 .pa-header-right img {
     max-height: 60px;
     width: auto
 }



 /* Navbar */
 .pa-navbar {
     width: min(1180px, calc(100% - 32px));
     margin: 0 auto;
     background: linear-gradient(90deg, var(--pa-green), var(--pa-green-dark));
     position: relative;
     z-index: 1000
 }


 .pa-nav-inner {
     display: flex;
     align-items: center;
     min-height: 52px;
     gap: 0
 }


 .pa-home-icon {
     width: 52px;
     height: 52px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--pa-gold);
     color: #fff;
     font-size: 22px;
     flex-shrink: 0
 }


 .pa-menu {
     flex: 1;
     min-width: 0
 }


 .pa-menu ul,
 .pa-menu li {
     list-style: none;
     margin: 0;
     padding: 0
 }


 .pa-menu>ul,
 .pa-menu .menu {
     display: flex;
     align-items: stretch;
     flex-wrap: wrap
 }


 .pa-menu li {
     position: relative
 }


 .pa-menu>ul>li>a,
 .pa-menu .menu>li>a {
     display: flex;
     align-items: center;
     padding: 0 16px;
     min-height: 52px;
     color: #fff;
     font-size: 14px;
     font-weight: 600;
     white-space: nowrap;
     transition: background .2s
 }


 .pa-menu>ul>li>a,
 .pa-menu .menu>li>a {
     background: transparent !important;
     color: #fff !important;
     border-radius: 6px;
     margin: 6px 3px;
     min-height: 40px;
     padding: 0 14px
 }


 .pa-menu>ul>li>a:hover,
 .pa-menu .menu>li>a:hover,
 .pa-menu>ul>li.active>a,
 .pa-menu .menu>li.active>a,
 .pa-menu>ul>li.current>a,
 .pa-menu .menu>li.current>a {
     background: rgba(255, 255, 255, .14) !important;
     color: #fff !important
 }


 .pa-menu li ul {
     display: none;
     position: absolute;
     top: 100%;
     left: 0;
     min-width: 220px;
     background: var(--pa-green);
     border-radius: 0 0 10px 10px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .2);
     z-index: 9999;
     padding: 4px 0
 }


 .pa-menu li:hover>ul {
     display: block
 }


 .pa-menu li ul a {
     display: block;
     padding: 10px 16px;
     color: #fff;
     font-size: 13px;
     border-bottom: 1px solid rgba(255, 255, 255, .08)
 }


 .pa-menu li ul a:hover {
     background: var(--pa-gold);
     color: #fff
 }


 .pa-menu li ul li ul {
     top: 0;
     left: 100%
 }


 .pa-search-btn {
     width: 44px;
     height: 44px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 20px;
     margin-left: auto;
     cursor: pointer;
     border: 0;
     background: transparent
 }


 .pa-menu-toggle {
     display: none;
     width: 44px;
     height: 44px;
     border: 0;
     background: transparent;
     color: #fff;
     font-size: 24px;
     cursor: pointer;
     align-items: center;
     justify-content: center
 }



 /* Hero Slider */
 .pa-hero {
     position: relative;
     width: min(1180px, calc(100% - 32px));
     max-width: 1180px;
     margin: 0 auto;
     overflow: hidden;
     border-radius: 0 0 var(--pa-radius) var(--pa-radius)
 }


 .pa-hero .slides-wrap {
     position: relative;
     height: 460px;
     background: var(--pa-green-dark)
 }


 .pa-hero .slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     pointer-events: none;
     transition: opacity .7s ease
 }


 .pa-hero .slide.active {
     opacity: 1;
     pointer-events: auto;
     z-index: 2
 }


 .pa-hero .slide-bg {
     position: absolute;
     inset: 0
 }


 .pa-hero .slide-bg img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center right
 }


 .pa-hero .slide-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(6, 64, 45, .96) 0%, rgba(15, 107, 69, .86) 34%, rgba(15, 107, 69, .42) 52%, rgba(15, 107, 69, .08) 68%, transparent 82%);
     z-index: 1
 }


 .pa-hero .slide-content {
     position: relative;
     z-index: 3;
     height: 460px;
     display: flex;
     align-items: center;
     padding: 0 50px
 }


 .pa-hero .slide-text {
     max-width: 520px;
     color: #fff
 }


 .pa-hero .slide-text h2 {
     font-size: clamp(28px, 4vw, 44px);
     font-weight: 900;
     line-height: 1.1;
     margin-bottom: 16px;
     font-style: italic
 }


 .pa-hero .slide-text h2 span {
     display: block;
     color: var(--pa-gold)
 }


 .pa-hero .slide-text p {
     font-size: 15px;
     line-height: 1.7;
     color: rgba(255, 255, 255, .85);
     margin-bottom: 24px;
     max-width: 460px
 }


 .pa-hero .slide-buttons {
     display: flex;
     gap: 12px;
     flex-wrap: wrap
 }


 .pa-hero .slide-btn {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     padding: 12px 24px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 700;
     transition: all .2s
 }


 .pa-hero .slide-btn.primary {
     background: var(--pa-gold);
     color: #fff
 }


 .pa-hero .slide-btn.primary:hover {
     background: #c4951f;
     transform: translateY(-2px)
 }


 .pa-hero .slide-btn.outline {
     background: transparent;
     color: #fff;
     border: 2px solid rgba(255, 255, 255, .5)
 }


 .pa-hero .slide-btn.outline:hover {
     border-color: #fff;
     background: rgba(255, 255, 255, .1)
 }


 .pa-hero-dots {
     position: absolute;
     bottom: 24px;
     left: 50px;
     z-index: 10;
     display: flex;
     gap: 10px
 }


 .pa-hero-dots button {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, .5);
     background: transparent;
     cursor: pointer;
     padding: 0;
     transition: all .3s
 }


 .pa-hero-dots button.active {
     background: var(--pa-gold);
     border-color: var(--pa-gold);
     transform: scale(1.3)
 }


 .pa-hero-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: 2px solid rgba(255, 255, 255, .3);
     background: rgba(0, 63, 37, .5);
     color: #fff;
     font-size: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all .2s;
     backdrop-filter: blur(3px)
 }


 .pa-hero-arrow:hover {
     background: rgba(0, 63, 37, .9);
     border-color: var(--pa-gold)
 }


 .pa-hero-arrow.prev {
     left: 14px
 }


 .pa-hero-arrow.next {
     right: 14px
 }



 /* Main Layout */
 .pa-main {
     display: grid;
     grid-template-columns: 1fr 320px;
     gap: 24px;
     margin: 24px auto;
     max-width: 1180px;
     padding: 0 20px;
     align-items: start
 }


 .pa-content {
     display: grid;
     gap: 20px
 }


 .pa-sidebar {
     display: grid;
     gap: 18px
 }


 .pa-card {
     background: #fff;
     border: 1px solid var(--pa-border);
     border-radius: var(--pa-radius);
     box-shadow: var(--pa-shadow);
     overflow: hidden
 }


 .pa-card-pad {
     padding: 22px
 }


 .pa-section-title {
     font-size: 18px;
     font-weight: 800;
     color: var(--pa-green-dark);
     margin-bottom: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px
 }


 .pa-section-title a {
     font-size: 12px;
     font-weight: 600;
     color: var(--pa-green);
     white-space: nowrap
 }



 /* Layanan Cepat */
 .pa-services-grid {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: 14px
 }


 .pa-service-item {
     text-align: center;
     padding: 20px 8px 16px;
     border-radius: 12px;
     border: 1px solid var(--pa-border);
     background: #fff;
     text-decoration: none !important;
     color: var(--pa-text);
     transition: all .25s;
     display: flex;
     flex-direction: column;
     align-items: center
 }


 .pa-service-item:hover {
     border-color: var(--pa-green);
     box-shadow: 0 6px 18px rgba(0, 92, 53, .1);
     transform: translateY(-3px)
 }


 .pa-service-icon {
     width: 50px;
     height: 50px;
     border-radius: 12px;
     background: #e8f7ef;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 10px
 }


 .pa-service-icon i {
     font-size: 24px;
     color: var(--pa-green)
 }


 .pa-service-item h4 {
     font-size: 12px;
     font-weight: 700;
     color: var(--pa-green-dark);
     margin-bottom: 4px
 }


 .pa-service-item p {
     font-size: 10px;
     color: var(--pa-muted);
     line-height: 1.3;
     margin-bottom: 8px
 }


 .pa-service-item .arrow {
     width: 22px;
     height: 22px;
     border-radius: 50%;
     background: var(--pa-green);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     margin-top: auto
 }


 .pa-service-item:hover .arrow {
     background: var(--pa-gold)
 }



 /* Prioritas Banner */
 .pa-prioritas-banner {
     border-radius: var(--pa-radius);
     overflow: hidden;
     box-shadow: var(--pa-shadow)
 }


 .pa-prioritas-banner img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: var(--pa-radius);
     transition: transform .3s
 }


 .pa-prioritas-banner:hover img {
     transform: scale(1.01)
 }



 /* Jadwal Sidang */
 .pa-jadwal-wrap {
     overflow: visible
 }


 .pa-jadwal-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
     gap: 10px;
     margin-bottom: 16px
 }


 .pa-jadwal-title {
     display: flex;
     align-items: center;
     gap: 10px
 }


 .pa-jadwal-title i {
     font-size: 22px;
     color: var(--pa-green);
     background: #e8f7ef;
     width: 36px;
     height: 36px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center
 }


 .pa-jadwal-title h3 {
     margin: 0;
     font-size: 17px;
     font-weight: 800;
     color: var(--pa-green-dark)
 }


 .pa-jadwal-date {
     font-size: 12px;
     color: var(--pa-muted);
     display: flex;
     align-items: center;
     gap: 5px
 }


 .pa-jadwal-table-wrap {
     overflow-x: auto;
     margin: 0 -22px;
     padding: 0 22px
 }


 .pa-jadwal-table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0;
     font-size: 12px
 }


 .pa-jadwal-table thead tr {
     background: var(--pa-green)
 }


 .pa-jadwal-table thead th {
     padding: 10px 12px;
     color: #fff;
     font-weight: 700;
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: .3px;
     white-space: nowrap;
     text-align: left
 }


 .pa-jadwal-table thead th:first-child {
     border-radius: 8px 0 0 8px
 }


 .pa-jadwal-table thead th:last-child {
     border-radius: 0 8px 8px 0
 }


 .pa-jadwal-table tbody tr {
     border-bottom: 1px solid var(--pa-border);
     transition: background .15s
 }


 .pa-jadwal-table tbody tr:hover {
     background: #f0f9f4
 }


 .pa-jadwal-table tbody td {
     padding: 11px 12px;
     color: var(--pa-text);
     vertical-align: middle;
     border-bottom: 1px solid var(--pa-border);
     white-space: nowrap
 }


 .pa-jadwal-table tbody td:first-child {
     font-weight: 700;
     color: var(--pa-green);
     text-align: center;
     width: 36px
 }


 .pa-jadwal-badge {
     display: inline-block;
     padding: 3px 10px;
     border-radius: 20px;
     font-size: 10px;
     font-weight: 700;
     white-space: nowrap
 }


 .pa-jadwal-badge.terjadwal {
     background: #e0f5ea;
     color: #0a7c4a
 }


 .pa-jadwal-badge.berlangsung {
     background: #fef3e2;
     color: #b87a0a
 }


 .pa-jadwal-badge.selesai {
     background: #e8e8e8;
     color: #555
 }


 .pa-jadwal-footer {
     text-align: center;
     margin-top: 16px
 }


 .pa-jadwal-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 10px 22px;
     border: 2px solid var(--pa-green);
     border-radius: 8px;
     color: var(--pa-green);
     font-size: 13px;
     font-weight: 700;
     transition: all .2s
 }


 .pa-jadwal-btn:hover {
     background: var(--pa-green);
     color: #fff
 }


 @media(max-width:767px) {
     .pa-jadwal-table-wrap {
         margin: 0 -16px;
         padding: 0 16px
     }


     .pa-jadwal-header {
         flex-direction: column;
         align-items: flex-start
     }


 }



 /* Two Column */
 .pa-two-col {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 18px
 }



 /* Pengumuman List */
 .pa-list {
     list-style: none;
     padding: 0;
     margin: 0
 }


 .pa-list li {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 11px 0;
     border-bottom: 1px solid #edf2ef;
     font-size: 13px
 }


 .pa-list li::before {
     content: '';
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--pa-gold);
     flex-shrink: 0
 }


 .pa-list li span:first-child {
     flex: 1;
     min-width: 0
 }


 .pa-list a {
     color: var(--pa-green) !important
 }


 .pa-list a:hover {
     color: var(--pa-gold) !important
 }


 .pa-date {
     color: var(--pa-muted);
     font-size: 11px;
     white-space: nowrap
 }



 /* News Item */
 .pa-news-item {
     display: grid;
     grid-template-columns: 100px 1fr;
     gap: 12px;
     padding: 10px 0;
     border-bottom: 1px solid #edf2ef
 }


 .pa-news-thumb {
     width: 100px;
     height: 68px;
     border-radius: 10px;
     overflow: hidden;
     background: #edf2ef
 }


 .pa-news-thumb img {
     width: 100%;
     height: 100%;
     object-fit: cover
 }


 .pa-news-item h4 {
     margin: 0 0 3px;
     font-size: 13px;
     color: var(--pa-green);
     line-height: 1.3
 }


 .pa-news-item h4 a {
     color: var(--pa-green)
 }


 .pa-news-item h4 a:hover {
     color: var(--pa-gold)
 }


 .pa-news-item p {
     margin: 0;
     font-size: 11px;
     color: var(--pa-muted);
     line-height: 1.4
 }



 /* Budget */
 .pa-budget {
     display: grid;
     grid-template-columns: 150px 1fr 240px;
     gap: 16px;
     align-items: center
 }


 .pa-circle {
     width: 110px;
     height: 110px;
     border: 10px solid #e6b22b;
     border-right-color: var(--pa-green);
     border-bottom-color: var(--pa-green);
     border-radius: 50%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     color: var(--pa-green);
     margin: 0 auto
 }


 .pa-budget-info {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px
 }


 .pa-budget-box {
     padding: 12px;
     border: 1px solid var(--pa-border);
     border-radius: 10px;
     font-size: 12px;
     color: var(--pa-text)
 }


 .pa-budget-box i {
     color: var(--pa-green);
     font-size: 20px;
     margin-right: 6px
 }


 .pa-budget-box strong {
     display: block;
     margin-top: 3px;
     font-size: 13px
 }


 .pa-service-today {
     background: linear-gradient(135deg, var(--pa-green), var(--pa-green-dark));
     color: #fff;
     border-radius: 12px;
     padding: 16px
 }


 .pa-service-today h4 {
     margin: 0 0 12px;
     font-size: 14px
 }


 .pa-service-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px
 }


 .pa-service-grid strong {
     color: var(--pa-gold);
     font-size: 22px
 }


 .pa-service-grid span {
     display: block;
     font-size: 11px
 }



 /* Map & Contact */
 .pa-map-contact {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 18px
 }


 .pa-map-box {
     min-height: 180px;
     border-radius: 12px;
     overflow: hidden;
     border: 1px solid var(--pa-border)
 }


 .pa-map-box iframe {
     width: 100%;
     min-height: 220px;
     border: 0;
     display: block
 }


 .pa-contact-list {
     list-style: none;
     padding: 0;
     margin: 0
 }


 .pa-contact-list li {
     margin-bottom: 10px;
     font-size: 13px;
     color: var(--pa-text)
 }


 .pa-contact-list i {
     color: var(--pa-green);
     margin-right: 8px
 }



 /* Sidebar */
 .pa-search-box {
     display: flex;
     border: 1px solid var(--pa-border);
     border-radius: 10px;
     overflow: hidden
 }


 .pa-search-box input {
     border: 0;
     padding: 12px 14px;
     width: 100%;
     outline: none;
     font-size: 14px
 }


 .pa-search-box button {
     width: 46px;
     border: 0;
     background: var(--pa-green);
     color: #fff;
     font-size: 20px;
     cursor: pointer
 }


 .pa-social {
     display: flex;
     gap: 10px;
     flex-wrap: wrap
 }


 .pa-social a {
     width: 38px;
     height: 38px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 20px
 }


 .pa-social a.facebook {
     background: #3b5998
 }


 .pa-social a.instagram {
     background: #e1306c
 }


 .pa-social a.youtube {
     background: #ff0000
 }


 .pa-social a.tiktok {
     background: #111
 }


 .pa-quick-links {
     display: grid;
     gap: 6px
 }


 .pa-quick-links a {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 11px 12px;
     border-radius: 8px;
     background: #f1f5f3;
     color: var(--pa-text);
     font-size: 13px;
     transition: all .2s
 }


 .pa-quick-links a:hover {
     background: #e0ede5;
     color: var(--pa-green)
 }



 /* Sidebar Links (Website Terkait) */
 .pa-sidebar-links h3,
 .pa-sidebar-links h4,
 .pa-sidebar-links h5 {
     margin: 0 0 12px;
     padding: 8px 12px;
     background: var(--pa-green);
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     border-radius: 8px
 }


 .pa-sidebar-links a {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 10px;
     margin-bottom: 5px;
     border-radius: 8px;
     background: #f0f7f3;
     color: var(--pa-green) !important;
     font-size: 12px;
     font-weight: 600;
     transition: all .2s;
     border: 1px solid transparent
 }


 .pa-sidebar-links a:hover {
     background: #d4f0df;
     border-color: var(--pa-green);
     transform: translateX(3px)
 }


 .pa-sidebar-links img {
     width: 24px;
     height: 24px;
     object-fit: contain;
     border-radius: 4px;
     flex-shrink: 0
 }


 .pa-sidebar-links table {
     width: 100%;
     border-collapse: separate;
     border-spacing: 0 4px
 }


 .pa-sidebar-links table td {
     padding: 0;
     vertical-align: middle
 }



 /* Footer */
 .pa-footer {
     width: min(1180px, calc(100% - 32px));
     margin: 30px auto 0;
     background: linear-gradient(90deg, var(--pa-green-dark), var(--pa-green));
     color: #fff;
     border-radius: var(--pa-radius) var(--pa-radius) 0 0;
     overflow: hidden
 }


 .pa-footer-main {
     padding: 30px 0;
     display: grid;
     grid-template-columns: 1.5fr 1fr 1fr;
     gap: 24px
 }


 .pa-footer h4 {
     margin: 0 0 10px;
     font-size: 15px
 }


 .pa-footer p,
 .pa-footer a {
     color: rgba(255, 255, 255, .85);
     font-size: 13px
 }


 .pa-footer a {
     display: block;
     margin-bottom: 5px
 }


 .pa-footer-bottom {
     border-top: 1px solid rgba(255, 255, 255, .15);
     padding: 14px 0;
     font-size: 12px;
     color: rgba(255, 255, 255, .8)
 }



 /* Child Header */
 .pa-child-header {
     background: linear-gradient(135deg, var(--pa-green-dark), var(--pa-green));
     color: #fff;
     padding: 40px 0
 }


 .pa-child-header h2 {
     margin: 0;
     font-size: 28px;
     font-weight: 800
 }



 /* Joomla overrides */
 .box.sheet,
 .box-body,
 .sheet-body,
 .layout-wrapper,
 .content-layout,
 .content-layout-row,
 .layout-cell,
 .box.post,
 .post-body,
 .post-inner,
 .postcontent,
 .art-layout-cell {
     width: auto !important;
     max-width: none !important;
     margin: 0 !important;
     padding: 0 !important;
     background: transparent !important;
     border: 0 !important;
     box-shadow: none !important;
     float: none !important
 }


 .cleared,
 .reset-box {
     clear: both
 }



 /* ========== RESPONSIVE ========== */

 /* Laptop 992-1199 */
 @media(max-width:1199px) {
     .pa-main {
         grid-template-columns: 1fr 280px;
         gap: 20px
     }


     .pa-services-grid {
         grid-template-columns: repeat(3, 1fr)
     }


     .pa-budget {
         grid-template-columns: 1fr
     }


     .pa-budget .pa-circle {
         margin-bottom: 12px
     }


 }



 /* Tablet 768-991 */
 @media(max-width:991px) {
     .pa-main {
         grid-template-columns: 1fr
     }


     .pa-sidebar {
         grid-template-columns: repeat(2, 1fr)
     }


     .pa-services-grid {
         grid-template-columns: repeat(3, 1fr)
     }


     .pa-hero .slides-wrap {
         height: 400px
     }


     .pa-hero .slide-content {
         height: 400px;
         padding: 0 30px
     }


     .pa-hero .slide-text h2 {
         font-size: 30px
     }


     .pa-map-contact {
         grid-template-columns: 1fr
     }


     .pa-footer-main {
         grid-template-columns: 1fr 1fr
     }


     .pa-two-col {
         grid-template-columns: 1fr 1fr
     }


 }



 /* HP besar 576-767 */
 @media(max-width:767px) {
     .pa-topbar-inner {
         flex-direction: column;
         align-items: flex-start;
         gap: 4px
     }


     .pa-topbar-right {
         display: none
     }


     .pa-header-inner {
         flex-wrap: wrap
     }


     .pa-header-right {
         display: none
     }


     .pa-logo {
         width: 60px;
         height: 60px
     }


     .pa-header-text h1 {
         font-size: 18px
     }


     .pa-menu-toggle {
         display: flex
     }


     .pa-menu {
         display: none;
         position: absolute;
         top: 52px;
         left: 0;
         right: 0;
         background: var(--pa-green);
         z-index: 9999;
         padding: 10px
     }


     .pa-menu.open {
         display: block
     }


     .pa-menu>ul,
     .pa-menu .menu {
         flex-direction: column
     }


     .pa-menu>ul>li>a,
     .pa-menu .menu>li>a {
         min-height: 44px;
         padding: 0 14px
     }


     .pa-menu li ul {
         position: static;
         box-shadow: none;
         border-radius: 0;
         padding-left: 12px;
         display: none
     }


     .pa-menu li.mobile-open>ul {
         display: block
     }


     .pa-hero .slides-wrap {
         height: 360px
     }


     .pa-hero .slide-content {
         height: 360px;
         padding: 0 20px
     }


     .pa-hero .slide-text h2 {
         font-size: 26px
     }


     .pa-hero .slide-text p {
         font-size: 13px
     }


     .pa-hero .slide-buttons .slide-btn {
         padding: 10px 16px;
         font-size: 13px
     }


     .pa-hero-dots {
         left: 20px;
         bottom: 16px
     }


     .pa-hero-arrow {
         width: 34px;
         height: 34px;
         font-size: 16px
     }


     .pa-hero-arrow.prev {
         left: 8px
     }


     .pa-hero-arrow.next {
         right: 8px
     }


     .pa-services-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px
     }


     .pa-two-col {
         grid-template-columns: 1fr
     }


     .pa-sidebar {
         grid-template-columns: 1fr
     }


     .pa-footer-main {
         grid-template-columns: 1fr
     }


     .pa-container {
         padding: 0 14px
     }


     .pa-budget {
         grid-template-columns: 1fr
     }


 }



 /* HP kecil <576 */
 @media(max-width:575px) {
     .pa-hero .slides-wrap {
         height: 320px
     }


     .pa-hero .slide-content {
         height: 320px;
         padding: 0 16px
     }


     .pa-hero .slide-text h2 {
         font-size: 22px
     }


     .pa-hero .slide-text p {
         font-size: 12px;
         margin-bottom: 16px
     }


     .pa-hero .slide-buttons {
         gap: 8px
     }


     .pa-hero .slide-btn {
         padding: 9px 14px;
         font-size: 12px
     }


     .pa-services-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px
     }


     .pa-service-icon {
         width: 40px;
         height: 40px
     }


     .pa-service-icon i {
         font-size: 20px
     }


     .pa-service-item h4 {
         font-size: 11px
     }


     .pa-service-item p {
         font-size: 9px
     }


     .pa-news-item {
         grid-template-columns: 80px 1fr;
         gap: 10px
     }


     .pa-news-thumb {
         width: 80px;
         height: 56px
     }


     .pa-section-title {
         font-size: 16px
     }


     .pa-card-pad {
         padding: 16px
     }


 }



 /* Force override template.css backgrounds */
 html,
 body,
 .art-sheet,
 .art-layout-wrapper,
 .art-content-layout,
 .art-content-layout-row,
 #main,
 #container,
 .sheet,
 .sheet-body,
 .layout-wrapper {
     background: var(--pa-bg) !important
 }



 /* Layanan Publik Page */
 .lp-wrap {
     font-family: 'Segoe UI', Arial, sans-serif;
     color: #17312b;
     line-height: 1.6;
     max-width: 100%
 }


 .lp-wrap * {
     box-sizing: border-box
 }


 .lp-layout {
     display: grid;
     grid-template-columns: 1fr 300px;
     gap: 24px;
     align-items: start
 }


 .lp-content {
     display: grid;
     gap: 20px
 }


 .lp-sidebar {
     display: grid;
     gap: 18px
 }


 .lp-search {
     display: flex;
     border: 1px solid var(--pa-border);
     border-radius: 10px;
     overflow: hidden;
     background: #fff;
     box-shadow: var(--pa-shadow)
 }


 .lp-search input {
     border: 0;
     padding: 14px 16px;
     flex: 1;
     font-size: 14px;
     outline: none;
     width: 100%
 }


 .lp-search button {
     padding: 0 20px;
     border: 0;
     background: var(--pa-green);
     color: #fff;
     font-size: 14px;
     font-weight: 700;
     cursor: pointer
 }


 .lp-search button:hover {
     background: var(--pa-green-dark)
 }


 .lp-cat-title {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 800;
     color: var(--pa-green-dark);
     margin-bottom: 14px;
     padding-bottom: 8px;
     border-bottom: 2px solid var(--pa-border)
 }


 .lp-cat-title i {
     color: var(--pa-green);
     font-size: 20px
 }


 .lp-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 12px;
     margin-bottom: 24px
 }


 .lp-card {
     background: #fff;
     border: 1px solid var(--pa-border);
     border-radius: 12px;
     padding: 18px 12px;
     text-align: center;
     transition: all .25s;
     text-decoration: none !important;
     color: var(--pa-text);
     display: block
 }


 .lp-card:hover {
     border-color: var(--pa-green);
     box-shadow: 0 6px 18px rgba(0, 92, 53, .1);
     transform: translateY(-3px)
 }


 .lp-card .lp-icon {
     width: 44px;
     height: 44px;
     border-radius: 10px;
     background: #e8f7ef;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 10px
 }


 .lp-card .lp-icon i {
     font-size: 22px;
     color: var(--pa-green)
 }


 .lp-card h4 {
     font-size: 12px;
     font-weight: 700;
     color: var(--pa-green-dark);
     margin: 0 0 4px;
     line-height: 1.3
 }


 .lp-card p {
     font-size: 10px;
     color: var(--pa-muted);
     margin: 0 0 8px;
     line-height: 1.3
 }


 .lp-card .lp-arrow {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     background: var(--pa-green);
     color: #fff;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 11px
 }


 .lp-card:hover .lp-arrow {
     background: var(--pa-gold)
 }


 .lp-sidebar-card {
     background: #fff;
     border: 1px solid var(--pa-border);
     border-radius: var(--pa-radius);
     padding: 20px;
     box-shadow: var(--pa-shadow)
 }


 .lp-sidebar-card h3 {
     font-size: 15px;
     font-weight: 800;
     color: var(--pa-green-dark);
     margin: 0 0 14px
 }


 .lp-info-list {
     list-style: none;
     padding: 0;
     margin: 0
 }


 .lp-info-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 11px 0;
     border-bottom: 1px solid var(--pa-border);
     font-size: 13px
 }


 .lp-info-list li:last-child {
     border-bottom: 0
 }


 .lp-info-list .li-icon {
     width: 30px;
     height: 30px;
     border-radius: 8px;
     background: #e8f7ef;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }


 .lp-info-list .li-icon i {
     font-size: 15px;
     color: var(--pa-green)
 }


 .lp-info-list .li-text {
     flex: 1
 }


 .lp-info-list .li-text strong {
     display: block;
     font-size: 12px;
     color: var(--pa-green-dark)
 }


 .lp-info-list .li-text span {
     font-size: 10px;
     color: var(--pa-muted)
 }


 .lp-contact {
     background: linear-gradient(135deg, var(--pa-green), var(--pa-green-dark));
     border-radius: var(--pa-radius);
     padding: 22px;
     color: #fff
 }


 .lp-contact h3 {
     font-size: 15px;
     margin: 0 0 6px
 }


 .lp-contact>p {
     font-size: 12px;
     color: rgba(255, 255, 255, .8);
     margin: 0 0 14px
 }


 .lp-contact-items {
     background: rgba(255, 255, 255, .1);
     border-radius: 10px;
     padding: 14px;
     margin-bottom: 14px;
     list-style: none
 }


 .lp-contact-items li {
     margin-bottom: 7px;
     font-size: 12px;
     display: flex;
     align-items: flex-start;
     gap: 8px
 }


 .lp-contact-items li:last-child {
     margin-bottom: 0
 }


 .lp-contact-items i {
     color: var(--pa-gold);
     font-size: 14px;
     margin-top: 2px;
     flex-shrink: 0
 }


 .lp-contact-btn {
     display: block;
     text-align: center;
     background: var(--pa-gold);
     color: #fff;
     padding: 10px;
     border-radius: 8px;
     font-size: 13px;
     font-weight: 700;
     text-decoration: none !important
 }


 .lp-contact-btn:hover {
     background: #c4951f;
     color: #fff !important
 }


 @media(max-width:991px) {
     .lp-layout {
         grid-template-columns: 1fr
     }

     .lp-sidebar {
         grid-template-columns: 1fr 1fr
     }

 }


 @media(max-width:767px) {
     .lp-grid {
         grid-template-columns: repeat(2, 1fr);
         gap: 8px
     }

     .lp-sidebar {
         grid-template-columns: 1fr
     }

 }


 @media(max-width:480px) {
     .lp-grid {
         grid-template-columns: 1fr 1fr
     }

     .lp-card {
         padding: 14px 8px
     }

     .lp-card h4 {
         font-size: 11px
     }

 }



 /* === INFORMASI PUBLIK PAGE === */
 .ip-wrap {
     font-family: 'Segoe UI', Arial, sans-serif;
     color: #17312b;
     line-height: 1.6;
     max-width: 100%
 }


 .ip-wrap * {
     box-sizing: border-box
 }


 .ip-layout {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px
 }


 .ip-content {
     display: grid;
     gap: 20px
 }


 .ip-section-title {
     font-size: 18px;
     font-weight: 800;
     color: var(--pa-green-dark);
     margin-bottom: 16px;
     padding-bottom: 10px;
     border-bottom: 2px solid var(--pa-border)
 }



 /* Grid Kategori - 3 kolom */
 .ip-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 14px;
     margin-bottom: 8px
 }


 .ip-card {
     background: #fff;
     border: 1px solid var(--pa-border);
     border-radius: 14px;
     padding: 20px 16px;
     display: flex;
     align-items: flex-start;
     gap: 14px;
     transition: all .25s;
     text-decoration: none !important;
     color: var(--pa-text);
     position: relative
 }


 .ip-card:hover {
     border-color: var(--pa-green);
     box-shadow: 0 6px 20px rgba(0, 92, 53, .12);
     transform: translateY(-3px)
 }


 .ip-card .ip-icon {
     width: 46px;
     height: 46px;
     border-radius: 12px;
     background: #e8f7ef;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }


 .ip-card .ip-icon i {
     font-size: 22px;
     color: var(--pa-green)
 }


 .ip-card .ip-text {
     flex: 1;
     min-width: 0
 }


 .ip-card .ip-text h4 {
     font-size: 13px;
     font-weight: 700;
     color: var(--pa-green-dark);
     margin: 0 0 3px;
     line-height: 1.3
 }


 .ip-card .ip-text p {
     font-size: 11px;
     color: var(--pa-muted);
     margin: 0;
     line-height: 1.4
 }


 .ip-card .ip-arrow {
     position: absolute;
     bottom: 14px;
     right: 14px;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: var(--pa-green);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 12px;
     transition: background .2s
 }


 .ip-card:hover .ip-arrow {
     background: var(--pa-gold)
 }



 /* Banner Komitmen */
 .ip-commitment {
     background: #fff;
     border: 1px solid var(--pa-border);
     border-radius: 14px;
     padding: 22px 24px;
     display: flex;
     align-items: center;
     gap: 18px;
     box-shadow: 0 2px 12px rgba(0, 0, 0, .04);
     margin-top: 8px
 }


 .ip-commit-icon {
     width: 52px;
     height: 52px;
     border-radius: 50%;
     background: #e8f7ef;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }


 .ip-commit-icon i {
     font-size: 24px;
     color: var(--pa-green)
 }


 .ip-commit-text {
     flex: 1
 }


 .ip-commit-text h3 {
     font-size: 15px;
     font-weight: 800;
     color: var(--pa-green-dark);
     margin: 0 0 4px
 }


 .ip-commit-text p {
     font-size: 12px;
     color: var(--pa-muted);
     margin: 0;
     line-height: 1.5
 }


 .ip-commit-btn {
     padding: 10px 20px;
     border-radius: 8px;
     background: var(--pa-green);
     color: #fff;
     font-size: 12px;
     font-weight: 700;
     white-space: nowrap;
     transition: background .2s;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     flex-shrink: 0;
     text-decoration: none !important
 }


 .ip-commit-btn:hover {
     background: var(--pa-green-dark);
     color: #fff !important
 }



 /* Sidebar row - 3 kolom sejajar di bawah grid */
 .ip-sidebar {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 16px;
     margin-top: 8px
 }


 .ip-sidebar-card {
     background: #fff;
     border: 1px solid var(--pa-border);
     border-radius: var(--pa-radius);
     padding: 18px;
     box-shadow: var(--pa-shadow)
 }


 .ip-sidebar-card h3 {
     font-size: 14px;
     font-weight: 800;
     color: var(--pa-green-dark);
     margin: 0 0 12px;
     display: flex;
     align-items: center;
     gap: 8px
 }


 .ip-sidebar-card h3 i {
     color: var(--pa-green);
     font-size: 18px
 }



 /* Search */
 .ip-search {
     display: flex;
     border: 1px solid var(--pa-border);
     border-radius: 10px;
     overflow: hidden;
     background: #fff
 }


 .ip-search input {
     border: 0;
     padding: 11px 14px;
     flex: 1;
     font-size: 13px;
     outline: none;
     width: 100%
 }


 .ip-search button {
     padding: 0 16px;
     border: 0;
     background: var(--pa-green);
     color: #fff;
     font-size: 16px;
     cursor: pointer;
     transition: background .2s
 }


 .ip-search button:hover {
     background: var(--pa-green-dark)
 }



 /* Populer List */
 .ip-popular-list {
     list-style: none;
     padding: 0;
     margin: 0
 }


 .ip-popular-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 9px 0;
     border-bottom: 1px solid var(--pa-border);
     font-size: 12px;
     cursor: pointer;
     transition: color .2s
 }


 .ip-popular-list li:last-child {
     border-bottom: 0
 }


 .ip-popular-list li:hover {
     color: var(--pa-green)
 }


 .ip-popular-list .li-icon {
     width: 28px;
     height: 28px;
     border-radius: 7px;
     background: #e8f7ef;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }


 .ip-popular-list .li-icon i {
     font-size: 13px;
     color: var(--pa-green)
 }


 .ip-popular-list .li-text {
     flex: 1;
     font-weight: 500
 }


 .ip-popular-list .li-chevron {
     color: var(--pa-muted);
     font-size: 14px;
     flex-shrink: 0
 }



 /* Download List */
 .ip-download-list {
     list-style: none;
     padding: 0;
     margin: 0
 }


 .ip-download-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 0;
     border-bottom: 1px solid var(--pa-border)
 }


 .ip-download-list li:last-child {
     border-bottom: 0
 }


 .ip-download-list .dl-icon {
     width: 32px;
     height: 32px;
     border-radius: 8px;
     background: #fef3e2;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0
 }


 .ip-download-list .dl-icon i {
     font-size: 16px;
     color: var(--pa-gold)
 }


 .ip-download-list .dl-info {
     flex: 1;
     min-width: 0
 }


 .ip-download-list .dl-info strong {
     display: block;
     font-size: 12px;
     color: var(--pa-green-dark);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis
 }


 .ip-download-list .dl-info span {
     font-size: 10px;
     color: var(--pa-muted)
 }


 .ip-download-list .dl-btn {
     padding: 5px 12px;
     border-radius: 6px;
     background: #e8f7ef;
     color: var(--pa-green);
     font-size: 11px;
     font-weight: 700;
     border: 1px solid var(--pa-green);
     transition: all .2s;
     cursor: pointer;
     text-decoration: none !important;
     white-space: nowrap
 }


 .ip-download-list .dl-btn:hover {
     background: var(--pa-green);
     color: #fff !important
 }



 /* Responsive */
 @media(max-width:991px) {
     .ip-grid {
         grid-template-columns: repeat(2, 1fr)
     }

     .ip-sidebar {
         grid-template-columns: 1fr 1fr 1fr
     }

     .ip-commitment {
         flex-direction: column;
         text-align: center
     }

 }


 @media(max-width:767px) {
     .ip-grid {
         grid-template-columns: 1fr;
         gap: 10px
     }

     .ip-sidebar {
         grid-template-columns: 1fr
     }

     .ip-commitment {
         flex-direction: column;
         padding: 18px;
         text-align: center
     }

     .ip-commit-btn {
         width: 100%;
         justify-content: center
     }

     .ip-card {
         padding: 16px 14px
     }

 }


 @media(max-width:480px) {
     .ip-grid {
         grid-template-columns: 1fr 1fr;
         gap: 8px
     }

     .ip-card {
         padding: 12px 10px;
         gap: 10px
     }

     .ip-card .ip-icon {
         width: 36px;
         height: 36px
     }

     .ip-card .ip-icon i {
         font-size: 17px
     }

     .ip-card .ip-text h4 {
         font-size: 11px
     }

     .ip-card .ip-text p {
         font-size: 10px
     }

     .ip-sidebar {
         grid-template-columns: 1fr
     }

 }



 /* === OVERRIDE BACKGROUND HIJAU DARI TEMPLATE LAMA === */
 html,
 body {
     background: #f3f7f5 !important
 }


 body,
 .art-sheet,
 .art-layout-wrapper,
 .art-content-layout,
 .art-content-layout-row,
 .layout-wrapper,
 .content-layout,
 .content-layout-row,
 .sheet,
 .sheet-body,
 .box.sheet,
 .box-body {
     background: #f3f7f5 !important;
     background-color: #f3f7f5 !important
 }


 #main,
 #container,
 .layout-cell {
     background: transparent !important;
     background-color: transparent !important
 }



 /* Sembunyikan slider/banner lama dari modul Joomla */
 .art-slider,
 .art-slideshow,
 .nivo-slider,
 .nivoSlider,
 .camera_wrap,
 .camera_slider,
 .sp-slider,
 .sj-slider,
 .mod-banner,
 .bannergroup,
 .banner-slide,
 .slideshow-container,
 .djslider,
 .wk-slideshow {
     display: none !important;
     max-height: 0 !important;
     overflow: hidden !important
 }



 /* Paksa semua elemen setelah navbar tidak punya bg hijau */
 .pa-navbar~* {
     background-color: transparent !important
 }


 .pa-navbar~.pa-hero,
 .pa-navbar~.pa-child-header {
     background-color: unset !important
 }




 /* Revisi ringkas sesuai catatan: sidebar tidak panjang, jadwal 3-5 baris, layanan tidak dobel */
 .pa-prioritas-card {
     min-height: 230px;
     background: linear-gradient(135deg, var(--pa-green-dark), var(--pa-green));
     border-radius: var(--pa-radius);
     box-shadow: var(--pa-shadow);
     padding: 26px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 22px;
     color: #fff;
     overflow: hidden;
     position: relative
 }


 .pa-prioritas-card:after {
     content: "";
     position: absolute;
     right: -60px;
     top: -60px;
     width: 200px;
     height: 200px;
     border-radius: 50%;
     background: rgba(215, 167, 43, .18)
 }


 .pa-prioritas-content {
     position: relative;
     z-index: 1;
     max-width: 720px
 }

 .pa-kicker {
     display: inline-flex;
     padding: 5px 12px;
     border-radius: 999px;
     background: rgba(215, 167, 43, .18);
     color: var(--pa-gold);
     font-size: 12px;
     font-weight: 800;
     margin-bottom: 8px
 }

 .pa-prioritas-content h3 {
     margin: 0;
     font-size: 24px;
     font-weight: 900
 }

 .pa-prioritas-content p {
     margin: 4px 0 12px;
     color: rgba(255, 255, 255, .86);
     font-size: 13px
 }

 .pa-prioritas-content ul {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 6px 20px;
     margin: 0;
     padding: 0;
     list-style: none
 }

 .pa-prioritas-content li {
     font-size: 13px;
     color: rgba(255, 255, 255, .92);
     display: flex;
     gap: 8px
 }

 .pa-prioritas-content li:before {
     content: "";
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: var(--pa-gold);
     margin-top: 8px;
     flex-shrink: 0
 }

 .pa-prioritas-btn {
     position: relative;
     z-index: 1;
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--pa-gold);
     color: #fff !important;
     border-radius: 10px;
     padding: 11px 18px;
     font-size: 13px;
     font-weight: 800;
     white-space: nowrap
 }

 .pa-prioritas-btn:hover {
     filter: brightness(.95)
 }


 .pa-sidebar {
     align-content: start
 }

 .pa-related-sites a:nth-of-type(n+6) {
     display: none !important
 }

 .pa-related-sites h3 {
     background: transparent !important;
     color: var(--pa-green-dark) !important;
     padding: 0 !important;
     margin: 0 0 12px !important
 }

 .pa-footer-main {
     grid-template-columns: 1.4fr 1fr 1fr 1fr
 }


 @media(max-width:991px) {
     .pa-prioritas-card {
         min-height: auto;
         align-items: flex-start;
         flex-direction: column
     }

     .pa-prioritas-content ul {
         grid-template-columns: 1fr
     }

     .pa-footer-main {
         grid-template-columns: 1fr 1fr
     }

 }


 @media(max-width:767px) {
     .pa-prioritas-card {
         padding: 20px
     }

     .pa-prioritas-content h3 {
         font-size: 20px
     }

     .pa-footer-main {
         grid-template-columns: 1fr
     }

 }

 /* === FORCE OVERRIDE: Menu hijau tanpa orange === */
 .pa-navbar .pa-menu a,
 .pa-navbar .pa-menu li a,
 .pa-navbar .pa-menu ul li a,
 .pa-navbar .pa-menu .menu li a,
 .pa-navbar .pa-nav-inner .pa-menu a,
 .pa-nav-inner a[class*="menu"],
 nav.pa-navbar a {
     background: transparent !important;
     background-color: transparent !important;
     border: none !important;
     color: #fff !important;
 }

 .pa-navbar .pa-menu a:hover,
 .pa-navbar .pa-menu li a:hover,
 .pa-navbar .pa-menu li.active>a,
 .pa-navbar .pa-menu li.current>a {
     background: rgba(255, 255, 255, .15) !important;
     color: #fff !important;
 }

 /* Home icon tetap gold */
 .pa-home-icon {
     background: var(--pa-gold) !important;
 }

 /* === FORCE LOGO LEBIH BESAR === */
 .pa-header .pa-logo,
 .pa-header-inner .pa-logo {
     width: 100px !important;
     height: 100px !important;
 }

 .pa-header .pa-logo img,
 .pa-header-inner .pa-logo img {
     width: 100px !important;
     height: 100px !important;
     object-fit: contain;
 }

 /* === FINAL OVERRIDE: Paksa navbar hijau, hapus semua orange === */
 nav.pa-navbar .pa-nav-inner {
     background: linear-gradient(90deg, #0f6b45, #06402d) !important;
 }

 nav.pa-navbar .pa-menu .menu>li>a,
 nav.pa-navbar .pa-menu .nav>li>a,
 nav.pa-navbar .pa-menu ul>li>a,
 nav.pa-navbar .pa-menu>ul>li>a,
 nav.pa-navbar .pa-menu li>a,
 nav.pa-navbar .pa-menu a,
 body nav.pa-navbar .pa-menu a,
 html body nav.pa-navbar .pa-menu li a,
 html body .pa-navbar .pa-menu .menu li a {
     background: none !important;
     background-color: transparent !important;
     background-image: none !important;
     border: 0 !important;
     color: #fff !important;
     box-shadow: none !important;
 }

 html body nav.pa-navbar .pa-menu a:hover,
 html body nav.pa-navbar .pa-menu li:hover>a,
 html body nav.pa-navbar .pa-menu li.active>a,
 html body nav.pa-navbar .pa-menu li.current>a {
     background: rgba(255, 255, 255, .12) !important;
     color: #fff !important;
 }

 nav.pa-navbar .pa-menu li ul,
 nav.pa-navbar .pa-menu li .nav-child,
 nav.pa-navbar .pa-menu li .dropdown-menu {
     background: #0a5c3a !important;
     border: 1px solid rgba(255, 255, 255, .1) !important;
 }

 nav.pa-navbar .pa-menu li ul a,
 nav.pa-navbar .pa-menu li .nav-child a {
     background: transparent !important;
     color: #fff !important;
     border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
 }

 nav.pa-navbar .pa-menu li ul a:hover,
 nav.pa-navbar .pa-menu li .nav-child a:hover {
     background: rgba(255, 255, 255, .12) !important;
 }

 /* === Dropdown hover aktif - highlight item === */
 nav.pa-navbar .pa-menu li ul li:hover>a,
 nav.pa-navbar .pa-menu li .nav-child li:hover>a,
 nav.pa-navbar .pa-menu .menu li ul li:hover>a {
     background: var(--pa-gold) !important;
     color: #fff !important;
     border-radius: 4px;
 }

 nav.pa-navbar .pa-menu li ul li.active>a,
 nav.pa-navbar .pa-menu li ul li.current>a,
 nav.pa-navbar .pa-menu .menu li ul li.active>a {
     background: rgba(214, 167, 42, .25) !important;
     color: #fff !important;
     border-left: 3px solid var(--pa-gold) !important;
 }


/* === SIDEBAR ACCORDION (native details/summary) === */
.pa-accordion-details {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 0;
}

.pa-accordion-details summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 12px;
    border-radius: 8px;
    background: #f1f5f3;
    color: var(--pa-text);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.pa-accordion-details summary::-webkit-details-marker,
.pa-accordion-details summary::marker {
    display: none;
    content: '';
}

.pa-accordion-details summary:hover {
    background: #e0ede5;
    color: var(--pa-green);
}

.pa-accordion-details[open] summary {
    background: var(--pa-green);
    color: #fff;
    border-radius: 8px 8px 0 0;
}

.pa-accordion-details summary i {
    font-size: 18px;
    transition: transform .3s;
    flex-shrink: 0;
}

.pa-accordion-details[open] summary i {
    transform: rotate(180deg);
}

.pa-accordion-panel-native {
    display: grid;
    gap: 0;
    background: #f8fbf9;
    border: 1px solid var(--pa-border);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 6px 0;
}

.pa-accordion-panel-native a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 14px 9px 20px;
    color: var(--pa-text);
    font-size: 12px;
    font-weight: 500;
    transition: all .2s;
    border-left: 3px solid transparent;
    background: transparent;
    border-radius: 0;
}

.pa-accordion-panel-native a:hover {
    background: #e8f7ef;
    color: var(--pa-green);
    border-left-color: var(--pa-green);
}

.pa-accordion-panel-native a i {
    font-size: 14px;
    color: var(--pa-muted);
    flex-shrink: 0;
}

.pa-accordion-panel-native a:hover i {
    color: var(--pa-green);
}

/* Fix: pastikan quick-links tidak override accordion */
.pa-quick-links .pa-accordion-details {
    background: transparent;
    padding: 0;
}

.pa-quick-links .pa-accordion-details summary {
    margin: 0;
}