/* ═══════════════════════════════════════════════════════════════════════
   1 ▸ TOKEN DESAIN
   ═══════════════════════════════════════════════════════════════════════ */
    :root {
      /* Emerald */
      --em-950: #03211A;
      --em-900: #052E22;
      --em-800: #063B2C;
      --em-700: #0B6B4F;
      --em-600: #118A62;
      --em-500: #17A377;
      --em-100: #D8EDE5;
      --em-50: #EEF7F3;
      /* Gold */
      --gold-800: #7E5F14;
      --gold-700: #9C7A1E;
      --gold-600: #B8912B;
      --gold: #C9A227;
      --gold-400: #DEBB4A;
      --gold-300: #EBD695;
      --gold-200: #F6ECC9;
      /* Netral */
      --ink: #0F1F1A;
      --ink-2: #2A3D36;
      --muted: #5E7269;
      --bg: #FFFDF7;
      --bg-2: #F6FBF8;
      --surface: #FFFFFF;
      --surface-2: #F4FAF7;
      --line: #E2EDE7;
      --line-2: #D3E4DC;
      --glass: rgba(255, 255, 255, .72);
      --shadow-xs: 0 2px 8px rgba(6, 59, 44, .06);
      --shadow-sm: 0 4px 18px rgba(6, 59, 44, .08);
      --shadow: 0 12px 38px rgba(6, 59, 44, .11);
      --shadow-lg: 0 26px 70px rgba(6, 59, 44, .18);
      --shadow-gold: 0 10px 30px rgba(201, 162, 39, .28);
      --ring: 0 0 0 4px rgba(17, 138, 98, .15);

      /* Tipografi fluid */
      --fs-2xs: clamp(.62rem, .60rem + .12vw, .70rem);
      --fs-xs: clamp(.70rem, .66rem + .18vw, .80rem);
      --fs-sm: clamp(.83rem, .80rem + .18vw, .93rem);
      --fs-base: clamp(.96rem, .92rem + .28vw, 1.08rem);
      --fs-lg: clamp(1.06rem, 1rem + .42vw, 1.28rem);
      --fs-h3: clamp(1.14rem, 1.04rem + .62vw, 1.48rem);
      --fs-h2: clamp(1.80rem, 1.35rem + 2.5vw, 3.25rem);
      --fs-h1: clamp(2.15rem, 1.35rem + 6.6vw, 4.8rem);
      --fs-ar: clamp(1.15rem, .95rem + 1.8vw, 2.05rem);

      /* Spasi fluid */
      --sp-1: clamp(.4rem, .35rem + .3vw, .6rem);
      --sp-2: clamp(.7rem, .6rem + .5vw, 1.1rem);
      --sp-3: clamp(1.1rem, .9rem + .9vw, 1.8rem);
      --sp-4: clamp(1.6rem, 1.2rem + 1.6vw, 2.8rem);
      --sp-5: clamp(2.4rem, 1.7rem + 3vw, 4.6rem);
      --sp-sec: clamp(3.4rem, 2.1rem + 5.6vw, 7.5rem);
      --gutter: clamp(1rem, .6rem + 2.4vw, 2.5rem);

      --r-sm: clamp(10px, 8px + .6vw, 14px);
      --r: clamp(16px, 12px + 1.2vw, 24px);
      --r-lg: clamp(20px, 14px + 1.8vw, 34px);
      --maxw: 1140px;

      --f-head: "Cormorant Garamond", Georgia, "Times New Roman", serif;
      --f-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      --f-ar: "Amiri", "Traditional Arabic", serif;
      --f-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

      --dock-h: 0px;
      --ease: cubic-bezier(.16, 1, .3, 1);

      /* Mask lengkung mihrab */
      --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M50 0C78 17 100 40 100 66V140H0V66C0 40 22 17 50 0Z' fill='%23000'/%3E%3C/svg%3E");
    }

    @media (min-width:1280px) {
      :root {
        --maxw: 1220px
      }
    }

    @media (min-width:1600px) {
      :root {
        --maxw: 1340px
      }
    }

    @media (max-width:359px) {
      :root {
        --gutter: 14px;
        --r: 14px
      }
    }

    /* Dark mode */
    @media (prefers-color-scheme:dark) {
      html[data-theme="auto"] {
        --bg: #07100D;
        --bg-2: #0A1713;
        --surface: #0F1B17;
        --surface-2: #13221D;
        --line: #1F332B;
        --line-2: #2A473C;
        --glass: rgba(15, 27, 23, .72);
        --ink: #EAF3EF;
        --ink-2: #CBDCD5;
        --muted: #93AAA1;
        --em-50: #11231C;
        --em-100: #16332A;
        --shadow-xs: 0 2px 8px rgba(0, 0, 0, .4);
        --shadow-sm: 0 4px 18px rgba(0, 0, 0, .45);
        --shadow: 0 12px 38px rgba(0, 0, 0, .5);
        --shadow-lg: 0 26px 70px rgba(0, 0, 0, .65);
        --ring: 0 0 0 4px rgba(23, 163, 119, .22);
      }
    }

    html[data-theme="dark"] {
      --bg: #07100D;
      --bg-2: #0A1713;
      --surface: #0F1B17;
      --surface-2: #13221D;
      --line: #1F332B;
      --line-2: #2A473C;
      --glass: rgba(15, 27, 23, .72);
      --ink: #EAF3EF;
      --ink-2: #CBDCD5;
      --muted: #93AAA1;
      --em-50: #11231C;
      --em-100: #16332A;
      --shadow-xs: 0 2px 8px rgba(0, 0, 0, .4);
      --shadow-sm: 0 4px 18px rgba(0, 0, 0, .45);
      --shadow: 0 12px 38px rgba(0, 0, 0, .5);
      --shadow-lg: 0 26px 70px rgba(0, 0, 0, .65);
      --ring: 0 0 0 4px rgba(23, 163, 119, .22);
    }

    /* ═══════════════════════════════════════════════════════════════════════
   2 ▸ RESET
   ═══════════════════════════════════════════════════════════════════════ */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      min-width: 0
    }

    html {
      -webkit-text-size-adjust: 100%;
      scroll-behavior: smooth;
      scroll-padding-top: clamp(60px, 10vw, 90px)
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--ink);
      font: 400 var(--fs-base)/1.78 var(--f-body);
      overflow-x: hidden;
      overflow-wrap: break-word;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased
    }

    body.locked {
      overflow: hidden;
      height: 100dvh
    }

    img,
    svg,
    video,
    iframe {
      display: block;
      max-width: 100%;
      height: auto
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
      color: inherit
    }

    a {
      color: var(--em-600);
      text-underline-offset: 3px
    }

    ::selection {
      background: var(--gold-300);
      color: #0a2019
    }

    :focus-visible {
      outline: 2.5px solid var(--gold);
      outline-offset: 3px;
      border-radius: 8px
    }

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

    /* Tekstur noise global (kedalaman halus) */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      opacity: .028;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
      mix-blend-mode: multiply
    }

    html[data-theme="dark"] body::before {
      mix-blend-mode: screen;
      opacity: .04
    }

    /* ═══════════════════════════════════════════════════════════════════════
   3 ▸ UTILITAS
   ═══════════════════════════════════════════════════════════════════════ */
    .wrap {
      width: 100%;
      max-width: var(--maxw);
      margin-inline: auto;
      padding-inline: var(--gutter)
    }

    .narrow {
      max-width: min(66ch, 100%);
      margin-inline: auto
    }

    section {
      padding-block: var(--sp-sec);
      position: relative;
      scroll-margin-top: clamp(56px, 9vw, 80px)
    }

    .center {
      text-align: center
    }

    .grid {
      display: grid;
      gap: var(--sp-3)
    }

    .grid.cards {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr))
    }

    .grid.two {
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr))
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: var(--f-head);
      font-weight: 600;
      line-height: 1.14;
      margin: 0 0 var(--sp-2);
      text-wrap: balance
    }

    h1 {
      font-size: var(--fs-h1);
      letter-spacing: -.015em
    }

    h2 {
      font-size: var(--fs-h2);
      letter-spacing: -.01em
    }

    h3 {
      font-size: var(--fs-h3)
    }

    p {
      margin: 0 0 var(--sp-2);
      text-wrap: pretty
    }

    .lead {
      color: var(--muted);
      font-size: var(--fs-lg);
      line-height: 1.7
    }

    /* Eyebrow dengan garis emas di kedua sisi */
    .eyebrow {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .8em;
      margin: 0 0 var(--sp-2);
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: var(--gold-600)
    }

    .eyebrow::before,
    .eyebrow::after {
      content: "";
      height: 1px;
      width: clamp(18px, 6vw, 46px);
      background: linear-gradient(90deg, transparent, var(--gold))
    }

    .eyebrow::after {
      background: linear-gradient(90deg, var(--gold), transparent)
    }

    .eyebrow.plain {
      display: block
    }

    .eyebrow.plain::before,
    .eyebrow.plain::after {
      display: none
    }

    /* Judul dengan kilau emas */
    .shine {
      background: linear-gradient(100deg, var(--gold-700) 0%, var(--gold-300) 18%, var(--gold) 34%, #FFF7DE 50%, var(--gold) 66%, var(--gold-700) 100%);
      background-size: 220% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      animation: shine 7s linear infinite
    }

    @keyframes shine {
      to {
        background-position: 220% 0
      }
    }

    .arabic {
      font-family: var(--f-ar);
      direction: rtl;
      line-height: 2.15;
      font-size: var(--fs-ar);
      color: var(--em-700)
    }

    html[data-theme="dark"] .arabic {
      color: var(--gold-300)
    }

    @media (prefers-color-scheme:dark) {
      html[data-theme="auto"] .arabic {
        color: var(--gold-300)
      }
    }

    /* Latar ornamen geometris */
    .pattern {
      position: relative;
      isolation: isolate
    }

    .pattern::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -2;
      pointer-events: none;
      opacity: .05;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg fill='none' stroke='%230B6B4F' stroke-width='1.2'%3E%3Cpath d='M45 0 90 45 45 90 0 45Z'/%3E%3Cpath d='M45 15 75 45 45 75 15 45Z'/%3E%3Cpath d='M45 0v90M0 45h90'/%3E%3Ccircle cx='45' cy='45' r='8'/%3E%3C/g%3E%3C/svg%3E");
      background-size: clamp(52px, 7.5vw, 86px)
    }

    html[data-theme="dark"] .pattern::before {
      opacity: .085;
      filter: invert(1) hue-rotate(130deg)
    }

    /* Cahaya radial lembut */
    .glow::after {
      content: "";
      position: absolute;
      z-index: -1;
      pointer-events: none;
      inset: auto 50% auto 50%;
      translate: -50% 0;
      top: -10%;
      width: min(120%, 900px);
      aspect-ratio: 1;
      background: radial-gradient(circle, rgba(201, 162, 39, .13), transparent 62%)
    }

    .glow.g2::after {
      background: radial-gradient(circle, rgba(17, 138, 98, .14), transparent 62%)
    }

    /* Divider arabesque */
    .divider {
      display: block;
      width: min(100%, 320px);
      height: clamp(26px, 5vw, 40px);
      margin: var(--sp-3) auto;
      opacity: .95
    }

    .divider svg {
      width: 100%;
      height: 100%;
      overflow: visible
    }

    .divider path,
    .divider circle {
      vector-effect: non-scaling-stroke
    }

    /* Ukiran Minangkabau */
    .minang {
      width: 100%;
      height: clamp(24px, 4.6vw, 38px);
      margin: var(--sp-3) auto;
      opacity: .92;
      background: center/auto 100% repeat-x url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='36'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M0 32h250' stroke-opacity='.5'/%3E%3Cpath d='M14 32c0-13 10-21 23-21s19 8 19 17c0 6-4 11-9 11s-9-3-9-8 3-6 7-6'/%3E%3Cpath d='M112 32c0-13-10-21-23-21s-19 8-19 17c0 6 4 11 9 11s9-3 9-8-3-6-7-6'/%3E%3Cpath d='M125 4l11 13h-22z'/%3E%3Cpath d='M125 20v8'/%3E%3Cpath d='M138 32c0-13 10-21 23-21s19 8 19 17c0 6-4 11-9 11s-9-3-9-8 3-6 7-6'/%3E%3Cpath d='M236 32c0-13-10-21-23-21s-19 8-19 17c0 6 4 11 9 11s9-3 9-8-3-6-7-6'/%3E%3C/g%3E%3C/svg%3E")
    }

    .minang.flip {
      transform: scaleY(-1)
    }

    /* Bingkai lengkung mihrab */
    .arch {
      -webkit-mask: var(--arch) center/100% 100% no-repeat;
      mask: var(--arch) center/100% 100% no-repeat;
      background: linear-gradient(160deg, var(--gold-300), var(--gold) 45%, var(--gold-700));
      padding: clamp(3px, .6vw, 5px);
      position: relative
    }

    .arch>img,
    .arch>iframe,
    .arch>.inner {
      -webkit-mask: var(--arch) center/100% 100% no-repeat;
      mask: var(--arch) center/100% 100% no-repeat;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0
    }

    /* Ornamen sudut emas */
    .corners::before,
    .corners::after {
      content: "";
      position: absolute;
      width: clamp(22px, 5vw, 34px);
      aspect-ratio: 1;
      pointer-events: none;
      border: 1.6px solid var(--gold);
      opacity: .7
    }

    .corners::before {
      top: 10px;
      left: 10px;
      border-width: 1.6px 0 0 1.6px;
      border-radius: 8px 0 0 0
    }

    .corners::after {
      bottom: 10px;
      right: 10px;
      border-width: 0 1.6px 1.6px 0;
      border-radius: 0 0 8px 0
    }

    /* ═══════════════════════════════════════════════════════════════════════
   4 ▸ KARTU
   ═══════════════════════════════════════════════════════════════════════ */
    .card {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r);
      box-shadow: var(--shadow-sm);
      padding: var(--sp-3);
      container-type: inline-size;
      transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s
    }

    .card.lift {
      overflow: hidden
    }

    .card.lift::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background: linear-gradient(140deg, rgba(201, 162, 39, .5), transparent 38%, transparent 62%, rgba(17, 138, 98, .4));
      opacity: 0;
      transition: opacity .45s;
      padding: 1px;
      -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
      -webkit-mask-composite: xor;
      mask-composite: exclude
    }

    @media (hover:hover) {
      .card.lift:hover {
        transform: translateY(-6px);
        box-shadow: var(--shadow-lg)
      }

      .card.lift:hover::before {
        opacity: 1
      }
    }

    .card.glass {
      background: var(--glass);
      -webkit-backdrop-filter: blur(16px);
      backdrop-filter: blur(16px)
    }

    .frame {
      position: relative;
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--shadow)
    }

    .frame::after {
      content: "";
      position: absolute;
      inset: clamp(7px, 1.5vw, 13px);
      border: 1px solid rgba(212, 175, 55, .5);
      border-radius: inherit;
      pointer-events: none
    }

    /* Medali ikon */
    .ico {
      width: clamp(50px, 12vw, 62px);
      aspect-ratio: 1;
      border-radius: 26% 26% 26% 26%/30%;
      display: grid;
      place-items: center;
      margin: 0 auto var(--sp-2);
      font-size: clamp(1.25rem, 3.8vw, 1.6rem);
      position: relative;
      background: linear-gradient(150deg, var(--em-50), var(--surface));
      border: 1px solid var(--line-2);
      box-shadow: inset 0 1px 0 #fff9, var(--shadow-xs)
    }

    html[data-theme="dark"] .ico {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-xs)
    }

    .ico::after {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: inherit;
      border: 1px dashed rgba(201, 162, 39, .45);
      opacity: .9
    }

    /* ═══════════════════════════════════════════════════════════════════════
   5 ▸ TOMBOL
   ═══════════════════════════════════════════════════════════════════════ */
    .btn {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      --b: linear-gradient(140deg, var(--em-600), var(--em-800));
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .6em;
      min-height: 48px;
      padding: .82em 1.7em;
      border: 0;
      border-radius: 999px;
      cursor: pointer;
      background: var(--b);
      color: #fff;
      font-weight: 600;
      font-size: var(--fs-sm);
      line-height: 1.2;
      letter-spacing: .01em;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(6, 59, 44, .25);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), filter .3s
    }

    .btn::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity .35s;
      background: linear-gradient(140deg, var(--em-500), var(--em-700))
    }

    @media (hover:hover) {
      .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 16px 34px rgba(6, 59, 44, .32)
      }

      .btn:hover::after {
        opacity: 1
      }
    }

    .btn:active {
      transform: translateY(0) scale(.98)
    }

    .btn.gold {
      --b: linear-gradient(140deg, var(--gold-400), var(--gold-700));
      color: #241A05;
      box-shadow: var(--shadow-gold)
    }

    .btn.gold::after {
      background: linear-gradient(140deg, #F0D673, var(--gold-600))
    }

    .btn.ghost {
      background: none;
      color: var(--em-600);
      border: 1.6px solid currentColor;
      box-shadow: none
    }

    .btn.ghost::after {
      display: none
    }

    @media (hover:hover) {
      .btn.ghost:hover {
        background: var(--em-50);
        box-shadow: var(--shadow-xs)
      }
    }

    .btn.sm {
      min-height: 40px;
      padding: .55em 1.1em;
      font-size: var(--fs-xs)
    }

    .btn-row {
      display: flex;
      flex-wrap: wrap;
      gap: var(--sp-2);
      justify-content: center
    }

    @media (max-width:430px) {
      .btn-row .btn {
        flex: 1 1 100%
      }
    }

    /* Ripple */
    .ripple {
      position: absolute;
      border-radius: 50%;
      transform: scale(0);
      pointer-events: none;
      background: rgba(255, 255, 255, .45);
      animation: rip .6s ease-out forwards
    }

    @keyframes rip {
      to {
        transform: scale(2.6);
        opacity: 0
      }
    }

    /* Chip info */
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: clamp(8px, 1.6vw, 12px);
      justify-content: center;
      margin-top: var(--sp-3)
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: .55em;
      padding: .55em 1.05em;
      border-radius: 999px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
      font-size: var(--fs-xs);
      font-weight: 600;
      color: var(--ink-2)
    }

    .chip b {
      color: var(--em-600);
      font-weight: 700
    }

    .chip em {
      font-style: normal;
      font-size: 1.05em
    }

    /* ═══════════════════════════════════════════════════════════════════════
   6 ▸ PRELOADER
   ═══════════════════════════════════════════════════════════════════════ */
    #loader {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      place-items: center;
      gap: 0;
      background: radial-gradient(120% 90% at 50% 0%, var(--em-800), var(--em-950));
      color: #fff;
      transition: opacity .7s, visibility .7s
    }

    #loader.done {
      opacity: 0;
      visibility: hidden
    }

    .load-in {
      display: grid;
      justify-items: center;
      gap: var(--sp-3);
      text-align: center
    }

    .star8 {
      width: clamp(62px, 17vw, 92px);
      aspect-ratio: 1;
      position: relative
    }

    .star8 i {
      position: absolute;
      inset: 0;
      border: 1.6px solid var(--gold-300);
      border-radius: 6px;
      opacity: .85
    }

    .star8 i:nth-child(1) {
      animation: sp1 3.6s linear infinite
    }

    .star8 i:nth-child(2) {
      rotate: 45deg;
      animation: sp2 3.6s linear infinite
    }

    @keyframes sp1 {
      to {
        rotate: 360deg
      }
    }

    @keyframes sp2 {
      to {
        rotate: 405deg
      }
    }

    .star8 b {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      font-family: var(--f-ar);
      font-size: 1.5rem;
      color: var(--gold-200)
    }

    #loader p {
      margin: 0;
      font-family: var(--f-ar);
      font-size: clamp(1rem, 3.6vw, 1.35rem);
      color: var(--gold-300)
    }

    #loader small {
      letter-spacing: .34em;
      text-transform: uppercase;
      font-size: var(--fs-2xs);
      color: rgba(255, 255, 255, .5)
    }

    .load-bar {
      width: min(190px, 52vw);
      height: 2px;
      background: rgba(255, 255, 255, .16);
      border-radius: 9px;
      overflow: hidden
    }

    .load-bar i {
      display: block;
      height: 100%;
      width: 0;
      background: linear-gradient(90deg, var(--gold), var(--gold-200));
      animation: lb 1.5s var(--ease) forwards
    }

    @keyframes lb {
      to {
        width: 100%
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   7 ▸ TOPBAR + PROGRESS
   ═══════════════════════════════════════════════════════════════════════ */
    #topbar {
      position: fixed;
      inset: 0 0 auto;
      z-index: 75;
      display: flex;
      align-items: center;
      gap: var(--sp-2);
      padding: 8px var(--gutter);
      padding-top: max(8px, env(safe-area-inset-top));
      background: var(--glass);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
      translate: 0 -110%;
      transition: translate .5s var(--ease)
    }

    #topbar.show {
      translate: 0 0
    }

    #topbar .tb-logo {
      width: 34px;
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      flex: none;
      background: #fff;
      border: 1.5px solid var(--gold-300)
    }

    #topbar .tb-logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 3px
    }

    .tb-txt {
      min-width: 0;
      flex: 1
    }

    .tb-txt b {
      display: block;
      font-family: var(--f-head);
      font-size: 1rem;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis
    }

    .tb-txt span {
      display: block;
      font-size: var(--fs-2xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--muted)
    }

    .ring {
      width: 38px;
      aspect-ratio: 1;
      flex: none;
      display: grid;
      place-items: center;
      position: relative
    }

    .ring svg {
      position: absolute;
      inset: 0;
      rotate: -90deg
    }

    .ring circle {
      fill: none;
      stroke-width: 2.6
    }

    .ring .bgc {
      stroke: var(--line-2)
    }

    .ring .fg {
      stroke: var(--gold);
      stroke-linecap: round;
      stroke-dasharray: 100 100;
      stroke-dashoffset: 100;
      transition: stroke-dashoffset .15s linear
    }

    .ring b {
      font-size: .6rem;
      font-weight: 800;
      color: var(--em-600);
      font-variant-numeric: tabular-nums
    }

    #progress {
      position: fixed;
      inset: 0 auto auto 0;
      height: 3px;
      width: 0;
      z-index: 80;
      background: linear-gradient(90deg, var(--em-600), var(--gold-400), var(--gold));
      box-shadow: 0 0 12px rgba(201, 162, 39, .5)
    }

    /* ═══════════════════════════════════════════════════════════════════════
   8 ▸ NAVIGASI
   ═══════════════════════════════════════════════════════════════════════ */
    .nav {
      position: fixed;
      z-index: 70;
      display: flex;
      padding: 7px;
      gap: 2px;
      background: var(--glass);
      -webkit-backdrop-filter: blur(18px);
      backdrop-filter: blur(18px);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      transition: transform .6s var(--ease), opacity .4s
    }

    .nav a {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      gap: 1px;
      width: clamp(52px, 15.5vw, 66px);
      min-height: 48px;
      padding: 5px 2px;
      border-radius: 16px;
      color: var(--muted);
      text-decoration: none;
      font-size: 1.02rem;
      transition: color .3s
    }

    .nav a small {
      font-size: .56rem;
      font-weight: 700;
      letter-spacing: .04em;
      line-height: 1
    }

    .nav a.active {
      color: var(--em-600)
    }

    html[data-theme="dark"] .nav a.active {
      color: var(--gold-300)
    }

    .nav .pill {
      position: absolute;
      z-index: 0;
      border-radius: 16px;
      background: var(--em-50);
      transition: transform .45s var(--ease), width .45s var(--ease), height .45s var(--ease);
      box-shadow: inset 0 0 0 1px var(--line-2)
    }

    .nav .lbl {
      display: none
    }

    @media (max-width:1023px) {
      :root {
        --dock-h: 86px
      }

      .nav {
        left: 50%;
        bottom: calc(10px + env(safe-area-inset-bottom));
        border-radius: 26px;
        transform: translateX(-50%) translateY(190%)
      }

      .nav.show {
        transform: translateX(-50%) translateY(0)
      }
    }

    @media (min-width:1024px) {
      .nav {
        flex-direction: column;
        left: 20px;
        top: 50%;
        translate: 0 -50%;
        border-radius: 24px;
        padding: 10px;
        transform: translateX(-170%)
      }

      .nav.show {
        transform: none
      }

      .nav a {
        width: 50px;
        min-height: 50px;
        padding: 0;
        border-radius: 15px
      }

      .nav a small {
        display: none
      }

      .nav .lbl {
        display: block;
        position: absolute;
        left: calc(100% + 14px);
        white-space: nowrap;
        background: var(--em-800);
        color: #fff;
        padding: 7px 13px;
        border-radius: 10px;
        font-size: .74rem;
        font-weight: 600;
        opacity: 0;
        pointer-events: none;
        transition: .22s var(--ease);
        translate: -8px 0;
        box-shadow: var(--shadow)
      }

      .nav .lbl::before {
        content: "";
        position: absolute;
        right: 100%;
        top: 50%;
        translate: 0 -50%;
        border: 6px solid transparent;
        border-right-color: var(--em-800)
      }

      .nav a:hover .lbl {
        opacity: 1;
        translate: 0 0
      }
    }

    /* FAB */
    .fabs {
      position: fixed;
      z-index: 70;
      right: clamp(10px, 2.6vw, 24px);
      bottom: calc(var(--dock-h) + 14px + env(safe-area-inset-bottom));
      display: flex;
      flex-direction: column;
      gap: 10px;
      opacity: 0;
      pointer-events: none;
      transition: .45s var(--ease)
    }

    .fabs.show {
      opacity: 1;
      pointer-events: auto
    }

    @media (min-width:1024px) {
      .fabs {
        bottom: clamp(20px, 3vw, 34px)
      }
    }

    .fab {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      cursor: pointer;
      background: var(--surface);
      border: 1px solid var(--line);
      color: var(--em-600);
      box-shadow: var(--shadow);
      font-size: 1.02rem;
      transition: transform .3s var(--ease), background .3s
    }

    @media (hover:hover) {
      .fab:hover {
        transform: scale(1.09)
      }
    }

    .fab.on {
      background: linear-gradient(140deg, var(--em-600), var(--em-800));
      color: #fff;
      border-color: transparent
    }

    /* Equalizer musik */
    .eq {
      display: flex;
      align-items: flex-end;
      gap: 2.5px;
      height: 15px
    }

    .eq i {
      width: 2.6px;
      background: currentColor;
      border-radius: 2px;
      height: 40%;
      animation: eq .9s ease-in-out infinite
    }

    .eq i:nth-child(2) {
      animation-delay: .15s
    }

    .eq i:nth-child(3) {
      animation-delay: .3s
    }

    .eq i:nth-child(4) {
      animation-delay: .45s
    }

    @keyframes eq {

      0%,
      100% {
        height: 28%
      }

      50% {
        height: 100%
      }
    }

    .fab:not(.on) .eq i {
      animation: none;
      height: 32%
    }

    /* ═══════════════════════════════════════════════════════════════════════
   9 ▸ COVER
   ═══════════════════════════════════════════════════════════════════════ */
    #cover {
      position: fixed;
      inset: 0;
      z-index: 95;
      color: #fff;
      display: grid;
      overflow: hidden;
      background: radial-gradient(130% 100% at 50% 0%, var(--em-800) 0%, var(--em-950) 75%);
      transition: opacity .9s, transform 1.1s cubic-bezier(.7, 0, .3, 1), filter .9s
    }

    #cover.hide {
      opacity: 0;
      scale: 1.06;
      filter: blur(6px);
      pointer-events: none
    }

    #cover .cv-pattern {
      position: absolute;
      inset: 0;
      opacity: .09;
      pointer-events: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cg fill='none' stroke='%23EBD695' stroke-width='1'%3E%3Cpath d='M42 0 84 42 42 84 0 42Z'/%3E%3Cpath d='M42 14 70 42 42 70 14 42Z'/%3E%3Ccircle cx='42' cy='42' r='7'/%3E%3C/g%3E%3C/svg%3E");
      background-size: 84px
    }

    /* Partikel emas */
    .dust {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none
    }

    .dust i {
      position: absolute;
      bottom: -12px;
      width: 4px;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--gold-300);
      opacity: 0;
      filter: blur(.4px);
      animation: rise linear infinite
    }

    @keyframes rise {
      0% {
        opacity: 0;
        transform: translateY(0) scale(.6)
      }

      12% {
        opacity: .75
      }

      100% {
        opacity: 0;
        transform: translateY(-105vh) translateX(var(--dx, 20px)) scale(1.1)
      }
    }

    .cover-media {
      position: relative;
      overflow: hidden
    }

    .cover-media .shot {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 38%;
      animation: kb 26s ease-in-out infinite alternate
    }

    @keyframes kb {
      to {
        scale: 1.14;
        translate: 0 -2%
      }
    }

    .cover-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(3, 26, 19, .42), rgba(3, 26, 19, .9))
    }

    .cover-body {
      position: relative;
      display: grid;
      place-items: center;
      text-align: center;
      padding: calc(var(--sp-4) + env(safe-area-inset-top)) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom))
    }

    .cover-inner {
      display: grid;
      justify-items: center;
      gap: 3px;
      max-width: 34rem;
      position: relative
    }

    @media (max-width:1023px) {
      #cover {
        grid-template-areas: "a"
      }

      .cover-media,
      .cover-body {
        grid-area: a
      }

      .cover-media {
        height: 100%
      }

      .cv-arch {
        display: none
      }
    }

    @media (min-width:1024px) {
      #cover {
        grid-template-columns: 1.02fr 1fr
      }

      .cover-media .shot {
        animation-duration: 34s
      }

      .cover-media::after {
        background: linear-gradient(90deg, rgba(3, 26, 19, .3), rgba(3, 26, 19, .1) 55%, var(--em-900))
      }

      .cover-body {
        background: linear-gradient(200deg, var(--em-800), var(--em-950))
      }

      .cover-inner {
        max-width: 31rem
      }

      /* Lengkung mihrab dekoratif di sisi teks */
      .cv-arch {
        position: absolute;
        inset: -6% -8% -10% -8%;
        z-index: -1;
        opacity: .5;
        border: 1.4px solid rgba(235, 214, 149, .35);
        -webkit-mask: linear-gradient(#000 55%, transparent);
        mask: linear-gradient(#000 55%, transparent);
        border-radius: 50% 50% 0 0/40% 40% 0 0
      }
    }

    .logo {
      width: clamp(62px, 15vw, 90px);
      aspect-ratio: 1;
      border-radius: 50%;
      overflow: hidden;
      display: grid;
      place-items: center;
      background: #fff;
      position: relative;
      box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 2px var(--gold-300), 0 0 0 8px rgba(235, 214, 149, .14)
    }

    .logo img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      padding: 7px
    }

    .bism {
      font-family: var(--f-ar);
      font-size: clamp(1.02rem, 3.5vw, 1.45rem);
      color: var(--gold-300);
      margin: var(--sp-2) 0 0;
      letter-spacing: .02em
    }

    #cover .eyebrow {
      color: var(--gold-300);
      margin-top: var(--sp-1)
    }

    #cover .eyebrow::before,
    #cover .eyebrow::after {
      background: linear-gradient(90deg, transparent, var(--gold-300))
    }

    #cover .eyebrow::after {
      background: linear-gradient(90deg, var(--gold-300), transparent)
    }

    #cover h1 {
      color: #fff;
      margin: .14em 0 .1em;
      text-shadow: 0 8px 34px rgba(0, 0, 0, .55);
      font-weight: 600
    }

    .sub {
      font-size: var(--fs-xs);
      letter-spacing: .3em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .72);
      margin: 0
    }

    .cover-date {
      position: relative;
      margin: var(--sp-3) 0 0;
      padding: .6em 1.5em;
      font-family: var(--f-head);
      font-size: var(--fs-lg);
      font-weight: 500;
      letter-spacing: .02em;
      color: #fff;
      border: 1px solid rgba(235, 214, 149, .42);
      border-radius: 999px;
      background: rgba(255, 255, 255, .06);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .to {
      margin-top: var(--sp-3);
      font-size: var(--fs-xs);
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .62)
    }

    .to strong {
      display: block;
      margin-top: .35em;
      font-family: var(--f-head);
      text-transform: none;
      letter-spacing: 0;
      font-size: clamp(1.25rem, 4.6vw, 1.8rem);
      color: #fff;
      line-height: 1.28
    }

    .hint {
      margin-top: var(--sp-2);
      font-size: var(--fs-2xs);
      letter-spacing: .2em;
      color: rgba(255, 255, 255, .45)
    }

    .scroll-cue {
      margin-top: var(--sp-1);
      width: 22px;
      height: 34px;
      border: 1.4px solid rgba(255, 255, 255, .35);
      border-radius: 12px;
      position: relative
    }

    .scroll-cue::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 7px;
      translate: -50% 0;
      width: 3px;
      height: 7px;
      border-radius: 3px;
      background: var(--gold-300);
      animation: cue 1.8s ease-in-out infinite
    }

    @keyframes cue {

      0%,
      100% {
        transform: translate(-50%, 0);
        opacity: 1
      }

      55% {
        transform: translate(-50%, 12px);
        opacity: .2
      }
    }

    @media (orientation:landscape) and (max-height:540px) {
      .logo {
        width: 48px
      }

      .bism,
      .hint,
      .scroll-cue {
        display: none
      }

      .cover-date {
        margin-top: var(--sp-2);
        padding: .35em 1.1em
      }

      .cover-inner {
        gap: 0
      }

      #cover h1 {
        font-size: clamp(1.6rem, 7.5vh, 2.3rem)
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   10 ▸ HERO KUTIPAN
   ═══════════════════════════════════════════════════════════════════════ */
    .hero {
      display: grid;
      place-items: center;
      text-align: center;
      color: #fff;
      position: relative;
      overflow: hidden;
      padding: var(--sp-5) var(--gutter);
      min-height: clamp(400px, 74dvh, 780px)
    }

    .hero .bg {
      position: absolute;
      inset: -8% 0
    }

    .hero .bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: transform
    }

    .hero .bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(3, 26, 19, .55), rgba(3, 26, 19, .4) 40%, rgba(3, 26, 19, .9))
    }

    .hero .content {
      position: relative;
      max-width: 46rem
    }

    .hero .qmark {
      font-family: var(--f-head);
      font-size: clamp(3rem, 10vw, 5.5rem);
      line-height: .5;
      color: var(--gold-300);
      opacity: .45;
      display: block;
      margin-bottom: .1em
    }

    .hero blockquote {
      margin: var(--sp-2) 0 0;
      font-family: var(--f-head);
      font-style: italic;
      font-weight: 500;
      font-size: clamp(1.15rem, .9rem + 1.8vw, 1.95rem);
      line-height: 1.48;
      text-wrap: balance
    }

    .hero cite {
      display: inline-block;
      margin-top: var(--sp-3);
      font-style: normal;
      font-weight: 700;
      font-size: var(--fs-xs);
      letter-spacing: .22em;
      color: var(--gold-300);
      padding: .45em 1.2em;
      border: 1px solid rgba(235, 214, 149, .35);
      border-radius: 999px
    }

    @media (orientation:landscape) and (max-height:540px) {
      .hero {
        min-height: 100dvh;
        padding-block: var(--sp-4)
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   11 ▸ DETAIL + COUNTDOWN
   ═══════════════════════════════════════════════════════════════════════ */
    .detail-card {
      text-align: center
    }

    .detail-card h3 {
      margin: 0 0 .18em;
      font-size: var(--fs-h3)
    }

    .detail-card p {
      margin: 0;
      color: var(--muted);
      font-size: var(--fs-sm);
      line-height: 1.6
    }

    .detail-card .tag {
      display: inline-block;
      margin-top: .6em;
      font-size: var(--fs-2xs);
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--gold-600)
    }

    @container (min-width:430px) {
      .card.detail-card {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--sp-2) var(--sp-3);
        text-align: left;
        align-items: center
      }

      .card.detail-card .ico {
        margin: 0
      }
    }

    .count-wrap {
      position: relative;
      max-width: 34rem;
      margin: var(--sp-3) auto 0
    }

    .count {
      display: grid;
      gap: clamp(7px, 1.8vw, 14px);
      grid-template-columns: repeat(4, 1fr)
    }

    @media (max-width:345px) {
      .count {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    .count>div {
      position: relative;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: clamp(11px, 2.6vw, 18px) 4px;
      box-shadow: var(--shadow-sm);
      overflow: hidden
    }

    .count>div::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(201, 162, 39, .10), transparent 55%)
    }

    .count>div::after {
      content: "";
      position: absolute;
      left: 14%;
      right: 14%;
      top: 0;
      height: 2px;
      border-radius: 0 0 4px 4px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent)
    }

    .count b {
      display: block;
      font-family: var(--f-head);
      font-weight: 600;
      line-height: 1;
      color: var(--em-600);
      font-size: clamp(1.55rem, 6.4vw, 2.65rem);
      font-variant-numeric: tabular-nums;
      transition: transform .3s var(--ease)
    }

    html[data-theme="dark"] .count b {
      color: var(--gold-300)
    }

    .count b.tick {
      animation: pop .45s var(--ease)
    }

    @keyframes pop {
      0% {
        transform: translateY(-30%) scale(.85);
        opacity: .3
      }

      100% {
        transform: none;
        opacity: 1
      }
    }

    .count span {
      display: block;
      margin-top: .35em;
      font-size: clamp(.55rem, 1.7vw, .68rem);
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700
    }

    .count.done {
      grid-template-columns: 1fr
    }

    .count.done b {
      font-family: var(--f-ar);
      font-size: clamp(1.6rem, 7vw, 2.6rem)
    }

    /* ═══════════════════════════════════════════════════════════════════════
   12 ▸ TIMELINE
   ═══════════════════════════════════════════════════════════════════════ */
    .tl {
      list-style: none;
      margin: var(--sp-3) auto 0;
      padding: 0;
      position: relative;
      max-width: 44rem
    }

    .tl::before {
      content: "";
      position: absolute;
      left: 23px;
      top: 14px;
      bottom: 14px;
      width: 2px;
      border-radius: 2px;
      background: linear-gradient(var(--gold), var(--em-600) 45%, var(--em-600) 70%, transparent)
    }

    .tl li {
      position: relative;
      padding: 0 0 var(--sp-3) clamp(58px, 16vw, 74px)
    }

    .tl li:last-child {
      padding-bottom: 0
    }

    .tl .dot {
      position: absolute;
      left: 0;
      top: 0;
      width: 48px;
      aspect-ratio: 1;
      border-radius: 32%;
      display: grid;
      place-items: center;
      font-size: 1.05rem;
      background: linear-gradient(150deg, var(--surface), var(--em-50));
      border: 1.6px solid var(--gold);
      box-shadow: 0 0 0 5px var(--bg), var(--shadow-xs);
      z-index: 1
    }

    .tl .time {
      display: inline-block;
      font-size: var(--fs-2xs);
      font-weight: 800;
      letter-spacing: .12em;
      color: var(--gold-700);
      background: rgba(201, 162, 39, .11);
      padding: .3em .8em;
      border-radius: 999px
    }

    html[data-theme="dark"] .tl .time {
      color: var(--gold-300)
    }

    .tl .name {
      font-family: var(--f-head);
      font-size: var(--fs-h3);
      margin-top: .3em;
      line-height: 1.26;
      font-weight: 600
    }

    .tl .note {
      font-size: var(--fs-sm);
      color: var(--muted);
      margin-top: .1em
    }

    .tl li.hi .dot {
      background: linear-gradient(150deg, var(--gold-400), var(--gold-700));
      color: #fff;
      border-color: var(--gold-200);
      box-shadow: 0 0 0 5px var(--bg), var(--shadow-gold)
    }

    @media (min-width:1024px) {
      .tl {
        max-width: 64rem
      }

      .tl::before {
        left: 50%;
        translate: -1px 0
      }

      .tl li {
        width: 50%;
        padding: 0 calc(var(--sp-4) + 34px) var(--sp-4) 0;
        text-align: right
      }

      .tl .dot {
        left: auto;
        right: -24px;
        top: 2px
      }

      .tl li:nth-child(even) {
        margin-left: 50%;
        padding: 0 0 var(--sp-4) calc(var(--sp-4) + 34px);
        text-align: left
      }

      .tl li:nth-child(even) .dot {
        right: auto;
        left: -24px
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   13 ▸ TENTANG
   ═══════════════════════════════════════════════════════════════════════ */
    .about {
      display: grid;
      gap: var(--sp-4);
      align-items: start;
      margin-top: var(--sp-3)
    }

    @media (min-width:920px) {
      .about {
        grid-template-columns: 1.05fr .95fr
      }

      .about .media {
        position: sticky;
        top: calc(56px + var(--sp-3))
      }
    }

    .about .arch {
      aspect-ratio: 3/4.2
    }

    .about .stat-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--sp-2);
      margin-top: var(--sp-3)
    }

    .about .stat-row div {
      text-align: center;
      padding: var(--sp-2) 4px;
      border-radius: var(--r-sm);
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs)
    }

    .about .stat-row b {
      display: block;
      font-family: var(--f-head);
      font-size: clamp(1.2rem, 4.4vw, 1.7rem);
      color: var(--em-600)
    }

    .about .stat-row span {
      font-size: var(--fs-2xs);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 700
    }

    .acc {
      border-top: 1px solid var(--line)
    }

    .acc details {
      border-bottom: 1px solid var(--line);
      transition: background .3s
    }

    .acc details[open] {
      background: linear-gradient(90deg, var(--em-50), transparent);
      border-radius: 0 var(--r-sm) var(--r-sm) 0
    }

    .acc summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      gap: var(--sp-2);
      align-items: center;
      justify-content: space-between;
      padding: var(--sp-2) var(--sp-2) var(--sp-2) 4px;
      font-family: var(--f-head);
      font-size: var(--fs-h3);
      font-weight: 600
    }

    .acc summary::-webkit-details-marker {
      display: none
    }

    .acc summary .pm {
      flex: none;
      width: 28px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      border: 1.4px solid var(--gold);
      color: var(--gold-700);
      font-size: 1.1em;
      line-height: 0;
      transition: .35s var(--ease)
    }

    html[data-theme="dark"] .acc summary .pm {
      color: var(--gold-300)
    }

    .acc details[open] summary .pm {
      rotate: 135deg;
      background: var(--gold);
      color: #fff;
      border-color: var(--gold)
    }

    .acc .body {
      padding: 0 var(--sp-2) var(--sp-3) 4px;
      color: var(--muted);
      font-size: var(--fs-sm)
    }

    .mini {
      display: grid;
      gap: clamp(7px, 1.7vw, 12px);
      margin-top: var(--sp-3);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr))
    }

    .mini figure {
      margin: 0;
      position: relative;
      border-radius: var(--r-sm);
      overflow: hidden;
      cursor: zoom-in;
      box-shadow: var(--shadow-xs)
    }

    .mini img {
      aspect-ratio: 1;
      object-fit: cover;
      width: 100%;
      transition: scale .55s var(--ease)
    }

    @media (hover:hover) {
      .mini figure:hover img {
        scale: 1.1
      }
    }

    .mini figcaption {
      position: absolute;
      inset: auto 0 0;
      padding: 1.4em .5em .4em;
      color: #fff;
      font-size: .6rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-align: center;
      background: linear-gradient(transparent, rgba(3, 26, 19, .85))
    }

    /* ═══════════════════════════════════════════════════════════════════════
   14 ▸ GALERI
   ═══════════════════════════════════════════════════════════════════════ */
    .track {
      display: flex;
      gap: var(--sp-2);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 6px var(--gutter) var(--sp-3);
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-padding-inline: var(--gutter)
    }

    .track::-webkit-scrollbar {
      display: none
    }

    .slide {
      flex: 0 0 84%;
      scroll-snap-align: center;
      position: relative;
      margin: 0;
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      cursor: zoom-in;
      isolation: isolate
    }

    @media (min-width:600px) {
      .slide {
        flex-basis: 60%
      }
    }

    @media (min-width:768px) {
      .slide {
        flex-basis: 45%
      }
    }

    .slide img {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      transition: scale .7s var(--ease)
    }

    .slide::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, transparent 45%, rgba(3, 26, 19, .86));
      opacity: .9;
      transition: opacity .4s
    }

    .slide figcaption {
      position: absolute;
      inset: auto 0 0;
      z-index: 2;
      padding: 1em 1.1em;
      color: #fff;
      transition: translate .45s var(--ease)
    }

    .slide figcaption b {
      display: block;
      font-family: var(--f-head);
      font-size: var(--fs-lg);
      font-weight: 600
    }

    .slide figcaption span {
      display: block;
      font-size: var(--fs-2xs);
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--gold-300);
      font-weight: 700;
      margin-bottom: .15em
    }

    .slide .zoom {
      position: absolute;
      z-index: 2;
      top: 12px;
      right: 12px;
      width: 34px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: .85rem;
      color: #fff;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .35);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      opacity: 0;
      transition: .35s var(--ease);
      translate: 0 -6px
    }

    @media (hover:hover) {
      .slide:hover img {
        scale: 1.07
      }

      .slide:hover .zoom {
        opacity: 1;
        translate: 0 0
      }
    }

    .snav {
      display: flex;
      gap: var(--sp-2);
      align-items: center;
      justify-content: center
    }

    .snav button {
      width: 46px;
      aspect-ratio: 1;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.2rem;
      background: var(--surface);
      border: 1px solid var(--line);
      color: var(--em-600);
      box-shadow: var(--shadow-sm);
      transition: .3s var(--ease)
    }

    @media (hover:hover) {
      .snav button:hover {
        background: var(--em-50);
        transform: scale(1.07)
      }
    }

    .dots {
      display: flex;
      gap: 6px
    }

    .dots i {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--line-2);
      transition: .35s var(--ease)
    }

    .dots i.on {
      background: var(--gold);
      width: 24px;
      border-radius: 9px
    }

    @media (min-width:1024px) {
      .track {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        gap: var(--sp-2);
        overflow: visible;
        max-width: var(--maxw);
        margin-inline: auto;
        padding-inline: var(--gutter)
      }

      .slide {
        flex: none
      }

      .slide:nth-child(1) {
        grid-column: span 4
      }

      .slide:nth-child(1) img {
        aspect-ratio: 16/9
      }

      .slide:nth-child(2) {
        grid-column: span 2
      }

      .slide:nth-child(2) img {
        aspect-ratio: 3/4
      }

      .slide:nth-child(3),
      .slide:nth-child(4),
      .slide:nth-child(5) {
        grid-column: span 2
      }

      .slide:nth-child(6) {
        grid-column: span 6
      }

      .slide:nth-child(6) img {
        aspect-ratio: 21/9
      }

      .slide:nth-child(7),
      .slide:nth-child(8) {
        grid-column: span 3
      }

      .slide:nth-child(7) img,
      .slide:nth-child(8) img {
        aspect-ratio: 16/9
      }

      .slide:nth-child(9),
      .slide:nth-child(10),
      .slide:nth-child(11) {
        grid-column: span 2
      }

      .snav {
        display: none
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   15 ▸ VIDEO & PETA
   ═══════════════════════════════════════════════════════════════════════ */
    .video,
    .map {
      border-radius: var(--r);
      overflow: hidden;
      box-shadow: var(--shadow);
      position: relative
    }

    .video {
      aspect-ratio: 16/9;
      background: #000;
      border: 0;
      margin-top: var(--sp-3)
    }

    .video>* {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border: 0
    }

    .play {
      position: absolute;
      inset: 0;
      width: 100%;
      display: grid;
      place-items: center;
      gap: var(--sp-2);
      cursor: pointer;
      background: linear-gradient(rgba(3, 26, 19, .25), rgba(3, 26, 19, .5));
      border: 0;
      color: #fff
    }

    .play span.pb {
      width: clamp(60px, 15vw, 84px);
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: clamp(1.15rem, 3.8vw, 1.75rem);
      background: rgba(255, 255, 255, .16);
      border: 2px solid #fff;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      animation: pulse 2.6s infinite;
      padding-left: .12em
    }

    @keyframes pulse {
      70% {
        box-shadow: 0 0 0 26px rgba(255, 255, 255, 0)
      }

      100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0)
      }
    }

    .play small {
      font-size: var(--fs-xs);
      letter-spacing: .2em;
      text-transform: uppercase;
      font-weight: 700;
      text-shadow: 0 2px 12px rgba(0, 0, 0, .6)
    }

    .map {
      border: 1px solid var(--line);
      aspect-ratio: 4/3;
      margin-top: var(--sp-3)
    }

    @media (min-width:768px) {
      .map {
        aspect-ratio: 16/9
      }
    }

    @media (min-width:1280px) {
      .map {
        aspect-ratio: 21/9
      }
    }

    .map iframe {
      width: 100%;
      height: 100%;
      filter: saturate(1.05)
    }

    .map .pin {
      position: absolute;
      left: 50%;
      top: 14px;
      translate: -50% 0;
      pointer-events: none;
      padding: .45em 1em;
      border-radius: 999px;
      font-size: var(--fs-2xs);
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      background: var(--glass);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
      color: var(--em-600)
    }

    /* ═══════════════════════════════════════════════════════════════════════
   16 ▸ INFAQ
   ═══════════════════════════════════════════════════════════════════════ */
    .bank {
      display: grid;
      gap: var(--sp-2);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      margin-top: var(--sp-3)
    }

    .bank .card {
      display: grid;
      gap: .4em;
      background: linear-gradient(150deg, var(--surface), var(--surface-2))
    }

    .bank .bname {
      display: flex;
      align-items: center;
      gap: .6em;
      font-weight: 800;
      font-size: var(--fs-sm);
      letter-spacing: .06em;
      color: var(--em-600)
    }

    .bank .bname em {
      font-style: normal;
      width: 34px;
      height: 24px;
      display: grid;
      place-items: center;
      border-radius: 5px;
      background: var(--em-700);
      color: #fff;
      font-size: .58rem;
      font-weight: 800;
      letter-spacing: .04em
    }

    .bank .no {
      font-family: var(--f-mono);
      font-size: clamp(1.05rem, 4.4vw, 1.4rem);
      font-weight: 700;
      letter-spacing: .06em;
      color: var(--ink)
    }

    .bank .an {
      font-size: var(--fs-xs);
      color: var(--muted)
    }

    .bank .copy {
      margin-top: .4em;
      justify-self: start
    }

    /* ═══════════════════════════════════════════════════════════════════════
   17 ▸ FORM RSVP
   ═══════════════════════════════════════════════════════════════════════ */
    .form {
      display: grid;
      gap: var(--sp-3);
      max-width: 44rem;
      margin: var(--sp-3) auto 0
    }

    .field {
      display: grid;
      gap: 7px;
      position: relative
    }

    label {
      font-size: var(--fs-xs);
      font-weight: 800;
      letter-spacing: .06em;
      color: var(--muted)
    }

    label .req {
      color: #d1662f
    }

    .inp {
      position: relative;
      display: flex;
      align-items: center
    }

    .inp>em {
      position: absolute;
      left: 14px;
      font-style: normal;
      opacity: .55;
      font-size: .98rem;
      pointer-events: none
    }

    .inp.ta>em {
      top: 14px;
      align-self: flex-start
    }

    input,
    select,
    textarea {
      width: 100%;
      padding: .85em 1em;
      min-height: 50px;
      border-radius: var(--r-sm);
      border: 1.4px solid var(--line);
      background: var(--surface-2);
      color: var(--ink);
      font-size: max(16px, var(--fs-sm));
      transition: border-color .25s, box-shadow .25s, background .25s
    }

    .inp>em+input,
    .inp>em+select,
    .inp>em+textarea {
      padding-left: 42px
    }

    textarea {
      min-height: 8em;
      resize: vertical;
      line-height: 1.7
    }

    input::placeholder,
    textarea::placeholder {
      color: var(--muted);
      opacity: .65
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: 0;
      border-color: var(--em-600);
      background: var(--surface);
      box-shadow: var(--ring)
    }

    input.err,
    textarea.err {
      border-color: #d1662f;
      box-shadow: 0 0 0 4px rgba(209, 102, 47, .14)
    }

    .msg {
      font-size: var(--fs-2xs);
      font-weight: 700;
      color: #d1662f;
      min-height: 1em
    }

    .row {
      display: grid;
      gap: var(--sp-2);
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr))
    }

    .pills {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 116px), 1fr))
    }

    .pills label {
      display: grid;
      gap: .2em;
      text-align: center;
      padding: .9em .5em;
      cursor: pointer;
      color: var(--ink);
      background: var(--surface-2);
      border: 1.6px solid var(--line);
      border-radius: var(--r-sm);
      font-size: var(--fs-sm);
      font-weight: 600;
      letter-spacing: 0;
      text-transform: none;
      transition: .28s var(--ease)
    }

    .pills label i {
      font-style: normal;
      font-size: 1.35rem;
      line-height: 1
    }

    .pills input {
      position: absolute;
      opacity: 0;
      width: 1px;
      height: 1px
    }

    .pills label:has(input:checked) {
      background: linear-gradient(150deg, var(--em-600), var(--em-800));
      border-color: transparent;
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(6, 59, 44, .25)
    }

    .pills label:has(input:focus-visible) {
      outline: 2.5px solid var(--gold);
      outline-offset: 2px
    }

    .note-sm {
      font-size: var(--fs-xs);
      color: var(--muted)
    }

    /* Kartu sukses */
    .done-card {
      display: none;
      text-align: center;
      border-color: var(--gold);
      background: linear-gradient(160deg, rgba(201, 162, 39, .09), var(--surface))
    }

    .done-card.on {
      display: block;
      animation: pop .6s var(--ease)
    }

    .done-card .tick-ic {
      width: 64px;
      aspect-ratio: 1;
      margin: 0 auto var(--sp-2);
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 1.7rem;
      color: #fff;
      background: linear-gradient(150deg, var(--em-500), var(--em-800));
      box-shadow: 0 12px 30px rgba(6, 59, 44, .3)
    }

    /* Konfeti */
    .conf {
      position: fixed;
      z-index: 150;
      top: 0;
      width: 9px;
      height: 9px;
      pointer-events: none;
      border-radius: 2px;
      animation: fall linear forwards
    }

    @keyframes fall {
      0% {
        transform: translateY(-10vh) rotate(0);
        opacity: 1
      }

      100% {
        transform: translateY(105vh) rotate(720deg);
        opacity: 0
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   18 ▸ UCAPAN
   ═══════════════════════════════════════════════════════════════════════ */
    .stats {
      display: grid;
      gap: clamp(8px, 1.8vw, 14px);
      grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
      max-width: 36rem;
      margin: var(--sp-3) auto;
      text-align: center
    }

    .stats>div {
      padding: var(--sp-2) 4px;
      border-radius: var(--r-sm);
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-xs);
      font-size: var(--fs-2xs);
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--muted)
    }

    .stats b {
      display: block;
      font-family: var(--f-head);
      font-size: clamp(1.35rem, 5.2vw, 2rem);
      color: var(--em-600);
      letter-spacing: 0;
      text-transform: none
    }

    html[data-theme="dark"] .stats b {
      color: var(--gold-300)
    }

    .filters {
      display: flex;
      gap: 8px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: var(--sp-3)
    }

    .filters button {
      cursor: pointer;
      padding: .5em 1.1em;
      border-radius: 999px;
      font-size: var(--fs-xs);
      font-weight: 700;
      background: var(--surface);
      border: 1.4px solid var(--line);
      color: var(--muted);
      transition: .25s
    }

    .filters button.on {
      background: var(--em-700);
      border-color: var(--em-700);
      color: #fff
    }

    .wishes {
      display: grid;
      gap: var(--sp-2);
      max-height: min(66vh, 520px);
      overflow: auto;
      padding: 2px 2px 2px
    }

    @media (min-width:900px) {
      .wishes {
        grid-template-columns: 1fr 1fr;
        max-height: none;
        overflow: visible
      }
    }

    .wish {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: var(--sp-2);
      align-items: start;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: var(--sp-2) var(--sp-3);
      box-shadow: var(--shadow-xs);
      position: relative;
      overflow: hidden
    }

    .wish::before {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 3px;
      background: linear-gradient(var(--gold), var(--em-600))
    }

    .wish .av {
      width: 42px;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      flex: none;
      font-weight: 800;
      font-size: .86rem;
      color: #fff;
      letter-spacing: .02em;
      background: linear-gradient(150deg, var(--em-600), var(--em-900))
    }

    .wish .who {
      display: flex;
      flex-wrap: wrap;
      gap: .5em;
      align-items: baseline;
      justify-content: space-between
    }

    .wish b {
      font-family: var(--f-head);
      font-size: var(--fs-lg);
      font-weight: 600
    }

    .wish .meta {
      font-size: var(--fs-2xs);
      color: var(--muted);
      letter-spacing: .04em
    }

    .wish p {
      margin: .45em 0 0;
      font-size: var(--fs-sm);
      color: var(--ink-2);
      line-height: 1.7;
      font-style: italic
    }

    .badge {
      font-size: .64rem;
      font-weight: 800;
      padding: .28em .75em;
      border-radius: 999px;
      letter-spacing: .06em;
      background: var(--em-50);
      color: var(--em-600);
      white-space: nowrap;
      border: 1px solid var(--line)
    }

    .badge.no {
      background: #fdeeea;
      color: #b3543d;
      border-color: #f6dbd3
    }

    .badge.mb {
      background: #fdf6e3;
      color: #8d6b16;
      border-color: #f2e6c4
    }

    html[data-theme="dark"] .badge.no {
      background: #3a1f1f;
      color: #ff9c96;
      border-color: #4d2a2a
    }

    html[data-theme="dark"] .badge.mb {
      background: #332b12;
      color: #e8cf7d;
      border-color: #4a3f1c
    }

    /* ═══════════════════════════════════════════════════════════════════════
   19 ▸ QR (gaya tiket)
   ═══════════════════════════════════════════════════════════════════════ */
    .qr {
      position: relative;
      display: grid;
      gap: var(--sp-3);
      justify-items: center;
      text-align: center;
      max-width: 44rem;
      margin: var(--sp-3) auto 0;
      overflow: hidden
    }

    @media (min-width:640px) {
      .qr {
        grid-template-columns: auto 1fr;
        text-align: left;
        justify-items: start;
        align-items: center;
        column-gap: var(--sp-4)
      }

      .qr .qbox {
        grid-row: span 2
      }

      /* notch tiket */
      .qr::before,
      .qr::after {
        content: "";
        position: absolute;
        width: 22px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: var(--bg);
        border: 1px solid var(--line);
        left: calc(clamp(140px, 42vw, 180px) + var(--sp-3) + var(--sp-4) - 11px)
      }

      .qr::before {
        top: -11px
      }

      .qr::after {
        bottom: -11px
      }
    }

    .qbox {
      position: relative;
      background: #fff;
      padding: 14px;
      border-radius: var(--r-sm);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm)
    }

    .qbox img {
      width: clamp(140px, 42vw, 180px);
      aspect-ratio: 1
    }

    .qbox::after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 1px dashed rgba(11, 107, 79, .28);
      border-radius: 8px;
      pointer-events: none
    }

    .qcode {
      font-family: var(--f-mono);
      font-weight: 700;
      letter-spacing: .2em;
      font-size: clamp(1.1rem, 4.6vw, 1.5rem);
      color: var(--em-600);
      background: var(--em-50);
      display: inline-block;
      padding: .25em .7em;
      border-radius: 8px;
      border: 1px dashed var(--line-2)
    }

    /* ═══════════════════════════════════════════════════════════════════════
   20 ▸ PENUTUP
   ═══════════════════════════════════════════════════════════════════════ */
    .closing {
      color: #fff;
      text-align: center;
      background: radial-gradient(120% 90% at 50% 0%, var(--em-800), var(--em-950) 78%)
    }

    .closing::before {
      opacity: .075;
      filter: invert(1) sepia(1) saturate(3) hue-rotate(3deg)
    }

    .closing h2 {
      color: #fff
    }

    .closing p {
      color: rgba(255, 255, 255, .8)
    }

    .closing .minang {
      filter: brightness(1.5)
    }

    .seal {
      width: clamp(104px, 26vw, 138px);
      aspect-ratio: 1;
      margin: var(--sp-3) auto 0;
      border-radius: 50%;
      display: grid;
      place-items: center;
      gap: 2px;
      position: relative;
      border: 1.6px solid rgba(235, 214, 149, .55);
      background: rgba(255, 255, 255, .05);
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px)
    }

    .seal::before {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px dashed rgba(235, 214, 149, .4);
      border-radius: 50%
    }

    .seal span {
      font-family: var(--f-ar);
      font-size: clamp(1rem, 4vw, 1.35rem);
      color: var(--gold-200);
      line-height: 1.5
    }

    .sign {
      margin-top: var(--sp-4);
      font-family: var(--f-head)
    }

    .sign strong {
      display: block;
      font-size: clamp(1.15rem, 4.4vw, 1.55rem);
      color: var(--gold-300);
      font-weight: 600;
      margin-top: .15em
    }

    footer {
      padding: var(--sp-4) 0 calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
      font-size: var(--fs-2xs);
      letter-spacing: .08em;
      color: rgba(255, 255, 255, .45)
    }

    footer .dot {
      opacity: .5;
      margin-inline: .5em
    }

    /* ═══════════════════════════════════════════════════════════════════════
   21 ▸ LIGHTBOX & TOAST
   ═══════════════════════════════════════════════════════════════════════ */
    #lb {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      place-items: center;
      background: rgba(3, 12, 9, .95);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      padding: clamp(46px, 9vw, 70px) clamp(12px, 4vw, 60px)
    }

    #lb.on {
      display: grid
    }

    #lb figure {
      margin: 0;
      display: grid;
      gap: var(--sp-2);
      justify-items: center;
      max-width: 100%
    }

    #lb img {
      max-width: 100%;
      max-height: 78dvh;
      width: auto;
      border-radius: var(--r-sm);
      box-shadow: var(--shadow-lg)
    }

    #lb figcaption {
      color: #fff;
      font-size: var(--fs-sm);
      text-align: center
    }

    #lb figcaption b {
      display: block;
      font-family: var(--f-head);
      font-size: var(--fs-lg)
    }

    #lb .x,
    #lb .arw {
      position: absolute;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .25);
      color: #fff;
      cursor: pointer;
      border-radius: 50%;
      width: 46px;
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      font-size: 1.4rem;
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      transition: .25s
    }

    @media (hover:hover) {

      #lb .x:hover,
      #lb .arw:hover {
        background: rgba(255, 255, 255, .24)
      }
    }

    #lb .x {
      top: max(14px, env(safe-area-inset-top));
      right: 16px
    }

    #lb .arw.p {
      left: clamp(8px, 2vw, 24px);
      top: 50%;
      translate: 0 -50%
    }

    #lb .arw.n {
      right: clamp(8px, 2vw, 24px);
      top: 50%;
      translate: 0 -50%
    }

    #lbCount {
      position: absolute;
      top: max(20px, env(safe-area-inset-top));
      left: 50%;
      translate: -50% 0;
      color: rgba(255, 255, 255, .75);
      font-size: var(--fs-xs);
      font-weight: 700;
      letter-spacing: .14em;
      font-variant-numeric: tabular-nums
    }

    @media (max-width:560px) {
      #lb .arw {
        bottom: max(18px, env(safe-area-inset-bottom));
        top: auto;
        translate: 0 0
      }

      #lb .arw.p {
        left: calc(50% - 60px)
      }

      #lb .arw.n {
        right: calc(50% - 60px)
      }
    }

    #toast {
      position: fixed;
      z-index: 160;
      left: 50%;
      bottom: calc(var(--dock-h) + 26px + env(safe-area-inset-bottom));
      translate: -50% 190%;
      max-width: min(92vw, 27rem);
      display: flex;
      align-items: center;
      gap: .7em;
      padding: .85em 1.3em;
      border-radius: 16px;
      background: linear-gradient(140deg, var(--em-700), var(--em-900));
      color: #fff;
      font-size: var(--fs-sm);
      font-weight: 500;
      box-shadow: var(--shadow-lg);
      transition: translate .5s var(--ease);
      overflow: hidden
    }

    #toast.on {
      translate: -50% 0
    }

    #toast em {
      font-style: normal;
      font-size: 1.15rem;
      flex: none
    }

    #toast i {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 2.5px;
      background: var(--gold-300);
      width: 100%;
      transform-origin: left;
      animation: tp 3.4s linear forwards
    }

    @keyframes tp {
      to {
        transform: scaleX(0)
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════
   22 ▸ ANIMASI / A11Y / PRINT
   ═══════════════════════════════════════════════════════════════════════ */
    .reveal {
      opacity: 0;
      translate: 0 30px;
      transition: opacity .9s var(--ease), translate .9s var(--ease)
    }

    .reveal.in {
      opacity: 1;
      translate: 0 0
    }

    .reveal.sc {
      scale: .965;
      transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease)
    }

    .reveal.sc.in {
      scale: 1
    }

    @media (prefers-reduced-motion:reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important
      }

      .reveal {
        opacity: 1;
        translate: none;
        scale: none
      }

      .dust,
      .conf {
        display: none !important
      }
    }

    @media print {

      .nav,
      .fabs,
      #progress,
      #topbar,
      #toast,
      #lb,
      #cover,
      #loader,
      .play,
      .snav,
      .video,
      form,
      .qr .btn,
      .filters,
      .dust,
      .scroll-cue {
        display: none !important
      }

      body {
        background: #fff;
        color: #000;
        font-size: 11pt
      }

      body::before {
        display: none
      }

      section {
        padding-block: 14pt;
        break-inside: avoid
      }

      .hero,
      .closing {
        background: #fff !important;
        color: #000 !important;
        min-height: auto
      }

      .hero .bg,
      .pattern::before,
      .glow::after {
        display: none
      }

      .hero blockquote,
      .hero cite,
      .closing p,
      .closing h2,
      .closing strong,
      .seal span {
        color: #000 !important
      }

      .shine {
        -webkit-text-fill-color: #8a6d14;
        color: #8a6d14
      }

      .card,
      .wish {
        box-shadow: none;
        border: 1pt solid #ccc
      }

      .track {
        display: block
      }

      .slide {
        margin-bottom: 8pt;
        box-shadow: none
      }

      a::after {
        content: " (" attr(href) ")";
        font-size: 8pt;
        color: #555
      }
    }

    #bp {
      position: fixed;
      z-index: 190;
      left: 8px;
      top: 8px;
      display: none;
      padding: 5px 10px;
      border-radius: 8px;
      background: #111;
      color: #0f0;
      font: 700 11px/1 var(--f-mono)
    }

    body.debug #bp {
      display: block
    }