[data-theme='vault'], :root:has([data-theme='vault']) { --sv-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace; --sv-ink: oklch(0.965 0.004 260); --sv-ink-2: oklch(0.79 0.012 260); --sv-ink-3: oklch(0.68 0.014 260); --sv-bg: oklch(0.165 0.016 264); --sv-surface: oklch(0.2 0.016 264); --sv-surface-2: oklch(0.235 0.017 264); --sv-surface-3: oklch(0.275 0.018 264); --sv-well: oklch(0.15 0.015 264); --sv-line: oklch(0.305 0.018 264); --sv-line-strong: oklch(0.395 0.02 264); --sv-primary-soft: color-mix(in oklab, var(--primary) 11%, var(--sv-surface)); --sv-primary-tint: color-mix(in oklab, var(--primary) 22%, var(--sv-surface)); --sv-primary-line: color-mix(in oklab, var(--primary) 55%, var(--sv-line)); --sv-primary-ink: color-mix(in oklab, var(--primary) 70%, white); --sv-on-primary: var(--primary-foreground, #0b0d11); --sv-glow: 0 0 0 1px color-mix(in oklab, var(--primary) 70%, transparent), 0 0 26px -6px color-mix(in oklab, var(--primary) 55%, transparent); --sv-signal: oklch(0.84 0.17 150); --sv-signal-ink: oklch(0.2 0.05 150); --sv-hot: oklch(0.79 0.15 62); --sv-hot-ink: oklch(0.2 0.04 55); --sv-hot-soft: color-mix(in oklab, var(--sv-hot) 11%, var(--sv-surface)); --sv-star: oklch(0.86 0.14 88); --sv-ok: oklch(0.82 0.17 150); --sv-ok-soft: color-mix(in oklab, oklch(0.82 0.17 150) 11%, var(--sv-surface)); --sv-err: oklch(0.73 0.17 25); --sv-err-soft: color-mix(in oklab, oklch(0.73 0.17 25) 12%, var(--sv-surface)); --sv-warn: oklch(0.84 0.14 82); --sv-warn-ink: var(--sv-warn); --sv-warn-soft: color-mix(in oklab, oklch(0.84 0.14 82) 10%, var(--sv-surface)); --sv-info: oklch(0.8 0.1 240); --sv-info-ink: var(--sv-info); --sv-info-soft: color-mix(in oklab, oklch(0.8 0.1 240) 10%, var(--sv-surface)); --sv-plate: oklch(0.95 0.004 260); --sv-glow-2: oklch(0.62 0.16 290); /* Corner scale: 4 (tags) · 8 (controls, tiles) · 10 (cards in grids) · 12 (panels, dialogs) */ --sv-radius-lg: 12px; --sv-radius: 10px; --sv-radius-sm: 8px; --sv-radius-xs: 4px; --sv-sheen: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(255 255 255 / 0) 140px); --sv-edge: inset 0 1px 0 rgb(255 255 255 / 0.05); --sv-hover-glow: 0 0 28px -14px color-mix(in oklab, var(--primary) 60%, transparent); --sv-shadow: 0 18px 40px -28px rgb(0 0 0 / 0.9); --sv-shadow-lg: 0 28px 64px -30px rgb(0 0 0 / 0.95), 0 0 0 1px rgb(0 0 0 / 0.2); --sv-container: 1240px; --sv-gutter: clamp(16px, 4vw, 32px); --sv-section-gap: clamp(44px, 6vw, 76px); color-scheme: dark; } @supports (color: oklch(from red l c h)) { [data-theme='vault'], :root:has([data-theme='vault']) { --sv-primary-ink: oklch(from var(--primary) max(l, 0.8) min(c, 0.15) h); --sv-glow-2: oklch(from var(--primary) 0.62 max(c, 0.12) calc(h + 70)); --sv-on-primary: oklch(from var(--primary) clamp(0.16, calc((0.64 - l) * 1000), 0.99) 0.01 260); } } [data-theme='vault'] { font-family: var(--font-theme-body), system-ui, sans-serif; color: var(--sv-ink); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01', 'cv11'; } :root:has([data-theme='vault']) body { background: var(--sv-bg); } [data-theme='vault'] ::selection { background: color-mix(in oklab, var(--primary) 35%, transparent); color: var(--sv-ink); } [data-theme='vault'] :is(h1, h2, h3, h4) { font-family: var(--font-theme-heading), system-ui, sans-serif; letter-spacing: -0.025em; } [data-theme='vault'] :is(button, a, input, select, textarea, summary, [role='button'], [tabindex]):focus-visible { outline: 2px solid var(--sv-primary-ink); outline-offset: 2px; } /* Layout */ [data-theme='vault'] .sv-container { width: 100%; max-width: var(--sv-container); margin-inline: auto; padding-inline: var(--sv-gutter); } [data-theme='vault'] .sv-section { margin-top: var(--sv-section-gap); } [data-theme='vault'] .sv-section:first-child { margin-top: 0; } /* Section heading: mono kicker + title + action, closed by a hairline */ [data-theme='vault'] .sv-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-section-kicker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 8px; font-family: var(--sv-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-section-kicker::before { content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent), 0 0 10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-section-kicker svg { width: 13px; height: 13px; } [data-theme='vault'] .sv-section-title { font-size: clamp(21px, 2.4vw, 27px); line-height: 1.18; font-weight: 650; color: var(--sv-ink); } [data-theme='vault'] .sv-section-sub { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); max-width: 58ch; } [data-theme='vault'] .sv-section-link { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); font-family: var(--sv-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink); transition: border-color .15s, color .15s, background-color .15s; } [data-theme='vault'] .sv-section-link svg { width: 14px; height: 14px; } [data-theme='vault'] .sv-section-link:hover { border-color: var(--primary); color: var(--sv-primary-ink); background: var(--sv-primary-soft); } /* 36px box, 44px hit area */ [data-theme='vault'] .sv-section-link::after { content: ''; position: absolute; inset: -4px; } /* Surfaces */ [data-theme='vault'] .sv-card { background: var(--sv-sheen), var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-edge), var(--sv-shadow); } /* Chips: mono, hairline */ [data-theme='vault'] .sv-chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--sv-radius-sm); font-family: var(--sv-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-chip svg { width: 13px; height: 13px; } [data-theme='vault'] .sv-chip--primary { background: var(--sv-primary-soft); color: var(--sv-primary-ink); border-color: color-mix(in oklab, var(--primary) 35%, transparent); } [data-theme='vault'] .sv-chip--signal { background: color-mix(in oklab, var(--sv-signal) 12%, var(--sv-surface)); color: var(--sv-signal); border-color: color-mix(in oklab, var(--sv-signal) 35%, transparent); } [data-theme='vault'] .sv-chip--hot { background: var(--sv-hot); color: var(--sv-hot-ink); border-color: transparent; font-weight: 600; } [data-theme='vault'] .sv-chip--glass { background: rgb(8 10 14 / 0.6); color: #fff; border-color: rgb(255 255 255 / 0.2); backdrop-filter: blur(6px); } /* Buttons */ [data-theme='vault'] .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: var(--sv-radius-sm); font-size: 15px; font-weight: 600; letter-spacing: -0.005em; border: 1px solid transparent; transition: background-color .15s, border-color .15s, box-shadow .2s, color .15s; cursor: pointer; } [data-theme='vault'] .sv-btn--primary { background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 60%, white) inset; } [data-theme='vault'] .sv-btn--primary:hover { box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 60%, white) inset, 0 0 28px -6px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-btn--primary:disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px dashed var(--sv-line-strong); box-shadow: none; cursor: not-allowed; } [data-theme='vault'] .sv-btn--ghost { background: transparent; color: var(--sv-ink); border-color: var(--sv-line-strong); } [data-theme='vault'] .sv-btn--ghost:hover { border-color: var(--primary); color: var(--sv-primary-ink); background: var(--sv-primary-soft); } [data-theme='vault'] .sv-btn--block { width: 100%; } /* Form fields: dark wells with a hairline */ [data-theme='vault'] .sv-field { display: grid; gap: 7px; } [data-theme='vault'] .sv-label { font-family: var(--sv-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-input { width: 100%; height: 46px; padding: 0 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-well); color: var(--sv-ink); font-size: 15px; transition: border-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-input::placeholder { color: var(--sv-ink-3); } [data-theme='vault'] .sv-input:hover { border-color: color-mix(in oklab, var(--sv-line-strong) 70%, var(--sv-ink-3)); } [data-theme='vault'] .sv-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); } [data-theme='vault'] .sv-hint { font-size: 13px; line-height: 1.5; color: var(--sv-ink-2); } /* Step panel: "01 /" mono header + hairline */ [data-theme='vault'] .sv-step { position: relative; background: var(--sv-sheen), var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-edge), var(--sv-shadow); } [data-theme='vault'] .sv-step-head { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 14px 22px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-step-num { display: inline-flex; align-items: baseline; flex-shrink: 0; font-family: var(--sv-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.02em; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-step-num::before { content: '0'; } [data-theme='vault'] .sv-step-num::after { content: '/'; margin-left: 8px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-step-title { font-size: 16px; font-weight: 600; color: var(--sv-ink); letter-spacing: -0.01em; } [data-theme='vault'] .sv-step-aside { margin-left: auto; font-family: var(--sv-mono); font-size: 12px; font-weight: 500; color: var(--sv-ink-3); } [data-theme='vault'] .sv-step-body { padding: 20px 22px 22px; } /* Stars */ [data-theme='vault'] .sv-stars { display: inline-flex; gap: 2px; color: var(--sv-star); } [data-theme='vault'] .sv-stars svg { width: 14px; height: 14px; fill: currentColor; } /* Skeleton */ [data-theme='vault'] .sv-skeleton { background: linear-gradient(90deg, var(--sv-surface-2), var(--sv-surface-3), var(--sv-surface-2)); background-size: 200% 100%; animation: sv-shimmer 1.6s ease-in-out infinite; border-radius: var(--sv-radius-sm); } @keyframes sv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* Background: 1px grid (neutral) + ASCII glyph layer (primary), both fading out */ [data-theme='vault'] .sv-shell { position: relative; isolation: isolate; background: radial-gradient(1100px 620px at 50% -180px, color-mix(in oklab, var(--primary) 17%, transparent), transparent 72%), radial-gradient(900px 520px at 50% -60px, color-mix(in oklab, var(--sv-glow-2) 9%, transparent), transparent 70%), var(--sv-bg); } /* Ambient layer pinned to the viewport: soft primary + complementary glows in the corners and a fine grain, so long pages keep depth after the hero pattern fades. */ [data-theme='vault'] .sv-shell::after { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(52vmax 44vmax at -10% 34%, color-mix(in oklab, var(--primary) 15%, transparent), transparent 70%), radial-gradient(48vmax 42vmax at 110% 76%, color-mix(in oklab, var(--sv-glow-2) 16%, transparent), transparent 70%), radial-gradient(60vmax 30vmax at 50% 118%, color-mix(in oklab, var(--primary) 7%, transparent), transparent 70%), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22180%22%20height%3D%22180%22%3E%3Cfilter%20id%3D%22n%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.9%22%20numOctaves%3D%222%22%20stitchTiles%3D%22stitch%22%2F%3E%3CfeColorMatrix%20values%3D%220%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200%201%20%200%200%200%200.055%200%22%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20filter%3D%22url(%23n)%22%2F%3E%3C%2Fsvg%3E"); background-size: auto, auto, auto, 180px 180px; } [data-theme='vault'] .sv-pattern { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--sv-ink); opacity: 0.08; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M0%20.5H48M.5%200V48%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #000 0, rgb(0 0 0 / 0.85) 520px, rgb(0 0 0 / 0.38) 1300px, rgb(0 0 0 / 0.38) calc(100% - 420px), transparent 100%); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M0%20.5H48M.5%200V48%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to bottom, #000 0, rgb(0 0 0 / 0.85) 520px, rgb(0 0 0 / 0.38) 1300px, rgb(0 0 0 / 0.38) calc(100% - 420px), transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 48px 48px, 100% 100%; mask-size: 48px 48px, 100% 100%; -webkit-mask-position: center top; mask-position: center top; } [data-theme='vault'] .sv-shell::before { content: ''; position: absolute; inset: 0 0 auto 0; height: min(1100px, 100%); z-index: -1; pointer-events: none; background: var(--primary); opacity: 0.22; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22432%22%20height%3D%22432%22%20viewBox%3D%220%200%20432%20432%22%3E%3Cg%20font-family%3D%22ui-monospace%2CMenlo%2Cmonospace%22%20font-size%3D%2210.5%22%20fill%3D%22%23000%22%3E%3Ctext%20x%3D%22246%22%20y%3D%22114%22%3E01%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%2266%22%3E0x1F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22258%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%22402%22%3E%5B%20%5D%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22306%22%3E7F%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2266%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%2218%22%3E%2F%2F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22162%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2266%22%3E00%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22402%22%3E%26gt%3B_%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22402%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22258%22%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22306%22%3E10%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22210%22%3E0x00%3C%2Ftext%3E%3Ctext%20x%3D%22102%22%20y%3D%22402%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22162%22%3E%23%3C%2Ftext%3E%3C%2Fg%3E%3Cpath%20d%3D%22M380%20384h8M384%20380v8M380%20192h8M384%20188v8M140%20384h8M144%20380v8M140%2096h8M144%2092v8M380%20240h8M384%20236v8M44%20336h8M48%20332v8M236%20284h8M240%20280v8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(80% 70% at 50% 0%, #000 10%, transparent 95%); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22432%22%20height%3D%22432%22%20viewBox%3D%220%200%20432%20432%22%3E%3Cg%20font-family%3D%22ui-monospace%2CMenlo%2Cmonospace%22%20font-size%3D%2210.5%22%20fill%3D%22%23000%22%3E%3Ctext%20x%3D%22246%22%20y%3D%22114%22%3E01%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%2266%22%3E0x1F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22258%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%22402%22%3E%5B%20%5D%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22306%22%3E7F%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2266%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%2218%22%3E%2F%2F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22162%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2266%22%3E00%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22402%22%3E%26gt%3B_%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22402%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22258%22%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22306%22%3E10%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22210%22%3E0x00%3C%2Ftext%3E%3Ctext%20x%3D%22102%22%20y%3D%22402%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22162%22%3E%23%3C%2Ftext%3E%3C%2Fg%3E%3Cpath%20d%3D%22M380%20384h8M384%20380v8M380%20192h8M384%20188v8M140%20384h8M144%20380v8M140%2096h8M144%2092v8M380%20240h8M384%20236v8M44%20336h8M48%20332v8M236%20284h8M240%20280v8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"), radial-gradient(80% 70% at 50% 0%, #000 10%, transparent 95%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 432px 432px, 100% 100%; mask-size: 432px 432px, 100% 100%; -webkit-mask-position: center top; mask-position: calc(50% + 24px) top, 0 0; } /* Mobile-only disclosure (guide cards). The toggle exists below 1024px only and the body always shows on desktop, so SSR never shifts the desktop layout. */ [data-theme='vault'] .sv-collapse-toggle { display: none; } @media (max-width: 1023px) { [data-theme='vault'] .sv-collapse-toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; min-height: 40px; margin-left: auto; padding: 0 10px 0 12px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-well); white-space: nowrap; cursor: pointer; font-family: var(--sv-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-2); transition: border-color .15s, color .15s, background-color .15s; } [data-theme='vault'] .sv-collapse-toggle::after { content: ''; position: absolute; inset: -2px; } [data-theme='vault'] .sv-collapse-toggle:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-collapse-toggle[aria-expanded='true'] { border-color: var(--sv-primary-line); background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-collapse-toggle svg { width: 15px; height: 15px; transition: transform .2s; } [data-theme='vault'] .sv-collapse-toggle[aria-expanded='true'] svg { transform: rotate(180deg); } [data-theme='vault'] .sv-collapse-body:not([data-open]) { display: none; } } @media (max-width: 640px) { [data-theme='vault'] .sv-pattern { opacity: 0.065; } [data-theme='vault'] .sv-shell::before { opacity: 0.16; } [data-theme='vault'] .sv-step-head { padding: 12px 16px; min-height: 54px; } [data-theme='vault'] .sv-step-body { padding: 16px; } [data-theme='vault'] .sv-input { font-size: 16px; } /* Section head: kicker / [title · link] / sub. The link stays on the title row. */ [data-theme='vault'] .sv-section-head { margin-bottom: 16px; } [data-theme='vault'] .sv-section-head:has(.sv-section-link) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; } [data-theme='vault'] .sv-section-head:has(.sv-section-link) > :first-child { display: contents; } [data-theme='vault'] .sv-section-head:has(.sv-section-link) .sv-section-kicker { grid-column: 1 / -1; justify-self: start; } [data-theme='vault'] .sv-section-head:has(.sv-section-link) .sv-section-title { grid-column: 1; grid-row: 2; } [data-theme='vault'] .sv-section-head:has(.sv-section-link) > :is(.sv-section-aside, .sv-section-link) { grid-column: 2; grid-row: 2; justify-self: end; } [data-theme='vault'] .sv-section-head:has(.sv-section-link) .sv-section-sub { grid-column: 1 / -1; } [data-theme='vault'] .sv-section-link { padding: 0 10px; } } @media (prefers-reduced-motion: reduce) { [data-theme='vault'] *, [data-theme='vault'] *::before, [data-theme='vault'] *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* shadcn/sonner toasts live outside the theme root: keep them dark and readable. */ :root:has([data-theme='vault']) [data-sonner-toaster][data-sonner-theme] { --normal-bg: var(--sv-surface-2); --normal-border: var(--sv-line-strong); --normal-text: var(--sv-ink); --success-bg: color-mix(in oklab, oklch(0.82 0.17 150) 14%, oklch(0.2 0.009 260)); --success-border: color-mix(in oklab, oklch(0.82 0.17 150) 40%, transparent); --success-text: oklch(0.86 0.15 150); --error-bg: color-mix(in oklab, oklch(0.73 0.17 25) 16%, oklch(0.2 0.009 260)); --error-border: color-mix(in oklab, oklch(0.73 0.17 25) 45%, transparent); --error-text: oklch(0.85 0.1 25); --warning-bg: color-mix(in oklab, oklch(0.84 0.14 82) 12%, oklch(0.2 0.009 260)); --warning-border: color-mix(in oklab, oklch(0.84 0.14 82) 40%, transparent); --warning-text: oklch(0.88 0.12 85); --info-bg: color-mix(in oklab, oklch(0.8 0.1 240) 12%, oklch(0.2 0.009 260)); --info-border: color-mix(in oklab, oklch(0.8 0.1 240) 40%, transparent); --info-text: oklch(0.86 0.08 240); --border-radius: 10px; } :root:has([data-theme='vault']) [data-sonner-toast] { font-family: var(--font-geist-sans), system-ui, sans-serif; box-shadow: 0 20px 40px -20px rgb(0 0 0 / 0.9); } /* One hover language for every card-like control: primary hairline + soft glow (set per component) and ⌜ ⌟ brackets fading in. Selected items keep full brackets; hover on an unselected item shows them at 55% so selection stays readable. */ [data-theme='vault'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game, .sv-flash-card, a.sv-trend-card, a.sv-voucher-card)::after { content: ''; position: absolute; inset: -5px; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game):hover:not(:disabled):not([aria-pressed='true'])::after { opacity: 0.55; } [data-theme='vault'] :is(.sv-flash-card, a.sv-trend-card, a.sv-voucher-card):hover::after { opacity: 1; } [data-theme='vault'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game)[aria-pressed='true']::after { opacity: 1; } @media (prefers-reduced-motion: reduce) { [data-theme='vault'] :is(.sv-detail .sv-product, .sv-detail .sv-pay, .sv-joki-option, .sv-joki-pay, .sv-pricelist-game, .sv-flash-card, a.sv-trend-card, a.sv-voucher-card)::after { transition: none; } } /* ───────────── Landing layout ───────────── */ [data-theme='vault'] .sv-landing { --sv-section-gap: clamp(36px, 5.4vw, 68px); padding-bottom: var(--sv-section-gap); } [data-theme='vault'] .sv-landing-slot { margin-top: var(--sv-section-gap); } [data-theme='vault'] .sv-landing-slot:empty { display: none; } [data-theme='vault'] .sv-landing-slot > * { margin-top: 0; } [data-theme='vault'] .sv-landing .sv-container .sv-container { max-width: none; padding-inline: 0; } [data-theme='vault'] .sv-section-head-text { min-width: 0; } [data-theme='vault'] .sv-section-aside { flex-shrink: 0; } [data-theme='vault'] .sv-hero + .sv-section { margin-top: clamp(32px, 4vw, 48px); } /* Shared horizontal rail */ [data-theme='vault'] .sv-rail { position: relative; display: flow-root; --sv-rail-gap: 12px; --sv-rail-cols: 4; --sv-rail-bleed: 0px; } [data-theme='vault'] .sv-rail-track { display: grid; grid-auto-flow: column; gap: var(--sv-rail-gap); grid-auto-columns: calc((100% - (var(--sv-rail-cols) - 1) * var(--sv-rail-gap)) / var(--sv-rail-cols)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: -8px calc(var(--sv-rail-bleed) * -1) -12px; padding: 8px var(--sv-rail-bleed) 12px; scroll-padding-inline: var(--sv-rail-bleed); } [data-theme='vault'] .sv-rail-track::-webkit-scrollbar { display: none; } [data-theme='vault'] .sv-rail-item { display: flex; min-width: 0; scroll-snap-align: start; } [data-theme='vault'] .sv-rail-item > * { flex: 1; min-width: 0; } [data-theme='vault'] .sv-rail-btn { position: absolute; top: 50%; z-index: 2; display: none; place-items: center; width: 40px; height: 40px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-surface-2); color: var(--sv-ink); box-shadow: var(--sv-shadow-lg); transform: translateY(-50%); cursor: pointer; transition: opacity .2s, border-color .15s, color .15s; } [data-theme='vault'] .sv-rail-btn svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-rail-btn--prev { left: -20px; } [data-theme='vault'] .sv-rail-btn--next { right: -20px; } [data-theme='vault'] .sv-rail-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-rail-btn:disabled { opacity: 0; pointer-events: none; } @media (hover: hover) and (min-width: 1024px) { [data-theme='vault'] .sv-rail[data-overflow] .sv-rail-btn { display: grid; } } @media (max-width: 1023px) { [data-theme='vault'] .sv-rail { --sv-rail-bleed: var(--sv-gutter); --sv-rail-gap: 10px; } } /* Shared skeleton/empty bits */ [data-theme='vault'] .sv-skeleton-line { display: block; height: 10px; width: 72%; margin: 12px 6px 8px; } [data-theme='vault'] .sv-skeleton-line--short { width: 44%; margin-top: 0; } [data-theme='vault'] .sv-empty { padding: 32px 24px; text-align: center; } [data-theme='vault'] .sv-empty-title { font-size: 16px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-empty-text { margin-top: 4px; font-size: 15px; color: var(--sv-ink-2); } /* ───────────── Banner ───────────── */ [data-theme='vault'] .sv-hero { padding-top: clamp(16px, 2.4vw, 28px); } [data-theme='vault'] .sv-hero-frame { position: relative; isolation: isolate; aspect-ratio: 3 / 1; border-radius: var(--sv-radius-lg); overflow: hidden; background: var(--sv-surface); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-hero-frame.sv-skeleton { border-color: var(--sv-line); } /* Viewfinder corners + inner hairline */ [data-theme='vault'] .sv-hero-frame::after { content: ''; position: absolute; inset: 10px; z-index: 2; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0.75) 0 0) left top / 14px 1.5px no-repeat, linear-gradient(rgb(255 255 255 / 0.75) 0 0) left top / 1.5px 14px no-repeat, linear-gradient(rgb(255 255 255 / 0.75) 0 0) right bottom / 14px 1.5px no-repeat, linear-gradient(rgb(255 255 255 / 0.75) 0 0) right bottom / 1.5px 14px no-repeat; } [data-theme='vault'] .sv-hero-frame::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgb(5 7 10 / 0.35), transparent 40%); } [data-theme='vault'] .sv-hero-viewport { height: 100%; overflow: hidden; } [data-theme='vault'] .sv-hero-track { display: flex; height: 100%; touch-action: pan-y pinch-zoom; } [data-theme='vault'] .sv-hero-slide { position: relative; flex: 0 0 100%; min-width: 0; height: 100%; } [data-theme='vault'] .sv-hero-link { position: absolute; inset: 0; display: block; } [data-theme='vault'] .sv-hero-link:focus-visible { outline-offset: -4px; } [data-theme='vault'] .sv-hero-img { object-fit: cover; } [data-theme='vault'] .sv-hero-arrow { position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-radius-sm); border: 1px solid rgb(255 255 255 / 0.25); background: rgb(8 10 14 / 0.6); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); cursor: pointer; opacity: 0; transform: translateY(-50%); transition: opacity .2s, border-color .15s; } [data-theme='vault'] .sv-hero-arrow svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-hero-arrow:hover { border-color: var(--primary); } [data-theme='vault'] .sv-hero-arrow--prev { left: 18px; } [data-theme='vault'] .sv-hero-arrow--next { right: 18px; } [data-theme='vault'] .sv-hero-arrow:focus-visible { opacity: 1; } @media (hover: hover) { [data-theme='vault'] .sv-hero-frame:hover .sv-hero-arrow { opacity: 1; } } /* Indicators: segmented bars */ [data-theme='vault'] .sv-hero-dots { display: flex; justify-content: center; gap: 4px; margin-top: 0; margin-bottom: -10px; } [data-theme='vault'] .sv-hero-dot { display: grid; place-items: center; width: 28px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } [data-theme='vault'] .sv-hero-dot::before { content: ''; width: 100%; height: 2px; background: var(--sv-line-strong); transition: background-color .25s, box-shadow .25s; } [data-theme='vault'] .sv-hero-dot:hover::before { background: var(--sv-ink-3); } [data-theme='vault'] .sv-hero-dot[aria-current='true']::before { background: var(--primary); box-shadow: 0 0 10px color-mix(in oklab, var(--primary) 70%, transparent); } @media (max-width: 767px) { [data-theme='vault'] .sv-hero-arrow { display: none; } [data-theme='vault'] .sv-hero-frame::after { inset: 7px; background: linear-gradient(rgb(255 255 255 / 0.7) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(rgb(255 255 255 / 0.7) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(rgb(255 255 255 / 0.7) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(rgb(255 255 255 / 0.7) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] .sv-hero-dots { margin-top: -4px; } } /* ───────────── Flash sale ───────────── */ [data-theme='vault'] .sv-flash-panel { position: relative; isolation: isolate; padding: 22px 22px 24px; border-radius: var(--sv-radius-lg); overflow: hidden; background: radial-gradient(60% 120px at 50% 0%, color-mix(in oklab, var(--sv-hot) 9%, transparent), transparent), var(--sv-surface); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-flash-panel::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--sv-hot), transparent); } [data-theme='vault'] .sv-flash .sv-section-head { flex-wrap: wrap; align-items: flex-end; row-gap: 14px; } [data-theme='vault'] .sv-flash .sv-section-kicker { height: 24px; margin-bottom: 10px; padding: 0 8px; border-radius: var(--sv-radius-xs); background: var(--sv-hot); color: var(--sv-hot-ink); font-weight: 600; } [data-theme='vault'] .sv-flash .sv-section-kicker::before { content: none; } [data-theme='vault'] .sv-flash .sv-section-kicker svg { fill: currentColor; } [data-theme='vault'] .sv-countdown { display: flex; align-items: center; gap: 10px; } [data-theme='vault'] .sv-countdown-label { font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-countdown-clock { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sv-mono); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-countdown-unit { display: grid; place-items: center; min-width: 40px; height: 38px; padding: 0 6px; border-radius: var(--sv-radius-xs); background: var(--sv-well); border: 1px solid color-mix(in oklab, var(--sv-hot) 40%, var(--sv-line)); color: var(--sv-hot); font-size: 17px; font-weight: 500; } [data-theme='vault'] .sv-countdown-sep { font-size: 16px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-rail--flash { --sv-rail-cols: 5; --sv-rail-gap: 12px; } [data-theme='vault'] .sv-flash-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px; border-radius: var(--sv-radius); background: var(--sv-surface-2); border: 1px solid var(--sv-line); color: var(--sv-ink); transition: border-color .18s, background-color .18s, box-shadow .18s; } [data-theme='vault'] .sv-flash-card:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-3); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-flash-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 12px; } [data-theme='vault'] .sv-flash-card-icon { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); color: var(--sv-ink-3); } [data-theme='vault'] .sv-flash-card-icon img { width: 30px; height: 30px; object-fit: contain; } [data-theme='vault'] .sv-flash-card-icon svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-flash-card-off { height: 22px; padding: 0 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-flash-card-name { font-size: 14.5px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='vault'] .sv-flash-card-game { margin-top: 3px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-flash-card-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-top: auto; padding-top: 14px; font-family: var(--sv-mono); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-flash-card-price strong { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--sv-ink); } [data-theme='vault'] .sv-flash-card-price s { font-size: 12px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-flash-card-stock { padding-top: 12px; } [data-theme='vault'] .sv-meter { height: 4px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--sv-line) 0 6px, transparent 6px 8px); } [data-theme='vault'] .sv-meter-fill { display: block; height: 100%; background: var(--sv-primary-ink); -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask-image: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); } [data-theme='vault'] .sv-flash-card[data-state='hot'] .sv-meter-fill { background: var(--sv-hot); } [data-theme='vault'] .sv-flash-card-stock-row { display: flex; justify-content: space-between; gap: 6px; margin-top: 7px; font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-flash-card-hot { display: inline-flex; align-items: center; gap: 3px; color: var(--sv-hot); white-space: nowrap; } [data-theme='vault'] .sv-flash-card-hot svg { width: 12px; height: 12px; fill: currentColor; } [data-theme='vault'] .sv-flash-card-stock-row > span:first-child { white-space: nowrap; } [data-theme='vault'] .sv-flash-card { container-type: inline-size; } @container (max-width: 172px) { [data-theme='vault'] .sv-flash-card-hot-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } [data-theme='vault'] .sv-flash-card-available { font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ok); } [data-theme='vault'] .sv-flash-card-soldout { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--sv-radius-xs); font-family: var(--sv-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; background: transparent; color: var(--sv-ink-2); border: 1px dashed var(--sv-line-strong); } [data-theme='vault'] .sv-flash-card[data-state='soldout'] { background: var(--sv-surface); } [data-theme='vault'] .sv-flash-card[data-state='soldout'] :is(.sv-flash-card-icon img, .sv-flash-card-price) { filter: grayscale(1); opacity: .55; } @media (max-width: 1023px) { [data-theme='vault'] .sv-rail--flash { --sv-rail-cols: 3.2; --sv-rail-bleed: 22px; } } @media (max-width: 767px) { [data-theme='vault'] .sv-flash-panel { padding: 18px 16px 20px; } [data-theme='vault'] .sv-rail--flash { --sv-rail-cols: 2.25; --sv-rail-bleed: 16px; --sv-rail-gap: 8px; } [data-theme='vault'] .sv-flash .sv-section-head { margin-bottom: 16px; } [data-theme='vault'] .sv-flash .sv-section-aside { width: 100%; } [data-theme='vault'] .sv-countdown { justify-content: space-between; padding: 8px 8px 8px 12px; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-countdown-unit { min-width: 34px; height: 32px; font-size: 15px; } [data-theme='vault'] .sv-flash-card { padding: 12px; } [data-theme='vault'] .sv-flash-card-icon { width: 40px; height: 40px; } [data-theme='vault'] .sv-flash-card-icon img { width: 26px; height: 26px; } [data-theme='vault'] .sv-flash-card-price strong { font-size: 15.5px; } } @media (max-width: 479px) { [data-theme='vault'] .sv-rail--flash { --sv-rail-cols: 1.7; } } /* ───────────── Trending ───────────── */ [data-theme='vault'] .sv-rail--trending { --sv-rail-cols: 3; --sv-rail-gap: 12px; } [data-theme='vault'] .sv-trend-card { position: relative; display: flex; align-items: center; gap: 14px; height: 100%; min-height: 88px; padding: 14px 16px 14px 14px; border-radius: var(--sv-radius); background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-ink); transition: border-color .18s, background-color .18s, box-shadow .18s; } [data-theme='vault'] a.sv-trend-card:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-2); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-trend-card[data-rank='1'] { border-color: var(--sv-primary-line); background: linear-gradient(100deg, var(--sv-surface) 40%, var(--sv-primary-soft)); } [data-theme='vault'] .sv-trend-thumb { position: relative; display: block; width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-surface-2); box-shadow: 0 0 0 1px var(--sv-line-strong); } [data-theme='vault'] .sv-trend-thumb img { object-fit: cover; } [data-theme='vault'] .sv-trend-body { position: relative; z-index: 1; display: grid; gap: 5px; flex: 1; min-width: 0; } [data-theme='vault'] .sv-trend-name { font-size: 15px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-trend-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-trend-meta > svg { width: 13px; height: 13px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-trend-badge { height: 20px; margin-left: 2px; padding: 0 6px; font-size: 11px; } [data-theme='vault'] .sv-trend-rank { flex-shrink: 0; margin-left: auto; padding-left: 4px; font-family: var(--sv-mono); font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--sv-line-strong); } [data-theme='vault'] .sv-trend-card[data-rank='1'] .sv-trend-rank { color: var(--sv-primary-ink); text-shadow: 0 0 18px color-mix(in oklab, var(--primary) 50%, transparent); } [data-theme='vault'] .sv-trend-skeletons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } [data-theme='vault'] .sv-trend-card--skeleton .sv-skeleton-line { margin: 0; } [data-theme='vault'] .sv-rail--trending .sv-rail-track { overflow: visible; } @media (min-width: 768px) { /* Tablet & Desktop: a tidy grid (3 per row) instead of a scroller. */ [data-theme='vault'] .sv-rail--trending .sv-rail-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; } } @media (max-width: 767px) { /* Mobile: 2-column grid instead of scrolling horizontally. */ [data-theme='vault'] .sv-rail--trending { --sv-rail-gap: 10px; } [data-theme='vault'] .sv-rail--trending .sv-rail-track { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; margin: 0; padding: 0; gap: var(--sv-rail-gap); } [data-theme='vault'] .sv-rail--trending .sv-rail-btn { display: none !important; } [data-theme='vault'] .sv-trend-skeletons { display: grid; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; gap: var(--sv-rail-gap); } [data-theme='vault'] .sv-trend-card { min-height: 68px; padding: 8px 10px 8px 8px; gap: 10px; border-radius: var(--sv-radius-sm); } [data-theme='vault'] .sv-trend-thumb { width: 44px; height: 44px; border-radius: 8px; } [data-theme='vault'] .sv-trend-body { gap: 2px; } [data-theme='vault'] .sv-trend-name { font-size: 13px; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='vault'] .sv-trend-badge { height: 17px; padding: 0 5px; font-size: 10px; margin-left: 0; } [data-theme='vault'] .sv-trend-rank { font-size: 20px; padding-left: 2px; } } @media (max-width: 379px) { [data-theme='vault'] .sv-rail--trending { --sv-rail-gap: 8px; } [data-theme='vault'] .sv-trend-card { min-height: 64px; padding: 6px 8px 6px 6px; gap: 8px; } [data-theme='vault'] .sv-trend-thumb { width: 38px; height: 38px; } [data-theme='vault'] .sv-trend-name { font-size: 12px; } [data-theme='vault'] .sv-trend-rank { font-size: 17px; } } /* ───────────── Voucher ───────────── */ [data-theme='vault'] .sv-rail--vouchers { --sv-rail-cols: 6; --sv-rail-gap: 12px; } [data-theme='vault'] .sv-voucher-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 6px; border-radius: var(--sv-radius); background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-ink); transition: border-color .18s, background-color .18s, box-shadow .18s; } [data-theme='vault'] a.sv-voucher-card:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-2); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-voucher-media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-surface-2); } [data-theme='vault'] .sv-voucher-media img { object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .2, 1); } [data-theme='vault'] .sv-voucher-card:hover .sv-voucher-media img { transform: scale(1.04); } /* Ticket stub: dashed tear line with square notches */ [data-theme='vault'] .sv-voucher-name { position: relative; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: visible; margin-top: 8px; padding: 10px 4px 2px; border-top: 1px dashed var(--sv-line-strong); font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; min-height: calc(2 * 1.3em + 12px); } [data-theme='vault'] .sv-voucher-name::before, [data-theme='vault'] .sv-voucher-name::after { content: ''; position: absolute; top: -6px; width: 10px; height: 10px; background: var(--sv-bg); border: 1px solid var(--sv-line); transform: rotate(45deg); } [data-theme='vault'] .sv-voucher-name::before { left: -13px; } [data-theme='vault'] .sv-voucher-name::after { right: -13px; } [data-theme='vault'] .sv-voucher-skeletons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1023px) { [data-theme='vault'] .sv-rail--vouchers { --sv-rail-cols: 4.3; } [data-theme='vault'] .sv-voucher-skeletons { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 23%; overflow: hidden; } } @media (max-width: 639px) { [data-theme='vault'] .sv-rail--vouchers { --sv-rail-cols: 2.4; --sv-rail-gap: 8px; } [data-theme='vault'] .sv-voucher-skeletons { grid-auto-columns: 40%; } } /* ───────────── Semua Game ───────────── */ [data-theme='vault'] .sv-game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-game-grid > li { display: flex; min-width: 0; } [data-theme='vault'] .sv-game-card { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 5px; border-radius: var(--sv-radius); background: var(--sv-surface); border: 1px solid var(--sv-line); color: var(--sv-ink); transition: border-color .2s, background-color .2s, box-shadow .2s; } [data-theme='vault'] a.sv-game-card::after { content: ''; position: absolute; inset: -5px; pointer-events: none; opacity: 0; transition: opacity .2s; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] a.sv-game-card:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-2); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] a.sv-game-card:hover::after { opacity: 1; } [data-theme='vault'] .sv-game-media { position: relative; display: block; aspect-ratio: 1; border-radius: calc(var(--sv-radius) - 4px); overflow: hidden; background: var(--sv-surface-2); } [data-theme='vault'] .sv-game-media img { object-fit: cover; transition: transform .45s cubic-bezier(.2, .7, .2, 1); } [data-theme='vault'] a.sv-game-card:hover .sv-game-media img { transform: scale(1.05); } [data-theme='vault'] .sv-game-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; padding: 9px 5px 5px; font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; transition: color .15s; } [data-theme='vault'] a.sv-game-card:hover .sv-game-name { color: var(--sv-primary-ink); } @media (min-width: 340px) { [data-theme='vault'] .sv-game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } } @media (min-width: 560px) { [data-theme='vault'] .sv-game-grid { gap: 12px; } } @media (min-width: 840px) { [data-theme='vault'] .sv-game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } @media (min-width: 1120px) { [data-theme='vault'] .sv-game-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } @media (max-width: 559px) { [data-theme='vault'] .sv-game-card { padding: 3px; } [data-theme='vault'] .sv-game-name { padding: 7px 3px 3px; font-size: 13px; line-height: 1.28; letter-spacing: -0.005em; overflow-wrap: anywhere; } } /* ───────────── Footer ───────────── */ [data-theme='vault'] .sv-footer { position: relative; background: radial-gradient(70% 220px at 50% 0%, color-mix(in oklab, var(--primary) 8%, transparent), transparent 75%), var(--sv-well); border-top: 1px solid var(--sv-line); color: var(--sv-ink); } [data-theme='vault'] .sv-footer::before { content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--primary) 70%, transparent), transparent); } [data-theme='vault'] .sv-footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; padding-block: 52px 40px; } [data-theme='vault'] .sv-footer-logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--sv-ink); } [data-theme='vault'] .sv-footer-logo img { width: 40px; height: 40px; border-radius: var(--sv-radius-sm); } [data-theme='vault'] .sv-footer-desc { max-width: 40ch; margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--sv-ink-2); } [data-theme='vault'] .sv-footer-social { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-footer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-surface); transition: border-color .15s; } [data-theme='vault'] .sv-footer-social a:hover { border-color: var(--primary); } [data-theme='vault'] .sv-footer-social img { width: 20px; height: 20px; object-fit: contain; } [data-theme='vault'] .sv-footer-title { margin-bottom: 12px; font-family: var(--sv-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-footer-col ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-footer-col a { display: inline-flex; align-items: center; min-height: 34px; font-size: 15px; color: var(--sv-ink-2); transition: color .15s; } [data-theme='vault'] .sv-footer-col a:hover { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-footer-col .sv-footer-pay-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } [data-theme='vault'] .sv-footer-pay-item { display: grid; place-items: center; height: 38px; padding: 6px 8px; border-radius: var(--sv-radius-sm); background: var(--sv-plate); } [data-theme='vault'] .sv-footer-pay-item img { width: auto; height: auto; max-width: 100%; max-height: 20px; object-fit: contain; } [data-theme='vault'] .sv-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 20px 28px; border-top: 1px solid var(--sv-line); font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--sv-ink-3); } @media (max-width: 1023px) { [data-theme='vault'] .sv-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; padding-block: 40px 32px; } [data-theme='vault'] .sv-footer-brand, [data-theme='vault'] .sv-footer-pay { grid-column: 1 / -1; } [data-theme='vault'] .sv-footer-col a { min-height: 40px; } } @media (max-width: 479px) { [data-theme='vault'] .sv-footer-col .sv-footer-pay-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme='vault'] .sv-footer-bottom { padding-bottom: 56px; } } /* ───────── Header shell (mobile first) ───────── */ [data-theme='vault'] .sv-nav { position: sticky; top: 0; z-index: 50; pointer-events: none; } [data-theme='vault'] .sv-nav > * { pointer-events: auto; } [data-theme='vault'] .sv-nav[data-collapsed] > .sv-nav-sub { pointer-events: none; } [data-theme='vault'] .sv-nav-bar { position: relative; z-index: 2; background: var(--sv-well); box-shadow: 0 1px 0 var(--sv-line); transition: box-shadow .25s ease; } [data-theme='vault'] .sv-nav[data-scrolled] .sv-nav-bar { box-shadow: 0 1px 0 var(--sv-line), 0 18px 32px -24px rgb(0 0 0 / 0.95); } [data-theme='vault'] .sv-nav-bar-inner { display: flex; align-items: center; gap: 10px; height: 56px; } /* Identity */ [data-theme='vault'] .sv-nav-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 44px; min-height: 44px; color: var(--sv-ink); } [data-theme='vault'] .sv-nav-logo { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--sv-radius-sm); object-fit: cover; } [data-theme='vault'] .sv-nav-logo--initial { display: grid; place-items: center; background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-mono); font-size: 15px; font-weight: 600; } [data-theme='vault'] .sv-nav-name { display: none; min-width: 0; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Search pill (small screens): opens the search sheet */ [data-theme='vault'] .sv-nav-pill { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink-3); cursor: pointer; text-align: left; transition: border-color .15s, background-color .15s; } [data-theme='vault'] .sv-nav-pill:hover { border-color: var(--sv-line-strong); } [data-theme='vault'] .sv-nav-pill:active { background: var(--sv-surface-2); } [data-theme='vault'] .sv-nav-pill svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='vault'] .sv-nav-pill-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-nav-pill-text--long { display: none; } /* Account (small screens): "Masuk" icon button or initial avatar, 44px targets */ [data-theme='vault'] .sv-nav-me { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: transparent; color: var(--sv-ink); font-size: 14px; font-weight: 600; transition: border-color .15s, color .15s, background-color .15s; } [data-theme='vault'] .sv-nav-me::before { content: ''; position: absolute; inset: -3px; } [data-theme='vault'] .sv-nav-me:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-me[aria-current='page'] { border-color: var(--primary); background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-me svg { width: 19px; height: 19px; flex-shrink: 0; } [data-theme='vault'] .sv-nav-me-text { display: none; } [data-theme='vault'] .sv-nav-me--avatar { border: 0; background: none; } [data-theme='vault'] .sv-nav-me--avatar .sv-nav-avatar { width: 34px; height: 34px; font-size: 14px; box-shadow: 0 0 0 1px var(--sv-primary-line); } [data-theme='vault'] .sv-nav-me--avatar[aria-current='page'] { background: none; } [data-theme='vault'] .sv-nav-me--avatar[aria-current='page'] .sv-nav-avatar { box-shadow: 0 0 0 2px var(--primary), 0 0 14px -2px color-mix(in oklab, var(--primary) 60%, transparent); } [data-theme='vault'] .sv-nav-me--loading { border: 0; } [data-theme='vault'] .sv-nav-avatar { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--sv-radius-sm); background: var(--sv-primary-tint); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 13px; font-weight: 600; } /* Desktop-only parts stay hidden on small screens */ [data-theme='vault'] .sv-nav-search, [data-theme='vault'] .sv-nav-utils, [data-theme='vault'] .sv-nav-sub { display: none; } /* Buttons (desktop account, Lainnya sheet) */ [data-theme='vault'] .sv-nav-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 15px; border-radius: var(--sv-radius-sm); border: 1px solid transparent; white-space: nowrap; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, box-shadow .2s; } [data-theme='vault'] .sv-nav-btn--ghost { background: transparent; border-color: var(--sv-line-strong); color: var(--sv-ink); } [data-theme='vault'] .sv-nav-btn--ghost:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-btn--ghost[aria-current='page'] { border-color: var(--primary); background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-btn--primary { background: var(--primary); color: var(--sv-on-primary); box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 60%, white) inset; } [data-theme='vault'] .sv-nav-btn--primary:hover, [data-theme='vault'] .sv-nav-btn--primary[aria-current='page'] { box-shadow: 0 0 0 1px color-mix(in oklab, var(--primary) 60%, white) inset, 0 0 24px -6px color-mix(in oklab, var(--primary) 70%, transparent); } /* Generic icon button used by other areas */ [data-theme='vault'] .sv-icon-btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='vault'] .sv-icon-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-icon-btn svg { width: 18px; height: 18px; } /* Phones from 390px: the store name fits next to the mark */ @media (min-width: 390px) { [data-theme='vault'] .sv-nav-name { display: block; max-width: 30vw; } } /* Tablets: wider pill with the long hint, "Masuk" gets its label */ @media (min-width: 640px) { [data-theme='vault'] .sv-nav-bar-inner { gap: 16px; } [data-theme='vault'] .sv-nav-name { max-width: 220px; font-size: 15.5px; } [data-theme='vault'] .sv-nav-pill { height: 42px; margin-inline: 8px; padding: 0 14px; } [data-theme='vault'] .sv-nav-pill-text--short { display: none; } [data-theme='vault'] .sv-nav-pill-text--long { display: block; } [data-theme='vault'] .sv-nav-me:not(.sv-nav-me--avatar):not(.sv-nav-me--loading) { width: auto; padding: 0 14px 0 11px; } [data-theme='vault'] .sv-nav-me-text { display: inline; } } /* Search field (desktop row 1) */ [data-theme='vault'] .sv-nav-search { position: relative; flex: 1; min-width: 0; max-width: 640px; } [data-theme='vault'] .sv-nav-search-icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='vault'] .sv-nav-search-input { width: 100%; height: 40px; padding: 0 46px 0 40px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-ink); font-size: 14.5px; transition: border-color .15s, box-shadow .15s, background-color .15s; } [data-theme='vault'] .sv-nav-search-input::placeholder { color: var(--sv-ink-3); } [data-theme='vault'] .sv-nav-search-input:hover { border-color: var(--sv-line-strong); } [data-theme='vault'] .sv-nav-search-input:is(:focus, :focus-visible) { outline: none; background: var(--sv-bg); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); } [data-theme='vault'] .sv-nav-search-kbd { position: absolute; right: 9px; top: 50%; translate: 0 -50%; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-well); font-family: var(--sv-mono); font-size: 12px; font-weight: 500; line-height: 1; color: var(--sv-ink-2); pointer-events: none; transition: opacity .15s; } [data-theme='vault'] .sv-nav-search:focus-within .sv-nav-search-kbd { opacity: 0; } [data-theme='vault'] .sv-nav-search-clear { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--sv-radius-sm); background: none; color: var(--sv-ink-3); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='vault'] .sv-nav-search-clear:hover { background: var(--sv-surface-2); color: var(--sv-ink); } [data-theme='vault'] .sv-nav-search-clear svg { width: 16px; height: 16px; } [data-theme='vault'] .sv-nav-search-pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; width: min(100%, 560px); max-height: min(460px, 70vh); overflow: auto; padding: 6px; background: var(--sv-surface); border: 1px solid var(--sv-line-strong); border-top: 2px solid var(--primary); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg); } /* Suggestions (desktop dropdown + mobile sheet) */ [data-theme='vault'] .sv-suggest-label { padding: 8px 10px 6px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-suggest-state { display: flex; align-items: center; gap: 8px; padding: 14px 12px; font-size: 14px; line-height: 1.45; color: var(--sv-ink-2); } [data-theme='vault'] .sv-suggest-state svg { width: 16px; height: 16px; flex-shrink: 0; } [data-theme='vault'] .sv-suggest-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-suggest-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: var(--sv-radius-sm); font-size: 14.5px; font-weight: 500; color: var(--sv-ink); transition: background-color .12s; } [data-theme='vault'] .sv-suggest-item:hover, [data-theme='vault'] .sv-suggest-option[aria-selected='true'] .sv-suggest-item { background: var(--sv-primary-soft); } [data-theme='vault'] .sv-suggest-thumb { position: relative; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-surface-2); box-shadow: 0 0 0 1px var(--sv-line); } [data-theme='vault'] .sv-suggest-thumb img { object-fit: cover; } [data-theme='vault'] .sv-suggest-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-suggest-enter { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-primary-ink); opacity: 0; transition: opacity .12s; } [data-theme='vault'] .sv-suggest-option[aria-selected='true'] .sv-suggest-enter { opacity: 1; } [data-theme='vault'] .sv-suggest-all { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 4px; padding: 0 12px; border: 0; border-top: 1px solid var(--sv-line); border-radius: 0; background: none; cursor: pointer; text-align: left; font-size: 14px; color: var(--sv-ink-2); transition: color .15s; } [data-theme='vault'] .sv-suggest-state + .sv-suggest-all { margin-top: 0; } [data-theme='vault'] .sv-suggest-all > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-suggest-all strong { font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-suggest-all svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink-3); } [data-theme='vault'] .sv-suggest-all:hover, [data-theme='vault'] .sv-suggest-all:hover .sv-suggest-all-go { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-spin { animation: sv-nav-spin .9s linear infinite; } @keyframes sv-nav-spin { to { transform: rotate(360deg); } } /* ───────── Desktop (≥1024px): two rows ───────── */ @media (min-width: 1024px) { [data-theme='vault'] .sv-nav-bar-inner { gap: 28px; height: 64px; } [data-theme='vault'] .sv-nav-brand { max-width: 260px; } [data-theme='vault'] .sv-nav-logo { width: 34px; height: 34px; } [data-theme='vault'] .sv-nav-name { display: block; max-width: none; font-size: 15.5px; } [data-theme='vault'] .sv-nav-pill, [data-theme='vault'] .sv-nav-me { display: none; } [data-theme='vault'] .sv-nav-search { display: block; } [data-theme='vault'] .sv-nav-utils { display: flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: auto; } [data-theme='vault'] .sv-nav-sub { display: block; } /* The lift shadow belongs to whichever row is the bottom edge. */ [data-theme='vault'] .sv-nav[data-scrolled] .sv-nav-bar { box-shadow: 0 1px 0 var(--sv-line); } [data-theme='vault'] .sv-nav[data-scrolled][data-collapsed] .sv-nav-bar { box-shadow: 0 1px 0 var(--sv-line), 0 18px 32px -24px rgb(0 0 0 / 0.95); } } /* Row 1 utilities: Cek Transaksi · divider · account */ [data-theme='vault'] .sv-nav-util { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: var(--sv-radius-sm); white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--sv-ink-2); transition: background-color .15s, color .15s; } [data-theme='vault'] .sv-nav-util svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--sv-ink-3); transition: color .15s; } [data-theme='vault'] .sv-nav-util:hover { background: var(--sv-surface); color: var(--sv-ink); } [data-theme='vault'] .sv-nav-util:hover svg { color: var(--sv-ink-2); } [data-theme='vault'] .sv-nav-util[aria-current='page'] { background: linear-gradient(var(--primary) 0 0) left top / 8px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 8px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 8px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 8px no-repeat; background-color: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-util[aria-current='page'] svg { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-nav-divider { width: 1px; height: 24px; margin: 0 10px 0 6px; background: var(--sv-line-strong); } [data-theme='vault'] .sv-nav-auth { display: flex; align-items: center; gap: 8px; } [data-theme='vault'] .sv-nav-auth-loading { display: block; width: 150px; height: 36px; } [data-theme='vault'] .sv-nav-account { display: inline-flex; align-items: center; gap: 10px; max-width: 250px; height: 44px; padding: 0 14px 0 6px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); color: var(--sv-ink); transition: border-color .15s, background-color .15s; } [data-theme='vault'] .sv-nav-account:hover { border-color: var(--primary); } [data-theme='vault'] .sv-nav-account[aria-current='page'] { border-color: var(--primary); background: var(--sv-primary-soft); } [data-theme='vault'] .sv-nav-account-text { display: grid; min-width: 0; line-height: 1.25; } [data-theme='vault'] .sv-nav-account-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; } [data-theme='vault'] .sv-nav-account-balance { white-space: nowrap; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* Row 2: Belanja (left, primary) and Komunitas (right, secondary) */ [data-theme='vault'] .sv-nav-sub { position: relative; z-index: 1; background: var(--sv-well); box-shadow: 0 1px 0 var(--sv-line); transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .22s ease, box-shadow .25s ease; } [data-theme='vault'] .sv-nav[data-collapsed] .sv-nav-sub { transform: translateY(-100%); opacity: 0; } [data-theme='vault'] .sv-nav[data-scrolled] .sv-nav-sub { box-shadow: 0 1px 0 var(--sv-line), 0 18px 32px -24px rgb(0 0 0 / 0.95); } [data-theme='vault'] .sv-nav-sub-inner { display: flex; align-items: stretch; justify-content: space-between; gap: 24px; height: 44px; } [data-theme='vault'] .sv-nav-group { display: flex; align-items: stretch; min-width: 0; } [data-theme='vault'] .sv-nav-group-list { display: flex; align-items: stretch; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-nav-group-item { display: flex; } [data-theme='vault'] .sv-nav-link { position: relative; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .15s; } [data-theme='vault'] .sv-nav-link::after { content: ''; position: absolute; bottom: 0; height: 2px; background: var(--primary); transform: scaleX(0); transition: transform .2s ease; } [data-theme='vault'] .sv-nav-link[aria-current='page']::after { transform: scaleX(1); box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-nav-link:focus-visible { outline-offset: -6px; } /* Belanja: the main navigation; the first label lines up with the logo */ [data-theme='vault'] .sv-nav-group[data-tone='primary'] .sv-nav-group-list { gap: 2px; margin-left: -14px; } [data-theme='vault'] .sv-nav-group[data-tone='primary'] .sv-nav-link { padding: 0 14px; font-size: 14px; font-weight: 500; color: var(--sv-ink-2); } [data-theme='vault'] .sv-nav-group[data-tone='primary'] .sv-nav-link::after { left: 14px; right: 14px; } [data-theme='vault'] .sv-nav-group[data-tone='primary'] .sv-nav-link:hover { color: var(--sv-ink); } [data-theme='vault'] .sv-nav-group[data-tone='primary'] .sv-nav-link[aria-current='page'] { color: var(--sv-ink); font-weight: 600; } /* Komunitas: quieter content links */ [data-theme='vault'] .sv-nav-group[data-tone='secondary'] { gap: 6px; } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-group-list { gap: 2px; margin-right: -10px; } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link { gap: 6px; padding: 0 10px; font-size: 13px; font-weight: 500; color: var(--sv-ink-3); } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-ink-3); transition: color .15s; } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link::after { left: 10px; right: 10px; } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link:hover { color: var(--sv-ink); } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link:hover svg { color: var(--sv-ink-2); } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link[aria-current='page'] { color: var(--sv-ink); } [data-theme='vault'] .sv-nav-group[data-tone='secondary'] .sv-nav-link[aria-current='page'] svg { color: var(--sv-primary-ink); } @media (min-width: 1024px) and (max-width: 1199px) { [data-theme='vault'] .sv-nav-bar-inner { gap: 20px; } [data-theme='vault'] .sv-nav-util { padding: 0 10px; } [data-theme='vault'] .sv-nav-divider { margin: 0 8px 0 4px; } [data-theme='vault'] .sv-nav-group[data-tone='secondary']::before { display: none; } } /* ───────── Mobile search sheet (portalled; the theme scope sits on the sheet) ───────── */ [data-theme='vault'].sv-search-sheet { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--sv-bg); color: var(--sv-ink); animation: sv-sheet-in .2s cubic-bezier(.2, .7, .2, 1); } @keyframes sv-sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } [data-theme='vault'] .sv-search-sheet-bar { display: flex; align-items: center; gap: 4px; padding: calc(10px + env(safe-area-inset-top)) 8px 10px var(--sv-gutter); background: var(--sv-well); border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-search-sheet-form { position: relative; flex: 1; min-width: 0; } [data-theme='vault'] .sv-search-sheet-icon { position: absolute; left: 14px; top: 50%; translate: 0 -50%; width: 17px; height: 17px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='vault'] .sv-search-sheet-input { width: 100%; height: 46px; padding: 0 44px 0 42px; border-radius: var(--sv-radius-sm); border: 1px solid var(--primary); background: var(--sv-surface); color: var(--sv-ink); font-size: 16px; box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); -webkit-appearance: none; appearance: none; } [data-theme='vault'] .sv-search-sheet-input::placeholder { color: var(--sv-ink-3); } [data-theme='vault'] .sv-search-sheet-input:is(:focus, :focus-visible) { outline: none; } [data-theme='vault'] .sv-search-sheet-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } [data-theme='vault'] .sv-search-sheet-clear { position: absolute; right: 3px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--sv-radius-sm); background: none; color: var(--sv-ink-3); cursor: pointer; } [data-theme='vault'] .sv-search-sheet-clear svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-search-sheet-close { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: var(--sv-radius-sm); background: none; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-search-sheet-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px calc(var(--sv-gutter) - 6px) calc(24px + env(safe-area-inset-bottom)); } [data-theme='vault'] .sv-search-sheet-body .sv-suggest-item { min-height: 56px; font-size: 15px; } [data-theme='vault'] .sv-search-sheet-body .sv-suggest-all { min-height: 52px; font-size: 15px; } [data-theme='vault'] .sv-search-sheet-hint { padding: 10px 6px 18px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='vault'] .sv-search-sheet-links { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-search-sheet-link { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 8px 6px 6px; border-bottom: 1px solid var(--sv-line); font-size: 15px; font-weight: 500; color: var(--sv-ink); transition: background-color .12s; } [data-theme='vault'] .sv-search-sheet-link:hover { background: var(--sv-surface); } [data-theme='vault'] .sv-search-sheet-link-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-surface); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-search-sheet-link-icon svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-search-sheet-link-go { width: 16px; height: 16px; margin-left: auto; color: var(--sv-ink-3); } /* ───────── Bottom tab bar (<1024px) ───────── */ [data-theme='vault'] .sv-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding-bottom: env(safe-area-inset-bottom); background: var(--sv-well); box-shadow: 0 -1px 0 var(--sv-line), 0 -16px 32px -24px rgb(0 0 0 / 0.95); } [data-theme='vault'] .sv-tabbar-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 600px; height: 64px; margin: 0 auto; padding: 0; list-style: none; } [data-theme='vault'] .sv-tabbar-list > li { display: flex; min-width: 0; } [data-theme='vault'] .sv-tabbar-item { position: relative; display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 44px; padding: 4px 0 2px; border: 0; background: none; color: var(--sv-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .15s; } [data-theme='vault'] .sv-tabbar-item svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.7; transition: color .15s, transform .15s; } [data-theme='vault'] .sv-tabbar-label { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 500; line-height: 1.25; letter-spacing: 0; } /* Active: primary icon + label and a glowing 2px rule on the bar's top edge */ [data-theme='vault'] .sv-tabbar-item::before { content: ''; position: absolute; top: 0; left: 50%; width: 28px; height: 2px; margin-left: -14px; background: var(--primary); box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 75%, transparent); transform: scaleX(0); transition: transform .2s ease; } [data-theme='vault'] .sv-tabbar-item:is([aria-current='page'], [data-active]) { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-tabbar-item:is([aria-current='page'], [data-active]) svg { color: var(--sv-primary-ink); stroke-width: 2; } [data-theme='vault'] .sv-tabbar-item:is([aria-current='page'], [data-active]) .sv-tabbar-label { font-weight: 600; } [data-theme='vault'] .sv-tabbar-item:is([aria-current='page'], [data-active])::before { transform: scaleX(1); } [data-theme='vault'] .sv-tabbar-item:active svg { transform: scale(0.92); } [data-theme='vault'] .sv-tabbar-item:focus-visible { outline-offset: -4px; } /* In-flow spacer after the footer, so the bar never covers content */ [data-theme='vault'] .sv-tabbar-spacer { flex-shrink: 0; height: calc(64px + env(safe-area-inset-bottom)); background: var(--sv-well); } [data-theme='vault'] .sv-tabbar-label-short { display: none; } @media (max-width: 379px) { [data-theme='vault'] .sv-tabbar-list[data-count='5'] .sv-tabbar-label-full { display: none; } [data-theme='vault'] .sv-tabbar-list[data-count='5'] .sv-tabbar-label-short { display: inline; } } @media (min-width: 1024px) { [data-theme='vault'] .sv-tabbar, [data-theme='vault'] .sv-tabbar-spacer { display: none; } } /* ───────── "Lainnya" bottom sheet (portalled to ) ───────── */ [data-theme='vault'].sv-more { position: fixed; inset: 0; z-index: 85; display: flex; flex-direction: column; justify-content: flex-end; color: var(--sv-ink); } [data-theme='vault'] .sv-more-backdrop { position: absolute; inset: 0; background: rgb(3 5 8 / 0.7); animation: sv-more-fade .2s ease; } [data-theme='vault'] .sv-more-panel { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: min(88dvh, 720px); margin: 0 auto; border: 1px solid var(--sv-line-strong); border-bottom: 0; border-radius: var(--sv-radius-lg) var(--sv-radius-lg) 0 0; background: var(--sv-surface); box-shadow: 0 -30px 60px -30px rgb(0 0 0 / 0.95); animation: sv-more-in .26s cubic-bezier(.2, .8, .2, 1); } [data-theme='vault'] .sv-more-panel:focus { outline: none; } [data-theme='vault'] .sv-more-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 8px 8px var(--sv-gutter); border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-more-handle { position: absolute; top: 8px; left: 50%; width: 32px; height: 3px; margin-left: -16px; background: var(--sv-line-strong); } [data-theme='vault'] .sv-more-title { font-size: 18px; font-weight: 650; letter-spacing: -0.015em; } [data-theme='vault'] .sv-more-close { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid transparent; border-radius: var(--sv-radius-sm); background: none; color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='vault'] .sv-more-close:hover { border-color: var(--sv-line-strong); color: var(--sv-ink); } [data-theme='vault'] .sv-more-close svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-more-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 calc(var(--sv-gutter) - 8px) calc(14px + env(safe-area-inset-bottom)); } [data-theme='vault'] .sv-more-group { padding: 14px 0 10px; } [data-theme='vault'] .sv-more-group + .sv-more-group { border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-more-group-title { padding: 0 8px 8px; font-family: var(--sv-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-more-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-more-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border-radius: var(--sv-radius-sm); font-size: 15px; font-weight: 500; color: var(--sv-ink); transition: background-color .12s, box-shadow .12s; } [data-theme='vault'] .sv-more-link:hover, [data-theme='vault'] .sv-more-link:active { background: var(--sv-surface-2); } [data-theme='vault'] .sv-more-link[aria-current='page'] { background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-more-link-icon { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); color: var(--sv-ink-2); } [data-theme='vault'] .sv-more-link-icon svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-more-link[aria-current='page'] .sv-more-link-icon { border-color: var(--sv-primary-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-more-link-text { flex: 1; min-width: 0; } [data-theme='vault'] .sv-more-link-go { width: 16px; height: 16px; flex-shrink: 0; color: var(--sv-ink-3); } [data-theme='vault'] .sv-more-auth { display: grid; gap: 12px; padding: 2px 8px 4px; } [data-theme='vault'] .sv-more-auth-note { font-size: 14px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-more-auth-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-theme='vault'] .sv-more-auth-actions .sv-nav-btn { height: 46px; font-size: 15px; } [data-theme='vault'] .sv-more-account { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; margin: 0 2px; padding: 10px 12px 10px 10px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-well); color: var(--sv-ink); transition: border-color .15s, background-color .15s; } [data-theme='vault'] .sv-more-account:hover { border-color: var(--sv-primary-line); } [data-theme='vault'] .sv-more-account[aria-current='page'] { border-color: var(--primary); background: var(--sv-primary-soft); } [data-theme='vault'] .sv-more-account .sv-nav-avatar { width: 40px; height: 40px; font-size: 16px; } [data-theme='vault'] .sv-more-account-text { display: grid; flex: 1; min-width: 0; gap: 2px; } [data-theme='vault'] .sv-more-account-name { font-size: 15px; font-weight: 600; } [data-theme='vault'] .sv-more-account-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-more-account-loading { display: block; height: 64px; margin: 0 2px; } @keyframes sv-more-in { from { transform: translateY(100%); } to { transform: none; } } @keyframes sv-more-fade { from { opacity: 0; } to { opacity: 1; } } /* ───────── Footer: Belanja / Bantuan / Komunitas columns ───────── */ @media (min-width: 1024px) { [data-theme='vault'] .sv-footer-grid[data-community] { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 0.85fr)) minmax(0, 1.45fr); gap: 32px; } } @media (min-width: 640px) and (max-width: 1023px) { [data-theme='vault'] .sv-footer-grid[data-community] { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { /* The tab bar spacer already clears the bottom; no extra room needed. */ [data-theme='vault'] .sv-shell:has(> .sv-tabbar-spacer) .sv-footer-bottom { padding-bottom: 24px; } /* Pages with their own fixed order bar (no tab bar): keep the copyright line clear of it. */ [data-theme='vault'] .sv-shell:has(.sv-order-bar, .sv-joki-bar) .sv-footer-bottom { padding-bottom: calc(88px + env(safe-area-inset-bottom)); } } /* ───────── Header-aware offsets for sticky content and scroll targets ───────── */ /* The contact step is scrolled to from above, so row 2 is hidden by then. */ [data-theme='vault'] .sv-shell .sv-detail-anchor { scroll-margin-top: calc(var(--sv-header-bar-h, 64px) + 24px); } [data-theme='vault'] .sv-shell :is(.sv-detail-reviews, .sv-joki-terms) { top: calc(var(--sv-header-offset, 108px) + 20px); transition: top .3s cubic-bezier(.2, .7, .2, 1); } @media (prefers-reduced-motion: reduce) { [data-theme='vault'] .sv-nav-sub, [data-theme='vault'] .sv-nav-bar, [data-theme='vault'] .sv-nav-link::after, [data-theme='vault'].sv-search-sheet, [data-theme='vault'] .sv-tabbar-item, [data-theme='vault'] .sv-tabbar-item svg, [data-theme='vault'] .sv-tabbar-item::before, [data-theme='vault'] .sv-more-panel, [data-theme='vault'] .sv-more-backdrop, [data-theme='vault'] .sv-shell :is(.sv-detail-reviews, .sv-joki-terms) { transition: none; animation: none; } } @keyframes sv-spin { to { transform: rotate(360deg); } } [data-theme='vault'] .sv-spin { animation: sv-spin 1s linear infinite; } /* ---------- Page frame ---------- */ [data-theme='vault'] .sv-detail { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } [data-theme='vault'] .sv-detail-main { margin-top: 24px; } [data-theme='vault'] .sv-detail-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "info" "form" "reviews"; } [data-theme='vault'] .sv-detail-info { grid-area: info; min-width: 0; } [data-theme='vault'] .sv-detail-form { grid-area: form; min-width: 0; display: grid; gap: 16px; align-content: start; } [data-theme='vault'] .sv-detail-reviews { grid-area: reviews; min-width: 0; } [data-theme='vault'] .sv-detail-reviews:empty { display: none; } [data-theme='vault'] .sv-detail-anchor { scroll-margin-top: 112px; } @media (min-width: 1024px) { [data-theme='vault'] .sv-detail { padding-bottom: 80px; } [data-theme='vault'] .sv-detail-main { margin-top: 28px; } [data-theme='vault'] .sv-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "info form" "reviews form"; column-gap: 24px; row-gap: 16px; align-items: start; } [data-theme='vault'] .sv-detail-anchor { scroll-margin-top: 96px; } } @media (min-width: 1024px) and (min-height: 820px) { [data-theme='vault'] .sv-detail-reviews { position: sticky; top: 96px; } [data-theme='vault'] .sv-detail-reviews:has([aria-expanded='true']) { position: static; } } /* ---------- Hero ---------- */ [data-theme='vault'] .sv-hero { position: relative; padding-top: 20px; } [data-theme='vault'] .sv-hero-banner { position: relative; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--sv-radius-lg); background: var(--sv-surface); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-hero-banner-img { object-fit: cover; object-position: 50% 10%; } [data-theme='vault'] .sv-hero-banner::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--sv-bg) 0%, color-mix(in oklab, var(--sv-bg) 55%, transparent) 30%, transparent 62%); } [data-theme='vault'] .sv-hero-card { position: relative; z-index: 1; display: flex; align-items: center; gap: 20px; margin: -60px 24px 0; padding: 18px 22px; background: var(--sv-sheen), color-mix(in oklab, var(--sv-surface) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-edge), var(--sv-shadow-lg); } [data-theme='vault'] .sv-hero--plain .sv-hero-card { margin: 8px 0 0; } [data-theme='vault'] .sv-hero-logo { position: relative; flex-shrink: 0; width: 84px; height: 84px; align-self: center; display: grid; place-items: center; overflow: hidden; border-radius: var(--sv-radius); border: 1px solid var(--sv-line-strong); outline: 4px solid var(--sv-bg); background: var(--sv-primary-soft); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 30px; font-weight: 500; } [data-theme='vault'] .sv-hero--plain .sv-hero-logo { margin-top: 0; } [data-theme='vault'] .sv-hero-logo img { width: 100%; height: 100%; object-fit: cover; } [data-theme='vault'] .sv-hero-info { min-width: 0; } [data-theme='vault'] .sv-hero-kicker { font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-hero-kicker::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 1px 1px; vertical-align: middle; border-radius: 2px; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent), 0 0 10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-hero-title { margin-top: 3px; font-size: clamp(23px, 2.6vw, 31px); line-height: 1.15; font-weight: 650; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='vault'] .sv-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } [data-theme='vault'] .sv-hero-chips .sv-chip { height: 26px; } [data-theme='vault'] .sv-hero-rating { background: color-mix(in oklab, var(--sv-star) 10%, var(--sv-surface)); color: var(--sv-star); border-color: color-mix(in oklab, var(--sv-star) 35%, transparent); } [data-theme='vault'] .sv-hero-rating svg { fill: var(--sv-star); color: var(--sv-star); } [data-theme='vault'] .sv-hero-rating strong { font-weight: 600; } [data-theme='vault'] .sv-hero-rating-count { opacity: 0.85; } @media (max-width: 639px) { [data-theme='vault'] .sv-hero { padding-top: 12px; } [data-theme='vault'] .sv-hero-banner { aspect-ratio: 2 / 1; } [data-theme='vault'] .sv-hero-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "logo kicker" "logo title" "chips chips"; column-gap: 14px; row-gap: 0; align-items: start; margin: -34px 8px 0; padding: 14px; } [data-theme='vault'] .sv-hero-info { display: contents; } [data-theme='vault'] .sv-hero-logo { grid-area: logo; align-self: center; width: 64px; height: 64px; outline-width: 3px; } [data-theme='vault'] .sv-hero-kicker { grid-area: kicker; align-self: end; font-size: 11px; } [data-theme='vault'] .sv-hero-title { grid-area: title; align-self: start; font-size: 21px; } [data-theme='vault'] .sv-hero-chips { grid-area: chips; margin-top: 12px; } [data-theme='vault'] .sv-hero-chips .sv-chip { height: 26px; padding: 0 8px; font-size: 11.5px; } [data-theme='vault'] .sv-hero--plain .sv-hero-logo { margin-top: 0; } } /* ---------- Guide (left column) ---------- */ [data-theme='vault'] .sv-guide { display: grid; gap: 16px; padding: 20px; border-radius: var(--sv-radius-lg); } [data-theme='vault'] .sv-guide-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-guide-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-guide-icon svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-guide-kicker { font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-guide-title { font-size: 17px; line-height: 1.25; font-weight: 600; } [data-theme='vault'] .sv-guide-subtitle { margin-bottom: 4px; font-size: 15px; font-weight: 600; } [data-theme='vault'] .sv-guide-sub { padding-top: 14px; border-top: 1px dashed var(--sv-line-strong); } [data-theme='vault'] .sv-guide-body { display: grid; gap: 16px; } [data-theme='vault'] .sv-guide-head > div { flex: 1; min-width: 0; } [data-theme='vault'] .sv-guide-steps { display: grid; } [data-theme='vault'] .sv-guide-step { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 7px 0; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='vault'] .sv-guide-step p { padding-top: 2px; } [data-theme='vault'] .sv-guide-step:not(:last-child)::before { content: ''; position: absolute; left: 14.5px; top: 36px; bottom: -2px; width: 1px; background: repeating-linear-gradient(to bottom, var(--sv-line-strong) 0 3px, transparent 3px 6px); } [data-theme='vault'] .sv-guide-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line-strong); background: var(--sv-well); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 12px; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-guide-step:nth-child(-n+9) .sv-guide-num::before { content: '0'; } [data-theme='vault'] .sv-guide-link { color: var(--sv-primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } [data-theme='vault'] .sv-guide-help { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-well); color: var(--sv-ink); text-decoration: none; transition: border-color .15s; } [data-theme='vault'] .sv-guide-help:hover { border-color: var(--primary); } [data-theme='vault'] .sv-guide-help-icon { display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); color: var(--sv-ok); } [data-theme='vault'] .sv-guide-help-icon svg { width: 17px; height: 17px; } [data-theme='vault'] .sv-guide-help-text { display: grid; font-size: 14px; line-height: 1.4; } [data-theme='vault'] .sv-guide-help-text strong { font-weight: 600; } [data-theme='vault'] .sv-guide-help-text span { color: var(--sv-ink-2); } [data-theme='vault'] .sv-guide-help-arrow { width: 18px; height: 18px; margin-left: auto; color: var(--sv-ink-3); flex-shrink: 0; } /* Notes & alerts */ [data-theme='vault'] :is(.sv-detail, .sv-dialog) .sv-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); font-size: 15px; line-height: 1.5; } [data-theme='vault'] :is(.sv-detail, .sv-dialog) .sv-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } [data-theme='vault'] :is(.sv-detail, .sv-dialog) .sv-note--warn { background: var(--sv-warn-soft); color: var(--sv-ink); border: 1px solid color-mix(in oklab, var(--sv-warn) 35%, transparent); } [data-theme='vault'] :is(.sv-detail, .sv-dialog) .sv-note--warn svg { color: var(--sv-warn); } [data-theme='vault'] :is(.sv-detail, .sv-dialog) .sv-note strong { font-weight: 600; color: var(--sv-warn); } [data-theme='vault'] .sv-detail .sv-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); font-size: 15px; line-height: 1.5; } [data-theme='vault'] .sv-detail .sv-alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } [data-theme='vault'] .sv-detail .sv-alert-body { min-width: 0; flex: 1; } [data-theme='vault'] .sv-detail .sv-alert-title { font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-detail .sv-alert-text { color: var(--sv-ink-2); overflow-wrap: anywhere; } [data-theme='vault'] .sv-detail .sv-alert-text strong { color: var(--sv-ink); font-weight: 600; } [data-theme='vault'] .sv-detail .sv-alert-action { flex-shrink: 0; align-self: center; } [data-theme='vault'] .sv-detail .sv-alert-btn { min-height: 38px; padding: 0 12px; gap: 6px; font-size: 13.5px; } [data-theme='vault'] .sv-detail .sv-alert-btn svg { width: 15px; height: 15px; } [data-theme='vault'] .sv-detail .sv-alert[data-tone] { --tone: var(--sv-info); } [data-theme='vault'] .sv-detail .sv-alert[data-tone='ok'] { --tone: var(--sv-ok); } [data-theme='vault'] .sv-detail .sv-alert[data-tone='err'] { --tone: var(--sv-err); } [data-theme='vault'] .sv-detail .sv-alert[data-tone='warn'] { --tone: var(--sv-warn); } [data-theme='vault'] .sv-detail .sv-alert[data-tone] { background: color-mix(in oklab, var(--tone) 9%, var(--sv-surface)); border-color: color-mix(in oklab, var(--tone) 32%, transparent); } [data-theme='vault'] .sv-detail .sv-alert[data-tone] .sv-alert-icon { color: var(--tone); } /* ---------- Step panels ---------- */ [data-theme='vault'] .sv-detail .sv-step-aside { min-width: 0; } [data-theme='vault'] .sv-detail .sv-step-picked { display: block; max-width: min(220px, 40vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 8px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-step-body { display: grid; gap: 18px; } [data-theme='vault'] .sv-detail .sv-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 12px; text-align: center; color: var(--sv-ink-2); font-size: 15px; } [data-theme='vault'] .sv-detail .sv-empty svg { width: 26px; height: 26px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-detail .sv-empty-text { padding: 24px 0; text-align: center; color: var(--sv-ink-2); font-size: 15px; } /* ---------- Products ---------- */ [data-theme='vault'] .sv-detail .sv-products { display: grid; gap: 22px; } [data-theme='vault'] .sv-detail .sv-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } [data-theme='vault'] .sv-detail .sv-group-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-group-label::before { content: ''; width: 6px; height: 6px; background: var(--primary); box-shadow: 0 0 8px var(--primary); } [data-theme='vault'] .sv-detail .sv-group-count { font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-detail .sv-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } [data-theme='vault'] .sv-detail .sv-product-grid > li { display: flex; min-width: 0; } @media (min-width: 768px) { [data-theme='vault'] .sv-detail .sv-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } } [data-theme='vault'] .sv-detail .sv-product { position: relative; display: grid; width: 100%; min-width: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "name name" "icon price"; align-items: center; align-content: space-between; column-gap: 8px; row-gap: 10px; min-height: 86px; padding: 12px; text-align: left; color: var(--sv-ink); background: var(--sv-surface-2); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-detail .sv-product-body { display: contents; } [data-theme='vault'] .sv-detail .sv-product-icon { grid-area: icon; display: grid; place-items: center; width: 24px; height: 24px; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-product-icon img { width: 100%; height: 100%; object-fit: contain; } [data-theme='vault'] .sv-detail .sv-product-icon svg { width: 17px; height: 17px; } [data-theme='vault'] .sv-detail .sv-product-name { grid-area: name; align-self: start; font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--sv-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='vault'] .sv-detail .sv-product-price { grid-area: price; font-family: var(--sv-mono); font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 640px) { [data-theme='vault'] .sv-detail .sv-product { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon name" "icon price"; column-gap: 12px; row-gap: 4px; align-content: center; min-height: 74px; } [data-theme='vault'] .sv-detail .sv-product-icon { width: 40px; height: 40px; padding: 6px; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-detail .sv-product-name { align-self: end; } [data-theme='vault'] .sv-detail .sv-product-price { align-self: start; font-size: 15px; } } [data-theme='vault'] .sv-detail .sv-product:hover:not(:disabled) { border-color: var(--sv-primary-line); background: var(--sv-surface-3); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-detail .sv-product[aria-pressed='true'] { border-color: var(--primary); background: var(--sv-primary-soft); box-shadow: 0 0 24px -10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-detail .sv-product[aria-pressed='true']::after { content: ''; position: absolute; inset: -5px; pointer-events: none; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] .sv-detail .sv-product[aria-pressed='true'] .sv-product-price { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-product-check { position: absolute; top: -1px; right: -1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 0 var(--sv-radius) 0 var(--sv-radius-xs); background: var(--primary); color: var(--sv-on-primary); } [data-theme='vault'] .sv-detail .sv-product-check svg { width: 12px; height: 12px; stroke-width: 3; } [data-theme='vault'] .sv-detail .sv-more-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 10px; border-radius: var(--sv-radius-sm); border: 1px dashed var(--sv-line-strong); background: transparent; font-family: var(--sv-mono); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='vault'] .sv-detail .sv-more-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-more-btn svg { width: 16px; height: 16px; transition: transform .2s; } [data-theme='vault'] .sv-detail .sv-more-btn svg[data-open='true'] { transform: rotate(180deg); } /* ---------- Flash sale (inside step 1) ---------- */ [data-theme='vault'] .sv-detail .sv-flash-panel { position: relative; padding: 14px; border-radius: var(--sv-radius); background: var(--sv-well); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-detail .sv-flash-panel::before { content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px; background: linear-gradient(90deg, var(--sv-hot), transparent 70%); } [data-theme='vault'] .sv-detail .sv-flash-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; } [data-theme='vault'] .sv-detail .sv-flash-panel-titles { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme='vault'] .sv-detail .sv-flash-panel-title { font-size: 16px; font-weight: 600; line-height: 1.25; } [data-theme='vault'] .sv-detail .sv-timer { display: inline-flex; align-items: center; gap: 8px; } [data-theme='vault'] .sv-detail .sv-timer-label { font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-timer-units { display: inline-flex; align-items: center; gap: 3px; font-family: var(--sv-mono); } [data-theme='vault'] .sv-detail .sv-timer-unit { display: grid; place-items: center; min-width: 30px; height: 28px; padding: 0 5px; border-radius: var(--sv-radius-xs); background: var(--sv-well); border: 1px solid color-mix(in oklab, var(--sv-hot) 40%, var(--sv-line)); color: var(--sv-hot); font-size: 13.5px; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-detail .sv-timer-sep { color: var(--sv-ink-3); } [data-theme='vault'] .sv-detail .sv-timer--ended { font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-product--flash { grid-template-areas: "name name" "icon price" "meter meter"; border-color: color-mix(in oklab, var(--sv-hot) 30%, var(--sv-line)); margin-top: 4px; } [data-theme='vault'] .sv-detail .sv-product-prices { grid-area: price; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; min-width: 0; } [data-theme='vault'] .sv-detail .sv-product--flash .sv-product-price { color: var(--sv-hot); } [data-theme='vault'] .sv-detail .sv-product--flash[aria-pressed='true'] .sv-product-price { color: var(--sv-hot); } [data-theme='vault'] .sv-detail .sv-product-was { font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-3); text-decoration: line-through; white-space: nowrap; } [data-theme='vault'] .sv-detail .sv-product-off { position: absolute; top: -9px; left: 10px; display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--sv-radius-xs); background: var(--sv-hot); color: var(--sv-hot-ink); font-family: var(--sv-mono); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-detail .sv-meter { grid-area: meter; display: grid; gap: 5px; height: auto; margin-top: 2px; background: none; } [data-theme='vault'] .sv-detail .sv-meter-track { display: block; height: 3px; overflow: hidden; background: repeating-linear-gradient(90deg, var(--sv-line) 0 5px, transparent 5px 7px); } [data-theme='vault'] .sv-detail .sv-meter-fill { display: block; height: 100%; background: color-mix(in oklab, var(--sv-hot) 70%, var(--sv-ink-3)); -webkit-mask-image: none; mask-image: none; } [data-theme='vault'] .sv-detail .sv-meter[data-hot] .sv-meter-fill { background: var(--sv-hot); } [data-theme='vault'] .sv-detail .sv-meter-text { font-family: var(--sv-mono); font-size: 11px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-meter[data-hot] .sv-meter-text { color: var(--sv-hot); } @media (min-width: 640px) { [data-theme='vault'] .sv-detail .sv-product--flash { grid-template-areas: "icon name" "icon price" "meter meter"; row-gap: 4px; } [data-theme='vault'] .sv-detail .sv-product--flash .sv-meter { margin-top: 8px; } } /* Narrow phones: give mono prices room (no ellipsis on 6–7 digit amounts). */ @media (max-width: 420px) { [data-theme='vault'] .sv-detail .sv-flash-panel { padding: 10px; } [data-theme='vault'] .sv-detail .sv-product { padding: 11px 10px; column-gap: 6px; } [data-theme='vault'] .sv-detail .sv-product-icon { width: 20px; height: 20px; } [data-theme='vault'] .sv-detail .sv-product-price { font-size: 14px; letter-spacing: -0.04em; } } [data-theme='vault'] .sv-detail .sv-product:disabled { cursor: not-allowed; background: transparent; border-style: dashed; } [data-theme='vault'] .sv-detail .sv-product:disabled :is(.sv-product-icon, .sv-product-name, .sv-product-prices, .sv-product-off) { opacity: 0.5; filter: grayscale(1); } /* ---------- Contact form ---------- */ [data-theme='vault'] .sv-detail .sv-form-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } [data-theme='vault'] .sv-detail .sv-form-grid[data-cols='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } [data-theme='vault'] .sv-detail .sv-field { min-width: 0; } [data-theme='vault'] .sv-detail .sv-label { display: inline-flex; align-items: center; gap: 3px; } [data-theme='vault'] .sv-detail .sv-required { color: var(--sv-err); } [data-theme='vault'] .sv-detail .sv-select { justify-content: space-between; height: 46px; box-shadow: none; } [data-theme='vault'] .sv-detail .sv-help-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--sv-primary-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--primary) 45%, transparent); text-underline-offset: 3px; } [data-theme='vault'] .sv-detail .sv-help-btn::after { content: ''; position: absolute; inset: -6px -4px; } [data-theme='vault'] .sv-detail .sv-help-btn svg { width: 16px; height: 16px; flex-shrink: 0; } [data-theme='vault'] .sv-detail .sv-step--contact .sv-step-body { gap: 16px; } [data-theme='vault'] .sv-detail .sv-account-slot:empty { display: none; } [data-theme='vault'] .sv-detail .sv-account { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; } [data-theme='vault'] .sv-detail .sv-account-label { font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-account-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; max-width: 100%; padding: 4px 10px; border-radius: var(--sv-radius-xs); font-family: var(--sv-mono); font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; } [data-theme='vault'] .sv-detail .sv-account-chip svg { width: 15px; height: 15px; flex-shrink: 0; } [data-theme='vault'] .sv-detail .sv-account[data-state='ok'] .sv-account-chip { background: var(--sv-ok-soft); color: var(--sv-ok); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sv-ok) 40%, transparent); } [data-theme='vault'] .sv-detail .sv-account[data-state='err'] .sv-account-chip { background: var(--sv-err-soft); color: var(--sv-err); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sv-err) 40%, transparent); } [data-theme='vault'] .sv-detail .sv-account[data-state='busy'] .sv-account-chip { background: var(--sv-surface-2); color: var(--sv-ink-2); box-shadow: inset 0 0 0 1px var(--sv-line); } [data-theme='vault'] .sv-detail .sv-account-meta { color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-input-group { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-sm); background: var(--sv-well); transition: border-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-detail .sv-input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); } [data-theme='vault'] .sv-detail .sv-input-prefix { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid var(--sv-line); background: var(--sv-surface-2); color: var(--sv-ink-2); font-family: var(--sv-mono); font-size: 14.5px; } [data-theme='vault'] .sv-detail .sv-input-group .sv-input { min-width: 0; height: 44px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } /* ---------- Voucher ---------- */ [data-theme='vault'] .sv-detail .sv-voucher-row { display: flex; gap: 8px; } [data-theme='vault'] .sv-detail .sv-voucher-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--sv-mono); } [data-theme='vault'] .sv-detail .sv-voucher-input::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--font-theme-body), system-ui, sans-serif; } [data-theme='vault'] .sv-detail .sv-voucher-btn { flex-shrink: 0; min-height: 46px; padding: 0 18px; } [data-theme='vault'] .sv-detail .sv-btn:disabled { color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-voucher-btn svg { width: 17px; height: 17px; } [data-theme='vault'] .sv-detail .sv-tickets-label { margin-bottom: 8px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-tickets { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); } [data-theme='vault'] .sv-detail .sv-ticket { --sv-ticket-line: color-mix(in oklab, var(--primary) 32%, var(--sv-line-strong)); --sv-notch-bg: var(--sv-surface); position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 0 14px; min-height: 80px; padding-right: 12px; border: 1px solid var(--sv-ticket-line); border-radius: var(--sv-radius); background: var(--sv-surface-2); transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-detail .sv-ticket:hover:not([data-applied]) { border-color: var(--sv-primary-line); box-shadow: 0 0 28px -14px color-mix(in oklab, var(--primary) 60%, transparent); } [data-theme='vault'] .sv-detail .sv-ticket[data-applied] { --sv-ticket-line: var(--primary); background: var(--sv-primary-soft); box-shadow: 0 0 24px -10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-detail .sv-ticket[data-applied]::after { content: ''; position: absolute; inset: -5px; pointer-events: none; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] .sv-detail .sv-ticket-value { position: relative; align-self: stretch; display: grid; place-content: center; justify-items: center; gap: 3px; border-right: 1px dashed var(--sv-ticket-line); border-radius: calc(var(--sv-radius) - 1px) 0 0 calc(var(--sv-radius) - 1px); background: color-mix(in oklab, var(--primary) 13%, var(--sv-surface-2)); color: var(--sv-primary-ink); font-family: var(--sv-mono); } [data-theme='vault'] .sv-detail .sv-ticket[data-applied] .sv-ticket-value { background: color-mix(in oklab, var(--primary) 22%, var(--sv-surface-2)); } /* Round notches on the tear line: half circles that bite into the top/bottom edge */ [data-theme='vault'] .sv-detail .sv-ticket-value::before, [data-theme='vault'] .sv-detail .sv-ticket-value::after { content: ''; position: absolute; right: -8px; width: 15px; height: 8px; background: var(--sv-notch-bg); border: 1px solid var(--sv-ticket-line); } [data-theme='vault'] .sv-detail .sv-ticket-value::before { top: -1px; border-top: 0; border-radius: 0 0 8px 8px; } [data-theme='vault'] .sv-detail .sv-ticket-value::after { bottom: -1px; border-bottom: 0; border-radius: 8px 8px 0 0; } [data-theme='vault'] .sv-detail .sv-ticket-value strong { font-size: 22px; line-height: 1; font-weight: 600; letter-spacing: -0.03em; } [data-theme='vault'] .sv-detail .sv-ticket-value span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-ticket-body { display: grid; gap: 3px; min-width: 0; padding: 12px 0; } [data-theme='vault'] .sv-detail .sv-ticket-code { font-family: var(--sv-mono); font-size: 14.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='vault'] .sv-detail .sv-ticket-meta { font-size: 13px; line-height: 1.4; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-ticket-btn { min-height: 40px; padding: 0 16px; font-size: 14px; } [data-theme='vault'] .sv-detail .sv-ticket-btn:disabled { color: var(--sv-ink-2); cursor: not-allowed; background: transparent; } [data-theme='vault'] .sv-detail .sv-ticket-skeleton { height: 80px; } @media (max-width: 479px) { [data-theme='vault'] .sv-detail .sv-ticket { grid-template-columns: 76px minmax(0, 1fr); grid-template-areas: "value body" "value btn"; padding-bottom: 12px; } [data-theme='vault'] .sv-detail .sv-ticket-value { grid-area: value; margin-bottom: -12px; } [data-theme='vault'] .sv-detail .sv-ticket-body { grid-area: body; padding-bottom: 8px; } [data-theme='vault'] .sv-detail .sv-ticket-btn { grid-area: btn; justify-self: start; min-height: 40px; } } /* ---------- Payment ---------- */ [data-theme='vault'] .sv-detail .sv-pay-empty { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--sv-radius-sm); border: 1px dashed var(--sv-line-strong); background: var(--sv-well); } [data-theme='vault'] .sv-detail .sv-pay-empty-icon { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-pay-empty-icon svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-detail .sv-pay-empty p { display: grid; gap: 2px; font-size: 14px; line-height: 1.45; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-pay-empty strong { font-size: 15px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-detail .sv-pay-group-label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-pay-group-label::after { content: ''; flex: 1; height: 1px; background: var(--sv-line); } [data-theme='vault'] .sv-detail .sv-pay-list { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { [data-theme='vault'] .sv-detail .sv-pay-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } [data-theme='vault'] .sv-detail .sv-pay-list > li { display: flex; min-width: 0; } [data-theme='vault'] .sv-detail .sv-pay { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "logo name name" "logo meta total"; position: relative; align-items: center; column-gap: 12px; row-gap: 3px; width: 100%; min-height: 66px; padding: 11px 14px; text-align: left; color: var(--sv-ink); background: var(--sv-surface-2); border: 1px solid var(--sv-line); border-radius: var(--sv-radius); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-detail .sv-pay:hover:not(:disabled) { border-color: var(--sv-primary-line); background: var(--sv-surface-3); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-detail .sv-pay[aria-pressed='true'] { border-color: var(--primary); background: var(--sv-primary-soft); box-shadow: 0 0 24px -10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-detail .sv-pay[aria-pressed='true']::after { content: ''; position: absolute; inset: -5px; pointer-events: none; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] .sv-detail .sv-pay:disabled { cursor: not-allowed; background: transparent; border-style: dashed; } [data-theme='vault'] .sv-detail .sv-pay:disabled .sv-pay-logo { opacity: 0.5; filter: grayscale(1); } [data-theme='vault'] .sv-detail .sv-pay:disabled :is(.sv-pay-name, .sv-pay-total) { color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-pay-radio { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line-strong); background: var(--sv-well); transition: border-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-detail .sv-pay[aria-pressed='true'] .sv-pay-radio { border-color: var(--primary); box-shadow: inset 0 0 0 3px var(--sv-well), inset 0 0 0 8px var(--primary); } [data-theme='vault'] .sv-detail .sv-pay-logo { grid-area: logo; display: grid; place-items: center; width: 58px; height: 38px; padding: 5px 6px; border-radius: var(--sv-radius-sm); background: var(--sv-plate); } [data-theme='vault'] .sv-detail .sv-pay-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme='vault'] .sv-detail .sv-pay-logo[data-kind='wallet'] { background: var(--sv-primary-soft); border: 1px solid var(--sv-primary-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-pay-logo svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-detail .sv-pay-initials { font-family: var(--sv-mono); font-size: 12px; font-weight: 600; color: var(--sv-bg); } [data-theme='vault'] .sv-detail .sv-pay-info { display: contents; } [data-theme='vault'] .sv-detail .sv-pay-name { grid-area: name; min-width: 0; padding-right: 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 14.5px; font-weight: 600; line-height: 1.3; } [data-theme='vault'] .sv-detail .sv-pay-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--sv-radius-xs); border: 1px solid color-mix(in oklab, var(--sv-signal) 40%, transparent); color: var(--sv-signal); font-family: var(--sv-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; } [data-theme='vault'] .sv-detail .sv-pay-meta { grid-area: meta; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-pay-meta[data-tone='ok'] { color: var(--sv-ok); } [data-theme='vault'] .sv-detail .sv-pay-meta[data-tone='err'] { color: var(--sv-err); } [data-theme='vault'] .sv-detail .sv-pay-total { grid-area: total; justify-self: end; font-family: var(--sv-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-detail .sv-pay[aria-pressed='true'] .sv-pay-total { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-pay-skeleton { height: 66px; } @media (max-width: 400px) { [data-theme='vault'] .sv-detail .sv-pay { column-gap: 10px; padding: 10px 12px; } [data-theme='vault'] .sv-detail .sv-pay-logo { width: 48px; height: 32px; padding: 4px; } [data-theme='vault'] .sv-detail .sv-pay-total { font-size: 14px; } } /* ---------- Order action ---------- */ [data-theme='vault'] .sv-detail .sv-order { position: relative; display: grid; gap: 14px; padding: 22px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg); } [data-theme='vault'] .sv-detail .sv-order-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } [data-theme='vault'] .sv-detail .sv-order-title { font-size: 17px; font-weight: 600; } [data-theme='vault'] .sv-detail .sv-order-progress { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); color: var(--sv-ink-2); font-family: var(--sv-mono); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-detail .sv-order-progress[data-done] { border-color: color-mix(in oklab, var(--sv-ok) 45%, transparent); color: var(--sv-ok); background: var(--sv-ok-soft); } [data-theme='vault'] .sv-detail .sv-order-item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-detail .sv-order-item-icon { display: grid; place-items: center; width: 44px; height: 44px; padding: 6px; border-radius: var(--sv-radius-sm); background: var(--sv-surface-2); border: 1px solid var(--sv-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-detail .sv-order-item-icon img { width: 100%; height: 100%; object-fit: contain; } [data-theme='vault'] .sv-detail .sv-order-item-text { display: grid; gap: 3px; min-width: 0; } [data-theme='vault'] .sv-detail .sv-order-item-name { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; } [data-theme='vault'] .sv-detail .sv-order-item-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-flash { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: var(--sv-radius-xs); background: var(--sv-hot); color: var(--sv-hot-ink); font-family: var(--sv-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; } [data-theme='vault'] .sv-detail .sv-order-item-price { font-family: var(--sv-mono); font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-detail .sv-order-empty { padding: 14px; border-radius: var(--sv-radius-sm); border: 1px dashed var(--sv-line-strong); text-align: center; font-size: 15px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-rows { display: grid; gap: 9px; } [data-theme='vault'] .sv-detail .sv-order-row { display: flex; justify-content: space-between; gap: 16px; font-size: 14.5px; line-height: 1.4; } [data-theme='vault'] .sv-detail .sv-order-row dt { flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-row dd { min-width: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; } [data-theme='vault'] .sv-detail .sv-order-row[data-tone='ok'] dd { color: var(--sv-ok); } [data-theme='vault'] .sv-detail .sv-order-strong { font-weight: 600; } [data-theme='vault'] .sv-detail .sv-order-soft { color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px dashed var(--sv-line-strong); } [data-theme='vault'] .sv-detail .sv-order-total > span { display: grid; gap: 3px; font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-total small { font-family: var(--font-theme-body), system-ui, sans-serif; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--sv-ink-3); } [data-theme='vault'] .sv-detail .sv-order-total strong { font-family: var(--sv-mono); font-size: 27px; line-height: 1.1; font-weight: 600; letter-spacing: -0.04em; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-detail .sv-order-btn { flex-wrap: wrap; row-gap: 4px; min-height: 54px; padding: 8px 16px; font-size: 16px; } [data-theme='vault'] .sv-detail .sv-order-btn svg { width: 17px; height: 17px; } [data-theme='vault'] .sv-detail .sv-order-btn-amount { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: var(--sv-radius-xs); background: color-mix(in oklab, var(--sv-on-primary) 14%, transparent); font-family: var(--sv-mono); font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-detail :is(.sv-order-btn, .sv-order-bar-btn):disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); border: 1px dashed var(--sv-line-strong); box-shadow: none; } [data-theme='vault'] .sv-detail .sv-order-checklist { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-checklist li { display: inline-flex; align-items: center; gap: 6px; } [data-theme='vault'] .sv-detail .sv-order-checklist li[data-done] { color: var(--sv-ink); } [data-theme='vault'] .sv-detail .sv-order-check { display: grid; place-items: center; width: 16px; height: 16px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line-strong); } [data-theme='vault'] .sv-detail li[data-done] .sv-order-check { border-color: var(--sv-ok); background: var(--sv-ok); color: var(--sv-signal-ink); } [data-theme='vault'] .sv-detail .sv-order-check svg { width: 11px; height: 11px; stroke-width: 3.5; } [data-theme='vault'] .sv-detail .sv-order-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--sv-ink-3); text-align: center; } [data-theme='vault'] .sv-detail .sv-order-secure svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--sv-ok); } /* Mobile sticky order bar */ [data-theme='vault'] .sv-detail .sv-order-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--sv-gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--sv-bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--sv-line-strong); box-shadow: 0 -20px 40px -24px rgb(0 0 0 / 0.9); transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } [data-theme='vault'] .sv-detail .sv-order-bar::before { content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); } [data-theme='vault'] .sv-detail .sv-order-bar[data-visible] { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; } [data-theme='vault'] .sv-detail .sv-order-bar-info { display: grid; flex: 1; min-width: 0; } [data-theme='vault'] .sv-detail .sv-order-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-detail .sv-order-bar-total { font-family: var(--sv-mono); font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-detail .sv-order-bar-btn { flex-shrink: 0; min-height: 46px; padding: 0 18px; } @media (min-width: 1024px) { [data-theme='vault'] .sv-detail .sv-order-bar { display: none; } } /* ---------- Loading skeleton ---------- */ [data-theme='vault'] .sv-detail--loading .sv-skeleton { border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-detail--loading .sv-skeleton-banner { aspect-ratio: 3 / 1; margin-top: 20px; } [data-theme='vault'] .sv-detail--loading .sv-skeleton-card { position: relative; height: 104px; margin: -56px 24px 0; border: 4px solid var(--sv-bg); } [data-theme='vault'] .sv-detail--loading .sv-skeleton-guide { height: 380px; } [data-theme='vault'] .sv-detail--loading .sv-skeleton-step { height: 460px; } [data-theme='vault'] .sv-detail--loading .sv-skeleton-step--short { height: 240px; } @media (max-width: 639px) { [data-theme='vault'] .sv-detail--loading .sv-skeleton-banner { aspect-ratio: 2 / 1; margin-top: 12px; } [data-theme='vault'] .sv-detail--loading .sv-skeleton-card { margin: -36px 8px 0; height: 120px; } } /* ---------- Reviews ---------- */ [data-theme='vault'] .sv-reviews { display: grid; gap: 18px; padding: 20px; border-radius: var(--sv-radius-lg); } [data-theme='vault'] .sv-reviews-kicker { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-reviews-kicker svg { width: 14px; height: 14px; color: var(--sv-star); } [data-theme='vault'] .sv-reviews-title { margin-top: 4px; font-size: 17px; line-height: 1.25; font-weight: 600; } [data-theme='vault'] .sv-reviews-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-reviews-score { display: grid; justify-items: center; gap: 6px; padding-right: 16px; border-right: 1px solid var(--sv-line); } [data-theme='vault'] .sv-reviews-avg { font-family: var(--sv-mono); font-size: 38px; line-height: 1; font-weight: 500; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-reviews-score .sv-stars svg { width: 13px; height: 13px; } [data-theme='vault'] .sv-reviews-total { font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-2); white-space: nowrap; } [data-theme='vault'] .sv-reviews-dist { display: grid; gap: 6px; } [data-theme='vault'] .sv-reviews-dist-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 40px; align-items: center; gap: 8px; font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-reviews-dist-star { display: inline-flex; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-reviews-dist-star svg { width: 10px; height: 10px; fill: var(--sv-star); color: var(--sv-star); } [data-theme='vault'] .sv-reviews-bar { display: block; height: 4px; background: var(--sv-surface-3); overflow: hidden; } [data-theme='vault'] .sv-reviews-bar > span { display: block; height: 100%; background: var(--sv-star); } [data-theme='vault'] .sv-reviews-dist-count { text-align: right; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-reviews .sv-stars svg[data-empty] { fill: none; color: var(--sv-line-strong); } [data-theme='vault'] .sv-review-list { display: grid; } [data-theme='vault'] .sv-review { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-review:first-child { padding-top: 0; border-top: 0; } [data-theme='vault'] .sv-review:last-child { padding-bottom: 0; } [data-theme='vault'] .sv-review-head { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; } [data-theme='vault'] .sv-review-head .sv-stars svg { width: 12px; height: 12px; } [data-theme='vault'] .sv-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--sv-radius-sm); background: var(--sv-primary-soft); border: 1px solid var(--sv-primary-line); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 13px; } [data-theme='vault'] .sv-avatar[data-tone='1'] { --av: var(--sv-signal); } [data-theme='vault'] .sv-avatar[data-tone='2'] { --av: var(--sv-hot); } [data-theme='vault'] .sv-avatar[data-tone='3'] { --av: var(--sv-star); } [data-theme='vault'] .sv-avatar[data-tone]:not([data-tone='0']) { background: color-mix(in oklab, var(--av) 12%, var(--sv-surface)); border-color: color-mix(in oklab, var(--av) 40%, transparent); color: var(--av); } [data-theme='vault'] .sv-review-who { display: grid; min-width: 0; } [data-theme='vault'] .sv-review-name { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-theme='vault'] .sv-review-date { font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-review-text { font-size: 15px; line-height: 1.6; color: var(--sv-ink-2); } [data-theme='vault'] .sv-review-product { justify-self: start; height: 22px; font-size: 11px; } [data-theme='vault'] .sv-reviews-more { min-height: 44px; font-size: 14.5px; } /* ---------- Dialogs (portal carries data-theme) ---------- */ [data-theme='vault'].sv-dialog { display: grid; gap: 16px; width: 100%; max-width: min(440px, calc(100% - 32px)); padding: 22px; background: var(--sv-surface); color: var(--sv-ink); border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-lg); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.95); } [data-theme='vault'] .sv-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } [data-theme='vault'] .sv-dialog-title { font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-dialog-text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-dialog-close { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: transparent; color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='vault'] .sv-dialog-close:hover { border-color: var(--sv-line-strong); color: var(--sv-ink); } [data-theme='vault'] .sv-dialog-close svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-dialog-rows { display: grid; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); background: var(--sv-well); } [data-theme='vault'] .sv-dialog-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 14px; font-size: 14.5px; line-height: 1.4; } [data-theme='vault'] .sv-dialog-row + .sv-dialog-row { border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-dialog-row dt { flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='vault'] .sv-dialog-row dd { min-width: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; } [data-theme='vault'] .sv-dialog-row[data-tone='ok'] dd { color: var(--sv-ok); } [data-theme='vault'] .sv-dialog-total { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--sv-radius-sm); background: var(--sv-primary-soft); border: 1px solid var(--sv-primary-line); } [data-theme='vault'] .sv-dialog-total span { font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-dialog-total strong { font-family: var(--sv-mono); font-size: 21px; font-weight: 600; letter-spacing: -0.03em; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-dialog-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 10px; } [data-theme='vault'] .sv-dialog-image { width: 100%; height: auto; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); } /* Mobile rhythm: a tighter stack so step 1 sits right under the hero. */ @media (max-width: 1023px) { [data-theme='vault'] .sv-detail-main { margin-top: 16px; } [data-theme='vault'] .sv-shell .sv-detail-anchor { scroll-margin-top: calc(var(--sv-header-h, 56px) + 16px); } /* Guide collapsed: the head hairline would close an empty card. */ [data-theme='vault'] .sv-guide-head:has(+ .sv-collapse-body:not([data-open])) { padding-bottom: 0; border-bottom: 0; } } @media (max-width: 639px) { [data-theme='vault'] .sv-guide { gap: 14px; padding: 16px; } /* Room for the "N langkah" toggle: the decorative icon goes on phones. */ [data-theme='vault'] .sv-guide-icon { display: none; } [data-theme='vault'] .sv-reviews { padding: 16px; } [data-theme='vault'] .sv-detail .sv-alert-btn { min-height: 44px; } [data-theme='vault'] .sv-detail .sv-ticket-btn { min-height: 44px; } } /* ───────── Rank tier palettes ───────── */ [data-theme='vault'] [data-rank='epic'] { --sv-rank-a: oklch(0.82 0.12 172); --sv-rank-b: oklch(0.52 0.11 190); --sv-rank-deep: oklch(0.24 0.05 200); --sv-rank-orn: oklch(0.9 0.07 170); --sv-rank-mark: oklch(0.99 0.02 170); --sv-rank-ink: oklch(0.84 0.11 178); } [data-theme='vault'] [data-rank='legend'] { --sv-rank-a: oklch(0.89 0.14 90); --sv-rank-b: oklch(0.64 0.15 60); --sv-rank-deep: oklch(0.25 0.06 55); --sv-rank-orn: oklch(0.93 0.1 92); --sv-rank-mark: oklch(0.99 0.03 90); --sv-rank-ink: oklch(0.87 0.13 85); } [data-theme='vault'] [data-rank='mythic'] { --sv-rank-a: oklch(0.78 0.14 305); --sv-rank-b: oklch(0.48 0.2 292); --sv-rank-deep: oklch(0.22 0.09 290); --sv-rank-orn: oklch(0.87 0.09 310); --sv-rank-mark: oklch(0.99 0.02 300); --sv-rank-ink: oklch(0.8 0.12 305); } [data-theme='vault'] [data-rank='honor'] { --sv-rank-a: oklch(0.74 0.13 262); --sv-rank-b: oklch(0.45 0.17 268); --sv-rank-deep: oklch(0.22 0.08 268); --sv-rank-orn: oklch(0.87 0.13 85); --sv-rank-mark: oklch(0.97 0.05 90); --sv-rank-ink: oklch(0.8 0.1 262); } [data-theme='vault'] [data-rank='glory'] { --sv-rank-a: oklch(0.82 0.15 62); --sv-rank-b: oklch(0.54 0.2 30); --sv-rank-deep: oklch(0.23 0.08 28); --sv-rank-orn: oklch(0.9 0.14 90); --sv-rank-mark: oklch(0.99 0.04 85); --sv-rank-ink: oklch(0.82 0.13 50); } /* Rank emblem */ [data-theme='vault'] .sv-rank { display: block; flex-shrink: 0; overflow: visible; filter: drop-shadow(0 0 10px color-mix(in oklab, var(--sv-rank-b) 45%, transparent)); } [data-theme='vault'] .sv-rank-stop-a { stop-color: var(--sv-rank-a); } [data-theme='vault'] .sv-rank-stop-b { stop-color: var(--sv-rank-b); } [data-theme='vault'] .sv-rank-stop-shine { stop-color: #fff; stop-opacity: 0.45; } [data-theme='vault'] .sv-rank-stop-clear { stop-color: #fff; stop-opacity: 0; } [data-theme='vault'] .sv-rank-shield { stroke: var(--sv-rank-orn); stroke-width: 1.6; stroke-linejoin: round; } [data-theme='vault'] .sv-rank-inner { fill: none; stroke: color-mix(in oklab, var(--sv-rank-mark) 50%, transparent); stroke-width: 1; } [data-theme='vault'] .sv-rank-mark { fill: var(--sv-rank-mark); } [data-theme='vault'] .sv-rank-orn path, [data-theme='vault'] .sv-rank-crest { fill: var(--sv-rank-orn); stroke: var(--sv-rank-b); stroke-width: 0.9; stroke-linejoin: round; } [data-theme='vault'] .sv-rank-pips circle { fill: var(--sv-rank-mark); opacity: 0.9; } /* ───────── Page shell (supporting pages) ───────── */ [data-theme='vault'] .sv-page { padding-block: clamp(14px, 2.5vw, 24px) clamp(56px, 8vw, 96px); } [data-theme='vault'] .sv-page-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--sv-ink-3); } [data-theme='vault'] .sv-page-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; } [data-theme='vault'] .sv-page-crumbs a { position: relative; display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; color: var(--sv-ink-2); transition: color .15s; } [data-theme='vault'] .sv-page-crumbs a:hover { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-page-crumbs a::after { content: ''; position: absolute; inset: -6px -4px; } [data-theme='vault'] .sv-page-crumbs [aria-current='page'] { color: var(--sv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(46ch, 62vw); } [data-theme='vault'] .sv-page-crumbs-sep { width: 13px; height: 13px; flex-shrink: 0; } [data-theme='vault'] .sv-page-head { margin: 14px 0 26px; max-width: 760px; } [data-theme='vault'] .sv-page-title { font-size: clamp(28px, 4vw, 42px); line-height: 1.08; font-weight: 650; letter-spacing: -0.035em; color: var(--sv-ink); text-wrap: balance; } [data-theme='vault'] .sv-page-sub { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--sv-ink-2); max-width: 62ch; } [data-theme='vault'] .sv-page-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-page-filters { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 3px; margin: -3px; } [data-theme='vault'] .sv-page-filters::-webkit-scrollbar { display: none; } [data-theme='vault'] .sv-page-filter { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; height: 40px; padding: 0 6px 0 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-surface); font-size: 14px; font-weight: 500; color: var(--sv-ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } [data-theme='vault'] .sv-page-filter:hover { border-color: var(--sv-line-strong); color: var(--sv-ink); } [data-theme='vault'] .sv-page-filter[aria-pressed='true'] { background: var(--sv-primary-soft); border-color: var(--primary); color: var(--sv-ink); box-shadow: inset 0 -2px 0 var(--primary); } [data-theme='vault'] .sv-page-filter-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: var(--sv-radius-xs); background: var(--sv-well); font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-page-filter[aria-pressed='true'] .sv-page-filter-count { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-page-count { flex-shrink: 0; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-3); } /* ───────── Article card ───────── */ [data-theme='vault'] .sv-article-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme='vault'] .sv-article-card { min-width: 0; } [data-theme='vault'] .sv-article-card-link { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); overflow: hidden; transition: border-color .2s, background-color .2s; } [data-theme='vault'] .sv-article-card-link:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-2); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-article-card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sv-surface-2); border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-article-card-img { object-fit: cover; transition: transform .5s ease, filter .3s; filter: saturate(0.9); } [data-theme='vault'] .sv-article-card-link:hover .sv-article-card-img { transform: scale(1.03); filter: none; } [data-theme='vault'] .sv-article-card-body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 16px 18px 18px; } [data-theme='vault'] .sv-article-card-tags { display: flex; align-items: center; gap: 8px; min-width: 0; } [data-theme='vault'] .sv-article-card-game { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-article-card-title { font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; color: var(--sv-ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; } [data-theme='vault'] .sv-article-card-link:hover .sv-article-card-title { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-article-card-excerpt { font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='vault'] .sv-article-card-meta { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--sv-line); font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-3); } /* Featured (lead story on the list page) */ [data-theme='vault'] .sv-article-featured { margin-bottom: 16px; } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-link { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-link::after { content: ''; position: absolute; inset: 10px; pointer-events: none; background: linear-gradient(var(--sv-primary-ink) 0 0) left top / 12px 1.5px no-repeat, linear-gradient(var(--sv-primary-ink) 0 0) left top / 1.5px 12px no-repeat, linear-gradient(var(--sv-primary-ink) 0 0) right bottom / 12px 1.5px no-repeat, linear-gradient(var(--sv-primary-ink) 0 0) right bottom / 1.5px 12px no-repeat; } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-media { aspect-ratio: 16 / 9; align-self: stretch; border-bottom: 0; border-right: 1px solid var(--sv-line); } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-body { justify-content: center; gap: 14px; padding: clamp(22px, 3.2vw, 40px); } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-title { font-size: clamp(22px, 2.5vw, 30px); line-height: 1.2; letter-spacing: -0.025em; -webkit-line-clamp: 3; } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-excerpt { font-size: 15.5px; -webkit-line-clamp: 3; } /* ───────── Joki card ───────── */ [data-theme='vault'] .sv-joki-card { position: relative; display: flex; flex-direction: column; height: 100%; color: inherit; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); overflow: hidden; transition: border-color .2s, background-color .2s, box-shadow .2s; } [data-theme='vault'] .sv-joki-card:hover { border-color: var(--sv-primary-line); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-joki-card-media { position: relative; aspect-ratio: 2 / 1; background: var(--sv-rank-deep); isolation: isolate; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-card-img { z-index: -2; object-fit: cover; object-position: center 30%; } [data-theme='vault'] .sv-joki-card-media::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 20%, color-mix(in oklab, var(--sv-surface) 80%, transparent) 78%, var(--sv-surface) 100%), linear-gradient(110deg, color-mix(in oklab, var(--sv-rank-deep) 70%, transparent) 0%, transparent 60%); } [data-theme='vault'] .sv-joki-card-media .sv-joki-kind { position: absolute; top: 12px; left: 12px; } [data-theme='vault'] .sv-joki-card-discount { position: absolute; top: 12px; right: 12px; } [data-theme='vault'] .sv-joki-card-emblem { position: absolute; left: 14px; bottom: -26px; width: 58px; height: 58px; z-index: 2; transition: transform .25s ease; } [data-theme='vault'] .sv-joki-card:hover .sv-joki-card-emblem { transform: translateY(-2px); } [data-theme='vault'] .sv-joki-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 36px 18px 6px; } [data-theme='vault'] .sv-joki-card-meta { display: flex; align-items: center; gap: 6px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-card-tier { color: var(--sv-rank-ink); } [data-theme='vault'] .sv-joki-card-title { font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-card-summary { font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } [data-theme='vault'] .sv-joki-card-estimate { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; padding: 4px 8px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line); font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-card-estimate svg { width: 13px; height: 13px; color: var(--sv-rank-ink); } [data-theme='vault'] .sv-joki-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 12px 18px 0; padding: 14px 0 18px; border-top: 1px dashed var(--sv-line-strong); } [data-theme='vault'] .sv-joki-card-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 2px; min-width: 0; } [data-theme='vault'] .sv-joki-card-from { flex-basis: 100%; font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-card-price strong { font-family: var(--sv-mono); font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-card-unit { font-size: 13px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-card-before { font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-card-go { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); color: var(--sv-ink); transition: background-color .2s, color .2s, border-color .2s; } [data-theme='vault'] .sv-joki-card-go svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-joki-card:hover .sv-joki-card-go { background: var(--primary); border-color: var(--primary); color: var(--sv-on-primary); } /* Kind chip (Eceran / Paketan / Mabar) */ [data-theme='vault'] .sv-joki-kind { background: rgb(8 10 14 / 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } [data-theme='vault'] .sv-joki-kind[data-kind='eceran'] { color: var(--sv-signal); border-color: color-mix(in oklab, var(--sv-signal) 45%, transparent); } [data-theme='vault'] .sv-joki-kind[data-kind='paketan'] { color: var(--sv-primary-ink); border-color: var(--sv-primary-line); } [data-theme='vault'] .sv-joki-kind[data-kind='main-bareng'] { color: var(--sv-info); border-color: color-mix(in oklab, var(--sv-info) 45%, transparent); } /* Section rail + list grid */ [data-theme='vault'] .sv-joki-rail, [data-theme='vault'] .sv-joki-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } [data-theme='vault'] .sv-joki-rail > li, [data-theme='vault'] .sv-joki-grid > li { display: flex; min-width: 0; } [data-theme='vault'] .sv-joki-rail > li > *, [data-theme='vault'] .sv-joki-grid > li > * { flex: 1; min-width: 0; } /* ───────── Joki list page ───────── */ [data-theme='vault'] .sv-joki-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(32px, 4.5vw, 48px); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); } [data-theme='vault'] .sv-joki-flow-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 18px 44px 18px 18px; } [data-theme='vault'] .sv-joki-flow-item + .sv-joki-flow-item { border-left: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-flow-num { flex-shrink: 0; padding-top: 2px; font-family: var(--sv-mono); font-size: 13px; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-flow-num::before { content: '0'; } [data-theme='vault'] .sv-joki-flow-num::after { content: ' /'; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-flow-icon { position: absolute; top: 20px; right: 16px; width: 17px; height: 17px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-flow-title { font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-flow-text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(32px, 4.5vw, 48px); } [data-theme='vault'] .sv-joki-trust-item { display: flex; gap: 14px; padding: 18px; border-radius: var(--sv-radius); background: var(--sv-surface); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-trust-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-trust-icon svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-joki-trust-title { font-size: 15px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-trust-text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } /* ───────── Joki detail: hero ───────── */ [data-theme='vault'] .sv-joki-hero { position: relative; margin-top: 12px; } [data-theme='vault'] .sv-joki-hero-banner { position: relative; width: 100%; aspect-ratio: 4 / 1; min-height: 240px; border-radius: var(--sv-radius-lg); overflow: hidden; isolation: isolate; background: var(--sv-rank-deep); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-hero-backdrop { z-index: -3; object-fit: cover; filter: blur(26px) saturate(1.2); transform: scale(1.25); opacity: 0.6; } [data-theme='vault'] .sv-joki-hero-banner::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #fff; opacity: 0.08; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M0%20.5H48M.5%200V48%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to left, #000, transparent 70%); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M0%20.5H48M.5%200V48%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to left, #000, transparent 70%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 32px 32px, 100% 100%; mask-size: 32px 32px, 100% 100%; } [data-theme='vault'] .sv-joki-hero-banner::after { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(45% 110% at 84% 34%, color-mix(in oklab, var(--sv-rank-a) 40%, transparent), transparent 70%), linear-gradient(100deg, color-mix(in oklab, var(--sv-bg) 92%, transparent) 0%, color-mix(in oklab, var(--sv-rank-deep) 70%, transparent) 55%, color-mix(in oklab, var(--sv-rank-b) 30%, transparent) 100%); } [data-theme='vault'] .sv-joki-hero-emblem { position: absolute; right: clamp(24px, 9%, 120px); top: 9%; width: clamp(96px, 13vw, 164px); height: auto; } [data-theme='vault'] .sv-joki-hero-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px; margin: -84px clamp(12px, 2.5vw, 28px) 0; padding: 22px 26px; background: var(--sv-sheen), color-mix(in oklab, var(--sv-surface) 95%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-edge), var(--sv-shadow-lg); } [data-theme='vault'] .sv-joki-hero-art { width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--sv-radius); overflow: hidden; border: 1px solid var(--sv-line-strong); outline: 4px solid var(--sv-bg); background: var(--sv-surface-2); } [data-theme='vault'] .sv-joki-hero-art img { width: 100%; height: 100%; object-fit: cover; } [data-theme='vault'] .sv-joki-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-hero-tier { display: inline-flex; align-items: center; gap: 5px; color: var(--sv-rank-ink); } [data-theme='vault'] .sv-joki-hero-title { margin-top: 4px; font-size: clamp(24px, 3vw, 34px); line-height: 1.12; font-weight: 650; letter-spacing: -0.035em; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-hero-summary { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } [data-theme='vault'] .sv-joki-hero-price { display: grid; justify-items: end; align-content: center; gap: 3px; padding-left: 22px; border-left: 1px dashed var(--sv-line-strong); text-align: right; white-space: nowrap; } [data-theme='vault'] .sv-joki-hero-price-label { font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-hero-price strong { font-family: var(--sv-mono); font-size: 28px; line-height: 1.1; font-weight: 600; color: var(--sv-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.04em; } [data-theme='vault'] .sv-joki-hero-price-unit { font-size: 13.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-hero-price-before { font-family: var(--sv-mono); font-size: 12.5px; color: var(--sv-ink-3); } /* ───────── Joki detail: layout + side cards ───────── */ [data-theme='vault'] .sv-joki-layout { display: grid; gap: 16px; margin-top: 24px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "guide" "form" "terms"; } [data-theme='vault'] .sv-joki-guide { grid-area: guide; padding: 20px 22px; } [data-theme='vault'] .sv-joki-terms { grid-area: terms; display: grid; gap: 16px; align-content: start; } [data-theme='vault'] .sv-joki-form { grid-area: form; display: grid; gap: 16px; min-width: 0; align-content: start; } [data-theme='vault'] .sv-joki-side-title { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sv-line); font-size: 16px; font-weight: 600; color: var(--sv-ink); } /* Guide head carries the hairline (title + mobile "N langkah" toggle) */ [data-theme='vault'] .sv-joki-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-guide-head .sv-joki-side-title { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } [data-theme='vault'] .sv-joki-guide-head:has(+ .sv-collapse-body:not([data-open])) { padding-bottom: 0; border-bottom: 0; } [data-theme='vault'] .sv-joki-guide-list { margin-top: 14px; } @media (min-width: 1024px) { [data-theme='vault'] .sv-joki-guide-head { min-height: 0; } [data-theme='vault'] .sv-joki-guide-head:has(+ .sv-collapse-body:not([data-open])) { padding-bottom: 12px; border-bottom: 1px solid var(--sv-line); } } [data-theme='vault'] .sv-joki-guide-list li { position: relative; display: flex; gap: 12px; padding-bottom: 16px; } [data-theme='vault'] .sv-joki-guide-list li:last-child { padding-bottom: 0; } [data-theme='vault'] .sv-joki-guide-list li:not(:last-child)::before { content: ''; position: absolute; left: 14.5px; top: 30px; bottom: 4px; width: 1px; background: repeating-linear-gradient(to bottom, var(--sv-line-strong) 0 3px, transparent 3px 6px); } [data-theme='vault'] .sv-joki-guide-num { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 26px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line-strong); background: var(--sv-well); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 12px; } [data-theme='vault'] .sv-joki-guide-num::before { content: '0'; } [data-theme='vault'] .sv-joki-guide-title { padding-top: 3px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-guide-text { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-rules { padding: 20px 22px; } [data-theme='vault'] .sv-joki-rules-list { display: grid; gap: 11px; } [data-theme='vault'] .sv-joki-rules-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-rules-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--sv-ok); } [data-theme='vault'] .sv-joki-security { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--sv-radius); background: var(--sv-ok-soft); border: 1px solid color-mix(in oklab, var(--sv-ok) 30%, transparent); } [data-theme='vault'] .sv-joki-security-icon { display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--sv-radius-sm); border: 1px solid color-mix(in oklab, var(--sv-ok) 40%, transparent); color: var(--sv-ok); } [data-theme='vault'] .sv-joki-security-icon svg { width: 19px; height: 19px; } [data-theme='vault'] .sv-joki-security-title { font-size: 15px; font-weight: 600; color: var(--sv-ok); } [data-theme='vault'] .sv-joki-security-text { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); } /* ───────── Joki detail: form ───────── */ [data-theme='vault'] .sv-joki-page .sv-step { scroll-margin-top: 96px; } [data-theme='vault'] .sv-joki-page .sv-step[data-invalid='true'] { border-color: var(--sv-err); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sv-err) 20%, transparent); } [data-theme='vault'] .sv-joki-page .sv-step:focus-visible { outline: 2px solid var(--sv-primary-ink); outline-offset: 2px; } [data-theme='vault'] .sv-joki-page .sv-input[aria-invalid='true'] { border-color: var(--sv-err); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sv-err) 20%, transparent); } [data-theme='vault'] .sv-joki-fields { display: grid; gap: 16px; } [data-theme='vault'] .sv-joki-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='vault'] .sv-joki-optional { margin-left: 4px; font-family: var(--font-theme-body), system-ui, sans-serif; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-textarea { height: auto; min-height: 92px; padding: 12px 14px; line-height: 1.5; resize: vertical; } [data-theme='vault'] .sv-joki-segmented { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line-strong); } [data-theme='vault'] .sv-joki-segment { min-height: 42px; padding: 0 6px; font-size: 14px; font-weight: 500; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='vault'] .sv-joki-segment + .sv-joki-segment { border-left: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-segment:hover { color: var(--sv-ink); background: var(--sv-surface-2); } [data-theme='vault'] .sv-joki-segment[aria-pressed='true'] { background: var(--sv-primary-soft); color: var(--sv-primary-ink); box-shadow: inset 0 -2px 0 var(--primary); } [data-theme='vault'] .sv-joki-password { position: relative; } [data-theme='vault'] .sv-joki-password .sv-input { padding-right: 52px; } [data-theme='vault'] .sv-joki-reveal { position: absolute; top: 50%; right: 1px; display: grid; place-items: center; width: 44px; height: 44px; transform: translateY(-50%); color: var(--sv-ink-2); cursor: pointer; } [data-theme='vault'] .sv-joki-reveal:hover, [data-theme='vault'] .sv-joki-reveal[aria-pressed='true'] { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-reveal svg { width: 19px; height: 19px; } [data-theme='vault'] .sv-joki-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); font-size: 15px; line-height: 1.5; } [data-theme='vault'] .sv-joki-callout svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; } [data-theme='vault'] .sv-joki-callout strong { font-weight: 600; } [data-theme='vault'] .sv-joki-callout[data-tone='warn'] { background: var(--sv-warn-soft); color: var(--sv-ink-2); border: 1px solid color-mix(in oklab, var(--sv-warn) 32%, transparent); } [data-theme='vault'] .sv-joki-callout[data-tone='warn'] :is(strong, svg) { color: var(--sv-warn); } [data-theme='vault'] .sv-joki-callout[data-tone='info'] { background: var(--sv-primary-soft); color: var(--sv-ink-2); border: 1px solid var(--sv-primary-line); } [data-theme='vault'] .sv-joki-callout[data-tone='info'] :is(strong, svg) { color: var(--sv-primary-ink); } /* Option groups */ [data-theme='vault'] .sv-joki-group + .sv-joki-group { margin-top: 22px; } [data-theme='vault'] .sv-joki-group-label { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-group-label::after { content: ''; flex: 1; height: 1px; background: var(--sv-line); } [data-theme='vault'] .sv-joki-options { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='vault'] .sv-joki-option { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 74px; padding: 12px 14px 12px 12px; border-radius: var(--sv-radius); border: 1px solid var(--sv-line); background: var(--sv-surface-2); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-joki-option:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-3); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-joki-option[aria-pressed='true'] { border-color: var(--primary); background: var(--sv-primary-soft); box-shadow: 0 0 24px -10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-joki-option[aria-pressed='true']::after { content: ''; position: absolute; inset: -5px; pointer-events: none; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] .sv-joki-option-emblem { width: 44px; height: 44px; } [data-theme='vault'] .sv-joki-option-text { min-width: 0; } [data-theme='vault'] .sv-joki-option-title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-option-sub { display: block; margin-top: 3px; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--sv-rank-ink); } [data-theme='vault'] .sv-joki-option-price { display: grid; justify-items: end; gap: 4px; text-align: right; } [data-theme='vault'] .sv-joki-option-price strong { font-family: var(--sv-mono); font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-option[aria-pressed='true'] .sv-joki-option-price strong { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-option-before { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-3); white-space: nowrap; } [data-theme='vault'] .sv-joki-off { padding: 2px 5px; border-radius: var(--sv-radius-xs); background: var(--sv-hot); color: var(--sv-hot-ink); font-family: var(--sv-mono); font-size: 11px; font-weight: 600; } [data-theme='vault'] .sv-joki-option-check { position: absolute; top: -1px; right: -1px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 0 var(--sv-radius) 0 var(--sv-radius-xs); background: var(--primary); color: var(--sv-on-primary); opacity: 0; transition: opacity .15s; } [data-theme='vault'] .sv-joki-option-check svg { width: 12px; height: 12px; stroke-width: 3; } [data-theme='vault'] .sv-joki-option[aria-pressed='true'] .sv-joki-option-check { opacity: 1; } /* Quantity */ [data-theme='vault'] .sv-joki-qty { display: grid; gap: 14px; } [data-theme='vault'] .sv-joki-qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } [data-theme='vault'] .sv-joki-stepper { display: inline-flex; align-items: center; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-sm); background: var(--sv-well); overflow: hidden; } [data-theme='vault'] .sv-joki-stepper button { display: grid; place-items: center; width: 46px; height: 46px; color: var(--sv-ink); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='vault'] .sv-joki-stepper button svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-joki-stepper button:hover:not(:disabled) { background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-stepper button:disabled { color: var(--sv-ink-3); opacity: 0.5; cursor: not-allowed; } [data-theme='vault'] .sv-joki-stepper input { width: 64px; height: 46px; border: 0; border-inline: 1px solid var(--sv-line); background: transparent; text-align: center; font-family: var(--sv-mono); font-size: 17px; color: var(--sv-ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } [data-theme='vault'] .sv-joki-stepper input::-webkit-inner-spin-button, [data-theme='vault'] .sv-joki-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } [data-theme='vault'] .sv-joki-qty-unit { font-size: 14.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-qty-subtotal { margin-left: auto; font-family: var(--sv-mono); font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-quick { display: flex; flex-wrap: wrap; gap: 6px; } [data-theme='vault'] .sv-joki-quick-btn { min-height: 40px; padding: 0 14px; border-radius: var(--sv-radius-sm); border: 1px dashed var(--sv-line-strong); background: transparent; font-family: var(--sv-mono); font-size: 12.5px; color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; } [data-theme='vault'] .sv-joki-quick-btn:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-quick-btn[aria-pressed='true'] { border-style: solid; border-color: var(--primary); background: var(--sv-primary-soft); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-joki-qty-fixed { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); font-size: 14.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-qty-fixed svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--sv-primary-ink); } /* Payment */ [data-theme='vault'] .sv-joki-pay-list { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='vault'] .sv-joki-pay { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px 10px 10px; border-radius: var(--sv-radius); border: 1px solid var(--sv-line); background: var(--sv-surface-2); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-joki-pay:hover:not(:disabled) { border-color: var(--sv-primary-line); background: var(--sv-surface-3); box-shadow: var(--sv-hover-glow); } [data-theme='vault'] .sv-joki-pay[aria-pressed='true'] { border-color: var(--primary); background: var(--sv-primary-soft); box-shadow: 0 0 24px -10px color-mix(in oklab, var(--primary) 70%, transparent); } [data-theme='vault'] .sv-joki-pay[aria-pressed='true']::after { content: ''; position: absolute; inset: -5px; pointer-events: none; background: linear-gradient(var(--primary) 0 0) left top / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 10px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 10px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 10px no-repeat; } [data-theme='vault'] .sv-joki-pay:disabled { cursor: not-allowed; background: transparent; border-style: dashed; } [data-theme='vault'] .sv-joki-pay:disabled .sv-joki-pay-logo { opacity: 0.5; filter: grayscale(1); } [data-theme='vault'] .sv-joki-pay-logo { display: grid; place-items: center; width: 56px; height: 38px; border-radius: var(--sv-radius-sm); background: var(--sv-plate); color: var(--sv-bg); } [data-theme='vault'] .sv-joki-pay-logo svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-joki-pay-img { width: 44px; height: 26px; object-fit: contain; } [data-theme='vault'] .sv-joki-pay-text { min-width: 0; } [data-theme='vault'] .sv-joki-pay-name { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-pay-fee { display: block; margin-top: 2px; font-size: 13px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-pay:disabled .sv-joki-pay-fee { color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-pay-total { font-family: var(--sv-mono); font-size: 14.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-pay[aria-pressed='true'] .sv-joki-pay-total { color: var(--sv-primary-ink); } /* Contact */ [data-theme='vault'] .sv-joki-phone { display: flex; align-items: stretch; } [data-theme='vault'] .sv-joki-phone-prefix { display: grid; place-items: center; padding: 0 14px; border: 1px solid var(--sv-line-strong); border-right: 0; border-radius: var(--sv-radius-sm) 0 0 var(--sv-radius-sm); background: var(--sv-surface-2); font-family: var(--sv-mono); font-size: 14.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-phone .sv-input { border-radius: 0 var(--sv-radius-sm) var(--sv-radius-sm) 0; } /* Summary */ [data-theme='vault'] .sv-joki-summary { position: relative; padding: 22px; border-radius: var(--sv-radius-lg); } [data-theme='vault'] .sv-joki-summary-title { margin-bottom: 8px; font-size: 17px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-summary-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--sv-line); font-size: 14.5px; } [data-theme='vault'] .sv-joki-summary-list dt { flex-shrink: 0; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-summary-list dd { min-width: 0; text-align: right; font-weight: 500; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-summary-option { display: inline-flex; align-items: center; gap: 6px; } [data-theme='vault'] .sv-joki-summary-empty { color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; } [data-theme='vault'] .sv-joki-summary-total span { font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-summary-pending { font-family: var(--sv-mono); font-size: 13px; color: var(--sv-ink-3); letter-spacing: 0; text-transform: none; } [data-theme='vault'] .sv-joki-summary-total strong { font-family: var(--sv-mono); font-size: 26px; font-weight: 600; letter-spacing: -0.04em; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-summary-missing { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--sv-radius-sm); background: var(--sv-warn-soft); border: 1px solid color-mix(in oklab, var(--sv-warn) 30%, transparent); color: var(--sv-ink-2); font-size: 14px; line-height: 1.5; } [data-theme='vault'] .sv-joki-submit { min-height: 52px; font-size: 16px; } [data-theme='vault'] .sv-joki-summary-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-joki-summary-note svg { width: 13px; height: 13px; } /* Mobile sticky total bar */ [data-theme='vault'] .sv-joki-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: 10px var(--sv-gutter) calc(10px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--sv-bg) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--sv-line-strong); box-shadow: 0 -20px 40px -24px rgb(0 0 0 / 0.9); transition: transform .25s ease, visibility .25s; } [data-theme='vault'] .sv-joki-bar::before { content: ''; position: absolute; inset: -1px 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--primary), transparent); } [data-theme='vault'] .sv-joki-bar[data-hidden='true'] { transform: translateY(110%); visibility: hidden; } [data-theme='vault'] .sv-joki-bar-total { display: grid; flex: 1; min-width: 0; } [data-theme='vault'] .sv-joki-bar-total span { font-size: 13px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-bar-total strong { font-family: var(--sv-mono); font-size: 18px; font-weight: 600; letter-spacing: -0.03em; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-bar .sv-btn { flex-shrink: 0; padding: 0 22px; } /* "Sebelum order joki" dialog (portalled; carries data-theme itself) */ .sv-joki-dialog[data-theme='vault'] { max-width: min(480px, calc(100% - 24px)); padding: 0; gap: 0; border-radius: var(--sv-radius-lg); border: 1px solid var(--sv-line-strong); background: var(--sv-surface); box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.95); overflow: hidden; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-dialog-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 22px 22px 16px; } [data-theme='vault'] .sv-joki-dialog-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--sv-radius-sm); border: 1px solid color-mix(in oklab, var(--sv-warn) 40%, transparent); background: var(--sv-warn-soft); color: var(--sv-warn); } [data-theme='vault'] .sv-joki-dialog-icon svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-joki-dialog-title { font-size: 18px; line-height: 1.25; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-dialog-desc { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-dialog-close { display: grid; place-items: center; width: 40px; height: 40px; margin: -8px -8px 0 0; border-radius: var(--sv-radius-sm); color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='vault'] .sv-joki-dialog-close:hover { background: var(--sv-surface-2); color: var(--sv-ink); } [data-theme='vault'] .sv-joki-dialog-close svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-joki-checklist { display: grid; gap: 6px; padding: 0 22px; } [data-theme='vault'] .sv-joki-check { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; gap: 12px; padding: 12px 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line); background: var(--sv-well); cursor: pointer; transition: border-color .15s, background-color .15s; } [data-theme='vault'] .sv-joki-check:hover { border-color: var(--sv-line-strong); } [data-theme='vault'] .sv-joki-check input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } [data-theme='vault'] .sv-joki-check:has(input:focus-visible) { outline: 2px solid var(--sv-primary-ink); outline-offset: 2px; } [data-theme='vault'] .sv-joki-check-box { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line-strong); background: var(--sv-surface); color: transparent; transition: background-color .15s, border-color .15s, color .15s; } [data-theme='vault'] .sv-joki-check-box svg { width: 13px; height: 13px; stroke-width: 3; } [data-theme='vault'] .sv-joki-check-text { font-size: 14.5px; line-height: 1.5; color: var(--sv-ink); } [data-theme='vault'] .sv-joki-check[data-checked='true'] { border-color: var(--sv-primary-line); background: var(--sv-primary-soft); } [data-theme='vault'] .sv-joki-check[data-checked='true'] .sv-joki-check-box { background: var(--primary); border-color: var(--primary); color: var(--sv-on-primary); } [data-theme='vault'] .sv-joki-dialog-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px 22px 0; padding: 12px 14px; border-radius: var(--sv-radius-sm); background: var(--sv-surface-2); border: 1px solid var(--sv-line); font-size: 14px; line-height: 1.45; color: var(--sv-ink-2); } [data-theme='vault'] .sv-joki-dialog-summary strong { flex-shrink: 0; font-family: var(--sv-mono); font-size: 16px; font-weight: 600; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-joki-dialog-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 16px 22px 22px; } [data-theme='vault'] .sv-joki-dialog-actions .sv-btn--primary:disabled { background: transparent; color: var(--sv-ink-2); border: 1px dashed var(--sv-line-strong); } /* ───────── Article detail ───────── */ [data-theme='vault'] .sv-article { margin-top: 18px; } /* One reading column: breadcrumb, header, image, body and footer share the same left/right edges. */ [data-theme='vault'] .sv-article-page { --sv-article-w: 720px; } [data-theme='vault'] .sv-article-page > .sv-page-crumbs, [data-theme='vault'] .sv-article-head, [data-theme='vault'] .sv-article-figure, [data-theme='vault'] .sv-article-body, [data-theme='vault'] .sv-article-foot { box-sizing: border-box; width: 100%; max-width: var(--sv-article-w); margin-inline: auto; } [data-theme='vault'] .sv-article-head, [data-theme='vault'] .sv-article-body, [data-theme='vault'] .sv-article-foot { font-size: 17px; } [data-theme='vault'] .sv-article-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } [data-theme='vault'] .sv-article-cat { position: relative; min-height: 28px; transition: background-color .15s; } [data-theme='vault'] .sv-article-cat::after { content: ''; position: absolute; inset: -8px -2px; } [data-theme='vault'] .sv-article-cat:hover { background: var(--sv-primary-tint); } [data-theme='vault'] .sv-article-game { font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-article-title { margin-top: 16px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.1; font-weight: 650; letter-spacing: -0.035em; color: var(--sv-ink); text-wrap: balance; } [data-theme='vault'] .sv-article-lead { margin-top: 14px; font-size: clamp(16.5px, 1.6vw, 18.5px); line-height: 1.6; color: var(--sv-ink-2); } [data-theme='vault'] .sv-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sv-line); font-family: var(--sv-mono); font-size: 12.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-article-author { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-theme-body), system-ui, sans-serif; font-size: 14px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-article-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); background: var(--sv-primary-soft); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 12px; } [data-theme='vault'] .sv-article-meta-item { display: inline-flex; align-items: center; gap: 6px; } [data-theme='vault'] .sv-article-meta-item svg { width: 14px; height: 14px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-article-figure { position: relative; aspect-ratio: 16 / 9; margin: 28px auto 0; border-radius: var(--sv-radius-lg); overflow: hidden; background: var(--sv-surface-2); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-article-figure::after { content: ''; position: absolute; inset: 10px; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0.7) 0 0) left top / 14px 1.5px no-repeat, linear-gradient(rgb(255 255 255 / 0.7) 0 0) left top / 1.5px 14px no-repeat, linear-gradient(rgb(255 255 255 / 0.7) 0 0) right bottom / 14px 1.5px no-repeat, linear-gradient(rgb(255 255 255 / 0.7) 0 0) right bottom / 1.5px 14px no-repeat; } [data-theme='vault'] .sv-article-img { object-fit: cover; } [data-theme='vault'] .sv-article-body { margin-top: 34px; line-height: 1.75; color: color-mix(in oklab, var(--sv-ink) 88%, var(--sv-ink-2)); } [data-theme='vault'] .sv-article-body p + p { margin-top: 1.15em; } [data-theme='vault'] .sv-article-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-article-foot-note { font-size: 14px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-article-related { margin-top: clamp(48px, 7vw, 80px); } /* ───────── Responsive ───────── */ @media (min-width: 1024px) { [data-theme='vault'] .sv-joki-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr; grid-template-areas: "guide form" "terms form"; gap: 24px; align-items: start; } [data-theme='vault'] .sv-joki-terms { position: sticky; top: 96px; } [data-theme='vault'] .sv-joki-bar { display: none; } } @media (max-width: 1023px) { [data-theme='vault'] .sv-article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='vault'] .sv-article-grid[data-context='section'] > :nth-child(3), [data-theme='vault'] .sv-article-grid[data-context='related'] > :nth-child(3) { display: none; } [data-theme='vault'] .sv-joki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='vault'] .sv-joki-rail { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(300px, 46%); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--sv-gutter) * -1); padding: 4px var(--sv-gutter) 12px; scroll-padding-inline: var(--sv-gutter); } [data-theme='vault'] .sv-joki-rail::-webkit-scrollbar { display: none; } [data-theme='vault'] .sv-joki-rail > li { scroll-snap-align: start; } [data-theme='vault'] .sv-joki-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } [data-theme='vault'] .sv-joki-flow-item:nth-child(3) { border-left: 0; } [data-theme='vault'] .sv-joki-flow-item:nth-child(n + 3) { border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-page { padding-bottom: calc(104px + env(safe-area-inset-bottom)); } } @media (max-width: 767px) { [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-link { display: flex; } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-media { border-right: 0; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-article-card[data-layout='featured'] .sv-article-card-body { padding: 18px; gap: 10px; } [data-theme='vault'] .sv-joki-trust { grid-template-columns: 1fr; } [data-theme='vault'] .sv-joki-hero-banner { aspect-ratio: 2 / 1; min-height: 0; } [data-theme='vault'] .sv-joki-hero-emblem { top: 10%; right: 18px; width: clamp(84px, 26vw, 120px); } [data-theme='vault'] .sv-joki-hero-card { grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; margin: -52px 8px 0; padding: 16px; } [data-theme='vault'] .sv-joki-hero-art { width: 64px; height: 64px; align-self: start; outline-width: 3px; } [data-theme='vault'] .sv-joki-hero-title { font-size: 23px; } [data-theme='vault'] .sv-joki-hero-chips { grid-column: 1 / -1; } [data-theme='vault'] .sv-joki-hero-info { display: contents; } [data-theme='vault'] .sv-joki-hero-info > :not(.sv-joki-hero-chips) { grid-column: 2; } [data-theme='vault'] .sv-joki-hero-meta { grid-row: 1; align-self: end; flex-direction: column; align-items: flex-start; gap: 2px; } [data-theme='vault'] .sv-joki-hero-meta > [aria-hidden='true'] { display: none; } [data-theme='vault'] .sv-joki-hero-title { grid-row: 2; margin-top: 0; } [data-theme='vault'] .sv-joki-hero-art { grid-row: 1 / span 2; } [data-theme='vault'] .sv-joki-hero-summary { grid-column: 1 / -1 !important; margin-top: 0; } [data-theme='vault'] .sv-joki-hero-price { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 8px; padding: 14px 0 0; border-left: 0; border-top: 1px dashed var(--sv-line-strong); text-align: left; } [data-theme='vault'] .sv-joki-hero-price strong { font-size: 22px; } } @media (max-width: 639px) { [data-theme='vault'] .sv-page-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme='vault'] .sv-page-filters { margin-inline: calc(var(--sv-gutter) * -1); padding-inline: var(--sv-gutter); } [data-theme='vault'] .sv-page-filter { height: 44px; } [data-theme='vault'] .sv-article-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; } [data-theme='vault'] .sv-article-grid[data-context='page'] { gap: 14px; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :nth-child(3), [data-theme='vault'] .sv-article-grid[data-context='related'] > :nth-child(3) { display: block; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-link, [data-theme='vault'] .sv-article-grid[data-context='related'] > * .sv-article-card-link { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: stretch; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-media, [data-theme='vault'] .sv-article-grid[data-context='related'] > * .sv-article-card-media { aspect-ratio: auto; min-height: 104px; height: 100%; border-bottom: 0; border-right: 1px solid var(--sv-line); } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-body, [data-theme='vault'] .sv-article-grid[data-context='related'] > * .sv-article-card-body { gap: 6px; padding: 12px 14px; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) :is(.sv-article-card-excerpt, .sv-article-card-game), [data-theme='vault'] .sv-article-grid[data-context='related'] > * :is(.sv-article-card-excerpt, .sv-article-card-game) { display: none; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-title, [data-theme='vault'] .sv-article-grid[data-context='related'] > * .sv-article-card-title { font-size: 15px; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-article-card-meta, [data-theme='vault'] .sv-article-grid[data-context='related'] > * .sv-article-card-meta { padding-top: 6px; } [data-theme='vault'] .sv-article-grid[data-context='section'] > :not(:first-child) .sv-chip, [data-theme='vault'] .sv-article-grid[data-context='related'] > * .sv-chip { height: 22px; padding: 0 6px; font-size: 11px; } [data-theme='vault'] .sv-joki-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } [data-theme='vault'] .sv-joki-rail { grid-auto-columns: 84%; gap: 10px; } /* How it works: a swipeable strip of compact steps, so the packages show sooner. */ [data-theme='vault'] .sv-joki-flow { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 74%; gap: 8px; margin: 0 calc(var(--sv-gutter) * -1) 28px; padding: 2px var(--sv-gutter) 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--sv-gutter); scrollbar-width: none; background: none; border: 0; border-radius: 0; } [data-theme='vault'] .sv-joki-flow::-webkit-scrollbar { display: none; } [data-theme='vault'] .sv-joki-flow > .sv-joki-flow-item { scroll-snap-align: start; padding: 14px 40px 14px 14px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); } [data-theme='vault'] .sv-joki-flow > .sv-joki-flow-item + .sv-joki-flow-item { border-left: 1px solid var(--sv-line); border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-joki-flow-icon { top: 16px; right: 14px; } [data-theme='vault'] .sv-joki-layout { margin-top: 20px; } [data-theme='vault'] .sv-page-head { margin: 10px 0 20px; } [data-theme='vault'] .sv-joki-row, [data-theme='vault'] .sv-joki-options, [data-theme='vault'] .sv-joki-pay-list { grid-template-columns: minmax(0, 1fr); } [data-theme='vault'] .sv-joki-option { grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "emblem text" "emblem price"; row-gap: 6px; column-gap: 12px; min-height: 0; padding: 12px 14px 12px 12px; } [data-theme='vault'] .sv-joki-option-emblem { grid-area: emblem; width: 40px; height: 40px; align-self: center; } [data-theme='vault'] .sv-joki-option-text { grid-area: text; } [data-theme='vault'] .sv-joki-option-price { grid-area: price; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; text-align: left; } [data-theme='vault'] .sv-joki-aside-hint { display: none; } [data-theme='vault'] .sv-joki-row--pair { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; } [data-theme='vault'] .sv-joki-segment { min-height: 44px; font-size: 13.5px; padding: 0 2px; } [data-theme='vault'] .sv-joki-quick-btn { min-height: 44px; } [data-theme='vault'] .sv-joki-guide, [data-theme='vault'] .sv-joki-rules { padding: 18px 16px; } [data-theme='vault'] .sv-joki-summary { padding: 18px 16px; } [data-theme='vault'] .sv-article-figure { margin-top: 22px; } [data-theme='vault'] .sv-article-body { margin-top: 24px; font-size: 16.5px; line-height: 1.7; } } /* ───────── Segmented tabs (shared) ───────── */ [data-theme='vault'] .sv-segtabs { display: inline-flex; gap: 0; max-width: 100%; padding: 0; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line-strong); overflow-x: auto; scrollbar-width: none; } [data-theme='vault'] .sv-segtabs::-webkit-scrollbar { display: none; } [data-theme='vault'] .sv-segtab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-height: 42px; padding: 0 16px; border: 0; border-radius: 0; background: transparent; font-size: 14px; font-weight: 500; color: var(--sv-ink-2); white-space: nowrap; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; } [data-theme='vault'] .sv-segtab + .sv-segtab { border-left: 1px solid var(--sv-line); } [data-theme='vault'] .sv-segtab:hover { color: var(--sv-ink); background: var(--sv-surface-2); } [data-theme='vault'] .sv-segtab[aria-selected='true'] { background: var(--sv-primary-soft); color: var(--sv-ink); box-shadow: inset 0 -2px 0 var(--primary); } [data-theme='vault'] .sv-segtab:focus-visible { outline-offset: -2px; } [data-theme='vault'] .sv-segtab-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 5px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line); font-family: var(--sv-mono); font-size: 11px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-segtab[aria-selected='true'] .sv-segtab-count { border-color: var(--sv-primary-line); color: var(--sv-primary-ink); } /* ───────── Daftar Harga ───────── */ [data-theme='vault'] .sv-pricelist-head { margin-bottom: 22px; } [data-theme='vault'] .sv-pricelist-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } [data-theme='vault'] .sv-pricelist-live { width: 6px; height: 6px; background: var(--sv-ok); animation: sv-pricelist-pulse 2.2s ease-out infinite; } @keyframes sv-pricelist-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, oklch(0.82 0.17 150) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } } [data-theme='vault'] .sv-pricelist-layout { display: grid; gap: 16px; align-items: start; } [data-theme='vault'] .sv-pricelist-aside, [data-theme='vault'] .sv-pricelist-main { min-width: 0; } [data-theme='vault'] .sv-pricelist-main { overflow: hidden; scroll-margin-top: 124px; } /* Game picker */ [data-theme='vault'] .sv-pricelist-picker { display: flex; flex-direction: column; min-height: 0; padding: 18px; } [data-theme='vault'] .sv-pricelist-picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } [data-theme='vault'] .sv-pricelist-picker-title { font-size: 16px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-pricelist-picker-count { font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-3); white-space: nowrap; } [data-theme='vault'] .sv-pricelist-search, [data-theme='vault'] .sv-pricelist-filter { position: relative; } [data-theme='vault'] .sv-pricelist-search { margin-bottom: 14px; } [data-theme='vault'] .sv-pricelist-search-icon, [data-theme='vault'] .sv-pricelist-filter-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='vault'] .sv-pricelist-search-input, [data-theme='vault'] .sv-pricelist-filter-input { padding: 0 44px 0 40px; } [data-theme='vault'] .sv-pricelist-search-input::-webkit-search-cancel-button, [data-theme='vault'] .sv-pricelist-filter-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } [data-theme='vault'] .sv-pricelist-search-clear { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--sv-ink-2); cursor: pointer; } [data-theme='vault'] .sv-pricelist-search-clear:hover { color: var(--sv-ink); } [data-theme='vault'] .sv-pricelist-search-clear svg { width: 18px; height: 18px; padding: 2px; border-radius: var(--sv-radius-xs); background: var(--sv-surface-3); } [data-theme='vault'] .sv-pricelist-games { margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-pricelist-games[data-layout='rail'] { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -18px; padding: 6px 18px 4px; scroll-padding-inline: 18px; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 28px), transparent 100%); } [data-theme='vault'] .sv-pricelist-games[data-layout='rail']::-webkit-scrollbar { display: none; } [data-theme='vault'] .sv-pricelist-games[data-layout='rail'] > li { flex: 0 0 84px; scroll-snap-align: start; } [data-theme='vault'] .sv-pricelist-games[data-layout='grid'] { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; padding-top: 6px; } [data-theme='vault'] .sv-pricelist-game { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%; height: 100%; padding: 4px 4px 6px; border: 1px solid transparent; border-radius: var(--sv-radius-sm); background: transparent; text-align: center; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } [data-theme='vault'] .sv-pricelist-game:hover { border-color: var(--sv-primary-line); background: var(--sv-surface-2); color: var(--sv-ink); } [data-theme='vault'] .sv-pricelist-game[aria-pressed='true'] { background: var(--sv-primary-soft); border-color: var(--primary); color: var(--sv-ink); } [data-theme='vault'] .sv-pricelist-game[aria-pressed='true']::after { content: ''; position: absolute; inset: -4px; pointer-events: none; background: linear-gradient(var(--primary) 0 0) left top / 8px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) left top / 1.5px 8px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 8px 1.5px no-repeat, linear-gradient(var(--primary) 0 0) right bottom / 1.5px 8px no-repeat; } [data-theme='vault'] .sv-pricelist-game-media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-surface-2); box-shadow: inset 0 0 0 1px var(--sv-line); } [data-theme='vault'] .sv-pricelist-game-media img { object-fit: cover; transition: transform .35s cubic-bezier(.2, .7, .2, 1); } [data-theme='vault'] .sv-pricelist-game:hover .sv-pricelist-game-media img { transform: scale(1.05); } [data-theme='vault'] .sv-pricelist-game-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: var(--sv-primary-soft); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 18px; } [data-theme='vault'] .sv-pricelist-game-check { position: absolute; top: 0; right: 0; z-index: 1; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 0 calc(var(--sv-radius-sm) - 1px) 0 var(--sv-radius-xs); background: var(--primary); color: var(--sv-on-primary); } [data-theme='vault'] .sv-pricelist-game-check svg { width: 11px; height: 11px; stroke-width: 3.2; } [data-theme='vault'] .sv-pricelist-game-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; font-size: 12.5px; font-weight: 500; line-height: 1.25; } [data-theme='vault'] .sv-pricelist-game--skeleton { cursor: default; } [data-theme='vault'] .sv-pricelist-skeleton-line { display: block; height: 10px; width: 80%; margin: 4px auto 0; } [data-theme='vault'] .sv-pricelist-picker-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; margin-top: 10px; border: 1px dashed var(--sv-line-strong); border-radius: var(--sv-radius-sm); background: transparent; font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink); cursor: pointer; transition: color .15s, border-color .15s; } [data-theme='vault'] .sv-pricelist-picker-toggle:hover { color: var(--sv-primary-ink); border-color: var(--primary); } [data-theme='vault'] .sv-pricelist-picker-toggle svg { width: 16px; height: 16px; transition: transform .2s; } [data-theme='vault'] .sv-pricelist-picker-toggle[aria-expanded='true'] svg { transform: rotate(180deg); } /* Shared empty / error states */ [data-theme='vault'] .sv-pricelist-picker-empty, [data-theme='vault'] .sv-pricelist-state, [data-theme='vault'] .sv-pricelist-table-empty { display: grid; justify-items: center; text-align: center; padding: 28px 12px; } [data-theme='vault'] .sv-pricelist-state { padding: 44px 20px; } [data-theme='vault'] .sv-pricelist-state--page { padding: 56px 24px; } [data-theme='vault'] .sv-pricelist-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 12px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-pricelist-empty-icon[data-tone='error'] { border-color: color-mix(in oklab, var(--sv-err) 45%, transparent); color: var(--sv-err); background: var(--sv-err-soft); } [data-theme='vault'] .sv-pricelist-empty-icon svg { width: 21px; height: 21px; } [data-theme='vault'] .sv-pricelist-empty-title { font-size: 16px; font-weight: 600; color: var(--sv-ink); text-wrap: balance; } [data-theme='vault'] .sv-pricelist-empty-text { margin-top: 4px; max-width: 38ch; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); text-wrap: pretty; } [data-theme='vault'] .sv-pricelist-empty-action { margin-top: 16px; } [data-theme='vault'] .sv-pricelist-empty-action svg { width: 16px; height: 16px; } /* Price panel */ [data-theme='vault'] .sv-pricelist-panel-head { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--sv-line); background: linear-gradient(to bottom, color-mix(in oklab, var(--primary) 6%, var(--sv-surface)), var(--sv-surface)); } [data-theme='vault'] .sv-pricelist-panel-logo { position: relative; display: block; width: 60px; height: 60px; border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-surface-2); box-shadow: 0 0 0 1px var(--sv-line-strong); } [data-theme='vault'] .sv-pricelist-panel-logo img { object-fit: cover; } [data-theme='vault'] .sv-pricelist-panel-heading { min-width: 0; } [data-theme='vault'] .sv-pricelist-panel-kicker { font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-pricelist-panel-title { margin-top: 2px; font-size: clamp(20px, 2.2vw, 24px); line-height: 1.2; font-weight: 650; letter-spacing: -0.025em; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='vault'] .sv-pricelist-panel-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 4px; font-size: 14px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-pricelist-panel-meta strong { font-family: var(--sv-mono); font-weight: 600; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-pricelist-panel-cta { white-space: nowrap; } [data-theme='vault'] .sv-pricelist-panel-cta svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-pricelist-panel-body { padding: 18px 22px 22px; } [data-theme='vault'] .sv-pricelist-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } [data-theme='vault'] .sv-pricelist-types { min-width: 0; } [data-theme='vault'] .sv-pricelist-type-single { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-pricelist-filter { flex: 0 1 260px; min-width: 200px; } [data-theme='vault'] .sv-pricelist-table-wrap { border: 1px solid var(--sv-line); border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-well); } [data-theme='vault'] .sv-pricelist-table { width: 100%; border-collapse: collapse; font-size: 15px; } [data-theme='vault'] .sv-pricelist-table thead th { padding: 10px 16px; text-align: left; font-family: var(--sv-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-3); background: var(--sv-surface-2); border-bottom: 1px solid var(--sv-line); white-space: nowrap; } [data-theme='vault'] .sv-pricelist-table thead .sv-pricelist-col-price { text-align: right; } [data-theme='vault'] .sv-pricelist-table .sv-pricelist-col-action { width: 1%; } [data-theme='vault'] .sv-pricelist-table tbody tr { transition: background-color .15s; } [data-theme='vault'] .sv-pricelist-table tbody tr + tr { border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-pricelist-table tbody tr:hover { background: var(--sv-surface-2); } [data-theme='vault'] .sv-pricelist-table tbody :is(th, td) { padding: 9px 16px; text-align: left; vertical-align: middle; } [data-theme='vault'] .sv-pricelist-table tbody th { font-weight: inherit; } [data-theme='vault'] .sv-pricelist-product { display: flex; align-items: center; gap: 12px; min-width: 0; } [data-theme='vault'] .sv-pricelist-product-icon { position: relative; display: block; width: 34px; height: 34px; flex-shrink: 0; border-radius: var(--sv-radius-sm); overflow: hidden; background: var(--sv-surface-2); border: 1px solid var(--sv-line); } [data-theme='vault'] .sv-pricelist-product-icon img { object-fit: contain; padding: 3px; } [data-theme='vault'] .sv-pricelist-product-icon[data-empty] { background: var(--sv-primary-soft); } [data-theme='vault'] .sv-pricelist-product-name { min-width: 0; font-weight: 500; line-height: 1.35; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='vault'] .sv-pricelist-cell-price { text-align: right !important; white-space: nowrap; } [data-theme='vault'] .sv-pricelist-price { font-family: var(--sv-mono); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sv-ink); } [data-theme='vault'] .sv-pricelist-cell-action { padding-left: 4px !important; text-align: right !important; } [data-theme='vault'] .sv-pricelist-buy { display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: 36px; padding: 0 14px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); font-size: 14px; font-weight: 600; color: var(--sv-primary-ink); transition: background-color .15s, color .15s, border-color .15s; } [data-theme='vault'] .sv-pricelist-table tbody tr .sv-pricelist-buy:hover { background: var(--primary); border-color: var(--primary); color: var(--sv-on-primary); } [data-theme='vault'] .sv-pricelist-note { display: flex; gap: 8px; margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-3); } [data-theme='vault'] .sv-pricelist-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; } /* Panel skeletons */ [data-theme='vault'] .sv-pricelist-skeleton-meta { display: block; width: 168px; max-width: 100%; height: 14px; margin-top: 8px; } [data-theme='vault'] .sv-pricelist-skeleton-title { display: block; width: 180px; max-width: 100%; height: 22px; } [data-theme='vault'] .sv-pricelist-skeleton-tabs { display: block; width: 220px; height: 42px; } [data-theme='vault'] .sv-pricelist-skeleton-rows { display: grid; border: 1px solid var(--sv-line); overflow: hidden; } [data-theme='vault'] .sv-pricelist-skeleton-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 88px; align-items: center; gap: 12px; padding: 13px 16px; } [data-theme='vault'] .sv-pricelist-skeleton-row + .sv-pricelist-skeleton-row { border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-pricelist-skeleton-icon { display: block; width: 34px; height: 34px; } [data-theme='vault'] .sv-pricelist-skeleton-name { display: block; width: 58%; height: 12px; } [data-theme='vault'] .sv-pricelist-skeleton-price { display: block; height: 12px; } @media (min-width: 1024px) { [data-theme='vault'] .sv-pricelist-layout { grid-template-columns: 324px minmax(0, 1fr); gap: 24px; } [data-theme='vault'] .sv-pricelist-aside { position: sticky; top: calc(var(--sv-header-offset, 108px) + 16px); transition: top .3s cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; max-height: calc(100dvh - 136px); overflow: hidden; } [data-theme='vault'] .sv-pricelist-aside .sv-pricelist-picker { flex: 1 1 auto; } [data-theme='vault'] .sv-pricelist-games[data-layout] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: -6px -10px -10px; padding: 10px 10px 16px; scroll-snap-type: none; scrollbar-width: thin; scrollbar-color: var(--sv-line-strong) transparent; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12px, #000 calc(100% - 20px), transparent 100%); } [data-theme='vault'] .sv-pricelist-games[data-layout] > li { flex: none; } [data-theme='vault'] .sv-pricelist-picker-toggle { display: none; } } @media (max-width: 639px) { [data-theme='vault'] .sv-pricelist-picker { padding: 16px; } [data-theme='vault'] .sv-pricelist-games[data-layout='rail'] { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } [data-theme='vault'] .sv-pricelist-games[data-layout='rail'] > li { flex-basis: 78px; } [data-theme='vault'] .sv-pricelist-games[data-layout='grid'] { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); } [data-theme='vault'] .sv-pricelist-panel-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px; } [data-theme='vault'] .sv-pricelist-panel-logo { width: 54px; height: 54px; } [data-theme='vault'] .sv-pricelist-panel-cta { grid-column: 1 / -1; width: 100%; } [data-theme='vault'] .sv-pricelist-panel-body { padding: 14px 16px 18px; } [data-theme='vault'] .sv-pricelist-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme='vault'] .sv-pricelist-types { display: flex; } [data-theme='vault'] .sv-pricelist-types .sv-segtab { flex: 1 0 auto; min-height: 44px; } [data-theme='vault'] .sv-pricelist-filter { flex: none; min-width: 0; } [data-theme='vault'] .sv-pricelist-table-wrap { margin-inline: -4px; } [data-theme='vault'] .sv-pricelist-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-theme='vault'] .sv-pricelist-table, [data-theme='vault'] .sv-pricelist-table tbody { display: block; } [data-theme='vault'] .sv-pricelist-table tbody tr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "product action" "price action"; column-gap: 12px; align-items: center; min-height: 68px; padding: 11px 12px 11px 58px; } [data-theme='vault'] .sv-pricelist-table tbody :is(th, td) { padding: 0; } [data-theme='vault'] .sv-pricelist-cell-product { grid-area: product; align-self: end; } [data-theme='vault'] .sv-pricelist-cell-price { grid-area: price; padding: 3px 0 0 !important; text-align: left !important; align-self: start; } [data-theme='vault'] .sv-pricelist-cell-action { grid-area: action; padding: 0 !important; } [data-theme='vault'] .sv-pricelist-product { display: block; } [data-theme='vault'] .sv-pricelist-product-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); } [data-theme='vault'] .sv-pricelist-product-name { display: block; font-size: 15px; } [data-theme='vault'] .sv-pricelist-price { font-size: 15px; } [data-theme='vault'] .sv-pricelist-buy { min-height: 44px; min-width: 60px; } [data-theme='vault'] .sv-pricelist-skeleton-row { grid-template-columns: 34px minmax(0, 1fr) 60px; } } /* ───────── Leaderboard ───────── */ [data-theme='vault'] .sv-leaderboard { --sv-medal-gold: oklch(0.86 0.13 88); --sv-medal-gold-deep: oklch(0.62 0.13 72); --sv-medal-silver: oklch(0.86 0.015 250); --sv-medal-silver-deep: oklch(0.6 0.02 255); --sv-medal-bronze: oklch(0.78 0.1 58); --sv-medal-bronze-deep: oklch(0.56 0.12 48); } [data-theme='vault'] .sv-leaderboard-head { margin-bottom: 22px; } [data-theme='vault'] .sv-leaderboard-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 20px; } [data-theme='vault'] .sv-leaderboard-reset { display: inline-flex; align-items: center; gap: 7px; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-leaderboard-reset svg { width: 15px; height: 15px; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-leaderboard-body { display: grid; gap: 16px; align-items: start; } [data-theme='vault'] .sv-leaderboard-main { display: grid; gap: 16px; min-width: 0; } /* Stage + podium */ [data-theme='vault'] .sv-leaderboard-stage { position: relative; padding: 20px 22px 0; border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); overflow: hidden; background: radial-gradient(60% 80% at 50% 0%, color-mix(in oklab, var(--sv-medal-gold) 12%, transparent), transparent 70%), var(--sv-surface); } [data-theme='vault'] .sv-leaderboard-stage-title { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-leaderboard-stage-title span { font-family: var(--sv-mono); font-size: 11.5px; font-weight: 400; color: var(--sv-ink-3); } [data-theme='vault'] .sv-leaderboard-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 12px; margin: 18px auto 0; padding: 0; max-width: 760px; list-style: none; } [data-theme='vault'] .sv-leaderboard-podium-item { display: flex; flex-direction: column; align-items: center; min-width: 0; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] { order: 2; --sv-medal: var(--sv-medal-gold); --sv-medal-deep: var(--sv-medal-gold-deep); } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='2'] { order: 1; --sv-medal: var(--sv-medal-silver); --sv-medal-deep: var(--sv-medal-silver-deep); } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='3'] { order: 3; --sv-medal: var(--sv-medal-bronze); --sv-medal-deep: var(--sv-medal-bronze-deep); } [data-theme='vault'] .sv-leaderboard-podium-person { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; min-width: 0; padding: 0 4px 16px; text-align: center; } [data-theme='vault'] .sv-leaderboard-podium-figure { position: relative; margin: 16px 0; } [data-theme='vault'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { box-shadow: 0 0 0 1px var(--sv-medal), 0 0 0 5px var(--sv-surface), 0 0 0 6px color-mix(in oklab, var(--sv-medal) 40%, transparent), 0 0 30px -6px color-mix(in oklab, var(--sv-medal) 50%, transparent); } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-avatar { width: 84px; height: 84px; font-size: 24px; } [data-theme='vault'] .sv-leaderboard-crown { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; color: var(--sv-medal); fill: color-mix(in oklab, var(--sv-medal) 30%, transparent); stroke-width: 1.6; } [data-theme='vault'] .sv-leaderboard-medal { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: var(--sv-radius-sm); background: var(--sv-medal); color: oklch(0.2 0.02 260); font-family: var(--sv-mono); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px var(--sv-surface); } [data-theme='vault'] .sv-leaderboard-podium-name { max-width: 100%; font-size: 15px; font-weight: 600; color: var(--sv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-leaderboard-podium-total { font-family: var(--sv-mono); font-size: 19px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.25; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-total { font-size: 22px; color: var(--sv-medal); } [data-theme='vault'] .sv-leaderboard-amount-short { display: none; } [data-theme='vault'] .sv-leaderboard-podium-meta { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-leaderboard-podium-game { max-width: 100%; margin-top: 6px; } [data-theme='vault'] .sv-leaderboard-podium-game svg { flex-shrink: 0; color: var(--sv-ink-3); } [data-theme='vault'] .sv-leaderboard-podium-step { position: relative; display: grid; place-items: center; width: 100%; height: 44px; border: 1px solid color-mix(in oklab, var(--sv-medal) 45%, var(--sv-line)); border-bottom: 0; background: linear-gradient(to bottom, color-mix(in oklab, var(--sv-medal) 16%, var(--sv-surface)), var(--sv-surface)); box-shadow: inset 0 1px 0 var(--sv-medal); } [data-theme='vault'] .sv-leaderboard-podium-step span { font-family: var(--sv-mono); font-size: 22px; font-weight: 500; line-height: 1; color: var(--sv-medal); } [data-theme='vault'] .sv-leaderboard-podium-step span::before { content: '0'; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { height: 76px; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step span { font-size: 30px; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='2'] .sv-leaderboard-podium-step { height: 56px; } /* Avatars */ [data-theme='vault'] .sv-leaderboard-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--sv-radius-sm); background: color-mix(in oklab, var(--sv-av) 13%, var(--sv-surface)); color: var(--sv-av); border: 1px solid color-mix(in oklab, var(--sv-av) 35%, transparent); font-family: var(--sv-mono); font-size: 12.5px; font-weight: 500; letter-spacing: 0.02em; } [data-theme='vault'] .sv-leaderboard-avatar[data-size='lg'] { width: 70px; height: 70px; font-size: 21px; } [data-theme='vault'] .sv-leaderboard-avatar[data-tone='0'] { --sv-av: var(--sv-primary-ink); } [data-theme='vault'] .sv-leaderboard-avatar[data-tone='1'] { --sv-av: var(--sv-signal); } [data-theme='vault'] .sv-leaderboard-avatar[data-tone='2'] { --sv-av: var(--sv-hot); } [data-theme='vault'] .sv-leaderboard-avatar[data-tone='3'] { --sv-av: var(--sv-info); } [data-theme='vault'] .sv-leaderboard-avatar[data-tone='4'] { --sv-av: oklch(0.78 0.12 305); } [data-theme='vault'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { border: 0; } /* Rank change */ [data-theme='vault'] .sv-leaderboard-change { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 38px; height: 22px; padding: 0 6px; border-radius: var(--sv-radius-xs); font-family: var(--sv-mono); font-size: 11.5px; font-variant-numeric: tabular-nums; border: 1px solid var(--sv-line); color: var(--sv-ink-3); } [data-theme='vault'] .sv-leaderboard-change-mark { font-size: 8px; line-height: 1; } [data-theme='vault'] .sv-leaderboard-change[data-dir='same'] .sv-leaderboard-change-mark { font-size: 13px; } [data-theme='vault'] .sv-leaderboard-change[data-dir='up'] { border-color: color-mix(in oklab, var(--sv-ok) 40%, transparent); color: var(--sv-ok); background: var(--sv-ok-soft); } [data-theme='vault'] .sv-leaderboard-change[data-dir='down'] { border-color: color-mix(in oklab, var(--sv-err) 40%, transparent); color: var(--sv-err); background: var(--sv-err-soft); } /* Ranks 4–20 */ [data-theme='vault'] .sv-leaderboard-list { overflow: hidden; } [data-theme='vault'] .sv-leaderboard-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-leaderboard-list-title { font-size: 16px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-leaderboard-list-period { font-family: var(--sv-mono); font-size: 11.5px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-leaderboard-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } [data-theme='vault'] .sv-leaderboard-table thead th { padding: 10px 14px; text-align: left; font-family: var(--sv-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sv-ink-3); background: var(--sv-surface-2); border-bottom: 1px solid var(--sv-line); white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-table abbr { text-decoration: none; } [data-theme='vault'] .sv-leaderboard-table :is(.sv-leaderboard-col-rank, .sv-leaderboard-cell-rank) { width: 64px; text-align: center !important; } [data-theme='vault'] .sv-leaderboard-table :is(.sv-leaderboard-col-tx, .sv-leaderboard-cell-tx, .sv-leaderboard-col-total, .sv-leaderboard-cell-total) { text-align: right !important; } [data-theme='vault'] .sv-leaderboard-table :is(.sv-leaderboard-col-change, .sv-leaderboard-cell-change) { width: 72px; text-align: center !important; } [data-theme='vault'] .sv-leaderboard-table tbody tr + tr { border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-leaderboard-table tbody tr { transition: background-color .15s; } [data-theme='vault'] .sv-leaderboard-table tbody tr:hover { background: var(--sv-surface-2); } [data-theme='vault'] .sv-leaderboard-table tbody :is(th, td) { padding: 10px 14px; text-align: left; vertical-align: middle; } [data-theme='vault'] .sv-leaderboard-table tbody th { font-weight: inherit; } [data-theme='vault'] .sv-leaderboard-rank { display: inline-block; min-width: 28px; font-family: var(--sv-mono); font-size: 13px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-leaderboard-who { display: flex; align-items: center; gap: 12px; min-width: 0; } [data-theme='vault'] .sv-leaderboard-who-text { display: grid; min-width: 0; } [data-theme='vault'] .sv-leaderboard-name { font-weight: 500; color: var(--sv-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-leaderboard-sub { display: none; font-size: 12.5px; color: var(--sv-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme='vault'] .sv-leaderboard-cell-game { color: var(--sv-ink-2); white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-cell-tx { font-family: var(--sv-mono); font-size: 13px; color: var(--sv-ink-2); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-leaderboard-tx-unit { display: none; } [data-theme='vault'] .sv-leaderboard-cell-total { font-family: var(--sv-mono); font-weight: 600; letter-spacing: -0.02em; color: var(--sv-ink); font-variant-numeric: tabular-nums; white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-note { padding: 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--sv-ink-3); } [data-theme='vault'] .sv-leaderboard-empty { padding: 40px 20px; text-align: center; } [data-theme='vault'] .sv-leaderboard-empty-title { font-size: 16px; font-weight: 600; } [data-theme='vault'] .sv-leaderboard-empty-text { margin-top: 4px; font-size: 15px; color: var(--sv-ink-2); } /* Aside: CTA + rules */ [data-theme='vault'] .sv-leaderboard-aside { display: grid; gap: 16px; align-content: start; min-width: 0; } [data-theme='vault'] .sv-leaderboard-cta { position: relative; overflow: hidden; padding: 22px; background: radial-gradient(110% 80% at 100% 0%, color-mix(in oklab, var(--primary) 12%, var(--sv-surface)), var(--sv-surface) 62%); } [data-theme='vault'] .sv-leaderboard-cta-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-leaderboard-cta-icon svg { width: 20px; height: 20px; } [data-theme='vault'] .sv-leaderboard-cta-title { margin-top: 14px; font-size: 19px; line-height: 1.25; font-weight: 600; color: var(--sv-ink); text-wrap: balance; } [data-theme='vault'] .sv-leaderboard-cta-text { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); text-wrap: pretty; } [data-theme='vault'] .sv-leaderboard-cta-text strong { font-family: var(--sv-mono); font-weight: 600; color: var(--sv-ink); white-space: nowrap; font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-leaderboard-cta-btn { margin-top: 18px; } [data-theme='vault'] .sv-leaderboard-cta-btn svg { width: 18px; height: 18px; } [data-theme='vault'] .sv-leaderboard-rules { padding: 18px 20px; } [data-theme='vault'] .sv-leaderboard-rules-title { margin-bottom: 12px; font-family: var(--sv-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-leaderboard-rules-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-leaderboard-rules-list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-leaderboard-rules-list svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--sv-primary-ink); } @media (min-width: 1024px) { [data-theme='vault'] .sv-leaderboard-body { grid-template-columns: minmax(0, 1fr) 328px; gap: 24px; } [data-theme='vault'] .sv-leaderboard-aside { position: sticky; top: calc(var(--sv-header-offset, 108px) + 16px); transition: top .3s cubic-bezier(.2, .7, .2, 1); } } @media (min-width: 640px) and (max-width: 1023px) { [data-theme='vault'] .sv-leaderboard-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { [data-theme='vault'] .sv-leaderboard-toolbar { flex-direction: column; align-items: stretch; gap: 10px; } [data-theme='vault'] .sv-leaderboard-periods { display: flex; } [data-theme='vault'] .sv-leaderboard-periods .sv-segtab { flex: 1 0 auto; min-height: 44px; padding: 0 12px; } [data-theme='vault'] .sv-leaderboard-stage { padding: 16px 10px 0; } [data-theme='vault'] .sv-leaderboard-stage-title { padding-inline: 6px; } [data-theme='vault'] .sv-leaderboard-podium { gap: 6px; margin-top: 12px; } [data-theme='vault'] .sv-leaderboard-podium-person { gap: 2px; padding: 0 2px 12px; } [data-theme='vault'] .sv-leaderboard-podium-figure { margin: 16px 0 14px; } [data-theme='vault'] .sv-leaderboard-avatar[data-size='lg'] { width: 50px; height: 50px; font-size: 15px; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-avatar { width: 60px; height: 60px; font-size: 18px; } [data-theme='vault'] .sv-leaderboard-podium-figure .sv-leaderboard-avatar { box-shadow: 0 0 0 1px var(--sv-medal), 0 0 0 4px var(--sv-surface), 0 0 24px -6px color-mix(in oklab, var(--sv-medal) 50%, transparent); } [data-theme='vault'] .sv-leaderboard-crown { top: -24px; width: 20px; height: 20px; } [data-theme='vault'] .sv-leaderboard-medal { min-width: 22px; height: 20px; bottom: -9px; padding: 0 5px; font-size: 11px; } [data-theme='vault'] .sv-leaderboard-podium-name { font-size: 13.5px; } [data-theme='vault'] .sv-leaderboard-podium-total, [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-total { font-size: 15px; } [data-theme='vault'] .sv-leaderboard-amount-full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-amount-short { display: inline; } [data-theme='vault'] .sv-leaderboard-podium-meta { flex-direction: column; gap: 4px; font-size: 11px; } [data-theme='vault'] .sv-leaderboard-podium-meta .sv-leaderboard-change { height: 20px; min-width: 0; padding: 0 5px; font-size: 11px; } [data-theme='vault'] .sv-leaderboard-podium-game { height: 22px; padding: 0 6px; gap: 4px; margin-top: 4px; font-size: 11px; } [data-theme='vault'] .sv-leaderboard-podium-game svg { display: none; } [data-theme='vault'] .sv-leaderboard-podium-step { height: 28px; } [data-theme='vault'] .sv-leaderboard-podium-step span { font-size: 15px; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step { height: 46px; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='1'] .sv-leaderboard-podium-step span { font-size: 19px; } [data-theme='vault'] .sv-leaderboard-podium-item[data-rank='2'] .sv-leaderboard-podium-step { height: 36px; } [data-theme='vault'] .sv-leaderboard-list-head { padding: 14px 16px; } [data-theme='vault'] .sv-leaderboard-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-table, [data-theme='vault'] .sv-leaderboard-table tbody { display: block; } [data-theme='vault'] .sv-leaderboard-table tbody tr { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; grid-template-areas: "rank who total total" "rank who tx change"; column-gap: 8px; row-gap: 3px; align-items: center; padding: 11px 14px; } [data-theme='vault'] .sv-leaderboard-table tbody :is(th, td) { padding: 0; } [data-theme='vault'] .sv-leaderboard-table :is(.sv-leaderboard-cell-rank, .sv-leaderboard-cell-change) { width: auto; } [data-theme='vault'] .sv-leaderboard-table .sv-leaderboard-cell-total { justify-self: end; } [data-theme='vault'] .sv-leaderboard-table .sv-leaderboard-cell-tx { grid-area: tx; justify-self: end; font-size: 11.5px; color: var(--sv-ink-3); white-space: nowrap; } [data-theme='vault'] .sv-leaderboard-tx-unit { display: inline; } [data-theme='vault'] .sv-leaderboard-cell-rank { grid-area: rank; } [data-theme='vault'] .sv-leaderboard-cell-name { grid-area: who; min-width: 0; } [data-theme='vault'] .sv-leaderboard-cell-total { grid-area: total; font-size: 14.5px; } [data-theme='vault'] .sv-leaderboard-cell-change { grid-area: change; justify-self: end; } [data-theme='vault'] .sv-leaderboard-table .sv-leaderboard-cell-game { display: none; } [data-theme='vault'] .sv-leaderboard-rank { min-width: 24px; font-size: 12.5px; } [data-theme='vault'] .sv-leaderboard-who { gap: 10px; } [data-theme='vault'] .sv-leaderboard-who .sv-leaderboard-avatar { width: 32px; height: 32px; font-size: 11.5px; } [data-theme='vault'] .sv-leaderboard-sub { display: block; } [data-theme='vault'] .sv-leaderboard-table .sv-leaderboard-change { height: 20px; min-width: 0; padding: 0 6px; font-size: 11px; } [data-theme='vault'] .sv-leaderboard-cta { padding: 20px; } } @media (prefers-reduced-motion: reduce) { [data-theme='vault'] .sv-pricelist-live { animation: none; } } /* ───────── Shared: status tones, phone group, spinner ───────── */ [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='ok'] { --tone-ink: var(--sv-ok); --tone-soft: var(--sv-ok-soft); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='err'] { --tone-ink: var(--sv-err); --tone-soft: var(--sv-err-soft); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='warn'] { --tone-ink: var(--sv-warn); --tone-soft: var(--sv-warn-soft); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='info'] { --tone-ink: var(--sv-info); --tone-soft: var(--sv-info-soft); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) [data-tone='muted'] { --tone-ink: var(--sv-ink-2); --tone-soft: var(--sv-surface-2); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--sv-line-strong); border-radius: var(--sv-radius-sm); background: var(--sv-well); transition: border-color .15s, box-shadow .15s; } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-prefix { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid var(--sv-line); background: var(--sv-surface-2); color: var(--sv-ink-2); font-family: var(--sv-mono); font-size: 14.5px; } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group .sv-input { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group .sv-input:focus { box-shadow: none; } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input:disabled { background: var(--sv-surface-2); color: var(--sv-ink-2); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-btn svg { width: 18px; height: 18px; flex-shrink: 0; } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-btn--primary[aria-busy='true']:disabled { background: var(--primary); color: var(--sv-on-primary); border: 0; opacity: 0.8; cursor: progress; } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-spin { animation: sv-acct-spin 0.9s linear infinite; } @keyframes sv-acct-spin { to { transform: rotate(360deg); } } /* ───────── Cek Transaksi ───────── */ [data-theme='vault'] .sv-track-head { margin-bottom: 26px; } [data-theme='vault'] .sv-track-layout { display: grid; gap: 16px; align-items: start; } [data-theme='vault'] .sv-track-form { position: relative; display: grid; gap: 16px; padding: 22px; } [data-theme='vault'] .sv-track-assure { display: grid; gap: 10px; margin: 2px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--sv-line-strong); font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-assure li { display: flex; align-items: flex-start; gap: 9px; } [data-theme='vault'] .sv-track-assure svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--sv-ok); } [data-theme='vault'] .sv-track-assure a { font-weight: 600; color: var(--sv-primary-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } [data-theme='vault'] .sv-track-results { min-width: 0; } [data-theme='vault'] .sv-track-results-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sv-line); } [data-theme='vault'] .sv-track-results-title { font-size: 18px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-track-results-sub { font-family: var(--sv-mono); font-size: 12.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-list { display: grid; gap: 12px; } /* Status guide (before searching) */ [data-theme='vault'] .sv-track-guide { padding: 22px; } [data-theme='vault'] .sv-track-guide-title { font-size: 17px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-track-guide-sub { margin-top: 4px; font-size: 14.5px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-guide-list { display: grid; margin: 14px 0 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-track-guide-list li { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-track-guide-list li:last-child { padding-bottom: 0; } [data-theme='vault'] .sv-track-guide-list p { font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-guide-list .sv-order-status { justify-self: start; } /* Error + empty */ [data-theme='vault'] .sv-track-alert { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--sv-radius-sm); background: var(--sv-err-soft); border: 1px solid color-mix(in oklab, var(--sv-err) 35%, transparent); color: var(--sv-err); } [data-theme='vault'] .sv-track-alert > svg { width: 21px; height: 21px; flex-shrink: 0; margin-top: 1px; } [data-theme='vault'] .sv-track-alert-title { font-size: 15px; font-weight: 600; } [data-theme='vault'] .sv-track-alert-text { margin-top: 2px; font-size: 15px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-empty { display: grid; justify-items: center; gap: 8px; padding: clamp(28px, 5vw, 44px) 22px; text-align: center; } [data-theme='vault'] .sv-track-empty-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px; border: 1px solid var(--sv-line-strong); color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-empty-icon::after { content: ''; position: absolute; inset: -6px; background: linear-gradient(var(--sv-ink-3) 0 0) left top / 8px 1px no-repeat, linear-gradient(var(--sv-ink-3) 0 0) left top / 1px 8px no-repeat, linear-gradient(var(--sv-ink-3) 0 0) right bottom / 8px 1px no-repeat, linear-gradient(var(--sv-ink-3) 0 0) right bottom / 1px 8px no-repeat; } [data-theme='vault'] .sv-track-empty-icon svg { width: 24px; height: 24px; } [data-theme='vault'] .sv-track-empty-title { font-size: 17px; font-weight: 600; color: var(--sv-ink); text-wrap: balance; } [data-theme='vault'] .sv-track-empty-text { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='vault'] .sv-track-empty .sv-btn { margin-top: 10px; } /* Order card (track) */ [data-theme='vault'] .sv-order { position: relative; padding: 18px 20px 0; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow); } [data-theme='vault'] .sv-track .sv-order:has(.sv-order-status) { box-shadow: var(--sv-shadow); } [data-theme='vault'] .sv-track .sv-order:has(.sv-order-head .sv-order-status[data-tone='ok']) { --tone-ink: var(--sv-ok); } [data-theme='vault'] .sv-track .sv-order:has(.sv-order-head .sv-order-status[data-tone='err']) { --tone-ink: var(--sv-err); } [data-theme='vault'] .sv-track .sv-order:has(.sv-order-head .sv-order-status[data-tone='warn']) { --tone-ink: var(--sv-warn); } [data-theme='vault'] .sv-track .sv-order:has(.sv-order-head .sv-order-status[data-tone='info']) { --tone-ink: var(--sv-info); } [data-theme='vault'] .sv-order-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; } [data-theme='vault'] .sv-order-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-primary-line); background: var(--sv-primary-soft); color: var(--sv-primary-ink); font-family: var(--sv-mono); font-size: 13px; letter-spacing: 0.04em; } [data-theme='vault'] .sv-order-titles { min-width: 0; } [data-theme='vault'] .sv-order-game { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-order-product { margin-top: 2px; font-size: 16.5px; line-height: 1.3; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-order-status { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: var(--sv-radius-xs); font-family: var(--sv-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; background: var(--tone-soft); color: var(--tone-ink); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tone-ink) 40%, transparent); } [data-theme='vault'] .sv-order-status svg { width: 14px; height: 14px; flex-shrink: 0; } [data-theme='vault'] .sv-order-status[data-status='processing'] svg { animation: sv-acct-spin 2.4s linear infinite; } [data-theme='vault'] .sv-order-note { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; margin-top: 16px; padding: 10px 12px; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line); font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-order-help { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; min-height: 36px; padding: 0 12px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); font-size: 13.5px; font-weight: 600; color: var(--sv-ink); transition: border-color .15s, color .15s; } [data-theme='vault'] .sv-order-help:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-order-help svg { width: 16px; height: 16px; } /* Progress: dipesan → pembayaran → pengiriman */ [data-theme='vault'] .sv-order-track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-order-step { position: relative; display: grid; align-content: start; gap: 2px; min-width: 0; padding-right: 10px; } [data-theme='vault'] .sv-order-step:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 32px; right: 8px; height: 1px; background: repeating-linear-gradient(90deg, var(--sv-line-strong) 0 4px, transparent 4px 7px); } [data-theme='vault'] .sv-order-step[data-state='done']:not(:last-child)::after { background: var(--sv-ok); } [data-theme='vault'] .sv-order-step-dot { display: grid; place-items: center; width: 22px; height: 22px; margin-bottom: 8px; border-radius: var(--sv-radius-xs); background: var(--tone-soft); color: var(--tone-ink); box-shadow: inset 0 0 0 1px var(--tone-ink); } [data-theme='vault'] .sv-order-step-dot svg { width: 12px; height: 12px; stroke-width: 2.6; } [data-theme='vault'] .sv-order-step[data-state='done'] .sv-order-step-dot { background: var(--sv-ok); color: var(--sv-signal-ink); box-shadow: none; } [data-theme='vault'] .sv-order-step[data-state='current'] .sv-order-step-dot { box-shadow: inset 0 0 0 1px var(--tone-ink), 0 0 12px -2px var(--tone-ink); } [data-theme='vault'] .sv-order-step[data-state='current'][data-step='delivery'] .sv-order-step-dot svg { animation: sv-acct-spin 2.4s linear infinite; } [data-theme='vault'] .sv-order-step[data-state='idle'] .sv-order-step-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--sv-line-strong); color: var(--sv-ink-3); } [data-theme='vault'] .sv-order-step-label { font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-order-step-value { font-size: 14px; line-height: 1.35; font-weight: 600; color: var(--tone-ink); } [data-theme='vault'] .sv-order-step[data-step='ordered'] .sv-order-step-value { font-weight: 500; color: var(--sv-ink); } [data-theme='vault'] .sv-order-step[data-state='idle'] .sv-order-step-value { font-weight: 500; color: var(--sv-ink-3); } /* ID, method, serial */ [data-theme='vault'] .sv-order-meta { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px 28px; margin: 16px 0 0; padding: 14px 0; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-order-cell { display: grid; align-content: start; gap: 6px; min-width: 0; } [data-theme='vault'] .sv-order-cell--wide { grid-column: 1 / -1; } [data-theme='vault'] .sv-order-cell dt { font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-order-cell dd { min-width: 0; font-size: 14.5px; color: var(--sv-ink); } [data-theme='vault'] .sv-order-copyrow { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme='vault'] .sv-order-id { flex: 1; min-width: 0; font-family: var(--sv-mono); font-size: 13px; line-height: 1.45; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='vault'] .sv-order-copy { position: relative; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; height: 32px; padding: 0 10px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: transparent; font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-ink-2); cursor: pointer; transition: border-color .15s, color .15s; } [data-theme='vault'] .sv-order-copy::after { content: ''; position: absolute; inset: -6px; } [data-theme='vault'] .sv-order-copy:hover { border-color: var(--primary); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-order-copy svg { width: 13px; height: 13px; } [data-theme='vault'] .sv-order-method { display: inline-flex; align-items: center; gap: 9px; min-width: 0; } [data-theme='vault'] .sv-order-method-logo { display: grid; place-items: center; flex-shrink: 0; width: 46px; height: 28px; padding: 4px 6px; border-radius: var(--sv-radius-sm); background: var(--sv-plate); } [data-theme='vault'] .sv-order-method-logo img { width: 100%; height: 100%; object-fit: contain; } [data-theme='vault'] .sv-order-method-logo--icon { color: var(--sv-primary-ink); background: var(--sv-primary-soft); border: 1px solid var(--sv-primary-line); } [data-theme='vault'] .sv-order-method-logo--icon svg { width: 16px; height: 16px; } [data-theme='vault'] .sv-order-muted { font-size: 14px; color: var(--sv-ink-3); } [data-theme='vault'] .sv-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0 16px; border-top: 1px dashed var(--sv-line-strong); } [data-theme='vault'] .sv-order-foot span { font-family: var(--sv-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-ink-2); } [data-theme='vault'] .sv-order-foot strong { font-family: var(--sv-mono); font-size: 19px; font-weight: 600; letter-spacing: -0.03em; color: var(--sv-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-order--skeleton { padding-bottom: 18px; box-shadow: none; } [data-theme='vault'] .sv-order--skeleton .sv-order-head { grid-template-columns: auto minmax(0, 1fr); } [data-theme='vault'] .sv-order-sk { display: block; height: 12px; width: 70%; } [data-theme='vault'] .sv-order-sk--short { width: 32%; margin-bottom: 8px; } [data-theme='vault'] .sv-order-sk--note { width: 100%; height: 40px; margin-top: 14px; } [data-theme='vault'] .sv-order-sk--row { width: 100%; height: 14px; margin-top: 16px; } [data-theme='vault'] .sv-order-sk--track { width: 100%; height: 44px; margin-top: 18px; } /* ───────── Masuk / Daftar ───────── */ [data-theme='vault'] .sv-auth { padding-block: clamp(20px, 5vw, 56px) clamp(48px, 8vw, 96px); } [data-theme='vault'] .sv-auth-shell { position: relative; display: grid; max-width: 460px; margin-inline: auto; } [data-theme='vault'] .sv-auth-aside { display: none; } [data-theme='vault'] .sv-auth-card { position: relative; min-width: 0; padding: 28px 24px 24px; background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg); } [data-theme='vault'] .sv-auth-brand { display: flex; align-items: center; gap: 10px; min-width: 0; } [data-theme='vault'] .sv-auth-logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--sv-radius-sm); object-fit: cover; } [data-theme='vault'] .sv-auth-logo--initial { display: grid; place-items: center; background: var(--primary); color: var(--sv-on-primary); font-family: var(--sv-mono); font-size: 17px; } [data-theme='vault'] .sv-auth-store { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--sv-ink); } [data-theme='vault'] .sv-auth-title { margin-top: 22px; font-size: clamp(24px, 3vw, 28px); line-height: 1.15; font-weight: 650; letter-spacing: -0.035em; color: var(--sv-ink); } [data-theme='vault'] .sv-auth-sub { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 20px; padding: 0; border-radius: var(--sv-radius-sm); background: var(--sv-well); border: 1px solid var(--sv-line-strong); } [data-theme='vault'] .sv-segmented-tab { min-height: 44px; border: 0; background: transparent; font-size: 15px; font-weight: 500; color: var(--sv-ink-2); cursor: pointer; transition: background-color .15s, color .15s; } [data-theme='vault'] .sv-segmented-tab + .sv-segmented-tab { border-left: 1px solid var(--sv-line); } [data-theme='vault'] .sv-segmented-tab:hover { color: var(--sv-ink); } [data-theme='vault'] .sv-segmented-tab[aria-selected='true'] { background: var(--sv-primary-soft); color: var(--sv-ink); box-shadow: inset 0 -2px 0 var(--primary); } [data-theme='vault'] .sv-auth-form { display: grid; gap: 16px; margin-top: 20px; } [data-theme='vault'] .sv-auth-alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--sv-radius-sm); background: var(--sv-err-soft); border: 1px solid color-mix(in oklab, var(--sv-err) 35%, transparent); color: var(--sv-ink); font-size: 14px; line-height: 1.45; } [data-theme='vault'] .sv-auth-alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--sv-err); } [data-theme='vault'] :is(.sv-track, .sv-auth, .sv-search, .sv-legal) .sv-input-group--password .sv-input { border-radius: 0; } [data-theme='vault'] .sv-input-toggle { display: grid; place-items: center; flex-shrink: 0; width: 46px; border: 0; background: transparent; color: var(--sv-ink-3); cursor: pointer; transition: color .15s; } [data-theme='vault'] .sv-input-toggle:hover, [data-theme='vault'] .sv-input-toggle[aria-pressed='true'] { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-input-toggle svg { width: 19px; height: 19px; } [data-theme='vault'] .sv-auth-form .sv-btn--primary { margin-top: 4px; min-height: 48px; } [data-theme='vault'] .sv-auth-switch { text-align: center; font-size: 15px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-auth-switch button { min-height: 44px; padding: 0 4px; border: 0; background: none; font-weight: 600; color: var(--sv-primary-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } [data-theme='vault'] .sv-auth-legal { font-size: 13px; line-height: 1.55; text-align: center; color: var(--sv-ink-2); text-wrap: balance; } [data-theme='vault'] .sv-auth-legal a { font-weight: 600; color: var(--sv-primary-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } [data-theme='vault'] .sv-auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px dashed var(--sv-line-strong); font-family: var(--sv-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--sv-ink-2); } [data-theme='vault'] .sv-auth-trust li { display: inline-flex; align-items: center; gap: 6px; } [data-theme='vault'] .sv-auth-trust svg { width: 14px; height: 14px; color: var(--sv-ok); } @media (min-width: 960px) { [data-theme='vault'] .sv-auth-shell { max-width: 1000px; grid-template-columns: minmax(0, 1fr) minmax(0, 470px); background: var(--sv-surface); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); box-shadow: var(--sv-shadow-lg); overflow: hidden; } [data-theme='vault'] .sv-auth-shell::after { content: ''; position: absolute; inset: 14px; pointer-events: none; z-index: 2; background: linear-gradient(var(--sv-primary-ink) 0 0) left top / 14px 1.5px no-repeat, linear-gradient(var(--sv-primary-ink) 0 0) left top / 1.5px 14px no-repeat, linear-gradient(var(--sv-primary-ink) 0 0) right bottom / 14px 1.5px no-repeat, linear-gradient(var(--sv-primary-ink) 0 0) right bottom / 1.5px 14px no-repeat; } [data-theme='vault'] .sv-auth-aside { order: -1; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; padding: 48px 44px; overflow: hidden; border-right: 1px solid var(--sv-line); background: radial-gradient(90% 70% at 0% 100%, color-mix(in oklab, var(--primary) 16%, transparent), transparent 70%), var(--sv-well); } [data-theme='vault'] .sv-auth-aside::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: var(--sv-ink); opacity: 0.07; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M0%20.5H48M.5%200V48%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to top, #000, transparent 90%); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2248%22%20height%3D%2248%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cpath%20d%3D%22M0%20.5H48M.5%200V48%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%222%22%20height%3D%222%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to top, #000, transparent 90%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 32px 32px, 100% 100%; mask-size: 32px 32px, 100% 100%; } [data-theme='vault'] .sv-auth-aside::after { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: var(--primary); opacity: 0.28; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22432%22%20height%3D%22432%22%20viewBox%3D%220%200%20432%20432%22%3E%3Cg%20font-family%3D%22ui-monospace%2CMenlo%2Cmonospace%22%20font-size%3D%2210.5%22%20fill%3D%22%23000%22%3E%3Ctext%20x%3D%22246%22%20y%3D%22114%22%3E01%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%2266%22%3E0x1F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22258%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%22402%22%3E%5B%20%5D%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22306%22%3E7F%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2266%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%2218%22%3E%2F%2F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22162%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2266%22%3E00%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22402%22%3E%26gt%3B_%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22402%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22258%22%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22306%22%3E10%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22210%22%3E0x00%3C%2Ftext%3E%3Ctext%20x%3D%22102%22%20y%3D%22402%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22162%22%3E%23%3C%2Ftext%3E%3C%2Fg%3E%3Cpath%20d%3D%22M380%20384h8M384%20380v8M380%20192h8M384%20188v8M140%20384h8M144%20380v8M140%2096h8M144%2092v8M380%20240h8M384%20236v8M44%20336h8M48%20332v8M236%20284h8M240%20280v8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to top, #000 10%, transparent 80%); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22432%22%20height%3D%22432%22%20viewBox%3D%220%200%20432%20432%22%3E%3Cg%20font-family%3D%22ui-monospace%2CMenlo%2Cmonospace%22%20font-size%3D%2210.5%22%20fill%3D%22%23000%22%3E%3Ctext%20x%3D%22246%22%20y%3D%22114%22%3E01%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%2266%22%3E0x1F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22258%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%226%22%20y%3D%22402%22%3E%5B%20%5D%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%22306%22%3E7F%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%2266%22%3E%23%3C%2Ftext%3E%3Ctext%20x%3D%22294%22%20y%3D%2218%22%3E%2F%2F%3C%2Ftext%3E%3Ctext%20x%3D%2254%22%20y%3D%22162%22%3E*%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%2266%22%3E00%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22402%22%3E%26gt%3B_%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22402%22%3E%25%3C%2Ftext%3E%3Ctext%20x%3D%22390%22%20y%3D%22258%22%3E%2B%3C%2Ftext%3E%3Ctext%20x%3D%22150%22%20y%3D%22306%22%3E10%3C%2Ftext%3E%3Ctext%20x%3D%22198%22%20y%3D%22210%22%3E0x00%3C%2Ftext%3E%3Ctext%20x%3D%22102%22%20y%3D%22402%22%3E%3A%3A%3C%2Ftext%3E%3Ctext%20x%3D%22342%22%20y%3D%22162%22%3E%23%3C%2Ftext%3E%3C%2Fg%3E%3Cpath%20d%3D%22M380%20384h8M384%20380v8M380%20192h8M384%20188v8M140%20384h8M144%20380v8M140%2096h8M144%2092v8M380%20240h8M384%20236v8M44%20336h8M48%20332v8M236%20284h8M240%20280v8%22%20stroke%3D%22%23000%22%20stroke-width%3D%221%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E"), linear-gradient(to top, #000 10%, transparent 80%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-size: 432px 432px, 100% 100%; mask-size: 432px 432px, 100% 100%; } [data-theme='vault'] .sv-auth-aside-title { max-width: 15ch; margin-top: 2px; font-size: 30px; line-height: 1.12; font-weight: 650; letter-spacing: -0.035em; color: var(--sv-ink); text-wrap: balance; } [data-theme='vault'] .sv-auth-benefits { display: grid; gap: 20px; margin: 32px 0 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-auth-benefits li { display: flex; align-items: flex-start; gap: 14px; font-size: 14.5px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-auth-benefits strong { display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-auth-benefit-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-primary-line); background: var(--sv-surface); color: var(--sv-primary-ink); } [data-theme='vault'] .sv-auth-benefit-icon svg { width: 19px; height: 19px; } [data-theme='vault'] .sv-auth-card { padding: 44px 44px 32px; border: 0; border-radius: 0; box-shadow: none; } [data-theme='vault'] .sv-auth-card::before { content: none; } } @media (max-width: 400px) { [data-theme='vault'] .sv-auth-card { padding: 22px 18px 20px; } [data-theme='vault'] .sv-auth-title { margin-top: 18px; } } /* ───────── Pencarian ───────── */ [data-theme='vault'] .sv-search-head { margin-bottom: 18px; } [data-theme='vault'] .sv-search-term { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-search-count { font-family: var(--sv-mono); font-size: 13px; } [data-theme='vault'] .sv-search-form { display: flex; gap: 8px; max-width: 640px; margin-bottom: clamp(24px, 4vw, 36px); } [data-theme='vault'] .sv-search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; } [data-theme='vault'] .sv-search-field > svg { position: absolute; left: 15px; width: 17px; height: 17px; color: var(--sv-ink-3); pointer-events: none; } [data-theme='vault'] .sv-search-input { width: 100%; height: 48px; padding: 0 16px 0 44px; border-radius: var(--sv-radius-sm); border: 1px solid var(--sv-line-strong); background: var(--sv-well); font-size: 16px; color: var(--sv-ink); transition: border-color .15s, box-shadow .15s; } [data-theme='vault'] .sv-search-input::placeholder { color: var(--sv-ink-3); } [data-theme='vault'] .sv-search-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent); } [data-theme='vault'] .sv-search-form .sv-btn { min-height: 48px; padding: 0 22px; } [data-theme='vault'] .sv-search-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 20px; padding: 22px 24px; } [data-theme='vault'] .sv-search-empty-icon { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--sv-line-strong); color: var(--sv-ink-2); } [data-theme='vault'] .sv-search-empty-icon::after { content: ''; position: absolute; inset: -6px; background: linear-gradient(var(--sv-ink-3) 0 0) left top / 8px 1px no-repeat, linear-gradient(var(--sv-ink-3) 0 0) left top / 1px 8px no-repeat, linear-gradient(var(--sv-ink-3) 0 0) right bottom / 8px 1px no-repeat, linear-gradient(var(--sv-ink-3) 0 0) right bottom / 1px 8px no-repeat; } [data-theme='vault'] .sv-search-empty-icon svg { width: 24px; height: 24px; } [data-theme='vault'] .sv-search-empty-title { font-size: 18px; font-weight: 600; color: var(--sv-ink); overflow-wrap: anywhere; } [data-theme='vault'] .sv-search-empty-text { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--sv-ink-2); } [data-theme='vault'] .sv-search-empty-cta { flex-shrink: 0; } [data-theme='vault'] .sv-search-suggest { margin-top: clamp(32px, 5vw, 48px); } /* ───────── Legal (Kebijakan Privasi, Syarat & Ketentuan) ───────── */ [data-theme='vault'] .sv-legal-head { max-width: 820px; margin-bottom: clamp(22px, 3vw, 32px); } [data-theme='vault'] .sv-legal-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-legal-meta li { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--sv-radius-xs); border: 1px solid var(--sv-line); background: var(--sv-surface); font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-2); } [data-theme='vault'] .sv-legal-meta svg { width: 14px; height: 14px; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-legal-layout { display: grid; gap: 16px; align-items: start; } [data-theme='vault'] .sv-legal-main { min-width: 0; } [data-theme='vault'] .sv-legal-toc { display: none; } [data-theme='vault'] .sv-legal-toc-title { margin-bottom: 8px; padding-left: 12px; font-family: var(--sv-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-ink-3); } [data-theme='vault'] .sv-legal-toc-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-legal-toc-list a { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px 12px; border-left: 1px solid var(--sv-line); font-size: 14.5px; line-height: 1.35; color: var(--sv-ink-2); transition: background-color .15s, color .15s, border-color .15s; } [data-theme='vault'] .sv-legal-toc-list a:hover { color: var(--sv-ink); background: var(--sv-surface); } [data-theme='vault'] .sv-legal-toc-list a[aria-current] { color: var(--sv-ink); background: var(--sv-primary-soft); } [data-theme='vault'] .sv-legal-toc-num { flex-shrink: 0; min-width: 22px; padding-top: 1px; font-family: var(--sv-mono); font-size: 12px; color: var(--sv-ink-3); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-legal-toc-list li:nth-child(-n+9) .sv-legal-toc-num::before { content: '0'; } [data-theme='vault'] .sv-legal-toc-list a[aria-current] .sv-legal-toc-num { color: var(--sv-primary-ink); } [data-theme='vault'] .sv-legal-toc-mobile details { margin-bottom: 14px; border: 1px solid var(--sv-line); border-radius: var(--sv-radius); background: var(--sv-surface); } [data-theme='vault'] .sv-legal-toc-mobile summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; list-style: none; font-size: 15px; font-weight: 600; color: var(--sv-ink); cursor: pointer; } [data-theme='vault'] .sv-legal-toc-mobile summary::-webkit-details-marker { display: none; } [data-theme='vault'] .sv-legal-toc-mobile summary svg { width: 18px; height: 18px; color: var(--sv-ink-3); transition: transform .2s; } [data-theme='vault'] .sv-legal-toc-mobile details[open] summary svg { transform: rotate(180deg); } [data-theme='vault'] .sv-legal-toc-count { font-family: var(--sv-mono); font-size: 12px; font-weight: 400; color: var(--sv-ink-3); } [data-theme='vault'] .sv-legal-toc-mobile .sv-legal-toc-list { padding: 6px 6px 8px; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-legal-body { padding: clamp(22px, 4vw, 44px) clamp(18px, 4.4vw, 52px); border: 1px solid var(--sv-line); border-radius: var(--sv-radius-lg); background: var(--sv-surface); } [data-theme='vault'] .sv-legal-section { max-width: 68ch; scroll-margin-top: calc(var(--sv-header-bar-h, 64px) + 24px); font-size: 16.5px; line-height: 1.75; color: color-mix(in oklab, var(--sv-ink) 88%, var(--sv-ink-2)); } [data-theme='vault'] .sv-legal-section + .sv-legal-section { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--sv-line); } [data-theme='vault'] .sv-legal-h2 { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; font-size: 19px; line-height: 1.3; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-legal-num { flex-shrink: 0; font-family: var(--sv-mono); font-size: 13px; font-weight: 400; color: var(--sv-primary-ink); font-variant-numeric: tabular-nums; } [data-theme='vault'] .sv-legal-num::after { content: ' /'; color: var(--sv-ink-3); } [data-theme='vault'] .sv-legal-section:nth-child(-n+9) .sv-legal-num::before { content: '0'; } [data-theme='vault'] .sv-legal-section p + p, [data-theme='vault'] .sv-legal-section p + .sv-legal-list { margin-top: 10px; } [data-theme='vault'] .sv-legal-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } [data-theme='vault'] .sv-legal-list li { position: relative; padding-left: 22px; } [data-theme='vault'] .sv-legal-list li::before { content: '>'; position: absolute; left: 4px; top: 0; font-family: var(--sv-mono); font-size: 0.85em; color: var(--sv-primary-ink); } [data-theme='vault'] .sv-legal-help { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 16px; padding: 22px 24px; border-radius: var(--sv-radius-lg); border: 1px solid var(--sv-primary-line); background: linear-gradient(120deg, var(--sv-primary-soft), var(--sv-surface)); } [data-theme='vault'] .sv-legal-help-title { font-size: 17px; font-weight: 600; color: var(--sv-ink); } [data-theme='vault'] .sv-legal-help-text { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--sv-ink-2); } [data-theme='vault'] .sv-legal-help-actions { display: flex; flex-wrap: wrap; gap: 8px; } @media (min-width: 1024px) { [data-theme='vault'] .sv-track-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; } [data-theme='vault'] .sv-track-side { position: sticky; top: calc(var(--sv-header-offset, 108px) + 16px); transition: top .3s cubic-bezier(.2, .7, .2, 1); } [data-theme='vault'] .sv-legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: 40px; } [data-theme='vault'] .sv-legal-toc { display: block; position: sticky; top: calc(var(--sv-header-offset, 108px) + 20px); transition: top .3s cubic-bezier(.2, .7, .2, 1); } [data-theme='vault'] .sv-legal-toc-mobile { display: none; } [data-theme='vault'] .sv-search-form { display: none; } } @media (max-width: 640px) { [data-theme='vault'] .sv-track-head { margin-bottom: 18px; } [data-theme='vault'] .sv-track-form, [data-theme='vault'] .sv-track-guide { padding: 18px 16px; } [data-theme='vault'] .sv-track-guide-list li { grid-template-columns: minmax(0, 1fr); gap: 6px; } [data-theme='vault'] .sv-order { padding: 16px 16px 0; } [data-theme='vault'] .sv-order-head { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 12px; } [data-theme='vault'] .sv-order-head .sv-order-status { grid-column: 2; justify-self: start; margin-top: 6px; } [data-theme='vault'] .sv-order-mark { width: 40px; height: 40px; font-size: 12px; } [data-theme='vault'] .sv-order-note { flex-wrap: wrap; } [data-theme='vault'] .sv-order-help { min-height: 44px; } [data-theme='vault'] .sv-order-meta { grid-template-columns: minmax(0, 1fr); gap: 12px; } [data-theme='vault'] .sv-order-step { padding-right: 6px; } [data-theme='vault'] .sv-order-step:not(:last-child)::after { left: 30px; right: 6px; } [data-theme='vault'] .sv-order-step-value { font-size: 13.5px; } [data-theme='vault'] .sv-search-form .sv-btn { padding: 0 18px; } [data-theme='vault'] .sv-search-empty { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 20px 18px; } [data-theme='vault'] .sv-search-empty-icon { width: 46px; height: 46px; margin: 6px; } [data-theme='vault'] .sv-legal-section { font-size: 16px; line-height: 1.7; } [data-theme='vault'] .sv-legal-h2 { font-size: 17.5px; } [data-theme='vault'] .sv-legal-help { padding: 20px 18px; } [data-theme='vault'] .sv-legal-help-actions { width: 100%; } [data-theme='vault'] .sv-legal-help-actions .sv-btn { flex: 1 1 auto; } }