:root{
 --gold:#b8882d;--gold2:#d5ad5b;--ink:#332d29;--muted:#746c66;--cream:#fbf8f2;--cream2:#f4eee5;--rose:#d8a39b;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:"DM Sans",sans-serif;color:var(--ink);background:#fff;overflow-x:hidden}
h1,h2,h3,h4,h5,.script{font-family:"Cormorant Garamond",serif} a{text-decoration:none;color:inherit}
#loader{position:fixed;inset:0;background:#fbf8f2;z-index:9999;display:grid;place-items:center}.loader-mark{font-family:"Great Vibes";font-size:72px;color:var(--gold);opacity:0}.loader-mark span{font-family:serif;font-size:25px}
.cursor-glow{position:fixed;width:260px;height:260px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(208,174,111,.10),transparent 68%);transform:translate(-50%,-50%)}
.luxury-nav{padding:14px 0;transition:.35s;background:rgba(251,248,242,.65);backdrop-filter:blur(15px);border-bottom:1px solid transparent}.luxury-nav.scrolled{background:rgba(255,253,250,.95);box-shadow:0 8px 28px rgba(66,47,25,.08);border-color:#eadfce}
.navbar-brand{display:flex;flex-direction:column;line-height:.8;min-width:125px}.brand-script{font-family:"Great Vibes";font-size:36px;color:#a57b37}.navbar-brand small{font-size:15px;letter-spacing:3px;color:#a47d3c;margin-left:28px;margin-top:3px}.navbar-nav{gap:10px}.nav-link{font-size:15px;font-weight:600;color:#625a54!important;padding:10px 12px!important}.nav-link:hover,.nav-link.active{color:var(--gold)!important}
.btn{border-radius:9px;padding:12px 22px;font-size:15px;font-weight:700;transition:.35s}.btn-gold{border:0;color:white;background:linear-gradient(135deg,#d1aa58,#a97724);box-shadow:0 10px 22px rgba(174,126,43,.22)}.btn-gold:hover{color:#fff;transform:translateY(-3px);box-shadow:0 14px 30px rgba(174,126,43,.35)}.btn-outline-gold{border:1px solid #d9c39e;color:#9c742e;background:rgba(255,255,255,.3)}.btn-outline-gold:hover{background:#b8882d;color:white;border-color:#b8882d}.nav-cta{padding:10px 19px}
.navbar-toggler{border:0;box-shadow:none!important}.navbar-toggler span{display:block;width:23px;height:2px;background:#8c672b;margin:5px}
.section{padding:95px 0}.section-cream{background:radial-gradient(circle at 55% 35%,#fff 0,#fbf8f2 44%,#f3ebe2 100%)}.section-cream-soft{background:radial-gradient(circle at center,#fff 0,#faf7f1 60%,#f4ece2 100%)}.section-white{background:#fff}
.hero{position:relative}.hero:after{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:radial-gradient(#cda76a 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,transparent,black 30%,transparent 90%)}.hero .container{z-index:1}.eyebrow{font-size:15px;font-weight:700;letter-spacing:1.8px;color:#8e7a5c;margin-bottom:10px}.hero h1{font-size:66px;line-height:.9;font-weight:600;letter-spacing:.5px}.hero h1 em{font-style:normal;color:#2f2a27}.hero h1:first-line{color:#a67832}.hero-text{font-size:15px;color:#6d6660;max-width:400px;margin-top:18px}.hero-features{max-width:500px;margin-top:28px}.feature-mini{text-align:center}.feature-mini b{display:block;font-size:29px;font-weight:400;color:#846c42;height:43px}.feature-mini span{display:block;font-size:15px;line-height:1.35;font-weight:600;color:#5e5851}
.floral{position:absolute;color:#d7aaa2;opacity:.35;font-size:140px;z-index:0}.floral-a{left:-35px;top:100px}.floral-b{right:-35px;bottom:0}.hero-phone-wrap{height:620px;display:grid;place-items:center;position:relative}.phone{height:535px;width:280px;padding:7px;background:#202020;border-radius:38px;box-shadow:0 25px 40px rgba(31,22,14,.28),inset 0 0 0 2px #5e5e5e;position:relative;z-index:3}.phone-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);height:16px;width:86px;border-radius:12px;background:#161616;z-index:2}.phone-screen{height:100%;border-radius:32px;background:linear-gradient(145deg,#fffdf8,#f6ecdf);padding:60px 20px 25px;text-align:center;position:relative;overflow:hidden;border:1px solid #e6d5bc}.phone-screen:before,.phone-screen:after{content:"✿ ❀ ✿";position:absolute;color:#d8b9a0;font-size:38px;opacity:.75}.phone-screen:before{top:18px;left:15px}.phone-screen:after{bottom:5px;right:5px}.screen-top{font-size:15px;letter-spacing:1.4px;color:#927b5b;font-weight:700}.screen-names{font-family:"Great Vibes";font-size:39px;color:#a77735;line-height:.75;margin-top:28px}.screen-names span{font-family:"Cormorant Garamond";font-size:24px}.screen-date{font-size:15px;letter-spacing:.8px;color:#937d60;margin:30px 0}.countdown{display:flex;justify-content:center;gap:10px}.countdown div{display:grid;gap:2px}.countdown b{font-size:15px;color:#5c5146}.countdown small{font-size:15px;color:#998b7a}.screen-btn{border:0;border-radius:8px;background:linear-gradient(135deg,#d4b066,#9f742e);color:#fff;font-size:15px;padding:12px 23px;margin-top:28px;box-shadow:0 9px 18px rgba(161,112,39,.22)}.screen-bottom{position:absolute;bottom:22px;left:0;right:0;color:#cba681}.hero-ring{position:absolute;border:1px solid rgba(187,145,70,.23);border-radius:50%;z-index:1}.ring-1{width:520px;height:520px}.ring-2{width:610px;height:610px;border-style:dashed}.rose{position:absolute;font-size:100px;filter:drop-shadow(0 15px 15px rgba(99,53,40,.18));z-index:2}.rose-1{right:15px;bottom:100px}.rose-2{left:5px;top:110px;font-size:72px}
.section-head h2{font-size:34px;line-height:1.05;font-weight:600;margin-bottom:7px}.section-head p{font-size:15px;color:#7d756d}.ornament{color:#bd9348;letter-spacing:6px;margin-top:10px}.why-grid{margin-top:55px}.why-item{text-align:center;height:100%;padding:8px}.round-icon{width:64px;height:64px;border:1px solid #d8c397;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;font-size:27px;color:#b58736;background:rgba(255,255,255,.55)}.why-item h6{font-size:15px;font-weight:700}.why-item p{font-size:15px;color:#77706a;line-height:1.55;max-width:115px;margin:auto}
.invitation-card{border:1px solid #e9e1d7;border-radius:10px;padding:9px;background:#fff;box-shadow:0 8px 22px rgba(78,58,35,.08);transition:.4s;height:100%}.invitation-card:hover{transform:translateY(-9px);box-shadow:0 22px 38px rgba(83,58,25,.14)}.invite-thumb{height:260px;border-radius:7px;position:relative;overflow:hidden;padding:34px 15px;display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}.invite-thumb:before{content:"";position:absolute;inset:9px;border:1px solid rgba(181,142,76,.55);border-radius:3px}.invite-thumb:after{content:"✿";position:absolute;top:9px;right:15px;font-size:50px;opacity:.6}.theme-1{background:radial-gradient(circle at 10% 95%,#e6cdb5 0 10%,transparent 25%),linear-gradient(135deg,#0e1010,#27211d)}.theme-2{background:radial-gradient(circle at 10% 0,#e8d1d8 0 10%,transparent 25%),linear-gradient(135deg,#eef3ed,#fdfaf3)}.theme-3{background:radial-gradient(circle at 100% 90%,#b79863 0 5%,transparent 20%),#101417}.theme-4{background:radial-gradient(circle at 85% 10%,#f0b6a6 0 10%,transparent 25%),#fff8f2}.theme-5{background:radial-gradient(circle at 100% 100%,#b9d0b7 0 12%,transparent 25%),#143127}.theme-6{background:radial-gradient(circle at 5% 0,#d9c9ad 0 12%,transparent 25%),#f6f0e7}.theme-7{background:radial-gradient(circle at 80% 100%,#e9b4ad 0 10%,transparent 25%),#fffdf9}.theme-8{background:radial-gradient(circle at 15% 85%,#5c1216 0 12%,transparent 28%),#111}
.invite-title{font-size:15px;letter-spacing:1.2px;position:relative;z-index:1;color:#b59a68}.invite-names{font-family:"Great Vibes";font-size:30px;line-height:.9;position:relative;z-index:1;color:#e5c98f;margin:20px 0}.theme-2 .invite-names,.theme-4 .invite-names,.theme-6 .invite-names,.theme-7 .invite-names{color:#9b774b}.invite-date{font-size:15px;letter-spacing:1px;position:relative;z-index:1;color:#cdb991}.price-line{display:flex;gap:8px;justify-content:center;align-items:center;margin:10px 0}.old{font-size:15px;color:#999;text-decoration:line-through}.sale{font-size:15px;color:#ad3f36;font-weight:800}.card-actions{display:grid;gap:6px}.card-actions .btn{padding:8px;font-size:15px;border-radius:5px}
.steps{margin-top:50px}.step{text-align:center;position:relative}.step-no{position:absolute;top:-2px;left:50%;margin-left:-70px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#b98a35;color:#fff;font-size:15px;font-weight:700;z-index:2}.step-icon{width:80px;height:80px;border:1px solid #d8c397;border-radius:50%;display:grid;place-items:center;margin:auto auto 17px;font-size:33px;color:#a97d34}.step h5{font-size:15px;font-weight:700}.step p{font-size:15px;color:#7c746d;max-width:170px;margin:auto}.step:after{content:"→";position:absolute;right:-15px;top:26px;font-size:28px;color:#a37a36}.col-md-3:last-child .step:after{display:none}
.promo{padding:65px 0;background:radial-gradient(circle at 50% 40%,#403326 0,#171514 60%,#0b0b0b 100%);color:#fff;position:relative;overflow:hidden}.promo h2{font-size:38px;font-weight:500}.script{font-family:"Great Vibes";font-size:40px;color:#d7ae63}.old-price{text-decoration:line-through;color:#bfb8ad;font-size:20px;margin-top:4px}.new-price{font-size:22px}.new-price strong{font-size:43px}.discount-badge{width:205px;height:205px;border:3px double #d1a354;border-radius:50%;margin:auto;display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 0 8px rgba(194,147,65,.12),0 0 55px rgba(204,154,59,.2)}.discount-badge small{letter-spacing:2px}.discount-badge strong{font-size:56px;color:#dfb45f;line-height:1}.discount-badge span{font-family:"Cormorant Garamond";font-size:19px;color:#dec595}.promo-flower{position:absolute;opacity:.65}.promo-flower.left{font-size:120px;left:2%;bottom:-25px}.promo-flower.right{font-size:130px;right:7%;top:-20px;color:#c39748}
.testimonial{border:1px solid #ede5d9;padding:30px;border-radius:10px;background:linear-gradient(135deg,#fff,#fcfaf7);height:100%;box-shadow:0 8px 20px rgba(80,56,28,.04)}.stars{color:#c3913d;letter-spacing:3px;font-size:15px}.testimonial p{font-family:"Cormorant Garamond";font-size:20px;line-height:1.2;margin:15px 0}.testimonial h6{font-size:15px;margin:0}.testimonial small{font-size:15px;color:#8b837b}
.footer{padding:70px 0 0;background:linear-gradient(135deg,#f5ede4,#fbf8f3 50%,#f4e8dd)}.footer p,.footer li{font-size:15px;color:#756e68;line-height:2}.footer h6{font-size:15px;margin-bottom:18px}.footer ul{padding:0;list-style:none;margin:0}.footer ul a:hover{color:#a8792f}.socials{display:flex;gap:9px}.socials a{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid #d7c6ad;font-size:15px;color:#a47b38}.contact-list li{margin-bottom:7px}.footer-bottom{border-top:1px solid #e1d6c8;margin-top:45px;padding:20px 0;display:flex;justify-content:space-between;font-size:15px;color:#756d65}
.preview-modal{border:0;background:transparent;box-shadow:none}.preview-modal .btn-close{position:absolute;right:10px;top:10px;background:#fff;border-radius:50%;z-index:2}.preview-modal #previewCard{display:grid;place-items:center}.preview-modal .invite-thumb{width:300px;height:520px;border-radius:15px}.preview-modal .invite-names{font-size:48px}
@media(max-width:991px){.luxury-nav{background:#fffdf9}.nav-cta{display:none}.hero h1{font-size:54px}.hero-phone-wrap{height:550px}.phone{height:480px;width:252px}.ring-1{width:450px;height:450px}.ring-2{width:520px;height:520px}.hero-copy{padding-top:80px}.footer-bottom{flex-direction:column;gap:8px}.steps .step:after{display:none}}
@media(max-width:576px){.section{padding:70px 0}.hero h1{font-size:44px}.hero-features .col-3{width:50%}.hero-features{max-width:330px}.feature-mini{margin-bottom:10px}.hero-phone-wrap{height:480px}.phone{height:430px;width:228px}.phone-screen{padding-top:52px}.screen-names{font-size:34px}.ring-1{width:330px;height:330px}.ring-2{width:390px;height:390px}.rose-1{font-size:70px;right:0}.rose-2{font-size:55px}.section-head h2{font-size:30px}.why-grid{margin-top:30px}.invite-thumb{height:330px}.promo h2{font-size:33px}.discount-badge{width:170px;height:170px}.footer{padding-top:55px}}


/* Minimum typography size */
body, p, span, small, li, a, button, input, textarea, label {
  font-size: max(15px, 1em);
}


/* =========================================================
   SMARTPHONE INVITATION CAROUSEL
   ========================================================= */
.phone-carousel{
  height:100%;
  width:100%;
  border-radius:32px;
  overflow:hidden;
}
.phone-carousel .carousel-inner,
.phone-carousel .carousel-item{
  height:100%;
}
.phone-carousel .phone-screen{
  height:100%;
  min-height:100%;
  border-radius:32px;
  transition:transform .8s ease, filter .8s ease;
}
.phone-carousel .carousel-item.active .phone-screen{
  animation: invitationZoom 3.5s ease-in-out both;
}
@keyframes invitationZoom{
  0%{transform:scale(1.035);filter:brightness(.96)}
  100%{transform:scale(1);filter:brightness(1)}
}
.phone-theme{
  position:relative;
  overflow:hidden;
}
.phone-theme:before{
  content:"✿  ❀  ✿";
  position:absolute;
  top:28px;
  left:10px;
  font-size:28px;
  opacity:.42;
  transform:rotate(-12deg);
}
.phone-theme:after{
  content:"❀  ✿";
  position:absolute;
  right:-4px;
  bottom:12px;
  font-size:42px;
  opacity:.5;
}
.phone-theme-cream{
  background:
    radial-gradient(circle at 15% 15%,rgba(230,199,171,.65),transparent 25%),
    radial-gradient(circle at 90% 90%,rgba(227,181,170,.5),transparent 28%),
    linear-gradient(145deg,#fffdf8,#f4e7d8);
}
.phone-theme-dark{
  background:
    radial-gradient(circle at 0 100%,rgba(174,133,67,.35),transparent 32%),
    radial-gradient(circle at 100% 10%,rgba(154,112,52,.25),transparent 24%),
    linear-gradient(145deg,#0d1011,#25201b);
}
.phone-theme-dark .screen-top,
.phone-theme-dark .screen-date,
.phone-theme-dark .countdown b,
.phone-theme-dark .countdown small,
.phone-theme-dark .screen-bottom{color:#d8bd86}
.phone-theme-dark .screen-names{color:#e5c98f}
.phone-theme-blush{
  background:
    radial-gradient(circle at 10% 5%,rgba(239,177,181,.72),transparent 28%),
    radial-gradient(circle at 95% 85%,rgba(244,211,183,.85),transparent 30%),
    linear-gradient(145deg,#fffdfb,#f9e8e5);
}
.phone-theme-blush .screen-names{color:#b66e72}
.phone-theme-green{
  background:
    radial-gradient(circle at 10% 90%,rgba(112,145,108,.48),transparent 30%),
    radial-gradient(circle at 95% 10%,rgba(211,181,123,.4),transparent 24%),
    linear-gradient(145deg,#eff3ea,#dce8d9);
}
.phone-theme-green .screen-names{color:#5f7b59}
.phone-indicators{
  bottom:10px;
  margin-bottom:0;
  z-index:6;
}
.phone-indicators [data-bs-target]{
  width:5px;
  height:5px;
  border:0;
  border-radius:50%;
  background-color:#9c7435;
  opacity:.45;
  margin:0 3px;
}
.phone-indicators .active{
  width:16px;
  border-radius:10px;
  opacity:1;
}
.phone-control{
  width:34px;
  opacity:0;
  transition:.3s;
  z-index:7;
}
.phone:hover .phone-control{opacity:1}
.phone-control span{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.72);
  color:#9c7435;
  font-size:24px;
  line-height:1;
  box-shadow:0 5px 15px rgba(0,0,0,.08);
}
.phone-theme-dark .phone-control span{background:rgba(30,25,18,.7);color:#e4c585}
@media(max-width:576px){
  .phone-control{opacity:.85}
}


/* =========================================================
   DESKTOP SHOWCASE — PORTRAIT RATIO 9:16
   ========================================================= */
@media (min-width: 992px) {
  #koleksi .invite-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    min-height: 0;
  }

  #koleksi .invitation-card {
    display: flex;
    flex-direction: column;
  }

  #koleksi .invite-thumb .invite-names {
    font-size: 34px;
  }
}

/* Keep mobile/tablet cards comfortable and responsive */
@media (max-width: 991.98px) {
  #koleksi .invite-thumb {
    aspect-ratio: auto;
  }
}


/* =========================================================
   ANIMASI ICON — KENAPA MEMILIH KAMI
   ========================================================= */
#fitur .round-icon{
  position:relative;
  overflow:hidden;
  transform-origin:center;
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  animation: iconFloat 3.4s ease-in-out infinite;
  will-change:transform;
}

#fitur .why-item:nth-child(1) .round-icon{animation-delay:0s}
#fitur .why-item:nth-child(2) .round-icon{animation-delay:.35s}
#fitur .why-item:nth-child(3) .round-icon{animation-delay:.7s}
#fitur .why-item:nth-child(4) .round-icon{animation-delay:1.05s}
#fitur .why-item:nth-child(5) .round-icon{animation-delay:1.4s}
#fitur .why-item:nth-child(6) .round-icon{animation-delay:1.75s}

#fitur .round-icon::after{
  content:"";
  position:absolute;
  inset:-45%;
  background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-100%) rotate(15deg);
  animation: iconShine 4.5s ease-in-out infinite;
}

#fitur .why-item:hover .round-icon{
  transform:translateY(-8px) scale(1.1) rotate(6deg);
  border-color:#b8882d;
  box-shadow:0 14px 28px rgba(184,136,45,.22);
  animation-play-state:paused;
}

#fitur .why-item:hover .round-icon::after{
  animation-duration:1s;
}

#fitur .why-item:hover h6{
  color:#b8882d;
  transform:translateY(2px);
}

#fitur .why-item h6{
  transition:color .3s ease, transform .3s ease;
}

@keyframes iconFloat{
  0%,100%{
    transform:translateY(0) rotate(0deg);
  }
  50%{
    transform:translateY(-9px) rotate(3deg);
  }
}

@keyframes iconShine{
  0%,55%{
    transform:translateX(-120%) rotate(15deg);
  }
  75%,100%{
    transform:translateX(120%) rotate(15deg);
  }
}

@media (prefers-reduced-motion: reduce){
  #fitur .round-icon,
  #fitur .round-icon::after{
    animation:none!important;
  }
}


/* =========================================================
   LUXURY GOLD FOOTER
   ========================================================= */
.footer{
  background:
    radial-gradient(circle at 12% 15%, rgba(255,232,171,.24), transparent 25%),
    radial-gradient(circle at 88% 80%, rgba(112,70,13,.28), transparent 28%),
    linear-gradient(135deg,#6f4811 0%,#a97624 28%,#c7953e 52%,#9c6920 76%,#6d4610 100%);
  color:#fff8e9;
  position:relative;
  overflow:hidden;
}

.footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    radial-gradient(rgba(255,244,209,.7) 1px,transparent 1px),
    linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  background-size:28px 28px,200% 100%;
  animation: footerShimmer 9s linear infinite;
}

.footer .container{
  position:relative;
  z-index:1;
}

.footer .brand-script{
  color:#fff4cf;
  text-shadow:0 3px 15px rgba(72,41,5,.25);
}

.footer .navbar-brand small{
  color:#ffe5a3;
}

.footer p,
.footer li,
.footer ul a{
  color:#fff5df;
  font-size:15px;
}

.footer h6{
  color:#fff9eb;
  font-size:17px;
  letter-spacing:.4px;
}

.footer ul a:hover{
  color:#fff;
  text-shadow:0 0 12px rgba(255,255,255,.65);
}

.footer .socials a{
  border-color:rgba(255,245,214,.55);
  color:#fff7e8;
  background:rgba(255,255,255,.08);
  transition:all .35s ease;
}

.footer .socials a:hover{
  background:#fff8e9;
  color:#a67524;
  transform:translateY(-4px) rotate(8deg);
  box-shadow:0 8px 20px rgba(73,42,5,.22);
}

.footer .btn-outline-gold{
  border-color:#fff0c6;
  color:#fff8e9;
  background:rgba(255,255,255,.08);
}

.footer .btn-outline-gold:hover{
  background:#fff8e9;
  color:#a16d1f;
  border-color:#fff8e9;
}

.footer-bottom{
  border-top:1px solid rgba(255,243,209,.35);
  color:#fff1d4;
  font-size:15px;
}

@keyframes footerShimmer{
  0%{background-position:0 0,200% 0}
  100%{background-position:28px 28px,-100% 0}
}


/* =========================================================
   MOBILE HERO ALIGNMENT — ELEGAN, PRAKTIS & BERKESAN
   ========================================================= */
@media (max-width: 991.98px) {
  .hero-copy {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-copy .eyebrow,
  .hero-copy .hero-text {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-copy .hero-features {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-copy .hero-buttons {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .hero-copy {
    padding-left: 12px;
    padding-right: 12px;
  }

  .hero h1 {
    text-align: center;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    line-height: 1;
  }

  .hero h1 em {
    display: inline-block;
  }

  .hero-text {
    max-width: 340px;
    text-align: center;
  }

  .hero-buttons {
    align-items: center;
  }
}


/* =========================================================
   ANIMASI ICON — CARA MEMESAN
   ========================================================= */
#cara-pesan .step-icon{
  position:relative;
  overflow:hidden;
  animation: stepIconFloat 3.2s ease-in-out infinite;
  transform-origin:center;
  will-change:transform;
  transition:border-color .35s ease, box-shadow .35s ease;
}

#cara-pesan .col-md-3:nth-child(1) .step-icon{animation-delay:0s}
#cara-pesan .col-md-3:nth-child(2) .step-icon{animation-delay:.45s}
#cara-pesan .col-md-3:nth-child(3) .step-icon{animation-delay:.9s}
#cara-pesan .col-md-3:nth-child(4) .step-icon{animation-delay:1.35s}

#cara-pesan .step-icon::after{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.9) 50%,transparent 58%);
  transform:translateX(-120%) rotate(20deg);
  animation: stepIconShine 4.8s ease-in-out infinite;
}

#cara-pesan .step-no{
  animation: stepNumberPulse 2.6s ease-in-out infinite;
  box-shadow:0 7px 18px rgba(184,136,45,.22);
}

#cara-pesan .step:hover .step-icon{
  animation-play-state:paused;
  transform:translateY(-10px) scale(1.12) rotate(8deg);
  border-color:#b8882d;
  box-shadow:0 16px 32px rgba(184,136,45,.25);
}

#cara-pesan .step:hover .step-no{
  transform:scale(1.15);
}

#cara-pesan .step-no{
  transition:transform .3s ease;
}

@keyframes stepIconFloat{
  0%,100%{
    transform:translateY(0) rotate(0deg);
  }
  50%{
    transform:translateY(-10px) rotate(-3deg);
  }
}

@keyframes stepIconShine{
  0%,55%{
    transform:translateX(-120%) rotate(20deg);
  }
  78%,100%{
    transform:translateX(120%) rotate(20deg);
  }
}

@keyframes stepNumberPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:0 7px 18px rgba(184,136,45,.18);
  }
  50%{
    transform:scale(1.08);
    box-shadow:0 10px 25px rgba(184,136,45,.35);
  }
}

@media (prefers-reduced-motion: reduce){
  #cara-pesan .step-icon,
  #cara-pesan .step-icon::after,
  #cara-pesan .step-no{
    animation:none!important;
  }
}


/* =========================================================
   KENAPA MEMILIH KAMI — LUXURY GOLD SPARKLE BACKGROUND
   ========================================================= */
#fitur.section-cream-soft{
  position:relative;
  overflow:hidden;
  color:#fff8e8;
  background:
    radial-gradient(circle at 10% 15%, rgba(255,231,164,.32), transparent 22%),
    radial-gradient(circle at 90% 82%, rgba(255,222,141,.22), transparent 25%),
    radial-gradient(circle at 50% 50%, #d6ad62 0%, #b7832f 36%, #8e5e1d 70%, #65400f 100%);
}

#fitur.section-cream-soft::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.9;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px, transparent 2px),
    radial-gradient(circle, rgba(255,235,176,.85) 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(255,255,255,.55) 2px, transparent 3px);
  background-size:90px 90px, 135px 135px, 210px 210px;
  background-position:0 0, 30px 55px, 80px 20px;
  animation: goldStarsMove 14s linear infinite;
}

#fitur.section-cream-soft::after{
  content:"✦   ✧      ✦      ✧    ✦      ✧      ✦    ✧";
  position:absolute;
  inset:-10% -5%;
  pointer-events:none;
  z-index:0;
  color:rgba(255,248,213,.75);
  font-size:42px;
  letter-spacing:34px;
  line-height:3.7;
  white-space:pre-wrap;
  transform:rotate(-8deg);
  animation: goldSparklePulse 3.5s ease-in-out infinite alternate;
}

#fitur .container{
  position:relative;
  z-index:2;
}

#fitur .section-head h2,
#fitur .section-head p,
#fitur .section-head .eyebrow{
  color:#fff9e9;
}

#fitur .section-head .eyebrow{
  text-shadow:0 1px 8px rgba(76,45,5,.28);
}

#fitur .ornament{
  color:#fff0bb;
  text-shadow:0 0 18px rgba(255,245,205,.9);
  animation: ornamentSparkle 2.8s ease-in-out infinite;
}

#fitur .why-item{
  position:relative;
  padding:24px 10px 16px;
  border-radius:18px;
  background:rgba(83,48,5,.10);
  border:1px solid rgba(255,238,190,.18);
  backdrop-filter:blur(4px);
  transition:transform .35s ease, background .35s ease, box-shadow .35s ease;
}

#fitur .why-item:hover{
  transform:translateY(-8px);
  background:rgba(255,255,255,.12);
  box-shadow:0 18px 38px rgba(62,34,0,.22);
}

#fitur .round-icon{
  background:rgba(255,249,225,.92);
  border-color:rgba(255,244,206,.85);
  color:#a57423;
  box-shadow:0 10px 28px rgba(70,39,2,.22);
}

#fitur .why-item h6{
  color:#fff9ed;
  font-size:17px;
}

#fitur .why-item p{
  color:#fff2d5;
  font-size:15px;
}

/* Decorative sparkling ornaments */
#fitur .why-grid::before,
#fitur .why-grid::after{
  position:absolute;
  pointer-events:none;
  z-index:1;
  color:#fff4c9;
  text-shadow:0 0 12px rgba(255,255,255,.8);
  animation: floatingSparkles 4s ease-in-out infinite alternate;
}

#fitur .why-grid{
  position:relative;
}

#fitur .why-grid::before{
  content:"✦  ✧  ✦";
  left:2%;
  top:-42px;
  font-size:22px;
  letter-spacing:12px;
}

#fitur .why-grid::after{
  content:"✧  ✦  ✧";
  right:2%;
  bottom:-42px;
  font-size:24px;
  letter-spacing:12px;
  animation-delay:-1.8s;
}

@keyframes goldStarsMove{
  0%{background-position:0 0,30px 55px,80px 20px}
  100%{background-position:90px 90px,-105px 190px,290px -190px}
}

@keyframes goldSparklePulse{
  0%{opacity:.35;filter:brightness(.85);transform:rotate(-8deg) scale(1)}
  100%{opacity:.95;filter:brightness(1.25);transform:rotate(-8deg) scale(1.02)}
}

@keyframes ornamentSparkle{
  0%,100%{transform:scale(1);opacity:.8;text-shadow:0 0 8px rgba(255,245,205,.55)}
  50%{transform:scale(1.25);opacity:1;text-shadow:0 0 25px rgba(255,255,255,.95)}
}

@keyframes floatingSparkles{
  0%{transform:translateY(0) rotate(-3deg);opacity:.5}
  100%{transform:translateY(-12px) rotate(5deg);opacity:1}
}

@media(max-width:576px){
  #fitur.section-cream-soft::after{
    font-size:27px;
    letter-spacing:18px;
  }

  #fitur .why-item{
    padding:18px 6px 12px;
  }
}


/* =========================================================
   MODE HTML + CSS SAJA — TANPA JAVASCRIPT
   ========================================================= */
html{scroll-behavior:smooth;}
#loader,.cursor-glow{display:none!important;}
.phone-carousel{width:100%;height:100%;overflow:hidden;border-radius:inherit;}
.phone-carousel .phone-screen{min-height:100%;height:100%;}
.screen-btn{display:inline-block;text-decoration:none;}
#productGrid{display:flex;flex-wrap:wrap;}
.product-col{opacity:1!important;transform:none!important;}
.preview-btn{cursor:pointer;}
/* Navigasi tetap terlihat tanpa fitur collapse JavaScript */
@media(max-width:991.98px){
  .luxury-nav .navbar-collapse{display:flex!important;flex-basis:auto;justify-content:center;}
  .luxury-nav .navbar-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;}
  .luxury-nav .nav-link{font-size:11px;padding:7px 8px!important;}
  .luxury-nav .nav-cta{display:none;}
}
@media(max-width:576px){
  .luxury-nav .navbar-brand{margin:0 auto;text-align:center;}
  .luxury-nav .navbar-collapse{width:100%;order:3;margin-top:6px;}
}


/* Slider smartphone otomatis — HTML + CSS saja */
.phone-carousel{position:relative;overflow:hidden}
.phone-track{display:flex;width:400%;height:100%;animation:phoneAutoSlide 16s infinite ease-in-out}
.phone-carousel .phone-screen{flex:0 0 25%;width:25%;height:100%;min-height:100%;border-radius:32px}
.phone-slider-dots{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:6px;z-index:10}
.phone-slider-dots span{width:6px;height:6px;border-radius:99px;background:#a77b36;opacity:.38;animation:phoneDot 16s infinite}
.phone-slider-dots span:nth-child(2){animation-delay:-12s}.phone-slider-dots span:nth-child(3){animation-delay:-8s}.phone-slider-dots span:nth-child(4){animation-delay:-4s}
@keyframes phoneAutoSlide{
  0%,20%{transform:translateX(0)}
  25%,45%{transform:translateX(-25%)}
  50%,70%{transform:translateX(-50%)}
  75%,95%{transform:translateX(-75%)}
  100%{transform:translateX(0)}
}
@keyframes phoneDot{0%,20%{opacity:1;transform:scale(1.7)}25%,100%{opacity:.38;transform:scale(1)}}
.phone-carousel:hover .phone-track{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.phone-track,.phone-slider-dots span{animation:none}.phone-track{transform:none}}


/* =========================================================
   NAVBAR MOBILE RAPI + FLOATING WHATSAPP CTA
   ========================================================= */
@media(max-width:991.98px){
  .luxury-nav{padding:8px 0 7px;box-shadow:0 5px 18px rgba(67,48,25,.08);}
  .luxury-nav .container{display:flex;flex-direction:column;align-items:center;padding-left:12px;padding-right:12px;}
  .luxury-nav .navbar-brand{margin:0!important;text-align:center;min-width:auto;}
  .luxury-nav .brand-script{font-size:31px;}
  .luxury-nav .navbar-brand small{font-size:11px;letter-spacing:2.5px;margin-left:20px;}
  .luxury-nav .navbar-collapse{display:block!important;width:100%;order:2;margin-top:5px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .luxury-nav .navbar-collapse::-webkit-scrollbar{display:none;}
  .luxury-nav .navbar-nav{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;width:max-content;min-width:100%;gap:0;padding:2px 0 3px;}
  .luxury-nav .nav-item{flex:0 0 auto;}
  .luxury-nav .nav-link{display:block;white-space:nowrap;font-size:12px!important;padding:8px 10px!important;line-height:1.2;border-radius:999px;}
  .luxury-nav .nav-link.active{background:rgba(181,139,61,.11);}
}
@media(max-width:576px){
  .luxury-nav .brand-script{font-size:29px;}
  .luxury-nav .navbar-brand small{font-size:10px;margin-left:17px;}
  .luxury-nav .nav-link{font-size:11px!important;padding:7px 9px!important;}
}

.floating-wa{position:fixed;right:22px;bottom:22px;z-index:1055;display:flex;align-items:center;gap:9px;padding:12px 18px 12px 12px;border-radius:999px;background:#25D366;color:#fff!important;text-decoration:none;font-family:inherit;font-weight:700;box-shadow:0 12px 28px rgba(37,211,102,.32);transition:transform .25s ease,box-shadow .25s ease;animation:waFloat 2.8s ease-in-out infinite;}
.floating-wa:hover{color:#fff!important;transform:translateY(-4px) scale(1.03);box-shadow:0 17px 34px rgba(37,211,102,.42);}
.wa-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#25D366;font-size:22px;font-weight:700;line-height:1;}
.wa-text{font-size:14px;letter-spacing:.1px;}
@keyframes waFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:576px){.floating-wa{right:16px;bottom:16px;padding:10px 14px 10px 10px;gap:7px}.wa-icon{width:36px;height:36px;font-size:20px}.wa-text{font-size:13px}}


/* =========================================================
   BOOTSTRAP-STYLE RESPONSIVE NAVBAR - CSS ONLY
   ========================================================= */
.luxury-navbar {
  background: rgba(45, 12, 22, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  padding: 12px 0;
  z-index: 1050;
}

.luxury-navbar .brand-logo {
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  text-decoration: none;
  white-space: nowrap;
}

.luxury-navbar .brand-logo span {
  color: #d4af37;
  margin-left: 2px;
}

.luxury-navbar .nav-link {
  color: rgba(255,255,255,.82);
  padding: 10px 14px;
  font-weight: 500;
  transition: color .25s ease, background .25s ease;
}

.luxury-navbar .nav-link:hover,
.luxury-navbar .nav-link.active {
  color: #d4af37;
}

.navbar-toggle-checkbox {
  display: none;
}

.nav-cta {
  border-color: #d4af37;
  color: #d4af37;
  border-radius: 30px;
  padding: 8px 18px;
}

.nav-cta:hover {
  background: #d4af37;
  color: #2d0c16;
}

@media (max-width: 991.98px) {
  .luxury-navbar .container {
    position: relative;
  }

  .luxury-navbar .navbar-toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(212, 175, 55, .65);
    box-shadow: none;
    cursor: pointer;
  }

  .luxury-navbar .navbar-toggler:focus {
    box-shadow: none;
  }

  /* Override Bootstrap's display:none collapse on mobile */
  .luxury-navbar .navbar-collapse {
    display: none;
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    background: rgba(38, 8, 18, .98);
    border: 1px solid rgba(212, 175, 55, .22);
    border-radius: 14px;
  }

  .navbar-toggle-checkbox:checked ~ .navbar-collapse {
    display: block !important;
    animation: navbarReveal .25s ease both;
  }

  .luxury-navbar .navbar-nav {
    width: 100%;
    gap: 2px;
  }

  .luxury-navbar .nav-item {
    width: 100%;
  }

  .luxury-navbar .nav-link {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
  }

  .luxury-navbar .nav-link:hover,
  .luxury-navbar .nav-link.active {
    background: rgba(212, 175, 55, .10);
  }

  .luxury-navbar .nav-cta {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@keyframes navbarReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   THEME 1 & THEME 2 — WEDDING PHOTO BACKGROUND
   ========================================================= */
.invite-thumb.theme-1,
.invite-thumb.theme-2{
  background-image:
    
    url("../images/theme-wedding-bg.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.invite-thumb.theme-3{
  background-image:
    
    url("../images/theme-wedding-bg.jpeg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}


.invite-thumb.theme-1 .invite-title,
.invite-thumb.theme-1 .invite-names,
.invite-thumb.theme-1 .invite-date,
.invite-thumb.theme-2 .invite-title,
.invite-thumb.theme-2 .invite-names,
.invite-thumb.theme-2 .invite-date{
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.invite-thumb.theme-2 .invite-names{
  color:#f7e5ae;
}