:root {
    --primary-bg: #bfa1a1;
    --primary-text: #fff;
    --secondary-bg: #a98a6e;
    --accent: #817260;
    --flower-bg: #b9afa3;
    --button-bg: #222;
    --button-hover: #a98a6e;
    --box-bg: rgba(255,255,255,0.13);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    color: var(--primary-text);
    font-family: 'Playfair Display', serif;
    position: relative;
    overflow-x: hidden;
    background: #222;
}
.invitation-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-image: url('../assets/images/bg.jpg');
}
/* Overlay efek gelap agar teks tetap terlihat */
.invitation-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(35,34,34,0.5);
    z-index: 0;
}
.invitation-content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 250px;
}
.bride-groom {
    font-family: 'Great Vibes', cursive;
    font-size: 3em;
    margin-top: 30px;
    letter-spacing: 1px;
}
.date {
    font-size: 1.2em;
    margin: 16px 0 10px 0;
    letter-spacing: 2px;
    font-family: 'Playfair Display', serif;
}
.invited {
    margin: 2em 0 0.5em 0;
    font-size: 1em;
    color: #cacaca;
    font-family: 'Playfair Display', serif;
}
.guest-name {
    color: var(--flower-bg);
    font-size: 1.7em;
    margin-bottom: 18px;
    font-family: 'Playfair Display', serif;
}
.open-invitation {
    background: var(--button-bg);
    color: var(--primary-text);
    border: none;
    border-radius: 20px;
    padding: 8px 28px;
    font-size: 1.08em;
    cursor: pointer;
    margin-top: 22px;
    box-shadow: 0 3px 16px 0 rgba(0,0,0,0.2);
    transition: background 0.3s;
    font-family: 'Playfair Display', serif;
}
.open-invitation:hover {
    background: var(--button-hover);
    color: var(--primary-text);
}
/* Animasi bunga di sudut */
.corner-flower {
    position: absolute;
    width: 115px;
    height: 115px;
    opacity: 0.75;
    z-index: 2;
}
.corner-top-left   { top: 0; left: 0; animation: flowerMove 6s infinite alternate; }
.corner-top-right  { top: 0; right: 0; transform: scaleX(-1); animation: flowerMoveRev 7s infinite alternate; }
.corner-bottom-left{ bottom: 0; left: 0; transform: scaleY(-1); animation: flowerMoveVert 8s infinite alternate; }
.corner-bottom-right{ bottom: 0; right: 0; transform: scale(-1,-1); animation: flowerMoveVertRev 7.2s infinite alternate; }
/* Keyframes animasi */
@keyframes flowerMove {
    0% { transform: translate(0,0) scale(1,1);}
    100% { transform: translate(12px, 14px) scale(1.04,1.03);}
}
@keyframes flowerMoveRev {
    0% { transform: scaleX(-1) translate(0,0);}
    100% { transform: scaleX(-1) translate(-14px, 13px) scale(1.02);}
}
@keyframes flowerMoveVert {
    0% { transform: scaleY(-1) translate(0,0);}
    100% { transform: scaleY(-1) translate(12px,-9px) scale(1.06);}
}
@keyframes flowerMoveVertRev {
    0% { transform: scale(-1,-1) translate(0,0);}
    100% { transform: scale(-1,-1) translate(-14px,-12px) scale(1.04);}
}
@media (max-width: 600px) {
    .corner-flower { width: 65px; height: 65px; }
    .invitation-content { width: 70%; margin-top: 300px; }
    .bride-groom { font-size: 2em; margin-top: 10px; margin-bottom: 8px; }
    .date { font-size: 1em; margin: 8px 0 6px 0; }
    .invited { font-size: 0.95em; margin: 1em 0 0.2em 0; }
    .guest-name { font-size: 1.25em; margin-bottom: 10px; }
    .open-invitation { font-size: 0.95em; margin-top: 10px; padding: 6px 18px; }
}