/**
 * Layout undangan seragam — lebar konsisten, tanpa wrapper kartu section
 * Load paling akhir agar menang atas inline base.php & file CSS lain.
 */

:root {
    --inv-content-max: min(56rem, calc(100% - 2rem));
    --inv-section-max: min(56rem, calc(100% - 2rem));
    --inv-couple-grid-max: 100%;
    --inv-events-grid-max: 100%;
    --inv-gallery-grid-max: 100%;
    --inv-couple-avatar-size: 9.5rem;
    --inv-couple-card-gap: clamp(0.75rem, 2.5vw, 1.5rem);
    --inv-cover-photo-size: min(40svh, 72vw, var(--inv-couple-avatar-size));
    --inv-couple-photo-position: center 28%;
    --inv-scene-bg-position: center 22%;
    --inv-hero-scene-bg-position: center 22%;
    --inv-float-nav-clearance: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    --inv-section-pad-y: clamp(1.75rem, 4.5vw, 2.85rem);
    --inv-section-pad-bottom-extra: 0;
    --inv-heading-to-content: clamp(0.55rem, 2vw, 0.8rem);
    --inv-heading-block-gap: clamp(0.15rem, 0.7vw, 0.3rem);
}

@media (min-width: 1280px) {
    :root {
        --inv-content-max: min(60rem, calc(100% - 2.5rem));
        --inv-section-max: min(60rem, calc(100% - 2.5rem));
    }
}

@media (max-width: 767px) {
    :root {
        --inv-content-max: 100%;
        --inv-section-max: 100%;
        --inv-float-nav-clearance: calc(7rem + env(safe-area-inset-bottom, 0px));
        --inv-section-pad-y: clamp(1.5rem, 5vw, 2.35rem);
        --inv-heading-to-content: clamp(0.5rem, 2.5vw, 0.7rem);
        --inv-scene-bg-position: center 20%;
        --inv-hero-scene-bg-position: center 20%;
    }
}

@media (min-width: 900px) {
    :root {
        --inv-scene-bg-position: center 36%;
        --inv-hero-scene-bg-position: center 34%;
    }
}

/* ——— Hilangkan overflow horizontal ——— */
html.invitation-page {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100%;
    overflow-x: hidden !important;
    background-color: var(--tpl-paper, var(--paper, #fbf7f1)) !important;
}

body.invitation-fluid {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--tpl-paper, var(--paper, #fbf7f1)) !important;
}

body.invitation-fluid.cover-dismissed,
body.invitation-fluid.invitation-content-ready {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100dvh;
    background-color: var(--tpl-paper, var(--paper, #fbf7f1)) !important;
}

body.invitation-fluid #mainContent,
body.invitation-fluid .inv-main-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    background: transparent !important;
    gap: 0 !important;
    display: block !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Hero full-bleed — tidak ada gap kanan/kiri/atas */
#mainContent > #hero,
#hero.hero-pattern {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-inline: 0 !important;
    min-height: 100dvh !important;
    min-height: 100svh !important;
    box-sizing: border-box;
}

#floatNavDock {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    transform: translateY(0) !important;
    box-sizing: border-box;
}

body.has-cover-open #floatNavDock {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.cover-dismissed #floatNavDock.is-visible,
body.invitation-content-ready #floatNavDock.is-visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

#floatNav {
    overflow-x: hidden !important;
    max-width: min(26rem, calc(100% - 1rem)) !important;
    margin-inline: auto !important;
}

body.invitation-fluid #mainContent > section,
body.invitation-fluid #mainContent > hr,
body.invitation-fluid .section-flow,
body.layout-cards #mainContent > .section-flow,
body.layout-cards .section-flow,
body.layout-editorial .section-flow,
body.layout-cinematic .section-flow {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    margin-block: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-inline: 0 !important;
    box-sizing: border-box;
    float: none !important;
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
    contain: none !important;
}

body.invitation-fluid .template-surface,
body.invitation-fluid .section-flow.template-surface {
    border-radius: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
}

body.invitation-fluid .section-flow.template-surface.tpl-surface-bg {
    background: var(--tpl-surface-bg) !important;
    background-color: var(--tpl-paper, var(--paper, #fbf7f1)) !important;
}

body.invitation-fluid .section-flow.accent-band {
    border-radius: 0 !important;
    margin-inline: 0 !important;
    max-width: 100% !important;
}

body.invitation-fluid .section-flow {
    padding-top: var(--inv-section-pad-y) !important;
    padding-bottom: var(--inv-section-pad-y) !important;
}

/* Clearance float nav — hanya hero (layar pertama) & footer terima kasih */
body.invitation-fluid #hero.hero-pattern,
body.invitation-fluid #mainContent > #hero {
    padding-bottom: calc(var(--inv-section-pad-y) + var(--inv-float-nav-clearance)) !important;
}

body.invitation-fluid .inv-footer-thanks {
    padding-bottom: calc(var(--inv-section-pad-y) + var(--inv-float-nav-clearance)) !important;
}

/* Hero foto scene — full bleed seperti referensi */
#hero.has-scene-photo {
    background-size: cover !important;
    background-position: var(--inv-scene-bg-position, center 22%) !important;
    background-repeat: no-repeat !important;
}

#hero.has-scene-photo .hero-scene-bg,
#hero.has-scene-photo .hero-scene-bg.inv-scene-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

#hero .hero-pattern__content {
    width: 100% !important;
    max-width: min(36rem, calc(100% - 2rem)) !important;
    margin-inline: auto !important;
}

#hero .hero-name-line,
#hero .band-title,
.section-title {
    transform: none !important;
}

/* Animasi section tidak boleh mengecilkan hero/section full-bleed (desktop + mobile) */
body.invitation-fluid #hero.inv-section-enter,
body.invitation-fluid #hero.inv-section-enter.is-visible,
body.invitation-fluid #mainContent > section.inv-section-enter,
body.invitation-fluid #mainContent > section.inv-section-enter.is-visible,
body.invitation-fluid .inv-footer-thanks.inv-section-enter,
body.invitation-fluid .inv-footer-thanks.inv-section-enter.is-visible {
    transform: none !important;
    opacity: 1 !important;
}

body.invitation-fluid #hero,
body.invitation-fluid #mainContent > section {
    overflow-x: hidden !important;
}

#hero {
    overflow: hidden !important;
}

body.invitation-fluid .section-flow + .section-flow,
body.invitation-fluid #mainContent > section + section,
body.invitation-fluid #mainContent > section + hr + section {
    margin-top: 0 !important;
    border-top: none !important;
}

body.invitation-fluid .section-heading-block,
body.invitation-fluid .inv-band-heading-stack {
    margin-bottom: var(--inv-heading-to-content) !important;
}

body.invitation-fluid .section-inner,
body.invitation-fluid .template-surface .section-inner {
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

body.invitation-fluid .section-separator,
body.invitation-fluid #mainContent > hr.section-separator {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: none !important;
    width: 100%;
    overflow: hidden;
    visibility: hidden;
}

/* Wrapper section = container lebar, BUKAN kartu putih */
body.invitation-fluid .section-flow > .inv-section__inner,
body.invitation-fluid .section-flow > .section-inner,
body.invitation-fluid .accent-band > .section-band-inner,
body.invitation-fluid .accent-band > .inv-section__inner {
    width: 100% !important;
    max-width: var(--inv-content-max) !important;
    margin-inline: auto !important;
    padding-inline: clamp(1rem, 4vw, 1.5rem) !important;
    box-sizing: border-box !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Layout cards — sama seperti standar (section nyambung) */
.layout-cards #mainContent,
.layout-cards #mainContent > .section-flow,
body.layout-cards .section-flow {
    margin: 0 !important;
    padding-inline: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
}

.layout-cards #mainContent > .section-flow .inv-section__inner,
.layout-cards #mainContent > .section-flow .section-inner {
    padding-inline: clamp(1rem, 4vw, 1.5rem) !important;
}

/* ——— Grid acara — kolom sama lebar ——— */
.inv-events-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1rem, 3vw, 1.5rem) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .inv-events-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.inv-events-grid > .event-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 100%;
    box-sizing: border-box !important;
}

/* ——— Grid mempelai (3 kolom: kartu | icon | kartu) ——— */
#couple .inv-couple-grid {
    display: grid !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: var(--inv-couple-card-gap) !important;
    align-items: center !important;
    justify-items: stretch !important;
    box-sizing: border-box;
}

#couple .inv-couple-grid > .premium-couple-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin-inline: 0 !important;
    justify-self: stretch !important;
}

#couple .inv-couple-grid > .couple-grid-separator {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    justify-self: center !important;
    width: auto;
    min-width: 3rem;
    padding: 0;
    margin: 0;
}

#couple .couple-center-glow {
    width: 3.25rem !important;
    height: 3.25rem !important;
    min-width: 3.25rem !important;
    min-height: 3.25rem !important;
    margin: 0 !important;
    flex-shrink: 0;
    align-self: center !important;
    animation: none !important;
}

@media (max-width: 767px) {
    #couple .inv-couple-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: clamp(1rem, 4vw, 1.5rem) !important;
    }

    /* Urutan DOM: mempelai 1 → pemisah → mempelai 2 (jangan order:-1) */
    #couple .inv-couple-grid > .couple-grid-separator {
        order: unset !important;
        margin-block: 0.2rem 0.35rem !important;
        justify-self: center !important;
    }

    #couple .premium-couple-card {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Grid anak — lebar penuh container (countdown diatur terpisah) */
.invitation-gallery-grid,
.gift-cards-grid,
.guestbook-wall-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box;
}

/* Countdown — selalu center (mobile 2×2, desktop 1 baris) */
#countdown .inv-section__inner,
#countdown .section-band-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

#countdown .countdown-flow {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(100%, 20.5rem) !important;
    max-width: min(100%, 20.5rem) !important;
    margin-inline: auto !important;
    justify-items: stretch !important;
    gap: clamp(0.65rem, 2.5vw, 1rem) !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#countdown .countdown-cell {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
    transform: none !important;
    justify-self: stretch !important;
}

@media (min-width: 520px) {
    #countdown .countdown-flow {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: stretch !important;
        width: min(100%, 36rem) !important;
        max-width: min(100%, 36rem) !important;
    }

    #countdown .countdown-cell {
        flex: 1 1 0 !important;
        min-width: clamp(4rem, 16vw, 5.5rem) !important;
        max-width: 6.5rem !important;
    }
}

.inv-events-grid > *,
.invitation-gallery-grid > *,
.gift-cards-grid > *,
.inv-couple-grid > * {
    min-width: 0;
    max-width: 100%;
}

.event-card,
.gift-card,
#couple .premium-couple-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* ——— Avatar & bingkai — sama cover ↔ mempelai ——— */
#couple .fluid-profile .couple-avatar,
#couple .couple-profile-card .couple-avatar {
    width: var(--inv-couple-avatar-size) !important;
    height: var(--inv-couple-avatar-size) !important;
    max-width: var(--inv-couple-avatar-size) !important;
    max-height: var(--inv-couple-avatar-size) !important;
    margin-inline: auto !important;
    margin-bottom: 0.85rem !important;
    transition: transform 0.35s ease !important;
}

#couple .fluid-profile:hover .couple-avatar,
#couple .premium-couple-card:hover .couple-avatar {
    transform: none !important;
}

#cover .cover-photo-wrap:not(.ornate-photo-frame) {
    width: var(--inv-cover-photo-size) !important;
    max-width: var(--inv-couple-avatar-size) !important;
    aspect-ratio: 1;
    margin-inline: auto !important;
    overflow: hidden;
    animation: none !important;
}

#cover .cover-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--inv-couple-photo-position, center 28%);
    display: block;
    border-radius: inherit;
}

#couple[class*="couple-frame-"] .couple-avatar img,
#couple[class*="couple-frame-"] .couple-avatar__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--inv-couple-photo-position, center 28%);
}

#cover[class*="couple-frame-"] .cover-photo {
    border: none !important;
}

#cover.couple-frame-diamond .cover-photo-wrap:not(.ornate-photo-frame),
#couple.couple-frame-diamond .couple-avatar {
    border-radius: 1.15rem !important;
    padding: 10px !important;
    transform: none !important;
}

#cover.couple-frame-diamond .cover-photo-wrap:not(.ornate-photo-frame) .cover-photo,
#couple.couple-frame-diamond .couple-avatar img {
    transform: none !important;
    border-radius: 0.75rem !important;
}

body.cover-dismissed #mainContent > section,
body.invitation-content-ready #mainContent > section {
    content-visibility: visible !important;
    contain-intrinsic-size: auto !important;
}

/* Amplop digital — background solid, jangan glass/transparent */
.gift-card,
.template-surface .gift-card,
.layout-cinematic .gift-card,
.layout-cards .gift-card,
.gift-card-readable {
    background-color: var(--primary, #3d6b4f) !important;
    background-image:
        radial-gradient(circle at 88% 15%, rgba(255, 255, 255, 0.22), transparent 28%),
        linear-gradient(125deg, var(--secondary, #1b4332), var(--primary, #3d6b4f) 48%, var(--accent, #c9a96e)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
}

.gift-card-readable {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, 0.32), rgba(0, 0, 0, 0.1)),
        linear-gradient(125deg, var(--secondary, #1b4332), var(--primary, #3d6b4f) 48%, var(--accent, #c9a96e)) !important;
}

.gift-card::before {
    opacity: 0.1 !important;
}

/* ——— Mobile: full width, center, no shift kiri ——— */
@media (max-width: 767px) {
    body.invitation-fluid #mainContent,
    body.invitation-fluid .inv-main-content,
    body.invitation-fluid #mainContent > section,
    body.invitation-fluid .section-flow,
    body.invitation-fluid .section-flow.accent-band {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }

    body.invitation-fluid .section-flow > .inv-section__inner,
    body.invitation-fluid .section-flow > .section-inner,
    body.invitation-fluid .accent-band > .section-band-inner,
    body.invitation-fluid .accent-band > .inv-section__inner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-inline: clamp(0.85rem, 4vw, 1.25rem) !important;
    }

    body.invitation-fluid .inv-section-enter.is-visible {
        opacity: 1 !important;
    }

    .gift-cards-grid {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        justify-items: center;
    }

    .gift-card {
        max-width: min(100%, 20.5rem) !important;
        margin-inline: auto !important;
    }

    html.invitation-page {
        scroll-padding-bottom: var(--inv-float-nav-clearance);
    }

    body.invitation-fluid .accent-band + .template-surface.section-flow {
        margin-top: 0 !important;
        padding-top: var(--inv-section-pad-y) !important;
    }

    .template-surface.tpl-surface-bg.has-inv-bg-image {
        background-attachment: scroll !important;
    }

    .inv-footer-thanks__inner {
        padding-bottom: 0.15rem;
    }

    .inv-footer-thanks__actions {
        margin-bottom: 0.25rem;
    }
}

/* Hero & cover scene — desktop: fokus wajah, tepi ikut warna template */
@media (min-width: 768px) {
    #hero.has-scene-photo,
    #cover.has-scene-photo {
        background-color: var(--secondary) !important;
        background-position: var(--inv-scene-bg-position, center 36%) !important;
    }

    #hero.has-scene-photo .hero-scene-bg .inv-scene-photo-img,
    #hero.has-scene-photo > .hero-scene-bg.inv-scene-photo {
        object-position: var(--inv-hero-scene-bg-position, center 34%) !important;
        background-position: var(--inv-hero-scene-bg-position, center 34%) !important;
    }

    #cover.has-scene-photo > .cover-scene-direct .inv-scene-photo-img,
    #cover.has-scene-photo .cover-premium-bg .inv-scene-photo-img {
        object-position: var(--inv-scene-bg-position, center 36%);
    }

    .inv-scene-slide {
        background-position: var(--inv-scene-bg-position, center 36%) !important;
    }

    .inv-scene-photo-img {
        animation: invSceneFadeImgDesktop 20s ease-in-out infinite;
    }

    .inv-scene-slider[data-slide-count="1"] .inv-scene-photo-img {
        animation: invSceneStillImgDesktop 18s ease-in-out infinite alternate;
    }

    .inv-scene-slide {
        animation: invSceneFadeDesktop 20s ease-in-out infinite;
    }

    .inv-scene-slider[data-slide-count="1"] .inv-scene-slide {
        animation: invSceneStillDesktop 18s ease-in-out infinite alternate;
    }
}

/* Hero + foto scene — teks tetap di tengah vertikal (bukan nempel atas) */
#mainContent > #hero.has-scene-photo.hero-pattern,
#hero.has-scene-photo.hero-pattern {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-top: clamp(2rem, 5vh, 3.5rem) !important;
    padding-bottom: clamp(6.5rem, 13vh, 8.5rem) !important;
    box-sizing: border-box;
}

#mainContent > #hero.has-scene-photo .hero-pattern__content,
#hero.has-scene-photo .hero-pattern__content {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 auto !important;
    width: 100%;
    max-width: min(36rem, calc(100% - 2rem)) !important;
}

@keyframes invSceneFadeImgDesktop {
    0% { opacity: 0; transform: scale(1); }
    6% { opacity: 1; }
    25% { opacity: 1; transform: scale(1.01); }
    31% { opacity: 0; }
    100% { opacity: 0; transform: scale(1.015); }
}

@keyframes invSceneStillImgDesktop {
    from { transform: scale(1); }
    to { transform: scale(1.015); }
}

@keyframes invSceneFadeDesktop {
    0% { opacity: 0; transform: scale(1); }
    6% { opacity: 1; }
    25% { opacity: 1; transform: scale(1.01); }
    31% { opacity: 0; }
    100% { opacity: 0; transform: scale(1.015); }
}

@keyframes invSceneStillDesktop {
    from { transform: scale(1); }
    to { transform: scale(1.01); }
}

/* ——— Scene background full-bleed (cover + hero) ——— */
#cover.has-scene-photo > .cover-scene-direct .inv-scene-photo-img,
#cover.has-scene-photo .cover-premium-bg .inv-scene-photo-img,
#cover.has-scene-photo .cover-premium-bg__photo.inv-scene-photo,
.inv-scene-slide {
    object-position: var(--inv-scene-bg-position, center 22%) !important;
    background-position: var(--inv-scene-bg-position, center 22%) !important;
}

#hero.has-scene-photo .hero-scene-bg .inv-scene-photo-img,
#hero.has-scene-photo .hero-scene-bg.inv-scene-photo,
#hero.has-scene-photo .inv-scene-photo-img {
    object-position: var(--inv-hero-scene-bg-position, var(--inv-scene-bg-position, center 22%)) !important;
    background-position: var(--inv-hero-scene-bg-position, var(--inv-scene-bg-position, center 22%)) !important;
}

/* ——— Cover card — efek identik desktop & mobile (glass blur + shadow premium) ——— */
#cover .cover-stage {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Kartu gelap — glass blur (classic / cinematic / editorial) + fallback default */
#cover .cover-card-3d,
#cover.cover-surface-dark .cover-card-3d {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    transform: none !important;
    animation: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    border-radius: clamp(1.85rem, 5.5vw, 2.85rem) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)),
        linear-gradient(180deg, rgba(12, 18, 28, 0.35), rgba(12, 18, 28, 0.18)),
        radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.28), transparent 48%) !important;
    box-shadow:
        0 40px 120px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(255, 255, 255, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    color: #fffdf8 !important;
}

/* Kartu terang — diatur di invitation-cover-premium.css (frosted glass + token) */
#cover.cover-surface-light .cover-card-3d {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
    transform: none !important;
    animation: none !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: clamp(1.85rem, 5.5vw, 2.85rem) !important;
    color: var(--cover-ink, var(--heritage-ink, #3d2b1f)) !important;
}

#cover.cover-skin-editorial.cover-surface-dark .cover-card-3d {
    background: rgba(0, 0, 0, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

#cover.cover-style-cinematic.cover-surface-dark .cover-card-3d,
.cover-style-cinematic #cover.cover-surface-dark .cover-card-3d,
.cover-style-cinematic #cover .cover-card-3d {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Minimal — hanya sembunyikan foto, kartu tetap pakai surface light/dark */
.cover-style-minimal #cover .cover-card-3d {
    animation: none !important;
    transform: none !important;
}

#cover .cover-card-3d::after {
    display: none;
    content: none;
}

#cover.cover-surface-dark .cover-card-3d::before,
#cover.cover-surface-light .cover-card-3d::before,
#cover .cover-card-3d::before {
    inset: 0 !important;
    border-radius: inherit !important;
    opacity: 0.65 !important;
    mix-blend-mode: screen !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent 40%) !important;
    pointer-events: none !important;
}

/* Kartu tamu & tombol — sama semua viewport */
#cover .cover-guest-block {
    filter: none !important;
    -webkit-filter: none !important;
}

#cover .cover-guest-inner {
    overflow: hidden !important;
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    border: 1.5px dashed rgba(255, 255, 255, 0.42) !important;
    border-style: dashed !important;
    outline: none !important;
    box-shadow: none !important;
}

#cover .cover-guest-inner.dark-readable-card {
    border-color: rgba(255, 255, 255, 0.38) !important;
    background: rgba(28, 18, 27, 0.52) !important;
}

#cover.cover-surface-light .cover-guest-inner.cover-guest-card {
    border-style: dashed !important;
}

#cover .cover-button-block {
    filter: none !important;
    -webkit-filter: none !important;
}

#cover .cover-open-btn {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24) !important;
}

#cover .cover-open-btn.cover-open-btn-premium {
    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.cover-style-seal #cover .cover-open-btn,
.cover-style-seal #cover .cover-open-btn.cover-open-btn-premium {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Mode hemat — blur cover tetap aktif (jangan dimatikan perf.css) */
body.invitation-perf-mobile #cover.cover-surface-dark .cover-card-3d,
body.invitation-perf-lite #cover.cover-surface-dark .cover-card-3d,
body.invitation-perf-mobile #cover .cover-guest-inner,
body.invitation-perf-lite #cover .cover-guest-inner {
    backdrop-filter: blur(20px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
}

body.invitation-perf-mobile #cover.cover-surface-light .cover-card-3d,
body.invitation-perf-lite #cover.cover-surface-light .cover-card-3d {
    backdrop-filter: blur(18px) saturate(1.3) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
}

body.invitation-perf-mobile #cover .cover-guest-inner,
body.invitation-perf-lite #cover .cover-guest-inner {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

/*
 * Mobile WebKit — sudut rapi tanpa hilangin blur/glass (desktop tidak diubah).
 * Penyebab bleed: box-shadow spread (0 0 0 1px) + backdrop-filter di elemen sama.
 */
@media (max-width: 899px) {
    #cover.cover-surface-dark .cover-card-3d,
    #cover.cover-surface-light .cover-card-3d,
    #cover .cover-card-3d {
        --cover-radius: clamp(1.85rem, 5.5vw, 2.85rem);
        border-radius: var(--cover-radius) !important;
        overflow: hidden !important;
        contain: paint;
        background-clip: padding-box !important;
        clip-path: inset(0 round var(--cover-radius));
        -webkit-clip-path: inset(0 round var(--cover-radius));
    }

    #cover.cover-surface-dark .cover-card-3d,
    #cover .cover-card-3d {
        box-shadow:
            0 32px 64px rgba(0, 0, 0, 0.34),
            inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
    }

    #cover.cover-surface-light .cover-card-3d {
        box-shadow:
            0 24px 56px rgba(61, 43, 31, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 0.88) !important;
    }

    #cover.cover-surface-light.has-scene-photo .cover-card-3d {
        box-shadow:
            0 28px 64px rgba(0, 0, 0, 0.26),
            inset 0 0 0 1px rgba(255, 255, 255, 0.92) !important;
    }

    #cover .cover-card-3d::before {
        inset: 0 !important;
        border-radius: inherit !important;
        mix-blend-mode: normal !important;
        opacity: 0.45 !important;
    }

    #cover .cover-guest-inner {
        --guest-radius: 1rem;
        border-radius: var(--guest-radius) !important;
        overflow: hidden !important;
        clip-path: inset(0 round var(--guest-radius));
        -webkit-clip-path: inset(0 round var(--guest-radius));
    }

    #cover .cover-open-btn,
    #cover .cover-open-btn.cover-open-btn-premium {
        overflow: hidden;
        box-shadow:
            0 10px 24px rgba(0, 0, 0, 0.22),
            inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    .cover-style-seal #cover .cover-open-btn,
    .cover-style-seal #cover .cover-open-btn.cover-open-btn-premium {
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24) !important;
    }
}

#cover .cover-spark {
    display: none !important;
}

.cover-style-envelope #cover .cover-card-3d::before {
    inset: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-style: solid !important;
    background: transparent !important;
    animation: none !important;
    opacity: 1 !important;
}

/* Section surface — gambar latar unik per template/undangan */
.template-surface.tpl-surface-bg.has-inv-bg-image {
    background-size: auto, auto, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

.template-surface.tpl-surface-bg.has-inv-bg-image::before {
    opacity: 0.14 !important;
}

body.invitation-fluid .section-flow.template-surface.tpl-surface-bg.has-inv-bg-image {
    background: var(--tpl-surface-bg) !important;
    background-color: var(--tpl-paper, var(--paper, #fbf7f1)) !important;
    background-size: auto, auto, cover !important;
    background-position: center, center, center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}