body,
html {
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto; /* kunci scroll */
}

body {
  position: relative; /* aktifkan scroll setelah masuk halaman utama */
}


/* ==============================
   RESET
============================== */

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


/* ==============================
   BODY
============================== */

body {
    font-family: 'Cormorant Garamond', sans-serif;
    background-color: #c9e3f5;
    color: #3a302a;
    text-align: center;
}


/* ==============================
   COVER
============================== */

.cover {
    font-size: 10px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    background:
        linear-gradient(
            rgba(247, 243, 236, 0.3),
            rgba(247, 243, 236, 0.3)),
            url("../images/halaman cover.png") no-repeat center center/cover;
    position: fixed;
    inset: 0;
    width: 100%;
    height: auto;
    z-index: 1200;
    opacity: 1;
    transition: 
    opacity 1.3s ease;
}       

.cover, .transition-scene {
    min-height: 100vh;
    background-size: cover;
    background-position: center;
}

@media (max-width: 600px) {
  .cover-content {
    max-width: 360px;
    padding: 15px;
  }
  .invitation-text {
    font-size: 14px;
    line-height: 1.5;
  }
  .photo-placeholder {
    width: 140px;
    height: 180px;
    }
}


/* ==============================
   THE WEDDING OF TEXT
============================== */
.the-wedding-of-text {
    font-family: 'montserrat', serif;
    font-size: 10px;
    font-weight: 250;
    line-height: 0.5;
    margin-bottom: 35px;
    color: #3a302a;
}


/* ==============================
   COVER CONTENT
============================== */

.cover-content {
    max-width: 600px;
    width: 100%;
}


/* ==============================
   SMALL TEXT
============================== */

.small-text {
    font-family: 'montserrat', sans-serif;
    font-size: 0.5px;
    letter-spacing: 5px;
    margin-bottom: 25px;
    color: #8d7650;
}


/* ==============================
   NAMA PENGANTIN
============================== */

h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(55px, 12vw, 100px);
    font-weight: 500;
    line-height: 0.9;
    margin-bottom: auto;
    color: #3a302a;
}


/* SIMBOL & */

.h1 span {
    font-size: 5em;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: #d19916;
    margin: 0 10px;
}


/* ==============================
   TANGGAL
============================== */

.date {
    font-size: 20px;
    letter-spacing: 4px;
    color: #6c2507;
    margin-bottom: 35px;
}


/* ==============================
   TEKS UNDANGAN
============================== */

.invitation-text {
    max-width: 500px; /*batas lebar text*/
    margin: 0 auto 20px; /* posisi di tengah*/
    text-align: center; /*rata tengah*/
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
    color: #3a302a;
    font-family: 'montserrat', serif;
}


.open-button {
    border: 1px solid #b89b5e;
    background-color: #ded4c4;
    color: #6f5a35;
    padding: 14px 30px;
    font-family: 'montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    animation: buttonFadeUp 1.5s ease forwards;
}

.open-button:hover {
    background-color: #c9e3f5;
    color: white;
    transform: translateY(-2px);
}

@keyframes buttonFadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* Efek ketika mouse diarahkan */
.open-button:hover {
    background-color: #c9e3f5;
    color: white;
}


/* ==============================
   ORNAMENT
============================== */

.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
    color: #d19916;
    font-size: 14px;
}

.ornament span {
    width: 50px;
    height: 1px;
    background-color: #d19916;
}

/* ORNAMENT COUNTDOWN */

.countdown-section .ornament {
    margin: 0 auto 40px;
}

/* =================================
   TRANSISI BUKA UNDANGAN (SCENE)
================================= */

.cover.hide {
    opacity: 0;
    transform:none;
    pointer-events: none;
}


/* HALAMAN UNDANGAN */

.main-content {
    display: block;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    opacity: 0;
    transition:
        opacity 1.8s ease;
}

.main-content.show {
    opacity: 1;
}

.cover-content {
    transition:
        transform 1.2s ease,
        opacity 0.9s ease;
}

.cover.hide .cover-content {
    transform: none;
    filter: blur(3px);
    opacity: 0;
}

.cover-content {
    transition:
        transform 1.2s ease,
        opacity 0.9s ease,
        filter 1.2s ease;
}

.cover.hide .cover-content {
    transform: none;
    opacity: 0;
    filter: blur(3px);
}


/* =====================================
   GENERAL SECTION
===================================== */
section.opening,
section.couple {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px 25px;
}

section.opening {
  scroll-margin-top: 0;
}

/* =====================================
   SECTION CONTENT
===================================== */

.section-content {
    width: 100%;
    max-width: 600px;
    margin: auto;
}


/* =====================================
   OPENING
===================================== */
.opening {
    background-color: none;
}


/* =====================================
   OPENING TITLE
===================================== */

.opening h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 25px;
}


/* =====================================
   OPENING TEXT
===================================== */

.opening-text {
    max-width: 450px;
    margin: 0 auto 35px;
    font-size: 13px;
    line-height: 2;
    color: #665b54;
}


/* =====================================
   NAMA PENGANTIN
===================================== */

.opening h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px;
    font-weight: 500;
    color: #3a302a;

}

/* =====================================
   ANIMASI OPENING
===================================== */

.opening .small-text,
.opening h2,
.opening h3,
.opening .ornament,
.opening .opening-text {
    opacity: 0;
    transform: translateY(25px);
}

/* ASSALAMUALAIKUM */
.opening .small-text {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* THE WEDDING OF */
.opening h2 {
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

/* NAMA MEMPELAI */
.opening h3 {
    transition:
        opacity 1s ease,
        transform 1s ease;
}

/* ORNAMEN */
.opening .ornament {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* PARAGRAF */
.opening .opening-text {
    transition:
        opacity 1s ease,
        transform 1s ease;
}


/* =====================================
   SAAT OPENING AKTIF
===================================== */

.opening.show .small-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.opening.show h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.opening.show h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}

.opening.show .ornament {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.75s;
}

.opening.show .opening-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.95s;
}




/* =====================================
   COUPLE SECTION
===================================== */

.couple {
    background-color: #f7f3ec;
}


/* =====================================
   COUPLE TITLE
===================================== */

.couple h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 40px;
}


/* =====================================
   PERSON
===================================== */

.person {

    margin-bottom: 1.5px;

}


/* =====================================
   PHOTO PLACEHOLDER
===================================== */

.photo-placeholder {
    width: 180px;
    height: 220px;
    margin: 0 auto 25px;
    border: 1px solid #c8ad79;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8d7650;
    font-size: 12px;
    overflow: hidden;
    background-color: #eee8dd; /* biar tidak ada blok warna */
    border-radius: 100px; /* sudut melengkung */
    position: relative; /*untuk shading*/

    /*shading di luar placeholder */
    box-shadow: 0 8px 15px rgba(0,0,0,0.25);
}
/* FOTO MEMPELAI */

.photo-placeholder {
    overflow: hidden;
    background-color: transparent;
    background-color: #eee8dd;
}

.photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =====================================
   PERSON NAME
===================================== */

.person h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: 500;
    margin-bottom: 10px;
}


/* =====================================
   PERSON DESCRIPTION
===================================== */

.person p {
    font-size: 14px;
    line-height: 1.4;
    color: #665b54;
    text-align: center;
    margin: 2px 0;
}


/* =====================================
   AND SYMBOL
===================================== */

.and-symbol {
    font-family: 'Cormorant Garamond', serif;
    font-size: 35px;
    font-style: italic;
    color: #b89b5e;
    margin: 20px auto;
    text-align: center;
}

.and-symbol {
    opacity: 0;
    transform: scale(0.7);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.and-symbol.show {
    opacity: 1;
    transform: scale(1);
}

/* =====================================
   EVENT
===================================== */
.event-section .info-placeholder {
    display: none;
}
.event {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 25px;
}


.event h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px;
    font-weight: 500;
    margin-bottom: 45px;
}


/* =====================================
   EVENT DATE
===================================== */

.event-date {
    margin-bottom: 50px;
}
.event-date .month {
    font-size: 11px;
    letter-spacing: 5px;
    color: #8d7650;
}
.event-date .day {
    font-family: 'Cormorant Garamond', serif;
    font-size: 90px;
    line-height: 0.9;
    color: #3a302a;
}
.event-date .year {
    font-size: 12px;
    letter-spacing: 4px;
    color: #8d7650;
}
/* =====================================
   EVENT CARD
===================================== */

.event-card {
    max-width: 400px;
    margin: 0 auto 30px;
    padding: 30px 20px;
    border: 1px solid #d8c49a;
    background-color: #fffdf8;
}
.event-card h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 500;
    margin-bottom: 15px;
}


.event-card p {
    font-size: 12px;
    line-height: 1.8;
    color: #665b54;
}


.event-card .event-time {
    color: #b89b5e;
    font-weight: 500;
    margin-bottom: 10px;
}

/* =====================================
   COUNTDOWN
===================================== */
.countdown-section .info-placeholder {
    display: none;
}

.countdown-section {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    text-align: center;
    padding:35px 40px;
    margin: 0 auto;
    max-width: 900px;
}

.countdown-section h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    color: #3a6ea5;
    margin-bottom: 25px;
}

/*latar belakang countdown/layer*/
.countdown-bg { 
    background-image: url(../images/Backgroundoppening.png);
    background-color: #5a7fa3;
    border-radius: 25px;
    padding: 20px 30px;
}


/* =====================================
   COUNTDOWN CONTAINER
===================================== */
.countdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: nowrap;
}

/* =====================================
   COUNTDOWN ITEM
===================================== */

.countdown-item {
    flex: 1;
    text-align: center;
}

.countdown-item span {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-size: 36px;
    font-weight: bold;
    color: #3a6ea5;
}


.countdown-item p {
    font-size: 11px;
    letter-spacing: 2px;
    color: #5a7fa3;
    margin-top: 4px;
}

@media (max-width: 600px) {
  .countdown-section {
    max-width: 95%;
    padding: 25px;
  }

.countdown {
    flex-wrap: nowrap;
    gap: 8px;
}
  .countdown-item span {
    font-size: 24px;  /* lebih kecil di HP */
  }
  .countdown-item p {
    font-size: 12px;
    letter-spacing: 1px;
  }
}

/* =====================================
   ANIMASI COUNTDOWN
===================================== */

.countdown-item {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.countdown-section.show .countdown-item {
    opacity: 1;
    transform: translateY(0);
}


/* Urutan kemunculan */

.countdown-section.show .countdown-item:nth-child(1) {
    transition-delay: 0.2s;
}

.countdown-section.show .countdown-item:nth-child(2) {
    transition-delay: 0.35s;
}

.countdown-section.show .countdown-item:nth-child(3) {
    transition-delay: 0.5s;
}

.countdown-section.show .countdown-item:nth-child(4) {
    transition-delay: 0.65s;
}

.countdown-section h2 {
    opacity: 0;
    transform: translateY(20px);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.countdown-section.show h2 {
    opacity: 1;
    transform: translateY(0);

    transition-delay: 0.1s;
}

/* =====================================
   ANIMASI COUNTDOWN
===================================== */

.countdown-section .small-text,
.countdown-section h2,
.countdown-section .countdown-item {
    opacity: 0;
    transform: translateY(25px);
}


/* Small text */

.countdown-section .small-text {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* Judul */

.countdown-section h2 {
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}


/* Angka countdown */

.countdown-section .countdown-item {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/* =====================================
   ANIMASI ORNAMENT COUNTDOWN
===================================== */

.countdown-section .ornament {
    opacity: 0;
    transform: scaleX(0.6);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.countdown-section.show .ornament {
    opacity: 1;
    transform: scaleX(1);

    transition-delay: 0.2s;
}


/* =====================================
   SAAT COUNTDOWN TERLIHAT
===================================== */

.countdown-section.show .small-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
}

.countdown-section.show h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}


/* Hari */

.countdown-section.show .countdown-item:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.55s;
}


/* Jam */

.countdown-section.show .countdown-item:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.7s;
}


/* Menit */

.countdown-section.show .countdown-item:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.85s;
}


/* Detik */

.countdown-section.show .countdown-item:nth-child(4) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1s;
}

/* =========================
   RSVP
========================= */

.rsvp {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 25px;
    background-color: #f7f3ec;
}

.rsvp h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 500;
    margin-bottom: 25px;
}

.rsvp-text {
    max-width: 430px;
    margin: 0 auto 40px;
    font-size: 12px;
    line-height: 2;
    color: #665b54;
}

.rsvp-form {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

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

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: 1px;
    color: #8d7650;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #d8c49a;
    background-color: #fffdf8;
    color: #3a302a;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    outline: none;
}

.form-group input:focus,
.form-group select:focus {
    border-color: #b89b5e;
}

.form-group input::placeholder {
    color: #aaa19a;
}

.rsvp-button {
    width: 100%;
    padding: 15px;
    border: 1px solid #b89b5e;
    background-color: transparent;
    color: #6f5a35;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.rsvp-button:hover {
    background-color: #c9e3f5;
    color: white;
}

/* =========================
   UCAPAN & DOA
========================= */

.wishes {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 25px;
    background-color: #fffdf8;
}

.wishes h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 500;
    margin-bottom: 25px;
}

.wishes-text {
    max-width: 430px;
    margin: 0 auto 40px;
    font-size: 12px;
    line-height: 2;
    color: #665b54;
}

.wishes-form {
    max-width: 400px;
    margin: 0 auto;
    text-align: left;
}

.wishes-form textarea {
    width: 100%;
    padding: 14px 15px;
    border: 1px solid #d8c49a;
    background-color: #fffdf8;
    color: #3a302a;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    resize: vertical;
    outline: none;
}

.wishes-form textarea:focus {
    border-color: #b89b5e;
}

.wishes-form textarea::placeholder {
    color: #aaa19a;
}

.wishes-button {
    width: 100%;
    padding: 15px;
    border: 1px solid #b89b5e;
    background-color: transparent;
    color: #6f5a35;
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.wishes-button:hover {
    background-color: #c9e3f5;
    color: white;
}

.wishes-list {
    max-width: 450px;
    margin: 50px auto 0;
    text-align: left;
}

.wish-card {
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ded4c4;
    background-color: #f7f3ec;
}

.wish-card h4 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #3a302a;
}

.wish-card p {
    font-size: 12px;
    line-height: 1.8;
    color: #665b54;
}

/* =========================
   LOVE GIFT
========================= */

.gift {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 25px;
    background-color: #f7f3ec;
}

.gift h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 52px;
    font-weight: 500;
    margin-bottom: 25px;
}

.gift-text {
    max-width: 430px;
    margin: 0 auto 40px;
    font-size: 12px;
    line-height: 2;
    color: #665b54;
}

.gift-card {
    max-width: 380px;
    margin: 0 auto 30px;
    padding: 35px 25px;
    background-color: #fffdf8;
    border: 1px solid #d8c49a;
}

.gift-bank {
    font-size: 12px;
    letter-spacing: 3px;
    color: #8d7650;
    margin-bottom: 25px;
}

.gift-number {
    font-family: 'montserrat', serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: #3a302a;
    margin-bottom: 8px;
}

.gift-name {
    font-size: 11px;
    letter-spacing: 2px;
    color: #665b54;
    margin-bottom: 25px;
}

.copy-button {
    padding: 12px 22px;
    border: 1px solid #b89b5e;
    background-color: transparent;
    color: #6f5a35;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-button:hover {
    background-color: #b89b5e;
    color: white;
}

.gift-thankyou {
    max-width: 400px;
    margin: 0 auto;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    line-height: 1.6;
    color: #665b54;
}



/* =========================
   CLOSING
========================= */

.closing {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 25px;
    background-color: #fffdf8;
}

.closing .section-content {
    max-width: 550px;
}

.closing-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 35px;
    color: #b89b5e;
    font-size: 14px;
}

.closing-ornament span {
    width: 50px;
    height: 1px;
    background-color: #b89b5e;
}

.closing h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 58px;
    font-weight: 500;
    margin-bottom: 30px;
    color: #3a302a;
}

.closing-text {
    max-width: 420px;
    margin: 0 auto 40px;
    font-size: 13px;
    line-height: 2;
    color: #665b54;
}

.closing h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 42px;
    font-weight: 500;
    color: #3a302a;
    margin-bottom: 15px;
}

.closing-date {
    font-size: 11px;
    letter-spacing: 4px;
    color: #8d7650;
}

.closing-ornament.bottom {
    margin-top: 45px;
    margin-bottom: 0;
    font-size: 18px;
}

/* =========================
   MUSIC BUTTON
========================= */

.music-button {
    position: fixed;
    right: 20px;
    bottom: 20px;

    width: 45px;
    height: 45px;

    border-radius: 50%;
    border: 1px solid #b89b5e;

    background-color: #fffdf8;
    color: #8d7650;

    font-size: 20px;

    cursor: pointer;

    display: none;
    align-items: center;
    justify-content: center;

    z-index: 999;

    box-shadow: 0 4px 15px rgba(58, 48, 42, 0.12);

    transition: all 0.3s ease;
}

.music-button:hover {
    background-color: #c9e3f5;
    color: white;
}

.music-button.playing {
    animation: musicRotate 3s linear infinite;
}

@keyframes musicRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =========================
   ANIMASI COVER
========================= */

.cover h1 {
    animation: nameReveal 1.5s ease forwards;
}

.cover .small-text {
    animation: fadeDown 1s ease forwards;
}

.cover .date {
    animation: fadeUp 1.5s ease forwards;
}

.cover .invitation-text {
    animation: fadeUp 1.8s ease forwards;
}

@keyframes nameReveal {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

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

@keyframes fadeDown {
    from {
        opacity: 0;
        transform: translateY(-15px);
    }

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

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* =========================
   NAMA TAMU UNDANGAN
========================= */

.guest-invitation {
    margin: 30px auto;
    text-align: center;
}

.guest-label {
    font-family: 'Montserrat', sans-serif;
    color: #5f3607;
    margin-bottom: 5px;
}

#guest-name {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    color: #3a302a;
    line-height: 1.2;
    word-break: break-word;
}

.guest-title {
    font-weight: 400;
    color: #6c2507;
    margin-bottom: 3px;
}

/* =========================
   TOMBOL BAGIKAN TAMU
========================= */

.share-guest-button {
    margin-top: 15px;
    padding: 11px 20px;
    border: 1px solid #d8c49a;
    background-color: transparent;
    color: #8d7650;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;

    transition: all 0.3s ease;
}

.share-guest-button:hover {
    background-color: #c9e3f5;
    color: white;
}

/* =========================
   RSVP SUMMARY
========================= */

.rsvp-summary {
    margin-top: 40px;
    text-align: center;
}

.rsvp-summary-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    color: #3a302a;
    margin-bottom: 8px;
}

.rsvp-total {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    color: #8d7650;
    margin-bottom: 25px;
}

.attendance-card h4 {
    margin: 0 0 5px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    font-weight: 600;
    color: #3a302a;
}

.attendance-card p {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 10px;
    color: #8d7650;
}

/* =========================
   RSVP SUMMARY
========================= */

.rsvp-summary {
    margin-top: 40px;
    text-align: center;
    padding: 25px 20px;
}

.rsvp-summary-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 25px;
    color: #3a302a;
    margin-bottom: 10px;
}

.rsvp-total {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    color: #8d7650;
    margin: 0;
}

#total-attendance {
    font-size: 18px;
    font-weight: 600;
}

.rsvp-thank-you {
    margin-top: 12px;
    font-family: 'Montserrat', sans-serif;
    font-size: 9px;
    line-height: 1.7;
    color: #8a817a;
}

/* =========================
   RSVP NAMA TAMU
========================= */

#rsvp-name {
    background: #f7f3ec;
    color: #3a302a;
    cursor: default;
}

#rsvp-name:focus {
    outline: none;
    border-color: #d8c49a;
}

/* =========================
   MOBILE RESPONSIVE
========================= */

@media (max-width: 600px) {

    body {
        overflow-x: hidden;
    }

    
    .quran-verse {
        width: 75%;
        max-width: 280px;
        margin: 0 auto 35px;
        padding: 0;
        text-align: center;
    }


    .arabic-text {
        width: 100%;
        max-width: 260px;
        margin: 0 auto 12px;
        font-size: 15px;
        line-height: 2;
        text-align: center;
    }
}

/* =========================
   REVISI TAMBAHAN
========================= */
.next-page {
    min-height: 100vh;
    background-image: url("../images/BackrounOppening.png") no-repeat center center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 80px 25px;
}

    /* =========================
       COVER
    ========================= */

    .cover-content {
        width: 90%;
        max-width: 360px;
        padding: 20px;
        text-align: center;
    }

    .cover h1 {
        font-size: 48px;
        line-height: 1.05;
    }

    .cover .small-text {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .cover .date {
        font-size: 15px;
    }


    /* =========================
       NAMA TAMU
    ========================= */

    .guest-invitation {
        margin: 25px auto;
    }

    .guest-label {
        font-size: 15px;
        letter-spacing: 2.5px;
    }

    .guest-title {
        font-size: 15px;
    }

    #guest-name {
        font-size: 26px;
        padding: 0 10px;
    }


    /* =========================
       SECTION
    ========================= */

    section {
        padding: 70px 20px;
    }

    /* =========================
       TEKS
    ========================= */

    section p {
        line-height: 1.5;
    }


    /* =========================
       MEMPELAI
    ========================= */

    .couple-container {
        flex-direction: column;
        gap: 35px;
    }

   /* =====================================
   AYAT AL-QURAN
    ===================================== */

.quran-verse {
    width: 100%;
    max-width: 650px;
    margin: 0 auto 40px;
    text-align: center;
}

.arabic-text {
    direction: rtl;
    text-align: center;
    font-family: serif;
    font-size: 22px;
    line-height: 2;
    color: #3a302a;
    margin: 0 auto 15px;
    font-weight: 400;
}

.verse-reference {
    margin: 0 0 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 1.8px;
    color: #8d7650;
    text-transform: uppercase;
}

.translation-text {
    max-width: 500px;
    margin: 0 auto;
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    line-height: 1.8;
    color: #6f6258;
    font-style: italic;
}

    /* =========================
       EVENT
    ========================= */

    .event-container {
        flex-direction: column;
        gap: 20px;
    }


    .event-card {
        width: 100%;
        box-sizing: border-box;
    }


    /* =========================
       COUNTDOWN
    ========================= */

    .countdown {
        gap: 8px;
    }

    .countdown-item {
        min-width: 60px;
        padding: 12px 5px;
    }

    .countdown-item span {
        font-size: 22px;
    }

    .countdown-item small {
        font-size: 8px;
    }


    /* =========================
       RSVP
    ========================= */

    .rsvp-form {
        width: 100%;
        max-width: 100%;
    }

    .rsvp-form input,
    .rsvp-form select,
    .rsvp-form textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 12px;
        padding: 13px;
    }

    .rsvp-form button {
        width: 100%;
        padding: 14px;
        font-size: 10px;
    }


    /* =========================
       LOVE GIFT
    ========================= */

    .gift-card {
        width: 100%;
        box-sizing: border-box;
        padding: 25px 18px;
    }


    /* =========================
       MUSIC BUTTON
    ========================= */

    .music-button {
        width: 45px;
        height: 45px;
        right: 18px;
        bottom: 18px;
        font-size: 18px;
    }



/* =========================
   SCROLL REVEAL
========================= */

.reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
}


/* Efek khusus untuk elemen yang muncul dari kiri */

.reveal-left {
    opacity: 0;
    transform: translateX(-35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.reveal-left.show {
    opacity: 1;
    transform: translateX(0);
}


/* Efek khusus untuk elemen yang muncul dari kanan */

.reveal-right {
    opacity: 0;
    transform: translateX(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s ease;
}

.reveal-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* =========================
   ANIMASI FOTO MEMPELAI
========================= */

.person .photo-placeholder {
    opacity: 0;
    transform: scale(0.88);
    transition:
        opacity 1.2s ease,
        transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.person.show .photo-placeholder {
    opacity: 1;
    transform: scale(1);
}

.person h3,
.person p {
    opacity: 0;
    transform: translateY(15px);
}

.person h3 {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.person p {
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.person.show h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

.person.show p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

.person h3,
.person p {
    opacity: 0;
    transform: translateY(15px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.person.show h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.25s;
}

.person.show p {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.4s;
}

/* =====================================
   WEDDING EVENT
===================================== */

.event-section {
    text-align: center;
}

.event-intro {
    max-width: 600px;
    margin: 0 auto 40px;
    line-height: 1.8;
    color: #6f6258;
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 650px;
    margin: 0 auto;
}

.event-card {
    flex: 1 1 300px; /*fleksibel*/
    max-width: 400px;
    background-color: #f7f3ec;
    border: 1px solid rgba(184, 155, 94, 0.35);
    padding: 35px 25px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(58, 48, 42, 0.06);
}

.event-icon {
    width: 45px;
    height: 45px;
    margin: 0 auto 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #b89b5e;
    border-radius: 50%;

    color: #b89b5e;
    font-size: 20px;
}

.event-card .small-text {
    margin-bottom: 8px;
    color: #8d7650;
}

.event-card h3 {
    margin-bottom: 25px;
    font-family: "Cormorant Garamond", serif;
    font-size: 30px;
    font-weight: 500;
}

.event-detail {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;

    margin: 12px 0;

    color: #5f534b;
}

.event-detail span {
    min-width: 25px;
}

.event-detail p {
    margin: 0;
    line-height: 1.6;
}

/* ANIMASI EVENT CARD */

.event-card {
    opacity: 0;
    transition:
        opacity 1s ease,
        transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card.reveal-left {
    transform: translateX(-45px);
}

.event-card.reveal-right {
    transform: translateX(45px);
}

.event-card.show {
    opacity: 1;
    transform: translateX(0);
}

.event-card .event-icon,
.event-card .small-text,
.event-card h3,
.event-card .event-detail 
.event-card .location-button {
    opacity: 0;
    transform: translateY(15px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.event-card.show .location-button {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

.event-card.show .event-icon {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}

.event-card.show .small-text {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.35s;
}

.event-card.show h3 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.event-card.show .event-detail {
    opacity: 1;
    transform: translateY(0);
}

.event-card.show .event-detail:nth-of-type(1) {
    transition-delay: 0.65s;
}

.event-card.show .event-detail:nth-of-type(2) {
    transition-delay: 0.8s;
}

.event-card.show .event-detail:nth-of-type(3) {
    transition-delay: 0.95s;
}

/* =====================================
   TOMBOL LOKASI
===================================== */

.location-button {
    display: inline-block;

    margin-top: 20px;
    padding: 10px 24px;

    border: 1px solid #b89b5e;
    border-radius: 30px;

    color: #8d7650;
    background-color: transparent;

    font-family: "Montserrat", sans-serif;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.location-button:hover {
    background-color: #b89b5e;
    color: #fffdf8;
    transform: translateY(-2px);
}

@media (max-width: 600px) {
    .quran-verse .translation-text {
        width: 200px !important;
        max-width: 200px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 10px !important;
        line-height: 1.7 !important;
        text-align: center !important;
    }
}

/* =====================================
   JAVANESE ORNAMENT
===================================== */

.javanese-ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 25px auto 35px;
}

.javanese-ornament span {
    width: 45px;
    height: 1px;
    background-color: #8d7650;
    opacity: 0.6;
}

.batik-symbol {
    width: 24px;
    height: 24px;
    border: 1px solid #b89b5e;
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b89b5e;
    font-size: 13px;
}

.batik-symbol::before {
    content: "";
    width: 10px;
    height: 10px;
    border: 1px solid #b89b5e;
}

/* =========================================
   TRANSITION SCENE
========================================= */

.transition-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    background: #f7f3ec;

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

/* Saat transition aktif */ 
.transition-scene.active { 
    opacity: 1; 
    visibility: visible; 
    pointer-events: none; 
}


/* =========================================
   BACKGROUND
========================================= */

.transition-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image: url("../images/backgroundtransisisi.png");
    background-size: cover;
    background-position: center;

    opacity: 0;

    transform: scale(1.05);

    transition:
        opacity 7s ease,
        transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.layered-bg {
    background: url('../images/Backgroundoppening.png') no-repeat center center/cover;
    position: relative;
}

.layered-bg .section-content {
    background: rgba(255, 255, 255,0.85); /* overlay putih transparan */
    padding: 30px;
    border: 1px solid #d8c49a;
}


/* =========================================
   ORNAMEN transisi awal
========================================= */

.transition-ornament {
    transform: translateY(90px); 
    opacity: 0;
    transition: opacity 1.2s ease, transform 3s ease;
    will-change: transform, opacity;
    width: 120px;
    height: auto;
}

/* =========================================
   ORNAMEN MASUK DARI BAWAH
========================================= */

.transition-scene.ornaments-visible .transition-ornament {
    opacity: 1;
    transform: translateY(0); /* naik ke posisi normal */
     transition: transform 1.2s ease, opacity 1.2s ease;
}

/* =========================================
   ORNAMEN PALING ATAS MASUK
========================================= */

.top-ornament.enter {
    animation:
        ornamenMasuk 2.8s cubic-bezier(0.22, 1, 0.36, 1) forwards,
        ornamenTertiup 6s ease-in-out 2.8s infinite;
}


/* =========================================
   MASUK DARI ATAS
========================================= */

@keyframes ornamenMasuk {

    0% {
        transform:
            translateX(-50%)
            translateY(-140px)
            rotate(-2deg);

        opacity: 0;
    }

    60% {
        transform:
            translateX(-50%)
            translateY(15px)
            rotate(1deg);

        opacity: 1;
    }

    100% {
        transform:
            translateX(-50%)
            translateY(0)
            rotate(0deg);

        opacity: 1;
    }
}


/* =========================================
   GERAKAN SEPERTI TERTIUP ANGIN
========================================= */

@keyframes ornamenTertiup {

    0% {
        transform:
            translateX(-50%)
            rotate(0deg);
    }

    20% {
        transform:
            translateX(calc(-50% - 7px))
            rotate(-2deg);
    }

    40% {
        transform:
            translateX(calc(-50% + 8px))
            rotate(2.5deg);
    }

    60% {
        transform:
            translateX(calc(-50% - 6px))
            rotate(-1.8deg);
    }

    80% {
        transform:
            translateX(calc(-50% + 5px))
            rotate(1.5deg);
    }

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


/* =========================================
   KHUSUS HP
========================================= */

@media (max-width: 768px) {

    .top-ornament {

        width: 220px;

        /*
        Memberi ruang aman dari
        kamera / notch HP
        */

        top: calc(env(safe-area-inset-top) + 18px);
    }

}

/* =========================================
   ORNAMEN ATAS
========================================= */

.ornament-top-left {
    width: 45%;
    max-width: 520px;
    left: -20px;
    top: -20px;
    transform:
        translate(-80px, -80px)
        scale(0.9);
}

.ornament-top-right {
    width: 45%;
    max-width: 520px;
    right: -20px;
    top: -20px;
    transform:
        translate(80px, -80px)
        scale(0.9);
}


/* =========================================
   ORNAMEN SAMPING
========================================= */

.ornament-left {
    width: 28%;
    max-width: 330px;
    left: -20px;
    top: 42%;
    transform:
        translateX(-100px);
}

.ornament-right {
    width: 28%;
    max-width: 330px;
    right: -20px;
    top: 42%;
    transform:
        translateX(100px);
}


/* =========================================
   ORNAMEN BAWAH
========================================= */

.ornament-bottom-left {
    width: 42%;
    max-width: 480px;
    left: -20px;
    bottom: -20px;
    transform:
        translate(-70px, 80px)
        scale(0.9);
}

.ornament-bottom-right {
    width: 42%;
    max-width: 480px;
    right: -20px;
    bottom: -20px;
    transform:
        translate(70px, 80px)
        scale(0.9);
}


/* =========================================
   TRANSITION AKTIF
========================================= */

.transition-scene.active {
    opacity: 1;
    visibility: visible;
}


/* BACKGROUND MASUK */

.transition-scene.active .transition-background {
    opacity: 1;
    transform: scale(1);
}

/* =========================================
   ANIMASI ORNAMEN KIRI ATAS
========================================= */

.transition-scene.active .ornament-top-left {
    animation:
        ornamentTopLeft 2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.3s
        forwards;
        transition-delay: 0.2s;
}


/* =========================================
   ANIMASI ORNAMEN KANAN ATAS
========================================= */

.transition-scene.active .ornament-top-right {
    animation:
        ornamentTopRight 2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.45s
        forwards;
        transition-delay: 0.4s;
}


/* =========================================
   ANIMASI ORNAMEN KIRI
========================================= */

.transition-scene.active .ornament-left {
    animation:
        ornamentLeft 2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.6s
        forwards;
        transition-delay: 0.6s;
}


/* =========================================
   ANIMASI ORNAMEN KANAN
========================================= */

.transition-scene.active .ornament-right {

    animation:
        ornamentRight 2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.75s
        forwards;
        transition-delay: 0.8s;
}


/* =========================================
   ANIMASI ORNAMEN BAWAH KIRI
========================================= */

.transition-scene.active .ornament-bottom-left {

    animation:
        ornamentBottomLeft 2.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.9s
        forwards;
        transition-delay: 1s;
}


/* =========================================
   ANIMASI ORNAMEN BAWAH KANAN
========================================= */

.transition-scene.active .ornament-bottom-right {

    animation:
        ornamentBottomRight 2.2s
        cubic-bezier(0.22, 1, 0.36, 1)
        1.05s
        forwards;
        transition-delay: 1.2s;
}

/* =========================================
   GOYANG KIRI - KANAN
   ========================================= */

@keyframes gentleLeft {

    from {
        opacity: 1;
        transform: translateX(-3px) rotate(-1deg);
    }

    to {
        opacity: 1;
        transform: translateX(7px) rotate(1.5deg);
    }

}

@keyframes gentleRight {

    from {
        opacity: 1;
        transform: translateX(3px) rotate(1deg);
    }

    to {
        opacity: 1;
        transform: translateX(-7px) rotate(-1.5deg);
    }

}

@keyframes gentleLeftSmall {

    from {
        opacity: 1;
        transform: translateX(-2px) rotate(-0.8deg);
    }

    to {
        opacity: 1;
        transform: translateX(5px) rotate(1.2deg);
    }

}

@keyframes gentleRightSmall {

    from {
        opacity: 1;
        transform: translateX(2px) rotate(0.8deg);
    }

    to {
        opacity: 1;
        transform: translateX(-5px) rotate(-1.2deg);
    }

}

@keyframes gentleLeftWayang {

    from {
        opacity: 1;
        transform: translateX(-2px) rotate(-0.6deg);
    }

    to {
        opacity: 1;
        transform: translateX(6px) rotate(1deg);
    }

}

@keyframes gentleRightWayang {

    from {
        opacity: 1;
        transform: translateX(2px) rotate(0.6deg);
    }

    to {
        opacity: 1;
        transform: translateX(-6px) rotate(-1deg);
    }

}

@keyframes gentleLeftBottom {

    from {
        opacity: 1;
        transform: translateX(-3px) rotate(-0.8deg);
    }

    to {
        opacity: 1;
        transform: translateX(7px) rotate(1.2deg);
    }

}

@keyframes gentleRightBottom {

    from {
        opacity: 1;
        transform: translateX(3px) rotate(0.8deg);
    }

    to {
        opacity: 1;
        transform: translateX(-7px) rotate(-1.2deg);
    }

}


/* =========================================
   COVER CONTENT
========================================= */

.cover-content {
    position: relative;
    z-index: 10;
}

/* =========================================
   HALAMAN UTAMA
========================================= */

.main-content {
    transform: scale(0.92);
    opacity: 0;
    transition:
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 1.8s ease;
}

.main-content.show {
    transform: scale(1);
    opacity: 1;
}


/* =====================================
   ANIMASI ORNAMEN TRANSISI UNDANGAN
   ===================================== */

/* Pastikan gambar ornamen tidak terpotong */
.transition-scene {
    overflow: visible;
}

.transition-ornament {
    position: absolute;
    display: block;
    height: auto;
    opacity: 0;
    pointer-events: none;
    visibility: visible;
    overflow: visible;
    max-width: 110%;
}

/* Ornamen masuk dari bawah */
.transition-ornament {
    opacity: 0;
    transform: translateY(60px); /* mulai dari bawah */
    transition: opacity 0.9s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Saat aktif, ornamen naik ke posisi normal */
.transition-scene.ornaments-visible .transition-ornament {
    opacity: 1;
    transform: translateY(0);
}


/* ORNAMEN ATAS KIRI DAN KANAN */
.ornament-top-left,
.ornament-top-right {
    width: clamp(110px, 24vw, 230px);
    z-index: 5;
}

.ornament-top-left {
    top: 0;
    left: -20px;
}

.ornament-top-right {
    top: 0;
    right: -20px;
}

/* ORNAMEN DI BAWAH SUDUT ATAS */
.ornament-under-top-left,
.ornament-under-top-right {
    width: clamp(90px, 19vw, 175px);
    top: clamp(100px, 17vh, 175px);
    z-index: 4;
}

.ornament-under-top-left {
    left: -25px;
}

.ornament-under-top-right {
    right: -25px;
}

/* WAYANG DI BELAKANG ORNAMEN BAWAH */
.ornament-wayang-left,
.ornament-wayang-right {
    width: clamp(120px, 28vw, 270px);
    bottom: -30px;
    z-index: 1;
}

.ornament-wayang-left {
    left: -80px;
}

.ornament-wayang-right {
    right: -80px;
}

/* MERAK-LAYER DEPAN */
.ornament-bottom-left,
.ornament-bottom-right {
    width: clamp(180px, 32vw, 350px);
    bottom: -50px; /*menggeser sedikit kebawah */
    z-index: 1;
}

.ornament-bottom-left {
    left: -80px;
}

.ornament-bottom-right {
    right: -80px;
}

/* ORNAMEN SAMPING */
.ornament-left,
.ornament-right {
    width: clamp(90px, 17vw, 165px);
    top: 35%;
    z-index: 2;
}

.ornament-left {
    left: -20px;
}

.ornament-right {
    right: -20px;
}

/* ORNAMEN ranting bawah */
.ornament-ranting-bottom-left,
.ornament-ranting-bottom-right {
    position: absolute;
    bottom: -10px;
    width: clamp(160px, 28vw, 340px);
    opacity: 1;
}

.ornament-ranting-bottom-left {
    left: 0;
}

.ornament-ranting-bottom-right {
    right: 0;
}

/* =========================================
   GERAKAN ORNAMEN YANG LEBIH SMOOTH
   ========================================= */

.transition-scene.active .ornament-top-left {
    animation: gentleLeft 8s ease-in-out 0.2s infinite alternate;
}

.transition-scene.active .ornament-top-right {
    animation: gentleRight 8s ease-in-out 0.4s infinite alternate;
}

.transition-scene.active .ornament-under-top-left {
    animation: gentleLeftSmall 9s ease-in-out 0.6s infinite alternate;
}

.transition-scene.active .ornament-under-top-right {
    animation: gentleRightSmall 9s ease-in-out 0.8s infinite alternate;
}

.transition-scene.active .ornament-left {
    animation: gentleLeft 8s ease-in-out 0.5s infinite alternate;
}

.transition-scene.active .ornament-right {
    animation: gentleRight 8s ease-in-out 0.7s infinite alternate;
}

.transition-scene.active .ornament-wayang-left {
    animation: gentleLeftWayang 10s ease-in-out 0.9s infinite alternate;
}

.transition-scene.active .ornament-wayang-right {
    animation: gentleRightWayang 10s ease-in-out 1.1s infinite alternate;
}

.transition-scene.active .ornament-bottom-left {
    animation: gentleLeftBottom 9s ease-in-out 0.8s infinite alternate;
}

.transition-scene.active .ornament-bottom-right {
    animation: gentleRightBottom 9s ease-in-out 1s infinite alternate;
}

/* Atas kiri: masuk dari kiri, lalu bergoyang */
@keyframes swayTopLeft {
    0%   { opacity: 0; transform: translate(-70px, -35px) rotate(-8deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    40%  { opacity: 1; transform: translateX(7px) rotate(2deg); }
    60%  { opacity: 1; transform: translateX(-7px) rotate(-2deg); }
    80%  { opacity: 1; transform: translateX(5px) rotate(1.5deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Atas kanan */
@keyframes swayTopRight {
    0%   { opacity: 0; transform: translate(70px, -35px) rotate(8deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    40%  { opacity: 1; transform: translateX(-7px) rotate(-2deg); }
    60%  { opacity: 1; transform: translateX(7px) rotate(2deg); }
    80%  { opacity: 1; transform: translateX(-5px) rotate(-1.5deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Ornamen di bawah sudut atas */
@keyframes swayUnderLeft {
    0%   { opacity: 0; transform: translate(-45px, -15px) rotate(-5deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(6px) rotate(2deg); }
    70%  { opacity: 1; transform: translateX(-6px) rotate(-2deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes swayUnderRight {
    0%   { opacity: 0; transform: translate(45px, -15px) rotate(5deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(-6px) rotate(-2deg); }
    70%  { opacity: 1; transform: translateX(6px) rotate(2deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Ornamen samping */
@keyframes swaySideLeft {
    0%   { opacity: 0; transform: translateX(-60px) rotate(-5deg); }
    20%  { opacity: 1; transform: translateX(0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(6px) rotate(2deg); }
    70%  { opacity: 1; transform: translateX(-6px) rotate(-2deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes swaySideRight {
    0%   { opacity: 0; transform: translateX(60px) rotate(5deg); }
    20%  { opacity: 1; transform: translateX(0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(-6px) rotate(-2deg); }
    70%  { opacity: 1; transform: translateX(6px) rotate(2deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Wayang bawah */
@keyframes swayWayangLeft {
    0%   { opacity: 0; transform: translate(-45px, 35px) rotate(-3deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(5px) rotate(1deg); }
    70%  { opacity: 1; transform: translateX(-5px) rotate(-1deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes swayWayangRight {
    0%   { opacity: 0; transform: translate(45px, 35px) rotate(3deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(-5px) rotate(-1deg); }
    70%  { opacity: 1; transform: translateX(5px) rotate(1deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Ornamen sudut bawah */
@keyframes swayBottomLeft {
    0%   { opacity: 0; transform: translate(-50px, 45px) rotate(-5deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(6px) rotate(2deg); }
    70%  { opacity: 1; transform: translateX(-6px) rotate(-2deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

@keyframes swayBottomRight {
    0%   { opacity: 0; transform: translate(50px, 45px) rotate(5deg); }
    20%  { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    45%  { opacity: 1; transform: translateX(-6px) rotate(-2deg); }
    70%  { opacity: 1; transform: translateX(6px) rotate(2deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0deg); }
}

/* Penyesuaian layar HP */
@media (max-width: 768px) {
    .ornament-under-top-left,
    .ornament-under-top-right {
        top: 105px;
        width: 125px;
    }

    .ornament-left,
    .ornament-right {
        top: 36%;
        width: 100px;
    }

    .ornament-wayang-left,
    .ornament-wayang-right {
        width: 235px;
    }

    .ornament-bottom-left,
    .ornament-bottom-right {
        width: 165px;
    }

    .ornament-top-left,
    .ornament-top-right {
        width: 145px;
    } 
}

/* =========================================
   JUDUL TRANSISI
========================================= */

.transition-title {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.transition-scene.title-visible .transition-title {
    opacity: 1;
}

.transition-scene.title-visible .transition-title {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.03);
}

/* TEKS KECIL */
.transition-title p {
    margin: 0 0 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #5e4928;
}

/* NAMA */
.transition-title h3 {
    margin: 0;
    font-family: 'Great Vibes', cursive;
    font-size: clamp(55px, 10vw, 95px);
    font-weight: 400;
    line-height: 1.1;
    color: #3a302a;
}

/* SAAT TRANSISI AKTIF */
.transition-scene.active .transition-title {
    opacity: 1;

    transform:
        translate(-50%, -50%);
}

/* =========================================
   JUDUL MULAI HILANG
========================================= */

.transition-scene.title-out .transition-title {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(1.03);
}

/* HP */
@media (max-width: 600px) {

    .transition-title {
        width: 95%;
    }

    .transition-title p {
        font-size: 8px;
        letter-spacing: 3px;
    }

    .transition-title h2 {
        font-size: 58px;
    }

}

/* =========================================
   ORNAMEN - GOYANG SMOOTH
========================================= */

/* ATAS KIRI */
.transition-scene.active .ornament-top-left {
    animation:
        ornamentWindLeft 5s ease-in-out 0.2s infinite;
}

/* ATAS KANAN */
.transition-scene.active .ornament-top-right {
    animation:
        ornamentWindRight 5s ease-in-out 0.4s infinite;
}

/* BAWAH ATAS KIRI */
.transition-scene.active .ornament-under-top-left {
    animation:
        ornamentWindSmallLeft 5.3s ease-in-out 0.5s infinite;
}

/* BAWAH ATAS KANAN */
.transition-scene.active .ornament-under-top-right {
    animation:
        ornamentWindSmallRight 5.3s ease-in-out 0.7s infinite;
}

/* SAMPING KIRI */
.transition-scene.active .ornament-left {
    animation:
        ornamentWindLeft 5s ease-in-out 0.6s infinite;
}

/* SAMPING KANAN */
.transition-scene.active .ornament-right {
    animation:
        ornamentWindRight 5s ease-in-out 0.8s infinite;
}

/* WAYANG */
.transition-scene.active .ornament-wayang-left {
    animation:
        ornamentWindWayangLeft 5.5s ease-in-out 0.9s infinite;
}

.transition-scene.active .ornament-wayang-right {
    animation:
        ornamentWindWayangRight 5.5s ease-in-out 1.1s infinite;
}

/* MERAK */
.transition-scene.active .ornament-bottom-left {
    animation:
        ornamentWindBottomLeft 5s ease-in-out 0.8s infinite;
}

.transition-scene.active .ornament-bottom-right {
    animation:
        ornamentWindBottomRight 5s ease-in-out 1s infinite;
}

/* RANTING */
.transition-scene.active .ornament-ranting-bottom-left {
    animation:
        ornamentWindBottomLeft 5.2s ease-in-out 1s infinite;
}

.transition-scene.active .ornament-ranting-bottom-right {
    animation:
        ornamentWindBottomRight 5.2s ease-in-out 1.2s infinite;
}

/* =========================================
   KEYFRAME GOYANG
========================================= */

@keyframes ornamentWindLeft {

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

    25% {
        transform: translateX(8px) rotate(2deg);
    }

    50% {
        transform: translateX(-8px) rotate(-2deg);
    }

    75% {
        transform: translateX(6px) rotate(1.5deg);
    }

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

}


@keyframes ornamentWindRight {

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

    25% {
        transform: translateX(-8px) rotate(-2deg);
    }

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

    75% {
        transform: translateX(-6px) rotate(-1.5deg);
    }

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

}


@keyframes ornamentWindSmallLeft {

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

    25% {
        transform: translateX(6px) rotate(1.5deg);
    }

    50% {
        transform: translateX(-6px) rotate(-1.5deg);
    }

    75% {
        transform: translateX(4px) rotate(1deg);
    }

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

}


@keyframes ornamentWindSmallRight {

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

    25% {
        transform: translateX(-6px) rotate(-1.5deg);
    }

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

    75% {
        transform: translateX(-4px) rotate(-1deg);
    }

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

}


@keyframes ornamentWindWayangLeft {

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

    25% {
        transform: translateX(5px) rotate(1deg);
    }

    50% {
        transform: translateX(-5px) rotate(-1deg);
    }

    75% {
        transform: translateX(4px) rotate(0.8deg);
    }

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

}


@keyframes ornamentWindWayangRight {

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

    25% {
        transform: translateX(-5px) rotate(-1deg);
    }

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

    75% {
        transform: translateX(-4px) rotate(-0.8deg);
    }

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

}


@keyframes ornamentWindBottomLeft {

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

    25% {
        transform: translateX(7px) rotate(1.5deg);
    }

    50% {
        transform: translateX(-7px) rotate(-1.5deg);
    }

    75% {
        transform: translateX(5px) rotate(1deg);
    }

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

}


@keyframes ornamentWindBottomRight {

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

    25% {
        transform: translateX(-7px) rotate(-1.5deg);
    }

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

    75% {
        transform: translateX(-5px) rotate(-1deg);
    }

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

}

/* =========================================
   POSISI ORNAMEN
========================================= */

.ornament-top-left,
.ornament-top-right {
    z-index: 5;
}

.ornament-under-top-left,
.ornament-under-top-right {
    z-index: 4;
}

.ornament-left,
.ornament-right {
    z-index: 3;
}

.ornament-wayang-left,
.ornament-wayang-right {
    z-index: 2;
}

.ornament-bottom-left,
.ornament-bottom-right {
    z-index: 3;
}

.ornament-ranting-bottom-left,
.ornament-ranting-bottom-right {
    z-index: 4;
}

.developer-footer {
  margin-top: 50px;
  padding: 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #6c2507;
}

.developer-footer p {
  margin-bottom: 10px;
  font-weight: 500;
}

.instagram-logo {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.instagram-logo:hover {
  transform: scale(1.2);
}


/* HP */
@media (max-width: 600px) {

    .ornament-top-left,
    .ornament-top-right {
        width: 155px;
    }

    .ornament-under-top-left,
    .ornament-under-top-right {
        width: 125px;
    }

    .ornament-left,
    .ornament-right {
        width: 105px;
    }

    .ornament-wayang-left,
    .ornament-wayang-right {
        width: 235px;
        z-index: 2;

    }

    .ornament-bottom-left,
    .ornament-bottom-right {
        width: 215px;
    }

    .ornament-ranting-bottom-left,
    .ornament-ranting-bottom-right {
        width: 155px;
    }

}

/* ==============================
RESPONSIVE DESIGN
============================== */

/* 📱 HP (≤600px) */
@media (max-width: 600px) {
  .cover-content {
    max-width: 360px;
    padding: 15px;
  }
  .invitation-text {
    font-size: 14px;
    line-height: 1.5;
  }
  .photo-placeholder {
    width: 140px;
    height: 180px;
  }
  h1 {
    font-size: clamp(28px, 10vw, 40px);
  }
  .event-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .countdown-item span {
    font-size: 24px;
  }
}

/* 📲 Tablet (601–1024px) */
@media (min-width: 601px) and (max-width: 1024px) {
  .cover-content {
    max-width: 600px;
    padding: 20px;
  }
  .invitation-text {
    font-size: 16px;
    line-height: 1.6;
  }
  .photo-placeholder {
    width: 160px;
    height: 220px;
  }
  h1 {
    font-size: clamp(40px, 8vw, 70px);
  }
  .event-card {
    flex: 1 1 45%;
    max-width: 45%;
  }
  .countdown-item span {
    font-size: 32px;
  }
}

/* 💻 Laptop/Desktop (≥1025px) */
@media (min-width: 1025px) {
  .cover-content {
    max-width: 800px;
    padding: 30px;
  }
  .invitation-text {
    font-size: 18px;
    line-height: 1.8;
  }
  .photo-placeholder {
    width: 200px;
    height: 260px;
  }
  h1 {
    font-size: clamp(55px, 12vw, 100px);
  }
  .event-card {
    flex: 1 1 40%;
    max-width: 400px;
  }
  .countdown-item span {
    font-size: 40px;
  }
}