/* ============================================================================
   aj-tentang.css — halaman Tentang (about.html), dalam desain baru beranda.

   Yang dipakai bersama — token, navbar dua wujud, menu Solusi & menu ponsel,
   tombol, penutup, footer, kartu bertekstur (.h4-fitur-card) dan potongan UI
   aplikasi (.h4-ui-*) — ada di aj-home4.css; berkas ini cuma seksi-seksi
   halaman ini: hero berjalan ramai, kisah pendiri, empat urusan, cara kami
   bekerja.

   Jalan di hero (.ajtk-jalan) digambar assets/js/aj-tentang.js di satu
   <canvas>, keempat kartu "Empat drama" (.h4-urusan-media) masing-masing
   di satu <canvas> oleh assets/js/aj-tentang-drama.js; berkas ini cuma
   memberi ukuran, bentuk kartu, dan warnanya.
   ========================================================================== */

/* Tiga nada titik, satu hue di atas latar hero — biru #3030B0 di tema
   terang, hitam di tema gelap: redup untuk dinding & jalan, sedang untuk
   garis gedung, perabot & baju, terang untuk orang. Diukur: terang #7A7AE6 2,7:1 ·
   #B3B3FF 5,0:1 · #FFFFFF 9,6:1 di atas #3030B0; gelap #4A4AD0 3,0:1 ·
   #8F8FF5 7,0:1 · #E0E0FF 15:1 di atas #0A0A0A.
   Kartu "Empat drama" memakai titik yang sama di atas --ajtd-card: biru
   hero di tema terang; di tema gelap hero-nya hitam seperti latar seksi
   itu, jadi kartunya abu gelap (--h4-sec-wait, #1C1C1C) supaya tetap
   terbaca sebagai kartu.
   --ajtl-nyanyi: biru suku kata yang sudah "dinyanyikan" di judul penutup,
   beda jelas dari putih: #66B2FF 4,3:1 di atas #3030B0 (2,2:1 dari putih);
   gelap #4F8BFF — biru aksen dasbor — 6,1:1 di atas #0A0A0A. */
.h4-tentang {
    --ajtk-dot-1: #7a7ae6;
    --ajtk-dot-2: #b3b3ff;
    --ajtk-dot-3: #ffffff;
    --ajtd-card: var(--h4-blue);
    --ajtl-nyanyi: #66b2ff;
}

.uc-dark .h4-tentang {
    --ajtk-dot-1: #4a4ad0;
    --ajtk-dot-2: #8f8ff5;
    --ajtk-dot-3: #e0e0ff;
    --ajtd-card: var(--h4-sec-wait);
    --ajtl-nyanyi: #4f8bff;
}

/* ── Hero: judul, satu kalimat, jalan ────────────────────────────────────── */

.h4-tentang-hero {
    padding: calc(var(--h4-nav-h) + 40px) 0 0;
    background: var(--h4-hero-bg);
    color: var(--h4-on-hero);
    container-type: inline-size;
}

.h4-tentang-hero-in {
    padding: 0 var(--h4-pad);
}

.h4-tentang-title {
    max-width: 13em;
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(32px, 9.4cqw, 56px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-tentang-lead {
    max-width: 34em;
    margin: 20px 0 0;
    font-family: var(--h4-sub);
    font-size: clamp(16px, 4.3cqw, 18px);
    font-stretch: 125%;
    font-weight: 400;
    line-height: 1.45;
    text-wrap: pretty;
}

/* Jalannya selebar hero, dari tepi ke tepi layar: gedung masuk dari kanan
   dan keluar di kiri. Tingginya 66 baris titik; jarak antartitik ikut lebar
   layar (5–10 px), jadi layar lebar memperlihatkan jalan yang lebih
   panjang, bukan titik yang lebih besar. aj-tentang.js membaca tingginya
   dan membaginya dengan 66. */
.ajtk-jalan {
    --ajtk-dot: clamp(5px, 100cqw / 160, 10px);
    position: relative;
    height: calc(66 * var(--ajtk-dot));
    margin: 40px calc(-1 * var(--h4-pad)) 0;
    overflow: hidden;
}

/* Ukurannya diisi aj-tentang.js: 1:1 dengan piksel layar, menempel di
   dasar jalan. */
.ajtk-jalan-canvas {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
}

/* ── Kisah: kutipan pendiri di kiri, fotonya di kanan ────────────────────── */

.h4-kisah {
    padding: 72px var(--h4-pad);
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    container-type: inline-size;
}

.h4-kisah-in {
    display: grid;
    gap: 36px;
}

.h4-kisah-title,
.h4-urusan-title,
.h4-prinsip-title {
    margin: 0;
    font-family: var(--h4-display);
    font-size: clamp(34px, 9.4cqw, 52px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-kisah-quote {
    margin: 28px 0 0;
    font-family: var(--h4-sub);
    font-size: clamp(18px, 4.8cqw, 22px);
    font-stretch: 112%;
    line-height: 1.5;
    text-wrap: pretty;
}

.h4-kisah-quote p {
    margin: 0;
}

.h4-kisah-quote p + p {
    margin-top: 1em;
}

.h4-kisah-name {
    margin: 28px 0 0;
    font-family: var(--h4-text);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.h4-kisah-name a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.h4-kisah-role {
    margin: 4px 0 0;
    font-family: var(--h4-text);
    font-size: 15px;
    line-height: 1.45;
    color: var(--h4-sec-soft);
}

/* Fotonya potongan transparan: warna kartu inilah latarnya. */
.h4-kisah-photo {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 900 / 1161;
    border-radius: 16px;
    background: var(--h4-sec-wait);
}

.h4-kisah-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Empat urusan: animasi titik masing-masing dalam kartu persegi ───────── */

.h4-urusan {
    padding: 8px 0 72px;
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    overflow: hidden;
    container-type: inline-size;
}

.h4-urusan-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 1040px;
    margin: 0 auto 36px;
    padding: 0 var(--h4-pad);
    text-align: center;
}

.h4-urusan-lead {
    max-width: 40em;
    margin: 0;
    font-family: var(--h4-sub);
    font-size: 17px;
    font-stretch: 125%;
    line-height: 1.45;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

.h4-urusan-source {
    margin: 0;
    font-family: var(--h4-text);
    font-size: 14px;
    line-height: 1.5;
    color: var(--h4-sec-soft);
}

.h4-urusan-source a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Ponsel: kartu bergeser mendatar (snap), seperti kartu Bayaran beranda;
   tablet & laptop: dua kolom; desktop lebar: empat sejajar. */
.h4-urusan-list {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 var(--h4-pad);
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--h4-pad);
    scrollbar-width: none;
}

.h4-urusan-list::-webkit-scrollbar {
    display: none;
}

.h4-urusan-item {
    flex: 0 0 min(84vw, 380px);
    min-width: 0;
    scroll-snap-align: start;
}

/* Tiap kartu satu animasi titik (aj-tentang-drama.js) yang menggambar ulang
   GIF yang dulu dipilih user untuknya, dengan satu judul pendek di bawahnya
   (tanpa keterangan — permintaan user). Sebelum skripnya jalan, atau tanpa
   JS, kartunya polos sewarna latar animasinya. */
.h4-urusan-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    background: var(--ajtd-card);
    transition:
        rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        translate 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.h4-urusan-name {
    margin: 18px 0 0;
    font-family: var(--h4-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
    text-wrap: balance;
}

/* Tablet & desktop: kartunya miring sedikit selang-seling seperti stiker
   yang ditempel (sama dengan kartu angka miring di seksi Bayaran beranda),
   tegak lagi saat disorot. Di ponsel tegak — kartunya digeser jari.
   aj-tentang-drama.js menggambar miring & sorot yang sama di kanvasnya
   (TILT, LIFT, EASE_MS di sana), jadi ubah keduanya bersamaan. */
@media (min-width: 768px) {
    .h4-urusan-item:nth-child(4n + 1) .h4-urusan-media {
        rotate: -2deg;
    }

    .h4-urusan-item:nth-child(4n + 2) .h4-urusan-media {
        rotate: 1.5deg;
    }

    .h4-urusan-item:nth-child(4n + 3) .h4-urusan-media {
        rotate: -1deg;
    }

    .h4-urusan-item:nth-child(4n + 4) .h4-urusan-media {
        rotate: 2deg;
    }
}

@media (min-width: 768px) and (hover: hover) {
    .h4-urusan-item:hover .h4-urusan-media {
        rotate: 0deg;
        translate: 0 -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .h4-urusan-media {
        transition: none;
    }
}

/* Skrip mengambil alih (.ajtd-on): kartu, miringnya, dan tegak + terangkatnya
   saat disorot digambar di kanvas — bingkainya sendiri tidak diputar,
   supaya titik-titiknya tidak diresampling jadi buram. Kanvasnya lebih besar
   dari kartu supaya kartu yang miring tidak terpotong; ukuran & letaknya
   diisi skripnya. Pemilihnya lebih spesifik dari aturan miring & sorot di
   atas. */
.h4-urusan .h4-urusan-item .h4-urusan-media.ajtd-on {
    overflow: visible;
    background: none;
    rotate: none;
    translate: none;
    transition: none;
}

.ajtd-canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── Cara kami bekerja: empat butir dipisah garis rambut ─────────────────── */

.h4-prinsip {
    padding: 8px var(--h4-pad) 96px;
    background: var(--h4-sec-bg);
    color: var(--h4-sec-ink);
    container-type: inline-size;
}

.h4-prinsip-title {
    max-width: 14em;
    margin-bottom: 28px;
}

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

.h4-prinsip-item {
    padding: 22px 0 26px;
    border-top: 1px solid var(--h4-sec-edge);
}

.h4-prinsip-item h3 {
    margin: 0 0 10px;
    font-family: var(--h4-display);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-wrap: balance;
}

.h4-prinsip-item p {
    max-width: 38em;
    margin: 0;
    font-family: var(--h4-text);
    font-size: 16px;
    line-height: 1.6;
    color: var(--h4-sec-soft);
    text-wrap: pretty;
}

/* Tautan teks rata kiri, mengikuti judul seksinya. */
.h4-prinsip .h4-more {
    margin: 28px 0 0;
}

@media (min-width: 768px) {
    .h4-prinsip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: clamp(32px, 4vw, 80px);
    }
}

@media (min-width: 900px) {
    .h4-tentang-hero {
        padding: calc(var(--h4-nav-h) + 64px) 0 0;
    }

    .h4-tentang-title {
        font-size: clamp(52px, 5.6cqw, 104px);
    }

    .h4-tentang-lead {
        margin-top: 28px;
        font-size: clamp(18px, 1.45vw, 22px);
    }

    .ajtk-jalan {
        margin-top: 56px;
    }

    .h4-kisah {
        padding: 120px var(--h4-pad);
    }

    .h4-kisah-in {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
        align-items: center;
        gap: clamp(48px, 6vw, 120px);
    }

    .h4-kisah-title,
    .h4-urusan-title,
    .h4-prinsip-title {
        font-size: clamp(44px, 4.2cqw, 80px);
    }

    .h4-kisah-quote {
        margin-top: 36px;
        font-size: clamp(20px, 1.6vw, 28px);
    }

    .h4-urusan {
        padding: 24px 0 112px;
    }

    .h4-urusan-head {
        margin-bottom: 48px;
    }

    .h4-urusan-lead {
        font-size: clamp(17px, 1.3vw, 20px);
    }

    .h4-urusan-name {
        margin-top: 24px;
        font-size: clamp(20px, 1.5vw, 26px);
    }

    .h4-prinsip {
        padding: 24px var(--h4-pad) 128px;
    }

    .h4-prinsip-title {
        margin-bottom: 40px;
    }

    .h4-prinsip-item h3 {
        font-size: clamp(20px, 1.6vw, 26px);
    }

    .h4-prinsip-item p {
        font-size: 17px;
    }
}

/* Tablet & laptop: 2 x 2; desktop lebar: empat sejajar. */
@media (min-width: 768px) {
    .h4-urusan-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px clamp(20px, 2.2vw, 40px);
        overflow: visible;
    }
}

@media (min-width: 1200px) {
    .h4-urusan-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ── Penutup: judul yang dinyanyikan ─────────────────────────────────────── */

/* "Tapi atur dulu jadwalmu" ala karaoke (assets/js/aj-tentang-lirik.js):
   semua baris lirik ditumpuk di satu sel grid — tingginya baris tertinggi,
   jadi tombol di bawahnya diam — dan hanya satu yang tampak. Tiap suku kata
   diwarnai dari kiri ke kanan oleh --p (0..1, diisi skripnya): latarnya
   setengah biru setengah putih, digeser lalu dipotong ke huruf. Padding
   suku kata (dibatalkan margin-nya) memberi latar ruang untuk ekor & tepi
   huruf supaya tidak terpotong. */
.ajtl-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ajtl-lirik {
    display: grid;
}

.ajtl-baris {
    grid-area: 1 / 1;
    align-self: center;
    opacity: 0;
    translate: 0 0.14em;
    transition:
        opacity 0.16s ease,
        translate 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ajtl-baris.is-on {
    opacity: 1;
    translate: none;
}

.ajtl-baris.is-lewat {
    translate: 0 -0.14em;
}

.ajtl-kata {
    white-space: nowrap;
}

.ajtl-suku {
    margin: 0 -0.08em;
    padding: 0.2em 0.08em;
    background: linear-gradient(90deg, var(--ajtl-nyanyi) 50%, var(--h4-on-hero) 50%)
        calc((1 - var(--p, 0)) * 100%) 0 / 200% 100% no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@media (forced-colors: active) {
    .ajtl-suku {
        background: none;
        color: inherit;
    }
}