/* ============================================================================
   aj-showcase.css — seksi "Halaman booking" di beranda (#booking_showcase).

   Deretan ponsel berisi halaman booking dummy dari berbagai profesi yang
   bergeser pelan ke kiri, untuk pesan "siapa aja bisa pakai Aturjadwal". Tiap
   halaman punya banner-nya sendiri (latar ala Linktree) — itu yang membuat
   deretannya terbaca sebagai halaman milik orang yang berbeda-beda.

   Ponselnya bingkai hero (aj-hero-device.css, kelas ajd-*) versi rata, sama
   seperti di halaman Fitur: tanpa lapisan rim 3D, intro, melayang, dan miring
   kursor. data-ajd-still di markup membuat aj-hero-device.js melewatinya.
   Markup ponselnya dibangun scripts/generate_landing_showcase.py; gerak
   marquee-nya di assets/js/aj-showcase.js.

   Kelasnya berawalan `ajbp-` (booking page): ajs-/ajsc-/ajsl- sudah dipakai
   halaman Solusi, dan beberapa skrip landing bertindak pada kelas aj-* generik.
   ========================================================================== */

.booking-showcase {
    /* Token aplikasi (src/assets/main.css), sama dengan etalase template. */
    --ajbp-ink-soft: 90 104 128;
    /* Jarak antarponsel = padding tiap butir (bukan gap), supaya lebar satu
       set persis setengah lintasan dan putarannya menyambung tanpa sentak. */
    --ajbp-gap: 14px;
}

.uc-dark .booking-showcase {
    --ajbp-ink-soft: 159 170 184;
}

/* Tepi kiri-kanan dipudarkan supaya ponsel masuk dan keluar dengan halus.
   Padding atas-bawah memberi ruang bayangan bingkai yang ikut terpotong
   overflow. */
.ajbp-marquee {
    position: relative;
    overflow: hidden;
    padding: 8px 0 4px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.ajbp-track {
    display: flex;
    width: max-content;
}

.ajbp-set {
    display: flex;
    flex: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ajbp-item {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--ajbp-gap);
}

/* Lebar asli halaman booking di ponsel ~390–440; di sini bingkainya diperkecil
   seragam (--ajd-w), isinya ikut karena semua ukurannya satuan --u. Bobotnya
   dua kelas supaya menang dari `.ajd-device { --ajd-w: 400 }`. */
.ajd-device.ajbp-phone {
    --ajd-w: 216;
}

@media (min-width: 576px) {
    .booking-showcase {
        --ajbp-gap: 18px;
    }

    .ajd-device.ajbp-phone {
        --ajd-w: 240;
    }
}

@media (min-width: 1200px) {
    .booking-showcase {
        --ajbp-gap: 22px;
    }

    .ajd-device.ajbp-phone {
        --ajd-w: 264;
    }
}

/* Rata: tanpa perspektif, intro, dan layar "bangun dari hitam" hero. */
.ajbp-phone .ajd-3d {
    perspective: none;
}

.ajbp-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 26px 40px -30px rgba(12, 32, 74, 0.55);
}

.uc-dark .ajbp-phone .ajd-device-frame {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 26px 40px -28px rgba(0, 0, 0, 0.9);
}

.ajbp-phone .ajd-device-screen::after {
    content: none;
}

/* Nama profesinya, warnanya diredam supaya yang menonjol tetap ponselnya. */
.ajbp-cap {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: rgb(var(--ajbp-ink-soft));
}

/* ── Gerak ────────────────────────────────────────────────────────────────
   aj-showcase.js menggandakan set ponselnya lalu memasang .is-looping; satu
   putaran = geser setengah lintasan = selebar satu set. Durasinya ditulis ke
   --ajbp-dur dari lebar set, jadi kecepatannya sama di semua lebar layar.
   Berhenti saat disorot kursor (supaya bisa dibaca) dan saat seksinya di luar
   layar (.is-paused, supaya tidak memakan GPU). */
.ajbp.is-looping .ajbp-track {
    animation: ajbp-marquee var(--ajbp-dur, 90s) linear infinite;
}

.ajbp.is-paused .ajbp-track {
    animation-play-state: paused;
}

@media (hover: hover) and (pointer: fine) {
    .ajbp-marquee:hover .ajbp-track {
        animation-play-state: paused;
    }
}

@keyframes ajbp-marquee {
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Tanpa JS atau dengan gerak dikurangi: deretannya diam dan bisa digeser
   sendiri, berhenti pas di tiap ponsel. */
.ajbp:not(.is-looping) .ajbp-marquee {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.ajbp:not(.is-looping) .ajbp-marquee::-webkit-scrollbar {
    display: none;
}

.ajbp:not(.is-looping) .ajbp-item {
    scroll-snap-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .ajbp.is-looping .ajbp-track {
        animation: none;
    }
}