.kepala-navigasi-layanan {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 48px;
    background-color: var(--warna-terang);
    z-index: 1000;
    border-bottom: 1px solid var(--warna-gelap);
}

.kepala-navigasi-layanan .item-menu,
.kepala-navigasi-layanan .tombol-dropdown {
    color: var(--warna-gelap);
}

.item-dropdown.aktif {
    color: var(--warna-accent);
}

.bagian-typografi {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 220px 48px 180px;
    position: relative;
    overflow: hidden;
}

.huruf-latar-typo {
    position: absolute;
    top: 44%;
    left: 14%;
    transform: translate(-50%, -50%);
    font-family: var(--font-judul);
    font-weight: 900;
    font-size: clamp(300px, 40vw, 620px);
    line-height: 0.8;
    color: var(--warna-gelap);
    opacity: 0.045;
    pointer-events: none;
    user-select: none;
}

.judul-ledakan {
    position: relative;
    z-index: 10;
    max-width: 1080px;
    margin: 0 auto;
    text-align: center;
    font-size: clamp(34px, 5.4vw, 88px);
    line-height: 1.06;
    letter-spacing: -0.03em;
    color: var(--warna-gelap);
}

.kata-ledak {
    display: inline-block;
    margin: 0 0.16em 0.08em 0;
}

.kata-ledak.sorot {
    color: var(--warna-accent);
}

.js-siap .kata-ledak {
    opacity: 0;
    transform: translate(var(--x, 0px), var(--y, 0px)) rotate(var(--r, 0deg)) scale(var(--s, 1));
    will-change: transform, opacity;
}

.js-siap .kata-ledak.duduk {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
    transition: transform 1s cubic-bezier(0.16, 0.86, 0.28, 1), opacity 0.55s ease;
}

.js-siap .kata-ledak.rampung {
    will-change: auto;
}

.kepala-statis {
    position: sticky;
    top: 0;
    background-color: var(--warna-terang);
    padding: 24px 48px;
    border-bottom: 3px solid var(--warna-gelap);
    z-index: 100;
}

.wadah-judul-layanan {
    display: flex;
    align-items: center;
    gap: 24px;
}

.huruf-besar {
    font-family: var(--font-judul);
    font-weight: 900;
    font-size: 72px;
    color: var(--warna-accent);
    line-height: 1;
}

.wadah-judul-layanan h2 {
    font-size: clamp(24px, 3vw, 40px);
    color: var(--warna-gelap);
}

.bagian-proses {
    padding: 120px 48px;
    overflow-x: clip;
}

.wadah-alur {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

.blok-gambar, .blok-teks {
    grid-column: span 6;
}

.blok-gambar.besar {
    grid-column: span 8;
    grid-row: span 2;
}

.blok-gambar.sedang {
    grid-column: span 4;
}

.blok-gambar.lebar {
    grid-column: span 12;
}

.blok-gambar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--warna-gelap);
}

.blok-teks {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
    border: 1px solid var(--warna-gelap);
    background-color: var(--warna-terang);
}

.blok-teks h3 {
    font-size: 28px;
    margin-bottom: 16px;
    color: var(--warna-gelap);
}

.blok-teks p {
    font-family: var(--font-tubuh);
    font-size: 16px;
    line-height: 1.8;
    color: var(--warna-gelap);
}

.bagian-platform {
    padding: 120px 48px;
    background-color: var(--warna-gelap);
    display: flex;
    justify-content: center;
    align-items: center;
}

.wadah-lingkaran {
    position: relative;
    width: 500px;
    height: 500px;
}

.bentuk-tengah {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    border: 3px solid var(--warna-accent);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.label-platform {
    position: absolute;
    font-family: var(--font-judul);
    font-weight: 700;
    font-size: 14px;
    color: var(--warna-terang);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.posisi-1 { top: 10%; left: 50%; transform: translateX(-50%); }
.posisi-2 { top: 25%; right: 10%; }
.posisi-3 { bottom: 25%; right: 10%; }
.posisi-4 { bottom: 10%; left: 50%; transform: translateX(-50%); }
.posisi-5 { bottom: 25%; left: 10%; }
.posisi-6 { top: 25%; left: 10%; }

.bagian-cta-layanan {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 50vh;
}

.wadah-belah-kiri {
    background-color: var(--warna-terang);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px;
    border-right: 3px solid var(--warna-gelap);
}

.wadah-belah-kiri h2 {
    font-size: clamp(48px, 8vw, 96px);
    color: var(--warna-gelap);
}

.wadah-belah-kanan {
    background-color: var(--warna-gelap);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 48px;
}

.tautan-ke-kontak {
    font-family: var(--font-judul);
    font-weight: 700;
    font-size: clamp(24px, 4vw, 40px);
    color: var(--warna-terang);
    transition: color 0.3s ease;
}

.tautan-ke-kontak:hover {
    color: var(--warna-accent);
}

.kaki-layanan-sederhana {
    background-color: var(--warna-terang);
    padding: 32px 48px;
    border-top: 1px solid var(--warna-gelap);
}

.kaki-layanan-sederhana .wadah-kaki {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.teks-kaki {
    font-family: var(--font-tubuh);
    font-size: 14px;
    color: var(--warna-gelap);
}

.wadah-link-kaki {
    display: flex;
    gap: 24px;
}

.link-kaki {
    font-family: var(--font-tubuh);
    font-size: 14px;
    color: var(--warna-gelap);
    transition: color 0.3s ease;
}

.link-kaki:hover {
    color: var(--warna-accent);
}

.wadah-sosial-kaki {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.link-sosial-kaki {
    font-family: var(--font-tubuh);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--warna-gelap);
    border-bottom: 1px solid var(--warna-gelap);
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.link-sosial-kaki:hover {
    color: var(--warna-accent);
    border-color: var(--warna-accent);
}

.js-siap .blok-gambar,
.js-siap .blok-teks {
    opacity: 0;
    transform: translateX(var(--masuk-dari, 0px));
}

.js-siap .blok-gambar.nongol,
.js-siap .blok-teks.nongol {
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.9s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.7s ease;
}

.wadah-lingkaran {
    animation: puter-lingkaran 44s linear infinite;
}

.wadah-lingkaran.rehat,
.wadah-lingkaran.rehat .bentuk-tengah,
.wadah-lingkaran.rehat .label-platform {
    animation-play-state: paused;
}

@keyframes puter-lingkaran {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bentuk-tengah {
    animation: puter-balik 44s linear infinite;
}

@keyframes puter-balik {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(-360deg); }
}

.label-platform {
    animation: puter-balik-label 44s linear infinite;
}

@keyframes puter-balik-label {
    from { rotate: 0deg; }
    to { rotate: -360deg; }
}

.js-siap .label-platform {
    opacity: 0;
}

.js-siap .label-platform.nongol {
    opacity: 1;
    transition: opacity 0.6s ease;
}

.js-siap .wadah-belah-kiri h2,
.js-siap .tautan-ke-kontak {
    opacity: 0;
    transform: translateY(24px);
}

.js-siap .wadah-belah-kiri h2.nongol,
.js-siap .tautan-ke-kontak.nongol {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .js-siap .kata-ledak,
    .js-siap .blok-gambar,
    .js-siap .blok-teks,
    .js-siap .label-platform,
    .js-siap .wadah-belah-kiri h2,
    .js-siap .tautan-ke-kontak {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .wadah-lingkaran,
    .bentuk-tengah,
    .label-platform {
        animation: none;
    }
}

@media (max-width: 1024px) {
    .wadah-alur {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .blok-gambar.besar,
    .blok-gambar.sedang,
    .blok-gambar.lebar,
    .blok-teks {
        grid-column: span 6;
    }
}

@media (max-width: 768px) {
    .kepala-navigasi-layanan {
        padding: 16px 24px;
    }

    .bagian-proses {
        padding: 80px 24px;
    }

    .bagian-platform {
        padding: 80px 24px;
    }

    .blok-teks {
        padding: 24px;
    }

    .blok-teks h3 {
        font-size: 24px;
    }

    .wadah-alur {
        gap: 16px;
    }
    
    .bagian-typografi {
        padding: 150px 24px 110px;
    }
    
    .wadah-lingkaran {
        width: min(350px, 82vw);
        height: min(350px, 82vw);
    }
    
    .bentuk-tengah {
        width: 100px;
        height: 100px;
    }
    
    .bagian-cta-layanan {
        grid-template-columns: minmax(0, 1fr);
    }
    
    .wadah-belah-kiri,
    .wadah-belah-kanan {
        padding: 36px 24px;
    }
    
    .wadah-belah-kiri {
        border-right: none;
        border-bottom: 3px solid var(--warna-gelap);
    }
}

@media (max-width: 768px) {
    .huruf-latar-typo {
        font-size: clamp(240px, 92vw, 420px);
        opacity: 0.06;
    }

    .kaki-layanan-sederhana .wadah-kaki {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .wadah-link-kaki {
        flex-wrap: wrap;
    }

    .label-platform {
        font-size: 12px;
    }
}