<!DOCTYPE html>
<html lang="id" class="dark">

<head>
  <!-- Google Tag Manager -->
  <script>
    // Defer GTM to prioritize LCP
    setTimeout(function () {
      (function (w, d, s, l, i) {
        w[l] = w[l] || []; w[l].push({
          'gtm.start':
            new Date().getTime(), event: 'gtm.js'
        }); var f = d.getElementsByTagName(s)[0],
          j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
            'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
      })(window, document, 'script', 'dataLayer', 'GTM-P984Q87P');
    }, 2500); // 2.5s delay
  </script>
  <!-- End Google Tag Manager -->
  <script type="text/plain" id="cf-beacon-workaround">
    // Placeholder to discourage auto-injection of beacon.min.js
    // which triggers ERR_BLOCKED_BY_CLIENT in some browsers.
  </script>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/x-icon" href="/images/logos/favicon.ico?v=2" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tamuu - Platform Undangan Digital Premium & Eksklusif</title>
  <meta name="description"
    content="Tingkatkan momen spesial Anda dengan undangan digital premium dari Tamuu. Desain eksklusif, fitur RSVP modern, dan kemudahan bagi para pasangan pengantin." />


  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

  <link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&family=Poiret+One&display=swap"
    media="print" onload="this.media='all'">
  <noscript>
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Josefin+Sans:wght@300;400;500;600;700&family=Poiret+One&display=swap">
  </noscript>
  <style>
    /* Premium Loader - CSS Native Implementation */
    @keyframes dot-pulse {

      0%,
      15% {
        opacity: 0.1;
      }

      25% {
        opacity: 1;
      }

      35%,
      100% {
        opacity: 0.1;
      }
    }

    .loader-container {
      position: fixed;
      inset: 0;
      background-color: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
    }

    .loader-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
      padding: 4px;
    }

    .loader-dot {
      width: 4px;
      height: 4px;
      background-color: #ffffff;
      opacity: 0.1;
      animation: dot-pulse 1.5s linear infinite;
    }

    /* Snake Sequence Delays (matching PremiumLoader.tsx snakeIndices) */
    /* snakeIndices = [0, 1, 2, 3, 7, 11, 15, 14, 13, 12, 8, 4, 5, 6, 10, 9] */
    /* This maps each grid position to its order in the snake sequence */
    /* Grid position 0 is sequence 0, position 1 is sequence 1, etc. */
    /* Grid position 4 is sequence 11, position 5 is sequence 12, etc. */
    .dot-0 {
      animation-delay: 0.00s;
    }

    /* seq 0 */

    .dot-1 {
      animation-delay: 0.08s;
    }

    /* seq 1 */

    .dot-2 {
      animation-delay: 0.16s;
    }

    /* seq 2 */

    .dot-3 {
      animation-delay: 0.24s;
    }

    /* seq 3 */

    .dot-4 {
      animation-delay: 0.88s;
    }

    /* seq 11 */

    .dot-5 {
      animation-delay: 0.96s;
    }

    /* seq 12 */

    .dot-6 {
      animation-delay: 1.04s;
    }

    /* seq 13 */

    .dot-7 {
      animation-delay: 0.32s;
    }

    /* seq 4 */

    .dot-8 {
      animation-delay: 0.80s;
    }

    /* seq 10 */

    .dot-9 {
      animation-delay: 1.20s;
    }

    /* seq 15 */

    .dot-10 {
      animation-delay: 1.12s;
    }

    /* seq 14 */

    .dot-11 {
      animation-delay: 0.40s;
    }

    /* seq 5 */

    .dot-12 {
      animation-delay: 0.72s;
    }

    /* seq 9 */

    .dot-13 {
      animation-delay: 0.64s;
    }

    /* seq 8 */

    .dot-14 {
      animation-delay: 0.56s;
    }

    /* seq 7 */

    .dot-15 {
      animation-delay: 0.48s;
    }

    /* seq 6 */
  </style>
  <script type="module" crossorigin src="/assets/index-C5dascpF.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/vendor-react-DwqvSbZD.js">
  <link rel="stylesheet" crossorigin href="/assets/index-BvrKWayA.css">
</head>

<body class="bg-black text-white selection:bg-premium-accent selection:text-premium-dark">
  <!-- Google Tag Manager (noscript) -->
  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P984Q87P" height="0" width="0"
      style="display:none;visibility:hidden"></iframe></noscript>
  <!-- End Google Tag Manager (noscript) -->
  <div id="root">
    <div class="loader-container">
      <div class="loader-grid">
        <div class="loader-dot dot-0"></div>
        <div class="loader-dot dot-1"></div>
        <div class="loader-dot dot-2"></div>
        <div class="loader-dot dot-3"></div>
        <div class="loader-dot dot-4"></div>
        <div class="loader-dot dot-5"></div>
        <div class="loader-dot dot-6"></div>
        <div class="loader-dot dot-7"></div>
        <div class="loader-dot dot-8"></div>
        <div class="loader-dot dot-9"></div>
        <div class="loader-dot dot-10"></div>
        <div class="loader-dot dot-11"></div>
        <div class="loader-dot dot-12"></div>
        <div class="loader-dot dot-13"></div>
        <div class="loader-dot dot-14"></div>
        <div class="loader-dot dot-15"></div>
      </div>
    </div>
  </div>
  <!-- Midtrans Snap Script is now loaded dynamically via usePayment hook -->
</body>

</html>