/* Variabel CSS tema dekoratif */
:root {
  --primary-decoration: #8ecae6;
  --secondary-decoration: #ffb3ba;
  --accent-gold: #ffd700;
  --accent-rose: #f8bbd9;
  --elegant-gray: #6c757d;
  --warm-white: #faf9f6;
  --border-radius: 20px;
  --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* Background patterns dan textures untuk sections */
body {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f0f8ff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Container untuk membatasi elemen dekoratif */
.decorative-bounds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Styling untuk decorative-container yang ada di HTML */
.decorative-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

/* Styling untuk section dengan borders & frames dekoratif */
section {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 2rem;
  padding: 3rem 1.5rem;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.97);
}

/* Border dekoratif untuk semua section */
section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(
    90deg,
    var(--primary-decoration),
    var(--accent-rose),
    var(--primary-decoration)
  );
  border-radius: 10px 10px 0 0;
  opacity: 0.7;
}

/* Efek corner decorations untuk semua section */
section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: linear-gradient(
    90deg,
    var(--primary-decoration),
    var(--accent-rose),
    var(--primary-decoration)
  );
  border-radius: 0 0 10px 10px;
  opacity: 0.7;
}

/* ===== DECORATIVE ELEMENTS ===== */

/* Floating hearts animation */
.floating-heart {
  position: absolute;
  font-size: 1rem;
  color: var(--secondary-decoration);
  opacity: 0.6;
  z-index: 1;
  animation: floatHeart 8s ease-in-out infinite;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

@keyframes floatHeart {
  0%,
  100% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) scale(1.1) rotate(5deg);
  }
  50% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  75% {
    transform: translateY(15px) scale(0.9) rotate(-5deg);
  }
}

/* Sparkles/stars effect */
.sparkle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--accent-gold);
  opacity: 0;
  z-index: 1;
  animation: sparkleEffect 4s ease-in-out infinite;
}

@keyframes sparkleEffect {
  0%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0.8;
    transform: scale(1);
  }
}

/* Flower petals animation */
.flower-petal {
  position: absolute;
  width: 15px;
  height: 15px;
  background-color: var(--secondary-decoration);
  border-radius: 15px 0;
  opacity: 0.6;
  z-index: 1;
  animation: fallingPetal 10s linear infinite;
  transform-origin: center;
}

@keyframes fallingPetal {
  0% {
    top: -20px;
    transform: rotate(0deg) translateX(0);
  }
  100% {
    top: 100vh;
    transform: rotate(360deg) translateX(50px);
  }
}

/* Butterfly animation */
.butterfly {
  position: absolute;
  width: 20px;
  height: 20px;
  z-index: 2;
  animation: butterflyFly 20s linear infinite;
}

.butterfly::before,
.butterfly::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 15px;
  background-color: var(--accent-rose);
  border-radius: 10px 10px 0 0;
  opacity: 0.7;
}

.butterfly::before {
  left: -5px;
  transform-origin: right center;
  animation: butterflyWingLeft 0.5s ease-in-out infinite alternate;
}

.butterfly::after {
  left: 5px;
  transform-origin: left center;
  animation: butterflyWingRight 0.5s ease-in-out infinite alternate;
}

@keyframes butterflyFly {
  0% {
    top: 30%;
    left: -50px;
    transform: translateY(0);
  }
  25% {
    top: 20%;
    left: 25vw;
    transform: translateY(-20px);
  }
  50% {
    top: 40%;
    left: 50vw;
    transform: translateY(20px);
  }
  75% {
    top: 30%;
    left: 75vw;
    transform: translateY(0);
  }
  100% {
    top: 35%;
    left: 100vw;
    transform: translateY(10px);
  }
}

@keyframes butterflyWingLeft {
  0% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(60deg);
  }
}

@keyframes butterflyWingRight {
  0% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(-60deg);
  }
}

/* Decorative frames */
.decorative-frame {
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: 2;
}

.top-left {
  top: 20px;
  left: 20px;
  border-top: 4px solid var(--accent-gold);
  border-left: 4px solid var(--accent-gold);
  border-top-left-radius: 10px;
}

.top-right {
  top: 20px;
  right: 20px;
  border-top: 4px solid var(--accent-gold);
  border-right: 4px solid var(--accent-gold);
  border-top-right-radius: 10px;
}

.bottom-left {
  bottom: 20px;
  left: 20px;
  border-bottom: 4px solid var(--accent-gold);
  border-left: 4px solid var(--accent-gold);
  border-bottom-left-radius: 10px;
}

.bottom-right {
  bottom: 20px;
  right: 20px;
  border-bottom: 4px solid var(--accent-gold);
  border-right: 4px solid var(--accent-gold);
  border-bottom-right-radius: 10px;
}

/* Islamic patterns */
.islamic-pattern {
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%238ecae6' fill-opacity='0.2' d='M20 0L0 20h10l10-10 10 10h10L20 0zm0 40l20-20H30L20 30 10 20H0l20 20z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.5;
  z-index: 1;
}

.islamic-pattern.top {
  top: 70px;
  left: 20px;
  right: 20px;
  height: 20px;
}

.islamic-pattern.bottom {
  bottom: 70px;
  left: 20px;
  right: 20px;
  height: 20px;
}

.islamic-pattern.left {
  top: 90px;
  bottom: 90px;
  left: 20px;
  width: 20px;
}

.islamic-pattern.right {
  top: 90px;
  bottom: 90px;
  right: 20px;
  width: 20px;
}

/* Floral corners */
.floral-corner {
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5C25 5 20 10 20 15C15 15 10 20 10 25C10 30 15 35 20 35C20 40 25 45 30 45C35 45 40 40 40 35C45 35 50 30 50 25C50 20 45 15 40 15C40 10 35 5 30 5Z' fill='%238ecae6' fill-opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  z-index: 1;
}

.floral-corner.top-left {
  top: 10px;
  left: 10px;
}

.floral-corner.top-right {
  top: 10px;
  right: 10px;
  transform: scaleX(-1);
}

.floral-corner.bottom-left {
  bottom: 10px;
  left: 10px;
  transform: scaleY(-1);
}

.floral-corner.bottom-right {
  bottom: 10px;
  right: 10px;
  transform: scale(-1);
}

/* Confetti container */
.confetti-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.confetti-piece {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--secondary-decoration);
  top: -20px;
  animation: confetti-fall 8s linear infinite;
}

.confetti-piece:nth-child(2n) {
  background-color: var(--accent-gold);
  left: 20%;
  animation-delay: 1s;
}

.confetti-piece:nth-child(3n) {
  background-color: var(--primary-decoration);
  left: 30%;
  animation-delay: 2s;
}

.confetti-piece:nth-child(4n) {
  background-color: var(--accent-rose);
  left: 40%;
  animation-delay: 3s;
}

.confetti-piece:nth-child(5n) {
  background-color: var(--primary-decoration);
  left: 50%;
  animation-delay: 4s;
}

@keyframes confetti-fall {
  0% {
    top: -20px;
    transform: rotate(0deg) translateX(0);
  }
  25% {
    transform: rotate(90deg) translateX(10px);
  }
  50% {
    transform: rotate(180deg) translateX(-10px);
  }
  75% {
    transform: rotate(270deg) translateX(10px);
  }
  100% {
    top: 100%;
    transform: rotate(360deg) translateX(0);
  }
}

/* Quote container */
.quote-container {
  position: relative;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  margin: 20px auto;
  max-width: 90%;
}

.quote-container::before,
.quote-container::after {
  content: '"';
  position: absolute;
  font-size: 4rem;
  color: var(--primary-decoration);
  opacity: 0.5;
  font-family: serif;
}

.quote-container::before {
  top: -10px;
  left: 10px;
}

.quote-container::after {
  bottom: -40px;
  right: 10px;
}

/* ===== ANIMATIONS & DECORATIVE ELEMENTS ===== */

/* Ornamen gambar di sudut setiap section - mengganti ikon bunga */
.section-ornaments {
  position: absolute;
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.7;
  z-index: 5;
  animation: ornamentFloat 4s ease-in-out infinite;
}

.section-ornaments.top-left {
  top: 20px;
  left: 20px;
  background-image: url("../assets/images/corner-1.png");
}

.section-ornaments.top-right {
  top: 20px;
  right: 20px;
  background-image: url("../assets/images/corner-2.png");
}

.section-ornaments.bottom-left {
  bottom: 20px;
  left: 20px;
  background-image: url("../assets/images/corner-3.png");
}

.section-ornaments.bottom-right {
  bottom: 20px;
  right: 20px;
  background-image: url("../assets/images/corner-4.png");
}

@keyframes ornamentFloat {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-10px) scale(1.05);
  }
}

/* Sembunyikan ikon bunga lama */
.hadist i.bxs-spa,
.cerita i.bxs-spa,
.time i.bxs-spa {
  display: none;
}

/* Glow effect untuk ikon */
@keyframes glowEffect {
  0%,
  100% {
    filter: drop-shadow(0 0 5px rgba(142, 202, 230, 0.5));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(142, 202, 230, 0.8));
  }
}

/* Tambahan animasi rotasi perlahan untuk efek bergerak */
@keyframes slowRotate {
  0% {
    transform: rotate(0deg) scale(1.2);
  }
  50% {
    transform: rotate(15deg) scale(1.3);
  }
  100% {
    transform: rotate(0deg) scale(1.2);
  }
}

/* Tambahan animasi bunga mawar bergerak */
@keyframes flowerBloom {
  0% {
    transform: scale(1.2);
  }
  30% {
    transform: scale(1.3) rotate(5deg);
  }
  60% {
    transform: scale(1.35) rotate(-5deg);
  }
  100% {
    transform: scale(1.2);
  }
}

/* Animasi mengapung ke atas dan bawah */
@keyframes upAndDown {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

/* Tambahkan animasi rotasi pada hover */
.hadist i.bxs-spa:hover,
.cerita i.bxs-spa:hover,
.time a + p + i.bxs-spa:hover {
  animation: slowRotate 2s infinite;
  cursor: pointer;
  color: #6db5d9 !important;
  filter: drop-shadow(0 0 10px rgba(142, 202, 230, 0.7));
}

/* ===== SECTION SPECIFIC STYLING ===== */

/* HOME SECTION */
.home {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238ecae6' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  position: relative;
}

.home figure {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.home figure div {
  font-family: var(--sacramento);
  font-size: 2rem;
  color: var(--primary-font-color);
  position: relative;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem 3rem;
  border: 2px solid rgba(142, 202, 230, 0.3);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.home figure div::before,
.home figure div::after {
  content: "❁";
  position: absolute;
  font-size: 1.5rem;
  color: var(--primary-decoration);
  top: 50%;
  transform: translateY(-50%);
}

.home figure div::before {
  left: 0.5rem;
}

.home figure div::after {
  right: 0.5rem;
}

/* HADIST SECTION */
.hadist {
  background-image: radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.8) 100%
    ),
    url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 0h2v20H9V0zm25.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm-20 20l1.732 1-10 17.32-1.732-1 10-17.32zM58.16 4.134l1 1.732-17.32 10-1-1.732 17.32-10zm-40 40l1 1.732-17.32 10-1-1.732 17.32-10zM80 9v2H60V9h20zM20 69v2H0v-2h20zm79.32-55l-1 1.732-17.32-10L82 4l17.32 10zm-80 80l-1 1.732-17.32-10L2 84l17.32 10zm96.546-75.84l-1.732 1-10-17.32 1.732-1 10 17.32zm-100 100l-1.732 1-10-17.32 1.732-1 10 17.32zM38.16 24.134l1 1.732-17.32 10-1-1.732 17.32-10zM60 29v2H40v-2h20zm19.32 5l-1 1.732-17.32-10L62 24l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM111 40h-2V20h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zM40 49v2H20v-2h20zm19.32 5l-1 1.732-17.32-10L42 44l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM91 60h-2V40h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM39.32 74l-1 1.732-17.32-10L22 64l17.32 10zm16.546 4.16l-1.732 1-10-17.32 1.732-1 10 17.32zM71 80h-2V60h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM120 89v2h-20v-2h20zm-84.134 9.16l-1.732 1-10-17.32 1.732-1 10 17.32zM51 100h-2V80h2v20zm3.134.84l1.732 1-10 17.32-1.732-1 10-17.32zm24.026 3.294l1 1.732-17.32 10-1-1.732 17.32-10zM100 109v2H80v-2h20zm19.32 5l-1 1.732-17.32-10 1-1.732 17.32 10zM31 120h-2v-20h2v20z' fill='%236c757d' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  position: relative;
  overflow: hidden;
}

.hadist p {
  position: relative;
  padding: 2rem;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
  border-left: 4px solid var(--primary-decoration);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  font-style: italic;
}

.hadist p::before {
  content: "\201C";
  position: absolute;
  top: -20px;
  left: 5px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--primary-decoration);
  opacity: 0.3;
}

.hadist p::after {
  content: "\201D";
  position: absolute;
  bottom: -40px;
  right: 10px;
  font-size: 4rem;
  font-family: Georgia, serif;
  color: var(--primary-decoration);
  opacity: 0.3;
}

.hadist p span {
  display: block;
  text-align: right;
  font-weight: bold;
  margin-top: 1rem;
  font-style: normal;
  color: var(--elegant-gray);
}

/* CERITA SECTION */
.cerita {
  background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f8bbd9' fill-opacity='0.1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6h-2c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  position: relative;
}

.cerita p {
  position: relative;
  border-radius: 10px;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  border: 1px dashed var(--accent-rose);
}

.cerita p::first-letter {
  font-size: 3rem;
  font-family: var(--sacramento);
  color: var(--primary-decoration);
  float: left;
  margin-right: 0.5rem;
  line-height: 1;
}

/* BRIDE SECTION */
.bride {
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23f8bbd9' fill-opacity='0.1'%3E%3Cpath d='M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  position: relative;
}

.bride_couple {
  position: relative;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  margin-bottom: 3rem;
  border: 2px solid rgba(142, 202, 230, 0.2);
  overflow: hidden;
}

.bride_couple::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, var(--accent-rose) 0%, transparent 70%);
  top: -50px;
  left: -50px;
  opacity: 0.3;
  border-radius: 50%;
}

.bride_couple::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  background: radial-gradient(
    circle,
    var(--primary-decoration) 0%,
    transparent 70%
  );
  bottom: -50px;
  right: -50px;
  opacity: 0.3;
  border-radius: 50%;
}

.bride_couple ul li .bride-name {
  position: relative;
  display: inline-block;
}

.bride_couple ul li .bride-name::before,
.bride_couple ul li .bride-name::after {
  content: "❀";
  position: relative;
  top: -10px;
  font-size: 1.5rem;
  color: var(--accent-rose);
  margin: 0 10px;
}

/* TIME SECTION */
.time {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238ecae6' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238ecae6' fill-opacity='0.05' d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm5.848 12.459c.202.038.202.333.001.372-1.907.361-6.045 1.111-6.547 1.111-.719 0-1.301-.582-1.301-1.301 0-.512.77-5.447 1.125-7.445.034-.192.312-.181.343.014l.985 6.238 5.394 1.011z'/%3E%3C/svg%3E");
  position: relative;
}

.time div {
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1rem 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  position: relative;
  border: 1px solid rgba(142, 202, 230, 0.3);
}

.time div::before {
  content: "⏰";
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 1.5rem;
  opacity: 0.5;
}

/* WISHAS SECTION */
.wishas {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23ffd700' fill-opacity='0.1' fill-rule='nonzero'%3E%3Cpath d='M29 58.58l7.38-7.39A30.95 30.95 0 0 1 29 37.84a30.95 30.95 0 0 1-7.38 13.36l7.37 7.38zm1.4 1.41l.01.01h-2.84l-7.37-7.38A30.95 30.95 0 0 1 6.84 60H0v-1.02a28.9 28.9 0 0 0 18.79-7.78L0 32.41v-4.84L18.78 8.79A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v27.58-.01V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60zM29 1.41l-7.4 7.38A30.95 30.95 0 0 1 8.24 2.38L15.62 9.76A30.95 30.95 0 0 1 29 22.14a30.95 30.95 0 0 1 13.38-12.38l7.38-7.38-7.38 7.38A30.95 30.95 0 0 1 29 1.4zM58.98 10.61l.01-.01h-11.4a28.9 28.9 0 0 0-7.78 18.78L58.98 48.17v-5.66a28.9 28.9 0 0 0-7.78-18.8l7.78-7.78V10.6zM6.84 60H0v-1.02a28.9 28.9 0 0 0 18.9-7.78L0 32.41v-4.84L18.9 8.78A28.9 28.9 0 0 0 0 1.02V0h6.84a30.95 30.95 0 0 1 13.35 7.38L27.57 0h2.84l7.39 7.38A30.95 30.95 0 0 1 51.16 0H60v1.02a28.9 28.9 0 0 0-18.9 7.78L60 27.57v4.84L41.1 51.2A28.9 28.9 0 0 0 60 58.98V60h-8.84a30.95 30.95 0 0 1-13.37-7.4L30.4 60z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  position: relative;
}

.wishas form {
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 2rem;
  position: relative;
  border: 2px solid rgba(142, 202, 230, 0.2);
  overflow: hidden;
}

.wishas form::before {
  content: "✉️";
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 1.5rem;
  opacity: 0.5;
}

.wishas form input,
.wishas form select,
.wishas form textarea {
  border: 2px solid rgba(142, 202, 230, 0.3);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  background-color: rgba(255, 255, 255, 0.9);
}

.wishas form input:focus,
.wishas form select:focus,
.wishas form textarea:focus {
  border-color: var(--primary-decoration);
  box-shadow: 0 0 10px rgba(142, 202, 230, 0.3);
  outline: none;
}

.wishas form button {
  background: linear-gradient(135deg, var(--primary-decoration), #64b5f6);
  color: white;
  border: none;
  padding: 12px 25px;
  border-radius: 50px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(100, 181, 246, 0.4);
  position: relative;
  overflow: hidden;
}

.wishas form button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: all 0.5s ease;
}

.wishas form button:hover::before {
  left: 100%;
}

.wishas form button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(100, 181, 246, 0.6);
}

/* FOOTER SECTION */
footer {
  position: relative;
  padding: 3rem 1.5rem;
  margin-bottom: 0;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.97);
  overflow: hidden;
}

/* Media queries for responsive designs */
@media (max-width: 768px) {
  /* Perbesar ornament sizes untuk tablet/mobile */
  .section-ornaments {
    width: 90px;
    height: 90px;
  }

  .section-ornaments.top-left,
  .section-ornaments.top-right {
    top: 20px;
  }

  .section-ornaments.top-left,
  .section-ornaments.bottom-left {
    left: 20px;
  }

  .section-ornaments.top-right,
  .section-ornaments.bottom-right {
    right: 20px;
  }

  .section-ornaments.bottom-left,
  .section-ornaments.bottom-right {
    bottom: 20px;
  }

  /* Adjust flower icon sizes for small screens - KEEP OLD STYLES */
  .hadist i.bxs-spa,
  .cerita i.bxs-spa,
  .time a + p + i.bxs-spa {
    font-size: 2.5rem;
    transform: scale(1);
  }

  /* Adjust flower icon positions */
  .hadist i.bxs-spa {
    top: 12rem;
    left: 1.5rem;
  }

  .cerita i.bxs-spa {
    bottom: 3rem;
    right: 1.5rem;
  }

  .time a + p + i.bxs-spa {
    right: 1.5rem;
    top: 15rem;
  }

  /* Responsive bride section */
  .bride h2 {
    font-size: 1.8rem;
  }

  .bride h3 {
    font-size: 1.3rem;
  }

  .bride p {
    max-width: 95%;
    font-size: 0.95rem;
  }

  /* Responsive bride couple names */
  .bride .bride_couple ul li .bride-name {
    font-size: 2rem;
  }

  .bride .bride_couple ul li .bride-name i {
    font-size: 1.2rem !important;
  }

  .bride .bride_couple ul li p {
    font-size: 0.9rem;
    max-width: 95%;
  }

  /* Adjust flower icons in bride section */
  .bride i.bxs-spa {
    font-size: 2rem;
  }

  /* Adjust section transition */
  .section-transition {
    height: 30px;
    margin-bottom: -30px;
  }

  /* Adjust section paddings */
  .bride {
    padding: 6rem 1rem 1rem;
  }

  .time {
    padding: 2rem 1rem 6rem;
  }

  /* Hide some decorative elements on mobile */
  .butterfly,
  .sparkle {
    display: none;
  }

  /* Reduce animations for better performance */
  .hadist i.bxs-spa,
  .cerita i.bxs-spa,
  .time a + p + i.bxs-spa {
    animation: upAndDown 3s infinite;
  }
}

/* For very small screens */
@media (max-width: 480px) {
  .hadist i.bxs-spa,
  .cerita i.bxs-spa,
  .time a + p + i.bxs-spa {
    font-size: 2rem;
  }

  /* Simpler animations for better performance */
  .hadist i.bxs-spa,
  .cerita i.bxs-spa,
  .time a + p + i.bxs-spa {
    animation: upAndDown 3s infinite;
  }

  /* Adjust decorative flower positions */
  .bride_couple i.bxs-spa:first-of-type {
    left: 20% !important;
  }

  .bride_couple i.bxs-spa:nth-of-type(2) {
    right: 20% !important;
  }
}

/* Tambahkan animasi rotasi pada hover */
.hadist i.bxs-spa:hover,
.cerita i.bxs-spa:hover,
.time a + p + i.bxs-spa:hover {
  animation: slowRotate 2s infinite;
  cursor: pointer;
  color: #6db5d9 !important; /* Warna sedikit lebih gelap saat hover */
  filter: drop-shadow(
    0 0 8px rgba(142, 202, 230, 0.6)
  ); /* Efek cahaya lebih kuat saat hover */
}

/* Tambahkan CSS berikut untuk menyembunyikan gambar tetapi mempertahankan struktur */
.welcome figure {
  height: 150px; /* Sesuaikan dengan tinggi foto sebelumnya */
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.welcome figure img {
  display: none; /* Menyembunyikan gambar */
}

/* Styling untuk elemen transisi antar section */
.section-transition {
  position: relative;
  width: 100%;
  height: 50px;
  margin-top: 2rem;
  margin-bottom: -50px;
  overflow: hidden;
}

.section-transition svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Tambahkan CSS berikut untuk mengurangi jarak antara section bride dan time */
.bride {
  padding-bottom: 1rem; /* Mengurangi padding bawah lebih banyak */
  min-height: auto; /* Mengubah min-height agar tidak terlalu tinggi */
}

.time {
  padding-top: 2rem; /* Mengurangi padding atas lebih banyak */
  margin-top: 0;
  min-height: auto; /* Mengubah min-height agar tidak terlalu tinggi */
  background-color: #f8f9fa; /* Memberikan background color yang sama dengan transisi */
}

/* Override untuk section time - memastikan visibility di mobile */
@media (max-width: 768px) {
  .time p,
  .time a {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .time a[href=""] {
    background-color: #6c757d;
    cursor: not-allowed;
  }

  .time a[href=""]:hover {
    background-color: #5a6268;
  }
}

@media (max-width: 480px) {
  .time * {
    visibility: visible !important;
    opacity: 1 !important;
  }

  .time {
    min-height: auto !important;
  }
}

/* Styling untuk ikon bunga di section bride */
.bride i.bxs-spa {
  position: absolute;
  color: #8ecae6 !important;
  font-size: 2.5rem;
  animation: upAndDown 3s infinite, flowerBloom 5s infinite;
  z-index: 5;
}

/* Posisi masing-masing ikon bunga */
.bride i.bxs-spa:nth-of-type(1) {
  bottom: 2rem;
  left: 40%;
  animation-delay: 0.2s;
}

.bride i.bxs-spa:nth-of-type(2) {
  bottom: 2rem;
  left: 50%;
  animation-delay: 0.5s;
}

.bride i.bxs-spa:nth-of-type(3) {
  bottom: 2rem;
  left: 60%;
  animation-delay: 0.3s;
}

/* Tambahan untuk mempertahankan tinggi section home tanpa foto */
.home figure {
  height: 150px; /* Sesuaikan dengan tinggi foto sebelumnya */
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.home figure img {
  display: none; /* Menyembunyikan gambar jika ada */
}

/* Styling untuk section Bride tanpa foto */
.bride {
  position: relative;
  padding: 3rem 1rem;
  text-align: center;
  overflow: hidden;
}

.bride h2 {
  font-family: var(--arabic);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.bride h3 {
  font-family: var(--josefin);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.bride p {
  max-width: 80%;
  margin: 0 auto 2rem;
  line-height: 1.7rem;
}

.bride .bride_couple {
  margin: 1rem auto 4rem;
  max-width: 90%;
  position: relative;
  padding-top: 1.5rem;
}

/* Tambahkan efek dekoratif dengan border sederhana */
.bride .bride_couple::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1px;
  background: rgba(142, 202, 230, 0.5);
}

.bride .bride_couple ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: relative;
  z-index: 1;
}

/* Styling untuk nama pengantin */
.bride .bride_couple ul li .bride-name {
  font-family: var(--sacramento);
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: #212529;
  position: relative;
  display: inline-block;
}

.bride .bride_couple ul li .bride-name::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 2px;
  background: #8ecae6;
  border-radius: 2px;
}

.bride .bride_couple ul li p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
}

/* Styling untuk ikon bunga di section bride */
.bride i.bxs-spa {
  position: absolute;
  color: #8ecae6 !important;
  font-size: 2.5rem;
  animation: upAndDown 3s infinite, flowerBloom 5s infinite;
  z-index: 5;
}

/* Posisi setiap ikon bunga */
.bride i.bxs-spa:nth-child(4) {
  top: 5rem;
  left: 2rem;
}

.bride i.bxs-spa:nth-child(5) {
  bottom: 10rem;
  right: 2rem;
  animation-delay: 0.5s;
}

.bride i.bxs-spa:nth-child(6) {
  top: 50%;
  left: 5%;
  animation-delay: 0.3s;
}

.bride i.bxs-spa:nth-child(7) {
  top: 30%;
  right: 5%;
  animation-delay: 0.7s;
}

.bride i.bxs-spa:nth-child(8) {
  bottom: 5rem;
  left: 3rem;
  animation-delay: 0.2s;
}

/* Media queries untuk tampilan responsif pada perangkat mobile */
@media (max-width: 768px) {
  /* Ubah ukuran ikon bunga agar proporsional di layar kecil */
  .hadist i.bxs-spa,
  .cerita i.bxs-spa,
  .time a + p + i.bxs-spa {
    font-size: 2.5rem;
    transform: scale(1);
  }

  /* Sesuaikan posisi ikon bunga di setiap section */
  .hadist i.bxs-spa {
    top: 12rem;
    left: 1.5rem;
  }

  .cerita i.bxs-spa {
    bottom: 3rem;
    right: 1.5rem;
  }

  .time a + p + i.bxs-spa {
    right: 1.5rem;
    top: 15rem;
  }

  /* Responsif untuk section bride di mobile */
  .bride h2 {
    font-size: 1.8rem;
  }

  .bride h3 {
    font-size: 1.3rem;
  }

  .bride p {
    max-width: 95%;
    font-size: 0.95rem;
  }

  /* Styling responsif untuk nama pengantin di mobile */
  .bride .bride_couple ul li .bride-name {
    font-size: 2rem;
  }

  .bride .bride_couple ul li .bride-name i {
    font-size: 1.2rem !important;
  }

  .bride .bride_couple ul li p {
    font-size: 0.9rem;
  }

  /* Sesuaikan posisi ikon bunga di section bride untuk mobile */
  .bride i.bxs-spa {
    font-size: 2rem;
  }

  /* Sesuaikan posisi ikon bunga di akhir section bride */
  .bride i.bxs-spa:nth-of-type(1) {
    bottom: 1rem;
    left: 30%;
  }

  .bride i.bxs-spa:nth-of-type(2) {
    bottom: 1rem;
    left: 50%;
  }

  .bride i.bxs-spa:nth-of-type(3) {
    bottom: 1rem;
    left: 70%;
  }

  /* Responsif bride_couple untuk mobile */
  .bride .bride_couple {
    margin: 1rem auto 3rem;
  }

  .bride .bride_couple ul li p {
    max-width: 95%;
  }

  /* Responsive styling untuk section cerita */
  .cerita {
    padding: 3rem 1.5rem;
  }

  .cerita h2 {
    font-size: 2rem !important;
  }

  .cerita p {
    padding: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.6rem;
    max-width: 95%;
    margin: 0 auto;
  }

  .cerita p::first-letter {
    font-size: 2.5rem;
    margin-right: 0.4rem;
  }

  /* Responsif untuk transisi antar section di mobile */
  .section-transition {
    height: 30px;
    margin-bottom: -30px;
  }

  .bride {
    padding: 6rem 1rem 1rem;
  }

  .time {
    padding: 2rem 1rem 6rem;
  }
}
@media (max-width: 480px) {
  /* Perbesar ornaments untuk mobile kecil */
  .section-ornaments {
    width: 60px;
    height: 60px;
  }

  /* Simpler animations for better performance */
  .section-ornaments {
    animation: ornamentFloat 6s ease-in-out infinite;
  }
}

/* Memastikan tidak ada overlap antara section time dan wishas */
.time + .wishas {
  margin-top: 4rem !important;
}

/* Specific styling untuk alamat agar terlihat jelas */
.time p:last-of-type {
  position: relative;
  z-index: 10;
  background-color: rgba(248, 249, 250, 0.95) !important;
  backdrop-filter: blur(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile specific spacing */
@media (max-width: 768px) {
  .time + .wishas {
    margin-top: 6rem !important;
  }

  .time {
    position: relative;
    z-index: 5;
  }

  .time p:last-of-type {
    margin-bottom: 4rem !important;
    padding: 1.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #2c3e50 !important;
  }

  .wishas {
    position: relative;
    z-index: 1;
  }
}

@media (max-width: 480px) {
  .time + .wishas {
    margin-top: 8rem !important;
  }

  .time p:last-of-type {
    margin-bottom: 5rem !important;
    padding: 2rem 1rem !important;
    border: 2px solid rgba(142, 202, 230, 0.5) !important;
    background-color: #ffffff !important;
  }
}

/* Perbaikan khusus untuk heading Ucapan & Doa */
.wishas div:nth-of-type(2) h2 {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  clear: both;
  margin-top: 0 !important;
}

/* Memastikan form tidak overlap dengan heading */
.wishas div:nth-of-type(2) form {
  clear: both;
  position: relative;
  z-index: 15;
  margin-top: 2rem !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
  .wishas div:nth-of-type(2) {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
  }

  .wishas div:nth-of-type(2) h2 {
    margin-bottom: 2rem !important;
    padding: 1.2rem !important;
    background: linear-gradient(
      135deg,
      rgba(142, 202, 230, 0.1) 0%,
      rgba(142, 202, 230, 0.05) 100%
    ) !important;
    border: 1px solid rgba(142, 202, 230, 0.3) !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(142, 202, 230, 0.2) !important;
  }

  .wishas div:nth-of-type(2) form {
    margin-top: 2.5rem !important;
    border-top: 1px solid rgba(142, 202, 230, 0.2);
    padding-top: 1.5rem;
  }
}

@media (max-width: 480px) {
  .wishas div:nth-of-type(2) h2 {
    font-size: 1.3rem !important;
    padding: 1.5rem 1rem !important;
    margin: 0 0 3rem 0 !important;
    line-height: 1.4;
    font-weight: 600 !important;
    color: #2c3e50 !important;
  }

  .wishas div:nth-of-type(2) form {
    margin-top: 3rem !important;
  }

  .wishas div:nth-of-type(2) form label {
    margin-top: 1rem;
    display: block;
    clear: both;
  }
}