/* Custom Styles yang sulit pakai Tailwind */
        .font-heading{ font-family: "Great Vibes", cursive; font-size: clamp(3rem, 14vw, 5.4rem); font-weight: 400; margin-bottom: 10px; color: #fff;}
        body { font-family: "Cormorant Garamond", serif; background-color: #fcfcfc; color: #4a4a4a; overflow-x: hidden; }
        .h2{ font-family: "Great Vibes", cursive; font-size: clamp(3rem, 12vw, 5.4rem); font-weight: 400; margin-bottom: 10px;}
        .h3 { font-family: 'Playfair Display', serif; font-size: 1.22rem; letter-spacing: 0.02em; text-transform: uppercase; color: #274d7a; margin-bottom: 18px;}
        .event-title { font-family: "Playfair Display", serif; letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.72rem; color: #8d6a33; text-align: center;} 

        
        /* Tema Warna Mildness */
        .text-theme { color: #334A66; } /* Warna coklat/emas kalem */
        .bg-theme { background-image: linear-gradient(135deg, rgb(109, 136, 183), rgb(39, 77, 122)); }
        .border-theme { border-color: #334A66; }


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


        
        /* Cover Section (Terkunci sampai tombol diklik) */
        #cover {
            position: fixed;
            top: 0; height: 100%;
            z-index: 50;
            background-image: radial-gradient(circle at 16% 10%, rgba(109, 136, 183, 0.16), transparent 24%), radial-gradient(circle at 86% 90%, rgba(212, 175, 99, 0.14), transparent 26%), linear-gradient(rgb(255 255 255 / 55%), rgb(218 236 255 / 78%)), url(../img/bg-blue-floral.jpeg);
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            transition: transform 1s ease-in-out, opacity 1s ease-in-out;
                overflow:hidden;

        }


        .ornament{
    position:absolute;
    z-index:1;
    pointer-events:none;
    user-select:none;
        z-index: 4;
}

.ornament-top{
    top: 190px;
    left: 10px;
    width: 197px;
}

.ornament-bottom{
    right: -5px;
    bottom: 168px;
    width: 190px;
}

/* Panel berada di atas ornament */
.panel_tamu{
    position:relative;
    z-index:2;
}

        .panel_tamu {
            background: white;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            align-content: center;
            border-radius: 999px 999px 16px 16px;
            width: min(88vw);
            height: min(55vh);
            padding: 58px 24px 0px;
            border: 1px solid rgb(209 186 152 / 78%);
            backdrop-filter: blur(16px);
            box-shadow: 0 24px 70px rgba(27, 43, 68, 0.18);
        }


        .panel_tamu #guest-name{
            border-top:  1px solid rgba(217, 181, 109, 0.7);
            border-bottom: 1px solid rgba(217, 181, 109, 0.7);
        }

        #home {
            background-image: linear-gradient(rgb(255 255 255 / 14%), rgb(255 255 255 / 0%)), url(../img/2.webp);
            background-size: cover;


        }

        /* Kelas untuk animasi buka undangan (geser ke atas) */
        .cover-opened {
            transform: translateY(-100%);
            opacity: 0;
            pointer-events: none;
        }
        
        /* Mencegah scroll saat cover masih aktif */
        .no-scroll { overflow-y: hidden; }
        
        /* Floating Audio Button */
        #audio-control {
            position: fixed;
            bottom: 20px; right: 20px;
            z-index: 40;
            background: white;
            border-radius: 50%;
            width: 45px; height: 45px;
            display: none; /* Sembunyikan dulu sampai cover dibuka */
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            cursor: pointer;
            color: #334A66;
        }
        
        .spin { animation: spin 4s linear infinite; }
        @keyframes spin { 100% { transform: rotate(360deg); } }


        .pengantin-couple{
    background: linear-gradient(180deg, rgb(255 255 255 / 70%), rgb(228 240 255 / 85%)), url(../img/bg-blue-floral.jpg);
    background-size: cover;
       background-position: center top;
        }

       img.ornament-pengantin{
        width: 160px;
        transform: rotate(42deg)!important;
        margin-bottom: -40px;
        justify-self: center;

}
    

        .card-mempelai{
            background: rgba(255, 255, 255, 0.68);
            border-radius: 30px;
            padding: 24px 16px;
            box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
        }

        .dompet-digital{
               background: radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.78),
      transparent 20%
    ),
    radial-gradient(
      circle at 88% 92%,
      rgba(109, 136, 183, 0.16),
      transparent 24%
    ),
    linear-gradient(180deg, #f8faff, #dce8f8);
                           border-radius: 30px;
            padding: 24px 16px;
            border: 1px solid rgba(255, 255, 255, 0.78);
box-shadow: 0 22px 58px rgba(27, 43, 68, 0.14);

        }

        /* Custom Scrollbar untuk Box Ucapan */
.custom-scrollbar::-webkit-scrollbar { 
    width: 6px; 
}
.custom-scrollbar::-webkit-scrollbar-track { 
    background: #f1f1f1; 
    border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb { 
    background: #8C7B6D; /* Warna tema coklat/emas Anda */
    border-radius: 10px; 
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #7a6a5d;
}


#countdown-section{
    background: radial-gradient(
      circle at 12% 8%,
      rgba(255, 255, 255, 0.78),
      transparent 20%
    ),
    radial-gradient(
      circle at 88% 92%,
      rgba(109, 136, 183, 0.16),
      transparent 24%
    ),
    linear-gradient(180deg, #f8faff, #dce8f8);
}
/* Padam tanda "}" yang berlebihan di bawah ini */


.event-day {
  font-family: "Playfair Display", serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.event-date-number {
  margin-top: 0px;
  font-family: "Playfair Display", serif;
  font-size: 3.4rem;
  line-height: 0.95;
  color: #6d88b7;
}

.event-month {
  margin-top: 4px;
  font-family: "Playfair Display", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6d88b7;
}


/* ==========================================
   RESPONSIVE COVER DESKTOP (SPLIT SCREEN)
   ========================================== */

/* Pengaturan untuk Layar HP / Tablet */
@media (max-width: 1023px) {
    #cover { 
        left: 0; 
        width: 100%; 
    }
}

/* Pengaturan untuk Layar Desktop / Laptop */
@media (min-width: 1024px) {
    #cover { 
        left: auto;
        right: 0; /* Merapat ke kanan */
        width: auto; /* Mengisi sepertiga layar */
    }
    
    /* Menggeser tombol audio agar tidak menabrak batas kiri di desktop */
    #audio-control {
        bottom: 20px;
        right: 20px;
    }
}