{"id":7,"date":"2026-08-25T14:06:25","date_gmt":"2026-08-25T10:36:25","guid":{"rendered":"https:\/\/arshiakhani.ir\/?page_id=7"},"modified":"2026-08-25T15:25:27","modified_gmt":"2026-08-25T11:55:27","slug":"7-2","status":"publish","type":"page","link":"https:\/\/arshiakhani.ir\/","title":{"rendered":""},"content":{"rendered":"\n<div id=\"wedding-app-root\"><\/div>\n\n<script>\n(function () {\n  \"use strict\";\n\n  \/* =========================================================\n     WORDPRESS OUTER PAGE RESET\n     \u0647\u062f\u0631 \u0648 \u0641\u0648\u062a\u0631 \u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\n  ========================================================= *\/\n\n  if (!document.getElementById(\"wedding-wordpress-reset\")) {\n    const wpStyle = document.createElement(\"style\");\n    wpStyle.id = \"wedding-wordpress-reset\";\n\n    wpStyle.textContent = `\n      html,\n      body {\n        margin: 0 !important;\n        padding: 0 !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        overflow-x: hidden !important;\n      }\n\n      body > header,\n      body > footer,\n      header.site-header,\n      footer.site-footer,\n      #masthead,\n      #colophon,\n      .site-header,\n      .site-footer,\n      .elementor-location-header,\n      .elementor-location-footer,\n      #page > header,\n      #page > footer,\n      .wp-site-blocks > header,\n      .wp-site-blocks > footer,\n      .main-header,\n      .main-footer {\n        display: none !important;\n        visibility: hidden !important;\n        height: 0 !important;\n        min-height: 0 !important;\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      #wedding-app-root {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        margin-left: calc(50% - 50vw) !important;\n        margin-right: calc(50% - 50vw) !important;\n      }\n    `;\n\n    document.head.appendChild(wpStyle);\n  }\n\n\n  \/* =========================================================\n     ROOT\n  ========================================================= *\/\n\n  const host = document.getElementById(\"wedding-app-root\");\n\n  if (!host) return;\n\n  host.style.cssText = `\n    display:block !important;\n    width:100vw !important;\n    max-width:100vw !important;\n    min-height:100vh !important;\n    margin-left:calc(50% - 50vw) !important;\n    margin-right:calc(50% - 50vw) !important;\n    padding:0 !important;\n    position:relative !important;\n    left:0 !important;\n    right:0 !important;\n    transform:none !important;\n    overflow:visible !important;\n  `;\n\n\n  \/* =========================================================\n     SHADOW DOM\n     \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062f\u062e\u0627\u0644\u062a CSS \u0648\u0631\u062f\u067e\u0631\u0633\n  ========================================================= *\/\n\n  const shadow = host.attachShadow\n    ? host.attachShadow({ mode: \"open\" })\n    : null;\n\n  if (!shadow) {\n    console.error(\"Shadow DOM is not supported by this browser.\");\n    return;\n  }\n\n\n  \/* =========================================================\n     COMPLETE WEBSITE\n  ========================================================= *\/\n\n  shadow.innerHTML = `\n\n    <style>\n\n      \/* =====================================================\n         COMPLETE RESET\n      ===================================================== *\/\n\n      :host {\n        all: initial !important;\n        display: block !important;\n        width: 100vw !important;\n        min-height: 100vh !important;\n        direction: rtl !important;\n      }\n\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box !important;\n      }\n\n      html,\n      body {\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      #app {\n        width: 100% !important;\n        min-height: 100vh !important;\n        overflow-x: hidden !important;\n        position: relative !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        color: #392732 !important;\n        background: #fffaf6 !important;\n\n        direction: rtl !important;\n        text-align: right !important;\n\n        -webkit-font-smoothing: antialiased !important;\n        text-rendering: optimizeLegibility !important;\n      }\n\n      button,\n      a,\n      input,\n      textarea,\n      select {\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n      }\n\n\n      \/* =====================================================\n         AUDIO\n      ===================================================== *\/\n\n      #wedding-audio {\n        display: none !important;\n      }\n\n\n      \/* =====================================================\n         INTRO\n      ===================================================== *\/\n\n      .intro {\n        position: fixed !important;\n        inset: 0 !important;\n\n        width: 100vw !important;\n        height: 100vh !important;\n        height: 100dvh !important;\n\n        z-index: 999999 !important;\n\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n\n        padding: 20px !important;\n\n        background:\n          radial-gradient(\n            circle at 50% 25%,\n            #ffffff 0%,\n            #fff8f5 45%,\n            #f5e4e7 100%\n          ) !important;\n\n        opacity: 1 !important;\n        visibility: visible !important;\n\n        transition:\n          opacity .8s ease,\n          visibility .8s ease !important;\n      }\n\n      .intro.gone {\n        opacity: 0 !important;\n        visibility: hidden !important;\n        pointer-events: none !important;\n      }\n\n      .intro-stage {\n        width: 100% !important;\n        max-width: 500px !important;\n\n        display: flex !important;\n        flex-direction: column !important;\n        align-items: center !important;\n\n        text-align: center !important;\n\n        position: relative !important;\n      }\n\n\n      \/* =====================================================\n         INTRO TEXT\n      ===================================================== *\/\n\n      .intro-title {\n        color: #9a5a72 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 11px !important;\n\n        font-weight: 700 !important;\n\n        letter-spacing: 5px !important;\n\n        line-height: 1.5 !important;\n\n        margin: 0 0 18px 0 !important;\n        padding: 0 !important;\n      }\n\n\n      \/* =====================================================\n         ENVELOPE\n      ===================================================== *\/\n\n      .envelope {\n        width: min(310px, 84vw) !important;\n        height: 220px !important;\n\n        position: relative !important;\n\n        margin: 0 auto 22px auto !important;\n\n        cursor: pointer !important;\n\n        perspective: 1000px !important;\n\n        filter:\n          drop-shadow(\n            0 25px 35px rgba(70, 35, 50, .15)\n          ) !important;\n\n        transition:\n          transform .25s ease !important;\n      }\n\n      .envelope:hover {\n        transform: translateY(-4px) !important;\n      }\n\n      .envelope:active {\n        transform: scale(.99) !important;\n      }\n\n\n      .envelope-back {\n        position: absolute !important;\n\n        left: 0 !important;\n        right: 0 !important;\n        top: 35px !important;\n        bottom: 0 !important;\n\n        background:\n          linear-gradient(\n            145deg,\n            #f7e4e7,\n            #ecd3d9\n          ) !important;\n\n        border:\n          1px solid #e5c8cf !important;\n\n        border-radius:\n          5px 5px 15px 15px !important;\n\n        z-index: 1 !important;\n      }\n\n\n      \/* \u0646\u0627\u0645\u0647 \u062f\u0627\u062e\u0644 \u067e\u0627\u06a9\u062a *\/\n\n      .letter {\n        position: absolute !important;\n\n        left: 8% !important;\n        right: 8% !important;\n\n        top: 58px !important;\n\n        height: 145px !important;\n\n        z-index: 3 !important;\n\n        background:\n          linear-gradient(\n            135deg,\n            #ffffff,\n            #fffaf7\n          ) !important;\n\n        border:\n          1px solid #eadbd3 !important;\n\n        border-radius: 3px !important;\n\n        box-shadow:\n          0 8px 20px rgba(60,30,40,.08) !important;\n\n        transition:\n          top 1s cubic-bezier(.2,.8,.2,1),\n          transform 1s cubic-bezier(.2,.8,.2,1) !important;\n      }\n\n      .letter-content {\n        width: 100% !important;\n        height: 100% !important;\n\n        display: flex !important;\n        flex-direction: column !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 8px !important;\n\n        text-align: center !important;\n      }\n\n      .letter-name {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #7f485f !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size: 25px !important;\n        font-weight: 500 !important;\n\n        line-height: 1.4 !important;\n      }\n\n      .letter-small {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #8d737c !important;\n\n        font-size: 11px !important;\n        line-height: 1.8 !important;\n      }\n\n      .letter-sub {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #b0939c !important;\n\n        font-size: 9px !important;\n      }\n\n\n      \/* flap *\/\n\n      .flap {\n        position: absolute !important;\n\n        top: 35px !important;\n        left: 0 !important;\n\n        width: 100% !important;\n        height: 120px !important;\n\n        z-index: 7 !important;\n\n        background:\n          linear-gradient(\n            155deg,\n            #f5e1e5,\n            #e9ced5\n          ) !important;\n\n        clip-path:\n          polygon(\n            0 0,\n            100% 0,\n            50% 100%\n          ) !important;\n\n        transform-origin: top center !important;\n\n        transition:\n          transform 1s cubic-bezier(.2,.8,.2,1) !important;\n\n        backface-visibility: hidden !important;\n      }\n\n\n      \/* \u062c\u0644\u0648\u06cc \u067e\u0627\u06a9\u062a *\/\n\n      .envelope-front {\n        position: absolute !important;\n\n        left: 0 !important;\n        right: 0 !important;\n        bottom: 0 !important;\n\n        height: 150px !important;\n\n        z-index: 6 !important;\n\n        background:\n          linear-gradient(\n            145deg,\n            #f1d9de,\n            #e8ccd2\n          ) !important;\n\n        clip-path:\n          polygon(\n            0 0,\n            50% 52%,\n            100% 0,\n            100% 100%,\n            0 100%\n          ) !important;\n\n        border-radius:\n          0 0 15px 15px !important;\n\n        pointer-events: none !important;\n      }\n\n\n      \/* \u0645\u0647\u0631 *\/\n\n      .seal {\n        position: absolute !important;\n\n        left: 50% !important;\n        top: 128px !important;\n\n        width: 55px !important;\n        height: 55px !important;\n\n        z-index: 20 !important;\n\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n\n        transform:\n          translate(-50%, -50%) !important;\n\n        border-radius: 50% !important;\n\n        background:\n          radial-gradient(\n            circle,\n            #b86d84,\n            #8b4d65\n          ) !important;\n\n        border:\n          3px solid #f7e4e6 !important;\n\n        box-shadow:\n          0 6px 15px rgba(100,40,60,.2) !important;\n\n        color: #ffffff !important;\n\n        transition:\n          opacity .35s ease,\n          transform .7s ease !important;\n      }\n\n      .seal span {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #ffffff !important;\n\n        font-size: 21px !important;\n        line-height: 1 !important;\n      }\n\n\n      \/* \u062e\u0637 \u067e\u0627\u06a9\u062a *\/\n\n      .lace {\n        position: absolute !important;\n\n        left: 8% !important;\n        right: 8% !important;\n        bottom: 17px !important;\n\n        height: 1px !important;\n\n        z-index: 12 !important;\n\n        background:\n          repeating-linear-gradient(\n            90deg,\n            rgba(150,85,110,.5) 0 5px,\n            transparent 5px 9px\n          ) !important;\n      }\n\n\n      \/* \u062d\u0627\u0644\u062a \u0628\u0627\u0632 *\/\n\n      .envelope.opened .flap {\n        transform:\n          rotateX(-175deg) !important;\n      }\n\n      .envelope.opened .letter {\n        top: 0 !important;\n\n        transform:\n          translateY(-48px) !important;\n      }\n\n      .envelope.opened .seal {\n        opacity: 0 !important;\n\n        transform:\n          translate(-50%, -50%)\n          scale(.45) !important;\n      }\n\n\n      \/* =====================================================\n         QUESTION\n      ===================================================== *\/\n\n      .question {\n        margin: 0 0 13px 0 !important;\n        padding: 0 !important;\n\n        color: #543842 !important;\n\n        font-size: 16px !important;\n        font-weight: 700 !important;\n\n        line-height: 1.7 !important;\n\n        text-align: center !important;\n      }\n\n      .choices {\n        width: 100% !important;\n\n        display: flex !important;\n\n        flex-direction: row !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 10px !important;\n\n        flex-wrap: wrap !important;\n      }\n\n      .choice {\n        appearance: none !important;\n        -webkit-appearance: none !important;\n\n        min-width: 125px !important;\n        height: 43px !important;\n\n        margin: 0 !important;\n        padding:\n          0 18px !important;\n\n        border:\n          1px solid #9b5c73 !important;\n\n        border-radius: 50px !important;\n\n        outline: none !important;\n\n        background: #9b5c73 !important;\n\n        color: #ffffff !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 12px !important;\n        font-weight: 700 !important;\n\n        line-height: 43px !important;\n\n        text-align: center !important;\n\n        cursor: pointer !important;\n\n        box-shadow:\n          0 7px 16px rgba(100,50,70,.12) !important;\n\n        transition:\n          transform .2s ease,\n          box-shadow .2s ease !important;\n      }\n\n      .choice:hover {\n        transform: translateY(-2px) !important;\n\n        box-shadow:\n          0 11px 22px rgba(100,50,70,.18) !important;\n      }\n\n      .choice:active {\n        transform: scale(.97) !important;\n      }\n\n      .choice-no {\n        background: #ffffff !important;\n        color: #9b5c73 !important;\n      }\n\n\n      .hint {\n        margin: 14px 0 0 0 !important;\n        padding: 0 !important;\n\n        color: #a2868e !important;\n\n        font-size: 10px !important;\n        line-height: 1.7 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         MAIN\n      ===================================================== *\/\n\n      .main {\n        display: block !important;\n\n        width: 100% !important;\n        min-height: 100vh !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        opacity: 1 !important;\n\n        background: #fffaf6 !important;\n      }\n\n\n      \/* =====================================================\n         HERO\n      ===================================================== *\/\n\n      .hero {\n        position: relative !important;\n\n        width: 100% !important;\n        min-height: 100vh !important;\n        min-height: 100dvh !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        padding:\n          65px 20px 55px 20px !important;\n\n        overflow: hidden !important;\n\n        background:\n          radial-gradient(\n            circle at 85% 15%,\n            #ead7dc 0%,\n            rgba(234,215,220,.4) 20%,\n            transparent 42%\n          ),\n          radial-gradient(\n            circle at 10% 85%,\n            #f3e0d8 0%,\n            transparent 36%\n          ),\n          #fffaf6 !important;\n\n        text-align: center !important;\n      }\n\n      .hero::before {\n        content: \"\" !important;\n\n        position: absolute !important;\n\n        inset: 18px !important;\n\n        border:\n          1px solid rgba(150,90,110,.12) !important;\n\n        pointer-events: none !important;\n      }\n\n      .hero-inner {\n        position: relative !important;\n\n        z-index: 2 !important;\n\n        width: 100% !important;\n        max-width: 800px !important;\n\n        margin: 0 auto !important;\n\n        text-align: center !important;\n      }\n\n\n      .eyebrow {\n        margin: 0 0 11px 0 !important;\n        padding: 0 !important;\n\n        color: #985a71 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 11px !important;\n        font-weight: 700 !important;\n\n        letter-spacing: 3px !important;\n        line-height: 1.5 !important;\n      }\n\n      .tiny-line {\n        width: 45px !important;\n        height: 1px !important;\n\n        margin:\n          0 auto 16px auto !important;\n\n        padding: 0 !important;\n\n        background: #9b5c73 !important;\n      }\n\n\n      .hero-title {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #402c35 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size:\n          clamp(40px, 10vw, 78px) !important;\n\n        font-weight: 500 !important;\n\n        line-height: 1.35 !important;\n\n        text-align: center !important;\n      }\n\n\n      .date-badge {\n        display: inline-flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        min-height: 40px !important;\n\n        margin:\n          17px auto 21px auto !important;\n\n        padding:\n          5px 23px !important;\n\n        border:\n          1px solid #d8b8c2 !important;\n\n        border-radius: 50px !important;\n\n        background:\n          rgba(255,255,255,.7) !important;\n\n        color: #8f5269 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 13px !important;\n        font-weight: 700 !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         IMAGE\n      ===================================================== *\/\n\n      .photo-wrap {\n        width:\n          min(320px, 78vw) !important;\n\n        aspect-ratio: 4 \/ 5 !important;\n\n        margin:\n          15px auto 22px auto !important;\n\n        padding: 7px !important;\n\n        background:\n          linear-gradient(\n            145deg,\n            #ffffff,\n            #f6e8e5\n          ) !important;\n\n        border:\n          1px solid rgba(150,90,110,.23) !important;\n\n        border-radius:\n          42px 42px 12px 12px !important;\n\n        box-shadow:\n          0 22px 50px rgba(70,40,50,.15) !important;\n      }\n\n      .photo-frame {\n        width: 100% !important;\n        height: 100% !important;\n\n        overflow: hidden !important;\n\n        border-radius:\n          35px 35px 7px 7px !important;\n      }\n\n      .photo {\n        display: block !important;\n\n        width: 100% !important;\n        height: 100% !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        border: 0 !important;\n        outline: none !important;\n\n        object-fit: cover !important;\n\n        animation:\n          cinema 12s ease-in-out infinite alternate !important;\n      }\n\n      @keyframes cinema {\n        from {\n          transform: scale(1) !important;\n        }\n\n        to {\n          transform: scale(1.08) !important;\n        }\n      }\n\n\n      .hero-copy {\n        width: 100% !important;\n        max-width: 570px !important;\n\n        margin:\n          0 auto !important;\n\n        padding: 0 !important;\n\n        color: #755d65 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 14px !important;\n        font-weight: 400 !important;\n\n        line-height: 2.1 !important;\n\n        text-align: center !important;\n      }\n\n\n      .scroll-hint {\n        margin:\n          27px auto 0 auto !important;\n        padding: 0 !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 8px !important;\n\n        color: #a58c94 !important;\n\n        font-size: 9px !important;\n\n        text-align: center !important;\n      }\n\n      .scroll-arrow {\n        width: 7px !important;\n        height: 7px !important;\n\n        border-right:\n          1px solid #9b5c73 !important;\n\n        border-bottom:\n          1px solid #9b5c73 !important;\n\n        transform:\n          rotate(45deg) !important;\n\n        animation:\n          scrollArrow 1.5s ease-in-out infinite !important;\n      }\n\n      @keyframes scrollArrow {\n        0%,100% {\n          transform:\n            translateY(0)\n            rotate(45deg) !important;\n        }\n\n        50% {\n          transform:\n            translateY(5px)\n            rotate(45deg) !important;\n        }\n      }\n\n\n      \/* =====================================================\n         SECTIONS\n      ===================================================== *\/\n\n      .section {\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n          78px 20px !important;\n\n        background: #fffaf6 !important;\n\n        text-align: center !important;\n      }\n\n      .countdown-section {\n        background:\n          linear-gradient(\n            180deg,\n            #fffaf6,\n            #fdf3f1\n          ) !important;\n      }\n\n      .location-section {\n        background:\n          linear-gradient(\n            180deg,\n            #fdf3f1,\n            #fffaf6\n          ) !important;\n      }\n\n      .section-inner {\n        width: 100% !important;\n        max-width: 850px !important;\n\n        margin: 0 auto !important;\n        padding: 0 !important;\n\n        text-align: center !important;\n      }\n\n      .kicker {\n        margin:\n          0 0 10px 0 !important;\n\n        padding: 0 !important;\n\n        color: #9b5c73 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 10px !important;\n        font-weight: 700 !important;\n\n        letter-spacing: 4px !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .section-title {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #402c35 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size:\n          clamp(30px, 7vw, 50px) !important;\n\n        font-weight: 500 !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .title-line {\n        width: 100% !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 10px !important;\n\n        margin:\n          13px auto 19px auto !important;\n      }\n\n      .title-line::before,\n      .title-line::after {\n        content: \"\" !important;\n\n        width: 40px !important;\n        height: 1px !important;\n\n        background: #d9bdc5 !important;\n      }\n\n      .heart {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #a05d76 !important;\n\n        font-size: 14px !important;\n        line-height: 1 !important;\n      }\n\n      .message {\n        max-width: 550px !important;\n\n        margin:\n          0 auto 30px auto !important;\n\n        padding: 0 !important;\n\n        color: #806a72 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 14px !important;\n\n        line-height: 2 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         COUNTDOWN\n      ===================================================== *\/\n\n      .countdown {\n        width: 100% !important;\n\n        display: flex !important;\n\n        flex-direction: row !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 9px !important;\n\n        direction: ltr !important;\n\n        flex-wrap: nowrap !important;\n      }\n\n      .unit {\n        flex:\n          1 1 0 !important;\n\n        width: 25% !important;\n\n        min-width: 0 !important;\n        max-width: 100px !important;\n\n        min-height: 91px !important;\n\n        margin: 0 !important;\n        padding:\n          14px 5px !important;\n\n        display: flex !important;\n\n        flex-direction: column !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border:\n          1px solid #ead7d8 !important;\n\n        border-radius: 16px !important;\n\n        background:\n          rgba(255,255,255,.75) !important;\n\n        box-shadow:\n          0 10px 25px rgba(70,40,50,.05) !important;\n\n        text-align: center !important;\n      }\n\n      .number {\n        display: block !important;\n\n        width: 100% !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #874e65 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size: 29px !important;\n        font-weight: 400 !important;\n\n        line-height: 1 !important;\n\n        text-align: center !important;\n      }\n\n      .unit-label {\n        display: block !important;\n\n        width: 100% !important;\n\n        margin:\n          8px 0 0 0 !important;\n\n        padding: 0 !important;\n\n        color: #927780 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 10px !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .separator {\n        flex:\n          0 0 auto !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #b48596 !important;\n\n        font-family:\n          Georgia,\n          serif !important;\n\n        font-size: 22px !important;\n\n        line-height: 1 !important;\n      }\n\n\n      \/* =====================================================\n         LOCATION\n      ===================================================== *\/\n\n      .info {\n        width: 100% !important;\n\n        display: grid !important;\n\n        grid-template-columns:\n          repeat(3, minmax(0, 1fr)) !important;\n\n        gap: 13px !important;\n\n        margin:\n          30px auto !important;\n\n        padding: 0 !important;\n      }\n\n      .info-item {\n        min-width: 0 !important;\n\n        min-height: 145px !important;\n\n        margin: 0 !important;\n\n        padding:\n          20px 10px !important;\n\n        display: flex !important;\n\n        flex-direction: column !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border:\n          1px solid #ead7d8 !important;\n\n        border-radius: 18px !important;\n\n        background:\n          rgba(255,255,255,.7) !important;\n\n        box-shadow:\n          0 10px 28px rgba(70,40,50,.05) !important;\n\n        text-align: center !important;\n      }\n\n      .info-icon {\n        width: 43px !important;\n        height: 43px !important;\n\n        flex: 0 0 43px !important;\n\n        margin:\n          0 0 11px 0 !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border-radius: 50% !important;\n\n        background: #f2e0e4 !important;\n\n        color: #92546c !important;\n\n        font-size: 19px !important;\n\n        line-height: 1 !important;\n      }\n\n      .info-label {\n        margin:\n          0 0 6px 0 !important;\n        padding: 0 !important;\n\n        color: #a1818b !important;\n\n        font-size: 9px !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .info-value {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #503943 !important;\n\n        font-size: 13px !important;\n        font-weight: 700 !important;\n\n        line-height: 1.7 !important;\n\n        text-align: center !important;\n      }\n\n\n      .map-button {\n        display: inline-flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 12px !important;\n\n        min-height: 46px !important;\n\n        margin: 0 !important;\n        padding:\n          0 25px !important;\n\n        border:\n          1px solid #9b5c73 !important;\n\n        border-radius: 50px !important;\n\n        background: #9b5c73 !important;\n\n        color: #ffffff !important;\n\n        text-decoration: none !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 12px !important;\n        font-weight: 700 !important;\n\n        line-height: 46px !important;\n\n        text-align: center !important;\n\n        box-shadow:\n          0 10px 23px rgba(100,50,70,.17) !important;\n\n        transition:\n          transform .2s ease,\n          box-shadow .2s ease !important;\n      }\n\n      .map-button:hover {\n        color: #ffffff !important;\n\n        text-decoration: none !important;\n\n        transform: translateY(-2px) !important;\n\n        box-shadow:\n          0 14px 28px rgba(100,50,70,.22) !important;\n      }\n\n\n      \/* =====================================================\n         FINAL SECTION\n      ===================================================== *\/\n\n      .final-section {\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n          80px 20px !important;\n\n        background:\n          radial-gradient(\n            circle at 50% 30%,\n            #f4e1e4,\n            #fffaf6 65%\n          ) !important;\n\n        text-align: center !important;\n      }\n\n      .final-inner {\n        width: 100% !important;\n        max-width: 700px !important;\n\n        margin: 0 auto !important;\n\n        text-align: center !important;\n      }\n\n      .final-heart {\n        margin:\n          0 0 14px 0 !important;\n\n        padding: 0 !important;\n\n        color: #9b5c73 !important;\n\n        font-size: 32px !important;\n\n        line-height: 1 !important;\n\n        animation:\n          heartbeat 1.5s ease-in-out infinite !important;\n      }\n\n      @keyframes heartbeat {\n        0%,100% {\n          transform: scale(1) !important;\n        }\n\n        50% {\n          transform: scale(1.12) !important;\n        }\n      }\n\n      .final-small {\n        margin:\n          0 0 10px 0 !important;\n        padding: 0 !important;\n\n        color: #9b5c73 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 9px !important;\n\n        letter-spacing: 4px !important;\n\n        line-height: 1.5 !important;\n      }\n\n      .final-name {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #402c35 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size:\n          clamp(35px, 8vw, 60px) !important;\n\n        font-weight: 500 !important;\n\n        line-height: 1.4 !important;\n\n        text-align: center !important;\n      }\n\n      .final-text {\n        margin:\n          14px 0 0 0 !important;\n        padding: 0 !important;\n\n        color: #806a72 !important;\n\n        font-size: 13px !important;\n\n        line-height: 2 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         WEDDING FOOTER\n      ===================================================== *\/\n\n      .wedding-footer {\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n          30px 20px !important;\n\n        background: #3e2a33 !important;\n\n        color: #ffffff !important;\n\n        text-align: center !important;\n      }\n\n      .footer-name {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #ffffff !important;\n\n        font-family:\n          Georgia,\n          serif !important;\n\n        font-size: 18px !important;\n\n        line-height: 1.8 !important;\n      }\n\n      .footer-text {\n        margin: 2px 0 0 0 !important;\n        padding: 0 !important;\n\n        color: #dcbcc5 !important;\n\n        font-size: 10px !important;\n\n        line-height: 1.8 !important;\n      }\n\n\n      \/* =====================================================\n         MUSIC BUTTON\n      ===================================================== *\/\n\n      .music-toggle {\n        position: fixed !important;\n\n        left: 18px !important;\n        bottom: 18px !important;\n\n        z-index: 99990 !important;\n\n        width: 48px !important;\n        height: 48px !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        display: none !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border: 0 !important;\n        outline: none !important;\n\n        border-radius: 50% !important;\n\n        background: #7c5068 !important;\n\n        color: #ffffff !important;\n\n        font-size: 20px !important;\n\n        line-height: 48px !important;\n\n        cursor: pointer !important;\n\n        box-shadow:\n          0 10px 25px rgba(60,30,45,.22) !important;\n\n        text-align: center !important;\n      }\n\n      .music-toggle.show {\n        display: flex !important;\n      }\n\n\n      \/* =====================================================\n         PETALS\n      ===================================================== *\/\n\n      .petals {\n        position: fixed !important;\n\n        inset: 0 !important;\n\n        z-index: 9980 !important;\n\n        pointer-events: none !important;\n\n        overflow: hidden !important;\n      }\n\n      .petal {\n        position: absolute !important;\n\n        top: -25px !important;\n\n        width: 8px !important;\n        height: 12px !important;\n\n        border-radius:\n          100% 0 100% 0 !important;\n\n        background:\n          linear-gradient(\n            135deg,\n            #e4b4bf,\n            #f1d3d8\n          ) !important;\n\n        opacity: .7 !important;\n\n        animation:\n          fall linear infinite !important;\n      }\n\n      @keyframes fall {\n        0% {\n          transform:\n            translate3d(0,-30px,0)\n            rotate(0deg) !important;\n\n          opacity: 0 !important;\n        }\n\n        10% {\n          opacity: .7 !important;\n        }\n\n        100% {\n          transform:\n            translate3d(90px,110vh,0)\n            rotate(720deg) !important;\n\n          opacity: 0 !important;\n        }\n      }\n\n\n      \/* =====================================================\n         FIREWORKS\n      ===================================================== *\/\n\n      #fireworks {\n        position: fixed !important;\n\n        inset: 0 !important;\n\n        width: 100vw !important;\n        height: 100vh !important;\n\n        z-index: 9970 !important;\n\n        pointer-events: none !important;\n      }\n\n\n      \/* =====================================================\n         REVEAL\n      ===================================================== *\/\n\n      .reveal {\n        opacity: 0 !important;\n\n        transform:\n          translateY(22px) !important;\n\n        transition:\n          opacity .8s ease,\n          transform .8s ease !important;\n      }\n\n      .reveal.visible {\n        opacity: 1 !important;\n\n        transform:\n          translateY(0) !important;\n      }\n\n\n      \/* =====================================================\n         MOBILE\n      ===================================================== *\/\n\n      @media (max-width: 700px) {\n\n        .intro {\n          padding:\n            15px !important;\n        }\n\n        .intro-title {\n          margin-bottom: 12px !important;\n\n          font-size: 10px !important;\n\n          letter-spacing: 4px !important;\n        }\n\n        .envelope {\n          width:\n            min(290px, 82vw) !important;\n\n          height: 205px !important;\n\n          margin-bottom: 18px !important;\n        }\n\n        .envelope-back {\n          top: 32px !important;\n        }\n\n        .flap {\n          top: 32px !important;\n          height: 112px !important;\n        }\n\n        .envelope-front {\n          height: 140px !important;\n        }\n\n        .letter {\n          top: 53px !important;\n          height: 136px !important;\n        }\n\n        .letter-name {\n          font-size: 23px !important;\n        }\n\n        .seal {\n          top: 119px !important;\n\n          width: 50px !important;\n          height: 50px !important;\n        }\n\n        .question {\n          font-size: 15px !important;\n\n          margin-bottom: 9px !important;\n        }\n\n        .choice {\n          min-width: 118px !important;\n\n          height: 40px !important;\n\n          line-height: 40px !important;\n\n          padding:\n            0 13px !important;\n\n          font-size: 11px !important;\n        }\n\n        .hint {\n          margin-top: 9px !important;\n        }\n\n        .hero {\n          padding:\n            55px 16px 50px 16px !important;\n        }\n\n        .hero::before {\n          inset: 10px !important;\n        }\n\n        .photo-wrap {\n          width:\n            min(285px, 77vw) !important;\n        }\n\n        .hero-copy {\n          font-size: 13px !important;\n        }\n\n        .section {\n          padding:\n            68px 15px !important;\n        }\n\n        .countdown {\n          gap: 4px !important;\n        }\n\n        .unit {\n          min-height: 82px !important;\n\n          padding:\n            12px 3px !important;\n\n          border-radius: 13px !important;\n        }\n\n        .number {\n          font-size: 24px !important;\n        }\n\n        .unit-label {\n          font-size: 9px !important;\n\n          margin-top: 7px !important;\n        }\n\n        .separator {\n          font-size: 17px !important;\n        }\n\n        .info {\n          grid-template-columns:\n            1fr !important;\n\n          max-width: 370px !important;\n        }\n\n        .info-item {\n          min-height: 105px !important;\n        }\n\n        .map-button {\n          width: auto !important;\n          max-width: 100% !important;\n        }\n\n        .final-section {\n          padding:\n            70px 15px !important;\n        }\n\n      }\n\n\n      @media (max-width: 380px) {\n\n        .countdown {\n          gap: 2px !important;\n        }\n\n        .unit {\n          min-height: 77px !important;\n        }\n\n        .number {\n          font-size: 21px !important;\n        }\n\n        .unit-label {\n          font-size: 8px !important;\n        }\n\n        .separator {\n          font-size: 14px !important;\n        }\n\n        .choice {\n          min-width: 110px !important;\n        }\n\n      }\n\n\n      @media (prefers-reduced-motion: reduce) {\n\n        *,\n        *::before,\n        *::after {\n          animation-duration:\n            .01ms !important;\n\n          animation-iteration-count:\n            1 !important;\n\n          transition-duration:\n            .01ms !important;\n        }\n\n      }\n\n    <\/style>\n\n\n    <div id=\"app\">\n\n      <!-- ===================================================\n           AUDIO\n      ==================================================== -->\n\n      <audio\n        id=\"wedding-audio\"\n        preload=\"auto\"\n        loop\n        playsinline\n        src=\"https:\/\/arshiakhani.ir\/wp-content\/uploads\/2026\/08\/music.mp3\"\n      ><\/audio>\n\n\n      <!-- ===================================================\n           EFFECTS\n      ==================================================== -->\n\n      <canvas id=\"fireworks\"><\/canvas>\n\n      <div class=\"petals\" id=\"petals\"><\/div>\n\n\n      <!-- ===================================================\n           INTRO\n      ==================================================== -->\n\n      <div class=\"intro\" id=\"intro\">\n\n        <div class=\"intro-stage\">\n\n          <div class=\"intro-title\">\n            WEDDING INVITATION\n          <\/div>\n\n\n          <div\n            class=\"envelope\"\n            id=\"envelope\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647\"\n          >\n\n            <div class=\"envelope-back\"><\/div>\n\n\n            <div class=\"letter\">\n\n              <div class=\"letter-content\">\n\n                <div class=\"letter-name\">\n                  \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n                <\/div>\n\n                <div class=\"letter-small\">\n                  \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f \u0645\u0627\n                <\/div>\n\n                <div class=\"letter-sub\">\n                  \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"flap\"><\/div>\n\n\n            <div class=\"envelope-front\"><\/div>\n\n\n            <div class=\"lace\"><\/div>\n\n\n            <div class=\"seal\">\n              <span>\u2665<\/span>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"question\">\n            \u0622\u06cc\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u062e\u0634 \u0634\u0648\u062f\u061f\n          <\/div>\n\n\n          <div class=\"choices\">\n\n            <button\n              type=\"button\"\n              class=\"choice\"\n              id=\"yes\"\n            >\n              \u266b \u0628\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc\n            <\/button>\n\n            <button\n              type=\"button\"\n              class=\"choice choice-no\"\n              id=\"no\"\n            >\n              \u0628\u062f\u0648\u0646 \u0645\u0648\u0633\u06cc\u0642\u06cc\n            <\/button>\n\n          <\/div>\n\n\n          <div class=\"hint\">\n            \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06a9\u062a \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ===================================================\n           MAIN\n      ==================================================== -->\n\n      <main class=\"main\" id=\"main\">\n\n\n        <!-- HERO -->\n\n        <section class=\"hero\" id=\"home\">\n\n          <div class=\"hero-inner\">\n\n            <div class=\"eyebrow reveal\">\n              \u062f\u0639\u0648\u062a \u0628\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f\n            <\/div>\n\n            <div class=\"tiny-line reveal\"><\/div>\n\n\n            <h1 class=\"hero-title reveal\">\n              \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n            <\/h1>\n\n\n            <div class=\"date-badge reveal\">\n              \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n            <\/div>\n\n\n            <div class=\"photo-wrap reveal\">\n\n              <div class=\"photo-frame\">\n\n                <img decoding=\"async\"\n                  class=\"photo\"\n                  src=\"https:\/\/arshiakhani.ir\/wp-content\/uploads\/2026\/08\/childhood.jpg\"\n                  alt=\"\u0639\u06a9\u0633 \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\"\n                >\n\n              <\/div>\n\n            <\/div>\n\n\n            <p class=\"hero-copy reveal\">\n              \u0628\u0627 \u0639\u0634\u0642\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc \u0622\u063a\u0627\u0632 \u0632\u0646\u062f\u06af\u06cc \u0645\u0634\u062a\u0631\u06a9\u0645\u0627\u0646 \u062f\u0639\u0648\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\n            <\/p>\n\n\n            <div class=\"scroll-hint reveal\">\n\n              <span class=\"scroll-arrow\"><\/span>\n\n              \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f\n\n            <\/div>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- COUNTDOWN -->\n\n        <section class=\"section countdown-section\">\n\n          <div class=\"section-inner\">\n\n            <div class=\"kicker reveal\">\n              OUR SPECIAL DAY\n            <\/div>\n\n\n            <h2 class=\"section-title reveal\">\n              \u0631\u0648\u0632 \u0628\u0632\u0631\u06af \u0645\u0627\n            <\/h2>\n\n\n            <div class=\"title-line reveal\">\n              <span class=\"heart\">\u2665<\/span>\n            <\/div>\n\n\n            <p class=\"message reveal\">\n              \u062d\u0636\u0648\u0631 \u0634\u0645\u0627 \u0639\u0632\u06cc\u0632\u0627\u0646\u060c \u0627\u06cc\u0646 \u0634\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u06a9\u0627\u0645\u0644\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n            <\/p>\n\n\n            <div class=\"countdown reveal\" id=\"countdown\">\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"days\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u0631\u0648\u0632\n                <\/span>\n\n              <\/div>\n\n\n              <span class=\"separator\">\n                :\n              <\/span>\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"hours\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u0633\u0627\u0639\u062a\n                <\/span>\n\n              <\/div>\n\n\n              <span class=\"separator\">\n                :\n              <\/span>\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"minutes\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u062f\u0642\u06cc\u0642\u0647\n                <\/span>\n\n              <\/div>\n\n\n              <span class=\"separator\">\n                :\n              <\/span>\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"seconds\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u062b\u0627\u0646\u06cc\u0647\n                <\/span>\n\n              <\/div>\n\n\n            <\/div>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- LOCATION -->\n\n        <section\n          class=\"section location-section\"\n          id=\"location\"\n        >\n\n          <div class=\"section-inner\">\n\n            <div class=\"kicker reveal\">\n              LOCATION\n            <\/div>\n\n\n            <h2 class=\"section-title reveal\">\n              \u0644\u0648\u06a9\u06cc\u0634\u0646 \u0645\u0631\u0627\u0633\u0645\n            <\/h2>\n\n\n            <div class=\"title-line reveal\">\n              <span class=\"heart\">\u2665<\/span>\n            <\/div>\n\n\n            <div class=\"info reveal\">\n\n\n              <div class=\"info-item\">\n\n                <div class=\"info-icon\">\n                  \u2316\n                <\/div>\n\n                <div class=\"info-label\">\n                  \u0645\u06a9\u0627\u0646\n                <\/div>\n\n                <div class=\"info-value\">\n                  \u06a9\u0627\u062e \u062a\u0627\u0644\u0627\u0631 \u0622\u0631\u0627\u0645\u06cc\u0633\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"info-item\">\n\n                <div class=\"info-icon\">\n                  \u25f7\n                <\/div>\n\n                <div class=\"info-label\">\n                  \u0632\u0645\u0627\u0646\n                <\/div>\n\n                <div class=\"info-value\">\n                  \u06f1\u06f9:\u06f0\u06f0 \u0627\u0644\u06cc \u06f2\u06f2:\u06f0\u06f0\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"info-item\">\n\n                <div class=\"info-icon\">\n                  \ud83d\udcc5\n                <\/div>\n\n                <div class=\"info-label\">\n                  \u062a\u0627\u0631\u06cc\u062e\n                <\/div>\n\n                <div class=\"info-value\">\n                  \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n                <\/div>\n\n              <\/div>\n\n\n            <\/div>\n\n\n            <a\n              class=\"map-button reveal\"\n              href=\"https:\/\/nshn.ir\/2drbv8BkWx-DC7\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <span>\n                \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0633\u06cc\u0631 \u062f\u0631 \u0646\u0634\u0627\u0646\n              <\/span>\n\n              <span>\n                \u2190\n              <\/span>\n            <\/a>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- FINAL -->\n\n        <section class=\"final-section\">\n\n          <div class=\"final-inner\">\n\n            <div class=\"final-heart reveal\">\n              \u2665\n            <\/div>\n\n            <div class=\"final-small reveal\">\n              WITH LOVE\n            <\/div>\n\n            <h2 class=\"final-name reveal\">\n              \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n            <\/h2>\n\n            <p class=\"final-text reveal\">\n              \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n            <\/p>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- WEDDING FOOTER -->\n\n        <footer class=\"wedding-footer\">\n\n          <div class=\"footer-name\">\n            \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n          <\/div>\n\n          <div class=\"footer-text\">\n            \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n          <\/div>\n\n        <\/footer>\n\n\n      <\/main>\n\n\n      <!-- ===================================================\n           MUSIC BUTTON\n      ==================================================== -->\n\n      <button\n        type=\"button\"\n        class=\"music-toggle\"\n        id=\"music-toggle\"\n        aria-label=\"\u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      >\n        \u266b\n      <\/button>\n\n\n    <\/div>\n  `;\n\n\n  \/* =========================================================\n     ELEMENTS\n  ========================================================= *\/\n\n  const app =\n    shadow.getElementById(\"app\");\n\n  const audio =\n    shadow.getElementById(\"wedding-audio\");\n\n  const intro =\n    shadow.getElementById(\"intro\");\n\n  const envelope =\n    shadow.getElementById(\"envelope\");\n\n  const yes =\n    shadow.getElementById(\"yes\");\n\n  const no =\n    shadow.getElementById(\"no\");\n\n  const musicToggle =\n    shadow.getElementById(\"music-toggle\");\n\n\n  let entered = false;\n\n\n  \/* =========================================================\n     AUDIO\n  ========================================================= *\/\n\n  audio.volume = 0.65;\n\n\n  function playMusic() {\n\n    audio.muted = false;\n\n    try {\n\n      const promise =\n        audio.play();\n\n      if (promise && promise.catch) {\n\n        promise.catch(function (error) {\n\n          console.log(\n            \"Music playback was blocked:\",\n            error\n          );\n\n        });\n\n      }\n\n    } catch (error) {\n\n      console.log(\n        \"Music playback error:\",\n        error\n      );\n\n    }\n\n  }\n\n\n  function stopMusic() {\n\n    audio.pause();\n\n  }\n\n\n  audio.addEventListener(\n    \"play\",\n    function () {\n\n      musicToggle.textContent = \"\u266b\";\n\n      musicToggle.setAttribute(\n        \"aria-label\",\n        \"\u062a\u0648\u0642\u0641 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      );\n\n    }\n  );\n\n\n  audio.addEventListener(\n    \"pause\",\n    function () {\n\n      musicToggle.textContent = \"\ud83d\udd07\";\n\n      musicToggle.setAttribute(\n        \"aria-label\",\n        \"\u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      );\n\n    }\n  );\n\n\n  \/* =========================================================\n     ENTER\n  ========================================================= *\/\n\n  function enter(withMusic) {\n\n    if (entered) return;\n\n    entered = true;\n\n\n    \/*\n      \u0627\u0648\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u0627\u06a9\u062a\n    *\/\n\n    envelope.classList.add(\"opened\");\n\n\n    \/*\n      \u0686\u0648\u0646 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062f\u0631 \u067e\u0627\u0633\u062e \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0644\u0645\u0633\/\u06a9\u0644\u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631\n      \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u062c\u0627\u0632\u0647 \u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.\n    *\/\n\n    if (withMusic) {\n      playMusic();\n    } else {\n      stopMusic();\n    }\n\n\n    setTimeout(function () {\n\n      intro.classList.add(\"gone\");\n\n      musicToggle.classList.add(\"show\");\n\n\n      \/*\n        \u0646\u0645\u0627\u06cc\u0634 \u062a\u062f\u0631\u06cc\u062c\u06cc \u0639\u0646\u0627\u0635\u0631\n      *\/\n\n      const revealElements =\n        shadow.querySelectorAll(\".reveal\");\n\n\n      revealElements.forEach(\n        function (element, index) {\n\n          setTimeout(\n            function () {\n\n              element.classList.add(\n                \"visible\"\n              );\n\n            },\n            Math.min(\n              index * 90,\n              1000\n            )\n          );\n\n        }\n      );\n\n\n      startFireworks();\n\n    }, 850);\n\n  }\n\n\n  \/* =========================================================\n     BUTTONS\n  ========================================================= *\/\n\n  yes.addEventListener(\n    \"click\",\n    function (event) {\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      enter(true);\n\n    }\n  );\n\n\n  no.addEventListener(\n    \"click\",\n    function (event) {\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      enter(false);\n\n    }\n  );\n\n\n  \/* =========================================================\n     CLICK ON ENVELOPE\n     \u062e\u0648\u062f \u067e\u0627\u06a9\u062a \u0647\u0645 \u0628\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f\n  ========================================================= *\/\n\n  envelope.addEventListener(\n    \"click\",\n    function () {\n\n      enter(true);\n\n    }\n  );\n\n\n  envelope.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key === \"Enter\" ||\n        event.key === \" \"\n      ) {\n\n        event.preventDefault();\n\n        enter(true);\n\n      }\n\n    }\n  );\n\n\n  \/* =========================================================\n     MUSIC TOGGLE\n  ========================================================= *\/\n\n  musicToggle.addEventListener(\n    \"click\",\n    function (event) {\n\n      event.preventDefault();\n\n      if (audio.paused) {\n\n        playMusic();\n\n      } else {\n\n        stopMusic();\n\n      }\n\n    }\n  );\n\n\n  \/* =========================================================\n     COUNTDOWN\n     \n     \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n     = 24 September 2026\n     \u0633\u0627\u0639\u062a 19:00 \u0627\u06cc\u0631\u0627\u0646\n  ========================================================= *\/\n\n  const target =\n    new Date(\n      \"2026-09-24T19:00:00+03:30\"\n    ).getTime();\n\n\n  const days =\n    shadow.getElementById(\"days\");\n\n  const hours =\n    shadow.getElementById(\"hours\");\n\n  const minutes =\n    shadow.getElementById(\"minutes\");\n\n  const seconds =\n    shadow.getElementById(\"seconds\");\n\n\n  function toPersianNumber(value) {\n\n    return String(value)\n      .replace(\n        \/\\d\/g,\n        function (digit) {\n\n          return \"\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\"[\n            Number(digit)\n          ];\n\n        }\n      );\n\n  }\n\n\n  function updateCountdown() {\n\n    let difference =\n      target - Date.now();\n\n\n    if (difference < 0) {\n      difference = 0;\n    }\n\n\n    const d =\n      Math.floor(\n        difference \/ 86400000\n      );\n\n\n    const h =\n      Math.floor(\n        (difference % 86400000) \/\n        3600000\n      );\n\n\n    const m =\n      Math.floor(\n        (difference % 3600000) \/\n        60000\n      );\n\n\n    const s =\n      Math.floor(\n        (difference % 60000) \/\n        1000\n      );\n\n\n    days.textContent =\n      toPersianNumber(d);\n\n\n    hours.textContent =\n      toPersianNumber(\n        String(h).padStart(2, \"0\")\n      );\n\n\n    minutes.textContent =\n      toPersianNumber(\n        String(m).padStart(2, \"0\")\n      );\n\n\n    seconds.textContent =\n      toPersianNumber(\n        String(s).padStart(2, \"0\")\n      );\n\n  }\n\n\n  updateCountdown();\n\n  setInterval(\n    updateCountdown,\n    1000\n  );\n\n\n  \/* =========================================================\n     PETALS\n  ========================================================= *\/\n\n  const petals =\n    shadow.getElementById(\"petals\");\n\n\n  for (\n    let i = 0;\n    i < 16;\n    i++\n  ) {\n\n    const petal =\n      document.createElement(\"span\");\n\n    petal.className = \"petal\";\n\n\n    const left =\n      Math.random() * 100;\n\n    const duration =\n      7 + Math.random() * 8;\n\n    const delay =\n      Math.random() * 7;\n\n    const size =\n      6 + Math.random() * 7;\n\n\n    petal.style.left =\n      left + \"%\";\n\n    petal.style.width =\n      size + \"px\";\n\n    petal.style.height =\n      (size * 1.35) + \"px\";\n\n    petal.style.animationDuration =\n      duration + \"s\";\n\n    petal.style.animationDelay =\n      delay + \"s\";\n\n\n    petals.appendChild(\n      petal\n    );\n\n  }\n\n\n  \/* =========================================================\n     FIREWORKS\n  ========================================================= *\/\n\n  const canvas =\n    shadow.getElementById(\"fireworks\");\n\n  const ctx =\n    canvas.getContext(\"2d\");\n\n\n  let fireworks = [];\n\n  let fireworksStarted = false;\n\n\n  function resizeCanvas() {\n\n    const ratio =\n      window.devicePixelRatio || 1;\n\n\n    canvas.width =\n      window.innerWidth * ratio;\n\n    canvas.height =\n      window.innerHeight * ratio;\n\n\n    canvas.style.width =\n      window.innerWidth + \"px\";\n\n    canvas.style.height =\n      window.innerHeight + \"px\";\n\n\n    ctx.setTransform(\n      ratio,\n      0,\n      0,\n      ratio,\n      0,\n      0\n    );\n\n  }\n\n\n  resizeCanvas();\n\n\n  window.addEventListener(\n    \"resize\",\n    resizeCanvas\n  );\n\n\n  function makeFirework() {\n\n    const x =\n      70 +\n      Math.random() *\n      Math.max(\n        50,\n        window.innerWidth - 140\n      );\n\n\n    const y =\n      80 +\n      Math.random() *\n      Math.min(\n        350,\n        window.innerHeight * .4\n      );\n\n\n    const particles = [];\n\n\n    for (\n      let i = 0;\n      i < 30;\n      i++\n    ) {\n\n      const angle =\n        Math.random() *\n        Math.PI *\n        2;\n\n\n      const speed =\n        1 +\n        Math.random() * 3;\n\n\n      particles.push({\n\n        x: x,\n\n        y: y,\n\n        vx:\n          Math.cos(angle) *\n          speed,\n\n        vy:\n          Math.sin(angle) *\n          speed,\n\n        life: 1\n\n      });\n\n    }\n\n\n    fireworks.push(\n      particles\n    );\n\n  }\n\n\n  function animateFireworks() {\n\n    if (!fireworksStarted) {\n      return;\n    }\n\n\n    ctx.clearRect(\n      0,\n      0,\n      window.innerWidth,\n      window.innerHeight\n    );\n\n\n    fireworks =\n      fireworks.filter(\n        function (particles) {\n\n          particles.forEach(\n            function (particle) {\n\n              particle.x +=\n                particle.vx;\n\n              particle.y +=\n                particle.vy;\n\n              particle.vy +=\n                .025;\n\n              particle.life -=\n                .018;\n\n\n              ctx.globalAlpha =\n                Math.max(\n                  0,\n                  particle.life\n                );\n\n\n              ctx.fillStyle =\n                \"#d9a9b7\";\n\n\n              ctx.beginPath();\n\n\n              ctx.arc(\n                particle.x,\n                particle.y,\n                1.4,\n                0,\n                Math.PI * 2\n              );\n\n\n              ctx.fill();\n\n            }\n          );\n\n\n          return particles.some(\n            function (particle) {\n\n              return (\n                particle.life > 0\n              );\n\n            }\n          );\n\n        }\n      );\n\n\n    ctx.globalAlpha = 1;\n\n\n    requestAnimationFrame(\n      animateFireworks\n    );\n\n  }\n\n\n  function startFireworks() {\n\n    fireworksStarted = true;\n\n\n    setTimeout(\n      makeFirework,\n      400\n    );\n\n\n    setTimeout(\n      makeFirework,\n      1500\n    );\n\n\n    setTimeout(\n      makeFirework,\n      2800\n    );\n\n\n    animateFireworks();\n\n\n    setInterval(\n      function () {\n\n        if (\n          document.visibilityState ===\n          \"visible\"\n        ) {\n\n          makeFirework();\n\n        }\n\n      },\n      10000\n    );\n\n  }\n\n\n  \/* =========================================================\n     INITIAL STATE\n  ========================================================= *\/\n\n  \/*\n    \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a\u060c\n    \u0648\u0644\u06cc \u062a\u0627 \u0628\u0627\u0632 \u0634\u062f\u0646 \u067e\u0627\u06a9\u062a \u0631\u0648\u06cc \u0622\u0646 \u0644\u0627\u06cc\u0647 Intro \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.\n  *\/\n\n})();\n<\/script>\n\n\n\n<div id=\"wedding-app-root\"><\/div>\n\n<script>\n(function () {\n  \"use strict\";\n\n  \/* =========================================================\n     WORDPRESS OUTER PAGE RESET\n     \u0647\u062f\u0631 \u0648 \u0641\u0648\u062a\u0631 \u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633\n  ========================================================= *\/\n\n  if (!document.getElementById(\"wedding-wordpress-reset\")) {\n    const wpStyle = document.createElement(\"style\");\n    wpStyle.id = \"wedding-wordpress-reset\";\n\n    wpStyle.textContent = `\n      html,\n      body {\n        margin: 0 !important;\n        padding: 0 !important;\n        width: 100% !important;\n        max-width: 100% !important;\n        overflow-x: hidden !important;\n      }\n\n      body > header,\n      body > footer,\n      header.site-header,\n      footer.site-footer,\n      #masthead,\n      #colophon,\n      .site-header,\n      .site-footer,\n      .elementor-location-header,\n      .elementor-location-footer,\n      #page > header,\n      #page > footer,\n      .wp-site-blocks > header,\n      .wp-site-blocks > footer,\n      .main-header,\n      .main-footer {\n        display: none !important;\n        visibility: hidden !important;\n        height: 0 !important;\n        min-height: 0 !important;\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      #wedding-app-root {\n        width: 100vw !important;\n        max-width: 100vw !important;\n        margin-left: calc(50% - 50vw) !important;\n        margin-right: calc(50% - 50vw) !important;\n      }\n    `;\n\n    document.head.appendChild(wpStyle);\n  }\n\n\n  \/* =========================================================\n     ROOT\n  ========================================================= *\/\n\n  const host = document.getElementById(\"wedding-app-root\");\n\n  if (!host) return;\n\n  host.style.cssText = `\n    display:block !important;\n    width:100vw !important;\n    max-width:100vw !important;\n    min-height:100vh !important;\n    margin-left:calc(50% - 50vw) !important;\n    margin-right:calc(50% - 50vw) !important;\n    padding:0 !important;\n    position:relative !important;\n    left:0 !important;\n    right:0 !important;\n    transform:none !important;\n    overflow:visible !important;\n  `;\n\n\n  \/* =========================================================\n     SHADOW DOM\n     \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062f\u062e\u0627\u0644\u062a CSS \u0648\u0631\u062f\u067e\u0631\u0633\n  ========================================================= *\/\n\n  const shadow = host.attachShadow\n    ? host.attachShadow({ mode: \"open\" })\n    : null;\n\n  if (!shadow) {\n    console.error(\"Shadow DOM is not supported by this browser.\");\n    return;\n  }\n\n\n  \/* =========================================================\n     COMPLETE WEBSITE\n  ========================================================= *\/\n\n  shadow.innerHTML = `\n\n    <style>\n\n      \/* =====================================================\n         COMPLETE RESET\n      ===================================================== *\/\n\n      :host {\n        all: initial !important;\n        display: block !important;\n        width: 100vw !important;\n        min-height: 100vh !important;\n        direction: rtl !important;\n      }\n\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box !important;\n      }\n\n      html,\n      body {\n        margin: 0 !important;\n        padding: 0 !important;\n      }\n\n      #app {\n        width: 100% !important;\n        min-height: 100vh !important;\n        overflow-x: hidden !important;\n        position: relative !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        color: #392732 !important;\n        background: #fffaf6 !important;\n\n        direction: rtl !important;\n        text-align: right !important;\n\n        -webkit-font-smoothing: antialiased !important;\n        text-rendering: optimizeLegibility !important;\n      }\n\n      button,\n      a,\n      input,\n      textarea,\n      select {\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n      }\n\n\n      \/* =====================================================\n         AUDIO\n      ===================================================== *\/\n\n      #wedding-audio {\n        display: none !important;\n      }\n\n\n      \/* =====================================================\n         INTRO\n      ===================================================== *\/\n\n      .intro {\n        position: fixed !important;\n        inset: 0 !important;\n\n        width: 100vw !important;\n        height: 100vh !important;\n        height: 100dvh !important;\n\n        z-index: 999999 !important;\n\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n\n        padding: 20px !important;\n\n        background:\n          radial-gradient(\n            circle at 50% 25%,\n            #ffffff 0%,\n            #fff8f5 45%,\n            #f5e4e7 100%\n          ) !important;\n\n        opacity: 1 !important;\n        visibility: visible !important;\n\n        transition:\n          opacity .8s ease,\n          visibility .8s ease !important;\n      }\n\n      .intro.gone {\n        opacity: 0 !important;\n        visibility: hidden !important;\n        pointer-events: none !important;\n      }\n\n      .intro-stage {\n        width: 100% !important;\n        max-width: 500px !important;\n\n        display: flex !important;\n        flex-direction: column !important;\n        align-items: center !important;\n\n        text-align: center !important;\n\n        position: relative !important;\n      }\n\n\n      \/* =====================================================\n         INTRO TEXT\n      ===================================================== *\/\n\n      .intro-title {\n        color: #9a5a72 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 11px !important;\n\n        font-weight: 700 !important;\n\n        letter-spacing: 5px !important;\n\n        line-height: 1.5 !important;\n\n        margin: 0 0 18px 0 !important;\n        padding: 0 !important;\n      }\n\n\n      \/* =====================================================\n         ENVELOPE\n      ===================================================== *\/\n\n      .envelope {\n        width: min(310px, 84vw) !important;\n        height: 220px !important;\n\n        position: relative !important;\n\n        margin: 0 auto 22px auto !important;\n\n        cursor: pointer !important;\n\n        perspective: 1000px !important;\n\n        filter:\n          drop-shadow(\n            0 25px 35px rgba(70, 35, 50, .15)\n          ) !important;\n\n        transition:\n          transform .25s ease !important;\n      }\n\n      .envelope:hover {\n        transform: translateY(-4px) !important;\n      }\n\n      .envelope:active {\n        transform: scale(.99) !important;\n      }\n\n\n      .envelope-back {\n        position: absolute !important;\n\n        left: 0 !important;\n        right: 0 !important;\n        top: 35px !important;\n        bottom: 0 !important;\n\n        background:\n          linear-gradient(\n            145deg,\n            #f7e4e7,\n            #ecd3d9\n          ) !important;\n\n        border:\n          1px solid #e5c8cf !important;\n\n        border-radius:\n          5px 5px 15px 15px !important;\n\n        z-index: 1 !important;\n      }\n\n\n      \/* \u0646\u0627\u0645\u0647 \u062f\u0627\u062e\u0644 \u067e\u0627\u06a9\u062a *\/\n\n      .letter {\n        position: absolute !important;\n\n        left: 8% !important;\n        right: 8% !important;\n\n        top: 58px !important;\n\n        height: 145px !important;\n\n        z-index: 3 !important;\n\n        background:\n          linear-gradient(\n            135deg,\n            #ffffff,\n            #fffaf7\n          ) !important;\n\n        border:\n          1px solid #eadbd3 !important;\n\n        border-radius: 3px !important;\n\n        box-shadow:\n          0 8px 20px rgba(60,30,40,.08) !important;\n\n        transition:\n          top 1s cubic-bezier(.2,.8,.2,1),\n          transform 1s cubic-bezier(.2,.8,.2,1) !important;\n      }\n\n      .letter-content {\n        width: 100% !important;\n        height: 100% !important;\n\n        display: flex !important;\n        flex-direction: column !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 8px !important;\n\n        text-align: center !important;\n      }\n\n      .letter-name {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #7f485f !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size: 25px !important;\n        font-weight: 500 !important;\n\n        line-height: 1.4 !important;\n      }\n\n      .letter-small {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #8d737c !important;\n\n        font-size: 11px !important;\n        line-height: 1.8 !important;\n      }\n\n      .letter-sub {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #b0939c !important;\n\n        font-size: 9px !important;\n      }\n\n\n      \/* flap *\/\n\n      .flap {\n        position: absolute !important;\n\n        top: 35px !important;\n        left: 0 !important;\n\n        width: 100% !important;\n        height: 120px !important;\n\n        z-index: 7 !important;\n\n        background:\n          linear-gradient(\n            155deg,\n            #f5e1e5,\n            #e9ced5\n          ) !important;\n\n        clip-path:\n          polygon(\n            0 0,\n            100% 0,\n            50% 100%\n          ) !important;\n\n        transform-origin: top center !important;\n\n        transition:\n          transform 1s cubic-bezier(.2,.8,.2,1) !important;\n\n        backface-visibility: hidden !important;\n      }\n\n\n      \/* \u062c\u0644\u0648\u06cc \u067e\u0627\u06a9\u062a *\/\n\n      .envelope-front {\n        position: absolute !important;\n\n        left: 0 !important;\n        right: 0 !important;\n        bottom: 0 !important;\n\n        height: 150px !important;\n\n        z-index: 6 !important;\n\n        background:\n          linear-gradient(\n            145deg,\n            #f1d9de,\n            #e8ccd2\n          ) !important;\n\n        clip-path:\n          polygon(\n            0 0,\n            50% 52%,\n            100% 0,\n            100% 100%,\n            0 100%\n          ) !important;\n\n        border-radius:\n          0 0 15px 15px !important;\n\n        pointer-events: none !important;\n      }\n\n\n      \/* \u0645\u0647\u0631 *\/\n\n      .seal {\n        position: absolute !important;\n\n        left: 50% !important;\n        top: 128px !important;\n\n        width: 55px !important;\n        height: 55px !important;\n\n        z-index: 20 !important;\n\n        display: flex !important;\n        align-items: center !important;\n        justify-content: center !important;\n\n        transform:\n          translate(-50%, -50%) !important;\n\n        border-radius: 50% !important;\n\n        background:\n          radial-gradient(\n            circle,\n            #b86d84,\n            #8b4d65\n          ) !important;\n\n        border:\n          3px solid #f7e4e6 !important;\n\n        box-shadow:\n          0 6px 15px rgba(100,40,60,.2) !important;\n\n        color: #ffffff !important;\n\n        transition:\n          opacity .35s ease,\n          transform .7s ease !important;\n      }\n\n      .seal span {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #ffffff !important;\n\n        font-size: 21px !important;\n        line-height: 1 !important;\n      }\n\n\n      \/* \u062e\u0637 \u067e\u0627\u06a9\u062a *\/\n\n      .lace {\n        position: absolute !important;\n\n        left: 8% !important;\n        right: 8% !important;\n        bottom: 17px !important;\n\n        height: 1px !important;\n\n        z-index: 12 !important;\n\n        background:\n          repeating-linear-gradient(\n            90deg,\n            rgba(150,85,110,.5) 0 5px,\n            transparent 5px 9px\n          ) !important;\n      }\n\n\n      \/* \u062d\u0627\u0644\u062a \u0628\u0627\u0632 *\/\n\n      .envelope.opened .flap {\n        transform:\n          rotateX(-175deg) !important;\n      }\n\n      .envelope.opened .letter {\n        top: 0 !important;\n\n        transform:\n          translateY(-48px) !important;\n      }\n\n      .envelope.opened .seal {\n        opacity: 0 !important;\n\n        transform:\n          translate(-50%, -50%)\n          scale(.45) !important;\n      }\n\n\n      \/* =====================================================\n         QUESTION\n      ===================================================== *\/\n\n      .question {\n        margin: 0 0 13px 0 !important;\n        padding: 0 !important;\n\n        color: #543842 !important;\n\n        font-size: 16px !important;\n        font-weight: 700 !important;\n\n        line-height: 1.7 !important;\n\n        text-align: center !important;\n      }\n\n      .choices {\n        width: 100% !important;\n\n        display: flex !important;\n\n        flex-direction: row !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 10px !important;\n\n        flex-wrap: wrap !important;\n      }\n\n      .choice {\n        appearance: none !important;\n        -webkit-appearance: none !important;\n\n        min-width: 125px !important;\n        height: 43px !important;\n\n        margin: 0 !important;\n        padding:\n          0 18px !important;\n\n        border:\n          1px solid #9b5c73 !important;\n\n        border-radius: 50px !important;\n\n        outline: none !important;\n\n        background: #9b5c73 !important;\n\n        color: #ffffff !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 12px !important;\n        font-weight: 700 !important;\n\n        line-height: 43px !important;\n\n        text-align: center !important;\n\n        cursor: pointer !important;\n\n        box-shadow:\n          0 7px 16px rgba(100,50,70,.12) !important;\n\n        transition:\n          transform .2s ease,\n          box-shadow .2s ease !important;\n      }\n\n      .choice:hover {\n        transform: translateY(-2px) !important;\n\n        box-shadow:\n          0 11px 22px rgba(100,50,70,.18) !important;\n      }\n\n      .choice:active {\n        transform: scale(.97) !important;\n      }\n\n      .choice-no {\n        background: #ffffff !important;\n        color: #9b5c73 !important;\n      }\n\n\n      .hint {\n        margin: 14px 0 0 0 !important;\n        padding: 0 !important;\n\n        color: #a2868e !important;\n\n        font-size: 10px !important;\n        line-height: 1.7 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         MAIN\n      ===================================================== *\/\n\n      .main {\n        display: block !important;\n\n        width: 100% !important;\n        min-height: 100vh !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        opacity: 1 !important;\n\n        background: #fffaf6 !important;\n      }\n\n\n      \/* =====================================================\n         HERO\n      ===================================================== *\/\n\n      .hero {\n        position: relative !important;\n\n        width: 100% !important;\n        min-height: 100vh !important;\n        min-height: 100dvh !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        padding:\n          65px 20px 55px 20px !important;\n\n        overflow: hidden !important;\n\n        background:\n          radial-gradient(\n            circle at 85% 15%,\n            #ead7dc 0%,\n            rgba(234,215,220,.4) 20%,\n            transparent 42%\n          ),\n          radial-gradient(\n            circle at 10% 85%,\n            #f3e0d8 0%,\n            transparent 36%\n          ),\n          #fffaf6 !important;\n\n        text-align: center !important;\n      }\n\n      .hero::before {\n        content: \"\" !important;\n\n        position: absolute !important;\n\n        inset: 18px !important;\n\n        border:\n          1px solid rgba(150,90,110,.12) !important;\n\n        pointer-events: none !important;\n      }\n\n      .hero-inner {\n        position: relative !important;\n\n        z-index: 2 !important;\n\n        width: 100% !important;\n        max-width: 800px !important;\n\n        margin: 0 auto !important;\n\n        text-align: center !important;\n      }\n\n\n      .eyebrow {\n        margin: 0 0 11px 0 !important;\n        padding: 0 !important;\n\n        color: #985a71 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 11px !important;\n        font-weight: 700 !important;\n\n        letter-spacing: 3px !important;\n        line-height: 1.5 !important;\n      }\n\n      .tiny-line {\n        width: 45px !important;\n        height: 1px !important;\n\n        margin:\n          0 auto 16px auto !important;\n\n        padding: 0 !important;\n\n        background: #9b5c73 !important;\n      }\n\n\n      .hero-title {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #402c35 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size:\n          clamp(40px, 10vw, 78px) !important;\n\n        font-weight: 500 !important;\n\n        line-height: 1.35 !important;\n\n        text-align: center !important;\n      }\n\n\n      .date-badge {\n        display: inline-flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        min-height: 40px !important;\n\n        margin:\n          17px auto 21px auto !important;\n\n        padding:\n          5px 23px !important;\n\n        border:\n          1px solid #d8b8c2 !important;\n\n        border-radius: 50px !important;\n\n        background:\n          rgba(255,255,255,.7) !important;\n\n        color: #8f5269 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 13px !important;\n        font-weight: 700 !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         IMAGE\n      ===================================================== *\/\n\n      .photo-wrap {\n        width:\n          min(320px, 78vw) !important;\n\n        aspect-ratio: 4 \/ 5 !important;\n\n        margin:\n          15px auto 22px auto !important;\n\n        padding: 7px !important;\n\n        background:\n          linear-gradient(\n            145deg,\n            #ffffff,\n            #f6e8e5\n          ) !important;\n\n        border:\n          1px solid rgba(150,90,110,.23) !important;\n\n        border-radius:\n          42px 42px 12px 12px !important;\n\n        box-shadow:\n          0 22px 50px rgba(70,40,50,.15) !important;\n      }\n\n      .photo-frame {\n        width: 100% !important;\n        height: 100% !important;\n\n        overflow: hidden !important;\n\n        border-radius:\n          35px 35px 7px 7px !important;\n      }\n\n      .photo {\n        display: block !important;\n\n        width: 100% !important;\n        height: 100% !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        border: 0 !important;\n        outline: none !important;\n\n        object-fit: cover !important;\n\n        animation:\n          cinema 12s ease-in-out infinite alternate !important;\n      }\n\n      @keyframes cinema {\n        from {\n          transform: scale(1) !important;\n        }\n\n        to {\n          transform: scale(1.08) !important;\n        }\n      }\n\n\n      .hero-copy {\n        width: 100% !important;\n        max-width: 570px !important;\n\n        margin:\n          0 auto !important;\n\n        padding: 0 !important;\n\n        color: #755d65 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 14px !important;\n        font-weight: 400 !important;\n\n        line-height: 2.1 !important;\n\n        text-align: center !important;\n      }\n\n\n      .scroll-hint {\n        margin:\n          27px auto 0 auto !important;\n        padding: 0 !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 8px !important;\n\n        color: #a58c94 !important;\n\n        font-size: 9px !important;\n\n        text-align: center !important;\n      }\n\n      .scroll-arrow {\n        width: 7px !important;\n        height: 7px !important;\n\n        border-right:\n          1px solid #9b5c73 !important;\n\n        border-bottom:\n          1px solid #9b5c73 !important;\n\n        transform:\n          rotate(45deg) !important;\n\n        animation:\n          scrollArrow 1.5s ease-in-out infinite !important;\n      }\n\n      @keyframes scrollArrow {\n        0%,100% {\n          transform:\n            translateY(0)\n            rotate(45deg) !important;\n        }\n\n        50% {\n          transform:\n            translateY(5px)\n            rotate(45deg) !important;\n        }\n      }\n\n\n      \/* =====================================================\n         SECTIONS\n      ===================================================== *\/\n\n      .section {\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n          78px 20px !important;\n\n        background: #fffaf6 !important;\n\n        text-align: center !important;\n      }\n\n      .countdown-section {\n        background:\n          linear-gradient(\n            180deg,\n            #fffaf6,\n            #fdf3f1\n          ) !important;\n      }\n\n      .location-section {\n        background:\n          linear-gradient(\n            180deg,\n            #fdf3f1,\n            #fffaf6\n          ) !important;\n      }\n\n      .section-inner {\n        width: 100% !important;\n        max-width: 850px !important;\n\n        margin: 0 auto !important;\n        padding: 0 !important;\n\n        text-align: center !important;\n      }\n\n      .kicker {\n        margin:\n          0 0 10px 0 !important;\n\n        padding: 0 !important;\n\n        color: #9b5c73 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 10px !important;\n        font-weight: 700 !important;\n\n        letter-spacing: 4px !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .section-title {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #402c35 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size:\n          clamp(30px, 7vw, 50px) !important;\n\n        font-weight: 500 !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .title-line {\n        width: 100% !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 10px !important;\n\n        margin:\n          13px auto 19px auto !important;\n      }\n\n      .title-line::before,\n      .title-line::after {\n        content: \"\" !important;\n\n        width: 40px !important;\n        height: 1px !important;\n\n        background: #d9bdc5 !important;\n      }\n\n      .heart {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #a05d76 !important;\n\n        font-size: 14px !important;\n        line-height: 1 !important;\n      }\n\n      .message {\n        max-width: 550px !important;\n\n        margin:\n          0 auto 30px auto !important;\n\n        padding: 0 !important;\n\n        color: #806a72 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 14px !important;\n\n        line-height: 2 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         COUNTDOWN\n      ===================================================== *\/\n\n      .countdown {\n        width: 100% !important;\n\n        display: flex !important;\n\n        flex-direction: row !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 9px !important;\n\n        direction: ltr !important;\n\n        flex-wrap: nowrap !important;\n      }\n\n      .unit {\n        flex:\n          1 1 0 !important;\n\n        width: 25% !important;\n\n        min-width: 0 !important;\n        max-width: 100px !important;\n\n        min-height: 91px !important;\n\n        margin: 0 !important;\n        padding:\n          14px 5px !important;\n\n        display: flex !important;\n\n        flex-direction: column !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border:\n          1px solid #ead7d8 !important;\n\n        border-radius: 16px !important;\n\n        background:\n          rgba(255,255,255,.75) !important;\n\n        box-shadow:\n          0 10px 25px rgba(70,40,50,.05) !important;\n\n        text-align: center !important;\n      }\n\n      .number {\n        display: block !important;\n\n        width: 100% !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #874e65 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size: 29px !important;\n        font-weight: 400 !important;\n\n        line-height: 1 !important;\n\n        text-align: center !important;\n      }\n\n      .unit-label {\n        display: block !important;\n\n        width: 100% !important;\n\n        margin:\n          8px 0 0 0 !important;\n\n        padding: 0 !important;\n\n        color: #927780 !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 10px !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .separator {\n        flex:\n          0 0 auto !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #b48596 !important;\n\n        font-family:\n          Georgia,\n          serif !important;\n\n        font-size: 22px !important;\n\n        line-height: 1 !important;\n      }\n\n\n      \/* =====================================================\n         LOCATION\n      ===================================================== *\/\n\n      .info {\n        width: 100% !important;\n\n        display: grid !important;\n\n        grid-template-columns:\n          repeat(3, minmax(0, 1fr)) !important;\n\n        gap: 13px !important;\n\n        margin:\n          30px auto !important;\n\n        padding: 0 !important;\n      }\n\n      .info-item {\n        min-width: 0 !important;\n\n        min-height: 145px !important;\n\n        margin: 0 !important;\n\n        padding:\n          20px 10px !important;\n\n        display: flex !important;\n\n        flex-direction: column !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border:\n          1px solid #ead7d8 !important;\n\n        border-radius: 18px !important;\n\n        background:\n          rgba(255,255,255,.7) !important;\n\n        box-shadow:\n          0 10px 28px rgba(70,40,50,.05) !important;\n\n        text-align: center !important;\n      }\n\n      .info-icon {\n        width: 43px !important;\n        height: 43px !important;\n\n        flex: 0 0 43px !important;\n\n        margin:\n          0 0 11px 0 !important;\n\n        display: flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border-radius: 50% !important;\n\n        background: #f2e0e4 !important;\n\n        color: #92546c !important;\n\n        font-size: 19px !important;\n\n        line-height: 1 !important;\n      }\n\n      .info-label {\n        margin:\n          0 0 6px 0 !important;\n        padding: 0 !important;\n\n        color: #a1818b !important;\n\n        font-size: 9px !important;\n\n        line-height: 1.5 !important;\n\n        text-align: center !important;\n      }\n\n      .info-value {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #503943 !important;\n\n        font-size: 13px !important;\n        font-weight: 700 !important;\n\n        line-height: 1.7 !important;\n\n        text-align: center !important;\n      }\n\n\n      .map-button {\n        display: inline-flex !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        gap: 12px !important;\n\n        min-height: 46px !important;\n\n        margin: 0 !important;\n        padding:\n          0 25px !important;\n\n        border:\n          1px solid #9b5c73 !important;\n\n        border-radius: 50px !important;\n\n        background: #9b5c73 !important;\n\n        color: #ffffff !important;\n\n        text-decoration: none !important;\n\n        font-family:\n          Tahoma,\n          Arial,\n          sans-serif !important;\n\n        font-size: 12px !important;\n        font-weight: 700 !important;\n\n        line-height: 46px !important;\n\n        text-align: center !important;\n\n        box-shadow:\n          0 10px 23px rgba(100,50,70,.17) !important;\n\n        transition:\n          transform .2s ease,\n          box-shadow .2s ease !important;\n      }\n\n      .map-button:hover {\n        color: #ffffff !important;\n\n        text-decoration: none !important;\n\n        transform: translateY(-2px) !important;\n\n        box-shadow:\n          0 14px 28px rgba(100,50,70,.22) !important;\n      }\n\n\n      \/* =====================================================\n         FINAL SECTION\n      ===================================================== *\/\n\n      .final-section {\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n          80px 20px !important;\n\n        background:\n          radial-gradient(\n            circle at 50% 30%,\n            #f4e1e4,\n            #fffaf6 65%\n          ) !important;\n\n        text-align: center !important;\n      }\n\n      .final-inner {\n        width: 100% !important;\n        max-width: 700px !important;\n\n        margin: 0 auto !important;\n\n        text-align: center !important;\n      }\n\n      .final-heart {\n        margin:\n          0 0 14px 0 !important;\n\n        padding: 0 !important;\n\n        color: #9b5c73 !important;\n\n        font-size: 32px !important;\n\n        line-height: 1 !important;\n\n        animation:\n          heartbeat 1.5s ease-in-out infinite !important;\n      }\n\n      @keyframes heartbeat {\n        0%,100% {\n          transform: scale(1) !important;\n        }\n\n        50% {\n          transform: scale(1.12) !important;\n        }\n      }\n\n      .final-small {\n        margin:\n          0 0 10px 0 !important;\n        padding: 0 !important;\n\n        color: #9b5c73 !important;\n\n        font-family:\n          Arial,\n          Tahoma,\n          sans-serif !important;\n\n        font-size: 9px !important;\n\n        letter-spacing: 4px !important;\n\n        line-height: 1.5 !important;\n      }\n\n      .final-name {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #402c35 !important;\n\n        font-family:\n          Georgia,\n          \"Times New Roman\",\n          serif !important;\n\n        font-size:\n          clamp(35px, 8vw, 60px) !important;\n\n        font-weight: 500 !important;\n\n        line-height: 1.4 !important;\n\n        text-align: center !important;\n      }\n\n      .final-text {\n        margin:\n          14px 0 0 0 !important;\n        padding: 0 !important;\n\n        color: #806a72 !important;\n\n        font-size: 13px !important;\n\n        line-height: 2 !important;\n\n        text-align: center !important;\n      }\n\n\n      \/* =====================================================\n         WEDDING FOOTER\n      ===================================================== *\/\n\n      .wedding-footer {\n        width: 100% !important;\n\n        margin: 0 !important;\n\n        padding:\n          30px 20px !important;\n\n        background: #3e2a33 !important;\n\n        color: #ffffff !important;\n\n        text-align: center !important;\n      }\n\n      .footer-name {\n        margin: 0 !important;\n        padding: 0 !important;\n\n        color: #ffffff !important;\n\n        font-family:\n          Georgia,\n          serif !important;\n\n        font-size: 18px !important;\n\n        line-height: 1.8 !important;\n      }\n\n      .footer-text {\n        margin: 2px 0 0 0 !important;\n        padding: 0 !important;\n\n        color: #dcbcc5 !important;\n\n        font-size: 10px !important;\n\n        line-height: 1.8 !important;\n      }\n\n\n      \/* =====================================================\n         MUSIC BUTTON\n      ===================================================== *\/\n\n      .music-toggle {\n        position: fixed !important;\n\n        left: 18px !important;\n        bottom: 18px !important;\n\n        z-index: 99990 !important;\n\n        width: 48px !important;\n        height: 48px !important;\n\n        margin: 0 !important;\n        padding: 0 !important;\n\n        display: none !important;\n\n        align-items: center !important;\n        justify-content: center !important;\n\n        border: 0 !important;\n        outline: none !important;\n\n        border-radius: 50% !important;\n\n        background: #7c5068 !important;\n\n        color: #ffffff !important;\n\n        font-size: 20px !important;\n\n        line-height: 48px !important;\n\n        cursor: pointer !important;\n\n        box-shadow:\n          0 10px 25px rgba(60,30,45,.22) !important;\n\n        text-align: center !important;\n      }\n\n      .music-toggle.show {\n        display: flex !important;\n      }\n\n\n      \/* =====================================================\n         PETALS\n      ===================================================== *\/\n\n      .petals {\n        position: fixed !important;\n\n        inset: 0 !important;\n\n        z-index: 9980 !important;\n\n        pointer-events: none !important;\n\n        overflow: hidden !important;\n      }\n\n      .petal {\n        position: absolute !important;\n\n        top: -25px !important;\n\n        width: 8px !important;\n        height: 12px !important;\n\n        border-radius:\n          100% 0 100% 0 !important;\n\n        background:\n          linear-gradient(\n            135deg,\n            #e4b4bf,\n            #f1d3d8\n          ) !important;\n\n        opacity: .7 !important;\n\n        animation:\n          fall linear infinite !important;\n      }\n\n      @keyframes fall {\n        0% {\n          transform:\n            translate3d(0,-30px,0)\n            rotate(0deg) !important;\n\n          opacity: 0 !important;\n        }\n\n        10% {\n          opacity: .7 !important;\n        }\n\n        100% {\n          transform:\n            translate3d(90px,110vh,0)\n            rotate(720deg) !important;\n\n          opacity: 0 !important;\n        }\n      }\n\n\n      \/* =====================================================\n         FIREWORKS\n      ===================================================== *\/\n\n      #fireworks {\n        position: fixed !important;\n\n        inset: 0 !important;\n\n        width: 100vw !important;\n        height: 100vh !important;\n\n        z-index: 9970 !important;\n\n        pointer-events: none !important;\n      }\n\n\n      \/* =====================================================\n         REVEAL\n      ===================================================== *\/\n\n      .reveal {\n        opacity: 0 !important;\n\n        transform:\n          translateY(22px) !important;\n\n        transition:\n          opacity .8s ease,\n          transform .8s ease !important;\n      }\n\n      .reveal.visible {\n        opacity: 1 !important;\n\n        transform:\n          translateY(0) !important;\n      }\n\n\n      \/* =====================================================\n         MOBILE\n      ===================================================== *\/\n\n      @media (max-width: 700px) {\n\n        .intro {\n          padding:\n            15px !important;\n        }\n\n        .intro-title {\n          margin-bottom: 12px !important;\n\n          font-size: 10px !important;\n\n          letter-spacing: 4px !important;\n        }\n\n        .envelope {\n          width:\n            min(290px, 82vw) !important;\n\n          height: 205px !important;\n\n          margin-bottom: 18px !important;\n        }\n\n        .envelope-back {\n          top: 32px !important;\n        }\n\n        .flap {\n          top: 32px !important;\n          height: 112px !important;\n        }\n\n        .envelope-front {\n          height: 140px !important;\n        }\n\n        .letter {\n          top: 53px !important;\n          height: 136px !important;\n        }\n\n        .letter-name {\n          font-size: 23px !important;\n        }\n\n        .seal {\n          top: 119px !important;\n\n          width: 50px !important;\n          height: 50px !important;\n        }\n\n        .question {\n          font-size: 15px !important;\n\n          margin-bottom: 9px !important;\n        }\n\n        .choice {\n          min-width: 118px !important;\n\n          height: 40px !important;\n\n          line-height: 40px !important;\n\n          padding:\n            0 13px !important;\n\n          font-size: 11px !important;\n        }\n\n        .hint {\n          margin-top: 9px !important;\n        }\n\n        .hero {\n          padding:\n            55px 16px 50px 16px !important;\n        }\n\n        .hero::before {\n          inset: 10px !important;\n        }\n\n        .photo-wrap {\n          width:\n            min(285px, 77vw) !important;\n        }\n\n        .hero-copy {\n          font-size: 13px !important;\n        }\n\n        .section {\n          padding:\n            68px 15px !important;\n        }\n\n        .countdown {\n          gap: 4px !important;\n        }\n\n        .unit {\n          min-height: 82px !important;\n\n          padding:\n            12px 3px !important;\n\n          border-radius: 13px !important;\n        }\n\n        .number {\n          font-size: 24px !important;\n        }\n\n        .unit-label {\n          font-size: 9px !important;\n\n          margin-top: 7px !important;\n        }\n\n        .separator {\n          font-size: 17px !important;\n        }\n\n        .info {\n          grid-template-columns:\n            1fr !important;\n\n          max-width: 370px !important;\n        }\n\n        .info-item {\n          min-height: 105px !important;\n        }\n\n        .map-button {\n          width: auto !important;\n          max-width: 100% !important;\n        }\n\n        .final-section {\n          padding:\n            70px 15px !important;\n        }\n\n      }\n\n\n      @media (max-width: 380px) {\n\n        .countdown {\n          gap: 2px !important;\n        }\n\n        .unit {\n          min-height: 77px !important;\n        }\n\n        .number {\n          font-size: 21px !important;\n        }\n\n        .unit-label {\n          font-size: 8px !important;\n        }\n\n        .separator {\n          font-size: 14px !important;\n        }\n\n        .choice {\n          min-width: 110px !important;\n        }\n\n      }\n\n\n      @media (prefers-reduced-motion: reduce) {\n\n        *,\n        *::before,\n        *::after {\n          animation-duration:\n            .01ms !important;\n\n          animation-iteration-count:\n            1 !important;\n\n          transition-duration:\n            .01ms !important;\n        }\n\n      }\n\n    <\/style>\n\n\n    <div id=\"app\">\n\n      <!-- ===================================================\n           AUDIO\n      ==================================================== -->\n\n      <audio\n        id=\"wedding-audio\"\n        preload=\"auto\"\n        loop\n        playsinline\n        src=\"https:\/\/arshiakhani.ir\/wp-content\/uploads\/2026\/08\/music.mp3\"\n      ><\/audio>\n\n\n      <!-- ===================================================\n           EFFECTS\n      ==================================================== -->\n\n      <canvas id=\"fireworks\"><\/canvas>\n\n      <div class=\"petals\" id=\"petals\"><\/div>\n\n\n      <!-- ===================================================\n           INTRO\n      ==================================================== -->\n\n      <div class=\"intro\" id=\"intro\">\n\n        <div class=\"intro-stage\">\n\n          <div class=\"intro-title\">\n            WEDDING INVITATION\n          <\/div>\n\n\n          <div\n            class=\"envelope\"\n            id=\"envelope\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647\"\n          >\n\n            <div class=\"envelope-back\"><\/div>\n\n\n            <div class=\"letter\">\n\n              <div class=\"letter-content\">\n\n                <div class=\"letter-name\">\n                  \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n                <\/div>\n\n                <div class=\"letter-small\">\n                  \u062f\u0639\u0648\u062a\u200c\u0646\u0627\u0645\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f \u0645\u0627\n                <\/div>\n\n                <div class=\"letter-sub\">\n                  \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n                <\/div>\n\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"flap\"><\/div>\n\n\n            <div class=\"envelope-front\"><\/div>\n\n\n            <div class=\"lace\"><\/div>\n\n\n            <div class=\"seal\">\n              <span>\u2665<\/span>\n            <\/div>\n\n          <\/div>\n\n\n          <div class=\"question\">\n            \u0622\u06cc\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u062e\u0634 \u0634\u0648\u062f\u061f\n          <\/div>\n\n\n          <div class=\"choices\">\n\n            <button\n              type=\"button\"\n              class=\"choice\"\n              id=\"yes\"\n            >\n              \u266b \u0628\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc\n            <\/button>\n\n            <button\n              type=\"button\"\n              class=\"choice choice-no\"\n              id=\"no\"\n            >\n              \u0628\u062f\u0648\u0646 \u0645\u0648\u0633\u06cc\u0642\u06cc\n            <\/button>\n\n          <\/div>\n\n\n          <div class=\"hint\">\n            \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06a9\u062a \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n\n      <!-- ===================================================\n           MAIN\n      ==================================================== -->\n\n      <main class=\"main\" id=\"main\">\n\n\n        <!-- HERO -->\n\n        <section class=\"hero\" id=\"home\">\n\n          <div class=\"hero-inner\">\n\n            <div class=\"eyebrow reveal\">\n              \u062f\u0639\u0648\u062a \u0628\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f\n            <\/div>\n\n            <div class=\"tiny-line reveal\"><\/div>\n\n\n            <h1 class=\"hero-title reveal\">\n              \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n            <\/h1>\n\n\n            <div class=\"date-badge reveal\">\n              \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n            <\/div>\n\n\n            <div class=\"photo-wrap reveal\">\n\n              <div class=\"photo-frame\">\n\n                <img decoding=\"async\"\n                  class=\"photo\"\n                  src=\"https:\/\/arshiakhani.ir\/wp-content\/uploads\/2026\/08\/childhood.jpg\"\n                  alt=\"\u0639\u06a9\u0633 \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\"\n                >\n\n              <\/div>\n\n            <\/div>\n\n\n            <p class=\"hero-copy reveal\">\n              \u0628\u0627 \u0639\u0634\u0642\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc \u0622\u063a\u0627\u0632 \u0632\u0646\u062f\u06af\u06cc \u0645\u0634\u062a\u0631\u06a9\u0645\u0627\u0646 \u062f\u0639\u0648\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\n            <\/p>\n\n\n            <div class=\"scroll-hint reveal\">\n\n              <span class=\"scroll-arrow\"><\/span>\n\n              \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f\n\n            <\/div>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- COUNTDOWN -->\n\n        <section class=\"section countdown-section\">\n\n          <div class=\"section-inner\">\n\n            <div class=\"kicker reveal\">\n              OUR SPECIAL DAY\n            <\/div>\n\n\n            <h2 class=\"section-title reveal\">\n              \u0631\u0648\u0632 \u0628\u0632\u0631\u06af \u0645\u0627\n            <\/h2>\n\n\n            <div class=\"title-line reveal\">\n              <span class=\"heart\">\u2665<\/span>\n            <\/div>\n\n\n            <p class=\"message reveal\">\n              \u062d\u0636\u0648\u0631 \u0634\u0645\u0627 \u0639\u0632\u06cc\u0632\u0627\u0646\u060c \u0627\u06cc\u0646 \u0634\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u06a9\u0627\u0645\u0644\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n            <\/p>\n\n\n            <div class=\"countdown reveal\" id=\"countdown\">\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"days\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u0631\u0648\u0632\n                <\/span>\n\n              <\/div>\n\n\n              <span class=\"separator\">\n                :\n              <\/span>\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"hours\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u0633\u0627\u0639\u062a\n                <\/span>\n\n              <\/div>\n\n\n              <span class=\"separator\">\n                :\n              <\/span>\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"minutes\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u062f\u0642\u06cc\u0642\u0647\n                <\/span>\n\n              <\/div>\n\n\n              <span class=\"separator\">\n                :\n              <\/span>\n\n\n              <div class=\"unit\">\n\n                <span\n                  class=\"number\"\n                  id=\"seconds\"\n                >\n                  \u06f0\u06f0\n                <\/span>\n\n                <span class=\"unit-label\">\n                  \u062b\u0627\u0646\u06cc\u0647\n                <\/span>\n\n              <\/div>\n\n\n            <\/div>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- LOCATION -->\n\n        <section\n          class=\"section location-section\"\n          id=\"location\"\n        >\n\n          <div class=\"section-inner\">\n\n            <div class=\"kicker reveal\">\n              LOCATION\n            <\/div>\n\n\n            <h2 class=\"section-title reveal\">\n              \u0644\u0648\u06a9\u06cc\u0634\u0646 \u0645\u0631\u0627\u0633\u0645\n            <\/h2>\n\n\n            <div class=\"title-line reveal\">\n              <span class=\"heart\">\u2665<\/span>\n            <\/div>\n\n\n            <div class=\"info reveal\">\n\n\n              <div class=\"info-item\">\n\n                <div class=\"info-icon\">\n                  \u2316\n                <\/div>\n\n                <div class=\"info-label\">\n                  \u0645\u06a9\u0627\u0646\n                <\/div>\n\n                <div class=\"info-value\">\n                  \u06a9\u0627\u062e \u062a\u0627\u0644\u0627\u0631 \u0622\u0631\u0627\u0645\u06cc\u0633\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"info-item\">\n\n                <div class=\"info-icon\">\n                  \u25f7\n                <\/div>\n\n                <div class=\"info-label\">\n                  \u0632\u0645\u0627\u0646\n                <\/div>\n\n                <div class=\"info-value\">\n                  \u06f1\u06f9:\u06f0\u06f0 \u0627\u0644\u06cc \u06f2\u06f2:\u06f0\u06f0\n                <\/div>\n\n              <\/div>\n\n\n              <div class=\"info-item\">\n\n                <div class=\"info-icon\">\n                  \ud83d\udcc5\n                <\/div>\n\n                <div class=\"info-label\">\n                  \u062a\u0627\u0631\u06cc\u062e\n                <\/div>\n\n                <div class=\"info-value\">\n                  \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n                <\/div>\n\n              <\/div>\n\n\n            <\/div>\n\n\n            <a\n              class=\"map-button reveal\"\n              href=\"https:\/\/nshn.ir\/2drbv8BkWx-DC7\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              <span>\n                \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0633\u06cc\u0631 \u062f\u0631 \u0646\u0634\u0627\u0646\n              <\/span>\n\n              <span>\n                \u2190\n              <\/span>\n            <\/a>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- FINAL -->\n\n        <section class=\"final-section\">\n\n          <div class=\"final-inner\">\n\n            <div class=\"final-heart reveal\">\n              \u2665\n            <\/div>\n\n            <div class=\"final-small reveal\">\n              WITH LOVE\n            <\/div>\n\n            <h2 class=\"final-name reveal\">\n              \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n            <\/h2>\n\n            <p class=\"final-text reveal\">\n              \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n            <\/p>\n\n          <\/div>\n\n        <\/section>\n\n\n        <!-- WEDDING FOOTER -->\n\n        <footer class=\"wedding-footer\">\n\n          <div class=\"footer-name\">\n            \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n          <\/div>\n\n          <div class=\"footer-text\">\n            \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n          <\/div>\n\n        <\/footer>\n\n\n      <\/main>\n\n\n      <!-- ===================================================\n           MUSIC BUTTON\n      ==================================================== -->\n\n      <button\n        type=\"button\"\n        class=\"music-toggle\"\n        id=\"music-toggle\"\n        aria-label=\"\u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      >\n        \u266b\n      <\/button>\n\n\n    <\/div>\n  `;\n\n\n  \/* =========================================================\n     ELEMENTS\n  ========================================================= *\/\n\n  const app =\n    shadow.getElementById(\"app\");\n\n  const audio =\n    shadow.getElementById(\"wedding-audio\");\n\n  const intro =\n    shadow.getElementById(\"intro\");\n\n  const envelope =\n    shadow.getElementById(\"envelope\");\n\n  const yes =\n    shadow.getElementById(\"yes\");\n\n  const no =\n    shadow.getElementById(\"no\");\n\n  const musicToggle =\n    shadow.getElementById(\"music-toggle\");\n\n\n  let entered = false;\n\n\n  \/* =========================================================\n     AUDIO\n  ========================================================= *\/\n\n  audio.volume = 0.65;\n\n\n  function playMusic() {\n\n    audio.muted = false;\n\n    try {\n\n      const promise =\n        audio.play();\n\n      if (promise && promise.catch) {\n\n        promise.catch(function (error) {\n\n          console.log(\n            \"Music playback was blocked:\",\n            error\n          );\n\n        });\n\n      }\n\n    } catch (error) {\n\n      console.log(\n        \"Music playback error:\",\n        error\n      );\n\n    }\n\n  }\n\n\n  function stopMusic() {\n\n    audio.pause();\n\n  }\n\n\n  audio.addEventListener(\n    \"play\",\n    function () {\n\n      musicToggle.textContent = \"\u266b\";\n\n      musicToggle.setAttribute(\n        \"aria-label\",\n        \"\u062a\u0648\u0642\u0641 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      );\n\n    }\n  );\n\n\n  audio.addEventListener(\n    \"pause\",\n    function () {\n\n      musicToggle.textContent = \"\ud83d\udd07\";\n\n      musicToggle.setAttribute(\n        \"aria-label\",\n        \"\u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      );\n\n    }\n  );\n\n\n  \/* =========================================================\n     ENTER\n  ========================================================= *\/\n\n  function enter(withMusic) {\n\n    if (entered) return;\n\n    entered = true;\n\n\n    \/*\n      \u0627\u0648\u0644 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646 \u067e\u0627\u06a9\u062a\n    *\/\n\n    envelope.classList.add(\"opened\");\n\n\n    \/*\n      \u0686\u0648\u0646 \u0627\u06cc\u0646 \u062a\u0627\u0628\u0639 \u062f\u0631 \u067e\u0627\u0633\u062e \u0645\u0633\u062a\u0642\u06cc\u0645 \u0628\u0647 \u0644\u0645\u0633\/\u06a9\u0644\u06cc\u06a9 \u06a9\u0627\u0631\u0628\u0631\n      \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u062f\u060c \u0645\u0631\u0648\u0631\u06af\u0631 \u0627\u062c\u0627\u0632\u0647 \u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc \u0631\u0627 \u0645\u06cc\u200c\u062f\u0647\u062f.\n    *\/\n\n    if (withMusic) {\n      playMusic();\n    } else {\n      stopMusic();\n    }\n\n\n    setTimeout(function () {\n\n      intro.classList.add(\"gone\");\n\n      musicToggle.classList.add(\"show\");\n\n\n      \/*\n        \u0646\u0645\u0627\u06cc\u0634 \u062a\u062f\u0631\u06cc\u062c\u06cc \u0639\u0646\u0627\u0635\u0631\n      *\/\n\n      const revealElements =\n        shadow.querySelectorAll(\".reveal\");\n\n\n      revealElements.forEach(\n        function (element, index) {\n\n          setTimeout(\n            function () {\n\n              element.classList.add(\n                \"visible\"\n              );\n\n            },\n            Math.min(\n              index * 90,\n              1000\n            )\n          );\n\n        }\n      );\n\n\n      startFireworks();\n\n    }, 850);\n\n  }\n\n\n  \/* =========================================================\n     BUTTONS\n  ========================================================= *\/\n\n  yes.addEventListener(\n    \"click\",\n    function (event) {\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      enter(true);\n\n    }\n  );\n\n\n  no.addEventListener(\n    \"click\",\n    function (event) {\n\n      event.preventDefault();\n      event.stopPropagation();\n\n      enter(false);\n\n    }\n  );\n\n\n  \/* =========================================================\n     CLICK ON ENVELOPE\n     \u062e\u0648\u062f \u067e\u0627\u06a9\u062a \u0647\u0645 \u0628\u0627\u0632 \u0645\u06cc\u200c\u0634\u0648\u062f\n  ========================================================= *\/\n\n  envelope.addEventListener(\n    \"click\",\n    function () {\n\n      enter(true);\n\n    }\n  );\n\n\n  envelope.addEventListener(\n    \"keydown\",\n    function (event) {\n\n      if (\n        event.key === \"Enter\" ||\n        event.key === \" \"\n      ) {\n\n        event.preventDefault();\n\n        enter(true);\n\n      }\n\n    }\n  );\n\n\n  \/* =========================================================\n     MUSIC TOGGLE\n  ========================================================= *\/\n\n  musicToggle.addEventListener(\n    \"click\",\n    function (event) {\n\n      event.preventDefault();\n\n      if (audio.paused) {\n\n        playMusic();\n\n      } else {\n\n        stopMusic();\n\n      }\n\n    }\n  );\n\n\n  \/* =========================================================\n     COUNTDOWN\n     \n     \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n     = 24 September 2026\n     \u0633\u0627\u0639\u062a 19:00 \u0627\u06cc\u0631\u0627\u0646\n  ========================================================= *\/\n\n  const target =\n    new Date(\n      \"2026-09-24T19:00:00+03:30\"\n    ).getTime();\n\n\n  const days =\n    shadow.getElementById(\"days\");\n\n  const hours =\n    shadow.getElementById(\"hours\");\n\n  const minutes =\n    shadow.getElementById(\"minutes\");\n\n  const seconds =\n    shadow.getElementById(\"seconds\");\n\n\n  function toPersianNumber(value) {\n\n    return String(value)\n      .replace(\n        \/\\d\/g,\n        function (digit) {\n\n          return \"\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\"[\n            Number(digit)\n          ];\n\n        }\n      );\n\n  }\n\n\n  function updateCountdown() {\n\n    let difference =\n      target - Date.now();\n\n\n    if (difference < 0) {\n      difference = 0;\n    }\n\n\n    const d =\n      Math.floor(\n        difference \/ 86400000\n      );\n\n\n    const h =\n      Math.floor(\n        (difference % 86400000) \/\n        3600000\n      );\n\n\n    const m =\n      Math.floor(\n        (difference % 3600000) \/\n        60000\n      );\n\n\n    const s =\n      Math.floor(\n        (difference % 60000) \/\n        1000\n      );\n\n\n    days.textContent =\n      toPersianNumber(d);\n\n\n    hours.textContent =\n      toPersianNumber(\n        String(h).padStart(2, \"0\")\n      );\n\n\n    minutes.textContent =\n      toPersianNumber(\n        String(m).padStart(2, \"0\")\n      );\n\n\n    seconds.textContent =\n      toPersianNumber(\n        String(s).padStart(2, \"0\")\n      );\n\n  }\n\n\n  updateCountdown();\n\n  setInterval(\n    updateCountdown,\n    1000\n  );\n\n\n  \/* =========================================================\n     PETALS\n  ========================================================= *\/\n\n  const petals =\n    shadow.getElementById(\"petals\");\n\n\n  for (\n    let i = 0;\n    i < 16;\n    i++\n  ) {\n\n    const petal =\n      document.createElement(\"span\");\n\n    petal.className = \"petal\";\n\n\n    const left =\n      Math.random() * 100;\n\n    const duration =\n      7 + Math.random() * 8;\n\n    const delay =\n      Math.random() * 7;\n\n    const size =\n      6 + Math.random() * 7;\n\n\n    petal.style.left =\n      left + \"%\";\n\n    petal.style.width =\n      size + \"px\";\n\n    petal.style.height =\n      (size * 1.35) + \"px\";\n\n    petal.style.animationDuration =\n      duration + \"s\";\n\n    petal.style.animationDelay =\n      delay + \"s\";\n\n\n    petals.appendChild(\n      petal\n    );\n\n  }\n\n\n  \/* =========================================================\n     FIREWORKS\n  ========================================================= *\/\n\n  const canvas =\n    shadow.getElementById(\"fireworks\");\n\n  const ctx =\n    canvas.getContext(\"2d\");\n\n\n  let fireworks = [];\n\n  let fireworksStarted = false;\n\n\n  function resizeCanvas() {\n\n    const ratio =\n      window.devicePixelRatio || 1;\n\n\n    canvas.width =\n      window.innerWidth * ratio;\n\n    canvas.height =\n      window.innerHeight * ratio;\n\n\n    canvas.style.width =\n      window.innerWidth + \"px\";\n\n    canvas.style.height =\n      window.innerHeight + \"px\";\n\n\n    ctx.setTransform(\n      ratio,\n      0,\n      0,\n      ratio,\n      0,\n      0\n    );\n\n  }\n\n\n  resizeCanvas();\n\n\n  window.addEventListener(\n    \"resize\",\n    resizeCanvas\n  );\n\n\n  function makeFirework() {\n\n    const x =\n      70 +\n      Math.random() *\n      Math.max(\n        50,\n        window.innerWidth - 140\n      );\n\n\n    const y =\n      80 +\n      Math.random() *\n      Math.min(\n        350,\n        window.innerHeight * .4\n      );\n\n\n    const particles = [];\n\n\n    for (\n      let i = 0;\n      i < 30;\n      i++\n    ) {\n\n      const angle =\n        Math.random() *\n        Math.PI *\n        2;\n\n\n      const speed =\n        1 +\n        Math.random() * 3;\n\n\n      particles.push({\n\n        x: x,\n\n        y: y,\n\n        vx:\n          Math.cos(angle) *\n          speed,\n\n        vy:\n          Math.sin(angle) *\n          speed,\n\n        life: 1\n\n      });\n\n    }\n\n\n    fireworks.push(\n      particles\n    );\n\n  }\n\n\n  function animateFireworks() {\n\n    if (!fireworksStarted) {\n      return;\n    }\n\n\n    ctx.clearRect(\n      0,\n      0,\n      window.innerWidth,\n      window.innerHeight\n    );\n\n\n    fireworks =\n      fireworks.filter(\n        function (particles) {\n\n          particles.forEach(\n            function (particle) {\n\n              particle.x +=\n                particle.vx;\n\n              particle.y +=\n                particle.vy;\n\n              particle.vy +=\n                .025;\n\n              particle.life -=\n                .018;\n\n\n              ctx.globalAlpha =\n                Math.max(\n                  0,\n                  particle.life\n                );\n\n\n              ctx.fillStyle =\n                \"#d9a9b7\";\n\n\n              ctx.beginPath();\n\n\n              ctx.arc(\n                particle.x,\n                particle.y,\n                1.4,\n                0,\n                Math.PI * 2\n              );\n\n\n              ctx.fill();\n\n            }\n          );\n\n\n          return particles.some(\n            function (particle) {\n\n              return (\n                particle.life > 0\n              );\n\n            }\n          );\n\n        }\n      );\n\n\n    ctx.globalAlpha = 1;\n\n\n    requestAnimationFrame(\n      animateFireworks\n    );\n\n  }\n\n\n  function startFireworks() {\n\n    fireworksStarted = true;\n\n\n    setTimeout(\n      makeFirework,\n      400\n    );\n\n\n    setTimeout(\n      makeFirework,\n      1500\n    );\n\n\n    setTimeout(\n      makeFirework,\n      2800\n    );\n\n\n    animateFireworks();\n\n\n    setInterval(\n      function () {\n\n        if (\n          document.visibilityState ===\n          \"visible\"\n        ) {\n\n          makeFirework();\n\n        }\n\n      },\n      10000\n    );\n\n  }\n\n\n  \/* =========================================================\n     INITIAL STATE\n  ========================================================= *\/\n\n  \/*\n    \u0635\u0641\u062d\u0647 \u0627\u0635\u0644\u06cc \u0627\u0632 \u0627\u0628\u062a\u062f\u0627 \u0622\u0645\u0627\u062f\u0647 \u0627\u0633\u062a\u060c\n    \u0648\u0644\u06cc \u062a\u0627 \u0628\u0627\u0632 \u0634\u062f\u0646 \u067e\u0627\u06a9\u062a \u0631\u0648\u06cc \u0622\u0646 \u0644\u0627\u06cc\u0647 Intro \u0642\u0631\u0627\u0631 \u062f\u0627\u0631\u062f.\n  *\/\n\n})();\n<\/script>\n\n\n\n<div id=\"arshia-wedding\">\n\n  <!-- =========================\n       MUSIC\n  ========================== -->\n  <audio\n    id=\"arw-music\"\n    src=\"https:\/\/arshiakhani.ir\/wp-content\/uploads\/2026\/08\/music.mp3\"\n    loop\n    preload=\"auto\"\n    playsinline\n  ><\/audio>\n\n\n  <!-- =========================\n       INTRO \/ ENVELOPE\n  ========================== -->\n  <div class=\"arw-intro\" id=\"arw-intro\">\n\n    <div class=\"arw-intro-content\">\n\n      <div class=\"arw-top-title\">WEDDING INVITATION<\/div>\n\n      <div\n        class=\"arw-envelope\"\n        id=\"arw-envelope\"\n        role=\"button\"\n        tabindex=\"0\"\n        aria-label=\"\u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u062f\u0639\u0648\u062a \u0646\u0627\u0645\u0647\"\n      >\n\n        <div class=\"arw-envelope-back\"><\/div>\n\n        <div class=\"arw-paper\">\n          <div class=\"arw-paper-small\">\u062f\u0639\u0648\u062a \u0628\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f<\/div>\n          <div class=\"arw-paper-line\"><\/div>\n          <div class=\"arw-paper-title\">\u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647<\/div>\n          <div class=\"arw-paper-date\">\u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5<\/div>\n        <\/div>\n\n        <div class=\"arw-flap\"><\/div>\n\n        <div class=\"arw-envelope-front\"><\/div>\n\n        <div class=\"arw-seal\">\u2665<\/div>\n\n      <\/div>\n\n\n      <div class=\"arw-open-text\" id=\"arw-open-text\">\n        \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06a9\u062a \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f\n      <\/div>\n\n\n      <div class=\"arw-music-question\" id=\"arw-music-question\">\n        \u0622\u06cc\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u062e\u0634 \u0634\u0648\u062f\u061f\n      <\/div>\n\n\n      <div class=\"arw-choice-buttons\" id=\"arw-choice-buttons\">\n\n        <button type=\"button\" id=\"arw-yes\">\n          \u266b \u0628\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc\n        <\/button>\n\n        <button type=\"button\" id=\"arw-no\">\n          \u0628\u062f\u0648\u0646 \u0645\u0648\u0633\u06cc\u0642\u06cc\n        <\/button>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n\n  <!-- =========================\n       MAIN\n  ========================== -->\n  <div class=\"arw-main\" id=\"arw-main\">\n\n    <!-- HERO -->\n    <section class=\"arw-hero\">\n\n      <div class=\"arw-hero-decoration arw-d1\">\u2665<\/div>\n      <div class=\"arw-hero-decoration arw-d2\">\u2661<\/div>\n\n      <div class=\"arw-hero-content\">\n\n        <div class=\"arw-kicker\">\n          \u062f\u0639\u0648\u062a \u0628\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f\n        <\/div>\n\n        <div class=\"arw-line\"><\/div>\n\n        <h1>\n          \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n        <\/h1>\n\n        <div class=\"arw-date\">\n          \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5\n        <\/div>\n\n        <div class=\"arw-photo-box\">\n\n          <img decoding=\"async\"\n            src=\"https:\/\/arshiakhani.ir\/wp-content\/uploads\/2026\/08\/childhood.jpg\"\n            alt=\"\u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\"\n            class=\"arw-photo\"\n          >\n\n        <\/div>\n\n        <div class=\"arw-hero-message\">\n          \u0628\u0627 \u0639\u0634\u0642\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc \u0622\u063a\u0627\u0632 \u0632\u0646\u062f\u06af\u06cc \u0645\u0634\u062a\u0631\u06a9\u0645\u0627\u0646 \u062f\u0639\u0648\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.\n        <\/div>\n\n        <div class=\"arw-scroll-hint\">\n          \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 \u062c\u0632\u0626\u06cc\u0627\u062a \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0646\u06cc\u062f\n          <span>\u2304<\/span>\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- COUNTDOWN -->\n    <section class=\"arw-section\">\n\n      <div class=\"arw-section-inner\">\n\n        <div class=\"arw-en-title\">\n          OUR SPECIAL DAY\n        <\/div>\n\n        <h2>\n          \u0631\u0648\u0632 \u0628\u0632\u0631\u06af \u0645\u0627\n        <\/h2>\n\n        <div class=\"arw-heart\">\n          \u2665\n        <\/div>\n\n        <p>\n          \u062d\u0636\u0648\u0631 \u0634\u0645\u0627 \u0639\u0632\u06cc\u0632\u0627\u0646\u060c \u0627\u06cc\u0646 \u0634\u0628 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0627 \u06a9\u0627\u0645\u0644\u200c\u062a\u0631 \u0645\u06cc\u200c\u06a9\u0646\u062f.\n        <\/p>\n\n\n        <div class=\"arw-countdown\">\n\n          <div class=\"arw-count-item\">\n            <strong id=\"arw-days\">&#8212;<\/strong>\n            <span>\u0631\u0648\u0632<\/span>\n          <\/div>\n\n          <div class=\"arw-count-item\">\n            <strong id=\"arw-hours\">&#8212;<\/strong>\n            <span>\u0633\u0627\u0639\u062a<\/span>\n          <\/div>\n\n          <div class=\"arw-count-item\">\n            <strong id=\"arw-minutes\">&#8212;<\/strong>\n            <span>\u062f\u0642\u06cc\u0642\u0647<\/span>\n          <\/div>\n\n          <div class=\"arw-count-item\">\n            <strong id=\"arw-seconds\">&#8212;<\/strong>\n            <span>\u062b\u0627\u0646\u06cc\u0647<\/span>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- LOCATION -->\n    <section class=\"arw-section arw-location\">\n\n      <div class=\"arw-section-inner\">\n\n        <div class=\"arw-en-title\">\n          LOCATION\n        <\/div>\n\n        <h2>\n          \u0644\u0648\u06a9\u06cc\u0634\u0646 \u0645\u0631\u0627\u0633\u0645\n        <\/h2>\n\n        <div class=\"arw-heart\">\n          \u2665\n        <\/div>\n\n\n        <div class=\"arw-info-list\">\n\n          <div class=\"arw-info\">\n            <div class=\"arw-info-icon\">\u2316<\/div>\n            <div>\n              <small>\u0645\u06a9\u0627\u0646<\/small>\n              <strong>\u06a9\u0627\u062e \u062a\u0627\u0644\u0627\u0631 \u0622\u0631\u0627\u0645\u06cc\u0633<\/strong>\n            <\/div>\n          <\/div>\n\n\n          <div class=\"arw-info\">\n            <div class=\"arw-info-icon\">\u25f7<\/div>\n            <div>\n              <small>\u0632\u0645\u0627\u0646<\/small>\n              <strong>\u06f1\u06f9:\u06f0\u06f0 \u0627\u0644\u06cc \u06f2\u06f2:\u06f0\u06f0<\/strong>\n            <\/div>\n          <\/div>\n\n\n          <div class=\"arw-info\">\n            <div class=\"arw-info-icon\">\ud83d\udcc5<\/div>\n            <div>\n              <small>\u062a\u0627\u0631\u06cc\u062e<\/small>\n              <strong>\u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5<\/strong>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n\n        <a\n          class=\"arw-map\"\n          href=\"https:\/\/nshn.ir\/2drbv8BkWx-DC7\"\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n        >\n          \u0645\u0634\u0627\u0647\u062f\u0647 \u0645\u0633\u06cc\u0631 \u062f\u0631 \u0646\u0634\u0627\u0646\n        <\/a>\n\n      <\/div>\n\n    <\/section>\n\n\n    <!-- FOOTER -->\n    <section class=\"arw-final\">\n\n      <div class=\"arw-final-heart\">\n        \u2665\n      <\/div>\n\n      <h3>\n        \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647\n      <\/h3>\n\n      <p>\n        \u0628\u0627 \u0639\u0634\u0642\u060c \u0645\u0646\u062a\u0638\u0631 \u062f\u06cc\u062f\u0627\u0631 \u0634\u0645\u0627 \u0647\u0633\u062a\u06cc\u0645.\n      <\/p>\n\n    <\/section>\n\n  <\/div>\n\n\n  <!-- =========================\n       MUSIC BUTTON\n  ========================== -->\n  <button\n    type=\"button\"\n    class=\"arw-music-button\"\n    id=\"arw-music-button\"\n    aria-label=\"\u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n  >\n    \u266b\n  <\/button>\n\n\n<style>\n\/* =========================================================\n   COMPLETE ISOLATED WEDDING STYLE\n   \u0647\u06cc\u0686 \u0627\u0633\u062a\u0627\u06cc\u0644 \u0639\u0645\u0648\u0645\u06cc \u0631\u0648\u06cc \u0642\u0627\u0644\u0628 \u0648\u0631\u062f\u067e\u0631\u0633 \u0627\u0639\u0645\u0627\u0644 \u0646\u0645\u06cc\u200c\u0634\u0648\u062f\n========================================================= *\/\n\n#arshia-wedding,\n#arshia-wedding * {\n  box-sizing: border-box;\n}\n\n\n\/* ROOT *\/\n\n#arshia-wedding {\n  position: fixed !important;\n  inset: 0 !important;\n  width: 100vw !important;\n  height: 100dvh !important;\n  min-height: 100dvh !important;\n\n  margin: 0 !important;\n  padding: 0 !important;\n\n  z-index: 2147483640 !important;\n\n  direction: rtl;\n  text-align: right;\n\n  overflow: hidden;\n\n  background: #fffaf7;\n\n  color: #392732;\n\n  font-family:\n    Tahoma,\n    Arial,\n    sans-serif;\n\n  isolation: isolate;\n\n  -webkit-font-smoothing: antialiased;\n}\n\n\n\/* =========================================================\n   MAIN SCROLL AREA\n========================================================= *\/\n\n#arshia-wedding .arw-main {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  overscroll-behavior: contain;\n\n  scroll-behavior: smooth;\n\n  background:\n    radial-gradient(\n      circle at 85% 8%,\n      rgba(228, 194, 204, .42),\n      transparent 30%\n    ),\n    #fffaf7;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n#arshia-wedding .arw-intro {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 100;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  padding: 20px;\n\n  background:\n    radial-gradient(\n      circle at 20% 20%,\n      rgba(232, 204, 211, .35),\n      transparent 35%\n    ),\n    #fffaf7;\n\n  opacity: 1;\n\n  visibility: visible;\n\n  pointer-events: auto;\n\n  transition:\n    opacity .8s ease,\n    visibility .8s ease;\n}\n\n\n#arshia-wedding .arw-intro.arw-hidden {\n  opacity: 0;\n\n  visibility: hidden;\n\n  pointer-events: none;\n}\n\n\n#arshia-wedding .arw-intro-content {\n  width: min(440px, 94vw);\n\n  text-align: center;\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n}\n\n\n\/* TOP TITLE *\/\n\n#arshia-wedding .arw-top-title {\n  margin-bottom: 22px;\n\n  color: #946075;\n\n  font-family: Georgia, serif;\n\n  font-size: 14px;\n\n  font-weight: 600;\n\n  letter-spacing: 5px;\n\n  direction: ltr;\n\n  text-align: center;\n}\n\n\n\/* =========================================================\n   ENVELOPE\n========================================================= *\/\n\n#arshia-wedding .arw-envelope {\n  position: relative;\n\n  width: min(330px, 82vw);\n\n  height: min(245px, 62vw);\n\n  min-height: 190px;\n\n  cursor: pointer;\n\n  perspective: 1000px;\n\n  outline: none;\n\n  margin: 0 auto;\n\n  transform: translateZ(0);\n}\n\n\n#arshia-wedding .arw-envelope-back {\n  position: absolute;\n\n  left: 0;\n  right: 0;\n\n  bottom: 0;\n\n  height: 78%;\n\n  background:\n    linear-gradient(\n      135deg,\n      #f2dce1,\n      #efd5dc\n    );\n\n  border: 1px solid #dfc3cb;\n\n  border-radius: 5px 5px 16px 16px;\n\n  box-shadow:\n    0 20px 50px rgba(80, 40, 55, .12);\n}\n\n\n\/* PAPER *\/\n\n#arshia-wedding .arw-paper {\n  position: absolute;\n\n  z-index: 3;\n\n  left: 8%;\n  right: 8%;\n\n  top: 27%;\n\n  height: 58%;\n\n  background: #fff;\n\n  border: 1px solid #eadbd7;\n\n  box-shadow:\n    0 8px 25px rgba(50, 30, 40, .08);\n\n  padding: 15px;\n\n  display: flex;\n\n  flex-direction: column;\n\n  align-items: center;\n\n  justify-content: center;\n\n  transition:\n    transform .8s cubic-bezier(.2,.8,.2,1),\n    top .8s cubic-bezier(.2,.8,.2,1);\n}\n\n\n#arshia-wedding .arw-envelope.arw-opened .arw-paper {\n  top: 2%;\n\n  transform: translateY(-22%);\n}\n\n\n\/* PAPER TEXT *\/\n\n#arshia-wedding .arw-paper-small {\n  color: #9b6377;\n\n  font-size: 12px;\n\n  margin-bottom: 8px;\n}\n\n\n#arshia-wedding .arw-paper-line {\n  width: 48px;\n\n  height: 2px;\n\n  background: #9b6377;\n\n  margin-bottom: 13px;\n}\n\n\n#arshia-wedding .arw-paper-title {\n  font-size: clamp(25px, 7vw, 38px);\n\n  color: #392732;\n\n  white-space: nowrap;\n}\n\n\n#arshia-wedding .arw-paper-date {\n  margin-top: 15px;\n\n  border: 1px solid #d9b8c3;\n\n  border-radius: 30px;\n\n  padding: 8px 24px;\n\n  color: #8d586d;\n\n  font-size: 13px;\n}\n\n\n\/* FLAP *\/\n\n#arshia-wedding .arw-flap {\n  position: absolute;\n\n  z-index: 5;\n\n  top: 23%;\n\n  left: 0;\n\n  width: 0;\n  height: 0;\n\n  border-left: calc(min(330px, 82vw) \/ 2) solid transparent;\n\n  border-right: calc(min(330px, 82vw) \/ 2) solid transparent;\n\n  border-top: calc(min(245px, 62vw) * .37) solid #e8cbd2;\n\n  transform-origin: top center;\n\n  transition:\n    transform .8s cubic-bezier(.2,.8,.2,1);\n\n  filter:\n    drop-shadow(0 2px 2px rgba(0,0,0,.05));\n}\n\n\n#arshia-wedding .arw-envelope.arw-opened .arw-flap {\n  transform: rotateX(180deg);\n\n  z-index: 1;\n}\n\n\n\/* FRONT *\/\n\n#arshia-wedding .arw-envelope-front {\n  position: absolute;\n\n  z-index: 4;\n\n  left: 0;\n  right: 0;\n\n  bottom: 0;\n\n  height: 55%;\n\n  background:\n    linear-gradient(\n      145deg,\n      rgba(239,215,221,.94),\n      rgba(233,203,211,.98)\n    );\n\n  clip-path: polygon(\n    0 0,\n    50% 55%,\n    100% 0,\n    100% 100%,\n    0 100%\n  );\n\n  border-radius: 0 0 16px 16px;\n\n  pointer-events: none;\n}\n\n\n\/* SEAL *\/\n\n#arshia-wedding .arw-seal {\n  position: absolute;\n\n  z-index: 6;\n\n  left: 50%;\n\n  bottom: 18%;\n\n  transform: translateX(-50%);\n\n  width: 50px;\n  height: 50px;\n\n  border-radius: 50%;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  background: #9b5c73;\n\n  color: #fff;\n\n  font-size: 22px;\n\n  box-shadow:\n    0 7px 20px rgba(90,40,60,.2);\n\n  transition:\n    opacity .4s ease,\n    transform .5s ease;\n}\n\n\n#arshia-wedding .arw-envelope.arw-opened .arw-seal {\n  opacity: 0;\n\n  transform:\n    translateX(-50%)\n    scale(.7);\n}\n\n\n\/* OPEN TEXT *\/\n\n#arshia-wedding .arw-open-text {\n  margin-top: 18px;\n\n  color: #745463;\n\n  font-size: 13px;\n\n  transition:\n    opacity .4s ease,\n    transform .4s ease;\n}\n\n\n#arshia-wedding .arw-envelope.arw-opened + .arw-open-text {\n  opacity: 0;\n\n  transform: translateY(-5px);\n\n  pointer-events: none;\n}\n\n\n\/* MUSIC QUESTION *\/\n\n#arshia-wedding .arw-music-question {\n  margin-top: 8px;\n\n  font-size: 16px;\n\n  font-weight: 600;\n\n  color: #392732;\n\n  opacity: 0;\n\n  transform: translateY(10px);\n\n  pointer-events: none;\n\n  transition: .5s ease;\n}\n\n\n#arshia-wedding .arw-intro.arw-ready .arw-music-question {\n  opacity: 1;\n\n  transform: translateY(0);\n\n  pointer-events: auto;\n}\n\n\n\/* BUTTONS *\/\n\n#arshia-wedding .arw-choice-buttons {\n  display: flex;\n\n  gap: 10px;\n\n  margin-top: 12px;\n\n  opacity: 0;\n\n  transform: translateY(10px);\n\n  pointer-events: none;\n\n  transition: .5s ease;\n}\n\n\n#arshia-wedding .arw-intro.arw-ready .arw-choice-buttons {\n  opacity: 1;\n\n  transform: translateY(0);\n\n  pointer-events: auto;\n}\n\n\n#arshia-wedding .arw-choice-buttons button {\n  min-width: 125px;\n\n  border-radius: 30px;\n\n  border: 1px solid #9b5c73;\n\n  padding: 11px 18px;\n\n  font-family: Tahoma, Arial, sans-serif;\n\n  font-size: 13px;\n\n  cursor: pointer;\n\n  -webkit-tap-highlight-color: transparent;\n\n  transition: .25s ease;\n}\n\n\n#arshia-wedding .arw-choice-buttons button:first-child {\n  background: #9b5c73;\n\n  color: #fff;\n}\n\n\n#arshia-wedding .arw-choice-buttons button:last-child {\n  background: #fff;\n\n  color: #9b5c73;\n}\n\n\n#arshia-wedding .arw-choice-buttons button:active {\n  transform: scale(.96);\n}\n\n\n\/* =========================================================\n   HERO\n========================================================= *\/\n\n#arshia-wedding .arw-hero {\n  position: relative;\n\n  min-height: 100dvh;\n\n  width: 100%;\n\n  display: flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  padding:\n    max(45px, 6vh)\n    18px\n    55px;\n\n  overflow: hidden;\n\n  background:\n    radial-gradient(\n      circle at 85% 10%,\n      #ead7dc 0,\n      rgba(234,215,220,.35) 20%,\n      transparent 38%\n    ),\n    linear-gradient(\n      180deg,\n      #fffaf7,\n      #fdf3f1\n    );\n}\n\n\n#arshia-wedding .arw-hero-content {\n  width: min(650px, 100%);\n\n  text-align: center;\n\n  position: relative;\n\n  z-index: 2;\n}\n\n\n#arshia-wedding .arw-kicker {\n  color: #956174;\n\n  font-size: 14px;\n\n  font-weight: 600;\n\n  margin-bottom: 10px;\n}\n\n\n#arshia-wedding .arw-line {\n  width: 55px;\n\n  height: 2px;\n\n  margin: 0 auto 18px;\n\n  background: #9b5c73;\n}\n\n\n#arshia-wedding .arw-hero h1 {\n  margin: 0;\n\n  padding: 0;\n\n  color: #35242e;\n\n  font-size: clamp(38px, 10vw, 70px);\n\n  line-height: 1.35;\n\n  font-weight: 500;\n}\n\n\n#arshia-wedding .arw-date {\n  display: inline-block;\n\n  margin-top: 18px;\n\n  padding: 10px 28px;\n\n  border: 1px solid #d9b8c3;\n\n  border-radius: 40px;\n\n  color: #8c586d;\n\n  background: rgba(255,255,255,.75);\n\n  font-size: 14px;\n}\n\n\n\/* PHOTO *\/\n\n#arshia-wedding .arw-photo-box {\n  width: min(460px, 88vw);\n\n  aspect-ratio: 4 \/ 5;\n\n  margin:\n    clamp(25px, 5vh, 42px)\n    auto\n    22px;\n\n  padding: 11px;\n\n  background: rgba(255,255,255,.85);\n\n  border: 1px solid #dfc7ce;\n\n  border-radius: 42px 42px 15px 15px;\n\n  box-shadow:\n    0 22px 55px rgba(80,40,55,.15);\n\n  overflow: hidden;\n}\n\n\n#arshia-wedding .arw-photo {\n  display: block;\n\n  width: 100%;\n\n  height: 100%;\n\n  object-fit: cover;\n\n  border-radius: 32px 32px 8px 8px;\n\n  animation: arw-photo-zoom 14s ease-in-out infinite alternate;\n}\n\n\n@keyframes arw-photo-zoom {\n\n  from {\n    transform: scale(1);\n  }\n\n  to {\n    transform: scale(1.045);\n  }\n\n}\n\n\n#arshia-wedding .arw-hero-message {\n  width: min(600px, 94vw);\n\n  margin: 0 auto;\n\n  padding: 18px 20px;\n\n  color: #765563;\n\n  background: rgba(243,216,224,.48);\n\n  border-radius: 18px;\n\n  font-size: clamp(14px, 3.8vw, 18px);\n\n  line-height: 2;\n}\n\n\n#arshia-wedding .arw-scroll-hint {\n  margin-top: 24px;\n\n  color: #9b687a;\n\n  font-size: 12px;\n\n  opacity: .85;\n}\n\n\n#arshia-wedding .arw-scroll-hint span {\n  display: block;\n\n  font-size: 25px;\n\n  line-height: 18px;\n\n  margin-top: 4px;\n}\n\n\n\/* DECOR *\/\n\n#arshia-wedding .arw-hero-decoration {\n  position: absolute;\n\n  color: #dca9b8;\n\n  opacity: .25;\n\n  pointer-events: none;\n}\n\n\n#arshia-wedding .arw-d1 {\n  top: 10%;\n\n  right: 5%;\n\n  font-size: 70px;\n}\n\n\n#arshia-wedding .arw-d2 {\n  bottom: 8%;\n\n  left: 5%;\n\n  font-size: 90px;\n}\n\n\n\/* =========================================================\n   SECTIONS\n========================================================= *\/\n\n#arshia-wedding .arw-section {\n  position: relative;\n\n  width: 100%;\n\n  padding:\n    90px\n    18px;\n\n  background: #fff;\n}\n\n\n#arshia-wedding .arw-section:nth-of-type(even) {\n  background:\n    linear-gradient(\n      180deg,\n      #fffaf8,\n      #fff\n    );\n}\n\n\n#arshia-wedding .arw-section-inner {\n  width: min(680px, 100%);\n\n  margin: 0 auto;\n\n  text-align: center;\n}\n\n\n#arshia-wedding .arw-en-title {\n  direction: ltr;\n\n  font-family: Georgia, serif;\n\n  font-size: clamp(20px, 6vw, 31px);\n\n  letter-spacing: 1px;\n\n  color: #222;\n\n  margin-bottom: 25px;\n}\n\n\n#arshia-wedding .arw-section h2 {\n  margin: 0;\n\n  font-size: clamp(32px, 8vw, 48px);\n\n  line-height: 1.5;\n\n  font-weight: 500;\n\n  color: #30212a;\n}\n\n\n#arshia-wedding .arw-heart {\n  margin: 22px auto;\n\n  color: #e72f60;\n\n  font-size: 31px;\n\n  line-height: 1;\n}\n\n\n#arshia-wedding .arw-section p {\n  margin: 0 auto 35px;\n\n  max-width: 600px;\n\n  font-size: clamp(16px, 4.5vw, 21px);\n\n  line-height: 2.2;\n\n  color: #4b3941;\n}\n\n\n\/* COUNTDOWN *\/\n\n#arshia-wedding .arw-countdown {\n  display: grid;\n\n  grid-template-columns:\n    repeat(4, 1fr);\n\n  gap: 10px;\n\n  width: 100%;\n\n  max-width: 600px;\n\n  margin: 35px auto 0;\n}\n\n\n#arshia-wedding .arw-count-item {\n  padding: 18px 5px;\n\n  border: 1px solid #ead9de;\n\n  border-radius: 18px;\n\n  background: #fffafa;\n\n  min-width: 0;\n}\n\n\n#arshia-wedding .arw-count-item strong {\n  display: block;\n\n  color: #8f5269;\n\n  font-size: clamp(25px, 7vw, 42px);\n\n  line-height: 1.3;\n\n  direction: ltr;\n}\n\n\n#arshia-wedding .arw-count-item span {\n  display: block;\n\n  margin-top: 5px;\n\n  color: #644651;\n\n  font-size: 13px;\n}\n\n\n\/* =========================================================\n   LOCATION\n========================================================= *\/\n\n#arshia-wedding .arw-location {\n  background:\n    radial-gradient(\n      circle at 10% 80%,\n      rgba(231,204,213,.35),\n      transparent 35%\n    ),\n    #fdf6f3;\n}\n\n\n#arshia-wedding .arw-info-list {\n  width: min(560px, 100%);\n\n  margin: 30px auto;\n}\n\n\n#arshia-wedding .arw-info {\n  display: flex;\n\n  align-items: center;\n\n  gap: 16px;\n\n  text-align: right;\n\n  padding: 20px;\n\n  margin-bottom: 12px;\n\n  background: rgba(255,255,255,.8);\n\n  border: 1px solid #ead9de;\n\n  border-radius: 18px;\n}\n\n\n#arshia-wedding .arw-info-icon {\n  flex: 0 0 48px;\n\n  width: 48px;\n  height: 48px;\n\n  border-radius: 50%;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  background: #f0dce2;\n\n  color: #87566b;\n\n  font-size: 22px;\n}\n\n\n#arshia-wedding .arw-info small {\n  display: block;\n\n  color: #9a6b7b;\n\n  font-size: 12px;\n\n  margin-bottom: 5px;\n}\n\n\n#arshia-wedding .arw-info strong {\n  display: block;\n\n  color: #392732;\n\n  font-size: 16px;\n\n  font-weight: 500;\n}\n\n\n#arshia-wedding .arw-map {\n  display: inline-flex;\n\n  align-items: center;\n  justify-content: center;\n\n  min-height: 52px;\n\n  padding: 0 28px;\n\n  border-radius: 30px;\n\n  background: #9b5c73;\n\n  color: #fff !important;\n\n  text-decoration: none !important;\n\n  font-size: 14px;\n\n  box-shadow:\n    0 10px 25px rgba(120,60,80,.18);\n\n  transition: .25s ease;\n}\n\n\n#arshia-wedding .arw-map:active {\n  transform: scale(.97);\n}\n\n\n\/* =========================================================\n   FINAL\n========================================================= *\/\n\n#arshia-wedding .arw-final {\n  padding:\n    75px\n    20px\n    100px;\n\n  text-align: center;\n\n  background:\n    linear-gradient(\n      180deg,\n      #fffaf7,\n      #f5e5e8\n    );\n}\n\n\n#arshia-wedding .arw-final-heart {\n  color: #e72f60;\n\n  font-size: 30px;\n\n  margin-bottom: 20px;\n}\n\n\n#arshia-wedding .arw-final h3 {\n  margin: 0 0 15px;\n\n  color: #392732;\n\n  font-size: 30px;\n\n  font-weight: 500;\n}\n\n\n#arshia-wedding .arw-final p {\n  margin: 0;\n\n  color: #755561;\n\n  font-size: 15px;\n}\n\n\n\/* =========================================================\n   MUSIC FLOATING BUTTON\n========================================================= *\/\n\n#arshia-wedding .arw-music-button {\n  position: absolute;\n\n  z-index: 200;\n\n  left: 22px;\n\n  bottom:\n    max(22px, env(safe-area-inset-bottom));\n\n  width: 58px;\n\n  height: 58px;\n\n  border: 0;\n\n  border-radius: 50%;\n\n  background: #8f526d;\n\n  color: #fff;\n\n  font-size: 24px;\n\n  display: flex;\n\n  align-items: center;\n  justify-content: center;\n\n  box-shadow:\n    0 10px 28px rgba(70,30,50,.25);\n\n  cursor: pointer;\n\n  -webkit-tap-highlight-color: transparent;\n\n  transition:\n    transform .2s ease,\n    background .2s ease;\n}\n\n\n#arshia-wedding .arw-music-button:active {\n  transform: scale(.92);\n}\n\n\n#arshia-wedding .arw-music-button.arw-playing {\n  background: #713e56;\n\n  animation: arw-pulse 1.8s infinite;\n}\n\n\n@keyframes arw-pulse {\n\n  0%, 100% {\n    box-shadow:\n      0 10px 28px rgba(70,30,50,.25);\n  }\n\n  50% {\n    box-shadow:\n      0 10px 35px rgba(150,70,100,.45);\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  #arshia-wedding .arw-intro {\n    padding: 12px;\n  }\n\n\n  #arshia-wedding .arw-top-title {\n    font-size: 11px;\n\n    letter-spacing: 3px;\n\n    margin-bottom: 13px;\n  }\n\n\n  #arshia-wedding .arw-envelope {\n    width: min(310px, 84vw);\n\n    height: min(225px, 61vw);\n  }\n\n\n  #arshia-wedding .arw-open-text {\n    font-size: 12px;\n\n    margin-top: 12px;\n  }\n\n\n  #arshia-wedding .arw-music-question {\n    font-size: 15px;\n  }\n\n\n  #arshia-wedding .arw-choice-buttons {\n    gap: 7px;\n  }\n\n\n  #arshia-wedding .arw-choice-buttons button {\n    min-width: 112px;\n\n    padding:\n      10px\n      12px;\n\n    font-size: 12px;\n  }\n\n\n  #arshia-wedding .arw-hero {\n    min-height: 100dvh;\n\n    padding-top: 35px;\n  }\n\n\n  #arshia-wedding .arw-photo-box {\n    width: min(430px, 90vw);\n\n    border-radius: 32px 32px 13px 13px;\n\n    padding: 9px;\n  }\n\n\n  #arshia-wedding .arw-photo {\n    border-radius: 25px 25px 7px 7px;\n  }\n\n\n  #arshia-wedding .arw-section {\n    padding:\n      70px\n      16px;\n  }\n\n\n  #arshia-wedding .arw-countdown {\n    gap: 6px;\n  }\n\n\n  #arshia-wedding .arw-count-item {\n    padding:\n      15px\n      3px;\n  }\n\n\n  #arshia-wedding .arw-count-item strong {\n    font-size: 24px;\n  }\n\n\n  #arshia-wedding .arw-count-item span {\n    font-size: 11px;\n  }\n\n\n  #arshia-wedding .arw-info {\n    padding: 15px;\n  }\n\n\n  #arshia-wedding .arw-info-icon {\n    width: 42px;\n    height: 42px;\n\n    flex-basis: 42px;\n  }\n\n\n  #arshia-wedding .arw-music-button {\n    left: 17px;\n\n    width: 54px;\n    height: 54px;\n  }\n\n}\n\n\n\/* VERY SMALL PHONES *\/\n\n@media (max-width: 380px) {\n\n  #arshia-wedding .arw-envelope {\n    width: 285px;\n\n    height: 205px;\n  }\n\n\n  #arshia-wedding .arw-paper-title {\n    font-size: 25px;\n  }\n\n\n  #arshia-wedding .arw-choice-buttons button {\n    min-width: 105px;\n\n    padding: 9px 8px;\n  }\n\n\n  #arshia-wedding .arw-hero h1 {\n    font-size: 38px;\n  }\n\n}\n\n\n\/* LANDSCAPE MOBILE *\/\n\n@media (\n  max-height: 600px\n) and (\n  orientation: landscape\n) {\n\n  #arshia-wedding .arw-intro {\n    overflow-y: auto;\n    align-items: flex-start;\n  }\n\n\n  #arshia-wedding .arw-intro-content {\n    padding:\n      20px\n      0\n      30px;\n  }\n\n\n  #arshia-wedding .arw-top-title {\n    margin-bottom: 8px;\n  }\n\n\n  #arshia-wedding .arw-envelope {\n    width: 280px;\n\n    height: 190px;\n  }\n\n\n  #arshia-wedding .arw-open-text {\n    margin-top: 7px;\n  }\n\n}\n\n\n\/* ACCESSIBILITY *\/\n\n#arshia-wedding button,\n#arshia-wedding a {\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n\n#arshia-wedding img {\n  max-width: 100%;\n}\n\n\n\/* \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0646\u062a\u062e\u0627\u0628 \u0646\u0627\u062e\u0648\u0627\u0633\u062a\u0647 \u067e\u0627\u06a9\u062a *\/\n\n#arshia-wedding .arw-envelope {\n  -webkit-user-select: none;\n  user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n<\/style>\n\n\n<script>\n(function () {\n\n  \"use strict\";\n\n\n  \/* =====================================================\n     ELEMENTS\n  ===================================================== *\/\n\n  const root = document.getElementById(\"arshia-wedding\");\n\n  if (!root) return;\n\n\n  const intro =\n    document.getElementById(\"arw-intro\");\n\n  const envelope =\n    document.getElementById(\"arw-envelope\");\n\n  const yesButton =\n    document.getElementById(\"arw-yes\");\n\n  const noButton =\n    document.getElementById(\"arw-no\");\n\n  const music =\n    document.getElementById(\"arw-music\");\n\n  const musicButton =\n    document.getElementById(\"arw-music-button\");\n\n  const openText =\n    document.getElementById(\"arw-open-text\");\n\n\n  \/* =====================================================\n     ENVELOPE\n  ===================================================== *\/\n\n  let envelopeOpened = false;\n\n  function openEnvelope() {\n\n    if (envelopeOpened) return;\n\n    envelopeOpened = true;\n\n    envelope.classList.add(\"arw-opened\");\n\n    intro.classList.add(\"arw-ready\");\n\n    if (openText) {\n      openText.style.opacity = \"0\";\n      openText.style.transform = \"translateY(-5px)\";\n    }\n\n  }\n\n\n  envelope.addEventListener(\"click\", function () {\n    openEnvelope();\n  });\n\n\n  envelope.addEventListener(\"keydown\", function (event) {\n\n    if (\n      event.key === \"Enter\" ||\n      event.key === \" \"\n    ) {\n\n      event.preventDefault();\n\n      openEnvelope();\n\n    }\n\n  });\n\n\n  \/* =====================================================\n     MUSIC\n  ===================================================== *\/\n\n  let isPlaying = false;\n\n\n  function updateMusicButton() {\n\n    if (isPlaying) {\n\n      musicButton.innerHTML = \"\ud83d\udd0a\";\n\n      musicButton.classList.add(\"arw-playing\");\n\n      musicButton.setAttribute(\n        \"aria-label\",\n        \"\u062a\u0648\u0642\u0641 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      );\n\n    } else {\n\n      musicButton.innerHTML = \"\u266b\";\n\n      musicButton.classList.remove(\"arw-playing\");\n\n      musicButton.setAttribute(\n        \"aria-label\",\n        \"\u067e\u062e\u0634 \u0645\u0648\u0633\u06cc\u0642\u06cc\"\n      );\n\n    }\n\n  }\n\n\n  music.addEventListener(\"play\", function () {\n\n    isPlaying = true;\n\n    updateMusicButton();\n\n  });\n\n\n  music.addEventListener(\"pause\", function () {\n\n    isPlaying = false;\n\n    updateMusicButton();\n\n  });\n\n\n  music.addEventListener(\"ended\", function () {\n\n    isPlaying = false;\n\n    updateMusicButton();\n\n  });\n\n\n  async function playMusic() {\n\n    try {\n\n      await music.play();\n\n      isPlaying = true;\n\n      updateMusicButton();\n\n    } catch (error) {\n\n      isPlaying = false;\n\n      updateMusicButton();\n\n    }\n\n  }\n\n\n  function stopMusic() {\n\n    music.pause();\n\n    isPlaying = false;\n\n    updateMusicButton();\n\n  }\n\n\n  \/* =====================================================\n     YES\n  ===================================================== *\/\n\n  yesButton.addEventListener(\"click\", function (event) {\n\n    event.stopPropagation();\n\n    openEnvelope();\n\n    playMusic();\n\n    closeIntro();\n\n  });\n\n\n  \/* =====================================================\n     NO\n  ===================================================== *\/\n\n  noButton.addEventListener(\"click\", function (event) {\n\n    event.stopPropagation();\n\n    openEnvelope();\n\n    stopMusic();\n\n    closeIntro();\n\n  });\n\n\n  \/* =====================================================\n     CLOSE INTRO\n  ===================================================== *\/\n\n  function closeIntro() {\n\n    setTimeout(function () {\n\n      intro.classList.add(\"arw-hidden\");\n\n      setTimeout(function () {\n\n        intro.style.display = \"none\";\n\n      }, 850);\n\n    }, 350);\n\n  }\n\n\n  \/* =====================================================\n     FLOATING MUSIC BUTTON\n  ===================================================== *\/\n\n  musicButton.addEventListener(\"click\", function (event) {\n\n    event.stopPropagation();\n\n    if (isPlaying) {\n\n      stopMusic();\n\n    } else {\n\n      playMusic();\n\n    }\n\n  });\n\n\n  \/* =====================================================\n     COUNTDOWN\n     \n     2 \u0645\u0647\u0631 1405\n     = 24 September 2026\n     \u0633\u0627\u0639\u062a 19:00\n     ===================================================== *\/\n\n  const targetDate =\n    new Date(\n      \"2026-09-24T19:00:00+03:30\"\n    ).getTime();\n\n\n  function toPersianNumber(value) {\n\n    return String(value).replace(\n      \/\\d\/g,\n      function (digit) {\n\n        return \"\u06f0\u06f1\u06f2\u06f3\u06f4\u06f5\u06f6\u06f7\u06f8\u06f9\"[digit];\n\n      }\n    );\n\n  }\n\n\n  function updateCountdown() {\n\n    const now = Date.now();\n\n    let difference =\n      targetDate - now;\n\n\n    if (difference < 0) {\n\n      difference = 0;\n\n    }\n\n\n    const days =\n      Math.floor(\n        difference \/ 86400000\n      );\n\n\n    const hours =\n      Math.floor(\n        (difference % 86400000)\n        \/ 3600000\n      );\n\n\n    const minutes =\n      Math.floor(\n        (difference % 3600000)\n        \/ 60000\n      );\n\n\n    const seconds =\n      Math.floor(\n        (difference % 60000)\n        \/ 1000\n      );\n\n\n    document.getElementById(\n      \"arw-days\"\n    ).textContent =\n      toPersianNumber(days);\n\n\n    document.getElementById(\n      \"arw-hours\"\n    ).textContent =\n      toPersianNumber(\n        String(hours).padStart(2, \"0\")\n      );\n\n\n    document.getElementById(\n      \"arw-minutes\"\n    ).textContent =\n      toPersianNumber(\n        String(minutes).padStart(2, \"0\")\n      );\n\n\n    document.getElementById(\n      \"arw-seconds\"\n    ).textContent =\n      toPersianNumber(\n        String(seconds).padStart(2, \"0\")\n      );\n\n  }\n\n\n  updateCountdown();\n\n  setInterval(\n    updateCountdown,\n    1000\n  );\n\n\n  \/* =====================================================\n     INITIAL MUSIC BUTTON\n  ===================================================== *\/\n\n  updateMusicButton();\n\n\n  \/* =====================================================\n     PREVENT ACCIDENTAL PAGE SCROLL BEHIND APP\n  ===================================================== *\/\n\n  document.documentElement.style.overflow = \"hidden\";\n  document.body.style.overflow = \"hidden\";\n\n\n})();\n<\/script>\n\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>WEDDING INVITATION \u062f\u0639\u0648\u062a \u0628\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647 \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5 \u2665 \u0628\u0631\u0627\u06cc \u0628\u0627\u0632 \u06a9\u0631\u062f\u0646 \u067e\u0627\u06a9\u062a \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u0622\u06cc\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc \u067e\u062e\u0634 \u0634\u0648\u062f\u061f \u266b \u0628\u0627 \u0645\u0648\u0633\u06cc\u0642\u06cc \u0628\u062f\u0648\u0646 \u0645\u0648\u0633\u06cc\u0642\u06cc \u2665 \u2661 \u062f\u0639\u0648\u062a \u0628\u0647 \u062c\u0634\u0646 \u067e\u06cc\u0648\u0646\u062f \u0639\u0631\u0634\u06cc\u0627 \u0648 \u0641\u0627\u0637\u0645\u0647 \u06f2 \u0645\u0647\u0631 \u06f1\u06f4\u06f0\u06f5 \u0628\u0627 \u0639\u0634\u0642\u060c \u0634\u0645\u0627 \u0631\u0627 \u0628\u0647 \u062a\u0645\u0627\u0634\u0627\u06cc \u0622\u063a\u0627\u0632 \u0632\u0646\u062f\u06af\u06cc \u0645\u0634\u062a\u0631\u06a9\u0645\u0627\u0646 \u062f\u0639\u0648\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645. \u0628\u0631\u0627\u06cc \u0645\u0634\u0627\u0647\u062f\u0647 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":13,"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/arshiakhani.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}