/* ===================================================================== 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 { --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; } /* --------------------------------------------------------------- 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); } /* 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); } /* 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; } /* --------------------------------------------------------------- 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); } /* 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 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); } /* --- 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; } html.dark .lencana-hijau { background: rgba(74, 222, 128, .16); color: #86EFAC; } html.dark .lencana-merah { background: rgba(248, 113, 113, .16); color: #FCA5A5; } /* --- 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; }