/* File ini hanya dimuat untuk beranda Kanwil ($isKanwil). */

/* PANEL LOGO KANWIL — hanya mengatur tampilan; source gambar tetap dari upload. */
.ppid-kanwil-logo-panel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 5px;
    overflow: hidden;
    border: 1px solid rgba(246, 217, 154, .72);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(249, 247, 238, .94));
    box-shadow: 0 8px 22px rgba(0, 16, 12, .26), 0 0 18px rgba(217, 169, 40, .13);
}

.ppid-kanwil-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: clamp(168px, 18vw, 245px);
    max-height: 72px;
    object-fit: contain;
    border-radius: 9px;
}

/*
 * BACKGROUND KANWIL — GANTI GAMBAR DI SINI.
 * Ubah hanya URL di bawah bila ingin mengganti background seluruh halaman.
 * Animasi partikel Siger berada di ppid-kanwil.js dan tidak ikut berubah.
 */
:root {
    --ppid-kanwil-background: url('../../img/kanwil-background-pattern.webp');
}

body.ppid-kanwil-page {
    min-height: 100vh;
    position: relative;
    isolation: isolate;
    background: #03120f;
}

.ppid-kanwil-page > .ppid-topbar,
.ppid-kanwil-page > .ppid-main,
.ppid-kanwil-page > .ppid-footer {
    position: relative;
    z-index: 1;
}

.ppid-kanwil-page .ppid-topbar {
    background: linear-gradient(90deg, rgba(3, 47, 37, .94), rgba(7, 122, 83, .88));
    backdrop-filter: blur(12px);
}

.ppid-kanwil-page .ppid-topbar-socials a {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 999px;
    color: rgba(255, 255, 255, .96);
    background: linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .1));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .44), 0 4px 14px rgba(0, 20, 15, .16);
    backdrop-filter: blur(10px) saturate(145%);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
}

.ppid-kanwil-page .ppid-topbar-socials a:hover,
.ppid-kanwil-page .ppid-topbar-socials a:focus-visible {
    color: #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .16));
    border-color: rgba(255, 255, 255, .68);
    transform: translateY(-1px);
}

.ppid-kanwil-page .ppid-header {
    --kanwil-scroll: 0;
    background: linear-gradient(100deg, rgba(3, 22, 18, .9), rgba(7, 81, 63, .82));
    border-bottom-color: rgba(246, 217, 154, .22);
    box-shadow: 0 12px 35px rgba(2, 13, 12, .26);
    opacity: calc(1 - var(--kanwil-scroll));
    filter: blur(calc(var(--kanwil-scroll) * 9px));
    transform: translateY(calc(var(--kanwil-scroll) * -28px)) scale(calc(1 - var(--kanwil-scroll) * .035));
    transform-origin: top center;
    transition: opacity .28s ease-out, filter .28s ease-out, transform .28s cubic-bezier(.22, 1, .36, 1);
}

.ppid-kanwil-page .ppid-kanwil-header-spotlight {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: clamp(280px, 30vw, 520px);
    height: 100%;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(ellipse at center, rgba(247, 205, 109, .2), transparent 68%);
    transform: translate3d(-200%, 0, 0);
    transition: opacity .18s linear;
    will-change: transform, opacity;
    contain: paint;
}

.ppid-kanwil-page .ppid-header > .container-fluid {
    position: relative;
    z-index: 1;
}

.ppid-kanwil-page .ppid-header.is-kanwil-dissolved {
    pointer-events: none;
    user-select: none;
}

.ppid-kanwil-page .ppid-header.is-kanwil-dissolved .dropdown ul {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.ppid-kanwil-page .ppid-header::after {
    content: '';
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: calc(.55 - var(--kanwil-scroll));
    background-image:
        radial-gradient(circle at 12% 35%, #f6d99a 0 1px, transparent 1.8px),
        radial-gradient(circle at 31% 72%, #c7f1ec 0 1px, transparent 1.6px),
        radial-gradient(circle at 61% 22%, #f6d99a 0 1.2px, transparent 2px),
        radial-gradient(circle at 83% 64%, #c7f1ec 0 1px, transparent 1.8px);
    background-size: 190px 92px, 230px 110px, 270px 95px, 210px 105px;
    animation: ppid-kanwil-header-stars 16s linear infinite;
}

.ppid-kanwil-page .ppid-header-inner {
    position: relative;
    z-index: 1;
}

.ppid-kanwil-page .ppid-header .navmenu > ul > li > a,
.ppid-kanwil-page .ppid-header .navmenu > ul > li > a:focus,
.ppid-kanwil-page .ppid-header .mobile-nav-toggle {
    color: rgba(255, 255, 255, .92);
}

.ppid-kanwil-page .ppid-header .navmenu > ul > li > a:hover,
.ppid-kanwil-page .ppid-header .navmenu > ul > li:hover > a,
.ppid-kanwil-page .ppid-header .navmenu > ul > li > .active {
    color: #fff;
    background: rgba(255, 255, 255, .13);
}

.ppid-kanwil-page .ppid-header .ppid-action-main {
    background: #d9a928;
    color: #153d32 !important;
}

/* Layer tetap ini membuat background dan interaksi partikel menyatu sampai footer. */
.ppid-kanwil-backdrop {
    --kanwil-scroll: 0;
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #03120f;
}

.ppid-kanwil-backdrop::before {
    content: '';
    position: absolute;
    inset: -7%;
    z-index: 0;
    background:
        linear-gradient(105deg, rgba(2, 17, 14, .95) 2%, rgba(5, 49, 39, .79) 54%, rgba(4, 31, 26, .66)),
        var(--ppid-kanwil-background) center / cover;
    transform: scale(1.08);
}

.ppid-kanwil-spotlight {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: clamp(360px, 44vw, 760px);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217, 169, 40, .24), rgba(217, 169, 40, .08) 34%, transparent 70%);
    transform: translate3d(-200%, -200%, 0);
    transition: opacity .18s linear;
    will-change: transform, opacity;
    contain: strict;
}

.ppid-kanwil-stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.ppid-kanwil-siger {
    position: absolute;
    z-index: 2;
    right: -2%;
    top: 19%;
    width: min(54vw, 720px);
    color: #d9a928;
    opacity: .14;
}

.ppid-kanwil-backdrop[data-ready] .ppid-kanwil-siger {
    display: none;
}

.ppid-kanwil-page .ppid-main,
.ppid-kanwil-page .ppid-hero-section,
.ppid-kanwil-page .ppid-content-section,
.ppid-kanwil-page .ppid-contact-section {
    background: transparent;
}

.ppid-kanwil-page .ppid-hero-section {
    --kanwil-scroll: 0;
    isolation: auto;
}

.ppid-kanwil-page .ppid-hero-section::after {
    display: none;
}

.ppid-kanwil-page .ppid-hero-content {
    opacity: calc(1 - var(--kanwil-scroll) * .96);
    filter: blur(calc(var(--kanwil-scroll) * 10px));
    transform: translate3d(calc(var(--kanwil-scroll) * -72px), calc(var(--kanwil-scroll) * 22px), 0)
        scale(calc(1 - var(--kanwil-scroll) * .08));
    transition: opacity .08s linear, filter .08s linear, transform .08s linear;
}

.ppid-kanwil-page .ppid-stat-card:nth-child(1) { transform: translateX(calc(var(--kanwil-scroll) * -35px)); }
.ppid-kanwil-page .ppid-stat-card:nth-child(2) { transform: translateY(calc(var(--kanwil-scroll) * 28px)); }
.ppid-kanwil-page .ppid-stat-card:nth-child(3) { transform: translateX(calc(var(--kanwil-scroll) * 42px)); }

/* Konten tetap berbentuk kartu, tetapi sedikit transparan agar menyatu dengan scene. */
.ppid-kanwil-page .ppid-content-section > .container-fluid > .ppid-section-heading h2 {
    color: rgba(255, 255, 255, .96);
}

.ppid-kanwil-page .ppid-content-section > .container-fluid > .ppid-section-heading p {
    color: rgba(225, 239, 235, .78) !important;
}

.ppid-kanwil-page .ppid-content-section > .container-fluid > .ppid-section-heading .ppid-section-eyebrow {
    color: #f6d99a;
}

.ppid-kanwil-page .ppid-section-panel {
    background: rgba(247, 250, 248, .84);
    border-color: rgba(225, 239, 235, .46);
    box-shadow: 0 22px 55px rgba(0, 10, 8, .24);
    backdrop-filter: blur(18px) saturate(112%);
}

.ppid-kanwil-page .ppid-info-card,
.ppid-kanwil-page .ppid-contact-card,
.ppid-kanwil-page .ppid-map-card,
.ppid-kanwil-page .ppid-empty-card {
    background: rgba(255, 255, 255, .76);
    border-color: rgba(255, 255, 255, .58);
    box-shadow: 0 14px 34px rgba(0, 18, 14, .16);
    backdrop-filter: blur(15px) saturate(108%);
}

.ppid-kanwil-page .ppid-contact-item {
    background: rgba(239, 247, 243, .72);
}

.ppid-kanwil-page .ppid-footer {
    background: rgba(4, 32, 25, .74);
    border-top: 1px solid rgba(246, 217, 154, .16);
    backdrop-filter: blur(18px);
}

/* Tier medium mempertahankan efek kaca dengan radius yang lebih ringan. */
body[data-kanwil-motion-quality="medium"] .ppid-topbar {
    backdrop-filter: blur(8px);
}

body[data-kanwil-motion-quality="medium"] .ppid-section-panel {
    backdrop-filter: blur(10px) saturate(108%);
}

body[data-kanwil-motion-quality="medium"] .ppid-info-card,
body[data-kanwil-motion-quality="medium"] .ppid-contact-card,
body[data-kanwil-motion-quality="medium"] .ppid-map-card,
body[data-kanwil-motion-quality="medium"] .ppid-empty-card {
    backdrop-filter: blur(8px) saturate(105%);
}

body[data-kanwil-motion-quality="medium"] .ppid-footer {
    backdrop-filter: blur(10px);
}

/* Tier low mengandalkan warna semi-transparan tanpa blur real-time yang mahal. */
body[data-kanwil-motion-quality="low"] .ppid-topbar,
body[data-kanwil-motion-quality="low"] .ppid-section-panel,
body[data-kanwil-motion-quality="low"] .ppid-info-card,
body[data-kanwil-motion-quality="low"] .ppid-contact-card,
body[data-kanwil-motion-quality="low"] .ppid-map-card,
body[data-kanwil-motion-quality="low"] .ppid-empty-card,
body[data-kanwil-motion-quality="low"] .ppid-footer {
    backdrop-filter: none;
}

body[data-kanwil-motion-quality="low"] .ppid-section-panel {
    background: rgba(247, 250, 248, .92);
}

body[data-kanwil-motion-quality="low"] .ppid-info-card,
body[data-kanwil-motion-quality="low"] .ppid-contact-card,
body[data-kanwil-motion-quality="low"] .ppid-map-card,
body[data-kanwil-motion-quality="low"] .ppid-empty-card {
    background: rgba(255, 255, 255, .9);
}

body[data-kanwil-motion-quality="low"] .ppid-header::after {
    animation: none;
}

@keyframes ppid-kanwil-header-stars {
    to { background-position: 190px 20px, -230px 18px, 270px -16px, -210px 24px; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .ppid-kanwil-logo { max-width: clamp(180px, 16vw, 210px); }
    .ppid-kanwil-page .ppid-header-inner { gap: 12px; }
    .ppid-kanwil-page .ppid-header .navmenu ul { gap: 0; }
    .ppid-kanwil-page .ppid-header .navmenu > ul > li > a { padding: 11px 7px; font-size: 12px; }
    .ppid-kanwil-page .ppid-header .ppid-action-btn { padding: 9px 11px; font-size: 12px; }
}

@media (max-width: 1199.98px) {
    .ppid-kanwil-page .ppid-header .mobile-nav-toggle {
        background: rgba(255, 255, 255, .12);
        border-radius: 14px;
        padding: 8px;
    }

    body.ppid-kanwil-page.mobile-nav-active .ppid-header .navmenu > ul > li > a,
    body.ppid-kanwil-page.mobile-nav-active .ppid-header .navmenu > ul > li > a:focus {
        color: var(--ppid-ink);
    }

    body.ppid-kanwil-page.mobile-nav-active .ppid-header .navmenu > ul > li > a:hover,
    body.ppid-kanwil-page.mobile-nav-active .ppid-header .navmenu > ul > li:hover > a,
    body.ppid-kanwil-page.mobile-nav-active .ppid-header .navmenu > ul > li > .active {
        color: var(--ppid-green-dark);
        background: var(--ppid-green-soft);
    }
}

@media (max-width: 575.98px) {
    .ppid-kanwil-logo {
        max-width: clamp(160px, 48vw, 190px);
        max-height: 54px;
    }
    .ppid-kanwil-siger { width: 88vw; top: 35%; opacity: .09; }
    .ppid-kanwil-page .ppid-header::after { opacity: calc(.35 - var(--kanwil-scroll)); }
    .ppid-kanwil-page .ppid-section-panel,
    .ppid-kanwil-page .ppid-info-card { background: rgba(255, 255, 255, .82); }
}

@media (prefers-reduced-motion: reduce) {
    .ppid-kanwil-page .ppid-header::after { animation: none; }
    .ppid-kanwil-page .ppid-kanwil-spotlight,
    .ppid-kanwil-page .ppid-kanwil-header-spotlight { display: none; }
    .ppid-kanwil-page .ppid-header,
    .ppid-kanwil-page .ppid-hero-content,
    .ppid-kanwil-page .ppid-stat-card { transition: none; }
}

@media print {
    body.ppid-kanwil-page { background: #fff; }
    .ppid-kanwil-backdrop { display: none !important; }
    .ppid-kanwil-page .ppid-content-section,
    .ppid-kanwil-page .ppid-contact-section { background: #fff !important; }
    .ppid-kanwil-page .ppid-content-section > .container-fluid > .ppid-section-heading h2,
    .ppid-kanwil-page .ppid-content-section > .container-fluid > .ppid-section-heading p { color: #000 !important; }
}