/* ============================================================================
   aj-fitur.css — dua seksi tambahan di halaman Fitur (features.html):
   bento "Bukan cuma soal jadwal" (#fitur_lengkap) dan daftar "Semua fitur"
   (#semua_fitur).

   Dimuat sesudah aj-polish.css. Kartunya memakai kelas .feature-item yang sama
   dengan kartu fitur utama di atasnya (latar, garis rambut, angkat saat
   hover), jadi yang ditulis di sini cuma tata letak bento dan tiruan layarnya.

   Setiap tiruan disalin dari komponen Vue aslinya — angka, radius, ukuran
   huruf, dan warnanya diambil dari kelas Tailwind di komponen itu, nama
   komponennya tertulis di komentar markup per kartu. Warnanya memakai palet
   app (src/assets/main.css) lewat token --ajf-* di bawah; di mode gelap
   semuanya naik satu tingkat (surface -> surface-muted, dst.) supaya layarnya
   tetap terangkat dari kartu yang sendirinya sudah berwarna surface. Cara
   yang sama dipakai tiruan kartu fitur utama (lihat .uc-dark .aj-cal di
   aj-polish.css).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. Token palet app (nilai RGB tanpa koma, dipakai lewat rgb(var(--x) / a))
   ------------------------------------------------------------------------- */

.ajf-bento {
    --ajf-canvas: 245 246 250;
    --ajf-surface: 255 255 255;
    --ajf-muted: 234 236 239;
    --ajf-tint: 234 234 250;
    --ajf-line: 207 214 224;
    --ajf-ink: 39 53 74;
    --ajf-ink-soft: 90 104 128;
    --ajf-ink-faint: 99 112 134;
    --ajf-brand: 1 97 233;
    --ajf-success: 15 122 85;
    --ajf-danger: 194 53 43;
    --ajf-danger-soft: 253 232 230;
    --ajf-warn: 138 83 0;
    --ajf-warn-bg-2: 255 244 211;
    --ajf-warn-bg-3: 255 232 161;
    --ajf-warn-line: 233 218 171;
    --ajf-on-accent: 255 255 255;
    /* radio bawaan Chrome yang belum dipilih */
    --ajf-radio-off: 118 118 118;

    --ajf-panel-shadow: 0 1px 2px rgba(12, 32, 74, 0.05), 0 22px 44px -26px rgba(12, 32, 74, 0.45);
    --ajf-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.uc-dark .ajf-bento {
    --ajf-canvas: 26 32 42;
    --ajf-surface: 35 43 56;
    --ajf-muted: 47 57 73;
    --ajf-tint: 44 49 82;
    --ajf-line: 59 70 89;
    --ajf-ink: 231 235 241;
    --ajf-ink-soft: 159 170 184;
    --ajf-ink-faint: 136 148 164;
    --ajf-brand: 76 147 255;
    --ajf-success: 61 214 155;
    --ajf-danger: 255 125 114;
    --ajf-danger-soft: 61 34 32;
    --ajf-warn: 232 169 71;
    --ajf-warn-bg-2: 35 28 12;
    --ajf-warn-bg-3: 46 37 14;
    --ajf-warn-line: 64 56 32;
    --ajf-on-accent: 15 19 26;
    --ajf-radio-off: 159 170 184;

    --ajf-panel-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 24px 46px -26px rgba(0, 0, 0, 0.9);
}

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

/* Ikon Remix sebagai <svg><use>: ukurannya ditentukan pemakainya. */
.ajf-i {
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

#fitur_lengkap .section-heading p,
#semua_fitur .section-heading p {
    text-wrap: balance;
}

/* ---------------------------------------------------------------------------
   1. Bento — tata letak
      < 768     : satu kolom, teks di atas tiruan
      768–991   : satu kolom, teks di samping tiruan (semua kartu "split")
      >= 992    : kisi 12 kolom zig-zag 7/5 — etalase setinggi dua baris di
                  kiri, cari cepat selebar penuh di dasar. Lebar kolomnya
                  mengikuti lebar asli tiap tiruan: ponsel (etalase, dompet)
                  5/12, formulir pesan & modal versi desktop (panel form
                  BookScheduleDesktop ~550px, ModalTemplate 500px) 7/12.
   ------------------------------------------------------------------------- */

.ajf-bento {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 768px) {
    .ajf-bento {
        gap: 24px;
    }
}

@media (min-width: 992px) {
    .ajf-bento {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .ajf-tile[data-area="etalase"] { grid-column: 1 / span 5; grid-row: 1 / span 2; }
    .ajf-tile[data-area="addon"] { grid-column: 6 / span 7; grid-row: 1; }
    .ajf-tile[data-area="quest"] { grid-column: 6 / span 7; grid-row: 2; }
    .ajf-tile[data-area="termin"] { grid-column: 1 / span 7; grid-row: 3; }
    .ajf-tile[data-area="chat"] { grid-column: 8 / span 5; grid-row: 3; }
    .ajf-tile[data-area="wallet"] { grid-column: 1 / span 5; grid-row: 4; }
    .ajf-tile[data-area="kalender"] { grid-column: 6 / span 7; grid-row: 4; }
    .ajf-tile[data-area="search"] { grid-column: 1 / -1; grid-row: 5; }
}

/* ---------------------------------------------------------------------------
   2. Kartu bento
   ------------------------------------------------------------------------- */

.ajf-tile {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* anime.js ([data-anime] di .ajf-bento) menulis transform inline ke tiap
   kartu, dan inline itu mengalahkan translateY(-4px) milik .feature-item:hover.
   Angkatnya dipindah ke properti `translate` yang tidak ikut ditimpa. */
.ajf-tile.feature-item {
    transition: translate 0.35s var(--aj-ease), box-shadow 0.35s var(--aj-ease),
        border-color 0.35s var(--aj-ease);
}

.ajf-tile.feature-item:hover {
    transform: none;
    translate: 0 -4px;
}

.ajf-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 20px 0;
}

.ajf-title {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ajf-desc {
    margin: 0;
    text-wrap: pretty;
}

/* Panggung tiruan: mengisi sisa tinggi kartu. Tiruan yang terpotong di dasar
   kartu diletakkan absolute, jadi tinggi aslinya tidak ikut menentukan tinggi
   baris grid — yang menentukan cuma min-height tiap varian di bawah. Tiruan
   yang utuh (modal jadwal, dompet, palet) mengalir biasa dengan padding. */
.ajf-stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 20px;
    overflow: hidden;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    container-type: inline-size;
    font-size: 14px;
    line-height: 1.5;
    color: rgb(var(--ajf-ink));
}

.ajf-stage p {
    margin: 0;
}

.ajf-stage.is-phone,
.ajf-stage.is-sheet,
.ajf-stage.is-wallet,
.ajf-stage.is-palette {
    padding: 0 16px 20px;
}

/* Layar yang terpotong di dasar kartu: tanpa garis bawah, sudut atas saja. */
.ajf-form,
.ajf-tm,
.ajf-kal {
    position: absolute;
    top: 0;
    right: 16px;
    bottom: 0;
    left: 16px;
    border: 1px solid rgb(var(--ajf-line) / 0.9);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: rgb(var(--ajf-surface));
    box-shadow: var(--ajf-panel-shadow);
    overflow: hidden;
}

@media (min-width: 992px) {
    .ajf-copy {
        padding: 28px 28px 0;
    }

    .ajf-stage {
        margin-top: 24px;
    }

    .ajf-stage.is-phone,
    .ajf-stage.is-sheet,
    .ajf-stage.is-wallet,
    .ajf-stage.is-palette {
        padding: 0 28px 28px;
    }

    .ajf-form,
        .ajf-tm,
    .ajf-kal {
        left: 28px;
        right: 28px;
    }
}

/* Teks di samping tiruan: semua kartu di 768–991 (satu kolom yang lebar),
   dan kartu cari cepat yang selebar penuh di >= 992. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .ajf-tile {
        flex-direction: row;
    }

    .ajf-tile > .ajf-copy {
        flex: 0 0 40%;
        align-self: center;
        padding: 28px 0 28px 28px;
    }

    .ajf-tile > .ajf-stage {
        margin-top: 28px;
    }

    .ajf-tile .ajf-form,
    .ajf-tile     .ajf-tile .ajf-tm,
    .ajf-tile .ajf-kal {
        left: 28px;
        right: 28px;
    }

    .ajf-tile > .ajf-stage.is-phone,
    .ajf-tile > .ajf-stage.is-sheet,
    .ajf-tile > .ajf-stage.is-wallet,
    .ajf-tile > .ajf-stage.is-palette {
        padding: 0 28px 28px;
    }
}

@media (min-width: 992px) {
    .ajf-tile.is-split {
        flex-direction: row;
    }

    .ajf-tile.is-split > .ajf-copy {
        flex: 0 0 34%;
        align-self: center;
        max-width: 360px;
        padding: 32px 0 32px 32px;
    }

    .ajf-tile.is-split > .ajf-stage {
        margin-top: 0;
        padding: 32px 32px 32px 40px;
    }

    .ajf-tile.is-split .ajf-ps {
        max-width: 560px;
    }
}

/* Kursor ketik untuk kolom yang sedang "diisi" (pertanyaan & cari cepat). */
.ajf-caret {
    display: inline-block;
    width: 1.5px;
    height: 1.15em;
    margin-left: 1px;
    vertical-align: -0.2em;
    background: rgb(var(--ajf-brand));
    animation: ajf-blink 1.06s steps(1) infinite;
}

@keyframes ajf-blink {
    50% {
        opacity: 0;
    }
}

/* ---------------------------------------------------------------------------
   3. Etalase — bingkai ponsel hero beranda (aj-hero-device.css), versi rata.
      Yang dipakai cuma badan, bezel, layar, pulau, dan kilau kacanya. Gerak
      3D-nya (lapisan rim, intro berputar, melayang, miring ikut kursor) tidak:
      lapisan rim & pelampungnya tidak ada di markup, aj-hero-device.js tidak
      dimuat, dan intro CSS-nya dimatikan di bawah.
   ------------------------------------------------------------------------- */

.ajf-stage.is-phone {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ajf-phone {
    flex: none;
}

/* Di >= 992 kartunya setinggi dua baris; sisi kirinya dipersempit supaya
   ponselnya sebesar mungkin mengisi tinggi itu, bukan mengapung di ruang
   kosong. Lebarnya tetap dibatasi --ajd-w di markup. */
@media (min-width: 992px) {
    .ajf-tile[data-area="etalase"] > .ajf-stage.is-phone {
        padding-right: 16px;
        padding-left: 16px;
    }
}

/* Tanpa perspektif, translateZ kecil di bezel & tombolnya tidak mengubah apa pun. */
.ajf-phone .ajd-3d {
    perspective: none;
}

/* Di hero bingkainya sengaja tanpa bayangan jatuh (terpotong seksi hero); di
   kartu ini tidak ada yang memotongnya, jadi diberi bayangan tipis supaya
   ponselnya berdiri di atas kartu, bukan tertempel. */
.ajf-phone .ajd-device-frame {
    transform: none;
    animation: none;
    will-change: auto;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 30px 50px -32px rgba(12, 32, 74, 0.55);
}

.uc-dark .ajf-phone .ajd-device-frame {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 30px 50px -30px rgba(0, 0, 0, 0.9);
}

/* Layar "bangun dari hitam" itu bagian dari intro hero. */
.ajf-phone .ajd-device-screen::after {
    content: none;
}

/* Pergantian kapsul kategori (aj-fitur.js): kapsul ditekan, daftar lama
   diredupkan, lalu isinya ditukar dengan animasi masuk bertingkat — sama
   seperti ChooseServiceBody.vue + .card-enter di ServiceCardShell.vue. */
.ajf-phone .ajd-chip {
    transition: background-color 0.15s ease-out, border-color 0.15s ease-out, color 0.15s ease-out,
        box-shadow 0.15s ease-out, transform 0.15s ease-out;
}

.ajf-phone .ajd-chip.is-press {
    transform: scale(0.96);
}

.ajf-phone .ajd-cards {
    transition: opacity 0.2s ease-out;
}

.ajf-phone .ajd-cards.is-pending {
    opacity: 0.4;
}

.ajf-phone .ajd-card[hidden] {
    display: none;
}

.ajf-phone .ajd-card.is-enter {
    animation: ajf-card-enter 0.28s ease-out backwards;
}

@keyframes ajf-card-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

/* ---------------------------------------------------------------------------
   4. Formulir pesan klien (add-on & pertanyaan) — CustomerForm.vue
   ------------------------------------------------------------------------- */

.ajf-stage.is-form {
    min-height: 330px;
}

.ajf-tile[data-area="addon"] .ajf-stage {
    min-height: 440px;
}

/* #form_steps: satu ruas 3px per langkah, gap-1.5, px-5 pt-3 (+ py-2 tombolnya) */
.ajf-steps {
    display: flex;
    gap: 6px;
    padding: 12px 20px 0;
}

.ajf-steps i {
    flex: 1;
    height: 3px;
    margin: 8px 0;
    border-radius: 999px;
    background: rgb(var(--ajf-line));
    transition: background-color 0.3s;
}

.ajf-steps i.is-on {
    background: rgb(var(--ajf-brand));
}

.ajf-form-body {
    padding: 20px;
}

/* --- AddonPicker.vue ----------------------------------------------------- */

.ajf-ad-title {
    margin-bottom: 12px !important;
    font-size: 16px;
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajf-ad-title span {
    margin-left: 4px;
    font-size: 14px;
    font-weight: 400;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-ad-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ajf-ad {
    display: block;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
    transition: border-color 0.15s, background-color 0.15s, transform 0.15s;
}

.ajf-ad.is-on {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-tint));
}

.ajf-ad.is-press {
    transform: scale(0.99);
}

.ajf-ad-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
}

.ajf-ad-check {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 6px;
    background: rgb(var(--ajf-canvas));
    color: transparent;
    font-size: 14px;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.ajf-ad.is-on .ajf-ad-check {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-brand));
    color: rgb(var(--ajf-on-accent));
}

.ajf-ad-ico {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: rgb(var(--ajf-muted));
    color: rgb(var(--ajf-ink-soft));
    font-size: 16px;
}

.ajf-ad-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ajf-ad-name {
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajf-ad-desc {
    margin-top: 2px;
    font-size: 12px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-ad-price {
    flex-shrink: 0;
    font-size: 14px;
    color: rgb(var(--ajf-ink));
}

/* Baris "Jumlah" — v-if di app, jadi muncul tanpa transisi */
.ajf-ad-qty {
    display: none;
}

.ajf-ad.is-on[data-allow-qty] .ajf-ad-qty {
    display: block;
}

.ajf-ad-qty-in {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-top: 1px solid rgb(var(--ajf-brand) / 0.2);
}

.ajf-ad-qty-lbl {
    font-size: 14px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-ad-stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ajf-ad-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
    color: rgb(var(--ajf-ink-soft));
    font-size: 16px;
    transition: opacity 0.15s, transform 0.15s;
}

.ajf-ad-btn.is-off {
    opacity: 0.4;
}

.ajf-ad-btn.is-press {
    transform: scale(0.94);
}

.ajf-ad-n {
    width: 32px;
    text-align: center;
    font-size: 14px;
    color: rgb(var(--ajf-ink));
}

.ajf-ad-line {
    width: 92px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajf-ad-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgb(var(--ajf-muted));
    font-size: 14px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-ad-total[hidden] {
    display: none;
}

.ajf-ad-total b {
    font-size: 16px;
    font-weight: 700;
    color: rgb(var(--ajf-ink));
}

/* --- Pertanyaan tambahan (#section_question) ---------------------------- */

.ajf-q-label {
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: rgb(var(--ajf-ink));
}

.ajf-q-label span {
    color: rgb(var(--ajf-ink-faint));
}

.ajf-q-opts {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

/* .choice-row / .choice-row-line / .choice-row-on|off */
.ajf-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
    transition: border-color 0.15s ease-out, background-color 0.15s ease-out;
}

.ajf-choice.is-other {
    display: block;
}

.ajf-choice-line {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ajf-choice-t {
    font-size: 14px;
    line-height: 20px;
    color: rgb(var(--ajf-ink));
}

.ajf-choice-p {
    flex-shrink: 0;
    margin-left: auto;
    font-size: 14px;
    line-height: 20px;
    color: rgb(var(--ajf-ink-soft));
}

/* Radio bawaan dengan accent-brand: cincin + titik tengah */
.ajf-radio {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid rgb(var(--ajf-radio-off));
    border-radius: 999px;
    background: rgb(var(--ajf-surface));
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ajf-form[data-pick="none"] .ajf-choice[data-opt="none"],
.ajf-form[data-pick="natural"] .ajf-choice[data-opt="natural"],
.ajf-form[data-pick="volume"] .ajf-choice[data-opt="volume"],
.ajf-form[data-pick="other"] .ajf-choice[data-opt="other"] {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-tint));
}

.ajf-form[data-pick="none"] .ajf-choice[data-opt="none"] .ajf-radio,
.ajf-form[data-pick="natural"] .ajf-choice[data-opt="natural"] .ajf-radio,
.ajf-form[data-pick="volume"] .ajf-choice[data-opt="volume"] .ajf-radio,
.ajf-form[data-pick="other"] .ajf-choice[data-opt="other"] .ajf-radio {
    border: 1px solid rgb(var(--ajf-brand));
    box-shadow: inset 0 0 0 3px rgb(var(--ajf-surface)), inset 0 0 0 8px rgb(var(--ajf-brand));
}

/* Kolom "Tulis jawabanmu" hanya muncul saat "Isi sendiri" dipilih (v-if) */
.ajf-choice-more {
    display: none;
    margin-top: 8px;
}

.ajf-form[data-pick="other"] .ajf-choice-more {
    display: block;
}

/* .fld dalam keadaan fokus: border-brand + ring-2 ring-brand/15 */
.ajf-fld {
    display: block;
    padding: 10px 12px;
    border: 1px solid rgb(var(--ajf-brand));
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
    box-shadow: 0 0 0 2px rgb(var(--ajf-brand) / 0.15);
    font-size: 14px;
    line-height: 21px;
    color: rgb(var(--ajf-ink));
    white-space: nowrap;
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   5. Termin — PembayaranBerkala.vue
   ------------------------------------------------------------------------- */

.ajf-stage.is-termin {
    min-height: 380px;
}

.ajf-tm {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

.ajf-tm-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ajf-tm-headtext {
    display: flex;
    flex-direction: column;
}

.ajf-tm-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajf-tm-sub {
    font-size: 14px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-tm-sum {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgb(var(--ajf-success) / 0.1);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: rgb(var(--ajf-success));
}

.ajf-tm-sum .ajf-i {
    font-size: 14px;
}

.ajf-tm-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ajf-tm-preset {
    padding: 6px 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 999px;
    background: rgb(var(--ajf-surface));
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: rgb(var(--ajf-ink-soft));
    transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.15s;
}

.ajf-tm-preset.is-on {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-brand) / 0.1);
    color: rgb(var(--ajf-brand));
}

.ajf-tm-preset.is-press {
    transform: scale(0.95);
}

/* Bar 100%: label persen di atas, segmen bergradien, sekat di lapisan sendiri.
   Lebarnya dari --p1..--p3 yang ditulis aj-fitur.js. */
.ajf-tm-meter {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ajf-tm-labels {
    display: flex;
    gap: 2px;
}

.ajf-tm-labels span {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: rgb(var(--ajf-ink));
    transition: width 0.35s ease-out;
}

.ajf-tm-labels span:nth-child(1),
.ajf-tm-bar i:nth-child(1) {
    width: var(--p1);
}

.ajf-tm-labels span:nth-child(2),
.ajf-tm-bar i:nth-child(2) {
    width: var(--p2);
}

.ajf-tm-labels span:nth-child(3),
.ajf-tm-bar i:nth-child(3) {
    width: var(--p3);
}

.ajf-tm-barwrap {
    position: relative;
}

.ajf-tm-bar {
    display: flex;
    gap: 2px;
    height: 44px;
    overflow: hidden;
    border-radius: 12px;
    background: rgb(var(--ajf-muted));
}

.ajf-tm-bar i {
    display: block;
    min-width: 0;
    height: 100%;
    transition: width 0.35s ease-out;
}

/* brandAlpha(): pita alpha 1 -> 0,2 dibagi 3 termin (0,267), fade 0,1 */
.ajf-tm-bar i:nth-child(1) {
    background-image: linear-gradient(to right, rgb(var(--ajf-brand) / 1), rgb(var(--ajf-brand) / 0.9));
}

.ajf-tm-bar i:nth-child(2) {
    background-image: linear-gradient(to right, rgb(var(--ajf-brand) / 0.733), rgb(var(--ajf-brand) / 0.633));
}

.ajf-tm-bar i:nth-child(3) {
    background-image: linear-gradient(to right, rgb(var(--ajf-brand) / 0.467), rgb(var(--ajf-brand) / 0.367));
}

.ajf-tm-handle {
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 100%;
    transform: translateX(-50%);
    transition: left 0.35s ease-out;
}

.ajf-tm-handle.is-a {
    left: var(--p1);
}

.ajf-tm-handle.is-b {
    left: calc(var(--p1) + var(--p2));
}

.ajf-tm-handle b {
    display: block;
    width: 6px;
    height: 28px;
    border-radius: 999px;
    background: rgb(var(--ajf-surface));
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgb(var(--ajf-ink) / 0.1);
}

.ajf-tm-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ajf-tm-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
}

/* garis penghubung antar kartu (left-[27px] top-full h-3 w-px) */
.ajf-tm-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 27px;
    width: 1px;
    height: 12px;
    background: rgb(var(--ajf-line));
}

.ajf-tm-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ajf-tm-no {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgb(var(--ajf-brand) / 0.1);
    box-shadow: 0 0 0 1px rgb(var(--ajf-brand) / 0.2);
    font-size: 14px;
    font-weight: 700;
    color: rgb(var(--ajf-brand));
}

.ajf-tm-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: rgb(var(--ajf-ink));
}

.ajf-tm-pct {
    margin-left: auto;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgb(var(--ajf-brand) / 0.1);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: rgb(var(--ajf-brand));
}

.ajf-tm-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ajf-tm-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ajf-tm-lbl {
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-tm-money {
    display: flex;
    align-items: stretch;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
}

.ajf-tm-money span:first-child {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border-right: 1px solid rgb(var(--ajf-line));
    border-radius: 8px 0 0 8px;
    background: rgb(var(--ajf-tint));
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--ajf-brand));
}

.ajf-tm-money span:last-child {
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: rgb(var(--ajf-ink));
}

.ajf-tm-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
    font-size: 14px;
    line-height: 21px;
    color: rgb(var(--ajf-ink));
}

.ajf-tm-select .ajf-i {
    font-size: 18px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-tm-select.is-locked {
    color: rgb(var(--ajf-ink-soft));
}

.ajf-tm-select.is-locked .ajf-i {
    font-size: 14px;
}

.ajf-tm-due {
    display: flex;
    align-items: center;
}

.ajf-tm-num {
    width: 56px;
    flex-shrink: 0;
    padding: 10px 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: rgb(var(--ajf-surface));
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 21px;
    color: rgb(var(--ajf-ink));
}

.ajf-tm-select.is-joined {
    width: 94px;
    flex-shrink: 0;
    border-left: 0;
    border-radius: 0 8px 8px 0;
}

.ajf-tm-before {
    margin-left: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 14px;
    color: rgb(var(--ajf-ink-soft));
}

/* Form layanan di desktop: nominal 40% | jatuh tempo (lg:flex-row) */
@container (min-width: 480px) {
    .ajf-tm-fields {
        flex-direction: row;
    }

    .ajf-tm-field {
        width: 40%;
    }

    .ajf-tm-field.is-due {
        flex: 1;
        width: auto;
    }
}

/* ---------------------------------------------------------------------------
   6. Kalender — list view "Rangkuman" (custom.calendar.css)
   ------------------------------------------------------------------------- */

.ajf-stage.is-kal {
    min-height: 360px;
}

.ajf-kal {
    padding: 16px 16px 16px 8px;
}

.ajf-kal-day {
    display: flex;
    align-items: flex-start;
}

.ajf-kal-day + .ajf-kal-day {
    margin-top: 22px;
}

/* .fc-list-day-cushion: nama hari kecil di atas, angka besar di bawah */
.ajf-kal-date {
    display: flex;
    flex: 0 0 64px;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 8px 8px;
    border-radius: 12px;
    text-align: center;
    color: rgb(var(--ajf-ink));
}

.ajf-kal-wd {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-kal-dd {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ajf-kal-events {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* td.fc-list-event-title */
.ajf-kal-ev {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 16px 13px 22px;
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-surface));
}

/* .fc-bar: aksen warna layanan rata di tepi kiri */
.ajf-kal-ev::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    background: var(--ajf-bar, rgb(var(--ajf-brand)));
}

.ajf-kal-title {
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: rgb(var(--ajf-ink));
}

.ajf-kal-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-kal-meta > span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajf-kal-meta .ajf-i {
    font-size: 16px;
}

.ajf-gcal {
    flex: none;
    width: 15px;
    height: 15px;
}

/* Acara Google (handleGoogleBusyRendering): latar surface-muted, garis
   putus-putus, aksen abu, ikon "buka tautan" di kanan */
.ajf-kal-ev.is-google {
    border-style: dashed;
    background: rgb(var(--ajf-muted));
    --ajf-bar: rgb(var(--ajf-ink-soft));
}

.ajf-kal-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.ajf-kal-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.ajf-kal-open {
    margin-top: 2px;
    font-size: 16px;
    color: rgb(var(--ajf-ink-soft));
}

/* Libur (handleDeviationRendering): latar danger-soft tanpa garis, padding 12px
   (kiri tetap 22px dari custom.calendar.css), aksen merah */
.ajf-kal-ev.is-off {
    gap: 4px;
    padding: 12px 12px 12px 22px;
    border-color: transparent;
    background: rgb(var(--ajf-danger-soft));
    --ajf-bar: rgb(var(--ajf-danger));
}

.ajf-kal-off-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(var(--ajf-danger));
}

.ajf-kal-off-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: rgb(var(--ajf-danger));
}

.ajf-kal-off-row .ajf-i {
    font-size: 16px;
}

.ajf-kal-off-lbl {
    margin-top: 2px;
    font-size: 12px;
    color: rgb(var(--ajf-danger));
}

/* ≥768px di app: baris meta 14px, kolom tanggal 24px */
@container (min-width: 480px) {
    .ajf-kal {
        padding: 20px 20px 20px 12px;
    }

    .ajf-kal-date {
        flex-basis: 76px;
    }

    .ajf-kal-meta {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------------------
   7. Jadwal dari chat — SelectBookingType.vue lalu SharePaymentLink.vue
   ------------------------------------------------------------------------- */

.ajf-sheets {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* Kedua keadaan menumpuk di sel grid yang sama; tingginya ikut yang tertinggi */
.ajf-sheet {
    grid-area: 1 / 1;
    align-self: start;
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line) / 0.9);
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
    box-shadow: var(--ajf-panel-shadow);
    transition: opacity 0.3s ease-out, transform 0.45s var(--ajf-spring);
}

.ajf-sheets[data-state="pick"] .ajf-sheet.is-done,
.ajf-sheets[data-state="done"] .ajf-sheet.is-pick {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
}

.ajf-sheet-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid rgb(var(--ajf-line));
}

.ajf-sheet-headtext {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ajf-sheet-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: rgb(var(--ajf-ink));
}

.ajf-sheet-sub {
    font-size: 14px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-sheet-x {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 999px;
    background: rgb(var(--ajf-surface));
    color: rgb(var(--ajf-ink));
    font-size: 20px;
}

.ajf-sheet-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
}

/* SelectBookingTypeCard.vue */
.ajf-bt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-canvas));
    transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out, transform 0.15s;
}

.ajf-bt.is-warn {
    border-color: rgb(var(--ajf-warn-line));
    background: rgb(var(--ajf-warn-bg-2));
}

/* lg:hover:border-brand lg:hover:bg-tint */
.ajf-bt.is-brand.is-hover {
    border-color: rgb(var(--ajf-brand));
    background: rgb(var(--ajf-tint));
}

.ajf-bt.is-press {
    transform: scale(0.985);
}

.ajf-bt-ico {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgb(var(--ajf-brand) / 0.1);
    color: rgb(var(--ajf-brand));
    font-size: 20px;
}

.ajf-bt.is-warn .ajf-bt-ico {
    background: rgb(var(--ajf-warn) / 0.1);
    color: rgb(var(--ajf-warn));
}

.ajf-bt-main {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ajf-bt-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.ajf-bt-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: rgb(var(--ajf-ink));
}

.ajf-bt-badge {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgb(var(--ajf-brand) / 0.1);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    color: rgb(var(--ajf-brand));
}

.ajf-bt-desc {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 14px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-bt-desc .ajf-i {
    margin-top: 1px;
    font-size: 14px;
}

.ajf-bt-desc .is-yes {
    color: rgb(var(--ajf-success));
}

.ajf-bt-desc .is-no {
    color: rgb(var(--ajf-danger));
}

.ajf-bt-go {
    font-size: 18px;
    color: rgb(var(--ajf-ink-soft));
}

/* SharePaymentLink.vue — pita .aj-link-band .aj-link-band-success (main.css) */
.ajf-band {
    --ajf-tone: var(--ajf-success);

    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid rgb(var(--ajf-line));
    background:
        radial-gradient(120% 130% at 0% 0%, rgb(var(--ajf-tone) / 0.24) 0%, transparent 60%),
        radial-gradient(90% 130% at 100% 100%, rgb(var(--ajf-tint) / 0.6) 0%, transparent 70%),
        linear-gradient(135deg, rgb(var(--ajf-tone) / 0.13) 0%, rgb(var(--ajf-tone) / 0.04) 50%, rgb(var(--ajf-surface)) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), 0 10px 26px -22px rgb(var(--ajf-tone) / 0.9);
}

.uc-dark .ajf-band {
    background:
        radial-gradient(120% 130% at 0% 0%, rgb(var(--ajf-tone) / 0.2) 0%, transparent 60%),
        radial-gradient(90% 130% at 100% 100%, rgb(var(--ajf-tint) / 0.55) 0%, transparent 70%),
        linear-gradient(135deg, rgb(var(--ajf-tone) / 0.16) 0%, rgb(var(--ajf-tone) / 0.05) 50%, rgb(var(--ajf-surface)) 100%);
    box-shadow: inset 0 1px 0 rgb(var(--ajf-tone) / 0.22), 0 12px 28px -24px rgb(0 0 0 / 0.85);
}

.ajf-band-top {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* .aj-link-badge di atas bg-success */
.ajf-band-badge {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-top: 2px;
    border-radius: 999px;
    background-color: rgb(var(--ajf-success));
    background-image: linear-gradient(140deg, rgb(255 255 255 / 0.3) 0%, rgb(255 255 255 / 0) 55%, rgb(0 0 0 / 0.2) 100%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 6px 16px -8px rgb(0 0 0 / 0.45);
    color: rgb(var(--ajf-on-accent));
    font-size: 18px;
}

/* CopyLinkButton.vue dengan containerClass border-success/25 bg-surface */
.ajf-copylink {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-success) / 0.25);
    border-radius: 8px;
    background: rgb(var(--ajf-surface));
    font-size: 14px;
    color: rgb(var(--ajf-brand));
}

.ajf-copylink > .ajf-i:first-child {
    font-size: 18.67px;
}

.ajf-copylink-url {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajf-copylink-btn {
    margin-left: auto;
    font-size: 21px;
}

.ajf-sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 12px;
    background: rgb(var(--ajf-canvas));
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    color: rgb(var(--ajf-ink));
}

.ajf-sum .ajf-i {
    font-size: 18px;
    color: rgb(var(--ajf-ink-soft));
}

/* ---------------------------------------------------------------------------
   8. Dompet — OverviewWallet.vue + StatsCard.vue
   ------------------------------------------------------------------------- */

.ajf-wl {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* .wallet-hero: biru tetap di kedua tema, cuma kedalamannya yang berganti */
.ajf-wl-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 20px;
    border-radius: 16px;
    background: radial-gradient(130% 130% at 8% 0%, rgba(120, 170, 255, 0.55) 0%, transparent 55%),
        linear-gradient(140deg, #0168fa 0%, #0b4bc0 55%, #062f7d 100%);
    box-shadow: 0 18px 40px -26px rgba(1, 104, 250, 0.85);
    color: #fff;
}

.uc-dark .ajf-wl-hero {
    background: radial-gradient(130% 130% at 8% 0%, rgba(76, 147, 255, 0.24) 0%, transparent 55%),
        linear-gradient(140deg, #0c2547 0%, #081a35 55%, #050f22 100%);
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.9);
}

.ajf-wl-orb {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}

.ajf-wl-orb.is-a {
    top: -80px;
    right: -48px;
    width: 192px;
    height: 192px;
}

.ajf-wl-orb.is-b {
    right: -8px;
    bottom: -96px;
    width: 160px;
    height: 160px;
    background: rgba(255, 255, 255, 0.07);
}

.uc-dark .ajf-wl-orb.is-a {
    background: rgba(255, 255, 255, 0.05);
}

.uc-dark .ajf-wl-orb.is-b {
    background: rgba(255, 255, 255, 0.035);
}

.ajf-wl-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ajf-wl-ico {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 24px;
}

.ajf-wl-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    font-size: 12px;
    font-weight: 600;
}

.ajf-wl-badge .ajf-i {
    font-size: 14px;
}

.ajf-wl-bal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 20px;
}

.ajf-wl-lbl {
    font-size: 14px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.75);
}

.ajf-wl-amt {
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
    letter-spacing: -0.02em;
}

.ajf-wl-pend {
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 8px;
    padding: 6px 10px 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 12px;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.85);
}

.ajf-wl-pend .ajf-i {
    font-size: 14px;
}

.ajf-wl-pend span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajf-wl-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 14px 12px;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    color: #0161e9;
}

.ajf-wl-btn .ajf-i {
    font-size: 18px;
}

/* Susunan StatsCard di lg (flex-col); di kartu sempit ini lebih terbaca
   daripada dua kolom ponsel yang memotong nominalnya. */
.ajf-wl-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ajf-wl-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
}

.ajf-wl-sico {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 16px;
}

.ajf-wl-stat.is-in .ajf-wl-sico {
    background: rgb(var(--ajf-success) / 0.1);
    color: rgb(var(--ajf-success));
}

.ajf-wl-stat.is-out .ajf-wl-sico {
    background: rgb(var(--ajf-danger) / 0.1);
    color: rgb(var(--ajf-danger));
}

.ajf-wl-stext {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ajf-wl-slbl {
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-wl-sval {
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: -0.01em;
    color: rgb(var(--ajf-ink));
}

/* Begitu lebarnya cukup untuk nominalnya, kembali ke susunan ponsel aslinya:
   dua kartu berdampingan (flex-row gap-3). */
@container (min-width: 330px) {
    .ajf-wl-stats {
        flex-direction: row;
    }

    .ajf-wl-stat {
        flex: 1;
    }
}

/* ---------------------------------------------------------------------------
   9. Cari cepat — MasterSearchPalette.vue (desktop)
   ------------------------------------------------------------------------- */

.ajf-ps {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 16px;
    background: rgb(var(--ajf-surface));
    /* shadow-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.uc-dark .ajf-ps {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.ajf-ps-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid rgb(var(--ajf-line));
}

.ajf-ps-lens {
    padding-left: 4px;
    font-size: 18px;
    color: rgb(var(--ajf-ink-soft));
    box-sizing: content-box;
}

.ajf-ps-input {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    padding: 6px 0;
    font-size: 16px;
    line-height: 24px;
    white-space: nowrap;
    color: rgb(var(--ajf-ink));
}

.ajf-ps-ph {
    position: absolute;
    left: 3px;
    overflow: hidden;
    max-width: calc(100% - 3px);
    text-overflow: ellipsis;
    color: rgb(var(--ajf-ink-soft));
}

.ajf-ps[data-q]:not([data-q=""]) .ajf-ps-ph {
    display: none;
}

.ajf-ps-esc {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid rgb(var(--ajf-line));
    border-radius: 4px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(var(--ajf-ink-faint));
}

.ajf-ps-clear {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 16px;
    color: rgb(var(--ajf-ink-soft));
    transition: background-color 0.15s;
}

.ajf-ps-clear.is-press {
    background: rgb(var(--ajf-muted));
}

.ajf-ps[data-q=""] .ajf-ps-clear,
.ajf-ps[data-q]:not([data-q=""]) .ajf-ps-esc {
    display: none;
}

/* Tinggi daftar dipatok supaya dua keadaannya sama tinggi */
.ajf-ps-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 232px;
    overflow: hidden;
    padding: 8px 0;
}

.ajf-ps-view {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-out, visibility 0s linear 0.15s;
}

.ajf-ps-view.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.15s ease-out, visibility 0s;
}

.ajf-ps-view.is-on.is-dim {
    opacity: 0.5;
}

.ajf-ps-group {
    padding: 8px 12px 4px;
    font-size: 12px;
    color: rgb(var(--ajf-ink-faint));
}

.ajf-ps-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    transition: background-color 0.1s ease-out;
}

.ajf-ps-item.is-active {
    background: rgb(var(--ajf-muted));
}

.ajf-ps-ico {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: rgb(var(--ajf-canvas));
    color: rgb(var(--ajf-ink-soft));
    font-size: 18px;
}

.ajf-ps-item.is-active .ajf-ps-ico {
    color: rgb(var(--ajf-brand));
}

.ajf-ps-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.ajf-ps-title,
.ajf-ps-sub {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ajf-ps-title {
    font-size: 14px;
    font-weight: 600;
    color: rgb(var(--ajf-ink));
}

.ajf-ps-sub {
    font-size: 12px;
    color: rgb(var(--ajf-ink-faint));
}

.ajf-ps-enter {
    visibility: hidden;
    font-size: 14px;
    color: rgb(var(--ajf-ink-faint));
}

.ajf-ps-item.is-active .ajf-ps-enter {
    visibility: visible;
}

.ajf-ps-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 12px;
    border-top: 1px solid rgb(var(--ajf-line));
    font-size: 12px;
    color: rgb(var(--ajf-ink-faint));
}

.ajf-ps-foot span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ajf-ps-foot .ajf-i {
    font-size: 14px;
}

.ajf-ps-kbd {
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   10. Tinggi panggung di ponsel — kartunya satu kolom dan selebar layar
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .ajf-stage.is-form {
        min-height: 318px;
    }

    /* nama add-on terlipat dua baris di layar sempit; kapsul totalnya tetap
       harus terlihat */
    .ajf-tile[data-area="addon"] .ajf-stage {
        min-height: 480px;
    }

    .ajf-stage.is-termin {
        min-height: 340px;
    }

    .ajf-stage.is-kal {
        min-height: 430px;
    }
}

/* ---------------------------------------------------------------------------
   11. Daftar "Semua fitur" — lembar spesifikasi, tanpa ikon
   ------------------------------------------------------------------------- */

.ajf-list {
    border-top: 1px solid var(--aj-line);
}

.ajf-group {
    display: grid;
    gap: 16px;
    padding: 28px 0;
    border-bottom: 1px solid var(--aj-line);
}

.ajf-group-head {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ajf-group-title {
    font-weight: 600 !important;
    letter-spacing: -0.01em;
}

.ajf-group-desc {
    margin: 0;
}

.ajf-items {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ajf-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Tema memberi setiap h4 ukuran judul dengan !important, jadi ukuran butir
   ini juga harus !important supaya tetap di bawah judul kelompoknya. */
.ajf-item-name {
    margin: 0;
    font-size: 1rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: -0.005em !important;
}

.ajf-item-desc {
    margin: 0;
    line-height: 1.55;
    text-wrap: pretty;
}

.ajf-stores {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.ajf-stores a {
    display: block;
    transition: transform 0.25s var(--aj-ease), filter 0.25s var(--aj-ease);
}

.ajf-stores a:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.ajf-stores img {
    display: block;
    width: auto;
    height: 34px;
}

@media (min-width: 576px) {
    .ajf-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 32px;
    }
}

@media (min-width: 992px) {
    .ajf-group {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 48px;
        padding: 36px 0;
    }

    /* judul kelompok ikut menempel selagi butirnya digulir */
    .ajf-group-head {
        position: sticky;
        top: 104px;
        align-self: start;
    }
}

/* ---------------------------------------------------------------------------
   12. Gerak dikurangi: tiruannya berhenti di keadaan awal (aj-fitur.js juga
       tidak menggilirnya), yang tersisa cuma perubahan warna.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .ajf-caret {
        animation: none;
    }

    .ajf-phone .ajd-card.is-enter {
        animation: none;
    }

    .ajf-tm-labels span,
    .ajf-tm-bar i,
    .ajf-tm-handle,
    .ajf-sheet,
    .ajf-tile.feature-item {
        transition: none;
    }
}