/* =====================================================================
   PJSP Frontend — Cinematic theme (LIGHT default)
   Company profile · PT Putera Jaya Sakti Perkasa
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --pj-crimson: #b92025;
    --pj-crimson-700: #861519;
    --pj-gold: #c9a24b;
    --pj-ink: #17181c;
    --pj-body: #2e3138;
    --pj-cream: #faf7f2;
    --pj-cream-2: #f3ede3;
    --pj-line: #e9e2d6;
    --pj-white: #ffffff;
    /* Bayangan BERLAPIS, bukan satu lapis lebar.
       Kartu putih di atas latar cream (#faf7f2) hanya berkontras 1,07:1 —
       praktis tak terlihat — jadi seluruh pemisahan bergantung pada bayangan.
       Satu lapis 60px pada 10% tersebar terlalu tipis untuk memberi tepi.
       Tiga lapis: 1px untuk garis tepi yang tegas, 6px untuk terangkat,
       24px untuk kedalaman. Total opasitasnya tetap rendah agar tidak berat. */
    --pj-shadow:
        0 1px 2px rgba(23, 24, 28, .07),
        0 6px 16px rgba(23, 24, 28, .08),
        0 24px 48px rgba(23, 24, 28, .07);

    /* Versi lebih kuat untuk keadaan hover/aktif */
    --pj-shadow-lift:
        0 2px 4px rgba(23, 24, 28, .08),
        0 12px 28px rgba(23, 24, 28, .12),
        0 32px 64px rgba(23, 24, 28, .10);
    --pj-nav-h: 78px;
}

* { box-sizing: border-box; }

.pjx {
    margin: 0;
    font-family: 'Inter', sans-serif;
    color: var(--pj-body);
    background: var(--pj-white);
    line-height: 1.7;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

.pjx img { max-width: 100%; display: block; }
.pjx a { text-decoration: none; color: inherit; transition: color .2s ease; }
.pjx section { position: relative; }

.pjx h1, .pjx h2, .pjx h3, .pjx h4 {
    font-family: 'Playfair Display', serif;
    color: var(--pj-ink);
    line-height: 1.12;
    margin: 0;
    letter-spacing: -.5px;
}

.pjx-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }

/* ---------- Eyebrow / labels ---------- */
.pjx-eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: 'Inter', sans-serif; font-size: .74rem; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase; color: var(--pj-crimson);
    margin-bottom: 1.1rem;
}
.pjx-eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--pj-gold); }
.pjx-eyebrow.center { justify-content: center; }

/* ---------- Buttons ---------- */
.pjx-btn {
    display: inline-flex; align-items: center; gap: .6rem;
    padding: .95rem 1.9rem; border-radius: 999px; font-weight: 600; font-size: .92rem;
    letter-spacing: .3px; cursor: pointer; border: 1.5px solid transparent; transition: all .25s ease;
}
.pjx-btn-primary {
    background: linear-gradient(120deg, var(--pj-crimson), var(--pj-crimson-700));
    color: #fff; box-shadow: 0 12px 26px rgba(185, 32, 37, .30);
}
.pjx-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(185, 32, 37, .38); color: #fff; }
.pjx-btn-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.pjx-btn-ghost:hover { background: #fff; color: var(--pj-ink); border-color: #fff; }
.pjx-btn-dark { border-color: var(--pj-ink); color: var(--pj-ink); }
.pjx-btn-dark:hover { background: var(--pj-ink); color: #fff; }

/* ---------- Navbar ---------- */
.pjx-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--pj-nav-h);
    display: flex; align-items: center; transition: background .35s ease, box-shadow .35s ease, height .35s ease;
}
.pjx-nav .pjx-container { display: flex; align-items: center; justify-content: space-between; }
.pjx-brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.pjx-brand img { height: 46px; width: auto; transition: filter .35s ease; }
/* Nama perusahaan: Inter tebal (bukan serif) supaya tegas, dan WAJIB satu baris —
   white-space:nowrap + font-size clamp yang mengecil sendiri saat layar sempit. */
.pjx-brand span {
    font-family: 'Inter', sans-serif; font-weight: 800; color: #fff;
    font-size: clamp(.58rem, .95vw, .88rem);
    text-transform: uppercase; letter-spacing: .045em; white-space: nowrap;
    line-height: 1.1; transition: color .35s ease;
}
@media (max-width: 767px) {
    .pjx-brand img { height: 38px; }
    .pjx-brand { gap: .5rem; }
    /* Menu jadi hamburger di sini, ruang lebih lega → boleh sedikit lebih besar */
    .pjx-brand span { font-size: clamp(.58rem, 2.7vw, .8rem); letter-spacing: .03em; }
}
.pjx-menu { display: flex; align-items: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
.pjx-menu > li { position: relative; }
.pjx-menu > li > a {
    color: #fff; font-weight: 700; font-size: .93rem; letter-spacing: .3px;
    display: inline-flex; align-items: center; gap: .35rem; padding: .5rem 0;
}
.pjx-menu > li > a:hover { color: #fff; }
.pjx-menu > li > a::after {
    content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--pj-gold); transition: width .25s ease;
}
.pjx-menu > li > a:hover::after { width: 100%; }
/* Nama perusahaan tidak boleh turun baris, jadi menu yang mengalah saat layar menyempit */
@media (max-width: 1200px) {
    .pjx-menu { gap: 1.4rem; }
    .pjx-menu > li > a { font-size: .87rem; }
}
/* 768–991px paling sempit: 8 item menu masih horizontal, hamburger baru muncul di 767px */
@media (max-width: 991px) {
    .pjx-menu { gap: .8rem; }
    .pjx-menu > li > a { font-size: .79rem; letter-spacing: 0; }
}

/* dropdown */
.pjx-dropdown-menu {
    position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(8px);
    background: #fff; border-radius: 14px; box-shadow: var(--pj-shadow); padding: .6rem; min-width: 210px;
    opacity: 0; visibility: hidden; transition: all .22s ease; list-style: none; margin: 0;
}
.pjx-menu > li:hover .pjx-dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.pjx-dropdown-menu li a { display: block; padding: .6rem .9rem; border-radius: 9px; color: var(--pj-body); font-size: .9rem; font-weight: 600; }
.pjx-dropdown-menu li a:hover { background: var(--pj-cream); color: var(--pj-crimson); }

.pjx-nav-lang { display: flex; align-items: center; gap: .4rem; }

/* Animated hamburger (3 garis → X) */
.pjx-nav-toggle {
    display: none; position: relative; width: 30px; height: 20px; background: none; border: 0; cursor: pointer; padding: 0; z-index: 1002;
}
.pjx-nav-toggle span {
    position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: #fff;
    transition: transform .35s ease, top .35s ease, opacity .2s ease, background .35s ease;
}
.pjx-nav-toggle span:nth-child(1) { top: 0; }
.pjx-nav-toggle span:nth-child(2) { top: 9px; }
.pjx-nav-toggle span:nth-child(3) { top: 18px; }
.pjx-nav-toggle.is-open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.pjx-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.pjx-nav-toggle.is-open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }
.pjx-nav.scrolled .pjx-nav-toggle span { background: var(--pj-ink); }
/* saat menu overlay terbuka: nav transparan & hamburger putih di atas overlay gelap */
.pjx-nav.menu-open { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; }
.pjx-nav.menu-open .pjx-brand span { color: #fff; }
.pjx-nav.menu-open .pjx-nav-toggle span { background: #fff; }

/* scrolled state */
.pjx-nav.scrolled { background: rgba(255, 255, 255, .96); height: 66px; box-shadow: 0 6px 30px rgba(23, 24, 28, .08); backdrop-filter: blur(8px); }
.pjx-nav.scrolled .pjx-brand span,
.pjx-nav.scrolled .pjx-menu > li > a { color: var(--pj-ink); }
.pjx-nav.scrolled .pjx-menu > li > a:hover { color: var(--pj-crimson); }
.pjx-nav.scrolled .pjx-nav-toggle { color: var(--pj-ink); }

/* ---------- Hero ---------- */
.pjx-hero { height: 100vh; min-height: 640px; display: flex; align-items: center; overflow: hidden; background: #000; }
.pjx-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.pjx-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(100deg, rgba(15,15,18,.82) 0%, rgba(20,15,15,.55) 45%, rgba(134,21,25,.35) 100%);
}
/* Clean hero: full page (100vh), video mengisi penuh selayar */
.pjx-hero-clean { position: relative; height: 100vh; min-height: 600px; overflow: hidden; background: #0e0e11; }
.pjx-hero-media { position: absolute; inset: 0; width: 100%; height: 100%; background: #0e0e11 center / cover no-repeat; }
.pjx-hero-clean .pjx-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: opacity .12s linear; }
/* kelas dipasang langsung di HTML, dilepas via JS begitu frame pertama siap → poster background yang terlihat sementara */
.pjx-hero-clean .pjx-hero-video.is-loading { opacity: 0; }
.pjx-hero h1 { color: #fff; font-size: clamp(2.6rem, 6vw, 5rem); font-weight: 800; }
.pjx-hero h1 .accent { color: var(--pj-gold); font-style: italic; }
.pjx-hero p { font-size: 1.12rem; color: rgba(255, 255, 255, .88); max-width: 560px; margin: 1.5rem 0 2.4rem; }
.pjx-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.pjx-hero-scroll {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3;
    color: rgba(255,255,255,.8); font-size: .72rem; letter-spacing: 2px; text-transform: uppercase;
    display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.pjx-hero-scroll .line { width: 1px; height: 42px; background: rgba(255,255,255,.5); animation: pjxScroll 1.8s ease-in-out infinite; }
@keyframes pjxScroll { 0%,100% { transform: scaleY(.4); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ---------- Section shell ---------- */
.pjx-section { padding: 110px 0; }
.pjx-section.cream { background: var(--pj-cream); }
.pjx-section-head { max-width: 640px; margin-bottom: 60px; }
.pjx-section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.pjx-section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); font-weight: 800; }
.pjx-section-head p { margin-top: 1.1rem; font-size: 1.05rem; color: var(--pj-body); }

/* ---------- Intro / about split ---------- */
.pjx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.pjx-split .media { position: relative; }
/* Rasio 16:10 dipilih supaya foto lanskap tidak terpotong habis. Sebelumnya
   tinggi dipatok 520px sementara lebarnya ~537px — hampir persegi — sehingga
   foto 1.76:1 kehilangan sekitar 41% sisi kiri-kanannya. Dengan 16:10 sisanya
   tinggal ~9%. */
.pjx-split .media img {
    border-radius: 18px; box-shadow: var(--pj-shadow);
    width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover;
}

}
}
.pjx-split .media .badge-float {
    position: absolute; bottom: -26px; left: -26px; background: var(--pj-crimson); color: #fff;
    padding: 1.4rem 1.7rem; border-radius: 16px; box-shadow: 0 18px 40px rgba(185,32,37,.35);
}
.pjx-split .media .badge-float b { font-family: 'Playfair Display', serif; font-size: 2rem; display: block; line-height: 1; }
.pjx-split .media .badge-float span { font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; opacity: .9; }
.pjx-lead { font-size: 1.15rem; color: var(--pj-ink); font-weight: 500; }

/* ---------- Category cards (pack-shot contain + footer) ---------- */
.pjx-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pjx-cat {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pj-line);
    border-radius: 18px; overflow: hidden; box-shadow: var(--pj-shadow);
    transition: transform .35s, box-shadow .35s;
}
.pjx-cat:hover { transform: translateY(-8px); box-shadow: 0 30px 60px rgba(23,24,28,.14); }
.pjx-cat-media {
    position: relative; aspect-ratio: 4 / 3; overflow: hidden;
    background: radial-gradient(circle at 50% 38%, #fff 0%, var(--pj-cream) 100%);
}
/* Durasi fade HARUS sama dengan konstanta FADE di slideshow (home/index.blade.php):
   gambar lama wajib hilang tuntas sebelum yang baru masuk, kalau bertumpuk dua
   pack-shot transparan saling tembus dan terlihat "ketumpuk". */
.pjx-cat-media img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 24px;
    opacity: 0; visibility: hidden; filter: drop-shadow(0 18px 28px rgba(23,24,28,.18));
    transition: opacity .4s ease, visibility 0s linear .4s;
}
/* visibility langsung dilepas saat masuk, baru disembunyikan lagi setelah fade selesai */
.pjx-cat-media img.active { opacity: 1; visibility: visible; transition: opacity .4s ease, visibility 0s; }
.pjx-cat-empty {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .7rem; color: #b6ada0;
}
.pjx-cat-empty i { font-size: 2.6rem; color: var(--pj-gold); opacity: .6; }
.pjx-cat-empty span { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; }
.pjx-cat-body { padding: 24px 28px 28px; display: flex; flex-direction: column; }
.pjx-cat-body h3 { color: var(--pj-ink); font-size: 1.5rem; margin-bottom: .5rem; }
.pjx-cat-body p { font-size: .92rem; color: var(--pj-body); margin: 0 0 1.2rem; min-height: 42px; }
.pjx-cat-link {
    display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .78rem;
    color: var(--pj-crimson); letter-spacing: 1px; text-transform: uppercase;
    padding-top: 16px; border-top: 1px solid var(--pj-line);
}
.pjx-cat-link i { transition: transform .25s; }
.pjx-cat:hover .pjx-cat-link i { transform: translateX(6px); }

/* ---------- Stats ---------- */
.pjx-stats {
    background: linear-gradient(120deg, var(--pj-ink) 0%, var(--pj-crimson-700) 130%); color: #fff; border-radius: 22px;
    padding: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; position: relative; overflow: hidden;
}
.pjx-stats::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; }
.pjx-stat { position: relative; z-index: 2; }
.pjx-stat b { font-family: 'Playfair Display', serif; font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 800; color: var(--pj-gold); display: block; line-height: 1; }
.pjx-stat span { display: block; margin-top: .7rem; font-size: .85rem; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.85); }
.pjx-stat + .pjx-stat { border-left: 1px solid rgba(255,255,255,.14); }

/* ---------- Brands (uniform grid) ---------- */
.pjx-brands { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pjx-brand-chip {
    display: flex; align-items: center; justify-content: center; text-align: center; min-height: 96px;
    padding: 1.2rem 1rem; border: 1px solid var(--pj-line); border-radius: 16px; background: #fff;
    font-family: 'Playfair Display', serif; font-weight: 700; color: var(--pj-ink); font-size: 1.08rem;
    letter-spacing: .2px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, color .3s;
}
.pjx-brand-chip::before {
    content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 3px;
    background: linear-gradient(var(--pj-crimson), var(--pj-gold)); transform: scaleY(0); transform-origin: top; transition: transform .3s ease;
}
.pjx-brand-chip:hover { transform: translateY(-5px); border-color: transparent; color: var(--pj-crimson); box-shadow: 0 18px 38px rgba(23,24,28,.12); }
.pjx-brand-chip:hover::before { transform: scaleY(1); }

/* ---------- Gallery (balanced 2×2, elegant) ---------- */
.pjx-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pjx-gallery a { border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 16 / 10; display: block; }
.pjx-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.pjx-gallery a::after {
    content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fff; font-size: 1.4rem;
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to top, rgba(15,15,18,.55), rgba(15,15,18,.05)); opacity: 0; transition: opacity .4s;
}
.pjx-gallery a:hover::after { opacity: 1; }
.pjx-gallery a:hover img { transform: scale(1.08); }

/* ---------- CTA band ---------- */
.pjx-cta {
    border-radius: 22px; padding: 70px; text-align: center; color: #fff; position: relative; overflow: hidden;
    background: linear-gradient(120deg, var(--pj-crimson), var(--pj-crimson-700));
}
.pjx-cta h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.8rem); }
.pjx-cta p { color: rgba(255,255,255,.9); max-width: 560px; margin: 1rem auto 2rem; }

/* ---------- Footer (luxury) ---------- */
.pjx-footer {
    position: relative; overflow: hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(185,32,37,.22) 0%, transparent 42%),
        linear-gradient(180deg, #1c1d22 0%, var(--pj-ink) 55%, #111216 100%);
    color: rgba(255,255,255,.68); padding: 60px 0 26px;
}
/* Garis aksen emas di atas footer */
.pjx-footer::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--pj-gold) 22%, var(--pj-crimson) 50%, var(--pj-gold) 78%, transparent);
    opacity: .85;
}
/* Tekstur titik halus */
.pjx-footer::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 24px 24px; mask-image: linear-gradient(180deg, #000, transparent 70%);
}
.pjx-footer-glow {
    position: absolute; bottom: -160px; left: 50%; transform: translateX(-50%);
    width: 620px; height: 320px; border-radius: 50%;
    background: radial-gradient(circle, rgba(201,162,75,.16) 0%, transparent 68%);
    pointer-events: none;
}
.pjx-footer .pjx-container { position: relative; z-index: 2; }
.pjx-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.3fr; gap: 40px; }
.pjx-footer h4 {
    color: #fff; font-family: 'Inter', sans-serif; font-size: .78rem; letter-spacing: 2.2px;
    text-transform: uppercase; margin-bottom: 1.05rem; position: relative; padding-bottom: .55rem;
}
.pjx-footer h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--pj-gold); }
.pjx-footer .fbrand img { height: 46px; margin-bottom: .9rem; }
.pjx-footer .fbrand p { font-size: .9rem; max-width: 380px; line-height: 1.7; }
.pjx-footer ul { list-style: none; padding: 0; margin: 0; }
.pjx-footer .flinks li { margin-bottom: .48rem; }
.pjx-footer .flinks a {
    display: inline-flex; align-items: center; gap: .55rem; font-size: .92rem; color: rgba(255,255,255,.66);
    position: relative; transition: color .22s, transform .22s;
}
.pjx-footer .flinks a::before {
    content: ""; width: 0; height: 1px; background: var(--pj-gold); transition: width .25s ease; opacity: .8;
}
.pjx-footer .flinks a:hover { color: #fff; transform: translateX(2px); }
.pjx-footer .flinks a:hover::before { width: 14px; }
.pjx-footer .fcontact li { display: flex; gap: .75rem; font-size: .9rem; margin-bottom: .7rem; line-height: 1.55; }
.pjx-footer .fcontact i { color: var(--pj-gold); margin-top: .25rem; flex-shrink: 0; }
.pjx-footer .fcontact a:hover { color: var(--pj-gold); }
.pjx-socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.pjx-socials a {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16);
    display: flex; align-items: center; justify-content: center; color: #fff;
    transition: all .28s cubic-bezier(.2,.7,.2,1); background: rgba(255,255,255,.02);
}
.pjx-socials a:hover {
    background: linear-gradient(135deg, var(--pj-crimson), var(--pj-crimson-700));
    border-color: transparent; transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(185,32,37,.4);
}
.pjx-footer-bottom {
    border-top: 1px solid rgba(255,255,255,.09); margin-top: 34px; padding-top: 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; font-size: .82rem;
}
.pjx-footer-bottom .fsign { color: rgba(255,255,255,.4); letter-spacing: .3px; }
.pjx-footer-bottom .fsign i { color: var(--pj-crimson); margin: 0 .15rem; }

/* ---------- Category card sebagai tombol ---------- */
button.pjx-cat { font: inherit; text-align: left; padding: 0; cursor: pointer; color: inherit; width: 100%; }
button.pjx-cat:disabled { cursor: default; opacity: .85; }
button.pjx-cat:disabled:hover { transform: none; box-shadow: var(--pj-shadow); }

/* ---------- Product Showcase — POPUP carousel · spin 360° (cinematic) ---------- */
.pjx-showcase {
    position: fixed; inset: 0; z-index: 4000; display: none; overflow: hidden;
    color: #fff; opacity: 0; transition: opacity .35s ease;
    align-items: center; justify-content: center; padding: 4vh 3vw;
}
.pjx-showcase.open { display: flex; opacity: 1; }
.pjx-showcase-backdrop {
    position: absolute; inset: 0; z-index: 0; background: rgba(10,11,14,.72);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}
/* Panel popup ter-container (bukan full screen) */
.pjx-showcase-panel {
    position: relative; z-index: 2; width: 100%; max-width: 1040px; max-height: 92vh; overflow: hidden;
    border-radius: 24px; border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 50px 120px rgba(0,0,0,.6);
    transform: translateY(26px) scale(.96); opacity: 0;
    animation: pjxPanelIn .5s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes pjxPanelIn { to { transform: translateY(0) scale(1); opacity: 1; } }
.pjx-showcase-panel::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 4;
    background: linear-gradient(90deg, var(--pj-crimson), var(--pj-gold));
}
/* Background bertema yang berganti warna tiap produk (di dalam panel) */
.pjx-showcase-bg {
    position: absolute; inset: 0; z-index: 0;
    background: radial-gradient(circle at 50% 34%, #1b3a63 0%, #0d1b2e 60%, #0b0c0f 100%);
    transition: background 1s cubic-bezier(.4,.1,.2,1);
}
.pjx-showcase-bg::after {
    content: ""; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px; mask-image: radial-gradient(circle at 50% 40%, #000, transparent 78%);
}
.pjx-showcase-inner {
    position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start; padding: 58px 40px 34px; gap: 10px;
    overflow-y: auto;
}
.pjx-showcase-head { margin-top: 4px; }
.pjx-showcase-close {
    position: absolute; top: 16px; right: 16px; z-index: 6; width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #fff; font-size: 1.15rem;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .25s;
    backdrop-filter: blur(4px);
}
.pjx-showcase-close:hover { background: var(--pj-crimson); border-color: var(--pj-crimson); transform: rotate(90deg); }
.pjx-showcase-head { text-align: center; }
.pjx-showcase-head .pjx-eyebrow { color: var(--pj-gold); }
.pjx-showcase-head .pjx-eyebrow::before { background: var(--pj-gold); }
.pjx-showcase-head h2 { color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); }

/* Chip filter per brand */
.pjx-stage-brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 6px; max-width: 92%; }
.pjx-chip {
    padding: .4rem 1rem; border-radius: 999px; cursor: pointer; font-size: .78rem; font-weight: 600;
    letter-spacing: .3px; color: rgba(255,255,255,.75); background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16); transition: all .22s;
}
.pjx-chip:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.pjx-chip.active { color: var(--pj-ink); background: var(--pj-gold); border-color: var(--pj-gold); font-weight: 700; }

/* Panggung utama + navigasi */
/* max-width + min-width:0 membuat panggung ikut menyusut di layar sempit.
   Tanpa min-width:0, flex item menolak mengecil di bawah lebar isinya —
   penyebab umum elemen menembus wadahnya di HP kecil. */
.pjx-stage {
    display: flex; align-items: center; gap: clamp(10px, 4vw, 40px); margin: 4px 0;
    max-width: 100%; min-width: 0;
}
.pjx-stage-nav {
    flex: 0 0 auto; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
    border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.05); color: #fff; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center; transition: all .25s; backdrop-filter: blur(4px);
}
.pjx-stage-nav:hover { background: #fff; color: var(--pj-ink); border-color: #fff; transform: scale(1.08); }
.pjx-stage-nav:active { transform: scale(.94); }

/* Viewport 3D untuk efek spin */
.pjx-stage-viewport {
    position: relative; width: clamp(200px, 38vw, 380px); height: clamp(210px, 36vh, 380px);
    /* min-width:0 mengizinkan panggung menyusut di bawah 200px pada HP kecil
       ketimbang mendorong tombol navigasi keluar panel. */
    min-width: 0;
    perspective: 1400px; touch-action: pan-y;
}
.pjx-flipper {
    position: absolute; inset: 0; transform-style: preserve-3d;
    transition: transform .72s cubic-bezier(.45,.05,.2,1);
    will-change: transform;
}
.pjx-face {
    position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
    display: flex; align-items: center; justify-content: center;
}
.pjx-face[data-face="1"] { transform: rotateY(180deg); }
/* Dipasang JS pada wajah yang membelakangi layar setelah flip selesai.
   Pengaman kedua di atas backface-visibility, yang bisa gagal saat <img>
   memakai filter drop-shadow → gambar lama "nyempil" di belakang (dobel). */
.pjx-face.is-back { visibility: hidden; }
.pjx-face img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,.55));
    /* backface juga dikunci di img agar sisi belakang tak tembus (anti "kecampur") */
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* Efek mengambang diletakkan di container (bukan pada img) agar tidak merusak backface */
.pjx-stage-viewport { animation: pjxFloat 6s ease-in-out infinite; }
@keyframes pjxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Progress autoplay (5 detik) — pause saat hover panel */
.pjx-auto { width: clamp(180px, 30vw, 300px); height: 3px; border-radius: 2px; overflow: hidden; margin: 8px 0 2px; background: rgba(255,255,255,.12); }
.pjx-auto span { display: block; height: 100%; width: 100%; background: var(--pj-gold); transform-origin: left; transform: scaleX(0); animation: pjxAuto 5s linear infinite; }
@keyframes pjxAuto { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pjx-showcase-panel:hover .pjx-auto span { animation-play-state: paused; }

/* Caption produk */
.pjx-stage-caption { text-align: center; min-height: 70px; }
.pjx-stage-caption .brand {
    display: block; font-size: .72rem; letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--pj-gold); font-weight: 700; margin-bottom: .35rem;
}
.pjx-stage-caption strong {
    display: block; font-family: 'Playfair Display', serif; font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    color: #fff; font-weight: 700; line-height: 1.2;
}
.pjx-stage-caption .counter { display: block; margin-top: .5rem; font-size: .82rem; color: rgba(255,255,255,.55); letter-spacing: 1px; }

/* Strip thumbnail */
/* Lebar diukur terhadap panel induk (100%), BUKAN terhadap layar (vw).
   Dengan vw, strip bisa lebih lebar daripada isi panel di resolusi tertentu
   lalu terpotong tepi panel. `fit-content` membuatnya menyempit & tetap di
   tengah saat thumbnail sedikit, dan `max-width:100%` menahannya tepat di
   dalam panel saat banyak — sisanya digulir. */
.pjx-stage-thumbs {
    display: flex; gap: 12px;
    width: fit-content; max-width: 100%; min-width: 0; margin-inline: auto;
    overflow-x: auto; overscroll-behavior-x: contain; padding: 6px 4px 10px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent;
}
.pjx-stage-thumbs::-webkit-scrollbar { height: 6px; }
.pjx-stage-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.pjx-thumb {
    flex: 0 0 auto; width: 62px; height: 62px; padding: 6px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1.5px solid transparent; transition: all .25s;
}
.pjx-thumb img { width: 100%; height: 100%; object-fit: contain; opacity: .7; transition: opacity .25s; }
.pjx-thumb:hover img { opacity: 1; }
.pjx-thumb.active { border-color: var(--pj-gold); background: rgba(201,162,75,.16); transform: translateY(-3px); }
.pjx-thumb.active img { opacity: 1; }

.pjx-showcase-foot { margin-top: 6px; }
.pjx-showcase-foot .pjx-btn-ghost:hover { color: var(--pj-ink); }

@media (max-width: 640px) {
    .pjx-showcase { padding: 0; }
    .pjx-showcase-panel { max-width: 100%; max-height: 100vh; height: 100dvh; border-radius: 0; }
    .pjx-showcase-inner { padding: 22px 18px 18px; gap: 4px; }
    .pjx-showcase-close { top: 12px; right: 12px; width: 40px; height: 40px; }
    .pjx-stage { gap: 6px; }
    .pjx-stage-nav { width: 42px; height: 42px; }
    .pjx-stage-thumbs { gap: 8px; }
    .pjx-thumb { width: 50px; height: 50px; }
    .pjx-showcase-foot { margin-top: 2px; }
}

/* ===================== INNER PAGES ===================== */

/* Page header (compact hero) */
.pjx-pagehead {
    margin-top: 0; padding: calc(var(--pj-nav-h) + 90px) 0 90px; position: relative; overflow: hidden;
    background: var(--pj-ink); color: #fff; text-align: center;
}
.pjx-pagehead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; z-index: 0; }
.pjx-pagehead::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(23,24,28,.75), rgba(134,21,25,.55)); z-index: 1; }
.pjx-pagehead-body { position: relative; z-index: 2; }
.pjx-pagehead h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 800; }
.pjx-pagehead p { color: rgba(255,255,255,.85); max-width: 560px; margin: 1rem auto 0; }
.pjx-crumb { font-size: .8rem; letter-spacing: 1px; text-transform: uppercase; color: var(--pj-gold); margin-bottom: 1rem; }

/* Prose / article */
.pjx-prose { font-size: 1.02rem; color: var(--pj-body); }
.pjx-prose h1, .pjx-prose h2, .pjx-prose h3 { margin: 1.6rem 0 .8rem; }
.pjx-prose p { margin: 0 0 1.1rem; }
.pjx-prose img { border-radius: 14px; margin: 1.2rem 0; }
.pjx-prose ul, .pjx-prose ol { margin: 0 0 1.1rem 1.2rem; }

/* Value cards (vision / mission) */
.pjx-values { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.pjx-value {
    background: #fff; border: 1px solid var(--pj-line); border-radius: 18px; padding: 40px; box-shadow: var(--pj-shadow);
}
.pjx-value .ic { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--pj-crimson), var(--pj-crimson-700)); color: #fff; font-size: 1.3rem; margin-bottom: 1.2rem; }
.pjx-value h3 { font-size: 1.5rem; margin-bottom: .6rem; }

/* Timeline (history) */
.pjx-timeline { position: relative; padding-left: 34px; }
.pjx-timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--pj-line); }
.pjx-tl-item { position: relative; padding-bottom: 40px; }
.pjx-tl-item::before { content: ""; position: absolute; left: -34px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--pj-crimson); border: 4px solid #fff; box-shadow: 0 0 0 2px var(--pj-crimson); }
.pjx-tl-year { font-family: 'Playfair Display', serif; font-weight: 800; color: var(--pj-crimson); font-size: 1.2rem; }

/* ---------- Milestones (alternating timeline with images) ---------- */
/* ---------- Band gambar full-width (pemecah bidang putih antar section) ---------- */
.pjx-band {
    position: relative; overflow: hidden; background: var(--pj-ink);
    padding: clamp(88px, 13vw, 148px) 0;
}
.pjx-band img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    /* zoom pelan biar tidak terasa gambar diam */
    animation: pjxHeadZoom 14s ease-out forwards;
}
.pjx-band::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(15,15,18,.78) 0%, rgba(15,15,18,.62) 50%, rgba(15,15,18,.82) 100%);
}
.pjx-band-body { position: relative; z-index: 2; text-align: center; max-width: 780px; }
.pjx-band-body h2 {
    color: #fff; font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin: .4rem 0 1rem;
}
.pjx-band-body p { color: rgba(255,255,255,.82); font-size: 1.02rem; margin: 0; }
.pjx-band-body .pjx-eyebrow { color: var(--pj-gold); }
.pjx-band-body .pjx-eyebrow::before { background: var(--pj-gold); }

/* ---------- Timeline: rel tahun + satu panel ----------
   Tinggi section tetap berapa pun jumlah tahunnya — tahun baru hanya menambah
   satu chip di rel yang bisa digeser, bukan satu kartu baru ke bawah. */
.pjx-tlx { max-width: 940px; margin: 0 auto; }
.pjx-tlx-rail { display: flex; align-items: stretch; gap: 8px; margin-bottom: 34px; }
.pjx-tlx-nav {
    flex: 0 0 auto; align-self: center; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--pj-line); background: #fff; color: var(--pj-ink); cursor: pointer;
    box-shadow: 0 1px 2px rgba(23, 24, 28, .06), 0 4px 10px rgba(23, 24, 28, .05);
    display: flex; align-items: center; justify-content: center; font-size: .8rem;
    transition: background .2s, color .2s, border-color .2s, opacity .2s;
}
.pjx-tlx-nav:hover:not(:disabled) { background: var(--pj-crimson); border-color: transparent; color: #fff; }
.pjx-tlx-nav:disabled { opacity: .3; cursor: default; }
/* border-bottom dipasang di kontainer scroll → garisnya diam, tidak ikut tergeser */
.pjx-tlx-track {
    flex: 1 1 auto; display: flex; gap: 2px; overflow-x: auto; scroll-behavior: smooth;
    border-bottom: 2px solid var(--pj-line); scrollbar-width: none; -ms-overflow-style: none;
}
.pjx-tlx-track::-webkit-scrollbar { display: none; }
.pjx-tlx-year {
    flex: 0 0 auto; padding: .6rem 1.15rem; margin-bottom: -2px; background: none; border: 0;
    border-bottom: 3px solid transparent; cursor: pointer;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: .95rem; letter-spacing: .5px;
    color: var(--pj-body); transition: color .25s, border-color .25s;
}
.pjx-tlx-year:hover { color: var(--pj-ink); border-bottom-color: var(--pj-line); }
.pjx-tlx-year.active { color: var(--pj-crimson); border-bottom-color: var(--pj-crimson); }

.pjx-tlx-panels { min-height: 260px; }
.pjx-tlx-panel[hidden] { display: none; }
.pjx-tlx-panel { animation: pjxFadeUp .45s cubic-bezier(.2,.7,.2,1) both; }

@media (max-width: 640px) {
    .pjx-tlx-year { padding: .55rem .85rem; font-size: .88rem; }
    .pjx-tlx-panels { min-height: 0; }
}

.pjx-ms-card {
    background: #fff; border: 1px solid var(--pj-line); border-radius: 18px; overflow: hidden;
    box-shadow: var(--pj-shadow); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.pjx-ms-card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px rgba(23,24,28,.14); }
.pjx-ms-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--pj-cream); }
.pjx-ms-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.pjx-ms-card:hover .pjx-ms-img img { transform: scale(1.07); }
.pjx-ms-body { padding: 24px 28px 28px; }
.pjx-ms-year {
    display: inline-flex; align-items: center; gap: .5rem; font-family: 'Playfair Display', serif;
    font-weight: 800; font-size: 1.5rem; color: var(--pj-crimson); margin-bottom: .5rem;
}
.pjx-ms-year::before { content: ""; width: 22px; height: 2px; background: var(--pj-gold); }
.pjx-ms-body h3 { font-size: 1.35rem; margin-bottom: .55rem; }
.pjx-ms-body .pjx-prose { font-size: .95rem; }

/* Tabs (product categories) */
.pjx-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 50px; }
.pjx-tab {
    padding: .7rem 1.5rem; border-radius: 999px; border: 1px solid var(--pj-line); background: #fff;
    font-weight: 600; font-size: .9rem; color: var(--pj-body); transition: all .2s;
    /* Bayangan tipis — ini kontrol, bukan kartu; jangan seberat --pj-shadow */
    box-shadow: 0 1px 2px rgba(23, 24, 28, .06), 0 4px 10px rgba(23, 24, 28, .05);
}
.pjx-tab:hover { border-color: var(--pj-crimson); color: var(--pj-crimson); }
.pjx-tab.active { background: linear-gradient(120deg, var(--pj-crimson), var(--pj-crimson-700)); color: #fff; border-color: transparent; box-shadow: 0 10px 22px rgba(185,32,37,.28); }

/* Brand group (pecahan produk per brand) */
.pjx-brand-group { margin-bottom: 70px; }
.pjx-brand-group-head { display: flex; align-items: center; gap: 22px; margin-bottom: 34px; }
.pjx-brand-group-head h2 {
    font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; white-space: nowrap;
}
.pjx-brand-group-head .count { font-size: .78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--pj-crimson); font-weight: 700; }
.pjx-brand-group-head .rule { flex: 1; height: 1px; background: var(--pj-line); }
.pjx-group-showcase { padding: .55rem 1.1rem; font-size: .78rem; white-space: nowrap; }
.pjx-group-showcase i { font-size: .85em; }

/* Brand filter dropdown */
.pjx-brand-filter { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 50px; flex-wrap: wrap; }
.pjx-brand-filter label { font-weight: 600; color: var(--pj-ink); font-size: .95rem; }
.pjx-select {
    position: relative; display: inline-block;
}
.pjx-select select {
    appearance: none; -webkit-appearance: none; background: #fff; border: 1.5px solid var(--pj-line);
    border-radius: 999px; padding: .8rem 3rem .8rem 1.5rem; font-size: .95rem; font-weight: 600; color: var(--pj-ink);
    cursor: pointer; min-width: 240px; transition: border-color .2s, box-shadow .2s;
}
.pjx-select select:focus { outline: none; border-color: var(--pj-crimson); box-shadow: 0 0 0 3px rgba(185,32,37,.12); }
.pjx-select::after {
    content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .8rem; color: var(--pj-crimson);
    position: absolute; right: 1.3rem; top: 50%; transform: translateY(-50%); pointer-events: none;
}

/* Product grid — show all (Manchester-style cards) */
.pjx-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pjx-brand-group[hidden] { display: none; }

.pjx-product-card {
    position: relative; text-align: center;
    background: #fff; border: 1px solid var(--pj-line); border-radius: 18px; overflow: hidden;
    /* Satu-satunya kartu yang tadinya tanpa bayangan saat diam — hanya
       mengandalkan garis tepi 1px, sehingga terlihat rata dengan latar. */
    box-shadow: var(--pj-shadow);
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s, border-color .45s;
}
.pjx-product-card::after {
    content: ""; position: absolute; inset: 0; border-radius: 18px; pointer-events: none;
    box-shadow: inset 0 0 0 0 var(--pj-gold); transition: box-shadow .45s;
}
.pjx-product-card:hover { transform: translateY(-10px); box-shadow: var(--pj-shadow-lift); border-color: transparent; }
.pjx-product-card:hover::after { box-shadow: inset 0 0 0 2px var(--pj-gold); }

/* Pack-shot on clean background (contain, centered) */
.pjx-product-img {
    position: relative; aspect-ratio: 1/1; overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #fff 0%, var(--pj-cream) 100%);
    display: flex; align-items: center; justify-content: center; padding: 22px;
}
.pjx-product-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .7s cubic-bezier(.2,.7,.2,1); filter: drop-shadow(0 14px 24px rgba(23,24,28,.14)); }
.pjx-product-card:hover .pjx-product-img img { transform: scale(1.07) translateY(-4px); }
/* shine sweep */
.pjx-product-img::before {
    content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; z-index: 3;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg);
    transition: left .8s ease;
}
.pjx-product-card:hover .pjx-product-img::before { left: 130%; }
/* overlay quick-view */
.pjx-product-overlay {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(to top, rgba(15,15,18,.35), rgba(15,15,18,0)); opacity: 0; transition: opacity .35s;
}
.pjx-product-card:hover .pjx-product-overlay { opacity: 1; }
.pjx-product-view {
    padding: .65rem 1.2rem; border-radius: 999px; background: rgba(255,255,255,.96); color: var(--pj-ink);
    font-weight: 600; font-size: .8rem; transform: translateY(12px); transition: transform .35s, background .2s;
    display: inline-flex; align-items: center; gap: .5rem; box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.pjx-product-card:hover .pjx-product-view { transform: translateY(0); }
.pjx-product-view:hover { background: var(--pj-gold); color: #fff; }

.pjx-product-body { padding: 22px 20px 26px; }
/* decorative underline graphic (Manchester "line under products") */
.pjx-product-body .rule { width: 42px; height: 2px; background: var(--pj-gold); margin: 0 auto 14px; transition: width .4s ease; }
.pjx-product-card:hover .pjx-product-body .rule { width: 72px; }
.pjx-product-body .brand { display: block; font-size: .68rem; letter-spacing: 1.4px; text-transform: uppercase; color: var(--pj-crimson); font-weight: 700; margin-bottom: .35rem; }
.pjx-product-body h3 {
    font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600; color: var(--pj-ink);
    letter-spacing: 1px; text-transform: uppercase; line-height: 1.4;
}

/* Lightbox */
.pjx-lightbox {
    position: fixed; inset: 0; z-index: 3000; background: rgba(15,15,18,.92); display: none;
    align-items: center; justify-content: center; padding: 40px; opacity: 0; transition: opacity .3s;
}
.pjx-lightbox.open { display: flex; opacity: 1; }
.pjx-lightbox img { max-width: 92%; max-height: 88vh; border-radius: 12px; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: pjxZoom .35s ease; }
@keyframes pjxZoom { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pjx-lightbox-close { position: absolute; top: 26px; right: 34px; color: #fff; font-size: 2rem; cursor: pointer; opacity: .8; }
.pjx-lightbox-close:hover { opacity: 1; }

/* Career grid */
.pjx-careers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pjx-career-card {
    background: #fff; border: 1px solid var(--pj-line); border-radius: 18px; overflow: hidden;
    display: flex; flex-direction: column; transition: all .25s;
    /* Sama seperti kartu produk: tadinya bayangan baru muncul saat hover,
       sehingga saat diam terlihat rata dengan latar. */
    box-shadow: var(--pj-shadow);
}
.pjx-career-card:hover { transform: translateY(-6px); box-shadow: var(--pj-shadow-lift); }
.pjx-career-card .img { height: 200px; overflow: hidden; background: var(--pj-cream); }
.pjx-career-card .img img { width: 100%; height: 100%; object-fit: cover; }
.pjx-career-card .body { padding: 26px; flex: 1; }
.pjx-career-card .body h3 { font-size: 1.3rem; margin-bottom: .7rem; }
.pjx-career-card .content { font-size: .93rem; color: var(--pj-body); }

/* Achievement grid */
.pjx-ach-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.pjx-ach-card {
    position: relative; background: #fff; border: 1px solid var(--pj-line); border-radius: 18px; overflow: hidden;
    transition: transform .35s, box-shadow .35s; display: flex; flex-direction: column;
}
.pjx-ach-card:hover { transform: translateY(-8px); box-shadow: var(--pj-shadow); }
.pjx-ach-img { height: 200px; overflow: hidden; background: var(--pj-cream); position: relative; }
.pjx-ach-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pjx-ach-card:hover .pjx-ach-img img { transform: scale(1.08); }
.pjx-ach-noimg { height: 120px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--pj-cream), var(--pj-cream-2)); }
.pjx-ach-noimg i { font-size: 2.4rem; color: var(--pj-gold); }
.pjx-ach-year {
    position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--pj-crimson); color: #fff;
    padding: .35rem .85rem; border-radius: 999px; font-weight: 700; font-size: .8rem; box-shadow: 0 6px 16px rgba(185,32,37,.35);
}
.pjx-ach-body { padding: 26px; flex: 1; }
.pjx-ach-body h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.pjx-ach-body p { font-size: .93rem; color: var(--pj-body); margin: 0; }

/* Stories grid (editorial) */
.pjx-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.pjx-story-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid var(--pj-line); transition: transform .35s, box-shadow .35s; display: flex; flex-direction: column; }
.pjx-story-card:hover { transform: translateY(-8px); box-shadow: var(--pj-shadow); }
.pjx-story-cover { height: 220px; overflow: hidden; background: var(--pj-cream); }
.pjx-story-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pjx-story-card:hover .pjx-story-cover img { transform: scale(1.07); }
.pjx-story-body { padding: 26px; flex: 1; display: flex; flex-direction: column; }
.pjx-story-date { font-size: .74rem; letter-spacing: 1px; text-transform: uppercase; color: var(--pj-crimson); font-weight: 700; margin-bottom: .6rem; }
.pjx-story-body h3 { font-size: 1.35rem; line-height: 1.25; margin-bottom: .7rem; }
.pjx-story-body p { font-size: .93rem; color: var(--pj-body); flex: 1; }
.pjx-story-more { margin-top: 1rem; font-weight: 600; font-size: .85rem; color: var(--pj-crimson); display: inline-flex; align-items: center; gap: .4rem; }
.pjx-story-card:hover .pjx-story-more i { transform: translateX(5px); }
.pjx-story-more i { transition: transform .25s; }
.pjx-article-body { max-width: 800px; margin: 0 auto; }

/* Empty state */
.pjx-empty { text-align: center; padding: 80px 20px; color: #9a9488; }
.pjx-empty i { font-size: 2.4rem; color: var(--pj-line); margin-bottom: 1rem; }

@media (max-width: 991px) {
    .pjx-values { grid-template-columns: 1fr; }
    .pjx-products { grid-template-columns: repeat(3, 1fr); }
    /* Grid kartu Media, Karier, Pencapaian: 3 kolom terlalu sempit di tablet */
    .pjx-story-grid, .pjx-careers, .pjx-ach-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 640px) {
    .pjx-products { grid-template-columns: repeat(2, 1fr); }
    .pjx-story-grid, .pjx-careers, .pjx-ach-grid { grid-template-columns: 1fr; gap: 20px; }
    .pjx-story-cover, .pjx-career-card .img, .pjx-ach-img { height: auto; aspect-ratio: 16 / 9; }
    .pjx-story-body, .pjx-career-card .body, .pjx-ach-body { padding: 20px; }
    .pjx-story-body h3 { font-size: 1.2rem; }
    .pjx-cats { grid-template-columns: 1fr; }
    .pjx-brands { grid-template-columns: repeat(2, 1fr); }
    .pjx-gallery { grid-template-columns: 1fr; }
    .pjx-brand-group-head { flex-wrap: wrap; gap: 12px; }
    .pjx-brand-group-head .rule { display: none; }
    .pjx-brand-group-head .count { order: 3; }
    .pjx-carousel-nav { margin-left: auto; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

/* ---------- Selection ---------- */
.pjx ::selection { background: var(--pj-crimson); color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .pjx-split { grid-template-columns: 1fr; gap: 60px; }
    .pjx-split .media img { aspect-ratio: 16 / 10; }
    .pjx-cats { grid-template-columns: repeat(2, 1fr); }
    .pjx-brands { grid-template-columns: repeat(3, 1fr); }
    .pjx-footer-grid { grid-template-columns: 1fr 1fr 1fr; }
    .pjx-footer .fbrand { grid-column: 1 / -1; }
    .pjx-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .pjx-nav-toggle { display: block; }
    /* Overlay melayang menutupi layar (fade + scale) */
    .pjx-menu {
        position: fixed; inset: 0; z-index: 998; width: 100%; max-width: none; height: 100vh;
        background: linear-gradient(150deg, rgba(23,24,28,.98) 0%, rgba(90,15,17,.97) 130%);
        backdrop-filter: blur(6px);
        /* Item mulai tepat di bawah baris logo/hamburger (bukan dipusatkan
           vertikal) — sebelumnya ada ruang kosong besar di atas menu. */
        flex-direction: column; align-items: center; gap: 0;
        padding: calc(var(--pj-nav-h) + 12px) 24px 56px;
        justify-content: flex-start;
        opacity: 0; visibility: hidden; transform: scale(1.06);
        overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
        transition: opacity .4s ease, transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s;
    }
    .pjx-menu.open { opacity: 1; visibility: visible; transform: scale(1); }
    .pjx-menu > li {
        width: 100%; max-width: 380px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.08);
        opacity: 0; transform: translateY(18px);
    }
    .pjx-menu.open > li { animation: pjxMenuItem .5s cubic-bezier(.2,.7,.2,1) forwards; }
    .pjx-menu.open > li:nth-child(1) { animation-delay: .12s; }
    .pjx-menu.open > li:nth-child(2) { animation-delay: .18s; }
    .pjx-menu.open > li:nth-child(3) { animation-delay: .24s; }
    .pjx-menu.open > li:nth-child(4) { animation-delay: .30s; }
    .pjx-menu.open > li:nth-child(5) { animation-delay: .36s; }
    .pjx-menu.open > li:nth-child(6) { animation-delay: .42s; }
    .pjx-menu.open > li:nth-child(7) { animation-delay: .48s; }
    .pjx-menu.open > li:nth-child(8) { animation-delay: .54s; }
    @keyframes pjxMenuItem { to { opacity: 1; transform: none; } }
    .pjx-menu > li > a {
        color: #fff; width: 100%; justify-content: center; padding: 1.15rem 0;
        font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700;
    }
    /* Overlay selalu gelap → paksa teks & hamburger putih walau nav sedang .scrolled */
    .pjx-nav.scrolled .pjx-menu > li > a,
    .pjx-nav.menu-open .pjx-menu > li > a { color: #fff; }
    .pjx-nav.menu-open.scrolled .pjx-brand span { color: #fff; }
    .pjx-nav.menu-open.scrolled .pjx-nav-toggle span { background: #fff; }
    .pjx-menu > li > a::after { display: none; }            /* hilangkan underline yang bikin geser */
    /* Chevron jadi penanda akordeon: berputar saat sub-menu dibuka */
    .pjx-menu > li > a .fa-chevron-down { transition: transform .3s ease; opacity: .7; }
    .pjx-menu > li.sub-open > a .fa-chevron-down { transform: rotate(180deg); opacity: 1; }
    .pjx-menu > li.sub-open > a { color: var(--pj-gold); }
    /* Sub-menu: akordeon — tertutup dulu, terbuka saat judulnya diketuk (lihat JS
       di layout). Berlaku untuk SEMUA dropdown, jadi menu baru otomatis ikut. */
    .pjx-dropdown-menu {
        position: static; transform: none; opacity: 0; visibility: hidden; background: transparent;
        box-shadow: none; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 2px;
        max-height: 0; overflow: hidden;
        transition: max-height .35s ease, opacity .25s ease, padding .35s ease, visibility .35s;
    }
    .pjx-menu > li.sub-open > .pjx-dropdown-menu {
        opacity: 1; visibility: visible; max-height: 480px; padding: 0 0 .8rem;
    }
    .pjx-dropdown-menu li a { color: rgba(255,255,255,.6); text-align: center; padding: .5rem 0; font-size: .92rem; }
    .pjx-dropdown-menu li a:hover { background: transparent; color: var(--pj-gold); }
    .pjx-section { padding: 72px 0; }
    .pjx-stats, .pjx-cta { padding: 44px 26px; }
    .pjx-stats { grid-template-columns: 1fr; }
    .pjx-stat + .pjx-stat { border-left: 0; border-top: 1px solid rgba(255,255,255,.14); padding-top: 30px; }
    .pjx-footer-grid { grid-template-columns: 1fr; gap: 26px; }
    .pjx-gallery { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   LUXURY MOTION LAYER — entrance, scroll-reveal, hover polish
   ============================================================ */
html { scroll-behavior: smooth; }

@keyframes pjxFadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes pjxHeadZoom { from { transform: scale(1.18); } to { transform: scale(1.02); } }
@keyframes pjxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pjxLineIn { from { width: 0; opacity: 0; } to { opacity: 1; } }
.pjx-pagehead p { animation: pjxFadeUp 1s cubic-bezier(.2,.7,.2,1) .42s both; }

/* Smoother, more pronounced scroll reveal */
.reveal {
    opacity: 0; transform: translateY(60px) scale(.97);
    transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Product cards: staggered entrance every time a brand is shown */
.pjx-brand-group:not([hidden]) .pjx-product-card { animation: pjxFadeUp .6s cubic-bezier(.2,.7,.2,1) both; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(1) { animation-delay: .04s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(2) { animation-delay: .10s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(3) { animation-delay: .16s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(4) { animation-delay: .22s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(5) { animation-delay: .28s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(6) { animation-delay: .34s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(7) { animation-delay: .40s; }
.pjx-brand-group:not([hidden]) .pjx-product-card:nth-child(8) { animation-delay: .46s; }
.pjx-brand-group:not([hidden]) .pjx-brand-group-head { animation: pjxFadeIn .6s ease both; }

/* Hover polish — value cards (visi/misi) */
.pjx-value { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.pjx-value:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(23,24,28,.12); }
.pjx-value .ic { transition: transform .4s; }
.pjx-value:hover .ic { transform: rotate(-6deg) scale(1.06); }

/* Animated accent under section heads */
.pjx-section-head.center h2 { position: relative; display: inline-block; padding-bottom: 18px; }
.pjx-section-head.center h2::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 54px; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--pj-crimson), var(--pj-gold)); transform: translateX(-50%);
}

/* About split image reveal (elegant clip) */
.pjx-split .media img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.pjx-split .media:hover img { transform: scale(1.03); }

/* Timeline dot pulse on reveal */
.pjx-tl-item.in::before { animation: pjxFadeIn .6s ease both; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
}

/* ============ ABOUT PAGE — extra polish ============ */
.pjx-split .media.framed { position: relative; }
.pjx-split .media.framed::before {
    content: ""; position: absolute; inset: 22px -22px -22px 22px; border: 2px solid var(--pj-gold);
    border-radius: 20px; z-index: 0; pointer-events: none;
}
.pjx-split .media.framed img { position: relative; z-index: 1; }
.pjx-split .media.framed .badge-float { z-index: 2; }

.pjx-about-stats { display: flex; gap: 34px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--pj-line); flex-wrap: wrap; }
.pjx-about-stats > div b { display: block; font-family: 'Playfair Display', serif; font-weight: 800; font-size: 2rem; color: var(--pj-crimson); line-height: 1; }
.pjx-about-stats > div span { font-size: .74rem; letter-spacing: .6px; text-transform: uppercase; color: var(--pj-body); }

/* Vision/Mission cards: top accent bar + bigger icon */
.pjx-value { position: relative; overflow: hidden; }
.pjx-value::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--pj-crimson), var(--pj-gold)); }
.pjx-value .ic { width: 62px; height: 62px; font-size: 1.5rem; }

@media (max-width: 768px) {
    .pjx-split .media.framed::before { inset: 14px -10px -14px 14px; }
    .pjx-about-stats { gap: 24px; }
}

/* =====================================================================
   COOKIE CONSENT — banner + panel preferensi
   ===================================================================== */

.pjx-cc[hidden],
.pjx-cc-modal[hidden] { display: none !important; }

/* ---------- Banner ---------- */
.pjx-cc {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
    background: var(--pj-white);
    border-top: 3px solid var(--pj-crimson);
    box-shadow: 0 -18px 50px rgba(23, 24, 28, .13);
    animation: pjxCcUp .45s cubic-bezier(.22, .9, .3, 1) both;
}

@keyframes pjxCcUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .pjx-cc { animation: none; }
}

.pjx-cc-inner {
    max-width: 1180px; margin: 0 auto; padding: 1.15rem 1.5rem;
    display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
}

.pjx-cc-copy { flex: 1 1 340px; min-width: 0; }

.pjx-cc-copy h2 {
    font-family: 'Playfair Display', serif; font-size: 1.12rem; font-weight: 700;
    color: var(--pj-ink); margin: 0 0 .3rem;
}

.pjx-cc-copy p {
    margin: 0; font-size: .875rem; line-height: 1.65; color: var(--pj-body);
}

.pjx-cc-copy a {
    color: var(--pj-crimson); font-weight: 600; text-decoration: underline;
    text-underline-offset: 2px; white-space: nowrap;
}

.pjx-cc-actions { display: flex; gap: .6rem; flex-wrap: wrap; flex-shrink: 0; }

/* ---------- Tombol ---------- */
.pjx-cc-btn {
    font-family: 'Inter', sans-serif; font-size: .82rem; font-weight: 600;
    letter-spacing: .2px; padding: .68rem 1.35rem; border-radius: 3px;
    cursor: pointer; transition: background .2s, color .2s, border-color .2s;
    white-space: nowrap;
}

.pjx-cc-btn.solid {
    background: var(--pj-crimson); color: #fff; border: 1px solid var(--pj-crimson);
}
.pjx-cc-btn.solid:hover { background: var(--pj-crimson-700); border-color: var(--pj-crimson-700); }

.pjx-cc-btn.ghost {
    background: transparent; color: var(--pj-body); border: 1px solid var(--pj-line);
}
.pjx-cc-btn.ghost:hover { border-color: var(--pj-ink); color: var(--pj-ink); }

.pjx-cc-btn:focus-visible,
.pjx-cc-x:focus-visible { outline: 2px solid var(--pj-gold); outline-offset: 2px; }

/* ---------- Panel preferensi ---------- */
.pjx-cc-modal {
    position: fixed; inset: 0; z-index: 9100;
    display: flex; align-items: center; justify-content: center; padding: 1.25rem;
}

.pjx-cc-backdrop {
    position: absolute; inset: 0; background: rgba(23, 24, 28, .55);
    backdrop-filter: blur(2px);
}

.pjx-cc-panel {
    position: relative; width: 100%; max-width: 560px;
    max-height: 86vh; display: flex; flex-direction: column;
    background: var(--pj-white); border-radius: 5px; box-shadow: var(--pj-shadow);
    animation: pjxCcIn .3s ease both;
}

@keyframes pjxCcIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .pjx-cc-panel { animation: none; }
}

.pjx-cc-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--pj-line);
}

.pjx-cc-panel-head h2 {
    font-family: 'Playfair Display', serif; font-size: 1.2rem; font-weight: 700;
    color: var(--pj-ink); margin: 0;
}

.pjx-cc-x {
    background: none; border: 0; cursor: pointer; color: var(--pj-body);
    font-size: 1.15rem; line-height: 1; padding: .3rem; border-radius: 3px;
}
.pjx-cc-x:hover { color: var(--pj-crimson); }

.pjx-cc-panel-body { padding: 1.35rem 1.5rem; overflow-y: auto; }

.pjx-cc-intro { font-size: .855rem; color: var(--pj-body); margin: 0 0 1.35rem; line-height: 1.65; }

.pjx-cc-item { padding: 1.05rem 0; border-top: 1px solid var(--pj-line); }
.pjx-cc-item:first-of-type { border-top: 0; padding-top: 0; }

.pjx-cc-item-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    margin-bottom: .4rem;
}

.pjx-cc-item-head h3 {
    font-family: 'Inter', sans-serif; font-size: .95rem; font-weight: 600;
    color: var(--pj-ink); margin: 0;
}

.pjx-cc-item p { margin: 0; font-size: .82rem; line-height: 1.65; color: var(--pj-body); }

.pjx-cc-locked {
    font-size: .68rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--pj-gold); background: var(--pj-cream-2);
    padding: .32rem .7rem; border-radius: 2px; white-space: nowrap;
}

/* ---------- Sakelar ---------- */
.pjx-cc-switch { position: relative; display: inline-block; width: 46px; height: 25px; flex-shrink: 0; }
.pjx-cc-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }

.pjx-cc-slider {
    position: absolute; inset: 0; border-radius: 25px; background: #cfcabf;
    transition: background .22s; pointer-events: none;
}

.pjx-cc-slider::before {
    content: ""; position: absolute; width: 19px; height: 19px; left: 3px; top: 3px;
    background: #fff; border-radius: 50%; transition: transform .22s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.pjx-cc-switch input:checked + .pjx-cc-slider { background: var(--pj-crimson); }
.pjx-cc-switch input:checked + .pjx-cc-slider::before { transform: translateX(21px); }
.pjx-cc-switch input:focus-visible + .pjx-cc-slider { outline: 2px solid var(--pj-gold); outline-offset: 2px; }

.pjx-cc-panel-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.5rem; border-top: 1px solid var(--pj-line); background: var(--pj-cream);
    border-radius: 0 0 5px 5px;
}

.pjx-cc-policy { font-size: .82rem; color: var(--pj-body); text-decoration: underline; text-underline-offset: 2px; }
.pjx-cc-policy:hover { color: var(--pj-crimson); }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .pjx-cc-inner { padding: 1.05rem 1.15rem; gap: 1rem; }
    .pjx-cc-actions { width: 100%; }
    .pjx-cc-actions .pjx-cc-btn { flex: 1 1 auto; text-align: center; }
    .pjx-cc-copy a { white-space: normal; }
}

/* =====================================================================
   HALAMAN KEBIJAKAN COOKIE
   ===================================================================== */

.pjx-legal { max-width: 820px; margin: 0 auto; }
.pjx-legal h2 {
    font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 700;
    color: var(--pj-ink); margin: 2.4rem 0 .7rem;
}
.pjx-legal h2:first-child { margin-top: 0; }
.pjx-legal p { font-size: .93rem; line-height: 1.85; color: var(--pj-body); margin: 0 0 1rem; }
.pjx-legal .pjx-legal-meta { font-size: .8rem; color: #8b8578; margin-bottom: 2rem; }

.pjx-legal-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.6rem; }
.pjx-legal-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .85rem; }
.pjx-legal-table th, .pjx-legal-table td {
    text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--pj-line); vertical-align: top;
}
.pjx-legal-table th {
    font-weight: 700; color: var(--pj-ink); background: var(--pj-cream-2);
    font-size: .74rem; letter-spacing: .8px; text-transform: uppercase;
}
.pjx-legal-table td code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem;
    color: var(--pj-crimson); background: var(--pj-cream); padding: .12rem .38rem; border-radius: 2px;
}
.pjx-legal-tag {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .8px;
    text-transform: uppercase; padding: .25rem .55rem; border-radius: 2px; white-space: nowrap;
}
.pjx-legal-tag.req { background: var(--pj-cream-2); color: var(--pj-gold); }
.pjx-legal-tag.ana { background: #f6e7e7; color: var(--pj-crimson); }

/* ---------- Tautan legal di footer (footer bertema gelap) ---------- */
.pjx-footer-legal { display: inline-flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; }
.pjx-footer-legal a,
.pjx-footer-legal button {
    font-family: 'Inter', sans-serif; font-size: .82rem; color: rgba(255, 255, 255, .55);
    background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none;
    transition: color .2s;
}
.pjx-footer-legal a:hover,
.pjx-footer-legal button:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pjx-footer-legal a:focus-visible,
.pjx-footer-legal button:focus-visible { outline: 2px solid var(--pj-gold); outline-offset: 3px; }

/* =====================================================================
   PUSAT INFORMASI MEDIA
   ===================================================================== */

/* ---------- Tab kategori (melengkapi .pjx-tab yang sudah ada) ---------- */
.pjx-tab span {
    display: inline-block; margin-left: .45rem; padding: .05rem .45rem;
    border-radius: 20px; background: rgba(23, 24, 28, .07);
    font-size: .72rem; font-weight: 700; line-height: 1.6;
}
.pjx-tab.active span { background: rgba(255, 255, 255, .22); color: #fff; }

.pjx-tab.is-empty { opacity: .42; pointer-events: none; cursor: default; }

/* Di HP tab kategori tetap tampil SEMUA (bertingkat, rata tengah) — pilihan
   yang terpotong di slider sering tidak disadari. Pil dikecilkan supaya
   5 tab cukup 2 baris, dan jarak ke kartu dirapatkan. */
@media (max-width: 640px) {
    .pjx-tabs { gap: 8px; margin-bottom: 32px; }
    .pjx-tab { padding: .55rem 1rem; font-size: .84rem; white-space: nowrap; }
}

/* ---------- Penanda jenis isi pada kartu ---------- */
.pjx-story-cover { position: relative; }

.pjx-story-flag {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: .38rem;
    padding: .34rem .68rem; border-radius: 30px;
    background: rgba(23, 24, 28, .72); backdrop-filter: blur(3px);
    color: #fff; font-size: .74rem; font-weight: 700; letter-spacing: .3px;
}

/* ---------- Meta kartu: kategori + tanggal ---------- */
.pjx-story-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; margin-bottom: .4rem; }

.pjx-story-cat {
    display: inline-block; padding: .2rem .6rem; border-radius: 2px;
    background: var(--pj-cream-2); color: var(--pj-crimson);
    font-size: .67rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}

/* ---------- Halaman detail ---------- */
.pjx-article { max-width: 860px; margin: 0 auto; }

.pjx-crumb.dark { color: var(--pj-body); }
.pjx-crumb.dark a { color: var(--pj-crimson); text-decoration: none; }
.pjx-crumb.dark a:hover { text-decoration: underline; text-underline-offset: 3px; }

.pjx-article-title {
    font-family: 'Playfair Display', serif; font-weight: 800; color: var(--pj-ink);
    font-size: clamp(1.8rem, 4vw, 2.9rem); line-height: 1.22; margin: .5rem 0 .9rem;
}

.pjx-article-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: .8rem;
    color: #8b8578; font-size: .84rem; margin-bottom: 2rem;
}

/* Rasio 16:9 dijaga agar tidak terjadi pergeseran tata letak saat iframe dimuat */
.pjx-article-video {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: 10px; overflow: hidden; background: var(--pj-ink);
    box-shadow: var(--pj-shadow); margin-bottom: 2.2rem;
}
.pjx-article-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pjx-article-cover { border-radius: 10px; overflow: hidden; margin-bottom: 2.2rem; box-shadow: var(--pj-shadow); }
.pjx-article-cover img { width: 100%; height: auto; display: block; }

.pjx-article-lead {
    font-size: 1.08rem; line-height: 1.85; color: var(--pj-ink); font-weight: 500;
    padding-left: 1.1rem; border-left: 3px solid var(--pj-gold); margin-bottom: 2rem;
}

.pjx-article-body { max-width: none; font-size: .98rem; line-height: 1.9; color: var(--pj-body); }
.pjx-article-body p { margin: 0 0 1.15rem; }
.pjx-article-body h2, .pjx-article-body h3 {
    font-family: 'Playfair Display', serif; color: var(--pj-ink); margin: 2rem 0 .8rem;
}
.pjx-article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.2rem 0; }
.pjx-article-body ul, .pjx-article-body ol { margin: 0 0 1.15rem 1.3rem; }

.pjx-article-foot { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--pj-line); }

/* Galeri detail: 3 kolom, lebih rapat daripada .pjx-gallery beranda */
.pjx-article .pjx-gallery { grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 2.4rem 0 0; }

@media (max-width: 720px) {
    .pjx-article .pjx-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Blok kontak media ---------- */
.pjx-mediacontact {
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
    background: var(--pj-white); border: 1px solid var(--pj-line);
    border-radius: 6px; padding: 2.2rem 2.4rem; box-shadow: var(--pj-shadow);
}
.pjx-mediacontact h2 {
    font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700;
    color: var(--pj-ink); margin: .35rem 0 .5rem;
}
.pjx-mediacontact p { margin: 0; color: var(--pj-body); font-size: .92rem; max-width: 480px; }

.pjx-mediacontact-info { display: flex; flex-direction: column; gap: .6rem; }
.pjx-mediacontact-info a, .pjx-mediacontact-info span {
    display: inline-flex; align-items: center; gap: .6rem;
    color: var(--pj-ink); font-weight: 600; font-size: .93rem; text-decoration: none;
}
.pjx-mediacontact-info i { color: var(--pj-crimson); width: 18px; text-align: center; }
.pjx-mediacontact-info a:hover { color: var(--pj-crimson); }

@media (max-width: 720px) {
    .pjx-mediacontact { padding: 1.6rem 1.4rem; }
}

/* Gambar diam pengganti iframe YouTube.
   Iframe baru dibuat saat diklik, sehingga tidak ada permintaan ke YouTube
   (dan tidak ada cookie pelacak) sebelum pengunjung memintanya. */
.pjx-embed-facade {
    position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    border: 0; padding: 1rem; color: #fff;
    background-color: var(--pj-ink); background-position: center; background-size: cover;
    transition: filter .3s;
}
.pjx-embed-facade::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 11, 14, .35), rgba(10, 11, 14, .68));
}
.pjx-embed-facade:hover { filter: brightness(1.06); }
.pjx-embed-facade:focus-visible { outline: 2px solid var(--pj-gold); outline-offset: -4px; }

.pjx-embed-facade .ico {
    position: relative; z-index: 1;
    width: 66px; height: 66px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .5);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-size: 1.15rem; padding-left: 4px;
    transition: background .25s, border-color .25s, transform .25s;
}
.pjx-embed-facade:hover .ico {
    background: var(--pj-crimson); border-color: var(--pj-crimson); transform: scale(1.07);
}

.pjx-embed-facade .hint {
    position: relative; z-index: 1;
    font-family: 'Inter', sans-serif; font-size: .72rem; font-weight: 700;
    letter-spacing: 1.6px; text-transform: uppercase; text-align: center;
    color: rgba(255, 255, 255, .82);
}

@media (max-width: 560px) {
    .pjx-embed-facade .ico { width: 54px; height: 54px; font-size: 1rem; }
    .pjx-embed-facade .hint { font-size: .64rem; letter-spacing: 1.2px; }
}

/* =====================================================================
   PERBAIKAN RESPONSIF MOBILE
   ===================================================================== */
@media (max-width: 767px) {

    /* A. Sub-menu navbar geser ke kiri saat dibuka.
       Penyebabnya aturan desktop `.pjx-menu > li:hover .pjx-dropdown-menu`
       yang memasang translateX(-50%). Spesifisitasnya (0,3,0) lebih tinggi
       daripada `.pjx-dropdown-menu { transform: none }` (0,1,0), jadi saat
       di-tap — browser mobile ikut memicu :hover — dropdown-nya tergeser
       setengah lebarnya. Harus ditimpa dengan selektor yang setara. */
    .pjx-menu > li:hover .pjx-dropdown-menu,
    .pjx-menu > li:focus-within .pjx-dropdown-menu {
        transform: none;
        left: auto;
    }

    /* B. Dropdown "Pilih Brand" meluber di layar sempit.
       min-width 240px + padding kiri-kanan 72px = 312px, sedangkan ruang
       dalam container di layar 360px hanya 304px. */
    .pjx-brand-filter { width: 100%; flex-direction: column; align-items: stretch; gap: 10px; }
    .pjx-brand-filter label { text-align: center; }
    .pjx-select { width: 100%; }
    .pjx-select select { width: 100%; min-width: 0; padding-right: 2.6rem; }

    /* C. Footer tetap RATA KIRI. Daftar tautan (Navigasi, Produk, Kontak)
       jauh lebih mudah dipindai saat rata kiri — mata punya satu garis awal
       yang tetap. Judul kolom yang terpusat juga membuat garis emas di
       bawahnya melayang tanpa jangkar. Yang dipusatkan hanya baris hak cipta
       di paling bawah, karena itu penutup, bukan daftar. */

    /* Baris bawah: dua item dengan space-between jadi berantakan begitu
       teks hak ciptanya membungkus. Ditumpuk saja. */
    .pjx-footer-bottom {
        flex-direction: column; justify-content: center; align-items: center;
        gap: .75rem; text-align: center; margin-top: 28px;
    }
    .pjx-footer-legal { justify-content: center; }
}

/* =====================================================================
   EFEK MIRING KARTU (data-tilt)
   Kartu dimiringkan mengikuti kursor + pantulan cahaya menyapu permukaan.
   Tanpa aset 3D — mengandalkan pack-shot berlatar transparan yang sudah ada.
   ===================================================================== */

/* Hanya untuk perangkat berkursor presisi. Di layar sentuh, :hover "lengket"
   dan kartu bisa tertinggal dalam posisi miring setelah disentuh. */
@media (hover: hover) and (pointer: fine) {

    /* Saat sedang dimiringkan, transisi dimatikan supaya gerakannya mengikuti
       kursor seketika; transisi hanya dipakai untuk kembali ke posisi semula. */
    .pjx-product-card[data-tilt].is-tilting { transition: box-shadow .45s, border-color .45s; }

    .pjx-tilt-sheen {
        position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
        opacity: 0; transition: opacity .35s ease;
        background: radial-gradient(200px circle at var(--sx, 50%) var(--sy, 50%),
            rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, 0) 62%);
        mix-blend-mode: soft-light;
    }
    .pjx-product-card[data-tilt]:hover .pjx-tilt-sheen { opacity: 1; }
}

/* Hemat gerak: kartu tetap diam, kilau tidak dirender sama sekali. */
@media (prefers-reduced-motion: reduce) {
    .pjx-tilt-sheen { display: none; }
}

/* =====================================================================
   KARTU BERTUMPUK + LEMPAR (data-stack) — halaman Tentang Kami
   =====================================================================
   Ditaruh di AKHIR berkas dan memakai `.framed` di dalam selektor. Alasannya:
   `.pjx-split .media.framed img { position: relative }` punya spesifisitas
   yang SAMA (0,3,1) dengan `.pjx-split .media[data-stack] img`. Saat sama,
   yang menang adalah yang muncul belakangan — sebelumnya aturan .framed itu
   yang menang, sehingga gambar tetap position:relative dan justru bertumpuk
   VERTIKAL ke bawah, bukan menumpuk di satu tempat.
   Dua pengaman sekaligus: spesifisitas dinaikkan (0,4,1) DAN posisinya paling
   akhir, jadi tidak bergantung pada urutan saja. */

.pjx-split .media.framed[data-stack],
.pjx-split .media[data-stack] {
    position: relative;
    aspect-ratio: 16 / 10;
}

/* Semua kartu menempati kotak yang SAMA PERSIS — inilah yang membuatnya
   menumpuk, bukan berjajar. */
.pjx-split .media.framed[data-stack] img,
.pjx-split .media[data-stack] img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--pj-shadow);
    z-index: 1;
}

.pjx-split .media.framed[data-stack] img.active,
.pjx-split .media[data-stack] img.active { z-index: 2; }

/* Lemparan: keluar ke kiri sambil berputar, lalu kembali. Urutan tumpukan
   ditukar di titik terjauh (lihat TOSS di layout), saat kartunya di luar
   bingkai — jadi pergantiannya tidak terlihat sebagai kedipan. */
.pjx-split .media.framed[data-stack] img.is-tossing,
.pjx-split .media[data-stack] img.is-tossing {
    animation: pjxCardToss .85s cubic-bezier(.36, .07, .25, 1) both;
}

@keyframes pjxCardToss {
    0%   { transform: none; }
    42%  { transform: translateX(-34%) rotate(-9deg) scale(.94); box-shadow: 0 30px 60px rgba(23, 24, 28, .28); }
    100% { transform: none; }
}

/* Badge merah tetap paling atas, termasuk saat ada kartu yang dilempar. */
.pjx-split .media.framed[data-stack] .badge-float,
.pjx-split .media[data-stack] .badge-float { z-index: 4; }

@media (prefers-reduced-motion: reduce) {
    .pjx-split .media[data-stack] img.is-tossing { animation: none; }
}

/* =====================================================================
   KARTU KATEGORI DI HP — tetap turun ke bawah, tapi dibuat RINGKAS
   =====================================================================
   Tetap satu kartu per baris dan mengalir ke bawah. Yang diperbaiki adalah
   tinggi tiap kartunya: sebelumnya gambar 4:3 selebar layar ditumpuk di atas
   teks, jadi satu kartu saja bisa >400px dan tiga kategori membuat halaman
   sangat panjang. Sekarang gambar di kiri dan teks di kanan — tinggi kartu
   turun drastis tanpa menghilangkan satu pun kategori. */
@media (max-width: 640px) {
    .pjx-cats { grid-template-columns: 1fr; gap: 14px; }

    .pjx-cats > .pjx-cat {
        display: grid;
        grid-template-columns: 38% 1fr;
        align-items: stretch;
        text-align: left;
    }

    /* Gambar mengisi tinggi kartu, bukan memaksakan rasio 4:3 selebar layar */
    .pjx-cat-media { aspect-ratio: auto; height: 100%; min-height: 128px; }
    .pjx-cat-media img { padding: 14px; }

    .pjx-cat-body { padding: 14px 16px 14px 14px; justify-content: center; }
    .pjx-cat-body h3 { font-size: 1.12rem; margin-bottom: .25rem; }
    .pjx-cat-body p {
        font-size: .82rem; margin: 0 0 .6rem; min-height: 0;
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .pjx-cat-link { padding-top: 10px; font-size: .7rem; }

    /* Kartu "Segera Hadir" tidak punya gambar — biarkan satu lajur penuh */
    .pjx-cats > .pjx-cat:has(.pjx-cat-empty) { grid-template-columns: 1fr; }
}

/* =====================================================================
   PENGAMAN KONTEN DARI EDITOR ADMIN (pjx-prose / pjx-article-body)
   =====================================================================
   Isi rich-text bisa membawa atribut width/height tetap pada gambar,
   tabel lebar, iframe embed, atau URL panjang tanpa spasi — semuanya
   membuat halaman bisa digeser ke samping di HP. */
.pjx-prose, .pjx-article-body { overflow-wrap: anywhere; }
.pjx-prose img, .pjx-article-body img { max-width: 100%; height: auto; }
.pjx-prose iframe, .pjx-prose video, .pjx-article-body iframe, .pjx-article-body video { max-width: 100%; }
.pjx-prose table, .pjx-article-body table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* Header halaman di HP: 90px atas-bawah terlalu tinggi, isi baru terlihat
   setelah satu layar penuh digulir. */
@media (max-width: 640px) {
    .pjx-pagehead { padding: calc(var(--pj-nav-h) + 48px) 0 56px; }
    .pjx-pagehead p { font-size: .95rem; }
}