/* ========================================================================== KaryaInklusif — Sistem Desain -------------------------------------------------------------------------- Seluruh pasangan warna sudah diuji mencapai rasio kontras WCAG tingkat AAA (minimum 7:1 untuk teks normal) pada ketiga mode tampilan. Token dikendalikan atribut data-* pada elemen yang diisi oleh middleware di sisi server, sehingga halaman langsung tampil dalam mode yang benar tanpa menunggu JavaScript. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Token dasar -------------------------------------------------------------------------- */ :root { /* Warna — diambil dari bahan kerajinan mitra: serat anyaman pandan, celup indigo, dan tanah gerabah. */ --tinta: #141C26; /* teks utama 17.16:1 di atas kertas */ --arang: #3A4652; /* teks sekunder 9.64:1 */ --kertas: #FFFFFF; --kapur: #F5F3EF; /* latar halaman, netral hangat */ /* Warna merek diambil langsung dari logo KaryaInklusif. */ --indigo: #00407D; /* biru logo 10.35:1 */ --indigo-tua: #002F5C; /* keadaan tekan/hover 14.14:1 */ --indigo-muda: #E4EDF6; /* Latar khusus untuk pilihan yang sedang aktif. Dipisahkan dari --indigo-muda karena token itu menjadi putih pada mode kontras tinggi, sehingga penanda terpilih ikut hilang. */ --terpilih: #D8E4F0; /* Tosca logo (#009C93) hanya 3.40:1 — tidak layak untuk teks. Dipakai apa adanya pada logo, tetapi digelapkan untuk keperluan antarmuka. */ --tosca: #005853; /* turunan tosca 8.33:1 */ --tosca-muda: #E4F2F1; --tosca-murni: #009C93; /* hanya untuk hiasan non-teks */ /* Kuning logo (#FDAC00) hanya 1.90:1 — tidak pernah dipakai sebagai teks di atas latar terang, dan tidak pernah menyandikan makna sendirian. */ --kuning: #FDAC00; /* hiasan; teks di atasnya wajib hitam (11.08:1) */ --amber-teks: #674400; /* bila kuning harus jadi teks 8.74:1 */ --tanah: #823520; /* aksen kedua 8.47:1 */ --tanah-muda: #F6EAE5; --lumut: #1B5537; /* status berhasil 8.75:1 */ --lumut-muda: #E5F1EA; --garis: #C9CFD6; --garis-tegas: #8C97A3; /* Tipografi */ --huruf-judul: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --huruf-tubuh: "Source Sans 3", "Segoe UI", system-ui, sans-serif; --huruf-data: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace; /* Skala tipografi — kelipatan 1.25 (major third) */ --t-xs: 0.8rem; --t-sm: 0.9rem; --t-nor: 1rem; --t-md: 1.15rem; --t-lg: 1.45rem; --t-xl: 1.85rem; --t-2xl: 2.35rem; --t-3xl: 3rem; /* Ruang — kelipatan 4px */ --r-1: 0.25rem; --r-2: 0.5rem; --r-3: 0.75rem; --r-4: 1rem; --r-5: 1.5rem; --r-6: 2rem; --r-7: 3rem; --r-8: 4rem; /* Bentuk */ --lengkung: 10px; --lengkung-kecil: 6px; --lengkung-penuh: 999px; /* Dikendalikan profil aksesibilitas */ --skala: 1; --target: 44px; /* WCAG 2.2 AAA; ambang AA hanya 24px */ --jeda: 0.75rem; --tebal-tubuh: 400; --tebal-judul: 700; --bayang: 0 1px 2px rgba(20, 28, 38, 0.06), 0 2px 8px rgba(20, 28, 38, 0.04); } /* -------------------------------------------------------------------------- 2. Mode kontras -------------------------------------------------------------------------- */ html[data-kontras="tinggi"] { --tinta: #000000; --arang: #000000; --kertas: #FFFFFF; --kapur: #FFFFFF; --indigo: #00305C; --indigo-tua: #001F3D; --indigo-muda: #FFFFFF; --terpilih: #D6D6D6; --tosca: #003D3A; --tosca-muda: #FFFFFF; --tosca-murni: #003D3A; --kuning: #FFD400; --amber-teks: #4A3100; --tanah: #6B2110; --tanah-muda: #FFFFFF; --lumut: #00401F; --lumut-muda: #FFFFFF; --garis: #000000; --garis-tegas: #000000; --bayang: none; } html[data-kontras="gelap_tinggi"] { --tinta: #FFFFFF; --arang: #F0F0F0; --kertas: #000000; --kapur: #000000; --indigo: #FFD400; /* kuning di atas hitam: 14.67:1 */ --indigo-tua: #FFE766; --indigo-muda: #1A1500; --terpilih: #2E2500; --tosca: #5FE8DE; --tosca-muda: #001A18; --tosca-murni: #5FE8DE; --kuning: #FFD400; --amber-teks: #FFD400; --tanah: #FFAF8C; --tanah-muda: #1F0C05; --lumut: #7DFFB0; --lumut-muda: #001A0D; --garis: #FFFFFF; --garis-tegas: #FFFFFF; --bayang: none; } /* Pada mode gelap, tombol aksen memakai teks hitam agar tetap terbaca. */ html[data-kontras="gelap_tinggi"] .tombol--utama, html[data-kontras="tinggi"] .tombol--utama { color: var(--kertas); } html[data-kontras="gelap_tinggi"] .tombol--utama { color: #000000; } /* -------------------------------------------------------------------------- 3. Skala teks dan ukuran target -------------------------------------------------------------------------- */ html[data-skala-teks="125"] { --skala: 1.25; } html[data-skala-teks="150"] { --skala: 1.5; } html[data-skala-teks="175"] { --skala: 1.75; } html[data-skala-teks="200"] { --skala: 2; } html[data-ukuran-target="48"] { --target: 48px; } html[data-ukuran-target="56"] { --target: 56px; } html[data-ukuran-target="64"] { --target: 64px; } html[data-jarak-tombol="1"] { --jeda: 1.5rem; } html[data-tebal="1"] { --tebal-tubuh: 600; --tebal-judul: 800; } html[data-garis-bawah="1"] a { text-decoration: underline; } html[data-kurangi-animasi="1"] *, html[data-kurangi-animasi="1"] *::before, html[data-kurangi-animasi="1"] *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* Mode sederhana menyembunyikan elemen pelengkap yang tidak esensial. */ html[data-mode-sederhana="1"] .opsional { display: none; } /* -------------------------------------------------------------------------- 4. Dasar -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--kapur); color: var(--tinta); font-family: var(--huruf-tubuh); font-size: calc(1rem * var(--skala)); font-weight: var(--tebal-tubuh); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--huruf-judul); font-weight: var(--tebal-judul); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--r-3); text-wrap: balance; } h1 { font-size: var(--t-3xl); } h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-lg); } h4 { font-size: var(--t-md); } p { margin: 0 0 var(--r-4); max-width: 68ch; } a { color: var(--indigo); text-underline-offset: 3px; } a:hover { color: var(--indigo-tua); } /* Penanda fokus wajib terlihat jelas: syarat mutlak bagi pengguna keyboard yang tidak dapat memakai tetikus. */ :focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: var(--lengkung-kecil); } html[data-fokus-tebal="1"] :focus-visible { outline-width: 5px; outline-offset: 4px; } html[data-kontras="gelap_tinggi"] :focus-visible { outline-color: var(--indigo); } /* -------------------------------------------------------------------------- 5. Tata letak -------------------------------------------------------------------------- */ .bungkus { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: var(--r-4); } .bungkus--sempit { max-width: 44rem; } .bagian { padding-block: var(--r-7); } .tumpuk > * + * { margin-top: var(--r-4); } /* Lompat ke konten: elemen pertama yang dijangkau tombol Tab. */ .lewati { position: absolute; left: -9999px; z-index: 999; background: var(--indigo); color: #FFFFFF; padding: var(--r-3) var(--r-5); border-radius: 0 0 var(--lengkung) 0; font-weight: 700; } .lewati:focus { left: 0; top: 0; } /* -------------------------------------------------------------------------- 6. Kepala halaman -------------------------------------------------------------------------- */ .kepala { background: var(--kertas); border-bottom: 1px solid var(--garis); position: sticky; top: 0; z-index: 50; } /* Pita tipis tiga warna merek di tepi bawah kepala. Murni hiasan: tidak menyandikan informasi apa pun, sehingga aman bagi pengguna buta warna. */ .kepala::after { content: ""; display: block; height: 3px; background: linear-gradient( to right, var(--indigo) 0 22%, var(--kuning) 22% 38%, var(--tosca-murni) 38% 100% ); } .kepala__isi { display: flex; align-items: center; gap: var(--r-5); min-height: 4.5rem; flex-wrap: wrap; padding-block: var(--r-2); } /* Logo memakai berkas gambar resmi. Tingginya diikat ke skala teks agar ikut membesar bersama antarmuka pada profil low vision, dengan batas atas supaya tidak mendorong menu ke baris berikutnya. */ .merek { display: inline-flex; align-items: center; text-decoration: none; flex: none; padding-block: var(--r-2); } .merek__gambar { display: block; height: clamp(2rem, calc(2.25rem * var(--skala)), 3.5rem); width: auto; } /* Di bawah 30rem hanya ikon yang tampil, supaya menu tetap muat. */ .merek__ikon { display: none; } @media (max-width: 30rem) { .merek__penuh { display: none; } .merek__ikon { display: block; } } /* Pada mode gelap kontras tinggi, logo berwarna gelap akan tenggelam di latar hitam. Diberi alas putih dengan lengkung kecil agar tetap terbaca. */ html[data-kontras="gelap_tinggi"] .merek__gambar { background: #FFFFFF; padding: 0.25rem 0.4rem; border-radius: var(--lengkung-kecil); } .kepala__aksi { margin-left: auto; display: flex; align-items: center; gap: var(--jeda); flex-wrap: wrap; } /* -------------------------------------------------------------------------- 7. Tombol -------------------------------------------------------------------------- */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: var(--r-2); min-height: var(--target); min-width: var(--target); padding: var(--r-2) var(--r-5); font-family: var(--huruf-tubuh); font-size: var(--t-nor); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; border: 2px solid transparent; border-radius: var(--lengkung); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .tombol--utama { background: var(--indigo); border-color: var(--indigo); color: #FFFFFF; } .tombol--utama:hover { background: var(--indigo-tua); border-color: var(--indigo-tua); color: #FFFFFF; } .tombol--garis { background: var(--kertas); border-color: var(--garis-tegas); color: var(--tinta); } .tombol--garis:hover { border-color: var(--indigo); color: var(--indigo); } .tombol--polos { background: transparent; border-color: transparent; color: var(--indigo); padding-inline: var(--r-3); } .tombol--polos:hover { background: var(--indigo-muda); } .tombol--besar { font-size: var(--t-md); padding: var(--r-3) var(--r-6); } .tombol--penuh { width: 100%; } /* Keadaan terpilih ditandai dua cara sekaligus — warna dan lencana centang — agar tidak bergantung pada persepsi warna saja. */ .tombol[aria-pressed="true"] { background: var(--indigo); border-color: var(--indigo); color: #FFFFFF; } .tombol[aria-pressed="true"]::after { content: "✓"; font-weight: 700; } /* -------------------------------------------------------------------------- 8. Kartu -------------------------------------------------------------------------- */ .kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--lengkung); padding: var(--r-5); box-shadow: var(--bayang); } .kartu--rapat { padding: var(--r-4); } .kisi { display: grid; gap: var(--jeda); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); } .kisi--sempit { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } /* -------------------------------------------------------------------------- 9. Kartu produk -------------------------------------------------------------------------- */ .produk { display: flex; flex-direction: column; background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--lengkung); overflow: hidden; height: 100%; } .produk:focus-within { outline: 3px solid var(--indigo); outline-offset: 2px; } .produk__gambar { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: var(--kapur); border-bottom: 1px solid var(--garis); } .produk__isi { padding: var(--r-4); display: flex; flex-direction: column; gap: var(--r-2); flex: 1; } .produk__nama { font-family: var(--huruf-judul); font-size: var(--t-md); font-weight: 700; margin: 0; line-height: 1.25; } .produk__nama a { color: var(--tinta); text-decoration: none; } .produk__nama a:hover { color: var(--indigo); text-decoration: underline; } /* Seluruh kartu dapat diklik, tanpa mengorbankan semantik tautan. */ .produk__nama a::after { content: ""; position: absolute; inset: 0; } .produk { position: relative; } .produk__harga { font-family: var(--huruf-data); font-size: var(--t-md); font-weight: 600; color: var(--tinta); margin-top: auto; } .produk__toko { font-size: var(--t-sm); color: var(--arang); display: flex; align-items: center; gap: var(--r-2); } /* -------------------------------------------------------------------------- 10. Lencana -------------------------------------------------------------------------- */ .lencana { display: inline-flex; align-items: center; gap: var(--r-1); padding: var(--r-1) var(--r-3); border-radius: var(--lengkung-penuh); font-size: var(--t-xs); font-weight: 700; border: 1px solid currentColor; } .lencana--lumut { background: var(--lumut-muda); color: var(--lumut); } .lencana--indigo { background: var(--indigo-muda); color: var(--indigo); } .lencana--tanah { background: var(--tanah-muda); color: var(--tanah); } .lencana--tosca { background: var(--tosca-muda); color: var(--tosca); } /* -------------------------------------------------------------------------- 11. Formulir -------------------------------------------------------------------------- */ .bidang { margin-bottom: var(--r-5); } .bidang__label { display: block; font-weight: 700; margin-bottom: var(--r-2); } .bidang__petunjuk { display: block; font-size: var(--t-sm); color: var(--arang); margin-bottom: var(--r-2); } .bidang__masukan { width: 100%; min-height: var(--target); padding: var(--r-2) var(--r-3); font-family: inherit; font-size: var(--t-nor); color: var(--tinta); background: var(--kertas); border: 2px solid var(--garis-tegas); border-radius: var(--lengkung-kecil); } .bidang__masukan:focus-visible { border-color: var(--indigo); } /* Galat ditandai ikon dan teks, bukan warna saja. */ .bidang__galat { display: flex; gap: var(--r-2); margin-top: var(--r-2); color: var(--tanah); font-weight: 600; font-size: var(--t-sm); } /* -------------------------------------------------------------------------- 12. Panel aksesibilitas -------------------------------------------------------------------------- */ .a11y { background: var(--kertas); border: 2px solid var(--indigo); border-radius: var(--lengkung); padding: var(--r-5); } .a11y__pilihan { display: grid; gap: var(--jeda); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: var(--r-4); } .a11y__opsi { display: flex; flex-direction: column; align-items: flex-start; gap: var(--r-1); text-align: left; min-height: var(--target); padding: var(--r-4); background: var(--kertas); border: 2px solid var(--garis-tegas); border-radius: var(--lengkung); cursor: pointer; font-family: inherit; color: var(--tinta); } .a11y__opsi:hover { border-color: var(--indigo); } .a11y__opsi[aria-pressed="true"] { position: relative; border-color: var(--indigo); background: var(--terpilih); border-width: 3px; padding-left: calc(var(--r-4) + 6px); } /* Batang tebal di tepi kiri. Penanda ketiga di samping warna dan centang, sehingga pilihan aktif tetap terlihat meski warnanya sulit dibedakan. */ .a11y__opsi[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--indigo); } .a11y__opsi[aria-pressed="true"] .a11y__judul::after { content: " ✓"; color: var(--indigo); } .a11y__judul { font-weight: 700; font-size: var(--t-nor); } .a11y__ket { font-size: var(--t-sm); color: var(--arang); line-height: 1.4; } /* -------------------------------------------------------------------------- 13. Tabel -------------------------------------------------------------------------- */ .tabel { width: 100%; border-collapse: collapse; } .tabel caption { text-align: left; color: var(--arang); font-size: var(--t-sm); padding-bottom: var(--r-3); } .tabel th, .tabel td { text-align: left; padding: var(--r-3); border-bottom: 1px solid var(--garis); } .tabel th { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--arang); border-bottom: 2px solid var(--garis-tegas); } .tabel td { vertical-align: top; } .angka { font-family: var(--huruf-data); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------------- 14. Kaki halaman -------------------------------------------------------------------------- */ .kaki { background: var(--kertas); border-top: 1px solid var(--garis); padding-block: var(--r-6); margin-top: var(--r-8); font-size: var(--t-sm); color: var(--arang); } /* -------------------------------------------------------------------------- 15. Utilitas -------------------------------------------------------------------------- */ .hanya-pembaca-layar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .eyebrow { font-family: var(--huruf-data); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--tosca); font-weight: 600; margin-bottom: var(--r-2); display: block; } .lembut { color: var(--arang); } .kecil { font-size: var(--t-sm); } .tengah { text-align: center; } .baris { display: flex; align-items: center; gap: var(--jeda); flex-wrap: wrap; } @media (max-width: 40rem) { :root { --t-3xl: 2.15rem; --t-2xl: 1.75rem; --t-xl: 1.45rem; } .bagian { padding-block: var(--r-6); } } /* -------------------------------------------------------------------------- 16. Komponen formulir lanjutan -------------------------------------------------------------------------- */ fieldset.kartu { border: 1px solid var(--garis); } .kartu__legenda { font-family: var(--huruf-judul); font-size: var(--t-md); font-weight: 700; padding-inline: var(--r-2); display: flex; align-items: center; gap: var(--r-2); } /* Nomor langkah. Dipakai hanya pada formulir yang benar-benar berurutan, sehingga angkanya menyampaikan informasi, bukan sekadar hiasan. */ .langkah { display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; border-radius: var(--lengkung-penuh); background: var(--indigo); color: #FFFFFF; font-family: var(--huruf-data); font-size: 0.8em; font-weight: 600; flex: none; } html[data-kontras="gelap_tinggi"] .langkah { color: #000000; } .wajib { color: var(--tanah); font-weight: 700; } textarea.bidang__masukan { min-height: 5rem; resize: vertical; line-height: 1.6; } select.bidang__masukan { cursor: pointer; } input[type="file"].bidang__masukan { padding: var(--r-3); cursor: pointer; } .dua-kolom { display: grid; gap: var(--jeda); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); } /* Kotak centang dan radio diperbesar mengikuti profil aksesibilitas. */ .pilihan { display: flex; align-items: center; gap: var(--r-3); min-height: var(--target); cursor: pointer; } .pilihan input[type="checkbox"], .pilihan input[type="radio"] { width: 1.5rem; height: 1.5rem; accent-color: var(--indigo); flex: none; cursor: pointer; } /* Pilihan berbentuk kartu besar: sasaran sentuh jauh lebih lebar daripada radio biasa, sehingga lebih mudah bagi pengguna dengan hambatan motorik. */ .pilihan-besar { display: grid; gap: var(--jeda); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .pilihan-besar__opsi { display: flex; align-items: flex-start; gap: var(--r-3); padding: var(--r-4); background: var(--kertas); border: 2px solid var(--garis-tegas); border-radius: var(--lengkung); cursor: pointer; min-height: var(--target); } .pilihan-besar__opsi:hover { border-color: var(--indigo); } .pilihan-besar__opsi input { width: 1.5rem; height: 1.5rem; margin-top: 0.15rem; accent-color: var(--indigo); flex: none; cursor: pointer; } /* Keadaan terpilih ditandai border tebal dan latar, bukan warna saja. */ .pilihan-besar__opsi:has(input:checked) { border-color: var(--indigo); border-width: 3px; background: var(--terpilih); padding: calc(var(--r-4) - 1px); } .pilihan-besar__opsi:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 3px; } .pilihan-besar__isi { display: flex; flex-direction: column; gap: var(--r-1); } .pilihan-besar__judul { font-weight: 700; } .pilihan-besar__ket { font-size: var(--t-sm); color: var(--arang); line-height: 1.4; } /* -------------------------------------------------------------------------- 17. Pesan hasil tindakan -------------------------------------------------------------------------- */ .kabar { display: flex; gap: var(--r-3); padding: var(--r-4); border: 2px solid; border-radius: var(--lengkung); margin-bottom: var(--r-5); } .kabar p { margin: 0 0 var(--r-2); } .kabar p:last-child, .kabar ul:last-child { margin-bottom: 0; } .kabar ul { margin: 0; padding-left: var(--r-5); } .kabar > span { font-size: var(--t-md); font-weight: 700; flex: none; } .kabar--berhasil { background: var(--lumut-muda); border-color: var(--lumut); color: var(--lumut); } .kabar--galat { background: var(--tanah-muda); border-color: var(--tanah); color: var(--tanah); } /* -------------------------------------------------------------------------- 18. Daftar langkah persiapan -------------------------------------------------------------------------- */ .langkah-daftar { list-style: none; padding: 0; margin: 0; } .langkah-daftar__item { display: flex; align-items: center; gap: var(--r-4); padding: var(--r-4); background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--lengkung); margin-bottom: var(--jeda); flex-wrap: wrap; } .langkah-daftar__tanda { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--lengkung-penuh); font-weight: 700; flex: none; } .langkah-daftar__item.sudah .langkah-daftar__tanda { background: var(--lumut-muda); color: var(--lumut); border: 2px solid var(--lumut); } .langkah-daftar__item.belum .langkah-daftar__tanda { background: var(--kapur); color: var(--arang); border: 2px solid var(--garis-tegas); } .langkah-daftar__isi { flex: 1; min-width: 12rem; } .langkah-daftar__judul { font-weight: 600; } .langkah-daftar__item.sudah .langkah-daftar__judul { color: var(--arang); } /* -------------------------------------------------------------------------- 19. Tombol bahaya dan keadaan kosong -------------------------------------------------------------------------- */ .tombol--bahaya { background: var(--tanah); border-color: var(--tanah); color: #FFFFFF; } .tombol--bahaya:hover { background: #5F2718; border-color: #5F2718; color: #FFFFFF; } html[data-kontras="gelap_tinggi"] .tombol--bahaya { color: #000000; } .produk__kosong { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--r-2); aspect-ratio: 4 / 3; background: var(--kapur); border: 1px dashed var(--garis-tegas); border-radius: var(--lengkung-kecil); color: var(--arang); } /* Penomoran halaman bawaan Laravel */ .pagination { display: flex; gap: var(--r-2); list-style: none; padding: 0; flex-wrap: wrap; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); padding-inline: var(--r-3); border: 2px solid var(--garis-tegas); border-radius: var(--lengkung-kecil); text-decoration: none; color: var(--tinta); } .pagination .active span { background: var(--indigo); border-color: var(--indigo); color: #FFFFFF; } /* -------------------------------------------------------------------------- 20. Katalog -------------------------------------------------------------------------- */ /* Baris penyaring. Membungkus ke bawah pada layar sempit maupun saat teks diperbesar, sehingga tidak ada kendali yang terpotong. */ .saring { display: flex; flex-wrap: wrap; gap: var(--jeda); align-items: flex-end; } /* Remah jejak */ .remah { margin-bottom: var(--r-5); } .remah ol { display: flex; flex-wrap: wrap; gap: var(--r-2); list-style: none; margin: 0; padding: 0; font-size: var(--t-sm); } .remah li { display: flex; align-items: center; gap: var(--r-2); } .remah li + li::before { content: "›"; color: var(--arang); } .remah [aria-current="page"] { color: var(--arang); } /* Halaman rincian produk */ .produk-rinci { display: grid; gap: var(--r-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; } .produk-rinci__gambar { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--garis); border-radius: var(--lengkung); background: var(--kapur); } .produk-rinci__harga { font-size: var(--t-xl); font-weight: 600; margin: 0 0 var(--r-4); } /* Daftar rincian: memakai dl agar hubungan istilah dan nilainya terbaca pembaca layar, bukan sekadar dua kolom visual. */ .rincian { margin: var(--r-5) 0 0; display: grid; gap: var(--r-3); } .rincian > div { display: flex; gap: var(--r-4); padding-bottom: var(--r-3); border-bottom: 1px solid var(--garis); flex-wrap: wrap; } .rincian dt { font-weight: 700; min-width: 7rem; flex: none; } .rincian dd { margin: 0; color: var(--arang); } /* -------------------------------------------------------------------------- 21. Keranjang -------------------------------------------------------------------------- */ .keranjang-tautan { position: relative; } .keranjang-tautan__jumlah { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6em; height: 1.6em; padding-inline: 0.35em; margin-left: var(--r-2); border-radius: var(--lengkung-penuh); background: var(--indigo); color: #FFFFFF; font-family: var(--huruf-data); font-size: 0.8em; font-weight: 600; } html[data-kontras="gelap_tinggi"] .keranjang-tautan__jumlah { color: #000000; } /* Satu baris produk di keranjang. Membungkus ke bawah pada layar sempit atau saat teks diperbesar, sehingga tidak ada kendali yang terpotong. */ .keranjang__baris { display: flex; align-items: center; gap: var(--jeda); flex-wrap: wrap; padding: var(--r-4) 0; border-bottom: 1px solid var(--garis); } .keranjang__baris:last-of-type { border-bottom: 0; } .keranjang__gambar { width: 6rem; height: 6rem; object-fit: cover; border-radius: var(--lengkung-kecil); border: 1px solid var(--garis); flex: none; } .keranjang__isi { flex: 1 1 12rem; min-width: 10rem; } .keranjang__jumlah { display: flex; align-items: center; gap: var(--r-2); flex: none; } .keranjang__subtotal { font-weight: 600; min-width: 7rem; text-align: right; margin: 0; flex: none; } .tengah-kanan { text-align: right; } /* Tombol yang belum berfungsi ditandai jelas, bukan sekadar diredupkan. */ [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } @media (max-width: 40rem) { .keranjang__subtotal { text-align: left; min-width: 0; } .tengah-kanan { text-align: left; } } /* -------------------------------------------------------------------------- 22. Checkout dan pesanan -------------------------------------------------------------------------- */ /* Formulir di kiri, ringkasan biaya di kanan. Menumpuk pada layar sempit maupun saat teks diperbesar, dengan ringkasan tetap di bawah formulir. */ .checkout { display: grid; gap: var(--r-5); grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; } .checkout__ringkas { position: sticky; top: 6rem; background: var(--kapur); } /* Ringkasan tidak lagi menempel bila ruang vertikal sempit atau teks besar, agar tidak menutupi isi halaman. */ @media (max-width: 60rem), (max-height: 40rem) { .checkout { grid-template-columns: 1fr; } .checkout__ringkas { position: static; } } html[data-skala-teks="150"] .checkout, html[data-skala-teks="175"] .checkout, html[data-skala-teks="200"] .checkout { grid-template-columns: 1fr; } html[data-skala-teks="150"] .checkout__ringkas, html[data-skala-teks="175"] .checkout__ringkas, html[data-skala-teks="200"] .checkout__ringkas { position: static; } /* -------------------------------------------------------------------------- 23. Pemilih kota dengan pencarian -------------------------------------------------------------------------- */ .cari-kota { margin-bottom: var(--r-2); } /* Ikon silang bawaan peramban pada input pencarian dibiarkan, karena berguna untuk mengosongkan saringan dengan sekali tekan. */ .cari-kota input[type="search"] { margin-bottom: var(--r-2); } .cari-kota p { margin: 0; min-height: 1.4em; } /* Saat daftar dibuka lebar oleh hasil pencarian, tiap barisnya diberi ruang agar tetap mudah ditekan pada profil tuna daksa. */ select[data-daftar-kota][size]:not([size="1"]) option { padding: var(--r-2) var(--r-3); } /* -------------------------------------------------------------------------- 24. Panel pengurus -------------------------------------------------------------------------- */ /* Isi pesan WhatsApp ditampilkan apa adanya, termasuk baris barunya, supaya pengurus melihat persis yang diterima penerima. */ .pesan-isi { margin: var(--r-3) 0 0; padding: var(--r-4); background: var(--kapur); border: 1px solid var(--garis); border-radius: var(--lengkung-kecil); font-family: var(--huruf-tubuh); font-size: var(--t-sm); line-height: 1.6; white-space: pre-wrap; word-break: break-word; } details > summary { font-weight: 600; color: var(--indigo); } details > summary:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; } code { background: var(--kapur); border: 1px solid var(--garis); border-radius: var(--lengkung-kecil); padding: 0.1em 0.4em; font-family: var(--huruf-data); font-size: 0.9em; } /* Ringkasan galat menerima fokus lewat skrip; penanda fokusnya tetap ditampilkan agar pengguna papan ketik tahu di mana posisinya. */ #kotak-galat:focus, #kotak-galat:focus-visible { outline: 4px solid var(--tanah); outline-offset: 3px; } /* -------------------------------------------------------------------------- 26. Pemilih ikon kategori -------------------------------------------------------------------------- */ .ikon { flex: none; vertical-align: middle; } .pilih-ikon { display: grid; gap: var(--jeda); grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); } /* Tiap pilihan berbentuk kartu, bukan radio kecil, agar sasaran sentuhnya lebar — sama seperti pilihan besar di formulir lain. */ .pilih-ikon__opsi { display: flex; align-items: flex-start; gap: var(--r-3); padding: var(--r-4); min-height: var(--target); background: var(--kertas); border: 2px solid var(--garis-tegas); border-radius: var(--lengkung); cursor: pointer; } .pilih-ikon__opsi:hover { border-color: var(--indigo); } .pilih-ikon__opsi input { width: 1.25rem; height: 1.25rem; accent-color: var(--indigo); flex: none; cursor: pointer; } /* Keadaan terpilih ditandai border tebal dan latar khusus, sama seperti komponen pilihan lain. */ .pilih-ikon__opsi:has(input:checked) { border-color: var(--indigo); border-width: 3px; background: var(--terpilih); padding: calc(var(--r-4) - 1px); } .pilih-ikon__opsi:has(input:focus-visible) { outline: 3px solid var(--indigo); outline-offset: 3px; } /* Susunan menurun: ikon di atas, nama di bawah. Dengan begitu nama kategori mendapat lebar penuh kartu dan tidak terpecah menjadi satu huruf per baris. */ .pilih-ikon__isi { display: flex; flex-direction: column; align-items: center; gap: var(--r-2); text-align: center; min-width: 0; flex: 1; } /* Ikon diperbesar agar benar-benar berfungsi sebagai panduan visual, bukan sekadar hiasan kecil di samping teks. */ .pilih-ikon__gambar { display: inline-flex; align-items: center; justify-content: center; width: 2.75em; height: 2.75em; flex: none; color: var(--indigo); } .pilih-ikon__nama { font-size: var(--t-sm); line-height: 1.35; /* Pemenggalan hanya pada batas kata, bukan di tengah kata. */ word-break: normal; overflow-wrap: break-word; hyphens: none; } /* Tombol yang dinonaktifkan ditandai jelas, bukan sekadar diredupkan. */ .tombol[disabled] { opacity: 0.55; cursor: not-allowed; } /* -------------------------------------------------------------------------- 27. Kotak pengaturan tampilan -------------------------------------------------------------------------- */ .dialog { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 4rem); padding: var(--r-5); background: var(--kertas); color: var(--tinta); border: 3px solid var(--indigo); border-radius: var(--lengkung); overflow: auto; } /* Latar gelap di belakang kotak. */ .dialog::backdrop { background: rgba(0, 0, 0, 0.55); } html[data-kontras="gelap_tinggi"] .dialog::backdrop { background: rgba(0, 0, 0, 0.85); } .dialog__kepala { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--r-4); margin-bottom: var(--r-3); } /* Tombol tutup mengikuti ukuran sasaran sentuh pada profil aksesibilitas, sama seperti tombol lain. */ .dialog__tutup { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); font-size: var(--t-md); line-height: 1; color: var(--tinta); background: transparent; border: 2px solid var(--garis-tegas); border-radius: var(--lengkung-kecil); cursor: pointer; } .dialog__tutup:hover { border-color: var(--tanah); color: var(--tanah); } /* Tombol pembuka menyusun ikon dan teks berdampingan. */ [data-buka-tampilan] { display: inline-flex; align-items: center; gap: var(--r-2); } /* -------------------------------------------------------------------------- 28. Profil disleksia -------------------------------------------------------------------------- Disleksia menyulitkan pengenalan bentuk huruf, bukan penglihatannya. Karena itu penanganannya berbeda dari low vision. Catatan tentang pilihan huruf: banyak situs memakai huruf khusus disleksia, namun bukti penelitiannya lemah — beberapa uji terkontrol tidak menemukan peningkatan kecepatan membaca dibanding huruf biasa yang dirancang baik. Yang terbukti membantu justru jarak antarhuruf, jarak antarbaris, dan lebar baris. Karena itu di sini dipakai huruf tanpa kait yang bentuknya jelas berbeda antara huruf mirip, dengan jarak yang dilonggarkan. -------------------------------------------------------------------------- */ html[data-huruf-mudah="1"] body, html[data-huruf-mudah="1"] .bidang__masukan, html[data-huruf-mudah="1"] .tombol { font-family: "Atkinson Hyperlegible", "Verdana", "Tahoma", system-ui, sans-serif; letter-spacing: 0.06em; word-spacing: 0.14em; } /* Judul ikut memakai huruf yang sama; Bricolage Grotesque memiliki bentuk yang lebih berkarakter tetapi lebih sulit dibedakan. */ html[data-huruf-mudah="1"] h1, html[data-huruf-mudah="1"] h2, html[data-huruf-mudah="1"] h3, html[data-huruf-mudah="1"] h4, html[data-huruf-mudah="1"] .kartu__legenda, html[data-huruf-mudah="1"] .merek__nama { font-family: "Atkinson Hyperlegible", "Verdana", "Tahoma", system-ui, sans-serif; letter-spacing: 0.01em; } /* Huruf miring sulit dibaca pada disleksia karena bentuknya berubah. */ html[data-huruf-mudah="1"] em, html[data-huruf-mudah="1"] i { font-style: normal; font-weight: 700; } /* Jarak antarbaris */ html[data-jarak-baris="175"] body { line-height: 1.75; } html[data-jarak-baris="200"] body { line-height: 2; } html[data-jarak-baris="225"] body { line-height: 2.25; } /* Baris teks dibatasi agar mata mudah menemukan awal baris berikutnya. Sekitar 60 huruf per baris adalah rentang yang umum disarankan. */ html[data-baris-pendek="1"] p, html[data-baris-pendek="1"] li, html[data-baris-pendek="1"] dd, html[data-baris-pendek="1"] .bidang__petunjuk, html[data-baris-pendek="1"] .a11y__ket { max-width: 58ch; } html[data-baris-pendek="1"] h1, html[data-baris-pendek="1"] h2, html[data-baris-pendek="1"] h3 { max-width: 32ch; } /* Teks rata kiri, tidak rata kanan-kiri. Perataan penuh menciptakan celah antarkata yang tidak seragam dan mengganggu alur membaca. */ html[data-baris-pendek="1"] p { text-align: left; } /* -------------------------------------------------------------------------- 29. Tombol bacakan teks -------------------------------------------------------------------------- */ .bacakan { display: inline-flex; align-items: center; gap: var(--r-2); min-height: var(--target); padding: var(--r-2) var(--r-4); font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--indigo); background: var(--kertas); border: 2px solid var(--indigo); border-radius: var(--lengkung); cursor: pointer; } .bacakan:hover { background: var(--indigo-muda); } .bacakan[aria-pressed="true"] { background: var(--indigo); color: var(--kertas); } html[data-kontras="gelap_tinggi"] .bacakan[aria-pressed="true"] { color: #000000; } /* -------------------------------------------------------------------------- 30. Kartu profil aksesibilitas -------------------------------------------------------------------------- Ikon dan keterangan sasaran ditambahkan agar pengguna mengenali profil mana yang sesuai kebutuhannya, tanpa harus menafsirkan istilah teknis seperti "low vision" atau "tuna daksa". -------------------------------------------------------------------------- */ .a11y__opsi { flex-direction: row; align-items: flex-start; gap: var(--r-3); } .profil__gambar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.6em; height: 2.6em; color: var(--indigo); } .profil__teks { display: flex; flex-direction: column; gap: var(--r-1); min-width: 0; text-align: left; } /* Keterangan sasaran ditulis lebih tegas daripada penjelasan teknis di bawahnya, karena inilah yang menentukan pilihan pengguna. */ .profil__sasaran { font-size: var(--t-sm); font-weight: 700; color: var(--tosca); } .a11y__opsi[aria-pressed="true"] .profil__gambar { color: var(--indigo); } /* Pada kartu terpilih, latarnya lebih gelap sehingga tosca biasa hanya mencapai 6,46:1. Dipakai turunan yang lebih gelap agar tetap AAA. */ .a11y__opsi[aria-pressed="true"] .profil__sasaran { color: #004744; } html[data-kontras="tinggi"] .a11y__opsi[aria-pressed="true"] .profil__sasaran { color: var(--tosca); } html[data-kontras="gelap_tinggi"] .a11y__opsi[aria-pressed="true"] .profil__sasaran { color: var(--tosca); } /* -------------------------------------------------------------------------- 31. Isian kata sandi dengan tombol lihat di dalamnya -------------------------------------------------------------------------- */ /* Kotak pembungkus yang memikul border, bukan inputnya. Dengan begitu tombol mata dapat diletakkan di dalam tanpa merusak bentuk isian. */ .sandi { display: flex; align-items: center; background: var(--kertas); border: 2px solid var(--garis-tegas); border-radius: var(--lengkung-kecil); } /* Input kehilangan border sendiri karena sudah dipikul pembungkusnya. */ .sandi .bidang__masukan { flex: 1; min-width: 0; border: 0; background: transparent; border-radius: 0; } /* Fokus dipindahkan ke pembungkus, sehingga penanda fokus melingkupi kotak beserta tombolnya — bukan hanya bagian isiannya saja. */ .sandi .bidang__masukan:focus-visible { outline: none; } .sandi:focus-within { outline: 3px solid var(--indigo); outline-offset: 3px; border-color: var(--indigo); } html[data-fokus-tebal="1"] .sandi:focus-within { outline-width: 5px; outline-offset: 4px; } /* Ukuran tombol tetap mengikuti profil aksesibilitas, sama seperti tombol lain, meski letaknya di dalam kotak. */ .sandi__lihat { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); margin: 2px; padding: 0 var(--r-3); background: transparent; color: var(--arang); border: 0; border-radius: var(--lengkung-kecil); cursor: pointer; } .sandi__lihat:hover { color: var(--indigo); background: var(--indigo-muda); } .sandi__lihat:focus-visible { outline: 3px solid var(--indigo); outline-offset: -3px; } .sandi__lihat svg { width: 1.4em; height: 1.4em; display: block; } /* Atribut hidden harus selalu menang atas display apa pun. Tanpa ini, elemen ber-hidden yang induknya memakai flex atau grid tetap tampil. */ [hidden] { display: none !important; } /* -------------------------------------------------------------------------- 32. Panduan visual bergambar -------------------------------------------------------------------------- TOR meminta alur yang dilengkapi panduan visual bergambar, agar dapat dioperasikan mandiri oleh anggota difabel meskipun memiliki keterbatasan literasi digital. Ikon dan contoh gambar di sini menjalankan peran itu — bukan sekadar hiasan. -------------------------------------------------------------------------- */ /* Ikon pada judul kelompok isian */ .kartu__legenda .ikon { color: var(--indigo); flex: none; } /* Ikon pada daftar langkah persiapan toko */ .langkah-daftar__ikon { display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--indigo); } .langkah-daftar__item.sudah .langkah-daftar__ikon { color: var(--arang); } /* --- Panduan foto --------------------------------------------------------- */ .panduan { border: 2px solid var(--garis); border-radius: var(--lengkung); background: var(--kapur); margin-bottom: var(--r-5); } .panduan__buka { display: flex; align-items: center; gap: var(--r-2); min-height: var(--target); padding: var(--r-3) var(--r-4); font-weight: 600; color: var(--indigo); cursor: pointer; } .panduan__isi { padding: 0 var(--r-4) var(--r-4); } /* Contoh baik dan buruk diletakkan berdampingan agar perbedaannya langsung terlihat tanpa perlu membaca keterangannya. */ .panduan__pasangan { display: grid; gap: var(--jeda); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); margin-bottom: var(--r-4); } .panduan__contoh { margin: 0; padding: var(--r-3); background: var(--kertas); border: 2px solid var(--garis); border-radius: var(--lengkung-kecil); } .panduan__contoh--baik { border-color: var(--lumut); } .panduan__contoh--buruk { border-color: var(--tanah); } .panduan__contoh svg { width: 100%; height: auto; display: block; border-radius: var(--lengkung-kecil); margin-bottom: var(--r-3); } .panduan__contoh figcaption { font-size: var(--t-sm); line-height: 1.5; color: var(--arang); } .panduan__contoh figcaption strong { color: var(--tinta); } /* Tanda benar dan salah ditulis sebagai lambang, bukan warna saja, agar tetap terbaca oleh pengguna yang sulit membedakan warna. */ .panduan__tanda { display: inline-flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; margin-right: var(--r-1); border-radius: var(--lengkung-penuh); font-weight: 700; border: 2px solid currentColor; } .panduan__tanda--baik { color: var(--lumut); background: var(--lumut-muda); } .panduan__tanda--buruk { color: var(--tanah); background: var(--tanah-muda); } .panduan__langkah { margin: 0; padding-left: var(--r-5); font-size: var(--t-sm); line-height: 1.6; } .panduan__langkah li { margin-bottom: var(--r-2); } /* --- Alur bergambar pada halaman panduan ---------------------------------- */ .alur { list-style: none; padding: 0; margin: 0; counter-reset: langkah; } .alur__langkah { position: relative; display: flex; gap: var(--r-4); padding: var(--r-5); background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--lengkung); margin-bottom: var(--jeda); } /* Nomor langkah dipakai karena urutannya memang bermakna: langkah berikutnya tidak dapat dikerjakan sebelum yang sebelumnya selesai. */ .alur__nomor { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; border-radius: var(--lengkung-penuh); background: var(--indigo); color: #FFFFFF; font-family: var(--huruf-data); font-weight: 600; } html[data-kontras="gelap_tinggi"] .alur__nomor { color: #000000; } .alur__isi { display: flex; gap: var(--r-4); flex-wrap: wrap; flex: 1; min-width: 0; } .alur__gambar { flex: none; display: inline-flex; align-items: flex-start; justify-content: center; color: var(--indigo); } .alur__isi > div { flex: 1; min-width: 12rem; } /* -------------------------------------------------------------------------- 33. Mode pendamping -------------------------------------------------------------------------- Ditampilkan menonjol agar pendamping selalu sadar sedang bertindak atas nama toko yang mana — mencegah produk atau pesanan tercatat pada toko yang keliru. -------------------------------------------------------------------------- */ .pendamping-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--jeda); padding: var(--r-4); margin-bottom: var(--r-5); background: var(--tosca-muda); border: 2px solid var(--tosca); border-radius: var(--lengkung); } .pendamping-bar__label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-3); margin: 0; max-width: none; } .pendamping-bar__pilih { display: flex; flex-wrap: wrap; align-items: center; gap: var(--r-2); } /* --- Kode QR bot ---------------------------------------------------------- */ .bot-qr { margin: var(--r-4) 0; padding: var(--r-4); background: #FFFFFF; border: 2px solid var(--garis); border-radius: var(--lengkung); display: inline-block; text-align: center; } /* Latar QR selalu putih, bahkan pada mode gelap, karena kamera memerlukan kontras hitam-putih untuk membacanya. */ .bot-qr img { display: block; width: 16.5rem; max-width: 100%; height: auto; image-rendering: pixelated; margin-bottom: var(--r-3); } .bot-qr figcaption { max-width: 16.5rem; } /* -------------------------------------------------------------------------- 34. Kepala halaman pada layar sempit -------------------------------------------------------------------------- Sebelumnya setiap tombol turun sendiri-sendiri karena flex-wrap, sehingga menu menumpuk lima baris di ponsel. Kini navigasi menjadi satu baris yang dapat digulir mendatar bila tidak muat. -------------------------------------------------------------------------- */ @media (max-width: 48rem) { .kepala__isi { gap: var(--r-3); min-height: auto; padding-block: var(--r-3); } /* Logo dan navigasi tetap bersebelahan. */ .merek { flex: 0 0 auto; } .kepala__aksi { width: 100%; margin-left: 0; flex-wrap: nowrap; overflow-x: auto; gap: var(--r-2); /* Ruang bawah untuk bilah gulir, agar tidak menutupi tombol. */ padding-bottom: var(--r-2); /* Menggulir berhenti tepat di tiap tombol. */ scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .kepala__aksi > * { flex: 0 0 auto; scroll-snap-align: start; } /* Tombol dirapatkan agar lebih banyak yang terlihat sekaligus, tanpa mengurangi tinggi sasaran sentuh. */ .kepala__aksi .tombol { padding-inline: var(--r-3); font-size: var(--t-sm); white-space: nowrap; } .kepala__aksi .tombol--besar { padding-inline: var(--r-4); font-size: var(--t-nor); } /* Nama pengguna disembunyikan; sudah terlihat di panel masing-masing. */ .kepala__aksi > .kecil.lembut { display: none; } } /* Pada layar sangat sempit, teks tombol "Atur tampilan" disingkat menjadi ikonnya saja agar menu tetap terjangkau. */ @media (max-width: 26rem) { [data-buka-tampilan] { padding-inline: var(--r-3); } }