/* =============================================================================
   AndreDEV — Apple-style UI
   - .anav / .afoot  : navbar & footer global (semua halaman landing)
   - body.apple-ui   : halaman yang memakai gaya Apple penuh (home)
   ============================================================================= */

:root {
    --a-text: #1d1d1f;
    --a-text-2: #6e6e73;
    --a-text-3: #86868b;
    --a-bg: #ffffff;
    --a-bg-alt: #f5f5f7;
    --a-line: #d2d2d7;
    --a-blue: #0071e3;
    --a-blue-hover: #0077ed;
    --a-link: #0066cc;
    --a-dark: #000000;
    --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --a-wrap: 1024px;
    --a-wrap-lg: 1260px;
    --a-ease: cubic-bezier(.28, .11, .32, 1);
    --a-spring: cubic-bezier(.32, 1.25, .5, 1);

    /* Permukaan & komponen */
    --a-card: #ffffff;
    --a-shadow: rgba(0, 0, 0, .08);
    --a-nav-bg: rgba(250, 250, 252, .8);
    --a-nav-bg-solid: rgba(250, 250, 252, .98);
    --a-menu-bg: #fafafc;
    --a-nav-line: rgba(0, 0, 0, .06);
    --a-nav-text: rgba(0, 0, 0, .8);
    --a-nav-text-strong: #000000;
    --a-nav-text-dim: rgba(0, 0, 0, .56);
    --a-hover: rgba(0, 0, 0, .05);
    --a-backdrop: rgba(232, 232, 237, .4);
    --a-pill: rgba(232, 232, 237, .72);
    --a-pill-hover: rgba(210, 210, 215, .9);
    --a-dot: rgba(0, 0, 0, .42);
    --a-dot-hover: rgba(0, 0, 0, .6);
    --a-dot-track: rgba(0, 0, 0, .18);
    --a-dot-fill: #1d1d1f;
    --a-hl-off: #d2d2d7;
    --a-stat-from: #1d1d1f;
    --a-stat-to: #6e6e73;
    --a-cta-bg: #000000;
    --a-logo-filter: grayscale(1);
    --a-glass: rgba(250, 250, 252, .82);
    --a-glass-line: rgba(255, 255, 255, .7);
    --a-modal-shadow: 0 30px 80px rgba(0, 0, 0, .22), 0 0 0 1px rgba(0, 0, 0, .04);
    --a-modal-backdrop: rgba(0, 0, 0, .22);
    --a-chip: rgba(255, 255, 255, .85);
    --a-chip-line: rgba(0, 0, 0, .08);
    --a-chip-active: rgba(0, 113, 227, .1);
    --a-kbd: rgba(255, 255, 255, .9);
}

/* Mode gelap ala Apple */
:root[data-theme="dark"] {
    --a-text: #f5f5f7;
    --a-text-2: #a1a1a6;
    --a-text-3: #86868b;
    --a-bg: #000000;
    --a-bg-alt: #161617;
    --a-line: #424245;
    --a-link: #2997ff;

    --a-card: #1d1d1f;
    --a-shadow: rgba(0, 0, 0, .6);
    --a-nav-bg: rgba(22, 22, 23, .8);
    --a-nav-bg-solid: rgba(22, 22, 23, .98);
    --a-menu-bg: #161617;
    --a-nav-line: rgba(255, 255, 255, .08);
    --a-nav-text: rgba(255, 255, 255, .8);
    --a-nav-text-strong: #ffffff;
    --a-nav-text-dim: rgba(255, 255, 255, .48);
    --a-hover: rgba(255, 255, 255, .08);
    --a-backdrop: rgba(0, 0, 0, .4);
    --a-pill: rgba(66, 66, 69, .72);
    --a-pill-hover: rgba(86, 86, 90, .9);
    --a-dot: rgba(255, 255, 255, .5);
    --a-dot-hover: rgba(255, 255, 255, .7);
    --a-dot-track: rgba(255, 255, 255, .2);
    --a-dot-fill: #f5f5f7;
    --a-hl-off: #424245;
    --a-stat-from: #f5f5f7;
    --a-stat-to: #86868b;
    --a-cta-bg: #1d1d1f;
    --a-logo-filter: brightness(0) invert(1);
    --a-glass: rgba(29, 29, 31, .82);
    --a-glass-line: rgba(255, 255, 255, .1);
    --a-modal-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06);
    --a-modal-backdrop: rgba(0, 0, 0, .5);
    --a-chip: rgba(255, 255, 255, .06);
    --a-chip-line: rgba(255, 255, 255, .1);
    --a-chip-active: rgba(41, 151, 255, .18);
    --a-kbd: rgba(255, 255, 255, .08);
}

/* Kontrol bawaan browser ikut gelap hanya di halaman bergaya Apple */
:root[data-theme="dark"]:has(body.apple-ui) {
    color-scheme: dark;
}

/* Animasi pindah mode: lingkaran yang membesar (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}

/* Ruang scrollbar selalu disediakan, sehingga tampilan tidak bergeser saat
   scrollbar muncul/hilang (mis. saat modal/menu mengunci scroll). */
html {
    scrollbar-gutter: stable;
}

/* scripts.js (template lama) memasang body.loaded selama 1,5 detik setelah halaman
   dimuat, dan style.css menguncinya dengan overflow: hidden (dulu untuk layar
   loading). Halaman bergaya Apple tidak memakai layar itu, jadi kuncinya dibatalkan. */
body.apple-ui.loaded {
    overflow-y: auto !important;
    height: auto !important;
}

/* Cadangan untuk browser tanpa View Transitions: warna memudar */
.a-theme-fading,
.a-theme-fading * {
    transition: background-color .45s var(--a-ease), color .45s var(--a-ease), border-color .45s var(--a-ease) !important;
}

/* ============================== NAVBAR ============================== */

.anav {
    position: sticky;
    top: 0;
    z-index: 9990;
    height: 48px;
    border-bottom: 1px solid var(--a-nav-line);
    font-family: var(--a-font);
    -webkit-font-smoothing: antialiased;
}

/* Latar + blur di lapisan terpisah. Jika backdrop-filter dipasang langsung
   di .anav, elemen position:fixed di dalamnya (menu mobile, backdrop)
   ikut terkurung setinggi navbar. */
.anav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--a-nav-bg);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition: background .3s var(--a-ease);
}

.anav.is-menu-open::before,
.anav:has(.anav-has-flyout:hover)::before {
    background: var(--a-nav-bg-solid);
}

/* Lapisan blur yang menutupi halaman saat submenu/pencarian terbuka */
.anav-backdrop {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    background: var(--a-backdrop);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--a-ease), visibility 0s linear .3s;
}

.anav *,
.afoot * {
    box-sizing: border-box;
}

.anav-inner {
    max-width: var(--a-wrap);
    height: 48px;
    margin: 0 auto;
    padding: 0 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.anav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.anav-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.anav-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.anav-menu > li {
    position: static;
    list-style: none;
}

.anav-link,
.anav-link:hover {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -.01em;
    color: var(--a-nav-text);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .3s var(--a-ease);
    text-decoration: none;
}

.anav-link:hover,
.anav-has-flyout:hover > .anav-link,
.anav-has-flyout:focus-within > .anav-link {
    color: var(--a-nav-text-strong);
}

/* Flyout ala Apple: panel penuh selebar layar */
.anav-flyout {
    position: absolute;
    left: 0;
    right: 0;
    top: 48px;
    background: var(--a-nav-bg-solid);
    border-bottom: 1px solid var(--a-nav-line);
}

.anav-caret {
    display: none;
}

@media (min-width: 834px) {
    /* Panel turun seperti tirai; jeda kecil saat membuka supaya tidak
       terbuka tak sengaja ketika kursor hanya lewat */
    .anav-flyout {
        clip-path: inset(0 0 100% 0);
        visibility: hidden;
        transition: clip-path .3s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .3s;
    }

    .anav-has-flyout:hover > .anav-flyout,
    .anav-has-flyout:focus-within > .anav-flyout {
        clip-path: inset(0 0 0 0);
        visibility: visible;
        transition: clip-path .5s var(--a-ease) .08s, visibility 0s linear .08s;
    }

    /* Isi flyout muncul bergiliran */
    .anav-flyout-label,
    .anav-flyout-list > li {
        opacity: 0;
        transform: translate3d(0, -8px, 0);
        transition: opacity .15s ease, transform .15s ease;
    }

    .anav-has-flyout:hover .anav-flyout-label,
    .anav-has-flyout:hover .anav-flyout-list > li,
    .anav-has-flyout:focus-within .anav-flyout-label,
    .anav-has-flyout:focus-within .anav-flyout-list > li {
        opacity: 1;
        transform: none;
        transition: opacity .45s var(--a-ease) calc(.18s + var(--i, 0) * 30ms),
                    transform .45s var(--a-ease) calc(.18s + var(--i, 0) * 30ms);
    }

    /* Halaman di belakang diblur saat flyout terbuka */
    .anav:has(.anav-has-flyout:hover) .anav-backdrop,
    .anav:has(.anav-has-flyout:focus-within) .anav-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .5s var(--a-ease) .08s;
    }

    /* Menu lain sedikit meredup saat salah satu dibuka */
    .anav-menu:has(.anav-has-flyout:hover) > li > .anav-link {
        color: var(--a-nav-text-dim);
    }

    .anav-menu:has(.anav-has-flyout:hover) > li:hover > .anav-link {
        color: var(--a-nav-text-strong);
    }
}

.anav-flyout-inner {
    max-width: var(--a-wrap);
    margin: 0 auto;
    padding: 36px 22px 48px;
}

.anav-flyout-label {
    display: block;
    margin-bottom: 14px;
    font-size: 12px;
    color: var(--a-text-2);
}

.anav-flyout-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 260px));
    gap: 6px 48px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.anav-flyout-list a,
.anav-flyout-list a:hover {
    display: block;
    padding: 4px 0;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--a-text);
    text-decoration: none;
}

.anav-flyout-list a:hover {
    color: var(--a-link);
}

.anav-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.anav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--a-nav-text);
    font-size: 18px;
    cursor: pointer;
}

.anav-icon-btn:hover {
    color: var(--a-nav-text-strong);
    background: var(--a-hover);
}

/* Tombol mode gelap/terang: ikon bulan (di mode terang) & matahari (di mode gelap) */
.anav-theme-icon {
    position: relative;
    display: block;
    width: 18px;
    height: 18px;
}

.anav-theme-icon i {
    position: absolute;
    inset: 0;
    font-size: 18px;
    line-height: 18px;
    transition: opacity .35s var(--a-ease), rotate .6s var(--a-spring), scale .6s var(--a-spring);
}

.anav-theme-icon .ph-sun,
[data-theme="dark"] .anav-theme-icon .ph-moon {
    opacity: 0;
    rotate: -90deg;
    scale: .4;
}

[data-theme="dark"] .anav-theme-icon .ph-sun {
    opacity: 1;
    rotate: 0deg;
    scale: 1;
}

.anav .btn-lang-switcher,
.afoot .btn-lang-switcher {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-family: var(--a-font);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    color: var(--a-nav-text);
    box-shadow: none;
}

.anav .btn-lang-switcher:hover,
.afoot .btn-lang-switcher:hover {
    background: var(--a-hover);
    color: var(--a-nav-text-strong);
}

.anav .btn-lang-switcher i {
    font-size: 15px;
}

.anav-burger {
    display: none;
}

/* Ikon burger 2 garis yang berubah jadi X */
.anav-burger-lines {
    position: relative;
    display: block;
    width: 18px;
    height: 12px;
}

.anav-burger-lines span {
    position: absolute;
    left: 0;
    width: 18px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: top .2s var(--a-ease) .2s, transform .25s var(--a-ease);
}

.anav-burger-lines span:first-child {
    top: 3px;
}

.anav-burger-lines span:last-child {
    top: 9px;
}

.anav.is-menu-open .anav-burger-lines span {
    top: 5.25px;
    transition: top .2s var(--a-ease), transform .25s var(--a-ease) .2s;
}

.anav.is-menu-open .anav-burger-lines span:first-child {
    transform: rotate(45deg);
}

.anav.is-menu-open .anav-burger-lines span:last-child {
    transform: rotate(-45deg);
}

/* ============================ MODAL PENCARIAN ============================ */

.asearch {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: min(12vh, 120px) 16px 16px;
    font-family: var(--a-font);
    -webkit-font-smoothing: antialiased;
    visibility: hidden;
    pointer-events: none;
}

.asearch.is-open {
    visibility: visible;
    pointer-events: auto;
}

.asearch.is-closing {
    pointer-events: none;
}

.asearch *,
.asearch *::before {
    box-sizing: border-box;
}

.asearch-backdrop {
    position: absolute;
    inset: 0;
    background: var(--a-modal-backdrop);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    opacity: 0;
    transition: opacity .25s var(--a-ease);
}

.asearch.is-open .asearch-backdrop {
    opacity: 1;
    transition: opacity .45s var(--a-ease);
}

.asearch.is-open.is-closing .asearch-backdrop {
    opacity: 0;
    transition: opacity .4s var(--a-ease);
}

/* Dialog: gerak muncul dari & masuk ke ikon pencarian diatur JS (Web Animations API) */
.asearch-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(680px, 100%);
    max-height: calc(100dvh - min(12vh, 120px) - 32px);
    border-radius: 28px;
    background: var(--a-glass);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    backdrop-filter: blur(40px) saturate(180%);
    box-shadow: var(--a-modal-shadow), inset 0 1px 0 var(--a-glass-line);
    overflow: hidden;
    transform-origin: 50% 50%;
    will-change: transform, opacity, border-radius;
}

/* Kolom input & footer muncul setelah dialog hampir sampai, hilang duluan saat menutup */
.asearch-form,
.asearch-foot {
    opacity: 0;
    transition: opacity .12s ease;
}

.asearch.is-open .asearch-form,
.asearch.is-open .asearch-foot {
    opacity: 1;
    transition: opacity .35s var(--a-ease) .14s;
}

.asearch.is-open.is-closing .asearch-form,
.asearch.is-open.is-closing .asearch-foot {
    opacity: 0;
    transition: opacity .12s ease;
}

.asearch-form {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 20px 20px 20px 24px;
    border-bottom: 1px solid var(--a-chip-line);
}

.asearch-form > i {
    font-size: 24px;
    color: var(--a-blue);
}

.asearch-input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-family: var(--a-font);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -.02em;
    color: var(--a-text);
    outline: none;
    box-shadow: none;
}

.asearch-input::placeholder {
    color: var(--a-text-3);
}

.asearch-input::-webkit-search-cancel-button {
    display: none;
}

.asearch kbd,
.asearch-esc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border: 1px solid var(--a-chip-line);
    border-radius: 8px;
    background: var(--a-kbd);
    font-family: var(--a-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--a-text-2);
    box-shadow: none;
}

.asearch-esc {
    height: 32px;
    padding: 0 12px;
    cursor: pointer;
}

.asearch-esc:hover {
    color: var(--a-text);
}

.asearch-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 24px 20px;
}

/* Isi muncul bergiliran setelah dialog terbuka */
.asearch-group,
.asearch-blog {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
    transition: opacity .15s ease, transform .15s ease;
}

.asearch.is-open .asearch-group,
.asearch.is-open .asearch-blog {
    opacity: 1;
    transform: none;
    transition: opacity .45s var(--a-ease) calc(.2s + var(--i, 0) * 60ms),
                transform .45s var(--a-ease) calc(.2s + var(--i, 0) * 60ms);
}

.asearch.is-open.is-closing .asearch-group,
.asearch.is-open.is-closing .asearch-blog {
    opacity: 0;
    transition: opacity .12s ease;
}

/* Ikon pencarian "berubah" jadi modal, lalu berdenyut saat modal kembali */
#anavSearchBtn i {
    display: inline-block;
    transition: opacity .3s var(--a-ease), scale .5s var(--a-spring);
}

#anavSearchBtn.is-launched i {
    opacity: 0;
    scale: .4;
}

#anavSearchBtn.is-receive i {
    animation: a-search-receive .55s var(--a-spring);
}

@keyframes a-search-receive {
    0%   { scale: .5; }
    55%  { scale: 1.25; }
    100% { scale: 1; }
}

.asearch-group[hidden],
.asearch-blog[hidden],
.asearch-item[hidden] {
    display: none !important;
}

.asearch .asearch-label {
    margin: 18px 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--a-text-2);
}

.asearch-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asearch-chips > li {
    list-style: none;
}

.asearch-item,
.asearch-item:hover {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--a-chip-line);
    border-radius: 999px;
    background: var(--a-chip);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--a-text);
    text-decoration: none;
    transition: background .2s, border-color .2s, transform .2s var(--a-ease);
}

.asearch-item i {
    font-size: 17px;
    color: var(--a-blue);
}

.asearch-item:hover,
.asearch-item.is-active {
    background: var(--a-chip-active);
    border-color: transparent;
}

.asearch-item.is-active {
    transform: scale(1.03);
}

.asearch-blog.asearch-item {
    display: flex;
    margin-top: 16px;
    border-radius: 14px;
}

.asearch-blog strong {
    font-weight: 600;
}

.asearch .asearch-empty {
    margin: 20px 0 4px;
    font-size: 15px;
    color: var(--a-text-2);
}

.asearch-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 12px 24px;
    border-top: 1px solid var(--a-chip-line);
    font-size: 13px;
    color: var(--a-text-3);
}

.asearch-foot span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

@media (max-width: 833px) {
    .asearch {
        padding: 12px;
    }

    .asearch-dialog {
        max-height: calc(100dvh - 24px);
        border-radius: 22px;
    }

    .asearch-form {
        padding: 16px 14px 16px 18px;
    }

    .asearch-input {
        font-size: 18px;
    }

    .asearch-body {
        padding: 4px 18px 18px;
    }

    .asearch-foot {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #anavSearchBtn i,
    #anavSearchBtn.is-receive i {
        transition: none;
        animation: none;
    }
}

/* Mobile */
@media (max-width: 833px) {
    .anav-inner {
        padding: 0 16px;
    }

    .anav-menu {
        position: fixed;
        top: 48px;
        left: 0;
        right: 0;
        bottom: 0;
        display: block;
        padding: 16px 32px 48px;
        background: var(--a-menu-bg);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s var(--a-ease), visibility 0s linear .25s;
    }

    .anav.is-menu-open .anav-menu {
        opacity: 1;
        visibility: visible;
        transition: opacity .35s var(--a-ease);
    }

    /* Item menu turun bergiliran saat menu dibuka */
    .anav-menu > li {
        opacity: 0;
        transform: translate3d(0, -14px, 0);
        transition: opacity .15s ease, transform .15s ease;
    }

    .anav.is-menu-open .anav-menu > li {
        opacity: 1;
        transform: none;
        transition: opacity .5s var(--a-ease) calc(.1s + var(--i, 0) * 40ms),
                    transform .5s var(--a-ease) calc(.1s + var(--i, 0) * 40ms);
    }

    .anav-link,
    .anav-link:hover {
        justify-content: space-between;
        height: auto;
        width: 100%;
        padding: 10px 0;
        font-size: 28px;
        font-weight: 600;
        letter-spacing: -.02em;
        color: var(--a-text);
        text-align: left;
    }

    .anav-caret {
        display: inline-block;
        font-size: 20px;
        color: var(--a-text-2);
        transition: rotate .35s var(--a-ease);
    }

    .anav-has-flyout.is-open .anav-caret {
        rotate: 180deg;
    }

    /* Akordeon dengan tinggi yang memanjang halus */
    .anav-flyout {
        position: static;
        display: grid;
        grid-template-rows: 0fr;
        background: transparent;
        border: 0;
        transition: grid-template-rows .45s var(--a-ease);
    }

    .anav-has-flyout.is-open > .anav-flyout {
        grid-template-rows: 1fr;
    }

    .anav-flyout-inner {
        min-height: 0;
        max-width: none;
        margin: 0;
        overflow: hidden;
        padding: 0 0 0 4px;
    }

    .anav-flyout-list {
        padding-bottom: 12px;
    }

    .anav-flyout-list > li {
        opacity: 0;
        transform: translate3d(0, -6px, 0);
        transition: opacity .2s ease, transform .2s ease;
    }

    .anav-has-flyout.is-open .anav-flyout-list > li {
        opacity: 1;
        transform: none;
        transition: opacity .4s var(--a-ease) calc(.1s + var(--i, 0) * 30ms),
                    transform .4s var(--a-ease) calc(.1s + var(--i, 0) * 30ms);
    }

    .anav-flyout-label {
        display: none;
    }

    .anav-flyout-list {
        grid-template-columns: 1fr;
    }

    .anav-flyout-list a,
    .anav-flyout-list a:hover {
        font-size: 17px;
        font-weight: 500;
        color: var(--a-text-2);
    }

    .anav-burger {
        display: inline-flex;
    }
}

body.anav-lock {
    overflow: hidden !important;
}

/* ============================== FOOTER ============================== */

.afoot {
    background: var(--a-bg-alt);
    color: var(--a-text-2);
    font-family: var(--a-font);
    font-size: 12px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.afoot-inner {
    max-width: var(--a-wrap);
    margin: 0 auto;
    padding: 40px 22px 24px;
}

.afoot-note {
    padding-bottom: 16px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--a-line);
    color: var(--a-text-2);
    font-size: 12px;
    line-height: 1.5;
}

.afoot-note p {
    margin: 0;
    font-size: 12px;
    color: var(--a-text-2);
}

.afoot-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

/* Selektor diawali .afoot supaya tidak ditimpa .apple-ui h3 / p { margin: 0 } di home */
.afoot .afoot-col h3 {
    margin: 0 0 14px;
    font-family: var(--a-font);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--a-text);
}

.afoot .afoot-col p,
.afoot .afoot-col li {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--a-text-2);
    list-style: none;
}

.afoot-col ul {
    margin: 0;
    padding: 0;
}

.afoot a,
.afoot a:hover {
    color: var(--a-text-2);
    text-decoration: none;
}

.afoot a:hover {
    color: var(--a-text);
    text-decoration: underline;
}

.afoot-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--a-line);
}

.afoot .afoot-bottom p {
    margin: 0;
    font-size: 11px;
    color: var(--a-text-3);
}

@media (max-width: 833px) {
    .afoot-cols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 20px;
    }
}

@media (max-width: 480px) {
    .afoot-cols {
        grid-template-columns: 1fr;
    }

    .afoot-bottom {
        flex-direction: column-reverse;
        align-items: flex-start;
    }
}

/* =========================== HALAMAN APPLE-UI =========================== */

body.apple-ui {
    background: var(--a-bg);
    color: var(--a-text);
    font-family: var(--a-font);
    font-size: 17px;
    line-height: 1.47;
    letter-spacing: -.022em;
    -webkit-font-smoothing: antialiased;
}

/* Elemen template lama yang tidak dipakai di gaya Apple */
body.apple-ui .loader-wrap,
body.apple-ui .cursor,
body.apple-ui .progress-wrap,
body.apple-ui .top-info-bar {
    display: none !important;
}

body.apple-ui main:after {
    display: none;
}

.apple-ui h1,
.apple-ui h2,
.apple-ui h3,
.apple-ui h4 {
    font-family: var(--a-font);
    color: var(--a-text);
    margin: 0;
}

.apple-ui p {
    margin: 0;
    font-family: var(--a-font);
}

.apple-ui img {
    max-width: 100%;
}

.a-wrap {
    max-width: var(--a-wrap);
    margin: 0 auto;
    padding: 0 22px;
}

.a-wrap-lg {
    max-width: var(--a-wrap-lg);
    margin: 0 auto;
    padding: 0 22px;
}

.a-section {
    padding: 100px 0;
}

.a-section.is-alt {
    background: var(--a-bg-alt);
}

.a-head {
    text-align: center;
    margin-bottom: 56px;
}

.apple-ui .a-eyebrow {
    display: block;
    margin-bottom: 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--a-text-2);
}

.apple-ui .a-title {
    font-size: 56px;
    font-weight: 700;
    line-height: 1.07;
    letter-spacing: -.035em;
}

.apple-ui .a-lead {
    max-width: 680px;
    margin: 16px auto 0;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.38;
    letter-spacing: -.01em;
    color: var(--a-text-2);
}

.a-head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
}

.a-head-row .a-title {
    font-size: 48px;
}

/* Tombol & tautan */
.a-ctas {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 28px;
    margin-top: 24px;
}

.apple-ui .a-btn,
.apple-ui .a-btn:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    padding: 11px 22px;
    border-radius: 980px;
    background: var(--a-blue);
    color: #fff;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-decoration: none;
    transition: background .2s var(--a-ease);
}

.apple-ui .a-btn:hover {
    background: var(--a-blue-hover);
}

.apple-ui .a-btn.is-ghost {
    background: transparent;
    color: var(--a-blue);
    box-shadow: inset 0 0 0 1px var(--a-blue);
}

.apple-ui .a-btn.is-ghost:hover {
    background: var(--a-blue);
    color: #fff;
}

/* Tanpa :hover di sini — supaya ukuran tautan di dalam kartu (mis. .a-service .a-link)
   tidak tertimpa saat hover dan teks tidak "melompat" */
.apple-ui .a-link {
    /* inline-block (bukan inline-flex): di flex container garis bawah ikut menurun ke tanda ›.
       Dengan inline-block, › (inline-block) tidak ikut digaris bawahi */
    display: inline-block;
    color: var(--a-link);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.02em;
    /* garis bawah selalu ada tapi transparan, lalu muncul halus saat hover */
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
    transition: text-decoration-color .25s var(--a-ease);
}

.apple-ui .a-link::after {
    content: "\203A";
    /* inline-block: tanda › tidak ikut digaris bawahi */
    display: inline-block;
    font-size: 1.15em;
    line-height: 1;
    margin-left: 3px;
    transform: translateY(-1px);
    transition: transform .35s var(--a-ease);
}

/* Hover pada tautan, atau pada kartu (<a>) yang membungkusnya */
.apple-ui .a-link:hover,
.apple-ui a:hover .a-link {
    text-decoration-color: currentColor;
}

.apple-ui .a-link:hover::after,
.apple-ui a:hover .a-link::after {
    transform: translate(3px, -1px);
}

/* Slideshow hero (geser dengan intipan) */
.a-slider {
    --a-slide-w: min(1180px, calc(100vw - 120px));
    --a-slide-gap: 20px;
    --a-interval: 5s;
    position: relative;
    padding: 24px 0 0;
    background: var(--a-bg-alt);
    overflow: hidden;
}

.a-slider-stage {
    position: relative;
}

.a-slider-viewport {
    overflow: hidden;
    outline: none;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

.a-slider-track {
    display: flex;
    gap: var(--a-slide-gap);
    padding-left: calc((100% - var(--a-slide-w)) / 2);
    will-change: transform;
    transition: transform .9s var(--a-ease);
}

.a-slider-track.no-anim {
    transition: none;
}

.a-slide {
    position: relative;
    flex: 0 0 var(--a-slide-w);
    aspect-ratio: 16 / 8.5;
    border-radius: 28px;
    overflow: hidden;
    background: #111;
    opacity: .45;
    cursor: pointer;
    transition: opacity .9s var(--a-ease);
}

.a-slide.is-active {
    opacity: 1;
    cursor: default;
}

.a-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    transition: transform 1.6s var(--a-ease);
    -webkit-user-drag: none;
}

.a-slide.is-active .a-slide-img {
    transform: scale(1);
}

.a-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .38) 38%, rgba(0, 0, 0, 0) 68%);
    pointer-events: none;
}

.a-slide-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    max-width: 780px;
    padding: 0 56px 52px;
    color: #fff;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s var(--a-ease), transform .5s var(--a-ease);
}

.a-slide.is-active .a-slide-caption {
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--a-ease) .35s, transform .8s var(--a-ease) .35s;
}

.apple-ui .a-slide-title {
    color: #fff;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.apple-ui .a-slide-text {
    margin-top: 12px;
    font-size: 21px;
    line-height: 1.35;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .86);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.a-slide .a-ctas {
    justify-content: flex-start;
    margin-top: 22px;
}

.apple-ui .a-slide .a-link,
.apple-ui .a-slide .a-link:hover {
    color: #fff;
}

/* Dots + tombol jeda (tengah bawah) */
.a-slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 22px;
}

.a-slider-dots {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--a-pill);
}

.a-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--a-dot);
    overflow: hidden;
    cursor: pointer;
    transition: width .5s var(--a-ease), background .3s;
}

.a-dot:hover {
    background: var(--a-dot-hover);
}

.a-dot.is-active {
    width: 48px;
    background: var(--a-dot-track);
}

.a-dot-fill {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--a-dot-fill);
    transform: scaleX(0);
    transform-origin: left center;
}

.a-dot.is-active .a-dot-fill {
    animation: a-dot-progress var(--a-interval) linear forwards;
}

.a-slider.is-paused .a-dot.is-active .a-dot-fill,
.a-slider.is-dragging .a-dot.is-active .a-dot-fill,
.a-slider.is-tab-hidden .a-dot.is-active .a-dot-fill {
    animation-play-state: paused;
}

.a-slider.is-stopped .a-dot.is-active .a-dot-fill {
    animation: none;
    transform: scaleX(1);
}

@keyframes a-dot-progress {
    to {
        transform: scaleX(1);
    }
}

.a-slider-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--a-pill);
    color: var(--a-text);
    font-size: 16px;
    cursor: pointer;
    transition: background .3s;
}

.a-slider-play:hover {
    background: var(--a-pill-hover);
}

.a-slider-play .ph-play,
.a-slider.is-stopped .a-slider-play .ph-pause {
    display: none;
}

.a-slider.is-stopped .a-slider-play .ph-play {
    display: inline;
}

@media (prefers-reduced-motion: reduce) {
    .a-slider-track,
    .a-slide,
    .a-slide-img,
    .a-slide-caption,
    .a-slide.is-active .a-slide-caption {
        transition: none;
    }
}

/* Layanan */
.a-services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.apple-ui .a-service,
.apple-ui .a-service:hover {
    display: flex;
    flex-direction: column;
    min-height: 240px;
    padding: 32px 30px 28px;
    border-radius: 28px;
    background: var(--a-card);
    color: var(--a-text);
    text-decoration: none;
    transition: transform .4s var(--a-ease), box-shadow .4s var(--a-ease);
}

/* Naik + bayangan (bukan scale) agar teks tetap tajam saat hover */
.apple-ui .a-service:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px var(--a-shadow);
}

.a-service-icon {
    display: inline-flex;
    font-size: 44px;
    line-height: 1;
    color: var(--a-blue);
}

.apple-ui .a-service-title {
    margin-top: auto;
    padding-top: 40px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.17;
    letter-spacing: -.02em;
}

.a-service .a-link {
    margin-top: 10px;
    font-size: 15px;
}

/* Statistik */
.a-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    text-align: center;
}

.apple-ui .a-stat-num {
    display: block;
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    background: linear-gradient(180deg, var(--a-stat-from) 30%, var(--a-stat-to) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.apple-ui .a-stat-label {
    display: block;
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.35;
    color: var(--a-text-2);
}

/* Klien (marquee) */
.a-marquee {
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.a-marquee-track {
    display: flex;
    align-items: center;
    gap: 72px;
    width: max-content;
    animation: a-marquee 40s linear infinite;
}

.a-marquee:hover .a-marquee-track {
    animation-play-state: paused;
}

.a-marquee-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.a-marquee-item img {
    height: 40px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: var(--a-logo-filter);
    opacity: .55;
    transition: filter .3s, opacity .3s;
}

.a-marquee-item:hover img {
    filter: none;
    opacity: 1;
}

/* Di mode gelap logo tetap siluet putih saat hover (warna asli sering tak terbaca) */
[data-theme="dark"] .a-marquee-item:hover img {
    filter: var(--a-logo-filter);
}

@keyframes a-marquee {
    to {
        transform: translateX(-50%);
    }
}

/* Testimoni (scroller horizontal) */
.a-scroller {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(22px, calc((100vw - var(--a-wrap-lg)) / 2 + 22px));
    padding: 4px max(22px, calc((100vw - var(--a-wrap-lg)) / 2 + 22px)) 24px;
    scrollbar-width: none;
}

.a-scroller::-webkit-scrollbar {
    display: none;
}

.a-quote {
    flex: 0 0 372px;
    display: flex;
    flex-direction: column;
    min-height: 420px;
    padding: 36px 32px 32px;
    border-radius: 28px;
    background: var(--a-card);
    scroll-snap-align: start;
}

.a-quote-stars {
    font-size: 15px;
    letter-spacing: 2px;
    color: #f5a623;
}

.a-quote-stars .is-off {
    color: var(--a-line);
}

.apple-ui .a-quote-text {
    margin-top: 20px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.33;
    letter-spacing: -.02em;
    color: var(--a-text);
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.a-quote-by {
    margin-top: auto;
    padding-top: 24px;
}

.apple-ui .a-quote-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--a-text);
}

.apple-ui .a-quote-role {
    margin-top: 2px;
    font-size: 14px;
    color: var(--a-text-2);
}

.a-scroller-nav {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 8px;
}

.a-scroller-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--a-pill);
    color: var(--a-nav-text-dim);
    font-size: 18px;
    cursor: pointer;
    transition: background .2s, color .2s;
}

.a-scroller-btn:hover {
    background: var(--a-pill-hover);
    color: var(--a-nav-text);
}

.a-scroller-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Blog */
.a-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.apple-ui .a-post,
.apple-ui .a-post:hover {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
    transition: transform .4s var(--a-ease), box-shadow .4s var(--a-ease);
}

.apple-ui .a-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px var(--a-shadow);
}

.a-post-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.a-post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a-post-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 26px;
}

.apple-ui .a-post-meta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--a-text-2);
}

.apple-ui .a-post-title {
    margin-top: 8px;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -.02em;
}

/* CTA penutup */
.a-cta {
    padding: 120px 0;
    text-align: center;
    background: var(--a-cta-bg);
    color: #f5f5f7;
}

.apple-ui .a-cta .a-title {
    color: #f5f5f7;
}

.apple-ui .a-cta .a-lead {
    color: #a1a1a6;
}

.apple-ui .a-cta .a-link,
.apple-ui .a-cta .a-link:hover {
    color: #2997ff;
}

/* =====================================================================
   Animasi scroll
   - Semua keadaan awal (tersembunyi) hanya berlaku jika body punya
     .a-reveal-ready, yang dipasang JS saat motion diizinkan.
   - Efek yang terikat scroll memakai properti individual (scale,
     translate) + CSS variable yang diisi JS.
   ===================================================================== */

/* Muncul saat masuk layar */
.a-reveal-ready .a-reveal {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
    transition: opacity 1s var(--a-ease), transform 1.1s var(--a-ease);
    transition-delay: calc(var(--d, 0) * 90ms);
}

.a-reveal-ready .a-reveal.is-zoom {
    transform: translate3d(0, 40px, 0) scale(.94);
}

.a-reveal-ready .a-reveal.is-right {
    transform: translate3d(90px, 0, 0);
}

.a-reveal-ready .a-reveal.is-in {
    opacity: 1;
    transform: none;
}

/* Judul muncul kata per kata */
.a-word {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    padding-bottom: .12em;
    margin-bottom: -.12em;
}

.a-word > span {
    display: inline-block;
}

.a-reveal-ready [data-split] .a-word > span {
    opacity: 0;
    transform: translate3d(0, 105%, 0);
    transition: transform 1s var(--a-ease), opacity 1s var(--a-ease);
    transition-delay: calc(var(--w, 0) * 70ms);
}

.a-reveal-ready [data-split].is-in .a-word > span {
    opacity: 1;
    transform: none;
}

/* Kalimat menyala kata demi kata mengikuti scroll */
.a-reveal-ready [data-highlight] .a-hl {
    color: var(--a-hl-off);
    transition: color .45s var(--a-ease);
}

.a-reveal-ready [data-highlight] .a-hl.is-lit {
    color: var(--a-text);
}

/* Angka statistik tidak bergoyang saat menghitung */
.a-stat-num {
    font-variant-numeric: tabular-nums;
}

/* Slideshow: mengecil & memudar saat discroll, gambar parallax */
.a-slider-stage {
    transform-origin: 50% 0;
    scale: var(--a-sc, 1);
    opacity: var(--a-op, 1);
}

.a-slide-img {
    top: -8%;
    bottom: auto;
    height: 116%;
    translate: 0 var(--a-par, 0px);
}

/* Marquee klien: dorongan ekstra saat scroll */
.a-marquee-track {
    translate: var(--a-mx, 0px) 0;
    /* jarak ekor = gap, supaya -50% tepat satu putaran (tanpa loncatan) */
    padding-right: 72px;
}

/* Testimoni: parallax horizontal */
.a-scroller {
    translate: var(--a-tx, 0px) 0;
}

/* Blog: gambar zoom-out mengikuti scroll */
.a-post-img img {
    scale: var(--a-z, 1);
}

/* CTA: kartu membulat yang melebar penuh */
.a-cta {
    clip-path: inset(0 var(--a-in, 0px) round var(--a-r, 0px));
}

.a-cta .a-title {
    scale: var(--a-ts, 1);
}

@media (prefers-reduced-motion: reduce) {
    .a-marquee-track {
        animation: none;
    }
}

/* =============================== BLOG =============================== */

.ab-hero {
    padding: 88px 0 32px;
}

.apple-ui .ab-title {
    max-width: 880px;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.apple-ui .ab-lead {
    margin: 16px 0 0;
}

.ab-filters {
    position: relative;
    z-index: 5;
    padding: 16px 0 8px;
}

.ab-filter-row {
    position: relative;
    z-index: 3; /* popover penulis tampil di atas deretan chip */
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

/* Segmented control ala iOS */
.ab-seg {
    position: relative;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
    border-radius: 999px;
    background: var(--a-pill);
}

.ab-seg::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: var(--a-card);
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12), 0 1px 1px rgba(0, 0, 0, .04);
    transform: translateX(calc(var(--seg-i, 0) * 100%));
    transition: transform .45s var(--a-spring);
}

.apple-ui .ab-seg-btn,
.apple-ui .ab-seg-btn:hover {
    position: relative;
    z-index: 1;
    min-width: 108px;
    padding: 8px 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -.01em;
    color: var(--a-text-2);
    text-decoration: none;
    transition: color .3s var(--a-ease);
}

.apple-ui .ab-seg-btn.is-active {
    color: var(--a-text);
    font-weight: 600;
}

/* Popover penulis ala macOS */
.ab-pop {
    position: relative;
}

.ab-pop-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--a-chip-line);
    border-radius: 999px;
    background: var(--a-card);
    font-family: var(--a-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--a-text);
    cursor: pointer;
    transition: background .2s, border-color .2s;
}

.ab-pop-btn:hover,
.ab-pop.is-open .ab-pop-btn {
    background: var(--a-bg-alt);
}

.ab-pop-btn.is-set {
    border-color: var(--a-blue);
    color: var(--a-blue);
}

.ab-pop-btn > i:first-child {
    font-size: 18px;
}

.ab-pop-caret {
    font-size: 13px;
    transition: rotate .35s var(--a-ease);
}

.ab-pop.is-open .ab-pop-caret {
    rotate: 180deg;
}

.ab-pop-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 16px;
    background: var(--a-glass);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    backdrop-filter: blur(30px) saturate(180%);
    box-shadow: var(--a-modal-shadow);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: scale(.92) translateY(-6px);
    transition: opacity .18s ease, transform .2s ease, visibility 0s linear .2s;
}

.ab-pop.is-open .ab-pop-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .25s var(--a-ease), transform .45s var(--a-spring);
}

.apple-ui .ab-pop-item,
.apple-ui .ab-pop-item:hover {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    color: var(--a-text);
    text-decoration: none;
}

.apple-ui .ab-pop-item:hover {
    background: var(--a-blue);
    color: #fff;
}

.ab-pop-item span {
    flex: 1;
}

.ab-pop-item small {
    font-size: 12px;
    opacity: .6;
}

.ab-pop-item .ph-check {
    visibility: hidden;
    font-size: 14px;
}

.ab-pop-item.is-active .ph-check {
    visibility: visible;
}

/* Chip kategori */
.ab-chips {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

/* Ujung kanan memudar hanya jika chip meluber (class dipasang JS) */
.ab-chips.is-overflow {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
}

.ab-chips::-webkit-scrollbar {
    display: none;
}

.apple-ui .ab-chip,
.apple-ui .ab-chip:hover {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--a-bg-alt);
    font-size: 14px;
    font-weight: 500;
    color: var(--a-text);
    text-decoration: none;
    transition: background .25s var(--a-ease), color .25s var(--a-ease), transform .25s var(--a-ease);
}

.apple-ui .ab-chip:hover {
    background: var(--a-pill-hover);
}

.apple-ui .ab-chip:active {
    transform: scale(.96);
}

.ab-chip span {
    font-size: 12px;
    color: var(--a-text-3);
}

.apple-ui .ab-chip.is-active {
    background: var(--a-text);
    color: var(--a-bg);
}

.ab-chip.is-active span {
    color: inherit;
    opacity: .6;
}

/* Info pencarian */
.ab-result {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 20px;
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--a-bg-alt);
}

.apple-ui .ab-result p {
    flex: 1;
    font-size: 15px;
    color: var(--a-text-2);
}

.ab-result strong {
    color: var(--a-text);
}

.apple-ui .ab-clear,
.apple-ui .ab-clear:hover {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--a-link);
    text-decoration: none;
}

/* Daftar artikel */
.ab-list {
    padding: 32px 0 110px;
}

/* Kartu unggulan */
.apple-ui .ab-feature,
.apple-ui .ab-feature:hover {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    margin-bottom: 24px;
    border-radius: 28px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
    transition: transform .5s var(--a-ease), box-shadow .5s var(--a-ease);
}

.apple-ui .ab-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 44px var(--a-shadow);
}

.ab-feature-img {
    min-height: 420px;
    overflow: hidden;
}

.ab-feature-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: var(--a-z, 1);
}

.ab-feature-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 44px;
}

.apple-ui .ab-cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--a-text-2);
}

.apple-ui .ab-feature-title {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.apple-ui .ab-excerpt {
    margin-top: 14px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--a-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apple-ui .ab-meta {
    margin-top: 14px;
    font-size: 13px;
    color: var(--a-text-3);
}

.ab-feature .a-link {
    margin-top: 20px;
}

/* Kartu grid: tanggal di bawah judul */
.ab-grid .a-post-body .ab-meta {
    margin-top: auto;
    padding-top: 14px;
}

.ab-grid .a-post-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Kosong */
.ab-empty {
    padding: 80px 20px;
    border-radius: 28px;
    background: var(--a-bg-alt);
    text-align: center;
}

.ab-empty > i {
    font-size: 48px;
    color: var(--a-text-3);
}

.apple-ui .ab-empty h2 {
    margin-top: 16px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.apple-ui .ab-empty p {
    margin: 8px 0 24px;
    color: var(--a-text-2);
}

/* Pagination ala Apple (markup dari components.pagination) */
.ab-pagination {
    display: flex;
    justify-content: center;
    margin-top: 56px;
}

.apple-ui .custom-pagination .pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apple-ui .custom-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--a-bg-alt);
    font-family: var(--a-font);
    font-size: 15px;
    font-weight: 500;
    color: var(--a-text);
    text-decoration: none;
    transition: background .2s, color .2s, transform .2s var(--a-ease);
}

.apple-ui .custom-pagination a.page-link:hover {
    background: var(--a-pill-hover);
    color: var(--a-text);
}

.apple-ui .custom-pagination a.page-link:active {
    transform: scale(.94);
}

.apple-ui .custom-pagination .page-item.active .page-link {
    background: var(--a-text);
    color: var(--a-bg);
}

.apple-ui .custom-pagination .page-item.disabled .page-link {
    opacity: .35;
    cursor: default;
}

.apple-ui .custom-pagination .page-item.dots .page-link {
    min-width: 24px;
    padding: 0;
    background: transparent;
    opacity: .6;
}

/* Ganti "<" dan ">" dengan chevron */
.apple-ui .custom-pagination .page-item:first-child .page-link,
.apple-ui .custom-pagination .page-item:last-child .page-link {
    font-size: 0;
}

.apple-ui .custom-pagination .page-item:first-child .page-link::before,
.apple-ui .custom-pagination .page-item:last-child .page-link::before {
    font-size: 22px;
    line-height: 1;
    transform: translateY(-1px);
}

.apple-ui .custom-pagination .page-item:first-child .page-link::before {
    content: "\2039";
}

.apple-ui .custom-pagination .page-item:last-child .page-link::before {
    content: "\203A";
}

@media (max-width: 833px) {
    .ab-hero {
        padding: 56px 0 20px;
    }

    .apple-ui .ab-title {
        font-size: 40px;
    }

    .ab-filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .ab-seg {
        display: grid;
    }

    .ab-pop-btn {
        width: 100%;
        justify-content: center;
    }

    .ab-pop-btn .ab-pop-caret {
        margin-left: auto;
    }

    .ab-pop-menu {
        left: 0;
        right: 0;
        transform-origin: top center;
    }

    .apple-ui .ab-feature,
    .apple-ui .ab-feature:hover {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .ab-feature-img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .ab-feature-body {
        padding: 24px 22px 28px;
    }

    .apple-ui .ab-feature-title {
        font-size: 26px;
    }

    .apple-ui .ab-excerpt {
        font-size: 15px;
    }

    .ab-list {
        padding: 20px 0 80px;
    }

    .ab-pagination {
        margin-top: 40px;
    }

    .apple-ui .custom-pagination .page-link {
        min-width: 40px;
        height: 40px;
        padding: 0 10px;
    }
}

/* ============================ PORTOFOLIO ============================ */

.aa-crumbs.ap-crumbs ol {
    justify-content: flex-start;
}

.ap-crumbs li[aria-current] {
    color: var(--a-text-2);
}

/* Chip berupa <button> (filter tanpa reload) */
.apple-ui button.ab-chip {
    border: 0;
    font-family: var(--a-font);
    cursor: pointer;
}

.ap-list {
    padding: 40px 0 110px;
}

.ap-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

/* Jumlah ganjil: kartu terakhir melebar penuh */
.ap-grid.is-odd .ap-card:last-child {
    grid-column: 1 / -1;
}

.apple-ui .ap-card,
.apple-ui .ap-card:hover {
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
    transition: transform .5s var(--a-ease), box-shadow .5s var(--a-ease), opacity .28s ease;
}

.apple-ui .ap-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px var(--a-shadow);
}

.ap-card[hidden] {
    display: none !important;
}

/* Animasi filter */
.apple-ui .ap-card.is-filter-out {
    opacity: 0;
    transform: scale(.96);
}

.apple-ui .ap-card.is-filter-in {
    animation: ap-filter-in .45s var(--a-spring);
}

@keyframes ap-filter-in {
    from {
        opacity: 0;
        transform: scale(.96);
    }
}

.ap-card-img {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--a-card);
}

.ap-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .8s var(--a-ease);
}

.ap-card:hover .ap-card-img img {
    transform: scale(1.04);
}

.ap-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 32px 30px;
}

.apple-ui .ap-card-meta {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-2);
}

.apple-ui .ap-card-title {
    margin-top: 10px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.apple-ui .ap-card-client {
    margin-top: 6px;
    font-size: 15px;
    color: var(--a-text-2);
}

.apple-ui .ap-card-excerpt {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--a-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ap-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
}

.ap-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ap-badges li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--a-card);
    font-size: 12px;
    font-weight: 500;
    color: var(--a-text);
    list-style: none;
}

.ap-badges i {
    font-size: 14px;
    color: var(--a-blue);
}

.ap-card .a-link {
    font-size: 15px;
}

.ap-list + .a-cta {
    margin-bottom: 0;
}

@media (max-width: 833px) {
    .ap-list {
        padding: 20px 0 72px;
    }

    .ap-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .apple-ui .ap-card,
    .apple-ui .ap-card:hover {
        border-radius: 22px;
    }

    .ap-card-body {
        padding: 22px 22px 24px;
    }

    .apple-ui .ap-card-title {
        font-size: 23px;
    }

    .apple-ui .ap-card-excerpt {
        font-size: 15px;
    }
}

/* ============================== LAYANAN ============================== */

/* Ikon layanan ala ikon aplikasi */
.sv-appicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background: linear-gradient(145deg, #2997ff 0%, #0071e3 55%, #5e5ce6 100%);
    box-shadow: 0 12px 30px rgba(0, 113, 227, .28), inset 0 1px 0 rgba(255, 255, 255, .35);
    color: #fff;
    font-size: 46px;
    line-height: 1;
}

.sv-appicon.is-sm {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 30px;
    box-shadow: 0 8px 20px rgba(0, 113, 227, .22), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.sv-hero {
    padding: 72px 0 24px;
    text-align: center;
}

.sv-narrow {
    max-width: 860px;
}

.sv-hero .sv-appicon {
    margin-bottom: 24px;
}

.apple-ui .sv-title {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.apple-ui .sv-lead {
    margin-top: 18px;
}

.sv-hero .sv-figure {
    margin-top: 48px;
    margin-bottom: 0;
}

/* Konten + daftar isi */
.sv-body {
    padding: 56px 0 24px;
}

.sv-layout {
    max-width: var(--a-wrap-lg);
    margin: 0 auto;
    padding: 0 22px;
}

.sv-body.has-toc .sv-layout {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.sv-article {
    min-width: 0;
}

.sv-body.has-toc .sv-prose {
    max-width: 728px;
    margin: 0;
    padding: 0;
}

.sv-body:not(.has-toc) .sv-foot {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.sv-body.has-toc .sv-foot {
    max-width: 728px;
}

.sv-prose [id] {
    scroll-margin-top: 88px;
}

html:has(.sv-body.has-toc) {
    scroll-behavior: smooth;
}

.sv-toc {
    position: sticky;
    top: 80px;
}

.sv-toc-box {
    border-radius: 18px;
}

.sv-toc-box summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-3);
    list-style: none;
    cursor: default;
}

.sv-toc-box summary::-webkit-details-marker {
    display: none;
}

.sv-toc-box summary i {
    display: none;
}

.sv-toc-box ol {
    margin: 0;
    padding: 0 0 0 2px;
    border-left: 1px solid var(--a-line);
    list-style: none;
}

.sv-toc-box li {
    list-style: none;
}

.apple-ui .sv-toc-box a,
.apple-ui .sv-toc-box a:hover {
    display: block;
    margin-left: -3px;
    padding: 7px 0 7px 16px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.35;
    color: var(--a-text-2);
    text-decoration: none;
    transition: color .2s, border-color .2s;
}

.apple-ui .sv-toc-box a:hover {
    color: var(--a-text);
}

.apple-ui .sv-toc-box a.is-active {
    border-left-color: var(--a-blue);
    color: var(--a-text);
    font-weight: 600;
}


/* Kartu layanan: deskripsi singkat */
.apple-ui .sv-card-desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--a-text-2);
}

.sv-others .a-service-title,
.sv-index-grid .a-service-title {
    padding-top: 28px;
}

/* Daftar layanan */
.sv-index-list {
    padding: 40px 0 110px;
}

/* Section ini berlatar putih: kartu diberi latar abu agar tepinya terlihat */
.apple-ui .sv-index-grid .a-service {
    background: var(--a-bg-alt);
}

@media (max-width: 1068px) {
    .sv-body.has-toc .sv-layout {
        display: block;
    }

    .sv-toc {
        position: static;
        max-width: 728px;
        margin: 0 auto 32px;
    }

    .sv-toc-box {
        padding: 16px 20px;
        background: var(--a-bg-alt);
    }

    .sv-toc-box summary {
        margin: 0;
        font-size: 14px;
        letter-spacing: 0;
        text-transform: none;
        color: var(--a-text);
        cursor: pointer;
    }

    .sv-toc-box summary i {
        display: inline;
        font-size: 16px;
        transition: rotate .3s var(--a-ease);
    }

    .sv-toc-box[open] summary {
        margin-bottom: 12px;
    }

    .sv-toc-box[open] summary i {
        rotate: 180deg;
    }

    .sv-body.has-toc .sv-prose,
    .sv-body.has-toc .sv-foot {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 833px) {
    .sv-hero {
        padding-top: 44px;
    }

    .sv-appicon {
        width: 72px;
        height: 72px;
        border-radius: 20px;
        font-size: 38px;
    }

    .apple-ui .sv-title {
        font-size: 38px;
    }

    .sv-body {
        padding-top: 36px;
    }

    .sv-layout {
        padding: 0 18px;
    }

    .sv-body.has-toc .sv-prose {
        padding: 0;
    }

    .sv-index-list {
        padding: 20px 0 72px;
    }
}

/* ---------- Komponen isi layanan (dari database/data/services_content.php) ---------- */

.apple-ui .aa-prose p.sv-intro {
    font-size: 23px;
    line-height: 1.5;
    letter-spacing: -.018em;
    color: var(--a-text);
}

.apple-ui .aa-prose .sv-intro strong {
    font-weight: 700;
}

/* Grid fitur */
.apple-ui .aa-prose ul.sv-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 1.2em 0 1.6em;
}

.apple-ui .aa-prose ul.sv-features > li {
    margin: 0;
    padding: 20px 20px 20px 58px;
    border-radius: 18px;
    background: var(--a-bg-alt);
    font-size: 15px;
    line-height: 1.45;
    color: var(--a-text-2);
}

.apple-ui .aa-prose ul.sv-features > li::before {
    content: "\2713";
    top: 20px;
    left: 20px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--a-blue);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.apple-ui .aa-prose ul.sv-features > li strong {
    display: block;
    margin-bottom: 2px;
    font-size: 17px;
    color: var(--a-text);
}

/* Langkah proses bernomor (timeline) */
.apple-ui .aa-prose ol.sv-steps {
    margin: 1.4em 0 1.6em;
    counter-reset: sv-step;
}

.apple-ui .aa-prose ol.sv-steps > li {
    counter-increment: sv-step;
    margin: 0;
    padding: 0 0 26px 62px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.apple-ui .aa-prose ol.sv-steps > li::before {
    content: counter(sv-step);
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--a-text);
    color: var(--a-bg);
    font-size: 16px;
    font-weight: 700;
}

/* garis penghubung antar langkah */
.apple-ui .aa-prose ol.sv-steps > li::after {
    content: "";
    position: absolute;
    top: 46px;
    bottom: 6px;
    left: 19.5px;
    width: 1px;
    background: var(--a-line);
}

.apple-ui .aa-prose ol.sv-steps > li:last-child {
    padding-bottom: 0;
}

.apple-ui .aa-prose ol.sv-steps > li:last-child::after {
    display: none;
}

.apple-ui .aa-prose ol.sv-steps > li strong {
    display: block;
    padding-top: 8px;
    margin-bottom: 2px;
    font-size: 18px;
    color: var(--a-text);
}

/* Kartu paket & harga */
.aa-prose .sv-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 1.6em 0 1em;
    align-items: stretch;
}

.aa-prose .sv-plans:has(> .sv-plan:only-child) {
    grid-template-columns: minmax(0, 420px);
    justify-content: center;
}

.aa-prose .sv-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 30px 24px 24px;
    border-radius: 24px;
    background: var(--a-bg-alt);
    border: 1px solid transparent;
    transition: transform .4s var(--a-ease), box-shadow .4s var(--a-ease);
}

.aa-prose .sv-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px var(--a-shadow);
}

.aa-prose .sv-plan.is-featured {
    background: var(--a-card);
    border-color: var(--a-blue);
    box-shadow: 0 10px 34px rgba(0, 113, 227, .14);
}

.apple-ui .aa-prose .sv-plan p {
    margin: 0;
}

.apple-ui .aa-prose .sv-plan .sv-plan-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--a-blue);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    white-space: nowrap;
}

.apple-ui .aa-prose .sv-plan .sv-plan-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    color: var(--a-text-2);
}

/* Bagian paket & FAQ yang dirender dari tabel, di bawah konten */
.sv-extra {
    margin-top: 8px;
}

.apple-ui .aa-prose .sv-plan .sv-plan-price {
    margin-top: 8px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--a-text);
}

.apple-ui .aa-prose .sv-plan .sv-plan-price span {
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--a-text-3);
}

.apple-ui .aa-prose .sv-plan.is-custom .sv-plan-price {
    font-size: 28px;
}

.apple-ui .aa-prose .sv-plan .sv-plan-note {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--a-text-2);
}

.apple-ui .aa-prose ul.sv-plan-features {
    flex: 1;
    margin: 18px 0 22px;
    padding-top: 18px;
    border-top: 1px solid var(--a-line);
}

.apple-ui .aa-prose ul.sv-plan-features > li {
    margin-bottom: 10px;
    padding-left: 26px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--a-text);
}

.apple-ui .aa-prose ul.sv-plan-features > li::before {
    content: "\2713";
    top: 0;
    left: 2px;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    color: var(--a-blue);
    font-size: 14px;
    font-weight: 700;
}

.apple-ui .aa-prose .sv-plan-cta a,
.apple-ui .aa-prose .sv-plan-cta a:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--a-text);
    font-size: 15px;
    font-weight: 500;
    color: var(--a-bg);
    text-decoration: none;
    transition: opacity .2s, transform .2s var(--a-ease);
}

.apple-ui .aa-prose .sv-plan.is-featured .sv-plan-cta a {
    background: var(--a-blue);
    color: #fff;
}

.apple-ui .aa-prose .sv-plan-cta a:hover {
    opacity: .88;
}

.apple-ui .aa-prose .sv-plan-cta a:active {
    transform: scale(.97);
}

.apple-ui .aa-prose p.sv-plans-note {
    font-size: 14px;
    text-align: center;
    color: var(--a-text-3);
}

/* FAQ akordeon (dibuat view dari div.sv-faq) */
.aa-prose .sv-faq {
    margin: 1.2em 0 1.6em;
    border-top: 1px solid var(--a-line);
}

.aa-prose .sv-faq-item {
    border-bottom: 1px solid var(--a-line);
}

.aa-prose .sv-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    cursor: pointer;
    list-style: none;
}

.aa-prose .sv-faq-item summary::-webkit-details-marker {
    display: none;
}

.apple-ui .aa-prose .sv-faq-item summary h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.015em;
}

.aa-prose .sv-faq-item summary i {
    flex: 0 0 auto;
    font-size: 18px;
    color: var(--a-text-2);
    transition: rotate .35s var(--a-ease);
}

.aa-prose .sv-faq-item[open] summary i {
    rotate: 45deg;
}

.aa-prose .sv-faq-item summary:hover h3 {
    color: var(--a-link);
}

.apple-ui .aa-prose .sv-faq-a p {
    margin: 0 0 18px;
    padding-right: 34px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--a-text-2);
}

.aa-prose .sv-faq-item[open] .sv-faq-a {
    animation: sv-faq-in .4s var(--a-ease);
}

@keyframes sv-faq-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

@media (max-width: 833px) {
    .apple-ui .aa-prose p.sv-intro {
        font-size: 19px;
    }

    .apple-ui .aa-prose ul.sv-features {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .aa-prose .sv-plans {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .aa-prose .sv-plans:has(> .sv-plan:only-child) {
        grid-template-columns: 1fr;
    }

    .apple-ui .aa-prose .sv-faq-item summary h3 {
        font-size: 16px;
    }
}

/* =============================== KELAS =============================== */

.cl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.apple-ui .cl-card,
.apple-ui .cl-card:hover {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
}

.a-section.is-alt .cl-card {
    background: var(--a-card);
}

.cl-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--a-card);
}

.cl-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--a-card-ease, var(--a-ease));
}

.cl-card:hover .cl-card-img img {
    transform: scale(1.025);
}

.cl-badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
}

.cl-badges span,
.cl-hero-badges span {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 12px;
    font-weight: 600;
    color: #1d1d1f;
}

.cl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 24px;
}

.apple-ui .cl-card-title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.02em;
}

.apple-ui .cl-card-desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--a-text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.apple-ui .cl-card-length {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    color: var(--a-text-2);
}

.cl-card-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

.apple-ui .cl-price {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.cl-price s {
    font-size: 13px;
    color: var(--a-text-3);
}

.cl-price strong {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--a-text);
}

.cl-card .a-link {
    font-size: 15px;
}

/* Kelas belum tersedia */
.cl-empty {
    padding: 72px 24px;
    border-radius: 28px;
    background: var(--a-bg-alt);
    text-align: center;
}

.cl-empty .sv-appicon {
    margin-bottom: 22px;
}

.apple-ui .cl-empty h2 {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -.03em;
}

.apple-ui .cl-empty p {
    max-width: 560px;
    margin: 12px auto 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--a-text-2);
}

/* Detail kelas */
.cl-hero {
    padding: 72px 0 24px;
    text-align: center;
}

.cl-narrow {
    max-width: 880px;
}

.cl-hero-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 18px;
}

.cl-hero-badges span {
    background: var(--a-bg-alt);
    color: var(--a-text-2);
}

.cl-hero .sv-figure {
    margin-top: 48px;
    margin-bottom: 0;
}

.pd-spec dt i {
    font-size: 14px;
    vertical-align: -1px;
}

/* Info kelas: 3 kolom agar 5–6 tile tersusun rapi (4 tile → 4 kolom) */
.pd-specs.cl-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pd-specs.cl-facts.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 833px) {
    .pd-specs.cl-facts,
    .pd-specs.cl-facts.is-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cl-body {
    padding: 56px 0 24px;
}

.cl-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
    max-width: var(--a-wrap-lg);
    margin: 0 auto;
    padding: 0 22px;
}

.cl-main .aa-prose {
    max-width: 728px;
    margin: 0 0 24px;
    padding: 0;
}

.cl-main .aa-prose > h2:first-child {
    margin-top: 0;
}

/* Kurikulum: modul tanpa sub-judul, sejajarkan teks dengan nomor */
.apple-ui .aa-prose ol.cl-curriculum > li {
    padding-top: 9px;
    padding-bottom: 22px;
    font-size: 17px;
    color: var(--a-text);
}

.apple-ui .aa-prose ol.cl-curriculum > li::after {
    top: 46px;
}

/* Kartu daftar */
.cl-enroll-wrap {
    position: sticky;
    top: 80px;
}

.cl-enroll {
    padding: 28px 26px 24px;
    border-radius: 24px;
    background: var(--a-card);
    border: 1px solid var(--a-line);
    box-shadow: 0 12px 34px var(--a-shadow);
}

.apple-ui .cl-enroll-label {
    font-size: 13px;
    color: var(--a-text-2);
}

.apple-ui .cl-enroll-price {
    margin-top: 4px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--a-text);
}

.apple-ui .cl-enroll-original {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    font-size: 14px;
    color: var(--a-text-3);
}

.cl-enroll-original span {
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(52, 199, 89, .14);
    font-size: 12px;
    font-weight: 600;
    color: #248a3d;
}

.cl-enroll-facts {
    margin: 18px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--a-line);
    list-style: none;
}

.cl-enroll-facts li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--a-text-2);
    list-style: none;
}

.apple-ui .cl-enroll-btn,
.apple-ui .cl-enroll-btn:hover {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 13px 18px;
    border-radius: 999px;
    background: var(--a-blue);
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: background .2s, transform .2s var(--a-ease);
}

.apple-ui .cl-enroll-btn:hover {
    background: var(--a-blue-hover);
}

.apple-ui .cl-enroll-btn:active {
    transform: scale(.98);
}

.apple-ui .cl-enroll-ask,
.apple-ui .cl-enroll-ask:hover {
    display: block;
    margin-top: 12px;
    font-size: 14px;
    text-align: center;
    color: var(--a-link);
    text-decoration: none;
}

.apple-ui .cl-enroll-ask:hover {
    text-decoration: underline;
}

@media (max-width: 1068px) {
    .cl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cl-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .cl-enroll-wrap {
        position: static;
        max-width: 728px;
        order: -1;
    }
}

@media (max-width: 833px) {
    .cl-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .cl-hero {
        padding-top: 44px;
    }

    .cl-layout {
        padding: 0 18px;
    }

    .cl-body {
        padding-top: 36px;
    }

    .apple-ui .cl-empty h2 {
        font-size: 26px;
    }
}

/* ========================= DETAIL PORTOFOLIO ========================= */

.pd-hero {
    padding: 72px 0 0;
    text-align: center;
}

.pd-narrow {
    max-width: 880px;
}

.apple-ui .pd-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-2);
}

.apple-ui .pd-title {
    margin-top: 12px;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.04em;
}

.apple-ui .pd-client {
    margin-top: 16px;
    font-size: 21px;
    color: var(--a-text-2);
}

.pd-client strong {
    font-weight: 600;
    color: var(--a-text);
}

.pd-ctas {
    margin-top: 28px;
}

.pd-ctas .a-btn i {
    font-size: 18px;
}

.pd-hero .pd-figure {
    margin-top: 48px;
    margin-bottom: 0;
}

.pd-figure .aa-figure-img {
    aspect-ratio: 16 / 10;
}

.pd-figure .aa-figure-img img {
    object-position: top center;
}

/* Ringkasan proyek (gaya "spesifikasi" Apple) */
.pd-specs-wrap {
    padding: 56px 0 24px;
}

.pd-specs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 0;
}

.pd-spec {
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--a-bg-alt);
}

.pd-spec dt {
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-3);
}

.pd-spec dd {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--a-text);
}

.pd-spec-client {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-spec-client img {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    object-fit: contain;
    background: #fff;
}

.apple-ui .pd-spec-client a,
.apple-ui .pd-spec-client a:hover {
    color: var(--a-text);
    text-decoration: none;
}

.apple-ui .pd-spec-client a:hover {
    color: var(--a-link);
}

/* Tentang proyek */
.pd-about {
    padding: 64px 0 24px;
}

.apple-ui .pd-section-title {
    margin-bottom: 24px;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.pd-about .pd-section-title {
    text-align: left;
}

/* Galeri: digeser horizontal */
.pd-gallery-wrap {
    padding: 72px 0 24px;
}

.pd-gallery-wrap .a-head-row {
    margin-bottom: 28px;
}

.pd-gallery-wrap .pd-section-title {
    margin-bottom: 0;
}

.apple-ui .pd-gallery-count {
    font-size: 15px;
    color: var(--a-text-2);
}

.pd-gallery {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: max(22px, calc((100vw - var(--a-wrap-lg)) / 2 + 22px));
    padding: 4px max(22px, calc((100vw - var(--a-wrap-lg)) / 2 + 22px)) 16px;
    scrollbar-width: none;
}

.pd-gallery::-webkit-scrollbar {
    display: none;
}

.pd-shot {
    flex: 0 0 min(640px, 78vw);
    margin: 0;
    scroll-snap-align: start;
}

.pd-shot-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 24px;
    background: var(--a-bg-alt);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 16 / 10;
}

.pd-shot-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .7s var(--a-ease);
}

.pd-shot-btn:hover img {
    transform: scale(1.03);
}

.apple-ui .pd-shot figcaption {
    margin-top: 12px;
    padding: 0 4px;
    font-size: 14px;
    color: var(--a-text-2);
}

/* Lightbox */
.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 72px;
    visibility: hidden;
    pointer-events: none;
}

.pd-lightbox.is-open {
    visibility: visible;
    pointer-events: auto;
}

.pd-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    opacity: 0;
    transition: opacity .3s var(--a-ease);
}

.pd-lightbox.is-open .pd-lightbox-backdrop {
    opacity: 1;
}

.pd-lightbox.is-closing .pd-lightbox-backdrop {
    opacity: 0;
}

.pd-lightbox-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

.pd-lightbox-stage img {
    display: block;
    max-width: min(1400px, 100%);
    max-height: calc(100vh - 180px);
    width: auto;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    transform-origin: 0 0;
}

.pd-lightbox-stage figcaption {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 16px;
    font-family: var(--a-font);
    font-size: 15px;
    color: rgba(255, 255, 255, .86);
    opacity: 0;
    transition: opacity .3s var(--a-ease) .15s;
}

.pd-lightbox.is-open .pd-lightbox-stage figcaption {
    opacity: 1;
}

.pd-lightbox.is-closing .pd-lightbox-stage figcaption,
.pd-lightbox.is-closing .pd-lb-btn {
    opacity: 0;
    transition: opacity .12s ease;
}

.pd-lightbox-count {
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    font-variant-numeric: tabular-nums;
}

.pd-lb-btn {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    transition: background .2s, transform .2s var(--a-ease), opacity .3s;
}

.pd-lb-btn:hover {
    background: rgba(255, 255, 255, .26);
}

.pd-lb-btn:active {
    transform: scale(.92);
}

.pd-lb-btn[hidden] {
    display: none;
}

.pd-lb-close {
    top: 20px;
    right: 20px;
}

.pd-lb-prev,
.pd-lb-next {
    top: 50%;
    margin-top: -22px;
}

.pd-lb-prev {
    left: 16px;
}

.pd-lb-next {
    right: 16px;
}

/* Proyek berikutnya */
.pd-next-wrap {
    padding: 72px 0 96px;
}

.apple-ui .pd-next,
.apple-ui .pd-next:hover {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    border-radius: 28px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
    transition: transform .5s var(--a-ease), box-shadow .5s var(--a-ease);
}

.apple-ui .pd-next:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 50px var(--a-shadow);
}

.pd-next-img {
    min-height: 320px;
    overflow: hidden;
}

.pd-next-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .8s var(--a-ease);
}

.pd-next:hover .pd-next-img img {
    transform: scale(1.04);
}

.pd-next-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 44px;
}

.apple-ui .pd-next-title {
    margin-top: 10px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.03em;
}

.pd-next-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin-top: 24px;
    border-radius: 50%;
    background: var(--a-text);
    color: var(--a-bg);
    font-size: 20px;
    transition: transform .4s var(--a-spring);
}

.pd-next:hover .pd-next-arrow {
    transform: translateX(6px);
}

.apple-ui .pd-next-wrap .pd-all {
    margin-top: 28px;
    text-align: center;
}

@media (max-width: 833px) {
    .pd-hero {
        padding-top: 44px;
    }

    .apple-ui .pd-title {
        font-size: 38px;
    }

    .apple-ui .pd-client {
        font-size: 17px;
    }

    .pd-hero .pd-figure {
        margin-top: 32px;
    }

    .pd-figure .aa-figure-img {
        aspect-ratio: 4 / 3;
    }

    .pd-specs-wrap {
        padding-top: 36px;
    }

    .pd-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .pd-spec {
        padding: 18px;
        border-radius: 18px;
    }

    .pd-spec dd {
        font-size: 16px;
    }

    .apple-ui .pd-section-title {
        font-size: 30px;
    }

    .pd-gallery {
        gap: 12px;
        scroll-padding-left: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .pd-shot {
        flex-basis: 86vw;
    }

    .pd-shot-btn {
        border-radius: 18px;
    }

    .pd-lightbox {
        padding: 60px 12px 40px;
    }

    .pd-lb-prev,
    .pd-lb-next {
        top: auto;
        bottom: 20px;
        margin-top: 0;
    }

    .apple-ui .pd-next,
    .apple-ui .pd-next:hover {
        grid-template-columns: 1fr;
        border-radius: 22px;
    }

    .pd-next-img {
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .pd-next-body {
        padding: 24px 22px 28px;
    }

    .apple-ui .pd-next-title {
        font-size: 26px;
    }

    .pd-next-wrap {
        padding: 56px 0 72px;
    }
}

/* ========================== DETAIL ARTIKEL ========================== */

.aa-progress {
    position: fixed;
    top: 48px;
    left: 0;
    right: 0;
    z-index: 9989;
    height: 2px;
    pointer-events: none;
}

.aa-progress span {
    display: block;
    height: 100%;
    background: var(--a-blue);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

.aa-narrow {
    max-width: 728px;
    margin: 0 auto;
    padding: 0 24px;
}

.aa-head {
    padding: 72px 0 40px;
    text-align: center;
    /* scripts.js (template lama) menggeser setiap <header> turun 200px saat halaman dimuat;
       dikunci supaya judul tidak tertutup gambar */
    transform: none !important;
}

/* Animasi header artikel: CSS murni, langsung jalan saat halaman tergambar.
   Mulai dari opacity .01 (bukan 0) supaya tetap dihitung sebagai LCP oleh browser. */
@keyframes aa-rise {
    from {
        opacity: .01;
        transform: translate3d(0, 22px, 0);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.aa-rise {
    animation: aa-rise .9s var(--a-ease) both;
    animation-delay: calc(var(--rd, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce) {
    .aa-rise {
        animation: none;
    }
}

/* Breadcrumb */
.aa-crumbs {
    margin-bottom: 24px;
}

.aa-crumbs ol {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.aa-crumbs li {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: var(--a-text-3);
    list-style: none;
}

.aa-crumbs li + li::before {
    content: "\203A";
    margin: 0 8px;
    font-size: 15px;
    line-height: 1;
    color: var(--a-text-3);
}

.apple-ui .aa-crumbs a,
.apple-ui .aa-crumbs a:hover {
    color: var(--a-text-2);
    text-decoration: none;
    transition: color .2s;
}

.apple-ui .aa-crumbs a:hover {
    color: var(--a-link);
}

.apple-ui .aa-cat,
.apple-ui .aa-cat:hover {
    display: table;
    margin: 0 auto 18px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--a-bg-alt);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-2);
    text-decoration: none;
    transition: background .2s, color .2s;
}

.apple-ui a.aa-cat:hover {
    background: var(--a-pill-hover);
    color: var(--a-text);
}

.apple-ui .aa-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.035em;
}

.aa-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 28px;
    font-size: 14px;
    color: var(--a-text-2);
}

.aa-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aa-meta i {
    font-size: 16px;
}

.aa-author {
    font-weight: 600;
    color: var(--a-text);
}

.apple-ui .aa-author a,
.apple-ui .aa-author a:hover {
    color: var(--a-text);
    text-decoration: none;
}

.apple-ui .aa-author a:hover {
    color: var(--a-link);
}

.aa-author img,
.aa-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.aa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #0071e3, #5ac8fa);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

.aa-avatar.is-lg {
    width: 64px;
    height: 64px;
    font-size: 24px;
}

/* Gambar */
.aa-figure {
    max-width: 728px;
    margin: 40px auto;
    padding: 0 24px;
}

.aa-figure-hero {
    max-width: 1180px;
    margin-top: 0;
    margin-bottom: 56px;
}

.aa-figure-img {
    border-radius: 20px;
    overflow: hidden;
    background: var(--a-bg-alt);
}

.aa-figure-hero .aa-figure-img {
    border-radius: 28px;
    aspect-ratio: 16 / 9;
}

.aa-figure-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.apple-ui .aa-figure figcaption {
    max-width: 680px;
    margin: 14px auto 0;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: var(--a-text-3);
}

/* Isi artikel: tipografi ala Apple Newsroom */
.aa-body {
    padding-bottom: 24px;
}

.aa-prose {
    max-width: 728px;
    margin: 0 auto;
    padding: 0 24px;
    font-size: 19px;
    line-height: 1.68;
    letter-spacing: -.012em;
    color: var(--a-text);
    overflow-wrap: break-word;
}

.apple-ui .aa-prose p {
    margin: 0 0 1.25em;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: left;
}

/* Rata kiri-kanan dari editor (TinyMCE) dipertahankan di semua konten; pemenggalan kata agar spasi tidak renggang */
.apple-ui .aa-prose [style*="justify"] {
    text-align: justify !important;
    text-justify: inter-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.apple-ui .aa-prose h1,
.apple-ui .aa-prose h2,
.apple-ui .aa-prose h3,
.apple-ui .aa-prose h4,
.apple-ui .aa-prose h5,
.apple-ui .aa-prose h6 {
    margin: 1.8em 0 .6em;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--a-text);
}

.apple-ui .aa-prose h1,
.apple-ui .aa-prose h2 {
    font-size: 30px;
    line-height: 1.2;
}

.apple-ui .aa-prose h3 {
    font-size: 24px;
    line-height: 1.25;
}

.apple-ui .aa-prose h4,
.apple-ui .aa-prose h5,
.apple-ui .aa-prose h6 {
    font-size: 20px;
    line-height: 1.3;
}

.apple-ui .aa-prose a {
    color: var(--a-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.apple-ui .aa-prose a:hover {
    text-decoration-thickness: 2px;
}

.apple-ui .aa-prose strong,
.apple-ui .aa-prose b {
    font-weight: 600;
    color: var(--a-text);
}

.apple-ui .aa-prose ul,
.apple-ui .aa-prose ol {
    margin: 0 0 1.25em;
    padding: 0;
    list-style: none;
}

.apple-ui .aa-prose li {
    position: relative;
    margin-bottom: .5em;
    padding-left: 1.4em;
    list-style: none;
}

.apple-ui .aa-prose ul > li::before {
    content: "";
    position: absolute;
    left: .3em;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--a-text);
}

.apple-ui .aa-prose ol {
    counter-reset: aa-ol;
}

.apple-ui .aa-prose ol > li {
    counter-increment: aa-ol;
}

.apple-ui .aa-prose ol > li::before {
    content: counter(aa-ol) ".";
    position: absolute;
    left: 0;
    font-weight: 600;
    color: var(--a-text-2);
}

.apple-ui .aa-prose li p {
    margin: 0;
}

.apple-ui .aa-prose blockquote {
    margin: 1.6em 0;
    padding: 4px 0 4px 24px;
    border: 0;
    border-left: 3px solid var(--a-blue);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.02em;
    color: var(--a-text);
}

.apple-ui .aa-prose blockquote p:last-child {
    margin-bottom: 0;
}

.apple-ui .aa-prose img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.6em auto;
    border-radius: 16px;
}

.apple-ui .aa-prose figure {
    margin: 1.6em 0;
}

.apple-ui .aa-prose figcaption {
    margin-top: 10px;
    font-size: 13px;
    text-align: center;
    color: var(--a-text-3);
}

.apple-ui .aa-prose hr {
    margin: 2.4em 0;
    border: 0;
    border-top: 1px solid var(--a-line);
}

.apple-ui .aa-prose iframe,
.apple-ui .aa-prose video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: 1.6em 0;
    border: 0;
    border-radius: 16px;
}

.aa-table {
    margin: 1.6em 0;
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid var(--a-line);
}

.apple-ui .aa-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.5;
}

.apple-ui .aa-prose th,
.apple-ui .aa-prose td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--a-line);
    text-align: left;
    vertical-align: top;
}

.apple-ui .aa-prose th {
    background: var(--a-bg-alt);
    font-weight: 600;
}

.apple-ui .aa-prose tr:last-child td {
    border-bottom: 0;
}

.apple-ui .aa-prose :not(pre) > code {
    padding: .15em .4em;
    border-radius: 6px;
    background: var(--a-bg-alt);
    font-size: .88em;
    color: var(--a-text);
}

.apple-ui .aa-prose pre[class*="language-"],
.apple-ui .aa-prose pre {
    margin: 1.6em 0;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.6;
}

.apple-ui .aa-prose div.code-toolbar > .toolbar {
    top: 10px;
    right: 10px;
}

.apple-ui .aa-prose div.code-toolbar > .toolbar button {
    padding: 4px 10px;
    border-radius: 999px;
    font-family: var(--a-font);
    font-size: 12px;
}

/* Bawah artikel */
.aa-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 16px;
    padding: 28px 0;
    border-top: 1px solid var(--a-line);
    border-bottom: 1px solid var(--a-line);
}

.aa-foot-label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-3);
}

.aa-share-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.apple-ui .aa-share-btn,
.apple-ui .aa-share-btn:hover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    background: var(--a-bg-alt);
    font-family: var(--a-font);
    font-size: 14px;
    font-weight: 500;
    color: var(--a-text);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s var(--a-ease);
}

.aa-share-btn i {
    font-size: 19px;
}

.apple-ui .aa-share-btn:hover {
    background: var(--a-pill-hover);
}

.apple-ui .aa-share-btn:active {
    transform: scale(.94);
}

.apple-ui .aa-share-btn.is-done {
    background: #34c759;
    color: #fff;
}

.aa-share-btn[hidden] {
    display: none !important;
}

/* Kartu penulis */
.aa-author-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin: 40px 0;
    padding: 28px;
    border-radius: 24px;
    background: var(--a-bg-alt);
}

.aa-author-card > img {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.apple-ui .aa-author-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-3);
}

.apple-ui .aa-author-name {
    margin-top: 2px;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--a-text);
}

.apple-ui .aa-author-desc {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.aa-author-card .a-link {
    margin-top: 10px;
    font-size: 15px;
}

#container-0246e4916adab5a4f15b3074e7eb5660:not(:empty) {
    margin: 40px 0;
}

/* Baca juga */
.aa-related {
    margin-top: 72px;
}

/* 4 kolom di desktop, 2×2 di tablet, 1 kolom di HP */
.aa-related-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.apple-ui .aa-related .a-post {
    background: var(--a-card);
}

.aa-related .a-post-body {
    padding: 18px 20px 22px;
}

.apple-ui .aa-related .a-post-title {
    font-size: 18px;
    line-height: 1.28;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 1068px) {
    .aa-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 833px) {
    .aa-head {
        padding: 44px 0 28px;
    }

    .apple-ui .aa-title {
        font-size: 34px;
    }

    .aa-meta {
        gap: 8px 16px;
        font-size: 13px;
    }

    .aa-narrow,
    .aa-prose,
    .aa-figure {
        padding: 0 18px;
    }

    .aa-figure-hero {
        padding: 0 12px;
        margin-bottom: 36px;
    }

    .aa-figure-hero .aa-figure-img {
        border-radius: 20px;
        aspect-ratio: 4 / 3;
    }

    .aa-prose {
        font-size: 17px;
        line-height: 1.65;
    }

    .apple-ui .aa-prose h1,
    .apple-ui .aa-prose h2 {
        font-size: 25px;
    }

    .apple-ui .aa-prose h3 {
        font-size: 21px;
    }

    .apple-ui .aa-prose blockquote {
        font-size: 20px;
    }

    .aa-foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .aa-author-card {
        padding: 22px;
        gap: 16px;
    }

    .aa-related {
        margin-top: 48px;
    }

    .aa-related-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsif */
@media (max-width: 1068px) {
    .a-slider {
        --a-slide-w: calc(100vw - 96px);
    }

    .apple-ui .a-slide-title {
        font-size: 44px;
    }

    .apple-ui .a-title {
        font-size: 48px;
    }

    .a-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 833px) {
    body.apple-ui {
        font-size: 16px;
    }

    .a-section {
        padding: 72px 0;
    }

    .a-slider {
        --a-slide-w: calc(100vw - 48px);
        --a-slide-gap: 12px;
        padding-top: 16px;
    }

    .a-slide {
        aspect-ratio: 4 / 5;
        border-radius: 22px;
    }

    .a-slide-caption {
        padding: 0 24px 28px;
    }

    .apple-ui .a-slide-title {
        font-size: 32px;
    }

    .apple-ui .a-slide-text {
        font-size: 17px;
    }

    .a-slide .a-ctas {
        gap: 12px 22px;
        margin-top: 18px;
    }

    .a-slider-dots {
        height: 40px;
        padding: 0 16px;
        gap: 9px;
    }

    .a-dot.is-active {
        width: 36px;
    }

    .a-slider-play {
        width: 40px;
        height: 40px;
    }

    .a-wrap,
    .a-wrap-lg {
        padding: 0 16px;
    }

    .apple-ui .a-title,
    .a-head-row .a-title {
        font-size: 36px;
    }

    .apple-ui .a-lead {
        font-size: 18px;
    }

    .a-head {
        margin-bottom: 40px;
    }

    .a-head-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .a-services,
    .a-posts {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .apple-ui .a-service,
    .apple-ui .a-service:hover {
        min-height: 0;
    }

    .apple-ui .a-service-title {
        padding-top: 28px;
    }

    .a-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 16px;
    }

    .apple-ui .a-stat-num {
        font-size: 48px;
    }

    .a-quote {
        flex-basis: 84%;
        min-height: 380px;
    }

    .a-scroller {
        scroll-padding-left: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .a-cta {
        padding: 88px 0;
    }
}

/* =====================================================================
   Scrollbar overlay ala macOS (public/assets_public/assets/js/apple-scrollbar.js)
   ===================================================================== */

:root {
    --a-sbar-thumb: rgba(0, 0, 0, .32);
    --a-sbar-thumb-hover: rgba(0, 0, 0, .5);
}

:root[data-theme="dark"] {
    --a-sbar-thumb: rgba(255, 255, 255, .32);
    --a-sbar-thumb-hover: rgba(255, 255, 255, .5);
}

/* Scrollbar bawaan disembunyikan; halaman tetap bisa di-scroll seperti biasa */
html.a-overlay-scroll {
    scrollbar-width: none;
}

html.a-overlay-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.a-sbar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9995;
    width: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .6s var(--a-ease);
}

.a-sbar.is-visible,
.a-sbar.is-hover,
.a-sbar.is-dragging {
    opacity: 1;
    pointer-events: auto;
    transition: opacity .2s var(--a-ease);
}

.a-sbar.is-disabled {
    display: none;
}

.a-sbar-thumb {
    position: absolute;
    top: 0;
    right: 3px;
    width: 6px;
    min-height: 36px;
    border-radius: 999px;
    background: var(--a-sbar-thumb);
    will-change: transform;
    cursor: default;
    transition: width .2s var(--a-ease), right .2s var(--a-ease), background .2s;
}

.a-sbar.is-hover .a-sbar-thumb,
.a-sbar.is-dragging .a-sbar-thumb {
    right: 2px;
    width: 9px;
    background: var(--a-sbar-thumb-hover);
}

/* Saat menarik scrollbar: jangan sampai teks ikut terseleksi */
html.a-sbar-dragging,
html.a-sbar-dragging * {
    user-select: none !important;
    cursor: default !important;
}

/* =====================================================================
   Hover kartu yang lebih lembut (mengatur ulang aturan hover di atas)
   - naik 2px, 0,6 detik, kurva lembut
   - bayangan beralih dari sangat tipis ke lembut (jumlah lapisan sama)
   - lapisan GPU sendiri agar tidak patah & teks tetap tajam
   ===================================================================== */

:root {
    --a-card-ease: cubic-bezier(.25, .1, .25, 1);
    --a-card-shadow-rest: 0 1px 2px rgba(0, 0, 0, .02), 0 6px 16px rgba(0, 0, 0, 0);
    --a-card-shadow-hover: 0 2px 6px rgba(0, 0, 0, .04), 0 16px 36px rgba(0, 0, 0, .08);
}

/* Mode gelap: tepi tipis yang menyala, bayangan hitam tidak terlihat di latar hitam */
:root[data-theme="dark"] {
    --a-card-shadow-rest: 0 0 0 1px rgba(255, 255, 255, 0), 0 6px 16px rgba(0, 0, 0, 0);
    --a-card-shadow-hover: 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 40px rgba(0, 0, 0, .45);
}

/* :not(.a-reveal) → jangan ganggu animasi muncul-saat-scroll; berlaku setelah
   apple.js melepas class a-reveal (animasi muncul selesai) */
.apple-ui .a-service:not(.a-reveal),
.apple-ui .a-post:not(.a-reveal),
.apple-ui .ab-feature:not(.a-reveal),
.apple-ui .ap-card:not(.a-reveal),
.apple-ui .pd-next:not(.a-reveal),
.apple-ui .cl-card:not(.a-reveal),
.aa-prose .sv-plan:not(.is-featured) {
    box-shadow: var(--a-card-shadow-rest);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
    transition: transform .6s var(--a-card-ease), box-shadow .6s var(--a-card-ease), opacity .28s ease;
}

.aa-prose .sv-plan.is-featured {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
    transition: transform .6s var(--a-card-ease);
}

.apple-ui .a-service:not(.a-reveal):hover,
.apple-ui .a-post:not(.a-reveal):hover,
.apple-ui .ab-feature:not(.a-reveal):hover,
.apple-ui .ap-card:not(.a-reveal):hover,
.apple-ui .pd-next:not(.a-reveal):hover,
.apple-ui .cl-card:not(.a-reveal):hover,
.aa-prose .sv-plan:not(.is-featured):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--a-card-shadow-hover);
}

.aa-prose .sv-plan.is-featured:hover {
    transform: translate3d(0, -2px, 0);
}

/* Zoom gambar di dalam kartu ikut diperhalus */
.ap-card .ap-card-img img,
.pd-next .pd-next-img img {
    transition: transform 1s var(--a-card-ease);
}

.ap-card:hover .ap-card-img img,
.pd-next:hover .pd-next-img img {
    transform: scale(1.025);
}

@media (prefers-reduced-motion: reduce) {
    .apple-ui .a-service,
    .apple-ui .a-post,
    .apple-ui .ab-feature,
    .apple-ui .ap-card,
    .apple-ui .pd-next,
    .aa-prose .sv-plan {
        transition: box-shadow .2s ease;
    }

    .apple-ui .a-service:hover,
    .apple-ui .a-post:hover,
    .apple-ui .ab-feature:hover,
    .apple-ui .ap-card:hover,
    .apple-ui .pd-next:hover,
    .aa-prose .sv-plan:hover {
        transform: none;
    }
}

/* =============================== TOKO =============================== */

.apple-ui {
    /* Foto produk berlatar putih: bidang gambar tetap putih di kedua mode */
    --sp-img-bg: #ffffff;
}

/* Kolom pencarian berbentuk pil */
.sp-search {
    position: relative;
    flex: 1 1 280px;
    max-width: 420px;
    margin: 0;
}

.sp-search > i {
    position: absolute;
    top: 50%;
    left: 16px;
    font-size: 18px;
    color: var(--a-text-3);
    transform: translateY(-50%);
    pointer-events: none;
}

.apple-ui .sp-search input {
    width: 100%;
    height: 44px;
    padding: 0 18px 0 44px;
    border: 0;
    border-radius: 999px;
    background: var(--a-bg-alt);
    font-family: var(--a-font);
    font-size: 16px;
    color: var(--a-text);
    outline: none;
    box-shadow: 0 0 0 0 transparent;
    transition: background .25s, box-shadow .25s var(--a-ease);
}

.apple-ui .sp-search input::placeholder {
    color: var(--a-text-3);
}

.apple-ui .sp-search input:focus {
    background: var(--a-card);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, .35);
}

/* Grid produk */
.sp-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sp-grid.is-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.apple-ui .sp-card,
.apple-ui .sp-card:hover {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
}

.a-section.is-alt .sp-card {
    background: var(--a-card);
}

.apple-ui .sp-card:not(.a-reveal) {
    box-shadow: var(--a-card-shadow-rest);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    will-change: transform;
    transition: transform .6s var(--a-card-ease), box-shadow .6s var(--a-card-ease);
}

.apple-ui .sp-card:not(.a-reveal):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--a-card-shadow-hover);
}

.sp-card-img {
    aspect-ratio: 16 / 9;
    background: var(--sp-img-bg);
    overflow: hidden;
}

.sp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 1s var(--a-card-ease);
}

.sp-card:hover .sp-card-img img {
    transform: scale(1.03);
}

.sp-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 26px 24px;
}

.apple-ui .sp-card-cat {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-2);
}

.apple-ui .sp-card-title {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sp-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
}

.apple-ui .sp-price {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--a-text);
}

.apple-ui .sp-price.is-ask {
    font-size: 15px;
    font-weight: 500;
    color: var(--a-text-2);
}

.sp-card .a-link {
    font-size: 15px;
}

/* Detail produk */
.sp-hero {
    padding: 88px 0 40px;
}

.sp-main {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    margin-top: 24px;
}

.sp-figure {
    position: sticky;
    top: 76px;
    margin: 0;
}

.sp-figure-btn {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    border-radius: 32px;
    background: var(--sp-img-bg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
    cursor: zoom-in;
    overflow: hidden;
}

.sp-figure-btn:disabled {
    cursor: default;
}

.sp-figure-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 1s var(--a-card-ease);
}

.sp-figure-btn:not(:disabled):hover img {
    transform: scale(1.03);
}

.sp-zoom-hint {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--a-glass);
    color: var(--a-text);
    font-size: 19px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;
    transform: scale(.9);
    transition: opacity .3s, transform .3s var(--a-spring);
}

.sp-figure-btn:hover .sp-zoom-hint,
.sp-figure-btn:focus-visible .sp-zoom-hint {
    opacity: 1;
    transform: none;
}

.sp-info {
    padding-top: 8px;
}

.apple-ui .sp-chip,
.apple-ui a.sp-chip:hover {
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--a-bg-alt);
    font-size: 13px;
    font-weight: 500;
    color: var(--a-text-2);
    text-decoration: none;
    transition: background .2s;
}

.apple-ui a.sp-chip:hover {
    background: var(--a-pill-hover);
    color: var(--a-text);
}

.apple-ui .sp-title {
    margin: 0;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.sp-price-box {
    margin-top: 22px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--a-line);
}

.apple-ui .sp-price-big {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--a-text);
}

.apple-ui .sp-price-big.is-ask {
    font-size: 24px;
}

.apple-ui .sp-price-note {
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--a-text-2);
}

.sp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.sp-actions .a-btn {
    flex: 1 1 200px;
    justify-content: center;
    text-align: center;
}

.sp-perks {
    display: grid;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.apple-ui .sp-perks li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--a-text);
    list-style: none;
}

.sp-perks i {
    font-size: 22px;
    color: var(--a-blue);
}

.sp-share {
    margin-top: 32px;
}

.sp-desc-wrap {
    padding: 56px 0 72px;
}

.aa-prose.sp-desc h3 {
    margin-top: 32px;
}

.aa-prose.sp-desc h3:first-child {
    margin-top: 0;
}

.apple-ui .aa-prose ul.sp-checks > li {
    padding-left: 30px;
}

.apple-ui .aa-prose ul.sp-checks > li::before {
    top: .3em;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--a-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.sp-related + .a-cta {
    margin-top: 0;
}

@media (max-width: 1068px) {
    .sp-grid.is-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sp-main {
        gap: 36px;
    }
}

@media (max-width: 833px) {
    .sp-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    /* Baris filter menjadi kolom di mobile: flex-basis jangan jadi tinggi */
    .sp-search {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    .sp-card-body {
        padding: 16px 16px 18px;
    }

    .apple-ui .sp-card-title {
        font-size: 16px;
    }

    .sp-card-foot .a-link {
        display: none;
    }

    .sp-hero {
        padding: 72px 0 24px;
    }

    .sp-main {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 16px;
    }

    .sp-figure {
        position: static;
    }

    .sp-figure-btn {
        border-radius: 24px;
    }

    .apple-ui .sp-title {
        font-size: 30px;
    }

    .apple-ui .sp-price-big {
        font-size: 24px;
    }

    .sp-desc-wrap {
        padding: 32px 0 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apple-ui .sp-card:not(.a-reveal) {
        transition: box-shadow .2s ease;
    }

    .apple-ui .sp-card:not(.a-reveal):hover {
        transform: none;
    }
}

/* =============================== TENTANG KAMI =============================== */

.au-stats-wrap {
    padding: 24px 0 8px;
}

.au-stats-wrap .a-stats {
    margin-top: 0;
}

.au-story {
    padding: 72px 0 96px;
}

.au-values {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin-top: 56px;
}

.au-value {
    padding: 30px 28px 32px;
    border-radius: 24px;
    background: var(--a-card);
}

.apple-ui .au-value-title {
    margin: 20px 0 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.apple-ui .au-value-desc {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.apple-ui .au-clients-lead {
    margin-bottom: 40px;
    font-size: 17px;
    text-align: center;
}

.au-clients-lead .a-link {
    margin-left: 6px;
}

@media (max-width: 1068px) {
    .au-values {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 833px) {
    .au-story {
        padding: 40px 0 64px;
    }

    .au-values {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 36px;
    }

    .au-value {
        padding: 24px 22px 26px;
        border-radius: 22px;
    }
}

/* =============================== KLIEN KAMI =============================== */

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

.a-stats.ck-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ck-list {
    padding: 56px 0 110px;
}

.ck-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apple-ui .ck-card {
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    background: var(--a-bg-alt);
    overflow: hidden;
    list-style: none;
}

.apple-ui .ck-card:not(.a-reveal) {
    box-shadow: var(--a-card-shadow-rest);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition: transform .6s var(--a-card-ease), box-shadow .6s var(--a-card-ease);
}

.apple-ui .ck-card:not(.a-reveal):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--a-card-shadow-hover);
}

.apple-ui .ck-main,
.apple-ui .ck-main:hover {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 26px 24px;
    color: var(--a-text);
    text-decoration: none;
}

.ck-logo {
    display: grid;
    place-items: center;
    height: 110px;
    margin-bottom: 20px;
    border-radius: 16px;
    background: var(--a-card);
}

.ck-logo img {
    max-width: 70%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: var(--a-logo-filter);
    opacity: .7;
    transition: filter .5s var(--a-card-ease), opacity .5s var(--a-card-ease), transform .8s var(--a-card-ease);
}

/* Mode gelap: bingkai logo tetap terang (filter putih membuat logo padat jadi bentuk polos) */
:root[data-theme="dark"] .ck-logo {
    background: #ececf0;
}

:root[data-theme="dark"] .ck-logo img {
    filter: grayscale(1);
}

.ck-card:hover .ck-logo img,
.ck-main:focus-visible .ck-logo img {
    filter: none;
    opacity: 1;
    transform: scale(1.04);
}

.apple-ui .ck-name {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.apple-ui .ck-domain {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 0;
    font-size: 14px;
    color: var(--a-link);
    overflow-wrap: anywhere;
}

.ck-domain i {
    font-size: 13px;
    transition: transform .3s var(--a-ease);
}

.ck-main:hover .ck-domain i {
    transform: translate(2px, -2px);
}

.apple-ui .ck-desc {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.apple-ui .ck-project,
.apple-ui .ck-project:hover {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 26px 24px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--a-card);
    font-size: 14px;
    font-weight: 500;
    color: var(--a-text);
    text-decoration: none;
    transition: background .2s;
}

.apple-ui .ck-project:hover {
    background: var(--a-pill-hover);
}

.ck-project i {
    font-size: 18px;
    color: var(--a-blue);
}

@media (max-width: 1068px) {
    .ck-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 833px) {
    .ck-list {
        padding: 32px 0 72px;
    }

    .ck-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .apple-ui .ck-card {
        border-radius: 20px;
    }

    .apple-ui .ck-main,
    .apple-ui .ck-main:hover {
        padding: 16px 14px 16px;
    }

    .ck-logo {
        height: 84px;
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .apple-ui .ck-name {
        font-size: 16px;
    }

    .apple-ui .ck-domain {
        font-size: 12px;
    }

    .apple-ui .ck-desc {
        display: none;
    }

    .apple-ui .ck-project,
    .apple-ui .ck-project:hover {
        margin: 0 14px 14px;
        padding: 8px 10px;
        font-size: 13px;
    }

    .a-stats.ck-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .ck-stats .a-stat-num {
        font-size: 34px;
    }

    .ck-stats .a-stat-label {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apple-ui .ck-card:not(.a-reveal):hover {
        transform: none;
    }
}

/* =============================== KONTAK =============================== */

.ct-wrap {
    padding: 40px 0 110px;
}

.ct-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px;
    align-items: start;
}

.ct-info {
    display: grid;
    gap: 14px;
}

.apple-ui .ct-item,
.apple-ui a.ct-item:hover {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 22px 24px;
    border-radius: 22px;
    background: var(--a-bg-alt);
    color: var(--a-text);
    text-decoration: none;
}

.apple-ui a.ct-item {
    box-shadow: var(--a-card-shadow-rest);
    transition: transform .6s var(--a-card-ease), box-shadow .6s var(--a-card-ease);
}

.apple-ui a.ct-item:hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--a-card-shadow-hover);
}

.ct-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--a-blue);
    color: #fff;
    font-size: 22px;
}

.ct-item.is-wa .ct-icon {
    background: #25d366;
}

.ct-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.apple-ui .ct-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--a-text-3);
}

.apple-ui .ct-value {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

.apple-ui .ct-note {
    margin-top: 4px;
    font-size: 14px;
    color: var(--a-text-2);
}

.ct-arrow {
    margin-left: auto;
    font-size: 18px;
    color: var(--a-text-3);
    transition: transform .3s var(--a-ease), color .3s;
}

.ct-item:hover .ct-arrow {
    color: var(--a-blue);
    transform: translate(2px, -2px);
}

.ct-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 4px 0;
}

/* Kartu formulir */
.ct-form-card {
    padding: 40px;
    border-radius: 28px;
    background: var(--a-bg-alt);
}

.apple-ui .ct-form-title {
    margin: 0 0 28px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.ct-hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ct-field {
    min-width: 0;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.ct-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.apple-ui .ct-flabel {
    display: block;
    margin: 0 0 8px;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--a-text);
}

.ct-flabel span {
    font-weight: 400;
    color: var(--a-text-3);
}

.apple-ui .ct-input {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--a-card);
    font-family: var(--a-font);
    font-size: 16px;
    line-height: 1.4;
    color: var(--a-text);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--a-line);
    transition: box-shadow .25s var(--a-ease), border-color .25s;
}

.apple-ui textarea.ct-input {
    min-height: 140px;
    resize: vertical;
}

.apple-ui .ct-input::placeholder {
    color: var(--a-text-3);
}

.apple-ui .ct-input:focus {
    box-shadow: inset 0 0 0 1px var(--a-blue), 0 0 0 4px rgba(0, 113, 227, .2);
}

.apple-ui .ct-input.is-invalid {
    box-shadow: inset 0 0 0 1px #ff3b30, 0 0 0 4px rgba(255, 59, 48, .14);
}

.apple-ui .ct-error {
    margin: 8px 0 0;
    font-size: 13px;
    color: #ff3b30;
}

.ct-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ct-count {
    margin-top: 8px;
    font-size: 12px;
    color: var(--a-text-3);
    font-variant-numeric: tabular-nums;
}

/* Pilihan topik berupa pil */
.ct-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ct-pill {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ct-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ct-pill span {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--a-card);
    box-shadow: inset 0 0 0 1px var(--a-line);
    font-size: 14px;
    font-weight: 500;
    color: var(--a-text);
    transition: background .25s, color .25s, box-shadow .25s, transform .2s var(--a-ease);
}

.ct-pill:hover span {
    box-shadow: inset 0 0 0 1px var(--a-text-3);
}

.ct-pill:active span {
    transform: scale(.96);
}

.ct-pill input:checked + span {
    background: var(--a-text);
    color: var(--a-bg);
    box-shadow: none;
}

.ct-pill input:focus-visible + span {
    outline: 2px solid var(--a-blue);
    outline-offset: 2px;
}

/* Tombol kirim + status mengirim */
.apple-ui .ct-submit {
    position: relative;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: 17px;
    border: 0;
    cursor: pointer;
}

.ct-submit-busy {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0;
    transition: opacity .2s;
}

.ct-submit.is-busy {
    pointer-events: none;
}

.ct-submit.is-busy .ct-submit-label {
    opacity: 0;
}

.ct-submit.is-busy .ct-submit-busy {
    opacity: 1;
}

.ct-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ct-spin .8s linear infinite;
}

@keyframes ct-spin {
    to {
        transform: rotate(360deg);
    }
}

.apple-ui .ct-privacy {
    margin: 14px 0 0;
    font-size: 13px;
    text-align: center;
    color: var(--a-text-3);
}

/* Status terkirim */
.ct-success {
    padding: 24px 0;
    text-align: center;
    animation: ct-pop .6s var(--a-spring);
}

.ct-success-icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #34c759;
    color: #fff;
    font-size: 30px;
}

.apple-ui .ct-success h2 {
    margin: 20px 0 0;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.apple-ui .ct-success p {
    max-width: 380px;
    margin: 10px auto 24px;
    font-size: 16px;
    color: var(--a-text-2);
}

@keyframes ct-pop {
    from {
        opacity: 0;
        transform: scale(.94);
    }
}

.ct-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* Judul sejajar di semua kartu, tautan menempel di bawah */
.apple-ui .ct-links .a-service-title {
    margin-top: 0;
    padding-top: 28px;
}

.apple-ui .ct-links .a-service .a-link {
    margin-top: auto;
    padding-top: 14px;
}

@media (max-width: 1068px) {
    .ct-grid {
        grid-template-columns: 1fr;
    }

    .ct-info {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ct-social {
        grid-column: 1 / -1;
    }
}

@media (max-width: 833px) {
    .ct-wrap {
        padding: 24px 0 72px;
    }

    .ct-info {
        grid-template-columns: 1fr;
    }

    .ct-form-card {
        padding: 26px 20px;
        border-radius: 24px;
    }

    .ct-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .ct-links {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* =============================== FAQ =============================== */

.fq-search {
    max-width: 520px;
    margin-top: 32px;
}

.fq-wrap {
    padding: 24px 0 110px;
}

.fq-list {
    border-top: 1px solid var(--a-line);
}

.fq-item {
    border-bottom: 1px solid var(--a-line);
}

.fq-item[hidden] {
    display: none !important;
}

.fq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 4px;
    cursor: pointer;
    list-style: none;
}

.fq-q::-webkit-details-marker {
    display: none;
}

.apple-ui .fq-q h2 {
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--a-text);
    transition: color .2s;
}

.fq-q:hover h2 {
    color: var(--a-blue);
}

/* Ikon plus yang berputar menjadi minus */
.fq-toggle {
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--a-bg-alt);
    transition: background .25s, transform .4s var(--a-ease);
}

.fq-toggle::before,
.fq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 2px;
    border-radius: 2px;
    background: var(--a-text);
    transform: translate(-50%, -50%);
    transition: transform .4s var(--a-ease);
}

.fq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.fq-item[open]:not(.is-closing) .fq-toggle {
    background: var(--a-text);
    transform: rotate(180deg);
}

.fq-item[open]:not(.is-closing) .fq-toggle::before,
.fq-item[open]:not(.is-closing) .fq-toggle::after {
    background: var(--a-bg);
}

.fq-item[open]:not(.is-closing) .fq-toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.fq-a {
    overflow: hidden;
}

.apple-ui .fq-a-inner.aa-prose {
    max-width: none;
    margin: 0;
    padding: 0 56px 28px 4px;
}

.fq-a-inner > :last-child {
    margin-bottom: 0;
}

.fq-none {
    margin-top: 24px;
}

@media (max-width: 833px) {
    .fq-wrap {
        padding: 8px 0 72px;
    }

    .fq-q {
        padding: 20px 0;
        gap: 16px;
    }

    .apple-ui .fq-q h2 {
        font-size: 18px;
    }

    .apple-ui .fq-a-inner.aa-prose {
        padding: 0 0 22px;
    }
}

/* =============================== PROMO =============================== */

.pr-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.apple-ui .pr-card,
.apple-ui .pr-card:hover {
    display: flex;
    flex-direction: column;
    border-radius: 28px;
    background: var(--a-bg-alt);
    overflow: hidden;
    color: var(--a-text);
    text-decoration: none;
}

.a-section.is-alt .pr-card {
    background: var(--a-card);
}

.apple-ui .pr-card:not(.a-reveal) {
    box-shadow: var(--a-card-shadow-rest);
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    transition: transform .6s var(--a-card-ease), box-shadow .6s var(--a-card-ease);
}

.apple-ui .pr-card:not(.a-reveal):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--a-card-shadow-hover);
}

.pr-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--a-card);
}

.pr-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--a-card-ease);
}

.pr-card:hover .pr-card-img img {
    transform: scale(1.025);
}

/* Gambar promo gagal dimuat: latar gradasi + ikon tag */
.pr-card-img.is-missing {
    background: linear-gradient(135deg, #0071e3 0%, #7d4bff 55%, #ff3b6b 100%);
}

.pr-card-img.is-missing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M243.3 137.4 140 34.1A8 8 0 0 0 134.3 32H40a8 8 0 0 0-8 8v94.3a8 8 0 0 0 2.3 5.7l103.4 103.3a16 16 0 0 0 22.6 0l83-83a16 16 0 0 0 0-22.9Z' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='14' stroke-linejoin='round'/%3E%3Ccircle cx='84' cy='84' r='14' fill='%23fff' fill-opacity='.85'/%3E%3C/svg%3E") center / 96px no-repeat;
}

.pr-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #ff3b30;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 6px 16px rgba(255, 59, 48, .3);
}

.pr-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 26px 28px 28px;
}

.apple-ui .pr-card-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.apple-ui .pr-card-excerpt {
    margin: 12px 0 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.pr-card .a-link {
    margin-top: auto;
    padding-top: 18px;
    font-size: 15px;
}

/* Satu promo: kartu horizontal lebar */
.pr-grid.is-single {
    grid-template-columns: 1fr;
}

.pr-grid.is-single .pr-card {
    flex-direction: row;
}

.pr-grid.is-single .pr-card-img {
    flex: 0 0 56%;
    aspect-ratio: auto;
    min-height: 380px;
}

.pr-grid.is-single .pr-card-body {
    justify-content: center;
    padding: 48px 52px;
}

.apple-ui .pr-grid.is-single .pr-card-title {
    font-size: 36px;
    letter-spacing: -.03em;
}

.apple-ui .pr-grid.is-single .pr-card-excerpt {
    font-size: 17px;
}

.pr-grid.is-single .pr-card .a-link {
    margin-top: 0;
    padding-top: 24px;
}

/* Detail promo */
.apple-ui .aa-cat.pr-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ff3b30;
}

.pr-head-ctas {
    margin-top: 28px;
}

.pr-claim {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 40px 0 0;
    padding: 28px 32px;
    border-radius: 24px;
    background: var(--a-bg-alt);
}

.apple-ui .pr-claim-title {
    margin: 0;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.apple-ui .pr-claim-text {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.pr-claim .a-btn {
    flex: 0 0 auto;
}

.apple-ui .pr-terms {
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--a-text-3);
}

.pr-share {
    margin-top: 32px;
}

@media (max-width: 1068px) {
    .pr-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pr-grid.is-single .pr-card {
        flex-direction: column;
    }

    .pr-grid.is-single .pr-card-img {
        flex: none;
        aspect-ratio: 16 / 10;
        min-height: 0;
    }

    .pr-grid.is-single .pr-card-body {
        padding: 30px 32px 34px;
    }
}

@media (max-width: 833px) {
    .pr-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .apple-ui .pr-card,
    .apple-ui .pr-card:hover {
        border-radius: 22px;
    }

    .pr-card-body,
    .pr-grid.is-single .pr-card-body {
        padding: 22px 22px 24px;
    }

    .apple-ui .pr-grid.is-single .pr-card-title,
    .apple-ui .pr-card-title {
        font-size: 24px;
    }

    .pr-claim {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px 22px;
    }

    .pr-claim .a-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =============================== LEGAL =============================== */

.apple-ui .lg-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 20px 0 0;
    font-size: 14px;
    color: var(--a-text-3);
}

.lg-body {
    padding-bottom: 96px;
}

.aa-prose.lg-prose h2:first-child {
    margin-top: 0;
}

/* Poin bernomor (Syarat & Ketentuan Layanan): nomor diulang per bagian */
.aa-prose.lg-prose.is-numbered ul {
    counter-reset: lg-item;
}

.apple-ui .aa-prose.lg-prose.is-numbered ul > li {
    counter-increment: lg-item;
    padding-left: 40px;
    margin-bottom: .9em;
}

.apple-ui .aa-prose.lg-prose.is-numbered ul > li::before {
    content: counter(lg-item);
    top: .12em;
    left: 0;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--a-bg-alt);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: var(--a-text);
}

.lg-help {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    max-width: 728px;
    margin-top: 48px;
    padding: 28px 30px;
    border-radius: 24px;
    background: var(--a-bg-alt);
}

.sv-body:not(.has-toc) .lg-help {
    margin-left: auto;
    margin-right: auto;
}

.apple-ui .lg-help-title {
    margin: 4px 0 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.015em;
}

.apple-ui .lg-help-text {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--a-text-2);
}

.lg-help-ctas {
    margin-top: 18px;
    justify-content: flex-start;
}

.lg-docs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.apple-ui .lg-doc,
.apple-ui .lg-doc:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px 22px;
    border-radius: 20px;
    background: var(--a-card);
    font-size: 16px;
    font-weight: 600;
    color: var(--a-text);
    text-decoration: none;
}

.apple-ui .lg-doc:not(.a-reveal) {
    box-shadow: var(--a-card-shadow-rest);
    transition: transform .6s var(--a-card-ease), box-shadow .6s var(--a-card-ease);
}

.apple-ui .lg-doc:not(.a-reveal):hover {
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--a-card-shadow-hover);
}

.lg-doc > i:first-child {
    font-size: 26px;
    color: var(--a-blue);
}

.lg-doc-arrow {
    margin-left: auto;
    font-size: 16px;
    color: var(--a-text-3);
    transition: transform .3s var(--a-ease), color .3s;
}

.lg-doc:hover .lg-doc-arrow {
    color: var(--a-blue);
    transform: translateX(3px);
}

@media (max-width: 1068px) {
    .lg-docs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg-help {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 833px) {
    .lg-body {
        padding-bottom: 64px;
    }

    .lg-help {
        flex-direction: column;
        gap: 14px;
        padding: 24px 22px;
    }

    .lg-docs {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* =============================== PENCARIAN: HASIL LANGSUNG =============================== */

/* Ikon kaca pembesar berganti jadi indikator memuat */
.asearch-form {
    position: relative;
}

.asearch-form.is-loading > i {
    opacity: 0;
}

.asearch-form.is-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 26px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    border: 2px solid var(--a-chip-line);
    border-top-color: var(--a-blue);
    border-radius: 50%;
    animation: ct-spin .7s linear infinite;
}

/* Grup hasil muncul bergiliran (elemen baru, jadi pakai animation) */
.asearch.is-open .asearch-rgroup {
    opacity: 1;
    transform: none;
    transition: none;
    animation: asearch-rin .35s var(--a-ease) both;
    animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes asearch-rin {
    from {
        opacity: 0;
        transform: translate3d(0, 6px, 0);
    }
}

.asearch-rlist {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asearch-rlist > li {
    min-width: 0;
    list-style: none;
}

/* Baris hasil: bukan pil, tapi baris penuh ala Spotlight */
.asearch .asearch-result,
.asearch .asearch-result:hover {
    display: flex;
    align-items: center;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    padding: 10px 12px;
    border: 0;
    border-radius: 12px;
    background: transparent;
}

.asearch .asearch-result:hover,
.asearch .asearch-result.is-active {
    background: var(--a-chip-active);
    transform: none;
}

.asearch-result > i:first-child {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--a-chip);
    font-size: 18px;
}

.asearch-rbody {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.asearch-rtitle {
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.asearch-rsub {
    overflow: hidden;
    margin-top: 2px;
    font-size: 13px;
    font-weight: 400;
    color: var(--a-text-2);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.asearch .asearch-result .asearch-rarrow {
    font-size: 15px;
    color: var(--a-text-3);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity .2s, transform .25s var(--a-ease);
}

.asearch .asearch-result:hover .asearch-rarrow,
.asearch .asearch-result.is-active .asearch-rarrow {
    opacity: 1;
    transform: none;
}

.asearch .asearch-more,
.asearch .asearch-more:hover {
    display: inline-flex;
    margin: 4px 0 0 60px;
    padding: 6px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font-size: 14px;
    color: var(--a-link);
}

.asearch .asearch-more:hover,
.asearch .asearch-more.is-active {
    background: var(--a-chip-active);
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .asearch.is-open .asearch-rgroup {
        animation: none;
    }
}