:root{
  --bg:#f3ece0;
  --paper:#fffcf6;
  --field:#fbf7ef;
  --ink:#1f2a26;
  --muted:#6b675d;
  --line:#e8dfcf;
  --line-strong:#d6c8ae;
  --forest:#234339;
  --forest-deep:#182e27;
  --sage:#e6ede7;
  --gold:#b48c4e;
  --gold-ink:#8a6630;
  --gold-light:#e5cf9f;
  --cream:#f6efe2;
  --rose:#a4534a;
  --rose-soft:#f8ebe6;
  --edge-cream:#d6c6a6;
  --edge-forest:#0d1b16;
  --edge-rose:#7a3a33;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --serif:"Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  position:relative;
  margin:0;
  min-height:100vh;
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 50% 0%, rgba(255,251,243,.95), rgba(255,251,243,0) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23b48c4e' stroke-opacity='.18'%3E%3Crect x='21' y='21' width='14' height='14'/%3E%3Crect x='21' y='21' width='14' height='14' transform='rotate(45 28 28)'/%3E%3C/g%3E%3Cg fill='%23b48c4e' fill-opacity='.22'%3E%3Ccircle cx='0' cy='0' r='1.5'/%3E%3Ccircle cx='56' cy='0' r='1.5'/%3E%3Ccircle cx='0' cy='56' r='1.5'/%3E%3Ccircle cx='56' cy='56' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}

button,input,textarea{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.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}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.ico{
  width:1em;height:1em;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.page{
  width:min(100% - 32px, 640px);
  margin:0 auto;
  padding:clamp(20px, 5vw, 48px) 0 40px;
}

/* ---------- Kad jemputan (arch) ---------- */
.invite{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  text-align:center;
  color:var(--cream);
  padding:clamp(64px, 16vw, 96px) clamp(22px, 6vw, 48px) clamp(36px, 7vw, 52px);
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(229,207,159,.22), transparent 62%),
    linear-gradient(180deg, #284d42 0%, var(--forest) 45%, var(--forest-deep) 100%);
  border-radius:50% 50% 28px 28px / min(50vw - 16px, 320px) min(50vw - 16px, 320px) 28px 28px;
  box-shadow:0 40px 80px -40px rgba(24,46,39,.6);
  /* --hero-t: 0→1 bila kad diskrol keluar; --rx/--ry: condong ikut tetikus */
  transform-origin:50% 100%;
  transform:
    perspective(1400px)
    rotateX(calc(var(--hero-t, 0) * 9deg + var(--rx, 0deg)))
    rotateY(var(--ry, 0deg))
    scale(calc(1 - var(--hero-t, 0) * .05));
  opacity:calc(1 - var(--hero-t, 0) * .4);
}

.invite-glare{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(460px circle at var(--gx, 50%) var(--gy, 20%), rgba(229,207,159,.18), transparent 60%);
  opacity:var(--glare, 0);
  transition:opacity .5s;
  pointer-events:none;
}

.invite::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(229,207,159,.42);
  border-radius:50% 50% 20px 20px / min(50vw - 26px, 310px) min(50vw - 26px, 310px) 20px 20px;
  pointer-events:none;
}

.invite::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23e5cf9f' stroke-opacity='.14'%3E%3Crect x='21' y='21' width='14' height='14'/%3E%3Crect x='21' y='21' width='14' height='14' transform='rotate(45 28 28)'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image:radial-gradient(90% 55% at 50% 100%, #000, transparent 80%);
          mask-image:radial-gradient(90% 55% at 50% 100%, #000, transparent 80%);
}

.invite > :not(.invite-glare){animation:rise .9s var(--ease) both;animation-delay:calc(var(--i, 0) * 80ms + 60ms)}

.invite-cup{display:block;width:56px;height:56px;margin:0 auto 16px;color:var(--gold-light)}
.steam path{stroke-dasharray:1 1;stroke-dashoffset:-1;animation:steam 3.4s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:.7s}
.steam path:nth-child(3){animation-delay:1.4s}

.salam{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.2em;
  text-wrap:balance;
  text-transform:uppercase;
  color:rgba(246,239,226,.7);
}

.lead-in{
  margin:14px 0 0;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(18px, 4.6vw, 21px);
  color:rgba(246,239,226,.86);
}

.title{margin:4px 0 0;font-weight:inherit}
.title-script{
  display:block;
  font-family:var(--serif);
  font-style:italic;
  font-weight:500;
  font-size:clamp(38px, 12.5vw, 88px);
  line-height:1.02;
  color:var(--gold-light);
  text-wrap:nowrap;
}
.title-small{
  display:block;
  margin-top:14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(246,239,226,.8);
}
.title-name{
  display:block;
  margin-top:4px;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(40px, 10.5vw, 58px);
  line-height:1.02;
  color:var(--cream);
}
.title-heart{display:block;margin:10px 0 6px}
.title-heart svg{
  display:block;
  width:24px;height:24px;
  margin:0 auto;
  fill:#e0776d;
  filter:drop-shadow(0 0 10px rgba(224,119,109,.45));
  animation:heartbeat 1.8s ease-in-out infinite;
}

.ornament{
  display:block;
  width:200px;height:14px;
  margin:22px auto;
  color:var(--gold);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}

.date{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(12px, 4vw, 22px);
  max-width:340px;
  margin:0 auto;
}
.date-side{
  padding:9px 0 9px .22em;
  border-block:1px solid rgba(229,207,159,.5);
  font-size:12px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.date-day{
  font-family:var(--serif);
  font-variant-numeric:lining-nums;
  font-weight:600;
  font-size:clamp(58px, 15vw, 74px);
  line-height:.9;
  color:var(--gold-light);
}
.date-year{
  margin:10px 0 0;
  padding-left:.4em;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4em;
  color:rgba(246,239,226,.72);
}

.details{display:grid;gap:8px;justify-items:center;margin:22px 0 0}
.detail{display:flex;align-items:center;gap:8px;margin:0;font-size:14px;color:rgba(246,239,226,.9)}
.detail .ico{color:var(--gold-light);font-size:16px}
.detail-link{color:var(--gold-light);font-size:13px;font-weight:700;text-underline-offset:3px}

.countdown{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin:24px 0 0;
  padding:8px 16px;
  border:1px solid rgba(229,207,159,.38);
  border-radius:999px;
  background:rgba(255,255,255,.05);
  font-size:13px;
  font-weight:600;
}
.countdown .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-light);
  box-shadow:0 0 0 4px rgba(229,207,159,.18);
  animation:pulse 2.4s ease-in-out infinite;
}

.intro{
  max-width:520px;
  margin:36px auto 28px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(19px, 4.8vw, 22px);
  line-height:1.45;
  text-align:center;
  color:#3a4540;
}

/* ---------- Aturcara ---------- */
.timeline{
  position:relative;
  max-width:420px;
  margin:22px auto 4px;
  padding:0;
  list-style:none;
  text-align:left;
}
.timeline::before{
  content:"";
  position:absolute;
  left:23px;
  top:28px;bottom:28px;
  width:2px;
  background:linear-gradient(180deg, var(--gold-light), var(--gold) 50%, var(--gold-light));
  border-radius:2px;
}
.tl-item{position:relative;display:flex;align-items:center;gap:14px;padding:7px 0}
.tl-node{
  position:relative;
  z-index:1;
  display:grid;place-items:center;
  flex:none;
  width:48px;height:48px;
  border:1px solid var(--forest-deep);
  border-radius:50%;
  background:linear-gradient(180deg, #315a4d, var(--forest));
  color:var(--gold-light);
  font-size:21px;
  box-shadow:inset 0 1px 0 rgba(229,207,159,.35), 0 3px 0 var(--edge-forest), 0 10px 18px -10px rgba(14,28,23,.6);
}
.tl-body{
  flex:1;
  padding:11px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:linear-gradient(180deg, #fffefa, var(--field));
  box-shadow:0 3px 0 var(--edge-cream);
}
.tl-no{display:block;font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}
.tl-title{margin:2px 0 0;font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.15}

/* ---------- Lokasi ---------- */
.programme,
.venue{
  margin-bottom:28px;
  padding:clamp(22px, 6vw, 32px);
  border:1px solid var(--line);
  border-radius:24px;
  background:var(--paper);
  box-shadow:0 1px 2px rgba(31,42,38,.04), 0 24px 60px -32px rgba(35,67,57,.3);
  text-align:center;
}
.venue-title{
  margin:6px 0;
  font-variant-numeric:lining-nums;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(32px, 7.5vw, 38px);
  line-height:1.05;
}
.venue-address{max-width:420px;margin:0 auto;color:var(--muted);font-size:14px;text-wrap:balance}
.venue-map{
  aspect-ratio:16 / 10;
  margin:20px 0 16px;
  overflow:hidden;
  border:1px solid var(--line-strong);
  border-radius:16px;
  background:var(--field);
  box-shadow:inset 0 2px 8px rgba(60,48,25,.12);
}
.venue-map iframe{display:block;width:100%;height:100%;border:0;filter:saturate(.9) sepia(.06)}
.venue-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-bottom:4px}
.nav-btn{
  --depth:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:58px;
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:14px;
  background:linear-gradient(180deg, #fffefa, var(--field));
  color:var(--ink);
  text-align:left;
  text-decoration:none;
}
.nav-btn .ico{font-size:22px}
.nav-btn small{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  line-height:1.2;
  text-transform:uppercase;
  color:var(--muted);
}
.nav-btn strong{display:block;font-size:15px;font-weight:800;line-height:1.25;white-space:nowrap}
.nav-btn--google{
  --edge:var(--edge-forest);
  --hi:rgba(229,207,159,.4);
  --drop:rgba(14,28,23,.55);
  background:linear-gradient(180deg, #315a4d, var(--forest));
  border-color:var(--forest-deep);
  color:var(--cream);
}
.nav-btn--google small{color:rgba(246,239,226,.7)}
.nav-btn--google .ico{color:var(--gold-light)}
.nav-btn--waze .ico{color:#1a9fd0}
@media (hover:hover){
  .nav-btn--waze:hover{border-color:var(--gold)}
}
.nav-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Kad RSVP ---------- */
.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(22px, 6vw, 40px);
  box-shadow:0 1px 2px rgba(31,42,38,.04), 0 24px 60px -32px rgba(35,67,57,.35);
  scroll-margin-top:16px;
}

.card-head{text-align:center;padding-bottom:26px}
.eyebrow{
  margin:0;
  font-size:11px;
  font-weight:800;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-ink);
}
.card-title{
  margin:8px 0;
  text-wrap:balance;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(34px, 8vw, 42px);
  line-height:1.05;
}
.card-sub{margin:0;color:var(--muted);font-size:14.5px}

.step{padding:26px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.step-head{display:flex;align-items:baseline;gap:12px}
.step-no{
  font-variant-numeric:lining-nums;
  min-width:24px;
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:20px;
  color:var(--gold);
}
.step-title{margin:0;font-family:var(--serif);font-weight:600;font-size:25px;line-height:1.15}
.step-help{margin:4px 0 16px;padding-left:36px;color:var(--muted);font-size:14px}
.step-body{padding-left:36px}
.step-head + .step-body{margin-top:16px}

.tag{
  display:inline-block;
  margin-left:6px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--sage);
  color:var(--forest);
  font:700 10px/1.2 var(--sans);
  letter-spacing:.1em;
  text-transform:uppercase;
  vertical-align:middle;
}

.opt{position:relative;display:block;cursor:pointer}
.opt > input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}

/* ---------- Butang 3D (asas untuk semua butang) ----------
   --depth = ketebalan tepi, --lift = naik (+) / tenggelam (−).
   Butang naik bila hover, tenggelam bila ditekan, kekal tenggelam bila dipilih. */
.press{
  --depth:4px;
  --lift:0px;
  --edge:var(--edge-cream);
  --hi:rgba(255,255,255,.9);
  --inset:inset 0 0 0 transparent;
  --drop:rgba(70,55,28,.3);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  transform:perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(calc(var(--lift) * -1));
  box-shadow:
    var(--inset),
    inset 0 1px 0 var(--hi),
    0 calc(var(--depth) + var(--lift)) 0 var(--edge),
    0 calc(var(--depth) + var(--lift) + 10px) 20px -12px var(--drop);
  transition:
    transform .4s var(--spring),
    box-shadow .4s var(--spring),
    background-color .25s,
    border-color .25s,
    color .25s;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
/* Kilauan cahaya yang ikut kursor */
.press::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(200px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.45), transparent 65%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
@media (hover:hover){
  .press:hover:not(:disabled),
  .opt:hover > .press{--lift:3px}
  .press:hover::after,
  .opt:hover > .press::after{opacity:1}
  .press[data-tilt]:hover,
  .opt:hover > .press[data-tilt]{
    transition:transform .18s ease-out, box-shadow .4s var(--spring), background-color .25s, border-color .25s, color .25s;
  }
}
.press:active:not(:disabled),
.opt:active > .press,
.press.is-pressed{
  --lift:calc(1px - var(--depth));
  transition-duration:.08s;
}
.opt input:checked + .press,
.press[aria-pressed="true"]:not(:disabled){
  --lift:calc(1.5px - var(--depth));
  --edge:var(--edge-forest);
  --hi:rgba(0,0,0,.2);
  --inset:inset 0 3px 8px rgba(0,0,0,.22);
}
.press:disabled{--lift:calc(0px - var(--depth));opacity:.4;cursor:not-allowed}

.ripple{
  position:absolute;
  z-index:-1;
  border-radius:50%;
  background:currentColor;
  opacity:.22;
  transform:scale(0);
  pointer-events:none;
  animation:ripple .7s var(--ease) forwards;
}

/* Hadir / Tidak hadir */
.attend-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-bottom:6px}
.attend-card{
  --depth:6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  height:100%;
  padding:22px 12px 20px;
  border:1px solid var(--line-strong);
  border-radius:18px;
  background:linear-gradient(180deg, #fffefa, var(--field));
  text-align:center;
}
.attend-mark{
  display:grid;place-items:center;
  width:44px;height:44px;
  margin-bottom:6px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:linear-gradient(180deg, #fff, #f1e9da);
  box-shadow:0 2px 0 var(--edge-cream);
  color:var(--muted);
  font-size:20px;
  transition:background-color .25s, border-color .25s, color .25s;
}
.attend-title{font-family:var(--serif);font-weight:600;font-size:25px;line-height:1}
.attend-sub{font-size:13px;color:var(--muted);transition:color .25s}

@media (hover:hover){
  .opt:hover > .attend-card,
  .opt:hover > .chip{border-color:var(--gold)}
}
.opt input:focus-visible + .attend-card,
.opt input:focus-visible + .chip{outline:2px solid var(--gold);outline-offset:3px}

.opt--yes input:checked + .attend-card{
  --hi:rgba(229,207,159,.25);
  --drop:rgba(14,28,23,.55);
  background:linear-gradient(180deg, #2f584b, var(--forest));
  border-color:var(--forest-deep);
  color:var(--cream);
}
.opt--yes input:checked + .attend-card .attend-mark{
  background:var(--gold-light);
  border-color:var(--gold-light);
  box-shadow:0 2px 0 #a3844c;
  color:var(--forest);
  animation:pop .5s var(--spring);
}
.opt--yes input:checked + .attend-card .attend-sub{color:rgba(246,239,226,.75)}
.opt--no input:checked + .attend-card{
  --edge:var(--edge-rose);
  --hi:rgba(0,0,0,.06);
  --inset:inset 0 3px 8px rgba(122,58,51,.18);
  background:linear-gradient(180deg, #fcf1ed, var(--rose-soft));
  border-color:var(--rose);
  color:var(--rose);
}
.opt--no input:checked + .attend-card .attend-mark{
  background:var(--rose);
  border-color:var(--rose);
  box-shadow:0 2px 0 var(--edge-rose);
  color:#fff;
  animation:pop .5s var(--spring);
}

/* Chips */
.chip-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px 8px;padding-bottom:3px}
.chip-grid--2{grid-template-columns:repeat(2, 1fr)}
.chip{
  --depth:3px;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  height:100%;
  padding:10px 12px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:linear-gradient(180deg, #fffefa, var(--field));
  font-size:14px;
  font-weight:600;
  line-height:1.25;
}
.chip::before{
  content:"";
  flex:none;
  width:16px;height:16px;
  border:1.5px solid var(--line-strong);
  border-radius:50%;
  background:#fff;
  box-shadow:inset 0 1px 2px rgba(60,48,25,.18);
  transition:background-color .25s, border-color .25s, box-shadow .25s;
}
.chip .ico{font-size:18px;color:var(--gold-ink)}
.chip--icon::before{display:none}
.opt input:checked + .chip{
  --hi:rgba(229,207,159,.2);
  background:linear-gradient(180deg, #2f584b, var(--forest));
  border-color:var(--forest-deep);
  color:var(--cream);
}
.opt input:checked + .chip::before{border-color:var(--gold-light);background:var(--gold-light);box-shadow:inset 0 0 0 3px var(--forest)}
.opt input:checked + .chip--icon{
  --edge:var(--edge-rose);
  --hi:rgba(0,0,0,.06);
  --inset:inset 0 3px 8px rgba(122,58,51,.16);
  background:linear-gradient(180deg, #fcf1ed, var(--rose-soft));
  border-color:var(--rose);
  color:var(--rose);
}
.opt input:checked + .chip--icon .ico{color:var(--rose)}

/* Medan input */
.field + .field{margin-top:16px}
.label{display:block;margin-bottom:7px;font-size:13px;font-weight:700}
.input{
  display:block;
  width:100%;
  min-height:52px;
  padding:13px 16px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:var(--field);
  font:500 16px/1.4 var(--sans);
  -webkit-appearance:none;
          appearance:none;
  transition:border-color .2s, box-shadow .2s, background-color .2s;
}
select.input{
  padding-right:46px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23234339' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px;
  cursor:pointer;
}
.input::placeholder{color:#a39d90}
.input:hover{border-color:#c9b995}
.input:focus{outline:none;border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(180,140,78,.16)}
textarea.input{min-height:96px;resize:vertical}

.error-msg{display:none;margin:8px 0 0;font-size:13px;font-weight:600;color:var(--rose)}
.has-error .error-msg{display:block}
.has-error .input{border-color:var(--rose)}
.has-error .chip,
.has-error .attend-card{border-color:#d9a79f}

/* Kaunter */
.counters{display:grid;gap:10px}
.counter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 10px 10px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--field);
}
.counter-text strong{display:block;font-size:15px}
.counter-text small{display:block;font-size:13px;color:var(--muted)}
.counter-ctrl{display:flex;align-items:center;gap:4px}
.counter-btn{
  --depth:3px;
  display:grid;place-items:center;
  width:42px;height:42px;
  margin-bottom:3px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:linear-gradient(180deg, #fff, #f3ecdf);
  color:var(--forest);
  font-size:16px;
  cursor:pointer;
}
@media (hover:hover){
  .counter-btn:hover:not(:disabled){border-color:var(--gold);color:var(--gold-ink)}
}
.counter-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.counter-val{
  width:48px;
  border:0;
  background:transparent;
  text-align:center;
  font-size:20px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.counter-val:focus{outline:none;color:var(--gold-ink)}
.counter-val::-webkit-inner-spin-button,
.counter-val::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:10px;
  padding:10px 18px;
  border-radius:12px;
  background:var(--sage);
  color:var(--forest);
  font-size:14px;
  font-weight:600;
}
.total strong{display:inline-block;font-family:var(--serif);font-variant-numeric:lining-nums;font-size:26px;line-height:1;margin-right:2px}

/* Hantar */
.submit-wrap{padding-top:26px;border-top:1px solid var(--line)}
.form-error{
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:12px;
  background:var(--rose-soft);
  color:var(--rose);
  font-size:14px;
  font-weight:600;
}
.submit{
  --depth:6px;
  --edge:var(--edge-forest);
  --hi:rgba(229,207,159,.4);
  --drop:rgba(14,28,23,.6);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:58px;
  margin-bottom:6px;
  border:1px solid var(--forest-deep);
  border-radius:14px;
  background:linear-gradient(180deg, #315a4d 0%, var(--forest) 55%, #1e3a31 100%);
  color:var(--cream);
  font-size:16px;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
}
/* Kilauan emas yang melintas sekali-sekala */
.submit::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;bottom:0;
  left:-75%;
  width:50%;
  background:linear-gradient(100deg, transparent, rgba(229,207,159,.3), transparent);
  transform:skewX(-20deg);
  animation:sheen 5s var(--ease) 1.5s infinite;
  pointer-events:none;
}
.submit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.submit:disabled{cursor:progress;opacity:1}
.submit[aria-busy="true"]{--lift:calc(1px - var(--depth))}
.submit-arrow{font-size:18px;color:var(--gold-light);transition:translate .35s var(--spring)}
@media (hover:hover){
  .submit:hover .submit-arrow{translate:5px 0}
}
.spinner{
  display:none;
  width:18px;height:18px;
  border:2px solid rgba(246,239,226,.35);
  border-top-color:var(--cream);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
.submit[aria-busy="true"] .spinner{display:block}
.submit[aria-busy="true"] .submit-arrow{display:none}
.fine{margin:14px 0 0;text-align:center;font-size:12.5px;color:var(--muted)}

/* Berjaya */
.success{text-align:center;outline:none}
.success-cup{display:block;width:68px;height:68px;margin:4px auto 14px;color:var(--gold);stroke-width:1.5}
.success-title{
  margin:8px 0;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(38px, 9vw, 48px);
  line-height:1;
}
.success-text{max-width:400px;margin:0 auto;color:var(--muted)}

.ticket{
  position:relative;
  margin:26px 0 22px;
  padding:6px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--field);
  text-align:left;
}
.ticket::before,
.ticket::after{
  content:"";
  position:absolute;
  top:50%;
  width:20px;height:20px;
  border:1px solid var(--line);
  border-radius:50%;
  background:var(--paper);
  transform:translateY(-50%);
}
.ticket::before{left:-11px;clip-path:inset(0 0 0 50%)}
.ticket::after{right:-11px;clip-path:inset(0 50% 0 0)}
.ticket-row{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:12px 0;
  border-bottom:1px dashed var(--line-strong);
  font-size:14.5px;
}
.ticket-row:last-child{border-bottom:0}
.ticket-row dt{color:var(--muted)}
.ticket-row dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}

.help-note{
  margin:0 0 22px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, #fffefa, var(--field));
  box-shadow:0 3px 0 var(--edge-cream);
}
.help-note p{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:#3a4540}
.help-note .btn{width:100%;justify-content:center}

.success-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.btn{
  --depth:4px;
  display:inline-flex;
  text-decoration:none;
  align-items:center;
  gap:8px;
  height:48px;
  margin-bottom:4px;
  padding:0 18px;
  border:1px solid var(--line-strong);
  border-radius:12px;
  background:linear-gradient(180deg, #fff, #f5efe3);
  color:var(--forest);
  font-size:14px;
  font-weight:700;
  cursor:pointer;
}
.btn .ico{font-size:17px}
@media (hover:hover){
  .btn:hover{border-color:var(--gold)}
}
.btn--solid{
  --edge:var(--edge-forest);
  --hi:rgba(229,207,159,.4);
  --drop:rgba(14,28,23,.55);
  background:linear-gradient(180deg, #315a4d, var(--forest));
  border-color:var(--forest-deep);
  color:var(--cream);
}
.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ---------- Butang terapung "Sahkan kehadiran" ---------- */
.float-cta{
  --depth:4px;
  --edge:var(--edge-forest);
  --hi:rgba(229,207,159,.4);
  --drop:rgba(14,28,23,.65);
  position:fixed;
  z-index:40;
  left:0;right:0;
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:10px;
  width:max-content;
  height:50px;
  margin:0 auto;
  padding:0 20px 0 24px;
  border:1px solid var(--forest-deep);
  border-radius:999px;
  background:linear-gradient(180deg, #315a4d, var(--forest));
  color:var(--cream);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  opacity:0;
  translate:0 30px;
  pointer-events:none;
  transition:opacity .4s var(--ease), translate .6s var(--spring), transform .4s var(--spring), box-shadow .4s var(--spring);
}
.float-cta.is-visible{opacity:1;translate:0 0;pointer-events:auto}
.float-cta .ico{font-size:18px;color:var(--gold-light);rotate:90deg;animation:bob 1.8s ease-in-out infinite}
.float-cta:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ---------- Bar progres skrol ---------- */
.progress{position:fixed;z-index:50;top:0;left:0;right:0;height:3px;pointer-events:none}
.progress span{
  display:block;
  height:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  box-shadow:0 0 10px rgba(180,140,78,.6);
}

/* ---------- Hiasan terapung (parallax) ---------- */
.page{position:relative;z-index:1}
.floaters{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.floater{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);color:var(--gold);opacity:.55}
.floater svg{display:block;width:100%;height:100%;fill:currentColor;animation:twinkle var(--dur, 6s) ease-in-out infinite}
.floater--line svg{fill:none;stroke:currentColor;stroke-width:1.3;animation:spin-slow var(--dur, 24s) linear infinite}

/* ---------- Muncul semasa skrol (hanya bila JS aktif) ---------- */
.js [data-reveal]{
  opacity:0;
  translate:0 36px;
  transition:opacity .9s var(--ease) var(--rd, 0ms), translate .9s var(--ease) var(--rd, 0ms);
}
.js [data-reveal].is-in{opacity:1;translate:0 0}
.js .card[data-reveal]{
  transform:perspective(1400px) rotateX(14deg) scale(.96);
  transform-origin:50% 0;
  transition:opacity 1s var(--ease), translate 1s var(--ease), transform 1.2s var(--ease);
}
.js .card[data-reveal].is-in{transform:none}
.js [data-split] .w{
  display:inline-block;
  opacity:0;
  translate:0 .5em;
  filter:blur(8px);
  transition:opacity .8s var(--ease), translate .8s var(--ease), filter .8s var(--ease);
  transition-delay:calc(var(--wi) * 30ms);
}
.js [data-split].is-in .w{opacity:1;translate:0 0;filter:blur(0)}

/* Letupan kilauan bila RSVP hadir berjaya */
.success{position:relative}
.burst{position:absolute;left:50%;top:40px;width:0;height:0;pointer-events:none}
.burst i{
  position:absolute;
  width:var(--sz);height:var(--sz);
  margin:calc(var(--sz) / -2);
  border-radius:2px;
  background:var(--c);
  opacity:0;
  animation:burst 1.2s var(--ease) var(--d) forwards;
}

.bump{animation:bump .4s var(--spring)}

.footer{margin-top:40px;text-align:center}
.footer .ornament{width:140px;margin:0 auto 12px}
.footer p{
  margin:0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

.footer-heart{color:var(--rose);letter-spacing:0}

/* Ajakan cabutan bertuah pada kad terima kasih (tetamu HADIR sahaja) */
.draw-note{
  margin:0 0 22px;
  padding:22px 20px 20px;
  border:1px solid var(--line-strong);
  border-radius:20px;
  background:linear-gradient(180deg, #fffdf7, var(--sage));
  box-shadow:0 3px 0 rgba(214,198,166,.55);
  text-align:center;
}
.draw-note-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:54px;
  height:54px;
  margin-bottom:12px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #fff8ea, var(--field) 72%);
  box-shadow:0 6px 18px -12px rgba(35,67,57,.55), inset 0 -2px 0 rgba(214,198,166,.5);
}
.draw-note-badge .gift-ico{display:block;width:26px;height:26px;max-width:26px;max-height:26px}
.draw-note-title{
  margin:0 0 6px;
  font-family:var(--serif);
  font-weight:600;
  font-size:23px;
  line-height:1.15;
  color:var(--forest);
}
.draw-note-text{margin:0 0 16px;font-size:14px;line-height:1.55;color:#3a4540}
.draw-note .btn{width:100%;justify-content:center}

/* Lencana hadiah (halaman cabutan) */
/* Lencana hadiah. Nilai penuh (bukan shorthand) + saiz pada kedua-dua SVG
   dan pembalut supaya ikon tetap kecil & berwarna walaupun CSS lain mengganggu. */
.gift-badge{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  margin:2px auto 14px;
  border:1px solid var(--line-strong);
  border-radius:50%;
  background:radial-gradient(circle at 50% 34%, #fff8ea, var(--field) 72%);
  box-shadow:0 8px 24px -14px rgba(35,67,57,.5), inset 0 -3px 0 rgba(214,198,166,.55);
}
.gift-glow{
  position:absolute;
  inset:-6px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(180,140,78,.3), rgba(180,140,78,0) 70%);
  animation:gift-pulse 2.6s ease-in-out infinite;
}
.gift-ico{
  position:relative;
  display:block;
  width:30px;
  height:30px;
  max-width:30px;
  max-height:30px;
  color:var(--gold-ink);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@keyframes gift-pulse{
  0%,100%{opacity:.5;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}
}

/* Butang kredit → WhatsApp */
.credit{
  --depth:3px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:20px 0 4px;
  padding:10px 18px 10px 14px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  background:linear-gradient(180deg, #fffefa, var(--field));
  color:var(--ink);
  text-align:left;
  text-decoration:none;
}
.credit-heart{font-size:20px;color:var(--rose);fill:currentColor;stroke:none;animation:heartbeat 1.8s ease-in-out infinite}
.credit-text small{
  display:block;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.3;
  text-transform:uppercase;
  color:var(--muted);
}
.credit-text strong{display:block;font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.1}
.credit-go{font-size:18px;color:var(--gold-ink);transition:translate .35s var(--spring), color .25s}
@media (hover:hover){
  .credit:hover{border-color:var(--gold)}
  .credit:hover .credit-go{translate:3px 0;color:var(--forest)}
}
.credit:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.success:not([hidden]),
.submit-wrap:not([hidden]),
.draw-note:not([hidden]),
.field:not([hidden]){animation:rise .5s var(--ease) both}

@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pulse{50%{box-shadow:0 0 0 7px rgba(229,207,159,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{to{transform:scale(1);opacity:0}}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes bump{40%{transform:scale(1.35)}}
@keyframes sheen{0%{left:-75%}30%,100%{left:130%}}
@keyframes bob{50%{translate:0 4px}}
@keyframes twinkle{50%{transform:scale(.55) rotate(45deg);opacity:.35}}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@keyframes heartbeat{0%,55%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(.94)}36%{transform:scale(1.12)}}
@keyframes steam{0%{stroke-dashoffset:-1;opacity:0}25%{opacity:1}55%{stroke-dashoffset:0}100%{stroke-dashoffset:1;opacity:0}}
@keyframes burst{
  0%{opacity:1;transform:translate(0, 0) rotate(0) scale(1)}
  100%{opacity:0;transform:translate(var(--tx), var(--ty)) rotate(220deg) scale(.3)}
}

@media (max-width:340px){
  .venue-actions{grid-template-columns:1fr}
}
@media (max-width:520px){
  .step-help,.step-body{padding-left:0}
  .chip-grid{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:440px){
  .venue-map{aspect-ratio:4 / 3}
  .nav-btn{gap:8px;padding:8px 10px}
  .nav-btn .ico{font-size:19px}
  .nav-btn strong{font-size:14px}
  .nav-btn small{letter-spacing:.08em}
  .chip-grid--2{grid-template-columns:1fr}
  .attend-card{padding:18px 8px 16px}
  .attend-sub{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .steam path{stroke-dasharray:none}
  .invite{transform:none;opacity:1}
  .floaters{display:none}
  .js [data-reveal],
  .js [data-split] .w{opacity:1;translate:none;filter:none}
  .js .card[data-reveal]{transform:none}
}