/* ============================================================
   ISLAMIC MAROON — stylesheet template undangan (maroon-emas islami)
   Dipisah dari view. Tautkan via:
   <link rel="stylesheet" href="<?= base_url('assets/templates/islamic-maroon/islamic-maroon.css') ?>">
   ============================================================ */

:root {
    --maroon: #7a2436;
    --maroon-d: #4a1220;
    --maroon-l: #a8465a;

    --gold: #c9a24b;
    --gold-d: #a07f2e;
    --gold-l: #e6cf8f;

    --ink: #2c1b1f;
    --muted: #7f6b70;
    --cream: #f8f3f4;
    --cream2: #f0e5e7;
    --line: #e3d0d4;
    --pinkline: #b5677e;

    --maroon-rgb: 122, 36, 54;
    --maroon-d-rgb: 74, 18, 32;
    --maroon-l-rgb: 168, 70, 90;
    --gold-rgb: 201, 162, 75;
    --gold-d-rgb: 160, 127, 46;
    --gold-l-rgb: 230, 207, 143;
    --ink-rgb: 44, 27, 31;
    --muted-rgb: 127, 107, 112;
    --cream-rgb: 248, 243, 244;
    --cream2-rgb: 240, 229, 231;
    --line-rgb: 227, 208, 212;
    --pinkline-rgb: 181, 103, 126;
}

* { margin: 0; padding: 0; box-sizing: border-box }

html { scroll-behavior: smooth; overflow-x: hidden; width: 100% }
img, video, svg { max-width: 100%; height: auto }

body {
    font-family: 'Cormorant Garamond', serif;
    color: var(--ink);
    background: var(--cream);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0L24 16L40 20L24 24L20 40L16 24L0 20L16 16Z' fill='%231f6f52' fill-opacity='0.05'/%3E%3C/svg%3E");
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.serif { font-family: 'Amiri', serif }
.arabic { font-family: 'Amiri', serif; direction: rtl }
.sans { font-family: 'Jost', sans-serif }

/* ---------- ornamen ---------- */
.eyebrow {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--gold-d);
    margin-bottom: 6px
}

.divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 16px auto 26px;
    max-width: 320px;
    width: 100%;
}

.divider::before {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, transparent, var(--gold));
}

.divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, var(--gold), transparent);
}

.divider i { color: var(--gold); font-size: 15px; flex-shrink: 0 }

h2.head {
    font-family: 'Amiri', serif;
    font-size:clamp(21px,5vw,25px);font-weight:400;
    color: var(--maroon-d);
    letter-spacing:.5px
}

/* basmalah & ayat */
.basmalah {
    font-family: 'Amiri', serif;
    direction: rtl;
    font-size: clamp(26px, 5vw, 38px);
    color: var(--maroon-d);
    margin-bottom: 8px
}

.verse {
    max-width: 560px;
    margin: 22px auto 0;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    background: rgba(255, 255, 255, .6);
    border-radius: 10px;
    padding: 24px
}

.verse .ar {
    font-family: 'Amiri', serif;
    direction: rtl;
    font-size: clamp(22px, 4.4vw, 30px);
    line-height: 2;
    color: var(--maroon-d)
}

.verse .tr { font-weight: 300; color: var(--muted); font-size: 16px; margin-top: 12px }

.verse .ref {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-d);
    margin-top: 10px
}

.salam {
    font-family: 'Amiri', serif;
    font-size: clamp(20px, 3.6vw, 26px);
    color: var(--maroon);
    margin-bottom: 6px
}

/* ---------- cover dua panel ---------- */
#cover {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    transition: opacity .7s ease, width .7s ease, visibility .7s
}

#cover.open { opacity: 0; visibility: hidden; pointer-events: none }

#cover .panel {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 40px 34px;
    overflow: hidden
}

#cover .panel::after {
    content: "";
    position: absolute;
    inset: 0;
    /*background: linear-gradient(180deg, rgba(var(--maroon-d-rgb),  .25), rgba(var(--maroon-d-rgb),  .78)), linear-gradient(180deg, rgba(var(--maroon-rgb),  .25), rgba(var(--maroon-d-rgb),  .4));*/
    mix-blend-mode: multiply
}

#cover .panel>* { position: relative; z-index: 2; color: #f3f8f4 }

#cover .panel.left { flex: 0 0 60%; max-width: 60%; border-right: 3px solid var(--gold) }
#cover .panel.right { flex: 0 0 40%; max-width: 40% }
/* fokus foto sama di desktop & mobile (wajah mempelai tetap terlihat, tidak gepeng) */
#cover .panel { background-position: center 30% }

/* Video background panel kanan — menggantikan foto sepenuhnya jika cover_motion diupload */
#cover .panel > video.cover-video-bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
    z-index: 0; pointer-events: none;
}

#cover .names {
    font-family: 'Amiri', serif;
    font-size: clamp(26px, 4vw, 40px);
    font-weight: 700;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
    line-height: 1.25
}

#cover .names .amp { color: var(--gold-l) }

#cover .date {
    font-family: 'Jost', sans-serif;
    letter-spacing: 2px;
    font-size: 13px;
    margin-top: 10px;
    opacity: .92
}

#cover .right { align-items: center; justify-content: center; text-align: center }

#cover .crescent { color: var(--gold-l); font-size: 22px; margin-bottom: 10px }

.open-btn {
    margin-top: 26px;
    font-family: 'Jost', sans-serif;
    letter-spacing: 2px;
    font-size: 13px;
    background: linear-gradient(135deg, var(--maroon-l), var(--maroon), var(--maroon-d));
    color: #fdf6df;
    border: 1px solid var(--gold);
    padding: 13px 30px;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(var(--maroon-d-rgb),  .5);
    transition: .2s;
    text-transform: uppercase;
    font-weight: 500
}

.open-btn:hover { transform: translateY(-2px) scale(1.03) }

.mobile-cover-info { display: none; }

.gal-track { touch-action: pan-x pan-y; }

@media (max-width: 760px) {
    html, body { touch-action: pan-y; }
    #cover { display: block; }
    #cover .panel.left { display: none; }
    #cover .panel.right {
        width: 100%;
        max-width: 100%;
        height: 100vh;
        min-height: 100vh;
        padding: 30px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #cover.open { display: none; }
    .mobile-cover-info { display: block; text-align: center; margin-bottom: 30px; }
    .mobile-cover-info .names {
        font-family: 'Amiri', serif;
        font-size: clamp(28px, 8vw, 42px);
        line-height: 1.3;
        color: #fff;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .4);
    }
    .mobile-cover-info .date {
        margin-top: 10px;
        font-family: 'Jost', sans-serif;
        letter-spacing: 2px;
        font-size: 13px;
        color: #fff7e6;
    }
    .mobile-cover-info .amp { color: var(--gold-l); }

    .couple { display: flex; flex-direction: column; gap: 32px; align-items: center; margin-top: 30px; }
    .couple-divider{
        width:100px;
    }

    .couple-divider::before{
        font-size:22px;
    }
    .person { width: 100%; max-width: 320px; text-align: center; }
    .person img { width: 160px; height: 160px; object-fit: cover; }
    .person h3 { font-size: 20px; line-height: 1.2; margin-top: 12px; padding: 6px 24px; }
    .person .full { font-size: 16px; line-height: 1.5; }
    .person .parents { font-size: 14px; line-height: 1.6; margin-top: 8px; }
    .person .ig { margin-top: 10px; display: inline-block; }
    .countdown-card { padding: 26px 16px; border-radius: 10px; }
}

/* Desktop/laptop: setelah dibuka, panel kiri TETAP diam, konten scroll di kanan */
@media(min-width:761px) {
    #cover.open { opacity: 1; visibility: visible; pointer-events: none; width: 60%; right: auto }
    #cover.open .panel.right { display: none }
    #cover.open .panel.left { flex: 1 1 100%; max-width: 100% }
    #cover.open~#content { margin-left: 60%; width: 40%; transition: margin .3s ease }
}

/* ---------- konten ---------- */
#content { width: 100% }

section.s {
    padding: 84px 22px;
    text-align: center;
    position: relative;
    max-width: 780px;
    margin: 0 auto
}

section.s p { font-weight: 300; color: var(--muted); font-size: 18px; line-height: 1.7 }

/* couple */
.couple {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
    flex-wrap: wrap
}
.couple-divider{
    position:relative;
    width:140px;
    height:1px;
    margin:0 auto;
    flex-shrink:0;
    background:linear-gradient(
        to right,
        transparent,
        rgba(var(--gold-rgb), .75),
        var(--gold),
        rgba(var(--gold-rgb), .75),
        transparent
    );
}

.couple-divider::before{
    content:"♥";
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    color:var(--gold);
    font-size:26px;
    line-height:1;
    text-shadow:
        0 0 10px rgba(var(--gold-rgb), .25),
        0 2px 6px rgba(0,0,0,.12);
}
.person { max-width: 280px }

.person img {
    width: 185px;
    height: 185px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid var(--gold);
    box-shadow:
        0 0 0 4px var(--cream),
        0 0 0 7px var(--gold-l),
        0 14px 32px rgba(var(--maroon-d-rgb),  .28);
    transition: transform .4s ease, box-shadow .4s ease;
}

.person img:hover {
    transform: translateY(-4px);
    box-shadow:
        0 0 0 4px var(--cream),
        0 0 0 7px var(--gold),
        0 18px 38px rgba(var(--maroon-d-rgb),  .35);
}

.person h3 {
    display: inline-block;
    font-family: 'Amiri', serif;
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    background: var(--maroon-d);
    padding: 7px 30px;
    border-radius: 999px;
    margin: 16px 0 6px;
    box-shadow: 0 8px 18px rgba(var(--maroon-d-rgb),  .3);
}

.person .full { font-family: 'Cormorant Garamond', serif; font-size: 19px }
.person .parents { font-size: 15px; color: var(--muted); margin-top: 8px; font-weight: 300 }
.person .ig { display: inline-block; margin-top: 8px; color: var(--maroon); font-size: 14px; text-decoration: none }

.amp { font-family: 'Amiri', serif; font-size: 50px; color: var(--gold) }

/* motion — full desain, teks disembunyikan */
.motion-sec { padding: 0; width: 100%; line-height: 0; background: transparent }
.motion-sec .eyebrow, .motion-sec h2, .motion-sec p { display: none }
.motion-sec video, .motion-sec img {
    width: 100%; max-width: 100%; margin: 0; border: 0; border-radius: 0; display: block; box-shadow: none
}

/* timeline */
.timeline { max-width: 440px; margin: 30px auto 0; text-align: left; border-left: 2px solid var(--line); padding-left: 26px }
.tl-item { position: relative; margin-bottom: 30px; display: flex; align-items: flex-start; gap: 16px }
.tl-item:last-child { margin-bottom: 0 }
.tl-item::before {
    content: ""; position: absolute; left: -35px; top: 8px;
    width: 13px; height: 13px; border-radius: 50%;
    background: var(--gold); box-shadow: 0 0 0 4px var(--cream2); z-index: 2
}
.tl-content { flex: 1 1 auto; min-width: 0; padding-top: 2px }
.tl-content .date {
    font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 2px;
    color: var(--gold-d); text-transform: uppercase
}
.tl-content h4 { font-family: 'Amiri', serif; font-weight: 700; font-size: 21px; margin: 4px 0 6px; color: var(--maroon-d); line-height: 1.25 }
.tl-content p { font-size: 15px !important; line-height: 1.75 !important }

/* Thumbnail foto — kecil, rapi, modern (bukan lagi full-width) */
.tl-photo {
    flex: 0 0 auto; width: clamp(64px, 20vw, 92px); aspect-ratio: 1/1;
    display: block; border-radius: 14px; overflow: hidden; position: relative; cursor: pointer;
    border: 2px solid var(--cream); box-shadow: 0 8px 20px rgba(var(--ink-rgb), .16);
    transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .4s ease;
}
.tl-photo::after {
    content: ""; position: absolute; inset: 0; border-radius: 12px;
    border: 1px solid var(--gold-l); opacity: .7; pointer-events: none;
}
.tl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.34,1.56,.64,1) }
.tl-item:hover .tl-photo { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 14px 30px rgba(var(--gold-rgb), .3) }
.tl-item:hover .tl-photo img { transform: scale(1.1) }

/* events */
.events { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); justify-content: center; gap: 20px; margin-top: 30px }
.event {
    background: #fff; border-radius: 8px; padding: 30px 22px;
    border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(var(--maroon-d-rgb),  .08); position: relative
}
.event::before {
    content: ""; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 1px solid var(--gold-l); border-radius: 4px; pointer-events: none; opacity: .5
}
.event i.ic { font-size: 26px; color: var(--maroon) }
.event .ic-img { width: 30px; height: 30px; max-width: 100%; object-fit: contain; display: inline-block }
.event h4 { font-family: 'Amiri', serif; font-weight: 700; font-size: 23px; margin: 10px 0; color: var(--maroon-d) }
.event .row { font-size: 15px; color: var(--muted); margin: 4px 0; font-weight: 300 }
.event .row i { font-size: 13px; margin-right: 6px; color: var(--gold-d) }
.event a.maps { display: inline-block; margin-top: 12px; color: var(--maroon); font-size: 14px; text-decoration: none }

/* countdown */
.countdown-card {
    max-width: 640px;
    margin: 0 auto;
    border: 1px solid var(--line);
    border-top: 3px solid var(--gold);
    background: rgba(255, 255, 255, .6);
    border-radius: 14px;
    padding: 36px 24px;
}
.countdown { display: flex; gap: 18px; justify-content: center; margin-top: 38px; flex-wrap: wrap }
.cd-box {
    position: relative;
    min-width: 92px;
    padding: 28px 18px 18px;
    background: linear-gradient(180deg, #ffffff 0%, var(--cream) 160%);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(var(--maroon-rgb),  .1);
    transition: transform .45s cubic-bezier(.4,0,.2,1), box-shadow .45s ease, border-color .45s ease;
    overflow: hidden;
}
/* aksen emas tipis di atas kartu */
.cd-box::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 40px; height: 2px; border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, transparent, var(--gold-l), var(--gold), var(--gold-l), transparent);
}
.cd-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(var(--maroon-rgb),  .2);
    border-color: var(--gold-l);
}
.cd-box .n { font-family: 'Amiri', serif; font-weight: 700; font-size: 44px; line-height: 1; color: var(--maroon-d); letter-spacing: .5px }
.cd-box .l {
    font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--muted); margin-top: 12px;
}
/* garis pemisah emas halus di atas label */
.cd-box .l::before {
    content: ''; display: block; width: 16px; height: 1px; margin: 0 auto 8px;
    background: var(--gold); opacity: .55;
}
@media(max-width:480px) {
    .countdown { gap: 12px }
    .cd-box { min-width: 72px; padding: 22px 12px 14px; border-radius: 16px }
    .cd-box .n { font-size: 34px }
    .cd-box .l { font-size: 9px; letter-spacing: 2px; margin-top: 10px }
}

/* gallery */
/* Galeri — 1 foto utama + slider untuk sisanya, foto tampil FULL tanpa terpotong */
.gallery-wrap { margin-top: 26px; display: flex; flex-direction: column; gap: 16px }

/* Foto utama */
.gal-feature {
    position: relative; display: block; overflow: hidden;
    border-radius: 14px; cursor: pointer; aspect-ratio: 4/3;
    border: 1px solid var(--line); box-shadow: 0 6px 20px rgba(var(--ink-rgb), .12);
}
.gal-feature img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .6s cubic-bezier(.34,1.56,.64,1);
}
.gal-feature:hover img { transform: scale(1.05) }

.gal-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, rgba(var(--ink-rgb),0) 40%, rgba(var(--ink-rgb),.55) 100%);
    opacity: 0; transition: opacity .35s ease;
    color: #fff; font-size: 15px;
}
.gal-feature:hover .gal-overlay { opacity: 1 }
.gal-overlay i {
    border: 1.5px solid rgba(255,255,255,.85); border-radius: 50%;
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; transform: scale(.7); transition: transform .35s ease .05s;
}
.gal-feature:hover .gal-overlay i { transform: scale(1) }

.gal-cap {
    position: absolute; left: 12px; right: 12px; bottom: 10px;
    font-family: 'Jost', sans-serif; font-size: 11.5px; font-weight: 400; letter-spacing: .3px;
    color: #fff; opacity: 0; transform: translateY(6px);
    transition: opacity .35s ease, transform .35s ease;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
}
.gal-feature:hover .gal-cap { opacity: 1; transform: translateY(0) }

/* Slider foto lainnya — object-fit:contain jadi foto selalu FULL/tidak terpotong,
   celah dibelakangnya diisi versi blur dari foto yang sama supaya tetap terlihat modern */
.gal-slider { position: relative }
.gal-track {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scroll-behavior: smooth;
    padding-bottom: 2px; scrollbar-width: none;
}
.gal-track::-webkit-scrollbar { display: none }
.gal-slide {
    position: relative; flex: 0 0 calc(33.333% - 7px); scroll-snap-align: center;
    aspect-ratio: 4/5; border-radius: 4px; overflow: hidden; cursor: pointer;
    background: linear-gradient(180deg, #fffefb, #f6f1e7);
    box-shadow: 0 10px 22px rgba(var(--ink-rgb), .18), 0 2px 5px rgba(var(--ink-rgb), .12);
    padding: 5px 5px 16px; box-sizing: border-box;
    transition: transform .3s ease, box-shadow .3s ease;
}
.gal-slide:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 30px rgba(var(--ink-rgb), .24), 0 3px 7px rgba(var(--ink-rgb), .14);
    z-index: 3;
}
.gal-slide-bg { display: none; }
.gal-slide img {
    position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover;
    display: block; background: #17110f;
}
.gal-badge {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
    color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.gal-slide-cap {
    position: absolute; left: 6px; right: 6px; bottom: 3px; z-index: 2;
    color: var(--maroon-d); font-family: 'Cormorant Garamond', serif; font-style: italic;
    font-size: 12px; letter-spacing: .2px; text-align: center;
}

.gal-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--maroon-d);
    border: none; display: flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(var(--ink-rgb), .22);
    transition: background .3s ease, color .3s ease; z-index: 4;
}
.gal-nav:hover { background: var(--gold); color: #fff }
.gal-nav.prev { left: 6px }
.gal-nav.next { right: 6px }
@media(max-width:640px) { .gal-nav { display: none } }

.gal-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px }
.gal-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: all .3s ease; cursor: pointer; display: block }
.gal-dots span.active { background: var(--gold); width: 18px; border-radius: 4px }

/* location */
.map-wrap {
    margin-top: 22px; border-radius: 10px; overflow: hidden;
    border: 2px solid var(--gold-l); box-shadow: 0 10px 30px rgba(var(--maroon-d-rgb),  .12)
}
.map-wrap iframe { width: 100%; height: 320px; border: 0; display: block }

/* forms */
.card-form {
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    padding: 30px; max-width: 440px; margin: 26px auto 0; text-align: left;
    box-shadow: 0 12px 34px rgba(var(--maroon-d-rgb),  .1)
}
.card-form label {
    display: block; font-family: 'Jost', sans-serif; font-size: 13px;
    letter-spacing: 1px; color: var(--maroon-d); margin: 12px 0 5px
}
.card-form input:not([type="radio"]):not([type="checkbox"]), .card-form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px;
    font-family: 'Jost', sans-serif; font-size: 14px; background: var(--cream); color: var(--ink)
}
.card-form input:focus, .card-form textarea:focus { outline: none; border-color: var(--maroon) }
.radio-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 14px; margin-top: 4px; }
.radio-row label { display: inline-flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; color: var(--ink); font-size: 14px; text-transform: none; font-family: 'Jost', sans-serif; cursor: pointer; }
.radio-row input[type="radio"] {
    width: 16px; height: 16px; min-width: 16px; flex-shrink: 0;
    margin: 0; padding: 0; border-radius: 50%;
    accent-color: var(--maroon); appearance: auto; -webkit-appearance: radio;
}
@media (max-width: 380px) { .radio-row { gap: 8px; } .radio-row label { font-size: 12px; } }
.btn-submit {
    margin-top: 18px; width: 100%;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-d));
    color: #fdf6df; border: 1px solid var(--gold); padding: 13px; border-radius: 40px;
    font-family: 'Jost', sans-serif; letter-spacing: 2px; text-transform: uppercase;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: .2s
}
.btn-submit:hover { filter: brightness(1.07) }
.form-msg { margin-top: 12px; font-size: 14px; font-family: 'Jost', sans-serif; text-align: center }

.wishes-list { max-width: 440px; margin: 24px auto 0; text-align: left }
/* Catatan: tampilan .wish (kartu/daftar) didefinisikan di blok "FITUR BARU" di bawah. */

.wishes-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 20px auto 0; }
.wishes-pagination button {
    background: var(--gold); color: #fff; border: none; padding: 8px 16px;
    border-radius: 20px; cursor: pointer; font-size: 14px;
    font-family: 'Jost', sans-serif; letter-spacing: .5px;
    transition: filter .2s, transform .2s;
}
.wishes-pagination button:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.wishes-pagination button:disabled { opacity: .4; cursor: not-allowed; }
#wishPageInfo { font-family: 'Jost', sans-serif; font-size: 14px; color: var(--muted); min-width: 46px; text-align: center; }

/* gift */
.gifts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); justify-content: center; gap: 18px; margin-top: 26px }
.gift {
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    padding: 24px; box-shadow: 0 8px 26px rgba(var(--maroon-d-rgb),  .08); text-align: left
}
.gift .ttl { font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--maroon-d) }
.gift .num { font-size: 24px; font-family: 'Amiri', serif; font-weight: 700; margin: 8px 0; letter-spacing: 1px; color: var(--maroon-d) }
.gift .nm { font-size: 15px; color: var(--muted) }
.gift button {
    margin-top: 12px; background: var(--cream2); color: var(--maroon-d);
    border: 1px solid var(--gold-l); padding: 9px 16px; border-radius: 40px;
    cursor: pointer; font-family: 'Jost', sans-serif; font-size: 13px
}
.gift.qris { text-align: center }

/* footer */
footer {
    background: linear-gradient(160deg, var(--maroon), var(--maroon-d));
    color: #eef6f0; text-align: center; padding: 80px 22px;
    background-image: linear-gradient(160deg, rgba(var(--maroon-rgb),  .96), rgba(var(--maroon-d-rgb),  .98)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0L24 16L40 20L24 24L20 40L16 24L0 20L16 16Z' fill='%23c9a24b' fill-opacity='0.12'/%3E%3C/svg%3E")
}
footer .salam-foot { font-family: 'Amiri', serif; font-size: clamp(22px, 4vw, 30px); color: var(--gold-l) }
footer .thanks { max-width: 480px; margin: 14px auto 0; font-weight: 300; opacity: .9; font-size: 17px }
.qr-foot { margin-top: 26px }
.qr-foot img { background: #fff; padding: 8px; border-radius: 10px; width: 120px; height: 120px }
.wa-link, .wa-link:visited { color: #25D366; text-decoration: none; font-weight: 600; }
        .wa-link:hover { color: #1DA851; text-decoration: none; }

/* lightbox */
#lightbox {
    display: none; position: fixed; inset: 0; background: rgba(10, 30, 24, .92);
    z-index: 1100; align-items: center; justify-content: center; padding: 20px
}
#lightbox img { max-width: 92%; max-height: 88%; border-radius: 8px; border: 2px solid var(--gold) }
#lightbox .close { position: absolute; top: 22px; right: 30px; color: #fff; font-size: 40px; cursor: pointer }

/* music */
#music-toggle {
    position: fixed; bottom: 20px; right: 20px; z-index: 900;
    width: 50px; height: 50px; border-radius: 50%;
    background: linear-gradient(135deg, var(--maroon), var(--maroon-d));
    color: #fdf6df; border: 1px solid var(--gold); cursor: pointer;
    box-shadow: 0 8px 24px rgba(var(--maroon-d-rgb),  .5); display: none
}
#music-toggle.show { display: block }
#music-toggle.spin i { animation: spin 3s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }

/* ===== Bottom navigation (seragam semua template) ===== */
.bottom-nav {
    position: fixed;
    left: 50%; transform: translateX(-50%);
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    z-index: 950; display: none;
    gap: 2px; justify-content: center; align-items: center;
    max-width: calc(100% - 28px); padding: 5px; border-radius: 999px;
    background: rgba(var(--ink-rgb), .85);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(var(--maroon-l-rgb), .28);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28); overflow: hidden
}
.bottom-nav.show { display: inline-flex }
.bottom-nav a {
    flex: 0 0 auto; display: inline-flex; flex-direction: row;
    align-items: center; justify-content: center;
    gap: 6px; min-height: 38px; padding: 7px 14px; border-radius: 999px;
    background: transparent; border: 0;
    color: rgba(var(--cream-rgb), .82); text-decoration: none;
    font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
    letter-spacing: .3px; text-transform: none; white-space: nowrap;
    transition: background .25s, color .25s
}
.bottom-nav a i { font-size: 14px; line-height: 1 }
.bottom-nav a span { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .3s ease, opacity .25s ease, margin .3s ease }
.bottom-nav a.active { background: linear-gradient(135deg, var(--maroon-l), var(--maroon)); color: var(--cream) }
.bottom-nav a.active span { max-width: 90px; opacity: 1 }
/*#content { padding-bottom: 72px }*/
/*#music-toggle { bottom: 84px }*/
@media(min-width:761px) { .bottom-nav { display: none !important } }
 @media(min-width:761px) {
            .bottom-nav { display: none !important }
        }

       @media(max-width:760px) {
            footer {
                padding-bottom: calc(62px + 16px + env(safe-area-inset-bottom, 0px));
                margin-bottom: 0;
            }
            #music-toggle {
                bottom: calc(62px + env(safe-area-inset-bottom, 0px) + 12px);
            }
        }

/* ============================================================
   ★ FITUR BARU (selaras modern-clean) — palet hijau-emas
   ============================================================ */

/* ----- Countdown: animasi gaya jam digital (geser-vertikal halus) ----- */
.cd-box .n {
    display: inline-block;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), opacity .4s ease;
    will-change: transform, opacity;
    font-variant-numeric: tabular-nums;
}
.cd-box .n.tick-out { transform: translateY(-42%); opacity: 0 }
.cd-box .n.tick-in { transform: translateY(42%); opacity: 0 }

/* ----- Ucapan: count bar + kartu berikon (tanpa kotak, daftar bersih) ----- */
.wish-count-bar {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 0 auto 6px; font-family: 'Amiri', serif; font-weight: 700;
    font-size: 18px; color: var(--maroon-d); letter-spacing: .5px
}
.wish-count-bar i { color: var(--gold); font-size: 17px }

.wish {
    display: flex; align-items: flex-start; gap: 14px;
    background: transparent; border: none; border-left: none;
    border-bottom: 1px solid var(--pinkline); border-radius: 0;
    padding: 16px 4px; margin-bottom: 0; box-shadow: none
}
.wish:last-child { border-bottom: none }
.wish-avatar {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, var(--maroon-l), var(--maroon));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 15px; box-shadow: 0 4px 12px rgba(var(--maroon-rgb),  .28)
}
.wish-body { flex: 1; min-width: 0 }
.wish-header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 1px }
.wish-name-love { display: inline-flex; align-items: center; gap: 5px }
.wish .nm { font-family: 'Amiri', serif; font-weight: 700; font-size: 18px; color: var(--maroon-d); line-height: 1.2 }
.wish-love-icon { color: var(--gold); font-size: 12px; line-height: 1; flex-shrink: 0 }
.wish-badge {
    width: 16px; height: 16px; border-radius: 50%; display: inline-flex;
    align-items: center; justify-content: center; font-size: 8px; color: #fff; flex-shrink: 0
}
.wish-badge.hadir { background: #27ae60 }
.wish-badge.tidak { background: #e74c3c }
.wish-badge.ragu { background: #f39c12 }
.wish .ms { font-size: 15px; color: var(--muted); font-weight: 300; line-height: 1.6; margin-top: 2px; word-break: break-word }
.wish-time { font-size: 12px; color: var(--gold-d); font-style: italic; margin-top: 5px; font-family: 'Jost', sans-serif }

/* ----- Lokasi: peta interaktif Google Maps ----- */
.map-wrap #gmap { width: 100%; height: 320px }

/* ----- Reveal saat scroll (progressive enhancement, bebas kedip) -----
   Elemen tetap terlihat normal; saat pertama masuk layar JS menambah */
@keyframes revealIn    { from { opacity: 0; transform: translateY(44px) } to { opacity: 1; transform: none } }
@keyframes revealScale { from { opacity: 0; transform: scale(.82) }        to { opacity: 1; transform: scale(1) } }
@keyframes revealExpand{ from { opacity: 0; transform: scaleX(.2) }        to { opacity: 1; transform: scaleX(1) } }
@keyframes revealLeft  { from { opacity: 0; transform: translateX(-56px) } to { opacity: 1; transform: none } }
@keyframes revealRight { from { opacity: 0; transform: translateX(56px) }  to { opacity: 1; transform: none } }
@keyframes revealDrop  { from { opacity: 0; transform: translateY(-40px) scale(.9) } to { opacity: 1; transform: none } }
body.reveal-ready .reveal-anim          { animation: revealIn 1s cubic-bezier(.16, 1, .3, 1) both }
body.reveal-ready .reveal-anim.r-scale  { animation-name: revealScale; animation-timing-function: cubic-bezier(.34, 1.45, .5, 1) }
body.reveal-ready .reveal-anim.r-expand { animation-name: revealExpand; transform-origin: center }
body.reveal-ready .reveal-anim.r-left   { animation-name: revealLeft }
body.reveal-ready .reveal-anim.r-right  { animation-name: revealRight }
body.reveal-ready .reveal-anim.r-drop   { animation-name: revealDrop; animation-timing-function: cubic-bezier(.34, 1.45, .5, 1) }
@media(prefers-reduced-motion:reduce) { body.reveal-ready .reveal-anim { animation: none !important } }

/* ----- Sinkron lagu (ambient halus saat musik diputar) ----- */
:root { --beat: 0 }
body.music-on .divider i { filter: drop-shadow(0 0 calc(var(--beat) * 9px) var(--gold)) }
body.music-on .eyebrow { opacity: calc(.72 + var(--beat) * .28) }
body.music-on h2.head { text-shadow: 0 0 calc(var(--beat) * 16px) rgba(var(--gold-rgb),  calc(var(--beat) * .45)) }
body.music-on .wish-avatar { transform: scale(calc(1 + var(--beat) * .06)); transition: transform .12s ease-out }
body.music-on .wish-love-icon { transform: scale(calc(1 + var(--beat) * .14)) }
body.music-on .cd-box { box-shadow: 0 8px 22px rgba(var(--maroon-d-rgb),  calc(.25 + var(--beat) * .25)) }
body.music-on .cd-box .n { text-shadow: 0 0 calc(var(--beat) * 12px) rgba(var(--gold-l-rgb),  calc(var(--beat) * .55)) }
body.music-on .amp { text-shadow: 0 0 calc(var(--beat) * 12px) rgba(var(--gold-rgb),  calc(var(--beat) * .5)) }

/* ============================================================
   ★ FRAME 4 SUDUT per-section (selaras modern-clean)
   --frame-tl/tr/bl/br ditimpa oleh <style> di view bila admin
   meng-upload gambar sudut untuk template ini.
   ============================================================ */
:root {
    --frame-tl: none; --frame-tr: none; --frame-bl: none; --frame-br: none;
    --corner-size: 150px; --corner-size-mobile: 95px;
    --corner-offset: 18px; --corner-offset-mobile: 10px;
    --frame-line: 1px solid rgba(var(--gold-rgb),  .22);
    --frame-radius: 10px;
}
section.s.framed { border: var(--frame-line); border-radius: var(--frame-radius); }
.frame-corner {
    position: absolute; width: var(--corner-size); height: var(--corner-size);
    background-size: contain; background-repeat: no-repeat; pointer-events: none;
    z-index: 3; opacity: 0; transition: opacity .6s ease;
}
.frame-corner.visible { opacity: .85 }
section.s.framed:hover .frame-corner.visible { opacity: 1 }
.frame-corner.tl { top: calc(-1 * var(--corner-offset)); left: calc(-1 * var(--corner-offset)); background-image: var(--frame-tl); background-position: top left }
.frame-corner.tr { top: calc(-1 * var(--corner-offset)); right: calc(-1 * var(--corner-offset)); background-image: var(--frame-tr); background-position: top right }
.frame-corner.bl { bottom: calc(-1 * var(--corner-offset)); left: calc(-1 * var(--corner-offset)); background-image: var(--frame-bl); background-position: bottom left }
.frame-corner.br { bottom: calc(-1 * var(--corner-offset)); right: calc(-1 * var(--corner-offset)); background-image: var(--frame-br); background-position: bottom right }
section.s.framed.frame-first .frame-corner.tl,
section.s.framed.frame-first .frame-corner.tr { display: none !important }
section.s.framed.frame-last .frame-corner.bl,
section.s.framed.frame-last .frame-corner.br { display: none !important }
@media(max-width:760px) {
    .frame-corner { width: var(--corner-size-mobile); height: var(--corner-size-mobile) }
    .frame-corner.tl { top: calc(-1 * var(--corner-offset-mobile)); left: calc(-1 * var(--corner-offset-mobile)) }
    .frame-corner.tr { top: calc(-1 * var(--corner-offset-mobile)); right: calc(-1 * var(--corner-offset-mobile)) }
    .frame-corner.bl { bottom: calc(-1 * var(--corner-offset-mobile)); left: calc(-1 * var(--corner-offset-mobile)) }
    .frame-corner.br { bottom: calc(-1 * var(--corner-offset-mobile)); right: calc(-1 * var(--corner-offset-mobile)) }
}

/* ============================================================
   ★★★ ANIMASI KUPU-KUPU — gambar diupload dari Admin ★★★
   Satu gambar PNG (idealnya transparan) digandakan jadi beberapa
   elemen .butterfly yang posisinya digerakkan oleh JS (mengembara
   di seluruh layar). Kepak sayap dibuat murni CSS via scaleX pada
   .wing, terpisah dari transform posisi agar tidak saling timpa.
   ============================================================ */
.butterfly-layer{position:fixed;inset:0;pointer-events:none;z-index:850;overflow:hidden}
.butterfly{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity .6s ease}
.butterfly.visible{opacity:.92}
.butterfly .wing{width:100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:center;transform-origin:50% 50%;animation-name:bflyFlap;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
@keyframes bflyFlap{0%{transform:scaleX(1)}100%{transform:scaleX(.48)}}
@media(prefers-reduced-motion: reduce){
    .butterfly-layer{display:none}
}
/* ★ AKHIR ANIMASI KUPU-KUPU ★ */

/* ============================================================
   ★★★ ANIMASI BUNGA BERGUGURAN — gambar diupload dari Admin ★★★
   Tidak ada efek kepak (squish), karena bunga tidak "mengepak".
   Gerakannya melayang jatuh perlahan dari atas ke bawah dengan
   sedikit goyangan & rotasi, dihitung lewat JS (lihat flower-fly).
   ============================================================ */
.flower-layer{position:fixed;inset:0;pointer-events:none;z-index:845;overflow:hidden}
.flower{position:absolute;left:0;top:0;will-change:transform;opacity:0;transition:opacity .6s ease}
.flower.visible{opacity:.92}
.flower .leaf{width:100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:center;filter:drop-shadow(0 3px 5px rgba(0,0,0,.15))}
@media(prefers-reduced-motion: reduce){
    .flower-layer{display:none}
}
/* ★ AKHIR ANIMASI BUNGA ★ */

/* ============================================================
   SKALA DESKTOP — perkecil objek & jarak di layar besar (>=761px)
   (mobile tidak terpengaruh)
   ============================================================ */
@media(min-width:761px) {
    section.s { padding: 58px 22px; max-width: 600px }
    section.s p { font-size: 15px; line-height: 1.65 }
    h2.head { font-size: clamp(24px, 3vw, 30px) }
    .basmalah { font-size: clamp(22px, 3vw, 28px) }
    .salam { font-size: clamp(17px, 2.4vw, 21px) }
    .verse { padding: 18px; max-width: 470px }
    .countdown-card { padding: 24px 18px; max-width: 460px }
    .verse .ar { font-size: clamp(19px, 2.4vw, 24px) }
    .verse .tr { font-size: 14px }
    .verse .ref { font-size: 11px }

    .couple { gap: 14px; margin-top: 26px; flex-wrap: nowrap }
    .couple-divider { width: 60px }
    .person { max-width: 175px }
    .person img { width: 130px; height: 130px }
    .person h3 { font-size: 16px; padding: 5px 20px; margin: 10px 0 4px }
    .person .full { font-size: 16px }
    .person .parents { font-size: 13px }
    .amp { font-size: 36px }

    .timeline { margin: 24px auto 0; max-width: 380px; padding-left: 22px }
    .tl-item { margin-bottom: 22px; gap: 13px }
    .tl-content h4 { font-size: 17px; margin: 4px 0 5px }
    .tl-content .date { font-size: 10.5px }
    .tl-content p { font-size: 13.5px !important }
    .tl-photo { width: 64px; border-radius: 11px }
    .tl-photo::after { border-radius: 9px }

    .events { gap: 14px; margin-top: 24px }
    .event { padding: 22px 16px }
    .event i.ic { font-size: 21px }
    .event .ic-img { width: 24px; height: 24px }
    .event h4 { font-size: 19px }
    .event .row { font-size: 13px }

    .cd-box { min-width: 66px; padding: 18px 11px 12px; border-radius: 16px }
    .cd-box .n { font-size: 29px }
    .cd-box .l { font-size: 8.5px; letter-spacing: 2px; margin-top: 8px }

    .gallery-wrap { gap: 12px; margin-top: 22px }
    .gal-feature { border-radius: 12px }
    .gal-slide { border-radius: 4px; flex-basis: calc(33.333% - 7px); padding: 4px 4px 13px }
    .gal-overlay i { width: 28px; height: 28px; font-size: 10px }
    .gal-cap { font-size: 10px; left: 9px; right: 9px; bottom: 7px }
    .gal-slide-cap { font-size: 10.5px; bottom: 3px }
    .gal-badge { width: 22px; height: 22px; font-size: 9px; top: 9px; right: 9px }
    .map-wrap iframe, .map-wrap #gmap { height: 280px !important }

    .card-form { padding: 22px; max-width: 380px }
    .wishes-list, .wishes-pagination { max-width: 380px }

    .gifts { gap: 14px; margin-top: 24px }
    .gift { padding: 20px }
    .gift .num { font-size: 20px }

    footer { padding: 60px 22px }
    footer .thanks { font-size: 15px; max-width: 430px }

    #cover .names { font-size: clamp(24px, 2.4vw, 34px) }
}

/* Layar sangat lebar (>=1500px) — rapatkan sedikit lagi */
@media(min-width:1500px) {
    section.s { max-width: 580px; padding: 52px 22px }
    .person img { width: 130px; height: 130px }
    .cd-box .n { font-size: 27px }
}

/* ============================================================
   ★ COVER REDESIGN — countdown, tanggal, tamu & animasi
   (halaman cover undangan Islamic maroon)
   ============================================================ */
#cover .cover-stack{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:16px; width:100%; max-width:340px; margin:0 auto; text-align:center;
}
#cover .cover-bismillah{
    font-family:'Amiri',serif; direction:rtl; font-size:clamp(18px,4.5vw,20px);
    color:var(--gold-l); letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.5);
    margin-top:-10px; margin-bottom:-4px;
}
#cover .cover-eyebrow{
    font-family:'Jost',sans-serif; font-size:12px; letter-spacing:5px; text-transform:uppercase;
    color:var(--gold-l); text-shadow:0 1px 2px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5);
    margin-bottom:22px;
}
#cover .cover-names{
    font-family:'Amiri',serif; font-weight:700; line-height:1.25;
    font-size:clamp(30px,7vw,34px); color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.7), 0 3px 18px rgba(0,0,0,.55);
}
#cover .cover-names .amp{ color:var(--gold-l) }
#cover .cover-date{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Jost',sans-serif; letter-spacing:2px; font-size:13px; color:#fff7e6;
    background:rgba(255,255,255,.1); border:1px solid rgba(var(--gold-l-rgb), .45);
    padding:8px 18px; border-radius:40px; backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px); text-shadow:0 1px 6px rgba(0,0,0,.4);
}
#cover .cover-date i{ color:var(--gold-l) }
#cover .cover-countdown{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:2px }
/*#cover .cover-countdown .cd-box{*/
/*    min-width:58px; padding:11px 6px; border-radius:12px;*/
/*    background:rgba(var(--maroon-d-rgb), .42); border:1px solid rgba(var(--gold-l-rgb), .5);*/
/*    box-shadow:0 8px 22px rgba(0,0,0,.28);*/
/*    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);*/
/*}*/
#cover .cover-countdown .cd-box{
    min-width:58px;
    padding:11px 6px;
    border-radius:12px;

    background:linear-gradient(
        180deg,
        var(--maroon) 0%,
        var(--maroon-d) 100%
    );

    border:1px solid var(--gold-l);

    box-shadow:
        0 8px 18px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.08);

    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}
#cover .cover-countdown .cd-box .n{
    font-family:'Amiri',serif; font-weight:700; font-size:23px; color:#fff;
    text-shadow:0 2px 8px rgba(0,0,0,.4);
}
#cover .cover-countdown .cd-box .l{
    font-family:'Jost',sans-serif; font-size:9px; letter-spacing:2px;
    text-transform:uppercase; color:var(--gold-l);
}
#cover .cover-guest{
    margin-top:4px; color:#fff7e6; font-family:'Jost',sans-serif;
    text-shadow:0 1px 2px rgba(0,0,0,.7), 0 2px 10px rgba(0,0,0,.5);
}
#cover .cover-guest .lbl{ display:block; letter-spacing:2px; font-size:12px; opacity:.85 }
#cover .cover-guest .nm{
    display:block; margin-top:4px; font-size:19px; font-weight:500;
    font-family:'Amiri',serif; color:#fff;
}
#cover .cover-stack .open-btn{ margin-top:30px }

/* sparkle / kerlip emas di cover */
#cover .cover-sparkles{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden }
#cover .cover-sparkles .spark{
    position:absolute; width:var(--sz,4px); height:var(--sz,4px); border-radius:50%;
    background:radial-gradient(circle, #fff 0%, var(--gold-l) 45%, rgba(var(--gold-rgb), 0) 70%);
    opacity:0; animation:sparkTwinkle var(--d,3s) ease-in-out var(--dl,0s) infinite;
}
@keyframes sparkTwinkle{ 0%,100%{ opacity:0; transform:scale(.4) } 50%{ opacity:.9; transform:scale(1) } }

/* entrance: elemen cover muncul berurutan */
#cover .cover-stack > *{ animation:coverUp .8s cubic-bezier(.22,.61,.36,1) both }
#cover .cover-stack > *:nth-child(1){ animation-delay:.05s }
#cover .cover-stack > *:nth-child(2){ animation-delay:.15s }
#cover .cover-stack > *:nth-child(3){ animation-delay:.28s }
#cover .cover-stack > *:nth-child(4){ animation-delay:.40s }
#cover .cover-stack > *:nth-child(5){ animation-delay:.52s }
#cover .cover-stack > *:nth-child(6){ animation-delay:.64s }
#cover .cover-stack > *:nth-child(7){ animation-delay:.76s }
@keyframes coverUp{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

/* kupu-kupu & bunga tampil DI ATAS cover selama belum dibuka */
body.cover-active .butterfly-layer{ z-index:1002 }
body.cover-active .flower-layer{ z-index:1001 }

@media(prefers-reduced-motion:reduce){
    #cover .cover-stack > *,
    #cover .cover-sparkles .spark{ animation:none !important }
    #cover .cover-stack > *{ opacity:1 }
}

/* mobile: rapikan stack & countdown */
/* mobile: ukuran cover disamakan dengan desktop (countdown wrap 2x2 bila layar sangat sempit) */
@media(max-width:760px){
    #cover .cover-stack{ gap:14px }
}