/* PUJI SYUKUR */
    .puji{background:linear-gradient(180deg,#d6bfa8 0%, #fdfcfb 100%);color:#2c2a29;position:relative;overflow:hidden}
    .puji .content{padding:30px;position:relative;z-index:1}
    .lead{font-size:18px;color:var(--ink)}
    .ornament{position:absolute;left:50%;transform:translateX(-50%);opacity:.25;z-index:0}
    .ornament.top{top:-6px;width:min(340px,60vw)}
    .ornament.bottom{bottom:-6px;width:min(340px,60vw);transform:translateX(-50%) rotate(180deg)}



    /* INFO PASANGAN (di dalam section Puji Syukur) */
    .couple{margin-top:16px}
    .couple-grid{display:grid;gap:16px}

    .person{background:var(--card);border:1px solid var(--ring);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
    .person-name{ font-family:"Playfair Display",serif; font-weight:700; font-size:clamp(22px,2.6vw,28px); letter-spacing:.3px; color:var(--brand); line-height:1.25; position:relative; padding-bottom:8px; }
    .person-name::after{ content:""; display:block; width:48px; height:3px; background:var(--accent); border-radius:999px; margin-top:8px; }
    .person .note{color:var(--muted);font-weight:600;margin-top:10px}
    .person .parents{margin-top:6px;line-height:1.8;font-weight:500;color:var(--ink)}


    /* FOTO */
    .foto{background:#fff;position:relative;overflow:hidden}
    .foto .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;position:relative;z-index:1}

    .foto .grid img{aspect-ratio:3/4;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:3px solid var(--brand-2);background:#fff;width:100%;height:100%;object-fit:cover;transition:transform .5s ease, box-shadow .3s ease;cursor:zoom-in}
    .foto .grid img:hover{transform:scale(1.02);box-shadow:0 16px 40px rgba(0,0,0,.18)}

    .ornament.side{position:absolute;top:50%;transform:translateY(-50%);opacity:.18;width:min(200px,26vw);z-index:0}
    .ornament.left{left:-10px}
    .ornament.right{right:-10px;transform:translateY(-50%) scaleX(-1)}

    /* ===== FOTO DI KARTU COUPLE ===== */
    .person{ display:grid; grid-template-columns:64px 1fr; align-items:center; gap:14px; }
    .person-photo{ width:64px;height:64px;border-radius:14px;overflow:hidden; border:2px solid var(--brand-2);background:#fff;box-shadow:var(--shadow) }
    .person-photo img{width:100%;height:100%;object-fit:cover;display:block}

     /* Variasi tema lebih lembut untuk section puji */
    .puji--deluxe{ background: radial-gradient(1800px 700px at 50% -10%, rgba(255,255,255,.65), transparent 60%), linear-gradient(180deg, var(--brand-2) 0%, #f7efe6 35%, var(--bg) 100%); position: relative; overflow: hidden; }
    .puji--deluxe::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(600px 200px at 10% 10%, rgba(75,95,167,.08), transparent 60%), radial-gradient(600px 200px at 90% 0%, rgba(107,79,63,.10), transparent 60%); }
    .puji-head{ text-align:center; max-width:820px; margin:0 auto 28px; display:grid; gap:12px; justify-items:center; }
    .chip--soft{ background: rgba(214,191,168,.65); color:#fff; box-shadow: var(--shadow); width: fit-content;}

    /* Grid pasangan dengan kartu mewah */
    .couple--deluxe{ position:relative; }
    .couple--deluxe .couple-grid{ display:grid; gap:22px; align-items:stretch; grid-template-columns: 1fr; }

    .person--deluxe{ display:grid; grid-template-columns: 1fr; gap:18px; align-items:center; justify-items:center; padding:22px; border-radius: calc(var(--radius) + 6px); background: linear-gradient(180deg, #fff, #fcfaf7); border:1px solid var(--ring); box-shadow: var(--shadow); }

    .person-figure{ position:relative; }
    .ring-badge{ position:absolute; top:-8px; left:-8px; font-size:18px; background:#fff; border:1px solid var(--ring); border-radius:999px; padding:4px 6px; box-shadow:var(--shadow); }


    .avatar{ width:120px; height:140px; border-radius:18px; overflow:hidden; border:3px solid var(--brand-2); background:#fff; box-shadow:0 14px 40px rgba(0,0,0,.18); }
    .avatar img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .5s ease; }

    .person-body{ display:grid; gap:8px; }
    .person-name{ margin:0; display:grid; align-items:baseline; gap:12px; flex-wrap:wrap; }
    .person-name .script{ font-family:'Great Vibes', cursive; font-size:clamp(36px,5vw,42px); color:var(--brand); line-height:1; letter-spacing:.3px; }
    .person-name .caption{ width: fit-content; font: 600 12px/1 Montserrat, Arial, sans-serif; letter-spacing:.5px; text-transform:uppercase; color:var(--muted); background:rgba(214,191,168,.18); border:1px solid var(--ring); border-radius:999px; padding:6px 10px; }


    .person-divider{ height:3px; width:64px; border-radius:999px; background:linear-gradient(90deg, var(--accent), transparent); opacity:.85; }
    .parents{ margin:0; color:var(--ink); font-weight:600; }
    .parents strong{ color:#2f2b28; font-weight:700; }


    /* Monogram tengah sebagai pemanis */
    .monogram{
    margin:26px auto 0; display:flex; align-items:center; justify-content:center; gap:10px;
    color:var(--brand); opacity:.9; filter: drop-shadow(0 10px 24px rgba(0,0,0,.08)); }
    .monogram .mono{ font-family:'Playfair Display', serif; font-weight:700; font-size:clamp(28px,4vw,40px); }
    .monogram .amp{ font-family:'Great Vibes', cursive; font-size:clamp(34px,5vw,52px); color:var(--accent); transform: translateY(-2px); }


    /* Animasi halus saat muncul */
    .reveal{ opacity:0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
    .reveal.show{ opacity:1; transform:none; }

    /* JADWAL */
    .jadwal{background:linear-gradient(180deg,#fdfcfb, #fff);position:relative}
    .jadwal .wrap{display:grid;gap:16px}
    .jadwal .item{display:flex;gap:14px;align-items:flex-start;padding:22px;border-radius:var(--radius);border:1px solid var(--ring);background:var(--card);box-shadow:var(--shadow)}
    .jadwal .when{font-weight:700;letter-spacing:.3px}
    .jadwal .badge{display:inline-flex;align-items:center;gap:8px;font-weight:700;background:var(--brand-2);color:#fff;border-radius:999px;padding:6px 12px}
    .jadwal .meta{color:var(--muted);font-size:14px;margin-top:6px}


    /* LOKASI */
    .lokasi{background:var(--brand);color:#fff}
    .lokasi .card{padding:26px;background:rgba(255,255,255,.9);color:var(--ink)}
    .address{line-height:1.9;font-weight:500}
    .map{width:100%;aspect-ratio:16/9;border:0;border-radius:16px;box-shadow:var(--shadow)}
    .amplop{background:linear-gradient(180deg,#fff,#f7f4f0);position:relative}
    .amplop-head{ text-align:center; max-width:820px; margin:0 auto 22px; display:grid; gap:10px; }
    .amp-tabs{ display:flex; gap:10px; justify-content:center; margin:14px 0 18px; flex-wrap:wrap }
    .amp-tab{ border:1px solid var(--ring); background:#fff; color:var(--ink); border-radius:999px; padding:10px 16px; font-weight:700; letter-spacing:.3px; cursor:pointer }
    .amp-tab.is-active{ background:var(--brand-2); color:#fff }
    .map-wrapper { position: relative; padding-bottom: 56.25%; /* aspect ratio 16:9 */ height: 0; overflow: hidden; border-radius: 12px; /* opsional biar cantik */ }
    .map-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

    /* Amplop */
    .amp-panel{ margin-top:8px }
    .amp-grid{ display:grid; gap:16px }
    .amp-card{ padding:18px; display:grid; gap:12px }
    .amp-card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px }
    .amp-card-body{display:grid; gap:13px; justify-items:center;}
    .bankbrand{ display:flex; align-items:center; gap:10px }
    .acc-name{ color:var(--muted); font-weight:600 }
    .acc-number{ font:700 22px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; letter-spacing:.5px; background:#fff; border:1px dashed var(--ring); padding:10px 12px; border-radius:12px; text-align:center }
    .acc-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center }
    .btn-copy, .btn-open{ border:none; border-radius:12px; padding:10px 14px; font-weight:700; cursor:pointer }
    .btn-copy{ background:var(--accent); color:#fff }
    .btn-copy.copied{ background:#2e7d32 }
    .btn-open{ background:#eee; color:#333; text-decoration:none }
    .amp-card.qr{ align-content:start }
    .qr-body{ display:grid; gap:8px; place-items:center }
    .qr-body img{ width:min(320px, 100%); height:auto; border-radius:12px; border:1px solid var(--ring); box-shadow:var(--shadow); background:#fff }
    .qr-note{ color:var(--muted) }
    .amp-thanks{ text-align:center; margin-top:20px; color:var(--muted) }

    /* Toast copy */
    .toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); opacity:0; transition:.25s ease; background:#111; color:#fff; padding:10px 14px; border-radius:999px; z-index:2000; box-shadow:0 8px 24px rgba(0,0,0,.2) }
    .toast.show{ opacity:1; transform:translateX(-50%) }

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

    /* ===== LIGHTBOX / POPUP GALLERY (fixed close button overlap) ===== */
    .lightbox{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:1000}
    .lightbox.open{display:grid;animation:fadeIn .2s ease}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    .lb-frame{position:relative;max-width:min(92vw,1100px);max-height:86vh;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.85));box-shadow:0 30px 80px rgba(0,0,0,.35);border:1px solid var(--ring)}
    .lb-canvas{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:16px;z-index:1}
    .lb-img{position:relative;z-index:1;user-select:none;pointer-events:auto;will-change:transform;transition:transform .15s ease;max-width:calc(100vw - 64px);max-height:calc(86vh - 64px);width:auto;height:auto;object-fit:contain;image-rendering:auto;cursor:grab}
    .lb-toolbar{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:20;pointer-events:auto}
    .lb-btn{border:none;border-radius:999px;padding:10px 12px;background:rgba(0,0,0,.6);color:#fff;font-weight:600;cursor:pointer;backdrop-filter:saturate(140%) blur(6px)}
    .lb-btn:hover{background:rgba(0,0,0,.75)}
    .lb-close{position:absolute;top:10px;left:10px;z-index:30;background:rgba(0,0,0,.65);color:#fff;border:none;border-radius:999px;padding:10px 12px;font-size:18px;cursor:pointer;backdrop-filter:saturate(140%) blur(6px)}
    .lb-close:hover{background:rgba(0,0,0,.85)}
    .lb-caption{display:none!important}
    .lb-hint{display:none!important}
    
    /* FOOTER */
    footer{background:linear-gradient(180deg,#ffffff, #f1ece6);border-top:1px solid var(--ring);padding:28px 20px;color:var(--muted)}
    .footer-inner{max-width:1100px;margin:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
    .footer-brand{font-family:'Great Vibes',cursive;font-size:28px;color:var(--brand)}
    .footer-links a{color:var(--muted);text-decoration:none;margin-left:12px}
    .footer-links a:hover{color:var(--brand)}
    
    
    @media screen and (max-width:560px){
        .lb-btn{padding:8px 10px}
        .foto .grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
    }

    @media screen and (min-width:768px){
        .person{grid-template-columns:84px 1fr;gap:16px}
        .person-photo{width:84px;height:84px;border-radius:16px}

        .couple-grid{grid-template-columns:repeat(2,1fr)}

        .person--deluxe{ grid-template-columns: 150px 1fr; padding:26px; }

        .avatar{ width:150px; height:180px; border-radius:22px; } 

        .jadwal .wrap{grid-template-columns:repeat(2,1fr)}
    }

    @media screen and (min-width:900px){
        .couple--deluxe .couple-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap:24px; }
        .amp-grid{ grid-template-columns:repeat(2,1fr) }
    }

    @media screen and (min-width:0px) and (max-width:1023px){
      .footer-inner{justify-content:center;}
      .footer-copy{text-align:center;}
      .person-name{justify-items: center;}
      .person .parents{text-align:center;}
    }

    @media screen and (min-width:1024px){
      .foto .grid{grid-template-columns:repeat(3,1fr)}
    }