@font-face {
	  font-family: 'HighSummit';
	  src: url('../fonts/High Summit.otf') format('opentype');
	}

	body {
	  margin: 0;
	  font-family: 'Montserrat', sans-serif;
	  scroll-behavior: smooth;
	  overflow: hidden;
	}

	/* SPLASH */
	#splash { position: relative; width: 100%; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 60px; background: url('../assets/img/main4a.jpg') no-repeat center bottom; background-size: cover; text-align: center; }

	#splashContent h1, #splashContent h2, #splashContent #dear { color: black; }

	h1, h2, #dear, .arrow-container, #openInvitation, #bahasa, #bahasa-inggris { opacity: 0; transform: translateY(30px); animation-fill-mode: forwards; }

	h1 { margin: 0; font-size: 0.9rem; font-family: Arial, sans-serif; font-weight: normal; animation: fadeSlide 0.5s 0.1s forwards; }
	h2 { margin: 10px 0 0 0; font-size: 2.2rem; font-family: 'HighSummit', cursive; font-weight: normal; animation: fadeSlide 0.5s 0.3s forwards; }
	#dear { margin: 20px 0; font-size: 0.9rem; line-height: 1.2; animation: fadeSlide 0.5s 0.5s forwards; }
	#dear strong { display: block; font-size: 1.2rem; margin-top: 10px; font-weight: bold; }

	.arrow-container { width: 60px; margin: 10px auto; animation: fadeSlide 0.5s 0.7s forwards; }

	button, #bahasa, #bahasa-inggris{ border-radius: 25px; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s; margin: 12px auto; font-family: Arial, sans-serif; }

	#openInvitation { height: 38px; width: 220px; padding: 0 20px; background: black; color: white; border: none; animation: fadeSlide 0.5s 0.9s forwards; margin-bottom: 40px; }
	#openInvitation:hover { background: #333; }

	#bahasa { height: 38px; width: 210px; padding: 0 15px; background: white; color: black; border: 1px solid #ccc; font-weight: 500; font-size: 0.9rem; line-height: 38px; text-align: center; animation: fadeSlide 0.5s 1.1s forwards; }
	#bahasa:hover { background: #f0f0f0; }
	#bahasa i { font-size: 0.85rem; }

	#bahasa-inggris { height: 38px; width: 160px; padding: 0 15px; background: white; color: black; border: 1px solid #ccc; font-weight: 500; font-size: 0.9rem; line-height: 38px; text-align: center; animation: fadeSlide 0.5s 1.1s forwards; }
	#bahasa-inggris:hover { background: #f0f0f0; }
	#bahasa-inggris i { font-size: 0.85rem; }


	/* HALAMAN 2 */
	#page2 { display: block; min-height: 100vh; width: 100%; background-color: rgb(32, 29, 29); color: #fff; padding: 25px 10px; box-sizing: border-box; position: relative; text-align: center; }
	#page2Content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 800px; margin: 0 auto; background: #ffffff; color: #3a2a1a; padding: 0px 20px; padding-bottom : 10px; border-radius: 30px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); }

	#page2 h2, #page2 p { margin: 30px 10px; max-width: 100%; }
	#page2 h2 { font-size: 2.2rem; font-family: 'HighSummit', cursive; margin-bottom: 20px; }
	#page2 p { margin-top: 10px; font-size: 0.8rem; line-height: 1.5; }
	#page2 img { width: 100%; max-width: 600px; border-radius: 15px; margin-top: 20px; margin-bottom: 10px; }

	/* HALAMAN 3 */
	#page3 { 
	  display: block; 
	  min-height: 100vh; 
	  width: 100%; 
	  background-color: rgb(32, 29, 29); 
	  color: #fff; 
	  padding: 25px 10px; 
	  box-sizing: border-box; 
	  position: relative; 
	  text-align: center; 
	}

	#page3Content { 
	  position: relative; 
	  z-index: 2; 
	  display: flex; 
	  flex-direction: column; 
	  align-items: center; 
	  text-align: center; 
	  max-width: 800px; 
	  margin: 0 auto; 
	}

	#page3 h2 { 
	  font-size: 2rem; 
	  font-family: 'HighSummit', cursive; 
	  color: #c49b76;
	  margin-bottom: 15px; 
	}

	#page3 p { 
	  font-size: 1rem; 
	  color: #fff; 
	  margin-bottom: 30px; 
	}

	/* profile section */
	.profile-section { 
	  display: flex; 
	  gap: 50px; 
	  flex-wrap: wrap; 
	  justify-content: center; 
	  margin-top: 50px;
	}

	.profile { 
	  display: flex; 
	  flex-direction: column; 
	  align-items: center; 
	  text-align: center; 
	}

	.profile-img { 
	  width: 280px;       
	  height: 360px;      
	  border-radius: 200px; /* makin besar = makin bulat */
	  background-size: cover; 
	  background-position: center; 
	  border: 6px solid #c49b76; 
	  margin-bottom: 15px; 
	}

	 
	.profile h3 { 
	  font-family: 'Dancing Script', cursive; /* ganti jadi handwriting font lain */
	  font-size: 2.5rem; 
	  color: #c49b76; 
	  margin: 10px 0 5px 0; 
	}


	.parent-text { 
	  font-size: 0.85rem; 
	  color: #fff; 
	  line-height: 1.4; 
	  text-align: center;
	}

	.parent-text span { 
	  display: block; 
	  font-weight: bold; 
	  margin-top: 2px; 
	}



	.full-photo img {
		width: 100%;       /* biar responsive */
		height: auto;      /* pertahankan rasio */
		border-radius: 20px;  /* sudut membulat, bisa diganti angka */
		object-fit: cover;     /* biar tetep proporsional */
		display: block;        /* hapus space bawah */
	}

	.event-box {
	  background: rgba(255, 255, 255, 0.25);
	  border-radius: 20px;
	  padding: 18px;
	  text-align: center;
	  color: white;
	  max-width: 800px;
	  margin: 0 auto;
	}

	.event-card {
	  margin-top: 30px;
	  border-radius: 20px;
	  background-size: cover;
	  background-position: center;
	  position: relative;
	  overflow: hidden;
	}

	.event-card .overlay {
	  background: rgba(255, 255, 255, 0.8);
	  padding: 30px;
	  border-radius: 20px;
	  color: #222;
	}

	.event-title {
	  font-family: 'Dancing Script', cursive;
	  font-size: 36px;
	  margin-bottom: 10px;
	}
	.event-date {
	  font-size: 15px;
	  margin: 0; /* buang jarak atas bawah */
	}

	.event-time {
	  font-size: 26px;
	  font-weight: bold;
	  margin: 2px 0 20px 0; /* rapat sama date, bawah tetap ada jarak */
	}


	.event-place {
	  font-size: 14px;
	  margin-bottom: 20px;
	}

	.btn-map {
	  display: inline-block;
	  padding: 10px 20px;
	  background: #222;
	  color: white;
	  text-decoration: none;
	  border-radius: 30px;
	  font-size: 14px;
	  transition: 0.3s;
	}

	.btn-map:hover {
	  background: #555;
	}

	.ring-icon {
	  width: 73px;            /* sesuaikan ukuran */
	  height: auto;
	  display: block;
	  margin: 0 auto 0px;     /* beri jarak bawah */
	}

	.reception-icon {
	  width: 52px;            /* sesuaikan ukuran */
	  height: auto;
	  display: block;
	  margin: 0 auto 0px;     /* beri jarak bawah */
	}

	.event-title {
	  font-family: 'Dancing Script', cursive;
	  font-size: 3px;
	  color: #000;         
	  margin-top: 10px;
	}


	.ribbon-container { text-align: center; margin-bottom: 20px; }
	.ribbon-text { font-family: 'HighSummit', cursive; font-size: 2.2rem; color: #c49b76; margin-bottom: 8px; }
	.ribbon-divider { display: flex; align-items: center; justify-content: center; gap: 12px; }
	.ribbon-divider .line { height: 1px; background-color: #000000; flex-grow: 1; border-radius: 1px; }
	.ribbon-divider i { color: #c49b76; font-size: 24px; }

	
	/* Animasi fade dari bawah atau atas untuk halaman 2 */
	.fade-on-scroll { opacity: 0; transform: translateY(30px); transition: all 1s ease-out; }
	.fade-on-scroll.visible { opacity: 1; transform: translateY(0); }

	/* Animasi dari atas khusus untuk foto */
	.fade-from-top { opacity: 0; transform: translateY(-30px); transition: all 1s ease-out; }
	.fade-from-top.visible { opacity: 1; transform: translateY(0); }

	@keyframes fadeSlide { to { opacity: 1; transform: translateY(0); } }



	.timeline-section {
	  position: relative;
	  padding: 20px 20px;
	  background: #fff; /* putih polos */
	}

	.timeline-section .section-title,
	.timeline-section h2 {
	  text-align: center;
	  color: #333;
	  margin-bottom: 20px;
	}

	.timeline {
	  position: relative;
	  max-width: 800px;
	  margin: auto;
	  display: flex;
	  flex-direction: column;
	  gap: 80px; /* jarak antar box */
	  padding: 40px 0 20px 0; /* sisakan space 20px untuk icon */
	}

	.timeline::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  bottom: 20px; /* sama dengan padding-bottom */
	  left: 50%;
	  width: 5px;
	  background: #bfa14a; /* garis tengah emas-coklat */
	  transform: translateX(-50%);
	}

	.timeline::after {
	  content: ""; /* icon hati */
	  position: absolute;
	  bottom: 0;        /* ujung bawah garis */
	  left: 50%;
	  transform: translateX(-50%);
	  font-size: 24px;  /* sesuaikan ukurannya */
	}


	.timeline-item {
	  display: flex;
	  justify-content: center;
	  position: relative;
	}

	.timeline-item .content {
	  background: #DECFBA; /* coklat muda */
	  padding: 20px;
	  border-radius: 15px;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	  text-align: center;
	  width: 100%;
	  max-width: 500px;
	  position: relative;
	}

	.timeline-item .content img {
	  width: 80px;
	  height: 80px;
	  object-fit: cover;
	  border-radius: 50%;
	  border: 4px solid #bfa14a;
	  margin-top: -60px; /* nongol di atas box */
	  background: #fff;
	}

	.timeline-item h3 {
	  margin: 10px 0;
	  font-size: 18px;
	}

	.timeline-item p {
	  font-size: 14px;
	  line-height: 1.6;
	}

	.timeline-item .content h3 {
	  font-size: 18px;
	  margin: 10px 0 5px;
	  color: #000;
	}

	.timeline-item .content .date {
	  display: block;
	  font-size: 14px;
	  font-weight: 400; /* tidak bold */
	  color: #000;
	  margin-top: 2px;
	}



	/* ------------------------ Animasi Global ------------------------ */
	.fade-on-scroll, .fade-from-top, .timeline-item, .gallery-img {
	  opacity: 0;
	  transform: translateY(30px);
	  transition: all 0.8s ease-out;
	}

	.fade-from-top { transform: translateY(-30px); }
	.fade-on-scroll.visible, .fade-from-top.visible, .timeline-item.visible, .gallery-img.visible {
	  opacity: 1;
	  transform: translateY(0);
	}

	/* ------------------------ Timeline Alternatif ------------------------ */
	.timeline-section-alt {
	  position: relative;
	  padding: 20px;
	  background: #fff;
	}

	.timeline-item-alt {
	  display: flex;
	  flex-wrap: wrap;
	  align-items: flex-start;
	  gap: 15px;
	  opacity: 0;
	  transform: translateY(30px);
	  transition: all 0.8s ease-out;
	}

	.timeline-item-alt.visible { 
	  opacity: 1; 
	  transform: translateY(0); 
	}

	.timeline-item-alt img {
	  width: 40%;
	  max-width: 350px;
	  aspect-ratio: 3/4;
	  object-fit: cover;
	  border-radius: 12px;
	}

	.timeline-item-alt .text {
	  flex: 1;
	}

	.timeline-item-alt h3 {
	  margin: 0;
	  font-size: 16px;
	  color: #333;
	}

	.timeline-item-alt span {
	  font-size: 12px;
	  font-weight: normal;
	  color: #8B5E3C;
	}

	.timeline-item-alt p {
	  font-size: 12px;
	  line-height: 1.3;
	  margin: 4px 0 0 0;
	}

	/* ------------------------ Gallery ------------------------ */
	#gallery {
	  column-count: 2;
	  column-gap: 8px;
	}

	.gallery-img {
	  width: 100%;
	  margin-bottom: 8px;
	  display: block;
	  cursor: pointer; 
	  transition: transform 0.3s ease, opacity 0.3s ease;
	}

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

	/* ------------------------ Lightbox ------------------------ */
	#lightbox img {
	  max-width: 90vw;
	  max-height: 80vh;
	  transition: transform 0.3s ease;
	}

	/* Zoom */
	#zoom-in { transform: scale(1); transition: transform 0.3s ease; }
	#zoom-out { transform: scale(1); transition: transform 0.3s ease; }

	/* ------------------------ Timeline Tengah ------------------------ */
	.timeline {
	  position: relative;
	  max-width: 800px;
	  margin: 40px auto;
	  display: flex;
	  flex-direction: column;
	  gap: 80px;
	  padding: 40px 0 20px;
	}

	.timeline::before {
	  content: "";
	  position: absolute;
	  top: 0;
	  bottom: 20px;
	  left: 50%;
	  width: 5px;
	  background: #bfa14a;
	  transform: translateX(-50%);
	}

	.timeline-item {
	  display: flex;
	  justify-content: center;
	  position: relative;
	  opacity: 0;
	  transform: translateY(30px);
	  transition: all 0.8s ease-out;
	}

	.timeline-item.visible { 
	  opacity: 1;
	  transform: translateY(0);
	}

	.timeline-item .content {
	  background: #DECFBA;
	  padding: 20px;
	  border-radius: 15px;
	  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	  text-align: center;
	  width: 100%;
	  max-width: 500px;
	  position: relative;
	}

	.timeline-item .content img {
	  width: 80px;
	  height: 80px;
	  object-fit: cover;
	  border-radius: 50%;
	  border: 4px solid #bfa14a;
	  margin-top: -60px;
	  background: #fff;
	}

	.timeline-item h3 {
	  margin: 10px 0;
	  font-size: 18px;
	}

	.timeline-item p {
	  font-size: 14px;
	  line-height: 1.6;
	}

	.timeline-item .date {
	  display: block;
	  font-size: 14px;
	  font-weight: 400;
	  color: #000;
	  margin-top: 2px;
	}

	/* Fade in dari bawah untuk scroll */
	.fade-on-scroll {
	  opacity: 0;
	  transform: translateY(30px);
	  transition: all 1s ease-out;
	}

	.fade-on-scroll.visible {
	  opacity: 1;
	  transform: translateY(0);
	}
	 
	 
	 /* Container pagination */
	#rsvp-pagination {
	  display: flex;
	  justify-content: center;
	  flex-wrap: wrap;   /* biar bisa 2 baris */
	  gap: 4px;
	  margin-top: 15px;
	  max-width: 250px;  /* biar otomatis turun baris kalau kepanjangan */
	  margin-left: auto;
	  margin-right: auto;
	}

	/* Tombol pagination */
	.rsvp-page-btn {
	  display: inline-block;
	  min-width: 22px;
	  padding: 4px 8px;
	  border: 1px solid #ddd;
	  border-radius: 12px; /* lebih kecil bulatnya */
	  background: #fff;
	  color: #333;
	  cursor: pointer;
	  font-size: 12px;   /* kecilin font */
	  text-align: center;
	  transition: all 0.2s ease-in-out;
	}

	.rsvp-page-btn:hover {
	  background: #f5f5f5;
	}

	/* Aktif (halaman sekarang) */
	.rsvp-page-btn.active {
	  background: #007bff;
	  color: #fff;
	  border-color: #007bff;
	  font-weight: bold;
	  cursor: default;
	}

.add-calendar i {
  margin-right: 8px;
} 


  #splashContent h1 {
    margin-bottom: 5px; /* default biasanya 16-20px */
  }
  #splashContent h2 {
    margin-bottom: 10px;
  }
  #splashContent #dear {
    margin-bottom: 10px;
  }
  #openInvitation {
    margin-bottom: 25px; /* perkecil jarak ke link bahasa */
  }
  #bahasa {
    display: block;
    margin-top: 10px; /* jarak ke tombol lebih rapat */
  } 

  #bahasa-inggris {
    display: block;
    margin-top: 10px; /* jarak ke tombol lebih rapat */
  } 


.parent-text .child-label {
  font-family: Arial, Helvetica, sans-serif; /* font polos */
  font-size: 13px; /* ukuran lebih kecil */
  font-weight: 300; /* lebih tipis dari default */
  color: #ffffff;  /* tetap putih */
  margin-bottom: 5px;
}


.music-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 20px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transition: 0.3s;
  z-index: 9999;
}
.music-btn:hover {
  background: #c49b76;
}


/* Tombol Musik */
.music-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 55px;
  height: 55px;
  font-size: 22px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
  z-index: 1000;
}

.music-btn:hover {
  background: #c49b76;
  transform: scale(1.1);
}

.btn-live {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: #000;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14px;
  border: 1px solid #b8b8b8; /* <--- ini bikin border */
}

.btn-live i {
  margin-right: 6px;
  font-size: 16px;
}

.btn-live:hover {
  background: #fff;
  transform: translateY(-2px);
  border-color: #333; /* bisa ubah warna pas hover */
}

.ig-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px; /* lebih lega antara logo dan teks */
  background-color: #e3e3e3;
  color: rgb(0, 0, 0);
  padding: 6px 12px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 500; /* lebih tegas tapi tetap elegan */
  font-family: 'Montserrat', sans-serif; /* pakai font yang sama dengan website */
  font-size: 14px; /* ukuran sedikit lebih besar untuk keterbacaan */
  margin-bottom: 10px;
  transition: background-color 0.3s;
}

.ig-btn:hover {
  background-color: #c49b76; 
  color: rgb(0, 0, 0);
}

.ig-logo {
  width: 18px; /* sedikit lebih besar supaya proporsional */
  height: 18px;
}

#page2Content img {
  width: 100%;
  height: auto;        /* penting: jaga rasio */
  object-fit: cover;   /* atau "contain" kalau mau full terlihat */
  max-height: 85vh;    /* batasi tinggi supaya tidak super panjang */
}


img[src*="welcome-1"],
img[src*="welcome-2"] {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 80vh;
  border-radius: 10px; /* kalau mau lebih cantik */
}