:root{
    --moss:#4b5c43;
    --moss-deep:#33402d;
    --sand:#f3efe4;
    --sand-deep:#e9e1cd;
    --clay:#a9714f;
    --ink:#2c2a24;
    --paper:#faf8f2;
    --line:#c9c0a6;
    font-size: 16px;
  }
  :root:not([data-theme="light"]){
    --bg: var(--paper);
    --fg: var(--ink);
    --panel: var(--sand);
    --panel-deep: var(--sand-deep);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#20241d;
      --fg:#efe9d8;
      --panel:#2a2f23;
      --panel-deep:#333a29;
      --line:#4a5240;
    }
  }
  :root[data-theme="dark"]{
    --bg:#20241d;
    --fg:#efe9d8;
    --panel:#2a2f23;
    --panel-deep:#333a29;
    --line:#4a5240;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
  body{
    background:var(--bg);
    color:var(--fg);
    font-family:'Jost', sans-serif;
    font-weight:300;
    line-height:1.65;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3, .serif{ font-family:'Cormorant Garamond', serif; font-weight:500; }
  img{max-width:100%; display:block;}
  a{color:inherit;}
  .wrap{max-width:640px; margin:0 auto; padding:0 28px;}
  section{padding:88px 0;}
  .rule{width:1px; height:56px; background:var(--line); margin:0 auto;}
  .eyebrow{ font-size:.78rem; letter-spacing:.14em; color:var(--clay); }

  /* ---------- COVER (gate) ---------- */
  #cover{
    position:fixed; inset:0; z-index:50;
    background:var(--moss-deep);
    color:#f3efe4;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; padding:32px;
    transition:opacity .8s ease, visibility .8s ease;
  }
  #cover.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  #cover .frame{
    border:1px solid rgba(243,239,228,.35);
    padding:44px 30px; max-width:380px; width:100%;
  }
  #cover .kecil{font-size:.72rem; letter-spacing:.22em; opacity:.75;}
  #cover h1{font-size:2.5rem; margin:18px 0 6px; line-height:1.15;}
  #cover .amp{ font-style:italic; color:#d7c9a3; font-size:1.6rem; display:block; margin:4px 0;}
  #cover .undangan-untuk{ margin-top:26px; font-size:.85rem; opacity:.8;}
  #guestName{ font-family:'Cormorant Garamond', serif; font-size:1.3rem; margin-top:4px; min-height:1.6em; }
  #openBtn{
    margin-top:30px; background:transparent; border:1px solid #d7c9a3; color:#f3efe4;
    padding:13px 34px; font-family:'Jost',sans-serif; font-size:.82rem; letter-spacing:.08em;
    cursor:pointer; transition:background .3s ease, color .3s ease;
  }
  #openBtn:hover{ background:#d7c9a3; color:var(--moss-deep); }
  #openBtn:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

  /* ---------- HERO ---------- */
  #hero{
    min-height:100svh; position:relative; display:flex; align-items:flex-end;
    padding:0 0 56px;
  }
  #hero .photo{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover; object-position:center 22%;
  }
  #hero .shade{
    position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(32,36,29,.05) 0%, rgba(32,36,29,.15) 45%, rgba(32,36,29,.88) 100%);
  }
  #hero .content{ position:relative; z-index:2; color:#f6f3e9; text-align:center; width:100%; padding:0 24px; }
  #hero .eyebrow{ color:#d7c9a3; }
  #hero h1{ font-size:clamp(2.4rem, 9vw, 3.4rem); line-height:1.08; margin:10px 0; }
  #hero .date{ font-size:.95rem; letter-spacing:.1em; color:#e7e0cb; margin-top:8px; }

  /* ---------- SECTION HEADERS ---------- */
  .sec-head{ text-align:center; margin-bottom:44px; }
  .sec-head h2{ font-size:2.1rem; margin-top:8px; }

  /* ---------- MEMPELAI ---------- */
  #mempelai .pair{ text-align:center; }
  #mempelai .who{ padding:26px 0; }
  #mempelai .who h3{ font-size:1.9rem; }
  #mempelai .who p{ font-size:.88rem; color:var(--clay); margin-top:4px; letter-spacing:.03em;}
  #mempelai .divider{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.5rem; color:var(--clay); }

  /* ---------- ACARA ---------- */
  #kepada{ background:var(--panel); }
#acara{ background:var(--panel); }
  .event-card{
    border:1px solid var(--line); padding:34px 26px; text-align:center; background:var(--bg);
  }
  .event-card + .event-card{ margin-top:22px; }
  .event-card h3{ font-size:1.5rem; }
  .event-card .time{ font-size:1.15rem; margin-top:10px; letter-spacing:.02em; }
  .event-card .place{ margin-top:12px; font-size:.92rem; opacity:.85; }
  .event-card .map-link{
    display:inline-block; margin-top:18px; font-size:.78rem; letter-spacing:.08em;
    border-bottom:1px solid var(--clay); color:var(--clay); padding-bottom:2px;
  }

  /* ---------- COUNTDOWN ---------- */
  #countdown-wrap{ text-align:center; }
  #countdown{
    display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:8px;
  }
  #countdown .unit{ min-width:64px; }
  #countdown .num{ font-family:'Cormorant Garamond',serif; font-size:2.1rem; color:var(--moss); }
  #countdown .lbl{ font-size:.68rem; letter-spacing:.1em; opacity:.7; margin-top:2px; }

  /* ---------- GALERI ---------- */
  #galeri{ background:var(--panel); }
  .gal-grid{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
  }
  .gal-slot{
    aspect-ratio:3/4; width:100%; height:100%;
    background:var(--panel-deep); border:1px dashed var(--line);
    object-fit:cover; color:var(--clay);
  }
  .gal-note{ text-align:center; font-size:.78rem; opacity:.65; margin-top:18px; }

  /* ---------- AMPLOP DIGITAL ---------- */
  .amplop-card{
    border:1px solid var(--line); padding:30px 24px; text-align:center; background:var(--panel);
  }
  .amplop-card + .amplop-card{ margin-top:22px; }
  .qr-box{
    width:180px; height:180px; margin:18px auto 0; background:var(--bg);
    border:1px dashed var(--line); object-fit:contain; display:block;
  }
  .bank-row{
    margin-top:16px; font-size:.95rem; display:flex; flex-direction:column; gap:4px;
  }
  .bank-row .norek{ font-family:'Cormorant Garamond',serif; font-size:1.4rem; letter-spacing:.04em; }
  .copy-btn{
    margin-top:14px; background:transparent; border:1px solid var(--clay); color:var(--clay);
    padding:8px 20px; font-family:'Jost',sans-serif; font-size:.72rem; letter-spacing:.08em; cursor:pointer;
  }
  .copy-btn:hover{ background:var(--clay); color:var(--paper); }

  /* ---------- RSVP ---------- */
  #rsvp{ background:var(--panel); }
  form{ display:flex; flex-direction:column; gap:14px; max-width:420px; margin:0 auto; }
  form label{ font-size:.74rem; letter-spacing:.06em; opacity:.75; }
  form input, form select, form textarea{
    width:100%; background:var(--bg); border:1px solid var(--line); color:var(--fg);
    padding:11px 12px; font-family:'Jost',sans-serif; font-size:.92rem; border-radius:0;
  }
  form textarea{ min-height:80px; resize:vertical; }
  #rsvpBtn{
    margin-top:6px; background:var(--moss); color:#f6f3e9; border:none;
    padding:13px; font-family:'Jost',sans-serif; font-size:.85rem; letter-spacing:.08em; cursor:pointer;
  }
  #rsvpBtn:hover{ background:var(--moss-deep); }
  #rsvpMsg{ text-align:center; font-size:.82rem; margin-top:10px; min-height:1.2em; color:var(--clay); }

  /* ---------- FOOTER ---------- */
  footer{ text-align:center; padding:56px 24px 64px; }
  footer .amp{ font-family:'Cormorant Garamond', serif; font-style:italic; font-size:1.8rem; color:var(--clay); }
  footer p{ font-size:.78rem; opacity:.6; margin-top:10px; }

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; scroll-behavior:auto !important; }
  }