/* Sync365 · v13: muka depan yang dipermudah. Kad peringatan spam, penyempitan skrin sahkan e-mel, dan animasi harga yang ringan.
   Gerakan: transform, opacity dan warna sahaja; lengkung --ease-out. Kurangkan gerakan: html[data-reduce] dan prefers-reduced-motion. */

/* ---- sebelah gelap: satu kandungan yang tenang. Ayat panjang disembunyikan semasa kad harga dipaparkan; langkah hero hanya tajuk ---- */
.auth-side.of-on .lead2 { display: none; }
.as-t span { display: none; } .as-i { padding-bottom: 12px; }
.auth-card .ah h2 { margin-bottom: 18px; } .ah:not(:has(.ah-s)):not(:has(.ah-e)) h2 { margin-bottom: 20px; }
.dm-t span { font-size: 13.5px; }

/* ---- kad harga: garis coretan harga lama (kad tiket dalam v15) ---- */
.of-sub { margin-bottom: 14px; min-height: 26px; } .of-sub p { font-size: 15.5px; } .of-s0 b { color: var(--ink); font-weight: 700; }
/* garis coretan harga lama dilukis dari kiri apabila kod sah (bukan text-decoration) */
.of-old { position: relative; text-decoration: none; }
.of-old::after { content: ""; position: absolute; left: -3px; right: -3px; top: 54%; height: 2px; border-radius: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out) .4s; }
.of[data-ref="1"] .of-old::after { transform: scaleX(1); }

/* ---- skrin semak e-mel: jelas dan tidak mengelirukan ---- */
.cf-to { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--ink2); } .cf-em { color: var(--ink); font-weight: 700; word-break: break-all; } .cf-to .linkbtn { font-weight: 600; }
.sp { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 16px 14px 12px; border-radius: 18px; background: var(--warn-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent), 0 0 28px -8px color-mix(in srgb, var(--warn) 60%, transparent); animation: sp-in .5s var(--ease-out) both; }
@keyframes sp-in { from { opacity: 0; transform: translateY(8px); } }
.sp .sp-i { flex: none; width: 52px; height: 52px; color: var(--warn-text); --ai-soft: color-mix(in srgb, var(--warn) 22%, transparent); overflow: visible; }
.sp-t { display: grid; gap: 2px; min-width: 0; font-size: 15.5px; line-height: 1.4; color: var(--ink2); } .sp-t b { font: 700 16px/1.3 var(--f-ui); color: var(--ink); } .sp-t em { font-style: normal; font-weight: 700; color: var(--ink); }
.sp-env { transform: translateY(-3px); } .sp .sp-i { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--warn) 55%, transparent)); }
.cf-open { width: 100%; margin: 0 0 16px; justify-content: center; text-decoration: none; }
.cf-act { margin-top: 16px; gap: 10px; }
.gt-note { margin: 0; line-height: 1.5; }
.auth-card .rg-steps { margin-bottom: 8px; }

html[data-reduce] .sp, html[data-reduce] .sp * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sp, .sp * { animation: none !important; } }