.khitanan-preview-shell {
  --khitanan-ink: #182f35;
  --khitanan-muted: #52676a;
  --khitanan-paper: #fff8ed;
  --khitanan-navy: #12384c;
  --khitanan-gold: #d2a75f;
  background: var(--khitanan-paper);
  color: var(--khitanan-ink);
  margin-inline: auto;
  max-width: 52rem;
  min-height: 100vh;
  overflow: clip;
}

.khitanan-preview-shell[data-khitanan-gated] [data-khitanan-content] { display: none; }
.khitanan-preview-shell[data-khitanan-gated][data-khitanan-opened="true"] [data-khitanan-content] { display: block; animation: khitanan-content-in 700ms ease both; }

.theme-ai-family-draft[data-event-type="khitanan"] {
  --khitanan-ink: #182f35;
  --khitanan-muted: #52676a;
  --khitanan-paper: #fff8ed;
  --khitanan-navy: #12384c;
  --khitanan-gold: #d2a75f;
  background: var(--khitanan-paper);
  color: var(--khitanan-ink);
}

.khitanan-opening {
  align-items: center;
  background: radial-gradient(circle at 15% 18%, rgb(210 167 95 / 20%) 0 .2rem, transparent .25rem), var(--khitanan-paper);
  display: flex;
  min-height: min(100svh, 56rem);
  overflow: hidden;
  padding: clamp(2rem, 7vw, 4rem) clamp(1rem, 6vw, 3.5rem);
  position: relative;
  text-align: center;
}

.khitanan-opening::before { border: 1px solid rgb(210 167 95 / 60%); content: ""; inset: 1rem; pointer-events: none; position: absolute; }
.khitanan-opening-arch { background: var(--khitanan-navy); border: .45rem solid var(--khitanan-gold); border-bottom: 0; border-radius: 50% 50% 0 0; height: 12rem; left: 50%; opacity: .95; position: absolute; top: -8rem; transform: translateX(-50%); width: min(24rem, 88%); }
.khitanan-opening-content { margin-inline: auto; max-width: 31rem; position: relative; width: 100%; z-index: 1; }
.khitanan-opening-media { aspect-ratio: 1; border: .3rem solid var(--khitanan-gold); border-radius: 50%; display: block; height: min(17rem, 67vw); margin: 0 auto 1.35rem; object-fit: cover; width: min(17rem, 67vw); }
.khitanan-opening-media--fallback { align-items: center; background: var(--khitanan-navy); color: var(--khitanan-gold); display: flex; font-size: 2.5rem; justify-content: center; }
.khitanan-opening-arabic { color: var(--khitanan-navy); font-family: Georgia, serif; font-size: clamp(1.15rem, 4vw, 1.55rem); margin: 0 0 .9rem; }
.khitanan-opening-kicker { color: var(--khitanan-gold); font-size: .72rem; font-weight: 800; letter-spacing: .2em; margin: 0 0 .75rem; text-transform: uppercase; }
.khitanan-opening h1 { color: var(--khitanan-navy); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 10vw, 4.3rem); line-height: 1.05; margin: 0; overflow-wrap: anywhere; text-wrap: balance; }
.khitanan-opening-recipient { color: var(--khitanan-muted); line-height: 1.5; margin: 1.25rem 0 .8rem; }
.khitanan-opening-recipient strong { color: var(--khitanan-ink); display: block; font-family: Georgia, serif; font-size: 1.3rem; margin-top: .2rem; }
.khitanan-opening-note { color: var(--khitanan-muted); line-height: 1.65; margin: 1rem auto 1.3rem; max-width: 29rem; }
.khitanan-opening-button { align-items: center; background: var(--khitanan-gold); border: 1px solid #ad7d35; 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; }
.khitanan-opening-button:hover, .khitanan-opening-button:focus-visible { background: #ad7d35; transform: translateY(-2px); }
.khitanan-opening-button span { margin-left: .7rem; }
.khitanan-opening-music-note { color: var(--khitanan-muted); font-size: .85rem; margin: .8rem 0 0; }

.khitanan-countdown { display: grid; gap: .55rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 1.25rem auto 0; max-width: 30rem; position: relative; z-index: 2; }
.khitanan-countdown-item { background: var(--khitanan-navy); border: 1px solid color-mix(in srgb, var(--khitanan-gold), #fff 20%); border-radius: .85rem; color: #fff; min-width: 0; padding: .65rem .25rem; text-align: center; }
.khitanan-countdown-item strong { display: block; font-size: clamp(1.25rem, 5vw, 2rem); line-height: 1; }
.khitanan-countdown-item span { display: block; font-size: .58rem; letter-spacing: .08em; margin-top: .35rem; text-transform: uppercase; }
.khitanan-ornament-layer { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 0; }
.khitanan-opening > .khitanan-ornament-layer { opacity: .88; }
.khitanan-invitation-content { position: relative; }
.khitanan-invitation-content > .khitanan-ornament-layer { height: 19rem; position: absolute; }
.khitanan-invitation-content > .theme-ai-family-draft,
.khitanan-invitation-content > .theme-rimbun-editorial,
.khitanan-invitation-content > .theme-senja-terakota,
.khitanan-invitation-content > .theme-fresh-botanical-starter { position: relative; z-index: 1; }
.khitanan-ornament-pattern { background: repeating-linear-gradient(45deg, transparent 0 1.8rem, color-mix(in srgb, var(--khitanan-gold), transparent 62%) 1.85rem 1.95rem, transparent 2rem 3.6rem); height: 15rem; inset: 0 0 auto; opacity: .24; position: absolute; transform: rotate(45deg) scale(1.5); }
.khitanan-ornament-mosque { background: var(--khitanan-navy); border-radius: 50% 50% 0 0; bottom: -4rem; height: 8rem; left: 50%; opacity: .1; position: absolute; transform: translateX(-50%); width: min(26rem, 88%); }
.khitanan-ornament-mosque::before, .khitanan-ornament-mosque::after { background: var(--khitanan-navy); bottom: 0; content: ""; position: absolute; width: 2.8rem; }
.khitanan-ornament-mosque::before { height: 10rem; left: 8%; }
.khitanan-ornament-mosque::after { height: 11rem; right: 8%; }
.khitanan-ornament-lantern { background: var(--khitanan-gold); border: .18rem solid color-mix(in srgb, var(--khitanan-gold), #fff 28%); border-radius: 42% 42% 32% 32%; box-shadow: 0 .25rem .55rem rgb(0 0 0 / 14%); height: 3rem; opacity: .76; position: absolute; top: 2.5rem; width: 1.45rem; }
.khitanan-ornament-lantern::before { border: .12rem solid var(--khitanan-gold); border-bottom: 0; border-radius: 50% 50% 0 0; content: ""; height: 1.2rem; left: .35rem; position: absolute; top: -1.1rem; width: .55rem; }
.khitanan-ornament-lantern::after { background: #fff7c4; border-radius: 50%; content: ""; height: 1.4rem; left: .42rem; opacity: .7; position: absolute; top: .55rem; width: .42rem; }
.khitanan-ornament-lantern--one { left: 9%; transform: rotate(-7deg); }
.khitanan-ornament-lantern--two { right: 9%; transform: rotate(7deg); }
.khitanan-ornament-crescent { border: .45rem solid var(--khitanan-gold); border-radius: 50%; height: 3.2rem; opacity: .58; position: absolute; right: 17%; top: 7.5rem; width: 3.2rem; }
.khitanan-ornament-crescent::after { background: var(--khitanan-paper); border-radius: 50%; content: ""; height: 3.2rem; left: .75rem; position: absolute; top: -.65rem; width: 3.2rem; }
.khitanan-ornament-star { color: var(--khitanan-gold); font-size: 1.4rem; opacity: .68; position: absolute; }
.khitanan-ornament-star--one { left: 21%; top: 8.5rem; }
.khitanan-ornament-star--two { right: 22%; top: 12rem; }

.khitanan-quick-nav { align-items: center; background: rgb(218 226 232 / 94%); border: 1px solid rgb(255 255 255 / 80%); border-radius: 999px; bottom: max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 .5rem 1.5rem rgb(24 47 53 / 20%); 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; }
.khitanan-quick-nav[hidden] { display: none; }
.khitanan-quick-nav a, .khitanan-quick-nav button { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #15242a; cursor: pointer; display: inline-flex; font: inherit; font-size: 1.4rem; justify-content: center; min-height: 48px; min-width: 44px; padding: .35rem .5rem; text-decoration: none; }
.khitanan-quick-nav a:hover, .khitanan-quick-nav a:focus-visible, .khitanan-quick-nav button:hover, .khitanan-quick-nav button:focus-visible { background: rgb(255 255 255 / 80%); color: var(--khitanan-navy); }
.khitanan-quick-nav a:focus-visible, .khitanan-quick-nav button:focus-visible { outline: 3px solid var(--khitanan-gold); outline-offset: 2px; }

@keyframes khitanan-content-in { from { opacity: 0; transform: translateY(1.2rem); } to { opacity: 1; transform: none; } }
@media (max-width: 23rem) { .khitanan-quick-nav { gap: 0; padding-inline: .2rem; } .khitanan-quick-nav a, .khitanan-quick-nav button { min-width: 40px; padding-inline: .28rem; } }
@media (max-width: 25rem) { .khitanan-countdown { gap: .3rem; } .khitanan-countdown-item { padding-inline: .12rem; } .khitanan-countdown-item span { font-size: .5rem; letter-spacing: .02em; } }
@media (prefers-reduced-motion: reduce) { .khitanan-preview-shell *, .khitanan-preview-shell *::before, .khitanan-preview-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Each family keeps its own visual language inside the shared khitanan flow. */
.khitanan-preview-shell[data-khitanan-family="embun-minimal"] { --khitanan-paper: #fbfdf9; --khitanan-navy: #315047; --khitanan-gold: #9eb9a8; --khitanan-radius: 1.1rem; }
.khitanan-preview-shell[data-khitanan-family="fresh-botanical-starter"] { --khitanan-paper: #f4f8f1; --khitanan-navy: #285c4e; --khitanan-gold: #8eb38e; --khitanan-radius: 1.8rem; }
.khitanan-preview-shell[data-khitanan-family="kertas-ceria"] { --khitanan-paper: #fff5df; --khitanan-navy: #70493e; --khitanan-gold: #efaa5d; --khitanan-radius: .8rem; }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] { --khitanan-paper: #122b4a; --khitanan-ink: #fff9e8; --khitanan-muted: #d2dbea; --khitanan-navy: #f0c871; --khitanan-gold: #e7b957; --khitanan-radius: 1rem; }
.khitanan-preview-shell[data-khitanan-family="lengkung-modern"] { --khitanan-paper: #f3eee8; --khitanan-navy: #41505c; --khitanan-gold: #a98567; --khitanan-radius: 2.3rem; }
.khitanan-preview-shell[data-khitanan-family="monogram-kontemporer"] { --khitanan-paper: #f6f0f7; --khitanan-navy: #57445f; --khitanan-gold: #a783b1; --khitanan-radius: 2rem; }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] { --khitanan-paper: #fbf3df; --khitanan-navy: #123957; --khitanan-gold: #d3a74f; --khitanan-radius: .5rem; }
.khitanan-preview-shell[data-khitanan-family="rimbun-editorial"] { --khitanan-paper: #f1f6ee; --khitanan-navy: #245448; --khitanan-gold: #8aa987; --khitanan-radius: 48% 52% 42% 58%; }
.khitanan-preview-shell[data-khitanan-family="senja-terakota"] { --khitanan-paper: #fff2e9; --khitanan-navy: #793f32; --khitanan-gold: #c98267; --khitanan-radius: 1.6rem .5rem 1.6rem .5rem; }
.khitanan-preview-shell[data-khitanan-family="taman-cat-air"] { --khitanan-paper: #fbf9ff; --khitanan-navy: #3f426f; --khitanan-gold: #aba8d9; --khitanan-radius: 50%; }

.khitanan-preview-shell[data-khitanan-family] .khitanan-opening { background: var(--khitanan-paper); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-media { border-radius: var(--khitanan-radius); box-shadow: 0 .9rem 2rem rgb(18 56 76 / 18%); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-arch { background: var(--khitanan-navy); border-color: var(--khitanan-gold); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening h1,
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-arabic { color: var(--khitanan-navy); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-kicker { color: var(--khitanan-gold); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-button { background: var(--khitanan-gold); border-color: color-mix(in srgb, var(--khitanan-gold), #000 18%); }

.khitanan-preview-shell[data-khitanan-family="embun-minimal"] .khitanan-opening-arch { background: transparent; border-width: 1px; border-bottom: 1px solid var(--khitanan-gold); opacity: .6; }
.khitanan-preview-shell[data-khitanan-family="fresh-botanical-starter"] .khitanan-opening-arch { border-radius: 2rem 2rem 0 0; height: 10rem; }
.khitanan-preview-shell[data-khitanan-family="kertas-ceria"] .khitanan-opening-arch { border-radius: .4rem; height: 8rem; transform: translateX(-50%) rotate(-4deg); width: 18rem; }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening::before { border-color: rgb(240 200 113 / 55%); }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening-note,
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening-recipient { color: var(--khitanan-muted); }
.khitanan-preview-shell[data-khitanan-family="lengkung-modern"] .khitanan-opening-arch { border-radius: 0 0 50% 50%; bottom: -8rem; top: auto; }
.khitanan-preview-shell[data-khitanan-family="monogram-kontemporer"] .khitanan-opening-media { border-width: .15rem; }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] .khitanan-opening-arch { border-radius: 0; clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%); }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] .khitanan-opening-media { border-radius: .6rem; clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.khitanan-preview-shell[data-khitanan-family="rimbun-editorial"] .khitanan-opening-arch { border-radius: 38% 62% 0 0; transform: translateX(-50%) rotate(-3deg); }
.khitanan-preview-shell[data-khitanan-family="senja-terakota"] .khitanan-opening-arch { border-radius: 0 0 45% 45%; bottom: -8rem; top: auto; }
.khitanan-preview-shell[data-khitanan-family="taman-cat-air"] .khitanan-opening-arch { background: linear-gradient(135deg, #6f72a8, #c9c5ea); border: 0; border-radius: 50%; height: 14rem; opacity: .7; top: -10rem; width: 28rem; }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-ornament-pattern { opacity: .34; }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] .khitanan-ornament-pattern { background: repeating-linear-gradient(45deg, transparent 0 1.25rem, color-mix(in srgb, var(--khitanan-gold), transparent 40%) 1.3rem 1.45rem, transparent 1.5rem 2.5rem); }
.khitanan-preview-shell[data-khitanan-family="kertas-ceria"] .khitanan-ornament-star { font-size: 1.8rem; }
.khitanan-preview-shell[data-khitanan-family="rimbun-editorial"] .khitanan-ornament-lantern { border-radius: 50%; height: 2rem; width: 2rem; }
.khitanan-preview-shell[data-khitanan-family="senja-terakota"] .khitanan-ornament-pattern { transform: rotate(0) scale(1.5); }

.khitanan-preview-shell[data-khitanan-family] .theme-ai-family-draft { background: var(--khitanan-paper); color: var(--khitanan-ink); }
.khitanan-preview-shell[data-khitanan-family] .theme-ai-family-draft .ai-draft-section { background: var(--khitanan-paper); }
.khitanan-preview-shell[data-khitanan-family] .theme-ai-family-draft .ai-draft-section--soft { background: color-mix(in srgb, var(--khitanan-paper), var(--khitanan-gold) 14%); }
.khitanan-preview-shell[data-khitanan-family] .theme-ai-family-draft .ai-draft-footer { background: var(--khitanan-navy); }
.khitanan-preview-shell[data-khitanan-family] .rimbun-hero,
.khitanan-preview-shell[data-khitanan-family] .senja-hero,
.khitanan-preview-shell[data-khitanan-family] .starter-hero { border-radius: var(--khitanan-radius); overflow: hidden; }

/* Khitanan redesign v2: a shared ceremonial frame with a clear visual voice per family. */
.khitanan-preview-shell,
.theme-ai-family-draft--khitanan {
  --khitanan-ink: #19343a;
  --khitanan-muted: #5f7375;
  --khitanan-paper: #fffaf0;
  --khitanan-soft: #f3e9d5;
  --khitanan-navy: #155052;
  --khitanan-gold: #d5a84f;
  --khitanan-deep: #0c373b;
  --khitanan-line: color-mix(in srgb, var(--khitanan-gold) 52%, transparent);
  background: var(--khitanan-paper);
  color: var(--khitanan-ink);
}

.khitanan-preview-shell[data-khitanan-family="embun-minimal"] { --khitanan-paper: #fbfdf9; --khitanan-soft: #edf4ee; --khitanan-navy: #315047; --khitanan-deep: #203d36; --khitanan-gold: #9eb9a8; }
.khitanan-preview-shell[data-khitanan-family="fresh-botanical-starter"] { --khitanan-paper: #f7fcf4; --khitanan-soft: #e4f3dc; --khitanan-navy: #2f7043; --khitanan-deep: #215438; --khitanan-gold: #6fa477; }
.khitanan-preview-shell[data-khitanan-family="kertas-ceria"] { --khitanan-paper: #fffaf0; --khitanan-soft: #fff0c6; --khitanan-navy: #8f592f; --khitanan-deep: #693d27; --khitanan-gold: #e49b37; }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] { --khitanan-paper: #122b4a; --khitanan-soft: #1b3c5c; --khitanan-ink: #fff9e8; --khitanan-muted: #d2dbea; --khitanan-navy: #f0c871; --khitanan-deep: #f7d889; --khitanan-gold: #e7b957; --khitanan-line: rgb(240 200 113 / 56%); }
.khitanan-preview-shell[data-khitanan-family="lengkung-modern"] { --khitanan-paper: #f5f0ea; --khitanan-soft: #e8ded3; --khitanan-navy: #52626d; --khitanan-deep: #35444d; --khitanan-gold: #b38c6d; }
.khitanan-preview-shell[data-khitanan-family="monogram-kontemporer"] { --khitanan-paper: #fcf7fc; --khitanan-soft: #f2e5f1; --khitanan-navy: #795a7f; --khitanan-deep: #573d5b; --khitanan-gold: #a783b1; }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] { --khitanan-paper: #fffaf0; --khitanan-soft: #f7eac9; --khitanan-navy: #123957; --khitanan-deep: #0b2a42; --khitanan-gold: #d3a74f; }
.khitanan-preview-shell[data-khitanan-family="rimbun-editorial"] { --khitanan-paper: #f5fbf4; --khitanan-soft: #e5f2e7; --khitanan-navy: #4b9770; --khitanan-deep: #245b43; --khitanan-gold: #ec9b63; }
.khitanan-preview-shell[data-khitanan-family="senja-terakota"] { --khitanan-paper: #fff8ef; --khitanan-soft: #f8e3d2; --khitanan-navy: #94462f; --khitanan-deep: #6f3027; --khitanan-gold: #dd7951; }
.khitanan-preview-shell[data-khitanan-family="taman-cat-air"] { --khitanan-paper: #f5fcfa; --khitanan-soft: #def3ed; --khitanan-navy: #3eaa8b; --khitanan-deep: #26745f; --khitanan-gold: #eea568; }

.khitanan-opening {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--khitanan-soft) 58%, transparent), transparent 42%),
    repeating-linear-gradient(45deg, transparent 0 2.6rem, color-mix(in srgb, var(--khitanan-gold) 10%, transparent) 2.65rem 2.72rem),
    var(--khitanan-paper);
  min-height: max(45rem, 100svh);
  padding: clamp(2.4rem, 7vw, 5rem) 1rem 5rem;
}

.khitanan-opening::before { border: 1px solid var(--khitanan-line); border-radius: 1.8rem; inset: .9rem; }
.khitanan-opening::after { border: 1px solid color-mix(in srgb, var(--khitanan-gold) 35%, transparent); border-radius: 50%; content: ""; height: 17rem; position: absolute; right: -8rem; top: -7rem; width: 17rem; }
.khitanan-opening-arch { background: var(--khitanan-deep); border-color: var(--khitanan-gold); border-width: .35rem; box-shadow: 0 .7rem 0 color-mix(in srgb, var(--khitanan-gold) 18%, transparent); height: 14rem; top: -9.5rem; width: min(31rem, 96%); }
.khitanan-opening-content { background: color-mix(in srgb, var(--khitanan-paper) 91%, transparent); border: 1px solid color-mix(in srgb, var(--khitanan-gold) 52%, transparent); border-radius: 1.8rem; box-shadow: 0 1.2rem 3rem color-mix(in srgb, var(--khitanan-deep) 15%, transparent); max-width: 31rem; padding: 1.3rem 1.15rem 1.55rem; }
.khitanan-opening-media { border: .35rem solid var(--khitanan-paper); box-shadow: 0 0 0 .16rem var(--khitanan-navy), .65rem .65rem 0 color-mix(in srgb, var(--khitanan-gold) 56%, transparent); height: min(16.2rem, 62vw); margin-bottom: 1.5rem; width: min(16.2rem, 62vw); }
.khitanan-opening-arabic { color: var(--khitanan-deep); font-size: clamp(1rem, 3.8vw, 1.35rem); margin-bottom: .7rem; }
.khitanan-opening-kicker { color: var(--khitanan-navy); letter-spacing: .16em; margin-bottom: .55rem; }
.khitanan-opening h1 { color: var(--khitanan-ink); font-size: clamp(2.35rem, 10vw, 4.35rem); letter-spacing: -.04em; }
.khitanan-opening-event { color: var(--khitanan-navy); font-size: 1rem; font-weight: 700; margin: .65rem 0 0; }
.khitanan-opening-recipient { margin: 1.1rem 0 .65rem; }
.khitanan-opening-recipient strong { color: var(--khitanan-ink); }
.khitanan-opening-note { color: var(--khitanan-muted); margin: .9rem auto 1.1rem; max-width: 27rem; }
.khitanan-countdown { gap: .5rem; margin-top: 1rem; max-width: 26rem; }
.khitanan-countdown-item { background: var(--khitanan-navy); border: 0; border-radius: .95rem .95rem .95rem .3rem; box-shadow: 0 .3rem 0 color-mix(in srgb, var(--khitanan-deep) 24%, transparent); padding: .7rem .25rem .62rem; }
.khitanan-countdown-item strong { font-variant-numeric: tabular-nums; }
.khitanan-countdown-item span { color: color-mix(in srgb, #fff 88%, var(--khitanan-gold)); }
.khitanan-opening-button { background: var(--khitanan-deep); border: 2px solid var(--khitanan-deep); border-radius: 999px; box-shadow: 0 .45rem 0 color-mix(in srgb, var(--khitanan-deep) 22%, transparent); margin-top: 1.55rem; min-height: 52px; }
.khitanan-opening-button:hover, .khitanan-opening-button:focus-visible { background: var(--khitanan-navy); border-color: var(--khitanan-navy); }
.khitanan-opening-button:active { box-shadow: 0 .18rem 0 color-mix(in srgb, var(--khitanan-deep) 22%, transparent); transform: translateY(.18rem); }
.khitanan-opening-music-note { color: var(--khitanan-muted); margin-top: 1rem; }

.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content { animation: khitanan-opening-in 420ms cubic-bezier(.2,.8,.2,1) both; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content > * { animation: khitanan-copy-in 360ms cubic-bezier(.2,.8,.2,1) both; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content > *:nth-child(2) { animation-delay: 35ms; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content > *:nth-child(3) { animation-delay: 70ms; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content > *:nth-child(4) { animation-delay: 105ms; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content > *:nth-child(n+5) { animation-delay: 140ms; }

.khitanan-preview-shell[data-khitanan-family] .khitanan-ornament-pattern { background: repeating-linear-gradient(45deg, transparent 0 1.65rem, color-mix(in srgb, var(--khitanan-gold) 30%, transparent) 1.7rem 1.82rem, transparent 1.88rem 3.35rem); opacity: .26; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-ornament-mosque { background: var(--khitanan-navy); opacity: .12; }
.khitanan-preview-shell[data-khitanan-family] .khitanan-ornament-lantern { background: var(--khitanan-gold); border-color: var(--khitanan-paper); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-ornament-crescent { border-color: var(--khitanan-gold); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-quick-nav { background: color-mix(in srgb, var(--khitanan-navy) 91%, var(--khitanan-paper)); border-color: color-mix(in srgb, var(--khitanan-paper) 78%, transparent); }
.khitanan-preview-shell[data-khitanan-family] .khitanan-quick-nav a:hover,
.khitanan-preview-shell[data-khitanan-family] .khitanan-quick-nav a:focus-visible,
.khitanan-preview-shell[data-khitanan-family] .khitanan-quick-nav button:hover,
.khitanan-preview-shell[data-khitanan-family] .khitanan-quick-nav button:focus-visible { background: color-mix(in srgb, var(--khitanan-paper) 82%, transparent); color: var(--khitanan-deep); }

/* Family cues are structural, not only color swaps. */
.khitanan-preview-shell[data-khitanan-family="embun-minimal"] .khitanan-opening-content { border-radius: 1rem; box-shadow: none; }
.khitanan-preview-shell[data-khitanan-family="embun-minimal"] .khitanan-opening-media { border-radius: 1rem; box-shadow: 0 0 0 .12rem var(--khitanan-navy); }
.khitanan-preview-shell[data-khitanan-family="fresh-botanical-starter"] .khitanan-opening-content { border-radius: 2.2rem 1rem 2.2rem 1rem; }
.khitanan-preview-shell[data-khitanan-family="fresh-botanical-starter"] .khitanan-opening-media { border-radius: 2rem 2rem 4.5rem 2rem; }
.khitanan-preview-shell[data-khitanan-family="kertas-ceria"] .khitanan-opening-content { border-radius: .7rem; transform: rotate(-.35deg); }
.khitanan-preview-shell[data-khitanan-family="kertas-ceria"] .khitanan-opening-arch { border-radius: .4rem; transform: translateX(-50%) rotate(-4deg); }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening { background: radial-gradient(circle at 20% 20%, rgb(240 200 113 / 18%) 0 .18rem, transparent .24rem), var(--khitanan-paper); }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening-content { background: rgb(18 43 74 / 86%); border-color: var(--khitanan-line); }
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening h1,
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening-event,
.khitanan-preview-shell[data-khitanan-family="langit-malam"] .khitanan-opening-arabic { color: var(--khitanan-deep); }
.khitanan-preview-shell[data-khitanan-family="lengkung-modern"] .khitanan-opening-content { border-radius: 3rem 3rem 1rem 1rem; }
.khitanan-preview-shell[data-khitanan-family="lengkung-modern"] .khitanan-opening-media { border-radius: 50% 50% 1.5rem 1.5rem; }
.khitanan-preview-shell[data-khitanan-family="monogram-kontemporer"] .khitanan-opening-content { border-radius: 50% 50% 1.8rem 1.8rem; padding-top: 1.8rem; }
.khitanan-preview-shell[data-khitanan-family="monogram-kontemporer"] .khitanan-opening-media { border-radius: 50%; }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] .khitanan-opening-content { border-radius: .4rem; clip-path: polygon(0 2%, 3% 0, 97% 0, 100% 2%, 100% 98%, 97% 100%, 3% 100%, 0 98%); }
.khitanan-preview-shell[data-khitanan-family="nusa-geometrik"] .khitanan-opening-media { border-radius: .55rem; clip-path: polygon(8% 0, 92% 0, 100% 8%, 100% 92%, 92% 100%, 8% 100%, 0 92%, 0 8%); }
.khitanan-preview-shell[data-khitanan-family="rimbun-editorial"] .khitanan-opening-content { border-radius: 2.4rem .8rem 2.4rem .8rem; }
.khitanan-preview-shell[data-khitanan-family="rimbun-editorial"] .khitanan-opening-media { border-radius: 48% 52% 42% 58%; }
.khitanan-preview-shell[data-khitanan-family="senja-terakota"] .khitanan-opening-content { border-radius: .5rem 2rem .5rem 2rem; }
.khitanan-preview-shell[data-khitanan-family="senja-terakota"] .khitanan-opening-arch { bottom: -9rem; border-radius: 0 0 48% 48%; top: auto; }
.khitanan-preview-shell[data-khitanan-family="taman-cat-air"] .khitanan-opening { background: radial-gradient(circle at 80% 16%, rgb(62 170 139 / 20%) 0 .2rem, transparent .28rem), linear-gradient(140deg, var(--khitanan-paper), var(--khitanan-soft)); }
.khitanan-preview-shell[data-khitanan-family="taman-cat-air"] .khitanan-opening-content { background: rgb(245 252 250 / 86%); border-radius: 2.3rem 1rem 2.3rem 1rem; }
.khitanan-preview-shell[data-khitanan-family="taman-cat-air"] .khitanan-opening-media { border-radius: 50%; }

@keyframes khitanan-opening-in { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes khitanan-copy-in { from { opacity: 0; transform: translateY(.35rem); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 32rem) {
  .khitanan-opening { align-items: flex-start; min-height: max(41rem, 100svh); padding: .75rem .55rem 4rem; }
  .khitanan-opening::before { inset: .65rem; }
  .khitanan-opening-content { border-radius: 1.25rem; padding: .75rem .65rem 1rem; }
  .khitanan-opening-media { height: min(10.7rem, 49vw); margin-bottom: .85rem; width: min(10.7rem, 49vw); }
  .khitanan-opening-arabic { font-size: .98rem; margin-bottom: .35rem; }
  .khitanan-opening-kicker { font-size: .6rem; margin-bottom: .35rem; }
  .khitanan-opening h1 { font-size: clamp(2rem, 9.5vw, 3.2rem); }
  .khitanan-opening-event { font-size: .9rem; margin-top: .35rem; }
  .khitanan-opening-recipient { margin: .65rem 0 .4rem; }
  .khitanan-opening-recipient strong { font-size: 1.15rem; }
  .khitanan-opening-note { font-size: .86rem; line-height: 1.45; margin: .55rem auto .7rem; }
  .khitanan-countdown { gap: .35rem; margin-top: .7rem; }
  .khitanan-countdown-item { border-radius: .7rem .7rem .7rem .25rem; padding: .5rem .12rem .45rem; }
  .khitanan-countdown-item strong { font-size: clamp(1.1rem, 5vw, 1.6rem); }
  .khitanan-countdown-item span { font-size: .5rem; letter-spacing: .04em; }
  .khitanan-opening-button { margin-top: 1.25rem; min-height: 48px; width: min(100%, 20rem); }
  .khitanan-opening-music-note { font-size: .76rem; margin-top: .65rem; }
}

@media (prefers-reduced-motion: reduce) {
  .khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content,
  .khitanan-preview-shell[data-khitanan-family] .khitanan-opening-content > * { animation: none !important; }
}