/* Bagian tambahan (bersama/fitur.js) — mewarisi warna & font tema.
   Tiap tema boleh mengatur: --fb-aksen (warna aksen), --fb-kartu (latar kartu), --fb-kaca (1 = efek kaca). */
.fb-bagian { padding: clamp(80px, 11vw, 140px) clamp(20px, 5vw, 64px); position: relative; }
.fb-kepala { max-width: 1200px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.fb-label { font: 600 11px/1.8 var(--f-isi, system-ui, sans-serif); letter-spacing: .3em; text-transform: uppercase; opacity: .6; margin-bottom: 14px; }
.fb-judul { font-family: var(--f-judul, Georgia, serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.15; letter-spacing: var(--f-spasi, .04em); text-transform: var(--f-ubah, uppercase); }
.fb-skrip { font-family: var(--f-skrip, cursive); text-transform: none; letter-spacing: 0; font-size: calc(var(--f-skala, 1.4) * 1em); line-height: 1; }
.fb-bagian a { color: inherit; }

/* video */
.fb-layar { max-width: 1000px; margin: 0 auto; aspect-ratio: 16 / 9; border-radius: var(--fb-sudut, 6px); overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .5); }
.fb-layar.tegak { max-width: 380px; aspect-ratio: 9 / 16; }
.fb-layar iframe { width: 100%; height: 100%; border: 0; display: block; }

/* testimoni */
.fb-testi-baris { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.fb-testi { margin: 0; padding: 28px 26px 22px; border-radius: var(--fb-sudut, 6px); background: var(--fb-kartu, rgba(127, 127, 127, .07)); border: 1px solid color-mix(in srgb, currentColor 12%, transparent); display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.fb-testi blockquote { margin: 0; font: italic 400 clamp(19px, 1.7vw, 22px)/1.55 'Cormorant Garamond', Georgia, serif; }
.fb-testi figcaption { display: flex; align-items: center; gap: 12px; }
.fb-testi img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.fb-testi b { display: block; font: 600 14px/1.3 var(--f-isi, system-ui, sans-serif); }
.fb-testi small { display: block; font-size: 12.5px; opacity: .6; margin-top: 2px; }

/* kisah */
.fb-kisah-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.fb-kisah-kartu { display: grid; gap: 6px; text-decoration: none; }
.fb-kisah-foto { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--fb-sudut, 6px); background: color-mix(in srgb, currentColor 8%, transparent); margin-bottom: 8px; }
.fb-kisah-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; display: block; }
.fb-kisah-kartu:hover img { transform: scale(1.04); }
.fb-kisah-kartu b { font-family: var(--f-judul, Georgia, serif); font-weight: 400; font-size: 22px; letter-spacing: var(--f-spasi, .03em); text-transform: var(--f-ubah, none); }
.fb-kisah-kartu small { font-size: 13px; opacity: .6; }
.fb-lagi { text-align: center; margin-top: 30px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.fb-lagi a { border-bottom: 1px solid currentColor; padding-bottom: 3px; text-decoration: none; }

/* promo melayang (kiri bawah, tidak menutupi tombol WhatsApp di kanan) */
.fb-promo { position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: min(380px, calc(100vw - 100px)); display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 42px 14px 18px; border-radius: 14px; background: rgba(20, 19, 18, .92); color: #f4f1ec; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 400 14px/1.5 var(--f-isi, system-ui, sans-serif);
  opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.fb-promo.tampil { opacity: 1; transform: none; }
.fb-promo p { margin: 0; flex: 1 1 180px; }
.fb-promo a { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--fb-promo-tombol, #f4f1ec); color: #141312; font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.fb-promo button { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border: 0; background: none; color: inherit; opacity: .7; cursor: pointer; font-size: 14px; }
.fb-promo button:hover { opacity: 1; }

@media (max-width: 640px) {
  .fb-testi-baris, .fb-kisah-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
  .fb-testi-baris::-webkit-scrollbar, .fb-kisah-grid::-webkit-scrollbar { display: none; }
  .fb-testi { flex: 0 0 84%; scroll-snap-align: start; }
  .fb-kisah-kartu { flex: 0 0 70%; scroll-snap-align: start; }
  .fb-promo { left: 10px; bottom: 10px; max-width: calc(100vw - 86px); }
}
@media (prefers-reduced-motion: reduce) { .fb-promo { transition: none; } }

/* video yang diunggah (diputar langsung) */
.fb-layar-file { position: relative; aspect-ratio: auto; background: #000; }
.fb-layar-file video { display: block; width: 100%; max-height: 82vh; background: #000; }
.fb-layar-file.tegak { max-width: 400px; }
.fb-suara { position: absolute; left: 14px; top: 14px; z-index: 2; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font: 600 12px var(--f-isi, system-ui, sans-serif); letter-spacing: .06em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.fb-suara { display: inline-flex; align-items: center; gap: 7px; }
.fb-suara[hidden] { display: none; }

/* kredit pembuat website di footer */
.kredit-natata { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; opacity: .85; transition: opacity .2s; }
.kredit-natata:hover { opacity: 1; }

/* ---------- ajakan undangan digital ---------- */
.fb-und-isi { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.fb-und-teks .fb-judul { text-align: left; }
.fb-und-sub { opacity: .75; line-height: 1.7; margin: 14px 0 26px; max-width: 46ch; }
.fb-und-tombol { display: inline-block; padding: 14px 26px; border: 1px solid currentColor; border-radius: 999px; text-decoration: none; color: inherit;
  font: 600 12px/1 var(--f-isi, system-ui, sans-serif); letter-spacing: .2em; text-transform: uppercase; }
.fb-und-tombol:hover { opacity: .7; }
.fb-und-foto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fb-und-foto span { aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; border: 4px solid #111; box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .6); }
.fb-und-foto span:nth-child(2) { transform: translateY(-18px); }
.fb-und-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .fb-und-isi { grid-template-columns: 1fr; } .fb-und-teks { text-align: center; } .fb-und-teks .fb-judul { text-align: center; } .fb-und-sub { margin-inline: auto; } }
