/* Kaset 90-an — tape deck arang di atas meja krem, kaset hitam asap berlabel kertas, sampul kertas kaset berstrip. */
:root {
  --meja: #e7decd;
  --meja-gelap: #d8ccb5;
  --kertas: #f7f0e1;
  --tinta: #1f1d1b;
  --abu: #6e675c;
  --garis: #d4c8b0;
  --arang: #2a2826;
  --arang-2: #3a3734;
  --merah: #df4a2e;
  --jingga: #f0952f;
  --kuning: #f3c544;
  --hijau: #2a8a83;
  --lcd: #b9f3a6;
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --tangan: 'Permanent Marker', 'Comic Sans MS', cursive;
  --lcd-font: 'VT323', ui-monospace, monospace;
  --sans: 'Work Sans', 'Helvetica Neue', Arial, sans-serif;
  --tepi: clamp(18px, 5cqw, 56px);
}

* {
  box-sizing: border-box;
}

html {
  --ub-latar: var(--meja);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  background-color: var(--meja);
  /* Bintik plastik meja, dibuat kode. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
dl,
dd,
ol,
blockquote {
  margin: 0;
}

::selection {
  background: var(--kuning);
  color: var(--tinta);
}

a {
  color: inherit;
}

.ks-kecil {
  display: block;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abu);
}

.ks-paragraf {
  max-width: 52ch;
  font-size: 16px;
  line-height: 1.7;
}

.ks-tautan {
  font-size: 14px;
  font-weight: 500;
  color: var(--hijau);
}

.no-js .ks-js,
.no-js .ks-js-saja {
  display: none !important;
}

/* ---------- Tata letak ---------- */

.ks-meja {
  min-height: 100svh;
}

/* ---------- Deck ---------- */

.ks-deck {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4vh, 32px);
  min-height: 100svh;
  padding: 64px var(--tepi) 40px;
}

.ks-untuk {
  display: grid;
  justify-items: center;
  gap: 4px;
  text-align: center;
}

.ks-untuk__nama {
  font: 400 clamp(26px, 6.4cqw, 38px) / 1.1 var(--tangan);
  color: var(--tinta);
  transform: rotate(-1.5deg);
}

.ks-alat {
  width: min(100%, 520px);
  padding: 14px 14px 16px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.07), transparent 22%),
    linear-gradient(160deg, #34312e, #22201e 70%);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.12) inset,
    0 -2px 0 rgb(0 0 0 / 0.35) inset,
    0 30px 50px -24px rgb(56 40 18 / 0.55),
    0 10px 18px -10px rgb(56 40 18 / 0.4);
}

.ks-alat__atas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px 10px;
}

.ks-alat__merk {
  font: 600 10px/1 var(--sans);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #a39d93;
}

.ks-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b2a22;
  box-shadow: 0 0 0 2px #1a1817;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}

.ks-main .ks-led {
  background: #ff5a3c;
  box-shadow:
    0 0 0 2px #1a1817,
    0 0 10px #ff5a3c;
}

/* Pintu kaset: kaca gelap berbingkai logam. */
.ks-pintu {
  padding: clamp(10px, 2.6cqw, 16px);
  border-radius: 10px;
  background:
    linear-gradient(
      115deg,
      rgb(255 255 255 / 0.1) 0 18%,
      transparent 18% 40%,
      rgb(255 255 255 / 0.05) 40% 46%,
      transparent 46%
    ),
    #121110;
  box-shadow:
    0 0 0 3px #4c4844,
    0 0 0 4px #1a1817,
    0 2px 10px rgb(0 0 0 / 0.6) inset;
  perspective: 1200px;
}

.ks-kaset {
  position: relative;
  aspect-ratio: 400 / 252;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.6, 0.05, 0.25, 1);
}

.ks-kaset[data-sisi='B'] {
  transform: rotateY(180deg);
}

.ks-muka {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  container-type: inline-size;
}

.ks-muka--b {
  transform: rotateY(180deg);
}

.ks-muka__cangkang {
  display: block;
  width: 100%;
  height: 100%;
}

.ks-muka__label {
  fill: var(--kertas);
}

.ks-muka--b .ks-muka__label {
  fill: #f3e9d2;
}

.ks-garis--1 {
  fill: var(--merah);
}
.ks-garis--2 {
  fill: var(--jingga);
}
.ks-garis--3 {
  fill: var(--kuning);
}
.ks-garis--4 {
  fill: var(--hijau);
}

.ks-muka--b .ks-garis--1 {
  fill: var(--hijau);
}
.ks-muka--b .ks-garis--4 {
  fill: var(--merah);
}

.ks-gulung__pita {
  fill: #3b2a1f;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.4s ease-out;
}

/* Isi pita: kiri berkurang, kanan bertambah mengikuti guliran (`--ks-maju` 0..1 dari klien.ts). */
.ks-gulung--kiri .ks-gulung__pita {
  transform: scale(calc(1 - var(--ks-maju, 0) * 0.52));
}

.ks-gulung--kanan .ks-gulung__pita {
  transform: scale(calc(0.48 + var(--ks-maju, 0) * 0.52));
}

.ks-gulung__roda {
  animation: ks-putar 1.6s linear infinite;
  animation-play-state: paused;
}

.ks-gulung--kanan .ks-gulung__roda {
  animation-duration: 1.25s;
}

.ks-main .ks-gulung__roda,
.ks-memutar .ks-gulung__roda {
  animation-play-state: running;
}

@keyframes ks-putar {
  to {
    transform: rotate(-360deg);
  }
}

/* Tulisan di label (HTML di atas SVG, satuan cqw = lebar kaset). */
.ks-muka__tulisan {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ks-muka__sisi {
  position: absolute;
  left: 8.4%;
  top: 8%;
  display: grid;
  place-items: center;
  width: 8.5cqw;
  height: 8.5cqw;
  border-radius: 2px;
  background: var(--tinta);
  color: var(--kertas);
  font: 400 6.2cqw/1 var(--display);
}

.ks-muka__judul {
  position: absolute;
  left: 20%;
  right: 6%;
  top: 6.4%;
  height: 15%;
  display: flex;
  align-items: center;
  overflow: hidden;
  font: 400 calc(9.2cqw * var(--ks-skala, 1)) / 1 var(--tangan);
  color: #1d2a6b;
  white-space: nowrap;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.ks-muka__tulisan--tumpuk .ks-muka__judul {
  top: 6.4%;
  height: 16%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  line-height: 0.98;
}

.ks-muka__judul .ks-dan {
  font-family: var(--sans);
  font-weight: 700;
  margin: 0 0.12em;
  color: var(--merah);
}

.ks-muka__catatan {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 48.6%;
  font: 400 3.9cqw/1 var(--tangan);
  color: #1d2a6b;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ks-muka__merk {
  position: absolute;
  right: 8%;
  top: 67.4%;
  font: 600 1.9cqw/1 var(--sans);
  letter-spacing: 0.2em;
  color: #8b8170;
}

/* Panel bawah: LCD + tuts. */
.ks-alat__panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.ks-lcd {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 7px 12px;
  border-radius: 6px;
  background: #0f1a12;
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.7) inset;
  color: var(--lcd);
  font: 400 22px/1 var(--lcd-font);
  text-shadow: 0 0 6px rgb(185 243 166 / 0.55);
}

.ks-lcd__angka {
  flex: none;
  letter-spacing: 0.08em;
}

.ks-lcd__trek {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.85;
}

.ks-tuts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.no-js .ks-tuts {
  grid-template-columns: minmax(0, 140px);
  justify-content: center;
}

.ks-tut {
  text-decoration: none;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 6px 4px 8px;
  border: 0;
  border-radius: 6px 6px 9px 9px;
  background: linear-gradient(180deg, #d9d4ca, #b9b2a5);
  color: #2a2826;
  font: 400 15px/1 var(--sans);
  cursor: pointer;
  box-shadow:
    0 1px 0 #fff inset,
    0 5px 0 #6f6a61,
    0 7px 8px rgb(0 0 0 / 0.5);
  transition:
    transform 0.08s,
    box-shadow 0.08s;
  -webkit-tap-highlight-color: transparent;
}

.ks-tut small {
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #5d574e;
}

.ks-tut:active,
.ks-tut[aria-pressed='false'] {
  transform: translateY(4px);
  box-shadow:
    0 1px 0 #fff inset,
    0 1px 0 #6f6a61,
    0 2px 4px rgb(0 0 0 / 0.5);
}

/* PLAY = tombol musik engine; aria-pressed="false" berarti musik berbunyi (tuts tertekan). */
.ks-tut--play {
  background: linear-gradient(180deg, #f2775c, var(--merah));
  color: #fff;
}

.ks-tut--play small {
  color: #ffe4dc;
}

.ks-tut--play[aria-pressed='false'] .ks-tut__ikon {
  font-size: 0;
}

.ks-tut--play[aria-pressed='false'] .ks-tut__ikon::before {
  content: '❚❚';
  font-size: 13px;
  letter-spacing: -0.1em;
}

.ks-tut:focus-visible,
.ks-remote__tut:focus-visible {
  outline: 3px solid var(--kuning);
  outline-offset: 3px;
}

.ks-petunjuk {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--abu);
  text-align: center;
}

.ks-petunjuk__turun {
  font: 400 18px/1 var(--tangan);
  color: var(--tinta);
  text-decoration: none;
}

/* ---------- Sampul kertas kaset (J-card) ---------- */

.ks-jcard {
  position: relative;
  margin: 0 auto;
  width: min(100% - 2 * var(--tepi) + 24px, 640px);
  padding: 0 0 48px;
}

.ks-sampul,
.ks-sisi {
  position: relative;
  background: var(--kertas);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.6) inset,
    0 18px 30px -22px rgb(72 52 22 / 0.45);
}

.ks-sampul {
  display: grid;
  gap: 14px;
  padding: 30px 26px 26px 44px;
  border-radius: 4px 4px 0 0;
  overflow: hidden;
}

/* Strip pelangi di punggung J-card. */
.ks-sampul__garis,
.ks-sisi::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 22px;
  background: linear-gradient(
    90deg,
    var(--merah) 0 25%,
    var(--jingga) 25% 50%,
    var(--kuning) 50% 75%,
    var(--hijau) 75%
  );
}

.ks-sisi::before {
  content: '';
}

.ks-sampul__judul {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.18em;
  font: 400 clamp(52px, 15cqw, 96px) / 0.92 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
}

.ks-sampul__judul .ks-dan {
  font: 700 0.5em/1 var(--sans);
  color: var(--merah);
  text-transform: none;
}

.ks-sampul__foto {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 4px 6px 6px;
  padding: 10px 10px 34px;
  background: #fffdf6;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.8) inset,
    0 14px 22px -14px rgb(72 52 22 / 0.6);
  transform: rotate(-1.2deg);
}

/* Selotip kuning di tepi atas. */
.ks-sampul__foto::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 1;
  width: 96px;
  height: 24px;
  background: rgb(243 197 68 / 0.82);
  transform: translateX(-50%) rotate(2deg);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.15);
}

.ks-sampul__foto .ub-foto,
.ks-sampul__foto .ub-foto-perbesar {
  display: block;
  width: 100%;
  height: 100%;
}

/* Warna asli, hanya dihangatkan sedikit seperti cetakan lab foto. */
.ks-sampul__foto .ub-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.18) saturate(1.08) contrast(1.04);
}

/* Tanpa foto sampul: catatan di kertas kaset: angka hari besar, hari dan bulan di sebelahnya, jam dan tempat di bawah garis putus. */
.ks-sampul__catatan {
  position: relative;
  display: grid;
  gap: 10px;
  margin: 8px 4px 2px 0;
  padding: 28px 20px 18px;
  border: 1px solid var(--garis);
  background: #fffaf0;
  box-shadow: 0 10px 18px -14px rgb(72 52 22 / 0.6);
  transform: rotate(-1deg);
}

.ks-sampul__tape {
  position: absolute;
  top: -11px;
  left: 24px;
  width: 84px;
  height: 22px;
  background: rgb(243 197 68 / 0.8);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
  transform: rotate(-3deg);
}

.ks-sampul__hari {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.ks-sampul__angka {
  font: 400 clamp(64px, 20cqw, 88px) / 0.9 var(--display);
  color: var(--merah);
}

.ks-sampul__bulan {
  display: grid;
  gap: 2px;
  font: 600 clamp(13px, 3.8cqw, 16px) / 1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ks-sampul__nama-hari {
  font: 400 clamp(24px, 7cqw, 30px) / 1.1 var(--tangan);
  letter-spacing: 0;
  text-transform: none;
  color: #1d2a6b;
}

.ks-sampul__hari--segera {
  font: 400 clamp(22px, 6.5cqw, 28px) / 1.2 var(--tangan);
  color: #1d2a6b;
  white-space: normal;
}

.ks-sampul__rinci {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dashed var(--garis);
}

.ks-sampul__rinci > div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: baseline;
  gap: 10px;
}

.ks-sampul__rinci dt {
  font: 600 10px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abu);
}

.ks-sampul__rinci dd {
  font: 600 15px/1.35 var(--sans);
}

.ks-sampul__kutip {
  margin-top: 2px;
  padding-left: 12px;
  border-left: 3px solid var(--merah);
  font-size: 14px;
  font-style: italic;
  line-height: 1.6;
  color: var(--abu);
}

.ks-sampul__isi {
  font: 400 18px/1.2 var(--tangan);
  color: #1d2a6b;
}

.ks-sisi {
  padding: 30px 22px 24px 44px;
  border-top: 1px dashed var(--garis);
}

.ks-sisi--b {
  border-radius: 0 0 4px 4px;
}

.ks-sisi__judul {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--tinta);
  font: 400 clamp(26px, 6cqw, 34px) / 1 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.ks-sisi__huruf {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--tinta);
  color: var(--kertas);
  font-size: 0.8em;
}

.ks-sisi--b .ks-sisi__huruf {
  background: var(--merah);
}

.ks-daftar {
  padding: 0;
  list-style: none;
}

.ks-lagu {
  padding: 18px 0 22px;
  border-bottom: 1px solid var(--garis);
  scroll-margin-top: 24px;
}

.ks-lagu:last-child {
  border-bottom: 0;
}

.ks-lagu__baris {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font: 400 19px/1.15 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ks-lagu__kode {
  flex: none;
  min-width: 2.1em;
  font: 400 20px/1 var(--lcd-font);
  color: var(--merah);
}

.ks-lagu__judul {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ks-lagu__titik {
  flex: 1 1 20px;
  min-width: 16px;
  border-bottom: 2px dotted #b8ab92;
  transform: translateY(-4px);
}

.ks-lagu__durasi {
  flex: none;
  font: 400 18px/1 var(--lcd-font);
  color: var(--abu);
}

.ks-lagu__isi {
  padding: 12px 0 0 calc(2.1em + 10px);
}

.ks-lagu__isi {
  padding-left: 0;
}

/* Trek yang sedang "diputar" (posisi gulir). */
.ks-lagu.is-diputar .ks-lagu__kode::before {
  content: '▶';
  display: inline-block;
  margin-right: 3px;
  font-size: 12px;
  vertical-align: 2px;
}

/* Mempelai */
.ks-orang {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.ks-orang__teks {
  min-width: 0;
}

.ks-orang__lain {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  padding: 6px 0 4px 6px;
}

/* Foto kecil ditebar bertumpuk seperti cetakan yang dijatuhkan ke meja. */
.ks-orang__lain .ks-polaroid {
  width: min(104px, 30%);
  margin-left: -14px;
  transform: rotate(-5deg) translateY(2px);
}

.ks-orang__lain .ks-polaroid:first-child {
  margin-left: 0;
}

.ks-orang__lain .ks-polaroid:nth-child(2) {
  transform: rotate(3deg) translateY(-4px);
  z-index: 1;
}

.ks-orang__lain .ks-polaroid:nth-child(3) {
  transform: rotate(-2deg) translateY(3px);
}

/*
 * Tanpa foto: gulungan pita kaset (pita cokelat bergaris, hub putih bergigi), huruf depan nama panggilan ditulis
 * di selotip kuning yang menempel di bawah hub, jadi tidak ada lingkaran bertanda segitiga seperti tombol play.
 */
.ks-orang__reel {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, transparent 0 44%, rgb(255 255 255 / 0.07) 45% 46%, transparent 47% 62%, rgb(255 255 255 / 0.06) 63% 64%, transparent 65% 80%, rgb(255 255 255 / 0.05) 81% 82%, transparent 83%),
    #4a3426;
  box-shadow:
    0 6px 14px -8px rgb(0 0 0 / 0.55),
    inset 0 0 0 3px #2d211b;
  transform: rotate(-6deg);
}

.ks-orang__reel::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  aspect-ratio: 1;
  margin: -20% 0 0 -20%;
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #1d1c1b 0 30%, transparent 31% 80%, var(--kertas) 81%),
    repeating-conic-gradient(from 30deg, var(--kertas) 0 38deg, #1d1c1b 38deg 60deg);
}

.ks-orang__reel span {
  position: absolute;
  bottom: 7%;
  left: 50%;
  padding: 0.04em 0.42em 0;
  background: var(--kuning);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  color: var(--tinta);
  font: 400 21cqw/1.15 var(--tangan);
  transform: translateX(-50%) rotate(4deg);
}

.ks-lagu:nth-child(3) .ks-orang__reel {
  transform: rotate(5deg);
}

.ks-orang__foto {
  aspect-ratio: 4 / 5;
  padding: 5px 5px 18px;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.5);
  transform: rotate(-2.5deg);
}

.ks-lagu:nth-child(3) .ks-orang__foto {
  transform: rotate(2deg);
}

.ks-orang__foto .ub-foto-perbesar,
.ks-orang__foto .ub-foto {
  display: block;
  width: 100%;
  height: 100%;
}

.ks-orang__nama {
  overflow-wrap: anywhere;
  margin: 4px 0 6px;
  font: 400 26px/1.15 var(--tangan);
  color: #1d2a6b;
}

.ks-orang__asal {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--abu);
}

/* Kutipan, kisah, galeri */
.ks-kutipan p {
  max-width: 48ch;
  padding-left: 14px;
  border-left: 3px solid var(--kuning);
  font-size: 15px;
  font-style: italic;
  line-height: 1.7;
}

.ks-kisah {
  display: grid;
  gap: 8px;
}

.ks-kisah {
  padding-left: 16px;
  border-left: 3px solid var(--hijau);
}

.ks-kisah--teks {
  border-left-color: var(--merah);
}

/* Tanggal babak: cap tiket hijau yang menempel di rel. */
.ks-kisah__tgl {
  justify-self: start;
  margin-left: -26px;
  padding: 3px 10px 3px 12px;
  border-radius: 3px;
  background: var(--hijau);
  color: #fff;
  transform: rotate(-1.5deg);
}

/* Babak tanpa foto: tahunnya ditulis spidol besar. */
.ks-kisah--teks .ks-kisah__tgl {
  font: 400 28px/1 var(--tangan);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 0;
  padding: 0;
  background: none;
  color: var(--merah);
  transform: rotate(-2deg);
  transform-origin: left;
}

.ks-polaroid {
  aspect-ratio: 1;
  padding: 4px;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.5);
  transform: rotate(-1.8deg);
}

.ks-polaroid:nth-child(even) {
  transform: rotate(1.6deg);
}

.ks-polaroid .ub-foto-perbesar,
.ks-polaroid .ub-foto {
  display: block;
  width: 100%;
  height: 100%;
}

.ks-kisah__foto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.ks-kisah__foto--1 {
  grid-template-columns: minmax(0, min(200px, 60%));
}

.ks-kisah__foto--2 {
  grid-template-columns: repeat(2, minmax(0, 150px));
}

.ks-denah {
  width: min(100%, 360px);
  margin: 14px 0 0;
}

.ks-denah .ub-foto-perbesar {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--garis);
  background: #fff;
}

.ks-denah .ub-foto {
  display: block;
  width: 100%;
  height: 100%;
}

.ks-denah img {
  object-fit: contain;
}

.ks-denah figcaption {
  margin-top: 6px;
}

/* Galeri: foto cetak. 1-2 foto = cetakan besar; 3+ = kolase (tanpa skrip) atau tumpukan (klien.ts). */
.ks-galeri {
  container-type: inline-size;
}

.ks-cetak {
  position: relative;
  margin: 0 0 12px;
  padding: 6px 6px 0;
  background: #fff;
  box-shadow:
    0 8px 16px -10px rgb(0 0 0 / 0.55),
    0 0 0 1px rgb(0 0 0 / 0.05);
  rotate: var(--r, 0deg);
  break-inside: avoid;
}

.ks-cetak__foto {
  aspect-ratio: var(--ar, 1);
  overflow: hidden;
  background: var(--meja-gelap);
}

.ks-cetak__foto .ub-foto-perbesar,
.ks-cetak__foto .ub-foto {
  display: block;
  width: 100%;
  height: 100%;
}

.ks-cetak__no .ks-dan {
  font: 700 0.9em var(--sans);
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak:not([data-pos='0']) .ks-cetak__no {
  visibility: hidden;
}

.ks-cetak__no {
  padding: 6px 2px 7px;
  overflow: hidden;
  font: 400 15px/1.1 var(--tangan);
  color: #1d2a6b;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* selotip di cetakan yang berdiri sendiri atau yang sedang di atas tumpukan */
.ks-galeri--satu .ks-cetak::before,
.ks-galeri--dua .ks-cetak::before,
.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak[data-pos='0']::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -9px;
  left: 50%;
  width: 54px;
  height: 17px;
  margin-left: -27px;
  background: rgb(243 197 68 / 0.8);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
  rotate: -3deg;
}

.ks-galeri--satu .ks-galeri__area,
.ks-galeri--dua .ks-galeri__area {
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
}

.ks-galeri--satu .ks-cetak {
  width: min(88%, 300px);
  margin: 0;
}

.ks-galeri--dua .ks-galeri__area {
  align-items: flex-start;
  gap: 5%;
}

.ks-galeri--dua .ks-cetak {
  width: 46%;
  margin: 0;
}

.ks-galeri--dua .ks-cetak:nth-child(2) {
  margin-top: 30px;
}

/* tanpa skrip (dan "lembar kontak"): foto berjajar dalam kolom, semua selembar cetakan seragam supaya barisnya rapat */
.ks-galeri--tumpuk:not(.ks-galeri--aktif) .ks-cetak__foto,
.ks-galeri--lembar .ks-cetak__foto {
  aspect-ratio: 4 / 5;
}

.ks-galeri--tumpuk .ks-galeri__area {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 14px 12px;
  padding: 6px 4px 0;
}

.ks-galeri--banyak .ks-galeri__area {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 8px;
}

.ks-galeri--tumpuk .ks-cetak {
  margin: 0;
}

.ks-galeri--banyak:not(.ks-galeri--aktif) .ks-galeri__area {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
}

.ks-galeri--banyak .ks-cetak {
  padding: 4px 4px 0;
}

.ks-galeri--banyak .ks-cetak__no {
  padding: 4px 0 5px;
  font-size: 12px;
}

/* kendali: hanya ada bila klien.ts jalan (kelas ks-galeri--aktif) */
.ks-galeri__atas,
.ks-galeri__kendali {
  display: none;
}

.ks-galeri--aktif .ks-galeri__atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 14px;
}

.ks-galeri__atas .ks-kecil {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ks-galeri--aktif .ks-galeri__kendali {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.ks-galeri--lembar .ks-galeri__kendali {
  display: none;
}

.ks-mini {
  flex: none;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.ks-mini[aria-pressed='true'] {
  background: var(--tinta);
  color: var(--kertas);
}

.ks-bulat {
  width: 52px;
  height: 46px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #d9d4ca, #b9b2a5);
  box-shadow: 0 3px 0 #8d867a;
  color: var(--arang);
  font: 400 14px/1 var(--sans);
  cursor: pointer;
}

.ks-bulat:active {
  transform: translateY(3px);
  box-shadow: none;
}

.ks-galeri__hitung {
  justify-self: center;
  min-width: 112px;
  padding: 6px 10px 4px;
  border-radius: 6px;
  background: #0f1a12;
  color: var(--lcd);
  font: 400 26px/1 var(--lcd-font);
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 0 6px rgb(185 243 166 / 0.5);
}

.ks-galeri__geser {
  grid-column: 1 / -1;
  width: 100%;
  height: 34px;
  margin: 4px 0 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.ks-galeri__geser::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: var(--arang);
}

.ks-galeri__geser::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--arang);
}

.ks-galeri__geser::-webkit-slider-thumb {
  width: 28px;
  height: 28px;
  margin-top: -11px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--kuning);
  appearance: none;
  -webkit-appearance: none;
}

.ks-galeri__geser::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--kuning);
}

/*
 * Tumpukan: kartu teratas di tengah; tiga kartu di bawahnya makin turun, makin miring, dan makin gelap, jadi
 * tepinya terlihat seperti setumpuk cetakan sungguhan. Kartu yang dilempar terbang sementara yang di bawahnya naik.
 */
.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-galeri__area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  place-items: center;
  height: calc(min(70cqw, 280px) / var(--ar-min, 1) + 110px);
  height: calc(min(78cqw, 280px) / var(--ar-min, 1) + 110px);
  padding: 0;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  align-content: start;
  outline-offset: 6px;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak {
  --k: 1;
  --dy: 14px;
  --gelap: 0.1;
  grid-area: 1 / 1;
  align-self: start;
  width: min(78cqw, 280px);
  width: min(78cqw, 280px);
  margin: 0;
  pointer-events: none;
  translate: calc(var(--ox) * var(--k) * 0.8) calc(var(--dy) + var(--oy) * var(--k) * 0.3);
  rotate: calc(var(--r) * var(--k));
  transition:
    translate 0.5s cubic-bezier(0.25, 0.9, 0.3, 1),
    rotate 0.5s cubic-bezier(0.25, 0.9, 0.3, 1),
    opacity 0.3s;
}

/* peredam cahaya: kartu yang lebih bawah lebih gelap */
.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgb(60 40 20 / var(--gelap));
  pointer-events: none;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak[data-pos='0'] {
  --k: 0;
  --dy: 0px;
  --gelap: 0;
  rotate: calc(var(--r) * 0.35);
  pointer-events: auto;
  cursor: grab;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak[data-pos='2'] {
  --k: 1.5;
  --dy: 28px;
  --gelap: 0.18;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak[data-pos='3'] {
  --k: 2;
  --dy: 42px;
  --gelap: 0.26;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak[data-pos='4'] {
  --k: 2.4;
  --dy: 50px;
  opacity: 0;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak[data-pos='jauh'] {
  display: none;
}

.ks-galeri--aktif .ks-cetak.is-tarik {
  cursor: grabbing;
  transition: none;
  will-change: translate, rotate;
}

.ks-galeri--aktif .ks-cetak.is-terbang {
  transition:
    translate 0.42s cubic-bezier(0.15, 0.7, 0.3, 1),
    rotate 0.42s cubic-bezier(0.15, 0.7, 0.3, 1),
    scale 0.2s ease-out,
    opacity 0.2s ease-in 0.2s;
}

.ks-galeri--aktif .ks-cetak.is-pindah {
  opacity: 0;
  transition: none;
}

.ks-galeri--aktif:not(.ks-galeri--lembar) .ks-cetak img {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ruang bawah supaya tautan video tidak tertutup remote (HP) */
.ks-lagu--galeri .ks-aksi {
  margin-top: 18px;
}

.ks-lagu--galeri {
  padding-bottom: 96px;
}

/* Tombol pil */
.ks-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.ks-pil,
.ub-tombol--utama {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--tinta);
  color: var(--kertas);
  font: 600 13px/1 var(--sans);
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}

.ks-pil:hover,
.ub-tombol--utama:hover {
  background: var(--merah);
  border-color: var(--merah);
}

.ks-pil--garis {
  background: transparent;
  color: var(--tinta);
}

.ks-pil--garis:hover {
  color: #fff;
}

/* Acara */
.ks-acara__data {
  display: grid;
  gap: 8px;
}

.ks-acara__data > div {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px;
}

.ks-acara__data dt {
  padding-top: 3px;
  font: 600 10px/1.4 var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--abu);
}

.ks-acara__data dd {
  display: grid;
  font-size: 15px;
  line-height: 1.5;
}

.ks-acara__data dd span {
  font-size: 14px;
  color: var(--abu);
}

.ks-hitung {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.ks-hitung__teks {
  font: 400 34px/1 var(--lcd-font);
  color: var(--tinta);
}

/* RSVP */
.ub-rsvp__batas,
.ub-rsvp__nojs {
  margin-bottom: 14px;
  font-size: 14px;
  color: var(--abu);
}

.ub-rsvp__form {
  display: grid;
  gap: 18px;
}

.ub-rsvp__hadir {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.ub-rsvp__hadir legend,
.ub-rsvp__jumlah > span,
.ub-rsvp__ucapan > span {
  display: block;
  margin-bottom: 8px;
  font: 400 20px/1.2 var(--tangan);
  color: #1d2a6b;
}

.ub-rsvp__pilihan {
  display: grid;
  gap: 6px;
}

.ub-pilihan {
  position: relative;
  display: block;
}

.ub-pilihan input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.ub-pilihan span {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
}

.ub-pilihan span::before {
  content: '';
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--tinta);
  border-radius: 3px;
}

.ub-pilihan input:checked + span {
  background: var(--kuning);
}

.ub-pilihan input:checked + span::before {
  background: var(--tinta);
  box-shadow: 0 0 0 2px var(--kuning) inset;
}

.ub-pilihan input:focus-visible + span {
  outline: 3px solid var(--hijau);
  outline-offset: 2px;
}

.ub-rsvp__jumlah,
.ub-rsvp__ucapan {
  display: block;
}

.ub-rsvp__form select,
.ub-rsvp__form textarea,
.ub-rsvp__form input[type='text'] {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--tinta);
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font: 400 16px/1.5 var(--sans);
}

.ub-rsvp__form select {
  max-width: 120px;
  appearance: none;
  padding-right: 34px;
  background:
    linear-gradient(45deg, transparent 50%, var(--tinta) 50%) calc(100% - 19px) 50% / 7px 7px no-repeat,
    linear-gradient(135deg, var(--tinta) 50%, transparent 50%) calc(100% - 13px) 50% / 7px 7px no-repeat,
    #fff;
  font-weight: 600;
}

/* Label panjang ditulis huruf biasa; spidol hanya untuk judul pendek. */
.ub-rsvp__ucapan > span {
  font: 600 13px/1.3 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--abu);
}

.ub-rsvp__form textarea {
  resize: vertical;
  min-height: 96px;
  /* Garis buku tulis. */
  background: repeating-linear-gradient(#fff 0 27px, #e8dfcc 27px 28px) 0 9px / 100% 28px local;
  line-height: 28px;
}

.ub-rsvp__form :focus-visible {
  outline: 3px solid var(--hijau);
  outline-offset: 1px;
}

.ub-rsvp__form .ub-tombol--utama {
  justify-self: start;
}

.ub-rsvp__catatan {
  padding: 8px 12px;
  border-radius: 6px;
  background: #fbe6c0;
  font-size: 14px;
}

.ub-rsvp__status:empty {
  display: none;
}

.ub-rsvp__status {
  font: 400 19px/1.3 var(--tangan);
  color: var(--merah);
}

.ub-tombol--tautan {
  justify-self: start;
  padding: 0;
  border: 0;
  background: none;
  color: var(--abu);
  font: 500 13px var(--sans);
  text-decoration: underline;
  cursor: pointer;
}

.ub-rsvp--tutup {
  font-size: 15px;
  color: var(--abu);
}

/* Ucapan: kartu request lagu. */
.ub-ucapan__daftar {
  display: grid;
  gap: 10px;
  max-height: 520px;
  margin: 0;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
}

.ub-ucapan__kepala {
  margin-bottom: 10px;
}

.ub-ucapan__jumlah {
  font-size: 13px;
  color: var(--abu);
}

.wish {
  padding: 12px 14px;
  border-left: 4px solid var(--hijau);
  border-radius: 4px;
  background: #fff;
}

.wish:nth-child(3n + 2) {
  border-left-color: var(--jingga);
}

.wish:nth-child(3n) {
  border-left-color: var(--merah);
}

.wish__avatar {
  display: none;
}

.wish__head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.wish__name {
  font: 400 17px/1.2 var(--tangan);
  color: #1d2a6b;
}

.wish__time {
  font-size: 12px;
  color: var(--abu);
  white-space: nowrap;
}

.wish__message {
  font-size: 15px;
  line-height: 1.55;
}

/* Amplop */
.ub-amplop {
  display: grid;
  gap: 10px;
}

.ub-amplop__pengantar {
  max-width: 48ch;
  margin-bottom: 4px;
  font-size: 15px;
}

.ub-amplop__rekening {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    'bank tombol'
    'nomor tombol'
    'nama tombol';
  align-items: center;
  column-gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--tinta);
  border-radius: 10px;
  background: #fff;
}

.ub-amplop__bank {
  grid-area: bank;
  font: 600 11px/1.4 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--abu);
}

.ub-amplop__nomor {
  grid-area: nomor;
  font: 400 28px/1.1 var(--lcd-font);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.ub-amplop__nama {
  grid-area: nama;
  font-size: 14px;
  color: var(--abu);
}

.ub-amplop__rekening .ub-tombol {
  grid-area: tombol;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--kuning);
  color: var(--tinta);
  font: 600 12px var(--sans);
  cursor: pointer;
}

/* Penutup */
.ks-penutup {
  display: grid;
  gap: 14px;
}

.ks-penutup__nama {
  font: 400 34px/1.1 var(--tangan);
  color: var(--merah);
  transform: rotate(-2deg);
  transform-origin: left;
}

.ks-kaki__logo {
  width: 56px;
  margin: 0 auto 6px;
}

.ks-kaki__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.ks-kaki {
  display: grid;
  gap: 4px;
  padding: 22px 6px 0;
  font-size: 12px;
  color: var(--abu);
  text-align: center;
}

/* ---------- Remote kecil (HP, dipasang klien.ts) ---------- */

.ks-remote {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(100% - 24px, 380px);
  padding: 6px;
  border-radius: 14px;
  background: linear-gradient(160deg, #34312e, #1f1d1b);
  box-shadow: 0 14px 28px -10px rgb(0 0 0 / 0.55);
  transform: translate(-50%, 140%);
  transition: transform 0.45s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ks-remote.is-tampak {
  transform: translate(-50%, 0);
}

.ks-remote__tut {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #d9d4ca, #b9b2a5);
  color: var(--arang);
  font: 400 12px/1 var(--sans);
  letter-spacing: -0.1em;
  cursor: pointer;
}

.ks-remote__play {
  background: linear-gradient(180deg, #f2775c, var(--merah));
}

.ks-remote__play[hidden] {
  display: none;
}

.ks-remote__ikon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent #fff;
}

.ks-main .ks-remote__ikon {
  width: 11px;
  height: 13px;
  border: 0;
  border-left: 4px solid #fff;
  border-right: 4px solid #fff;
}

.ks-remote__lcd {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 6px;
  background: #0f1a12;
  color: var(--lcd);
  font: 400 19px/40px var(--lcd-font);
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 0 6px rgb(185 243 166 / 0.5);
}

/* Ruang untuk remote di bawah daftar lagu (HP). */
.ks-jcard {
  padding-bottom: 96px;
}

/* ---------- Gerak analog ----------
   Semua CSS saja (tanpa JS) dan hanya memakai `translate`, `opacity`, `filter`, `background-position` atau pseudo
   tambahan, supaya tidak bentrok dengan transform yang sudah dipakai (putar kaset, miring polaroid, tuts). */

/* Lampu daya berkedip pelan saat memutar, seperti motor yang sedang menarik pita. */
@keyframes ks-led-kedip {
  0%,
  100% {
    box-shadow:
      0 0 0 2px #1a1817,
      0 0 10px #ff5a3c;
  }
  50% {
    box-shadow:
      0 0 0 2px #1a1817,
      0 0 4px #ff5a3c;
  }
}

.ks-main .ks-led {
  animation: ks-led-kedip 2.4s ease-in-out infinite;
}

/* Kaset didorong masuk ke slot deck sekali saat halaman dibuka. */
@keyframes ks-masuk {
  from {
    translate: 0 -26px;
    opacity: 0;
  }
  to {
    translate: 0 0;
    opacity: 1;
  }
}

.ks-kaset {
  animation: ks-masuk 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Foto sampul kena bocor cahaya film: kilau hangat yang pelan lewat lalu hilang. */
.ks-sampul__foto::after {
  content: '';
  position: absolute;
  inset: 10px 10px 34px;
  background: radial-gradient(ellipse at 85% 20%, rgb(255 150 60 / 0.55), transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  animation: ks-bocor 9s ease-in-out infinite;
}

@keyframes ks-bocor {
  0%,
  100% {
    opacity: 0;
    translate: -6% 0;
  }
  50% {
    opacity: 0.35;
    translate: 6% 0;
  }
}

/* Kilau lampu di kaca muka kaset: sapuan tipis yang lewat sesekali, lalu diam. */
.ks-muka::after {
  content: '';
  position: absolute;
  top: 6%;
  bottom: 34%;
  left: 6%;
  right: 6%;
  border-radius: 6px;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.16) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position: 120% 0;
  pointer-events: none;
  animation: ks-kilap 8s ease-in-out infinite;
}

@keyframes ks-kilap {
  0%,
  35% {
    background-position: 120% 0;
  }
  60%,
  100% {
    background-position: -40% 0;
  }
}

/* Polaroid "berkembang" saat digulir: dari kabur kecokelatan ke foto jernih (hanya browser dengan scroll-timeline). */
@supports (animation-timeline: view()) {
  .ks-kisah__foto .ks-polaroid,
  .ks-orang__lain .ks-polaroid {
    animation: ks-berkembang linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 38%;
  }
}

@keyframes ks-berkembang {
  from {
    opacity: 0;
    translate: 0 14px;
    filter: sepia(1) blur(3px) brightness(1.15);
  }
  to {
    opacity: 1;
    translate: 0 0;
    filter: none;
  }
}

/* Lagu yang sedang diputar: segitiga ▶ berdenyut pelan seperti motor kaset. */
@keyframes ks-motor {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.ks-lagu.is-diputar .ks-lagu__kode::before {
  animation: ks-motor 1.2s ease-in-out infinite;
}

/* ---------- Pita contoh ---------- */

.ub-banner {
  background: var(--tinta);
  color: var(--kuning);
  font: 400 15px/1.2 var(--lcd-font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}