.elementor-13769 .elementor-element.elementor-element-c995897{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-13769 .elementor-element.elementor-element-89fd8ab{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}body.elementor-page-13769{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;}/* Start custom CSS */<style>
:root{
  --bg1:#ffecd2; --bg2:#fcb69f;
  --card:#fff8fe; --txt:#2b2b2b; --accent:#ff5da2; --accent-2:#5cc9ff; --accent-3:#ffd166; --ok:#2ecc71;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:"Happy Monkey", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  min-height:100svh;
  background: radial-gradient(1200px 800px at 20% -10%, #ffe8f7 0%, #fff 60%) ,
              linear-gradient(135deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

/* Floating balloons background */
.balloons{
  position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.balloon{
  position:absolute; width:80px; aspect-ratio:3/4; border-radius:40% 40% 45% 45% / 55% 55% 45% 45%;
  opacity:.8; filter:drop-shadow(0 8px 16px rgba(0,0,0,.12));
  animation: floatUp linear infinite;
}
.balloon:after{ /* string */
  content:""; position:absolute; left:50%; top:95%; width:2px; height:80px; background:#c9c9c9; transform:translateX(-50%);
  opacity:.6;
}
@keyframes floatUp{
  from{ transform: translateY(110vh) translateX(var(--x,0)) rotate(var(--r,0deg)); }
  to{   transform: translateY(-20vh) translateX(var(--x,0)) rotate(calc(var(--r,0deg) + 40deg)); }
}

.cover-photo img {
  max-width: 220px;
  border-radius: 8%;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  margin: 20px auto;
  display: block;
}

/* Card */
.wrap{position:relative; z-index:1; display:grid; place-items:center; padding:32px}
.card{
  width:min(920px, 92vw);
      background: rgba(255, 248, 254, 0.425);
border:1px solid rgba(255, 255, 255, 0.7);
  border-radius:28px;
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  padding:clamp(18px, 3.2vw, 36px);
}

/* Modal Cover */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 236, 210, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.modal-cover {
  text-align: center;
  padding: 40px 20px;
  max-width: 600px;
  width: 90%;
}
.headline{
  display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:8px;
}
.chip{
  font-family:"Love Ya Like A Sister", cursive;
  background:#fff; border:2px dashed var(--accent); color:#ff3d8b; padding:6px 12px; border-radius:999px; font-weight:700; letter-spacing:.5px;
}
h1{
  font-family:"Love Ya Like A Sister", cursive;
  font-size:clamp(28px, 5.6vw, 56px);
  line-height:1.05; margin:6px 0 2px; text-align:center;
  color:#291a28;
}
.age{
  font-family:"Love Ya Like A Sister", cursive; font-weight:700; font-size:clamp(18px, 3.6vw, 28px);
  color:#8b5cf6; background:#f3e8ff; border:2px solid #d9c9ff; padding:4px 12px; border-radius:12px; display:inline-block; margin:8px auto 0;
}
.lead{
  text-align:center; margin:12px auto 22px; max-width:50ch; color:#5a5562; font-size:1.05rem;
}

/* Info grid */
.info{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 10px;
}
@media (max-width:720px){ .info{ grid-template-columns:1fr; } }

.tile{
  background:rgba(255, 255, 255, 0.8); 
  border:1px solid rgba(241, 233, 255, 0.7); 
  border-radius:18px; 
  padding:14px 16px;
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center;
  backdrop-filter: blur(8px);
}
.ico{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:22px; color:#fff; font-weight:900;
}
.ico.pink{ background:linear-gradient(135deg,#ff6fb0,#ff3d8b); }
.ico.blue{ background:linear-gradient(135deg,#6fd8ff,#2fb8ff); }
.ico.yellow{ background:linear-gradient(135deg,#ffd86f,#ffb62f); }
.tile h3{ font-family:"Love Ya Like A Sister", cursive; margin:0 0 3px; font-size:1.05rem; color:#27222b; }
.tile p{ margin:0; color:#5a5863; }

/* Countdown */
.countdown{
  margin:22px 0 6px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.cd{
  background:rgba(255, 255, 255, 0); 
  border:1px solid rgba(255, 225, 239, 0.7); 
  border-radius:16px; 
  min-width:25px; 
  padding:10px 12px; 
  text-align:center;
  backdrop-filter: blur(8px);
}
.cd b{ font-family:"Love Ya Like A Sister", cursive; font-size:28px; display:block; line-height:1; color:#ff3d8b }
.cd span{ font-size:.85rem; color:#6a6670 }

/* CTA row */
.cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:20px 0 8px;
}
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  padding:12px 18px; border-radius:14px; font-weight:800; letter-spacing:.3px;
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  display:inline-flex; align-items:center; gap:10px;
  font-family:"Happy Monkey", system-ui;
}
.btn:active{ transform:translateY(1px) scale(.99) }
.btn.primary{ background:linear-gradient(135deg,#ff70b5,#ff3d8b); color:#fff }
.btn.secondary{ background:linear-gradient(135deg,#6fd8ff,#2fb8ff); color:#063548 }

/* Footer note */
.note{
  margin-top:16px; text-align:center; color:#6b6771; font-size:.95rem;
}

/* Simple confetti on RSVP hover */
.confetti{ position:fixed; inset:0; pointer-events:none; z-index:2 }
.piece{
  position:absolute; width:10px; height:10px; border-radius:2px;
  animation: fall 1200ms ease-out forwards;
}
@keyframes fall{
  0%{ transform: translate(var(--x,0), var(--y,0)) rotate(0deg); opacity:1 }
  100%{ transform: translate(calc(var(--x,0) + 40px), calc(var(--y,0) + 160px)) rotate(240deg); opacity:0 }
}

/* Guest Name - New Style */
.guest-container {
  text-align: center;
  margin: 20px 0;
}
.guest-label {
  font-family: "Happy Monkey", system-ui;
  font-size: 0.9rem;
  color: #8b5cf6;
  margin-bottom: 5px;
}
.guest-name {
  font-family: "Love Ya Like A Sister", cursive;
  font-size: 1.4rem;
  color: #ff3d8b;
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  display: inline-block;
  border: 2px dashed #ffb0d6;
  backdrop-filter: blur(8px);
}

.transparent-section {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}

/* Print */
@media print{
  .balloons, .cta, .countdown{ display:none !important }
  .card{ box-shadow:none; border:none }
  body{ background:#fff }
}

/* Perbaikan untuk tampilan mobile yang lebih simetris */
@media (max-width: 720px) {
  .wrap {
    padding: 16px !important;
    width: 100%;
  }
  
  .card {
    width: 100% !important;
    margin: 0 auto;
    padding: 20px 15px !important; /* Padding yang sama kiri-kanan */
  }
  
  .headline {
    justify-content: center !important;
    text-align: center;
    margin: 0 0 16px 0;
  }
  
  .info {
    justify-items: center !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin: 20px 0 !important;
    width: 100%;
  }
  
  .tile {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    grid-template-columns: auto 1fr !important;
    padding: 16px !important;
    margin: 0 !important;
  }
  
  .tile > div:last-child {
    text-align: center !important;
    width: 100%;
  }
  
  .lead {
    text-align: center !important;
    padding: 0 5px !important;
    margin: 0 auto 20px auto !important;
    width: 100%;
  }
  
  .cta {
    justify-content: center !important;
    margin: 20px 0 !important;
    padding: 0 10px !important;
  }
  
  .footer {
    padding: 20px 10px !important;
    width: 100%;
  }
  
  /* Pastikan semua elemen memiliki box-sizing border-box */
  * {
    box-sizing: border-box !important;
  }
}
</style>/* End custom CSS */