/* Warna utama website ada di sini supaya mudah diganti. */
:root {
  --paper: #fff8f2;
  --ink: #25201e;
  --muted: #82736d;
  --coral: #ed6a5a;
  --peach: #ffd9c8;
  --yellow: #f6c453;
  --line: #eadbd1;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", "Trebuchet MS", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
}
.start-screen { display: grid; min-height: 100vh; place-items: center; background: var(--paper); }
.start-button { padding: 12px 22px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); background: transparent; font: 600 13px var(--sans); cursor: pointer; }
.start-button:hover { color: white; background: var(--ink); }
.is-locked > .page-noise, .is-locked > .hearts, .is-locked > .topbar, .is-locked > main, .is-locked > footer { display: none; }
.start-screen.is-open { animation: start-away .45s ease forwards; }
.page-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background-image: radial-gradient(#e5cfc2 0.7px, transparent 0.7px);
  background-size: 14px 14px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
.topbar {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px clamp(24px, 7vw, 104px);
}
.signature { color: var(--ink); font: 700 18px var(--serif); text-decoration: none; }
.signature span, footer span { color: var(--coral); }
.music-button, .surprise-button {
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font: 600 12px var(--sans);
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .25s, background .25s, transform .25s;
}
.music-button { display: flex; align-items: center; gap: 9px; padding: 10px 16px; }
.music-button:hover, .music-button.is-playing { color: white; background: var(--ink); transform: translateY(-2px); }
.music-icon { font-size: 16px; line-height: 0; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
  align-items: center;
  gap: clamp(45px, 10vw, 145px);
  max-width: 1280px;
  min-height: 100vh;
  margin: auto;
  padding: 130px clamp(24px, 9vw, 140px) 90px;
}
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 27px; height: 1px; background: var(--coral); }
h1 { margin: 22px 0 25px; font: 700 clamp(70px, 10vw, 150px)/.82 var(--serif); letter-spacing: -.055em; }
h1 em { color: var(--coral); font-style: italic; }
.heart-mark { display: inline-block; margin-left: 12px; color: var(--coral); font: 400 .5em var(--sans); transform: translateY(-.5em) rotate(10deg); animation: heartbeat 2s infinite; }
.intro { max-width: 330px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.scroll-cue { display: inline-flex; align-items: center; gap: 12px; margin-top: 54px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.scroll-arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-size: 16px; transition: background .25s, color .25s; }
.scroll-cue:hover .scroll-arrow { color: white; background: var(--ink); }
.photo-wrap { position: relative; width: min(100%, 400px); transform: rotate(3deg); }
.photo-wrap::before { position: absolute; inset: -12px 13px 14px -13px; border: 1px solid var(--coral); content: ""; transform: rotate(-6deg); }
.photo { display: block; position: relative; width: 100%; aspect-ratio: 1; object-fit: cover; border: 13px solid white; box-shadow: 12px 14px 0 var(--peach); background: #f4c9b6; transition: transform .4s ease; }
.photo-wrap:hover .photo { transform: rotate(-3deg) scale(1.025); }
.photo-sticker { position: absolute; z-index: 1; top: -25px; right: -33px; padding: 14px 13px; color: var(--ink); background: var(--yellow); font: 700 12px/1.05 var(--serif); text-align: center; transform: rotate(9deg); }
.photo-caption { position: absolute; z-index: 2; right: 15px; bottom: -23px; padding: 9px 15px; color: white; background: var(--coral); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.photo-caption span { margin: 0 5px; color: var(--yellow); }
.hearts { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hearts span { position: absolute; color: var(--coral); opacity: .2; font-size: 20px; animation: float 8s linear infinite; }
.hearts span:nth-child(1) { left: 8%; top: 78%; animation-delay: -2s; }
.hearts span:nth-child(2) { left: 45%; top: 15%; animation-delay: -5s; font-size: 15px; }
.hearts span:nth-child(3) { left: 87%; top: 65%; animation-delay: -6s; font-size: 29px; }
.hearts span:nth-child(4) { left: 72%; top: 30%; animation-delay: -1s; }
.hearts span:nth-child(5) { left: 20%; top: 28%; animation-delay: -4s; font-size: 13px; }
.letter { display: grid; grid-template-columns: .8fr 1.2fr; gap: 9vw; max-width: 960px; min-height: 80vh; margin: auto; padding: 120px 24px 100px; }
h2 { margin: 22px 0; font: 700 clamp(40px, 5vw, 68px)/.98 var(--serif); letter-spacing: -.04em; }
h2 i { color: var(--coral); font-weight: 700; }
.letter-content { max-width: 490px; padding-top: 26px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.letter-content p { margin: 0 0 20px; }
.sign-off { margin-top: 38px !important; color: var(--ink); font: 15px/1.5 var(--serif); }
.sign-off span { color: var(--coral); }
.surprise-button { padding: 13px 18px; border-color: var(--coral); color: var(--coral); }
.surprise-button:hover { color: white; background: var(--coral); transform: translateY(-2px); }
.surprise-button span { margin-left: 8px; }
.bonus-message { display: none; margin-top: 17px !important; color: var(--coral); font-weight: 700; }
.bonus-message.show { display: block; animation: reveal .5s ease both; }
.bonus-image { display: none; width: min(100%, 260px); aspect-ratio: 1; margin-top: 18px; object-fit: cover; border: 8px solid white; box-shadow: 7px 8px 0 var(--peach); transform: rotate(-2deg); }
.bonus-image.show { display: block; animation: reveal .5s ease both; }
footer { padding: 25px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; text-align: center; }
.reveal { animation: reveal .9s cubic-bezier(.2,.7,.2,1) both; }
.reveal-delay { animation-delay: .18s; }
@keyframes reveal { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes heartbeat { 0%, 40%, 100% { transform: translateY(-.5em) scale(1) rotate(10deg); } 20% { transform: translateY(-.5em) scale(1.22) rotate(10deg); } }
@keyframes float { 0% { transform: translateY(20vh) rotate(0deg); } 100% { transform: translateY(-110vh) rotate(180deg); } }
@keyframes start-away { to { opacity: 0; transform: scale(.98); } }
@media (max-width: 700px) {
  .topbar { padding: 22px 20px; }
  .music-button { padding: 9px 12px; }
  .hero { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 70px; min-height: auto; padding: 130px 24px 110px; }
  h1 { font-size: clamp(72px, 21vw, 120px); }
  .photo-wrap { align-self: center; width: min(82vw, 350px); }
  .letter { display: block; min-height: auto; padding: 80px 24px 90px; }
  .letter-content { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}