/* Landing page ThertaPOS: tema ungu serasi aplikasi Android (gradien #5A67D8 -> #764BA2). */
:root {
    --ungu-awal: #5a67d8;
    --ungu-akhir: #764ba2;
    --ungu-gelap: #4c51bf;
    --gradien-utama: linear-gradient(135deg, var(--ungu-awal) 0%, var(--ungu-akhir) 100%);
    --teks: #2d3748;
    --teks-redup: #4a5568;
    --latar-lembut: #f5f6fb;
    --bs-primary: #5a67d8;
    --bs-primary-rgb: 90, 103, 216;
    --bs-link-color: #4c51bf;
    --bs-link-hover-color: #764ba2;
}

* { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }
body { color: var(--teks); background: #fff; overflow-x: clip; line-height: 1.6; }
img, svg { max-width: 100%; }

/* Gutter 16px di semua lebar layar. */
.container { --bs-gutter-x: 2rem; }

.lewati-ke-konten { position: absolute; left: 1rem; top: -4rem; background: #fff; color: var(--ungu-gelap); padding: .5rem 1rem; border-radius: 0 0 8px 8px; z-index: 2000; font-weight: 600; }
.lewati-ke-konten:focus { top: 0; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #f6ad55; outline-offset: 2px; }

/* Bilah atas. */
.bilah-publik { position: sticky; top: 0; z-index: 1030; background: var(--gradien-utama); box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }
.bilah-publik .navbar { --bs-navbar-color: #fff; --bs-navbar-hover-color: #fff; --bs-navbar-toggler-border-color: rgba(255, 255, 255, .6); }
.bilah-publik .nav-link { color: #fff; font-weight: 500; padding: .6rem .75rem; }
.bilah-publik .nav-link:hover { text-decoration: underline; }
.bilah-publik .navbar-toggler-icon { filter: invert(1); }
.merek-publik { color: #fff; font-weight: 700; font-size: 1.15rem; }
.merek-publik:hover { color: #fff; }
.btn-unduh { background: #fff; color: var(--ungu-gelap); font-weight: 700; border: 0; border-radius: 999px; padding: .4rem 1rem; }
.btn-unduh:hover { background: #edf2f7; color: var(--ungu-akhir); }

/* Hero. */
.hero { background: var(--gradien-utama); color: #fff; padding: 4rem 0 4.5rem; }
.hero h1 { font-weight: 800; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.2; }
.hero .lead { font-size: clamp(1.05rem, 2.5vw, 1.25rem); opacity: .95; }
.btn-hero { background: #fff; color: var(--ungu-gelap); font-weight: 700; border-radius: 999px; padding: .8rem 1.6rem; border: 0; }
.btn-hero:hover { background: #edf2f7; color: var(--ungu-akhir); }
.btn-hero-garis { border: 2px solid #fff; color: #fff; font-weight: 600; border-radius: 999px; padding: .75rem 1.5rem; }
.btn-hero-garis:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.hero-kartu { background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); border-radius: 20px; padding: 1.5rem; }
.hero-kartu li { margin-bottom: .6rem; }
.hero-kartu i { color: #fbd38d; }

/* Seksi umum. */
.seksi { padding: 4rem 0; }
.seksi-lembut { background: var(--latar-lembut); }
.seksi h2 { font-weight: 800; font-size: clamp(1.5rem, 3.5vw, 2rem); }
.seksi .sub { color: var(--teks-redup); max-width: 42rem; margin-left: auto; margin-right: auto; }
.kartu-fitur { border: 0; border-radius: 16px; box-shadow: 0 4px 18px rgba(0, 0, 0, .07); height: 100%; }
.ikon-fitur { width: 48px; height: 48px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--gradien-utama); color: #fff; font-size: 1.4rem; margin-bottom: .75rem; }
.nomor-langkah { width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--gradien-utama); color: #fff; font-weight: 700; margin-bottom: .5rem; }

/* Paket. */
.kartu-paket { border: 2px solid #e2e8f0; border-radius: 18px; height: 100%; background: #fff; }
.kartu-paket.unggulan { border-color: var(--ungu-awal); box-shadow: 0 8px 26px rgba(90, 103, 216, .2); }
.harga { font-size: 1.9rem; font-weight: 800; color: var(--ungu-gelap); }
.lencana-contoh { background: #fefcbf; color: #744210; font-weight: 700; border-radius: 6px; padding: 2px 8px; font-size: .75rem; }
.daftar-centang { list-style: none; padding-left: 0; }
.daftar-centang li { padding-left: 1.7rem; position: relative; margin-bottom: .45rem; }
.daftar-centang li::before { content: "\F26A"; font-family: "bootstrap-icons"; position: absolute; left: 0; color: var(--ungu-awal); }

/* FAQ. */
.faq details { border: 1px solid #e2e8f0; border-radius: 12px; padding: .85rem 1rem; margin-bottom: .75rem; background: #fff; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details[open] { border-color: var(--ungu-awal); }

/* Unduh dan kontak. */
.blok-unduh { background: var(--gradien-utama); color: #fff; border-radius: 24px; padding: 2.5rem 1.5rem; }
.btn-gradien { background: var(--gradien-utama); color: #fff; font-weight: 600; border: 0; border-radius: 10px; padding: .65rem 1.4rem; }
.btn-gradien:hover { color: #fff; filter: brightness(1.07); }
.kartu-kontak { border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.lebar-teks { max-width: 46rem; }

/* Halaman teks (privasi, syarat). */
.halaman-teks h1 { font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.halaman-teks h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; }
.halaman-teks p, .halaman-teks li { max-width: 46rem; }
.banner-draf { background: #fffaf0; border: 2px solid #ed8936; color: #7b341e; border-radius: 12px; padding: 1rem 1.25rem; }

/* Kaki. */
.kaki-publik { background: #2d2a4a; color: #e2e8f0; padding: 2.5rem 0 1.5rem; }
.kaki-publik a { color: #fff; text-decoration: underline; }
.kaki-publik hr { border-color: rgba(255, 255, 255, .2); }

@media (max-width: 575.98px) {
    .hero { padding: 2.5rem 0 3rem; }
    .seksi { padding: 2.75rem 0; }
    .blok-unduh { padding: 2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}