/* HOLDERVEST - komponen bersama halaman member (produk, investasi, riwayat, akun, tim, bantuan, info).
   Mobile-first. Dimuat setelah app-holdervest.css dan deposit-holdervest.css. */

.hv-app--narrow .hv-app__wrap > section,
.hv-app--narrow .hv-app__wrap > nav,
.hv-app--narrow .hv-app__wrap > article,
.hv-app--narrow .hv-app__wrap > div:not(.hv-alert) { margin-top: 14px; }
.hv-app--narrow .hv-app__wrap > .hv-bar { margin-top: 0; }

/* ── Judul halaman & teks ──────────────────────────────────────────── */
.hv-head { padding: 6px 4px 0; }
.hv-head h2 { font-size: 24px; font-weight: 600; line-height: 1.2; }
.hv-head p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--hv-soft); }
.hv-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 4px 0; font-size: 16px; font-weight: 600; }
.hv-sub a, .hv-sub small { font-size: 13px; font-weight: 400; color: #ffd9b0; text-decoration: none; }
.hv-muted { color: var(--hv-soft); }
.hv-pos { color: #b6ffd3; }
.hv-neg { color: #ffd0d0; }

/* ── Pil saldo / info ringkas ──────────────────────────────────────── */
.hv-wallet-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border: 1px solid rgba(255, 214, 180, .5); border-radius: 18px; background: rgba(118, 32, 0, .4); }
.hv-wallet-row > img { flex: none; width: 40px; filter: drop-shadow(0 6px 10px rgba(70, 18, 0, .5)); }
.hv-wallet-row > div { flex: 1; min-width: 0; }
.hv-wallet-row small { display: block; font-size: 12.5px; color: var(--hv-soft); }
.hv-wallet-row strong { display: block; font-size: 19px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.hv-wallet-row .hv-btn { flex: none; width: auto; height: 40px; padding: 0 16px; font-size: 14px; }

/* ── Strip statistik ───────────────────────────────────────────────── */
.hv-stats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); padding: 14px 6px; }
.hv-stats > div { padding: 2px 10px; text-align: center; }
.hv-stats > div + div { border-left: 1px solid rgba(255, 224, 200, .26); }
.hv-stats small { display: block; font-size: 11.5px; line-height: 1.3; color: var(--hv-soft); }
.hv-stats strong { display: block; margin-top: 5px; font-size: 16px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hv-stats--2 { --cols: 2; }
.hv-stats--4 { --cols: 2; row-gap: 14px; }
.hv-stats--4 > div:nth-child(3) { border-left: 0; }

/* ── Chip / tab geser ──────────────────────────────────────────────── */
.hv-chips-nav { display: flex; gap: 8px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.hv-chips-nav::-webkit-scrollbar { display: none; }
.hv-chips-nav a, .hv-chips-nav button { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid rgba(255, 214, 180, .5); border-radius: 999px; background: rgba(118, 32, 0, .36); color: #fff; font-family: inherit; font-size: 14px; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.hv-chips-nav .is-active, .hv-chips-nav [aria-current="page"], .hv-chips-nav [aria-selected="true"] { border-color: #fff; background: linear-gradient(180deg, #fff, #ffe7d4); color: #ea580c; font-weight: 600; box-shadow: 0 6px 18px rgba(255, 130, 40, .45); }
.hv-chips-nav a:focus-visible, .hv-chips-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ── Status pill ───────────────────────────────────────────────────── */
.hv-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid rgba(255, 214, 180, .55); border-radius: 999px; background: rgba(118, 32, 0, .4); font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.hv-pill--ok { border-color: rgba(134, 239, 172, .6); background: rgba(16, 120, 60, .4); color: #c9ffdc; }
.hv-pill--bad { border-color: rgba(255, 170, 170, .7); background: rgba(130, 16, 16, .45); color: #ffd9d9; }
.hv-pill--wait { border-color: rgba(255, 220, 140, .7); background: rgba(150, 90, 0, .4); color: #ffe9b8; }

/* ── Ticker aktivitas ──────────────────────────────────────────────── */
.hv-ticker { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border: 1px solid rgba(255, 214, 180, .4); border-radius: 999px; background: rgba(118, 32, 0, .36); font-size: 12.5px; overflow: hidden; }
.hv-ticker > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgba(74, 222, 128, .22); animation: hv-pulse 1.5s ease-in-out infinite; }
.hv-ticker__window { flex: 1; min-width: 0; height: 100%; overflow: hidden; }
.hv-ticker__track { display: grid; animation: hv-ticker var(--d, 12s) steps(var(--n, 4)) infinite; }
.hv-ticker__track span { display: block; height: 40px; line-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hv-soft); }
.hv-ticker__track b { font-weight: 500; color: #fff; }

/* ── Kartu paket ───────────────────────────────────────────────────── */
.hv-pkgs { display: grid; gap: 12px; }
.hv-pkg { padding: 14px; overflow: hidden; }
.hv-pkg__top { display: flex; align-items: center; gap: 12px; }
.hv-pkg__thumb { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border: 1px solid rgba(255, 226, 200, .6); border-radius: 16px; background: linear-gradient(150deg, rgba(255, 170, 104, .5), rgba(170, 48, 0, .5)); overflow: hidden; }
.hv-pkg__thumb img { width: 100%; height: 100%; object-fit: cover; }
.hv-pkg__thumb img.is-brand { width: 74%; height: auto; object-fit: contain; }
.hv-pkg__name { flex: 1; min-width: 0; }
.hv-pkg__name h3 { font-size: 16.5px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.hv-pkg__name small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--hv-soft); }
.hv-pkg__price { flex: none; text-align: right; }
.hv-pkg__price small { display: block; font-size: 11.5px; color: var(--hv-soft); }
.hv-pkg__price strong { display: block; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding: 10px 0; border: 1px solid rgba(255, 214, 180, .34); border-radius: 14px; background: rgba(118, 32, 0, .3); }
.hv-facts > div { padding: 0 8px; text-align: center; }
.hv-facts > div + div { border-left: 1px solid rgba(255, 224, 200, .24); }
.hv-facts small { display: block; font-size: 11px; color: var(--hv-soft); }
.hv-facts strong { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hv-facts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hv-pkg__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.hv-pkg__foot .hv-btn { flex: 1; width: auto; height: 46px; font-size: 15px; }
.hv-pkg__foot .hv-btn > span:first-child { flex: 1; text-align: center; }
.hv-pkg__foot .hv-btn--ghost { flex: none; padding: 0 16px; }

.hv-meter { height: 8px; border-radius: 999px; background: rgba(90, 22, 0, .5); overflow: hidden; }
.hv-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd27a, #ff8a2b, #fff); box-shadow: 0 0 12px rgba(255, 170, 80, .8); transition: width .6s ease; }
.hv-meter-row { display: flex; justify-content: space-between; gap: 10px; margin: 12px 0 6px; font-size: 12px; color: var(--hv-soft); }
.hv-meter-row b { font-weight: 500; color: #fff; }

/* ── Lembar bawah (dialog) ─────────────────────────────────────────── */
.hv-sheet { position: fixed; inset: 0; z-index: 90; display: none; align-items: flex-end; justify-content: center; background: rgba(60, 14, 0, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hv-sheet.is-open { display: flex; }
.hv-sheet__panel { position: relative; width: 100%; max-width: 560px; max-height: 92vh; padding: 12px 18px max(20px, env(safe-area-inset-bottom)); border: 1px solid rgba(255, 214, 180, .5); border-bottom: 0; border-radius: 26px 26px 0 0; background: linear-gradient(170deg, #d9540b, #8f2f04 60%, #6d1f02); box-shadow: 0 -20px 60px rgba(40, 8, 0, .6); overflow-y: auto; animation: hv-sheet-up .28s cubic-bezier(.2, .8, .2, 1); }
.hv-sheet__panel::before { content: ''; display: block; width: 44px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: rgba(255, 226, 200, .6); }
.hv-sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.hv-sheet__head small { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hv-soft); }
.hv-sheet__head h2 { margin-top: 2px; font-size: 20px; font-weight: 600; line-height: 1.25; }
.hv-sheet__close { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid rgba(255, 230, 210, .5); border-radius: 50%; background: rgba(90, 22, 0, .3); color: #fff; font-size: 18px; cursor: pointer; }
.hv-sheet .hv-btn { width: 100%; height: 54px; margin-top: 14px; font-size: 16px; }
.hv-sheet .hv-btn > span:first-child { flex: 1; text-align: center; }
.hv-sheet__note { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(255, 190, 190, .6); border-radius: 12px; background: rgba(120, 10, 10, .4); font-size: 13px; line-height: 1.4; }

/* ── Baris kunci-nilai ─────────────────────────────────────────────── */
.hv-kv { display: grid; margin-top: 8px; }
.hv-kv > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px dashed rgba(255, 224, 200, .26); font-size: 14px; color: var(--hv-soft); }
.hv-kv > div:last-child { border-bottom: 0; }
.hv-kv strong { font-weight: 500; text-align: right; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hv-kv .is-total { padding-top: 13px; font-size: 15px; color: #fff; }
.hv-kv .is-total strong { font-size: 21px; font-weight: 600; color: #b6ffd3; }

/* ── Daftar baris (menu, riwayat, tiket) ───────────────────────────── */
.hv-rows { display: grid; }
.hv-rows > a, .hv-rows > div, .hv-rows > button, .hv-rows > li { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 4px; border: 0; border-bottom: 1px solid rgba(255, 224, 200, .2); background: none; color: #fff; font-family: inherit; font-size: 15px; text-align: left; text-decoration: none; }
.hv-rows > :last-child { border-bottom: 0; }
.hv-rows > a, .hv-rows > button { cursor: pointer; transition: background-color .15s ease; }
.hv-rows > a:hover, .hv-rows > button:hover { background: rgba(255, 255, 255, .06); }
.hv-rows__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border: 1px solid rgba(255, 226, 200, .5); border-radius: 13px; background: linear-gradient(150deg, rgba(255, 170, 104, .5), rgba(170, 48, 0, .5)); font-size: 21px; }
.hv-rows__icon img { width: 30px; }
.hv-rows__icon--in { border-color: rgba(134, 239, 172, .6); background: rgba(16, 120, 60, .45); color: #c9ffdc; }
.hv-rows__icon--out { border-color: rgba(255, 170, 170, .65); background: rgba(130, 16, 16, .45); color: #ffd9d9; }
.hv-rows__body { flex: 1; min-width: 0; }
.hv-rows__body strong { display: block; font-size: 15px; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; }
.hv-rows__body small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--hv-soft); overflow-wrap: anywhere; }
.hv-rows__end { flex: none; text-align: right; }
.hv-rows__end strong { display: block; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-rows__end small { display: block; margin-top: 2px; font-size: 12px; color: var(--hv-soft); }
.hv-rows > a > .hv-icon:last-child, .hv-rows > button > .hv-icon:last-child { flex: none; font-size: 18px; color: #ffc58f; }
.hv-panel--flush { padding: 6px 14px; }

/* ── Hitung mundur ─────────────────────────────────────────────────── */
.hv-clock { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(255, 214, 180, .5); border-radius: 16px; background: linear-gradient(120deg, rgba(255, 138, 43, .5), rgba(170, 48, 0, .45)); }
.hv-clock__label { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.hv-clock__label b { font-weight: 600; }
.hv-clock__digits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.hv-clock__digits div { padding: 8px 4px; border-radius: 12px; background: rgba(90, 22, 0, .4); text-align: center; }
.hv-clock__digits b { display: block; font-size: 24px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
.hv-clock__digits span { display: block; font-size: 10.5px; color: var(--hv-soft); }
.hv-clock p { margin-top: 8px; font-size: 12px; color: var(--hv-soft); }

.hv-details { margin-top: 12px; border-top: 1px solid rgba(255, 224, 200, .24); }
.hv-details summary { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 2px; font-size: 13.5px; color: #ffd9b0; list-style: none; cursor: pointer; }
.hv-details summary::-webkit-details-marker { display: none; }
.hv-details summary::after { content: '+'; font-size: 20px; font-weight: 300; line-height: 1; transition: transform .2s ease; }
.hv-details[open] summary::after { transform: rotate(45deg); }

/* ── Sampul detail (gambar besar) ──────────────────────────────────── */
.hv-cover { position: relative; min-height: 210px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hv-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hv-cover__art { position: absolute; right: -6%; top: 50%; width: 62%; transform: translateY(-50%); opacity: .95; filter: drop-shadow(0 16px 20px rgba(70, 18, 0, .5)); animation: hv-float 6s ease-in-out infinite; }
.hv-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(110, 30, 0, .05) 20%, rgba(92, 24, 0, .9)); }
.hv-cover > div { position: relative; z-index: 1; }
.hv-cover h2 { margin-top: 10px; font-size: 24px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hv-cover p { margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--hv-soft); }

.hv-bigfig { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hv-bigfig > div { padding: 14px 16px; }
.hv-bigfig small { display: block; font-size: 12.5px; color: var(--hv-soft); }
.hv-bigfig strong { display: block; margin-top: 4px; font-size: 21px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ── Garis waktu ───────────────────────────────────────────────────── */
.hv-timeline { display: grid; gap: 0; margin-top: 12px; list-style: none; }
.hv-timeline li { position: relative; padding: 0 0 16px 40px; font-size: 13.5px; line-height: 1.5; color: var(--hv-soft); }
.hv-timeline li:last-child { padding-bottom: 0; }
.hv-timeline li::before { content: ''; position: absolute; left: 12px; top: 26px; bottom: 0; width: 2px; background: rgba(255, 224, 200, .3); }
.hv-timeline li:last-child::before { display: none; }
.hv-timeline li > span { position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255, 226, 200, .7); border-radius: 50%; background: linear-gradient(150deg, #ff9a4d, #ea580c); font-size: 14px; color: #fff; }
.hv-timeline strong { display: block; font-size: 14.5px; font-weight: 600; color: #fff; }

/* ── Keadaan kosong ────────────────────────────────────────────────── */
.hv-blank { padding: 34px 20px 28px; text-align: center; }
.hv-blank > img { width: 96px; margin: 0 auto 14px; filter: drop-shadow(0 12px 16px rgba(70, 18, 0, .5)); animation: hv-float 6s ease-in-out infinite; }
.hv-blank h3 { font-size: 19px; font-weight: 600; }
.hv-blank p { margin: 6px auto 0; max-width: 28em; font-size: 14px; line-height: 1.5; color: var(--hv-soft); }
.hv-blank .hv-btn { width: auto; min-width: 200px; height: 50px; margin-top: 18px; padding: 0 24px; font-size: 15.5px; }

.hv-in > span img { width: 26px; }

/* ── Form umum di dalam panel ──────────────────────────────────────── */
.hv-panel .hv-label:first-of-type { margin-top: 16px; }
.hv-in textarea { flex: 1; min-width: 0; min-height: 96px; padding: 14px 16px 14px 8px; border: 0; outline: 0; resize: vertical; background: none; color: #fff; font-family: inherit; font-size: 15.5px; line-height: 1.45; }
.hv-in--area { height: auto; align-items: flex-start; }
.hv-in--area > span { padding-top: 14px; }
.hv-in input[type="password"], .hv-in input[type="tel"], .hv-in input[type="date"], .hv-in input[type="email"] { font-size: 16px; font-weight: 400; }
.hv-in__toggle { display: grid; place-items: center; flex: none; width: 48px; height: 100%; border: 0; background: none; color: #fff; font-size: 21px; cursor: pointer; }

/* ── Teks panjang (legal, profil perusahaan) ───────────────────────── */
.hv-prose { font-size: 14.5px; line-height: 1.65; color: var(--hv-soft); overflow-wrap: anywhere; }
.hv-prose h2, .hv-prose h3, .hv-prose h4 { margin: 18px 0 6px; font-size: 16.5px; font-weight: 600; line-height: 1.3; color: #fff; }
.hv-prose > :first-child { margin-top: 0; }
.hv-prose p { margin-top: 10px; }
.hv-prose ul, .hv-prose ol { margin: 10px 0 0 20px; }
.hv-prose li { margin-top: 4px; }
.hv-prose a { color: #ffd9b0; }
.hv-prose strong, .hv-prose b { font-weight: 500; color: #fff; }
.hv-prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* ── Kartu anggota (akun) ──────────────────────────────────────────── */
.hv-member { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: center; padding: 18px; }
.hv-member__avatar { position: relative; display: grid; place-items: center; width: 76px; height: 76px; border: 2px solid rgba(255, 226, 200, .85); border-radius: 50%; background: #4a1602; color: #fff; font-size: 40px; text-decoration: none; box-shadow: 0 0 22px rgba(255, 150, 70, .5); }
.hv-member__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.hv-member__avatar i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(255, 226, 200, .8); border-radius: 50%; background: linear-gradient(150deg, #ff9a4d, #ea580c); font-size: 15px; }
.hv-member__body { min-width: 0; }
.hv-member__body h2 { font-size: 21px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hv-member__body p { margin: 3px 0 7px; font-size: 13.5px; color: var(--hv-soft); }
.hv-member__code { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 10px 10px 10px 16px; border: 1px dashed rgba(255, 214, 180, .6); border-radius: 14px; background: rgba(118, 32, 0, .34); }
.hv-member__code small { display: block; font-size: 11.5px; color: var(--hv-soft); }
.hv-member__code strong { display: block; font: 600 18px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .08em; overflow-wrap: anywhere; }
.hv-member__code .hv-chip-btn { flex: none; padding: 8px 18px; }
.hv-member__since { grid-column: 1 / -1; font-size: 12.5px; color: var(--hv-soft); }

.hv-avatars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.hv-avatars button { aspect-ratio: 1; padding: 3px; border: 2px solid rgba(255, 214, 180, .45); border-radius: 50%; background: rgba(118, 32, 0, .4); cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), border-color .2s ease, box-shadow .2s ease; }
.hv-avatars button:hover { transform: scale(1.06); }
.hv-avatars button.is-selected { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 190, 130, .4), 0 0 22px rgba(255, 150, 70, .6); }
.hv-avatars button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.hv-avatars img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* ── Kartu bagikan kode referral ───────────────────────────────────── */
.hv-share { padding: 22px 18px 18px; text-align: center; overflow: hidden; }
.hv-share__art { position: absolute; right: -14px; top: -10px; width: 96px; opacity: .9; transform: rotate(10deg); filter: drop-shadow(0 10px 14px rgba(70, 18, 0, .5)); animation: hv-float 6s ease-in-out infinite; }
.hv-share > small { display: block; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-soft); }
.hv-share__code { display: block; margin-top: 6px; font: 600 34px/1.15 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-shadow: 0 0 22px rgba(255, 170, 90, .7); overflow-wrap: anywhere; }
.hv-share__link { margin-top: 10px; padding: 9px 12px; border: 1px dashed rgba(255, 214, 180, .6); border-radius: 12px; background: rgba(118, 32, 0, .34); font-size: 12.5px; color: var(--hv-soft); overflow-wrap: anywhere; }
.hv-share__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.hv-share__actions .hv-btn { width: 100%; height: 48px; padding: 0 12px; font-size: 14.5px; }
.hv-share__actions .hv-btn--fire { grid-column: 1 / -1; }
.hv-share__actions .hv-btn > span:first-child { flex: 1; text-align: center; }

/* ── Tangga tahap (tugas, target) ──────────────────────────────────── */
.hv-ladder { display: grid; gap: 10px; margin-top: 14px; list-style: none; }
.hv-ladder__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: start; padding: 14px; }
.hv-ladder__no { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid rgba(255, 230, 210, .7); border-radius: 50%; background: rgba(118, 32, 0, .4); font-size: 17px; font-weight: 600; }
.hv-ladder__body h3 { font-size: 15.5px; font-weight: 600; line-height: 1.3; }
.hv-ladder__body p { margin-top: 2px; font-size: 13px; color: var(--hv-soft); }
.hv-ladder__body p strong { font-weight: 600; color: #fff; }
.hv-ladder__step form { grid-column: 1 / -1; }
.hv-ladder__step .hv-btn { width: 100%; height: 44px; font-size: 14.5px; }
.hv-ladder__step.is-done .hv-ladder__no { border-color: #ffd9b8; background: linear-gradient(150deg, #ff9345, #ea580c); box-shadow: 0 0 16px rgba(255, 150, 70, .7); }
.hv-ladder__step.is-ready { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 190, 130, .3), 0 0 26px rgba(255, 150, 70, .45); }
.hv-ladder__step.is-ready .hv-ladder__no { border-color: #fff; background: #fff; color: #ea580c; animation: hv-ring 2.2s ease-out infinite; }
.hv-ladder__step.is-locked { opacity: .62; }
.hv-btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ── Kode bonus ─────────────────────────────────────────────────────── */
.hv-voucher { padding: 26px 18px 20px; text-align: center; }
.hv-voucher__art { width: 96px; margin: 0 auto 6px; filter: drop-shadow(0 12px 16px rgba(70, 18, 0, .5)); animation: hv-float 6s ease-in-out infinite; }
.hv-voucher__label { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--hv-soft); }
.hv-voucher__input { display: block; width: 100%; height: 64px; margin-top: 10px; padding: 0 12px; border: 1.5px dashed rgba(255, 226, 200, .8); border-radius: 16px; background: rgba(118, 32, 0, .4); color: #fff; font: 600 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .14em; text-align: center; text-transform: uppercase; outline: 0; transition: border-color .2s, box-shadow .2s; }
.hv-voucher__input::placeholder { color: rgba(255, 226, 200, .45); }
.hv-voucher__input:focus { border-style: solid; border-color: #fff; box-shadow: 0 0 0 4px rgba(255, 190, 130, .3); }

/* ── Kalender check-in 7 hari ───────────────────────────────────────── */
.hv-week { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 8px; list-style: none; }
.hv-week li { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; text-align: center; }
.hv-week li:last-child { grid-column: span 2; }
.hv-week small { font-size: 11.5px; color: var(--hv-soft); }
.hv-week img, .hv-week__mark { width: 38px; height: 38px; }
.hv-week__mark { display: grid; place-items: center; border-radius: 50%; background: linear-gradient(150deg, #ff9345, #ea580c); box-shadow: 0 0 14px rgba(255, 150, 70, .7); font-size: 18px; }
.hv-week strong { font-size: 12.5px; font-weight: 600; }
.hv-week li.is-done { opacity: .78; }
.hv-week li.is-current { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 190, 130, .3), 0 0 22px rgba(255, 150, 70, .5); }

/* ── Roda hadiah ────────────────────────────────────────────────────── */
.hv-wheel { position: relative; display: grid; justify-items: center; padding: 30px 16px 18px; overflow: hidden; }
.hv-wheel__disc { position: relative; width: min(78vw, 310px); aspect-ratio: 1; border: 8px solid #fff3e6; border-radius: 50%; box-shadow: 0 0 0 3px #ea580c, 0 0 46px rgba(255, 160, 80, .6), inset 0 0 22px rgba(90, 22, 0, .35); will-change: transform; }
.hv-wheel__label { position: absolute; inset: 0; display: flex; justify-content: center; padding-top: 9%; color: #fff; pointer-events: none; }
.hv-wheel__label b { max-width: 5.2em; font-size: 12.5px; font-weight: 700; line-height: 1.1; text-align: center; text-shadow: 0 1px 2px rgba(90, 22, 0, .6); overflow-wrap: anywhere; }
.hv-wheel__label.is-dark { color: #7c2d12; }
.hv-wheel__label.is-dark b { text-shadow: none; }
.hv-wheel__pin { position: absolute; top: 14px; left: 50%; z-index: 2; width: 0; height: 0; margin-left: -13px; border: 13px solid transparent; border-top: 26px solid #fff; border-bottom: 0; filter: drop-shadow(0 4px 6px rgba(70, 18, 0, .6)); }
.hv-wheel__hub { position: absolute; top: 30px; left: 50%; z-index: 1; display: grid; place-items: center; width: 66px; height: 66px; margin: calc(min(78vw, 310px) / 2 - 33px) 0 0 -33px; border: 3px solid #fff; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff9345, #c2410c); box-shadow: 0 6px 16px rgba(70, 18, 0, .55); }
.hv-wheel__hub img { width: 40px; }
.hv-wheel form, .hv-wheel > .hv-btn { width: 100%; margin-top: 20px; }
.hv-wheel .hv-btn { width: 100%; height: 54px; }
.hv-wheel .hv-btn > span:first-child { flex: 1; text-align: center; }
/* ── Pusat bantuan: panduan & live chat ─────────────────────────────── */
.hv-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hv-faq { margin-top: 8px; padding: 4px 14px; }
.hv-faq details + details { border-top: 1px solid rgba(255, 224, 200, .22); }
.hv-faq summary { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 15px; font-weight: 500; list-style: none; cursor: pointer; }
.hv-faq summary::-webkit-details-marker { display: none; }
.hv-faq summary::after { content: none; }
.hv-faq summary img { width: 34px; flex: none; }
.hv-faq summary span { flex: 1; }
.hv-faq summary .hv-icon { transition: transform .2s ease; }
.hv-faq details[open] summary .hv-icon { transform: rotate(180deg); }
.hv-faq details p { padding: 0 0 14px 46px; font-size: 13.5px; line-height: 1.55; color: var(--hv-soft); }
body.hv-app--chat { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.hv-chat { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.hv-chat__msg { align-self: flex-start; max-width: 84%; padding: 10px 14px; border: 1px solid rgba(255, 214, 180, .45); border-radius: 18px 18px 18px 6px; background: rgba(118, 32, 0, .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hv-chat__msg.is-me { align-self: flex-end; border-color: #fff; border-radius: 18px 18px 6px 18px; background: #fff; color: #7c2d12; }
.hv-chat__msg small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: #ffd9b0; }
.hv-chat__msg p { font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.hv-chat__msg time { display: block; margin-top: 4px; font-size: 11px; text-align: right; opacity: .7; }
.hv-compose { position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: flex-end; gap: 8px; width: min(calc(100% - 24px), 536px); padding: 8px; border: 1px solid rgba(255, 214, 180, .55); border-radius: 26px; background: rgba(110, 28, 0, .86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 14px 34px rgba(60, 14, 0, .5); transform: translateX(-50%); }
.hv-compose textarea { flex: 1; min-width: 0; min-height: 44px; max-height: 120px; padding: 11px 12px; border: 0; background: none; color: #fff; font: inherit; font-size: 15px; line-height: 1.4; resize: none; outline: 0; }
.hv-compose textarea::placeholder { color: rgba(255, 226, 200, .6); }
.hv-compose .hv-btn { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; }

/* ── Dua dompet berdampingan ────────────────────────────────────────── */
.hv-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 12px; }
.hv-swap > .hv-card { display: grid; justify-items: center; gap: 2px; padding: 16px 10px 14px; text-align: center; }
.hv-swap img { width: 48px; }
.hv-swap small { font-size: 12.5px; color: var(--hv-soft); }
.hv-swap strong { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hv-swap .hv-btn { width: 100%; height: 40px; margin-top: 10px; padding: 0 8px; font-size: 13.5px; }
.hv-swap__arrow { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(255, 226, 200, .6); border-radius: 50%; background: rgba(118, 32, 0, .5); font-size: 15px; }

/* ── Dokumen (legal, privasi, lisensi) ──────────────────────────────── */
.hv-doc-head { display: flex; align-items: center; gap: 14px; margin: 18px 4px 4px; }
.hv-doc-head img { width: 64px; flex: none; filter: drop-shadow(0 10px 14px rgba(70, 18, 0, .5)); }
.hv-doc-head h1 { font-size: 23px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.hv-doc-head p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--hv-soft); }
.hv-doc { position: relative; margin-top: 12px; }
.hv-doc h2 { padding-right: 46px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.hv-doc__no { position: absolute; top: 14px; right: 16px; font-size: 26px; font-weight: 600; line-height: 1; color: rgba(255, 226, 200, .3); }
.hv-doc .hv-prose { margin-top: 8px; }

/* ── Kartu aplikasi (unduh) ─────────────────────────────────────────── */
.hv-appcard { position: relative; padding: 24px 18px 22px; overflow: hidden; }
.hv-appcard__phone { position: absolute; right: -4%; bottom: -34%; width: 46%; opacity: .95; filter: drop-shadow(0 16px 22px rgba(70, 18, 0, .55)); }
.hv-appcard__logo { display: grid; place-items: center; width: 68px; height: 68px; border: 1px solid rgba(255, 226, 200, .7); border-radius: 20px; background: radial-gradient(circle at 35% 30%, #ff9345, #c2410c); box-shadow: 0 10px 22px rgba(70, 18, 0, .45); }
.hv-appcard__logo img { width: 44px; }
.hv-appcard h2 { margin-top: 14px; font-size: 24px; font-weight: 600; letter-spacing: .04em; }
.hv-appcard p { max-width: 58%; margin: 4px 0 12px; font-size: 13.5px; line-height: 1.45; color: var(--hv-soft); }

/* ── Layar sambutan ─────────────────────────────────────────────────── */
body.hv-app--intro { padding: 0; }
.hv-intro { display: flex; flex-direction: column; width: 100%; max-width: 560px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; }
.hv-intro__top { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.hv-intro__top img { width: 150px; }
.hv-intro__top a { text-decoration: none; padding: 8px 14px; border: 1px solid rgba(255, 226, 200, .6); border-radius: 999px; font-size: 13.5px; }
.hv-intro__track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hv-intro__track::-webkit-scrollbar { display: none; }
.hv-intro__slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px 26px; text-align: center; scroll-snap-align: center; }
.hv-intro__slide img { width: min(68%, 280px); max-height: 38vh; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(70, 18, 0, .55)); animation: hv-float 6s ease-in-out infinite; }
.hv-intro__slide h1 { margin-top: 22px; font-size: 27px; font-weight: 600; line-height: 1.2; text-wrap: balance; }
.hv-intro__slide p { max-width: 34ch; margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--hv-soft); }
.hv-intro__foot { display: grid; gap: 10px; padding: 0 20px max(22px, env(safe-area-inset-bottom)); }
.hv-intro__foot .hv-btn { width: 100%; height: 54px; }
.hv-intro__dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 8px; }
.hv-intro__dots span { width: 8px; height: 8px; border-radius: 8px; background: rgba(255, 226, 200, .4); transition: width .25s ease, background .25s ease; }
.hv-intro__dots span.is-on { width: 26px; background: #fff; }
@keyframes hv-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); } 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }

@keyframes hv-ticker { to { transform: translateY(calc(var(--n, 4) * -40px)); } }
@keyframes hv-sheet-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (min-width: 600px) {
    .hv-stats--4 { --cols: 4; }
    .hv-stats--4 > div:nth-child(3) { border-left: 1px solid rgba(255, 224, 200, .26); }
    .hv-cover { min-height: 250px; }
}