/* ============================================================
   FILE: public/css/profil.css
   PAGE: resources/views/frontend/profil.blade.php
   ============================================================ */

/* ═══════════════════════════════════════════════════
   CSS VARIABLES
═══════════════════════════════════════════════════ */
:root {
    --pf-blue-dark:  #061153;
    --pf-blue-mid:   #1a3a8f;
    --pf-blue:       #1e4ec8;
    --pf-blue-light: #3b82f6;
    --pf-gold:       #e9b945;
    --pf-gold-light: #fcd96a;
    --pf-amber:      #f59e0b;
    --pf-white:      #ffffff;
    --pf-gray-50:    #f8fafc;
    --pf-gray-100:   #f1f5f9;
    --pf-gray-200:   #e2e8f0;
    --pf-gray-400:   #94a3b8;
    --pf-gray-600:   #475569;
    --pf-text:       #0f172a;
    --pf-ease:       cubic-bezier(0.22, 1, 0.36, 1);
    --pf-ease-s:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --pf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* [BARU] ganti 4x duplikat inline */
    --pf-shadow:     0 8px 32px rgba(26,58,143,.10);
    --pf-shadow-hover: 0 22px 64px rgba(26,58,143,.20);
}

.pf-page *, .pf-page *::before, .pf-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.pf-page {
    font-family: var(--body-font);
    background: var(--pf-gray-50);
    color: var(--pf-text);
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════ */
.pf-hero {
    position: relative;
    background-color: var(--pf-blue-dark);
    background-image: url('../images/hero2.png');
    background-position: center;
    background-size: cover;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 48px;
    overflow: hidden;
    text-align: center;
}
.pf-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(6,17,83,.90) 0%, rgba(26,58,143,.78) 50%, rgba(6,17,83,.85) 100%);
    z-index: 1;
}

/* Orbs — will-change:transform agar GPU layer, tidak repaint */
.pf-hero__orb {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.05);
    z-index: 1;
    will-change: transform;
    animation: pf-orb-float 9s ease-in-out infinite;
}
.pf-hero__orb:nth-child(1) { width: 340px; height: 340px; top: -100px; left: -80px;  animation-delay: 0s; }
.pf-hero__orb:nth-child(2) { width: 220px; height: 220px; top: 10px;   right: -60px; animation-delay: -3.5s; }
.pf-hero__orb:nth-child(3) { width: 160px; height: 160px; bottom: -20px; left: 35%;  animation-delay: -6s; }
@keyframes pf-orb-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-22px) scale(1.05); }
}

.pf-hero__garis {
    position: absolute;
    left: 0; bottom: 0;
    height: 85%; width: auto;
    z-index: 2;
    pointer-events: none;
    opacity: .12;
    object-fit: contain;
    object-position: left bottom;
    animation: pf-garisIn 1.1s var(--pf-ease) 0.2s both;
}
@keyframes pf-garisIn {
    from { opacity: 0; transform: translateX(-18px); }
    to   { opacity: .12; transform: translateX(0); }
}

.pf-hero__content {
    position: relative;
    z-index: 3;
    animation: pf-heroIn 0.6s ease 0.05s both;
}
@keyframes pf-heroIn {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.pf-hero__content h1 {
    font-family: var(--title-font);
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--pf-white);
    letter-spacing: -.5px;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.pf-hero__content h1 span { color: var(--pf-gold); }

.pf-breadcrumb {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .875rem;
    color: rgba(255,255,255,.72);
    animation: pf-heroIn 0.6s ease 0.22s both;
    flex-wrap: wrap;
}
.pf-breadcrumb a { color: var(--pf-gold-light); text-decoration: none; transition: color .3s; }
.pf-breadcrumb a:hover { color: var(--pf-white); }
.pf-breadcrumb .sep { opacity: .45; }

/* Wave border */
.pf-hero__border {
    position: absolute;
    bottom: -2px; left: 0;
    width: 100%;
    z-index: 4;
    pointer-events: none;
    height: 40px;
}
@media (min-width: 768px) { .pf-hero__border { height: 65px; } }
.pf-hero__border .pf-parallax > use {
    animation: pf-wave 25s cubic-bezier(.55,.5,.45,.5) infinite;
    will-change: transform;
}
.pf-hero__border .pf-parallax > use:nth-child(1) { animation-delay: -2s;  animation-duration: 7s;  fill: rgba(255,255,255,.20); }
.pf-hero__border .pf-parallax > use:nth-child(2) { animation-delay: -3s;  animation-duration: 10s; fill: rgba(255,255,255,.40); }
.pf-hero__border .pf-parallax > use:nth-child(3) { animation-delay: -4s;  animation-duration: 13s; fill: rgba(255,255,255,.60); }
.pf-hero__border .pf-parallax > use:nth-child(4) { animation-delay: -5s;  animation-duration: 20s; fill: #ffffff; }
@keyframes pf-wave {
    0%   { transform: translate3d(-90px,0,0); }
    100% { transform: translate3d(85px,0,0); }
}

/* ═══════════════════════════════════════════════════
   CONTAINER / UTIL
═══════════════════════════════════════════════════ */
.pf-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
@media (min-width: 600px)  { .pf-container { padding: 0 28px; } }
@media (min-width: 768px)  { .pf-container { padding: 0 48px; } }
@media (min-width: 1024px) { .pf-container { padding: 0 60px; } }

.pf-tag {
    display: inline-block;
    border: 1.5px solid #2563eb;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 4px 18px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.pf-section-title {
    font-family: var(--title-font);
    font-size: clamp(1.4rem, 3.5vw, 2rem);
    font-weight: 700;
    color: var(--pf-blue-dark);
    margin-bottom: 12px;
}
.pf-section-sub { font-size: 14.5px; color: var(--pf-gray-600); line-height: 1.7; }

/* ═══════════════════════════════════════════════════
   SCROLL REVEAL
   Animasi CSS murni (autoplay saat paint) — TIDAK menunggu JS.
   Sebelumnya opacity:0 hanya dimunculkan lewat class .pf-visible
   dari IntersectionObserver di profil.js. Karena file JS itu dimuat
   di akhir halaman dan harus antre di belakang banyak gambar (hero,
   galeri, foto pengurus — browser hanya membuka ~6 koneksi paralel
   per domain), seluruh isi halaman bisa tampak kosong hingga
   beberapa detik walau HTML-nya sudah ada. class .pf-visible tetap
   dipertahankan (ditambahkan JS saat elemen discroll ke viewport)
   hanya untuk mengaktifkan efek hover pada beberapa komponen.
═══════════════════════════════════════════════════ */
.pf-reveal {
    animation: pf-revealIn .6s var(--pf-ease) both;
}
@keyframes pf-revealIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-reveal-left {
    animation: pf-revealLeftIn .65s var(--pf-ease) both;
}
@keyframes pf-revealLeftIn {
    from { opacity: 0; transform: translateX(-32px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pf-reveal-right {
    animation: pf-revealRightIn .65s var(--pf-ease) both;
}
@keyframes pf-revealRightIn {
    from { opacity: 0; transform: translateX(32px); }
    to   { opacity: 1; transform: translateX(0); }
}

.pf-reveal-scale {
    animation: pf-revealScaleIn .55s var(--pf-ease) both;
}
@keyframes pf-revealScaleIn {
    from { opacity: 0; transform: scale(.94) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Stagger delays — sekarang animation-delay, selaras teknik di atas */
.pf-d1 { animation-delay: .06s; }
.pf-d2 { animation-delay: .12s; }
.pf-d3 { animation-delay: .18s; }
.pf-d4 { animation-delay: .24s; }
.pf-d5 { animation-delay: .30s; }
.pf-d6 { animation-delay: .36s; }
.pf-d7 { animation-delay: .42s; }
.pf-d8 { animation-delay: .48s; }

/* ═══════════════════════════════════════════════════
   ABOUT SECTION
═══════════════════════════════════════════════════ */
.pf-about {
    padding: 72px 0 80px;
    background: var(--pf-white);
    position: relative;
    overflow: hidden;
}
.pf-about .pf-garis-r {
    position: absolute;
    right: 0; top: 0;
    height: 100%; width: auto;
    pointer-events: none;
    opacity: .05;
    object-fit: contain;
    object-position: right center;
}
.pf-about__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    align-items: center;
}
@media (min-width: 900px) {
    .pf-about__inner { grid-template-columns: 1fr 1fr; gap: 72px; }
}
.pf-about__visual { position: relative; max-width: 460px; margin: 0 auto; }
@media (min-width: 900px) { .pf-about__visual { max-width: 100%; margin: 0; } }

.pf-about__img-main {
    width: 100%; border-radius: 24px;
    display: block;
    box-shadow: 0 20px 60px rgba(6,17,83,.22);
    object-fit: cover;
    height: 320px;
    will-change: transform;
    animation: pf-floatImg 6s ease-in-out infinite;
}
@media (min-width: 400px) { .pf-about__img-main { height: 280px; } }
@keyframes pf-floatImg {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-10px); }
}

/* [HAPUS] pf-imgShimmer — animasi shimmer infinite pada ::after visual
   sangat berat karena memicu repaint background-position setiap frame.
   Efek visual tidak signifikan (opacity .06), dihapus sepenuhnya. */

.pf-about__badge {
    position: absolute;
    top: 24px; left: -14px;
    background: linear-gradient(135deg, var(--pf-blue-dark), var(--pf-blue));
    color: var(--pf-white);
    border-radius: 16px;
    padding: 14px 18px;
    box-shadow: 0 10px 32px rgba(6,17,83,.30);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 90px;
    border: 1.5px solid rgba(255,255,255,.15);
    z-index: 2;
    will-change: transform;
    animation: pf-badgeFloat 4s ease-in-out infinite;
}
@keyframes pf-badgeFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.pf-about__badge .badge-num {
    font-family: var(--title-font);
    font-size: 28px; font-weight: 700;
    color: var(--pf-gold); line-height: 1;
}
.pf-about__badge .badge-lbl {
    font-size: 10.5px; font-weight: 600;
    color: rgba(255,255,255,.82); margin-top: 4px; line-height: 1.3;
}
.pf-about__deco-corner {
    position: absolute; bottom: -16px; left: 0;
    width: 70px; height: 70px;
    background: var(--pf-amber);
    border-radius: 0 18px 18px 0;
    opacity: .3; z-index: 0;
}

.pf-about__text p {
    font-size: clamp(13.5px, 2vw, 15px);
    color: var(--pf-gray-600); line-height: 1.78; margin-bottom: 16px;
}
.pf-about__text p:last-of-type { margin-bottom: 0; }
.pf-about__text p strong { color: var(--pf-blue-dark); font-weight: 700; }

.pf-about__highlights { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.pf-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(37,99,235,.07);
    border: 1px solid rgba(37,99,235,.15);
    color: var(--pf-blue-mid);
    font-size: 12.5px; font-weight: 700;
    padding: 7px 15px; border-radius: 50px;
    transition: background .3s ease, transform .35s var(--pf-ease-spring), color .3s ease;
}
.pf-highlight-pill svg { width: 14px; height: 14px; transition: transform .3s var(--pf-ease); }
@media (hover:hover) {
    .pf-highlight-pill:hover {
        background: var(--pf-blue-mid);
        color: var(--pf-white);
        transform: translateY(-3px) scale(1.04);
    }
    .pf-highlight-pill:hover svg { transform: rotate(-8deg) scale(1.15); }
}

/* ═══════════════════════════════════════════════════
   STATS SECTION
═══════════════════════════════════════════════════ */
.pf-stats {
    background: linear-gradient(135deg, var(--pf-blue-dark) 0%, var(--pf-blue) 60%, #1e40af 100%);
    padding: 52px 0;
    position: relative;
    overflow: hidden;
}
.pf-stats .pf-garis-l {
    position: absolute; left: 0; bottom: 0;
    height: 100%; width: auto;
    pointer-events: none; opacity: .07;
    object-fit: contain; object-position: left bottom;
}
.pf-stats__deco-circles {
    position: absolute; top: 0; left: 0; right: 0;
    display: flex; justify-content: space-around;
    pointer-events: none; z-index: 1;
}
.pf-stats__circle { border-radius: 50%; background: rgba(255,255,255,.05); flex-shrink: 0; }
.pf-stats__circle.c1 { width: 160px; height: 160px; margin-top: -70px; }
.pf-stats__circle.c2 { width: 110px; height: 110px; margin-top: -40px; }
.pf-stats__circle.c3 { width: 140px; height: 140px; margin-top: -58px; }

.pf-stats__grid {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
    text-align: center;
}
@media (min-width: 768px) { .pf-stats__grid { grid-template-columns: repeat(4,1fr); gap: 20px; } }

.pf-stat-item {
    animation: pf-statIn .6s var(--pf-ease) both;
}
@keyframes pf-statIn {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pf-stat-num {
    font-family: var(--title-font);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    color: var(--pf-gold);
    line-height: 1;
    margin-bottom: 6px;
}
.pf-stat-num.pf-counted {
    animation: pf-numPulse .5s var(--pf-ease) both;
}
@keyframes pf-numPulse {
    0%   { text-shadow: 0 0 0 rgba(233,185,69,0); }
    50%  { text-shadow: 0 0 24px rgba(233,185,69,.55); }
    100% { text-shadow: 0 0 0 rgba(233,185,69,0); }
}
.pf-stat-lbl { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.82); line-height: 1.4; }

/* ═══════════════════════════════════════════════════
   TIMELINE SECTION
═══════════════════════════════════════════════════ */
.pf-timeline-section {
    padding: 80px 0;
    background: var(--pf-gray-50);
    position: relative; overflow: hidden;
}
.pf-timeline-section .pf-garis-r2 {
    position: absolute; right: 0; bottom: 0;
    height: 70%; width: auto;
    pointer-events: none; opacity: .06;
}
.pf-timeline-header { text-align: center; margin-bottom: 56px; }

.pf-timeline { position: relative; max-width: 860px; margin: 0 auto; }
.pf-timeline::before {
    content: '';
    position: absolute;
    left: 20px; top: 0; bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--pf-blue) 0%, var(--pf-gold) 50%, var(--pf-blue) 100%);
    opacity: .3;
    animation: pf-lineGrow 1.2s var(--pf-ease) .3s both;
    transform-origin: top;
}
@keyframes pf-lineGrow {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: .3; }
}
@media (min-width: 600px) { .pf-timeline::before { left: 50%; } }

.pf-tl-item {
    display: flex; gap: 24px;
    align-items: flex-start;
    padding-left: 56px;
    margin-bottom: 40px;
    position: relative;
    animation: pf-tlIn .6s var(--pf-ease) both;
}
@keyframes pf-tlIn {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (min-width: 600px) {
    .pf-tl-item { padding-left: 0; gap: 0; flex-direction: row; }
    .pf-tl-item:nth-child(even) {
        flex-direction: row-reverse;
        transform: translateX(24px);
    }
    .pf-tl-item:nth-child(even).pf-visible { transform: translateX(0); }
    .pf-tl-item:nth-child(even) .pf-tl-content { text-align: right; align-items: flex-end; }
}

.pf-tl-dot {
    position: absolute;
    left: 11px; top: 6px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--pf-blue-dark), var(--pf-blue));
    border: 3px solid var(--pf-white);
    box-shadow: 0 0 0 3px rgba(30,78,200,.25);
    z-index: 1;
    transition: transform .4s var(--pf-ease-spring), box-shadow .4s ease;
}
@media (min-width: 600px) {
    .pf-tl-dot { left: 50%; transform: translateX(-50%); top: 12px; }
    .pf-tl-item.pf-visible .pf-tl-dot { box-shadow: 0 0 0 5px rgba(30,78,200,.20); }
}
@media (max-width: 599px) {
    .pf-tl-item.pf-visible .pf-tl-dot { transform: scale(1.15); }
}

.pf-tl-content { flex: 1; display: flex; flex-direction: column; }
@media (min-width: 600px) { .pf-tl-content { width: calc(50% - 28px); flex: none; } }

.pf-tl-card {
    background: var(--pf-white);
    border-radius: 18px; padding: 20px 22px;
    box-shadow: var(--pf-shadow);
    border: 1.5px solid var(--pf-gray-200);
    position: relative;
    overflow: hidden;
    transition: box-shadow .4s ease, border-color .35s ease, transform .4s var(--pf-ease);
}
/* [HAPUS] pf-tl-card::after shimmer — animasi on-hover ::after memicu
   layer promotion setiap hover. Efek visual ringan diganti hover transform saja. */
@media (hover:hover) {
    .pf-tl-card:hover {
        box-shadow: var(--pf-shadow-hover);
        border-color: var(--pf-blue-light);
        transform: translateY(-4px);
    }
}
.pf-tl-year {
    font-family: var(--title-font);
    font-size: 15px; font-weight: 700;
    color: var(--pf-blue); margin-bottom: 4px;
    display: flex; align-items: center; gap: 7px;
}
.pf-tl-year::before {
    content: '';
    display: inline-block; width: 5px; height: 5px;
    border-radius: 50%; background: var(--pf-gold);
}
.pf-tl-card h4 {
    font-size: 15px; font-weight: 700;
    color: var(--pf-blue-dark); margin-bottom: 6px; line-height: 1.35;
}
.pf-tl-card p { font-size: 13px; color: var(--pf-gray-600); line-height: 1.65; margin: 0; }
@media (min-width: 600px) {
    .pf-tl-item:nth-child(odd)  .pf-tl-content { padding-right: 36px; }
    .pf-tl-item:nth-child(even) .pf-tl-content { padding-left: 36px; }
}

/* ═══════════════════════════════════════════════════
   GALERI SECTION
═══════════════════════════════════════════════════ */
.pf-galeri {
    padding: 72px 0 80px;
    background: var(--pf-white);
    position: relative; overflow: hidden;
}
.pf-galeri .pf-garis-l {
    position: absolute; left: 0; bottom: 0;
    height: 65%; width: auto;
    pointer-events: none; opacity: .07;
    object-fit: contain; object-position: left bottom;
}
.pf-galeri-header { text-align: center; margin-bottom: 40px; }

.pf-galeri-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media (min-width: 600px)  { .pf-galeri-grid { grid-template-columns: repeat(3,1fr); gap: 14px; } }
@media (min-width: 1024px) {
    .pf-galeri-grid {
        grid-template-columns: repeat(4,1fr);
        grid-template-rows: repeat(2, 220px);
        gap: 16px;
    }
    .pf-galeri-item:first-child { grid-column: span 2; grid-row: span 2; }
    .pf-galeri-item:nth-child(4) { grid-column: span 2; }
}

.pf-galeri-item {
    position: relative;
    border-radius: 16px; overflow: hidden;
    cursor: pointer;
    background: var(--pf-gray-100);
}
@media (max-width: 1023px) { .pf-galeri-item { aspect-ratio: 4/3; } }

.pf-galeri-item img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .6s var(--pf-ease);
}
.pf-galeri-item__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,17,83,.7) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s ease;
    display: flex; align-items: flex-end; padding: 16px;
}
.pf-galeri-item__overlay span {
    font-size: 12.5px; font-weight: 700;
    color: var(--pf-white); line-height: 1.4;
}
@media (hover:hover) {
    .pf-galeri-item:hover { box-shadow: 0 16px 48px rgba(6,17,83,.25); }
    .pf-galeri-item:hover img { transform: scale(1.07); }
    .pf-galeri-item:hover .pf-galeri-item__overlay { opacity: 1; }
}

/* [GABUNG] pf-ripple & pf-card-ripple pakai @keyframes yang sama */
.pf-ripple,
.pf-card-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    animation: pf-rippleAnim .7s linear;
    pointer-events: none;
}
.pf-ripple      { background: rgba(255,255,255,.30); }
.pf-card-ripple { background: rgba(59,130,246,.22); }
@keyframes pf-rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ═══════════════════════════════════════════════════
   PENGURUS SECTION
═══════════════════════════════════════════════════ */
.pf-pengurus-section {
    background: var(--pf-gray-50);
    padding: 72px 0 80px;
    position: relative; overflow: hidden;
}
.pf-pengurus-section .pf-garis-r {
    position: absolute; right: 0; top: 0;
    height: 100%; width: auto;
    pointer-events: none; opacity: .05;
}
.pf-pengurus-header { text-align: center; margin-bottom: 48px; }

.pf-pengurus-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 480px)  { .pf-pengurus-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px)  { .pf-pengurus-grid { grid-template-columns: repeat(3,1fr); gap: 24px; } }
@media (min-width: 1024px) { .pf-pengurus-grid { grid-template-columns: repeat(4,1fr); } }

.pf-pcard {
    background: var(--pf-white);
    border-radius: 20px; overflow: hidden;
    box-shadow: var(--pf-shadow);
    border: 1.5px solid var(--pf-gray-200);
    text-align: center;
    position: relative;
    cursor: pointer;
    animation: pf-pcardIn .5s var(--pf-ease-s) both;
    transition: box-shadow .3s ease,
                border-color .3s ease,
                transform .3s var(--pf-ease-s);
}
@keyframes pf-pcardIn {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

.pf-pcard::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--pf-gold), var(--pf-amber), var(--pf-gold));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--pf-ease);
    z-index: 2;
}
.pf-pcard.pf-visible:hover::before { transform: scaleX(1); }

@media (hover:hover) {
    .pf-pcard.pf-visible:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: var(--pf-shadow-hover);
        border-color: var(--pf-blue-light);
    }
}

.pf-pcard__photo-wrap {
    position: relative; width: 100%; aspect-ratio: 1;
    background: var(--pf-gray-100); overflow: hidden;
}
.pf-pcard__photo-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .5s var(--pf-ease);
}
/* [HAPUS] pf-pcard__photo-wrap::after — overlay gradient tipis yg selalu ada di DOM
   tiap card tapi hanya terlihat saat hover. Dihapus, hover transform gambar sudah cukup. */
@media (hover:hover) {
    .pf-pcard.pf-visible:hover .pf-pcard__photo-wrap img { transform: scale(1.08); }
}
.pf-pcard__photo-empty {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--pf-gray-100), var(--pf-gray-200));
    color: var(--pf-gray-400);
}
.pf-pcard__photo-empty svg { width: 44px; height: 44px; opacity: .4; }
.pf-pcard__body { padding: 16px 14px 20px; }
.pf-pcard__name {
    font-size: 13.5px; font-weight: 700;
    color: var(--pf-blue-dark); margin-bottom: 5px; line-height: 1.35;
    transition: color .3s;
}
@media (hover:hover) { .pf-pcard.pf-visible:hover .pf-pcard__name { color: var(--pf-blue); } }
.pf-pcard__role {
    display: inline-block;
    background: rgba(26,58,143,.08);
    color: var(--pf-blue-mid);
    font-size: 11px; font-weight: 700;
    padding: 3px 12px; border-radius: 50px; letter-spacing: .3px;
    transition: background .3s, color .3s;
}
@media (hover:hover) {
    .pf-pcard.pf-visible:hover .pf-pcard__role {
        background: var(--pf-blue-dark);
        color: var(--pf-white);
    }
}

.pf-see-all-wrap { text-align: center; margin-top: 36px; }
.pf-see-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 30px;
    background: var(--pf-blue-dark);
    color: var(--pf-white);
    font-size: 13px; font-weight: 700;
    border-radius: 10px;
    text-decoration: none;
    letter-spacing: .4px;
    text-transform: uppercase;
    transition: background .3s ease, transform .35s var(--pf-ease), box-shadow .3s ease;
}
/* [GABUNG] semua svg arrow pakai satu aturan */
.pf-see-all-btn svg,
.pf-btn-gold svg,
.pf-btn-white-outline svg { transition: transform .3s var(--pf-ease-spring); }
@media (hover:hover) {
    .pf-see-all-btn:hover {
        background: var(--pf-blue);
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(30,78,200,.30);
    }
    .pf-see-all-btn:hover svg { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════
   KONTAK SECTION
═══════════════════════════════════════════════════ */
.pf-kontak {
    background: linear-gradient(135deg, var(--pf-blue-dark) 0%, var(--pf-blue-mid) 50%, var(--pf-blue) 100%);
    padding: 64px 0;
    text-align: center;
    position: relative; overflow: hidden;
}
.pf-kontak::before {
    content: '';
    position: absolute; inset: 0;
    background: url('../images/garis2.png') right center/auto 100% no-repeat;
    opacity: .06; pointer-events: none;
}
.pf-kontak h2 {
    font-family: var(--title-font);
    font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700;
    color: var(--pf-white); margin-bottom: 12px;
}
.pf-kontak p {
    font-size: 14.5px; color: rgba(255,255,255,.78);
    max-width: 520px; margin: 0 auto 28px; line-height: 1.65;
}
.pf-kontak-cards {
    display: flex; justify-content: center;
    gap: 16px; flex-wrap: wrap; margin-bottom: 36px;
}
.pf-kontak-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px; padding: 18px 24px;
    display: flex; align-items: center; gap: 12px;
    min-width: 200px;
    transition: background .3s ease, border-color .3s ease, transform .35s var(--pf-ease);
}
@media (hover:hover) {
    .pf-kontak-card:hover {
        background: rgba(255,255,255,.14);
        border-color: rgba(233,185,69,.4);
        transform: translateY(-3px);
    }
}
.pf-kontak-card__icon {
    width: 42px; height: 42px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pf-kontak-card__icon svg { width: 20px; height: 20px; }
.pf-kontak-card__text { text-align: left; }
.pf-kontak-card__text .lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.6); margin-bottom: 2px; }
.pf-kontak-card__text .val { font-size: 13px; font-weight: 700; color: var(--pf-white); }

.pf-kontak-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.pf-btn-gold {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px;
    background: var(--pf-amber); color: var(--pf-white);
    font-size: 13.5px; font-weight: 700; border-radius: 10px;
    text-decoration: none;
    transition: background .3s, transform .35s var(--pf-ease), box-shadow .3s;
    animation: pf-ctaPulse 2.2s ease 1.5s 2;
}
@keyframes pf-ctaPulse {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
    60%  { box-shadow: 0 0 0 10px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
@media (hover:hover) {
    .pf-btn-gold:hover { background: #d97706; transform: translateY(-2px); }
    .pf-btn-gold:hover svg { transform: translateX(5px); }
}
.pf-btn-white-outline {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 28px;
    background: transparent;
    border: 2px solid rgba(255,255,255,.35);
    color: var(--pf-white);
    font-size: 13.5px; font-weight: 700; border-radius: 10px;
    text-decoration: none;
    transition: background .3s, border-color .3s, transform .35s var(--pf-ease);
}
@media (hover:hover) {
    .pf-btn-white-outline:hover {
        background: rgba(255,255,255,.12);
        border-color: rgba(255,255,255,.6);
        transform: translateY(-2px);
    }
    .pf-btn-white-outline:hover svg { transform: translateX(5px); }
}

/* ═══════════════════════════════════════════════════
   LIGHTBOX
═══════════════════════════════════════════════════ */
.pf-lightbox {
    position: fixed; inset: 0;
    background: rgba(6,17,83,.92);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.pf-lightbox.open { opacity: 1; pointer-events: all; }
.pf-lightbox img {
    max-width: 90vw; max-height: 85vh;
    border-radius: 16px; object-fit: contain;
    box-shadow: 0 30px 80px rgba(0,0,0,.5);
    transform: scale(.92) translateY(16px);
    transition: transform .45s var(--pf-ease);
}
.pf-lightbox.open img { transform: scale(1) translateY(0); }
.pf-lightbox__close {
    position: absolute; top: 20px; right: 24px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.12);
    border: 1.5px solid rgba(255,255,255,.25);
    color: var(--pf-white);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .3s, transform .3s var(--pf-ease);
}
@media (hover:hover) {
    .pf-lightbox__close:hover {
        background: rgba(255,255,255,.25);
        transform: rotate(90deg);
    }
}

/* ═══════════════════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════════════════ */
.pf-back-top {
    position: fixed; bottom: 28px; right: 24px;
    width: 46px; height: 46px; border-radius: 50%;
    background: linear-gradient(135deg, var(--pf-blue-dark), var(--pf-blue-mid));
    border: 2px solid rgba(255,255,255,.2);
    color: var(--pf-white);
    display: flex; align-items: center; justify-content: center;
    z-index: 800; cursor: pointer;
    opacity: 0; transform: translateY(14px);
    transition: opacity .4s ease, transform .4s var(--pf-ease), box-shadow .3s ease;
    box-shadow: 0 6px 24px rgba(6,17,83,.3);
}
.pf-back-top.show { opacity: 1; transform: translateY(0); }
@media (hover:hover) {
    .pf-back-top:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 32px rgba(6,17,83,.40);
    }
}

/* ═══════════════════════════════════════════════════
   FLOATING BACKGROUND PARTICLES
   [HAPUS] pf-bg-particles position:fixed — diganti absolute agar
   tidak memaksa compositing layer terpisah sepanjang halaman terbuka.
═══════════════════════════════════════════════════ */
.pf-bg-particles {
    position: absolute; inset: 0;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.pf-particle {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle, rgba(26,58,143,.06), transparent);
    will-change: transform;
    animation: pf-drift linear infinite;
}
@keyframes pf-drift {
    0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}