@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}



@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-50px) translateX(-50%);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateX(-50%);
    }
}

/* Animasi Pohon Melambai (Swaying) */
@keyframes sway {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(2deg);
    }

    /* Goyang sedikit ke kanan */
    100% {
        transform: rotate(0deg);
    }
}

/* Animasi Masuk Pohon Kanan 2 (Rotasi 346deg) */
@keyframes slideInTreeRight2 {
    from {
        opacity: 0;
        transform: translateX(100px) rotate(346deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(346deg);
    }
}

/* Animasi Masuk Pohon Kanan 3 (Rotasi -15deg) */
@keyframes slideInTreeRight3 {
    from {
        opacity: 0;
        transform: translateX(100px) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) rotate(-15deg);
    }
}

@keyframes slideInFlower3 {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animasi Sway (Goyang) tetap menggunakan variabel agar fleksibel */
@keyframes swayMirror {
    0% {
        transform: rotate(var(--rotasi-asal));
    }

    50% {
        transform: rotate(calc(var(--rotasi-asal) + 2deg));
    }

    100% {
        transform: rotate(var(--rotasi-asal));
    }
}

/* Mengaktifkan scroll halus untuk seluruh halaman */
html {
    scroll-behavior: smooth;
}

/* --- CUSTOM SCROLLBAR --- */
/* Ukuran scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

/* Bagian jalur (track) scrollbar */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Bagian batang (thumb) scrollbar */
::-webkit-scrollbar-thumb {
    background: #8da1b9;
    /* Warna biru sesuai Save The Date Anda */
    border-radius: 10px;
}

/* Batang scrollbar saat diarahkan kursor (hover) */
::-webkit-scrollbar-thumb:hover {
    background: #343638;
    /* Warna gelap sesuai tema card Anda */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', serif;
    margin: 0;
    padding: 0;
    color: #4a4a4a;
}

.wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* --- BAGIAN KIRI (FOTO PASANGAN) --- */
.left-section {
    flex: 1.4;
    /* Menggunakan gambar pegunungan salju sesuai tema */
    background: url('../images/blue-castle-4.webp') no-repeat center center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 60px;
    position: relative;
    overflow: hidden;
}

/* Overlay Biru Lembut (mengganti hitam agar sesuai tema winter) */
.left-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradasi dari biru tua transparan ke transparan total */
    background: linear-gradient(to top, rgba(44, 74, 94, 0.7) 0%, rgba(44, 74, 94, 0) 60%);
    z-index: 1;
}

.left-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
    /* Memberikan sedikit glow pada teks agar lebih premium */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.left-content h2 {
    font-family: 'Playfair Display', serif;
    /* Mengganti Cinzel ke Playfair */
    font-weight: 400;
    letter-spacing: 5px;
    font-size: 0.9rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    opacity: 0.9;
}

.bride-name-cursive {
    font-family: 'Great Vibes', cursive;
    font-size: 5rem;
    /* Sedikit lebih besar untuk dampak visual */
    margin: 5px 0;
    font-weight: 400;
    /* Warna putih bersih khas salju */
    color: #ffffff;
}

.wedding-date {
    font-family: 'Playfair Display', serif;
    letter-spacing: 4px;
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    display: inline-block;
    padding-top: 10px;
    margin-top: 10px;
}

/* Dekorasi Bunga Tambahan */
.left-decor {
    position: absolute;
    bottom: -20px;
    left: -30px;
    z-index: 3;
}

.left-flower {
    width: 250px;
    height: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.2));
    animation: swayLeft 6s ease-in-out infinite;
}

/* Animasi ayunan pelan untuk bunga */
@keyframes swayLeft {

    0%,
    100% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(3deg) scale(1.05);
    }
}

/* Responsive: Sembunyikan di layar HP jika perlu fokus pada konten kanan */
@media (max-width: 991px) {
    .left-section {
        display: none;
    }
}

/* --- BAGIAN KANAN (SAMPUL ELEGAN) --- */
.right-section {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: url('../images/blue-castle-4.webp') no-repeat center center;
    background-size: cover;
    scroll-behavior: smooth;
}

.section {
    min-height: 100vh;
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
}

@media (max-width: 1024px) {
    .left-section {
        display: none;
    }


}

/* first  */
/* Container Utama */
.first-screen {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #e0ebf3;
    /* Fallback color */
    color: #2c4a5e;
    text-align: center;
}

/* Background Kastil */
.bg-castle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/blue-castle-3.webp') no-repeat center center;
    background-size: cover;
    filter: brightness(1.1) contrast(0.9);
    z-index: 1;
    transform: scale(1.1);
    animation: zoomOut 2s ease-out forwards;
}

/* Animasi Awan Melayang */
.cloud {
    position: absolute;
    z-index: 2;
    opacity: 0.6;
    pointer-events: none;
    animation: floatCloud 20s linear infinite;
}

.cloud-1 {
    top: 15%;
    width: 250px;
    left: -150px;
}

.cloud-2 {
    top: 40%;
    width: 200px;
    right: -200px;
    animation-delay: -10s;
}

/* Teks Utama */
.content {
    position: relative;
    z-index: 3;
    padding-bottom: 50px;
}

.couple-names {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    padding: 2rem;

    /* Efek Putih Blur */
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);

    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 1.5s ease-out 0.5s forwards;
}

/* Label "The Wedding Of" */
.wedding-label {
    font-family: 'Playfair Display', serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    color: #2c4a5e;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1.5s ease-out 0.3s forwards;
}

/* Penyesuaian Couple Names agar tidak terlalu jauh dari label */
.couple-names {
    margin-top: 0;
    /* Style lainnya tetap sama seperti sebelumnya */
}

/* Label "Kepada Yth." */
.to-label {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 5px;
    color: #2c4a5e;
    opacity: 0.8;
}

/* Nama Tamu */
.guest-name {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #2c4a5e;
}

/* Memastikan Guest Box tetap rapi */
.guest-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Animasi FadeInUp sudah ada di kode sebelumnya, tetap gunakan itu */
.couple-names span {
    display: block;
}

.ampersand {
    font-size: 2rem;
    font-style: italic;
}

/* Container Guest Box */
.guest-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -10px;
    /* Menyesuaikan jarak dengan couple-names */
    opacity: 0;
    animation: fadeInUp 1.5s ease-out 1s forwards;
}

/* Gambar Shadow sebagai Background */
.box-shadow-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    /* Sesuaikan ukuran shadow agar melampaui batas tombol */
    height: auto;
    z-index: -1;
    /* Pastikan berada di belakang teks */
    opacity: 0.8;
    pointer-events: none;
}

/* Wrapper untuk Teks agar tetap di atas shadow */
.guest-content {
    position: relative;
    z-index: 2;
}

.guest-content p {
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 500;
    color: #2c4a5e;
}

/* Tombol Open Tetap Sama */
.btn-open {
    padding: 12px 35px;
    background: #2c4a5e;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-open:hover {
    transform: scale(1.05);
    background: #3d637c;
}

/* Container Utama */
.foreground-flowers {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px;
    /* Area untuk bunga */
    z-index: 4;
    pointer-events: none;
    /* Agar tidak menghalangi klik tombol */
}

.flower {
    position: absolute;
    bottom: -20px;
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* --- Pengaturan Posisi Bunga Kiri --- */
.fl-1 {
    width: 180px;
    left: -92px;
    top: 64px;
    z-index: 10;
    animation: slideInLeft 1.8s ease-out 0.2s forwards, swayLeft 4s ease-in-out infinite 2s;
}

.fl-2 {
    width: 140px;
    left: 100px;
    z-index: 8;
    animation: slideInLeft 1.8s ease-out 0.4s forwards, swayLeft 5s ease-in-out infinite 2.2s;
}

.fl-3 {
    width: 150px;
    left: 100px;
    z-index: 6;
    animation: slideInLeft 1.8s ease-out 0.6s forwards, swayLeft 6s ease-in-out infinite 2.4s;
}

/* --- Pengaturan Posisi Bunga Kanan --- */
.fr-1 {
    width: 150px;
    right: 100px;
    z-index: 6;
    animation: slideInRight 1.8s ease-out 0.6s forwards, swayRight 6s ease-in-out infinite 2.4s;
}

.fr-2 {
    width: 180px;
    right: 42px;
    top: 103px;
    z-index: 8;
    animation: slideInRight 1.8s ease-out 0.4s forwards, swayRight 5s ease-in-out infinite 2.2s;
}

.fr-3 {
    width: 180px;
    right: -109px;
    z-index: 10;
    top: 53px;
    animation: slideInRight 1.8s ease-out 0.2s forwards, swayRight 4s ease-in-out infinite 2s;
}

/* --- Keyframes (Tetap Sama Namun Disempurnakan) --- */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100px) translateY(50px) rotate(-15deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(100px) translateY(50px) rotate(15deg);
    }

    to {
        opacity: 1;
        transform: translateX(0) translateY(0) rotate(0deg);
    }
}

@keyframes swayLeft {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(3deg) translateY(-5px);
    }
}

@keyframes swayRight {

    0%,
    100% {
        transform: rotate(0deg) translateY(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-5px);
    }
}

/* Animasi lainnya tetap seperti sebelumnya */
@keyframes zoomOut {
    from {
        transform: scale(1.2);
    }

    to {
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



@keyframes floatCloud {
    from {
        left: -200px;
    }

    to {
        left: 100%;
    }
}

/* opening  */
.opening-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f0f4f8;
    overflow: hidden;
    padding: 40px 20px;
}

/* Background dengan Gambar Gunung Salju */
.opening-bg-snow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/blue-castle-4.webp') no-repeat center center;
    background-size: cover;
    z-index: 1;
}

.opening-content {
    position: relative;
    z-index: 5;
    text-align: center;
    color: #2c4a5e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    /* Ruang agar shadow tidak terpotong */
}

/* Shadow Styling */
.opening-shadow-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    /* Sedikit lebih lebar dari teks */
    max-width: 500px;
    height: auto;
    z-index: -1;
    /* Di belakang teks */
    opacity: 0.9;
    pointer-events: none;
    /* Animasi masuk agar smooth saat reveal */
    transition: opacity 1.5s ease-out;
}

/* Pastikan wrapper teks ada di atas z-index shadow */
.text-wrapper {
    position: relative;
    z-index: 2;
}

/* Typography & Layout Tetap */
.opening-names {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-style: italic;
    margin: 1rem 0 1.5rem 0;
}

.opening-date-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

/* Atur Shadow agar ikut muncul saat section aktif */
.opening-section:not(.reveal) .opening-shadow-img {
    opacity: 0;
}

.leaf-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 12;
    /* Di atas teks, di bawah gate */
    overflow: hidden;
}

.leaf {
    position: absolute;
    top: -50px;
    width: 20px;
    height: 20px;
    background: url('../images/salju.webp') no-repeat center center;
    /* Mengambil aset bunga/daun kecil Anda */
    background-size: contain;
    opacity: 0.6;
    animation: fall linear infinite, swayLeaf ease-in-out infinite;
}

@keyframes fall {
    0% {
        top: -50px;
        opacity: 0;
    }

    10% {
        opacity: 0.6;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        top: 110vh;
        opacity: 0;
    }
}

@keyframes swayLeaf {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    50% {
        transform: translateX(50px) rotate(45deg);
    }

    100% {
        transform: translateX(0) rotate(90deg);
    }
}

/* Logo Styling */
.wedding-logo {
    font-family: 'Playfair Display', serif;
    font-size: 4rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.wedding-logo::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    border: 2px solid #2c4a5e;
    transform: rotate(45deg);
    opacity: 0.3;
}

/* Typography */
.opening-label {
    font-size: 0.9rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.opening-names {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    font-style: italic;
    margin-bottom: 1.5rem;
}

/* Tanggal Section */
.opening-date-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 1.5rem;
}

.opening-date-container .line {
    width: 40px;
    height: 1px;
    background: #2c4a5e;
}

.date-box {
    display: flex;
    flex-direction: column;
}

.date-box .day {
    font-size: 0.8rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.date-box .full-date {
    font-size: 1.2rem;
    font-weight: 600;
}

.hashtag {
    font-size: 0.9rem;
    letter-spacing: 2px;
    opacity: 0.7;
}

/* Bunga Frame Bawah */
.opening-flower-frame {
    position: absolute;
    bottom: -30px;
    /* width: 100%; */
    display: flex;
    flex-direction: row-reverse;
    gap: 142px;
    /* justify-content: space-between; */
    padding: 0 10px;
    z-index: 6;
}

.flower-side {
    width: 150px;
    height: auto;
}

/* Butterfly Animation */
.butterfly {
    position: absolute;
    font-size: 1.5rem;
    z-index: 4;
    animation: flutter 6s ease-in-out infinite;
}

.bf-1 {
    top: 25%;
    left: 15%;
    animation-delay: 0s;
}

.bf-2 {
    top: 60%;
    right: 15%;
    animation-delay: -3s;
}

@keyframes flutter {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(10px, -20px) rotate(10deg);
    }
}

/* Observer Reveal Animation Classes */
.reveal-item {
    opacity: 0;
    transition: all 1.2s ease-out;
}

.reveal-up {
    transform: translateY(30px);
}

.reveal-down {
    transform: translateY(-30px);
}

.opening-section.reveal .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Delay */
.opening-section.reveal .wedding-logo {
    transition-delay: 0.2s;
}

.opening-section.reveal .opening-label {
    transition-delay: 0.4s;
}

.opening-section.reveal .opening-names {
    transition-delay: 0.6s;
}

.opening-section.reveal .opening-date-container {
    transition-delay: 0.8s;
}

.opening-section.reveal .hashtag {
    transition-delay: 1s;
}

/* quotes  */
/* --- Quotes Section --- */
.quotes-section {
    position: relative;
    min-height: 80vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8ebef;
    /* Warna salju yang sangat muda */
    overflow: hidden;
    padding: 60px 25px;
}

.quotes-bg-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.q-flower {
    position: absolute;
    width: 200px;
    /* opacity: 0.3; */
    /* Dibuat transparan agar tidak mengganggu teks */
    /* filter: blur(2px); */
}

.q-flower-1 {
    top: -50px;
    left: -50px;
    transform: rotate(150deg);
}

.q-flower-2 {
    bottom: -50px;
    right: -50px;
    transform: rotate(318deg);
}

.quotes-content {
    position: relative;
    z-index: 5;
    max-width: 600px;
    width: 100%;
    text-align: center;
}

.quotes-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: auto;
    z-index: -1;
    opacity: 0.8;
    pointer-events: none;
}

.quotes-text-wrapper {
    padding: 20px;
}

.quotes-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #3d637c;
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.quotes-divider {
    width: 50px;
    height: 2px;
    background: #2c4a5e;
    margin: 0 auto 25px;
    opacity: 0.5;
}

.quotes-text {
    font-family: 'Montserrat', sans-serif;
    /* Gunakan font sans yang bersih */
    font-size: 1rem;
    line-height: 1.8;
    color: #2c4a5e;
    font-style: italic;
    margin-bottom: 20px;
}

.quotes-source {
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #3d637c;
}

/* --- Animasi On-Scroll (Sesuai Observer Kamu) --- */
.quotes-section .reveal-item {
    opacity: 0;
    transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal-up {
    transform: translateY(30px);
}

.reveal-down {
    transform: translateY(-30px);
}

/* Trigger saat class .reveal aktif dari IntersectionObserver */
.quotes-section.reveal .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.quotes-section.reveal .quotes-title {
    transition-delay: 0.2s;
}

.quotes-section.reveal .quotes-divider {
    transition-delay: 0.5s;
    width: 80px;
    transition: width 1s ease 0.5s, opacity 1s;
}

.quotes-section.reveal .quotes-text {
    transition-delay: 0.8s;
}

.quotes-section.reveal .quotes-source {
    transition-delay: 1.1s;
}

/* --- Wrapper Foto --- */
.quotes-image-wrapper {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    position: relative;
}

.photo-frame {
    width: 200px;
    /* Ukuran bisa disesuaikan */
    height: 280px;
    padding: 10px;
    background: white;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border-radius: 100px 100px 10px 10px;
    /* Bentuk kubah/arch yang elegan */
    overflow: hidden;
    border: 1px solid rgba(44, 74, 94, 0.1);
}

.quotes-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 90px 90px 5px 5px;
    filter: sepia(0.2) contrast(1.1);
    /* Memberi kesan hangat sedikit */
}

/* --- Penyesuaian Spacing --- */
.quotes-title {
    margin-top: 10px;
}

/* --- Penyesuaian Animasi --- */
.quotes-section.reveal .quotes-image-wrapper {
    transition-delay: 0.2s;
}

.quotes-section.reveal .quotes-title {
    transition-delay: 0.5s;
}

.quotes-section.reveal .quotes-divider {
    transition-delay: 0.7s;
}

.quotes-section.reveal .quotes-text {
    transition-delay: 1s;
}

/* couple section  */

.couple-section {
    position: relative;
    padding: 80px 20px;
    /* background: #ffffff; */
    text-align: center;
    overflow: hidden;
}

.couple-bg-castle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/blue-castle.webp') no-repeat center top;
    background-size: cover;
    opacity: 0.05;
    z-index: 1;
}

.couple-content {
    position: relative;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 60px 30px;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(212, 163, 115, 0.2);
    /* max-width: 500px; */
    margin: 0 auto;
    color: #2c4a5e;
}

/* Typography Sesuai Gambar */
.wedding-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #b5905d;
    /* Warna emas gelap sesuai referensi */
    letter-spacing: 3px;
    margin: 20px 0;
}

.opening-text {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.8;
}

/* Photo Styling */
.photo-wrapper {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 20px;
}

.photo-frame-circle {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 2;
    border: 4px solid white;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 180%;
    opacity: 0.7;
    z-index: 1;
}

.frame-decor {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    z-index: 3;
    animation: sway 4s ease-in-out infinite;
}

/* Couple Info */
.name {
    font-family: 'Playfair Display', serif;
    font-size: 2.2rem;
    margin-bottom: 5px;
    color: #3d637c;
}

.parent-info {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 2px;
}

.parents {
    font-weight: 600;
    margin-bottom: 15px;
}

.ig-link {
    display: inline-block;
    padding: 5px 15px;
    border: 1px solid #2c4a5e;
    border-radius: 20px;
    text-decoration: none;
    color: #2c4a5e;
    font-size: 0.8rem;
    transition: all 0.3s;
}

.ig-link:hover {
    background: #2c4a5e;
    color: white;
}

.ampersand-divider {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    margin: 40px 0;
    color: #b5905d;
    opacity: 0.5;
}

/* --- Reveal Animation --- */
.couple-section .reveal-item {
    opacity: 0;
    transition: all 1.2s ease-out;
}

.couple-section.reveal .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.reveal-up {
    transform: translateY(50px);
}

.reveal-down {
    transform: translateY(-50px);
}

@keyframes sway {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(5deg);
    }
}

/* Icon & Title */
.merak-icon {
    width: 140px;
    margin-bottom: 25px;
    filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
}

/* save-date / */
.save-the-date {
    position: relative;
    padding: 80px 20px;
    background: #e8ebef;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

/* Background Motif Daun Transparan */
.std-bg-leaf {  
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../images/flower-blue-1.webp') no-repeat center center;
    background-size: contain;
    opacity: 0.1;
    z-index: 1;
}

.std-content {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 450px;
}

.std-shadow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    opacity: 0;
    z-index: -1;
}

/* Typography */
.std-top-label {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    color: #3d637c;
    font-size: 1.1rem;
}

.std-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: #004a8d;
    letter-spacing: 2px;
    line-height: 1;
    margin: 10px 10px 30px;
}

.std-day-name {
    letter-spacing: 15px;
    font-size: 0.9rem;
    color: #3d637c;
    margin-bottom: 10px;
}

.std-date-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.std-date-row .line {
    width: 40px;
    height: 1px;
    background: #3d637c;
}

.date-main {
    display: flex;
    align-items: center;
    gap: 10px;
}

.big-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #004a8d;
}

.month-year {
    display: flex;
    flex-direction: column;
    text-align: left;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.2;
    color: #004a8d;
}

/* Countdown Grid */
.std-countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 40px;
}

.countdown-box {
    border: 1px solid #004a8d;
    padding: 15px 5px;
    display: flex;
    flex-direction: column;
}

.countdown-box .num {
    font-size: 1.8rem;
    font-weight: 700;
    color: #004a8d;
}

.countdown-box .unit {
    font-size: 0.7rem;
    letter-spacing: 1px;
    color: #3d637c;
}

/* Location & Button */
.venue-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #004a8d;
}

.venue-address {
    font-size: 0.85rem;
    color: #3d637c;
    margin-bottom: 30px;
}

.btn-calendar {
    display: inline-block;
    padding: 12px 30px;
    background: #2c4a5e;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(44, 74, 94, 0.2);
}

.btn-calendar:hover {
    background: #b5905d;
    transform: translateY(-3px);
}

/* Reveal Animations */
.save-the-date.reveal .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.save-the-date.reveal .std-label {
    transition-delay: 0.2s;
}

.save-the-date.reveal .std-title {
    transition-delay: 0.4s;
}

.save-the-date.reveal .countdown-wrapper {
    transition-delay: 0.6s;
}

.save-the-date.reveal .std-date {
    transition-delay: 0.8s;
}

.save-the-date.reveal .btn-calendar {
    transition-delay: 1s;
}

/* event/ */
.event-section {
    position: relative;
    padding: 100px 20px;
    /* background: #f8fbff; */
    overflow: hidden;
    text-align: center;
}

.event-bg-decor {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('../images/blue-castle.jpg') no-repeat center center; */
    background-size: cover;
    opacity: 0.05;
    z-index: 1;
}

.event-content {
    position: relative;
    z-index: 5;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 60px 30px;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
    max-width: 800px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(212, 163, 115, 0.2);
    /* max-width: 500px; */
    margin: 0 auto;
    color: #2c4a5e;
}

.event-main-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2c4a5e;
    margin-bottom: 10px;
}

.event-intro {
    font-size: 0.9rem;
    color: #3d637c;
    margin-bottom: 50px;
}

/* Card Styling */
.event-cards-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.event-card {
    position: relative;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
}

.card-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    z-index: 1;
    opacity: 0.9;
}

.card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.event-type {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #004a8d;
    margin-bottom: 15px;
}

.event-divider {
    width: 60px;
    height: 2px;
    background: #b5905d;
    margin: 0 auto 25px;
}

.event-details {
    text-align: left;
    display: inline-block;
    margin-bottom: 25px;
}

.detail-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    color: #2c4a5e;
    font-size: 0.95rem;
}

.btn-maps {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid #004a8d;
    color: #004a8d;
    text-decoration: none;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-maps:hover {
    background: #004a8d;
    color: #fff;
}

/* Flowers Decor */
.e-flower {
    position: absolute;
    width: 180px;
    z-index: 2;
    opacity: 0.6;
}

.ef-left {
    bottom: -30px;
    left: -50px;
    transform: rotate(15deg);
}

.ef-right {
    top: -30px;
    right: -50px;
    transform: rotate(190deg);
}

/* --- Reveal Animations --- */
.event-section.reveal .reveal-item {
    opacity: 1;
    transform: translate(0, 0);
}

.reveal-left {
    transform: translateX(-50px);
    opacity: 0;
}

.reveal-right {
    transform: translateX(50px);
    opacity: 0;
}

.event-section.reveal .reveal-left {
    transition-delay: 0.4s;
}

.event-section.reveal .reveal-right {
    transition-delay: 0.7s;
}

/* story/ */
.story-section {
    padding: 50px 0;
    background: #e8ebef;
    overflow: hidden;
    min-height: 70vh;
}

.story-slider-container {
    width: 100%;
    position: relative;
    padding: 20px 0;
}

/* Container Slider */
.story-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding: 0 10%;
    /* Memberikan jarak agar slide berikutnya sedikit terlihat */
    gap: 20px;
}

/* Menghilangkan scrollbar tapi tetap bisa digeser */
.story-slider::-webkit-scrollbar {
    display: none;
}

/* Individual Slide */
.story-slide {
    flex: 0 0 85%;
    /* Lebar slide 85% dari layar */
    scroll-snap-align: center;
    display: flex;
    justify-content: center;
}

.slide-card {
    background: white;
    width: 100%;
    width: 320px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(44, 74, 94, 0.1);
    overflow: hidden;
    position: relative;
}

.slide-img {
    height: 250px;
    position: relative;
    overflow: hidden;
}

.slide-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.slide-year {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #004a8d;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.8rem;
}

.slide-text {
    padding: 30px 20px;
    text-align: center;
    position: relative;
}

.slide-shadow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    opacity: 0.6;
    z-index: 1;
}

.text-inner {
    position: relative;
    z-index: 2;
}

.text-inner h3 {
    font-family: 'Playfair Display', serif;
    color: #004a8d;
    margin-bottom: 10px;
}

.text-inner p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2c4a5e;
}

.slide-hint {
    text-align: center;
    font-size: 0.8rem;
    color: #3d637c;
    margin-top: 25px;
    opacity: 0.6;
    animation: pulse 2s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.4;
    }

    50% {
        opacity: 0.8;
    }
}

/* Tambahkan sedikit margin-top pada story-header */
.story-header {
    margin-bottom: 30px;
}

/* Responsive Mobile */
@media (max-width: 768px) {

    .story-item,
    .story-item.item-reverse {
        flex-direction: column;
        gap: 20px;
    }

    .story-img {
        width: 100%;
        height: 250px;
    }

    .story-img img {
        height: 250px;
    }
}

/* Animations */
.reveal-left {
    transform: translateX(-50px);
    opacity: 0;
}

.reveal-right {
    transform: translateX(50px);
    opacity: 0;
}

.story-section.reveal .reveal-item {
    opacity: 1;
    transform: translate(0, 0);
}

/* gallery/ */
.gallery-section {
    padding: 80px 15px;
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.gallery-container {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.gallery-header {
    text-align: center;
    margin-bottom: 40px;
}

.gallery-label {
    font-size: 0.9rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #3d637c;
}

.gallery-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    color: #2c4a5e;
    font-style: italic;
    margin: 5px 0;
}

.gallery-divider {
    width: 50px;
    height: 3px;
    background: #b5905d;
    margin: 10px auto;
}

/* Grid Layout */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2 kolom di mobile */
    grid-auto-rows: 200px;
    gap: 15px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    background: #f0f4f8;
}

/* Modifikasi Ukuran Item Galeri */
.gallery-item.grid-wide {
    grid-column: span 2;
    /* Mengambil 2 kolom lebar */
}

.gallery-item:nth-child(1),
.gallery-item:nth-child(5) {
    grid-row: span 2;
    /* Menjadi foto vertikal/tinggi */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Overlay Zoom Effect */
.overlay-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 74, 94, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: white;
    font-size: 1.5rem;
}

.gallery-item:hover .overlay-zoom {
    opacity: 1;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

/* Bunga Dekorasi */
.gallery-decor-bottom {
    position: absolute;
    bottom: -30px;
    left: -40px;
    z-index: 2;
    opacity: 0.6;
}

.g-flower {
    width: 220px;
    transform: rotate(-15deg);
}

/* Animations On Scroll */
.gallery-section.reveal .reveal-item {
    opacity: 1;
    transform: translate(0, 0);
}

/* Staggered Delay untuk Grid */
.gallery-item:nth-child(1) {
    transition-delay: 0.1s;
}

.gallery-item:nth-child(2) {
    transition-delay: 0.2s;
}

.gallery-item:nth-child(3) {
    transition-delay: 0.3s;
}

.gallery-item:nth-child(4) {
    transition-delay: 0.4s;
}

.gallery-item:nth-child(5) {
    transition-delay: 0.5s;
}

.gallery-item:nth-child(6) {
    transition-delay: 0.6s;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 3 kolom di desktop */
    }
}

/* gift/ */
.gift-section {
    padding: 80px 20px;
    background: #e8ebef;
    position: relative;
    overflow: hidden;
    text-align: center;
    min-height: 80vh;
}

.gift-container {
    max-width: 500px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.gift-shadow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    z-index: -1;
    opacity: 0.8;
}

.gift-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2c4a5e;
    font-style: italic;
}

.gift-divider {
    width: 50px;
    height: 3px;
    background: #b5905d;
    margin: 15px auto 25px;
}

.gift-intro {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #3d637c;
    margin-bottom: 30px;
}

/* Tombol Klik Disini */
.btn-show-gift {
    padding: 12px 35px;
    background: #2c4a5e;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(44, 74, 94, 0.2);
}

.btn-show-gift:hover {
    background: #b5905d;
    transform: scale(1.05);
}

/* Wrapper Kartu Rekening */
.gift-card-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.8s ease-in-out, opacity 0.5s;
    opacity: 0;
    margin-top: 20px;
}

.gift-card-wrapper.active {
    max-height: 1000px;
    opacity: 1;
}

.account-card {
    background: white;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(44, 74, 94, 0.1);
}

.account-item {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.bank-logo {
    height: 30px;
    margin-bottom: 15px;
}

.account-number {
    font-size: 1.3rem;
    font-weight: 700;
    color: #2c4a5e;
    letter-spacing: 2px;
}

.account-name {
    font-size: 0.9rem;
    color: #3d637c;
    margin-bottom: 10px;
}

.btn-copy {
    background: #f0f4f8;
    border: 1px solid #2c4a5e;
    color: #2c4a5e;
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: 0.3s;
}

.btn-copy:hover {
    background: #2c4a5e;
    color: white;
}

/* Alamat */
.address-item {
    margin-top: 10px;
}

.address-title {
    font-size: 1rem;
    color: #2c4a5e;
    margin-bottom: 5px;
}

.address-text {
    font-size: 0.9rem;
    margin-bottom: 10px;
    opacity: 0.8;
}

/* Decor */
.g-flower-left {
    position: absolute;
    bottom: -30px;
    left: -50px;
    width: 200px;
    opacity: 0.5;
    z-index: 2;
}

/* --- State Awal (Sebelum Reveal) --- */
.gift-section .reveal-item {
    opacity: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gift-section .reveal-up {
    transform: translateY(40px);
}

.gift-section .reveal-down {
    transform: translateY(-40px);
}

.gift-section .gift-divider {
    width: 0;
    /* Garis mulai dari nol */
    opacity: 0;
}

/* --- State Setelah Reveal (Aktif) --- */
.gift-section.reveal .reveal-item {
    opacity: 1;
    transform: translateY(0);
}

.gift-section.reveal .gift-divider {
    width: 60px;
    /* Garis memanjang */
    opacity: 1;
    transition: width 1s ease 0.4s, opacity 1s ease 0.4s;
}

/* Delay staggered agar elemen muncul bergantian */
.gift-section.reveal .gift-title {
    transition-delay: 0.2s;
}

.gift-section.reveal .gift-intro {
    transition-delay: 0.6s;
}

.gift-section.reveal .gift-action {
    transition-delay: 0.8s;
}

.gift-section.reveal .gift-shadow-bg {
    transition: opacity 2s ease;
    transition-delay: 0.1s;
}

/* Animasi Bunga Latar */
.g-flower-left {
    transform: translateX(-100px) rotate(-20deg);
    opacity: 0;
    transition: all 1.5s ease-out 0.5s;
}

.gift-section.reveal .g-flower-left {
    transform: translateX(0) rotate(0);
    opacity: 0.5;
}

/* gift/ */
.rsvp-section {
    padding: 80px 20px;
    /* background: #f0f4f8; */
    position: relative;
    overflow: hidden;
}

.rsvp-bg-castle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url('blue-castle.jpg') no-repeat center center; */
    background-size: cover;
    opacity: 0.05;
    z-index: 1;
}

.rsvp-container {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.rsvp-header {
    text-align: center;
    margin-bottom: 50px;
    color: #2c4a5e;
}

.rsvp-title {
    font-family: 'Playfair Display', serif;
    font-size: 2.8rem;
    font-style: italic;
}

.rsvp-divider {
    width: 60px;
    height: 3px;
    background: #b5905d;
    margin: 15px auto;
}

/* RSVP Grid */
.rsvp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: start;
}

/* Form Styling */
.rsvp-form-wrapper {
    position: relative;
    padding: 30px;
}

.rsvp-shadow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    opacity: 0.9;
    z-index: -1;
}

.form-group {
    margin-bottom: 15px;
}

.form-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(44, 74, 94, 0.2);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.8);
    color: #2c4a5e;
    font-family: inherit;
    transition: 0.3s;
}

.form-input:focus {
    outline: none;
    border-color: #004a8d;
    background: #fff;
}

.btn-rsvp {
    width: 100%;
    padding: 12px;
    background: #2c4a5e;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.btn-rsvp:hover {
    background: #004a8d;
}

/* Wishes List Styling */
.wishes-wrapper {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(5px);
    border-radius: 20px;
    padding: 20px;
    height: 450px;
    border: 1px solid rgba(255, 255, 256, 0.3);
}

.wishes-list {
    height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

/* Custom Scrollbar */
.wishes-list::-webkit-scrollbar {
    width: 5px;
}

.wishes-list::-webkit-scrollbar-thumb {
    background: #b5905d;
    border-radius: 10px;
}

.wish-item {
    background: white;
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
    text-align: left;
}

.wish-name {
    color: #004a8d;
    margin-bottom: 5px;
    font-size: 1rem;
}

.wish-text {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #3d637c;
}

.wish-status {
    display: block;
    font-size: 0.7rem;
    margin-top: 8px;
    color: #28a745;
    font-weight: 600;
}

/* Animations */
.reveal-left {
    transform: translateX(-50px);
    opacity: 0;
}

.reveal-right {
    transform: translateX(50px);
    opacity: 0;
}

.rsvp-section.reveal .reveal-item {
    opacity: 1;
    transform: translate(0, 0);
}

.rsvp-section.reveal .reveal-left {
    transition-delay: 0.3s;
}

.rsvp-section.reveal .reveal-right {
    transition-delay: 0.6s;
}

/* closing/ */
.closing-section {
    position: relative;
    padding: 100px 20px 0;
    /* Padding bawah 0 karena ada footer */
    background: #ffffff;
    text-align: center;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.closing-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.closing-shadow-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    opacity: 0.8;
    z-index: -1;
}

.closing-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #2c4a5e;
    margin-bottom: 20px;
}

.closing-salam {
    font-weight: 600;
    color: #3d637c;
    margin-bottom: 40px;
}

/* Foto Penutup */
.closing-photo-wrapper {
    position: relative;
    width: 220px;
    margin: 0 auto 30px;
}

.closing-frame {
    width: 100%;
    height: 300px;
    border-radius: 110px 110px 10px 10px;
    /* Kubah Arch */
    overflow: hidden;
    border: 5px solid white;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.final-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.closing-flower-decor {
    position: absolute;
    bottom: -20px;
    right: -30px;
    width: 120px;
    z-index: 6;
    animation: sway 5s ease-in-out infinite;
}

.closing-names {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    font-style: italic;
    color: #004a8d;
    margin-bottom: 20px;
}

.closing-logo {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    border: 1px solid #b5905d;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: #b5905d;
    transform: rotate(45deg);
}

.closing-hashtag {
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: #3d637c;
    opacity: 0.7;
    margin-top: 15px;
}

/* Footer Styling */
.main-footer {
    padding: 40px 20px;
    background: #f8fbff;
    color: #2c4a5e;
    font-size: 0.8rem;
    letter-spacing: 1px;
    position: relative;
    z-index: 10;
}

.main-footer i {
    color: #e74c3c;
    margin: 0 3px;
    animation: heartbeat 1.5s infinite;
}

/* Animations */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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

.closing-section.reveal .reveal-item {
    opacity: 1;
    transform: translate(0, 0);
}

.closing-section.reveal .closing-text {
    transition-delay: 0.2s;
}

.closing-section.reveal .closing-photo-wrapper {
    transition-delay: 0.5s;
}

.closing-section.reveal .closing-names {
    transition-delay: 0.8s;
}

.closing-section.reveal .closing-meta {
    transition-delay: 1.1s;
}