@import url("_tren.css");
/* ==========================================================
   DInvite — Tema "Secangkir Kopi" (koleksi Hobi)
   Kedai kopi yang hangat: papan menu kapur berbingkai kayu, cangkir
   latte art dilihat dari atas (foto = permukaan kopi), uap mengepul,
   cincin noda kopi, jadwal acara bergaya menu, struk kasir.
   ========================================================== */
.t-trkopi {
    --bg: #f1e5d2; --card: #fbf4e8; --ink: #3b2619; --muted: #82664f; --line: rgba(74,46,31,.22);
    --accent: #a8673d; --accent-2: #6f4a33; --on-accent: #fff6ea; --hero-rgb: 38,30,25; --tint-a: .55; --hero-ink: #f6eadb;
    --deep: #2a1c14; --soft: #e5d3ba; --field: #fffaf2; --ring: rgba(168,103,61,.18);
    --fn: 'Playfair Display', Georgia, serif; --fh: 'Playfair Display', Georgia, serif; --fb: 'Work Sans', sans-serif; --fn-s: italic; --fn-w: 600; --fn-k: .92; --fh-w: 600;
    --chalk: url(../../img/themes/trkopi/chalk.jpg) 0 0 / 420px 420px;
    --wood: linear-gradient(90deg, rgba(0,0,0,.15), transparent 20%, transparent 80%, rgba(0,0,0,.15)), repeating-linear-gradient(0deg, #6b4a32 0 3px, #7a553a 3px 9px, #694830 9px 12px, #82603f 12px 22px);
    --stain: radial-gradient(circle, transparent 54%, rgba(120,72,40,.16) 56%, rgba(120,72,40,.08) 62%, transparent 64%);
    --card-r: 4px; --btn-r: 999px; --cd-r: 6px; --ph-r: 6px;
    color-scheme: light;
}
@keyframes kpSteam { 0% { stroke-dashoffset: 1; opacity: 0; transform: translateY(8px); } 30% { opacity: .75; } 100% { stroke-dashoffset: -1; opacity: 0; transform: translateY(-26px); } }
@keyframes kpSpin { to { transform: rotate(360deg); } }
@keyframes kpPour { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes kpWrite { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

body.t-trkopi .page { background: var(--stain) 82% 14% / 150px 150px no-repeat, var(--stain) 8% 62% / 110px 110px no-repeat, var(--bg); }
.t-trkopi .sec--tint, .t-trkopi .sec--countdown { background: repeating-linear-gradient(90deg, rgba(74,46,31,.035) 0 2px, transparent 2px 6px), #eadac2; }

/* Papan kapur (sampul, pembuka, penutup) */
.t-trkopi .cover, .t-trkopi .hero, .t-trkopi .aside, .t-trkopi .sec--closing,
body.t-trkopi .cover.has-photo, body.t-trkopi .hero.has-photo, body.t-trkopi .aside.has-photo { overflow: hidden; background: var(--chalk), #2a2c29; color: #f3eee4; }
.t-trkopi .hero, .t-trkopi .sec--closing { position: relative; }
.t-trkopi .cover::before, .t-trkopi .hero::before, .t-trkopi .aside::before, .t-trkopi .sec--closing::before { content: ''; display: block !important; position: absolute; inset: 0; border: 14px solid #6c4931; border-image: repeating-linear-gradient(35deg, #6b4a32 0 5px, #80593c 5px 12px, #6f4c33 12px 15px, #8b6544 15px 24px) 14; box-shadow: inset 0 0 0 1px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,220,170,.08), inset 0 0 44px rgba(0,0,0,.5); pointer-events: none; z-index: 5; border-radius: 0; }
body.t-trkopi .cover .names, body.t-trkopi .hero .names, body.t-trkopi .aside .names, body.t-trkopi .sec--closing .names { color: #fbf6ec; text-shadow: 0 0 1px rgba(255,255,255,.4) !important; }
body.t-trkopi .cover .kicker, body.t-trkopi .hero .kicker, body.t-trkopi .aside .kicker { color: #e8c48f; }
body.t-trkopi .cover__date, body.t-trkopi .hero__date, body.t-trkopi .aside__date { color: #f3eee4; }
body.t-trkopi .names i { font-family: 'Caveat', cursive; font-style: normal; color: #e8c48f; font-size: .62em; }
.t-trkopi .kp-board-t { font: 700 1.7rem/1 'Caveat', cursive; color: #f3eee4; letter-spacing: .02em; }
.t-trkopi .kp-board-t::before, .t-trkopi .kp-board-t::after { content: '~'; margin: 0 .4rem; color: #e8c48f; }
.t-trkopi .kp-chalkline { width: 140px; height: 10px; margin: .2rem auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 10'%3E%3Cpath d='M2 5c20-4 30 4 46 0s28-4 44 0 30 3 46-1' fill='none' stroke='%23f3eee4' stroke-width='1.6' stroke-linecap='round' opacity='.7'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Cangkir dilihat dari atas */
.t-trkopi .kp-cup { position: relative; width: min(220px, 58vw); aspect-ratio: 1; margin: 0 auto .4rem; }
.t-trkopi .kp-cup .kp-saucer { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #fbf7f0 0 56%, #e9e1d4 57%, #f7f2ea 63%, #ddd2c2 100%); box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); }
.t-trkopi .kp-cup .kp-handle { position: absolute; right: -9%; top: 50%; width: 26%; height: 15%; margin-top: -7.5%; border-radius: 0 40px 40px 0; background: linear-gradient(180deg, #fff, #e6ddcf); box-shadow: 4px 4px 10px rgba(0,0,0,.35); }
.t-trkopi .kp-cup .kp-rim { position: absolute; inset: 17%; border-radius: 50%; background: #fff; box-shadow: inset 0 -4px 8px rgba(0,0,0,.18), 0 2px 4px rgba(0,0,0,.2); }
.t-trkopi .kp-cup .kp-coffee { position: absolute; inset: 21%; border-radius: 50%; overflow: hidden; background: var(--cover, var(--tp-hero, none)) center 25% / cover no-repeat, radial-gradient(circle at 45% 40%, #c99a6a 0 18%, #8a5a36 40%, #5b3722 72%, #3f2516); box-shadow: inset 0 6px 14px rgba(0,0,0,.45); }
.t-trkopi .kp-cup .kp-coffee svg { position: absolute; inset: 14%; width: 72%; height: 72%; }
.t-trkopi .kp-cup.is-pour .kp-coffee { animation: kpPour 1.6s cubic-bezier(.5,0,.3,1) .3s both; }
.t-trkopi .kp-cup .kp-latte { animation: kpSpin 40s linear infinite; transform-origin: 50% 50%; }
.t-trkopi .kp-steam { position: absolute; left: 50%; top: -34%; width: 46%; margin-left: -23%; overflow: visible; pointer-events: none; }
.t-trkopi .kp-steam path { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 3; stroke-linecap: round; stroke-dasharray: .5 .5; animation: kpSteam 3.6s ease-in-out infinite; }
.t-trkopi .kp-steam path:nth-child(2) { animation-delay: -1.2s; } .t-trkopi .kp-steam path:nth-child(3) { animation-delay: -2.4s; }

/* Sampul */
.t-trkopi .cover { place-items: center; padding: 3.2rem 1.8rem 2.6rem; }
.t-trkopi .cover__inner { position: relative; z-index: 3; gap: .5rem; max-width: 330px; }
.t-trkopi .cover .kp-board-t { animation: kpWrite 1.2s steps(14) .3s both; }
.t-trkopi .cover .names { animation: trUp 1.2s var(--ease) .9s both; }
.t-trkopi .cover__to { margin: .4rem 0 .7rem; padding: .75rem 1rem; border: 1.5px dashed rgba(243,238,228,.45); border-radius: 8px; animation: trUp 1s var(--ease) 1.1s both; }
.t-trkopi .cover__to small { color: rgba(243,238,228,.7); }
.t-trkopi .cover__to strong { font: 700 1.7rem/1.1 'Caveat', cursive; color: #fbf6ec; }
.t-trkopi .cover .ibtn { animation: trUp 1s var(--ease) 1.3s both; }
body.t-trkopi .cover .ibtn--solid, body.t-trkopi .hero .ibtn--solid { background: #e8c48f; color: #2a1c14; }
body.t-trkopi .ibtn--solid { background: var(--accent); color: #fff; }
body.t-trkopi .ibtn--solid::after { display: none; }
.t-trkopi .cover.is-open { transform: translateY(-100%); opacity: 1; transition: transform 1.1s cubic-bezier(.7,0,.25,1); }
@media (max-height: 760px) { .t-trkopi .kp-cup { width: min(150px, 40vw); } .t-trkopi .cover__to small:last-child { display: none; } .t-trkopi .cover__inner { gap: .3rem; } }

/* Pembuka */
.t-trkopi .hero, .t-trkopi .aside { min-height: 100svh; place-items: center; padding: 5.4rem 1.8rem 4rem; }
.t-trkopi .hero__inner, .t-trkopi .aside__inner { position: relative; z-index: 3; }
body.t-trkopi .hero .countdown div { background: rgba(255,255,255,.06); border-color: rgba(243,238,228,.3); }
body.t-trkopi .hero .countdown b { color: #e8c48f; }
body.t-trkopi .hero .countdown small { color: rgba(243,238,228,.7); }

/* Bagian */
body.t-trkopi .sec__title { color: var(--ink); font-style: italic; }
body.t-trkopi .sec__title::before { content: ''; display: block; width: 40px; height: 40px; margin: 0 auto .5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='20' rx='11' ry='15' fill='%236f4a33' transform='rotate(30 20 20)'/%3E%3Cpath d='M14 9c6 6 6 16 12 22' stroke='%23f1e5d2' stroke-width='2' fill='none' stroke-linecap='round' transform='rotate(0)'/%3E%3C/svg%3E") center / contain no-repeat; }
body.t-trkopi .sec__title::after { content: ''; display: block; width: 90px; height: 2px; margin: .7rem auto 0; background: radial-gradient(circle, var(--accent) 1.5px, transparent 2px) 0 0 / 8px 2px repeat-x; }
/* Acara bergaya menu */
body.t-trkopi .event { position: relative; padding: 1.8rem 1.4rem 2rem; background: var(--card); border: 1px solid var(--line); text-align: left;
    -webkit-mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat, linear-gradient(135deg, transparent 6px, #000 6px) 0 100% / 12px 10px repeat-x, linear-gradient(-135deg, transparent 6px, #000 6px) 6px 100% / 12px 10px repeat-x;
    mask: linear-gradient(#000, #000) 0 0 / 100% calc(100% - 10px) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0) 0 100% / 12px 10px repeat-x; }
body.t-trkopi .event h3 { display: flex; align-items: baseline; gap: .5rem; font-size: 1.7rem; color: var(--ink); }
body.t-trkopi .event h3::after { content: ''; flex: 1; border-bottom: 2px dotted rgba(74,46,31,.35); transform: translateY(-.3em); }
body.t-trkopi .event .event__time, body.t-trkopi .sec--tint .event .event__time { display: inline-block; color: #fff6ea; padding: .2rem .7rem; border-radius: 999px; background: var(--accent-2); color: #fff6ea; font-weight: 600; font-size: .85rem; }
body.t-trkopi .event .divider { margin-inline: 0; }
body.t-trkopi .event__btns { justify-content: flex-start; }
body.t-trkopi .countdown div { background: var(--card); border: 1px solid var(--line); }
body.t-trkopi .countdown b { color: var(--accent-2); font-family: var(--fh); }
body.t-trkopi .pframe::before { border: 3px solid #fff; border-radius: 50%; inset: -8px; box-shadow: 0 10px 20px -10px rgba(0,0,0,.5); }
body.t-trkopi .pframe__arch { border-radius: 50%; }
body.t-trkopi .gallery__item { border: 5px solid #fffaf2; }
body.t-trkopi .rsvp { background: var(--card); }
body.t-trkopi .wish { background: #fffaf2; }
body.t-trkopi .quote { font-family: 'Caveat', cursive; font-style: normal; font-size: 1.55rem; line-height: 1.4; color: var(--ink); }
.t-trkopi .sec--closing { padding-block: 6rem 5rem; }
.t-trkopi .sec--closing > * { position: relative; z-index: 3; }
body.t-trkopi .sec--closing .thanks, body.t-trkopi .sec--closing p, body.t-trkopi .sec--closing .muted { color: #f3eee4; }
body.t-trkopi .sec--closing .thanks { font-family: 'Caveat', cursive; font-size: 2.8rem; color: #e8c48f; }
@media (prefers-reduced-motion: reduce) { .t-trkopi .kp-steam path, .t-trkopi .kp-latte { animation: none !important; } }