@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Rustic Boho" (koleksi Tren)
   Kain linen krem, papan kayu, makramé yang menggantung & berayun,
   rumput pampas & bunga kering, jendela foto lengkung bertali,
   warna terakota, sage, dan cokelat kayu.
   ========================================================== */
.t-trboho {
    --bg: #efe6d8; --card: #f8f2e8; --ink: #4b3a2c; --muted: #85705c; --line: rgba(120,88,58,.26);
    --accent: #b5643f; --accent-2: #7f8f6a; --on-accent: #fff8f0; --hero-rgb: 75,58,44; --tint-a: .35; --hero-ink: #4b3a2c;
    --deep: #3b2c21; --soft: #e2d4c0; --field: #fbf7f0; --ring: rgba(181,100,63,.16);
    --fn: 'Allura', cursive; --fh: 'Cormorant Garamond', Georgia, serif; --fb: 'Karla', sans-serif; --fn-k: 1.15; --fh-w: 600;
    --linen: linear-gradient(rgba(240,232,219,.55), rgba(240,232,219,.55)), url(../../img/themes/trboho/linen.jpg) 0 0 / 220px 220px;
    --wood: linear-gradient(180deg, rgba(255,255,255,.12), transparent 30%, rgba(0,0,0,.18)), repeating-linear-gradient(90deg, #8a5f3d 0 2px, #9c6c45 2px 9px, #8f6340 9px 11px, #a3744c 11px 23px), #94673f;
    --card-r: 6px; --btn-r: 999px; --cd-r: 999px 999px 8px 8px; --ph-r: 999px 999px 6px 6px;
    color-scheme: light;
}
@keyframes bhSway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes bhDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bhGrow { from { transform: scaleY(0); opacity: 0; } to { transform: none; opacity: 1; } }

body.t-trboho .page, .t-trboho .cover, .t-trboho .hero, .t-trboho .aside, body.t-trboho .cover.has-photo, body.t-trboho .hero.has-photo, body.t-trboho .aside.has-photo { background: var(--linen), var(--bg); }
.t-trboho .sec--tint, .t-trboho .sec--countdown { background: linear-gradient(rgba(181,100,63,.05), rgba(181,100,63,.05)), var(--linen), var(--bg); }

/* Makramé menggantung (bh-macrame dari trboho.js) */
.t-trboho .bh-macrame { position: absolute; left: 50%; top: 0; width: min(300px, 78vw); margin-left: calc(min(300px, 78vw) / -2); z-index: 2; pointer-events: none; transform-origin: 50% 0; animation: bhSway 7s ease-in-out infinite; }
.t-trboho .bh-macrame svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-trboho .bh-rod { position: absolute; left: 50%; top: 10px; width: min(330px, 86vw); height: 11px; margin-left: calc(min(330px, 86vw) / -2); border-radius: 6px; background: var(--wood); box-shadow: 0 3px 6px rgba(0,0,0,.25); z-index: 3; }
.t-trboho .bh-pampas { position: absolute; bottom: 0; width: min(150px, 38vw); pointer-events: none; z-index: 1; transform-origin: 50% 100%; }
.t-trboho .bh-pampas svg { display: block; width: 100%; height: auto; overflow: visible; }
.t-trboho .bh-pampas--l { left: -8px; } .t-trboho .bh-pampas--r { right: -8px; transform: scaleX(-1); }
.t-trboho .bh-pampas .bh-plume { transform-origin: 50% 100%; animation: bhSway 6s ease-in-out infinite; }
.t-trboho .bh-pampas .bh-plume:nth-child(2n) { animation-duration: 7.5s; animation-delay: -2s; }
.t-trboho .bh-shelf { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--wood); box-shadow: 0 -2px 6px rgba(0,0,0,.18); z-index: 2; }

/* Sampul */
.t-trboho .cover, body.t-trboho .cover.has-photo { place-items: center; padding: 8.5rem 1.5rem 3rem; overflow: hidden; color: var(--ink); }
.t-trboho .cover__inner { position: relative; z-index: 4; gap: .5rem; max-width: 340px; }
.t-trboho .bh-arch { position: relative; width: min(210px, 54vw); aspect-ratio: 3 / 4; margin: 0 auto .5rem; }
.t-trboho .bh-arch > i { position: absolute; inset: 0; border-radius: 999px 999px 8px 8px; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, linear-gradient(160deg, #d9c2a3, #c49b74); box-shadow: 0 22px 36px -22px rgba(60,40,20,.6); }
.t-trboho .bh-arch::before { content: ''; position: absolute; inset: -9px; border-radius: 999px 999px 10px 10px; border: 2px dashed rgba(181,100,63,.55); }
.t-trboho .bh-arch .bh-sprig { position: absolute; width: 92px; bottom: -18px; left: -36px; transform: rotate(-14deg); }
.t-trboho .bh-arch .bh-sprig + .bh-sprig { left: auto; right: -36px; transform: scaleX(-1) rotate(-14deg); }
.t-trboho .bh-arch .bh-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 400 4.2rem/1 var(--fn); color: rgba(255,250,240,.92); }
.t-trboho .cover .kicker { color: var(--accent); }
.t-trboho .cover .names, .t-trboho .hero .names, .t-trboho .aside .names { color: var(--ink); }
.t-trboho .names i { color: var(--accent); }
.t-trboho .cover__to { margin: .3rem 0 .6rem; padding: .7rem 1rem; border-radius: 4px; background: rgba(255,250,242,.7); border: 1px solid var(--line); }
.t-trboho .cover__to small { color: var(--muted); }
.t-trboho .cover__to strong { font: 600 1.4rem var(--fh); color: var(--ink); }
.t-trboho .cover .bh-arch { animation: trUp 1.1s var(--ease) .2s both; }
.t-trboho .cover .names { animation: trUp 1.2s var(--ease) .45s both; }
.t-trboho .cover .cover__date, .t-trboho .cover .cover__to { animation: trUp 1s var(--ease) .65s both; }
.t-trboho .cover .ibtn { animation: trUp 1s var(--ease) .85s both; }
.t-trboho .cover.is-open { transform: translateY(-100%); opacity: 1; transition: transform 1.2s cubic-bezier(.7,0,.25,1); }
@media (max-height: 760px) { .t-trboho .cover { padding-top: 6.4rem; } .t-trboho .bh-arch { width: min(150px, 40vw); } .t-trboho .cover__to small:last-child { display: none; } .t-trboho .cover__inner { gap: .3rem; } }

/* Pembuka */
.t-trboho .hero, .t-trboho .aside, body.t-trboho .hero.has-photo, body.t-trboho .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; color: var(--ink); place-items: center; padding: 8rem 1.5rem 4rem; }
.t-trboho .hero__inner, .t-trboho .aside__inner { position: relative; z-index: 4; }
body.t-trboho:not(.is-locked) .hero .bh-arch { animation: trUp 1.2s var(--ease) .2s both; }
body.t-trboho:not(.is-locked) .hero .names { animation: trUp 1.3s var(--ease) .45s both; }

/* Bagian */
.t-trboho .sec__title { color: var(--ink); }
.t-trboho .sec__title::before { content: ''; display: block; width: 74px; height: 26px; margin: 0 auto .5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 26' fill='none' stroke='%23b5643f' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M2 13h22M50 13h22'/%3E%3Cpath d='M37 3l4 10-4 10-4-10z' fill='%23b5643f' fill-opacity='.18'/%3E%3Cpath d='M28 13c3-4 6-4 9 0 3-4 6-4 9 0' stroke='%237f8f6a'/%3E%3C/svg%3E") center / contain no-repeat; }
.t-trboho .sec__title::after { content: ''; display: block; width: 120px; height: 8px; margin: .7rem auto 0; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 10px, var(--accent-2) 10px 16px, transparent 16px 20px); -webkit-mask: radial-gradient(circle at 50% 50%, #000 3px, transparent 3.5px) 0 0 / 10px 8px; mask: radial-gradient(circle at 50% 50%, #000 3px, transparent 3.5px) 0 0 / 10px 8px; opacity: .8; }
.t-trboho .event { position: relative; padding: 2rem 1.4rem 1.6rem; border: 1px solid var(--line); background: var(--card); }
.t-trboho .event::after { content: ''; position: absolute; inset: 7px; border: 1px dashed rgba(181,100,63,.35); pointer-events: none; border-radius: 3px; }
.t-trboho .event h3 { color: var(--accent); }
.t-trboho .event__btns { position: relative; z-index: 1; }
.t-trboho .countdown div { background: var(--card); }
.t-trboho .countdown b { color: var(--accent); }
.t-trboho .pframe::before { border: 2px dashed rgba(181,100,63,.5); border-radius: 999px 999px 10px 10px; inset: -9px; box-shadow: none; }
.t-trboho .pframe__arch { border-radius: 999px 999px 8px 8px; }
.t-trboho .gallery__item { border: 6px solid #fbf6ee; box-shadow: 0 14px 26px -18px rgba(60,40,20,.55); }
.t-trboho .ibtn--solid { background: var(--accent); }
.t-trboho .ibtn--solid::after { display: none; }
.t-trboho .sec--closing { position: relative; overflow: hidden; padding-block: 8rem 6rem; }
.t-trboho .sec--closing > :not(.bh-deco) { position: relative; z-index: 4; }
.t-trboho .bh-deco { position: absolute; inset: 0; pointer-events: none; }
.t-trboho .ifoot { background: var(--deep); }
@media (prefers-reduced-motion: reduce) { .t-trboho .bh-macrame, .t-trboho .bh-plume { animation: none !important; } }