/* ============================================================================ aj-alur.css — seksi "Cara kerjanya" di beranda (#cara_kerja). Empat langkah dan satu tujuan akhir, dirangkai satu rel vertikal. Di ponsel relnya di kiri; di layar lebar di tengah, dengan langkah berselang-seling kiri-kanan. Relnya terisi mengikuti gulir (--ajk-p, 0–1) dan simpul tiap langkah menyala begitu isiannya lewat — keduanya ditulis assets/js/aj-alur.js. Tanpa JS relnya penuh dan semua simpul menyala. Tiap langkah membawa potongan layar aplikasi. Potongan itu memakai token aplikasi (disalin dari :root di src/assets/main.css, sama dengan bingkai ponsel di hero), bukan palet halaman pemasaran di sekitarnya — ia meniru aplikasi. Komponen asalnya disebut di komentar tiap blok di bawah dan di index.html, supaya bisa dicocokkan lagi kalau komponennya berubah. Kelasnya berawalan `ajk-`, bukan `aj-`: beberapa skrip landing bertindak pada kelas aj-* generik (lihat catatan di aj-hero-device.css). ========================================================================== */ .ajk { /* Token aplikasi — :root di src/assets/main.css. */ --ajk-canvas: 245 246 250; --ajk-surface: 255 255 255; --ajk-surface-muted: 234 236 239; --ajk-tint: 234 234 250; --ajk-line: 207 214 224; --ajk-ink: 39 53 74; --ajk-ink-soft: 90 104 128; --ajk-ink-faint: 99 112 134; --ajk-brand: 1 97 233; --ajk-success: 15 122 85; --ajk-on-accent: 255 255 255; /* Figtree = huruf aplikasi; sudah dimuat halaman ini untuk bingkai ponsel di hero. */ --ajk-font: 'Figtree', var(--body-font-typeface), sans-serif; /* Pegas yang sama dengan tumpukan notifikasi (aj-polish.css 5c). */ --ajk-spring: cubic-bezier(0.22, 1.2, 0.36, 1); /* Rel & simpul. Warnanya palet halaman, bukan aplikasi: rel ini bagian dari halaman pemasaran, bukan tiruan layar. */ --ajk-node: 40px; --ajk-gap: 56px; --ajk-rail: rgba(15, 38, 90, 0.1); --ajk-brand-page: #0168fa; --ajk-node-ink: #6b7a90; --ajk-on-brand: #ffffff; position: relative; } /* Gelap mengikuti .uc-dark di . Token aplikasinya dari .dark di src/assets/main.css, sama dengan bingkai ponsel di hero. */ .uc-dark .ajk { --ajk-canvas: 15 19 26; --ajk-surface: 26 32 42; --ajk-surface-muted: 35 43 56; --ajk-tint: 38 42 69; --ajk-line: 48 58 74; --ajk-ink: 231 235 241; --ajk-ink-soft: 159 170 184; --ajk-ink-faint: 130 142 158; --ajk-brand: 76 147 255; --ajk-success: 61 214 155; --ajk-on-accent: 15 19 26; --ajk-rail: rgba(148, 178, 255, 0.14); --ajk-brand-page: rgb(var(--color-brand)); --ajk-node-ink: rgb(var(--color-ink-soft)); /* Aksen gelapnya terang, jadi teks di atasnya gelap — aturan text-on-accent yang sama dengan aplikasi. */ --ajk-on-brand: #0f131a; } #cara_kerja h2 { text-wrap: balance; } /* Lemari simbol; tidak pernah ikut dirender sendiri. */ .ajk-defs { display: none; } /* Warna ikon lewat `color`, bukan `fill`: tema vendor memaksa isi setiap SVG ke currentColor (`svg :not([fill="none"])` di main.min.css). */ .ajk-i { flex: none; width: 1em; height: 1em; fill: currentColor; } /* --------------------------------------------------------------------------- Rel ------------------------------------------------------------------------- */ /* Tanpa JS: rel dari simpul pertama sampai ujung bawah, penuh. aj-alur.js mengukur pusat simpul pertama & terakhir lalu menulis --ajk-rail-top dan --ajk-rail-h dalam px, supaya relnya tepat berhenti di simpul akhir. */ .ajk-rail { position: absolute; top: var(--ajk-rail-top, calc(var(--ajk-node) / 2)); left: calc(var(--ajk-node) / 2 - 1px); width: 2px; height: var(--ajk-rail-h, calc(100% - var(--ajk-node))); border-radius: 2px; background: var(--ajk-rail); pointer-events: none; } .ajk-rail-fill { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(1, 104, 250, 0.25) 0%, var(--ajk-brand-page) 18%); transform: scaleY(var(--ajk-p, 1)); transform-origin: 50% 0; } .uc-dark .ajk-rail-fill { background: linear-gradient(180deg, rgba(76, 147, 255, 0.25) 0%, var(--ajk-brand-page) 18%); } /* Kepala isian: titik bercahaya yang ikut turun di ujung rel. Hanya tampak selagi relnya sedang terisi (.is-moving dari aj-alur.js) — di kedua ujung ia tertutup simpul. */ .ajk-rail-head { position: absolute; top: 0; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--ajk-brand-page); box-shadow: 0 0 0 4px rgba(1, 104, 250, 0.16), 0 0 18px 2px rgba(1, 104, 250, 0.45); transform: translateY(calc(var(--ajk-p, 1) * var(--ajk-rail-h, 0px))); opacity: 0; transition: opacity 0.3s var(--aj-ease); } .ajk.is-moving .ajk-rail-head { opacity: 1; } /* --------------------------------------------------------------------------- Langkah ------------------------------------------------------------------------- */ .ajk-steps { position: relative; display: flex; flex-direction: column; gap: var(--ajk-gap); margin: 0; padding: 0; list-style: none; } /* Ponsel: simpul di kolom rel, teks di sebelahnya, potongan layar di bawah keduanya selebar kolom penuh — tabel termin di langkah ketiga tidak muat di kolom teks. Relnya lewat di belakang panggungnya. */ .ajk-step { position: relative; display: grid; grid-template-columns: var(--ajk-node) minmax(0, 1fr); column-gap: 16px; row-gap: 20px; align-items: start; } .ajk-node { grid-column: 1; grid-row: 1; position: relative; z-index: 1; display: grid; place-items: center; width: var(--ajk-node); height: var(--ajk-node); border: 1px solid var(--ajk-rail); border-radius: 50%; background: var(--aj-page); color: var(--ajk-node-ink); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; /* Cincin warna halaman memutus rel di sekeliling simpul, jadi relnya terbaca "masuk" ke simpul, bukan menembusnya. */ box-shadow: 0 0 0 6px var(--aj-page); transition: background-color 0.35s var(--aj-ease), border-color 0.35s var(--aj-ease), color 0.35s var(--aj-ease), box-shadow 0.35s var(--aj-ease), transform 0.5s var(--ajk-spring); } .ajk-step.is-on .ajk-node { border-color: var(--ajk-brand-page); background: var(--ajk-brand-page); color: var(--ajk-on-brand); box-shadow: 0 0 0 6px var(--aj-page), 0 0 0 12px rgba(1, 104, 250, 0.12); } .uc-dark .ajk-step.is-on .ajk-node { box-shadow: 0 0 0 6px var(--aj-page), 0 0 0 12px rgba(76, 147, 255, 0.16); } .ajk-node .ajk-i { font-size: 22px; } .ajk-body { grid-column: 2; grid-row: 1; min-width: 0; /* baris pertama judul sejajar tengah simpul */ padding-top: 8px; } .ajk-visual { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; min-width: 0; } /* Ukuran judul dari kelas vendor (h5 → xl:h4) di markup; beratnya 600, sama dengan judul kartu fitur di atasnya. */ .ajk-title { margin: 0; font-weight: 600; text-wrap: balance; } .ajk-text { margin: 8px 0 0; font-size: 1rem; line-height: 1.6; text-wrap: pretty; } /* --------------------------------------------------------------------------- Panggung — bidang lembut berkisi titik tempat potongan layar berdiri. ------------------------------------------------------------------------- */ .ajk-stage { position: relative; isolation: isolate; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; border: 1px solid var(--aj-line); border-radius: 24px; background: radial-gradient(120% 90% at 50% 0%, rgba(1, 104, 250, 0.07), rgba(1, 104, 250, 0) 62%), var(--aj-soft); } /* Kisi titiknya memudar ke tepi, jadi tidak terbaca sebagai pola ubin. */ .ajk-stage::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(circle, rgba(15, 38, 90, 0.1) 1px, transparent 1.4px); background-size: 18px 18px; -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 45%, #000 25%, transparent 100%); mask-image: radial-gradient(ellipse 72% 68% at 50% 45%, #000 25%, transparent 100%); } .uc-dark .ajk-stage { background: radial-gradient(120% 90% at 50% 0%, rgba(76, 147, 255, 0.08), rgba(76, 147, 255, 0) 62%), #12171f; } .uc-dark .ajk-stage::before { background-image: radial-gradient(circle, rgba(148, 178, 255, 0.12) 1px, transparent 1.4px); } /* Panggung langkah kunci: cahaya biru lebih kuat dan garis tepi merek. */ .ajk-stage.is-key { border-color: rgba(1, 104, 250, 0.3); background: radial-gradient(120% 90% at 50% 0%, rgba(1, 104, 250, 0.16), rgba(1, 104, 250, 0) 66%), var(--aj-soft-2); box-shadow: 0 34px 70px -40px rgba(1, 104, 250, 0.6); } .uc-dark .ajk-stage.is-key { border-color: rgba(120, 170, 255, 0.4); background: radial-gradient(120% 90% at 50% 0%, rgba(76, 147, 255, 0.18), rgba(76, 147, 255, 0) 66%), #141b27; box-shadow: 0 34px 70px -40px rgba(0, 0, 0, 0.9); } /* Kartu aplikasi di atas panggung. */ .ajk-card { width: min(100%, 360px); padding: 16px; border: 1px solid rgb(var(--ajk-line)); border-radius: 20px; background: rgb(var(--ajk-surface)); box-shadow: var(--aj-shadow-md); color: rgb(var(--ajk-ink)); font-family: var(--ajk-font); font-size: 14px; line-height: 20px; text-align: left; -webkit-user-select: none; user-select: none; } .ajk-card p { margin: 0; } /* Satu atap untuk "pindah adegan tanpa animasi": aj-alur.js memasangnya sebentar saat mengembalikan adegan ke awal putarannya, supaya yang tampak bukan adegan yang berjalan mundur. */ .ajk-card.is-snap, .ajk-card.is-snap *, .ajk-feed.is-snap, .ajk-feed.is-snap * { transition: none !important; animation: none !important; } /* Pudar di antara dua putaran. */ .ajk-card, .ajk-feed { transition: opacity 0.25s ease; } .ajk-card.is-fade, .ajk-feed.is-fade { opacity: 0; } /* --------------------------------------------------------------------------- 1 · Ketersediaan — AvailabilityForm.vue (+ ToggleSwitch.vue). Nama template bergaris putus-putus, baris "Aktif di", lalu satu kartu per hari. Menyalakan hari memberinya rentang bawaan 09:00–17:00 (addTimeRange), persis yang diperagakan hari Sabtu di sini. ------------------------------------------------------------------------- */ .ajk-av-name { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 600; line-height: 22px; letter-spacing: -0.01em; } .ajk-av-star { font-size: 12px; color: rgb(var(--ajk-ink-soft)); } .ajk-av-caret { font-size: 20px; } /* Garis putus-putus di bawah teks menandai "ini bisa diganti". */ .ajk-dashed { border-bottom: 3px dashed rgb(var(--ajk-line)); } .ajk-av-active { display: flex; align-items: center; gap: 8px; margin-top: 8px !important; color: rgb(var(--ajk-ink-soft)); } .ajk-av-active b { display: flex; align-items: center; gap: 4px; font-weight: 600; color: rgb(var(--ajk-ink)); } .ajk-av-active .ajk-dashed { border-bottom-width: 2px; } .ajk-av-active .ajk-i { font-size: 20px; } .ajk-days { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } /* Hari nonaktif "turun" ke warna canvas supaya statusnya kebaca sekilas. */ .ajk-day { padding: 12px; border: 1px solid rgb(var(--ajk-line)); border-radius: 16px; background: rgb(var(--ajk-surface)); transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out; } .ajk-day.is-off { border-color: rgb(var(--ajk-line) / 0.6); background: rgb(var(--ajk-canvas)); } .ajk-day-top { display: flex; align-items: center; } /* ToggleSwitch.vue: 32x20, knop 12px; nyala = bg-success, mati = bg-canvas dengan knop ink-soft. Knopnya digeser transform, bukan `left`. */ .ajk-toggle { position: relative; display: flex; flex: none; align-items: center; width: 32px; height: 20px; border: 1px solid rgb(var(--ajk-line)); border-radius: 999px; background: rgb(var(--ajk-success)); transition: background-color 0.15s, transform 0.15s; } .ajk-toggle::after { content: ''; position: absolute; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: rgb(var(--ajk-surface)); transform: translateX(12px); transition: transform 0.15s, background-color 0.15s; } .ajk-day.is-off .ajk-toggle { background: rgb(var(--ajk-canvas)); } .ajk-day.is-off .ajk-toggle::after { background: rgb(var(--ajk-ink-soft)); transform: none; } /* Ketukan jari sebelum sakelarnya berpindah. */ .ajk-toggle.is-tap { transform: scale(0.9); } .ajk-day-name { margin: 0 12px 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; transition: color 0.15s; } .ajk-day.is-off .ajk-day-name { color: rgb(var(--ajk-ink-faint)); } .ajk-day-btn { display: flex; flex: none; align-items: center; justify-content: center; border-radius: 999px; color: rgb(var(--ajk-ink-soft)); transition: opacity 0.15s; } .ajk-day-btn.is-copy { width: 28px; height: 28px; font-size: 15px; } .ajk-day-btn.is-more { width: 32px; height: 32px; margin-left: auto; font-size: 20px; } .ajk-day.is-off .ajk-day-btn.is-copy { opacity: 0.25; } /* Baris jam menutup ke tinggi nol saat harinya dimatikan. */ .ajk-day-rows { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.35s var(--aj-ease); } .ajk-day.is-off .ajk-day-rows { grid-template-rows: 0fr; } .ajk-day-rows-in { min-height: 0; overflow: hidden; } .ajk-time-row { display: flex; align-items: center; gap: 8px; padding-top: 12px; transition: opacity 0.25s ease, transform 0.45s var(--ajk-spring); } .ajk-day.is-off .ajk-time-row { opacity: 0; transform: translateY(-8px); } .ajk-time-chip { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid rgb(var(--ajk-line)); border-radius: 12px; background: rgb(var(--ajk-surface)); font-size: 14px; font-weight: 600; text-align: center; } .ajk-time-sep { flex: none; color: rgb(var(--ajk-ink-soft)); } .ajk-time-btn { display: flex; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; color: rgb(var(--ajk-ink-soft)); font-size: 16px; } .ajk-time-btn.is-add { font-size: 18px; } /* --------------------------------------------------------------------------- 2 · Bagikan link — CopyLinkButton.vue (bar di atas) + obrolan ilustrasi. Barnya bg-canvas border-line text-brand; menekan tombol salin menukar isinya jadi "Tersalin" (text-success) selama 1,6 detik dengan transisi copy-swap komponennya. Obrolannya bukan layar aplikasi — warnanya netral supaya tidak terbaca sebagai aplikasi obrolan tertentu. ------------------------------------------------------------------------- */ .ajk-link { display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid rgb(var(--ajk-line)); border-radius: 8px; background: rgb(var(--ajk-canvas)); color: rgb(var(--ajk-brand)); } .ajk-link-main { position: relative; flex: 1; min-width: 0; height: 20px; } .ajk-link-url, .ajk-link-done { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; white-space: nowrap; } /* ri-lg: 1,3333em dari 14px */ .ajk-link-url .ajk-i, .ajk-link-done .ajk-i { font-size: 18.67px; } .ajk-link-text { overflow: hidden; text-overflow: ellipsis; } .ajk-link-text b { font-weight: 600; } /* copy-swap: masuk dengan pegas 340ms, keluar 140ms. */ .ajk-link-url, .ajk-link-done, .ajk-link-btn .ajk-i { transition: transform 0.34s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease-out; } .ajk-link-done { color: rgb(var(--ajk-success)); font-weight: 600; opacity: 0; transform: translateY(7px) scale(0.92); } .ajk-share.is-copied .ajk-link-url { opacity: 0; transform: translateY(-7px) scale(0.96); transition: transform 0.14s cubic-bezier(0.4, 0, 1, 1), opacity 0.12s ease-in; } .ajk-share.is-copied .ajk-link-done { opacity: 1; transform: none; } .ajk-link-btn { display: grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 6px; font-size: 21px; transition: transform 0.15s ease-out, background-color 0.15s ease-out; } .ajk-link-btn .ajk-i { grid-area: 1 / 1; } .ajk-link-btn .is-done { color: rgb(var(--ajk-success)); opacity: 0; transform: scale(0.6); } .ajk-share.is-copied .ajk-link-btn .is-copy { opacity: 0; transform: scale(0.6); } .ajk-share.is-copied .ajk-link-btn .is-done { opacity: 1; transform: none; } /* active:scale-90 + hover:bg-brand/10 di tombolnya */ .ajk-share.is-press .ajk-link-btn { background: rgb(var(--ajk-brand) / 0.1); transform: scale(0.9); } .ajk-chat { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .ajk-msg { max-width: 86%; padding: 8px 12px; border-radius: 16px; transition: opacity 0.25s ease, transform 0.5s var(--ajk-spring); } .ajk-msg.is-in { align-self: flex-start; border-bottom-left-radius: 6px; background: rgb(var(--ajk-surface-muted)); transform-origin: 0 100%; } .ajk-msg.is-out { align-self: flex-end; border-bottom-right-radius: 6px; background: rgb(var(--ajk-tint)); transform-origin: 100% 100%; } /* Pesan yang belum "terkirim" tetap memakan tempat: obrolannya tidak melompat tiap ada pesan baru. */ .ajk-share[data-msgs='1'] .ajk-msg:nth-child(n + 2), .ajk-share[data-msgs='2'] .ajk-msg:nth-child(n + 3) { opacity: 0; transform: translateY(10px) scale(0.94); } /* Pratinjau tautan di dalam gelembung. */ .ajk-og { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; border: 1px solid rgb(var(--ajk-line)); border-radius: 12px; background: rgb(var(--ajk-surface)); } .ajk-og-ava { flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } .ajk-og-text { display: flex; flex-direction: column; min-width: 0; font-size: 12px; line-height: 16px; } .ajk-og-text b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .ajk-og-text span { color: rgb(var(--ajk-brand)); } /* --------------------------------------------------------------------------- 3 · Pesan & bayar, dari sisi klien — tiga layar yang bergantian: pilih jam (BookScheduleMobile #body_upper_slots + #body_form_slots, sama dengan layar ke-3 ponsel hero), langkah "Pembayaran" di CustomerForm.vue, lalu InvoiceSuccess.vue. ------------------------------------------------------------------------- */ .ajk-book { width: min(100%, 392px); padding: 0; overflow: hidden; container-type: inline-size; } /* Ketiga layar menumpuk di satu sel kisi, jadi tinggi kartunya selalu setinggi layar tertinggi — tidak mengembang-mengempis tiap berganti. */ .ajk-panes { display: grid; } .ajk-pane { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; padding: 16px; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity 0.3s ease, transform 0.5s var(--aj-ease), visibility 0s linear 0.5s; } /* Layar yang sudah dilewati keluar ke kiri, yang berikutnya masuk dari kanan. */ .ajk-book[data-scene='pay'] .ajk-pane.is-slots, .ajk-book[data-scene='paid'] .ajk-pane.is-slots, .ajk-book[data-scene='paid'] .ajk-pane.is-pay { transform: translateX(-28px); } .ajk-book[data-scene='slots'] .ajk-pane.is-slots, .ajk-book[data-scene='pay'] .ajk-pane.is-pay, .ajk-book[data-scene='paid'] .ajk-pane.is-paid { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s ease 0.08s, transform 0.55s var(--aj-ease), visibility 0s; } /* --- pilih jam --- */ .ajk-slot-head { display: flex; align-items: center; gap: 12px; margin: -16px -16px 0; padding: 12px 16px; border-bottom: 1px solid rgb(var(--ajk-line)); } .ajk-slot-back { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border: 1px solid rgb(var(--ajk-line)); border-radius: 50%; font-size: 20px; } .ajk-slot-when { flex: 1; min-width: 0; } .ajk-slot-label { display: block; font-size: 12px; line-height: 16px; color: rgb(var(--ajk-ink-soft)); } .ajk-slot-date { display: block; margin-top: 2px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; } .ajk-slot-change { display: flex; flex: none; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid rgb(var(--ajk-line)); border-radius: 999px; font-weight: 600; color: rgb(var(--ajk-brand)); } .ajk-slot-change .ajk-i { font-size: 16px; } .ajk-slots { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; } .ajk-slot { padding: 14px 0; border: 1px solid rgb(var(--ajk-line)); border-radius: 12px; background: rgb(var(--ajk-canvas)); font-weight: 600; text-align: center; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.45s var(--ajk-spring); } .ajk-slot.is-pick { border-color: rgb(var(--ajk-brand)); background: rgb(var(--ajk-brand)); color: rgb(var(--ajk-on-accent)); font-weight: 700; box-shadow: 0 4px 6px -1px rgb(var(--ajk-brand) / 0.25), 0 0 0 2px rgb(var(--ajk-brand) / 0.25); } .ajk-slot.is-tap { transform: scale(0.97); } /* --- pembayaran --- */ .ajk-pay-label { display: block; padding: 0 4px; font-size: 12px; font-weight: 600; line-height: 16px; color: rgb(var(--ajk-ink-soft)); } /* Segmented control "Tipe pembayaran": flex gap-1 rounded-xl border border-line bg-canvas p-1. */ .ajk-seg { display: flex; gap: 4px; margin-top: 8px; padding: 4px; border: 1px solid rgb(var(--ajk-line)); border-radius: 12px; background: rgb(var(--ajk-canvas)); } .ajk-seg-btn { display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 8px; font-weight: 600; color: rgb(var(--ajk-ink-soft)); transition: background-color 0.15s ease-out, color 0.15s ease-out, box-shadow 0.15s ease-out; } .ajk-book[data-plan='berkala'] .ajk-seg-btn.is-berkala, .ajk-book[data-plan='penuh'] .ajk-seg-btn.is-penuh { background: rgb(var(--ajk-surface)); color: rgb(var(--ajk-ink)); box-shadow: 0 1px 3px rgba(20, 30, 60, 0.1); } .ajk-dp { padding: 2px 8px; border-radius: 999px; background: rgb(var(--ajk-tint)); font-size: 12px; line-height: 16px; color: rgb(var(--ajk-brand)); } /* Tabel termin cuma ada untuk pembayaran berkala. */ .ajk-plan { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.35s var(--aj-ease); } .ajk-book[data-plan='penuh'] .ajk-plan { grid-template-rows: 0fr; } .ajk-plan-in { min-height: 0; overflow: hidden; } /* DataTable.vue compact: bingkai rounded-lg border-line, kepala bg-canvas, baris belang (baris pertama surface, kedua canvas), teks 12px. Kolom status mengambil selebar isinya supaya kapsulnya tidak pernah terlipat. */ .ajk-table { margin-top: 12px; overflow: hidden; border: 1px solid rgb(var(--ajk-line)); border-radius: 8px; background: rgb(var(--ajk-surface)); font-size: 12px; transition: opacity 0.25s ease, transform 0.35s var(--aj-ease); } .ajk-book[data-plan='penuh'] .ajk-table { opacity: 0; transform: translateY(-12px); } .ajk-tr { display: grid; grid-template-columns: 28px minmax(0, 1.5fr) minmax(0, 1fr) max-content 40px; border-bottom: 1px solid rgb(var(--ajk-line)); background: rgb(var(--ajk-canvas)); } .ajk-tr:last-child { border-bottom: 0; } .ajk-tr.is-odd { background: rgb(var(--ajk-surface)); } .ajk-tr > span { display: flex; align-items: center; min-width: 0; padding: 12px 2px; } .ajk-tr > span:first-child { justify-content: center; padding-left: 8px; } /* Kolom "Pilih": dividerLeft */ .ajk-tr > span:last-child { justify-content: center; padding-inline: 8px; border-left: 1px solid rgb(var(--ajk-line)); } .ajk-tr.is-head > span { font-weight: 600; white-space: nowrap; } .ajk-no { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--ajk-surface-muted)); font-weight: 600; } .ajk-due { flex-direction: column; align-items: flex-start !important; justify-content: center; } .ajk-due > span, .ajk-due small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ajk-due small { font-size: 12px; color: rgb(var(--ajk-ink-soft)); } .ajk-st { padding: 4px 10px; border-radius: 999px; background: rgb(var(--ajk-surface-muted)); font-weight: 600; line-height: 16px; color: rgb(var(--ajk-ink-soft)); white-space: nowrap; } .ajk-st.is-now { background: rgb(var(--ajk-brand) / 0.1); color: rgb(var(--ajk-brand)); } .ajk-cb-fill { font-size: 20px; color: rgb(var(--ajk-ink-soft)); } .ajk-cb { width: 16px; height: 16px; border: 1px solid rgb(var(--ajk-line)); border-radius: 4px; background: rgb(var(--ajk-surface)); } /* Kartu sempit (panggung selebar layar ponsel): kolom "Pilih" tidak ikut tampil. Di aplikasi pun DataTable di layar sesempit ini meluap dan digulir ke samping — kolom paling kanannya yang keluar layar — jadi ini potongan yang sama, bukan tabel yang berbeda. */ @container (max-width: 370px) { .ajk-tr { grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) max-content; } .ajk-tr > span:last-child { display: none; } .ajk-tr > span:nth-last-child(2) { padding-right: 8px; } } /* Bilah total + tombol, menempel di dasar layar seperti di formulirnya. */ .ajk-paybar { display: flex; align-items: center; gap: 12px; margin: auto -16px -16px; padding: 12px 16px; border-top: 1px solid rgb(var(--ajk-line)); background: rgb(var(--ajk-surface)); } .ajk-total { display: flex; flex: 1; flex-direction: column; min-width: 0; } .ajk-total small { font-size: 12px; line-height: 20px; color: rgb(var(--ajk-ink-soft)); } .ajk-amt { display: grid; font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: -0.01em; } .ajk-amt > span { grid-area: 1 / 1; transition: opacity 0.2s ease, transform 0.4s var(--ajk-spring); } .ajk-book[data-plan='berkala'] .ajk-amt .is-penuh, .ajk-book[data-plan='penuh'] .ajk-amt .is-berkala { opacity: 0; transform: translateY(8px); } .ajk-paybtn { flex: none; padding: 14px 24px; border-radius: 12px; background: rgb(var(--ajk-brand)); color: rgb(var(--ajk-on-accent)); font-weight: 600; transition: transform 0.15s ease-out, filter 0.15s ease-out; } .ajk-book.is-press .ajk-paybtn { filter: brightness(0.92); transform: scale(0.96); } /* --- berhasil (InvoiceSuccess.vue) --- */ .ajk-pane.is-paid { align-items: center; justify-content: center; text-align: center; /* bg-gradient-to-t from-[#D6E8FF] via-[#EDF4FF] to-canvas */ background: linear-gradient(to top, #d6e8ff, #edf4ff 50%, rgb(var(--ajk-canvas))); } .uc-dark .ajk-pane.is-paid { background: linear-gradient(to top, #0f1b2e, #121722 50%, rgb(var(--ajk-canvas))); } .ajk-ok { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; } .ajk-ok::before, .ajk-ok-ping { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgb(var(--ajk-brand)); } .ajk-ok-ping { opacity: 0; } .ajk-ok .ajk-i { position: relative; font-size: 26px; color: rgb(var(--ajk-on-accent)); } /* ping-slow: sekali, tepat sesudah layarnya muncul. */ .ajk-book[data-scene='paid'] .ajk-ok-ping { animation: ajk-ping 0.5s cubic-bezier(0, 0, 0.2, 1) 0.45s 1 forwards; } @keyframes ajk-ping { 0% { opacity: 0.75; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(2); } } .ajk-ok-title { font-size: 20px; font-weight: 700; line-height: 28px; } .ajk-ok-sub { max-width: 88%; margin-top: 4px !important; font-size: 12px; line-height: 16px; color: rgb(var(--ajk-ink-soft)); } .ajk-detail { width: 100%; margin-top: 16px; padding: 12px; border: 1px solid rgb(var(--ajk-line)); border-radius: 8px; background: rgb(var(--ajk-surface)); text-align: left; } .ajk-detail-name { font-size: 16px; font-weight: 600; line-height: 22px; } .ajk-detail-meta { margin-top: 2px !important; color: rgb(var(--ajk-ink-soft)); } .ajk-detail-sep { display: block; height: 1px; margin: 12px 0; background: rgb(var(--ajk-line)); } .ajk-detail-row { display: flex; align-items: center; gap: 8px; } /* ri-calendar-schedule-line text-[22px] text-ink-soft/40 */ .ajk-detail-row > .ajk-i { font-size: 22px; color: rgb(var(--ajk-ink-soft) / 0.4); } .ajk-detail-row small { display: block; font-size: 12px; line-height: 16px; color: rgb(var(--ajk-ink-soft)); } /* --------------------------------------------------------------------------- 4 · Pengingat otomatis — kartu notifikasi yang sama dengan tumpukan di kartu fitur "Reminder jalan sendiri" (aj-polish.css 5c): ikon aplikasi berlencana kanal, penerima, dan umur notifikasi. Nilainya disalin dari sana supaya kedua tumpukan tidak berselisih. Yang terbaru selalu di puncak; kartu digerakkan transform saja (--i = urutan dari atas). ------------------------------------------------------------------------- */ .ajk-feed { --ajk-n-surface: #ffffff; --ajk-n-line: rgba(15, 38, 90, 0.1); --ajk-n-ink: #27354a; --ajk-n-ink-soft: #6b7a90; --ajk-n-ink-faint: #97a3b6; --ajk-n-brand: #0168fa; --ajk-n-tint: rgba(1, 104, 250, 0.09); --ajk-n-app: #0168fa; --ajk-n-pad: 12px; --ajk-n-lh: 18px; --ajk-n-fs: 13px; --ajk-n-gap: 10px; --ajk-n-card: calc(var(--ajk-n-pad) * 2 + var(--ajk-n-lh) * 3 + 4px); --ajk-n-row: calc(var(--ajk-n-card) + var(--ajk-n-gap)); position: relative; width: min(100%, 380px); height: calc(3 * var(--ajk-n-row) - var(--ajk-n-gap)); font-family: var(--ajk-font); } .uc-dark .ajk-feed { --ajk-n-surface: rgb(var(--color-surface-muted)); --ajk-n-line: rgb(var(--color-line)); --ajk-n-ink: rgb(var(--color-ink)); --ajk-n-ink-soft: rgb(var(--color-ink-soft)); --ajk-n-ink-faint: rgba(159, 170, 184, 0.7); --ajk-n-brand: rgb(var(--color-brand)); --ajk-n-tint: rgba(76, 147, 255, 0.16); } .ajk-ntf { position: absolute; top: 0; left: 0; right: 0; z-index: calc(10 - var(--i, 0)); display: flex; align-items: flex-start; gap: 12px; height: var(--ajk-n-card); padding: var(--ajk-n-pad) 14px; border: 1px solid var(--ajk-n-line); border-radius: 16px; background: var(--ajk-n-surface); box-shadow: var(--aj-shadow-sm); transform: translateY(calc(var(--i, 0) * var(--ajk-n-row))); transform-origin: 50% 0; transition: transform 0.62s var(--ajk-spring), opacity 0.4s ease; } /* Belum datang: menunggu di atas tumpukan, mengecil. */ .ajk-ntf.is-wait { opacity: 0; transform: translateY(-38px) scale(0.84); } .ajk-ntf-ico { position: relative; display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ajk-n-app); color: #fff; transition: transform 0.52s var(--ajk-spring); } .ajk-ntf.is-wait .ajk-ntf-ico { transform: scale(0.5); } .ajk-ntf-ico > svg { width: 54%; height: 54%; } .ajk-ntf-ch { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 18px; height: 18px; border: 2px solid var(--ajk-n-surface); border-radius: 50%; background: #25d366; color: #fff; } .ajk-ntf[data-ch='mail'] .ajk-ntf-ch { background: #d93b3b; } .ajk-ntf-ch > svg { width: 62%; height: 62%; } .ajk-ntf-main { flex: 1 1 auto; min-width: 0; } .ajk-ntf-head { display: flex; align-items: center; gap: 6px; height: var(--ajk-n-lh); } .ajk-ntf-app { flex: none; font-size: var(--ajk-n-fs); font-weight: 700; line-height: var(--ajk-n-lh); letter-spacing: -0.01em; color: var(--ajk-n-ink); } .ajk-ntf-to { flex: 0 1 auto; min-width: 0; overflow: hidden; padding: 0 6px; border-radius: 999px; background: var(--ajk-n-tint); color: var(--ajk-n-brand); font-size: 10.5px; font-weight: 600; line-height: 15px; text-overflow: ellipsis; white-space: nowrap; } .ajk-ntf-time { flex: none; margin-left: auto; color: var(--ajk-n-ink-faint); font-size: 11px; font-weight: 500; line-height: var(--ajk-n-lh); white-space: nowrap; } .ajk-ntf-text { display: -webkit-box; height: calc(var(--ajk-n-lh) * 2); margin: 4px 0 0; overflow: hidden; color: var(--ajk-n-ink-soft); font-size: var(--ajk-n-fs); line-height: var(--ajk-n-lh); -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; } .ajk-ntf-text b { font-weight: 600; color: var(--ajk-n-ink); } /* Panggungnya selebar layar di ponsel: kartunya ikut mengecil sedikit. */ @media (max-width: 400px) { .ajk-feed { --ajk-n-pad: 10px; --ajk-n-lh: 17px; --ajk-n-fs: 12px; --ajk-n-gap: 9px; } .ajk-ntf { gap: 10px; padding-inline: 11px; } .ajk-ntf-ico { width: 34px; height: 34px; } } /* --------------------------------------------------------------------------- Tujuan akhir — "Kamu tinggal fokus kerja". Kartu biru merek: di sinilah relnya berakhir, dan satu-satunya bidang berwarna penuh di seksi ini. ------------------------------------------------------------------------- */ .ajk-end { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; overflow: hidden; border-radius: 24px; background: radial-gradient(90% 120% at 100% 0%, rgba(181, 213, 255, 0.5) 0%, rgba(181, 213, 255, 0) 58%), radial-gradient(70% 90% at 0% 100%, rgba(0, 40, 140, 0.35) 0%, rgba(0, 40, 140, 0) 60%), #0168fa; box-shadow: 0 30px 60px -30px rgba(1, 104, 250, 0.7); color: #fff; } .uc-dark .ajk-end { background: radial-gradient(90% 120% at 100% 0%, rgba(76, 147, 255, 0.35) 0%, rgba(76, 147, 255, 0) 58%), linear-gradient(180deg, #063a91 0%, #0e2a5c 100%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(120, 170, 255, 0.18); } /* Cincin-cincin tipis di sudut: gema simpul-simpul rel. */ .ajk-end::before { content: ''; position: absolute; top: -120px; right: -120px; z-index: -1; width: 360px; height: 360px; border-radius: 50%; background: repeating-radial-gradient(circle, rgba(255, 255, 255, 0.14) 0 1px, transparent 1px 34px); -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); } .ajk-end-title { margin: 0; color: #fff; font-weight: 700; text-wrap: balance; } .ajk-end-text { max-width: 460px; margin: 8px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 1rem; line-height: 1.6; } /* Tombolnya sama dengan CTA hero (.aj-cta-primary di aj-polish.css). */ .ajk-end-cta { flex: none; } /* --------------------------------------------------------------------------- Kemunculan — hanya kalau aj-alur.js memasang .is-armed (ada JS, dan pengunjung tidak meminta gerak dikurangi). Tanpa itu semuanya langsung tampil. ------------------------------------------------------------------------- */ .ajk-body, .ajk-visual, .ajk-end { transition: opacity 0.6s var(--aj-ease), transform 0.8s var(--aj-ease); } .ajk.is-armed .ajk-step:not(.is-in) .ajk-body, .ajk.is-armed .ajk-step:not(.is-in) .ajk-visual, .ajk.is-armed .ajk-step:not(.is-in) .ajk-end { opacity: 0; transform: translateY(32px); } .ajk.is-armed .ajk-step:not(.is-in) .ajk-node { transform: scale(0.6); } .ajk-step.is-in .ajk-visual { transition-delay: 0.12s; } /* --------------------------------------------------------------------------- Layar lebar — rel di tengah, langkah berselang-seling. ------------------------------------------------------------------------- */ @media (min-width: 576px) { .ajk-stage { padding: 32px 24px; } .ajk-end { padding: 36px 40px; } } @media (min-width: 992px) { .ajk { --ajk-node: 48px; --ajk-gap: 72px; } .ajk-rail { left: calc(50% - 1px); } .ajk-node { font-size: 16px; } .ajk-step { grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); column-gap: 0; row-gap: 0; align-items: center; } .ajk-node { grid-column: 2; justify-self: center; } /* Teks di sisi kiri rata kanan, jadi tepinya yang menghadap rel lurus — cerminan langkah di sisi kanan. */ .ajk-body { grid-column: 1; justify-self: end; max-width: 380px; padding-top: 0; text-align: right; } .ajk-visual { grid-column: 3; grid-row: 1; justify-self: start; width: 100%; max-width: 440px; } .ajk-step.is-flip .ajk-body { grid-column: 3; justify-self: start; text-align: left; } .ajk-step.is-flip .ajk-visual { grid-column: 1; justify-self: end; } /* 440 - 2 x 24 = 392: kartu pembayaran di langkah ketiga pas selebar itu, cukup untuk "(Saat pertemuan)" di kolom jatuh temponya. */ .ajk-stage { min-height: 360px; padding: 36px 24px; border-radius: 28px; } /* Tujuan akhir: simpul centang di tengah, kartu di bawahnya selebar dua kolom langkah. */ .ajk-step.is-end { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 28px; } .ajk-step.is-end .ajk-node { grid-column: 1; } .ajk-end { grid-column: 1; flex-direction: row; align-items: center; justify-content: space-between; gap: 32px; width: 100%; max-width: 880px; padding: 40px 48px; border-radius: 28px; } } /* --------------------------------------------------------------------------- Tanpa gerak — aj-alur.js tidak memutar adegan, relnya tetap mengikuti gulir tapi tanpa titik bercahaya, dan tak ada yang berpindah dengan animasi. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .ajk-node, .ajk-body, .ajk-visual, .ajk-end, .ajk-card, .ajk-card *, .ajk-feed, .ajk-feed * { transition: none !important; animation: none !important; } .ajk-rail-head { display: none; } }