*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    :root {
      --ink:#171515;
      --gold:#b08a4f;
      --paper:#f6f5f2;

      /* ── Journey tuning (mobile default) ── */
      --journey-title-size: clamp(.82rem, 3.4vw, 1rem);
      --journey-dialog-size: clamp(1rem, 4vw, 1.24rem);
      --journey-dialog-date-size: clamp(.68rem, 2.7vw, .82rem);
      --journey-dialog-width: min(280px, 80vw);
      --journey-dialog-pad-y: clamp(10px, 2.8vw, 14px);
      --journey-dialog-pad-x: clamp(12px, 3.1vw, 16px);
      --journey-btn-font-size: clamp(.72rem, 2.8vw, .9rem);
      --journey-btn-pad-y: .65rem;
      --journey-btn-pad-x: 2rem;
      --music-btn-size: clamp(40px, 9vw, 48px);
      --music-btn-right: clamp(14px, 3vw, 26px);
      --music-btn-top: clamp(14px, 2.8vh, 24px);

      /* ── Main content theme ── */
      --invite-bg: #f7f8f3;
      --invite-paper: #ffffff;
      --invite-green: #889a84;
      --invite-green-soft: #d7dfd3;
      --invite-gold: #c9a44f;
      --invite-ink: #171515;
      --invite-muted: #4c5048;

      /* Main content alt theme (sample-like) */
      --mc-bg: #e7dfcd;
      --mc-paper: #f3efe5;
      --mc-card: #f7f4ed;
      --mc-ink: #2f3540;
      --mc-muted: #5f6267;
      --mc-accent: #9b204a;
      --mc-accent-soft: #cfbb85;

      /* Hero/Journey object shadow tuning */
      --hero-flower-shadow: drop-shadow(0 8px 18px rgba(0,0,0,.11));
      --hero-bird-shadow: drop-shadow(0 10px 22px rgba(0,0,0,.13));
    }

    body {
      font-family:"Cormorant Garamond","Garamond","Times New Roman",serif;
      color:var(--ink); overflow:hidden; width:100vw; height:100vh;
    }
    /* Mobile tap UX:
       hindari highlight biru + text selection saat tombol diketuk cepat */
    button,
    [role="button"] {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
      touch-action: manipulation;
    }
    img { display:block; max-width:100%; }
    html.app-loading,
    html.app-loading body { overflow:hidden; }

    /* ══════════════════════════════════════
       CINEMATIC LOADER — White Premium
    ══════════════════════════════════════ */
    #appLoader {
      position:fixed; inset:0; z-index:6000;
      display:grid; place-items:center;
      --ldr-copy-y: clamp(38svh, 42svh, 46svh);
      --ldr-enter-y: clamp(68svh, 72svh, 76svh);
      background:
        radial-gradient(ellipse 90% 70% at 15% 10%,  rgba(207,187,133,.55), transparent 55%),
        radial-gradient(ellipse 70% 80% at 88% 90%,  rgba(176,138,79,.4),   transparent 58%),
        radial-gradient(ellipse 60% 50% at 80% 15%,  rgba(220,200,155,.3),  transparent 50%),
        radial-gradient(ellipse 50% 60% at 20% 85%,  rgba(200,178,120,.28), transparent 48%),
        #f7f2e8;
      overflow:hidden;
      opacity:1; transition:opacity .6s ease, visibility .6s ease;
    }
    #appLoader[aria-hidden="true"] { opacity:0; visibility:hidden; pointer-events:none; }

    /* Ring konsentris — expand perlahan, CSS only */
    .ldr-rings { position:absolute; inset:0; pointer-events:none; }
    .ldr-ring {
      position:absolute; border-radius:50%;
      border:1px solid rgba(176,138,79,.07);
      left:50%; top:50%;
      transform:translate(-50%,-50%) scale(.7);
      animation:ldrRingExpand 7s ease-out infinite; opacity:0;
    }
    .ldr-ring:nth-child(1) { width:clamp(260px,40vw,380px); height:clamp(260px,40vw,380px); animation-delay:0s; }
    .ldr-ring:nth-child(2) { width:clamp(420px,65vw,600px); height:clamp(420px,65vw,600px); animation-delay:-2.3s; }
    .ldr-ring:nth-child(3) { width:clamp(580px,90vw,820px); height:clamp(580px,90vw,820px); animation-delay:-4.6s; }
    @keyframes ldrRingExpand {
      0%   { opacity:0; transform:translate(-50%,-50%) scale(.7); }
      25%  { opacity:1; }
      100% { opacity:0; transform:translate(-50%,-50%) scale(1.15); }
    }

    /* Partikel emas mengambang */
    .ldr-particles { position:absolute; inset:0; pointer-events:none; }
    .ldr-particles span {
      position:absolute; border-radius:50%;
      background:rgba(176,138,79,.5);
      animation:ldrFloat 8s ease-in-out infinite; opacity:0;
    }
    .ldr-particles span:nth-child(1) { width:2px;height:2px; left:8%;  top:20%; animation-delay:0s; }
    .ldr-particles span:nth-child(2) { width:3px;height:3px; left:22%; top:72%; animation-delay:-1.2s; animation-duration:9s; }
    .ldr-particles span:nth-child(3) { width:2px;height:2px; left:38%; top:15%; animation-delay:-2.4s; animation-duration:7s; }
    .ldr-particles span:nth-child(4) { width:4px;height:4px; left:64%; top:80%; animation-delay:-3.6s; animation-duration:6s; }
    .ldr-particles span:nth-child(5) { width:2px;height:2px; left:78%; top:30%; animation-delay:-4.8s; animation-duration:10s; }
    .ldr-particles span:nth-child(6) { width:3px;height:3px; left:90%; top:60%; animation-delay:-0.8s; animation-duration:8s; }
    .ldr-particles span:nth-child(7) { width:2px;height:2px; left:50%; top:88%; animation-delay:-5.5s; animation-duration:9s; }
    .ldr-particles span:nth-child(8) { width:2px;height:2px; left:14%; top:50%; animation-delay:-2s;   animation-duration:11s; }
    @keyframes ldrFloat {
      0%,100% { opacity:0; transform:translateY(0) scale(1); }
      40%     { opacity:.8; }
      70%     { opacity:.3; transform:translateY(-40px) scale(1.6); }
    }

    /* Body */
    .ldr-body {
      position:absolute; left:50%; top:var(--ldr-copy-y); z-index:2;
      width:min(92vw,720px); padding:clamp(20px,4vw,48px);
      transform:translate(-50%,-50%);
      animation:ldrBodyIn 1s cubic-bezier(.19,1,.22,1) both;
    }
    .ldr-copy {
      display:flex; flex-direction:column; align-items:center;
      gap:clamp(8px,1.6vh,14px); text-align:center; width:100%;
    }
    @keyframes ldrBodyIn {
      from { opacity:0; transform:translate(-50%,calc(-50% + 20px)); }
      to   { opacity:1; transform:translate(-50%,-50%); }
    }

    /* Eyebrow */
    .ldr-eyebrow {
      font-family:"Cinzel",serif; font-size:clamp(.48rem,1.1vw,.62rem);
      letter-spacing:.36em; text-transform:uppercase;
      color:rgba(176,138,79,.8);
      animation:ldrFadeUp .8s cubic-bezier(.19,1,.22,1) .3s both;
    }

    /* Divider */
    .ldr-divider {
      display:flex; align-items:center; gap:14px;
      width:min(300px,78vw);
      animation:ldrFadeUp .8s cubic-bezier(.19,1,.22,1) .4s both;
    }
    .ldr-divider-line {
      flex:1; height:0.5px;
      background:linear-gradient(90deg,transparent,rgba(176,138,79,.55),transparent);
    }
    .ldr-divider-gem {
      width:5px; height:5px; flex-shrink:0;
      border:1px solid rgba(176,138,79,.65);
      transform:rotate(45deg);
      animation:ldrGemSpin .8s cubic-bezier(.19,1,.22,1) .35s both;
    }
    @keyframes ldrGemSpin {
      from { opacity:0; transform:rotate(-90deg) scale(.2); }
      to   { opacity:1; transform:rotate(45deg) scale(1); }
    }

    /* Nama — wrapper */
    .ldr-names {
      display:flex; align-items:baseline;
      gap:clamp(.4rem,1.4vw,1rem);
    }
    .ldr-name-wrap { display:inline-flex; align-items:baseline; }

    /* Animasi per huruf */
    .ldr-char {
      font-family:"Cormorant Garamond",serif;
      font-style:italic; font-weight:500;
      font-size:clamp(3rem,10vw,6.5rem);
      line-height:.88; color:#1a1612;
      display:inline-block;
      animation:ldrCharIn .7s cubic-bezier(.19,1,.22,1) both;
      animation-delay:calc(.5s + var(--i) * .08s);
    }
    @keyframes ldrCharIn {
      from { opacity:0; transform:translateY(20px) scale(.9); }
      to   { opacity:1; transform:none; }
    }

    .ldr-name-amp {
      font-family:"Cormorant Garamond",serif;
      font-style:italic;
      font-size:clamp(1.3rem,3.2vw,2.2rem);
      color:rgba(176,138,79,.9);
      animation:ldrFadeUp .6s cubic-bezier(.19,1,.22,1) .9s both;
    }

    /* Tanggal */
    .ldr-date {
      font-family:"Cinzel",serif; font-size:clamp(.52rem,1.1vw,.7rem);
      letter-spacing:.26em; text-transform:uppercase;
      color:rgba(42,37,32,.42);
      animation:ldrFadeUp .8s cubic-bezier(.19,1,.22,1) 1s both;
    }

    @keyframes ldrFadeUp {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:none; }
    }

    /* Progress */
    .ldr-progress-wrap {
      display:flex; flex-direction:column; align-items:center; gap:8px;
      margin-top:clamp(4px,1vh,10px);
      animation:ldrFadeUp .8s cubic-bezier(.19,1,.22,1) 1.1s both;
    }
    .ldr-track {
      width:min(200px,60vw); height:2px;
      background:rgba(176,138,79,.2); border-radius:999px; overflow:hidden;
    }
    #appLoaderBar {
      display:block; width:0%; height:100%;
      background:linear-gradient(90deg,rgba(176,138,79,.5),#b08a4f,rgba(176,138,79,.7));
      border-radius:inherit; transition:width .4s ease;
      box-shadow:0 0 8px rgba(176,138,79,.4);
    }
    .ldr-status {
      font-family:"Cinzel",serif; font-size:clamp(.52rem,1.1vw,.64rem);
      letter-spacing:.16em; text-transform:uppercase;
      color:rgba(42,37,32,.6);
    }

    /* Tombol masuk — lebih premium */
    .ldr-enter-btn {
      --ldr-expand-scale:30;
      position:fixed; left:50%; top:var(--ldr-enter-y);
      width:clamp(96px,20vw,116px); aspect-ratio:1;
      border-radius:50%;
      border:1.5px solid rgba(176,138,79,.5);
      background:linear-gradient(155deg, rgba(255,255,255,.98), rgba(246,240,226,.99));
      box-shadow:
        0 8px 32px rgba(80,60,20,.18),
        0 2px 8px rgba(176,138,79,.15),
        inset 0 1px 0 rgba(255,255,255,.95);
      cursor:pointer; display:grid; place-items:center;
      opacity:0; pointer-events:none; overflow:visible;
      transform:translate(-50%,-50%);
      transition:opacity .5s ease, transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s;
      animation:ldrEnterIn .8s cubic-bezier(.19,1,.22,1) 1.2s both;
    }
    .ldr-enter-btn.is-ready { opacity:1; pointer-events:auto; }
    .ldr-enter-btn.is-ready:hover {
      transform:translate(-50%,-50%) translateY(-5px) scale(1.07);
      box-shadow:
        0 20px 48px rgba(80,60,20,.24),
        0 4px 16px rgba(176,138,79,.2),
        inset 0 1px 0 rgba(255,255,255,.95);
    }
    .ldr-enter-btn.is-ready:active { transform:translate(-50%,-50%) scale(.95); }
    @keyframes ldrEnterIn {
      from { opacity:0; transform:translate(-50%,calc(-50% + 10px)); }
      to   { opacity:1; transform:translate(-50%,-50%); }
    }

    /* Tiga ring pulse — lebih tebal dan kontras */
    .ldr-enter-ring {
      position:absolute; border-radius:50%;
      border:1.5px solid rgba(176,138,79,.4);
      animation:ldrRingPulse 2.8s ease-out infinite; opacity:0;
    }
    .ldr-enter-ring--2 { inset:-16px; border-width:1px; border-color:rgba(176,138,79,.22); animation-delay:-1.4s; }
    .ldr-enter-ring--3 { inset:-30px; border-width:1px; border-color:rgba(176,138,79,.12); animation-delay:-2.1s; }
    .ldr-enter-btn .ldr-enter-ring:first-child { inset:-10px; }
    @keyframes ldrRingPulse {
      0%  { transform:scale(.82); opacity:0; }
      20% { opacity:1; }
      100%{ transform:scale(1.28); opacity:0; }
    }

    .ldr-enter-label {
      font-family:"Cinzel",serif; font-size:clamp(.62rem,1.6vw,.78rem);
      letter-spacing:.24em; text-transform:uppercase;
      color:#5a4a2e; position:relative; z-index:1;
      font-weight:500;
    }

    /* Expand saat klik */
    .ldr-enter-btn.expand {
      animation:ldrCircleExpand 850ms cubic-bezier(.18,.9,.2,1) forwards !important;
    }
    .ldr-enter-btn.expand .ldr-enter-ring  { animation:none; opacity:0; }
    .ldr-enter-btn.expand .ldr-enter-label { opacity:0; transition:opacity .15s; }
    @keyframes ldrCircleExpand {
      0%   { transform:translate(-50%,-50%) scale(1); background:linear-gradient(155deg,rgba(255,255,255,.98),rgba(246,240,226,.99)); border-color:rgba(176,138,79,.5); }
      100% { transform:translate(-50%,-50%) scale(var(--ldr-expand-scale)); background:#f7f2e8; border-color:#f7f2e8; box-shadow:none; }
    }

    html.app-ready #appLoader { visibility:hidden; pointer-events:none; }
    html.app-loading #heroCanvas,
    html.app-loading #journeyCanvas,
    html.app-loading #main-content,
    html.app-loading #progressOrn,
    html.app-loading .scroll-hint,
    html.app-loading .btn-continue,
    html.app-loading .btn-top,
    html.app-loading .btn-down,
    html.app-loading .btn-music,
    html.app-loading #jHint,
    html.app-loading #jDots { visibility:hidden; }

    /* ═══════════════════════════════════════════════════
       HERO CANVAS
    ═══════════════════════════════════════════════════ */
    #heroCanvas {
      position:fixed; inset:0; width:100vw; height:100vh; overflow:hidden;
      /* touch-action dihapus — Lenis butuh touch events diteruskan ke dia
         untuk normalize input. Lenis yang handle preventDefault internal.
         will-change dikelola JS secara dinamis. */
    }

    /* Background layer — pan/zoom dikontrol JS via backgroundSize + backgroundPosition */
    .bg-paper {
      position:absolute; inset:0;
      background:#f0eeeb url('../images/bg_main_content.webp') center center / cover no-repeat;
      z-index:0;
    }

    /* Hero fg base — semua fg pakai ini */
    .hfg {
      position:absolute;
      pointer-events:none;
      /* will-change tidak di-set static — hero hanya aktif di zone 0,
         browser cukup handle compositing saat opacity heroCanvas > 0 */
    }

    /* Burung — wrapper di-control JS (transform/opacity), img di dalamnya float */
    .hfg-birds {
      z-index: 20;
      left: 50%; bottom: 0;
      width: clamp(280px, 50vw, 660px);
      height: auto;
    }
    .hfg-birds img {
      width: 100%; height: auto; display: block;
      animation: floatBird 5.2s ease-in-out infinite;
      filter: var(--hero-bird-shadow);
    }

    /* Bunga — wrapper di-control JS, img di dalamnya float */
    .hfg-flower {
      z-index: 12;
    }
    .hfg-flower img {
      width: 100%; height: auto; display: block;
      animation: floatFlower 8.4s ease-in-out infinite;
      filter: var(--hero-flower-shadow);
    }

    .hfg-tl { top: 0;    left: 0;   width: clamp(200px,25vw,360px);  transform-origin: top left;    }
    .hfg-tr { top: 0;    right: 0;  width: clamp(50px,25vw,160px);   transform-origin: top right;   }
    .hfg-bl { bottom: 0; left: 0;   width: clamp(50px,25vw,160px);   transform-origin: bottom left; }
    .hfg-br { bottom: 0; right: 0;  width: clamp(200px,25vw,360px);  transform-origin: bottom right; }

    /* Stagger float animation per bunga */
    .hfg-tr img, .hfg-bl img { animation-duration: 9.2s; animation-delay: -1.2s; }
    .hfg-tl img, .hfg-br img { animation-delay: -.45s; }

    /* Mobile sizing */
    @media (max-width:767px) {
      .hfg-birds            { width: clamp(300px, 88vw, 540px); }
      .hfg-tl, .hfg-br     { width: clamp(290px, 38vw, 400px); }
      .hfg-tr, .hfg-bl     { width: clamp(190px, 38vw, 390px); }
    }

    /* ════════════════════════════════════════════════════
       HERO DIALOG — dua panel, class JS toggle style
       .jdialog.hero-intro  → tampilkan .hdlg-intro
       .jdialog.hero-prayer → tampilkan .hdlg-prayer
    ════════════════════════════════════════════════════ */
    #hDialog {
      pointer-events: none;
      z-index: 50;        /* di atas burung (20) dan bunga (12) */
      position: fixed;    /* pastikan selalu relative ke viewport, bukan heroCanvas */
    }

    /* Panel default hidden, JS swap class untuk menampilkan */
    .jdialog.hero-intro  .hdlg-prayer { display: none; }
    .jdialog.hero-prayer .hdlg-intro  { display: none; }

    /* ── Base reset untuk hero-intro (no card background) ── */
    .jdialog.hero-intro {
      background: none;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      padding: 0;
      width: min(92%, 920px) !important;
      text-align: center;
    }

    /* Eyebrow "Mengumumkan Pernikahan" */
    .hdlg-eyebrow {
      font-family: "Cinzel", serif;
      text-transform: uppercase;
      letter-spacing: .28em;
      font-size: clamp(.62rem, 1.8vw, .88rem);
      color: var(--gold);
      opacity: .9;
      text-shadow: 0 2px 12px rgba(255,255,255,.8);
      margin-bottom: clamp(.5rem, 1.2vw, .9rem);
    }

    /* Ornamen tipis antara eyebrow dan nama */
    .hdlg-intro-orn {
      display: flex;
      align-items: center;
      gap: clamp(10px, 2vw, 18px);
      width: min(280px, 64vw);
      margin: 0 auto clamp(.4rem, 1vw, .8rem);
    }
    .hdlg-intro-orn-line {
      flex: 1; height: 1px;
      background: linear-gradient(90deg, transparent, rgba(176,138,79,.5), transparent);
    }
    .hdlg-intro-orn-dot {
      width: 3px; height: 3px; border-radius: 50%;
      background: rgba(176,138,79,.6);
      flex-shrink: 0;
    }

    /* Nama utama */
    .hdlg-names {
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
      font-weight: 500;
      font-size: clamp(3rem, 10vw, 6.5rem);
      line-height: .88;
      color: #111;
      text-shadow:
        0 2px 0 rgba(255,255,255,.9),
        0 8px 32px rgba(255,255,255,.7),
        0 16px 48px rgba(255,255,255,.3);
      margin: 0;
      letter-spacing: -.01em;
    }

    /* Ampersand di dalam nama */
    .hdlg-amp {
      display: block;
      font-size: clamp(1.55rem, 5.2vw, 3.3rem);
      font-style: normal;
      margin: .1em 0;
      color: var(--gold);
      letter-spacing: .04em;
      text-shadow: 0 4px 16px rgba(255,255,255,.6);
    }

    /* Tanggal */
    .hdlg-date {
      font-family: "Cinzel", serif;
      letter-spacing: .22em;
      text-transform: uppercase;
      font-size: clamp(.72rem, 2vw, .98rem);
      color: rgba(42,37,32,.7);
      text-shadow: 0 2px 10px rgba(255,255,255,.7);
      margin-top: clamp(.5rem, 1.2vw, .9rem);
    }

    /* Lokasi */
    .hdlg-place {
      letter-spacing: .14em;
      font-size: clamp(.8rem, 2.2vw, 1rem);
      color: rgba(42,37,32,.55);
      text-shadow: 0 2px 8px rgba(255,255,255,.6);
      margin-top: clamp(.15rem, .4vw, .3rem);
      font-family: "Cormorant Garamond", serif;
      font-style: italic;
    }

    /* ── Prayer panel — tanpa kotak, transparan seperti intro ── */
    .jdialog.hero-prayer {
      background: none;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      text-align: center;
      width: min(88%, 780px) !important;
      padding: 0;
    }

    /* Ikon emas prayer */
    .hdlg-prayer-ring {
      width: clamp(60px, 10vw, 110px);
      margin: 0 auto clamp(.3rem, .8vw, .7rem);
    }
    .hdlg-prayer-ring img {
      width: 100%;
      height: auto;
      animation: floatOrn 8s ease-in-out infinite;
    }

    /* Bismillah */
    .hdlg-bismillah {
      font-family: "Cinzel", serif;
      text-transform: uppercase;
      letter-spacing: .14em;
      color: var(--gold);
      font-size: clamp(.78rem, 2.2vw, .98rem);
      display: inline-flex;
      align-items: center;
      gap: .7rem;
      margin-bottom: clamp(.5rem, 1vw, .9rem);
      text-shadow: 0 2px 10px rgba(255,255,255,.7);
    }
    .hdlg-bismillah::before,
    .hdlg-bismillah::after {
      content: "";
      width: clamp(20px, 4vw, 52px);
      height: 1px;
      background: linear-gradient(90deg, transparent, #c49f64, transparent);
    }

    /* Assalamualaikum */
    .hdlg-salam {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(1rem, 2.4vw, 1.5rem);
      line-height: 1.22;
      color: rgba(20,15,10,.88);
      text-shadow: 0 2px 12px rgba(255,255,255,.75);
      margin: 0;
    }

    /* Isi doa */
    .hdlg-text {
      font-family: "Cormorant Garamond", serif;
      font-size: clamp(.9rem, 2vw, 1.24rem);
      line-height: 1.28;
      color: rgba(20,15,10,.78);
      text-shadow: 0 2px 10px rgba(255,255,255,.7);
      margin-top: clamp(.4rem, 1vw, .8rem);
    }

    /* ── Mobile tuning dialog hero ── */
    @media (max-width: 767px) {
      .jdialog.hero-intro  { width: min(96%, 460px) !important; }
      .jdialog.hero-prayer { width: min(92%, 420px) !important; }

      /* Intro — turunkan dari ~4.7rem max ke ~3.2rem, vw lebih kecil */
      .hdlg-eyebrow  { font-size: clamp(.68rem, 2.6vw, .88rem); }
      .hdlg-names    { font-size: clamp(3rem, 13vw, 4.8rem); }
      .hdlg-date     { font-size: clamp(.82rem, 3vw, 1rem); }
      .hdlg-place    { font-size: clamp(.88rem, 3.2vw, 1.05rem); }

      /* Prayer — lebih compact */
      .hdlg-prayer-ring { width: clamp(44px, 9vw, 64px); }
      .hdlg-bismillah { font-size: clamp(.7rem, 2.5vw, .88rem); }
      .hdlg-salam    { font-size: clamp(.96rem, 3.4vw, 1.2rem); }
      .hdlg-text     { font-size: clamp(.88rem, 3vw, 1.08rem); }
    }

    /* Tablet tuning */
    @media (min-width: 768px) and (max-width: 1023px) {
      .hdlg-names    { font-size: clamp(3.2rem, 8vw, 5.2rem); }
      .hdlg-bismillah { font-size: clamp(.78rem, 1.6vw, .9rem); }
      .hdlg-salam    { font-size: clamp(1.1rem, 2.2vw, 1.4rem); }
      .hdlg-text     { font-size: clamp(1rem, 1.9vw, 1.2rem); }
    }

    /* UI */
    /* ── Progress pill — bottom center, frosted glass konsisten dengan tombol lain ── */
    #progressOrn {
      position: fixed;
      bottom: clamp(20px, 4vh, 36px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 99;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 16px;
      border-radius: 999px;
      border: 1px solid rgba(176,138,79,.45);
      background: rgba(255,255,255,.94);
      box-shadow: 0 4px 16px rgba(0,0,0,.12);
      pointer-events: none;
      opacity: 0;
      transition: opacity .5s ease;
    }
    #progressOrn.show { opacity: 1; }

    /* Garis di dalam pill */
    .porn-track {
      width: clamp(80px, 22vw, 140px);
      height: 2px;
      background: rgba(176,138,79,.2);
      border-radius: 999px;
      overflow: hidden;
    }
    .porn-fill {
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, #b08a4f, #d4a855);
      border-radius: inherit;
    }
    /* Angka persen */
    .porn-pct {
      font-family: "Cinzel", serif;
      font-size: clamp(.58rem, 1.2vw, .68rem);
      letter-spacing: .12em;
      color: var(--ink);
      line-height: 1;
      min-width: 2.6em;
      text-align: left;
      flex-shrink: 0;
    }
    .scroll-hint {
      position:fixed; bottom:calc(20px + env(safe-area-inset-bottom,0px)); left:50%; transform:translateX(-50%);
      z-index:99; display:flex; flex-direction:column; align-items:center; gap:6px;
      font-family:"Cinzel",serif; font-size:clamp(.7rem,2.4vw,.84rem); letter-spacing:.18em; text-transform:uppercase; color:#666;
    }
    .hint-line { width:1px; height:36px; background:linear-gradient(to bottom,var(--gold),transparent); animation:hintPulse 1.8s ease-in-out infinite; }
    @keyframes hintPulse { 0%,100%{opacity:.7;transform:scaleY(1)} 50%{opacity:.3;transform:scaleY(.5)} }
    .btn-continue {
      position:fixed; bottom:clamp(42px,8vh,88px); left:50%; transform:translateX(-50%) translateY(0);
      z-index:99; padding:var(--journey-btn-pad-y) var(--journey-btn-pad-x); border-radius:999px;
      border:1px solid rgba(176,138,79,.6); background:rgba(255,255,255,.94);
      font-family:"Cinzel",serif; font-size:var(--journey-btn-font-size);
      letter-spacing:.16em; text-transform:uppercase; color:var(--ink);
      cursor:pointer; opacity:0; pointer-events:none;
      box-shadow:0 10px 24px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.64) inset;
      transition:opacity .45s, background .25s, box-shadow .25s, transform .25s;
      /* display:none setelah fade-out via transitionend di JS */
    }
    .btn-continue:hover {
      background:rgba(255,255,255,.93);
      box-shadow:0 14px 30px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.7) inset;
    }
    .btn-continue.show  {
      opacity:1; pointer-events:auto;
      animation:btnContinueFloat 2.4s ease-in-out infinite;
    }
    .btn-continue.show:hover {
      animation-play-state:paused;
      transform:translateX(-50%) translateY(-5px);
    }
    @keyframes btnContinueFloat {
      0%,100% {
        transform:translateX(-50%) translateY(0);
        box-shadow:0 10px 24px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.64) inset;
      }
      50% {
        transform:translateX(-50%) translateY(-6px);
        box-shadow:0 16px 30px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.68) inset;
      }
    }

    /* Tombol scroll ke atas — pojok kanan bawah, selalu di atas btn-down */
    .btn-top {
      position:fixed;
      bottom:clamp(72px,12vh,90px);
      right:clamp(16px,3vw,28px);
      z-index:99;
      width:42px; height:42px;
      border-radius:50%;
      border:1px solid rgba(176,138,79,.5);
      background:rgba(255,255,255,.94);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity .4s, background .25s;
      box-shadow: 0 2px 12px rgba(0,0,0,.10);
    }
    .btn-top:hover { background:rgba(255,255,255,1); }
    .btn-top.show  { opacity:1; pointer-events:auto; }
    /* Arrow up icon */
    .btn-top::before {
      content:'';
      display:block;
      width:10px; height:10px;
      border-top:1.5px solid var(--gold);
      border-right:1.5px solid var(--gold);
      transform:rotate(-45deg) translateY(2px);
    }

    .btn-down {
      position:fixed;
      bottom:clamp(20px,4vh,36px);
      right:clamp(16px,3vw,28px);
      z-index:99;
      width:42px; height:42px;
      border-radius:50%;
      border:1px solid rgba(176,138,79,.5);
      background:rgba(255,255,255,.94);
      cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none;
      transition:opacity .4s, background .25s;
      box-shadow: 0 2px 12px rgba(0,0,0,.10);
    }
    .btn-down:hover { background:rgba(255,255,255,1); }
    .btn-down.show  { opacity:1; pointer-events:auto; }
    .btn-down::before {
      content:'';
      display:block;
      width:10px; height:10px;
      border-bottom:1.5px solid var(--gold);
      border-right:1.5px solid var(--gold);
      transform:rotate(45deg) translateY(-2px);
    }

    .btn-music {
      position:fixed;
      right:var(--music-btn-right);
      top:calc(var(--music-btn-top) + env(safe-area-inset-top,0px));
      z-index:1200;
      width:var(--music-btn-size);
      height:var(--music-btn-size);
      border-radius:999px;
      border:1px solid rgba(176,138,79,.52);
      background:rgba(255,255,255,.94);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      transition:background .25s, border-color .25s, transform .25s, box-shadow .25s;
      box-shadow:0 2px 12px rgba(0,0,0,.10);
    }
    .btn-music:hover { background:rgba(255,255,255,1); }
    .btn-music:active { transform:scale(.96); }
    .btn-music-note {
      line-height:1;
      font-size:clamp(1.05rem,2.7vw,1.22rem);
      color:#8b7a5d;
      transform:translateY(-.5px);
    }
    .btn-music.is-on {
      border-color:rgba(176,138,79,.78);
      background:rgba(248,242,231,.92);
      box-shadow:0 3px 14px rgba(0,0,0,.12);
    }
    .btn-music.is-on .btn-music-note {
      color:#7d693f;
      animation:musicPulse 1.7s ease-in-out infinite;
    }
    .btn-music.is-error {
      opacity:.55;
      filter:grayscale(.25);
      cursor:not-allowed;
      pointer-events:none;
    }

    @keyframes musicPulse {
      0%,100% { transform:translateY(-.5px) scale(1); }
      50% { transform:translateY(-.5px) scale(1.14); }
    }

    @keyframes floatFlower {
      0%,100% { transform:scale(1); }
      50% { transform:scale(1.08); }
    }
    @keyframes floatBird   { 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 50%{transform:translate3d(0,-9px,0) rotate(-1deg)} }
    @keyframes floatOrn    { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(0,-6px,0)} }
    @keyframes heroFlowerFloat {
      0%,100% { transform:translate(var(--tx), var(--ty)) rotate(var(--rot)); }
      50% { transform:translate(var(--tx), calc(var(--ty) - 10px)) rotate(calc(var(--rot) + .9deg)); }
    }
    @keyframes heroBirdFloat {
      0%,100% { transform:translateX(-50%) translateY(0) rotate(0deg); }
      50% { transform:translateX(-50%) translateY(-9px) rotate(-1deg); }
    }

    /* ═══ MAIN CONTENT ═══ */

    #main-content {
      position:fixed; inset:0;
      overflow-y:auto; overflow-x:hidden;
      z-index:200;
      opacity:0; pointer-events:none;
      transition:opacity .7s ease;
      scroll-behavior:smooth;
      --mc-accent:#8f887c;
      --mc-accent-soft:rgba(143,136,124,.34);
      --mc-border:rgba(108,105,98,.15);
      --mc-border-strong:rgba(108,105,98,.25);
      --mc-surface:rgba(255,255,255,.95);
      --mc-surface-soft:rgba(255,255,255,.85);
      --mc-shadow:rgba(56,52,44,.08);
      --gold: var(--mc-accent);
      background:#f5f4f0;
      color:#2a2520;
      font-family:"Cormorant Garamond","Garamond","Times New Roman",serif;
    }
    #main-content.mc-bg-ready {
      background:
        url('../images/bg_main_content1.webp') center center / cover no-repeat;
    }
    #main-content.show { opacity:1; pointer-events:auto; }

    /* Hide journey canvas/buttons when invite is open */
    body.invite-open #journeyCanvas { opacity:0 !important; pointer-events:none !important; }
    body.invite-open .btn-continue,
    body.invite-open .btn-down,
    body.invite-open .btn-top,
    body.invite-open .scroll-hint,
    body.invite-open #progressOrn,
    body.invite-open #jTitle {
      opacity:0 !important;
      pointer-events:none !important;
    }
    /* Boot class to prevent refresh flash before JS restores body.invite-open */
    html.invite-open-boot #main-content {
      opacity:1 !important;
      pointer-events:auto !important;
    }
    html.invite-open-boot #heroCanvas,
    html.invite-open-boot #journeyCanvas,
    html.invite-open-boot .btn-continue,
    html.invite-open-boot .btn-down,
    html.invite-open-boot .btn-top,
    html.invite-open-boot .scroll-hint,
    html.invite-open-boot #progressOrn,
    html.invite-open-boot #jTitle,
    html.invite-open-boot #jHint,
    html.invite-open-boot #jDots {
      opacity:0 !important;
      pointer-events:none !important;
    }
    html.journey-open-boot #main-content {
      opacity:0 !important;
      pointer-events:none !important;
    }
    html.journey-open-boot #heroCanvas {
      opacity:0 !important;
      pointer-events:none !important;
    }
    html.journey-open-boot #journeyCanvas {
      opacity:1 !important;
      pointer-events:auto !important;
    }
    html.journey-open-boot .btn-continue,
    html.journey-open-boot .btn-down,
    html.journey-open-boot .btn-top,
    html.journey-open-boot .scroll-hint,
    html.journey-open-boot #jHint,
    html.journey-open-boot #jDots {
      opacity:0 !important;
      pointer-events:none !important;
    }
    html.scene-boot #heroCanvas,
    html.scene-boot #journeyCanvas,
    html.scene-boot #progressOrn,
    html.scene-boot .scroll-hint,
    html.scene-boot .btn-continue,
    html.scene-boot .btn-down,
    html.scene-boot .btn-top,
    html.scene-boot #jTitle,
    html.scene-boot #jHint,
    html.scene-boot #jDots {
      opacity:0 !important;
      pointer-events:none !important;
    }
    html.scene-boot.invite-open-boot #main-content {
      opacity:1 !important;
      pointer-events:auto !important;
    }

    /* Keep card visible by default; reveal animation handled by .mc-reveal */
    .mc-card {
      opacity:1;
      transform:none;
      transition:opacity 700ms cubic-bezier(.19,1,.22,1), transform 700ms cubic-bezier(.19,1,.22,1);
    }
    .mc-card.show { opacity:1; transform:none; }

    /* NAV — sticky di dalam scroll container */
    .mc-nav {
      position:fixed;
      top:0; left:0; right:0;
      z-index:30;
      pointer-events:none;
      padding:
        calc(clamp(8px,1.5vh,14px) + env(safe-area-inset-top,0px))
        clamp(16px,4vw,40px)
        clamp(8px,1.5vh,14px);
      background: transparent;
      backdrop-filter: none;
    }
    .mc-back-btn {
      pointer-events:auto;
      display:inline-flex; align-items:center; gap:.45em;
      font-family:"Cinzel",serif; font-size:clamp(.72rem,.8vw,.92rem);
      text-transform:uppercase; letter-spacing:.16em;
      color:#6b5d46;
      background: rgba(255,252,244,.85);
      border: 1px solid var(--mc-border-strong);
      border-radius:999px;
      padding:.55em 1.3em;
      backdrop-filter:blur(8px);
      cursor:pointer;
      transition: background .25s, border-color .25s, box-shadow .25s;
      box-shadow: 0 2px 12px rgba(100,80,30,.10);
    }
    .mc-back-btn:hover {
      background:rgba(255,252,244,.97);
      border-color:var(--mc-border-strong);
      box-shadow: 0 4px 20px rgba(100,80,30,.16);
    }

    /* MAIN wrapper */
    .mc-main {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 clamp(20px,5vw,48px) clamp(60px,10vh,100px);
    }
    @media (min-width:1024px) {
      .mc-main { max-width: 1200px; }
    }
    @media (min-width:1400px) {
      .mc-main { max-width: 1400px; }
    }

    /* mc-card-inner — passthrough, no 2-col layout */
    .mc-card-inner { width: 100%; }
    .mc-card-label-col { display: contents; }
    .mc-card-content-col { display: contents; }

    /* Section card */
    .mc-card {
      padding: clamp(48px,7vh,80px) 0;
    }
    /* Section 1 cover */
    #mc1 {
      padding: 0 0 clamp(56px,8vh,92px);
    }
    .mc-intro-cover {
      position: relative;
      min-height: 100svh;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      border-radius: 0;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(12,11,10,.32), rgba(10,9,8,.44)),
        radial-gradient(ellipse 120% 68% at 50% -8%, rgba(255,220,162,.12), transparent 65%),
        url('../images/bg_main_content2.webp') top center / cover no-repeat;
      box-shadow: none;
      display: grid;
      place-items: center;
      padding: clamp(28px, 6vh, 64px) clamp(20px, 5vw, 56px);
    }
    @media (min-width: 768px) {
      .mc-intro-cover {
        background:
          linear-gradient(180deg, rgba(12,11,10,.32), rgba(10,9,8,.44)),
          radial-gradient(ellipse 120% 68% at 50% -8%, rgba(255,220,162,.12), transparent 65%),
          url('../images/bg_main_content21.webp') top center / cover no-repeat;
      }
    }
    .mc-intro-cover::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse 72% 46% at 50% 42%, rgba(255,255,255,.10), transparent 74%),
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.22));
    }
    .mc-intro-cover-inner {
      position: relative;
      z-index: 1;
      width: min(900px, 96%);
      text-align: center;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #mc1 .mc-intro-cover .mc-ornament { margin-bottom: clamp(18px,3vh,32px); }
    #mc1 .mc-intro-cover .mc-orn-line {
      background: linear-gradient(90deg, transparent, rgba(241,228,201,.62), transparent);
    }
    #mc1 .mc-intro-cover .mc-orn-diamond {
      color: #e0c28e;
      opacity: .92;
    }
    #mc1 .mc-intro-cover .mc-section-title {
      color: #f8f5ef;
      text-shadow: 0 8px 26px rgba(0,0,0,.40);
    }
    #mc1 .mc-intro-cover .mc-lead {
      max-width: 58ch;
      color: rgba(248,245,239,.86);
      text-shadow: 0 6px 20px rgba(0,0,0,.36);
    }
    #mc1 .mc-intro-cover .mc-names-block { margin: clamp(22px,4vh,44px) 0 0; }
    #mc1 .mc-intro-cover .mc-name {
      color: #f8f5ef;
      text-shadow: 0 10px 30px rgba(0,0,0,.45);
      margin: 0;
    }
    #mc1 .mc-intro-cover .mc-name-amp {
      color: #d6b06a;
      text-shadow: 0 6px 18px rgba(0,0,0,.34);
    }
    .mc1-event-wrap {
      width: 100vw;
      margin-top: 0;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      position: relative;
      overflow: hidden;
      border-radius: 0;
      padding: clamp(22px, 3.4vw, 34px) clamp(18px, 4.2vw, 40px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      background: none;
      box-shadow: none;
    }
    #mc1 .mc1-event-wrap .mc-event-card {
      width: min(940px, 100%);
      margin-left: auto;
      margin-right: auto;
      background: rgba(255,255,255,.64);
      border-color: rgba(143,136,124,.34);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
    }
    .mc1-intro-copy {
      width: min(760px, 100%);
      margin: clamp(12px, 1.8vh, 24px) auto clamp(20px, 3vh, 34px);
      text-align: center;
    }
    #mc1 .mc1-title-frame {
      width: min(560px, 92%);
      margin: clamp(2px, .8vh, 10px) auto clamp(16px, 2.2vh, 26px);
      padding: clamp(7px, .9vw, 10px);
      position: relative;
      background: linear-gradient(145deg, rgba(215,188,132,.92), rgba(176,138,79,.9));
      border-radius: 6px;
      box-shadow:
        0 8px 26px rgba(56,52,44,.14),
        0 1px 0 rgba(255,255,255,.45) inset;
    }
    #mc1 .mc1-title-frame::before {
      content: '';
      position: absolute;
      inset: clamp(4px, .6vw, 6px);
      border: 1px solid rgba(255,246,227,.58);
      border-radius: 4px;
      pointer-events: none;
    }
    #mc1 .mc1-title-frame-inner {
      display: block;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 3px;
      border: 1px solid rgba(255,255,255,.66);
    }
    #mc1 .mc1-title-frame img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
      filter: saturate(1.06) contrast(1.03);
      transform: scale(1.02);
    }
    #mc1 .mc1-title-frame + .mc-section-title {
      margin-top: clamp(60px, 1.8vh, 100px);
    }
    #mc1 .mc1-title-frame + .mc-section-title::before {
      content: '';
      display: block;
      width: clamp(90px, 16vw, 170px);
      height: 1px;
      margin: 0 auto clamp(12px, 1.8vh, 20px);
      background: linear-gradient(90deg, transparent, rgba(176,138,79,.82), transparent);
    }
    #mc1 .mc1-event-wrap .mc-event-card {
        margin-top: clamp(76px, 8vh, 132px);
    }
    .mc1-intro-copy .mc-lead {
      max-width: 58ch;
      margin-left: auto;
      margin-right: auto;
    }
    @media (max-width: 767px) {
      .mc1-intro-copy {
        margin: clamp(6px, 1.4vh, 12px) auto clamp(12px, 2vh, 18px);
      }
      #mc1 .mc1-title-frame {
        width: min(430px, 96%);
        margin: clamp(0px, .6vh, 6px) auto clamp(12px, 1.8vh, 18px);
        padding: clamp(6px, 1.7vw, 8px);
      }
      #mc1 .mc1-title-frame-inner {
        aspect-ratio: 15 / 10;
      }
      #mc1 .mc1-title-frame img {
        object-position: center 34%;
      }
      #mc1 .mc1-title-frame + .mc-section-title {
        margin-top: clamp(60px, 1.2vh, 80px);
      }
      #mc1 .mc1-title-frame + .mc-section-title::before {
        width: clamp(74px, 28vw, 120px);
        margin: 0 auto clamp(10px, 1.5vh, 14px);
      }
      #mc1 .mc1-event-wrap .mc-event-card {
        margin-top: clamp(20px, 4vh, 36px);
        background: rgba(255,255,255,.72);
      }
    }
    .mc-card + .mc-card {
      border-top: 1px solid var(--mc-border);
    }


    /* Ornament */
    .mc-ornament {
      display:flex; align-items:center; gap:clamp(12px,2vw,20px);
      margin-bottom: clamp(20px,3.5vh,36px);
    }
    .mc-orn-line {
      flex:1; height:1px;
      background: linear-gradient(90deg, transparent, var(--mc-accent-soft), transparent);
    }
    .mc-orn-diamond {
        font-size: clamp(10px, 1.2vw, 16px);
      color: var(--gold);
      opacity:.7;
      line-height:1;
    }

    /* Section title */
    .mc-section-title {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(2.15rem, 7.2vw, 3.2rem);
      font-weight:500; font-style:italic;
      line-height:1.1;
      color:#2a2520;
      text-align:center;
      letter-spacing:-.01em;
    }

    /* Lead text */
    .mc-lead {
      margin-top: clamp(12px,2vh,20px);
      font-size: clamp(1rem,1.9vw,1.22rem);
      line-height:1.38;
      color:rgba(58,50,38,.75);
      text-align:center;
      max-width:52ch;
      margin-left:auto; margin-right:auto;
    }

    /* Names display */
    .mc-names-block {
      display:flex; align-items:baseline;
      justify-content:center; gap:clamp(.5rem,2vw,1.4rem);
      margin: clamp(20px,3vh,36px) 0 clamp(16px,2.5vh,28px);
    }
    .mc-name {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(2.2rem,8vw,4.2rem);
      font-weight:500; font-style:italic;
      color:#2a2520; line-height:.88;
      margin: clamp(30px,1vh,50px) 0 clamp(40px,3vh,60px);
    }
    .mc-name-amp {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1.5rem,3.6vw,2.5rem);
      color: var(--gold);
      font-style:italic;
    }

    /* Event card — single block */
    .mc-event-card {
      background: var(--mc-surface);
      border: 1px solid var(--mc-border);
      border-radius: 6px;
      padding: clamp(18px,3vw,32px);
      display:flex; flex-direction:column; align-items:flex-start;
      gap:clamp(5px,.8vh,10px);
      backdrop-filter:blur(6px);
      margin-top: clamp(20px,3.5vh,36px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 4px 12px var(--mc-shadow),
        0 16px 40px rgba(56,52,44,.06);
      transition: transform .35s cubic-bezier(.19,1,.22,1),
                  box-shadow .35s cubic-bezier(.19,1,.22,1),
                  border-color .3s;
    }
    .mc-event-card:hover {
      transform: translateY(-5px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.95) inset,
        0 8px 24px rgba(56,52,44,.11),
        0 28px 56px rgba(56,52,44,.09);
      border-color: var(--mc-border-strong);
    }
    .mc-event-label {
      font-family:"Cinzel",serif;
      font-size: clamp(.75rem,.9vw,.9rem);
      text-transform:uppercase; letter-spacing:.2em;
      color: var(--mc-accent);
    }
    .mc-event-time {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1.4rem,4.2vw,2rem);
      font-style:italic; line-height:1;
      color:#2a2520;
    }
    .mc-event-divider {
      width:40px; height:1px;
      background: linear-gradient(90deg,transparent,var(--mc-accent-soft),transparent);
      margin:.3em 0;
    }
    .mc-event-detail {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(0.9rem,2.4vw,1.22rem);
      line-height:1.3; color:rgba(58,50,38,.78);
    }
    .mc-event-detail strong { font-weight:600; color:#2a2520; }
    .mc-maps-btn {
      display:inline-flex; align-items:center; gap:.4em;
      margin-top:clamp(4px,.8vh,8px);
      font-family:"Cinzel",serif;
      font-size: clamp(.74rem,1.6vw,.9rem);
      text-transform:uppercase; letter-spacing:.16em;
      color: var(--mc-accent);
      border: 1px solid var(--mc-border-strong);
      border-radius:999px;
      padding:.4em 1em;
      text-decoration:none;
      transition: background .25s, border-color .25s;
    }
    .mc-maps-btn:hover { background:rgba(255,255,255,.8); border-color:var(--mc-border-strong); }
    .mc-maps-btn svg { width:.9em; height:.9em; stroke:var(--mc-accent); fill:none; }

    /* Gift section */
    .mc-gift-grid {
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(12px,2.5vw,28px);
      margin-top: clamp(24px,4vh,40px);
    }
    @media (max-width:560px) {
      .mc-gift-grid { grid-template-columns:1fr; }
    }

    .mc-gift-card {
      background: var(--mc-surface);
      border: 1px solid var(--mc-border);
      border-radius: 6px;
      padding: clamp(18px,2.5vw,28px);
      backdrop-filter:blur(6px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 4px 12px var(--mc-shadow),
        0 16px 40px rgba(56,52,44,.06);
      transition: transform .35s cubic-bezier(.19,1,.22,1),
                  box-shadow .35s, border-color .3s;
    }
    .mc-gift-card:hover {
      transform: translateY(-4px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.95) inset,
        0 8px 24px rgba(56,52,44,.11),
        0 28px 56px rgba(56,52,44,.09);
      border-color: var(--mc-border-strong);
    }
    .mc-gift-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:clamp(8px,1.2vh,14px);
    }
    .mc-gift-bank {
      display:inline-flex;
      align-items:center;
      justify-content:flex-start;
      height: clamp(20px, 2.1vw, 32px);
      width: clamp(90px, 10vw, 138px);
      line-height:0;
    }
    .mc-gift-bank img {
      width:100%;
      height:100%;
      object-fit:contain;
      object-position:left center;
      display:block;
      filter: saturate(.95) contrast(1.02);
    }
    .mc-gift-bank-bca {
      width: clamp(94px, 10.5vw, 146px);
    }
    .mc-gift-bank-mandiri {
      width: clamp(88px, 9.2vw, 128px);
    }
    .mc-gift-icon {
      width:2em; height:2em;
      display:flex; align-items:center; justify-content:center;
      border: 1px solid var(--mc-border);
      border-radius:4px;
      background:rgba(255,255,255,.85);
    }
    .mc-gift-icon svg { width:1.1em; height:1.1em; stroke:var(--mc-accent); fill:none; }
    .mc-gift-name {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1rem,2.4vw,1.34rem);
      font-style:italic;
      color:#2a2520;
    }
    .mc-gift-divider {
      height:1px; margin: clamp(8px,1.2vh,14px) 0;
      background: linear-gradient(90deg,transparent,var(--mc-accent-soft),transparent);
    }
    .mc-gift-number-row {
      display:flex; align-items:center; gap:.6em;
      background: #ffffff;
      border:1px solid var(--mc-border);
      border-radius:3px;
      padding:.55em .8em;
      box-shadow: inset 0 3px 10px rgba(0,0,0,.12), inset 0 1px 4px rgba(0,0,0,.08);
    }
    .mc-gift-number {
      flex:1;
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(.92rem,2.5vw,1.16rem);
      letter-spacing:.04em; color:#2a2520;
    }
    .mc-gift-copy {
      flex-shrink:0;
      width:1.9em; height:1.9em;
      display:flex; align-items:center; justify-content:center;
      border-radius:3px;
      font-size:clamp(.9rem,1vw,1.08rem); color:#6f695f;
      background:transparent;
      border:none; cursor:pointer;
      transition: background .2s, color .2s;
    }
    .mc-gift-copy:hover { background:rgba(255,255,255,.82); color:var(--mc-accent); }
    .mc-gift-copy.copied { background:#2a7a5e !important; color:#fff !important; }

    /* Moment section */
    .mc-moment {
      margin-top: clamp(18px,3vh,30px);
      border: 1px solid var(--mc-border);
      border-radius: 8px;
      padding: clamp(14px,2vw,22px);
      background:
        radial-gradient(120% 120% at 8% 0%, rgba(207,187,133,.18), transparent 56%),
        radial-gradient(100% 100% at 92% 100%, rgba(176,138,79,.12), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,244,237,.96));
      box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 8px 20px rgba(56,52,44,.09);
      overflow: hidden;
    }
    .mc-moment-rows {
      display: block;
      margin-top: clamp(12px,2.2vh,18px);
    }
    .mc-moment-rows > .mc-moment-viewport + .mc-moment-viewport {
      display: none;
    }
    .mc-moment-viewport {
      margin-top: 0;
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 6px;
      contain: layout paint;
      scrollbar-width: none;
      -ms-overflow-style: none;
      touch-action: pan-x pan-y;
    }
    .mc-moment-viewport::-webkit-scrollbar { display: none; }
    .mc-moment-track {
      display: flex;
      align-items: flex-start;
      gap: clamp(12px,1.6vw,18px);
      width: max-content;
      padding: clamp(8px,1.2vw,12px) 2px;
    }
    .mc-moment-card {
      flex: 0 0 clamp(170px,22vw,240px);
      background: #fff;
      border: 1px solid rgba(108,105,98,.2);
      border-radius: 4px;
      padding: clamp(8px,1vw,10px) clamp(8px,1vw,10px) clamp(14px,1.8vw,18px);
      box-shadow:
        0 12px 24px rgba(56,52,44,.13),
        0 2px 0 rgba(255,255,255,.95) inset;
      transform-origin: center top;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .mc-moment-card:hover {
      transform: translateY(-4px) rotate(0deg);
      box-shadow:
        0 18px 30px rgba(56,52,44,.16),
        0 2px 0 rgba(255,255,255,.95) inset;
    }
    .mc-moment-card:nth-child(6n+1) { transform: rotate(-3deg); }
    .mc-moment-card:nth-child(6n+2) { transform: rotate(2.2deg); }
    .mc-moment-card:nth-child(6n+3) { transform: rotate(-1.4deg); }
    .mc-moment-card:nth-child(6n+4) { transform: rotate(1.8deg); }
    .mc-moment-card:nth-child(6n+5) { transform: rotate(-2.4deg); }
    .mc-moment-card:nth-child(6n+6) { transform: rotate(1.1deg); }
    .mc-moment-card img {
      width: 100%;
      aspect-ratio: 3 / 4;
      object-fit: cover;
      border-radius: 2px;
      background: #ebe6dc;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
    }

    /* Comment section */
    .mc-comment-form {
      display:flex; flex-direction:column; gap:clamp(8px,1.2vh,14px);
      margin-top: clamp(20px,3.5vh,36px);
      background: var(--mc-surface);
      border: 1px solid var(--mc-border);
      border-radius: 6px;
      padding: clamp(14px,2.2vw,24px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.9) inset,
        0 4px 12px var(--mc-shadow);
    }
    .mc-input {
      width:100%;
      background:#ffffff;
      border:1px solid var(--mc-border);
      border-radius:4px;
      padding: .65em .8em;
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1rem,2.5vw,1.12rem);
      color:#2a2520;
      outline:none;
      transition: border-color .25s;
      letter-spacing:.02em;
      box-shadow: inset 0 3px 10px rgba(0,0,0,.12), inset 0 1px 4px rgba(0,0,0,.08);
    }
    .mc-input::placeholder { color:rgba(110,105,95,.5); }
    .mc-input:focus { border-color: var(--mc-border-strong); }

    .mc-textarea {
      width:100%; min-height: clamp(100px,14vh,140px); resize:vertical;
      background: #ffffff;
      border: 1px solid var(--mc-border);
      border-radius:4px;
      padding: .8em 1em;
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1rem,2.5vw,1.12rem);
      color:#2a2520; line-height:1.55;
      outline:none;
      transition: border-color .25s;
      box-shadow: inset 0 3px 10px rgba(0,0,0,.12), inset 0 1px 4px rgba(0,0,0,.08);
    }
    .mc-textarea::placeholder { color:rgba(110,105,95,.5); }
    .mc-textarea:focus { border-color:var(--mc-border-strong); }

    .mc-submit-btn {
      align-self:flex-start;
      font-family:"Cinzel",serif;
      font-size: clamp(.74rem,1.5vw,.9rem);
      text-transform:uppercase; letter-spacing:.2em;
      color:#5a554d;
      background: rgba(255,255,255,.92);
      border:1px solid var(--mc-border-strong);
      border-radius:999px;
      padding:.85em 2.4em;
      cursor:pointer;
      transition: background .25s;
      box-shadow: 0 3px 10px rgba(56,52,44,.12);
    }
    .mc-submit-btn:hover { background:#ffffff; border-color:var(--mc-border-strong); }

    @media (max-width: 767px) {
      .mc-moment-rows {
        display: grid;
        gap: clamp(10px,1.8vh,16px);
      }
      .mc-moment-rows > .mc-moment-viewport + .mc-moment-viewport {
        display: block;
      }
      .mc-moment-track {
        display: flex;
        align-items: flex-start;
        gap: clamp(10px,2.8vw,14px);
      }
      .mc-moment-card {
        flex: 0 0 clamp(132px, 42vw, 176px);
        padding: clamp(7px,1.8vw,9px) clamp(7px,1.8vw,9px) clamp(12px,2.6vw,16px);
        box-shadow:
          0 6px 14px rgba(56,52,44,.11),
          0 1px 0 rgba(255,255,255,.95) inset;
      }
    }

    .mc-comment-list {
      margin-top: clamp(20px,3vh,32px);
      min-height: clamp(180px,22vh,280px);
      background: rgba(255,255,255,.95);
      border: 1px solid var(--mc-border);
      border-radius: 6px;
      padding: clamp(16px,2.5vw,28px);
      box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 4px 16px var(--mc-shadow);
    }
    .mc-comment-empty {
      padding-top:clamp(24px,5vh,48px);
      text-align:center;
      font-family:"Cinzel",serif;
      font-size: clamp(.74rem,1.5vw,.9rem);
      text-transform:uppercase; letter-spacing:.12em;
      color:rgba(110,105,95,.45);
    }
    .mc-comment-pager {
      margin-top: clamp(10px, 1.6vh, 16px);
      display:none;
      align-items:center;
      justify-content:center;
      gap: clamp(8px, 1.5vw, 12px);
    }
    .mc-comment-page-btn {
      border:1px solid var(--mc-border);
      background:rgba(255,255,255,.92);
      color:#5a554d;
      border-radius:999px;
      padding:.5em 1.2em;
      font-family:"Cinzel",serif;
      font-size: clamp(.64rem, 1.25vw, .78rem);
      letter-spacing:.1em;
      text-transform:uppercase;
      cursor:pointer;
      transition: background .2s ease, border-color .2s ease, opacity .2s ease;
    }
    .mc-comment-page-btn:hover {
      background:#fff;
      border-color:var(--mc-border-strong);
    }
    .mc-comment-page-btn:disabled {
      opacity:.42;
      cursor:default;
    }
    .mc-comment-page-info {
      font-family:"Cinzel",serif;
      font-size: clamp(.62rem, 1.2vw, .76rem);
      letter-spacing:.12em;
      text-transform:uppercase;
      color:rgba(90,85,77,.7);
      min-width: 10.5em;
      text-align:center;
    }

    /* comment-bubble — JS-generated */
    .comment-bubble {
      position:relative;
      padding:.85rem 0 .85rem 1.6rem;
      border-bottom:1px solid rgba(108,105,98,.14);
      animation:fadeUp 500ms cubic-bezier(.19,1,.22,1) both;
    }
    .comment-bubble:last-child { border-bottom:none; }
    .comment-bubble::before {
      content:'';
      position:absolute; left:.1rem; top:1.3rem;
      width:5px; height:5px; border-radius:50%;
      background: var(--mc-accent);
      box-shadow: 9px 0 0 rgba(143,136,124,.35);
    }
    .comment-bubble-name {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1rem,2.4vw,1.14rem);
      font-weight:700; letter-spacing:.05em;
      text-transform:capitalize; color:#2a2520;
      margin-bottom:.15rem;
    }
    .comment-bubble-date {
      font-family:"Cinzel",serif;
      font-size: clamp(.5rem,1.4vw,.82rem);
      letter-spacing:.08em; text-transform:uppercase;
      color:rgba(110,105,95,.62);
      margin-bottom:.3rem;
    }
    .comment-bubble-text {
      font-family:"Cormorant Garamond",serif;
      font-size: clamp(1.02rem,2.5vw,1.14rem);
      line-height:1.55; color:rgba(42,37,32,.85);
    }

    @keyframes fadeUp {
      from { opacity:0; transform:translateY(10px); }
      to   { opacity:1; transform:none; }
    }

    /* ── Scroll reveal — elemen masuk satu per satu ── */
    .mc-reveal {
      opacity:0;
      transform:translateY(22px);
      transition: opacity 700ms cubic-bezier(.19,1,.22,1),
                  transform 700ms cubic-bezier(.19,1,.22,1);
    }
    .mc-reveal.visible { opacity:1; transform:translateY(0); }

    /* stagger delay untuk child elements */
    .mc-reveal:nth-child(1) { transition-delay: 0ms; }
    .mc-reveal:nth-child(2) { transition-delay: 80ms; }
    .mc-reveal:nth-child(3) { transition-delay: 160ms; }
    .mc-reveal:nth-child(4) { transition-delay: 240ms; }
    .mc-reveal:nth-child(5) { transition-delay: 320ms; }

    /* ── Names — subtle float animasi saat visible ── */
    .mc-name {
      display:inline-block;
      transition: transform .4s cubic-bezier(.19,1,.22,1), color .3s;
    }
    .mc-names-block:hover .mc-name { transform:translateY(-3px); }
    .mc-names-block:hover .mc-name-amp {
      transform:scale(1.15);
      display:inline-block;
      transition: transform .4s cubic-bezier(.19,1,.22,1);
    }

    /* ── Ornament line — tumbuh dari tengah saat section visible ── */
    @keyframes ornLineGrow {
      from { transform:scaleX(0); opacity:0; }
      to   { transform:scaleX(1); opacity:1; }
    }
    .mc-card.show .mc-orn-line {
      animation: ornLineGrow 800ms cubic-bezier(.19,1,.22,1) both;
    }
    .mc-card.show .mc-orn-line:first-child { animation-delay:100ms; }
    .mc-card.show .mc-orn-line:last-child  { animation-delay:200ms; }
    .mc-orn-line { transform-origin:center; }

    /* ── Diamond spin saat card muncul ── */
    @keyframes diamondSpin {
      from { opacity:0; transform:rotate(-90deg) scale(.4); }
      to   { opacity:.7; transform:rotate(0deg) scale(1); }
    }
    .mc-card.show .mc-orn-diamond {
      animation: diamondSpin 600ms cubic-bezier(.19,1,.22,1) 50ms both;
    }

    /* ── Section title — slide up per kata ── */
    @keyframes titleReveal {
      from { opacity:0; transform:translateY(16px); }
      to   { opacity:1; transform:translateY(0); }
    }
    .mc-card.show .mc-section-title {
      animation: titleReveal 800ms cubic-bezier(.19,1,.22,1) 150ms both;
    }

    /* ── Event card — hover lift ── */
    .mc-event-card {
      transition: transform .35s cubic-bezier(.19,1,.22,1),
                  box-shadow .35s cubic-bezier(.19,1,.22,1),
                  border-color .3s;
    }
    .mc-event-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 36px rgba(56,52,44,.10);
      border-color: var(--mc-border-strong);
    }

    /* ── Event divider — tumbuh saat hover ── */
    .mc-event-divider {
      transition: width .4s cubic-bezier(.19,1,.22,1), opacity .3s;
    }
    .mc-event-card:hover .mc-event-divider { width: 80px; }

    /* ── Maps btn — lebih dramatis ── */
    .mc-maps-btn {
      transition: background .25s, border-color .25s,
                  transform .3s cubic-bezier(.19,1,.22,1),
                  box-shadow .3s, letter-spacing .3s;
    }
    .mc-maps-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(56,52,44,.14);
      letter-spacing: .22em;
    }

    /* ── Gift card — hover lift + border glow ── */
    .mc-gift-card {
      transition: transform .35s cubic-bezier(.19,1,.22,1),
                  box-shadow .35s, border-color .3s;
    }
    .mc-gift-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 32px rgba(56,52,44,.10);
      border-color: var(--mc-border-strong);
    }

    /* ── Gift number row — reveal copy btn on hover ── */
    .mc-gift-copy {
      opacity: .5;
      transition: opacity .2s, background .2s, color .2s, transform .2s;
    }
    .mc-gift-number-row:hover .mc-gift-copy { opacity:1; }
    .mc-gift-copy:hover { transform:scale(1.15); }

    /* ── Submit btn — pulse glow on hover ── */
    .mc-submit-btn {
      transition: background .25s, transform .3s cubic-bezier(.19,1,.22,1),
                  box-shadow .3s, letter-spacing .3s;
    }
    .mc-submit-btn:hover {
      background: #ffffff;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(56,52,44,.16);
      letter-spacing: .24em;
    }
    .mc-submit-btn:active { transform:translateY(0); box-shadow:none; }

    /* ── Back btn — arrow slide ── */
    .mc-back-btn svg {
      transition: transform .3s cubic-bezier(.19,1,.22,1);
    }
    .mc-back-btn:hover svg { transform: translateX(-3px); }

    /* ── Comment bubble — hover highlight ── */
    .comment-bubble {
      transition: background .25s, padding-left .3s cubic-bezier(.19,1,.22,1);
    }
    .comment-bubble:hover {
      background: rgba(110,105,95,.05);
      padding-left: 1.9rem;
    }

    /* ── Section border divider — grow on card reveal ── */
    @keyframes dividerGrow {
      from { transform:scaleX(0); opacity:0; }
      to   { transform:scaleX(1); opacity:1; }
    }
    .mc-card + .mc-card {
      border-top: none;
      position:relative;
    }
    .mc-card + .mc-card::before {
      content:'';
      position:absolute; top:0; left:10%; right:10%;
      height:1px;
      background: linear-gradient(90deg, transparent, rgba(143,136,124,.3), transparent);
      transform-origin:center;
    }
    .mc-card.show + .mc-card.show::before {
      animation: dividerGrow 900ms cubic-bezier(.19,1,.22,1) 300ms both;
    }

    .mc-gift-copy.copied { background:#2a7a5e !important; color:#fff !important; }

    /* ═══════════════════════════════════════════════════
       JOURNEY SCENE
    ═══════════════════════════════════════════════════ */
    #journeyCanvas {
      position:fixed; inset:0; width:100vw; height:100vh;
      overflow:hidden; z-index:9; opacity:0; pointer-events:none;
      /* touch-action dihapus — Lenis butuh touch events diteruskan */
      transition: none;
    }
    #journeyCanvas.active { pointer-events:auto; }

    /* Each chapter — stacked, JS drives opacity */
    .jchapter {
      position:absolute; inset:0; opacity:0;
      /* will-change dikelola JS secara dinamis — hanya aktif saat chapter
         visible. Static will-change di sini menyebabkan GPU layer
         teralokasi bahkan saat chapter opacity:0. */
      contain: paint;
      isolation: isolate;
    }

    /*
      BACKGROUND — the key piece.
      We use a <div> with background-image + background-size + background-position.
      This means zoom is done by changing background-size (e.g. "150%"),
      and pan by changing background-position (e.g. "30% 70%").
      background-size never goes below "cover" equivalent so edges NEVER show.
      overflow:hidden on parent clips everything.
    */
    .jbg {
      position:absolute; inset:0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      /* will-change dikelola JS secara dinamis — hanya aktif saat chapter visible */
    }

    /* Foreground — WEBP with transparency, sits above bg */
    .jfg {
      position:absolute;
      bottom:0; left:50%;
      transform: translateX(-50%);
      height:105%;
      object-fit:contain;
      object-position:bottom center;
      /* will-change dikelola JS secara dinamis */
      pointer-events:none;
    }

    /* Chapter 4 uses Hero assets (without hero text) */
    #jch4 .jhero-flowers {
      position:absolute;
      inset:0;
      z-index:5;
      pointer-events:none;
    }
    #jch4bg {
      background-image: linear-gradient(160deg, #fffefb 0%, #fdf8f0 52%, #f7eee1 100%);
      background-size: cover;
      background-position: center center;
    }
    #jch4bg::after {
      display:none;
    }
    #jch4 .jhero-flower {
      position:absolute;
      height:auto;
      animation: none !important;
      /* will-change dikelola JS secara dinamis */
      filter: var(--hero-flower-shadow);
    }
    #jch4 .jhero-flower-tl {
      top:0; left:0;
      width:clamp(190px, 22vw, 320px);
      transform-origin:top left;
    }
    #jch4 .jhero-flower-tr {
      top:0; right:0;
      width:clamp(130px, 15vw, 220px);
      transform-origin:top right;
      animation-duration:9.2s;
      animation-delay:-1.2s;
    }
    #jch4 .jhero-flower-bl {
      bottom:0; left:0;
      width:clamp(130px, 15vw, 220px);
      transform-origin:bottom left;
      animation-duration:9.2s;
      animation-delay:-1.2s;
    }
    #jch4 .jhero-flower-br {
      bottom:0; right:0;
      width:clamp(190px, 22vw, 320px);
      transform-origin:bottom right;
      animation-delay:-.45s;
    }
    #jch4fg {
      z-index:8;
    }
    #jch4fg2.jfg-birds {
      z-index:7;
      animation: none !important;
      width:clamp(280px, 44vw, 660px);
      height:auto;
      bottom:clamp(16px, 4.2vh, 52px);
      object-fit:contain;
      object-position:center;
      filter:var(--hero-bird-shadow) contrast(1.04) brightness(.96);
      opacity:.98;
    }

    /* Vignette dihapus — tidak pakai layer hitam */
    .jvignette { display:none; }

    /* ── Dialog box — per movement, positioned via JS from CONFIG ── */
    .jdialog {
      position:absolute; z-index:10;
      pointer-events:none;
      /* will-change dikelola GSAP via applyPlacedFg — tidak perlu static */
      width: var(--journey-dialog-width);
      max-width: calc(100vw - 24px);
      background: rgba(255,255,255,0.72);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.55);
      border-radius: 6px;
      padding: var(--journey-dialog-pad-y) var(--journey-dialog-pad-x);
      box-shadow:
        0 16px 40px rgba(0,0,0,.20),
        0 4px 14px rgba(0,0,0,.10),
        0 1px 0 rgba(255,255,255,.55) inset;
    }
    .jdialog-label {
      font-family:"Cinzel",serif; text-transform:uppercase;
      letter-spacing:.2em; font-size:clamp(.44rem,.6vw,.62rem);
      color:rgba(80,65,40,0.65); margin-bottom:clamp(4px,.8vw,8px);
    }
    .jdialog-text {
      font-family:"Cormorant Garamond","Garamond",serif;
      font-size:var(--journey-dialog-size); line-height:1.55;
      color:rgba(20,15,10,0.88); font-style:italic;
      overflow-wrap:anywhere;
    }
    .jdialog-date {
      font-family:"Cinzel",serif; font-size:var(--journey-dialog-date-size);
      letter-spacing:.18em; color:var(--gold);
      margin-top:clamp(5px,.8vw,9px);
    }

    /* Chapter nav dots */
    #jDots {
      position:fixed; right:clamp(10px,2vw,20px); top:50%;
      transform:translateY(-50%); z-index:20;
      display:flex; flex-direction:column; gap:7px;
      opacity:0; transition:opacity .4s;
    }
    #jDots.show { opacity:1; }
    .jdot {
      width:6px; height:6px; border-radius:50%;
      background:rgba(255,255,255,.3);
      border:1px solid rgba(255,255,255,.45);
      transition:background .3s,transform .3s;
    }
    .jdot.active { background:rgba(255,210,100,.9); transform:scale(1.5); }

    /* Journey scroll hint — white version */
    #jHint {
      position:fixed; bottom:calc(18px + env(safe-area-inset-bottom,0px));
      left:50%; transform:translateX(-50%); z-index:20;
      display:flex; flex-direction:column; align-items:center; gap:5px;
      font-family:"Cinzel",serif; font-size:clamp(.68rem,2.2vw,.82rem); letter-spacing:.18em;
      text-transform:uppercase; color:rgba(255,255,255,.6);
      opacity:0; transition:opacity .4s;
    }

    /* Mobile tuning: loader */
    @media (max-width: 767px) {
      #appLoader {
        --ldr-copy-y: clamp(36svh, 40svh, 44svh);
        --ldr-enter-y: clamp(66svh, 70svh, 74svh);
      }
      .ldr-eyebrow  { font-size:clamp(.62rem,2.6vw,.78rem); }
      .ldr-char     { font-size:clamp(3rem,13vw,4.8rem); }
      .ldr-name-amp { font-size:clamp(1.2rem,4.8vw,1.8rem); }
      .ldr-date     { font-size:clamp(.68rem,2.6vw,.86rem); }
      .ldr-status   { font-size:clamp(.66rem,2.6vw,.8rem); color:rgba(42,37,32,.65); }
      .ldr-enter-btn  { width:clamp(104px,26vw,124px); }
      .ldr-enter-label { font-size:clamp(.82rem,3.4vw,1rem); }

      #jch4 .jhero-flower-tl,
      #jch4 .jhero-flower-br {
        width:clamp(210px, 42vw, 340px);
      }
      #jch4 .jhero-flower-tr,
      #jch4 .jhero-flower-bl {
        width:clamp(170px, 34vw, 280px);
      }
      #jch4fg2.jfg-birds {
        width:clamp(300px, 88vw, 540px);
        bottom:clamp(10px, 2.4vh, 24px);
      }
    }

    /* Tablet tuning */
    @media (min-width: 768px) and (max-width: 1023px) {
      #appLoader {
        --ldr-copy-y: clamp(30svh, 35svh, 39svh);
        --ldr-enter-y: clamp(66svh, 70svh, 75svh);
      }
      :root {
        --journey-title-size: clamp(1.08rem, 2.5vw, 1.45rem);
        --journey-dialog-size: clamp(1.24rem, 2.8vw, 1.7rem);
        --journey-dialog-date-size: clamp(.86rem, 1.8vw, 1.08rem);
        --journey-dialog-width: min(560px, 64vw);
        --journey-dialog-pad-y: clamp(12px, 2vw, 20px);
        --journey-dialog-pad-x: clamp(16px, 2.3vw, 24px);
        --journey-btn-font-size: clamp(.84rem, 1.55vw, 1rem);
        --journey-btn-pad-y: .74rem;
        --journey-btn-pad-x: 2.3rem;
      }

      .ldr-eyebrow   { font-size:clamp(.72rem,1.5vw,.88rem); }
      .ldr-char      { font-size:clamp(3.2rem,8vw,5.2rem); }
      .ldr-date      { font-size:clamp(.72rem,1.4vw,.88rem); }
      .ldr-status    { font-size:clamp(.62rem,1.3vw,.76rem); }
      .ldr-enter-label { font-size:clamp(.76rem,1.5vw,.92rem); }

      .mc-section-title { font-size:clamp(2.45rem,5.6vw,3.35rem); }
      .mc-lead { font-size:clamp(1.12rem,2vw,1.3rem); }
      .mc-name { font-size:clamp(2.9rem,8.4vw,4.4rem); }
      .mc-name-amp { font-size:clamp(1.8rem,3.2vw,2.6rem); }
      .mc-event-label { font-size:clamp(.86rem,1.2vw,1rem); }
      .mc-event-time { font-size:clamp(1.7rem,3.2vw,2.25rem); }
      .mc-event-detail { font-size:clamp(1.1rem,1.8vw,1.3rem); }
      .mc-maps-btn { font-size:clamp(.84rem,1.2vw,1rem); }
      .mc-gift-name { font-size:clamp(1.12rem,1.7vw,1.38rem); }
      .mc-gift-number { font-size:clamp(1rem,1.7vw,1.22rem); }
      .mc-input, .mc-textarea { font-size:clamp(1.05rem,1.6vw,1.16rem); }
      .mc-submit-btn { font-size:clamp(.82rem,1.2vw,.96rem); }
      .mc-comment-empty { font-size:clamp(.82rem,1.2vw,.96rem); }
      .comment-bubble-name { font-size:clamp(1.08rem,1.8vw,1.2rem); }
      .comment-bubble-date { font-size:clamp(.76rem,1.1vw,.9rem); }
      .comment-bubble-text { font-size:clamp(1.08rem,1.7vw,1.18rem); }
    }
    #jHint.show { opacity:1; }
    #jHint .hint-line { background:linear-gradient(to bottom,rgba(255,210,100,.7),transparent); }

    /* Judul "Perjalanan Kami" — samakan style dengan tombol Lihat Undangan */
    #jTitle {
      position:fixed; top:clamp(14px,3.2vh,30px); left:50%;
      transform:translateX(-50%) translateY(0);
      z-index:35; pointer-events:none;
      font-family:"Cinzel",serif; text-transform:uppercase;
      letter-spacing:.16em;
      font-size:var(--journey-btn-font-size);
      color:var(--ink);
      white-space:nowrap;
      display:inline-flex; align-items:center;
      padding:var(--journey-btn-pad-y) var(--journey-btn-pad-x);
      border-radius:999px;
      border:1px solid rgba(176,138,79,.6);
      background:rgba(255,255,255,.72);
      backdrop-filter:blur(6px);
      -webkit-backdrop-filter:blur(6px);
      box-shadow:0 10px 24px rgba(0,0,0,.16), 0 1px 0 rgba(255,255,255,.64) inset;
      animation:btnContinueFloat 2.4s ease-in-out infinite;
    }
    @media (max-width: 767px) {
      #jTitle {
        letter-spacing:.16em;
      }
    }

    /* Desktop tuning: Journey dialog */
    @media (min-width: 1024px) {
      :root {
        --journey-title-size: clamp(1.14rem, 1.55vw, 1.85rem);
        --journey-dialog-size: clamp(1.32rem, 1.95vw, 2.2rem);
        --journey-dialog-date-size: clamp(.88rem, 1.12vw, 1.24rem);
        --journey-dialog-width: min(620px, 40vw);
        --journey-dialog-pad-y: clamp(14px, 1.5vw, 24px);
        --journey-dialog-pad-x: clamp(16px, 1.7vw, 30px);
        --journey-btn-font-size: clamp(.76rem, .95vw, .98rem);
        --journey-btn-pad-y: .74rem;
        --journey-btn-pad-x: 2.35rem;
        --music-btn-size: clamp(44px, 3.1vw, 52px);
      }

      /* Journey dialog tuned via :root variables above */
    }

    /* Dialog — tanpa fade, tanpa label */
    .jdialog-label { display:none; }