:root {
  --bg: #09111d;
  --panel: #101b2a;
  --panel-2: #162337;
  --ink: #f2efe8;
  --muted: #aab4c3;
  --line: rgba(231, 235, 241, .14);
  --cyan: #86a8ff;
  --violet: #b9a8ff;
  --lime: #b7d98c;
  --rose: #ff806b;
  --amber: #eec879;
  --paper: #f2efe8;
  --paper-ink: #172033;
}

body {
  background: var(--bg);
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: .002em;
}

h1, h2, .focus-brief h3, .community-post blockquote {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.topbar {
  min-height: 70px;
  background: rgba(9, 17, 29, .96);
  backdrop-filter: none;
}

.orbit { border-radius: 50%; box-shadow: none; }
.top-link-button { border: 0; padding: 6px; background: transparent; }
.primary, .ghost, .danger, .icon-btn, .language-select, input, textarea, select { border-radius: 7px; }
.primary { background: #86a8ff; border-color: #86a8ff; color: #0b1421; }
.primary:hover:not(:disabled) { background: #a4bbff; border-color: #a4bbff; }
.ghost:hover:not(:disabled) { background: rgba(242, 239, 232, .06); border-color: rgba(242, 239, 232, .26); }
.eyebrow { color: var(--amber); letter-spacing: .2em; }
.hero h1 { font-weight: 500; letter-spacing: -.055em; }
.hero h1 em { color: #9db5ff; font-style: italic; }
.product-note { max-width: 560px; margin: 28px 0 0; padding-left: 18px; border-left: 2px solid var(--rose); color: var(--muted); }
.hero-visual, .plan, .loop article, .detail-panel, .canvas-panel { box-shadow: none; }
.hero-visual { border-radius: 2px; }
.sample-node { border-radius: 4px; }
.public-plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.public-plan-grid .plan { min-height: 360px; }

/* Tombol Feedback.
   Riwayatnya: dulu melayang tetap di pojok kanan bawah dan menutupi kontrol
   lain — tombol "Kembali ke atas" di footer, tombol Follow di kolom komunitas,
   menu footer pada layar pendek. Geometrinya tidak bisa diselamatkan selama ia
   melayang, jadi ia dijadikan tombol biasa di ujung halaman.
   Versi pertama menempatkannya lebar dan di tengah, dan itu memang mengganggu.
   Sekarang: rata kanan, seukuran isinya, di bawah baris "Kembali ke atas",
   dengan jarak yang cukup supaya baris itu tetap punya ruang bernapas. */
.feedback-fab {
  display: block;
  width: fit-content;
  margin: 26px 0 calc(34px + env(safe-area-inset-bottom)) auto;
  margin-inline-end: clamp(18px, 5vw, 74px);
  border: 1px solid rgba(242, 239, 232, .24);
  border-radius: 999px;
  padding: 9px 20px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  transition: background .18s ease, border-color .18s ease;
}
.feedback-fab:hover { background: rgba(242, 239, 232, .07); border-color: rgba(242, 239, 232, .4); }

@media (prefers-reduced-motion: reduce) { .feedback-fab { transition: none; } }

@media (max-width: 620px) {
  .feedback-fab { width: calc(100% - 36px); margin-inline: auto; }
}

.community-screen { min-height: calc(100vh - 70px); }
.community-shell { width: min(1500px, 100%); margin: 0 auto; padding: clamp(34px, 5vw, 76px) clamp(18px, 4vw, 58px) 110px; }
.community-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
.community-header h1 { max-width: 820px; margin: 0; font-size: clamp(42px, 6vw, 82px); line-height: .98; font-weight: 500; letter-spacing: -.045em; }
.community-header p:not(.eyebrow) { max-width: 680px; margin: 20px 0 0; color: var(--muted); font-size: 17px; }
.community-header-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.community-grid { display: grid; grid-template-columns: 190px minmax(0, 720px) minmax(230px, 1fr); align-items: start; gap: 28px; margin-top: 32px; }
.space-sidebar { position: sticky; top: 102px; display: grid; gap: 6px; }
.space-filter { width: 100%; border: 0; border-left: 2px solid transparent; padding: 10px 12px; background: none; text-align: left; color: var(--muted); }
.space-filter.active { border-left-color: var(--amber); color: var(--ink); background: rgba(238, 200, 121, .06); }
.space-principle { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.space-principle strong { font-family: "Iowan Old Style", Georgia, serif; font-size: 19px; }
.space-principle p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.feed-column { min-width: 0; }
.feed-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 10px; }
.feed-toolbar > div { display: grid; }
.feed-toolbar span { color: var(--muted); font-size: 11px; }
.community-feed { display: grid; }
.community-post { padding: 26px 4px 24px; border-top: 1px solid var(--line); }
.community-post:last-child { border-bottom: 1px solid var(--line); }
.post-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.post-author { display: flex; align-items: center; gap: 10px; min-width: 0; }
.post-avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--amber); font-weight: 850; }
.post-author div { display: grid; }
.post-author span, .post-time { color: var(--muted); font-size: 11px; }
.post-type { color: var(--amber); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.community-post blockquote { margin: 18px 0 14px; padding: 0; border: 0; font-size: 23px; line-height: 1.35; }
.post-spark { display: inline-flex; padding: 6px 9px; border: 1px solid var(--line); border-radius: 4px; color: #b7c8f9; font-size: 11px; }
.post-actions { display: flex; gap: 4px; margin-top: 18px; }
.post-actions button { border: 0; padding: 7px 10px; background: none; color: var(--muted); }
.post-actions button:hover, .post-actions button[aria-pressed="true"] { color: var(--ink); background: rgba(242, 239, 232, .05); }
.space-context { display: grid; gap: 14px; }
.context-card { padding: 22px; border: 1px solid var(--line); background: rgba(16, 27, 42, .72); }
.context-card h2 { margin: 12px 0 8px; font: 500 24px/1.1 "Iowan Old Style", Georgia, serif; }
.context-card p, .context-card li { color: var(--muted); font-size: 12px; }
.context-card ul { padding-left: 18px; }
.section-number { color: var(--amber); font-size: 10px; letter-spacing: .18em; }

.workflow-dialog { width: min(1180px, calc(100% - 28px)); max-width: none; overflow-x: hidden; }
.workflow-dialog::backdrop, .composer-dialog::backdrop, .feedback-dialog::backdrop { background: rgba(2, 8, 16, .82); }
.workflow-shell { width: 100%; min-width: 0; padding: clamp(20px, 4vw, 44px); }
.workflow-shell > header { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.workflow-shell > header h2 { margin: 0; font: 500 clamp(34px, 5vw, 58px)/1 "Iowan Old Style", Georgia, serif; }
.workflow-shell > header p:not(.eyebrow) { max-width: 680px; color: var(--muted); }
.workflow-grid { min-width: 0; display: grid; grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr); border-top: 1px solid var(--line); }
.workflow-grid > * { width: 100%; min-width: 0 !important; max-width: 100%; }
.workflow-controls input, .workflow-controls select { width: 100%; min-width: 0 !important; max-width: 100%; }
.workflow-controls { padding: 26px 28px 0 0; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 14px; }
.workflow-controls label:not(.check-row) { display: grid; gap: 6px; }
.workflow-controls fieldset { border: 1px solid var(--line); padding: 14px; }
.workflow-controls legend { padding: 0 8px; color: var(--muted); font-size: 11px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; margin: 7px 0; }
.check-row input { width: auto; margin-top: 5px; }
.workflow-output { min-height: 540px; padding: 26px 0 0 30px; }
.workflow-empty { min-height: 440px; display: grid; place-items: center; align-content: center; text-align: center; color: var(--muted); }
.workflow-empty > span { color: var(--amber); font-size: 48px; }
.workflow-empty h3 { margin-bottom: 0; color: var(--ink); }
.workflow-empty p { max-width: 470px; }
.focus-brief { padding: 22px; background: var(--paper); color: var(--paper-ink); }
.focus-brief span { font-size: 10px; text-transform: uppercase; letter-spacing: .18em; }
.focus-brief h3 { margin: 8px 0; font-size: 31px; line-height: 1.1; }
.focus-brief p { margin: 0; color: #4d5668; }
.roadmap-list { display: grid; gap: 8px; margin: 20px 0; }
.roadmap-item { display: grid; grid-template-columns: 72px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.roadmap-item > span { color: var(--amber); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.roadmap-item strong { display: block; }
.roadmap-item p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.schedule-board { display: grid; grid-template-columns: repeat(7, minmax(90px, 1fr)); gap: 5px; overflow-x: auto; padding-bottom: 10px; }
.schedule-day { min-width: 96px; padding: 10px; border: 1px solid var(--line); }
.schedule-day > strong { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.schedule-day p { margin: 8px 0 0; font-size: 11px; line-height: 1.45; }
.workflow-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

.composer-dialog, .feedback-dialog { width: min(650px, calc(100% - 28px)); }
.composer-dialog form, .feedback-dialog form { padding: clamp(22px, 4vw, 38px); }
.composer-dialog label, .feedback-dialog label { display: grid; gap: 6px; }
.composer-dialog small { justify-self: end; color: var(--muted); }
.feed-empty { padding: 50px 20px; border-top: 1px solid var(--line); text-align: center; color: var(--muted); }

@media (max-width: 1180px) {
  .community-grid { grid-template-columns: 160px minmax(0, 1fr); }
  .space-context { grid-column: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .top-actions .top-link-button, .top-actions .top-link { display: none; }
  .public-plan-grid { grid-template-columns: 1fr; }
  .community-header { display: grid; align-items: start; }
  .community-header-actions { flex-wrap: wrap; }
  .community-grid { grid-template-columns: 1fr; }
  .space-sidebar { position: static; display: flex; overflow-x: auto; padding-bottom: 8px; }
  .space-filter { width: auto; flex: 0 0 auto; border-left: 0; border-bottom: 2px solid transparent; }
  .space-filter.active { border-bottom-color: var(--amber); }
  .space-principle { display: none; }
  .space-context { grid-column: 1; grid-template-columns: 1fr; }
  .workflow-grid { grid-template-columns: minmax(0, 1fr); }
  .workflow-controls { padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .workflow-output { padding-left: 0; min-height: 420px; }
}

@media (max-width: 520px) {
  .community-shell { padding-inline: 16px; }
  .community-header h1 { font-size: 44px; }
  .community-header-actions { display: grid; grid-template-columns: 1fr; }
  .community-header-actions button { width: 100%; }
  .community-post blockquote { font-size: 20px; }

  .schedule-board { grid-template-columns: repeat(7, 104px); }
  .workflow-actions { display: grid; grid-template-columns: 1fr; }
}

@media print {
  .feedback-fab, .topbar, .rail { display: none !important; }
}

/* ==========================================================================
   Simulasi payment gateway
   ==========================================================================
   Label simulasi muncul di SETIAP layar, bukan hanya yang pertama. Orang
   membuka dialog, memilih metode, menyalin nomor VA, lalu lupa apa yang
   sedang mereka lihat — label yang hanya ada di layar pembuka tidak menolong
   siapa pun. */

.paysim-dialog {
  width: min(560px, calc(100% - 24px));
  max-height: min(860px, calc(100dvh - 24px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0;
  background: var(--panel);
  color: var(--ink);
}
.paysim-dialog::backdrop { background: rgba(2, 8, 16, .84); }
.paysim-shell { display: grid; gap: 16px; padding: clamp(20px, 4vw, 32px); }
.paysim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.paysim-head h2 { margin: 0; font-size: 25px; }

.paysim-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  border: 1px solid rgba(238, 200, 121, .34);
  border-radius: 999px;
  padding: 7px 13px;
  background: rgba(238, 200, 121, .09);
  color: var(--amber);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .07em;
}
.paysim-badge-dot { font-size: 8px; }

.paysim-body { display: grid; gap: 16px; }
.paysim-summary { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: rgba(16, 27, 42, .6); }
.paysim-summary h3 { margin: 0 0 4px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.paysim-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; }
.paysim-row span:first-child { color: var(--muted); }

.paysim-methods { margin: 0; border: 0; padding: 0; display: grid; gap: 7px; }
.paysim-methods legend { padding: 0 0 8px; font-size: 13px; color: var(--muted); }
.paysim-group { margin: 12px 0 2px; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
.paysim-method { display: block; cursor: pointer; }
.paysim-method input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.paysim-method-face {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(16, 27, 42, .55);
  font-size: 13px;
}
.paysim-method input:checked + .paysim-method-face { border-color: var(--cyan); background: rgba(134, 168, 255, .12); }
.paysim-method input:focus-visible + .paysim-method-face { outline: 3px solid var(--cyan); outline-offset: 2px; }
.paysim-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.paysim-instruction { display: grid; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.paysim-instruction h3 { margin: 0; font-size: 15px; }
.paysim-label { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.paysim-va { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.paysim-va-number { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 20px; letter-spacing: .06em; }
.paysim-countdown { margin: 0; color: var(--amber); font-size: 12px; font-variant-numeric: tabular-nums; }

.paysim-qr { display: grid; grid-template-columns: repeat(13, 1fr); gap: 2px; width: 182px; padding: 10px; border-radius: 8px; background: #f2efe8; }
.paysim-qr span { aspect-ratio: 1; border-radius: 1px; background: transparent; }
.paysim-qr span.on { background: #172033; }

.paysim-outcome { display: grid; gap: 8px; border: 1px dashed var(--line); border-radius: 12px; padding: 16px; }
.paysim-outcome h3 { margin: 0; font-size: 14px; }
.paysim-outcome-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.paysim-verifying { margin: 0; padding: 22px; text-align: center; color: var(--muted); }
.paysim-result { display: grid; justify-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 22px 18px; text-align: center; }
.paysim-result h3 { margin: 0; font-size: 20px; }
.paysim-result p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.paysim-result-glyph { font-size: 30px; line-height: 1; }
.paysim-result-paid { border-color: rgba(183, 217, 140, .4); background: rgba(183, 217, 140, .08); }
.paysim-result-paid .paysim-result-glyph { color: var(--lime); }
.paysim-result-failed { border-color: rgba(255, 128, 107, .4); background: rgba(255, 128, 107, .08); }
.paysim-result-failed .paysim-result-glyph { color: var(--rose); }
.paysim-result-expired { border-color: rgba(238, 200, 121, .4); background: rgba(238, 200, 121, .08); }
.paysim-result-expired .paysim-result-glyph { color: var(--amber); }

.paysim-chip { border-radius: 999px; padding: 3px 9px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.paysim-chip-paid { background: rgba(183, 217, 140, .16); color: var(--lime); }
.paysim-chip-failed { background: rgba(255, 128, 107, .16); color: var(--rose); }
.paysim-chip-expired { background: rgba(238, 200, 121, .16); color: var(--amber); }

.paysim-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.plan-status-pill { display: inline-block; margin-top: 10px; border: 1px solid rgba(183, 217, 140, .4); border-radius: 999px; padding: 5px 12px; background: rgba(183, 217, 140, .1); color: var(--lime); font-size: 11px; }

@media (forced-colors: active) {
  .paysim-method input:checked + .paysim-method-face { border: 2px solid Highlight; }
  .paysim-qr span.on { background: CanvasText; }
  .paysim-badge, .paysim-result { border: 1px solid CanvasText; }
}

@media (max-width: 560px) {
  .paysim-va-number { font-size: 17px; }
  .paysim-outcome-row > button { width: 100%; }
}

/* Lencana Sandbox: nada biru, bukan kuning. Sandbox adalah integrasi
   sungguhan dalam mode uji — beda keadaan dari simulasi, jadi beda warna. */
.paysim-badge-sandbox { border-color: rgba(134, 168, 255, .34); background: rgba(134, 168, 255, .09); color: var(--cyan); }

/* ==========================================================================
   Gerbang fitur lanjutan (gate-v118.js)
   ========================================================================== */

.gate-dialog { width: min(560px, calc(100% - 28px)); }
.gate-shell { display: grid; gap: 18px; padding: clamp(22px, 4vw, 32px); }
.gate-head { display: grid; gap: 6px; margin: 0; }
.gate-eyebrow { margin: 0; color: var(--cyan); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.gate-shell h2 { margin: 0; font: 500 clamp(24px, 3.4vw, 32px)/1.14 Georgia, serif; letter-spacing: -.02em; text-wrap: balance; }
.gate-why { margin: 0; color: var(--muted); font-size: 13.5px; line-height: 1.68; }
.gate-open { border: 1px solid var(--line); border-radius: 13px; padding: 14px 16px; background: rgba(7, 16, 24, .45); }
.gate-open strong { display: block; margin-bottom: 5px; font-size: 12px; }
.gate-open p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.62; }

/* Tombol dibiarkan mengalir dan membungkus. Pada layar sempit tiga tombol
   dalam satu baris memaksa teksnya terpotong, dan tombol yang terpotong
   adalah tombol yang tidak terbaca. */
.gate-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 12px 14px; margin: 6px 0 0; }
.gate-actions .primary { flex: 0 1 auto; }

/* Batal didorong ke ujung kiri, bukan diselipkan di antara dua tombol yang
   mengiyakan. Sebelumnya ketiganya berdesakan di tepi kanan dan "Batal"
   menempel pada "Sudah punya akun? Masuk" — selain sesak dilihat, pilihan
   untuk mundur jadi sulit dibedakan dari pilihan untuk maju. Memindahkannya ke
   sisi berlawanan menyelesaikan keduanya sekaligus. */
.gate-actions > button:first-child { margin-right: auto; }

@media (max-width: 520px) {
  .gate-actions { flex-direction: column-reverse; align-items: stretch; }
  .gate-actions button { width: 100%; }
  /* Saat menumpuk, margin-left otomatis itu justru menciptakan celah kosong
     yang aneh di antara tombol. Dilepas. */
  .gate-actions > button:first-child { margin-right: 0; }
}

/* Gembok kecil pada tombol yang masih terkunci. Ia keterangan, bukan larangan:
   tombolnya tetap bisa diklik dan tetap menjelaskan dirinya sendiri. */
[data-gate][data-gate-locked="1"]::after {
  content: "";
  width: 11px; height: 11px;
  margin-left: 8px;
  flex: 0 0 auto;
  background: currentColor;
  opacity: .62;
  -webkit-mask: var(--gate-lock) center / contain no-repeat;
  mask: var(--gate-lock) center / contain no-repeat;
}
:root {
  --gate-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Crect x='4.5' y='10.5' width='15' height='10' rx='2.2'/%3E%3Cpath d='M8 10.5V7.6a4 4 0 0 1 8 0v2.9'/%3E%3C/svg%3E");
}
.rail-btn[data-gate][data-gate-locked="1"]::after { display: none; }

/* Kode teknis di bawah pesan kegagalan checkout. Sengaja kecil dan tenang:
   pengguna biasa tidak perlu membacanya, pemilik situs perlu bisa menyalinnya. */
.paysim-result-code {
  margin: 10px 0 0;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
  user-select: all;
}

/* Atribut `hidden` harus benar-benar menyembunyikan lencana paket.
   Lencana ini punya aturan `display` sendiri, dan aturan itu menang atas
   `[hidden]` bawaan browser — sehingga yang tersisa adalah pil abu-abu kosong
   di sebelah judul: bekas sesuatu yang sudah tidak ada isinya. */
#workspacePlanBadge[hidden], .beta-badge[hidden] { display: none !important; }