/* THI Syiar — hanya yang belum ada di app.css THI Amanah. Variabel warna diambil dari :root app.css; fallback diberikan untuk tema lain. */
.thi-syiar-ticker{overflow:hidden;background:var(--gs,#E8F3EE);border-radius:999px;padding:10px 0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.thi-syiar-ticker .trk{display:flex;gap:44px;white-space:nowrap;width:max-content;font:500 13px Inter,system-ui,sans-serif;color:var(--g,#0B5D3B);animation:this-tick 45s linear infinite}
.thi-syiar-ticker:hover .trk{animation-play-state:paused}.thi-syiar-ticker .it i{opacity:.75}
.thi-syiar-ticker-empty{text-align:center;font:500 13px Inter,system-ui,sans-serif;color:var(--mut,#5B6475);mask-image:none}
@keyframes this-tick{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.thi-syiar-ticker .trk{animation:none;flex-wrap:wrap;white-space:normal;width:auto;padding:0 16px}.thi-syiar-ticker .trk .it:nth-child(n+7){display:none}}

.thi-syiar-momen{text-align:center}
.thi-syiar-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 14px}
.thi-syiar-cd div{background:var(--cream,#FAF7F0);border-radius:12px;padding:10px 4px}
.thi-syiar-cd b{display:block;font-size:26px;line-height:1;color:var(--g,#0B5D3B)}.thi-syiar-cd span{font:500 11px Inter,system-ui,sans-serif;color:var(--mut,#5B6475)}

.thi-syiar-progress .img{width:72px;height:56px;object-fit:cover;border-radius:10px;background:var(--line,#E6E8EC);flex-shrink:0}
.thi-syiar-progress .ttl{font:700 15px 'Plus Jakarta Sans',Inter,sans-serif;color:var(--ink,#0B1220);text-decoration:none;display:block;margin-bottom:4px}

.thi-syiar-subuh{background:linear-gradient(135deg,var(--g,#0B5D3B),var(--g2,#084A2F));color:#fff;border:0}
.thi-syiar-subuh h3{color:#fff}
.thi-syiar-subuh .amts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.thi-syiar-subuh .amt{display:flex;align-items:center;justify-content:center;height:46px;border-radius:10px;background:#fff;color:var(--g,#0B5D3B);font:700 14px 'Plus Jakarta Sans',Inter,sans-serif;text-decoration:none;font-variant-numeric:tabular-nums}
.thi-syiar-subuh .amt:hover{background:var(--gold,#C9A227);color:#fff}.thi-syiar-subuh .amt.lain{background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:13px}
@media (max-width:520px){.thi-syiar-subuh .amts{grid-template-columns:repeat(2,1fr)}.thi-syiar-cd b{font-size:20px}}

.thi-syiar-form .syiar-out:empty{display:none}
.thi-syiar-share .syiar-card-out:empty{display:none}
.thi-syiar-canvas-wrap{background:var(--bg,#F6F7F9);border:1px solid var(--line,#E6E8EC);border-radius:12px;padding:12px;display:grid;place-items:center}
.thi-syiar-canvas-wrap canvas,.syiar-card-out canvas{max-width:100%;max-height:70vh;height:auto;border-radius:8px;box-shadow:0 8px 24px rgba(11,18,32,.12);background:#fff}

/* halaman galang P2P */
.this-top{height:64px;display:flex;align-items:center;gap:10px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line,#E6E8EC)}
.this-top a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--g,#0B5D3B);font:700 13px/1.15 'Plus Jakarta Sans',Inter,sans-serif}.this-top>span{margin-left:auto}
.this-galang .hero{width:100%;height:320px;object-fit:cover;border-radius:16px;background:var(--line,#E6E8EC)}
.this-fundraiser{display:flex;align-items:center;gap:14px}
.this-fundraiser img,.this-fundraiser .ava{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.this-fundraiser .ava{background:var(--gs,#E8F3EE);color:var(--g,#0B5D3B);display:grid;place-items:center;font:700 22px 'Plus Jakarta Sans',Inter,sans-serif}
.this-foot{max-width:1040px;margin:0 auto;padding:16px;text-align:center}
@media (max-width:640px){.this-galang .hero{height:200px}.this-top>span{display:none}}

/* panel syiar */
.this-chart{display:flex;align-items:flex-end;gap:3px;height:160px;border-bottom:1px solid var(--line,#E6E8EC);margin-top:12px}
.this-chart .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;position:relative;min-width:0}
.this-chart .col i{display:block;width:100%;border-radius:3px 3px 0 0;background:var(--gs,#E8F3EE)}
.this-chart .col i.d{background:var(--g,#0B5D3B);position:absolute;left:0;right:0;bottom:0}
.this-chart .col:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:var(--ink,#0B1220);color:#fff;font:500 11px Inter;padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:3}
.this-link{display:flex;gap:8px;align-items:center;background:var(--bg,#F6F7F9);border:1px solid var(--line,#E6E8EC);border-radius:10px;padding:8px 10px;font:500 12px/1.4 ui-monospace,Menlo,monospace;word-break:break-all}
.this-qr{width:160px;height:160px;border:1px solid var(--line,#E6E8EC);border-radius:12px;background:#fff;padding:8px}