:root {
  --aqiqah-paper: #fffaf0;
  --aqiqah-panel: rgb(255 255 255 / 72%);
  --aqiqah-ink: #352b27;
  --aqiqah-muted: #756762;
  --aqiqah-accent: #bd6b45;
  --aqiqah-sage: #82947a;
  --aqiqah-gold: #d2a563;
  --aqiqah-line: color-mix(in srgb, var(--aqiqah-gold), transparent 32%);
  --aqiqah-radius: 1.6rem;
}
.aqiqah-preview-shell { background: var(--aqiqah-paper); color: var(--aqiqah-ink); min-height: 100vh; overflow: clip; position: relative; }
.aqiqah-preview-shell[data-aqiqah-gated] [data-aqiqah-content] { display: none; }
.aqiqah-preview-shell[data-aqiqah-gated][data-aqiqah-opened="true"] [data-aqiqah-content] { display: block; }
.aqiqah-opening[hidden] { display: none !important; }
.aqiqah-opening { align-items: center; background: var(--aqiqah-paper); display: flex; isolation: isolate; justify-content: center; min-height: min(100svh, 60rem); overflow: hidden; padding: 3.5rem 1.25rem 2.75rem; position: relative; text-align: center; }
.aqiqah-opening::before, .aqiqah-opening::after { border: 1px solid var(--aqiqah-line); content: ""; pointer-events: none; position: absolute; z-index: -1; }
.aqiqah-opening::before { inset: .55rem; }
.aqiqah-opening::after { inset: .85rem; }
.aqiqah-opening-frame { border: 2px solid var(--aqiqah-line); border-radius: var(--aqiqah-radius); box-shadow: inset 0 0 0 .35rem rgb(255 255 255 / 34%); inset: 1.2rem; pointer-events: none; position: absolute; z-index: -1; }
.aqiqah-opening-content { background: var(--aqiqah-panel); border: 1px solid color-mix(in srgb, var(--aqiqah-line), transparent 18%); border-radius: var(--aqiqah-panel-radius, 1.6rem); box-shadow: 0 1.5rem 3.5rem rgb(67 47 32 / 10%); margin-inline: auto; max-width: 31rem; padding: clamp(1.25rem, 5vw, 2.5rem) clamp(1rem, 5vw, 2.3rem) 1.5rem; position: relative; width: 100%; z-index: 1; }
.aqiqah-opening-seal { align-items: center; border: 1px solid var(--aqiqah-gold); border-radius: 50%; color: var(--aqiqah-accent); display: flex; font-size: .95rem; height: 2.1rem; justify-content: center; margin: 0 auto .65rem; width: 2.1rem; }
.aqiqah-opening-arabic { color: var(--aqiqah-accent); font-family: Georgia, serif; font-size: 1rem; margin: 0 0 .65rem; }
.aqiqah-opening-kicker { color: var(--aqiqah-sage); font-size: .72rem; font-weight: 800; letter-spacing: .2em; margin: 0 0 1rem; text-transform: uppercase; }
.aqiqah-opening-media { aspect-ratio: 1; border: .35rem solid var(--aqiqah-accent); border-radius: var(--aqiqah-radius); box-shadow: 0 .9rem 2rem rgb(82 48 35 / 16%); display: block; height: min(17rem, 64vw); margin: 0 auto 1.25rem; object-fit: cover; width: min(17rem, 64vw); }
.aqiqah-opening-media--fallback { align-items: center; background: color-mix(in srgb, var(--aqiqah-sage), white 74%); color: var(--aqiqah-accent); display: flex; font-size: 2.5rem; justify-content: center; }
.aqiqah-opening h1 { color: var(--aqiqah-accent); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.05rem, 9vw, 3.8rem); line-height: 1.05; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.aqiqah-opening-event { color: var(--aqiqah-ink); font-weight: 700; margin: .7rem 0 0; }
.aqiqah-opening-recipient { color: var(--aqiqah-muted); line-height: 1.5; margin: 1.25rem 0 .75rem; }
.aqiqah-opening-recipient strong { color: var(--aqiqah-ink); display: block; font-family: Georgia, serif; font-size: 1.25rem; margin-top: .15rem; }
.aqiqah-opening-note { color: var(--aqiqah-muted); line-height: 1.6; margin: .9rem auto 0; max-width: 28rem; }
.aqiqah-opening-button { align-items: center; background: var(--aqiqah-accent); border: 1px solid color-mix(in srgb, var(--aqiqah-accent), #000 14%); border-radius: .65rem; color: #fff; cursor: pointer; display: inline-flex; font: inherit; font-weight: 700; justify-content: center; margin-top: 1.25rem; min-height: 48px; min-width: min(100%, 20rem); padding: .75rem 1.5rem; transition: background-color 180ms ease, transform 180ms ease; }
.aqiqah-opening-button:hover, .aqiqah-opening-button:focus-visible { background: color-mix(in srgb, var(--aqiqah-accent), #000 16%); transform: translateY(-2px); }
.aqiqah-opening-button span { margin-left: .7rem; }
.aqiqah-opening-music-note { color: var(--aqiqah-muted); font-size: .82rem; margin: .7rem 0 0; }
.aqiqah-countdown { display: grid; gap: .65rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.7rem auto 0; max-width: 30rem; }
.aqiqah-countdown-item { background: var(--aqiqah-sage); border: 1px solid color-mix(in srgb, var(--aqiqah-sage), #fff 18%); border-radius: .8rem; color: #fff; min-width: 0; padding: .7rem .25rem; text-align: center; }
.aqiqah-countdown-item strong { display: block; font-size: clamp(1.2rem, 5vw, 1.85rem); line-height: 1; }
.aqiqah-countdown-item span { display: block; font-size: .58rem; letter-spacing: .07em; margin-top: .4rem; text-transform: uppercase; }
.aqiqah-invitation-content { background: var(--aqiqah-paper); position: relative; }
.aqiqah-invitation-content > .aqiqah-ornament-layer { height: 14rem; position: absolute; }
.aqiqah-invitation-content > .theme-ai-family-draft, .aqiqah-invitation-content > .theme-rimbun-editorial, .aqiqah-invitation-content > .theme-senja-terakota, .aqiqah-invitation-content > .theme-fresh-botanical-starter { position: relative; z-index: 1; }
.aqiqah-invitation-content .ai-draft-section { background: var(--aqiqah-paper); border-top: 1px solid color-mix(in srgb, var(--aqiqah-accent), transparent 68%); }
.aqiqah-invitation-content .ai-draft-section--soft { background: color-mix(in srgb, var(--aqiqah-sage), white 90%); }
.aqiqah-invitation-content .ai-draft-label { color: var(--aqiqah-accent); }
.aqiqah-invitation-content .ai-draft-section h2 { color: var(--aqiqah-ink); }
.aqiqah-invitation-content .ai-draft-section p { color: var(--aqiqah-muted); }
.aqiqah-invitation-content .ai-draft-gallery img { border: 1px solid color-mix(in srgb, var(--aqiqah-gold), transparent 48%); border-radius: var(--aqiqah-gallery-radius, 1rem); }
.aqiqah-invitation-content .ai-draft-footer { background: var(--aqiqah-accent); }
.aqiqah-music-section { border-radius: var(--aqiqah-panel-radius, 1.6rem); margin: 1rem; padding: clamp(1.5rem, 7vw, 3rem) clamp(1.25rem, 7vw, 3.5rem); }
.aqiqah-music-section .ai-birthday-music-button { background: var(--aqiqah-accent); border: 0; border-radius: .65rem; color: #fff; cursor: pointer; font: inherit; font-weight: 700; margin-top: .75rem; min-height: 48px; padding: .75rem 1.25rem; }
.aqiqah-music-section .ai-birthday-music-button:focus-visible { outline: 3px solid var(--aqiqah-gold); outline-offset: 3px; }
.aqiqah-ornament-layer { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 0; }
.aqiqah-ornament-arch { border: .18rem solid color-mix(in srgb, var(--aqiqah-gold), transparent 20%); border-bottom: 0; border-radius: 9rem 9rem 0 0; height: 8rem; opacity: .58; position: absolute; width: 15rem; }
.aqiqah-ornament-arch--one { left: -4rem; top: 2%; transform: rotate(-17deg); }
.aqiqah-ornament-arch--two { bottom: 4%; right: -4rem; transform: rotate(163deg); }
.aqiqah-ornament-leaf { border: .12rem solid color-mix(in srgb, var(--aqiqah-sage), transparent 18%); border-radius: 100% 0 100% 0; height: 4.5rem; opacity: .7; position: absolute; width: 1.7rem; }
.aqiqah-ornament-leaf::after { background: color-mix(in srgb, var(--aqiqah-sage), transparent 22%); content: ""; height: 5.3rem; left: .7rem; position: absolute; top: .1rem; transform: rotate(-27deg); width: .1rem; }
.aqiqah-ornament-leaf--one { left: 2%; top: 4%; transform: rotate(-32deg); }
.aqiqah-ornament-leaf--two { bottom: 9%; right: 3%; transform: rotate(148deg); }
.aqiqah-ornament-petal { border: .12rem solid color-mix(in srgb, var(--aqiqah-accent), transparent 20%); border-radius: 100% 0 100% 0; height: 2.5rem; opacity: .52; position: absolute; width: 1.05rem; }
.aqiqah-ornament-petal--one { left: 13%; top: 30%; transform: rotate(34deg); }
.aqiqah-ornament-petal--two { bottom: 22%; right: 14%; transform: rotate(214deg); }
.aqiqah-ornament-star { color: var(--aqiqah-gold); font-size: 1.4rem; opacity: .75; position: absolute; }
.aqiqah-ornament-star--one { left: 15%; top: 22%; }
.aqiqah-ornament-star--two { right: 16%; top: 34%; }
.aqiqah-ornament-moon { color: var(--aqiqah-gold); font-family: Georgia, serif; font-size: 3.5rem; opacity: .32; position: absolute; right: 8%; top: 12%; transform: rotate(-20deg); }
.aqiqah-ornament-dot { background: var(--aqiqah-gold); border-radius: 50%; height: .45rem; opacity: .58; position: absolute; width: .45rem; }
.aqiqah-ornament-dot--one { left: 23%; top: 53%; }
.aqiqah-ornament-dot--two { bottom: 18%; right: 22%; }
.aqiqah-ornament-cloud { border: .12rem solid color-mix(in srgb, var(--aqiqah-gold), transparent 22%); border-radius: 999px; height: 1.1rem; opacity: .7; position: absolute; width: 3rem; }
.aqiqah-ornament-cloud::before, .aqiqah-ornament-cloud::after { border: inherit; border-bottom: 0; border-radius: 50% 50% 0 0; content: ""; position: absolute; }
.aqiqah-ornament-cloud::before { height: 1.1rem; left: .5rem; top: -.65rem; width: 1.25rem; }
.aqiqah-ornament-cloud::after { height: .8rem; right: .35rem; top: -.45rem; width: 1rem; }
.aqiqah-ornament-cloud--one { left: 7%; top: 44%; }
.aqiqah-ornament-cloud--two { bottom: 27%; right: 7%; transform: scale(.8); }
.aqiqah-quick-nav { align-items: center; background: color-mix(in srgb, var(--aqiqah-sage), #fff 12%); border: 1px solid rgb(255 255 255 / 82%); border-radius: 999px; bottom: max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 .5rem 1.5rem rgb(60 52 42 / 18%); display: flex; gap: .1rem; justify-content: center; left: 50%; max-width: calc(100% - 1.2rem); padding: .3rem .35rem; position: fixed; transform: translateX(-50%); width: max-content; z-index: 20; }
.aqiqah-quick-nav[hidden] { display: none; }
.aqiqah-quick-nav a, .aqiqah-quick-nav button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #202a24; cursor: pointer; display: inline-flex; font: inherit; font-size: 1.35rem; justify-content: center; min-height: 48px; min-width: 44px; padding: .35rem .5rem; text-decoration: none; }
.aqiqah-quick-nav a:hover, .aqiqah-quick-nav a:focus-visible, .aqiqah-quick-nav button:hover, .aqiqah-quick-nav button:focus-visible { background: rgb(255 255 255 / 82%); color: var(--aqiqah-accent); }
.aqiqah-quick-nav a:focus-visible, .aqiqah-quick-nav button:focus-visible { outline: 3px solid var(--aqiqah-gold); outline-offset: 2px; }
.aqiqah-preview-shell[data-aqiqah-family="embun-minimal"] { --aqiqah-paper: #fbfdf9; --aqiqah-panel: #fff; --aqiqah-ink: #29473e; --aqiqah-accent: #5d8f78; --aqiqah-sage: #9eb9a8; --aqiqah-gold: #c3a875; --aqiqah-radius: 1.1rem; --aqiqah-panel-radius: .8rem; --aqiqah-gallery-radius: .8rem; }
.aqiqah-preview-shell[data-aqiqah-family="fresh-botanical-starter"] { --aqiqah-paper: #f4f8f1; --aqiqah-ink: #285c4e; --aqiqah-accent: #478a6d; --aqiqah-sage: #8eb38e; --aqiqah-gold: #caa76b; --aqiqah-radius: 2rem 2rem .9rem .9rem; --aqiqah-panel-radius: 2rem; }
.aqiqah-preview-shell[data-aqiqah-family="kertas-ceria"] { --aqiqah-paper: #fff5df; --aqiqah-ink: #633e33; --aqiqah-accent: #c26e43; --aqiqah-sage: #c18e62; --aqiqah-gold: #e9ac61; --aqiqah-radius: .75rem; --aqiqah-panel-radius: .75rem; --aqiqah-gallery-radius: .35rem; }
.aqiqah-preview-shell[data-aqiqah-family="langit-malam"] { --aqiqah-paper: #122b4a; --aqiqah-panel: rgb(20 48 77 / 92%); --aqiqah-ink: #fff9e8; --aqiqah-muted: #d2dbea; --aqiqah-accent: #e7b957; --aqiqah-sage: #35637c; --aqiqah-gold: #f0c871; }
.aqiqah-preview-shell[data-aqiqah-family="lengkung-modern"] { --aqiqah-paper: #f3eee8; --aqiqah-ink: #41505c; --aqiqah-accent: #9d7356; --aqiqah-sage: #8b9a9c; --aqiqah-gold: #c0a58b; --aqiqah-radius: 2.4rem; --aqiqah-panel-radius: 3rem 3rem 1rem 1rem; }
.aqiqah-preview-shell[data-aqiqah-family="monogram-kontemporer"] { --aqiqah-paper: #f6f0f7; --aqiqah-ink: #57445f; --aqiqah-accent: #936c9c; --aqiqah-sage: #a783b1; --aqiqah-gold: #d1b27b; --aqiqah-radius: 2.1rem; --aqiqah-panel-radius: 1.1rem; }
.aqiqah-preview-shell[data-aqiqah-family="nusa-geometrik"] { --aqiqah-paper: #fbf3df; --aqiqah-ink: #123957; --aqiqah-accent: #b27742; --aqiqah-sage: #2c6f74; --aqiqah-gold: #d3a74f; --aqiqah-radius: .55rem; --aqiqah-panel-radius: .55rem; --aqiqah-gallery-radius: .2rem; }
.aqiqah-preview-shell[data-aqiqah-family="rimbun-editorial"] { --aqiqah-paper: #f1f6ee; --aqiqah-ink: #245448; --aqiqah-accent: #6c987b; --aqiqah-sage: #8aa987; --aqiqah-gold: #c7a76d; --aqiqah-radius: 48% 52% 42% 58%; --aqiqah-panel-radius: 1.4rem; }
.aqiqah-preview-shell[data-aqiqah-family="senja-terakota"] { --aqiqah-paper: #fff2e9; --aqiqah-ink: #793f32; --aqiqah-accent: #ad5c43; --aqiqah-sage: #bd8069; --aqiqah-gold: #d9ab69; --aqiqah-radius: 1.6rem .5rem 1.6rem .5rem; --aqiqah-panel-radius: 1.6rem .5rem 1.6rem .5rem; }
.aqiqah-preview-shell[data-aqiqah-family="taman-cat-air"] { --aqiqah-paper: #fbf9ff; --aqiqah-ink: #3f426f; --aqiqah-accent: #7778b4; --aqiqah-sage: #aba8d9; --aqiqah-gold: #d6b978; --aqiqah-radius: 50%; --aqiqah-panel-radius: 1.8rem; }
.aqiqah-preview-shell[data-aqiqah-family="langit-malam"] .aqiqah-opening-note, .aqiqah-preview-shell[data-aqiqah-family="langit-malam"] .aqiqah-opening-recipient { color: var(--aqiqah-muted); }
.aqiqah-preview-shell[data-aqiqah-family="langit-malam"] .aqiqah-ornament-cloud { display: none; }
.aqiqah-preview-shell[data-aqiqah-family="nusa-geometrik"] .aqiqah-opening-frame { border-radius: 0; clip-path: polygon(0 5%, 8% 0, 92% 0, 100% 5%, 100% 95%, 92% 100%, 8% 100%, 0 95%); }
.aqiqah-preview-shell[data-aqiqah-family="nusa-geometrik"] .aqiqah-ornament-arch { border-radius: 0; transform: rotate(45deg); }
.aqiqah-preview-shell[data-aqiqah-family="monogram-kontemporer"] .aqiqah-opening-seal { border-radius: .3rem; transform: rotate(45deg); }
.aqiqah-preview-shell[data-aqiqah-family="taman-cat-air"] .aqiqah-opening-media { border-width: .15rem; box-shadow: 0 .6rem 1.8rem rgb(63 66 111 / 20%); }
.aqiqah-preview-shell[data-aqiqah-family="taman-cat-air"] .aqiqah-opening-frame { border-style: dashed; }
.aqiqah-preview-shell[data-aqiqah-family="rimbun-editorial"] .aqiqah-opening-media { border-radius: 45% 55% 50% 50%; }
.aqiqah-preview-shell[data-aqiqah-family="senja-terakota"] .aqiqah-opening-media { border-radius: .8rem 3rem .8rem 3rem; }
.aqiqah-preview-shell[data-aqiqah-family="kertas-ceria"] .aqiqah-ornament-moon, .aqiqah-preview-shell[data-aqiqah-family="embun-minimal"] .aqiqah-ornament-moon { display: none; }
@media (max-width: 25rem) { .aqiqah-opening { padding-inline: .85rem; } .aqiqah-opening-content { padding-inline: .8rem; } .aqiqah-countdown { gap: .3rem; } .aqiqah-countdown-item { padding-inline: .12rem; } .aqiqah-countdown-item span { font-size: .5rem; letter-spacing: .02em; } .aqiqah-quick-nav { gap: 0; padding-inline: .2rem; } .aqiqah-quick-nav a, .aqiqah-quick-nav button { min-width: 40px; padding-inline: .28rem; } }
@media (prefers-reduced-motion: reduce) { .aqiqah-preview-shell *, .aqiqah-preview-shell *::before, .aqiqah-preview-shell *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }