@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Cormorant+Garamond:wght@500;600&display=swap");


*{box-sizing:border-box}

body{
 margin:0;
 height:100vh;
 background:#668FB5;
 display:flex;
 justify-content:center;
 align-items:center;
 font-family:Georgia,serif;
 overflow:hidden;
}

.cover{
 width:390px;
 height:844px;
 position:relative;
 overflow:hidden;
 isolation:isolate;
 background:url('assets/background.png') center/cover;
 color:white;
 text-align:center;
}
/* Bingkai tipis dan lembut: memberi kesan stationery premium tanpa menyaingi foto. */
.cover::before{
 content:"";position:absolute;inset:12px;border:1px solid rgba(224,190,111,.38);
 border-radius:2px;pointer-events:none;z-index:3;
 box-shadow:inset 0 0 0 3px rgba(224,190,111,.045);
}
.cover::after{
 content:"";
 position:absolute; inset:17px;
 pointer-events:none; z-index:4;
 background-repeat:no-repeat;
 background-position:top left, top right, bottom left, bottom right;
 background-size:24px 24px;
 background-image:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23e8ca83' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M3 56 C5 25 25 5 56 3 M5 38 C17 38 27 28 28 16 M17 53 C18 42 26 34 38 33 M8 25 C15 25 20 20 21 13'/%3E%3C/g%3E%3Cpath d='M11 29 C4 20 5 13 15 16 C19 22 17 27 11 29 M28 12 C20 5 22 0 31 5 C34 9 32 12 28 12 M31 38 C27 29 33 25 39 32 C39 37 36 39 31 38' fill='%23e8ca83' fill-opacity='.28'/%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg transform='translate(60 0) scale(-1 1)' fill='none' stroke='%23e8ca83' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M3 56 C5 25 25 5 56 3 M5 38 C17 38 27 28 28 16 M17 53 C18 42 26 34 38 33 M8 25 C15 25 20 20 21 13'/%3E%3C/g%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3Cg transform='translate(0 60) scale(1 -1)' fill='none' stroke='%23e8ca83' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M3 56 C5 25 25 5 56 3 M5 38 C17 38 27 28 28 16 M17 53 C18 42 26 34 38 33 M8 25 C15 25 20 20 21 13'/%3E%3C/g%3E%3C/svg%3E"),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg transform='translate(60 60) scale(-1 -1)' fill='none' stroke='%23e8ca83' stroke-width='1.15' stroke-linecap='round'%3E%3Cpath d='M3 56 C5 25 25 5 56 3 M5 38 C17 38 27 28 28 16 M17 53 C18 42 26 34 38 33 M8 25 C15 25 20 20 21 13'/%3E%3C/g%3E%3C/svg%3E");
}

.top{
 padding-top:55px;
}

.title{
 font-size:15px;
 letter-spacing:4.2px;
 font-family:'Cormorant Garamond',serif;
 text-transform:uppercase;
 color:#f2e5c6;
}

.names{
 margin-top:22px;
 font-size:68px;
 line-height:.90;
 font-family:'Alex Brush','Great Vibes',cursive;
 font-style:normal;
 font-weight:400;
 color:#fff8e8;
 text-shadow:0 1px 1px rgba(0,0,0,.16),0 0 14px rgba(224,190,111,.12);
}

.date{
 margin-top:22px;
 font-size:15px;
 font-family:'Cormorant Garamond',serif;
 letter-spacing:2.4px;
 color:#f1dfb5;
}
.date::after{content:"";display:block;width:30px;height:1px;background:rgba(224,190,111,.72);margin:10px auto 0;}

/* FRAME EMAS DI TENGAH - HANYA EDIT FRAME */
.photo-box{
 position:absolute;
 top:220px;
 left:50%;
 transform:translateX(-50%);
 width:315px;
 height:524px;
}

.frame{
 position:absolute;
 width:315px;
 height:auto;
 left:0;
 top:-12px;
 object-fit:contain;
 z-index:2;
}

.photo{
 position:absolute;
 /* V10: perluas bukaan foto sedikit ke atas dengan tepi bawah tetap; elemen lain tidak diubah. */
 top:152px;
 left:51px;
 width:212px;
 height:212px;
 border-radius:50%;
 display:flex;
 justify-content:center;
 align-items:center;
 color:white;
 background:rgba(0,0,0,.08);
 z-index:1;
}

.guest{
 position:absolute;
 top:646px;
 bottom:auto;
 width:100%;
 z-index:5;
}

.guest div{font-size:12px;letter-spacing:1.1px;color:#eadbb9}
.guest h2{
 margin:7px 8px;
 font-size:22px;
 font-weight:600;
 letter-spacing:.15px;
}

.button{
 position:absolute;
 bottom:57px;
 left:50%;
 transform:translateX(-50%);
 background:linear-gradient(135deg,#e4c477 0%,#c18a2e 100%);
 border:1px solid rgba(255,232,173,.72);
 padding:10px 34px;
 border-radius:30px;
 font-size:13px;
 letter-spacing:.2px;
 white-space:nowrap;
 box-shadow:0 4px 14px rgba(0,0,0,.14),inset 0 1px rgba(255,255,255,.28);
 color:#fff8e9;
}



.photo{overflow:hidden;background-position:center;background-size:cover;}


/* PHOTO FIX V3.6 */
.photo{overflow:hidden;background-position:center;background-size:cover;}
.photo img{display:none;width:100%;height:100%;object-fit:cover;object-position:center 35%;border-radius:inherit;position:absolute;inset:0;}
.photo img.show{display:block;}
.photo span{display:flex;width:100%;height:100%;align-items:center;justify-content:center;}

/* V100 — deterministic Cover layout: the 390×844 canvas is identical in the
   standalone page and the editor iframe. Guest block is anchored by canvas
   coordinates rather than remaining space so desktop viewport differences
   cannot move it over the gold frame. */
.cover{
  width:390px!important;
  min-width:390px!important;
  max-width:390px!important;
  height:844px!important;
  min-height:844px!important;
  max-height:844px!important;
}
.cover .photo-box{z-index:1;}
.cover .guest{top:646px!important;bottom:auto!important;z-index:8!important;}
.cover .button{z-index:6;}
@media(max-width:390px){
  .cover{width:100%!important;min-width:0!important;max-width:390px!important;}
}

/* V101 — COVER GUEST LABEL POLISH
   Keep the recipient label visible below the gold frame on every standalone
   390px cover, matching the editor preview. */
.cover .guest{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff8e9!important;
  text-align:center!important;
}
.cover .guest div{
  display:block!important;
  color:#eadbb9!important;
  line-height:1.15!important;
}
.cover .guest h2{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:#fff8e9!important;
  line-height:1.1!important;
  margin:4px 8px 0!important;
  position:relative!important;
}

/* V102 — FINAL COVER BASELINE
   The Editor preview uses a 390x844 canvas. Keep the public index on the
   same canvas even when opened on a desktop browser. Never use 100vh for
   internal Cover geometry, because browser chrome/viewport height differs
   between standalone and iframe previews. */
.cover.invitation-section{
  width:390px!important;
  height:844px!important;
  min-height:844px!important;
  max-height:844px!important;
}
.cover .guest{
  top:638px!important;
  bottom:auto!important;
  width:100%!important;
  text-align:center!important;
  z-index:8!important;
}
.cover .guest div{
  line-height:1.15!important;
}
.cover .guest h2{
  margin:5px 8px 0!important;
  line-height:1.08!important;
}
.cover .button{
  top:704px!important;
  bottom:auto!important;
  z-index:9!important;
}


/* V148 — reference-inspired powder-blue and blush cover polish */
body{background:#9ebfdd!important;}
.cover{
  background-color:#b7d3ec!important;
  background-image:
    radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.08),transparent 62%),
    url('assets/background.png')!important;
  background-position:center,center!important;
  background-size:cover,cover!important;
  color:#365771!important;
}
.cover::before{
  inset:13px!important;
  border:1.5px solid rgba(197,151,75,.88)!important;
  box-shadow:inset 0 0 0 3px rgba(255,248,239,.48),0 0 0 1px rgba(255,255,255,.20)!important;
}
.cover::after{
  inset:18px!important;
  background-size:43px 43px!important;
  opacity:.98!important;
}
.cover .title{
  color:#3e5e79!important;
  text-shadow:0 1px 0 rgba(255,255,255,.45)!important;
}
.cover .names{
  color:#fff8ec!important;
  text-shadow:0 2px 2px rgba(46,75,101,.42),0 0 2px rgba(255,255,255,.7)!important;
}
.cover .date{
  color:#3e5e79!important;
  text-shadow:0 1px 0 rgba(255,255,255,.42)!important;
}
.cover .date::after{background:#c99c5c!important;width:44px!important;height:1.5px!important;}
.cover .cover-notice{
  color:#355570!important;
  text-shadow:0 1px 0 rgba(255,255,255,.48)!important;
  font-weight:600!important;
  background:rgba(247,251,255,.18)!important;
  border-color:rgba(197,151,75,.72)!important;
  box-shadow:none!important;
}
.cover .cover-notice::before,.cover .cover-notice::after{
  color:#c28b9b!important;
  text-shadow:none!important;
}
.cover .guest div{color:#a97743!important;text-shadow:0 1px 0 rgba(255,255,255,.48)!important;}
.cover .guest h2{color:#355570!important;text-shadow:0 1px 0 rgba(255,255,255,.50)!important;}
.cover .button{
  background:linear-gradient(135deg,#e9bdc8 0%,#ca8f9f 100%)!important;
  border:1.5px solid #fff1e7!important;
  box-shadow:0 3px 8px rgba(54,77,99,.18),inset 0 1px rgba(255,255,255,.58)!important;
  color:#fffaf5!important;
}
/* Delicate blush botanical corner flourishes, integrated with the gold frame. */
.cover .cover-corner-flower{position:absolute;z-index:5;pointer-events:none;width:76px;height:76px;object-fit:contain;opacity:.94;filter:drop-shadow(0 1px 1px rgba(255,255,255,.28));}
.cover .cover-corner-flower.top-left{left:-3px;top:-3px;width:112px;height:150px;object-fit:contain;transform:none;opacity:1;filter:drop-shadow(0 1px 2px rgba(54,77,99,.12));}
.cover .cover-corner-flower.bottom-right{right:-3px;bottom:-3px;width:140px;height:180px;object-fit:contain;transform:none;opacity:1;filter:drop-shadow(0 1px 2px rgba(54,77,99,.10));}
@media(max-width:390px){
 .cover .cover-corner-flower{width:64px;height:64px}
 .cover .cover-corner-flower.top-left{left:-2px;top:-2px;width:96px;height:128px}
 .cover .cover-corner-flower.bottom-right{right:-2px;bottom:-2px;width:112px;height:145px}
}


/* V155 — Raise and symmetrize the guest greeting; stronger dusty-rose Dear label. */
.cover .guest{top:622px!important;bottom:auto!important;text-align:center!important;}
.cover .guest div{color:#B85F7A!important;font-size:13px!important;letter-spacing:1.15px!important;text-shadow:0 1px 0 rgba(255,255,255,.55)!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;line-height:1.2!important;}
.cover .guest div::before,.cover .guest div::after{content:"";display:block;width:42px;height:1px;background:linear-gradient(90deg,transparent,#C7A46A);flex:0 0 42px;}
.cover .guest div::after{background:linear-gradient(90deg,#C7A46A,transparent);}
.cover .guest h2{margin:5px 8px 0!important;color:#456782!important;text-align:center!important;}
.cover .button{top:686px!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;}
@media(max-width:390px){.cover .guest{top:622px!important}.cover .button{top:686px!important}}

/* V156 — Lift the guest greeting and CTA for balanced spacing below the gold portrait frame. */
.cover .guest{top:600px!important;bottom:auto!important;text-align:center!important;}
.cover .guest div{color:#B85F7A!important;}
.cover .guest h2{margin:4px 8px 0!important;}
.cover .button{top:662px!important;bottom:auto!important;left:50%!important;transform:translateX(-50%)!important;}
@media(max-width:390px){.cover .guest{top:600px!important}.cover .button{top:662px!important}}


/* V161 — ornate circular frame and precisely centered photo crop */
.cover .photo-box{width:315px;height:524px;}
.cover .frame{left:0;top:-12px;width:315px;height:auto;object-fit:contain;}
.cover .photo{top:152px!important;left:51px!important;width:212px!important;height:212px!important;border-radius:50%!important;overflow:hidden!important;background:rgba(142,174,199,.16)!important;z-index:1!important;}
.cover .photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;border-radius:50%;}


/* V163 — slightly larger circular frame, centered photo crop, and pink ornaments preserved. */
.cover .photo-box{width:370px!important;height:610px!important;left:50%!important;transform:translateX(-50%)!important;}
.cover .frame{width:370px!important;height:auto!important;left:0!important;top:-20px!important;object-fit:contain!important;}
.cover .photo{top:145px!important;left:60px!important;width:250px!important;height:250px!important;border-radius:50%!important;overflow:hidden!important;}
.cover .photo img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 35%!important;border-radius:50%!important;}
/* Remove gold rules/border near the pink notice dividers, leaving pink ornaments as the only separators. */
.cover .date::after{display:none!important;content:none!important;}
.cover .cover-notice{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;}
.cover .cover-notice::before,.cover .cover-notice::after{border:0!important;box-shadow:none!important;}
@media(max-width:390px){
  .cover .photo-box{width:370px!important;height:610px!important;}
  .cover .frame{width:370px!important;}
  .cover .photo{left:60px!important;width:250px!important;height:250px!important;}
}

/* V164: circle frame enlarged slightly; photo opening shares exact center axis. */
@media(max-width:390px){
  .cover .photo-box{width:380px!important;height:620px!important;left:50%!important;transform:translateX(-50%)!important;}
  .cover .frame{width:380px!important;left:0!important;top:-12px!important;}
  .cover .photo{left:60px!important;top:160px!important;width:260px!important;height:260px!important;}
}
/* Remove the two small pink symbols immediately above the circular frame, but keep the pink divider ornaments elsewhere. */
.cover .cover-notice::before,.cover .cover-notice::after{content:none!important;display:none!important;}

/* V167: do not suppress the pink ornaments above and below the cover notice. */
.cover .cover-notice::before,.cover .cover-notice::after{content:initial!important;display:initial!important;}


/* V168 — pastel blue/blush fallback styling for the standalone invitation pages. */
.mempelai-page{background-color:#A9CBE7!important;background-image:linear-gradient(180deg,rgba(169,203,231,.10),rgba(169,203,231,.05)),url('assets/background.png')!important;color:#456782!important;}
.mempelai-page .lace-frame{filter:saturate(.78) contrast(.98) drop-shadow(0 2px 3px rgba(69,103,130,.06))!important;}
.mempelai-content{color:#456782!important;}
.mempelai-content .bismillah,.mempelai-content .intro,.mempelai-content .parent-line{color:#456782!important;}
.mempelai-content .person-name{color:#7C5367!important;text-shadow:0 1px 0 rgba(255,255,255,.5)!important;}
.mempelai-content .and{color:#B85F7A!important;}
.mempelai-page .bottom-caption,.mempelai-page .back-link{color:#456782!important;text-shadow:0 1px 0 rgba(255,255,255,.45)!important;}