@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/fraunces-500.ttf") format("truetype");
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/fraunces-600.ttf") format("truetype");
}

:root,
:root[data-theme="dark"] {
  --kertas: #f5efe6;
  --kertas-dalam: #ece4d6;
  --tinta: #2a2520;
  --tanah: #c4694a;
  --tanah-tua: #a8543a;
  --lumut: #8a9a7b;
  --lumut-muda: #dfe5d6;
  --pasir: #e8d9bf;
  --senja: #e6b8a2;
  --garis: #ddd2c1;
  --color-bg: var(--kertas);
  --color-surface: #fffdf9;
  --color-surface-alt: #faf5ec;
  --color-surface-muted: var(--kertas-dalam);
  --color-text: var(--tinta);
  --color-muted: #6a6259;
  --color-border: var(--garis);
  --color-border-strong: #c9bba5;
  --color-control-border: #bfae94;
  --color-accent: var(--tanah);
  --color-accent-hover: var(--tanah-tua);
  --color-accent-ring: rgba(196, 105, 74, 0.28);
  --color-accent-soft: #f4dccf;
  --color-on-accent: #ffffff;
  --color-pop: var(--tanah);
  --color-pop-hover: var(--tanah-tua);
  --color-pop-ink: #ffffff;
  --color-tint-lilac: #e8e1ee;
  --color-tint-mint: var(--lumut-muda);
  --color-tint-peach: #f4dccf;
  --color-tint-butter: #f3e6bd;
  --color-tint-sky: #dde7ec;
  --color-phone-frame: var(--tinta);
  --hero-bg: var(--kertas);
  --editor-bg: var(--kertas);
  --cta-bg: var(--tinta);
  --cta-fg: #fffdf9;
  --cta-btn-bg: var(--senja);
  --cta-btn-fg: var(--tinta);
  --color-chart: var(--tanah);
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-small: 8px;
  --radius-pill: 999px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(42, 37, 32, 0.06);
  --shadow-md: 0 14px 32px -18px rgba(42, 37, 32, 0.35);
  color-scheme: light;
}

html,
body {
  background: var(--kertas);
  color: var(--tinta);
}

h1,
h2,
h3,
.page-heading h1,
.lp-hero h1,
.lp-section h2,
.lp-cta h2,
.auth-heading,
.template-card-title,
.stat-value,
.brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-transform: none;
}

.lp-hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 5rem);
  line-height: 1.02;
  max-width: 13ch;
}

.lp-section h2,
.lp-cta h2 {
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  max-width: 18ch;
}

.lp-lead {
  font-size: 1.15rem;
  color: var(--color-muted);
}

.button,
button.button,
a.button {
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: var(--tinta);
  color: #fffdf9;
  font-family: var(--font-sans);
  font-weight: 600;
  box-shadow: none;
  transition: background 160ms ease, transform 120ms ease;
}

.button:hover:not(:disabled) {
  background: var(--tanah);
  border-color: var(--tanah);
  color: #ffffff;
}

.button:active:not(:disabled) {
  transform: scale(0.98);
}

.button-secondary,
.button-pop {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}

.button-secondary:hover:not(:disabled),
.button-pop:hover:not(:disabled) {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fffdf9;
}

.button-danger {
  background: transparent;
  color: var(--tanah-tua);
  border-color: var(--tanah-tua);
}

.button-danger:hover:not(:disabled) {
  background: var(--tanah-tua);
  border-color: var(--tanah-tua);
  color: #ffffff;
}

.button-small {
  min-height: 38px;
  padding: 0 16px;
}

.button:disabled {
  opacity: 0.45;
}

.card,
.table-wrap,
.plan-card,
.auth-card,
.stat-tile,
.qr-card,
.request-form,
.definition,
.alert,
.plan-notice,
.ob-plan,
.pay-inline {
  border: 1px solid var(--garis);
  border-radius: var(--radius-card);
  background: #fffdf9;
  box-shadow: none;
}

.alert {
  background: var(--color-tint-butter);
  border-color: #e3d08f;
}

.stat-tile:nth-child(1) {
  background: var(--lumut-muda);
}

.stat-tile:nth-child(2) {
  background: #f4dccf;
}

.stat-tile:nth-child(3) {
  background: var(--pasir);
}

.stat-value {
  font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
.text-input,
.select-input,
.editor-input,
.file-input {
  border: 1px solid var(--color-control-border);
  border-radius: 12px;
  background: #fffdf9;
  color: var(--tinta);
  font-family: var(--font-sans);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  border-color: var(--tanah);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.badge {
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas-dalam);
  color: var(--tinta);
  font-weight: 600;
}

.badge-pro {
  background: var(--senja);
  border-color: var(--senja);
  color: var(--tinta);
}

.site-header {
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
  backdrop-filter: none;
}

.site-header-inner {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.nav-link:hover,
.site-nav a:hover {
  color: var(--tanah-tua);
  background: transparent;
}

.brand-mark {
  border: 0;
  border-radius: 50%;
  background: var(--tanah);
  color: #ffffff;
  font-family: var(--font-display);
  box-shadow: none;
}

.lang-switch {
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: #fffdf9;
}

.lang-switch .is-active,
.lang-switch [aria-current] {
  background: var(--tinta);
  color: #fffdf9;
}

.category-filter a,
.page-tabs a,
.range-filter a {
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: #fffdf9;
  box-shadow: none;
  font-weight: 500;
}

.category-filter a:hover,
.page-tabs a:hover,
.range-filter a:hover {
  border-color: var(--tinta);
}

.category-filter a[aria-current],
.page-tabs a[aria-current],
.range-filter [aria-current] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fffdf9;
}

.data-table th {
  background: var(--kertas-dalam);
  color: var(--tinta);
  font-weight: 600;
}

.data-table td {
  border-bottom: 1px solid var(--garis);
}

.app-rail {
  background: var(--kertas-dalam);
  border-right: 1px solid var(--garis);
  color: var(--tinta);
}

.app-rail-item,
.app-rail-user,
.app-rail-name {
  color: var(--tinta);
}

.app-rail-item:hover {
  background: rgba(42, 37, 32, 0.06);
}

.app-rail-item[aria-current="page"] {
  background: #fffdf9;
  color: var(--tinta);
  box-shadow: inset 3px 0 0 var(--tanah);
  border-radius: 10px;
}

.app-rail-avatar,
.avatar-chip {
  border-radius: 50%;
  background: var(--lumut);
  color: #ffffff;
  border: 0;
}

.page-heading {
  border-bottom: 1px solid var(--garis);
}

.page-tile,
.template-card {
  border: 1px solid var(--garis);
  border-radius: 18px;
  background: #fffdf9;
  box-shadow: none;
  overflow: hidden;
  transition: transform 160ms ease, border-color 160ms ease;
}

.page-tile:hover,
.template-card:hover {
  transform: translateY(-2px);
  border-color: var(--tanah);
}

.template-card:hover .template-thumb {
  box-shadow: none;
}

.template-thumb {
  border: 0;
  border-bottom: 1px solid var(--garis);
  border-radius: 0;
}

.template-card-body {
  padding: 12px 16px 16px;
}

.page-tile-art,
.page-tile-foot {
  border-radius: 0;
}

.page-tile-chip,
.page-tile-manage {
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: #fffdf9;
  color: var(--tinta);
}

.page-tile-menu {
  border: 1px solid var(--garis);
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: var(--shadow-md);
}

.page-tile-menu a:hover,
.page-tile-menu button:hover {
  background: var(--kertas-dalam);
}

.stats-heading .back-link {
  color: var(--tanah-tua);
}

.dash-title,
.dashboard-stats-header h2 {
  color: var(--tinta);
  background: transparent;
}

.flash-toast {
  border: 1px solid var(--lumut);
  border-radius: 12px;
  background: var(--lumut-muda);
  color: var(--tinta);
}

.band.lp-hero,
.lp-hero {
  position: relative;
  overflow: hidden;
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}

.lp-hero::before,
.lp-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.lp-hero::before {
  width: min(52vw, 640px);
  aspect-ratio: 1;
  right: -8%;
  top: -22%;
  border-radius: 50%;
  background: var(--senja);
  opacity: 0.7;
}

.lp-hero::after {
  width: min(34vw, 420px);
  aspect-ratio: 1;
  right: 18%;
  bottom: -26%;
  border-radius: 50% 50% 0 0;
  background: var(--lumut-muda);
}

.lp-hero > * {
  position: relative;
  z-index: 1;
}

.lp-hero .button {
  background: var(--tinta);
  color: #fffdf9;
}

.lp-hero .button:hover {
  background: var(--tanah);
}

.lp-phone,
.phone-frame {
  border: 5px solid var(--tinta);
  box-shadow: 0 24px 40px -24px rgba(42, 37, 32, 0.5);
}

.lp-tile,
.lp-editor-shot,
.lp-tile-shot {
  border: 1px solid var(--garis);
  border-radius: 20px;
  box-shadow: none;
}

.lp-tile-butter { background: #f3e6bd; }
.lp-tile-mint { background: var(--lumut-muda); }
.lp-tile-lilac { background: #e8e1ee; }
.lp-tile-peach { background: #f4dccf; }
.lp-tile-sky { background: #dde7ec; }

.band {
  border: 0;
}

.band.band-blue,
.band.band-violet,
.band.band-ink {
  --band-bg: var(--tinta);
  --band-fg: #fffdf9;
  --band-head: var(--senja);
  --band-btn-bg: var(--senja);
  --band-btn-fg: var(--tinta);
}

.band.band-red,
.band.band-green {
  --band-bg: var(--pasir);
  --band-fg: var(--tinta);
  --band-head: var(--tinta);
  --band-btn-bg: var(--tinta);
  --band-btn-fg: #fffdf9;
}

.band.band-yellow,
.band.band-lime {
  --band-bg: var(--lumut-muda);
  --band-fg: var(--tinta);
  --band-head: var(--tinta);
  --band-btn-bg: var(--tinta);
  --band-btn-fg: #fffdf9;
}

.band.band-grey,
.band.band-white {
  --band-bg: var(--kertas);
  --band-fg: var(--tinta);
  --band-head: var(--tinta);
  --band-btn-bg: var(--tinta);
  --band-btn-fg: #fffdf9;
}

.band.lp-hero h1,
.band h2 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.band.lp-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.04;
}

.band h2 {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
}

.band .button {
  min-height: 52px;
  padding: 0 28px;
}

.band.band-green.lp-hero {
  --band-bg: var(--kertas);
  --band-head: var(--tinta);
  --band-btn-bg: var(--tinta);
}


.band .button {
  background: var(--band-btn-bg, var(--tinta));
  color: var(--band-btn-fg, #fffdf9);
  border-color: var(--band-btn-bg, var(--tinta));
}

.site-footer {
  background: var(--kertas-dalam);
  color: var(--tinta);
  border-top: 1px solid var(--garis);
}

.site-footer a {
  color: var(--tanah-tua);
}

.plan-card.is-featured {
  background: #fbeee6;
  border-color: var(--tanah);
  border-width: 1px;
  box-shadow: inset 0 0 0 1px var(--tanah);
}

.plan-card.is-featured h2,
.plan-card.is-featured .muted,
.plan-card.is-featured .plan-price span {
  color: var(--tinta);
}

.plan-card .button {
  border-radius: 999px;
}

.editor-page {
  --color-bg: var(--kertas);
  --color-surface-muted: var(--kertas-dalam);
  --color-accent: var(--tanah);
  --color-accent-hover: var(--tanah-tua);
  --color-accent-soft: #f4dccf;
  --color-border: var(--garis);
  --color-border-strong: #c9bba5;
  --color-phone-frame: var(--tinta);
}

.editor-page .editor {
  --editor-panel-bg: #fffdf9;
  background: var(--kertas);
}

.editor-page .editor-header {
  background: var(--kertas);
  border-bottom: 1px solid var(--garis);
}

.editor-page .button-primary,
.editor-page #publish-button {
  background: var(--tanah);
  border-color: var(--tanah);
  color: #ffffff;
}

.editor-page #publish-button:hover {
  background: var(--tanah-tua);
  border-color: var(--tanah-tua);
}

.editor-page .editor-icon-button {
  border: 1px solid var(--garis);
  border-radius: 50%;
  background: #fffdf9;
  box-shadow: none;
}

.editor-page .editor-icon-button:hover:not(:disabled) {
  background: var(--kertas-dalam);
}

.rail-icon,
.rail-item .ui-icon {
  border: 1px solid var(--garis);
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: none;
}

.rail-item.is-active .rail-icon,
.rail-item.is-active .ui-icon {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fffdf9;
}

.editor-page .panel-list,
.editor-page .panel-settings,
.editor-page .panel-preview {
  border: 1px solid var(--garis);
  border-radius: 20px;
  background: #fffdf9;
  box-shadow: none;
}

.editor-page .panel-preview {
  position: relative;
  overflow: hidden;
  background: var(--lumut-muda);
}

.editor-page .panel-preview::before {
  content: "";
  position: absolute;
  width: 62%;
  aspect-ratio: 1;
  left: -18%;
  top: -12%;
  border-radius: 50%;
  background: var(--senja);
  opacity: 0.55;
}

.editor-page .panel-preview::after {
  content: "";
  position: absolute;
  width: 46%;
  aspect-ratio: 1;
  right: -14%;
  bottom: -10%;
  border-radius: 50% 50% 0 0;
  background: var(--pasir);
}

.editor-page .panel-preview > * {
  position: relative;
  z-index: 1;
}

.block-row,
.editor-list-item,
.block-type-card,
.editor-accordion {
  border: 1px solid var(--garis);
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: none;
}

.block-row.is-selected,
.block-type-card:hover:not(:disabled) {
  border-color: var(--tanah);
  background: #fbeee6;
}

.block-type-icon {
  border: 0;
  border-radius: 12px;
  background: var(--lumut-muda);
  color: var(--tinta);
}

.ctx-menu {
  border: 1px solid var(--garis);
  border-radius: 14px;
  background: #fffdf9;
  box-shadow: var(--shadow-md);
}

.ctx-item:hover,
.ctx-item:focus {
  background: var(--kertas-dalam);
}

dialog,
.editor-dialog,
.confirm-dialog {
  border: 1px solid var(--garis);
  border-radius: 20px;
  background: #fffdf9;
  box-shadow: 0 30px 60px -30px rgba(42, 37, 32, 0.5);
}

dialog::backdrop {
  background: rgba(42, 37, 32, 0.4);
}

.dialog-tab {
  border: 1px solid var(--garis);
  border-radius: 999px;
  font-weight: 500;
}

.dialog-tab.is-active {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fffdf9;
}

.editor-accordion[open] > .editor-accordion-head {
  background: var(--kertas-dalam);
}

.editor-accordion-body {
  border-top: 1px solid var(--garis);
}

.editor-page .editor-tabs {
  background: #fffdf9;
  border-top: 1px solid var(--garis);
}

.editor-page .editor-tab[aria-pressed="true"] {
  background: var(--tinta);
  color: #fffdf9;
}

@media (max-width: 820px) {
  .lp-hero::before {
    width: 80vw;
    right: -30%;
  }

  .lp-hero::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button,
  .template-card,
  .page-tile {
    transition: none;
  }
}

.editor-page #publish-button:not(:disabled) {
  background: var(--tanah);
  border-color: var(--tanah);
  color: #ffffff;
}

.editor-page .button-secondary {
  background: transparent;
  border: 1px solid var(--tinta);
  color: var(--tinta);
}

.editor-page .button-secondary:hover:not(:disabled) {
  background: var(--tinta);
  color: #fffdf9;
}

.editor-page .button {
  font-family: var(--font-sans);
}

.input-wrap input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.input-wrap {
  border: 1px solid var(--color-control-border);
  background: #fffdf9;
}

.input-wrap:focus-within {
  border-color: var(--tanah);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.ob-plan {
  border: 1px solid var(--garis);
  border-radius: 20px;
  background: #fffdf9;
  overflow: hidden;
}

.ob-plan.is-featured {
  background: #fbeee6;
  border-color: var(--tanah);
  box-shadow: inset 0 0 0 1px var(--tanah);
}

.ob-plan-top,
.ob-plan.is-featured .ob-plan-top {
  background: var(--kertas-dalam);
  color: var(--tinta);
}

.ob-plan.is-featured .ob-plan-top {
  background: #f4dccf;
}

.ob-plan-top h2,
.ob-plan.is-featured .ob-plan-top h2 {
  color: var(--tinta);
}

.ob-plan-flag {
  background: var(--tanah);
  color: #ffffff;
  border-radius: 999px;
}

.ob-plan-button {
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--font-sans);
}

.ob-plan-button.is-primary {
  background: var(--tanah);
  border-color: var(--tanah);
  color: #ffffff;
}

.ob-plan-list li::before {
  background: var(--lumut-muda);
}

body .auth-art,
.auth-layout .auth-art,
.auth-page .auth-art {
  background: var(--senja);
}

.auth-card .button,
.auth-step .button,
form .auth-submit {
  background: var(--tinta);
  color: #fffdf9;
}

:root,
:root[data-theme="dark"] {
  --hutan: #2f3d2e;
  --mentega: #f0d98a;
  --art-hero: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 800 720%22%3E%3Ccircle cx=%22560%22 cy=%22250%22 r=%22240%22 fill=%22%23c4694a%22/%3E%3Cpath d=%22M110 720V470a135 135 0 0 1 270 0v250z%22 fill=%22%232f3d2e%22/%3E%3Cpath d=%22M360 720a190 190 0 0 1 380 0z%22 fill=%22%23f0d98a%22/%3E%3Ccircle cx=%22250%22 cy=%22190%22 r=%2272%22 fill=%22%238a9a7b%22/%3E%3Ccircle cx=%22650%22 cy=%22560%22 r=%2256%22 fill=%22none%22 stroke=%22%23e6b8a2%22 stroke-width=%2216%22/%3E%3Cpath d=%22M40 90q40-44 80 0t80 0t80 0%22 fill=%22none%22 stroke=%22%232a2520%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22470%22 cy=%22120%22 r=%2214%22 fill=%22%232a2520%22/%3E%3C/svg%3E");
  --art-head: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 600 200%22%3E%3Ccircle cx=%22520%22 cy=%2240%22 r=%22110%22 fill=%22%23e6b8a2%22/%3E%3Cpath d=%22M360 200a110 110 0 0 1 220 0z%22 fill=%22%23f0d98a%22/%3E%3Ccircle cx=%22430%22 cy=%2270%22 r=%2234%22 fill=%22%238a9a7b%22/%3E%3Cpath d=%22M270 60q22-26 44 0t44 0%22 fill=%22none%22 stroke=%22%232a2520%22 stroke-width=%224%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --art-auth: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 700 900%22 preserveAspectRatio=%22xMidYMid slice%22%3E%3Crect width=%22700%22 height=%22900%22 fill=%22%23e6b8a2%22/%3E%3Ccircle cx=%22130%22 cy=%22150%22 r=%22170%22 fill=%22%23c4694a%22/%3E%3Cpath d=%22M420 900V560a140 140 0 0 1 280 0v340z%22 fill=%22%232f3d2e%22/%3E%3Cpath d=%22M0 900a210 210 0 0 1 420 0z%22 fill=%22%23f0d98a%22/%3E%3Ccircle cx=%22560%22 cy=%22170%22 r=%2270%22 fill=%22%238a9a7b%22/%3E%3Cpath d=%22M60 480q36-40 72 0t72 0t72 0%22 fill=%22none%22 stroke=%22%232a2520%22 stroke-width=%225%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
  --art-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.12 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background-image: var(--art-grain);
  opacity: 0.07;
  mix-blend-mode: multiply;
}

.lp-hero::before,
.lp-hero::after {
  content: none;
}

.band.lp-hero {
  background:
    var(--art-hero) right 3% center / auto 92% no-repeat,
    var(--kertas);
}

.band.band-blue,
.band.band-violet,
.band.band-ink {
  --band-bg: var(--hutan);
  --band-fg: #f5efe6;
  --band-head: var(--mentega);
  --band-btn-bg: var(--mentega);
  --band-btn-fg: var(--tinta);
}

.band.band-red,
.band.band-green {
  --band-bg: var(--senja);
  --band-fg: var(--tinta);
  --band-head: var(--tinta);
  --band-btn-bg: var(--tinta);
  --band-btn-fg: #fffdf9;
}

.band.band-yellow,
.band.band-lime {
  --band-bg: var(--mentega);
}

.band.band-green.lp-hero {
  --band-bg: var(--kertas);
}

.band:not(.lp-hero) {
  position: relative;
  overflow: hidden;
}

.band:not(.lp-hero)::before {
  content: "";
  position: absolute;
  width: clamp(140px, 18vw, 260px);
  aspect-ratio: 1;
  right: -4%;
  top: -60px;
  border-radius: 50%;
  background: var(--band-head);
  opacity: 0.16;
  pointer-events: none;
}

.band:not(.lp-hero)::after {
  content: "";
  position: absolute;
  width: clamp(110px, 14vw, 200px);
  aspect-ratio: 2 / 1;
  left: 3%;
  bottom: -2px;
  border-radius: 999px 999px 0 0;
  background: var(--band-head);
  opacity: 0.13;
  pointer-events: none;
}

.band .band-inner {
  position: relative;
  z-index: 1;
}

.app-rail {
  background: var(--hutan);
  border-right: 0;
  color: #f5efe6;
}

.app-rail-item,
.app-rail-user,
.app-rail-name {
  color: #f5efe6;
}

.app-rail-item:hover {
  background: rgba(245, 239, 230, 0.12);
}

.app-rail-item[aria-current="page"] {
  background: var(--mentega);
  color: var(--tinta);
  box-shadow: none;
}

.app-rail-avatar {
  background: var(--senja);
  color: var(--tinta);
}

.app-rail .lang-switch {
  background: rgba(245, 239, 230, 0.12);
  border-color: rgba(245, 239, 230, 0.3);
  color: #f5efe6;
}

.app-rail .lang-switch .is-active {
  background: var(--mentega);
  color: var(--tinta);
}

.app-shell .page-heading {
  padding: 30px 32px;
  border: 0;
  border-radius: 24px;
  background: var(--art-head) right center / auto 100% no-repeat, var(--pasir);
  margin-bottom: 28px;
}

.app-shell .page-heading h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}

.stat-tile:nth-child(1) {
  background: #cfd9c2;
}

.stat-tile:nth-child(2) {
  background: var(--senja);
}

.stat-tile:nth-child(3) {
  background: var(--mentega);
}

.stat-tile:nth-child(4) {
  background: #fffdf9;
}

.stat-tile {
  border: 0;
  position: relative;
  overflow: hidden;
}

.stat-tile::after {
  content: "";
  position: absolute;
  width: 90px;
  aspect-ratio: 1;
  right: -26px;
  bottom: -30px;
  border-radius: 50%;
  background: rgba(42, 37, 32, 0.08);
}

.stat-value {
  font-size: 2rem;
}

.page-tile,
.template-card {
  border: 0;
  box-shadow: 0 0 0 1px var(--garis);
}

.page-tile:hover,
.template-card:hover {
  box-shadow: 0 0 0 2px var(--tanah);
}

.category-filter a[aria-current],
.page-tabs a[aria-current],
.range-filter [aria-current] {
  background: var(--hutan);
  border-color: var(--hutan);
}

.auth-art {
  background: var(--art-auth) center / cover no-repeat;
}

.auth-art .auth-art-phone {
  filter: drop-shadow(0 24px 30px rgba(42, 37, 32, 0.35));
}

.editor-page .editor-rail .rail-item.is-active .rail-icon,
.editor-page .editor-rail .rail-item.is-active .ui-icon {
  background: var(--hutan);
  border-color: var(--hutan);
}

.editor-page .panel-preview {
  background: var(--senja);
}

.editor-page .panel-preview::before {
  background: var(--tanah);
  width: 70%;
  left: -24%;
  top: -18%;
  opacity: 0.9;
}

.editor-page .panel-preview::after {
  background: var(--mentega);
  width: 58%;
  right: -16%;
  bottom: -16%;
  opacity: 1;
}

.editor-page .editor-header {
  background: var(--hutan);
  border-bottom: 0;
  color: #f5efe6;
}

.editor-page .editor-header .editor-back,
.editor-page .editor-header .editor-page-title,
.editor-page .editor-header .editor-page-address,
.editor-page .editor-header .editor-status {
  color: #f5efe6;
}

.editor-page .editor-header .editor-icon-button {
  background: transparent;
  border-color: rgba(245, 239, 230, 0.4);
  color: #f5efe6;
}

.editor-page .editor-header .button-secondary {
  border-color: #f5efe6;
  color: #f5efe6;
}

.editor-page .editor-header .button-secondary:hover:not(:disabled) {
  background: #f5efe6;
  color: var(--hutan);
}

.editor-page #publish-button:not(:disabled) {
  background: var(--mentega);
  border-color: var(--mentega);
  color: var(--tinta);
}

.site-footer {
  background: var(--hutan);
  color: #f5efe6;
  border-top: 0;
}

.site-footer a {
  color: var(--mentega);
}

@media (max-width: 820px) {
  .band.lp-hero {
    background:
      var(--art-hero) right -20% bottom -6% / auto 54% no-repeat,
      var(--kertas);
  }

  .app-shell .page-heading {
    padding: 22px 20px;
    background-size: auto 70%;
  }
}

body.app-shell .stat-tile:nth-child(1) { background: #cfd9c2; }
body.app-shell .stat-tile:nth-child(2) { background: var(--senja); }
body.app-shell .stat-tile:nth-child(3) { background: var(--mentega); }
body.app-shell .stat-tile:nth-child(4) { background: #fffdf9; }

body.app-shell .stat-tile {
  border: 0;
  border-radius: 20px;
}

.app-rail .lang-switch button,
.app-rail .lang-switch [type="submit"] {
  color: #f5efe6;
}

.app-rail .lang-switch .is-active {
  color: var(--tinta);
}

body .auth-art,
.auth-layout .auth-art,
.auth-page .auth-art {
  background: var(--art-auth) center / cover no-repeat;
}

body .auth-card .button,
body .auth-step .button {
  background: var(--hutan);
  border-color: var(--hutan);
  color: #f5efe6;
}