body.page-hubungi {
            --contact-bg-start: var(--ivory, #fffdf8);
            --contact-bg-end: var(--linen, #f5efe3);
            --contact-bg-spot: color-mix(in srgb, var(--brass, #c7a977) 28%, transparent);
            --contact-panel-bg: color-mix(in srgb, var(--ivory, #fffdf8) 92%, #ffffff 8%);
            --contact-panel-border: color-mix(in srgb, var(--brass, #c7a977) 28%, transparent);
            --contact-shadow: 0 22px 56px rgba(28, 31, 38, .12);
            --contact-text: var(--espresso, #273a54);
            --contact-muted: color-mix(in srgb, var(--mocha, #5f6f87) 86%, #6a7284 14%);
            --contact-label: color-mix(in srgb, var(--brass, #c7a977) 62%, var(--espresso, #273a54) 38%);
            --contact-input-bg: #ffffff;
            --contact-input-border: color-mix(in srgb, var(--brass, #c7a977) 22%, #acb6c9 78%);
            --contact-focus: color-mix(in srgb, var(--brass, #c7a977) 62%, #7db9ff 38%);
            --contact-tag: color-mix(in srgb, var(--brass, #c7a977) 68%, var(--espresso, #273a54) 32%);
            --contact-em: color-mix(in srgb, var(--brass-lt, #77a9dc) 72%, var(--brass, #c7a977) 28%);
            --contact-cta-bg: linear-gradient(130deg, color-mix(in srgb, var(--charcoal, #151d28) 88%, #173b69 12%) 0%, color-mix(in srgb, var(--espresso, #273a54) 82%, #4e8fd5 18%) 100%);
            --contact-cta-text: color-mix(in srgb, var(--brass-lt, #9bc4eb) 45%, #ffffff 55%);
            --contact-cta-border: color-mix(in srgb, var(--brass-lt, #9bc4eb) 32%, transparent);
            --contact-note-bg: color-mix(in srgb, var(--ivory, #fffdf8) 86%, #ffffff 14%);
            --contact-note-border: color-mix(in srgb, var(--brass, #c7a977) 22%, transparent);
            --contact-note-text: color-mix(in srgb, var(--espresso, #273a54) 84%, #69758a 16%);
        }

        body.theme-homepage-digital.page-hubungi,
        body.theme-homepage-bold.page-hubungi {
            --contact-bg-start: #081627;
            --contact-bg-end: #0f243a;
            --contact-bg-spot: rgba(92, 166, 244, .2);
            --contact-panel-bg: linear-gradient(150deg, rgba(14, 31, 51, .95) 0%, rgba(15, 35, 57, .9) 100%);
            --contact-panel-border: rgba(123, 171, 224, .28);
            --contact-shadow: 0 28px 72px rgba(3, 12, 24, .42);
            --contact-text: rgba(236, 245, 255, .95);
            --contact-muted: rgba(188, 205, 226, .9);
            --contact-label: rgba(144, 194, 248, .95);
            --contact-input-bg: rgba(8, 22, 37, .62);
            --contact-input-border: rgba(125, 178, 236, .3);
            --contact-focus: rgba(129, 190, 255, .92);
            --contact-tag: rgba(124, 191, 255, .92);
            --contact-em: rgba(123, 190, 255, .98);
            --contact-cta-bg: linear-gradient(135deg, #63a4e8 0%, #4d8fd5 100%);
            --contact-cta-text: #0b1d31;
            --contact-cta-border: rgba(128, 192, 255, .7);
            --contact-note-bg: rgba(8, 20, 34, .45);
            --contact-note-border: rgba(122, 178, 239, .26);
            --contact-note-text: rgba(206, 223, 243, .95);
        }

        body.theme-homepage-craft.page-hubungi {
            --contact-bg-start: #221711;
            --contact-bg-end: #2d1f17;
            --contact-bg-spot: rgba(240, 195, 134, .18);
            --contact-panel-bg: linear-gradient(150deg, rgba(36, 25, 20, .96) 0%, rgba(46, 31, 22, .92) 100%);
            --contact-panel-border: rgba(240, 195, 134, .22);
            --contact-shadow: 0 28px 72px rgba(15, 8, 4, .42);
            --contact-text: rgba(254, 251, 248, .95);
            --contact-muted: rgba(220, 200, 180, .88);
            --contact-label: rgba(240, 195, 134, .95);
            --contact-input-bg: rgba(22, 14, 9, .55);
            --contact-input-border: rgba(240, 195, 134, .28);
            --contact-focus: rgba(240, 195, 134, .88);
            --contact-tag: rgba(240, 195, 134, .92);
            --contact-em: rgba(243, 212, 169, .98);
            --contact-cta-bg: linear-gradient(135deg, #f0c386 0%, #e8b070 100%);
            --contact-cta-text: #2d1f17;
            --contact-cta-border: rgba(240, 195, 134, .7);
            --contact-note-bg: rgba(15, 8, 4, .38);
            --contact-note-border: rgba(240, 195, 134, .2);
            --contact-note-text: rgba(220, 200, 180, .92);
        }

        body.theme-homepage-linen.page-hubungi {
            --contact-bg-start: #fffdf8;
            --contact-bg-end: #f1e5d5;
            --contact-bg-spot: rgba(184, 112, 90, .18);
            --contact-panel-bg: linear-gradient(160deg, rgba(255, 252, 248, .98) 0%, rgba(250, 244, 236, .96) 100%);
            --contact-panel-border: rgba(184, 112, 90, .24);
            --contact-shadow: 0 22px 56px rgba(41, 31, 25, .16);
            --contact-text: #2f2520;
            --contact-muted: rgba(76, 58, 49, .86);
            --contact-label: rgba(160, 98, 78, .96);
            --contact-input-bg: #fffdfa;
            --contact-input-border: rgba(188, 137, 117, .34);
            --contact-focus: rgba(184, 112, 90, .86);
            --contact-tag: rgba(168, 101, 80, .94);
            --contact-em: rgba(184, 112, 90, .98);
            --contact-cta-bg: linear-gradient(135deg, #9d5f4a 0%, #b8705a 100%);
            --contact-cta-text: #fffaf5;
            --contact-cta-border: rgba(157, 95, 74, .6);
            --contact-note-bg: rgba(184, 112, 90, .08);
            --contact-note-border: rgba(184, 112, 90, .22);
            --contact-note-text: rgba(70, 51, 43, .9);
        }

        body.theme-homepage-craft.page-hubungi .contact-form input,
        body.theme-homepage-craft.page-hubungi .contact-form textarea {
            color: rgba(254, 251, 248, .92);
        }

        body.theme-homepage-craft.page-hubungi .contact-form input::placeholder,
        body.theme-homepage-craft.page-hubungi .contact-form textarea::placeholder {
            color: rgba(220, 200, 175, .55);
        }

        body.theme-homepage-linen.page-hubungi .contact-form input,
        body.theme-homepage-linen.page-hubungi .contact-form textarea {
            color: #2f2520;
        }

        body.theme-homepage-linen.page-hubungi .contact-form input::placeholder,
        body.theme-homepage-linen.page-hubungi .contact-form textarea::placeholder {
            color: rgba(99, 78, 67, .64);
        }

        body.theme-homepage-linen.page-hubungi .contact-submit-status,
        body.theme-homepage-linen.page-hubungi .contact-muted {
            color: rgba(76, 58, 49, .9);
        }

        body.page-hubungi .wa-fab,
        body.page-hubungi .back-top,
        body.page-hubungi .wa-sticky-cta,
        body.page-hubungi .wa-lead-modal {
            display: none !important;
        }

        .contact-page {
            min-height: 100vh;
            padding: 7rem 1.5rem 4rem;
            background:
                radial-gradient(circle at 10% 6%, var(--contact-bg-spot), transparent 36%),
                linear-gradient(180deg, var(--contact-bg-start) 0%, var(--contact-bg-end) 100%);
        }

        .contact-shell {
            max-width: 1080px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: .95fr 1.05fr;
            gap: 1.5rem;
            align-items: stretch;
        }

        .contact-panel {
            border-radius: 28px;
            background: var(--contact-panel-bg);
            box-shadow: var(--contact-shadow);
            overflow: hidden;
            border: 1px solid var(--contact-panel-border);
            transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
        }

        .contact-intro,
        .contact-form-wrap {
            padding: 2rem;
            color: var(--contact-text);
            animation: contactFadeUp .52s ease both;
        }

        .contact-form-wrap {
            animation-delay: .06s;
        }

        .contact-intro {
            background:
                radial-gradient(circle at 92% -8%, color-mix(in srgb, var(--contact-bg-spot) 88%, transparent), transparent 46%),
                var(--contact-panel-bg);
        }

        .contact-intro .section-tag {
            color: var(--contact-tag) !important;
        }

        .contact-intro .section-tag::before {
            background: var(--contact-tag) !important;
        }

        .contact-intro h1 {
            margin: .72rem 0 1rem;
            font-family: var(--font-display);
            font-size: clamp(2.15rem, 4.85vw, 4rem);
            line-height: .94;
            color: var(--contact-text);
            letter-spacing: -.02em;
        }

        .contact-intro h1 em {
            color: var(--contact-em);
            text-shadow: 0 10px 24px color-mix(in srgb, var(--contact-em) 28%, transparent);
        }

        .contact-intro p {
            color: var(--contact-muted);
            line-height: 1.72;
        }

        .contact-status {
            margin-top: 1.5rem;
            padding: 1rem 1.05rem;
            border-radius: 16px;
            background: var(--contact-note-bg);
            border: 1px solid var(--contact-note-border);
            color: var(--contact-note-text);
            font-size: .92rem;
            line-height: 1.5;
        }

        .contact-form {
            display: grid;
            gap: 1rem;
        }

        .contact-form label {
            display: grid;
            gap: .42rem;
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase;
            color: var(--contact-label);
            transition: color .2s ease;
        }

        .contact-form label:focus-within {
            color: var(--contact-focus);
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            border: 1px solid var(--contact-input-border);
            border-radius: 14px;
            padding: .9rem 1rem;
            background: var(--contact-input-bg);
            color: var(--contact-text);
            font: inherit;
            letter-spacing: 0;
            text-transform: none;
            transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
        }

        .contact-form input::placeholder,
        .contact-form textarea::placeholder {
            color: color-mix(in srgb, var(--contact-muted) 70%, transparent);
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: var(--contact-focus);
            box-shadow: 0 0 0 3px color-mix(in srgb, var(--contact-focus) 28%, transparent);
        }

        .contact-form input:hover,
        .contact-form textarea:hover {
            border-color: color-mix(in srgb, var(--contact-focus) 42%, transparent);
        }

        .contact-form textarea {
            min-height: 150px;
            resize: vertical;
        }

        .contact-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        .contact-submit,
        .contact-wa {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            border-radius: 999px;
            padding: .95rem 1.2rem;
            font-weight: 900;
            text-decoration: none;
            cursor: pointer;
            transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
        }

        .contact-submit {
            position: relative;
            overflow: hidden;
            border: 1px solid var(--contact-cta-border);
            background: var(--contact-cta-bg);
            color: var(--contact-cta-text);
            box-shadow: 0 14px 30px color-mix(in srgb, var(--contact-focus) 26%, transparent);
        }

        .contact-submit::after {
            content: "";
            position: absolute;
            inset: -40% auto -40% -32%;
            width: 28%;
            background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.36) 50%, transparent 100%);
            transform: translateX(-220%) rotate(12deg);
            transition: transform .7s ease;
            pointer-events: none;
        }

        .contact-submit:hover {
            transform: translateY(-1px);
            border-color: color-mix(in srgb, var(--contact-focus) 58%, transparent);
            box-shadow: 0 17px 33px color-mix(in srgb, var(--contact-focus) 36%, transparent);
        }

        .contact-submit:hover::after {
            transform: translateX(560%) rotate(12deg);
        }

        .contact-wa {
            background: #1f8f4d;
            color: #f5fffa;
            margin-top: .8rem;
        }

        .contact-wa:hover {
            transform: translateY(-1px);
            box-shadow: 0 12px 24px rgba(19, 118, 62, .28);
        }

        .contact-submit[disabled] {
            opacity: .7;
            cursor: wait;
            transform: none;
        }

        .contact-submit-spinner {
            display: none;
            width: 16px;
            height: 16px;
            border: 2px solid color-mix(in srgb, var(--contact-cta-text) 36%, transparent);
            border-top-color: var(--contact-cta-text);
            border-radius: 50%;
            animation: contactSpin .8s linear infinite;
        }

        .contact-form.is-submitting .contact-submit-spinner {
            display: inline-block;
        }

        .contact-form.is-submitting .contact-submit-text {
            opacity: .95;
        }

        .contact-submit-status {
            margin-top: .45rem;
            font-size: .82rem;
            color: var(--contact-muted);
        }

        @keyframes contactSpin {
            to { transform: rotate(360deg); }
        }

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

        .contact-alert {
            padding: 1rem;
            border-radius: 18px;
            margin-bottom: 1rem;
            line-height: 1.6;
            border: 1px solid transparent;
        }

        .contact-alert.error {
            background: color-mix(in srgb, #c0392b 10%, #ffffff 90%);
            border-color: color-mix(in srgb, #c0392b 25%, transparent);
            color: #a12e22;
        }

        .contact-alert.success {
            background: color-mix(in srgb, #2e9f5b 10%, #ffffff 90%);
            border-color: color-mix(in srgb, #2e9f5b 25%, transparent);
            color: #1f6b36;
        }

        .contact-muted {
            color: var(--contact-muted);
            font-size: .9rem;
            line-height: 1.6;
        }

        @media (hover: hover) {
            .contact-panel:hover {
                transform: translateY(-4px);
                box-shadow: 0 30px 74px color-mix(in srgb, var(--contact-focus) 16%, rgba(4, 9, 16, .45));
                border-color: color-mix(in srgb, var(--contact-focus) 40%, var(--contact-panel-border) 60%);
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .contact-panel,
            .contact-intro,
            .contact-form-wrap,
            .contact-submit,
            .contact-submit::after {
                animation: none !important;
                transition: none !important;
                transform: none !important;
            }
        }

        @media (max-width: 980px) {
            .contact-shell {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 820px) {
            .contact-row {
                grid-template-columns: 1fr;
            }

            .contact-page {
                padding-top: 5.5rem;
            }
        }