@layer prime {
:root {
    --bg: #ffffff;
    --bg-blue: #003a70;
    --blue: #00529c;
    --blue-bright: #0a6ed1;
    --text: #3f434d;
    --muted: #5a616c;
    --line: #e2e8f1;
    



    --r-tile: 10px; 
    --radius: 22px; 
    --radius-mid: 28px; 
    --radius-max: 999px; 
    --pad-card: 20px; 
    --max: 90%;

    



    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --gutter: clamp(24px, 6vw, 120px);
    --nav-offset: 70px;
    --section-padding: clamp(var(--space-7), 7vh, var(--space-9)) 0;
    --glass-grain-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
    --font: "DM Sans", system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}
body {
    font-family: var(--font);
    
    background: var(--bg);
    color: var(--text);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a {
    color: inherit;
    text-decoration: none;
}
.wrap {
    width: 100%;
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    min-width: 0;
}
section {
    position: relative;
    z-index: 1;
    
    background: var(--bg);
}



section:not(.pagesatu) {
    display: flex;
    align-items: center;
    margin: var(--space-3);
    padding: var(--section-padding);
    border-radius: 32px;
    corner-shape: superellipse(1.8);
    overflow: hidden;
}





.svc-inner,
.svc .ic,
.cara-faq,
.lang-dropdown {
    corner-shape: superellipse(1.8);
}

h2.title {
    

    font-size: clamp(21px, 2.4vw, 30px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: var(--space-5) 0 var(--space-4);
    max-width: 720px;
    color: var(--text);
}
.lead {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.75;
    max-width: 640px;
    font-weight: 400;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 600;
    font-size: 15px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-max);
    cursor: pointer;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
    border: 2px solid transparent;
}




.btn-primary,
.nav-cta .login,
.klc-search button {
    position: relative;
    z-index: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: none;
}
.btn-primary::before,
.nav-cta .login::before,
.klc-search button::before {
    content: "";
    position: absolute;
    inset: 5px;
    z-index: -1;
    border-radius: var(--radius-max);
    background: linear-gradient(180deg, var(--blue-bright), var(--blue));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
    transition: background 0.18s ease;
}
.btn-primary:hover::before,
.nav-cta .login:hover::before,
.klc-search button:hover::before {
    background: linear-gradient(180deg, var(--blue), var(--bg-blue));
}




header.nav {
    position: fixed;
    

    top: var(--space-3);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 50;
}
.nav-inner {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-offset);
    margin-top: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-max);
    corner-shape: superellipse(1.8);
    background: transparent;
    box-shadow: 0 0 0 rgba(16, 33, 58, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
    transition:
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.24s ease,
        box-shadow 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    corner-shape: inherit;
    background: rgba(255, 255, 255, 0.8);
    opacity: 0;
    transform: translate3d(0, -4px, 0) scale(0.992);
    transform-origin: top center;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition:
        opacity 0.24s ease,
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}
.nav-inner > * {
    position: relative;
    z-index: 1;
}
header.nav.scrolled .nav-inner {
    transform: translate3d(0, 12px, 0);
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 10px 34px rgba(16, 33, 58, 0.12);
}
header.nav.scrolled .nav-inner::before {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
.logo {
    display: flex;
    align-items: center;
    color: var(--text);
}
.logo img {
    height: 48px;
    width: auto;
    display: block;
}
.foot-brand .logo img {
    height: 60px;
}
nav.links {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.4vw, 20px);
}
nav.links a {
    position: relative;
    color: var(--muted);
    font-size: 15px;
    font-weight: 500;
    padding: 6px 8px;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        font-weight 0.15s ease;
}
nav.links a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 1px;
    border-radius: var(--radius-max);
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
    opacity: 0;
    transform: scaleX(0.45);
    transition:
        opacity 0.22s ease,
        transform 0.22s ease;
}
nav.links a:hover {
    color: var(--blue);
}
nav.links a:hover::after {
    opacity: 0.45;
    transform: scaleX(0.72);
}

nav.links a.active {
    color: var(--bg-blue);
    font-weight: 700;
}
nav.links a.active::after {
    opacity: 1;
    transform: scaleX(1);
}
.nav-cta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.nav-cta .login {
    font-weight: 600;
    font-size: 15px;
    padding: 9px 18px;
    border-radius: var(--radius-max);
}
.pagesatu {
    min-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
    background-color: var(--bg);
    background-image: url("asset/Demo-BG.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    


    margin: var(--space-3);
    border-radius: 32px;
    corner-shape: superellipse(1.8);
}




.pagesatu::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(0, 82, 156, 0.18) 0%,
            rgba(0, 82, 156, 0.075) 28%,
            transparent 58%
        ),
        radial-gradient(
            circle at 86% 22%,
            rgba(255, 198, 41, 0.14) 0%,
            rgba(255, 198, 41, 0.06) 24%,
            transparent 54%
        ),
        radial-gradient(
            circle at 76% 74%,
            rgba(10, 110, 209, 0.12) 0%,
            rgba(10, 110, 209, 0.05) 32%,
            transparent 62%
        ),
        rgba(255, 255, 255, 0.82);
}



.pagesatu::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.07;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
    background-size: 180px 180px;
}
.lang-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.pagesatu-lang {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--bg-blue);
    border: 1px solid rgba(255, 255, 255, 0.68);
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.64),
            rgba(247, 251, 255, 0.42)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
    padding: 5px 7px 5px 5px;
    border-radius: var(--radius-max);
    cursor: pointer;
    white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}
.pagesatu-lang:hover,
.pagesatu-lang:focus-visible {
    border-color: rgba(255, 255, 255, 0.86);
    color: var(--blue);
    outline: none;
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.76),
            rgba(247, 251, 255, 0.52)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
}
.pagesatu-lang:focus-visible {
    box-shadow:
        0 0 0 2px rgba(10, 110, 209, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.pagesatu-lang i {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.42);
    color: var(--blue);
    font-size: 10px;
    transition: transform 0.18s ease;
}
.lang-menu.open .pagesatu-lang i {
    transform: rotate(180deg);
}
.lang-code {
    min-width: 18px;
    text-align: center;
}
.lang-badge {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.72);
}
.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 80;
    min-width: 176px;
    padding: 7px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 18px;
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.82),
            rgba(247, 251, 255, 0.62)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity 0.16s ease,
        transform 0.16s ease,
        visibility 0.16s ease;
}
.lang-menu.open .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-option {
    appearance: none;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    padding: 9px;
    text-align: left;
    transition:
        background 0.16s ease,
        border-color 0.16s ease,
        color 0.16s ease;
}
.lang-option:hover,
.lang-option:focus-visible,
.lang-option.is-active {
    background: rgba(37, 99, 235, 0.11);
    border-color: rgba(37, 99, 235, 0.14);
    color: var(--blue);
    outline: none;
}
.lang-option.is-active::after {
    content: "\f00c";
    font-family: "FA Solid Subset";
    font-size: 12px;
    margin-left: auto;
}
.pagesatu-grid {
    flex: 1;
    display: grid;
    

    grid-template-columns: 0.9fr 0.85fr;
    align-items: center;
    gap: clamp(20px, 2.5vw, 36px);
    width: 100%;
    max-width: min(1280px, var(--max));
    margin: 0 auto;
    
    padding: calc(var(--nav-offset) + var(--space-6)) var(--gutter)
        var(--space-8);
    position: relative;
    z-index: 1;
}



.pagesatu-right {
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    position: relative;
    overflow: visible;
}
.hero-props {
    width: 100%;
    max-width: 520px;
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(240, 247, 255, 0.48)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        inset 0 -24px 52px rgba(0, 82, 156, 0.045),
        0 20px 40px rgba(0, 32, 96, 0.08),
        0 48px 90px rgba(0, 58, 112, 0.12);
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.3, 1) 0.5s both;
    position: relative;
    z-index: 2;
}
.hero-props::after {
    content: "";
    position: absolute;
    top: -36%;
    bottom: -36%;
    left: -52%;
    z-index: 1;
    width: 42%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 28%,
        rgba(255, 255, 255, 0.58) 50%,
        rgba(255, 255, 255, 0.12) 72%,
        transparent 100%
    );
    transform: translateX(-140%) rotate(14deg);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: ctaCardLightSweep 5.4s cubic-bezier(0.4, 0, 0.2, 1) 1.35s
        infinite;
}
.hero-props > * {
    position: relative;
    z-index: 2;
}
.hero-props .cara-switch.reveal {
    --reveal-delay: 720ms;
    transform: translateY(18px) scale(0.985);
    transition-duration: 0.72s;
}
.hero-props .cara-faq.reveal {
    --reveal-delay: 880ms;
    transform: translateY(22px) scale(0.985);
    transition-duration: 0.72s;
}
.hero-props .cara-switch.reveal.in,
.hero-props .cara-faq.reveal.in {
    transform: none;
}
.hero-props .cara-view.is-active > .cc-row,
.hero-props .cara-view.is-active > .faq-item {
    animation: ctaContentCascade 0.52s cubic-bezier(0.22, 1, 0.3, 1) both;
    animation-delay: calc(
        var(--cta-initial-delay, 0ms) + var(--cta-item-delay, 0ms)
    );
    will-change: opacity, transform, filter;
}
.hero-props:not(.cta-content-ready)
    .cara-view[data-view="contact"].is-active
    > .cc-row {
    --cta-initial-delay: 1040ms;
}
.hero-props .cara-view.is-active > :nth-child(1) {
    --cta-item-delay: 0ms;
}
.hero-props .cara-view.is-active > :nth-child(2) {
    --cta-item-delay: 80ms;
}
.hero-props .cara-view.is-active > :nth-child(3) {
    --cta-item-delay: 160ms;
}
@media (prefers-reduced-motion: reduce) {
    .hero-props,
    .hero-props::after,
    .hero-props .cara-switch.reveal,
    .hero-props .cara-faq.reveal,
    .hero-props .cara-view.is-active > .cc-row,
    .hero-props .cara-view.is-active > .faq-item {
        animation: none;
        transition-delay: 0ms;
        transition-duration: 0ms;
        transform: none;
        filter: none;
    }
}


@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(16px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes ctaContentCascade {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
        filter: blur(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}
@keyframes ctaCardLightSweep {
    0%,
    32% {
        opacity: 0;
        transform: translateX(-140%) rotate(14deg);
    }
    40% {
        opacity: 0.78;
    }
    58% {
        opacity: 0.18;
    }
    68%,
    100% {
        opacity: 0;
        transform: translateX(430%) rotate(14deg);
    }
}

.pagesatu-left .hero-logo-secondary {
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.3, 1) 0.05s both;
}
.pagesatu-left h1 {
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.3, 1) 0.23s both;
}
.pagesatu-left p {
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.3, 1) 0.59s both;
}
.pagesatu-left .btn-lg {
    animation: heroFadeUp 0.9s cubic-bezier(0.22, 1, 0.3, 1) 0.77s both;
}
@media (prefers-reduced-motion: reduce) {
    .pagesatu-left .hero-logo-secondary,
    .pagesatu-left h1,
    .pagesatu-left p,
    .pagesatu-left .btn-lg,
    .scroll-hint {
        animation: none;
    }
}

.pagesatu-left .hero-logo-secondary {
    height: 88px;
    width: auto;
    display: block;
    margin-bottom: var(--space-4);
}
.pagesatu-left h1 {
    font-size: clamp(32px, 4.2vw, 50px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--text);
    margin-bottom: var(--space-4);
    max-width: 640px;
}
.text-accent {
    color: var(--blue-bright);
    background: linear-gradient(
        135deg,
        var(--bg-blue) 0%,
        var(--blue) 52%,
        #2376dc 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.pagesatu-left p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--muted);
    max-width: 440px;
    margin-bottom: var(--space-4);
}

.pagesatu-left .btn-lg {
    margin-top: var(--space-3);
    padding: 16px 34px;
    font-size: 16px;
    overflow: hidden; 
}
.pagesatu-left .btn-lg i {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pagesatu-left .btn-lg:hover i {
    transform: translateX(5px);
}
.pagesatu-left .btn-lg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 90%
    );
    transform: translateX(-100%);
    pointer-events: none;
}
@keyframes btnSheen {
    0% {
        transform: translateX(-120%);
    }
    100% {
        transform: translateX(220%);
    }
}
.pagesatu-left .btn-lg.sheen::after {
    animation: btnSheen 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
    .pagesatu-left .btn-lg.sheen::after {
        animation: none;
    }
}

.scroll-hint {
    position: absolute;
    bottom: 22px;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 10px, 0);
    color: var(--muted);
    font-size: 13px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 2;
    pointer-events: none;
    will-change: opacity, transform;
    transition:
        opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.34s;
}
body.hero-hint-ready:not(.has-scrolled) .scroll-hint {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
    pointer-events: auto;
    transition:
        opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0s;
}
body.has-scrolled .scroll-hint {
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, 10px, 0);
    pointer-events: none;
    transition:
        opacity 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.34s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 0.34s;
}
.scroll-hint .chev {
    font-size: 20px;
    color: var(--blue);
    animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(5px);
    }
}


.svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    margin-top: var(--space-7);
}



.svc {
    position: relative;
    will-change: transform;
    transition:
        filter 0.3s ease,
        opacity 0.3s ease;
}
.svc-inner {
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(247, 251, 255, 0.5)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    gap: var(--space-5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 18px 40px rgba(20, 40, 120, 0.12);
    transition: box-shadow 0.22s ease;
}

@media (hover: hover) {
    .svc-grid:has(.svc:hover) .svc:not(:hover) {
        filter: blur(2px);
        opacity: 0.5;
        transition:
            filter 0.3s ease,
            opacity 0.3s ease;
    }
    .svc-grid:has(.svc:hover) .svc:hover {
        transition:
            filter 0.3s ease,
            opacity 0.3s ease;
    }
}
.svc:hover .svc-inner {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.84),
        0 24px 54px rgba(0, 82, 156, 0.16);
}
.svc .ic {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--r-tile);
    background: rgba(231, 240, 250, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.68);
    display: grid;
    place-items: center;
}
.svc .ic i {
    font-size: 22px;
    color: var(--blue);
    display: block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.svc:hover .ic i {
    transform: scale(1.35);
}
.svc:last-child:hover .ic {
    background: #fde8e8;
    transition: background 0.3s ease;
}
.svc:last-child:hover .ic i {
    color: #c94040;
}
.svc h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}
.svc p {
    color: var(--muted);
    font-size: 15px;
}
.svc p a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}




#pagelayanan {
    
    background: var(--blue);
    padding-block: clamp(var(--space-8), 10vh, var(--space-10))
        clamp(var(--space-9), 14vh, calc(var(--space-10) + var(--space-6)));
}






#pagelayanan::before,
.pageunit::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 300%;
    z-index: 0;
    pointer-events: none;
    background:
        var(--glass-grain-image),
        linear-gradient(
            180deg,
            var(--bg-blue) 0%,
            var(--blue-bright) 35%,
            var(--blue-bright) 65%,
            var(--blue) 100%
        );
    background-size:
        160px 160px,
        100% 100%;
    background-blend-mode: multiply, normal;
    transform: translate3d(0, -66.667%, 0);
    will-change: transform;
}
#pagelayanan.curtain-open::before {
    transform: translate3d(0, 0, 0);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.pageunit.curtain-top::before {
    transform: translate3d(0, 0, 0);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.pageunit.curtain-bottom::before {
    transform: translate3d(0, -66.667%, 0);
    transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#pagelayanan::after,
.pageunit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 -4px 12px rgba(0, 0, 0, 0.18);
}
@media (prefers-reduced-motion: reduce) {
    #pagelayanan.curtain-open::before,
    .pageunit.curtain-top::before,
    .pageunit.curtain-bottom::before {
        transition: none;
    }
}


#pagelayanan h2.title {
    color: #fff;
}

#pagelayanan > .wrap,
.pageunit > .wrap {
    position: relative;
    z-index: 1;
}
.merge-grid {
    display: grid;
    grid-template-columns: 1fr; 
    gap: var(--space-6);
    align-items: start;
    width: 100%;
}
.merge-col {
    min-width: 0;
}
.merge-layanan .title {
    margin-top: 0;
    text-align: center;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.merge-layanan .svc-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-top: var(--space-7);
    

    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.merge-layanan .svc {
    flex-direction: row;
}






@media (hover: hover) and (min-width: 901px) {
    .merge-layanan .svc-grid {
        
        grid-auto-rows: 96px;
    }
    .merge-layanan .svc-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        align-items: center; 
    }
    .merge-layanan .svc:hover {
        z-index: 5; 
    }
    .merge-layanan .svc-text {
        display: grid;
        grid-template-rows: auto 0fr;
        row-gap: 0;
        transition:
            grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1),
            row-gap 0.42s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .merge-layanan .svc h3 {
        margin-bottom: 0; 
    }
    .merge-layanan .svc p {
        min-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    .merge-layanan .svc:hover .svc-text,
    .merge-layanan .svc:focus-within .svc-text {
        grid-template-rows: auto 1fr;
        row-gap: 8px;
    }
    .merge-layanan .svc:hover p,
    .merge-layanan .svc:focus-within p {
        opacity: 1;
        transition-delay: 0.06s; 
    }
}
@media (prefers-reduced-motion: reduce) {
    .merge-layanan .svc-text,
    .merge-layanan .svc p {
        transition: none;
    }
}


.merge-cara {
    padding: var(--space-6);
    border-radius: var(--radius-mid);
    corner-shape: superellipse(1.8);
    overflow: hidden;
}
.cara-faq {
    background: rgba(255, 255, 255, 0.48);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 24px;
    corner-shape: superellipse(1.8);
    padding: 10px 30px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 14px 30px rgba(0, 58, 112, 0.08);
}
.faq-item {
    border-bottom: 1px solid rgba(20, 40, 120, 0.09);
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 24px 2px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    text-align: left;
    color: var(--bg-blue);
}
.faq-q {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}
.faq-num {
    flex-shrink: 0;
    width: 24px;
    color: var(--blue);
    display: grid;
    place-items: center;
}
.faq-num i {
    font-size: 19px;
}

.faq-plus {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-plus::before,
.faq-plus::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--blue);
    border-radius: 2px;
    transform: translate(-50%, -50%);
}
.faq-plus::before {
    width: 16px;
    height: 2px;
}
.faq-plus::after {
    width: 2px;
    height: 16px;
}
.faq-item.is-open .faq-plus {
    transform: rotate(45deg);
}
.faq-head:hover .faq-q,
.faq-head:focus-visible .faq-q {
    color: var(--blue);
}

.faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-panel-inner {
    padding: 0 2px 24px 46px;
}
.faq-panel-inner p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--muted);
}
.faq-panel-inner a {
    color: var(--blue);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}


.cara-switch {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin-bottom: var(--space-5);
    border-radius: var(--radius-max);
    background: rgba(255, 255, 255, 0.4);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.55);
}



.cara-thumb {
    position: absolute;
    top: 5px;
    bottom: 5px;
    left: 0;
    right: 0;
    z-index: 0;
    border-radius: var(--radius-max);
    background: linear-gradient(180deg, var(--blue-bright), var(--blue));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}
.cara-tab {
    position: relative;
    z-index: 1;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--bg-blue);
    padding: 9px 18px;
    border-radius: var(--radius-max);
    white-space: nowrap;
    transition: color 0.25s ease;
}
.cara-tab.is-active {
    color: #fff;
}
.cara-tab:not(.is-active):hover {
    color: var(--blue);
}


.cara-view {
    display: none;
}
.cara-view.is-active {
    display: block;
    animation: caraViewIn 0.34s cubic-bezier(0.22, 1, 0.3, 1) both;
}
@keyframes caraViewIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .cara-view.is-active {
        animation: none;
    }
}


.cc-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 2px;
    border-bottom: 1px solid rgba(20, 40, 120, 0.09);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    transition: color 0.15s ease;
}
.cc-row:last-child {
    border-bottom: none;
}
.cc-row:hover,
.cc-row:focus-visible {
    color: var(--blue);
}
.cc-row i {
    color: var(--blue);
    font-size: 19px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}
.cc-email {
    min-width: 0;
}
.cc-email span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.klc-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: var(--klc-content-width, 800px);
    margin: var(--space-6) auto var(--space-5);
    
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: var(--radius-max);
    corner-shape: superellipse(1.8);
    padding: 6px 6px 6px 20px;
    box-shadow: 0 12px 30px rgba(20, 40, 120, 0.08);
}
.klc-search:focus-within {
    border-color: var(--blue);
    box-shadow:
        0 0 0 3px rgba(0, 82, 156, 0.12),
        0 12px 30px rgba(20, 40, 120, 0.08);
}
.klc-search > i {
    color: var(--muted);
    font-size: 15px;
}
.klc-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: var(--font);
    font-size: 15px;
    color: var(--text);
    padding: 11px 0;
}

.klc-search button {
    flex-shrink: 0;
    cursor: pointer;
    font-family: var(--font);
    font-weight: 600;
    font-size: 14px;
    border-radius: var(--radius-max);
    padding: 11px 24px;
}
.klc-list {
    width: 100%;
    max-width: var(--klc-content-width, 800px);
    margin: 0 auto;
    display: grid;
    gap: 12px;
}
.klc-item {
    display: block;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(222, 230, 242, 0.95);
    border-radius: var(--radius);
    corner-shape: superellipse(1.8);
    color: var(--text);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.76),
        0 18px 40px rgba(20, 40, 120, 0.12);
}
.klc-item:hover {
    border-color: var(--blue);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 16px 36px rgba(16, 33, 58, 0.08);
    transform: translateY(-2px);
}
.klc-item.is-open {
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 18px 42px rgba(16, 33, 58, 0.09);
}
.klc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: var(--font);
    padding: var(--space-5);
    text-align: left;
}
.klc-head:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.18);
    outline-offset: -3px;
}
.klc-main {
    min-width: 0;
    display: grid;
    gap: 9px;
}
.klc-title {
    color: #2f3540;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}
.klc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.klc-chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(112, 124, 143, 0.22);
    border-radius: var(--radius-max);
    background: rgba(255, 255, 255, 0.92);
    color: #39424f; 
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 6px 9px;
}
.klc-chip.is-dept {
    border-color: rgba(37, 99, 235, 0.18);
    background: rgba(37, 99, 235, 0.12);
    color: #174a94;
}
.klc-toggle {
    color: var(--blue);
    flex: 0 0 auto;
    font-size: 13px;
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
.klc-item.is-open .klc-toggle {
    transform: rotate(180deg);
}
.klc-panel {
    display: none;
}
.klc-item.is-open .klc-panel {
    display: block;
}
.klc-panel-inner {
    background: #ffffff;
    border: 1px solid rgba(222, 230, 242, 0.85);
    border-radius: calc(var(--radius) - 6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    margin: 0 var(--space-4) var(--space-4);
    padding: var(--space-4);
}
.klc-excerpt {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}
.klc-open-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--blue);
    font-size: 14px;
    font-weight: 700;
    margin-top: var(--space-3);
}
.klc-open-link:hover {
    text-decoration: underline;
}
.klc-empty {
    text-align: center;
    color: var(--muted);
    font-size: 16px;
}
.klc-empty a {
    color: var(--blue);
    font-weight: 600;
}
.klc-empty a:hover {
    text-decoration: underline;
}
.klc-item i,
.klc-open-link i {
    color: var(--blue);
    flex-shrink: 0;
}

#pagekemenkeupedia {
    --klc-content-width: 800px;
    

    background: #f4f8fc;
    overflow: hidden;
}
#pagekemenkeupedia::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("asset/doodle.svg");
    background-repeat: repeat;
    background-size: 320px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
#pagekemenkeupedia .wrap {
    position: relative;
    z-index: 1;
}

#pagekemenkeupedia .title,
#pagekemenkeupedia .lead {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

#pagekemenkeupedia .klc-search,
#pagekemenkeupedia .klc-item {
    transition:
        opacity 0.6s cubic-bezier(0, 0, 0.2, 1),
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.pageunit {
    



    background: var(--blue);
    color: #fff;
    border-radius: 32px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.pageunit h2.title {
    color: #fff;
    margin-top: 0;
}


.unit-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}
.unit-head .title {
    margin: 0;
}
.unit-carousel {
    position: relative;
    min-width: 0;
    margin-top: var(--space-5);
}
.unit-track {
    display: flex;
    min-width: 0;
    align-items: flex-start; 
    gap: var(--space-5);
    overflow-x: auto;
    


    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    padding: var(--space-2) 2px var(--space-4);
    -ms-overflow-style: none;
    scrollbar-width: none;
    cursor: grab;
}
.unit-track.dragging {
    cursor: grabbing;
    scroll-behavior: auto;
    scroll-snap-type: none;
}
.unit-track::-webkit-scrollbar {
    display: none;
}



.unit-card-shell {
    position: relative;
    
    flex: 0 0 calc((100% - 3 * var(--space-5)) / 4);
    scroll-snap-align: start;
    border-radius: var(--radius);
    corner-shape: superellipse(1.8);
    -webkit-user-select: none;
    user-select: none;
    perspective: 1200px; 
}
.unit-card-shell:not(.open) .unit-card-back,
.unit-card-shell.open .unit-card-front {
    pointer-events: none;
}


.unit-flip {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.4, 1);
}
.unit-card-shell.open .unit-flip {
    transform: rotateY(180deg);
}

.unit-card-shell.reveal {
    transition:
        opacity 0.6s cubic-bezier(0, 0, 0.2, 1) var(--reveal-delay, 0ms),
        transform 0.6s cubic-bezier(0, 0, 0.2, 1) var(--reveal-delay, 0ms);
}



.unit-card-back .unit-more-desc,
.unit-card-back .unit-more-links {
    -webkit-user-select: text;
    user-select: text;
    cursor: auto;
}
.unit-more-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.unit-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    transition: color 0.15s ease;
}
.unit-more-link:hover {
    color: var(--blue-bright);
}
.unit-more-link i {
    font-size: 12px;
}


.unit-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(247, 251, 255, 0.5)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: var(--radius);
    corner-shape: superellipse(1.8);
    padding: var(--pad-card);
    cursor: pointer;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        background 0.22s ease,
        border-color 0.22s ease;
}
.unit-card:hover {
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.8),
            rgba(247, 251, 255, 0.58)
        );
    background-size:
        140px 140px,
        100% 100%;
    background-blend-mode: multiply, normal;
    border-color: rgba(255, 255, 255, 0.84);
}


.unit-card-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    overflow-y: auto;
    scrollbar-width: thin;
}
.unit-card-back .unit-more-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 12px;
}
.unit-card .ic {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    corner-shape: superellipse(1.8);
    background:
        var(--glass-grain-image),
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.72),
            rgba(224, 237, 252, 0.42)
        );
    background-size:
        110px 110px,
        100% 100%;
    background-blend-mode: multiply, normal;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    padding: 8px;
    overflow: hidden;
    position: relative;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        inset 0 -1px 0 rgba(10, 82, 156, 0.08);
}

.unit-card .ic::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        175deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0) 52%
    );
    pointer-events: none;
    z-index: 1;
}
.unit-card .ic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 0;
}
.unit-card .handle {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 6px;
}
.unit-card .name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
    margin: 0 0 6px;
}
.unit-card .addr {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.5;
}
.unit-card .more {
    appearance: none;
    border: none;
    background: none;
    padding: 0;
    margin-top: auto; 
    padding-top: 16px;
    align-self: flex-start;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}


.unit-card .more i {
    font-size: 11px;
    transform: rotate(-90deg); 
    transition: transform 0.25s ease;
}
.unit-card-back .more i {
    transform: rotate(90deg); 
}

.unit-card .more:hover,
.unit-card .more:focus-visible {
    color: var(--blue-bright);
}
.unit-card .more:hover i {
    transform: rotate(-90deg) scale(1.2);
}
.unit-card-back .more:hover i {
    transform: rotate(90deg) scale(1.2);
}
.unit-card .more:focus-visible {
    outline: 2px solid rgba(10, 110, 209, 0.75);
    outline-offset: 4px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .unit-track {
        scroll-behavior: auto;
    }
    .unit-flip {
        transition: none;
    }
}



.unit-pager {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px;
    flex-shrink: 0;
    border-radius: var(--radius-max);
    border: 1px solid transparent;
    transition:
        border-color 0.25s ease,
        background 0.25s ease;
}
.unit-pager:hover,
.unit-pager:focus-within {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}
.unit-nav {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-max);
    border: 1px solid rgba(255, 255, 255, 0.36);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.36),
            rgba(255, 255, 255, 0.16)
        );
    color: rgba(255, 255, 255, 0.92);
    font-size: 12px;
    cursor: pointer;
    display: grid;
    place-items: center;
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        0 6px 14px rgba(0, 20, 55, 0.12);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease,
        transform 0.18s ease;
}
.unit-nav i {
    filter: drop-shadow(0 1px 0 rgba(0, 20, 55, 0.12));
}
.unit-nav:hover {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.44),
            rgba(255, 255, 255, 0.2)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.58),
        0 8px 18px rgba(0, 20, 55, 0.14);
    transform: translateY(-0.5px);
}
.unit-nav:active {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.24),
            rgba(255, 255, 255, 0.14)
        );
    box-shadow:
        inset 0 2px 6px rgba(0, 20, 55, 0.14),
        0 3px 8px rgba(0, 20, 55, 0.1);
    transform: translateY(1px);
}
.unit-nav[disabled] {

    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}
.unit-nav:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: 2px;
}

.unit-progress {
    width: 0;
    height: 4px;
    border-radius: var(--radius-max);
    background: rgba(255, 255, 255, 0.18);
    overflow: hidden;
    opacity: 0;
    transition:
        width 0.32s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.2s ease;
}
.unit-pager:hover .unit-progress,
.unit-pager:focus-within .unit-progress {
    width: 104px;
    opacity: 1;
}

.unit-progress-fill {
    display: block;
    height: 100%;
    width: 100%;
    border-radius: var(--radius-max);
    background: rgba(255, 255, 255, 0.85);
    transition:
        width 0.2s ease,
        transform 0.2s ease;
}


.unit-track > :nth-child(1) {
    --reveal-delay: 0ms;
}
.unit-track > :nth-child(2) {
    --reveal-delay: 70ms;
}
.unit-track > :nth-child(3) {
    --reveal-delay: 140ms;
}
.unit-track > :nth-child(4) {
    --reveal-delay: 210ms;
}
.unit-track > :nth-child(n + 5) {
    --reveal-delay: 280ms;
}


footer {
    background: #fff;
    border-top: none;
    padding: var(--space-9) 0 var(--space-6);
    position: relative;
    z-index: 1;
}
.foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    column-gap: clamp(var(--space-7), 5vw, var(--space-8));
    row-gap: var(--space-6);
}
.foot-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.foot-brand p {
    color: var(--muted);
    font-size: 15px;
    max-width: 300px;
    margin-top: 16px;
}
.foot-social {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 18px;
}
.foot-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line);
    color: var(--muted);
    transition:
        color 0.15s,
        border-color 0.15s,
        background 0.15s;
}
.foot-social-link i {
    font-size: 17px;
}
.foot-social-link:hover {
    color: #fff;
    background: var(--blue);
    border-color: var(--blue);
}
.foot-col h4 {
    font-size: 14px;
    letter-spacing: 0.03em;
    margin-bottom: 15px;
    color: var(--text);
    font-weight: 700;
}
.foot-col a,
.foot-col span {
    display: block;
    color: var(--muted);
    font-size: 15px;
    margin-bottom: 10px;
    transition: color 0.15s;
}
.foot-col a:hover {
    color: var(--blue);
}

.foot-col .foot-email-short {
    display: none;
}
.foot-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
    flex-wrap: wrap;
    gap: var(--space-2);
}


.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.6s cubic-bezier(0, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0, 0, 0.2, 1);
    transition-delay: var(--reveal-delay, 0ms);
}
.reveal.in {
    opacity: 1;
    transform: none;
}


.svc-grid > :nth-child(1) {
    --reveal-delay: 0ms;
}
.svc-grid > :nth-child(2) {
    --reveal-delay: 90ms;
}
.svc-grid > :nth-child(3) {
    --reveal-delay: 180ms;
}
.svc-grid > :nth-child(4) {
    --reveal-delay: 260ms;
}

.wa-fab {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 45;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #25d366; 
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 30px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}
.wa-fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #25d366;
    z-index: -1;
    animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
    0% {
        transform: scale(1);
        opacity: 0.55;
    }
    70%,
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.wa-fab:hover {
    transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
    .wa-fab::before {
        animation: none;
    }
}


@media (max-width: 1200px) {
    .foot-col .foot-email-full {
        display: none;
    }
    .foot-col .foot-email-short {
        display: inline;
    }
}


@media (max-width: 900px) {
    body > section:not(.pagesatu),
    footer,
    .wa-fab,
    header.nav,
    .pagesatu-right {
        display: none;
    }
    .pagesatu {
        min-height: calc(100dvh - (var(--space-3) * 2));
    }
    .pagesatu-grid {
        grid-template-columns: 1fr;
        padding-top: var(--space-6);
        padding-bottom: var(--space-6);
        gap: 0;
    }
    .pagesatu-left .hero-logo-secondary {
        height: 64px;
        margin-bottom: var(--space-4);
    }
    .pagesatu-left h1 {
        font-size: clamp(26px, 7vw, 40px);
        margin-bottom: var(--space-3);
    }
    .pagesatu-left p {
        font-size: 15px;
        margin-bottom: var(--space-3);
    }
    .pagesatu-left .btn-lg {
        padding: 13px 26px;
        font-size: 14px;
    }
    .scroll-hint {
        display: none;
    }
}
}