/* Filo Jemputan — kad awam */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.fj-card-body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,sans-serif;font-size:15px;line-height:1.65}
body.fjc-locked{overflow:hidden}
img{max-width:100%;display:block}
a{color:var(--primary)}
.fjc-hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Ornamen */
.fj-orn{color:var(--accent);width:180px;max-width:70%;margin:0 auto 14px}
.fj-orn svg{width:100%;height:auto;display:block}
.fj-orn--bottom{transform:rotate(180deg);margin:18px auto 0}
.orn-songket .fj-orn,.orn-line .fj-orn{width:220px}

/* Muka depan */
.fjc-cover{position:fixed;inset:0;z-index:60;background:var(--bg);display:grid;place-items:center;text-align:center;padding:32px 24px;transition:transform .9s cubic-bezier(.7,0,.2,1),opacity .9s}
.fjc-cover[style]::before{content:"";position:absolute;inset:0;background:var(--cover) center/cover no-repeat}
.fjc-cover[style]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 35%,transparent) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 55%,var(--bg) 100%)}
.fjc-cover__in{position:relative;z-index:1;max-width:420px;width:100%;animation:fjcFade 1.2s ease both}
.fjc-cover.is-open{transform:translateY(-100%);opacity:.6}
.fjc-eyebrow{font-family:var(--display);letter-spacing:.28em;text-transform:uppercase;font-size:.78rem;color:var(--muted);margin:0 0 6px}
.fjc-names{font-family:var(--script);font-weight:400;color:var(--primary);font-size:3.3rem;line-height:1.1;margin:8px 0;display:flex;flex-direction:column;align-items:center}
.fjc-names em{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--accent);margin:2px 0}
.fjc-names--lg{font-size:3.6rem}
.fjc-names--sm{font-size:2.2rem;display:block}
.fjc-date-s{font-family:var(--display);letter-spacing:.2em;font-size:1rem;margin:6px 0 18px}
.fjc-to{margin:18px auto 22px;padding:12px 18px;border-top:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);max-width:320px}
.fjc-to small{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.fjc-to strong{font-family:var(--display);font-size:1.25rem;font-weight:500}
.fjc-open{display:inline-flex;gap:8px;align-items:center;border:0;cursor:pointer;background:var(--primary);color:var(--paper);font:600 .9rem Montserrat,sans-serif;letter-spacing:.06em;padding:13px 26px;border-radius:999px;box-shadow:0 8px 24px color-mix(in srgb,var(--primary) 35%,transparent);animation:fjcPulse 2.4s ease-in-out infinite 1.5s}

/* Butang atas */
.fjc-top{position:fixed;top:12px;left:50%;transform:translateX(-50%);width:min(480px,100%);display:flex;justify-content:space-between;padding:0 12px;z-index:40;pointer-events:none}
.fjc-top>*{pointer-events:auto}
.fjc-lang,.fjc-music{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(6px);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);font:600 .75rem Montserrat,sans-serif;text-decoration:none;cursor:pointer}
.fjc-music{margin-left:auto}
.fjc-music.is-playing svg{animation:fjcSpin 4s linear infinite}

.fjc-preview{position:fixed;top:0;left:0;right:0;z-index:70;background:#b3261e;color:#fff;text-align:center;font-size:.72rem;font-weight:600;letter-spacing:.08em;padding:5px}

/* Kandungan */
.fjc-main{max-width:480px;margin:0 auto;background:var(--paper);min-height:100vh;padding-bottom:96px;box-shadow:0 0 60px rgba(0,0,0,.08);overflow:hidden}
.fjc-s{padding:52px 28px;text-align:center;border-bottom:1px solid color-mix(in srgb,var(--accent) 18%,transparent);opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.fjc-s.is-in{opacity:1;transform:none}
.fjc-s:last-of-type{border-bottom:0}
.fjc-h{font-family:var(--display);font-weight:500;font-size:1.6rem;color:var(--primary);margin:0 0 16px;letter-spacing:.02em}
.fjc-h::after{content:"";display:block;width:42px;height:1px;background:var(--accent);margin:10px auto 0}
.fjc-big{font-family:var(--display);font-size:1.3rem;font-weight:500;margin:0 0 4px}
.fjc-muted{color:var(--muted);font-size:.92rem}
.fjc-text{font-size:.95rem;color:var(--text);margin:0 auto 18px;max-width:380px}
.fjc-hero{padding-top:72px}
.fjc-photo{width:210px;height:270px;margin:0 auto 26px;border-radius:120px 120px 14px 14px;overflow:hidden;border:4px solid var(--paper);outline:1px solid var(--accent);outline-offset:6px}
.fjc-photo img{width:100%;height:100%;object-fit:cover}
.fjc-bismillah{font-family:Amiri,serif;font-size:1.6rem;color:var(--primary);margin:0 0 14px}
.fjc-hosts{font-family:var(--display);font-size:1.15rem;font-weight:500;margin-bottom:16px}
.fjc-couple{margin-top:8px}
.fjc-full{font-family:var(--display);font-size:1.3rem;font-weight:600;color:var(--primary);margin:0}
.fjc-amp{font-family:var(--script);font-size:2rem;color:var(--accent);margin:2px 0;line-height:1.2}
.fjc-hashtag{font-weight:600;color:var(--accent);letter-spacing:.04em}

/* Kira detik */
.fjc-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:340px;margin:22px auto}
.fjc-countdown div{background:color-mix(in srgb,var(--primary) 9%,transparent);border:1px solid color-mix(in srgb,var(--primary) 20%,transparent);border-radius:12px;padding:10px 4px}
.fjc-countdown b{display:block;font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--primary);line-height:1.1}
.fjc-countdown span{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.fjc-countdown.is-today{display:block;font-family:var(--display);font-size:1.2rem;color:var(--primary)}

/* Butang */
.fjc-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.fjc-btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;background:var(--primary);color:var(--paper);border:1px solid var(--primary);border-radius:999px;padding:11px 20px;font:600 .85rem Montserrat,sans-serif;text-decoration:none;cursor:pointer;transition:transform .15s,opacity .15s}
.fjc-btn:active{transform:scale(.97)}
.fjc-btn--ghost{background:transparent;color:var(--primary)}
.fjc-btn--sm{padding:8px 14px;font-size:.78rem}
.fjc-btn--block{width:100%}
.fjc-btn[disabled]{opacity:.6;cursor:wait}
.fjc-btn svg{width:18px;height:18px}

/* Aturcara */
.fjc-timeline{list-style:none;padding:0;margin:0 auto;max-width:340px;text-align:left;position:relative}
.fjc-timeline::before{content:"";position:absolute;left:92px;top:6px;bottom:6px;width:1px;background:color-mix(in srgb,var(--accent) 60%,transparent)}
.fjc-timeline li{display:grid;grid-template-columns:84px 1fr;gap:16px;padding:8px 0;position:relative}
.fjc-timeline li::before{content:"";position:absolute;left:88px;top:16px;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.fjc-timeline span{font-weight:600;font-size:.82rem;color:var(--primary);text-align:right;padding-top:2px}
.fjc-timeline p{margin:0;padding-left:8px}

/* Lokasi */
.fjc-map{margin:18px 0 0;border-radius:16px;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.fjc-map iframe{width:100%;height:230px;border:0;display:block;filter:saturate(.85)}

/* Galeri */
.fjc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fjc-gimg{padding:0;border:0;background:none;cursor:zoom-in;aspect-ratio:1;overflow:hidden;border-radius:8px}
.fjc-gimg img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.fjc-gimg:hover img{transform:scale(1.05)}
.fjc-lightbox{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.88);display:grid;place-items:center;padding:20px;cursor:zoom-out}
.fjc-lightbox[hidden]{display:none}
.fjc-lightbox img{max-height:90vh;border-radius:8px}

/* Borang */
.fjc-form{display:grid;gap:12px;text-align:left;max-width:380px;margin:0 auto}
.fjc-form label{display:grid;gap:5px;font-size:.8rem;font-weight:600;color:var(--muted)}
.fjc-form input[type=text],.fjc-form input[type=tel],.fjc-form select,.fjc-form textarea{width:100%;font:400 .95rem Montserrat,sans-serif;color:var(--text);background:color-mix(in srgb,var(--paper) 92%,var(--text));border:1px solid color-mix(in srgb,var(--text) 18%,transparent);border-radius:12px;padding:11px 13px;outline:none;transition:border-color .2s}
.fjc-form input:focus,.fjc-form select:focus,.fjc-form textarea:focus{border-color:var(--primary)}
.fjc-form select option{color:#222}
.fjc-toggle{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fjc-toggle label{display:block;cursor:pointer}
.fjc-toggle input{position:absolute;opacity:0}
.fjc-toggle span{display:block;text-align:center;padding:12px;border-radius:12px;border:1px solid color-mix(in srgb,var(--primary) 35%,transparent);color:var(--primary);font-size:.9rem;font-weight:600;transition:all .2s}
.fjc-toggle input:checked+span{background:var(--primary);color:var(--paper)}
.fjc-toggle input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.fjc-if-attend{display:grid;gap:12px}
.fjc-form.is-no .fjc-if-attend{display:none}
.fjc-msg{margin:0;font-size:.88rem;text-align:center;min-height:1em}
.fjc-msg.is-ok{color:var(--primary);font-weight:600}
.fjc-msg.is-err{color:#c0392b}
.fjc-note{background:color-mix(in srgb,var(--accent) 14%,transparent);border-radius:12px;padding:12px 14px;font-size:.88rem;margin:0 auto 16px;max-width:380px}
.fjc-done{padding:20px;border-radius:16px;background:color-mix(in srgb,var(--primary) 9%,transparent);max-width:380px;margin:0 auto}
.fjc-done b{display:block;font-family:var(--display);font-size:2rem;color:var(--primary)}

/* Ucapan */
.fjc-wish-list{margin-top:22px;max-height:380px;overflow-y:auto;display:grid;gap:10px;text-align:left;padding:2px}
.fjc-wish{background:color-mix(in srgb,var(--primary) 6%,transparent);border-radius:14px;padding:12px 14px;animation:fjcFade .5s ease}
.fjc-wish p{margin:0 0 4px;font-size:.92rem}
.fjc-wish small{color:var(--muted);font-size:.76rem}

/* Hadiah */
.fjc-bank{border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:18px;padding:20px;display:grid;gap:4px;justify-items:center;max-width:340px;margin:0 auto 16px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent)}
.fjc-bank small{text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-size:.72rem}
.fjc-acc{font-family:var(--display);font-size:1.5rem;letter-spacing:.06em;color:var(--primary)}
.fjc-bank .fjc-btn{margin-top:8px}
.fjc-qr{display:grid;justify-items:center;gap:10px}
.fjc-qr img{width:220px;border-radius:12px;background:#fff;padding:8px}

/* Hubungi */
.fjc-clist{list-style:none;padding:0;margin:0 auto;max-width:360px;display:grid;gap:8px}
.fjc-clist li{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--primary) 6%,transparent);text-align:left}
.fjc-clist span{flex:1}
.fjc-clist strong{display:block;font-size:.92rem}
.fjc-clist small{color:var(--muted)}
.fjc-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--paper)}
.fjc-ico svg{width:18px;height:18px}

.fjc-brand{text-align:center;padding:18px;font-size:.72rem;letter-spacing:.06em}
.fjc-brand a{color:var(--muted);text-decoration:none}

/* Navigasi bawah */
.fjc-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(480px,100%);z-index:30;display:flex;justify-content:space-around;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(10px);border-top:1px solid color-mix(in srgb,var(--accent) 30%,transparent);padding:8px 4px calc(8px + env(safe-area-inset-bottom))}
.fjc-nav a{flex:1;display:grid;justify-items:center;gap:2px;text-decoration:none;color:var(--primary);font-size:.64rem;font-weight:600;letter-spacing:.03em;padding:4px 0;border-radius:10px}
.fjc-nav a:active{background:color-mix(in srgb,var(--primary) 10%,transparent)}

.fjc-toast{position:fixed;bottom:92px;left:50%;transform:translate(-50%,20px);background:var(--text);color:var(--paper);padding:9px 18px;border-radius:999px;font-size:.82rem;opacity:0;transition:all .3s;pointer-events:none;z-index:90}
.fjc-toast.is-show{opacity:1;transform:translate(-50%,0)}

/* Tema khas */
.theme-songket .fjc-main{border-left:4px solid transparent;border-right:4px solid transparent;border-image:repeating-linear-gradient(45deg,color-mix(in srgb,var(--primary) 55%,transparent) 0 3px,transparent 3px 9px) 4}
.theme-minimal .fjc-names{font-family:var(--script);letter-spacing:.02em}
.theme-minimal .fjc-h{text-transform:uppercase;font-size:1rem;letter-spacing:.3em;font-weight:600}
.theme-emas .fjc-photo,.theme-songket .fjc-photo{border-color:var(--paper)}

@keyframes fjcFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fjcPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes fjcSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.fjc-s{opacity:1;transform:none}}
@media (min-width:600px){.fjc-main{margin:24px auto;border-radius:24px;min-height:auto}}