@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Perpustakaan" (koleksi Hobi)
   Buku cerita bersampul kulit hijau berhias emas yang terbuka saat
   undangan dibuka; halaman kertas tua bernomor bab, huruf awal besar,
   pita pembatas, ornamen fleuron, kartu perpustakaan untuk RSVP.
   ========================================================== */
.t-trbuku {
    --bg: #f4e9d1; --card: #fbf3e2; --ink: #33261b; --muted: #7a6550; --line: rgba(80,58,34,.24);
    --accent: #2f5a45; --accent-2: #a8823f; --on-accent: #f5e9cf; --hero-rgb: 28,52,40; --tint-a: .5; --hero-ink: #f5e9cf;
    --gold: #c9a45a; --gold-2: #ecd59b;
    --deep: #1d2c23; --soft: #e8dbbd; --field: #fffaf0; --ring: rgba(47,90,69,.16);
    --fn: 'IM Fell English', Georgia, serif; --fh: 'IM Fell English SC', Georgia, serif; --fb: 'EB Garamond', Georgia, serif; --fn-s: italic; --fn-k: .95; --fh-w: 400; --fh-ls: .06em;
    --leather: url(../../img/themes/trbuku/kulit.jpg) 0 0 / 300px 300px;
    --paper: url(../../img/themes/trbuku/kertas.jpg) 0 0 / 460px 460px;
    --card-r: 2px; --btn-r: 2px; --cd-r: 2px; --ph-r: 2px;
    --card-sh: 0 1px 0 rgba(80,58,34,.12), 0 16px 28px -24px rgba(50,35,20,.6);
    color-scheme: light;
}
@keyframes bkOpen { 0% { transform: perspective(1600px) rotateY(0); } 100% { transform: perspective(1600px) rotateY(-112deg); } }
@keyframes bkGlint { 0%, 70% { background-position: -150% 0; } 100% { background-position: 250% 0; } }
@keyframes bkRibbon { from { transform: scaleY(0); } to { transform: scaleY(1); } }

body.t-trbuku .page { background: var(--paper), var(--bg); }
.t-trbuku .sec--tint, .t-trbuku .sec--countdown { background: linear-gradient(rgba(120,90,50,.06), rgba(120,90,50,.06)), var(--paper), var(--bg); }
body.t-trbuku .names { color: var(--ink); }
body.t-trbuku .names i { font-family: var(--fn); color: var(--accent-2); }
body.t-trbuku .kicker { font: 400 .78rem/1 var(--fh); letter-spacing: .28em; color: var(--accent-2); }

/* Sampul: papan buku kulit */
.t-trbuku .cover, body.t-trbuku .cover.has-photo { place-items: center; padding: 1.4rem; overflow: hidden; perspective: 1600px; background: var(--paper), var(--bg); color: var(--ink); }
.t-trbuku .bk-first { position: absolute; inset: 1.4rem; display: grid; place-items: center; text-align: center; font: italic 1.3rem/1.5 var(--fn); color: var(--muted); }
.t-trbuku .bk-board { position: relative; z-index: 3; width: min(360px, calc(100vw - 36px)); height: min(640px, calc(100svh - 2.8rem)); display: grid; place-items: center; padding: 2.2rem 1.6rem 2rem 2.4rem; border-radius: 4px 14px 14px 4px; transform-origin: 0 50%;
    background: radial-gradient(120% 80% at 70% 20%, rgba(255,255,255,.08), transparent 60%), var(--leather), #234536; color: var(--gold-2);
    box-shadow: inset 14px 0 18px -10px rgba(0,0,0,.6), inset -2px 0 0 rgba(255,255,255,.08), 0 30px 50px -24px rgba(0,0,0,.7); }
.t-trbuku .bk-board::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 24px; border-radius: 4px 0 0 4px; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 60%, rgba(255,255,255,.06)), repeating-linear-gradient(180deg, transparent 0 22%, var(--gold) 22% 22.6%, transparent 22.6% 23.4%, var(--gold) 23.4% 24%, transparent 24% 76%, var(--gold) 76% 76.6%, transparent 76.6% 77.4%, var(--gold) 77.4% 78%, transparent 78%); }
.t-trbuku .bk-frame { position: absolute; inset: 18px 16px 18px 38px; border: 1.5px solid var(--gold); pointer-events: none; }
.t-trbuku .bk-frame::before { content: ''; position: absolute; inset: 5px; border: .8px solid rgba(201,164,90,.6); }
.t-trbuku .bk-frame i { position: absolute; width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23c9a45a' stroke-width='1.3'%3E%3Cpath d='M2 2c10 0 16 4 16 12M2 2c0 10 4 16 12 16M7 7c5 0 8 2 8 7M7 7c0 5 2 8 7 8'/%3E%3Ccircle cx='3' cy='3' r='2' fill='%23c9a45a'/%3E%3C/svg%3E") center / contain no-repeat; }
.t-trbuku .bk-frame i:nth-child(1) { left: 4px; top: 4px; } .t-trbuku .bk-frame i:nth-child(2) { right: 4px; top: 4px; transform: scaleX(-1); } .t-trbuku .bk-frame i:nth-child(3) { left: 4px; bottom: 4px; transform: scaleY(-1); } .t-trbuku .bk-frame i:nth-child(4) { right: 4px; bottom: 4px; transform: scale(-1); }
.t-trbuku .cover__inner { position: relative; z-index: 2; gap: .5rem; max-width: 280px; }
.t-trbuku .bk-title { font: 400 .78rem/1.4 var(--fh); letter-spacing: .3em; color: var(--gold); }
.t-trbuku .bk-orn { width: 120px; height: 18px; margin: .2rem auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' fill='none' stroke='%23c9a45a' stroke-width='1.2'%3E%3Cpath d='M4 9h40M76 9h40'/%3E%3Cpath d='M60 2c-6 0-10 3-10 7s4 7 10 7 10-3 10-7-4-7-10-7z'/%3E%3Cpath d='M44 9c4-4 8-4 8 0s-4 4-8 0zM76 9c-4-4-8-4-8 0s4 4 8 0z' fill='%23c9a45a' fill-opacity='.3'/%3E%3C/svg%3E") center / contain no-repeat; }
body.t-trbuku .cover .names { color: transparent; background: linear-gradient(105deg, var(--gold) 0 40%, #fff3cf 50%, var(--gold) 60%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; animation: bkGlint 6s ease-in-out 1s infinite; text-shadow: none !important; }
body.t-trbuku .cover .names i { color: var(--gold-2); -webkit-text-fill-color: var(--gold-2); }
body.t-trbuku .cover .kicker, body.t-trbuku .cover__date { color: var(--gold); }
.t-trbuku .cover__to { margin: .4rem 0 .7rem; padding: .7rem .9rem; border-top: 1px solid rgba(201,164,90,.5); border-bottom: 1px solid rgba(201,164,90,.5); }
.t-trbuku .cover__to small { color: rgba(236,213,155,.75); }
.t-trbuku .cover__to strong { font: italic 400 1.45rem var(--fn); color: var(--gold-2); }
body.t-trbuku .cover .ibtn--solid { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #1d2c23; border-color: transparent; }
body.t-trbuku .ibtn { border-color: var(--accent); color: var(--accent); font-family: var(--fh); letter-spacing: .14em; text-transform: none; font-size: .9rem; font-weight: 400; }
body.t-trbuku .ibtn:hover { background: var(--accent); color: var(--on-accent); }
body.t-trbuku .ibtn--solid { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.t-trbuku .cover.is-open { transform: none; opacity: 1; transition: opacity .35s ease .7s; opacity: 0; pointer-events: none; }
.t-trbuku .cover.is-open .bk-board { animation: bkOpen .9s cubic-bezier(.5,0,.3,1) forwards; }
@media (max-height: 740px) { .t-trbuku .cover__to small:last-child { display: none; } .t-trbuku .cover__inner { gap: .3rem; } .t-trbuku .bk-board { padding-block: 1.6rem; } }

/* Pembuka: halaman judul */
.t-trbuku .hero, .t-trbuku .aside, body.t-trbuku .hero.has-photo, body.t-trbuku .aside.has-photo { position: relative; overflow: hidden; min-height: 100svh; place-items: center; padding: 4rem 1.8rem; background: var(--paper), var(--bg); color: var(--ink); }
.t-trbuku .hero::before, .t-trbuku .aside::before { content: ''; position: absolute; inset: 16px; border: 1px solid var(--line); outline: 1px solid var(--line); outline-offset: -6px; pointer-events: none; }
.t-trbuku .hero__inner, .t-trbuku .aside__inner { position: relative; z-index: 2; }
.t-trbuku .bk-plate { position: relative; width: min(190px, 50vw); aspect-ratio: 3 / 4; margin: 0 auto .8rem; padding: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 16px 26px -18px rgba(50,35,20,.6); }
.t-trbuku .bk-plate > i { display: block; width: 100%; height: 100%; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, #e6d8bb; filter: sepia(.18); }
.t-trbuku .bk-plate small { position: absolute; left: 0; right: 0; bottom: -1.6rem; font: italic .82rem var(--fb); color: var(--muted); }
.t-trbuku .bk-ribbon { position: absolute; top: 0; right: 13%; width: 22px; height: 34%; background: linear-gradient(90deg, #7a1f2b, #a8343f 50%, #7a1f2b); transform-origin: 50% 0; animation: bkRibbon 1.2s var(--ease) .4s both; z-index: 3; -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat, conic-gradient(from 135deg at 50% calc(100% - 10px), #000 90deg, transparent 0) 0 100% / 100% 10px no-repeat; mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat, conic-gradient(from 135deg at 50% 0, transparent 90deg, #000 0) 0 100% / 100% 10px no-repeat; }
.t-trbuku .bk-book { font: italic .95rem var(--fb); color: var(--muted); letter-spacing: .04em; }

/* Bagian: bab */
body.t-trbuku .sec__title { color: var(--ink); font-size: clamp(1.8rem, 7.6vw, 2.3rem); }
body.t-trbuku .sec__title::before { content: attr(data-ch); display: block; margin-bottom: .5rem; font: italic 400 .95rem var(--fn); color: var(--accent-2); letter-spacing: .06em; text-transform: none; }
body.t-trbuku .sec__title::after { content: ''; display: block; width: 120px; height: 18px; margin: .6rem auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 18' fill='none' stroke='%23a8823f' stroke-width='1.2'%3E%3Cpath d='M4 9h40M76 9h40'/%3E%3Cpath d='M60 2c-6 0-10 3-10 7s4 7 10 7 10-3 10-7-4-7-10-7z'/%3E%3Cpath d='M44 9c4-4 8-4 8 0s-4 4-8 0zM76 9c-4-4-8-4-8 0s4 4 8 0z' fill='%23a8823f' fill-opacity='.3'/%3E%3C/svg%3E") center / contain no-repeat; }
.t-trbuku .page > .sec { counter-increment: bkpage; }
.t-trbuku .page > .sec:not(.hero)::after { content: '— ' counter(bkpage) ' —'; position: absolute; left: 0; right: 0; bottom: 1.2rem; text-align: center; font: italic .82rem var(--fb); color: var(--muted); }
body.t-trbuku .story::first-letter { float: left; margin: .05em .12em 0 0; font: 400 3.4em/.8 var(--fh); color: var(--accent); }
body.t-trbuku .event { background: var(--card); border: 1px solid var(--line); }
body.t-trbuku .event::before { display: block !important; inset: 6px; border: 1px solid var(--line); border-radius: 0; }
body.t-trbuku .event h3 { color: var(--accent); }
body.t-trbuku .countdown div { background: var(--card); border: 1px solid var(--line); }
body.t-trbuku .countdown b { color: var(--accent); font-family: var(--fh); }
body.t-trbuku .pframe::before { border: 1px solid var(--line); border-radius: 0; inset: -10px; box-shadow: none; }
body.t-trbuku .pframe__arch { border-radius: 0; background: #fff; padding: 6px; }
body.t-trbuku .gallery__item { padding: 6px; background: #fff; }
/* Kartu perpustakaan (RSVP) */
body.t-trbuku .rsvp { position: relative; padding-top: 3.2rem; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(47,90,69,.16) 31px 32px) 0 48px, #fdf8ec; border: 1px solid rgba(80,58,34,.3); }
body.t-trbuku .rsvp::before { content: 'KARTU PERPUSTAKAAN · ' attr(data-no); position: absolute; left: 0; right: 0; top: 0; padding: .6rem; background: var(--accent); color: var(--on-accent); font: 400 .74rem/1 var(--fh); letter-spacing: .2em; text-align: center; }
body.t-trbuku .quote { font-family: var(--fn); }
body.t-trbuku .thanks { color: var(--accent); }
.t-trbuku .sec--closing { position: relative; padding-block: 5rem 5.5rem; }
@media (prefers-reduced-motion: reduce) { body.t-trbuku .cover .names { animation: none !important; } }