/*------------------------------------------------------------------
[Master Stylesheet]

Project:	Wedding
Version:	1.0.0
Author: 
Website: 
Purchase: 
-------------------------------------------------------------------
[Table of contents]
 
1. Body
2. Custom css / a
3. Preloader/ #preloader
4. Header Css Start / .wd_slider_wrapper
5. Button Css Start / .wd_btn
6. Heading Css Start / .wd_heading
7. About Wrapper css Start / .wd_about_wrapper
8. Story css Start / .wd_story_wrapper
9. Event css Start / .wd_event_wrapper
10. Guest css Start / .wd_guest_wrapper
11. Testimomnial css Start / .wd_testimonial_wrapper
12. Family css Start / .wd_family_wrapper
13. Gallery css Start / .wd_gallery_wrapper
14. Blog css Start / .wd_blog_wrapper
15. Contact css Start / .wd_contact_wrapper
16. Footer css Start / .wd_footer_wrapper
17. Responsive css Start / .wd_logo
*/

/*--------- Body Strat -------*/
@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;500&display=swap');
:root {
  --animate-duration: 1.5s; /* Animasi jadi lebih lambat dan romantis */
}

.animate__animated {
    --animate-duration: 1.2s; /* Atur kecepatan sesuai selera */
    opacity: 1 !important;
    visibility: visible !important;
}

@keyframes pushDownAndFade {
  0% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: translateY(-10px);
  }
  /* Beri sedikit jeda di 10% agar benar-benar diam dulu */
  10% {
    opacity: 0;
    max-height: 0;
  }
  100% {
    opacity: 1;
    max-height: 1000px; /* Sesuaikan dengan tinggi konten */
    margin-bottom: 20px;
    padding-top: inherit; /* Kembali ke padding asli */
    padding-bottom: inherit;
    transform: translateY(0);
  }
}

/* Class untuk elemen yang muncul belakangan dan mendorong konten */
.box-push-down {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  /* Animasi: nama, durasi, timing, delay, fill-mode */
  animation: pushDownAndFade 1.5s ease-out 1.2s forwards;
}

@font-face {
  font-family: 'Wedding 2';
  src: url('../fonts/wedding-font.ttf');
}

@font-face {
  font-family: 'Wedding 2';
  src: url('../fonts/fine-garden.otf');
}

body,
html {
    font-family: 'Lora', serif;
    font-size: 16px;
    line-height: 23px;
    color: #797979;
    overflow-x: hidden;
}

/*---------- Custom Css Start -------*/
a {
    color: #797979;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #707070;
    text-decoration: none;
}

a:focus {
    outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: 'Wedding 2', cursive;
    line-height: 1.1;
    font-weight: 400;
}

input,
select,
button {
    outline: none;
}

input:focus,
select:focus,
button:focus {
    outline: none;
    box-shadow: none;
}

textarea {
    outline: none;
}

textarea:focus {
    outline: none;
    box-shadow: none;
}

.wd_toppadder10 {
    padding-top: 10px;
}

.wd_toppadder20 {
    padding-top: 20px;
}

.wd_toppadder30 {
    padding-top: 30px;
}

.wd_toppadder40 {
    padding-top: 40px;
}

.wd_toppadder50 {
    padding-top: 50px;
}

.wd_toppadder60 {
    padding-top: 60px;
}

.wd_toppadder70 {
    padding-top: 70px;
}

.wd_toppadder80 {
    padding-top: 80px;
}

.wd_toppadder90 {
    padding-top: 90px;
}

.wd_toppadder100 {
    padding-top: 100px;
}

.wd_bottompadder10 {
    padding-bottom: 10px;
}

.wd_bottompadder20 {
    padding-bottom: 20px;
}

.wd_bottompadder30 {
    padding-bottom: 30px;
}

.wd_bottompadder40 {
    padding-bottom: 40px;
}

.wd_bottompadder50 {
    padding-bottom: 50px;
}

.wd_bottompadder60 {
    padding-bottom: 60px;
}

.wd_bottompadder70 {
    padding-bottom: 70px;
}

.wd_bottompadder80 {
    padding-bottom: 80px;
}

.wd_bottompadder90 {
    padding-bottom: 90px;
}

.wd_bottompadder100 {
    padding-bottom: 100px;
}

.wd_scroll_wrap {
    width: 100%;
}

/*-- Preloader css start --*/
#preloader {
    background-color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 2147483647;
    width: 100%;
    height: 100%;
}

#status {
    background-position: center center;
    background-repeat: no-repeat;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

#headbottom {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0px auto;
    bottom: -50px;
    cursor: pointer;
    width: 100px;
    height: 100px;
    border: 8px solid transparent;
    text-align: center;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background-color: #FDC219;
    z-index: 100;
}

#headbottom i {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1000;
    line-height: 80px;
    color: #ffffff;
    font-size: 24px;
}

.wd_slider_textinfo img {
    animation-duration: 2s;
    animation-delay: 300ms;
    animation-iteration-count: infinite;
    animation-name: pulse;
}

.wow {
    visibility: hidden;
}

#snow {
    background: none;
    background-image: url('../images/header/sn1.png'), url('../images/header/sn2.png'), url('../images/header/sn3.png');
    height: 100%;
    left: 0;
    position: fixed !important; 
    top: 0;
    width: 100%;
    z-index: 100;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
    pointer-events: none;
}

@keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }

    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}

@-moz-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }

    100% {
        background-position: 400px 1000px, 200px 400px, 100px 300px;
    }
}

@-webkit-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }

    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}

@-ms-keyframes snow {
    0% {
        background-position: 0px 0px, 0px 0px, 0px 0px;
    }

    50% {
        background-position: 500px 500px, 100px 200px, -100px 150px;
    }

    100% {
        background-position: 500px 1000px, 200px 400px, -100px 300px;
    }
}

/*-- Button Css Start --*/
.wd_btn {
    float: left;
    width: 100%;
}

.wd_btn a {
    display: inline-block;
    width: auto;
    min-width: 150px;
    height: 50px;
    line-height: 49px;
    font-size: 18px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: normal;
    background-color: #FDC219;
    text-align: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: none;
    padding: 0px 30px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.wd_btn a:hover {
    color: #000000;
    background: #ffffff;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.wd_btn button {
    display: inline-block;
    width: auto;
    min-width: 150px;
    height: 50px;
    line-height: 49px;
    font-size: 18px;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: normal;
    background-color: #FDC219;
    text-align: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    border: none;
    padding: 0px 30px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

.wd_btn button:hover {
    color: #ffffff;
    background: transparent;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

/* Tombol RSVP */
.wd_btn.wd_single_index_menu_rsvp a {
    display: inline-block;
    background-color: #FDC219;
    color: #252C47;
    padding: 12px 40px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.wd_btn.wd_single_index_menu_rsvp a:hover {
    background-color: #FFD14C;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(253, 194, 25, 0.4);
}

.wd_timer_wrapper {
    float: left;
    width: 100%;
    text-align: center;
}

.wd_center_words {
    float: left;
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 20px 0px;
}

.wd_center_words:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0px;
    right: 0px;
    background-color: #292929;
    height: 1px;
    z-index: -1;
}

.wd_center_words h4 {
    display: inline-block;
    width: auto;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Lora', serif;
    padding: 0px 15px;
    background-color: transparent;
    color: #ffffff;
    z-index: 100;
}

#clockdiv {
    float: left;
    width: 100%;
    color: #FDC219;
    display: inline-block;
    text-align: center;
    font-size: 70px;
    padding: 30px 0px 10px 0px;
}

#clockdiv>div {
    display: inline-block;
    margin: 30px 50px;
    font-family: 'Wedding 2', cursive;
}

#clockdiv div>span {
    float: left;
    width: 100%;
}

.smalltext {
    float: left;
    width: 100%;
    padding-top: 20px;
    font-size: 18px;
    font-family: 'Lora', serif;
    font-style: italic;
    color: #c4c4c4;
}

/*-- Story Section Styling --*/
.wd_story_wrapper {
    padding: 40px 20px 60px 20px !important;
    width: 100% !important;
    display: block !important;
    box-sizing: border-box;
}

.wd_story_wrapper .wd_heading h1 {
    color: #6B4430;
    text-align: center;
}

.wd_story_covers {
    width: 100%;
    position: relative;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Jarak antar box story */
}

/* Garis Tengah Timeline (Dipindah ke Kiri untuk Mobile) */
.wd_story_line {
    position: absolute;
    background-color: #6B4430; 
    width: 2px;
    top: 0;
    bottom: 0;
    left: 15px; /* Geser ke kiri */
    margin: 0;
    height: 100%;
}

/* Base Style Box Story */
.wd_story_covers_box_left, 
.wd_story_covers_box_right {
    width: calc(100% - 40px) !important; /* Sisakan ruang untuk timeline */
    margin-left: 40px !important; /* Jarak dari garis timeline */
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: rgba(253, 193, 25, 0.8); 
    border: 1px solid rgba(253, 194, 25, 0.15);
    position: relative;
    float: none !important; /* Hapus float */
    display: flex;
    flex-direction: column;
    border-radius: 20px !important; /* Konsisten untuk mobile */
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Hover effect */
.wd_story_covers_box_left:hover, 
.wd_story_covers_box_right:hover {
    border: 1px solid rgba(253, 194, 25, 0.4);
}

/* Menghilangkan Arrow Segitiga di mobile agar lebih clean */
.wd_story_covers_box_left:after,
.wd_story_covers_box_right:after {
    display: none !important;
}

/* Titik di Garis Timeline */
.wd_story_dot {
    position: absolute;
    left: -34px !important; /* Pas di atas garis timeline */
    right: auto !important;
    top: 20px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #4B5970;
    z-index: 5;
}

.wd_story_dot span {
    background-color: #FDC219;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Foto Story */
.wd_story_covers_box_img {
    width: 100% !important;
    padding: 15px !important;
    float: none !important;
    box-sizing: border-box;
}

.wd_story_covers_box_img img {
    width: 100%;
    height: auto;
    max-height: 200px;
    border-radius: 15px;
    border: 2px solid rgba(253, 194, 25, 0.2);
    object-fit: cover;
}

/* Detail Teks */
.wd_story_covers_box_datails {
    width: 100% !important;
    padding: 10px 20px 10px 20px !important;
    float: none !important;
    text-align: left !important; /* Rata kiri semua di mobile */
    box-sizing: border-box;
}

.wd_story_covers_box_datails span {
    display: block;
    font-size: 12px;
    color: #6B4430;
    text-transform: uppercase;
    font-weight: 600;
}

.wd_story_covers_box_datails h1 {
    font-size: 20px;
    color: #2e3849;
    margin: 5px 0 10px 0;
}

.wd_story_covers_box_datails p {
    color: #2e3849;
    font-size: 13px;
    line-height: 1.5;
    text-align: justify;
}

/*-- Event Section Styling (Mobile Optimized 480px) --*/
.wd_event_wrapper {
    padding: 60px 20px !important;
    width: 100% !important;
    float: none !important;
    display: block !important;
    box-sizing: border-box;
}

/* Memastikan container dan row tidak meluap */
.wd_event_wrapper .container,
.wd_event_wrapper .row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header Heading */
.wd_event_wrapper .wd_heading {
    text-align: center;
}

.wd_event_wrapper .wd_heading h4 {
    color: #2e3849;
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 2px;
}

.wd_event_wrapper .wd_heading h1 {
    color: #6B4430;
    font-size: 26px;
    margin: 10px 0;
}

.wd_event_wrapper .wd_heading img {
    text-align: center;
}


/* Mengatur kolom agar tumpuk vertikal */
.wd_event_wrapper .col-sm-12 {
    width: 100% !important;
    left: auto !important; /* Mematikan col-push */
    right: auto !important; /* Mematikan col-pull */
    padding: 0 !important;
    float: none !important;
}

/* Box Informasi Event */
.wd_event_infobox {
    float: none !important;
    width: 100% !important;
    padding: 30px 20px !important;
    margin-bottom: 30px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(5px);
    border-radius: 25px !important;
    border: 1px solid rgba(253, 194, 25, 0.2) !important;
    text-align: center !important;
    box-sizing: border-box;
}

/* Kotak Jam (Kapsul) */
.wd_event_infobox h1 {
    font-family: 'Lora', serif;
    border-radius: 50px !important;
    border: 2px solid rgba(253, 194, 25, 0.8) !important;
    background: rgba(253, 194, 25, 0.4);
    font-size: 18px !important; /* Ukuran font dikecilkan sedikit */
    padding: 8px 15px !important;
    width: 100%;
    white-space: nowrap;
}

.wd_event_infobox span {
    display: block !important;
    font-size: 26px !important;
    margin-bottom: 30px !important;
    padding: 0 !important;
    font-weight: bold;
    line-height: 26px;
    color: #2e3849;
}

.wd_event_infobox p {
    float: none !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    color: #2e3849;
}

/* Wrapper Image/GIF di bawah */
.wd_event_wrapper img[src*="bg2.gif"] {
    width: 100% !important;
    display: block;
    border-radius: 20px;
}

/* Map Image */
.wd_event_infobox a img {
    width: 250px;
    height: auto;
    margin: auto;
    border-radius: 15px;
    margin-top: 10px;
}

/* Container Utama untuk Jam */
.event-flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
}

.event-item {
    flex: 1;
    max-width: 200px; /* Membatasi agar tidak terlalu lebar */
}

.event-item h1 {
    color: #2e3849;
}

/* Label kecil di atas jam (Akad Nikah / Resepsi) */
.event-item small {
    display: block;
    font-family: 'Lora', serif;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
    color: #6B4430;
    margin-bottom: -10px;
    margin-top: 10px;
    position: relative;
    z-index: 10;
}

/* Garis vertikal di tengah */
.event-line {
    width: 1px;
    height: 40px;
    background: rgba(253, 194, 25, 0.3);
    margin-top: 10px;
}

/*-- Guest css Start --*/
/*-- Wedding Gift Section (Mobile Optimized 480px) --*/
.wd_guest_wrapper {
    padding: 20px 20px 60px 20px !important;
    width: 100% !important;
}

.gift_section {
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 20px !important; /* Sedikit lebih kecil agar manis di HP */
    border: 1px solid rgba(253, 194, 25, 0.3) !important;
}

/* Mengatur content inner */
.gift_content_inner {
    padding: 40px 20px !important; /* Mengurangi padding samping */
    text-align: center !important; /* Rata tengah untuk mobile */
}

.gift_content_inner span {
    font-size: 20px !important;
    font-style: italic;
    color: #2e3849;
    display: block;
}

.gift_content_inner h4 {
    font-size: 28px !important;
    margin: 10px 0 20px 0 !important;
    float: none !important;
    width: 100% !important;
    color: #6B4430;
}

.gift_desc {
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 30px !important;
    padding: 0 10px;
    color: #2e3849;
}

.flower_img_main{
    width: 50px;
}

/* Styling Kartu Bank (Mobile Version) */
.bank_card {
    width: 100% !important;
    max-width: 340px; /* Ukuran proporsional kartu */
    margin: 0 auto 10px auto !important;
    padding: 25px !important;
    border-radius: 20px !important;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    /* Efek Gradasi Kartu Premium */
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    /* Efek Bayangan agar terlihat melayang */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 
                inset 0 1px 1px rgba(255, 255, 255, 0.1);
    /* Border halus agar terlihat seperti pinggiran kartu fisik */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff;
}

/* Menambahkan efek kilauan (Glossy) di pojok kartu */
.bank_card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
    transform: rotate(30deg);
    pointer-events: none;
}

/* Mengatur Logo Bank di pojok kanan atas */
.bank_logo {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
    height: 25px;
}

.bank_logo img {
    height: 100%;
    filter: brightness(0) invert(1); /* Membuat logo jadi putih agar elegan */
    opacity: 0.9;
}

/* Nomor Rekening (Font Monospace khas Kartu) */
.card_number {
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 20px !important;
    letter-spacing: 3px !important;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    margin-bottom: 15px !important;
    display: block;
}

/* Nama Pemilik Rekening */
.card_holder {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px !important;
}

/* Tombol Salin yang menyatu dengan desain kartu */
.copy_btn {
    width: 100%;
    background: rgba(253, 194, 25, 0.9) !important;
    border: none !important;
    color: #0f172a !important;
    font-weight: bold !important;
    padding: 10px !important;
    border-radius: 12px !important;
    text-transform: uppercase;
    font-size: 11px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy_btn:hover {
    background: #ffffff !important;
    transform: translateY(-2px);
}

/* Animasi Bunga agar tidak kaku */
@keyframes floatFlower {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/*-- Testimomnial css Start --*/
.wd_testimonial_wrapper {
    padding: 60px 20px !important;
    width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    text-align: center;
}

/* Reset Container & Row */
.wd_testimonial_wrapper .container,
.wd_testimonial_wrapper .row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wd_testimonial_slider {
    width: 100% !important;
}

.wd_testimo_box {
    width: 100% !important;
    padding: 40px 25px !important; /* Beri ruang nafas lebih luas */
    box-sizing: border-box;
    text-align: center;
    
    /* Efek Kaca Utama */
    background: rgba(255, 255, 255, 0.08) !important; /* Putih transparan tipis */
    backdrop-filter: blur(12px) !important; /* Blur latar belakang */
    -webkit-backdrop-filter: blur(12px);
    
    /* Border untuk kilauan tepi kaca */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    
    /* Shadow agar box terlihat melayang */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
    
    margin: 20px 0;
}

/* Ikon Hati */
.wd_testimo_box img {
    width: 40px !important;
    height: auto !important;
    margin-bottom: 5px;
    filter: drop-shadow(0 0 8px rgba(253, 194, 25, 0.5)); /* Beri sedikit aura pada ikon */
}

/* Tipografi Kutipan */
.wd_testimo_box p {
    font-family: 'Lora', serif; /* Font klasik/romantis sangat cocok di sini */
    font-style: italic;
    width: 100% !important;
    font-size: 22px !important; /* Ukuran lebih proporsional untuk quote */
    line-height: 1.5 !important;
    margin: 15px 0 !important;
    color: #6B4430 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* Nama Pengutip */
.wd_testimo_box h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 3px; /* Jarak antar huruf agar lebih 'high-end' */
    color: #2e3849 !important; /* Warna emas agar kontras dengan kaca */
    margin-top: 10px !important;
}

/* Menyesuaikan Owl Carousel dots jika tiba-tiba muncul */
.wd_testimonial_slider .owl-theme .owl-dots {
    margin-top: 20px !important;
}

/*-- Gallery Grid Penyesuaian --*/
/* Menggunakan preset Navy Dark dari section sebelumnya */
.wd_gallery_wrapper{
    padding: 20px 15px 60px 15px;
}

.wd_gallery_wrapper .wd_heading {
    text-align: center;
}

.wd_gallery_wrapper .wd_heading h4 {
    color: #2e3849;
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 2px;
}

.wd_gallery_wrapper .wd_heading h1 {
    color: #6B4430;
    font-size: 26px;
    margin: 10px 0;
}

.wd_gallery_wrapper .wd_heading img {
    text-align: center;
}

.wd_gallery_masonry {
    display: grid !important;
    /* Membuat 2 kolom di mobile, otomatis bertambah di layar lebar */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
    /* Unit kecil untuk kontrol tinggi kartu yang presisi */
    grid-auto-rows: 10px !important;
    grid-auto-flow: dense !important;
    /* Jarak antar kartu agar rotasi tidak saling tabrak */
    width: 100% !important;
    padding: 20px 0;
}

/*--- KARTU POLAROID ---*/
.wd_gallery_slide {
    display: block !important;
    position: relative;
    background: #ffffff !important;
    /* Padding bawah lebih lebar untuk area "tulis tangan" khas polaroid */
    padding: 8px 8px 30px 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 2px !important;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    /* Menentukan tinggi kartu agar tidak menumpuk (overlap) */
    grid-row: span 10;
    overflow: visible !important;
    z-index: 1; /* Beri z-index dasar agar semua punya level yang sama */
    position: relative;
}

/* Link pembungkus agar seluruh area polaroid bisa diklik */
.wd_gallery_slide a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10; /* Link harus di atas konten polaroid lainnya */
    cursor: pointer !important;
}

/*--- PENGATURAN GAMBAR ---*/
.wd_gallery_slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
    border: 1px solid #f0f0f0;
    display: block;
}

/*--- EFEK MIRING (ROTASI) ---*/
/* Memberikan variasi miring agar terlihat natural seperti tumpukan foto asli */
.wd_gallery_slide:nth-child(odd) {
    transform: rotate(1.5deg);
}

.wd_gallery_slide:nth-child(even) {
    transform: rotate(-1.5deg);
}

.wd_gallery_slide:nth-child(3n) {
    transform: rotate(4deg);
}

.wd_gallery_slide:nth-child(5n) {
    transform: rotate(-4.5deg);
}

/*--- EFEK HOVER (INTERAKTIF) ---*/
.wd_gallery_slide:hover {
    transform: rotate(0deg) scale(1.08) !important;
    z-index: 999 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;
}

/*--- OVERLAY & ICON ---*/
.ast_glr_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none; /* Biar klik tembus ke tag <a> */
    opacity: 1; /* Di HP ikon zoom muncul terus karena tidak ada hover */
    background: transparent;
}

.wd_gallery_slide:hover .ast_glr_overlay {
    opacity: 1;
}

.ast_glr_overlay i {
    color: #FDC219;
    font-size: 24px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

/*-- Footer Penyesuaian Preset --*/
.wd_footer_wrapper {
    float: left;
    width: 100%;
    /* Mengganti gambar latar belakang dengan warna solid agar lebih bersih */
    background-color: #0f172a; 
    position: relative;
    z-index: 0;
}

.wd_footer_bottom_wrapper {
    float: left;
    width: 100%;
    background-color: #0f172a; /* Mengikuti Navy Preset */
    position: relative;
    border-top: 1px solid rgba(253, 194, 25, 0.2); /* Garis halus warna emas */
}

.wd_footer_section {
    text-align: center; /* Menengahkan konten di mobile/desktop */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wd_footer_section img.footer_logo_center {
    float: none;
    margin: 0 auto 20px auto;
    max-width: 150px;
    filter: brightness(0) invert(1); /* Membuat logo putih jika aslinya gelap */
}

.wd_footer_section p.footer_copy {
    float: none;
    width: 100%;
    text-align: center;
    color: #cbd5e1; /* Warna teks abu-abu terang kebiruan */
    font-size: 13px;
    padding-top: 10px;
}

/*-- Scroll to Top Button --*/
#scroll {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0px auto;
    top: -50px;
    cursor: pointer;
    width: 80px;
    height: 80px;
    line-height: 60px;
    color: #0f172a; /* Warna ikon gelap agar kontras dengan Gold */
    font-size: 20px;
    border: 8px solid #0f172a; /* Border warna navy agar menyatu dengan background */
    text-align: center;
    background-color: #FDC219; /* Preset Gold */
    border-radius: 100%;
    transition: all 0.3s ease;
}

#scroll:hover {
    background-color: #ffffff; /* Berubah jadi putih saat hover */
    transform: translateY(-5px);
}

#scroll i {
    line-height: inherit;
}


/* ============================================================
   1. STRUKTUR UTAMA (DESKTOP CENTERED VIEW)
   ============================================================ */

/* Container paling luar (Area putih di desktop) */
.bg-back {
    width: 100%;
    height: 100vh;
    background-color: #ffffff; /* Warna putih untuk area kosong */
    display: flex;
    justify-content: center;   /* Memusatkan wrapper ke tengah horizontal */
    align-items: center;       /* Memusatkan wrapper ke tengah vertikal */
    overflow: hidden;          /* Mencegah scroll di tingkat browser */
    position: relative;
}

/* Kotak Simulasi Layar HP */
.mobile-wrapper {
    position: relative;
    width: 100%;
    max-width: 480px;         /* Lebar maksimal layar HP */
    height: 100vh;            /* Tinggi penuh layar */
    overflow: hidden;         /* Mengunci elemen anak agar tidak keluar jalur */
    box-shadow: 0 0 50px rgba(0,0,0,0.1); /* Bayangan halus di pinggir */
    z-index: 1;
}

/* Layer Background yang Dikunci (Fixed) */
.fixed-bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/back.png'); /* SESUAIKAN PATH GAMBAR ANDA */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1; /* Berada di paling belakang */
}

/* Overlay Gelap di atas Background agar teks terbaca */
.fixed-bg-layer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Layer Konten yang Bisa Di-scroll */
.scrollable-content {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;          /* Scroll hanya terjadi di sini */
    overflow-x: hidden;
    z-index: 2;                /* Di atas background layer */
    scroll-behavior: smooth;   /* Scroll halus saat klik navigasi */
}

/* Menyembunyikan scrollbar agar tampilan bersih (opsional) */
.scrollable-content::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* ============================================================
   2. SECTION 1: HOME & COUNTDOWN (PERBAIKAN OVERLAP)
   ============================================================ */

.tp-static-layers {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important; /* Mulai dari atas */
    align-items: center !important;
    height: 100vh !important;
    padding: 60px 20px 100px 20px !important; /* Atur jarak aman atas & bawah */
    box-sizing: border-box !important;
}

.top-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Memberi jarak sedikit dari paling atas layar jika diperlukan */
    margin-top: 20px; 
}

/* Kelompok Save the Date & Countdown */
.bottom-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* PENTING: Menekan elemen ini ke paling bawah yang tersedia */
    margin-top: auto; 
    margin-bottom: 90px; /* Jarak dari panah scroll down */
}

/* Mematikan posisi absolute bawaan plugin agar tidak saling menimpa */
.tp-caption {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important; /* Memberi jarak antar baris */
    display: block;
    width: auto;
    color: #ffffff;            /* Warna teks default putih */
}

/* Jarak spesifik untuk elemen Home */
#slider-475-layer-1 { margin-bottom: 25px !important; } /* Logo/Inisial */
#slider-476-layer-2 { color: #d17a7a !important; font-size: 20px !important; } /* Tanggal */
#slider-477-layer-2 { font-size: 32px !important; letter-spacing: 3px !important; margin-bottom: 40px !important; } /* SAVE THE DATE */

/* --- Countdown Wrapper (Layout Rapat Gambar 2) --- */
.countdown-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;                 /* Jarak antar kolom countdown */
    margin-top: 20px;
}

.countdown-wrapper h3 {
    color: #2e3849;
}

.countdown-item {
    display: flex;
    flex-direction: column;    /* Angka di atas, teks di bawah */
    align-items: center;
}

.countdown-number {
    font-size: 60px;
    font-weight: 700;
    color: #2e3849;
    line-height: 1;
    font-family: 'Playfair Display', serif;
}

.countdown-label {
    font-size: 14px;
    color: #6B4430;
    text-transform: lowercase;
    margin-top: 8px;
    letter-spacing: 1px;
}

/* Tombol Scroll Down */
.wd_single_index_menu_down {
    position: fixed !important; 
    bottom: 10px !important;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
     width: 100%;
    max-width: 480px;
    z-index: 9999;
    
    /* Tambahan agar tidak klik-thru jika ada elemen di bawahnya */
    pointer-events: none;
}

.nav-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(252, 250, 174, 0.9);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Menu Tengah (Lebih Menonjol) */
.main-menu {
    background: #6b4430 !important; /* Warna kontras cokelat */
}
.main-menu i {
    color: #fcfaaa !important;
}

/* Bubble Menu */
.menu-center-wrapper {
    position: relative;
}

/* Definisikan animasinya */
@keyframes pulseLoop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3); /* Ukuran saat paling besar */
  }
  100% {
    transform: scale(1);
  }
}

.wd_single_index_menu_down #prev-btn,
.wd_single_index_menu_down #next-btn,
.wd_single_index_menu_down #menu-main-btn {
    pointer-events: auto;
}

.wd_single_index_menu_down #prev-ico {
    display: inline-block;
    animation: pulseLoop 2s ease-in-out infinite;
}

.wd_single_index_menu_down #prev-ico:last-child {
    animation-delay: 1s; 
}

.wd_single_index_menu_down #next-ico {
    display: inline-block;
    animation: pulseLoop 2s ease-in-out infinite;
}

/* ============================================================
   3. SECTION 2: ABOUT MEMPELAI (MENYESUAIKAN HP)
   ============================================================ */

/* Menghapus background asli agar tembus ke fixed-bg-layer utama */
/* Container Utama Section About */
.wd_about_wrapper {
    padding: 60px 20px !important;
    width: 100% !important;
    display: block !important;
}

/* Mematikan Row/Col bawaan Bootstrap agar tidak berantakan di wrapper sempit */
.wd_about_wrapper .container, 
.wd_about_wrapper .row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.wd_about_wrapper .wd_heading {
    text-align: center;
}

.wd_about_wrapper .wd_heading h4 {
    color: #2e3849;
    text-transform: uppercase;
    font-size: 26px;
    letter-spacing: 2px;
}

.wd_about_wrapper .wd_heading h1 {
    color: #6B4430;
    font-size: 26px;
    margin: 10px 0;
}

.wd_about_wrapper .wd_heading img {
    text-align: center;
}

/* Setiap Box Mempelai (Groom/Bride) */
.wd_about_infobox {
    display: flex !important;
    flex-direction: column !important; /* Susun ke bawah */
    align-items: center !important;    /* Ketengah secara horizontal */
    text-align: center !important;
    width: 100% !important;
    margin-bottom: 50px !important;    /* Jarak antar mempelai */
    float: none !important;            /* Hapus float */
}

/* Frame Foto Mempelai */
.wd_about_infobox_img {
    width: 100% !important;           /* Ukuran yang lebih proporsional untuk HP */
    display: block !important;
    float: none !important;
    position: relative !important;
}

.wd_about_infobox_img img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    border: 6px solid #6B4430 !important;
    object-fit: cover !important;
}

/* Nama Mempelai */
.wd_about_infobox h2 {
    width: 100% !important;
    font-size: 18px !important;
    color: #6B4430 !important;
    margin: 10px 0 5px 0 !important;
    float: none !important;
    font-family: 'Lora', serif !important;
    font-weight: bold;
}

/* Nama Orang Tua */
.wd_about_infobox p {
    width: 100% !important;
    color: #2e3849 !important;
    font-size: 15px !important;
    margin: 0 0 15px 0 !important;
    float: none !important;
    font-style: italic !important;
}

/* Ikon Sosial Media */
.wd_about_infobox ul {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
}

.wd_about_infobox ul li {
    display: inline-block !important;
    margin: 0 10px !important;
}

/* ============================================================
   4. ANIMASI PULSE (UNTUK LOGO)
   ============================================================ */

.pulse-animation {
    animation: pulse-effect 2s infinite ease-in-out;
    display: inline-block;
}

@keyframes pulse-effect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* ============================================================
   5. RESPONSIVE (UNTUK HP ASLI)
   ============================================================ */
@media (max-width: 480px) {
    .mobile-wrapper {
        max-width: 100%;       /* Full screen di HP asli */
        box-shadow: none;
    }
    
    .countdown-wrapper { gap: 15px; } /* Jarak lebih rapat di HP kecil */
    .countdown-number { font-size: 45px; }
}

.wd_social_button_wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

.btn-elegant-social {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 20px !important;
    border: 1px solid #6B4430 !important; /* Warna emas */
    color: #2e3849 !important;
    background-color: #FFD14C !important;
    text-decoration: none !important;
    font-family: 'Lora', serif !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    border-radius: 30px !important; /* Membuat ujung membulat */
    transition: all 0.3s ease !important;
}

.btn-elegant-social i {
    margin-right: 8px !important;
    font-size: 16px !important;
}

/* Efek saat tombol disentuh/hover */
.btn-elegant-social:hover {
    background: #FFD14C !important;
    color: #252c47 !important; /* Balik warna saat hover */
    box-shadow: 0 4px 15px rgba(255, 209, 76, 0.3) !important;
    transform: translateY(-2px) !important;
}

/* Styling Section Event/Schedule */
.wd_event_details {
    text-align: center !important;
    margin: 20px 0 50px 0 !important;
    padding: 0 10px !important;
}

.event-subtext {
    font-family: 'Lora', serif !important;
    color: #ffffff !important;
    font-size: 14px !important;
    letter-spacing: 1px;
    margin-bottom: 20px !important;
    font-style: italic;
}

.event-main-box {
    border-top: 1px solid rgba(255, 209, 76, 0.3);
    border-bottom: 1px solid rgba(255, 209, 76, 0.3);
    padding: 30px 10px !important;
    position: relative;
}

.event-day {
    font-family: 'Lora', serif !important;
    color: #FFD14C !important;
    font-size: 22px !important;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0 !important;
}

.event-date {
    font-family: 'Playfair Display', serif !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    margin: 10px 0 !important;
}

.event-divider {
    color: #FFD14C;
    font-size: 12px;
    margin: 15px 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Garis dekoratif kecil di samping ikon hati */
.event-divider::before, .event-divider::after {
    content: "";
    width: 30px;
    height: 1px;
    background: rgba(255, 209, 76, 0.5);
    margin: 0 10px;
}

.event-location {
    font-family: 'Lora', serif !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.6;
    margin: 0 !important;
    font-weight: 300;
}


.verse-container {
    text-align: center;
    padding: 40px 20px 40px 20px;
    width: 100%;
    margin: auto;
}

.glass-verse-box {
    width: 100%;
    padding: 40px;
    text-align: center;
    
    /* Efek Blur Kaca */
    background: rgba(255, 255, 255, 0.25); /* Putih transparan */
    backdrop-filter: blur(10px); /* Menghaluskan gambar di belakang box */
    -webkit-backdrop-filter: blur(10px);
    
    /* Border & Shadow */
    border: #6B4430;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Font Arab yang Elegan */
.arabic-text {
    font-family: 'Amiri', serif; /* Gunakan font Arab yang tebal dan jelas */
    font-size: 28px !important;
    line-height: 2 !important;
    color: #2e3849;
    margin-bottom: 25px !important;
    direction: rtl; /* Mengatur arah teks dari kanan ke kiri */
}

/* Garis Pembatas (Divider) */
.verse-divider {
    width: 50px;
    height: 2px;
    background: #6b4430;
    margin: 20px auto;
    opacity: 1;
}

/* Terjemahan */
.translation-text {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #6b4430;
    padding: 0 15px;
}

/* Judul Surah */
.surah-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 14px !important;
    font-weight: bold;
    letter-spacing: 3px;
    color: #2e3849; /* Warna aksen emas */
    margin-top: 20px !important;
    text-transform: uppercase;
}

.delay-1 { animation-delay: 0.5s; }
.delay-2 { animation-delay: 0.8s; }
.delay-3 { animation-delay: 1.1s; }


#book-container {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f1ea; /* Warna kertas lama */
  perspective: 1500px; /* Memberikan efek kedalaman 3D */
  z-index: 10000;
   width: 100%;
    max-width: 480px;
  margin: auto;
}

#book-wrapper {
  width: 95%;
  height: 80vh;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.book-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 5px 15px 15px 5px;
  box-shadow: 10px 10px 20px rgba(0,0,0,0.2);
}

.cover-front {
  background: #6b4430; /* Warna sampul buku */
  color: white;
  z-index: 2;
  transform-origin: left; /* Engsel di sebelah kiri */
  transition: transform 1.5s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  border-left: 10px solid #4e3122; /* Tulang buku */
}

/* Animasi saat buku terbuka */
.book-opened {
  transform: rotateY(-160deg); /* Membuka ke kiri */
}

/* Dekorasi di dalam cover */
.couple-title {
  font-family: 'Alex Brush', cursive;
  font-size: 45px;
  color: #d4af37;
  margin: 20px 0;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: #d4af37;
  margin-bottom: 30px;
}

/* Styling Area Nama Tamu */
.guest-info {
    margin: 30px 0;
    text-align: center;
    width: 100%;
}

.guest-info small {
    display: block;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    color: rgba(212, 175, 55, 0.8); /* Warna emas pudar */
    margin-bottom: 8px;
}

.guest-info h3 {
    font-family: 'Lora', serif;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding: 10px 0;
    display: inline-block;
    min-width: 200px;
}

/* Styling Tombol dengan Efek Hover */
.btn-read {
    margin-top: 20px;
    background: transparent;
    border: 1.5px solid #d4af37;
    color: #d4af37;
    padding: 12px 35px;
    border-radius: 50px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Efek saat tombol diarahkan (Hover) */
.btn-read:hover {
    color: #4e3122; /* Warna teks berubah saat background jadi emas */
    letter-spacing: 2px; /* Sedikit melebar agar elegan */
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transform: translateY(-3px); /* Efek melayang */
}

/* Efek background meluncur dari samping saat hover */
.btn-read::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #d4af37;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.btn-read:hover::before {
    left: 0;
}

/* Efek saat tombol diklik */
.btn-read:active {
    transform: translateY(-1px);
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(107, 68, 48, 0.95); /* Cokelat tua transparan */
  backdrop-filter: blur(15px);
  z-index: 10001;
  display: none;
  justify-content: center;
  align-items: center;
   width: 100%;
    max-width: 480px;
  margin: auto;
}

.floating-shapes-container {
  position: relative;
  width: 100%;
  height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
}

.shape-item {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: float 4s ease-in-out infinite;
  background: #fcfaaa; /* Warna krem senada */
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.shape-item span {
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #6b4430;
  font-size: 14px;
}

/* --- DEFINISI BENTUK --- */

/* Bentuk Hati */
.shape-heart {
  clip-path: polygon(50% 15%, 80% 0%, 100% 20%, 100% 50%, 50% 95%, 0% 50%, 0% 20%, 20% 0%);
  /* Jika ingin bentuk yang lebih halus/curvy, gunakan path yang sudah di-scale ke 100% */
  clip-path: path('M60 106.75l-7.25-6.6C27 76.8 10 61.4 10 42.5 10 27.1 22.1 15 37.5 15c8.7 0 17.05 4.05 22.5 10.45C65.45 19.05 73.8 15 82.5 15 97.9 15 110 27.1 110 42.5c0 18.9-17 34.3-42.75 64.25L60 106.75z');
  
  /* HAPUS transform: scale(4.5) agar teks COVER tidak mengecil */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Bentuk Awan */
.shape-cloud {
  border-radius: 50px;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); /* Hexagon sebagai dasar awan */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

/* Bentuk Blob (Organik) */
.shape-blob {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

/* Bentuk Bintang */
.shape-star {
    width: 160px;  /* Diperbesar dari 120px */
    height: 160px; /* Diperbesar dari 120px */
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* --- ANIMASI --- */
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* Berikan delay animasi berbeda agar random */
.shape-heart { animation-delay: 0s; margin-top: -50px; }
.shape-cloud { animation-delay: 1s; margin-left: 20px; }
.shape-blob { animation-delay: 2s; margin-top: 50px; }

.shape-item:hover {
  transform: scale(1.1) rotate(-5deg);
  background: #ffffff;
}

.close-menu {
  position: absolute;
  top: 30px;
  right: 30px;
  color: white;
  font-size: 30px;
  cursor: pointer;
}