/* ===== Tema: variabel warna. Tema bawaan = merah emas ===== */
:root{
  --bg1:#8a0f20;--bg2:#3d050d;--text:#fff7e0;--head:#f5e08a;
  --gold:#d4af37;--gold-l:#f5e08a;--btn-text:#3d050d;
  --card-bg:rgba(0,0,0,.28);--input-bg:rgba(255,247,224,.95);--input-text:#3d050d;
  --glow:rgba(212,175,55,.15);--shade:rgba(0,0,0,.4);
  --ui-bg:#3d050d;--ui-fg:#f5e08a;
  --bf-a:#d4af37;--bf-as:#fff3b0;--bf-b:#c4182d;--bf-bs:#d4af37;--bf-body:#4a0610
}
body[data-theme="sage"]{
  --bg1:#4a6b57;--bg2:#1f3328;--text:#f4f1e6;--head:#f0dc8c;
  --gold:#d4af37;--gold-l:#f0dc8c;--btn-text:#1f3328;
  --card-bg:rgba(0,0,0,.26);--input-bg:rgba(250,248,238,.96);--input-text:#1f3328;
  --glow:rgba(212,175,55,.15);--shade:rgba(0,0,0,.4);
  --ui-bg:#1f3328;--ui-fg:#f0dc8c;
  --bf-a:#d4af37;--bf-as:#fff3b0;--bf-b:#9fc4a0;--bf-bs:#f4f1e6;--bf-body:#1f3328
}
body[data-theme="navy"]{
  --bg1:#1f3a68;--bg2:#0b1630;--text:#eef2fa;--head:#dbe3f0;
  --gold:#b8c4d6;--gold-l:#eef2fa;--btn-text:#0b1630;
  --card-bg:rgba(0,0,0,.28);--input-bg:rgba(240,244,251,.96);--input-text:#0b1630;
  --glow:rgba(184,196,214,.18);--shade:rgba(0,0,0,.45);
  --ui-bg:#0b1630;--ui-fg:#eef2fa;
  --bf-a:#c0c9d8;--bf-as:#ffffff;--bf-b:#5b7fc0;--bf-bs:#dbe3f0;--bf-body:#0b1630
}
body[data-theme="blush"]{
  --bg1:#fff1f0;--bg2:#f2c4c6;--text:#5a2a33;--head:#9b4a5a;
  --gold:#b76e79;--gold-l:#e0a3a8;--btn-text:#ffffff;
  --card-bg:rgba(255,255,255,.55);--input-bg:#ffffff;--input-text:#5a2a33;
  --glow:rgba(183,110,121,.2);--shade:rgba(90,42,51,.28);
  --ui-bg:#8a3f50;--ui-fg:#fff1f0;
  --bf-a:#d98a95;--bf-as:#ffffff;--bf-b:#e8b4b8;--bf-bs:#b76e79;--bf-body:#8a3f50
}
body[data-theme="hitam"]{
  --bg1:#2c2c2c;--bg2:#050505;--text:#f3ead0;--head:#f0d777;
  --gold:#d4af37;--gold-l:#f0d777;--btn-text:#111111;
  --card-bg:rgba(255,255,255,.06);--input-bg:rgba(250,245,230,.96);--input-text:#111111;
  --glow:rgba(212,175,55,.18);--shade:rgba(0,0,0,.6);
  --ui-bg:#050505;--ui-fg:#f0d777;
  --bf-a:#d4af37;--bf-as:#fff3b0;--bf-b:#f5f0e0;--bf-bs:#d4af37;--bf-body:#3a2f10
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--text);text-align:center;line-height:1.6;
  background:radial-gradient(circle at 50% 0,var(--bg1) 0,var(--bg2) 100%) fixed}
body.locked{overflow:hidden}
.script{font-family:'Great Vibes',cursive;font-weight:400;line-height:1.2}
.gold-text{background:linear-gradient(90deg,var(--gold),var(--gold-l),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
h1.gold-text{background-size:200% 100%;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-200% 0}}
.big{font-size:2.4rem}.mt{margin-top:2rem}
h1.script{font-size:clamp(2.6rem,11vw,4.5rem)}
h2.script{font-size:2.6rem;margin-bottom:1rem}
.wrap>h2.script::after{content:"";display:block;width:110px;height:2px;margin:.5rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.ornament{color:var(--gold);letter-spacing:.6rem;margin-top:1rem}

/* Cover */
#cover{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;
  background:radial-gradient(circle at 50% 30%,var(--bg1) 0,var(--bg2) 100%);border:10px double var(--gold);
  transition:transform .9s ease,opacity .9s ease}
#cover::before{content:"";position:absolute;inset:12px;border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);pointer-events:none}
#cover.hide{transform:translateY(-100%);opacity:0;pointer-events:none}
#guestName{font-size:1.9rem;color:var(--head);margin:.4rem 0 1.8rem;word-break:break-word}

.btn{font:inherit;font-weight:600;padding:.7rem 1.8rem;border:0;border-radius:999px;cursor:pointer;color:var(--btn-text);
  background:linear-gradient(135deg,var(--gold-l),var(--gold));box-shadow:0 4px 14px var(--shade);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.6;cursor:wait}

/* Layout */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,var(--glow),transparent 62%)}
.wrap{max-width:760px;margin:0 auto;padding:3.5rem 1.2rem}
.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.cards .reveal:nth-child(2){transition-delay:.15s}
.cards .reveal:nth-child(3){transition-delay:.3s}
.card{position:relative;background:var(--card-bg);border:1px solid var(--gold);border-radius:16px;padding:1.4rem;
  box-shadow:0 0 18px var(--glow);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.card::before{content:"";position:absolute;inset:5px;border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:12px;pointer-events:none}
.card h3{color:var(--head);font-size:1.5rem;margin-bottom:.4rem}
.card a.btn{display:inline-block;margin-top:.8rem;text-decoration:none;font-size:1rem;padding:.5rem 1.2rem}

/* Countdown */
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.countdown div{border:1px solid var(--gold);border-radius:12px;padding:.8rem .2rem;background:var(--card-bg)}
.countdown b{display:block;font-size:2rem;color:var(--head)}
.countdown span{font-size:.9rem}

/* Forms */
input,select,textarea{width:100%;font:inherit;padding:.7rem;margin:.35rem 0 .8rem;border-radius:10px;border:1px solid var(--gold);
  background:var(--input-bg);color:var(--input-text)}
label{display:block;text-align:left}
.gb-item{text-align:left;margin-top:1rem;padding:1rem;border-left:4px solid var(--gold);background:var(--card-bg);border-radius:8px}
.gb-item b{color:var(--head)}.gb-item small{opacity:.75}
.gen-link{display:flex;gap:.5rem;align-items:center;margin-top:.8rem;text-align:left;font-size:.95rem;word-break:break-all}
.gen-link .btn{flex-shrink:0;padding:.4rem 1rem;font-size:.95rem;text-decoration:none}
.gen-page .wrap{position:relative;z-index:1}

/* Music */
#musicBtn{position:fixed;right:16px;bottom:16px;z-index:70;width:48px;height:48px;border-radius:50%;border:2px solid var(--gold);
  background:var(--ui-bg);color:var(--ui-fg);font-size:1.4rem;cursor:pointer}
#musicBtn.on{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Reveal */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .9s,transform .9s}
.reveal.show{opacity:1;transform:none}

/* Butterflies (sementara: muncul lalu memudar) */
#butterflies{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden;transition:opacity 1.5s}
#butterflies.fade{opacity:0}
.bf{position:absolute;bottom:-80px;animation:rise linear infinite}
.bf>div{animation:sway ease-in-out infinite alternate}
.bf svg{width:100%;height:auto;display:block;filter:drop-shadow(0 0 4px var(--glow))}
.bf .wl,.bf .wr{transform-box:view-box;transform-origin:50px 40px;animation:flap .22s ease-in-out infinite alternate}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.25)}}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-120vh)}}
@keyframes sway{from{transform:translateX(-45px) rotate(-12deg)}to{transform:translateX(45px) rotate(12deg)}}

/* Generator & rekening */
.gen-page .wrap{padding-top:2rem}
.gen-page .card{margin-top:1rem;text-align:left}
.gen-page .card h3{margin-bottom:.6rem}
.gen-page label{font-size:1rem;opacity:.9}
.gen-grid{display:grid;gap:0 .8rem;grid-template-columns:1fr 1fr}
@media (max-width:520px){.gen-grid{grid-template-columns:1fr}}
.bank-no{font-size:1.6rem;letter-spacing:.08em;color:var(--head);word-break:break-all}
.card .btn.copy{padding:.4rem 1.2rem;font-size:1rem;margin-top:.8rem}
.note{font-size:1rem;opacity:.85;margin-top:.8rem}

/* Foto & galeri */
[hidden]{display:none!important}
#cover{overflow-y:auto;justify-content:safe center}
.photo-arch{display:block;aspect-ratio:3/4;height:min(30svh,240px);object-fit:cover;border-radius:999px 999px 18px 18px;
  border:3px solid var(--gold);box-shadow:0 0 22px var(--glow);margin-bottom:1rem}
.photo-round{display:block;width:150px;height:150px;object-fit:cover;border-radius:50%;border:3px solid var(--gold);
  margin:0 auto 1rem;box-shadow:0 0 18px var(--glow)}
.gallery{display:grid;gap:.5rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--gold);cursor:zoom-in}
#lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:1rem;cursor:zoom-out}
#lightbox img{max-width:100%;max-height:100%;border-radius:8px;border:2px solid var(--gold)}

/* Admin: pratinjau foto */
.thumbs{display:flex;flex-wrap:wrap;gap:6px;margin:.4rem 0}
.thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--gold)}

/* Tombol di kartu acara */
.btns{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.8rem}
.card .btns .btn{margin-top:0;font-size:.95rem;padding:.45rem 1rem;text-decoration:none;display:inline-block}
.gb-form label{margin-top:.2rem}
#cdLabel{margin-bottom:.8rem}

/* Admin: daftar ucapan */
.gb-item .gb-del{float:right;margin-left:.6rem;padding:.2rem .9rem;font-size:.9rem}
.gen-page .gb-item p{word-break:break-word}

/* Ornamen bunga di sudut (warna mengikuti tema) */
.corner{position:absolute;width:min(34vw,170px);height:auto;color:var(--gold);pointer-events:none;opacity:.9;
  animation:petal 7s ease-in-out infinite alternate}
.corner.tl{top:var(--o,0);left:var(--o,0)}
.corner.tr{top:var(--o,0);right:var(--o,0);scale:-1 1}
.corner.bl{bottom:var(--o,0);left:var(--o,0);scale:1 -1}
.corner.br{bottom:var(--o,0);right:var(--o,0);scale:-1 -1}
#cover .corner{--o:10px}
@keyframes petal{from{rotate:-1.5deg}to{rotate:1.5deg}}
#frame{position:fixed;inset:0;z-index:0;pointer-events:none}
#frame .corner{width:min(26vw,130px);opacity:.55}
#content>section,#content>footer{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .bf,.bf>div,.bf .wl,.bf .wr,h1.gold-text,.corner{animation:none}
  .reveal{transition:none}
}

/* ===================== DESKTOP: UNDANGAN ===================== */
#topnav{display:none}
.couple::before{display:none}

@media (min-width:900px){
  body{font-size:1.25rem}
  #content .wrap{max-width:1040px;padding:5.5rem 2rem;scroll-margin-top:4rem}
  #content h2.script{font-size:3.6rem;margin-bottom:1.6rem}
  #content .hero{padding:5rem 4rem}
  #content .hero p{font-size:1.45rem}
  #content h1.script{font-size:clamp(4rem,7vw,7rem)}
  .corner{width:min(22vw,260px)}
  #cover .corner{--o:18px}
  #frame .corner{width:min(16vw,210px);opacity:.6}

  /* Menu atas */
  #topnav{display:flex;position:fixed;top:0;left:0;right:0;z-index:40;justify-content:center;gap:.4rem;padding:.7rem 1rem;
    background:color-mix(in srgb,var(--bg2) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-bottom:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
  #topnav a{color:var(--head);text-decoration:none;font-size:1.1rem;letter-spacing:.04em;padding:.35rem 1.1rem;border-radius:999px;
    border:1px solid transparent;transition:background .25s,border-color .25s}
  #topnav a:hover{background:var(--card-bg);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
  #topnav a.on{border-color:var(--gold);background:var(--card-bg)}

  /* Sampul: foto di kiri, teks di kanan */
  #cover{padding:3rem 4rem}
  #cover p{font-size:1.3rem}
  #cover h1.script{font-size:clamp(4rem,7vw,7rem)}
  #guestName{font-size:2.4rem}
  .photo-arch{height:min(34svh,300px)}
  #cover:has(#coverPhoto:not([hidden])){display:grid;grid-template-columns:minmax(240px,420px) minmax(0,560px);column-gap:5rem;
    justify-content:center;align-content:center;justify-items:start;text-align:left}
  #cover:has(#coverPhoto:not([hidden])) #coverPhoto{grid-column:1;grid-row:1/span 5;height:min(70svh,560px);justify-self:center;margin:0}
  #cover:has(#coverPhoto:not([hidden])) > :not(.corner):not(#coverPhoto){grid-column:2}

  /* Mempelai: dua kartu dengan tanda & di tengah */
  #content .couple{grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem}
  .couple::before{display:block;content:"&";grid-column:2;grid-row:1;font-family:'Great Vibes',cursive;font-size:4.5rem;color:var(--gold);line-height:1}
  .couple .card:nth-child(1){grid-column:1;grid-row:1}
  .couple .card:nth-child(2){grid-column:3;grid-row:1}
  .photo-round{width:200px;height:200px}
  #content .card{padding:2rem}
  #content .card h3{font-size:1.8rem}

  /* Acara & rekening: kartu selebar nyaman, dipusatkan */
  #events,#banks{grid-template-columns:repeat(auto-fit,minmax(320px,460px));justify-content:center;gap:1.6rem}

  /* Hitung mundur */
  #content .countdown{max-width:760px;margin:0 auto;gap:1.2rem}
  #content .countdown div{padding:1.5rem .4rem;border-radius:16px}
  #content .countdown b{font-size:3.4rem;line-height:1.1}
  #content .countdown span{font-size:1.05rem}

  /* Galeri */
  .gallery{grid-template-columns:repeat(4,1fr);gap:.8rem}
  .gallery img{transition:opacity .9s,transform .4s,box-shadow .4s}

  /* Konfirmasi kehadiran */
  .rsvp-sec .card{max-width:580px;margin:0 auto}

  /* Buku tamu: formulir kiri, daftar ucapan kanan */
  .gb-sec{display:grid;grid-template-columns:minmax(320px,.9fr) 1.1fr;gap:1.6rem 2.4rem;align-items:start}
  .gb-sec>h2{grid-column:1/-1}
  .gb-sec>.card{position:sticky;top:5rem;text-align:left}
  #gbList{max-height:36rem;overflow:auto;padding-right:.5rem}
  #gbList .gb-item:first-child{margin-top:0}
  #gbList:empty::before{content:"Belum ada ucapan.\A Jadilah yang pertama mengirim doa untuk kami.";white-space:pre-line;display:block;
    padding:2.4rem 1.6rem;border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);border-radius:16px;opacity:.8;text-align:center}
}

@media (min-width:900px) and (hover:hover){
  .card.reveal{transition:opacity .9s,transform .35s,box-shadow .35s}
  .card.reveal.show:hover{transform:translateY(-5px);box-shadow:0 12px 32px var(--shade);transition-delay:0s}
  .gallery img.show:hover{transform:scale(1.04);box-shadow:0 10px 28px var(--shade);transition-delay:0s}
  .btn:hover{box-shadow:0 8px 22px var(--shade)}
}

/* ===================== ADMIN ===================== */
.admin-head{padding:2rem 1.2rem 0;text-align:center}
.admin-shell{max-width:760px;margin:0 auto;padding:0 1.2rem 3rem}
.admin-nav,.admin-preview{display:none}
.admin-main>.card{scroll-margin-top:1.5rem}
.gen-page .card h3{display:flex;align-items:center;gap:.7rem}
.gen-page .card h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 60%,transparent),transparent)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--gold-l);outline-offset:1px}

.phone{width:100%;max-width:400px;height:min(78vh,780px);margin:0 auto;border:10px solid #15110d;border-radius:38px;overflow:hidden;
  background:#000;box-shadow:0 18px 50px var(--shade),0 0 0 2px var(--gold)}
.phone iframe{width:100%;height:100%;border:0;display:block;background:var(--bg2)}
.pv-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.pv-btns .btn{padding:.45rem 1.2rem;font-size:1rem}
.admin-preview .note{text-align:center;max-width:380px;margin:.8rem auto 0}

@media (min-width:1000px){
  .admin-shell{max-width:1500px;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:2.2rem;align-items:start;padding:1rem 2rem 4rem}
  .admin-main{width:100%;max-width:900px;justify-self:center}
  .admin-preview{display:block;position:sticky;top:1.2rem}
}
@media (min-width:1400px){
  .admin-shell{grid-template-columns:200px minmax(0,1fr) 400px}
  .admin-nav{display:flex;flex-direction:column;gap:.25rem;position:sticky;top:1.5rem}
  .admin-nav a{color:var(--text);text-decoration:none;padding:.6rem 1rem;border-left:3px solid transparent;border-radius:0 12px 12px 0;
    font-size:1.1rem;opacity:.85;transition:background .2s,border-color .2s,opacity .2s}
  .admin-nav a:hover{background:var(--card-bg);opacity:1}
  .admin-nav a.on{border-left-color:var(--gold);background:var(--card-bg);color:var(--head);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .card.reveal,.gallery img{transition:none}
}