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


    body {
        background-color: #FDF3EE;
        }

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

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: scale(1);
            }
            to {
                opacity: 0;
                transform: scale(1.05);
            }
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes pulse-soft {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.7;
            }
        }

       
        /* Utility classes */
        .fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
            opacity: 0;
        }

        .fade-out-active {
            animation: fadeOut 0.8s ease-out forwards;
        }

        .animate-float {
            animation: float 3s ease-in-out infinite;
        }

        .animate-pulse-soft {
            animation: pulse-soft 2s ease-in-out infinite;
        }

        .font-serif {
            font-family: 'Playfair Display', 'Cormorant Garamond', serif;
        }

        .font-sans {
            font-family: 'Inter', sans-serif;
        }

        .font-arabic {
            font-family: 'Amiri', serif;
            line-height: 1.8;
            letter-spacing: 0.5px;
            color : #62642c;
            font-size: 2.5rem;
        }

        .font-latin {
            font-family: 'Arapey', serif;
            line-height: 1.6;
            color : #62642c;
            font-size: 2.5rem;
        }

        html {
            scroll-behavior: smooth;
        }

        /* Hero section background */
        

        /* Section reveal on scroll */
        .section-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

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

        /* Smooth transitions */
        * {
            transition-property: background-color, border-color, color, fill, stroke;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        } 

        /* Prevent transition on animations */
        .no-transition * {
            transition: none !important;
        }

        /* Gallery hover effects */
        .gallery-item {
            overflow: hidden;
            position: relative;
        }

        .gallery-item img {
            transition: transform 0.5s ease-out;
        }

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

        .gallery-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0);
            transition: background 0.3s ease-out;
        }

        .gallery-item:hover .gallery-overlay {
            background: rgba(0, 0, 0, 0.3);
        }

        .bg-creamy {
         background-color: #FDF3EE; /* Warna krem senada dengan asset kertas */
        }

        .font-akad {
            font-family: 'Playfair Display', 'Cormorant Garamond', serif;
            color: bisque;
        }

        .font-title {
        font-family: 'Great Vibes', cursive;
        font-size: 2.8rem;
        }

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

.btn-open {
    background-color: #9A8C7F; /* Warna taupe/coklat sesuai gambar */
    color: white;
    padding: 10px 45px;
    border-radius: 9999px;
    font-size: 1.1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

/* Penyesuaian font-serif agar lebih mirip gambar */
.font-serif {
    font-family: 'Playfair Display', serif;
}

/* Section reveal on scroll */
.section-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

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

* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.section-decor::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 320px;
  height: 320px;
  background-image: url('Asset/elemen-bunga.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: blur(0.5px);
  transform: scaleX(-1);
  z-index: 0;
}

/* 🌸 Bunga kanan atas */
.section-decor::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 320px;
  height: 320px;
  background-image: url('Asset/elemen-bunga.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: blur(0.5px);
  z-index: 0;
}

/* 🌿 Bunga bawah kiri */
.bottom-left {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 320px;
  height: 320px;
  background-image: url('Asset/elemen-bunga.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: blur(0.5px);
  transform: scale(-1, -1);
}

/* 🌿 Bunga bawah kanan */
.bottom-right {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 320px;
  height: 320px;
  background-image: url('Asset/elemen-bunga.png');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.5;
  filter: blur(0.5px);
  transform: scaleY(-1);
}