/* ==========================================================================
   Microsite Wavin Distributor Retail Meeting 2026
   Arah visualnya mengikuti rancangan Canva: bidang biru tua, ubin kaca,
   dan air di bagian bawah layar. Ditulis lepas dari Bootstrap supaya
   layar peserta tetap ringan di jaringan hotel.
   ========================================================================== */

@font-face {
    font-family: 'Gotham';
    src: url('../font/Gotham-Bold.ttf') format('truetype');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../font/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
}

:root {
    --dalam: #061a4a;
    --laut: #0e2e86;
    --laut-atas: #17439f;
    --arus: #35c3f3;
    /* Oranye Orbia, dipinjam dari gelombang di materi acara. Satu-satunya
       warna hangat di palet, jadi dipakai hemat — hanya untuk History
       Pemesanan. */
    --oranye: #f08a24;
    --oranye-terang: #ff9d3d;
    --busa: #edf5ff;
    --kabur: rgba(237, 245, 255, .68);

    --kaca: rgba(255, 255, 255, .10);
    --kaca-tepi: rgba(255, 255, 255, .24);

    --kolom: 26.875rem;   /* 430px: lebar layar HP terbesar yang lazim */
    --sudut: 1.125rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Menahan pantulan gulir. Saat halaman ditarik melewati ujungnya di
       iOS, yang tersingkap adalah latar di balik halaman -- bukan foto
       yang dipasang di .latar -- sehingga terbaca sebagai pita biru yang
       muncul sekejap di atas atau di bawah. */
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
    /* Tidak ada layar di microsite ini yang dirancang menggulir
       menyamping. Dipasang sebagai jaring pengaman, bukan penambal
       masalah yang sudah ada. */
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--busa);
    background: var(--laut);
    /* Gradien tetap ada di bawah foto: kalau berkas background gagal
       dimuat, layarnya tetap biru Wavin, bukan putih kosong. */
    background-image: linear-gradient(170deg, var(--laut-atas) 0%, var(--laut) 15%, var(--dalam) 100%);
    background-attachment: fixed;
}

/* --- Latar --------------------------------------------------------------- */

/* Foto latar diburamkan, bukan sekadar diredam.
   Panitia bebas mengunggah foto apa pun lewat menu Tampilan, dan foto
   acara biasanya sudah memuat logo serta tulisannya sendiri. Tanpa
   diburamkan, tulisan bawaan foto itu terbaca sebagai teks dan bersaing
   dengan isian di atasnya. Dengan diburamkan, foto apa pun jatuh menjadi
   tekstur — jadi perbaikan ini berlaku untuk unggahan mana pun, bukan
   hanya untuk foto yang kebetulan dipakai sekarang.
   scale() menutup tepi transparan yang ditinggalkan blur. */
.latar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* Tingginya diikatkan ke viewport TERBESAR, bukan ke viewport saat
       ini. Di HP, bilah alamat browser menyusut begitu halaman digulir
       dan area terlihatnya bertambah tinggi; lapisan yang tingginya
       terlanjur dihitung saat bilah itu masih ada akan kependekan
       sesudahnya, dan gradien biru di belakangnya muncul sebagai pita
       di tepi bawah atau atas.
       100svh ditulis lebih dulu sebagai cadangan untuk browser yang
       belum mengenal satuan lvh. */
    height: 100svh;
    height: 100lvh;
    z-index: -3;
    background-image: var(--bg-mobile);
    background-size: cover;
    background-position: center;
    opacity: .99;
    filter: blur(.5px);
}

.latar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(6, 26, 74, .45) 0%,
            rgba(14, 46, 134, .30) 30%,
            rgba(6, 26, 74, .80) 80%);
}

.air {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 34vh;
    min-height: 11rem;
    pointer-events: none;
}

/* --- Kolom --------------------------------------------------------------- */

.kolom {
    width: 100%;
    max-width: var(--kolom);
    margin-inline: auto;
    padding: clamp(1.75rem, 6vw, 3rem) 1.625rem 3.5rem;
    display: flex;
    flex-direction: column;
    min-height: 100svh;
}

.kolom--tengah {
    justify-content: center;
}

/* --- Lockup acara -------------------------------------------------------- */

/* Berkas gambar, bukan teks yang disusun ulang dengan CSS: lockup resmi
   punya bentuk huruf, jarak, dan garis pemisahnya sendiri yang tidak bisa
   ditiru persis dengan font pengganti.
   Ukurannya ditahan agar tidak menghabiskan layar — di halaman menu ia
   berbagi ruang dengan enam ubin, dan yang perlu dilihat peserta di sana
   adalah menunya, bukan judulnya. */
.lockup {
    display: block;
    width: min(64%, 15rem);
    height: auto;
    margin: 0 auto 1.25rem;
}

/* Halaman login tidak punya isi lain yang bersaing, jadi lockup boleh
   tampil sebesar yang pantas. */
.lockup--besar {
    width: min(88%, 23rem);
    margin-bottom: 1.75rem;
}

/* --- Isian --------------------------------------------------------------- */

/* Formulir isian (login, ubah password).
   Dibatasi lebih sempit dari kolomnya supaya kotak isian tidak menempel
   ke tepi layar HP. Batasnya di formulir, bukan di .kolom, karena layar
   lain -- menu, daftar peringkat -- justru butuh lebar penuh kolomnya. */
.formulir {
    width: 100%;
    max-width: 20.5rem;
    margin-inline: auto;
}

.isian {
    display: block;
    margin-bottom: .875rem;
}

.isian__kotak {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border-radius: 999px;
    padding: .1875rem .4375rem .1875rem 1rem;
    transition: box-shadow .15s ease;
}

.isian__kotak:focus-within {
    box-shadow: 0 0 0 3px rgba(53, 195, 243, .55);
}

.isian__ikon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: #7b8aa6;
}

.isian__masukan {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: .75rem 0;
    font: inherit;
    font-size: 1rem;   /* di bawah 16px, Safari iOS ikut memperbesar layar */
    color: #12203d;
}

.isian__masukan::placeholder {
    color: #97a3b8;
}

/* --- Tombol -------------------------------------------------------------- */

.tombol {
    display: block;
    /* Lebar yang sama dengan .tautan supaya seluruh kontrol terbaca
       sebagai satu keluarga. */
    width: min(100%, 14rem);
    /* Kotak blok yang lebih sempit dari wadahnya menempel kiri: sisa
       ruangnya semua jatuh ke margin kanan. Dua margin auto membuat sisa
       itu terbagi rata, jadi tombolnya terpusat berapa pun lebarnya. */
    margin-inline: auto;
    /* Jarak ke centang persetujuan di atasnya dan ke tautan Kembali di
       bawahnya. Tanpa keduanya ketiga elemen itu berdempetan: margin
       auto milik .tautan--kecil menjadi nol begitu halamannya menggulir,
       jadi jaraknya tidak bisa diserahkan kepadanya. */
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    border: 2px solid var(--busa);
    border-radius: 999px;
    padding: .9375rem 1.5rem;
    font: inherit;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .8125rem;
    color: var(--busa);
    background: var(--laut);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease;
}

.tombol:hover {
    box-shadow: 0 .5rem 1.5rem rgba(6, 26, 74, .45);
}

.tombol:active {
    transform: translateY(1px);
}

/* Sengaja tanpa input dan select.
   Kotak teks memang ikut menyala saat diklik, bukan hanya saat dijangkau
   lewat Tab, jadi outline ini muncul setiap kali peserta menyentuh kolom
   isian. Bentuknya persegi bersudut siku sementara kolomnya berbentuk
   pil, sehingga terbaca sebagai kotak asing yang menempel di atasnya --
   dan penandanya jadi dobel, karena pembungkusnya sudah memberi cincin
   sendiri lewat .isian__kotak:focus-within dan .nominal:focus-within.
   Setiap kolom yang terlihat di layar peserta maupun petugas ada di
   dalam salah satu pembungkus itu, jadi tidak ada kolom yang kehilangan
   penanda fokusnya. */
.tombol:focus-visible,
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--arus);
    outline-offset: 3px;
}

.tombol--arus {
    background: var(--arus);
    color: var(--dalam);
}

/* --- Sapaan -------------------------------------------------------------- */

.sapaan {
    text-align: center;
    margin-bottom: 1.125rem;
}

.sapaan__toko {
    margin: 0;
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.2;
}

.sapaan__nama {
    margin: .25rem 0 0;
    font-size: .8125rem;
    color: var(--kabur);
}

/* --- Ubin menu ----------------------------------------------------------- */

.menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Jaraknya dinamai supaya lebar ubin pertama di bawah bisa
       menghitungnya, bukan mengulang angkanya di dua tempat yang harus
       dijaga tetap sama. */
    --sela: 1rem;
    gap: var(--sela);
    /* Dibatasi lebih sempit dari kolomnya. Ubin selebar setengah layar
       HP membuat tujuh menu memenuhi layar sampai berdesakan; dibatasi
       di sini, bukan lewat ukuran ubin, supaya ubinnya tetap bujur
       sangkar mengikuti gambarnya sendiri. */
    max-width: 18.5rem;
    margin-inline: auto;
    width: 100%;
}

/* QR Code berdiri sendiri di baris pertama, di tengah.
   Ia menu yang paling sering dibuka peserta sepanjang acara, jadi
   ditaruh paling atas tanpa tetangga. Enam menu sisanya lalu terbagi
   rata tiga baris dua kolom -- kalau QR ikut mengisi kolom, salah satu
   menu akan tertinggal sendirian di baris terakhir.

   Lebarnya dihitung supaya persis sama dengan satu kolom, bukan
   diperkirakan: ubinnya bujur sangkar, jadi lebar yang meleset sedikit
   pun langsung terlihat sebagai tinggi yang berbeda dari tetangganya. */
.menu .ubin:first-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - var(--sela)) / 2);
}

.ubin {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    /* Lebih pendek dari bujur sangkar: dengan ubin persegi, enam menu
       plus lockup acara menuntut ~1000 px sedangkan layar HP menyediakan
       ~880 px, sehingga dua menu terakhir selalu di bawah lipatan. */
    aspect-ratio: 1 / .78;
    padding: .875rem .75rem;
    border-radius: var(--sudut);
    background: var(--kaca);
    border: 1px solid var(--kaca-tepi);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: inherit;
    text-decoration: none;
    text-align: center;
    transition: background .15s ease, transform .12s ease;
}

.ubin:hover {
    background: rgba(255, 255, 255, .17);
}

.ubin:active {
    transform: translateY(1px);
}

/* Ubin yang ikonnya sudah diunggah panitia. Berkas PNG-nya bukan ikon
   telanjang melainkan tombol jadi: kartu biru bersudut membulat, gambar,
   dan nama menunya sudah menyatu di dalam satu gambar. Kartu kaca dan
   label di sini akan menggambar keduanya untuk kedua kalinya, jadi ubin
   ini dilucuti sampai tinggal gambarnya saja.

   Semua hiasan dimatikan satu per satu, bukan lewat `all: unset`, supaya
   sifat tautan yang masih dipakai -- fokus keyboard, kursor, transisi --
   tidak ikut terhapus. */
.ubin--gambar {
    gap: 0;
    padding: 0;
    /* Gambarnya bujur sangkar 512x512; ubinnya mengikuti, bukan
       sebaliknya. */
    aspect-ratio: 1;
    background: none;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Tanpa kartu, latar tidak bisa lagi dipakai memberi tanggapan sentuh.
   Gambarnya sendiri yang membesar sedikit. */
.ubin--gambar:hover {
    background: none;
    transform: scale(1.04);
}

.ubin--gambar .ubin__ikon {
    width: 100%;
    height: auto;
}


.ubin__ikon {
    width: 3rem;
    height: 3rem;
    object-fit: contain;
}

.ubin__label {
    font-size: .75rem;
    line-height: 1.25;
}

/* Ubin yang tautannya belum diisi panitia: tetap terlihat supaya
   peserta tahu menunya ada, tapi jelas belum bisa dibuka. */
.ubin--mati {
    opacity: .45;
    cursor: not-allowed;
}

/* --- Petunjuk ------------------------------------------------------------ */

.petunjuk {
    margin: 0 0 1.25rem;
    font-size: .8125rem;
    line-height: 1.5;
    text-align: center;
    color: var(--kabur);
}

/* --- Layar isi (QR, kamar, meja, jadwal) --------------------------------- */

.layar__judul {
    margin: 0 0 1.25rem;
    text-align: center;
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.375rem;
    letter-spacing: .01em;
}

.kotak {
    display: grid;
    place-items: center;
    min-height: 14rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--sudut);
    background: var(--kaca);
    border: 1px solid var(--kaca-tepi);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.kotak__angka {
    margin: 0;
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    /* Dibaca sekilas sambil berjalan menyeret koper, bukan dibaca
       cermat: sebesar yang muat di layar. */
    font-size: clamp(4.5rem, 34vw, 8rem);
    line-height: 1;
    letter-spacing: -.03em;
    /* Beberapa nomor kamar dipisah koma boleh berpindah baris; satu
       nomor panjang tetap tidak dipenggal di tengah angkanya. */
    overflow-wrap: break-word;
}

/* Keterangan di bawah nomor kamar. Jauh lebih kecil daripada angkanya:
   yang dicari peserta di layar ini tetap nomornya, dan keterangan
   sebesar angka akan bersaing dengannya dari jauh. */
.kotak__catatan {
    margin: 1rem auto 0;
    max-width: 20rem;
    /* Kecil dan diredupkan, jelas di bawah angkanya. Seukuran teks biasa
       ia bersaing dengan nomor kamar dari kejauhan, padahal yang dicari
       peserta sambil berjalan tetap nomornya -- keterangan ini dibaca
       sesudah nomornya ketemu. */
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--kabur);
}

.kotak__angka--sedang {
    font-size: clamp(2.5rem, 17vw, 4rem);
    letter-spacing: -.02em;
}

.kotak__angka--panjang {
    font-size: clamp(1.75rem, 11vw, 2.75rem);
    line-height: 1.15;
    letter-spacing: 0;
}

.kotak__kosong {
    margin: 0;
    text-align: center;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--kabur);
}

.kartu-qr {
    background: #fff;
    border-radius: var(--sudut);
    padding: .75rem;
    margin-bottom: 1.25rem;
}

.kartu-qr__gambar {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Slider jadwal ------------------------------------------------------- */

.slider {
    position: relative;
    margin-bottom: 1.5rem;
}

/* Panah transparan menumpang di atas gambar: jadwal acara biasanya rapat
   isinya, dan panah berlatar penuh akan menutupi barisnya. Lingkaran
   samar hanya untuk memastikan panah tetap terlihat di atas gambar yang
   kebetulan terang. */
.slider__panah {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    background: rgba(6, 26, 74, .3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    cursor: pointer;
    transition: background .15s ease;
}

.slider__panah:hover {
    background: rgba(6, 26, 74, .6);
}

.slider__panah svg {
    width: 1.25rem;
    height: 1.25rem;
}

.slider__panah--kiri {
    left: .5rem;
}

.slider__panah--kanan {
    right: .5rem;
}

.slider__rel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    border-radius: var(--sudut);
}

.slider__rel::-webkit-scrollbar {
    display: none;
}

.slider__bingkai {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

.slider__gambar {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--sudut);
}

.slider__titik {
    display: flex;
    justify-content: center;
    gap: .5rem;
    margin-top: .875rem;
}

.slider__satu {
    width: .5rem;
    height: .5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
    cursor: pointer;
}

.slider__satu[aria-selected="true"] {
    background: var(--arus);
}

/* --- Paket produk -------------------------------------------------------- */

.paket {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.paket__kartu {
    border-radius: var(--sudut);
    background: var(--kaca);
    border: 1px solid var(--kaca-tepi);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

.paket__banner {
    display: block;
    width: 100%;
    height: 8rem;
    object-fit: cover;
}

.paket__isi {
    padding: 1rem 1.125rem 1.125rem;
}

.paket__nama {
    margin: 0;
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.2;
    text-align: center;
}

.paket__deskripsi {
    margin: .375rem 0 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--kabur);
}

/* Kolom nominal dan tombolnya duduk dalam satu pil putih, sehingga
   terbaca sebagai satu tindakan: isi angkanya lalu kirim. */
.nominal {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .875rem;
    background: #fff;
    border-radius: 999px;
    padding: .25rem .3125rem .25rem 1rem;
}

/* Kartu yang nominalnya sudah terkirim. Dibuat jelas berbeda dari kolom
   yang masih bisa diketik: tanpa perbedaan yang terlihat, satu-satunya
   petunjuk bahwa kiriman sudah masuk hanyalah tulisan di tombolnya. */
.nominal--terkunci {
    background: rgba(255, 255, 255, .55);
}

.nominal--terkunci .nominal__masukan {
    cursor: default;
}

.nominal:focus-within {
    box-shadow: 0 0 0 3px rgba(53, 195, 243, .55);
}

.nominal__rp {
    flex: none;
    font-size: .875rem;
    font-weight: 600;
    color: #7b8aa6;
}

.nominal__masukan {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: .6875rem 0;
    font: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: #12203d;
}

.nominal__masukan::placeholder {
    font-weight: 400;
    color: #97a3b8;
}

.nominal__kirim {
    flex: none;
    border: 0;
    border-radius: 999px;
    padding: .625rem 1.125rem;
    font: inherit;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: var(--laut);
    color: #fff;
    cursor: pointer;
}

.nominal__kirim:hover {
    background: var(--laut-atas);
}

/* --- Tautan aksi --------------------------------------------------------- */

/* Kembali, Tambah Pesanan, dan Kembali ke menu: tombol pil rata tengah,
   teks putih tanpa garis bawah. Isinya kaca, bukan putih pekat — teks
   putih butuh alas yang gelap agar tetap terbaca. */
/* Lebar kontrol: mengikuti panjang labelnya, dengan lantai dan langit-
   langit. Sebelumnya tiga kontrol punya tiga aturan berbeda -- tautan
   selebar penuh, tombol setengah kolom, tautan kecil seukuran isinya --
   sehingga "Kembali ke menu" membentang selebar layar sementara "Submit"
   hanya separuhnya. Dengan fit-content plus min-width, label pendek dan
   panjang tetap terbaca sebagai satu keluarga tanpa ada yang melebar
   memenuhi kolom. */
.tautan {
    display: block;
    /* Satu lebar tetap untuk seluruh kontrol, bukan mengikuti panjang
       labelnya. Lebar yang mengikuti label membuat "Kembali ke menu"
       keluar lebih besar daripada tombol utama di atasnya hanya karena
       tulisannya lebih panjang -- dua tombol bertumpuk yang ukurannya
       berbeda sedikit terbaca sebagai kesalahan, bukan sebagai hierarki. */
    width: min(100%, 14rem);
    margin-top: 1.5rem;
    margin-inline: auto;
    padding: .875rem 2rem;
    border: 2px solid var(--busa);
    border-radius: 999px;
    /* Tanpa backdrop-filter. Tombol ini duduk di atas gradien rata,
       jadi efek kacanya tidak menambah apa pun yang terlihat — tapi
       lapisan komposit yang ditimbulkannya bertabrakan dengan panah
       slider yang juga memakai backdrop-filter, dan tombolnya tergambar
       separuh kotak separuh pil. */
    background: var(--kaca);
    font: inherit;
    font-size: .9375rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease, transform .12s ease;
}

.tautan:hover {
    background: rgba(255, 255, 255, .2);
}

.tautan:active {
    transform: translateY(1px);
}

/* History Pemesanan: pil oranye, satu-satunya warna hangat di layar ini.
   Tulisannya biru tua, bukan putih — putih di atas oranye hanya
   menghasilkan rasio kontras sekitar 2,8:1 dan sulit dibaca di layar HP
   yang terkena matahari lobi hotel; biru tua memberi sekitar 7:1. */
/* Kembali di layar petugas: kecil dan menempel di dasar layar.
   .kolom sudah flex-column setinggi layar, jadi margin-top: auto
   mendorongnya ke bawah tanpa posisi absolut yang harus dihitung ulang
   setiap kali isi di atasnya berubah tinggi. align-self melepasnya dari
   peregangan bawaan flex supaya lebarnya mengikuti teksnya saja. */
.tautan--kecil {
    /* Hanya dipakai di layar pindai petugas, yang memang meminta tombol
       Kembali sekecil mungkin di dasar layar. Layar peserta memakai
       lebar yang sama untuk semua kontrolnya. */
    width: auto;
    align-self: center;
    margin-top: auto;
    padding: .5rem 1.5rem;
    font-size: .8125rem;
}

/* Tombol yang berdiri sebagai daftar di dalam .tumpuk: jaraknya diatur
   gap milik .tumpuk, bukan margin masing-masing tombol -- kalau tidak,
   keduanya bertumpuk dan daftarnya jadi renggang tak beraturan. */
/* Di dalam daftar pilihan, tombolnya kembali selebar penuh: tombol
   seukuran labelnya membuat tepi kanan daftar bergerigi, dan yang dibaca
   di sana adalah daftarnya, bukan tiap tombol sendiri-sendiri. */
.tumpuk .tautan {
    width: 100%;
    margin-top: 0;
    margin-bottom: 10px;
}

.tautan--oranye {
    /* border-color: transparent; */
    background: var(--oranye);
    color: var(--busa);
    font-weight: 600;
}

.tautan--oranye:hover {
    background: var(--oranye-terang);
}

/* --- Ikon keluar di pojok ------------------------------------------------ */

.keluar-pojok {
    position: absolute;
    top: clamp(1rem, 4vw, 1.5rem);
    right: clamp(1rem, 4vw, 1.5rem);
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--kaca);
    border: 1px solid var(--kaca-tepi);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--busa);
}

.keluar-pojok:hover {
    background: rgba(255, 255, 255, .2);
}

.keluar-pojok svg {
    width: 1.125rem;
    height: 1.125rem;
}

/* --- Pesan galat --------------------------------------------------------- */

.galat {
    margin: 0 0 .875rem;
    padding: .6875rem 1rem;
    border-radius: var(--sudut);
    background: rgba(255, 92, 92, .16);
    border: 1px solid rgba(255, 138, 138, .5);
    font-size: .8125rem;
    line-height: 1.45;
}

/* Teks yang hanya dibacakan pembaca layar.
   Bukan display:none dan bukan visibility:hidden -- keduanya membuat
   teksnya ikut hilang dari pembaca layar juga. Cara ini menyisakan
   kotak 1px yang terpotong habis: tetap ada di pohon aksesibilitas,
   tapi tidak menempati ruang yang terlihat. */
.hanya-pembaca-layar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Tabel tingkatan cashback --------------------------------------------- */

.tingkat {
    margin-bottom: 1.5rem;
}

.tingkat__judul {
    margin: 0 0 .625rem;
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    letter-spacing: .02em;
}

/* Angka pembelian sampai miliaran tidak bisa diperkecil lagi tanpa jadi
   tak terbaca. Tabelnya sendiri yang boleh digulir menyamping, bukan
   halamannya -- halaman yang ikut bergeser jauh lebih mengganggu. */
/* Kaca oranye, bukan kaca putih seperti kartu lain: tabel ini satu-
   satunya acuan angka di layar peserta, dan warna hangatnya memisahkan
   dia dari kartu-kartu biru di sekitarnya. */
.tingkat__gulir {
    overflow-x: auto;
    border-radius: var(--sudut);
    border: 1px solid rgba(255, 157, 61, .45);
    background: rgba(240, 138, 36, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.tingkat__tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.tingkat__tabel th,
.tingkat__tabel td {
    padding: .5rem .75rem;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 157, 61, .28);
}

.tingkat__tabel thead th {
    font-weight: 600;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--busa);
    background: rgba(240, 138, 36, .3);
}

.tingkat__tabel tbody tr:last-child th,
.tingkat__tabel tbody tr:last-child td {
    border-bottom: 0;
}

.tingkat__tabel tbody th {
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    color: var(--oranye-terang);
}

/* Ditulis lewat tabelnya supaya lebih khusus daripada aturan rata-kiri
   pada th/td di atas -- tanpa itu angkanya tetap rata kiri dan besaran
   antarbaris jadi sulit dibandingkan sekilas. */
.tingkat__tabel .tingkat__angka {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* --- Persetujuan Syarat & Ketentuan --------------------------------------- */

/* Kalimat persetujuannya panjang dan akan membungkus beberapa baris,
   jadi kotaknya disejajarkan ke baris pertama, bukan ke tengah blok. */
.setuju {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    margin: 1.25rem 0 0;
    cursor: pointer;
}

.setuju__kotak {
    flex: none;
    margin-top: .125rem;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--oranye);
    cursor: pointer;
}

/* Kotak centang tidak punya pembungkus bercincin seperti kolom teks, dan
   bentuknya memang persegi -- jadi outline di sinilah penanda fokusnya,
   bukan cincin mengikuti lengkung seperti pada kolom isian. */
.setuju__kotak:focus-visible {
    outline: 3px solid var(--arus);
    outline-offset: 3px;
}

/* Kalimat penutup syaratnya, sekaligus label centangnya. */
.setuju__teks {
    font-size: .8125rem;
    line-height: 1.5;
}

/* Syarat & Ketentuan tampil apa adanya di halaman, di bawah kolom isian
   dan sebelum tombol kirim. */
.sk {
    margin: 1.5rem 0 0;
    padding: 1rem 1.125rem;
    border-radius: var(--sudut);
    /* Kaca yang sama dengan kartu kolom input di atasnya: kartu itu
       memburamkan apa pun di belakangnya, kartu ini dulu tidak, sehingga
       foto kota menembus lima butir teks kecil dan syaratnya jadi paling
       sulit dibaca justru di layar tempat ia harus dibaca. Tintnya
       sedikit lebih pekat daripada kartu biasa karena isinya teks kecil,
       bukan satu kolom isian besar. */
    background: rgba(255, 255, 255, .16);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--kaca-tepi);
    font-size: .8125rem;
    line-height: 1.55;
    /* Rata kiri dipasang di sini, bukan hanya pada varian popup-nya:
       SweetAlert memusatkan isi kartunya, dan daftar bernomor yang rata
       tengah membuat nomornya melayang jauh dari kalimatnya. */
    text-align: left;
}

.sk__judul {
    margin: 0 0 .625rem;
    font-size: .9375rem;
    font-weight: 700;
}

.sk__daftar {
    margin: 0;
    padding-left: 1.125rem;
}

.sk__daftar li + li {
    margin-top: .375rem;
}

/* --- Leaderboard peserta ------------------------------------------------- */

/* Seluruh aturan di bawah dipagari .peringkat--peserta.
   Papan Top Spender memakai nama kelas yang sama lewat peringkat.css,
   dan halaman papan itu memuat wavin.css juga -- tanpa pagar ini, gaya
   layar genggam akan ikut menimpa papan di layar besar. */
.peringkat--peserta {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.peringkat--peserta .peringkat__baris {
    display: grid;
    /* Nomor selebar dua digit, nilai secukupnya, sisanya untuk nama toko
       yang panjangnya paling tidak terduga. */
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    border-radius: var(--sudut);
    background: var(--kaca);
    border: 1px solid var(--kaca-tepi);
}

/* Pemisah antara sepuluh teratas dan baris peserta sendiri. Tiga titik,
   bukan garis: garis membaca seperti akhir daftar, sedangkan yang terjadi
   di sini adalah ada bagian yang dilewati. */
.peringkat__jeda {
    list-style: none;
    margin: -.25rem 0;
    text-align: center;
    letter-spacing: .5em;
    color: var(--kabur);
}

.peringkat--peserta .peringkat__nomor {
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    color: var(--kabur);
}

.peringkat--peserta .peringkat__baris--puncak .peringkat__nomor {
    color: var(--arus);
}

.peringkat--peserta .peringkat__toko {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.peringkat--peserta .peringkat__nama {
    font-weight: 600;
    font-size: .875rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.peringkat--peserta .peringkat__orang {
    font-size: .75rem;
    color: var(--kabur);
    overflow-wrap: anywhere;
}

.peringkat--peserta .peringkat__nilai {
    font-family: 'Gotham', 'Poppins', system-ui, sans-serif;
    font-weight: 700;
    font-size: .8125rem;
    white-space: nowrap;
}

/* Baris peserta sendiri.

   Oranye dipilih karena seluruh layar ini bernuansa biru -- latar foto,
   kartu kaca, nomor peringkat -- sehingga sorotan biru apa pun ikut
   melebur ke dalamnya.

   Tetap tembus pandang seperti kartu di sekitarnya: yang berbeda hanya
   warnanya, bukan bahannya. Kepekatannya dinaikkan jauh di atas kartu
   biasa (.10) karena oranye tipis di atas foto biru tidak terbaca
   oranye sama sekali -- birunya menembus dan warnanya membaur jadi
   cokelat keabuan. Angka .45 ini satu-satunya yang perlu digeser kalau
   sorotannya terasa kurang atau terlalu kuat. */
.peringkat--peserta .peringkat__baris--saya {
    background: rgba(240, 138, 36, .45);
    border-color: var(--oranye);
}

/* --- Layar lebar --------------------------------------------------------- */

@media (min-width: 48rem) {
    .latar {
        background-image: var(--bg-desktop);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}