/*=======================
   STYLE.CSS — PREMIUM LV
   Black + Gold theme
   ======================= */
:root{
  --bg:#0b0b0b;
  --gold:#c7a84a;
  --text:#efece6;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:'Poppins',sans-serif;-webkit-font-smoothing:antialiased}

/* cover background image from images/cover.jpg */
.cover-bg{
  position:fixed;inset:0;
  background-image: url('../images/cover.jpg');
  background-size:cover;background-position:center;
  filter: blur(3px) brightness(.65) contrast(1.02);
  z-index:0;transform:translateZ(0);
}
/* overlay */
.cover-overlay{position:fixed;inset:0;z-index:2}
.overlay-gloss{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.42));mix-blend-mode:overlay;pointer-events:none}

/* ornament */
.ornament{position:absolute;top:12%;width:86px;opacity:.92;pointer-events:none;z-index:3;filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));animation:floatSlow 10s ease-in-out infinite}
.ornament-left{left:10px}
.ornament-right{right:10px;transform:scaleX(-1)}
.orn-img{width:100%;height:auto;display:block}

/* wayang bottom */
.wayang-ornament{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:min(720px,92%);opacity:.98;z-index:3;pointer-events:none;animation:wiggle 9s ease-in-out infinite}
.wayang-img{width:100%;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.7))}

/* center content */
.cover-content{position:relative;z-index:4;width:min(980px,92%);margin:8vh auto 0;text-align:center;padding:28px 18px}
.label-top{opacity:0;font-size:14px;letter-spacing:3px;font-weight:700;transform:translateY(-8px);transition:all .6s cubic-bezier(.2,.8,.2,1);color:var(--text)}
.names-wrapper{opacity:0;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:18px;transform:translateY(10px);transition:all .8s cubic-bezier(.2,.8,.2,1)}
.name{font-family:'Dancing Script',cursive;color:var(--gold);font-size:48px;line-height:.9;text-shadow:0 3px 12px rgba(0,0,0,.7)}
.name .first{font-size:82px;display:inline-block;vertical-align:middle;margin-right:6px;line-height:.8}
.amp{font-family:'Playfair Display',serif;color:var(--text);font-size:34px;opacity:.95;transform:translateY(6px)}
.date-block{opacity:0;margin-top:80px;transform:translateY(8px);transition:all .7s}
.guest-block{opacity:0;margin-top:90px;transform:translateY(8px);transition:all .7s}
.btn-open{opacity:0;display:inline-block;margin-top:100px;background:linear-gradient(180deg,var(--gold),#b78f27);color:#080808;padding:12px 30px;border-radius:12px;text-decoration:none;font-weight:800;box-shadow:0 10px 36px rgba(0,0,0,.6);transform-origin:center;transition:all .6s;animation:breath 3.6s ease-in-out infinite}
.btn-open:active{transform:scale(.98)}
@keyframes breath{0%{transform:scale(1)}50%{transform:scale(1.02)}100%{transform:scale(1)}}

/* reveal helper */
.reveal{opacity:1 !important;transform:translateY(0) !important}

/* MAIN content wrapper (initially hidden) */
.main-content{opacity:1;position:relative;z-index:5;padding-top:28px;background:linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.02));}
.hidden{opacity:0;pointer-events:none;transform:translateY(10px);transition:all .8s ease}

/* ---------- HEADER ---------- */
.site-header{padding:22px 0;text-align:center;border-bottom:1px solid rgba(199,168,74,0.06);background:transparent;position:sticky;top:0;z-index:40}
.header-title{color:var(--gold);font-weight:600;font-size:20px}
.gold-small-line{width:40px;height:2px;background:var(--gold);display:inline-block;opacity:.8}

/* ---------- CARD / CONTENT ---------- */
.card{background:var(--card);border:1px solid rgba(199,168,74,0.12);border-radius:14px;padding:26px;width:min(880px,94%);margin:26px auto;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.section-title{font-family:'Playfair Display',serif;color:var(--gold);text-align:center;margin-bottom:14px;font-size:22px}

/* couple */
.couple{display:flex;gap:26px;justify-content:space-around;flex-wrap:wrap}
.person{text-align:center;width:42%;min-width:240px}
.profile-photo{width:100%;height:auto;border-radius:12px;border:1px solid rgba(199,168,74,0.25);box-shadow:0 6px 26px rgba(0,0,0,.45)}
.parent-text{margin-top:10px;opacity:.85}

/* acara / map / countdown */
.event-item{text-align:center;margin-bottom:10px}
.map-btn{display:block;margin:10px auto;background:var(--gold);color:#060606;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:700}
.countdown{font-size:18px;color:var(--gold);font-weight:700;margin-top:12px}

/* story */
.love-story p{margin-bottom:14px;opacity:.95}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.gallery img{width:100%;border-radius:12px;border:1px solid rgba(255,255,255,0.06);object-fit:cover;height:170px;box-shadow:0 6px 18px rgba(0,0,0,.45)}

/* rekening */
.rekening-box{background:rgba(255,255,255,0.03);padding:18px;border-radius:12px;border:1px solid rgba(199,168,74,0.12);text-align:center}
.rek-nama{margin-top:8px;opacity:.85}
.rek-no{font-size:18px;font-weight:700;color:var(--gold);letter-spacing:1.6px}
.copy-btn{margin-top:12px;background:var(--gold);color:#060606;padding:10px 16px;border-radius:10px;border:none;font-weight:700}

/* wa */
.wa-btn{display:inline-block;background:linear-gradient(180deg,#43d854,#32b144);color:#fff;padding:10px 22px;border-radius:10px;text-decoration:none;font-weight:700;box-shadow:0 8px 20px rgba(0,0,0,.4);}

/* footer */
footer{padding:40px 0 80px;text-align:center;color:rgba(255,255,255,0.65)}

/* music btn */
.music-toggle{position:fixed;right:14px;bottom:14px;z-index:999;background:rgba(0,0,0,0.6);border:1px solid rgba(199,168,74,0.2);padding:10px;border-radius:50%;color:var(--gold);font-size:14px;backdrop-filter:blur(6px)}

/* particles layer */
#particleCanvas{position:fixed;inset:0;pointer-events:none;z-index:3}

/* animations for ornaments */
@keyframes floatSlow{0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes wiggle{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}100%{transform:translateX(-50%) translateY(0)}}

/* reveal transitions */
.fade-in{opacity:0;transform:translateY(14px);transition:all .8s cubic-bezier(.2,.85,.25,1)}
.fade-in.in-view{opacity:1;transform:translateY(0)}

/* responsive */
@media(max-width:720px){
  .name{font-size:36px}
  .name .first{font-size:60px}
  .ornament,.wayang-ornament{display:none}
  .gallery img{height:140px}
  .profile-photo{height:auto}
  .cover-bg{filter:blur(2px) brightness(.7)}
}

/* =======================
   PREMIUM TERIMA KASIH
   ======================= */

.thankyou-section {
  padding: 40px 28px !important;
  position: relative;
  overflow: hidden;
}

.thankyou-header {
  text-align: center;
  position: relative;
  margin-bottom: 18px;
}

.thankyou-ornament {
  width: 70px;
  opacity: 0.9;
  margin-bottom: 6px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.thankyou-title {
  font-family: "Playfair Display", serif;
  font-size: 26px;
  color: #d4b86a;
  margin: 0;
  font-weight: 600;
}

.thankyou-line {
  width: 90px;
  height: 2px;
  background: linear-gradient(to right, transparent, #d4b86a, transparent);
  display: block;
  margin: 10px auto 0 auto;
  border-radius: 2px;
}

.thankyou-text {
  font-size: 15px;
  opacity: 0.85;
  line-height: 1.6;
  color: #eee;
  text-align: center;
  margin-top: 10px;
}

.thankyou-text-bold {
  font-size: 16px;
  margin-top: 14px;
  color: #d4b86a;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
}

/* ==== FOTO MEMPELAI JADI LINGKARAN PREMIUM ==== */

/* Foto mempelai bulat & center */
.mempelai-img-container {
    width: 180px;
    height: 180px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #d4af37;
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);

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

/* Biar wajah selalu tepat center */
.mempelai-img-container img {
    width: 120%;
    height: 120%;
    object-fit: cover;
}

/* Container utama mempelai */
.couple {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Setiap item mempelai */
.person {
    width: 100%;
    text-align: center;
    margin-bottom: 28px; /* jarak antar blok */
    
    display: flex;
    flex-direction: column;
    align-items: center;

    /* animasi */
    opacity: 0;
    transform: translateY(35px);
    animation: fadeUp 0.8s ease-out forwards;
}

/* Delay animasi biar masuk satu-satu */
.person:nth-child(1) {
    animation-delay: 0.4s;
}

.person:nth-child(2) {
    animation-delay: 0.7s;
}

/* Jarak foto → nama */
.person h3 {
    margin-top: 20px;
    margin-bottom: 8px;
}

/* Jarak nama → teks orang tua */
.parent-text {
    margin-top: 8px;
    line-height: 1.5;
}

/* Animasi */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Geser foto wanita agar wajahnya lebih center */
.mempelai-img-container img.wanita {
    object-position: center -40px; /* naik 20px */
}

/* ===========================
   HEADER MEWAH FINAL
   =========================== */
.site-header.enhanced-header {
    background: #5e3f1a !important;   /* coklat elegan */
    padding: 26px 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.18);
    margin-bottom: 26px;
    position: relative;
    z-index: 10;
}

.header-decor {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.header-decor .line {
    width: 55px;
    height: 2px;
    background: var(--gold);
    opacity: .85;
}

.header-decor .dot {
    color: var(--gold) !important;
    font-size: 20px;
    font-weight: 700;
    margin-top: -2px;
}

.header-decor .header-title {
    color: var(--gold) !important;
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    letter-spacing: 1.2px;
}

/* THE WEDDING OF — tepat di atas nama */
#label-top {
  width: 100%;
  text-align: center;

  font-size: 14px;
  letter-spacing: 5px;
  font-weight: 700;
  color: var(--text);

  margin-bottom: 20px;

  opacity: 0;
  transform: translateY(-12px);
  animation: fadeTop 1s ease forwards;
}

@keyframes fadeTop {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Pastikan wrapper tetap center penuh */
.names-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;             /* jarak antar nama & ampersand */
  width: 100%;
  text-align: center;
  margin-top: 10px;

  opacity: 0;
  transform: translateY(10px);
  animation: showNames 1.2s ease forwards;
}

@keyframes showNames {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Nama */
.name {
  font-family: 'Dancing Script', cursive;
  font-size: 62px;
  color: var(--gold);
  line-height: 0.85;
  text-shadow: 0 3px 12px rgba(0,0,0,.55);
}

/* Huruf pertama besar dan TANPA spasi */
.name .first {
  font-size: 82px;
  margin: 0;
  padding: 5px;
  display: inline-block;
  line-height: 0.8;
}

/* Ampersand (&) */
.amp {
  font-family: 'Playfair Display', serif;
  font-size: 42px;
  color: var(--text);
  opacity: 0.95;
  margin: 0 8px;
  transform: translateY(6px);
}

.guest-block {
  margin-top: 40px;
  font-size: 18px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: all .7s cubic-bezier(.2,.8,.2,1);
}