/* =====================================================
   TEMA PERNIKAHAN: font + hiasan biru
   Taruh file ini di folder yang sama dengan style_pico_biru.css
   dan panggil SETELAH file itu di HTML (lihat petunjuk di chat).
   File ini hanya menimpa font dan menambah hiasan.
   Tata letak, ukuran foto, dan bentuk hati TIDAK diubah.
   ===================================================== */


/* =====================================================
   1. FONT & WARNA TAMBAHAN (ubah di sini)
   ===================================================== */
:root {
  /* Font */
  --script: 'Great Vibes', cursive;                    /* tulisan tangan: nama pengantin */
  --display: 'Cinzel', Georgia, serif;                 /* judul bagian (huruf besar anggun) */
  --serif: 'Playfair Display', Georgia, serif;         /* judul kecil, angka, kutipan */
  --sans: 'Montserrat', system-ui, sans-serif;         /* teks biasa */

  /* Warna emas lembut untuk garis hiasan.
     Mau full biru? Ganti jadi #4f86bd.
     (Catatan: pembatas di --divider di bawah memakai kode warna yang sama: %23c8a96a) */
  --gold: #c8a96a;

  /* Titik-titik cahaya kecil (efek bintang) untuk cover & hero */
  --sparkle:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.55) 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.45) 2px, transparent 3px),
    radial-gradient(circle at 70% 38%, rgba(255,255,255,.35) 1.5px, transparent 2.5px),
    radial-gradient(circle at 24% 62%, rgba(255,255,255,.40) 2px, transparent 3px),
    radial-gradient(circle at 90% 74%, rgba(255,255,255,.50) 1.5px, transparent 2.5px),
    radial-gradient(circle at 8% 88%, rgba(255,255,255,.35) 2px, transparent 3px),
    radial-gradient(circle at 48% 92%, rgba(255,255,255,.40) 1.5px, transparent 2.5px);

  /* Pembatas kecil (garis + belah ketupat) di bawah judul */
  --divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='14' viewBox='0 0 180 14'%3E%3Cg stroke='%23c8a96a' fill='none'%3E%3Cline x1='0' y1='7' x2='72' y2='7'/%3E%3Cline x1='108' y1='7' x2='180' y2='7'/%3E%3Cpath d='M90 1L96 7L90 13L84 7Z'/%3E%3C/g%3E%3Cg fill='%23c8a96a'%3E%3Ccircle cx='77' cy='7' r='1.6'/%3E%3Ccircle cx='103' cy='7' r='1.6'/%3E%3C/g%3E%3C/svg%3E");

  /* Hiasan daun/sulur biru di pojok kartu: kiri-atas dan kanan-bawah */
  --vine-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none'%3E%3Cg stroke='%232f6fa8' stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M4 116C4 60 40 20 116 4'/%3E%3Cpath d='M4 116C22 72 52 42 100 24'/%3E%3C/g%3E%3Cg fill='%234f86bd' fill-opacity='.28'%3E%3Cellipse cx='9' cy='92' rx='10' ry='4' transform='rotate(-80 9 92)'/%3E%3Cellipse cx='22' cy='64' rx='10' ry='4' transform='rotate(-60 22 64)'/%3E%3Cellipse cx='44' cy='40' rx='10' ry='4' transform='rotate(-40 44 40)'/%3E%3Cellipse cx='74' cy='20' rx='10' ry='4' transform='rotate(-20 74 20)'/%3E%3C/g%3E%3Ccircle cx='4' cy='116' r='2.5' fill='%23c8a96a'/%3E%3C/svg%3E");

  --vine-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none'%3E%3Cg transform='rotate(180 60 60)'%3E%3Cg stroke='%232f6fa8' stroke-width='1' stroke-opacity='.55'%3E%3Cpath d='M4 116C4 60 40 20 116 4'/%3E%3Cpath d='M4 116C22 72 52 42 100 24'/%3E%3C/g%3E%3Cg fill='%234f86bd' fill-opacity='.28'%3E%3Cellipse cx='9' cy='92' rx='10' ry='4' transform='rotate(-80 9 92)'/%3E%3Cellipse cx='22' cy='64' rx='10' ry='4' transform='rotate(-60 22 64)'/%3E%3Cellipse cx='44' cy='40' rx='10' ry='4' transform='rotate(-40 44 40)'/%3E%3Cellipse cx='74' cy='20' rx='10' ry='4' transform='rotate(-20 74 20)'/%3E%3C/g%3E%3Ccircle cx='4' cy='116' r='2.5' fill='%23c8a96a'/%3E%3C/g%3E%3C/svg%3E");
}


/* =====================================================
   2. TEKS UMUM
   ===================================================== */
body {
  font-weight: 300;
  line-height: 1.8;

  /* Latar halaman: biru muda dengan "awan" biru lembut di beberapa sisi */
  background:
    radial-gradient(circle at 8% 4%,  rgba(79, 134, 189, .22), transparent 38%),
    radial-gradient(circle at 95% 38%, rgba(47, 111, 168, .16), transparent 42%),
    radial-gradient(circle at 5% 78%,  rgba(79, 134, 189, .18), transparent 40%),
    linear-gradient(180deg, #e4eefa 0%, #eaf2fb 50%, #dce8f6 100%);
}

/* Judul bagian: huruf besar berjarak, ala undangan cetak */
h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sub {
  font-size: 0.95rem;
}

/* Tombol: huruf besar kecil berjarak */
.btn {
  font: 400 0.8rem var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.9rem 2rem;
}


/* =====================================================
   3. HIASAN KARTU (setiap <section>)
   - bingkai tipis emas di dalam kartu
   - daun biru di pojok kiri-atas & kanan-bawah
   - sorotan biru lembut di dua pojok
   ===================================================== */
section {
  position: relative;
  background-image:
    radial-gradient(circle at 100% 0, rgba(79, 134, 189, .10), transparent 42%),
    radial-gradient(circle at 0 100%, rgba(79, 134, 189, .10), transparent 42%);
}

/* Bingkai tipis */
section::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(200, 169, 106, .55);
  border-radius: 20px;
  pointer-events: none;      /* tidak menghalangi klik */
}

/* Daun di pojok */
section::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  background:
    var(--vine-tl) top 14px left 14px / 110px no-repeat,
    var(--vine-br) bottom 14px right 14px / 110px no-repeat;
}

/* Pembatas hiasan di bawah judul bagian */
section > h2::after,
#cover h1::after,
#hero h1::after {
  content: "";
  display: block;
  width: 180px;
  height: 14px;
  margin: 0.8rem auto 0;
  background: var(--divider) center / contain no-repeat;
}
section > h2::after {
  margin-bottom: 1rem;
}


/* =====================================================
   4. COVER (layar pembuka)
   Biru tua berlapis + titik cahaya + bingkai emas.
   Foto contoh (picsum) dihapus.
   ===================================================== */
#cover {
  background:
    var(--sparkle),
    radial-gradient(circle at 50% 0%, rgba(79, 134, 189, .55), transparent 60%),
    linear-gradient(180deg, #0b2a4a 0%, #123b63 55%, #0a2340 100%);
}

/* Bingkai ganda di tepi layar */
#cover::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(200, 169, 106, .65);
  border-radius: 22px;
  pointer-events: none;
}
#cover::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 16px;
  pointer-events: none;
}

/* Nama pengantin: tulisan tangan */
#cover h1,
#hero h1 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.6rem, 15vw, 7rem);
  line-height: 1.05;
  letter-spacing: 0;
}

/* Teks kecil: huruf besar, jarak lebar */
#cover p,
#hero p {
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

#cover .to {
  font-family: var(--sans);
  font-size: 0.95rem;
}

/* Nama tamu: tulisan tangan */
#cover .to b {
  font-family: var(--script);
  font-weight: 400;
  font-size: 2.6rem;
  margin-top: 0.4rem;
}


/* =====================================================
   5. HERO
   ===================================================== */
#hero {
  background:
    var(--sparkle),
    linear-gradient(180deg, rgba(8, 38, 72, .62), rgba(12, 60, 110, .45) 50%, rgba(8, 38, 72, .80)),
    url('latar_biru_tua.png') center / cover;
}

/* Bingkai putih tipis (bukan emas, supaya kontras dengan foto) */
#hero::before {
  inset: 14px;
  border-color: rgba(255, 255, 255, .45);
}

/* Hilangkan daun biru di hero (tidak kelihatan di atas foto) */
#hero::after {
  background: none;
}

/* Hitung mundur */
#count div {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, .06);
}
#count b {
  letter-spacing: 0;
}


/* =====================================================
   6. PENGANTAR & MEMPELAI
   ===================================================== */
#intro blockquote {
  font: italic 400 1.2rem/1.8 var(--serif);
}

.person h2 {
  font-size: 1.2rem;
  color: var(--accent);
}

.person h3 {
  font-size: 1.7rem;
}

/* Tanda "&": tulisan tangan */
.amp {
  font-family: var(--script);
  font-style: normal;
  font-weight: 400;
  font-size: 4.5rem;
}


/* =====================================================
   7. TEMPAT ACARA (font lama 'Cormorant' diganti)
   ===================================================== */
.venue-label {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: 0.3em;
}

.venue-name {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}

.venue-address {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.12em;
}

.facility-item {
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.14em;
}

/* Garis emas tipis di atas kotak waktu acara */
.event-box {
  border-top: 2px solid var(--gold);
}


/* =====================================================
   8. OUR STORY
   ===================================================== */
#story .story time {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

#story .story article p {
  font-size: 0.95rem;
}


/* =====================================================
   9. FOOTER
   ===================================================== */
footer h3 {
  font-family: var(--script);
  font-weight: 400;
  font-size: 3rem;
}


/* =====================================================
   10. TAMPILAN HP
   ===================================================== */
@media (max-width: 759px) {
  /* Daun di pojok dikecilkan supaya tidak menutupi teks */
  section::after {
    background:
      var(--vine-tl) top 12px left 12px / 70px no-repeat,
      var(--vine-br) bottom 12px right 12px / 70px no-repeat;
  }

  #cover::before { inset: 12px; }
  #cover::after  { inset: 19px; }

  .amp { font-size: 3.8rem; }
}