/*
 * Kaki halaman situs — halaman depan dan halaman hukum memakai yang sama.
 *
 * Berdiri sendiri: tokennya didefinisikan di sini, bukan dipinjam dari
 * landing.css, karena halaman hukum tidak memuat landing.css dan tidak ada
 * alasan ia harus memuatnya demi satu blok di paling bawah.
 *
 * Gelap di kedua halaman dengan sengaja. Halaman depan berlatar krem dan
 * halaman hukum berlatar abu kertas; satu blok gelap menutup keduanya dengan
 * cara yang sama, dan itu yang membuat keduanya terbaca sebagai satu situs.
 *
 * Disajikan sebagai berkas biasa dari public/css (salinan berkas ini), tanpa
 * build step — sama seperti stylesheet permukaan lain. Ada tes yang menjaga
 * keduanya identik.
 */

.kaki {
    --kaki-latar: #123229;
    --kaki-tinta: #dce8e0;
    --kaki-redup: #a9bdb2;

    padding: 64px 0 18px;
    background: var(--kaki-latar);
    color: var(--kaki-tinta);
    font-family: inherit;
}

.kaki__isi,
.kaki__bawah {
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: 24px;
}

.kaki__isi {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 32px;
}

.kaki__merek img {
    /* Logonya berwarna gelap; di atas latar gelap ia dibalik jadi putih. */
    filter: brightness(0) invert(1);
    max-width: 150px;
    height: auto;
}

.kaki__merek p {
    margin: 14px 0 18px;
    max-width: 38ch;
    color: var(--kaki-redup);
    font-size: .9rem;
    line-height: 1.6;
}

/* Ajakan terakhir. Kaki halaman itu tempat orang mendarat setelah membaca
   semuanya — termasuk setelah membaca syarat dan ketentuannya. */
.kaki__ajakan {
    display: inline-block;
    padding: 11px 20px;
    border: 1px solid var(--kaki-tinta);
    border-radius: 999px;
    color: var(--kaki-tinta);
    text-decoration: none;
    font-size: .85rem;
    font-weight: 500;
}

.kaki__ajakan:hover {
    background: var(--kaki-tinta);
    color: var(--kaki-latar);
}

.kaki nav {
    display: grid;
    align-content: start;
    gap: 10px;
}

.kaki nav b {
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.kaki a {
    color: var(--kaki-tinta);
    text-decoration: none;
    font-size: .88rem;
}

.kaki nav a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.kaki__bawah {
    margin-top: 48px;
    padding-top: 18px;
    border-top: 1px solid #ffffff28;
    font-size: .78rem;
    color: var(--kaki-redup);
}

@media (max-width: 800px) {
    .kaki { padding-top: 48px; }

    .kaki__isi {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }

    /* Kolom merek melebar penuh; tiga kolom tautan berbagi dua kolom sisa. */
    .kaki__merek { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .kaki__isi { grid-template-columns: 1fr; }
}