/* ═══════════════════════════════════════════════════════
 *  GARDEN SAGE — style.css
 *  Islamic Botanical Diamond | Double Couple Premium
 *  Slug: undangan-couple-garden-sage | Prefix: _gs_
 *  v2.0.0 | Referensi: white + watercolor sage + diamond frame
 * ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Sans:wght@300;400;500&family=Amiri:wght@400;700&display=swap');

/* ───────────────────────────────────────────────────────
 *  CSS VARIABLES
 * ─────────────────────────────────────────────────────── */
:root {
  --c-primary:  var(--inv-primary,  #7A9B6D);
  --c-secondary:var(--inv-secondary,#B8975A);
  --c-sage:     #7A9B6D;
  --c-blue:     #8AADB6;
  --c-gold:     #B8975A;
  --c-gold-lt:  #D4B07A;
  --c-gold-dim: rgba(184,151,90,.12);
  --c-sage-dim: rgba(122,155,109,.1);
  --c-white:    #FAFAF8;
  --c-soft:     #F4F1EB;
  --c-sand:     #EDE8DE;
  --c-sage-bg:  #7A9B6D;
  --c-text:     #3A332C;
  --c-text-m:   rgba(58,51,44,.55);
  --c-text-s:   rgba(58,51,44,.38);
  --c-border:   rgba(184,151,90,.2);
  --c-border2:  rgba(122,155,109,.18);
  --nav-h:      64px;
  --max-w:      480px;
  --gs-script:  'Great Vibes', cursive;
  --gs-serif:   'Cormorant Garamond', Georgia, serif;
  --gs-arabic:  'Amiri', serif;
  --gs-sans:    'DM Sans', system-ui, sans-serif;
}

/* ───────────────────────────────────────────────────────
 *  RESET & BASE
 * ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--gs-sans);
  font-size: .875rem;
  color: var(--c-text);
  background: var(--c-white);
  max-width: var(--max-w);
  margin: 0 auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display:block; width:100%; height:100%; object-fit:cover; }
a   { text-decoration:none; color:inherit; }
button { background:none; border:none; cursor:pointer; font-family:inherit; }
textarea,input,select { font-family:inherit; font-size:.875rem; }

/* ───────────────────────────────────────────────────────
 *  LOADING — Diamond Draw
 * ─────────────────────────────────────────────────────── */
#xx-loading {
  position:fixed; inset:0; z-index:9999;
  background:var(--c-white);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .75s ease;
}
#xx-loading.xx-ld-out { opacity:0; pointer-events:none; }
.gs-ld-inner { display:flex; flex-direction:column; align-items:center; gap:1.125rem; }
.gs-ld-diamond { width:100px; height:100px; }
.gs-ld-svg { width:100%; height:100%; }

/* Diamond border draw */
.gs-dm-draw {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: gsDmDraw 1.4s ease forwards;
}
.gs-dm-draw2 {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: gsDmDraw 1s ease forwards .5s;
}
@keyframes gsDmDraw { to { stroke-dashoffset: 0; } }
.gs-dm-text { opacity:0; animation: gsFadeUp .6s ease forwards 1s; }

/* Leaves */
.gs-lf { animation: gsLeafPop .4s ease forwards; opacity:0; transform-origin:center; }
.gs-lf1 { animation-delay:.9s; }
.gs-lf2 { animation-delay:1.0s; }
.gs-lf3 { animation-delay:1.1s; }
.gs-lf4 { animation-delay:1.05s; }
@keyframes gsLeafPop { from{opacity:0;transform:scale(.3);} to{opacity:1;transform:scale(1);} }
@keyframes gsFadeUp  { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

.gs-ld-script { font-family:var(--gs-script); font-size:1.375rem; color:var(--c-sage); opacity:0; animation:gsFadeUp .8s ease forwards 1.2s; }
.gs-ld-sub { font-family:var(--gs-sans); font-size:.4375rem; letter-spacing:.22em; text-transform:uppercase; color:var(--c-text-s); opacity:0; animation:gsFadeUp .6s ease forwards 1.4s; }

/* ───────────────────────────────────────────────────────
 *  TOAST
 * ─────────────────────────────────────────────────────── */
#xx-toast {
  position:fixed; top:1.25rem; left:50%;
  transform:translateX(-50%) translateY(-120%);
  z-index:9998; background:var(--c-sage); color:#fff;
  font-size:.6875rem; letter-spacing:.04em;
  padding:.625rem 1.25rem; border-radius:99px;
  transition:transform .35s ease; white-space:nowrap; pointer-events:none;
}
#xx-toast.show { transform:translateX(-50%) translateY(0); }

/* ───────────────────────────────────────────────────────
 *  PROGRESS BAR
 * ─────────────────────────────────────────────────────── */
#xx-progress { position:fixed; top:0; left:0; height:2px; width:0%; z-index:9999; pointer-events:none; transition:width .1s linear; }

/* ───────────────────────────────────────────────────────
 *  LIGHTBOX
 * ─────────────────────────────────────────────────────── */
#xx-lb { position:fixed; inset:0; z-index:8000; background:rgba(30,28,24,.88); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; }
#xx-lb.show { display:flex; }
.gs-lb-img-wrap { max-width:90vw; max-height:80vh; }
.gs-lb-img-wrap img { max-width:100%; max-height:80vh; object-fit:contain; border-radius:1px; }
.gs-lb-close { position:absolute; top:1rem; right:1rem; }
.gs-lb-nav, .gs-lb-close { width:38px; height:38px; border-radius:50%; background:rgba(184,151,90,.15); border:1px solid rgba(184,151,90,.3); color:var(--c-gold-lt); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.gs-lb-prev { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); }
.gs-lb-next { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); }
.gs-lb-nav:hover,.gs-lb-close:hover { background:rgba(184,151,90,.3); }
#gs-lb-cap { position:absolute; bottom:1rem; left:0; right:0; text-align:center; font-family:var(--gs-script); font-size:1rem; color:rgba(184,151,90,.65); }

/* ───────────────────────────────────────────────────────
 *  SHARE SHEET
 * ─────────────────────────────────────────────────────── */
#xx-share { position:fixed; inset:0; z-index:8500; display:none; align-items:flex-end; justify-content:center; background:rgba(30,28,24,.5); backdrop-filter:blur(6px); }
#xx-share.show { display:flex; }
#xx-share-panel { width:100%; max-width:var(--max-w); background:var(--c-white); padding:2rem 1.75rem 2.5rem; border-top:2px solid var(--c-gold); border-radius:20px 20px 0 0; }
.gs-share-title { font-family:var(--gs-script); font-size:1.25rem; color:var(--c-sage); text-align:center; margin-bottom:1.5rem; }
.xx-share-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; margin-bottom:1.5rem; }
.xx-share-item { display:flex; flex-direction:column; align-items:center; gap:.5rem; padding:.875rem .5rem; border-radius:8px; border:1px solid var(--c-border); background:var(--c-sage-dim); font-size:.5rem; letter-spacing:.06em; color:var(--c-text-m); cursor:pointer; transition:background .2s; }
.xx-share-item:hover { background:rgba(122,155,109,.18); }
.gs-si-ico { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.gs-ico-wa { background:rgba(37,211,102,.1);  color:#25D366; }
.gs-ico-tg { background:rgba(0,136,204,.1);   color:#0088CC; }
.gs-ico-fb { background:rgba(24,119,242,.1);  color:#1877F2; }
.gs-ico-cp { background:var(--c-gold-dim);    color:var(--c-gold); }
.gs-share-close { width:100%; padding:.875rem; border-radius:99px; border:1px solid var(--c-border); background:var(--c-sage-dim); color:var(--c-sage); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; transition:background .2s; }
.gs-share-close:hover { background:rgba(122,155,109,.18); }

/* ───────────────────────────────────────────────────────
 *  FLOAT CONTROLS
 * ─────────────────────────────────────────────────────── */
#xx-flt { position:fixed; right:.875rem; bottom:10%; z-index:500; display:none; flex-direction:column; gap:8px; align-items:center; }
.xx-fb-item { display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.xx-fb { width:44px; height:44px; border-radius:50%; background:var(--c-white); border:1px solid var(--c-border); color:var(--c-sage); display:flex; align-items:center; justify-content:center; box-shadow:0 2px 12px rgba(0,0,0,.08); transition:all .2s; }
.xx-fb:hover { background:var(--c-sage); color:#fff; transform:scale(1.08); }
.xx-fb.active { background:var(--c-sage); color:#fff; }
.xx-fb-lbl { font-size:.375rem; font-weight:300; letter-spacing:.04em; color:var(--c-text-s); }

/* ───────────────────────────────────────────────────────
 *  BOTTOM NAV
 * ─────────────────────────────────────────────────────── */
#xx-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:var(--max-w); z-index:400; height:var(--nav-h); background:rgba(250,250,248,.95); border-top:1px solid var(--c-border); backdrop-filter:blur(14px); }
.xx-nav-inner { display:flex; height:100%; padding-bottom:env(safe-area-inset-bottom,0); }
.xx-nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:.5rem; color:var(--c-text-s); transition:color .2s; padding:0 2px; min-width:0; }
.xx-nav-btn:hover,.xx-nav-btn.active { color:var(--c-sage); }
.xx-nav-btn svg { stroke:currentColor; width:18px; height:18px; flex-shrink:0; }
.xx-nav-btn span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }

/* ───────────────────────────────────────────────────────
 *  REVEAL
 * ─────────────────────────────────────────────────────── */
.xx-reveal { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.xx-reveal.visible { opacity:1; transform:none; }
.d1{transition-delay:.1s;} .d2{transition-delay:.22s;} .d3{transition-delay:.36s;}

/* ───────────────────────────────────────────────────────
 *  GATE — SIGNATURE #1: Diamond Frame + Botanical Corners
 * ─────────────────────────────────────────────────────── */
#xx-gate {
  position:fixed; inset:0; z-index:7000;
  max-width:var(--max-w); margin:0 auto;
  background:var(--c-white);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  transition:opacity .8s ease, transform .8s cubic-bezier(.4,0,.2,1);
}
#xx-gate.xx-gate-out { opacity:0; transform:scale(.96); pointer-events:none; }

/* Botanical corner decorations */
.gs-gate-corner { position:absolute; width:90px; height:90px; pointer-events:none; }
.gs-gc-tl { top:0; left:0; }
.gs-gc-tr { top:0; right:0; }
.gs-gc-bl { bottom:0; left:0; }
.gs-gc-br { bottom:0; right:0; }

/* Gate body */
.gs-gate-body { display:flex; flex-direction:column; align-items:center; padding:1.5rem 2rem; width:100%; max-width:360px; }

/* Diamond frame — Signature foto */
.gs-diamond-frame-wrap { position:relative; width:200px; height:200px; margin-bottom:1.75rem; }
.gs-diamond-border {
  width:200px; height:200px;
  border:2px solid var(--c-gold);
  transform:rotate(45deg);
  position:absolute; top:0; left:0;
  background:var(--c-soft);
}
.gs-diamond-clip {
  position:absolute; top:2px; left:2px; right:2px; bottom:2px;
  overflow:hidden;
}
.gs-diamond-img {
  position:absolute;
  width:141.4%; height:141.4%;
  top:-20.7%; left:-20.7%;
  object-fit:cover;
  transform:rotate(-45deg);
}
.gs-diamond-fallback {
  position:absolute; inset:0;
  background:linear-gradient(135deg, #E8F0E4 0%, #D4E2CE 50%, #C0D4BA 100%);
}

/* Diamond corner ornament dots */
.gs-dm-corner { position:absolute; width:8px; height:8px; }
.gs-dm-corner::before { content:''; position:absolute; inset:0; background:var(--c-gold); transform:rotate(45deg); border-radius:1px; }
.gs-dm-top    { top:-5px;   left:50%; transform:translateX(-50%); }
.gs-dm-right  { right:-5px; top:50%;  transform:translateY(-50%); }
.gs-dm-bottom { bottom:-5px; left:50%; transform:translateX(-50%); }
.gs-dm-left   { left:-5px;  top:50%;  transform:translateY(-50%); }

/* Gate text */
.gs-gate-text { text-align:center; width:100%; }
.gs-gate-arabic { font-family:var(--gs-arabic); font-size:.9375rem; color:var(--c-sage); direction:rtl; margin-bottom:.75rem; line-height:1.7; }
.gs-gate-we { font-size:.4375rem; letter-spacing:.26em; text-transform:uppercase; color:var(--c-text-s); margin-bottom:.875rem; }
.gs-gate-couple-sep { font-size:.625rem; letter-spacing:.18em; color:var(--c-gold); margin:.25rem 0; }
.gs-gate-names-script { font-family:var(--gs-script); font-size:1.875rem; color:var(--c-text); display:flex; align-items:center; justify-content:center; gap:.625rem; flex-wrap:wrap; line-height:1.2; margin-bottom:.5rem; }
.gs-gate-amp { color:var(--c-gold); font-size:1.5rem; }
.gs-gate-rule { display:flex; align-items:center; gap:.875rem; margin:.875rem 0; font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text-s); }
.gs-gate-rule span:first-child,.gs-gate-rule span:last-child { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--c-border)); }
.gs-gate-rule span:last-child { background:linear-gradient(90deg,var(--c-border),transparent); }
.gs-gate-to { font-size:.6875rem; line-height:1.65; color:var(--c-text-m); margin-bottom:1rem; }
.gs-gate-to strong { color:var(--c-sage); }
.gs-gate-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.75rem; border-radius:99px;
  border:1.5px solid var(--c-sage); color:var(--c-sage);
  font-family:var(--gs-sans); font-size:.625rem;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  transition:all .25s;
}
.gs-gate-btn:hover { background:var(--c-sage); color:#fff; }

/* ───────────────────────────────────────────────────────
 *  SECTIONS BASE — all white/soft
 * ─────────────────────────────────────────────────────── */
.gs-sec { padding:3rem 1.5rem 3.5rem; }
.gs-sec-white { background:var(--c-white); color:var(--c-text); }
.gs-sec-soft  { background:var(--c-soft);  color:var(--c-text); }
.gs-sec-sage  { background:var(--c-sage-bg); color:#fff; }

.gs-sec-head { text-align:center; margin-bottom:2.25rem; }
.gs-sec-leaf { display:flex; justify-content:center; margin-bottom:1rem; }
.gs-sec-leaf svg { max-width:180px; }
.gs-sec-label { font-size:.5rem; letter-spacing:.26em; text-transform:uppercase; color:var(--c-gold); margin-bottom:.5rem; font-weight:500; }
.gs-label-white { color:rgba(255,255,255,.65); }
.gs-sec-title { font-family:var(--gs-serif); font-size:1.625rem; font-weight:400; color:var(--c-text); line-height:1.3; }
.gs-sec-title em { font-style:italic; color:var(--c-sage); }
.gs-sec-sage .gs-sec-title { color:#fff; }
.gs-sec-sage .gs-sec-title em { color:rgba(255,255,255,.8); }

/* ───────────────────────────────────────────────────────
 *  HERO
 * ─────────────────────────────────────────────────────── */
.gs-hero { position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; }
.gs-hero-bg { position:absolute; inset:0; background-color:var(--c-soft); background-size:cover; background-position:center; will-change:transform; }
.gs-hero-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(30,28,24,.72) 0%,rgba(30,28,24,.18) 55%,rgba(30,28,24,.32) 100%); }
.gs-hero-leaf { position:absolute; top:.75rem; left:.75rem; width:100px; height:100px; z-index:2; }
.gs-hero-body { position:relative; z-index:2; padding:3rem 2rem 4.5rem; text-align:center; display:flex; flex-direction:column; align-items:center; }
.gs-hero-arabic { font-family:var(--gs-arabic); font-size:1.1875rem; color:rgba(212,176,122,.95); direction:rtl; margin-bottom:.875rem; font-weight:700; text-shadow:0 1px 8px rgba(0,0,0,.4); }
.gs-hero-sub { font-size:.5rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:.75rem; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.gs-hero-script {
  font-family:var(--gs-script); font-size:2.5rem; color:#fff;
  line-height:1.25; margin-bottom:1rem; font-weight:400;
  text-shadow:0 2px 20px rgba(0,0,0,.55), 0 1px 6px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; gap:.125rem;
}
.gs-hero-name-line { display:block; white-space:nowrap; }
.gs-hero-date { display:flex; align-items:center; gap:.875rem; color:rgba(255,255,255,.92); font-size:.5625rem; letter-spacing:.14em; text-shadow:0 1px 6px rgba(0,0,0,.4); }
.gs-hd-line { flex:1; max-width:40px; height:1px; background:rgba(184,151,90,.75); }
.gs-hero-scallop { position:relative; z-index:2; line-height:0; }
.gs-hero-scallop svg { display:block; width:100%; }

/* ───────────────────────────────────────────────────────
 *  OPENING CARD
 * ─────────────────────────────────────────────────────── */
.gs-opening-card { position:relative; padding:2.5rem 1.75rem; border:1px solid var(--c-border); box-shadow:0 4px 24px rgba(0,0,0,.05); text-align:center; max-width:400px; margin:0 auto; }
.gs-op-diamond { display:flex; justify-content:center; margin-bottom:1.25rem; }
.gs-op-arabic { font-family:var(--gs-arabic); font-size:1.0625rem; direction:rtl; color:var(--c-sage); line-height:2; margin-bottom:.625rem; font-weight:100; }
.gs-op-source { font-size:.6875rem; letter-spacing:.1em; color:var(--c-text-m); margin-bottom:1.5rem; }
.gs-op-div { display:flex; align-items:center; gap:.875rem; margin:1rem auto; }
.gs-op-div span { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--c-border)); }
.gs-op-div span:last-child { background:linear-gradient(90deg,var(--c-border),transparent); }
.gs-op-text { font-family:var(--gs-serif); font-style:italic; font-weight:400; font-size:1rem; line-height:2.1; color:var(--c-text); }

/* ───────────────────────────────────────────────────────
 *  COUPLE — Diamond photo frame
 * ─────────────────────────────────────────────────────── */
.gs-couple-sep { display:flex; align-items:center; gap:1rem; margin:2rem 0; }
.gs-couple-sep span { flex:1; height:1px; background:var(--c-border); }
.gs-sep-diamond { flex-shrink:0; }
.gs-couple-label-wrap { margin-bottom:1.25rem; }
.gs-couple-label { display:inline-block; padding:.3rem 1.125rem; border:1px solid var(--c-border); border-radius:99px; font-size:.4375rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-sage); background:var(--c-sage-dim); }

/* Couple card */
.gs-couple-card { padding:.5rem 0; }
.gs-person-row { display:flex; gap:1rem; align-items:flex-start; padding:1rem 0; }
.gs-person-row-rev { flex-direction:row-reverse; }

/* Diamond photo frame */
.gs-person-diamond-wrap { position:relative; flex-shrink:0; width:80px; height:80px; }
.gs-person-diamond {
  width:80px; height:80px;
  clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);
  overflow:hidden;
  background:var(--c-soft);
}
.gs-person-diamond img { width:100%; height:100%; object-fit:cover; }
.gs-person-init {
  width:80px; height:80px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--gs-script); font-size:1.5rem; color:var(--c-sage);
}
/* Gold corner lines on photo */
.gs-photo-corner { position:absolute; width:10px; height:10px; pointer-events:none; }
.gs-photo-corner::before,.gs-photo-corner::after { content:''; position:absolute; background:var(--c-gold); opacity:.7; }
.gs-photo-corner::before { width:100%; height:1px; top:0; left:0; }
.gs-photo-corner::after  { width:1px; height:100%; top:0; left:0; }
.gs-pc-t { top:0;  left:50%; transform:translateX(-50%); }
.gs-pc-r { top:50%; right:0; transform:translateY(-50%) rotate(90deg); }
.gs-pc-b { bottom:0; left:50%; transform:translateX(-50%) rotate(180deg); }
.gs-pc-l { top:50%; left:0; transform:translateY(-50%) rotate(270deg); }

.gs-person-info { flex:1; min-width:0; padding-top:.25rem; }
.gs-person-role { font-size:.4375rem; letter-spacing:.22em; text-transform:uppercase; color:var(--c-gold); margin-bottom:.25rem; }
.gs-person-nick { font-family:var(--gs-script); font-size:1.5rem; color:var(--c-text); line-height:1.2; margin-bottom:.125rem; }
.gs-person-full { font-size:.6875rem; color:var(--c-text-m); margin-bottom:.375rem; }
.gs-person-parents { font-size:.6875rem; line-height:1.75; color:var(--c-text-m); }
.gs-person-parents strong { font-weight:500; color:var(--c-text); }
.gs-person-bio { font-size:.75rem; line-height:1.7; color:var(--c-text-s); margin-top:.375rem; }
.gs-amp-row { display:flex; align-items:center; gap:.875rem; padding:.375rem 0; }
.gs-amp-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--c-border),transparent); }
.gs-amp-script { font-family:var(--gs-script); font-size:1.625rem; color:var(--c-gold); }

/* ───────────────────────────────────────────────────────
 *  LOVE STORY & TIMELINE
 * ─────────────────────────────────────────────────────── */
.gs-story-text { font-family:var(--gs-serif); font-style:italic; font-weight:400; font-size:1rem; line-height:2.2; color:var(--c-text); text-align:center; }
.gs-tl-wrap { position:relative; padding-left:1.75rem; margin-top:1.5rem; }
.gs-tl-spine { position:absolute; left:0; top:0; bottom:0; width:1px; background:linear-gradient(to bottom,var(--c-gold),rgba(184,151,90,.1)); }
.gs-tl-item { position:relative; margin-bottom:2rem; padding-left:1rem; }
.gs-tl-dot { position:absolute; left:-2.35rem; top:.125rem; width:20px; height:20px; display:flex; align-items:center; justify-content:center; background:var(--c-white); border-radius:50%; }
.gs-tl-card { background:var(--c-soft); border:1px solid var(--c-border); border-radius:2px; padding:1rem 1.125rem; }
.gs-tl-date { font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-gold); margin-bottom:.25rem; }
.gs-tl-title { font-family:var(--gs-serif); font-size:1rem; color:var(--c-sage); margin-bottom:.375rem; }
.gs-tl-desc { font-size:.75rem; line-height:1.75; color:var(--c-text-m); }

/* ───────────────────────────────────────────────────────
 *  EVENTS
 * ─────────────────────────────────────────────────────── */
.gs-event-card { position:relative; background:var(--c-white); border:1px solid var(--c-border); padding:1.75rem 1.5rem; margin-bottom:1.5rem; box-shadow:0 2px 16px rgba(0,0,0,.04); overflow:hidden; }
.gs-ev-num { position:absolute; top:.875rem; right:1.25rem; font-family:var(--gs-script); font-size:3.5rem; color:rgba(122,155,109,.08); pointer-events:none; line-height:1; }
.gs-ev-diamond { position:absolute; top:1rem; left:1.25rem; }
.gs-ev-type { font-size:.4375rem; letter-spacing:.26em; text-transform:uppercase; color:var(--c-blue); margin-bottom:.25rem; margin-top:1.125rem; }
.gs-ev-title { font-family:var(--gs-serif); font-size:1.375rem; color:var(--c-sage); margin-bottom:.75rem; }
.gs-ev-rule { width:32px; height:1.5px; background:var(--c-gold); opacity:.5; margin-bottom:1.125rem; }
.gs-ev-row { display:flex; align-items:flex-start; gap:.75rem; margin-bottom:.875rem; }
.gs-ev-ico { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--c-sage-dim); border:1px solid var(--c-border2); display:flex; align-items:center; justify-content:center; color:var(--c-sage); }
.gs-ev-main { font-size:.8125rem; line-height:1.5; color:var(--c-text); }
.gs-ev-sub  { font-size:.6875rem; line-height:1.6; color:var(--c-text-m); margin-top:.125rem; }
.gs-ev-map-btn { display:inline-flex; align-items:center; gap:.5rem; margin-top:.875rem; margin-bottom:1rem; padding:.5rem 1.125rem; background:var(--c-sage); color:#fff; border-radius:99px; font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; transition:background .2s; }
.gs-ev-map-btn:hover { background:#5E7E53; }
.gs-ev-map-embed { width:100%; height:200px; border-radius:2px; overflow:hidden; border:1px solid var(--c-border); margin-top:.5rem; }
.gs-ev-map-embed iframe { width:100%; height:100%; border:0; }

/* ───────────────────────────────────────────────────────
 *  COUNTDOWN SVG RING
 * ─────────────────────────────────────────────────────── */
.xx-cd-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; justify-items:center; }
.xx-cd-cell { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.xx-cd-ring { position:relative; width:68px; height:68px; }
.xx-cd-ring-svg { width:100%; height:100%; transform:rotate(-90deg); }
.xx-cd-ring-bg   { fill:none; stroke:rgba(255,255,255,.2); stroke-width:3.5; }
.xx-cd-ring-fill { fill:none; stroke:rgba(255,255,255,.8); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:213.6; stroke-dashoffset:213.6; transition:stroke-dashoffset .8s ease; }
.xx-cd-inner { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.xx-cd-num { font-family:var(--gs-serif); font-size:1.125rem; font-weight:500; color:#fff; }
.xx-cd-lbl { font-size:.4375rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* ───────────────────────────────────────────────────────
 *  GALLERY — Card Stack (slidesPerView:1.15)
 *  Bukan coverflow & bukan fade — card dengan border gold
 * ─────────────────────────────────────────────────────── */
.gs-gal-wrap { padding:0 .5rem 3.5rem; }
.gs-gallery-swiper { overflow:visible !important; }
.gs-gal-slide { padding:0 .5rem; cursor:pointer; }
.gs-gal-card { background:#fff; box-shadow:0 4px 24px rgba(0,0,0,.08); border-radius:2px; overflow:hidden; transition:transform .3s, box-shadow .3s; }
.swiper-slide-active .gs-gal-card { transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,.13); }
.gs-gal-frame { position:relative; }
.gs-gal-img { width:100%; height:280px; }
.gs-gal-img img { width:100%; height:100%; object-fit:cover; }
/* Gold corner frames on gallery image */
.gs-gal-c { position:absolute; width:20px; height:20px; pointer-events:none; z-index:2; }
.gs-gal-c::before,.gs-gal-c::after { content:''; position:absolute; background:var(--c-gold); }
.gs-gal-c::before { width:100%; height:1.5px; top:0; left:0; }
.gs-gal-c::after  { width:1.5px; height:100%; top:0; left:0; }
.gs-gal-c-tl { top:.75rem;    left:.75rem; }
.gs-gal-c-tr { top:.75rem;    right:.75rem;  transform:scaleX(-1); }
.gs-gal-c-bl { bottom:.75rem; left:.75rem;   transform:scaleY(-1); }
.gs-gal-c-br { bottom:.75rem; right:.75rem;  transform:scale(-1); }
.gs-gal-cap { font-family:var(--gs-script); font-size:.9375rem; color:var(--c-text-m); text-align:center; padding:.75rem 1rem; min-height:36px; display:flex; align-items:center; justify-content:center; }
.gs-gal-pagination { bottom:.75rem !important; }
.gs-gal-prev,.gs-gal-next { width:34px !important; height:34px !important; background:var(--c-sage) !important; border-radius:50% !important; color:#fff; display:flex; align-items:center; justify-content:center; margin-top:-17px !important; box-shadow:0 2px 12px rgba(122,155,109,.35); transition:background .2s; }
.gs-gal-prev:hover,.gs-gal-next:hover { background:#5E7E53 !important; }

/* ───────────────────────────────────────────────────────
 *  RUNDOWN
 * ─────────────────────────────────────────────────────── */
.gs-rundown-list { display:flex; flex-direction:column; }
.gs-rd-item { display:flex; align-items:center; gap:1rem; padding:.875rem 0; border-bottom:1px solid var(--c-border); }
.gs-rd-time { font-family:var(--gs-serif); font-size:.875rem; color:var(--c-sage); min-width:52px; text-align:center; flex-shrink:0; }
.gs-rd-diamond { flex-shrink:0; }
.gs-rd-body { flex:1; }
.gs-rd-title { font-size:.875rem; font-weight:500; color:var(--c-text); margin-bottom:.125rem; }
.gs-rd-desc  { font-size:.75rem; line-height:1.65; color:var(--c-text-m); }

/* ───────────────────────────────────────────────────────
 *  FORMS
 * ─────────────────────────────────────────────────────── */
.gs-form { display:flex; flex-direction:column; gap:1.125rem; }
.gs-fg { display:flex; flex-direction:column; gap:.375rem; }
.gs-fl { font-size:.5rem; letter-spacing:.14em; text-transform:uppercase; color:var(--c-text-s); }
.gs-fi { width:100%; padding:.75rem 1rem; border:1px solid var(--c-border); border-radius:2px; background:var(--c-white); color:var(--c-text); outline:none; transition:border-color .2s; }
.gs-fi:focus { border-color:var(--c-sage); }
.gs-ft { resize:vertical; min-height:80px; }
.xx-attend-row { display:flex; gap:.75rem; }
.xx-attend-opt { flex:1; padding:.75rem .5rem; border:1px solid var(--c-border); border-radius:99px; font-size:.6875rem; color:var(--c-text-m); background:var(--c-sage-dim); transition:all .2s; text-align:center; }
.xx-attend-opt.active { background:var(--c-sage); border-color:var(--c-sage); color:#fff; }
.gs-submit { padding:.875rem; border-radius:99px; background:var(--c-sage); color:#fff; font-size:.6875rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; transition:background .2s, transform .2s; box-shadow:0 4px 16px rgba(122,155,109,.25); }
.gs-submit:hover { background:#5E7E53; transform:translateY(-2px); }
.gs-cancel { flex:1; padding:.75rem; border:1px solid var(--c-border); border-radius:99px; color:var(--c-text-m); font-size:.6875rem; letter-spacing:.08em; transition:border-color .2s; }
.gs-cancel:hover { border-color:var(--c-sage); color:var(--c-sage); }

/* ───────────────────────────────────────────────────────
 *  WISHES
 * ─────────────────────────────────────────────────────── */
.gs-wish-prompt { background:var(--c-white); border:1px solid var(--c-border); padding:1.5rem; display:flex; flex-direction:column; align-items:center; gap:1rem; text-align:center; margin-bottom:1.5rem; }
.gs-wp-leaf { display:flex; justify-content:center; }
.gs-wp-txt { font-family:var(--gs-serif); font-style:italic; font-size:1rem; line-height:1.75; color:var(--c-text); }
.gs-wp-btn { padding:.625rem 1.75rem; border-radius:99px; border:1.5px solid var(--c-sage); color:var(--c-sage); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; transition:all .2s; }
.gs-wp-btn:hover { background:var(--c-sage); color:#fff; }
.gs-wish-form { background:var(--c-white); border:1px solid var(--c-border); padding:1.25rem 1rem; display:flex; flex-direction:column; gap:1rem; margin-bottom:1.5rem; }
.gs-wish-btns { display:flex; gap:.75rem; }
.xx-wish-card { display:flex; gap:.875rem; align-items:flex-start; padding:1rem 0; border-bottom:1px solid var(--c-border); }
.xx-wish-av { width:36px; height:36px; flex-shrink:0; clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%); background:var(--c-sage-dim); display:flex; align-items:center; justify-content:center; font-family:var(--gs-script); font-size:1rem; color:var(--c-sage); }
.xx-wish-body { flex:1; min-width:0; }
.xx-wish-head { display:flex; align-items:center; gap:.625rem; margin-bottom:.375rem; flex-wrap:wrap; }
.xx-wish-name { font-size:.8125rem; font-weight:500; color:var(--c-text); }
.xx-wish-rel { font-size:.5rem; letter-spacing:.08em; text-transform:uppercase; padding:.125rem .5rem; border-radius:99px; background:var(--c-sage-dim); color:var(--c-sage); }
.xx-wish-msg { font-size:.8125rem; line-height:1.75; color:var(--c-text-m); }
.gs-loadmore { width:100%; margin-top:1.25rem; padding:.75rem; border:1px solid var(--c-border); border-radius:99px; color:var(--c-sage); font-size:.6875rem; letter-spacing:.1em; text-transform:uppercase; background:var(--c-sage-dim); transition:background .2s; }
.gs-loadmore:hover { background:rgba(122,155,109,.18); }

/* ───────────────────────────────────────────────────────
 *  GIFT / BANK
 * ─────────────────────────────────────────────────────── */
.gs-gift-note { font-family:var(--gs-serif); font-style:italic; font-size:1rem; line-height:1.85; color:var(--c-text); text-align:center; margin-bottom:1.5rem; }
.gs-tabs { display:flex; gap:.5rem; margin-bottom:1.5rem; }
.gs-tab { flex:1; padding:.625rem .875rem; border:1px solid var(--c-border); border-radius:99px; font-size:.625rem; letter-spacing:.08em; text-transform:uppercase; color:var(--c-text-m); background:var(--c-sage-dim); transition:all .2s; }
.gs-tab.active { background:var(--c-sage); border-color:var(--c-sage); color:#fff; }
.xx-tab-panel { display:block; } .xx-tab-panel.xx-hidden { display:none !important; }
.gs-bank-card { background:var(--c-soft); border:1px solid var(--c-border); padding:1.25rem; margin-bottom:1rem; text-align:center; }
.gs-bank-name { font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; color:var(--c-sage); margin-bottom:.5rem; }
.gs-bank-num { font-family:var(--gs-serif); font-size:1.5rem; color:var(--c-text); letter-spacing:.06em; margin-bottom:.25rem; }
.gs-bank-holder { font-size:.75rem; color:var(--c-text-m); margin-bottom:.875rem; }
.gs-bank-copy { padding:.5rem 1.5rem; border-radius:99px; border:1px solid var(--c-border2); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--c-sage); background:var(--c-sage-dim); transition:all .2s; }
.gs-bank-copy:hover { background:var(--c-sage); color:#fff; border-color:var(--c-sage); }
.gs-addr-card { background:var(--c-soft); border:1px solid var(--c-border); padding:1.25rem; font-size:.875rem; line-height:1.75; color:var(--c-text-m); }

/* ───────────────────────────────────────────────────────
 *  CONTACT / INFO
 * ─────────────────────────────────────────────────────── */
.gs-contact-card { background:var(--c-white); border:1px solid var(--c-border); padding:1.25rem; text-align:center; margin-bottom:1rem; }
.gs-contact-label { font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; color:var(--c-text-s); margin-bottom:.375rem; }
.gs-contact-name { font-family:var(--gs-script); font-size:1.375rem; color:var(--c-sage); margin-bottom:.875rem; }
.gs-contact-wa { display:inline-flex; align-items:center; gap:.5rem; padding:.625rem 1.5rem; border-radius:99px; background:rgba(37,211,102,.08); border:1px solid rgba(37,211,102,.25); color:#1a9e4c; font-size:.6875rem; letter-spacing:.06em; transition:background .2s; }
.gs-contact-wa:hover { background:rgba(37,211,102,.15); }
.gs-info-box { display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.125rem; background:var(--c-white); border:1px solid var(--c-border); margin-top:.875rem; }
.gs-info-ico { font-size:1.25rem; flex-shrink:0; }
.gs-info-title { font-size:.6875rem; font-weight:500; color:var(--c-sage); margin-bottom:.375rem; }
.gs-info-box p { font-size:.8125rem; line-height:1.75; color:var(--c-text-m); }

/* ───────────────────────────────────────────────────────
 *  HASHTAG
 * ─────────────────────────────────────────────────────── */
.gs-hashtag-sec { text-align:center; }
.gs-hashtag-wrap { max-width:340px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:1.125rem; }
.gs-ht-leaf { display:flex; justify-content:center; }
.gs-ht-label { font-family:var(--gs-serif); font-style:italic; font-size:.9375rem; color:var(--c-text-m); }
.gs-ht-tags { display:flex; flex-wrap:wrap; gap:.625rem; justify-content:center; }
.gs-ht-tag { padding:.5rem 1.25rem; border-radius:99px; border:1px solid var(--c-border2); background:var(--c-sage-dim); font-size:.75rem; color:var(--c-sage); transition:all .2s; }
.gs-ht-tag:hover { background:var(--c-sage); color:#fff; border-color:var(--c-sage); }

/* ───────────────────────────────────────────────────────
 *  CLOSING — sage section
 * ─────────────────────────────────────────────────────── */
.gs-closing { text-align:center; }
.gs-closing-scallop { line-height:0; margin-bottom:-1px; }
.gs-seal { display:flex; justify-content:center; margin-bottom:1.5rem; animation:gsSealSpin 18s linear infinite; }
.gs-seal svg { width:80px; height:80px; }
@keyframes gsSealSpin { to { transform:rotate(360deg); } }
.gs-closing-body { padding:0 1.5rem 2rem; }
.gs-closing-arabic { font-family:var(--gs-arabic); font-size:1.125rem; direction:rtl; color:rgba(255,255,255,.88); margin-bottom:1rem; font-weight:700; }
.gs-closing-script {
  font-family:var(--gs-script); font-size:2.375rem; color:#fff;
  margin-bottom:.625rem; font-weight:400; line-height:1.25;
  text-shadow:0 2px 16px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.2);
  display:flex; flex-direction:column; align-items:center; gap:.125rem;
}
.gs-closing-name-line { display:block; white-space:nowrap; }
.gs-closing-sub { font-size:.5rem; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:1.25rem; }
.gs-closing-text { font-family:var(--gs-serif); font-style:italic; font-weight:400; font-size:1rem; line-height:2.1; color:rgba(255,255,255,.9); }
.xx-closing-cta { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; padding:0 1rem 2.5rem; }
.xx-cta-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem; padding:1.25rem .5rem; cursor:pointer; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); border-radius:2px; color:#fff; transition:transform .25s, background .2s; }
.xx-cta-btn:hover { transform:translateY(-2px); background:rgba(255,255,255,.18); }
.xx-cta-ico { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.gs-cta-wa    .xx-cta-ico { background:rgba(37,211,102,.2); color:#25D366; }
.gs-cta-share .xx-cta-ico { background:rgba(184,151,90,.2); color:rgba(255,255,255,.8); }
.gs-cta-copy  .xx-cta-ico { background:rgba(255,255,255,.1); color:rgba(255,255,255,.7); }
.xx-cta-name { font-size:.4375rem; letter-spacing:.14em; text-transform:uppercase; }
.xx-cta-sub  { font-size:.4375rem; opacity:.55; }
.gs-branding { text-align:center; padding:1.5rem 0 2rem; font-size:.5625rem; letter-spacing:.1em; color:rgba(255,255,255,.25); }
.gs-branding a { color:rgba(255,255,255,.25); }

/* ───────────────────────────────────────────────────────
 *  SWIPER CSS (INLINE)
 * ─────────────────────────────────────────────────────── */
.swiper{position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}
.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform,webkit-transform;box-sizing:content-box}
.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}
.swiper-slide img{display:block;width:100%;height:100%;object-fit:cover}
.swiper-pagination{position:absolute;text-align:center;transition:opacity .3s;transform:translateZ(0);z-index:10}
.swiper-pagination-bullet{width:5px;height:5px;display:inline-block;border-radius:50%;background:var(--c-sage);opacity:.3;margin:0 3px;cursor:pointer;transition:opacity .25s}
.swiper-pagination-bullet-active{opacity:1}
.swiper-pagination-bullets.swiper-pagination-horizontal{bottom:10px;left:0;width:100%}
.swiper-button-prev,.swiper-button-next{position:absolute;top:50%;z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:-18px}
.swiper-button-prev{left:8px}.swiper-button-next{right:8px}
.swiper-button-prev::after,.swiper-button-next::after,.swiper-button-prev::before,.swiper-button-next::before{display:none!important;content:none!important;width:0;height:0}
.swiper-button-disabled{opacity:.3;cursor:auto;pointer-events:none}