@import url("https://fonts.googleapis.com/css2?family=Explora&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Explora&family=Poppins:ital,wght@0,100;0,300;0,400;0,600;0,700;1,700&display=swap");

/* My FONTS */
@font-face {
  font-family: analogue;
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/Analogue.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: power;
  font-weight: normal;
  font-style: normal;
  src: url("../fonts/power.woff2") format("woff2");
  font-display: swap;
}
/* Start Custom Fonts CSS */

/* MY CSS VARIABLE */
:root {
  --explora: "Explora", cursive;
  --poppins: "Poppins", sans-serif;

  /* COLORS */
  --dark-100: #3a4f47;
  --dark-75: #5d646f;
  --gray-100: #808080;
  --gray-50: #afafaf;
  --gray-25: #e1e1e1;

  --bg: #f7f7f7;
  --warning: #f8b501;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
}

body {
  font-family: var(--poppins);
  background: var(--bg);
}

/* =========================================
   POPUP
========================================= */

.popup{
    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;

    background:
        linear-gradient(rgba(0,0,0,.45),rgba(0,0,0,.60)),
        url("../images/popup.jpeg") center 30% / cover no-repeat;

    overflow-y:auto;
    animation:fadeIn .7s ease;
}

.popup-container{
    width:100%;
    min-height:100vh;

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

    padding:50px 20px;

    box-sizing:border-box;
}

.popup-content{

    width:100%;
    max-width:430px;

    padding:45px 35px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    background:rgba(25,15,15,.18);

    border:1px solid rgba(255,255,255,.18);

    border-radius:24px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.35);

    animation:popupScale .7s ease;
}

/* =========================================
   TITLE
========================================= */

.title-curve{
    display:flex;
    justify-content:center;
    margin-bottom:8px;
}

.title-curve svg{
    width:300px;
    height:80px;
}

.title-curve text{
    fill:#fff;
    font-size:20px;
    letter-spacing:14px;
    text-transform:uppercase;
    font-family:'Poppins',sans-serif;
    font-weight:500;
}

.popup-content h1{

    font-family:'Explora',cursive;
    font-size:64px;
    color:#fff;

    line-height:1.1;

    margin:0 0 15px;
}

.popup-content h1 span{
    color:#F8D98D;
}

.popup-content i{

    display:block;

    margin:5px 0 25px;

    font-size:14px;

    letter-spacing:4px;

    color:#fff;

    font-family:'Poppins',sans-serif;

    font-style:normal;
}

/* =========================================
   GUEST
========================================= */

.guest-name{

    width:100%;
    max-width:360px;

    margin:0 auto;

    text-align:center;
}

.guest-ornament{

    color:#d8b46a;

    font-size:26px;

    margin-bottom:6px;
}

.guest-label{

    display:block;

    font-size:12px;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#f7f2e8;

    margin-bottom:10px;

    font-family:'Poppins',sans-serif;
}

#guestName{

    font-family:'Cormorant Garamond',serif;

    font-size:36px;

    font-weight:700;

    color:#fff;

    line-height:1.2;

    margin:8px 0;

    text-shadow:0 3px 12px rgba(0,0,0,.35);
}

.guest-desc{

    margin-top:12px;

    font-size:13px;

    line-height:1.8;

    color:#f7f2e8;

    font-family:'Poppins',sans-serif;
}

/* =========================================
   BUTTON
========================================= */

.popup-content .close{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    margin-top:28px;

    width:220px;

    padding:12px 22px;

    border:none;
    border-radius:50px;

    cursor:pointer;

    background:
        linear-gradient(
            135deg,
            #d8b46a,
            #f8e7bd,
            #c89b3c
        );

    color:#2b2115;

    font-size:14px;
    font-weight:600;

    font-family:'Poppins',sans-serif;

    transition:.35s;

    box-shadow:
        0 8px 18px rgba(216,180,106,.35);

    animation:pulseButton 2.8s infinite;
}

.popup-content .close:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 24px rgba(216,180,106,.45);
}

.popup-content .close i{

    margin:0;

    font-size:15px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width:768px){

    .popup{

        background-position:center top;
    }

    .popup-container{

        padding:40px 18px;
    }

    .popup-content{

        max-width:400px;

        padding:38px 28px;
    }

    .popup-content h1{

        font-size:52px;
    }

    .title-curve svg{

        width:270px;
    }

    #guestName{

        font-size:30px;
    }

}

/* =========================================
   MOBILE
========================================= */

@media (max-width:480px){

    .popup{

        background-position:center top;
    }

    .popup-container{

        min-height:100vh;

        align-items:flex-end;

        padding:90px 15px 28px;
    }

    .popup-content{

        max-width:100%;

        padding:30px 20px;

        border-radius:18px;
    }

    .title-curve svg{

        width:240px;

        height:70px;
    }

    .title-curve text{

        font-size:17px;

        letter-spacing:10px;
    }

    .popup-content h1{

        font-size:42px;
    }

    .popup-content i{

        font-size:12px;

        letter-spacing:3px;

        margin-bottom:18px;
    }

    .guest-ornament{

        font-size:22px;
    }

    .guest-label{

        font-size:11px;

        letter-spacing:3px;
    }

    #guestName{

        font-size:24px;
    }

    .guest-desc{

        font-size:12px;

        line-height:1.7;
    }

    .popup-content .close{

        width:100%;

        padding:13px;

        font-size:14px;

        margin-top:22px;
    }

}

/* =========================================
   VERY SMALL DEVICE
========================================= */

@media (max-width:360px){

    .popup-container{

        padding:100px 12px 22px;
    }

    .popup-content{

        padding:26px 18px;
    }

    .popup-content h1{

        font-size:36px;
    }

    #guestName{

        font-size:22px;
    }

    .guest-desc{

        font-size:11px;
    }

    .popup-content .close{

        font-size:13px;

        padding:12px;
    }

}

/* ===============================
   ANIMATION
================================= */

@keyframes popupScale{

    from{
        opacity:0;
        transform:translateY(40px) scale(.85);
    }

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

}

@keyframes fadeIn{

    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}
.popup .close {
  display: inline-flex;
}

/* my logo */
#logo {
  position: fixed;
  bottom: 5%;
  left: 90%;
  /* top: 15%; */
  transform: translateX(-50%);
  z-index: 999;
  animation: logoAnimation 7s infinite;
}

#logo img {
  width: 50px; /* Sesuaikan dengan ukuran logo Anda */
  border-radius: 50%;
  cursor: pointer;
}

@keyframes logoAnimation {
  0% {
    transform: translateX(-50%);
  }
  50% {
    transform: translateX(-55%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================
   HERO
========================== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  overflow: hidden;
}

/* Slider */
.slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Overlay */
.slider::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.55)
  );
  z-index: 2;
}

/* Gambar */
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  opacity: 0;
  transform: scale(1.15);
  transition:
    opacity 1.5s ease,
    transform 8s linear;
}

.slide.active {
  opacity: 1;
  transform: scale(1);
}

/* ==========================
   CONTENT
========================== */

.hero .content {
  position: relative;
  z-index: 5;
  margin-bottom: 5rem;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;

  animation: heroFade 1.4s ease;
}

@keyframes heroFade {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

.hero .content h4 {
  font-size: 2.5em;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 7px;
  font-family: analogue, sans-serif;
  text-shadow: 2px 2px 8px rgba(0,0,0,.45);
  margin-bottom: 15px;
}

.hero .content h4 span {
  font-style: italic;
}

.hero .content h1 {
  font-size: 4em;
  color: var(--bg);
  text-transform: uppercase;
  font-family: analogue, sans-serif;
  text-shadow: 2px 2px 10px rgba(0,0,0,.45);
}

.hero .content h1 span {
  color: var(--warning);
}

.hero .content a {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  color: var(--bg);
  letter-spacing: 3px;
  font-style: italic;
  text-shadow: 2px 2px 8px rgba(0,0,0,.45);
}

/* ==========================
   COUNTDOWN
========================== */

.hero .content .countdown {
  display: flex;
  gap: 1.8rem;
  margin-top: 4rem;
}

.hero .content .countdown .waktu {
  color: var(--bg);
  font-size: 2rem;
  text-align: center;
  text-shadow: 2px 2px 8px rgba(0,0,0,.45);
}

.hero .content .countdown .waktu p {
  font-size: .75em;
}

/* ==========================
   BUTTON SLIDER
========================== */

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;

  background: rgba(255,255,255,.25);
  color: #fff;

  font-size: 20px;
  transition: .3s;
  z-index: 10;
  backdrop-filter: blur(5px);
}

.prev {
  left: 20px;
}

.next {
  right: 20px;
}

.prev:hover,
.next:hover {
  background: rgba(255,255,255,.9);
  color: #333;
}

/* ==========================
   DOT INDICATOR
========================== */

.dots {
  position: absolute;
  bottom: 18px;          /* lebih ke bawah */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;              /* jarak antar titik lebih rapat */
  z-index: 10;
}

.dot {
  width: 8px;            /* diperkecil */
  height: 8px;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255,255,255,.45);
  transition: all .3s ease;
}

.dot.active {
  background: #fff;
  transform: scale(1.2);
}

/* quran */
.quran {
  padding: 7rem 7% 1.4rem;
}

.quran .row {
  display: flex;
}
.quran .row .quran-img {
  flex: 1 1 45rem;
}

.quran .row .quran-img img {
  width: 100%;
}

.quran .row .content {
  flex: 1 1 35rem;
  padding: 5rem 2rem;
}
.quran .row .content h3 {
  font-size: 3rem;
  margin-bottom: 1rem;
  color: black;
  font-weight: 700;
  font-style: italic;
  font-family: power, sans-serif;
}
.quran .row .content p {
  font-size: 1.4rem;
  margin-bottom: 0.8rem;
  color: black;
  font-family: "Poppins", Sans-serif;
  font-weight: normal;
  font-style: italic;
}

/* ===================================
           ABOUT
=================================== */

.about,
.about2{
    padding:8rem 8%;
}

.about2{
    background:linear-gradient(
        to top,
        rgba(93,100,111,.12),
        rgba(255,255,255,.95)
    );
}

/* ==========================
          ROW
========================== */

.about .row,
.about2 .row{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:70px;
    flex-wrap:wrap;

}

.about2 .row{

    flex-direction:row-reverse;

}

/* ==========================
          IMAGE
========================== */

.about-img,
.about2-img{

    flex:1 1 380px;
    display:flex;
    justify-content:center;

}

.about-img img,
.about2-img img{

    width:100%;
    max-width:380px;

    aspect-ratio:3/4;

    object-fit:cover;

    border-radius:25px;

    border:8px solid rgba(255,255,255,.9);

    box-shadow:
    0 20px 55px rgba(0,0,0,.18);

    transition:.4s;

}

.about-img img:hover,
.about2-img img:hover{

    transform:scale(1.03);

}

/* ==========================
          CONTENT
========================== */

.about .content,
.about2 .content{

    flex:1 1 500px;

    padding:50px;

    border-radius:30px;

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(10px);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    text-align:left;

}

/* ==========================
          NAME
========================== */

.about .content h3,
.about2 .content h3{

    font-family:"Cormorant Garamond",serif;

    font-size:4.8rem;

    font-weight:600;

    color:#111;

    line-height:1.2;

    letter-spacing:2px;

    margin-bottom:15px;

}

/* Garis */

.about .content h3::after,
.about2 .content h3::after{

    content:"";

    display:block;

    width:180px;

    height:2px;

    margin-top:18px;

    border-radius:30px;

    background:linear-gradient(
        to right,
        #a06e0996,
        #0f6e069f
    );

}

/* ==========================
      PUTRA / PUTRI
========================== */

.about .content p,
.about2 .content p{

    margin-top:25px;
    margin-bottom:10px;

    font-family:"Poppins",sans-serif;

    font-size:2rem;

    font-weight:600;

    color:#333;

    text-transform:uppercase;

    letter-spacing:1px;

}

/* ==========================
      ORANG TUA
========================== */

.about .content span,
.about2 .content span{

    display:block;

    font-family:"Poppins",sans-serif;

    font-size:1.7rem;

    color:#555;

    line-height:1.9;

}

/* ==========================
          BUTTON
========================== */

.cba{

    display:inline-block;

    margin-top:30px;

    padding:12px 28px;

    border-radius:40px;

    background:#d8b46a;

    color:#fff;

    text-decoration:none;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.cba:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(216,180,106,.35);

}

.cba i{

    margin-right:8px;

}

/* ==========================
        RESPONSIVE
========================== */

@media(max-width:768px){

    .about,
    .about2{

        padding:5rem 7%;

    }

    .about .row,
    .about2 .row{

        gap:35px;

    }

    .about .content,
    .about2 .content{

        padding:35px 25px;

        text-align:center;

    }

    .about .content h3,
    .about2 .content h3{
        display:inline-block;
    }

    .about .content h3::after,
    .about2 .content h3::after{
        width:100%;
        margin-top:15px;
    }

    .about .content p,
    .about2 .content p{

        font-size:1.6rem;

        margin-top:20px;

    }

    .about .content span,
    .about2 .content span{

        font-size:1.5rem;

    }

    .about-img img,
    .about2-img img{

        max-width:300px;

    }

}

/* story */

.story {
  padding: 7rem 7% 1.4rem;
}

.story h2 {
  font-size: 5rem;
  font-family: power;
  text-align: center;
  color: var(--dark-75);
  font-weight: normal;
  font-style: italic;
}

.story .part {
  text-align: center;
  margin: 3rem;
}

.story .part h3 {
  font-size: 2.1rem;
  color: var(--dark-75);
  font-weight: 600;
  margin: 2rem;
}

.story .part p {
  font-size: 1.5rem;
  color: var(--dark-75);
  font-weight: 400;
  margin: 1rem;
  letter-spacing: 0.5px;
}

.bg-event{
    padding:120px 8%;
}

.event-title{
    text-align:center;
    margin-bottom:100px;
    margin-top: -80px;
}

.event-title span{
    color:#8fa190;
    letter-spacing:5px;
    text-transform:uppercase;
    font-family:Poppins;
}

.event-title h2{
    font-family:"Cormorant Garamond",serif;
    font-size:58px;
    color:#4f6758;
    margin:15px 0;
}

.event-title p{
    max-width:700px;
    margin:auto;
    font-size:16px;
    color:#000000ac;
    line-height:1.8;
}

.event-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:40px;
}

.event-card{
    background:#fff;
    border-radius:30px;
    overflow:hidden;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    transition:.4s;
}

.event-card:hover{
    transform:translateY(-10px);
}

.event-image{
    height:280px;
    overflow:hidden;
}

.event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.event-card:hover img{
    transform:scale(1.1);
}

.event-body{
    padding:35px;
}

.event-body h3{
    text-align:center;
    font-family:"Great Vibes";
    font-size:52px;
    color:#556d5d;
}

.line{
    width:80px;
    height:3px;
    margin:18px auto 30px;
 background: linear-gradient(
        90deg,
        #b8b2a7,
        #6c8c73
    );
}

.event-item{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:15px;
    text-align:left;
}
.event-item .icon{
    width:28px;
    min-width:28px;
    font-size:15px;
    text-align:center;
}

.event-item .text{
    flex:1;
    font-size:14px;
    color:#333;
    line-height:1.6;
}

.event-item span{
    font-family:Poppins;
    color:#555;
}

.event-item span{
    font-family:'Poppins',sans-serif;
}

/* Desktop */
@media (min-width:769px){

    .event-item{
        gap:15px;
    }

    .event-item .icon{
        width:26px;
        min-width:26px;
        font-size:17px;
    }

    .event-item .text{
        font-size:15px;
    }

}

.alamat{
    margin-top:25px;
    line-height:1.8;
    color:#666;
}

@media(max-width:768px){
.event-title h2{
font-size:42px;
}
.event-body h3{
font-size:42px;}
}

.cbt {
  display: inline-block;
  padding: 1rem 1.8rem 1rem 1.8rem;
  border: 1px solid var(--dark-75);
  background-color: var(--bg);
  color: var(--dark-75);
  font-size: 1.2rem;
  text-transform: uppercase;
  margin-top: 1rem;
  letter-spacing: 2px;
}
.cbt:hover {
  background-color: var(--dark-75);
  color: var(--bg);
  font-weight: 400;
  transition: 0.2s linear;
}

/* Gallery */
/*==============================
        GALLERY PREMIUM
==============================*/

.bg-gallery{
    padding:100px 8%;
}

.gallery h2{

    text-align:center;
    margin-top: -100px;
    font-size:4.5rem;

    font-family:"Cormorant Garamond",serif;

    color:#222;

    margin-bottom:70px;

    letter-spacing:2px;

}

.gallery h2::after{

    content:"";

    display:block;

    width:180px;

    height:2px;

    margin:15px auto 0;

    background:linear-gradient(
        to right,
        transparent,
        #d8b46a,
        transparent
    );

}

.img-gallery{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:28px;

}

.img-gallery a{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    display:block;

    box-shadow:
    0 12px 35px rgba(0,0,0,.18);

    transition:.45s;

}

.img-gallery a::before{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.25);

    opacity:0;

    transition:.35s;

    z-index:2;

}

.img-gallery a::after{

    content:"\f00e";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%) scale(.5);

    width:65px;
    height:65px;

    border-radius:50%;

    background:#d8b46a;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    opacity:0;

    transition:.35s;

    z-index:3;

}

.img-gallery a:hover::before{

    opacity:1;

}

.img-gallery a:hover::after{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

.img-gallery img{

    width:100%;

    height:360px;

    object-fit:cover;

    display:block;

    transition:.6s ease;

}

.img-gallery a:hover img{

    transform:scale(1.12) rotate(2deg);

}

.img-gallery a:hover{

    transform:translateY(-8px);

    box-shadow:
    0 25px 55px rgba(0,0,0,.28);

}

/*==============================
      RESPONSIVE
==============================*/

@media(max-width:768px){

    .bg-gallery{

        padding:70px 6%;

    }

    .gallery h2{

        font-size:3.2rem;

    }

    .img-gallery{

        gap:18px;

    }

    .img-gallery img{

        height:280px;

    }

}

/*=========================
 RSVP PREMIUM
=========================*/

.rsvp{
    padding:120px 8%;
    background:linear-gradient(180deg,#20490472,#f5efe65e);
}

.rsvp-title{

    text-align:center;

    margin-bottom:70px;

}

.rsvp-title span{

    font-family:Poppins;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#8fa090;

}

.rsvp-title h2{

    font-family:"Great Vibes";

    font-size:70px;

    color:#4d6556;

    margin:15px 0;

}

.rsvp-title p{

    max-width:650px;

    margin:auto;

    color:#666;

    line-height:1.8;

}

.rsvp .row{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:60px;
    flex-wrap:wrap;
}



.message{
    margin-top: 50px;
    flex:1;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(15px);
    border-radius:30px;
    padding:45px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.input-group{
    margin-bottom:20px;
}

.input-group input,
.input-group textarea{
    width:100%;
    padding:16px 20px;
    border:none;
    border-radius:15px;
    background:#fff;
    font-size:14px;
    font-family:Poppins;
    box-shadow:0 5px 15px rgba(0,0,0,.05);
    transition:.3s;
}

.input-group textarea{
    height:170px;
    resize:none;
}

.input-group input:focus,
.input-group textarea:focus{
    outline:none;
    box-shadow:0 0 0 3px rgba(124,150,130,.25);
}

.btn{
    width:100%;
    padding:16px;
    border:none;
    border-radius:50px;
    background:linear-gradient(
    45deg,
    #8fa090,
    #637b69);
    color:white;
    font-size:17px;
    letter-spacing:2px;
    cursor:pointer;
    transition:.35s;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(0,0,0,.18);
}

.card-message{
    max-height:420px;
    overflow-y:auto;
    margin-top:35px;
    padding-right:10px;
}

.card{
    background:white;
    border-radius:18px;
    padding:18px;
    margin-bottom:18px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.card .title{
    font-size:18px;
    font-weight:600;
    color:#4d6556;
}

.card h4{
    font-size:13px;
    color:#999;
    margin:5px 0 10px;
}

.card p{
    font-size:15px;
    line-height:1.8;
    color:#555;
}

/* =========================
   Image Card Premium
========================= */

.image-box{
    flex: 1 1 45rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    position: relative;
}

/* Card utama */
.image-box::before{
    content: "";
    position: absolute;
    width: 360px;
    height: 470px;
    background: rgba(255,255,255,.45);
    backdrop-filter: blur(12px);
    border-radius: 30px;
    transform: rotate(-5deg);
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

/* Card kedua */
.image-box::after{
    content: "";
    position: absolute;
    width: 360px;
    height: 470px;
    background: rgba(255,255,255,.7);
    border-radius: 30px;
    transform: rotate(4deg);
    box-shadow: 0 20px 60px rgba(0,0,0,.08);
}

/* Foto */
.image-box .rsvp-img{
    margin-top: 80px;
    position: relative;
    z-index: 5;
    width: 340px;
    height: 450px;
    object-fit: cover;
    object-position: center;
    border-radius: 26px;
    box-shadow:
        0 30px 60px rgba(0,0,0,.18);
    transition: .3s ease;
}

/* Hover */
.image-box:hover .rsvp-img{
    transform: translateY(-10px) scale(1.03);
}

.doa{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    position:relative;
    overflow:hidden;

    background:url("../images/popup.jpeg") center center/cover no-repeat;
}

/* Overlay */
.doa::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(0,0,0,.45),
        rgba(0,0,0,.55));
}

.doa .overlay{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top,
        rgba(29, 13, 13, 0.685),
        transparent 60%);
}

/* =========================
   CARD TERIMA KASIH
========================= */
.doa .content{
    position: relative;
    z-index: 2;

    width: 90%;
    max-width: 650px;

    padding: 20px 35px 30px; /* atas kanan-kiri bawah */

    background: rgba(255,255,255,.05);
    backdrop-filter: blur(1px);

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

/* Wedding Invitation */
.doa .content .subtitle{
    display:inline-block;
    color:#e8d6ac;
    letter-spacing:6px;
    font-size:1rem;
    text-transform:uppercase;
    margin-bottom:6px;
}

/* Terima Kasih */
.doa .content h1{
    font-size:4rem;
    font-family:var(--explora);
    color:#fff;
    font-weight:400;
    letter-spacing:2px;
    margin:0 0 8px;
}

/* Deskripsi */
.doa .content .desc{
    max-width:500px;
    margin:0 auto 15px;
    font-size:14px;
    line-height:1.8;
    color:#f4f4f4;
}

/* Garis */
.doa .line{
    width:200px;
    height:2px;
    background:linear-gradient(
        to right,
        transparent,
        #d8b46a,
        transparent
    );

    margin:20px auto;
}

/* Kami yang Berbahagia */
.doa .content .text{
    display:block;
    color:#ffffff;
    font-size:1rem;
    letter-spacing:2px;
    text-transform:uppercase;
}

/* Nama */
.doa .content h3{
    margin:0;
    font-size:4rem;
    font-family:var(--explora);
    color:#fff;
    font-weight:500;
}

.doa .content h3 span{
    color:#d8b46a;
}

@media (max-width:768px){

    .doa .content{
        padding:22px 18px;
    }

    .doa .content h1{
        font-size:4rem;
    }

    .doa .content h3{
        font-size:4rem;
    }

    .doa .content .desc{
        font-size:13px;
    }

    .doa .line{
        width:130px;
    }
}

/* ======================================
            FOOTER LUXURY
====================================== */

.footer{
    position:relative;
    overflow:hidden;
    padding:70px 20px 35px;
    text-align:center;
    background:linear-gradient(180deg,#181411,#0d0b09);
    border-top:1px solid rgba(216,180,106,.18);
}

/* Overlay */

.footer::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:linear-gradient(
        rgba(255,255,255,.03),
        rgba(0,0,0,.45)
    );
}

.footer-overlay{
    position:absolute;
    inset:0;
    z-index:0;
    background:radial-gradient(
        circle at top,
        rgba(216,180,106,.15),
        transparent 65%
    );
}

.footer-content{
    position:relative;
    z-index:2;
}

/* ======================================
            BRAND
====================================== */

.brand{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-bottom:35px;
}

.logo-circle{

    width:120px;
    height:120px;

    padding:5px;

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #c89b3c,
        #fff5d7,
        #c89b3c
    );

    box-shadow:
        0 0 25px rgba(216,180,106,.35);

    transition:.4s;
}

.logo-circle:hover{

    transform:rotate(360deg) scale(1.05);

    box-shadow:
        0 0 40px rgba(216,180,106,.6);

}

.logo-circle img{

    width:100%;
    height:100%;
    object-fit:cover;

    border-radius:50%;

}

.brand h2{

    margin-top:18px;

    font-family:'Cormorant Garamond',serif;

    font-size:40px;

    font-weight:600;

    color:#fff;

    letter-spacing:1px;

}

.brand p{

    margin-top:8px;

    color:#d4d4d4;

    font-size:14px;

    font-family:'Poppins',sans-serif;

    letter-spacing:.4px;

}

/* ======================================
        HUBUNGI KAMI
====================================== */

.footer h4{

    margin:35px 0 25px;

    color:#d8b46a;

    font-family:'Montserrat',sans-serif;

    font-size:15px;

    font-weight:600;

    letter-spacing:6px;

    text-transform:uppercase;

}

/* ======================================
        SOCIAL ICON
====================================== */

.social-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-bottom:35px;

}

.social-icon a{

    width:58px;
    height:58px;

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

    text-decoration:none;

    border-radius:50%;

    color:#d8b46a;

    font-size:24px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(216,180,106,.35);

    transition:.35s;

}

.social-icon a:hover{

    background:#d8b46a;

    color:#111;

    transform:translateY(-6px);

    box-shadow:
        0 10px 25px rgba(216,180,106,.45);

}

/* ======================================
            DIVIDER
====================================== */

.divider{

    width:220px;

    height:3px;

    margin:0 auto 30px;

    border-radius:20px;

    background:linear-gradient(
        to right,
        transparent,
        #b68a2c,
        #fff4cf,
        #b68a2c,
        transparent
    );

    box-shadow:
        0 0 10px rgba(216,180,106,.45);

}

/* ======================================
            COPYRIGHT
====================================== */

.copyright{

    color:#999;

    font-family:'Poppins',sans-serif;

    font-size:13px;

    letter-spacing:1px;

}

/* ======================================
            RESPONSIVE
====================================== */

@media(max-width:768px){

.footer{

    padding:55px 20px 25px;

}

.logo-circle{

    width:95px;

    height:95px;

}

.brand h2{

    font-size:30px;

}

.brand p{

    font-size:13px;

}

.footer h4{

    font-size:13px;

    letter-spacing:4px;

}

.social-icon{

    gap:14px;

}

.social-icon a{

    width:48px;

    height:48px;

    font-size:20px;

}

.divider{

    width:160px;

}

.copyright{

    font-size:12px;

}

}

/* media Queries */
/* Laptop */
@media (max-width: 1366px) {
  html {
    font-size: 75%;
  }
}

/* Tablet */
@media (max-width: 768px) {
  html {
    font-size: 65%;
  }

  .popup-container {
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    align-content: flex-end;
    padding: 25rem 3rem;
    margin: 0 auto;
    overflow: hidden;
  }

  .popup-content {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* .hero .content {
    padding-top: 22rem;
  } */

  /* Quran */
  .quran {
    padding: 3rem 1rem;
  }
  .quran .row {
    flex-wrap: wrap;
  }
  .quran .row .quran-img img {
    width: 100%;
    object-fit: cover;
    object-position: center;
  }
  .quran .row .content {
    text-align: center;
    padding: 0;
    margin-top: 2rem;
  }
  .quran .row .content p {
    padding: 1rem 2rem;
  }

  /* about */
  .about {
    padding: 4rem 0;
  }
  .about .row {
    flex-wrap: wrap;
  }
  .about .row .about-img img {
    height: 50rem;
    width: 75%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: 0.8rem 0.8rem 2.4rem rgba(58, 79, 71, 0.8);
  }
  .about .row .content {
    text-align: left;
    padding: 4rem 7%;
  }
  .about .row .content h3 {
    font-size: 2.8rem;
  }
  .about .row .content p {
    font-size: 1.6rem;
    margin: 0rem;
  }
  .about .row .content span {
    font-size: 1.6rem;
  }
  .about .row .content i {
    font-size: 1rem;
  }
  .cba {
    padding: 0.5rem 1.8rem;
    margin-top: 1rem;
  }
  .about2 {
    padding: 6rem 0;
  }
  .about2 .row {
    flex-wrap: wrap;
  }
  .about2 .row .about2-img {
    order: 1;
    flex: 0 0 100%;
    text-align: right;
  }
  .about2 .row .about2-img img {
    height: 55rem;
    width: 75%;
    padding: 0;
    object-fit: cover;
    object-position: center;
    box-shadow: 0.8rem 0.8rem 2.4rem rgba(58, 79, 71, 0.8);
  }
  .about2 .row .content {
    order: 1;
    flex: 0 0 100%;
    padding: 1.5rem 7%;
    margin-top: 0.5rem;
    text-align: right;
  }
  .about2 .row .content h3 {
    font-size: 2.8rem;
    margin-top: 0.7rem;
  }
  .about2 .row .content p {
    font-size: 1.6rem;
    margin: 0rem;
  }
  .about2 .row .content span {
    font-size: 1.6rem;
  }
  .about2 .row .content i {
    font-size: 1rem;
  }
  .cba {
    padding: 0.5rem 1.8rem;
    margin-top: 1rem;
  }

  /* event */
  .event .card {
    flex-wrap: wrap;
  }
  .event .card .box-img {
    border-radius: 0 50% 0 0;
  }
  .event .card .box-img .slider-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .event .card .box-img .slider-img img {
    width: 100%;
    aspect-ratio: 3/2;
  }
  .event .card .box-date {
    display: flex;
  }
  .event .card .box-date .title-event {
    position: relative;
    flex: 1 1 15rem;
  }
  .event .card .box-date .title-event {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transform: none;
  }
  .event .card .box-date .title-event h3 {
    transform: rotate(-90deg);
    writing-mode: horizontal-tb;
    flex-direction: column;
  }

  .event .card .box-date .date-event {
    flex: 1 1 65rem;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    border: none;
  }

  .event .card .box-date .date-event .jam {
    margin: 0;
  }
  .event .card .box-date .date-event .jam p {
    margin-top: 1rem;
  }

  /* event-2 */
  .event-2 {
    padding: 7rem 7%;
  }
  .event-2 .card {
    flex-wrap: wrap;
  }
  .event-2 .card .box-img {
    border-radius: 50% 0 0 0;
    order: 1;
    flex: 0 0 100%;
  }
  .event-2 .card .box-img .slider-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .event-2 .card .box-img .slider-img img {
    width: 100%;
    aspect-ratio: 3/2;
  }
  .event-2 .card .box-date {
    display: flex;
    order: 1;
    flex: 0 0 100%;
  }
  .event-2 .card .box-date .title-event-2 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    transform: none;
    order: 2;
  }
  .event-2 .card .box-date .title-event-2 h3 {
    transform: rotate(90deg);
    writing-mode: horizontal-tb;
    text-align: right;
    margin: 0;
  }

  .event-2 .card .box-date .date-event-2 {
    flex: 1 1 65rem;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    border: none;
  }

  .event-2 .card .box-date .date-event-2 .jam {
    margin: 0;
  }
  .event-2 .card .box-date .date-event-2 .jam p {
    margin-top: 1rem;
  }

  /* gallery */
  .gallery .container .img-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* gift */
  .gift .card-container {
    flex-wrap: wrap;
  }

  /* rsvp */
  .rsvp {
    padding: 0;
  }
  .rsvp .row {
    flex-wrap: wrap;
  }
  .rsvp .row .rsvp-img {
    height: 25rem;
    object-fit: cover;
    object-position: center;
    margin-top: 7em;
  }

  .rsvp .row .message {
    padding: 3rem 7%;
  }
  .doa .content {
    padding-top: 33rem;
  }
}

/* Mobile Phone  */
@media (max-width: 450px) {
  html {
    font-size: 52%;
  }
}

/*==========================
      WEDDING GIFT
===========================*/

.gift{
    padding:120px 8%;
    background:#faf8f5;
}

.gift-title{
    text-align:center;
    margin-bottom:70px;
}

.gift-title span{
    text-transform:uppercase;
    letter-spacing:4px;
    color:#90a08f;
    font-weight:600;
}

.gift-title h2{
    font-size:68px;
    color:#556b5d;
    font-family:"Great Vibes";
    margin:15px 0;
}

.gift-title p{
    max-width:650px;
    margin:auto;
    line-height:1.8;
    color:#666;
}

.gift-wrapper{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:35px;
}

.gift-card{

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(15px);

    border-radius:30px;

    padding:45px;

    text-align:center;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);

    transition:.4s;
}

.gift-card:hover{

    transform:translateY(-10px);

}

.gift-icon{

    width:80px;
    height:80px;

    margin:auto;

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

    border-radius:50%;

    background:linear-gradient(135deg,#7f9584,#4f6758);

    color:white;

    margin-bottom:25px;

}

.gift-icon svg{

    width:34px;
    height:34px;

}

.gift-card h3{

    font-size:30px;

    color:#4f6758;

    margin-bottom:25px;

    font-family:"Cormorant Garamond";

}

.gift-bank{

    margin-bottom:20px;

}

.gift-bank img{

    width:120px;

}

.gift-card h4{

    font-size:20px;

    color:#666;

    margin-bottom:15px;

}

.rekening{

    font-size:28px;

    font-weight:bold;

    letter-spacing:3px;

    color:#4f6758;

    margin-bottom:15px;

}

.gift-card p{

    color:#777;

    margin-bottom:30px;

}

.copy-btn{

    border:none;

    padding:15px 28px;

    border-radius:50px;

    cursor:pointer;

    color:white;

    background:linear-gradient(135deg,#7f9584,#4f6758);

    transition:.3s;

    font-size:15px;

}

.copy-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.18);

}

@media(max-width:768px){

.gift{

padding:80px 7%;

}

.gift-title h2{

font-size:50px;

}

.gift-card{

padding:35px 25px;

}

.rekening{
font-size:22px;
}
}

.bank-name{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-bottom:15px;
}

.bank-name img{
    width:28px;
    height:28px;
    object-fit:contain;
}

.bank-name h4{
    margin:0;
    font-size:20px;
    color:#666;
    font-weight:600;
}

.message-card{
    display:flex;
    gap:15px;
    background:#fff;
    border-radius:20px;
    padding:18px;
    margin-bottom:15px;
    box-shadow:0 8px 25px rgba(0,0,0,.08);
}

.avatar{
    width:50px;
    height:50px;
    border-radius:50%;
    background:#7b9a84;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-weight:bold;
    font-size:20px;
}

.content h4{
    margin:0;
    color:#4d6658;
}

.content small{
    color:#888;
}

.content p{
    margin-top:8px;
    line-height:1.7;
}

/* ==========================
      FLOATING MUSIC
========================== */

.music-btn{

    position:fixed;

    right:-8rem;

    bottom:1px;

    width:55px;

    height:55px;

    border-radius:50%;

    overflow:hidden;

    cursor:pointer;

    z-index:9999;

    border:2px solid rgba(163, 157, 157, 0.404);

    box-shadow:
    0 0 20px rgba(216,180,106,.45);

    transition:.3s;
}

.music-btn img{

    width:100%;
    height:100%;
    object-fit:cover;
}

/* berputar */

.music-btn.playing{

    animation:spin 4s linear infinite;

}

/* ketika hover */

.music-btn:hover{

    transform:scale(1.08);

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/* Mobile */

@media(max-width:768px){

.music-btn{

    width:55px;
    height:55px;
    right:-20px;
    bottom:1px;
}
}

/* =====================================
        MOBILE RESPONSIVE FIX
===================================== */


@media(max-width:480px){


*,
*::before,
*::after{

    box-sizing:border-box;

}


html{

    font-size:55%;
    width:100%;

}


body{

    width:100%;
    overflow-x:hidden;

}

/* ================= HERO ================= */


.hero{

    min-height:100svh;

}


.hero .content{

    margin-bottom:3rem;
    padding:0 20px;

}


.hero .content h4{

    font-size:2rem;
    letter-spacing:4px;

}


.hero .content h1{

    font-size:3rem;

}


.hero .content a{

    font-size:1.1rem;

}


.hero .content .countdown{

    gap:15px;
    margin-top:2rem;

}


.hero .content .countdown .waktu{

    font-size:1.5rem;

}



/* SLIDER BUTTON */


.prev,
.next{

    width:35px;
    height:35px;
    font-size:15px;

}


.prev{

    left:10px;

}


.next{

    right:10px;

}



/* DOT */


.dots{

    bottom:25px;

}


.dot{

    width:6px;
    height:6px;

}





/* ================= ABOUT ================= */


.about,
.about2{

    padding:4rem 6%;

}


.about .row,
.about2 .row{

    gap:25px;

}


.about-img img,
.about2-img img{

    max-width:260px;
    width:100%;
    height:auto;

}


.about .content,
.about2 .content{

    padding:25px 18px;
    text-align:center;

}


.about .content h3,
.about2 .content h3{

    font-size:3rem;

}


.about .content p,
.about2 .content p{

    font-size:1.4rem;

}


.about .content span,
.about2 .content span{

    font-size:1.3rem;

}





/* ================= STORY ================= */


.story{

    padding:4rem 6%;

}


.story h2{

    font-size:3.5rem;

}


.story .part{

    margin:2rem 0;

}


.story .part p{

    font-size:1.3rem;

}





/* ================= EVENT ================= */


.bg-event{

    width:100%;
    padding:60px 15px;
    overflow:hidden;

}


.event-title{

    margin-top:0;
    margin-bottom:40px;

}


.event-title h2{

    font-size:40px;

}


.event-wrapper{

    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:25px;

}


.event-card{

    width:100%;
    max-width:100%;
    border-radius:20px;
    overflow:hidden;

}


.event-image{

    width:100%;
    height:220px;
    overflow:hidden;

}


.event-image img{

    width:100%;
    height:100%;
    object-fit:cover;

}


.event-body{

    width:100%;
    padding:25px;

}


.event-body h3{

    font-size:38px;
    overflow-wrap:break-word;

}


.event-body p{

    font-size:1.4rem;
    overflow-wrap:break-word;

}





/* ================= GALLERY ================= */


.bg-gallery{

    padding:60px 6%;

}


.gallery h2{

    margin-top:0;
    font-size:3.2rem;
    margin-bottom:40px;

}


.img-gallery{

    grid-template-columns:repeat(2,1fr);
    gap:12px;

}


.img-gallery img{

    width:100%;
    height:180px;
    object-fit:cover;

}





/* ================= RSVP ================= */


.rsvp{

    padding:60px 6%;

}


.rsvp-title h2{

    font-size:45px;

}


.message{

    padding:25px 18px;

}


.image-box{

    padding:10px;

}


.image-box::before,
.image-box::after{

    width:260px;
    height:340px;

}


.image-box .rsvp-img{

    width:250px;
    height:330px;
    margin-top:40px;

}





/* ================= DOA ================= */


.doa{

    min-height:100svh;

}


.doa .content{

    width:90%;
    padding:25px 15px;

}


.doa .content h1{

    font-size:45px;

}


.doa .content h3{

    font-size:45px;

}


.doa .content .desc{

    font-size:12px;

}





/* ================= FOOTER ================= */


.footer{

    padding:50px 15px 25px;

}


.logo-circle{

    width:90px;
    height:90px;

}


.brand h2{

    font-size:30px;

}


.social-icon a{

    width:45px;
    height:45px;
    font-size:18px;

}

/* ================= GIFT ================= */


.gift{

    padding:60px 6%;

}


.gift-title h2{

    font-size:45px;

}


.gift-wrapper{

    grid-template-columns:1fr;

}


.gift-card{

    padding:30px 20px;

}


.rekening{

    font-size:20px;

}
/* ================= MUSIC ================= */

.music-btn{

    right:15px;
    bottom:20px;
    width:50px;
    height:50px;

}

/* LOGO */
#logo{

    left:auto;
    right:15px;
    bottom:80px;

}


#logo img{

    width:45px;

}
}

/* ================= SMALL MOBILE 320px - 360px ================= */

@media(max-width:360px){

    .music-btn{

        right:15px;
        bottom:10px;
        width:45px;
        height:45px;

    }


    #logo{

        right:15px;
        bottom:45px;

    }


    #logo img{

        width:40px;

    }

}

/* ================= SMALL MOBILE DOA 320px - 360px ================= */

@media (max-width:360px){

    .doa .content{
        padding:28px 18px;
    }

    .doa .content .subtitle{
        font-size:.9rem;
        letter-spacing:3px;
    }

    .doa .content h1{
        font-size:34px;
        margin:8px 0 15px;
    }

    .doa .content .desc{
        font-size:11px;
        line-height:1.7;
    }

    .doa .content h3{
        font-size:34px;
    }

}