/* ============================================================================
   aj-integrasi-home.css — seksi "Integrasi" di beranda (#integrasi di
   index.html): teks di kiri, Aturjadwal di tengah lima aplikasi yang
   tersambung di kanan. Halaman lengkapnya integrasi.html (aj-integrasi.css).

   Kelasnya berawalan `ajin-`, bukan `aj-`: beberapa skrip landing bertindak
   pada kelas aj-* generik (lihat catatan di aj-hero-device.css).
   ========================================================================== */

.ajin {
    --ajin-ink: rgb(9, 9, 44);
    --ajin-brand: #0168fa;
    --ajin-wire: rgba(1, 104, 250, 0.22);
    --ajin-wire-hot: rgba(1, 104, 250, 0.7);
}

.uc-dark .ajin {
    --ajin-ink: rgb(231, 235, 241);
    --ajin-brand: rgb(76, 147, 255);
    --ajin-wire: rgba(120, 170, 255, 0.24);
    --ajin-wire-hot: rgba(120, 170, 255, 0.75);
}

.ajin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    align-items: center;
    gap: 56px;
    max-width: 1000px;
    margin: 0 auto;
}

.ajin-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.ajin-copy h2 {
    text-wrap: balance;
}

.ajin-copy p {
    max-width: 480px;
    text-wrap: pretty;
}

/* Tautan ke halaman lengkap — bentuk kapsul garis seperti tombol
   "Lihat metode pembayaran" di seksi fitur. */
.ajin-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid var(--aj-line-strong);
    color: var(--ajin-brand);
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.ajin-more:hover {
    background: rgba(1, 104, 250, 0.08);
    color: var(--ajin-brand);
}

.ajin-more:active {
    transform: scale(0.97);
}

.ajin-more:focus-visible {
    outline: 2px solid var(--ajin-brand);
    outline-offset: 3px;
}

.ajin-more svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ajin-more:hover svg {
    transform: translateX(3px);
}

/* ── Simpul ─────────────────────────────────────────────────────────────── */

/* Semua ukuran dalam cqi, supaya susunannya tetap sama dari 440px sampai
   ~320px di ponsel. Posisi simpul (--x/--y) = sudut segi lima berjari-jari
   38% — sama dengan ujung kabel di viewBox SVG 400×400. */
.ajin-hub {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    container-type: inline-size;
}

.ajin-wires {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--ajin-brand);
}

.ajin-lines path {
    stroke: var(--ajin-wire);
    stroke-width: 1.5;
    stroke-linecap: round;
    transition: stroke 0.25s ease;
}

.ajin-core,
.ajin-tile {
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--aj-line);
    box-shadow: var(--aj-shadow-sm);
}

/* Ubin tetap putih di mode gelap — seperti ikon aplikasinya sendiri. */
.uc-dark .ajin-core,
.uc-dark .ajin-tile {
    border-color: transparent;
}

.ajin-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20cqi;
    height: 20cqi;
    border-radius: 5.5cqi;
    transform: translate(-50%, -50%);
    box-shadow: var(--aj-shadow-md);
}

.ajin-core img {
    width: 11cqi;
    height: 11cqi;
}

.ajin-node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2cqi;
    width: 15cqi;
    color: var(--ajin-ink);
    text-decoration: none;
    /* Ubinnya yang dipusatkan di titik simpul, bukan ubin + namanya. */
    transform: translate(-50%, -7.5cqi);
}

.ajin-tile {
    width: 15cqi;
    height: 15cqi;
    border-radius: 4.2cqi;
    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.3s ease;
}

.ajin-tile img {
    width: 8.5cqi;
    height: 8.5cqi;
}

/* Nama di atas kabel: latarnya warna halaman supaya kabel tampak lewat di
   belakangnya, bukan mencoretnya. */
.ajin-name {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--aj-page);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

.ajin-node:hover {
    color: var(--ajin-brand);
}

.ajin-node:hover .ajin-tile {
    transform: translateY(-3px);
    box-shadow: var(--aj-shadow-md);
}

.ajin-node:focus-visible {
    outline: none;
}

.ajin-node:focus-visible .ajin-tile {
    outline: 2px solid var(--ajin-brand);
    outline-offset: 3px;
}

/* Kabel simpul yang ditunjuk ikut menyala. */
.ajin-hub:has(.ajin-node[data-i='1']:hover) .ajin-lines path:nth-child(1),
.ajin-hub:has(.ajin-node[data-i='2']:hover) .ajin-lines path:nth-child(2),
.ajin-hub:has(.ajin-node[data-i='3']:hover) .ajin-lines path:nth-child(3),
.ajin-hub:has(.ajin-node[data-i='4']:hover) .ajin-lines path:nth-child(4),
.ajin-hub:has(.ajin-node[data-i='5']:hover) .ajin-lines path:nth-child(5) {
    stroke: var(--ajin-wire-hot);
}

/* ── Responsif ──────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .ajin-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ajin-copy {
        align-items: center;
        text-align: center;
    }

    .ajin-hub {
        width: min(100%, 420px);
        margin: 0 auto;
    }
}

@media (max-width: 420px) {
    .ajin-name {
        padding: 1px 4px;
        font-size: 12px;
        line-height: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ajin-dots {
        display: none;
    }

    .ajin-tile,
    .ajin-more,
    .ajin-more svg {
        transition: none;
    }
}