:root{
    --sage:#7d8f7b; --sage-dark:#5c6e5a; --cream:#faf7f2; --cream2:#f3eee4;
    --gold:#bfa15f; --ink:#3d3a34; --muted:#8a867c;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Poppins',sans-serif;background:var(--cream);color:var(--ink);overflow-x:hidden}
  .serif{font-family:'Playfair Display',serif}

  /* ===== COVER ===== */
  #cover{position:fixed;inset:0;z-index:50;background:linear-gradient(160deg,#6d7f6b 0%,#5c6e5a 55%,#4c5c4a 100%);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    color:#f6f3ec;padding:24px;transition:transform 1s ease,opacity 1s ease}
  #cover.open{transform:translateY(-100%);opacity:0;pointer-events:none}
  #cover .orn{font-size:30px;letter-spacing:8px;color:var(--gold)}
  #cover h1{font-size:44px;margin:14px 0 4px;font-weight:600}
  #cover h1 span{font-style:italic}
  #cover .kepada{margin-top:26px;font-size:13px;opacity:.85}
  #cover .nama-tamu{font-size:20px;font-family:'Playfair Display',serif;font-style:italic;margin-top:4px}
  #btn-open{margin-top:30px;background:var(--gold);border:none;color:#fff;font-family:'Poppins',sans-serif;
    font-size:14px;letter-spacing:2px;padding:13px 34px;border-radius:999px;cursor:pointer;
    box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .3s}
  #btn-open:hover{transform:scale(1.05)}

  /* ===== LAYOUT ===== */
  section{padding:64px 20px;max-width:640px;margin:0 auto;text-align:center}
  .label{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
  h2{font-size:30px;color:var(--sage-dark);margin-bottom:14px}
  .lead{font-size:14px;line-height:1.9;color:var(--muted)}
  .divider{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px auto 20px;color:var(--gold)}
  .divider::before,.divider::after{content:"";height:1px;width:56px;background:linear-gradient(90deg,transparent,var(--gold))}
  .divider::after{background:linear-gradient(90deg,var(--gold),transparent)}

  /* ===== HERO ===== */
  #hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;
    background:linear-gradient(180deg,#eef0e8 0%,var(--cream) 100%);padding-top:90px}
  #hero .bunga{font-size:26px;color:var(--sage);letter-spacing:6px}
  #hero .kicker{font-size:12px;letter-spacing:5px;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
  #hero h1{font-size:42px;color:var(--sage-dark);line-height:1.25}
  #hero h1 em{font-size:22px;display:block;color:var(--gold);margin:6px 0}
  #hero .tanggal-hero{margin-top:18px;font-size:15px;color:var(--ink);letter-spacing:2px}
  #countdown-hero{display:flex;gap:10px;justify-content:center;margin-top:22px}
  #countdown-hero div{background:#fff;border:1px solid #e7e2d5;border-radius:12px;min-width:62px;padding:10px 6px;
    box-shadow:0 4px 14px rgba(93,110,90,.08)}
  #countdown-hero b{display:block;font-size:20px;color:var(--sage-dark);font-family:'Playfair Display',serif}
  #countdown-hero small{font-size:10px;color:var(--muted);letter-spacing:1px}

  /* ===== COUPLE ===== */
  .couple-grid{display:flex;flex-direction:column;gap:26px;margin-top:26px}
  .avatar{width:120px;height:120px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
    font-family:'Playfair Display',serif;font-size:40px;color:#fff;
    background:radial-gradient(circle at 30% 30%,#8fa089,var(--sage-dark));box-shadow:0 10px 30px rgba(93,110,90,.25)}
  .couple-name{font-size:24px;color:var(--sage-dark)}
  .amp{font-family:'Playfair Display',serif;font-size:44px;color:var(--gold)}

  /* ===== ACARA ===== */
  .card{background:#fff;border:1px solid #e9e4d8;border-radius:18px;padding:28px 22px;margin-bottom:18px;
    box-shadow:0 6px 24px rgba(93,110,90,.07)}
  .card .icon{font-size:30px}
  .card h3{font-family:'Playfair Display',serif;font-size:22px;color:var(--sage-dark);margin:8px 0 4px}
  .card .tanggal{font-size:13px;letter-spacing:2px;color:var(--gold);font-weight:500}
  .card p{font-size:13.5px;color:var(--muted);line-height:1.8;margin-top:8px}
  .btn{display:inline-block;margin-top:14px;background:var(--sage-dark);color:#fff;text-decoration:none;
    font-size:13px;padding:11px 26px;border-radius:999px;letter-spacing:1px;transition:transform .3s;border:none;cursor:pointer}
  .btn:hover{transform:scale(1.04)}
  .btn.gold{background:var(--gold)}

  /* ===== STORY ===== */
  .timeline{margin-top:24px;text-align:left;position:relative;padding-left:26px}
  .timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:#ddd6c4}
  .t-item{position:relative;margin-bottom:26px}
  .t-item::before{content:"";position:absolute;left:-24px;top:6px;width:9px;height:9px;border-radius:50%;
    background:var(--gold);box-shadow:0 0 0 4px #f4ecd9}
  .t-item b{font-family:'Playfair Display',serif;color:var(--sage-dark);font-size:16px}
  .t-item p{font-size:13px;color:var(--muted);line-height:1.8;margin-top:3px}

  /* ===== GALLERY ===== */
  .gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
  .ph{border-radius:14px;aspect-ratio:4/5;display:flex;align-items:flex-end;padding:12px;
    color:#fff;font-size:12px;letter-spacing:1px;background-size:cover;background-position:center;
    box-shadow:0 8px 20px rgba(93,110,90,.15)}
  .ph.wide{grid-column:1/-1;aspect-ratio:16/8}
  .ph1{background:linear-gradient(140deg,#9caf97,#5c6e5a)}
  .ph2{background:linear-gradient(140deg,#d9c89a,#bfa15f)}
  .ph3{background:linear-gradient(140deg,#c9d2c2,#7d8f7b)}
  .ph4{background:linear-gradient(140deg,#b7a98c,#8a7a58)}

  /* ===== WISHES ===== */
  #wishes form{display:flex;flex-direction:column;gap:10px;margin-top:22px;text-align:left}
  #wishes input,#wishes textarea{width:100%;border:1px solid #e2dcc9;border-radius:12px;padding:12px 14px;
    font-family:'Poppins',sans-serif;font-size:13.5px;background:#fff;color:var(--ink);outline:none}
  #wishes input:focus,#wishes textarea:focus{border-color:var(--sage)}
  #wishes textarea{resize:vertical;min-height:80px}
  .wish-list{margin-top:22px;text-align:left;display:flex;flex-direction:column;gap:10px}
  .wish{background:#fff;border:1px solid #ece7da;border-radius:12px;padding:12px 14px}
  .wish b{font-size:13px;color:var(--sage-dark)}
  .wish p{font-size:12.5px;color:var(--muted);line-height:1.7;margin-top:3px}

  /* ===== GIFT ===== */
  .rekening{background:#fff;border:1px dashed var(--gold);border-radius:14px;padding:18px;margin-top:16px}
  .rekening b{font-family:'Playfair Display',serif;font-size:18px;color:var(--sage-dark);letter-spacing:1px}
  .rekening p{font-size:12.5px;color:var(--muted);margin-top:4px}
  #btn-salin{margin-top:10px;border:1px solid var(--sage-dark);background:#fff;color:var(--sage-dark);
    padding:8px 22px;border-radius:999px;font-size:12px;cursor:pointer}
  #btn-salin.ok{background:var(--sage-dark);color:#fff}

  /* ===== FOOTER ===== */
  footer{background:linear-gradient(180deg,var(--cream2),#e8e3d2);padding:44px 20px;text-align:center;margin-top:20px}
  footer .serif{font-size:22px;color:var(--sage-dark)}
  footer small{display:block;margin-top:10px;font-size:11px;color:var(--muted);line-height:1.8}

  /* reveal animation */
  .rv{opacity:0;transform:translateY(26px);transition:all .9s ease}
  .rv.show{opacity:1;transform:none}

  @media(min-width:560px){
    #hero h1{font-size:52px}
    .gallery{grid-template-columns:repeat(3,1fr)}
    .ph.wide{grid-column:span 3}
  }