/* ============================================================================
   site.css — VIRCANSASTUDIO Official Website
   Melengkapi Design System v2.0 (assets/css/tokens/*). Berisi tiga hal:
     1. Token layout responsif — prototype Claude Design menghitung nilai grid di
        JavaScript; di sini nilainya jadi custom property dengan media query.
     2. Keyframes dan utilitas yang dipakai markup hasil konversi.
     3. Komponen yang ditulis tangan: laci menu, pencarian, baki perbandingan,
        batang aksi, slot gambar, dan kontrol formulir.
   Gaya visual per elemen tetap inline (mengikuti prototype) — berkas ini hanya
   mengisi yang tidak bisa diungkapkan lewat atribut style.
   ========================================================================= */

/* --------------------------------------------------- 1. token layout responsif */
:root {
  /* Padding kiri/kanan kanonik seluruh halaman. Bilah filter memakainya untuk
     menembus tepi layar di ponsel (margin negatif) tanpa menebak angka. */
  --pageGutter: clamp(24px, 5vw, 56px);
  --grid2: 1fr;
  --grid3: 1fr;
  --grid4: repeat(2, minmax(0, 1fr));
  --heroCols: 1fr;
  --gHeroCols: 1fr;
  --dCols: 1fr;
  --dSpecCols: repeat(2, minmax(0, 1fr));
  --dHeroSpan: auto;
  --dThumbDisplay: none;
  --dAsidePos: static;
  --dGalPopCols: repeat(2, minmax(0, 1fr));
  --cmpCols: 120px repeat(auto-fit, minmax(140px, 1fr));
  --cmpMinW: 620px;
  --catGrid: repeat(2, minmax(0, 1fr));
  --eqGrid: repeat(2, minmax(0, 1fr));
  --collabGrid: 1fr;
  --collabStepGrid: repeat(2, minmax(0, 1fr));
  --ddCols: 1fr;
  --ndMetaCols: 1fr;
  --priceCols: 1.5fr .8fr .9fr;
  --priceMinW: 560px;
  --schGridCols: 64px repeat(auto-fit, minmax(88px, 1fr));
  --faqCols: 1fr;
  --termsCols: 1fr;
  --mkCols: 1fr;
  --faqRailDir: row;
  --faqRailPos: static;
  --termsRailDir: row;
  --termsRailPos: static;
  --footerCols: 1fr;
  --footerBrandSpan: auto;
  --headerH: 62px;
  --pagePadBottom: 0px;
  --heroMetaDeskDisplay: none;
  --heroMetaMobDisplay: flex;
  --trayBottom: 16px;
  --toastBottom: 96px;
  --useChipCols: repeat(2, minmax(0, 1fr));
  /* -- revisi Boxy [OKE]: beranda -- */
  --statGrid: repeat(2, 1fr);
  --statPad: 18px 16px;
  --chipGrid: repeat(2, minmax(0, 1fr));
  --chipPad: 16px 16px;
  --chipMinH: 0;
  --chipGap: 14px;
  --stepGrid: repeat(2, minmax(0, 1fr));
  --stepPad: 18px 16px 20px;
  --heroBtnFlex: 1 1 100%;
  --connectW: 100%;
  --hgTagDisp: none;
  --prNewGrid: repeat(2, minmax(0, 1fr));
  /* -- layar Career / Team / formulir -- */
  --careerRowCols: 1fr;
  --careerRowEnd: flex-start;
  --careerStepGrid: 1fr;
  --crMetaCols: 1fr;
  --fbFieldCols: 1fr;
  --paCols: 1fr;
  --paFieldCols: 1fr;
  --paDivider: 0;
  --paDividerB: 1px solid var(--line-200);
  --apCols: 1fr;
  --apFieldCols: 1fr;
  --apDivider: 0;
  --apDividerB: 1px solid var(--line-200);
  --teamCardGrid: 1fr;
  --teamJourneyCols: 1fr;
  --teamLeadCols: 1fr;
  --teamLeadGrid: 1fr;
  --teamShotGrid: repeat(2, minmax(0, 1fr));
}

@media (min-width: 480px) {
  :root {
    --teamLeadCols: 120px minmax(0, 1fr);
  }
}

@media (min-width: 560px) {
  :root {
    --heroBtnFlex: 0 0 auto;
    --paFieldCols: repeat(2, minmax(0, 1fr));
    --apFieldCols: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 620px) {
  :root {
    --statGrid: repeat(4, minmax(0, 1fr));
    --statPad: 30px 28px;
    --chipGrid: repeat(auto-fit, minmax(200px, 1fr));
    --chipPad: 28px 26px;
    --chipMinH: 150px;
    --chipGap: 20px;
    --stepGrid: repeat(auto-fit, minmax(220px, 1fr));
    --stepPad: 32px 28px 36px;
    --connectW: auto;
    --hgTagDisp: inline-block;
    --teamCardGrid: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  :root {
    --grid3: repeat(2, minmax(0, 1fr));
    --ndMetaCols: 150px 1fr;
    --collabStepGrid: repeat(2, minmax(0, 1fr));
    --useChipCols: repeat(3, minmax(0, 1fr));
    --careerStepGrid: repeat(2, minmax(0, 1fr));
    --crMetaCols: 200px minmax(0, 1fr);
    --teamShotGrid: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 760px) {
  :root {
    --fbFieldCols: repeat(2, minmax(0, 1fr));
    --teamJourneyCols: 160px minmax(0, 1fr);
    --prNewGrid: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  :root {
    --careerRowCols: 150px minmax(0, 1fr) 110px;
    --careerRowEnd: flex-end;
    --paCols: minmax(0, 0.9fr) minmax(0, 1.1fr);
    --paDivider: 1px solid var(--line-200);
    --paDividerB: 0;
    --apCols: minmax(0, 0.9fr) minmax(0, 1.1fr);
    --apDivider: 1px solid var(--line-200);
    --apDividerB: 0;
    --teamLeadGrid: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --grid2: repeat(2, minmax(0, 1fr));
    --dSpecCols: repeat(3, minmax(0, 1fr));
    --eqGrid: repeat(3, minmax(0, 1fr));
    --catGrid: repeat(3, minmax(0, 1fr));
    --footerCols: repeat(2, minmax(0, 1fr));
    --footerBrandSpan: span 2;
    --dGalPopCols: repeat(3, minmax(0, 1fr));
    --priceCols: 1.6fr .8fr .9fr;
  }
}

@media (min-width: 1000px) {
  :root {
    --grid3: repeat(3, minmax(0, 1fr));
    --grid4: repeat(4, minmax(0, 1fr));
    --heroCols: 7fr 5fr;
    --careerStepGrid: repeat(4, minmax(0, 1fr));
    --teamCardGrid: repeat(4, minmax(0, 1fr));
    --teamShotGrid: repeat(4, minmax(0, 1fr));
    --gHeroCols: 1.15fr .85fr;
    --dCols: 1.35fr .65fr;
    --dThumbDisplay: flex;
    --dAsidePos: sticky;
    --eqGrid: repeat(4, minmax(0, 1fr));
    --catGrid: repeat(4, minmax(0, 1fr));
    --collabGrid: repeat(3, minmax(0, 1fr));
    --collabStepGrid: repeat(4, minmax(0, 1fr));
    --ddCols: 1.05fr .95fr;
    --faqCols: 220px 1fr;
    --termsCols: 250px 1fr;
    --mkCols: repeat(2, minmax(0, 1fr));
    --faqRailDir: column;
    --faqRailPos: sticky;
    --termsRailDir: column;
    --termsRailPos: sticky;
    --footerCols: 1.4fr repeat(4, minmax(0, 1fr));
    --footerBrandSpan: auto;
    --headerH: 70px;
    --heroMetaDeskDisplay: block;
    --heroMetaMobDisplay: none;
    --useChipCols: repeat(6, minmax(0, 1fr));
  }
}

/* ---------------------------------------------- 1b. blok style responsif utuh
   Prototype menghitung SATU string style lengkap per lebar layar (featWrap dkk).
   Di sini string itu jadi class: kartu unggulan & kartu dukungan beranda menjadi
   korsel geser (scroll-snap) di layar sempit dan grid di layar lebar. */
.vs-feat-wrap {
  margin-top: 28px; display: flex; gap: 1px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  background: var(--line-200); border: 1px solid var(--line-200);
}
.vs-feat-card { flex: 0 0 72%; scroll-snap-align: start; }
.vs-sup-wrap {
  margin-top: 28px; display: flex; gap: 1px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  background: var(--line-200); border: 1px solid var(--line-200);
}
.vs-sup-card {
  display: flex; flex-direction: column; background: #fff; color: var(--ink-900);
  flex: 0 0 78%; scroll-snap-align: start;
}
.vs-sup-img { aspect-ratio: 16/10; border-bottom: 1px solid var(--line-100); }
.vs-sup-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

/* Tiga statistik grup ruang. Di 375px tiap sel hanya ~110px, sedangkan nilai
   seperti "Kapasitas TBD" memuat satu kata selebar 96px — kata itu menembus sekat
   ke kolom sebelahnya. Di layar sempit ketiganya menumpuk supaya tiap nilai dapat
   lebar penuh. */
.vs-groupstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .vs-groupstats { grid-template-columns: 1fr; }
}

/* Baris "label kiri — nilai kanan" (benefit member di beranda, biaya lain di /pricing).
   Di layar lebar nilai kanannya TETAP kaku satu baris seperti aslinya. Baru di layar
   sempit ia boleh menyusut dan turun baris; tanpa ini kalimatnya terpotong di tengah
   kata DAN ikut menyeret lebar halaman keluar layar karena flex:none menolak mengecil. */
.vs-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.vs-kv-value { flex: none; }
@media (max-width: 619px) {
  /* Di layar sempit label dan nilai BERTUMPUK, tidak berebut satu baris. Kalau
     dipaksa berdampingan, nilainya patah di tempat yang merusak arti —
     "Rp50.000 /" lalu "orang", "Rp650.000 –" lalu "1.000.000". */
  .vs-kv-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .vs-kv-name { min-width: 0; }
  .vs-kv-value { flex: 0 1 auto; min-width: 0; text-align: left; }
}

@media (min-width: 620px) {
  .vs-feat-wrap {
    margin-top: clamp(36px, 5vw, 56px); display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible;
  }
  .vs-feat-card { flex: none; }
  .vs-sup-wrap {
    margin-top: clamp(32px, 4vw, 48px); display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible;
  }
  .vs-sup-card { flex: none; }
  .vs-sup-img { aspect-ratio: 16/9; }
  .vs-sup-body { gap: 7px; }
}
@media (min-width: 1024px) {
  .vs-feat-wrap { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Batang aksi bawah hanya muncul di layar sempit, jadi ruang bawah halaman
   hanya perlu ditambah di sana. */
@media (max-width: 999.98px) {
  body:has(.vs-sticky) { --pagePadBottom: 0px; }
}

/* ------------------------------------------------------------- 2. dasar & gerak */
body { background: #fff; color: var(--ink-800); font-family: var(--font-body); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink-900); }
img { max-width: 100%; display: block; }
button { font: inherit; }

@keyframes vsShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes vsFadeUp  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes vsFade    { from { opacity: 0; } to { opacity: 1; } }
@keyframes vs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes vsOverlay { 0% { opacity: 0; } 18% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vsBolt    { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1); } }
@keyframes vs-holo   { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------ 3. tampil per breakpoint */
.vs-desk { display: contents; }
.vs-mob  { display: none; }
@media (max-width: 999.98px) {
  .vs-desk { display: none; }
  .vs-mob  { display: contents; }
}

/* --------------------------------------------------------------- 4. lompat konten */
.vs-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--vs-yellow); color: var(--ink-900);
  padding: 12px 18px; font-size: 13px; font-weight: 700;
}
.vs-skip:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------- 5. slot gambar */
.vs-slot {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(5,5,5,.035) 0 8px, transparent 8px 16px),
    var(--ink-050);
}
.vs-slot-txt {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle);
  max-width: 24ch; line-height: 1.6;
}
.vs-slot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------- CMS pages */
.cms-page { background: var(--surface-0); }
.cms-page-inner { width: min(100%, var(--container-md)); margin: 0 auto; padding: var(--space-11) var(--gutter) var(--space-14); }
.cms-breadcrumb { display: flex; align-items: center; gap: var(--space-3); color: var(--text-subtle); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--ls-label-sm); text-transform: uppercase; }
.cms-breadcrumb a { color: var(--text-subtle); }
.cms-page-title { margin: var(--space-6) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: clamp(var(--text-display), 6vw, var(--text-display-lg)); letter-spacing: var(--ls-display); line-height: var(--lh-tight); }
.cms-page-content { margin-top: var(--space-10); }
.cms-block { margin-top: var(--space-7); }
.cms-block:first-child { margin-top: 0; }
.cms-block-richtext { color: var(--text-body); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.cms-rich-text { min-width: 0; line-height: inherit; }
.cms-rich-text > :first-child { margin-top: 0; }
.cms-rich-text > :last-child { margin-bottom: 0; }
.cms-rich-text p { margin: .65em 0 0; color: inherit; font: inherit; line-height: inherit; }
.cms-rich-text h1, .cms-rich-text h2, .cms-rich-text h3, .cms-rich-text h4, .cms-rich-text h5, .cms-rich-text h6 { margin: 1em 0 .45em; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.cms-rich-text ul, .cms-rich-text ol { margin: .75em 0; padding-left: 1.4em; }
.cms-rich-text blockquote { margin: 1em 0; border-left: var(--space-1) solid var(--brand); padding: .6em 1em; background: var(--bg-subtle); color: var(--text-body); }
.cms-rich-text figure { margin: 1em 0; }
.cms-rich-text img { width: auto; max-width: 100%; height: auto; }
.cms-rich-text figcaption { margin-top: var(--space-2); color: var(--text-subtle); font-size: var(--text-xs); }
.cms-rich-text table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1em 0; }
.cms-rich-text th, .cms-rich-text td { border: 1px solid var(--border-default); padding: var(--space-3); text-align: left; vertical-align: top; }
.cms-rich-text th { color: var(--text-strong); background: var(--bg-subtle); font-weight: var(--fw-semibold); }
.cms-rich-text pre { overflow-x: auto; margin: 1em 0; padding: var(--space-5); color: var(--surface-0); background: var(--text-strong); font-family: var(--font-mono); font-size: var(--text-xs); }
.cms-rich-text iframe { display: block; width: 100%; min-height: 320px; margin: 1em 0; border: 0; }
.cms-block-richtext p { margin: var(--space-5) 0 0; }
.cms-block-richtext p:first-child { margin-top: 0; }
.cms-block-richtext h2, .cms-block-richtext h3, .cms-block-richtext h4 { margin: var(--space-10) 0 var(--space-4); color: var(--text-strong); font-family: var(--font-display); line-height: var(--lh-snug); }
.cms-block-richtext ul, .cms-block-richtext ol { padding-left: var(--space-8); }
.cms-block-richtext blockquote { margin: var(--space-8) 0; padding: var(--space-4) var(--space-6); border-left: var(--space-2) solid var(--brand); color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-semibold); }
.cms-block-heading { color: var(--text-strong); font-family: var(--font-display); line-height: var(--lh-snug); }
.cms-block-image { margin-top: var(--space-8); }
.cms-block-image img { width: 100%; border: 1px solid var(--border-default); }
.cms-block-image figcaption { margin-top: var(--space-3); color: var(--text-subtle); font-size: var(--text-xs); }
.cms-block-feature { padding: var(--space-10); color: var(--text-on-dark); background: var(--brand-gradient); box-shadow: var(--shadow-identity); }
.cms-block-feature h2 { max-width: 18ch; margin: var(--space-4) 0 0; color: var(--text-on-dark); font-family: var(--font-display); font-size: var(--text-display); line-height: var(--lh-tight); }
.cms-block-divider { border: 0; border-top: 1px solid var(--border-default); }
.cms-block-spacer { min-height: var(--space-10); }
.cms-node { width: 100%; }
.cms-node--section { margin-top: var(--space-10); padding: var(--space-8) 0; }
.cms-node--section:first-child { margin-top: 0; }
.cms-node--container, .cms-node--column { min-width: 0; }
.cms-node--columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
.cms-node--preset-1 .cms-node--columns, .cms-node--columns.cms-node--preset-1 { grid-template-columns: 1fr; }
.cms-node--columns.cms-node--preset-3-equal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cms-node--columns.cms-node--preset-2-33-67 { grid-template-columns: 1fr 2fr; }
.cms-node--columns.cms-node--preset-2-67-33 { grid-template-columns: 2fr 1fr; }
.cms-block-feature--cta { background: var(--bg-ink); }
.cms-block-feature p { max-width: 52ch; margin: var(--space-5) 0 0; color: var(--text-on-dark-muted); font-size: var(--text-md); line-height: var(--lh-relaxed); }
.cms-block-button { margin-top: var(--space-6); }
.cms-block-video iframe { width: 100%; min-height: calc(var(--space-14) + var(--space-14)); border: 0; background: var(--bg-inset); }
.cms-block-map, .cms-block-form, .cms-block-alert, .cms-block-metric { padding: var(--space-6); border: 1px solid var(--border-default); background: var(--bg-subtle); }
.cms-block-map p, .cms-block-form p, .cms-block-alert p { margin: var(--space-3) 0 0; color: var(--text-muted); }
.cms-block-list { display: grid; gap: var(--space-3); }
.cms-block-list-item { padding: var(--space-4) var(--space-5); border: 1px solid var(--border-default); background: var(--surface-0); color: var(--text-body); }
.cms-block-testimonial, .cms-block-quote { margin: var(--space-7) 0 0; padding: var(--space-6); border-left: var(--space-2) solid var(--brand); background: var(--bg-subtle); }
.cms-block-testimonial blockquote, .cms-block-quote { color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-h4); line-height: var(--lh-snug); }
.cms-block-testimonial figcaption, .cms-block-quote cite { display: block; margin-top: var(--space-4); color: var(--text-subtle); font-size: var(--text-xs); font-style: normal; }
.cms-block-rating { color: var(--brand-ink); font-size: var(--text-h4); }
.cms-block-rating span { margin-left: var(--space-3); color: var(--text-muted); font-size: var(--text-sm); }
.cms-block-metric { display: flex; flex-direction: column; gap: var(--space-2); }
.cms-block-metric strong { color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-display); }
.cms-block-metric span { color: var(--text-muted); font-size: var(--text-sm); }
.cms-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.cms-collection-card { min-width: 0; overflow: hidden; border: 1px solid var(--border-default); background: var(--surface-0); box-shadow: var(--shadow-xs); }
.cms-collection-card-media { min-height: calc(var(--space-14) + var(--space-8)); background: var(--bg-inset); }
.cms-collection-card-body { padding: var(--space-5); }
.cms-collection-card-body .vs-kicker { color: var(--text-subtle); }
.cms-collection-card-body h3 { margin: var(--space-3) 0 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-h4); }
.cms-collection-card-body p { margin: var(--space-3) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-relaxed); }
.cms-collection-card-body .vs-btn { margin-top: var(--space-5); }
.cms-block-menu, .cms-block-social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cms-block-menu a, .cms-block-social span { padding: var(--space-3) var(--space-4); border: 1px solid var(--border-default); color: var(--text-body); background: var(--surface-0); }
.cms-empty { padding: var(--space-6); color: var(--text-subtle); border: 1px dashed var(--border-input); }
.cms-generated-form { display: grid; gap: var(--space-5); }
.cms-generated-form h3 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-size: var(--text-h3); }
.cms-form-field { display: grid; gap: var(--space-2); color: var(--text-strong); font-size: var(--text-sm); font-weight: var(--fw-semibold); }
.cms-form-field input, .cms-form-field textarea, .cms-form-field select { width: 100%; border: 1px solid var(--border-input); padding: var(--space-3) var(--space-4); color: var(--text-body); background: var(--surface-0); font: inherit; font-weight: var(--fw-regular); }
.cms-form-field textarea { resize: vertical; }
.cms-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .cms-node--columns, .cms-node--columns.cms-node--preset-3-equal, .cms-node--columns.cms-node--preset-2-33-67, .cms-node--columns.cms-node--preset-2-67-33, .cms-collection-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------- 6. panel mega-menu */
.vs-panel[hidden] { display: none; }
.vs-panel { animation: vsFade .14s ease; }

/* ------------------------------------------------------------- 7. akordeon */
.vs-acc-body[hidden] { display: none; }
[data-act^="acc:"] svg { transition: transform .18s ease; }
[data-act^="acc:"][aria-expanded="true"] svg { transform: rotate(180deg); }

/* --------------------------------------------------------- 8. panel bawah/sheet */
.vs-sheet { left: 0; right: 0; bottom: 0; max-height: 86vh; overflow-y: auto; }
@media (min-width: 768px) {
  .vs-sheet { left: auto; right: 0; top: 0; bottom: 0; width: min(440px, 92vw); max-height: none; }
}

/* -------------------------------------------------------- 9. laci & pencarian */
.vs-drawer[hidden], .vs-search[hidden] { display: none; }
.vs-drawer, .vs-search { position: fixed; inset: 0; z-index: 120; }
.vs-drawer-scrim { position: absolute; inset: 0; background: rgba(5,5,5,.44); animation: vsFade .15s ease; }
/* Laci ponsel — anatomi menu mobile prototype: lapisan penuh layar, rata kanan,
   nomor urut mono, nama tujuan berukuran display. */
.vs-drawer-sheet {
  position: absolute; inset: 0; background: #fff; overflow-y: auto;
  display: flex; flex-direction: column; animation: vsFade .16s ease;
}
.vs-drawer-bar {
  position: sticky; top: 0; z-index: 2; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line-200);
}
.vs-drawer-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .02em; color: var(--ink-900); }
.vs-drawer-x, .vs-search-x { background: none; border: 0; cursor: pointer; color: var(--ink-800); display: flex; padding: 10px; }
.vs-drawer-body {
  flex: 1; display: flex; flex-direction: column;
  min-height: calc(100dvh - 56px); padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
}
.vs-drawer-kicker {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-subtle); text-align: right;
}
.vs-drawer-item {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 12px;
  width: 100%; padding: 8px 0; background: none; border: 0; cursor: pointer; text-align: right;
  transition: opacity .15s ease;
}
.vs-drawer-item:hover, .vs-drawer-item:focus-visible { opacity: .6; }
.vs-drawer-num { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; color: var(--text-subtle); }
.vs-drawer-label {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(26px, 7.6vw, 34px);
  line-height: 1.06; letter-spacing: -0.025em; color: var(--ink-900);
}
.vs-drawer-chev { align-self: center; flex: none; color: var(--ink-900); transition: transform .18s ease; }
.vs-drawer-toggle[aria-expanded="true"] .vs-drawer-chev { transform: rotate(180deg); }
.vs-drawer-sub { display: flex; flex-direction: column; gap: 12px; padding: 6px 0 14px; }
.vs-drawer-sub[hidden] { display: none; }
.vs-drawer-grp {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
  padding-bottom: 7px; border-bottom: 1px solid var(--ink-900);
}
.vs-drawer-grp-meta { min-width: 0; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-drawer-grp-name { font-size: 13px; font-weight: 700; color: var(--ink-900); flex: none; }
.vs-drawer-rooms { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.vs-drawer-rooms--pair { margin-top: 0; }
.vs-drawer-room {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 3px;
  min-height: 48px; padding: 8px 10px; border: 1px solid var(--line-200); text-align: right;
}
.vs-drawer-room-name { font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--ink-900); }
.vs-drawer-room-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: var(--text-subtle); }
.vs-drawer-room--ink { background: var(--ink-900); border-color: var(--ink-900); }
.vs-drawer-room--ink .vs-drawer-room-name { color: #fff; font-weight: 700; }
.vs-drawer-room--ink .vs-drawer-room-meta { color: rgba(255,255,255,.6); }
.vs-drawer-room--brand { background: var(--vs-yellow); border-color: var(--ink-900); }
.vs-drawer-room--brand .vs-drawer-room-name { font-weight: 700; }
.vs-drawer-room--brand .vs-drawer-room-meta { color: rgba(5,5,5,.6); }
.vs-drawer-foot { margin-top: auto; padding-top: 26px; }
.vs-drawer-rule { height: 1px; background: var(--ink-900); }
.vs-drawer-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.vs-drawer-act {
  display: flex; align-items: center; justify-content: center; height: 50px;
  border: 1px solid var(--ink-900); color: var(--ink-900); font-size: 13px; font-weight: 700;
}
.vs-drawer-act--brand { background: var(--vs-yellow); }
.vs-drawer-wa {
  display: flex; align-items: center; justify-content: space-between; height: 50px;
  margin-top: 10px; padding: 0 18px; background: var(--ink-900); color: #fff;
  font-size: 13px; font-weight: 700;
}

.vs-search-panel {
  position: absolute; top: 0; left: 0; right: 0; background: #fff;
  border-bottom: 1px solid var(--line-200); padding: 20px clamp(20px, 5vw, 56px) 22px;
  animation: vsFade .15s ease;
}
.vs-search-row { display: flex; gap: 10px; margin-top: 10px; align-items: stretch; }
.vs-search-row input {
  flex: 1; min-width: 0; height: 52px; border: 1px solid var(--border-input);
  background: #fff; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink-900);
}
.vs-search-go { height: 52px; padding: 0 22px; background: var(--ink-900); color: #fff; border: 0; font-size: 13px; font-weight: 700; cursor: pointer; }
.vs-search-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.vs-search-quick a {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--line-200); padding: 7px 12px;
}
.vs-search-quick a:hover { border-color: var(--ink-900); color: var(--ink-900); }

/* -------------------------------------------------- 10. baki perbandingan */
.vs-cmp-tray[hidden] { display: none; }
.vs-cmp-tray { position: fixed; left: 0; right: 0; bottom: var(--trayBottom); z-index: 60; padding: 0 12px; pointer-events: none; }
.vs-cmp-inner {
  max-width: 760px; margin: 0 auto; background: var(--ink-900); color: #fff;
  padding: 10px 12px; display: flex; align-items: center; gap: 12px;
  pointer-events: auto; animation: vsFadeUp .2s ease; box-shadow: var(--shadow-pop);
}
.vs-cmp-chips { display: flex; gap: 6px; flex: 1; min-width: 0; overflow: hidden; align-items: center; }
.vs-cmp-chip {
  display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); padding: 6px 9px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.vs-cmp-dot { width: 8px; height: 8px; background: var(--vs-yellow); flex: none; }
.vs-cmp-x { background: none; border: 0; color: rgba(255,255,255,.6); cursor: pointer; padding: 0; display: flex; }
.vs-cmp-x:hover { color: #fff; }
.vs-cmp-hint { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.vs-cmp-clear { background: none; border: 0; color: rgba(255,255,255,.65); font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px; }
.vs-cmp-clear:hover { color: #fff; }
.vs-cmp-go { background: var(--vs-yellow); color: var(--ink-900); padding: 9px 14px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.vs-cmp-go:hover { background: #F0E900; color: var(--ink-900); }
@media (max-width: 640px) { .vs-cmp-hint { display: none; } }

/* ------------------------------------------------------- 11. batang aksi bawah */
.vs-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line-200);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; align-items: center;
}
.vs-sticky-info { flex: 1; min-width: 0; }
.vs-sticky-name { font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-sticky-price { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.vs-sticky-ghost, .vs-sticky-cta {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 48px; font-size: 14px; font-weight: 700;
}
.vs-sticky-ghost { border: 1px solid var(--border-input); color: var(--ink-900); background: #fff; }
.vs-sticky-cta { background: var(--ink-900); color: #fff; }
.vs-sticky-cta:hover { color: #fff; background: var(--primary-hover); }
.vs-sticky-spacer { height: 78px; }
/* Baki perbandingan dan bilah booking sama-sama menempel di dasar layar dan
   tidak saling tahu — di ponsel keduanya bertumpuk dan baki menutupi tombol
   Booking. Saat bilah booking hadir (hanya di bawah 1000px), baki dinaikkan
   setinggi bilah itu plus jarak aman. */
@media (max-width: 999px) {
  body:has(.vs-sticky) { --trayBottom: calc(78px + env(safe-area-inset-bottom) + 12px); }
}
@media (min-width: 1000px) { .vs-sticky, .vs-sticky-spacer { display: none; } }

/* ------------------------------------------------------------ 12. formulir */
.vs-form input, .vs-form textarea, .vs-form select {
  width: 100%; margin-top: 8px; border: 1px solid var(--border-input); background: #fff;
  padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ink-900);
}
.vs-form textarea { resize: vertical; min-height: 96px; }
.vs-form input:focus-visible, .vs-form textarea:focus-visible { outline: none; border-color: var(--ink-900); box-shadow: var(--shadow-focus); }
.vs-radio-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vs-radio { display: inline-flex; }
.vs-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.vs-radio span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 14px;
  border: 1px solid var(--line-200); font-size: 13px; font-weight: 600;
  color: var(--ink-800); cursor: pointer;
}
.vs-radio input:checked + span { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.vs-radio input:focus-visible + span { box-shadow: var(--shadow-focus); }

/* ------------------------------------------------ 14. bilah filter katalog */
/* Dua cabang dirender berdampingan, CSS yang memilih — pola yang sama dipakai
   `.vs-desk` di seluruh situs. Di ponsel filter jadi dropdown (rel gulir
   menyembunyikan pilihan di luar layar; dropdown menampilkan semuanya sekaligus
   dan memakai pemilih bawaan sistem). Di layar lebar chip tetap dipakai karena
   semuanya muat sekaligus dan sekali klik. */
.vs-filterbar-selects { display: none; }
/* Dipakai /equipment, /props, dan /studios. Di layar lebar chip tetap
   membungkus seperti semula. Di ponsel dua baris chip yang membungkus memakan
   hampir setengah layar sebelum satu produk pun terlihat, jadi tiap baris
   berubah jadi rel gulir satu baris bergaya marketplace: label disembunyikan
   (teks chip sudah menjelaskan dirinya), rel menembus tepi layar, dan jumlah
   item dipaku di kanan supaya tetap terbaca saat rel digulir. */
.vs-filterbar-row > button { flex: none; }

@media (max-width: 639.98px) {
  .vs-filterbar { padding: 14px 0 !important; gap: 10px !important; }
  .vs-filterbar-label, .vs-filterbar-gap { display: none; }

  /* Halaman yang menyediakan dropdown memakainya sebagai ganti rel chip.
     Halaman yang tidak (mis. /studios, yang punya panel Filter sendiri) tetap
     memakai rel gulir di bawah. */
  .vs-filterbar:has(.vs-filterbar-selects) .vs-filterbar-row { display: none !important; }
  .vs-filterbar-selects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 10px;
  }
  .vs-filterbar-select { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .vs-filterbar-select > span {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle);
  }
  .vs-filterbar-select > select {
    width: 100%; height: 46px; padding: 0 34px 0 12px;
    font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-900);
    background: #fff; border: 1px solid var(--line-200); border-radius: 0;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
  }
  .vs-filterbar-select > select:focus-visible { outline: none; border-color: var(--ink-900); box-shadow: var(--shadow-focus); }
  .vs-filterbar-selects-count {
    grid-column: 1 / -1;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-subtle);
    text-align: right;
  }

  .vs-filterbar-row {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin-inline: calc(var(--pageGutter) * -1);
    padding-inline: var(--pageGutter);
  }
  .vs-filterbar-row::-webkit-scrollbar { display: none; }
  .vs-filterbar-row > button {
    scroll-snap-align: start;
    padding: 9px 14px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }

  /* Jumlah item ikut di dalam rel, jadi dipaku ke tepi kanan dengan latar putih
     supaya chip yang lewat di belakangnya tidak menumpuk teksnya. */
  .vs-filterbar-count {
    position: sticky;
    right: calc(var(--pageGutter) * -1);
    flex: none;
    margin-left: auto;
    padding: 0 var(--pageGutter) 0 16px;
    background: #fff;
    box-shadow: -16px 0 14px -10px #fff;
  }
}

/* ------------------------------- 15. overlay detail item (/equipment) */
/* Dibuka app.js tanpa memuat ulang halaman. Di ponsel tampil sebagai lembar
   yang naik dari bawah (pola marketplace), di layar lebar sebagai dialog
   tengah. Sudut tetap siku dan garis 1px mengikuti bahasa visual situs. */
.vs-eq[hidden] { display: none !important; }
.vs-eq { position: fixed; inset: 0; z-index: 94; display: flex; align-items: flex-end; justify-content: center; }
.vs-eq-scrim { position: absolute; inset: 0; background: rgba(5, 5, 5, .42); backdrop-filter: blur(3px); }

.vs-eq-sheet {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: 100%; max-height: 92vh;
  background: #fff; border-top: 1px solid var(--line-200);
  animation: vsEqUp .18s cubic-bezier(.32, .72, 0, 1);
}
@keyframes vsEqUp { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.vs-eq-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; padding: 9px; border: 0; cursor: pointer;
  background: #fff; color: var(--ink-800); box-shadow: var(--shadow-card);
}

.vs-eq-media { flex: none; background: var(--ink-050); border-bottom: 1px solid var(--line-200); }
.vs-eq-media[hidden] { display: none; }
.vs-eq-media img { display: block; width: 100%; height: clamp(180px, 34vh, 280px); object-fit: cover; }

.vs-eq-body { flex: 1; overflow: auto; padding: 20px 22px 4px; }
.vs-eq-cat {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle);
}
.vs-eq-name {
  font-family: var(--font-display); font-weight: 800; font-size: 21px;
  letter-spacing: -0.01em; color: var(--ink-900); margin-top: 6px; text-wrap: balance;
}
.vs-eq-tag {
  display: inline-block; margin-top: 14px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px;
  background: var(--tag-neutral-bg); color: var(--tag-neutral-text); border: 1px solid var(--tag-neutral-border);
}
.vs-eq-tag[data-tone="success"] { background: var(--tag-success-bg); color: var(--tag-success-text); border-color: var(--tag-success-border); }
.vs-eq-tag[data-tone="warning"] { background: var(--tag-warning-bg); color: var(--tag-warning-text); border-color: var(--tag-warning-border); }
.vs-eq-tag[data-tone="danger"]  { background: var(--tag-danger-bg);  color: var(--tag-danger-text);  border-color: var(--tag-danger-border); }
.vs-eq-tag[data-tone="info"]    { background: var(--tag-info-bg);    color: var(--tag-info-text);    border-color: var(--tag-info-border); }
.vs-eq-tag[data-tone="blue"]    { background: var(--tag-blue-bg);    color: var(--tag-blue-text);    border-color: var(--tag-blue-border); }
.vs-eq-tag[data-tone="orange"]  { background: var(--tag-orange-bg);  color: var(--tag-orange-text);  border-color: var(--tag-orange-border); }

.vs-eq-rows { margin-top: 18px; border: 1px solid var(--line-200); }
.vs-eq-rows > div { display: flex; justify-content: space-between; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--line-100); }
.vs-eq-rows > div:last-child { border-bottom: 0; }
.vs-eq-rows span:first-child {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-subtle);
}
.vs-eq-rows span:last-child { font-size: 13px; font-weight: 600; color: var(--ink-800); text-align: right; }

.vs-eq-note {
  margin-top: 14px; padding: 13px 15px; font-size: 13px; line-height: 1.6;
  color: var(--text-muted); background: var(--surface-1); border: 1px solid var(--line-200);
}
.vs-eq-note[hidden] { display: none; }

.vs-eq-foot { flex: none; padding: 16px 22px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-200); }
.vs-eq-wa {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  height: 54px; background: var(--vs-yellow); color: var(--ink-900);
  border: 1px solid var(--ink-900); font-size: 14px; font-weight: 700;
}

@media (min-width: 640px) {
  .vs-eq { align-items: center; padding: 32px; }
  .vs-eq-sheet { width: min(460px, 100%); max-height: 86vh; border: 1px solid var(--line-200); box-shadow: var(--shadow-card); }
}
@media (prefers-reduced-motion: reduce) { .vs-eq-sheet { animation: none; } }

/* ----------------------------------------------------------- 13. lain-lain */
.vs-page { min-height: 100vh; padding-bottom: var(--pagePadBottom); }
[data-cursor="not-allowed"] { cursor: not-allowed; }
::selection { background: var(--vs-yellow); color: var(--vs-black); }

@media print {
  .vs-cmp-tray, .vs-sticky, .vs-drawer, .vs-search, header, footer { display: none !important; }
}

/* Video ruangan berputar sendiri tanpa kontrol; sembunyikan seluruh bloknya bagi
   pengunjung yang meminta pengurangan gerak. */
@media (prefers-reduced-motion: reduce) { [data-studio-video] { display: none !important; } }