/* ==========================================================================
   Kampung Studio — Redesign
   05 · belitoken (Beli Token) — penyelarasan tema
   Dimuat SETELAH belitoken.css. Tugasnya menimpa palet ungu lama dengan
   token control-room, bukan menulis ulang layout.
   ========================================================================== */

:root {
  color-scheme: light;
  /* timpa token lokal belitoken.css -> palet Bloom */
  --bg: oklch(97% 0.01 72);
  --card: oklch(98.7% 0.007 78);
  --card-elevated: oklch(98.7% 0.007 78);
  --card-border: oklch(88% 0.014 64);
  --text: oklch(21% 0.024 40);
  --text-soft: oklch(31% 0.022 46);
  --muted: oklch(49% 0.02 56);
  --radius: 18px;

  --t-11: 11.5px;
  --t-12: 12.5px;
  --t-13: 13.5px;
  --t-15: 15px;
  --t-17: 17px;
  --t-20: 20px;
  --t-26: 26px;
  --t-34: 34px;
  --font-ui: "Ranade", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --accent: oklch(53% 0.145 36);
  --accent-hi: oklch(66% 0.1 55);
  --accent-wash: oklch(53% 0.145 36 / 0.11);
  --accent-line: oklch(53% 0.145 36 / 0.45);
  --fg-invert: oklch(98.5% 0.008 72);
  --line-1: oklch(88% 0.014 64);
  --line-2: oklch(88% 0.014 64);
  --ok: oklch(52% 0.1 150);
  --bad: oklch(52% 0.16 26);
  --bad-wash: oklch(52% 0.16 26 / 0.1);
}

html,
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-15);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* latar: hapus gradien ungu, sisakan bidang tenang + satu sapuan tipis */
.buy-page {
  background: var(--bg);
}

.buy-page__inner {
  padding-top: var(--t-20);
}

.buy-page__back {
  display: inline-block;
  margin-bottom: 18px;
  font-size: var(--t-12);
  color: var(--text-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.buy-page__back:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-line);
}

/* hero */

.buy-page__hero h1 {
  font-size: var(--t-34);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

.buy-page__hero > p {
  max-width: 62ch;
  color: var(--text-soft);
  font-size: var(--t-13);
  line-height: 1.7;
}

.buy-stock {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-inner);
  background: var(--card);
  font-size: var(--t-11);
  color: var(--muted);
}

.buy-stock strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-13);
  color: var(--text);
}

.buy-stock.is-empty strong {
  color: var(--bad);
}

/* kartu & seksi */

.buy-card,
.buy-about {
  border: 1px solid var(--line-1);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: none;
}

.buy-card h2,
.buy-about h2 {
  font-size: var(--t-17);
  font-weight: 600;
  letter-spacing: -0.014em;
}

.buy-about h3,
.buy-card h3 {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.buy-about__grid {
  gap: 20px;
}

.buy-about ul,
.buy-about__grid ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.buy-about li {
  position: relative;
  padding-left: 13px;
  font-size: var(--t-12);
  color: var(--text-soft);
  line-height: 1.6;
}

.buy-about li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.buy-about__note,
.buy-hint {
  font-size: var(--t-11);
  color: var(--muted);
  line-height: 1.6;
}

.buy-about__warn {
  padding: 10px 12px;
  border: 1px solid var(--accent-line);
  border-left-width: 2px;
  border-radius: 6px;
  background: var(--accent-wash);
  font-size: var(--t-11);
  color: var(--text-soft);
}

/* harga */

.buy-price-list {
  display: grid;
  gap: 6px;
}

.buy-price-list li {
  border: 1px solid var(--line-1);
  border-radius: 8px;
  background: var(--bg);
  font-size: var(--t-12);
  color: var(--text-soft);
  transition: border-color 140ms ease, background 140ms ease;
}

.buy-price-list li:hover {
  border-color: var(--line-2);
}

.buy-price-list li.is-selected {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--text);
}

.buy-price-list li strong {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.buy-price-list li.is-soldout {
  opacity: 0.45;
}

.buy-selected {
  font-family: var(--font-mono);
  font-size: var(--t-12);
  color: var(--accent);
}

/* form */

.buy-form .buy-card {
  gap: 4px;
}

.buy-card label {
  font-size: var(--t-11);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.buy-card input[type="text"],
.buy-card input[type="tel"],
.buy-card input:not([type]),
.buy-card select,
.buy-card textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--t-13);
}

.buy-card input:focus,
.buy-card select:focus {
  outline: none;
  border-color: var(--accent-line);
}

.buy-card input[type="file"] {
  width: 100%;
  padding: 9px 11px;
  border: 1px dashed var(--line-2);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text-soft);
  font-size: var(--t-12);
}

.buy-qris {
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
}

.buy-agree {
  font-size: var(--t-12);
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.buy-agree input {
  accent-color: var(--accent);
}

.buy-error {
  border: 1px solid var(--bad-wash);
  border-radius: 6px;
  background: var(--bad-wash);
  color: var(--bad);
  font-size: var(--t-12);
}

/* tombol kirim */

.buy-submit {
  width: 100%;
  padding: 12px 18px;
  border: 1px solid var(--accent-hi);
  border-radius: 6px;
  background: var(--accent);
  color: var(--fg-invert);
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  cursor: pointer;
  transition: background 140ms ease;
}

.buy-submit:hover:not(:disabled) {
  background: var(--accent-hi);
}

.buy-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* selesai */

.buy-done h2 {
  font-size: var(--t-17);
}

.buy-done p {
  font-size: var(--t-12);
  color: var(--text-soft);
}

.buy-done__link {
  color: var(--accent);
  font-size: var(--t-12);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* modal konfirmasi */

.buy-confirm-backdrop {
  background: rgba(6, 6, 8, 0.72);
  backdrop-filter: blur(3px);
}

.buy-confirm {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--card-elevated);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.6);
}

.buy-confirm__kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.buy-confirm h2 {
  font-size: var(--t-17);
  font-weight: 600;
}

.buy-confirm > p {
  font-size: var(--t-12);
  color: var(--text-soft);
}

.buy-confirm__phone {
  font-family: var(--font-mono);
  font-size: var(--t-17);
  color: var(--text);
}

.buy-confirm__meta {
  font-size: var(--t-11);
  color: var(--muted);
}

.buy-confirm__cancel,
.buy-confirm__send {
  padding: 10px 16px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 500;
  cursor: pointer;
}

.buy-confirm__cancel {
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--text-soft);
}

.buy-confirm__cancel:hover {
  color: var(--text);
  border-color: var(--ink-2);
}

.buy-confirm__send {
  border: 1px solid var(--accent-line);
  background: var(--accent);
  color: var(--fg-invert);
  font-weight: 600;
}

.buy-confirm__send:hover:not(:disabled) {
  background: var(--accent-hi);
}

.buy-confirm__send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* fokus keyboard */

.buy-page :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}