/* Sync365 · v11: akaun demo (cuba 3 kali sebelum mendaftar). Butang pada muka depan, sepanduk baki bertitik tiga, dan kad contoh dokumen.
   Gerakan: transform, opacity dan warna; lengkung --ease-out. Kurangkan gerakan: html[data-reduce]. */

/* ---- butang "Cuba demo" di bawah borang log masuk / daftar ---- */
.dm-cta { margin-top: 18px; }
.dm-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 66px; padding: 12px 16px; border: 0; border-radius: 18px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--rule2); transition: background-color .18s ease, box-shadow .2s ease, transform .14s var(--ease-out); }
.dm-btn:hover { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent-line); } .dm-btn:active { transform: scale(.985); }
.dm-btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--accent-text), var(--focus); } .dm-btn[disabled] { cursor: progress; opacity: .8; }
.dm-t { flex: 1; min-width: 0; display: grid; gap: 1px; } .dm-t b { font: 700 16px/1.25 var(--f-ui); } .dm-t span { font-size: 13.5px; line-height: 1.35; color: var(--ink3); }
.dm-btn > svg.i { flex: none; width: 20px; height: 20px; color: var(--accent-text); transition: transform .25s var(--ease-out); } .dm-btn:hover > svg.i { transform: translateX(4px); }
.dm-pips { flex: none; display: inline-flex; gap: 5px; align-items: center; } .dm-pips i { display: block; width: 11px; height: 11px; border-radius: 3.5px; background: var(--accent); opacity: .85; }
.dm-pips.big i { width: 13px; height: 13px; border-radius: 4px; transition: background-color .3s ease, opacity .3s ease, transform .4s var(--ease-out); }
.dm-pips.big i.used { background: var(--rule2); opacity: 1; } .dm-pips.big i.fresh { animation: dm-use .7s var(--ease-out); }
@keyframes dm-use { 0% { background: var(--accent); transform: scale(1.5); } 60% { transform: scale(.9); } 100% { background: var(--rule2); transform: none; } }
.dm-btn:hover .dm-pips i { animation: dm-lit .7s var(--ease-out) both; } .dm-btn:hover .dm-pips i:nth-child(2) { animation-delay: .09s; } .dm-btn:hover .dm-pips i:nth-child(3) { animation-delay: .18s; }
@keyframes dm-lit { 0% { transform: translateY(0); } 40% { transform: translateY(-4px); } 100% { transform: none; } }
.dm-btn.busy .dm-pips i { animation: ab-p 1s ease-in-out infinite; } .dm-btn.busy .dm-pips i:nth-child(2) { animation-delay: .14s; } .dm-btn.busy .dm-pips i:nth-child(3) { animation-delay: .28s; }
.dm-btn .ab-ld { flex: none; color: var(--accent-text); }
.dm-note { margin: 10px 4px 0; line-height: 1.5; }

/* ---- sepanduk dalam aplikasi: baki percubaan ---- */
.dm-bar { position: sticky; top: calc(8px + env(safe-area-inset-top)); z-index: 20; display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 8px 8px 8px 14px; border-radius: 18px; background: var(--panel); box-shadow: var(--sh-card), inset 0 0 0 1px var(--accent-line); }
.dm-chip { flex: none; padding: 3px 10px; border-radius: 99px; background: var(--accent-tint); color: var(--accent-text); font: 700 11px var(--f-ui); letter-spacing: .14em; text-transform: uppercase; }
.dm-txt { flex: 1; min-width: 0; font: 600 14.5px/1.3 var(--f-ui); color: var(--ink); }
.dm-bar.end { background: var(--warn-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent); } .dm-bar.end .dm-chip { background: var(--warn); color: #1a1300; }
@media (max-width: 700px) { .dm-bar { gap: 8px; padding-left: 12px; } .dm-txt { font-size: 13px; } .dm-chip { letter-spacing: .08em; } }

/* ---- kad contoh dokumen ---- */
.dm-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dm-card { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px; border: 0; border-radius: 20px; background: var(--panel); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--sh-card), inset 0 0 0 1px var(--rule); transition: transform .2s var(--ease-out), box-shadow .2s ease, background-color .2s ease; animation: rise .55s var(--ease-out) calc(var(--k) * 70ms) both; }
.dm-card:hover { background: var(--accent-tint); transform: translateY(-2px); } .dm-card:active { transform: scale(.98); } .dm-card:focus-visible { outline: 0; box-shadow: var(--focus); }
.dm-card b { display: block; font: 700 15.5px/1.25 var(--f-ui); } .dm-card .grow span { display: block; margin-top: 2px; font-size: 13px; color: var(--ink3); }
.dm-go { flex: none; color: var(--accent-text); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .3s var(--ease-out); } .dm-card:hover .dm-go, .dm-card:focus-visible .dm-go { opacity: 1; transform: none; } .dm-go svg.i { width: 18px; height: 18px; }
@media (max-width: 860px) { .dm-cards { grid-template-columns: 1fr; gap: 10px; } .dm-go { opacity: 1; transform: none; } }

html[data-reduce] .dm-cta *, html[data-reduce] .dm-bar *, html[data-reduce] .dm-card, html[data-reduce] .dm-card * { animation: none !important; transition: none !important; }