:root {
  --bg: #f4efe6;
  --surface: #fbf8f2;
  --ink: #2b2a26;
  --muted: #6d6a60;
  --accent: #6f7d5f;
  --gold-1: #b8955a;
  --gold-2: #f3e1b0;
  --gold-3: #8c6a35;
  --env: #e8dfcf;
  --env-dark: #d6cab4;
  --wax: #7b2d2a;

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Montserrat", system-ui, sans-serif;
  --text-hero: clamp(3rem, 1.5rem + 7vw, 6.5rem);
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --foil-x: 50%;
}
[data-theme="terracotta"] {
  --bg: #f6ece4; --surface: #fcf5ef; --accent: #b4654a; --env: #efd9cc; --env-dark: #e0c3b2; --wax: #8e3b2c;
}
[data-theme="night"] {
  --bg: #12201b; --surface: #182a23; --ink: #efe6d2; --muted: #b5ab95; --accent: #c9a96a;
  --env: #1e3a30; --env-dark: #16302a; --wax: #5c1a22;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 0.95rem; line-height: 1.7; letter-spacing: 0.02em;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; }
h2 { font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.4rem); text-align: center; margin-bottom: 2.5rem; font-style: italic; }

#particles { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* Altın varak: hareketle kayan parlama */
.foil {
  background: linear-gradient(115deg, var(--gold-3) 0%, var(--gold-1) 30%, var(--gold-2) 45%, var(--gold-1) 60%, var(--gold-3) 100%);
  background-size: 250% 100%;
  background-position: var(--foil-x) 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Açılış ---------- */
.intro {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; align-content: center; gap: 2rem;
  background: radial-gradient(ellipse at 50% 40%, var(--surface), var(--bg) 70%);
  perspective: 1400px; transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.intro.done { opacity: 0; visibility: hidden; }
.intro-hint { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.35em; color: var(--muted); animation: pulse 2.4s ease-in-out infinite; }
.intro.open .intro-hint { opacity: 0; animation: none; }
@keyframes pulse { 50% { opacity: 0.35; } }

.envelope {
  position: relative; width: min(84vw, 420px); aspect-ratio: 1.45;
  transform-style: preserve-3d; transform: rotateX(8deg);
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.18));
  animation: float 5s ease-in-out infinite;
}
@keyframes float { 50% { transform: rotateX(8deg) translateY(-8px); } }
.env-back, .env-pocket, .env-flap { position: absolute; inset: 0; }
.env-back { background: var(--env-dark); border-radius: 4px; }
.env-pocket, .env-flap {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E"),
    var(--env);
}
.env-pocket { clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); z-index: 3; }
.env-flap {
  clip-path: polygon(0 0, 100% 0, 50% 58%); z-index: 4; transform-origin: top;
  transition: transform 0.9s var(--ease-out); backface-visibility: hidden;
  background-color: var(--env-dark);
}
.env-card {
  position: absolute; inset: 6% 6% 6% 6%; z-index: 2; background: var(--surface);
  border: 1px solid var(--gold-1); outline: 1px solid var(--gold-1); outline-offset: -8px;
  display: grid; place-items: center; font-family: var(--serif); font-size: clamp(1.4rem, 5vw, 2rem);
  transition: transform 1.1s var(--ease-out) 0.7s;
}
.intro.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.intro.open .env-card { transform: translateY(-62%) scale(1.04); }
.intro.open .envelope { animation: none; }

.seal {
  position: absolute; left: 50%; top: 58%; z-index: 6; width: 78px; height: 78px;
  translate: -50% -50%; border: 0; border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wax) 60%, #fff), var(--wax) 55%, color-mix(in srgb, var(--wax) 70%, #000));
  box-shadow: 0 4px 10px rgb(0 0 0 / 0.35), inset 0 -4px 8px rgb(0 0 0 / 0.3);
  transition: transform 0.25s var(--ease-out);
}
.seal:hover { transform: scale(1.06); }
.seal:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 6px; }
.seal-mono {
  display: grid; place-items: center; width: 56px; height: 56px; margin: auto; border-radius: 50%;
  border: 1.5px solid rgb(0 0 0 / 0.25); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.35);
  font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: rgb(255 255 255 / 0.55);
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.4);
}
.seal.broken { animation: crack 0.7s var(--ease-out) forwards; pointer-events: none; }
@keyframes crack {
  30% { transform: scale(1.12) rotate(-6deg); }
  100% { transform: scale(0.4) rotate(25deg) translateY(120px); opacity: 0; }
}
.shard {
  position: absolute; z-index: 7; width: 14px; height: 14px; background: var(--wax); border-radius: 30% 60% 40% 50%;
  animation: shard 0.9s var(--ease-out) forwards;
}
@keyframes shard { to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)); opacity: 0; } }

/* ---------- Müzik ---------- */
.music {
  width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--gold-1); background: var(--surface); cursor: pointer; padding: 6px;
}
.vinyl { display: block; width: 100%; height: 100%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #222 0 2px, #333 2px 3px); position: relative; }
.vinyl::after { content: ""; position: absolute; inset: 35%; border-radius: 50%; background: var(--gold-1); }
.music[aria-pressed="true"] .vinyl { animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Davetiye ---------- */
.invite { position: relative; }
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; text-align: center; padding: 6rem 16px 4rem; }
.layer { position: absolute; inset: -20% -10%; pointer-events: none; will-change: transform; }
.layer-back {
  background:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--accent) 35%, transparent) 0 14%, transparent 30%),
    radial-gradient(circle at 88% 78%, color-mix(in srgb, var(--accent) 28%, transparent) 0 12%, transparent 28%),
    radial-gradient(circle at 80% 12%, color-mix(in srgb, var(--gold-1) 25%, transparent) 0 8%, transparent 20%);
  filter: blur(18px);
}
.layer-mid { inset: 8% 8%; border: 1px solid color-mix(in srgb, var(--gold-1) 60%, transparent); outline: 1px solid color-mix(in srgb, var(--gold-1) 30%, transparent); outline-offset: 10px; }
.hero-content { position: relative; z-index: 1; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.5em; font-size: 0.7rem; color: var(--muted); margin: 0 0 2.2rem; }
.monogram { font-family: var(--serif); font-style: italic; font-size: 2.2rem; --gold-2: #e9cf94; filter: drop-shadow(0 1px 1px rgb(60 40 10 / 0.18)); }
.names { font-size: var(--text-hero); line-height: 0.95; margin: 1.8rem 0 1.4rem; }
.names em { font-size: 0.5em; display: block; color: var(--accent); margin: 0.2em 0; }
.date { text-transform: uppercase; letter-spacing: 0.35em; font-size: 0.78rem; }

.countdown { list-style: none; display: flex; justify-content: center; gap: clamp(0.6rem, 3vw, 1.6rem); padding: 0; margin: 3rem 0 0; }
.countdown li { min-width: 58px; padding: 0.2rem 0.4rem; position: relative; }
.countdown li + li::before { content: ""; position: absolute; left: calc(clamp(0.6rem, 3vw, 1.6rem) / -2); top: 18%; height: 46%; width: 1px; background: color-mix(in srgb, var(--gold-1) 60%, transparent); }
.countdown b { display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted); }

.block { padding: var(--space-section) 16px; max-width: 760px; margin: 0 auto; }
.block-alt { max-width: none; background: var(--surface); }
.block-alt > * { max-width: 728px; margin-left: auto; margin-right: auto; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* Zaman çizelgesi */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--gold-1); }
.timeline li { position: relative; width: 50%; padding: 0 2rem 3rem; }
.timeline li:nth-child(odd) { text-align: right; }
.timeline li:nth-child(even) { margin-left: 50%; }
.timeline li::after { content: ""; position: absolute; top: 0.6rem; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1px solid var(--gold-1); }
.timeline li:nth-child(odd)::after { right: -6px; }
.timeline li:nth-child(even)::after { left: -6px; }
.tl-date { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.3em; color: var(--accent); }
.tl-title { font-family: var(--serif); font-size: 1.7rem; line-height: 1.2; margin: 0.2rem 0 0.4rem; }
.tl-text { color: var(--muted); margin: 0; }
@media (max-width: 560px) {
  .timeline::before { left: 6px; }
  .timeline li, .timeline li:nth-child(even) { width: 100%; margin-left: 0; text-align: left; padding: 0 0 2.5rem 2rem; }
  .timeline li::after, .timeline li:nth-child(odd)::after { left: 1px; right: auto; }
}

/* Program */
.schedule { list-style: none; padding: 0; margin: 0 auto 3rem; }
.schedule li { display: grid; grid-template-columns: 4.5rem 44px 1fr; align-items: center; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid color-mix(in srgb, var(--gold-1) 35%, transparent); }
.sch-time { font-family: var(--serif); font-size: 1.6rem; }
.sch-icon { width: 40px; height: 40px; color: var(--accent); }
.sch-title { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; }

.venue { text-align: center; }
.venue-name { font-family: var(--serif); font-size: 2rem; margin: 0; }
.venue-addr { color: var(--muted); margin: 0.2rem 0 1.5rem; }
.btn-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.btn {
  font: inherit; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; text-decoration: none;
  color: var(--ink); background: transparent; border: 1px solid var(--gold-1); padding: 0.85rem 1.3rem; cursor: pointer;
  position: relative; overflow: hidden; transition: color 0.3s, transform 0.15s;
}
.btn::before { content: ""; position: absolute; inset: 0; background: var(--gold-1); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); z-index: -1; }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); }
.btn:hover, .btn:focus-visible { color: #fff; outline: none; }
.btn:active { transform: scale(0.97); }
.btn-solid { --btn-bg: color-mix(in srgb, var(--accent) 55%, #12140f); background: var(--btn-bg); color: #fbf8f2; border-color: var(--btn-bg); }
[data-theme="night"] .btn-solid { --btn-bg: var(--gold-1); color: #13201b; }

/* Kıyafet */
.dress-title { text-align: center; font-family: var(--serif); font-size: 1.8rem; font-style: italic; margin: 0 0 1.5rem; }
.swatches { list-style: none; display: flex; justify-content: center; gap: 0.8rem; padding: 0; margin: 0 0 1.5rem; }
.swatches li { width: 46px; height: 46px; border-radius: 50%; box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--gold-1); transition: transform 0.3s var(--ease-out); }
.swatches li:hover { transform: translateY(-4px); }
.dress-note { text-align: center; color: var(--muted); max-width: 46ch; margin: 0 auto; }

/* LCV */
.rsvp { display: grid; gap: 1.1rem; }
.rsvp label { display: grid; gap: 0.3rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.rsvp input:not([type="radio"], [type="checkbox"]), .rsvp select {
  font: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--gold-1); padding: 0.5rem 0; border-radius: 0;
}
.rsvp input:focus, .rsvp select:focus { outline: none; border-bottom-color: var(--accent); box-shadow: 0 1px 0 var(--accent); }
.chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips legend { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 0.5rem; }
.chips label { display: block; position: relative; }
.chips input { position: absolute; opacity: 0; }
.chips label:has(input) { border: 1px solid var(--gold-1); padding: 0.6rem 1rem; cursor: pointer; color: var(--ink); transition: background 0.3s; }
.chips label:has(input:checked) { background: var(--accent); color: #fff; border-color: var(--accent); }
.chips label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { grid-template-columns: auto 1fr; align-items: center; text-transform: none !important; letter-spacing: 0 !important; font-size: 0.9rem !important; }
.hp { position: absolute; left: -9999px; }
.if-attending { display: grid; gap: 1.1rem; }
.rsvp.declined .if-attending { display: none; }
.form-msg { min-height: 1.5em; margin: 0; font-family: var(--serif); font-size: 1.3rem; text-align: center; }

.foot { text-align: center; padding: 4rem 16px 6rem; font-family: var(--serif); font-style: italic; font-size: 2.4rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}