/* =====================================================================
   Coality Program Signing Ceremony — Undangan Digital (Master)
   Identitas visual: NASKAH · PITA · CAP

   NASKAH  Halaman rata kiri seperti lembar perjanjian: kertas gading,
           tinta arang, garis tanda tangan.
   PITA    Pita lurik (garis tenun Jawa) di tepi kiri yang "menjilid"
           seluruh naskah. Hijau dan biru diambil dari logo EBI.
   CAP     Cap merah persegi: cap basah di Indonesia, dojang di Korea.
           Dipakai untuk tanggal, pepatah, dan jawaban RSVP.

   Huruf   Hahmlet (perancang Korea) untuk judul + hangul,
           Plus Jakarta Sans (perancang Indonesia) untuk teks.
   ===================================================================== */

:root {
  color-scheme: light only; /* cegah mode gelap otomatis membalik warna kertas */
  --kertas: #F4EFE4;
  --kertas-2: #EBE4D4;
  --kertas-3: #FBF8F1;
  --garis: #D6CDB9;
  --arang: #16171A;
  --teks: #1A1B1E;
  --teks-2: #47463F;
  --teks-3: #69665D;
  --cap: #C5361D;
  --cap-tua: #A32A14;
  --cap-terang: #EC6B50;
  --lumut: #4B7A22;
  --laut: #1D5E8A;

  --f-judul: "Hahmlet", Georgia, "Times New Roman", "Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;
  --f-teks: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --pita-l: 14px;
  --tepi: 20px;
  --kiri: calc(var(--pita-l) + var(--tepi));
  --strip-t: 28px;
  --pita: linear-gradient(90deg,
    var(--arang) 0 4px,
    var(--kertas) 4px 5px,
    var(--cap) 5px 8px,
    var(--kertas) 8px 9px,
    var(--lumut) 9px 11px,
    var(--kertas) 11px 12px,
    var(--laut) 12px 13px,
    var(--arang) 13px 14px);
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--strip-t) + 10px);
}

body {
  margin: 0;
  background: #0D0E10;
  color: var(--teks);
  font: 400 16px/1.6 var(--f-teks);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, dl, dd, ol, ul, figure, blockquote, fieldset, legend { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
b { font-weight: 700; }
:focus-visible { outline: 2.5px solid var(--laut); outline-offset: 3px; }

.def { position: absolute; }
.siaran { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Label Pratinjau Master ---------- */
.strip {
  position: sticky; top: 0; z-index: 40;
  height: var(--strip-t);
  display: flex; align-items: center; justify-content: center; gap: .7em;
  background: var(--arang); color: var(--kertas);
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  white-space: nowrap;
}
.strip::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--cap); }
.strip small { font-size: inherit; font-weight: 500; letter-spacing: .05em; text-transform: none; opacity: .62; }

/* ---------- Naskah (lembar) ---------- */
.naskah {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background-color: var(--kertas);
  /* serat kertas */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .22  0 0 0 0 .18  0 0 0 0 .1  0 0 0 .4 -.15'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

/* Pita lurik yang menjilid naskah */
.naskah::before {
  content: "";
  position: absolute; z-index: 6;
  top: 0; bottom: 20px; left: 0;
  width: var(--pita-l);
  background: var(--pita);
  box-shadow: 1px 0 0 rgba(0, 0, 0, .1), 5px 0 10px -7px rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, 140% 0, 140% 100%, 100% 100%, 50% calc(100% - 7px), 0 100%);
  transform-origin: top;
  animation: pita 1s cubic-bezier(.2, .7, .2, 1) both;
}

/* ---------- Tombol ---------- */
.tombol {
  display: flex; align-items: center; justify-content: center; gap: .65em;
  width: 100%; min-height: 54px; padding: 0 18px;
  border: 0; border-radius: 5px;
  background: var(--cap); color: #FFF8EE;
  font: 700 1.02rem/1 var(--f-teks); letter-spacing: .01em; text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--cap-tua), 0 12px 22px -14px rgba(163, 42, 20, .8);
  transition: transform .15s, background-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.tombol:hover { background: #B83119; }
.tombol:active { transform: translateY(1px); background: var(--cap-tua); }
.tombol--turun::after {
  content: ""; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid; border-bottom: 2px solid;
  transform: rotate(45deg);
}
.tombol--garis {
  background: transparent; color: var(--arang);
  box-shadow: inset 0 0 0 1.5px var(--arang);
}
.tombol--garis:hover, .tombol--garis:active { background: var(--kertas-2); }

.tautan {
  padding: 6px 0; border: 0; background: none; cursor: pointer;
  font-size: .82rem; font-weight: 700; color: var(--cap-tua);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Cap ---------- */
.cap { color: var(--cap); overflow: visible; }
.cap__angka { font: 700 46px var(--f-judul); fill: var(--kertas); letter-spacing: -1px; }
.cap__kecil { font: 700 12.5px var(--f-teks); fill: var(--kertas); letter-spacing: 1.2px; }
.cap__hangul text { font: 800 35px var(--f-judul); fill: var(--arang); }

/* =====================================================================
   LAYAR PERTAMA
   ===================================================================== */
.hero {
  display: flex; flex-direction: column;
  min-height: min(calc(100vh - var(--strip-t)), 860px);
  min-height: min(calc(100svh - var(--strip-t)), 860px);
  padding: 16px var(--tepi) calc(16px + env(safe-area-inset-bottom, 0px)) var(--kiri);
}

.hero__atas { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo { width: auto; height: clamp(50px, 15.5vw, 68px); margin-left: -5px; }
.cap--tanggal {
  flex: none;
  width: clamp(52px, 15.5vw, 66px); height: auto;
  --putar: 4deg; transform: rotate(var(--putar));
  animation: cap-tekan .5s .55s cubic-bezier(.2, .9, .3, 1) both;
}

.yth {
  margin-top: 14px; padding-top: 11px;
  border-top: 1px solid var(--garis);
  font-size: .8rem; line-height: 1.45; color: var(--teks-2);
  animation: naik .55s .04s both;
}
.yth b { font-size: .95rem; color: var(--teks); }
.yth span { display: block; }

.hero__judul { margin-block: auto; padding-block: 18px; }
.overline {
  display: flex; align-items: center; gap: .9em;
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cap-tua);
  animation: naik .55s .1s both;
}
.overline [lang="ko"] {
  font: 600 .78rem var(--f-judul); letter-spacing: .32em; color: var(--teks-3);
  padding-left: .9em; border-left: 1px solid var(--garis);
}
h1 {
  margin-top: 8px;
  font: 700 clamp(1.8rem, 9.2vw, 2.7rem)/1.06 var(--f-judul);
  letter-spacing: -.028em;
  color: var(--arang);
  animation: naik .6s .15s both;
}
h1 span { display: block; }
h1 .tipis { font-weight: 300; }
.pihak {
  margin-top: 11px; max-width: 31ch;
  font-size: .86rem; line-height: 1.45; color: var(--teks-2);
  animation: naik .6s .2s both;
}
.pihak b { color: var(--teks); }

.info {
  display: grid; grid-template-columns: max-content 1fr;
  border-top: 2px solid var(--arang);
  animation: naik .6s .25s both;
}
.info > div { min-width: 0; padding: 9px 0 10px; border-bottom: 1px solid var(--garis); }
.info > .lebar { grid-column: 1 / -1; }
.info > div:nth-child(2) { padding-right: 16px; }
.info > div:nth-child(3) { padding-left: 16px; border-left: 1px solid var(--garis); }
.info dt { font-size: .7rem; font-weight: 600; letter-spacing: .02em; color: var(--teks-3); }
.info dd { font-size: 1.06rem; font-weight: 700; line-height: 1.25; color: var(--arang); }
.info .lebar dd { font: 600 1.36rem/1.2 var(--f-judul); letter-spacing: -.012em; }

.hero__aksi { margin-top: 14px; animation: naik .6s .3s both; }
.tenggat {
  margin-top: 9px;
  font-size: .76rem; line-height: 1.4; text-align: center; text-wrap: balance;
  color: var(--teks-2);
}
.tenggat b { color: var(--teks); }

@media (max-height: 620px) {
  .hero { padding-top: 12px; padding-bottom: 12px; }
  .logo { height: 46px; }
  .cap--tanggal { width: 48px; }
  .yth { margin-top: 10px; padding-top: 8px; }
  .hero__judul { padding-block: 12px; }
  .pihak { margin-top: 8px; }
  .info > div { padding: 7px 0 8px; }
  .hero__aksi { margin-top: 12px; }
  .tombol { min-height: 50px; }
}

/* =====================================================================
   BAB
   ===================================================================== */
.bab {
  position: relative;
  padding: 54px var(--tepi) 54px var(--kiri);
  border-top: 1px solid var(--garis);
}
.bab__kepala { margin-bottom: 22px; }
.bab__no {
  display: flex; align-items: center; gap: 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--teks-3);
}
.bab__no::before {
  content: ""; width: 22px; height: 10px;
  background: linear-gradient(180deg,
    var(--arang) 0 3px, transparent 3px 4px,
    var(--cap) 4px 7px, transparent 7px 8px,
    var(--lumut) 8px 10px);
}
h2 {
  margin-top: 9px;
  font: 600 1.72rem/1.15 var(--f-judul);
  letter-spacing: -.022em;
  color: var(--arang);
}

/* ---------- 01 Undangan ---------- */
.surat p + p { margin-top: .9em; }
.surat { color: var(--teks-2); }
.surat b { color: var(--teks); }

.para-pihak { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.ttd { position: relative; padding-top: 44px; }
.ttd::before {
  content: ""; position: absolute; left: 0; right: 0; top: 33px; height: 1.5px;
  background: var(--arang);
  transform-origin: left; transition: transform .9s .25s cubic-bezier(.2, .7, .2, 1);
}
.ttd:nth-child(2)::before { transform-origin: right; }
.ttd::after {
  content: "×"; position: absolute; left: 1px; top: 4px;
  font: 300 1.25rem/1 var(--f-judul); color: var(--cap);
}
.ttd small, .dukung small, .sambutan small {
  display: block;
  font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--teks-3);
}
.ttd b { display: block; margin-top: 4px; font: 600 1rem/1.3 var(--f-judul); color: var(--arang); }

.dukung {
  margin-top: 28px; padding: 14px 16px 15px;
  background: var(--kertas-2);
  border-left: 3px solid var(--lumut);
}
.dukung p { font-weight: 700; line-height: 1.4; }
.dukung small + p { margin-top: 5px; }

/* ---------- Pepatah ---------- */
.pepatah {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 62px var(--tepi) 66px var(--kiri);
  background: var(--arang); color: var(--kertas);
}
.faset { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; max-width: none; }
.faset polygon { stroke: rgba(255, 255, 255, .035); stroke-width: 1; }
.f-a { fill: #111214; } .f-b { fill: #17181B; } .f-c { fill: #1D1F22; } .f-d { fill: #24262A; }

.cap--pepatah { width: 168px; height: auto; margin-left: -2px; --putar: -4deg; transform: rotate(var(--putar)); }
.pepatah__ko { margin-top: 30px; font: 600 1.02rem/1.3 var(--f-judul); letter-spacing: .14em; color: #D5CDBC; }
.pepatah blockquote {
  margin-top: 10px;
  font: 300 1.7rem/1.26 var(--f-judul); letter-spacing: -.018em;
  text-wrap: balance;
}
.pepatah figcaption {
  margin-top: 18px;
  font-size: .66rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: #A8A193;
}

/* ---------- 02 Susunan Acara ---------- */
.acara__buka {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 16px;
  background: var(--arang); color: var(--kertas);
  border-radius: 5px 5px 0 0;
}
.acara__buka b { font: 600 1.22rem/1.2 var(--f-judul); white-space: nowrap; }
.acara__buka span { font-weight: 600; font-size: .95rem; }

.acara ol { border-bottom: 2px solid var(--arang); }
.acara li {
  display: grid; grid-template-columns: 46px 1fr; align-items: baseline;
  padding: 13px 0;
}
.acara li + li { border-top: 1px solid var(--garis); }
.acara .no { padding-left: 16px; font: 300 1.05rem/1.2 var(--f-judul); color: var(--teks-3); font-variant-numeric: tabular-nums; }
.acara .nama { font-weight: 600; line-height: 1.35; }
.acara .ket { grid-column: 2; margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--teks-2); }
.acara .utama { padding: 16px 0 17px; background: linear-gradient(90deg, rgba(197, 54, 29, .09), rgba(197, 54, 29, 0) 85%); box-shadow: inset 3px 0 0 var(--cap); }
.acara .utama .no { color: var(--cap-tua); font-weight: 700; }
.acara .utama .nama { font: 700 1.32rem/1.2 var(--f-judul); letter-spacing: -.015em; color: var(--arang); }

/* ---------- 03 Untuk Para Tamu ---------- */
.sambutan {
  padding: 16px 18px 17px;
  border: 1.5px solid var(--arang); border-left-width: 6px; border-left-color: var(--lumut);
  border-radius: 5px;
  background: var(--kertas-3);
}
.sambutan p { margin-top: 5px; font: 600 1.42rem/1.2 var(--f-judul); letter-spacing: -.015em; color: var(--arang); }

.undian { margin-top: 26px; }
.undian h3 { font: 600 1.1rem/1.2 var(--f-judul); color: var(--arang); }
.kupon { margin-top: 12px; }
.kupon li {
  position: relative;
  display: grid; grid-template-columns: 56px 1fr;
  min-height: 86px;
  background: var(--arang); color: var(--kertas);
  border-radius: 6px;
}
.kupon li + li { margin-top: 18px; }
.kupon li::before, .kupon li::after {
  content: ""; position: absolute; left: 56px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--kertas); transform: translateX(-50%);
}
.kupon li::before { top: -7px; }
.kupon li::after { bottom: -7px; }
.kupon__no {
  display: flex; align-items: center; justify-content: center;
  border-right: 1.5px dashed rgba(244, 239, 228, .32);
  font: 300 1.3rem var(--f-judul); color: #CFC8B8;
}
.kupon__isi { display: flex; flex-direction: column; justify-content: center; padding: 14px 16px 15px 20px; }
.kupon__isi small { font-size: .62rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--cap-terang); }
.kupon__isi b { margin-top: 3px; font: 600 1.34rem/1.2 var(--f-judul); letter-spacing: -.012em; }

/* ---------- 04 RSVP ---------- */
.rsvp { padding-bottom: 60px; }
.rsvp__batas { color: var(--teks-2); }
.rsvp__batas b { color: var(--teks); }

.kontrol {
  margin-top: 20px; padding: 12px 14px 10px;
  border: 1.5px dashed var(--cap); border-radius: 6px;
  background: rgba(197, 54, 29, .05);
  font-size: .84rem;
}
.kontrol__kepala { font-size: .74rem; line-height: 1.5; color: var(--teks-2); }
.kontrol__label {
  display: inline-block; margin-right: .5em; padding: 2px 7px;
  background: var(--arang); color: var(--kertas); border-radius: 2px;
  font-size: .6rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  vertical-align: 1px;
}
.kontrol__baris { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-weight: 700; }
.kontrol__baris > span:first-child { margin-right: auto; }
.kontrol__petunjuk { margin-top: 8px; font-size: .78rem; line-height: 1.45; color: var(--teks-2); }

.hitung {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--arang); border-radius: 5px;
  background: #fff; overflow: hidden;
}
.hitung button {
  width: 44px; height: 42px; border: 0; background: transparent; cursor: pointer;
  font-size: 1.3rem; font-weight: 600; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.hitung button:active:not(:disabled) { background: var(--kertas-2); }
.hitung button:disabled { opacity: .28; cursor: default; }
.hitung output { min-width: 34px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

.kartu {
  margin-top: 16px; padding: 18px 16px 18px;
  background: var(--kertas-3);
  border: 1.5px solid var(--arang); border-top-width: 5px; border-radius: 6px;
}
.kartu__tamu { font-size: .88rem; line-height: 1.5; color: var(--teks-2); padding-bottom: 14px; border-bottom: 1px solid var(--garis); }
.kartu__tamu b { color: var(--teks); }

#form-rsvp { margin-top: 16px; }
legend { font: 600 1.12rem/1.3 var(--f-judul); color: var(--arang); }
.pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.opsi { position: relative; display: block; }
.opsi input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.opsi span {
  display: flex; align-items: center; justify-content: center;
  min-height: 60px; padding: 0 8px;
  border: 1.5px solid var(--arang); border-radius: 5px;
  background: #fff;
  font-weight: 700; font-size: 1rem;
  transition: background-color .15s, color .15s, border-color .15s;
}
.opsi--ya input:checked + span { background: var(--cap); border-color: var(--cap); color: #FFF8EE; }
.opsi--tidak input:checked + span { background: var(--arang); border-color: var(--arang); color: var(--kertas); }
.opsi input:focus-visible + span { outline: 2.5px solid var(--laut); outline-offset: 3px; }

.jumlah {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px;
  font-size: .88rem; font-weight: 700; line-height: 1.3;
}
.bidang { display: block; margin-top: 14px; }
.bidang > span { display: block; margin-bottom: 5px; font-size: .78rem; font-weight: 600; color: var(--teks-2); }
.bidang input, .bidang textarea {
  display: block; width: 100%; min-height: 48px; padding: 11px 12px;
  border: 1.5px solid #B7AE9A; border-radius: 5px;
  background: #fff;
  font-size: 1rem; line-height: 1.4;
}
.bidang textarea { resize: vertical; }
.bidang input:focus, .bidang textarea:focus { outline: none; border-color: var(--arang); box-shadow: 0 0 0 3px rgba(29, 94, 138, .28); }
.bidang.salah input { border-color: var(--cap); background: #FFF6F3; }

.galat { margin-top: 12px; font-size: .84rem; font-weight: 700; color: var(--cap-tua); }
#kirim { margin-top: 18px; }
.sim { margin-top: 10px; font-size: .74rem; line-height: 1.45; color: var(--teks-3); text-align: center; text-wrap: balance; }

.hasil { margin-top: 18px; }
.hasil:focus { outline: none; }
.cap--jawab { width: 196px; height: auto; margin: 4px 0 18px -2px; --putar: -5deg; transform: rotate(var(--putar)); }
.cap--jawab text { font: 800 36px var(--f-teks); letter-spacing: 9px; }
.hasil.berhalangan .cap--jawab { color: var(--teks-2); }
.hasil.berhalangan .cap--jawab text { font-size: 20px; letter-spacing: 3.5px; }
.hasil.baru .cap--jawab { animation: cap-tekan .5s cubic-bezier(.2, .9, .3, 1) both; }
.hasil__judul { font: 600 1.14rem/1.35 var(--f-judul); color: var(--arang); }
.hasil__nama { margin-top: 10px; counter-reset: n; }
.hasil__nama li { counter-increment: n; display: grid; grid-template-columns: 26px 1fr; padding: 8px 0; border-top: 1px solid var(--garis); font-weight: 600; overflow-wrap: anywhere; }
.hasil__nama li::before { content: counter(n); font: 300 1rem var(--f-judul); color: var(--teks-3); }
.hasil__nama li:last-child { border-bottom: 1px solid var(--garis); }
.hasil__pesan { margin-top: 10px; padding: 10px 12px; background: var(--kertas-2); border-left: 3px solid var(--teks-3); font-size: .9rem; overflow-wrap: anywhere; }
.hasil__waktu { margin-top: 12px; font-size: .78rem; color: var(--teks-3); }
#ubah { margin-top: 16px; }

/* ---------- Kaki ---------- */
.kaki {
  padding: 34px var(--tepi) calc(44px + env(safe-area-inset-bottom, 0px)) var(--kiri);
  background: var(--kertas-2);
  border-top: 2px solid var(--arang);
}
.kaki__salam { font-size: .86rem; color: var(--teks-2); }
.logo--kaki { height: 58px; margin-top: 10px; }
.kaki__nama { margin-top: 8px; font: 600 1.1rem/1.3 var(--f-judul); color: var(--arang); }
.kaki__master { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--garis); font-size: .72rem; line-height: 1.5; color: var(--teks-3); }

/* ---------- Tombol lekat ---------- */
.lekat {
  position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center;
  pointer-events: none;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.lekat.tampil { transform: none; }
.lekat__isi {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 480px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) calc(var(--pita-l) + 14px);
  background: rgba(244, 239, 228, .96);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1.5px solid var(--arang);
}
.lekat__isi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--pita-l); background: var(--pita); }
.lekat__teks { flex: 1; min-width: 0; font-size: .76rem; line-height: 1.3; color: var(--teks-2); white-space: nowrap; }
.lekat__teks b { display: block; font-size: .86rem; color: var(--arang); }
.lekat .tombol { width: auto; min-height: 46px; padding: 0 16px; font-size: .92rem; white-space: nowrap; box-shadow: 0 1px 0 var(--cap-tua); }

/* ---------- Gerak ---------- */
@keyframes naik { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pita { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cap-tekan {
  0% { opacity: 0; transform: rotate(var(--putar, 0deg)) scale(1.9); }
  55% { opacity: 1; transform: rotate(var(--putar, 0deg)) scale(.93); }
  100% { opacity: 1; transform: rotate(var(--putar, 0deg)) scale(1); }
}

[data-muncul] { transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
[data-muncul].tunggu { opacity: 0; transform: translateY(16px); }
.tunggu .ttd::before { transform: scaleX(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-muncul].tunggu { opacity: 1; transform: none; }
  .tunggu .ttd::before { transform: none; }
}

/* ---------- Layar lebar: naskah di atas meja ---------- */
@media (min-width: 520px) {
  body { padding-bottom: 48px; }
  .naskah { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
}