/* Tema Dokat: Serenity — modern minimalis yang tenang. UI/UX app-shell (hero, tab bar mengambang, reading fokus) dengan palet HANGAT ala Perkamen: perkamen + aksen emas, malam indigo. Sudut membulat lega, border tipis, bayangan halus. Terang & gelap. */ /* === Variabel dari theme settings === */ :root { /* Aksen utama = emas antik (dari setting primary_color) */ --primary: var(--primary-color, #a9772c); --primary-hover: color-mix(in srgb, var(--primary) 82%, black); --text: #211f33; /* tinta indigo (bukan hitam murni) */ --text-light: #817d96; /* netral condong indigo */ --bg: #fffdf9; /* permukaan kartu (near-white hangat) */ --bg-alt: #f3efe4; /* latar halaman = perkamen */ --border: #e6e1d4; /* garis tipis hangat */ --radius: 0.9rem; /* sudut membulat lega */ --radius-pill: 999px; /* tombol pill */ --shadow: 0 1px 3px rgba(40, 32, 70, 0.06); --max-width: 1120px; --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Token palet situs (dipakai modul liturgi/renungan/brevir/dll.). Nilai TERANG; override GELAP ada di blok [data-theme="dark"]. */ --surface: #fffdf9; /* kartu / section */ --surface-soft: #f6f2e8; /* tile / permukaan lembut (perkamen) */ --surface-cream: #fffdf5; /* kartu lembut */ --hover: #efeade; /* latar hover hangat */ --line: #e6e1d4; /* garis tipis */ --muted: #817d96; /* teks redup (indigo-abu) */ --text-soft: #4c4863; /* teks sekunder */ --accent: #a9772c; /* emas antik (aksen utama) */ --accent-strong: #8a5e20; /* emas pekat */ --accent-green: #3e7a55; /* hijau liturgi (Masa Biasa) */ --mark: #f7eccf; /* sorot ayat / hasil cari (emas muda) */ --card-shadow: 0 6px 22px rgba(40, 32, 70, .08); color-scheme: light; } /* === Mode gelap: default ikut OS (via skrip di yg set data-theme), dapat dipaksa lewat tombol 🌙/☀️. Warna gelap hangat, senada tema kalem. === */ :root[data-theme="dark"] { /* Malam indigo — tenang & rendah cahaya, aksen emas lilin */ --text: #edeaf3; --text-light: #85819a; --text-soft: #b8b4c9; --bg: #1c1b29; --bg-alt: #14131e; --border: #2d2b3d; --shadow: 0 1px 3px rgba(0, 0, 0, .55); --surface: #1c1b29; --surface-soft: #23212f; --surface-cream: #1e1c2b; --hover: #262435; --line: #2d2b3d; --muted: #85819a; --accent: #d6b25e; /* emas cerah (lilin) untuk latar gelap */ --accent-strong: #e7d19a; --accent-green: #5fa47b; --mark: #3a3320; --card-shadow: 0 6px 22px rgba(0, 0, 0, .5); --primary: #d6b25e; color-scheme: dark; } /* Kontras mode gelap: teks GELAP di atas emas-terang (tombol/tag terisi) */ :root[data-theme="dark"] .rs-cta, :root[data-theme="dark"] .st-toggle button.on, :root[data-theme="dark"] .st-chip.on, :root[data-theme="dark"] .sg-tag.sg-tgl { color: #14131e; } /* === Reset === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; } body { font-family: var(--font); color: var(--text); background: var(--bg-alt); line-height: 1.7; min-height: 100vh; display: flex; flex-direction: column; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; transition: color 0.2s; } a:hover { color: var(--primary-hover); } /* === Header === */ .site-header { background: var(--bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .header-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; height: 4rem; } .site-branding { display: flex; align-items: center; gap: 0.5rem; } .site-logo { height: 2rem; width: auto; } .site-title { font-size: 1.25rem; font-weight: 700; color: var(--text); } .site-title:hover { color: var(--primary); } .site-tagline { font-size: 0.75rem; color: var(--text-light); } /* Navigation */ .main-nav { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; } /* Tombol mode terang/gelap */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 0.4rem; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: var(--radius); cursor: pointer; flex: 0 0 auto; transition: background 0.2s, border-color 0.2s; } .theme-toggle:hover { background: var(--bg-alt); border-color: var(--primary); } .theme-toggle svg { width: 18px; height: 18px; } .theme-toggle .ico-sun { display: none; } .theme-toggle .ico-moon { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } .nav-item { position: relative; } .nav-item > a { display: block; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; color: var(--text); border-radius: var(--radius); transition: background 0.2s, color 0.2s; } .nav-item > a:hover, .nav-item > a.active { color: var(--primary); background: var(--bg-alt); } /* Dropdown */ .nav-item .dropdown { display: none; position: absolute; top: 100%; left: 0; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 180px; padding: 0.25rem 0; z-index: 200; } .nav-item:hover .dropdown { display: block; } .dropdown a { display: block; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--text); } .dropdown a:hover, .dropdown a.active { background: var(--bg-alt); color: var(--primary); } /* Mobile nav toggle */ .nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 1px; transition: transform 0.2s; } /* === Layout === */ .container { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.5rem; display: flex; gap: 2.5rem; flex: 1; } .content { flex: 1; min-width: 0; } .container.no-sidebar { max-width: 800px; /* isi penuh lebar tersedia; tanpa ini kontainer flex menyusut ke lebar konten (bermasalah bila konten yang terlihat sempit, mis. grid kartu) */ width: 100%; } .container.no-sidebar .content { flex: 1; } /* === Sidebar === */ .sidebar { width: 280px; flex-shrink: 0; } .widget { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; } .widget-title { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text); margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary); } .widget ul { list-style: none; } .widget li { padding: 0.375rem 0; border-bottom: 1px solid var(--border); } .widget li:last-child { border-bottom: none; } .widget li a { display: flex; justify-content: space-between; color: var(--text); font-size: 0.875rem; } .widget li a span { color: var(--text-light); font-size: 0.75rem; } .widget li a:hover { color: var(--primary); } /* Tag cloud */ .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.375rem; } .tag { display: inline-block; padding: 0.25rem 0.625rem; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 8px; font-size: 0.75rem; color: var(--text-light); transition: all 0.2s; } .tag:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* === Post Card === */ .posts-list { display: flex; flex-direction: column; gap: 1.5rem; } .posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .post-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow 0.2s; } .post-card:hover { box-shadow: var(--shadow); } .post-card-image img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .posts-list:not(.posts-grid) .post-card { display: flex; } .posts-list:not(.posts-grid) .post-card-image { width: 280px; flex-shrink: 0; } .posts-list:not(.posts-grid) .post-card-image img { height: 100%; aspect-ratio: auto; } .post-card-body { padding: 1.25rem; flex: 1; } .post-card-title { font-size: 1.125rem; line-height: 1.4; margin-bottom: 0.375rem; } .post-card-title a { color: var(--text); } .post-card-title a:hover { color: var(--primary); } .post-meta { font-size: 0.8125rem; color: var(--text-light); margin-bottom: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; } .meta-sep { margin: 0 0.125rem; } .post-category { color: var(--primary); font-weight: 500; } .post-excerpt { font-size: 0.9375rem; color: var(--text-light); line-height: 1.6; margin-bottom: 0.75rem; } .read-more { font-size: 0.875rem; font-weight: 500; } /* === Single Post/Page === */ .single-post, .single-page, .single-content { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 2rem; } .post-header { margin-bottom: 1.5rem; } .post-header h1, .single-page h1 { font-size: 2rem; line-height: 1.3; margin-bottom: 0.5rem; } .featured-image { width: 100%; border-radius: var(--radius); margin: 1.5rem 0; } /* Prose content */ .prose { line-height: 1.8; } .prose p { margin-bottom: 1.25rem; } .prose h2 { font-size: 1.5rem; margin: 2rem 0 0.75rem; } .prose h3 { font-size: 1.25rem; margin: 1.5rem 0 0.5rem; } .prose ul, .prose ol { margin: 1rem 0; padding-left: 1.5rem; } .prose li { margin-bottom: 0.375rem; } .prose blockquote { border-left: 3px solid var(--primary); padding: 0.75rem 1rem; margin: 1.5rem 0; background: var(--bg-alt); color: var(--text-light); font-style: italic; } .prose pre { background: #1f2937; color: #e5e7eb; padding: 1rem; border-radius: var(--radius); overflow-x: auto; margin: 1.5rem 0; font-size: 0.875rem; } .prose code { background: var(--bg-alt); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875em; } .prose pre code { background: none; padding: 0; } .prose img { border-radius: var(--radius); margin: 1rem 0; } .prose iframe { max-width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius); margin: 1.5rem 0; border: none; } .prose video { max-width: 100%; height: auto; border-radius: var(--radius); margin: 1.5rem 0; } .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; } .prose th, .prose td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; } .prose th { background: var(--bg-alt); font-weight: 600; } /* Post tags */ .post-tags { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.375rem; } /* Custom fields */ .custom-fields { margin: 1.5rem 0; } .custom-fields .field { padding: 0.75rem 0; border-bottom: 1px solid var(--border); font-size: 0.9375rem; } .custom-fields .field:last-child { border-bottom: none; } .field-image { margin-top: 0.5rem; max-width: 400px; border-radius: var(--radius); } .color-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 0.25rem; border: 1px solid var(--border); vertical-align: middle; margin-right: 0.25rem; } /* === Archive === */ .archive-header { margin-bottom: 1.5rem; } .archive-header h1 { font-size: 1.75rem; } .archive-description { color: var(--text-light); margin-top: 0.25rem; } .section-title { font-size: 1.25rem; margin-bottom: 1.25rem; color: var(--text); } /* === Pagination === */ .pagination-wrapper { margin-top: 2rem; display: flex; justify-content: center; } .pagination-wrapper nav { display: flex; gap: 0.25rem; } .pagination-wrapper a, .pagination-wrapper span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; font-size: 0.875rem; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); transition: all 0.2s; } .pagination-wrapper a:hover { background: var(--primary); color: #fff; border-color: var(--primary); } .pagination-wrapper span[aria-current="page"] { background: var(--primary); color: #fff; border-color: var(--primary); } /* === 404 === */ .error-page { text-align: center; padding: 4rem 1rem; } .error-code { font-size: 8rem; font-weight: 800; color: var(--border); line-height: 1; } .error-page h1 { font-size: 1.5rem; margin: 0.5rem 0; } .error-page p { color: var(--text-light); margin-bottom: 1.5rem; } /* === Buttons === */ .btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius); cursor: pointer; border: none; transition: all 0.2s; } .btn-primary { background: var(--primary); color: #fff; } .btn-primary:hover { background: var(--primary-hover); color: #fff; } /* === Empty state === */ .empty-message { color: var(--text-light); padding: 2rem 0; text-align: center; } .empty-state { text-align: center; padding: 3rem 0; color: var(--text-light); } /* === Footer === */ .site-footer { background: var(--bg); border-top: 1px solid var(--border); margin-top: auto; } .footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 2rem 1.5rem; text-align: center; } .footer-nav { margin-bottom: 1rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; } .footer-nav a { color: var(--text); font-size: 0.875rem; } .footer-nav a:hover { color: var(--primary); } .footer-text { font-size: 0.8125rem; color: var(--text-light); } /* === Responsive === */ @media (max-width: 768px) { .container { flex-direction: column; padding: 1.25rem 1rem; } .sidebar { width: 100%; } .nav-toggle { display: flex; } .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); flex-direction: column; padding: 0.5rem; box-shadow: var(--shadow); } .main-nav.open { display: flex; } .nav-item .dropdown { position: static; border: none; box-shadow: none; padding-left: 1rem; } .nav-item:hover .dropdown { display: block; } .posts-list:not(.posts-grid) .post-card { flex-direction: column; } .posts-list:not(.posts-grid) .post-card-image { width: 100%; } .posts-grid { grid-template-columns: 1fr; } .single-post, .single-page, .single-content { padding: 1.25rem; } .post-header h1, .single-page h1 { font-size: 1.5rem; } } /* Baca Juga: post terkait di bawah artikel */ .related-posts { margin: 2.5rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line); } .related-posts-title { font-size: 1.15rem; margin: 0 0 1.1rem; } /* ============================================================ SERENITY — minimalis: header app-shell, pill, kartu lembut, bottom-nav ============================================================ */ /* Header ramping & bersih (tembus + blur) */ .site-header { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(1.05) blur(10px); -webkit-backdrop-filter: saturate(1.05) blur(10px); border-bottom: 1px solid var(--line); } .site-branding { gap: 0.6rem; } .site-title { font-weight: 700; letter-spacing: -0.02em; color: var(--text); } .site-title:hover { color: var(--accent); } /* Tanda merek: lingkaran hijau minimalis */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; background: var(--accent); color: #fff; border-radius: 50%; } .brand-mark svg { width: 1.15rem; height: 1.15rem; } /* Navigasi: hover pill lembut + satu baris (tak membungkus; geser bila panjang) */ .main-nav { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; } .main-nav::-webkit-scrollbar { display: none; } .nav-item { flex: none; } .nav-item > a { border-radius: var(--radius-pill); padding: 0.5rem 0.9rem; white-space: nowrap; } .nav-item > a:hover, .nav-item > a.active { background: var(--hover); color: var(--accent); } /* Tombol: pill penuh */ .btn { border-radius: var(--radius-pill); padding: 0.7rem 1.4rem; font-weight: 600; } .btn-primary { background: var(--accent); } .btn-primary:hover { background: var(--accent-strong); } /* Kartu lembut: sudut lega, bayangan halus, angkat saat hover */ .post-card, .single-post, .single-page, .single-content, .widget { border-radius: var(--radius); } .post-card { transition: box-shadow .2s, transform .2s; } .post-card:hover { box-shadow: var(--card-shadow); transform: translateY(-2px); } /* Tag & sorot: bulat penuh */ .tag { border-radius: var(--radius-pill); } .widget-title { border-bottom-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } /* Fokus keyboard yang terlihat (aksesibilitas) */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* === App-shell: tab bar MENGAMBANG berbentuk pil (mobile) === */ .dokat-tabbar { display: none; } @media (max-width: 768px) { body { padding-bottom: 6rem; } .dokat-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; position: fixed; left: 14px; right: 14px; z-index: 300; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); height: 66px; padding: 0 6px; background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.3) blur(20px); -webkit-backdrop-filter: saturate(1.3) blur(20px); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow), 0 14px 32px -16px rgba(6, 50, 34, .4); } .dokat-tab { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; font-size: 0.64rem; font-weight: 650; color: var(--muted); text-decoration: none; transition: color .16s; } .dokat-tab svg { width: 23px; height: 23px; } .dokat-tab.active { color: var(--accent); } .dokat-tab.active::before { content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); width: 44px; height: 34px; background: var(--hover); border-radius: 13px; z-index: -1; } } /* ============================================================ SERENITY — komponen aplikasi (beranda, list, reading) ============================================================ */ .sr-app { max-width: 640px; margin: 0 auto; } /* Section header */ .sr-sec { display: flex; align-items: baseline; justify-content: space-between; margin: 1.6rem .15rem .85rem; } .sr-sec:first-child { margin-top: .4rem; } .sr-sec h2 { font-size: 1.15rem; font-weight: 750; letter-spacing: -.02em; margin: 0; } .sr-sec a { font-size: .82rem; font-weight: 650; color: var(--accent); text-decoration: none; } /* HERO hari ini — gradien mengikuti warna liturgi (--sr-c1) */ .sr-hero { position: relative; overflow: hidden; border-radius: var(--radius); display: block; padding: 1.4rem; color: #fff; text-decoration: none; box-shadow: var(--card-shadow); background: radial-gradient(120% 90% at 85% -20%, rgba(255,255,255,.22), transparent 55%), linear-gradient(150deg, var(--sr-c1, var(--accent)) 0%, color-mix(in srgb, var(--sr-c1, var(--accent)) 62%, #000) 96%); } .sr-hero::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 62%); pointer-events: none; } .sr-hero .lit { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; background: rgba(255,255,255,.16); padding: 5px 11px; border-radius: 999px; } .sr-hero .lit .d { width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: .9; } .sr-hero .dt { margin: .9rem 0 .15rem; font-size: .85rem; opacity: .9; } .sr-hero h1 { font-size: 1.55rem; line-height: 1.16; letter-spacing: -.02em; margin: 0; font-weight: 760; max-width: 14ch; } .sr-hero .cta { margin-top: 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; color: color-mix(in srgb, var(--sr-c1, var(--accent)) 55%, #000); border-radius: 16px; padding: .85rem 1rem; font-weight: 700; font-size: .95rem; } .sr-hero .cta .go { width: 30px; height: 30px; border-radius: 50%; background: var(--sr-c1, var(--accent)); color: #fff; display: grid; place-items: center; flex: none; } .sr-hero .cta .go svg { width: 16px; height: 16px; } /* Ibadat berikutnya */ .sr-next { display: flex; align-items: center; gap: .85rem; margin-top: .7rem; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .75rem .9rem; box-shadow: var(--shadow); } .sr-next .clk { width: 44px; height: 44px; border-radius: 14px; background: var(--surface-soft); color: var(--accent); display: grid; place-items: center; flex: none; } .sr-next .clk svg { width: 22px; height: 22px; } .sr-next .m { flex: 1; min-width: 0; } .sr-next .m .k { display: block; font-size: .75rem; font-weight: 650; color: var(--muted); } .sr-next .m .v { display: block; font-size: 1rem; font-weight: 700; margin-top: 1px; } .sr-next .pl { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; flex: none; } .sr-next .pl svg { width: 18px; height: 18px; } /* Quick actions */ .sr-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; } .sr-qa { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .9rem .25rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: transform .15s; } .sr-qa:hover { transform: translateY(-2px); } .sr-qa .ic { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--surface-soft); color: var(--accent); } .sr-qa .ic svg { width: 23px; height: 23px; } .sr-qa .lb { font-size: .72rem; font-weight: 650; text-align: center; } /* Featured renungan */ .sr-feat { display: block; border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--card-shadow); text-decoration: none; color: var(--text); } .sr-feat .thumb { display: block; height: 120px; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent), var(--accent-strong)); } .sr-feat .thumb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 80% 10%, rgba(255,255,255,.22), transparent 50%), repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 12px, transparent 12px 26px); } .sr-feat .cat { position: absolute; left: 14px; top: 14px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-strong); background: rgba(255,255,255,.92); padding: 5px 10px; border-radius: 999px; } .sr-feat .fb { display: block; padding: 1rem 1.05rem 1.1rem; } .sr-feat h3 { font-size: 1.2rem; font-weight: 730; letter-spacing: -.02em; margin: 0 0 .4rem; line-height: 1.25; } .sr-feat p { margin: 0; color: var(--text-soft); font-size: .92rem; line-height: 1.55; } .sr-feat .meta { display: flex; align-items: center; gap: 8px; margin-top: .8rem; font-size: .8rem; color: var(--muted); font-weight: 600; } .sr-feat .meta .rd { display: inline-flex; align-items: center; gap: 5px; } .sr-feat .meta .rd svg { width: 14px; height: 14px; } .sr-dsep { width: 3px; height: 3px; border-radius: 50%; background: var(--muted); } /* Reading (renungan) — refs pill + drop-cap */ .sr-refpill { display: inline-block; font-size: .78rem; font-weight: 650; color: var(--accent); background: var(--surface-soft); border-radius: 999px; padding: 6px 12px; margin: 0 .3rem .35rem 0; } /* Hormati preferensi kurangi-gerak */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; scroll-behavior: auto !important; } }