/* ===================================================================== SPLITBILL - gaya visual Diselaraskan sama IMP Penang: maroon #86173B, kartu membulat, tombol pil berikon, bayangan tipis. Bukan lagi kertas struk bersudut tajam - kesannya kurang stylish di HP. Tetep mobile-first: - apa pun yang diketuk minimal 44px - aksi utama nempel di bawah, di jangkauan jempol - font input 16px, kalau kurang iOS bakal auto-zoom pas diketik ===================================================================== */ :root{ --merek: #86173B; /* maroon IMP Penang */ --merek-tua: #6B1230; --merek-muda:#FBF3F6; /* selaput tipis buat latar lembut */ --merek-tepi:#EBD5DD; --latar: #F5F3F2; /* latar halaman, abu hangat */ --kartu: #FFFFFF; --tinta: #1C1A1B; --pudar: #7A7175; --garis: #E8E3E5; --cap: #C0392B; /* merah peringatan */ --lunas: #1B7F5E; /* hijau WhatsApp/selesai */ --sudut: 16px; /* kartu */ --sudut-kcl: 12px; /* elemen di dalam kartu */ --sentuh: 44px; --aman-bawah: env(safe-area-inset-bottom, 0px); --bayang: 0 1px 2px rgba(28,26,27,.05), 0 10px 26px -16px rgba(28,26,27,.24); } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; background:var(--latar); } body{ margin:0; background:var(--latar); color:var(--tinta); font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; font-size:16px; line-height:1.5; padding:0 12px calc(30px + var(--aman-bawah)); -webkit-tap-highlight-color:transparent; } /* Angka pakai monospace biar kolomnya lurus - satu-satunya sisa dari gagasan "struk" yang emang berguna secara fungsi. */ .duit, .kode, .porsi{ font-family:'Space Mono',ui-monospace,Menlo,monospace; font-variant-numeric:tabular-nums; } .wadah{ max-width:540px; margin:0 auto; } /* ---------- Kop ---------- */ .kop{ padding:16px 2px 10px; } .kop-atas{ display:flex; align-items:center; gap:10px; } .logo{ display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--tinta); min-width:0; flex:1; } .logo .tanda{ width:34px; height:34px; border-radius:11px; flex:0 0 auto; background:var(--merek); color:#fff; display:grid; place-items:center; font-size:17px; } .logo .judul{ font-weight:700; font-size:17px; letter-spacing:-.01em; line-height:1.15; } .logo .anak{ display:block; font-size:11.5px; color:var(--pudar); font-weight:400; letter-spacing:0; } /* Tombol ikon bundar di pojok kanan atas */ .ikon-tbl{ width:38px; height:38px; flex:0 0 auto; border-radius:50%; border:1px solid var(--garis); background:var(--kartu); color:var(--tinta); display:grid; place-items:center; cursor:pointer; font-size:15px; text-decoration:none; line-height:1; transition:background .15s, border-color .15s; } .ikon-tbl:active{ background:var(--merek-muda); border-color:var(--merek-tepi); } @media (hover:hover){ .ikon-tbl:hover{ background:var(--merek-muda); border-color:var(--merek-tepi); } } /* Rel langkah - titik kecil dengan garis penghubung, bukan angka besar */ .rel{ list-style:none; display:flex; margin:14px 0 0; padding:0; counter-reset:langkah; } .rel li{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0; position:relative; } /* Garis penghubung antartitik */ .rel li::before{ content:''; position:absolute; top:5px; left:-50%; width:100%; height:2px; background:var(--garis); } .rel li:first-child::before{ display:none; } .rel li.lewat::before, .rel li.kini::before{ background:var(--merek); } .rel .titik{ width:12px; height:12px; border-radius:50%; z-index:1; background:var(--garis); position:relative; font-size:0; /* angkanya disembunyiin, posisinya udah cukup ngasih tau */ } .rel .nama{ font-size:10.5px; color:var(--pudar); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } /* Langkah yang bisa diklik: seluruh area titik+label jadi target sentuh */ .tautan-langkah{ display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:inherit; padding:2px 4px 0; margin:-2px -4px 0; border-radius:8px; } .tautan-langkah:active{ background:var(--merek-muda); } @media (hover:hover){ .tautan-langkah:hover .nama{ color:var(--merek); } .tautan-langkah:hover .titik{ transform:scale(1.25); } } .rel .titik{ transition:transform .12s ease; } /* Langkah yang syaratnya belum kepenuhan: diredupin, bukan dihilangin, biar orang tetep ngerti alurnya sampai mana. */ .rel li.terkunci .nama{ opacity:.45; } .rel li.terkunci .titik{ opacity:.45; } .rel .lewat .titik{ background:var(--merek); } .rel .kini .titik{ background:var(--merek); box-shadow:0 0 0 4px var(--merek-muda); width:14px; height:14px; } .rel .kini .nama{ color:var(--merek); font-weight:600; } /* ---------- Kartu ---------- */ .struk{ background:var(--kartu); border-radius:var(--sudut); padding:20px 16px; margin-bottom:18px; box-shadow:var(--bayang); } h1{ font-size:21px; font-weight:700; margin:0 0 6px; letter-spacing:-.02em; line-height:1.25; } h2{ font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--pudar); margin:24px 0 10px; } .sub{ color:var(--pudar); font-size:14.5px; margin:0 0 16px; } /* ---------- Tombol pil ---------- Ukurannya sengaja gak jumbo. Tombol setinggi 56px yang melebar penuh itu bikin halaman kelihatan kayak formulir, bukan aplikasi. */ .tbl{ display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:46px; padding:11px 18px; border:1px solid transparent; border-radius:999px; background:var(--merek); color:#fff; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; text-decoration:none; text-align:center; line-height:1.2; transition:background .15s ease, border-color .15s ease; } .tbl .ik{ font-size:15px; line-height:1; flex:0 0 auto; } .tbl:active{ background:var(--merek-tua); } .tbl.hantu{ background:var(--kartu); color:var(--tinta); border-color:var(--garis); } .tbl.hantu:active{ background:var(--merek-muda); border-color:var(--merek-tepi); } .tbl.wa{ background:var(--lunas); } .tbl.wa:active{ background:#146349; } .tbl.kecil{ width:auto; min-height:38px; padding:8px 15px; font-size:14px; } .tbl.mati{ background:var(--garis); color:var(--pudar); cursor:not-allowed; } .tbl.hantu.bahaya{ color:var(--cap); border-color:#EFD4D0; } .tbl.hantu.bahaya:active{ background:#FCF1EF; } .tbl.hantu.mati{ color:#C9C3C6; border-color:#EFEBED; background:transparent; pointer-events:none; } @media (hover:hover){ .tbl:hover{ background:var(--merek-tua); } .tbl.hantu:hover{ background:var(--merek-muda); border-color:var(--merek-tepi); } .tbl.wa:hover{ background:#146349; } } *:focus-visible{ outline:2px solid var(--merek); outline-offset:2px; } /* ---------- Zona unggah ---------- */ .zona{ border:1.5px dashed var(--merek-tepi); border-radius:var(--sudut); background:var(--merek-muda); padding:34px 18px; text-align:center; cursor:pointer; display:block; transition:border-color .15s, background .15s; } .zona:active{ border-color:var(--merek); } .zona .ik{ font-size:30px; display:block; margin-bottom:8px; } .zona .besar{ font-size:17px; font-weight:700; display:block; margin-bottom:3px; } .zona .kecil{ font-size:13.5px; color:var(--pudar); } .zona input[type=file]{ position:absolute; width:1px; height:1px; opacity:0; } /* ---------- Form ---------- */ label{ display:block; font-size:12.5px; font-weight:500; color:var(--pudar); margin-bottom:5px; } input[type=text],input[type=number],input[type=password],select,textarea{ width:100%; min-height:var(--sentuh); padding:11px 13px; border:1px solid var(--garis); border-radius:var(--sudut-kcl); background:var(--kartu); color:var(--tinta); font-family:inherit; /* 16px itu wajib. Di bawah itu, Safari iOS nge-zoom halamannya tiap kali input diketuk, dan zoom-nya gak balik sendiri. */ font-size:16px; } input:focus,select:focus{ border-color:var(--merek); outline:none; } .duit-in{ font-family:'Space Mono',monospace; text-align:right; } select{ appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--pudar) 50%), linear-gradient(135deg,var(--pudar) 50%,transparent 50%); background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:34px; } /* ---------- Baris item yang bisa diedit ---------- */ .baris{ display:grid; gap:8px 10px; align-items:end; grid-template-columns:1fr 72px 100px; grid-template-areas: "nama nama buang" "qty harga harga"; padding:12px 0; border-bottom:1px solid var(--garis); } .baris > div:nth-of-type(1){ grid-area:nama; } .baris > div:nth-of-type(2){ grid-area:qty; } .baris > div:nth-of-type(3){ grid-area:harga; } .baris > .buang{ grid-area:buang; } .baris .buang{ border:1px solid var(--garis); background:var(--kartu); color:var(--pudar); cursor:pointer; font-size:16px; line-height:1; min-height:var(--sentuh); width:var(--sentuh); border-radius:50%; justify-self:end; } .baris .buang:active{ color:var(--cap); border-color:#EFD4D0; } .baris-basis{ grid-template-columns:1fr; grid-template-areas:"nama"; border:0; padding-top:0; } /* ---------- Pemisah "atau" ---------- */ .pisah{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--pudar); font-size:13px; } .pisah::before,.pisah::after{ content:''; flex:1; height:1px; background:var(--garis); } /* ---------- Subtotal berjalan pas ngetik ---------- Dihitung di browser, cuma buat dilihat sambil ngisi. Angka resminya tetep dari server, jadi gak ada risiko beda. */ .jumlah-jalan{ display:flex; justify-content:space-between; align-items:baseline; margin-top:12px; padding:11px 13px; background:var(--merek-muda); border-radius:var(--sudut-kcl); font-size:13.5px; color:var(--pudar); } .jumlah-jalan .angka{ font-size:16px; font-weight:700; color:var(--merek); } /* ---------- Chip anggota ---------- */ .chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; } .chip{ display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:7px 14px; border-radius:999px; border:1px solid var(--garis); background:var(--kartu); font-size:14.5px; font-weight:500; font-family:inherit; color:var(--tinta); } .chip .warna{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; } .chip button{ border:0; background:none; cursor:pointer; color:var(--pudar); font-size:17px; line-height:1; padding:6px; margin:-6px -8px -6px 0; } .chip button:active{ color:var(--cap); } /* ---------- Daftar pilih nama di halaman gabung ---------- Chip biasa bentuknya terlalu mirip label pasif, jadi orang malah lari ke kolom input di bawahnya. Versi ini jelas-jelas tombol: lebih tinggi, ada panah, dan melebar penuh di layar sempit. */ .pilih-nama{ display:grid; gap:8px; margin-top:10px; } .pilih-nama form{ margin:0; display:flex; } .chip-pilih{ display:flex; align-items:center; gap:11px; width:100%; min-height:52px; padding:11px 16px; border:1px solid var(--garis); border-radius:999px; background:var(--kartu); color:var(--tinta); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; text-align:left; transition:border-color .15s, background .15s; } .chip-pilih .warna{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; } .chip-pilih .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chip-pilih .panah{ color:var(--pudar); font-size:17px; flex:0 0 auto; } .chip-pilih:active{ background:var(--merek-muda); border-color:var(--merek); } @media (hover:hover){ .chip-pilih:hover{ background:var(--merek-muda); border-color:var(--merek-tepi); } .chip-pilih:hover .panah{ color:var(--merek); } } @media (min-width:420px){ .pilih-nama{ grid-template-columns:1fr 1fr; } } /* Formulir nama baru, dilipat. Sengaja dibikin kalem - ini jalan darurat, bukan pilihan setara sama daftar di atasnya. */ .lipatan{ margin-top:22px; border-top:1px solid var(--garis); padding-top:14px; } .lipatan > summary{ list-style:none; cursor:pointer; font-size:13.5px; color:var(--pudar); display:inline-flex; align-items:center; gap:7px; padding:6px 0; } .lipatan > summary::-webkit-details-marker{ display:none; } .lipatan > summary::before{ content:'+'; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--garis); font-size:13px; line-height:1; transition:transform .15s ease; } .lipatan[open] > summary::before{ content:'-'; } .lipatan > summary:hover{ color:var(--merek); } /* ---------- Kartu item di halaman alokasi ---------- */ .item-kartu{ position:relative; padding:12px 13px 12px 20px; border:1px solid var(--garis); border-radius:var(--sudut-kcl); background:var(--kartu); margin-bottom:9px; } .item-kartu.kosong{ border-color:#EFD4D0; background:#FDF7F6; } /* PITA BAGI - tanda khasnya. Tiap segmen warna = satu orang, tingginya sesuai porsi yang dia tanggung. */ .pita{ position:absolute; left:0; top:0; bottom:0; width:6px; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--sudut-kcl) 0 0 var(--sudut-kcl); } .pita i{ display:block; flex:1 1 0; } .item-kartu.kosong .pita{ background:repeating-linear-gradient(45deg,var(--cap) 0 3px,transparent 3px 6px); } .item-kepala{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; } .item-nama{ font-weight:600; font-size:15.5px; } .item-qty{ color:var(--pudar); font-weight:400; font-size:13.5px; } .pilih{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; } .pilih button{ display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:7px 13px; border:1px solid var(--garis); background:var(--kartu); color:var(--tinta); border-radius:999px; cursor:pointer; font-family:inherit; font-size:14px; transition:transform .08s ease; } .pilih button:active{ transform:scale(.96); } .pilih button[aria-pressed=true]{ border-color:transparent; font-weight:600; } .pilih button .bagian{ font-family:'Space Mono',monospace; font-size:11.5px; opacity:.72; } .porsi{ display:none; align-items:center; justify-content:center; min-width:26px; height:26px; margin:-4px -7px -4px 1px; border-radius:999px; background:rgba(28,26,27,.13); font-size:11px; font-weight:700; } .pilih button[aria-pressed=true] .porsi{ display:inline-flex; } .porsi:active{ background:rgba(28,26,27,.25); } /* ---------- Tabel ringkasan ---------- */ .rinci{ width:100%; border-collapse:collapse; } .rinci td{ padding:6px 0; vertical-align:top; } .rinci td:last-child{ text-align:right; white-space:nowrap; padding-left:10px; } .rinci .ket{ color:var(--pudar); font-size:14px; } .rinci .tebal td{ font-weight:700; border-top:1px solid var(--garis); padding-top:10px; } .orang-blok{ padding:14px 0; border-bottom:1px solid var(--garis); } .orang-blok:last-of-type{ border-bottom:0; } .orang-kepala{ display:flex; align-items:center; gap:10px; justify-content:space-between; } .orang-nama{ display:flex; align-items:center; gap:9px; font-weight:600; font-size:16px; min-width:0; } .orang-nama .warna{ width:12px; height:12px; border-radius:4px; flex:0 0 auto; } .orang-total{ font-size:16px; font-weight:700; white-space:nowrap; } .total-besar{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:18px; padding-top:14px; border-top:1px solid var(--garis); } .total-besar .angka{ font-size:24px; font-weight:700; white-space:nowrap; color:var(--merek); } /* ---------- Bar aksi lengket ---------- */ .aksi{ display:flex; gap:9px; margin-top:18px; } .aksi .tbl{ flex:1; min-width:0; } .aksi form{ flex:1; display:flex; margin:0; } .aksi form .tbl{ width:100%; } .aksi .tbl.utama{ flex:2; } .aksi .tbl.samping{ flex:1; } .aksi.lekat{ position:sticky; bottom:0; z-index:5; margin:18px -16px -20px; padding:11px 16px calc(11px + var(--aman-bawah)); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-top:1px solid var(--garis); border-radius:0 0 var(--sudut) var(--sudut); } .aksi.lekat.kolom{ flex-direction:column; } .bar-info{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; margin-bottom:9px; color:var(--pudar); } .bar-info .angka{ font-weight:700; font-size:16px; color:var(--tinta); } /* ---------- Kelompok tombol sekunder ---------- Bar lengket cuma buat SATU aksi utama plus satu pendamping. Sisanya turun ke sini - grid, jadi lebarnya rata dan gak ada tombol yatim nyangkut di baris terakhir. */ .grup-tbl{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; } .grup-tbl .tbl{ width:100%; font-size:14px; font-weight:500; padding:10px 12px; min-height:42px; } .grup-tbl .tbl.lebar{ grid-column:1 / -1; } .grup-tbl form{ margin:0; display:flex; } .grup-tbl form .tbl{ width:100%; } .grup-tbl.bertiga{ grid-template-columns:repeat(3,1fr); } .grup-tbl.bertiga .tbl{ padding:10px 6px; font-size:13.5px; gap:5px; } /* ---------- Lain-lain ---------- */ .pesan{ padding:11px 14px; border-radius:var(--sudut-kcl); font-size:14.5px; margin:0 0 16px; } .pesan.info{ background:var(--merek-muda); color:var(--merek-tua); } .pesan.galat{ background:#FCF1EF; color:var(--cap); } .pesan.oke{ background:#E9F5F0; color:var(--lunas); } /* Bukan error, tapi perlu dibaca sebelum ngapa-ngapain */ .pesan.hati-hati{ background:#FDF6E7; color:#7A5A12; border:1px solid #F0DFB8; display:flex; gap:9px; align-items:flex-start; line-height:1.45; } .pesan.hati-hati .ik{ flex:0 0 auto; } .pesan a{ color:inherit; } .jejak-ubah{ display:flex; gap:8px; align-items:flex-start; background:#FDF6E7; border:1px solid #F0DFB8; color:#7A5A12; padding:10px 12px; border-radius:var(--sudut-kcl); font-size:13px; line-height:1.45; margin:0 0 16px; } .jejak-ubah .ik{ flex:0 0 auto; } .kode{ letter-spacing:.14em; font-weight:700; } .cap-manual{ display:inline-block; padding:1px 7px; border-radius:999px; background:var(--merek-muda); color:var(--merek); border:1px solid var(--merek-tepi); font-size:11px; font-weight:600; vertical-align:1px; } .riwayat a{ display:flex; justify-content:space-between; gap:10px; align-items:center; min-height:var(--sentuh); padding:11px 0; border-bottom:1px solid var(--garis); text-decoration:none; color:var(--tinta); } .riwayat a:last-child{ border-bottom:0; } .riwayat .tgl{ color:var(--pudar); font-size:13px; white-space:nowrap; } .memuat{ display:none; text-align:center; padding:20px; color:var(--pudar); font-size:14.5px; } .memuat.on{ display:block; } .petunjuk{ font-size:13px; color:var(--pudar); margin:10px 0 0; } .petunjuk a{ color:var(--merek); } /* ---------- Kotak bagikan ---------- Link plus kodenya, siap disalin. Kolomnya sengaja bisa diketuk buat nyeleksi sendiri - sebagian orang lebih percaya cara manual. */ .bagikan{ border:1px solid var(--garis); border-radius:var(--sudut-kcl); background:var(--merek-muda); padding:13px; margin-top:14px; } .bagikan .judul-kecil{ font-size:12.5px; font-weight:600; color:var(--merek-tua); margin-bottom:8px; } .bagikan input{ font-family:'Space Mono',monospace; font-size:13px; min-height:40px; padding:9px 11px; background:var(--kartu); } .bagikan .grup-tbl{ margin-top:8px; } .bagikan .ket-kode{ font-size:12.5px; color:var(--pudar); margin:8px 0 0; text-align:center; } .bagikan .ket-kode .kode{ color:var(--merek); } /* ---------- Kartu ajakan ---------- Sengaja dibedain dari kotak bagikan biasa: ada latar hijau tipis dan tombol WhatsApp penuh. Ini aksi yang paling pengen kita dorong - makin banyak yang isi sendiri, makin ringan kerjaan si pembuat struk. */ .ajak{ border:1px solid #CDE8DD; border-radius:var(--sudut-kcl); background:#F1F9F5; padding:14px; margin-top:16px; } .ajak-kepala{ display:flex; gap:11px; align-items:flex-start; margin-bottom:12px; } .ajak-ik{ width:34px; height:34px; flex:0 0 auto; border-radius:10px; background:var(--lunas); color:#fff; display:grid; place-items:center; font-size:16px; } .ajak-judul{ font-weight:700; font-size:15px; line-height:1.3; } .ajak-sub{ font-size:13px; color:var(--pudar); margin-top:2px; } .ajak .tbl{ width:100%; } /* ---------- Tombol ke atas ---------- Ditaruh di atas bar aksi lengket, biar gak tumpang tindih. */ .ke-atas{ position:fixed; right:14px; bottom:calc(78px + env(safe-area-inset-bottom, 0px)); width:42px; height:42px; border-radius:50%; border:1px solid var(--garis); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:var(--merek); font-size:18px; line-height:1; display:grid; place-items:center; cursor:pointer; z-index:20; box-shadow:0 2px 10px -2px rgba(28,26,27,.22); opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease, visibility .18s; } .ke-atas.on{ opacity:1; visibility:visible; transform:translateY(0); } .ke-atas:active{ background:var(--merek); color:#fff; border-color:var(--merek); } /* ---------- Kaki, mengikuti gaya IMP Penang ---------- */ .kaki{ text-align:center; color:var(--pudar); font-size:12px; line-height:1.7; padding:14px 16px 0; } .kaki .sosmed{ display:flex; justify-content:center; gap:8px; margin-top:10px; } .kaki .sosmed a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--garis); background:var(--kartu); display:grid; place-items:center; text-decoration:none; font-size:15px; } .kaki .sosmed a:active{ background:var(--merek-muda); border-color:var(--merek-tepi); } .kaki .tautan{ margin-bottom:8px; } .kaki .tautan a{ color:var(--pudar); text-decoration:none; } .kaki .tautan a:hover{ color:var(--merek); } /* ---------- Layar lebih lega ---------- */ @media (min-width:520px){ .struk{ padding:22px 20px; } .baris{ grid-template-columns:1fr 62px 96px var(--sentuh); grid-template-areas:"nama qty harga buang"; } .baris + .baris label{ display:none; } .baris-basis{ grid-template-columns:1fr; grid-template-areas:"nama"; } .baris-basis label{ display:block !important; } .aksi.lekat{ margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px; } } @media (max-width:359px){ .rel .nama{ display:none; } h1{ font-size:19px; } .total-besar .angka{ font-size:21px; } .grup-tbl.bertiga .tbl{ font-size:12.5px; } } @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } } /* ---------- Daftar pilih nama di halaman gabung ---------- Chip biasa bentuknya terlalu mirip label pasif, jadi orang malah lari ke kolom input di bawahnya. Versi ini jelas-jelas tombol: lebih tinggi, ada panah, dan melebar penuh di layar sempit. */ .pilih-nama{ display:grid; gap:8px; margin-top:10px; } .pilih-nama form{ margin:0; display:flex; } .chip-pilih{ display:flex; align-items:center; gap:11px; width:100%; min-height:52px; padding:11px 16px; border:1px solid var(--garis); border-radius:999px; background:var(--kartu); color:var(--tinta); font-family:inherit; font-size:16px; font-weight:600; cursor:pointer; text-align:left; transition:border-color .15s, background .15s; } .chip-pilih .warna{ width:14px; height:14px; border-radius:50%; flex:0 0 auto; } .chip-pilih .nm{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .chip-pilih .panah{ color:var(--pudar); font-size:17px; flex:0 0 auto; } .chip-pilih:active{ background:var(--merek-muda); border-color:var(--merek); } @media (hover:hover){ .chip-pilih:hover{ background:var(--merek-muda); border-color:var(--merek-tepi); } .chip-pilih:hover .panah{ color:var(--merek); } } @media (min-width:420px){ .pilih-nama{ grid-template-columns:1fr 1fr; } } /* Formulir nama baru, dilipat. Sengaja dibikin kalem - ini jalan darurat, bukan pilihan setara sama daftar di atasnya. */ .lipatan{ margin-top:22px; border-top:1px solid var(--garis); padding-top:14px; } .lipatan > summary{ list-style:none; cursor:pointer; font-size:13.5px; color:var(--pudar); display:inline-flex; align-items:center; gap:7px; padding:6px 0; } .lipatan > summary::-webkit-details-marker{ display:none; } .lipatan > summary::before{ content:'+'; display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid var(--garis); font-size:13px; line-height:1; transition:transform .15s ease; } .lipatan[open] > summary::before{ content:'-'; } .lipatan > summary:hover{ color:var(--merek); } /* ---------- Rel langkah: bikin kelihatan bisa diklik ---------- Sebelumnya isyaratnya cuma muncul pas hover. Di HP gak ada hover, jadi praktis gak ada yang tau titik-titik itu bisa dipencet. */ .rel .titik{ width:14px; height:14px; } .rel .kini .titik{ width:17px; height:17px; } /* Langkah yang bisa diklik dikasih tanda permanen: labelnya digarisbawahi putus-putus, warnanya lebih tegas dari yang terkunci. */ .tautan-langkah .nama{ color:var(--tinta); text-decoration:underline dotted var(--garis); text-underline-offset:3px; } .tautan-langkah .titik{ box-shadow:0 0 0 3px var(--kartu), 0 0 0 4px var(--garis); } .tautan-langkah:active .titik{ box-shadow:0 0 0 3px var(--kartu), 0 0 0 4px var(--merek); } @media (hover:hover){ .tautan-langkah:hover .titik{ box-shadow:0 0 0 3px var(--kartu), 0 0 0 4px var(--merek); } } /* ---------- Spanduk ajakan balik nyentang ---------- Ditaruh paling atas halaman hasil, jadi kebaca tanpa scroll. Cuma nongol kalau emang masih ada yang belum dicentang. */ .ajakan-isi{ display:flex; gap:12px; align-items:flex-start; background:var(--merek-muda); border:1px solid var(--merek-tepi); border-radius:var(--sudut-kcl); padding:14px; margin:0 0 18px; } .ajakan-isi .ik-bulat{ width:34px; height:34px; flex:0 0 auto; border-radius:11px; background:var(--merek); color:#fff; display:grid; place-items:center; font-size:16px; } .ajakan-isi .isi{ flex:1; min-width:0; } .ajakan-isi .judul{ font-weight:700; font-size:15px; line-height:1.3; } .ajakan-isi .ket{ font-size:13px; color:var(--pudar); margin-top:2px; } .ajakan-isi .tbl{ margin-top:11px; } /* ---------- Nama yang udah diambil orang ---------- Diredupin biar jelas bedanya sama nama yang masih kosong, tapi tetep bisa dipencet - ini jalan keluar buat yang cookie-nya keilangan. */ .pilih-nama.sudah .chip-pilih{ background:transparent; border-style:dashed; } .chip-pilih.redup .nm{ color:var(--pudar); font-weight:500; } .chip-pilih.redup .warna{ opacity:.55; } .chip-pilih.redup:active{ background:var(--merek-muda); border-style:solid; } @media (hover:hover){ .chip-pilih.redup:hover{ background:var(--merek-muda); border-style:solid; } } .chip-pilih[disabled]{ opacity:.5; cursor:not-allowed; } .ini-aku{ flex:0 0 auto; font-size:12px; font-weight:600; color:var(--merek); background:var(--merek-muda); border:1px solid var(--merek-tepi); border-radius:999px; padding:4px 11px; } .chip-pilih[disabled] .ini-aku{ display:none; } /* ---------- Penanda di halaman anggota ---------- Pemilik perlu tau siapa yang udah masuk sendiri lewat link gabung. */ .chip.terklaim{ border-color:var(--merek-tepi); background:var(--merek-muda); } .chip .tanda-masuk{ color:var(--lunas); font-size:13px; font-weight:700; } .chip button.lepas{ color:var(--pudar); font-size:14px; padding:6px 4px; margin:-6px 0; } .chip button.lepas:active{ color:var(--merek); } /* ---------- Kop nempel di atas ---------- Ini inti perbaikannya: daripada nambah tombol melayang di pojok yang udah penuh, kop yang emang udah ada di tiap halaman dibikin nempel. Home jadi selalu kelihatan tanpa nambah elemen baru sama sekali. */ .kop{ position:sticky; top:0; z-index:30; background:rgba(245,243,242,.92); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); margin:0 -12px; padding:12px 14px 10px; } @media (min-width:520px){ .kop{ margin:0 -14px; padding-left:16px; padding-right:16px; } } /* Garis tipis cuma muncul pas halaman udah discroll, biar pas di atas kopnya nyatu sama latar dan gak kelihatan kayak bilah terpisah. */ .kop::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--garis); opacity:0; transition:opacity .18s ease; } .kop.melayang::after{ opacity:1; } /* ---------- Logo jadi jelas tombol ---------- Sebelumnya logo emang udah nautin ke beranda, tapi gak ada tanda apa pun kalau itu bisa dipencet. Orang gak nyoba mencet sesuatu yang keliatannya cuma judul. */ .logo{ padding:5px 10px 5px 5px; margin-left:-5px; border-radius:12px; transition:background .15s ease; } .logo:active{ background:var(--merek-muda); } @media (hover:hover){ .logo:hover{ background:var(--merek-muda); } } /* Ikon rumah kecil nempel di pojok tanda logo */ .logo .tanda{ position:relative; } .logo .tanda::after{ content:'\1F3E0'; position:absolute; right:-5px; bottom:-5px; width:17px; height:17px; border-radius:50%; background:var(--kartu); border:1px solid var(--garis); font-size:9px; line-height:15px; text-align:center; } /* ---------- Rel langkah: bikin makin jelas bisa dipencet ---------- */ .rel{ margin-top:12px; padding-top:10px; } /* Langkah yang udah kelewat dikasih tanda centang, bukan cuma titik penuh - lebih jelas artinya "udah beres, boleh dibalikin". */ .rel li.lewat .titik{ position:relative; } .rel li.lewat .titik::after{ content:'\2713'; position:absolute; inset:0; color:#fff; font-size:9px; line-height:14px; text-align:center; font-family:'Archivo',sans-serif; font-weight:700; } /* Label langkah yang bisa diklik dibikin lebih tegas dari yang terkunci */ .tautan-langkah .nama{ font-weight:600; } .rel li.terkunci .nama{ font-weight:400; } /* ---------- Foto struk di halaman koreksi ---------- Dibikin bisa dilipat, dan defaultnya kebuka. Alasannya: pas pertama kali ngoreksi, fotonya justru yang paling dibutuhin. Begitu udah hafal, tinggal ditutup biar daftar itemnya keliatan penuh. */ .foto-struk{ margin-top:0; margin-bottom:18px; border-top:0; padding-top:0; } .foto-struk img{ display:block; width:100%; max-height:340px; object-fit:contain; object-position:top; border:1px solid var(--garis); border-radius:var(--sudut-kcl); background:#F0EDEE; margin-top:10px; } .foto-struk a{ display:block; } .foto-struk > summary{ font-weight:600; color:var(--tinta); } /* ---------- Angka yang lagi berubah ---------- Kedip maroon sekejap. Bukan biar rame, tapi biar mata langsung tau angka mana yang barusan gerak. */ .angka-ganti{ color:var(--merek) !important; transition:color .35s ease; } /* ---------- Lencana status pengisian ---------- */ .lencana-isi{ flex:0 0 auto; font-size:11px; font-weight:600; border-radius:999px; padding:2px 8px; line-height:1.6; } .lencana-isi.sendiri{ background:#E9F5F0; color:var(--lunas); border:1px solid #CDE8DD; padding:1px 6px; } .lencana-isi.kosong{ background:transparent; color:var(--pudar); border:1px dashed var(--garis); font-weight:500; } /* Jumlah item yang udah dicentang, di halaman anggota */ .chip .jml-centang{ display:inline-grid; place-items:center; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--merek); color:#fff; font-size:11px; font-weight:700; font-family:'Space Mono',monospace; } .chip .tanda-masuk{ color:var(--pudar); font-size:11px; } /* ---------- Pilihan jenis patungan ---------- Radio button aslinya disembunyiin, yang keliatan chip-nya. Dibikin grid biar lebarnya rata - kalau pakai flex-wrap, chip terakhir suka nyangkut sendirian di baris bawah dan keliatan kayak salah. */ .pilih-tipe{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:11px; } @media (max-width:359px){ .pilih-tipe{ grid-template-columns:repeat(2,1fr); } } .tipe-chip{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:10px 6px; cursor:pointer; border:1px solid var(--garis); border-radius:var(--sudut-kcl); background:var(--kartu); font-size:12px; color:var(--pudar); text-align:center; transition:border-color .15s, background .15s, color .15s; margin:0; /* nimpa margin-bottom bawaan