/* ================================================================== TEMA — Studio Editorial Watak yang dituju: chrome gelap royal purple sebagai bingkai tetap, isi terang seperti halaman majalah. Sudut tajam, garis rambut sebagai pemisah, dan tipografi tebal-rapat menggantikan bayangan lembut. Warna merek diatur dari halaman Pengaturan admin dan ditempel sebagai --warna-utama di elemen oleh js/umum.js. Seluruh chrome, aksen, dan keadaan aktif diturunkan dari satu warna itu. TATA LETAK — inilah yang paling berbeda dari versi sebelumnya: halaman TIDAK lagi dikunci selebar ponsel. Ada tiga bentuk nyata, bukan satu kolom yang diperbesar: < 1024px rusuk jadi laci yang bisa ditarik, bar aksi menempel bawah >= 1024px rusuk tetap terlihat di kiri, isi memakai sisa lebar >= 1440px isi diberi batas baca dan tepi napas yang lebih lega ================================================================== */ :root { --warna-utama: #532f77; --warna-latar: #f6f4f8; --merek: var(--warna-utama); --merek-gelap: color-mix(in oklab, var(--merek) 76%, #0d0713); --merek-lebih-gelap: color-mix(in oklab, var(--merek) 52%, #0d0713); --merek-terang: color-mix(in oklab, var(--merek) 82%, white); --merek-samar: color-mix(in oklab, var(--merek) 7%, white); --merek-muda: color-mix(in oklab, var(--merek) 14%, white); --kertas: #ffffff; --latar: var(--warna-latar); --tinta: #171220; --tinta-2: #5d5570; --tinta-3: #918aa1; /* Garis rambut menggantikan bayangan sebagai pemisah utama. */ --garis: #e6e2ec; --garis-kuat: #cec7db; --hijau: #12824a; --hijau-latar: #e8f6ee; --hijau-wa: #1fa855; --kuning: #a86a08; --kuning-latar: #fdf3e2; --merah: #c62b3d; --merah-latar: #fdeef0; --biru: #2050c8; --biru-latar: #edf2fd; /* Sudut kecil dan tegas. Yang bulat penuh hanya lencana dan kuncup. */ --r: 10px; --r-kecil: 7px; --r-besar: 14px; --r-bulat: 999px; --bayang-apung: 0 18px 44px -18px rgba(23, 18, 32, 0.45); --bayang-laci: 24px 0 60px -24px rgba(23, 18, 32, 0.5); /* Satu keluarga huruf saja, dibedakan lewat ketebalan dan kerapatan. Serif dibuang — itu penanda paling kuat dari tampilan sebelumnya. */ --sans: system-ui, -apple-system, 'Segoe UI Variable', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'Cascadia Mono', Consolas, 'SF Mono', Menlo, monospace; --gerak: cubic-bezier(0.2, 0.7, 0.3, 1); --rusuk-lebar: 258px; --bar-tinggi: 74px; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--latar); color: var(--tinta); font-family: var(--sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; min-height: 100vh; } /* ------------------------------------------------------------------ */ /* Kerangka aplikasi */ /* ------------------------------------------------------------------ */ .app { min-height: 100vh; } .lewati { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--tinta); color: #fff; padding: 10px 16px; border-radius: var(--r); } .lewati:focus { left: 8px; } /* ---- Rusuk (sidebar) ---- */ .rusuk { position: fixed; inset: 0 auto 0 0; width: var(--rusuk-lebar); z-index: 80; background: linear-gradient(180deg, var(--merek-gelap), var(--merek-lebih-gelap)); color: #fff; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.26s var(--gerak); overflow-y: auto; overscroll-behavior: contain; } .rusuk.buka { transform: none; box-shadow: var(--bayang-laci); } .rusuk-merek { padding: 20px 20px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; } .rusuk-merek img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; } .rusuk-merek .lambang { width: 40px; height: 40px; border-radius: 9px; flex: 0 0 auto; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; font-weight: 800; font-size: 17px; letter-spacing: -0.03em; } .rusuk-merek .nama { font-weight: 800; font-size: 15.5px; line-height: 1.2; letter-spacing: -0.02em; } .rusuk-merek .sub { font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-top: 3px; font-weight: 600; } .rusuk-bagian { padding: 18px 14px; } .rusuk-tajuk { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); font-weight: 700; padding: 0 8px 10px; } /* Langkah pemesanan di rusuk. Nomornya jadi penanda posisi, dan garis penghubungnya memperlihatkan seberapa jauh perjalanannya. */ .rusuk-langkah { list-style: none; margin: 0; padding: 0; } .rusuk-langkah li { position: relative; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r); font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.55); } .rusuk-langkah li + li { margin-top: 2px; } .rusuk-langkah .tanda { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); flex: 0 0 auto; } .rusuk-langkah li.lewat { color: rgba(255, 255, 255, 0.75); } .rusuk-langkah li.lewat .tanda { background: rgba(255, 255, 255, 0.22); color: #fff; } .rusuk-langkah li.kini { background: rgba(255, 255, 255, 0.14); color: #fff; } .rusuk-langkah li.kini .tanda { background: #fff; color: var(--merek-gelap); } .rusuk-kaki { margin-top: auto; padding: 16px 14px 20px; } .rusuk-nota { font-size: 12px; line-height: 1.55; color: rgba(255, 255, 255, 0.55); padding: 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--r); margin-bottom: 12px; } .tirai-rusuk { position: fixed; inset: 0; z-index: 79; background: rgba(15, 10, 22, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.24s var(--gerak); } .tirai-rusuk.tampak { opacity: 1; pointer-events: auto; } /* ---- Panggung (kolom isi) ---- */ .panggung { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; } .atas { position: sticky; top: 0; z-index: 60; background: color-mix(in oklab, var(--latar) 84%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--garis); } @supports not (backdrop-filter: blur(1px)) { .atas { background: var(--latar); } } .atas-isi { display: flex; align-items: center; gap: 12px; padding: 12px 18px; min-height: 62px; max-width: 1180px; margin: 0 auto; width: 100%; } .atas-judul { min-width: 0; flex: 1; } .atas-judul .tajuk { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .atas-judul .sub { font-size: 12.5px; color: var(--tinta-2); margin-top: 1px; } .tbl-menu { width: 40px; height: 40px; flex: 0 0 auto; border: 1px solid var(--garis-kuat); background: var(--kertas); border-radius: var(--r); font-size: 17px; cursor: pointer; color: var(--tinta); display: grid; place-items: center; } .tbl-menu:hover { border-color: var(--merek); color: var(--merek); } .isi { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 24px 18px 40px; } /* Pembungkus lama tetap ada supaya halaman yang belum diubah tidak rusak, tapi lebarnya tidak lagi dikunci selebar ponsel. */ .bungkus { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 18px; } .bungkus-lebar { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 18px; } /* Kolom baca untuk isi yang berupa formulir panjang — di layar lebar, baris yang terlalu panjang justru melelahkan dibaca. */ .kolom-baca { max-width: 720px; } .kolom-sempit { max-width: 560px; } /* ---- Tiga bentuk nyata ---- */ @media (min-width: 1024px) { /* Rusuk TETAP position: fixed seperti di layar sempit — yang berubah cuma tidak digeser keluar layar lagi. Sempat dicoba dengan grid + position: sticky, dan itu keliru: sticky hanya bisa menempel selama masih ada ruang tersisa di dalam selnya. Begitu tinggi rusuk sama dengan tinggi selnya, ruang itu habis, rusuknya ikut tergulir ke atas, dan bagian bawah kolom kiri berubah jadi putih. Dengan fixed, tingginya selalu setinggi layar (inset atas dan bawah 0), jadi warnanya tidak pernah putus berapa pun panjang halamannya. */ .rusuk { transform: none; } .panggung { margin-left: var(--rusuk-lebar); } .tirai-rusuk { display: none; } .tbl-menu { display: none; } .atas-isi { padding: 14px 28px; min-height: 68px; } .isi { padding: 30px 28px 56px; } } @media (min-width: 1440px) { :root { --rusuk-lebar: 288px; } .atas-isi, .isi { max-width: 1280px; } .isi { padding: 38px 40px 72px; } } /* ------------------------------------------------------------------ */ /* Tipografi */ /* ------------------------------------------------------------------ */ h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; } h1 { font-size: clamp(27px, 4.4vw, 40px); line-height: 1.08; } h2 { font-size: clamp(19px, 2.4vw, 24px); line-height: 1.18; } h3 { font-size: 16px; letter-spacing: -0.02em; } p { margin: 0; } a { color: var(--merek); text-underline-offset: 3px; } .kecil { font-size: 13px; } .mini { font-size: 12px; } .lembut { color: var(--tinta-2); } .samar { color: var(--tinta-3); } .tebal { font-weight: 700; } .tengah { text-align: center; } .kanan { text-align: right; } .nowrap { white-space: nowrap; } .sembunyi { display: none !important; } .eyebrow { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; color: var(--tinta-3); } /* Kepala bagian bergaya editorial: label kecil, judul besar, garis rambut. */ .kepala-bagian { border-bottom: 2px solid var(--tinta); padding-bottom: 12px; margin-bottom: 22px; } .kepala-bagian .eyebrow { display: block; margin-bottom: 8px; } .kepala-bagian p { color: var(--tinta-2); margin-top: 8px; font-size: 14.5px; max-width: 62ch; } /* Aksen warna merek dipakai sebagai blok padat, bukan gradasi. */ .sorot-merek { color: var(--merek); } .blok-merek { background: var(--merek); color: #fff; padding: 0 8px; display: inline-block; } /* Sisa dari tema lama — dijaga agar halaman yang memakainya tidak patah. */ .judul-gradasi { color: var(--merek); } .pil-hero { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 7px; border: 1px solid var(--garis-kuat); border-radius: var(--r-bulat); background: var(--kertas); font-size: 12.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: 14px; } .pil-hero .noktah { width: 19px; height: 19px; border-radius: 50%; background: var(--merek); color: #fff; display: grid; place-items: center; font-size: 10px; flex: 0 0 auto; } .hiasan-titik { position: relative; } /* ------------------------------------------------------------------ */ /* Kartu */ /* ------------------------------------------------------------------ */ .kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-besar); padding: 20px; margin-bottom: 16px; } .kartu-rapat { padding: 15px; } .kartu-kepala { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 6px; } .kartu-judul { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; } .nomor { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; background: var(--merek); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; } .nomor-mati { background: var(--garis); color: var(--tinta-3); } /* Susunan dua kolom untuk layar lebar. */ .grid-isi { display: grid; gap: 16px; } @media (min-width: 900px) { .grid-isi-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .grid-isi-utama { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } } .lengket { position: sticky; top: 90px; } /* ------------------------------------------------------------------ */ /* Tombol */ /* ------------------------------------------------------------------ */ .tbl { appearance: none; border: 1px solid transparent; border-radius: var(--r); padding: 12px 20px; font: inherit; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; line-height: 1.2; transition: background 0.14s var(--gerak), border-color 0.14s var(--gerak), color 0.14s var(--gerak), transform 0.1s var(--gerak); } .tbl:disabled { opacity: 0.4; cursor: not-allowed; } .tbl:not(:disabled):active { transform: translateY(1px); } .tbl-utama { background: var(--merek); color: #fff; } .tbl-utama:not(:disabled):hover { background: var(--merek-gelap); } .tbl-polos { background: var(--kertas); color: var(--tinta); border-color: var(--garis-kuat); } .tbl-polos:not(:disabled):hover { border-color: var(--tinta); } .tbl-garis { background: transparent; color: var(--merek); border-color: var(--merek); } .tbl-garis:not(:disabled):hover { background: var(--merek-samar); } .tbl-wa { background: var(--hijau-wa); color: #fff; } .tbl-wa:not(:disabled):hover { background: color-mix(in oklab, var(--hijau-wa) 84%, black); } .tbl-bahaya { background: transparent; color: var(--merah); border-color: color-mix(in oklab, var(--merah) 34%, white); } .tbl-bahaya:not(:disabled):hover { background: var(--merah-latar); border-color: var(--merah); } .tbl-kecil { padding: 8px 13px; font-size: 13px; border-radius: var(--r-kecil); } .tbl-penuh { width: 100%; } .tbl-besar { padding: 15px 26px; font-size: 16px; } .tombol-bantuan { display: inline-flex; align-items: center; gap: 7px; background: var(--hijau-wa); color: #fff; border: 0; border-radius: var(--r); padding: 10px 15px; font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer; white-space: nowrap; } .tombol-bantuan:hover { background: color-mix(in oklab, var(--hijau-wa) 84%, black); } /* Di rusuk gelap, tombol biasa harus ikut menyesuaikan. */ .rusuk .tbl-polos { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.16); color: #fff; } .rusuk .tbl-polos:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.3); } .rusuk .tombol-bantuan { width: 100%; } /* ------------------------------------------------------------------ */ /* Isian formulir */ /* ------------------------------------------------------------------ */ .bidang { margin-bottom: 16px; } .bidang label, .label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--tinta); letter-spacing: -0.01em; } .label-opsional { font-weight: 500; color: var(--tinta-3); } input[type="text"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], input[type="email"], input[type="search"], input[type="file"], textarea, select { width: 100%; padding: 11px 13px; border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); font: inherit; font-size: 15px; background: var(--kertas); color: var(--tinta); transition: border-color 0.13s var(--gerak), box-shadow 0.13s var(--gerak); } input[type="file"] { padding: 9px 11px; font-size: 13px; } textarea { resize: vertical; min-height: 84px; } input:hover, textarea:hover, select:hover { border-color: var(--tinta-3); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--merek); box-shadow: 0 0 0 3px var(--merek-muda); } input::placeholder, textarea::placeholder { color: var(--tinta-3); } .bantuan { font-size: 12px; color: var(--tinta-2); margin-top: 6px; line-height: 1.5; } .galat-bidang { font-size: 12px; color: var(--merah); margin-top: 6px; } input.salah, textarea.salah { border-color: var(--merah); } /* ------------------------------------------------------------------ */ /* Pemberitahuan */ /* ------------------------------------------------------------------ */ /* Garis tebal di kiri, bukan latar penuh membulat — penanda editorial. */ .info { display: flex; gap: 11px; padding: 12px 14px; border-radius: var(--r-kecil); border-left: 3px solid currentColor; font-size: 13.5px; line-height: 1.55; margin-bottom: 14px; } .info > div { color: var(--tinta); } .info-biru { background: var(--biru-latar); color: var(--biru); } .info-kuning { background: var(--kuning-latar); color: var(--kuning); } .info-merah { background: var(--merah-latar); color: var(--merah); } .info-hijau { background: var(--hijau-latar); color: var(--hijau); } .info-abu { background: var(--latar); color: var(--tinta-3); border-left-color: var(--garis-kuat); } .info b { font-weight: 700; } .lencana { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-kecil); font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; } .lencana-hijau { background: var(--hijau-latar); color: var(--hijau); border-color: color-mix(in oklab, var(--hijau) 22%, transparent); } .lencana-kuning { background: var(--kuning-latar); color: var(--kuning); border-color: color-mix(in oklab, var(--kuning) 24%, transparent); } .lencana-merah { background: var(--merah-latar); color: var(--merah); border-color: color-mix(in oklab, var(--merah) 22%, transparent); } .lencana-ungu { background: var(--merek-samar); color: var(--merek); border-color: color-mix(in oklab, var(--merek) 22%, transparent); } .lencana-biru { background: var(--biru-latar); color: var(--biru); border-color: color-mix(in oklab, var(--biru) 20%, transparent); } .lencana-abu { background: var(--latar); color: var(--tinta-2); border-color: var(--garis); } /* ------------------------------------------------------------------ */ /* Langkah mendatar (dipakai di dalam isi) */ /* ------------------------------------------------------------------ */ .langkah { display: flex; align-items: center; gap: 8px; margin: 0 0 24px; } .langkah-titik { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--garis); color: var(--tinta-3); flex: 0 0 auto; } .langkah-titik.aktif, .langkah-titik.selesai { background: var(--merek); color: #fff; } .langkah-garis { height: 2px; flex: 1; background: var(--garis); } .langkah-garis.terisi { background: var(--merek); } /* Di layar lebar, langkah mendatar ini berlebihan — rusuk sudah menunjukkan posisinya. */ @media (min-width: 1024px) { .langkah { display: none; } } /* ------------------------------------------------------------------ */ /* Kalender tanggal */ /* ------------------------------------------------------------------ */ .deret-tanggal { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px; scroll-snap-type: x proximity; } .deret-tanggal::-webkit-scrollbar { height: 4px; } .deret-tanggal::-webkit-scrollbar-thumb { background: var(--garis-kuat); } /* Di layar lebar tidak perlu digulir menyamping — tampilkan membungkus. */ @media (min-width: 1024px) { .deret-tanggal { flex-wrap: wrap; overflow: visible; } } .sel-tanggal { flex: 0 0 auto; scroll-snap-align: start; width: 62px; padding: 9px 4px 7px; border: 1px solid var(--garis-kuat); border-radius: var(--r); background: var(--kertas); text-align: center; cursor: pointer; font: inherit; transition: border-color 0.13s var(--gerak), background 0.13s var(--gerak); } .sel-tanggal:not(:disabled):hover { border-color: var(--tinta); } .sel-tanggal .hari { font-size: 9.5px; font-weight: 800; letter-spacing: 0.12em; color: var(--tinta-3); text-transform: uppercase; } .sel-tanggal .angka { font-size: 21px; font-weight: 800; line-height: 1.2; letter-spacing: -0.04em; } .sel-tanggal .tanda { font-size: 10px; line-height: 1; height: 12px; } .sel-tanggal.tersedia .tanda { color: var(--hijau); } .sel-tanggal.terbatas { border-color: color-mix(in oklab, var(--kuning) 38%, white); } .sel-tanggal.terbatas .hari, .sel-tanggal.terbatas .tanda { color: var(--kuning); } .sel-tanggal.penuh, .sel-tanggal.tutup { background: var(--latar); border-style: dashed; cursor: not-allowed; } .sel-tanggal.penuh .angka, .sel-tanggal.tutup .angka { color: var(--tinta-3); } .sel-tanggal.penuh .tanda, .sel-tanggal.tutup .tanda { color: var(--merah); } .sel-tanggal.lewat { opacity: 0.35; cursor: not-allowed; } /* Tanggal terpilih jadi blok padat warna merek. */ .sel-tanggal.dipilih { background: var(--merek); border-color: var(--merek); color: #fff; } .sel-tanggal.dipilih .hari, .sel-tanggal.dipilih .angka, .sel-tanggal.dipilih .tanda { color: #fff; } .sel-tanggal.dipilih .hari { opacity: 0.72; } .ket-tanggal { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--tinta-2); align-items: center; } .ket-tanggal span { display: inline-flex; align-items: center; gap: 5px; } .grid-bulan { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; } .grid-bulan .judul-hari { text-align: center; font-size: 9.5px; font-weight: 800; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.1em; padding-bottom: 6px; } .grid-bulan .sel-tanggal { width: auto; padding: 8px 2px 6px; } .grid-bulan .sel-tanggal .angka { font-size: 16px; } .grid-bulan .kosong { visibility: hidden; } /* ------------------------------------------------------------------ */ /* Produk */ /* ------------------------------------------------------------------ */ /* Grid yang benar-benar mengisi lebar: 2 kolom di ponsel, tumbuh sendiri sampai 5 kolom di layar lebar. */ .grid-produk { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 1px; background: var(--garis); border: 1px solid var(--garis); border-radius: var(--r-besar); overflow: hidden; } @media (min-width: 640px) { .grid-produk { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } } /* Kartu produk tanpa bingkai sendiri — pemisahnya garis rambut grid, jadi deretannya terbaca sebagai satu papan, bukan kartu berserakan. */ .kartu-produk { background: var(--kertas); display: flex; flex-direction: column; transition: background 0.14s var(--gerak); } .kartu-produk:hover { background: var(--merek-samar); } .kartu-produk .gambar { aspect-ratio: 4 / 3; background: var(--latar); display: grid; place-items: center; overflow: hidden; } .kartu-produk .gambar img { width: 100%; height: 100%; object-fit: cover; display: block; } .kartu-produk .gambar .kosong { font-size: 30px; opacity: 0.25; padding: 0; } .kartu-produk .isi { padding: 13px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; max-width: none; margin: 0; } .kartu-produk .nama { font-weight: 700; font-size: 14.5px; line-height: 1.3; letter-spacing: -0.02em; } .kartu-produk .desk { font-size: 12px; color: var(--tinta-2); line-height: 1.45; flex: 1; } .kartu-produk .harga { font-weight: 800; font-size: 15.5px; letter-spacing: -0.02em; } /* Wadah tombol di kartu produk. Steppernya dibiarkan selebar isinya lalu ditengahkan — sebelumnya kartu memaksa `width:100%` lewat gaya inline, dan itu melempar − dan + ke dua tepi kartu dengan jarak menganga di tengah. Tombol "+ Tambah" tetap selebar kartu karena ia sendiri ber-width:100%. */ .kartu-produk .aksi { display: flex; justify-content: center; } .stepper { display: inline-flex; align-items: center; border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); background: var(--kertas); overflow: hidden; } .stepper button { width: 32px; height: 32px; border: 0; background: transparent; font-size: 17px; line-height: 1; color: var(--merek); cursor: pointer; display: grid; place-items: center; font-family: var(--sans); } .stepper button:disabled { color: var(--tinta-3); cursor: not-allowed; } .stepper button:not(:disabled):hover { background: var(--merek-samar); } .stepper .jml { min-width: 30px; text-align: center; font-weight: 800; font-size: 14px; border-left: 1px solid var(--garis); border-right: 1px solid var(--garis); align-self: stretch; display: grid; place-items: center; } .tbl-tambah { width: 100%; background: var(--tinta); color: #fff; border: 0; border-radius: var(--r-kecil); padding: 9px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; } .tbl-tambah:hover { background: var(--merek); } /* Pemilih varian (ukuran × rasa) di kartu produk. */ .pilih-varian { width: 100%; padding: 7px 9px; border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil); font: inherit; font-size: 12px; font-weight: 600; color: var(--tinta-2); background: var(--kertas); cursor: pointer; } .pilih-varian:hover { border-color: var(--tinta); } .pilihan-harga { font-size: 13.5px; font-weight: 800; letter-spacing: -0.02em; } .pita-kategori { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 16px; border-bottom: 1px solid var(--garis); margin-bottom: 18px; } .pita-kategori button { flex: 0 0 auto; border: 1px solid var(--garis-kuat); background: var(--kertas); border-radius: var(--r-kecil); padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 700; color: var(--tinta-2); cursor: pointer; white-space: nowrap; } .pita-kategori button:hover { border-color: var(--tinta); color: var(--tinta); } .pita-kategori button.aktif { background: var(--tinta); border-color: var(--tinta); color: #fff; } /* ------------------------------------------------------------------ */ /* Bar aksi */ /* ------------------------------------------------------------------ */ .bar-bawah { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--kertas); border-top: 1px solid var(--garis-kuat); padding: 11px 16px calc(11px + env(safe-area-inset-bottom)); } .bar-isi { display: flex; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; width: 100%; } .bar-kiri { min-width: 0; flex: 1; } .bar-label { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); font-weight: 800; } .bar-nilai { font-size: 17px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; } .bar-keranjang { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-kecil); background: var(--latar); border: 1px solid var(--garis); font-size: 17px; flex: 0 0 auto; } .bar-hitung { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--r-bulat); background: var(--merek); color: #fff; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; border: 2px solid var(--kertas); } .ada-bar { padding-bottom: calc(var(--bar-tinggi) + 16px); } .ada-bar .isi { padding-bottom: calc(var(--bar-tinggi) + 30px); } @media (min-width: 1024px) { .bar-bawah { left: var(--rusuk-lebar); } .bar-isi { padding: 0 10px; } } /* Ringkasan pilihan tanggal & lokasi */ .bar-pilihan { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; font-size: 13px; } .bar-pilihan > div { padding: 11px 14px; display: flex; align-items: center; gap: 10px; min-width: 0; } .bar-pilihan .pisah { border-left: 1px solid var(--garis); } .bar-pilihan .ket { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); font-weight: 800; } .bar-pilihan .nilai { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-pilihan button { margin-left: auto; } /* ------------------------------------------------------------------ */ /* Daftar & ringkasan */ /* ------------------------------------------------------------------ */ .baris { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--garis); } .baris:last-child { border-bottom: 0; } .baris-gambar { width: 46px; height: 46px; border-radius: var(--r-kecil); background: var(--latar); flex: 0 0 auto; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--garis); } .baris-gambar img { width: 100%; height: 100%; object-fit: cover; } .baris-isi { flex: 1; min-width: 0; } .baris-nama { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; } .baris-kanan { text-align: right; white-space: nowrap; font-weight: 700; } .total-baris { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; font-size: 14px; gap: 12px; } .total-baris.besar { border-top: 2px solid var(--tinta); margin-top: 10px; padding-top: 14px; font-size: 20px; font-weight: 800; letter-spacing: -0.03em; } /* ------------------------------------------------------------------ */ /* Pilihan berbentuk kartu */ /* ------------------------------------------------------------------ */ .pilihan { display: block; border: 1px solid var(--garis-kuat); border-radius: var(--r); padding: 14px 15px; cursor: pointer; background: var(--kertas); margin-bottom: 10px; transition: border-color 0.13s var(--gerak), background 0.13s var(--gerak); } .pilihan:hover { border-color: var(--tinta); } .pilihan.terpilih { border-color: var(--merek); border-width: 2px; padding: 13px 14px; background: var(--merek-samar); } .pilihan input { position: absolute; opacity: 0; pointer-events: none; } .pilihan-atas { display: flex; align-items: center; gap: 11px; } .pilihan-judul { font-weight: 700; font-size: 15px; letter-spacing: -0.02em; } .pilihan-ket { font-size: 12.5px; color: var(--tinta-2); margin-top: 3px; line-height: 1.5; } .pilihan-tanda { margin-left: auto; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--garis-kuat); display: grid; place-items: center; } .pilihan.terpilih .pilihan-tanda { border-color: var(--merek); } .pilihan.terpilih .pilihan-tanda::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--merek); } .pilih-dua { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; } .pilih-dua button { border: 1px solid var(--garis-kuat); background: var(--kertas); border-radius: var(--r); padding: 15px 10px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tinta-2); } .pilih-dua button:hover { border-color: var(--tinta); color: var(--tinta); } .pilih-dua button.aktif { border-color: var(--merek); background: var(--merek); color: #fff; } .kartu-tambah { border: 1px dashed var(--garis-kuat); border-radius: var(--r-besar); padding: 24px 20px; text-align: center; background: transparent; cursor: pointer; width: 100%; font: inherit; color: var(--tinta-2); } .kartu-tambah:hover { border-color: var(--merek); color: var(--merek); background: var(--merek-samar); } .kartu-tambah .plus { width: 36px; height: 36px; border-radius: 10px; background: var(--tinta); color: #fff; display: grid; place-items: center; margin: 0 auto 10px; font-size: 19px; line-height: 1; } .kartu-tambah .judul { font-weight: 700; font-size: 15px; color: var(--tinta); } /* ------------------------------------------------------------------ */ /* Peta */ /* ------------------------------------------------------------------ */ .kotak-peta { height: 260px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--garis-kuat); background: var(--latar); position: relative; } @media (min-width: 1024px) { .kotak-peta { height: 320px; } } .peta-petunjuk { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 500; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--r-kecil); padding: 7px 11px; font-size: 12px; color: var(--tinta-2); text-align: center; pointer-events: none; } .baris-cari-peta { display: flex; gap: 8px; margin-bottom: 10px; } .baris-cari-peta input { flex: 1; } .leaflet-container { font-family: var(--sans); } /* ------------------------------------------------------------------ */ /* Halaman bayar */ /* ------------------------------------------------------------------ */ .tab { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--garis-kuat); border-radius: var(--r); overflow: hidden; margin-bottom: 20px; } .tab button { border: 0; background: var(--kertas); padding: 12px 8px; font: inherit; font-weight: 700; font-size: 14px; color: var(--tinta-2); cursor: pointer; } .tab button + button { border-left: 1px solid var(--garis-kuat); } .tab button.aktif { background: var(--tinta); color: #fff; } .kartu-qr { background: var(--kertas); border: 1px solid var(--garis-kuat); border-radius: var(--r-besar); padding: 24px 20px 20px; text-align: center; } .kotak-qr { background: #fff; border: 1px solid var(--garis); border-radius: var(--r); padding: 14px; display: inline-block; line-height: 0; } .kotak-qr img, .kotak-qr canvas { width: 100%; max-width: 250px; height: auto; display: block; } /* Nominal jadi baris paling menonjol di halaman — inilah angka yang disalin pelanggan ke aplikasi pembayaran. */ .nominal-besar { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin: 20px auto 8px; padding: 16px; background: var(--tinta); border-radius: var(--r); } .nominal-angka { font-family: var(--mono); font-size: clamp(26px, 6vw, 34px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; color: #fff; } .nominal-besar .tbl-salin { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; } .nominal-besar .tbl-salin:hover { background: rgba(255, 255, 255, 0.24); border-color: #fff; } .tbl-salin { border: 1px solid var(--garis-kuat); background: var(--kertas); border-radius: var(--r-kecil); padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--tinta); display: inline-flex; align-items: center; gap: 6px; } .tbl-salin:hover { border-color: var(--tinta); } .tbl-salin.berhasil { border-color: var(--hijau); color: var(--hijau); background: var(--hijau-latar); } .hitung-mundur { font-family: var(--mono); font-weight: 700; font-size: 15px; } .hitung-mundur.mendesak { color: var(--merah); } details.akordeon { border: 1px solid var(--garis); border-radius: var(--r); background: var(--kertas); margin-bottom: 12px; overflow: hidden; } details.akordeon > summary { padding: 14px 16px; cursor: pointer; font-weight: 700; font-size: 14px; list-style: none; display: flex; align-items: center; gap: 9px; } details.akordeon > summary::-webkit-details-marker { display: none; } details.akordeon > summary::before { content: '+'; font-size: 16px; color: var(--tinta-3); font-weight: 700; width: 16px; text-align: center; } details.akordeon[open] > summary::before { content: '\2212'; } details.akordeon[open] > summary { border-bottom: 1px solid var(--garis); } details.akordeon .isi { padding: 14px 16px; font-size: 13px; color: var(--tinta-2); line-height: 1.7; max-width: none; margin: 0; } details.akordeon ol { margin: 0; padding-left: 18px; } details.akordeon li { margin-bottom: 6px; } .kotak-salin { display: flex; align-items: center; gap: 12px; background: var(--latar); border: 1px solid var(--garis); border-radius: var(--r); padding: 13px 15px; } .kotak-salin .isi { flex: 1; min-width: 0; max-width: none; margin: 0; padding: 0; } .kotak-salin .nilai { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; } /* ------------------------------------------------------------------ */ /* Tombol mengambang & pesan singkat */ /* ------------------------------------------------------------------ */ .tbl-ambang { position: fixed; right: 16px; bottom: calc(var(--bar-tinggi) + 16px); z-index: 65; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--garis-kuat); background: var(--kertas); color: var(--tinta); font-size: 18px; cursor: pointer; display: grid; place-items: center; box-shadow: var(--bayang-apung); } .tbl-ambang:hover { border-color: var(--tinta); } .tanpa-bar .tbl-ambang { bottom: 18px; } @media (min-width: 1024px) { .tbl-ambang { right: 24px; } } .wadah-pesan { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bar-tinggi) + 18px); z-index: 110; display: flex; flex-direction: column; gap: 8px; width: calc(100% - 32px); max-width: 440px; pointer-events: none; } .pesan-singkat { background: var(--tinta); color: #fff; border-radius: var(--r); padding: 13px 16px; font-size: 14px; font-weight: 500; box-shadow: var(--bayang-apung); animation: munculPesan 0.22s var(--gerak); } .pesan-singkat.galat { background: var(--merah); } .pesan-singkat.berhasil { background: var(--hijau); } @keyframes munculPesan { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ */ /* Keadaan kosong & memuat */ /* ------------------------------------------------------------------ */ .kosong { text-align: center; padding: 56px 20px; color: var(--tinta-2); } .kosong .gambar { font-size: 28px; width: 64px; height: 64px; margin: 0 auto 16px; border: 1px solid var(--garis-kuat); border-radius: var(--r); display: grid; place-items: center; } .kosong .judul { font-weight: 800; color: var(--tinta); margin-bottom: 6px; font-size: 17px; letter-spacing: -0.02em; } .memuat { text-align: center; padding: 56px 20px; color: var(--tinta-3); font-size: 14px; } .putar { width: 26px; height: 26px; border: 2px solid var(--garis); border-top-color: var(--merek); border-radius: 50%; margin: 0 auto 14px; animation: putar 0.7s linear infinite; } @keyframes putar { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ */ /* Jendela sisipan */ /* ------------------------------------------------------------------ */ .tirai { position: fixed; inset: 0; z-index: 120; background: rgba(15, 10, 22, 0.55); display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 700px) { .tirai { align-items: center; padding: 28px; } } .jendela { background: var(--kertas); border-radius: var(--r-besar) var(--r-besar) 0 0; width: 100%; max-width: 620px; max-height: 92vh; overflow-y: auto; padding: 22px 20px calc(24px + env(safe-area-inset-bottom)); box-shadow: var(--bayang-apung); animation: naik 0.24s var(--gerak); } @media (min-width: 700px) { .jendela { border-radius: var(--r-besar); } } @keyframes naik { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } } .jendela-kepala { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 2px solid var(--tinta); } .jendela-kepala h2 { flex: 1; } .tbl-tutup { width: 34px; height: 34px; border-radius: var(--r-kecil); border: 1px solid var(--garis-kuat); background: var(--kertas); font-size: 16px; line-height: 1; cursor: pointer; color: var(--tinta-2); flex: 0 0 auto; } .tbl-tutup:hover { background: var(--merah-latar); color: var(--merah); border-color: var(--merah); } /* ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }