/* ==========================================================================
   Betalphi — style.css
   Konsep: kertas tiket thermal, tinta biru stempel, dan LED amber
   dari layar mesin antrian.
   ========================================================================== */

/* ---------- Font (self-hosted, lisensi SIL OFL) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations"),
       url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Doto";
  src: url("../fonts/doto-latin-wght-normal.woff2") format("woff2-variations"),
       url("../fonts/doto-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Token ---------- */
:root {
  --paper: #F7F8F5;      /* kertas thermal */
  --paper-2: #ECEFEA;    /* kertas, bagian selang-seling */
  --white: #FFFFFF;
  --ink: #1A2233;        /* tinta */
  --ink-2: #4A5468;      /* teks sekunder */
  --rule: #D3D8DF;       /* garis */
  --stamp: #2F45C8;      /* biru stempel: link & tombol */
  --stamp-dark: #2235A3;
  --led: #FFB224;        /* LED amber layar antrian */
  --led-soft: #FFD27A;
  --panel: #161B26;      /* rumah mesin / layar */
  --panel-2: #232A3A;
  --danger: #B42318;

  --font: "Archivo", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --dot: "Doto", "Archivo", monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
  --step-3: clamp(2rem, 1.35rem + 2.6vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.4rem + 4.2vw, 4.85rem);

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(4.5rem, 3rem + 6vw, 8rem);
  --radius: 10px;
  --radius-sm: 6px;
  --press: 0 4px 0 var(--ink);
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; line-height: 1.08; font-weight: 760; text-wrap: balance; }
h2 { font-size: var(--step-3); font-stretch: 112%; letter-spacing: -0.015em; }
h3 { font-size: var(--step-1); font-stretch: 104%; font-weight: 700; line-height: 1.25; }
p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
a { color: var(--stamp); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--stamp-dark); }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: var(--radius-sm);
}
.skip-link:focus { top: 12px; color: var(--white); }
.noscript { padding: 16px; text-align: center; background: var(--led-soft); margin: 0; }

/* ---------- Tombol ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.35em;
  border: 2px solid var(--ink); border-radius: var(--radius-sm);
  font-weight: 650; font-stretch: 105%; line-height: 1.1; text-decoration: none;
  cursor: pointer; background: none;
  box-shadow: var(--press);
  transition: transform 90ms ease, box-shadow 90ms ease, background-color 150ms ease;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn--primary { background: var(--stamp); color: var(--white); }
.btn--primary:hover { background: var(--stamp-dark); color: var(--white); }
.btn--ghost { background: var(--white); color: var(--ink); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); }
.btn--led { background: var(--led); color: var(--panel); border-color: var(--led); box-shadow: 0 4px 0 #B97900; }
.btn--led:hover { background: var(--led-soft); color: var(--panel); }
.btn--led:active { box-shadow: 0 1px 0 #B97900; }
.btn--sm { min-height: 40px; padding: 0.45em 1em; font-size: var(--step--1); box-shadow: 0 3px 0 var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.site-header.is-scrolled { border-bottom-color: var(--rule); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__mark { display: block; width: 36px; height: 36px; }
.brand__mark svg { width: 100%; height: 100%; }
.brand__word { font-weight: 800; font-stretch: 125%; font-size: 1.3rem; letter-spacing: -0.02em; }
.brand--small .brand__mark { width: 30px; height: 30px; }
.brand--small .brand__word { font-size: 1.1rem; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav ul { display: flex; list-style: none; gap: 26px; }
.site-nav ul a { color: var(--ink); text-decoration: none; font-weight: 560; font-size: 0.98rem; padding-block: 6px; white-space: nowrap; }
.site-nav ul a:hover { color: var(--stamp); text-decoration: underline; }

.nav-toggle {
  display: none; align-items: center; gap: 10px;
  background: none; border: 2px solid var(--ink); border-radius: var(--radius-sm);
  padding: 8px 12px; cursor: pointer; font-weight: 650;
}
.nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
  display: block; width: 18px; height: 2px; background: var(--ink); position: relative; transition: transform 200ms ease;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1220px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 16px;
    padding: 12px var(--gutter) 24px;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    display: none;
  }
  .site-nav.is-open { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 14px 0; font-size: 1.15rem; border-bottom: 1px solid var(--rule); }
  .site-nav .btn { align-self: flex-start; }
}

/* ---------- Hero ---------- */
.hero { padding-top: clamp(2.5rem, 1rem + 5vw, 5.5rem); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(32px, 5vw, 72px); align-items: start;
}
.hero__copy { padding-top: clamp(0px, 3vw, 40px); }
.hero__title {
  font-size: var(--step-4);
  font-weight: 820;
  font-stretch: 118%;
  line-height: 0.97;
  letter-spacing: -0.03em;
}
.hero__lead { font-size: var(--step-1); color: var(--ink-2); max-width: 36em; margin-top: 1.4em; line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2rem; }

/* Mesin & tiket */
.hero__machine { position: relative; max-width: 380px; width: 100%; justify-self: end; }
.printer {
  position: relative; z-index: 2;
  height: 64px; border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.06), 0 10px 24px -14px rgba(22,27,38,0.7);
}
.printer__led {
  position: absolute; left: 22px; top: 20px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--led); box-shadow: 0 0 10px 2px rgba(255,178,36,0.7);
}
.printer__slot {
  position: absolute; left: 34px; right: 34px; bottom: 12px; height: 8px; border-radius: 4px;
  background: #06080C; box-shadow: inset 0 2px 3px rgba(0,0,0,0.8);
}
.ticket-clip {
  position: relative; z-index: 1;
  margin: -14px 32px 0;
  clip-path: inset(0 -40px -60px -40px);
}
.ticket {
  --edge: 10px;
  background: var(--white);
  padding: 34px 26px calc(26px + var(--edge));
  color: var(--ink);
  text-align: center;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--edge) * 2) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--edge) * 2) 100%;
  transform-origin: 50% 0;
  animation: print-ticket 1.9s cubic-bezier(.3,.1,.25,1) 0.35s both;
}
.ticket-clip { filter: drop-shadow(0 16px 20px rgba(26,34,51,0.12)); }
@keyframes print-ticket {
  0%   { transform: translateY(-100%); }
  12%  { transform: translateY(-88%); }
  18%  { transform: translateY(-86%); }
  80%  { transform: translateY(0) rotate(0); }
  100% { transform: translateY(0) rotate(-1.6deg); }
}
.ticket__brand { font-weight: 800; font-stretch: 125%; font-size: 1.15rem; letter-spacing: -0.01em; margin: 0; }
.ticket__meta {
  display: flex; justify-content: center; gap: 14px;
  font-size: 0.8rem; color: var(--ink-2); margin: 4px 0 18px; font-variant-numeric: tabular-nums;
}
.ticket__label { margin: 0; font-size: 0.9rem; color: var(--ink-2); }
.ticket__number {
  font-family: var(--dot); font-weight: 900;
  font-size: clamp(3.2rem, 2.6rem + 2vw, 4.3rem); line-height: 1;
  margin: 8px 0 20px; white-space: nowrap;
}
.ticket__rows {
  margin: 0 0 18px; padding: 12px 0; text-align: left;
  border-top: 1.5px dashed var(--rule); border-bottom: 1.5px dashed var(--rule);
  font-size: 0.9rem;
}
.ticket__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.ticket__rows dt { color: var(--ink-2); }
.ticket__rows dd { margin: 0; font-weight: 650; }
.ticket__barcode { height: 46px; margin: 0 auto 12px; max-width: 230px; }
.ticket__barcode svg { width: 100%; height: 100%; }
.ticket__foot { font-size: 0.82rem; color: var(--ink-2); margin: 0; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticket { animation: none; transform: rotate(-1.6deg); }
  .btn, .site-header, .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { transition: none; }
}

/* Klien */
.clients {
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px 28px;
  margin-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-block: 24px;
  border-top: 1px solid var(--rule);
}
.clients__title { grid-column: 1 / -1; margin: 0; font-weight: 700; font-stretch: 108%; }
.clients__group { display: contents; }
.clients__label { margin: 0; color: var(--ink-2); font-size: var(--step--1); padding-top: 2px; }
.clients__list { display: flex; flex-wrap: wrap; list-style: none; gap: 6px 26px; }
.clients__list li { font-weight: 680; font-stretch: 108%; font-size: 1rem; }
.clients__list--sm li { font-weight: 560; font-stretch: 100%; font-size: 0.97rem; }
.clients__list .clients__more { color: var(--ink-2); font-weight: 450; }
@media (max-width: 700px) {
  .clients { grid-template-columns: 1fr; gap: 6px; }
  .clients__group { display: grid; gap: 6px; margin-top: 10px; }
}

/* Daftar pengguna (produk & detail) */
.users { margin: 0; font-size: 0.93rem; line-height: 1.5; color: var(--ink-2); }
.users__label { font-weight: 700; color: var(--ink); margin-right: 4px; }

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__machine { justify-self: center; max-width: 340px; }
  .hero__title { max-width: 12ch; }
}

/* ---------- Section umum ---------- */
.section { padding-block: var(--section); }
.section--alt { background: var(--paper-2); }
.section__head { max-width: 640px; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.section__lead { color: var(--ink-2); font-size: var(--step-1); line-height: 1.5; margin-top: 0.9rem; }

/* ---------- Layanan (tombol kiosk) ---------- */
.services {
  list-style: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px;
}
.services li { grid-column: span 2; display: flex; }
.services li:nth-child(4), .services li:nth-child(5) { grid-column: span 3; }
.service {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-content: start;
  width: 100%;
  padding: 22px 22px 20px;
  background: var(--white); color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 5px 0 var(--ink);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.service:hover { color: var(--ink); background: #FCFCFA; }
.service:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.service__code {
  grid-row: span 3;
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 8px;
  background: var(--panel); color: var(--led);
  font-family: var(--dot); font-weight: 900; font-size: 46px; line-height: 1;
  padding-bottom: 6px;
  text-shadow: 0 0 12px rgba(255,178,36,0.45);
}
.service__title { font-size: var(--step-1); font-weight: 720; font-stretch: 106%; line-height: 1.2; margin-top: 2px; }
.service__desc { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; margin: 0; }
.service__more { font-weight: 650; color: var(--stamp); font-size: 0.95rem; margin-top: 8px; }
.service:hover .service__more { text-decoration: underline; }

@media (max-width: 980px) {
  .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services li, .services li:nth-child(4), .services li:nth-child(5) { grid-column: span 1; }
  .services li:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .services { grid-template-columns: 1fr; }
  .services li:nth-child(5) { grid-column: span 1; }
  .service { padding: 18px; gap: 4px 16px; }
  .service__code { width: 52px; height: 52px; font-size: 38px; }
}

/* ---------- Cover ilustrasi ---------- */
.cover { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.cover svg { width: 100%; height: 100%; overflow: visible; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover .dot { font-family: var(--dot); font-weight: 900; }
.cover .txt { font-family: var(--font); font-weight: 700; }

/* ---------- Produk ---------- */
.products {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.product {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
.product--lead { grid-column: 1 / -1; flex-direction: row; }
.product--lead .product__cover { flex: 0 0 56%; }
.product--lead .cover { aspect-ratio: auto; height: 100%; min-height: 360px; }
.product--lead .product__body { justify-content: center; padding: clamp(24px, 3.5vw, 48px); }
.product--side .cover { aspect-ratio: 16 / 10; }
.products[data-sides="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.products[data-sides="3"] .product--side .product__name { font-size: var(--step-1); }
.product__body { padding: clamp(20px, 2.5vw, 30px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product__name { font-size: var(--step-2); font-stretch: 110%; font-weight: 780; letter-spacing: -0.01em; }
.product--side .product__name { font-size: var(--step-1); }
.product__summary { color: var(--ink-2); margin: 0; }
.product__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 8px; }
@media (max-width: 1080px) {
  .products[data-sides="3"] { grid-template-columns: 1fr; }
  .products[data-sides="3"] .product--side { flex-direction: row; }
  .products[data-sides="3"] .product--side .product__cover { flex: 0 0 44%; }
  .products[data-sides="3"] .product--side .cover { aspect-ratio: auto; height: 100%; min-height: 260px; }
}
@media (max-width: 860px) {
  .product--lead { flex-direction: column; }
  .product--lead .product__cover { flex: none; }
  .product--lead .cover { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}
@media (max-width: 680px) {
  .products { grid-template-columns: 1fr; }
  .product--side .cover { aspect-ratio: 4 / 3; }
  .products[data-sides="3"] .product--side { flex-direction: column; }
  .products[data-sides="3"] .product--side .cover { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}

/* Checklist & tag */
.checklist { list-style: none; display: grid; gap: 8px; }
.checklist li { position: relative; padding-left: 28px; line-height: 1.45; }
.checklist li::before {
  content: ""; position: absolute; left: 2px; top: 0.3em;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--stamp); border-bottom: 2.5px solid var(--stamp);
  transform: rotate(-45deg);
}
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li {
  font-size: 0.8rem; font-weight: 600; line-height: 1;
  padding: 6px 9px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2);
}

/* ---------- Filter ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding: 0.4em 1em;
  border: 1.5px solid var(--rule); border-radius: 999px;
  background: var(--white); color: var(--ink);
  font-weight: 600; font-size: 0.95rem; cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip__count { font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip[aria-pressed="true"] .chip__count { color: var(--led); }

/* ---------- Portfolio grid ---------- */
.projects {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;
}
.projects > li { display: flex; }
.projects > li[hidden] { display: none; }
.card {
  position: relative; display: flex; flex-direction: column; width: 100%;
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius);
  overflow: hidden;
}
.card:hover { border-color: var(--ink); }
.card:focus-within { border-color: var(--stamp); outline: 3px solid var(--stamp); outline-offset: 2px; }
.card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__client { margin: 0; font-size: var(--step--1); color: var(--ink-2); font-weight: 560; }
.card__title { font-size: 1.15rem; font-stretch: 104%; font-weight: 720; line-height: 1.25; }
.card__title button {
  all: unset; cursor: pointer;
}
.card__title button::after { content: ""; position: absolute; inset: 0; }
.card__title button:focus-visible { outline: none; }
.card__desc { margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.5; }
.card .tags { margin-top: auto; padding-top: 8px; }
.card__badge {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  font-size: 0.78rem; font-weight: 700; line-height: 1;
  padding: 7px 10px; border-radius: 999px;
  background: var(--led); color: var(--panel);
}
.card__badge--case { background: var(--stamp); color: var(--white); }

.card--cta {
  justify-content: center; align-items: flex-start; gap: 14px;
  padding: 28px; border: 2px dashed var(--rule); background: transparent;
  min-height: 300px;
}
.card--cta:hover { border-color: var(--rule); }
.card--cta .cta__num { font-family: var(--dot); font-weight: 900; font-size: 4rem; line-height: 1; color: var(--ink); }
.card--cta h3 { font-size: var(--step-1); }
.card--cta p { color: var(--ink-2); margin: 0; }

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

/* ---------- Studi kasus ---------- */
.case { background: var(--panel); color: #E8EBF2; padding-block: var(--section); }
.case__top {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 88px); align-items: start;
}
.case__device { position: sticky; top: 104px; }
.device {
  width: min(100%, 330px); margin-inline: auto;
  padding: 11px; border-radius: 46px;
  background: #07090D;
  box-shadow: 0 0 0 2px #2C3446, 0 40px 80px -30px rgba(0,0,0,0.85), 0 0 90px -20px rgba(255,178,36,0.22);
}
.device img { display: block; width: 100%; height: auto; border-radius: 36px; }
.case__client { color: var(--led-soft); font-weight: 600; margin: 0 0 14px; }
.case h2 { color: var(--white); }
.case__lead { color: #B9C0CE; font-size: var(--step-1); line-height: 1.55; margin-top: 1.1rem; max-width: 36em; }

.case__stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  margin: 2.2rem 0 0; border-top: 1px solid #333B4D; border-bottom: 1px solid #333B4D;
}
.case__stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; padding: 20px 18px 20px 0; }
.case__stat + .case__stat { padding-left: 18px; border-left: 1px solid #333B4D; }
.case__stat dd {
  margin: 0; font-family: var(--dot); font-weight: 900; color: var(--led);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 0.9;
  text-shadow: 0 0 16px rgba(255,178,36,0.35);
}
.case__stat dt { color: #B9C0CE; font-size: 0.93rem; line-height: 1.4; }

.case__subhead { color: var(--white); font-size: var(--step-1); margin: 2.4rem 0 1rem; }
.case__subhead--wide { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); }
.case__groups { display: grid; gap: 16px; }
.case__group { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.case__group-name { margin: 0; color: #9AA3B5; font-size: 0.93rem; padding-top: 6px; }
.case__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.case__chips li {
  font-size: 0.9rem; font-weight: 600; line-height: 1; padding: 8px 11px;
  border: 1px solid #3A4357; border-radius: 999px; color: #E8EBF2; background: var(--panel-2);
}

.case__vehicle { margin-top: 0.4rem; }
.case__vehicle-text { color: #B9C0CE; margin: 0 0 14px; max-width: 40em; }
.case__chips--led li { border-color: rgba(255,178,36,0.45); color: var(--led-soft); background: rgba(255,178,36,0.06); }
.case__vehicle-btn { margin-top: 18px; }

.modules {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px;
}
.module { padding: 18px 0 20px; border-top: 1px solid #333B4D; }
.module__name {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  color: var(--white); font-size: 1.05rem; font-weight: 700; font-stretch: 106%; margin: 0 0 6px;
}
.module__count { font-family: var(--dot); font-weight: 800; color: var(--led); font-size: 0.95rem; white-space: nowrap; }
.module p { color: #B9C0CE; font-size: 0.95rem; line-height: 1.5; margin: 0; }

.case__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); padding: 24px 28px;
  background: var(--panel-2); border: 1px solid #333B4D; border-radius: var(--radius);
}
.case__cta p { margin: 0; color: var(--white); font-size: var(--step-1); font-weight: 650; font-stretch: 106%; }
.case__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn--dark { background: transparent; color: var(--white); border-color: #C9CFDB; box-shadow: 0 4px 0 #0A0D13; }
.btn--dark:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.btn--dark:active { box-shadow: 0 1px 0 #0A0D13; }
.case :focus-visible { outline-color: var(--led); }

@media (max-width: 980px) {
  .modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 880px) {
  .case__top { grid-template-columns: 1fr; }
  .case__device { position: static; }
  .device { width: min(78%, 300px); }
}
@media (max-width: 600px) {
  .modules { grid-template-columns: 1fr; }
  .case__stats { grid-template-columns: 1fr; }
  .case__stat, .case__stat + .case__stat { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; padding: 14px 0; border-left: 0; }
  .case__stat + .case__stat { border-top: 1px solid #333B4D; }
  .case__stat dd { min-width: 3.2ch; }
  .case__group { grid-template-columns: 1fr; gap: 8px; }
  .case__group-name { padding-top: 0; }
}

/* ---------- Alur kerja ---------- */
.steps {
  list-style: none; counter-reset: step;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  border-top: 2px solid var(--ink);
}
.step { counter-increment: step; padding: 22px 24px 8px 0; position: relative; }
.step + .step { padding-left: 24px; border-left: 1px solid var(--rule); }
.step::before {
  content: counter(step);
  display: block; margin-bottom: 18px;
  font-family: var(--dot); font-weight: 900; font-size: 3rem; line-height: 1; color: var(--stamp);
}
.step h3 { margin-bottom: 10px; }
.step p { color: var(--ink-2); font-size: 0.98rem; }

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; border-top: 0; }
  .step, .step + .step { padding: 18px 0 18px 64px; border-left: 0; border-top: 1px solid var(--rule); }
  .step:first-child { border-top: 2px solid var(--ink); }
  .step::before { position: absolute; left: 0; top: 18px; font-size: 2.4rem; }
}

/* ---------- Dari workshop ---------- */
.workshop { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem); }
.workshop__head { max-width: 640px; margin-bottom: 1.4rem; }
.workshop__head h3 { font-size: var(--step-2); font-stretch: 110%; margin-bottom: 0.6rem; }
.workshop__head p { color: var(--ink-2); margin: 0; }
.workshop__strip {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.workshop__strip > li { scroll-snap-align: start; display: flex; align-items: flex-start; }
.workshop__item { all: unset; display: block; width: 100%; cursor: default; }
button.workshop__item { cursor: pointer; }
.workshop__item figure { margin: 0; }
.workshop__item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper);
}
button.workshop__item:hover img { border-color: var(--ink); }
button.workshop__item:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: var(--radius); }
.workshop__item figcaption { font-size: 0.88rem; line-height: 1.4; color: var(--ink-2); margin-top: 8px; }
@media (max-width: 760px) { .workshop__strip { grid-auto-columns: 62%; } }

/* ---------- Tentang ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.about__text h2 { margin-bottom: 1.5rem; }
.about__text p { max-width: 38em; font-size: 1.08rem; }
.facts { margin: 0; display: grid; gap: 0; border-top: 2px solid var(--ink); }
.fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.fact dt { color: var(--ink-2); font-weight: 560; }
.fact dd { margin: 0; font-family: var(--dot); font-weight: 900; font-size: 3.25rem; line-height: 0.9; }
@media (max-width: 880px) { .about { grid-template-columns: 1fr; } }

/* ---------- Perjalanan ---------- */
.journey { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.journey__heading { font-size: var(--step-2); font-stretch: 110%; margin-bottom: 1.6rem; }
.journey__list {
  list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 0;
}
.journey__item { position: relative; padding: 26px 20px 8px 0; border-top: 2px solid var(--ink); }
.journey__item::before {
  content: ""; position: absolute; left: 0; top: -7px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--ink);
}
.journey__item:last-child::before { background: var(--led); border-color: var(--ink); }
.journey__year {
  display: block; font-family: var(--dot); font-weight: 900; font-size: 2.3rem; line-height: 1;
  color: var(--stamp); margin-bottom: 12px;
}
.journey__title { font-size: 1.02rem; font-weight: 700; font-stretch: 104%; line-height: 1.3; margin: 0 0 6px; }
.journey__link {
  all: unset; cursor: pointer; color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 0.2em; text-decoration-thickness: 2px;
}
.journey__link:hover { text-decoration-color: var(--stamp); color: var(--stamp); }
.journey__link:focus-visible { outline: 3px solid var(--stamp); outline-offset: 3px; border-radius: 3px; }
.journey__item p { color: var(--ink-2); font-size: 0.93rem; line-height: 1.45; margin: 0; }
@media (max-width: 980px) {
  .journey__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .journey__list { grid-template-columns: 1fr; gap: 0; border-left: 2px solid var(--ink); margin-left: 6px; }
  .journey__item { padding: 4px 0 22px 24px; border-top: 0; }
  .journey__item::before { left: -7px; top: 10px; }
  .journey__year { font-size: 2rem; margin-bottom: 6px; }
}

/* ---------- Kontak (layar panel) ---------- */
.contact { background: var(--panel); color: #E8EBF2; padding-block: var(--section); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact .contact__display {
  font-family: var(--dot); font-weight: 900; color: var(--led);
  font-size: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); line-height: 1; letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(255,178,36,0.45);
  margin: 0 0 28px;
}
.contact h2 { color: var(--white); margin-bottom: 1rem; }
.contact p { color: #B9C0CE; }
.contact__links { list-style: none; margin-top: 1.5rem; border-top: 1px solid #333B4D; }
.contact__links a {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid #333B4D;
  color: var(--white); text-decoration: none; font-weight: 600;
}
.contact__links a span:last-child { color: var(--led-soft); font-weight: 500; overflow-wrap: anywhere; }
.contact__links a:hover span:first-child { text-decoration: underline; }
.contact__social { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; }
.contact__social a { color: #C9CFDB; }
.contact :focus-visible { outline-color: var(--led); }

.form {
  background: var(--panel-2); border: 1px solid #333B4D; border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px); display: grid; gap: 18px;
}
.field { display: grid; gap: 7px; }
.field label { font-weight: 620; color: var(--white); font-size: 0.97rem; }
.field__opt { font-weight: 400; color: #9AA3B5; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 11px 14px;
  background: var(--panel); color: var(--white);
  border: 1.5px solid #3A4357; border-radius: var(--radius-sm);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field ::placeholder { color: #7D869A; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--led); box-shadow: 0 0 0 3px rgba(255,178,36,0.25); }
.field [aria-invalid="true"] { border-color: #F97066; }
.field__error { margin: 0; color: #FDA29B; font-size: 0.9rem; }
.form .btn { justify-self: start; margin-top: 4px; }

@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr; } }

/* Baris kontak tanpa link (alamat usaha) */
.contact__row {
  display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap;
  padding: 16px 0; border-bottom: 1px solid #333B4D; color: var(--white); font-weight: 600;
}
.contact__row address { font-style: normal; color: var(--led-soft); font-weight: 500; text-align: right; line-height: 1.5; }
@media (max-width: 520px) { .contact__row address { text-align: left; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--panel); color: #9AA3B5; border-top: 1px solid #2A3142; font-size: var(--step--1); }
.site-footer__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 28px 48px; padding-block: 40px 30px;
}
.site-footer__about { display: grid; gap: 14px; align-content: start; }
.site-footer .brand { color: var(--white); }
.site-footer p { margin: 0; }
.site-footer__title {
  margin: 0 0 12px; font-family: var(--dot); font-weight: 900; font-size: 0.95rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--led);
}
.site-footer__address { font-style: normal; line-height: 1.75; color: #C9CFDB; }
.site-footer a:not(.brand) { color: #E8EBF2; text-underline-offset: 0.2em; }
.site-footer a:not(.brand):hover { color: var(--led-soft); }
.site-footer__links { list-style: none; display: grid; gap: 8px; }
.site-footer__bottom { padding-bottom: 22px; }
.site-footer__bottom p { border-top: 1px solid #2A3142; padding-top: 18px; }
.site-footer :focus-visible { outline-color: var(--led); }
@media (max-width: 860px) { .site-footer__grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Dialog detail project ---------- */
.detail {
  width: min(920px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 14px;
  background: var(--white); color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(10,14,22,0.55);
  overflow: hidden;
}
.detail::backdrop { background: rgba(22,27,38,0.62); }
.detail[open] { animation: detail-in 220ms cubic-bezier(.2,.8,.3,1); }
@keyframes detail-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
.detail__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); max-height: calc(100dvh - 24px); overflow: auto; }
.detail__cover { position: sticky; top: 0; align-self: start; height: min(calc(100dvh - 24px), 100%); }
.detail__cover .cover { height: 100%; aspect-ratio: auto; min-height: 320px; }
.detail__cover .cover img { object-fit: contain; background: var(--panel); }
.detail__body { padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.detail__client { margin: 0; color: var(--ink-2); font-weight: 560; font-size: var(--step--1); padding-right: 48px; }
.detail__body h2 { font-size: var(--step-2); font-stretch: 108%; padding-right: 32px; }
.detail__body h3 { font-size: 1rem; margin-top: 6px; }
.detail__body h3 + .tags { margin-top: 10px; }
.detail__body > p { color: var(--ink-2); margin: 0; }
.detail__tech { display: flex; flex-wrap: wrap; gap: 6px; }
.shot { margin: 10px 0 14px; }
.shot a { display: block; border: 1px solid var(--rule); border-radius: var(--radius-sm); overflow: hidden; }
.shot a:hover { border-color: var(--ink); }
.shot img { width: 100%; height: auto; }
.shot__video { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: var(--radius-sm); }
.shot figcaption { font-size: 0.85rem; color: var(--ink-2); margin-top: 6px; }
.detail__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.detail__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--white); color: var(--ink);
  box-shadow: 0 2px 8px rgba(26,34,51,0.18);
}
.detail__close:hover { background: var(--paper-2); }
@media (max-width: 760px) {
  .detail__inner { grid-template-columns: 1fr; }
  .detail__cover { position: static; height: auto; }
  .detail__cover .cover { min-height: 0; aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .detail[open] { animation: none; } }
body.has-dialog { overflow: hidden; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 200; transform: translateX(-50%);
  background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: 8px;
  font-weight: 600; font-size: 0.95rem; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* ---------- Studio live (kantor virtual dari BPM) ---------- */
.kantor { background: var(--panel); color: #E8EBF2; padding-block: var(--section); }
.kantor h2 { color: var(--white); }
.kantor__head { max-width: 680px; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.kantor__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-family: var(--dot); font-weight: 900; color: var(--led); letter-spacing: 0.08em; font-size: 1.05rem; }
.kantor__lead { color: #B9C0CE; font-size: var(--step-1); line-height: 1.55; margin: 1.1rem 0 0; }
.kantor__led { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--led); box-shadow: 0 0 0 3px rgba(255, 178, 36, 0.18), 0 0 12px rgba(255, 178, 36, 0.8); animation: kantor-blink 1.6s steps(2, jump-none) infinite; }
.kantor.is-offline .kantor__led { background: #6B7385; box-shadow: none; animation: none; }
.kantor.is-offline .kantor__eyebrow, .kantor.is-offline .monitor__live { color: #8A93A6; }
@keyframes kantor-blink { 50% { opacity: 0.35; } }
.monitor { background: #0E121A; border: 2px solid #2C3446; border-radius: 14px; padding: 10px; box-shadow: 0 6px 0 #0A0D13, inset 0 0 0 1px #1C2231; }
.monitor__bar { display: flex; align-items: center; gap: 8px 12px; padding: 4px 6px 10px; flex-wrap: wrap; }
.monitor__live { display: inline-flex; align-items: center; gap: 8px; font-family: var(--dot); font-weight: 900; color: var(--led); letter-spacing: 0.08em; font-size: 0.95rem; }
.monitor__title { color: #8A93A6; font-size: var(--step--1); font-family: var(--dot); font-weight: 700; letter-spacing: 0.06em; }
.monitor__tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.monitor__btn { min-width: 36px; height: 34px; padding: 0 0.8em; border: 1px solid #3A4357; border-radius: var(--radius-sm); background: #161B26; color: #E8EBF2; font: inherit; font-size: var(--step--1); font-weight: 650; line-height: 1; cursor: pointer; }
.monitor__btn:hover { border-color: var(--led); color: var(--led-soft); }
.monitor__btn[aria-pressed="true"] { background: var(--led); color: var(--panel); border-color: var(--led); }
.monitor__screen { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1B1722; }
.monitor__screen canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.monitor__loading { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 16px; text-align: center; color: var(--led); font-family: var(--dot); font-weight: 900; letter-spacing: 0.06em; }
.monitor__caption { margin: 10px 6px 2px; font-family: var(--dot); font-weight: 800; color: var(--led-soft); font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem); letter-spacing: 0.03em; line-height: 1.4; min-height: 1.4em; }
.kantor__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 28px; }
.kantor__hint { margin: 0; color: #8A93A6; font-size: var(--step--1); max-width: 34em; }
.kantor__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.kantor__cta p { margin: 0; color: var(--white); font-size: var(--step-1); font-weight: 650; font-stretch: 106%; }
.kantor :focus-visible { outline-color: var(--led); }
@media (max-width: 700px) {
  .monitor { padding: 8px; border-radius: 12px; }
  .monitor__screen { aspect-ratio: 16 / 9; }
  .monitor__title { display: none; }
}
@media (prefers-reduced-motion: reduce) { .kantor__led { animation: none; } }

/* ---------- Toko: beli online ---------- */
.shop { border-top: 1px solid var(--rule); }
.shop__eyebrow { margin: 0 0 12px; font-family: var(--dot); font-weight: 900; color: var(--stamp); letter-spacing: 0.08em; font-size: 1.05rem; }
.shop__notice {
  max-width: 820px; margin: -0.75rem 0 28px; padding: 14px 18px;
  background: #FFF6E0; border: 1.5px solid var(--led); border-radius: var(--radius-sm);
  font-size: 0.97rem; line-height: 1.5;
}
.shop__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 40px); align-items: start; }
.prices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.prices[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.price {
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(22px, 2.4vw, 30px);
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--ink);
}
.price__badge {
  align-self: flex-start; margin: 0;
  font-size: 0.8rem; font-weight: 700; line-height: 1; padding: 7px 10px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-2);
}
.price--main .price__badge { background: var(--led); color: var(--panel); }
.price__name { font-size: 1rem; font-weight: 650; font-stretch: 104%; color: var(--ink-2); line-height: 1.3; }
.price__variant { display: block; margin-top: 4px; font-size: var(--step-2); font-weight: 800; font-stretch: 110%; color: var(--ink); letter-spacing: -0.01em; }
.price__amount {
  margin: 4px 0 0; font-weight: 820; font-stretch: 112%; line-height: 1; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 1.6rem + 1.5vw, 2.8rem); white-space: nowrap; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.price__cur { font-size: 0.48em; font-weight: 700; margin-right: 0.22em; vertical-align: 0.7em; letter-spacing: 0; }
.price__unit { margin: -4px 0 0; padding-bottom: 14px; border-bottom: 1.5px dashed var(--rule); color: var(--ink-2); font-size: 0.93rem; }
.price__desc { margin: 0; color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }
.price .checklist { font-size: 0.97rem; }
.price__buy { margin-top: auto; padding-top: 8px; }
.price__buy .btn { width: 100%; }

.shop__how {
  background: var(--panel); color: #E8EBF2; border-radius: var(--radius);
  padding: clamp(22px, 2.4vw, 30px);
}
.shop__how h3 { color: var(--white); margin-bottom: 18px; }
.howto { list-style: none; counter-reset: how; display: grid; gap: 16px; }
.howto li { counter-increment: how; position: relative; padding-left: 44px; color: #B9C0CE; font-size: 0.94rem; line-height: 1.5; }
.howto li::before {
  content: counter(how); position: absolute; left: 0; top: -1px;
  font-family: var(--dot); font-weight: 900; font-size: 1.9rem; line-height: 1; color: var(--led);
  text-shadow: 0 0 12px rgba(255,178,36,0.35);
}
.howto strong { display: block; color: var(--white); font-weight: 650; margin-bottom: 2px; }
.shop__small { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #333B4D; font-size: 0.94rem; color: #B9C0CE; }
.shop__how a { color: var(--led-soft); }
.shop__how :focus-visible { outline-color: var(--led); }
.shop__legal { margin: 28px 0 0; max-width: 62em; color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 1080px) { .shop__grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .prices { grid-template-columns: 1fr; } }

/* ---------- Dialog checkout ---------- */
.checkout {
  width: min(980px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 0; border-radius: 14px;
  background: var(--panel); color: #E8EBF2;
  box-shadow: 0 30px 80px -20px rgba(10,14,22,0.7);
  overflow: hidden;
}
.checkout::backdrop { background: rgba(22,27,38,0.66); }
.checkout[open] { animation: detail-in 220ms cubic-bezier(.2,.8,.3,1); }
.checkout__inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr); max-height: calc(100dvh - 24px); overflow: auto; }
.checkout__summary { background: var(--panel-2); padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; align-content: start; }
.slip {
  --edge: 9px;
  background: var(--white); color: var(--ink);
  padding: 26px 22px calc(24px + var(--edge));
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--edge) * 2) 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--edge) * 2) 100%;
}
.slip .ticket__brand { text-align: center; }
.slip__label { margin: 2px 0 16px; text-align: center; font-size: 0.85rem; color: var(--ink-2); }
.slip__title { font-size: 1rem; font-weight: 650; color: var(--ink-2); line-height: 1.3; margin-bottom: 14px; }
.slip__variant { display: block; font-size: var(--step-1); font-weight: 780; font-stretch: 108%; color: var(--ink); margin-top: 2px; }
.slip .ticket__rows { margin-bottom: 14px; }
.slip .ticket__rows dd { text-align: right; }
.slip__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 12px; font-weight: 650; }
.slip__total strong { font-weight: 820; font-stretch: 110%; font-size: 1.6rem; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; }
.slip__note { margin: 0; font-size: 0.8rem; color: var(--ink-2); line-height: 1.45; }
.checkout__sandbox {
  margin: 0; padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid rgba(255,178,36,0.5); background: rgba(255,178,36,0.08); color: var(--led-soft);
  font-size: 0.88rem; line-height: 1.5;
}
.checkout__form { padding: clamp(24px, 3vw, 36px); padding-top: clamp(28px, 3.4vw, 40px); display: grid; gap: 16px; align-content: start; }
.checkout__step { margin: 0 48px 0 0; font-family: var(--dot); font-weight: 900; letter-spacing: 0.08em; color: var(--led); text-transform: uppercase; }
.checkout__two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.checkout .field textarea { min-height: 72px; }
.field__hint { margin: 0; color: #9AA3B5; font-size: 0.86rem; line-height: 1.45; }
#co-kode { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.93rem; line-height: 1.5; color: #C9CFDB; }
.check input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--led); }
.check a { color: var(--led-soft); }
.checkout__error {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: rgba(249,112,102,0.1); border: 1px solid #F97066; color: #FECDCA;
  display: grid; gap: 10px; justify-items: start; font-size: 0.93rem;
}
.checkout__error p { margin: 0; color: #FECDCA; }
.checkout__error .btn { box-shadow: 0 3px 0 #0A0D13; }
.checkout__pay { width: 100%; }
.checkout__pay[disabled] { opacity: 0.7; cursor: progress; }
.checkout__fine { margin: -4px 0 0; font-size: 0.85rem; color: #9AA3B5; }
.checkout :focus-visible { outline-color: var(--led); }
.checkout .detail__close { background: var(--panel-2); color: #E8EBF2; box-shadow: 0 0 0 1px #3A4357; }
.checkout .detail__close:hover { background: #2C3446; }
@media (max-width: 800px) {
  .checkout__inner { grid-template-columns: 1fr; }
  .checkout__summary { padding-top: 60px; }
  .checkout__form { padding-top: 24px; }
  .checkout__step { margin-right: 0; }
}
@media (max-width: 520px) { .checkout__two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .checkout[open] { animation: none; } }

/* ---------- Halaman sederhana (status pesanan & kebijakan) ---------- */
.site-header--page .site-header__inner { min-height: 68px; }
.page { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) var(--section); }
.page__head { max-width: 760px; margin-bottom: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); }
.page__head h1 { font-size: var(--step-3); font-stretch: 112%; letter-spacing: -0.015em; }
.page__meta { margin: 0.9rem 0 0; color: var(--ink-2); }
.prose { max-width: 760px; }
.prose h2 { font-size: var(--step-1); font-stretch: 106%; margin: 2.2rem 0 0.7rem; }
.prose p, .prose li { color: #2B3447; }
.prose ol, .prose ul { padding-left: 1.3em; margin: 0 0 1em; display: grid; gap: 0.45em; }
.prose address { font-style: normal; line-height: 1.7; }
.prose .callout {
  margin: 1.5rem 0; padding: 14px 18px; border-left: 4px solid var(--led);
  background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.page__back { margin-top: 2.5rem; }

/* Status pesanan */
.paypage__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  grid-template-areas: "machine intro" "machine more"; grid-template-rows: auto 1fr;
  column-gap: clamp(32px, 6vw, 88px); align-items: start;
}
.paypage__intro { grid-area: intro; }
.paypage__more { grid-area: more; }
.paypage__machine { grid-area: machine; width: 100%; max-width: 400px; justify-self: center; }
.receipt .ticket__rows dt { flex: 0 0 auto; white-space: nowrap; }
.receipt .ticket__rows dd { min-width: 0; }
.paypage__machine .ticket { animation-duration: 1.4s; animation-delay: 0.1s; }
.receipt__status {
  margin: 8px 0 6px; font-family: var(--dot); font-weight: 900; line-height: 1;
  font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); letter-spacing: 0.02em;
}
.receipt__status.is-ok { color: #0E7A3E; }
.receipt__status.is-wait { color: #9A6200; }
.receipt__status.is-fail { color: var(--danger); }
.receipt__text { margin: 0 0 16px; color: var(--ink-2); font-size: 0.93rem; line-height: 1.45; }
.receipt .ticket__rows dd { text-align: right; overflow-wrap: anywhere; }
.receipt__serial { margin: 0 0 16px; padding: 14px; background: var(--paper-2); border-radius: 8px; text-align: left; }
.receipt__serial p { margin: 0; font-size: 0.85rem; color: var(--ink-2); }
.receipt__sn {
  display: block; margin: 6px 0 10px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; font-weight: 700;
  word-break: break-all; color: var(--ink);
}
.receipt__actions { display: grid; gap: 10px; margin: 0 0 14px; }
.receipt__actions .btn { width: 100%; }
.receipt__sandbox { margin: 0 0 12px; font-size: 0.8rem; color: #9A6200; line-height: 1.4; }
.paypage__intro h1 { font-size: var(--step-3); font-stretch: 112%; letter-spacing: -0.015em; margin-bottom: 1rem; }
.paypage__intro p { color: var(--ink-2); }
.lookup { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5rem 0 0.5rem; }
.lookup label { flex: 1 0 100%; font-weight: 620; }
.lookup input {
  flex: 1 1 220px; min-height: 48px; padding: 10px 14px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-sm); background: var(--white);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; text-transform: uppercase;
}
.lookup input:focus { outline: none; box-shadow: 0 0 0 3px rgba(47,69,200,0.25); border-color: var(--stamp); }
.lookup__err { margin: 0; color: var(--danger); font-size: 0.9rem; }
.support { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px solid var(--ink); }
.support h2 { font-size: var(--step-1); margin-bottom: 0.8rem; }
.support address { font-style: normal; line-height: 1.75; color: var(--ink-2); }
@media (max-width: 880px) {
  .paypage__grid { grid-template-columns: 1fr; grid-template-areas: "intro" "machine" "more"; grid-template-rows: auto; row-gap: 28px; }
}
@media (max-width: 480px) {
  .paypage__machine .ticket-clip { margin-inline: 10px; }
  .paypage__machine .ticket { padding-inline: 20px; }
}
.field-note { margin: 0; color: var(--ink-2); font-size: 0.9rem; }
[data-pay-last] { margin-top: 0.75rem; font-size: 0.95rem; }