/* ========================================================== mataBook — style.css Urutan isi berkas: 1. Warna & ukuran (CSS variables) + mode gelap 2. Dasar (body, tautan, fokus keyboard) 3. Header, pencarian, menu 4. Pilihan model baca (satu kelompok tombol menyatu) 5. Beranda: rak sampul 6. Sampul buku (gambar atau buatan CSS) 7. Buku model Halaman web (+ tampilan per buku) 8. Buku model PDF 9. Pesan, tombol, alat bantu 10. Gerakan dikurangi (prefers-reduced-motion) ========================================================== */ /* ---------- 1. WARNA & UKURAN ---------- */ /* Tema TERANG (bawaan). Semua warna situs diambil dari sini. */ :root { color-scheme: light; --latar: #F6F4EF; /* latar halaman */ --panel: #FFFFFF; /* latar kartu, header, area baca */ --teks: #1C1D21; /* teks utama */ --teks-lembut: #595B63; /* teks keterangan */ --garis: #E2DDD3; /* garis tipis pemisah */ --garis-kuat: #8E8778; /* bingkai kolom input & tombol */ /* Warna dua model baca. "-garis" dipakai untuk teks/bingkai di atas latar. */ --pdf: #B3402E; /* merah bata */ --pdf-garis: #B3402E; --web: #1F6F6B; /* hijau tosca */ --web-garis: #1F6F6B; --fokus: #0B57D0; /* cincin fokus keyboard */ --merek-mata: #16264A; /* warna tulisan "mata" */ --merek-book: #1D6FC0; /* warna tulisan "Book" */ --bayangan: 0 1px 2px rgba(0, 0, 0, .08), 0 6px 16px rgba(0, 0, 0, .08); --bayangan-naik: 0 4px 10px rgba(0, 0, 0, .12), 0 16px 32px rgba(0, 0, 0, .14); /* Dipakai tampilan per buku (bagian 7) */ --campur: 7%; /* seberapa banyak warna buku dicampur ke latar area baca */ --pencerah: 0%; /* seberapa banyak warna buku dicerahkan (0% = tidak) */ --tinggi-kepala: 3.75rem; --radius: 12px; --huruf-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Tema GELAP otomatis: mengikuti pengaturan HP/komputer, KECUALI pembaca memilih tema terang lewat menu. */ @media (prefers-color-scheme: dark) { :root:not([data-tema="terang"]) { color-scheme: dark; --latar: #121417; --panel: #1B1E22; --teks: #ECEAE5; --teks-lembut: #A9ABB2; --garis: #2E3237; --garis-kuat: #6B717A; --pdf-garis: #EE8B77; --web-garis: #62C3BA; --fokus: #8AB4F8; --merek-mata: #E8EDF5; --merek-book: #6CB0F0; --bayangan: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .35); --bayangan-naik: 0 4px 10px rgba(0, 0, 0, .55), 0 16px 32px rgba(0, 0, 0, .45); --campur: 12%; --pencerah: 55%; } } /* Tema GELAP pilihan manual (tombol "Ganti tema"). Isinya sama persis dengan blok di atas. */ :root[data-tema="gelap"] { color-scheme: dark; --latar: #121417; --panel: #1B1E22; --teks: #ECEAE5; --teks-lembut: #A9ABB2; --garis: #2E3237; --garis-kuat: #6B717A; --pdf-garis: #EE8B77; --web-garis: #62C3BA; --fokus: #8AB4F8; --merek-mata: #E8EDF5; --merek-book: #6CB0F0; --bayangan: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .35); --bayangan-naik: 0 4px 10px rgba(0, 0, 0, .55), 0 16px 32px rgba(0, 0, 0, .45); --campur: 12%; --pencerah: 55%; } /* Warna "aksen" mengikuti model baca yang aktif. app.js mengganti atribut data-model di . */ body { --aksen: var(--web); --aksen-garis: var(--web-garis); } body[data-model="pdf"] { --aksen: var(--pdf); --aksen-garis: var(--pdf-garis); } /* ---------- 2. DASAR ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; background: var(--latar); color: var(--teks); font-family: var(--huruf-ui); font-size: 1rem; line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } img { max-width: 100%; } a { color: var(--aksen-garis); } /* Lebar konten: penuh di HP (sisa 1rem kiri-kanan), maksimal 72rem di layar besar */ .wadah { width: min(100% - 2rem, 72rem); margin-inline: auto; } /* Fokus keyboard selalu terlihat jelas */ :focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; } /* Judul & area utama yang difokuskan lewat JavaScript tidak perlu cincin fokus */ .konten:focus, [tabindex="-1"]:focus { outline: none; } /* Tautan "Langsung ke isi": tersembunyi, muncul saat difokus dengan Tab */ .lewati { position: absolute; left: 1rem; top: -10rem; z-index: 100; padding: .6rem 1rem; background: var(--panel); color: var(--teks); border-radius: 8px; box-shadow: var(--bayangan-naik); font-weight: 600; } .lewati:focus { top: .75rem; } /* Teks yang hanya dibaca pembaca layar */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- 3. HEADER, PENCARIAN, MENU ---------- */ .kepala { position: sticky; top: 0; z-index: 30; background: var(--panel); border-bottom: 1px solid var(--garis); } /* Baris header: [logo + mataBook] ........ [kolom cari] [🔍] [☰] */ .kepala-dalam { display: flex; align-items: center; gap: .5rem; min-height: var(--tinggi-kepala); } /* Logo + nama web (paling kiri, satu tautan ke Beranda) */ .merek { flex-shrink: 0; margin-right: auto; /* mendorong kolom cari dan tombol ikon ke kanan */ display: inline-flex; align-items: center; /* logo dan tulisan sejajar di tengah secara vertikal */ gap: .5rem; padding: .2rem; border-radius: 8px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; line-height: 1; text-decoration: none; white-space: nowrap; } .merek-logo { flex-shrink: 0; box-sizing: content-box; width: auto; /* lebar mengikuti rasio asli gambar, tidak gepeng */ max-width: none; height: 1.75rem; /* 28px; dengan padding menjadi 32px */ padding: 2px 3px; background: #fff; /* logo berlatar putih: di mode gelap tampil sebagai ubin putih membulat */ border-radius: 6px; } .merek-mata { color: var(--merek-mata); } .merek-book { color: var(--merek-book); } /* Kolom pencarian: tersembunyi (atribut hidden) sampai tombol 🔍 diklik */ .cari { flex: 1 1 auto; min-width: 0; max-width: 24rem; margin: 0; } .cari input { width: 100%; min-height: 2.75rem; padding: .5rem 1rem; font: inherit; font-size: 1rem; /* 16px: mencegah iPhone memperbesar layar saat mengetik */ color: var(--teks); background: var(--latar); border: 1px solid var(--garis-kuat); border-radius: 999px; } .cari input::placeholder { color: var(--teks-lembut); opacity: 1; } /* Di HP, kolom cari yang terbuka menggantikan nama web untuk sementara. Di layar lebar, nama web tetap terlihat. (app.js memasang kelas .cari-terbuka) */ @media (max-width: 599px) { .cari-terbuka .merek { display: none; } .cari { max-width: none; } } /* Tombol ikon 🔍 dan ☰, berdekatan di kanan */ .kepala-aksi { display: flex; align-items: center; gap: .35rem; flex-shrink: 0; } .tombol-ikon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; font-size: 1.35rem; line-height: 1; color: var(--teks); background: transparent; border: 1px solid var(--garis-kuat); border-radius: 10px; cursor: pointer; } .tombol-ikon[aria-expanded="true"] { /* sedang terbuka (kolom cari / menu) */ background: var(--latar); border-color: var(--teks); } /* Menu dropdown */ .menu { position: relative; } .daftar-menu { position: absolute; right: 0; top: calc(100% + .5rem); width: min(18rem, 100vw - 2rem); max-height: calc(100vh - var(--tinggi-kepala) - 2rem); max-height: calc(100dvh - var(--tinggi-kepala) - 2rem); overflow-y: auto; padding: .5rem; background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayangan-naik); } /* Tiga kelompok menu (Beranda | Buku | Ganti tema), dipisah garis tipis */ .grup-menu + .grup-menu { margin-top: .4rem; padding-top: .4rem; border-top: 1px solid var(--garis); } .judul-grup { /* judul kecil "Buku" */ margin: .3rem .75rem .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); } .item-menu, .menu-buku a { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 0; border-radius: 8px; background: transparent; color: var(--teks); font: inherit; text-align: left; text-decoration: none; cursor: pointer; } .item-menu { font-weight: 600; } .item-menu svg { flex-shrink: 0; color: var(--teks-lembut); } .item-menu:hover, .menu-buku a:hover { background: var(--latar); } .menu-buku { list-style: none; margin: 0; padding: 0; } .menu-buku a { min-height: 2.5rem; font-size: .95rem; } .menu-buku a[aria-current="true"] { /* buku yang sedang dibuka */ font-weight: 700; color: var(--aksen-garis); } /* Batang kecil berwarna sampul di depan judul buku (lebarnya diatur supaya judul buku sejajar dengan tulisan "Beranda") */ .titik-buku { flex-shrink: 0; width: .55rem; height: 1rem; margin-inline: .35rem; background: var(--warna-buku); border: 1px solid color-mix(in srgb, var(--teks) 25%, transparent); border-radius: 2px; } .label-tema { margin-left: auto; /* didorong ke ujung kanan */ padding: .1rem .6rem; font-size: .85rem; color: var(--teks-lembut); border: 1px solid var(--garis-kuat); border-radius: 999px; } /* ---------- 4. PILIHAN MODEL BACA (segmented control) ---------- */ /* Satu bingkai luar membulat; dua tombol di dalamnya bersebelahan tanpa jarak */ .pilih-model { display: grid; grid-template-columns: 1fr 1fr; margin-block: .75rem 1rem; background: var(--panel); border: 1.5px solid var(--garis-kuat); border-radius: 999px; } .segmen-model { --warna: var(--web); --warna-garis: var(--web-garis); min-width: 0; min-height: 2.625rem; /* 42px: ramping, tapi tetap nyaman disentuh */ padding: .3rem .75rem; font: inherit; font-size: .95rem; font-weight: 700; line-height: 1.2; color: var(--warna-garis); /* tidak aktif: transparan, teks berwarna model */ background: transparent; border: 0; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .segmen-model[data-model="pdf"] { --warna: var(--pdf); --warna-garis: var(--pdf-garis); } /* Sudut luar ikut membulat; garis tipis di tengah sebagai pembatas */ .segmen-model:first-child { border-radius: 999px 0 0 999px; } .segmen-model:last-child { border-radius: 0 999px 999px 0; border-left: 1px solid var(--garis-kuat); } .segmen-model[aria-pressed="true"] { /* aktif: terisi warna model */ color: #fff; background: var(--warna); } .segmen-model:focus-visible { /* cincin fokus tampil di atas tombol tetangga */ position: relative; z-index: 1; } @media (hover: hover) { .segmen-model:not([aria-pressed="true"]):hover { background: color-mix(in srgb, var(--warna-garis) 10%, transparent); } } /* ---------- 5. BERANDA: RAK SAMPUL ---------- */ .konten { min-height: 50vh; padding-bottom: 3rem; } .kepala-rak { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; margin-bottom: 1.1rem; } .kepala-rak h1 { margin: 0; font-size: 1.35rem; } .info-rak { margin: 0; font-size: .95rem; color: var(--teks-lembut); } .info-rak strong { color: var(--aksen-garis); } .rak { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 kolom di HP */ gap: 1.5rem 1rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .rak { grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 kolom mulai 700px */ gap: 2rem 1.5rem; } } .kartu-buku { display: flex; flex-direction: column; gap: .2rem; color: var(--teks); text-decoration: none; border-radius: 8px; transition: transform .2s ease; } .kartu-buku .sampul { margin-bottom: .6rem; box-shadow: var(--bayangan); transition: box-shadow .2s ease; } .kartu-judul { font-weight: 700; line-height: 1.3; overflow-wrap: break-word; } .kartu-penulis { font-size: .9rem; color: var(--teks-lembut); } /* Efek naik sedikit saat disorot (mouse) atau difokus (keyboard) */ .kartu-buku:focus-visible { outline-offset: 5px; transform: translateY(-4px); } .kartu-buku:focus-visible .sampul { box-shadow: var(--bayangan-naik); } @media (hover: hover) { .kartu-buku:hover { transform: translateY(-4px); } .kartu-buku:hover .sampul { box-shadow: var(--bayangan-naik); } } /* ---------- 6. SAMPUL BUKU ---------- */ /* Kotak sampul selalu berrasio 2:3. Di dalamnya ada sampul buatan CSS; kalau ada gambar, gambar menutupinya. */ .sampul { position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px 8px 8px 3px; background: var(--warna-buku, #555); container-type: inline-size; /* supaya ukuran huruf sampul ikut lebar sampul */ } .sampul img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sampul-css { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem .8rem .8rem 1.1rem; padding: 13cqi 10cqi 10cqi 16cqi; /* cqi = persen lebar sampul */ color: #fff; background: linear-gradient(155deg, color-mix(in srgb, var(--warna-buku) 85%, #fff), var(--warna-buku) 55%, color-mix(in srgb, var(--warna-buku) 75%, #000)); font-family: var(--huruf-judul, Georgia, serif); } /* Garis punggung buku di sisi kiri */ .sampul-css::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6cqi; width: 1.5cqi; background: rgba(255, 255, 255, .2); } .sampul-judul { font-size: 1.05rem; font-size: 11.5cqi; font-weight: 700; line-height: 1.15; overflow-wrap: break-word; } .sampul-judul::after { /* garis hiasan di bawah judul */ content: ""; display: block; width: 32%; height: 2px; margin-top: 7cqi; background: currentColor; opacity: .7; } .sampul-penulis { font-family: var(--huruf-ui); font-size: .72rem; font-size: 6.5cqi; letter-spacing: .05em; text-transform: uppercase; opacity: .92; } .sampul.mini .sampul-penulis { display: none; } /* ---------- 7. BUKU MODEL HALAMAN WEB ---------- */ /* Warna judul = warna buku. Di mode gelap dicerahkan (lihat --pencerah) supaya tetap terbaca di latar gelap. */ .buku-web { --warna-judul: color-mix(in srgb, var(--warna-buku), #fff var(--pencerah)); } /* Daftar samping. Di HP: barisan mendatar yang bisa digeser. */ .daftar-samping { margin-bottom: .75rem; } .daftar-samping ol { position: relative; /* dipakai app.js untuk menggeser ke item aktif */ display: flex; gap: .5rem; margin: 0; padding: .35rem; /* ruang untuk cincin fokus */ list-style: none; overflow-x: auto; /* bisa digeser mendatar */ overscroll-behavior-x: contain; scrollbar-width: thin; } .daftar-samping li { flex: 0 0 auto; } .daftar-samping a { display: flex; align-items: center; gap: .4rem; max-width: 15rem; min-height: 2.75rem; padding: .45rem .95rem; color: var(--teks); background: var(--panel); border: 1px solid var(--garis-kuat); border-radius: 999px; text-decoration: none; white-space: nowrap; } .daftar-samping .nomor-kecil { flex-shrink: 0; font-weight: 700; white-space: nowrap; color: var(--aksen-garis); } .daftar-samping .judul-kecil { overflow: hidden; text-overflow: ellipsis; } .daftar-samping a[aria-current="page"] { color: #fff; background: var(--aksen); border-color: var(--aksen); } .daftar-samping a[aria-current="page"] .nomor-kecil { color: inherit; } /* Layar lebar: daftar samping jadi kolom kiri yang menempel */ @media (min-width: 800px) { .buku-web { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; } .daftar-samping { position: sticky; top: calc(var(--tinggi-kepala) + 1rem); margin: 0; } .daftar-samping ol { flex-direction: column; gap: .2rem; overflow: visible; } .daftar-samping a { align-items: baseline; max-width: none; background: transparent; border-color: transparent; border-radius: 8px; white-space: normal; } .daftar-samping a:hover:not([aria-current="page"]) { background: color-mix(in srgb, var(--aksen-garis) 12%, transparent); } } .kolom-baca { min-width: 0; } /* Area baca: latar = warna buku dicampur tipis dengan warna panel */ .area-baca { padding: clamp(1.25rem, 5vw, 3rem) clamp(1rem, 5vw, 3rem); font-family: var(--huruf-isi); background: var(--panel); background: color-mix(in srgb, var(--warna-buku) var(--campur), var(--panel)); border: 1px solid var(--garis); border-radius: var(--radius); } /* Kolom teks dibatasi sekitar 65 karakter supaya nyaman dibaca */ .isi-baca { max-width: 65ch; margin-inline: auto; } .nama-buku { margin: 0 0 1.5rem; font-family: var(--huruf-judul); font-size: .95rem; color: var(--teks-lembut); } .label-halaman { margin: 0 0 .5rem; font-family: var(--huruf-ui); font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--warna-judul); } .judul-halaman { margin: 0 0 1.5rem; font-family: var(--huruf-judul); font-size: clamp(1.6rem, 1.2rem + 2vw, 2.3rem); line-height: 1.2; color: var(--warna-judul); overflow-wrap: break-word; } /* Empat gaya hiasan judul halaman (diatur lewat "hiasan" di books.json) */ .hiasan-line .judul-halaman { /* garis bawah */ padding-bottom: .5rem; border-bottom: 3px solid var(--warna-judul); } .hiasan-bar .judul-halaman { /* batang di kiri */ padding-left: .85rem; border-left: 6px solid var(--warna-judul); } .hiasan-dbl .judul-halaman { /* garis ganda di atas */ padding-top: .6rem; border-top: 6px double var(--warna-judul); } .hiasan-box .judul-halaman { /* judul dalam kotak berwarna */ padding: .55rem .9rem; color: #fff; background: var(--warna-buku); border-radius: 6px; } /* Teks bacaan */ .teks-baca { font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); /* 17px sampai 19px */ line-height: 1.75; overflow-wrap: break-word; } .teks-baca p { margin: 0 0 1.1em; } .teks-baca h2 { margin: 1.9em 0 .6em; font-family: var(--huruf-judul); font-size: 1.3em; line-height: 1.3; color: var(--warna-judul); } .hiasan-line .teks-baca h2 { padding-bottom: .2rem; border-bottom: 1px solid color-mix(in srgb, var(--warna-judul) 45%, transparent); } .hiasan-bar .teks-baca h2 { padding-left: .6rem; border-left: 4px solid var(--warna-judul); } .hiasan-dbl .teks-baca h2 { padding-top: .35rem; border-top: 3px double var(--warna-judul); } .hiasan-box .teks-baca h2 { display: inline-block; padding: .1rem .55rem; background: color-mix(in srgb, var(--warna-buku) 16%, transparent); border-radius: 4px; } .teks-baca ul, .teks-baca ol { padding-left: 1.4em; } .teks-baca li { margin-bottom: .4em; } .teks-baca a { color: var(--warna-judul); } .teks-baca blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1em; font-style: italic; border-left: 3px solid var(--warna-judul); } .teks-baca img { height: auto; } .teks-baca pre, .teks-baca table { display: block; max-width: 100%; overflow-x: auto; /* tabel lebar digeser di dalam kotaknya saja */ } /* Halaman "Sampul" */ .halaman-sampul { display: grid; gap: 1.5rem; } .halaman-sampul .sampul { justify-self: center; width: min(15rem, 70%); box-shadow: var(--bayangan-naik); } .info-sampul .penulis { margin: 0 0 .4rem; font-size: 1.15rem; } .info-sampul .detail { margin: 0 0 1.4rem; font-family: var(--huruf-ui); color: var(--teks-lembut); } @media (min-width: 600px) { .halaman-sampul { grid-template-columns: 13rem minmax(0, 1fr); align-items: center; gap: 2rem; } .halaman-sampul .sampul { width: 100%; } } /* Halaman "Daftar isi" */ .daftar-isi { margin: 0; padding: 0; list-style: none; font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); } .daftar-isi li + li { border-top: 1px solid color-mix(in srgb, var(--warna-judul) 25%, transparent); } .daftar-isi a { display: flex; align-items: baseline; gap: 1rem; padding: .85rem .25rem; color: var(--teks); text-decoration: none; } .daftar-isi .nomor-bab { min-width: 1.5em; font-family: var(--huruf-judul); font-weight: 700; color: var(--warna-judul); } .daftar-isi a:hover .judul-bab { text-decoration: underline; } /* Tombol Sebelumnya / Berikutnya */ .navigasi-halaman { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-top: 1.25rem; } .ke-sebelum { grid-column: 1; justify-self: start; } .posisi { grid-column: 2; } .ke-sesudah { grid-column: 3; justify-self: end; } .posisi { font-size: .9rem; color: var(--teks-lembut); font-variant-numeric: tabular-nums; } @media (max-width: 399px) { .posisi { display: none; } } /* ---------- 8. BUKU MODEL PDF ---------- */ .pdf-kepala { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .pdf-kepala .sampul { flex: 0 0 4.5rem; width: 4.5rem; box-shadow: var(--bayangan); } .pdf-kepala > div { min-width: 0; } .judul-pdf { margin: 0; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); line-height: 1.2; overflow-wrap: break-word; } .pdf-kepala .penulis { margin: .2rem 0 0; color: var(--teks-lembut); } .pdf-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-bottom: 1rem; } .tautan-cadangan { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--aksen-garis); } .bingkai-pdf { overflow: hidden; background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayangan); } .bingkai-pdf iframe { display: block; width: 100%; height: 78vh; height: 78dvh; min-height: 26rem; border: 0; } .catatan { margin: .75rem 0 0; font-size: .9rem; color: var(--teks-lembut); } .pdf-tidak-didukung { padding: 1.25rem 1.5rem; background: var(--panel); border: 2px dashed var(--aksen-garis); border-radius: var(--radius); } .pdf-tidak-didukung p { margin: 0 0 .5rem; } .pdf-tidak-didukung p:last-child { margin: 0; } /* ---------- 9. PESAN, TOMBOL, ALAT BANTU ---------- */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; /* cukup besar untuk jari */ padding: .55rem 1.1rem; font: inherit; font-family: var(--huruf-ui); font-size: .95rem; font-weight: 700; color: #fff; background: var(--aksen); border: 2px solid var(--aksen); border-radius: 999px; text-decoration: none; white-space: nowrap; cursor: pointer; } .tombol-garis { color: var(--aksen-garis); background: transparent; border-color: var(--aksen-garis); } @media (hover: hover) { .tombol:hover { background: color-mix(in srgb, var(--aksen) 82%, #000); } .tombol-garis:hover { background: color-mix(in srgb, var(--aksen-garis) 12%, transparent); } } .memuat { padding: 2rem 0; color: var(--teks-lembut); } /* Tombol "Muat lebih banyak" di bawah rak (hanya muncul kalau buku lebih dari 24) */ .muat-lagi { display: flex; justify-content: center; margin-top: 2rem; } .muat-lagi .tombol:disabled { opacity: .6; cursor: progress; } .pesan { padding: 2.5rem 1.25rem; text-align: center; background: var(--panel); border: 1px solid var(--garis); border-radius: var(--radius); } .pesan h1 { margin-top: 0; font-size: 1.5rem; } .pesan code { overflow-wrap: anywhere; } .kosong { padding: 2rem 1rem; text-align: center; color: var(--teks-lembut); background: var(--panel); border: 1px dashed var(--garis-kuat); border-radius: var(--radius); } /* ---------- 10. GERAKAN DIKURANGI ---------- */ /* Kalau pembaca mematikan animasi di pengaturan HP/komputer */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .kartu-buku:hover, .kartu-buku:focus-visible { transform: none; } }