/* Halaman tutorial (tutorial/index.php). Dasar (warna, tombol, kepala, kaki) dari pemilik.css. */
.tt-hero { background: linear-gradient(180deg, #FFF5F6 0%, var(--pm-putih) 100%); padding: 48px 0 24px; text-align: center; }
.tt-hero h1 { font-size: 42px; }
.tt-hero h1 span { color: var(--pm-merah); }
.tt-hero__sub { margin: 14px auto 0; max-width: 34em; font-size: 18px; color: var(--pm-teks-2); }

.tt-daftar { padding: 24px 0 64px; }
.tt-kartu {
    display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: start;
    background: var(--pm-putih); border: 1px solid var(--pm-garis); border-radius: 24px; padding: 28px;
    box-shadow: 0 12px 32px rgba(207, 58, 74, .06);
    scroll-margin-top: 88px;
}
.tt-kartu + .tt-kartu { margin-top: 28px; }
.tt-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 18px; background: #111; }
.tt-chip {
    display: inline-block; padding: 6px 14px; border-radius: 999px;
    background: var(--pm-merah-muda); color: var(--pm-merah-tua); font-size: 13px; font-weight: 600;
}
.tt-isi h2 { margin-top: 14px; font-size: 28px; }
.tt-ringkas { margin-top: 10px; color: var(--pm-teks-2); }
.tt-langkah { list-style: none; counter-reset: langkah; margin: 22px 0 0; padding: 0; }
.tt-langkah li { counter-increment: langkah; position: relative; padding: 0 0 14px 46px; font-size: 15px; }
.tt-langkah li::before {
    content: counter(langkah); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; background: var(--pm-merah); color: var(--pm-putih); font-weight: 700; font-size: 14px;
}
.tt-langkah li:not(:last-child)::after {   /* garis penghubung antar nomor */
    content: ""; position: absolute; left: 14px; top: 30px; bottom: 2px; width: 2px; background: var(--pm-merah-muda);
}
.tt-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tt-bantuan { margin-top: 28px; text-align: center; font-size: 15px; color: var(--pm-teks-2); }
.tt-bantuan a { color: var(--pm-merah); }

@media (max-width: 760px) {
    .tt-hero { padding: 32px 0 12px; }
    .tt-hero h1 { font-size: 30px; }
    .tt-hero__sub { font-size: 16px; }
    .tt-kartu { grid-template-columns: 1fr; gap: 24px; padding: 16px; border-radius: 20px; }
    .tt-video { max-width: 340px; width: 100%; margin: 0 auto; }
    .tt-isi h2 { font-size: 22px; }
    .tt-aksi .pm-tombol { flex: 1 1 100%; }
}