/*
 * Tema monokrom (hitam & putih) + Plus Jakarta Sans.
 * Dimuat paling akhir di setiap halaman sehingga menimpa style lama
 * (gradien, glow, warna oranye/emas, bayangan) tanpa mengubah markup.
 */

:root {
    --mono-bg: #ffffff;
    --mono-ink: #0a0a0a;
    --mono-muted: #555555;
    --mono-line: #e4e4e4;
    --mono-soft: #f5f5f5;
    --mono-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- Dasar ---------- */
html,
body {
    background: var(--mono-bg) !important;
    color: var(--mono-ink) !important;
}

body,
body :where(*:not(i):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"])) {
    font-family: var(--mono-font) !important;
}

/* .pf-intro dikecualikan: section itu mengatur warna, latar, dan filter sendiri (public/css/portfolio-intro.css) */
:where(body *:not(.pf-intro *)) {
    color: var(--mono-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: none !important;
    box-shadow: none !important;
    border-color: var(--mono-line) !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    outline-color: var(--mono-ink) !important;
}

/* Hapus semua gradien & warna latar, kecuali gambar asli (inline url) */
:where(body *:not(.pf-intro *):not(img):not(video):not(iframe):not([style*="url("])) {
    background-color: transparent !important;
    background-image: none !important;
}

:where(body *)::before,
:where(body *)::after {
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
}

:where(body *)::before,
:where(body *)::after {
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

:where(body *:not(i):not([class*="fa-"]))::before,
:where(body *:not(i):not([class*="fa-"]))::after {
    background-color: transparent !important;
    border-color: transparent !important;
}

::selection {
    background: var(--mono-ink);
    color: var(--mono-bg);
}

body {
    accent-color: var(--mono-ink);
    caret-color: var(--mono-ink);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.02em !important;
}

p,
[class*="subtitle"],
[class*="-desc"],
[class*="tagline"] {
    color: var(--mono-muted) !important;
}

/* ---------- Elemen dekoratif disembunyikan ---------- */
[class*="glow"],
[class*="particle"],
[class*="decoration"],
[class*="grid-pattern"],
[class*="-shine"],
[class*="pulse-ring"],
.bento-step-pulse,
.burger-pulse,
.navbar-burger-dot,
.premium-hero-bg,
.premium-hero-grid,
.premium-card-avatar-ring,
.maps-corner-tl,
.maps-corner-tr,
.maps-corner-bl,
.maps-corner-br,
.maps-frame-corner,
.footer-top-border,
.about-sunset-overlay,
.premium-eyebrow-dot,
.status-dot {
    display: none !important;
}

/* ---------- Hero: teks mengetik di latar putih ---------- */
.hero-container {
    min-height: 0 !important;
}

.hero-typing {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 104px);
    min-height: calc(100svh - 104px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 24px;
    overflow: hidden;
    background-color: var(--mono-bg) !important;
}

.hero-typing-title {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-weight: 500 !important;
    font-size: clamp(2rem, 4.2vw, 4.5rem);
    line-height: 1.1;
    letter-spacing: -0.03em !important;
    text-align: center;
    color: var(--mono-ink) !important;
}

.hero-typing-title * {
    font-family: inherit !important;
}

/* Dot grid + monogram VP (public/js/hero-dot-grid.js) di belakang teks hero */
.hero-dot-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-typing-title {
    color: #111111 !important;
}

.hero-typing-text {
    display: block;
    text-wrap: balance;
}

/* Kata tidak terpotong di tengah baris */
.hero-typing-title .hero-word {
    display: inline-block;
    white-space: nowrap;
}

/*
 * Masuk per huruf seperti gelombang: fade + blur 10px (charFade) dan naik dengan sedikit pantulan (charWave).
 * Selektor 2 class + !important agar tidak dimatikan oleh aturan `[class*="title"] span`.
 */
.hero-typing-title .hero-char {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.8em);
    animation:
        heroCharFade 1.1s cubic-bezier(.16, 1, .3, 1) forwards,
        heroCharWave 1.3s cubic-bezier(.34, 1.45, .64, 1) forwards !important;
    animation-delay: calc(0.3s + var(--i) * 45ms), calc(0.3s + var(--i) * 45ms) !important;
    will-change: transform, opacity, filter;
}

@keyframes heroCharFade {
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes heroCharWave {
    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-typing-title .hero-char {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
    }
}

/* ---------- Film grain di seluruh website ---------- */
.grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.12;
    /* screen: bintik terang tampil di area gelap, tak terlihat di putih. overlay/soft-light tidak tampak di hitam pekat. */
    mix-blend-mode: screen;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
    background-size: 200px 200px;
    background-repeat: repeat;
    will-change: transform;
    animation: grain 0.8s steps(8) infinite !important;
}

@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -20%); }
    40% { transform: translate(-5%, 20%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 18%); }
    90% { transform: translate(-10%, 10%); }
}

@media (prefers-reduced-motion: reduce) {
    .grain {
        animation: none !important;
    }
}

/* Logo putih dibalik menjadi hitam di latar putih */
.navbar-logo,
.premium-title-logo-img,
.brand-logo img,
img.brand-logo {
    filter: invert(1) !important;
}

[class*="brand-tagline"] {
    background-color: transparent !important;
    border: 0 !important;
    color: var(--mono-muted) !important;
}

/* ---------- Navbar ---------- */
.navbar-dashboard,
.navbar-megah,
.navbar-mobile-menu,
.nav-mobile-menu {
    background-color: var(--mono-bg) !important;
    border-bottom: 1px solid var(--mono-line) !important;
}

.navbar-link,
.nav-menu-megah a {
    color: var(--mono-muted) !important;
    font-weight: 500 !important;
}

.navbar-link:hover,
.navbar-link.active,
.nav-menu-megah a:hover,
.nav-menu-megah a.active,
.nav-link-megah.active {
    color: var(--mono-ink) !important;
    font-weight: 600 !important;
}

.navbar-burger-bar,
.burger-bar {
    background-color: var(--mono-ink) !important;
}

/* ---------- Tombol ---------- */
.navbar-btn-special,
.premium-btn-primary,
.about-wa-button,
.maps-action-primary,
button[type="submit"]:not(.premium-action):not(.nav-btn-logout) {
    background-color: var(--mono-ink) !important;
    border: 1px solid var(--mono-ink) !important;
    border-radius: 8px !important;
    transform: none !important;
}

.navbar-btn-special,
.navbar-btn-special *,
.premium-btn-primary,
.premium-btn-primary *,
.about-wa-button,
.about-wa-button *,
.maps-action-primary,
.maps-action-primary *,
button[type="submit"]:not(.premium-action):not(.nav-btn-logout),
button[type="submit"]:not(.premium-action):not(.nav-btn-logout) * {
    color: var(--mono-bg) !important;
}

.navbar-btn-special:hover,
.premium-btn-primary:hover,
.about-wa-button:hover,
.maps-action-primary:hover {
    background-color: #333333 !important;
}

.premium-btn-ghost,
.premium-btn-refresh,
.nav-btn-logout,
.maps-action-btn:not(.maps-action-primary),
.maps-info-btn,
.premium-photo-action,
.premium-photo-delete,
.premium-dropzone-remove {
    background-color: var(--mono-bg) !important;
    border: 1px solid var(--mono-ink) !important;
    border-radius: 8px !important;
}

.premium-btn-ghost:hover,
.premium-btn-refresh:hover,
.nav-btn-logout:hover,
.maps-action-btn:not(.maps-action-primary):hover,
.maps-info-btn:hover {
    background-color: var(--mono-soft) !important;
}

.premium-action {
    background-color: var(--mono-bg) !important;
    border: 1px solid var(--mono-line) !important;
}

.premium-action:hover {
    border-color: var(--mono-ink) !important;
}

/* ---------- Kartu & panel ---------- */
.portofolio-card,
.event-card,
.stat-item,
.about-story-card,
.about-vm-card,
.about-why-card,
.about-konsultasi-card,
.maps-card,
.maps-info-card,
.partner-card,
.premium-card,
.bento-panel,
.premium-modal-card,
.premium-empty,
.premium-no-result,
.current-file-premium,
.premium-validation-summary,
.alert-megah {
    background-color: var(--mono-bg) !important;
    border: 1px solid var(--mono-line) !important;
    border-radius: 12px !important;
}

.portofolio-card:hover,
.event-card:hover,
.stat-item:hover,
.partner-card:hover,
.premium-card:hover {
    border-color: var(--mono-ink) !important;
    transform: none !important;
}

.maps-frame {
    padding: 0 !important;
    border: 1px solid var(--mono-line) !important;
    border-radius: 12px !important;
    animation: none !important;
}

.stat-number {
    font-weight: 700 !important;
}

/* ---------- Teks di atas foto tetap putih ---------- */
.portofolio-featured-content,
.sunset-slide-content {
    background-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%) !important;
}

.portofolio-featured-content,
.portofolio-featured-content *,
.sunset-slide-content,
.sunset-slide-content * {
    color: #ffffff !important;
}

.portofolio-featured-content p,
.sunset-slide-content p {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------- Label kecil, badge, counter ---------- */
.portofolio-card-tag,
.portofolio-featured-tag,
.portofolio-label,
.event-category-badge,
.sunset-section-badge,
.sunset-slide-tag,
.about-badge,
.about-konsultasi-badge,
.maps-badge,
.milestone-badge,
.premium-eyebrow,
.premium-dept-badge,
.premium-card-status,
.premium-card-id,
[class*="-tag"]:not([class*="tagline"]),
[class*="-badge"] {
    background-color: var(--mono-bg) !important;
    color: var(--mono-ink) !important;
    border: 1px solid var(--mono-line) !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}

.portofolio-featured-tag,
.sunset-slide-tag {
    border-color: var(--mono-bg) !important;
}

.sunset-counter,
.manual-counter,
.sunset-nav-arrow,
.manual-arrow {
    background-color: var(--mono-bg) !important;
    border: 1px solid var(--mono-line) !important;
}

.sunset-dot,
.slideshow-dot-paradic {
    background-color: #c8c8c8 !important;
}

.sunset-dot.active,
.slideshow-dot-paradic.active,
.sunset-progress,
[class*="progress-bar"] {
    background-color: var(--mono-ink) !important;
}

.sunset-thumb.active {
    border-color: var(--mono-ink) !important;
}

/* ---------- Ikon ---------- */
.about-icon-wrapper,
.about-feature-icon,
.about-konsultasi-icon,
.about-wa-button-icon,
.maps-info-icon,
.premium-empty-icon,
.premium-dropzone-icon,
.footer-divider-icon {
    background-color: var(--mono-soft) !important;
    border: 1px solid var(--mono-line) !important;
}

.about-wa-button .about-wa-button-icon {
    background-color: transparent !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.premium-card-avatar,
.nav-profile {
    background-color: var(--mono-ink) !important;
    border: 0 !important;
}

.premium-card-avatar *,
.nav-profile * {
    color: var(--mono-bg) !important;
    background-color: transparent !important;
}

.bento-step-number {
    color: #a3a3a3 !important;
    -webkit-text-stroke: 0 !important;
    -webkit-text-fill-color: #a3a3a3 !important;
}

.footer-divider-line {
    background-color: var(--mono-line) !important;
}

/* ---------- Form ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.premium-input,
.divisi-select-trigger,
.role-select-trigger,
.premium-search {
    background-color: var(--mono-bg) !important;
    color: var(--mono-ink) !important;
    border: 1px solid var(--mono-line) !important;
    border-radius: 8px !important;
}

input:focus,
select:focus,
textarea:focus,
.premium-input:focus {
    border-color: var(--mono-ink) !important;
    outline: none !important;
}

input::placeholder,
textarea::placeholder {
    color: #9a9a9a !important;
    -webkit-text-fill-color: #9a9a9a !important;
}

.premium-input-line {
    display: none !important;
}

.premium-dropzone,
.premium-photo-upload {
    background-color: var(--mono-soft) !important;
    border: 1px dashed #bdbdbd !important;
    border-radius: 12px !important;
}

.divisi-select-panel,
.role-select-panel {
    background-color: var(--mono-bg) !important;
    border: 1px solid var(--mono-line) !important;
    border-radius: 10px !important;
}

.divisi-option:hover,
.role-option:hover,
.divisi-option.active,
.role-option.active,
.divisi-option.is-selected,
.role-option.is-selected {
    background-color: var(--mono-soft) !important;
}

.premium-error,
.invalid-feedback {
    color: var(--mono-ink) !important;
    font-weight: 600 !important;
}

.is-invalid {
    border-color: var(--mono-ink) !important;
}

/* ---------- Modal ---------- */
.premium-modal-backdrop {
    background-color: rgba(0, 0, 0, 0.45) !important;
}

/* ---------- Footer (dibalik: hitam) ---------- */
.dashboard-footer {
    background-color: var(--mono-ink) !important;
    border-top: 1px solid var(--mono-ink) !important;
}

.dashboard-footer *,
.dashboard-footer p {
    color: #d4d4d4 !important;
    border-color: #2a2a2a !important;
}

.dashboard-footer h1,
.dashboard-footer h2,
.dashboard-footer h3,
.dashboard-footer h4,
.dashboard-footer strong,
.dashboard-footer a:hover {
    color: #ffffff !important;
}

.dashboard-footer .footer-divider-icon,
.dashboard-footer .footer-social-link {
    background-color: transparent !important;
    border: 1px solid #3a3a3a !important;
}

/* ---------- Gerak dikurangi: hanya animasi dekoratif yang dimatikan ---------- */
.text-orange-gradient,
.text-orange-highlight,
.premium-title-accent,
[class*="title"] span {
    animation: none !important;
}

/* ---------- Jarak vertikal antar-section: konsisten 120px (64px di mobile) ---------- */
:root {
    --vp-section-space: 120px;
}

#proyek.stats-testimoni-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.portofolio-section,
.event-categories-section,
.partner-logos,
.stats-row,
#about-us,
#lokasi {
    padding-top: var(--vp-section-space) !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.partner-logos {
    border-bottom: 0 !important;
}

.dashboard-footer {
    margin-top: var(--vp-section-space) !important;
}

/* ---------- Portofolio: gaya editorial ---------- */
.vp-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.vp-section-label,
.vp-section-label * {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 13px;
    font-weight: 300 !important;
    letter-spacing: 0 !important;
    text-transform: none;
    color: var(--mono-ink) !important;
}

.vp-section-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.vp-section-link svg {
    transition: transform 0.3s ease;
}

.vp-section-link:hover svg {
    transform: translate(2px, -2px);
}

.vp-section-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    margin-top: 64px;
}

.vp-section-heading {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 500 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.05;
    color: var(--mono-ink) !important;
}

.vp-section-lead {
    align-self: end;
    justify-self: end;
    max-width: 340px;
    margin: 0;
    font-size: 16px;
    font-weight: 300 !important;
    line-height: 1.6;
    color: #6b6b6b !important;
}

/*
 * Animasi masuk judul section (Portofolio, Corporate & Event, Lokasi).
 * Class js-reveal & is-visible ditambahkan oleh script di dashboard.blade.php.
 */
.vp-section-intro.js-reveal .vp-section-heading,
.vp-section-intro.js-reveal .vp-section-lead {
    transition:
        opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.vp-section-intro.js-reveal .vp-section-lead {
    transition-delay: 0.25s;
}

.vp-section-intro.js-reveal:not(.is-visible) .vp-section-heading {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(8px);
    clip-path: inset(0 0 100% 0);
}

.vp-section-intro.js-reveal.is-visible .vp-section-heading {
    clip-path: inset(0 0 -0.25em 0);
}

.vp-section-intro.js-reveal:not(.is-visible) .vp-section-lead {
    opacity: 0;
    transform: translateY(16px);
}

@media (prefers-reduced-motion: reduce) {
    .vp-section-intro .vp-section-heading,
    .vp-section-intro .vp-section-lead {
        transition: none !important;
    }
}

.vp-showcase {
    margin-top: 48px;
}

/* Kartu project unggulan berikutnya tidak menempel ke slider */
.vp-showcase + .vp-showcase {
    margin-top: 24px;
}

.vp-showcase-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden;
    background-color: #111111 !important;
}

.vp-showcase-frame .sunset-slides-viewport {
    position: absolute;
    inset: 0;
}

.vp-showcase-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 45%) !important;
}

.vp-showcase-caption,
.vp-showcase-controls {
    position: absolute;
    bottom: 0;
    z-index: 2;
    padding: 32px;
}

.vp-showcase-caption {
    left: 0;
}

.vp-showcase-controls {
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vp-showcase-caption *,
.vp-showcase-controls,
.vp-showcase-controls * {
    color: #ffffff !important;
}

.vp-showcase-name {
    margin: 0 0 6px;
    font-size: 28px;
    font-weight: 500 !important;
    line-height: 1.2;
    letter-spacing: -0.01em !important;
}

.vp-showcase-meta {
    margin: 0;
    font-size: 13px;
    font-weight: 300 !important;
    opacity: 0.75;
}

.vp-showcase-counter {
    margin-right: 8px;
    font-size: 13px;
    font-weight: 300 !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em !important;
}

.vp-showcase-arrow {
    display: inline-flex;
    padding: 6px;
    border: 0 !important;
    background: none !important;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.3s ease;
}

.vp-showcase-arrow:hover {
    opacity: 1;
}

.vp-showcase-arrow--prev:hover {
    transform: translateX(-2px) !important;
}

.vp-showcase-arrow--next:hover {
    transform: translateX(2px) !important;
}

/* Showcase yang memakai script .manual-slideshow (mis. Paradicfest): samakan dengan slider Sunset */
.vp-showcase-frame.manual-slideshow .manual-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
}

.vp-showcase-frame.manual-slideshow .manual-arrow,
.vp-showcase-frame.manual-slideshow .manual-counter {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    height: auto;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    pointer-events: auto;
}

.vp-showcase-frame.manual-slideshow .manual-arrow {
    padding: 6px;
    opacity: 0.85;
    transform: none;
}

.vp-showcase-frame.manual-slideshow .manual-arrow:hover,
.vp-showcase-frame.manual-slideshow .manual-arrow:active {
    opacity: 1;
    background: none !important;
}

.vp-showcase-frame.manual-slideshow .manual-counter {
    padding: 0;
    margin-right: 8px;
    font-size: 13px;
    font-weight: 300 !important;
}

.vp-showcase-arrow:focus-visible {
    outline: 1px solid #ffffff !important;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    :root {
        --vp-section-space: 64px;
    }

    .vp-section-intro {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px;
    }

    .vp-section-lead {
        justify-self: start;
        align-self: start;
    }

    .vp-showcase {
        margin-top: 32px;
    }

    .vp-showcase-frame {
        border-radius: 14px;
    }

    .vp-showcase-caption,
    .vp-showcase-controls {
        padding: 16px;
    }

    .vp-showcase-name {
        font-size: 18px;
        margin-bottom: 2px;
    }

    .vp-showcase-meta,
    .vp-showcase-counter {
        font-size: 12px;
    }

    .vp-showcase-controls {
        gap: 4px;
    }

    .vp-showcase-arrow svg {
        width: 18px;
        height: 18px;
    }
}

/* ---------- Corporate & Event: grid kartu editorial ---------- */
.vp-work-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 48px;
}

.vp-work {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 0 !important;
    background-color: transparent !important;
}

.vp-work--tall {
    grid-row: span 2;
}

.vp-work--wide {
    grid-column: span 2;
}

.vp-work-media.manual-slideshow {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    isolation: isolate;
    background-color: #ececec !important;
}

/* Kartu besar & lebar mengisi tinggi baris; tinggi baris ditentukan kartu 4/3 */
.vp-work--tall .vp-work-media.manual-slideshow,
.vp-work--wide .vp-work-media.manual-slideshow {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 240px;
}

.vp-work-media .manual-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 0.6s ease-in-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.vp-work:hover .vp-work-media .manual-slide {
    transform: scale(1.04);
}

.vp-work-media.manual-slideshow .manual-counter {
    top: 16px;
    right: 16px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    font-size: 12px;
    font-weight: 400 !important;
    letter-spacing: 0.02em !important;
    font-variant-numeric: tabular-nums;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vp-work-media.manual-slideshow .manual-arrow {
    width: auto;
    height: auto;
    padding: 8px;
    border: 0 !important;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.vp-work-media.manual-slideshow .manual-arrow,
.vp-work-media.manual-slideshow .manual-arrow * {
    color: #ffffff !important;
}

.vp-work-media.manual-slideshow .manual-arrow svg {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) !important;
}

.vp-work-media.manual-slideshow .manual-arrow-prev { left: 8px; }
.vp-work-media.manual-slideshow .manual-arrow-next { right: 8px; }

.vp-work-media.manual-slideshow .manual-arrow:hover {
    background: none !important;
    transform: translateY(-50%);
}

.vp-work-media.manual-slideshow .manual-arrow-prev:hover { transform: translate(-2px, -50%); }
.vp-work-media.manual-slideshow .manual-arrow-next:hover { transform: translate(2px, -50%); }

.vp-work-media.manual-slideshow .manual-arrow:focus-visible {
    outline: 1px solid #ffffff !important;
    outline-offset: 0;
}

.vp-work:hover .vp-work-media.manual-slideshow .manual-arrow,
.vp-work:hover .vp-work-media.manual-slideshow .manual-counter,
.vp-work-media.manual-slideshow:focus-within .manual-arrow,
.vp-work-media.manual-slideshow:focus-within .manual-counter {
    opacity: 1;
}

.vp-work-name {
    margin: 16px 0 0;
    font-size: 18px;
    font-weight: 500 !important;
    line-height: 1.35;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    text-align: left;
    color: #111111 !important;
}

.vp-work-meta {
    margin: 4px 0 0;
    font-size: 13px;
    font-weight: 300 !important;
    text-align: left;
    color: #8a8a8a !important;
}

/* Perangkat tanpa hover: counter selalu tampil */
@media (hover: none) {
    .vp-work-media.manual-slideshow .manual-counter {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .vp-work-grid {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .vp-work--tall,
    .vp-work--wide {
        grid-row: auto;
        grid-column: auto;
    }

    .vp-work--tall .vp-work-media.manual-slideshow,
    .vp-work--wide .vp-work-media.manual-slideshow {
        aspect-ratio: 4 / 3;
        flex: none;
        min-height: 0;
    }

    .vp-work-media.manual-slideshow .manual-counter {
        opacity: 1;
    }

    .vp-work-media.manual-slideshow {
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-work-media .manual-slide {
        transition: opacity 0.6s ease-in-out;
    }

    .vp-work:hover .vp-work-media .manual-slide {
        transform: none;
    }
}

/* ---------- Portofolio: grid kartu kecil (komponen x-project-card) ---------- */
.vp-work-grid--portfolio {
    gap: 48px 32px;
}

@media (max-width: 768px) {
    .vp-work-grid--portfolio {
        gap: 36px;
    }
}

/* ---------- (04) Dipercaya oleh: dua baris marquee monokrom ---------- */
.vp-trusted {
    padding-top: var(--vp-section-space);
    overflow: hidden;
}

.vp-trusted-label {
    margin-bottom: 56px;
}

.vp-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.vp-marquee + .vp-marquee {
    margin-top: 40px;
}

.vp-marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.vp-marquee-group {
    --vp-marquee-gap: 60px;
    display: flex;
    align-items: baseline;
    gap: var(--vp-marquee-gap);
    margin: 0;
    padding: 0 var(--vp-marquee-gap) 0 0;
    list-style: none;
}

.vp-marquee-stats {
    --vp-marquee-gap: 72px;
}

.vp-marquee-item {
    flex-shrink: 0;
    white-space: nowrap;
    transition: opacity 0.4s ease, color 0.4s ease;
}

/* Hover: item lain meredup, item yang ditunjuk tetap penuh */
.vp-marquee:hover .vp-marquee-item {
    opacity: 0.35;
}

.vp-marquee:hover .vp-marquee-item:hover {
    opacity: 1;
}

.vp-client-name {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: 15px;
    font-weight: 300 !important;
    color: #8a8a8a !important;
}

.vp-marquee:hover .vp-client:hover .vp-client-name {
    color: #111111 !important;
}

/* Logo klien di atas nama; klien tanpa logo tetap sejajar di bawah */
.vp-marquee-clients {
    align-items: flex-end;
}

.vp-client {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.vp-client-logo {
    display: block;
    background-repeat: no-repeat;
    /* brightness + contrast agar logo berwarna terang (UT, Kemendikdasmen) tidak terlalu pucat */
    filter: grayscale(1) brightness(0.75) contrast(1.35) !important;
    opacity: 0.75;
    transition: opacity 0.4s ease;
}

.vp-marquee:hover .vp-client:hover .vp-client-logo {
    opacity: 1;
}

.vp-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.vp-stat-value {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 700 !important;
    line-height: 1;
    letter-spacing: -0.04em !important;
    font-variant-numeric: tabular-nums;
    color: #111111 !important;
}

.vp-stat-value * {
    color: inherit !important;
}

.vp-stat-caption {
    font-size: 14px;
    font-weight: 300 !important;
    text-transform: lowercase;
    color: #8a8a8a !important;
}

.vp-stat-divider {
    padding-left: 24px;
    font-size: calc(clamp(3rem, 6vw, 5rem) * 0.66);
    font-weight: 300 !important;
    line-height: 1;
    color: #d4d4d4 !important;
}

@media (max-width: 768px) {
    .vp-trusted-label {
        margin-bottom: 40px;
    }

    .vp-marquee-group,
    .vp-marquee-stats {
        --vp-marquee-gap: 32px;
    }

    .vp-stat-value {
        font-size: clamp(2.5rem, 6vw, 5rem);
    }

    .vp-stat-divider {
        padding-left: 16px;
        font-size: calc(clamp(2.5rem, 6vw, 5rem) * 0.66);
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-marquee-item {
        transition: none;
    }
}

/* ---------- (03) Tentang kami: editorial + animasi masuk ---------- */
.vp-about {
    --vp-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --vp-ease-line: cubic-bezier(0.65, 0, 0.35, 1);
    --vp-line-color: rgba(0, 0, 0, 0.12);
    /* Sama dengan section Portofolio: jarak samping 40px, isi maksimal 1400px */
    padding-left: max(40px, calc((100% - 1400px) / 2)) !important;
    padding-right: max(40px, calc((100% - 1400px) / 2)) !important;
}

.vp-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0 !important;
}

/* Label: garis atas/bawah sebagai pseudo-element agar bisa digambar dari kiri */
.vp-about .vp-about-label {
    position: relative;
    margin-bottom: 64px;
    border-top: 0 !important;
    border-bottom: 0 !important;
}

.vp-about .vp-about-label::before,
.vp-about .vp-about-label::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--vp-line-color) !important;
    transform-origin: left center;
    transition: transform 1s var(--vp-ease-line);
}

.vp-about .vp-about-label::before { top: 0; }
.vp-about .vp-about-label::after { bottom: 0; }

.vp-about .vp-about-label > span {
    transition: opacity 0.8s ease 0.4s;
}

.vp-about-grid {
    display: grid;
    grid-template-columns: 4fr 6fr;
    gap: 64px;
    align-items: start;
}

/* Foto */
.vp-about-figure {
    margin: 0;
}

/* Rasio bingkai = rasio asli foto-team.webp (1920x1279) agar tidak ada orang yang terpotong */
.vp-about-photo {
    aspect-ratio: 1920 / 1279;
    border-radius: 12px;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.3s var(--vp-ease-out) 0.2s;
}

.vp-about-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1) !important;
    transition: transform 1.8s var(--vp-ease-out) 0.2s;
}

.vp-about-caption {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 300 !important;
    color: #8a8a8a !important;
    transition: opacity 0.8s ease 1.2s;
}

/* Statement */
.vp-about-statement {
    margin: 0;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(1.5rem, 2.6vw, 2.25rem);
    font-weight: 400 !important;
    line-height: 1.28;
    letter-spacing: -0.025em !important;
    color: #111111 !important;
}

.vp-about-lines {
    display: block;
}

.vp-line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
}

.vp-line > span {
    display: block;
    transition: transform 1s var(--vp-ease-out);
    transition-delay: calc(0.35s + var(--line-index, 0) * 0.09s);
}

.vp-line--muted,
.vp-line--muted *,
.vp-about-flow-muted {
    color: #8a8a8a !important;
}

.vp-about-flow {
    display: none;
    transition: opacity 0.8s var(--vp-ease-out) 0.35s, transform 0.8s var(--vp-ease-out) 0.35s;
}

.vp-about-text {
    max-width: 460px;
    margin: 28px 0 0;
    font-size: 16px;
    font-weight: 300 !important;
    line-height: 1.75;
    color: #555555 !important;
    transition: opacity 0.8s var(--vp-ease-out) 0.85s, transform 0.8s var(--vp-ease-out) 0.85s;
}

/* Daftar layanan */
.vp-services {
    margin: 48px 0 0;
    padding: 0;
    list-style: none;
}

.vp-service {
    --row-delay: calc(1.05s + var(--row-index, 0) * 0.07s);
    position: relative;
    display: flex;
    align-items: baseline;
    padding: 18px 0;
    transition: opacity 0.6s var(--vp-ease-out), transform 0.6s var(--vp-ease-out);
    transition-delay: var(--row-delay);
}

.vp-service::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--vp-line-color) !important;
    transform-origin: left center;
    transition: transform 0.9s var(--vp-ease-line);
    transition-delay: var(--row-delay);
}

.vp-service-number {
    flex: 0 0 28px;
    font-size: 12px;
    font-weight: 400 !important;
    font-variant-numeric: tabular-nums;
    color: #b0b0b0 !important;
}

.vp-service-name {
    font-size: 20px;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: #111111 !important;
    transition: transform 0.4s var(--vp-ease-out);
}

.vp-service-note {
    margin-left: auto;
    padding-left: 24px;
    font-size: 13px;
    font-weight: 300 !important;
    text-align: right;
    color: #8a8a8a !important;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.vp-about .vp-services:hover .vp-service {
    opacity: 0.35;
}

.vp-about .vp-services:hover .vp-service:hover {
    opacity: 1;
}

.vp-service:hover .vp-service-name {
    transform: translateX(8px);
}

.vp-service:hover .vp-service-note {
    opacity: 1;
}

/* Setelah animasi masuk selesai: hapus delay agar hover langsung bereaksi */
.vp-about.is-settled .vp-service {
    transition: opacity 0.4s ease, transform 0.6s var(--vp-ease-out);
    transition-delay: 0s;
}

.vp-about.is-settled .vp-service::after,
.vp-about.is-settled .vp-about-phone::after {
    transition-delay: 0s;
}

/* CTA */
.vp-about-cta {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-top: 80px;
    padding-top: 40px;
}

.vp-about-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--vp-line-color) !important;
    transform-origin: left center;
    transition: transform 1s var(--vp-ease-line) 1.4s;
}

.vp-about-cta-text {
    margin: 0;
    font-size: 14px;
    font-weight: 300 !important;
    line-height: 1.6;
    color: #8a8a8a !important;
    transition: opacity 0.8s ease 1.6s;
}

.vp-about-phone {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 700 !important;
    line-height: 1;
    letter-spacing: -0.035em !important;
    text-decoration: none;
    white-space: nowrap;
    color: #111111 !important;
}

.vp-about-phone * {
    color: inherit !important;
}

.vp-about-phone-mask {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
}

.vp-about-phone-inner {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    transition: transform 1s var(--vp-ease-out) 1.6s;
}

.vp-about-phone-arrow {
    width: 0.55em;
    height: 0.55em;
    flex-shrink: 0;
    transition: transform 0.4s var(--vp-ease-out);
}

.vp-about-phone::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: #111111 !important;
    transform-origin: left center;
    transition: transform 0.9s var(--vp-ease-line) 2.2s;
}

.vp-about-phone:hover::after {
    animation: vpUnderlineRedraw 0.9s var(--vp-ease-line);
}

.vp-about-phone:hover .vp-about-phone-arrow {
    transform: translate(5px, -5px);
}

.vp-about-phone:focus-visible {
    outline: 2px solid #111111 !important;
    outline-offset: 6px;
}

@keyframes vpUnderlineRedraw {
    0% { transform: scaleX(1); transform-origin: right center; }
    50% { transform: scaleX(0); transform-origin: right center; }
    50.01% { transform: scaleX(0); transform-origin: left center; }
    100% { transform: scaleX(1); transform-origin: left center; }
}

/* Keadaan awal animasi: hanya jika JS berjalan (class js-reveal) dan belum terlihat */
.vp-about.js-reveal:not(.is-visible) .vp-about-label::before,
.vp-about.js-reveal:not(.is-visible) .vp-about-label::after,
.vp-about.js-reveal:not(.is-visible) .vp-service::after,
.vp-about.js-reveal:not(.is-visible) .vp-about-cta::before,
.vp-about.js-reveal:not(.is-visible) .vp-about-phone::after {
    transform: scaleX(0);
}

.vp-about.js-reveal:not(.is-visible) .vp-about-label > span,
.vp-about.js-reveal:not(.is-visible) .vp-about-caption,
.vp-about.js-reveal:not(.is-visible) .vp-about-cta-text {
    opacity: 0;
}

.vp-about.js-reveal:not(.is-visible) .vp-about-photo {
    clip-path: inset(100% 0 0 0);
}

.vp-about.js-reveal:not(.is-visible) .vp-about-photo img {
    transform: scale(1.25);
}

.vp-about.js-reveal:not(.is-visible) .vp-line > span,
.vp-about.js-reveal:not(.is-visible) .vp-about-phone-inner {
    transform: translateY(105%);
}

.vp-about.js-reveal:not(.is-visible) .vp-about-flow,
.vp-about.js-reveal:not(.is-visible) .vp-about-text {
    opacity: 0;
    transform: translateY(12px);
}

.vp-about.js-reveal:not(.is-visible) .vp-service {
    opacity: 0;
    transform: translateY(10px);
}

@media (max-width: 768px) {
    .vp-about .vp-about-label {
        margin-bottom: 40px;
    }

    .vp-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .vp-about-lines {
        display: none;
    }

    .vp-about-flow {
        display: block;
    }

    .vp-service {
        flex-wrap: wrap;
    }

    .vp-service-note {
        flex-basis: 100%;
        margin: 4px 0 0 28px;
        padding-left: 0;
        text-align: left;
        opacity: 1;
    }

    .vp-about-cta {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-about *,
    .vp-about *::before,
    .vp-about *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------- (05) Lokasi ---------- */
.vp-location {
    --vp-line-color: rgba(0, 0, 0, 0.12);
    padding-left: max(40px, calc((100% - 1400px) / 2)) !important;
    padding-right: max(40px, calc((100% - 1400px) / 2)) !important;
}

.vp-location-label,
.vp-location-label * {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 12px;
}

.vp-location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
    margin-top: 48px;
}

.vp-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--vp-line-color) !important;
}

.vp-info-list > li {
    border-bottom: 1px solid var(--vp-line-color) !important;
}

.vp-info-row {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: baseline;
    gap: 16px;
    padding: 18px 0;
    text-decoration: none;
    transition: opacity 0.4s ease;
}

.vp-info-label {
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 12px;
    font-weight: 400 !important;
    color: #a0a0a0 !important;
}

.vp-info-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.vp-info-value {
    font-size: 16px;
    font-weight: 400 !important;
    overflow-wrap: anywhere;
    color: #111111 !important;
}

.vp-info-sub {
    font-size: 14px;
    font-weight: 300 !important;
    color: #8a8a8a !important;
}

.vp-info-arrow {
    display: inline-flex;
    width: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vp-info-arrow,
.vp-info-arrow * {
    color: #111111 !important;
}

/* Hover baris link: isi bergeser, panah muncul, baris lain meredup */
.vp-info-list:has(.vp-info-row--link:hover) .vp-info-row:not(:hover),
.vp-info-list:has(.vp-info-row--link:focus-visible) .vp-info-row:not(:focus-visible) {
    opacity: 0.4;
}

.vp-info-row--link:hover .vp-info-content,
.vp-info-row--link:focus-visible .vp-info-content {
    transform: translateX(6px);
}

.vp-info-row--link:hover .vp-info-arrow,
.vp-info-row--link:focus-visible .vp-info-arrow {
    opacity: 1;
}

.vp-info-row--link:focus-visible {
    outline: 1px solid #111111 !important;
    outline-offset: 4px;
}

/* Peta */
.vp-location-map {
    margin: 0;
}

.vp-location-map-frame {
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f2f2f2 !important;
}

.vp-location-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0 !important;
    filter: grayscale(1) contrast(1.05) !important;
}

.vp-location-map figcaption {
    margin-top: 14px;
}

@media (max-width: 768px) {
    .vp-location-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        margin-top: 32px;
    }

    .vp-info-row {
        grid-template-columns: 96px 1fr auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-info-row,
    .vp-info-content,
    .vp-info-arrow {
        transition: none;
    }
}

/* ---------- CTA kontak: latar putih, judul masuk per huruf (public/js/contact-reveal.js) ---------- */
.vp-contact {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 80px 48px;
    background-color: #fff !important;
}

.vp-contact,
.vp-contact * {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.vp-contact-inner {
    width: 100%;
}

.vp-contact-heading {
    margin: 0 0 40px;
    font-size: clamp(44px, 6.5vw, 96px);
    font-weight: 500 !important;
    line-height: 1.05;
    letter-spacing: -0.04em !important;
}

.vp-contact-line {
    display: block;
}

.vp-contact .vp-contact-line {
    color: #111 !important;
}

.vp-contact .vp-contact-line--muted {
    color: #9a9a9a !important;
}

.vp-contact .vp-contact-line * {
    color: inherit !important;
}

.vp-contact-word {
    display: inline-block;
    white-space: nowrap;
}

.vp-contact .vp-contact-phone {
    display: inline-block;
    padding-bottom: 6px;
    font-size: 22px;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-decoration: none;
    color: #111 !important;
    border-bottom: 2px solid #111;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.vp-contact .vp-contact-phone:hover {
    color: #777 !important;
    border-bottom-color: #777;
}

.vp-contact .vp-contact-phone:focus-visible {
    outline: 1px solid #111;
    outline-offset: 6px;
}

/* Keadaan awal hanya berlaku jika JS menambahkan .vp-contact--animate (tanpa JS semua tetap tampil) */
.vp-contact--animate .vp-contact-char {
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.8em);
    will-change: transform, opacity, filter;
}

.vp-contact--animate.is-visible .vp-contact-char {
    animation:
        vpContactCharFade 1.1s cubic-bezier(.16, 1, .3, 1) forwards,
        vpContactCharWave 1.3s cubic-bezier(.34, 1.45, .64, 1) forwards;
    animation-delay: calc(var(--i) * 40ms), calc(var(--i) * 40ms);
}

@keyframes vpContactCharFade {
    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes vpContactCharWave {
    to {
        transform: translateY(0);
    }
}

.vp-contact--animate .vp-contact-phone {
    opacity: 0;
    transform: translateY(20px);
}

.vp-contact--animate.is-visible .vp-contact-phone {
    animation: vpContactFadeUp 0.9s cubic-bezier(.16, 1, .3, 1) 1.3s forwards;
}

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

@media (max-width: 767px) {
    .vp-contact {
        padding: 64px 20px;
    }
}

/* ---------- Footer: hitam + halftone wave (public/js/footer-halftone.js) ---------- */
.vp-footer {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 96px 48px 32px;
    background-color: #111 !important;
}

.vp-footer-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.vp-footer-main,
.vp-footer-bottom {
    position: relative;
    z-index: 1;
}

.vp-footer,
.vp-footer * {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif !important;
}

.vp-footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

.vp-footer-logo {
    display: inline-block;
    flex-shrink: 0;
}

/* Logo footer 1.6x ukuran header: semua angka potongan (header.css) dikali 1.6 agar proporsinya sama */
.vp-footer .vp-brand-logo {
    width: 192px;
    height: 64px;
}

.vp-footer .vp-brand-logo-img {
    top: -176px;
    left: -66px;
    width: 320px;
    height: 400px;
}

.vp-footer-columns {
    display: flex;
    gap: 96px;
}

.vp-footer .vp-footer-col-heading {
    margin: 0 0 20px;
    font-family: 'JetBrains Mono', ui-monospace, monospace !important;
    font-size: 13px;
    font-weight: 400 !important;
    text-transform: uppercase;
    letter-spacing: 3px !important;
    color: #cfcfcf !important;
}

.vp-footer-col ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vp-footer .vp-footer-col a,
.vp-footer .vp-footer-link-pending {
    font-size: 16px;
    font-weight: 400 !important;
    text-decoration: none;
    color: #eee !important;
    transition: color 0.3s ease;
}

.vp-footer .vp-footer-col a:hover {
    color: #888 !important;
}

/* Bayangan putih lembut (glow) pada label dan link menu footer agar menonjol di atas titik halftone */
.vp-footer .vp-footer-col-heading,
.vp-footer .vp-footer-col a,
.vp-footer .vp-footer-link-pending {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.45), 0 0 2px rgba(255, 255, 255, 0.25);
}

.vp-footer .vp-footer-col a:focus-visible {
    outline: 1px solid #eee;
    outline-offset: 3px;
}

.vp-footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 80px;
    padding-top: 20px;
    border-top: 1px solid #2a2a2a !important;
}

.vp-footer .vp-footer-bottom,
.vp-footer .vp-footer-bottom * {
    font-size: 13px;
    font-weight: 300 !important;
    color: #777 !important;
}

@media (max-width: 767px) {
    .vp-footer {
        padding: 56px 20px 24px;
    }

    .vp-footer-main {
        flex-direction: column;
        gap: 40px;
    }

    .vp-footer-columns {
        flex-direction: column;
        gap: 36px;
    }

    .vp-footer-bottom {
        flex-direction: column;
        gap: 6px;
        margin-top: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-contact .vp-contact-phone,
    .vp-footer .vp-footer-col a {
        transition: none;
    }

    .vp-contact--animate .vp-contact-char,
    .vp-contact--animate .vp-contact-phone {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none !important;
    }
}