/* ===================================================================== style.css — Gaya khas Website Resmi Madrasah Melengkapi Tailwind CDN. Warna & font mengikuti pengaturan madrasah. ===================================================================== */ /* --------------------------------------------------------------- 1. VARIABEL WARNA (nilai awal, ditimpa PHP di bila diubah) --------------------------------------------------------------- */ :root { /* Komponen RGB warna merek. Tailwind memakainya lewat rgb(var(--x-rgb) / ) supaya kelas seperti bg-hijau/10 tetap mengikuti tema administrator meski berkas CSS-nya sudah dibangun statis, bukan dirakit peramban. */ --hijau-rgb: 11 93 59; --hijau-gelap-rgb: 7 48 31; --hijau-muda-rgb: 18 128 90; --emas-rgb: 201 162 39; --emas-muda-rgb: 228 201 106; --hijau: #0B5D3B; --hijau-gelap: #07301F; --hijau-muda: #12805A; --emas: #C9A227; --emas-muda: #E4C96A; --latar: #F7F6F1; --permukaan: #FFFFFF; --garis: #E5E7EB; --teks: #1F2937; --teks-lembut: #6B7280; --radius: 14px; --bayang: 0 1px 2px rgba(7, 48, 31, .06), 0 12px 32px -12px rgba(7, 48, 31, .18); --bayang-tinggi: 0 24px 60px -24px rgba(7, 48, 31, .35); --transisi: .28s cubic-bezier(.2, .7, .3, 1); } html.dark { --latar: #08150F; --permukaan: #0F241B; --garis: #1C3A2C; --teks: #E8EFEA; --teks-lembut: #9CB3A6; --bayang: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6); --bayang-tinggi: 0 24px 60px -24px rgba(0, 0, 0, .8); } /* --------------------------------------------------------------- 2. DASAR --------------------------------------------------------------- */ * { -webkit-tap-highlight-color: transparent; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } html { font-size: var(--ukuran-dasar, 16px); } body { font-family: var(--font-badan, 'Inter'), system-ui, -apple-system, sans-serif; background: var(--latar); color: var(--teks); -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: background-color var(--transisi), color var(--transisi); } h1, h2, h3, h4, .font-judul { font-family: var(--font-judul, 'Poppins'), system-ui, sans-serif; letter-spacing: -.015em; } ::selection { background: var(--emas); color: #14261C; } /* Fokus keyboard terlihat jelas (aksesibilitas) */ :focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; border-radius: 4px; } /* Batang gulir */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(11, 93, 59, .45); border-radius: 99px; border: 3px solid var(--latar); } ::-webkit-scrollbar-thumb:hover { background: var(--hijau); } /* --------------------------------------------------------------- 3. TIPOGRAFI ARAB — dapat diganti lewat dropdown di header --------------------------------------------------------------- */ .arab { direction: rtl; font-family: var(--font-arab, 'Noto Naskh Arabic'), 'Noto Naskh Arabic', serif; line-height: var(--tinggi-arab, 2); font-feature-settings: "liga" 1, "calt" 1; } /* Pilihan pengunjung lewat dropdown header menimpa pilihan administrator */ html[data-font-arab="noto"] .arab { font-family: 'Noto Naskh Arabic', serif; line-height: 2; } html[data-font-arab="naskh"] .arab { font-family: 'Amiri', 'Noto Naskh Arabic', serif; line-height: 2; } html[data-font-arab="diwani"] .arab { font-family: 'Katibeh', 'Noto Naskh Arabic', serif; line-height: 1.9; } html[data-font-arab="kufi"] .arab { font-family: 'Reem Kufi', 'Noto Kufi Arabic', sans-serif; line-height: 1.85; } html[data-font-arab="ruqah"] .arab { font-family: 'Aref Ruqaa', 'Noto Naskh Arabic', serif; line-height: 2.1; } html[data-font-arab="thuluth"] .arab { font-family: 'Rakkas', 'Aref Ruqaa', serif; line-height: 1.8; } html[data-font-arab="farisi"] .arab { font-family: 'Noto Nastaliq Urdu', 'Noto Naskh Arabic', serif; line-height: 2.6; } /* --------------------------------------------------------------- 4. TATA LETAK & ORNAMEN --------------------------------------------------------------- */ .wadah { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; } @media (min-width: 1024px) { .wadah { padding-inline: 2rem; } } /* Label pembuka bagian: pasangan Arab + Indonesia */ .eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--emas); } .eyebrow::after { content: ''; width: 2.2rem; height: 1px; background: currentColor; opacity: .55; } .eyebrow .arab { font-size: 1.05rem; letter-spacing: 0; text-transform: none; line-height: 1; } /* Garis rambut emas sebagai pemisah */ .garis-emas { height: 1px; background: linear-gradient(90deg, transparent, var(--emas), transparent); opacity: .5; } /* Motif geometri bintang delapan */ .motif-khatam { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1'%3E%3Cpath d='M60 8 72 32 96 20 84 44 112 60 84 76 96 100 72 88 60 112 48 88 24 100 36 76 8 60 36 44 24 20 48 32Z'/%3E%3Ccircle cx='60' cy='60' r='26'/%3E%3C/g%3E%3C/svg%3E"); background-size: 140px 140px; } /* Lengkung mihrab untuk bingkai foto */ .bingkai-mihrab { border-radius: 50% 50% var(--radius) var(--radius) / 28% 28% var(--radius) var(--radius); overflow: hidden; } /* Varian bingkai mihrab yang menampung gambar secara utuh. Jarak dalamnya dihitung dari lengkung atas bingkai: dengan sisi 14% dan puncak 18% dari lebar, tepi gambar tidak pernah bersinggungan dengan lengkungnya, berapa pun perbandingan sisi foto aslinya. Latar hijau mengisi sisa ruang supaya bidang kosongnya terlihat disengaja. */ .bingkai-isi-utuh { padding: 18% 14% 8%; background: linear-gradient(160deg, var(--hijau-gelap) 0%, var(--hijau) 55%, var(--hijau-muda) 100%); } /* --------------------------------------------------------------- 5. HEADER --------------------------------------------------------------- */ .kepala { position: fixed; inset-inline: 0; top: 0; z-index: 50; transition: background-color var(--transisi), box-shadow var(--transisi), border-color var(--transisi); border-bottom: 1px solid transparent; } .kepala.melayang { background: var(--permukaan); /* cadangan bila color-mix tidak didukung */ background: color-mix(in srgb, var(--permukaan) 92%, transparent); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom-color: var(--garis); box-shadow: 0 8px 24px -20px rgba(7, 48, 31, .6); } /* Motif bintang delapan pada header, memakai ubinan yang sama dengan pita beranda dan kartu DATABASE. Dipasang sebagai lapis latar di atas warna permukaan, bukan elemen semu, supaya backdrop-filter dan transisi warna bawaan header tidak perlu diutak-atik dan isinya tetap di lapis paling depan tanpa penataan z-index tambahan. Hanya berlaku pada .melayang: di puncak beranda header sengaja dibiarkan bening menimpa hero, dan motif di atas gambar hero justru mengotori keduanya. Goresannya sedikit lebih tegas daripada di pita beranda (.09 berbanding .07) sebab bilahnya tipis dan dilihat dari jarak dekat. */ .kepala.melayang { background-image: url("data:image/svg+xml,"); background-size: 96px 96px; background-repeat: repeat; } html.dark .kepala.melayang { background-image: url("data:image/svg+xml,"); } /* Saat header berlatar terang, teks putih hero harus ikut berubah */ .kepala.melayang .text-white, .kepala.melayang nav, .kepala.melayang #merek-situs { color: var(--teks); } .kepala.melayang .tautan-nav.aktif { color: var(--emas); } .kepala.melayang .tombol-garis { color: var(--teks); border-color: var(--garis); } /* Panel menu turun selalu memakai warna teks permukaan, tidak mewarisi warna teks header di sekitarnya. Di beranda navigasi diberi kelas text-white supaya terbaca di atas hero yang gelap; tanpa penegasan ini, isi panel yang berlatar putih ikut memutih dan menjadi tak terbaca sama sekali. */ .kepala .kartu, .kepala .kartu a { color: var(--teks); } .kepala .kartu a:hover { color: var(--hijau); } html.dark .kepala .kartu a:hover { color: var(--emas); } /* Garis tepi lembut yang mengikuti warna teks di sekitarnya */ .batas-lembut { border: 1px solid rgba(128, 128, 128, .3); border: 1px solid color-mix(in srgb, currentColor 24%, transparent); } .tautan-nav { position: relative; padding: .45rem .1rem; font-weight: 500; font-size: .95rem; color: inherit; transition: color .2s; } .tautan-nav::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--emas); transition: width var(--transisi); } .tautan-nav:hover::after, .tautan-nav.aktif::after { width: 100%; } .tautan-nav.aktif { color: var(--emas); } /* Menu geser untuk layar kecil */ .laci { position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px); z-index: 60; background: var(--permukaan); transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .7, .3, 1); box-shadow: var(--bayang-tinggi); overflow-y: auto; } .laci.terbuka { transform: translateX(0); } .tirai { position: fixed; inset: 0; background: rgba(7, 24, 17, .55); opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 55; } .tirai.terbuka { opacity: 1; pointer-events: auto; } /* --------------------------------------------------------------- 6. HERO 3D --------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(120% 90% at 78% 18%, #10704A 0%, var(--hijau) 42%, var(--hijau-gelap) 100%); color: #fff; } #kanvas-hero { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; } .hero-isi { position: relative; z-index: 2; } .hero::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 45%; z-index: 1; background: linear-gradient(to top, rgba(7, 48, 31, .85), transparent); pointer-events: none; } /* Judul utama hero — jenis huruf, ukuran, dan ketebalan diatur dari pengaturan.php?g=tema lewat variabel yang ditulis PHP di . */ .judul-hero { font-family: var(--font-hero, var(--font-judul, 'Poppins')), system-ui, sans-serif; font-weight: var(--tebal-hero, 600); font-size: var(--ukuran-hero-ponsel, 34px); line-height: 1.12; letter-spacing: -.015em; } /* Di antara ukuran ponsel dan ukuran layar lebar, huruf membesar bertahap */ @media (min-width: 640px) { .judul-hero { font-size: clamp(var(--ukuran-hero-ponsel, 34px), 6.4vw, var(--ukuran-hero, 58px)); } } @media (min-width: 1280px) { .judul-hero { font-size: var(--ukuran-hero, 58px); } } /* Tombol utama */ .tombol { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.6rem; border-radius: 999px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; transition: transform var(--transisi), box-shadow var(--transisi), background-color var(--transisi); } .tombol:active { transform: translateY(1px); } .tombol-emas { background: var(--emas); color: #16261B; box-shadow: 0 12px 30px -14px rgba(201, 162, 39, .9); } .tombol-emas:hover { background: var(--emas-muda); box-shadow: 0 18px 36px -14px rgba(201, 162, 39, .95); } .tombol-garis { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; } .tombol-garis:hover { border-color: var(--emas); color: var(--emas-muda); background: rgba(255, 255, 255, .06); } .tombol-hijau { background: var(--hijau); color: #fff; } .tombol-hijau:hover { background: var(--hijau-gelap); } /* --------------------------------------------------------------- 7. PITA JADWAL SHOLAT — elemen khas halaman beranda --------------------------------------------------------------- */ .pita-sholat { position: relative; z-index: 10; background: var(--permukaan); border: 1px solid var(--garis); border-top: 3px solid var(--emas); border-radius: var(--radius); box-shadow: var(--bayang-tinggi); overflow: hidden; } /* Tiap waktu sholat berdiri sendiri dalam kotak bersudut membulat */ .daftar-waktu-sholat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .75rem; } @media (min-width: 480px) { .daftar-waktu-sholat { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .daftar-waktu-sholat { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; padding: .9rem; } } @media (min-width: 1024px) { .daftar-waktu-sholat { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .galat-sholat { grid-column: 1 / -1; padding: 1.25rem; text-align: center; font-size: .875rem; color: var(--teks-lembut); } .kartu-waktu { position: relative; text-align: center; padding: .85rem .5rem .75rem; border: 1px solid var(--garis); border-radius: 14px; background: var(--latar); transition: background-color var(--transisi), border-color var(--transisi), box-shadow var(--transisi), transform var(--transisi); } .kartu-waktu .nama { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teks-lembut); } .kartu-waktu .jam { font-family: var(--font-judul, 'Poppins'), sans-serif; font-weight: 600; font-size: 1.3rem; margin-top: .2rem; font-variant-numeric: tabular-nums; } .kartu-waktu .nama-arab { font-size: 1rem; color: var(--emas); margin-top: .1rem; } /* Keterangan sisa waktu menuju masing-masing waktu sholat */ .kartu-waktu .mundur-waktu { margin-top: .35rem; font-size: .68rem; line-height: 1.35; letter-spacing: .01em; color: var(--teks-lembut); font-variant-numeric: tabular-nums; } .kartu-waktu.lewat { opacity: .72; } .kartu-waktu.berikutnya { background: rgba(201, 162, 39, .14); background: color-mix(in srgb, var(--emas) 14%, var(--permukaan)); border-color: var(--emas); box-shadow: 0 10px 26px -16px rgba(201, 162, 39, .9); } .kartu-waktu.berikutnya .nama { color: var(--hijau); font-weight: 700; } .kartu-waktu.berikutnya .mundur-waktu { color: var(--hijau); font-weight: 600; } html.dark .kartu-waktu.berikutnya .nama, html.dark .kartu-waktu.berikutnya .mundur-waktu { color: var(--emas-muda); } .kartu-waktu.berikutnya::before { content: ''; position: absolute; inset-inline: 22%; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--emas); } .hitung-mundur { font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- 7b. PITA PINTU ILMU — kartu kedua di bawah jadwal sholat Susunannya sengaja dibuat kembar dengan .daftar-waktu-sholat agar kolom kedua pita saling lurus pada layar lebar. --------------------------------------------------------------- */ .daftar-pintu-ilmu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .75rem; } @media (min-width: 480px) { .daftar-pintu-ilmu { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 768px) { .daftar-pintu-ilmu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; padding: .9rem; } } @media (min-width: 1024px) { .daftar-pintu-ilmu { grid-template-columns: repeat(7, minmax(0, 1fr)); } } .kartu-ilmu { position: relative; text-align: center; padding: .85rem .5rem .75rem; border: 1px solid var(--garis); border-radius: 14px; background: var(--latar); transition: transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi); } .kartu-ilmu .nama { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teks-lembut); } .kartu-ilmu .nama-arab { font-size: 1.15rem; color: var(--emas); margin-top: .15rem; } .kartu-ilmu .ket { margin-top: .3rem; font-size: .68rem; line-height: 1.35; color: var(--teks-lembut); } /* Medan yang isiannya tidak masuk akal, dipakai pemeriksaan tanggal */ .isian-keliru { border-color: #B91C1C !important; box-shadow: 0 0 0 3px rgba(185, 28, 28, .16); } /* Penanda sekejap pada medan yang barusan terisi otomatis */ .baru-terisi { border-color: var(--emas) !important; box-shadow: 0 0 0 3px rgba(201, 162, 39, .22); transition: box-shadow .3s, border-color .3s; } /* --------------------------------------------------------------- Peringatan penghapusan akun — muncul di tengah layar dengan warna merah supaya jelas bahwa tindakannya merusak dan tidak sepele. --------------------------------------------------------------- */ .modal-bahaya { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1.25rem; } .modal-bahaya[hidden] { display: none; } .modal-bahaya-tirai { position: absolute; inset: 0; background: rgba(69, 10, 10, .68); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .modal-bahaya-panel { position: relative; width: 100%; max-width: 27rem; padding: 1.5rem 1.5rem 1.25rem; background: var(--permukaan); color: var(--teks); border: 1px solid #B91C1C; border-top: 5px solid #B91C1C; border-radius: var(--radius); box-shadow: 0 28px 60px -22px rgba(69, 10, 10, .75); animation: bahayaMasuk .2s cubic-bezier(.2, .7, .3, 1); } @keyframes bahayaMasuk { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .modal-bahaya-panel { animation: none; } } .modal-bahaya-kepala { display: flex; align-items: center; gap: .65rem; color: #B91C1C; } html.dark .modal-bahaya-kepala { color: #FCA5A5; } .modal-bahaya-kepala h2 { margin: 0; font-family: var(--font-judul), sans-serif; font-size: 1.05rem; font-weight: 600; } .modal-bahaya-pesan { margin: .85rem 0 0; font-size: .875rem; line-height: 1.6; } .modal-bahaya-pesan strong { color: #B91C1C; } html.dark .modal-bahaya-pesan strong { color: #FCA5A5; } .modal-bahaya-medan { display: grid; gap: .4rem; margin-top: 1.15rem; } .modal-bahaya-medan > span { font-size: .8rem; font-weight: 500; } .modal-bahaya-medan input { width: 100%; padding: .6rem .85rem; font: inherit; font-size: .95rem; letter-spacing: .18em; text-align: center; color: var(--teks); background: var(--latar); border: 1.5px solid var(--garis); border-radius: 10px; } .modal-bahaya-medan input:focus { outline: none; border-color: #B91C1C; box-shadow: 0 0 0 3px rgba(185, 28, 28, .18); } .modal-bahaya-medan small { font-size: .75rem; color: #B91C1C; } html.dark .modal-bahaya-medan small { color: #FCA5A5; } .modal-bahaya-tombol { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1.35rem; } .modal-bahaya-tombol .tombol-garis { color: var(--teks); border-color: var(--garis); } /* --------------------------------------------------------------- 8. KARTU & SLIDER --------------------------------------------------------------- */ .kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: var(--radius); box-shadow: var(--bayang); overflow: hidden; transition: transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi); } .kartu:hover { transform: translateY(-4px); box-shadow: var(--bayang-tinggi); border-color: rgba(201, 162, 39, .55); border-color: color-mix(in srgb, var(--emas) 55%, var(--garis)); } .gambar-isi { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .3, 1); } .kartu:hover .gambar-isi { transform: scale(1.05); } /* Kotak gambar yang terisi penuh tanpa memotong isinya. Gambar aslinya digambar utuh dengan object-fit:contain — tidak ada sisi yang terpangkas berapa pun perbandingan sisi berkasnya. Sisa ruang di kiri-kanan atau atas-bawahnya ditutup salinan gambar yang sama dalam keadaan kabur, sehingga bingkainya tetap terlihat penuh dari tepi ke tepi. Gradasi hijau jadi cadangan bila berkas gambarnya tidak ada. */ .bingkai-penuh { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(160deg, var(--hijau-gelap) 0%, var(--hijau) 55%, var(--hijau-muda) 100%); } .bingkai-penuh::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--gambar-latar, none); background-size: cover; background-position: center; filter: blur(16px) brightness(.78) saturate(1.1); transform: scale(1.18); } .gambar-utuh { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; } /* Latar cadangan bila berkas gambar belum diunggah */ .gambar-kosong { background: linear-gradient(135deg, var(--hijau-gelap) 0%, var(--hijau) 55%, var(--hijau-muda) 100%); position: relative; display: grid; place-items: center; color: rgba(255, 255, 255, .35); } .gambar-kosong::after { content: ''; position: absolute; inset: 0; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C9A227' stroke-width='1'%3E%3Cpath d='M60 8 72 32 96 20 84 44 112 60 84 76 96 100 72 88 60 112 48 88 24 100 36 76 8 60 36 44 24 20 48 32Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 90px 90px; } /* Rangka slider */ .slider { position: relative; } .slider-jalur { display: flex; transition: transform .6s cubic-bezier(.2, .7, .3, 1); will-change: transform; } .slider-jalur.tanpa-animasi { transition: none; } .slider-item { flex: 0 0 100%; min-width: 0; } .slider-tombol { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--permukaan); border: 1px solid var(--garis); color: var(--teks); box-shadow: var(--bayang); transition: all var(--transisi); } .slider-tombol:hover { background: var(--hijau); color: #fff; border-color: var(--hijau); } .slider-tombol:disabled { opacity: .4; cursor: not-allowed; } .slider-titik { width: 8px; height: 8px; border-radius: 999px; background: var(--garis); transition: all var(--transisi); } .slider-titik.aktif { width: 26px; background: var(--emas); } /* Slider dengan beberapa item per layar */ @media (min-width: 640px) { .slider-2 .slider-item { flex-basis: 50%; } } @media (min-width: 1024px) { .slider-3 .slider-item { flex-basis: 33.3333%; } } /* --------------------------------------------------------------- 9. ANIMASI TAMPIL SAAT DIGULIR --------------------------------------------------------------- */ .muncul { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .3, 1); } .muncul.tampil { opacity: 1; transform: none; } .muncul[data-jeda="1"] { transition-delay: .09s; } .muncul[data-jeda="2"] { transition-delay: .18s; } .muncul[data-jeda="3"] { transition-delay: .27s; } .muncul[data-jeda="4"] { transition-delay: .36s; } .hero-masuk { opacity: 0; transform: translateY(18px); animation: heroMasuk .8s cubic-bezier(.2, .7, .3, 1) forwards; } .hero-masuk[data-jeda="1"] { animation-delay: .12s; } .hero-masuk[data-jeda="2"] { animation-delay: .24s; } .hero-masuk[data-jeda="3"] { animation-delay: .36s; } .hero-masuk[data-jeda="4"] { animation-delay: .48s; } @keyframes heroMasuk { to { opacity: 1; transform: none; } } .geser-motif { animation: geserMotif 70s linear infinite; } @keyframes geserMotif { to { background-position: 140px 140px; } } .berdenyut { animation: berdenyut 2.4s ease-in-out infinite; } @keyframes berdenyut { 0%, 100% { opacity: 1; } 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .muncul, .hero-masuk { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .geser-motif, .berdenyut { animation: none !important; } .slider-jalur { transition: none !important; } .gambar-isi, .kartu { transition: none !important; } } /* --------------------------------------------------------------- 10. LAIN-LAIN --------------------------------------------------------------- */ .lencana { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .7rem; border-radius: 999px; font-size: .74rem; font-weight: 600; background: rgba(11, 93, 59, .12); background: color-mix(in srgb, var(--hijau) 12%, transparent); color: var(--hijau); } html.dark .lencana { background: rgba(228, 201, 106, .16); background: color-mix(in srgb, var(--emas) 16%, transparent); color: var(--emas-muda); } .lencana-emas { background: rgba(201, 162, 39, .18); background: color-mix(in srgb, var(--emas) 18%, transparent); color: #7A6110; } html.dark .lencana-emas { color: var(--emas-muda); } .tombol-atas { position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 40; width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: var(--hijau); color: #fff; box-shadow: var(--bayang-tinggi); opacity: 0; pointer-events: none; transform: translateY(12px); transition: all var(--transisi); } .tombol-atas.tampil { opacity: 1; pointer-events: auto; transform: none; } .tombol-wa { position: fixed; inset-inline-end: 1.25rem; bottom: 5rem; z-index: 40; width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: var(--bayang-tinggi); transition: transform var(--transisi); } .tombol-wa:hover { transform: scale(1.07); } /* Pilihan font Arab */ .pilih-font { appearance: none; background: transparent; border: 1px solid var(--garis); color: inherit; border-radius: 999px; padding: .35rem 2rem .35rem .85rem; font-size: .82rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C9A227' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; } .pilih-font option { color: #1F2937; } /* Konten artikel */ .prosa { line-height: 1.85; color: var(--teks); } .prosa p { margin-bottom: 1.1rem; } .prosa h2, .prosa h3 { font-family: var(--font-judul, 'Poppins'), sans-serif; color: var(--hijau); margin: 1.8rem 0 .8rem; } html.dark .prosa h2, html.dark .prosa h3 { color: var(--emas-muda); } .prosa ul, .prosa ol { margin: 0 0 1.1rem 1.4rem; } .prosa ul { list-style: disc; } .prosa ol { list-style: decimal; } .prosa a { color: var(--hijau); text-decoration: underline; text-underline-offset: 3px; } html.dark .prosa a { color: var(--emas-muda); } .prosa img { border-radius: var(--radius); margin: 1.2rem 0; } .prosa blockquote { border-inline-start: 3px solid var(--emas); padding-inline-start: 1.1rem; color: var(--teks-lembut); font-style: italic; margin: 1.2rem 0; } /* Potong teks pada jumlah baris tertentu */ .baris-2, .baris-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .baris-2 { -webkit-line-clamp: 2; } .baris-3 { -webkit-line-clamp: 3; } /* Cetak */ @media print { .kepala, .tombol-atas, .tombol-wa, .laci, .tirai, #kanvas-hero { display: none !important; } body { background: #fff; color: #000; } } /* =================================================================== 11. KOMPONEN HALAMAN PUBLIK (TAHAP 3) =================================================================== */ /* --- Tombol saring (chip) --- */ .chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem 1rem; border-radius: 999px; border: 1px solid var(--garis); background: var(--permukaan); font-size: .82rem; font-weight: 500; color: var(--teks); transition: all var(--transisi); white-space: nowrap; } .chip:hover { border-color: var(--emas); color: var(--emas); } .chip.aktif { background: var(--hijau); border-color: var(--hijau); color: #fff; } html.dark .chip.aktif { background: var(--emas); border-color: var(--emas); color: #14261C; } .label-saring { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teks-lembut); width: 4.6rem; flex-shrink: 0; } /* --- Kolom isian --- */ .kolom { width: 100%; border-radius: 10px; padding: .7rem .9rem; border: 1px solid var(--garis); background: var(--latar); color: var(--teks); font-family: inherit; font-size: .93rem; transition: border-color .2s, box-shadow .2s; } .kolom::placeholder { color: var(--teks-lembut); } .kolom:focus { outline: none; border-color: var(--hijau); box-shadow: 0 0 0 3px rgba(11, 93, 59, .15); } html.dark .kolom:focus { border-color: var(--emas); box-shadow: 0 0 0 3px rgba(201, 162, 39, .18); } textarea.kolom { resize: vertical; min-height: 7rem; } /* --- Kotak kata sandi dengan tombol mata --- */ .kotak-sandi { position: relative; } .kotak-sandi .kolom { padding-right: 2.9rem; } .tombol-mata { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; color: var(--teks-lembut); background: none; border: 0; cursor: pointer; transition: color .2s, background .2s; } .tombol-mata:hover { color: var(--hijau); background: rgba(11, 93, 59, .08); } html.dark .tombol-mata:hover { color: var(--emas-muda); background: rgba(228, 201, 106, .13); } .tombol-mata:focus-visible { outline: 2px solid var(--hijau); outline-offset: 1px; } /* Ikon mata tertutup hanya muncul ketika sandinya sedang ditampilkan */ .tombol-mata .mata-tutup { display: none; } .tombol-mata[aria-pressed="true"] .mata-buka { display: none; } .tombol-mata[aria-pressed="true"] .mata-tutup { display: block; } /* --- Kotak pencarian --- */ .kotak-cari { display: flex; align-items: center; gap: .25rem; border: 1px solid var(--garis); background: var(--permukaan); border-radius: 999px; padding: .2rem .2rem .2rem 1rem; transition: border-color .2s, box-shadow .2s; } .kotak-cari:focus-within { border-color: var(--hijau); box-shadow: 0 0 0 3px rgba(11, 93, 59, .12); } html.dark .kotak-cari:focus-within { border-color: var(--emas); } .kotak-cari input { border: 0; background: transparent; color: inherit; outline: none; font-size: .88rem; padding: .5rem 0; width: min(60vw, 15rem); } .kotak-cari input::placeholder { color: var(--teks-lembut); } .kotak-cari button { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 999px; background: var(--hijau); color: #fff; flex-shrink: 0; transition: background-color var(--transisi); } .kotak-cari button:hover { background: var(--hijau-gelap); } /* --- Navigasi halaman --- */ .paginasi { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.75rem; } .hal-tombol { display: grid; place-items: center; min-width: 40px; height: 40px; padding-inline: .6rem; border-radius: 10px; border: 1px solid var(--garis); background: var(--permukaan); font-size: .88rem; font-weight: 500; color: var(--teks); transition: all var(--transisi); } .hal-tombol:hover { border-color: var(--emas); color: var(--emas); } .hal-tombol.aktif { background: var(--hijau); border-color: var(--hijau); color: #fff; } html.dark .hal-tombol.aktif { background: var(--emas); border-color: var(--emas); color: #14261C; } .hal-titik { padding-inline: .25rem; color: var(--teks-lembut); } /* --- Galeri masonry --- */ .masonry { column-count: 1; column-gap: 1.25rem; } @media (min-width: 640px) { .masonry { column-count: 2; } } @media (min-width: 1024px) { .masonry { column-count: 3; } } @media (min-width: 1400px) { .masonry { column-count: 4; } } .masonry-item { break-inside: avoid; margin-bottom: 1.25rem; display: inline-block; width: 100%; } /* --- Kronologi (jadwal harian & kalender akademik) --- */ .kronologi { position: relative; padding-inline-start: 1.35rem; } .kronologi::before { content: ''; position: absolute; inset-block: .55rem; inset-inline-start: .28rem; width: 1px; background: var(--garis); } .kronologi li { position: relative; padding-block: .7rem; display: flex; flex-wrap: wrap; gap: .25rem 1.1rem; } .kronologi li::before { content: ''; position: absolute; inset-inline-start: -1.35rem; top: 1.15rem; width: 9px; height: 9px; border-radius: 999px; background: var(--emas); box-shadow: 0 0 0 3px var(--latar); } .krono-jam { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .84rem; color: var(--hijau); min-width: 8.5rem; font-variant-numeric: tabular-nums; } html.dark .krono-jam { color: var(--emas-muda); } .krono-isi { font-size: .92rem; flex: 1 1 12rem; } /* --- Tabel --- */ .tabel { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabel th, .tabel td { padding: .8rem 1rem; text-align: left; white-space: nowrap; } .tabel thead th { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--teks-lembut); border-bottom: 1px solid var(--garis); font-weight: 700; } .tabel tbody tr { border-bottom: 1px solid var(--garis); } .tabel tbody tr:last-child { border-bottom: 0; } .tabel tbody tr:hover { background: rgba(11, 93, 59, .05); } html.dark .tabel tbody tr:hover { background: rgba(228, 201, 106, .07); } /* --------------------------------------------------------------- Tabel lebar yang dapat diseret mendatar. Batang gulir bawaan letaknya jauh di bawah tabel dan mudah terlewat, sehingga banyak pemakai mengira kolom di sebelah kanan memang tidak ada. Kursor tangan dan bayangan tipis di tepi kanan memberi tahu bahwa isinya masih berlanjut, dan wadahnya dapat langsung diseret seperti peta. --------------------------------------------------------------- */ .overflow-x-auto.dapat-digeser { cursor: grab; position: relative; } .overflow-x-auto.sedang-digeser { cursor: grabbing; user-select: none; } .overflow-x-auto.sedang-digeser a, .overflow-x-auto.sedang-digeser button { pointer-events: none; } /* Batang gulir dibuat ramping supaya tidak mencuri perhatian */ .overflow-x-auto::-webkit-scrollbar { height: 8px; } .overflow-x-auto::-webkit-scrollbar-track { background: transparent; } .overflow-x-auto::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--teks-lembut) 35%, transparent); border-radius: 999px; } .overflow-x-auto::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--teks-lembut) 60%, transparent); } .overflow-x-auto { scrollbar-width: thin; } /* Isyarat bahwa masih ada kolom di sebelah kanan */ @media (min-width: 861px) { .kartu.dapat-digeser { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); } .kartu.dapat-digeser:hover, .kartu.sedang-digeser { -webkit-mask-image: none; mask-image: none; } } /* Bilah alat di atas tabel: di ponsel kotak cari dan penyaring memanjang penuh agar tidak berdesakan dalam satu baris sempit. */ @media (max-width: 640px) { .kotak-cari { width: 100%; } .kotak-cari input { width: 100%; } .kotak-cari + select, .kotak-cari ~ select { flex: 1 1 10rem; } } /* --------------------------------------------------------------- Hiasan hero — gambar yang menyala lalu larut jadi kilau bintang. Satu putaran 14 detik: gambar muncul dari kecil, membesar perlahan sambil makin jelas, lalu memudar sementara kilau bintang menyala menggantikannya. Keduanya berbagi satu putaran waktu yang sama supaya pergantiannya tepat — kilau baru muncul saat gambarnya mulai surut. Letaknya di belakang tulisan hero dengan z-index negatif, dan seluruh elemennya tidak menerima tunjuk agar tidak menghalangi tautan di atasnya. --------------------------------------------------------------- */ .hiasan-hero { position: absolute; z-index: -1; pointer-events: none; inset-inline-start: 50%; top: 50%; width: clamp(200px, 34vw, 340px); aspect-ratio: 1 / 1; transform: translate(-50%, -50%); } .hiasan-hero-kanan { inset-inline-start: auto; inset-inline-end: 6%; } .hiasan-hero img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; opacity: 0; transform-origin: center; filter: saturate(.85) drop-shadow(0 10px 24px rgba(0, 0, 0, .35)); animation: hiasanNyala 14s cubic-bezier(.22, .61, .36, 1) infinite; } @keyframes hiasanNyala { 0% { opacity: 0; transform: scale(.45); } 10% { opacity: .46; transform: scale(.82); } /* muncul sambil membesar */ 46% { opacity: .40; transform: scale(1.06); } /* membesar pelan-pelan */ 68% { opacity: .16; transform: scale(1.24); } /* mulai surut */ 80% { opacity: 0; transform: scale(1.38); } /* menghilang */ 100% { opacity: 0; transform: scale(.45); } /* jeda sebelum mengulang */ } /* ---- Kilau bintang ---- */ .hiasan-kilau { position: absolute; inset: 0; display: block; } .hiasan-kilau i { position: absolute; inset-inline-start: var(--x); top: var(--y); width: var(--ukuran); height: var(--ukuran); margin: calc(var(--ukuran) / -2) 0 0 calc(var(--ukuran) / -2); opacity: 0; transform: scale(.2) rotate(0deg); animation: hiasanKilau 14s ease-in-out infinite; animation-delay: var(--tunda); } /* Bentuk bintang empat sudut dari dua gradasi bersilang, tanpa berkas gambar */ .hiasan-kilau i::before, .hiasan-kilau i::after { content: ''; position: absolute; inset: 0; background: var(--emas-muda); clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); } .hiasan-kilau i::after { transform: rotate(45deg) scale(.62); opacity: .7; } @keyframes hiasanKilau { 0%, 52% { opacity: 0; transform: scale(.2) rotate(0deg); } 62% { opacity: .95; transform: scale(1.15) rotate(35deg); } 72% { opacity: .7; transform: scale(.85) rotate(70deg); } 86% { opacity: 0; transform: scale(1.3) rotate(120deg); } 100% { opacity: 0; transform: scale(.2) rotate(120deg); } } /* Layar sempit: hiasan dikecilkan dan disamarkan agar tulisan tetap utama */ @media (max-width: 640px) { .hiasan-hero { width: clamp(150px, 52vw, 230px); } .hiasan-hero img { filter: saturate(.8); } } /* Bagi yang meminta pengurangan gerak, yang dihentikan hanya perubahan ukuran dan putarannya — bagian inilah yang memicu rasa pusing. Timbul-tenggelamnya kepekatan dipertahankan, sebab memudar tidak menimbulkan gerak semu dan hiasannya tetap hidup. Catatan: Windows dan macOS menyalakan pengaturan ini diam-diam pada sebagian perangkat, itulah sebabnya hiasan bisa terlihat diam di komputer padahal bergerak di ponsel. */ @media (prefers-reduced-motion: reduce) { .hiasan-hero img { transform: scale(1); animation-name: hiasanRedup; } .hiasan-kilau i { transform: none; animation-name: hiasanKilauRedup; } } @keyframes hiasanRedup { 0% { opacity: 0; } 10% { opacity: .42; } 46% { opacity: .38; } 68% { opacity: .14; } 80%, 100% { opacity: 0; } } @keyframes hiasanKilauRedup { 0%, 52% { opacity: 0; } 62% { opacity: .9; } 72% { opacity: .65; } 86%, 100% { opacity: 0; } } /* --------------------------------------------------------------- Kartu sorot — dipakai bagian Pendidik dan Prestasi di beranda. Bentuknya persegi panjang membulat yang terisi penuh gambar, dengan tulisan duduk di atasnya pada selubung gelap. Susunan menumpuk begini jauh lebih ringkas daripada bentuk bersusun yang memisahkan gambar dan blok teks, padahal keterangan yang tertampung sama banyaknya. Kesan tiga dimensinya dirakit dari empat lapis yang saling menguatkan: garis emas tipis di tepi dalam, kilau cahaya miring di permukaan, bayangan ganda yang menjauh saat disorot, dan blok tulisan yang terangkat menjauhi bidang kartu. Kemiringan mengikuti kursor ditangani gaya_kartu_3d(). Gambarnya tetap digambar utuh lewat .bingkai-penuh, jadi tidak ada wajah yang terpotong. --------------------------------------------------------------- */ .kartu-sorot { --sudut-kartu: 18px; position: relative; display: block; overflow: hidden; border-radius: var(--sudut-kartu); border: 1px solid var(--garis); background: var(--hijau-gelap); box-shadow: 0 1px 2px rgba(7, 48, 31, .18), 0 12px 26px -16px rgba(7, 48, 31, .5); transition: transform var(--transisi), box-shadow var(--transisi), border-color var(--transisi); } .kartu-sorot:hover { border-color: color-mix(in srgb, var(--emas) 60%, transparent); } /* Garis emas tipis di tepi dalam, plus pantulan lembut di sisi atas dan bayangan halus di sisi bawah. Ketiganya satu lapis agar markup tetap ringkas. */ .kartu-sorot::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .28), inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .25); } /* Kilau cahaya miring, muncul saat kartu disorot */ .kartu-sorot-kilau { position: absolute; inset: -20%; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .16) 48%, transparent 58%); transition: opacity var(--transisi); } .kartu-sorot-isi { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 1.6rem .85rem .8rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(4, 20, 13, .58) 36%, rgba(4, 20, 13, .94)); } .kartu-sorot-nama { margin: 0; font-family: var(--font-judul), sans-serif; font-weight: 600; font-size: .9rem; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kartu-sorot-ket { margin: .2rem 0 0; font-size: .75rem; line-height: 1.35; color: rgba(255, 255, 255, .8); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* Label kecil untuk mata pelajaran atau tingkat lomba */ .kartu-sorot-label { display: inline-block; margin-top: .4rem; padding: .16rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 700; letter-spacing: .02em; color: var(--hijau-gelap); background: linear-gradient(160deg, var(--emas-muda), var(--emas)); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .45); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 640px) { .kartu-sorot { --sudut-kartu: 20px; } .kartu-sorot-isi { padding: 1.8rem 1rem .95rem; } .kartu-sorot-nama { font-size: .98rem; } .kartu-sorot-ket { font-size: .78rem; } } @media (prefers-reduced-motion: reduce) { .kartu-sorot, .kartu-sorot-kilau { transition: none; } } /* --------------------------------------------------------------- Tabel daftar yang bertumpuk di layar sempit. Tabel data dengan delapan kolom mustahil dibaca di layar ponsel; menggulir mendatar membuat kolom Nama keluar dari pandangan sehingga pembaca kehilangan acuan barisnya. Di bawah 860px tiap baris berubah menjadi kartu bertumpuk: judul kolom dicetak ulang di kiri lewat data-label, nilainya di kanan. --------------------------------------------------------------- */ @media (max-width: 860px) { .tabel-responsif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .tabel-responsif, .tabel-responsif tbody, .tabel-responsif tr, .tabel-responsif td { display: block; width: 100%; } .tabel-responsif tbody tr { padding: .85rem 1rem; border-bottom: 1px solid var(--garis); } .tabel-responsif tbody tr:last-child { border-bottom: 0; } .tabel-responsif td { display: flex; align-items: baseline; gap: 1rem; padding: .3rem 0; max-width: none !important; white-space: normal !important; } .tabel-responsif td::before { content: attr(data-label); flex: 0 0 8.5rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teks-lembut); } .tabel-responsif td[data-label=""]::before { display: none; } .tabel-responsif .sel-isi { flex: 1 1 auto; min-width: 0; text-align: right; overflow-wrap: anywhere; } /* Foto ditempatkan sendiri di puncak kartu, tanpa judul kolom */ .tabel-responsif .sel-gambar { padding-bottom: .5rem; } .tabel-responsif .sel-gambar .sel-isi { text-align: left; } /* Tombol tindakan dipisahkan garis agar tidak menyatu dengan datanya */ .tabel-responsif .sel-tindakan { margin-top: .55rem; padding-top: .7rem; border-top: 1px dashed var(--garis); } .tabel-responsif .sel-tindakan > div { justify-content: flex-start; } /* Gulir mendatar tidak diperlukan lagi pada lebar ini */ .kartu.overflow-x-auto:has(.tabel-responsif) { overflow-x: visible; } } @media (max-width: 420px) { .tabel-responsif td { flex-direction: column; gap: .1rem; } .tabel-responsif td::before { flex: none; } .tabel-responsif .sel-isi { text-align: left; } } /* --------------------------------------------------------------- Tabel rapat. Modul berkolom banyak — Data Guru sembilan kolom, Verifikasi PMBM delapan — melewati lebar layar begitu tiap sel dipaksa satu baris. Gulir mendatar memperbaikinya dengan cara yang buruk: kolom Nama ikut terdorong keluar sehingga baris yang sedang dibaca kehilangan acuan. Di atas 860px, tempat tabelnya masih berbentuk tabel, jarak dalam sel dan ukuran hurufnya dikecilkan lalu isinya dibiarkan membungkus, sehingga seluruh kolom muat selebar wadahnya. Di bawah 860px aturan .tabel-responsif yang berlaku dan kelas ini tidak ikut campur. --------------------------------------------------------------- */ @media (min-width: 861px) { .tabel-padat { font-size: .82rem; } .tabel-padat th, .tabel-padat td { padding: .55rem .6rem; white-space: normal; overflow-wrap: anywhere; } .tabel-padat thead th { font-size: .66rem; letter-spacing: .05em; } /* Lencana, tanggal, dan tombol tindakan tetap utuh sebaris */ .tabel-padat td .lencana, .tabel-padat .sel-tindakan { white-space: nowrap; } /* Kolom foto menyempit seisi gambarnya saja supaya sisa lebar jatuh ke kolom teks yang memang butuh ruang */ .tabel-padat .sel-gambar { width: 1%; } .kartu.overflow-x-auto:has(.tabel-padat) { overflow-x: visible; } } /* --------------------------------------------------------------- Baris label-nilai pada rincian pendaftar PMBM. Di layar sempit label naik ke atas nilainya; menyandingkan keduanya pada lebar ponsel menyisakan kolom setipis benang untuk alamat surel atau nama panjang. Mulai 480px keduanya kembali sebaris dengan nilai rata kanan seperti sedia kala. --------------------------------------------------------------- */ .baris-rincian { display: grid; gap: .1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--garis); } .baris-rincian dt { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); } .baris-rincian dd { font-weight: 500; overflow-wrap: anywhere; } @media (min-width: 480px) { .baris-rincian { grid-template-columns: minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: .35rem 1rem; padding-bottom: .6rem; } .baris-rincian dt { font-size: .875rem; font-weight: 400; letter-spacing: 0; text-transform: none; } .baris-rincian dd { text-align: right; } } /* --- Tombol bagikan --- */ .tombol-bagikan { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--garis); background: var(--permukaan); font-size: .8rem; font-weight: 500; color: var(--teks); transition: all var(--transisi); } .tombol-bagikan:hover { border-color: var(--emas); color: var(--emas); transform: translateY(-1px); } /* --- Pesan kilat --- */ .pesan-kilat { position: fixed; top: 5.2rem; inset-inline-end: 1rem; z-index: 60; display: flex; align-items: flex-start; gap: .85rem; max-width: min(92vw, 26rem); padding: .9rem 1rem; border-radius: 12px; border: 1px solid var(--garis); background: var(--permukaan); box-shadow: var(--bayang-tinggi); font-size: .89rem; line-height: 1.5; animation: masukKanan .4s cubic-bezier(.2, .7, .3, 1); } .pesan-kilat::before { content: ''; width: 3px; align-self: stretch; border-radius: 999px; background: var(--hijau); flex-shrink: 0; } .pesan-kilat.success::before { background: #16A34A; } .pesan-kilat.error::before { background: #DC2626; } .pesan-kilat.warning::before { background: var(--emas); } .pesan-kilat.info::before { background: #2563EB; } .pesan-kilat button { color: var(--teks-lembut); flex-shrink: 0; margin-top: .1rem; } .pesan-kilat button:hover { color: var(--teks); } .pesan-kilat.pergi { opacity: 0; transform: translateX(1.5rem); transition: all .35s ease; } @keyframes masukKanan { from { opacity: 0; transform: translateX(1.5rem); } } /* --- Lightbox galeri --- */ .lightbox { position: fixed; inset: 0; z-index: 80; display: none; background: rgba(6, 20, 14, .93); align-items: center; justify-content: center; padding: 1rem; } .lightbox.terbuka { display: flex; animation: munculLb .28s ease; } @keyframes munculLb { from { opacity: 0; } } .lightbox-isi { max-width: min(96vw, 1100px); width: 100%; text-align: center; } .lightbox-isi img { max-height: 76vh; width: auto; max-width: 100%; margin-inline: auto; border-radius: 10px; } .lightbox-isi iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; } .lightbox-teks { margin-top: 1rem; color: #fff; } .lightbox-teks h3 { font-family: 'Poppins', sans-serif; font-size: 1.05rem; } .lightbox-teks p { margin-top: .35rem; font-size: .85rem; color: rgba(255, 255, 255, .7); } .lightbox-tombol { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; transition: background-color var(--transisi); } .lightbox-tombol:hover { background: var(--emas); color: #14261C; } .lightbox-prev { inset-inline-start: 1rem; } .lightbox-next { inset-inline-end: 1rem; } .lightbox-tutup { position: absolute; top: 1rem; inset-inline-end: 1rem; transform: none; } @media (max-width: 640px) { .lightbox-prev { inset-inline-start: .35rem; } .lightbox-next { inset-inline-end: .35rem; } } @media (prefers-reduced-motion: reduce) { .pesan-kilat, .lightbox.terbuka { animation: none !important; } .tombol-bagikan:hover { transform: none; } } /* =================================================================== 12. FORMULIR BERTAHAP & PMBM (TAHAP 4) =================================================================== */ /* --- Lencana tambahan --- */ .lencana-hijau { background: rgba(22, 163, 74, .14); color: #15803D; } .lencana-merah { background: rgba(220, 38, 38, .13); color: #B91C1C; } .lencana-kuning { background: rgba(202, 138, 4, .16); color: #854D0E; } html.dark .lencana-hijau { background: rgba(74, 222, 128, .16); color: #86EFAC; } html.dark .lencana-merah { background: rgba(248, 113, 113, .16); color: #FCA5A5; } html.dark .lencana-kuning { background: rgba(250, 204, 21, .16); color: #FDE68A; } /* --- Tombol tindakan merusak, dipakai pada penghapusan massal --- */ .tombol-merah { background: #B91C1C; color: #fff; } .tombol-merah:hover { background: #991B1B; } .tombol-merah:disabled { opacity: .55; cursor: not-allowed; } /* --- Bilah kemajuan pemrosesan bertahap --- */ .bilah-kemajuan { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(11, 93, 59, .12); } html.dark .bilah-kemajuan { background: rgba(228, 201, 106, .14); } .bilah-kemajuan-isi { height: 100%; width: 0; background: linear-gradient(90deg, var(--hijau) 0%, var(--hijau-muda) 60%, var(--emas) 100%); transition: width .25s cubic-bezier(.2, .7, .3, 1); } @media (prefers-reduced-motion: reduce) { .bilah-kemajuan-isi { transition: none; } } /* --- Kotak galat & catatan --- */ .kotak-galat { border: 1px solid rgba(220, 38, 38, .35); background: rgba(220, 38, 38, .07); color: #B91C1C; border-radius: var(--radius); padding: 1rem 1.15rem; font-size: .9rem; } .kotak-galat ul { display: grid; gap: .35rem; } .kotak-galat li { position: relative; padding-inline-start: 1rem; } .kotak-galat li::before { content: '•'; position: absolute; inset-inline-start: 0; } html.dark .kotak-galat { color: #FCA5A5; } .kotak-catatan { border-inline-start: 3px solid var(--emas); background: rgba(201, 162, 39, .09); border-radius: 0 10px 10px 0; padding: .9rem 1.1rem; color: var(--teks); } /* --- Label formulir --- */ [data-wizard] label, .kotak-unggah label { display: block; font-size: .875rem; font-weight: 500; margin-bottom: .4rem; } [data-wizard] label.pilihan-kartu { margin-bottom: 0; } .wajib::after { content: ' *'; color: #DC2626; } html.dark .wajib::after { color: #FCA5A5; } .opsional { font-weight: 400; font-size: .78rem; color: var(--teks-lembut); } .kolom.galat { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); } /* --- Penanda langkah --- */ .penanda-langkah { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; } .penanda-langkah li { display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; color: var(--teks-lembut); font-size: .76rem; font-weight: 500; } .penanda-langkah .nomor { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; border: 1.5px solid var(--garis); background: var(--permukaan); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .85rem; transition: all var(--transisi); } .penanda-langkah li.kini { color: var(--hijau); } .penanda-langkah li.kini .nomor { background: var(--hijau); border-color: var(--hijau); color: #fff; } .penanda-langkah li.selesai .nomor { background: var(--emas); border-color: var(--emas); color: #14261C; } html.dark .penanda-langkah li.kini { color: var(--emas-muda); } @media (max-width: 480px) { .penanda-langkah .teks { display: none; } } .bilah-maju { height: 4px; border-radius: 999px; background: var(--garis); margin-top: 1rem; overflow: hidden; } .bilah-maju span { display: block; height: 100%; background: var(--emas); transition: width .4s cubic-bezier(.2, .7, .3, 1); } .aksi-langkah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--garis); } /* --- Pilihan berbentuk kartu --- */ .pilihan-kartu { display: flex; align-items: center; gap: .75rem; cursor: pointer; border: 1px solid var(--garis); border-radius: 12px; padding: .85rem 1rem; background: var(--latar); transition: all var(--transisi); font-size: .9rem; } .pilihan-kartu:hover { border-color: var(--emas); } .pilihan-kartu input { accent-color: var(--hijau); width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .pilihan-kartu:has(input:checked) { border-color: var(--hijau); background: rgba(11, 93, 59, .07); } html.dark .pilihan-kartu:has(input:checked) { border-color: var(--emas); background: rgba(201, 162, 39, .1); } .pilihan-kartu:focus-within { box-shadow: 0 0 0 3px rgba(11, 93, 59, .14); } /* --- Kotak unggah berkas --- */ .kotak-unggah { border: 1px dashed var(--garis); border-radius: 12px; padding: 1rem 1.15rem; transition: border-color var(--transisi); } .kotak-unggah:hover, .kotak-unggah:focus-within { border-color: var(--emas); } .kotak-unggah input[type="file"] { width: 100%; font-size: .82rem; color: var(--teks-lembut); } .kotak-unggah input[type="file"]::file-selector-button { margin-inline-end: .75rem; padding: .45rem .9rem; border: 0; border-radius: 999px; background: var(--hijau); color: #fff; font-family: inherit; font-size: .8rem; font-weight: 500; cursor: pointer; } .kotak-unggah input[type="file"]::file-selector-button:hover { background: var(--hijau-gelap); } .nama-berkas { margin-top: .55rem; font-size: .78rem; color: var(--teks-lembut); } .nama-berkas.ada { color: var(--hijau); font-weight: 500; } html.dark .nama-berkas.ada { color: var(--emas-muda); } /* --- Kronologi status pendaftaran --- */ .langkah-status { display: grid; gap: 0; } .langkah-status li { display: flex; gap: 1rem; position: relative; padding-bottom: 1.5rem; } .langkah-status li:last-child { padding-bottom: 0; } .langkah-status li::after { content: ''; position: absolute; inset-inline-start: 16px; top: 34px; bottom: 6px; width: 2px; background: var(--garis); } .langkah-status li:last-child::after { display: none; } .langkah-status .titik { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; flex-shrink: 0; border: 1.5px solid var(--garis); background: var(--permukaan); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .85rem; color: var(--teks-lembut); position: relative; z-index: 1; } .langkah-status .isi { display: grid; gap: .2rem; padding-top: .35rem; } .langkah-status .judul { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; } .langkah-status .ket { font-size: .82rem; color: var(--teks-lembut); } .langkah-status li.lewat .titik { background: var(--emas); border-color: var(--emas); color: #14261C; } .langkah-status li.kini .titik { background: var(--hijau); border-color: var(--hijau); color: #fff; } .langkah-status li.gagal .titik { background: #DC2626; border-color: #DC2626; color: #fff; } .langkah-status li.lewat::after { background: var(--emas); } /* --- Tanya jawab --- */ .tanya-jawab summary { cursor: pointer; list-style: none; padding: 1.1rem 1.25rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .95rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .tanya-jawab summary::-webkit-details-marker { display: none; } .tanya-jawab summary::after { content: '+'; font-size: 1.35rem; line-height: 1; color: var(--emas); flex-shrink: 0; transition: transform var(--transisi); } .tanya-jawab[open] summary::after { content: '−'; } .tanya-jawab .jawaban { padding: 0 1.25rem 1.2rem; font-size: .9rem; line-height: 1.75; color: var(--teks-lembut); } .tanya-jawab:hover { transform: none; } /* --- Cetak bukti pendaftaran --- */ @media print { .penanda-langkah, .bilah-maju, .aksi-langkah, .tombol, .tombol-bagikan, .pesan-kilat, .chip { display: none !important; } .kartu { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; } #bukti-pendaftaran { border: 2px solid #333 !important; } } /* =================================================================== 13. RANGKA PORTAL (TAHAP 5) =================================================================== */ .portal-rangka { min-height: 100vh; } .portal-samping { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 60; width: 268px; display: flex; flex-direction: column; background: var(--permukaan); border-inline-end: 1px solid var(--garis); transform: translateX(-100%); transition: transform .32s cubic-bezier(.2, .7, .3, 1); } .portal-samping.terbuka { transform: translateX(0); } @media (min-width: 1024px) { .portal-samping { transform: none; } } .portal-merek { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.1rem 1rem; border-bottom: 1px solid var(--garis); } .nav-portal { flex: 1; overflow-y: auto; padding: .75rem .7rem; display: grid; gap: .2rem; align-content: start; } .nav-portal a { display: flex; align-items: center; gap: .8rem; padding: .7rem .85rem; border-radius: 10px; font-size: .88rem; font-weight: 500; color: var(--teks); transition: all var(--transisi); } .nav-portal a:hover { background: rgba(11, 93, 59, .07); color: var(--hijau); } html.dark .nav-portal a:hover { background: rgba(228, 201, 106, .08); color: var(--emas-muda); } .nav-portal a.aktif { background: var(--hijau); color: #fff; } .nav-portal a.aktif svg { color: var(--emas-muda); } .nav-portal a svg { flex-shrink: 0; } .nav-portal a span:first-of-type { flex: 1; min-width: 0; } .lonceng { min-width: 20px; height: 20px; padding-inline: .35rem; border-radius: 999px; background: #DC2626; color: #fff; font-size: .68rem; font-weight: 700; display: grid; place-items: center; flex-shrink: 0; } .portal-kaki { padding: .9rem 1rem 1.1rem; border-top: 1px solid var(--garis); display: grid; gap: .5rem; } .tautan-kecil { display: inline-flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 500; color: var(--teks-lembut); transition: color var(--transisi); } .tautan-kecil:hover { color: var(--emas); } .tirai-samping { position: fixed; inset: 0; z-index: 55; background: rgba(7, 24, 17, .55); opacity: 0; pointer-events: none; transition: opacity .3s; } .tirai-samping.terbuka { opacity: 1; pointer-events: auto; } @media (min-width: 1024px) { .tirai-samping { display: none; } } .portal-utama { min-height: 100vh; display: flex; flex-direction: column; } @media (min-width: 1024px) { .portal-utama { margin-inline-start: 268px; } } .portal-atas { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .85rem; padding: .8rem 1.1rem; background: var(--permukaan); border-bottom: 1px solid var(--garis); } @media (min-width: 1024px) { .portal-atas { padding-inline: 1.75rem; } } .portal-isi { flex: 1; padding: 1.4rem 1.1rem 3rem; } @media (min-width: 1024px) { .portal-isi { padding: 1.9rem 1.75rem 3.5rem; } } .avatar-portal { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; background: var(--hijau); color: var(--emas-muda); overflow: hidden; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: .8rem; } .avatar-portal img { width: 100%; height: 100%; object-fit: cover; } /* --- Pilihan status kehadiran --- */ .pilihan-hadir { display: flex; flex-wrap: wrap; gap: .3rem; } .pilihan-hadir label { cursor: pointer; } .pilihan-hadir input { position: absolute; opacity: 0; width: 0; height: 0; } .pilihan-hadir span { display: inline-block; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--garis); font-size: .74rem; font-weight: 500; transition: all var(--transisi); white-space: nowrap; } .pilihan-hadir input:checked + span { border-color: var(--hijau); background: var(--hijau); color: #fff; } .pilihan-hadir input:checked + span[data-status="alpa"] { border-color: #DC2626; background: #DC2626; } .pilihan-hadir input:checked + span[data-status="sakit"], .pilihan-hadir input:checked + span[data-status="izin"], .pilihan-hadir input:checked + span[data-status="terlambat"] { border-color: var(--emas); background: var(--emas); color: #14261C; } .pilihan-hadir input:focus-visible + span { outline: 2px solid var(--emas); outline-offset: 2px; } /* =================================================================== 14. PERCAKAPAN =================================================================== */ .chat-rangka { display: grid; grid-template-columns: 1fr; height: min(72vh, 640px); } @media (min-width: 1024px) { .chat-rangka { grid-template-columns: 290px 1fr; } } .chat-kontak { display: flex; flex-direction: column; border-inline-end: 1px solid var(--garis); min-height: 0; } .chat-kontak-kepala { padding: .85rem; border-bottom: 1px solid var(--garis); } .chat-daftar { flex: 1; overflow-y: auto; } .chat-kontak-item { display: flex; align-items: center; gap: .7rem; width: 100%; padding: .7rem .85rem; transition: background-color var(--transisi); } .chat-kontak-item:hover { background: rgba(11, 93, 59, .06); } html.dark .chat-kontak-item:hover { background: rgba(228, 201, 106, .07); } .chat-kontak-item.aktif { background: rgba(11, 93, 59, .1); box-shadow: inset 3px 0 0 var(--emas); } html.dark .chat-kontak-item.aktif { background: rgba(228, 201, 106, .1); } .chat-percakapan { display: flex; flex-direction: column; min-height: 0; } .chat-kepala { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; border-bottom: 1px solid var(--garis); } .chat-isi { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--latar); } .chat-kosong { margin: auto; text-align: center; padding: 2rem 1rem; } .gelembung { max-width: min(80%, 34rem); align-self: flex-start; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px 14px 14px 4px; padding: .6rem .85rem; font-size: .89rem; line-height: 1.6; } .gelembung.saya { align-self: flex-end; background: var(--hijau); color: #fff; border-color: var(--hijau); border-radius: 14px 14px 4px 14px; } .gelembung .waktu { display: block; margin-top: .3rem; font-size: .66rem; opacity: .65; } .chat-komposer { display: flex; align-items: flex-end; gap: .6rem; padding: .8rem 1rem; border-top: 1px solid var(--garis); } .chat-komposer textarea { resize: none; min-height: 2.6rem; max-height: 8.75rem; } /* Pada layar kecil, daftar kontak dan percakapan bergantian */ @media (max-width: 1023px) { #ruang-chat .chat-percakapan { display: none; } #ruang-chat.percakapan-terbuka .chat-kontak { display: none; } #ruang-chat.percakapan-terbuka .chat-percakapan { display: flex; } } @media print { .portal-samping, .portal-atas, .tirai-samping { display: none !important; } .portal-utama { margin-inline-start: 0 !important; } } /* =================================================================== 15. CMS ADMINISTRATOR (TAHAP 6) =================================================================== */ .nav-grup { padding: .9rem .85rem .35rem; font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teks-lembut); } .nav-grup:first-child { padding-top: .2rem; } .kotak-grafik { position: relative; height: 15rem; } .kotak-grafik canvas { width: 100% !important; height: 100% !important; } /* Kartu ringkasan yang bisa diklik */ a.kartu { display: block; } /* Rapikan tabel CMS pada layar kecil */ @media (max-width: 640px) { .tabel th, .tabel td { padding: .65rem .75rem; font-size: .82rem; } } /* =================================================================== 16. PENGATURAN, HITUNG MUNDUR, DAN CHATBOT (TAHAP 7) =================================================================== */ /* --- Pemilih warna --- */ .kolom-warna { width: 3.4rem; height: 2.7rem; padding: 3px; border-radius: 10px; border: 1px solid var(--garis); background: var(--latar); cursor: pointer; } .kolom-warna::-webkit-color-swatch { border: 0; border-radius: 7px; } .kolom-warna::-moz-color-swatch { border: 0; border-radius: 7px; } code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: rgba(11, 93, 59, .09); padding: .1rem .4rem; border-radius: 5px; } html.dark code { background: rgba(228, 201, 106, .12); } /* --- Hitung mundur agenda --- */ .mundur-angka { display: grid; place-items: center; min-width: 4.4rem; padding: .85rem .5rem; border-radius: 12px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); } .mundur-angka b { font-family: 'Poppins', sans-serif; font-size: 1.85rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; } .mundur-angka span { margin-top: .3rem; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } /* --- Chatbot --- */ .bot-pemicu { position: fixed; inset-inline-end: 1.25rem; bottom: 8.6rem; z-index: 45; display: flex; align-items: center; gap: .55rem; padding: .7rem .95rem; border-radius: 999px; background: var(--hijau); color: #fff; box-shadow: var(--bayang-tinggi); font-size: .82rem; font-weight: 600; font-family: 'Poppins', sans-serif; transition: transform var(--transisi), background-color var(--transisi); } .bot-pemicu:hover { transform: translateY(-2px); background: var(--hijau-gelap); } .bot-pemicu .titik-hidup { width: 7px; height: 7px; border-radius: 999px; background: var(--emas-muda); flex-shrink: 0; } .bot-panel { position: fixed; inset-inline-end: 1.25rem; bottom: 1.25rem; z-index: 46; width: min(94vw, 24rem); max-height: min(78vh, 34rem); display: none; flex-direction: column; overflow: hidden; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 18px; box-shadow: var(--bayang-tinggi); } .bot-panel.terbuka { display: flex; animation: botMasuk .28s cubic-bezier(.2, .7, .3, 1); } @keyframes botMasuk { from { opacity: 0; transform: translateY(14px); } } .bot-kepala { display: flex; align-items: center; gap: .7rem; padding: .9rem 1rem; background: var(--hijau); color: #fff; } .bot-kepala .lencana-bot { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: var(--emas-muda); flex-shrink: 0; } .bot-isi { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .55rem; background: var(--latar); } .bot-gelembung { max-width: 86%; align-self: flex-start; font-size: .87rem; line-height: 1.65; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px 14px 14px 4px; padding: .65rem .85rem; } .bot-gelembung.saya { align-self: flex-end; background: var(--hijau); color: #fff; border-color: var(--hijau); border-radius: 14px 14px 4px 14px; } .bot-gelembung a { text-decoration: underline; text-underline-offset: 3px; } .bot-saran { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 1rem .7rem; } .bot-saran button { padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--garis); background: var(--permukaan); font-size: .76rem; text-align: start; transition: all var(--transisi); } .bot-saran button:hover { border-color: var(--emas); color: var(--emas); } .bot-komposer { display: flex; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--garis); } .bot-komposer input { flex: 1; } .bot-mengetik span { display: inline-block; width: 6px; height: 6px; margin-inline-end: 3px; border-radius: 999px; background: var(--teks-lembut); animation: botTitik 1.2s infinite ease-in-out; } .bot-mengetik span:nth-child(2) { animation-delay: .18s; } .bot-mengetik span:nth-child(3) { animation-delay: .36s; } @keyframes botTitik { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Geser tombol mengambang agar tidak bertumpuk dengan chatbot */ body:has(.bot-pemicu) .tombol-wa { bottom: 5rem; } @media (max-width: 480px) { .bot-pemicu { inset-inline-end: .85rem; bottom: 8.2rem; padding: .6rem .8rem; font-size: .76rem; } .bot-panel { inset-inline: .6rem; width: auto; bottom: .8rem; } } @media (prefers-reduced-motion: reduce) { .bot-panel.terbuka { animation: none !important; } .bot-pemicu:hover { transform: none; } .bot-mengetik span { animation: none !important; } } @media print { .bot-pemicu, .bot-panel { display: none !important; } } /* =================================================================== 17. BAHASA GANDA, TIPOGRAFI DINAMIS, TEKS BERJALAN (TAHAP 8) =================================================================== */ /* --- Tampilan teks multi-bahasa --- */ .multi { display: inline-flex; flex-direction: column; gap: .1em; line-height: 1.3; vertical-align: middle; } .multi .ml-id { display: block; } .multi .ml-en { display: block; font-size: .82em; opacity: .78; font-style: italic; } .multi .ml-ar { display: block; direction: rtl; font-size: 1em; opacity: .92; font-family: var(--font-arab, 'Noto Naskh Arabic'), serif; line-height: 1.7; } /* Di dalam judul besar, baris pendamping dibuat lebih proporsional */ h1 .multi .ml-en, h2 .multi .ml-en { font-size: .58em; font-style: normal; letter-spacing: .01em; } h1 .multi .ml-ar, h2 .multi .ml-ar { font-size: .82em; } /* Pada navigasi dan tombol, baris pendamping dipadatkan */ .tautan-nav .multi, .tombol .multi, .chip .multi, .lencana .multi { gap: 0; } .tautan-nav .multi .ml-en, .tombol .multi .ml-en, .chip .multi .ml-en { font-size: .74em; } .tautan-nav .multi .ml-ar, .tombol .multi .ml-ar, .chip .multi .ml-ar { font-size: .86em; } /* Eyebrow tetap satu baris mendatar bila muat */ .eyebrow .multi { flex-direction: row; gap: .5em; align-items: baseline; } .eyebrow .multi .ml-en { font-style: normal; } /* --- Teks berjalan (running text) --- */ .pita-jalan { position: relative; z-index: 55; overflow: hidden; display: flex; align-items: stretch; border-bottom: 1px solid rgba(0, 0, 0, .08); } .pita-jalan .label-jalan { display: grid; place-items: center; flex-shrink: 0; z-index: 2; padding: 0 1rem; font-family: var(--font-judul, 'Poppins'), sans-serif; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(0, 0, 0, .18); } .pita-jalan .jalur-jalan { display: flex; flex: 1; min-width: 0; overflow: hidden; padding-block: .55rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); } .pita-jalan .rangkai { display: flex; flex-shrink: 0; align-items: center; gap: 2.6rem; padding-inline: 1.3rem; white-space: nowrap; font-size: .84rem; font-weight: 500; animation: jalanKanan var(--laju-jalan, 28s) linear infinite; } .pita-jalan[data-arah="kiri"] .rangkai { animation-name: jalanKiri; } .pita-jalan:hover .rangkai, .pita-jalan:focus-within .rangkai { animation-play-state: paused; } .pita-jalan .butir { display: inline-flex; align-items: center; gap: .6rem; } .pita-jalan .butir::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .55; flex-shrink: 0; } .pita-jalan .butir.arab { font-family: var(--font-arab, 'Noto Naskh Arabic'), serif; direction: rtl; font-size: .95rem; } @keyframes jalanKanan { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes jalanKiri { from { transform: translateX(-100%); } to { transform: translateX(0); } } /* Header menyesuaikan posisi bila ada pita di puncak laman */ .pita-atas { position: relative; z-index: 56; } body.ada-pita-atas .kepala { top: var(--tinggi-pita-atas, 2.4rem); } /* --- Animasi judul hero --- */ .anim-naik { opacity: 0; transform: translateY(20px); animation: judulNaik .9s cubic-bezier(.2, .7, .3, 1) .1s forwards; } @keyframes judulNaik { to { opacity: 1; transform: none; } } .anim-geser-kanan { opacity: 0; transform: translateX(-42px); animation: judulGeserKanan .95s cubic-bezier(.2, .7, .3, 1) .1s forwards; } @keyframes judulGeserKanan { to { opacity: 1; transform: none; } } .anim-geser-kiri { opacity: 0; transform: translateX(42px); animation: judulGeserKiri .95s cubic-bezier(.2, .7, .3, 1) .1s forwards; } @keyframes judulGeserKiri { to { opacity: 1; transform: none; } } .anim-kilau { background: linear-gradient(100deg, #fff 20%, var(--emas-muda) 42%, #fff 64%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: judulKilau 5.5s ease-in-out infinite; } @keyframes judulKilau { 0%, 100% { background-position: 180% 0; } 50% { background-position: -40% 0; } } .anim-ketik { position: relative; } .anim-ketik .kursor-ketik { display: inline-block; width: .06em; height: .95em; margin-inline-start: .06em; background: var(--emas-muda); vertical-align: -.08em; animation: kedipKursor .9s steps(1) infinite; } @keyframes kedipKursor { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .anim-naik, .anim-geser-kanan, .anim-geser-kiri { opacity: 1 !important; transform: none !important; animation: none !important; } .anim-kilau { animation: none !important; -webkit-text-fill-color: currentColor; color: inherit; background: none; } .pita-jalan .rangkai { animation: none !important; } .anim-ketik .kursor-ketik { animation: none !important; } } /* --- Pratinjau tema di halaman pengaturan --- */ .pratinjau-tema { border: 1px solid var(--garis); border-radius: var(--radius); overflow: hidden; } .pratinjau-tema .kepala-pratinjau { padding: 1.1rem 1.25rem; color: #fff; } /* Baris menu contoh pada halaman pengaturan */ .baris-menu-pratinjau { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; padding-bottom: .9rem; border-bottom: 1px solid rgba(255, 255, 255, .18); } .tautan-nav-pratinjau { font-size: .82rem; color: rgba(255, 255, 255, .92); } .tautan-nav-pratinjau:first-child { color: var(--emas-muda); font-weight: 600; } .tombol-masuk-pratinjau { margin-inline-start: auto; padding: .35rem 1.05rem; border-radius: 999px; color: #16261B; font-size: .78rem; font-weight: 600; } .baris-menu-pratinjau .multi { gap: 0; } .baris-menu-pratinjau .multi .ml-en { font-size: .74em; } .baris-menu-pratinjau .multi .ml-ar { font-size: .86em; } .pratinjau-tema .isi-pratinjau { padding: 1.25rem; background: var(--permukaan); } .contoh-warna { width: 1.6rem; height: 1.6rem; border-radius: 6px; border: 1px solid var(--garis); flex-shrink: 0; } @media print { .pita-jalan { display: none !important; } } /* =================================================================== 18. TEKS DWIBAHASA BERSANDING & BILAH AKADEMIK =================================================================== */ /* --- Gaya bersanding: Latin di kiri, Arab di kanan dalam satu baris --- */ html[data-gaya-bahasa="sanding"] .multi { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .15em .6em; line-height: 1.45; } html[data-gaya-bahasa="sanding"] .multi .ml-en { font-size: .84em; font-style: normal; } html[data-gaya-bahasa="sanding"] .multi .ml-ar { font-size: .96em; } /* Titik pemisah antar bahasa, seperti pada daftar menu dwibahasa */ html[data-gaya-bahasa="sanding"] .multi > span + span::before { content: '·'; margin-inline-end: .45em; opacity: .45; font-weight: 400; } /* Pada baris menu, bahasa pendamping didorong ke tepi berlawanan */ html[data-gaya-bahasa="sanding"] .tautan-nav .multi, html[data-gaya-bahasa="sanding"] .laci nav a .multi, html[data-gaya-bahasa="sanding"] .nav-portal a .multi, html[data-gaya-bahasa="sanding"] footer li .multi { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: .9em; } html[data-gaya-bahasa="sanding"] .tautan-nav .multi > span + span::before, html[data-gaya-bahasa="sanding"] .laci nav a .multi > span + span::before, html[data-gaya-bahasa="sanding"] .nav-portal a .multi > span + span::before, html[data-gaya-bahasa="sanding"] footer li .multi > span + span::before { content: none; margin: 0; } /* Baris menu perlu menjadi flex agar pasangan bahasa dapat merenggang */ html[data-gaya-bahasa="sanding"] .laci nav a { display: flex; align-items: center; } html[data-gaya-bahasa="sanding"] footer li > a { display: flex; align-items: center; } /* Bahasa pendamping pada menu diberi warna lebih lembut */ html[data-gaya-bahasa="sanding"] .tautan-nav .ml-ar, html[data-gaya-bahasa="sanding"] .laci nav a .ml-ar, html[data-gaya-bahasa="sanding"] footer li .ml-ar { opacity: .72; } /* Judul besar tetap rapi meski bersanding */ html[data-gaya-bahasa="sanding"] h1 .multi, html[data-gaya-bahasa="sanding"] h2 .multi { gap: .2em .7em; } html[data-gaya-bahasa="sanding"] h1 .multi .ml-en, html[data-gaya-bahasa="sanding"] h2 .multi .ml-en { font-size: .55em; opacity: .72; } html[data-gaya-bahasa="sanding"] h1 .multi .ml-ar, html[data-gaya-bahasa="sanding"] h2 .multi .ml-ar { font-size: .78em; } /* Layar sempit: pasangan bahasa kembali bertumpuk agar tidak terpotong */ @media (max-width: 400px) { html[data-gaya-bahasa="sanding"] h1 .multi, html[data-gaya-bahasa="sanding"] h2 .multi { flex-direction: column; } html[data-gaya-bahasa="sanding"] h1 .multi > span + span::before, html[data-gaya-bahasa="sanding"] h2 .multi > span + span::before { content: none; } } /* --- Bilah informasi akademik --- */ .bilah-akademik { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .95rem; padding: .42rem 1rem; background: var(--hijau-gelap); color: rgba(255, 255, 255, .82); font-size: .74rem; letter-spacing: .02em; border-bottom: 1px solid rgba(255, 255, 255, .08); } .bilah-akademik .butir-akademik { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; } .bilah-akademik .butir-akademik + .butir-akademik::before { content: '·'; margin-inline-end: .55rem; opacity: .45; } .bilah-akademik strong { color: var(--emas-muda); font-weight: 600; } .bilah-akademik .arab { font-size: .95rem; opacity: .9; } @media (max-width: 480px) { .bilah-akademik { font-size: .68rem; gap: .25rem .6rem; padding-inline: .7rem; } .bilah-akademik .butir-akademik + .butir-akademik::before { margin-inline-end: .35rem; } } @media print { .bilah-akademik, .pita-atas { display: none !important; } } /* =================================================================== 19. TRANSLITERASI GAYA PESANTREN =================================================================== */ .multi .ml-tl { display: block; font-style: italic; font-size: .86em; opacity: .85; letter-spacing: .005em; } /* Bersanding: transliterasi mendahului aksara Arab dalam satu baris */ html[data-gaya-bahasa="sanding"] .multi .ml-tl { display: inline; font-size: .88em; } /* Pada baris menu, urutan tampil menjadi: Latin — transliterasi — Arab */ html[data-gaya-bahasa="sanding"] .tautan-nav .multi, html[data-gaya-bahasa="sanding"] .laci nav a .multi, html[data-gaya-bahasa="sanding"] .nav-portal a .multi, html[data-gaya-bahasa="sanding"] footer li .multi { gap: .55em; } html[data-gaya-bahasa="sanding"] .tautan-nav .ml-tl, html[data-gaya-bahasa="sanding"] .laci nav a .ml-tl, html[data-gaya-bahasa="sanding"] .nav-portal a .ml-tl, html[data-gaya-bahasa="sanding"] footer li .ml-tl { flex: 1; text-align: end; opacity: .7; } /* Judul besar: transliterasi dibuat lebih ramping agar tidak menandingi judul */ h1 .multi .ml-tl, h2 .multi .ml-tl { font-size: .5em; opacity: .75; letter-spacing: .02em; } /* Eyebrow tetap sebaris */ .eyebrow .multi .ml-tl { font-size: .9em; } /* Kartu acuan kaidah tafkhim di halaman pengaturan */ .tabel-tafkhim td, .tabel-tafkhim th { padding: .5rem .8rem; } .tabel-tafkhim .huruf-arab { font-family: var(--font-arab, 'Noto Naskh Arabic'), serif; font-size: 1.15rem; } .tabel-tafkhim code { font-size: .82em; } /* --------------------------------------------------------------- 20. DAFTAR PENGUNJUNG — panel rekap di kaki laman publik Dipakai index.php dan pmbm.php lewat panel_pengunjung() pada config.php. Latarnya selalu hijau gelap, jadi warnanya ditulis tetap terang dan tidak ikut berubah pada mode gelap. --------------------------------------------------------------- */ /* Panel ini duduk di dalam footer, tetapi latar dan warna tulisannya dibawa sendiri, tidak menumpang pembungkusnya. Dengan begitu ia tetap terbaca di mana pun ia dipasang, dan pemindahan tempat kelak tidak menyeret perbaikan warna. Warnanya sengaja sama dengan footer, jadi keduanya menyatu. Bobot tampilannya sengaja ditahan: panel ini melaporkan angka kunjungan, yang berguna bagi pengelola dan bukan bagi orang yang sedang menimbang madrasah ini. Ia harus terbaca sebagai catatan kaki, bukan bagian utama yang menyaingi Prestasi atau Testimoni di atasnya. */ .panel-pengunjung { position: relative; isolation: isolate; overflow: hidden; background: var(--hijau-gelap); color: rgba(255, 255, 255, .72); border-top: 1px solid rgba(255, 255, 255, .08); } /* Panelnya tidak bergantung pada preflight Tailwind: tanpa baris ini, lebar .wadah dihitung di luar padding dan kisinya menyembul keluar layar pada lebar menengah. Cakupannya sengaja dibatasi pada panel ini saja. */ .panel-pengunjung, .panel-pengunjung *, .panel-pengunjung *::before, .panel-pengunjung *::after { box-sizing: border-box; } /* Motif bintang delapan + semburat emas dari tengah atas — pengganti garis pemisah yang kaku. Motifnya sama dengan yang dipakai pita beranda dan kartu DATABASE, hanya digores emas karena panel ini berdiri di atas hijau tua footer. Dua lapisnya ditumpuk pada satu latar: motif di depan, semburat di belakangnya, jadi tidak perlu elemen semu tambahan. */ .panel-pengunjung::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,"), radial-gradient(125% 150% at 50% 0%, rgba(201, 162, 39, .17), transparent 62%); background-size: 96px 96px, auto; background-repeat: repeat, no-repeat; } .panel-pengunjung > .wadah { position: relative; padding-block: 2.15rem; } /* ---- Kepala panel ---- */ .pengunjung-kepala { max-width: 40rem; margin-inline: auto; text-align: center; } .pengunjung-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .68rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--emas-muda); } .pengunjung-eyebrow::before, .pengunjung-eyebrow::after { content: ''; width: 1.9rem; height: 1px; opacity: .55; background: linear-gradient(90deg, transparent, currentColor); } .pengunjung-eyebrow::after { background: linear-gradient(90deg, currentColor, transparent); } /* Judulnya diturunkan dari setinggi judul bagian beranda ke ukuran judul kaki laman; baris Arab dan pengantarnya ikut mengecil seirama. */ .pengunjung-judul { margin-top: .45rem; font-size: clamp(1.08rem, .95rem + .55vw, 1.35rem); font-weight: 600; line-height: 1.2; color: #fff; } .pengunjung-arab { margin-top: .15rem; font-size: 1.02rem; color: var(--emas-muda); opacity: .92; } .pengunjung-pengantar { margin-top: .4rem; font-size: .76rem; color: rgba(255, 255, 255, .58); } /* ---- Kisi kartu ---- Ponsel dua lajur, tablet empat, layar lebar tujuh sekaligus. Kartu Total melebar dua lajur pada dua susunan pertama supaya barisnya selalu genap. */ .pengunjung-kisi { margin-top: 1.35rem; display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .pengunjung-kartu-total { grid-column: span 2; } @media (min-width: 560px) { .pengunjung-kisi { gap: .8rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .pengunjung-kisi { grid-template-columns: repeat(7, minmax(0, 1fr)); } .pengunjung-kartu-total { grid-column: span 1; } } /* ---- Kartu ---- */ .pengunjung-kartu { position: relative; display: flex; flex-direction: column; align-items: center; gap: .28rem; padding: .85rem .6rem .9rem; border-radius: 16px; border: 1px solid rgba(228, 201, 106, .16); background: linear-gradient(158deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 62%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); overflow: hidden; transition: transform var(--transisi), border-color var(--transisi), box-shadow var(--transisi); } /* Garis rambut emas pada sisi atas, memanjang saat kartu disentuh */ .pengunjung-kartu::after { content: ''; position: absolute; top: 0; left: 24%; right: 24%; height: 1px; background: linear-gradient(90deg, transparent, var(--emas), transparent); opacity: .45; transition: opacity var(--transisi), left var(--transisi), right var(--transisi); } .pengunjung-kartu:hover { transform: translateY(-4px); border-color: rgba(228, 201, 106, .46); box-shadow: 0 20px 36px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .12); } .pengunjung-kartu:hover::after { opacity: 1; left: 8%; right: 8%; } .pengunjung-lencana { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 50%; font-size: 1.02rem; line-height: 1; background: rgba(255, 255, 255, .06); border: 1px solid rgba(228, 201, 106, .22); } .pengunjung-nilai { margin-top: .2rem; font-family: var(--font-judul, 'Poppins'), system-ui, sans-serif; font-weight: 700; font-size: 1.28rem; line-height: 1.15; color: var(--emas-muda); font-variant-numeric: tabular-nums; text-shadow: 0 1px 16px rgba(201, 162, 39, .3); } .pengunjung-nama { font-size: .72rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; text-align: center; color: #fff; } .pengunjung-ket { font-size: .66rem; line-height: 1.35; text-align: center; color: rgba(255, 255, 255, .48); } /* ---- Kartu Online: lencana berdenyut ---- */ .pengunjung-kartu-online { border-color: rgba(122, 224, 168, .3); } .pengunjung-kartu-online::after { background: linear-gradient(90deg, transparent, #6ee7a8, transparent); } .pengunjung-kartu-online .pengunjung-lencana { border-color: rgba(122, 224, 168, .5); animation: denyut-online 2.6s ease-out infinite; } .pengunjung-kartu-online .pengunjung-nilai { color: #8ee7b4; text-shadow: 0 1px 16px rgba(122, 224, 168, .32); } @keyframes denyut-online { 0% { box-shadow: 0 0 0 0 rgba(122, 224, 168, .45); } 70% { box-shadow: 0 0 0 13px rgba(122, 224, 168, 0); } 100% { box-shadow: 0 0 0 0 rgba(122, 224, 168, 0); } } /* ---- Kartu Total: sorotan emas ---- */ .pengunjung-kartu-total { border-color: rgba(228, 201, 106, .42); background: linear-gradient(158deg, rgba(201, 162, 39, .22), rgba(201, 162, 39, .05) 65%); } .pengunjung-kartu-total .pengunjung-nilai { color: #fff; text-shadow: 0 1px 18px rgba(201, 162, 39, .5); } /* ---- Baris penutup ---- */ .pengunjung-kaki { margin-top: 1.05rem; display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .7rem; color: rgba(255, 255, 255, .5); } .pengunjung-kaki b { color: rgba(255, 255, 255, .75); font-weight: 600; font-variant-numeric: tabular-nums; } .pengunjung-titik { width: .42rem; height: .42rem; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110, 231, 168, .16); animation: kedip-pengunjung 2.2s ease-in-out infinite; } @keyframes kedip-pengunjung { 50% { opacity: .25; } } /* Kilasan halus saat angka disegarkan tanpa memuat ulang halaman */ .pengunjung-nilai.berubah { animation: segar-pengunjung .85s cubic-bezier(.2, .7, .3, 1); } @keyframes segar-pengunjung { 0% { transform: translateY(-5px); opacity: .3; } 100% { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pengunjung-kartu-online .pengunjung-lencana, .pengunjung-titik, .pengunjung-nilai.berubah { animation: none; } .pengunjung-kartu:hover { transform: none; } } @media (max-width: 420px) { .panel-pengunjung > .wadah { padding-block: 1.75rem; } .pengunjung-nilai { font-size: 1.16rem; } .pengunjung-kartu { padding: .75rem .5rem .8rem; border-radius: 14px; } }