:root {
  /* --- Hijau: warna utama, aksi, penanda ritme --- */
  --plut-primary-50:  #EEF7F2;
  --plut-primary-100: #D6EDE1;
  --plut-primary-200: #A9D9C2;
  --plut-primary-300: #7CC4A3;
  --plut-primary-500: #2A8A66;
  --plut-primary-600: #1B6E51;
  --plut-primary-700: #175843;
  --plut-primary-900: #0C3227;

  /* --- Biru: penanda format "video" --- */
  --plut-secondary-50:  #F0F5F9;
  --plut-secondary-100: #DCE8F0;
  --plut-secondary-200: #BBD1E1;
  --plut-secondary-600: #325C78;
  --plut-secondary-700: #2A4B61;
  --plut-secondary-800: #233D4F;

  /* --- Kuning tanah: penanda format "foto" --- */
  --plut-accent-50:  #FEF6E9;
  --plut-accent-100: #FCE9C8;
  --plut-accent-200: #F8D28E;
  --plut-accent-600: #B96C07;
  --plut-accent-700: #94540A;

  /* --- Netral bersemu hijau --- */
  --plut-ink-50:  #F4F8F5;
  --plut-ink-100: #E9EFEB;
  --plut-ink-200: #D6DFDA;
  --plut-ink-300: #B3C0B9;
  --plut-ink-400: #7E8F86;
  --plut-ink-500: #5C6F66;
  --plut-ink-600: #48594F;
  --plut-ink-700: #35473F;
  --plut-ink-800: #243830;
  --plut-ink-900: #1A2B25;
  --plut-ink-950: #101C18;

  --plut-success-50:  #E8F8EF;
  --plut-success-600: #17A05C;
  --plut-success-700: #0F7A44;
  --plut-error-50:  #FCEDEC;
  --plut-error-100: #F8D5D2;
  --plut-error-600: #D0342C;
  --plut-error-700: #A62B24;

  --plut-surface: #FFFFFF;
  --plut-canvas:  var(--plut-ink-50);

  /* --- Tipografi --- */
  --plut-font-ui:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --plut-font-serif: "Source Serif 4", Georgia, serif;

  --plut-text-xs:   0.75rem;
  --plut-text-sm:   0.875rem;
  --plut-text-base: 1rem;
  --plut-text-lg:   1.125rem;
  --plut-text-xl:   1.375rem;
  --plut-text-2xl:  1.75rem;
  --plut-text-3xl:  2.25rem;
  --plut-text-4xl:  3rem;

  /* --- Spasi (kelipatan 4px) --- */
  --plut-space-1: 0.25rem;
  --plut-space-2: 0.5rem;
  --plut-space-3: 0.75rem;
  --plut-space-4: 1rem;
  --plut-space-5: 1.25rem;
  --plut-space-6: 1.5rem;
  --plut-space-8: 2rem;
  --plut-space-10: 2.5rem;
  --plut-space-12: 3rem;
  --plut-space-16: 4rem;

  /* --- Sudut & bayangan (persis seperti build lama) --- */
  --plut-radius-sm:   0.75rem;
  --plut-radius-md:   1.25rem;
  --plut-radius-lg:   1.5rem;
  --plut-radius-full: 9999px;

  --plut-shadow-soft: 0 1px 2px rgba(16, 28, 24, .04), 0 8px 24px -12px rgba(16, 28, 24, .1);
  --plut-shadow-lift: 0 2px 4px rgba(16, 28, 24, .05), 0 12px 32px -12px rgba(16, 28, 24, .16);

  --plut-ease: cubic-bezier(.4, 0, .2, 1);
}

:root {
  /* Token turunan yang dipakai komponen baru. Nilainya diambil dari palet yang
     sama, bukan warna baru. */
  --plut-primary-400: #4BA681;
  --plut-primary-800: #144637;
  --plut-accent-300:  #F3B855;
  --plut-accent-400:  #EDA02C;
  --plut-accent-500:  #DC8709;
  --plut-secondary-300: #8FB3CA;
  --plut-secondary-500: #3F7293;
  --plut-success-100: #C9EDD9;

  /* Skala teks bacaan. Sedikit lebih besar dari 16px bawaan: sebagian besar
     penggunanya membaca di HP, sambil berdiri di tempat usaha. */
  --sp-body:    1.0625rem;
  --sp-body-lg: 1.125rem;
  --sp-label:   0.9375rem;
  --sp-eyebrow: 0.8125rem;

  /* Tinggi minimum sasaran sentuh. */
  --sp-touch: 3rem;
  --sp-page:  82rem;
}

.sp-app {
  font-family: var(--plut-font-ui);
  color: var(--plut-ink-800);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.sp {
  font-family: var(--plut-font-ui);
  font-size: var(--sp-body);
  line-height: 1.65;
  color: var(--plut-ink-900);
  display: flex;
  flex-direction: column;
  gap: var(--plut-space-8);
}

.sp *,
.sp *::before,
.sp *::after { box-sizing: border-box; }

.sp :focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--plut-primary-200), 0 0 0 5px var(--plut-ink-50);
  border-radius: 4px;
}

.sp-tnum { font-variant-numeric: tabular-nums; }
.sp-prose { max-width: 62ch; }

/* --- Kepala halaman --- */

.sp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--plut-space-4);
}

.sp-eyebrow {
  display: block;
  font-size: var(--sp-eyebrow);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--plut-primary-600);
  margin-bottom: var(--plut-space-2);
}

.sp-h1 {
  margin: 0 0 var(--plut-space-2);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--plut-ink-950);
}

.sp-h2 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--plut-ink-950);
}

.sp-h3 {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--plut-ink-950);
}

.sp-lede {
  margin: 0;
  max-width: 62ch;
  font-size: var(--sp-body);
  line-height: 1.65;
  color: var(--plut-ink-700);
}

.sp-sub {
  margin: var(--plut-space-1) 0 0;
  font-size: var(--sp-label);
  color: var(--plut-ink-500);
}

@media (min-width: 768px) {
  .sp-h1 { font-size: 2.25rem; }
  .sp-h2 { font-size: 1.75rem; }
}

.sp-card {
  background: var(--plut-surface);
  border: 1px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-lg);
  box-shadow: var(--plut-shadow-soft);
  padding: var(--plut-space-5);
}

@media (min-width: 640px) {
  .sp-card { padding: var(--plut-space-8); }
}

.sp-card--flush { padding: 0; overflow: hidden; }

.sp-card__head {
  padding: var(--plut-space-6);
  border-bottom: 1px solid var(--plut-ink-100);
}

.sp-card__body { padding: var(--plut-space-6); }

@media (min-width: 640px) {
  .sp-card__head, .sp-card__body { padding: var(--plut-space-8); }
}

.sp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--plut-space-6);
}

.sp-stack--tight { gap: var(--plut-space-4); }

.sp-paper {
  border-radius: var(--plut-radius-lg);
  border-left: 3px solid var(--plut-accent-200);
  background: var(--plut-accent-50);
  padding: var(--plut-space-5);
  transition: background-color .2s var(--plut-ease), border-color .2s var(--plut-ease);
}

@media (min-width: 640px) {
  .sp-paper { padding: var(--plut-space-6); }
}

/* Sudah diubah pemiliknya. Dibaca dari edited_sections di database, jadi
   tetap hijau setelah halaman dimuat ulang. */
.sp-paper--edited {
  border-left-color: var(--plut-success-600);
  background: var(--plut-success-50);
}

.sp-paper--data {
  border-left: 0;
  border: 1px solid var(--plut-ink-200);
  background: var(--plut-surface);
}

.sp-paper__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--plut-space-3);
  margin-bottom: var(--plut-space-3);
}

.sp-paper__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--plut-space-2);
  font-size: var(--sp-eyebrow);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--plut-accent-700);
  margin: 0;
}
.sp-paper--edited .sp-paper__badge { color: var(--plut-success-700); }
.sp-paper--data .sp-paper__badge { color: var(--plut-secondary-600); }

.sp-paper__label {
  margin: var(--plut-space-2) 0 0;
  font-size: var(--sp-label);
  font-weight: 600;
  color: var(--plut-ink-700);
}

.sp-paper__hint {
  margin: var(--plut-space-1) 0 0;
  font-size: var(--sp-label);
  font-weight: 400;
  color: var(--plut-ink-500);
}

.sp-paper__tools {
  display: flex;
  flex-direction: column;
  gap: var(--plut-space-2);
  flex-shrink: 0;
}

/* Tulisan AI selalu berhuruf serif. Itu penanda kedua, di samping warna:
   kalimat yang disusun mesin terbaca berbeda dari label antarmuka. */
.sp-paper__text {
  margin: 0;
  font-family: var(--plut-font-serif);
  font-size: var(--sp-body-lg);
  line-height: 1.7;
  color: var(--plut-ink-900);
  max-width: 62ch;
  white-space: pre-wrap;
}

.sp-paper__text--big {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
}

.sp-paper__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
  font-family: var(--plut-font-serif);
  font-size: var(--sp-body-lg);
  line-height: 1.7;
}

.sp-paper__list li {
  display: flex;
  gap: var(--plut-space-3);
  margin-bottom: var(--plut-space-3);
}

.sp-paper__list li::before {
  content: '';
  flex-shrink: 0;
  margin-top: .7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--plut-primary-500);
}

.sp-paper__edit {
  width: 100%;
  font-family: var(--plut-font-serif);
  font-size: var(--sp-body-lg);
  line-height: 1.7;
  color: var(--plut-ink-900);
  background: var(--plut-surface);
  border: 1.5px solid var(--plut-primary-500);
  border-radius: var(--plut-radius-sm);
  padding: var(--plut-space-3) var(--plut-space-4);
  resize: vertical;
  min-height: 7rem;
}
.sp-paper__edit:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 110, 81, .2);
}

.sp-paper__foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plut-space-3);
  margin-top: var(--plut-space-4);
}

/* --- Tagar --- */

.sp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plut-space-2);
  margin: 0;
  padding: 0;
}

.sp-tag {
  padding: .25rem .625rem;
  border-radius: var(--plut-radius-full);
  background: rgba(255, 255, 255, .8);
  font-size: .875rem;
  font-weight: 500;
  color: var(--plut-accent-700);
}
.sp-paper--edited .sp-tag { color: var(--plut-success-700); }

.sp-namepick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--plut-space-3);
  margin-bottom: var(--plut-space-4);
}

.sp-namebox {
  display: inline-flex;
  flex-direction: column;
  padding: var(--plut-space-2) var(--plut-space-4);
  border-radius: var(--plut-radius-sm);
  background: var(--plut-surface);
  border: 1px solid var(--plut-ink-200);
  min-width: 0;
}

.sp-namebox--usulan { border: 1.5px solid var(--plut-accent-300); }

.sp-namebox__role {
  font-size: var(--sp-eyebrow);
  color: var(--plut-ink-500);
}
.sp-namebox--usulan .sp-namebox__role { color: var(--plut-accent-700); }

.sp-namebox__value {
  font-size: var(--sp-label);
  font-weight: 600;
  color: var(--plut-ink-900);
  overflow-wrap: anywhere;
}

.sp-namebox--usulan .sp-namebox__value {
  font-family: var(--plut-font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--plut-ink-950);
}

.sp-namearrow {
  flex-shrink: 0;
  color: var(--plut-ink-400);
}

.sp-field {
  display: flex;
  flex-direction: column;
  gap: var(--plut-space-2);
}

.sp-label {
  font-size: var(--sp-label);
  font-weight: 600;
  color: var(--plut-ink-900);
}

.sp-req {
  margin-left: .25rem;
  font-size: var(--sp-eyebrow);
  font-weight: 600;
  color: var(--plut-primary-700);
}

.sp-opt {
  margin-left: .25rem;
  font-size: var(--sp-eyebrow);
  font-weight: 400;
  color: var(--plut-ink-500);
}

.sp-help {
  margin: -.25rem 0 0;
  font-size: var(--sp-label);
  line-height: 1.5;
  color: var(--plut-ink-500);
}

.sp-input,
.sp-select,
.sp-textarea {
  width: 100%;
  font-family: inherit;
  font-size: var(--sp-body);
  color: var(--plut-ink-900);
  background: var(--plut-surface);
  border: 1.5px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-sm);
  transition: border-color .15s var(--plut-ease), box-shadow .15s var(--plut-ease);
}

.sp-input, .sp-select { height: var(--sp-touch); padding: 0 var(--plut-space-4); }
.sp-textarea { padding: var(--plut-space-3) var(--plut-space-4); line-height: 1.6; resize: vertical; }

.sp-input:focus,
.sp-select:focus,
.sp-textarea:focus {
  outline: none;
  border-color: var(--plut-primary-600);
  box-shadow: 0 0 0 3px rgba(27, 110, 81, .2);
}

.sp-input::placeholder,
.sp-textarea::placeholder { color: var(--plut-ink-300); }

/* Panah select digambar sendiri supaya bentuknya sama di semua peramban. */
.sp-selectwrap { position: relative; }
.sp-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
}
.sp-selectwrap::after {
  content: '';
  position: absolute;
  right: 1.125rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--plut-ink-400);
  border-bottom: 2px solid var(--plut-ink-400);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.sp-prefix { position: relative; }
.sp-prefix > span {
  position: absolute;
  left: var(--plut-space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--sp-body);
  color: var(--plut-ink-500);
  pointer-events: none;
}
.sp-prefix > input { padding-left: 2.75rem; }

.sp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--plut-space-4);
}
.sp-grid--1 { grid-template-columns: minmax(0, 1fr); }
.sp-span { grid-column: 1 / -1; }

.sp-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--plut-space-3);
}

.sp-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  padding: var(--plut-space-4);
  border-radius: var(--plut-radius-sm);
  background: var(--plut-surface);
  border: 1.5px solid var(--plut-ink-200);
  cursor: pointer;
  transition: border-color .15s var(--plut-ease), background-color .15s var(--plut-ease);
}

.sp-choice:hover { border-color: var(--plut-ink-300); }

.sp-choice input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sp-choice:has(input:checked) {
  border-color: var(--plut-primary-600);
  background: var(--plut-primary-50);
}
.sp-choice:has(input:focus-visible) {
  box-shadow: 0 0 0 3px rgba(27, 110, 81, .2);
}

.sp-choice__icon { color: var(--plut-primary-600); }
.sp-choice__title { font-size: var(--sp-label); font-weight: 600; color: var(--plut-ink-950); }
.sp-choice__note { font-size: var(--sp-label); color: var(--plut-ink-500); }

.sp-choice--row {
  flex-direction: row;
  align-items: center;
  gap: var(--plut-space-3);
  min-height: var(--sp-touch);
  padding: 0 var(--plut-space-4);
}
.sp-choice--row .sp-choice__icon { color: var(--plut-ink-700); flex-shrink: 0; }
.sp-choice--row:has(input:checked) .sp-choice__icon { color: var(--plut-primary-700); }

.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--plut-space-2);
  height: var(--sp-touch);
  padding: 0 var(--plut-space-6);
  border: 1.5px solid transparent;
  border-radius: var(--plut-radius-sm);
  font-family: inherit;
  font-size: var(--sp-label);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s var(--plut-ease), border-color .15s var(--plut-ease), transform .1s var(--plut-ease);
}

.sp-btn:active { transform: scale(.98); }
.sp-btn:disabled { cursor: not-allowed; transform: none; }

/* Kuning tanah dipakai KHUSUS untuk tindakan yang memanggil AI. Warna itu
   jadi penanda: "menekan ini memakai jatah AI dan butuh waktu". */
.sp-btn--ai { background: var(--plut-accent-500); color: var(--plut-ink-950); }
.sp-btn--ai:hover:not(:disabled) { background: var(--plut-accent-600); color: #fff; }
.sp-btn--ai:disabled { background: var(--plut-accent-100); color: var(--plut-ink-400); }

.sp-btn--primary { background: var(--plut-primary-600); color: #fff; }
.sp-btn--primary:hover:not(:disabled) { background: var(--plut-primary-700); }
.sp-btn--primary:disabled { background: var(--plut-ink-200); color: var(--plut-ink-400); }

.sp-btn--ghost {
  background: var(--plut-surface);
  color: var(--plut-ink-900);
  border-color: var(--plut-ink-200);
}
.sp-btn--ghost:hover:not(:disabled) { background: var(--plut-ink-50); border-color: var(--plut-ink-300); }

.sp-btn--danger { background: transparent; color: var(--plut-error-600); }
.sp-btn--danger:hover:not(:disabled) { background: var(--plut-error-50); }

.sp-btn--sm { height: 2.5rem; padding: 0 .875rem; font-size: .875rem; }
.sp-btn--full { width: 100%; }
.sp-btn--tool {
  height: 2.5rem;
  padding: 0 .875rem;
  font-size: .875rem;
  background: rgba(255, 255, 255, .7);
  color: var(--plut-ink-900);
  border-color: var(--plut-ink-200);
}
.sp-btn--tool:hover:not(:disabled) { background: var(--plut-surface); }

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plut-space-3);
  align-items: center;
}
.sp-actions__gap { flex: 1; }

.sp-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3rem .7rem;
  border-radius: var(--plut-radius-full);
  font-size: var(--sp-eyebrow);
  font-weight: 700;
  background: var(--plut-ink-100);
  color: var(--plut-ink-600);
  white-space: nowrap;
}
.sp-badge--ok { background: var(--plut-success-50); color: var(--plut-success-700); }
.sp-badge--wait { background: var(--plut-secondary-50); color: var(--plut-secondary-700); }
.sp-badge--todo { background: var(--plut-accent-50); color: var(--plut-accent-700); }
.sp-badge--live { background: var(--plut-primary-600); color: #fff; }
.sp-badge__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }

.sp-note {
  display: flex;
  gap: var(--plut-space-3);
  padding: var(--plut-space-4);
  border-radius: var(--plut-radius-sm);
  font-size: var(--sp-label);
  line-height: 1.6;
  background: var(--plut-secondary-50);
  border: 1px solid var(--plut-secondary-100);
  color: var(--plut-secondary-700);
}
.sp-note--warn {
  background: var(--plut-accent-50);
  border-color: var(--plut-accent-100);
  color: var(--plut-accent-700);
}
.sp-note--bad {
  background: var(--plut-error-50);
  border-color: var(--plut-error-100);
  color: var(--plut-error-700);
}
.sp-note--ok {
  background: var(--plut-success-50);
  border-color: var(--plut-success-100);
  color: var(--plut-success-700);
}
.sp-note svg { flex-shrink: 0; margin-top: .15rem; }
.sp-note p { margin: 0; }

/* Keterangan arti warna. Tanpa ini, latar kuning dan hijau cuma terlihat
   sebagai hiasan. */
.sp-legend {
  padding: var(--plut-space-4);
  border-radius: var(--plut-radius-sm);
  background: var(--plut-secondary-50);
  border: 1px solid var(--plut-secondary-100);
}
.sp-legend__title { margin: 0 0 var(--plut-space-3); font-size: var(--sp-label); color: var(--plut-secondary-700); }
.sp-legend__row { display: flex; flex-wrap: wrap; gap: var(--plut-space-2) var(--plut-space-6); }
.sp-legend__item { display: inline-flex; align-items: center; gap: var(--plut-space-2); font-size: var(--sp-label); color: var(--plut-ink-700); }
.sp-legend__swatch { width: 1rem; height: 1rem; border-radius: 4px; flex-shrink: 0; }
.sp-legend__swatch--ai { background: var(--plut-accent-50); border-left: 3px solid var(--plut-accent-200); }
.sp-legend__swatch--edited { background: var(--plut-success-50); border-left: 3px solid var(--plut-success-600); }
.sp-legend__swatch--data { background: var(--plut-surface); border: 1px solid var(--plut-ink-200); }

.sp-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 56rem;
}

.sp-timeline::before {
  content: '';
  position: absolute;
  left: 27px;
  top: 1.75rem;
  bottom: 1.75rem;
  width: 1px;
  background: var(--plut-ink-200);
}

.sp-tl {
  position: relative;
  display: flex;
  gap: var(--plut-space-6);
  padding-bottom: var(--plut-space-6);
}

.sp-tl__date {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--plut-surface);
  border: 2px solid var(--plut-ink-200);
  color: var(--plut-ink-900);
  text-align: center;
  line-height: 1;
}

.sp-tl--first .sp-tl__date {
  background: var(--plut-primary-600);
  border-color: var(--plut-primary-600);
  color: #fff;
  box-shadow: var(--plut-shadow-soft);
}

.sp-tl__day { display: block; font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-tl__dow { display: block; margin-top: .1rem; font-size: .625rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--plut-ink-500); }
.sp-tl--first .sp-tl__dow { color: rgba(255, 255, 255, .8); }

.sp-tl__body {
  flex: 1;
  min-width: 0;
  background: var(--plut-surface);
  border: 1px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-lg);
  box-shadow: var(--plut-shadow-soft);
  padding: var(--plut-space-5);
}

@media (min-width: 640px) {
  .sp-tl__body { padding: var(--plut-space-6); }
}

.sp-tl__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plut-space-2);
  margin-bottom: var(--plut-space-3);
}

.sp-tl__topic {
  margin: 0 0 var(--plut-space-3);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--plut-ink-950);
}

.sp-tl__mobiledate { display: none; }

/* Lencana format. Warnanya membedakan jenis pekerjaan sekali lihat:
   hijau perlu direkam, biru cukup difoto, kuning perlu disusun berlapis. */
.sp-fmt { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: var(--plut-radius-full); font-size: var(--sp-eyebrow); font-weight: 700; }
.sp-fmt--video    { background: var(--plut-primary-50); color: var(--plut-primary-700); }
.sp-fmt--foto     { background: var(--plut-secondary-50); color: var(--plut-secondary-700); }
.sp-fmt--carousel { background: var(--plut-accent-50); color: var(--plut-accent-700); }

/* --- Video referensi --- */

.sp-vid {
  display: flex;
  align-items: center;
  gap: var(--plut-space-3);
  padding: var(--plut-space-3);
  border-radius: var(--plut-radius-sm);
  border: 1px solid var(--plut-ink-200);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s var(--plut-ease), background-color .15s var(--plut-ease);
}
.sp-vid:hover { border-color: var(--plut-secondary-300); background: var(--plut-secondary-50); }

.sp-vid__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--plut-error-50);
  color: var(--plut-error-600);
}

.sp-vid__body { min-width: 0; flex: 1; }
.sp-vid__kicker { display: block; font-size: var(--sp-eyebrow); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--plut-ink-500); margin-bottom: .1rem; }
.sp-vid__title { display: block; font-size: var(--sp-label); font-weight: 600; color: var(--plut-ink-950); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-vid__out { flex-shrink: 0; color: var(--plut-ink-400); }
.sp-vid:hover .sp-vid__out { color: var(--plut-secondary-600); }

.sp-ptabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plut-space-3);
}

.sp-ptab {
  display: inline-flex;
  align-items: center;
  gap: var(--plut-space-2);
  height: var(--sp-touch);
  padding: 0 var(--plut-space-5);
  border-radius: var(--plut-radius-sm);
  border: 1.5px solid var(--plut-ink-200);
  background: var(--plut-surface);
  color: var(--plut-ink-900);
  font-family: inherit;
  font-size: var(--sp-label);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s var(--plut-ease), border-color .15s var(--plut-ease);
}
.sp-ptab:hover { background: var(--plut-ink-50); }

.sp-ptab[aria-selected="true"] {
  background: var(--plut-primary-600);
  border-color: var(--plut-primary-600);
  color: #fff;
}
.sp-ptab[aria-selected="true"] .sp-badge { background: rgba(255, 255, 255, .2); color: #fff; }

.sp-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--plut-space-6);
  align-items: start;
}

@media (min-width: 1100px) {
  .sp-split { grid-template-columns: 23rem minmax(0, 1fr); gap: var(--plut-space-8); }
  /* Kolom isian ikut menggulung sendiri supaya pratinjau di kanan tetap
     terlihat sambil pemiliknya mengetik. */
  .sp-split__form {
    position: sticky;
    top: var(--plut-space-4);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}

.sp-step {
  display: flex;
  align-items: center;
  gap: var(--plut-space-3);
  margin-bottom: var(--plut-space-1);
}

.sp-step__num {
  display: grid;
  place-items: center;
  width: 1.75rem; height: 1.75rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--plut-primary-600);
  color: #fff;
  font-size: var(--sp-eyebrow);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-step__note {
  margin: 0 0 var(--plut-space-5) 2.75rem;
  font-size: var(--sp-label);
  color: var(--plut-ink-500);
}

.sp-avatar {
  display: grid;
  place-items: center;
  width: 4rem; height: 4rem;
  flex-shrink: 0;
  border-radius: var(--plut-radius-lg);
  background: var(--plut-primary-50);
  color: var(--plut-primary-600);
  font-size: 1.375rem;
  font-weight: 800;
}

.sp-dl { margin: 0; display: grid; gap: var(--plut-space-4); }
@media (min-width: 640px) { .sp-dl--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-dl__row { display: flex; align-items: center; gap: var(--plut-space-3); }
.sp-dl__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: var(--plut-radius-sm); }
.sp-dl dt { font-size: var(--sp-label); color: var(--plut-ink-500); }
.sp-dl dd { margin: 0; font-size: var(--sp-label); font-weight: 600; color: var(--plut-ink-950); overflow-wrap: anywhere; }

/* Tabel spesifikasi produk */
.sp-spec { margin: 0; }
.sp-spec__row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--plut-space-3) 0;
  border-top: 1px solid var(--plut-ink-100);
}
.sp-spec__row:first-child { border-top: 0; }
.sp-spec dt { font-size: var(--sp-label); color: var(--plut-ink-500); }
.sp-spec dd { margin: 0; font-size: var(--sp-body); color: var(--plut-ink-900); overflow-wrap: anywhere; }

@media (min-width: 640px) {
  .sp-spec__row { flex-direction: row; align-items: baseline; gap: var(--plut-space-4); }
  .sp-spec dt { width: 11rem; flex-shrink: 0; }
}

/* Kartu harga */
.sp-price { display: grid; gap: var(--plut-space-4); }
@media (min-width: 640px) { .sp-price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-price__box { padding: var(--plut-space-4); border-radius: var(--plut-radius-sm); }
.sp-price__box--main { background: var(--plut-primary-50); border: 1px solid var(--plut-primary-100); }
.sp-price__box--alt { background: var(--plut-ink-50); border: 1px solid var(--plut-ink-100); }
.sp-price__label { margin: 0 0 .25rem; font-size: var(--sp-label); color: var(--plut-ink-500); }
.sp-price__box--main .sp-price__label { color: var(--plut-primary-700); }
.sp-price__value { margin: 0; font-size: 1.625rem; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--plut-ink-900); }
.sp-price__box--main .sp-price__value { color: var(--plut-primary-800); }
.sp-price__note { margin: var(--plut-space-2) 0 0; font-size: var(--sp-label); color: var(--plut-ink-500); }

.sp-busy { display: flex; flex-direction: column; gap: var(--plut-space-6); }
.sp-busy__row { display: flex; align-items: center; gap: var(--plut-space-3); }

.sp-spin {
  width: 1.25rem; height: 1.25rem;
  flex-shrink: 0;
  border: 2.2px solid var(--plut-accent-200);
  border-top-color: var(--plut-accent-500);
  border-radius: 50%;
  animation: sp-spin 900ms linear infinite;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

.sp-busy__text { margin: 0; font-size: var(--sp-label); font-weight: 600; color: var(--plut-ink-700); }

.sp-ghost {
  height: 7rem;
  border-radius: var(--plut-radius-lg);
  border: 1px solid var(--plut-ink-200);
  background: var(--plut-surface);
  animation: sp-pulse 1.8s var(--plut-ease) infinite;
}
.sp-ghost + .sp-ghost { margin-top: var(--plut-space-4); }
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.sp-empty {
  border: 1px dashed var(--plut-ink-200);
  border-radius: var(--plut-radius-lg);
  background: var(--plut-surface);
  padding: var(--plut-space-12) var(--plut-space-6);
  text-align: center;
}
.sp-empty__title { margin: 0 0 var(--plut-space-2); font-size: 1.375rem; font-weight: 700; color: var(--plut-ink-950); }
.sp-empty__text { margin: 0 auto var(--plut-space-6); max-width: 46ch; font-size: var(--sp-label); line-height: 1.65; color: var(--plut-ink-500); }

.sp-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  z-index: 60;
  transform: translateX(-50%);
  width: calc(100% - 2.5rem);
  max-width: 28rem;
  animation: sp-rise .22s var(--plut-ease);
}
@keyframes sp-rise { from { opacity: 0; transform: translate(-50%, .5rem); } to { opacity: 1; transform: translate(-50%, 0); } }

.sp-toast__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--plut-space-3);
  padding: var(--plut-space-4);
  border-radius: var(--plut-radius-sm);
  box-shadow: var(--plut-shadow-lift);
  font-size: var(--sp-label);
  background: var(--plut-success-50);
  border: 1px solid var(--plut-success-100);
  color: var(--plut-success-700);
}
.sp-toast--bad .sp-toast__inner {
  background: var(--plut-error-50);
  border-color: var(--plut-error-100);
  color: var(--plut-error-700);
}
.sp-toast p { margin: 0; }

.sp-modal {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--plut-space-5);
}
.sp-modal__veil { position: absolute; inset: 0; background: rgba(16, 28, 24, .4); border: 0; }
.sp-modal__box {
  position: relative;
  width: 100%;
  max-width: 32rem;
  background: var(--plut-surface);
  border: 1px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-lg);
  box-shadow: var(--plut-shadow-lift);
  padding: var(--plut-space-6);
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.sp-modal__icon {
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: var(--plut-radius-sm);
  background: var(--plut-primary-50);
  color: var(--plut-primary-600);
  margin-bottom: var(--plut-space-4);
}
.sp-modal__list { margin: 0 0 var(--plut-space-6); padding: 0; list-style: none; font-size: var(--sp-label); }
.sp-modal__list li { display: flex; gap: var(--plut-space-3); margin-bottom: var(--plut-space-2); color: var(--plut-ink-700); }
.sp-modal__list svg { flex-shrink: 0; color: var(--plut-success-600); }
.sp-modal__foot { display: flex; flex-direction: column-reverse; gap: var(--plut-space-3); }
@media (min-width: 640px) { .sp-modal__foot { flex-direction: row; justify-content: flex-end; } }

@media (max-width: 640px) {
  .sp-timeline::before { display: none; }
  .sp-tl { gap: 0; }
  .sp-tl__date { display: none; }
  .sp-tl__mobiledate { display: inline-flex; }
  .sp-grid { grid-template-columns: minmax(0, 1fr); }
  .sp-paper__top { flex-direction: column; }
  .sp-paper__tools { flex-direction: row; flex-wrap: wrap; }
  .sp-actions .sp-btn { flex: 1 1 100%; }
  .sp-actions__gap { display: none; }
  .sp-card { padding: var(--plut-space-5) var(--plut-space-4); }
}

@media print {
  body { background: #fff; }
  .sp-no-print,
  .sp-btn,
  .sp-actions,
  .sp-toast,
  .sp-modal,
  .sp-legend,
  .sp-ptabs,
  .sp-split__form { display: none !important; }

  .sp-split { grid-template-columns: minmax(0, 1fr) !important; }
  .sp-card, .sp-tl__body { box-shadow: none; border-color: var(--plut-ink-300); break-inside: avoid; }
  .sp-paper { break-inside: avoid; }
  .sp-tl { break-inside: avoid; }
  .sp-timeline::before { display: none; }
  .sp { gap: var(--plut-space-6); }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75rem; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
  .sp *, .sp *::before, .sp *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

.sp-lonceng {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

.sp-lonceng__tombol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--plut-radius-full);
  border: 1px solid transparent;
  background: transparent;
  color: var(--plut-ink-600);
  cursor: pointer;
  transition: background-color .15s var(--plut-ease), color .15s var(--plut-ease);
}
.sp-lonceng__tombol:hover { background: var(--plut-ink-100); color: var(--plut-ink-800); }
.sp-lonceng__tombol:focus-visible { outline: 2px solid var(--plut-primary-500); outline-offset: 2px; }
.sp-lonceng__tombol[aria-expanded="true"] { background: var(--plut-primary-50); color: var(--plut-primary-700); }

.sp-lonceng__lencana {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 .25rem;
  border-radius: var(--plut-radius-full);
  background: var(--plut-error-600);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.1rem;
  text-align: center;
  border: 2px solid var(--plut-surface);
}

.sp-lonceng__panel {
  position: absolute;
  top: calc(100% + .5rem);
  right: 0;
  width: 21rem;
  max-width: calc(100vw - 2rem);
  max-height: 26rem;
  display: flex;
  flex-direction: column;
  background: var(--plut-surface);
  border: 1px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-md);
  box-shadow: var(--plut-shadow-lift);
  overflow: hidden;
  z-index: 80;
}

.sp-notif-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--plut-space-3);
  padding: var(--plut-space-4) var(--plut-space-4) var(--plut-space-3);
  border-bottom: 1px solid var(--plut-ink-100);
  flex-shrink: 0;
}
.sp-notif-kepala__judul { font-weight: 700; font-size: var(--sp-label); color: var(--plut-ink-900); }
.sp-notif-kepala__aksi {
  border: none;
  background: none;
  color: var(--plut-primary-600);
  font-size: var(--plut-text-xs);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.sp-notif-kepala__aksi:hover { text-decoration: underline; }

.sp-notif-isi { overflow-y: auto; flex: 1 1 auto; }

.sp-notif-daftar { display: flex; flex-direction: column; }

.sp-notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--plut-space-3);
  width: 100%;
  padding: var(--plut-space-3) var(--plut-space-4);
  border: none;
  border-bottom: 1px solid var(--plut-ink-100);
  background: var(--plut-surface);
  text-align: left;
  cursor: pointer;
  transition: background-color .15s var(--plut-ease);
}
.sp-notif-item:last-child { border-bottom: none; }
.sp-notif-item:hover { background: var(--plut-ink-50); }
.sp-notif-item--baru { background: var(--plut-primary-50); }
.sp-notif-item--baru:hover { background: var(--plut-primary-100); }

.sp-notif-item__titik {
  flex-shrink: 0;
  width: .5rem;
  height: .5rem;
  margin-top: .4rem;
  border-radius: 50%;
  background: var(--plut-primary-500);
}
.sp-notif-item:not(.sp-notif-item--baru) .sp-notif-item__titik { visibility: hidden; }

.sp-notif-item__isi { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sp-notif-item__judul { font-weight: 600; font-size: var(--plut-text-sm); color: var(--plut-ink-900); }
.sp-notif-item__body {
  font-size: var(--plut-text-xs);
  color: var(--plut-ink-600);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.sp-notif-item__waktu { font-size: var(--plut-text-xs); color: var(--plut-ink-400); margin-top: .1rem; }

.sp-notif-kosong {
  padding: var(--plut-space-8) var(--plut-space-4);
  text-align: center;
  color: var(--plut-ink-400);
  font-size: var(--plut-text-sm);
}

@media (max-width: 640px) {
  .sp-lonceng__panel {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    max-height: 70vh;
    border-radius: var(--plut-radius-md) var(--plut-radius-md) 0 0;
  }
}

.sp-app [hidden],
.sp-app[hidden] { display: none !important; }

.sp-lipat {
  border: 1px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-sm);
  background: var(--plut-surface);
}
.sp-lipat > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--plut-space-3);
  min-height: 2.75rem;
  padding: var(--plut-space-3) var(--plut-space-4);
  font-weight: 600;
  font-size: var(--sp-label);
  color: var(--plut-primary-700);
}
.sp-lipat > summary::-webkit-details-marker { display: none; }
.sp-lipat > summary::after {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s var(--plut-ease);
  flex-shrink: 0;
}
.sp-lipat[open] > summary::after { transform: rotate(-135deg); }
.sp-lipat__isi { padding: 0 var(--plut-space-4) var(--plut-space-4); }

.sp-status {
  display: flex;
  flex-direction: column;
  gap: var(--plut-space-4);
  padding: var(--plut-space-5);
  border-radius: var(--plut-radius-md);
  border: 1px solid var(--plut-ink-200);
  background: var(--plut-ink-50);
}
.sp-status__judul { margin: 0; font-weight: 700; font-size: var(--sp-body); color: var(--plut-ink-900); }
.sp-status__teks { margin: 0; font-size: var(--sp-label); line-height: 1.6; color: var(--plut-ink-600); }
.sp-status--ok { background: var(--plut-success-50); border-color: var(--plut-success-100); }
.sp-status--ok .sp-status__judul { color: var(--plut-success-700); }

/* Dua pilihan menayangkan produk: terbitkan sendiri / kirim ke admin. */
.sp-pilihan { display: grid; gap: var(--plut-space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sp-pilihan { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sp-pilihan__kartu {
  display: flex;
  flex-direction: column;
  gap: var(--plut-space-3);
  padding: var(--plut-space-5);
  border-radius: var(--plut-radius-md);
  border: 1px solid var(--plut-ink-200);
  background: var(--plut-surface);
}
.sp-pilihan__kartu--utama { border-color: var(--plut-primary-200); box-shadow: 0 0 0 3px var(--plut-primary-50); }
.sp-pilihan__judul { margin: 0; font-weight: 700; font-size: var(--sp-body); color: var(--plut-ink-900); }
.sp-pilihan__teks { margin: 0; font-size: var(--sp-label); line-height: 1.6; color: var(--plut-ink-600); flex: 1; }

.sp-syarat { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--plut-space-2); font-size: var(--sp-label); }
.sp-syarat li { display: flex; align-items: center; gap: var(--plut-space-2); color: var(--plut-ink-700); }
.sp-syarat__tanda {
  display: grid; place-items: center;
  width: 1.25rem; height: 1.25rem; flex-shrink: 0;
  border-radius: 50%;
  font-size: .75rem; font-weight: 700;
}
.sp-syarat__tanda--ok { background: var(--plut-success-50); color: var(--plut-success-700); }
.sp-syarat__tanda--kurang { background: var(--plut-accent-50); color: var(--plut-accent-700); }

/* Ringkasan produk yang sudah tayang (kolom kiri Profil Usaha). */
.sp-ringkas {
  display: flex;
  gap: var(--plut-space-3);
  align-items: center;
  padding: var(--plut-space-3);
  border-radius: var(--plut-radius-sm);
  border: 1px solid var(--plut-ink-200);
  background: var(--plut-surface);
}
.sp-ringkas__foto {
  width: 3.5rem; height: 3.5rem; flex-shrink: 0;
  border-radius: var(--plut-radius-sm);
  object-fit: cover;
  background: var(--plut-ink-100);
  display: grid; place-items: center;
  color: var(--plut-ink-300);
}
.sp-ringkas__nama { margin: 0; font-weight: 600; color: var(--plut-ink-900); overflow-wrap: anywhere; }
.sp-ringkas__meta { margin: .1rem 0 0; font-size: var(--sp-label); color: var(--plut-ink-500); }

.sp-produk-grid { display: grid; gap: var(--plut-space-4); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.sp-produk-kartu {
  display: flex;
  flex-direction: column;
  background: var(--plut-surface);
  border: 1px solid var(--plut-ink-200);
  border-radius: var(--plut-radius-lg);
  box-shadow: var(--plut-shadow-soft);
  overflow: hidden;
}
.sp-produk-kartu__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--plut-ink-50);
  display: grid; place-items: center;
  color: var(--plut-ink-300);
}
.sp-produk-kartu__isi { display: flex; flex-direction: column; gap: var(--plut-space-2); padding: var(--plut-space-4); flex: 1; }
.sp-produk-kartu__nama { margin: 0; font-weight: 700; color: var(--plut-ink-900); overflow-wrap: anywhere; }
.sp-produk-kartu__pemilik { margin: 0; font-size: var(--sp-label); color: var(--plut-ink-500); }
.sp-produk-kartu__harga { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--plut-ink-900); }
.sp-produk-kartu__harga span { font-weight: 400; color: var(--plut-ink-500); }
.sp-produk-kartu__lencana { display: flex; flex-wrap: wrap; gap: .4rem; }
.sp-produk-kartu__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--plut-space-2);
  padding: var(--plut-space-3) var(--plut-space-4) var(--plut-space-4);
  margin-top: auto;
}
.sp-produk-kartu__aksi .sp-btn { flex: 1 1 auto; }
.sp-badge--asal { background: var(--plut-accent-50); color: var(--plut-accent-700); border: 1px solid var(--plut-accent-100); }

.sp-admin-kepala { display: flex; flex-direction: column; gap: var(--plut-space-4); }
.sp-admin-kepala__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--plut-space-4);
}
.sp-admin-kepala__saring { display: flex; flex-wrap: wrap; gap: var(--plut-space-2); }

.sp-modal__box--lebar { max-width: 40rem; }
.sp-foto-baris { display: flex; align-items: center; gap: var(--plut-space-4); flex-wrap: wrap; }
.sp-foto-baris__gambar {
  width: 5rem; height: 5rem; flex-shrink: 0;
  border-radius: var(--plut-radius-sm);
  border: 1px solid var(--plut-ink-200);
  object-fit: cover;
  background: var(--plut-ink-100);
  display: grid; place-items: center;
  color: var(--plut-ink-300);
}
.sp-modal__kepala { display: flex; flex-direction: column; gap: var(--plut-space-2); margin-bottom: var(--plut-space-5); }

/* Kartu produk: cukup lebar untuk dua lencana sebaris, tombol aksi penuh. */
.sp-produk-grid { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.sp-produk-kartu__aksi .sp-btn { flex: 1 1 100%; }
.sp-foto-baris > div { flex: 1 1 14rem; min-width: 0; }

/* Tautan "Cari contoh lain" di bawah video contoh Rencana Konten */
.sp-vid-lain {
  display: inline-block;
  margin-top: var(--plut-space-1);
  font-size: var(--plut-text-xs);
  font-weight: 600;
  color: var(--plut-secondary-600, var(--plut-primary-600));
  text-decoration: none;
}
.sp-vid-lain:hover { text-decoration: underline; }