@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icomoon/icomoon.eot?srf3rx");
  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Javasoul";
  src: url("../fonts/javasoul/Javassoul.woff") format("woff"),
       url("../fonts/javasoul/Javassoul.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/* =======================================================
*
* 	Template Style 
*
* ======================================================= */

/* <picture> dipakai untuk menyajikan WebP + fallback PNG.
   display:contents membuat <picture> tidak menghasilkan box
   sama sekali, sehingga <img> di dalamnya tetap diposisikan
   dan diukur persis seperti sebelum dibungkus (mis. width /
   height 100% masih dihitung dari parent aslinya). */
picture {
  display: contents;
}

body {
  font-family: "Work Sans", Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: #828282;
  background: #fff;
}

#page {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.offcanvas #page {
  overflow: hidden;
  position: absolute;
}
.offcanvas #page:after {
  -webkit-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.7);
  content: "";
}

a {
  color: #7f95b8;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
a:hover, a:active, a:focus {
  color: #f0b18b;
  outline: none;
  text-decoration: none;
}

p {
  margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6, figure {
  color: #000;
  font-family: "Work Sans", Arial, sans-serif;
  font-weight: 400;
  margin: 0 0 20px 0;
}

::-webkit-selection {
  color: #fff;
  background: #F14E95;
}

::-moz-selection {
  color: #fff;
  background: #F14E95;
}

::selection {
  color: #fff;
  background: #F14E95;
}

.fh5co-nav {
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  padding: 40px 0;
  z-index: 1001;
}
@media screen and (max-width: 768px) {
  .fh5co-nav {
    padding: 20px 0;
  }
}
.fh5co-nav #fh5co-logo {
  font-size: 40px;
  margin: 0;
  padding: 0;
  line-height: 40px;
  font-family: "Sacramento", Arial, serif;
}
.fh5co-nav a {
  padding: 5px 10px;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .fh5co-nav .menu-1, .fh5co-nav .menu-2 {
    display: none;
  }
}
.fh5co-nav ul {
  padding: 0;
  margin: 2px 0 0 0;
}
.fh5co-nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  display: inline;
}
.fh5co-nav ul li a {
  font-size: 14px;
  padding: 30px 10px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.fh5co-nav ul li a:hover, .fh5co-nav ul li a:focus, .fh5co-nav ul li a:active {
  color: white;
}
.fh5co-nav ul li.has-dropdown {
  position: relative;
}
.fh5co-nav ul li.has-dropdown .dropdown {
  width: 130px;
  -webkit-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 33px -9px rgba(0, 0, 0, 0.75);
  z-index: 1002;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0;
  text-align: left;
  background: #fff;
  padding: 20px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: 0s;
  -o-transition: 0s;
  transition: 0s;
}
.fh5co-nav ul li.has-dropdown .dropdown:before {
  bottom: 100%;
  left: 40px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-bottom-color: #fff;
  border-width: 8px;
  margin-left: -8px;
}
.fh5co-nav ul li.has-dropdown .dropdown li {
  display: block;
  margin-bottom: 7px;
}
.fh5co-nav ul li.has-dropdown .dropdown li:last-child {
  margin-bottom: 0;
}
.fh5co-nav ul li.has-dropdown .dropdown li a {
  padding: 2px 0;
  display: block;
  color: #999999;
  line-height: 1.2;
  text-transform: none;
  font-size: 15px;
}
.fh5co-nav ul li.has-dropdown .dropdown li a:hover {
  color: #000;
}
.fh5co-nav ul li.has-dropdown:hover a, .fh5co-nav ul li.has-dropdown:focus a {
  color: #fff;
}
.fh5co-nav ul li.btn-cta a {
  color: #F14E95;
}
.fh5co-nav ul li.btn-cta a span {
  background: #fff;
  padding: 4px 20px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  border-radius: 100px;
}
.fh5co-nav ul li.btn-cta a:hover span {
  -webkit-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 20px -9px rgba(0, 0, 0, 0.75);
}
.fh5co-nav ul li.active > a {
  color: #fff !important;
}

#fh5co-counter,
.fh5co-bg {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
}

.fh5co-bg {
  background-position: center center;
  width: 100%;
  float: left;
  position: relative;
}

.fh5co-video {
  height: 450px;
  overflow: hidden;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
.fh5co-video a {
  z-index: 1001;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -45px;
  margin-left: -45px;
  width: 90px;
  height: 90px;
  display: table;
  text-align: center;
  background: #fff;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.fh5co-video a i {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  font-size: 40px;
}
.fh5co-video .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.fh5co-video:hover .overlay {
  background: rgba(0, 0, 0, 0.7);
}
.fh5co-video:hover a {
  position: relative;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}

.fh5co-cover {
  height: 900px;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 100%;
}
.fh5co-cover .overlay {
  z-index: 0;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}
.fh5co-cover > .fh5co-container {
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 768px) {
  .fh5co-cover {
    height: 600px;
  }
}
.fh5co-cover .display-t,
.fh5co-cover .display-tc {
  height: 900px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .fh5co-cover .display-t,
  .fh5co-cover .display-tc {
    height: 600px;
  }
}
.fh5co-cover.fh5co-cover-sm {
  height: 600px;
}
@media screen and (max-width: 768px) {
  .fh5co-cover.fh5co-cover-sm {
    height: 400px;
  }
}
.fh5co-cover.fh5co-cover-sm .display-t,
.fh5co-cover.fh5co-cover-sm .display-tc {
  height: 600px;
  display: table;
  width: 100%;
}
@media screen and (max-width: 768px) {
  .fh5co-cover.fh5co-cover-sm .display-t,
  .fh5co-cover.fh5co-cover-sm .display-tc {
    height: 400px;
  }
}

#fh5co-counter {
  height: 850px;
  float: left;
}
#fh5co-counter .display-t,
#fh5co-counter .display-tc {
  height: 700px;
  display: table;
  width: 100%;
}
#fh5co-counter .fh5co-heading h2 {
  color: #fff;
}
#fh5co-counter .fh5co-heading span {
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
}
#fh5co-counter .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}
@media screen and (max-width: 768px) {
  #fh5co-counter {
    height: inherit;
    padding: 7em 0;
  }
  #fh5co-counter .display-t,
  #fh5co-counter .display-tc {
    height: inherit;
  }
}
#fh5co-counter .event-wrap {
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  width: 100%;
  float: left;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  #fh5co-counter .event-wrap {
    margin-bottom: 10px;
  }
}
#fh5co-counter .event-wrap h3 {
  font-size: 20px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  display: block;
  padding-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}
#fh5co-counter .event-wrap p, #fh5co-counter .event-wrap span {
  display: block;
  color: rgba(255, 255, 255, 0.8);
}
#fh5co-counter .event-wrap i {
  color: white;
  font-size: 20px;
}
#fh5co-counter .event-wrap .event-col {
  width: 50%;
  float: left;
  margin-bottom: 30px;
}

#fh5co-counter {
  height: 600px;
}
@media screen and (max-width: 768px) {
  #fh5co-counter {
    height: auto;
  }
}

.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}
.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 1px;
  background-color: #d4d4d4;
  left: 50%;
  margin-left: 0px;
}
@media screen and (max-width: 480px) {
  .timeline:before {
    margin-left: -64px;
  }
}
.timeline > li {
  margin-bottom: 20px;
  position: relative;
}
.timeline > li:before, .timeline > li:after {
  content: " ";
  display: table;
}
.timeline > li:after {
  clear: both;
}
.timeline > li > .timeline-panel {
  width: 40%;
  float: left;
  border: 1px solid #d4d4d4;
  padding: 30px;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.timeline > li > .timeline-panel:before {
  position: absolute;
  top: 80px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}
.timeline > li > .timeline-panel:after {
  position: absolute;
  top: 81px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}
@media screen and (max-width: 480px) {
  .timeline > li > .timeline-panel {
    width: 75% !important;
  }
  .timeline > li > .timeline-panel:before {
    top: 30px;
  }
  .timeline > li > .timeline-panel:after {
    top: 31px;
  }
}
.timeline > li > .timeline-badge {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  position: relative;
  color: #fff;
  width: 160px;
  height: 160px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -80px;
  background-color: #999999;
  z-index: 100;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media screen and (max-width: 480px) {
  .timeline > li > .timeline-badge {
    width: 60px;
    height: 60px;
    margin-left: -20px !important;
  }
}
.timeline > li.timeline-inverted > .timeline-panel {
  float: right;
}
.timeline > li.timeline-inverted > .timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}
.timeline > li.timeline-inverted > .timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.timeline-title {
  margin-top: 0;
}

.date {
  display: block;
  margin-bottom: 20px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.timeline-body > p,
.timeline-body > ul {
  margin-bottom: 0;
}

.timeline-body > p + p {
  margin-top: 5px;
}

@media (max-width: 992px) {
  ul.timeline:before {
    left: 90px;
  }

  ul.timeline > li > .timeline-panel {
    width: calc(100% - 200px);
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
  }

  ul.timeline > li > .timeline-badge {
    left: 15px;
    margin-left: 0;
    top: 16px;
  }

  ul.timeline > li > .timeline-panel {
    float: right;
  }

  ul.timeline > li > .timeline-panel:before {
    border-left-width: 0;
    border-right-width: 15px;
    left: -15px;
    right: auto;
  }

  ul.timeline > li > .timeline-panel:after {
    border-left-width: 0;
    border-right-width: 14px;
    left: -14px;
    right: auto;
  }
}
#fh5co-gallery-list {
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  position: relative;
  float: left;
  padding: 0;
  margin: 0;
  width: 100%;
}
#fh5co-gallery-list li {
  display: block;
  padding: 0;
  margin: 0 0 10px 1%;
  list-style: none;
  min-height: 400px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  float: left;
  clear: left;
  position: relative;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
}
@media screen and (max-width: 480px) {
  #fh5co-gallery-list li {
    margin-left: 0;
  }
}
#fh5co-gallery-list li a {
  min-height: 400px;
  padding: 2em;
  position: relative;
  width: 100%;
  display: block;
}
#fh5co-gallery-list li a:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  z-index: 80;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  -ms-border-radius: 7px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.2);
}
#fh5co-gallery-list li a:hover:before {
  background: rgba(0, 0, 0, 0.5);
}
#fh5co-gallery-list li a .case-studies-summary {
  width: auto;
  bottom: 2em;
  left: 2em;
  right: 2em;
  position: absolute;
  z-index: 100;
}
@media screen and (max-width: 768px) {
  #fh5co-gallery-list li a .case-studies-summary {
    bottom: 1em;
    left: 1em;
    right: 1em;
  }
}
#fh5co-gallery-list li a .case-studies-summary span {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
#fh5co-gallery-list li a .case-studies-summary h2 {
  color: #fff;
  margin-bottom: 0;
}
@media screen and (max-width: 768px) {
  #fh5co-gallery-list li a .case-studies-summary h2 {
    font-size: 20px;
  }
}
#fh5co-gallery-list li.one-third {
  width: 32.3%;
}
@media screen and (max-width: 768px) {
  #fh5co-gallery-list li.one-third {
    width: 49%;
  }
}
@media screen and (max-width: 480px) {
  #fh5co-gallery-list li.one-third {
    width: 100%;
  }
}

#map {
  width: 100%;
  height: 500px;
  position: relative;
}
@media screen and (max-width: 768px) {
  #map {
    height: 200px;
  }
}

.fh5co-social-icons {
  margin: 0;
  padding: 0;
}
.fh5co-social-icons li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
}
.fh5co-social-icons li a {
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
  color: #F14E95;
  padding-left: 10px;
  padding-right: 10px;
}
.fh5co-social-icons li a i {
  font-size: 20px;
}

.fh5co-contact-info ul {
  padding: 0;
  margin: 0;
}
.fh5co-contact-info ul li {
  padding: 0 0 0 50px;
  margin: 0 0 30px 0;
  list-style: none;
  position: relative;
}
.fh5co-contact-info ul li:before {
  color: #F14E95;
  position: absolute;
  left: 0;
  top: .05em;
  font-family: 'icomoon';
  speak-as: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.fh5co-contact-info ul li.address:before {
  font-size: 30px;
  content: "\e9d1";
}
.fh5co-contact-info ul li.phone:before {
  font-size: 23px;
  content: "\e9f4";
}
.fh5co-contact-info ul li.email:before {
  font-size: 23px;
  content: "\e9da";
}
.fh5co-contact-info ul li.url:before {
  font-size: 23px;
  content: "\e9af";
}

form label {
  font-weight: normal !important;
}

#fh5co-header .display-tc,
#fh5co-counter .display-tc,
.fh5co-cover .display-tc {
  display: table-cell !important;
  vertical-align: middle;
}
#fh5co-header .display-tc h1, #fh5co-header .display-tc h2,
#fh5co-counter .display-tc h1,
#fh5co-counter .display-tc h2,
.fh5co-cover .display-tc h1,
.fh5co-cover .display-tc h2 {
  margin: 0;
  padding: 0;
  color: white;
}
#fh5co-header .display-tc h1,
#fh5co-counter .display-tc h1,
.fh5co-cover .display-tc h1 {
  margin-bottom: 0px;
  font-size: 100px;
  line-height: 1.5;
  font-family: "Sacramento", Arial, serif;
}
@media screen and (max-width: 768px) {
  #fh5co-header .display-tc h1,
  #fh5co-counter .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 40px;
  }
}
@media screen and (max-width: 480px) {
  #fh5co-header .display-tc h1,
  #fh5co-counter .display-tc h1,
  .fh5co-cover .display-tc h1 {
    font-size: 30px;
  }
}
#fh5co-header .display-tc h2,
#fh5co-counter .display-tc h2,
.fh5co-cover .display-tc h2 {
  font-size: 20px;
  line-height: 1.5;
  margin-bottom: 30px;
}
@media screen and (max-width: 480px) {
  #fh5co-header .display-tc h2,
  #fh5co-counter .display-tc h2,
  .fh5co-cover .display-tc h2 {
    font-size: 16px;
  }
}
#fh5co-header .display-tc .btn,
#fh5co-counter .display-tc .btn,
.fh5co-cover .display-tc .btn {
  padding: 15px 20px;
  background: #fff !important;
  color: #F14E95;
  border: none !important;
  font-size: 14px;
  text-transform: uppercase;
}
#fh5co-header .display-tc .btn:hover,
#fh5co-counter .display-tc .btn:hover,
.fh5co-cover .display-tc .btn:hover {
  background: #fff !important;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75) !important;
}

#fh5co-counter {
  text-align: center;
}
#fh5co-counter .counter {
  font-size: 50px;
  margin-bottom: 10px;
  color: #fff;
  font-weight: 100;
  display: block;
}
#fh5co-counter .counter-label {
  margin-bottom: 0;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: .1em;
}
@media screen and (max-width: 768px) {
  #fh5co-counter .feature-center {
    margin-bottom: 50px;
  }
}
#fh5co-counter .icon {
  width: 70px;
  height: 70px;
  text-align: center;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  margin-bottom: 30px;
}
#fh5co-counter .icon i {
  height: 70px;
}
#fh5co-counter .icon i:before {
  display: block;
  text-align: center;
  margin-left: 3px;
}

.simply-countdown {
  /* The countdown */
  margin-bottom: 2em;
}

.simply-countdown > .simply-section {
  /* coutndown blocks */
  display: inline-block;
  width: 100px;
  height: 100px;
  background: rgba(241, 78, 149, 0.8);
  margin: 0 4px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  animation: pulse 1s ease infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.simply-countdown > .simply-section > div {
  /* countdown block inner div */
  display: table-cell;
  vertical-align: middle;
  height: 100px;
  width: 100px;
}

.simply-countdown > .simply-section .simply-amount,
.simply-countdown > .simply-section .simply-word {
  display: block;
  color: white;
  /* amounts and words */
}

.simply-countdown > .simply-section .simply-amount {
  font-size: 30px;
  /* amounts */
}

.simply-countdown > .simply-section .simply-word {
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  font-size: 12px;
  /* words */
}

#fh5co-testimonial,
#fh5co-services,
#fh5co-started,
#fh5co-footer,
#fh5co-couple-story,
#fh5co-couple,
#fh5co-gallery,
.fh5co-section {
  padding: 7em 0;
  clear: both;
}
@media screen and (max-width: 768px) {
  #fh5co-testimonial,
  #fh5co-services,
  #fh5co-started,
  #fh5co-footer,
  #fh5co-couple-story,
  #fh5co-couple,
  #fh5co-gallery,
  .fh5co-section {
    padding: 3em 0;
  }
}

.fh5co-section-gray {
  background: rgba(0, 0, 0, 0.04);
}

.couple-wrap {
  width: 90%;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 768px) {
  .couple-wrap {
    width: 100%;
  }
}

.heart {
  position: absolute;
  top: 4em;
  left: 0;
  right: 0;
  z-index: 99;
  animation: pulse 1s ease infinite;
}
.heart i {
  font-size: 20px;
  background: #fff;
  padding: 20px;
  color: #F14E95;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .heart {
    display: none;
  }
}

.couple-half {
  width: 50%;
  float: left;
}
@media screen and (max-width: 768px) {
  .couple-half {
    width: 100%;
  }
}
.couple-half h3 {
  font-family: "Sacramento", Arial, serif;
  color: #F14E95;
  font-size: 30px;
}
.couple-half .groom, .couple-half .bride {
  float: left;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}
.couple-half .groom img, .couple-half .bride img {
  width: 150px;
  height: 150px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media screen and (max-width: 480px) {
  .couple-half .groom, .couple-half .bride {
    width: 100%;
    height: 140px;
  }
  .couple-half .groom img, .couple-half .bride img {
    width: 120px;
    height: 120px;
    margin: 0 auto;
  }
}
.couple-half .groom {
  float: right;
  margin-right: 5px;
}
.couple-half .bride {
  float: left;
  margin-left: 5px;
}
.couple-half .desc-groom {
  padding-right: 180px;
  text-align: right;
}
.couple-half .desc-bride {
  padding-left: 180px;
  text-align: left;
}
@media screen and (max-width: 480px) {
  .couple-half .groom, .couple-half .bride {
    margin-left: 0;
    margin-right: 0;
  }
  .couple-half .desc-groom {
    padding-right: 0;
    text-align: center;
  }
  .couple-half .desc-bride {
    padding-left: 0;
    text-align: center;
  }
}

.feature-center {
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  float: left;
  width: 100%;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .feature-center {
    margin-bottom: 50px;
  }
}
.feature-center .icon {
  width: 90px;
  height: 90px;
  background: #efefef;
  display: table;
  text-align: center;
  margin: 0 auto 30px auto;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.feature-center .icon i {
  display: table-cell;
  vertical-align: middle;
  height: 90px;
  font-size: 40px;
  line-height: 40px;
  color: #F14E95;
}
.feature-center p, .feature-center h3 {
  margin-bottom: 30px;
}
.feature-center h3 {
  text-transform: uppercase;
  font-size: 18px;
  color: #5d5d5d;
}

.fh5co-heading {
  margin-bottom: 5em;
}
.fh5co-heading.fh5co-heading-sm {
  margin-bottom: 2em;
}
.fh5co-heading h2 {
  font-size: 60px;
  margin-bottom: 10px;
  line-height: 1.5;
  font-weight: bold;
  color: #F14E95;
  font-family: "Sacramento", Arial, serif;
}
@media screen and (max-width: 768px) {
  .fh5co-heading h2 {
    font-size: 40px;
  }
}
.fh5co-heading p {
  font-size: 18px;
  line-height: 1.5;
  color: #828282;
}
.fh5co-heading span {
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.4);
}

#fh5co-testimonial .wrap-testimony {
  position: relative;
}
#fh5co-testimonial .wrap-testimony .testimony-slide {
  text-align: center;
}
#fh5co-testimonial .wrap-testimony .testimony-slide span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  display: block;
}
#fh5co-testimonial .wrap-testimony .testimony-slide span a.twitter {
  color: #F14E95;
  font-weight: 300;
}
#fh5co-testimonial .wrap-testimony .testimony-slide figure {
  margin-bottom: 10px;
  display: -moz-inline-stack;
  display: inline-block;
  zoom: 1;
  display: inline;
  width: 100px;
  height: 100px;
}
#fh5co-testimonial .wrap-testimony .testimony-slide figure img {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
#fh5co-testimonial .wrap-testimony .testimony-slide blockquote {
  border: none;
  margin: 30px auto;
  width: 50%;
  position: relative;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
@media screen and (max-width: 992px) {
  #fh5co-testimonial .wrap-testimony .testimony-slide blockquote {
    width: 100%;
  }
}
#fh5co-testimonial .wrap-testimony .testimony-slide blockquote p {
  font-style: italic;
  color: #8f989f;
  font-size: 20px;
  line-height: 1.6em;
}
#fh5co-testimonial .wrap-testimony .testimony-slide.active {
  display: block;
}
#fh5co-testimonial .wrap-testimony .arrow-thumb {
  position: absolute;
  top: 40%;
  display: block;
  width: 100%;
}
#fh5co-testimonial .wrap-testimony .arrow-thumb a {
  font-size: 32px;
  color: #dadada;
}
#fh5co-testimonial .wrap-testimony .arrow-thumb a:hover, #fh5co-testimonial .wrap-testimony .arrow-thumb a:focus, #fh5co-testimonial .wrap-testimony .arrow-thumb a:active {
  text-decoration: none;
}

.feature-left {
  float: left;
  width: 100%;
  margin-bottom: 30px;
  position: relative;
}
.feature-left:last-child {
  margin-bottom: 0;
}
.feature-left .icon {
  float: left;
  margin-right: 5%;
  width: 54px;
  height: 54px;
  background: #fff;
  display: table;
  text-align: center;
  -webkit-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 14px 30px -15px rgba(0, 0, 0, 0.75);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
@media screen and (max-width: 768px) {
  .feature-left .icon {
    margin-right: 5%;
  }
}
.feature-left .icon i {
  display: table-cell;
  vertical-align: middle;
  font-size: 30px;
  color: #F14E95;
}
.feature-left .feature-copy {
  float: left;
  width: 80%;
}
@media screen and (max-width: 768px) {
  .feature-left .feature-copy {
    width: 70%;
    float: left;
  }
}
.feature-left .feature-copy h3 {
  text-transform: uppercase;
  font-size: 18px;
  color: #5d5d5d;
  margin-bottom: 10px;
}

#fh5co-started {
  position: relative;
}
#fh5co-started .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}
#fh5co-started .fh5co-heading h2 {
  color: #fff;
}
#fh5co-started .fh5co-heading p {
  color: rgba(255, 255, 255, 0.5);
}
/* Catatan: aturan lama `#fh5co-started .form-control` dan `.btn` (dirancang
   untuk latar foto gelap: input transparan + tombol pink #F14E95) SUDAH
   DIHAPUS. RSVP kini memakai palet parchment, jadi seluruh styling input,
   placeholder, dan tombol didefinisikan di blok `.invitation-rsvp`
   (lihat bagian "RSVP — heading, benang penyambung, kartu, tombol").
   Aturan ini dihapus karena selector id-nya lebih kuat daripada blok
   `.invitation-rsvp` sehingga akan menimpa desain baru. */
#fh5co-started .form-inline .form-group {
  width: 100% !important;
  margin-bottom: 10px;
}
#fh5co-started .form-inline .form-group .form-control {
  width: 100%;
}
#fh5co-started .fh5co-heading {
  margin-bottom: 30px;
}
#fh5co-started .fh5co-heading h2 {
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  #fh5co-footer .copyright .pull-left,
  #fh5co-footer .copyright .pull-right {
    float: none !important;
    text-align: center;
  }
}
#fh5co-footer .copyright .block {
  display: block;
}

.owl-carousel .owl-controls .owl-dot span {
  background: #e6e6e6;
}
.owl-carousel .owl-controls .owl-dot span:hover, .owl-carousel .owl-controls .owl-dot span:focus {
  background: #cccccc;
}
.owl-carousel .owl-controls .owl-dot:hover span, .owl-carousel .owl-controls .owl-dot:focus span {
  background: #cccccc;
}
.owl-carousel .owl-controls .owl-dot.active span {
  background: transparent;
  border: 2px solid #F14E95;
}

#fh5co-offcanvas {
  position: absolute;
  z-index: 1901;
  width: 270px;
  background: black;
  top: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding: 45px 40px 40px 40px;
  overflow-y: auto;
  -moz-transform: translateX(270px);
  -webkit-transform: translateX(270px);
  -ms-transform: translateX(270px);
  -o-transform: translateX(270px);
  transform: translateX(270px);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.offcanvas #fh5co-offcanvas {
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);
  -ms-transform: translateX(0px);
  -o-transform: translateX(0px);
  transform: translateX(0px);
}
#fh5co-offcanvas a {
  color: rgba(255, 255, 255, 0.5);
}
#fh5co-offcanvas a:hover {
  color: rgba(255, 255, 255, 0.8);
}
#fh5co-offcanvas ul {
  padding: 0;
  margin: 0;
}
#fh5co-offcanvas ul li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#fh5co-offcanvas ul li > ul {
  padding-left: 20px;
  display: none;
}
#fh5co-offcanvas ul li.offcanvas-has-dropdown > a {
  display: block;
  position: relative;
}
#fh5co-offcanvas ul li.offcanvas-has-dropdown > a:after {
  position: absolute;
  right: 0px;
  font-family: 'icomoon';
  speak-as: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e921";
  font-size: 20px;
  color: rgba(255, 255, 255, 0.2);
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
#fh5co-offcanvas ul li.offcanvas-has-dropdown.active a:after {
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

.uppercase {
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.gototop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.gototop.active {
  opacity: 1;
  visibility: visible;
}
.gototop a {
  width: 50px;
  height: 50px;
  display: table;
  background: linear-gradient(135deg, rgba(127, 149, 184, 0.95) 0%, rgba(240, 177, 139, 0.95) 100%);
  color: #fff;
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
}
.gototop a i {
  height: 50px;
  display: table-cell;
  vertical-align: middle;
}
.gototop a:hover, .gototop a:active, .gototop a:focus {
  text-decoration: none;
  outline: none;
}

.fh5co-nav-toggle {
  width: 25px;
  height: 25px;
  cursor: pointer;
  text-decoration: none;
}
.fh5co-nav-toggle.active i::before, .fh5co-nav-toggle.active i::after {
  background: #444;
}
.fh5co-nav-toggle:hover, .fh5co-nav-toggle:focus, .fh5co-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}
.fh5co-nav-toggle i {
  position: relative;
  display: inline-block;
  width: 25px;
  height: 2px;
  color: #252525;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #252525;
  transition: all .2s ease-out;
}
.fh5co-nav-toggle i::before, .fh5co-nav-toggle i::after {
  content: '';
  width: 25px;
  height: 2px;
  background: #252525;
  position: absolute;
  left: 0;
  transition: all .2s ease-out;
}
.fh5co-nav-toggle.fh5co-nav-white > i {
  color: #fff;
  background: #fff;
}
.fh5co-nav-toggle.fh5co-nav-white > i::before, .fh5co-nav-toggle.fh5co-nav-white > i::after {
  background: #fff;
}

.fh5co-nav-toggle i::before {
  top: -7px;
}

.fh5co-nav-toggle i::after {
  bottom: -7px;
}

.fh5co-nav-toggle:hover i::before {
  top: -10px;
}

.fh5co-nav-toggle:hover i::after {
  bottom: -10px;
}

.fh5co-nav-toggle.active i {
  background: transparent;
}

.fh5co-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.fh5co-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.fh5co-nav-toggle {
  position: absolute;
  right: 0px;
  top: 10px;
  z-index: 21;
  padding: 6px 0 0 0;
  display: block;
  margin: 0 auto;
  display: none;
  height: 44px;
  width: 44px;
  z-index: 2001;
  border-bottom: none !important;
}
@media screen and (max-width: 768px) {
  .fh5co-nav-toggle {
    display: block;
  }
}

.btn {
  margin-right: 4px;
  margin-bottom: 4px;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  border-radius: 30px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  padding: 8px 20px;
}
.btn.btn-md {
  padding: 8px 20px !important;
}
.btn.btn-lg {
  padding: 18px 36px !important;
}
.btn:hover, .btn:active, .btn:focus {
  box-shadow: none !important;
  outline: none !important;
}

.btn-primary {
  background: #F14E95;
  color: #fff;
  border: 2px solid #F14E95;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background: #f366a3 !important;
  border-color: #f366a3 !important;
}
.btn-primary.btn-outline {
  background: transparent;
  color: #F14E95;
  border: 2px solid #F14E95;
}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {
  background: #F14E95;
  color: #fff;
}

.btn-success {
  background: #5cb85c;
  color: #fff;
  border: 2px solid #5cb85c;
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
  background: #4cae4c !important;
  border-color: #4cae4c !important;
}
.btn-success.btn-outline {
  background: transparent;
  color: #5cb85c;
  border: 2px solid #5cb85c;
}
.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {
  background: #5cb85c;
  color: #fff;
}

.btn-info {
  background: #5bc0de;
  color: #fff;
  border: 2px solid #5bc0de;
}
.btn-info:hover, .btn-info:focus, .btn-info:active {
  background: #46b8da !important;
  border-color: #46b8da !important;
}
.btn-info.btn-outline {
  background: transparent;
  color: #5bc0de;
  border: 2px solid #5bc0de;
}
.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {
  background: #5bc0de;
  color: #fff;
}

.btn-warning {
  background: #f0ad4e;
  color: #fff;
  border: 2px solid #f0ad4e;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {
  background: #eea236 !important;
  border-color: #eea236 !important;
}
.btn-warning.btn-outline {
  background: transparent;
  color: #f0ad4e;
  border: 2px solid #f0ad4e;
}
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {
  background: #f0ad4e;
  color: #fff;
}

.btn-danger {
  background: #d9534f;
  color: #fff;
  border: 2px solid #d9534f;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {
  background: #d43f3a !important;
  border-color: #d43f3a !important;
}
.btn-danger.btn-outline {
  background: transparent;
  color: #d9534f;
  border: 2px solid #d9534f;
}
.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {
  background: #d9534f;
  color: #fff;
}

.btn-outline {
  background: none;
  border: 2px solid gray;
  font-size: 16px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active {
  box-shadow: none;
}

.btn.with-arrow {
  position: relative;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.btn.with-arrow i {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  right: 0px;
  top: 50%;
  margin-top: -8px;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}
.btn.with-arrow:hover {
  padding-right: 50px;
}
.btn.with-arrow:hover i {
  color: #fff;
  right: 18px;
  visibility: visible;
  opacity: 1;
}

.form-control {
  box-shadow: none;
  background: transparent;
  border: 2px solid rgba(0, 0, 0, 0.1);
  height: 54px;
  font-size: 18px;
  font-weight: 300;
}
.form-control:active, .form-control:focus {
  outline: none;
  box-shadow: none;
  border-color: #F14E95;
}

.row-pb-md {
  padding-bottom: 4em !important;
}

.row-pb-sm {
  padding-bottom: 2em !important;
}

.fh5co-loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at top, rgba(237, 205, 191, 0.6), transparent 42%),
    linear-gradient(180deg, #fffaf7 0%, #f8ede7 100%);
}

.invitation-loader__inner {
  position: relative;
  width: min(100% - 48px, 360px);
  padding: 34px 28px;
  text-align: center;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(183, 123, 103, 0.14);
  box-shadow: 0 18px 50px rgba(60, 41, 34, 0.12);
  backdrop-filter: blur(10px);
}

.invitation-loader__inner:before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.78);
}

.invitation-loader__kicker {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 14px;
  color: #aa7967;
  font-family: "Lora", Georgia, serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.invitation-loader__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 14px;
  padding: 12px;
  border-radius: 50%;
  background: #8d6558;
  object-fit: contain;
}

.invitation-loader__text {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #755a52;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.8;
}

.invitation-loader__dots {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}

.invitation-loader__dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c78d77 0%, #e3b5a0 100%);
  animation: invitationLoaderPulse 1.25s ease-in-out infinite;
}

.invitation-loader__dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.invitation-loader__dots span:nth-child(3) {
  animation-delay: 0.36s;
}

.js .animate-box {
  opacity: 0;
}

.invitation-nav {
  padding-top: 28px;
  padding-bottom: 28px;
}

.invitation-sound-toggle {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 100002;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 50%;
  background: rgba(49, 60, 53, 0.52);
  color: #fff;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

body.invitation-locked .invitation-sound-toggle {
  visibility: hidden;
  pointer-events: none;
}

.invitation-sound-toggle:hover {
  background: rgba(49, 60, 53, 0.76);
  transform: scale(1.05);
}

.invitation-sound-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.invitation-sound-toggle svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.invitation-sound-toggle__mute-slash {
  display: none;
}

.invitation-sound-toggle[aria-pressed="true"] .invitation-sound-toggle__wave {
  display: none;
}

.invitation-sound-toggle[aria-pressed="true"] .invitation-sound-toggle__mute-slash {
  display: inline;
}

body.invitation-locked {
  overflow: hidden;
  height: 100vh;
}

html,
body {
  overflow-x: hidden;
}

/* invitation-cover styles consolidated near line 4088 */

.invitation-cover.is-opening {
  animation: invitationCoverSlideUp 0.9s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  pointer-events: none;
  will-change: transform;
}

.invitation-cover.is-opening .invitation-cover__content {
  animation: none;
}

.invitation-cover.is-opening .invitation-cover__backdrop {
  animation: none;
}

@keyframes invitationBackdropFloat {
  from {
    transform: scale(1.04) translateY(0);
  }
  to {
    transform: scale(1.1) translateY(-10px);
  }
}

@keyframes invitationCardEnter {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes invitationCardExit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-24px) scale(0.96);
  }
}

@keyframes invitationBackdropExit {
  from {
    opacity: 1;
    transform: scale(1.08);
  }
  to {
    opacity: 0;
    transform: scale(1.14);
  }
}

@keyframes invitationButtonShine {
  0%,
  55%,
  100% {
    left: -120%;
  }
  75% {
    left: 140%;
  }
}

@keyframes invitationLoaderPulse {
  0%,
  100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-4px) scale(1);
    opacity: 1;
  }
}

@keyframes invitationCoverSlideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(-100%);
    visibility: hidden;
  }
}

@keyframes invitationCoverContentIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.invitation-nav .container,
#fh5co-couple .container,
#fh5co-couple-story .container,
#fh5co-gallery .container,
#fh5co-testimonial .container,
#fh5co-started .container,
#fh5co-footer .container {
  width: min(100%, 1140px);
}

.invitation-nav #fh5co-logo {
  font-size: 34px;
  color: #32465f;
}

.invitation-nav ul li a {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: rgba(50, 70, 95, 0.76);
}

.invitation-nav ul li a:hover,
.invitation-nav ul li a:focus,
.invitation-nav ul li.active > a {
  color: #7f95b8;
}

.fh5co-cover {
  min-height: 100vh;
  height: auto;
}

.fh5co-cover .display-t,
.fh5co-cover .display-tc {
  min-height: 100vh;
  height: auto;
}

.invitation-overlay {
  background: rgba(34, 25, 20, 0.48);
}

.hero-copy {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 90px 0 32px;
}

#fh5co-header .hero-copy h1 {
  font-size: 96px;
  line-height: 1;
  margin-bottom: 16px;
}

#fh5co-header .hero-copy h2 {
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 20px;
  line-height: 1.6;
  margin: 0 auto 14px;
  color: rgba(255, 255, 255, 0.92);
}

.hero-note {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.72);
}

.hero-message {
  max-width: 700px;
  margin: 0 auto 18px;
  color: rgba(255, 255, 255, 0.88);
}

.hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.hero-actions .btn,
.rsvp-actions .btn,
.map-action .btn {
  margin: 8px 6px;
}

.invitation-cover__button,
.hero-actions .btn-default,
.rsvp-actions .btn-default,
.map-action .btn,
.gift-toggle,
.rsvp-feedback-dialog .btn-default {
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #8097bb 0%, #f0b18b 100%);
  box-shadow: 0 16px 30px rgba(108, 131, 164, 0.22);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.invitation-cover__button:hover,
.invitation-cover__button:focus,
.hero-actions .btn-default:hover,
.hero-actions .btn-default:focus,
.rsvp-actions .btn-default:hover,
.rsvp-actions .btn-default:focus,
.map-action .btn:hover,
.map-action .btn:focus,
.gift-toggle:hover,
.gift-toggle:focus,
.rsvp-feedback-dialog .btn-default:hover,
.rsvp-feedback-dialog .btn-default:focus {
  transform: translateY(-2px);
  box-shadow: 0 20px 34px rgba(108, 131, 164, 0.28);
  filter: saturate(1.05);
}

.map-action {
  margin-top: 18px;
}

.map-action .btn i {
  margin-right: 8px;
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(220, 234, 250, 0.88);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.btn-outline:hover,
.btn-outline:focus {
  background: rgba(255, 255, 255, 0.94);
  color: #7f95b8;
}

.invitation-section {
  padding: 7em 0;
}

#fh5co-couple {
  padding-top: 3.2em;
  padding-bottom: 4.6em;
}

#fh5co-couple .fh5co-heading {
  margin-bottom: 4px;
}

.fh5co-heading span {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f95b8;
}

.fh5co-heading h2 {
  color: #32465f;
}

.invitation-couple {
  background: linear-gradient(180deg, #f9f7fb 0%, #fffdf9 100%);
  border-radius: 24px;
  padding: 45px 35px;
  box-shadow: 0 24px 60px rgba(59, 77, 104, 0.1);
}

.invitation-person-card {
  padding: 22px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(127, 149, 184, 0.12);
}

.person-label {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 14px;
  border-radius: 12px;
  background: #edf3fb;
  color: #7f95b8;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
  font-weight: 700;
}

.family-line {
  color: #7f95b8;
  font-weight: 600;
}

.heart-badge {
  background: linear-gradient(135deg, #edf3fb 0%, #f7e7de 100%);
  color: #7f95b8;
  box-shadow: 0 12px 28px rgba(127, 149, 184, 0.18);
}

.invitation-verse {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 4%, rgba(255, 208, 135, 0.54) 0%, rgba(255, 208, 135, 0.2) 18%, transparent 42%),
    radial-gradient(ellipse at 14% 100%, rgba(98, 122, 80, 0.18) 0%, rgba(98, 122, 80, 0.08) 18%, transparent 34%),
    radial-gradient(ellipse at 86% 100%, rgba(151, 116, 88, 0.16) 0%, rgba(151, 116, 88, 0.08) 18%, transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(255, 242, 220, 0.28), transparent 42%),
    linear-gradient(180deg, #f8ebdc 0%, #f2e3d1 28%, #e4e7d6 60%, #f7efe5 100%);
  box-shadow: inset 0 0 80px rgba(94, 70, 44, 0.06);
}

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

/* Benang penyambung card Prologue (3px, memudar di kedua ujung).
   Catatan: :before di bawah ini akhirnya ditimpa lapisan glow
   (.invitation-verse:before { background: radial-gradient(...) }), jadi
   warna ini yang benar-benar terpakai adalah untuk garis BAWAH (:after).

   WARNA SENGAJA DISAMAKAN dengan .doa-section__connector di section
   Wedding Du'a: rgba(190, 150, 106, 0.68). Kalau salah satu diubah,
   ubah keduanya supaya benang antar-section tetap seragam. */
.invitation-verse:before,
.invitation-verse:after {
  content: "";
  position: absolute;
  left: 50%;
  width: 3px;
  height: 90px;
  background: linear-gradient(to bottom, transparent, rgba(190, 150, 106, 0.68), transparent);
  transform: translateX(-50%);
  z-index: 0;
}

.invitation-verse:before {
  top: 28px;
}

.invitation-verse:after {
  bottom: 28px;
}

.invitation-verse:before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 88%;
  background:
    radial-gradient(ellipse at 8% 92%, rgba(102, 129, 80, 0.12), transparent 22%),
    radial-gradient(ellipse at 30% 100%, rgba(119, 143, 98, 0.12), transparent 24%),
    radial-gradient(ellipse at 68% 100%, rgba(130, 110, 82, 0.11), transparent 24%),
    radial-gradient(ellipse at 92% 96%, rgba(111, 132, 88, 0.12), transparent 22%);
  filter: blur(10px);
  z-index: 0;
}

/* Garis penyambung di atas card, simetris dengan garis bawah dari
   .invitation-verse::after — termasuk warna benangnya, yaitu sama dengan
   .doa-section__connector di Wedding Du'a: rgba(190, 150, 106, 0.68). */
.prologue-connector {
  content: "";
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 0;

  width: 3px;
  height: 90px;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(190, 150, 106, 0.68),
    transparent
  );

  pointer-events: none;
  transform: translateX(-50%);
}


.invitation-card.invitation-verse-card {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 76px) clamp(26px, 5vw, 74px);
  border: 1px solid rgba(166, 123, 100, 0.5);
  border-radius: 16px;
  background:
    linear-gradient(to bottom, transparent, rgba(150, 111, 83, 0.42), rgba(188, 153, 118, 0.7), rgba(150, 111, 83, 0.42), transparent) left 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(to bottom, transparent, rgba(150, 111, 83, 0.42), rgba(188, 153, 118, 0.7), rgba(150, 111, 83, 0.42), transparent) right 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(247, 239, 228, 0.9));
  box-shadow:
    0 26px 80px rgba(68, 54, 42, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 20px 0 0 -19px rgba(166, 123, 100, 0.62),
    inset -20px 0 0 -19px rgba(166, 123, 100, 0.62);
  backdrop-filter: blur(1px);
}
.invitation-characters {
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.86), transparent 38%),
    linear-gradient(180deg, #f4f8f1 0%, #eef4ea 100%);
}

.invitation-characters .fh5co-heading {
  margin-bottom: 28px;
}

.invitation-characters .fh5co-heading span {
  color: #6c7f69;
}

.invitation-characters .fh5co-heading h2 {
  margin-bottom: 18px;
  color: #30423a;
  font-family: "Cinzel", serif;
  font-size: clamp(24px, 3.8vw, 40px);
  letter-spacing: 0.26em;
}

.invitation-characters .fh5co-heading p {
  max-width: 620px;
  margin: 0 auto 14px;
  color: #5f6f63;
  font-family: "Lora", serif;
  font-size: 15px;
  line-height: 1.9;
}

.invite-characters-panel {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(72, 96, 74, 0.2);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 241, 0.98)),
    #fbfdf8;
  box-shadow: 0 24px 65px rgba(49, 71, 55, 0.14);
}

.invite-characters-panel:before,
.invite-characters-panel:after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(72, 96, 74, 0.08);
  border-radius: 6px;
  pointer-events: none;
}

.invite-characters-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
}

.invite-character-card {
  text-align: center;
}

.invite-character-card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(56, 80, 58, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.invite-character-card__frame:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(96, 123, 100, 0.18);
  border-radius: 4px;
  pointer-events: none;
}

.invite-character-card__sketch {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(87, 112, 92, 0.12), transparent 28%),
    radial-gradient(circle at 82% 30%, rgba(87, 112, 92, 0.1), transparent 24%),
    linear-gradient(135deg, rgba(87, 112, 92, 0.06), transparent 44%),
    repeating-linear-gradient(
      45deg,
      rgba(87, 112, 92, 0.045) 0,
      rgba(87, 112, 92, 0.045) 1px,
      transparent 1px,
      transparent 10px
    );
  mix-blend-mode: multiply;
  opacity: 0.08;
  pointer-events: none;
}

.invite-character-card__photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #edf1ea;
}

.invite-character-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.95) contrast(1.02);
}

.invite-character-card__body {
  padding-top: 24px;
}

.invite-character-card__body h3 {
  margin-bottom: 12px;
  color: #2f4138;
  font-family: "Cinzel", serif;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.22em;
}

.invite-character-card__body .family-line {
  margin-bottom: 8px;
  color: #6b7e6d;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.invite-character-card__body .family-detail {
  margin-bottom: 4px;
  color: #46574b;
  font-family: "Lora", serif;
  font-size: 14px;
  line-height: 1.7;
}

.invite-characters-panel__glyph {
  align-self: center;
  justify-self: center;
  color: #7f9b7b;
  font-size: 32px;
  line-height: 1;
}

.invite-characters-panel__footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(96, 123, 100, 0.16);
  text-align: center;
  color: #56705d;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

@media screen and (max-width: 992px) {
  .invite-characters-panel__grid {
    grid-template-columns: 1fr;
  }

  .invite-characters-panel__glyph {
    display: none;
  }

  .invite-character-card {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .invitation-characters .fh5co-heading h2 {
    letter-spacing: 0.16em;
  }

  .invitation-characters .fh5co-heading p {
    font-size: 14px;
  }

  .invite-characters-panel {
    padding: 16px;
  }

  .invite-character-card__frame {
    aspect-ratio: 3 / 4;
  }

  .invite-character-card__body h3 {
    font-size: 24px;
  }

  .invite-characters-panel__footer {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

@media screen and (max-width: 992px) {
  .invite-characters-panel__grid {
    grid-template-columns: 1fr;
  }

  .invite-characters-panel__glyph {
    display: none;
  }

  .invite-character-card {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .invitation-characters .fh5co-heading h2 {
    letter-spacing: 0.16em;
  }

  .invitation-characters .fh5co-heading p {
    font-size: 14px;
  }

  .invite-characters-panel {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid rgba(72, 96, 74, 0.2);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 241, 0.98)),
    #fbfdf8;
  box-shadow: 0 24px 65px rgba(49, 71, 55, 0.14);
}

.invite-characters-panel:before,
.invite-characters-panel:after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(72, 96, 74, 0.08);
  border-radius: 6px;
  pointer-events: none;
}

.invite-characters-panel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
}

.invite-character-card {
  text-align: center;
}

.invite-character-card__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid rgba(56, 80, 58, 0.16);
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.8);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.invite-character-card__frame:before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(96, 123, 100, 0.18);
  border-radius: 4px;
  pointer-events: none;
}

.invite-character-card__sketch {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 18%, rgba(87, 112, 92, 0.12), transparent 28%),
    radial-gradient(circle at 82% 30%, rgba(87, 112, 92, 0.1), transparent 24%),
    linear-gradient(135deg, rgba(87, 112, 92, 0.06), transparent 44%),
    repeating-linear-gradient(
      45deg,
      rgba(87, 112, 92, 0.045) 0,
      rgba(87, 112, 92, 0.045) 1px,
      transparent 1px,
      transparent 10px
    );
  mix-blend-mode: multiply;
  opacity: 0.08;
  pointer-events: none;
}

.invite-character-card__photo {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  background: #edf1ea;
}

.invite-character-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: saturate(0.95) contrast(1.02);
}

.invite-character-card__body {
  padding-top: 24px;
}

.invite-character-card__body h3 {
  margin-bottom: 12px;
  color: #2f4138;
  font-family: "Cinzel", serif;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.22em;
}

.invite-character-card__body .family-line {
  margin-bottom: 8px;
  color: #6b7e6d;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.invite-character-card__body .family-detail {
  margin-bottom: 4px;
  color: #46574b;
  font-family: "Lora", serif;
  font-size: 14px;
  line-height: 1.7;
}

.invite-characters-panel__glyph {
  align-self: center;
  justify-self: center;
  color: #7f9b7b;
  font-size: 32px;
  line-height: 1;
}

.invite-characters-panel__footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(96, 123, 100, 0.16);
  text-align: center;
  color: #56705d;
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}


}

@media screen and (max-width: 992px) {
  .invite-characters-panel__grid {
    grid-template-columns: 1fr;
  }

  .invite-characters-panel__glyph {
    display: none;
  }

  .invite-character-card {
    max-width: 520px;
    margin: 0 auto;
  }
}

@media screen and (max-width: 768px) {
  .invitation-characters .fh5co-heading h2 {
    letter-spacing: 0.16em;
  }

  .invitation-characters .fh5co-heading p {
    font-size: 14px;
  }

  .invite-characters-panel {
    padding: 16px;
  }

  .invite-character-card__frame {
    aspect-ratio: 3 / 4;
  }

  .invite-character-card__body h3 {
    font-size: 24px;
  }

  .invite-characters-panel__footer {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

.invitation-verse-card:before,
.invitation-verse-card:after {
  content: "";
  position: absolute;
  left: clamp(22px, 4vw, 46px);
  right: clamp(22px, 4vw, 46px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(150, 111, 83, 0.42), rgba(188, 153, 118, 0.7), rgba(150, 111, 83, 0.42), transparent);
}

.invitation-verse-card:before {
  top: 20px;
}

.invitation-verse-card:after {
  bottom: 20px;
}

.verse-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 18px;
  color: #f8f0dd;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-shadow: none;
  -webkit-text-stroke: 0;
  text-transform: uppercase;
  background: #68776c;
  border: 1px solid rgba(185, 155, 105, 0.55);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(55, 67, 58, 0.12);
}

.verse-kicker:before,
.verse-kicker:after {
  content: none;
}

.invitation-verse-card h2 {
  margin: 4px 0 26px;
  color: #2f423f;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(30px, 4.2vw, 48px);
  font-style: italic;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.prologue-copy {
  max-width: 560px;
  margin: 0 auto 32px;
  color: #4f5f56;
  font-family: "Lora", serif;
  font-size: clamp(13px, 1.4vw, 16px);
  font-style: italic;
  line-height: 2;
}

.prologue-copy p {
  margin-bottom: 20px;
}

.verse-reference {
  display: inline-block;
  margin-bottom: 20px;
  color: #7d5d4e;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.verse-arabic {
  max-width: 760px;
  margin: 0 auto 24px;
  font-family: "Noto Naskh Arabic", serif;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.95;
  color: #2d3d3a;
  font-style: normal;
  direction: rtl;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
}

.verse-translation {
  max-width: 720px;
  margin: 0 auto;
  color: #5f534d;
  font-family: "Lora", serif;
  font-size: 14px;
  line-height: 1.9;
}



#fh5co-started {
  padding-top: 4.2em;
  padding-bottom: 4.6em;
}

#fh5co-started .fh5co-heading {
  margin-bottom: 8px;
}

.invitation-story,
.invitation-gallery {
  background: linear-gradient(180deg, #eef4fb 0%, #fcf7f2 100%);
}

/* RSVP, Ucapan, dan Gift berbagi satu environment `.rsvp-scene`;
   Closing setelahnya memiliki parchment tersendiri. */
.invitation-rsvp,
.invitation-wishes {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #594735;
}

/* ---------------------------------------------------------
   RSVP → Ucapan & Doa → Gift — shared landscape scene
   Satu `.rsvp-scene` membungkus RSVP hingga Gift sehingga langit, awan,
   dan foreground memakai satu environment. Closing berada sesudah scene
   ini dan mengawali kembali latar parchment.

   Urutan lapisan (belakang → depan), mengikuti markup di index.html:
     1. __bridge    gradien parchment → langit di atas scene (jembatan
                    dari A Little More Us, warnanya diukur dari render)
     2. __base      images/rsvp-base       langit Ghibli 1024x1536
     3. __cloud     images/rsvp-cloud      awan transparan, cover sama
     4. __veil      gradien ivory          menjaga heading terbaca
     5. __gift-landscape images/rsvp-gift foreground transparan
   Dahan kiri dan kanan membingkai RSVP dan daftar ucapan. Landscape
   berakhir di Gift, tidak berlanjut ke halaman Closing.

   Animasi: reveal (CSS) + parallax scroll (JS, initRsvpScene()).
   Parallax memakai properti `translate`, reveal memakai `transform` —
   keduanya saling melengkapi tanpa menimpa.
   --------------------------------------------------------- */

.rsvp-scene {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Fallback: gradien parchment lama, tampil bila gambar scene gagal
     dimuat. Tetap di belakang lapisan gambar. */
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 248, 226, 0.55) 0%, rgba(255, 239, 207, 0.2) 26%, transparent 52%),
    linear-gradient(180deg, #f4e9d8 0%, #f8f0e4 44%, #f2e4d1 100%);
  color: #594735;
}

/* Konten kedua section di atas lapisan dekoratif. */
.rsvp-scene .invitation-rsvp,
.rsvp-scene .invitation-wishes {
  z-index: 1;
}

.rsvp-scene .invitation-wishes {
  overflow: visible;
}

.rsvp-scene #fh5co-started {
  padding-bottom: 1.5em;
}

.rsvp-scene #fh5co-testimonial {
  padding-top: 1.5em;
  padding-bottom: clamp(70px, 7vw, 100px);
}

.rsvp-gift-connector {
  position: absolute;
  bottom: 18px;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(780px, calc(100% - 30px));
  color: #fff;
  transform: translateX(-50%);
  pointer-events: none;
}

.rsvp-gift-connector::before,
.rsvp-gift-connector::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.96));
  filter: drop-shadow(0 1px 2px rgba(42, 34, 26, 0.72));
}

.rsvp-gift-connector::after {
  transform: scaleX(-1);
}

.rsvp-gift-connector span {
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-shadow:
    0 1px 3px rgba(42, 34, 26, 0.82),
    0 0 9px rgba(255, 255, 255, 0.78);
}

@media screen and (max-width: 768px) {
  .rsvp-gift-connector {
    bottom: calc((clamp(65px, 12vw, 90px) - 69px) / 2 - 9px);
  }

  .rsvp-gift-connector::before,
  .rsvp-gift-connector::after {
    background: linear-gradient(to right, transparent, rgba(150, 112, 72, 0.72));
    filter: drop-shadow(0 1px 2px rgba(255, 248, 226, 0.72));
  }

  .rsvp-gift-connector span {
    color: rgba(126, 91, 54, 0.9);
    text-shadow: 0 1px 3px rgba(255, 248, 226, 0.9);
  }
}

.rsvp-scene__layers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ---------------------------------------------------------
   Jembatan warna — A Little More Us → RSVP

   Pola SAMA dengan transisi Chapter Two → Wedding Du'a
   (.doa-section__glow): sisi yang MENERIMA (scene RSVP)
   melukis gradien yang warna pertamanya persis sama dengan
   baris terakhir sisi pengirim, lalu mendingin perlahan
   sampai alpha 0. Parchment tidak berhenti mendadak di
   garis lurus — halaman "cair" masuk ke langit.

   Warna pembuka DIUKUR dari hasil render (Chrome headless)
   pada 1440 / 1100 / 768 / 375 px, dengan wash sepia milik
   .more-us-section::after ikut terukur:

     baris TERAKHIR parchment + wash = rgb(195, 177, 156)
     (rentang antar lebar hanya R 194–196, G 175–179,
      B 149–160 — jauh di bawah ambang pita Mach)

   Versi lama memakai wash sepia yang DICERMINKAN ke sisi
   scene (rgba 102,84,68,.30 di kedua tepi). Cara itu hanya
   menyamakan kecerahan, TIDAK suhu warna — hasil ukurnya
   masih lompatan -19 / +10 / +39 (R/G/B) tepat di sambungan
   dan tetap terbaca sebagai garis potong. Gradien di bawah
   menutup lompatan itu: baris pertama scene = warna yang
   sama persis dengan baris terakhir parchment, jadi selisih
   di seam <= 2 di semua lebar layar.

   Gradien dipendekkan agar parchment tidak terlalu jauh masuk
   ke area heading RSVP, khususnya di sekitar kicker.

   Sengaja TIDAK ikut parallax: tugasnya menutup sambungan,
   bukan bergerak.
   --------------------------------------------------------- */

.rsvp-scene__bridge {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  z-index: 1;

  height: clamp(125px, 16vh, 180px);

  pointer-events: none;

  background: linear-gradient(
    180deg,
    /* 1. Baris pertama = baris terakhir parchment (lihat catatan). */
    rgb(195, 177, 156) 0%,
    /* 2–3. Masih hangat, alpha turun perlahan: kertas meleleh. */
    rgba(203, 189, 170, 0.95) 9%,
    rgba(209, 198, 185, 0.86) 20%,
    /* 4–5. Ivory netral, mulai mendingin. */
    rgba(212, 204, 196, 0.72) 33%,
    rgba(209, 205, 202, 0.55) 47%,
    /* 6–8. Ivory → pale blue. Warna tiap stop dijaga mendekati
       langit pada kedalaman itu, sehingga saat alpha habis
       gradasinya menyatu tanpa "lompat" di ujung. */
    rgba(199, 203, 210, 0.38) 61%,
    rgba(187, 199, 215, 0.23) 75%,
    rgba(176, 197, 225, 0.11) 88%,
    rgba(170, 197, 236, 0) 100%
  );
}

/* 1) Langit dasar. Bleed atas-bawah (12%) supaya parallax vertikal tidak
      pernah memperlihatkan tepi kotak: pada scene terkecil (mobile, tinggi
      ~1500px) 12% = ~180px, jauh di atas batas parallax 70px. */
.rsvp-scene__base {
  position: absolute;
  inset: -12% 0;

  background-image: url("../images/rsvp-base.png");
  background-image: -webkit-image-set(
    url("../images/rsvp-base.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/rsvp-base.webp") type("image/webp")
  );
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 2) Awan transparan. Kotak luar dipakai parallax vertikal (JS), anak
      dalam dipakai animasi drift horizontal (CSS) — supaya keduanya
      tidak saling menimpa. Bleed 12% mengikuti basis yang sama; awan punya
      batas parallax terbesar (110px) sehingga ini yang paling butuh margin. */
.rsvp-scene__cloud {
  position: absolute;
  inset: -12% 0;
}

.rsvp-scene__cloud-drift {
  position: absolute;
  /* Bleed kiri-kanan: drift ±1,4% tetap berada di dalam kotak ini. */
  inset: 0 -7%;

  background-image: url("../images/rsvp-cloud.png");
  background-image: -webkit-image-set(
    url("../images/rsvp-cloud.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/rsvp-cloud.webp") type("image/webp")
  );
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

/* 3) Kabut ivory. Langit cukup biru pekat di kepala section sementara
      heading memakai cokelat hangat; tanpa kabut kontrasnya kurang.
      Paling pekat di atas (di balik "See You There"), menipis di tengah
      tempat kartu parchment berdiri, lalu mengangkat sedikit di dasar
      supaya judul "Ucapan & Doa" tetap terbaca. */
.rsvp-scene__veil {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(255, 251, 244, 0.7) 0%,
    rgba(255, 251, 244, 0.44) 11%,
    rgba(255, 251, 244, 0.18) 25%,
    rgba(255, 251, 244, 0.05) 41%,
    rgba(255, 251, 244, 0.04) 55%,
    rgba(255, 251, 244, 0.14) 69%,
    rgba(255, 251, 244, 0.3) 83%,
    rgba(255, 251, 244, 0.46) 100%
  );
}

/* Daun terpisah memakai satu PNG master; posisinya tetap di lapisan latar
   sehingga konten RSVP dan kartu ucapan selalu berada di depannya. */
.rsvp-scene__leaf {
  position: absolute;
  z-index: 1;
  display: block;
  width: var(--leaf-size, 48px);
  height: auto;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--leaf-rotation, 0deg));
  animation: rsvpLeafDrift var(--leaf-duration, 22s) ease-in-out var(--leaf-delay, 0s) infinite alternate;
}

.rsvp-scene__leaf--left-upper {
  top: 24%;
  left: 3%;
  --leaf-size: clamp(34px, 4vw, 58px);
  --leaf-rotation: -28deg;
  --leaf-duration: 5s;
  --leaf-delay: -7s;
}

.rsvp-scene__leaf--left-middle {
  top: 40%;
  left: 9%;
  --leaf-size: clamp(28px, 3vw, 42px);
  --leaf-rotation: 16deg;
  --leaf-duration: 7s;
  --leaf-delay: -15s;
}

.rsvp-scene__leaf--left-lower {
  top: 65%;
  left: 4%;
  --leaf-size: clamp(38px, 4.5vw, 64px);
  --leaf-rotation: -12deg;
  --leaf-duration: 6s;
  --leaf-delay: -11s;
}

.rsvp-scene__leaf--left-bottom {
  top: 83%;
  left: 13%;
  --leaf-size: clamp(26px, 2.7vw, 38px);
  --leaf-rotation: 34deg;
  --leaf-duration: 8s;
  --leaf-delay: -19s;
}

.rsvp-scene__leaf--right-upper {
  top: 29%;
  right: 5%;
  --leaf-size: clamp(27px, 3vw, 42px);
  --leaf-rotation: 27deg;
  --leaf-duration: 6s;
  --leaf-delay: -5s;
}

.rsvp-scene__leaf--right-middle {
  top: 47%;
  right: 11%;
  --leaf-size: clamp(36px, 4.2vw, 60px);
  --leaf-rotation: -22deg;
  --leaf-duration: 5s;
  --leaf-delay: -13s;
}

.rsvp-scene__leaf--right-lower {
  top: 63%;
  right: 3%;
  --leaf-size: clamp(25px, 2.8vw, 40px);
  --leaf-rotation: 8deg;
  --leaf-duration: 7s;
  --leaf-delay: -17s;
}

.rsvp-scene__leaf--right-bottom {
  top: 78%;
  right: 13%;
  --leaf-size: clamp(32px, 3.6vw, 52px);
  --leaf-rotation: 13deg;
  --leaf-duration: 5s;
  --leaf-delay: -9s;
}

.rsvp-scene__leaf--center-upper {
  top: -8px;
  left: calc(50% - 82px);
  --leaf-size: clamp(22px, 2.1vw, 30px);
  --leaf-rotation: -38deg;
  --leaf-duration: 8s;
  --leaf-delay: -21s;
}

.rsvp-scene__leaf--center-lower {
  top: -8px;
  left: calc(50% + 50px);
  --leaf-size: clamp(22px, 2.4vw, 34px);
  --leaf-rotation: 24deg;
  --leaf-duration: 4.5s;
  --leaf-delay: -3s;
}

@keyframes rsvpLeafDrift {
  from { transform: translate3d(-5px, 2px, 0) rotate(calc(var(--leaf-rotation, 0deg) - 3.5deg)); }
  to { transform: translate3d(9px, -10px, 0) rotate(calc(var(--leaf-rotation, 0deg) + 3.5deg)); }
}

/* 4) Dahan kiri & kanan. Kanvas asli 1920x1080 dengan ornamen menempel
      di sudut atasnya, jadi kotak dibuat ber-rasio sama + `cover` —
      posisi relatif dahan ikut terjaga di semua lebar layar. */
.rsvp-scene__branch {
  position: absolute;
  top: clamp(-104px, -7vw, -28px);
  z-index: 0;
  width: min(62%, 820px);
  aspect-ratio: 1920 / 1080;

  background-repeat: no-repeat;
  background-size: cover;
}

.rsvp-scene__branch--left {
  left: 0;
}

.rsvp-scene__branch--left::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/rsvp-right.webp");
  background-repeat: no-repeat;
  background-size: cover;
  transform: scaleX(-1);
}

.rsvp-scene__branch--right {
  right: 0;
  background-image: url("../images/rsvp-right.webp");
  background-image: -webkit-image-set(
    url("../images/rsvp-right.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/rsvp-right.webp") type("image/webp")
  );
}

.rsvp-scene .invitation-wishes > .container {
  position: relative;
  z-index: 1;
}

.rsvp-wishes-connector {
  position: absolute;
  top: -24px;
  left: 50%;
  z-index: 1;
  width: 1px;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(150, 112, 72, 0.5) 18%,
    rgba(150, 112, 72, 0.5) 82%,
    transparent
  );
}

.rsvp-wishes-connector span {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(126, 91, 54, 0.82);
  font-size: 13px;
  line-height: 1;
  transform: translate(-50%, -50%);
}

/* Satu foreground landscape transparan menutup dasar scene. Lebar gambar
   mengikuti viewport; tinggi tetap mengikuti rasio asli 2:3. */
.rsvp-scene__gift-landscape {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.rsvp-scene__gift-landscape img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------
   Reveal scene — hanya aktif saat JavaScript tersedia (.js dari
   Modernizr), jadi tanpa JS semua lapisan tampil normal tanpa
   menunggu animasi.
   --------------------------------------------------------- */

.js .rsvp-scene__base,
.js .rsvp-scene__cloud,
.js .rsvp-scene__branch {
  opacity: 0;
}

.js .rsvp-scene__cloud {
  transform: translate3d(0, 38px, 0);
}

.js .rsvp-scene__branch--left {
  transform: translate3d(-52px, -28px, 0) rotate(-1.4deg);
}

.js .rsvp-scene__branch--right {
  transform: translate3d(52px, -28px, 0) rotate(1.4deg);
}

.js .rsvp-scene.is-revealed .rsvp-scene__base {
  animation: rsvpSceneBaseIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .rsvp-scene.is-revealed .rsvp-scene__cloud {
  animation: rsvpSceneCloudIn 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.js .rsvp-scene.is-revealed .rsvp-scene__branch--left {
  animation: rsvpSceneBranchLeftIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.js .rsvp-scene.is-revealed .rsvp-scene__branch--right {
  animation: rsvpSceneBranchRightIn 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

/* Drift awan perlahan, tetapi tetap terlihat tanpa menggeser layer ke tepi. */
.js .rsvp-scene.is-revealed .rsvp-scene__cloud-drift {
  animation: rsvpSceneCloudDrift 20s ease-in-out 1s infinite alternate;
}

@keyframes rsvpSceneBaseIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes rsvpSceneCloudIn {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes rsvpSceneBranchLeftIn {
  from { opacity: 0; transform: translate3d(-52px, -28px, 0) rotate(-1.4deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes rsvpSceneBranchRightIn {
  from { opacity: 0; transform: translate3d(52px, -28px, 0) rotate(1.4deg); }
  to { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
}

@keyframes rsvpSceneCloudDrift {
  from { transform: translate3d(-2.5%, 0, 0); }
  to { transform: translate3d(2.5%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .rsvp-scene__leaf {
    animation: none;
  }

  .js .rsvp-scene__base,
  .js .rsvp-scene__cloud,
  .js .rsvp-scene__branch,
  .js .rsvp-scene.is-revealed .rsvp-scene__base,
  .js .rsvp-scene.is-revealed .rsvp-scene__cloud,
  .js .rsvp-scene.is-revealed .rsvp-scene__branch--left,
  .js .rsvp-scene.is-revealed .rsvp-scene__branch--right,
  .js .rsvp-scene.is-revealed .rsvp-scene__cloud-drift {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Jaring pengaman kalau parallax sempat terpasang; initRsvpScene()
     sendiri tidak memasang listener scroll ketika reduced-motion. */
  .rsvp-scene [data-scene-depth] {
    translate: none !important;
  }
}

/* ---------------------------------------------------------
   Komposisi mobile
   --------------------------------------------------------- */
@media screen and (max-width: 768px) {
  /* Jembatan parchment → langit dibuat lebih ringkas agar tidak
     menyentuh area kicker RSVP. */
  .rsvp-scene__bridge {
    height: clamp(120px, 16vh, 165px);
  }

  /* Dahan membingkai heading RSVP dari sisi luar tanpa menutupi judul. */
  .rsvp-scene__branch {
    top: clamp(-62px, -8vw, -30px);
    width: min(78%, 520px);
  }

  .rsvp-scene__leaf {
    --leaf-size: clamp(24px, 7vw, 38px);
  }

  .rsvp-wishes-connector {
    top: -16px;
    height: 32px;
  }

  .rsvp-scene #fh5co-started {
    padding-bottom: 1em;
  }

  .rsvp-scene #fh5co-testimonial {
    padding-top: 1em;
    padding-bottom: clamp(65px, 12vw, 90px);
  }

  .rsvp-scene .invitation-gift {
    padding-top: 2.5em;
  }
}

@media screen and (max-width: 480px) {
  /* Pada layar sempit, transisi dipersingkat lagi supaya kicker tetap
     berada di area langit yang bersih. */
  .rsvp-scene__bridge {
    height: clamp(115px, 15vh, 150px);
  }

  .rsvp-scene__branch {
    top: clamp(-62px, -8vw, -30px);
    width: 94%;
  }

  .rsvp-scene__leaf--left-upper,
  .rsvp-scene__leaf--left-middle,
  .rsvp-scene__leaf--left-lower,
  .rsvp-scene__leaf--left-bottom {
    left: 0;
  }

  .rsvp-scene__leaf--right-upper,
  .rsvp-scene__leaf--right-middle,
  .rsvp-scene__leaf--right-lower,
  .rsvp-scene__leaf--right-bottom {
    right: 0;
  }

  .rsvp-scene__leaf--center-upper,
  .rsvp-scene__leaf--center-lower {
    top: -6px;
    --leaf-size: 22px;
  }

  .rsvp-scene__leaf--center-upper {
    left: calc(50% - 62px);
  }

  .rsvp-scene__leaf--center-lower {
    left: calc(50% + 40px);
  }

  .rsvp-scene #fh5co-testimonial {
    padding-bottom: 38px;
  }

  .rsvp-gift-connector {
    bottom: -16px;
  }

  .rsvp-scene .invitation-gift {
    padding-top: 2.2em;
  }
}

.invitation-counter .feature-center {
  background: rgba(255, 251, 248, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  padding: 30px 15px;
}

.invitation-card {
  background: rgba(255, 252, 249, 0.96);
  border-radius: 24px;
  padding: 40px 30px;
  box-shadow: 0 20px 60px rgba(59, 77, 104, 0.12);
}

.rsvp-form label {
  display: block;
  margin-bottom: 6px;
  color: #6d5545;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rsvp-form .form-group {
  margin-bottom: 16px;
}

.field-hint {
  display: block;
  margin-top: 6px;
  color: #9a8069;
  font-size: 13px;
}

.rsvp-feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.rsvp-feedback-modal[hidden] {
  display: none !important;
}

.rsvp-feedback-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(21, 16, 14, 0.5);
  backdrop-filter: blur(5px);
}

.rsvp-feedback-dialog {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 36px 28px 30px;
  text-align: center;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.98), rgba(249, 238, 222, 0.96));
  border: 1px solid rgba(176, 128, 88, 0.4);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(64, 44, 26, 0.3);
}

.rsvp-feedback-dialog h3 {
  margin-bottom: 10px;
  color: #173b72;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
}

.rsvp-feedback-dialog p {
  margin-bottom: 22px;
  color: #6d6257;
}

.rsvp-feedback-dialog .btn-default {
  border: 1px solid rgba(126, 91, 54, 0.42) !important;
  color: #fffaf1 !important;
  background: rgba(126, 110, 78, 0.82);
  border-radius: 10px;
  font-family: "Cinzel", serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(86, 60, 35, 0.06);
}

.rsvp-feedback-dialog .btn-default:hover,
.rsvp-feedback-dialog .btn-default:focus {
  background: rgba(98, 88, 63, 0.92);
  border-color: rgba(126, 91, 54, 0.62) !important;
  box-shadow: 0 7px 18px rgba(86, 60, 35, 0.10);
}

.rsvp-feedback-icon {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

.rsvp-feedback-icon.is-success {
  background: rgba(250, 240, 222, 0.98);
  color: #a17b3f;
}

.rsvp-feedback-icon.is-error {
  background: rgba(250, 232, 224, 0.98);
  color: #9a4a32;
}

.rsvp-status {
  display: none;
}

/* ---------------------------------------------------------
   RSVP — heading, kartu, tombol
   Memakai palet parchment / navy / muted gold yang sama dengan
   Prologue, Wedding Du'a, dan A Little More Us.

   Catatan: benang penyambung vertikal (.rsvp-connector) DIHAPUS.
   Garis vertikal di tengah section membuat header RSVP terasa
   seperti dua kolom dan tidak diperlukan untuk layout.
   --------------------------------------------------------- */

/* Heading RSVP: kolomnya sendiri sudah dipusatkan oleh Bootstrap grid
   (col-md-8 col-md-offset-2). Jangan set max-width / margin:auto di sini
   karena kolom Bootstrap memakai float dan justru akan menggeser ke kiri —
   push centering cukup lewat text-align + max-width pada paragraf dalam. */
.rsvp-heading {
  margin-bottom: clamp(16px, 2.2vw, 26px);
}

.invitation-rsvp .rsvp-kicker {
  margin-bottom: 7px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(20, 25, 20, 0.58);
}

.invitation-rsvp .rsvp-kicker::before,
.invitation-rsvp .rsvp-kicker::after {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.82));
}

/* "See You There" memakai tipografi dan skala yang sama dengan heading
   section lain, bukan font dekoratif yang terlalu dominan. */
.invitation-rsvp .rsvp-title {
  margin: 0 0 7px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4.2vw, 48px);
  font-style: italic;
  line-height: 1.08;
  color: #fff;
  text-shadow: 0 2px 8px rgba(20, 25, 20, 0.68);
}

@media screen and (min-width: 769px) {
  .invitation-rsvp .rsvp-kicker {
    text-shadow: 0 1px 5px rgba(20, 25, 20, 0.92);
  }

  .invitation-rsvp .rsvp-title {
    text-shadow: 0 2px 8px rgba(20, 25, 20, 0.68);
  }
}

.invitation-rsvp .rsvp-intro {
  max-width: 480px;
  margin: 0 auto;
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  font-style: normal;
  line-height: 1.8;
  color: #fff;
  text-shadow:
    0 1px 3px rgba(20, 25, 20, 0.56),
    0 2px 8px rgba(20, 25, 20, 0.34);
}

.rsvp-card.invitation-verse-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 20px 0 0 -19px rgba(166, 123, 100, 0.62),
    inset -20px 0 0 -19px rgba(166, 123, 100, 0.62);
  /* Padding asimetris: atas cukup untuk ornamen sudut + kicker, bawah lebih
     rapat supaya tidak ada whitespace kosong berlebihan di dasar kartu. */
  padding: clamp(46px, 4.4vw, 58px) clamp(24px, 4vw, 54px) clamp(30px, 3vw, 40px);
}

/* Textarea RSVP sengaja lebih rendah dari default .textarea-control supaya
   kartu tidak terlalu tinggi. */
.invitation-rsvp .textarea-control {
  min-height: 108px;
}

/* Tombol "Kirim RSVP" mengikuti warna tombol navigasi peta. Loading state
   ("Mengirim...") dan disabled tetap memakai perilaku JS yang sudah ada. */
.invitation-rsvp .rsvp-actions {
  margin-top: 4px;
}

.invitation-rsvp .rsvp-actions .btn {
  min-width: 200px;
  padding: 12px 38px;
  border-radius: 12px;
}

.invitation-rsvp .rsvp-actions .btn-default {
  border: 1px solid rgba(126, 91, 54, 0.42) !important;
  color: #fffaf1 !important;
  background: rgba(126, 110, 78, 0.82);
  box-shadow: 0 4px 14px rgba(86, 60, 35, 0.06);
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.invitation-rsvp .rsvp-actions .btn-default:hover,
.invitation-rsvp .rsvp-actions .btn-default:focus {
  background: rgba(98, 88, 63, 0.92);
  border-color: rgba(126, 91, 54, 0.62) !important;
  box-shadow: 0 7px 18px rgba(86, 60, 35, 0.10);
  filter: saturate(1.05);
}

.invitation-rsvp .rsvp-actions .btn[disabled] {
  opacity: 0.72;
}

.invitation-rsvp .form-control {
  background: rgba(255, 253, 249, 0.96);
  border: 1px solid rgba(150, 112, 72, 0.35);
  border-radius: 12px;
  color: #3f2f2a !important;
  font-weight: 400;
  box-shadow: 0 8px 22px rgba(94, 63, 34, 0.08);
}

.invitation-rsvp .form-control::placeholder {
  color: #929292 !important;
  -webkit-text-fill-color: #929292;
  opacity: 1;
}

.invitation-rsvp .form-control::-webkit-input-placeholder {
  color: #929292 !important;
  -webkit-text-fill-color: #929292;
  opacity: 1;
}

.invitation-rsvp .form-control:-moz-placeholder,
.invitation-rsvp .form-control::-moz-placeholder {
  color: #929292 !important;
  opacity: 1;
}

.invitation-rsvp .form-control:-ms-input-placeholder {
  color: #929292 !important;
}

.invitation-rsvp select.form-control {
  color: #3f2f2a !important;
}

.invitation-rsvp select.form-control:invalid {
  color: #929292 !important;
  -webkit-text-fill-color: #929292;
}

.invitation-rsvp input.form-control,
.invitation-rsvp textarea.form-control,
.invitation-rsvp select.form-control {
  color: #3f2f2a !important;
  -webkit-text-fill-color: #3f2f2a;
}

.invitation-rsvp .form-control:focus,
.invitation-rsvp .form-control:active {
  color: #3f2f2a !important;
  background: #fffdf9;
  border-color: rgba(161, 123, 63, 0.6);
  box-shadow: 0 0 0 4px rgba(161, 123, 63, 0.14);
}

.invitation-rsvp .form-control option {
  color: #3f2f2a;
}

.invitation-rsvp .form-control[readonly] {
  background: #f8f1ec;
  border-color: rgba(183, 123, 103, 0.36);
  cursor: default;
}

.invitation-rsvp .btn[disabled] {
  opacity: 0.82;
  cursor: wait;
  filter: grayscale(0.08);
}

.invitation-gift {
  position: relative;
  isolation: isolate;
  padding-top: 3em;
  padding-bottom: 4.6em;
  background-color: transparent;
}

.rsvp-scene > #fh5co-footer {
  position: relative;
  z-index: 1;
  background: transparent;
}

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

.invitation-gift .fh5co-heading span {
  display: inline-block;
  margin-top: 0;
}

.invitation-gift .fh5co-heading p {
  margin-bottom: 6px;
}

.invitation-gift .fh5co-heading {
  margin-bottom: 28px;
}

.invitation-gift .fh5co-heading .gift-heading__kicker {
  display: inline-flex;
  margin-bottom: 7px;
  color: #fff;
  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
  text-shadow: 0 1px 5px rgba(20, 25, 20, 0.78);
}

.invitation-gift .gift-heading__kicker::before,
.invitation-gift .gift-heading__kicker::after {
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.82));
}

.invitation-gift .fh5co-heading .gift-heading__title {
  margin: 0;
  color: #fff;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 4.2vw, 48px);
  font-style: italic;
  font-weight: 400;
  line-height: 1.08;
  text-shadow:
    0 2px 5px rgba(20, 25, 20, 0.72),
    0 5px 12px rgba(20, 25, 20, 0.42);
}

@media screen and (min-width: 769px) {
  .invitation-gift .fh5co-heading .gift-heading__kicker {
    text-shadow: 0 1px 5px rgba(20, 25, 20, 0.78);
  }

  .invitation-gift .fh5co-heading .gift-heading__title {
    text-shadow:
      0 2px 5px rgba(20, 25, 20, 0.72),
      0 5px 12px rgba(20, 25, 20, 0.42);
  }
}

.textarea-control {
  min-height: 140px;
  resize: vertical;
  padding-top: 14px;
}

.invitation-gift .gift-card.invitation-verse-card {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid rgba(176, 128, 88, 0.46);
  background:
    linear-gradient(to bottom, transparent, rgba(172, 126, 84, 0.34), rgba(198, 158, 112, 0.6), rgba(172, 126, 84, 0.34), transparent) left 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(to bottom, transparent, rgba(172, 126, 84, 0.34), rgba(198, 158, 112, 0.6), rgba(172, 126, 84, 0.34), transparent) right 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(247, 239, 228, 0.9));
  box-shadow:
    0 30px 90px rgba(94, 63, 34, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 20px 0 0 -19px rgba(176, 128, 88, 0.55),
    inset -20px 0 0 -19px rgba(176, 128, 88, 0.55);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  margin-top: 0;
}

.invitation-gift .row.animate-box + .row.animate-box {
  margin-top: 0;
}

.gift-intro {
  max-width: 500px;
  margin: 0 auto 8px;
  color: #4f5f56;
  font-family: "Lora", Georgia, serif;
}

.gift-message {
  max-width: 650px;
  margin: 0 auto 10px;
  color: #4f5f56;
  font-family: "Lora", Georgia, serif;
  font-size: clamp(14px, 1.45vw, 16px);
  line-height: 1.8;
}

.gift-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(100%, 220px);
  margin: 0 auto 10px;
  color: rgba(150, 112, 72, 0.82);
}

.gift-divider::before,
.gift-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(150, 112, 72, 0.48));
}

.gift-divider::after {
  transform: scaleX(-1);
}

.gift-divider span {
  font-size: 12px;
  line-height: 1;
}

.invitation-gift .gift-toggle.btn {
  min-width: 200px;
  margin-top: 0;
  padding: 12px 38px !important;
  border: 1px solid rgba(126, 91, 54, 0.42) !important;
  border-radius: 12px;
  color: #fffaf1 !important;
  background: rgba(126, 110, 78, 0.82);
  box-shadow: 0 4px 14px rgba(86, 60, 35, 0.06);
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease, background 0.25s ease;
}

.invitation-gift .gift-toggle.btn:hover,
.invitation-gift .gift-toggle.btn:focus {
  transform: translateY(-2px);
  border-color: rgba(126, 91, 54, 0.62) !important;
  background: rgba(98, 88, 63, 0.92);
  box-shadow: 0 7px 18px rgba(86, 60, 35, 0.10);
  filter: saturate(1.05);
}

.gift-bank {
  margin-bottom: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7f95b8;
}

.gift-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.gift-modal[hidden] {
  display: none !important;
}

.gift-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 27, 29, 0.52);
  backdrop-filter: blur(5px);
}

.gift-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  font-family: "Lora", Georgia, serif;
  width: min(100%, 620px);
  max-height: 85vh;
  max-height: 85dvh;
  overflow: hidden;
  border: 1px solid rgba(176, 128, 88, 0.46);
  border-radius: 16px;
  background:
    linear-gradient(to bottom, transparent, rgba(172, 126, 84, 0.34), rgba(198, 158, 112, 0.6), rgba(172, 126, 84, 0.34), transparent) left 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(to bottom, transparent, rgba(172, 126, 84, 0.34), rgba(198, 158, 112, 0.6), rgba(172, 126, 84, 0.34), transparent) right 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(247, 239, 228, 0.97));
  box-shadow:
    0 30px 80px rgba(42, 37, 31, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 20px 0 0 -19px rgba(176, 128, 88, 0.55),
    inset -20px 0 0 -19px rgba(176, 128, 88, 0.55);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

.gift-modal__header {
  position: relative;
  flex: 0 0 auto;
  padding: 20px 60px 14px;
  border-bottom: 1px solid rgba(166, 123, 100, 0.2);
  text-align: center;
}

.gift-modal__dialog .gift-modal__title {
  margin: 0;
  color: #624b37;
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 400;
  font-style: italic;
  text-shadow: 0 2px 12px rgba(86, 60, 35, 0.08);
}

.gift-modal__close {
  position: absolute;
  top: 14px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(176, 128, 88, 0.1);
  color: #624b37;
  font-size: 0;
  cursor: pointer;
}

.gift-modal__close::before,
.gift-modal__close::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.gift-modal__close::before {
  transform: rotate(45deg);
}

.gift-modal__close::after {
  transform: rotate(-45deg);
}

.gift-modal__close:hover,
.gift-modal__close:focus-visible {
  background: rgba(176, 128, 88, 0.18);
  outline: 2px solid rgba(176, 128, 88, 0.42);
  outline-offset: 2px;
}

.gift-modal__content {
  overflow-y: auto;
  scrollbar-width: none;
  overscroll-behavior: contain;
  padding: 18px 34px 22px;
}

.gift-modal__content::-webkit-scrollbar {
  display: none;
}

.gift-bank-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.gift-bank-card {
  min-width: 0;
  padding: 16px 14px;
  border: 1px solid rgba(176, 128, 88, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.6);
}

.gift-bank__logo {
  display: block;
  width: auto;
  max-width: min(100%, 148px);
  height: 30px;
  margin-bottom: 8px;
  object-fit: contain;
  object-position: left center;
}

.gift-account__owner {
  margin-bottom: 8px;
  color: #594b40;
  font-size: 14px;
}

.gift-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gift-account__number {
  min-width: 0;
  color: #2f423f;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

.gift-copy {
  flex: 0 0 auto;
  min-width: 66px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid rgba(176, 128, 88, 0.36);
  border-radius: 10px;
  background: rgba(247, 239, 228, 0.76);
  color: #594b40;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.gift-copy:hover,
.gift-copy:focus-visible {
  border-color: rgba(176, 128, 88, 0.64);
  background: #f7efe4;
  outline: 2px solid rgba(176, 128, 88, 0.28);
  outline-offset: 2px;
}

.gift-modal__send {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(166, 123, 100, 0.24);
  text-align: center;
}

.gift-modal__send h3 {
  margin: 0 0 6px;
  color: #624b37;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 25px;
  font-weight: 500;
}

.gift-modal__send p {
  margin: 0 auto 12px;
  color: #4f5f56;
  font-size: 14px;
  line-height: 1.65;
}

.gift-whatsapp-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.gift-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid #1da851;
  border-radius: 10px;
  background: #25d366;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.gift-whatsapp__icon {
  display: block;
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
  fill: currentColor;
}

.gift-whatsapp:hover,
.gift-whatsapp:focus-visible {
  border-color: #128c46;
  background: #1ebe5d;
  color: #fff !important;
  text-decoration: none;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.2);
  outline: 2px solid rgba(18, 140, 70, 0.28);
  outline-offset: 2px;
}

.gift-copy-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .gift-modal {
    padding: 16px;
  }

  .gift-modal__dialog {
    width: min(100%, 620px);
    max-height: 85vh;
    max-height: 85dvh;
  }

  .gift-modal__content {
    padding: 16px 28px;
  }

  .gift-whatsapp {
    flex: 1 1 210px;
  }
}

@media screen and (max-width: 480px) {
  .gift-desktop-break {
    display: none;
  }

  .gift-card {
    padding: 26px 18px;
  }

  .invitation-gift .gift-toggle.btn {
    width: 100%;
    min-width: 0;
  }

  .gift-modal {
    padding: 12px;
  }

  .gift-modal__header {
    padding: 17px 56px 12px;
  }

  .gift-modal__title {
    font-size: 28px;
  }

  .gift-modal__close {
    top: 9px;
    right: 10px;
  }

  .gift-modal__content {
    padding: 14px 28px;
  }

  .gift-bank-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .gift-bank-card {
    padding: 12px;
  }

  .gift-bank__logo {
    height: 26px;
    margin-bottom: 5px;
  }

  .gift-account__owner {
    margin-bottom: 5px;
  }

  .gift-modal__send {
    margin-top: 14px;
    padding-top: 12px;
  }

  .gift-modal__send h3 {
    font-size: 23px;
  }

  .gift-modal__send p {
    margin-bottom: 10px;
    font-size: 13px;
  }

  .gift-whatsapp-actions {
    flex-direction: column;
  }

  .gift-whatsapp {
    width: 100%;
    flex-basis: auto;
    min-height: 42px;
    padding: 8px 12px;
  }
}

.rsvp-note {
  margin-top: 15px;
  font-size: 14px;
  color: #72849a;
}

.simply-countdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.2em;
}

.simply-countdown > .simply-section {
  margin: 0;
  width: 112px;
  height: 112px;
  background: rgba(255, 248, 243, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 18px 35px rgba(34, 25, 20, 0.16);
  animation: none;
  border-radius: 22px;
}

.simply-countdown > .simply-section > div {
  width: 112px;
  height: 112px;
}

.simply-countdown > .simply-section .simply-amount {
  font-size: 34px;
  font-weight: 600;
}

.simply-countdown > .simply-section .simply-word {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.78);
}

/* Bungkus luar: kartu parchment yang sama dengan RSVP/Prologue/Du'a,
   plus ornamen sudut .prologue-corner.

   Badan kartu (background/border-radius/shadow) dulu tidak ditulis di
   sini karena kedua section memakai latar parchment, sehingga garis
   rangka .invitation-verse-card:before/:after dan ornamen sudut sudah
   cukup untuk membentuk "kartu". Sejak kedua section dibungkus
   `.rsvp-scene` dan melayang di atas langit, shell ini perlu badan
   parchment sendiri supaya tetap terbaca sebagai kartu — persis seperti
   .rsvp-card di section sebelumnya. */
.wishes-shell.invitation-verse-card {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(38px, 4.4vw, 50px) clamp(22px, 3.6vw, 46px);
  border: 1px solid rgba(166, 123, 100, 0.5);
  border-radius: 16px;
  background:
    linear-gradient(to bottom, transparent, rgba(150, 111, 83, 0.42), rgba(188, 153, 118, 0.7), rgba(150, 111, 83, 0.42), transparent) left 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(to bottom, transparent, rgba(150, 111, 83, 0.42), rgba(188, 153, 118, 0.7), rgba(150, 111, 83, 0.42), transparent) right 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(247, 239, 228, 0.9));
  box-shadow:
    0 26px 80px rgba(68, 54, 42, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    inset 20px 0 0 -19px rgba(166, 123, 100, 0.62),
    inset -20px 0 0 -19px rgba(166, 123, 100, 0.62);
  backdrop-filter: blur(1px);
}

.js .wishes-shell {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .wishes-shell.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js .wishes-shell,
  .js .wishes-shell.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .wishes-list .wish-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Scroll area internal — tinggi dibatasi supaya halaman tidak memanjang. */
.wishes-list {
  max-width: none;
  margin: 0;
  padding: 2px 10px 2px 2px;
  max-height: 440px;
  overflow-y: auto;
  overscroll-behavior: contain;
  position: relative;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(150, 112, 72, 0.42) transparent;
}

.wishes-list:before,
.wishes-list:after {
  content: none;
}

/* Scrollbar tipis & hangat — bukan UI dashboard. */
.wishes-list::-webkit-scrollbar {
  width: 8px;
}

.wishes-list::-webkit-scrollbar-track {
  background: transparent;
}

.wishes-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(176, 128, 88, 0.5), rgba(150, 112, 72, 0.5));
  background-clip: padding-box;
}

/* Tombol "Lihat Semua Ucapan" / "Sembunyikan Ucapan". */
.wishes-actions {
  margin-top: 22px;
}

.wishes-actions .wishes-toggle {
  border: 1px solid rgba(150, 112, 72, 0.55) !important;
  color: #7a5c34 !important;
  background: rgba(255, 253, 248, 0.7);
  border-radius: 999px;
  padding: 11px 32px;
  font-family: "Cinzel", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.wishes-actions .wishes-toggle:hover,
.wishes-actions .wishes-toggle:focus {
  background: #fffdf8;
  box-shadow: 0 12px 26px rgba(94, 63, 34, 0.12);
  transform: translateY(-2px);
}

/* Bootstrap memberi .btn display:inline-block yang menang atas [hidden]
   bawaan browser — jadi state tersembunyi dinyatakan eksplisit di sini. */
.wishes-actions .wishes-toggle[hidden] {
  display: none !important;
}

.wish-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(176, 128, 88, 0.14);
  text-align: left;
  position: relative;
  opacity: 0;
  transform: translateY(18px);
  animation: wishFadeUp 0.7s ease forwards;
}

.wish-item:first-child {
  padding-top: 0;
}

.wish-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.wish-item--empty {
  justify-content: center;
  padding: 22px 0 0;
}

.wish-item--empty .wish-item__body {
  text-align: center;
}

.wish-item__avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fdf6ec 0%, #f4e6d2 100%);
  color: #a17b3f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(161, 123, 63, 0.2);
  box-shadow: 0 4px 10px rgba(94, 63, 34, 0.06);
  position: relative;
}

.wish-item__avatar:before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.72);
  pointer-events: none;
}

.wish-item__body {
  min-width: 0;
  flex: 1;
  max-width: 100%;
  padding: 13px 16px;
  border-radius: 14px 14px 14px 6px;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.94) 0%, rgba(252, 245, 235, 0.9) 100%);
  border: 1px solid rgba(176, 128, 88, 0.14);
  box-shadow: 0 8px 20px rgba(94, 63, 34, 0.045);
  position: relative;
  overflow-wrap: anywhere;
}

.wish-item__body:before,
.wish-item__body:after {
  content: "";
  position: absolute;
  top: 18px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
}

.wish-item__body:before {
  border-width: 9px 10px 9px 0;
  border-color: transparent rgba(176, 128, 88, 0.16) transparent transparent;
}

.wish-item__body:after {
  left: -8px;
  border-width: 8px 9px 8px 0;
  border-color: transparent rgba(255, 253, 248, 0.94) transparent transparent;
}

.wish-name {
  display: block;
  margin-bottom: 5px;
  overflow-wrap: anywhere;
  color: #8a6634;
  letter-spacing: 0.04em;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
}

.wish-message {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: #5b5049;
  line-height: 1.7;
  font-size: 14.5px;
}

.timeline-title {
  color: #32465f;
}

.timeline > li > .timeline-badge {
  box-shadow: 0 14px 28px rgba(127, 149, 184, 0.18);
}

@keyframes wishFadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

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

.timeline > li > .timeline-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(60, 41, 34, 0.08);
  border-color: rgba(183, 123, 103, 0.16);
}

.timeline > li > .timeline-panel:before {
  border-left-color: rgba(183, 123, 103, 0.22);
}

.timeline-title {
  color: #2d201c;
}

#fh5co-gallery-list {
  gap: 12px;
}

#fh5co-footer {
  background: #eef1f7;
}

#fh5co-footer small {
  color: #667a92;
}

@media screen and (max-width: 991px) {
  .invitation-nav #fh5co-logo {
    font-size: 30px;
  }

  #fh5co-header .hero-copy h1 {
    font-size: 90px;
  }

  .hero-copy {
    padding: 84px 0 26px;
  }

}

@media screen and (max-width: 768px) {
  .invitation-nav {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .invitation-sound-toggle {
    right: 14px;
    bottom: 70px;
    width: 42px;
    height: 42px;
  }

  .invitation-cover__content {
    padding: 38px 24px 30px;
  }

  .invitation-cover__content h1 {
    font-size: 68px;
  }

  .fh5co-cover,
  .fh5co-cover .display-t,
  .fh5co-cover .display-tc {
    min-height: auto;
  }

  .hero-copy {
    padding: 78px 0 20px;
  }

  #fh5co-header .hero-copy h1 {
    font-size: 64px;
    line-height: 1.05;
  }

  #fh5co-header .hero-copy h2 {
    font-size: 17px;
  }

  .invitation-section {
    padding: 5em 0;
  }

  .invitation-couple,
  .invitation-card {
    padding: 30px 20px;
  }

  .invitation-verse-card {
    padding: 42px 24px;
  }

  .invitation-person-card {
    padding: 20px 16px;
  }

  .verse-arabic {
    font-size: 24px;
    line-height: 1.9;
  }

  .prologue-copy {
    margin-bottom: 28px;
    font-size: 14px;
    line-height: 1.8;
  }

  .verse-translation {
    font-size: 14px;
    line-height: 1.85;
  }

  .simply-countdown > .simply-section {
    width: 88px;
    height: 88px;
  }

  .simply-countdown > .simply-section > div {
    width: 88px;
    height: 88px;
  }

  .simply-countdown > .simply-section .simply-amount {
    font-size: 26px;
  }


  .map-action {
    margin-top: 8px;
  }


  #fh5co-gallery-list li,
  #fh5co-gallery-list li a {
    min-height: 320px;
  }

  .timeline > li > .timeline-panel {
    box-shadow: 0 10px 28px rgba(60, 41, 34, 0.08);
  }

}

@media screen and (max-width: 480px) {
  .invitation-cover {
    padding: 18px;
    align-items: flex-start;
  }

  .invitation-cover__content {
    padding: 34px 20px 26px;
    border-radius: 24px;
  }

  .invitation-cover__content h1 {
    font-size: 54px;
  }

  .invitation-cover__date {
    font-size: 16px;
  }

  .invitation-cover__guest {
    padding: 16px 18px;
  }

  .invitation-cover__guest strong {
    font-size: 15px;
  }

  .invitation-cover__message {
    font-size: 14px;
    line-height: 1.8;
  }

  .invitation-cover__button {
    width: 100%;
    min-width: 0;
  }

  #fh5co-header .hero-copy h1 {
    font-size: 48px;
  }

  .hero-copy {
    padding: 72px 0 12px;
  }

  .hero-message {
    font-size: 15px;
    line-height: 1.8;
  }

  .verse-arabic {
    font-size: 20px;
    line-height: 1.8;
  }

  .invitation-verse-card {
    padding: 38px 20px;
  }

  .invitation-verse-card h2 {
    font-size: 34px;
  }

  .prologue-copy {
    font-size: 14px;
    line-height: 1.8;
  }

  .hero-actions .btn,
  .rsvp-actions .btn,
  .map-action .btn {
    width: 100%;
    margin: 8px 0;
  }

  .map-action {
    margin-top: 2px;
  }

  .simply-countdown {
    gap: 8px;
  }

  .simply-countdown > .simply-section {
    width: 74px;
    height: 74px;
  }

  .simply-countdown > .simply-section > div {
    width: 74px;
    height: 74px;
  }

  .simply-countdown > .simply-section .simply-amount {
    font-size: 22px;
  }

  .simply-countdown > .simply-section .simply-word {
    font-size: 10px;
  }

  .wish-item {
    gap: 12px;
  }

  .wish-item__avatar {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 14px;
  }

  .wishes-list {
    max-height: 360px;
    padding: 2px 8px 2px 2px;
    border-radius: 0;
  }

  .wish-message {
    font-size: 14px;
    line-height: 1.7;
  }

  .couple-half .groom,
  .couple-half .bride {
    height: auto;
    text-align: center;
  }

  .couple-half .groom img,
  .couple-half .bride img {
    width: 112px;
    height: 112px;
  }


  #fh5co-gallery-list li,
  #fh5co-gallery-list li a {
    min-height: 260px;
  }

  #fh5co-gallery-list li a {
    padding: 1.2em;
  }

  #fh5co-gallery-list li a .case-studies-summary h2 {
    font-size: 18px;
  }

  .timeline {
    padding-top: 0;
  }

  .timeline:before,
  ul.timeline:before {
    left: 18px;
    margin-left: 0;
  }

  ul.timeline > li > .timeline-badge {
    left: 0;
    margin-left: 0;
    top: 18px;
    width: 36px;
    height: 36px;
  }

  ul.timeline > li > .timeline-panel {
    width: calc(100% - 60px);
    float: right;
    padding: 22px 18px;
  }

  ul.timeline > li > .timeline-panel:before {
    top: 22px;
  }

  ul.timeline > li > .timeline-panel:after {
    top: 23px;
  }
}

@media screen and (max-width: 768px) {
  #page {
    padding-bottom: 0;
  }

  .gototop {
    left: auto;
    right: 12px;
    bottom: 12px;
    z-index: 9996;
  }

  .gototop a {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 248, 243, 0.94);
    color: #8e6b5e;
    box-shadow: 0 14px 28px rgba(34, 24, 20, 0.14);
    border: 1px solid rgba(183, 123, 103, 0.16);
  }

  .gototop a i {
    height: 46px;
    font-size: 18px;
  }

  /* =========================
    GHIBLI MEADOW COVER
  ========================= */

  .invitation-cover {
    position: fixed;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* VIDEO */

  .invitation-cover__video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    animation:
      slowZoom 18s ease-in-out infinite alternate;
  }

  /* SOFT LIGHT OVERLAY */

  .invitation-cover__backdrop {
    position: absolute;
    inset: 0;

    background:
      linear-gradient(
        to bottom,
        rgba(255,255,255,0.05),
        rgba(255,255,255,0.02),
        rgba(255,248,220,0.16)
      );
  }

  /* CONTENT */

  .invitation-cover__content {
    position: relative;
    z-index: 3;

    max-width: 760px;

    padding: 60px 50px;

    text-align: center;

    border-radius: 36px;

    background:
      rgba(255,255,255,0.10);

    backdrop-filter: blur(10px);

    border:
      1px solid rgba(255,255,255,0.20);

    box-shadow:
      0 10px 40px rgba(0,0,0,0.15);

    animation:
      fadeUp 1.8s ease;
  }

  /* LABEL */

  .invitation-cover__label {
    display: inline-block;

    margin-bottom: 18px;

    letter-spacing: 5px;

    text-transform: uppercase;

    font-size: 12px;

    color: rgba(255,255,255,0.9);
  }

  /* TITLE */

  .invitation-cover h1 {
    margin-bottom: 16px;

    font-size: 82px;

    line-height: 1.1;

    color: #fffdf7;

    text-shadow:
      0 4px 25px rgba(0,0,0,0.20);
  }

  /* DATE */

  .invitation-cover__date {
    margin-bottom: 28px;

    font-size: 18px;

    color: rgba(255,255,255,0.95);
  }

  /* GUEST */

  .invitation-cover__guest {
    margin-bottom: 28px;
  }

  .invitation-cover__guest span {
    display: block;

    margin-bottom: 10px;

    color: rgba(255,255,255,0.9);
  }

  .invitation-cover__guest strong {
    font-size: 28px;

    color: #ffffff;
  }

  /* MESSAGE */

  .invitation-cover__message {
    margin-bottom: 18px;

    line-height: 1.8;

    color: rgba(255,255,255,0.95);
  }

  /* QUOTE */

  .invitation-cover__quote {
    margin-bottom: 36px;

    font-style: italic;

    color: rgba(255,255,255,0.88);
  }

  /* BUTTON */

  .invitation-cover__button {
    padding: 16px 42px;

    border-radius: 999px;

    border: 1px solid rgba(255,255,255,0.25);

    background:
      rgba(255,255,255,0.16);

    color: white;

    backdrop-filter: blur(10px);

    transition: 0.4s ease;

    box-shadow:
      0 8px 25px rgba(0,0,0,0.12);
  }

  .invitation-cover__button:hover {
    transform:
      translateY(-4px)
      scale(1.03);

    background:
      rgba(255,255,255,0.22);
  }

  /* ANIMATION */

  @keyframes slowZoom{
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.08);
    }
  }

  @keyframes fadeUp{
    from {
      opacity: 0;
      transform:
        translateY(30px);
    }

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

  /* MOBILE */

  @media(max-width:768px){

    .invitation-cover__content {
      width: calc(100% - 32px);

      padding: 42px 28px;
    }

    .invitation-cover h1 {
      font-size: 52px;
    }

    .invitation-cover__guest strong {
      font-size: 22px;
    }
  }


}

/* invitation-cover — unified base (video-based design, replaces deprecated sunset-sky-wide image design) */

.invitation-cover {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at top, rgba(255, 248, 238, 0.7), transparent 45%),
    linear-gradient(180deg, #fffaf7 0%, #f8ede7 100%);
}

.invitation-cover.is-visible {
  display: flex;
}

.invitation-cover__video {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  filter: saturate(1.08) contrast(0.94) brightness(1.04);
  animation: none;
  display: block;
  margin: 0;
}

.invitation-cover__backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 238, 178, 0.24), transparent 30%),
    linear-gradient(
      to bottom,
      rgba(43, 73, 69, 0.12),
      rgba(31, 50, 43, 0.28) 45%,
      rgba(30, 28, 20, 0.58)
    );
  pointer-events: none;
}

.invitation-cover__content {
  position: relative;
  z-index: 3;
  width: min(100%, 680px);
  max-height: none;
  overflow: visible;
  padding: clamp(22px, 5vw, 72px);
  text-align: center;
  color: #fff8df;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: 0 4px 18px rgba(22, 24, 17, 0.62);
  animation: none;
}

/* Anime-inspired title reveal: short enough to keep the invitation immediately usable. */
.invitation-cover.is-visible .invitation-cover__content > * {
  opacity: 0;
  transform: translateY(18px);
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > * {
  animation-fill-mode: forwards;
}

.invitation-cover.is-visible .invitation-cover__content > :nth-child(1) {
  letter-spacing: 0.7em;
}

.invitation-cover.is-visible .invitation-cover__content > :nth-child(2) {
  clip-path: none;
  transform: translateY(14px) scale(0.98);
}

.invitation-cover.is-visible .invitation-cover__content > :nth-child(5) {
  clip-path: inset(0 100% 0 0);
  transform: none;
}

.invitation-cover.is-visible .invitation-cover__content > :nth-child(3),
.invitation-cover.is-visible .invitation-cover__content > :nth-child(4) {
  filter: blur(6px);
}

.invitation-cover.is-visible .invitation-cover__content > :nth-child(6) {
  transform: translateY(12px) scale(0.92);
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > :nth-child(1) {
  animation: coverLabelReveal 0.5s ease-out 0.08s forwards;
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > :nth-child(2) {
  animation: coverNameReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > :nth-child(3) {
  animation: coverFocusReveal 0.5s ease-out 0.54s forwards;
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > :nth-child(4) {
  animation: coverFocusReveal 0.5s ease-out 0.66s forwards;
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > :nth-child(5) {
  animation: coverTitleReveal 0.52s ease-out 0.82s forwards;
}

.invitation-cover.is-visible.is-ready .invitation-cover__content > :nth-child(6) {
  animation: coverButtonReveal 0.46s cubic-bezier(0.22, 1, 0.36, 1) 0.64s forwards;
}

.invitation-cover.is-opening .invitation-cover__content > * {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
  letter-spacing: normal;
}

.invitation-cover.is-opening .invitation-cover__content > .invitation-cover__label {
  letter-spacing: var(--cover-label-spacing);
}

@keyframes coverLabelReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
    letter-spacing: 0.7em;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: var(--cover-label-spacing);
  }
}

@keyframes coverTitleReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes coverNameReveal {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes coverFocusReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes coverButtonReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .invitation-cover.is-visible .invitation-cover__content > * {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    letter-spacing: normal;
  }

  .invitation-cover.is-visible .invitation-cover__content > .invitation-cover__label {
    letter-spacing: var(--cover-label-spacing);
  }
}

/* The Day We Begin mengikuti skala judul A Little More Us. Diletakkan di
   akhir stylesheet agar override ukuran Chapter Two pada breakpoint lama
   tidak mengubah keseragaman ini. */
.chapter-two__title {
  font-size: clamp(30px, 3.5vw, 44px);
}

@media screen and (max-width: 768px) {
  .chapter-two__title {
    font-size: clamp(20px, 2.8vw, 30px);
  }
}

.invitation-cover__content:before {
  display: none;
}

.invitation-cover__content:after {
  content: "";
  position: absolute;
  left: 50%;
  top: -22px;
  width: 92px;
  height: 2px;
  border-radius: 999px;
  background: rgba(255, 248, 220, 0.78);
  transform: translateX(-50%);
  box-shadow: 0 10px 26px rgba(255, 244, 192, 0.38);
}

.invitation-cover__label {
  --cover-label-spacing: 0.42em;
  display: inline-block;
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", serif;
  color: rgba(255, 248, 220, 0.88);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: var(--cover-label-spacing);
  text-transform: uppercase;
  text-shadow: 0 3px 14px rgba(22, 24, 17, 0.56);
}

.invitation-cover h1,
.invitation-cover__content h1 {
  margin: 0 0 16px;
  font-family: "Javasoul", "Sacramento", cursive;
  color: #fff6d8;
  font-size: clamp(48px, 7.5vw, 88px);
  line-height: 1.1;
  white-space: nowrap;
  text-shadow:
    0 7px 26px rgba(19, 22, 14, 0.72),
    0 1px 0 rgba(109, 83, 38, 0.5);
}

.invitation-cover__date {
  margin: 0 0 28px;
  color: rgba(255, 246, 216, 0.94);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invitation-cover__guest {
  max-width: 440px;
  margin: 0 auto 24px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.invitation-cover__guest span {
  display: block;
  margin-bottom: 8px;
  font-family: "Cormorant Garamond", serif;
  color: rgba(255, 248, 220, 0.8);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 3px 14px rgba(22, 24, 17, 0.6);
}

.invitation-cover__guest strong {
  display: block;
  font-family: "Work Sans", Arial, sans-serif;
  color: #fffaf0;
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 600;
  text-shadow: 0 5px 18px rgba(22, 24, 17, 0.68);
}

.invitation-cover__message {
  max-width: 620px;
  margin: 0 auto 36px;
  font-family: "Cormorant Garamond", serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(20px, 2.4vw, 20px);
  font-style: italic;
  line-height: 1.7;
  text-shadow: 0 4px 18px rgba(18, 22, 14, 0.72);
}

.invitation-cover__quote {
  display: none;
}

.invitation-cover__button,
.invitation-cover__button.btn {
  position: relative;
  min-width: 0;
  padding: 15px 34px 14px;
  font-family: "Work Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 238, 180, 0.58) !important;
  border-radius: 12px;
  color: #fffaf0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #657a42 0%, #9e763e 100%) !important;
  box-shadow:
    0 16px 34px rgba(31, 38, 20, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -4px 0 rgba(55, 43, 23, 0.32);
  text-shadow: 0 2px 8px rgba(28, 25, 14, 0.44);
  transform: translateY(0);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
}

.invitation-cover__button:hover,
.invitation-cover__button:focus {
  color: #fffaf0 !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 42%),
    linear-gradient(135deg, #718a49 0%, #b08346 100%) !important;
  box-shadow:
    0 20px 42px rgba(31, 38, 20, 0.42),
    0 0 24px rgba(255, 230, 150, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -4px 0 rgba(55, 43, 23, 0.28);
  transform: translateY(-3px) scale(1.03);
}

.invitation-cover__button:active {
  transform: translateY(1px) scale(0.99);
  box-shadow:
    0 10px 24px rgba(31, 38, 20, 0.34),
    inset 0 2px 8px rgba(45, 35, 18, 0.28);
}

.invitation-cover__button i {
  margin-right: 9px;
  font-size: 14px;
}

@media screen and (max-width: 768px) {
  .invitation-cover {
    align-items: center;
    padding: 16px;
  }

  .invitation-cover__video {
    object-position: left center;
  }

  .invitation-cover__content {
    width: 100%;
    padding: 0 8px;
    border-radius: 0;
  }

  .invitation-cover__content:before {
    display: none;
  }

  .invitation-cover__content:after {
    top: -18px;
    width: 72px;
  }

  .invitation-cover__label {
    --cover-label-spacing: 0.28em;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 14px;
  }

  .invitation-cover h1,
  .invitation-cover__content h1 {
    font-size: clamp(58px, 18vw, 78px);
    margin-bottom: 14px;
    white-space: normal;
  }

  .invitation-cover__date {
    margin-bottom: 22px;
  }

  .invitation-cover__guest {
    margin-bottom: 22px;
    padding: 0;
  }

  .invitation-cover__message {
    margin-bottom: 26px;
    font-size: 20px;
    line-height: 1.7;
  }

  .invitation-cover__quote {
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.5;
  }

  .invitation-cover__button,
  .invitation-cover__button.btn {
    width: auto;
    min-width: 220px;
    padding: 12px 18px;
  }
}

.hero-copy {
  max-width: 760px;
  margin: 0 auto;
  padding-top: 24px;
  padding-bottom: 18px;
}

#fh5co-header {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  overflow: hidden;
}

#fh5co-header .chapter-one-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media screen and (max-width: 768px) {
  /* Chapter One menjadi satu adegan penuh sebelum pengguna melanjutkan ke Prologue. */
  #fh5co-header,
  #fh5co-header .display-t,
  #fh5co-header .display-tc {
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
  }

  #fh5co-header .chapter-one-video {
    object-position: left bottom;
  }
}

#fh5co-header .invitation-overlay {
  z-index: 1;
}

#fh5co-header > .container {
  position: relative;
  z-index: 2;
}

#fh5co-header .invitation-overlay {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 246, 204, 0.14), transparent 30%),
    linear-gradient(
      to bottom,
      rgba(18, 35, 27, 0.28),
      rgba(21, 34, 25, 0.46) 48%,
      rgba(62, 72, 76, 0.58)
    );
}

.invitation-logo {
  display: inline-flex;
  align-items: center;
  width: 102px;
  height: 102px;
}

.invitation-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(20, 24, 16, 0.32));
}

.hero-kicker {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 14px;
  padding: 0;

  font-family: "Cinzel", serif;
  font-size: 11px;
  font-weight: 600;

  line-height: 1.5;
  letter-spacing: 0.32em;

  text-transform: uppercase;

  color: rgba(255, 248, 220, 0.95);

  background: transparent;
  border: none;
  border-radius: 0;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.45);

  box-shadow: none;

  backdrop-filter: none;
}

.hero-kicker::before,
.hero-kicker::after {
  content: "";

  display: block;

  width: 32px;
  height: 1px;

  flex: 0 0 32px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(255, 248, 220, 0.62)
    );
}

.hero-kicker::before {
  margin-right: 12px;
}

.hero-kicker::after {
  margin-left: 12px;

  transform: scaleX(-1);
}

.hero-subtitle {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", serif;
  color: rgba(255, 250, 230, 0.94);
  font-size: clamp(20px, 2.8vw, 30px);
  font-style: italic;
  line-height: 1.15;
  text-shadow: 0 5px 22px rgba(24, 28, 18, 0.68);
}

#fh5co-header .hero-copy h1 {
  margin: 0 0 33px;
  font-family: "Javasoul", "Sacramento", cursive;
  color: #fff6d8;
  font-size: clamp(58px, 8.5vw, 96px);
  line-height: 0.95;
  text-shadow:
    0 8px 30px rgba(20, 24, 16, 0.74),
    0 1px 0 rgba(112, 86, 38, 0.42);
}

#fh5co-header .hero-copy h2 {
  margin: 0 0 12px;
  color: rgba(255, 246, 216, 0.92);
  font-family: "Work Sans", Arial, sans-serif;
  font-size: clamp(12px, 1.45vw, 15px);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 4px 18px rgba(24, 28, 18, 0.62);
}

.hero-opening {
  position: relative;
  max-width: 760px;
  margin: 14px auto 20px;
  display: inline-block;
  padding: 8px 34px;
  font-family: "Lora", serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(17px, 1.8vw, 21px);
  font-style: italic;
  line-height: 1.9;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.32);
  background: radial-gradient(ellipse at center, rgba(20, 27, 21, 0.2) 0%, rgba(20, 27, 21, 0.08) 48%, transparent 78%);
  border-radius: 999px;
}

.hero-opening:before,
.hero-opening:after {
  position: absolute;
  color: rgba(255, 248, 220, 0.42);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(34px, 3.4vw, 46px);
  font-style: italic;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
}

.hero-opening:before {
  content: "\201C";
  left: 2px;
  top: -10px;
}

.hero-opening:after {
  content: "\201D";
  right: 2px;
  bottom: -14px;
}

.hero-message {
  max-width: 580px;
  margin: 0 auto 20px;
  color: rgba(255, 250, 232, 0.9);
  font-family: "Lora", serif;
  font-size: clamp(12px, 1.25vw, 15px);
  line-height: 1.75;
  text-shadow: 0 4px 18px rgba(24, 28, 18, 0.66);
}

#fh5co-header .hero-actions {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

#fh5co-header .hero-actions .btn {
  min-width: 220px;
  height: 54px;
  margin: 0;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 13px;
  letter-spacing: 1.5px;
  font-weight: 600;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
}

#fh5co-header .hero-actions .btn-default {
  min-width: 228px;
  background: linear-gradient(135deg, #d4b08c, #f3d7b6) !important;
  color: #2d1f1a !important;
  border: none !important;
  box-shadow: 0 12px 32px rgba(79, 50, 28, 0.28);
}

#fh5co-header .hero-actions .btn-outline {
  min-width: 238px;
  background: transparent !important;
  border: 1.5px solid rgba(255, 255, 255, 0.72) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#fh5co-header .hero-actions .btn-default:hover,
#fh5co-header .hero-actions .btn-default:focus {
  color: #2d1f1a !important;
  background: linear-gradient(135deg, #f3d7b6, #d4b08c) !important;
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(79, 50, 28, 0.34);
}

#fh5co-header .hero-actions .btn-outline:hover,
#fh5co-header .hero-actions .btn-outline:focus {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.96) !important;
  color: #2d1f1a !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

@media screen and (max-width: 768px) {
  #fh5co-header {
    background-position: 80% bottom !important;
  }

  .invitation-logo {
    width: 62px;
    height: 62px;
  }

  .hero-kicker {
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: 0.18em;
  }

  .hero-opening {
    font-size: 16px;
    line-height: 1.8;
    max-width: 320px;
  }

  .hero-subtitle {
    margin-bottom: 18px;
    font-size: 20px;
  }

  #fh5co-header .hero-copy h1 {
    font-size: clamp(44px, 13vw, 62px);
    margin-bottom: 16px;
    white-space: nowrap;
  }

  #fh5co-header .hero-copy h2 {
    margin-bottom: 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .hero-opening {
    margin: 14px auto 12px;
    padding: 0 26px;
    font-size: 15px;
    line-height: 1.45;
  }

  .hero-opening:before {
    left: 2px;
    top: -9px;
  }

  .hero-opening:after {
    right: 2px;
    bottom: -11px;
  }

  .hero-message {
    margin-bottom: 18px;
    font-size: 12px;
    line-height: 1.65;
  }

  .hero-actions {
    margin-top: 10px;
  }

  #fh5co-header .hero-actions .btn {
    min-width: 178px;
    width: auto;
    height: 46px;
    padding: 10px 16px;
    font-size: 11px;
  }
}
/*# sourceMappingURL=style.css.map */

/* ============================================================
   THE MAIN CHARACTERS — Section Styles
   Tambahkan di bagian PALING BAWAH file style.css kamu
   ============================================================ */
 
/* ---------- Section wrapper ---------- */
.mc-section {
  padding: 80px 0 60px;
  background:
    url('../images/character.png') center center / cover no-repeat;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.mc-section__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 35% center;
}
 
/* Overlay gelap tipis agar teks & kartu terbaca */
.mc-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(15, 10, 30, 0.26) 0%,
    rgba(15, 10, 30, 0.16) 42%,
    rgba(15, 10, 30, 0.08) 100%
  );
  pointer-events: none;
  z-index: 0;
}
 
/* Semua konten di atas overlay */
.mc-section .container {
  position: relative;
  z-index: 3;
}

/* ---------- Jembatan warna: The Main Characters -> Chapter Two ----------
   Prinsip (sama seperti transisi Prologue):
   - Tepi seam WAJIB identik: alpha = 1 dengan warna --bridge, dan warna
     yang sama dipakai lagi di tepi ATAS Chapter Two
     (.chapter-two::after) sehingga tidak ada garis potong.
   - Setelah tepi, alpha turun landai; bagian gelap hanya menempel di
     tepi seam, jadi tidak muncul pita warna yang mendominasi.
   CATATAN: nilai --bridge di sini HARUS sama dengan .chapter-two::after.

   Kenapa versi lama terlihat kasar: gradient cream-nya memakai
   bottom: -52px + filter: blur(0.8px). Karena .mc-section punya
   `overflow: hidden`, 52px terakhir (bagian cream penuh) terpotong;
   ditambah `margin-bottom: -18px` + `.chapter-two { margin-top: -30px }`
   membuat Chapter Two menutup 48px terakhir section ini. Akibatnya baris
   tepi yang benar-benar bertemu bukan cream penuh, melainkan cream
   translusen di atas video gelap -> terbaca sebagai garis keras.
   Kini margin negatif dihapus: tepi section = tepi seam.
   --------------------------------------------------------- */

.mc-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  z-index: 2;

  height: clamp(200px, 24vw, 330px);

  pointer-events: none;

  /* Sepia hangat: cukup untuk meredam video yang gelap di bawah section,
     tetap serumpun dengan parchment Chapter Two. */
  --bridge: 102, 84, 68;

  background: linear-gradient(
    to bottom,
    rgba(var(--bridge), 0) 0%,
    rgba(var(--bridge), 0.02) 14%,
    rgba(var(--bridge), 0.05) 28%,
    rgba(var(--bridge), 0.09) 42%,
    rgba(var(--bridge), 0.15) 55%,
    rgba(var(--bridge), 0.24) 67%,
    rgba(var(--bridge), 0.36) 77%,
    rgba(var(--bridge), 0.52) 85%,
    rgba(var(--bridge), 0.72) 92%,
    rgba(var(--bridge), 0.9) 97%,
    rgba(var(--bridge), 1) 100%
  );
}

/* Catatan: rule lama `.chapter-two { margin-top: -30px; box-shadow: 0 -26px
   60px rgba(84, 62, 41, 0.12), inset 0 18px 32px rgba(255, 255, 255, 0.14) }`
   beserta `.chapter-two:hover` DIHAPUS.
   Alasannya: margin negatif menarik section ini naik sehingga 48px terakhir
   The Main Characters tertutup, dan box-shadow luar melukis pita coklat tepat
   di atas seam (warna yang tidak ada di kedua sisi). Sambungan sekarang
   dilukis oleh .mc-section::after + .chapter-two::after dengan satu warna
   --bridge yang sama, jadi tepi section = tepi seam. */
 
/* ---------- Header teks ---------- */
.mc-header {
  margin-bottom: 20px;
}
 
.mc-kicker {
  margin-bottom: 20px;
  color: #f0c97a !important;
}

.prologue-intro .verse-kicker:before,
.prologue-intro .verse-kicker:after {
  color: #f0c97a !important;
}
 
.mc-tagline {
  font-family: "Sacramento", serif;
  font-size: clamp(26px, 4vw, 38px);
  color: #f5e9cc;
  margin: 0 0 16px;
  line-height: 1.3;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
 
.mc-tagline-sub {
  font-family: "Lora", serif;
  font-size: clamp(13px, 1.4vw, 16px);
  color: rgba(245, 233, 204, 0.78);
  line-height: 1.65;
  margin: 0 0 20px;
  font-style: italic;
}
 
.mc-divider {
  margin: 8px 0 0;
}
 
.mc-divider-star {
  color: #f0c97a;
  font-size: 18px;
  opacity: 0.85;
}
 
/* ---------- Layout kartu ---------- */
.mc-cards-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
}
 
.mc-col {
  padding-top: 16px;
  margin-bottom: 40px;
}
 
/* ---------- Card (frame + foto) ---------- */
.mc-card {
  position: relative;
  width: 100%;
  max-width: 260px;
  margin: 0 auto 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow: visible; 
}
 
/* Frame SVG Ghibli */
.mc-frame-ghibli {
  position: absolute;
  top: -54px;
  left: -15px;
  right: -15px;
  bottom: -12px;
  z-index: 2;
  pointer-events: none;
  filter: brightness(1.3) saturate(1.15) drop-shadow(0 0 5px rgba(240, 201, 122, 0.42)) drop-shadow(0 8px 16px rgba(8, 12, 9, 0.48));
}
 
.mc-frame-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.mc-corner-ornament {
  position: absolute;
  z-index: 3;
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  top: 45px;
  left: 7px;

  filter:
      brightness(0)
      saturate(100%)
      invert(68%)
      sepia(25%)
      saturate(720%)
      hue-rotate(355deg)
      brightness(91%)
      contrast(86%)
      drop-shadow(0 0 2px rgba(240, 201, 122, 0.12));
      

  opacity: 0.40;
}

.mc-corner-ornament--tl {
  top: 33px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;

  transform: scaleX(-1);
}

.mc-corner-ornament--tr {
  top: 33px !important;
  right: 2px !important;
  left: auto !important;
  bottom: auto !important;

  transform: none;
}

.mc-corner-ornament--bl {
  bottom: 33px !important;
  left: 2px !important;
  right: auto !important;
  top: auto !important;

  transform: rotate(180deg);
}

.mc-corner-ornament--br {
  bottom: 33px !important;
  right: 2px !important;
  left: auto !important;
  top: auto !important;

  transform: scaleX(-1) rotate(180deg);
}
 
/* Shimmer dot animasi */
.mc-shimmer-dot,
.mc-shimmer-dot-2,
.mc-shimmer-dot-3 {
  transition: opacity 0.6s ease;
}
 
/* ---------- 3D Flip ---------- */
.mc-flip-wrap {
  position: relative;
  width: 100%;
  padding-top: 128%;
  perspective: 900px;
  border-radius: 4px;
  overflow: visible;
}
 
.mc-flip-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.42, 0, 0.18, 1.2);
  border-radius: 4px;
}
 
/* State: terbalik */
.mc-card.mc-is-flipped .mc-flip-inner {
  transform: rotateY(180deg);
}
 
/* Sisi depan & belakang */
.mc-flip-front,
.mc-flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(240, 201, 122, 0.34),
    0 0 0 3px rgba(240, 201, 122, 0.08);
}
 
.mc-flip-back {
  transform: rotateY(180deg);
  background: #1a1a2e;
}
 
/* Foto */
.mc-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border-radius: 4px;
}
 
/* Foto anime */
.mc-photo-anime {
  filter: grayscale(0.15) contrast(1.05) brightness(0.98);
}
 
/* Placeholder saat file anime belum ada */
.mc-anime-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  background: #1a1a2e;
}
 
/* Sembunyikan placeholder saat gambar anime berhasil dimuat. Jika gambar
   gagal, kelas .mc-no-anime dari handler onerror akan menampilkannya. */
.mc-flip-back .mc-photo-anime + .mc-anime-placeholder {
  display: none;
}

.mc-flip-back.mc-no-anime .mc-anime-placeholder {
  display: flex;
}
 
/* ---------- Hint "tap to reveal" ---------- */
.mc-tap-hint {
  text-align: center;
  font-family: "Cinzel", serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: rgba(240, 201, 122, 0.62);
  margin: 22px 0 0;
  position: relative;
  z-index: 3;
  pointer-events: none;
  animation: mc-hint-pulse 2.8s ease-in-out infinite;
}
 
@keyframes mc-hint-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 1; }
}
 
/* ---------- Info nama ---------- */
.mc-person-info {
  position: relative;
  z-index: 3;
  padding: 0 8px;
}
 
.mc-name {
  font-family: "Javasoul", "Sacramento", serif;
  font-size: clamp(25px, 3.2vw, 32px);
  font-weight: 400;
  color: #f5e9cc;
  line-height: 1.05;
  letter-spacing: 0.015em;
  margin: 14px 0 5px;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.52),
    0 0 18px rgba(240, 201, 122, 0.08);
}
 
.mc-role {
  font-family: "Cinzel", serif;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(240, 201, 122, 0.92);
  line-height: 1.4;
  margin: 0 0 13px;
}
 
.mc-family {
  font-family: "Lora", serif;
  font-size: clamp(11.5px, 1.15vw, 13px);
  font-weight: 400;
  color: rgba(245, 233, 204, 0.68);
  line-height: 1.7;
  letter-spacing: 0.01em;
  margin: 0;
  font-style: italic;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}
 
/* ---------- Separator tengah ---------- */
.mc-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
 
.mc-sep-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 190px;
}
 
.mc-sep-star {
  color: #f0c97a;
  font-size: 14px;
  opacity: 0.72;
}
 
.mc-sep-line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(240, 201, 122, 0.30), transparent);
  display: block;
}
 
/* ---------- Closing line ---------- */
.mc-closing {
  margin-top: 4px;
}

.mc-closing-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 170px);
  margin: 0 auto 16px;
  color: rgba(240, 201, 122, 0.85);
  font-size: 13px;
  line-height: 1;
}

.mc-closing-divider::before,
.mc-closing-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(240, 201, 122, 0.88), transparent);
}
 
.mc-closing-text {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(18px, 2.4vw, 25px);
  font-weight: 400;
  font-style: italic;
  color: #fdf5e8;
  letter-spacing: 0.025em;
  line-height: 1.2;
  margin: 0;
  opacity: 1;
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(240, 201, 122, 0.20),
    0 0 26px rgba(255, 245, 225, 0.18);
}

.mc-closing-text span + span::before {
  content: " ";
}
 
/* ---------- Responsive Mobile ---------- */
@media screen and (max-width: 768px) {
  .mc-section {
    padding: 56px 0 44px;
    background-size: cover;
    background-position: center center;
  }
 
  .mc-cards-row {
    flex-direction: column;
    align-items: center;
  }
 
  .mc-separator {
    height: auto;
    padding: 16px 0;
  }
 
  .mc-sep-inner {
    flex-direction: row;
    height: auto;
    gap: 8px;
    width: 190px;
  }
 
  .mc-sep-line {
    flex: 1;
    width: auto;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(240, 201, 122, 0.30), transparent);
  }
 
  .mc-card {
    max-width: 240px;
  }

  .mc-corner-ornament {
    width: 44px;
    height: 44px;

    opacity: 0.35;
  }

  .mc-corner-ornament--tl {
    top: 33px !important;
    left: 1px !important;
    right: auto !important;
    bottom: auto !important;

    transform: scaleX(-1);
  }

  .mc-corner-ornament--tr {
    top: 33px !important;
    right: 1px !important;
    left: auto !important;
    bottom: auto !important;

    transform: none;
  }

  .mc-corner-ornament--bl {
    bottom: 33px !important;
    left: 1px !important;
    right: auto !important;
    top: auto !important;

    transform: rotate(180deg);
  }

  .mc-corner-ornament--br {
    bottom: 33px !important;
    right: 1px !important;
    left: auto !important;
    top: auto !important;

    transform: scaleX(-1) rotate(180deg);
  }
 
  .mc-tagline-sub {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 18px;
  }

  .mc-closing-text {
    font-size: 19px;
    line-height: 1.3;
    padding: 0 18px;
  }

  .mc-closing-text span {
    display: block;
  }

  .mc-closing-text span + span::before {
    content: none;
  }
}
 
@media screen and (max-width: 480px) {
  .mc-card {
    max-width: 220px;
  }
}
 
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mc-flip-inner {
    transition: none;
  }
  .mc-tap-hint {
    animation: none;
    opacity: 0.7;
  }
}

.verse-subtitle {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 2.8vw, 30px);
  font-style: italic;
  color: #314b45;
  margin: 4px 0 26px;
  line-height: 1.05;
  text-shadow: none;
}

.prologue-intro .verse-subtitle {
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.15;
}

/* Chapter One reveal: each beat enters after the cover slides away. */
.js .hero-intro > * {
  opacity: 0;
  transform: translateY(16px);
}

.js .hero-intro.is-revealed > * {
  animation: heroIntroReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .hero-intro.is-revealed > :nth-child(1) { animation-delay: 0.35s; }
.js .hero-intro.is-revealed > :nth-child(2) { animation-delay: 0.52s; }
.js .hero-intro.is-revealed > :nth-child(3) { animation-delay: 0.69s; }
.js .hero-intro.is-revealed > :nth-child(4) { animation-delay: 0.88s; }
.js .hero-intro.is-revealed > :nth-child(5) { animation-delay: 1.12s; }
.js .hero-intro.is-revealed > :nth-child(6) { animation-delay: 1.34s; }
.js .hero-intro.is-revealed > :nth-child(7) { animation-delay: 1.58s; }
.js .hero-intro.is-revealed > :nth-child(8) { animation-delay: 1.82s; }

@keyframes heroIntroReveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero-intro > *,
  .js .hero-intro.is-revealed > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Prologue frame and dividers: Javanese-inspired linework, kept deliberately subtle. */
.prologue-corner {
  position: absolute;
  z-index: 1;
  width: 62px;
  height: 62px;
  pointer-events: none;
  background: transparent;
  background-image: url("../images/corner.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) saturate(100%) sepia(1) hue-rotate(-18deg) saturate(3.6) brightness(0.9);
  opacity: 0.9;
  transform-origin: center;
}

@supports ((mask-image: url("../images/corner.svg")) or (-webkit-mask-image: url("../images/corner.svg"))) {
  .prologue-corner {
    background-image: none;
    background-color: #a97845;
    filter: none;
    -webkit-mask-image: url("../images/corner.svg");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-image: url("../images/corner.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
}

.prologue-corner:after {
  content: none;
}

.prologue-corner--top-left {
  top: 14px;
  left: 14px;
  transform: rotate(0deg);
}

.prologue-corner--top-left:after {
  content: none;
}

.prologue-corner--top-right {
  top: 14px;
  right: 14px;
  transform: rotate(90deg);
}

.prologue-corner--top-right:after {
  content: none;
}

.prologue-corner--bottom-left {
  bottom: 14px;
  left: 14px;
  transform: rotate(-90deg);
}

.prologue-corner--bottom-left:after {
  content: none;
}

.prologue-corner--bottom-right {
  right: 14px;
  bottom: 14px;
  transform: rotate(180deg);
}

.prologue-corner--bottom-right:after {
  content: none;
}

.prologue-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 290px);
  margin: -6px auto 28px;
  color: #8e6b5e;
  font-size: 12px;
  line-height: 1;
}

.prologue-divider:before,
.prologue-divider:after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(166, 122, 94, 0.8), rgba(166, 122, 94, 0.95), transparent);
}

.prologue-divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(166, 122, 94, 0.7);
  border-radius: 50%;
  background: rgba(255, 249, 242, 0.7);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  font-size: 11px;
}

.prologue-divider--verse {
  width: min(100%, 260px);
  margin: 0 auto 20px;
}

/* ---------------------------------------------------------
   Prologue Background
   Latar langit dari images/prologue_base.webp, dengan .png
   sebagai fallback. Aset master prologue_base.png (1920 x
   1080) dikompres menjadi WebP 26 KB.
   Gradien lama di .invitation-verse tetap dibiarkan sebagai
   fallback bila gambar gagal dimuat.
   --------------------------------------------------------- */

.prologue-bg {
  position: absolute;
  inset: 0;

  z-index: -1;

  /* Tanpa background-color: bila gambar gagal dimuat, gradient
     .invitation-verse di bawahnya yang tampil (fallback lama). */
  background-image: url("../images/prologue_base.png");
  background-image: -webkit-image-set(
    url("../images/prologue_base.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/prologue_base.webp") type("image/webp")
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  pointer-events: none;
}

/* ---------------------------------------------------------
   Prologue Cloud
   Lapisan awan transparan images/prologue_cloud (PNG/WebP)
   di atas .prologue-bg. Awan masuk mengikuti pola landscape
   Chapter Two (fade + naik, lalu berhenti), disusul drift
   kiri-kanan yang sangat pelan supaya langit terasa hidup
   tanpa mengganggu membaca.
   --------------------------------------------------------- */

.prologue-cloud {
  position: absolute;
  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;
}

.prologue-cloud__drift {
  position: absolute;

  /* Sedikit lebih besar dari section (bleed), sehingga drift
     kiri-kanan tidak pernah memperlihatkan tepi gambar. */
  inset: -4% -6%;

  background-image: url("../images/prologue_cloud.png");
  background-image: -webkit-image-set(
    url("../images/prologue_cloud.webp") type("image/webp")
  );
  background-image: image-set(
    url("../images/prologue_cloud.webp") type("image/webp")
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Initial state: hanya aktif ketika JavaScript tersedia.
   Awan tersembunyi sampai .invitation-verse mendapat .is-revealed. */
.js .prologue-cloud {
  opacity: 0;
  transform: translate3d(0, 38px, 0);
}

.js .invitation-verse.is-revealed .prologue-cloud {
  animation:
    prologueCloudReveal
    1.7s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.3s
    forwards;
}

/* Match the Wedding Du'a cloud drift: slow, visible, and only starts
   after the section is revealed. */
.js .invitation-verse.is-revealed .prologue-cloud__drift {
  animation: prologueCloudDrift 20s ease-in-out 1s infinite alternate;
}

@keyframes prologueCloudReveal {
  from {
    opacity: 0;
    transform: translate3d(0, 38px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes prologueCloudDrift {
  from {
    transform: translate3d(-2.5%, 0, 0);
  }

  to {
    transform: translate3d(2.5%, 0, 0);
  }
}

/* ---------------------------------------------------------
   Prologue — Transisi Warna Antar Section
   Pita gradien di tepi atas & bawah section supaya perpindahan
   Chapter One -> Prologue -> The Main Characters terasa halus.

   Prinsip (hasil sampling screenshot aktual per breakpoint):
   - Tepi seam WAJIB cocok sempurna: alpha = 1 dengan warna
     baris terakhir tetangga, sehingga tidak ada garis potong.
   - Setelah itu alpha turun cepat (zona gelap hanya ~50px pertama)
     lalu ekor landai sampai transparan; langit prologue tetap
     terang dan tidak ada pita hitam yang mendominasi.
   Warna edge (rata-rata lintasan x baris tepi):
   - atas   desktop rgb(91, 93, 84)   = vignette bawah Chapter One
            mobile  rgb(64, 73, 78)
   - bawah  desktop rgb(17, 18, 45)   = baris atas The Main Characters
            mobile  rgb(20, 16, 14)
   Pita diletakkan SETELAH .prologue-light dalam DOM; konten
   (.container, z-index 1) tetap berada di atas pita.
   --------------------------------------------------------- */

.prologue-fade {
  position: absolute;
  left: 0;
  right: 0;

  z-index: 0;

  height: clamp(260px, 27vw, 370px);

  pointer-events: none;
}

.prologue-fade--top {
  top: 0;
  height: clamp(200px, 22vw, 300px);

  --fade-edge: 91, 93, 84;

  background: linear-gradient(
    to bottom,
    rgba(var(--fade-edge), 1) 0%,
    rgba(var(--fade-edge), 0.85) 2.5%,
    rgba(var(--fade-edge), 0.62) 6%,
    rgba(var(--fade-edge), 0.42) 11%,
    rgba(var(--fade-edge), 0.27) 17%,
    rgba(var(--fade-edge), 0.15) 26%,
    rgba(var(--fade-edge), 0.07) 38%,
    rgba(var(--fade-edge), 0.025) 55%,
    rgba(var(--fade-edge), 0.008) 75%,
    rgba(var(--fade-edge), 0) 100%
  );
}

.prologue-fade--bottom {
  bottom: 0;

  --fade-edge: 17, 18, 45;

  background: linear-gradient(
    to top,
    rgba(var(--fade-edge), 1) 0%,
    rgba(var(--fade-edge), 0.85) 2%,
    rgba(var(--fade-edge), 0.62) 4.5%,
    rgba(var(--fade-edge), 0.42) 8%,
    rgba(var(--fade-edge), 0.27) 13%,
    rgba(var(--fade-edge), 0.16) 20%,
    rgba(var(--fade-edge), 0.09) 30%,
    rgba(var(--fade-edge), 0.04) 45%,
    rgba(var(--fade-edge), 0.015) 65%,
    rgba(var(--fade-edge), 0) 100%
  );
}

/* Warna tepi seam berbeda per breakpoint (video & crop tetangga
   berubah di layar kecil). */
@media screen and (max-width: 768px) {
  .prologue-fade--top {
    --fade-edge: 64, 73, 78;
  }

  .prologue-fade--bottom {
    --fade-edge: 20, 16, 14;
  }
}

/* Prologue reveal: a quiet light transition followed by the reading content. */
.prologue-light {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 248, 226, 0.48) 0%,
      rgba(255, 239, 207, 0.16) 24%,
      transparent 52%
    );
  opacity: 1;
}

.prologue-leaf {
  position: absolute;
  z-index: 2;
  display: block;
  width: clamp(42px, 4vw, 60px);
  height: auto;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.prologue-leaf--one {
  top: 18%;
  left: 18%;
  transform: rotate(-28deg);
}

.prologue-leaf--two {
  top: 34%;
  right: 16%;
  width: clamp(38px, 3.4vw, 52px);
  transform: rotate(54deg);
}

.prologue-leaf--three {
  top: 62%;
  left: 9%;
  width: clamp(36px, 3.2vw, 48px);
  transform: rotate(76deg);
}

.prologue-leaf--four {
  top: 12%;
  right: 28%;
  width: clamp(34px, 3vw, 46px);
  transform: rotate(18deg);
}

.prologue-leaf--five {
  top: 28%;
  left: 34%;
  width: clamp(38px, 3.4vw, 52px);
  transform: rotate(-62deg);
}

.prologue-leaf--six {
  top: 48%;
  right: 8%;
  width: clamp(34px, 3vw, 46px);
  transform: rotate(102deg);
}

.prologue-dust {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #d8b878;
  box-shadow: 0 0 10px rgba(255, 226, 156, 0.82);
  opacity: 0;
  pointer-events: none;
}

.prologue-dust--one { top: 22%; left: 31%; }
.prologue-dust--two { top: 30%; right: 28%; width: 3px; height: 3px; }
.prologue-dust--three { top: 48%; left: 13%; width: 3px; height: 3px; }
.prologue-dust--four { top: 58%; right: 18%; }
.prologue-dust--five { top: 70%; left: 25%; width: 3px; height: 3px; }
.prologue-dust--six { top: 18%; right: 12%; width: 3px; height: 3px; }

.prologue-frame-line {
  position: absolute;
  z-index: 1;
  display: block;
  background: linear-gradient(90deg, transparent, rgba(188, 153, 118, 0.78), transparent);
  opacity: 0;
  transform-origin: left center;
  pointer-events: none;
}

.prologue-frame-line--top,
.prologue-frame-line--bottom {
  left: 76px;
  right: 76px;
  height: 1px;
}

.prologue-frame-line--top { top: 20px; }
.prologue-frame-line--bottom { bottom: 20px; transform-origin: right center; }

.prologue-frame-line--right,
.prologue-frame-line--left {
  top: 76px;
  bottom: 76px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(188, 153, 118, 0.78), transparent);
  transform-origin: center top;
}

.prologue-frame-line--right { right: 20px; }
.prologue-frame-line--left { left: 20px; transform-origin: center bottom; }

.js .prologue-intro {
  opacity: 0;
  transform: translateY(18px) scale(0.985);
}

.js .prologue-intro:not(.is-revealed) .prologue-corner {
  opacity: 0;
  filter: blur(4px);
}

.js .prologue-intro.is-revealed {
  animation: prologueCardReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.js .prologue-intro.is-revealed .prologue-corner {
  animation: prologueCornerReveal 0.5s ease-out 0.2s forwards;
}

.js .prologue-intro.is-revealed .prologue-frame-line--top,
.js .prologue-intro.is-revealed .prologue-frame-line--bottom {
  animation: prologueFrameDraw 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.js .prologue-intro.is-revealed .prologue-frame-line--right,
.js .prologue-intro.is-revealed .prologue-frame-line--left {
  animation: prologueFrameDrawVertical 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

.js .invitation-verse.is-revealed .prologue-dust {
  animation: prologueDust 4.8s ease-in-out 0.9s infinite;
}

.js .invitation-verse.is-revealed .prologue-dust--two,
.js .invitation-verse.is-revealed .prologue-dust--five {
  animation-delay: 1.4s;
}

.js .invitation-verse.is-revealed .prologue-dust--three,
.js .invitation-verse.is-revealed .prologue-dust--six {
  animation-delay: 1.9s;
}

.js .invitation-verse.is-revealed .prologue-light {
  animation: prologueLightSettle 2.4s ease-out 0.1s forwards;
}

.js .invitation-verse.is-revealed .prologue-leaf--one {
  animation: prologueLeafOne 8s ease-in-out 1.8s infinite;
}

.js .invitation-verse.is-revealed .prologue-leaf--two {
  animation: prologueLeafTwo 9s ease-in-out 3.2s infinite;
}

.js .invitation-verse.is-revealed .prologue-leaf--three {
  animation: prologueLeafThree 10s ease-in-out 5.1s infinite;
}

.js .invitation-verse.is-revealed .prologue-leaf--four {
  animation: prologueLeafFour 8.5s ease-in-out 1.95s infinite;
}

.js .invitation-verse.is-revealed .prologue-leaf--five {
  animation: prologueLeafFive 9.5s ease-in-out 3.35s infinite;
}

.js .invitation-verse.is-revealed .prologue-leaf--six {
  animation: prologueLeafSix 10.5s ease-in-out 5.25s infinite;
}

.js .prologue-intro > .prologue-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.js .prologue-intro.is-revealed > .prologue-reveal {
  animation: prologueReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .prologue-intro.is-revealed > .prologue-reveal--kicker { animation-delay: 0.35s; }
.js .prologue-intro.is-revealed > .prologue-reveal--title { animation-delay: 0.5s; }
.js .prologue-intro.is-revealed > .prologue-reveal--heading { animation-delay: 0.62s; }
.js .prologue-intro.is-revealed > .prologue-reveal--copy { animation-delay: 0.72s; }
.js .prologue-intro.is-revealed > .prologue-reveal--verse-divider { animation-delay: 0.85s; }
.js .prologue-intro.is-revealed > .prologue-reveal--reference { animation-delay: 0.9s; }
.js .prologue-intro.is-revealed > .prologue-reveal--arabic {
  animation-delay: 0.72s;
  animation-name: prologueVerseReveal;
}
.js .prologue-intro.is-revealed > .prologue-reveal--translation { animation-delay: 0.9s; }

@keyframes prologueCardReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes prologueCornerReveal {
  0%, 12% {
    opacity: 0;
    filter: blur(4px);
  }
  22%, 74% {
    opacity: 0.9;
    filter: blur(0);
  }
  82% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 0 7px rgba(255, 220, 145, 0.62));
  }
  92%, 100% {
    opacity: 0.9;
    filter: blur(0);
  }
}

@keyframes prologueFrameDraw {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes prologueFrameDrawVertical {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

@keyframes prologueDust {
  0%, 18%, 100% {
    opacity: 0;
    transform: translateY(4px) scale(0.7);
  }
  38% {
    opacity: 0.72;
    transform: translateY(0) scale(1);
  }
  58% {
    opacity: 0.18;
    transform: translateY(-7px) scale(0.8);
  }
}

@keyframes prologueLightSettle {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 0.74;
  }
  100% {
    opacity: 0.32;
  }
}

@keyframes prologueLeafOne {
  0%, 16% { opacity: 0; transform: translate3d(-10vw, -8vh, 0) rotate(-28deg); }
  24% { opacity: 0.72; }
  58% { opacity: 0; transform: translate3d(58vw, 42vh, 0) rotate(126deg); }
  100% { opacity: 0; transform: translate3d(58vw, 42vh, 0) rotate(126deg); }
}

@keyframes prologueLeafTwo {
  0%, 18% { opacity: 0; transform: translate3d(8vw, -12vh, 0) rotate(54deg); }
  26% { opacity: 0.62; }
  60% { opacity: 0; transform: translate3d(-48vw, 48vh, 0) rotate(-110deg); }
  100% { opacity: 0; transform: translate3d(-48vw, 48vh, 0) rotate(-110deg); }
}

@keyframes prologueLeafThree {
  0%, 20% { opacity: 0; transform: translate3d(-6vw, -16vh, 0) rotate(76deg); }
  28% { opacity: 0.58; }
  62% { opacity: 0; transform: translate3d(64vw, 32vh, 0) rotate(164deg); }
  100% { opacity: 0; transform: translate3d(64vw, 32vh, 0) rotate(164deg); }
}

@keyframes prologueLeafFour {
  0%, 16% { opacity: 0; transform: translate3d(8vw, -10vh, 0) rotate(18deg); }
  24% { opacity: 0.54; }
  58% { opacity: 0; transform: translate3d(-42vw, 46vh, 0) rotate(-126deg); }
  100% { opacity: 0; transform: translate3d(-42vw, 46vh, 0) rotate(-126deg); }
}

@keyframes prologueLeafFive {
  0%, 18% { opacity: 0; transform: translate3d(-8vw, -8vh, 0) rotate(-62deg); }
  26% { opacity: 0.66; }
  60% { opacity: 0; transform: translate3d(46vw, 44vh, 0) rotate(118deg); }
  100% { opacity: 0; transform: translate3d(46vw, 44vh, 0) rotate(118deg); }
}

@keyframes prologueLeafSix {
  0%, 20% { opacity: 0; transform: translate3d(10vw, -14vh, 0) rotate(102deg); }
  28% { opacity: 0.5; }
  62% { opacity: 0; transform: translate3d(-56vw, 36vh, 0) rotate(-148deg); }
  100% { opacity: 0; transform: translate3d(-56vw, 36vh, 0) rotate(-148deg); }
}

@keyframes prologueReveal {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .js .prologue-leaf {
    animation: none !important;
    opacity: 0.42;
    transform: none;
  }

  .js .prologue-intro,
  .js .prologue-intro.is-revealed {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .prologue-intro .prologue-corner {
    animation: none;
    opacity: 0.9;
    filter: none;
  }

  .js .prologue-intro .prologue-frame-line {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .prologue-light {
    opacity: 0.32;
  }

  .js .prologue-cloud,
  .js .invitation-verse.is-revealed .prologue-cloud {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .js .invitation-verse.is-revealed .prologue-cloud__drift {
    animation: none;
    transform: none;
  }

  .js .prologue-intro > .prologue-reveal,
  .js .prologue-intro.is-revealed > .prologue-reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   Prologue — mobile: satu layar penuh
   Prinsip sama dengan Wedding Du'a: begitu user scroll sampai section
   Prologue, seluruh tinggi layar menjadi milik section ini sehingga tidak
   diintip atau dipotong oleh section tetangga (Chapter One di atas /
   The Main Characters di bawah).

   Section ini hanya punya SATU anak in-flow (.container) — sisanya
   (.prologue-bg, .prologue-cloud, .prologue-light, .prologue-fade,
   .prologue-connector, .prologue-leaf, .prologue-dust) semuanya
   `position: absolute`, jadi `display: flex` di sini tidak menggeser
   satu pun lapisan dekoratif tersebut.

   `min-height: 100vh` dipakai karena di browser mobile nilai vh = viewport
   terbesar (URL bar tersembunyi), jadi section selalu menutupi layar.
   `justify-content: safe center` menaruh kartu di tengah bila ada sisa
   ruang; kalau isi section lebih tinggi dari layar, browser otomatis
   kembali ke flex-start sehingga bagian atas kartu tidak pernah terpotong.
   Browser lama yang belum mengenal `safe` cukup mengabaikan deklarasi itu
   dan memakai flex-start (aman).
   --------------------------------------------------------- */

@media screen and (max-width: 768px) {
  .invitation-verse {
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    justify-content: safe center;
  }
}

@media screen and (max-width: 480px) {
  .prologue-corner {
    width: 30px;
    height: 30px;
  }

  .prologue-corner:after {
    width: 6px;
    height: 6px;
  }

  .prologue-corner--top-left,
  .prologue-corner--top-right {
    top: 14px;
  }

  .prologue-corner--bottom-left,
  .prologue-corner--bottom-right {
    bottom: 14px;
  }

  .prologue-corner--top-left,
  .prologue-corner--bottom-left {
    left: 14px;
  }

  .prologue-corner--top-right,
  .prologue-corner--bottom-right {
    right: 14px;
  }
}

/* Keep the Prologue label distinct from the global hero kicker style. */
.prologue-intro .verse-kicker {
  padding: 0 !important;

  color: #68776c !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;

  box-shadow: none !important;
  text-shadow: none;
}

.prologue-intro .verse-kicker:before,
.prologue-intro .verse-kicker:after {
  content: "" !important;
  color: #68776c !important;

  display: block;

  width: 32px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(150, 112, 72, 0.52)
    );

  margin: 0;
}

.prologue-intro .verse-kicker::before {
  margin-right: 12px;
}

.prologue-intro .verse-kicker::after {
  margin-left: 12px;
  transform: scaleX(-1);
}

/* =========================================================
   CHAPTER TWO — THE PROMISE
   Base Layout
   ========================================================= */

.chapter-two {
  position: relative;
  min-height: 820px;

  overflow: hidden;
  isolation: isolate;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  background: #f3e8d8;
  color: #594735;
}


/* ---------------------------------------------------------
   Parchment Background
   --------------------------------------------------------- */

.chapter-two__bg {
  position: absolute;
  inset: 0;

  z-index: -3;

  /* WebP quality 80 untuk browser modern, PNG sebagai fallback.
     promise_bg.png (1024 x 1536, master 2.1 MB) menjadi 29 KB;
     aset PNG asli tetap disimpan tanpa perubahan. */
  background-image: url("../images/promise_bg.png");
  background-image: -webkit-image-set(
    url("../images/promise_bg.webp") type("image/webp"),
    url("../images/promise_bg.png") type("image/png")
  );
  background-image: image-set(
    url("../images/promise_bg.webp") type("image/webp"),
    url("../images/promise_bg.png") type("image/png")
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  pointer-events: none;
}


/* Soft atmospheric light */

.chapter-two::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: -2;

  background:
    radial-gradient(
      ellipse at 50% 38%,
      rgba(255, 250, 239, 0.42) 0%,
      rgba(255, 250, 239, 0.16) 34%,
      transparent 68%
    );

  pointer-events: none;
}


/* ---------------------------------------------------------
   Top seam — The Main Characters → Chapter Two
   Lapisan ini melukiskan ekor jembatan dari sisi Chapter Two.
   Warna (--bridge) dan tingginya SENGAJA identik dengan
   .mc-section::after, sehingga baris PERTAMA Chapter Two
   (alpha 1 = rgb(102, 84, 68)) warnanya persis sama dengan baris
   TERAKHIR The Main Characters — tidak ada garis potong, di
   breakpoint mana pun, tanpa perlu menyetel warna per ukuran layar.

   Kurva DIJINAKKAN (revisi atas keluhan ornamen): bayangan hanya
   menebal di ±25–30px pertama (alpha 0.76 pada 8px, 0.43 pada 28px),
   tinggal ±0.22 pada ±63px dan ≤0.1 pada ±140px, lalu ekor tipis
   sampai 330px. Alasannya: dua ornamen sudut Chapter Two
   (promise_ornamen_left/right.png, top: 0, z-index: 1) memang flourish
   pojok — alpha-bbox asetnya mulai di y=0 (ornamen kiri juga x=0) —
   jadi tidak bisa digeser turun tanpa memutus sambungan ke tepi
   section. Badan bunga ornamen ada di ±44–65px dari tepi; dengan
   kurva lama di situ wash-nya 0.4–0.55 sehingga bunga tampak
   "mengambang di pita gelap". Kini di kedalaman itu wash tinggal
   ±0.22 → latar di balik ornamen kembali terang/sepia muda.

   Z-index -1: di atas .chapter-two__bg (-3) dan ::before radial (-2),
   tapi tetap di bawah ornamen (1), lanskap (2), dan konten (3), jadi
   warna ornamen sendiri tidak ikut digelapkan.
   --------------------------------------------------------- */

.chapter-two::after {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  z-index: -1;

  height: clamp(200px, 24vw, 330px);

  pointer-events: none;

  --bridge: 102, 84, 68;

  background: linear-gradient(
    to bottom,
    rgba(var(--bridge), 1) 0%,
    rgba(var(--bridge), 0.76) 2.5%,
    rgba(var(--bridge), 0.58) 5%,
    rgba(var(--bridge), 0.43) 8.5%,
    rgba(var(--bridge), 0.31) 13%,
    rgba(var(--bridge), 0.22) 19%,
    rgba(var(--bridge), 0.15) 27%,
    rgba(var(--bridge), 0.095) 36%,
    rgba(var(--bridge), 0.055) 47%,
    rgba(var(--bridge), 0.028) 60%,
    rgba(var(--bridge), 0.011) 76%,
    rgba(var(--bridge), 0) 100%
  );
}


/* ---------------------------------------------------------
   Ornamen atas
   --------------------------------------------------------- */

/* top: 0 WAJIB dipertahankan.
   Asetnya adalah flourish sudut: alpha-bbox promise_ornamen_left.png
   mulai di (0, 0) dan promise_ornamen_right.png di (130, 0) — artwork
   mentok ke tepi ATAS section (yang kiri juga mentok tepi KIRI).
   Menggeser `top` ke bawah membuat sudut halaman kosong dan bunga
   tampak lepas dari tepi. Supaya ornamen tidak "tenggelam" di jembatan
   warna The Main Characters → Chapter Two, yang dijinakkan adalah
   kekuatan wash di tepi atas — lihat .chapter-two::after (z-index -1,
   jadi ornamen tetap di atasnya dan warnanya tidak ikut digelapkan). */

.chapter-two__ornament {
  position: absolute;

  top: 60px;

  z-index: 1;

  width: min(300px, 25vw);
  height: auto;

  opacity: 0.72;

  pointer-events: none;
  user-select: none;
}

.chapter-two__ornament--left {
  left: 0;
}

.chapter-two__ornament--right {
  right: 0;
  scale: -1 1;
}


/* ---------------------------------------------------------
   Content
   --------------------------------------------------------- */

.chapter-two__content {
  position: relative;

  z-index: 3;

  min-height: 820px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: flex-start;

  text-align: center;

  padding-top: 150px;
  padding-bottom: 300px;
}


/* ---------------------------------------------------------
   Chapter Two
   --------------------------------------------------------- */

.chapter-two__kicker {
  color: rgba(126, 91, 54, 0.82);
  text-shadow: none;
}

.chapter-two__kicker::before,
.chapter-two__kicker::after {
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(150, 112, 72, 0.42)
    );
}

.chapter-two__kicker::before {
  right: 100%;
}

.chapter-two__kicker::after {
  left: 100%;

  transform:
    translateY(-50%)
    scaleX(-1);
}


/* ---------------------------------------------------------
   Divider
   --------------------------------------------------------- */

.chapter-two__divider {
  display: flex;

  align-items: center;
  justify-content: center;

  margin: 15px 0 10px;

  font-family: "Cormorant Garamond", serif;

  font-size: 13px;

  color: rgba(150, 112, 72, 0.76);
}

.chapter-two__divider::before,
.chapter-two__divider::after {
  content: "";

  display: block;

  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(150, 112, 72, 0.45)
    );
}

.chapter-two__divider::before {
  margin-right: 10px;
}

.chapter-two__divider::after {
  margin-left: 10px;

  transform: scaleX(-1);
}


/* ---------------------------------------------------------
   The Promise
   --------------------------------------------------------- */

.chapter-two__title {
  margin: 0;

  font-family: "Cormorant Garamond", serif;

  font-size: clamp(40px, 4.2vw, 50px);

  font-weight: 400;
  font-style: italic;

  line-height: 1;

  letter-spacing: 0.01em;

  color: #624b37;

  text-shadow:
    0 2px 12px rgba(86, 60, 35, 0.08);
}


/* ---------------------------------------------------------
   Copy
   --------------------------------------------------------- */

.chapter-two__copy {
  max-width: 500px;

  margin: 26px auto 0;

  font-family: "Cormorant Garamond", serif;

  font-size: 19px;
  font-weight: 400;
  font-style: italic;

  line-height: 1.7;

  color: rgba(89, 71, 53, 0.78);
}


/* ---------------------------------------------------------
   Date
   --------------------------------------------------------- */



/* ---------------------------------------------------------
   Landscape
   --------------------------------------------------------- */

.chapter-two__landscape {
  position: absolute;

  left: 50%;
  bottom: -3px;

  z-index: 2;

  width: 112%;
  max-width: none;

  height: auto;

  transform: translateX(-50%);

  pointer-events: none;
  user-select: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width: 768px) {

  .chapter-two {
    min-height: 720px;
  }

  .chapter-two__ornament {
    width: 210px;

    opacity: 0.68;
  }

  .chapter-two__content {
    min-height: 720px;

    padding-top: 165px;
    padding-right: 24px;
    padding-bottom: 250px;
    padding-left: 24px;
  }

  /* Kicker Chapter Two sengaja TIDAK di-override di sini.
     Ia mewarisi .hero-kicker (font-size: 11px, letter-spacing: 0.18em)
     agar identik dengan Chapter One, Prologue, dan The Main Characters. */

  .chapter-two__title {
    font-size: 42px;
  }

  .chapter-two__copy {
    max-width: 330px;

    margin-top: 21px;

    font-size: 17px;
    line-height: 1.7;
  }

  .chapter-two__landscape {
    width: 145%;
    max-width: none;
    bottom: -3px;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 480px) {

  .chapter-two {
    min-height: 100svh;
  }

  .chapter-two__ornament {
    width: 175px;

    opacity: 0.64;
  }

  .chapter-two__content {
    min-height: 100svh;

    padding-top: 120px;
    padding-bottom: 225px;
  }

  .chapter-two__title {
    font-size: 38px;
  }

  .chapter-two__copy {
    max-width: 300px;

    font-size: 16px;

    line-height: 1.7;
  }

  .chapter-two__landscape {
    width: 250%;
    max-width: none;
    bottom: -3px;
  }
}

/* =========================================================
   CHAPTER TWO — REVEAL ANIMATION
   Tahap A — CSS only
   ========================================================= */


/* ---------------------------------------------------------
   Initial state
   Hanya aktif ketika JavaScript tersedia.
   Jika JS mati, content tetap terlihat normal.
   --------------------------------------------------------- */

.js .chapter-two__ornament {
  opacity: 0;
  transform: translateY(-10px);

  transition:
    opacity 0.8s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}


.js .chapter-two__content > .hero-kicker {
  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


.js .chapter-two__divider {
  opacity: 0;
  transform: translateY(6px) scaleX(0.75);

  transition:
    opacity 0.5s ease,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}


.js .chapter-two__title {
  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity 0.7s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


.js .chapter-two__copy {
  opacity: 0;
  transform: translateY(10px);

  transition:
    opacity 0.65s ease,
    transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


.js .chapter-two__date {
  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity 0.55s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}


.js .chapter-two__landscape {
  opacity: 0;
  transform: translateX(-50%) translateY(18px) scale(1.025);

  transition:
    opacity 1.3s ease,
    transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ---------------------------------------------------------
   Revealed state
   JavaScript nanti hanya perlu menambahkan:
   .chapter-two.is-revealed
   --------------------------------------------------------- */

.js .chapter-two.is-revealed .chapter-two__ornament {
  opacity: 0.72;
  transform: translateY(0);
}


.js .chapter-two.is-revealed .chapter-two__content > .hero-kicker {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.08s;
}


.js .chapter-two.is-revealed .chapter-two__divider {
  opacity: 1;
  transform: translateY(0) scaleX(1);

  transition-delay: 0.2s;
}


.js .chapter-two.is-revealed .chapter-two__title {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.32s;
}


.js .chapter-two.is-revealed .chapter-two__copy {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.46s;
}


.js .chapter-two.is-revealed .chapter-two__date {
  opacity: 1;
  transform: translateY(0);

  transition-delay: 0.6s;
}


.js .chapter-two__landscape {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 28px);
}

.js .chapter-two__landscape.is-visible {
  animation:
    chapterTwoLandscapeReveal
    1.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    0s
    forwards;
}

/* ---------------------------------------------------------
   Ornament kanan
   Skala cermin memakai properti `scale` agar animasi `transform`
   tetap bebas mengatur gerakan reveal vertikal.
   --------------------------------------------------------- */

.js .chapter-two__ornament--right {
  transform: translateY(-10px);
}

.js .chapter-two.is-revealed .chapter-two__ornament--right {
  transform: translateY(0);
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .js .chapter-two__ornament,
  .js .chapter-two__content > .hero-kicker,
  .js .chapter-two__divider,
  .js .chapter-two__title,
  .js .chapter-two__copy,
  .js .chapter-two__date,
  .js .chapter-two__landscape,

  .js .chapter-two.is-revealed .chapter-two__ornament,
  .js .chapter-two.is-revealed .chapter-two__content > .hero-kicker,
  .js .chapter-two.is-revealed .chapter-two__divider,
  .js .chapter-two.is-revealed .chapter-two__title,
  .js .chapter-two.is-revealed .chapter-two__copy,
  .js .chapter-two.is-revealed .chapter-two__date,
  .js .chapter-two.is-revealed .chapter-two__landscape {

    opacity: 1;
    transform: none;

    transition: none;
  }
}

/* =========================================================
   CHAPTER TWO — CINEMATIC VISUAL REVEAL
   Visual assets appear after the typography.
   ========================================================= */

.js .chapter-two__ornament,
.js .chapter-two__landscape {
  opacity: 0;
  visibility: hidden;
}


/* ---------------------------------------------------------
   Ornament
   --------------------------------------------------------- */

.js .chapter-two.is-revealed .chapter-two__ornament {
  animation:
    chapterTwoOrnamentReveal
    1.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.3s
    forwards;
}


/* ---------------------------------------------------------
   Landscape
   --------------------------------------------------------- */

.js .chapter-two.is-revealed .chapter-two__landscape {
  animation:
    chapterTwoLandscapeReveal
    1.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.55s
    forwards;
}


/* ---------------------------------------------------------
   Ornament animation
   --------------------------------------------------------- */

@keyframes chapterTwoOrnamentReveal {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
  }

  to {
    opacity: 0.78;
    visibility: visible;
    transform: translateY(0);
  }
}


/* ---------------------------------------------------------
   Landscape animation
   --------------------------------------------------------- */

@keyframes chapterTwoLandscapeReveal {
  from {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 28px);
  }

  to {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .js .chapter-two__ornament,
  .js .chapter-two__landscape {
    animation: none !important;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

}

/* =========================================================
   CHAPTER TWO — SCROLL REVEAL KONTEN ACARA
   Countdown, jadwal acara, dan tombol peta muncul bertahap
   mengikuti scroll pengguna: tiap elemen hanya dianimasikan
   saat elemennya sendiri mulai terlihat di viewport.
   ========================================================= */

.js .chapter-two__countdown,
.js .chapter-two__events > *,
.js .chapter-two__map {
  opacity: 0;
  transform: translateY(22px);

  transition:
    opacity 0.7s ease,
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .chapter-two__countdown.is-visible,
.js .chapter-two__events.is-visible > *,
.js .chapter-two__map.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Urutan masuk: Akad, pemisah, lalu Resepsi. */
.js .chapter-two__events.is-visible > :nth-child(1) { transition-delay: 0.05s; }
.js .chapter-two__events.is-visible > :nth-child(2) { transition-delay: 0.22s; }
.js .chapter-two__events.is-visible > :nth-child(3) { transition-delay: 0.38s; }

@media (prefers-reduced-motion: reduce) {
  .js .chapter-two__countdown,
  .js .chapter-two__events > *,
  .js .chapter-two__map,
  .js .chapter-two__countdown.is-visible,
  .js .chapter-two__events.is-visible > *,
  .js .chapter-two__map.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================
   CHAPTER TWO — EVENT DETAILS
   Konten "The Wedding Day" kini menyatu di dalam section
   Chapter Two (#fh5co-couple), dengan penamaan chapter-two__*.
   ========================================================= */

.chapter-two__countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  margin: 42px auto 0;

  text-align: center;
}

.chapter-two__countdown .simply-section {
   position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 92px;
  min-width: 92px;
  height: 82px;

  margin: 0 5px;
  padding: 10px 8px;

  background: rgba(255, 250, 241, 0.62) !important;
  border: 1px solid rgba(150, 112, 72, 0.28) !important;
  border-radius: 3px !important;
  box-shadow: 0 5px 16px rgba(86, 60, 35, 0.06) !important;
}

.chapter-two__countdown .simply-amount {
  display: block;

  font-family: "Cormorant Garamond", serif;
  font-size: 42px;
  font-weight: 400;
  line-height: 1;

  letter-spacing: 0.02em;

  color: #6d5239 !important;
}

.chapter-two__countdown .simply-word {
  display: block;

  margin-top: 9px;

  font-family: "Cinzel", serif;
  font-size: 8px;
  font-weight: 500;
  line-height: 1.5;

  letter-spacing: 0.24em;
  text-transform: uppercase;

  color: rgba(126, 91, 54, 0.72) !important;
}

/* Tanggal (Sabtu · 17 · Oktober · 2026).
   Satu-satunya sumber ukuran tanggal; aturan .chapter-two__date lama yang
   tidak pernah aktif sudah dihapus agar ukurannya tidak berubah. */
.chapter-two__date {
  margin-top: 30px;

  font-family: "Cinzel", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;

  text-transform: uppercase;

  color: rgba(126, 91, 54, 0.82);
}


.chapter-two__panel {
  position: relative;
  z-index: 2;
  width: min(1000px, calc(100% - 48px));
  margin: 28px auto 0;
  padding: 0px 40px 44px;
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
}

.chapter-two__panel::before {
  display: none;
}

.chapter-two__schedule {
  margin-top: 18px;
}

.chapter-two__events {
  position: relative;

  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;

  max-width: 960px;
  margin: 0 auto;
}

.chapter-two__item {
  padding: 0 55px;

  text-align: center;
}

.chapter-two__item h3 {
  margin: 10px 0 26px;

  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.1;

  color: #624b37;
}

.chapter-two__detail {
  margin-top: 20px;
}

.chapter-two__detail-label {
  display: block;

  margin-bottom: 6px;

  font-family: "Cinzel", serif;
  font-size: 8px;
  font-weight: 500;

  letter-spacing: 0.22em;
  text-transform: uppercase;

  color: rgba(126, 91, 54, 0.56);
}

.chapter-two__detail strong {
  display: block;

  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;

  color: #6d5239;
}

.chapter-two__detail span:not(.chapter-two__detail-label) {
  display: block;

  margin-top: 3px;

  font-family: "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;

  color: rgba(98, 75, 55, 0.72);
}

.chapter-two__detail-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.chapter-two__detail-heading i {
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: rgba(126, 91, 54, 0.78);
}

.chapter-two__detail-heading strong {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  color: #624b37;
}


/* =========================================================
   PEMISAH TENGAH
   ========================================================= */

.chapter-two__between {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 210px;
}

.chapter-two__between span {
  width: 1px;
  flex: 1;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(150, 112, 72, 0.42),
    transparent
  );
}

.chapter-two__between b {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 30px;

  flex-shrink: 0;

  font-family: "Cormorant Garamond", serif;
  font-size: 13px;
  font-weight: 400;

  color: rgba(150, 112, 72, 0.78);
}

.chapter-two__map {
  margin-top: 24px;
}

.chapter-two__map p {
  margin: 0 auto 19px;

  font-family: "Cormorant Garamond", serif;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.65;

  color: rgba(98, 75, 55, 0.72);
}

.chapter-two__map-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 250px;
  min-height: 44px;
  padding: 10px 22px;
  margin-top: 12px;

  border: 1px solid rgba(126, 91, 54, 0.42);
  border-radius: 999px;

  background: rgba(126, 110, 78, 0.82);

  font-family: "Cinzel", serif;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;

  color: #fffaf1;

  box-shadow:
    0 4px 14px rgba(86, 60, 35, 0.06);

  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.chapter-two__map-button:hover,
.chapter-two__map-button:focus {
  background: rgba(98, 88, 63, 0.92);
  border-color: rgba(126, 91, 54, 0.62);
  box-shadow: 0 7px 18px rgba(86, 60, 35, 0.10);
  transform: translateY(-1px);
}

/* Isi Chapter Two menggunakan Lora. Identitas tipografi utama tetap
   dipertahankan: kicker, judul, tanggal, serta judul Akad Nikah/Resepsi
   tidak termasuk dalam aturan ini. */
.chapter-two__copy,
.chapter-two__countdown .simply-amount,
.chapter-two__countdown .simply-word,
.chapter-two__detail-label,
.chapter-two__detail strong,
.chapter-two__detail span:not(.chapter-two__detail-label),
.chapter-two__detail-heading strong,
.chapter-two__map p,
.chapter-two__map-button {
  font-family: "Lora", Georgia, serif;
}

.chapter-two__map-button i {
  font-size: 13px;
  color: #fffaf1;
}

.chapter-two__map-button-label span + span::before {
  content: " ";
}


@media screen and (max-width: 768px) {

  .chapter-two__item {
    padding: 0 20px;
  }

  .chapter-two__item h3 {
    font-size: 29px;
  }

  .chapter-two__countdown {
    margin-top: 34px;
  }

  .chapter-two__countdown .simply-section {
    min-width: 68px;
    padding: 0 10px;
  }

  .chapter-two__countdown .simply-amount {
    font-size: 32px;
  }

  .chapter-two__countdown .simply-word {
    margin-top: 7px;
    font-size: 7px;
    letter-spacing: 0.18em;
  }

  .chapter-two__countdown .simply-section:not(:last-child)::after {
    top: 9px;
    right: -1px;
    font-size: 11px;
  }

  .chapter-two__date {
    margin-top: 25px;
    font-size: 20px;
}

 .chapter-two__panel {
    width: calc(100% - 32px);

    margin-top: 48px;
    padding: 0px 24px 38px;
  }

  .chapter-two__panel::before {
    inset: 7px;
  }

  .chapter-two__schedule {
    margin-top: 60px;
  }

  .chapter-two__events {
    display: flex;
    flex-direction: column;

    max-width: 520px;
  }

  .chapter-two__item {
    padding: 0 20px;
  }

  .chapter-two__item h3 {
    margin-bottom: 22px;
    font-size: 29px;
  }

  .chapter-two__between {
    flex-direction: row;

    min-height: auto;

    margin: 34px 0;
  }

  .chapter-two__between span {
    width: auto;
    height: 1px;
    flex: 1;

    background: linear-gradient(
      to right,
      transparent,
      rgba(150, 112, 72, 0.42),
      transparent
    );
  }

  .chapter-two__between b {
    width: 30px;
    height: auto;

    font-size: 12px;
  }

  .chapter-two__map {
    margin-top: 36px;
    padding: 0 18px;
  }

  .chapter-two__map-button {
    font-size: 15px;
  }
}

@media screen and (max-width: 480px) {

  .chapter-two__countdown {
    margin-top: 30px;
  }

  .chapter-two__countdown .simply-section {
    min-width: 58px;
    padding: 0 7px;
  }

  .chapter-two__countdown .simply-amount {
    font-size: 29px;
  }

  .chapter-two__countdown .simply-word {
    font-size: 6.5px;
    letter-spacing: 0.15em;
  }

  .chapter-two__countdown .simply-section:not(:last-child)::after {
    top: 8px;
    font-size: 10px;
  }

  .chapter-two__date {
    margin-top: 23px;

    font-size: 20px;
  }

   .chapter-two__panel {
    width: calc(100% - 22px);

    margin-top: 42px;
    padding: 0px 16px 34px;
  }

  .chapter-two__panel::before {
    inset: 6px;
  }

  .chapter-two__schedule {
    margin-top: 52px;
  }

  .chapter-two__item {
    padding: 0 12px;
  }

  .chapter-two__item h3 {
    margin-top: 9px;
    margin-bottom: 8px;

    font-size: 28px;
  }

  .chapter-two__detail {
    margin-top: 17px;
  }

  .chapter-two__detail-label {
    font-size: 6.5px;
    letter-spacing: 0.18em;
  }

  .chapter-two__detail strong {
    font-size: 18px;
  }

  .chapter-two__detail span:not(.chapter-two__detail-label) {
    font-size: 14px;
  }

  .chapter-two__between {
    margin: 30px 0;
  }
  .chapter-two__map-button {
    font-size: 15px;
  }
}



/* =========================================================
   CHAPTER TWO — REFINEMENT
   Penyempurnaan ukuran huruf, tata letak, dan tampilan
   untuk browser desktop maupun mobile.
   Hanya memakai font, warna, dan gambar yang sudah ada.
   ========================================================= */


/* ---------------------------------------------------------
   1) Ritme vertikal section
   Padding tetap, memakai clamp agar proporsional
   di semua lebar layar.
   --------------------------------------------------------- */

.chapter-two__content {
  padding-top: clamp(118px, 13vw, 168px);
  padding-bottom: clamp(210px, 26vw, 300px);
}


/* ---------------------------------------------------------
   2) Tipografi: judul, salinan, dan tanggal
   --------------------------------------------------------- */

.chapter-two__title {
  font-size: clamp(42px, 4.4vw, 56px);
  line-height: 1.03;
}

.chapter-two .chapter-two__copy {
  max-width: 540px;
  margin-top: 22px;
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.72;
}



/* ---------------------------------------------------------
   3) Countdown
   Memperbaiki struktur kotak (inner div) dan skalanya,
   serta mencegah overflow di layar kecil.
   --------------------------------------------------------- */

.chapter-two .chapter-two__countdown {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(28px, 3.4vw, 44px);
}

.chapter-two .chapter-two__countdown .simply-section {
  display: block;
  width: auto;
  min-width: clamp(74px, 8vw, 104px);
  height: auto;
  min-height: clamp(70px, 7.4vw, 92px);
  margin: 0;
  padding: 12px 14px;
}

.chapter-two .chapter-two__countdown .simply-section > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.chapter-two .chapter-two__countdown .simply-amount {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1;
}

.chapter-two .chapter-two__countdown .simply-word {
  margin-top: 8px;
  font-size: clamp(8px, 0.72vw, 10px);
  letter-spacing: 0.2em;
}


/* ---------------------------------------------------------
   4) Jadwal acara (Akad & Resepsi)
   --------------------------------------------------------- */

.chapter-two .chapter-two__events {
  align-items: stretch;
}

.chapter-two .chapter-two__item {
  padding: 0 clamp(18px, 4vw, 56px);
}

.chapter-two .chapter-two__item h3 {
  margin: 10px 0 24px;
  font-size: clamp(28px, 3vw, 36px);
}

.chapter-two .chapter-two__detail-heading strong {
  font-size: clamp(18px, 1.5vw, 20px);
}

.chapter-two .chapter-two__detail span:not(.chapter-two__detail-label) {
  font-size: clamp(15px, 1.3vw, 18px);
}


/* ---------------------------------------------------------
   5) Tombol peta
   --------------------------------------------------------- */

.chapter-two .chapter-two__map {
  margin-top: clamp(28px, 3vw, 40px);
}


/* ---------------------------------------------------------
   6) TABLET
   --------------------------------------------------------- */

@media screen and (max-width: 768px) {

  .chapter-two__content {
    padding-top: clamp(110px, 18vw, 150px);
    padding-right: 20px;
    padding-bottom: clamp(190px, 30vw, 230px);
    padding-left: 20px;
  }

  .chapter-two__ornament {
    width: clamp(150px, 42vw, 200px);
  }

  .chapter-two__title {
    font-size: clamp(34px, 8vw, 42px);
  }

  .chapter-two .chapter-two__copy {
    max-width: 340px;
    font-size: 16.5px;
  }


  .chapter-two__landscape {
    width: 150%;
  }

  .chapter-two .chapter-two__schedule {
    margin-top: 46px;
  }

  .chapter-two .chapter-two__events {
    max-width: 520px;
  }

  .chapter-two .chapter-two__item {
    padding: 0 18px;
  }

  .chapter-two .chapter-two__between {
    margin: 32px 0;
  }

  .chapter-two .chapter-two__map {
    padding: 0 16px;
    text-align: center;
  }

  .chapter-two .chapter-two__map-button {
    width: auto;
    min-width: 220px;
    max-width: 100%;
    padding: 9px 20px;
    font-size: 13px;
  }

  .chapter-two__map-button-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: 1.25;
  }

  .chapter-two__map-button-label span + span::before {
    content: none;
  }
}


/* ---------------------------------------------------------
   7) MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 480px) {

  .chapter-two__content {
    padding-top: 112px;
    padding-right: 16px;
    padding-bottom: 200px;
    padding-left: 16px;
  }

  /* Kicker Chapter Two mengikuti metrik global .hero-kicker
     (font-size: 11px, letter-spacing: 0.18em) supaya tampilannya
     sama dengan Chapter One, Prologue, dan The Main Characters. */

  .chapter-two__title {
    font-size: clamp(32px, 9vw, 38px);
  }

  .chapter-two .chapter-two__copy {
    max-width: 300px;
    font-size: 16px;
    line-height: 1.7;
  }

  .chapter-two__landscape {
    width: 210%;
  }

  .chapter-two .chapter-two__countdown {
    gap: 8px;
  }

  .chapter-two .chapter-two__countdown .simply-section {
    min-width: 62px;
    min-height: 60px;
    padding: 9px 8px;
  }

  .chapter-two .chapter-two__countdown .simply-amount {
    font-size: 26px;
  }

  .chapter-two .chapter-two__countdown .simply-word {
    font-size: 7.5px;
    letter-spacing: 0.14em;
  }

  .chapter-two .chapter-two__item h3 {
    margin-bottom: 20px;
    font-size: 27px;
  }

  .chapter-two .chapter-two__map-button {
    font-size: 12px;
  }
}

/* =========================================================
   WEDDING DU'A — FOR THE JOURNEY AHEAD
   Section lanjutan lanskap akhir Chapter Two (#fh5co-doa).

   Konsep    Scene: langit pagi cerah (bright morning sky),
   bukan sunset / golden hour.
   Urutan lapisan (belakang → depan):
     1. doa-base.webp       langit biru pagi sebagai dasar
     2. doa-cloud.webp      awan transparan, bergerak dengan CSS
     3. .doa-section__glow  gradien transisi cream → pale blue (hanya bagian
                             ATAS; menjaga transisi antar-section)
     4. kartu doa           focal point utama (paling depan)
   ========================================================= */

.doa-section {
  position: relative;

  overflow: hidden;
  isolation: isolate;

  min-height: 860px;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  /* Alas langit pagi: warna di-sample dari doa-base.png (area biru
     atas). Hanya sebagai alas bila gambar belum/gagal termuat —
     background utama tetap gambar, bukan gradient. */
  background: #d9e7f4;
  color: #594735;
}


/* ---------------------------------------------------------
   1) Langit pagi cerah — doa-base.webp
   Bright clear morning sky: pale blue + awan ivory.
   Crop `cover` + `center bottom` supaya bagian bawah (awan ivory)
   yang menyambung ke area kartu.
   --------------------------------------------------------- */

.doa-section__bg {
  position: absolute;
  inset: -12% 0;

  z-index: -3;

  background-image: url("../images/doa-base.png");
  background-image: image-set(
    url("../images/doa-base.webp") type("image/webp"),
    url("../images/doa-base.png") type("image/png")
  );

  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;

  pointer-events: none;
}

.doa-section__cloud {
  position: absolute;
  inset: -12% 0;

  z-index: -2;

  pointer-events: none;
}

.doa-section__cloud-drift {
  position: absolute;
  inset: 0 -7%;

  background-image: url("../images/doa-cloud.png");
  background-image: image-set(
    url("../images/doa-cloud.webp") type("image/webp"),
    url("../images/doa-cloud.png") type("image/png")
  );
  background-position: center bottom;
  background-size: cover;
  background-repeat: no-repeat;
}

.doa-section__leaf {
  position: absolute;
  z-index: 4;
  display: block;
  width: clamp(42px, 4vw, 60px);
  height: auto;
  opacity: 0.56;
  pointer-events: none;
  user-select: none;
}

.doa-section__leaf--one {
  top: 12%;
  left: 18%;
  transform: rotate(-28deg);
}

.doa-section__leaf--two {
  top: 34%;
  right: 16%;
  width: clamp(38px, 3.4vw, 52px);
  transform: rotate(54deg);
}

.doa-section__leaf--three {
  top: 62%;
  left: 9%;
  width: clamp(36px, 3.2vw, 48px);
  transform: rotate(76deg);
}

.doa-section__leaf--four {
  top: 12%;
  right: 28%;
  width: clamp(34px, 3vw, 46px);
  transform: rotate(18deg);
}

.doa-section__leaf--five {
  top: 28%;
  left: 34%;
  width: clamp(38px, 3.4vw, 52px);
  transform: rotate(-62deg);
}

.doa-section__leaf--six {
  top: 48%;
  right: 8%;
  width: clamp(34px, 3vw, 46px);
  transform: rotate(102deg);
}


/* ---------------------------------------------------------
   1b) Transisi Chapter Two → Wedding Du'a
   Landscape Chapter Two (promise_bottom.png) berakhir di atas
   dasar cream/ivory (#f3e8d8). Lapisan ini HANYA menutup bagian
   ATAS section dan melembutkan lompatan:

     cream ivory  →  ivory  →  ivory-blue  →  pale blue  →  langit pagi

   Warna stop pertama disamakan dengan dasar Chapter Two supaya
   sambungan antar-section tidak terbaca sebagai garis keras.
   Sisa section (bawah) TIDAK diwarnai cream: langit pagi tetap
   yang tampil. Bukan pengganti gambar — hanya jembatan transisi.
   --------------------------------------------------------- */

.doa-section__glow {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;

  z-index: -2;

  /* Area transisi ±200–320px, tidak pernah lebih. */
  height: clamp(200px, 26vh, 320px);

  background:
    linear-gradient(
      180deg,
      /* Warna dasar lanskap Chapter Two (promise_bottom.png) DIUKUR dari
         hasil render — bukan rata-rata aset — karena nadanya berubah
         mengikuti zoom `width` lanskap per breakpoint:
           1440px -> rgb(238,223,199)   768px -> rgb(230,213,192)
            390px -> rgb(222,202,179)
         Dipakai titik tengahnya rgb(230,213,189) supaya selisih di
         sambungan maksimal 8–11 di SEMUA lebar (sebelumnya 26–30 dan
         terbaca sebagai garis gelap). */
      #e6d5bd 0%,
      rgba(241, 228, 209, 0.98) 10%,
      rgba(246, 238, 227, 0.94) 24%,
      rgba(235, 238, 238, 0.82) 42%,
      rgba(221, 233, 243, 0.62) 62%,
      rgba(210, 229, 246, 0.28) 82%,
      rgba(203, 224, 244, 0) 100%
    );

  pointer-events: none;
}


/* ---------------------------------------------------------
   4) Konten doa
   --------------------------------------------------------- */

.doa-section .container {
  position: relative;

  z-index: 3;
}

.doa-section__content {
  min-height: 860px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: flex-start;

  text-align: center;

  padding-top: clamp(120px, 12vw, 180px);
  /* Ruang bawah dikurangi (dulu clamp(190px, 26vw, 310px)): area kosong di
     bawah kartu terasa terlalu luas. Sisa ruang tetap cukup untuk benang
     penyambung (.doa-section__connector--bottom) + kabut .doa-section::after. */
  padding-bottom: clamp(140px, 14vw, 190px);
}


/* ---------------------------------------------------------
   5) Kartu doa — bentuk mengikuti Prologue
   --------------------------------------------------------- */

.doa-section__card.invitation-verse-card {
  position: relative;

  max-width: 880px;
  margin: 0 auto;

  border-color: rgba(176, 128, 88, 0.46);

  /* Kaca ivory transparan: langit pagi tetap terlihat samar di
     balik kartu, namun kontras teks tetap aman.
     Ukuran, border, corner, typografi, dan isi kartu TIDAK diubah. */
  background:
    linear-gradient(to bottom, transparent, rgba(172, 126, 84, 0.34), rgba(198, 158, 112, 0.6), rgba(172, 126, 84, 0.34), transparent) left 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(to bottom, transparent, rgba(172, 126, 84, 0.34), rgba(198, 158, 112, 0.6), rgba(172, 126, 84, 0.34), transparent) right 20px top 20px / 1px calc(100% - 40px) no-repeat,
    linear-gradient(180deg, rgba(255, 252, 247, 0.95), rgba(247, 239, 228, 0.9));

  box-shadow:
    0 30px 90px rgba(94, 63, 34, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 20px 0 0 -19px rgba(176, 128, 88, 0.55),
    inset -20px 0 0 -19px rgba(176, 128, 88, 0.55);

  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}


/* ---------------------------------------------------------
   5b) Nafas keluar section
   Section berikutnya berada di atas dasar putih. Lapisan ini hanya
   memberi kabut pagi yang sangat tipis di dasar section supaya
   perpindahan tidak terbaca sebagai garis keras di bagian bawah.
   Dipasang di z-index 2, jadi berada DI BAWAH konten .container
   (z-index 3) dan tidak pernah mengenai kartu.
   --------------------------------------------------------- */

.doa-section::after {
  content: "";

  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;

  z-index: 2;

  height: clamp(80px, 9vh, 130px);

  background:
    linear-gradient(
      0deg,
      rgba(252, 250, 246, 0.62) 0%,
      rgba(252, 250, 246, 0.3) 46%,
      rgba(252, 250, 246, 0) 100%
    );

  pointer-events: none;
}


/* ---------------------------------------------------------
   5c) Garis penyambung di atas & bawah kartu (pola Prologue)
   Prologue memakai sepasang benang vertikal: .prologue-connector (atas)
   + .invitation-verse::after (bawah) — lebar 3px, memudar di kedua
   ujung, dengan warna emas yang sama. Section Du'a kini punya pasangan
   yang sama supaya ritme antar-section seragam. WARNA BENANG
   rgba(190, 150, 106, 0.68) dipakai juga oleh .prologue-connector dan
   .invitation-verse::after di Prologue — ubah di kedua tempat bila perlu:
     - tepi luar berada 18–28px dari tepi section (sama seperti Prologue);
     - panjangnya mengikuti ruang padding (clamp), jadi ujung luar selalu
       memudar DI DALAM section dan ujung dalam menjorok ke balik kartu.
       Bagian yang masuk ke balik kartu tidak terlihat karena .container
       ber-z-index 3 dan berada setelah elemen ini di DOM.
   Warna emas hangat = serumpun dengan border/kicker/divider kartu.
   z-index 3: di atas langit/video (-3), glow transisi (-2), dan kabut
   bawah (2); tetap di bawah kartu.
   --------------------------------------------------------- */

.doa-section__connector {
  position: absolute;
  left: 50%;

  z-index: 3;

  width: 3px;
  height: clamp(120px, 15vw, 240px);

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(190, 150, 106, 0.68),
    transparent
  );

  pointer-events: none;
  transform: translateX(-50%);
}

.doa-section__connector--top {
  top: clamp(18px, 2.4vh, 28px);

  transform-origin: center top;
}

.doa-section__connector--bottom {
  bottom: clamp(18px, 2.4vh, 28px);

  height: clamp(140px, 18vw, 300px);

  transform-origin: center bottom;
}


/* ---------------------------------------------------------
   6) Tipografi doa
   --------------------------------------------------------- */

.doa-section__kicker {
  color: rgba(134, 92, 52, 0.86);
  text-shadow: none;
}

.doa-section__kicker::before,
.doa-section__kicker::after {
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(160, 116, 72, 0.48)
    );
}

.doa-section__title {
  margin: 6px 0 26px;

  color: #5c4632;
}

.doa-section__arabic {
  margin-bottom: 20px;
}

.doa-section__transliteration {
  max-width: 660px;
  margin: 0 auto 22px;

  color: #7c6a58;
  font-family: "Lora", serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.9;
}

.doa-section__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  width: min(100%, 260px);
  margin: 0 auto 22px;

  color: #8e6b5e;
  font-size: 12px;
  line-height: 1;
}

.doa-section__divider::before,
.doa-section__divider::after {
  content: "";

  flex: 1;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(166, 122, 94, 0.8),
      rgba(166, 122, 94, 0.95),
      transparent
    );
}

.doa-section__divider span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 26px;
  height: 26px;

  border: 1px solid rgba(166, 122, 94, 0.7);
  border-radius: 50%;

  background: rgba(255, 249, 242, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.doa-section__translation {
  max-width: 660px;

  color: #5f534d;
}

.doa-section__source {
  max-width: 560px;
  margin: 20px auto 0;
  padding-top: 16px;

  border-top: 1px solid rgba(168, 126, 84, 0.24);

  color: #877463;
  font-family: "Lora", serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.8;
}

.js .doa-section__bg,
.js .doa-section__cloud {
  opacity: 0;
}

.js .doa-section__leaf {
  opacity: 0;
}

.js .doa-section__cloud {
  transform: translate3d(0, 38px, 0);
}

.js .doa-section.is-revealed .doa-section__bg {
  animation: doaBaseReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.js .doa-section.is-revealed .doa-section__cloud {
  animation: doaCloudReveal 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

.js .doa-section.is-revealed .doa-section__cloud-drift {
  animation: doaCloudDrift 20s ease-in-out 1s infinite alternate;
}

.js .doa-section.is-revealed .doa-section__leaf--one {
  animation: doaLeafOne 8s ease-in-out 1.8s infinite;
}

.js .doa-section.is-revealed .doa-section__leaf--two {
  animation: doaLeafTwo 9s ease-in-out 3.2s infinite;
}

.js .doa-section.is-revealed .doa-section__leaf--three {
  animation: doaLeafThree 10s ease-in-out 5.1s infinite;
}

.js .doa-section.is-revealed .doa-section__leaf--four {
  animation: doaLeafFour 8.5s ease-in-out 1.95s infinite;
}

.js .doa-section.is-revealed .doa-section__leaf--five {
  animation: doaLeafFive 9.5s ease-in-out 3.35s infinite;
}

.js .doa-section.is-revealed .doa-section__leaf--six {
  animation: doaLeafSix 10.5s ease-in-out 5.25s infinite;
}


/* =========================================================
   WEDDING DU'A — REVEAL ANIMATION
   Dipicu satu kali oleh initDoaReveal() yang menambahkan
   kelas .doa-section.is-revealed saat section mulai terlihat.
   ========================================================= */


/* ---------------------------------------------------------
   State awal — hanya aktif ketika JavaScript tersedia
   --------------------------------------------------------- */

.js .doa-section__card {
  opacity: 0;

  transform: translateY(20px) scale(0.99);
}

.js .doa-section__card .prologue-corner {
  opacity: 0;
}

.js .doa-section__kicker,
.js .doa-section__title,
.js .doa-section__arabic,
.js .doa-section__transliteration,
.js .doa-section__divider,
.js .doa-section__translation,
.js .doa-section__source {
  opacity: 0;

  transform: translateY(12px);
}


/* ---------------------------------------------------------
   State revealed
   --------------------------------------------------------- */

.js .doa-section.is-revealed .doa-section__card {
  animation:
    doaCardReveal
    0.9s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.1s
    forwards;
}

.js .doa-section.is-revealed .doa-section__card .prologue-corner {
  animation:
    doaCornerReveal
    0.7s
    ease-out
    0.32s
    forwards;
}

.js .doa-section.is-revealed .doa-section__kicker,
.js .doa-section.is-revealed .doa-section__title,
.js .doa-section.is-revealed .doa-section__arabic,
.js .doa-section.is-revealed .doa-section__transliteration,
.js .doa-section.is-revealed .doa-section__divider,
.js .doa-section.is-revealed .doa-section__translation,
.js .doa-section.is-revealed .doa-section__source {
  animation:
    doaReveal
    0.85s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.js .doa-section.is-revealed .doa-section__kicker { animation-delay: 0.35s; }
.js .doa-section.is-revealed .doa-section__title { animation-delay: 0.5s; }
.js .doa-section.is-revealed .doa-section__arabic { animation-delay: 0.66s; }
.js .doa-section.is-revealed .doa-section__transliteration { animation-delay: 0.82s; }
.js .doa-section.is-revealed .doa-section__divider { animation-delay: 0.94s; }
.js .doa-section.is-revealed .doa-section__translation { animation-delay: 1.06s; }
.js .doa-section.is-revealed .doa-section__source { animation-delay: 1.2s; }


/* Garis penyambung (5c): ikut "digambar" saat section tereveal — dari tepi
   section ke arah kartu, sesuai transform-origin yang sudah diatur pada
   .doa-section__connector--top / --bottom. */

.js .doa-section__connector {
  opacity: 0;
}

.js .doa-section.is-revealed .doa-section__connector {
  animation:
    doaThreadDraw
    1.1s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

.js .doa-section.is-revealed .doa-section__connector--top { animation-delay: 0.34s; }
.js .doa-section.is-revealed .doa-section__connector--bottom { animation-delay: 0.2s; }


/* ---------------------------------------------------------
   Keyframes
   --------------------------------------------------------- */

@keyframes doaCardReveal {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.99);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes doaCornerReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.9;
  }
}

@keyframes doaReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

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

/* Benang penyambung: translateX(-50%) harus tetap ada di keyframes,
   karena animasi mengganti nilai transform milik elemen (penjaga posisi
   tengah) sambil menumbuhkan panjangnya. */
@keyframes doaThreadDraw {
  from {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.25);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes doaBaseReveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes doaCloudReveal {
  from { opacity: 0; transform: translate3d(0, 38px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes doaCloudDrift {
  from { transform: translate3d(-2.5%, 0, 0); }
  to { transform: translate3d(2.5%, 0, 0); }
}

@keyframes doaLeafOne {
  0%, 16% { opacity: 0; transform: translate3d(-10vw, -8vh, 0) rotate(-28deg); }
  24% { opacity: 0.72; }
  58% { opacity: 0; transform: translate3d(38vw, 28vh, 0) rotate(126deg); }
  100% { opacity: 0; transform: translate3d(38vw, 28vh, 0) rotate(126deg); }
}

@keyframes doaLeafTwo {
  0%, 18% { opacity: 0; transform: translate3d(8vw, -12vh, 0) rotate(54deg); }
  26% { opacity: 0.62; }
  60% { opacity: 0; transform: translate3d(-36vw, 34vh, 0) rotate(-110deg); }
  100% { opacity: 0; transform: translate3d(-36vw, 34vh, 0) rotate(-110deg); }
}

@keyframes doaLeafThree {
  0%, 20% { opacity: 0; transform: translate3d(-6vw, -16vh, 0) rotate(76deg); }
  28% { opacity: 0.58; }
  62% { opacity: 0; transform: translate3d(42vw, 22vh, 0) rotate(164deg); }
  100% { opacity: 0; transform: translate3d(42vw, 22vh, 0) rotate(164deg); }
}

@keyframes doaLeafFour {
  0%, 16% { opacity: 0; transform: translate3d(8vw, -10vh, 0) rotate(18deg); }
  24% { opacity: 0.54; }
  58% { opacity: 0; transform: translate3d(-32vw, 32vh, 0) rotate(-126deg); }
  100% { opacity: 0; transform: translate3d(-32vw, 32vh, 0) rotate(-126deg); }
}

@keyframes doaLeafFive {
  0%, 18% { opacity: 0; transform: translate3d(-8vw, -8vh, 0) rotate(-62deg); }
  26% { opacity: 0.66; }
  60% { opacity: 0; transform: translate3d(34vw, 30vh, 0) rotate(118deg); }
  100% { opacity: 0; transform: translate3d(34vw, 30vh, 0) rotate(118deg); }
}

@keyframes doaLeafSix {
  0%, 20% { opacity: 0; transform: translate3d(10vw, -14vh, 0) rotate(102deg); }
  28% { opacity: 0.5; }
  62% { opacity: 0; transform: translate3d(-40vw, 26vh, 0) rotate(-148deg); }
  100% { opacity: 0; transform: translate3d(-40vw, 26vh, 0) rotate(-148deg); }
}


/* ---------------------------------------------------------
   Reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .js .doa-section__card,
  .js .doa-section__card .prologue-corner,
  .js .doa-section__bg,
  .js .doa-section__cloud,
  .js .doa-section__cloud-drift,
  .js .doa-section__leaf,
  .js .doa-section__kicker,
  .js .doa-section__title,
  .js .doa-section__arabic,
  .js .doa-section__transliteration,
  .js .doa-section__divider,
  .js .doa-section__translation,
  .js .doa-section__source {
    animation: none !important;

    opacity: 1;
    transform: none;
  }

  .js .doa-section__leaf {
    animation: none !important;
    opacity: 0.42;
  }

  /* Benang penyambung: JANGAN memakai `transform: none` seperti kelompok di
     atas, karena akan menghapus translateX(-50%) sehingga benang melenceng
     dari titik tengah kartu. Cukup matikan animasinya. */
  .js .doa-section__connector {
    animation: none !important;

    opacity: 1;
  }

  /* Tampilkan scene statis ketika pengguna meminta gerakan dikurangi. */
}


/* ---------------------------------------------------------
   7) TABLET
   --------------------------------------------------------- */

@media screen and (max-width: 992px) {

  .doa-section__glow {
    height: clamp(190px, 24vh, 280px);
  }

  .doa-section__content {
    padding-top: clamp(110px, 16vw, 160px);
    /* Dulu clamp(170px, 26vw, 230px) — jarak bawah dikurangi. */
    padding-bottom: clamp(130px, 16vw, 160px);
  }

}


/* ---------------------------------------------------------
   8) MOBILE
   --------------------------------------------------------- */

@media screen and (max-width: 768px) {

  .doa-section {
    /* Mobile: section memenuhi satu layar penuh (dulu min-height: 0),
       sehingga saat user scroll sampai Wedding Du'a seluruh tinggi layar
       milik section ini — tidak diintip/dipotong oleh section tetangga.
       `100vh` dipakai karena di browser mobile nilai ini = viewport
       terbesar (URL bar tersembunyi), jadi section selalu menutupi layar. */
    min-height: 100vh;
  }

  .doa-section__glow {
    height: clamp(180px, 28vh, 240px);
  }

  .doa-section__content {
    min-height: 100vh;

    /* Kartu selalu mulai dari padding-top (tidak pernah terpotong di atas),
       lalu di tengah bila masih ada sisa ruang — `safe center` mencegah
       overflow ke atas pada layar pendek. Browser lama mengabaikan
       deklarasi ini dan memakai flex-start dari aturan dasar (aman). */
    justify-content: safe center;

    padding-top: clamp(96px, 18vw, 130px);
    padding-right: 20px;
    /* Dulu clamp(150px, 34vw, 200px) — jarak bawah dikurangi. */
    padding-bottom: clamp(110px, 22vw, 140px);
    padding-left: 20px;
  }

  .doa-section__connector {
    /* Perbaikan iPhone 16 Pro Max dll: di layar tinggi, `safe center` bisa
       mendorong kartu cukup jauh ke bawah (contoh 440x956: sisa ruang
       ±190px -> kartu turun ±95px), sehingga benang sepanjang versi desktop
       berhenti di tengah langit dan terlihat TERPUTUS dari kartu.
       Karena itu di mobile benang dibuat jauh lebih panjang: ujung luar
       tetap memudar DI DALAM section, sedangkan ujung dalam menjorok dalam
       ke balik kartu sehingga selalu tersambung (bagian di balik kartu tidak
       kasat mata). Panjangnya tetap aman — selalu lebih pendek dari
       padding + tinggi kartu, jadi tidak pernah muncul lagi di sisi lain. */
    height: clamp(260px, 42vh, 440px);
  }

  .doa-section__title {
    font-size: clamp(28px, 7.4vw, 34px);
  }

  .doa-section__transliteration {
    font-size: 13px;
  }

  .doa-section__divider {
    width: min(100%, 220px);
  }

  .doa-section__source {
    font-size: 11.5px;
  }

}


@media screen and (max-width: 480px) {

  .doa-section__glow {
    height: clamp(165px, 30vh, 215px);
  }

  .doa-section__content {
    padding-top: 92px;
    padding-right: 16px;
    /* Dulu 160px — jarak bawah dikurangi. */
    padding-bottom: 118px;
    padding-left: 16px;
  }

  /* Kicker Du'a = label terpanjang ("For the Journey Ahead").
     Aturan lama memendekkan garisnya jadi 18px di semua layar <=480px,
     sehingga tampak berbeda dari section lain yang tetap 32px.
     Sekarang:
       - label dikunci satu baris (white-space: nowrap);
       - garis sisi ikut lebar layar agar kicker selalu center dan tidak
         keluar dari kartu. Content box kartu = vw - 65 (inset section) -
         40 (padding kartu 20px), label "For the Journey Ahead" = 188px
         (Cinzel 11px, letter-spacing 1.98px), jarak ke teks = 12px, jadi
           d = (vw - 105 - 188) / 2 - 12 = 50vw - 159px
         di-clamp 16px..32px. Artinya 32px x 1px + jarak 12px (identik
         dengan Chapter One, Prologue, The Main Characters, dan Chapter
         Two) untuk semua lebar >= ~382px, lalu menyusut proporsional
         di bawah itu. Di <=347px garis disembunyikan (lihat blok setelah
         ini) supaya label tetap center di dalam kartu. */
  .doa-section__kicker {
    white-space: nowrap;
  }

  .doa-section__kicker::before,
  .doa-section__kicker::after {
    width: clamp(16px, calc(50vw - 159px), 32px);
    flex: 0 0 auto;
  }

  .doa-section__card.invitation-verse-card {
    max-width: 100%;
  }

}


/* Layar sangat sempit (<=347px): label Du'a + jarak 12px sudah memenuhi
   content box kartu, jadi garis sisi disembunyikan supaya kicker tetap
   center dan tidak keluar dari kartu. Di atas 347px garis tampil normal
   (32px penuh mulai ~380px, sama seperti section lain). */
@media screen and (max-width: 347px) {

  .doa-section__kicker::before,
  .doa-section__kicker::after {
    display: none;
  }

}

/* =========================================================
   A LITTLE MORE US
   Personal memories & wedding portraits
   ========================================================= */

.more-us-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;

  /* Padding atas menampung jembatan warna dari Wedding Du'a + ornamen
     sudut Chapter Two + botanikal, supaya tidak ada yang menimpa judul. */
  padding: 200px 0 0;

  /* Palet yang sama dengan .chapter-two (alas + warna teks) supaya
     section ini terbaca sebagai bagian dari lembar parchment yang sama. */
  background: #f3e8d8;
  color: #594735;
}

/* Gambar di section ini berformat ganda: <source> WebP (jauh lebih ringan)
   + <img> PNG sebagai fallback. Agar pembungkus <picture> tidak mengubah
   layout (foto intro adalah flex item, foto collage & portrait diukur
   oleh CSS), pembungkusnya dibuat "tembus" — jadi <img> tetap anak
   langsung seperti sebelumnya. */
.more-us-section picture {
  display: contents;
}


/* =========================================================
   A LITTLE MORE US — PARCHMENT & ORNAMEN
   Berbagi "kertas" dengan Chapter Two: aset, crop, dan ornamen yang
   sama, supaya kedua section terbaca sebagai satu lembar yang sama.
   ========================================================= */

/* ---------------------------------------------------------
   Parchment

   Aset, crop (`cover` + `center center`), dan urutan z-index sengaja
   identik dengan .chapter-two__bg — hanya lapisan radial "soft
   atmospheric light" Chapter Two yang tidak dipakai, karena di sini
   foto sudah menjadi fokus.
   --------------------------------------------------------- */

.more-us-parchment {
  position: absolute;
  inset: 0;

  z-index: -3;

  /* WebP quality 80 untuk browser modern, PNG sebagai fallback —
     aset yang sama dengan Chapter Two. */
  background-image: url("../images/promise_bg.png");
  background-image: -webkit-image-set(
    url("../images/promise_bg.webp") type("image/webp"),
    url("../images/promise_bg.png") type("image/png")
  );
  background-image: image-set(
    url("../images/promise_bg.webp") type("image/webp"),
    url("../images/promise_bg.png") type("image/png")
  );
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  pointer-events: none;
}


/* ---------------------------------------------------------
   Jembatan warna di KEDUA tepi section

   ::before — Wedding Du'a (langit pagi) → parchment
      Warna pembuka TIDAK lagi memakai "pale blue" langka. Tepi bawah
      Wedding Du'a sebenarnya IVORY hangat, karena .doa-section__bg
      di-crop `center bottom` — bukan biru langit seperti yang diasumsikan
      versi lama. Nilai pembukanya sekarang diukur ulang dari render dan
      disamakan dengan baris terakhir section sebelumnya; angka & alasannya
      ditulis di dalam blok .more-us-section::before di bawah.
      Alpha terakhir tetap 0, jadi baris paling bawah otomatis =
      promise_bg milik section ini.

   ::after — parchment → RSVP (#fh5co-started)
     Pola sama dengan .chapter-two::after (bayangan sepia yang menempel
     di tepi seam lalu memudar), hanya arahnya dibalik. Halaman parchment
     "ditutup" dulu sebelum RSVP mulai — TIDAK ada blok warna baru
     (pengganti .memory-transition yang sudah dihapus).

     INVARIANT SAMBUNGAN: baris terakhir section ini = parchment +
     wash di bawah = rgb(195, 177, 156), hasil ukur render di 1440 /
     1100 / 768 / 375 px. Warna itu WAJIB sama dengan stop pertama
     .rsvp-scene__bridge di sisi scene (lihat css/style.css, bagian
     "Jembatan warna — A Little More Us → RSVP"): itulah yang membuat
     peralihan ke langit tidak terbaca sebagai garis potong. Kalau
     wash di bawah diubah, stop pertama jembatan ikut disesuaikan.

   Keduanya z-index -1: di atas parchment (-3), tapi tetap di bawah
   ornamen (1), kolase foto, dan teks.
   --------------------------------------------------------- */

.more-us-section::before,
.more-us-section::after {
  content: "";

  position: absolute;
  right: 0;
  left: 0;

  z-index: -1;

  pointer-events: none;
}

.more-us-section::before {
  top: 0;

  height: clamp(150px, 20vw, 200px);

  /* Warna pembuka = baris TERAKHIR Wedding Du'a, hasil ukur render
     (tools/measure-seam.js), BUKAN warna langit "pale blue" seperti
     versi lama:

       1440 px -> rgb(245, 239, 232)
        768 px -> rgb(243, 237, 231)
        390 px -> rgb(240, 236, 233)

     Alasan: .doa-section__bg di-crop `center bottom`, jadi tepi bawah
     section itu bukan biru langit melainkan AWAN IVORY (putih hangat).
     Versi lama memulai jembatan dengan rgb(237, 239, 242) yang dingin,
     sehingga tepat di seam warna berbalik dari ivory hangat ke biru
     dingin (lompatan -8/0/+10 di 1440, -6/+2/+11 di 768, -3/+3/+9 di
     390) — inilah yang terbaca sebagai garis potong.

     Nilai 244/238/231 dipakai karena selisih maksimumnya cuma 1-4 dari
     ketiga lebar di atas, jadi jaraknya di seam praktis nol di semua
     breakpoint. Setelah itu alpha turun ke 0, jadi baris terakhir
     otomatis = promise_bg milik section ini dan tidak ada warna baru. */
  background: linear-gradient(
    to bottom,
    rgb(244, 238, 231) 0%,
    rgba(245, 238, 229, 0.94) 14%,
    rgba(246, 237, 226, 0.82) 28%,
    rgba(246, 236, 223, 0.66) 42%,
    rgba(247, 236, 222, 0.48) 56%,
    rgba(247, 237, 225, 0.28) 72%,
    rgba(247, 239, 228, 0.11) 86%,
    rgba(247, 241, 231, 0) 100%
  );
}

.more-us-section::after {
  bottom: 0;

  height: clamp(160px, 22vw, 240px);

  /* --bridge Chapter Two: rgba(102, 84, 68). */
  background: linear-gradient(
    to top,
    rgba(102, 84, 68, 0.30) 0%,
    rgba(102, 84, 68, 0.19) 12%,
    rgba(102, 84, 68, 0.10) 26%,
    rgba(102, 84, 68, 0.045) 45%,
    rgba(102, 84, 68, 0.015) 66%,
    rgba(102, 84, 68, 0) 100%
  );
}


/* ---------------------------------------------------------
   Ornamen sudut Chapter Two

   Elemennya memakai aset & kelas Chapter Two (.chapter-two__ornament)
   sehingga opacity (0.72), skala (min(300px, 25vw) + override
   tablet/mobile-nya), warna, dan keyframes reveal-nya PERSIS sama —
   tidak ada nilai visual yang diduplikasi di sini. Kelas
   .more-us-ornament hanya menambah posisi `top` (Chapter Two: 60px).
   --------------------------------------------------------- */

.more-us-ornament {
  /* Dinaikkan dari 60px supaya tidak bertabrakan dengan jembatan warna
     di tepi atas section ini. */
  top: 90px;
}

/* Rentang tablet (769–1100px): kolom teks intro lebih sempit sehingga
   ekor ornamen nyaris menyentuh kicker. Ukurannya dikecilkan sedikit di
   rentang ini saja; di desktop lebar ornamen tetap sama dengan
   Chapter Two (min(300px, 25vw)). */
@media screen and (min-width: 769px) and (max-width: 1100px) {
  .more-us-ornament {
    width: min(210px, 20vw);
  }
}

/* Reveal memakai keyframes milik Chapter Two (chapterTwoOrnamentReveal),
   dipicu oleh .more-us-section.is-revealed (initMoreUsReveal() di
   index.html). State awal (opacity 0 + visibility hidden) sudah
   diwarisi dari `.js .chapter-two__ornament`. */
.js .more-us-section.is-revealed .more-us-ornament {
  opacity: 0.72;
  transform: translateY(0);

  animation:
    chapterTwoOrnamentReveal
    1.2s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.3s
    forwards;
}


/* Catatan: seluruh blok "Botanikal storybook" (.more-us-botanical:
   sulur intro + sulur kiri/kanan closing) dan fleuron ❧ sudah DIHAPUS
   dari section ini sesuai arahan revisi visual. Satu-satunya dekorasi
   yang tersisa adalah ornamen Chapter Two (promise_ornamen_left/right)
   dan pembatas .more-us-divider (gold). */


/* ---------------------------------------------------------
   Closing — kalimat terakhir di halaman parchment

   Blok terakhir section; pengganti blok navy .memory-transition yang
   sudah dihapus. Padding bawah dibuat lega supaya ada ruang bernapas
   sekaligus tempat jembatan ::after memudar menuju RSVP.
   --------------------------------------------------------- */

.more-us-closing {
  position: relative;

  padding: 18px 20px 82px;

  text-align: center;
}

/* ✦ memakai komponen .more-us-divider yang sudah ada (garis emas tipis
   di kedua sisi bintang) — di sini hanya dipusatkan. */
.more-us-closing .more-us-divider {
  max-width: 200px;

  margin: 0 auto 16px;
}

.more-us-closing__text {
  max-width: 640px;

  margin: 0 auto;

  /* Font dekoratif undangan ini (Javasoul) — dibesarkan karena ini
     kalimat penutup halaman. */
  font-family: "Javasoul", cursive;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: normal;

  line-height: 1.3;

  color: #624b37;

  text-shadow:
    0 2px 12px rgba(86, 60, 35, 0.10);
}

/* Aksen penutup kecil: diamond dan dua garis tipis, selaras dengan divider
   tanpa memperkenalkan ornamen botanikal baru. */
.more-us-closing__ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 64px;
  height: 14px;
  margin: 14px auto 0;

  opacity: 0.52;
}

.more-us-closing__ornament::before,
.more-us-closing__ornament::after {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(161, 123, 63, 0.72));
}

.more-us-closing__ornament::after {
  transform: scaleX(-1);
}

.more-us-closing__ornament span {
  width: 5px;
  height: 5px;
  border: 1px solid rgba(161, 123, 63, 0.84);
  transform: rotate(45deg);
}

/* =========================================================
   INTRO
   ========================================================= */

.more-us-intro {
  width: min(1120px, calc(100% - 40px));

  margin: 0 auto 100px;

  display: grid;

  /* Kolom foto dibuat sedikit lebih lebar agar pusat foto bergeser mendekat
     ke teks. Foto dan frame tetap dipusatkan di kolomnya agar komposisi
     polaroid tidak terlihat berat ke satu sisi. */
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.86fr);

  align-items: center;
  gap: clamp(28px, 3vw, 42px);
}

.more-us-intro__text {
  text-align: left;
}

/* Kicker: memakai komponen global .hero-kicker — komponen yang sama dengan
   kicker Prologue, Main Characters, Chapter Two, dan Doa — supaya ukuran
   huruf (Cinzel 11px), letter-spacing 0.32em, dan garis gradasi di kedua
   sisinya benar-benar identik. Modifier ini hanya memetakan warnanya ke
   palet navy/emas section ini, persis pola .doa-section__kicker. */
.more-us-kicker {
  margin-bottom: 20px;

  color: #173b72;

  text-shadow: none;
}

.more-us-kicker::before,
.more-us-kicker::after {
  background:
    linear-gradient(
      to right,
      transparent,
      rgba(150, 112, 72, 0.42)
    );
}

.more-us-intro__text h2 {
  margin: 0;

  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;

  /* Skala judul disamakan dengan judul section lain
     (.hero-subtitle / .verse-subtitle = clamp(20px, 2.8vw, 30px));
     sebelumnya clamp(42px, 5vw, 68px) sehingga jauh lebih besar. */
  font-size: clamp(20px, 2.8vw, 30px);

  line-height: 1.25;

  /* "Some Moments," & "Some Memories," memakai navy utama section. */
  color: #173b72;
}

/* "Just Us." — aksen EMAS (kombinasi NAVY + GOLD pada satu heading). */
.more-us-intro__text h2 em {
  font-family: "Javasoul", cursive;
  font-style: normal;

  color: #a17b3f;
}

/* Pembatas intro: garis emas tipis di kedua sisi bintang — pola sama
   dengan .doa-section__divider / .prologue-divider supaya "garis" di
   undangan ini seragam. */
.more-us-divider {
  display: flex;
  align-items: center;
  gap: 12px;

  max-width: 170px;

  margin: 20px 0;

  /* Palet .chapter-two__divider (bukan lagi navy/emas lama). */
  color: rgba(150, 112, 72, 0.76);
  font-size: 13px;
  line-height: 1;
}

.more-us-divider::before,
.more-us-divider::after {
  content: "";

  flex: 1;
  height: 1px;

  background:
    linear-gradient(
      to right,
      transparent,
      rgba(150, 112, 72, 0.45),
      transparent
    );
}

.more-us-intro__text p {
  max-width: 420px;

  margin: 0;

  font-family: "Lora", Georgia, serif;
  font-size: 16px;
  font-style: italic;
  line-height: 1.8;

  color: #6d6257;
}

/* Di desktop, seluruh copy menghadap ke foto. Setiap elemen memakai lebar
   yang sama sehingga tepi luar judul sejajar dengan awal garis kicker,
   sementara divider dan paragraf benar-benar menempel ke sisi kanan. */
@media screen and (min-width: 769px) {
  .more-us-intro__text {
    text-align: right;
  }

  .more-us-intro__text h2 {
    max-width: 420px;
    margin-left: auto;
    font-size: clamp(30px, 3.5vw, 44px);
    line-height: 1.08;
  }

  .more-us-divider {
    margin: 20px 0 20px auto;
  }

  .more-us-intro__text p {
    margin-left: auto;
    margin-right: 0;
  }
}


/* =========================================================
   INTRO PHOTO
   ========================================================= */

.more-us-intro__visual {
  position: relative;

  min-height: clamp(250px, 24vw, 330px);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Kartu kertas di belakang foto utama (kelas lama: .more-us-blue-shape).
   Dulu kartu navy; sekarang memakai kertas parchment + garis emas tipis
   supaya tetap satu lembar dengan Chapter Two dan tidak menghadirkan
   warna yang tidak ada di palet parchment.
   Ukurannya dipusatkan tepat di belakang foto, dengan rasio yang sama
   (2:3) dan diputar ke arah berlawanan sehingga "meluber" rata di
   keempat sisi, di lebar layar mana pun. */
.more-us-photo-back {
  position: absolute;

  left: 50%;
  top: 50%;

  /* Dimensinya sama dengan foto utama; efek frame tetap muncul dari rotasi
     yang berlawanan arah, tanpa menggeser pusat komposisinya. */
  width: min(250px, 58%);

  aspect-ratio: 2 / 3;

  background: #ffffff;

  box-shadow:
    inset 0 0 0 1px rgba(161, 123, 63, 0.34),
    0 10px 26px rgba(79, 57, 36, 0.16);

  transform: translate(-50%, -50%) rotate(-5deg);
}

.more-us-intro__photo {
  position: relative;
  z-index: 2;

  display: block;

  /* PENTING: `height: auto` wajib ada. Tag <img> membawa atribut
     height="1536", dan karena tidak ada `height` di CSS, nilai atribut itu
     dipakai sehingga tinggi menjadi 1536 px dan `aspect-ratio` diabaikan
     (aspect-ratio hanya berlaku kalau salah satu dimensinya auto).
     Itulah sebabnya foto tampak "memanjang ke bawah dan besar sekali". */
  width: min(250px, 58%);

  height: auto;

  /* 2:3 = rasio asli us_opening.png (1024 x 1536) -> tidak ada pemotongan. */
  aspect-ratio: 2 / 3;

  object-fit: cover;

  box-shadow:
    0 22px 45px rgba(79, 57, 36, 0.22);

  transform: rotate(3deg);
}


/* =========================================================
   MEMORY COLLAGE
   Geometri memakai PERSEN terhadap container ber-aspect-ratio, jadi
   proporsinya sama di setiap lebar layar. Versi lama memakai ukuran px
   + posisi persen, akibatnya pada lebar 769–1000px foto saling
   menabrak, dan di mobile tinggi container (920px) lebih pendek dari
   foto terbawah (997px) sehingga gambar meluber ke blok berikutnya.
   Setiap foto menyimpan kemiringannya di --rot supaya animasi hover
   tidak menghapus rotasinya.
   ========================================================= */

.memory-collage {
  position: relative;

  width: min(1100px, calc(100% - 40px));

  /* Kanvas desain 1100 x 1240: semua ukuran & posisi di bawah adalah
     persen dari kanvas ini, jadi seluruh komposisi membesar/mengecil
     utuh tanpa pernah berubah proporsi. */
  aspect-ratio: 1100 / 1240;

  /* Sisa margin di bawah kolase diisi kalimat penutup (.more-us-closing),
     jadi jaraknya tidak perlu 100px lagi. */
  margin: 0 auto 8px;
}

/* Sparkle memakai motif ✦ yang sama seperti divider section, dengan kilau
   emas lembut agar tetap ornamental, bukan seperti emoji. */
.memory-sparkle {
  position: absolute;
  z-index: 0;

  width: auto;
  height: auto;

  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1;

  color: #a17b3f;
  opacity: 0.82;
  text-shadow: 0 0 8px rgba(161, 123, 63, 0.38);

  animation: memorySparkleGlow 3.4s ease-in-out infinite;

  pointer-events: none;
}

.memory-sparkle::before {
  content: "✦";
}

.memory-sparkle::after {
  content: none;
}

.memory-sparkle--1 { top: 8%; left: 4%; }
.memory-sparkle--2 { top: 31.5%; right: 3%; font-size: 20px; animation-delay: 0.7s; }
.memory-sparkle--3 { top: 33%; left: 4%; font-size: 13px; animation-delay: 1.4s; }
.memory-sparkle--4 { top: 64.5%; right: 4%; font-size: 13px; animation-delay: 2.1s; }
.memory-sparkle--5 { top: 66%; left: 4%; font-size: 20px; animation-delay: 2.8s; }

@keyframes memorySparkleGlow {
  0%, 100% { opacity: 0.56; transform: scale(0.86); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Divider tipis di sela baris: garis dan diamond murni CSS. */
.memory-collage__divider {
  position: absolute;
  left: 50%;
  z-index: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  width: min(190px, 20%);
  height: 14px;

  opacity: 0.86;
  transform: translateX(-50%);

  pointer-events: none;
}

.memory-collage__divider::before,
.memory-collage__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(161, 123, 63, 0.92), transparent);
}

.memory-collage__divider span {
  display: block;
  width: auto;
  height: auto;

  font-family: Georgia, serif;
  font-size: 15px;
  line-height: 1;

  color: #a17b3f;
  text-shadow: 0 0 6px rgba(161, 123, 63, 0.26);
}

.memory-collage__divider span::before {
  content: "✦";
}

.memory-collage__divider--one { top: 32%; }
.memory-collage__divider--two { top: 65%; }

/* Foto selalu berada di atas aksen dekoratif. */
.memory-photo {
  z-index: 1;
}

.memory-photo {
  position: absolute;

  padding: 12px 12px 34px;

  background: linear-gradient(180deg, #fffefb 0%, #fbf6ee 100%);

  box-shadow:
    0 16px 34px rgba(61, 44, 27, 0.14),
    inset 0 0 0 1px rgba(161, 123, 63, 0.10);

  transform: rotate(var(--rot, 0deg));

  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.memory-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.memory-photo:hover {
  z-index: 20;

  transform: rotate(var(--rot, 0deg)) scale(1.04) translateY(-6px);

  box-shadow:
    0 28px 58px rgba(61, 44, 27, 0.20),
    inset 0 0 0 1px rgba(161, 123, 63, 0.16);
}

/* Selotip dibagi rata: dua aksen pada tiap baris visual desktop
   (foto 1–3, 7–9, lalu 4–6), tanpa membuat scrapbook terasa penuh. */
.memory-photo--2::after,
.memory-photo--8::after,
.memory-photo--7::after,
.memory-photo--4::after {
  content: "";

  position: absolute;
  top: -10px;
  left: 50%;

  width: 72px;
  height: 20px;

  background:
    linear-gradient(
      100deg,
      rgba(255, 252, 243, 0.80),
      rgba(244, 231, 208, 0.66)
    );

  box-shadow: 0 2px 6px rgba(92, 70, 44, 0.14);

  transform: translateX(-50%) rotate(-3deg);

  pointer-events: none;
}

.memory-photo--1::before,
.memory-photo--5::before {
  content: "";

  position: absolute;
  top: -9px;
  left: 50%;

  width: 64px;
  height: 18px;

  background:
    linear-gradient(
      100deg,
      rgba(255, 252, 243, 0.74),
      rgba(237, 229, 211, 0.62)
    );

  box-shadow: 0 2px 6px rgba(92, 70, 44, 0.12);

  transform: translateX(-50%) rotate(3deg);

  pointer-events: none;
}

.memory-photo--7::after {
  top: -16px;
}


/* ---------------------------------------------------------
   Komposisi DESKTOP — 3 foto per baris, tiga baris
   (revisi visual terbaru; bukan satu baris, bukan grid kaku):

        [ 1 ]     [ 2 ]     [ 3 ]

        [ 4 ]     [ 5 ]     [ 6 ]

        [ 7 ]     [ 8 ]     [ 9 ]

   Konsepnya tetap scrapbook: setiap frame sengaja BERBEDA ukuran,
   rotation, dan offset vertikal (baris atas top 1.5%–5.5%, baris
   bawah top 55%–60.5%) supaya tidak terasa seperti CSS grid yang
   seragam. Kolom dibuat cukup rapat agar kolase terasa sebagai satu
   kelompok, namun tetap menyisakan ruang aman untuk rotasi frame.

   Semua ukuran/posisi tetap persen dari kanvas 1100 x 850, jadi rasio
   bingkai dan jarak antar foto tidak berubah di lebar layar mana pun.
   Posisi MOBILE tidak diubah sama sekali (lihat media query di
   bawah) — mobile tetap layout stacked/scattered yang compact.
   --------------------------------------------------------- */

/* Baris ATAS, kiri — sedikit lebih lebar & miring ke kiri */
.memory-photo--1 {
  --rot: -6deg;

  width: 21.5%;
  height: 24%;

  left: 10%;
  top: 4%;
}


/* Baris ATAS, tengah — lebih ramping, diangkat supaya tidak segaris */
.memory-photo--2 {
  --rot: 4.5deg;

  width: 20%;
  height: 23.5%;

  left: auto;
  right: 10%;
  top: 2.5%;
}


/* Baris ATAS, kanan — foto berdua; frame paling tinggi di barisnya,
   z-index 2 kalau sudut terputar sedikit menyentuh tetangga */
.memory-photo--3 {
  --rot: -2.5deg;

  width: 22%;
  height: 25%;

  left: 38.5%;
  right: auto;
  top: 4%;

  z-index: 2;
}


/* Baris BAWAH, kiri — dimensi dibalik (lebih ramping) agar tidak
   identik dengan foto 1 di atasnya */
.memory-photo--4 {
  --rot: 4deg;

  width: 21%;
  height: 24.5%;

  left: 9%;
  top: 69%;
}


/* Baris BAWAH, tengah — diturunkan sedikit (offset organik) */
.memory-photo--5 {
  --rot: -5deg;

  width: 21.5%;
  height: 24%;

  left: auto;
  right: 9%;
  top: 71.5%;
}


/* Baris BAWAH, kanan — foto berdua kedua; paling tinggi di barisnya
   sehingga ujung komposisi terangkat, tidak berat sebelah */
.memory-photo--6 {
  --rot: 3deg;

  width: 20.5%;
  height: 25%;

  left: 38%;
  right: auto;
  top: 68%;

  z-index: 2;
}

/* Baris ketiga menjaga ritme yang sama, dengan offset kecil agar tetap
   terasa seperti scrapbook, bukan grid yang kaku. */
.memory-photo--7 {
  --rot: -4deg;
  width: 21.5%;
  height: 24%;
  left: 10%;
  top: 36%;
}

.memory-photo--8 {
  --rot: 5deg;
  width: 20%;
  height: 23.5%;
  left: auto;
  right: 10%;
  top: 38.5%;
}

.memory-photo--9 {
  --rot: -3deg;
  width: 22%;
  height: 25%;
  left: 38.5%;
  right: auto;
  top: 35%;
  z-index: 2;
}


/* Catatan: `.memory-note` ("Little moments, that became ours.") dan blok
   navy `.memory-transition` ("And then, among all the little moments..."
   + "See You There.") sudah DIHAPUS dari section ini — penggantinya
   adalah .more-us-closing (lihat blok "Closing" di atas). CSS keduanya
   juga dihapus supaya tidak ada rule yatim.
   Begitu pula blok "Formal Wedding Portraits" yang dulu dihapus dari
   section ini, jadi tidak ada CSS untuknya. */


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {

  .more-us-section {
    /* Menyediakan ruang untuk jembatan warna + ornamen sudut Chapter Two.
       Ornamen di mobile memakai lebar dari media query Chapter Two
       (210px @<=768, 175px @<=480) sehingga tingginya ±140px / ±117px;
       `top` ornamen diatur di bawah supaya ujungnya berhenti sebelum
       judul mulai. */
    padding-top: 200px;
  }


  /* ---------- Ornamen ---------- */

  /* Ornamen dinaikkan mendekati tepi atas (base: 120px) supaya sisa
     ruang kosong di atas judul tetap wajar di layar sempit. */
  .more-us-ornament {
    top: 105px;
  }


  /* ---------- Intro ---------- */

  .more-us-intro {
    width: calc(100% - 32px);

    margin-bottom: 70px;

    display: flex;
    flex-direction: column;

    gap: 26px;
  }

  .more-us-intro__text {
    text-align: center;
  }

  .more-us-intro__text p {
    margin-left: auto;
    margin-right: auto;
  }

  .more-us-divider {
    margin-left: auto;
    margin-right: auto;
  }

  .more-us-intro__visual {
    min-height: 240px;
  }

  /* Kartu kertas ikut mengecil bersama fotonya supaya tetap seimbang. */
  .more-us-photo-back {
    width: min(190px, 52%);
  }

  .more-us-intro__photo {
    width: min(190px, 52%);
  }


  /* ---------- Collage ----------
     Kanvas mobile 370 x 1480. Dua kelompok lama diperkecil proporsional,
     lalu ditambah satu kelompok foto agar semua sembilan frame tetap muat
     rapi tanpa meluber keluar container.
     Layout mobile tetap stacked/scattered yang compact (bukan 3+3
     seperti desktop) supaya foto tidak terlalu kecil. */

  .memory-collage {
    width: calc(100% - 24px);

    aspect-ratio: 370 / 1480;

    /* Ruang di bawah kolase dipakai kalimat penutup. */
    margin-bottom: 20px;
  }

  /* Divider garis disembunyikan di mobile karena kolase bertumpuk. Tiga
     sparkle emas tetap hadir di ruang kosong sisi kolase. */
  .memory-collage__divider,
  .memory-sparkle--4,
  .memory-sparkle--5 {
    display: none;
  }

  .memory-sparkle--1 {
    top: 24%;
    left: 5%;
    font-size: 14px;
  }

  .memory-sparkle--2 {
    top: 55%;
    right: 5%;
    font-size: 16px;
  }

  .memory-sparkle--3 {
    top: 90%;
    left: 5%;
    font-size: 14px;
  }

  .memory-photo {
    padding: 8px 8px 24px;
  }

  /* Di layout mobile yang lebih rapat, pertahankan satu selotip per
     kelompok foto agar aksennya tidak terlalu ramai. */
  .memory-photo--1::before,
  .memory-photo--5::before,
  .memory-photo--7::after {
    display: none;
  }

  .memory-photo--1 {
    width: 46%;
    height: 13.3%;

    left: 2.9%;
    top: 1.7%;
  }

  .memory-photo--2 {
    width: 46%;
    height: 13.3%;

    left: auto;
    right: 2%;
    top: 5%;
  }

  .memory-photo--3 {
    width: 56%;
    height: 16.2%;

    left: 22%;
    right: auto;
    top: 17.2%;
  }

  .memory-photo--4 {
    width: 46%;
    height: 13.3%;

    left: 2%;
    top: 67%;
  }

  .memory-photo--5 {
    width: 46%;
    height: 13.3%;

    left: auto;
    right: 2%;
    top: 70.3%;
  }

  .memory-photo--6 {
    width: 56%;
    height: 16.2%;

    left: 22%;
    right: auto;
    top: 82.5%;
  }

  .memory-photo--7 {
    width: 46%;
    height: 13.3%;
    left: 2.9%;
    top: 34.4%;
  }

  .memory-photo--8 {
    width: 46%;
    height: 13.3%;
    left: auto;
    right: 2%;
    top: 37.1%;
  }

  .memory-photo--9 {
    width: 56%;
    height: 16.2%;
    left: 22%;
    right: auto;
    top: 48%;
  }

  /* ---------- Closing ----------
     (pengganti .memory-note & .memory-transition yang sudah dihapus) */

  .more-us-closing {
    padding: 18px 22px 68px;
  }

  .more-us-closing .more-us-divider {
    margin-bottom: 14px;
  }

  .more-us-closing__text {
    font-size: clamp(24px, 7.2vw, 30px);
  }


}


/* =========================================================
   MOBILE — layar kecil (<=480px)
   Ukuran ornamen sudut mengikuti Chapter Two + refinement
   (clamp(150px, 42vw, 200px)) sehingga tingginya maksimal ±133px —
   jadi padding atas 200px dari media query di atas SUDAH cukup untuk
   rentang ini; yang perlu disesuaikan hanya closing.
   ========================================================= */

@media screen and (max-width: 480px) {

  .more-us-closing {
    padding: 16px 20px 64px;
  }

  .more-us-closing__text {
    font-size: clamp(23px, 7.6vw, 28px);
  }

}


/* =========================================================
   A LITTLE MORE US — REVEAL ANIMATION
   Pola sama dengan section lain:
     - .is-revealed pada section (dari initMoreUsReveal() di index.html)
       untuk blok intro (judul, foto utama, ornamen);
     - .is-visible pada tiap blok berikutnya (dari initScrollReveal())
       supaya animasinya tetap terlihat ketika bagian itu masuk layar —
       kolase dan kalimat penutup letaknya jauh di bawah section.
   CATATAN PENTING: foto collage dianimasikan lewat properti `translate`
   (bukan `transform`) sebab `transform`-nya sudah dipakai untuk rotasi
   (--rot). Dengan begitu animasi fade-up tidak menghapus kemiringan foto.
   ========================================================= */

.js .more-us-intro__text,
.js .more-us-intro__visual,
.js .memory-collage .memory-photo,
.js .more-us-closing__divider,
.js .more-us-closing__text {
  opacity: 0;

  translate: 0 24px;
}

.js .memory-collage .memory-photo {
  translate: 0 30px;
}

.js .more-us-section.is-revealed .more-us-intro__text,
.js .more-us-section.is-revealed .more-us-intro__visual,
.js .memory-collage.is-visible .memory-photo,
.js .more-us-closing.is-visible .more-us-closing__divider,
.js .more-us-closing.is-visible .more-us-closing__text {
  animation:
    moreUsReveal
    0.9s
    cubic-bezier(0.22, 1, 0.36, 1)
    forwards;
}

/* Urutan masuk: judul -> foto utama -> kolase (kiri ke kanan) ->
   ✦ -> kalimat penutup. */

.js .more-us-section.is-revealed .more-us-intro__text { animation-delay: 0.05s; }
.js .more-us-section.is-revealed .more-us-intro__visual { animation-delay: 0.2s; }

.js .memory-collage.is-visible .memory-photo--1 { animation-delay: 0.06s; }
.js .memory-collage.is-visible .memory-photo--2 { animation-delay: 0.16s; }
.js .memory-collage.is-visible .memory-photo--3 { animation-delay: 0.26s; }
.js .memory-collage.is-visible .memory-photo--4 { animation-delay: 0.36s; }
.js .memory-collage.is-visible .memory-photo--5 { animation-delay: 0.46s; }
.js .memory-collage.is-visible .memory-photo--6 { animation-delay: 0.56s; }
.js .memory-collage.is-visible .memory-photo--7 { animation-delay: 0.66s; }
.js .memory-collage.is-visible .memory-photo--8 { animation-delay: 0.76s; }
.js .memory-collage.is-visible .memory-photo--9 { animation-delay: 0.86s; }

.js .more-us-closing.is-visible .more-us-closing__divider { animation-delay: 0.05s; }
.js .more-us-closing.is-visible .more-us-closing__text { animation-delay: 0.14s; }

@keyframes moreUsReveal {
  from {
    opacity: 0;
    translate: 0 24px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}


/* Reduced motion: semua elemen tampil tanpa animasi. */

@media (prefers-reduced-motion: reduce) {

  .memory-sparkle {
    animation: none;
    opacity: 0.82;
  }

  .js .more-us-intro__text,
  .js .more-us-intro__visual,
  .js .memory-collage .memory-photo,
  .js .more-us-closing__divider,
  .js .more-us-closing__text {
    animation: none !important;

    opacity: 1;
    translate: none;
  }

}
/* =========================================================
   RSVP & Ucapan — penyesuaian mobile
   Diletakkan paling akhir agar menang atas aturan lama pada
   breakpoint yang sama. Desktop tetap dua kolom (Nama + Konfirmasi);
   di mobile semua field otomatis stack (Bootstrap col-sm-6).
   ========================================================= */

/* --- Mobile (≤768px) -------------------------------------------------
   Dua masalah yang diperbaiki di sini:

   1) Field melewati garis card. Kartu RSVP punya bingkai dekoratif vertikal
      20px di dalam padding-box (lihat .invitation-card.invitation-verse-card:
      background "left 20px"/"right 20px" + inset box-shadow 20px). Padding
      horizontal lama hanya 20px (≤768) / 18px (≤480), sehingga field mulai
      DI LUAR garis itu (34px vs garis di 36px pada 375px). Padding naik
      menjadi 34px / 28px supaya field berhenti jelas di dalam garis.

   2) Tipografi field. Input 16px (>= ambang iOS, jadi tidak ada auto-zoom
      saat field difokuskan) dengan label 14px supaya hierarki label → isi
      field proporsional, bukan label yang berukuran sama/besar dari isinya. */
@media screen and (max-width: 768px) {
  .rsvp-heading {
    margin-bottom: 18px;
  }

  .rsvp-card.invitation-verse-card {
    padding: 40px 34px 28px;
  }

  .wishes-shell.invitation-verse-card {
    padding: 36px 30px;
  }

  .rsvp-form > .row {
    margin-right: 0;
    margin-left: 0;
  }

  .rsvp-form > .row > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .rsvp-form .form-group {
    margin-bottom: 14px;
  }

  .invitation-rsvp .rsvp-form label {
    margin-bottom: 7px;
    color: #5b4636;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.05em;
  }

  .invitation-rsvp .rsvp-form .field-hint {
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
  }

  .invitation-rsvp .rsvp-form .form-control {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    font-size: 16px;
  }

  .invitation-rsvp .rsvp-form input.form-control,
  .invitation-rsvp .rsvp-form select.form-control {
    height: 44px;
    padding: 10px 12px;
  }

  /* height eksplisit: baris "rows" di HTML membuat textarea tetap 108px
     walau min-height sudah diturunkan. */
  .invitation-rsvp .rsvp-form .textarea-control {
    height: 86px;
    min-height: 86px;
    padding: 10px 12px;
  }

  .invitation-rsvp .rsvp-actions .btn {
    width: 100%;
    max-width: 240px;
    margin: 6px 0;
    padding: 12px 30px;
    font-size: 12px;
  }

  .wishes-list {
    max-height: 400px;
  }
}

/* 480px ke bawah: garis bingkai kartu tetap di 20px + 1px border = 21px,
   jadi padding horizontal minimal 28px (21 + 7px jarak) supaya field tidak
   menyentuh/melampaui garis card di kanan dan kiri. */
@media screen and (max-width: 480px) {
  .rsvp-heading {
    margin-bottom: 16px;
  }

  .rsvp-card.invitation-verse-card {
    padding: 34px 28px 24px;
  }

  .wishes-shell.invitation-verse-card {
    padding: 32px 26px;
  }

  .invitation-rsvp .rsvp-form .textarea-control {
    height: 82px;
    min-height: 82px;
  }

  .wishes-actions .wishes-toggle {
    width: 100%;
    max-width: 300px;
  }
}

@media screen and (max-width: 768px) {
  .hero-subtitle,
  .verse-subtitle,
  .prologue-intro .verse-subtitle,
  .chapter-two__title,
  .doa-section__title,
  .more-us-intro__text h2 {
    font-size: clamp(28px, 7.4vw, 34px);
  }
}

/* =========================================================
   FINAL CLOSING — ENDING STORY
   ========================================================= */

.closing-story {
  --closing-overlap: clamp(130px, 17vh, 190px);

  position: relative;
  z-index: 2;
  isolation: isolate;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: calc(100vh + var(--closing-overlap));
  min-height: calc(100svh + var(--closing-overlap));
  margin-top: calc(0px - var(--closing-overlap));
  padding: clamp(90px, 12vh, 150px) 24px;
  overflow: hidden;
  color: #604832;
}

.closing-story__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #f3e8d8;
  background-image:
    radial-gradient(ellipse at 50% 47%, rgba(255, 250, 235, 0.16), transparent 66%),
    url("../images/promise_bg.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--closing-overlap));
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--closing-overlap));
  pointer-events: none;
}

.closing-story__ornament,
.closing-story__silhouette,
.closing-story__leaf,
.closing-story__light {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.closing-story__ornament {
  width: min(31vw, 410px);
  opacity: 0.64;
}

.closing-story__ornament--tl {
  top: calc(var(--closing-overlap) + 22px);
  left: 24px;
}

.closing-story__ornament--tr {
  top: calc(var(--closing-overlap) + 22px);
  right: 24px;
  transform: scaleX(-1);
}

.closing-story__ornament--bl {
  bottom: 22px;
  left: 24px;
  transform: scaleY(-1);
}

.closing-story__ornament--br {
  right: 24px;
  bottom: 22px;
  transform: scale(-1, -1);
}

.closing-story__silhouette {
  width: min(58vw, 760px);
  opacity: 0.22;
  filter: grayscale(1) sepia(0.42) brightness(0.58) contrast(0.92);
}

.closing-story__silhouette--tr {
  top: 0;
  right: 0;
}

.closing-story__silhouette--bl {
  bottom: 0;
  left: 0;
}

.closing-story__leaf {
  width: clamp(38px, 4.5vw, 64px);
  opacity: 0.62;
}

.closing-story__leaf--left {
  top: 32%;
  left: 13%;
  transform: rotate(-24deg);
  --closing-leaf-duration: 19s;
  --closing-leaf-delay: 2s;
}

.closing-story__leaf--right {
  top: 58%;
  right: 12%;
  transform: rotate(31deg);
  --closing-leaf-duration: 16s;
  --closing-leaf-delay: 2.35s;
}

.closing-story__leaf--low {
  bottom: 18%;
  left: 24%;
  width: clamp(30px, 3.4vw, 48px);
  transform: rotate(12deg);
  --closing-leaf-duration: 22s;
  --closing-leaf-delay: 2.7s;
}

.closing-story__light {
  width: clamp(42px, 5.2vw, 74px);
  opacity: 0.28;
  filter: saturate(0.76) sepia(0.16);
}

.closing-story__light--left {
  top: 27%;
  left: 27%;
  --closing-light-duration: 6.2s;
  --closing-light-delay: 2.15s;
}

.closing-story__light--right {
  right: 25%;
  bottom: 26%;
  width: clamp(32px, 4vw, 58px);
  --closing-light-duration: 5.4s;
  --closing-light-delay: 2.5s;
}

.closing-story__light--low {
  right: 17%;
  bottom: 16%;
  width: clamp(24px, 3vw, 42px);
  --closing-light-duration: 6.8s;
  --closing-light-delay: 2.85s;
}

.closing-story__content {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  margin: 0 auto;
  text-align: center;
}

.closing-story__kicker {
  margin: 0 0 20px;
  color: #92734f;
  font-family: "Cinzel", Georgia, serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.6;
}

.closing-story__name {
  margin: 0 0 28px;
  color: #705238;
  font-family: "Javasoul", "Sacramento", cursive;
  font-size: clamp(58px, 7.1vw, 88px);
  font-weight: 400;
  line-height: 1.12;
  text-shadow: 0 3px 18px rgba(116, 83, 49, 0.1);
}

.closing-story__copy {
  margin: 0;
  color: #725a43;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.8;
}

.closing-story__divider {
  display: flex;
  align-items: center;
  gap: 13px;
  width: min(150px, 42%);
  margin-right: auto;
  margin-left: auto;
  color: rgba(150, 112, 72, 0.78);
}

.closing-story__divider::before,
.closing-story__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(150, 112, 72, 0.48));
}

.closing-story__divider::after {
  transform: scaleX(-1);
}

.closing-story__divider span {
  font-size: 12px;
  line-height: 1;
}

.closing-story__divider--top {
  margin-bottom: 18px;
}

.closing-story__divider--bottom {
  margin-top: 24px;
}

.closing-story + #fh5co-footer {
  display: none;
}

.js .closing-story__ornament,
.js .closing-story__silhouette,
.js .closing-story__kicker,
.js .closing-story__name,
.js .closing-story__copy,
.js .closing-story__divider,
.js .closing-story__leaf,
.js .closing-story__light {
  opacity: 0;
}

.js .closing-story.is-revealed .closing-story__ornament {
  animation: closingStoryFadeIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) var(--closing-ornament-delay, 0s) forwards;
}

.js .closing-story.is-revealed .closing-story__silhouette {
  animation: closingStorySilhouetteIn 1.8s ease-out var(--closing-silhouette-delay, 0.1s) forwards;
}

.closing-story__ornament--tr,
.closing-story__ornament--bl,
.closing-story__ornament--br {
  --closing-ornament-delay: 0.12s;
}

.closing-story__silhouette--bl {
  --closing-silhouette-delay: 0.28s;
}

.js .closing-story.is-revealed .closing-story__kicker,
.js .closing-story.is-revealed .closing-story__name,
.js .closing-story.is-revealed .closing-story__copy {
  animation: closingStoryRiseIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--closing-text-delay) both;
}

.closing-story__kicker {
  --closing-text-delay: 0.3s;
}

.closing-story__name {
  --closing-text-delay: 0.68s;
}

.closing-story__copy {
  --closing-text-delay: 1.02s;
}

.js .closing-story.is-revealed .closing-story__divider {
  animation: closingStoryRiseIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--closing-divider-delay) both;
}

.closing-story__divider--top {
  --closing-divider-delay: 0.2s;
}

.closing-story__divider--bottom {
  --closing-divider-delay: 1.36s;
}

.js .closing-story.is-revealed .closing-story__leaf {
  animation:
    closingStoryLeafIn 1.2s ease var(--closing-leaf-delay) forwards,
    closingStoryLeafDrift var(--closing-leaf-duration) ease-in-out var(--closing-leaf-delay) infinite alternate;
}

.js .closing-story.is-revealed .closing-story__light {
  animation:
    closingStoryLightIn 1.2s ease var(--closing-light-delay) forwards,
    closingStoryLightDrift var(--closing-light-duration) ease-in-out var(--closing-light-delay) infinite alternate;
}

@keyframes closingStoryFadeIn {
  from { opacity: 0; }
  to { opacity: 0.64; }
}

@keyframes closingStorySilhouetteIn {
  from { opacity: 0; }
  to { opacity: 0.22; }
}

@keyframes closingStoryRiseIn {
  from { opacity: 0; transform: translateY(11px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes closingStoryLeafIn {
  from { opacity: 0; }
  to { opacity: 0.62; }
}

@keyframes closingStoryLeafDrift {
  from { transform: translate3d(-4px, 4px, 0) rotate(-7deg); }
  to { transform: translate3d(8px, -9px, 0) rotate(5deg); }
}

@keyframes closingStoryLightIn {
  from { opacity: 0; }
  to { opacity: 0.28; }
}

@keyframes closingStoryLightDrift {
  from { transform: translate3d(0, 2px, 0) scale(0.96); }
  to { transform: translate3d(0, -5px, 0) scale(1.03); }
}

@media screen and (max-width: 768px) {
  .closing-story {
    --closing-overlap: clamp(118px, 18vh, 160px);
    padding: clamp(86px, 12vh, 120px) 20px;
  }

  .closing-story__ornament {
    width: clamp(112px, 34vw, 240px);
  }

  .closing-story__ornament--tl {
    top: calc(var(--closing-overlap) + 16px);
    left: 14px;
  }

  .closing-story__ornament--tr {
    top: calc(var(--closing-overlap) + 16px);
    right: 14px;
  }

  .closing-story__ornament--bl {
    bottom: 16px;
    left: 14px;
  }

  .closing-story__ornament--br {
    right: 14px;
    bottom: 16px;
  }

  .closing-story__silhouette {
    width: min(88vw, 560px);
    opacity: 0.18;
  }

  .closing-story__silhouette--tr {
    top: 0;
    right: -7%;
  }

  .closing-story__silhouette--bl {
    bottom: 0;
    left: -7%;
  }

  .closing-story__leaf {
    width: 42px;
  }

  .closing-story__leaf--left {
    top: 25%;
    left: 7%;
  }

  .closing-story__leaf--right {
    top: auto;
    right: 8%;
    bottom: 29%;
    width: 36px;
  }

  .closing-story__leaf--low,
  .closing-story__light--low {
    display: none;
  }

  .closing-story__light--left {
    top: 26%;
    left: 20%;
    width: 38px;
  }

  .closing-story__light--right {
    right: 19%;
    bottom: 25%;
    width: 32px;
  }

  .closing-story__name {
    font-size: clamp(46px, 11.8vw, 64px);
  }

  .closing-story__copy {
    font-size: 18px;
  }
}

@media screen and (max-width: 480px) {
  .closing-story {
    padding-right: 18px;
    padding-left: 18px;
  }

  .closing-story__kicker {
    margin-bottom: 16px;
    font-size: 10px;
    letter-spacing: 0.2em;
  }

  .closing-story__name {
    margin-bottom: 22px;
    font-size: clamp(42px, 11.4vw, 52px);
  }

  .closing-story__copy {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .closing-story__ornament,
  .js .closing-story.is-revealed .closing-story__ornament {
    opacity: 0.64;
    animation: none;
  }

  .js .closing-story__silhouette,
  .js .closing-story.is-revealed .closing-story__silhouette {
    opacity: 0.22;
    transform: none;
    animation: none;
  }

  .js .closing-story__kicker,
  .js .closing-story__name,
  .js .closing-story__copy,
  .js .closing-story__divider,
  .js .closing-story.is-revealed .closing-story__kicker,
  .js .closing-story.is-revealed .closing-story__name,
  .js .closing-story.is-revealed .closing-story__copy,
  .js .closing-story.is-revealed .closing-story__divider {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .js .closing-story__leaf,
  .js .closing-story.is-revealed .closing-story__leaf {
    opacity: 0.62;
    animation: none;
  }

  .js .closing-story__light,
  .js .closing-story.is-revealed .closing-story__light {
    opacity: 0.28;
    animation: none;
  }
}

/* =========================================================
   FINAL CLOSING — ATMOSPHERE REFINEMENT
   ========================================================= */

.closing-story__bg::before,
.closing-story__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.closing-story__bg::before {
  background-image:
    radial-gradient(circle at 13% 39%, rgba(151, 111, 54, 0.26) 0 1px, transparent 1.8px),
    radial-gradient(circle at 22% 68%, rgba(151, 111, 54, 0.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 37% 20%, rgba(151, 111, 54, 0.2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 76%, rgba(151, 111, 54, 0.24) 0 1px, transparent 1.8px),
    radial-gradient(circle at 78% 31%, rgba(151, 111, 54, 0.22) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 59%, rgba(151, 111, 54, 0.2) 0 1px, transparent 1.8px),
    radial-gradient(circle at 51% 88%, rgba(151, 111, 54, 0.2) 0 1px, transparent 1.8px);
  opacity: 0.52;
}

.closing-story__bg::after {
  background-image:
    radial-gradient(circle at 30% 53%, rgba(255, 224, 153, 0.34) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 43%, rgba(255, 224, 153, 0.3) 0 1px, transparent 2px);
  opacity: 0.45;
  animation: closingStoryDustPulse 7.5s ease-in-out 1.4s infinite alternate;
}

.closing-story__silhouette {
  opacity: 0.35;
  filter: grayscale(1) sepia(0.65) brightness(0.62) contrast(0.95);
}

.closing-story__leaf {
  opacity: 0.56;
}

.closing-story__leaf--left {
  --closing-leaf-duration: 10s;
  --closing-leaf-rotation: -24deg;
}

.closing-story__leaf--right {
  --closing-leaf-duration: 12s;
  --closing-leaf-delay: 2.35s;
  --closing-leaf-rotation: 31deg;
}

.closing-story__leaf--low {
  --closing-leaf-duration: 13.5s;
  --closing-leaf-delay: 2.7s;
  --closing-leaf-rotation: 12deg;
}

.closing-story__leaf--far {
  top: 72%;
  right: 21%;
  width: clamp(24px, 2.8vw, 40px);
  --closing-leaf-duration: 11.5s;
  --closing-leaf-delay: 3.1s;
  --closing-leaf-rotation: -8deg;
}

.js .closing-story.is-revealed .closing-story__leaf {
  animation:
    closingStoryLeafIn 1.2s ease var(--closing-leaf-delay, 2s) forwards,
    closingStoryLeafDrift var(--closing-leaf-duration, 12s) ease-in-out var(--closing-leaf-delay, 2s) infinite alternate;
}

.closing-story__light {
  width: clamp(30px, 3.3vw, 48px);
  opacity: 0.56;
  filter: saturate(1.08) sepia(0.08) drop-shadow(0 0 5px rgba(235, 182, 91, 0.24));
}

.closing-story__light--left {
  --closing-light-duration: 5.2s;
  --closing-light-delay: 0s;
}

.closing-story__light--right {
  width: clamp(28px, 2.8vw, 40px);
  --closing-light-duration: 6.4s;
  --closing-light-delay: -2s;
}

.closing-story__light--low {
  width: clamp(24px, 2.2vw, 32px);
  --closing-light-duration: 7.2s;
  --closing-light-delay: -4s;
}

.closing-story__light--far {
  top: 68%;
  left: 19%;
  width: clamp(38px, 4vw, 56px);
  --closing-light-duration: 5.8s;
  --closing-light-delay: -6s;
}

.js .closing-story.is-revealed .closing-story__light {
  animation:
    closingStoryLightIn 1.2s ease var(--closing-light-delay, -2s) forwards,
    closingStoryLightDrift var(--closing-light-duration, 6s) ease-in-out var(--closing-light-delay, -2s) infinite alternate;
}

@keyframes closingStorySilhouetteIn {
  from { opacity: 0; }
  to { opacity: 0.35; }
}

@keyframes closingStorySilhouetteInMobile {
  from { opacity: 0; }
  to { opacity: 0.28; }
}

@keyframes closingStoryLeafIn {
  from { opacity: 0; }
  to { opacity: 0.56; }
}

@keyframes closingStoryLeafDrift {
  from {
    transform: translate3d(-3px, 2px, 0) rotate(calc(var(--closing-leaf-rotation, 0deg) - 3deg));
  }
  to {
    transform: translate3d(6px, -7px, 0) rotate(calc(var(--closing-leaf-rotation, 0deg) + 4deg));
  }
}

@keyframes closingStoryLightIn {
  from { opacity: 0; }
  to { opacity: 0.56; }
}

@keyframes closingStoryLightDrift {
  from { transform: translate3d(0, 1px, 0) scale(0.97); }
  to { transform: translate3d(0, -3px, 0) scale(1.03); }
}

@keyframes closingStoryDustPulse {
  from { opacity: 0.24; }
  to { opacity: 0.48; }
}

@media screen and (max-width: 768px) {
  .closing-story__silhouette {
    width: min(68vw, 420px);
    opacity: 0.32;
  }

  .closing-story__silhouette--tr {
    top: 0;
    right: -8%;
    opacity: 0.28;
  }

  .closing-story__silhouette--bl {
    bottom: 0;
    left: -8%;
  }

  .closing-story__leaf {
    width: 38px;
  }

  .closing-story__leaf--left {
    top: 27%;
    left: 7%;
    --closing-leaf-duration: 11s;
  }

  .closing-story__leaf--right {
    top: auto;
    right: 8%;
    bottom: 27%;
    width: 32px;
    --closing-leaf-duration: 13s;
  }

  .closing-story__leaf--low,
  .closing-story__leaf--far {
    display: none;
  }

  .closing-story__light {
    width: 32px;
  }

  .closing-story__light--left {
    top: 23%;
    left: 20%;
    width: 36px;
  }

  .closing-story__light--right {
    right: 19%;
    bottom: 23%;
    width: 28px;
  }

  .closing-story__light--low {
    right: 15%;
    bottom: 14%;
    width: 22px;
  }

  .closing-story__light--far {
    display: none;
  }

  .js .closing-story.is-revealed .closing-story__silhouette {
    animation-name: closingStorySilhouetteInMobile;
  }
}

@media screen and (max-width: 480px) {
  .closing-story__light--low {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .closing-story__bg::after,
  .closing-story__leaf,
  .closing-story__light,
  .js .closing-story.is-revealed .closing-story__leaf,
  .js .closing-story.is-revealed .closing-story__light {
    animation: none;
  }

  .js .closing-story__silhouette,
  .js .closing-story.is-revealed .closing-story__silhouette {
    opacity: 0.35;
  }

  .js .closing-story__leaf,
  .js .closing-story.is-revealed .closing-story__leaf {
    opacity: 0.56;
  }

  .js .closing-story__light,
  .js .closing-story.is-revealed .closing-story__light {
    opacity: 0.56;
  }

  .closing-story__bg::after {
    opacity: 0.36;
  }
}

.closing-story__silhouette--tr {
  top: var(--closing-overlap);
  right: -2%;
}

.closing-story__content {
  transform: translateY(calc(var(--closing-overlap) / 2));
}

.closing-story__kicker {
  font-size: 14px;
}

.closing-story__name {
  font-size: clamp(66px, 8vw, 96px);
}

.closing-story__copy {
  font-size: clamp(20px, 1.85vw, 23px);
}

@media screen and (max-width: 768px) {
  .closing-story__silhouette--tr {
    top: var(--closing-overlap);
    right: -8%;
    opacity: 0.28;
  }

  .js .closing-story__silhouette--tr,
  .js .closing-story.is-revealed .closing-story__silhouette--tr {
    opacity: 0.28;
  }

  .closing-story__kicker {
    font-size: 12px;
  }

  .closing-story__name {
    font-size: clamp(50px, 12.5vw, 62px);
  }

  .closing-story__copy {
    font-size: 19px;
  }
}

@media screen and (max-width: 480px) {
  .closing-story__kicker {
    font-size: 11px;
  }

  .closing-story__name {
    font-size: clamp(48px, 12.2vw, 56px);
  }

  .closing-story__copy {
    font-size: 18px;
  }
}

.more-us-section .more-us-ornament--bottom-left,
.more-us-section .more-us-ornament--bottom-right {
  top: auto;
  bottom: 24px;
}

.more-us-section .more-us-ornament--bottom-left {
  scale: 1 -1;
}

.more-us-section .more-us-ornament--bottom-right {
  scale: -1 -1;
}

.more-us-section .more-us-closing {
  padding-bottom: 210px;
}

@media screen and (max-width: 768px) {
  .more-us-section .more-us-ornament--bottom-left,
  .more-us-section .more-us-ornament--bottom-right {
    bottom: 16px;
  }

  .more-us-section .more-us-closing {
    padding-bottom: 150px;
  }
}

@media screen and (max-width: 480px) {
  .more-us-section .more-us-closing {
    padding-bottom: 120px;
  }
}

.gototop a {
  background: rgba(126, 110, 78, 0.82) !important;
  border: 1px solid rgba(126, 91, 54, 0.42) !important;
  color: #fffaf1 !important;
}

.gototop a i {
  color: #fffaf1 !important;
}

.gototop a:hover,
.gototop a:focus,
.gototop a:active {
  background: rgba(98, 88, 63, 0.92) !important;
  color: #fffaf1 !important;
}

.invitation-sound-toggle {
  border-color: rgba(126, 91, 54, 0.42);
  background: rgba(126, 110, 78, 0.82);
  color: #fffaf1;
}

.invitation-sound-toggle:hover {
  background: rgba(98, 88, 63, 0.92);
}