/* tpl-batak.css — LAPISAN adat BATAK.
   Karakter: merah darah, hitam, putih tulang, emas. Motif digambar sendiri:
   gorga (spiral geometris bersudut), ulos (pita tenun bergaris rapat),
   zigzag berulang, dan kepala kerbau yang disederhanakan jadi bentuk geometris.
   Semua ornamen = SVG data-URI internal (mask-image + currentColor) atau
   gradien CSS murni, jadi tidak ada URL luar / Google Fonts (aman CSP).
   xmlns ditulis `http%3A//...` (percent-encode titik dua) supaya berkas tidak
   memuat satu pun URL luar, tapi SVG tetap sah saat di-decode peramban. */

/* Palet lokal + bahan ornamen. Warna tema tetap lewat var(--...) bawaan. */
.inv.tpl-batak{
  --batak-merah:#a01b1b;
  --batak-hitam:#140d0b;
  --batak-putih:#f7f1e6;
  --batak-emas:#c9a227;
  /* Emas TEKS dipisah dari emas ornamen: #c9a227 di latar krem hanya 2,19:1. */
  --batak-emas-teks:#7d6212;
  /* ulos: pita tenun, periode 12px supaya animasi mengalir mulus */
  --batak-ulos:repeating-linear-gradient(90deg,
    var(--batak-merah) 0 3px,var(--batak-hitam) 3px 5px,
    var(--batak-emas) 5px 6px,var(--batak-putih) 6px 9px,
    var(--batak-hitam) 9px 12px);
  /* gorga: spiral kotak melingkar ke dalam */
  --batak-gorga:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 10h44v44H18V18h28v28H26v-20h12' fill='none' stroke='%23000' stroke-width='4'/%3E%3C/svg%3E");
  /* zigzag: dua puncak per ubin 20px, ujung rata agar repeat-x menyambung */
  --batak-zigzag:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 40 12'%3E%3Cpath d='M0 11 5 1 10 11 15 1 20 11 25 1 30 11 35 1 40 11' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");
  /* kepala kerbau: tanduk melengkung simetris + moncong segitiga */
  --batak-kerbau:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 64 40'%3E%3Cg fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M32 38V23'/%3E%3Cpath d='M32 23C28 11 20 4 8 4c6 5 9 11 10 19'/%3E%3Cpath d='M32 23c4-12 12-19 24-19-6 5-9 11-10 19'/%3E%3C/g%3E%3Cpath d='M32 36l-5-11h10z' fill='%23000'/%3E%3C/svg%3E");
  background:var(--background);
}

/* ---------- cover: bingkai gorga + pita ulos kepala & tumit ---------- */
.inv.tpl-batak .cover{
  background-color:var(--batak-hitam);
  background-image:var(--batak-ulos),var(--batak-ulos);
  background-repeat:no-repeat,no-repeat;
  background-size:100% 12px,100% 12px;
  background-position:top,bottom;
}
.inv.tpl-batak .cover__inner{
  border:2px solid var(--batak-emas);
  outline:1px solid var(--batak-merah);outline-offset:7px;
  padding:2.6rem 1.4rem;max-width:30rem;
  background:color-mix(in srgb,var(--batak-hitam) 55%,transparent);
  animation:batakMasuk 1s cubic-bezier(.2,.8,.2,1) both;
}
/* sudut gorga: dua ukiran emas yang berputar pelan, arah berlawanan */
.inv.tpl-batak .cover__inner::before,
.inv.tpl-batak .cover__inner::after{
  content:'';position:absolute;top:9px;width:36px;height:36px;
  background-color:var(--batak-emas);
  -webkit-mask:var(--batak-gorga) center/contain no-repeat;
  mask:var(--batak-gorga) center/contain no-repeat;
  animation:batakGorga 18s linear infinite;
}
.inv.tpl-batak .cover__inner::before{left:9px}
.inv.tpl-batak .cover__inner::after{right:9px;animation-direction:reverse}
.inv.tpl-batak .cover__names{color:var(--batak-putih);letter-spacing:.05em}
.inv.tpl-batak .cover__date{color:var(--batak-emas);letter-spacing:.32em;text-transform:uppercase;font-size:.78rem}
.inv.tpl-batak .cover__to{color:color-mix(in srgb,var(--batak-putih) 72%,transparent);letter-spacing:.14em}
.inv.tpl-batak .cover__guestname{color:var(--batak-putih)}
.inv.tpl-batak .cover__guest .rule{background:var(--batak-emas)}
.inv.tpl-batak .cover .orn{color:var(--batak-emas)}

/* ---------- pita ulos di kepala & tumit tiap section ---------- */
.inv.tpl-batak .sec::before,
.inv.tpl-batak .sec::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  width:min(100%,44rem);height:9px;background:var(--batak-ulos);
  opacity:.9;pointer-events:none;
  animation:batakUlos 3s linear infinite;
}
.inv.tpl-batak .sec::before{top:0}
.inv.tpl-batak .sec::after{bottom:0}

/* kepala section: kepala kerbau + garis zigzag emas */
.inv.tpl-batak .sec__head{position:relative;padding-top:3rem}
.inv.tpl-batak .sec__head::before{
  content:'';position:absolute;top:0;left:50%;margin-left:-24px;width:48px;height:30px;
  background-color:var(--batak-merah);
  -webkit-mask:var(--batak-kerbau) center/contain no-repeat;
  mask:var(--batak-kerbau) center/contain no-repeat;
  animation:batakKerbau 4s ease-in-out infinite;
}
.inv.tpl-batak .sec__head::after{
  content:'';position:absolute;top:35px;left:50%;margin-left:-60px;width:120px;height:10px;
  background-color:var(--batak-emas);
  -webkit-mask-image:var(--batak-zigzag);mask-image:var(--batak-zigzag);
  -webkit-mask-size:20px 10px;mask-size:20px 10px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  animation:batakZigzag 1.8s ease-in-out infinite alternate;
}
.inv.tpl-batak .eyebrow{color:var(--batak-merah);letter-spacing:.3em}
.inv.tpl-batak .sec__num{color:var(--batak-emas)}
.inv.tpl-batak .rule{background:var(--batak-emas);opacity:.9}
.inv.tpl-batak .prose{opacity:1}

/* ---------- hero ---------- */
.inv.tpl-batak .hero__photo{
  border-radius:0;border:2px solid var(--batak-emas);padding:8px;
  background:var(--batak-hitam);box-shadow:0 0 0 1px var(--batak-merah);
}
.inv.tpl-batak .hero__names{letter-spacing:.04em}
.inv.tpl-batak .hero__date{color:var(--batak-merah);letter-spacing:.3em;text-transform:uppercase;font-size:.78rem}
.inv.tpl-batak .hero__datelong{color:var(--muted)}

/* ---------- kutipan & hitung mundur: blok gelap bertepi emas ---------- */
.inv.tpl-batak .sec--quote{
  background:color-mix(in srgb,var(--batak-merah) 12%,var(--background));
  border-top:1px solid var(--batak-emas);border-bottom:1px solid var(--batak-emas);
}
.inv.tpl-batak .quote{font-family:var(--font-heading)}
.inv.tpl-batak .quote cite{color:var(--batak-merah)}
.inv.tpl-batak .sec--countdown{background:var(--batak-hitam)}
.inv.tpl-batak .sec--countdown .eyebrow{color:var(--batak-emas)}
.inv.tpl-batak .count__unit{
  border-radius:0;border:1px solid var(--batak-emas);
  background:color-mix(in srgb,var(--batak-merah) 22%,var(--batak-hitam));
}
.inv.tpl-batak .count__num{color:var(--batak-putih)}
.inv.tpl-batak .count__lbl{color:var(--batak-emas)}
.inv.tpl-batak .count__done{color:var(--batak-putih)}

/* ---------- mempelai ---------- */
.inv.tpl-batak .couple__photo{
  border-radius:0;border:1px solid var(--batak-emas);
  outline:1px solid var(--batak-merah);outline-offset:4px;
  padding:6px;background:var(--batak-hitam);box-shadow:none;
}
.inv.tpl-batak .couple__name{letter-spacing:.03em}
.inv.tpl-batak .couple__nick{color:var(--batak-merah)}
.inv.tpl-batak .couple__ig{color:var(--batak-merah)}
.inv.tpl-batak .couple__amp{color:var(--batak-emas-teks);font-style:normal}

/* ---------- acara: kartu hitam bertepi emas, zigzag berdenyut di atas ---------- */
.inv.tpl-batak .event{
  border-radius:0;border:1px solid var(--batak-emas);background:var(--batak-hitam);
  color:var(--batak-putih);box-shadow:none;position:relative;overflow:hidden;
  padding-top:2.2rem;
}
.inv.tpl-batak .event::before{
  content:'';position:absolute;top:0;left:0;right:0;height:10px;
  background-color:var(--batak-emas);
  -webkit-mask-image:var(--batak-zigzag);mask-image:var(--batak-zigzag);
  -webkit-mask-size:20px 10px;mask-size:20px 10px;
  -webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
  animation:batakZigzag 1.8s ease-in-out infinite alternate;
}
.inv.tpl-batak .event__title{color:var(--batak-emas)}
.inv.tpl-batak .event__addr{color:color-mix(in srgb,var(--batak-putih) 62%,transparent)}

/* ---------- galeri ---------- */
.inv.tpl-batak .gallery__item{
  border-radius:0;border:1px solid var(--batak-emas);padding:4px;background:var(--batak-hitam);
}
.inv.tpl-batak .gallery__item img{border-radius:0}
.inv.tpl-batak .gallery__item:hover{transform:none;filter:brightness(1.06)}

/* ---------- hadiah ---------- */
.inv.tpl-batak .gift{
  border-radius:0;border:1px solid var(--batak-emas);background:var(--batak-hitam);
  color:var(--batak-putih);box-shadow:none;
}
.inv.tpl-batak .gift__kind{color:color-mix(in srgb,var(--batak-putih) 60%,transparent)}
.inv.tpl-batak .gift__provider{color:var(--batak-emas)}
.inv.tpl-batak .gift__number{color:var(--batak-putih)}
.inv.tpl-batak .gift__holder{color:color-mix(in srgb,var(--batak-putih) 70%,transparent)}

/* ---------- ucapan: kartu putih tulang, punggung merah ala ulos ---------- */
.inv.tpl-batak .wish{
  border-radius:0;background:var(--batak-putih);
  border:1px solid var(--batak-hitam);border-left:5px solid var(--batak-merah);
  color:var(--batak-hitam);
}
.inv.tpl-batak .wish__name{color:var(--batak-merah)}
.inv.tpl-batak .wish__meta{color:color-mix(in srgb,var(--batak-hitam) 55%,transparent)}
.inv.tpl-batak .form--wish input,
.inv.tpl-batak .form--wish textarea{
  border-radius:0;border:1px solid var(--batak-emas);
  background:var(--batak-hitam);color:var(--batak-putih);
}
.inv.tpl-batak .form--wish input::placeholder,
.inv.tpl-batak .form--wish textarea::placeholder{color:color-mix(in srgb,var(--batak-putih) 45%,transparent)}

/* ---------- tombol, kaki, musik, lightbox ---------- */
.inv.tpl-batak .btn{border-radius:0;letter-spacing:.14em}
.inv.tpl-batak .btn--open{background:var(--batak-merah);color:var(--batak-putih);border:1px solid var(--batak-emas)}
.inv.tpl-batak .btn--ghost{border-color:var(--batak-emas);color:var(--batak-emas-teks)}
/* Kartu acara & hadiah berlatar hitam: di sana emas gelap hanya 3,32:1. */
.inv.tpl-batak .event .btn--ghost,
.inv.tpl-batak .gift .btn--ghost,
.inv.tpl-batak .sec--countdown .btn--ghost{color:var(--batak-emas)}
.inv.tpl-batak .sec--footer{border-top:1px solid var(--batak-emas)}
.inv.tpl-batak .footer__names{color:var(--batak-merah);letter-spacing:.04em}
.inv.tpl-batak .share .btn{border-radius:0}
.inv.tpl-batak .music{
  border-radius:0;border-color:var(--batak-emas);
  background:color-mix(in srgb,var(--batak-hitam) 85%,transparent);
}
.inv.tpl-batak .music__toggle{border-radius:0;background:var(--batak-merah);color:var(--batak-putih)}
.inv.tpl-batak .lightbox{background:rgba(20,13,11,.96)}
.inv.tpl-batak .lightbox img{border-radius:0;border:1px solid var(--batak-emas)}
.inv.tpl-batak .orn{color:var(--batak-emas)}
.inv.tpl-batak .orn-corner{color:var(--batak-merah);opacity:.7}

/* ---------- gerak: tiap animasi punya sifat berbeda ---------- */
/* gorga: ukiran berputar pelan */
@keyframes batakGorga{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* ulos: pita tenun mengalir 2 periode (12px x 2) agar tanpa lompatan */
@keyframes batakUlos{from{background-position:0 0}to{background-position:24px 0}}
/* zigzag: berdenyut, bukan bergeser */
@keyframes batakZigzag{from{opacity:.4;transform:scaleX(.94)}to{opacity:1;transform:scaleX(1)}}
/* masuk: turun lurus dari atas, khidmat */
@keyframes batakMasuk{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* kerbau: tarikan napas halus */
@keyframes batakKerbau{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.1);opacity:1}}

/* ---------- responsif: ornamen tetap terpusat di 390px maupun 1440px ---------- */
@media (min-width:900px){
  .inv.tpl-batak .cover__inner{padding:3.2rem 2.2rem;max-width:34rem}
  .inv.tpl-batak .cover__inner::before,
  .inv.tpl-batak .cover__inner::after{width:44px;height:44px}
  .inv.tpl-batak .sec::before,
  .inv.tpl-batak .sec::after{height:11px}
  .inv.tpl-batak .sec__head{padding-top:3.4rem}
}
@media (max-width:420px){
  .inv.tpl-batak .cover__inner{padding:2rem 1rem;outline-offset:5px}
  .inv.tpl-batak .cover__inner::before,
  .inv.tpl-batak .cover__inner::after{width:26px;height:26px;top:6px}
  .inv.tpl-batak .cover__inner::before{left:6px}
  .inv.tpl-batak .cover__inner::after{right:6px}
  .inv.tpl-batak .sec__head::after{width:96px;margin-left:-48px}
}

/* ---------- hormati preferensi pengguna ---------- */
@media (prefers-reduced-motion:reduce){
  .inv.tpl-batak .cover__inner,
  .inv.tpl-batak .cover__inner::before,
  .inv.tpl-batak .cover__inner::after,
  .inv.tpl-batak .sec::before,
  .inv.tpl-batak .sec::after,
  .inv.tpl-batak .sec__head::before,
  .inv.tpl-batak .sec__head::after,
  .inv.tpl-batak .event::before,
  .inv.tpl-batak .btn--open{animation:none}
}