/* Landing page typeface: swap theme default (IBM Plex Sans) for Figtree,
   loaded via assets/css/fonts.css. Overriding these theme css vars (rather
   than a blanket `body { font-family }`) keeps every element that derives
   from them - body copy, headings, buttons - in sync. */
:root {
    --font-family-primary: "Figtree", "IBM Plex Sans Arabic", sans-serif;
    --font-family-secondary: "Figtree", "IBM Plex Sans Arabic", sans-serif;
    --font-family-tertiary: "Figtree", "IBM Plex Sans Arabic", sans-serif;
}

/* Bump every ".fw-medium" (theme default: font-weight 500) to bold across
   the landing page - the theme's own .fw-bold is defined as 500 too, so
   overriding the class here (instead of swapping ~500 class names across
   every HTML page) is the only way "medium" text actually reads bolder. */
.fw-medium {
    font-weight: 700 !important;
}

/* Header nav (Fitur/Harga/Tentang) stays at actual medium (500) instead of
   picking up the blanket bold above. Two classes beats the single-class
   .fw-medium selector, so this wins regardless of source order. */
.uc-navbar-nav.fw-medium {
    font-weight: 500 !important;
}

/* Feature card headings ("Booking beres tanpa bolak-balik chat", "Reminder
   jalan sendiri", etc. - shared markup between the home and features pages)
   sit at semibold (600) instead of the blanket bold above. */
.feature-item-content .fw-medium {
    font-weight: 600 !important;
}

/* "Biaya per transaksi" fee headings on the payment-methods page: keep at
   actual medium (500) instead of the blanket bold override above. */
.fee-heading.fw-medium {
    font-weight: 500 !important;
}

/* Payment method card titles on the payment-methods page (QRIS, E-wallet,
   Virtual Account, Kartu Kredit) sit at semibold (600) instead of the
   blanket bold override above. */
.panel.vstack > h3.fw-medium {
    font-weight: 600 !important;
}

/* Soft light-blue hover/active for outline-primary buttons, keep the blue text
   (theme default fills solid blue with white text on hover/active) */
.btn-outline-primary {
    --bs-btn-hover-bg: rgba(1, 104, 250, 0.1);
    --bs-btn-hover-color: #0168FA;
    --bs-btn-hover-border-color: rgba(1, 104, 250, 0.3);
    --bs-btn-active-bg: rgba(1, 104, 250, 0.1);
    --bs-btn-active-color: #0168FA;
    --bs-btn-active-border-color: rgba(1, 104, 250, 0.3);
    --bs-btn-active-shadow: none;
}

/* Signed-in user pill: keep the name dark in light mode independently of the
   outline button's blue foreground color. Dark mode overrides both the name
   and chevron in aj-dark-theme.css. */
.aj-user-pill .aj-user-pill-name {
    color: #27354A;
}

/* "Dapat apa saja?" pill on the blue pricing section: translucent white fill
   with a white border, dimming (darker overlay, not lighter) on hover/focus/active */
.btn-outline-light {
    --bs-btn-color: #fff;
    --bs-btn-bg: rgba(255, 255, 255, 0.15);
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(0, 0, 0, 0.15);
    --bs-btn-hover-border-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(0, 0, 0, 0.25);
    --bs-btn-active-border-color: #fff;
    --bs-btn-active-shadow: none;
}

/* Butir centang di kartu harga (beranda & halaman harga). Tema membuat
   `.nav-y > * > *` ikut flex, jadi teksnya dibungkus <span> dan dikembalikan
   ke alur biasa — tanpa itu, <i>/<b> di tengah kalimat jadi kolom sendiri
   begitu barisnya patah ("Bisa / pertemuan | offline dan online"). Centangnya
   sejajar baris pertama, bukan di tengah butir dua baris. */
.pricing-box .nav-y > li > span {
    display: block;
}

.pricing-box .nav-y > li:has(> span) {
    align-items: baseline;
}

/* Footer nav links: theme's .nav-y:hover only dims siblings inside the same
   <ul>, so the two footer link columns fade independently. Dim every link
   across both columns together; the theme's own .nav-y a:hover rule (!important)
   keeps the hovered link at full opacity. */
.uc-footer-widgets:has(.nav-y a:hover) .nav-y a {
    opacity: 0.6;
}

/* Header nav (Fitur/Harga/Tentang): match the footer menu's hover behavior —
   dim the other links while the hovered one stays fully visible, instead of
   the theme default which only fades the hovered link itself. */
.uc-navbar-nav:has(> li > a:hover) > li > a:not(:hover) {
    opacity: 0.6 !important;
}

/* Tombol tampilan di header (Terang → Gelap → Sistem), disuntikkan oleh
   assets/js/aj-theme-toggle.js. Bentuknya menyalin tombol yang sama di dasbor,
   src/components/Buttons/ThemeToggleButton.vue: lingkaran 40px berbingkai,
   ikon 20px, dan pergantian ikon bergaya pegas. Latar & bingkainya menyamai
   tombol Masuk di sebelahnya (.btn-outline-primary.border): tembus pandang,
   garis --bs-border-color, hover biru tipis — bukan lingkaran putih pejal.
   Warna ikonnya memakai nilai token terang dari src/assets/main.css; di mode
   gelap ia mengambil variabel aj-dark-theme.css supaya tak bisa berselisih. */
.aj-theme-toggle {
    --aj-tt-line: var(--bs-border-color, rgba(131, 131, 131, 0.25));
    --aj-tt-ink: #27354A;
    --aj-tt-brand: #0161E9;

    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--aj-tt-line);
    border-radius: 9999px;
    background-color: transparent;
    color: var(--aj-tt-ink);
    outline: none;
    cursor: pointer;
    transition:
        background-color 200ms ease-out,
        border-color 200ms ease-out,
        color 200ms ease-out,
        transform 120ms ease-out;
}

.aj-theme-toggle:hover {
    background-color: rgba(1, 104, 250, 0.1);
    color: var(--aj-tt-brand);
}

.aj-theme-toggle:active {
    transform: scale(0.95);
}

.aj-theme-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(1, 97, 233, 0.5);
}

.uc-dark .aj-theme-toggle {
    --aj-tt-ink: rgb(var(--color-ink));
    --aj-tt-brand: rgb(var(--color-brand));
}

.uc-dark .aj-theme-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(76, 147, 255, 0.5);
}

/* Slot selebar ikon supaya tombolnya tidak bergoyang selagi ikon lama keluar
   dan yang baru masuk — pergantiannya berurutan, bukan bersilang. */
.aj-theme-toggle-slot {
    display: inline-flex;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.aj-theme-toggle-icon {
    display: block;
    transition:
        transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 140ms ease-out;
}

.aj-theme-toggle-icon.is-entering {
    opacity: 0;
    transform: translateY(6px) scale(0.8);
}

.aj-theme-toggle-icon.is-leaving {
    opacity: 0;
    transform: translateY(-6px) scale(0.8);
    transition:
        transform 120ms ease-in,
        opacity 120ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
    .aj-theme-toggle-icon,
    .aj-theme-toggle-icon.is-entering,
    .aj-theme-toggle-icon.is-leaving {
        transition: none;
    }
}

/* Lebur sehalaman penuh saat tema berganti, lewat View Transitions API (lihat
   applyDark() di assets/js/aj-theme-toggle.js): yang dianimasikan cuma dua
   potret halaman, di GPU, bukan warna tiap elemen. Durasi dan easing-nya
   menyamai .theme-transition di src/assets/main.css. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Wordmark raksasa penutup footer — dipakai di footer SEMUA halaman landing,
   jadi aturannya tinggal di sini dan bukan di aj-polish.css yang cuma dimuat
   index & features.

   Wordmark menutup halaman, jadi padding bawah footer dinolkan supaya tidak
   menyisakan ruang kosong besar di bawahnya (.py-* tema pakai !important). */
.uc-footer:has(.aj-footer-wordmark) .footer-outer {
    padding-bottom: 0 !important;
}

/* .overflow-hidden bawaan tema di <footer> akan memangkas bagian wordmark yang
   menggantung di bawah ujung halaman (lihat .aj-footer-wordmark svg), jadi
   dilepas. Luapan mendatar tetap tidak bisa digulir: body .overflow-x-hidden. */
.uc-footer:has(.aj-footer-wordmark) {
    overflow: visible !important;
}

/* Wordmark tidak lagi dipasang sebagai <img> berwarna merek, tapi digambar
   sebagai siluet di SVG yang dibangun buildFooterWordmark() di
   assets/js/app-head-bs.js: bentuk huruf diambil dari alpha channel file SVG
   lewat <mask>, warnanya datang dari gradasi di bawah. Dengan begitu warnanya
   bisa netral (abu-abu) di terang dan biru tua di gelap, tanpa menyiapkan dua
   file.

   Sumber mask-nya aj-wordmark.svg, bukan aj-logo.svg: di aj-logo.svg ujung
   bulat garis atas ikon kalender menonjol ~1,5 unit di atas viewBox dan
   terpotong clipPath-nya. Di ukuran header potongan itu sub-piksel, tapi di
   sini wordmark selebar container jadi tepi atasnya terlihat rata terpangkas.
   aj-wordmark.svg isinya path yang sama persis, hanya viewBox-nya dilonggarkan
   ke atas dan clipPath-nya dibuang.

   Gradasi gelap-di-atas → terang-di-bawah meniru dinding cekungan yang kena
   cahaya dari atas, dan garis tipis tepat di bawah huruf jadi tepian yang
   tersorot — dua hal itu yang bikin wordmark terbaca seperti ditekan ke dalam
   (deboss), bukan timbul. */
.aj-footer-wordmark {
    --aj-wordmark-top: rgba(24, 33, 51, 0.22);
    --aj-wordmark-bottom: rgba(24, 33, 51, 0.07);
    --aj-wordmark-relief: rgba(255, 255, 255, 0.92);
    --aj-wordmark-glow: rgba(1, 104, 250, 0.16);

    position: relative;
    margin-top: 2.5rem;

    /* Halaman sengaja berhenti di tengah wordmark: kotak yang ikut dihitung
       hanya ~68% tinggi siluetnya (27 dari 39,6 unit viewBox), jadi begitu
       scroll mentok huruf-hurufnya terlihat terpangkas ujung halaman. Ukuran
       ini juga yang menahan tempat sebelum SVG-nya disisipkan. */
    aspect-ratio: 212 / 27;
}

/* Sisa siluetnya tidak dipangkas, cuma menggantung: viewBox SVG-nya setinggi
   kotak ini (27 unit) sementara gambarnya 39,6 unit, dan overflow: visible
   membiarkan sepertiga bawahnya terlukis di bawah ujung halaman. Isi SVG yang
   meluber hanya dihitung luapan visual, bukan area scroll, jadi halaman tetap
   berhenti di tengah huruf — tapi begitu ditarik lewat ujungnya (overscroll
   iOS/macOS), sisa hurufnya ikut naik bersama halaman. (overflow-clip-margin
   tidak bisa dipakai untuk ini: area di dalam margin-nya dihitung area scroll,
   jadi halaman balik memanjang sepanjang wordmark penuh.)

   translateZ(0) itu syarat, bukan hiasan. Di WebKit lapisan akar dokumen
   hanya seluas dokumen, jadi luapan yang dilukis di lapisan itu terpangkas di
   ujung halaman; SVG perlu lapisan komposit sendiri yang ukurannya ikut
   luapannya. will-change: transform tidak cukup — iOS mengabaikannya saat
   memori seret — sedangkan transform 3D + filter tetap dikomposit.

   drop-shadow = tepian yang tersorot. Dipasang di <svg>, bukan di <g> yang
   dimask, karena mask ikut memotong bayangannya sampai tak terlihat. */
.aj-footer-wordmark svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: translateZ(0);
    filter: drop-shadow(0 1px 0 var(--aj-wordmark-relief));
}

/* aj-wordmark.svg berwarna (teks hitam, ikon biru) — yang diambil hanya
   bentuknya, bukan terang-gelapnya. */
.aj-footer-wordmark mask {
    mask-type: alpha;
}

.aj-footer-wordmark .aj-wm-top {
    stop-color: var(--aj-wordmark-top);
}

.aj-footer-wordmark .aj-wm-bottom {
    stop-color: var(--aj-wordmark-bottom);
}

/* Dua lapis di balik mask yang sama: dinding cekungan yang statis, lalu pita
   cahaya yang menyapu. Cahayanya sengaja lebar dan beralpha rendah supaya
   terbaca sebagai sinar yang lewat di atas permukaan terpahat — bukan garis
   kilap yang meluncur seperti pemuat skeleton. Miring 10° (100deg dalam
   hitungan CSS), jadi sapuannya sedikit menurun mengikuti arah baca.

   Tepi pita memakai warna intinya dengan opacity nol, bukan `transparent`:
   gradasi SVG tidak premultiplied, jadi hitam transparan akan meninggalkan
   pinggiran kelabu. */
.aj-footer-wordmark .aj-wm-glow-core,
.aj-footer-wordmark .aj-wm-glow-edge {
    stop-color: var(--aj-wordmark-glow);
}

.aj-footer-wordmark .aj-wm-glow-edge {
    stop-opacity: 0;
}

/* Pitanya digambar di persegi 2,4x lebar wordmark (508,8 unit) supaya di
   kedua ujung sapuan pusat pitanya sudah di luar huruf — pergantian putaran
   jadi tak terlihat. Geserannya 296,8 unit viewBox (508,8 − 212): dari rata
   kanan ke rata kiri wordmark. */
.aj-footer-wordmark .aj-wm-sweep {
    animation: aj-wordmark-rake 12s linear infinite;
}

/* Sapuannya cuma mengisi 52% durasi; sisanya diam di kedua ujung, jadi
   wordmark lebih sering tenang daripada bergerak. */
@keyframes aj-wordmark-rake {
    0%,
    10% {
        transform: translateX(0);
        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }

    62%,
    100% {
        transform: translateX(296.8px);
    }
}

/* Tanpa animasi pitanya diam di posisi awal, di luar huruf — yang tersisa
   persis wordmark diam semula. */
@media (prefers-reduced-motion: reduce) {
    .aj-footer-wordmark .aj-wm-sweep {
        animation: none;
    }
}

.uc-dark .aj-footer-wordmark {
    --aj-wordmark-top: #101c38;
    --aj-wordmark-bottom: #1d3260;
    --aj-wordmark-relief: rgba(140, 172, 255, 0.12);
    --aj-wordmark-glow: rgba(130, 176, 255, 0.28);
}

@media (min-width: 992px) {
    .aj-footer-wordmark {
        margin-top: 4rem;
    }
}

/* ---------------------------------------------------------------------------
   Token bersama — dulu tinggal di aj-polish.css, dipindah ke sini karena
   halaman yang tidak memuat lapisan polish (pricing, dll.) memakai komponen
   yang sama: eyebrow dan akordeon FAQ di bawah. Palet .uc-dark mengikuti
   aj-dark-theme.css / palet dashboard.
   ------------------------------------------------------------------------- */

:root {
    --aj-brand: #0168fa;
    --aj-brand-deep: #0b3fcb;

    --aj-page: #ffffff;
    --aj-soft: #f5f8fe;
    --aj-soft-2: #eef4ff;
    --aj-line: rgba(15, 38, 90, 0.1);
    --aj-line-strong: rgba(1, 104, 250, 0.28);

    --aj-shadow-sm: 0 1px 2px rgba(12, 32, 74, 0.05), 0 10px 24px -18px rgba(12, 32, 74, 0.4);
    --aj-shadow-md: 0 2px 4px rgba(12, 32, 74, 0.05), 0 26px 50px -28px rgba(12, 32, 74, 0.45);
    --aj-shadow-lg: 0 4px 10px rgba(12, 32, 74, 0.06), 0 48px 90px -36px rgba(12, 32, 74, 0.5);

    --aj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.uc-dark {
    --aj-page: #0f131a;
    --aj-soft: #171d27;
    --aj-soft-2: #1b2331;
    --aj-line: rgba(148, 178, 255, 0.14);
    --aj-line-strong: rgba(120, 170, 255, 0.4);

    --aj-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 24px -18px rgba(0, 0, 0, 0.8);
    --aj-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 26px 50px -28px rgba(0, 0, 0, 0.9);
    --aj-shadow-lg: 0 4px 10px rgba(0, 0, 0, 0.45), 0 48px 90px -36px rgba(0, 0, 0, 0.95);
}

/* ---------------------------------------------------------------------------
   Eyebrow / label seksi — satu bentuk pill dipakai di semua seksi.
   Sengaja tanpa `uppercase`: hierarki dibangun dari ukuran + berat huruf.
   ------------------------------------------------------------------------- */

.aj-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.875rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* di atas latar biru (hero & pricing) */
.aj-eyebrow-glass {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* di atas latar terang (fitur, FAQ, ...) */
.aj-eyebrow-soft {
    color: var(--aj-brand);
    background: rgba(1, 104, 250, 0.08);
    border: 1px solid rgba(1, 104, 250, 0.18);
}

.uc-dark .aj-eyebrow-soft {
    background: rgba(120, 170, 255, 0.12);
    border-color: rgba(120, 170, 255, 0.28);
    color: rgb(var(--color-brand));
}

/* ---------------------------------------------------------------------------
   FAQ — akordeon jadi kartu ringan; yang terbuka naik ke permukaan.
   Seksinya sama persis di beranda dan halaman harga, jadi gayanya ikut di sini.
   ------------------------------------------------------------------------- */

#faq .uc-accordion > li {
    background-color: var(--aj-soft) !important;
    border: 1px solid transparent;
    transition: background-color 0.3s var(--aj-ease), border-color 0.3s var(--aj-ease),
        box-shadow 0.3s var(--aj-ease);
}

#faq .uc-accordion > li:hover {
    border-color: var(--aj-line-strong);
}

#faq .uc-accordion > li.uc-open {
    background-color: var(--aj-page) !important;
    border-color: var(--aj-line-strong);
    box-shadow: var(--aj-shadow-sm);
}

#faq .uc-accordion-title {
    letter-spacing: -0.01em;
}

#faq .uc-accordion-content p {
    margin-bottom: 0;
}