/* ============================================================
   Marginalia — sistem tampilan
   Nuansa kertas: latar krem, garis tipis hitam, aksen pastel.
   Sengaja hanya mode terang; seluruh estetikanya meniru kertas.
   ============================================================ */

/* ---------------------------------------------------- font */

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/playfair-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/dmsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/dmsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/spacemono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/spacemono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/spacemono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/spacemono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/caveat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/caveat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------------------------- token */

:root {
  --paper: #fffdf6;
  --white: #ffffff;
  --cream: #faf6ea;
  --ink: #191817;
  --ink-soft: #413d38;
  --muted: #6f6960;
  --faint: #9c948a;
  --line: #e6e0d1;
  --rule: #f2ecdb;

  --pink: #ef8fb0;
  --pink-soft: #f7c3d2;
  --pink-pale: #fdeaf0;
  --rose: #c2447a;
  --sky: #c2e2e9;
  --olive: #c7d68f;
  --sand: #f6e7a8;

  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;
  --hand: 'Caveat', cursive;

  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --sidebar-w: 248px;
}

/* --------------------------------------------------- dasar */

* { box-sizing: border-box; }

/*
 * Banyak komponen di bawah menetapkan display sendiri (flex/grid), yang
 * mengalahkan aturan [hidden] bawaan browser. Tanpa baris ini, elemen
 * ber-atribut hidden tetap terlihat.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rose); text-decoration: none; }
a:hover { color: var(--ink); }

img { max-width: 100%; }

button { font-family: inherit; }

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------- tipografi */

.eyebrow {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--ink { color: var(--ink); }

.display {
  margin: 0;
  font: 900 clamp(38px, 5vw, 60px)/0.94 var(--serif);
  letter-spacing: -0.03em;
  text-wrap: pretty;
}
.display--lg { font-size: clamp(40px, 5.5vw, 68px); }
.display--sm { font-size: clamp(36px, 4.5vw, 54px); }

.display em,
.accent {
  font-style: italic;
  font-weight: 400;
}
.accent--mark {
  display: inline-block;
  margin-top: 14px;
  line-height: 1.05;
  background: var(--pink-soft);
  padding: 0 8px 4px;
  border-radius: var(--r-sm);
}

.h2 {
  margin: 0;
  font: 900 clamp(26px, 3vw, 32px)/1 var(--serif);
  letter-spacing: -0.02em;
}
.h3 {
  margin: 0;
  font: 700 19px/1.25 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.lead { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.small { font-size: 13px; color: var(--muted); }
.mono { font: 700 13px var(--mono); }

.quote {
  font: italic 400 13px/1.55 var(--serif);
  color: var(--ink-soft);
}
.quote mark {
  background: var(--sand);
  padding: 1px 3px;
  border-radius: 2px;
  color: inherit;
}

/* ---------------------------------------------------- tata letak */

.shell {
  display: flex;
  min-height: 100vh;
  background: var(--paper);
}

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  border-right: 1px solid var(--ink);
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--paper);
}

.main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page {
  padding: 36px clamp(16px, 4vw, 48px) 64px;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.page--narrow { max-width: 900px; gap: 26px; }
.page--capture { padding-bottom: 120px; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}
.row--baseline { align-items: baseline; gap: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--sm { gap: 8px; }
.stack--lg { gap: 16px; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.grid--shelf { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
.grid--split { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 24px; align-items: start; }

/* ---------------------------------------------------- merek */

.brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}
.brand span { color: var(--pink); }
.brand--sm { font-size: 22px; }

.brand-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--white);
}

/* --------------------------------------------------- navigasi */

.nav { display: flex; flex-direction: column; gap: 6px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  font: 500 14px/1.2 var(--sans);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 140ms;
}
.nav__item:hover { background: var(--cream); }
.nav__item[aria-current='page'] {
  background: var(--white);
  border-color: var(--ink);
}
.nav__item img { width: 17px; height: 17px; opacity: .9; }
.nav__item span:first-of-type { flex: 1; }

.nav__badge {
  font: 700 10px/1 var(--mono);
  background: var(--pink-soft);
  border-radius: 999px;
  padding: 4px 7px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  padding: 12px 16px;
  display: none;
  align-items: center;
  gap: 8px;
}
.topbar .brand { flex: 1; }

.topbar__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
.topbar__btn[aria-current='page'] {
  background: var(--white);
  border-color: var(--ink);
}
.topbar__btn img { width: 18px; height: 18px; }
.topbar__btn .nav__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  border: 1px solid var(--ink);
}

.goal {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px dashed var(--ink);
  border-radius: var(--r-md);
  padding: 14px;
}
.goal__num {
  font: 900 30px/1 var(--serif);
  letter-spacing: -0.03em;
}

/* ------------------------------------------------------ kartu */

.card {
  border: 1px solid var(--ink);
  border-radius: var(--r-lg);
  background: var(--white);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card--round { border-radius: var(--r-xl); padding: 28px; }
.card--dashed { border-style: dashed; }
.card--pad-lg { padding: clamp(24px, 4vw, 44px); }

/* Latar kertas bergaris kotak. */
.grid-paper {
  background-color: var(--paper);
  background-image:
    linear-gradient(#e9e4d6 1px, transparent 1px),
    linear-gradient(90deg, #e9e4d6 1px, transparent 1px);
  background-size: 24px 24px;
}
.grid-paper--pink {
  background-color: var(--pink-soft);
  background-image:
    linear-gradient(rgba(25, 24, 23, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25, 24, 23, .07) 1px, transparent 1px);
}

.tint-pink { background: var(--pink-soft); }
.tint-olive { background: var(--olive); }
.tint-sky { background: var(--sky); }

/* ------------------------------------------------------ tombol */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font: 500 14px/1 var(--sans);
  color: var(--ink);
  cursor: pointer;
  transition: background 140ms, transform 140ms, color 140ms;
}
.btn:hover { background: var(--cream); color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn img { width: 16px; height: 16px; }

.btn--outline { border-color: var(--ink); }

.btn--primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  font-size: 15px;
}
.btn--primary:hover { background: var(--ink-soft); color: var(--paper); transform: translateY(-1px); }

.btn--pink {
  border-color: var(--ink);
  background: var(--pink-soft);
  font-weight: 600;
  font-size: 15px;
}
.btn--pink:hover { background: var(--pink); transform: translateY(-1px); }

.btn--lg { padding: 15px 30px; font-size: 16px; font-weight: 600; }
.btn--block { width: 100%; }
.btn--grow { flex: 1; min-width: 150px; }

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pink);
  flex: 0 0 8px;
}

/* ------------------------------------------------- label kecil */

.chip {
  display: inline-block;
  font: 400 10px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: var(--olive);
}
.chip--stamp {
  background: var(--white);
  border: 1px solid var(--ink);
  padding: 6px 10px;
  transform: rotate(-2deg);
}
.chip--tilt { transform: rotate(2deg); }

.pill {
  font: 400 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  white-space: nowrap;
}
.pill--model {
  border-color: var(--ink);
  background: var(--pink-pale);
  padding: 6px 10px;
}

/* ------------------------------------------------------ isian */

.field { display: flex; flex-direction: column; gap: 8px; }

.label {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}
.label span { color: var(--faint); }

.input,
.textarea,
.select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  font: 400 14px/1.6 var(--sans);
  color: var(--ink-soft);
  background: var(--white);
}
.textarea { resize: vertical; background: var(--cream); }
.textarea--plain { background: var(--white); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(239, 143, 176, .45);
}

.hint { font-size: 12px; color: var(--muted); }

.choices { display: flex; gap: 6px; flex-wrap: wrap; }

.choice {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--ink);
  font: 500 13px var(--sans);
  cursor: pointer;
  transition: all 140ms;
}
.choice:hover { background: var(--cream); }
.choice[aria-pressed='true'] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.ok-dot {
  font-size: 12px;
  color: #5f7033;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ok-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a8bc66;
}

/* ------------------------------------------------------- bar */

.progress {
  height: 6px;
  border-radius: 999px;
  background: var(--rule);
  overflow: hidden;
}
.progress--thick { height: 8px; border: 1px solid var(--ink); }
.progress--thin { height: 4px; }
.progress--book { height: 5px; }

.progress__bar {
  height: 100%;
  background: var(--ink);
  transition: width 320ms cubic-bezier(.2, .9, .2, 1);
}
.progress__bar--pink { background: var(--pink); transition: width 80ms linear; }

/* ------------------------------------------ baki foto halaman */

.tray {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  padding: 10px 0 6px;
}

.sheet {
  position: relative;
  width: 228px;
  height: 318px;
  background: #fbf8ef;
  border: 1px solid #d8d0bd;
  border-radius: 3px;
  padding: 22px 20px 18px;
  box-shadow: 0 10px 30px rgba(25, 24, 23, .12);
  overflow: hidden;
}
.sheet:nth-child(odd) { transform: rotate(-1.6deg); }
.sheet:nth-child(even) { transform: rotate(1.2deg); }

.sheet img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sheet__no {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font: 400 8px var(--mono);
  color: var(--faint);
}

.sheet__scan {
  position: absolute;
  left: -4px;
  right: -4px;
  height: 2px;
  background: var(--rose);
  box-shadow: 0 0 14px 4px rgba(239, 143, 176, .55);
  animation: scan 2.2s linear infinite;
}
.sheet:nth-child(even) .sheet__scan { animation-delay: -1s; }

.sheet__wash {
  position: absolute;
  inset: 0;
  background: rgba(247, 195, 210, .10);
}

@keyframes scan {
  from { top: 0%; }
  to { top: 100%; }
}

.dropzone {
  border: 1px dashed var(--ink);
  border-radius: var(--r-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dropzone.is-over {
  background-color: var(--pink-pale);
  border-color: var(--rose);
}

/* --------------------------------------------- langkah proses */

.steps { display: flex; flex-direction: column; gap: 4px; }

.step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  opacity: .4;
  transition: opacity 220ms;
}
.step.is-active,
.step.is-done { opacity: 1; }

.step__mark {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--mono);
}
.step.is-active .step__mark { background: var(--pink-soft); }
.step.is-done .step__mark { background: var(--olive); }

.step__label { font: 500 15px/1.3 var(--sans); }

.draft {
  border-radius: var(--r-md);
  background: var(--cream);
  padding: 16px 18px;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.draft__text {
  font: 700 19px/1.3 var(--serif);
  letter-spacing: -0.01em;
}
.caret {
  display: inline-block;
  width: 2px;
  height: 18px;
  background: var(--rose);
  margin-left: 2px;
  vertical-align: -2px;
  animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { to { opacity: 0; } }

/* -------------------------------------------------- hasil AI */

.reveal {
  display: flex;
  flex-direction: column;
  gap: 36px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms cubic-bezier(.2, .9, .2, 1), transform 480ms cubic-bezier(.2, .9, .2, 1);
}
.reveal.is-in { opacity: 1; transform: translateY(0); }

.takeaway {
  margin: 0;
  font: 900 clamp(28px, 3.6vw, 46px)/1.02 var(--serif);
  letter-spacing: -0.03em;
  max-width: 880px;
  text-wrap: pretty;
}

.point {
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--white);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 220ms, box-shadow 220ms;
}
.point:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(25, 24, 23, .06);
}
.point__n {
  font: 900 34px/1 var(--serif);
  letter-spacing: -0.03em;
}
.point__quote {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

/* ------------------------------------------------- postcard */

.flip {
  perspective: 1400px;
  cursor: pointer;
  height: 250px;
  border: 0;
  padding: 0;
  background: none;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}
.flip--lg { perspective: 1600px; height: 360px; }

.flip__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 560ms cubic-bezier(.2, .9, .2, 1);
}
.flip--lg .flip__inner { transition-duration: 600ms; }
.flip.is-flipped .flip__inner { transform: rotateY(180deg); }

.flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.flip--lg .flip__face { border-radius: var(--r-lg); padding: 28px; gap: 18px; }

.flip__face--back {
  transform: rotateY(180deg);
  background: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
}
.flip--lg .flip__face--back { gap: 22px; }

.postcard__q {
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  font: 700 21px/1.25 var(--serif);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.flip--lg .postcard__q { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }

.postcard__foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 400 9px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.flip--lg .postcard__foot { font-size: 10px; }

.stamp {
  width: 46px;
  height: 54px;
  flex: 0 0 46px;
  border: 1px dashed var(--ink);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font: 400 9px/1.3 var(--mono);
  letter-spacing: .1em;
  background: rgba(255, 255, 255, .5);
}
.stamp b { font-size: 13px; }
.flip--lg .stamp { width: 58px; height: 68px; flex-basis: 58px; font-size: 10px; }
.flip--lg .stamp b { font-size: 16px; }

.postcard__answer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.postcard__answer p {
  margin: 0;
  font: 500 15px/1.5 var(--sans);
  color: var(--ink);
  text-wrap: pretty;
}
.flip--lg .postcard__answer p { font-size: clamp(16px, 2vw, 20px); }

.postcard__source {
  border-left: 1px solid var(--ink);
  padding-left: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.flip--lg .postcard__source { padding-left: 18px; gap: 10px; }
.postcard__source p { margin: 0; font: italic 400 12.5px/1.5 var(--serif); color: var(--ink-soft); }
.flip--lg .postcard__source p { font-size: 14px; line-height: 1.55; }

.postcard__rules {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.postcard__rules span { height: 1px; background: var(--line); }

/* --------------------------------------------- penilaian review */

.ratings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 14px;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: transform 140ms;
}
.rating:hover { transform: translateY(-1px); }
.rating:active { transform: scale(.97); }
.rating__label { font: 600 15px/1 var(--sans); }
.rating__next {
  font: 400 10px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.rating--1 { background: #fbe9e5; }
.rating--2 { background: #fdf6dc; }
.rating--3 { background: #eef2dc; }
.rating--4 { background: #e6f3f6; }

/* ------------------------------------------------------- buku */

.book-row {
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  background: var(--white);
  padding: 18px;
  display: flex;
  gap: 16px;
  align-items: center;
  /* Kartunya sendiri berupa tautan; teks di dalamnya tetap warna tinta. */
  color: inherit;
  transition: background 140ms;
}
.book-row:hover { background: var(--cream); color: inherit; }
.book-row__spine {
  width: 54px;
  height: 76px;
  flex: 0 0 54px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  display: flex;
  align-items: flex-end;
  padding: 6px;
  font: italic 900 11px/1 var(--serif);
}
.book-row__title { font: 700 17px/1.2 var(--serif); }

.book {
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 220ms;
  color: inherit;
}
.book:hover { transform: translateY(-2px); color: inherit; }

.book__cover {
  aspect-ratio: 2/3;
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}
.book__kind {
  font: 400 9px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.book__title {
  font: 900 22px/1.02 var(--serif);
  letter-spacing: -0.02em;
}
.book__author { font: italic 400 12px/1.2 var(--serif); }
.book__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}

.book-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 16px 6px 6px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.book-pick:hover { background: var(--cream); }
.book-pick__spine {
  width: 30px;
  height: 40px;
  flex: 0 0 30px;
  border-radius: 3px;
  border: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font: italic 900 13px/1 var(--serif);
}
.book-pick__name { font: 600 14px/1.2 var(--sans); }

/* -------------------------------------------------- bilah bawah */

.actionbar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  border-top: 1px solid var(--ink);
  background: var(--paper);
  padding: 14px clamp(16px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------ toast */

.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%) translateY(8px);
  z-index: 20;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  padding: 13px 22px;
  font: 500 14px/1.3 var(--sans);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 30px rgba(25, 24, 23, .18);
  max-width: calc(100vw - 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms, transform 220ms;
}
.toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast--bad { background: #8d2f43; }

/* ------------------------------------------------------ pesan */

.notice {
  border: 1px solid var(--ink);
  border-left-width: 5px;
  border-radius: var(--r-md);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
  background: var(--white);
}
.notice--bad { border-left-color: #8d2f43; background: #fbe9e5; }
.notice--good { border-left-color: #5f7033; background: #eef2dc; }
.notice--info { border-left-color: var(--rose); background: var(--pink-pale); }

.empty {
  border: 1px dashed var(--ink);
  border-radius: var(--r-lg);
  padding: 40px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  background: var(--white);
}

/* ------------------------------------------- halaman masuk */

.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background: var(--paper);
}
.auth__box {
  width: 100%;
  max-width: 430px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.auth__card {
  border: 1px solid var(--ink);
  border-radius: var(--r-xl);
  background: var(--white);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* -------------------------------------------------- responsif */

@media (max-width: 899px) {
  .sidebar { display: none; }
  .topbar { display: flex; }
  .page { padding-top: 24px; }
  .ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flip__face--back { grid-template-columns: minmax(0, 1fr); }
  .postcard__source {
    border-left: 0;
    border-top: 1px solid var(--ink);
    padding-left: 0;
    padding-top: 12px;
  }
  .postcard__rules { display: none; }
  .flip { height: 280px; }
  .flip--lg { height: 420px; }
}

@media (max-width: 520px) {
  .sheet { width: 100%; max-width: 280px; height: 300px; }
  .actionbar { justify-content: stretch; }
  .actionbar .btn { flex: 1; }
}

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

@media print {
  .sidebar, .topbar, .actionbar, .toast { display: none !important; }
  .flip__inner { transform: none !important; }
  .flip__face--back { display: none; }
}