/* ============================================================================
   aj-komparasi.css — seksi "Komparasi" di beranda (#komparasi): manual vs
   Aturjadwal, enam baris.

   Tabelnya kisi CSS berperan ARIA tabel. Kolom Aturjadwal bukan sekadar sel
   berwarna: satu kartu putih (.ajv-hl) yang melintasi seluruh barisnya dan
   menyembul sedikit di atas & bawah bidang tabel — seperti paket unggulan di
   tabel harga. Kartunya berposisi absolut di area kisi kolom ketiga, jadi ia
   tidak ikut dalam penempatan otomatis baris-barisnya.

   Tiap baris punya kisi sendiri dengan templat kolom yang sama persis dengan
   tabelnya (--ajv-cols, semuanya minmax(0, …fr)), jadi kolomnya lurus tanpa
   bergantung pada subgrid.

   Di ponsel kolom aspeknya naik jadi judul tiap baris, dan yang tersisa dua
   kolom: manual | Aturjadwal.
   ========================================================================== */

.ajv {
    --ajv-ink: #27354a;
    --ajv-ink-soft: #6b7a90;
    --ajv-ok-bg: var(--aj-brand);
    --ajv-ok-ink: #ffffff;
    --ajv-no-bg: rgba(217, 59, 59, 0.08);
    --ajv-no-ink: #d93b3b;
    --ajv-hl-line: rgba(1, 104, 250, 0.28);
    --ajv-hl-rule: rgba(1, 104, 250, 0.12);
    --ajv-hl-glow: rgba(1, 104, 250, 0.08);
    --ajv-spring: cubic-bezier(0.22, 1.2, 0.36, 1);

    position: relative;
    max-width: 880px;
    margin-inline: auto;
    /* ruang untuk kartu yang menyembul di atas & bawah */
    padding-block: 20px;
}

.uc-dark .ajv {
    --ajv-ink: rgb(var(--color-ink));
    --ajv-ink-soft: rgb(var(--color-ink-soft));
    --ajv-ok-bg: rgb(var(--color-brand));
    /* aksen gelapnya terang: glyph di atasnya gelap (text-on-accent) */
    --ajv-ok-ink: #0f131a;
    --ajv-no-bg: rgba(255, 125, 114, 0.14);
    --ajv-no-ink: rgb(var(--color-danger));
    --ajv-hl-line: rgba(120, 170, 255, 0.4);
    --ajv-hl-rule: rgba(120, 170, 255, 0.16);
    --ajv-hl-glow: rgba(76, 147, 255, 0.12);
}

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

/* Warna ikon lewat `color`: tema vendor memaksa isi SVG ke currentColor. */
.ajv-i {
    flex: none;
    width: 1em;
    height: 1em;
    fill: currentColor;
}

#komparasi h2 {
    text-wrap: balance;
}

.ajv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Kisi
   ------------------------------------------------------------------------- */

.ajv-table {
    --ajv-cols: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.2fr);

    position: relative;
    display: grid;
    grid-template-columns: var(--ajv-cols);
    /* kepala + enam baris + baris tombol: eksplisit, supaya kartu kolom
       ketiga bisa merentang dari garis pertama sampai terakhir */
    grid-template-rows: repeat(8, auto);
    /* Tanpa padding kanan: kolom Aturjadwal berakhir tepat di tepi dalam
       tabel, jadi kartunya menutup ujung kanan tabel. Dengan padding di sana,
       peramban tidak sepakat di mana garis kisi terakhir untuk anak berposisi
       absolut (Chrome memakai tepi padding), dan kartunya jadi tidak simetris
       terhadap isinya. */
    padding: 0 0 0 20px;
    border: 1px solid var(--aj-line);
    border-radius: 28px;
    background: var(--aj-soft);
}

/* Kartu kolom Aturjadwal. */
.ajv-hl {
    position: absolute;
    grid-column: 3;
    grid-row: 1 / -1;
    inset: -20px 0;
    border: 1px solid var(--ajv-hl-line);
    border-radius: 24px;
    background: radial-gradient(120% 40% at 50% 0%, var(--ajv-hl-glow), rgba(1, 104, 250, 0) 72%),
        var(--aj-page);
    box-shadow: var(--aj-shadow-lg);
    pointer-events: none;
}

.uc-dark .ajv-hl {
    background: radial-gradient(120% 40% at 50% 0%, var(--ajv-hl-glow), rgba(76, 147, 255, 0) 72%),
        rgb(var(--color-surface));
}

.ajv-row {
    position: relative;
    z-index: 1;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: var(--ajv-cols);
}

/* Rata atas, bukan tengah: sel di sebelah teks yang terlipat dua baris
   ikut setinggi barisnya, dan tanda ✓/✕ harus tetap sejajar baris pertama
   teksnya sendiri. */
.ajv-cell {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
    padding: 18px 16px;
    color: var(--ajv-ink);
    font-size: 1rem;
    line-height: 1.4;
}

/* Garis antarbaris sebagai pseudo-elemen, bukan border: di kolom ketiga ia
   menjorok ke dalam kartu, jadi tidak pernah menyentuh tepi kartunya. */
.ajv-row:not(.is-head):not(.is-cta) > .ajv-cell::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--aj-line);
}

.ajv-row:not(.is-head):not(.is-cta) > .ajv-cell.is-aj::before {
    left: 20px;
    right: 20px;
    background: var(--ajv-hl-rule);
}

.ajv-cell.is-aspect {
    font-weight: 600;
}

.ajv-cell.is-aspect > .ajv-i {
    font-size: 20px;
    color: var(--ajv-ink-soft);
}

.ajv-cell.is-manual {
    color: var(--ajv-ink-soft);
}

.ajv-cell.is-aj {
    padding-inline: 20px;
    font-weight: 600;
}

/* kepala kolom */
.ajv-row.is-head > .ajv-cell {
    padding-block: 22px 18px;
    font-weight: 700;
}

.ajv-row.is-head > .ajv-cell.is-manual {
    color: var(--ajv-ink-soft);
}

.ajv-logo {
    display: block;
    width: auto;
    height: 24px;
}

/* ✓ dan ✕ — setinggi baris pertama teksnya (line-height 1.4 x 16px). */
.ajv-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 0.5px;
    border-radius: 50%;
    font-size: 14px;
}

.ajv-mark.is-ok {
    background: var(--ajv-ok-bg);
    color: var(--ajv-ok-ink);
}

.ajv-mark.is-no {
    background: var(--ajv-no-bg);
    color: var(--ajv-no-ink);
}

.ajv-mark .ajv-i {
    transition: transform 0.35s var(--ajv-spring);
}

@media (hover: hover) and (pointer: fine) {
    .ajv-row:hover .ajv-mark.is-ok .ajv-i {
        transform: scale(1.2);
    }
}

/* baris tombol di dasar kartu */
.ajv-row.is-cta > .ajv-cell {
    padding-block: 8px 0;
}

.ajv-row.is-cta > .ajv-cell.is-aj {
    justify-content: center;
    padding-bottom: 4px;
}

.ajv-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 20px;
    border-radius: 999px;
    background: var(--ajv-ok-bg);
    box-shadow: 0 12px 26px -14px rgba(1, 104, 250, 0.8);
    color: var(--ajv-ok-ink);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.25s var(--aj-ease), box-shadow 0.25s var(--aj-ease);
}

.ajv-cta:hover,
.ajv-cta:focus-visible {
    color: var(--ajv-ok-ink);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -14px rgba(1, 104, 250, 0.9);
}

.ajv-cta:focus-visible {
    outline: 2px solid var(--ajv-ok-bg);
    outline-offset: 3px;
}

.ajv-cta .icon {
    transition: transform 0.25s var(--aj-ease);
}

.ajv-cta:hover .icon {
    transform: translateX(3px);
}

.uc-dark .ajv-cta {
    box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.9);
}

/* ---------------------------------------------------------------------------
   Ponsel & tablet kecil — dua kolom, aspek jadi judul baris.
   ------------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .ajv {
        padding-block: 16px;
    }

    .ajv-table {
        --ajv-cols: minmax(0, 1fr) minmax(0, 1.08fr);

        padding: 0 0 0 12px;
        border-radius: 24px;
    }

    .ajv-hl {
        grid-column: 2;
        inset: -16px 0;
        border-radius: 20px;
    }

    .ajv-row {
        grid-template-rows: auto auto;
    }

    .ajv-cell {
        gap: 8px;
        padding: 6px 8px 14px 4px;
        font-size: 0.875rem;
    }

    .ajv-cell.is-aspect {
        grid-column: 1 / -1;
        grid-row: 1;
        gap: 8px;
        padding: 16px 4px 4px;
        color: var(--ajv-ink);
    }

    .ajv-cell.is-aspect > .ajv-i {
        font-size: 16px;
    }

    .ajv-cell.is-manual {
        grid-column: 1;
        grid-row: 2;
    }

    .ajv-cell.is-aj {
        grid-column: 2;
        grid-row: 2;
        padding-inline: 12px;
    }

    /* Garisnya pindah ke puncak judul baris dan cuma selebar kolom manual —
       kartu di kolom kedua tetap utuh tanpa garis yang menembusnya. */
    .ajv-row:not(.is-head):not(.is-cta) > .ajv-cell::before {
        display: none;
    }

    .ajv-row:not(.is-head):not(.is-cta) > .ajv-cell.is-aspect::before {
        display: block;
        right: calc(52% + 4px);
    }

    /* Kepala: sel aspeknya kosong (hanya teks pembaca layar), jadi tidak
       diberi baris sendiri. */
    .ajv-row.is-head > .ajv-cell.is-aspect {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .ajv-row.is-head > .ajv-cell {
        grid-row: 1;
        padding-block: 18px 10px;
    }

    .ajv-logo {
        height: 20px;
    }

    .ajv-mark {
        width: 20px;
        height: 20px;
        margin-top: 0;
        font-size: 13px;
    }

    .ajv-row.is-cta > .ajv-cell.is-aspect,
    .ajv-row.is-cta > .ajv-cell.is-manual {
        display: none;
    }

    .ajv-row.is-cta > .ajv-cell.is-aj {
        grid-row: 1;
        padding: 6px 10px 2px;
    }

    .ajv-cta {
        height: 44px;
        padding: 0 12px;
        font-size: 0.875rem;
    }
}

/* ---------------------------------------------------------------------------
   Kemunculan — hanya kalau aj-komparasi.js memasang .is-armed. Kartu kolom
   Aturjadwal naik lebih dulu, baris-barisnya menyusul, lalu centangnya
   meletup satu per satu dari atas.
   ------------------------------------------------------------------------- */

.ajv-hl {
    transition: opacity 0.6s ease, transform 0.9s var(--aj-ease);
}

.ajv-row {
    transition: opacity 0.5s ease calc(150ms + var(--r, 0) * 70ms),
        transform 0.7s var(--aj-ease) calc(150ms + var(--r, 0) * 70ms);
}

.ajv-mark {
    transition: transform 0.55s var(--ajv-spring) calc(450ms + var(--r, 0) * 90ms),
        opacity 0.4s ease calc(300ms + var(--r, 0) * 70ms);
}

.ajv.is-armed:not(.is-in) .ajv-hl {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
}

.ajv.is-armed:not(.is-in) .ajv-row {
    opacity: 0;
    transform: translateY(14px);
}

.ajv.is-armed:not(.is-in) .ajv-mark.is-ok {
    transform: scale(0);
}

.ajv.is-armed:not(.is-in) .ajv-mark.is-no {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .ajv-hl,
    .ajv-row,
    .ajv-mark,
    .ajv-mark .ajv-i,
    .ajv-cta,
    .ajv-cta .icon {
        transition: none !important;
    }

    .ajv-row:hover .ajv-mark.is-ok .ajv-i,
    .ajv-cta:hover,
    .ajv-cta:hover .icon {
        transform: none !important;
    }
}