/* Sync365 · v15: teks skrin log masuk yang jelas (mod terang), cahaya tetap dan bukan denyutan, dan kad harga berupa tiket.
   Kad harga: dua panel bertakuk (perforasi), cop "Jimat" yang menghentam sekali, angka harga yang naik satu digit demi satu digit, dan tiga mata yang ditanda satu demi satu.
   Gerakan: transform, opacity dan stroke-dashoffset sahaja, sekali sahaja semasa kad muncul; selepas itu kad kekal statik dengan cahaya lembut.
   Kurangkan gerakan: html[data-reduce] dan prefers-reduced-motion memaparkan keadaan akhir. */

/* ---- teks pada kad borang: kelabu sekunder lebih pekat (dahulu pudar hampir tidak kelihatan dalam mod terang) ---- */
.auth-card { --ink3: #5d5f55; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-card { --ink3: #9aa7a6; } }
:root[data-theme="dark"] .auth-card { --ink3: #9aa7a6; }

/* ---- kad harga: tiket ---- */
.of { --nr: 10px; --of-bg: rgba(190, 235, 228, .06); position: relative; isolation: isolate; width: min(100%, 540px); margin-top: 38px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.of::before { content: ""; position: absolute; inset: 4% -4% -10%; z-index: -1; pointer-events: none; border-radius: 44px; background: radial-gradient(62% 70% at 26% 16%, rgba(44, 240, 201, .22), transparent 74%), radial-gradient(50% 50% at 90% 100%, rgba(3, 96, 78, .45), transparent 76%); filter: blur(28px); }
.of-a, .of-b { position: relative; background: linear-gradient(165deg, rgba(44, 240, 201, .1), transparent 52%), var(--of-bg); }
.of-a { padding: 26px 28px 18px; border-radius: 26px 26px 0 0; box-shadow: inset 0 0 0 1px rgba(44, 240, 201, .22);
  -webkit-mask: radial-gradient(circle at 0 100%, #0000 var(--nr), #000 calc(var(--nr) + .6px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--nr), #000 calc(var(--nr) + .6px)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 100%, #0000 var(--nr), #000 calc(var(--nr) + .6px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--nr), #000 calc(var(--nr) + .6px)) right / 51% 100% no-repeat; }
.of-b { padding: 20px 28px 22px; border-radius: 0 0 26px 26px; box-shadow: inset 0 0 0 1px rgba(44, 240, 201, .14);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--nr), #000 calc(var(--nr) + .6px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--nr), #000 calc(var(--nr) + .6px)) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--nr), #000 calc(var(--nr) + .6px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--nr), #000 calc(var(--nr) + .6px)) right / 51% 100% no-repeat; }
.of-b::before { content: ""; position: absolute; left: calc(var(--nr) + 12px); right: calc(var(--nr) + 12px); top: 0; border-top: 2px dashed rgba(190, 235, 228, .22); }

/* cop "Jimat": menghentam sekali, kemudian statik dengan cahaya */
.of-save { position: absolute; z-index: 2; top: -16px; right: 22px; padding: 6px 13px 5px; border-radius: 9px; font: 800 12.5px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--accent); background: #062019;
  box-shadow: inset 0 0 0 1.5px rgba(44, 240, 201, .9), 0 0 0 3px #062019, 0 0 0 4.5px rgba(44, 240, 201, .4), 0 0 26px rgba(44, 240, 201, .4);
  transform: rotate(-4deg); animation: st-slam .55s var(--ease-out) 1.2s both; transition: color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.of[data-ref="1"] .of-save { color: #04211b; background: var(--accent); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .5), 0 0 0 3px #062019, 0 0 0 4.5px rgba(44, 240, 201, .6), 0 0 34px rgba(44, 240, 201, .6); animation: st-slam2 .55s var(--ease-out) both; }
@keyframes st-slam { 0% { opacity: 0; transform: rotate(-4deg) scale(1.7); } 55% { opacity: 1; transform: rotate(-4deg) scale(.93); } 100% { transform: rotate(-4deg) scale(1); } }
@keyframes st-slam2 { 0% { transform: rotate(-4deg) scale(1.35); } 55% { transform: rotate(-4deg) scale(.95); } 100% { transform: rotate(-4deg) scale(1); } }

/* harga: bercahaya (cahaya pada ibu supaya tidak terpotong oleh klip gelongsor), digit naik satu demi satu */
.of-pr { margin: 2px 0 2px; filter: drop-shadow(0 0 22px rgba(44, 240, 201, .26)); }
.of-roll .dg { display: inline-block; animation: dg-up .85s var(--ease-out) calc(.4s + var(--i) * 95ms) both; }
@keyframes dg-up { from { transform: translateY(105%); } }
.of-per { color: var(--ink2); }
.of-mo { display: grid; margin: 0 0 10px; font: 600 14.5px/1.3 var(--f-ui); font-variant-numeric: lining-nums tabular-nums; color: var(--accent-text); }
.of-mo span { grid-area: 1 / 1; transition: opacity .3s ease, transform .45s var(--ease-out); }
.of-mo .m1 { opacity: 0; transform: translateY(6px); } .of[data-ref="1"] .of-mo .m0 { opacity: 0; transform: translateY(-6px); } .of[data-ref="1"] .of-mo .m1 { opacity: 1; transform: none; }
.of-sub { margin: 0; min-height: 26px; }
.of-s0 .linkbtn { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: rgba(44, 240, 201, .55); text-shadow: 0 0 16px rgba(44, 240, 201, .4); transition: text-decoration-color .2s ease, text-shadow .2s ease; }
.of-s0 .linkbtn:hover { text-decoration-color: var(--accent); text-shadow: 0 0 20px rgba(44, 240, 201, .75); }

/* tiga mata: tanda dilukis satu demi satu */
.of-pts { margin: 0; padding: 0; border: 0; gap: 13px; }
.of-pts li, .auth.enter .of-pts li { font: 600 17px/1.25 var(--f-ui); animation: pt-in .6s var(--ease-out) calc(1.05s + var(--k) * 170ms) both; }
@keyframes pt-in { from { opacity: 0; transform: translateX(-8px); } }
.of .of-i { flex: none; width: 24px; height: 24px; padding: 0; border-radius: 0; background: none; color: var(--accent); overflow: visible; filter: drop-shadow(0 0 6px rgba(44, 240, 201, .6)); }
.ot-c { fill: rgba(44, 240, 201, .13); stroke: currentColor; stroke-width: 1.6; }
.ot-k { fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; animation: ot-draw .5s var(--ease-out) calc(1.2s + var(--k, 0) * 170ms) both; }
.of-pts li:nth-child(1) .ot-k { --k: 0; } .of-pts li:nth-child(2) .ot-k { --k: 1; } .of-pts li:nth-child(3) .ot-k { --k: 2; }
@keyframes ot-draw { from { stroke-dashoffset: 1; } }

/* skrin komputer riba yang tidak tinggi: kad dimampatkan */
@media (min-width: 1081px) and (max-height: 860px) {
  .of { margin-top: 30px; }
  .of-a { padding: 22px 24px 14px; } .of-b { padding: 16px 24px 18px; }
  .of-mo { margin-bottom: 6px; font-size: 13.5px; } .of-sub { min-height: 0; }
  .of-pts { gap: 9px; } .of-pts li, .auth.enter .of-pts li { font-size: 16px; } .of .of-i { width: 22px; height: 22px; }
}
@media (min-width: 1081px) and (max-height: 700px) {
  .of-mo { display: none; }
  .of-a { padding: 18px 22px 12px; } .of-b { padding: 14px 18px 14px; }
  .of-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .of-pts li, .auth.enter .of-pts li { flex-direction: column; text-align: center; gap: 6px; font-size: 13.5px; }
}
/* telefon dan tablet: sebelah gelap menjadi kepala halaman */
@media (max-width: 1080px) {
  .of { --nr: 8px; width: 100%; margin-top: 32px; }
  .of-a { padding: 22px 18px 14px; border-radius: 22px 22px 0 0; } .of-b { padding: 16px 12px 16px; border-radius: 0 0 22px 22px; }
  .of-save { right: 16px; }
  .of-mo { font-size: 13.5px; }
  .of-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .of-pts li, .auth.enter .of-pts li { flex-direction: column; text-align: center; gap: 7px; font-size: 13px; }
}

/* ---- kurangkan gerakan: keadaan akhir ---- */
html[data-reduce] .of-save, html[data-reduce] .of-roll .dg, html[data-reduce] .of-pts li, html[data-reduce] .ot-k { animation: none !important; }
html[data-reduce] .of-save { transform: rotate(-4deg); }
@media (prefers-reduced-motion: reduce) { .of-save, .of-roll .dg, .of-pts li, .ot-k { animation: none !important; } .of-save { transform: rotate(-4deg); } }