/*
 * responsive.css — Mahkamah Agung Theme v2.6
 * CSS Custom Properties-based theming
 * Container lebar modern, mobile responsive
 */

/* ============================================================
   DEFAULT CSS VARS (Peradilan Umum = merah)
   Di-override oleh skin-override.css
   ============================================================ */
:root {
    --skin-primary: #8b000b;
    --skin-primary-dark: #6b0009;
    --skin-primary-darker: #4e0006;
    --skin-primary-light: #a01010;
    --skin-primary-rgb: 139, 0, 11;
    --skin-bg-light: #f7f5f5;
    --skin-bg-subtle: #fff;
    --skin-border: #e8dede;
    --skin-border-light: #f0e4e4;
    --skin-submenu-bg: #6b0009;
}

/* ============================================================
   RESET DASAR
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
embed {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--skin-primary);
}

a:hover,
a:visited {
    color: var(--skin-primary-dark);
}

/* ============================================================
   CONTAINER — lebar modern, tidak kaku
   ============================================================ */
.pn-container {
    width: 100%;
    max-width: 1380px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Seluruh halaman flex column */
#pn-wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

#pn-page-body {
    flex: 1;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.pn-topbar {
    background: var(--skin-primary-dark);
    color: #fff;
    font-size: 12px;
    padding: 6px 0;
    line-height: 1.4;
}

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

.pn-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pn-topbar-item {
    display: flex;
    align-items: center;
    gap: 5px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
}

.pn-topbar-item svg {
    flex-shrink: 0;
    opacity: 0.85;
}

.pn-topbar-right {
    display: flex;
    align-items: center;
}

.pn-topbar-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

/* Widget di topbar */
.pn-topbar-left .topbar-widget {
    display: inline-flex;
    align-items: center;
}

.pn-topbar-left .topbar-widget .blockcontent {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}

.pn-topbar-left .topbar-widget .blockcontent a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.pn-topbar-left .topbar-widget .blockcontent a:hover {
    color: #fff;
}

.pn-topbar-left .topbar-widget .blockcontent img {
    max-height: 18px;
    width: auto;
}

/* ============================================================
   SITE HEADER
   ============================================================ */
.pn-site-header {
    background: #fff;
    padding: 12px 0;
    border-bottom: 2px solid var(--skin-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.pn-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}

.pn-brand-area {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.pn-brand-logo {
    flex-shrink: 0;
}

.pn-brand-logo img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    display: block;
}

.pn-brand-logo a {
    display: block;
}

.pn-brand-text {
    min-width: 0;
}

.pn-brand-parent {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--skin-primary);
    letter-spacing: 0.4px;
    line-height: 1.3;
    margin-bottom: 1px;
    text-transform: uppercase;
}

.pn-brand-name-link {
    text-decoration: none;
}

.pn-brand-name {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0 0 2px;
    line-height: 1.15;
    font-family: 'Poppins', Arial, sans-serif;
}

.pn-brand-moto {
    font-size: 12px;
    color: var(--skin-primary);
    margin: 0;
    font-weight: 600;
    line-height: 1.4;
}

/* Badge (BeAKHLAK) di header */
.pn-header-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pn-header-badge img {
    max-height: 32px;
    width: auto;
    object-fit: contain;
}

/* Hamburger – tersembunyi di desktop */
.pn-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: var(--skin-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 8px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    -webkit-tap-highlight-color: transparent;
}

.pn-hamburger-line {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.25s ease;
}

.pn-nav-toggle.pn-active .pn-hamburger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.pn-nav-toggle.pn-active .pn-hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.pn-nav-toggle.pn-active .pn-hamburger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   MAIN NAVIGATION
   ============================================================ */
.pn-main-nav {
    background: var(--skin-primary);
    position: relative;
    z-index: 200;
}

.pn-menu-wrap {
    position: relative;
}

.pn-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
    flex-wrap: nowrap;
}

.pn-menu>li {
    position: relative;
}

.pn-menu>li>a {
    display: flex;
    align-items: center;
    padding: 13px 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Poppins', Arial, sans-serif;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    height: 100%;
    gap: 4px;
}

.pn-menu>li>a:hover,
.pn-menu>li.current-menu-item>a,
.pn-menu>li.current-menu-parent>a,
.pn-menu>li.current-menu-ancestor>a,
.pn-menu>li.current_page_item>a,
.pn-menu>li.current_page_parent>a {
    background: rgba(0, 0, 0, 0.25);
    color: #fff;
}

.pn-nav-arrow {
    font-style: normal;
    font-size: 8px;
    display: inline-block;
    transition: transform 0.2s;
}

/* Submenu level 2 */
.pn-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    width: max-content;
    /* lebar menyesuaikan konten */
    max-width: 400px;
    /* batas maksimum agar tidak terlalu lebar */
    background: var(--skin-submenu-bg);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    z-index: 500;
    border-top: 3px solid rgba(255, 255, 255, 0.12);
}

.pn-menu>li:hover>.pn-submenu,
.pn-menu>li.menu-item-has-children:hover>.pn-submenu {
    display: block;
}

.pn-submenu>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pn-submenu>ul>li {
    position: relative;
}

.pn-submenu>ul>li>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 13px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transition: background 0.15s;
    white-space: nowrap;
    width: 100%;
    box-sizing: border-box;
}

.pn-submenu>ul>li>a:hover {
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
}

.pn-submenu>ul>li.current-menu-item>a {
    background: rgba(0, 0, 0, 0.2);
}

/* Submenu level 3 (fly-out) */
.pn-submenu>ul>li>.pn-submenu {
    top: 0;
    left: 100%;
    border-top: none;
    border-left: 2px solid rgba(255, 255, 255, 0.2);
}

.pn-submenu>ul>li:hover>.pn-submenu {
    display: block;
}

.sub-arrow {
    font-size: 10px;
    opacity: 0.7;
}

/* ============================================================
   HERO IDENTITY (blok di bawah nav)
   ============================================================ */
.pn-hero-identity {
    position: relative;
    background: var(--skin-primary);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 60px;
}

.pn-hero-identity-overlay {
    position: absolute;
    inset: 0;
    background: rgba(var(--skin-primary-rgb), 0.82);
}

.pn-hero-identity>.pn-container {
    position: relative;
    z-index: 2;
}

.pn-hero-identity-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0 12px;
}

/* Poin 3: Spotlight centered dengan teks putih */
.pn-hero-main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.pn-hero-right-col {
    flex-shrink: 0;
}

/* Spotlight pill - centered */
.pn-hero-spotlight {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    padding: 8px 22px 8px 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 700px;
    text-align: center;
}

.pn-hero-spotlight-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: pnPulse 2s ease-in-out infinite;
}

@keyframes pnPulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .5;
        transform: scale(.82);
    }
}

/* Poin 3: teks putih, centered */
.pn-hero-spotlight-text,
.pn-hero-spotlight-text *,
.pn-hero-spotlight p,
.pn-hero-spotlight p * {
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .2px;
    line-height: 1.5;
    margin: 0;
}

/* BeAKHLAK */
.pn-hero-berakhlak img {
    max-height: 55px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
}

/* Header widget bar di dalam hero */
.pn-header-widget-bar {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, .22);
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 9px 0;
}

.pn-header-widget-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pn-header-widget-inner .header-widget {
    display: flex;
    align-items: center;
}

.pn-header-widget-inner .header-widget img {
    max-height: 52px;
    width: auto;
}

.pn-header-widget-inner .header-widget-title {
    display: none;
}

.pn-header-widget-inner .blockcontent {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.pn-header-widget-inner .blockcontent a {
    color: rgba(255, 255, 255, .85);
    font-size: 12px;
}

.pn-header-widget-inner .blockcontent a:hover {
    color: #fff;
}

.pn-header-widget-inner .blockcontent img {
    max-height: 50px;
    width: auto;
}

/* ============================================================
   CATEGORY SLIDER
   ============================================================ */
.pn-slider-section {
    position: relative;
    background: #111;
    overflow: hidden;
    line-height: 0;
}

.pn-cat-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    user-select: none;
    line-height: 1.5;
}

.pn-cat-slider-track {
    display: flex;
    transition: transform 0.55s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}

.pn-slide {
    min-width: 100%;
    flex: 0 0 100%;
    position: relative;
    height: 420px;
    /* Background warna solid sebagai fallback ketika tidak ada gambar */
    background-color: var(--skin-primary);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Overlay hanya di atas background-image, bukan di atas warna solid */
.pn-slide-overlay {
    position: absolute;
    inset: 0;
    /* Default: gradient dari kiri ke kanan untuk readability */
    background: linear-gradient(100deg,
            rgba(0, 0, 0, 0.65) 0%,
            rgba(0, 0, 0, 0.35) 55%,
            rgba(0, 0, 0, 0.10) 100%);
}

/* pn-container di dalam slide untuk margin konsisten */
.pn-slide-content {
    position: relative;
    z-index: 2;
    max-width: 1380px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pn-slide-content-inner {
    max-width: 660px;
}

.pn-slide-meta {
    margin-bottom: 10px;
}

.pn-slide-date {
    font-size: 12px;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    letter-spacing: .3px;
}

.pn-slide-title {
    font-size: 30px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    line-height: 1.25;
    font-family: 'Poppins', Arial, sans-serif;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

.pn-slide-title a {
    color: #fff;
}

.pn-slide-title a:hover {
    color: #ffe0a0;
}

.pn-slide-excerpt {
    font-size: 14px;
    color: rgba(255, 255, 255, .88);
    margin: 0 0 20px;
    line-height: 1.68;
    max-width: 560px;
}

.pn-slide-btn {
    display: inline-block;
    padding: 10px 24px;
    background: #fff;
    color: var(--skin-primary);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s;
    font-family: 'Poppins', Arial, sans-serif;
}

.pn-slide-btn:hover {
    background: #f5f5f5;
    color: var(--skin-primary-dark);
}

/* Slider controls */
.pn-slider-prev,
.pn-slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    background: rgba(255, 255, 255, .18);
    border: 2px solid rgba(255, 255, 255, .45);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background 0.2s;
}

.pn-slider-prev {
    left: 20px;
}

.pn-slider-next {
    right: 20px;
}

.pn-slider-prev:hover,
.pn-slider-next:hover {
    background: rgba(255, 255, 255, .35);
}

.pn-slider-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.pn-slider-dot {
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, .4);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.pn-slider-dot.pn-dot-active {
    background: #fff;
    width: 28px;
    border-radius: 5px;
}

.pn-slider-empty {
    background: var(--skin-primary);
    line-height: 1.5;
}

/* Loader spinner */
.pn-rss-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #888;
    font-size: 12px;
    padding: 12px 0;
}

.pn-rss-loading span {
    width: 12px;
    height: 12px;
    border: 2px solid #ddd;
    border-top-color: var(--skin-primary);
    border-radius: 50%;
    display: inline-block;
    animation: pnSpin 0.8s linear infinite;
}

@keyframes pnSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.pn-breadcrumb {
    background: #fafafa;
    border-bottom: 1px solid var(--skin-border);
    padding: 8px 0;
    font-size: 12px;
    color: #888;
}

.pn-breadcrumb a {
    color: var(--skin-primary);
}

.pn-breadcrumb-current {
    color: #555;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.pn-content-wrap {
    padding: 28px 0 36px;
    background: #f5f5f5;
}

.pn-layout-row {
    display: flex;
    gap: 26px;
    align-items: flex-start;
}

.pn-main-content {
    flex: 1 1 0;
    min-width: 0;
}

.pn-sidebar {
    width: 290px;
    flex-shrink: 0;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.pn-sidebar-box {
    background: #fff;
    border: 1px solid var(--skin-border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 18px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
}

.pn-sidebar-head {
    background: var(--skin-primary);
    padding: 10px 14px;
}

.pn-sidebar-title {
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    letter-spacing: .3px;
}

.pn-sidebar-box-body {
    padding: 12px 14px;
    font-size: 13px;
    color: #333;
}

/* ============================================================
   SECTION HEAD
   ============================================================ */
.pn-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 9px;
    border-bottom: 2px solid var(--skin-primary);
}

.pn-section-head h3 {
    font-size: 13px;
    font-weight: 800;
    color: var(--skin-primary);
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.pn-see-all {
    font-size: 12px;
    color: var(--skin-primary);
    font-weight: 700;
    white-space: nowrap;
}

.pn-see-all:hover {
    text-decoration: underline;
}

/* ============================================================
   MAKLUMAT
   ============================================================ */
.pn-maklumat-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.pn-maklumat-box {
    background: #fff;
    border: 1.5px solid var(--skin-border);
    border-radius: 10px;
    padding: 5px 5px;
    display: flex;
    align-items: center;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.pn-maklumat-box:hover {
    transform: scale(1.05);
}

.pn-maklumat-img-head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 800;
    color: var(--skin-primary);
    font-family: 'Poppins', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    line-height: 1.3;
}

/* ============================================================
   BERITA + PENGUMUMAN
   ============================================================ */
.pn-news-announce-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

/* Subtitle Aksen Emas & Header Custom */
.pn-head-with-subtitle {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--skin-primary);
}

.pn-head-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pn-section-subtitle {
    font-size: 11px;
    font-weight: 800;
    color: #b38e2d;
    /* Aksen emas mewah */
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Poppins', Arial, sans-serif;
}

.pn-head-with-subtitle h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--skin-primary);
    margin: 0;
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
}

.pn-head-with-subtitle .pn-see-all {
    font-size: 13px;
    font-weight: 700;
    color: var(--skin-primary);
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: 2px;
}

.pn-head-with-subtitle .pn-see-all:hover {
    color: var(--skin-primary-dark);
    text-decoration: underline;
}

.pn-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.pn-news-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--skin-border-light);
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pn-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--skin-primary-rgb), 0.2);
}

.pn-news-thumb {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    display: block;
    margin: 0;
}

.pn-news-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.pn-news-card:hover .pn-news-thumb img {
    transform: scale(1.06);
}

.pn-news-thumb-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    padding: 20px 12px 10px;
    color: #fff;
    pointer-events: none;
}

.pn-news-thumb-overlay span {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.35;
    color: #ffffff;
    opacity: 0.95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pn-news-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.pn-news-date {
    display: block;
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
    font-weight: 600;
}

.pn-news-card-body h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.4;
    font-family: 'Poppins', Arial, sans-serif;
}

.pn-news-card-body h4 a {
    color: #111;
    text-decoration: none;
    transition: color 0.2s ease;
}

.pn-news-card-body h4 a:hover {
    color: var(--skin-primary);
}

.pn-news-excerpt {
    font-size: 12.5px;
    color: #555;
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pn-news-readmore {
    color: var(--skin-primary);
    font-weight: 700;
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}

.pn-news-readmore:hover {
    color: var(--skin-primary-dark);
    text-decoration: underline;
}

.pn-announce-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pn-announce-item {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--skin-border-light);
    align-items: flex-start;
}

.pn-announce-item:last-child {
    border-bottom: none;
}

.pn-announce-icon {
    flex-shrink: 0;
    color: var(--skin-primary);
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pn-announce-date {
    display: block;
    font-size: 12px;
    color: #888;
    font-weight: 600;
    margin-bottom: 4px;
}

.pn-announce-body {
    flex: 1;
    min-width: 0;
}

.pn-announce-body a {
    font-size: 14px;
    color: #1a1a1a;
    line-height: 1.45;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
}

.pn-announce-body a:hover {
    color: var(--skin-primary);
}

.pn-announce-empty {
    font-size: 13px;
    color: #888;
    padding: 16px 0;
}

/* ============================================================
   RSS SECTION
   ============================================================ */
.pn-rss-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 20px;
}

.pn-rss-feed-item {
    padding: 9px 0;
    border-bottom: 1px solid var(--skin-border-light);
    font-size: 13px;
}

.pn-rss-feed-item:last-child {
    border-bottom: none;
}

.pn-rss-feed-item a {
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.4;
    display: block;
}

.pn-rss-feed-item a:hover {
    color: var(--skin-primary);
}

.pn-rss-feed-date {
    display: block;
    font-size: 11px;
    color: #888;
    font-weight: 600;
    margin-bottom: 2px;
}

/* ============================================================
   INFO BOXES
   ============================================================ */
.pn-info-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.pn-info-box {
    background: #fff;
    border: 1.5px solid var(--skin-border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.pn-info-box-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.pn-info-box-icon svg {
    stroke: var(--skin-primary);
}

.pn-info-box h4 {
    font-size: 12px;
    font-weight: 800;
    color: var(--skin-primary);
    margin: 0 0 4px;
    font-family: 'Poppins', Arial, sans-serif;
    text-transform: uppercase;
}

.pn-info-box p {
    font-size: 12px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

.pn-btn-primary {
    display: inline-block;
    padding: 8px 18px;
    background: var(--skin-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.2s;
    font-family: 'Poppins', Arial, sans-serif;
}

.pn-btn-primary:hover,
.pn-btn-primary:visited {
    background: var(--skin-primary-dark);
    color: #fff;
}

/* ============================================================
   CONTACT + LAYANAN CEPAT
   ============================================================ */
.pn-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.pn-contact-box,
.pn-layanan-cepat-box {
    background: #fff;
    border: 1.5px solid var(--skin-border);
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
}

.pn-contact-box h4,
.pn-layanan-cepat-box h4 {
    font-size: 12px;
    font-weight: 800;
    color: var(--skin-primary);
    margin: 0 0 8px;
    font-family: 'Poppins', Arial, sans-serif;
    text-transform: uppercase;
}

.pn-contact-box p {
    font-size: 13px;
    color: #555;
    margin: 0 0 8px;
    line-height: 1.6;
}

.pn-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 12px;
    color: #444;
    margin-bottom: 6px;
    line-height: 1.5;
}

.pn-contact-item svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.pn-layanan-cepat-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.pn-lc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    color: #333;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    padding: 10px 4px;
    border: 1px solid var(--skin-border-light);
    border-radius: 8px;
    transition: all 0.2s;
}

.pn-lc-item svg {
    stroke: var(--skin-primary);
}

.pn-lc-item:hover {
    border-color: var(--skin-primary);
    color: var(--skin-primary);
    background: #fff8f8;
}

/* ============================================================
   BODY WIDGET (POIN 3: light background)
   ============================================================ */
.pn-bodybar-section {
    background: #fafafa;
    border: 1px solid #eef2f6;
    border-radius: 12px;
    padding: 28px;
    margin-bottom: 25px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .03);
}

/* Poin 4: bodybar-inner menggunakan block (bukan flex) agar <br> dan HTML content tampil normal */
.pn-bodybar-inner {
    gap: 0;
    width: 100%;
    display: block;
}

.pn-bodybar-inner .bodybar-widget {
    display: block;
    width: 100%;
    padding: 0 0 35px;
    border-bottom: 1px solid #eef2f6;
    margin-bottom: 35px;
}

.pn-bodybar-inner .bodybar-widget:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.pn-bodybar-inner h1,
.pn-bodybar-inner h2,
.pn-bodybar-inner h3,
.pn-bodybar-inner h4 {
    padding-top: 20px;
}

.pn-bodybar-section .bodybar-widget-title {
    display: none;
}

/* Text pada bodybar: dark on light */
.pn-bodybar-section,
.pn-bodybar-section p,
.pn-bodybar-section span,
.pn-bodybar-section td,
.pn-bodybar-section li {
    color: #333;
    font-size: 12px;
    line-height: 1.5;
}

.pn-bodybar-section a {
    color: var(--skin-primary);
    text-decoration: none;
}

.pn-bodybar-section a:hover {
    color: var(--skin-primary-dark);
    text-decoration: underline;
}

.pn-bodybar-section h2,
.pn-bodybar-section h3,
.pn-bodybar-section h4 {
    color: #1a1a1a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 10px;
    padding-bottom: 7px;
    font-family: 'Poppins', Arial, sans-serif;
    border-bottom: 2px solid var(--skin-primary);
}

/* Table (SIPP widget) */
.pn-bodybar-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eef2f6;
}

.pn-bodybar-section table th {
    background: var(--skin-primary);
    color: #fff;
    padding: 12px 14px;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
}

.pn-bodybar-section table td {
    padding: 11px 14px;
    border-bottom: 1px solid #eef2f6;
    color: #333;
    background: #fff;
    vertical-align: middle;
}

.pn-bodybar-section table tr:nth-child(even) td {
    background: #fdfdfd;
}

.pn-bodybar-section table tr:hover td {
    background: #f5f8ff;
}

.pn-bodybar-section table a {
    color: var(--skin-primary);
}

.pn-bodybar-section caption {
    color: #1a1a1a;
    font-size: 13.5px;
    font-weight: 800;
    padding: 10px 0 16px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: 'Poppins', Arial, sans-serif;
}

/* ============================================================
   SINGLE POST / PAGE
   ============================================================ */
.pn-single-content .pn-article,
.pn-post-content {
    background: #fff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .05);
    border: 1px solid var(--skin-border-light);
}

.pn-article-header {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--skin-border-light);
}

.pn-article-title {
    font-size: 22px;
    color: #1a1a1a;
    margin: 0 0 8px;
    line-height: 1.35;
}

.pn-article-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #888;
}

.pn-feat-img {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.pn-feat-img img {
    width: 100%;
    height: auto;
    display: block;
}

.pn-article-body {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
}

.pn-article-body h2,
.pn-article-body h3 {
    color: #1a1a1a;
}

.pn-article-body img {
    border-radius: 6px;
}

.pn-article-body a {
    color: var(--skin-primary);
}

.pn-article-body table th {
    background: var(--skin-primary);
    color: #fff;
    padding: 8px 12px;
}

.pn-article-body table td {
    border: 1px solid #e0e0e0;
    padding: 8px 12px;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.pn-pagination {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 22px 0;
    flex-wrap: wrap;
}

.pn-pagination a,
.pn-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    color: var(--skin-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.pn-pagination .pn-page-current {
    background: var(--skin-primary);
    color: #fff;
    border-color: var(--skin-primary);
}

.pn-pagination a:hover {
    background: #f5f0f0;
}

/* ============================================================
   SEARCH FORM
   ============================================================ */
.pn-search-inner {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
}

.pn-search-field {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-right: none;
    font-size: 13px;
    outline: none;
    color: #333;
    border-radius: 6px 0 0 6px;
    background: #fff;
}

.pn-search-field:focus {
    border-color: var(--skin-primary);
}

.pn-search-btn {
    padding: 8px 14px;
    background: var(--skin-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 0 6px 6px 0;
    transition: background .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pn-search-btn:hover {
    background: var(--skin-primary-dark);
}

/* ============================================================
   FOOTER
   ============================================================ */
.pn-footer {
    background: #1a1a1a;
    color: #ccc;
    margin-top: auto;
}

.pn-footer-body {
    background: #222;
    padding: 36px 0 24px;
}

.pn-footer-full {
    margin-bottom: 20px;
}

.pn-footer-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.pn-footer-widget-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--skin-primary);
    font-family: 'Poppins', Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pn-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pn-footer-col ul li {
    margin-bottom: 6px;
}

.pn-footer-col ul li a,
.pn-footer-col a {
    color: #bbb;
    font-size: 13px;
}

.pn-footer-col ul li a:hover,
.pn-footer-col a:hover {
    color: #fff;
}

.pn-footer-col p {
    font-size: 13px;
    color: #bbb;
    line-height: 1.7;
    margin: 0 0 6px;
}

.pn-footer-bottom {
    background: #111;
    padding: 14px 0;
    border-top: 1px solid #333;
}

.pn-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pn-footer-copy {
    margin: 0;
    font-size: 12px;
    color: #888;
}

.pn-footer-bottom-links {
    display: flex;
    gap: 16px;
    font-size: 12px;
    align-items: center;
}

.pn-footer-bottom-links a {
    color: #888;
}

.pn-footer-bottom-links a:hover {
    color: #ccc;
}

/* STICKY NAV */
.pn-main-nav.pn-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .22);
    animation: pnSlideDown .25s ease;
}

@keyframes pnSlideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* SKIP LINK */
.skip-link {
    position: absolute;
    left: -999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link:focus {
    left: 5px;
    top: 5px;
    width: auto;
    height: auto;
    padding: 8px 16px;
    background: #000;
    color: #fff;
    z-index: 99999;
    border-radius: 4px;
}

/* ============================================================
   TABLET (max 960px)
   ============================================================ */
@media screen and (max-width: 960px) {
    .pn-news-announce-row {
        grid-template-columns: 1fr;
    }

    .pn-rss-section {
        grid-template-columns: 1fr;
    }

    .pn-info-row {
        grid-template-columns: 1fr;
    }

    .pn-contact-row {
        grid-template-columns: 1fr;
    }

    .pn-footer-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    .pn-sidebar {
        width: 260px;
    }

    .pn-header-badge {
        display: none;
    }
}

/* ============================================================
   MOBILE (max 768px) — POIN 7: hamburger + slider fix
   ============================================================ */
@media screen and (max-width: 768px) {
    .pn-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Topbar */
    .pn-topbar-left {
        display: none;
    }

    .pn-topbar-inner {
        justify-content: center;
    }

    /* Header */
    .pn-site-header {
        padding: 10px 0;
    }

    .pn-brand-logo img {
        width: 52px;
        height: 52px;
    }

    .pn-brand-name {
        font-size: 15px;
    }

    .pn-brand-parent {
        font-size: 10px;
    }

    .pn-header-badge {
        display: none !important;
    }

    /* Hamburger visible */
    .pn-nav-toggle {
        display: flex;
    }

    /* Nav mobile collapse */
    #pn-primary-menu-wrap {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--skin-primary);
        z-index: 999;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
        max-height: 78vh;
        overflow-y: auto;
        /* penting: width tidak melebihi viewport */
        width: 100%;
        box-sizing: border-box;
    }

    #pn-primary-menu-wrap.pn-menu-open {
        display: block;
    }

    .pn-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
    }

    .pn-menu>li {
        position: static;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        width: 100%;
    }

    .pn-menu>li>a {
        padding: 13px 18px;
        font-size: 14px;
        justify-content: space-between;
        width: 100%;
    }

    /* Submenu mobile */
    .pn-menu li .pn-submenu {
        display: none;
        position: static;
        box-shadow: none;
        min-width: auto;
        max-width: none;
        background: rgba(0, 0, 0, .2);
        border: none;
        width: 100%;
    }

    .pn-menu>li.pn-submenu-open>.pn-submenu {
        display: block;
    }

    .pn-submenu>ul>li>.pn-submenu {
        position: static;
        border: none;
        background: rgba(0, 0, 0, .15);
    }

    .pn-submenu>ul>li.pn-submenu-open>.pn-submenu {
        display: block;
    }

    .pn-submenu>ul>li>a {
        padding: 10px 28px;
        width: 100%;
    }

    .pn-submenu>ul>li>.pn-submenu>ul>li>a {
        padding: 9px 42px;
        width: 100%;
    }

    /* Slider mobile — POIN 7: fix overflow */
    .pn-slider-section {
        width: 100%;
        overflow: hidden;
    }

    .pn-cat-slider {
        width: 100%;
        overflow: hidden;
    }

    .pn-cat-slider-track {
        width: 100%;
    }

    .pn-slide {
        min-width: 100%;
        max-width: 100%;
        flex-shrink: 0;
        height: 240px;
        width: 100%;
        /* Pastikan background tidak overflow */
        background-size: cover;
        background-position: center;
    }

    .pn-slide-content {
        padding: 0 15px;
    }

    .pn-slide-content-inner {
        max-width: 100%;
    }

    .pn-slide-title {
        font-size: 17px;
        margin-bottom: 8px;
    }

    .pn-slide-excerpt {
        display: none;
    }

    .pn-slider-prev {
        left: 10px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .pn-slider-next {
        right: 10px;
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    /* Layout */
    .pn-layout-row {
        flex-direction: column;
    }

    .pn-sidebar {
        width: 100%;
    }

    .pn-maklumat-row {
        grid-template-columns: 1fr;
    }

    .pn-layanan-cepat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pn-footer-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pn-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    /* Bodybar mobile */
    .pn-bodybar-inner {
        flex-direction: column;
    }

    .pn-bodybar-inner .bodybar-widget {
        border-right: none;
        border-bottom: 1px solid #eef2f6;
        padding: 24px 0;
        margin-bottom: 24px;
    }

    .pn-bodybar-inner .bodybar-widget:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    /* Hero identity */
    .pn-hero-identity-inner {
        flex-direction: row;
        padding: 12px 0 8px;
    }

    .pn-hero-right-col {
        display: none;
    }

    /* hide berakhlak on very small */
    .pn-hero-spotlight {
        padding: 6px 12px 6px 8px;
    }

    .pn-hero-spotlight-text {
        font-size: 12px;
    }

    .pn-content-wrap {
        padding: 16px 0 20px;
    }

    .pn-single-content .pn-article,
    .pn-post-content {
        padding: 16px;
    }
}

/* ============================================================
   SMALL MOBILE (max 480px)
   ============================================================ */
@media screen and (max-width: 480px) {
    .pn-brand-name {
        font-size: 13px;
    }

    .pn-slide {
        height: 200px;
    }

    .pn-slide-title {
        font-size: 15px;
    }

    .pn-slide-btn {
        padding: 7px 16px;
        font-size: 12px;
    }

    .pn-footer-row {
        grid-template-columns: 1fr;
    }

    .pn-layanan-cepat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pn-maklumat-row {
        grid-template-columns: 1fr;
    }

    .pn-article-title {
        font-size: 18px;
    }
}

/* ============================================================
   POIN 2: BLOCKHEADER CSS (dari request user)
   ============================================================ */
.t strong {
    font-weight: 800;
}

.blockheader .t {
    min-height: 38px;
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 24px;
    color: var(--skin-primary, #A72A2A);
    font-size: 15px;
    margin-right: 11px;
    padding: 0;
    font-weight: 600;
    text-shadow: 0 1px 0 #FFFFFF;
    background: url('../images/body/dot.png') repeat-x scroll 0 100% transparent;
}


/* ============================================================
   SLIDER: Slide dengan/tanpa background image
   ============================================================ */

/* Slide DENGAN background-image */
.pn-slide-has-bg .pn-slide-overlay {
    background: linear-gradient(100deg,
            rgba(0, 0, 0, 0.72) 0%,
            rgba(0, 0, 0, 0.40) 55%,
            rgba(0, 0, 0, 0.08) 100%);
}

/* Slide TANPA background-image: pakai warna skin + pattern diagonal */
.pn-slide-no-bg {
    background-color: var(--skin-primary) !important;
    background-image: repeating-linear-gradient(-45deg,
            transparent,
            transparent 28px,
            rgba(0, 0, 0, 0.05) 28px,
            rgba(0, 0, 0, 0.05) 56px) !important;
}

.pn-slide-no-bg .pn-slide-overlay {
    background: rgba(0, 0, 0, 0.12);
}

/* POIN 2: Blockheader */
.t strong {
    font-weight: 800;
}

.blockheader .t {
    min-height: 38px;
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 24px;
    color: var(--skin-primary, #A72A2A);
    font-size: 15px;
    margin-right: 11px;
    padding: 0;
    font-weight: 600;
    text-shadow: 0 1px 0 #FFFFFF;
    background: url('../images/body/dot.png') repeat-x scroll 0 100% transparent;
}

/* ============================================================
   CRITICAL FIX: Override template.css slider conflicts
   template.css mendefinisikan .pn-slide dengan opacity:0
   sehingga slide tidak terlihat. Override di sini.
   ============================================================ */
.pn-cat-slider .pn-slide {
    /* Reset semua properti konflik dari template.css */
    display: block !important;
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    transition: none !important;
    z-index: 1 !important;
    /* Properti asli slider kita */
    min-width: 100% !important;
    flex: 0 0 100% !important;
    height: 420px !important;
    background-color: var(--skin-primary) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    color: #fff !important;
}

/* Override ::before dari template.css yang menutupi slide dengan gradient putih */
.pn-cat-slider .pn-slide::before,
.pn-cat-slider .pn-slide::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Override .pn-slide-inner dari template.css */
.pn-cat-slider .pn-slide-inner {
    display: none !important;
}

/* Override .pn-slide-text dari template.css */
.pn-cat-slider .pn-slide-text {
    display: none !important;
}

/* Pastikan slider track pakai flexbox */
.pn-cat-slider .pn-cat-slider-track {
    display: flex !important;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    /* Override min-height dari template.css */
    min-height: unset !important;
}

/* Konten slide kita tetap visible */
.pn-cat-slider .pn-slide-content {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 60px !important;
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.pn-cat-slider .pn-slide-content-inner {
    max-width: 660px !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.pn-cat-slider .pn-slide-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pn-cat-slider .pn-slide-has-bg .pn-slide-overlay {
    background: linear-gradient(100deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.40) 55%, rgba(0, 0, 0, 0.08) 100%) !important;
}

.pn-cat-slider .pn-slide-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 12px !important;
    line-height: 1.25 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    /* Override dari template.css */
    font-size: unset !important;
    text-transform: none !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, .3) !important;
}

.pn-cat-slider .pn-slide-title {
    font-size: 28px !important;
}

.pn-cat-slider .pn-slide-title a {
    color: #fff !important;
}

.pn-cat-slider .pn-slide-title a:hover {
    color: #ffe0a0 !important;
}

.pn-cat-slider .pn-slide-excerpt {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    margin: 0 0 18px !important;
    line-height: 1.65 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.pn-cat-slider .pn-slide-meta {
    margin-bottom: 8px !important;
}

.pn-cat-slider .pn-slide-date {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-weight: 600 !important;
}

.pn-cat-slider .pn-slide-btn {
    display: inline-block !important;
    background: #fff !important;
    color: var(--skin-primary) !important;
    border-radius: 6px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.2s !important;
}

.pn-cat-slider .pn-slide-btn:hover {
    background: #f5f5f5 !important;
    color: var(--skin-primary-dark) !important;
    transform: none !important;
}

/* ============================================================
   CRITICAL FIX: Override skin style.css fixed widths
   min-width:1000px dan width:1000px menyebabkan overflow mobile
   ============================================================ */
#pn-wrap,
#pn-wrap *,
body.pn-theme {
    max-width: 100% !important;
    box-sizing: border-box;
}

/* Override tabel dan elemen fixed-width dari skin */
body.pn-theme table {
    max-width: 100%;
}

body.pn-theme .blockcontent,
body.pn-theme .blockbody,
body.pn-theme .blockfooter,
body.pn-theme .blockheader {
    max-width: 100% !important;
    min-width: unset !important;
}

/* MOBILE: fix overflow horizontal */
@media screen and (max-width: 768px) {

    html,
    body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    #pn-wrap {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Slider mobile fix */
    .pn-cat-slider .pn-slide {
        height: 250px !important;
    }

    .pn-cat-slider .pn-slide-content {
        padding: 0 20px !important;
    }

    .pn-cat-slider .pn-slide-title {
        font-size: 17px !important;
    }

    .pn-cat-slider .pn-slide-excerpt {
        display: none !important;
    }

    /* Override semua fixed width dari skin style.css */
    .pn-sidebar-box,
    .pn-post-content,
    .pn-article,
    .sidebar,
    .main-content,
    [class*="block"],
    [class*="column"],
    [class*="widget"] {
        min-width: 0 !important;
        max-width: 100% !important;
        width: auto !important;
        float: none !important;
    }

    /* Tables scroll pada mobile */
    .pn-article-body table,
    .pn-post-content table,
    .entry-content table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
        min-width: unset !important;
        width: 100% !important;
    }
}

@media screen and (max-width: 480px) {
    .pn-cat-slider .pn-slide {
        height: 210px !important;
    }

    .pn-cat-slider .pn-slide-content {
        padding: 0 15px !important;
    }

    .pn-cat-slider .pn-slide-title {
        font-size: 15px !important;
    }
}

/* ============================================================
   POIN 3+5: RESPONSIVE FIX + WIDGET VISIBILITY
   ============================================================ */

/* Viewport meta fix - semua elemen tidak boleh overflow */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
    min-width: 0 !important;
    max-width: 100% !important;
}

#pn-wrap {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
}

/* Responsive: semua ukuran layar */
@media screen and (max-width: 1400px) {
    .pn-container {
        max-width: calc(100% - 40px);
    }
}

@media screen and (max-width: 1100px) {
    .pn-container {
        max-width: calc(100% - 30px);
    }

    .pn-sidebar {
        width: 260px;
    }
}

@media screen and (max-width: 960px) {
    .pn-layout-row {
        flex-direction: column;
    }

    .pn-sidebar {
        width: 100%;
    }

    .pn-header-badge {
        display: none !important;
    }

    .pn-news-announce-row,
    .pn-rss-section,
    .pn-info-row,
    .pn-contact-row {
        grid-template-columns: 1fr;
    }

    .pn-footer-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .pn-container {
        padding-left: 12px;
        padding-right: 12px;
        max-width: 100%;
    }

    .pn-topbar-left {
        display: none;
    }

    .pn-topbar-inner {
        justify-content: flex-end;
    }

    .pn-site-header {
        padding: 10px 0;
    }

    .pn-brand-logo img {
        width: 50px;
        height: 50px;
    }

    .pn-brand-name {
        font-size: 14px;
    }

    .pn-brand-parent {
        font-size: 10px;
    }

    .pn-header-badge {
        display: none !important;
    }

    .pn-nav-toggle {
        display: flex;
    }

    #pn-primary-menu-wrap {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--skin-primary);
        z-index: 999;
        box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
        max-height: 78vh;
        overflow-y: auto;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    #pn-primary-menu-wrap.pn-menu-open {
        display: block;
    }

    .pn-menu {
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
    }

    .pn-menu>li {
        position: static;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        width: 100%;
    }

    .pn-menu>li>a {
        padding: 13px 18px;
        font-size: 14px;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
    }

    .pn-menu li .pn-submenu {
        display: none;
        position: static;
        box-shadow: none;
        min-width: auto;
        max-width: none;
        background: rgba(0, 0, 0, .2);
        border: none;
        width: 100%;
    }

    .pn-menu>li.pn-submenu-open>.pn-submenu {
        display: block;
    }

    .pn-submenu>ul>li>.pn-submenu {
        position: static;
        border: none;
        background: rgba(0, 0, 0, .15);
    }

    .pn-submenu>ul>li.pn-submenu-open>.pn-submenu {
        display: block;
    }

    .pn-submenu>ul>li>a {
        padding: 10px 28px;
        width: 100%;
        box-sizing: border-box;
    }

    .pn-submenu>ul>li>.pn-submenu>ul>li>a {
        padding: 9px 42px;
        width: 100%;
        box-sizing: border-box;
    }

    .pn-maklumat-row {
        grid-template-columns: 1fr;
    }

    .pn-layanan-cepat-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .pn-footer-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .pn-footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }

    .pn-bodybar-inner {
        display: block;
    }

    .pn-bodybar-inner .bodybar-widget {
        width: 100%;
        display: block;
    }

    .pn-hero-identity-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 0 8px;
    }

    .pn-hero-main-col {
        width: 100%;
    }

    .pn-hero-spotlight {
        max-width: 100%;
    }

    .pn-hero-right-col {
        display: none;
    }

    .pn-content-wrap {
        padding: 14px 0 20px;
    }

    .pn-cat-slider .pn-slide {
        height: 240px !important;
    }

    .pn-cat-slider .pn-slide-content {
        padding: 0 16px !important;
    }

    .pn-cat-slider .pn-slide-title {
        font-size: 17px !important;
    }

    .pn-cat-slider .pn-slide-excerpt {
        display: none !important;
    }

    .pn-slider-prev {
        left: 8px;
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .pn-slider-next {
        right: 8px;
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

@media screen and (max-width: 480px) {
    .pn-brand-name {
        font-size: 13px;
    }

    .pn-cat-slider .pn-slide {
        height: 200px !important;
    }

    .pn-cat-slider .pn-slide-title {
        font-size: 15px !important;
    }

    .pn-cat-slider .pn-slide-btn {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    .pn-footer-row {
        grid-template-columns: 1fr;
    }

    .pn-layanan-cepat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pn-maklumat-row {
        grid-template-columns: 1fr;
    }

    .pn-article-title {
        font-size: 17px;
    }

    .pn-container {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ============================================================
   HERO SPOTLIGHT - FINAL (tidak ada duplikat)
   ============================================================ */
.pn-hero-identity-inner {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0 14px;
}

.pn-hero-spotlight {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 30px;
    padding: 8px 22px 8px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.pn-hero-spotlight,
.pn-hero-spotlight * {
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
}

.pn-hero-spotlight p {
    margin: 0;
}

.pn-hero-spotlight a,
.pn-hero-spotlight a:visited,
.pn-hero-spotlight a:hover {
    color: #fff !important;
    text-decoration: none !important;
}

.pn-hero-spotlight-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
    animation: pnPulse 2s ease-in-out infinite;
}

/* ============================================================
   GOOGLE TRANSLATE - Minimal, tidak intervensi plugin GLT
   Hanya sembunyikan Google top-bar (bukan widget/toolbar plugin)
   ============================================================ */
/* Top-bar Google Translate yang muncul di atas halaman */
.goog-te-banner-frame.skiptranslate {
    display: none !important;
}

body.translated-ltr,
body.translated-rtl {
    top: 0 !important;
}

/* Jadwal sidang height fit */
.pn-jadwal-v4-body {
    min-height: unset !important;
}

.pn-jadwal-v4-loading,
.pn-jadwal-v4-error {
    min-height: unset !important;
    height: auto;
}

/* ============================================================
   HEADER BADGE: Dewi Keadilan + BeAKHLAK
   ============================================================ */
.pn-header-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pn-header-badge-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 300px;
    height: 90px;
    overflow: hidden;
}

/* Dewi keadilan sebagai background */
.pn-badge-bg {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.18;
    /* transparan, jadi background */
    pointer-events: none;
    z-index: 0;
}

.pn-badge-bg img {
    height: 90px;
    width: auto;
    display: block;
    filter: sepia(30%) saturate(60%);
}

/* BeAKHLAK logo di depan */
.pn-badge-berakhlak {
    position: relative;
    z-index: 1;
    max-height: 65px;
    width: auto;
    object-fit: contain;
}

/* Responsive: hide badge on tablet/mobile */
@media screen and (max-width: 960px) {
    .pn-header-badge {
        display: none !important;
    }
}

/* ============================================================
   SIDEBAR NAVIGASI UTAMA - Modern Elegant
   Menggantikan tampilan list link biasa
   ============================================================ */

/* Widget navigasi utama - deteksi via class widget_nav_menu atau widget_pages */
.pn-sidebar-box .widget_nav_menu .menu,
.pn-sidebar-box .widget_pages ul,
.pn-sidebar-box .blockcontent ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Setiap item navigasi */
.pn-sidebar-box .widget_nav_menu .menu>li>a,
.pn-sidebar-box .widget_pages ul>li>a,
.pn-sidebar-box .blockcontent ul>li>a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 14px !important;
    color: var(--skin-primary, #8b000b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: background 0.18s, color 0.18s, padding-left 0.18s !important;
    position: relative !important;
    border-left: 3px solid transparent !important;
    margin-bottom: 2px !important;
    line-height: 1.4 !important;
}

/* Ikon bullet panah kecil sebelum teks */
.pn-sidebar-box .widget_nav_menu .menu>li>a::before,
.pn-sidebar-box .widget_pages ul>li>a::before,
.pn-sidebar-box .blockcontent ul>li>a::before {
    content: '›';
    font-size: 16px;
    font-weight: 700;
    color: var(--skin-primary, #8b000b);
    opacity: 0.5;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity 0.18s, transform 0.18s;
}

/* Hover state */
.pn-sidebar-box .widget_nav_menu .menu>li>a:hover,
.pn-sidebar-box .widget_pages ul>li>a:hover,
.pn-sidebar-box .blockcontent ul>li>a:hover {
    background: rgba(var(--skin-primary-rgb, 139, 0, 11), 0.07) !important;
    border-left-color: var(--skin-primary, #8b000b) !important;
    padding-left: 18px !important;
    color: var(--skin-primary, #8b000b) !important;
}

.pn-sidebar-box .widget_nav_menu .menu>li>a:hover::before,
.pn-sidebar-box .widget_pages ul>li>a:hover::before,
.pn-sidebar-box .blockcontent ul>li>a:hover::before {
    opacity: 1;
    transform: translateX(2px);
}

/* Active/current item */
.pn-sidebar-box .widget_nav_menu .menu>li.current-menu-item>a,
.pn-sidebar-box .widget_nav_menu .menu>li.current_page_item>a {
    background: rgba(var(--skin-primary-rgb, 139, 0, 11), 0.1) !important;
    border-left-color: var(--skin-primary, #8b000b) !important;
    padding-left: 18px !important;
    font-weight: 700 !important;
}

.pn-sidebar-box .widget_nav_menu .menu>li.current-menu-item>a::before {
    opacity: 1;
}

/* Sub-menu items */
.pn-sidebar-box .widget_nav_menu .menu>li ul {
    list-style: none;
    margin: 0 0 4px 14px;
    padding: 0;
    border-left: 1px dashed rgba(var(--skin-primary-rgb, 139, 0, 11), 0.2);
}

.pn-sidebar-box .widget_nav_menu .menu>li ul li a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    color: #555 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    transition: all 0.18s !important;
}

.pn-sidebar-box .widget_nav_menu .menu>li ul li a:hover {
    color: var(--skin-primary, #8b000b) !important;
    background: rgba(var(--skin-primary-rgb, 139, 0, 11), 0.05) !important;
}

/* Khusus untuk blockcontent navigasi (widget lama existing theme) */
.pn-sidebar-box .blockcontent a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    /* padding: 9px 14px !important; */
    color: var(--skin-primary, #8b000b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: background 0.18s, padding-left 0.18s !important;
    border-left: 3px solid transparent !important;
    margin-bottom: 2px !important;
}

.pn-sidebar-box .blockcontent a::before {
    content: '›';
    font-size: 16px;
    font-weight: 700;
    color: var(--skin-primary, #8b000b);
    opacity: 0.5;
    flex-shrink: 0;
    line-height: 1;
    transition: opacity 0.18s, transform 0.18s;
}

.pn-sidebar-box .blockcontent a:hover {
    background: rgba(var(--skin-primary-rgb, 139, 0, 11), 0.07) !important;
    border-left-color: var(--skin-primary, #8b000b) !important;
    padding-left: 18px !important;
}

.pn-sidebar-box .blockcontent a:hover::before {
    opacity: 1;
    transform: translateX(2px);
}

/* Divider tipis antar item */
.pn-sidebar-box .widget_nav_menu .menu>li,
.pn-sidebar-box .widget_pages ul>li,
.pn-sidebar-box .blockcontent>li {
    border-bottom: 1px solid rgba(var(--skin-primary-rgb, 139, 0, 11), 0.05);
}

.pn-sidebar-box .widget_nav_menu .menu>li:last-child,
.pn-sidebar-box .widget_pages ul>li:last-child,
.pn-sidebar-box .blockcontent>li:last-child {
    border-bottom: none;
}

/* Sidebar box body padding untuk nav widget */
.pn-sidebar-box .pn-sidebar-box-body {
    padding: 8px 6px !important;
}

/* Untuk widget non-nav, kembalikan padding normal */
.pn-sidebar-box.widget_search .pn-sidebar-box-body,
.pn-sidebar-box.widget_text .pn-sidebar-box-body,
.pn-sidebar-box.widget_custom_html .pn-sidebar-box-body {
    padding: 12px 14px !important;
}

/* ============================================================
   PATCH v3.2.1: CSS selector diperbaiki sesuai HTML aktual
   HTML aktual: .pn-sidebar-box.widget_nav_menu
                .menu-vertical-menu-container > ul.menu > li > a
   ============================================================ */

/* Target EXACT selector dari HTML aktual sidebar */
.widget_nav_menu .menu-vertical-menu-container ul,
.widget_nav_menu .menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_nav_menu .menu-vertical-menu-container ul li,
.widget_nav_menu .menu>li {
    border-bottom: 1px solid rgba(139, 0, 11, 0.06);
    margin: 0;
    padding: 0;
}

.widget_nav_menu .menu-vertical-menu-container ul li:last-child,
.widget_nav_menu .menu>li:last-child {
    border-bottom: none;
}

/* Link items */
.widget_nav_menu .menu-vertical-menu-container ul li a,
.widget_nav_menu .menu>li>a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 12px 9px 10px !important;
    color: var(--skin-primary, #8b000b) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Poppins', Arial, sans-serif !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    border-left: 3px solid transparent !important;
    transition: background 0.18s, border-color 0.18s, padding-left 0.18s !important;
    margin: 1px 4px !important;
    line-height: 1.4 !important;
}

/* Panah ikon prefix */
.widget_nav_menu .menu-vertical-menu-container ul li a::before,
.widget_nav_menu .menu>li>a::before {
    content: '›' !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--skin-primary, #8b000b) !important;
    opacity: 0.4 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
    transition: opacity 0.18s, transform 0.18s !important;
    display: inline-block !important;
}

/* Hover */
.widget_nav_menu .menu-vertical-menu-container ul li a:hover,
.widget_nav_menu .menu>li>a:hover {
    background: rgba(139, 0, 11, 0.07) !important;
    border-left-color: var(--skin-primary, #8b000b) !important;
    padding-left: 16px !important;
    color: var(--skin-primary, #8b000b) !important;
}

.widget_nav_menu .menu-vertical-menu-container ul li a:hover::before,
.widget_nav_menu .menu>li>a:hover::before {
    opacity: 1 !important;
    transform: translateX(2px) !important;
}

/* Active/current */
.widget_nav_menu .menu>li.current-menu-item>a,
.widget_nav_menu .menu>li.current_page_item>a {
    background: rgba(139, 0, 11, 0.1) !important;
    border-left-color: var(--skin-primary, #8b000b) !important;
    padding-left: 16px !important;
    font-weight: 700 !important;
}

.widget_nav_menu .menu>li.current-menu-item>a::before {
    opacity: 1 !important;
}

/* Padding body untuk nav widget */
.pn-sidebar-box.widget_nav_menu .pn-sidebar-box-body {
    padding: 6px 4px !important;
}

/* ============================================================
   PATCH: Header badge dewi keadilan - ukuran lebih proporsional
   ============================================================ */
.pn-header-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pn-header-badge-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 320px;
    height: 88px;
    overflow: hidden;
    border-radius: 8px;
}

/* Dewi keadilan: background halus */
.pn-badge-bg {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    pointer-events: none;
}

.pn-badge-bg img {
    height: 95px;
    width: auto;
    display: block;
    opacity: 0.22;
    filter: sepia(20%) saturate(50%) brightness(0.95);
    mix-blend-mode: multiply;
}

/* BeAKHLAK logo */
.pn-badge-berakhlak {
    position: relative;
    z-index: 2;
    max-height: 68px;
    width: auto;
    object-fit: contain;
    margin-right: 8px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

@media screen and (max-width: 960px) {
    .pn-header-badge {
        display: none !important;
    }
}

/* ============================================================
   FIX: GLT Widget sidebar padding + visibility
   ============================================================ */
.pn-sidebar-box.widget_glt_widget .pn-sidebar-box-body,
.pn-sidebar-box[class*="glt"] .pn-sidebar-box-body,
.pn-sidebar-box[id*="google_language"] .pn-sidebar-box-body {
    padding: 12px 14px !important;
    min-height: 50px !important;
}

/* Ensure GLT widget renders - tidak ada CSS yang hide dari kita */
#google_language_translator {
    display: block;
    min-height: 30px;
}

/* ============================================================
   FIX: Back-to-top button (z-index 9999, always on top)
   ============================================================ */
#pn-back-top {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: var(--skin-primary, #8b000b) !important;
    color: #fff !important;
    border: none !important;
    font-size: 22px !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .3) !important;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1 !important;
    outline: none !important;
    transition: background 0.25s, transform 0.25s, opacity 0.25s !important;
    padding: 0 !important;
}

#pn-back-top:hover {
    background: var(--skin-primary-dark, #6b0009) !important;
    transform: translateY(-3px) !important;
}

/* ============================================================
   FEATURE: Text-to-Speech (TTS) Audible Selection
   ============================================================ */
#pn-tts-bar {
    position: fixed;
    bottom: 76px;
    right: 24px;
    z-index: 9998;
    display: none;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--skin-border, #e8dede);
    border-radius: 30px;
    padding: 6px 14px 6px 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    font-family: 'Poppins', Arial, sans-serif;
    color: #333;
    max-width: 260px;
    animation: pnTTSSlideIn 0.25s ease;
}

@keyframes pnTTSSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#pn-tts-bar.pn-tts-visible {
    display: flex;
}

#pn-tts-play {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--skin-primary, #8b000b);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
    transition: background 0.2s;
}

#pn-tts-play:hover {
    background: var(--skin-primary-dark, #6b0009);
}

#pn-tts-play.pn-tts-playing {
    background: #333;
}

#pn-tts-text-preview {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: #555;
    max-width: 160px;
}

#pn-tts-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #999;
    font-size: 16px;
    padding: 0 0 0 4px;
    line-height: 1;
    flex-shrink: 0;
}

#pn-tts-close:hover {
    color: #333;
}

/* ============================================================
   POIN 2: Slider dots - centered
   ============================================================ */
.pn-slider-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    width: fit-content;
}

/* ============================================================
   POIN 4: Submenu background menutupi seluruh teks
   Hapus max-width, gunakan max-content, white-space nowrap
   ============================================================ */
.pn-submenu {
    min-width: 220px !important;
    width: max-content !important;
    max-width: none !important;
    /* hapus batas max-width */
}

.pn-submenu>ul {
    width: 100%;
}

.pn-submenu>ul>li {
    width: 100%;
}

.pn-submenu>ul>li>a {
    white-space: nowrap !important;
    width: 100% !important;
    min-width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
    padding: 10px 20px !important;
}

/* Level 3 submenu juga full width */
.pn-submenu>ul>li>.pn-submenu {
    width: auto !important;
    min-width: 220px !important;
}

.pn-submenu>ul>li>.pn-submenu>ul>li>a {
    white-space: nowrap !important;
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
}

/* ============================================================
   POIN 5: Header badge dewi keadilan - VISIBLE FIX
   ============================================================ */
.pn-header-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    position: relative;
}

.pn-header-badge-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 85px;
    overflow: visible !important;
    /* allow dewi to show */
    padding: 0 0 0 10px;
}

/* Dewi keadilan background tipis di belakang logo berakhlak */
.pn-badge-dewi {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
    /* di belakang logo berakhlak */
    /* height: 160px !important; */
    max-height: 500px !important;
    /* override pembatas max-height: 32px */
    width: auto !important;
    display: block !important;
    opacity: 0.52 !important;
    /* background tipis / samar-samar */
    /* filter: sepia(10%) saturate(30%) brightness(0.88) !important; */
    mix-blend-mode: multiply !important;
    /* hilangkan kotak background dengan blending */
    pointer-events: none !important;
}

/* BeAKHLAK di depan dewi */
.pn-badge-berakhlak {
    position: relative !important;
    z-index: 2 !important;
    /* di depan dewi keadilan */
    max-height: 38px !important;
    /* diperkecil lagi agar proporsional */
    width: auto !important;
    object-fit: contain !important;
}