, bukan span penyebabnya. */ .baris-kanan { margin-left: auto; font-weight: 600; font-size: var(--t-kecil); text-align: right; min-width: 0; overflow-wrap: anywhere; } .baris-kanan.angka { font-weight: 600; } a.baris { text-decoration: none; } a.baris:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 12. TABEL, GARIS MENDATAR SAJA, tinggi baris 48px (DESIGN.md). Di bawah 768px tabel lebar tetap bisa digulir mendatar di dalam kotaknya sendiri; halamannya TIDAK ikut bergeser. -------------------------------------------------------------------------- */ .tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); /* WAJIB. Lihat komentar panjang di atas: tanpa ini .hanya-layar-baca di dalam tabel lolos dari pangkasan overflow dan menarik lebar dokumen sampai 263px melewati layar 390px. */ position: relative; } table { border-collapse: collapse; width: 100%; font-size: var(--t-kecil); } th, td { text-align: left; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis); height: 48px; } th { font-weight: 700; background: var(--sentuh); white-space: nowrap; } /* 14,94:1 */ /* Angka lajur dua dan seterusnya dibandingkan lawan lajur → tabular. */ td:not(:first-child) { font-variant-numeric: tabular-nums; } tr:last-child td { border-bottom: 0; } /* Tabel rute: kolom "Mulai dari" ditebalkan supaya angka yang dicari pengirim menonjol tanpa harus diwarnai. Baris subjudul kelompok (Domestik / Internasional) memakai th yang membentang penuh, jadi kelompoknya terbaca pembaca layar juga. */ .tabel-rute td:nth-child(5) { font-weight: 600; } .tabel-rute th[colspan] { background: var(--sentuh); text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-label); } caption { caption-side: top; text-align: left; padding: var(--r3) var(--r4); font-size: var(--t-kecil); color: var(--redup); } /* ----------------------------------------------------------------------------- 13. CAROUSEL GESER, kartu berikutnya mengintip, ada titik indikator -------------------------------------------------------------------------- */ .carousel { display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 320px); gap: var(--r4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--r3); scrollbar-width: thin; /* Geser mendatar ditangkap carousel, gulir tegak halaman tetap jalan. */ touch-action: pan-y; } .carousel > * { scroll-snap-align: start; } @media (min-width: 900px) { .carousel { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0,1fr)); overflow: visible; scroll-snap-type: none; } } .titik { display: flex; gap: var(--r2); justify-content: center; margin-top: var(--r3); } .titik span { width: 6px; height: 6px; border-radius: 50%; background: var(--garis-kendali); opacity: .35; } .titik span[data-aktif="ya"] { opacity: 1; width: 18px; border-radius: 3px; } @media (min-width: 900px) { .titik { display: none; } } /* ----------------------------------------------------------------------------- 14. TIMELINE, tegak di mobile, mendatar di layar lebar. ⚠️ Paket ini TIDAK memakai timeline mendatar sama sekali. Yang dibutuhkan riwayat pelacakan enam langkah yang SELALU tegak (halaman /lacak), karena urutannya kronologis dan tiap langkah membawa tanggal, jam, judul, dan keterangan, empat baris yang tidak pernah muat di satu kolom mendatar. Kelasnya .timeline-tegak di bagian 36; .timeline mendatar dibiarkan utuh supaya struktur berkas tetap sebangun dengan situs 01–05. -------------------------------------------------------------------------- */ .timeline { position: relative; padding-left: 44px; } .timeline::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--garis); } .langkah { position: relative; padding-bottom: var(--r5); } .langkah:last-child { padding-bottom: 0; } .langkah-nomor { position: absolute; left: -44px; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--aksen); color: #fff; /* 5,01:1 */ font-family: var(--f-judul); font-weight: 700; font-size: var(--t-kecil); } .langkah h3 { font-size: 1.0625rem; } .langkah p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); } @media (min-width: 900px) { .timeline { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: var(--r5) var(--r4); padding-left: 0; } .timeline::before { display: none; } /* diganti border per langkah */ .langkah { padding: calc(var(--r5) + 16px) 0 0; border-top: 2px solid var(--garis); } .langkah-nomor { left: 0; top: -16px; } } /* ----------------------------------------------------------------------------- 15. AKORDEON FAQ,

asli, jadi tetap bisa dibuka tanpa JavaScript -------------------------------------------------------------------------- */ .faq { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } .faq details { border-bottom: 1px solid var(--garis); } .faq details:last-child { border-bottom: 0; } .faq summary { display: flex; align-items: center; gap: var(--r3); cursor: pointer; min-height: 56px; padding: var(--r3) var(--r4); font-weight: 600; font-size: var(--t-kecil); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary .ikon { margin-left: auto; transition: transform .2s ease; } .faq details[open] summary .ikon { transform: rotate(180deg); } .faq .jawab { padding: 0 var(--r4) var(--r4); color: var(--redup); font-size: var(--t-kecil); } /* ----------------------------------------------------------------------------- 16. FORMULIR, border kendali WAJIB --garis-kendali (5,80:1), bukan --garis (1,17:1) -------------------------------------------------------------------------- */ .bidang { display: block; margin-bottom: var(--r4); } .bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 600; margin-bottom: var(--r2); } .kolom { width: 100%; min-height: 48px; padding: var(--r3); /* 16px WAJIB: di bawah itu Safari iOS ikut memperbesar layar saat kolom difokus. */ font-size: var(--t-isi); font-family: var(--f-isi); color: var(--tinta); background: var(--kertas); border: 1px solid var(--garis-kendali); border-radius: var(--radius); } .kolom::placeholder { color: #6B7280; } /* 4,83:1 di atas --kertas */ textarea.kolom { min-height: 120px; resize: vertical; } .bantuan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); } .bantuan-galat { color: var(--galat); font-weight: 600; } /* 6,54:1 di atas --kertas */ .bantuan-sukses { color: var(--sukses); font-weight: 600; } /* 6,54:1 di atas --kertas */ .kolom[aria-invalid="true"] { border-color: var(--galat); border-width: 2px; } .kolom[disabled] { background: var(--nonaktif); color: var(--redup); cursor: not-allowed; } /* Radio sebaris (W14: tiga pilihan dalam satu baris), target sentuh 48px penuh, dan yang terpilih ditandai border DAN alas, bukan warna titik saja. */ .pilihan { display: grid; gap: var(--r2); } @media (min-width: 640px) { .pilihan { grid-auto-flow: column; grid-auto-columns: 1fr; } } .pilihan label { display: flex; align-items: center; gap: var(--r2); min-height: 48px; padding: var(--r2) var(--r3); border: 1px solid var(--garis-kendali); border-radius: var(--radius); background: var(--kertas); font-size: var(--t-kecil); cursor: pointer; } /* accent-color menggambar isian kendali DAN centangnya PUTIH. Di paket ini itu justru pasangan yang benar: putih di atas merah 5,01:1. Kebalikan situs 06. */ .pilihan input { width: 20px; height: 20px; accent-color: var(--aksen); flex: none; } .pilihan label:has(input:checked) { border-color: var(--aksen); border-width: 2px; background: var(--aksen-alas); } /* Segmented control, padanan mobile untuk radio 2 sampai 3 opsi */ .segmen { display: flex; border: 1px solid var(--garis-kendali); border-radius: var(--radius); overflow: hidden; } .segmen button { flex: 1; min-height: 48px; border: 0; background: var(--kertas); cursor: pointer; font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 600; color: var(--tinta); } .segmen button + button { border-left: 1px solid var(--garis-kendali); } .segmen button[aria-pressed="true"] { background: var(--aksen); color: #fff; } /* 5,01:1 */ /* ----------------------------------------------------------------------------- 17. PESAN DALAM HALAMAN, supaya implementasi tidak jatuh ke alert() peramban. Tidak pernah membawa makna lewat warna saja: selalu ada ikon dan kata. -------------------------------------------------------------------------- */ .pesan { display: flex; gap: var(--r3); align-items: flex-start; padding: var(--r3) var(--r4); border-radius: var(--radius); border-left: 4px solid; font-size: var(--t-kecil); } .pesan-galat { background: var(--galat-alas); border-color: var(--galat); color: var(--tinta); } .pesan-peringatan { background: var(--peringatan-alas); border-color: var(--peringatan); color: var(--tinta); } .pesan-sukses { background: var(--sukses-alas); border-color: var(--sukses); color: var(--tinta); } .pesan b { display: block; } /* ----------------------------------------------------------------------------- 18. BAR TAB BAWAH (mobile), navigasi UTAMA di mobile, bukan hamburger -------------------------------------------------------------------------- */ .tab-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--kertas); border-top: 1px solid var(--garis); padding-bottom: env(safe-area-inset-bottom, 0px); } .tab-bar a { display: grid; place-items: center; gap: 2px; min-height: 56px; padding: var(--r2) var(--r1); text-decoration: none; color: var(--redup); font-size: var(--t-label); } /* Tab aktif dibedakan warna DAN tebal DAN garis atas, bukan warna saja. */ .tab-bar a[aria-current="page"] { color: var(--tinta); font-weight: 600; box-shadow: inset 0 3px 0 0 var(--aksen); } .tab-bar .ikon { width: 22px; height: 22px; } @media (min-width: 900px) { .tab-bar { display: none; } body { padding-bottom: 0; } } /* ----------------------------------------------------------------------------- 19. BOTTOM SHEET, padanan mobile untuk dropdown -------------------------------------------------------------------------- */ .lapis { position: fixed; inset: 0; z-index: 50; background: rgba(20,23,28,.62); display: grid; align-items: end; } .lapis :focus-visible { outline-color: #fff; } .lapis[hidden] { display: none; } .sheet { background: var(--kertas); border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 80vh; overflow-y: auto; } .sheet-pegangan { width: 36px; height: 4px; background: var(--garis-kendali); opacity: .5; border-radius: 2px; margin: var(--r3) auto; } .sheet-kepala { display: flex; align-items: center; gap: var(--r3); padding: 0 var(--r4) var(--r3); border-bottom: 1px solid var(--garis); } .sheet-kepala h3 { font-size: 1rem; } .sheet-tutup { margin-left: auto; min-width: 48px; min-height: 48px; display: grid; place-items: center; background: none; border: 0; cursor: pointer; color: var(--tinta); } @media (min-width: 900px) { .lapis { align-items: center; justify-items: center; } .sheet { border-radius: var(--radius); max-width: 480px; width: 100%; } } /* Lightbox foto */ .lightbox img { width: 100%; max-height: 80vh; object-fit: contain; background: #000; } /* ----------------------------------------------------------------------------- 20. SKELETON MEMUAT, bukan spinner, supaya bentuk halaman sudah terbaca -------------------------------------------------------------------------- */ .tulang { background: var(--nonaktif); border-radius: var(--radius); position: relative; overflow: hidden; } .tulang::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: kilau 1.4s ease-in-out infinite; } @keyframes kilau { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .tulang-baris { height: 14px; margin-bottom: var(--r2); } .tulang-judul { height: 28px; width: 60%; margin-bottom: var(--r3); } .tulang-foto { aspect-ratio: 4 / 3; } /* ----------------------------------------------------------------------------- 21. HALAMAN GALAT DITUKAR LAGI, KEENAM KALINYA, dan kali ini ke bentuk yang belum pernah dipakai: angkanya BERAKSEN di atas latar biasa, tanpa blok. Sah karena terhitung, merah #D62828 4,59:1 di atas #F4F5F7 lewat ambang 4,5:1 untuk teks normal, apalagi untuk angka setinggi 96px. Bentuk blok yang dipakai situs 02/04/06 justru salah di sini: ia menuntut teks TINTA di atas merah (3,59:1) atau memaksa putih di atas isian sebesar itu, dan yang pertama GAGAL AA. -------------------------------------------------------------------------- */ .galat-kode { font-family: var(--f-judul); font-weight: 700; font-size: clamp(3rem, 12vw, 6rem); line-height: 1.1; display: inline-block; color: var(--aksen); letter-spacing: -0.02em; } /* 4,59:1 */ /* :not(.galat-kode) WAJIB. Tanpa itu aturan ini (0,1,1) menang atas .galat-kode (0,1,0) karena ditulis belakangan, dan angka besar 404/500 diam-diam mewarisi --redup alih-alih --aksen yang ditulis untuknya. Di paket ini akibatnya "cuma" visual (redup 5,80:1 tetap lulus), tapi di paket beraksen ISIAN angkanya jatuh sampai 1,88:1, terukur di situs 08 sebelum ditambal. Cacat ini diwarisi dari situs 02-06 dan lolos dari KETIGA audit, karena ketiganya membaca teks dan kotak, bukan warna terhitung. */ .galat-halaman p:not(.galat-kode) { color: var(--redup); } .galat-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: center; } /* Anak yang dipusatkan lewat place-items:center TIDAK melar: lebarnya lahir dari isinya sendiri, jadi satu paragraf panjang bisa melewati viewport, terukur 10px di 320px pada situs 02, dan yang dilaporkan meluber cuma "p" tanpa kelas, mustahil ditebak dari kode. max-width:100% saja TIDAK menutupnya; grid-nya yang dicabut. Halaman galat di sini karena itu blok sejak awal, bukan grid. */ .galat-halaman { display: block; text-align: center; padding-block: var(--r9); max-width: 56ch; margin-inline: auto; } .galat-halaman > * + * { margin-top: var(--r4); } .galat-halaman > * { max-width: 100%; } /* ----------------------------------------------------------------------------- 22. FOOTER -------------------------------------------------------------------------- */ .footer { background: var(--tinta); color: #fff; padding-block: var(--r7); margin-top: var(--r7); } .footer a { color: #C6C9CF; text-decoration: none; font-size: var(--t-kecil); } /* 10,83:1 */ .footer a:hover { color: #fff; text-decoration: underline; } .footer h4 { font-size: var(--t-label); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--r3); } .footer li { margin-bottom: var(--r2); } .footer-atas { display: grid; gap: var(--r5); } @media (min-width: 768px) { .footer-atas { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--r6); } } .footer-tentang { color: #C6C9CF; font-size: var(--t-kecil); margin-top: var(--r3); max-width: 40ch; } .footer-bawah { margin-top: var(--r6); padding-top: var(--r4); border-top: 1px solid #2A2F38; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: #C6C9CF; } .footer :focus-visible { outline-color: #fff; } /* ----------------------------------------------------------------------------- 23. UTILITAS -------------------------------------------------------------------------- */ .hanya-layar-baca { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .tumpuk-2 { display: grid; gap: var(--r2); } .tumpuk-3 { display: grid; gap: var(--r3); } .tumpuk-4 { display: grid; gap: var(--r4); } .redup { color: var(--redup); } .kecil { font-size: var(--t-kecil); } @media (min-width: 900px) { .hanya-mobile { display: none !important; } } @media (max-width: 899px) { .hanya-desktop { display: none !important; } } /* ----------------------------------------------------------------------------- 24. GERAK DIKURANGI, hormati preferensi sistem -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .tulang::after { animation: none; } } /* ----------------------------------------------------------------------------- 25. FOTO, POTRET, DAN PENGGANTI FOTO Vertikal ini yang paling rawan merek nyata, dan foto run-nya membuktikannya: tiap unit mobil bekas membawa LOGO PABRIKAN di grill, sebagian membawa PELAT NOMOR, dan foto lantai bengkel membawa tulisan di dinding. Perlakuannya ditulis satu per satu di .claude/activity-log.md; ringkasnya: · Logo pabrikan di grill mobil bekas DIBIARKAN. Ujinya bukan "ada merek nyata atau tidak", melainkan "apakah perusahaan kita masuk akal MEMILIKI benda itu". Pedagang mobil bekas memang memiliki mobil bermerek, dan menutupi grill-nya justru membuat unit yang dijual tidak bisa dikenali. Yang DILARANG di sini adalah papan nama dealer resmi merek lain, dan halaman ini tidak pernah menulis kata "dealer resmi" (DESIGN.md, rambu isi). · Tulisan bengkel/spanduk/pelat nomor yang terbaca DIPOTONG keluar bingkai. · Potret yang sidik jari perseptualnya berjarak Hamming < 30 dari potret lain dianggap orang yang sama dan hanya dipakai sekali; sisanya .potret-inisial, tidak pernah wajah orang lain yang kebetulan mirip. -------------------------------------------------------------------------- */ .gambar-lebar, .foto-kosong { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); background: var(--nonaktif); } .foto-kosong { display: grid; place-content: center; justify-items: center; gap: var(--r2); color: var(--redup); /* 5,07:1 di atas --nonaktif */ background-color: var(--nonaktif); background-image: linear-gradient(var(--garis) 1px, transparent 1px), linear-gradient(90deg, var(--garis) 1px, transparent 1px); background-size: 16px 16px; } .foto-kosong span { font-family: var(--f-isi); font-weight: 600; font-size: var(--t-label); letter-spacing: .08em; background: var(--kertas); padding: 2px var(--r2); border-radius: 4px; border: 1px solid var(--garis); text-align: center; } .potret { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); margin-bottom: var(--r3); } .potret-inisial { display: grid; place-items: center; background: var(--aksen-alas); color: var(--tinta); font-family: var(--f-judul); font-weight: 700; font-size: 1.75rem; letter-spacing: .04em; } /* Tombol pembungkus foto yang bisa diperbesar, tetap terlihat sebagai gambar */ .foto-tombol { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .foto-tombol img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--garis); } /* Pengganti peta, tidak memuat peta pihak ketiga, jadi tidak ada pelacak. */ .peta { display: grid; place-content: center; justify-items: center; gap: var(--r3); aspect-ratio: 4 / 3; border-radius: var(--radius); border: 1px solid var(--garis); color: var(--redup); text-align: center; padding: var(--r4); background-color: var(--nonaktif); background-image: linear-gradient(var(--garis) 1px, transparent 1px), linear-gradient(90deg, var(--garis) 1px, transparent 1px); background-size: 24px 24px; } .peta span { font-size: var(--t-kecil); max-width: 28ch; } /* Dua kolom di layar lebar, satu kolom di mobile. */ @media (min-width: 900px) { [data-dua-kolom] { grid-template-columns: 1fr 1fr; align-items: start; } /* Hitung tarif: formulir dua-pertiga di kiri, kartu hasil sepertiga di kanan. */ .tarif-tata { grid-template-columns: 2fr 1fr; gap: var(--r6) !important; align-items: start; } /* Jaringan: peta di kiri, daftar enam lokasi di kanan. */ .jaringan-tata { grid-template-columns: 1fr 1.1fr; gap: var(--r6) !important; align-items: start; } /* Pelacakan: riwayat di kiri, dua kartu sisi di kanan. */ .lacak-tata { grid-template-columns: 1.6fr 1fr; gap: var(--r6) !important; align-items: start; } /* Minta tarif: formulir di kiri, kartu ringkasan yang lebih sempit di kanan. align-items:start WAJIB, tanpa itu kartu ringkasan yang isinya empat baris ikut melar setinggi formulir tiga belas kolom, dan yang terlihat pengunjung adalah kartu setengah kosong sepanjang layar. */ .rfq-tata { grid-template-columns: 1.5fr 1fr; gap: var(--r6) !important; align-items: start; } } /* ----------------------------------------------------------------------------- 26. PENCARI, dipakai di halaman rute sebagai penyaring asal dan tujuan -------------------------------------------------------------------------- */ .pencari { display: grid; gap: var(--r3); align-items: end; margin-bottom: var(--r6); } @media (min-width: 900px) { .pencari { grid-template-columns: repeat(3, minmax(0,1fr)) auto; } } .pencari .bidang { margin: 0; } .pencari .tombol { min-height: 48px; } /* ----------------------------------------------------------------------------- 27. RAPI-RAPI DI BAWAH 900px, semuanya hanya terlihat setelah dirender -------------------------------------------------------------------------- */ @media (max-width: 899px) { /* Tombol navbar membungkus jadi dua baris dan mendesak wordmark sampai nyaris tak terbaca. Di mobile aksi ini juga sudah ada di bar tab bawah, jadi di sini ia cukup ringkas: tanpa ikon, tanpa membungkus, padding lebih rapat. */ .navbar .tombol { padding-inline: var(--r3); white-space: nowrap; font-size: var(--t-label); } .navbar .tombol .ikon { display: none; } .wordmark { font-size: 0.75rem; letter-spacing: .04em; } /* Aksi utama melebar penuh supaya lebarnya seragam dan mudah dijangkau jempol. */ .hero-aksi { flex-direction: column; align-items: stretch; } .hero-aksi .tombol { width: 100%; } } /* ----------------------------------------------------------------------------- 28. PONSEL SEMPIT (≤ 380px), iPhone SE dan Android kecil Label tab turun ke 11px dan padding dirapatkan. Wordmark paket ini tiga kata, jadi ia ikut mengecil. -------------------------------------------------------------------------- */ @media (max-width: 380px) { :root { --tepi: 1rem; } .tab-bar a { font-size: 0.6875rem; padding-inline: 2px; min-width: 0; } .tab-bar a > :last-child { max-width: 100%; overflow-wrap: anywhere; text-align: center; line-height: 1.15; } .tab-bar .ikon { width: 20px; height: 20px; } .wordmark { font-size: 0.625rem; } /* TERUKUR, bukan ditaksir: di 320px wordmark panjang plus tombol berlabel panjang yang TIDAK boleh membungkus mendorong lebar halaman. Label tombol didiktekan brief dan diuji verbatim, jadi yang dicabut nowrap-nya. Diwarisi dari situs 03 dan 04; wordmark paket ini "OTOKARSA SERVIS" dua kata tapi tombolnya berlabel "Booking Servis" dan tetap tidak boleh membungkus. */ .navbar .tombol { white-space: normal; text-align: center; line-height: 1.2; padding-inline: var(--r2); } } /* Tombol sunting di baris ringkasan wizard */ .sunting { margin-left: auto; min-width: 44px; min-height: 44px; display: grid; place-items: center; background: none; border: 1px solid var(--garis); border-radius: var(--radius); cursor: pointer; } .sunting:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 29. TABEL TARIF, kolom rupiah rata KANAN dan tabular -------------------------------------------------------------------------- */ .tabel-biaya td:last-child, .tabel-biaya th:last-child { text-align: right; } .tabel-biaya td:last-child { font-weight: 600; font-variant-numeric: tabular-nums; } /* ----------------------------------------------------------------------------- 30. KOTAK IKON, "light red tinted square" yang diminta W2. Alasnya --aksen-alas dan ikonnya BERAKSEN: merah di atas alas merah lembut 4,28:1, di atas lantai 3:1 untuk ikon fungsional. Di situs 06 hal yang sama dilarang (cyan jatuh jauh di bawah 3:1), jadi baris ini dihitung ulang, bukan diwarisi. TEKS kecil beraksen di atas alas ini tetap TIDAK boleh: 4,28:1 < 4,5:1. -------------------------------------------------------------------------- */ .ikon-kotak { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: var(--radius); background: var(--aksen-alas); color: var(--aksen); margin-bottom: var(--r3); } /* ----------------------------------------------------------------------------- 31. BARIS INFO BERIKON, dipakai untuk rambu, catatan tarif, dan syarat dokumen. Ikonnya --redup (5,80:1): barisnya sering panjang dan ikon di sini berfungsi sebagai penanda jenis, bukan sebagai aksi. -------------------------------------------------------------------------- */ .info-baris { display: flex; gap: var(--r3); align-items: flex-start; font-size: var(--t-kecil); color: var(--redup); } .info-baris .ikon { margin-top: 2px; } .info-baris b { color: var(--tinta); } /* Rambu "ini estimasi", muncul di beberapa tempat dan sengaja seragam. Garis kirinya PERINGATAN (6,79:1), bukan aksen: ia bukan promosi, ia batas. */ .rambu { display: flex; gap: var(--r3); align-items: flex-start; background: var(--peringatan-alas); border-left: 4px solid var(--peringatan); border-radius: var(--radius); padding: var(--r3) var(--r4); font-size: var(--t-kecil); color: var(--tinta); } /* Cip berbentuk KALIMAT (pil status di hero, cip "hampir penuh"). Cip biasa memakai huruf besar semua dan itu benar untuk satu-dua kata; untuk satu kalimat penuh ia berhenti terbaca. Bentuknya sama, hurufnya tidak dipaksa. */ .cip-kalimat { display: inline-flex; align-items: center; gap: var(--r2); text-transform: none; letter-spacing: 0; font-size: var(--t-kecil); padding: var(--r2) var(--r4); } /* Lima kolom hanya di layar yang benar-benar cukup lebar. Di bawah itu ia turun ke tiga lalu dua, bukan memaksa lima kartu sempit yang judulnya patah tiap kata. */ /* Pil status hero berdiri sendiri di atas eyebrow. p{margin:0} membuat keduanya berdempetan sampai terbaca seperti satu blok, terlihat di 390px maupun 1440px, dan tidak terlihat sama sekali dari kode. */ .hero .cip { margin-bottom: var(--r3); } /* Pesan "ini desain contoh" yang muncul sesudah tombol yang memang tidak punya tujuan nyata. Tersembunyi sampai ditekan, dan isinya ditulis JS. */ .pesan-contoh { margin-top: var(--r3); } @media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ----------------------------------------------------------------------------- 33. KARTU LACAK, kolom resi di dalam hero, dengan tombol di sebelahnya -------------------------------------------------------------------------- */ .lacak-kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--r4); margin-top: var(--r5); } .lacak-baris { display: grid; gap: var(--r3); } @media (min-width: 560px) { .lacak-baris { grid-template-columns: 1fr auto; align-items: end; } } .lacak-baris .bidang { margin: 0; } .lacak-baris .tombol { min-height: 48px; } /* ----------------------------------------------------------------------------- 34. LIMA UBIN AKSI, baris pertama di bawah lipatan, dan yang menentukan vertikal ini. Lima kolom hanya di layar yang cukup lebar; di bawah itu turun ke tiga lalu dua, bukan lima ubin sempit yang labelnya patah tiap kata. -------------------------------------------------------------------------- */ @media (min-width: 1100px) { .kisi-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } } @media (min-width: 900px) and (max-width: 1099px) { .kisi-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 560px) and (max-width: 899px) { .kisi-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } a.kartu { text-decoration: none; display: block; } a.kartu:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 35. BATANG KETEPATAN, dipakai di halaman komponen sebagai batang skor inspeksi. Merahnya 4,59:1 dan itu cukup, tapi warna TETAP tidak pernah sendirian membawa makna: tiap batang membawa label kiri, angka bertinta, dan jumlah titik di kanan. Alurnya diberi border supaya tepinya terlihat tanpa mengandalkan warna. -------------------------------------------------------------------------- */ .batang { display: grid; gap: var(--r4); } /* EMPAT kolom, bukan tiga: barisnya memang punya empat anak (label, persen, alur, jumlah sampel). Dengan tiga kolom anak keempat jatuh ke baris berikutnya dan jumlah sampel tampil di bawah labelnya, terlihat jelas sesudah dirender, dan tidak terlihat sama sekali dari kode. */ .batang-baris { display: grid; grid-template-columns: 12rem 5rem 1fr 11rem; gap: var(--r3); align-items: center; font-size: var(--t-kecil); } .batang-nilai { font-family: var(--f-judul); font-weight: 600; font-size: 1.25rem; font-variant-numeric: tabular-nums; } .batang-alur { height: 12px; background: var(--garis); border: 1px solid var(--garis-kendali); border-radius: 999px; overflow: hidden; } .batang-isi { display: block; height: 100%; background: var(--aksen); } .batang-sampel { color: var(--redup); } .batang-total { border-top: 2px solid var(--tinta); padding-top: var(--r4); } @media (max-width: 700px) { .batang-baris { grid-template-columns: 1fr auto; } .batang-alur, .batang-sampel { grid-column: 1 / -1; } } /* ----------------------------------------------------------------------------- 36. RIWAYAT PELACAKAN, timeline yang SELALU tegak, tidak pernah mendatar. Langkah berjalan ditandai isian aksen DAN kata "Berjalan sekarang"; langkah mendatang bertinta redup DAN berlabel "Perkiraan". Tidak ada keadaan yang maknanya hanya di warna. -------------------------------------------------------------------------- */ .riwayat { position: relative; padding-left: 44px; } .riwayat::before { content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px; background: var(--garis-kendali); } .riwayat li { position: relative; padding-bottom: var(--r6); } .riwayat li:last-child { padding-bottom: 0; } .riwayat-tanda { position: absolute; left: -44px; top: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--kertas); border: 2px solid var(--tinta); color: var(--tinta); } .riwayat-tanda[data-keadaan="kini"] { background: var(--aksen); border-color: var(--aksen); color: #fff; } .riwayat-tanda[data-keadaan="nanti"] { border-color: var(--redup); color: var(--redup); } .riwayat-waktu { display: block; font-size: var(--t-kecil); color: var(--redup); font-variant-numeric: tabular-nums; } .riwayat h3 { font-size: 1.0625rem; margin-top: var(--r1); } .riwayat p { color: var(--redup); font-size: var(--t-kecil); margin-top: var(--r1); } .riwayat li[data-keadaan="nanti"] h3 { color: var(--redup); } /* ----------------------------------------------------------------------------- 37. UNGGAH BERKAS, dihidupkan kembali untuk formulir minta tarif. Bordernya --garis-kendali (5,80:1), bukan --garis: ia area yang bisa diklik. -------------------------------------------------------------------------- */ .unggah { display: grid; place-items: center; gap: var(--r2); text-align: center; padding: var(--r6) var(--r4); border: 2px dashed var(--garis-kendali); border-radius: var(--radius); background: var(--kertas); cursor: pointer; font-size: var(--t-kecil); color: var(--redup); } .unggah:hover { background: var(--sentuh); } /* ----------------------------------------------------------------------------- 38. PENANDA PETA BERNOMOR, isian aksen dengan angka BERTINTA di atasnya -------------------------------------------------------------------------- */ /* Kolom bersatuan (kg, m³). DESIGN.md meminta satuannya menempel di kolomnya, bukan jadi baris bantuan terpisah di bawah, di baris bantuan ia terbaca sebagai keterangan, bukan sebagai bagian dari angka yang sedang diketik. */ .kolom-satuan { display: flex; align-items: center; gap: var(--r2); } .kolom-satuan .kolom { flex: 1; min-width: 0; } .kolom-satuan span { font-weight: 600; white-space: nowrap; } .pin { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--aksen); color: #fff; font-family: var(--f-judul); font-weight: 700; font-size: var(--t-kecil); } /* ----------------------------------------------------------------------------- 39. BARIS RINCIAN BIAYA, label kiri, angka kanan tabular -------------------------------------------------------------------------- */ .rincian { display: grid; gap: var(--r3); } .rincian > div { display: flex; gap: var(--r3); align-items: baseline; font-size: var(--t-kecil); } .rincian dt, .rincian .rincian-label { flex: 1; min-width: 0; } .rincian dd, .rincian .rincian-nilai { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .rincian-total { border-top: 2px solid var(--tinta); padding-top: var(--r3); font-size: var(--t-isi) !important; } .rincian-total .rincian-nilai { font-size: 1.25rem; font-family: var(--f-judul); } /* ============================================================================= 40. KOMPONEN KHUSUS PAKET 09, dari W1–W15 dan S1–S8. Semua yang di bawah ini TIDAK ADA di situs 06 dan lahir dari brief paket ini. ========================================================================== */ /* 40.1 Baris darurat di hero: satu kalimat beraksen DI ATAS LATAR (bukan isian). Sah karena 4,59:1, dan justru bentuk inilah yang diminta W1 ("one line in accent colour text on the background"). */ .hero-darurat { display: inline-flex; align-items: center; gap: var(--r2); margin-top: var(--r4); color: var(--aksen); font-weight: 600; font-size: var(--t-kecil); text-decoration: none; } .hero-darurat:hover { text-decoration: underline; text-underline-offset: 3px; } /* 40.2 CIP PENYARING harga (W4). Kendali sungguhannya adalah radio; versi cip inilah yang menerima klik, dan radio-nya tetap ada di DOM sebagai sumber kebenaran, jadi halaman tanpa JavaScript tetap punya penyaring yang bekerja lewat