/* --- 0. RESET PENTING --- */
*, *::before, *::after {
    box-sizing: border-box; /* KUNCI: Mencegah padding menambah lebar elemen */
    margin: 0;
    padding: 0;
}

body {
    font-size: 1.1rem;
    font-family: sans-serif;
    overflow-x: hidden; /* Tetap pertahankan ini agar tidak bisa digeser horizontal */
    width: 100%;
    background-color: #eee;
    touch-action: pan-y;
    position: relative;
    overscroll-behavior-y: none; /* Mencegah pull-to-refresh */
    
    /* GANTI INI: Gunakan dvh agar tinggi body selalu akurat */
    min-height: 100dvh; 
    height: auto; /* Biarkan otomatis agar bisa scroll ke bawah saat isi muncul */

}
/* Tambahkan class pembantu ini di bawah body */
body.no-scroll {
    overflow: hidden !important;
    height: 100dvh !important;
    position: fixed; /* Mengunci total layar saat cover masih ada */
}



section {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden; /* Tambahkan ini */
    margin-top: -1px; /* Trik tambahan untuk merapatkan section */
}

/* Container utama: Kunci lebar maksimal agar tetap tampilan mobile */
.container-cover {
    position: fixed; /* UBAH KE FIXED */
    top: 0;
    left: 50%;
    transform: translateX(-50%); /* Tetap di tengah untuk tampilan desktop */
    width: 100%;            /* Default untuk HP: Full lebar */
    max-width: 500px;       /* KUNCI: Di laptop, lebar tidak akan lebih dari 500px */
    height: 100dvh;
    margin: 0 auto;  /* KUNCI SAAT DI BUKA DI LAPTOP/KOMPUTER KONTEN TETEP DI TENGAH */
    z-index: 9999; /* Pastikan menutupi semua konten */
    overflow: hidden;
    text-align: center;
    background-image: url(bgtes.jpeg);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    
    /* TAMBAHKAN TRANSISI UNTUK EFEK TERANGKAT */
    transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Class pemicu saat tombol diklik (JS akan menambah class ini) */
.container-cover.slide-up {
    transform: translate(-50%, -100%); /* Efek terangkat ke atas keluar layar */
}

/* 2. CONTAINER UNTUK ISI (Bisa memanjang/scroll) */
.container-isi {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    min-height: 100dvh; /* Minimal satu layar, tapi BISA LEBIH */
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    background-image: url(bgtes.jpeg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Jangan pakai overflow: hidden di sini */
}

.container-isi h3{
font-size: 20px;
}

.isi-awal {
    line-height: 1.2rem;
}



/* Foto Pengantin */
.photo-container {
    width: 100%;
    height: 60%;           /* Foto ambil 60% tinggi layar */
    flex-shrink: 0;        /* Foto tidak boleh mengecil */
    overflow: hidden;
    position: relative;
}

.img-mempelai {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: blur(0.3px) brightness(1.05);
    /* Efek gradasi pudar di bawah foto */
    -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
}

/* Area Tulisan */
/* KUNCI: Content Area ambil sisa ruang (45%) di bawah foto */
.content-area {
    position: relative;
    flex-grow: 1;        /* Ambil sisa ruang bawah */
    display: flex;
    flex-direction: column;
    justify-content: space-evenly; /* Bagi jarak antar teks secara merata */
    align-items: center;
    padding: 15px 20px 25px 20px; /* Padding: atas, kanan, bawah, kiri */
    z-index: 5;
    background: transparent;
    border-radius: 20px 20px 0 0; /* Opsional: Bikin lengkungan di atas area teks */
    /*margin-top: -30px; Hapus margin negatif yang menyebabkan tabrakan */
}


/* Pastikan tulisan Samuel & Grace tidak punya margin berlebih */
.content-area h1 {
    margin: 10px 0;
    line-height: 1.2;
    font-family: 'Bodoni Moda', serif;
    font-size: 2rem;
    color: #1a3a6d; /* Navy sesuai gambar */

}
.content-area a { font-family: 'Roboto Slab', serif;
    color: white;

}
.content-area p {
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    color: #1a3a6d; /* Navy sesuai gambar */
}

/* BINGKAI BUNGA (OVERLAY) */
.full-frame-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: fill; /* Memaksa bingkai menutup seluruh kotak container */
    z-index: 30;      /* Angka tertinggi: menimpa foto dan tulisan */
    pointer-events: none; /* WAJIB: Supaya jari bisa 'tembus' bunga untuk klik tombol */

    /* -- TAMBAHKAN KODE ANIMASI DI BAWAH INI -- */
    
    /* PEMBAHARUAN ANIMASI */
    /* Animasi 1: masukKiri (1.5 detik, sekali saja) */
    /* Animasi 2: bungaHidup (4 detik, berulang selamanya/infinite) */
    animation: 
        bungaBernapas 4s ease-in-out 1.2s infinite;
    /* Supaya pergerakannya halus */
    will-change: transform;
}
/* Tombol Open harus punya z-index lebih tinggi dari tulisan agar bisa diklik */
.btn-open-container {
    position: relative;
    z-index: 100; /* Lebih tinggi dari bunga agar bisa diklik */
    border: none;
    background: none;
}
.btnATAS{
    border-radius: 30px;
    font-size: 14px;
    margin-top: 20px;
    background-color: #1a3a6d; /* Navy sesuai gambar */;
}


/* --- PERBAIKAN AREA PHOTO WRAPPER --- */

/* Untuk number 1 nya aku using maincontainer makanya antar section gak kelihatan jarak */

        /* 2. Wrapper Foto dengan Position Relative untuk Z-Index */
        /* --- PERBAIKAN AREA COVER --- */

.header-text {
    display: block; /* Memastikan dia elemen blok mandiri */
    width: 100%;
    text-align: center;
    margin-top: 50px !important;    /* JARAK DARI ATAS LAYAR */
    margin-bottom: 40px !important; /* JARAK KE FOTO - Tambah angka ini jika masih kurang */
    font-family: 'Bodoni Moda', serif;
    font-size: 1.2rem;
    color: #1a3a6d;
    position: relative;
    z-index: 10;
}

.photo-wrapper {
    position: relative;
    display: flex;
    z-index: 1;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px; /* Jarak dari foto ke nama pengantin */
    width: 100%;
}

.writeawal {
    position: relative;
    margin: 0 auto;
    margin-top: 5px; /* Tambahan jarak jika dirasa masih mepet */
    padding: 5px;
    text-align: center;
    z-index: 1;
    width: 100%;
}

.writeawal h1 {
    font-family: 'Bodoni Moda', serif;
    font-size: 2rem;
    color: #1a3a6d; /* Navy sesuai gambar */
}
.writeawal p {
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    color: #1a3a6d; /* Navy sesuai gambar */
}


        /* FOTO UTAMA (Layer Tengah) */
        .main-img {
            width: 200px;
            height: 300px;
            object-fit: cover;
            border-radius:150px; /* Bentuk Kapsul/Oval */
            border: 6px solid white;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            position: relative;
            z-index: 2 /* Di atas bunga latar */
        }

        /* 1. Bunga Depan (Posisi Standby di Kanan Luar) */
.flower-front {
    position: absolute;
    width: 70%; 
    max-width: 150px;
    top: 10%;
    left: 25%;
    /* Standby: geser 100% ke kanan dan transparan */
    transform: translate(100%, -50%) scale(0.8); 
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity; /* Tambahkan untuk animasi lebih mulus */
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    /* Hapus baris ANIMASI SUPAYA TIDAK JALAN DULUAN SEBELUM DI PENCET OPEN
    INVITATION*/
}

.flowerkedua {
    position: absolute;
    width: 70%; 
    max-width: 150px;
    
    /* Koordinat target */
    top: 55%;
    left: 50%;
    /* FIX: Standby di KIRI (-150%), bukan kanan (100%) */
    transform: translate(-150%, 0) scale(0.7); 
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    will-change: transform, opacity; /* Tambahkan untuk animasi lebih mulus */
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    /* Hapus baris ANIMASI SUPAYA TIDAK JALAN DULUAN SEBELUM DI PENCET OPEN
    INVITATION*/
}

/* Class pemicu saat tombol Open Invitation diklik */
.flowerkedua.show-flower {
    opacity: 1;
    transform: translate(0, 0) scale(1); /* Kembali ke posisi asli */
    
    /* KITA KASIH ANIMASI MASUK KIRI KE KANAN LALU LOOPING HIDUP */
    animation: 
        masukKiri 1.2s ease-out forwards, 
        bungaHidupPresisi 4s ease-in-out 1.2s infinite;
}

/* 2. Class Pemicu (Dipanggil JS saat klik Open) */
.animate-flower {
    /* masukKanan: jalan 1.2 detik, sekali saja (forwards) */
    /* bungaBernapas: mulai setelah 1.2 detik, jalan selamanya (infinite) */
    animation: 
        masukKanan 1.2s ease-out forwards, 
        bungaBernapas 4s ease-in-out 1.2s infinite;
}

/* ini untuk gambar cover paling bawah */
.coverflower1 {
position: absolute;
    width: 70%; 
    max-width: 150px;
    top: -25%; /* Gunakan % agar lebih adaptif */
    left: 5%;
    /* opacity: 0; <--- HAPUS INI, Biar AOS yang atur */
/* transition: all 1.2s ... <--- HAPUS INI agar tidak bentrok dengan durasi AOS */

    z-index: 1;
    pointer-events: none;
    will-change: transform, opacity; /* Tambahkan untuk animasi lebih mulus */
    
    /* Hapus baris ANIMASI SUPAYA TIDAK JALAN DULUAN SEBELUM DI PENCET OPEN
    INVITATION*/
}


.coverflower2 {
    position: absolute;
    width: 70%; 
    max-width: 150px;
    
    /* Koordinat target */
    top: 55%;
    left: 50%;

    /* opacity: 0; <--- HAPUS INI, Biar AOS yang atur */
/* transition: all 1.2s ... <--- HAPUS INI agar tidak bentrok dengan durasi AOS */

    z-index: 5;
    pointer-events: none;
}

.coverflower1, .coverflower2 {
    display: inline-block; /* Tambahkan ini */
}
/* Hilangkan animation dari class utama, pindahkan ke sini */
.coverflower1.aos-animate {
    /* Gunakan animation-fill-mode: forwards agar tidak reset ke awal */
    animation: coverbungalooping1 6s ease-in-out 1.5s infinite; 
}

.coverflower2.aos-animate {
    animation: coverbungalooping2 6s ease-in-out 1.5s infinite; 
}

/* Pengaturan khusus untuk Laptop/Desktop */
@media (min-width: 1024px) {
    .coverflower1 {
        top: -40%; /* Sesuaikan angka ini sampai pas di layar laptop */
        left: 5%;
        max-width: 200px; /* Opsional: perbesar sedikit di laptop */
    }
}


@keyframes coverbungalooping1 {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.05) rotate(2deg); } /* Tambah sedikit rotasi biar natural */

}

/* Update Keyframes Bunga 2 */
@keyframes coverbungalooping2 {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.05) translateY(-10px); 
    }
}


/* --- 1. DEFINISIKAN ANIMASI (KEYFRAMES) --- */
/* 1. Animasi Masuk dari Kiri */
/* ANIMASI GABUNGAN UNTUK SISI KIRI */
@keyframes masukKiri {
   0% {
        /* Mulai dari kiri luar */
        transform: translate(-50px, 20px) rotate(-15deg) scale(0.7);
        opacity: 0;
    }
    100% {
        /* Berhenti TEPAT di koordinat top:62% & left:60% */
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* ANIMASI MASUK KANAN */
/* ANIMASI GABUNGAN: MASUK KANAN + BUNGA HIDUP */
/* --- KEYFRAMES BARU AGAR TIDAK KEMBALI KE KANAN --- */

/* Animasi 1: Hanya untuk pergerakan masuk dari kanan ke tengah */
@keyframes masukKanan {
    0% { 
        transform: translate(100%, -50%) scale(0.8); 
        opacity: 0; 
    }
    100% { 
        /* Berhenti tepat di tengah (-50%) */
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1; 
    }
}

/* Animasi 2: Hanya untuk efek bernapas (tetap diam di koordinat tengah) */
@keyframes bungaBernapas {
    0% { 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        /* Membesar sedikit tanpa mengubah posisi horizontal/vertikal */
        transform: translate(-50%, -50%) scale(1.05); 
    }
    100% { 
        transform: translate(-50%, -50%) scale(1); 
    }
}
@keyframes bungaHidupPresisi {
    0%, 100% { 
        transform: translate(0, 0) scale(1); 
    }
    50% { 
        /* Bergerak naik sedikit (hidup) tapi tetap di jalurnya */
        transform: translate(0, -5px) scale(1.03) rotate(1deg); 
    }
}


/* 3. Animasi Ayunan Halus (Opsional) */
@keyframes ayunBunga {
    0% { transform: rotate(0deg); }
    50% { transform: rotate(1deg); } /* Miring sangat tipis */
    100% { transform: rotate(0deg); }
}

:root {
    --pink: #f14e95;
    --cream: #F5E6AD;
    --bg-dark: #0a0a0a;
    --theme-color: #5d757d;
    --shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
/* --- 1. HERO / COVER SECTION --- */

/* Update CSS untuk efek terangkat */
#hero {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("BGAWAL.png");
    background-size: cover;
    background-position: center;
    /* Ubah transition agar fokus ke pergerakan posisi (transform/top) */
    /* Gunakan cubic-bezier agar gerakan awalnya lambat lalu cepat (elegan) */
    transition: transform 1.5s cubic-bezier(0.65, 0, 0.35, 1), opacity 1.5s ease-in-out;
    will-change: transform; /* Optimasi performa animasi */
}

#hero.fade-out {
    /* Efek terangkat ke atas (slide up) */
    transform: translateY(-100%); 
    opacity: 0.8; /* Biarkan sedikit terlihat saat naik agar dramatis */
    pointer-events: none;
}
.hero h1 {
    font-size: 2rem;
}

.hero h4 {
    font-family: 'Sacramento', cursive;
    font-size: 5rem;
}

.hero a {
    color: var(--pink);
    background-color: white;
    border-radius: 50px;
    font-size: 16px;
    transition: 0.3s;
}

.hero a:hover {
    transform: scale(1.1);
    background-color: var(--pink);
    color: white;
}



/* KUNCI: Menaruh gambar love di tengah-tengah layar */

/* --- PERBAIKAN FINAL POSISI LOVE & GRACE --- */


.lopemempelai {
    width: 100% !important;
    margin-top: 20px !important;    /* JARAK DARI TOMBOL FOLLOW SAMUEL */
    margin-bottom: 60px !important; /* MEMBIARKAN TEKS "THE BRIDE" MENYENTUH SEDIKIT JIKA PERLU */
    text-align: center !important;  
    position: relative;
    clear: both !important;
    display: block !important;
    z-index: 5; /* Di bawah teks melengkung */
}

.lovepengantin {
    width: 150px !important; /* Perkecil sedikit agar manis di HP */
    height: auto;
    display: inline-block !important; 
    margin: 0 auto !important;
    animation: lopeBernapas 4s ease-in-out infinite !important;
}

#section-grace {
    margin-top: 10px !important; 
    position: relative;
    z-index: 15; /* Di atas segalanya agar teks melengkung terlihat jelas */
    text-align: center;
}

/* Kunci agar teks melengkung mengalah dan turun */
#section-grace svg {
    margin-top: 20px !important; /* Jarak Teks dari bunga lope */
    margin-bottom: 0px !important;
}

/* Animasi khusus lope biar tetap di tengah */
@keyframes lopeBernapas {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* --- 2. MAIN CONTENT (Awal) --- */

/* Pastikan elemen yang punya AOS di halaman awal tetap terlihat jika JS lambat */
#awal [data-aos] {
    opacity: 0;
    transition-property: transform, opacity;
}

#awal .aos-animate {
    opacity: 1;
}

/* --- 2. MAIN CONTENT (Perbaikan untuk AOS) --- */
#main-content {
    /* Jangan gunakan display: none di sini jika ingin AOS lancar secara instan */
    /* Kita akan biarkan JS yang menangani kemunculannya */
    visibility: hidden; 
    height: 0;
    overflow: hidden;
}

#main-content.show-content {
    visibility: visible;
    height: auto;
    overflow: visible;
}
section {
    display: block; /* Biarkan section tetap block agar AOS bisa menghitung posisinya nanti */
}

.container-awal .content-wedding {
    margin-top: auto;
    line-height: 1.2;
}

.container-awal h1 { font-size: 1.5rem; }
.container-awal h4 {
    font-family: 'Sacramento', cursive;
    font-size: 4rem;
}

/* Efek Zoom In pada Background Carousel */
.carousel-item.active .w-100 {
    animation: zoomBackground 15s infinite alternate;
}

@keyframes zoomBackground {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

.bg-custom h1 {
    font-family: "Noto Kufi Arabic", sans-serif;
    font-size: 28px;
    margin-top: 50px;
    margin-bottom: 40px;
}
.bg-custom h2{
    font-family: 'Sacramento', cursive;
    font-size: 34px;
}



/* --- 3. SECTION MEMPELAI --- */
.akad-vertical {
    /* 1. Bikin teks mengalir vertikal dari atas ke bawah */
    writing-mode: vertical-rl;
    
    /* 2. KUNCI: Putar 180 derajat agar 'perut' huruf menghadap ke KANAN */
    transform: rotate(180deg);
    
    /* 3. Paksa satu baris agar tidak numpuk per huruf */
    white-space: nowrap;
    display: inline-block;

    /* Styling Visual */
    font-family: 'Bodoni Moda', serif;
    font-size: 1.5rem;
    letter-spacing: 8px;
    color: var(--navy);
    line-height: 1;
}

.cont-akad {
    background-color: rgba(206, 217, 239, 0.7);
    display: flex;
    justify-content: center; /* Tengah horizontal */
    align-items: center;     /* Tengah vertikal */
}

.card-akad {
    background-color: #f0f2f5;
}
.card-resepsi {
    background-color: #f0f2f5;
}

/* Class khusus untuk teks vertikal di sisi KANAN */
.resepsi-vertical {
    writing-mode: vertical-rl;
    /* Tanpa rotate agar hadap kiri/dalam */
    font-family: 'Bodoni Moda', serif;
    font-size: 1.5rem;
    color: var(--navy);
    letter-spacing: 4px;
    display: inline-block;
    line-height: 1;
}

.cont-resepsi {
    background-color:  rgba(206, 217, 239, 0.7);
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100%;
}

.event-card {
    
    border-radius: 15px;
    padding: 0px;
    margin: 20px auto;
    max-width: 400px;
    box-shadow: 4px 4px 1px rgba(0, 0, 0, 0.3);
}

.border-left-custom {
    border-left: 2px solid var(--cream);
    padding-left: 15px;
}


.border-bottom {
    border-bottom: 1px solid black !important;
}

/* Garis pembatas di sisi kanan */
.border-right-custom {
    border-right: 2px solid var(--cream);
    padding-right: 15px;
}
/* Kontainer Tombol: Harus selebar kartu agar bisa menarik isi ke tengah */
.btn-lokasi {
    display: flex;
    justify-content: center; /* INI KUNCI KE TENGAH */
    align-items: center;
    width: 100%;           /* Hapus max-width agar bisa ke tengah kartu */
    margin-top: 20px;
    padding-bottom: 10px;
    clear: both;
}

/* Tombolnya saja yang diberi warna Navy dan bentuk Kapsul */
.btn-lokasi .btn {
    background-color: #1a3a6d !important; /* Biru Navy */
    color: #ffffff !important;           /* Teks Putih */
    font-size: 13px;
    border-radius: 30px;                 /* Bentuk Kapsul */
    padding: 8px 20px;                   /* Ukuran tombol */
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;                            /* Jarak ikon ke teks */
}



/* --- 4. SECTION AGENDA (CARD) --- */
.container-acara .card {
    width: 100%;
    max-width: 450px;
    border-radius: 50px;
    border: none;
    margin: 0 auto;
}

.card-body h2 {
    font-family: 'Imperial Script', cursive;
    font-size: 3rem;
    color: var(--theme-color);
}

.card-body .BGagenda {
    background-color: var(--theme-color) !important;
    border-radius: 50px;
    font-family: 'Sacramento', cursive;
    color: whitesmoke;
    font-size: 2.5rem;
    padding: 10px;
}

.container-acara .card .card-body img {
    width: 60%;
    max-width: 250px;
    display: block;
    margin: 0 auto 15px; /* Memperbaiki posisi gambar ke tengah */
}


.birdcontainer img{
    width: 100%;
    max-width: 150px;
}

.text-love {
    font-size: 16px;
    font-family: sans serif;
}

.masonry-wrapper {
  column-count: 3; /* Jumlah kolom di desktop */
  column-gap: 10px; /* Jarak antar kolom */
  margin-top: -20%;
}

.masonry-wrapper img {
  display: inline-block;
  width: 100%;
  border-radius: 8px;
}

/* Agar di HP jadi 2 kolom */
@media (max-width: 768px) {
  .masonry-wrapper {
    column-count: 2;
  }
}
@media (max-width: 320px) {
    .content-area h1 {
        font-size: 1.5rem; /* Perkecil nama pengantin di layar sangat sempit */
    }
}

/* Container vertikal yang menampung bunga dan teks */
/* 1. Container utama (Tetap) */
.lovestory-vertical {
  display: flex;
  flex-direction: column; 
  align-items: center;
  justify-content: center;
  position: relative;   
 /* Tambahkan margin-left jika masih terasa terlalu mepet ke biru */
  margin-left: 5px;         
}

.induk-teks-love {
  position: relative;
  /* Geser seluruh blok AOS ke kiri */
  /* Coba -20px dulu, kalau kurang mepet baru tambah ke -30px atau -40px */
  left: -25px; 
  z-index: 10;
}

.lovestory-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 5px;
  font-size: 2rem; 
  color: #333;
  display: block;
  margin: 0; /* Reset margin agar tidak tabrakan */
}


/* 3. Ukuran bunga (Tetap) */
.love1, .love2 {
  max-width: 100px; 
  height: auto;
  display: block;
  animation: lopeBernapas 4s ease-in-out infinite;
  position: relative;
  z-index: 10; /* Menaruh gambar di atas layer lain */
}

/* 4. Jarak bunga (Tetap) */
.gambarlove1 {
  margin-bottom: 40px; 
}

.gambarlove2 {
  margin-top: 40px; 
}

/* 5. BAGIAN YANG DIUBAH - Biar Perut Huruf Hadap Kiri */
.lovestory-vertical h1 {
  /* 1. KUNCI: Membuat teks mengalir vertikal (Atas ke Bawah) */
  writing-mode: vertical-rl; 
  
  /* 2. Menghilangkan rotasi agar perut huruf hadap Kiri default */
  transform: none; 

  /* Styling Visual */
  font-family: 'Playfair Display', serif; 
  text-transform: uppercase;
  letter-spacing: 0.1em; 
  font-size: 1.8rem;       
  color: #333;
  
  /* Hapus margin h1 agar tidak nendang kolom sempit */
  margin: 0 !important; 
  white-space: nowrap;
  display: inline-block;
}

.lovestory-card {
    background-color: rgba(206, 217, 239, 0.7);
    border-radius: 0 0 20px 20px; 
    padding: 0; /* Penting: nol-kan padding agar gambar mepet ke atas */
    position: relative;
    overflow: hidden;
    /* HAPUS atau KOMENTARI clip-path karena sering bermasalah di mobile */
    /* clip-path: ellipse(...) <- Hapus ini */
}

/* 2. Area Gambar (Kunci Bentuk Lengkungan) */
.arch-image {
    width: 100%;
    height: 400px; /* Sesuaikan tinggi */
    overflow: hidden;
    
    /* Gunakan border-radius yang sangat besar di sisi atas saja */
    /* Format: Top-Left Top-Right Bottom-Right Bottom-Left */
    border-radius: 250px 250px 0 0; 
    
    /* Berikan margin agar lengkungan tidak terpotong tepi layar */
    margin: 0; 
    position: relative;
    z-index: 1;
}

/* 3. Pastikan Carousel & Gambar mengikuti bentuk Arch */
/* Pastikan gambar di dalam carousel mengikuti bentuk lengkung */
.arch-image .carousel, 
.arch-image .carousel-inner, 
.arch-image .carousel-item,
.arch-image img {
    height: 100%;
    width: 100%;
    border-radius: 250px 250px 0 0; /* Harus sama dengan .arch-image */
    object-fit: cover;
}

/* 4. Area Teks di bawah gambar */
.text-love {
    background-color: rgba(206, 217, 239, 0.7);
    padding: 30px 25px 120px 25px !important;
    text-align: center;
}


/* Mengatur warna/ukuran panah navigasi agar terlihat di atas foto */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-color: rgba(26, 58, 109, 0.5); /* Warna Navy transparan */
    border-radius: 50%;
    background-size: 50%;
}

/* Mengatur durasi transisi slide (Opsional agar lebih halus) */
.carousel-item {
    transition: transform 0.8s ease-in-out, opacity 0.8s ease-in-out;
}



.text-love {
    padding: 20px 25px 120px 25px !important; /* Jarak bawah 120px supaya tidak tertutup menu */
}

.text-love p {
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    line-height: 1.8; /* Memberi ruang antar baris agar tidak sesak */
    color: #444;
    text-align: center; /* Mengikuti style judul "Awal Cerita" yang center */
    margin-bottom: 25px; /* Jarak antar paragraf */
    word-spacing: 1px;
}
.text-love h4 {
    font-family: "sacramento", cursive;
    font-size: 36px;
    padding-bottom: 30px;
}


.title-story {
    font-family: 'Bodoni Moda', serif;
    font-size: 1.6rem;
    color: #1a3a6d;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    display: inline-block;
    padding-bottom: 5px;
}


/* Galleri FOTO */

/* CSS tambahan untuk mengatur tinggi dan tampilan agar mirip gambar */
        .box {
            background-color: #6c757d; /* Warna abu-abu mirip gambar */
            border-radius: 20px;       /* Sudut membulat */
            margin-bottom: 15px;       /* Jarak antar kotak */
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            overflow: hidden;
        }

        /* Mengatur tinggi spesifik agar proporsional */
        .tall-box { height: 400px; }
        .short-box { height: 192.5px; } /* Setengah dari tall-box dikurangi margin */
        .wide-box { height: 200px; }

/* --- 6. WEDDING GIFT & KOMENTAR --- */

/* Container Utama */
.BGWG {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Mengikuti tinggi konten di dalamnya secara otomatis */
    height: auto; 
    overflow: hidden;
    /* Memberi sedikit ruang di atas & bawah agar teks tidak nempel ujung gambar */
    padding: 30px 0; 
}

/* Gambar Pohon (Background) */
.BGWG img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Memaksa gambar selalu setinggi kontainer */
    object-fit: cover; 
    z-index: 1;
    /* --- ANIMASI BARU --- */
    animation: breathing 12s ease-in-out infinite alternate;
  
}

/* Kotak Teks (WG) */
.WG {
    position: relative;
    z-index: 2;
    background-color: rgba(206, 217, 239, 0.7);
    border-radius: 20px;
    padding: 25px; /* Jarak teks ke tepi kotak biru transparan */
    max-width: 90%; 
    /* Menghilangkan margin luar agar tidak mendorong kontainer */
    margin: 0 auto;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1); /* Tambah bayangan halus agar lebih 'deep' */
}

.WG h5 {
    font-size: 2.5rem;
    font-family: 'Sacramento', cursive;
}


/* Keyframes untuk efek bernafas (Zoom perlahan) */
@keyframes breathing {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1); /* Gambar membesar 10% perlahan */
    }
}

/* Styling Section Utama */
.section-ucapan {
    background-color: #eee;
    overflow: hidden;
}

/* Kotak Putih (Card) */
.kartu-ucapan {
    background-color: #ffffff;
    max-width: 500px;
    border-radius: 1.5rem; /* Rounded corners */
    padding: 2.5rem;       /* Ruang dalam agar form tidak mepet pinggir */
    position: relative;    /* Penting: Jadi patokan posisi bunga */
    overflow: hidden;      /* Penting: Agar bunga tidak keluar dari sudut rounded */
    border: 1px solid rgba(0,0,0,0.05);
}

/* Bungkus Form agar di atas bunga */
.konten-form {
    position: relative;
    z-index: 2; /* Form di depan bunga */
}

/* Container Bunga */
.gambarkomen {
    display: flex;
    position: absolute;
    bottom: 0;             /* Mepet ke dasar kartu */
    left: 0;
    width: 100%;
    z-index: 1;            /* Bunga di belakang form */
    pointer-events: none;  /* Klik mouse tetap bisa tembus ke input form */
    line-height: 0;
}

/* Pengaturan Gambar Bunga */
.gambarkomen img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: bottom; /* Menghilangkan celah pixel di bawah */
    opacity: 0.9;
}




/* Styling Tambahan Tombol */
.btn-kirim {
    max-width: 250px;
    padding: 0.5rem 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Ayunan untuk bunga KIRI (Mulai ke Kanan dulu) */
@keyframes swayKiri {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(4deg); } 
  100% { transform: rotate(0deg); }
}

/* Ayunan untuk bunga KANAN (Mulai ke Kiri dulu) */
@keyframes swayKanan {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-4deg); } 
  100% { transform: rotate(0deg); }
}

/* Base style umum */
.bunga-animasi {
  transform-origin: bottom center;
  display: block;
  transition-property: transform, opacity;
}

/* Penerapan Spesifik saat AOS Aktif */
[data-aos].aos-animate.bunga-kiri {
  animation: swayKiri 5s ease-in-out infinite;
  animation-delay: 1s;
}

[data-aos].aos-animate.bunga-kanan {
  animation: swayKanan 5s ease-in-out infinite;
  animation-delay: 1.2s; /* Delay sedikit berbeda agar lebih natural */
}






/* --- 7. STICKY FOOTER NAV --- */
.sticky-footer {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 300px;
    height: 40px;
    align-items: center;
    z-index: 998;
    background: rgba(206, 217, 239, 0.3);
    backdrop-filter: blur(10px);
    display: none; /* Muncul setelah klik buka */
    justify-content: space-around;
    padding: 10px;
    border-radius: 50px;
    box-shadow: var(--shadow);
}

.container-acara a {
  font-size: 15px;
  border-radius: 30px;
}


.nav-btn {
    text-decoration: none;
    color: white;
    font-size: 1.5rem;
    transition: 0.3s;
}

.nav-btn:hover {
    color: #ffd700;
    transform: translateY(-5px);
}


.buttonKirim button {
  border-radius: 50px;
}



/* --- 8. COUNTDOWN --- */
#simplyCountdown {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    z-index: 10;
}

.simply-section {
    background: rgb(26, 58, 109);
    color: #fff;
    width: 90px;
    height: 45px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    backdrop-filter: blur(1px);
    border: 1px solid rgba(255,255,255,0.3);
}

/* Mengatur angka (90, 18, dsb) */
.simply-amount {
    display: block;
    font-size: 18px;       /* Ukuran angka besar */
    font-weight: bold;
    color: white;
    line-height: 1;        /* Menghilangkan jarak antar baris berlebih */
}

/* Mengatur teks keterangan (HARI, JAM, dsb) */
.simply-word {
    display: block;
    font-size: 0.7rem;     /* Ukuran teks kecil */
    text-transform: uppercase;
    color: white;
    margin-top: 2px;       /* Memberi jarak sedikit di bawah angka */
}



/* --- 9. RESPONSIVE MOBILE --- */
@media (max-width: 576px) {
    .hero h4 { font-size: 3.5rem; }
    .container-awal h4 { font-size: 3.5rem; }
    .carosel-bawah h2 { font-size: 4rem; }
    
    .profile-img {
        width: 150px !important; /* Menyesuaikan ukuran profil di HP */
        height: 230px !important;
        object-fit: cover;
            border-radius: 150px; /* Bentuk Kapsul/Oval */
            border: 6px solid white;
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            position: relative;
            z-index: 2; /* Di atas bunga latar */
    }
    
    .sticky-footer {
        width: 95%;
        bottom: 10px;
    }
}

/* Global No Scroll */
.no-scroll {
    overflow: hidden !important;
    height: 100vh;
}

.overlay-content {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* Gradasi sedikit lebih gelap agar tulisan putih tajam di area sempit */
        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8)); 
        padding: 40px; 
        text-align: center;
    }
    /* BAGIAN BAWAH (Sosmed/Powered By) */
.Identity-pembuat {
    width: 100%;
    /* Tambah padding bottom agar tidak tertutup bar navigasi HP saat mentok */
    padding-bottom: 120px; 
    /* Pastikan dia berada di urutan paling atas tumpukan */
    position: relative;
    z-index: 20;
}

.Identity-pembuat p {
    font-size: 8px;
    letter-spacing: 3px;
    margin-bottom: 2px;
    opacity: 0.6;
}

.Identity-pembuat h2 {
    font-family: serif;
    font-size: 1.1rem;
    letter-spacing: 3px;
    margin-bottom: 15px !important;
}

.hubungi-kami {
    display: flex;
    justify-content: center;
    gap: 20px;
    
    
    /* Ubah dari fixed ke relative */
    position: relative; 
    /* Hapus bottom, left, dan transform yang lama */
    margin-top: 10px; 
    z-index: 999; 
}

.btn-hub {
    color: white !important;
    font-size: 1.3rem;
    width: 40px; 
    height: 40px;
    
    background-color: rgba(0, 0, 0, 0.5); /* Opsional: kasih background agar kontras */
    border-radius: 50%; /* Opsional: agar bentuknya bulat */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: 0.4s;
}

.btn-hub:hover {
    background: white;
    color: black !important;
}

/* LAPTOP FULL WIDTH */
@media (min-width: 992px) {
    #Penutupcover {
        margin: 0 -50px;
        width: calc(100% + 100px);
    }
    .overlay-content {
        padding: 60px 40px 30px 40px;
    }
}

@media (max-width: 768px) {
    .hubungi-kami {
        display: flex !important; /* Paksa muncul sebagai flex */
        visibility: visible !important;
        opacity: 1 !important;
        position: relative;
        z-index: 9999 !important; /* Pastikan di atas background & navigasi */
        margin-top: 20px;
        margin-bottom: 80px; /* Memberi ruang agar tidak tertutup menu navigasi HP */
    }

    .btn-hub {
        display: flex !important; /* Pastikan tombolnya berbentuk block/flex */
        opacity: 1 !important;
        background-color: rgba(0, 0, 0, 0.6) !important; /* Kasih background agak gelap biar kelihatan */
    }

    .btn-hub i {
        color: white !important; /* Paksa warna ikon putih */
    }
}