@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

@font-face {
    font-family: "Amsterdam Signature";
    src:
        url("../fonts/Amsterdam/Amsterdam\ Signature.woff2") format("woff2"),
        url("../fonts/Amsterdam/Amsterdam\ Signature.woff") format("woff"),
        url("../fonts/Amsterdam/Amsterdam\ Signature.ttf") format("truetype");
        /* url("../fonts/Amsterdam/Signature.woff2") format("woff2"),
        url("../fonts/Amsterdam/Signature.woff") format("woff"),
        url("../fonts/Amsterdam/Signature.ttf") format("truetype"); */
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display/PlayfairDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Playfair Display";
    src: url("../fonts/playfair-display/PlayfairDisplay-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg: #f7efe8;
    --bg-soft: #fbf7f3;
    --surface: rgba(255,255,255,0.86);
    --surface-strong: #ffffff;
    --text: #2b211b;
    --text-soft: #6f6259;
    --primary: #a46b49;
    --primary-dark: #855338;
    --border: rgba(164, 107, 73, 0.16);
    --shadow: 0 16px 40px rgba(78, 52, 37, 0.10);
    --shadow-soft: 0 8px 20px rgba(78, 52, 37, 0.08);
    --radius-xl: 36px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 14px;
    --container: 1120px;
    --nav-offset: 110px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 0;
}

body {
    margin: 0;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text);
    background: #f4efe9;
    line-height: 1.6;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body.is-scroll-locked {
    overflow: hidden;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-shell {
    overflow-x: hidden;
    padding-top: 0;
    padding-left: 0;
}

.site-container {
    width: min(100% - 40px, var(--container));
    margin: 0 auto;
}

.hero-section,
.couple-info-section,
.countdown-section,
.story-section,
.event-section,
.gallery-section,
.location-section,
.rsvp-section,
.wishes-section,
.footer-section {
    position: relative;
    padding: 88px 0;
}

.cover-screen {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        linear-gradient(
            180deg,
            rgba(255, 248, 243, 0.58),
            rgba(246, 236, 228, 0.62)
        ),
        url("../images/cover-bg1.jpeg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.cover-screen.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cover-card {
    width: min(100%, 640px);
    text-align: center;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0 24px;
}

.cover-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0 0 90px;
    padding: 10px 20px 11px;

    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    color: var(--primary-dark);

    font-family: "Playfair Display", serif !important;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 700;
    font-style: italic;

    letter-spacing: 0.03em;
    text-transform: none !important;

    box-shadow: 0 10px 24px rgba(78, 52, 37, 0.08);
}

.cover-couple-name {
    text-shadow: 0 8px 28px rgba(78, 52, 37, 0.18);
}

.cover-guest-label,
.cover-guest-name {
    text-shadow: 0 6px 18px rgba(255, 255, 255, 0.45);
}

.cover-open-button {
    box-shadow:
        0 16px 34px rgba(164, 107, 73, 0.28),
        0 4px 10px rgba(78, 52, 37, 0.10);
}

.hero-kicker,
.couple-info-heading,
.countdown-heading,
.story-heading,
.event-heading,
.gallery-heading,
.location-heading,
.rsvp-heading,
.wishes-heading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(164,107,73,0.10);
    color: var(--primary-dark);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px 11px;
    border-radius: 999px;

    /* background: rgba(255, 255, 255, 0.52); */
    color: white;

    font-family: "Playfair Display", serif !important;
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    font-weight: 700;
    font-style: italic;

    letter-spacing: 0.03em;
    text-transform: none !important;

    box-shadow: 0 10px 24px rgba(78, 52, 37, 0.08);
}

.cover-couple-name,
.hero-title {
    margin: 0;
    line-height: 1.08;
    font-weight: 700;
    color: maroon;
}

.cover-couple-name {
    font-size: clamp(4.8rem, 12vw, 8rem);
}

.hero-title {
    font-size: clamp(2.3rem, 6vw, 5rem);
}

.cover-couple-separator,
.hero-title-separator {
    margin: 0 10px;
    color: var(--text);
}

.cover-couple-separator {
    font-size: 0.65em;
}

.cover-guest-label,
.hero-date-text,
.hero-quote-text,
.story-description,
.event-description,
.gallery-description,
.location-description,
.rsvp-description,
.wishes-description,
.footer-text {
    color: var(--text-soft);
}

.cover-guest-label {
    margin: 28px 0 8px;
    font-size: 15px;
}

.cover-guest-name {
    margin: 0 0 24px;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text);
}

.cover-open-button,
.hero-primary-button,
.location-card-button,
.event-card-button,
.rsvp-submit-button,
.wishes-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 13px 24px;
    border-radius: 999px;
    background: maroon;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(164, 107, 73, 0.24);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.cover-open-button{
    font-family: "Playfair Display", serif;
    background-color: maroon;
}

.cover-open-button:hover,
.hero-primary-button:hover,
.location-card-button:hover,
.event-card-button:hover,
.rsvp-submit-button:hover,
.wishes-submit-button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.music-toggle-button{
    position:fixed;
    right:18px;
    bottom:18px;
    width:44px;
    height:44px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(35,35,35,.82);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(0,0,0,.25);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:.25s;
    z-index:999;
}

.music-toggle-button:hover{
    background:rgba(25,25,25,.9);
}

.music-toggle-button i{
    font-size:15px;
    line-height:1;
}

.music-toggle-button.is-playing{
    background:rgba(35,35,35,.82);
}       

.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 0;
}

.hero-content {
    text-align: center;
}

/* =================================
   DEFAULT NAVBAR = SIDEBAR LEFT
================================= */
.hero-navigation {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: auto;
    z-index: 1000;
    width: 100px;
    max-width: 100px;
    margin: 0;
    padding: 0;
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.65s cubic-bezier(0.22, 1, 0.36, 1), transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-nav-toggle {
    display: none;
}

.hero-navigation-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 20px);
    margin: 0;
    padding: 12px 8px;
    list-style: none;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(167, 111, 77, 0.10);
    border-radius: 32px;
    box-shadow: 0 14px 32px rgba(82, 55, 36, 0.08);
    overflow: hidden;
}

.hero-navigation-item {
    min-width: 0;
}

.hero-navigation-list::-webkit-scrollbar {
    display: none;
}

.hero-navigation-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 42px;
    padding: 8px 6px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #6f665d;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    word-break: break-word;
    overflow-wrap: anywhere;
    -webkit-tap-highlight-color: transparent;
    transition:
        background-color 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-navigation-link:focus {
    outline: none;
}

@media (hover: none) and (pointer: coarse) {
    .hero-navigation-link:not(.is-active) {
        background: transparent;
        box-shadow: none;
    }

    .hero-navigation-link:not(.is-active):hover,
    .hero-navigation-link:not(.is-active):focus,
    .hero-navigation-link:not(.is-active):active {
        background: transparent;
        color: #6f665d;
        box-shadow: none;
    }
}

@media (hover: hover) and (pointer: fine) {
    .hero-navigation-link:hover {
        background: rgba(167, 111, 77, 0.10);
        color: #8d593b;
    }
}

.hero-navigation-link.is-active,
.hero-navigation-link[aria-current="page"] {
    background: #a86f48;
    color: #ffffff;
    box-shadow: 0 10px 20px rgba(168, 111, 72, 0.22);
}

body:not(.invitation-opened) .hero-navigation {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
}

body.invitation-opened .hero-navigation {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.countdown-container,
.couple-info-container,
.story-container,
.event-container,
.gallery-container,
.location-container,
.rsvp-container,
.wishes-container,
.footer-container {
    text-align: center;
}

.hero-date-text {
    margin: 18px 0 10px;
    font-size: 1.15rem;
}

.hero-quote-text {
    width: min(100%, 760px);
    margin: 0 auto;
    font-size: 1rem;
}

.hero-identity-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 34px;
}

.hero-person-card,
.event-card,
.location-card,
.rsvp-form-card,
.wishes-form-card,
.wishes-list-card,
.rsvp-summary-card,
.countdown-card {
    background: var(--surface);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.hero-person-card {
    padding: 28px 22px;
    text-align: center;
}

.hero-person-role {
    margin: 0 0 8px;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
}

.hero-person-name {
    margin: 0 0 8px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-dark);
}

.hero-person-parent {
    margin: 0;
    color: var(--text-soft);
}

.hero-button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 28px;
}

.countdown-title,
.couple-info-title,
.story-title,
.event-title,
.gallery-title,
.location-title,
.rsvp-title,
.wishes-title {
    margin: 0 0 12px;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.15;
}

.story-title-word-cerita,
.couple-info-title-word-detail,
.event-title-word-detail,
.gallery-title-word-galeri,
.location-title-word-lokasi,
.rsvp-title-word-konfirmasi,
.wishes-title-word-ucapan,
.countdown-title-word-hitung {
    color: var(--primary);
    margin-right: 8px;
}

.story-title-word-pasangan,
.couple-info-title-word-catin,
.event-title-word-acara,
.gallery-title-word-foto,
.location-title-word-acara,
.rsvp-title-word-kehadiran,
.wishes-title-word-doa,
.countdown-title-word-mundur {
    color: var(--text);
}

.countdown-description,
.couple-info-quote,
.story-description,
.event-description,
.gallery-description,
.location-description,
.rsvp-description,
.wishes-description {
    width: min(100%, 760px);
    margin: 0 auto 28px;
}

/* =================================
   COUNTDOWN
================================= */
.countdown-grid {
    --countdown-card-size: clamp(150px, 18vw, 220px);
    display: grid;
    grid-template-columns: repeat(2, var(--countdown-card-size));
    gap: 18px;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
}

.countdown-card {
    width: var(--countdown-card-size);
    aspect-ratio: 1 / 1;
    padding: 14px 10px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.countdown-days-number,
.countdown-hours-number,
.countdown-minutes-number,
.countdown-seconds-number {
    display: block;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.countdown-days-label,
.countdown-hours-label,
.countdown-minutes-label,
.countdown-seconds-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}

.story-timeline {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    width: min(100%, 880px);
    margin: 0 auto;
    text-align: left;
}

.story-card {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 42px);
    border-radius: 30px;
    background: rgba(32, 27, 24, 0.32);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 22px 52px rgba(24, 18, 15, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.story-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        rgba(242, 237, 194, 0.76),
        rgba(164, 107, 73, 0.88)
    );
}

.story-card-year {
    display: none;
}

.story-card-title {
    display: none;
}

.story-card-text {
    margin: 0;
    color: rgba(255, 248, 243, 0.80);
    font-size: clamp(0.96rem, 1.45vw, 1.08rem);
    line-height: 1.9;
    text-align: left;
    text-shadow: 0 4px 14px rgba(24, 18, 15, 0.28);
}

.story-card-text p {
    margin: 0 0 1.15em;
}

.story-card-text p:last-child {
    margin-bottom: 0;
}

.event-grid,
.location-layout,
.rsvp-layout,
.wishes-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    text-align: left;
}

/* Lokasi desktop = sama seperti mobile */

.location-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    align-items: center !important;
}

.location-card {
    width: 100% !important;
    max-width: 720px !important;
}

.location-map-frame {
    width: 100% !important;
    max-width: 720px !important;
    min-height: 380px !important;
}

.event-card {
    padding: 28px;
}

.event-card-label {
    margin: 0 0 8px;
    display: inline-flex;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(164,107,73,0.10);
    color: var(--primary-dark);
    font-size: 21px;
    font-weight: 700;
}

.event-card-name {
    margin: 0 0 12px;
    font-size: 1.6rem;
    color: var(--primary-dark);
}

.event-card-date,
.event-card-time,
.event-card-venue,
.event-card-address,
.location-card-address,
.location-card-note,
.location-contact-label {
    margin: 0 0 8px;
    color: var(--text-soft);
}

.event-card-button,
.location-card-button {
    margin-top: 12px;
}

.gallery-slider {
    position: relative;
    width: 100%;
    margin-top: 28px;
    padding: 0 52px;
}

.gallery-viewport {
    width: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
}

.gallery-viewport.is-dragging {
    cursor: grabbing;
}

.gallery-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.gallery-frame {
    flex: 0 0 calc((100% - 40px) / 3);
    max-width: calc((100% - 40px) / 3);
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(167, 111, 77, 0.08);
    box-shadow: 0 10px 24px rgba(82, 55, 36, 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.gallery-image {
    display: block;
    width: 100%;
    height: 420px;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-frame:hover .gallery-image {
    transform: scale(1.025);
}

.gallery-nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #6f665d;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 8px 20px rgba(82, 55, 36, 0.10);
    cursor: pointer;
    transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), background 0.65s cubic-bezier(0.22, 1, 0.36, 1), color 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-nav-button:hover {
    background: #ffffff;
    color: #8d593b;
    transform: translateY(-50%) scale(1.04);
}

.gallery-nav-prev {
    left: 0;
}

.gallery-nav-next {
    right: 0;
}

.location-card {
    padding: 28px;
}

.location-card-name {
    margin: 0 0 10px;
    font-size: 1.5rem;
    color: var(--primary-dark);
}

.location-contact-link {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--primary);
    font-weight: 700;
}

.location-map-frame {
    width: 100%;
    min-height: 100%;
    height: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    background: #fff;
}

.rsvp-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.rsvp-summary-card {
    position: relative;
    overflow: hidden;
    min-height: 185px;
    padding: 22px 18px;
    border-radius: 26px;
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.88)),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 244, 239, 0.96) 100%);
    border: 1px solid rgba(167, 111, 77, 0.12);
    box-shadow:
        0 16px 34px rgba(82, 55, 36, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.rsvp-summary-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 20px 40px rgba(82, 55, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.rsvp-summary-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, #c98a60 0%, #8d593b 100%);
}

.rsvp-summary-card::after {
    content: "";
    position: absolute;
    width: 110px;
    height: 110px;
    right: -28px;
    bottom: -28px;
    border-radius: 50%;
    background: rgba(167, 111, 77, 0.05);
}

.rsvp-summary-number {
    position: relative;
    z-index: 1;
    display: block;
    margin: 0;
    font-size: 3.4rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: #8d593b;
    text-shadow: 0 2px 8px rgba(141, 89, 59, 0.08);
}

.rsvp-summary-label {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin: 0;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(167, 111, 77, 0.08);
    color: #6b625c;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.rsvp-summary-card:nth-child(1)::before {
    background: linear-gradient(90deg, #b67852 0%, #8d593b 100%);
}

.rsvp-summary-card:nth-child(1) .rsvp-summary-number {
    color: #9c6748;
}

.rsvp-summary-card:nth-child(2)::before {
    background: linear-gradient(90deg, #8aa56b 0%, #5f7a42 100%);
}

.rsvp-summary-card:nth-child(2) .rsvp-summary-number {
    color: #6b8650;
}

.rsvp-summary-card:nth-child(2) .rsvp-summary-label {
    background: rgba(107, 134, 80, 0.10);
    color: #5f7148;
}

.rsvp-summary-card:nth-child(3)::before {
    background: linear-gradient(90deg, #d07d73 0%, #a6544c 100%);
}

.rsvp-summary-card:nth-child(3) .rsvp-summary-number {
    color: #b05c52;
}

.rsvp-summary-card:nth-child(3) .rsvp-summary-label {
    background: rgba(176, 92, 82, 0.10);
    color: #93534b;
}

.rsvp-summary-card:nth-child(4)::before {
    background: linear-gradient(90deg, #9a86c7 0%, #7558a7 100%);
}

.rsvp-summary-card:nth-child(4) .rsvp-summary-number {
    color: #7b5fa3;
}

.rsvp-summary-card:nth-child(4) .rsvp-summary-label {
    background: rgba(123, 95, 163, 0.10);
    color: #6e5791;
}

.rsvp-form-card{
    width: min(100%, 760px);
    margin: 0 auto;
    padding: 24px 26px;
}

.wishes-form-card,
.wishes-list-card {
    padding: 28px;
}

.rsvp-form{
    display: grid;
    gap: 12px;
}

.wishes-form {
    display: grid;
    gap: 16px;
}

.rsvp-name-group,
.rsvp-phone-group,
.rsvp-status-group,
.rsvp-count-group,
.rsvp-message-group,
.wishes-name-group,
.wishes-message-group {
    display: grid;
    gap: 8px;
}

.rsvp-name-label,
.rsvp-phone-label,
.rsvp-status-label,
.rsvp-count-label,
.rsvp-message-label,
.wishes-name-label,
.wishes-message-label {
    font-size: 14px;
    font-weight: 700;
}

.rsvp-name-input,
.rsvp-phone-input,
.rsvp-status-select,
.rsvp-count-input,
.rsvp-message-textarea{
    width: 100%;
    border: 1px solid rgba(164, 107, 73, 0.18);
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    padding: 13px 15px;
    color: var(--text);
    outline: none;
}

.wishes-name-input,
.wishes-message-textarea {
    width: 100%;
    border: 1px solid rgba(164, 107, 73, 0.18);
    background: rgba(255,255,255,0.96);
    border-radius: 14px;
    padding: 13px 15px;
    color: var(--text);
    outline: none;
}

.rsvp-name-input:focus,
.rsvp-phone-input:focus,
.rsvp-status-select:focus,
.rsvp-count-input:focus,
.rsvp-message-textarea:focus,
.wishes-name-input:focus,
.wishes-message-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(164, 107, 73, 0.10);
}

.rsvp-message-textarea{
    min-height: 92px;
    resize: vertical;
}

.wishes-message-textarea {
    min-height: 130px;
    resize: vertical;
}

.rsvp-response-message,
.wishes-response-message,
.database-alert {
    margin: 12px 0 0;
    color: var(--primary-dark);
    font-weight: 600;
}

.form-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.wishes-list {
    display: grid;
    gap: 16px;
}

.wishes-empty-state {
    margin: 0;
    color: var(--text-soft);
}

.wishes-item {
    padding: 18px;
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.80);
    border: 1px solid var(--border);
}

.wishes-item-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.wishes-item-name {
    margin: 0;
    font-weight: 800;
    color: var(--primary-dark);
}

.wishes-item-date {
    color: var(--text-soft);
    font-size: 13px;
}

.wishes-item-text {
    margin: 0;
    color: var(--text-soft);
    line-height: 1.7;
}

.footer-section {
    padding-top: 64px;
    padding-bottom: 64px;
}

.footer-title {
    margin: 0 0 10px;
    /* font-size: 1.5rem; */
    color: var(--primary-dark);
}

.footer-text {
    margin: 0;
}

/* =================================
   SECTION BACKGROUND IMAGE
================================= */
.hero-section,
.couple-info-section,
.countdown-section,
.story-section,
.event-section,
.gallery-section,
.location-section,
.rsvp-section,
.wishes-section,
.footer-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.hero-section > .site-container,
.couple-info-section > .site-container,
.countdown-section > .site-container,
.story-section > .site-container,
.event-section > .site-container,
.gallery-section > .site-container,
.location-section > .site-container,
.rsvp-section > .site-container,
.wishes-section > .site-container,
.footer-section > .site-container {
    position: relative;
    z-index: 3;
}

.hero-section::before,
.couple-info-section::before,
.countdown-section::before,
.story-section::before,
.event-section::before,
.gallery-section::before,
.location-section::before,
.rsvp-section::before,
.wishes-section::before,
.footer-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hero-section::after,
.couple-info-section::after,
.countdown-section::after,
.story-section::after,
.event-section::after,
.gallery-section::after,
.location-section::after,
.rsvp-section::after,
.wishes-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 110px;
    z-index: 2;
    pointer-events: none;
    filter: blur(16px);
    transform: translateY(42%);
}

/* =================================
   COUPLE INFO SECTION
   Compact desktop/laptop: muat 1 layar
================================= */

.couple-info-section {
    padding: clamp(46px, 7vh, 68px) 0;
    background-image: url("../images/backgrounds/hero-bg.jpg");
}

.couple-info-section::before {
    background:
        linear-gradient(180deg, rgba(34, 25, 20, 0.36) 0%, rgba(34, 25, 20, 0.18) 100%),
        linear-gradient(135deg, rgba(255, 247, 240, 0.26), rgba(255, 255, 255, 0.08));
}

.couple-info-section::after {
    background: linear-gradient(
        180deg,
        rgba(238, 243, 249, 0) 0%,
        rgba(238, 243, 249, 0.58) 55%,
        rgba(238, 243, 249, 0.96) 100%
    );
}

.couple-info-opening {
    margin-bottom: clamp(20px, 3vh, 30px);
}

.couple-info-heading {
    margin-bottom: 12px;
    padding: 7px 14px;
    font-size: 12px;
}

.couple-info-title {
    margin-bottom: 8px;
    font-size: clamp(1.8rem, 3.1vw, 2.55rem);
    line-height: 1.08;
}

.couple-info-quote {
    width: min(100%, 660px);
    margin: 0 auto;
    color: var(--text-soft);
    font-size: 0.94rem;
    line-height: 1.65;
}

.couple-info-layout {
    --couple-row-height: clamp(204px, 27vh, 250px);

    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(360px, 1.1fr);
    gap: clamp(28px, 4vw, 52px);
    align-items: stretch;
    width: min(100%, 920px);
    margin: 0 auto;
    text-align: left;
}

.couple-photo-stack,
.couple-detail-stack {
    display: grid;
    grid-template-rows: repeat(2, minmax(230px, 1fr));
    gap: 28px;
    height: 100%;
}

.couple-photo-card {
    position: relative;
    height: 100%;
    min-height: 230px;
    margin: 0;
    padding: 12px;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 250, 246, 0.82));
    border: 1px solid rgba(255, 255, 255, 0.62);
    box-shadow:
        0 28px 70px rgba(45, 31, 22, 0.22),
        0 8px 22px rgba(45, 31, 22, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
    overflow: hidden;
}

/* .couple-photo-card-bride {
    margin-right: clamp(10px, 1.6vw, 24px);
    transform: rotate(-1.4deg);
}

.couple-photo-card-groom {
    margin-left: clamp(10px, 1.6vw, 24px);
    transform: rotate(1.3deg);
} */

.couple-photo-card-bride,
.couple-detail-stack .couple-detail-card:nth-of-type(1),
.couple-photo-card-groom,
.couple-detail-stack .couple-detail-card:nth-of-type(2) {
    align-self: stretch;
}

.couple-photo-image {
    width: 100%;
    height: 300px;
    min-height: 206px;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 26px;
    box-shadow:
        0 16px 32px rgba(45, 31, 22, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.couple-photo-caption {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 11px;
    border-radius: 999px;
    /* background: rgba(255, 255, 255, 0.86); */
    color: white;
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 8px 16px rgba(45, 31, 22, 0.10);
}

.couple-detail-card {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 34px 30px 30px;
    border-radius: 30px;

    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: none;
    overflow: hidden;
}

.couple-detail-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(164, 107, 73, 0.45), rgba(133, 83, 56, 0.95));
}

.couple-detail-role {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(164, 107, 73, 0.10);
    color: var(--primary-light);
    font-size: 11px;
    font-weight: 800;
}

.couple-detail-name {
    margin: 0 0 7px;
    color: var(--primary-light);
    font-size: clamp(1.45rem, 2.35vw, 2.05rem);
    line-height: 1.08;
}

.couple-detail-parent {
    margin: 0 0 16px;
    color: var(--text-soft);
    font-size: 0.9rem;
    line-height: 1.55;
}

.couple-instagram-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 38px;
    margin-top: 10px;
    margin-bottom: 0;
    padding: 9px 15px;
    border-radius: 999px;
    background: rgba(164, 107, 73, 0.10);
    color: var(--primary-dark);
    border: 1px solid rgba(164, 107, 73, 0.18);
    font-size: 0.84rem;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(78, 52, 37, 0.07);
    transition:
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        background 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.couple-instagram-button:hover {
    transform: translateY(-2px);
    background: var(--primary);
    color: #ffffff;
}

.couple-detail-separator {
    display: none;
}

@media (max-width: 991px) {
    .couple-info-layout {
        grid-template-columns: minmax(210px, 0.78fr) minmax(300px, 1.22fr);
        gap: 24px;
        align-items: stretch;
    }

    .couple-photo-stack,
    .couple-detail-stack {
        gap: 24px;
    }

    .couple-photo-card {
        padding: 10px;
        border-radius: 28px;
    }

    /* .couple-photo-card-bride {
        margin-right: 18px;
    }

    .couple-photo-card-groom {
        margin-left: 18px;
    } */

    .couple-photo-image {
        border-radius: 22px;
        aspect-ratio: 4 / 4.7;
    }

    .couple-detail-card {
        justify-content: flex-start;
        padding: 30px 22px 24px;
        border-radius: 26px;
    }
}

@media (max-width: 767px) {
    .cover-kicker {
        margin: 0 0 160px;
        padding: 10px 20px 11px;
        font-size: clamp(15px, 3.7vw, 16px);
        line-height: 1.2;
    }

    .couple-info-layout {
        grid-template-columns: 0.42fr 0.58fr;
        gap: 12px;
        align-items: stretch;
    }

    .couple-photo-stack,
    .couple-detail-stack {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 16px;
        height: 100%;
    }

    .couple-photo-card,
    .couple-detail-card {
        height: 100%;
        min-height: 210px;
    }

    .couple-photo-card {
        padding: 7px;
        border-radius: 22px;
        margin-left: 0;
        margin-right: 0;
        transform: none;
    }

    .couple-photo-image {
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
        border-radius: 17px;
    }

    .couple-photo-caption {
        left: 12px;
        bottom: 12px;
        min-height: 26px;
        padding: 5px 9px;
        font-size: 10px;
    }

    .couple-detail-card {
        padding: 18px 14px;
        border-radius: 22px;
        justify-content: flex-start;
    }

    .couple-detail-card::before {
        left: 14px;
        right: 14px;
        height: 4px;
    }

    .couple-detail-role {
        margin-bottom: 8px;
        padding: 5px 9px;
        font-size: 10px;
    }

    .couple-detail-name {
        margin-bottom: 6px;
        font-size: clamp(1.25rem, 6vw, 1.75rem);
        line-height: 1.05;
    }

    .couple-detail-parent {
        margin-bottom: 12px;
        font-size: 0.78rem;
        line-height: 1.45;
    }

    .couple-instagram-button {
        width: 100%;
        min-height: 34px;
        padding: 8px 10px;
        font-size: 0.72rem;
        text-align: center;
    }

    .couple-reveal-photo,
    .couple-reveal-detail {
        opacity: 0;
        filter: blur(14px);
        transform: translateX(80px) scale(0.85);

        transition:
            opacity 1.2s cubic-bezier(0.16,1,0.3,1),
            transform 1.2s cubic-bezier(0.16,1,0.3,1),
            filter 1.2s cubic-bezier(0.16,1,0.3,1);
    }

    .couple-reveal-photo.is-visible,
    .couple-reveal-detail.is-visible {
        opacity: 1;
        filter: blur(0);
        transform: translateX(0) scale(1);
    }

    .couple-info-section.is-visible .couple-reveal-photo,
    .couple-info-section.is-visible .couple-reveal-detail {
        transition-delay: 0s !important;
    }
}

@media (max-width: 480px) {
    .couple-info-layout {
        grid-template-columns: 0.4fr 0.6fr;
        gap: 10px;
    }

    /* .couple-photo-card-bride {
        transform: rotate(-1.2deg);
    }

    .couple-photo-card-groom {
        transform: rotate(1.1deg);
    } */

    .couple-photo-stack,
    .couple-detail-stack {
        gap: 14px;
    }

    .couple-photo-card,
    .couple-detail-card {
        min-height: 190px;
    }

    .couple-photo-card {
        padding: 6px;
        border-radius: 20px;
    }

    .couple-photo-image {
        border-radius: 15px;
    }

    .couple-photo-caption {
        left: 10px;
        bottom: 10px;
        font-size: 9px;
    }

    .couple-detail-card {
        padding: 16px 12px;
        border-radius: 20px;
    }

    .couple-detail-name {
        font-size: 1.32rem;
    }

    .couple-detail-parent {
        font-size: 0.74rem;
    }

    .couple-instagram-button {
        min-height: 32px;
        font-size: 0.68rem;
    }
}

/* =================================
   HERO HOME STAIR TITLE + BACKGROUND SLIDER
   Posisi kiri atas + tangga rapi
================================= */

.hero-background-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* animation: heroBackgroundSwap 24s linear infinite; */
    will-change: opacity;
}

/* .hero-bg-slide-1 {
    background-image: url("../images/AB1.jpg");
    animation-delay: 0s;
}

.hero-bg-slide-2 {
    background-image: url("../images/AB2.jpg");
    animation-delay: 8s;
}

.hero-bg-slide-3 {
    background-image: url("../images/AB3.jpg");
    animation-delay: 16s;
} */

.hero-name-only,
.hero-content-stair {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    padding-top: clamp(86px, 11vh, 118px);
    padding-left: clamp(80px, 10vw, 160px);
    max-width: 720px;
    position: relative;
    z-index: 3;
}

.hero-name-only .hero-kicker,
.hero-content-stair .hero-kicker {
    margin: 0 0 22px;
    align-self: flex-start;
    transform: translateX(0);
}

.hero-name-only .hero-title,
.hero-title-stair {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: start;
    row-gap: clamp(0px, 0.45vw, 4px);
    line-height: 0.88;
}

.hero-name-only .hero-bride-name,
.hero-name-only .hero-title-separator,
.hero-name-only .hero-groom-name,
.hero-title-line {
    display: block;
    width: max-content;
    margin: 0;
    letter-spacing: -0.04em;
}

.hero-name-only .hero-bride-name,
.hero-title-line-1 {
    padding-left: 0;
}

.hero-name-only .hero-title-separator,
.hero-title-line-2 {
    padding-left: clamp(180px, 10vw, 240px);
}

.hero-name-only .hero-groom-name,
.hero-title-line-3 {
    padding-left: clamp(250px, 15vw, 340px);
}

.hero-title-line-1,
.hero-title-line-3 {

    text-shadow:
        1px 0 currentColor,
        -1px 0 currentColor,
        0 1px currentColor,
        0 -1px currentColor,
        1px 1px currentColor,
        -1px -1px currentColor,
        1px -1px currentColor,
        -1px 1px currentColor,
        0 8px 28px rgba(0,0,0,0.25);
}

.hero-title-line-1,
.hero-title-line-2,
.hero-title-line-3 {
    /* color: brown; */
    color: maroon;
}

.hero-date-label,
.hero-date-text {
    margin: 24px 0 0;
    padding-top: 40px;
    padding-left: 0;
    font-size: 1.05rem;
    color: var(--text-soft);
    font-weight: 600;
}

.hero-name-only .hero-kicker,
.hero-name-only .hero-bride-name,
.hero-name-only .hero-title-separator,
.hero-name-only .hero-groom-name,
.hero-name-only .hero-date-label,
.hero-name-only .hero-date-text,
.hero-content-stair .hero-kicker,
.hero-content-stair .hero-title-line,
.hero-content-stair .hero-date-label,
.hero-content-stair .hero-date-text {
    opacity: 0;
    transform: translateX(-38px) scale(0.94);
    filter: blur(8px);
    will-change: transform, opacity, filter;
}

body.invitation-opened .hero-name-only .hero-kicker,
body.invitation-opened .hero-content-stair .hero-kicker {
    animation: heroNameRevealLeftPop 1.05s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

body.invitation-opened .hero-name-only .hero-bride-name,
body.invitation-opened .hero-content-stair .hero-title-line-1 {
    animation: heroNameRevealLeftPop 1.18s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

body.invitation-opened .hero-name-only .hero-title-separator,
body.invitation-opened .hero-content-stair .hero-title-line-2 {
    animation: heroNameRevealLeftPop 1.18s cubic-bezier(0.16, 1, 0.3, 1) 0.56s both;
}

body.invitation-opened .hero-name-only .hero-groom-name,
body.invitation-opened .hero-content-stair .hero-title-line-3 {
    animation: heroNameRevealLeftPop 1.18s cubic-bezier(0.16, 1, 0.3, 1) 0.78s both;
}

body.invitation-opened .hero-name-only .hero-date-label,
body.invitation-opened .hero-name-only .hero-date-text,
body.invitation-opened .hero-content-stair .hero-date-label,
body.invitation-opened .hero-content-stair .hero-date-text {
    animation: heroNameRevealLeftPop 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

@keyframes heroBackgroundSwap {
    0% {
        opacity: 0;
    }

    6% {
        opacity: 1;
    }

    28% {
        opacity: 1;
    }

    33.333% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes heroStaticBackgroundCycle {
    0%,
    33.332% {
        background-image: url("../images/AB1.jpg");
    }

    33.333%,
    66.665% {
        background-image: url("../images/AB2.jpg");
    }

    66.666%,
    100% {
        background-image: url("../images/AB3.jpg");
    }
}

@keyframes heroNameRevealLeftPop {
    0% {
        opacity: 0;
        transform: translateX(-38px) scale(0.94);
        filter: blur(8px);
    }

    68% {
        opacity: 1;
        transform: translateX(6px) scale(1.02);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}

.hero-section {
    background-image: url("../images/backgrounds/hero-bg.jpg");
    animation: heroStaticBackgroundCycle 24s steps(1, end) infinite;
}

.hero-section::before {
    background:
        linear-gradient(180deg, rgba(34, 25, 20, 0.46) 0%, rgba(34, 25, 20, 0.22) 55%, rgba(34, 25, 20, 0.18) 100%),
        linear-gradient(135deg, rgba(255, 247, 240, 0.24), rgba(255, 255, 255, 0.06));
}

.hero-section::after {
    background: linear-gradient(
        180deg,
        rgba(238, 243, 249, 0) 0%,
        rgba(238, 243, 249, 0.58) 55%,
        rgba(238, 243, 249, 0.96) 100%
    );
}

.countdown-section {
    background-image: url("../images/backgrounds/bg-bunga.jpg");
}

.countdown-section::before {
    background:
        linear-gradient(180deg, rgba(27, 33, 45, 0.34) 0%, rgba(27, 33, 45, 0.18) 100%),
        linear-gradient(135deg, rgba(245, 248, 253, 0.22), rgba(255, 255, 255, 0.05));
}

.countdown-section::after {
    background: linear-gradient(
        180deg,
        rgba(247, 239, 242, 0) 0%,
        rgba(247, 239, 242, 0.56) 55%,
        rgba(247, 239, 242, 0.96) 100%
    );
}

.story-section {
    background-image: url("../images/backgrounds/story-bg.png");
}

.story-section::before {
    background:
        linear-gradient(180deg, rgba(45, 29, 35, 0.36) 0%, rgba(45, 29, 35, 0.16) 100%),
        linear-gradient(135deg, rgba(255, 247, 250, 0.20), rgba(255, 255, 255, 0.04));
}

.story-section::after {
    background: linear-gradient(
        180deg,
        rgba(245, 236, 226, 0) 0%,
        rgba(245, 236, 226, 0.54) 55%,
        rgba(245, 236, 226, 0.96) 100%
    );
}

.event-section {
    background-image: url("../images/backgrounds/event-bg.jpg");
}

.event-section::before {
    background:
        linear-gradient(180deg, rgba(50, 35, 22, 0.38) 0%, rgba(50, 35, 22, 0.18) 100%),
        linear-gradient(135deg, rgba(255, 249, 241, 0.20), rgba(255, 255, 255, 0.04));
}

.event-section::after {
    background: linear-gradient(
        180deg,
        rgba(244, 240, 236, 0) 0%,
        rgba(244, 240, 236, 0.56) 55%,
        rgba(244, 240, 236, 0.96) 100%
    );
}

.gallery-section {
    background-image: url("../images/backgrounds/gallery-bg.jpg");
}

.gallery-section::before {
    background:
        linear-gradient(180deg, rgba(36, 31, 28, 0.32) 0%, rgba(36, 31, 28, 0.14) 100%),
        linear-gradient(135deg, rgba(255, 252, 248, 0.18), rgba(255, 255, 255, 0.04));
}

.gallery-section::after {
    background: linear-gradient(
        180deg,
        rgba(237, 244, 238, 0) 0%,
        rgba(237, 244, 238, 0.56) 55%,
        rgba(237, 244, 238, 0.96) 100%
    );
}

.location-section {
    /* background:
    linear-gradient(
        135deg,
        #346739 0%,
        #79AE6F 34%,
        #9FCB98 68%,
        #F2EDC2 100%
    ); */
    background-image: url("../images/backgrounds/location-bg.jpg");
}

.location-section::before {
    background:
        linear-gradient(180deg, rgba(28, 39, 31, 0.34) 0%, rgba(28, 39, 31, 0.14) 100%),
        linear-gradient(135deg, rgba(245, 251, 246, 0.18), rgba(255, 255, 255, 0.04));
}

.location-section::after {
    background: linear-gradient(
        180deg,
        rgba(239, 237, 247, 0) 0%,
        rgba(239, 237, 247, 0.56) 55%,
        rgba(239, 237, 247, 0.96) 100%
    );
}

.rsvp-section {
    background-image: url("../images/backgrounds/rsvp-bg.jpg");
}

.rsvp-section::before {
    background:
        linear-gradient(180deg, rgba(33, 35, 52, 0.34) 0%, rgba(33, 35, 52, 0.14) 100%),
        linear-gradient(135deg, rgba(248, 247, 252, 0.18), rgba(255, 255, 255, 0.04));
}

.rsvp-section::after {
    background: linear-gradient(
        180deg,
        rgba(246, 237, 242, 0) 0%,
        rgba(246, 237, 242, 0.56) 55%,
        rgba(246, 237, 242, 0.96) 100%
    );
}

.wishes-section {
    background-image: url("../images/backgrounds/wishes-bg.jpg");
}

.wishes-section::before {
    background:
        linear-gradient(180deg, rgba(46, 31, 36, 0.34) 0%, rgba(46, 31, 36, 0.14) 100%),
        linear-gradient(135deg, rgba(255, 248, 251, 0.18), rgba(255, 255, 255, 0.04));
}

.wishes-section::after {
    background: linear-gradient(
        180deg,
        rgba(74, 60, 52, 0) 0%,
        rgba(74, 60, 52, 0.36) 55%,
        rgba(74, 60, 52, 0.88) 100%
    );
}

/* .footer-section {
    background-image: url("../images/backgrounds/footer-bg.png");
    background-position: bottom;
} */

.footer-section {
    padding-top: 70px;
    padding-bottom: 70px;
    background-image: none;
    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(255, 248, 243, 0.72) 0%,
            rgba(255, 248, 243, 0) 36%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(214, 205, 201, 0.62) 0%,
            rgba(214, 205, 201, 0) 42%
        ),
        linear-gradient(
            180deg,
            #d6ceca 0%,
            #c9c1bd 48%,
            #b8afa9 100%
        );
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.footer-section::before {
    background:
        /* linear-gradient(180deg, rgba(28, 21, 18, 0.76) 0%, rgba(28, 21, 18, 0.86) 100%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)); */
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.08) 46%,
            rgba(92, 78, 71, 0.12) 100%
        );
}

.footer-container{
    text-align: center;
}

/* .footer-section .footer-title,
.footer-section .footer-text {
    color: rgba(255, 255, 255, 0.96);
} */

.footer-section .footer-title {
    margin: 0 0 12px;
    color: #ffffff;
    /* font-size: clamp(1.35rem, 2.4vw, 1.7rem); */
    font-weight: 600;
    line-height: 1.4;
    text-shadow:
        0 8px 22px rgba(72, 60, 55, 0.28),
        0 2px 8px rgba(72, 60, 55, 0.18);
}

.footer-section .footer-text {
    margin: 0;
    color: rgba(255, 255, 255, 0.94);
    font-size: 1rem;
    font-weight: 600;
    text-shadow:
        0 6px 18px rgba(72, 60, 55, 0.24),
        0 2px 6px rgba(72, 60, 55, 0.18);
}

.event-card,
.location-card,
.rsvp-form-card,
.wishes-form-card,
.wishes-list-card,
.countdown-card,
.rsvp-summary-card {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero-identity-wrapper > *,
.story-timeline > *,
.event-grid > *,
.location-layout > *,
.rsvp-layout > *,
.wishes-layout > * {
    min-width: 0;
}

.story-section.reveal-left,
.event-section.reveal-right {
    transform: translateY(40px) scale(0.985);
}

/* =================================
   WISHES LIST SCROLL MAX 4 ITEM
================================= */
.wishes-list-card {
    max-height: 500px;
    overflow: hidden;
}

.wishes-list {
    --wish-card-height: 98px;
    --wish-gap: 16px;

    max-height: calc((var(--wish-card-height) * 4) + (var(--wish-gap) * 3));
    overflow-y: auto;
    padding-right: 8px;
    scroll-behavior: smooth;
}

.wishes-item {
    min-height: var(--wish-card-height);
}

/* Scrollbar biar tetap halus */
.wishes-list::-webkit-scrollbar {
    width: 6px;
}

.wishes-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 999px;
}

.wishes-list::-webkit-scrollbar-thumb {
    background: rgba(164, 107, 73, 0.42);
    border-radius: 999px;
}

.wishes-list::-webkit-scrollbar-thumb:hover {
    background: rgba(164, 107, 73, 0.65);
}

/* =================================
   COVER OPENING ANIMATIONS
   - First load: teks muncul rapi
   - Open button: circle portal reveal tanpa mask-image
================================= */

/* First load hanya aktif saat cover masih idle, supaya tidak bentrok dengan animasi buka undangan */
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-card {
    animation: coverCardInitialPopupSlow 2.25s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-bride-name,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-couple-separator,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-groom-name {
    display: inline-block;
    animation: none;
    opacity: 1;
    transform: none;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-kicker,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-couple-name,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-label,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-name,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-open-button {
    opacity: 0;
    will-change: transform, opacity;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-kicker,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-label,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-name,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-open-button {
    transform: translateX(-24px) scale(0.97);
    animation: coverTextPopupLeftToRightSlow 1.95s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-couple-name {
    transform: translateY(24px) scale(0.97);
    animation: coverCoupleNamePopupBottomToTopSlow 2.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-kicker {
    animation-delay: 0.35s;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-couple-name {
    animation-delay: 0.72s;
}

.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-label,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-name,
.cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-open-button {
    animation-delay: 1.12s;
}

/* Circle portal reveal yang lebih ringan, tidak pakai radial mask */
.cover-screen.is-circle-revealing {
    overflow: hidden;
    background: transparent !important;
    transition: none !important;
}

.cover-portal-hole {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 300;
    width: 72px;
    height: 72px;
    border-radius: 999px;
    pointer-events: none;
    background: transparent;
    box-shadow: 0 0 0 220vmax rgba(255, 250, 246, 0.985);
    transform: translate(-50%, -50%) scale(0.08);
    transform-origin: center;
    will-change: transform;
    animation: coverPortalHoleExpand 3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cover-screen.is-circle-revealing .cover-card {
    animation: coverCardPortalHideSmooth 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cover-screen.is-circle-revealing .cover-open-button {
    animation: coverPortalButtonTap 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.invitation-opening .hero-navigation {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.invitation-opening .hero-content:not(.hero-name-only):not(.hero-content-stair) {
    animation: homePortalSoftAppear 2.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

body.invitation-opening .hero-name-only,
body.invitation-opening .hero-content-stair {
    animation: none;
}

@keyframes coverCardInitialPopupSlow {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.94);
    }

    55% {
        opacity: 1;
        transform: translateY(-2px) scale(1.006);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes coverTextPopupLeftToRightSlow {
    0% {
        opacity: 0;
        transform: translateX(-24px) scale(0.97);
    }

    62% {
        opacity: 1;
        transform: translateX(2px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes coverCoupleNamePopupBottomToTopSlow {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    52% {
        opacity: 1;
        transform: translateY(-3px) scale(1.018);
    }

    76% {
        opacity: 1;
        transform: translateY(-1px) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes coverPortalHoleExpand {
    0% {
        transform: translate(-50%, -50%) scale(0.08);
    }

    100% {
        transform: translate(-50%, -50%) scale(var(--cover-portal-scale, 32));
    }
}

@keyframes coverCardPortalHideSmooth {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px) scale(0.98);
    }
}

@keyframes coverPortalButtonTap {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.045);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes homePortalSoftAppear {
    0% {
        opacity: 0.82;
        transform: translateY(14px) scale(1.015);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .cover-portal-hole {
        width: 64px;
        height: 64px;
        animation-duration: 3s;
        box-shadow: 0 0 0 210vmax rgba(255, 250, 246, 0.99);
    }

    .cover-screen.is-circle-revealing .cover-card {
        animation-duration: 1.15s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-card,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-kicker,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-couple-name,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-label,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-guest-name,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-open-button,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-bride-name,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-couple-separator,
    .cover-screen:not(.is-hidden):not(.is-circle-revealing) .cover-groom-name,
    .hero-bg-slide,
    .hero-name-only .hero-kicker,
    .hero-name-only .hero-bride-name,
    .hero-name-only .hero-title-separator,
    .hero-name-only .hero-groom-name,
    .hero-name-only .hero-date-label,
    .hero-content-stair .hero-kicker,
    .hero-content-stair .hero-title-line,
    .hero-content-stair .hero-date-label,
    .cover-portal-hole,
    .cover-screen.is-circle-revealing .cover-card,
    .cover-screen.is-circle-revealing .cover-open-button,
    body.invitation-opening .hero-content {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section {
        animation: none;
        background-image: url("../images/backgrounds/hero-bg.jpg");
    }

    .hero-bg-slide {
        animation: none;
        opacity: 0;
    }

    .hero-bg-slide-1 {
        opacity: 1;
    }
}


/* =================================
   TABLET
================================= */
@media (max-width: 991px) {
    :root {
        --nav-offset: 110px;
    }

    .site-container {
        width: min(100% - 32px, var(--container));
    }

    .hero-section::after,
    .countdown-section::after,
    .story-section::after,
    .event-section::after,
    .gallery-section::after,
    .location-section::after,
    .rsvp-section::after,
    .wishes-section::after {
        height: 90px;
        filter: blur(14px);
        transform: translateY(38%);
    }

    .hero-navigation {
        position: fixed;
        top: 12px;
        left: 0;
        right: 0;
        bottom: auto;
        z-index: 1000;
        width: calc(100% - 32px);
        max-width: 1120px;
        margin: 0 auto;
        padding: 0;
    }

    .hero-nav-toggle {
        display: none;
    }

    .hero-navigation-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        height: auto;
        gap: 6px;
        padding: 12px 16px;
        border-radius: 24px;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .hero-navigation-list::-webkit-scrollbar {
        display: none;
    }

    .hero-navigation-item {
        flex: 0 0 auto;
        min-width: 0;
    }

    .hero-navigation-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-height: 40px;
        padding: 9px 14px;
        border-radius: 999px;
        font-size: 14px;
        text-align: center;
        white-space: nowrap;
        line-height: 1.2;
        word-break: normal;
        overflow-wrap: normal;
    }

    .hero-name-only,
    .hero-content-stair {
        padding-top: clamp(82px, 10vh, 108px);
        padding-left: clamp(26px, 4.5vw, 52px);
        max-width: 620px;
    }

    .hero-name-only .hero-title-separator,
    .hero-title-line-2 {
        padding-left: clamp(58px, 7vw, 78px);
    }

    .hero-name-only .hero-groom-name,
    .hero-title-line-3 {
        padding-left: clamp(78px, 9vw, 104px);
    }

    .hero-identity-wrapper,
    .story-timeline,
    .event-grid,
    .location-layout,
    .rsvp-layout,
    .wishes-layout,
    .gallery-grid {
        grid-template-columns: 1fr 1fr;
    }

    .gallery-slider {
        padding: 0 42px;
    }

    .gallery-track {
        gap: 16px;
    }

    .gallery-frame {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .gallery-image {
        height: 360px;
    }

    .location-map-frame {
        min-height: 360px;
    }
}

/* =================================
   MOBILE
================================= */
@media (max-width: 767px) {
    :root {
        --nav-offset: 102px;
    }

    .site-shell {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    /* .couple-photo-card-bride {
        transform: rotate(-2deg);
    }

    .couple-photo-card-groom {
        transform: rotate(1.8deg);
    } */

    .hero-section,
    .couple-info-section,
    .countdown-section,
    .story-section,
    .event-section,
    .gallery-section,
    .location-section,
    .rsvp-section,
    .wishes-section,
    .footer-section {
        padding: 56px 0;
        background-position: center center;
    }

    .hero-section {
        padding-top: 0 !important;
        padding-bottom: 56px;
        min-height: 100vh;
    }

    .hero-content {
        padding-top: 64px !important;
    }

    .hero-section::after,
    .couple-info-section::after,
    .countdown-section::after,
    .story-section::after,
    .event-section::after,
    .gallery-section::after,
    .location-section::after,
    .rsvp-section::after,
    .wishes-section::after {
        height: 72px;
        filter: blur(12px);
        transform: translateY(34%);
    }

    .site-container {
        width: calc(100% - 28px);
    }

    .cover-card {
        width: 100%;
        padding: 0 18px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    .music-toggle-button {
        right: 14px;
        bottom: 14px;
        min-height: 44px;
        padding: 11px 16px;
    }

    .hero-navigation {
        position: fixed;
        top: 12px;
        left: 12px;
        right: auto;
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
        transform: none;
        z-index: 1100;
    }

    .hero-nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 46px;
        height: 46px;
        padding: 0 12px;
        border: 1px solid rgba(167, 111, 77, 0.10);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 14px 32px rgba(82, 55, 36, 0.10);
    }

    .hero-nav-toggle span {
        display: block;
        width: 100%;
        height: 2px;
        border-radius: 999px;
        background: #8d593b;
        transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .hero-navigation.is-open .hero-nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hero-navigation.is-open .hero-nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .hero-navigation.is-open .hero-nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-navigation-list {
        position: absolute;
        top: 56px;
        left: 0;
        width: min(280px, calc(100vw - 72px));
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 12px;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(167, 111, 77, 0.10);
        box-shadow: 0 18px 36px rgba(82, 55, 36, 0.14);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px) scale(0.98);
        transform-origin: top left;
        transition:
            opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0.65s cubic-bezier(0.22, 1, 0.36, 1),
            transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
        overflow: visible;
        scrollbar-width: none;
    }

    .hero-navigation.is-open .hero-navigation-list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .hero-navigation-item {
        min-width: 0;
    }

    .hero-navigation-link {
        width: 100%;
        justify-content: flex-start;
        min-height: 40px;
        padding: 10px 14px;
        font-size: 13px;
        text-align: left;
        white-space: normal;
        border-radius: 12px;
    }

    .hero-name-only,
    .hero-content-stair {
        min-height: 92svh;
        padding-top: 92px;
        padding-left: 20px;
        max-width: 100%;
    }

    .hero-name-only .hero-title,
    .hero-title-stair {
        row-gap: 0;
    }

    .hero-name-only .hero-title-separator,
    .hero-title-line-2 {
        padding-left: 44px;
    }

    .hero-name-only .hero-groom-name,
    .hero-title-line-3 {
        padding-left: 62px;
    }

    .hero-date-label,
    .hero-date-text {
        margin-top: 18px;
        font-size: 0.95rem;
    }
    
    .couple-info-wrapper {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .couple-info-section {
        padding-top: 64px;
    }

    .story-timeline {
        display: grid;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px;
        width: min(100%, 360px);
    }

    .story-card {
        padding: 24px 20px 22px;
        border-radius: 24px;
        min-width: 0;
        background: rgba(32, 27, 24, 0.38);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .story-card::before {
        left: 18px;
        right: 18px;
        height: 4px;
    }

    .story-card-year {
        display: none;
    }

    .story-card-title {
        display: none;
    }

    .story-card-text {
        font-size: clamp(0.88rem, 3.35vw, 0.98rem);
        line-height: 1.78;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .story-card-text p {
        margin-bottom: 1.05em;
    }

    .event-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px;
    }

    .event-card {
        padding: 16px 14px;
        border-radius: 20px;
        min-width: 0;
    }

    .event-card-label {
        margin: 0 0 8px;
        padding: 6px 10px;
        font-size: 1px;
    }

    .event-card-name {
        margin: 0 0 10px;
        font-size: clamp(1rem, 2.8vw, 1.15rem);
        line-height: 1.3;
    }

    .event-card-date,
    .event-card-time,
    .event-card-venue,
    .event-card-address {
        margin: 0 0 6px;
        font-size: clamp(0.82rem, 2.3vw, 0.92rem);
        line-height: 1.5;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .event-card-button {
        width: 100%;
        min-height: 38px;
        margin-top: 10px;
        padding: 10px 12px;
        font-size: 12px;
    }

    .gallery-slider {
        padding: 0 38px;
    }

    .gallery-track {
        gap: 16px;
    }

    .gallery-frame {
        flex: 0 0 100%;
        max-width: 100%;
        border-radius: 20px;
    }

    .gallery-image {
        height: auto;
        aspect-ratio: 4 / 5;
    }

    .gallery-nav-button {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }

    .hero-identity-wrapper,
    .location-layout,
    .rsvp-layout,
    .wishes-layout,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero-button-group {
        flex-direction: column;
    }

    .hero-primary-button,
    .hero-secondary-button,
    .location-card-button,
    .event-card-button,
    .rsvp-submit-button,
    .wishes-submit-button {
        width: 100%;
    }

    .rsvp-form-card {
        width: 100%;
        padding: 20px 16px;
    }
    
    .rsvp-form {
        gap: 10px;
    }
    
    .rsvp-message-textarea {
        min-height: 86px;
    }

    .rsvp-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .rsvp-summary-card {
        min-height: 145px;
        padding: 18px 12px;
        border-radius: 20px;
        gap: 10px;
    }

    .rsvp-summary-card::before {
        left: 16px;
        right: 16px;
        height: 4px;
    }

    .rsvp-summary-card::after {
        width: 80px;
        height: 80px;
        right: -18px;
        bottom: -18px;
    }

    .rsvp-summary-number {
        font-size: 2.5rem;
    }

    .rsvp-summary-label {
        min-height: 30px;
        padding: 6px 10px;
        font-size: 12px;
    }

    .wishes-item-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .site-container {
        width: calc(100% - 24px);
    }

    .site-shell {
        padding-left: 0 !important;
        padding-top: 0 !important;
    }

    .cover-guest-name {
        font-size: 1.35rem;
    }

    .cover-card {
        padding: 0 14px;
    }

    .cover-couple-name {
        font-size: clamp(2rem, 10vw, 3.2rem);
    }

    .hero-navigation {
        top: 10px;
        left: 10px;
    }

    .hero-section {
        padding-top: 0 !important;
    }

    .hero-content {
        padding-top: 58px !important;
    }

    .hero-name-only,
    .hero-content-stair {
        padding-top: 84px;
        padding-left: 16px;
    }

    .hero-name-only .hero-title-separator,
    .hero-title-line-2 {
        padding-left: 34px;
    }

    .hero-name-only .hero-groom-name,
    .hero-title-line-3 {
        padding-left: 50px;
    }

    .hero-navigation-list {
        top: 52px;
        width: min(260px, calc(100vw - 56px));
        padding: 10px;
        border-radius: 16px;
    }

    .hero-navigation-link {
        min-height: 38px;
        padding: 9px 12px;
        font-size: 12px;
    }

    .story-timeline {
        gap: 12px;
    }

    .story-card {
        padding: 22px 18px 20px;
        border-radius: 22px;
    }

    .story-card-year {
        display: none;
    }

    .story-card-title {
        display: none;
    }

    .story-card-text {
        font-size: 0.86rem;
        line-height: 1.72;
    }

    .event-grid {
        gap: 12px;
    }

    .event-card {
        padding: 14px 12px;
        border-radius: 18px;
    }

    .event-card-label {
        padding: 5px 9px;
        font-size: 10px;
    }

    .event-card-name {
        font-size: 0.95rem;
        line-height: 1.25;
    }

    .event-card-date,
    .event-card-time,
    .event-card-venue,
    .event-card-address {
        font-size: 0.78rem;
        line-height: 1.4;
    }

    .event-card-button {
        min-height: 36px;
        padding: 9px 10px;
        font-size: 11px;
    }

    .gallery-slider {
        padding: 0 32px;
    }

    .gallery-image {
        height: 290px;
    }

    .rsvp-summary {
        gap: 12px;
    }

    .rsvp-summary-card {
        min-height: 128px;
        padding: 16px 10px;
        border-radius: 18px;
    }

    .rsvp-summary-number {
        font-size: 2.1rem;
    }

    .rsvp-summary-label {
        font-size: 11px;
        padding: 5px 8px;
    }

    .countdown-grid {
        gap: 12px;
    }

    .hero-person-card,
    .story-card,
    .event-card,
    .location-card,
    .wishes-form-card,
    .wishes-list-card,
    .countdown-card {
        padding: 20px 16px;
    }

    .rsvp-form-card{
        padding: 18px 14px;
    }
}

/* =================================
   SCROLL REVEAL ANIMATION
================================= */
.reveal-section {
    opacity: 0;
    transform: translateY(48px) scale(0.985);
    filter: blur(10px);
    transition:
        opacity 1.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.65s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.65s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}

.reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

.reveal-up {
    transform: translateY(52px) scale(0.985);
}

.reveal-left {
    transform: translateX(-56px);
}

.reveal-right {
    transform: translateX(56px);
}

.reveal-zoom {
    transform: scale(0.92);
}

.reveal-section.is-visible.reveal-up,
.reveal-section.is-visible.reveal-left,
.reveal-section.is-visible.reveal-right,
.reveal-section.is-visible.reveal-zoom {
    transform: translate(0, 0) scale(1);
}

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity 1.25s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible .reveal-stagger > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-section.is-visible .reveal-stagger > *:nth-child(1) { transition-delay: 0.14s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(2) { transition-delay: 0.28s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(3) { transition-delay: 0.74s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(4) { transition-delay: 0.98s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(5) { transition-delay: 0.70s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(6) { transition-delay: 0.84s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(7) { transition-delay: 0.98s; }
.reveal-section.is-visible .reveal-stagger > *:nth-child(8) { transition-delay: 1.12s; }

.reveal-card {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition:
        opacity 1.3s cubic-bezier(0.22, 1, 0.36, 1),
        transform 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-section.is-visible .reveal-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-section.is-visible .reveal-card:nth-child(1) { transition-delay: 0.32s; }
.reveal-section.is-visible .reveal-card:nth-child(2) { transition-delay: 0.32s; }
.reveal-section.is-visible .reveal-card:nth-child(3) { transition-delay: 0.46s; }
.reveal-section.is-visible .reveal-card:nth-child(4) { transition-delay: 0.60s; }
.reveal-section.is-visible .reveal-card:nth-child(5) { transition-delay: 0.74s; }
.reveal-section.is-visible .reveal-card:nth-child(6) { transition-delay: 0.88s; }

#home,
#mempelai,
#countdown,
#cerita,
#detail-acara,
#galeri,
#lokasi,
#rsvp,
#ucapan {
    scroll-margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .reveal-section,
    .reveal-stagger > *,
    .reveal-card {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
    
}



@media (min-width: 992px) {
    :root {
        --nav-offset: 0px;
    }

    html {
        scroll-padding-top: 0;
    }

    #home,
    #mempelai,
    #countdown,
    #cerita,
    #detail-acara,
    #galeri,
    #lokasi,
    #rsvp,
    #ucapan {
        scroll-margin-top: 0;
    }
}
/* =================================
   GALLERY COVERFLOW SLIDER
   tampilan 3D, swipe, dan autoplay
================================= */
.gallery-slider {
    --gallery-side-shift: clamp(170px, 29vw, 330px);
    --gallery-drag: 0px;
    position: relative;
    width: 100%;
    margin-top: 30px;
    padding: 0 54px 48px;
}

.gallery-viewport {
    position: relative;
    width: 100%;
    height: clamp(430px, 56vw, 610px);
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom;
    perspective: 1200px;
}

.gallery-slider.is-dragging .gallery-viewport {
    cursor: grabbing;
}

.gallery-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
}

.gallery-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(240px, 32vw, 370px);
    max-width: none;
    aspect-ratio: 3 / 4.25;
    margin: 0;
    overflow: hidden;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.58);
    box-shadow:
        0 22px 54px rgba(34, 24, 18, 0.18),
        0 4px 14px rgba(34, 24, 18, 0.08);
    transform:
        translate(
            calc(-50% + var(--gallery-x, 0px) + var(--gallery-drag, 0px)),
            calc(-50% + var(--gallery-y, 0px))
        )
        rotateZ(var(--gallery-tilt, 0deg))
        rotateY(var(--gallery-rotate, 0deg))
        scale(var(--gallery-scale, 1));
    opacity: var(--gallery-opacity, 0);
    filter: blur(var(--gallery-blur, 0px));
    pointer-events: none;
    transform-origin: center center;
    transition:
        transform 3.4s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    backface-visibility: hidden;
}

.gallery-slider.is-dragging .gallery-frame {
    transition: none;
}

.gallery-frame.is-active {
    pointer-events: auto;
    box-shadow:
        0 28px 68px rgba(34, 24, 18, 0.22),
        0 6px 16px rgba(34, 24, 18, 0.10);
}

.gallery-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 34%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, 0.18));
    opacity: 0.75;
}

.gallery-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transform: translateZ(0) scale(1.01);
    backface-visibility: hidden;
    transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-frame.is-active:hover .gallery-image {
    transform: translateZ(0) scale(1.045);
}

.gallery-nav-button {
    position: absolute;
    top: 46%;
    transform: translateY(-50%);
    z-index: 60;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #a86f48;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 12px 28px rgba(82, 55, 36, 0.14);
    cursor: pointer;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), background 0.75s cubic-bezier(0.22, 1, 0.36, 1), color 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-nav-button:hover,
.gallery-nav-button:focus-visible {
    background: #ffffff;
    color: #8d593b;
    transform: translateY(-50%) scale(1.08);
    outline: none;
}

.gallery-nav-prev {
    left: 0;
}

.gallery-nav-next {
    right: 0;
}

.gallery-dots {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 65;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transform: translateX(-50%);
}

.gallery-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 999px;
    background: rgba(168, 111, 72, 0.28);
    box-shadow: none;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), background 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.gallery-dot.is-active {
    width: 24px;
    background: #a86f48;
    transform: translateY(-1px);
}

.gallery-dot:focus-visible {
    outline: 3px solid rgba(168, 111, 72, 0.25);
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .gallery-slider {
        --gallery-side-shift: clamp(130px, 36vw, 255px);
        padding: 0 42px 46px;
    }

    .gallery-viewport {
        height: clamp(370px, 74vw, 540px);
    }

    .gallery-frame {
        width: min(74vw, 350px);
        border-radius: 24px;
    }
}

@media (max-width: 767px) {
    .gallery-slider {
        --gallery-side-shift: clamp(112px, 54vw, 220px);
        padding: 0 34px 42px;
        margin-top: 24px;
    }

    .gallery-viewport {
        height: clamp(330px, 106vw, 500px);
    }

    .gallery-frame {
        width: min(72vw, 310px);
        border-radius: 22px;
    }

    .gallery-nav-button {
        top: 45%;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .gallery-dots {
        bottom: 10px;
        gap: 7px;
    }
}

@media (max-width: 480px) {
    .gallery-slider {
        --gallery-side-shift: clamp(95px, 58vw, 185px);
        padding: 0 28px 38px;
    }

    .gallery-viewport {
        height: clamp(300px, 112vw, 440px);
    }

    .gallery-frame {
        width: min(74vw, 280px);
        border-radius: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gallery-frame,
    .gallery-image,
    .gallery-dot,
    .gallery-nav-button {
        transition: none !important;
    }
}

/* =================================
   GLASS CONTENT SECTIONS
   Konten tetap kebaca, background tetap kelihatan
================================= */

.countdown-section::before,
.event-section::before,
.location-section::before,
.wishes-section::before,
.rsvp-section::before {
    background:
        linear-gradient(
            180deg,
            rgba(28, 22, 20, 0.28) 0%,
            rgba(28, 22, 20, 0.16) 48%,
            rgba(28, 22, 20, 0.22) 100%
        ),
        linear-gradient(
            135deg,
            rgba(255, 248, 243, 0.20),
            rgba(255, 255, 255, 0.04)
        );
}

.countdown-heading,
.couple-info-heading,
.story-heading,
.event-heading,
.gallery-heading,
.location-heading,
.wishes-heading,
.rsvp-heading {
    background: rgba(255, 248, 243, 0.16);
    color: rgba(255, 238, 226, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 24px rgba(24, 18, 15, 0.14);
    text-shadow: 0 2px 8px rgba(24, 18, 15, 0.28);
}

.countdown-title,
.couple-info-title,
.story-title,
.event-title,
.gallery-title,
.location-title,
.wishes-title,
.rsvp-title {
    color: rgba(255, 248, 243, 0.98);
    text-shadow:
        0 10px 28px rgba(24, 18, 15, 0.38),
        0 2px 8px rgba(24, 18, 15, 0.20);
}

.countdown-title-word-hitung,
.couple-info-title-word-detail,
.story-title-word-cerita,
.event-title-word-detail,
.gallery-title-word-galeri,
.location-title-word-lokasi,
.wishes-title-word-ucapan,
.rsvp-title-word-konfirmasi {
    color: #c9875d;
}

.rsvp-title-word-konfirmasi{
    color: black;
}

.wishes-title-word-ucapan{
    color: black;
}

.story-title-word-cerita{
    color: maroon;

    font-family: "Amsterdam Signature", cursive !important;
    font-weight: normal !important;

    font-size: 120px;
    line-height: 1;
}

.location-title-word-lokasi{
    color: white;

    font-family: "Amsterdam Signature", cursive !important;
    font-weight: normal !important;

    font-size: 120px;
    line-height: 1;
}

.countdown-title-word-mundur,
.couple-info-title-word-catin,
.story-title-word-pasangan,
.event-title-word-acara,
.gallery-title-word-foto,
.location-title-word-acara,
.wishes-title-word-doa,
.rsvp-title-word-kehadiran {
    color: rgba(255, 248, 243, 0.96);
}

.countdown-title-word-mundur {
    color: maroon;

    font-family: "Amsterdam Signature", cursive !important;
    font-weight: normal !important;

    font-size: 100px;
    line-height: 1;
}

.countdown-description,
.couple-info-quote,
.story-description,
.event-description,
.gallery-description,
.location-description,
.wishes-description,
.rsvp-description {
    color: rgba(255, 248, 243, 0.80);
    text-shadow: 0 4px 14px rgba(24, 18, 15, 0.26);
}

.countdown-card,
.event-card,
.location-card,
.rsvp-form-card,
.wishes-form-card,
.wishes-list-card,
.rsvp-summary-card {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.30),
            rgba(255, 255, 255, 0.16)
        );
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 24px 54px rgba(24, 18, 15, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.countdown-card {
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14)),
        linear-gradient(135deg, rgba(255, 248, 243, 0.28), rgba(255, 255, 255, 0.14));
}

.countdown-days-number,
.countdown-hours-number,
.countdown-minutes-number,
.countdown-seconds-number {
    color: rgba(255, 248, 243, 0.98);
    text-shadow:
        0 8px 24px rgba(24, 18, 15, 0.30),
        0 2px 8px rgba(24, 18, 15, 0.20);
}

.countdown-days-label,
.countdown-hours-label,
.countdown-minutes-label,
.countdown-seconds-label {
    color: rgba(255, 248, 243, 0.76);
    text-shadow: 0 3px 10px rgba(24, 18, 15, 0.22);
}

.event-card-label,
.rsvp-summary-label {
    background: rgba(255, 248, 243, 0.20);
    color: rgba(255, 248, 243, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-shadow: 0 2px 8px rgba(24, 18, 15, 0.22);
}

.event-card-name,
.location-card-name {
    color: rgba(255, 248, 243, 0.98);
    text-shadow:
        0 8px 24px rgba(24, 18, 15, 0.30),
        0 2px 8px rgba(24, 18, 15, 0.18);
}

.event-card-date,
.event-card-time,
.event-card-venue,
.event-card-address,
.location-card-address,
.location-card-note,
.location-contact-label,
.location-contact-link {
    color: rgba(255, 248, 243, 0.78);
    text-shadow: 0 4px 14px rgba(24, 18, 15, 0.24);
}

.location-map-frame {
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow:
        0 24px 54px rgba(24, 18, 15, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.18);
}

.rsvp-summary-number {
    color: rgba(255, 248, 243, 0.98) !important;
    text-shadow:
        0 8px 24px rgba(24, 18, 15, 0.30),
        0 2px 8px rgba(24, 18, 15, 0.18);
}

.rsvp-summary-card::before,
.event-card::before {
    opacity: 0.72;
}

.wishes-name-label,
.wishes-message-label,
.rsvp-name-label,
.rsvp-phone-label,
.rsvp-status-label,
.rsvp-count-label,
.rsvp-message-label {
    color: rgba(255, 248, 243, 0.94);
    text-shadow: 0 3px 10px rgba(24, 18, 15, 0.24);
}

.wishes-name-input,
.wishes-message-textarea,
.rsvp-name-input,
.rsvp-phone-input,
.rsvp-status-select,
.rsvp-count-input,
.rsvp-message-textarea {
    background: rgba(255, 255, 255, 0.60);
    border: 1px solid rgba(255, 255, 255, 0.34);
    color: #2b211b;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.wishes-name-input::placeholder,
.wishes-message-textarea::placeholder,
.rsvp-name-input::placeholder,
.rsvp-phone-input::placeholder,
.rsvp-message-textarea::placeholder {
    color: rgba(43, 33, 27, 0.58);
}

.wishes-item {
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.58),
            rgba(255, 255, 255, 0.36)
        );
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow:
        0 12px 24px rgba(24, 18, 15, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.wishes-item-name {
    color: var(--primary-dark);
}

.wishes-item-date,
.wishes-item-text {
    color: rgba(43, 33, 27, 0.72);
}

.wishes-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.20);
}

.wishes-list::-webkit-scrollbar-thumb {
    background: rgba(255, 248, 243, 0.46);
}

@media (max-width: 767px) {
    .countdown-card,
    .event-card,
    .location-card,
    .rsvp-form-card,
    .wishes-form-card,
    .wishes-list-card,
    .rsvp-summary-card {
        background:
            linear-gradient(
                135deg,
                rgba(255, 255, 255, 0.34),
                rgba(255, 255, 255, 0.18)
            );
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .wishes-name-input,
    .wishes-message-textarea,
    .rsvp-name-input,
    .rsvp-phone-input,
    .rsvp-status-select,
    .rsvp-count-input,
    .rsvp-message-textarea {
        background: rgba(255, 255, 255, 0.66);
    }
}

/* =================================
   FINAL COUPLE SECTION READABILITY + MOBILE STACK
   Foto lalu informasi, kemudian foto lalu informasi
================================= */

.couple-detail-card {
    background: rgba(32, 27, 24, 0.32);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    border: 1px solid rgba(255, 255, 255, 0.30);
    box-shadow:
        0 22px 52px rgba(24, 18, 15, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.couple-detail-card::before {
    background: linear-gradient(
        90deg,
        rgba(242, 237, 194, 0.76),
        rgba(164, 107, 73, 0.88)
    );
}

.couple-detail-role {
    background: rgba(255, 248, 243, 0.18);
    color: rgba(255, 248, 243, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.20);
    text-shadow: 0 2px 8px rgba(24, 18, 15, 0.30);
}

.couple-detail-name {
    color: rgba(255, 248, 243, 0.98);
    text-shadow:
        0 8px 24px rgba(24, 18, 15, 0.38),
        0 2px 8px rgba(24, 18, 15, 0.26);
}

.couple-detail-parent {
    color: rgba(255, 248, 243, 0.82);
    text-shadow: 0 4px 14px rgba(24, 18, 15, 0.30);
}

.couple-instagram-button {
    background: rgba(242, 237, 194, 0.16);
    color: rgba(255, 248, 243, 0.96);
    border: 1px solid rgba(242, 237, 194, 0.34);
    box-shadow:
        0 12px 24px rgba(24, 18, 15, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-shadow: 0 2px 8px rgba(24, 18, 15, 0.24);
}

.couple-instagram-button:hover {
    background: rgba(242, 237, 194, 0.28);
    color: #ffffff;
    border-color: rgba(242, 237, 194, 0.52);
}

.couple-photo-card {
    background: rgba(255, 255, 255, 0.46);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.66);
}

.couple-photo-caption {
    /* background: rgba(255, 255, 255, 0.88); */
    color: white;
    font-size: 20px;
}

@media (max-width: 767px) {
    .couple-info-section {
        padding-top: 54px;
        padding-bottom: 58px;
    }

    .couple-info-opening {
        margin-bottom: 22px;
    }

    .couple-info-title {
        font-size: clamp(1.85rem, 9vw, 2.45rem);
    }

    .couple-info-quote {
        width: min(100%, 360px);
        font-size: 0.9rem;
        line-height: 1.65;
        color: rgba(255, 248, 243, 0.80);
        text-shadow: 0 4px 14px rgba(24, 18, 15, 0.26);
    }

    .couple-info-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        width: min(100%, 360px);
        margin: 0 auto;
        align-items: start;
        text-align: left;
    }

    .couple-photo-stack,
    .couple-detail-stack {
        display: contents;
    }

    .couple-photo-card-bride {
        order: 1;
    }

    .couple-detail-stack .couple-detail-card:nth-of-type(1) {
        order: 2;
    }

    .couple-photo-card-groom {
        order: 3;
    }

    .couple-detail-stack .couple-detail-card:nth-of-type(2) {
        order: 4;
    }

    .couple-photo-card,
    .couple-detail-card {
        width: 100%;
        height: auto;
        min-height: 0;
    }

    .couple-photo-card {
        padding: 8px;
        border-radius: 24px;
        margin-left: 0;
        margin-right: 0;
    }

    /* .couple-photo-card-bride {
        transform: rotate(-1.6deg);
    }

    .couple-photo-card-groom {
        transform: rotate(1.4deg);
    } */

    .couple-photo-image {
        width: 100%;
        height: clamp(250px, 72vw, 330px);
        min-height: 0;
        aspect-ratio: auto;
        object-fit: cover;
        border-radius: 19px;
    }

    .couple-photo-caption {
        left: 16px;
        bottom: 16px;
        min-height: 30px;
        padding: 6px 12px;
        font-size: 11px;
        box-shadow: 0 10px 20px rgba(24, 18, 15, 0.16);
    }

    .couple-detail-card {
        padding: 24px 20px 22px;
        border-radius: 24px;
        background: rgba(32, 27, 24, 0.38);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    .couple-detail-card::before {
        left: 18px;
        right: 18px;
        height: 4px;
    }

    .couple-detail-role {
        margin-bottom: 10px;
        padding: 6px 11px;
        font-size: 11px;
    }

    .couple-detail-name {
        margin-bottom: 8px;
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        line-height: 1.08;
    }

    .couple-detail-parent {
        margin-bottom: 16px;
        font-size: 0.92rem;
        line-height: 1.55;
    }

    .couple-instagram-button {
        width: fit-content;
        max-width: 100%;
        min-height: 40px;
        padding: 9px 15px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .couple-info-layout {
        width: min(100%, 350px);
        gap: 15px;
    }

    .couple-photo-image {
        height: clamp(240px, 78vw, 315px);
    }

    .couple-detail-card {
        padding: 22px 18px 20px;
        border-radius: 22px;
    }

    .couple-detail-name {
        font-size: clamp(1.65rem, 8vw, 2.1rem);
    }

    .couple-detail-parent {
        font-size: 0.88rem;
    }

    .couple-instagram-button {
        min-height: 38px;
        font-size: 0.78rem;
    }
}

/* =================================
   FINAL BACKGROUND SCHEME
   1 foto untuk cover, 1 foto untuk semua content
   Letakkan gambar di:
   assets/images/cover-bg.jpg
   assets/images/content-bg.jpg
================================= */

:root {
    --cover-background-image: url("../images/cover-bg1.webp");
    --content-background-image: url("../images/content-bg.webp");
}

.cover-screen {
    background:
        linear-gradient(
            180deg,
            rgba(255, 248, 243, 0.48) 0%,
            rgba(246, 236, 228, 0.58) 100%
        ),
        var(--cover-background-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.hero-section,
.couple-info-section,
.countdown-section,
.story-section,
.event-section,
.gallery-section,
.location-section,
.rsvp-section,
.wishes-section {
    background-image: var(--content-background-image) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    animation: none !important;
}

.hero-background-slider,
.hero-bg-slide {
    background-image: var(--content-background-image) !important;
}

.hero-bg-slide {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

.hero-section::before,
.couple-info-section::before,
.countdown-section::before,
.story-section::before,
.event-section::before,
.gallery-section::before,
.location-section::before,
.rsvp-section::before,
.wishes-section::before {
    background:
        linear-gradient(
            180deg,
            rgba(25, 20, 18, 0.42) 0%,
            rgba(25, 20, 18, 0.24) 48%,
            rgba(25, 20, 18, 0.34) 100%
        ),
        linear-gradient(
            135deg,
            rgba(255, 248, 243, 0.22),
            rgba(255, 255, 255, 0.04)
        ) !important;
}

.hero-section::after,
.couple-info-section::after,
.countdown-section::after,
.story-section::after,
.event-section::after,
.gallery-section::after,
.location-section::after,
.rsvp-section::after,
.wishes-section::after {
    background: linear-gradient(
        180deg,
        rgba(244, 238, 234, 0) 0%,
        rgba(244, 238, 234, 0.38) 55%,
        rgba(244, 238, 234, 0.74) 100%
    ) !important;
}

@media (max-width: 767px) {
    .hero-section,
    .couple-info-section,
    .countdown-section,
    .story-section,
    .event-section,
    .gallery-section,
    .location-section,
    .rsvp-section,
    .wishes-section {
        background-position: center center !important;
    }

    .cover-screen {
        background-position: center center !important;
    }
}

/* =================================
   FIXED CONTENT BACKGROUND FINAL
   Cover memakai cover-bg.jpg
   Semua content memakai content-bg.jpg yang diam saat scroll
================================= */

.site-shell {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    background: transparent;
}

.site-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(20, 16, 14, 0.30) 0%,
            rgba(20, 16, 14, 0.18) 48%,
            rgba(20, 16, 14, 0.30) 100%
        ),
        var(--content-background-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
    will-change: transform;
}

.hero-section,
.couple-info-section,
.countdown-section,
.story-section,
.event-section,
.gallery-section,
.location-section,
.rsvp-section,
.wishes-section,
.footer-section {
    position: relative;
    z-index: 1;
    background-image: none !important;
    background-color: transparent !important;
    background-size: auto !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
    animation: none !important;
}

.hero-background-slider,
.hero-bg-slide {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.hero-section::before,
.couple-info-section::before,
.countdown-section::before,
.story-section::before,
.event-section::before,
.gallery-section::before,
.location-section::before,
.rsvp-section::before,
.wishes-section::before,
.footer-section::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 248, 243, 0.16) 0%,
            rgba(255, 248, 243, 0.08) 42%,
            rgba(35, 28, 24, 0.18) 100%
        ),
        linear-gradient(
            135deg,
            rgba(34, 25, 20, 0.16),
            rgba(255, 255, 255, 0.06)
        ) !important;
}

.hero-section::after,
.couple-info-section::after,
.countdown-section::after,
.story-section::after,
.event-section::after,
.gallery-section::after,
.location-section::after,
.rsvp-section::after,
.wishes-section::after {
    background: transparent !important;
    filter: none !important;
}

.footer-section {
    padding-top: 70px;
    padding-bottom: 70px;
}

.footer-section .footer-title,
.footer-section .footer-text {
    color: rgba(255, 255, 255, 0.96);
    text-shadow:
        0 8px 24px rgba(24, 18, 15, 0.32),
        0 2px 8px rgba(24, 18, 15, 0.24);
}

@media (max-width: 767px) {
    .site-shell::before {
        background-position: center center;
    }
}


/* =================================
   REMOVE SECTION SEPARATOR LINE
   Background content tetap flat/fixed, tanpa garis antar section
================================= */

.hero-section::after,
.couple-info-section::after,
.countdown-section::after,
.story-section::after,
.event-section::after,
.gallery-section::after,
.location-section::after,
.rsvp-section::after,
.wishes-section::after,
.footer-section::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
    background: transparent !important;
    filter: none !important;
    transform: none !important;
}

.hero-section::before,
.couple-info-section::before,
.countdown-section::before,
.story-section::before,
.event-section::before,
.gallery-section::before,
.location-section::before,
.rsvp-section::before,
.wishes-section::before,
.footer-section::before {
    background: rgba(24, 18, 15, 0.18) !important;
}

.hero-section,
.couple-info-section,
.countdown-section,
.story-section,
.event-section,
.gallery-section,
.location-section,
.rsvp-section,
.wishes-section,
.footer-section {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* =================================
   TRUE UNIFIED CONTENT BACKGROUND
   Satu background fixed + satu overlay global
   Semua overlay per section dimatikan agar tidak ada garis batas
================================= */

body {
    background: #1f1a17;
}

.site-shell {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    background: transparent !important;
}

.site-shell::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image: var(--content-background-image);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

.site-shell::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(18, 14, 12, 0.34) 0%,
            rgba(18, 14, 12, 0.24) 42%,
            rgba(18, 14, 12, 0.36) 100%
        ),
        linear-gradient(
            135deg,
            rgba(255, 248, 243, 0.12),
            rgba(255, 255, 255, 0.03)
        );
}

.hero-section,
.couple-info-section,
.countdown-section,
.story-section,
.event-section,
.gallery-section,
.location-section,
.rsvp-section,
.wishes-section,
.footer-section {
    position: relative;
    z-index: 1;
    isolation: auto !important;
    overflow: visible;
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
    background-attachment: scroll !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

.hero-section::before,
.couple-info-section::before,
.countdown-section::before,
.story-section::before,
.event-section::before,
.gallery-section::before,
.location-section::before,
.rsvp-section::before,
.wishes-section::before,
.footer-section::before,
.hero-section::after,
.couple-info-section::after,
.countdown-section::after,
.story-section::after,
.event-section::after,
.gallery-section::after,
.location-section::after,
.rsvp-section::after,
.wishes-section::after,
.footer-section::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
}

.hero-section + section,
section + section,
main + footer,
.wishes-section + .footer-section {
    margin-top: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

.hero-section > .site-container,
.couple-info-section > .site-container,
.countdown-section > .site-container,
.story-section > .site-container,
.event-section > .site-container,
.gallery-section > .site-container,
.location-section > .site-container,
.rsvp-section > .site-container,
.wishes-section > .site-container,
.footer-section > .site-container {
    position: relative;
    z-index: 2;
}

@media (max-width: 767px) {
    .site-shell::before {
        background-position: center center;
    }
}

/* =================================
   COUPLE PHOTO REVEAL CLEAN
   Animasi foto mempelai dari kanan
================================= */

.couple-info-section .couple-photo-stack {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
}

.couple-info-section .couple-reveal-photo,
.couple-info-section .couple-reveal-detail {
    opacity: 0;
    filter: blur(14px);
    transform-origin: center center;
    transition:
        opacity 1.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.couple-info-section .couple-photo-card-bride.couple-reveal-photo {
    transform: translateX(150px) scale(0.18) rotate(-1.4deg);
}

.couple-info-section .couple-photo-card-groom.couple-reveal-photo {
    transform: translateX(150px) scale(0.18) rotate(1.3deg);
}

.couple-info-section .couple-reveal-detail {
    transform: translateX(150px) scale(0.18);
}

.couple-info-section.is-visible .couple-photo-card-bride.couple-reveal-photo {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1) rotate(-1.4deg);
    transition-delay: 0.24s;
}

.couple-info-section.is-visible .couple-detail-stack .couple-reveal-detail:nth-of-type(1) {
    transition-delay: 0.46s;
}

.couple-info-section.is-visible .couple-photo-card-groom.couple-reveal-photo {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1) rotate(1.3deg);
    transition-delay: 0.68s;
}

.couple-info-section.is-visible .couple-detail-stack .couple-reveal-detail:nth-of-type(2) {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
    transition-delay: 0.90s;
}

.couple-info-section.is-visible .couple-reveal-detail {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
}

@media (max-width: 767px) {
    .couple-info-section .couple-photo-card-bride.couple-reveal-photo {
        transform: translateX(112px) scale(0.18) rotate(-1.6deg);
    }

    .couple-info-section .couple-photo-card-groom.couple-reveal-photo {
        transform: translateX(112px) scale(0.18) rotate(1.4deg);
    }

    .couple-info-section .couple-reveal-detail {
        transform: translateX(112px) scale(0.18);
    }

    .couple-info-section.is-visible .couple-photo-card-bride.couple-reveal-photo {
        transform: translateX(0) scale(1) rotate(-1.6deg);
    }

    .couple-info-section.is-visible .couple-photo-card-groom.couple-reveal-photo {
        transform: translateX(0) scale(1) rotate(1.4deg);
    }

    .couple-info-section.is-visible .couple-reveal-detail {
        transform: translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .couple-info-section .couple-reveal-photo,
    .couple-info-section .couple-reveal-detail {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}


/* =================================
   FINAL HERO + SURAT CLEAN
   Nama + waktu kiri atas, surat naik di bawah tengah
================================= */

.hero-section {
    --hero-name-left: clamp(22px, 4.6vw, 72px);
    --hero-name-top: clamp(64px, 8vh, 92px);
    --hero-bottom-space: clamp(30px, 5.5vh, 58px);

    position: relative;
    min-height: 100svh !important;
    height: 100svh;
    padding: 0 !important;
    overflow: hidden;
}

.hero-section > .site-container {
    position: static;
    z-index: auto;
    width: 100%;
    max-width: none;
    margin: 0;
}

.hero-section .hero-content-stair {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100svh !important;
    max-width: none !important;
    min-height: 0 !important;
    padding: var(--hero-name-top) 0 var(--hero-bottom-space) !important;
    margin: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-align: left !important;
    z-index: 5;
}

/* Semua nama mempelai */
.cover-couple-name,
.cover-bride-name,
.cover-groom-name,
.hero-section .hero-title,
.hero-section .hero-title-stair,
.hero-section .hero-title-line,
.couple-detail-name {
    font-family: "Amsterdam Signature", cursive !important;
    font-weight: normal;
    letter-spacing: 0.02em;
}

.cover-couple-name,
.cover-bride-name,
.cover-groom-name {
    line-height: 0.9;
}

.cover-bride-name,
.cover-groom-name {
    font-weight: bold;
}

.hero-section .hero-content-stair .hero-kicker,
.hero-section .hero-title,
.hero-section .hero-title-stair,
.hero-section .hero-date-label,
.hero-section .hero-date-text {
    align-self: flex-start !important;
    margin-left: var(--hero-name-left) !important;
    max-width: calc(100vw - (var(--hero-name-left) * 2)) !important;
}

.hero-section .hero-content-stair .hero-kicker {
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: clamp(10px, 1.6vh, 16px) !important;
    padding: 7px 14px;
    font-size: clamp(0.68rem, 1.25vw, 0.8rem);
}

.hero-section .hero-title,
.hero-section .hero-title-stair {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    row-gap: clamp(6px, 1vh, 12px) !important;

    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;

    font-size: clamp(2.2rem, 5.8vw, 4.8rem) !important;
    line-height: 0.9 !important;
    text-align: left !important;
}

.hero-section .hero-title-line {
    display: block;
    width: max-content;
}

.hero-section .hero-title-line-1 {
    padding-left: 0 !important;
}

.hero-section .hero-title-line-2 {
    padding-left: clamp(40px, 5vw, 76px) !important;
}

.hero-section .hero-title-line-3 {
    padding-left: clamp(56px, 6.5vw, 100px) !important;
}

.hero-section .hero-date-label,
.hero-section .hero-date-text {
    margin-top: clamp(22px, 2.6vh, 34px) !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;

    color: rgba(255, 248, 243, 0.94) !important;
    font-size: clamp(0.86rem, 1.45vw, 1rem) !important;
    line-height: 1.35;
    letter-spacing: 0.04em;
    word-spacing: 0.14em;
    text-align: left !important;
    text-shadow:
        0 5px 16px rgba(0, 0, 0, 0.40),
        0 1px 4px rgba(0, 0, 0, 0.34);
}

/* Surat bawah tengah, lebih naik, tanpa card */
.hero-section .hero-quran-card {
    align-self: center !important;
    width: min(680px, calc(100vw - 36px)) !important;
    margin: auto auto clamp(96px, 14vh, 160px) !important;
    padding: 0 18px 12px !important;
    text-align: center !important;

    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;

    opacity: 0;
    transform: translateY(34px) scale(0.96);
    filter: blur(10px);
    animation: none;
    will-change: opacity, transform, filter;
}

.hero-section .hero-quran-card::before,
.hero-section .hero-quran-card::after {
    content: none !important;
    display: none !important;
}

.hero-section .hero-quran-kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 clamp(10px, 1.6vh, 16px) !important;
    padding: 0 !important;

    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;

    color: rgba(255, 248, 243, 0.96) !important;
    font-family: "Great Vibes", cursive !important;
    font-size: clamp(1.35rem, 2.6vw, 2.1rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.02em;
    text-shadow:
        0 3px 10px rgba(0, 0, 0, 0.48),
        0 1px 3px rgba(0, 0, 0, 0.38);
}

.hero-section .hero-quran-arabic {
    max-width: 620px;
    margin: 0 auto clamp(10px, 1.5vh, 14px) !important;
    color: rgba(255, 248, 243, 0.98) !important;
    font-size: clamp(1.18rem, 3vw, 1.95rem);
    line-height: 1.76;
    font-weight: 700;
    text-shadow:
        0 10px 30px rgba(0, 0, 0, 0.48),
        0 2px 8px rgba(0, 0, 0, 0.38);
}

.hero-section .hero-quran-translation {
    max-width: 620px;
    margin: 0 auto !important;
    color: rgba(255, 248, 243, 0.94) !important;
    font-size: clamp(0.98rem, 1.9vw, 1.24rem);
    line-height: 1.72;
    text-shadow:
        0 6px 20px rgba(0, 0, 0, 0.46),
        0 1px 4px rgba(0, 0, 0, 0.34);
}

/* Animasi surat hero, satu blok bersih tanpa override tambahan */
body.invitation-opened .hero-section .hero-quran-card {
    animation: heroQuranCardReveal 1.35s cubic-bezier(0.16, 1, 0.3, 1) 1.18s both;
}

.hero-section .hero-quran-kicker,
.hero-section .hero-quran-arabic,
.hero-section .hero-quran-translation {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
    will-change: opacity, transform, filter;
}

body.invitation-opened .hero-section .hero-quran-kicker {
    animation: heroQuranTextReveal 1.05s cubic-bezier(0.16, 1, 0.3, 1) 1.42s both;
}

body.invitation-opened .hero-section .hero-quran-arabic {
    animation: heroQuranTextReveal 1.12s cubic-bezier(0.16, 1, 0.3, 1) 1.62s both;
}

body.invitation-opened .hero-section .hero-quran-translation {
    animation: heroQuranTextReveal 1.12s cubic-bezier(0.16, 1, 0.3, 1) 1.84s both;
}

@keyframes heroQuranCardReveal {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(0.96);
        filter: blur(10px);
    }

    62% {
        opacity: 1;
        transform: translateY(-4px) scale(1.01);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes heroQuranTextReveal {
    0% {
        opacity: 0;
        transform: translateY(18px);
        filter: blur(8px);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-section .hero-quran-card,
    .hero-section .hero-quran-kicker,
    .hero-section .hero-quran-arabic,
    .hero-section .hero-quran-translation {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }
}

@media (max-width: 991px) {
    .hero-section {
        --hero-name-left: 26px;
        --hero-name-top: 78px;
        --hero-bottom-space: 32px;
    }

    .hero-section .hero-title,
    .hero-section .hero-title-stair {
        font-size: clamp(2.08rem, 7.4vw, 4rem) !important;
    }
}

@media (max-width: 767px) {
    .hero-section {
        --hero-name-left: 18px;
        --hero-name-top: 72px;
        --hero-bottom-space: 24px;
    }

    .hero-section .hero-content-stair .hero-kicker {
        margin-bottom: 10px !important;
        padding: 6px 12px;
        font-size: 300px;
    }

    .hero-section .hero-title,
    .hero-section .hero-title-stair {
        font-size: clamp(2.1rem, 12vw, 3.35rem) !important;
        line-height: 0.84 !important;
    }

    .hero-section .hero-title-line-2 {
        padding-left: clamp(28px, 10vw, 42px) !important;
    }

    .hero-section .hero-title-line-3 {
        padding-left: clamp(40px, 14vw, 58px) !important;
    }

    .hero-section .hero-date-label,
    .hero-section .hero-date-text {
        margin-top: 16px !important;
        font-size: clamp(0.78rem, 3.4vw, 0.9rem) !important;
        letter-spacing: 0.035em;
        word-spacing: 0.1em;
    }

    .hero-section .hero-quran-card {
        width: min(430px, calc(100vw - 28px)) !important;
        margin: auto auto clamp(72px, 11vh, 110px) !important;
        padding: 0 10px 10px !important;
    }

    .hero-section .hero-quran-kicker {
        margin-bottom: 8px !important;
        font-family: "Great Vibes", cursive !important;
        font-size: clamp(1.16rem, 5vw, 1.7rem) !important;
        font-weight: 400 !important;
    }

    .hero-section .hero-quran-arabic {
        margin-bottom: 8px !important;
        font-size: clamp(1.05rem, 5.4vw, 1.46rem);
        line-height: 1.6;
    }

    .hero-section .hero-quran-translation {
        font-size: clamp(0.82rem, 3.7vw, 0.98rem);
        line-height: 1.58;
    }
}

@media (max-width: 480px) {
    .hero-section {
        --hero-name-left: 16px;
        --hero-name-top: 68px;
        --hero-bottom-space: 20px;
    }

    .hero-section .hero-quran-card {
        margin: auto auto 74px !important;
    }
}

@media (max-width: 380px), (max-height: 690px) {
    .hero-section {
        --hero-name-top: 42px;
        --hero-bottom-space: 14px;
    }

    .hero-section .hero-content-stair .hero-kicker {
        margin-bottom: 8px !important;
        padding: 5px 10px;
    }

    .hero-section .hero-title,
    .hero-section .hero-title-stair {
        font-size: clamp(1.9rem, 10.8vw, 2.8rem) !important;
    }

    .hero-section .hero-date-label,
    .hero-section .hero-date-text {
        margin-top: 9px !important;
        font-size: 0.74rem !important;
    }

    .hero-section .hero-quran-card {
        margin: auto auto 58px !important;
        padding: 0 8px 8px !important;
    }

    .hero-section .hero-quran-kicker {
        margin-bottom: 6px !important;
        font-family: "Great Vibes", cursive !important;
        font-size: 1.12rem !important;
        font-weight: 400 !important;
    }

    .hero-section .hero-quran-arabic {
        margin-bottom: 6px !important;
        font-size: clamp(0.95rem, 4.8vw, 1.22rem);
        line-height: 1.5;
    }

    .hero-section .hero-quran-translation {
        font-size: 0.76rem;
        line-height: 1.48;
    }
}


/* =================================
   FOTO SETELAH SURAT CLEAN
   Muncul setelah hero saat user scroll, animasi dari kiri
   Section dipadatkan agar bagian mempelai mulai terlihat
================================= */

.post-quran-photo-section {
    position: relative;
    z-index: 1;
    min-height: auto;
    padding: clamp(34px, 5vh, 56px) 0 clamp(18px, 3vh, 30px);
    display: grid;
    align-items: start;
    overflow: visible;
    isolation: auto;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.post-quran-photo-section::before,
.post-quran-photo-section::after {
    content: none !important;
    display: none !important;
}

.post-quran-photo-container {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
}

.post-quran-photo-frame {
    width: min(100%, 760px);
    margin: 0 auto;
    padding: clamp(8px, 1.4vw, 12px);
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 0;
    background: rgba(255, 255, 255, 0.18);
    box-shadow:
        0 42px 110px rgba(0, 0, 0, 0.52),
        0 22px 54px rgba(24, 18, 15, 0.42),
        0 8px 22px rgba(24, 18, 15, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    overflow: visible;

    opacity: 0;
    filter: blur(14px) drop-shadow(0 30px 58px rgba(0, 0, 0, 0.38));
    transform: translateX(-150px) scale(0.18);
    transform-origin: center center;
    transition:
        opacity 1.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.85s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.55s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 1.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform, filter;
}

.post-quran-photo-section.is-visible .post-quran-photo-frame {
    opacity: 1;
    filter: blur(0) drop-shadow(0 34px 64px rgba(0, 0, 0, 0.42));
    transform: translateX(0) scale(1);
    transition-delay: 0.24s;
}

.post-quran-photo-image {
    width: 100%;
    height: clamp(280px, 48vw, 480px);
    object-fit: cover;
    object-position: center center;
    border-radius: clamp(18px, 3vw, 30px);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.36),
        0 8px 22px rgba(24, 18, 15, 0.28);
}

@media (max-width: 767px) {
    .post-quran-photo-section {
        min-height: auto;
        padding: 34px 0 14px;
    }

    .post-quran-photo-frame {
        width: min(100%, 370px);
        padding: 8px;
        border-radius: 0;
        box-shadow:
            0 34px 84px rgba(0, 0, 0, 0.48),
            0 18px 42px rgba(24, 18, 15, 0.38),
            0 7px 18px rgba(24, 18, 15, 0.30),
            inset 0 1px 0 rgba(255, 255, 255, 0.26);
        transform: translateX(-112px) scale(0.18);
    }

    .post-quran-photo-section.is-visible .post-quran-photo-frame {
        transform: translateX(0) scale(1);
    }

    .post-quran-photo-image {
        height: clamp(240px, 78vw, 340px);
        border-radius: 18px;
    }
}

@media (max-width: 480px) {
    .post-quran-photo-section {
        padding: 28px 0 10px;
    }

    .post-quran-photo-frame {
        width: min(100%, 340px);
        border-radius: 22px;
    }

    .post-quran-photo-image {
        height: clamp(230px, 78vw, 310px);
        border-radius: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .post-quran-photo-frame {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}

/* =================================
   COUNTDOWN CARD SCROLL ANIMATION
   Empat kotak datang dari sudut masing-masing saat section terlihat
================================= */

.countdown-section .countdown-grid {
    overflow: visible;
}

.countdown-section .countdown-card {
    opacity: 0;
    transform-origin: center center;
    will-change: opacity, transform, filter;
    filter: blur(12px);
    animation: none;
    transition: none !important;
}

.countdown-section .countdown-card:nth-child(1) {
    transform: translate3d(-130px, -130px, 0) scale(0.16);
}

.countdown-section .countdown-card:nth-child(2) {
    transform: translate3d(130px, -130px, 0) scale(0.16);
}

.countdown-section .countdown-card:nth-child(3) {
    transform: translate3d(-130px, 130px, 0) scale(0.16);
}

.countdown-section .countdown-card:nth-child(4) {
    transform: translate3d(130px, 130px, 0) scale(0.16);
}

.countdown-section.is-visible .countdown-card:nth-child(1) {
    animation: countdownCardFromTopLeft 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

.countdown-section.is-visible .countdown-card:nth-child(2) {
    animation: countdownCardFromTopRight 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.countdown-section.is-visible .countdown-card:nth-child(3) {
    animation: countdownCardFromBottomLeft 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both;
}

.countdown-section.is-visible .countdown-card:nth-child(4) {
    animation: countdownCardFromBottomRight 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.66s both;
}

.countdown-section .countdown-card span {
    will-change: opacity, transform;
}

.countdown-section.is-visible .countdown-card span {
    animation: countdownTextPop 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.countdown-section.is-visible .countdown-card:nth-child(1) span {
    animation-delay: 0.54s;
}

.countdown-section.is-visible .countdown-card:nth-child(2) span {
    animation-delay: 0.70s;
}

.countdown-section.is-visible .countdown-card:nth-child(3) span {
    animation-delay: 0.86s;
}

.countdown-section.is-visible .countdown-card:nth-child(4) span {
    animation-delay: 1.02s;
}

@keyframes countdownCardFromTopLeft {
    0% {
        opacity: 0;
        transform: translate3d(-130px, -130px, 0) scale(0.16);
        filter: blur(12px);
    }

    64% {
        opacity: 1;
        transform: translate3d(8px, 8px, 0) scale(1.04);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes countdownCardFromTopRight {
    0% {
        opacity: 0;
        transform: translate3d(130px, -130px, 0) scale(0.16);
        filter: blur(12px);
    }

    64% {
        opacity: 1;
        transform: translate3d(-8px, 8px, 0) scale(1.04);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes countdownCardFromBottomLeft {
    0% {
        opacity: 0;
        transform: translate3d(-130px, 130px, 0) scale(0.16);
        filter: blur(12px);
    }

    64% {
        opacity: 1;
        transform: translate3d(8px, -8px, 0) scale(1.04);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes countdownCardFromBottomRight {
    0% {
        opacity: 0;
        transform: translate3d(130px, 130px, 0) scale(0.16);
        filter: blur(12px);
    }

    64% {
        opacity: 1;
        transform: translate3d(-8px, -8px, 0) scale(1.04);
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@keyframes countdownTextPop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.86);
    }

    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.04);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 767px) {
    .countdown-section .countdown-card:nth-child(1) {
        transform: translate3d(-82px, -82px, 0) scale(0.18);
    }

    .countdown-section .countdown-card:nth-child(2) {
        transform: translate3d(82px, -82px, 0) scale(0.18);
    }

    .countdown-section .countdown-card:nth-child(3) {
        transform: translate3d(-82px, 82px, 0) scale(0.18);
    }

    .countdown-section .countdown-card:nth-child(4) {
        transform: translate3d(82px, 82px, 0) scale(0.18);
    }

    .countdown-section.is-visible .countdown-card:nth-child(1) {
        animation-name: countdownCardMobileTopLeft;
    }

    .countdown-section.is-visible .countdown-card:nth-child(2) {
        animation-name: countdownCardMobileTopRight;
    }

    .countdown-section.is-visible .countdown-card:nth-child(3) {
        animation-name: countdownCardMobileBottomLeft;
    }

    .countdown-section.is-visible .countdown-card:nth-child(4) {
        animation-name: countdownCardMobileBottomRight;
    }
}

@keyframes countdownCardMobileTopLeft {
    0% { opacity: 0; transform: translate3d(-82px, -82px, 0) scale(0.18); filter: blur(10px); }
    64% { opacity: 1; transform: translate3d(5px, 5px, 0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes countdownCardMobileTopRight {
    0% { opacity: 0; transform: translate3d(82px, -82px, 0) scale(0.18); filter: blur(10px); }
    64% { opacity: 1; transform: translate3d(-5px, 5px, 0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes countdownCardMobileBottomLeft {
    0% { opacity: 0; transform: translate3d(-82px, 82px, 0) scale(0.18); filter: blur(10px); }
    64% { opacity: 1; transform: translate3d(5px, -5px, 0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@keyframes countdownCardMobileBottomRight {
    0% { opacity: 0; transform: translate3d(82px, 82px, 0) scale(0.18); filter: blur(10px); }
    64% { opacity: 1; transform: translate3d(-5px, -5px, 0) scale(1.04); filter: blur(0); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .countdown-section .countdown-card,
    .countdown-section .countdown-card span {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }
}


/* =================================
   FINAL RESPONSIVE HERO POSITION
   Hero-kicker mengikuti posisi nama + waktu
   Mobile kiri atas, tablet/desktop kanan atas
================================= */

.hero-section {
    /* Nama + waktu + hero-kicker: default laptop/desktop */
    --hero-name-top: clamp(86px, 11vh, 122px);
    --hero-name-move-x: clamp(260px, 25vw, 430px);
    --hero-name-move-y: clamp(14px, 2.2vh, 28px);

    --hero-name-font-size: clamp(3.2rem, 5.8vw, 5.65rem);
    --hero-date-font-size: clamp(0.92rem, 1.12vw, 1.08rem);
    --hero-kicker-font-size: clamp(0.98rem, 1.35vw, 1.22rem);
}

.hero-section .hero-content-stair {
    padding-top: var(--hero-name-top) !important;
}

.hero-section .hero-content-stair > .hero-kicker,
.hero-section .hero-content-stair .hero-kicker,
.hero-section .hero-title,
.hero-section .hero-title-stair,
.hero-section .hero-date-label,
.hero-section .hero-date-text {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: calc(100vw - 48px) !important;
    position: relative !important;
    translate: var(--hero-name-move-x) var(--hero-name-move-y) !important;
    text-align: center !important;
}

.hero-section .hero-content-stair > .hero-kicker,
.hero-section .hero-content-stair .hero-kicker {
    width: max-content !important;
    margin-top: 0 !important;
    margin-bottom: clamp(10px, 1.6vh, 16px) !important;
    padding: 8px 18px 9px !important;
    border-radius: 999px !important;

    /* Warna dikembalikan ke style sebelumnya, bukan putih */
    background: rgba(255, 255, 255, 0.52) !important;
    color: var(--primary-dark) !important;
    -webkit-text-fill-color: var(--primary-dark) !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255,255,255,0.35) !important;

    box-shadow:
        0 10px 24px rgba(78, 52, 37, 0.08) !important;

    font-size: var(--hero-kicker-font-size) !important;
    font-weight: 800 !important;
    letter-spacing: 0.045em !important;
    line-height: 1.2 !important;
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.18) !important;
    z-index: 30 !important;
    font-family: "Playfair Display", serif !important;
    font-style: italic !important;
    text-transform: none !important;
}

.hero-section .hero-title,
.hero-section .hero-title-stair {
    width: max-content !important;
    font-size: var(--hero-name-font-size) !important;
    line-height: 0.68 !important;
}

.hero-title-line-2 {
    margin-top: -10px;
}

.hero-title-line-3 {
    margin-top: -18px;
}

.hero-section .hero-title-line {
    width: max-content !important;
}

.hero-section .hero-date-label,
.hero-section .hero-date-text {
    width: max-content !important;
    margin-top: clamp(20px, 2.2vh, 30px) !important;

    font-family: "Playfair Display", serif !important;
    font-style: italic;
    font-weight: 700 !important;

    font-size: var(--hero-date-font-size) !important;
    line-height: 1.35 !important;

    letter-spacing: 0.03em !important;
    text-transform: none !important;

    text-align: center !important;
}

/* Tablet landscape dan tablet kecil, 768 sampai 1199 */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero-section {
        --hero-name-top: clamp(96px, 14vh, 126px);
        --hero-name-move-x: clamp(150px, 23vw, 250px);
        --hero-name-move-y: clamp(20px, 4vh, 38px);
        --hero-name-font-size: clamp(2.85rem, 7vw, 4.35rem);
        --hero-date-font-size: clamp(0.84rem, 1.55vw, 0.98rem);
        --hero-kicker-font-size: clamp(0.92rem, 1.75vw, 1.08rem);
    }

    .hero-section .hero-title,
    .hero-section .hero-title-stair {
        row-gap: clamp(4px, 0.8vh, 10px) !important;
    }
}

/* Tablet yang sangat pendek, seperti 768x666 / 1024x666 */
@media (min-width: 768px) and (max-width: 1199px) and (max-height: 720px) {
    .hero-section {
        --hero-name-top: 92px;
        --hero-name-move-y: 18px;
        --hero-name-font-size: clamp(2.65rem, 6.4vw, 3.95rem);
    }

    .hero-section .hero-quran-card {
        margin-bottom: clamp(58px, 8vh, 86px) !important;
    }
}

/* Laptop rendah */
@media (min-width: 1200px) and (max-height: 760px) {
    .hero-section {
        --hero-name-top: 92px;
        --hero-name-move-y: 10px;
        --hero-name-font-size: clamp(3.1rem, 5.1vw, 5rem);
    }

    .hero-section .hero-quran-card {
        margin-bottom: clamp(64px, 9vh, 98px) !important;
    }
}

/* Mobile tetap kiri atas */
@media (max-width: 767px) {
    .hero-section {
        --hero-name-top: clamp(84px, 12vh, 102px);
        --hero-name-move-x: 0px;
        --hero-name-move-y: 0px;
        --hero-name-font-size: clamp(2.55rem, 12vw, 3.6rem);
        --hero-date-font-size: clamp(0.78rem, 3.3vw, 0.92rem);
        --hero-kicker-font-size: clamp(0.86rem, 3.4vw, 1rem);
    }

    .hero-section .hero-content-stair > .hero-kicker,
    .hero-section .hero-content-stair .hero-kicker,
    .hero-section .hero-title,
    .hero-section .hero-title-stair,
    .hero-section .hero-date-label,
    .hero-section .hero-date-text {
        align-self: flex-start !important;
        margin-left: var(--hero-name-left) !important;
        margin-right: 0 !important;
        translate: 0 0 !important;
        text-align: left !important;
        max-width: calc(100vw - (var(--hero-name-left) * 2)) !important;
    }

    .hero-section .hero-content-stair > .hero-kicker,
    .hero-section .hero-content-stair .hero-kicker {
        margin-bottom: 12px !important;
        padding: 7px 14px !important;
    }

    .hero-section .hero-title,
    .hero-section .hero-title-stair {
        width: max-content !important;
        row-gap: 0 !important;
    }

    .hero-section .hero-date-label,
    .hero-section .hero-date-text {
        width: max-content !important;
        margin-top: 16px !important;
    }
}

/* =================================
   FINAL HERO KICKER LIFT ONLY
   Naikkan hanya teks "Undangan Pernikahan"
   Nama mempelai dan waktu tetap di posisi sebelumnya
================================= */

.hero-section {
    --hero-kicker-lift-y: -25px;
}

.hero-section .hero-content-stair > .hero-kicker,
.hero-section .hero-content-stair .hero-kicker {
    translate: var(--hero-name-move-x) calc(var(--hero-name-move-y) + var(--hero-kicker-lift-y)) !important;
}

@media (max-width: 767px) {
    .hero-section {
        --hero-kicker-lift-y: -10px;
    }

    .hero-section .hero-content-stair > .hero-kicker,
    .hero-section .hero-content-stair .hero-kicker {
        translate: 0 var(--hero-kicker-lift-y) !important;
    }
}


@media (max-width: 767px) {

    .couple-reveal-photo,
    .couple-reveal-detail {
        opacity: 0;
        transform: translateY(60px);
        transition:
            opacity .8s ease,
            transform .8s ease;
    }

    .couple-reveal-photo.is-visible,
    .couple-reveal-detail.is-visible {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =================================
   STORY CARD = COUPLE STYLE REVEAL
================================= */

.story-card {
    opacity: 1;
    filter: none;
    transform: none;
}

/* =================================
   FINAL COUPLE SEQUENCE REVEAL MOBILE
================================= */
@media (max-width:767px){
.couple-photo-card,.couple-detail-card{
opacity:0;
filter:blur(14px);
transform:translateX(80px) scale(.85);
transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),filter 1.2s cubic-bezier(.16,1,.3,1);
}
.couple-photo-card.is-visible,.couple-detail-card.is-visible{
opacity:1;
filter:blur(0);
transform:translateX(0) scale(1);
}
}

/* =================================
   STORY CARD REVEAL
================================= */

.story-card {
    opacity: 0;
    filter: blur(14px);
    transform: translateX(80px) scale(0.85);

    transition:
        opacity 1.2s cubic-bezier(0.16,1,0.3,1),
        transform 1.2s cubic-bezier(0.16,1,0.3,1),
        filter 1.2s cubic-bezier(0.16,1,0.3,1);
}

.story-card.is-visible {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0) scale(1);
}

/* =================================
   COVER NAME MOBILE
================================= */

@media (max-width: 767px) {

    .cover-couple-name {
        font-size: clamp(5.5rem, 20vw, 8rem);
        line-height: 0.82;
    }

}

@media (max-width: 480px) {

    .cover-couple-name {
        font-size: clamp(6rem, 22vw, 8.5rem);
        line-height: 0.8;
    }

}

/* =================================
   HERO NAME SIZE
================================= */

.hero-title-stair {
    line-height: 0.85;
}

.hero-title-line {
    font-size: clamp(4rem, 10vw, 7rem);
}

@media (max-width: 767px) {

    .hero-title-line {
        font-size: clamp(5rem, 18vw, 7rem);
    }

}

@media (max-width: 480px) {

    .hero-title-line {
        font-size: clamp(5.5rem, 20vw, 7.5rem);
    }

}

.hero-section .hero-quran-card {
    margin-top: 85px !important;
}

.couple-info-title,
.countdown-title,
.story-title,
.event-title,
.gallery-title,
.location-title,
.rsvp-title,
.wishes-title {
    font-family: "Playfair Display", serif !important;
    font-style: normal !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

/* =================================
   FOOTER TYPOGRAPHY
================================= */

/* .footer-section .footer-title {
    font-family: "Amsterdam Signature", cursive !important;
    font-size: clamp(2.8rem, 6vw, 4.2rem) !important;
    font-weight: normal !important;
    line-height: 0.9 !important;
    color: maroon;
    font-size: 120px !important;
}     */

/* .footer-section .footer-text {
    font-family: "Amsterdam Signature", cursive !important;
    font-size: clamp(2.8rem, 6vw, 4.2rem) !important;
    font-weight: normal !important;
    line-height: 0.9 !important;
} */

/* ==================================
  DETAIL ACARA
=====================================*/
.event-grid {
    display: flex !important;
    justify-content: center;
}

.event-card-full {
    width: min(900px, 100%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    padding: 36px;
    text-align: center;
}

.event-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.event-divider {
    width: 1px;
    height: 180px;
    background: rgba(255,255,255,0.25);
}

.event-card-full .event-card-label,
.event-card-full .event-card-name,
.event-card-full .event-card-date,
.event-card-full .event-card-time,
.event-card-full .event-card-venue,
.event-card-full .event-card-address {
    text-align: left !important;
    width: 100%;
}

@media (max-width: 767px) {

    .event-card-full {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px;
    }

    .event-divider {
        width: 100%;
        height: 1px;
    }
}


/*============================================
   ATUR FONT SIZE MEMPELAI DI SANG PENGANTIN 
============================================= */
.couple-detail-name{
    font-size: 72px;
}

/* =================================
   LOCATION ICON BUTTON
================================= */

.location-card-button {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;

    width: auto !important;
    min-height: auto !important;
    padding: 0 !important;

    color: #8d6a53 !important;
}

.location-card-button svg {
    width: 30px;
    height: 30px;

    stroke: #8d6a53 !important;
    color: #8d6a53 !important;
}

.location-card-button:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: translateY(-2px);
}

/* Tombol arah di tengah */
.location-card-button {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100% !important;
    margin-top: 20px !important;
    text-align: center !important;

    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Ikon pesawat putih */
.location-card-button svg {
    width: 34px !important;
    height: 34px !important;

    stroke: #ffffff !important;
    color: #ffffff !important;
    fill: none !important;
}

/* Hover */
.location-card-button:hover svg {
    transform: translateY(-2px);
}

/* =================================
   REMOVE COUPLE CARD FRAME
================================= */

.couple-photo-card,
.couple-detail-card,
.couple-photo-stack,
.couple-detail-stack {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.couple-photo-card::before,
.couple-photo-card::after,
.couple-detail-card::before,
.couple-detail-card::after,
.couple-photo-stack::before,
.couple-photo-stack::after,
.couple-detail-stack::before,
.couple-detail-stack::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* Hapus bayangan foto mempelai */

.couple-photo-image,
.couple-photo-card img {
    box-shadow: none !important;
    filter: none !important;
}

/* Hapus bayangan card foto */

.couple-photo-card {
    box-shadow: none !important;
}

/* =================================
   REMOVE STORY FRAME
================================= */

.story-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.story-card::before,
.story-card::after {
    display: none !important;
    content: none !important;
}

/* =================================
   REMOVE EVENT CARD FRAME
================================= */

.event-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.event-card::before,
.event-card::after {
    content: none !important;
    display: none !important;
}

/* =================================
   REMOVE LOCATION CARD FRAME
================================= */

.location-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.location-card::before,
.location-card::after {
    content: none !important;
    display: none !important;
}

/* ===============
   LURUSIN FOTO
=================*/
.couple-photo-card,
.couple-photo-card-bride,
.couple-photo-card-groom,
.couple-photo-image {
    transform: none !important;
    rotate: 0deg !important;
}

/*==============================
 Hilangkan frame foto pembuka 
================================*/

.post-quran-photo-frame {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.post-quran-photo-frame::before,
.post-quran-photo-frame::after {
    content: none !important;
    display: none !important;
}

.post-quran-photo-image {
    box-shadow: none !important;
    filter: none !important;
}

/* Foto pembuka jadi kotak */

.post-quran-photo-frame,
.post-quran-photo-image {
    border-radius: 0 !important;
}

.couple-photo-image{
    border-radius: 0 !important;
}

.couple-detail-name{
    align-items: center !important;
    text-align: center !important;
}
.couple-detail-parent{
    align-items: center !important;
    text-align: center !important;
}

.hero-section .hero-content-stair .hero-kicker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    font-size: 18px !important;
    font-family: "Playfair Display", serif !important;
    font-style: normal !important;
}

.couple-photo-caption {
    display: block !important;

    margin-top: 18px;
    margin-bottom: 12px;

    text-align: center;

    font-family: "Playfair Display", serif !important;
    font-style: normal !important;
    font-weight: 700 !important;

    font-size: clamp(1.6rem, 3vw, 2.2rem);

    color: #ffffff;
}

.couple-detail-parent {
    text-align: center !important;
}

.couple-instagram-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.couple-instagram-username {
    font-size: 0.95rem;
    color: #ffffff;
    font-weight: 500;
}

.couple-instagram-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin: 16px auto 0 !important;

    background: transparent !important;

    border: 1px solid rgba(255,255,255,0.25);

    border-radius: 999px;

    padding: 10px 18px;

    box-shadow: none !important;
}

.couple-instagram-button svg {
    stroke: #ffffff;
}

.couple-instagram-username {
    color: #ffffff;
}

.event-card-full {
    text-align: center !important;
}

.event-block {
    display: flex;
    flex-direction: column;
    align-items: center !important;
    text-align: center !important;
}

.event-card-full .event-card-name,
.event-card-full .event-card-date,
.event-card-full .event-card-time,
.event-card-full .event-card-venue,
.event-card-full .event-card-address {
    width: 100%;
    text-align: center !important;
}

.event-card-name{
    font-size: 30px;
}

.footer-section .footer-title {
    font-family: "Amsterdam Signature", cursive !important;
    font-size: clamp(2.8rem, 6vw, 4.2rem) !important;
    font-weight: normal !important;
    line-height: 0.9 !important;
    color: maroon;
    font-size: 120px !important;
}

.footer-description{
    color: white;
}

/* =======================
  GIFT
==========================*/
.gift-section{
    text-align:center;
    padding:100px 0;
}

.gift-title{
    font-family:"Playfair Display",serif;
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom:20px;
}

.paragraf-gift{
    color: white;
}

.gift-title-word-wedding{
    color: black;
}

.gift-title-word-gift{
    color: white;
}

.gift-open-button{
    padding:14px 32px;
    border:none;
    border-radius:999px;
    background:maroon;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.gift-modal{
    position:fixed;
    inset:0;
    z-index:9999;
    display:none;
    background:rgba(0,0,0,.5);
    backdrop-filter:blur(4px);
}

.gift-modal.is-open{
    display:flex;
    justify-content:center;
    align-items:center;
}

.gift-modal-content{
    width:min(95%,550px);
    max-height:85vh;
    overflow:auto;
    background:#fff;
    border-radius:28px;
    padding:40px;
    position:relative;
}

.gift-close{
    position:absolute;
    top:15px;
    right:20px;
    background:none;
    font-size:30px;
}

.gift-card{
    border:1px solid #ddd;
    border-radius:20px;
    padding:20px;
    margin-bottom:20px;
    text-align:center;
}

.gift-qr{
    width:150px;
    margin:15px auto;
}

.gift-number{
    font-size:24px;
    letter-spacing:3px;
}

.gift-copy-button{
    margin-top:15px;
    padding:10px 20px;
    border:none;
    border-radius:999px;
    background:maroon;
    color:white;
    cursor:pointer;
}

/* 
 ICON COPY
*/
.gift-account-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    margin-top:20px;
}

.gift-copy-button{
    width:36px;
    height:36px;

    border:none;
    background:none;

    cursor:pointer;

    color:#7d5c49;

    padding:0;
}

.gift-copy-button svg{
    width:20px;
    height:20px;
}

.gift-number{
    font-size:24px;
    letter-spacing:4px;
}

/* 
TOMBOL SECTION GIFT
*/
.gift-actions{
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}

.gift-confirm-button{
    padding:14px 24px;

    border-radius:999px;

    border:1px solid var(--primary);

    background:transparent;

    color:var(--primary);

    cursor:pointer;
}

.gift-confirm-modal{
    display:none;
}

.gift-confirm-modal.is-open{
    display:flex;
}


/* +============================= */

.gift-confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    justify-content: center;
    align-items: center;

    padding: 20px;

    background: rgba(0,0,0,.55);
    backdrop-filter: blur(6px);
}

.gift-confirm-modal.is-open {
    display: flex;
}

.gift-confirm-content {
    position: relative;

    width: min(100%, 560px);

    background: #fff;

    border-radius: 24px;

    padding: 36px 28px;

    max-height: 90vh;
    overflow-y: auto;
}

.gift-close {
    position: absolute;
    top: 14px;
    right: 18px;

    border: none;
    background: transparent;

    font-size: 28px;
    cursor: pointer;

    color: #7d5c49;
}

.gift-confirm-title {
    margin: 0 0 12px;

    text-align: center;

    font-family: "Playfair Display", serif;
    font-size: 2rem;

    color: #7d5c49;
}

.gift-confirm-description {
    margin: 0 0 24px;

    text-align: center;
    color: #666;
}

.gift-confirm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.gift-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gift-form-group input,
.gift-form-group textarea {
    width: 100%;

    padding: 12px 14px;

    border: 1px solid #ddd;
    border-radius: 12px;

    font-size: 14px;
}

.gift-radio-group {
    display: flex;
    gap: 20px;
}

.gift-submit-button {
    margin-top: 10px;

    height: 48px;

    border: none;
    border-radius: 999px;

    background: maroon;
    color: #fff;

    font-weight: 600;
    cursor: pointer;
}

.gift-confirm-button {
    background: #ffffff !important;
    color: maroon !important;

    border: 1px solid maroon !important;

    box-shadow: none !important;

    font-weight: 700;
}

.gift-account-row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.gift-copy-button{
    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none !important;
    background:transparent !important;
    box-shadow:none !important;

    color:#7d5c49;
    cursor:pointer;
    padding:0;
}

.gift-copy-button svg{
    width:20px;
    height:20px;
}

.gift-copy-button:hover{
    transform:scale(1.1);
}

.cover-screen {
    z-index: 999999 !important;
}

body:not(.invitation-opened) main {
    pointer-events: none !important;
}

body.invitation-opened main {
    pointer-events: auto !important;
}

/* ==================================================
   FINAL OVERRIDE - WEDDING GIFT
   Tempel PALING BAWAH FILE CSS
================================================== */

/* Cover harus selalu paling atas */
.cover-screen{
    z-index:999999 !important;
}

/* Saat cover belum dibuka */
body:not(.invitation-opened) main{
    pointer-events:none !important;
}

body.invitation-opened main{
    pointer-events:auto !important;
}

/* ==================================================
   GIFT MODAL
================================================== */

.gift-modal,
.gift-confirm-modal{
    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    z-index:999;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .45s cubic-bezier(.22,1,.36,1),
        visibility .45s cubic-bezier(.22,1,.36,1);
}

.gift-modal.is-open,
.gift-confirm-modal.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* ==================================================
   MODAL ANIMATION
================================================== */

.gift-modal-content,
.gift-confirm-content{
    position:relative;

    width:min(100%,560px);
    max-height:90vh;

    overflow-y:auto;

    background:#fff;

    border-radius:28px;

    padding:36px 28px;

    transform:translateY(32px) scale(.92);
    opacity:0;

    transition:
        transform .55s cubic-bezier(.22,1,.36,1),
        opacity .55s cubic-bezier(.22,1,.36,1);

    box-shadow:
        0 30px 80px rgba(0,0,0,.22),
        0 10px 25px rgba(0,0,0,.12);
}

.gift-modal.is-open .gift-modal-content,
.gift-confirm-modal.is-open .gift-confirm-content{
    transform:translateY(0) scale(1);
    opacity:1;
}

/* ==================================================
   CLOSE BUTTON
================================================== */

.gift-close{
    position:absolute;
    top:14px;
    right:18px;

    width:40px;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

    background:none !important;
    border:none !important;
    box-shadow:none !important;

    color:maroon;

    font-size:28px;
    line-height:1;

    cursor:pointer;
}

/* ==================================================
   TITLE
================================================== */

.gift-modal-title,
.gift-confirm-title{
    text-align:center;

    font-family:"Playfair Display", serif !important;
    font-style:normal !important;

    color:maroon;

    margin:0 0 12px;
}

.gift-modal-description,
.gift-confirm-description{
    text-align:center;
    margin-bottom:24px;
}

/* ==================================================
   ACCOUNT NUMBER + COPY ICON
================================================== */

.gift-account-row{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;

    margin-top:12px;
}

.gift-number{
    margin:0;
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
}

.gift-copy-button{
    width:38px;
    height:38px;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:0 !important;

    background:transparent !important;
    border:none !important;
    box-shadow:none !important;

    color:maroon !important;

    cursor:pointer;

    transition:.25s ease;
}

.gift-copy-button:hover{
    transform:scale(1.12);
}

.gift-copy-button svg{
    width:20px;
    height:20px;
}

/* ==================================================
   SECTION BUTTON
================================================== */

.gift-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

.gift-open-button{
    background:maroon !important;
    color:#fff !important;
}

.gift-confirm-button{
    background:#fff !important;
    color:maroon !important;

    border:1px solid maroon !important;
    box-shadow:none !important;
}

/* ==================================================
   FORM
================================================== */

#giftConfirmationForm{
    display:grid;
    gap:14px;
}

#giftConfirmationForm input,
#giftConfirmationForm textarea{
    width:100%;

    padding:12px 14px;

    border:1px solid #ddd;
    border-radius:12px;
}

.gift-submit-button{
    background:maroon !important;
    color:#fff !important;

    border:none !important;

    min-height:48px;
    border-radius:999px;
}

/* ==================================================
   MOBILE
================================================== */

@media (max-width:767px){

    .gift-modal-content,
    .gift-confirm-content{
        padding:28px 20px;
        border-radius:22px;
    }

    .gift-actions{
        flex-direction:column;
    }

    .gift-open-button,
    .gift-confirm-button{
        width:100%;
    }
}

/* =================================
   MODAL OPEN ANIMATION PREMIUM
================================= */

.gift-modal,
.gift-confirm-modal{
    transition:
        opacity .65s cubic-bezier(.16,1,.3,1),
        visibility .65s cubic-bezier(.16,1,.3,1);
}

.gift-modal-content,
.gift-confirm-content{
    transform:
        translateY(60px)
        scale(.96);

    opacity:0;

    transition:
        transform .85s cubic-bezier(.16,1,.3,1),
        opacity .75s cubic-bezier(.16,1,.3,1),
        box-shadow .75s cubic-bezier(.16,1,.3,1);

    box-shadow:
        0 40px 120px rgba(0,0,0,.18),
        0 16px 40px rgba(0,0,0,.10);
}

.gift-modal.is-open .gift-modal-content,
.gift-confirm-modal.is-open .gift-confirm-content{
    transform:
        translateY(0)
        scale(1);

    opacity:1;
}

@keyframes modalLuxuryReveal{
    0%{
        opacity:0;
        transform:
            translateY(70px)
            scale(.94);
    }

    60%{
        opacity:1;
        transform:
            translateY(-4px)
            scale(1.01);
    }

    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

.gift-modal.is-open .gift-modal-content,
.gift-confirm-modal.is-open .gift-confirm-content{
    animation:
        modalLuxuryReveal
        .95s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.gift-modal,
.gift-confirm-modal{
    background:rgba(0,0,0,.48);

    backdrop-filter:blur(0);
    -webkit-backdrop-filter:blur(0);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        visibility .7s cubic-bezier(.16,1,.3,1),
        backdrop-filter .7s cubic-bezier(.16,1,.3,1);
}

.gift-modal.is-open,
.gift-confirm-modal.is-open{
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}

/* Backdrop lebih lambat */

.gift-modal,
.gift-confirm-modal{
    transition:
        opacity .9s cubic-bezier(.22,1,.36,1),
        visibility .9s cubic-bezier(.22,1,.36,1);
}

.gift-confirm-modal{
    overflow:hidden;
}

/* Content muncul lebih pelan */

.gift-modal-content,
.gift-confirm-content{
    transform: translateY(80px) scale(.94);
    opacity: 0;

    transition:
        transform 1.05s cubic-bezier(.16,1,.3,1),
        opacity .95s cubic-bezier(.16,1,.3,1);
}

/* Saat dibuka */

.gift-modal.is-open .gift-modal-content,
.gift-confirm-modal.is-open .gift-confirm-content{
    transform: translateY(0) scale(1);
    opacity: 1;
}

@keyframes giftModalReveal {
    0%{
        opacity:0;
        transform:translateY(90px) scale(.92);
    }

    55%{
        opacity:1;
        transform:translateY(-6px) scale(1.01);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

.gift-modal.is-open .gift-modal-content,
.gift-confirm-modal.is-open .gift-confirm-content{
    animation:
        giftModalReveal
        1.1s
        cubic-bezier(.16,1,.3,1)
        forwards;
}

.gift-confirm-content{
    max-height:90vh;

    overflow-y:auto;

    overscroll-behavior:contain;

    -webkit-overflow-scrolling:touch;
}

.gift-card{
    padding:20px 18px !important;
    margin-bottom:14px !important;
    min-height:unset !important;
    height:auto !important;
    border-radius:20px !important;
}

.gift-bank-row{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin-bottom:14px !important;
}

.gift-bank-icon{
    font-size:18px !important;
    line-height:1 !important;
}

.gift-bank-name{
    margin:0 !important;
    font-size:1rem !important;
    font-weight:700 !important;
}

.gift-account-row{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    margin-bottom:12px !important;
}

.gift-copy-button{
    width:auto !important;
    height:auto !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:none !important;
    box-shadow:none !important;
    color:maroon !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.gift-copy-button svg{
    width:16px !important;
    height:16px !important;
}

.gift-number{
    margin:0 !important;
    font-size:1rem !important;
    font-weight:700 !important;
    letter-spacing:1px !important;
}

.gift-holder{
    margin:0 !important;
    text-align:center !important;
    font-size:.9rem !important;
    font-weight:500 !important;
}

.gift-copy-button{
    width:20px !important;
    height:20px !important;

    padding:0 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    background:none !important;
    border:none !important;
    box-shadow:none !important;

    color:maroon !important;
    cursor:pointer;
}

.gift-copy-button svg{
    width:18px !important;
    height:18px !important;
    display:block;
}

.gift-copy-button:hover{
    transform:scale(1.08);
    opacity:.8;
}

.cover-guest-label{
    font-family: "Playfair Display", serif;
    font-size: 20px;
    color: black;
}

.cover-guest-name{
    font-family: "Playfair Display", serif;
    color: maroon;
}

/* =================================
   GIFT CONFIRMATION MODAL
================================= */

.gift-confirm-form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.gift-form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.gift-form-group label{
    font-size:.95rem;
    font-weight:600;
    color:#4d3b33;
}

.gift-form-group label span{
    color:#a00000;
}

.gift-form-group small{
    color:#888;
    font-size:.8rem;
    font-weight:400;
}

.gift-form-group input,
.gift-form-group select,
.gift-form-group textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid #d8d8d8;
    border-radius:14px;
    font-size:15px;
    background:#fff;
    transition:.25s;
}

.gift-form-group input:focus,
.gift-form-group select:focus,
.gift-form-group textarea:focus{
    outline:none;
    border-color:#8b0000;
    box-shadow:0 0 0 4px rgba(139,0,0,.08);

}

.gift-form-group textarea{
    resize:vertical;
    min-height:120px;
}

.gift-radio-group{

    display:flex;
    gap:28px;
    flex-wrap:wrap;

}

.gift-radio-group label{

    display:flex;
    align-items:center;
    gap:10px;

    cursor:pointer;

    font-weight:500;

}

.gift-radio-group input{

    width:18px;
    height:18px;

}

.gift-transfer-fields{

    display:flex;
    flex-direction:column;
    gap:18px;

}

.gift-physical-fields{

    display:none;

}

.gift-address-card{

    background:#fff7f5;

    border:1px solid rgba(139,0,0,.12);

    border-radius:16px;

    padding:20px;

}

.gift-address-card p{

    margin-bottom:16px;

    color:#555;

    line-height:1.7;

}

.gift-address-card strong{

    color:#333;

}

.gift-copy-address{

    margin-top:8px;

    background:#8b0000;

    color:#fff;

    border:none;

    border-radius:10px;

    padding:12px 18px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.gift-copy-address:hover{

    background:#700000;

}

.gift-form-group input[type=file]{

    padding:12px;

    background:#fafafa;

    cursor:pointer;

}

.swal2-container{
    z-index:20000 !important;
}

.cover-title{
    font-family: "Playfair Display", serif;
    font-size: 22px;
    color: black;
}