@charset "utf-8"; /* ============================================================================= Klinik Utama Sadhawira — desain contoh (klinik fiktif) Sumber desain: stitch/05-klinik/ (DESIGN.md + PROMPTS-WEB/MOBILE/STATE) MODE WARNA DIKUNCI TERANG. Seluruh rasio di bawah dihitung untuk latar terang saja. Mencabut kuncian di berarti menghitung ulang SETIAP pasangan warna lebih dulu, bukan sekadar menghapus atributnya. AKSEN PAKET INI BERAYUN BALIK KE PERILAKU PAKET 03, BUKAN PAKET 04. Teal #0E7C86 mencapai 4,71:1 di atas latar: ia BOLEH jadi warna teks, border kendali, dan ikon fungsional. Yang membalik dari paket 04: teks DI ATAS aksen wajib PUTIH (4,95:1) — tinta di atasnya cuma 3,34:1 dan GAGAL AA. Halaman galat karena itu kembali ke angka beraksen, bukan blok beraksen. ⛔ RAMBU VERTIKAL KESEHATAN (DESIGN.md, mengalahkan yang lain): tidak ada testimoni pasien, foto sebelum–sesudah, klaim kesembuhan, superlatif, dan TIDAK ADA nomor STR/SIP/izin di mana pun. Kepercayaan dipikul jadwal, nama dokter, alat, alur, dan jam buka — bukan pujian. SATU KELUARGA HURUF SAJA (Inter, dua bobot). --f-judul dan --f-isi memang menunjuk keluarga yang sama; variabelnya dipertahankan supaya struktur berkas ini tetap sebangun dengan situs 01–04, bukan karena ada huruf kedua. ========================================================================== */ @import url("aset/huruf/_font-face.css"); /* ----------------------------------------------------------------------------- 1. TOKEN — tiap warna punya PERAN dan RASIO TERHITUNG di sebelahnya. Angka di bawah DIHITUNG SENDIRI dengan rumus WCAG, bukan disalin dari brief. Catatan: berbeda dengan paket 02, angka di DESIGN.md paket ini TERBUKTI BENAR — 4,76 · 5,01 · 3,25 · 15,48 · 6,15 semuanya cocok sampai dua desimal. -------------------------------------------------------------------------- */ :root { /* Permukaan */ --latar: #F6FAFB; /* alas halaman */ --kertas: #FFFFFF; /* alas kartu di atas --latar */ --sentuh: #F0F6F7; /* hover/tekan. SENGAJA dibuat sangat terang: aksen di atasnya 4,53:1 dan MASIH lulus AA sebagai teks. Nada yang lebih gelap (#E7EEF0) menjatuhkannya ke 4,21:1, dan tautan beraksen di dalam baris yang sedang di-hover berhenti lulus. */ /* Teks */ --tinta: #0A2226; /* 15,74:1 di atas --latar — teks utama, ukuran apa pun */ --redup: #4F6A70; /* 5,51:1 di atas --latar — teks sekunder, LULUS AA */ /* Aksen — PERANNYA LUAS, dan arah larangannya TERBALIK dari paket 04 */ --aksen: #0E7C86; /* 4,71:1 di atas --latar → BOLEH jadi warna teks, border kendali, cincin fokus, dan ikon fungsional. Teks DI ATAS aksen wajib PUTIH (4,95:1); tinta di atasnya 3,34:1 dan GAGAL AA. */ --aksen-tekan: #0A5F67; /* keadaan ditekan; putih di atasnya 7,38:1 */ --aksen-alas: #E6F2F3; /* alas lembut. Teks di atasnya wajib TINTA (14,46:1); aksen di atasnya 4,32:1 → cukup untuk IKON (3:1), TIDAK cukup untuk teks. */ --nonaktif: #E7EEF0; /* alas kendali mati; redup di atasnya 4,93:1 */ /* Garis */ --garis: #DCE7EA; /* 1,20:1 — DEKORATIF saja (pemisah, border kartu). DILARANG untuk border kendali interaktif. */ --garis-kendali:#4F6A70; /* 5,51:1 — border input, checkbox, tombol outline. */ /* Semantik — dihitung terhadap --latar */ --sukses: #0F6B45; /* 6,23:1 */ --galat: #B3261E; /* 6,22:1 */ --peringatan: #7A4B00; /* 7,05:1 */ --sukses-alas: #E4F1EA; --galat-alas: #FAEAE8; --peringatan-alas:#F7EFDE; /* Huruf. SATU keluarga, DUA bobot (DESIGN.md: "A clinic does not need a second voice"). Angka statistik dan papan antrean memakai Inter 700 dengan angka TABULAR — yang wajib dipastikan adalah tabularnya. */ --f-judul: "Inter", ui-sans-serif, system-ui, sans-serif; --f-isi: "Inter", ui-sans-serif, system-ui, sans-serif; /* LANTAI UKURAN TEKS — jangan turun di bawah ini di mana pun. */ --t-isi: 1rem; /* 16px, teks isi */ --t-kecil: 0.875rem; /* 14px, sekunder */ --t-label: 0.75rem; /* 12px, label huruf besar — BATAS BAWAH */ /* Ritme */ --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem; --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --r8: 4rem; --r9: 6rem; --radius: 12px; /* DESIGN.md: radius 12px */ --lebar-isi: 1240px; --tepi: 1.25rem; /* gutter, dipakai SEMUA section supaya sejajar */ --bar-atas: 0px; --bar-bawah: calc(56px + env(safe-area-inset-bottom, 0px)); } /* ----------------------------------------------------------------------------- 2. DASAR -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } /* Atribut `hidden` KALAH oleh `display` mana pun yang ditulis di CSS. Gejalanya mahal dan hanya terlihat setelah dirender: pesan galat formulir tampil sejak halaman dibuka karena .pesan menyetel display:flex. Satu aturan ini menutup seluruh kelasnya. */ [hidden] { display: none !important; } html { /* Jangkar berhenti tepat di bawah bar, dan ini juga menyelamatkan elemen yang menerima fokus keyboard (teknik W3C C43 untuk WCAG 2.2 SC 2.4.11). */ scroll-padding-top: calc(var(--bar-atas) + var(--r4)); scroll-padding-bottom: calc(var(--bar-bawah) + var(--r4)); -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--latar); color: var(--tinta); font-family: var(--f-isi); font-size: var(--t-isi); line-height: 1.6; /* Ruang untuk bar tab bawah di mobile supaya isi terakhir tidak tertutup. */ padding-bottom: var(--bar-bawah); } h1, h2, h3, h4 { font-family: var(--f-judul); font-weight: 700; line-height: 1.2; margin: 0; } h1 { font-size: clamp(2.125rem, 5vw, 3.375rem); letter-spacing: -0.01em; } h2 { font-size: clamp(1.5rem, 3.2vw, 2.25rem); letter-spacing: -0.01em; } h3 { font-size: clamp(1.125rem, 1.9vw, 1.375rem); } p { margin: 0; } img { max-width: 100%; height: auto; display: block; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; } /* Angka statistik, papan antrean, dan kolom biaya: Inter 700 dengan angka TABULAR. Tanpa font-variant-numeric kolom rupiah tidak akan pernah sejajar, dan justru itu yang paling terlihat di tabel biaya laboratorium. */ .angka { font-family: var(--f-judul); font-weight: 700; font-variant-numeric: tabular-nums; } /* CINCIN FOKUS — SELALU 2px tinta dengan offset 2px. Teal paket ini sebetulnya SAMPAI ke lantai 3:1 dan cincin beraksen akan sah, tapi tinta 15,74:1 tetap yang paling terlihat di seluruh permukaan — termasuk di atas isian aksen, tempat cincin beraksen akan lenyap. Jadi warnanya tidak ikut berayun. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; border-radius: 4px; } /* Lewati ke konten — wajib ada, dan wajib terlihat saat difokus. */ .lewati { position: absolute; left: var(--tepi); top: -100px; z-index: 100; background: var(--tinta); color: #fff; padding: var(--r3) var(--r4); border-radius: var(--radius); font-weight: 700; text-decoration: none; } .lewati:focus-visible { top: var(--r3); } /* ----------------------------------------------------------------------------- 3. TATA LETAK -------------------------------------------------------------------------- */ .bungkus { width: 100%; max-width: var(--lebar-isi); margin-inline: auto; padding-inline: var(--tepi); } .bagian { padding-block: var(--r7); } .bagian + .bagian { border-top: 1px solid var(--garis); } @media (min-width: 768px) { .bagian { padding-block: var(--r8); } } .kepala-bagian { margin-bottom: var(--r5); max-width: 62ch; } .kepala-bagian p { color: var(--redup); margin-top: var(--r2); } .kisi { display: grid; gap: var(--r4); } @media (min-width: 640px) { .kisi-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 900px) { .kisi-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kisi-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 640px) and (max-width: 899px) { .kisi-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Tiap anak kisi WAJIB boleh menyusut, kalau tidak isi yang lebar mendorong lebar halaman dan yang dilaporkan meluber justru elemen lain. */ .kisi > * { min-width: 0; } /* ----------------------------------------------------------------------------- 4. PITA "DESAIN CONTOH" — tidak bisa ditutup, wajib di tiap halaman -------------------------------------------------------------------------- */ .pita { background: var(--tinta); color: #fff; /* 16,29:1 */ font-size: 0.8125rem; text-align: center; padding: var(--r2) var(--tepi); } /* ----------------------------------------------------------------------------- 5. NAVBAR (desktop) — di mobile digantikan bar tab bawah -------------------------------------------------------------------------- */ .navbar { border-bottom: 1px solid var(--garis); background: var(--latar); } .navbar-isi { display: flex; align-items: center; gap: var(--r4); min-height: 64px; } .wordmark { font-family: var(--f-judul); font-weight: 700; letter-spacing: .06em; font-size: 0.9375rem; text-decoration: none; white-space: nowrap; } .nav-tautan { display: none; gap: var(--r5); margin-inline: auto; } .nav-tautan a { text-decoration: none; color: var(--redup); font-size: var(--t-kecil); } .nav-tautan a:hover { color: var(--tinta); } /* Item aktif TIDAK dibedakan warna saja — ada garis bawah tebal juga. */ .nav-tautan a[aria-current="page"] { color: var(--tinta); font-weight: 700; box-shadow: inset 0 -3px 0 0 var(--aksen); } @media (min-width: 900px) { .nav-tautan { display: flex; } } .navbar .tombol { margin-left: auto; } @media (min-width: 900px) { .navbar .tombol { margin-left: 0; } } /* ----------------------------------------------------------------------------- 6. TOMBOL — target sentuh minimal 48px, tombol utama 52px di mobile -------------------------------------------------------------------------- */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: var(--r2); min-height: 48px; padding: var(--r3) var(--r5); font-family: var(--f-isi); font-size: var(--t-kecil); font-weight: 700; border-radius: var(--radius); border: 1px solid transparent; text-decoration: none; cursor: pointer; background: none; color: var(--tinta); transition: background-color .15s ease, border-color .15s ease; } .tombol-utama { background: var(--aksen); color: #fff; } /* 4,95:1 */ .tombol-utama:hover { background: var(--aksen-tekan); } /* 7,38:1 */ .tombol-utama:active { background: var(--aksen-tekan); } .tombol-kedua { border-color: var(--garis-kendali); color: var(--tinta); } /* 5,51:1 */ .tombol-kedua:hover { background: var(--sentuh); } .tombol-blok { width: 100%; } .tombol[disabled], .tombol[aria-disabled="true"] { background: var(--nonaktif); color: var(--redup); border-color: transparent; cursor: not-allowed; } .tombol-alasan { font-size: var(--t-kecil); color: var(--redup); margin-top: var(--r2); } /* Keadaan memuat: tombol punya LABELNYA SENDIRI, bukan cuma spinner. */ .tombol[data-memuat="ya"] { pointer-events: none; } .pemintal { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: putar .7s linear infinite; flex: none; } @keyframes putar { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 7. IKON — SVG sebaris, BUKAN emoji dan bukan font ikon. Brief menyebut Material Symbols; yang dipakai di sini SVG sebaris dengan bentuk yang sama maknanya. Alasannya bukan selera: font ikon berbasis ligatur menampilkan nama glyph sebagai teks mentah sebelum fontnya termuat, dan itu berarti kata "request_quote" sempat terbaca di layar pembeli. -------------------------------------------------------------------------- */ .ikon { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ikon-besar { width: 28px; height: 28px; } .ikon-redup { color: var(--redup); } /* .ikon-aksen SAH di paket ini — teal 4,71:1 jauh di atas lantai 3:1 untuk ikon. Di paket 04 kelas ini sengaja TIDAK ADA karena emasnya cuma 2,30:1. Yang berubah hasil hitungannya, bukan aturannya. */ .ikon-aksen { color: var(--aksen); } /* ----------------------------------------------------------------------------- 8. KARTU — border 1px, TANPA bayangan (DESIGN.md) -------------------------------------------------------------------------- */ .kartu { background: var(--kertas); border: 1px solid var(--garis); border-radius: var(--radius); padding: var(--r4); } .kartu h3 { margin-bottom: var(--r2); } .kartu p { color: var(--redup); font-size: var(--t-kecil); } .cip { display: inline-block; background: var(--aksen); color: #fff; /* 4,95:1 */ font-size: var(--t-label); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px var(--r2); border-radius: 999px; } .cip-netral { background: var(--nonaktif); color: var(--tinta); } /* DESIGN.md menyebut DUA bentuk cip yang sah dan satu yang haram: isian aksen + teks putih, ATAU border aksen + teks tinta. Isian aksen + teks tinta dilarang. */ .cip-garis { /* inline-flex, BUKAN inline-block warisan .cip: cip bergaris hampir selalu membawa ikon, dan sebagai inline-block ikonnya duduk di garis dasar teks lalu terlihat seperti glyph yang rusak. Terlihat jelas di kisi penjamin. */ display: inline-flex; align-items: center; gap: var(--r2); background: var(--kertas); color: var(--tinta); border: 1px solid var(--aksen); text-transform: none; letter-spacing: 0; font-size: var(--t-kecil); padding: var(--r1) var(--r3); } .tautan-panah { display: inline-flex; align-items: center; gap: var(--r1); font-size: var(--t-kecil); font-weight: 700; text-decoration: none; color: var(--aksen); text-underline-offset: 3px; /* 4,71:1 — teal LULUS sebagai teks */ } .tautan-panah:hover { text-decoration: underline; } /* ----------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .hero { display: grid; gap: var(--r5); align-items: center; } @media (min-width: 900px) { .hero { grid-template-columns: 1.05fr .95fr; gap: var(--r7); } } .hero-mata { font-size: var(--t-kecil); font-weight: 700; color: var(--redup); letter-spacing: .06em; text-transform: uppercase; } .hero h1 { margin-block: var(--r3); } .hero-sub { color: var(--redup); font-size: 1.0625rem; max-width: 56ch; } .hero-aksi { display: flex; flex-wrap: wrap; gap: var(--r3); margin-top: var(--r5); } .hero-aksi .tombol { min-height: 52px; } /* aksi utama di mobile 52px */ .hero-statistik { display: flex; flex-wrap: wrap; gap: var(--r5); margin-top: var(--r5); padding-top: var(--r4); border-top: 1px solid var(--garis); } .hero-statistik div { min-width: 0; } .hero-statistik .angka { font-size: 1.25rem; display: block; } .hero-statistik span:last-child { font-size: var(--t-kecil); color: var(--redup); } .hero-foto { border-radius: var(--radius); border: 1px solid var(--garis); overflow: hidden; } .hero-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* ----------------------------------------------------------------------------- 10. PITA STATISTIK BERAKSEN — SELURUH teks di atasnya wajib PUTIH. Terhitung: putih di atas teal #0E7C86 4,95:1 LULUS, tinta di atasnya 3,34:1 GAGAL. Persis KEBALIKAN paket 04. Inilah tempat menyalin keputusan warna paling mahal. -------------------------------------------------------------------------- */ .pita-statistik { background: var(--aksen); color: #fff; padding-block: var(--r6); } .pita-statistik .kisi { gap: var(--r5); grid-template-columns: repeat(2, minmax(0,1fr)); } @media (min-width: 900px) { .pita-statistik .kisi { grid-template-columns: repeat(5, minmax(0,1fr)); } } .pita-statistik .angka { font-size: clamp(1.5rem, 3vw, 2rem); display: block; } .pita-statistik span:last-child { font-size: var(--t-kecil); } /* Pita teal ini GELAP. Cincin fokus tinta di atasnya nyaris tak terlihat, jadi di dalam pita cincinnya diputihkan — satu-satunya pengecualian warna fokus, dan ia ada karena diukur, bukan karena selera. */ .pita-statistik :focus-visible { outline-color: #fff; } /* Pita kalimat beraksen — sama aturannya, teks putih. */ .pita-aksen { background: var(--aksen); color: #fff; border-radius: var(--radius); padding: var(--r5); font-size: 1.0625rem; } /* ----------------------------------------------------------------------------- 11. BARIS DAFTAR NATIVE — padanan mobile untuk tabel dan dropdown. Tinggi minimal 56px. Dipakai juga di desktop karena polanya memang terbaca. -------------------------------------------------------------------------- */ .daftar { border: 1px solid var(--garis); border-radius: var(--radius); background: var(--kertas); } .baris { display: flex; align-items: center; gap: var(--r3); min-height: 56px; padding: var(--r3) var(--r4); border-bottom: 1px solid var(--garis); } .baris:last-child { border-bottom: 0; } .baris-isi { min-width: 0; flex: 1; } /* Keduanya WAJIB blok. Sebagai span inline, judul dan keterangannya menyambung jadi satu paragraf dan barisnya berhenti terbaca sebagai baris daftar native — terlihat jelas di 390px, tidak terlihat sama sekali dari kode. */ .baris-label { display: block; font-weight: 700; font-size: var(--t-kecil); } .baris-nilai { display: block; font-size: var(--t-kecil); color: var(--redup); } /* Baris dua kolom (label kiri, nilai kanan) tetap sebaris: di situ keterangannya pendek dan memang berpasangan, bukan judul-dan-penjelasan. */ .baris > .baris-nilai:first-child { display: inline; } /* TANPA nowrap. Nilai panjang seperti "Monday to Friday 08.00 to 17.00, Saturday 08.00 to 13.00, GMT+7" tidak bisa membungkus dan mendorong lebar halaman: terukur meluber 54px di 320px pada situs 02, dan yang dilaporkan meluber justru
, bukan span penyebabnya. */ .baris-kanan { margin-left: auto; font-weight: 700; font-size: var(--t-kecil); text-align: right; min-width: 0; overflow-wrap: anywhere; } .baris-kanan.angka { font-weight: 700; } 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); } 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; } /* 13,93: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 jadwal: kolom sisa kuota ditebalkan supaya angka yang dicari pasien menonjol tanpa harus diwarnai. */ .tabel-jadwal td:last-child { font-weight: 700; } 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. ⚠️ JUMLAH KOLOM WAJIB DITINJAU TIAP PAKET. Situs 01 lima langkah, 02 enam, 03 delapan, 04 tiga, paket ini LIMA langkah pendaftaran daring. Pola border-atas per langkah dari situs 03 dipertahankan karena ia bekerja untuk berapa pun jumlah kolom — yang diubah hanya angka kolomnya. -------------------------------------------------------------------------- */ .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; /* 4,95: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: 700; 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 (6,15:1), bukan --garis (1,24:1) -------------------------------------------------------------------------- */ .bidang { display: block; margin-bottom: var(--r4); } .bidang > label, .label { display: block; font-size: var(--t-kecil); font-weight: 700; 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; } 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: 700; } /* 6,75:1 */ .bantuan-sukses { color: var(--sukses); font-weight: 700; } /* 6,93:1 */ .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. Putih di atas teal 4,95:1, jadi di paket ini kendalinya BOLEH beraksen — kebalikan paket 04. */ .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: 700; color: var(--tinta); } .segmen button + button { border-left: 1px solid var(--garis-kendali); } .segmen button[aria-pressed="true"] { background: var(--aksen); color: #fff; } /* ----------------------------------------------------------------------------- 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: 700; 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(10,34,38,.55); display: grid; align-items: end; } .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, dan ini KEEMPAT KALINYA pola yang sama bolak-balik. Teal paket ini 4,71:1 di atas latar, jadi angka beraksen terbaca dan polanya kembali ke bentuk situs 01 dan 03: angka besar BERWARNA aksen, tanpa blok. Aturannya tidak pernah berubah — yang berubah hasil hitungannya. Jangan menyalin blok ini ke paket 06 tanpa menghitung ulang aksennya lebih dulu. -------------------------------------------------------------------------- */ .galat-kode { font-family: var(--f-judul); font-weight: 700; font-size: clamp(3rem, 12vw, 6rem); line-height: 1.1; display: block; color: var(--aksen); } /* 4,71:1 */ .galat-halaman p { 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: #C3C9D6; text-decoration: none; font-size: var(--t-kecil); } /* 9,96: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: #C3C9D6; 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 #22474D; display: flex; flex-wrap: wrap; gap: var(--r3); justify-content: space-between; font-size: var(--t-kecil); color: #C3C9D6; } .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 Run Stitch paket ini menghasilkan 11 foto dan SEBELAS-SEBELASNYA memuat teks yang bukan milik kita. Enam potret dokter memakai papan nama orang lain (Aisyah Putri, Budi Santoso, dst) plus logo dada; dua foto ruangan memuat papan klinik lain (KLINIK BANDUNG SEJAHTERA, KLINIK SEHAT INDONESIA); satu foto meja dokter anak memuat papan nama dan poster klinik lain; satu foto laboratorium memuat label spesimen "Patient: A. Wijaya" berikut merek alat sungguhan. SEMUANYA diselesaikan dengan MEMOTONG BINGKAI, nol tambalan dan nol kaburan — potret dipotong jadi kepala-dan-bahu, ruangan dipotong dari sisi yang bertulisan. Delapan dokter lain (dokter umum dan dokter gigi) memang tidak punya potret di run ini dan memakai .potret-inisial, bukan foto orang lain yang 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); /* 4,93: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: 700; 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(--aksen); 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; } /* Fasilitas: foto ruang periksa di kiri, daftar alat yang lebih panjang di kanan. */ .alat-tata { grid-template-columns: 1fr 1.15fr; gap: var(--r6) !important; } /* Daftar daring: 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 sepuluh kolom, dan yang terlihat pengunjung adalah kartu setengah kosong sepanjang layar. */ .daftar-tata { grid-template-columns: 1.4fr 1fr; gap: var(--r6) !important; align-items: start; } } /* ----------------------------------------------------------------------------- 26. PENCARI DOKTER — kolom cari, dua dropdown, plus tombol -------------------------------------------------------------------------- */ .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 "KLINIK UTAMA SADHAWIRA" tiga kata dan panjang. */ .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. WIZARD PERMINTAAN — satu langkah satu layar (halaman /request). Formulir tiga belas kolom tidak pernah enak di 390px; polanya ditukar jadi wizard, bilah kemajuan menempel di atas, tombol lanjut menempel di bawah. -------------------------------------------------------------------------- */ .wizard-kepala { position: sticky; top: 0; z-index: 30; background: var(--latar); /* TINGGI DIKUNCI. Kalau tingginya lahir dari padding plus tinggi baris, angkanya berubah mengikuti huruf yang termuat dan pengganjal jangkar tidak akan pernah tepat. 44px baris + 4px bilah + 1px garis = 49px, dan itu yang dipakai. */ height: 49px; box-sizing: border-box; border-bottom: 1px solid var(--garis); margin-bottom: var(--r5); } .wizard-maju { height: 44px; display: flex; align-items: center; gap: var(--r3); font-size: var(--t-kecil); font-weight: 700; } .wizard-maju .redup { font-weight: 400; margin-left: auto; } .wizard-bar { height: 4px; background: var(--garis); } .wizard-bar span { display: block; height: 100%; background: var(--aksen); transition: width .25s ease; } @media (prefers-reduced-motion: reduce) { .wizard-bar span { transition: none; } } .wizard-langkah { border: 0; padding: 0; margin: 0; } .wizard-aksi { position: sticky; bottom: var(--bar-bawah); z-index: 25; display: flex; gap: var(--r3); padding-block: var(--r4); background: linear-gradient(to bottom, transparent, var(--latar) 40%); } .wizard-aksi .tombol { flex: 1; min-height: 52px; } @media (min-width: 900px) { .wizard-aksi { bottom: 0; } .wizard-aksi .tombol { flex: 0 1 auto; min-width: 180px; } } /* ----------------------------------------------------------------------------- 30. TABEL BIAYA LABORATORIUM — kolom rupiah rata KANAN dan tabular -------------------------------------------------------------------------- */ .tabel-biaya td:nth-child(3), .tabel-biaya th:nth-child(3) { text-align: right; } .tabel-biaya td:nth-child(3) { font-weight: 700; font-variant-numeric: tabular-nums; } .tabel-biaya th:nth-child(3), .tabel-biaya td:nth-child(3) { border-left: 1px solid var(--garis); } /* ----------------------------------------------------------------------------- 31. KOTAK IKON BERAKSEN — bingkai lembut untuk ikon penyortir dan papan antrean. Alasnya --aksen-alas dan ikonnya --aksen: 4,32:1, di atas lantai 3:1 untuk ikon. TEKS tidak pernah ditaruh di atas alas ini dengan warna aksen (4,32 < 4,5). -------------------------------------------------------------------------- */ .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); } /* ----------------------------------------------------------------------------- 32. TAB HARI — tautan sungguhan ke jadwal tiap hari, bukan tombol tanpa tujuan. Tanpa JavaScript ketujuhnya tetap bekerja, karena ketujuh tabel hari benar-benar ada di /dokter. Hari yang sedang ditampilkan ditandai ISIAN aksen + teks putih DAN aria-current, bukan warna saja. -------------------------------------------------------------------------- */ .hari-tab { display: flex; flex-wrap: wrap; gap: var(--r2); margin-bottom: var(--r5); } .hari-tab a { display: inline-flex; align-items: center; min-height: 44px; padding: var(--r2) var(--r4); border-radius: 999px; border: 1px solid var(--garis-kendali); color: var(--tinta); font-size: var(--t-kecil); font-weight: 700; text-decoration: none; } .hari-tab a:hover { background: var(--sentuh); } .hari-tab a[aria-current] { background: var(--aksen); border-color: var(--aksen); color: #fff; } /* ----------------------------------------------------------------------------- 33. KARTU ARTIKEL — gambar 16:9 di atas, cip kategori, judul, penulis, lama baca -------------------------------------------------------------------------- */ .artikel-gambar { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; border-bottom: 1px solid var(--garis); } .artikel { padding: 0; overflow: hidden; } .artikel-isi { padding: var(--r4); } .artikel-isi h3 { font-size: 1rem; margin-block: var(--r2); } /* ----------------------------------------------------------------------------- 34. BARIS INFO BERIKON — dipakai untuk rambu, syarat penjamin, dan petunjuk arah. Ikonnya --redup (5,51:1), bukan aksen: 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 "bukan gawat darurat" — muncul di empat tempat dan sengaja seragam. Garis kirinya PERINGATAN (7,05: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); } /* ----------------------------------------------------------------------------- 35. KARTU DOKTER — potret 1:1, cip spesialisasi, dua baris jadwal -------------------------------------------------------------------------- */ .dokter { display: grid; } .dokter .potret, .dokter .potret-inisial { aspect-ratio: 1 / 1; } .dokter h3 { font-size: 1.0625rem; } .dokter .cip { margin-block: var(--r2); } .dokter dl { display: grid; gap: var(--r2); margin: var(--r3) 0 0; font-size: var(--t-kecil); } .dokter dl > div { display: flex; gap: var(--r2); align-items: flex-start; } .dokter dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .dokter dd { margin: 0; color: var(--redup); min-width: 0; } /* 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)); } }