/*
 * WarnaHost Konsep 2 — design system
 * Dimuat HANYA bila pratinjau/rilis Konsep 2 aktif dan halaman punya template
 * di includes/v2/pages/ (lihat includes/header.php). Menggantikan style.css lama.
 * Dokumentasi pemakaian: includes/v2/README.md
 *
 * Isi:
 *  1. Token
 *  2. Reset & dasar (body.wh2)
 *  3. Tipografi & utilitas
 *  4. Tombol, chip, badge, link
 *  5. Header + mega menu + promo bar + mobile drawer (includes/v2/partials/nav.php)
 *  6. Footer lama (restyle)
 *  7. Elemen global lama: back-to-top, toast, chat launcher, promo popup
 *  8. Section, kepala section, kartu, grid
 *  9. Hero produk & hero halaman
 * 10. Panel menumpuk (overlap) & statistik
 * 11. Harga: period pills + kartu paket
 * 12. Bento, kartu fitur, use case, band upgrade
 * 13. Langkah bernomor (terang & gelap)
 * 14. FAQ bernomor
 * 15. Testimoni unggulan
 * 16. CTA + logo pembayaran
 * 17. Data center gelap
 * 18. Tabel / daftar spesifikasi, tab
 * 19. Responsif 1024px & 640px, reduced motion
 */

/* 1. Token ---------------------------------------------------------------- */
:root {
    --v2-navy: #041a33;
    --v2-navy-2: #062b4e;
    --v2-footer: #071321;
    --v2-gold: #ffc75e;
    --v2-gold-hover: #ffd88a;
    --v2-gold-ink: #8a5a00;
    --v2-gold-tint: #fff3d6;
    --v2-blue: #0872db;
    --v2-blue-hover: #0758ad;
    --v2-blue-bright: #1688f8;
    --v2-blue-light: #65b5ff;
    --v2-blue-tint: #eaf5ff;
    --v2-blue-line: #b8d9fb;
    --v2-green: #20b982;
    --v2-green-ink: #0e8f63;
    --v2-green-tint: #e6f8f1;
    --v2-red: #f2685f;
    --v2-ink: #0b3159;
    --v2-body: #36516b;
    --v2-muted: #526d85;
    --v2-faint: #91a5ba;
    --v2-line: #dbe7f1;
    --v2-line-strong: #bfd3e5;
    --v2-line-soft: #e6eef5;
    --v2-alt: #f4f8fc;
    --v2-on-dark: #cfe2f2;
    --v2-on-dark-2: #dbe7f1;
    --v2-on-dark-line: rgba(207, 226, 242, .18);

    --v2-font-display: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
    --v2-font-body: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --v2-wrap: 1248px;
    --v2-gutter: 24px;
    --v2-sec: 104px;

    --v2-r-sm: 12px;
    --v2-r-md: 18px;
    --v2-r-lg: 24px;
    --v2-r-xl: 32px;
    --v2-r-pill: 999px;

    --v2-shadow-float: 0 22px 48px rgba(2, 16, 34, .38);
    --v2-shadow-float-soft: 0 22px 48px rgba(2, 16, 34, .2);
    --v2-shadow-panel: 0 30px 70px rgba(4, 26, 51, .14);
    --v2-shadow-card: 0 20px 44px rgba(8, 114, 219, .14);

    --v2-header-h: 80px;
    --v2-hero-glow: radial-gradient(720px 520px at 78% 35%, rgba(22, 136, 248, .45), transparent 70%), radial-gradient(560px 420px at 12% 0%, rgba(8, 114, 219, .30), transparent 70%), radial-gradient(520px 360px at 40% 110%, rgba(255, 199, 94, .14), transparent 70%);
    --v2-grid-lines: linear-gradient(rgba(207, 226, 242, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(207, 226, 242, .05) 1px, transparent 1px);
}

body.wh2:has(.site-announcement) { --v2-header-h: 122px; }

/* Konsep 2 hanya mode terang. */
html:has(body.wh2) { color-scheme: light !important; background: #ffffff; }

/* 2. Reset & dasar ---------------------------------------------------------- */
body.wh2,
body.wh2 *,
body.wh2 *::before,
body.wh2 *::after { box-sizing: border-box; }

body.wh2 {
    margin: 0;
    min-height: 100vh;
    background: #ffffff;
    color: var(--v2-body);
    font-family: var(--v2-font-body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

:where(body.wh2) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul) { margin: 0; }
:where(body.wh2) :where(ul, ol) { padding: 0; }
:where(body.wh2) :where(h1, h2, h3, h4, h5, h6) { color: var(--v2-ink); line-height: 1.2; }
:where(body.wh2) :where(img, svg, video) { display: block; max-width: 100%; }
:where(body.wh2) img { height: auto; }
:where(body.wh2) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(body.wh2) button { cursor: pointer; }
:where(body.wh2) a { color: inherit; text-decoration: none; }
:where(body.wh2) address { font-style: normal; }
body.wh2 [hidden] { display: none !important; }
body.wh2 main { display: block; }

/* Link teks di konten (tanpa kelas) */
:where(body.wh2 main) :where(a:not([class])) { color: var(--v2-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:where(body.wh2 main) :where(a:not([class])):hover { color: var(--v2-blue-hover); }
.v2-on-dark :where(a:not([class])) { color: var(--v2-on-dark); }
.v2-on-dark :where(a:not([class])):hover { color: #ffffff; }

/* Fokus terlihat */
body.wh2 :focus-visible { outline: 3px solid var(--v2-blue); outline-offset: 3px; border-radius: 6px; }
body.wh2 :is(.site-header, .v2-hero, .v2-on-dark, .site-footer, .v2-cta__box) :focus-visible { outline-color: var(--v2-gold); }

body.wh2 ::selection { background: var(--v2-gold); color: var(--v2-ink); }
body.wh2.is-menu-open { overflow: hidden; }

/* 3. Tipografi & utilitas -------------------------------------------------- */
.v2-wrap,
body.wh2 .container {
    width: 100%;
    max-width: var(--v2-wrap);
    margin-inline: auto;
    padding-inline: var(--v2-gutter);
}

.v2-disp { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.02em; word-spacing: .06em; }
.v2-h1 { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.025em; word-spacing: .06em; font-size: 54px; line-height: 1.06; }
.v2-h2 { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.02em; word-spacing: .06em; font-size: 42px; line-height: 1.12; color: var(--v2-ink); }
.v2-h3 { font-family: var(--v2-font-display); font-weight: 800; letter-spacing: -.01em; font-size: 21px; line-height: 1.25; color: var(--v2-ink); }
.v2-lead { font-size: 19px; line-height: 1.6; }
.v2-muted { color: var(--v2-muted); }
.v2-small { font-size: 14px; }
.v2-center { text-align: center; }
.v2-accent { color: var(--v2-gold); }
.v2-accent-blue { color: var(--v2-blue); }

.v2-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--v2-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.v2-kicker::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.v2-on-dark .v2-kicker,
.v2-kicker--light { color: var(--v2-blue-light); }
.v2-kicker--plain::before { display: none; }

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(207, 226, 242, .22);
    border-radius: var(--v2-r-pill);
    background: rgba(255, 255, 255, .06);
    color: var(--v2-on-dark-2);
    font-size: 14px;
    font-weight: 600;
}
.v2-eyebrow::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-green); }

.v2-sr-only,
body.wh2 .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.wh2 .skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1000;
    padding: 12px 18px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-gold);
    color: var(--v2-ink);
    font-weight: 700;
    transform: translateY(-160%);
    transition: transform .15s ease;
}
body.wh2 .skip-link:focus { transform: translateY(0); }

.v2-stack { display: flex; flex-direction: column; gap: var(--v2-gap, 20px); }
.v2-stack--lg { --v2-gap: 40px; }
.v2-stack--xl { --v2-gap: 48px; }
.v2-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.v2-row--center { justify-content: center; }
.v2-icon { flex: none; width: 1.125em; height: 1.125em; }

/* 4. Tombol, chip, badge, link ------------------------------------------- */
.v2-btn,
body.wh2 .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 0 26px;
    border: 1px solid transparent;
    border-radius: var(--v2-r-pill);
    font: 600 16px/1.1 var(--v2-font-body);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.v2-btn:active { transform: translateY(1px); }
.v2-btn .v2-icon { width: 18px; height: 18px; }
.v2-btn--gold { background: var(--v2-gold); border-color: var(--v2-gold); color: var(--v2-ink) !important; font-weight: 700; }
.v2-btn--gold:hover { background: var(--v2-gold-hover); border-color: var(--v2-gold-hover); }
.v2-btn--ghost { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .35); color: #ffffff !important; }
.v2-btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .55); }
.v2-btn--primary,
body.wh2 .btn--primary { background: var(--v2-blue); border-color: var(--v2-blue); color: #ffffff !important; }
.v2-btn--primary:hover,
body.wh2 .btn--primary:hover { background: var(--v2-blue-hover); border-color: var(--v2-blue-hover); }
.v2-btn--outline,
body.wh2 .btn--secondary { background: #ffffff; border-color: var(--v2-line-strong); color: var(--v2-ink) !important; }
.v2-btn--outline:hover,
body.wh2 .btn--secondary:hover { border-color: var(--v2-blue); color: var(--v2-blue) !important; }
.v2-btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.v2-btn--block { width: 100%; }

.v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    background: var(--v2-alt);
    color: var(--v2-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.v2-chip--blue { border-color: transparent; background: var(--v2-blue-tint); color: var(--v2-blue-hover); }
.v2-chip--navy { border-color: var(--v2-navy); background: var(--v2-navy); color: #ffffff; }
.v2-chip--dark,
.v2-on-dark .v2-chip { border-color: rgba(207, 226, 242, .2); background: rgba(255, 255, 255, .06); color: var(--v2-on-dark-2); font-weight: 500; }
.v2-chip img { width: 20px; height: 20px; }

.v2-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-gold-tint);
    color: var(--v2-gold-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.4;
}
.v2-badge--gold { background: var(--v2-gold); color: var(--v2-ink); font-weight: 800; letter-spacing: .04em; }
.v2-badge--green { background: var(--v2-green-tint); color: var(--v2-green-ink); }
.v2-badge--blue { background: var(--v2-blue-tint); color: var(--v2-blue-hover); }

.v2-link { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-blue) !important; font-weight: 700; }
.v2-link:hover { color: var(--v2-blue-hover) !important; text-decoration: underline; text-underline-offset: 3px; }
.v2-on-dark .v2-link { color: var(--v2-on-dark) !important; }
.v2-on-dark .v2-link:hover { color: #ffffff !important; }

.v2-checklist { list-style: none; display: grid; gap: 8px; }
.v2-checklist li { display: flex; align-items: flex-start; gap: 8px; }
.v2-checklist li > .v2-icon { width: 18px; height: 18px; margin-top: 3px; color: var(--v2-green); }
.v2-checklist--blue li > .v2-icon { color: var(--v2-blue); }

.v2-ico {
    display: grid;
    flex: none;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--v2-blue-tint);
    color: var(--v2-blue);
}
.v2-ico .v2-icon { width: 26px; height: 26px; }
.v2-ico img { width: 30px; height: 30px; }
.v2-ico--green { background: var(--v2-green-tint); color: var(--v2-green-ink); }
.v2-ico--gold { background: var(--v2-gold-tint); color: var(--v2-gold-ink); }
.v2-ico--navy { background: var(--v2-navy); color: var(--v2-gold); }
.v2-ico--white { background: #ffffff; }
.v2-ico--lg { width: 64px; height: 64px; }

/* 5. Header, mega menu, promo bar, mobile drawer ------------------------- */
/* Markup: includes/v2/partials/nav.php. Perilaku: v2.js (initMegaNav) + main.js (data-mobile-*). */
body.wh2 .site-header {
    position: relative; /* statis: tidak ikut turun saat scroll */
    z-index: 100;
    background: transparent;
    color: #ffffff;
}
/* Halaman tanpa hero gelap di awal: header tetap navy. */
body.wh2:not(:has(main > .v2-hero:first-child)) .site-header { background: var(--v2-navy); }

/* Promo bar */
body.wh2 .site-announcement {
    position: relative;
    border-bottom: 1px solid rgba(207, 226, 242, .12);
    background: rgba(2, 13, 28, .35);
}
body.wh2 .site-announcement__track {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 24px;
    max-width: var(--v2-wrap);
    margin-inline: auto;
    padding: 6px var(--v2-gutter);
}
body.wh2 .site-announcement__item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 12px;
    min-height: 30px;
    color: var(--v2-on-dark);
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
}
body.wh2 .site-announcement__item strong {
    padding: 2px 10px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-gold);
    color: var(--v2-ink);
    font-size: 12px;
    font-weight: 700;
}
body.wh2 .site-announcement__item > span:last-child { text-decoration: underline; text-decoration-color: rgba(207, 226, 242, .4); text-underline-offset: 3px; }
body.wh2 .site-announcement__item:hover > span:last-child { color: #ffffff; text-decoration-color: #ffffff; }

/* Bar navigasi */
.v2-nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    max-width: var(--v2-wrap);
    min-height: 80px;
    margin-inline: auto;
    padding-inline: var(--v2-gutter);
}
.v2-nav__brand { display: inline-flex; flex: none; align-items: center; }
body.wh2 .site-header .site-brand-logo,
body.wh2 .v2-drawer .site-brand-logo { width: 168px; height: auto; filter: brightness(0) invert(1); }

.v2-nav__menu { display: flex; align-items: center; gap: 4px; list-style: none; }
.v2-nav__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--v2-r-pill);
    background: transparent;
    color: var(--v2-on-dark-2);
    font: 600 15px/1 var(--v2-font-body);
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease;
}
.v2-nav__tab:hover,
.v2-nav__item.is-active > .v2-nav__tab,
.v2-nav__tab[aria-current="page"] { background: rgba(255, 255, 255, .08); color: #ffffff; }
.v2-nav__tab[aria-expanded="true"] { background: #ffffff; color: var(--v2-ink); }
.v2-nav__chev { flex: none; width: 12px; height: 12px; transition: transform .2s ease; }
.v2-nav__tab[aria-expanded="true"] .v2-nav__chev { transform: rotate(180deg); }

body.wh2 .nav-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-gold);
    color: var(--v2-ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
}

.v2-nav__actions { display: flex; flex: none; align-items: center; gap: 8px; }
.v2-nav__client {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-blue);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease;
}
.v2-nav__client:hover { background: var(--v2-blue-hover); }
.v2-nav__burger {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
}
.v2-nav__burger:hover { background: rgba(255, 255, 255, .12); }
.v2-nav__burger svg { width: 22px; height: 22px; }

/* Mega menu desktop: satu panel terbuka, posisi relatif terhadap .v2-nav */
.v2-mega {
    position: absolute;
    top: 100%;
    left: var(--v2-gutter);
    right: var(--v2-gutter);
    z-index: 30;
    padding-top: 10px; /* jembatan hover antara tab dan panel */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.v2-nav__item.is-open > .v2-mega { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .18s ease, transform .18s ease, visibility 0s; }
/* cadangan bila v2.js gagal dimuat */
@media (hover: hover) and (min-width: 1101px) {
    .v2-nav:not(.is-ready) .v2-nav__item:hover > .v2-mega { opacity: 1; visibility: visible; transform: translateY(0); }
}

.v2-mega__panel {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 280px;
    overflow: hidden;
    border-radius: 28px;
    background: #ffffff;
    color: var(--v2-body);
    box-shadow: 0 40px 90px rgba(2, 16, 34, .45);
    line-height: 1.6;
}
/* fokus: biru di area putih, emas di area gelap (menimpa aturan emas .site-header) */
body.wh2 .site-header .v2-mega__panel :focus-visible { outline-color: var(--v2-blue); }
body.wh2 .site-header .v2-mega__panel .v2-mega__intro :focus-visible,
body.wh2 .site-header .v2-mega__panel .v2-mega__card--dark :focus-visible { outline-color: var(--v2-gold); }

.v2-mega__intro {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 32px 28px;
    background: var(--v2-navy);
    color: #ffffff;
}
.v2-mega__intro::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(22, 136, 248, .55), transparent 70%);
    pointer-events: none;
}
.v2-mega__intro > * { position: relative; z-index: 1; }
.v2-mega__kicker { color: var(--v2-gold); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.v2-mega__title { color: #ffffff; font-family: var(--v2-font-display); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }
.v2-mega__desc { color: var(--v2-on-dark); font-size: 15px; }
.v2-mega__features { list-style: none; display: grid; gap: 10px; color: var(--v2-on-dark-2); font-size: 14px; }
.v2-mega__features li { display: flex; align-items: flex-start; gap: 10px; }
.v2-mega__features .v2-icon { width: 18px; height: 18px; margin-top: 2px; color: var(--v2-green); }

.v2-mega__link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--v2-blue-hover); font-weight: 600; }
.v2-mega__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.v2-mega__link .v2-icon { width: 16px; height: 16px; }
.v2-mega__all { align-self: flex-start; margin-top: auto; color: var(--v2-gold); }

.v2-mega__items { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: start; padding: 20px; }
.v2-mega__item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 20px;
    gap: 14px;
    align-items: start;
    height: 100%;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 20px;
    color: var(--v2-body);
    transition: background-color .15s ease, border-color .15s ease;
}
.v2-mega__item:hover,
.v2-mega__item[aria-current="page"] { border-color: var(--v2-line); background: var(--v2-alt); }
.v2-mega__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--v2-blue-tint); }
.v2-mega__ico img { width: 30px; height: 30px; }
.v2-mega__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v2-mega__name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.v2-mega__name strong { color: var(--v2-ink); font-family: var(--v2-font-display); font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.v2-mega__badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--v2-r-pill); background: var(--v2-gold); color: var(--v2-ink); font-family: var(--v2-font-body); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.v2-mega__text { font-size: 14px; line-height: 1.5; }
.v2-mega__meta { margin-top: 4px; color: var(--v2-muted); font-size: 13px; font-weight: 700; }
.v2-mega__meta--price { color: var(--v2-green-ink); }
.v2-mega__arrow { width: 20px; height: 20px; margin-top: 4px; color: var(--v2-faint); transition: transform .15s ease, color .15s ease; }
.v2-mega__item:hover .v2-mega__arrow { color: var(--v2-blue); transform: translateX(2px); }

.v2-mega__side { display: flex; flex-direction: column; padding: 20px 20px 20px 0; }
.v2-mega__card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 22px;
    border-radius: 22px;
    background: var(--v2-blue-tint);
    color: var(--v2-ink);
}
.v2-mega__card--dark { background: linear-gradient(160deg, var(--v2-ink), var(--v2-navy)); color: #ffffff; }
.v2-mega__card-kicker { color: var(--v2-blue-hover); font-size: 12px; font-weight: 700; letter-spacing: .08em; }
.v2-mega__card--dark .v2-mega__card-kicker { color: var(--v2-gold); }
.v2-mega__card-title { font-family: var(--v2-font-display); font-size: 20px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.v2-mega__card-text { color: var(--v2-body); font-size: 14px; line-height: 1.55; }
.v2-mega__card--dark .v2-mega__card-text { color: var(--v2-on-dark); }

.v2-mega__coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 8px 8px 12px;
    border: 1.5px dashed var(--v2-gold);
    border-radius: 14px;
    color: var(--v2-gold);
    font: 700 16px/1.2 'Space Mono', ui-monospace, monospace;
}
.v2-mega__copy {
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--v2-r-pill);
    background: var(--v2-gold);
    color: var(--v2-ink);
    font: 700 13px/1 var(--v2-font-body);
}
.v2-mega__copy:hover { background: var(--v2-gold-hover); }

.v2-mega__search {
    display: flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    background: #ffffff;
}
.v2-mega__search:focus-within { border-color: var(--v2-blue); box-shadow: 0 0 0 3px rgba(8, 114, 219, .18); }
.v2-mega__search input { flex: 1; min-width: 0; min-height: 38px; padding: 0 10px; border: 0; background: transparent; color: var(--v2-ink); font-size: 14px; }
.v2-mega__search input::placeholder { color: #6f879c; }
.v2-mega__search input:focus-visible { outline: 0; }
.v2-mega__search button { flex: none; min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--v2-r-pill); background: var(--v2-blue); color: #ffffff; font-size: 14px; font-weight: 700; }
.v2-mega__search button:hover { background: var(--v2-blue-hover); }
.v2-mega__tlds { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.v2-mega__tlds li { padding: 3px 10px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); background: #ffffff; color: var(--v2-ink); font-size: 12px; font-weight: 700; }

.v2-mega__person { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.35; }
.v2-mega__person img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 15%; background: #e8f3ff; }
.v2-mega__person strong { display: block; color: var(--v2-ink); }
.v2-mega__person span span { color: var(--v2-muted); }

.v2-mega__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    padding: 0 18px;
    border-radius: var(--v2-r-pill);
    background: var(--v2-blue);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: background-color .15s ease;
}
.v2-mega__btn:hover { background: var(--v2-blue-hover); }
.v2-mega__btn--gold { background: var(--v2-gold); color: var(--v2-ink); }
.v2-mega__btn--gold:hover { background: var(--v2-gold-hover); }

.v2-mega__foot {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 10px 28px;
    border-top: 1px solid var(--v2-line);
    background: var(--v2-alt);
    font-size: 14px;
}
.v2-mega__quick { list-style: none; display: flex; flex-wrap: wrap; gap: 0 22px; }
.v2-mega__status { display: inline-flex; align-items: center; gap: 8px; color: var(--v2-muted); }
.v2-mega__status i,
.v2-drawer__status i { width: 8px; height: 8px; border-radius: 50%; background: var(--v2-green); }

/* Menu mobile: layar penuh gelap (markup data-mobile-* ditangani main.js) */
.v2-drawer {
    position: fixed;
    inset: 0;
    z-index: 450;
    visibility: hidden;
    pointer-events: none;
}
.v2-drawer.is-open { visibility: visible; pointer-events: auto; }
.v2-drawer__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: radial-gradient(420px 320px at 100% 0%, rgba(22, 136, 248, .4), transparent 70%), var(--v2-navy);
    color: #ffffff;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}
.v2-drawer.is-open .v2-drawer__panel { opacity: 1; transform: none; }
.v2-drawer :focus-visible { outline-color: var(--v2-gold); }
.v2-drawer__head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 0 var(--v2-gutter);
    border-bottom: 1px solid rgba(207, 226, 242, .12);
}
body.wh2 .v2-drawer .site-brand-logo { width: 140px; }
.v2-drawer__close {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(207, 226, 242, .25);
    border-radius: 14px;
    background: transparent;
    color: #ffffff;
}
.v2-drawer__close .v2-icon { width: 20px; height: 20px; }
.v2-drawer__nav { flex: 1; padding: 8px var(--v2-gutter) 16px; }
.v2-drawer__groups { list-style: none; }
.v2-drawer__group { border-bottom: 1px solid rgba(207, 226, 242, .12); }
.v2-drawer__acc {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 0 4px;
    border: 0;
    background: transparent;
    color: #ffffff;
    font: 700 17px/1.2 var(--v2-font-display);
    text-align: left;
}
a.v2-drawer__acc { justify-content: flex-start; }
.v2-drawer__chev { width: 18px; height: 18px; color: var(--v2-on-dark); transition: transform .2s ease; }
.v2-drawer__acc[aria-expanded="true"] .v2-drawer__chev { transform: rotate(180deg); }
.v2-drawer__sub { list-style: none; display: grid; gap: 8px; padding: 0 0 16px; }
.v2-drawer__row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
    color: #ffffff;
    transition: background-color .15s ease;
}
.v2-drawer__row:hover,
.v2-drawer__row[aria-current="page"] { background: rgba(255, 255, 255, .1); }
.v2-drawer__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #ffffff; }
.v2-drawer__ico img { width: 26px; height: 26px; }
.v2-drawer__body { min-width: 0; }
.v2-drawer__body strong { display: block; font-size: 15px; line-height: 1.35; }
.v2-drawer__meta { display: block; color: #9bb3c8; font-size: 13px; font-weight: 600; }
.v2-drawer__meta--price { color: #7fe0b8; }
.v2-drawer__arrow { width: 16px; height: 16px; color: #9bb3c8; }
.v2-drawer__actions {
    display: grid;
    flex: none;
    gap: 10px;
    padding: 16px var(--v2-gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(207, 226, 242, .12);
    background: rgba(2, 16, 34, .4);
}
.v2-drawer__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    border-radius: var(--v2-r-pill);
    font-size: 15px;
    font-weight: 700;
}
.v2-drawer__btn .v2-icon { width: 18px; height: 18px; }
.v2-drawer__btn--primary { background: var(--v2-blue); color: #ffffff; }
.v2-drawer__btn--primary:hover { background: var(--v2-blue-hover); }
.v2-drawer__btn--ghost { border: 1px solid rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .06); color: #ffffff; }
.v2-drawer__btn--ghost:hover { background: rgba(255, 255, 255, .12); }
.v2-drawer__status { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--v2-on-dark); font-size: 13px; }

@media (max-width: 1240px) {
    .v2-mega__panel { grid-template-columns: 260px minmax(0, 1fr) 250px; }
    .v2-mega__intro { padding: 28px 24px; }
    .v2-mega__items { padding: 16px; }
    .v2-mega__item { grid-template-columns: 48px minmax(0, 1fr); padding: 14px; }
    .v2-mega__ico { width: 48px; height: 48px; }
    .v2-mega__arrow { display: none; }
    .v2-mega__side { padding: 16px 16px 16px 0; }
}
@media (max-width: 1100px) {
    .v2-nav__menu { display: none; }
    .v2-nav__burger { display: grid; }
}
@media (min-width: 1101px) {
    .v2-drawer { display: none; }
}

/* 6. Footer lama (restyle) ------------------------------------------------ */
body.wh2 .site-footer {
    background: var(--v2-footer);
    color: var(--v2-on-dark);
    font-size: 15px;
    line-height: 1.6;
}
body.wh2 .site-footer a { color: var(--v2-on-dark); transition: color .15s ease; }
body.wh2 .site-footer a:hover { color: #ffffff; }
body.wh2 .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
    padding-top: 64px;
}
body.wh2 .site-footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
body.wh2 .site-footer__brand .main-nav__brand { padding: 10px 14px; border-radius: var(--v2-r-sm); background: #ffffff; }
body.wh2 .site-footer__brand .site-brand-logo { width: 160px; }
body.wh2 .site-footer__brand > p { max-width: 380px; }
body.wh2 .site-footer__contact { list-style: none; display: grid; gap: 6px; }
body.wh2 .site-footer__social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
body.wh2 .site-footer__social a {
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(207, 226, 242, .25);
    border-radius: var(--v2-r-sm);
}
body.wh2 .site-footer__social a:hover { border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .06); }
body.wh2 .site-footer__social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.wh2 .site-footer__social a:nth-child(n+2) svg { fill: currentColor; stroke: none; }
body.wh2 .site-footer__links h3 { margin-bottom: 14px; color: #ffffff; font-family: var(--v2-font-body); font-size: 15px; font-weight: 700; }
body.wh2 .site-footer__links ul { list-style: none; display: grid; gap: 10px; }
body.wh2 .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 48px;
    padding-top: 24px;
    padding-bottom: 32px;
    border-top: 1px solid var(--v2-on-dark-line);
    font-size: 14px;
}

/* 7. Elemen global lama ---------------------------------------------------- */
body.wh2 .back-to-top {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 310;
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--v2-line);
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(6, 43, 78, .18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, border-color .18s ease;
}
body.wh2 .back-to-top img { width: 20px; height: 20px; }
body.wh2 .back-to-top:hover { border-color: var(--v2-blue); }
body.wh2 .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

body.wh2 .toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 400;
    max-width: min(420px, calc(100vw - 32px));
    padding: 14px 20px;
    border: 1px solid var(--v2-line);
    border-left: 4px solid var(--v2-green);
    border-radius: 16px;
    background: #ffffff;
    color: var(--v2-ink);
    box-shadow: 0 22px 48px rgba(2, 16, 34, .22);
    font-size: 15px;
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
body.wh2 .toast:empty { padding: 0; border: 0; }
body.wh2 .toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
body.wh2 .toast.is-error { border-left-color: var(--v2-red); }

body.wh2 .chatwoot-lazy-launcher {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 320;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--v2-r-pill);
    background: var(--v2-blue);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(8, 114, 219, .32);
    font: 700 15px/1 var(--v2-font-body);
    white-space: nowrap;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease, background-color .18s ease;
}
body.wh2 .chatwoot-lazy-launcher:hover { background: var(--v2-blue-hover); transform: translateY(-2px); }
body.wh2 .chatwoot-lazy-launcher__icon { position: relative; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; }
body.wh2 .chatwoot-lazy-launcher__icon::after { content: ""; position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; background: #ffffff; clip-path: polygon(0 0, 100% 55%, 0 100%); transform: rotate(24deg); }
body.wh2 .chatwoot-lazy-launcher.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
body.wh2 .woot-widget-bubble { display: none !important; visibility: hidden !important; pointer-events: none !important; }

body.wh2.is-promo-open { overflow: hidden; }
body.wh2 .promo-popup { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; visibility: hidden; }
body.wh2 .promo-popup.is-open { visibility: visible; }
body.wh2 .promo-popup__overlay { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(2, 13, 28, .7); opacity: 0; transition: opacity .22s ease; }
body.wh2 .promo-popup.is-open .promo-popup__overlay { opacity: 1; }
body.wh2 .promo-popup__dialog {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.2fr);
    width: min(100%, 820px);
    max-height: min(90vh, 660px);
    overflow: auto;
    border-radius: var(--v2-r-xl);
    background: #ffffff;
    box-shadow: 0 40px 90px rgba(2, 16, 34, .45);
    opacity: 0;
    transform: translateY(24px) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
}
body.wh2 .promo-popup.is-open .promo-popup__dialog { opacity: 1; transform: none; }
body.wh2 .promo-popup__close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--v2-line);
    border-radius: 50%;
    background: #ffffff;
    color: var(--v2-ink);
    font-size: 26px;
    line-height: 1;
}
body.wh2 .promo-popup__visual {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 18px;
    min-height: 420px;
    padding: 36px 24px;
    overflow: hidden;
    background: var(--v2-navy);
    background-image: radial-gradient(360px 280px at 70% 20%, rgba(22, 136, 248, .55), transparent 70%), radial-gradient(300px 240px at 0% 100%, rgba(255, 199, 94, .2), transparent 70%);
    color: #ffffff;
}
body.wh2 .promo-popup__badge { position: absolute; top: 20px; left: 20px; padding: 4px 12px; border-radius: var(--v2-r-pill); background: var(--v2-gold); color: var(--v2-ink); font-size: 12px; font-weight: 800; }
body.wh2 .promo-popup__server {
    display: grid;
    grid-template-columns: repeat(3, 12px);
    align-content: start;
    gap: 8px;
    width: 160px;
    height: 180px;
    padding: 22px;
    border: 1px solid rgba(207, 226, 242, .3);
    border-radius: 20px;
    background: rgba(255, 255, 255, .08);
}
body.wh2 .promo-popup__server > span { width: 12px; height: 12px; border-radius: 50%; background: var(--v2-green); }
body.wh2 .promo-popup__server strong { grid-column: 1 / -1; align-self: end; margin-top: 60px; font-family: var(--v2-font-display); font-size: 15px; }
body.wh2 .promo-popup__visual code { padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #8ee7c4; font-size: 13px; }
body.wh2 .promo-popup__content { display: grid; align-content: center; gap: 14px; padding: clamp(32px, 5vw, 52px); }
body.wh2 .promo-popup__eyebrow { color: var(--v2-blue); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
body.wh2 .promo-popup__content h2 { font-family: var(--v2-font-display); font-size: clamp(22px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
body.wh2 .promo-popup__content > p:not(.promo-popup__eyebrow) { color: var(--v2-muted); }
body.wh2 .promo-popup__content ul { list-style: none; display: grid; gap: 8px; margin: 4px 0 8px; }
body.wh2 .promo-popup__content li { position: relative; padding-left: 26px; color: var(--v2-ink); font-weight: 600; }
body.wh2 .promo-popup__content li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--v2-green-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e8f63' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
body.wh2 .promo-popup__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
body.wh2 .promo-popup__later { padding: 8px 2px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--v2-muted); font-size: 15px; font-weight: 600; }
body.wh2 .promo-popup__image-link { display: block; grid-column: 1 / -1; }
body.wh2 .promo-popup__image-link img { width: 100%; max-height: 86vh; object-fit: contain; }

/* 8. Section, kepala section, kartu, grid ---------------------------------- */
.v2-sec { position: relative; padding-block: var(--v2-sec); }
.v2-sec--alt { background: var(--v2-alt); }
.v2-sec--flush-top { padding-top: 0; }
.v2-sec--flush-bottom { padding-bottom: 0; }
.v2-sec--sm { padding-block: 64px; }

.v2-sec--dark,
.v2-on-dark { color: #ffffff; }
.v2-sec--dark { overflow: hidden; background: var(--v2-navy); }
.v2-sec--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(640px 420px at 80% 10%, rgba(22, 136, 248, .32), transparent 70%), radial-gradient(480px 320px at 0% 100%, rgba(255, 199, 94, .12), transparent 70%);
    pointer-events: none;
}
.v2-sec--dark > * { position: relative; }
.v2-sec--dark :where(h2, h3, h4) { color: #ffffff; }
.v2-sec--dark :where(p) { color: var(--v2-on-dark); }

.v2-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.v2-head > .v2-h2,
.v2-head > h2 { max-width: 760px; }
.v2-head > p { max-width: 640px; color: var(--v2-muted); }
.v2-on-dark .v2-head > p,
.v2-sec--dark .v2-head > p { color: var(--v2-on-dark); }
.v2-head--left { align-items: flex-start; text-align: left; }
.v2-head--split { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; text-align: left; }
.v2-head--split > div { display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.v2-head--split > p { max-width: 420px; }

.v2-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
    padding: 28px 24px;
    border: 1px solid var(--v2-line);
    border-radius: 22px;
    background: #ffffff;
}
.v2-card--lg { padding: 32px; border-radius: var(--v2-r-lg); }
.v2-card--soft { border-color: var(--v2-line-soft); background: var(--v2-alt); }
.v2-card--shadow { border-color: var(--v2-line-soft); box-shadow: var(--v2-shadow-panel); }
.v2-card--dark { border-color: var(--v2-on-dark-line); background: rgba(255, 255, 255, .05); color: #ffffff; }
.v2-card--dark p { color: var(--v2-on-dark); }
.v2-card--link { color: inherit; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.v2-card--link:hover { border-color: var(--v2-blue-bright); box-shadow: var(--v2-shadow-card); transform: translateY(-2px); }
.v2-card h3 { font-family: var(--v2-font-display); font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.v2-card p { color: var(--v2-muted); }
.v2-card.v2-card--dark p { color: var(--v2-on-dark); }
.v2-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--v2-line); }

.v2-grid { list-style: none; display: grid; grid-template-columns: repeat(var(--v2-cols, 3), minmax(0, 1fr)); gap: var(--v2-grid-gap, 20px); }
.v2-grid--2 { --v2-cols: 2; }
.v2-grid--3 { --v2-cols: 3; }
.v2-grid--4 { --v2-cols: 4; }
.v2-grid--5 { --v2-cols: 5; }
.v2-grid--6 { --v2-cols: 6; }
.v2-grid--gap-lg { --v2-grid-gap: 24px; }
.v2-grid--start { align-items: start; }

.v2-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.v2-split--wide-left { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; }
.v2-split--wide-right { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; }

/* Foto bertumpuk dengan kartu mengambang (untuk section terang) */
.v2-photo { position: relative; min-height: 520px; }
.v2-photo__back { position: absolute; left: 6%; top: 6%; width: 90%; height: 90%; border-radius: 36px; background: linear-gradient(160deg, var(--v2-blue-tint), #cfe6fb); transform: rotate(-3deg); }
.v2-photo__img { position: absolute; left: 0; top: 0; width: 92%; height: 92%; overflow: hidden; border-radius: var(--v2-r-xl); box-shadow: 0 30px 70px rgba(4, 26, 51, .18); }
.v2-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.v2-float {
    position: absolute;
    z-index: 2;
    border-radius: var(--v2-r-md);
    background: #ffffff;
    color: var(--v2-ink);
    box-shadow: var(--v2-shadow-float);
    line-height: 1.3;
}
.v2-photo .v2-float { box-shadow: 0 22px 48px rgba(2, 16, 34, .22); }
.v2-float--pill { border-radius: var(--v2-r-pill); }
.v2-float__muted { color: var(--v2-muted); }

/* 9. Hero produk & hero halaman ------------------------------------------- */
.v2-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--v2-header-h);
    padding-bottom: 72px;
    margin-top: calc(-1 * var(--v2-header-h));
    background: var(--v2-navy);
    color: #ffffff;
}
.v2-hero::before,
.v2-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.v2-hero::before { background: var(--v2-hero-glow); }
.v2-hero::after {
    background-image: var(--v2-grid-lines);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 60% 40%, #000 30%, transparent 75%);
}
.v2-hero > * { position: relative; z-index: 1; }
.v2-hero--page { padding-bottom: 88px; }
.v2-hero--page::before { background: radial-gradient(720px 480px at 82% 30%, rgba(22, 136, 248, .42), transparent 70%), radial-gradient(560px 380px at 8% 0%, rgba(8, 114, 219, .28), transparent 70%), radial-gradient(520px 320px at 40% 120%, rgba(255, 199, 94, .12), transparent 70%); }
.v2-hero--compact { padding-bottom: 64px; }
.v2-hero--overlap { padding-bottom: 152px; }

.v2-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 32px; }
.v2-hero--page .v2-hero__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.v2-hero__grid--solo { display: block; }
.v2-hero__grid--solo .v2-hero__copy { max-width: 820px; }
.v2-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.v2-hero--page .v2-hero__copy { gap: 20px; }

.v2-crumb { color: var(--v2-on-dark); font-size: 14px; }
.v2-crumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.v2-crumb li { display: inline-flex; align-items: center; gap: 8px; }
.v2-crumb li + li::before { content: "/"; color: rgba(207, 226, 242, .6); }
.v2-crumb a { color: var(--v2-on-dark); }
.v2-crumb a:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 3px; }
.v2-crumb [aria-current] { color: #ffffff; font-weight: 600; }

.v2-hero__h1 { color: #ffffff; font-family: var(--v2-font-display); font-size: 54px; font-weight: 800; letter-spacing: -.025em; word-spacing: .06em; line-height: 1.06; }
.v2-hero--page .v2-hero__h1 { font-size: 50px; line-height: 1.08; }
.v2-hero__h1 .v2-accent { color: var(--v2-gold); }
.v2-hero__desc { max-width: 560px; color: var(--v2-on-dark); font-size: 19px; }
.v2-hero--page .v2-hero__desc { max-width: 620px; }
.v2-hero__checks { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; color: var(--v2-on-dark-2); font-size: 15px; }
.v2-hero__checks li { display: flex; align-items: center; gap: 8px; }
.v2-hero__checks .v2-icon { width: 18px; height: 18px; color: var(--v2-green); }
.v2-hero__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; color: var(--v2-on-dark); }
.v2-hero__price strong { color: #ffffff; font-family: var(--v2-font-display); font-size: 44px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.v2-hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-hero__chips-label { color: var(--v2-on-dark); font-size: 15px; }
.v2-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; width: 100%; }
.v2-hero__extra { width: 100%; }

.v2-stage { position: relative; height: 560px; }
.v2-hero--page .v2-stage { height: 420px; }
.v2-stage__glow { position: absolute; right: 4%; top: 6%; width: 72%; height: 86%; border-radius: 36px; background: linear-gradient(160deg, var(--v2-blue-bright), var(--v2-blue) 50%, rgba(8, 114, 219, 0) 100%); opacity: .55; transform: rotate(4deg); }
.v2-stage__photo { position: absolute; right: 6%; top: 4%; width: 68%; height: 84%; overflow: hidden; border-radius: var(--v2-r-xl); box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.v2-hero--page .v2-stage__glow { right: 2%; top: 8%; width: 86%; height: 86%; }
.v2-hero--page .v2-stage__photo { right: 4%; top: 4%; width: 84%; height: 86%; }
.v2-stage__photo img { width: 100%; height: 100%; object-fit: cover; }

.v2-float--browser { left: 0; top: 10%; width: 48%; }
.v2-float--browser .v2-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--v2-line); }
.v2-browser__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--v2-red); }
.v2-browser__dot:nth-child(2) { background: var(--v2-gold); }
.v2-browser__dot:nth-child(3) { background: var(--v2-green); }
.v2-browser__url { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; margin-left: 6px; padding: 3px 10px; border-radius: var(--v2-r-pill); background: #eef5fb; color: var(--v2-body); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-browser__url .v2-icon { width: 11px; height: 11px; color: var(--v2-green-ink); }
.v2-browser__body { display: grid; gap: 8px; padding: 14px; }
.v2-browser__line { height: 7px; border-radius: 6px; background: var(--v2-line); }
.v2-browser__line--title { height: 10px; width: 64%; background: var(--v2-ink); }
.v2-browser__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.v2-browser__cta { width: 64px; height: 22px; border-radius: var(--v2-r-pill); background: var(--v2-blue); }
.v2-browser__status { display: inline-flex; align-items: center; gap: 6px; color: var(--v2-green-ink); font-size: 12px; font-weight: 700; }
.v2-browser__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--v2-green); }

.v2-float--stat { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.v2-float--stat .v2-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--v2-green-tint); color: var(--v2-green-ink); }
.v2-float--stat .v2-ico .v2-icon { width: 20px; height: 20px; }
.v2-float--stat strong { display: block; font-family: var(--v2-font-display); font-size: 20px; font-weight: 800; }
.v2-float--stat span span,
.v2-float--stat small { color: var(--v2-muted); font-size: 12px; }
.v2-float--uptime { right: 0; top: 0; }
.v2-float--card { left: 0; bottom: 8%; }
.v2-float--card strong { font-size: 18px; }

.v2-float--specs { left: 4%; bottom: 14%; width: 46%; padding: 14px 16px; }
.v2-float__title { margin-bottom: 2px; color: var(--v2-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.v2-float__row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--v2-line); font-size: 13px; }
.v2-float__row span { color: var(--v2-muted); }
.v2-float__row strong { text-align: right; }

.v2-float--support { right: 0; bottom: 4%; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--v2-r-pill); font-size: 13px; }
.v2-hero--page .v2-float--support { top: 0; bottom: auto; }
.v2-float--support img { flex: none; width: 38px; height: 38px; border-radius: 50%; background: #e8f3ff; object-fit: cover; object-position: center 15%; }
.v2-float--support strong { display: block; }
.v2-float--support span span { color: var(--v2-muted); }

/* 10. Panel menumpuk & statistik ------------------------------------------ */
.v2-overlap { position: relative; z-index: 2; margin-top: -64px; padding-bottom: 24px; }
.v2-overlap--lg { margin-top: -104px; }
.v2-panel {
    display: flex;
    flex-direction: column;
    gap: 36px;
    padding: 48px;
    border: 1px solid var(--v2-line-soft);
    border-radius: var(--v2-r-xl);
    background: #ffffff;
    box-shadow: var(--v2-shadow-panel);
}
.v2-stats { display: grid; grid-template-columns: repeat(var(--v2-cols, 4), minmax(0, 1fr)); gap: 20px; }
.v2-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 28px 26px;
    border: 1px solid var(--v2-line-soft);
    border-radius: var(--v2-r-lg);
    background: #ffffff;
    box-shadow: 0 30px 70px rgba(4, 26, 51, .12);
}
.v2-stat__value { color: var(--v2-ink); font-family: var(--v2-font-display); font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.v2-stat__label { color: var(--v2-ink); font-weight: 600; }
.v2-stat--blue .v2-stat__value { color: var(--v2-blue); }
.v2-stat--green .v2-stat__value { color: var(--v2-green-ink); }
.v2-stat--gold .v2-stat__value { color: var(--v2-gold-ink); }
dl.v2-stats .v2-stat { flex-direction: column-reverse; justify-content: flex-end; }
.v2-stat--flat { padding: 20px; border-color: var(--v2-line); border-radius: var(--v2-r-md); box-shadow: none; }
.v2-stat--flat .v2-stat__value { font-size: 30px; }
.v2-stat--flat .v2-stat__label { color: var(--v2-muted); font-size: 14px; font-weight: 400; }

/* 11. Harga ---------------------------------------------------------------- */
.v2-periods {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-pill);
    background: var(--v2-alt);
}
.v2-periods button {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: var(--v2-r-pill);
    background: transparent;
    color: var(--v2-body);
    font: 600 14px/1 var(--v2-font-body);
    transition: background-color .15s ease, color .15s ease;
}
.v2-periods button:hover { color: var(--v2-ink); background: #ffffff; }
.v2-periods button.is-active,
.v2-periods button[aria-pressed="true"],
.v2-periods button[aria-selected="true"] { background: var(--v2-ink); color: #ffffff; }

.v2-plans { display: grid; grid-template-columns: repeat(var(--v2-cols, 4), minmax(0, 1fr)); gap: 20px; align-items: start; }
.v2-plan {
    --plan-ink: var(--v2-ink);
    --plan-muted: var(--v2-muted);
    --plan-body: var(--v2-body);
    --plan-line: var(--v2-line);
    --plan-link: var(--v2-blue);
    --plan-chip: var(--v2-alt);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 24px 12px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: #ffffff;
    color: var(--plan-body);
}
.v2-plan--dark {
    --plan-ink: #ffffff;
    --plan-muted: var(--v2-on-dark);
    --plan-body: var(--v2-on-dark-2);
    --plan-line: rgba(207, 226, 242, .2);
    --plan-link: var(--v2-gold);
    --plan-chip: rgba(255, 255, 255, .08);
    border-color: var(--v2-navy-2);
    background: var(--v2-navy-2);
    box-shadow: 0 28px 60px rgba(6, 43, 78, .28);
}
.v2-plan__badge { position: absolute; top: -13px; left: 24px; padding: 4px 12px; border-radius: var(--v2-r-pill); background: var(--v2-gold); color: var(--v2-ink); font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.v2-plan__name { color: var(--plan-ink); font-family: var(--v2-font-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.v2-plan__tagline { margin-top: 2px; color: var(--plan-muted); font-size: 14px; }
.v2-plan__was { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 22px; font-size: 14px; }
.v2-plan__old { color: var(--plan-muted); text-decoration: line-through; }
.v2-plan__disc { padding: 2px 8px; border-radius: var(--v2-r-pill); background: var(--v2-gold-tint); color: var(--v2-gold-ink); font-size: 12px; font-weight: 700; }
.v2-plan__price { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; color: var(--plan-ink); }
.v2-plan__price > span:first-child { font-weight: 700; }
.v2-plan__amount { font-family: var(--v2-font-display); font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; transition: opacity .16s ease, transform .16s ease; }
.v2-plan__per { color: var(--plan-muted); }
.v2-plan__note { margin-top: 6px; color: var(--plan-muted); font-size: 13px; }
.v2-plan__note + .v2-plan__note { margin-top: 0; }
.v2-plan__domain { padding: 10px 12px; border-radius: var(--v2-r-sm); background: var(--plan-chip); color: var(--plan-body); font-size: 13px; }
.v2-plan__domain strong { color: var(--plan-ink); }
.v2-plan__group { display: grid; gap: 8px; }
.v2-plan__group-title { color: var(--plan-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.v2-plan__list { list-style: none; display: grid; gap: 6px; font-size: 14px; }
.v2-plan__list li { display: flex; align-items: flex-start; gap: 8px; color: var(--plan-body); }
.v2-plan__list li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320b982' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.v2-plan__list li.is-no { color: #65788d; text-decoration: line-through; }
.v2-plan--dark .v2-plan__list li.is-no { color: var(--v2-faint); }
.v2-plan__list li.is-no::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2391a5ba' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); }
.v2-plan__details { display: grid; gap: 18px; }
.v2-plan__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    border-top: 1px solid var(--plan-line);
    background: transparent;
    color: var(--plan-link);
    font: 600 14px/1 var(--v2-font-body);
    text-align: left;
}
/* tanda +/− via CSS, aman walau main.js mengganti textContent tombol */
.v2-plan__toggle::after { content: "+"; font-size: 18px; line-height: 1; }
.v2-plan__toggle[aria-expanded="true"]::after { content: "\2212"; }
.v2-plan .v2-btn { width: 100%; }
.v2-plan--dark .v2-btn--outline { border-color: var(--v2-gold); background: var(--v2-gold); color: var(--v2-ink) !important; font-weight: 700; }
.v2-plans-note { color: var(--v2-muted); font-size: 14px; text-align: center; }

/* 12. Bento, fitur, use case, band ---------------------------------------- */
.v2-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.v2-bento--lead { grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); }
.v2-bento__big { grid-row: span 2; }
.v2-bento--lead .v2-bento__big { grid-row: span 3; }
.v2-bento__wide { grid-column: span 2; }
.v2-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding: 32px;
    border: 1px solid var(--v2-line);
    border-radius: var(--v2-r-lg);
    background: #ffffff;
}
.v2-tile h3 { font-family: var(--v2-font-display); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.v2-tile p { color: var(--v2-muted); }
.v2-tile--alt { border-color: var(--v2-line-soft); background: var(--v2-alt); }
.v2-tile--photo { min-height: 520px; padding: 0; border-color: var(--v2-navy-2); background: var(--v2-navy-2); color: #ffffff; }
.v2-tile--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 43, 78, 0) 30%, rgba(6, 43, 78, .94) 80%); }
.v2-tile--photo .v2-tile__body { position: relative; z-index: 1; display: grid; gap: 8px; margin-top: auto; padding: 28px; }
.v2-tile--photo h3 { color: #ffffff; font-size: 26px; line-height: 1.15; }
.v2-tile--photo p { color: var(--v2-on-dark); }
.v2-tile--photo .v2-float { top: 24px; right: 24px; }

.v2-feat { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--v2-line); border-radius: 22px; background: #ffffff; }
.v2-feat h3 { margin-top: 4px; font-size: 18px; font-weight: 700; }
.v2-feat p { color: var(--v2-muted); font-size: 15px; }

.v2-use { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 28px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: #ffffff; }
.v2-use h3 { font-family: var(--v2-font-display); font-size: 21px; font-weight: 800; }
.v2-use p { flex-grow: 1; color: var(--v2-muted); }
.v2-use--dark { border-color: var(--v2-navy-2); background: var(--v2-navy-2); color: #ffffff; }
.v2-use--dark h3 { color: #ffffff; }
.v2-use--dark p { color: var(--v2-on-dark); }

.v2-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 44px 48px;
    border: 1px solid #dceeff;
    border-radius: var(--v2-r-xl);
    background: linear-gradient(135deg, var(--v2-blue-tint) 0%, #f6faff 50%, #fff6e2 100%);
}
.v2-band__body { display: flex; flex: 1 1 460px; align-items: center; gap: 20px; }
.v2-band h2 { margin-top: 4px; font-family: var(--v2-font-display); font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.v2-band p { margin-top: 4px; color: var(--v2-muted); }

/* 13. Langkah bernomor ------------------------------------------------------ */
.v2-steps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(var(--v2-cols, 3), minmax(0, 1fr)); gap: 24px; }
.v2-steps::before { content: ""; position: absolute; left: calc(50% / var(--v2-cols, 3)); right: calc(50% / var(--v2-cols, 3)); top: 36px; border-top: 2px dashed var(--v2-blue-line); }
.v2-steps > li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 12px; text-align: center; }
.v2-steps__n {
    display: grid;
    width: 72px;
    height: 72px;
    place-items: center;
    border: 2px solid var(--v2-blue);
    border-radius: 50%;
    background: #ffffff;
    color: var(--v2-blue);
    box-shadow: 0 0 0 8px var(--v2-blue-tint);
    font-family: var(--v2-font-display);
    font-size: 24px;
    font-weight: 800;
}
.v2-steps h3 { margin-top: 8px; font-family: var(--v2-font-display); font-size: 20px; font-weight: 800; }
.v2-steps p { max-width: 320px; color: var(--v2-muted); }
.v2-steps--dark::before { top: 28px; left: 10%; right: 10%; border-top-color: rgba(101, 181, 255, .4); }
.v2-steps--dark > li { padding: 0; gap: 10px; }
.v2-steps--dark .v2-steps__n { width: 56px; height: 56px; border: 0; background: var(--v2-gold); color: var(--v2-ink); box-shadow: 0 0 0 8px rgba(255, 199, 94, .14); font-size: 20px; }
.v2-steps--dark :where(h3, strong) { margin-top: 6px; color: #ffffff; font-family: var(--v2-font-body); font-size: 17px; font-weight: 700; }
.v2-steps--dark p { color: var(--v2-on-dark); font-size: 15px; }

/* 14. FAQ bernomor ---------------------------------------------------------- */
.v2-faq { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 840px; margin-inline: auto; }
.v2-faq__item { border: 1px solid var(--v2-line); border-radius: var(--v2-r-md); background: #ffffff; transition: border-color .18s ease, box-shadow .18s ease; }
.v2-faq__item.is-open { border-color: var(--v2-blue-line); box-shadow: 0 14px 32px rgba(8, 114, 219, .1); }
.v2-faq__q { margin: 0; font-size: inherit; }
.v2-faq__btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 18px 24px;
    border: 0;
    border-radius: var(--v2-r-md);
    background: transparent;
    color: var(--v2-ink);
    font: 700 17px/1.4 var(--v2-font-body);
    text-align: left;
}
.v2-faq__label { display: flex; gap: 10px; }
.v2-faq__n { flex: none; min-width: 1.4em; color: var(--v2-blue); }
.v2-faq__sign {
    position: relative;
    display: grid;
    flex: none;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--v2-blue-tint);
    color: var(--v2-blue);
    transition: background-color .18s ease, color .18s ease;
}
.v2-faq__sign::before,
.v2-faq__sign::after { content: ""; position: absolute; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease; }
.v2-faq__sign::after { transform: rotate(90deg); }
.v2-faq__btn[aria-expanded="true"] .v2-faq__sign { background: var(--v2-blue); color: #ffffff; }
.v2-faq__btn[aria-expanded="true"] .v2-faq__sign::after { transform: rotate(0deg); }
.v2-faq__a { padding: 0 24px 22px 58px; color: var(--v2-body); }
.v2-faq__a > * + * { margin-top: 10px; }
.v2-faq__a :where(ul, ol) { padding-left: 20px; }

/* 15. Testimoni unggulan ---------------------------------------------------- */
.v2-testi__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.v2-testi__main { position: relative; display: flex; flex-direction: column; gap: 24px; }
.v2-testi__slide { display: flex; flex-direction: column; gap: 24px; }
.v2-testi__quote { min-height: 220px; color: var(--v2-ink); font-family: var(--v2-font-display); font-size: 26px; font-weight: 700; letter-spacing: -.01em; word-spacing: .04em; line-height: 1.4; }
.v2-testi__person { display: flex; align-items: center; gap: 14px; min-height: 56px; padding-right: 120px; }
.v2-testi__person img { flex: none; width: 56px; height: 56px; border: 2px solid #ffffff; border-radius: 50%; object-fit: cover; box-shadow: 0 6px 16px rgba(6, 43, 78, .15); }
.v2-testi__person strong { display: block; color: var(--v2-ink); font-size: 17px; }
.v2-testi__person span span { color: var(--v2-muted); font-size: 14px; }
.v2-testi__nav { position: absolute; right: 0; bottom: 4px; display: flex; gap: 8px; }
.v2-testi__nav button { display: grid; width: 48px; height: 48px; place-items: center; padding: 0; border: 1px solid var(--v2-line-strong); border-radius: 50%; background: #ffffff; color: var(--v2-ink); }
.v2-testi__nav button + button { border-color: var(--v2-blue); background: var(--v2-blue); color: #ffffff; }
.v2-testi__nav button:hover { border-color: var(--v2-blue); }
.v2-testi__nav button + button:hover { background: var(--v2-blue-hover); }
.v2-testi__nav .v2-icon { width: 20px; height: 20px; }
.v2-testi:not(.is-ready) .v2-testi__nav,
.v2-testi:not(.is-ready) .v2-testi__cloud button { display: none; }
.v2-testi:not(.is-ready) .v2-testi__slide + .v2-testi__slide { padding-top: 24px; border-top: 1px solid var(--v2-line); }
.v2-testi:not(.is-ready) .v2-testi__quote { min-height: 0; font-size: 22px; }
.v2-testi:not(.is-ready) .v2-testi__person { padding-right: 0; }

.v2-testi__cloud { position: relative; width: 100%; max-width: 440px; margin-inline: auto; aspect-ratio: 1 / 1; }
.v2-testi__cloud::before { content: ""; position: absolute; inset: 8%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #cfe6ff, var(--v2-blue-tint) 60%, transparent 72%); }
.v2-testi__avatar {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 4px solid #ffffff;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(6, 43, 78, .18);
    transition: transform .2s ease, border-color .2s ease;
}
.v2-testi__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.v2-testi__avatar[aria-pressed="true"] { border-color: var(--v2-blue); transform: scale(1.08); }
.v2-testi__avatar:hover { transform: scale(1.05); }
.v2-testi__center {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 14px 18px;
    border-radius: var(--v2-r-md);
    background: #ffffff;
    box-shadow: 0 22px 48px rgba(6, 43, 78, .16);
    color: var(--v2-ink);
    line-height: 1.25;
    text-align: center;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.v2-testi__center strong { display: block; font-family: var(--v2-font-display); font-size: 19px; font-weight: 800; }
.v2-testi__center span { color: var(--v2-muted); font-size: 13px; }

/* 16. CTA + pembayaran ------------------------------------------------------ */
.v2-cta { padding: 72px 0 96px; background: #ffffff; }
.v2-cta .v2-wrap { display: flex; flex-direction: column; gap: 56px; }
.v2-pay { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.v2-pay > p { color: var(--v2-body); font-weight: 600; }
.v2-pay__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 684px; }
.v2-pay__list li { display: flex; width: 104px; height: 56px; align-items: center; justify-content: center; padding: 10px; border: 1px solid var(--v2-line); border-radius: 14px; background: #ffffff; }
.v2-pay__list img { width: auto; max-width: 100%; max-height: 28px; }
.v2-cta__box {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    overflow: hidden;
    padding: 56px;
    border-radius: var(--v2-r-xl);
    background: var(--v2-navy);
    color: #ffffff;
}
.v2-cta__box::before { content: ""; position: absolute; inset: 0; background: radial-gradient(520px 320px at 90% 0%, rgba(22, 136, 248, .5), transparent 70%), radial-gradient(420px 260px at 0% 100%, rgba(255, 199, 94, .18), transparent 70%); pointer-events: none; }
.v2-cta__copy { position: relative; display: flex; flex: 1 1 440px; flex-direction: column; gap: 12px; }
.v2-cta__badge { align-self: flex-start; padding: 4px 12px; border-radius: var(--v2-r-pill); background: rgba(255, 199, 94, .16); color: var(--v2-gold); font-size: 13px; font-weight: 700; }
.v2-cta__copy h2 { color: #ffffff; font-family: var(--v2-font-display); font-size: 40px; font-weight: 800; letter-spacing: -.02em; word-spacing: .06em; line-height: 1.15; }
.v2-cta__copy p { color: var(--v2-on-dark); font-size: 18px; }
.v2-cta__actions { position: relative; display: flex; flex-wrap: wrap; gap: 12px; }

/* 17. Data center gelap ---------------------------------------------------- */
.v2-dc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.v2-dc--cards { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; }
.v2-dc__copy { display: flex; flex-direction: column; gap: 22px; }
.v2-dc__copy > p { color: var(--v2-on-dark); }
.v2-dc__map { position: relative; }
.v2-dc__map svg { width: 100%; height: auto; }
.v2-dc__map .v2-float { padding: 10px 14px; font-size: 13px; }
.v2-dc__map .v2-float span { color: var(--v2-muted); }
.v2-dc__note { margin-top: 8px; color: var(--v2-faint) !important; font-size: 12px; }
.v2-dc__list { display: grid; gap: 12px; }
.v2-dc__item { padding: 18px 20px; border: 1px solid var(--v2-on-dark-line); border-radius: var(--v2-r-md); background: rgba(255, 255, 255, .05); }
.v2-dc__item strong { color: #ffffff; }
.v2-dc__item div { color: var(--v2-on-dark); font-size: 14px; }
.v2-dc__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; color: var(--v2-on-dark); font-size: 14px; }
.v2-dc__facts strong { display: block; color: #ffffff; }
.v2-dc__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v2-dc__card { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border: 1px solid var(--v2-on-dark-line); border-radius: var(--v2-r-lg); background: rgba(255, 255, 255, .05); }
.v2-dc__code { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--v2-r-pill); background: rgba(255, 255, 255, .08); color: #ffffff; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.v2-dc__code::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--v2-green)); }
.v2-dc__card h3 { color: #ffffff; font-family: var(--v2-font-display); font-size: 22px; font-weight: 800; line-height: 1.2; }
.v2-dc__floor { color: var(--v2-gold); font-weight: 700; }
.v2-dc__card p { color: var(--v2-on-dark); font-size: 15px; }

/* 18. Spesifikasi & tab ---------------------------------------------------- */
.v2-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--v2-line); border-radius: var(--v2-r-lg); background: #ffffff; -webkit-overflow-scrolling: touch; }
.v2-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.v2-table caption { padding: 16px 20px; color: var(--v2-muted); font-size: 14px; text-align: left; caption-side: bottom; }
.v2-table :where(th, td) { padding: 14px 20px; border-bottom: 1px solid var(--v2-line); text-align: left; vertical-align: top; }
.v2-table thead th { background: var(--v2-alt); color: var(--v2-ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.v2-table tbody th { color: var(--v2-ink); font-weight: 600; }
.v2-table tbody tr:last-child :where(th, td) { border-bottom: 0; }
.v2-table tbody tr:hover { background: #fafcfe; }
.v2-table .is-highlight { background: var(--v2-blue-tint); }

.v2-spec { display: grid; }
.v2-spec > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--v2-line); font-size: 15px; }
.v2-spec > div:first-child { border-top: 0; }
.v2-spec dt { color: var(--v2-muted); }
.v2-spec dd { color: var(--v2-ink); font-weight: 700; text-align: right; }
.v2-on-dark .v2-spec > div { border-color: var(--v2-on-dark-line); }
.v2-on-dark .v2-spec dt { color: var(--v2-on-dark); }
.v2-on-dark .v2-spec dd { color: #ffffff; }

.v2-tabs__list { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--v2-line); border-radius: var(--v2-r-pill); background: var(--v2-alt); }
.v2-tabs__list [role="tab"] { min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--v2-r-pill); background: transparent; color: var(--v2-body); font: 600 15px/1 var(--v2-font-body); }
.v2-tabs__list [role="tab"][aria-selected="true"] { background: var(--v2-ink); color: #ffffff; }
.v2-tabs__panel:focus-visible { outline-offset: 6px; }

.v2-copy {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 8px 0 16px;
    border: 1px dashed var(--v2-gold);
    border-radius: var(--v2-r-pill);
    background: rgba(255, 199, 94, .12);
    color: inherit;
    font: 700 15px/1 var(--v2-font-body);
    letter-spacing: .04em;
}
.v2-copy__hint { padding: 6px 10px; border-radius: var(--v2-r-pill); background: var(--v2-gold); color: var(--v2-ink); font-size: 12px; letter-spacing: 0; }
.v2-copy.is-copied .v2-copy__hint { background: var(--v2-green); color: #ffffff; }

/* 19. Responsif ------------------------------------------------------------ */
@media (max-width: 1024px) {
    :root { --v2-sec: 88px; }
    .v2-h2 { font-size: 34px; }
    .v2-hero__h1 { font-size: 44px; }
    .v2-hero--page .v2-hero__h1 { font-size: 42px; }
    .v2-hero__grid,
    .v2-hero--page .v2-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .v2-stage { width: 100%; max-width: 560px; height: 500px; margin-inline: auto; }
    .v2-hero--page .v2-stage { height: 360px; }

    .v2-grid--4, .v2-grid--5, .v2-grid--6 { --v2-cols: 2; }
    .v2-grid--3 { --v2-cols: 2; }
    .v2-grid--5.v2-grid--keep3, .v2-grid--6.v2-grid--keep3 { --v2-cols: 3; }
    .v2-split, .v2-split--wide-left, .v2-split--wide-right, .v2-dc, .v2-dc--cards, .v2-testi__grid { grid-template-columns: 1fr; gap: 48px; }
    .v2-split__media-first { order: -1; }
    .v2-photo { min-height: 440px; }
    .v2-stats { --v2-cols: 2; }
    .v2-plans { --v2-cols: 2; }
    .v2-bento, .v2-bento--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v2-bento__big, .v2-bento--lead .v2-bento__big { grid-row: auto; grid-column: 1 / -1; min-height: 420px; }
    .v2-steps { --v2-cols: 2 !important; row-gap: 40px; }
    .v2-steps::before { display: none; }
    .v2-panel { padding: 36px; }

    body.wh2 .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body.wh2 .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
    :root { --v2-gutter: 16px; --v2-sec: 64px; }
    .v2-h2 { font-size: 29px; }
    .v2-lead { font-size: 17px; }
    .v2-hero__h1 { font-size: 34px; }
    .v2-hero--page .v2-hero__h1 { font-size: 32px; }
    .v2-hero__desc { font-size: 17px; }
    .v2-hero__checks { grid-template-columns: 1fr; }
    .v2-hero__price strong { font-size: 38px; }
    .v2-hero .v2-btn, .v2-hero__actions .v2-btn { width: 100%; }
    .v2-stage { height: 420px; }
    .v2-hero--page .v2-stage { height: 300px; }
    .v2-hide-sm { display: none !important; }
    .v2-btn--stack-sm { width: 100%; }

    .v2-grid--2, .v2-grid--3, .v2-grid--4, .v2-grid--5, .v2-grid--6 { --v2-cols: 1; }
    .v2-grid.v2-grid--keep3 { --v2-cols: 1; }
    .v2-grid--sm2 { --v2-cols: 2 !important; }
    .v2-plans { --v2-cols: 1; }
    .v2-stats { --v2-cols: 2; gap: 12px; }
    .v2-stat { padding: 20px 18px; border-radius: var(--v2-r-md); }
    .v2-stat__value { font-size: 30px; }
    .v2-stat__label { font-size: 14px; }
    .v2-bento, .v2-bento--lead { grid-template-columns: 1fr; }
    .v2-bento__wide { grid-column: auto; }
    .v2-steps { --v2-cols: 1 !important; }
    .v2-photo { min-height: 360px; }
    .v2-panel { padding: 28px 20px; border-radius: var(--v2-r-lg); }
    .v2-tile { padding: 24px; }
    .v2-band { padding: 32px 24px; }
    .v2-band__body { flex-direction: column; align-items: flex-start; }
    .v2-band .v2-btn { width: 100%; }
    .v2-dc__cards, .v2-dc__facts { grid-template-columns: 1fr; }
    .v2-faq__btn { padding: 16px 18px; font-size: 16px; }
    .v2-faq__a { padding: 0 18px 20px 18px; }
    .v2-testi__quote { min-height: 260px; font-size: 21px; }
    .v2-testi__person { padding-right: 0; }
    .v2-testi__nav { position: static; }
    .v2-cta { padding: 56px 0 72px; }
    .v2-cta__box { padding: 32px 24px; }
    .v2-cta__copy h2 { font-size: 30px; }
    .v2-cta__actions, .v2-cta__actions .v2-btn { width: 100%; }
    .v2-pay__list li { width: calc(33.33% - 8px); }
    .v2-head--split { flex-direction: column; align-items: flex-start; }

    .v2-nav { min-height: 68px; gap: 12px; }
    body.wh2 .site-header .site-brand-logo { width: 140px; }
    .v2-nav__client { padding: 0 16px; font-size: 14px; }
    body.wh2 .site-announcement__item { font-size: 13px; }
    body.wh2 .site-footer__grid { gap: 32px 20px; padding-top: 48px; }
    body.wh2 .chatwoot-lazy-launcher { height: 44px; padding: 0 18px; font-size: 14px; }
    body.wh2 .back-to-top { bottom: 76px; width: 44px; height: 44px; }
    body.wh2 .promo-popup { padding: 12px; }
    body.wh2 .promo-popup__dialog { grid-template-columns: 1fr; max-height: 92vh; border-radius: var(--v2-r-lg); }
    body.wh2 .promo-popup__visual { display: none; }
    body.wh2 .promo-popup__content { padding: 60px 22px 26px; }
    body.wh2 .promo-popup__actions { flex-direction: column; align-items: stretch; }
    body.wh2 .promo-popup__actions .btn { width: 100%; }
}

@media (max-width: 380px) {
    .v2-nav__client { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    body.wh2 *,
    body.wh2 *::before,
    body.wh2 *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* Konten SEO (artikel panjang) tetap ada di HTML tetapi tidak ditampilkan, sama seperti desain lama. */
body.wh2 .konten { display: none !important; }