/*
 * Landing page publik kegiatan berbayar (mis. Fun Run Syariah AMPHURI 2026).
 * Dibangun di atas Velzon/Bootstrap 5 + tema hijau AMPHURI; berkas ini hanya
 * menambah gaya khusus halaman acara (hero, kartu periode, stepper, footer
 * hijau tua) dan tidak memuat ulang kerangka apa pun.
 *
 * Semua warna diturunkan dari --vz-primary agar ikut berubah bila tema
 * AMPHURI disetel ulang.
 */

.kg-body {
    --kg-green: #1b7a4b;
    --kg-green-dark: #0f4d2e;
    --kg-green-soft: #e9f5f0;
    --kg-ink: #1c2b25;
    --kg-muted: #6b7c74;
    --kg-border: #e4eae7;

    /* Velzon menulis `border: … solid var(--vz-input-border-custom)` untuk
       .form-control/.form-select, tetapi variabelnya hanya didefinisikan di
       app.min.css — berkas 340 KB kerangka dasbor yang sengaja tidak dimuat di
       sini. Tanpa definisi, deklarasi border jadi tidak sah dan seluruh kotak
       isian kehilangan garisnya. Nilainya disediakan di sini, disetel ke palet
       halaman, jauh lebih murah daripada menarik seluruh app.min.css. */
    --vz-input-bg-custom: #fff;
    --vz-input-border-custom: #ccd7d1;

    background-color: #f6f8f7;
    color: var(--kg-ink);
}

/* ── Kontainer ──────────────────────────────────────────────────────────── */

/* Landing acara sengaja lebih lebar dari .container bawaan Bootstrap (maks
   1140–1320px) supaya kolom form dan sidebar tidak sempit di layar besar. */
.kg-container {
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

@media (min-width: 992px) {
    .kg-container {
        padding-inline: 2rem;
    }
}

@media (max-width: 575.98px) {
    .kg-container {
        padding-inline: 1rem;
    }
}

/* ── Navbar ─────────────────────────────────────────────────────────────── */

.kg-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: #fff;
    border-bottom: 1px solid var(--kg-border);
    /* Hormati poni/dynamic island saat halaman dibuka tanpa bilah peramban
       (mode berdiri sendiri di iOS), supaya logo tidak tertutup. */
    padding-top: env(safe-area-inset-top, 0);
}

/* Bilah atas tiga slot. Di layar kecil logo dibuat rata tengah dengan slot kiri
   (menu/kembali) dan kanan (akun) berlebar sama, seperti rancangan mobile. */
.kg-navbar__baris {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.kg-navbar__merek {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.kg-navbar__kiri,
.kg-navbar__kanan {
    flex: 0 0 auto;
}

.kg-navbar__aksi {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    background: none;
    border-radius: 0.5rem;
    color: var(--kg-ink);
    font-size: 1.35rem;
    text-decoration: none;
}

.kg-navbar__aksi:hover {
    background: var(--kg-green-soft);
    color: var(--kg-green);
}

.kg-navbar__akun {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.6rem;
}

@media (max-width: 991.98px) {
    .kg-navbar__merek {
        flex: 1 1 auto;
        justify-content: center;
    }

    /* Kedua slot dipaksa selebar sama supaya logo benar-benar di tengah. */
    .kg-navbar__kiri,
    .kg-navbar__kanan {
        flex: 0 0 2.25rem;
    }

    .kg-navbar__akun {
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
    }

    /* Logo dikecilkan di layar kecil: pada ukuran desktop, tulisan halus di
       dalam berkas logo jadi berdesakan dan tidak terbaca. */
    .kg-navbar__logo {
        height: 30px;
    }
}

@media (min-width: 992px) {
    .kg-navbar__merek {
        margin-right: auto;
    }
}

.kg-navbar__logo {
    height: 38px;
    width: auto;
}

.kg-navbar__event {
    padding-left: 1rem;
    border-left: 1px solid var(--kg-border);
    font-weight: 700;
    line-height: 1.15;
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--kg-green);
    max-width: 15rem;
}

/* Garis penanda menu aktif digambar sebagai lapisan, bukan border: border
   bawah menambah tinggi hanya di sisi bawah, sehingga teks menu terdorong naik
   dan tidak lagi sebaris dengan tombol akun di sebelahnya. */
.kg-navbar__nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--kg-muted);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    padding-block: 0.35rem;
}

.kg-navbar__nav a:hover {
    color: var(--kg-green);
}

.kg-navbar__nav a.is-active {
    color: var(--kg-green);
}

.kg-navbar__nav a.is-active::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    border-radius: 2px;
    background: var(--kg-green);
}

/* Menu gulung layar kecil. */
.kg-offcanvas {
    width: 17rem;
}

.kg-offcanvas__nav {
    display: flex;
    flex-direction: column;
}

.kg-offcanvas__nav a {
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--kg-border);
    color: var(--kg-ink);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
}

.kg-offcanvas__nav a:last-child {
    border-bottom: 0;
}

.kg-offcanvas__nav a:hover {
    color: var(--kg-green);
}

.kg-offcanvas__nav a.is-active {
    color: var(--kg-green);
    font-weight: 700;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.kg-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    background-color: var(--kg-green-dark);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

/* Foto hanya jadi latar di layar lebar. Di layar kecil rancangan menaruhnya
   sebagai blok gambar tersendiri di atas judul (lihat .kg-hero__foto). */
@media (min-width: 992px) {
    .kg-hero {
        background-image: var(--kg-hero-foto);
    }
}

.kg-hero__foto {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
}

/* Lapisan gelap di kiri supaya judul tetap terbaca di atas foto apa pun. */
.kg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(12, 46, 28, 0.92) 0%, rgba(12, 46, 28, 0.72) 45%, rgba(12, 46, 28, 0.15) 100%);
}

/* Banner yang sudah berdesain: gambar tampil utuh, tanpa tinggi minimum,
   gradien gelap, maupun teks di atasnya. Ditulis dengan dua kelas dan setelah
   aturan di atas agar juga menang atas versi gradien di media query layar
   kecil, yang specificity-nya sama. */
.kg-hero.kg-hero--gambar {
    display: block;
    min-height: 0;
    background-color: transparent;
    background-image: none;
}

.kg-hero.kg-hero--gambar::before {
    content: none;
}

.kg-hero__gambar {
    display: block;
    width: 100%;
    height: auto;
}

/* Hanya padding vertikal: shorthand `padding` akan menihilkan padding
   horizontal dari .kg-container, membuat isi hero tidak sejajar dengan
   kartu-kartu di bawahnya. */
.kg-hero__inner {
    position: relative;
    padding-block: 2.75rem;
}

/* Warna dipaksa karena Velzon menetapkan warna heading global yang menimpa
   pewarisan dari .kg-hero. */
.kg-hero__title {
    color: #fff;
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.015em;
    /* Rancangan memakai huruf kapital; datanya tetap disimpan apa adanya agar
       nyaman dibaca di back-office. */
    text-transform: uppercase;
    font-size: clamp(2rem, 5vw, 3.4rem);
    margin-bottom: 0.5rem;
}

/* Baris lanjutan ("AMPHURI 2026") sedikit lebih kecil dari baris utama. */
.kg-hero__title span {
    display: block;
    font-size: 0.86em;
    font-weight: 700;
}

.kg-hero__tagline {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

.kg-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    row-gap: 0.75rem;
}

/* Pemisah antar butir meta seperti pada rancangan. Hanya di layar lebar:
   begitu baris membungkus, garisnya akan menggantung di awal baris baru. */
@media (min-width: 992px) {
    .kg-hero__meta {
        gap: 0;
    }

    .kg-hero__meta-item + .kg-hero__meta-item {
        border-left: 1px solid rgba(255, 255, 255, 0.25);
        margin-left: 1.75rem;
        padding-left: 1.75rem;
    }
}

.kg-hero__meta-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.875rem;
    line-height: 1.25;
}

.kg-hero__meta-item i {
    font-size: 1.15rem;
    opacity: 0.85;
}

.kg-hero__meta-item strong {
    display: block;
    font-weight: 600;
}

/* ── Kartu peringatan (harlah) di sisi kanan hero ───────────────────────── */

.kg-harlah {
    position: relative;
    min-width: 12rem;
    border: 1px solid rgba(212, 175, 96, 0.45);
    border-radius: 0.9rem;
    background: rgba(8, 38, 23, 0.75);
    backdrop-filter: blur(2px);
    padding: 1rem 1.5rem 1.15rem;
    text-align: center;
}

.kg-harlah__label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #d4af60;
    margin-bottom: 0.4rem;
}

.kg-harlah__hari {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.kg-harlah__bulan {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: #d4af60;
    margin-top: 0.25rem;
}

/* ── Kartu umum ─────────────────────────────────────────────────────────── */

.kg-card {
    background: #fff;
    border: 1px solid var(--kg-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.35rem;
}

.kg-card + .kg-card {
    margin-top: 1rem;
}

.kg-card__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kg-ink);
    margin-bottom: 1rem;
}

.kg-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.65rem;
}

.kg-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-size: 0.875rem;
}

.kg-list i {
    color: var(--kg-green);
    font-size: 0.95rem;
    line-height: 1.5;
}

.kg-list__label {
    color: var(--kg-muted);
    flex: 1 1 auto;
}

.kg-list__value {
    font-weight: 600;
    text-align: right;
}

/* Nilai pendek (tanggal, kategori) tidak boleh patah di tengah; nilai panjang
   seperti nama acara tetap boleh membungkus. */
.kg-list__value--nowrap {
    white-space: nowrap;
}

/* Jadwal Penting: label boleh turun ke baris kedua, tetapi tanggalnya tidak —
   "2026" yang jatuh sendirian membuat kolom kanan terlihat berantakan. */
.kg-list--jadwal {
    gap: 0.8rem;
    font-size: 0.82rem;
}

.kg-list--jadwal li {
    font-size: inherit;
}

.kg-list--jadwal .kg-list__label {
    line-height: 1.35;
}

.kg-list--jadwal .kg-list__value {
    white-space: nowrap;
}

/* ── Kartu periode aktif ────────────────────────────────────────────────── */

.kg-periode {
    border: 1px solid rgba(27, 122, 75, 0.35);
    border-radius: 0.75rem;
    background: linear-gradient(180deg, #f3faf6 0%, #ffffff 100%);
    padding: 1.35rem 1.5rem;
}

.kg-periode__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kg-green);
    margin-bottom: 0.75rem;
}

.kg-periode__nama {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--kg-green);
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
}

.kg-periode__harga {
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.01em;
}

.kg-periode__harga small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--kg-muted);
}

.kg-periode__catatan {
    font-size: 0.8rem;
    color: var(--kg-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Di layar kecil ketiga kolomnya menumpuk jadi satu kolom tinggi, jadi kartu
   ini dirapatkan: paddingnya, jarak antar baris, dan ukuran hurufnya. */
@media (max-width: 767.98px) {
    .kg-periode {
        padding: 0.85rem 1rem;
    }

    .kg-periode .row {
        --bs-gutter-y: 0.5rem;
    }

    .kg-periode__eyebrow {
        font-size: 0.65rem;
        margin-bottom: 0.4rem;
    }

    .kg-periode__nama {
        font-size: 1.15rem;
        margin-bottom: 0.15rem;
    }

    .kg-periode__harga {
        font-size: 1.15rem;
    }

    .kg-periode__harga small {
        font-size: 0.78rem;
    }

    .kg-periode__catatan {
        font-size: 0.72rem;
        line-height: 1.35;
        align-items: flex-start;
    }

    .kg-periode__catatan i {
        margin-top: 0.15rem;
    }
}

/* ── Hitung mundur ──────────────────────────────────────────────────────── */

.kg-countdown {
    border: 1px solid var(--kg-border);
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.6rem 0.9rem;
    min-width: 15rem;
}

.kg-countdown__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kg-muted);
    text-align: center;
    margin-bottom: 0.35rem;
}

.kg-countdown__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
}

.kg-countdown__num {
    font-size: 1.25rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.kg-countdown__unit {
    font-size: 0.6rem;
    color: var(--kg-muted);
    text-transform: capitalize;
}

/* ── Stepper ────────────────────────────────────────────────────────────── */

.kg-stepper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 1.75rem 0 1.25rem;
}

.kg-stepper__item {
    position: relative;
    text-align: center;
    font-size: 0.8rem;
    color: var(--kg-muted);
}

/* Garis penghubung ditarik dari lingkaran ke item berikutnya. */
.kg-stepper__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 0.9rem;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--kg-border);
}

.kg-stepper__dot {
    position: relative;
    z-index: 1;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 2px solid var(--kg-border);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--kg-muted);
}

.kg-stepper__item.is-active .kg-stepper__dot {
    background: var(--kg-green);
    border-color: var(--kg-green);
    color: #fff;
}

.kg-stepper__item.is-active {
    color: var(--kg-green);
    font-weight: 600;
}

/* ── Tahap 1: pemilih jumlah peserta ────────────────────────────────────── */

.kg-pax {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--kg-border);
    border-radius: 0.6rem;
    overflow: hidden;
    /* Jangan pernah melebihi kolomnya: pada layar sedang kolom bisa lebih
       sempit dari lebar idealnya dan tombol "+" akan terpotong. */
    width: 100%;
    max-width: 12.5rem;
}

.kg-pax button {
    flex: 0 0 3rem;
    border: 0;
    background: #fff;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--kg-ink);
}

.kg-pax button:hover:not(:disabled) {
    background: var(--kg-green-soft);
    color: var(--kg-green);
}

.kg-pax button:disabled {
    opacity: 0.35;
}

.kg-pax input {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    border-left: 1px solid var(--kg-border);
    border-right: 1px solid var(--kg-border);
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    padding: 0.6rem 0;
    -moz-appearance: textfield;
}

.kg-pax input::-webkit-outer-spin-button,
.kg-pax input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Pembatas vertikal antar blok Tahap 1 (pax | promo | rincian harga).
   Hanya muncul saat kolomnya benar-benar bersebelahan; begitu layout menumpuk
   garisnya hilang supaya tidak menggantung di atas konten.

   Jaraknya sengaja TIDAK diatur di sini: garis digambar di tepi kolom, jadi
   celah kiri-kanannya adalah setengah gutter baris (kelas gx-* Bootstrap).
   Menimpa padding-left di sini membuat sisi kanan garis lebih lega daripada
   sisi kirinya. */
@media (min-width: 576px) {
    .kg-pemisah--sm {
        border-left: 1px solid var(--kg-border);
    }
}

@media (min-width: 992px) {
    .kg-pemisah--lg {
        border-left: 1px solid var(--kg-border);
    }
}

/* Catatan disejajarkan dengan lebar pemilih pax, bukan dengan lebar kolom. */
.kg-pax__catatan {
    width: 100%;
    max-width: 12.5rem;
    margin-top: 0.5rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--kg-muted);
}

/* ── Kartu kategori tiket (Tahap 1) ─────────────────────────────────────── */

/* Kartu ini informatif, bukan pilihan: kategori ditentukan sistem, dan yang
   sedang berlaku ditandai lewat .kg-kategori--terpilih. */
.kg-kategori {
    display: block;
    height: 100%;
    position: relative;
    cursor: default;
    border: 1px solid var(--kg-border);
    border-radius: 0.5rem;
    padding: 0.55rem 0.7rem;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Sengaja tanpa cincin tebal: kartu ini keterangan, bukan tombol. Latar lembut
   dan garis hijau tipis sudah cukup menandai kategori yang berlaku. */
.kg-kategori--terpilih {
    border-color: var(--kg-green);
    background: var(--kg-green-soft);
}

.kg-kategori--habis {
    opacity: 0.55;
}

.kg-kategori__tanda {
    position: absolute;
    top: 0.45rem;
    right: 0.5rem;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--kg-green);
}

.kg-kategori__isi {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* Sisakan ruang untuk ikon penanda di pojok kanan atas. */
.kg-kategori__kepala {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    padding-right: 1.1rem;
}

.kg-kategori__nama {
    font-weight: 700;
    font-size: 0.82rem;
}

.kg-kategori__badge {
    background: var(--kg-green);
    color: #fff;
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.kg-kategori__harga {
    font-size: 0.95rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--kg-green);
}

.kg-kategori__harga small {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--kg-muted);
}

.kg-kategori__deskripsi,
.kg-kategori__kaki {
    font-size: 0.7rem;
    line-height: 1.3;
    color: var(--kg-muted);
}

.kg-kategori-grid {
    margin-bottom: 3rem;
}

/* Di layar kecil ketiga kartu menumpuk, jadi tiap kartu dipadatkan jadi dua
   baris: nama + harga sebaris, lalu tanggal/kuota. Deskripsi disembunyikan —
   isinya (mis. "Minimal 6 pax") sudah terwakili batas pax pada pemilih jumlah. */
@media (max-width: 767.98px) {
    .kg-kategori-grid {
        margin-bottom: 1.25rem;
    }

    .kg-kategori {
        padding: 0.45rem 0.6rem;
    }

    .kg-kategori__isi {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: 0.5rem;
    }

    .kg-kategori__kepala {
        padding-right: 0;
    }

    .kg-kategori__harga {
        margin-left: auto;
        padding-right: 1.15rem;
        font-size: 0.9rem;
    }

    .kg-kategori__deskripsi {
        display: none;
    }

    .kg-kategori__kaki {
        flex: 1 1 100%;
        font-size: 0.68rem;
    }

    .kg-kategori__tanda {
        top: 0.5rem;
    }
}

.kg-voucher-terpasang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px dashed var(--kg-green);
    background: var(--kg-green-soft);
    border-radius: 0.6rem;
    padding: 0.7rem 0.9rem;
}

.kg-promo {
    border: 1px solid rgba(27, 122, 75, 0.25);
    background: var(--kg-green-soft);
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
    display: flex;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.kg-promo i {
    color: var(--kg-green);
    font-size: 1.35rem;
}

.kg-promo__title {
    font-weight: 700;
    color: var(--kg-green);
    letter-spacing: 0.02em;
}

.kg-ringkasan {
    display: grid;
    gap: 0.6rem;
    font-size: 0.875rem;
}

.kg-ringkasan__row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

/* Nominal tidak boleh patah jadi dua baris; labelnya yang mengalah. */
.kg-ringkasan__row > span:last-child {
    white-space: nowrap;
}

.kg-ringkasan__row--total {
    border-top: 1px solid var(--kg-border);
    padding-top: 0.65rem;
    font-weight: 700;
    font-size: 0.95rem;
}

.kg-ringkasan__row--promo {
    color: var(--kg-green);
    font-weight: 600;
}

/* ── Tahap 2: Data Peserta ──────────────────────────────────────────────── */

/* Pita periode aktif di atas form. */
.kg-periode-pita {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.75rem;
    border: 1px solid rgba(27, 122, 75, 0.3);
    border-radius: 0.6rem;
    background: var(--kg-green-soft);
    padding: 0.75rem 1.1rem;
    font-size: 0.875rem;
    color: var(--kg-green-dark);
}

.kg-periode-pita i {
    color: var(--kg-green);
    font-size: 1.05rem;
}

.kg-periode-pita__catatan {
    color: var(--kg-muted);
    font-size: 0.8rem;
    margin-left: auto;
}

/* Akordion satu panel per peserta. */
.kg-peserta__item {
    border: 1px solid var(--kg-border);
    border-radius: 0.75rem !important;
    background: #fff;
    overflow: hidden;
}

.kg-peserta__item + .kg-peserta__item {
    margin-top: 0.75rem;
}

.kg-peserta .accordion-button {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.25rem;
    font-size: 0.9rem;
    background: #fff;
    box-shadow: none;
}

.kg-peserta .accordion-button:not(.collapsed) {
    color: var(--kg-ink);
    background: #fff;
    border-bottom: 1px solid var(--kg-border);
}

.kg-peserta .accordion-button::after {
    margin-left: auto;
}

.kg-peserta .accordion-body {
    padding: 1.25rem;
}

.kg-peserta .form-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.kg-peserta .form-control,
.kg-peserta .form-select {
    font-size: 0.875rem;
}

.kg-tag {
    display: inline-block;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.kg-tag--utama {
    background: var(--kg-green-soft);
    color: var(--kg-green);
}

/* Panel ringkasan mengikuti gulir supaya tombol lanjut selalu terjangkau. */
@media (min-width: 992px) {
    .kg-ringkasan-panel {
        position: sticky;
        top: 5.5rem;
    }
}

/* Panel ringkasan membungkus kartunya sendiri, sehingga `.kg-card + .kg-card`
   tidak menjangkaunya. Tanpa aturan ini kotak voucher menempel ke Ringkasan
   Pembayaran di bawahnya. */
.kg-card + .kg-ringkasan-panel {
    margin-top: 1rem;
}

.kg-ringkasan__row--bayar {
    border-top: 1px solid var(--kg-border);
    padding-top: 0.75rem;
    margin-top: 0.15rem;
    font-weight: 800;
    font-size: 1rem;
}

.kg-ringkasan__row--bayar > span:last-child {
    color: var(--kg-green);
}

/* ── Tahap 3: Review & Pembayaran ───────────────────────────────────────── */

.kg-tabel-peserta {
    font-size: 0.85rem;
}

.kg-tabel-peserta > thead th {
    font-weight: 600;
    color: var(--kg-muted);
    font-size: 0.78rem;
    border-bottom-color: var(--kg-border);
    padding-bottom: 0.6rem;
}

.kg-tabel-peserta > tbody td {
    border-bottom-color: var(--kg-border);
    padding-block: 0.6rem;
}

.kg-tabel-peserta > tbody tr:last-child td {
    border-bottom: 0;
}

/* Penanda "(Pemesan)" / "(Gratis)" di samping nama. */
.kg-tandai {
    color: var(--kg-green);
    font-weight: 600;
}

/* Daftar kanal pembayaran di Tahap 3: kelompok sebagai judul, kanal konkret
   sebagai pilihan — peserta memilih langsung tanpa layar perantara. */
.kg-kanal__grup + .kg-kanal__grup {
    margin-top: 0.85rem;
}

.kg-kanal__judul {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--kg-ink);
    margin-bottom: 0.4rem;
}

.kg-kanal__judul i {
    color: var(--kg-green);
}

.kg-kanal__ket {
    font-weight: 400;
    color: var(--kg-muted);
    font-size: 0.75rem;
}

.kg-metode--ringkas {
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.5rem;
}

.kg-metode--ringkas .kg-metode__tanda {
    margin-top: 0;
    width: 0.9rem;
    height: 0.9rem;
}

/* Nama kanal dapat prioritas ruang; logo yang mengalah kalau kolom sempit —
   kebalikannya membuat label terpotong jadi "B." di layar kecil. */
.kg-metode--ringkas .kg-metode__nama {
    flex: 1 1 auto;
    min-width: 3.25rem;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kg-metode--ringkas .kg-logo-kanal {
    flex: 0 1 auto;
    height: 1.2rem;
    max-width: 3.6rem;
}

/* Varian satu baris (mis. jadwal Race Pack): penanda, tanggal, dan keterangan
   waktu/lokasi berdiri sejajar. Keterangan turun sendiri hanya kalau kolomnya
   benar-benar tak cukup. Kartu kanal memotong labelnya dengan ellipsis karena
   isinya nama pendek; tanggal harus utuh, jadi pemotongan itu dibatalkan. */
.kg-metode--baris .kg-metode__isi {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.4rem;
}

.kg-metode--baris .kg-metode__nama {
    white-space: normal;
    overflow: visible;
    font-size: 0.85rem;
}

.kg-metode--baris .kg-metode__ket {
    margin-top: 0;
    font-size: 0.72rem;
}

/* Pilihan terkunci (Race Pack sudah diambil): tetap terbaca, tetapi jelas tidak
   bisa diubah. Yang sedang terpilih dibiarkan pekat supaya tetap menonjol. */
.btn-check:disabled + .kg-metode {
    cursor: default;
    opacity: 0.55;
}

.btn-check:disabled:checked + .kg-metode {
    opacity: 1;
}

/* Logo kanal: tinggi disamakan, lebar mengikuti rasio masing-masing berkas.
   Cukup tinggi agar logo bersusun (CIMB Niaga, Permata — mark di atas teks)
   tetap terbaca, tanpa membuat logo memanjang seperti BCA jadi dominan. */
.kg-logo-kanal {
    flex: 0 0 auto;
    height: 1.4rem;
    width: auto;
    max-width: 5.5rem;
    object-fit: contain;
}

.kg-logo-kanal--besar {
    height: 1.75rem;
    max-width: 6rem;
}

/* Kartu pilihan metode pembayaran — tampilan radio berbentuk kartu. */
.kg-metode {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    width: 100%;
    height: 100%;
    border: 1px solid var(--kg-border);
    border-radius: 0.6rem;
    background: #fff;
    padding: 0.85rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.kg-metode:hover {
    border-color: rgba(27, 122, 75, 0.45);
}

.kg-metode__tanda {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    border: 2px solid var(--kg-border);
    border-radius: 50%;
    position: relative;
}

.kg-metode__nama {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
}

.kg-metode__nama i {
    color: var(--kg-muted);
    margin-right: 0.15rem;
}

.kg-metode__ket {
    display: block;
    font-size: 0.75rem;
    color: var(--kg-muted);
    margin-top: 0.2rem;
}

.btn-check:checked + .kg-metode {
    border-color: var(--kg-green);
    background: var(--kg-green-soft);
}

.btn-check:checked + .kg-metode .kg-metode__tanda {
    border-color: var(--kg-green);
    background: var(--kg-green);
    box-shadow: inset 0 0 0 2px #fff;
}

.btn-check:checked + .kg-metode .kg-metode__nama,
.btn-check:checked + .kg-metode .kg-metode__nama i {
    color: var(--kg-green);
}

.btn-check:focus-visible + .kg-metode {
    outline: 2px solid var(--kg-green);
    outline-offset: 2px;
}

/* ── Instruksi pembayaran ───────────────────────────────────────────────── */

.kg-va {
    border: 1px dashed rgba(27, 122, 75, 0.4);
    border-radius: 0.6rem;
    background: var(--kg-green-soft);
    padding: 1rem 1.15rem;
    text-align: center;
}

.kg-va__nomor {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: var(--kg-green-dark);
    margin-block: 0.25rem;
    word-break: break-all;
}

.kg-qris {
    display: inline-block;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--kg-border);
    border-radius: 0.6rem;
}

.kg-qris img,
.kg-qris canvas {
    display: block;
}

/* ── Tahap 4: E-Ticket ──────────────────────────────────────────────────── */

.kg-sukses {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--kg-green);
    color: #fff;
    font-size: 1.75rem;
}

.kg-qr-tiket {
    width: 100%;
    max-width: 12.5rem;
    height: auto;
}

/* Tombol aksi e-ticket: satu tumpukan selebar penuh. Sebelumnya "Kirim ke Email"
   terbungkus <form> sehingga hanya selebar isinya, tidak sejajar dengan yang lain. */
.kg-tiket-aksi {
    display: grid;
    gap: 0.5rem;
}

.kg-tiket-aksi > .btn,
.kg-tiket-aksi > form {
    width: 100%;
    margin: 0;
}

.kg-tiket-aksi .btn {
    padding-block: 0.6rem;
    border-radius: 0.75rem;
}

@media (min-width: 992px) {
    .kg-tiket-aksi {
        grid-template-columns: 1fr 1fr;
    }

    /* Dua tombol pertama berdampingan, sisanya selebar penuh. */
    .kg-tiket-aksi > :nth-child(n + 3) {
        grid-column: 1 / -1;
    }
}

/* Tombol netral: btn-outline-secondary bawaan Velzon tampil biru dan bertabrakan
   dengan tema hijau AMPHURI. */
.kg-btn-netral {
    border: 1px solid var(--kg-border);
    color: var(--kg-muted);
    background: #fff;
}

.kg-btn-netral:hover {
    border-color: var(--kg-green);
    color: var(--kg-green);
    background: var(--kg-green-soft);
}

.kg-id-transaksi {
    font-size: 0.72rem;
    word-break: break-all;
    color: var(--kg-ink);
    line-height: 1.5;
}

/* Kotak catatan hijau (Run Kit / Catatan Penting). */
.kg-catatan {
    display: flex;
    gap: 0.75rem;
    border: 1px solid rgba(27, 122, 75, 0.3);
    background: var(--kg-green-soft);
    border-radius: 0.6rem;
    padding: 1rem 1.15rem;
    color: var(--kg-green-dark);
}

.kg-catatan > i {
    color: var(--kg-green);
    font-size: 1.1rem;
}

/* Halaman detail tiket sengaja lebih sempit dari kontainer landing: tiket yang
   dibentangkan selebar layar membuat baris label–nilai renggang dan panel QR
   terlempar jauh ke kanan. */
.kg-tiket-halaman {
    max-width: 60rem;
}

/* Kartu tiket pada halaman detail: lebarnya mengikuti kartu daftar peserta. */
.kg-tiket {
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--kg-border);
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 43, 37, 0.05);
}

.kg-tiket__kepala {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--kg-green-dark);
    color: #fff;
    padding: 1.1rem 1.5rem;
}

.kg-tiket__judul {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.kg-tiket__kategori {
    font-size: 0.8rem;
    opacity: 0.85;
    text-transform: uppercase;
    margin-top: 0.15rem;
}

.kg-tiket__logo {
    height: 34px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.kg-tiket__badan {
    display: flex;
    flex-wrap: wrap;
}

.kg-tiket__rincian {
    flex: 1 1 22rem;
    padding: 1.25rem 1.5rem;
    min-width: 0;
}

.kg-tiket__baris {
    display: flex;
    gap: 1rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
}

.kg-tiket__label {
    flex: 0 0 7.5rem;
    color: var(--kg-muted);
}

.kg-tiket__nilai {
    font-weight: 600;
    min-width: 0;
    word-break: break-word;
}

/* Sobekan tiket: garis putus-putus memisahkan bagian QR. */
.kg-tiket__qr {
    flex: 0 0 17rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-left: 1px dashed var(--kg-border);
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.kg-tiket__qr img {
    width: 100%;
    max-width: 11rem;
    height: auto;
}

.kg-tiket__qr-ket {
    font-size: 0.78rem;
    color: var(--kg-muted);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}

.kg-tiket__nomor {
    font-weight: 800;
    letter-spacing: 0.04em;
    word-break: break-all;
}

@media (max-width: 767.98px) {
    .kg-tiket__qr {
        flex: 1 1 100%;
        border-left: 0;
        border-top: 1px dashed var(--kg-border);
    }

    .kg-tiket__label {
        flex-basis: 7.5rem;
    }
}

/* ── Syarat & Ketentuan ─────────────────────────────────────────────────── */

/* Tombol teks polos. Velzon memberi .btn-link latar & cincin fokus abu-abu
   yang tampak seperti kotak nyasar di sebelah judul, jadi tombol ini dibangun
   dari nol alih-alih menimpa .btn. */
.kg-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kg-green);
    cursor: pointer;
}

.kg-toggle:hover {
    color: var(--kg-green-dark);
    text-decoration: underline;
}

.kg-toggle:focus {
    outline: none;
}

.kg-toggle:focus-visible {
    outline: 2px solid var(--kg-green);
    outline-offset: 3px;
    border-radius: 0.25rem;
}

.kg-toggle__ikon {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

/* Panah membalik saat panel terbuka. */
.kg-toggle:not(.collapsed) .kg-toggle__ikon {
    transform: rotate(180deg);
}

.kg-syarat .accordion-button {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 0.85rem 1rem;
}

.kg-syarat .accordion-button:not(.collapsed) {
    background: var(--kg-green-soft);
    color: var(--kg-green);
    box-shadow: none;
}

.kg-syarat .accordion-body {
    font-size: 0.85rem;
    color: var(--kg-muted);
    line-height: 1.65;
}

/* ── Bantuan / WhatsApp ─────────────────────────────────────────────────── */

.kg-wa {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    border: 1px solid rgba(27, 122, 75, 0.35);
    border-radius: 0.6rem;
    padding: 0.65rem 1.1rem;
    color: var(--kg-green);
    font-weight: 700;
    text-decoration: none;
}

.kg-wa:hover {
    background: var(--kg-green-soft);
    color: var(--kg-green-dark);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.kg-footer {
    margin-top: 2.5rem;
    background: var(--kg-green-dark);
    color: rgba(255, 255, 255, 0.85);
    padding: 1.75rem 0;
    font-size: 0.85rem;
}

.kg-footer__logo {
    height: 40px;
    width: auto;
    max-width: 100%;
    /* Logo hanya tersedia versi berwarna — dijadikan putih agar kontras. */
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

@media (max-width: 991.98px) {
    /* Di layar kecil logo setinggi desktop jadi terlalu dominan dan tulisan
       halus di dalamnya rapat tak terbaca; dikecilkan dan dirata-tengahkan
       bersama sisi footer lainnya. */
    .kg-footer {
        text-align: center;
        padding: 1.5rem 0;
    }

    .kg-footer__logo {
        height: 30px;
        margin-bottom: 0.25rem;
    }

    .kg-footer__nav {
        gap: 1.25rem !important;
        font-size: 0.85rem;
    }

    .kg-footer__ikuti {
        width: 100%;
        text-align: center;
    }
}

.kg-footer__nav a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
}

.kg-footer__nav a:hover {
    color: #fff;
    text-decoration: underline;
}

.kg-footer__ikuti {
    font-size: 0.8rem;
    opacity: 0.8;
}

.kg-footer__sosial {
    display: grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    text-decoration: none;
}

.kg-footer__sosial:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

@media (max-width: 991.98px) {
    /* Rancangan mobile: foto sebagai blok di atas, judul & meta di bawahnya pada
       latar putih — bukan teks putih menumpuk di atas foto seperti desktop. */
    .kg-hero {
        display: block;
        min-height: 0;
        background-color: #fff;
        color: var(--kg-ink);
    }

    .kg-hero::before {
        content: none;
    }

    .kg-hero__inner {
        padding-block: 1.25rem;
    }

    .kg-hero__title {
        color: var(--kg-green-dark);
        font-size: clamp(1.6rem, 7vw, 2.1rem);
    }

    .kg-hero__tagline {
        color: var(--kg-muted);
        margin-bottom: 1rem;
    }

    .kg-hero__meta-item i {
        color: var(--kg-green);
        opacity: 1;
    }

    /* Satu butir meta per baris, seperti rancangan mobile. */
    .kg-hero__meta {
        flex-direction: column;
        gap: 0.6rem;
    }

    /* Hitung mundur tidak ada di rancangan mobile — kartu periode cukup
       menampilkan tanggal berlakunya. */
    .kg-countdown {
        display: none;
    }

    .kg-pax,
    .kg-pax__catatan {
        max-width: none;
    }

    .kg-harlah {
        min-width: 0;
        width: 100%;
    }
}