/* ============================================================================ muslimhub.css — Design System MuslimHub ---------------------------------------------------------------------------- Palet warna diambil dari sampling piksel rekom.png: • Deep green #0B4A3A (hero gelap, logo, tombol primer) • Mid green #116350 / #0E5745 (gradien logo, aksen) • Mint bg #F2F8F5 (latar halaman bagian bawah) • Cream #FBF7F0 (kartu hangat) • Gold #F7A333 (jam countdown, ikon dzuhur, aksen) • Peach sky #FFE7CC (langit senja di hero illustration) Mobile-first, card rounded besar, shadow lembut, pattern islami halus. ========================================================================== */ /* ---------- Design tokens ---------- */ :root { --green-900: #07352A; --green-800: #0B4A3A; --green-700: #0E5745; --green-600: #116350; --green-500: #17755C; --green-100: #DCEFE7; --green-50: #EDF7F2; --gold-500: #F7A333; --gold-100: #FDEED8; --peach-300: #FFE7CC; --cream: #FBF7F0; --ink-900: #101613; --ink-700: #33413A; --ink-500: #66756D; --ink-300: #9AA8A0; --bg-page: #F4F8F6; --bg-card: #FFFFFF; --radius-xl: 22px; --radius-lg: 16px; --radius-md: 12px; --radius-pill: 999px; --shadow-card: 0 10px 30px rgba(7, 53, 42, .08), 0 2px 8px rgba(7, 53, 42, .05); --shadow-float: 0 16px 40px rgba(7, 53, 42, .22); --line: #E4EDE8; /* pemisah tipis antar baris list menu */ --nav-h: 64px; --header-h: 60px; --font-ui: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-arab: 'Amiri Quran', 'Amiri', 'Scheherazade New', serif; --safe-bottom: env(safe-area-inset-bottom, 0px); } /* Tema gelap: diganti via [data-theme="dark"] di */ [data-theme="dark"] { --bg-page: #0C1512; --bg-card: #14201B; --ink-900: #EAF4EF; --ink-700: #C2D6CC; --ink-500: #8FA69B; --ink-300: #5E7268; --green-50: #12241D; --green-100: #1A3529; --cream: #161F1B; --shadow-card: 0 10px 30px rgba(0, 0, 0, .4); } /* ---------- @font-face (font lokal, tanpa CDN) ---------- Semua font diunduh ke /assets/fonts/ agar aplikasi 100% offline. font-display: swap → teks tampil dulu dengan fallback, font menyusul. */ @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Amiri latin (teks melayang/quote) */ @font-face { font-family: 'Amiri'; src: url('../fonts/amiri-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Amiri'; src: url('../fonts/amiri-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Amiri subset Arab — dipakai utk ayat Al-Qur'an (--font-arab). */ @font-face { font-family: 'Amiri Quran'; src: url('../fonts/amiri-arab-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } @font-face { font-family: 'Amiri Quran'; src: url('../fonts/amiri-arab-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; } /* ---------- Reset & dasar ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-ui); background: var(--bg-page); color: var(--ink-900); line-height: 1.55; min-height: 100dvh; /* Pattern geometris islami sangat halus (SVG data-uri, opacity rendah) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%230B4A3A' stroke-opacity='0.045'%3E%3Cpath d='M28 0l28 28-28 28L0 28z'/%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3C/g%3E%3C/svg%3E"); } [data-theme="dark"] body { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23DCEFE7' stroke-opacity='0.04'%3E%3Cpath d='M28 0l28 28-28 28L0 28z'/%3E%3Ccircle cx='28' cy='28' r='9'/%3E%3C/g%3E%3C/svg%3E"); } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } input, select { font: inherit; } :focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } /* ---------- Layout umum ---------- */ .app { max-width: 1100px; margin: 0 auto; padding: 0 16px calc(var(--nav-h) + var(--safe-bottom) + 20px); } .section { margin-top: 26px; } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .section-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin: 0; } .section-title .leaf { color: var(--green-600); } .link-more { color: var(--green-600); font-weight: 600; font-size: 13px; } .link-more:hover { text-decoration: underline; } /* ---------- Header (sticky, bar menempel ke atas) ---------- Menempel penuh ke tepi atas (top:0, tanpa margin & tanpa sudut bulat) supaya konten tengah lebih fokus terlihat — bayangan lembut hanya di bawah bar sebagai pemisah. */ .header { position: sticky; top: 0; z-index: 50; background: var(--bg-card); border-radius: 0; box-shadow: 0 2px 12px -6px rgba(11, 74, 58, 0.18); margin: 0; padding: 8px 14px; display: flex; align-items: center; gap: 10px; } .header .brand { display: flex; align-items: center; gap: 10px; min-width: 0; } .header .brand img { width: 38px; height: 38px; } /* Header 1 baris: logo + nama saja — tagline dihapus agar tidak melebar ke bawah */ .header .brand-name { font-size: 19px; font-weight: 800; color: var(--green-800); letter-spacing: -.3px; line-height: 1.1; } .header .spacer { flex: 1; } .icon-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-700); transition: background .15s; } .icon-btn:hover { background: var(--green-50); } .icon-btn svg { width: 21px; height: 21px; } /* ---------- Hero ---------- */ .hero { position: relative; margin-top: 14px; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); } /* ---------- Banner unduh APK (di bawah hero, hanya tampil di web) ---------- */ .dl-banner { display: flex; align-items: center; gap: 12px; margin-top: 10px; margin-bottom: 44px; padding: 12px 14px; background: linear-gradient(120deg, var(--green-800), var(--green-600)); color: #fff; text-decoration: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; } .dl-banner:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11, 74, 58, .28); } .dl-banner:active { transform: translateY(0); } .dl-banner .dl-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); } .dl-banner .dl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dl-banner .dl-title { font-weight: 800; font-size: 14.5px; letter-spacing: -.2px; } .dl-banner .dl-sub { font-size: 12px; color: var(--mint-200, #B9D6C9); } .dl-banner .dl-cta { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--gold-500, #D9A441); color: #173028; font-weight: 800; font-size: 13px; } @media (max-width: 380px) { .dl-banner .dl-cta { display: none; } /* layar sempit: seluruh banner klik */ } .hero img.hero-bg { width: 100%; height: 240px; object-fit: cover; } .hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7,53,42,.88) 0%, rgba(11,74,58,.72) 34%, rgba(11,74,58,.18) 62%, rgba(255,231,204,0) 75%); } .hero .hero-content { position: absolute; inset: 0; padding: 22px 20px; display: flex; flex-direction: column; justify-content: flex-end; } .hero .hero-greeting { color: var(--peach-300); font-weight: 600; font-size: 13px; margin: 0 0 4px; } .hero .hero-title { color: #fff; font-size: 27px; font-weight: 800; line-height: 1.18; margin: 0 0 6px; letter-spacing: -.4px; } .hero .hero-quote { color: #E7F2EC; font-size: 12.5px; max-width: 300px; margin: 0; opacity: .92; } .hero .hero-quote-src { color: #B9D6C9; font-size: 11px; margin-top: 2px; display: block; } .hero .hero-cta { margin-top: 14px; align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; background: var(--green-600); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill); font-weight: 600; font-size: 13.5px; box-shadow: 0 6px 18px rgba(7,53,42,.35); transition: transform .15s, background .15s; } .hero .hero-cta:hover { background: var(--green-500); transform: translateY(-1px); } .hero .hero-script { position: absolute; top: 16px; right: 18px; text-align: right; color: #fff; font-style: italic; font-weight: 600; line-height: 1.25; font-size: 14px; text-shadow: 0 1px 8px rgba(7,53,42,.5); } /* ---------- Kartu dasar ---------- */ .card { background: var(--bg-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: 16px; } .card-title { font-size: 15px; font-weight: 700; margin: 0 0 4px; } .card-sub { color: var(--ink-500); font-size: 12.5px; margin: 0; } /* ---------- Prayer card ---------- */ /* Kartu sholat selalu "menimpa" elemen di atasnya (margin-top negatif). Saat banner unduh tampil di antara hero & kartu, banner diberi ruang bawah ekstra agar kartu menimpa RUANG KOSONG, bukan isi banner. ⚠ Margin negatif HANYA aman saat kartu tepat di bawah hero/banner. Di beranda, section "Lanjutkan Baca" bisa berada di antara keduanya — kasus itu ditangani JS (home.js) yang menggeser margin ke section berikutnya via class .prayer-card--float. */ .prayer-card { margin-top: -34px; position: relative; z-index: 2; margin-inline: 8px; } /* float = tanpa timbulan hero. Beri jarak normal 26px dari section di atasnya (mis. "Lanjutkan Baca") — dulu 0, kartu jadi menempel. */ .prayer-card--float { margin-top: 26px; } /* Kartu sholat di halaman NON-home (mis. /ibadah) berada tepat setelah section header kecil (salam + tanggal) — margin negatif global akan MENIMPA teks tanggal. Halaman itu tidak punya hero untuk ditimpa, jadi kartu tampil normal. */ #ibadah-prayer-card { margin-top: 12px; } .dl-banner { margin-bottom: 44px; } .prayer-head { display: flex; align-items: center; gap: 10px; } .prayer-loc-icon { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--green-50); color: var(--green-600); display: flex; align-items: center; justify-content: center; } .prayer-loc-icon svg { width: 20px; height: 20px; } .prayer-head .titles { flex: 1; min-width: 0; } .prayer-head .city { font-weight: 700; font-size: 14.5px; } .prayer-head .region { color: var(--ink-500); font-size: 12px; } .btn-pill { border-radius: var(--radius-pill); padding: 8px 14px; font-size: 12.5px; font-weight: 600; background: var(--green-50); color: var(--green-700); } .btn-pill:hover { background: var(--green-100); } .btn-pill.solid { background: var(--green-600); color: #fff; } .btn-pill.solid:hover { background: var(--green-500); } .prayer-datebar { display: flex; justify-content: space-between; gap: 8px; color: var(--ink-500); font-size: 12.5px; margin: 12px 0 10px; } .prayer-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; } /* * Layout 4-4 (permintaan user): 8 kartu waktu = 2 baris × 4 kolom — * pas atas-bawah, tidak ada kolom kosong menggantung seperti grid 5. */ .prayer-grid.grid4 { grid-template-columns: repeat(4, 1fr); } /* * Imsak lebih mantap: aksen emas (khas pusat Ramadhan) — ikon & waktu * berwarna emas + border tipis, tanpa mengalahkan highlight hijau waktu * berikutnya (Maghrib dsb. tetap blok hijau penuh). */ .prayer-item.imsak { background: color-mix(in srgb, var(--gold-500) 10%, var(--bg-page)); border-color: color-mix(in srgb, var(--gold-500) 45%, transparent); } .prayer-item.imsak .p-icon, .prayer-item.imsak .p-time { color: var(--gold-600, #E08C1A); } .prayer-item.imsak .p-name { color: var(--ink-600, #5c6b64); font-weight: 600; } .prayer-item.imsak.active { background: var(--green-800); border-color: var(--green-800); /* waktu berikutnya tetap menang */ } .prayer-item.imsak.active .p-icon, .prayer-item.imsak.active .p-time { color: var(--gold-500); } .prayer-item.imsak.active .p-name { color: #B9D6C9; } .prayer-item { border-radius: var(--radius-md); padding: 10px 4px 8px; text-align: center; background: var(--bg-page); border: 1.5px solid transparent; } .prayer-item .p-icon { width: 26px; height: 26px; margin: 0 auto 4px; color: var(--green-600); } .prayer-item .p-name { font-size: 11.5px; color: var(--ink-500); font-weight: 500; } .prayer-item .p-time { font-size: 14.5px; font-weight: 700; color: var(--ink-900); } .prayer-item.active { background: var(--green-800); border-color: var(--green-800); } .prayer-item.active .p-name { color: #B9D6C9; } .prayer-item.active .p-time { color: #fff; } .prayer-item.active .p-icon { color: var(--gold-500); } /* Countdown banner — latar hijau tua + pola geometri islami (khatam/bintang 8). Pola digambar via SVG data-URI (tanpa file gambar): garis emas tipis transparan di atas gradien hijau tua. Teks memakai warna terang agar tetap terbaca di atas latar gelap. */ .countdown { margin-top: 12px; border-radius: var(--radius-lg); background: /* Pola islami: bintang 8 (khatam) + segi enam — tile 72px */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F7A333' stroke-opacity='.16' stroke-width='1'%3E%3Cpath d='M36 10 42 18 51 15.5 50 25 59 27 52.5 33.5 59 40 50 42 51 51.5 42 49 36 57 30 49 21 51.5 22 42 13 40 19.5 33.5 13 27 22 25 21 15.5 30 18z'/%3E%3Ccircle cx='36' cy='33.5' r='7'/%3E%3Crect x='7' y='7' width='10' height='10'/%3E%3Crect x='55' y='55' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E") center/72px auto, linear-gradient(120deg, #0B4A3A 0%, #116350 55%, #0E5745 100%); display: flex; align-items: center; gap: 12px; padding: 12px 14px; position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(7,53,42,.22); } [data-theme="dark"] .countdown { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23F7A333' stroke-opacity='.13' stroke-width='1'%3E%3Cpath d='M36 10 42 18 51 15.5 50 25 59 27 52.5 33.5 59 40 50 42 51 51.5 42 49 36 57 30 49 21 51.5 22 42 13 40 19.5 33.5 13 27 22 25 21 15.5 30 18z'/%3E%3Ccircle cx='36' cy='33.5' r='7'/%3E%3Crect x='7' y='7' width='10' height='10'/%3E%3Crect x='55' y='55' width='10' height='10'/%3E%3C/g%3E%3C/svg%3E") center/72px auto, linear-gradient(120deg, #0A3B30, #0D4438 55%, #0A3B30); } .countdown .mosque-art { width: 74px; flex: none; color: rgba(255,255,255,.92); opacity: .95; } .countdown .cd-label { font-size: 12px; color: #CFE6DC; } /* Jam countdown WAJIB satu baris: font adaptif + tanpa spasi di pemisah ("01:06:43", bukan "01 : 06 : 43") supaya tidak wrap "43" ke baris bawah. */ .countdown .cd-clock { font-size: clamp(19px, 6vw, 26px); font-weight: 800; color: var(--gold-500); font-variant-numeric: tabular-nums; letter-spacing: 1.5px; line-height: 1.15; white-space: nowrap; /* paksa HH:MM:SS tetap satu baris di layar sempit */ } /* Label Jam/Menit/Detik: satu baris, direntangkan menyesuaikan lebar jam */ .countdown .cd-units { display: flex; gap: clamp(14px, 6vw, 30px); font-size: 10.5px; color: #CFE6DC; margin-top: 2px; white-space: nowrap; } .countdown .cd-go { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--green-800); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(7,53,42,.3); } .countdown .cd-go svg { width: 18px; height: 18px; } /* ---------- TATA CARA WUDHU (fitur-tata-cara-wudhu.md) ----------------- */ .wu-scope { margin-top: 12px; padding: 14px 16px; font-size: 12.5px; color: var(--ink-700); line-height: 1.6; } .wu-prep { margin-top: 0; padding: 16px; } .wu-checks { margin: 10px 0 0 18px; font-size: 13.5px; color: var(--ink-700); line-height: 1.8; } .wu-img { width: 100%; max-height: 220px; object-fit: cover; object-position: center 20%; border-radius: var(--radius-md); margin-bottom: 10px; background: var(--green-50); } .wu-step { margin-top: 12px; padding: 16px; scroll-margin-top: 70px; } .wu-step.wu-done { opacity: .66; } .wu-step.wu-done .wu-title { text-decoration: line-through; text-decoration-color: var(--green-600); } .wu-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .wu-num { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--green-100, #DCEDE5); color: var(--green-800); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; } .wu-num.done { background: var(--green-800); color: #fff; } .wu-title { font-weight: 700; font-size: 15px; color: var(--ink-900); } .wu-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 6px; white-space: nowrap; } .wu-badge.fardhu { background: var(--green-800); color: #fff; } .wu-badge.sunnah { background: var(--green-50); color: var(--green-700); } .wu-check { width: 32px; height: 32px; font-weight: 800; font-size: 16px; flex: none; color: var(--ink-400, #9AA8A0); } .wu-check.checked { background: var(--green-800); color: #fff; } .wu-how { margin-top: 8px; font-size: 13.5px; color: var(--ink-700); line-height: 1.65; } .wu-detail { margin-top: 6px; font-size: 12.5px; color: var(--ink-500); line-height: 1.6; } .wu-sunnah { margin-top: 8px; padding: 8px 12px; font-size: 12.5px; background: var(--green-50); border-radius: var(--radius-md); color: var(--ink-700); } .wu-warning { margin-top: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; background: linear-gradient(95deg, #FDECEA, #FBDDD9); border-radius: var(--radius-md); color: #9A2C1F; font-weight: 500; } [data-theme="dark"] .wu-warning { background: linear-gradient(95deg, #2A1512, #241210); color: #E8A79A; } .wu-note { margin-top: 8px; font-size: 12px; color: var(--ink-500); line-height: 1.55; } .wu-keutamaan { margin-top: 10px; padding: 9px 12px; font-size: 12.5px; background: linear-gradient(95deg, var(--green-50), var(--cream)); border-radius: var(--radius-md); color: var(--ink-700); } .wu-repeat { flex: none; font-weight: 800; font-size: 13px; color: var(--green-700); background: var(--green-50); border-radius: var(--radius-pill); padding: 4px 11px; font-variant-numeric: tabular-nums; } .wu-repeat.once { color: var(--ink-500); background: var(--bg-page, #F4F8F6); } /* ---------- DZIKIR & DOA SESUDAH SHOLAT (fitur-doa-sesudah-sholat.md) --- */ .dz-disclaimer { margin-top: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--ink-700); background: linear-gradient(95deg, #FFF7E8, #FDF3DF); border-radius: var(--radius-md); } [data-theme="dark"] .dz-disclaimer { background: linear-gradient(95deg, #2A2313, #241E10); color: #D8CBA8; } .dz-progress-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .dz-item { margin-top: 12px; padding: 16px; } .dz-item.dz-done { opacity: .68; } .dz-item.dz-done .ayah-arab { color: var(--green-700); } .dz-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .dz-step { width: 26px; height: 26px; border-radius: 50%; flex: none; background: var(--green-800); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .dz-title { font-weight: 700; font-size: 15px; color: var(--ink-900); } .dz-sub { font-size: 11.5px; color: var(--ink-500); margin-top: 1px; } .dz-grade { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 6px; white-space: nowrap; } .dz-grade.shahih { background: var(--green-50); color: var(--green-700); } .dz-grade.hasan { background: #FFF3E0; color: #B26A00; } .dz-hadith { margin-top: 8px; padding: 8px 12px; font-size: 12.5px; font-style: italic; background: var(--green-50); border-radius: var(--radius-md); color: var(--ink-700); } .dz-note { margin-top: 8px; font-size: 12px; color: var(--ink-500); line-height: 1.55; } .dz-keutamaan { margin-top: 10px; padding: 9px 12px; font-size: 12.5px; background: linear-gradient(95deg, var(--green-50), var(--cream)); border-radius: var(--radius-md); color: var(--ink-700); } .dz-tap { font-weight: 700; font-size: 13px; padding: 8px 12px; } .dz-tasbih-row { padding: 10px 0; border-bottom: 1px dashed var(--line, #E4EDE8); } .dz-tasbih-row:last-of-type { border-bottom: none; } .dz-tasbih-row.dz-done { opacity: .62; } .dz-tasbih-arab { font-family: var(--font-arab); font-size: 24px; color: var(--green-800); line-height: 1.7; } .dz-tasbih-latin { font-size: 12.5px; color: var(--ink-500); margin: 2px 0 6px; } .dz-table { width: 100%; border-collapse: collapse; background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; font-size: 12.5px; box-shadow: var(--shadow-card); } .dz-table th, .dz-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line, #E4EDE8); } .dz-table th { background: var(--green-50); color: var(--green-800); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; } .dz-table tr:last-child td { border-bottom: none; } /* Rekomendasi topik pencarian (Jelajah): SATU BARIS horizontal. flex + nowrap + overflow-x auto → chip tidak perlu wrap ke baris bawah; scrollbar disembunyikan agar rapi, tetap bisa di-swipe/di-scroll. */ .jel-topics { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .jel-topics::-webkit-scrollbar { display: none; } .jel-topics .btn-pill { flex: none; white-space: nowrap; } /* ---------- Quick menu grid ---------- */ .quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .quick-item { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 12px 6px 10px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; transition: transform .15s; } .quick-item:hover { transform: translateY(-2px); } .quick-item .q-icon { width: 42px; height: 42px; border-radius: 13px; color: #fff; display: flex; align-items: center; justify-content: center; } .quick-item .q-icon svg { width: 22px; height: 22px; } .quick-item .q-label { font-size: 11px; font-weight: 600; color: var(--ink-700); } /* ---------- Ayat / Hadits hari ini ---------- */ .verse-card { background: var(--bg-card); } .verse-arab { font-family: var(--font-arab); direction: rtl; font-size: 26px; line-height: 2; color: var(--ink-900); text-align: right; margin: 8px 2px; } .verse-text { color: var(--ink-700); font-size: 13.5px; margin: 6px 0; } .verse-ref { color: var(--green-600); font-weight: 600; font-size: 12.5px; } .verse-actions { display: flex; align-items: center; gap: 8px; margin-top: 10px; } /* ---------- Daftar list (surah/hadits/doa) ---------- */ .list-card { display: flex; flex-direction: column; gap: 10px; } /* Tampilan list NORMAL: tanpa bayangan/kartu-per-baris — hanya pemisah garis tipis antar baris (menu-card). List lain (surah/hadits/doa) tetap bergaya kartu via .list-card > .row-item di bawah. */ .row-item { display: flex; align-items: center; gap: 12px; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 12px 14px; transition: transform .12s; } .menu-card .row-item { background: transparent; border-radius: 0; box-shadow: none; padding: 13px 6px; } .menu-card .row-item + .row-item { border-top: 1px solid var(--line); } .menu-card .row-item:hover { background: var(--green-50); border-radius: var(--radius-md); } .row-item:hover { transform: translateY(-1px); } .menu-card .row-item:hover { transform: none; } .row-num { width: 38px; height: 38px; border-radius: 50%; flex: none; background: var(--green-50); color: var(--green-700); font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; } .row-body { flex: 1; min-width: 0; } /* Judul & meta list: SATU BARIS selalu — kelebihan teks dipangkas "…" (menu spesifik mendapat efek marquee, lihat blok MENU ONE-LINE di bawah). */ .row-title { font-weight: 700; font-size: 14.5px; color: var(--ink-900); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-meta { color: var(--ink-500); font-size: 12px; margin-top: 1px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- MENU LIST DUA BARIS + MARQUEE DI BARIS KEDUA ---------------- Baris 1: judul tebal — SELALU statis (tidak ikut bergerak). Baris 2: keterangan; bila lebih panjang dari kartu → bergerak kanan-kiri (marquee bolak-balik, class .mq ditambah oleh enhanceMenuRows()). */ .menu-card .row-body { min-width: 0; } .menu-card .row-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menu-card .row-meta { display: block; white-space: nowrap; overflow: hidden; margin-left: 0; /* kembali ke bawah judul, bukan menyambung di kanan */ } /* .mq-inner WAJIB inline-block sejak awal agar scrollWidth terukur (display:inline menghasilkan scrollWidth=0 → deteksi overflow gagal). */ .menu-card .row-meta .mq-inner { display: inline-block; } .menu-card .row-meta.mq > .mq-inner { animation: mqSlide 7s ease-in-out infinite alternate; } /* Daftar surah /quran — meta yang panjang ikut pola marquee yang sama. (Selector terpisah karena #surah-list bukan .menu-card.) */ .quran-row .row-meta .mq-inner { display: inline-block; } .quran-row .row-meta.mq > .mq-inner { animation: mqSlide 7s ease-in-out infinite alternate; } @media (prefers-reduced-motion: reduce) { .quran-row .row-meta.mq > .mq-inner { animation: none; } } @keyframes mqSlide { 0%, 25% { transform: translateX(0); } 75%, 100% { transform: translateX(var(--mq-shift, -40px)); } } /* Hormati prefers-reduced-motion: tampilkan ellipsis saja, tanpa animasi */ @media (prefers-reduced-motion: reduce) { .menu-card .row-meta.mq > .mq-inner { animation: none; } } .row-arab { font-family: var(--font-arab); direction: rtl; font-size: 21px; color: var(--green-800); line-height: 1.7; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-theme="dark"] .row-arab { color: var(--green-100); } .row-chevron { color: var(--ink-300); flex: none; } /* Daftar surah /quran — 2 kolom: latin kiri, Arab kanan (pola kartu surah). Kolom Arab AUTO-FIT: lebar mengikuti isi (nama Arab terpanjang ~"الْمُؤْمِنُون") tanpa memotong; kolom latin sisanya. Judul latin TAMPIL PENUH (boleh wrap 2 baris) — tidak pernah ellipsis; meta di bawahnya justru yang di-marquee bila panjang (dikawal enhanceMenuRows dari quran.js). */ .quran-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; } .quran-row .row-title { white-space: normal; /* judul tampil PENUH, wrap bila perlu */ overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } .quran-row .row-arab { max-width: none; font-size: 26px; line-height: 1.5; text-align: right; justify-self: end; white-space: nowrap; /* nama Arab tidak pernah dipotong — kolom auto */ overflow: visible; text-overflow: clip; } @media (max-width: 480px) { .quran-row { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; } .quran-row .row-arab { font-size: 22px; } } /* ---------- Chips / tabs ---------- */ .chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; } /* * Halaman /doa — fawaid (keutamaan doa) & counter dzikir selesai. */ .d-fawaid { background: color-mix(in srgb, var(--gold-500) 9%, var(--bg-page)); border-left: 3px solid var(--gold-500); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; line-height: 1.55; color: var(--ink-700); } .chip.d-count.done { background: var(--green-600); color: #fff; font-weight: 700; border-color: var(--green-600); } /* * Jelajah — kartu Doa Harian pilihan (doa acak interaktif). */ .dua-highlight .verse-ref { font-size: 11.5px; color: var(--ink-600); } .dua-highlight.dua-swap { opacity: .35; transition: opacity .15s; } .dua-highlight { transition: opacity .15s; } .chips::-webkit-scrollbar { display: none; } .chip { border-radius: var(--radius-pill); padding: 8px 16px; font-size: 12.5px; font-weight: 600; background: var(--bg-card); color: var(--ink-700); box-shadow: var(--shadow-card); white-space: nowrap; } .chip.active { background: var(--green-800); color: #fff; } /* ---------- Search bar ---------- */ .searchbar { display: flex; align-items: center; gap: 10px; background: var(--bg-card); border-radius: var(--radius-pill); box-shadow: var(--shadow-card); padding: 12px 16px; } .searchbar svg { width: 19px; height: 19px; color: var(--ink-500); flex: none; } .searchbar input { border: 0; outline: 0; flex: 1; background: transparent; color: var(--ink-900); font-size: 14px; } /* ---------- News ---------- */ .news-hero { position: relative; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card); } .news-hero img { width: 100%; height: 200px; object-fit: cover; } .news-hero .nh-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(7,20,14,.92) 88%); } .news-hero .nh-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px; color: #fff; } .news-badge { position: absolute; top: 12px; left: 12px; background: var(--green-600); color: #fff; font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill); } .news-hero .nh-title { font-weight: 700; font-size: 16.5px; line-height: 1.35; margin: 0 0 4px; } .news-hero .nh-meta { font-size: 11.5px; color: #CFE3D9; display: flex; gap: 6px; align-items: center; } .news-hero .nh-arrow { position: absolute; right: 14px; bottom: 16px; color: #fff; } .news-row { display: flex; gap: 12px; align-items: center; padding: 10px 2px; } .news-row + .news-row { border-top: 1px solid color-mix(in srgb, var(--ink-300) 22%, transparent); } .news-row img { width: 74px; height: 60px; object-fit: cover; border-radius: var(--radius-md); flex: none; background: var(--green-100); } .news-row .nr-title { font-weight: 600; font-size: 13px; line-height: 1.4; } .news-row .nr-date { color: var(--ink-500); font-size: 11px; margin-top: 3px; } /* ---------- Audio player (floating) ---------- */ .audio-player { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + var(--safe-bottom) + 12px); z-index: 60; background: var(--green-800); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); padding: 10px 12px; display: none; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; } .audio-player.show { display: grid; } .audio-player .ap-info { min-width: 0; } .audio-player .ap-title { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .audio-player .ap-sub { font-size: 10.5px; color: #A9C6BA; } .audio-player .ap-ctrls { display: flex; align-items: center; gap: 2px; } .audio-player .ap-btn { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #DFEDE6; } .audio-player .ap-btn:hover { background: rgba(255,255,255,.12); } .audio-player .ap-btn svg { width: 17px; height: 17px; } .audio-player .ap-play { width: 40px; height: 40px; background: var(--gold-500); color: #3A2506; } .audio-player .ap-play svg { width: 19px; height: 19px; } .audio-player .ap-progress { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.2); position: relative; cursor: pointer; } .audio-player .ap-progress .ap-bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--gold-500); border-radius: 2px; } /* ---------- Bottom navigation ---------- */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 55; background: var(--bg-card); box-shadow: 0 -6px 24px rgba(7,53,42,.10); border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding: 8px 8px calc(6px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); } /* ============================================================ */ /* HALAMAN TENTANG — TUR FITUR BER-SCREENSHOT + WORKFLOW + */ /* CHANGELOG (about.js) */ /* ============================================================ */ .tour-hero { position: relative; overflow: hidden; background: linear-gradient(150deg, var(--green-800), var(--green-600)); color: #fff; } .tour-hero .verse-text { color: #fff; } .tour-hero .verse-text strong { color: #F7C860; } .tour-hero .muted { color: #B9D6C9 !important; } .tour-hero-ornament { position: absolute; right: -30px; top: -30px; width: 160px; opacity: .14; color: #fff; pointer-events: none; } /* Daftar isi tur: chip-chip nama fitur */ .tour-toc { display: flex; flex-wrap: wrap; gap: 8px; } .tour-toc-item { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; background: var(--green-50); color: var(--green-800); text-decoration: none; border: 1px solid transparent; } .tour-toc-item:hover { border-color: var(--green-600); } [data-theme="dark"] .tour-toc-item { background: rgba(255,255,255,.06); color: var(--green-100); } /* Kartu fitur: screenshot MOBILE di kiri (dalam frame ponsel), teks kanan. Screenshot mobile diambil 390×844 @2x → dipotong strip bottom-nav → 480×935 WebP. Di layar sempit: kolom tunggal (gambar di atas teks). */ .tour-card { padding: 16px !important; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; } /* Frame ponsel: border tebal melengkung + notch kecil di atas */ .tour-phone { position: relative; border: 5px solid #103B2E; border-radius: 22px; overflow: hidden; background: #103B2E; box-shadow: 0 10px 26px rgba(7,53,42,.18); } .tour-phone::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 56px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.85); z-index: 2; } .tour-phone img { display: block; width: 100%; height: auto; border-radius: 17px; } .tour-body { padding: 0; min-width: 0; } .tour-body .card-title { font-size: 16.5px; } .tour-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); } .tour-list li::marker { color: var(--green-600); font-weight: 700; } @media (max-width: 620px) { .tour-card { grid-template-columns: 1fr; } .tour-phone { max-width: 240px; margin: 0 auto; } /* gambar kecil di tengah */ } .tour-body .card-title { font-size: 16.5px; } .tour-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); } .tour-list li::marker { color: var(--green-600); font-weight: 700; } /* Workflow: langkah bernomor dengan garis penghubung */ .wf-card .card-title { font-size: 15.5px; } .wf-steps { margin: 10px 0 0; padding: 0; list-style: none; counter-reset: wf; display: grid; gap: 10px; } .wf-steps li { counter-increment: wf; position: relative; padding-left: 40px; font-size: 13.5px; line-height: 1.55; color: var(--ink-700); } .wf-steps li::before { content: counter(wf); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--green-600); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; } .wf-steps li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 32px; bottom: -14px; width: 2px; background: var(--line); } /* Changelog */ .cl-card { border-left: 3px solid var(--line); } .cl-card.cl-current { border-left-color: var(--gold-500); } .cl-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; padding: 3px 9px; border-radius: 999px; background: var(--gold-500); color: #fff; text-transform: uppercase; } .cl-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13px; line-height: 1.6; color: var(--ink-700); } .cl-list li::marker { color: var(--green-600); } /* ============================================================ */ /* POPUP UPDATE APK — fixed DI ATAS bottom-nav (footer app) */ /* Muncul bila /api/app-version > versionCode terpasang. */ /* ============================================================ */ .app-update { position: fixed; left: 10px; right: 10px; bottom: calc(var(--safe-bottom, 0px) + 74px); /* di atas bottom-nav */ z-index: 90; /* di atas nav (55) & toast */ display: flex; align-items: center; gap: 10px; padding: 11px 12px; background: var(--bg-card); border: 1px solid rgba(11,74,58,.14); border-radius: 16px; box-shadow: 0 10px 30px rgba(7,53,42,.22); opacity: 0; transform: translateY(14px); /* animasi masuk */ transition: opacity .25s ease, transform .25s ease; pointer-events: none; } .app-update.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .app-update .au-icon { flex: 0 0 40px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, #0B4A3A, #116350); color: #fff; } .app-update .au-icon svg { width: 21px; height: 21px; } .app-update .au-txt { flex: 1; min-width: 0; } .app-update .au-title { font-weight: 800; font-size: 13.5px; color: var(--ink-900); } .app-update .au-sub { font-size: 11.5px; color: var(--ink-500); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-update .au-btn { flex: 0 0 auto; border: 0; cursor: pointer; padding: 9px 14px; border-radius: 999px; background: linear-gradient(135deg, #0B4A3A, #116350); color: #fff; font-weight: 700; font-size: 12.5px; min-width: 84px; text-align: center; } .app-update .au-btn:disabled { opacity: .75; } .app-update .au-x { flex: 0 0 auto; border: 0; background: none; cursor: pointer; color: var(--ink-500); font-size: 14px; padding: 6px; line-height: 1; } /* Halaman tanpa bottom-nav (mushaf digital/immersif) → menempel bawah */ body.quran-reader-mode .app-update { bottom: calc(var(--safe-bottom, 0px) + 12px); } .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink-500); font-size: 10.5px; font-weight: 600; padding: 4px 0; } .bottom-nav a svg { width: 23px; height: 23px; } .bottom-nav a.active { color: var(--green-700); } /* ---------- Form controls ---------- */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-700); margin-bottom: 6px; } .field select, .field input[type="text"], .field input[type="search"] { width: 100%; padding: 11px 14px; border-radius: var(--radius-md); border: 1.5px solid color-mix(in srgb, var(--ink-300) 45%, transparent); background: var(--bg-card); color: var(--ink-900); outline: none; } .field select:focus, .field input:focus { border-color: var(--green-600); } .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink-300) 25%, transparent); } .switch-row:last-child { border-bottom: 0; } .switch-row .sr-label { font-weight: 600; font-size: 13.5px; } .switch-row .sr-sub { color: var(--ink-500); font-size: 11.5px; } .switch { position: relative; width: 46px; height: 26px; flex: none; } .switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; } .switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--ink-300); transition: background .18s; } .switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .18s; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .switch input:checked + .track { background: var(--green-600); } .switch input:checked + .track::after { transform: translateX(20px); } .switch input:focus-visible + .track { outline: 3px solid var(--gold-500); outline-offset: 2px; } /* ---------- Tasbih ---------- */ .tasbih-ring { position: relative; width: 240px; height: 240px; margin: 18px auto; cursor: pointer; /* seluruh lingkaran bisa diketuk */ -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation; transition: transform .1s ease; } .tasbih-ring:active { transform: scale(.97); } /* umpan balik visual saat diketuk */ .tasbih-ring svg.ring { width: 100%; height: 100%; transform: rotate(-90deg); } .tasbih-ring .ring-bg { fill: none; stroke: var(--green-100); stroke-width: 12; } .tasbih-ring .ring-fg { fill: none; stroke: var(--green-600); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .2s; } .tasbih-ring .ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .tasbih-ring .ring-count { font-size: 52px; font-weight: 800; color: var(--ink-900); font-variant-numeric: tabular-nums; line-height: 1; } .tasbih-ring .ring-target { color: var(--ink-500); font-size: 12.5px; margin-top: 4px; } .tasbih-tap { display: block; margin: 0 auto; background: var(--green-800); color: #fff; font-weight: 700; font-size: 15px; padding: 14px 46px; border-radius: var(--radius-pill); box-shadow: 0 10px 24px rgba(7,53,42,.35); transition: transform .1s; } .tasbih-tap:active { transform: scale(.96); } .tasbih-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; } /* ---------- Kompas ---------- */ .compass-wrap { position: relative; width: 270px; height: 270px; margin: 16px auto; } .compass-wrap svg { width: 100%; height: 100%; } .qibla-info { text-align: center; margin-top: 8px; } .qibla-deg { font-size: 34px; font-weight: 800; color: var(--green-800); } [data-theme="dark"] .qibla-deg { color: var(--green-100); } .qibla-sub { color: var(--ink-500); font-size: 12.5px; } /* ---------- Kalendar / events ---------- */ /* Baris event di daftar "Tanggal Penting Islam" — seluruh baris klikable */ button.event-link { display: flex; gap: 12px; align-items: center; width: 100%; padding: 10px 2px; background: none; border: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; border-bottom: 1px solid color-mix(in srgb, var(--ink-300) 22%, transparent); border-radius: 8px; transition: background .12s ease; } button.event-link:last-child { border-bottom: 0; } button.event-link:hover { background: var(--green-50); } button.event-link:active { background: var(--green-100); } button.event-link svg { flex: none; width: 16px; height: 16px; color: var(--ink-400); } .event-row { display: flex; gap: 12px; align-items: center; padding: 10px 2px; } .event-row + .event-row { border-top: 1px solid color-mix(in srgb, var(--ink-300) 22%, transparent); } .event-date { width: 52px; flex: none; text-align: center; background: var(--green-50); border-radius: var(--radius-md); padding: 6px 2px; } .event-date .ed-day { font-weight: 800; font-size: 16px; color: var(--green-700); line-height: 1.1; } .event-date .ed-month { font-size: 9.5px; color: var(--ink-500); } .event-row .er-title { font-weight: 600; font-size: 13px; } .event-row .er-sub { color: var(--ink-500); font-size: 11px; } /* ---------- Asmaul Husna grid ---------- */ .ah-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .ah-item { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 14px 10px; text-align: center; } .ah-item .ah-arab { font-family: var(--font-arab); font-size: 26px; color: var(--green-800); line-height: 1.9; } [data-theme="dark"] .ah-item .ah-arab { color: var(--green-100); } .ah-item .ah-latin { font-weight: 700; font-size: 12.5px; margin-top: 4px; } .ah-item .ah-mean { color: var(--ink-500); font-size: 11px; } .ah-item .ah-no { color: var(--ink-300); font-size: 10px; } /* ---------- Ayat reader ---------- */ .reader-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } /* Tombol Play Surah — KECIL, tinggi mengikuti kolom judul (bukan raksasa 106px) */ .play-surah-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; align-self: center; flex: none; padding: 7px 12px; font-size: 12px; } .play-surah-btn svg { width: 15px; height: 15px; flex: none; } /* Kartu surah: 2 kolom — latin+meta di KIRI, nama Arab besar di KANAN */ .reader-surah-card { border-radius: var(--radius-xl); overflow: hidden; color: #fff; background: linear-gradient(120deg, var(--green-800), var(--green-600)); padding: 18px 20px; position: relative; box-shadow: var(--shadow-card); display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; } .reader-surah-card .rsc-name { font-family: var(--font-arab); font-size: 32px; line-height: 1.55; text-align: right; justify-self: end; } .reader-surah-card .rsc-left { min-width: 0; } .reader-surah-card .rsc-latin { font-weight: 800; font-size: 19px; } .reader-surah-card .rsc-meta { color: #B9D6C9; font-size: 12px; } .reader-surah-card .rsc-pattern { position: absolute; right: -18px; top: -18px; opacity: .16; width: 130px; color: #fff; pointer-events: none; } /* ---------- Basmalah — baris tersendiri di atas ayat 1 (bukan bagian ayat). Gaya mushaf cetak: teks Arab tengah, terjemahan kecil di bawahnya. ---------- */ .basmalah-row { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 12px 4px; } .basmalah-row .basmalah-ar { font-family: var(--font-arab); font-size: 26px; line-height: 1.9; color: var(--green-800, #0B4A3A); } .basmalah-row .basmalah-id { font-size: 11.5px; color: var(--ink-500, #8a9a92); letter-spacing: .3px; } .ayah { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 14px 16px; margin-top: 12px; scroll-margin-top: 120px; } /* ---------- Menu aksi ayat (⋮) ---------- Baris primer: play · bookmark · ⋮ — muat 1 baris di layar sempit. Aksi lainnya (salin/bagikan/catatan/koleksi/tafsir/mushaf/immersif) muncul di popover yang diposisikan relatif terhadap kartu ayat. */ .ayah-actions { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; min-width: 0; } .ayah-more-wrap { position: relative; display: inline-flex; } .ayah-more-wrap .act-more { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: 1px; padding-bottom: 6px; /* titik-titik ⋮ visualnya seimbang */ } .ayah-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 168px; padding: 6px; background: var(--bg-card, #fff); border-radius: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.18); border: 1px solid var(--border-soft, rgba(11,74,58,.1)); display: flex; flex-direction: column; gap: 2px; animation: ayahmenu-pop .14s ease-out; } /* Default TERSEMBUNYI: display:flex di atas mengalahkan atribut [hidden] bawaan browser (specificity lebih tinggi), sehingga popover tampil menutupi teks ayat. Aturan ini mengembalikan perilaku yang benar — menu baru muncul saat JS melepas atribut hidden (klik ⋮). */ .ayah-menu[hidden] { display: none; } @keyframes ayahmenu-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ayah-menu .icon-btn { width: 100%; justify-content: flex-start; gap: 12px; border-radius: 10px; padding: 9px 10px; font-size: 14px; color: var(--ink-700, #33443c); text-decoration: none; } .ayah-menu .icon-btn:hover { background: var(--green-50, #eef6f2); } .ayah-menu .icon-btn svg { width: 18px; height: 18px; flex: none; } .ayah-menu .icon-btn span { font-weight: 600; } .ayah.playing { outline: 2px solid var(--gold-500); } .ayah-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ayah-num { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--green-700); font-weight: 700; font-size: 12px; background: var(--green-50); border-radius: 50% 50% 50% 4px; } .ayah-actions { display: flex; gap: 2px; } .ayah-arab { font-family: var(--font-arab); direction: rtl; font-size: var(--ayah-font, 28px); line-height: 2.1; margin: 10px 0 6px; text-align: right; color: var(--ink-900); } .ayah-trans { color: var(--ink-700); font-size: 13.5px; } .ayah-tafsir { margin-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--ink-300) 50%, transparent); padding-top: 10px; color: var(--ink-500); font-size: 12.5px; display: none; } .ayah-tafsir.show { display: block; } /* ---------- Skeleton & state ---------- */ .skeleton { border-radius: var(--radius-lg); background: linear-gradient(90deg, var(--green-50) 25%, #fff 45%, var(--green-50) 65%); background-size: 200% 100%; animation: sk 1.2s infinite; min-height: 60px; } @keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .state-box { text-align: center; padding: 34px 18px; color: var(--ink-500); } .state-box .st-icon { width: 46px; height: 46px; margin: 0 auto 10px; color: var(--ink-300); } .state-box .st-title { font-weight: 700; color: var(--ink-700); font-size: 14px; } .state-box .st-sub { font-size: 12.5px; margin: 4px 0 14px; } .spinner { width: 26px; height: 26px; margin: 0 auto 10px; border-radius: 50%; border: 3px solid var(--green-100); border-top-color: var(--green-600); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Toast ---------- */ .toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(20px); bottom: calc(var(--nav-h) + var(--safe-bottom) + 18px); z-index: 90; background: var(--ink-900); color: var(--bg-card); padding: 10px 18px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--shadow-float); max-width: 86vw; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Footer ---------- */ .site-footer { margin-top: 34px; padding: 18px 4px 6px; text-align: center; color: var(--ink-500); font-size: 11.5px; } .site-footer .leaf { color: var(--green-600); } /* ---------- Utility ---------- */ .hidden { display: none !important; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } .row { display: flex; align-items: center; gap: 8px; } .grow { flex: 1; } .center { text-align: center; } .gold { color: var(--gold-500); } .muted { color: var(--ink-500); } .small { font-size: 12px; } /* ---------- Responsive (tablet/desktop: dashboard 2–3 kolom) ---------- */ @media (min-width: 640px) { .hero img.hero-bg { height: 300px; } .quick-grid { grid-template-columns: repeat(5, 1fr); } .ah-grid { grid-template-columns: repeat(3, 1fr); } /* .prayer-grid tanpa .grid4 tetap 5 kolom (dipakai beranda); halaman /prayer memakai .grid4 (4-4) di semua lebar — tidak perlu override. */ } /* ================= TRACKER SHOLAT (/prayer) ================= Memakai .ib-prayer dari ibadah.css (chip + dot) agar satu bahasa desain; di sini hanya layout kepala + baris chip. */ .pr-tracker { margin-top: 14px; border-top: 1px dashed var(--line, #dbe7e1); padding-top: 12px; } .pr-tracker-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .pr-tracker-title { font-size: 13.5px; font-weight: 700; color: var(--ink-900, #17251f); } .pr-tracker-pct { font-size: 15px; font-weight: 800; color: var(--green-700, #087F5B); font-variant-numeric: tabular-nums; } .pr-tracker-chips { display: flex; gap: 8px; flex-wrap: wrap; } [data-theme="dark"] .pr-tracker { border-top-color: #243b32; } @media (min-width: 960px) { .app { padding: 0 24px 60px; } .home-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 22px; align-items: start; } .home-grid .col-a, .home-grid .col-b { min-width: 0; } .quick-grid { grid-template-columns: repeat(9, 1fr); } .ah-grid { grid-template-columns: repeat(4, 1fr); } .hero img.hero-bg { height: 340px; } .hero .hero-title { font-size: 34px; } .bottom-nav { display: none; } /* desktop pakai menu header */ .app { padding-bottom: 60px; } .audio-player { max-width: 560px; margin: 0 auto; } } /* ---------- Range slider (pengaturan) ---------- Gaya brand: track hijau muda, thumb emas dengan cincin hijau tua. */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer; } input[type="range"]:focus { outline: none; } input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green-600), var(--green-100)); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold-500); border: 3px solid var(--green-800); box-shadow: 0 2px 6px rgba(7, 53, 42, .35); } input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--green-600), var(--green-100)); } input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--gold-500); border: 3px solid var(--green-800); box-shadow: 0 2px 6px rgba(7, 53, 42, .35); } /* ---------- Inline code chip (data & privasi) ---------- */ code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.88em; padding: 2px 7px; border-radius: 7px; background: var(--green-50); color: var(--green-700); border: 1px solid var(--green-100); } [data-theme="dark"] code { background: var(--green-100); color: #CDE8DC; border-color: #244637; } /* Header nav links (desktop only) */ .header .nav-links { display: none; gap: 4px; margin-left: 8px; } .header .nav-links a { padding: 8px 12px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--ink-700); } .header .nav-links a:hover, .header .nav-links a.active { background: var(--green-50); color: var(--green-700); } @media (min-width: 960px) { .header .nav-links { display: flex; } } /* ============================================================================ City picker — pilih provinsi → ketik kota (ganti