/* ============================================================================
   aj-polish.css — lapisan "percantik" untuk halaman marketing.

   Dimuat PALING AKHIR (sesudah aj-custom.css & aj-dark-theme.css) supaya bisa
   memperhalus tema vendor tanpa menyentuh bundel .min.css. Semua aturan di sini
   bersifat aditif: warna, kedalaman (shadow), ritme jarak, dan motion — tanpa
   menulis ulang layout, jadi file yang sama bisa dipakai apa adanya di halaman
   landing lain (about, features, pricing, ...).

   Palet .uc-dark mengikuti aj-dark-theme.css / palet dashboard.
   ========================================================================== */

/* Token --aj-* (palet, bayangan, easing) + blok .uc-dark-nya pindah ke
   aj-custom.css supaya halaman tanpa lapisan polish ikut memakainya;
   aturan di file ini tetap membacanya dari sana. */

/* ---------------------------------------------------------------------------
   1. Header — navbar jadi kaca buram begitu halaman di-scroll
   ------------------------------------------------------------------------- */

.uc-header .uc-navbar-container {
    transition: background-color 0.3s var(--aj-ease), backdrop-filter 0.3s var(--aj-ease),
        box-shadow 0.3s var(--aj-ease), border-color 0.3s var(--aj-ease);
}

.uc-navbar-container.uc-navbar-sticky {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: saturate(170%) blur(14px);
    backdrop-filter: saturate(170%) blur(14px);
    border-bottom-color: var(--aj-line) !important;
    box-shadow: 0 14px 34px -28px rgba(12, 32, 74, 0.75);
}

.uc-dark .uc-navbar-container.uc-navbar-sticky {
    background-color: rgba(15, 19, 26, 0.82) !important;
}

/* 2. Eyebrow / label seksi — pindah ke aj-custom.css supaya halaman tanpa
      lapisan polish (pricing, dll.) memakai pill yang sama. */

/* ---------------------------------------------------------------------------
   3. Hero — gradien datar biru -> #B5D5FF, sama dengan home-3.html (sempat
      diganti gradien mesh yang lebih gelap, lalu dikembalikan). Mode gelap
      menimpanya dengan warna kanvas polos di aj-dark-theme.css.
   ------------------------------------------------------------------------- */

#hero_header {
    position: relative;
    background: linear-gradient(180deg, #0168fa 0%, #b5d5ff 100%);
}

/* Di ponsel bingkai ponselnya tinggi dan menggantung sampai lewat dasar seksi,
   jadi gradiennya sudah rata putih di tengah seksi — bingkainya duduk di atas
   putih, bukan di atas biru. */
@media (max-width: 767.98px) {
    #hero_header {
        background: linear-gradient(180deg, #0168fa 0%, #ffffff 50%);
    }
}

/* lebur ke warna halaman supaya sambungan hero -> seksi profesi tidak "putus" */
#hero_header::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 160px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--aj-page) 100%);
    z-index: 0;
    pointer-events: none;
}

.aj-hero-copy {
    position: relative;
    z-index: 2;
}

.aj-hero-title {
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.aj-hero-lead {
    opacity: 0.88;
}

/* CTA utama: pill putih dengan bayangan supaya "mengambang" di atas biru */
.aj-cta-primary {
    box-shadow: 0 12px 30px -14px rgba(2, 17, 60, 0.7);
    transition: transform 0.25s var(--aj-ease), box-shadow 0.25s var(--aj-ease);
}

.aj-cta-primary:hover,
.aj-cta-primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px -14px rgba(2, 17, 60, 0.8);
}

/* Pilnya tetap putih di mode gelap, tapi .text-primary di sana berubah jadi
   biru terang (76 147 255) yang cuma ±2,9:1 di atas putih. Teksnya dikunci ke
   biru brand mode terang (#0161E9, 5,0:1) — tiga kelas supaya menang dari
   `.uc-dark .text-primary { … !important }`. */
.uc-dark .aj-cta-primary.text-primary {
    color: #0161e9 !important;
}

/* badge App Store / Play Store disamakan tingginya dengan tombol CTA.
   Tanpa border-radius: SVG-nya sudah punya bingkai membulat sendiri, radius
   tambahan malah memangkas sudutnya. */
.aj-store-badge {
    height: 48px;
    width: auto;
    display: block;
    transition: transform 0.25s var(--aj-ease), filter 0.25s var(--aj-ease);
}

.aj-store-badge:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

#aj-hero-seq img,
#aj-hero-seq-2 img {
    filter: drop-shadow(0 34px 60px rgba(3, 19, 62, 0.42));
}

/* Mockup ponsel HARUS tampil utuh: tidak boleh ada wadah yang memotongnya.
   #hero_header sendiri memakai .overflow-hidden (dipakai untuk menahan gradien
   biru), jadi dikecualikan di sini supaya ujung ponsel tidak terpangkas. */
.aj-hero-visual,
.aj-hero-visual .uc-video-scene,
.aj-hero-visual .panel {
    overflow: visible !important;
}

/* Ponsel hero mobile harus selalu berjarak dari tepi layar. .uc-video-scene
   adalah flex item di kolom .d-flex, dan min-width: auto bawaan flex item
   menahannya selebar isinya: .ajd-device 400px (--ajd-w). max-width: 100% di
   bingkainya jadi tidak pernah berlaku, dan di layar yang lebih sempit dari
   432px ponselnya melebar melewati kolom sampai terpotong tepi layar. Dengan
   min-width: 0 ia menciut ke lebar kolom, yang sudah menyisakan jarak 16px
   (padding .container) di kiri-kanan, sama dengan teks di atasnya. Skala
   anime-nya (intro 0.92 x gulir sampai 1.07 = 0.98) tidak pernah melewati 1,
   jadi di puncak gulir pun ponselnya tetap di dalam kolom. */
.aj-hero-visual > .uc-video-scene {
    min-width: 0;
}

/* Ponsel hero desktop. Bingkainya dipindah ke <body> oleh teleport() di
   aj-hero-device.js; yang tinggal di kolom ini pengganjal seukurannya, dan
   lebar isi kolom ini tetap jadi batas lebar ponselnya.

   Tablet (md, ponselnya bertumpuk di bawah teks): kolom memberi napas 64px di
   atas-bawah. Tinggi ponsel = tinggi layar dikurangi navbar (80), napas itu
   (2 x 64), dan 32px supaya awal seksi berikutnya masih mengintip di dasar
   layar. Lebarnya diturunkan dari tinggi itu lewat rasio badan ponsel
   (466 x 982). */
.aj-hero-visual-desk {
    justify-content: center;
    padding-block: 64px;
}

.ajd-device.is-hero-desk {
    width: clamp(200px, calc((100vh - 240px) * 466 / 982), 290px);
}

/* lg ke atas (berdampingan dengan teks): ponselnya dibuat besar.
   - Puncaknya 24px dari atas halaman, jadi menjorok 56px ke navbar (80px) dan
     menimpanya (host teleport-nya z-1000, di atas .uc-header z-999).
     margin-top negatif menarik bingkainya ke atas tanpa ikut memanjangkan
     pengganjal, jadi tinggi hero = ponsel - 56.
   - Dasarnya berdiri di lantai hero, 32px di atas dasar layar. Tinggi
     ponselnya jadi 100vh - 56, lebarnya dibatasi --ajd-w di layar yang tinggi.
   - Ke samping ia merapat ke kanan kolom, berhenti 144px sebelum tepinya.
     Tombol tema berdiri sekitar 150px dari tepi kanan navbar dan kolom ini
     berakhir setengah kolom grid sebelum tepi itu, jadi sudut kanan atas
     ponsel (termasuk rotate 1.5deg) berhenti 25-40px di kiri tombol tema dan
     tidak menimpanya. Kalau ruangnya sempit (lg awal), lebarnya menyusut ke
     lebar isi kolom. 32px di kiri menjaga jaraknya dari teks. */
@media (min-width: 992px) {
    .aj-hero-visual-desk {
        justify-content: flex-end;
        padding: 0 144px 0 32px;
    }

    .ajd-device.is-hero-desk {
        width: clamp(240px, calc((100vh - 56px) * 466 / 982), calc(var(--ajd-w) * 1px));
        margin-top: -56px;
    }
}

/* Skrip crossfade di index.html menulis `overflow: hidden` langsung ke elemen
   ini (inline style). Overlay crossfade-nya berukuran persis sama dengan frame
   dasar, jadi clipping itu tidak dibutuhkan — !important di sini mengalahkan
   inline style tersebut tanpa perlu mengubah skripnya. */
#aj-hero-seq,
#aj-hero-seq-2 {
    overflow: visible !important;
    margin-inline: auto;
}

#aj-hero-seq img,
#aj-hero-seq-2 img {
    width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------------
   5. Kartu fitur — hairline, wash gradien tipis, dan angkat saat hover
   ------------------------------------------------------------------------- */

.feature-item {
    background-color: var(--aj-page);
    background-image: linear-gradient(180deg, rgba(1, 104, 250, 0.045) 0%, rgba(1, 104, 250, 0) 55%);
    border-color: var(--aj-line) !important;
    transition: transform 0.35s var(--aj-ease), box-shadow 0.35s var(--aj-ease),
        border-color 0.35s var(--aj-ease);
}

.uc-dark .feature-item {
    background-color: rgb(var(--color-surface));
    background-image: linear-gradient(
        180deg,
        rgba(120, 170, 255, 0.07) 0%,
        rgba(120, 170, 255, 0) 55%
    );
}

.feature-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--aj-shadow-md);
    border-color: var(--aj-line-strong) !important;
}

.feature-item-content h4 {
    letter-spacing: -0.01em;
}

/* Pada kartu yang teksnya bersebelahan dengan gambar tinggi (mis. "Booking beres
   tanpa bolak-balik chat"), teks menggantung di atas dan menyisakan ruang kosong
   besar di bawahnya. Tinggikan kolom teks lalu ratakan ke tengah secara vertikal.
   Kartu yang punya tautan di kaki ("Lihat metode pembayaran") dibiarkan
   justify-between agar tautannya tetap menempel di bawah. */
.feature-item .row.sm\:child-cols-6 .feature-item-content:not(:has(.uc-link)) {
    height: 100%;
    /* .justify-between milik tema memakai !important, jadi harus dilawan */
    justify-content: center !important;
}

/* panah pada tautan teks di dalam kartu ikut bergeser saat hover */
.feature-item-content .uc-link .icon {
    transition: transform 0.25s var(--aj-ease);
}

.feature-item-content .uc-link:hover .icon {
    transform: translateX(3px);
}

/* ---------------------------------------------------------------------------
   5b. Kalender booking — komponen HTML/CSS asli, menggantikan feature-1.png.
       Meniru gaya datepicker di app (src/assets/main.css .my-datepicker):
       tanggal tersedia = kotak bertepi, tanggal terpilih = isian brand + halo.
       Tanggal "dipilih" bergilir lewat keyframe murni CSS supaya terasa seperti
       klien yang sedang memilih slot — tanpa JS, dan ikut palet light/dark.
   ------------------------------------------------------------------------- */

.aj-cal-stage {
    display: grid;
    place-items: center;
    height: 100%;
    padding: 1.25rem;
}

@media (min-width: 1200px) {
    .aj-cal-stage {
        padding: 2rem;
    }
}

.aj-cal {
    --cal-surface: #ffffff;
    --cal-ink: #27354a;
    --cal-ink-soft: #6b7a90;
    --cal-ink-faint: #a9b4c4;
    --cal-line: rgba(15, 38, 90, 0.12);
    --cal-brand: #0168fa;
    --cal-tint: rgba(1, 104, 250, 0.08);
    --cal-head: #f4f7fd;

    width: min(100%, 340px);
    padding: 1.125rem 1.125rem 1.25rem;
    border-radius: 18px;
    background: var(--cal-surface);
    border: 1px solid var(--cal-line);
    box-shadow: var(--aj-shadow-md);
    color: var(--cal-ink);
    font-size: 0.8125rem;
    line-height: 1.3;
    user-select: none;
}

.uc-dark .aj-cal {
    --cal-surface: rgb(var(--color-surface-muted));
    --cal-ink: rgb(var(--color-ink));
    --cal-ink-soft: rgb(var(--color-ink-soft));
    --cal-ink-faint: rgba(159, 170, 184, 0.45);
    --cal-line: rgb(var(--color-line));
    --cal-brand: rgb(var(--color-brand));
    --cal-tint: rgba(76, 147, 255, 0.14);
    --cal-head: rgba(255, 255, 255, 0.04);
}

/* meta layanan: lokasi & durasi */
.aj-cal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin-bottom: 0.875rem;
    color: var(--cal-ink-soft);
}

.aj-cal-meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.aj-cal-meta .icon {
    font-size: 0.875rem;
    color: var(--cal-brand);
}

/* header bulan */
.aj-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.5rem;
    margin-bottom: 0.5rem;
    border-radius: 10px;
    background: var(--cal-head);
    font-weight: 700;
    color: var(--cal-ink);
}

.aj-cal-head .icon {
    font-size: 0.75rem;
    color: var(--cal-ink-soft);
}

/* grid 7 kolom: baris pertama nama hari, sisanya tanggal */
.aj-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.aj-cal-wd {
    text-align: center;
    padding: 0.25rem 0 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cal-ink-soft);
}

.aj-cal-day {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 9px;
    font-weight: 600;
    color: var(--cal-ink-faint);
    border: 1px solid transparent;
}

/* tanggal di luar bulan berjalan */
.aj-cal-day.is-out {
    opacity: 0.45;
}

/* tanggal yang punya slot kosong: kotak bertepi, teks pekat */
.aj-cal-day.is-open {
    color: var(--cal-ink);
    border-color: var(--cal-line);
    background: var(--cal-surface);
}

/* hari ini: garis aksen tipis, kalah mencolok dari tanggal terpilih */
.aj-cal-day.is-today {
    border-color: rgba(1, 104, 250, 0.45);
    color: var(--cal-brand);
    background: var(--cal-tint);
}

/* tanggal tersedia bisa diklik (assets/js/aj-cal.js merendernya sebagai <button>) */
button.aj-cal-day,
button.aj-cal-slot,
button.aj-cal-nav {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    margin: 0;
    background: none;
    cursor: pointer;
}

.aj-cal-day {
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease,
        box-shadow 0.15s ease;
}

.aj-cal-day.is-open:hover {
    background: var(--cal-tint);
    color: var(--cal-brand);
}

/* tanggal terpilih: isian brand + halo, seperti di app */
.aj-cal-day.is-selected,
.aj-cal-day.is-selected:hover {
    background: var(--cal-brand);
    border-color: var(--cal-brand);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(1, 104, 250, 0.28);
    transform: scale(1.06);
}

.aj-cal-nav {
    display: grid;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    border: 0;
    border-radius: 8px;
    color: var(--cal-ink-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.aj-cal-nav:hover {
    background: var(--cal-tint);
    color: var(--cal-brand);
}

/* jam tersedia untuk tanggal terpilih */
.aj-cal-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--cal-line);
}

.aj-cal-slot {
    padding: 0.375rem 0.625rem;
    border-radius: 999px;
    border: 1px solid var(--cal-line);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cal-ink);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.aj-cal-slot:hover {
    background: var(--cal-tint);
    color: var(--cal-brand);
}

.aj-cal-slot.is-on {
    background: var(--cal-tint);
    border-color: rgba(1, 104, 250, 0.45);
    color: var(--cal-brand);
}

/* ringkasan pilihan: "Kamis, 6 Nov · 09:00" */
.aj-cal-sum {
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cal-ink-soft);
}

.aj-cal :is(button):focus-visible {
    outline: 2px solid var(--cal-brand);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   5c. Tumpukan notifikasi — komponen HTML/CSS asli, menggantikan feature-6.png.
       Kartunya meniru notifikasi di layar ponsel: ikon aplikasi berlencana
       kanal (WhatsApp / email), nama aplikasi, penanda penerima, dan umur
       notifikasi. Sama seperti kalender di 5b, ini dibuat dari HTML supaya
       ikut palet light/dark dan isinya tidak bisa basi di dalam gambar.

       Tiap kartu tingginya dikunci (--ajn-card) dan posisinya cuma transform
       translateY(--i * --ajn-row). Jadi saat notifikasi baru masuk di puncak,
       seluruh tumpukan turun satu baris tanpa satu pun perhitungan layout —
       animasi yang sama yang dipakai di app: transform + pegas, bukan height.
       Urutan masuk/keluarnya dijalankan assets/js/aj-notif.js.
   ------------------------------------------------------------------------- */

.ajn-stage {
    /* Warna kartunya ikut palet halaman (lihat .uc-dark di bawah). */
    --ajn-surface: #ffffff;
    --ajn-line: rgba(15, 38, 90, 0.1);
    --ajn-ink: #27354a;
    --ajn-ink-soft: #6b7a90;
    --ajn-ink-faint: #97a3b6;
    --ajn-brand: #0168fa;
    --ajn-tint: rgba(1, 104, 250, 0.09);
    --ajn-wa: #25d366;
    --ajn-mail: #d93b3b;
    /* Ikon aplikasinya biru rata (bukan gradien) dan sama di kedua tema: ini
       ikon Aturjadwal di layar ponsel, dan ikon aplikasi memang tidak berganti
       warna waktu ponselnya masuk mode gelap. */
    --ajn-app: #0168fa;

    display: grid;
    place-items: center;
    height: 100%;
    padding: 1.25rem;
    /* Kartu fitur ini menumpuk gradien .from-secondary (z-1) di paruh atasnya
       untuk melembutkan tepi PNG lama. Notifikasi tidak perlu dilembutkan —
       justru yang paling baru ada di puncak — jadi tumpukannya naik ke atas
       gradien itu. */
    position: relative;
    z-index: 2;
    container-type: inline-size;
}

.uc-dark .ajn-stage {
    --ajn-surface: rgb(var(--color-surface-muted));
    --ajn-line: rgb(var(--color-line));
    --ajn-ink: rgb(var(--color-ink));
    --ajn-ink-soft: rgb(var(--color-ink-soft));
    --ajn-ink-faint: rgba(159, 170, 184, 0.7);
    --ajn-brand: rgb(var(--color-brand));
    --ajn-tint: rgba(76, 147, 255, 0.16);
}

/* Lemari simbol; tidak pernah ikut dirender sendiri. */
.ajn-defs {
    display: none;
}

/* Tanpa JS: kolom biasa berisi empat notifikasi.

   Geometri barisnya tinggal di sini, bukan di .ajn-stage, karena .ajn-stage-lah
   wadah container-query-nya — dan sebuah wadah tidak bisa dikenai @container
   miliknya sendiri. --ajn-card dihitung dari isinya (padding + satu baris
   kepala + dua baris pesan + jarak antar keduanya) supaya tinggi kartu dan
   langkah tumpukan tidak bisa berselisih. */
.ajn-feed {
    --ajn-pad: 12px;
    --ajn-line-h: 18px;
    --ajn-fs: 13px;
    --ajn-gap: 10px;
    --ajn-icon: 40px;
    --ajn-card: calc(var(--ajn-pad) * 2 + var(--ajn-line-h) * 3 + 4px);
    --ajn-row: calc(var(--ajn-card) + var(--ajn-gap));
    --ajn-stack: 4;
    --ajn-spring: cubic-bezier(0.22, 1.2, 0.36, 1);

    position: relative;
    width: min(100%, 400px);
    display: flex;
    flex-direction: column;
    gap: var(--ajn-gap);
}

/* Begitu aj-notif.js mengambil alih, kartunya dilepas dari aliran dan hanya
   digerakkan transform. Tinggi feed dikunci pada --ajn-stack baris supaya
   kartu fiturnya tidak ikut mengembang-mengempis tiap notifikasi masuk. */
.ajn-feed.is-live {
    display: block;
    height: calc(var(--ajn-stack) * var(--ajn-row) - var(--ajn-gap));
}

.ajn-item {
    flex: none;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    height: var(--ajn-card);
    padding: var(--ajn-pad) 14px;
    border-radius: 16px;
    background: var(--ajn-surface);
    border: 1px solid var(--ajn-line);
    box-shadow: var(--aj-shadow-sm);
}

.ajn-feed.is-live .ajn-item {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* --i: urutan dalam tumpukan (0 = paling baru), --s & --o: kedalaman.
       Ketiganya dipasang aj-notif.js lewat style inline. */
    transform: translateY(calc(var(--i, 0) * var(--ajn-row))) scale(var(--s, 1));
    transform-origin: 50% 0;
    opacity: var(--o, 1);
    z-index: calc(20 - var(--i, 0));
    transition: transform 0.62s var(--ajn-spring), opacity 0.4s ease;
    will-change: transform, opacity;
}

/* Datang: meluncur turun dari atas tumpukan sambil mengembang ke ukurannya,
   sementara tiga kartu di bawahnya turun satu baris. Jaraknya sengaja jauh
   (-38px) supaya kedatangannya kebaca, bukan cuma kedip. */
.ajn-feed.is-live .ajn-item.is-enter {
    transform: translateY(-38px) scale(0.84);
    opacity: 0;
}

/* Ikonnya menyusul sepersekian detik sesudah kartunya — gerak kecil yang bikin
   kartu teratas terbaca "baru masuk". */
.ajn-feed.is-live .ajn-icon {
    transition: transform 0.52s var(--ajn-spring);
}

.ajn-feed.is-live .is-enter .ajn-icon {
    transform: scale(0.5);
}

/* Pergi: yang paling tua meluruh di tempatnya, ditimpa penggantinya. */
.ajn-feed.is-live .ajn-item.is-leave {
    transform: translateY(calc(var(--i, 0) * var(--ajn-row) + 10px)) scale(0.94);
    opacity: 0;
    z-index: 0;
}

/* ikon aplikasi + lencana kanal */
.ajn-icon {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
    width: var(--ajn-icon);
    height: var(--ajn-icon);
    border-radius: 50%;
    background: var(--ajn-app);
    color: #fff;
}

.ajn-icon > svg {
    width: 54%;
    height: 54%;
}

.ajn-ch {
    position: absolute;
    right: -2px;
    bottom: -2px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--ajn-surface);
    background: var(--ajn-wa);
    color: #fff;
}

.ajn-item[data-ch='mail'] .ajn-ch {
    background: var(--ajn-mail);
}

.ajn-ch > svg {
    width: 62%;
    height: 62%;
}

/* badan kartu */
.ajn-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ajn-head {
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--ajn-line-h);
}

.ajn-app {
    flex: none;
    font-size: var(--ajn-fs);
    font-weight: 700;
    line-height: var(--ajn-line-h);
    letter-spacing: -0.01em;
    color: var(--ajn-ink);
}

/* "ke klien" / "ke kamu" — inti janji kartunya: dua-duanya diingetin. */
.ajn-to {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--ajn-tint);
    color: var(--ajn-brand);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15px;
}

.ajn-time {
    flex: none;
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    line-height: var(--ajn-line-h);
    white-space: nowrap;
    color: var(--ajn-ink-faint);
}

.ajn-text {
    margin: 4px 0 0;
    height: calc(var(--ajn-line-h) * 2);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    font-size: var(--ajn-fs);
    line-height: var(--ajn-line-h);
    color: var(--ajn-ink-soft);
}

.ajn-text b {
    font-weight: 600;
    color: var(--ajn-ink);
}

/* Kartu fiturnya separuh kolom di layar lebar dan penuh di ponsel, jadi
   patokannya lebar wadah sendiri, bukan lebar layar. */
@container (max-width: 330px) {
    .ajn-feed {
        --ajn-pad: 10px;
        --ajn-line-h: 17px;
        --ajn-fs: 12px;
        --ajn-gap: 9px;
        --ajn-icon: 34px;
    }

    .ajn-item {
        gap: 10px;
        padding-inline: 11px;
        border-radius: 14px;
    }

    .ajn-ch {
        width: 16px;
        height: 16px;
    }

    .ajn-to,
    .ajn-time {
        font-size: 10px;
    }
}

/* Tanpa gerak: aj-notif.js tidak menjalankan gilirannya, tumpukannya langsung
   terisi penuh. Transisinya dimatikan supaya pengisian itu pun tidak bergerak. */
@media (prefers-reduced-motion: reduce) {
    .ajn-feed.is-live .ajn-item,
    .ajn-feed.is-live .ajn-icon {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   5d. Pemilih tipe pertemuan — komponen HTML/CSS asli, menggantikan lottie
       feature-2.lottie. Bentuknya kolom "Tipe pertemuan" di app
       (src/components/Inputs/LokasiLayanan.vue): pemicu dropdown, panel tiga
       pilihan, lalu isian yang ikut berganti menurut pilihannya — sakelar
       "biarkan klien yang menentukan lokasi" untuk Di tempat, tautan meeting
       yang dibuat otomatis untuk Zoom / Google Meet.

       Lottie lamanya memanggil pilihan pertamanya "Pertemuan di tempat",
       sebutan yang sudah tidak ada lagi di app; di sini kata-katanya disalin
       apa adanya dari komponennya, jadi tidak bisa menyimpang sendiri.

       Yang sedang terpilih ditentukan satu atribut saja: [data-ajm-pick] di
       .ajm-field. Tiga kelompok elemen (isi pemicu, baris pilihan, panel
       hasil) menandai dirinya dengan [data-ajm-for] yang sama, dan aturan di
       bawah yang mencocokkan keduanya. assets/js/aj-meet.js cuma menggilir
       nilai atribut itu — tidak satu pun gaya ditulis dari JS, jadi tanpa JS
       kartunya tetap utuh dengan "Di tempat" terpilih.
   ------------------------------------------------------------------------- */

.ajm-stage {
    --ajm-surface: #ffffff;
    --ajm-canvas: #f5f6fa;
    --ajm-hover: #eef2f8;
    --ajm-ink: #27354a;
    --ajm-ink-soft: #6b7a90;
    --ajm-ink-faint: #a9b4c4;
    --ajm-line: rgba(15, 38, 90, 0.12);
    --ajm-brand: #0168fa;
    --ajm-tint: rgba(1, 104, 250, 0.08);
    --ajm-success: #0f7a55;

    display: grid;
    place-items: center;
    height: 100%;
    padding: 1.25rem;
    /* Kartu fiturnya menumpuk gradien .from-secondary (z-1) di paruhnya;
       pemilihnya harus tetap terbaca penuh, jadi naik ke atas gradien itu. */
    position: relative;
    z-index: 2;
    container-type: inline-size;
}

.uc-dark .ajm-stage {
    --ajm-surface: rgb(var(--color-surface-muted));
    --ajm-canvas: rgb(var(--color-canvas));
    --ajm-hover: rgba(255, 255, 255, 0.05);
    --ajm-ink: rgb(var(--color-ink));
    --ajm-ink-soft: rgb(var(--color-ink-soft));
    --ajm-ink-faint: rgba(159, 170, 184, 0.7);
    --ajm-line: rgb(var(--color-line));
    --ajm-brand: rgb(var(--color-brand));
    --ajm-tint: rgba(76, 147, 255, 0.16);
    --ajm-success: rgb(var(--color-success));
}

/* Lemari simbol; tidak pernah ikut dirender sendiri. */
.ajm-defs {
    display: none;
}

.ajm-field {
    --ajm-pad: 12px;
    --ajm-fs: 14px;
    /* Tinggi panel hasil dikunci supaya kartunya tidak mengembang-mengempis
       tiap pilihan berganti: ketiganya bertumpuk di ruang yang sama, dan yang
       berpindah cuma opacity + transform. Angkanya mengikuti panel yang
       paling tinggi — "Di tempat", yang labelnya jatuh ke dua baris. */
    --ajm-result-h: 96px;

    width: min(100%, 340px);
    padding: 1.125rem;
    border-radius: 18px;
    background: var(--ajm-surface);
    border: 1px solid var(--ajm-line);
    box-shadow: var(--aj-shadow-md);
    color: var(--ajm-ink);
    user-select: none;
}

.ajm-label {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: var(--ajm-ink);
}

/* pemicu dropdown: isinya ikut pilihan yang aktif */
.ajm-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: var(--ajm-pad);
    border: 1px solid var(--ajm-line);
    border-radius: 4px;
    background: var(--ajm-surface);
}

.ajm-stack {
    position: relative;
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
}

.ajm-pick {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    font-size: var(--ajm-fs);
    line-height: 22px;
    opacity: 0;
    transform: translateY(-5px);
}

.ajm-pick-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajm-caret {
    flex: none;
    width: 20px;
    height: 20px;
    color: var(--ajm-ink);
}

/* panel pilihan — di app ini isi dropdown-nya, dan memang tampil terbuka
   begitu kolomnya disentuh */
.ajm-menu {
    margin-top: 10px;
    border: 1px solid var(--ajm-line);
    border-radius: 8px;
    background: var(--ajm-surface);
    box-shadow: var(--aj-shadow-sm);
    overflow: hidden;
}

.ajm-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: var(--ajm-pad);
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--ajm-fs);
    line-height: 22px;
    color: var(--ajm-ink);
    text-align: left;
    cursor: pointer;
}

.ajm-opt:hover {
    background: var(--ajm-hover);
    color: var(--ajm-brand);
}

.ajm-opt-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajm-check {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--ajm-brand);
    opacity: 0;
    transform: scale(0.6);
}

/* hasil pilihan: sakelar lokasi, atau tautan meeting */
.ajm-result {
    position: relative;
    height: var(--ajm-result-h);
    margin-top: 12px;
}

.ajm-panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.ajm-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px var(--ajm-pad);
    border: 1px solid var(--ajm-line);
    border-radius: 4px;
    background: var(--ajm-canvas);
    font-size: var(--ajm-fs);
    line-height: 22px;
}

.ajm-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.ajm-link {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ajm-ink-soft);
}

/* sakelar, ukurannya sama dengan ToggleSwitch.vue: 32x20, knop 12 */
.ajm-switch {
    position: relative;
    flex: none;
    width: 32px;
    height: 20px;
    border-radius: 999px;
    border: 1px solid var(--ajm-line);
    background: var(--ajm-success);
}

.ajm-switch::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--ajm-surface);
}

.ajm-note {
    margin: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--ajm-ink-soft);
}

/* ikon: satu kotak tetap supaya tiga logo yang rasionya beda tetap selurus */
.ajm-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
}

.ajm-svg {
    display: block;
}

.ajm-svg.is-loc {
    width: 18px;
    height: 18px;
    color: var(--ajm-brand);
}

.ajm-svg.is-zoom {
    width: 20px;
    height: 20px;
}

.ajm-svg.is-meet {
    width: 20px;
    height: 15.5px;
}

/* Perpindahannya baru dianimasikan sesudah aj-meet.js menandai kartunya hidup.
   Tanpa penanda ini, lembar gaya yang sampai belakangan bisa membuat ketiga
   keadaan "memudar masuk" di muat pertama — tiga pilihan bertumpuk sesaat,
   persis yang dihindari waktu kartunya masih gambar. */
.ajm-field.is-live :is(.ajm-pick, .ajm-panel) {
    transition: opacity 0.28s var(--aj-ease), transform 0.28s var(--aj-ease);
}

.ajm-field.is-live .ajm-opt {
    transition: background-color 0.2s var(--aj-ease), color 0.2s var(--aj-ease);
}

.ajm-field.is-live .ajm-check {
    transition: opacity 0.2s var(--aj-ease), transform 0.28s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* Satu-satunya tempat "yang sedang terpilih" diterjemahkan jadi tampilan:
   isi pemicu & panel hasilnya muncul, barisnya menyala. */
.ajm-field[data-ajm-pick='loc'] :is(.ajm-pick, .ajm-panel)[data-ajm-for='loc'],
.ajm-field[data-ajm-pick='zoom'] :is(.ajm-pick, .ajm-panel)[data-ajm-for='zoom'],
.ajm-field[data-ajm-pick='meet'] :is(.ajm-pick, .ajm-panel)[data-ajm-for='meet'] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.ajm-field[data-ajm-pick='loc'] .ajm-opt[data-ajm-for='loc'],
.ajm-field[data-ajm-pick='zoom'] .ajm-opt[data-ajm-for='zoom'],
.ajm-field[data-ajm-pick='meet'] .ajm-opt[data-ajm-for='meet'] {
    background: var(--ajm-tint);
    color: var(--ajm-brand);
}

.ajm-field[data-ajm-pick='loc'] .ajm-opt[data-ajm-for='loc'] .ajm-check,
.ajm-field[data-ajm-pick='zoom'] .ajm-opt[data-ajm-for='zoom'] .ajm-check,
.ajm-field[data-ajm-pick='meet'] .ajm-opt[data-ajm-for='meet'] .ajm-check {
    opacity: 1;
    transform: none;
}

/* Kartu fiturnya separuh kolom di layar lebar dan penuh di ponsel, jadi
   patokannya lebar wadah sendiri, bukan lebar layar. */
@container (max-width: 330px) {
    .ajm-field {
        --ajm-pad: 10px;
        /* label sakelar & keterangannya sama-sama jatuh ke dua baris di sini */
        --ajm-result-h: 110px;

        padding: 0.875rem;
        border-radius: 14px;
    }
}

/* Tanpa gerak: aj-meet.js tidak menggilir pilihannya, dan perpindahan yang
   dipicu klik pun langsung jadi tanpa transisi. */
@media (prefers-reduced-motion: reduce) {
    .ajm-field.is-live :is(.ajm-pick, .ajm-panel, .ajm-opt, .ajm-check) {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   5e. Kartu statistik — komponen HTML/CSS asli, menggantikan feature-5.png.
       Kartu "Tren jadwal" dari halaman Statistik di app, disalin apa adanya:
       StatisticsView/Components/ChartCard.vue + GranularityTabs.vue +
       Sections/ScheduleSection.vue. Kartunya mengisi seluruh tinggi kartu
       fitur, jadi bidang grafiknya kira-kira setinggi aslinya di app (240-280px).

       Grafiknya HTML, bukan kanvas: Chart.js tidak ikut dimuat di halaman
       marketing, dan kanvas juga tidak bisa mewarisi palet light/dark. Sumbu,
       garis bantu, lebar batang, dan sudut membulat di puncaknya mengikuti
       BAR_STYLE/buildBarOptions di StatisticsView/useTrendChart.js.

       Angka & giliran satuan waktunya dijalankan assets/js/aj-statistik.js.
   ------------------------------------------------------------------------- */

.ajs-stage {
    /* Warna kartunya ikut palet halaman (lihat .uc-dark di bawah). */
    --ajs-surface: #ffffff;
    --ajs-canvas: #f5f6fa;
    --ajs-line: rgba(15, 38, 90, 0.12);
    --ajs-grid: rgba(15, 38, 90, 0.09);
    --ajs-ink: #27354a;
    --ajs-ink-soft: #5a6880;
    --ajs-brand: #0161e9;
    --ajs-brand-hover: #0158d4;
    --ajs-tint: rgba(1, 97, 233, 0.1);

    --ajs-pad: 16px;
    --ajs-fs: 13.5px;
    --ajs-fs-sm: 11px;
    --ajs-gutter: 30px;
    --ajs-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    /* easeOutQuart — sama dengan animasi batang Chart.js di app. */
    --ajs-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

    display: grid;
    place-items: center;
    height: 100%;
    padding: 0.75rem;
    /* Kartu fitur ini menumpuk gradien .from-secondary (z-1) di paruh bawahnya
       untuk melembutkan tepi PNG lama; kartu statistiknya naik ke atas gradien
       itu supaya angkanya tidak ikut diredupkan. */
    position: relative;
    z-index: 2;
    container-type: inline-size;
}

.uc-dark .ajs-stage {
    --ajs-surface: rgb(var(--color-surface));
    --ajs-canvas: rgb(var(--color-canvas));
    --ajs-line: rgb(var(--color-line));
    --ajs-grid: rgb(var(--color-line) / 0.55);
    --ajs-ink: rgb(var(--color-ink));
    --ajs-ink-soft: rgb(var(--color-ink-soft));
    --ajs-brand: rgb(var(--color-brand));
    --ajs-brand-hover: #6fa8ff;
    --ajs-tint: rgba(76, 147, 255, 0.16);
}

/* Lemari simbol; tidak pernah ikut dirender sendiri. */
.ajs-defs {
    display: none;
}

/* Kartunya setinggi ruang yang ada, bukan setinggi isinya: yang memanjang
   adalah bidang grafiknya (lihat .ajs-plot), persis seperti kartu di app yang
   grafiknya jauh lebih tinggi daripada kepala kartunya. Batas 440px menahan
   grafiknya melar aneh kalau suatu saat kartu fiturnya dibuat lebih tinggi.
   min-width: 0 wajib — ini item grid, dan tanpa itu judul rentang yang panjang
   melebarkan kartunya alih-alih dipendekkan. */
.ajs-card {
    width: min(100%, 440px);
    min-width: 0;
    height: 100%;
    max-height: 440px;
    display: flex;
    flex-direction: column;
    padding: var(--ajs-pad);
    border-radius: 16px;
    background: var(--ajs-surface);
    border: 1px solid var(--ajs-line);
    box-shadow: var(--aj-shadow-sm);
    color: var(--ajs-ink);
    font-size: var(--ajs-fs);
    line-height: 1.4;
    user-select: none;
}

/* kepala kartu: ikon persegi membulat, judul, lalu angka total periode ini */
.ajs-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ajs-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--ajs-tint);
    color: var(--ajs-brand);
}

.ajs-ico svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}

.ajs-head-main {
    flex: 1 1 auto;
    min-width: 0;
}

.ajs-title {
    margin: 0;
    font-size: var(--ajs-fs);
    font-weight: 600;
    line-height: 20px;
    color: var(--ajs-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajs-total {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
    color: var(--ajs-ink);
    font-variant-numeric: tabular-nums;
}

.ajs-total-unit {
    font-size: var(--ajs-fs);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--ajs-ink-soft);
}

/* kontrol: geser periode di kiri, satuan waktu di kanan */
.ajs-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

/* Kotak satuan waktu tidak boleh menyusut — keempat labelnya harus tetap
   terbaca utuh — jadi pemilih periode yang mengalah dan judulnya dipendekkan.
   Aturan yang sama dipakai di ChartCard.vue. */
.ajs-range {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--ajs-line);
    background: var(--ajs-canvas);
}

.ajs-nav {
    flex: none;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--ajs-ink-soft);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.ajs-nav svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.ajs-nav:hover:not(:disabled) {
    background: var(--ajs-surface);
    color: var(--ajs-ink);
}

.ajs-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.ajs-range-label {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 2px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ajs-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajs-seg {
    position: relative;
    flex: none;
    display: flex;
    padding: 3px;
    border-radius: 11px;
    border: 1px solid var(--ajs-line);
    background: var(--ajs-canvas);
}

/* Penanda geser selebar seperempat kotak; --i dipasang aj-statistik.js. */
.ajs-seg-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 4);
    border-radius: 8px;
    border: 1px solid var(--ajs-line);
    background: var(--ajs-surface);
    box-shadow: 0 1px 2px rgba(12, 32, 74, 0.06);
    transform: translateX(calc(var(--i, 2) * 100%));
    transition: transform 320ms var(--ajs-spring);
    pointer-events: none;
}

.ajs-seg-btn {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    padding: 3px 6px;
    border: 0;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 16px;
    color: var(--ajs-ink-soft);
    cursor: pointer;
    transition: color 0.2s ease;
}

.ajs-seg-btn[aria-pressed='true'] {
    color: var(--ajs-brand);
}

.ajs-seg-btn:hover[aria-pressed='false'] {
    color: var(--ajs-ink);
}

/* Bidang grafik memakan semua sisa tinggi kartu; pita label sumbu-x sudah ikut
   terhitung di dalamnya, jadi kartunya tidak pernah menggulir di dalam dirinya
   sendiri. */
.ajs-chart {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.ajs-plot {
    position: relative;
    flex: 1 1 auto;
    min-height: 120px;
    padding-left: var(--ajs-gutter);
}

.ajs-grid {
    position: absolute;
    inset: 0 0 0 var(--ajs-gutter);
}

/* Garis mendatar solid setipis mungkin; garis putus-putus terbaca sebagai
   "proyeksi" padahal ini sekadar kisi. */
.ajs-gl {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--y);
    height: 1px;
    background: var(--ajs-grid);
}

.ajs-gl i {
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    font-style: normal;
    font-size: var(--ajs-fs-sm);
    line-height: 1;
    color: var(--ajs-ink-soft);
    font-variant-numeric: tabular-nums;
}

.ajs-cols {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 100%;
}

/* Seluruh kolom jadi sasaran sentuh, bukan hanya batangnya — sama seperti
   interaction.mode 'index' di grafik app. */
.ajs-col {
    position: relative;
    flex: 1 1 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 100%;
}

/* 64% = categoryPercentage 0,9 x barPercentage 0,72 di useTrendChart.js;
   membulat di puncak saja, supaya batang pendek tidak terlihat mengambang. */
.ajs-bar {
    width: 64%;
    max-width: 24px;
    height: var(--h, 0%);
    border-radius: 4px 4px 0 0;
    background: var(--ajs-brand);
    transition: height 0.42s var(--ajs-quart), background-color 0.15s ease;
}

.ajs-col:hover .ajs-bar {
    background: var(--ajs-brand-hover);
}

.ajs-tip {
    position: absolute;
    left: 50%;
    bottom: calc(var(--h, 0%) + 8px);
    z-index: 3;
    padding: 5px 10px 6px;
    border-radius: 10px;
    background: var(--ajs-surface);
    border: 1px solid var(--ajs-line);
    box-shadow: var(--aj-shadow-md);
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
    pointer-events: none;
}

.ajs-col:hover .ajs-tip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ajs-tip i {
    display: block;
    font-style: normal;
    font-size: var(--ajs-fs-sm);
    font-weight: 600;
    line-height: 15px;
    color: var(--ajs-ink-soft);
}

.ajs-tip b {
    display: block;
    font-size: var(--ajs-fs);
    font-weight: 600;
    line-height: 18px;
    color: var(--ajs-ink);
}

.ajs-xaxis {
    flex: none;
    display: flex;
    margin-top: 8px;
    padding-left: var(--ajs-gutter);
}

.ajs-x {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: var(--ajs-fs-sm);
    line-height: 15px;
    color: var(--ajs-ink-soft);
    white-space: nowrap;
    overflow: hidden;
}

/* Kartu fiturnya separuh kolom di layar lebar dan penuh di ponsel, jadi
   patokannya lebar wadah sendiri, bukan lebar layar.

   Ambang pertama: dua kotak berdampingan tidak lagi muat tanpa memotong judul
   rentangnya, jadi ditumpuk - ChartCard.vue juga menumpuknya di lebar segini. */
@container (max-width: 440px) {
    .ajs-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-top: 12px;
    }

    .ajs-seg {
        flex: 1 1 auto;
    }
}

/* Ambang kedua: kartunya benar-benar sempit, tipografinya ikut mengecil. */
@container (max-width: 340px) {
    .ajs-stage {
        --ajs-pad: 13px;
        --ajs-fs: 12.5px;
        --ajs-fs-sm: 10px;
        --ajs-gutter: 25px;

        padding: 0.625rem;
    }

    .ajs-ico {
        width: 32px;
        height: 32px;
        border-radius: 10px;
    }

    .ajs-ico svg {
        width: 18px;
        height: 18px;
    }

    .ajs-total {
        font-size: 24px;
        line-height: 32px;
    }

    .ajs-seg-btn,
    .ajs-range-label {
        font-size: 11px;
    }
}

/* Tanpa gerak: aj-statistik.js tidak menggilir satuan waktunya, dan tidak ada
   yang bergeser atau tumbuh sendiri. */
@media (prefers-reduced-motion: reduce) {
    .ajs-bar,
    .ajs-seg-thumb,
    .ajs-tip {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   5f. Orbit metode pembayaran — komponen HTML/CSS asli, menggantikan
       lottie/feature-4.lottie.

       Susunannya diukur langsung dari lottie lamanya, bukan dikira-kira: busur
       abu-abunya dipisahkan dari tangkapan layar, lalu dicarikan satu titik
       pusat yang membuat semua titiknya jatuh ke sedikit jari-jari yang sama.
       Hasilnya pusat orbit ada DI LUAR panggung, 52% dari kiri dan 120% dari
       atas — jadi di bawah bingkai kartu — dengan empat lintasan berjari-jari
       40, 59, 78, dan 98% sisi panggung. Karena pusatnya di luar, yang terlihat
       cuma potongan busurnya, melengkung seperti riak; itulah bentuk yang
       dipakai lottie lamanya.

       Kepingnya benar-benar mengorbit: lintasannya berputar penuh 360°, jadi
       tiap keping masuk dari tepi kiri, menyeberangi panggung, lalu keluar di
       kanan — bukan mengayun bolak-balik di tempat.

       Konsekuensinya yang menentukan seluruh rancangan ini: karena pusatnya di
       luar bingkai, satu keping cuma terlihat 17–33% dari satu putaran (makin
       luar lintasannya, makin sempit jendelanya — lintasan terluar cuma 61°
       dari 360°). Isi lima keping saja seperti satu rombongan, dan panggungnya
       kosong sebagian besar waktu. Karena itu ke-14 metode dipasang sekaligus
       di 14 kursi, dan kursi-kursi itu dikelompokkan jadi tiga sektor selebar
       120°: e-wallet, virtual account, lalu kartu. Seluruh lintasan berputar
       dengan laju sudut yang SAMA (rigid), jadi sektornya utuh saat melintas —
       yang terbaca tetap "satu rombongan pada satu waktu", persis lottie
       lamanya, cuma sekarang pergantiannya karena benar-benar berorbit masuk
       dan keluar bingkai, bukan karena gambar yang ditukar diam-diam.

       Geometrinya dihitung dari lebar panggung (cqw), dan panggungnya persegi
       karena <figure>-nya .ratio-1x1 — jadi 1cqw = 1% sisi. Semua jari-jari dan
       ukuran keping memakai satuan itu, sehingga orbitnya ikut mengecil utuh di
       ponsel tanpa satu pun media query.

       Cara mendudukkannya: .ajo-ring yang berputar, bukan kepingnya. Tiap keping
       didudukkan lewat rotate(sudut) translateY(-jari-jari) rotate(-sudut) —
       dua rotasi yang saling meniadakan, jadi kepingnya sampai di tempatnya
       tanpa ikut miring. Sisa miringnya cuma dari lintasannya, dan itu
       dibatalkan animasi yang sama dengan arah terbalik di .ajo-badge.

       Tidak ada JS sama sekali di komponen ini: semua logonya ada di markup dan
       yang menggerakkan cuma satu @keyframes.
   ------------------------------------------------------------------------- */

.ajo-stage {
    /* Garis lintasan & bayangan keping ikut palet halaman (lihat .uc-dark). */
    --ajo-line: rgba(15, 38, 90, 0.16);
    --ajo-chip-line: rgba(15, 38, 90, 0.07);
    --ajo-chip-shadow: 0 0.6cqw 2cqw rgba(15, 38, 90, 0.12);

    /* Keping logo tetap putih di kedua tema. Logo metode pembayaran dirancang
       untuk latar terang — mastercard punya tulisan hitam, Amex sebuah kotak
       biru — jadi kepingnya diperlakukan seperti ikon aplikasi: bentuk dan
       warnanya tidak ikut berganti waktu halamannya masuk mode gelap. Alasan
       yang sama dipakai --ajn-app di 5c. */
    --ajo-chip: #ffffff;

    /* Pusat orbit & jari-jari lintasan, hasil pengukuran di atas. */
    --ajo-cx: 52cqw;
    --ajo-cy: 120cqw;
    --ajo-ra: 40cqw;
    --ajo-rb: 59cqw;
    --ajo-rc: 78cqw;
    --ajo-rd: 98cqw;
    --ajo-badge: 17cqw;

    /* Satu putaran penuh = tiga sektor melintas, jadi tiap rombongan memegang
       panggung sekitar sepertiga dari angka ini — jadi satu angka ini yang
       menyetel seluruh kecepatannya, tidak ada yang lain.

       Angkanya ditentukan lintasan terluar, bukan selera: jendela tampaknya
       cuma 61° dari 360°, jadi keping di sana cuma terlihat 17% dari satu
       putaran. Pada 26s itu sekitar 4,5 detik — cukup untuk mengenali satu
       logo tanpa harus menunggu. Lintasan terdalam punya jendela 120°, jadi
       kepingnya bertahan dua kali lebih lama, dan satu rombongan penuh
       memegang panggung sekitar 9 detik. */
    --ajo-t: 26s;

    /* Panggungnya HARUS absolut, dan itu ditulis di sini, bukan dititipkan ke
       `.ratio > *` milik tema: spesifisitas keduanya sama-sama (0,1,0) dan
       aj-polish.css dimuat belakangan, jadi apa pun yang ditulis di sini yang
       menang. Kalau dibiarkan `relative`, seluruh isi panggung ini absolut,
       tingginya runtuh jadi 0, lalu overflow: hidden memotong semuanya. */
    position: absolute;
    inset: 0;
    overflow: hidden;
    container-type: inline-size;

    /* Keping keluar-masuk lewat ketiga tepi: kiri dan kanan untuk lintasan luar,
       bawah untuk lintasan dalam. Tanpa topeng ini mereka terpotong mendadak di
       garis panggung — dan karena panggung cuma separuh kartu, potongannya
       jatuh di tengah kartu, bukan di tepinya, yang terbaca seperti cacat
       render. Dua lapis topeng: satu mendatar (meredup di kiri & kanan), satu
       tegak (meredup di bawah), lalu diiris. Peramban yang tidak mengenal
       mask-composite mengabaikan irisannya dan kembali ke perilaku lama —
       terpotong, tapi tidak rusak. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent),
        linear-gradient(to top, transparent, #000 13%);
    mask-image: linear-gradient(to right, transparent, #000 13%, #000 87%, transparent),
        linear-gradient(to top, transparent, #000 13%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}

.uc-dark .ajo-stage {
    --ajo-line: rgba(255, 255, 255, 0.14);
    --ajo-chip-line: rgba(255, 255, 255, 0.14);
    --ajo-chip-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.45);
}

/* ── Lintasan ─────────────────────────────────────────────────────────────
   Tiap lintasan sekaligus dua hal: busur yang terlihat, dan sumbu yang memutar
   keping di dalamnya. Lingkarannya digambar utuh; yang memotongnya jadi busur
   cuma overflow: hidden milik panggung.

   Semuanya memakai --ajo-t yang sama. Itu disengaja: laju sudut yang sama
   membuat susunan antar-lintasan tidak pernah berubah, jadi satu sektor
   melintas sebagai satu rombongan utuh. */
.ajo-ring {
    position: absolute;
    left: var(--ajo-cx);
    top: var(--ajo-cy);
    margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    border: 1px solid var(--ajo-line);
    border-radius: 50%;
    animation: ajo-spin var(--ajo-t) linear infinite;
}

.ajo-ring.is-ra {
    --r: var(--ajo-ra);
}

.ajo-ring.is-rb {
    --r: var(--ajo-rb);
}

.ajo-ring.is-rc {
    --r: var(--ajo-rc);
}

.ajo-ring.is-rd {
    --r: var(--ajo-rd);
}

@keyframes ajo-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Dudukan keping: berangkat dari pusat lintasan, diputar ke sudutnya, digeser
   sejauh jari-jari, lalu diputar balik supaya isinya kembali tegak. */
.ajo-seat {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--ajo-badge);
    height: var(--ajo-badge);
    margin: calc(var(--ajo-badge) / -2) 0 0 calc(var(--ajo-badge) / -2);
    transform: rotate(var(--seat)) translateY(calc(var(--r) * -1)) rotate(calc(var(--seat) * -1));
}

/* Pembatal putaran lintasan: keyframes dan durasi persis sama, arahnya yang
   dibalik — jadi logonya tidak pernah miring satu derajat pun. */
.ajo-badge {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ajo-chip);
    border: 1px solid var(--ajo-chip-line);
    box-shadow: var(--ajo-chip-shadow);
    animation: ajo-spin var(--ajo-t) linear infinite reverse;
}

/* ── Logo ─────────────────────────────────────────────────────────────────
   Berkas di assets/images/aj/pay/ membawa width/height-nya sendiri, jadi img-nya
   punya ukuran intrinsik dan dua batas di bawah ini cukup untuk mengecilkannya
   proporsional — tidak ada width yang dipaksakan, tidak ada logo yang gepeng.

   --fit ditulis di markup per logo: wordmark memanjang (CIMB Niaga, Permata,
   mandiri) boleh memakai hampir selebar keping, ikon persegi (ShopeePay,
   Amex) ditahan lebih kecil supaya tidak menyentuh tepi. */
.ajo-logo {
    max-width: calc(100% * var(--fit, 0.72));
    max-height: 66%;
}

/* Tanpa gerak: orbitnya berhenti, dan yang tersisa satu diagram diam. Sektor
   pertama (e-wallet & QRIS) kebetulan memang yang sedang di depan pada detik
   nol, jadi yang terlihat sama dengan bingkai pembuka animasinya. */
@media (prefers-reduced-motion: reduce) {
    .ajo-ring,
    .ajo-badge {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   5g. Daftar jadwal tersimpan — komponen HTML/CSS asli, menggantikan lottie
       feature-3.lottie. Bentuknya halaman Arsip jadwal di app: kolom cari +
       pil status (src/views/BookingView/BookingIndex.vue) di atas, lalu kartu
       jadwalnya (src/views/BookingView/Cards/BookingCard.vue) — status,
       layanan, tanggal & jam berikut zona waktunya, klien, lokasi, dan
       ringkasan pembayaran. Sama seperti komponen 5 lainnya, dibuat dari HTML
       supaya ikut palet light/dark dan isinya tidak bisa basi di dalam gambar.

       Satu adegan = satu saringan yang sedang menyala. Yang berganti cuma
       kartunya: grup lama dilepas ke position:absolute lalu meluruh, grup baru
       masuk di barisnya — jadi dua grup bergerak bersamaan tanpa satu pun
       perhitungan layout, cuma transform + opacity. Arahnya dua macam, naik
       untuk saringan status dan menyamping untuk pencarian; keduanya dipilih
       dari assets/js/aj-jadwal.js lewat data-arah.
   ------------------------------------------------------------------------- */

.ajj-stage {
    /* Warna kartunya ikut palet halaman (lihat .uc-dark di bawah), nilainya
       diambil dari palet app di src/assets/main.css. */
    --ajj-surface: #ffffff;
    --ajj-muted: #eaecef;
    --ajj-line: rgba(15, 38, 90, 0.1);
    --ajj-ink: #27354a;
    --ajj-ink-soft: #5a6880;
    --ajj-brand: #0161e9;
    --ajj-tint: #eaeafa;
    --ajj-danger: #c2352b;
    --ajj-chip-todo: rgba(1, 97, 233, 0.1);
    --ajj-chip-done: rgba(39, 53, 74, 0.1);
    --ajj-chip-off: rgba(194, 53, 43, 0.1);
    --ajj-ring: rgba(1, 97, 233, 0.15);
    --ajj-shadow: 0 1px 2px rgba(12, 32, 74, 0.04), 0 14px 30px -22px rgba(12, 32, 74, 0.55);

    --ajj-spring: cubic-bezier(0.22, 1.2, 0.36, 1);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    /* Tingginya DIPATOK, jangan diganti jadi height:100% atau auto.
       Kelas .h-450px di markup cuma nama tanpa aturan (tidak ada di CSS tema),
       jadi tinggi kartu media di bento ini dulu datang dari figure ratio-1x1.
       Begitu rasio itu dilepas, stage ikut setinggi isinya dan seluruh kartu
       bento (berikut tetangganya, karena col-match) ikut memanjang. 268px =
       sisa ruang paling sempit di baris ini (saat kartunya selebar 217px),
       jadi kartu ini tidak pernah jadi yang menentukan tinggi baris. */
    height: 268px;
    padding: 10px 16px 0;
    overflow: hidden;
    /* Peragaan, bukan antarmuka: tidak ada yang bisa diklik atau diblok di
       sini, dan kartu fiturnya sendiri tetap terangkat saat kursor lewat. */
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    /* Kartu fitur ini menumpuk gradien .from-secondary (z-1) di paruh atasnya
       untuk melembutkan tepi gambar lama. Daftar jadwal tidak perlu
       dilembutkan, jadi ia naik ke atas gradien itu. */
    position: relative;
    z-index: 2;
    container-type: inline-size;
}

.uc-dark .ajj-stage {
    --ajj-surface: rgb(var(--color-surface-muted));
    --ajj-muted: rgba(148, 178, 255, 0.14);
    --ajj-line: rgb(var(--color-line));
    --ajj-ink: rgb(var(--color-ink));
    --ajj-ink-soft: rgb(var(--color-ink-soft));
    --ajj-brand: rgb(var(--color-brand));
    --ajj-tint: #262a45;
    --ajj-danger: rgb(var(--color-danger));
    --ajj-chip-todo: rgba(76, 147, 255, 0.16);
    --ajj-chip-done: rgba(231, 235, 241, 0.12);
    --ajj-chip-off: rgba(255, 125, 114, 0.14);
    --ajj-ring: rgba(76, 147, 255, 0.22);
    --ajj-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 16px 34px -24px rgba(0, 0, 0, 0.9);
}

/* Lemari simbol; tidak pernah ikut dirender sendiri. */
.ajj-defs {
    display: none;
}

.ajj-i {
    flex: none;
    width: 13px;
    height: 13px;
    fill: currentColor;
    color: var(--ajj-ink-soft);
}

/* --- kolom cari + pil status --------------------------------------------- */

/* Di app keduanya menumpuk di ponsel dan berjajar di layar lebar. Patokannya
   lebar wadah sendiri, bukan lebar layar: kartu fiturnya separuh kolom di
   layar lebar dan penuh di ponsel. */
.ajj-bar {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 400px;
}

@container (min-width: 370px) {
    .ajj-bar {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .ajj-find {
        flex: 1 1 auto;
    }

    .ajj-pill {
        flex: none;
    }
}

.ajj-find {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 28px;
    border: 1px solid var(--ajj-line);
    border-radius: 10px;
    background: var(--ajj-surface);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Selagi "diketik", kolomnya menyala seperti :focus-within di app. */
.ajj-find.is-on {
    border-color: var(--ajj-brand);
    box-shadow: 0 0 0 2px var(--ajj-ring);
}

.ajj-find > .ajj-i {
    width: 14px;
    height: 14px;
    margin: 0 7px;
}

.ajj-q {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 11.5px;
    line-height: 15px;
    color: var(--ajj-ink);
}

.ajj-q.is-ph {
    color: var(--ajj-ink-soft);
}

.ajj-caret {
    flex: none;
    width: 1.5px;
    height: 12px;
    margin-left: 2px;
    border-radius: 1px;
    background: var(--ajj-brand);
    opacity: 0;
}

.ajj-find.is-on .ajj-caret {
    animation: ajj-caret 1s steps(1, end) infinite;
}

@keyframes ajj-caret {
    0%,
    50% {
        opacity: 1;
    }
    50.01%,
    100% {
        opacity: 0;
    }
}

/* Tombol hapus pencarian; di app ia baru muncul begitu kolomnya terisi. */
.ajj-x {
    flex: none;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin: 0 5px 0 auto;
    border-radius: 50%;
    color: var(--ajj-ink-soft);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease, transform 0.3s var(--ajj-spring);
}

.ajj-find.has-q .ajj-x {
    opacity: 1;
    transform: none;
}

.ajj-x .ajj-i {
    width: 12px;
    height: 12px;
    color: inherit;
}

.ajj-pills {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--ajj-line);
    border-radius: 10px;
    background: var(--ajj-muted);
}

.ajj-pill {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    text-align: center;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
    color: var(--ajj-ink-soft);
    transition: color 0.3s ease;
}

/* Tanpa JS: latar pil yang menyala menempel di pilnya sendiri. Begitu
   aj-jadwal.js hidup, latar itu pindah ke satu penanda yang meluncur. */
.ajj-pill.is-on {
    color: var(--ajj-brand);
    background: var(--ajj-surface);
    box-shadow: 0 1px 2px rgba(12, 32, 74, 0.08);
}

.ajj-pills.is-live .ajj-pill.is-on {
    background: transparent;
    box-shadow: none;
}

.ajj-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    width: 0;
    border-radius: 8px;
    background: var(--ajj-surface);
    box-shadow: 0 1px 2px rgba(12, 32, 74, 0.08);
    opacity: 0;
    transition: transform 0.55s var(--ajj-spring), width 0.55s var(--ajj-spring),
        opacity 0.2s ease;
}

.ajj-pills.is-live .ajj-thumb {
    opacity: 1;
}

/* --- daftar -------------------------------------------------------------- */

/* Daftarnya memang lebih panjang dari bingkainya: kartu terakhir terpotong dan
   memudar di kaki, seperti daftar yang masih bisa digulir. Yang memotongnya
   mask, bukan overflow:hidden — no-repeat membuat apa pun di luar kotak mask
   ikut hilang, sementara bayangan kartu di kiri-kanan tetap utuh. */
.ajj-list {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 26px), transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Lebarnya dibatasi selebar kartu jadwal di app, bukan selebar kartu fitur —
   aturan yang sama dengan tumpukan notifikasi. Dibiarkan melar, kartunya jadi
   pita panjang yang tidak mirip aslinya lagi. Grup yang sedang pergi dipasang
   left/right, jadi margin auto-nya yang menahannya tetap di tengah dan
   selebar itu juga selama ia meluruh. */
.ajj-group {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: min(100%, 400px);
    margin-inline: auto;
}

.ajj-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--ajj-line);
    border-radius: 13px;
    background: var(--ajj-surface);
    box-shadow: var(--ajj-shadow);
    transition: transform 0.56s var(--ajj-spring), opacity 0.4s ease;
    transition-delay: calc(var(--i, 0) * 90ms);
}

/* Datang: bertingkat dari kartu teratas, dengan pegas yang sama dengan
   tumpukan notifikasi. */
.ajj-group.is-in .ajj-card {
    opacity: 0;
}

.ajj-group.is-in[data-arah='naik'] .ajj-card {
    transform: translateY(20px) scale(0.985);
}

.ajj-group.is-in[data-arah='samping'] .ajj-card {
    transform: translateX(26px) scale(0.985);
}

/* Pergi: lebih cepat dari datangnya dan searah dengan penggantinya, jadi
   terbaca sebagai satu daftar yang berganti, bukan dua yang bertabrakan. */
.ajj-group.is-out .ajj-card {
    opacity: 0;
    transition: transform 0.36s cubic-bezier(0.4, 0, 1, 1), opacity 0.3s ease;
    transition-delay: calc(var(--i, 0) * 55ms);
}

.ajj-group.is-out[data-arah='naik'] .ajj-card {
    transform: translateY(-14px) scale(0.965);
}

.ajj-group.is-out[data-arah='samping'] .ajj-card {
    transform: translateX(-28px) scale(0.98);
}

/* --- kartu jadwal -------------------------------------------------------- */

.ajj-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ajj-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 15px;
}

.ajj-chip > i {
    flex: none;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
}

.ajj-card[data-st='todo'] .ajj-chip {
    background: var(--ajj-chip-todo);
    color: var(--ajj-brand);
}

.ajj-card[data-st='done'] .ajj-chip {
    background: var(--ajj-chip-done);
    color: var(--ajj-ink);
}

.ajj-card[data-st='off'] .ajj-chip {
    background: var(--ajj-chip-off);
    color: var(--ajj-danger);
}

.ajj-more {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
}

.ajj-more .ajj-i {
    width: 14px;
    height: 14px;
}

.ajj-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Kotak ikon: tint + pin untuk pertemuan luring, abu + logo Meet untuk daring —
   aturan yang sama dengan BookingCard.vue. */
.ajj-ico {
    flex: none;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    background: var(--ajj-tint);
}

.ajj-ico .ajj-i {
    width: 16px;
    height: 16px;
    color: var(--ajj-brand);
}

.ajj-ico.is-meet {
    background: var(--ajj-muted);
}

.ajj-gm {
    width: 18px;
    height: 18px;
}

.ajj-id {
    flex: 1 1 auto;
    min-width: 0;
}

.ajj-svc,
.ajj-tgl,
.ajj-jam,
.ajj-row-t,
.ajj-sum {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajj-svc {
    font-size: 12.5px;
    font-weight: 600;
    line-height: 15px;
    letter-spacing: -0.01em;
    color: var(--ajj-ink);
}

.ajj-tgl {
    margin-top: 3px;
    font-size: 11px;
    line-height: 13px;
    color: var(--ajj-ink);
}

.ajj-jam {
    margin-top: 2px;
    font-size: 10px;
    line-height: 12px;
    color: var(--ajj-ink-soft);
}

.ajj-jam b {
    font-weight: 400;
    color: var(--ajj-ink);
}

.ajj-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ajj-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ajj-row-t {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    line-height: 14px;
    color: var(--ajj-ink);
}

/* --- ringkasan pembayaran ------------------------------------------------ */

.ajj-pay {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 8px;
    border-top: 1px solid var(--ajj-line);
}

.ajj-pay-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ajj-sum {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 17px;
    color: var(--ajj-ink);
}

/* Sudah lunas: nilainya biru dan tidak ada bar termin sama sekali. */
.ajj-sum.is-lunas {
    color: var(--ajj-brand);
}

.ajj-full {
    flex: none;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: var(--ajj-ink);
}

.ajj-bars {
    display: flex;
    align-items: center;
    gap: 3px;
}

.ajj-bars > i {
    flex: 1 1 0;
    height: 4px;
    border-radius: 999px;
    background: var(--ajj-muted);
}

.ajj-bars > i.is-on {
    background: var(--ajj-brand);
}

.ajj-pay-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 10px;
    line-height: 13px;
    white-space: nowrap;
}

/* Di wadah sempit keterangan kirinya yang mengalah, bukan barisnya yang
   melipat — kartunya tingginya tetap. */
.ajj-pay-foot > :first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ajj-pay-foot > :last-child {
    flex: none;
}

.ajj-paid {
    color: var(--ajj-brand);
}

.ajj-soft {
    color: var(--ajj-ink-soft);
}

.ajj-wait {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--ajj-ink);
}

/* Spinner kecil di "Menunggu pembayaran" — di app sebuah VueSpinnerIos 12px;
   di sini satu cincin conic yang berputar, seukuran itu juga. */
.ajj-spin {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: conic-gradient(
        from 90deg,
        transparent 0deg,
        var(--ajj-brand) 300deg,
        transparent 355deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.6px), #000 calc(100% - 2.2px));
    animation: ajj-spin 0.9s linear infinite;
}

@keyframes ajj-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Wadah sempit (kartu fitur selebar layar di ponsel): semuanya mengecil
   sedikit supaya dua kartu tetap terbaca utuh. */
@container (max-width: 340px) {
    .ajj-card {
        gap: 5px;
        padding: 9px;
        border-radius: 12px;
    }

    .ajj-ico {
        width: 26px;
        height: 26px;
        border-radius: 8px;
    }

    .ajj-svc {
        font-size: 11.5px;
    }

    .ajj-tgl,
    .ajj-row-t,
    .ajj-q {
        font-size: 10.5px;
    }

    .ajj-sum {
        font-size: 12.5px;
    }

    .ajj-pill {
        padding: 2px 6px;
        font-size: 10.5px;
    }

    .ajj-rows {
        gap: 4px;
    }

    .ajj-pay {
        padding-top: 7px;
    }
}

/* Paling sempit (kartu bento separuh kolom di jendela kecil): keterangan
   "Pembayaran penuh" dilepas supaya nilainya tidak ikut terpotong — di app
   keduanya memang berebut satu baris, dan nilainya yang lebih penting. */
@container (max-width: 250px) {
    .ajj-full {
        display: none;
    }
}

/* Tanpa gerak: aj-jadwal.js berhenti di adegan pertama. Transisinya dimatikan
   supaya adegan itu pun tidak bergerak, termasuk spinner & kursornya. */
@media (prefers-reduced-motion: reduce) {
    .ajj-card,
    .ajj-thumb,
    .ajj-x,
    .ajj-find {
        transition: none;
    }

    .ajj-spin,
    .ajj-caret {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   6. Seksi "Bayangin..." — badge risiko jadi pill, kartu diberi kedalaman
   ------------------------------------------------------------------------- */

.aj-risk {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: rgba(217, 59, 59, 0.1);
    color: #d93b3b;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.uc-dark .aj-risk {
    background: rgba(255, 125, 114, 0.14);
    color: rgb(var(--color-danger));
}

#scenarios .post {
    background-color: var(--aj-page);
    border-color: var(--aj-line) !important;
    transition: transform 0.35s var(--aj-ease), box-shadow 0.35s var(--aj-ease),
        border-color 0.35s var(--aj-ease);
}

.uc-dark #scenarios .post {
    background-color: rgb(var(--color-surface));
}

#scenarios .post:hover {
    box-shadow: var(--aj-shadow-md);
    border-color: var(--aj-line-strong) !important;
}

#scenarios .post .featured-image {
    border-bottom: 1px solid var(--aj-line);
}

#scenarios .swiper-nav {
    transition: transform 0.25s var(--aj-ease), box-shadow 0.25s var(--aj-ease);
}

#scenarios .swiper-nav:hover {
    transform: translateY(-2px);
    box-shadow: var(--aj-shadow-sm);
}

/* ---------------------------------------------------------------------------
   7. Pricing — gradien datar yang sama dengan hero, seperti di home-3.html
      (sempat dibedakan jadi mesh navy, lalu dikembalikan). Mode gelap
      menimpanya di aj-dark-theme.css.
   ------------------------------------------------------------------------- */

#pricing {
    position: relative;
    background: linear-gradient(180deg, #0168fa 0%, #b5d5ff 100%);
    /* pita biru "mengambang" di atas halaman, bukan menempel tepi layar */
    border-radius: 28px;
    margin-inline: 16px;
}

@media (min-width: 1200px) {
    #pricing {
        border-radius: 40px;
        margin-inline: 32px;
    }
}

/* #pricing (dan swiper di dalamnya) membawa .overflow-hidden dari markup, yang
   memangkas sisi bawah kartu beserta bayangannya tepat di tepi seksi. Sudut
   membulat di atas tetap aman tanpa overflow-hidden: border-radius sudah
   memotong background-nya sendiri. */
#pricing,
#pricing .swiper,
#pricing .swiper-wrapper,
#pricing .swiper-slide,
#pricing .uc-switcher {
    overflow: visible !important;
}

/* beri ruang napas supaya kartu tidak menempel ke tepi bawah seksi */
#pricing .section-outer {
    padding-bottom: 3.5rem !important;
}

@media (min-width: 992px) {
    #pricing .section-outer {
        padding-bottom: 5rem !important;
    }
}

.pricing-box {
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: var(--aj-shadow-lg) !important;
}

.uc-dark .pricing-box {
    border-color: var(--aj-line);
}

.pricing-box .price {
    letter-spacing: -0.02em;
}

.pricing-box ul li {
    line-height: 1.6;
}

.pricing-box .unicon-checkmark {
    color: var(--aj-brand);
}

.pricing-box .btn-primary {
    transition: transform 0.25s var(--aj-ease), box-shadow 0.25s var(--aj-ease);
}

.pricing-box .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -14px rgba(1, 104, 250, 0.7);
}

/* 8. FAQ — akordeon kartu ringan pindah ke aj-custom.css, karena seksi yang
      sama dipakai di beranda dan halaman harga. */

/* ---------------------------------------------------------------------------
   10. Aksesibilitas — hormati preferensi "kurangi animasi" di OS pengguna
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .aj-cta-primary,
    .aj-store-badge,
    .feature-item,
    #scenarios .post,
    #scenarios .swiper-nav,
    .pricing-box .btn-primary {
        transition: none !important;
    }

    .aj-cta-primary:hover,
    .aj-store-badge:hover,
    .feature-item:hover,
    #scenarios .swiper-nav:hover,
    .pricing-box .btn-primary:hover {
        transform: none !important;
    }
}