/*
Theme Name: Undangan Wardah Elegan
Theme URI: https://example.local/
Author: OpenAI
Description: Tema undangan digital premium bernuansa biru Wardah dengan hero slideshow, tipografi elegan, animasi scroll, galeri, RSVP, musik, dan amplop digital.
Version: 10.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: undangan-wardah
*/

:root{
  --wardah:#28aeb5;
  --wardah-dark:#086a72;
  --wardah-deep:#064f57;
  --wardah-soft:#dff7f8;
  --wardah-pale:#f2fbfb;
  --paper:#fff;
  --ink:#173a3e;
  --muted:#688287;
  --gold:#c7a26a;
  --line:rgba(40,174,181,.22);
  --shadow:0 24px 70px rgba(6,79,87,.16);
  --radius:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#e8f5f5;font-family:"Montserrat",Arial,sans-serif;line-height:1.75;overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
.site-shell{width:min(520px,100%);margin:0 auto;min-height:100vh;background:#fff;overflow:hidden;box-shadow:0 0 100px rgba(0,75,82,.18)}
.container{width:min(440px,88%);margin:0 auto}
.section{position:relative;padding:86px 0}
.soft{background:linear-gradient(180deg,#f8fefe,var(--wardah-pale))}
.dark{color:#fff;background:radial-gradient(circle at 20% 20%,rgba(255,255,255,.08),transparent 32%),linear-gradient(150deg,var(--wardah),var(--wardah-dark) 60%,var(--wardah-deep))}
.center{text-align:center}
.muted{color:var(--muted)}
.dark .muted{color:rgba(255,255,255,.78)}
.eyebrow{margin-bottom:10px;color:var(--wardah);font-size:.7rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase}
.dark .eyebrow{color:#d9ffff}
h1,h2,h3{margin-top:0;color:inherit;font-family:"Cormorant Garamond",Georgia,serif}
h1{font-size:clamp(3.4rem,15vw,5.5rem);line-height:.92;margin-bottom:18px}
h2{font-size:clamp(2.3rem,10vw,3.8rem);line-height:1;margin-bottom:20px;font-weight:600}
h3{font-size:1.6rem;line-height:1.15;margin-bottom:12px}
.script{font-family:"Great Vibes","Brush Script MT",cursive;font-weight:400}
.names{font-family:"Great Vibes","Brush Script MT",cursive;font-size:clamp(4rem,17vw,6.4rem);line-height:.95;text-shadow:0 5px 25px rgba(0,0,0,.25)}
.section-title .script{display:block;color:var(--wardah-dark);font-size:clamp(3rem,12vw,4.7rem);line-height:1}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:12px 24px;border:0;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--wardah),var(--wardah-dark));box-shadow:0 14px 30px rgba(6,106,114,.28);font-size:.84rem;font-weight:700;letter-spacing:.04em;text-decoration:none;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(6,106,114,.34)}
.btn.light{color:var(--wardah-dark);background:#fff}
.btn.outline{color:var(--wardah-dark);background:transparent;border:1px solid var(--wardah)}
.card{padding:28px 22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.94);box-shadow:var(--shadow)}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px auto 26px;color:var(--gold)}
.ornament:before,.ornament:after{content:"";width:62px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.ornament:after{background:linear-gradient(90deg,var(--gold),transparent)}
.ornament span{font-family:Georgia,serif;font-size:1.2rem}
.bg-slider{position:absolute;inset:0;overflow:hidden}
.bg-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(9%) scale(1.08);
  background-position:center;
  background-size:cover;
  transition:
    opacity 1.05s ease,
    transform 5.8s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,transform;
}
.bg-slide.active{
  opacity:1;
  transform:translateX(0) scale(1);
}
.bg-slider:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,32,35,.08),rgba(1,32,35,.28) 45%,rgba(1,32,35,.83))}
.slider-dots{position:absolute;z-index:8;left:50%;bottom:22px;display:flex;gap:8px;transform:translateX(-50%)}
.slider-dot{width:7px;height:7px;padding:0;border:1px solid rgba(255,255,255,.85);border-radius:50%;background:transparent;cursor:pointer;transition:.3s ease}
.slider-dot.active{width:24px;border-radius:999px;background:#fff}
.slider-arrow{position:absolute;z-index:8;top:50%;width:38px;height:38px;border:1px solid rgba(255,255,255,.55);border-radius:50%;color:#fff;background:rgba(0,55,59,.25);backdrop-filter:blur(8px);transform:translateY(-50%);cursor:pointer}
.slider-arrow.prev{left:15px}
.slider-arrow.next{right:15px}
.cover{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;color:#fff;background:var(--wardah-deep)}
.cover.hidden{display:none}
.cover-content{position:relative;z-index:5;width:min(430px,90vw);padding:52px 24px 42px;border:1px solid rgba(255,255,255,.45);border-radius:38px;text-align:center;background:linear-gradient(180deg,rgba(0,35,38,.05),rgba(0,40,44,.67));box-shadow:0 30px 90px rgba(0,0,0,.32);backdrop-filter:blur(2px)}
.cover .eyebrow{color:#fff}
.guest-box{margin:24px 0 20px;padding:16px 12px;border-top:1px solid rgba(255,255,255,.38);border-bottom:1px solid rgba(255,255,255,.38)}
.guest-box span{display:block;font-size:.72rem;opacity:.85}
.guest-box strong{display:block;font-family:"Cormorant Garamond",serif;font-size:1.25rem}
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;color:#fff;background:var(--wardah-deep)}
.hero-content{position:relative;z-index:5;width:100%;padding:110px 0 72px;text-align:center}
.hero-date{display:inline-block;margin:4px 0 24px;font-family:"Cormorant Garamond",serif;font-size:1.15rem;letter-spacing:.16em}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:25px}
.countdown>div{padding:13px 5px;border:1px solid rgba(255,255,255,.28);border-radius:17px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px)}
.countdown strong{display:block;font-family:"Cormorant Garamond",serif;font-size:1.7rem;line-height:1}
.countdown span{font-size:.62rem;text-transform:uppercase;letter-spacing:.12em}
.monogram{width:112px;height:112px;display:grid;place-items:center;margin:0 auto 26px;border:1px solid var(--wardah);border-radius:50%;color:var(--wardah-dark);font-family:"Cormorant Garamond",serif;font-size:2.2rem;background:radial-gradient(circle,#fff,var(--wardah-pale));box-shadow:0 15px 38px rgba(6,106,114,.12)}
.quote{font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-style:italic;line-height:1.65}
.couple-list{display:grid;gap:72px}
.person{text-align:center}
.photo-arch{position:relative;width:245px;height:330px;margin:0 auto 24px;padding:8px;border:1px solid var(--line);border-radius:130px 130px 28px 28px;background:linear-gradient(145deg,#fff,var(--wardah-soft));box-shadow:var(--shadow)}
.photo-arch:before{content:"";position:absolute;inset:-9px;z-index:-1;border:1px solid rgba(199,162,106,.45);border-radius:140px 140px 34px 34px}
.photo-arch img,.placeholder{width:100%;height:100%;border-radius:120px 120px 21px 21px;object-fit:cover}
.placeholder{display:grid;place-items:center;padding:22px;color:var(--wardah-dark);background:linear-gradient(145deg,var(--wardah-soft),#bcebed);text-align:center;font-size:.82rem}
.person-name{margin:0 0 4px;color:var(--wardah-dark);font-family:"Great Vibes",cursive;font-size:3.8rem;font-weight:400}
.event-list{display:grid;gap:25px}
.event-card{position:relative;overflow:hidden;text-align:center}
.event-card:before{content:"";position:absolute;top:-70px;right:-60px;width:160px;height:160px;border-radius:50%;background:var(--wardah-soft)}
.event-card>*{position:relative}
.event-label{display:inline-block;padding:5px 14px;border-radius:999px;color:var(--wardah-dark);background:var(--wardah-soft);font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.event-day{margin:12px 0 0;color:var(--wardah);font-family:"Cormorant Garamond",serif;font-size:4.5rem;line-height:1}
.timeline{position:relative;margin-top:35px}
.timeline:before{content:"";position:absolute;top:5px;bottom:5px;left:15px;width:1px;background:rgba(255,255,255,.35)}
.story{position:relative;padding:0 0 36px 48px}
.story:before{content:"";position:absolute;top:4px;left:7px;width:15px;height:15px;border:4px solid #fff;border-radius:50%;background:var(--wardah);box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.story-date{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#d7ffff}
.gallery-slider{position:relative;overflow:hidden;border-radius:28px;box-shadow:var(--shadow)}
.gallery-track{display:flex;transition:transform .65s cubic-bezier(.22,.61,.36,1)}
.gallery-item{min-width:100%;aspect-ratio:4/5;background:var(--wardah-soft);margin:0}
.gallery-item img{width:100%;height:100%;object-fit:cover}
.gallery-empty{width:100%;height:100%;display:grid;place-items:center;color:var(--wardah-dark);text-align:center;padding:30px;background:linear-gradient(145deg,var(--wardah-soft),#b8e9eb)}
.gallery-controls{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}
.gallery-button{width:42px;height:42px;border:1px solid var(--wardah);border-radius:50%;color:var(--wardah-dark);background:#fff;cursor:pointer}
.gallery-counter{color:var(--muted);font-family:"Cormorant Garamond",serif;font-size:1.1rem}
.bank{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px;border:1px dashed var(--wardah);border-radius:18px;background:var(--wardah-pale)}
form{display:grid;gap:13px}
input,select,textarea{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:14px;outline:0;color:var(--ink);background:#fff;transition:border .2s ease,box-shadow .2s ease}
input:focus,select:focus,textarea:focus{border-color:var(--wardah);box-shadow:0 0 0 4px rgba(40,174,181,.1)}
textarea{min-height:115px;resize:vertical}
.notice{display:none;padding:13px;border-radius:12px;color:#245c2b;background:#eaf8ed}
.music{position:fixed;z-index:500;right:18px;bottom:18px;width:50px;height:50px;border:0;border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--wardah),var(--wardah-dark));box-shadow:0 15px 34px rgba(6,79,87,.34);cursor:pointer}
.music.playing{animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.footer{position:relative;padding:78px 0 85px;overflow:hidden;text-align:center;color:#fff;background:linear-gradient(145deg,var(--wardah),var(--wardah-deep))}
.footer:before{content:"";position:absolute;inset:0;opacity:.18;background:radial-gradient(circle at 20% 20%,#fff,transparent 28%),radial-gradient(circle at 80% 80%,#fff,transparent 28%)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media(max-width:380px){.countdown{grid-template-columns:repeat(2,1fr)}.cover-content{padding-left:18px;padding-right:18px}}

.quote-source{
  margin-top:18px;
  color:var(--wardah-dark);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.35rem;
  font-weight:600;
  font-style:italic;
  letter-spacing:.04em;
}

.invited-section{
  background:
    radial-gradient(circle at 15% 15%,rgba(40,174,181,.10),transparent 30%),
    linear-gradient(180deg,#fff,var(--wardah-pale));
}
.invited-card{
  position:relative;
  overflow:hidden;
  text-align:center;
}
.invited-card:before,
.invited-card:after{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  border:1px solid rgba(199,162,106,.28);
  border-radius:50%;
}
.invited-card:before{top:-105px;left:-90px}
.invited-card:after{right:-90px;bottom:-105px}
.invited-card>*{position:relative}
.invited-list{
  display:grid;
  gap:10px;
  margin-top:26px;
  text-align:left;
}
.invited-item{
  position:relative;
  padding:10px 14px 10px 30px;
  border-bottom:1px solid var(--line);
  font-family:"Cormorant Garamond",Georgia,serif;
  font-size:1.18rem;
  font-weight:600;
  line-height:1.45;
}
.invited-item:before{
  content:"•";
  position:absolute;
  left:10px;
  top:8px;
  color:var(--wardah);
  font-size:1.2rem;
}
.invited-item:last-child{border-bottom:0}


/* Premium Wedding Gift */
.gift-section{
  position:relative;
  min-height:760px;
  padding:90px 0;
  overflow:hidden;
  color:#fff;
  background-color:var(--wardah);
  background-image:linear-gradient(145deg,var(--wardah),var(--wardah-dark));
  background-position:center;
  background-size:cover;
}
.gift-section:before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.32;
  background:
    radial-gradient(circle at 16% 15%,rgba(255,255,255,.32),transparent 28%),
    radial-gradient(circle at 85% 80%,rgba(255,255,255,.18),transparent 34%);
}
.gift-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      180deg,
      rgba(6,106,114,.76),
      rgba(6,79,87,.88)
    );
}
.gift-content{
  position:relative;
  z-index:2;
}
.gift-heading .eyebrow{
  color:#e9ffff;
}
.gift-heading .script{
  display:block;
  margin-bottom:24px;
  color:#fff;
  font-size:clamp(3.7rem,15vw,5.5rem);
  line-height:1;
}
.gift-heading p{
  margin:0 auto 18px;
  max-width:390px;
  color:rgba(255,255,255,.92);
  font-size:.98rem;
  font-weight:500;
  line-height:1.55;
}
.gift-accounts{
  display:grid;
  gap:0;
  margin-top:48px;
}
.gift-account{
  display:grid;
  grid-template-columns:minmax(0,1fr) 124px;
  gap:18px;
  align-items:center;
  padding:22px 18px;
  margin-bottom:14px;
  border-radius:20px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(7px);
  border-bottom:1px solid rgba(255,255,255,.58);
}
.gift-account:first-child{
  border-top:0;
}
.gift-account-data{
  min-width:0;
  text-align:left;
}
.gift-label{
  display:block;
  margin-bottom:4px;
  font-size:.9rem;
  font-style:italic;
  font-weight:600;
}
.owner-label{
  margin-top:14px;
}
.gift-number,
.gift-owner{
  display:block;
  overflow-wrap:anywhere;
  font-size:1.02rem;
  letter-spacing:.03em;
}
.gift-account-actions{
  display:grid;
  justify-items:center;
  gap:14px;
}
.bank-logo-box,
.bank-name-box{
  width:116px;
  min-height:58px;
  display:grid;
  place-items:center;
  padding:8px;
  color:var(--wardah-deep);
  background:#fff;
}
.bank-logo-box img{
  width:100%;
  max-height:50px;
  object-fit:contain;
}
.bank-name-box{
  font-size:1.05rem;
  font-weight:800;
  text-align:center;
}
.gift-copy{
  min-width:88px;
  min-height:36px;
  padding:7px 13px;
  border:1px solid rgba(255,255,255,.88);
  color:#fff;
  background:rgba(255,255,255,.10);
  border-radius:8px;
  cursor:pointer;
  font-size:.84rem;
  font-weight:700;
}
.gift-copy:hover{
  color:var(--wardah-deep);
  background:#fff;
}
@media(max-width:380px){
  .gift-account{
    grid-template-columns:minmax(0,1fr) 105px;
    gap:12px;
  }
  .bank-logo-box,
  .bank-name-box{
    width:100px;
  }
}


/* Mobile fix: ensure every love-story item remains visible */
@media(max-width:600px){
  .story.reveal{
    opacity:1 !important;
    transform:none !important;
  }
  .timeline{
    overflow:visible;
  }
  .story{
    min-height:0;
  }
}




/* V9 staggered love-story animation */
.story-animate{
  opacity:0;
  visibility:hidden;
  transform:translateY(26px);
  transition:
    opacity .8s ease,
    transform .8s ease,
    visibility 0s linear .8s;
}
.story-animate.story-in{
  opacity:1;
  visibility:visible;
  transform:none;
  transition-delay:var(--story-delay,0ms);
}
.story-animate:nth-of-type(1){--story-delay:0ms}
.story-animate:nth-of-type(2){--story-delay:420ms}
.story-animate:nth-of-type(3){--story-delay:840ms}
.story-animate:nth-of-type(4){--story-delay:1260ms}

/* Never leave story content hidden when JS is unavailable */
.no-js .story-animate{
  opacity:1;
  visibility:visible;
  transform:none;
}

/* Mobile keeps the animation, but triggers earlier and faster */
@media(max-width:600px){
  .story-animate{
    transform:translateY(18px);
    transition-duration:.65s;
  }
  .story-animate:nth-of-type(2){--story-delay:280ms}
  .story-animate:nth-of-type(3){--story-delay:560ms}
  .story-animate:nth-of-type(4){--story-delay:840ms}
}


/* V10 — premium automatic slideshow */
.slide-progress{
  position:absolute;
  z-index:9;
  right:9%;
  bottom:10px;
  left:9%;
  height:2px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.25);
}
.slide-progress span{
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#fff;
}
.slide-progress.running span{
  animation:uw-slide-progress 4.6s linear forwards;
}
@keyframes uw-slide-progress{
  from{width:0}
  to{width:100%}
}

.gallery-slider{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(40,174,181,.18);
  border-radius:30px;
  background:#fff;
  box-shadow:0 26px 70px rgba(6,79,87,.18);
}
.gallery-track{
  display:flex;
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.gallery-item{
  position:relative;
  min-width:100%;
  aspect-ratio:4/5;
  overflow:hidden;
}
.gallery-item:after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:25%;
  pointer-events:none;
  background:linear-gradient(transparent,rgba(2,47,52,.24));
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.015);
  transition:transform 5s ease;
}
.gallery-item.is-active img{
  transform:scale(1.08);
}
.gallery-dots{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:18px;
}
.gallery-dot{
  width:8px;
  height:8px;
  padding:0;
  border:1px solid var(--wardah);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
  transition:width .25s ease,background .25s ease;
}
.gallery-dot.active{
  width:27px;
  border-radius:999px;
  background:var(--wardah);
}

/* Small swipe hint shown only on phones */
.gallery-slider:before{
  content:"Geser foto";
  position:absolute;
  z-index:5;
  right:14px;
  bottom:14px;
  padding:5px 10px;
  border-radius:999px;
  color:#fff;
  background:rgba(6,79,87,.48);
  backdrop-filter:blur(8px);
  font-size:.62rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}

@media(min-width:700px){
  .gallery-slider:before{display:none}
}

/* Respect accessibility setting */
@media(prefers-reduced-motion:reduce){
  .bg-slide,
  .gallery-track,
  .gallery-item img{
    transition:none !important;
    animation:none !important;
  }
}