/* Lenis Smooth Scroll Reset */
html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-smooth iframe {
    pointer-events: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
    position: relative;
    scroll-behavior: auto;
    -webkit-text-size-adjust: 100%;
}

/* 0ms Mobile & Desktop Tap Responsiveness */
a, button, input, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-link {
    transition: color 0.12s ease, opacity 0.12s ease, transform 0.08s ease;
}

.nav-link:active {
    transform: scale(0.96);
    opacity: 0.85;
}

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #FAFAFA;
            color: #0F172A;
            width: 100%;
            max-width: 100%;
            overflow-x: hidden !important;
            position: relative;
            -webkit-font-smoothing: antialiased;
            touch-action: pan-y pinch-zoom;
            margin: 0;
            padding: 0;
        }

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

        /* 3D Flip Card Effect with 1000px Perspective & 60fps GPU acceleration */
        .flip-container {
            perspective: 1000px;
            transform-style: preserve-3d;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .flip-container:hover {
            transform: scale(1.02);
        }

        .flip-card {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;
            will-change: transform;
        }

        .flip-card.is-flipped {
            transform: rotateY(180deg);
        }

        .card-face {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            border-radius: 1.75rem;
            transform: translateZ(0);
        }

        .card-face-back {
            transform: rotateY(180deg) translateZ(0);
        }

        /* 3M Tape Strips */
        .tape-3m {
            background: repeating-linear-gradient(
                -45deg,
                #DC2626 0,
                #DC2626 12px,
                #B91C1C 12px,
                #B91C1C 24px
            );
        }

        /* Crisp Architectural Plakat Container */
        .crisp-render {
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        .spec-container {
            perspective: 1000px;
            transform-style: preserve-3d;
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .spec-container:hover {
            transform: scale(1.02);
        }

        /* Subtle Hero Ambient Mesh */
        .hero-mesh-overlay {
            background-image: radial-gradient(at 10% 20%, rgba(255, 255, 255, 0.18) 0px, transparent 50%),
                              radial-gradient(at 90% 80%, rgba(255, 200, 100, 0.15) 0px, transparent 50%);
        }

        /* ========================================================
           ANIMASI 3 LANGKAH CARA KERJA (PERSIS VIDEO GOTAP / CARDI)
           ======================================================== */
        :root {
            --anim-duration: 3.8s;
            --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
            --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        /* KARTU 01 */
        @keyframes dashedTrackFade1 {
            0%,
            5% {
                opacity: 0;
            }

            10%,
            35% {
                opacity: 0.95;
            }

            39%,
            92% {
                opacity: 0;
            }

            96%,
            100% {
                opacity: 0;
            }
        }

        @keyframes cardDropMotion {
            0% {
                top: 14px;
                transform: translateX(-50%) scale(0.9) rotate(-3deg);
                opacity: 0;
            }

            10%,
            35% {
                top: 22px;
                transform: translateX(-50%) scale(1) rotate(0deg);
                opacity: 1;
            }

            39% {
                top: 75px;
                transform: translateX(-50%) scale(0.92) rotate(2deg);
                opacity: 1;
            }

            44% {
                top: 138px;
                transform: translateX(-50%) scale(0.65) rotate(4deg);
                opacity: 0.85;
            }

            48%,
            86% {
                top: 148px;
                transform: translateX(-50%) scale(0.25) rotate(6deg);
                opacity: 0;
            }

            94%,
            100% {
                top: 14px;
                transform: translateX(-50%) scale(0.9) rotate(-3deg);
                opacity: 0;
            }
        }

        @keyframes cartMoveBounceImpact {
            0% {
                top: 152px;
                transform: translateX(-50%) scale(0.85);
                opacity: 0;
            }

            10%,
            38% {
                top: 152px;
                transform: translateX(-50%) scale(1) rotate(0deg);
                opacity: 1;
            }

            44% {
                top: 158px;
                transform: translateX(-50%) scale(1.15, 0.85) rotate(-2deg);
                opacity: 1;
            }

            48% {
                top: 146px;
                transform: translateX(-50%) scale(0.94, 1.08) rotate(1.5deg);
                opacity: 1;
            }

            52% {
                top: 154px;
                transform: translateX(-50%) scale(1.03, 0.97) rotate(-0.5deg);
                opacity: 1;
            }

            56%,
            84% {
                top: 152px;
                transform: translateX(-50%) scale(1) rotate(0deg);
                opacity: 1;
            }

            90%,
            100% {
                top: 152px;
                transform: translateX(-50%) scale(0.8);
                opacity: 0;
            }
        }

        @keyframes badgeChecklistPop {
            0%,
            43% {
                transform: scale(0) rotate(-45deg);
                opacity: 0;
            }

            50% {
                transform: scale(1.25) rotate(8deg);
                opacity: 1;
            }

            56%,
            84% {
                transform: scale(1) rotate(0deg);
                opacity: 1;
            }

            90%,
            100% {
                transform: scale(0) rotate(20deg);
                opacity: 0;
            }
        }

        @keyframes sparkleBurst {
            0%,
            44% {
                opacity: 0;
                transform: scale(0.3) rotate(0deg);
            }

            50% {
                opacity: 1;
                transform: scale(1.2) rotate(25deg);
            }

            56%,
            100% {
                opacity: 0;
                transform: scale(1.5) rotate(50deg);
            }
        }

        /* KARTU 02 */
        @keyframes dashedTrackFade2 {
            0%,
            34% {
                opacity: 0.9;
            }

            43%,
            86% {
                opacity: 0;
            }

            94%,
            100% {
                opacity: 0.9;
            }
        }

        @keyframes dbGlideStages {
            0%,
            32% {
                top: 26px;
                transform: translateX(-50%) scale(1);
                opacity: 1;
            }

            44% {
                top: 106px;
                transform: translateX(-50%) scale(0.85);
                opacity: 0.35;
            }

            50%,
            84% {
                top: 106px;
                transform: translateX(-50%) scale(0.65);
                opacity: 0;
            }

            94%,
            100% {
                top: 26px;
                transform: translateX(-50%) scale(1);
                opacity: 1;
            }
        }

        @keyframes urlGlideUp {
            0% {
                top: 180px;
                transform: translateX(-50%) scale(0.8);
                opacity: 0;
            }

            8% {
                top: 165px;
                transform: translateX(-50%) scale(1);
                opacity: 1;
            }

            26% {
                top: 58px;
                transform: translateX(-50%) scale(0.96);
                opacity: 1;
            }

            34%,
            100% {
                top: 42px;
                transform: translateX(-50%) scale(0.35);
                opacity: 0;
            }
        }

        @keyframes cardiLogoStages {
            0%,
            32% {
                top: 182px;
                transform: translateX(-50%) scale(1);
                opacity: 1;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
            }

            44% {
                top: 104px;
                transform: translateX(-50%) scale(1.05);
            }

            50%,
            82% {
                top: 104px;
                transform: translateX(-50%) scale(1.26);
                opacity: 1;
                box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35), 0 0 0 2px rgba(37, 99, 235, 0.5);
            }

            92%,
            100% {
                top: 182px;
                transform: translateX(-50%) scale(1);
                opacity: 1;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
            }
        }

        /* KARTU 03 */
        @keyframes rippleWaves {
            0%,
            35% {
                transform: scale(0.2);
                opacity: 0;
            }

            38% {
                transform: scale(0.6);
                opacity: 1;
            }

            48% {
                transform: scale(2.6);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes phoneTapSequence {
            0%,
            20% {
                transform: translate(0px, 14px) rotate(-8deg);
            }

            28% {
                transform: translate(52px, 2px) rotate(5deg);
            }

            36% {
                transform: translate(114px, -12px) rotate(19deg);
            }

            38% {
                transform: translate(115px, -11px) rotate(19.5deg);
            }

            42%,
            72% {
                transform: translate(114px, -12px) rotate(19deg);
            }

            84% {
                transform: translate(35px, 6px) rotate(-2deg);
            }

            94%,
            100% {
                transform: translate(0px, 14px) rotate(-8deg);
            }
        }

        @keyframes plakatTapReaction {
            0%,
            35% {
                transform: rotate(0deg) scale(1) translateY(0);
            }

            37% {
                transform: rotate(1.8deg) scale(0.97) translateY(1.5px);
            }

            42% {
                transform: rotate(-0.8deg) scale(1.01) translateY(-0.5px);
            }

            48%,
            100% {
                transform: rotate(0deg) scale(1) translateY(0);
            }
        }

        @keyframes rippleWavesDelayed {
            0%,
            37% {
                transform: scale(0.2);
                opacity: 0;
            }

            40% {
                transform: scale(0.7);
                opacity: 0.85;
            }

            52% {
                transform: scale(3.2);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes contactSparkle {
            0%,
            35% {
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }

            38% {
                transform: scale(1.2) rotate(45deg);
                opacity: 1;
            }

            44% {
                transform: scale(1.6) rotate(90deg);
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes screenIdlePrompt {
            0%,
            28% {
                opacity: 1;
                transform: scale(1);
            }

            34%,
            76% {
                opacity: 0;
                transform: scale(0.85);
            }

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

        @keyframes modalBloomStars {
            0%,
            34% {
                opacity: 0;
                transform: scale(0.3) translateY(12px);
                pointer-events: none;
            }

            38% {
                opacity: 1;
                transform: scale(1.14) translateY(0);
            }

            44%,
            72% {
                opacity: 1;
                transform: scale(1) translateY(0);
            }

            78%,
            100% {
                opacity: 0;
                transform: scale(0.4) translateY(10px);
                pointer-events: none;
            }
        }

        /* Keyframe classes */
        .anim-track-1 {
            animation: dashedTrackFade1 var(--anim-duration) ease infinite;
        }

        .anim-card-01 {
            animation: cardDropMotion var(--anim-duration) var(--ease-smooth) infinite;
        }

        .anim-cart-01 {
            animation: cartMoveBounceImpact var(--anim-duration) var(--ease-smooth) infinite;
        }

        .anim-check-01 {
            animation: badgeChecklistPop var(--anim-duration) var(--ease-spring) infinite;
        }

        .anim-sparkle-01 {
            animation: sparkleBurst var(--anim-duration) ease infinite;
        }

        .anim-track-2 {
            animation: dashedTrackFade2 var(--anim-duration) ease infinite;
        }

        .anim-db-02 {
            animation: dbGlideStages var(--anim-duration) var(--ease-smooth) infinite;
        }

        .anim-url-02 {
            animation: urlGlideUp var(--anim-duration) var(--ease-smooth) infinite;
        }

        .anim-logo-02 {
            animation: cardiLogoStages var(--anim-duration) var(--ease-smooth) infinite;
        }

        .anim-ripple-03 {
            animation: rippleWaves var(--anim-duration) ease infinite;
        }

        .anim-ripple-03-delayed {
            animation: rippleWavesDelayed var(--anim-duration) ease infinite;
        }

        .anim-sparkle-03 {
            animation: contactSparkle var(--anim-duration) ease infinite;
        }

        .anim-plakat-03 {
            animation: plakatTapReaction var(--anim-duration) ease infinite;
        }

        .anim-phone-03 {
            animation: phoneTapSequence var(--anim-duration) var(--ease-smooth) infinite;
        }

        .anim-screen-idle {
            animation: screenIdlePrompt var(--anim-duration) ease infinite;
        }

        .anim-modal-03 {
            animation: modalBloomStars var(--anim-duration) var(--ease-spring) infinite;
        }

        /* Pause state */
        .animations-paused *,
        .animations-paused *::before,
        .animations-paused *::after {
            animation-play-state: paused !important;
        }

        /* Recent Sales Social Proof Popup */
        .recent-sales-popup {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
            transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.45s;
            transform: translateY(24px) scale(0.96);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            will-change: transform, opacity;
        }

        .recent-sales-popup.is-visible {
            transform: translateY(0) scale(1);
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* ========================================================
           Embedded Showcase Videos in #cara-kerja
           ======================================================== */
        #cara-kerja iframe {
            pointer-events: auto !important;
        }

        /* Hide scrollbar for mobile horizontal scroll snap */
        .scrollbar-none::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-none {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }