/* HSN 2026 — penyesuaian di atas kerangka Islamus (PRD v0.5 11.5.1). Palet situs, font OFL, header statis, hero + countdown, widget sholat, kartu kegiatan, Arab RTL. */ :root { --green-main: #1E5A38; --green-dark: #0d3b22; --green-mid: #017534; --green-soft: #4d9b47; --lime-glow: #B68B2C; --theme-color1: #1E5A38; --theme-color2: #B68B2C; --theme-color3: #017534; /* Palet logo Hari Santri 2026 versi PBNU (dibaca dari PDF resmi, 01-10-2026) — aksen, bukan pengganti hijau NU. Emas #EAB87A kontrasnya rendah di atas putih: hanya untuk garis/latar/ornamen; teks beraksen emas memakai --hsn-emas-tua. */ --hsn-hijau: #005221; --hsn-hijau-muda: #E6F0EA; --hsn-emas: #EAB87A; --hsn-emas-muda: #FBF3E8; --hsn-emas-tua: #7A5414; --heading-font-family: "Lora", Georgia, serif; --body-font-family: "Manrope", system-ui, sans-serif; --headings-color: #16221b; --text-color: rgba(12, 47, 37, 0.75); } html { scroll-behavior: smooth; } body.publik { background: #f6f8f6; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---- header: alur normal (bukan absolut di atas banner), bilah tanggal Hijriah ---- */ .header-style-one { position: relative; background: #fff; box-shadow: 0 2px 14px rgba(13, 59, 34, .08); } .header-style-one .logo img { height: 48px; width: auto; } .header-style-one .main-menu .navigation > li > a { color: #16221b; } .header-style-one .main-menu .navigation > li.current > a { color: var(--green-main); } .bilah-tanggal { background: var(--green-dark); color: #d9eadf; font-size: .86rem; padding: 6px 0; } .bilah-tanggal .container { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .bilah-tanggal a { color: #f2d48a; } .sticky-header .logo img { height: 38px; } .mobile-menu .navigation > li > a { display: block; padding: 12px 20px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); } .mobile-menu .nav-logo img { height: 40px; } .tombol-daftar-header { display: inline-block; background: var(--theme-color2); color: #1b1b1b; font-weight: 700; padding: 10px 18px; border-radius: 999px; } /* ---- hero ---- */ .banner-section { margin-top: 0; padding: 20px 12px 0; } .banner-section .outer-box { padding-top: 70px; padding-bottom: 58px; background: radial-gradient(900px 420px at 85% -20%, rgba(1, 117, 52, .85) 0%, transparent 60%), linear-gradient(160deg, #0d3b22, #1E5A38 60%, #215f3c); } .banner-section .outer-box .banner-content .title { font-size: clamp(30px, 4.4vw, 56px); font-family: var(--heading-font-family); line-height: 1.12; } .banner-section .lead-hero { color: rgba(255,255,255,.92); max-width: 62ch; margin-top: 12px; font-size: .98rem; } .banner-section .tema-hsn { color: #f2d48a; font-family: var(--heading-font-family); font-style: italic; font-size: 1.3rem; margin-top: 6px; } .banner-section .outer-box .banner-image .image { mask-image: none; background: rgba(255,255,255,.08); border-radius: 30px; padding: 26px; } .banner-section .outer-box .banner-image .image img { filter: brightness(0) invert(1); opacity: .95; } /* Tombol tema: bawaan Islamus memberi teks #111 di atas hijau (btn-style-one) — tak terbaca; btn-style-two putih-di-atas-putih di latar terang ("Semua berita" hanya tampak lingkaran panah). Latar terang = garis hijau; latar hijau (kepala halaman) = transparan. */ .theme-btn.btn-style-one, .theme-btn.btn-style-one:hover, .theme-btn.btn-style-one:focus { color: #fff; } .theme-btn.btn-style-two { background: #fff; color: var(--green-dark); box-shadow: inset 0 0 0 1.5px #CFE0D5; } .page-title-hsn .theme-btn.btn-style-two, .banner-section .theme-btn.btn-style-two { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; } /* ---- countdown (PRD 7.1.2) ---- */ .countdown-hsn { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 8px; position: relative; z-index: 1; } .countdown-hsn .kotak { min-width: 88px; padding: 12px 10px; text-align: center; border-radius: 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff; } .countdown-hsn .kotak b { display: block; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--heading-font-family); } .countdown-hsn .kotak span { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; opacity: .9; } .countdown-label { color: #f2d48a; font-weight: 600; position: relative; z-index: 1; } .countdown-label b { color: #fff; } .countdown-label small { color: rgba(255,255,255,.85); font-weight: 400; display: block; } @media (max-width: 575.98px) { .countdown-hsn { display: grid; grid-template-columns: 1fr 1fr; } .countdown-hsn .kotak b { font-size: 1.7rem; } .banner-section .btn-box .theme-btn { display: flex; width: 100%; justify-content: center; margin-right: 0 !important; } .banner-section .btn-box .theme-btn .btn-title { white-space: normal; text-align: center; } } /* ---- jadwal sholat: bilah ringkas di bawah hero (keputusan pengurus 23-09-2026) ---- Sebelumnya seksi besar di tengah halaman; sekarang pengingat sekilas saja. */ .sholat-ringkas { padding: 14px 0 0; } .sholat-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line, #dfe7e1); border-radius: 16px; padding: 10px 16px; box-shadow: 0 4px 18px rgba(13,59,34,.06); } .sholat-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .86rem; } .sholat-label { font-weight: 700; color: var(--green-dark); white-space: nowrap; } .sholat-label i { color: var(--theme-color2); margin-right: 4px; } .sholat-tempat { color: #5b6b62; } .sholat-menuju { color: var(--hsn-hijau); font-weight: 600; white-space: nowrap; } .sholat-jam { display: flex; gap: 6px; flex-wrap: wrap; list-style: none; margin: 0 0 0 auto; padding: 0; } .sholat-jam li { display: flex; flex-direction: column; align-items: center; min-width: 58px; line-height: 1.2; padding: 5px 8px; border-radius: 10px; background: #F2F7F3; } .sholat-jam li span { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: #5b6b62; } .sholat-jam li b { font-size: .92rem; font-variant-numeric: tabular-nums; color: var(--green-dark); } .sholat-jam li.berikutnya { background: var(--green-main); } .sholat-jam li.berikutnya span { color: rgba(255,255,255,.82); } .sholat-jam li.berikutnya b { color: #fff; } .sholat-tautan { font-size: .84rem; white-space: nowrap; } .sholat-kosong { margin: 0; color: #5b6b62; font-size: .88rem; } @media (max-width: 767px) { .sholat-bar { padding: 10px 12px; gap: 10px; } .sholat-jam { margin-left: 0; width: 100%; justify-content: space-between; gap: 4px; } .sholat-jam li { min-width: 0; flex: 1 1 auto; padding: 5px 4px; } .sholat-tautan { margin-left: auto; } } /* ---- kartu kegiatan (event-block Islamus dengan placeholder tanpa foto) ---- */ .event-block .inner-box .image-box .image.placeholder { min-height: 220px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--hsn-hijau-muda), var(--hsn-emas-muda)); } .event-block .inner-box .image-box .image.placeholder img { width: auto; height: 180px; max-width: 70%; object-fit: contain; position: static; } .event-block .inner-box .image-box .image.placeholder::after { display: none; } /* Placeholder hanya punya satu (= :first-child): batalkan efek tema (scaleX(2) + blur 10px) agar logo HSN tidak kabur dan tidak menutupi label tanggal (01-10-2026). */ .event-block .inner-box .image-box .image.placeholder img, .event-block .inner-box:hover .image-box .image.placeholder img { transform: none; -webkit-transform: none; filter: none; -webkit-filter: none; opacity: 1; position: static; z-index: 0; } .event-block .inner-box .image-box .image.placeholder { opacity: 1; justify-content: flex-start; padding-left: 18px; } .event-block .inner-box .image-box .image.placeholder img { height: 128px !important; max-width: 46% !important; } /* label tanggal kartu: teks hijau di atas hijau (bawaan tema) nyaris tak terbaca */ .event-block .inner-box .image-box .image .tag { color: #f2d48a; } .event-block .inner-box .image-box .image .tag span { color: #fff; } .event-block .inner-box .image-box .image.placeholder .tag { z-index: 2; } .badge-hsn { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #EAF3ED; color: #0d3b22; } .badge-hsn.buka { background: #017534; color: #fff; } .badge-hsn.tutup { background: #eee; color: #444; } .badge-hsn.penuh { background: #fde8e6; color: #b3261e; } .badge-hsn.segera { background: #fbf3e0; color: #7a5a12; } .event-block .hijri-kecil { color: #5b6b62; font-size: .9rem; } /* ---- teks Arab (salam/doa) ---- */ .arab, p.arab { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.35em; line-height: 1.9; direction: rtl; text-align: right; } /* ---- konten halaman dalam & bagian generik ---- */ .page-title-hsn { background: linear-gradient(160deg, #0d3b22, #1E5A38); color: #fff; padding: 56px 0 40px; margin: 20px 12px 0; border-radius: 30px; } .page-title-hsn h1 { color: #fff; font-family: var(--heading-font-family); font-size: clamp(28px, 4vw, 48px); margin: 6px 0 8px; } .page-title-hsn .eyebrow { color: #f2d48a; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; } .page-title-hsn p { color: rgba(255,255,255,.9); } .konten-hsn { padding: 40px 0 60px; } .konten-hsn h2 { font-family: var(--heading-font-family); font-size: 1.6rem; margin: 30px 0 12px; } .kartu-hsn { background: #fff; border: 1px solid #dfe7e1; border-radius: 16px; padding: 20px 22px; box-shadow: 0 4px 18px rgba(13,59,34,.06); } .fakta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .fakta-grid .fakta { background: #fff; border: 1px solid #dfe7e1; border-radius: 14px; padding: 14px 16px; } .fakta-grid .fakta b { display: block; color: #5b6b62; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .langkah-daftar { counter-reset: langkah; list-style: none; padding: 0; display: grid; gap: 12px; } .langkah-daftar li { position: relative; padding-left: 52px; } .langkah-daftar li::before { counter-increment: langkah; content: counter(langkah); position: absolute; left: 0; top: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--green-main); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; } .accordion-box3 .acc-content { display: none; } .accordion-box3 .acc-content.current { display: block; } footer.footer-one .bottom-bar .copyright-text a { color: #f2d48a; } .footer-info { color: rgba(255,255,255,.85); font-size: .92rem; margin-top: 10px; } .footer-info a { color: #f2d48a; } /* halaman lama (juknis, klasemen, hasil, pengumuman, akun) yang masih memakai kelas hsn.css di dalam kerangka baru */ main.wrap-lama { width: min(1120px, 100% - 32px); margin: 24px auto 40px; } /* satu berkas logo: versi putih lewat filter (footer, menu mobile) */ .mobile-menu .nav-logo img { filter: brightness(0) invert(1); } /* foto dari panitia (aset-hsn2026) */ .banner-section .outer-box .banner-image.foto .image { padding: 0; overflow: hidden; border-radius: 24px; background: none; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); border: 4px solid rgba(255, 255, 255, .14); } .banner-section .outer-box .banner-image.foto .image img { filter: none; opacity: 1; width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; } .banner-section .outer-box .banner-image.foto, .banner-section .outer-box .banner-image.foto .image { max-width: 100%; margin: 0; } @media (max-width: 1199.98px) { .banner-section .outer-box .banner-image.foto { display: block; max-width: 720px; margin: 0 auto; } } @media (min-width: 1200px) { .banner-section .outer-box .banner-image.foto { padding-right: 36px; } .banner-section .outer-box .banner-content { padding-left: 72px; } } .banner-section .btn-box { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; } .banner-section .btn-box .theme-btn { margin: 0 !important; } /* Flyer kegiatan: lanskap melebar penuh, potret dibatasi tingginya agar kepala halaman tidak jadi jangkung. Dapat diklik untuk membuka flyer ukuran penuh. */ .page-title-hsn .foto-kepala { display: block; width: auto; max-width: 100%; max-height: 520px; height: auto; margin-inline: auto; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .page-title-hsn .foto-kepala-tautan { display: block; } .page-title-hsn .foto-kepala-tautan:focus-visible { outline: 3px solid #f2d48a; outline-offset: 4px; border-radius: 22px; } @media (max-width: 991px) { .page-title-hsn .foto-kepala { max-height: 420px; } } .foto-lokasi { width: 100%; border-radius: 12px; margin-bottom: 14px; } .narasumber-grid .narasumber { display: flex; gap: 12px; align-items: flex-start; } .narasumber .potret { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; border: 3px solid #EAF3ED; } .narasumber .potret.kosong { display: flex; align-items: center; justify-content: center; background: #EAF3ED; color: #1E5A38; font-size: 1.4rem; } .fakta-logo img { max-height: 90px; width: auto; display: block; margin-top: 6px; } .event-block .inner-box .image-box .image img { width: 100%; height: 100%; object-fit: cover; } /* formulir di kerangka publik */ .form-hsn .form-control { border: 1.5px solid #cfe3d6; border-radius: 12px; padding: .7rem .9rem; font-family: var(--body-font-family); } .form-hsn .form-control:focus { border-color: var(--green-main); box-shadow: 0 0 0 .2rem rgba(30,90,56,.15); } .form-hsn .form-control-lg { font-size: 1.15rem; } .form-hsn .kode-otp { letter-spacing: .5em; font-size: 1.6rem; text-align: center; font-variant-numeric: tabular-nums; } .form-hsn input[type=text], .form-hsn input[type=password] { width: 100%; border: 1.5px solid #cfe3d6; border-radius: 12px; padding: .7rem .9rem; } .form-hsn .theme-btn { justify-content: center; } .theme-btn.w-100 { display: flex; justify-content: center; } main.wrap-lama .card { margin-top: 18px; } .page-title-hsn b { color: #fff; } .page-title-hsn h1 { line-height: 1.15; } .narasumber-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .event-block .inner-box .image-box .image::after { display: none; } /* Kartu /kegiatan/ tampak kabur saat diam (03-10-2026): efek hover Islamus menaruh pertama dengan translateX(50%) scaleX(2) + blur(10px); aturan lama `img:first-child { opacity: 1 }` justru menampilkannya. Kartu kini memakai SATU gambar yang selalu tajam; hover cukup perbesaran halus. */ .event-block .inner-box .image-box .image img:first-child, .event-block .inner-box:hover .image-box .image img:first-child, .event-block .inner-box:hover .image-box .image img:last-child { position: relative; inset: auto; transform: none; -webkit-transform: none; filter: none; -webkit-filter: none; opacity: 1; z-index: 0; } .event-block .inner-box .image-box .image:not(.placeholder) img { transition: transform .5s ease; } .event-block .inner-box:hover .image-box .image:not(.placeholder) img:first-child { transform: scale(1.03); } /* flyer potret tidak lagi memanjangkan kartu: dipangkas dari atas (judul flyer tetap terlihat) */ .event-block .inner-box .image-box .image:not(.placeholder) img { max-height: 560px; object-fit: cover; object-position: 50% 0; } /* saringan status /kegiatan/ (PRD 7.2.1) & riwayat pembaruan halaman kegiatan (7.2.2 butir 9) */ .saring-kegiatan{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .saring-kegiatan .badge-hsn{text-decoration:none;font-size:14px;padding:6px 14px} .saring-kegiatan .badge-hsn[aria-current]{box-shadow:0 0 0 2px #B68B2C inset} .riwayat-kegiatan{padding-left:18px} .riwayat-kegiatan li{margin-bottom:6px} /* v0.6 — Susunan Panitia (7.16) */ .susunan-blok h2 { font-size: 1.25rem; margin-bottom: 10px; } .susunan-jabatan b { display: block; color: #5b6b62; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; } .susunan-jabatan ul { padding-left: 18px; } .susunan-anggota { columns: 1; } .susunan-anggota li { break-inside: avoid; } @media (min-width: 768px) { #seksi-acara .susunan-anggota { columns: 2; column-gap: 24px; } } /* v0.6 — Kartu Peserta (7.17) */ .kartu-peserta { border-top: 6px solid var(--green-main, #017534); } .kartu-qr svg { width: min(72vw, 260px); height: auto; } .kartu-nomor { font-family: var(--heading-font-family); font-size: 2rem; font-weight: 700; color: #0d3b22; margin-top: 8px; } .kartu-nama { font-size: 1.25rem; font-weight: 600; } /* ── Logo Hari Santri Nasional 2026 ───────────────────────────────────────── Lambang HSN 2026 mendampingi lambang NU; lambang NU tetap identitas utama. */ .logo-box { display: flex; align-items: center; gap: 14px; } .logo-hsn { display: inline-flex; align-items: center; line-height: 0; } .logo-hsn img { height: 46px; width: auto; } .sticky-header .logo-hsn img { height: 36px; } @media (max-width: 575px) { .logo-hsn img { height: 36px; } } /* Lambang HSN berwarna — jangan ikut dijadikan putih seperti lambang NU. */ .mobile-menu .nav-logo .logo-hsn img { filter: none; } /* Kunci logo penuh di hero (dipakai bila panitia belum memasang foto hero) */ .banner-image .logo-kunci { max-width: min(320px, 100%); height: auto; margin-inline: auto; } /* ── Halaman Makna Logo ─────────────────────────────────────────────────── */ .logo-panggung { background: linear-gradient(150deg, var(--hsn-hijau-muda), var(--hsn-emas-muda)); border-radius: 24px; padding: 36px 24px; text-align: center; } .logo-panggung img { width: min(360px, 100%); height: auto; margin-inline: auto; } .makna-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 26px; } .makna-kartu { background: #fff; border: 1px solid #e3ece8; border-left: 5px solid var(--hsn-hijau); border-radius: 16px; padding: 20px 22px; } .makna-kartu:nth-child(even) { border-left-color: var(--hsn-emas); } .makna-kartu h3 { font-family: var(--heading-font-family); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--hsn-hijau); margin: 0 0 8px; } .makna-kartu:nth-child(even) h3 { color: var(--hsn-emas-tua); } .makna-kartu p { margin: 0; color: #4a5a52; } .palet-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 18px; } .palet-kartu { border: 1px solid #e3ece8; border-radius: 16px; overflow: hidden; background: #fff; } .palet-contoh { height: 88px; } .palet-kartu .isi { padding: 14px 16px; } .palet-kartu code { font-size: 1rem; font-weight: 700; letter-spacing: .06em; } /* ── Kolom berita (23-09-2026) ──────────────────────────────────────────── */ .berita-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); margin-top: 22px; } .berita-kartu { display: flex; flex-direction: column; background: #fff; border: 1px solid #dfe7e1; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 18px rgba(13,59,34,.06); } .berita-kartu.sorotan { border-color: var(--hsn-emas); box-shadow: 0 6px 22px rgba(234,184,122,.28); } .berita-gambar { display: block; aspect-ratio: 16 / 9; background: var(--hsn-hijau-muda); overflow: hidden; } .berita-gambar img { width: 100%; height: 100%; object-fit: cover; } .berita-gambar img.tanpa-foto { object-fit: contain; padding: 18px; } .berita-isi { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 8px; } .berita-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .82rem; color: #5b6b62; } .berita-meta .sorotan-tanda { background: var(--hsn-emas); color: #241a05; } .berita-judul { font-family: var(--heading-font-family); font-size: 1.12rem; line-height: 1.35; margin: 0; } .berita-judul a { color: var(--green-dark); text-decoration: none; } .berita-judul a:hover { color: var(--hsn-hijau); } .berita-ringkas { margin: 0; color: #4a5a52; font-size: .95rem; } .berita-kegiatan { margin: auto 0 0; font-size: .86rem; color: #5b6b62; } .berita-navigasi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: center; margin-top: 28px; } .berita-artikel { max-width: 760px; margin-inline: auto; } .berita-foto-utama { margin: 0 0 22px; } .berita-foto-utama img { width: 100%; border-radius: 18px; } .berita-foto-utama figcaption { margin-top: 8px; font-size: .84rem; color: #5b6b62; text-align: right; } .berita-ringkas-besar { font-size: 1.1rem; line-height: 1.6; color: #2f4238; border-left: 4px solid var(--hsn-hijau); padding-left: 16px; margin-bottom: 20px; } .berita-badan p { margin-bottom: 1em; } /* Subjudul, foto sisipan "[foto N]", dan galeri foto tambahan (05-10-2026) */ .berita-subjudul { font-family: var(--heading-font-family); font-size: 1.3rem; line-height: 1.35; color: var(--green-dark); margin: 1.6em 0 .6em; } .berita-foto { margin: 1.4em 0; } .berita-foto img { display: block; width: 100%; height: auto; max-height: min(78vh, 620px); object-fit: contain; background: var(--hsn-hijau-muda); border-radius: 14px; } .berita-foto figcaption { margin-top: 8px; font-size: .84rem; color: #5b6b62; } .berita-galeri { margin-top: 28px; } .berita-galeri-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .berita-galeri-grid .berita-foto { margin: 0; } .berita-galeri-grid .berita-foto img { aspect-ratio: 4 / 3; object-fit: cover; max-height: none; } /* Blok berita di beranda */ .beranda-berita .berita-grid { margin-top: 0; } /* ── Perbaikan elips dekoratif Islamus (23-09-2026) ───────────────────────── `.about-section:before` bawaan template adalah elips 1327px (top:-496px) TANPA z-index, sehingga tergambar di ATAS isi yang tidak diposisikan — kartu fakta, paragraf "Tentang", dan paragraf seksi di bawahnya ikut tertutup, menyisakan ruang krem kosong yang besar. Judul & tombol tetap tampak karena punya position/z-index sendiri. Elipsnya dipertahankan sebagai latar lembut, tetapi didorong ke belakang isi. */ .about-section::before { z-index: -1; } /* ── Halaman Juknis & Dokumen: kartu + pratinjau PDF di tempat (23-09-2026) ── */ .dok-kartu { background: #fff; border: 1px solid #dfe7e1; border-radius: 18px; box-shadow: 0 4px 18px rgba(13,59,34,.06); overflow: hidden; margin-bottom: 26px; } .dok-kepala { display: flex; gap: 18px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 20px 22px; } .dok-judul { font-family: var(--heading-font-family); font-size: 1.28rem; line-height: 1.3; color: var(--green-dark); margin: 10px 0 4px; } .dok-tanggal { color: #5b6b62; font-size: .88rem; margin: 0; } .dok-catatan { color: #4a5a52; font-size: .92rem; margin: 6px 0 0; max-width: 62ch; } .dok-aksi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dok-tab-baru { text-decoration: none; } .dok-pratinjau { border-top: 1px solid #e6efe9; background: #f4f7f5; padding: 14px; } .dok-pratinjau iframe { width: 100%; height: min(78vh, 760px); border: 1px solid #dfe7e1; border-radius: 12px; background: #fff; display: block; } .dok-bantuan { margin: 10px 2px 0; font-size: .86rem; color: #5b6b62; } .dok-arsip { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .dok-arsip li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } @media (max-width: 575px) { .dok-kepala { padding: 16px; } .dok-pratinjau iframe { height: 62vh; } } /* ── Kunci logo HSN 2026 di seksi "Tentang" beranda ── */ .tentang-logo { display: block; margin-top: 18px; padding: 18px; border-radius: 16px; text-decoration: none; background: linear-gradient(150deg, var(--hsn-hijau-muda), var(--hsn-emas-muda)); text-align: center; } .tentang-logo img { width: min(200px, 100%); margin-inline: auto; height: auto; } .tentang-logo span { display: inline-block; margin-top: 10px; font-size: .85rem; font-weight: 700; color: var(--hsn-hijau); } /* ── Rapatkan judul seksi & kepala halaman ── */ .sec-title { margin-bottom: 30px; } .sec-title .title { font-family: var(--heading-font-family); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.22; } .page-title-hsn { padding: 42px 0 32px; } .page-title-hsn h1 { font-size: clamp(26px, 3.4vw, 40px); } .konten-hsn { padding: 32px 0 52px; } .konten-hsn h2 { font-size: 1.4rem; margin: 26px 0 10px; } /* ── Kaki halaman berkolom (keputusan pengurus 23-09-2026) ────────────────── Bawaan Islamus memusatkan semuanya dalam kolom 730px (`.inner-box`) dan membatasi blok logo pada 399px, sehingga logo kedua terlempar ke baris bawah dan sepuluh tautan menumpuk tebal menjadi tiga baris. Markup diganti tata kolom sendiri: merek di kiri, dua kelompok tautan, lalu sekretariat. */ footer.footer-one .footer-utama { display: grid; gap: 34px 40px; padding: 52px 0 42px; grid-template-columns: 1.7fr 1fr 1fr 1.5fr; align-items: start; text-align: left; } footer.footer-one .footer-logo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } footer.footer-one .footer-logo img.f-rmi { width: min(248px, 62vw); height: auto; } footer.footer-one .footer-logo img.f-hsn { height: 56px; width: auto; box-sizing: content-box; padding: 6px 9px; background: #fff; border-radius: 12px; } /* Logo HSN PBNU berwarna hijau tua: di latar hijau selalu diberi lencana putih agar terbaca (rencana 1.3, 01-10-2026). */ .page-title-hsn .logo-kepala { display: block; max-width: 220px; margin-left: auto; padding: 18px 20px; background: #fff; border-radius: 22px; box-shadow: 0 10px 30px rgba(0,0,0,.22); } .page-title-hsn .logo-kepala img { width: 100%; height: auto; } footer.footer-one .footer-brand p { color: rgba(255,255,255,.66); font-size: .88rem; line-height: 1.65; margin: 16px 0 0; max-width: 42ch; } footer.footer-one .footer-kolom h2 { color: #fff; font-family: var(--body-font-family); font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; opacity: .9; } footer.footer-one .footer-kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } footer.footer-one .footer-kolom a { color: rgba(255,255,255,.76); text-decoration: none; font-size: .9rem; font-weight: 400; } footer.footer-one .footer-kolom a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } footer.footer-one .footer-kontak p { color: rgba(255,255,255,.66); font-size: .86rem; line-height: 1.6; margin: 0 0 12px; } footer.footer-one .footer-kontak .footer-bantuan { margin-bottom: 0; } footer.footer-one .bottom-bar { background-color: rgba(0,0,0,.22); padding: 16px 0; } footer.footer-one .bottom-isi { display: flex; align-items: center; justify-content: space-between; gap: 10px 22px; flex-wrap: wrap; } footer.footer-one .bottom-bar p { margin: 0; text-align: left; color: rgba(255,255,255,.62); font-size: .84rem; } footer.footer-one .bottom-bar a { color: rgba(255,255,255,.82); text-decoration: none; } footer.footer-one .bottom-bar a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* Desktop sempit (container 960px): kolom merek menyempit — kecilkan kunci logo agar lambang HSN tetap sebaris, tidak terlempar ke bawah seperti tata letak lama. */ @media (min-width: 992px) and (max-width: 1199.98px) { footer.footer-one .footer-utama { gap: 30px 28px; } footer.footer-one .footer-logo { gap: 14px; } footer.footer-one .footer-logo img.f-rmi { width: 196px; } footer.footer-one .footer-logo img.f-hsn { height: 46px; } } @media (max-width: 991px) { footer.footer-one .footer-utama { grid-template-columns: 1fr 1fr; gap: 30px; padding: 40px 0 32px; } footer.footer-one .footer-brand { grid-column: 1 / -1; } } @media (max-width: 575px) { footer.footer-one .footer-utama { grid-template-columns: 1fr; gap: 26px; } footer.footer-one .footer-logo img.f-rmi { width: min(220px, 66vw); } footer.footer-one .bottom-isi { justify-content: center; } footer.footer-one .bottom-bar p { text-align: center; } } /* CTA pendaftaran: nama kegiatan dan jenis pendaftar harus terbaca sebelum klik. */ .btn-box.cta-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 650px); margin-top: 24px; align-items: stretch; } .btn-box.cta-hero .cta-pendaftaran { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; align-items: center; width: 100%; min-height: 106px; margin: 0; padding: 16px 19px; border: 2px solid transparent; border-radius: 14px; text-align: left; text-decoration: none; box-shadow: 0 6px 18px rgba(0,0,0,.16); transition: transform .16s ease, box-shadow .16s ease; } .btn-box.cta-hero .cta-pendaftaran-nasyid { background: #FFD166; border-color: #F0BD43; color: #163B28; } .btn-box.cta-hero .cta-pendaftaran-mahad { background: #F6FAF7; border-color: #B8D0BF; color: #0D3B22; } .btn-box.cta-hero .cta-pendaftaran-umum, .btn-box.cta-hero .cta-pendaftaran-semua { background: #FFFFFF; border-color: #B8D0BF; color: #0D3B22; } .btn-box.cta-hero .cta-pendaftaran:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.2); } .btn-box.cta-hero .cta-pendaftaran:focus-visible, .tombol-pendaftaran:focus-visible, .identitas-pendaftaran a:focus-visible { outline: 3px solid #111; outline-offset: 3px; } .cta-pendaftaran__jenis { grid-column: 1; font-size: .74rem; line-height: 1.25; font-weight: 900; letter-spacing: .075em; } .cta-pendaftaran__label { grid-column: 1; font-size: 1.08rem; line-height: 1.3; font-weight: 900; } .cta-pendaftaran__keterangan { grid-column: 1; font-size: .9rem; line-height: 1.4; font-weight: 600; } .cta-pendaftaran__aksi { grid-column: 2; grid-row: 1 / span 3; align-self: center; padding-left: 10px; font-size: .9rem; line-height: 1.3; font-weight: 900; text-align: right; white-space: nowrap; } .jenis-pendaftaran { display: inline-flex; margin: 0 0 8px; padding: 6px 10px; border: 1px solid transparent; border-radius: 999px; font-size: .74rem; line-height: 1.25; font-weight: 900; letter-spacing: .055em; } .jenis-pendaftaran--nasyid { color: #493400; background: #FFF3CD; border-color: #E4C36A; } .jenis-pendaftaran--mahad { color: #123822; background: #EAF3ED; border-color: #AFCDB8; } .petunjuk-pendaftaran { margin: 10px 0 14px; padding: 12px 14px; border-left: 4px solid; border-radius: 8px; font-size: .96rem; line-height: 1.5; font-weight: 650; } .petunjuk-pendaftaran--nasyid { color: #3D2B00; background: #FFF3CD; border-color: #B78616; } .petunjuk-pendaftaran--mahad { color: #123822; background: #EAF3ED; border-color: #1E5A38; } .tombol-pendaftaran { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 62px; margin: 8px 0; padding: 13px 16px; border: 2px solid transparent; border-radius: 10px; text-decoration: none; font-size: 1rem; line-height: 1.35; font-weight: 900; box-shadow: 0 3px 10px rgba(13,59,34,.12); } .tombol-pendaftaran--nasyid { color: #163B28; background: #FFD166; border-color: #F0BD43; } .tombol-pendaftaran--mahad { color: #FFFFFF; background: #1E5A38; border-color: #1E5A38; } .page-title-hsn .tombol-pendaftaran--mahad { color: #0D3B22; background: #F6FAF7; border-color: #B8D0BF; } .tombol-pendaftaran:hover { filter: brightness(.97); transform: translateY(-1px); } .tombol-pendaftaran__aksi { font-size: .88rem; font-weight: 750; text-decoration: underline; text-underline-offset: 2px; } .identitas-pendaftaran { display: grid; gap: 5px; margin: 0 0 18px; padding: 15px 17px; border: 1px solid #AFCDB8; border-left: 6px solid #1E5A38; border-radius: 10px; color: #123822; background: #EAF3ED; font-size: .98rem; line-height: 1.5; } .identitas-pendaftaran--nasyid { color: #3D2B00; background: #FFF3CD; border-color: #E4C36A; border-left-color: #B78616; } .identitas-pendaftaran--mahad { color: #123822; background: #EAF3ED; border-color: #AFCDB8; border-left-color: #1E5A38; } .identitas-pendaftaran__label { font-size: .73rem; line-height: 1.3; font-weight: 900; letter-spacing: .06em; } .identitas-pendaftaran strong { font-size: 1.12rem; line-height: 1.35; font-weight: 900; } .identitas-pendaftaran p { margin: 0; font-size: .95rem; font-weight: 600; } .identitas-pendaftaran a { width: fit-content; color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; } .form-hsn .theme-btn.btn-style-one, .form-hsn .theme-btn.btn-style-three { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 52px; padding: 13px 16px; border: 2px solid transparent; border-radius: 10px; text-align: center; text-transform: none; font-weight: 800; } .form-hsn .theme-btn.btn-style-one { color: #FFFFFF; background: #1E5A38; border-color: #1E5A38; } .form-hsn .theme-btn.btn-style-three { color: #123822; background: #EAF3ED; border-color: #AFCDB8; } .form-hsn .theme-btn .btn-title, .form-hsn .theme-btn:hover .btn-title, .form-hsn .theme-btn:focus .btn-title { color: inherit; transform: none; white-space: normal; line-height: 1.35; } @media (max-width: 575px) { .btn-box.cta-hero .cta-pendaftaran { min-height: 0; padding: 14px; gap: 4px 8px; } .cta-pendaftaran__label { font-size: 1rem; } .cta-pendaftaran__keterangan { font-size: .86rem; } .cta-pendaftaran__aksi { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 3px; padding-left: 0; font-size: .8rem; white-space: normal; max-width: none; text-align: left; } .tombol-pendaftaran { font-size: .96rem; } } /* ---- akun pendaftar: tombol keluar & halaman Akun Saya (25-09-2026) ---- */ @media (min-width: 1200px) { .header-style-one .action-box { gap: 14px; } } .form-keluar-header { margin: 0 10px 0 8px; } .tombol-keluar-header { background: transparent; border: 2px solid var(--theme-color2); color: inherit; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; } .tombol-keluar-header:hover, .tombol-keluar-header:focus-visible { background: var(--theme-color2); color: #1b1b1b; } @media (max-width: 575.98px) { .tombol-daftar-header, .tombol-keluar-header { padding: 7px 12px; font-size: .88rem; } .form-keluar-header { margin: 0 6px 0 4px; } } .menu-akun-mobile { padding: 14px 20px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.1); } .menu-akun-mobile .title { display: block; font-size: .8rem; opacity: .75; } .menu-akun-mobile a, .menu-akun-mobile button { color: #f2d48a; font-weight: 700; background: none; border: 0; padding: 0; } .menu-akun-aksi { display: flex; gap: 18px; margin-top: 8px; } .menu-akun-aksi form { margin: 0; } .akun-aksi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .akun-aksi form { margin: 0; } .akun-profil { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .akun-profil h2 { margin: 2px 0 4px; } .akun-profil .identitas { color: var(--muted, #5b6b62); font-size: .92rem; } .akun-reg { margin-top: 18px; } .akun-reg-kepala { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; align-items: flex-start; } .akun-reg-kepala h3 { margin: 2px 0 4px; } .akun-nomor { min-width: 150px; text-align: center; } .akun-berikutnya { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fff8e6; border-left: 4px solid #B68B2C; } .akun-berikutnya b { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: #6b4d0b; margin-bottom: 2px; } .akun-berikutnya.selesai { background: #e9f6ee; border-left-color: #1E5A38; } .akun-berikutnya.selesai b { color: #0d5a2b; } .akun-tabel-anggota { width: 100%; border-collapse: collapse; font-size: .94rem; } .akun-tabel-anggota th, .akun-tabel-anggota td { padding: 7px 10px; border-bottom: 1px solid #e3ece6; text-align: left; } .akun-tabel-anggota th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #1E5A38; } .akun-tabel-anggota td:first-child, .akun-tabel-anggota th:first-child { width: 42px; color: #5b6b62; } .akun-bagian { margin-top: 16px; } .akun-bagian > h4 { font-size: 1rem; margin: 0 0 8px; } .akun-kunci { font-size: .86rem; color: #5b6b62; margin-top: 8px; } .anggota-edit-row { display: grid; grid-template-columns: 32px 1fr 150px 84px; gap: 8px; align-items: center; margin-bottom: 8px; } .anggota-edit-row .no { color: #5b6b62; text-align: right; font-size: .85rem; } .anggota-edit-row label.hapus { font-size: .82rem; display: flex; gap: 4px; align-items: center; margin: 0; } @media (max-width: 575.98px) { .anggota-edit-row { grid-template-columns: 26px 1fr; } .anggota-edit-row > :nth-child(3), .anggota-edit-row > :nth-child(4) { grid-column: 2; } } .akun-video-form .field input { width: 100%; } .tabel-gulir { overflow-x: auto; } .akun-tabel-nilai td, .akun-tabel-nilai th { white-space: nowrap; } .akun-catatan { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #f3f8f5; border-left: 3px solid #1E5A38; font-size: .94rem; } .akun-catatan b { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: #1E5A38; margin-bottom: 2px; } .video-pratinjau { margin: 6px 0 12px; } .video-tersemat { margin-bottom: 12px; } .pratinjau-ok { margin-top: 6px; color: #0d5a2b; font-size: .9rem; } .pratinjau-peringatan { margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: #fff8e6; color: #6b4d0b; font-size: .9rem; } .pratinjau-galat { margin-top: 6px; padding: 8px 12px; border-radius: 8px; background: #fdecec; color: #9b1c1c; font-size: .9rem; } .ubah-cepat { font-size: .82rem; font-weight: 700; margin-left: 6px; white-space: nowrap; } .petunjuk-anggota { margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; background: #eef6f1; font-size: .92rem; } .anggota-kepala { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #1E5A38; font-weight: 700; margin-bottom: 4px; } .anggota-edit-row select, .anggota-row select { width: 100%; } .peran-lama { grid-column: 1 / -1; font-size: .84rem; color: #6b4d0b; background: #fff8e6; border-radius: 6px; padding: 6px 10px; } @media (max-width: 575.98px) { .anggota-edit-row.anggota-kepala, .anggota-row.anggota-kepala { display: none; } } /* UX 28-09: di ponsel "Keluar" + "Akun Saya" mendorong tombol menu (hamburger) keluar layar (360px → lebar 416px). Keluar tetap tersedia di menu ponsel (.menu-akun-mobile), jadi disembunyikan dari header pada layar kecil. */ @media (max-width: 575.98px) { .header-style-one .form-keluar-header { display: none; } .header-style-one .action-box { gap: 8px; flex-wrap: nowrap; } .header-style-one .logo-box img { max-height: 44px; width: auto; } .header-style-one .header-lower .logo-box { min-width: 0; } .header-style-one .header-lower .inner-container { padding: 0 12px; } .sticky-header .auto-container { box-sizing: border-box; width: 100%; max-width: 100%; } } @media (max-width: 1023px) { .header-style-one .action-box .mobile-nav-toggler { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* Menu 1200–1399px: label dua kata ("Rangkaian Kegiatan", "Penilaian Live") terlipat dua baris → satu baris, jarak dirapatkan. */ @media (min-width: 1200px) { .header-style-one .main-menu .navigation > li > a { white-space: nowrap; } } @media (min-width: 1200px) and (max-width: 1399.98px) { .header-style-one .main-menu .navigation > li > a { padding: 8px 8px; font-size: 15px; } } /* Navbar 1024–1199px (03-10-2026): delapan menu tidak muat — terlipat dua baris dan "Masuk / Daftar" terdorong keluar layar (gulir horizontal 123px pada 1024px). Menu ponsel dipakai sampai 1199px; menu penuh mulai 1200px. */ @media (max-width: 1199.98px) { .main-header .main-menu { display: none; } .main-header .main-box .nav-outer { justify-content: end; } .header-style-one .action-box .mobile-nav-toggler, .sticky-header .mobile-nav-toggler { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 575.98px) { .header-style-one .action-box .mobile-nav-toggler { margin-left: 4px; } } button.mobile-nav-toggler { background: none; border: 0; padding: 0; cursor: pointer; } .mobile-menu button.close-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; } button.mobile-nav-toggler:focus-visible, .mobile-menu button.close-btn:focus-visible { outline: 3px solid var(--theme-color2); outline-offset: 2px; border-radius: 8px; } /* UX 28-09: baris anggota di ponsel — nama (dicetak di sertifikat) selebar layar, peran di bawahnya */ .anggota-galat { grid-column: 2 / -1; } @media (max-width: 575.98px) { .anggota-row { grid-template-columns: 26px 1fr; row-gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed #d6e4da; } .anggota-row > select { grid-column: 2; } .anggota-row > span { align-self: start; padding-top: 12px; } } .lompat-formulir { display: inline-block; margin-top: 10px; color: #f2d48a; font-weight: 700; text-decoration: underline; } #formulir-masuk { scroll-margin-top: 96px; } /* UX 28-09: kotak "hapus" anggota — target sentuh ≥ 40px */ .anggota-edit-row label.hapus { min-height: 40px; padding: 0 6px; cursor: pointer; } .anggota-edit-row label.hapus input { width: 20px; height: 20px; } /* ===== Halaman masuk split-screen (01-10-2026): branding HSN 2026 | panel masuk. Ponsel → vertikal, branding ringkas. ===== */ body.halaman-masuk { background: #eef3ef; } .masuk-split { padding: 28px 12px 48px; } .masuk-split__bingkai { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 18px 50px rgba(13, 59, 34, .12); min-height: 560px; } .masuk-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 48px 40px 32px; color: #fff; overflow: hidden; isolation: isolate; background: radial-gradient(120% 80% at 0% 0%, rgba(1, 117, 52, .45), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(234, 184, 122, .30), transparent 65%), linear-gradient(160deg, var(--green-dark), var(--green-main)); } .masuk-brand::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .09; background-image: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.5px); background-size: 22px 22px; } .masuk-brand::after { content: ""; position: absolute; z-index: -1; width: 420px; height: 420px; right: -170px; bottom: -170px; border-radius: 50%; border: 46px solid rgba(255, 255, 255, .05); } .masuk-brand__isi { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 12px; } .masuk-brand__logo { width: 220px; max-width: 70%; height: auto; object-fit: contain; background: #fff; border-radius: 26px; padding: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); } .masuk-brand__eyebrow { display: block; color: #f2d48a; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; } .masuk-brand__judul { font-family: var(--heading-font-family); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; color: #fff; margin: 6px 0 10px; font-weight: 700; } .masuk-brand__tagline { color: rgba(255, 255, 255, .88); margin: 0; max-width: 30ch; } .masuk-brand__kaki { margin: 0; font-size: .85rem; color: rgba(255, 255, 255, .72); } .masuk-panel { display: flex; align-items: center; justify-content: center; padding: 44px 48px; } .masuk-kartu { width: 100%; max-width: 460px; } .masuk-label { display: inline-block; color: var(--green-mid); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; } .masuk-judul { font-family: var(--heading-font-family); font-size: clamp(26px, 2.6vw, 34px); color: var(--headings-color); margin: 4px 0 14px; line-height: 1.15; } .masuk-sub { color: #46564d; margin: 0 0 18px; } .masuk-kartu .identitas-pendaftaran { margin-bottom: 18px; } .masuk-tahap { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 16px; counter-reset: tahap; flex-wrap: wrap; } .masuk-tahap li { counter-increment: tahap; flex: 1 1 0; min-width: 0; font-size: .78rem; font-weight: 600; color: #6b7a71; padding-top: 8px; border-top: 4px solid #dfe7e1; } .masuk-tahap li::before { content: counter(tahap) ". "; } .masuk-tahap li.aktif { color: var(--green-main); border-top-color: var(--green-main); } .masuk-tahap li.selesai { color: var(--green-mid); border-top-color: var(--green-soft); } .masuk-tahap li.selesai::before { content: "✓ "; } .masuk-tahap small { font-weight: 400; } .tombol-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 18px; background: #fff; color: #1f1f1f; border: 1.5px solid #c9d3cc; border-radius: 999px; font-weight: 700; font-size: 1.02rem; text-decoration: none; transition: box-shadow .15s, border-color .15s, background .15s; } .tombol-google:hover, .tombol-google:focus-visible { border-color: var(--green-main); box-shadow: 0 6px 18px rgba(13, 59, 34, .14); color: #1f1f1f; } .tombol-google:focus-visible { outline: 3px solid rgba(30, 90, 56, .35); outline-offset: 2px; } .tombol-google__ikon { width: 22px; height: 22px; flex: none; } .tombol-google.memuat { pointer-events: none; opacity: .75; cursor: progress; } .tombol-google.memuat .tombol-google__ikon { animation: masuk-putar 1s linear infinite; } @keyframes masuk-putar { to { transform: rotate(360deg); } } .masuk-pemisah { display: flex; align-items: center; gap: 12px; color: #7a877f; font-size: .85rem; margin: 22px 0 14px; } .masuk-pemisah::before, .masuk-pemisah::after { content: ""; flex: 1; height: 1px; background: #dfe7e1; } .masuk-alt { display: flex; align-items: center; gap: 10px; padding: 12px 16px; min-height: 48px; border-radius: 14px; background: #f3f7f4; color: #2b3a31; font-size: .93rem; text-decoration: none; } .masuk-alt:hover { background: #e7f0ea; color: var(--green-main); } .masuk-alt i { color: #229ED9; } .masuk-alt__g { width: 18px; height: 18px; flex: none; } .masuk-tombol { min-height: 50px; } .masuk-bantuan { border: 1px solid #dfe7e1; border-radius: 14px; padding: 12px 16px; background: #fbfdfb; } .masuk-bantuan summary { cursor: pointer; font-weight: 700; color: var(--green-main); } .masuk-kaki { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; margin-top: 26px; padding-top: 16px; border-top: 1px solid #e6ece8; font-size: .85rem; color: #5b6b62; } .masuk-kartu .akun-aksi { display: flex; flex-wrap: wrap; gap: 10px; } @media (max-width: 991.98px) { .masuk-split { padding: 14px 12px 32px; } .masuk-split__bingkai { grid-template-columns: 1fr; min-height: 0; border-radius: 22px; } .masuk-brand { padding: 14px 18px; gap: 0; } .masuk-brand::after { display: none; } .masuk-brand__isi { flex-direction: row; align-items: center; gap: 14px; margin: 0; } .masuk-brand__logo { width: 64px; max-width: none; padding: 6px; border-radius: 14px; box-shadow: none; } .masuk-brand__judul { font-size: 1.2rem; margin: 2px 0 0; } .masuk-brand__eyebrow { font-size: .7rem; } .masuk-brand__tagline, .masuk-brand__kaki { display: none; } .masuk-panel { padding: 24px 18px 22px; } .masuk-kartu { max-width: 560px; } } @media (max-width: 380px) { .masuk-tahap li { font-size: .72rem; } .tombol-google { font-size: .96rem; } } /* ===== Informasi Pendaftaran (kaki halaman kegiatan) ===== */ .info-pendaftaran { padding: 8px 0 40px; } .info-pendaftaran__kotak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; background: #fff; border: 1px solid #dfe7e1; border-left: 6px solid var(--hsn-hijau); border-radius: 18px; padding: 22px 26px; box-shadow: 0 4px 18px rgba(13, 59, 34, .06); } .info-pendaftaran h2 { font-family: var(--heading-font-family); font-size: 1.35rem; margin: 0 0 4px; } .info-pendaftaran p { margin: 0; color: #5b6b62; max-width: 46ch; } .info-pendaftaran__kanal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; } .info-pendaftaran__kanal a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 8px; border-radius: 999px; background: var(--hsn-hijau-muda); color: #12302a; text-decoration: none; } .info-pendaftaran__kanal a:hover, .info-pendaftaran__kanal a:focus-visible { background: #d6ecec; color: #0b5f60; } .info-pendaftaran__kanal small { display: block; font-size: .72rem; color: #5b6b62; line-height: 1.1; } .info-pendaftaran__kanal b { display: block; line-height: 1.2; overflow-wrap: anywhere; } .info-pendaftaran__ikon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex: none; } .info-pendaftaran__ikon svg { width: 20px; height: 20px; } .info-pendaftaran__ikon--ig { background: linear-gradient(45deg, #f09433, #dc2743 55%, #bc1888); } .info-pendaftaran__ikon--tg { background: #229ED9; } .info-pendaftaran__ikon--wa { background: #1FA855; color: #fff; } @media (max-width: 575.98px) { .info-pendaftaran__kotak { padding: 18px; } .info-pendaftaran__kanal, .info-pendaftaran__kanal li { width: 100%; } } /* ===== CTA "Daftar sebagai Peserta" di bawah halaman detail kegiatan ===== */ .cta-daftar-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 36px; padding: 24px 28px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, var(--green-dark), var(--green-main) 60%, var(--hsn-hijau)); } .cta-daftar-bawah h2 { color: #fff; font-family: var(--heading-font-family); font-size: 1.45rem; margin: 2px 0 4px; } .cta-daftar-bawah p { margin: 0; color: rgba(255, 255, 255, .88); } .cta-daftar-bawah__label { color: #f2d48a; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .cta-daftar-bawah .theme-btn { background: var(--theme-color2); } @media (max-width: 575.98px) { .cta-daftar-bawah { padding: 20px; } .cta-daftar-bawah .theme-btn { width: 100%; } } @media (max-width: 991.98px) { .masuk-kartu .identitas-pendaftaran { padding: 12px 14px; margin-bottom: 14px; } .masuk-kartu .identitas-pendaftaran p { display: none; } .masuk-judul { margin-bottom: 10px; } } /* ===== /masuk/ v2 (01-10-2026): pilihan Google vs Telegram yang jelas, panduan Chat ID ringkas ===== */ .masuk-opsi { border: 1.5px solid #dfe7e1; border-radius: 18px; padding: 18px 18px 16px; margin-bottom: 14px; background: #fff; } .masuk-opsi--utama { border-color: var(--green-main); background: linear-gradient(180deg, #f3f9f5, #fff 70%); box-shadow: 0 8px 22px rgba(13, 59, 34, .08); } .masuk-opsi__tag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--green-mid); background: #e3f1e8; border-radius: 999px; padding: 3px 10px; } .masuk-opsi--nasyid .masuk-opsi__tag { color: #7a5600; background: #fff3cd; } .masuk-opsi__judul { font-family: var(--heading-font-family); font-size: 1.2rem; line-height: 1.3; margin: 8px 0 4px; color: var(--headings-color); } .masuk-opsi__daftar { font-size: .9rem; color: #5b6b62; margin: 0 0 14px; } .masuk-opsi__catatan { font-size: .84rem; color: var(--green-mid); margin: 10px 0 0; font-weight: 600; } .masuk-catatan { font-size: .88rem; color: #46564d; background: #f3f7f4; border-radius: 12px; padding: 10px 14px; margin: 4px 0 0; } .masuk-catatan i { color: var(--hsn-hijau); } .masuk-kembali { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: var(--green-main); margin-bottom: 14px; min-height: 32px; } .tombol-telegram { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 18px; background: #229ED9; color: #fff !important; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background .15s, box-shadow .15s; } .tombol-telegram:hover, .tombol-telegram:focus-visible { background: #1b86b9; box-shadow: 0 6px 16px rgba(34, 158, 217, .3); } .tombol-telegram--besar { min-height: 54px; font-size: 1.02rem; } .masuk-chatid { background: #eef7fc; border: 1px solid #cde6f4; border-radius: 16px; padding: 14px 16px 16px; margin-bottom: 18px; } .masuk-chatid__kepala b { display: block; color: #0f4c6b; } .masuk-chatid__kepala span { display: block; font-size: .84rem; color: #46647a; } .masuk-chatid__langkah { margin: 10px 0 12px; padding-left: 1.2rem; font-size: .92rem; color: #23394a; } .masuk-chatid__langkah li { margin-bottom: 4px; } .masuk-langkah { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: .84rem; } .masuk-langkah__no { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: #e6ece8; color: #6b7a71; font-weight: 700; } .masuk-langkah__no.aktif { background: var(--green-main); color: #fff; } .masuk-langkah__no.selesai { background: var(--green-soft); color: #fff; } .masuk-langkah__teks { color: #6b7a71; font-weight: 600; } .masuk-langkah__teks.aktif { color: var(--green-main); } .masuk-langkah__garis { flex: 1; height: 2px; background: #e6ece8; min-width: 16px; } .masuk-opsional summary { cursor: pointer; font-size: .88rem; color: var(--green-main); font-weight: 600; } @media (max-width: 991.98px) { .masuk-opsi { padding: 16px 14px 14px; } } .masuk-kembali { display: flex; width: fit-content; } .masuk-chatid__langkah { list-style: decimal; } .masuk-chatid__langkah li { display: list-item; } /* Hak cipta kaki halaman: aturan tema `.footer-one .bottom-bar .copyright-text` (hijau tua) mengalahkan warna terang di atas → teks tak terbaca. */ footer.footer-one .bottom-bar .copyright-text { color: rgba(255, 255, 255, .82); } footer.footer-one .bottom-bar .copyright-text a { color: #f2d48a; } .logo-panggung .logo-sumber { margin: 18px 0 0; font-size: .88rem; color: #46564d; } .logo-panggung .logo-sumber a { font-weight: 700; color: var(--hsn-hijau); } /* ===== Daftar hadir QR (01-10-2026): satu kartu, ramah ponsel, tombol besar ===== */ .hadir-wadah { padding: 24px 16px 48px; display: flex; justify-content: center; } .hadir-kartu { width: 100%; max-width: 520px; background: #fff; border: 1px solid #dfe7e1; border-radius: 22px; padding: 22px 20px 24px; box-shadow: 0 14px 40px rgba(13, 59, 34, .10); border-top: 6px solid var(--hsn-hijau); } .hadir-kepala { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; } .hadir-kepala img { width: 52px; height: auto; flex: none; } .hadir-kepala h1 { font-family: var(--heading-font-family); font-size: 1.35rem; line-height: 1.25; margin: 2px 0 4px; color: var(--green-dark); } .hadir-kepala p { margin: 0; font-size: .9rem; color: #46564d; } .hadir-label { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hsn-emas-tua); } .hadir-isian { margin-bottom: 14px; } .hadir-isian label { display: block; font-weight: 700; color: #16221b; margin-bottom: 5px; font-size: .95rem; } .hadir-isian input, .hadir-isian select { width: 100%; min-height: 48px; padding: 10px 12px; font-size: 16px; border: 1.5px solid #c9d6cd; border-radius: 12px; background: #fbfdfb; } .hadir-isian input:focus, .hadir-isian select:focus { outline: 3px solid rgba(0, 82, 33, .18); border-color: var(--hsn-hijau); } .hadir-isian small { display: block; color: #5b6b62; margin-top: 4px; font-size: .82rem; } .hadir-isian .wajib { color: #b3261e; } .hadir-isian.galat input, .hadir-isian.galat select { border-color: #b3261e; } .pesan-galat { color: #9b1c1c; font-size: .85rem; margin-top: 4px; } .hadir-setuju { background: #f3f8f5; border-radius: 12px; padding: 12px 14px; margin: 4px 0 16px; font-size: .88rem; color: #2f4238; } .hadir-setuju input { width: 20px; height: 20px; margin-right: 6px; vertical-align: -4px; } .hadir-setuju.galat { outline: 2px solid #b3261e; } .hadir-kirim { width: 100%; min-height: 54px; border: 0; border-radius: 14px; background: var(--hsn-hijau); color: #fff; font-weight: 800; font-size: 1.1rem; } .hadir-kirim:active { transform: translateY(1px); } .hadir-catatan { margin: 12px 0 0; font-size: .84rem; color: #5b6b62; text-align: center; } .hadir-tutup { display: flex; gap: 12px; align-items: center; background: var(--hsn-emas-muda); border-left: 5px solid var(--hsn-emas); border-radius: 12px; padding: 14px 16px; color: #3d2b00; } .hadir-tutup i { font-size: 1.4rem; color: var(--hsn-emas-tua); } .hadir-tautan { display: inline-block; margin-top: 14px; font-weight: 700; color: var(--hsn-hijau); } .hadir-sukses { text-align: center; } .hadir-centang { width: 76px; height: 76px; margin: 4px auto 12px; border-radius: 50%; background: var(--hsn-hijau); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; } .hadir-sukses h1 { font-family: var(--heading-font-family); font-size: 1.4rem; color: var(--green-dark); margin: 0 0 8px; } .hadir-nama { font-size: 1.15rem; font-weight: 800; color: #16221b; margin: 0 0 14px; } .hadir-nama span { display: block; margin-top: 2px; font-weight: 600; font-size: .95rem; color: #46564d; } .hadir-bukti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 6px; text-align: left; } .hadir-bukti div { background: #f3f8f5; border-radius: 12px; padding: 10px 12px; } .hadir-bukti dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: #5b6b62; } .hadir-bukti dd { margin: 2px 0 0; font-weight: 700; color: #16221b; } .hadir-aksi { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; } .hadir-aksi a { padding: 10px 16px; border-radius: 12px; border: 1.5px solid #c9d6cd; font-weight: 700; color: var(--hsn-hijau); text-decoration: none; } /* ── Tema kegiatan di kepala halaman (dari flyer resmi, 03-10-2026) ── */ .page-title-hsn .tema-kegiatan { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 12px 16px; margin: 0 0 14px; max-width: 46ch; } .page-title-hsn .tema-label { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #f2d48a; margin-bottom: 6px; } .page-title-hsn .tema-arab { margin: 0 0 6px; color: #fff; font-size: 1.12rem; line-height: 1.95; } .page-title-hsn .tema-teks { margin: 0; color: rgba(255,255,255,.95); font-family: var(--heading-font-family); font-style: italic; font-size: 1.02rem; } @media (max-width: 575px) { .page-title-hsn .tema-arab { font-size: 1rem; } .page-title-hsn .tema-teks { font-size: .95rem; } } /* ── Halaman kegiatan: lebih ringkas & mudah mendaftar (pengurus, 03-10-2026) ── Di ponsel kolom info (waktu, tempat, biaya, tombol Daftar) naik ke atas supaya pendaftar tidak perlu menggulung melewati seluruh narasi dulu; bagian rujukan dapat dilipat; dan ada bilah Daftar yang menempel di bawah layar. */ @media (max-width: 991.98px) { .kegiatan-isi { display: flex; flex-direction: column; } .kegiatan-isi > aside { order: -1; } .kegiatan-isi > .kegiatan-utama { order: 0; } body.publik { padding-bottom: 76px; } /* ruang untuk bilah Daftar */ .cta-daftar-bawah { display: none; } /* digantikan bilah lekat */ } /* Bagian rujukan yang dapat dilipat */ .lipat { border: 1px solid var(--line, #dfe7e1); border-radius: 14px; background: #fff; padding: 2px 16px; margin: 18px 0; } .lipat > summary { cursor: pointer; list-style: none; padding: 12px 0; display: flex; align-items: center; gap: 10px; } .lipat > summary::-webkit-details-marker { display: none; } .lipat > summary h2 { margin: 0; font-size: 1.12rem; } .lipat > summary::after { content: "⌄"; margin-left: auto; font-size: 1.3rem; line-height: 1; color: var(--green-main); transition: transform .2s; } .lipat[open] > summary::after { transform: rotate(180deg); } .lipat[open] > summary { border-bottom: 1px solid #eef3ef; } .lipat > *:not(summary) { margin-top: 12px; } .lipat > *:last-child { margin-bottom: 14px; } .lipat > summary:focus-visible { outline: 2px solid var(--green-main); outline-offset: 3px; border-radius: 10px; } /* Bilah Daftar yang menempel di bawah layar ponsel */ .bilah-daftar { display: none; } @media (max-width: 991.98px) { .bilah-daftar { display: flex; align-items: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--line, #dfe7e1); box-shadow: 0 -4px 18px rgba(13,59,34,.12); padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); } .bilah-daftar__info { min-width: 0; line-height: 1.25; } .bilah-daftar__info b { display: block; font-size: .86rem; color: var(--green-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bilah-daftar__info span { font-size: .78rem; color: #5b6b62; } .bilah-daftar .theme-btn { margin-left: auto; flex: none; } } /* ═════════════════════════════════════════════════════════════════════════════ BERANDA 03-10-2026 — hierarki: hero carousel 5 kegiatan unggulan → Kegiatan Unggulan → Rangkaian (kalender + panel rincian) → informasi pendukung. Permukaan padat (tanpa blur/ glassmorphism), garis tipis, bayangan kecil, tipografi Lora (judul) + Manrope (badan). ═════════════════════════════════════════════════════════════════════════════ */ :root { --hsn-tua: #0A3320; --hsn-nu: #005221; --hsn-garis: #DFE7E1; --hsn-teks-2: #45554C; --hsn-teks-3: #5B6B62; --hsn-bayang: 0 1px 2px rgba(13,59,34,.05), 0 6px 18px rgba(13,59,34,.06); --hsn-pola: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23F2D48A' stroke-width='1'%3E%3Crect x='21' y='21' width='22' height='22'/%3E%3Crect x='21' y='21' width='22' height='22' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E"); } /* ---- sistem seksi: label → judul → teks, jarak seragam ---- */ .seksi-hsn { padding-top: clamp(56px, 6.5vw, 88px); } .seksi-hsn--rapat { padding-top: clamp(40px, 4.5vw, 56px); } .seksi-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 36px); } .seksi-kepala > div { max-width: 720px; } .seksi-kepala--tengah { justify-content: center; text-align: center; } .label-seksi { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--body-font-family); font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--hsn-emas-tua); line-height: 1.3; } .label-seksi::before { content: ""; width: 26px; height: 2px; border-radius: 2px; background: var(--hsn-emas); flex: none; } .judul-seksi { margin: 0; font-family: var(--heading-font-family); font-weight: 600; color: var(--green-dark); font-size: clamp(1.65rem, 1.15rem + 1.6vw, 2.4rem); line-height: 1.18; letter-spacing: -.01em; text-wrap: balance; } .judul-seksi--kecil { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); margin-bottom: 14px; } .teks-seksi, .rangkaian .lead-hero { margin: 12px 0 0; max-width: 66ch; font-size: 1.02rem; line-height: 1.65; color: var(--hsn-teks-2); } .tautan-seksi { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; font-weight: 700; color: var(--hsn-nu); text-decoration: none; white-space: nowrap; } .tautan-seksi i { font-size: .85em; transition: transform .2s ease; } .tautan-seksi:hover { color: var(--hsn-tua); text-decoration: underline; text-underline-offset: 4px; } .tautan-seksi:hover i { transform: translateX(3px); } /* ---- tombol ---- */ .tombol-hsn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border: 1.5px solid transparent; border-radius: 999px; font-family: var(--body-font-family); font-size: .98rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .tombol-hsn i { font-size: .85em; transition: transform .2s ease; } .tombol-hsn:hover i.fa-arrow-right { transform: translateX(3px); } .tombol-hsn:focus-visible { outline: 3px solid var(--hsn-emas); outline-offset: 3px; } .tombol-hsn--emas { background: var(--hsn-emas); color: #241803; } .tombol-hsn--emas:hover, .tombol-hsn--emas:focus { background: #F3CD93; color: #241803; } .tombol-hsn--garis { border-color: rgba(255,255,255,.45); color: #fff; } .tombol-hsn--garis:hover, .tombol-hsn--garis:focus { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.75); color: #fff; } .tombol-hsn--hijau { background: var(--hsn-nu); color: #fff; } .tombol-hsn--hijau:hover, .tombol-hsn--hijau:focus { background: var(--hsn-tua); color: #fff; } .tombol-hsn--terang { background: #fff; border-color: #C9DDD0; color: var(--hsn-nu); } .tombol-hsn--terang:hover, .tombol-hsn--terang:focus { background: #EEF5F0; color: var(--hsn-tua); } .tombol-hsn--kecil { min-height: 40px; padding: 8px 16px; font-size: .9rem; } /* ---- penanda keadaan ---- */ .chip-hsn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .03em; text-transform: none; line-height: 1.3; white-space: nowrap; } .chip-hsn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; } .chip-hsn--buka { background: #E3F1E7; color: #0B5A2A; } .chip-hsn--live { background: #FCE7C4; color: #6B4206; } .chip-hsn--segera { background: var(--hsn-emas-muda); color: var(--hsn-emas-tua); } .chip-hsn--selesai { background: #EEF0EE; color: #55605A; } /* ---- hero ---- */ .hero-hsn { padding: 16px 12px 0; } .hero-hsn__bingkai { position: relative; isolation: isolate; overflow: hidden; max-width: 1640px; margin-inline: auto; border-radius: 28px; color: #fff; background: var(--hsn-tua); padding: clamp(18px, 2.6vw, 32px) clamp(18px, 4vw, 60px) 0; } .hero-hsn__bingkai::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(900px 520px at 96% -12%, rgba(1,117,52,.5), transparent 62%), radial-gradient(640px 380px at -6% 108%, rgba(234,184,122,.12), transparent 60%), linear-gradient(165deg, #0A3320 0%, #0E4429 56%, #0A3320 100%); } .hero-hsn__bingkai::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .07; background-image: var(--hsn-pola); background-size: 64px 64px; -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.4) 45%, transparent 70%); mask-image: linear-gradient(100deg, #000 0%, rgba(0,0,0,.4) 45%, transparent 70%); } .hero-hsn__kepala { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding-bottom: clamp(14px, 2vw, 22px); border-bottom: 1px solid rgba(255,255,255,.12); } .hero-hsn__lencana { flex: none; display: inline-flex; width: 46px; height: 52px; padding: 6px 8px; border-radius: 12px; background: #fff; } .hero-hsn__lencana img { width: 100%; height: 100%; object-fit: contain; } .hero-hsn__identitas { flex: 1 1 300px; min-width: 0; } .hero-hsn__merek { margin: 0; font-family: var(--body-font-family); font-size: .86rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1.45; color: #fff; } .hero-hsn__merek span { color: rgba(255,255,255,.72); font-weight: 700; } .hero-hsn__merek span::before { content: "· "; } .hero-hsn__tema { margin: 2px 0 0; font-family: var(--heading-font-family); font-style: italic; font-size: clamp(.98rem, .9rem + .3vw, 1.12rem); line-height: 1.4; color: #F2D48A; } .hero-hsn__rentang { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.92); } .hero-hsn__rentang i { color: var(--hsn-emas); } .hero-hsn__rentang span { color: rgba(255,255,255,.7); } /* carousel: semua slide di satu sel grid → tinggi = slide tertinggi, tanpa lompatan tata letak */ .unggul { position: relative; padding-top: clamp(22px, 3vw, 40px); --unggul-interval: 6.5s; } .unggul__slides { display: grid; touch-action: pan-y; } .unggul__slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 4vw, 64px); align-items: center; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; } /* slide lama memudar dulu, slide baru masuk setelahnya — teks dua slide tidak pernah bertumpuk */ .unggul__slide.aktif { opacity: 1; visibility: visible; transition: opacity .5s ease .2s, visibility 0s; } .unggul__teks { min-width: 0; } .unggul__teks > * { transform: translateY(10px); transition: transform .7s cubic-bezier(.2,.7,.2,1); } .unggul__slide.aktif .unggul__teks > * { transform: none; } .unggul__label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F2D48A; line-height: 1.4; } .unggul__nomor { font-family: var(--heading-font-family); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; color: #fff; } .unggul__nomor span { font-size: .82rem; color: rgba(255,255,255,.5); } .unggul__label .chip-hsn { background: rgba(234,184,122,.16); color: #F7DDB0; } .unggul__label .chip-hsn--buka { background: rgba(126,214,156,.16); color: #C5F1D3; } .unggul__label .chip-hsn--live { background: #EAB87A; color: #241803; } .unggul__judul { margin: 0; font-family: var(--heading-font-family); font-weight: 600; color: #fff; font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); line-height: 1.1; letter-spacing: -.015em; text-wrap: balance; } .unggul__meta { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 8px; } .unggul__meta li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.02rem; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,.95); } .unggul__meta i { flex: none; width: 18px; margin-top: 4px; text-align: center; color: var(--hsn-emas); } .unggul__ringkas { margin: 16px 0 0; max-width: 58ch; font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.8); } .unggul__aksi { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .unggul__media { position: relative; margin: 0; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 20px; background: #082C1B; box-shadow: 0 18px 40px rgba(0,0,0,.28); } .unggul__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.4s ease; } .unggul__slide.aktif .unggul__media img { transform: none; } .unggul__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(180deg, rgba(10,51,32,0) 55%, rgba(10,51,32,.45) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); } .unggul__media--poster { display: flex; align-items: center; justify-content: center; padding: clamp(14px, 2vw, 22px); background: linear-gradient(160deg, #145232, #0B3A22); } .unggul__media--poster::before { content: ""; position: absolute; inset: 0; opacity: .08; background-image: var(--hsn-pola); background-size: 48px 48px; } .unggul__media--poster img { position: relative; width: auto; max-width: 100%; height: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.4); } .unggul__media--poster::after, .unggul__media--logo::after { display: none; } .unggul__media--logo { display: flex; align-items: center; justify-content: center; padding: 32px; background: #fff; } .unggul__media--logo img { width: auto; height: 100%; object-fit: contain; } .unggul__kendali { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: clamp(22px, 3vw, 34px); } .unggul__tab { flex: 1 1 auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .unggul__titik { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 44px; padding: 14px 0 0; border: 0; background: none; color: rgba(255,255,255,.6); text-align: left; cursor: pointer; font: inherit; } .unggul__titik::before, .unggul__progres { content: ""; position: absolute; top: 0; left: 0; height: 3px; border-radius: 3px; } .unggul__titik::before { right: 0; background: rgba(255,255,255,.18); } .unggul__progres { width: 0; background: var(--hsn-emas); } .unggul__titik.aktif .unggul__progres { width: 100%; } .unggul.berputar .unggul__titik.aktif .unggul__progres { animation: unggul-progres var(--unggul-interval) linear forwards; } @keyframes unggul-progres { from { width: 0; } to { width: 100%; } } .unggul__titik-no { font-family: var(--heading-font-family); font-size: .95rem; font-weight: 600; } .unggul__titik-nama { font-size: .84rem; font-weight: 600; line-height: 1.3; } .unggul__titik.aktif, .unggul__titik:hover { color: #fff; } .unggul__titik:focus-visible { outline: 2px solid var(--hsn-emas); outline-offset: 4px; border-radius: 4px; } .unggul__tombol { flex: none; display: flex; gap: 8px; } .unggul__nav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .unggul__nav:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); } .unggul__nav:focus-visible { outline: 2px solid var(--hsn-emas); outline-offset: 2px; } .unggul__nav svg { fill: currentColor; } .unggul__nav .ikon-putar, .unggul__nav[aria-pressed="true"] .ikon-jeda { display: none; } .unggul__nav[aria-pressed="true"] .ikon-putar { display: block; } /* kaki hero: hitung mundur + CTA pendaftaran (PRD 7.1.1–7.1.2) */ .hero-hsn__dok { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 22px 44px; align-items: start; margin: clamp(24px, 3vw, 36px) calc(-1 * clamp(18px, 4vw, 60px)) 0; padding: clamp(20px, 2.4vw, 28px) clamp(18px, 4vw, 60px) clamp(22px, 2.6vw, 32px); background: rgba(0,0,0,.2); border-top: 1px solid rgba(255,255,255,.1); } .hero-hsn__dok-label { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); } .hero-hsn .countdown-hsn { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 380px; margin: 0 0 10px; } .hero-hsn .countdown-hsn .kotak { min-width: 0; padding: 10px 4px; border-radius: 12px; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); } .hero-hsn .countdown-hsn .kotak b { font-size: 1.6rem; color: #fff; } .hero-hsn .countdown-hsn .kotak span { font-size: .7rem; } .hero-hsn .countdown-label { margin: 0; font-size: .95rem; line-height: 1.5; } .hero-hsn .countdown-label small { margin-top: 2px; font-size: .86rem; color: rgba(255,255,255,.75); } .hero-hsn .btn-box.cta-hero.mt-30 { margin-top: 0 !important; } .hero-hsn .btn-box.cta-hero { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); width: 100%; gap: 12px; } .hero-hsn .btn-box.cta-hero .cta-pendaftaran { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 14px 16px; border-radius: 14px; box-shadow: none; } .hero-hsn .cta-pendaftaran__aksi { grid-column: 1; grid-row: auto; margin-top: 6px; padding-left: 0; text-align: left; white-space: normal; } .hero-hsn .cta-pendaftaran__keterangan { font-size: .86rem; } /* ---- Kegiatan Unggulan: 1 besar + 4 pendukung ---- */ .unggulan-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 22px; } .unggulan-utama { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--hsn-garis); border-radius: 20px; box-shadow: var(--hsn-bayang); } .unggulan-utama__gambar { display: block; aspect-ratio: 16 / 8; overflow: hidden; background: var(--hsn-hijau-muda); } .unggulan-utama__gambar img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .unggulan-utama__gambar.poster img { object-position: 50% 14%; } .unggulan-utama__gambar img.tanpa-foto, .unggulan-baris__gambar img.tanpa-foto { object-fit: contain; padding: 16px; } .unggulan-utama:hover .unggulan-utama__gambar img { transform: scale(1.025); } .unggulan-utama__isi { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 30px); } .unggulan-utama__atas { display: flex; align-items: center; gap: 14px; } .unggulan-utama__atas > div { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .tgl-blok { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 62px; height: 66px; border-radius: 14px; background: var(--hsn-nu); color: #fff; line-height: 1; } .tgl-blok b { font-family: var(--heading-font-family); font-size: 1.65rem; font-weight: 600; color: #fff; } .tgl-blok span { margin-top: 5px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #F2D48A; } .unggulan-utama__kategori { margin: 0; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hsn-emas-tua); } .unggulan-utama__judul { margin: 0; font-family: var(--heading-font-family); font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1vw, 2rem); line-height: 1.2; text-wrap: balance; } .unggulan-utama__judul a, .unggulan-baris__judul a { color: var(--green-dark); text-decoration: none; } .unggulan-utama__judul a:hover, .unggulan-baris__judul a:hover { color: var(--hsn-nu); } .meta-hsn { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .meta-hsn li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; line-height: 1.5; color: #2C3D34; } .meta-hsn i { flex: none; width: 16px; margin-top: 4px; text-align: center; font-size: .88em; color: var(--hsn-nu); } .unggulan-utama__ringkas { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--hsn-teks-2); } .unggulan-utama__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 4px; } .unggulan-lain { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 14px; } .unggulan-baris { position: relative; height: 100%; display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 18px 12px 12px; background: #fff; border: 1px solid var(--hsn-garis); border-radius: 16px; box-shadow: var(--hsn-bayang); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .unggulan-baris:hover { border-color: #A9C9B4; box-shadow: 0 10px 24px rgba(13,59,34,.1); transform: translateY(-2px); } .unggulan-baris__gambar { align-self: stretch; min-height: 96px; max-height: 132px; overflow: hidden; border-radius: 12px; background: var(--hsn-hijau-muda); } .unggulan-baris__gambar img { display: block; width: 100%; height: 100%; object-fit: cover; } .unggulan-baris__gambar.poster img { object-position: 50% 10%; } .unggulan-baris__tgl { margin: 0 0 4px; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hsn-emas-tua); } .unggulan-baris__judul { margin: 0 0 6px; font-family: var(--heading-font-family); font-weight: 600; font-size: 1.1rem; line-height: 1.3; } .unggulan-baris__judul a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } .unggulan-baris__judul a:focus-visible { outline: none; } .unggulan-baris__judul a:focus-visible::after { outline: 3px solid var(--hsn-emas); outline-offset: 2px; } .unggulan-baris__tempat { margin: 0 0 8px; font-size: .9rem; line-height: 1.45; color: var(--hsn-teks-3); } .unggulan-baris__tempat i { color: var(--hsn-nu); margin-right: 4px; } .unggulan-baris__status { display: flex; flex-wrap: wrap; gap: 6px; } .unggulan-baris__panah { color: var(--hsn-nu); opacity: .55; transition: transform .2s ease, opacity .2s ease; } .unggulan-baris:hover .unggulan-baris__panah { opacity: 1; transform: translateX(3px); } .unggulan-baris.selesai .unggulan-baris__gambar { filter: grayscale(.5); } /* ---- Rangkaian: kalender (kiri) + panel rincian (kanan) ---- */ .rk { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4.3fr); gap: 22px; align-items: start; } .rk-kalender { min-width: 0; padding: clamp(14px, 2vw, 24px); background: #fff; border: 1px solid var(--hsn-garis); border-radius: 20px; box-shadow: var(--hsn-bayang); } .rk-alat { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .rk-bulan-nav { display: flex; align-items: center; gap: 10px; } .rk-bulan-judul { margin: 0; min-width: 9em; text-align: center; font-family: var(--heading-font-family); font-weight: 600; font-size: 1.3rem; color: var(--green-dark); } .rk-panah { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hsn-garis); background: #fff; color: var(--green-dark); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .rk-panah:hover:not([disabled]) { background: var(--hsn-nu); border-color: var(--hsn-nu); color: #fff; } .rk-panah[disabled] { opacity: .35; cursor: default; } .rk-panah:focus-visible, .rk-tampilan button:focus-visible, .rk-agenda__baris:focus-visible { outline: 3px solid var(--hsn-emas); outline-offset: 2px; } .rk-tampilan { display: inline-flex; padding: 4px; border-radius: 999px; background: #EFF4F0; } .rk-tampilan button { min-height: 36px; padding: 6px 16px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: .88rem; font-weight: 700; color: var(--hsn-teks-2); cursor: pointer; } .rk-tampilan button[aria-pressed="true"] { background: #fff; color: var(--hsn-nu); box-shadow: 0 1px 3px rgba(13,59,34,.16); } .rk-grid { width: calc(100% + 8px); margin: 0 -4px; border-collapse: separate; border-spacing: 4px; table-layout: fixed; } .rk-grid th { padding: 4px 6px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hsn-teks-3); text-align: left; } .rk-grid th abbr { text-decoration: none; cursor: default; } .rk-grid td { position: relative; height: 100px; padding: 8px; vertical-align: top; border-radius: 12px; background: #F6F9F7; } .rk-grid td.luar { background: transparent; } .rk-grid td.luar .rk-angka, .rk-grid td.luar .rk-hijri { color: #B7C3BC; } .rk-grid td.ada { padding: 0; background: #E6F1EA; } .rk-grid td.hari-santri { background: var(--hsn-emas-muda); box-shadow: inset 0 0 0 1.5px var(--hsn-emas); } .rk-grid td.hari-ini { box-shadow: inset 0 0 0 2px var(--hsn-emas-tua); } .rk-angka { font-family: var(--heading-font-family); font-size: 1.05rem; font-weight: 600; line-height: 1; color: var(--green-dark); } .rk-hijri { position: absolute; top: 9px; right: 9px; font-size: .7rem; line-height: 1; color: #879890; } .rk-hari { position: relative; display: flex; flex-direction: column; align-items: stretch; width: 100%; height: 100%; min-height: 100px; padding: 8px; border: 1.5px solid transparent; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; } .rk-hari:hover { background: #D8EADF; border-color: #9CC3AA; } .rk-hari:focus-visible { outline: 3px solid var(--hsn-emas); outline-offset: 1px; } .rk-hari.terpilih { background: var(--hsn-nu); border-color: var(--hsn-nu); } .rk-hari.terpilih .rk-angka, .rk-hari.terpilih .rk-hijri { color: #fff; } .rk-tanda { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; } .rk-chip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 3px 6px; border-radius: 6px; background: var(--hsn-nu); color: #fff; font-size: .7rem; font-weight: 700; line-height: 1.3; } .rk-hari.terpilih .rk-chip { background: rgba(255,255,255,.16); } .rk-lagi { font-size: .72rem; font-weight: 800; color: var(--hsn-nu); } .rk-hari.terpilih .rk-lagi { color: #F2D48A; } .rk-grid td.hari-santri .rk-hari { padding-bottom: 22px; } .rk-hs { position: absolute; left: 9px; right: 9px; bottom: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--hsn-emas-tua); } .rk-grid td.hari-santri .rk-hari.terpilih ~ .rk-hs { color: #F2D48A; } .rk-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 14px 0 0; font-size: .82rem; color: var(--hsn-teks-3); } .rk-legenda > span { display: inline-flex; align-items: center; gap: 6px; } .rk-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; } .rk-swatch--ada { background: var(--hsn-nu); } .rk-swatch--hs { background: var(--hsn-emas-muda); box-shadow: inset 0 0 0 1.5px var(--hsn-emas); } .rk-swatch--ini { box-shadow: inset 0 0 0 2px var(--hsn-emas-tua); } .rk-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .rk-agenda__baris { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border: 1px solid var(--hsn-garis); border-radius: 12px; background: #fff; color: inherit; text-decoration: none; transition: background-color .15s ease, border-color .15s ease; } .rk-agenda__baris:hover, .rk-agenda__baris.terpilih { background: #F1F7F3; border-color: #9CC3AA; } .rk-agenda__baris.terpilih { box-shadow: inset 3px 0 0 var(--hsn-nu); } .rk-agenda__tgl { flex: none; display: flex; flex-direction: column; align-items: center; width: 52px; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hsn-emas-tua); } .rk-agenda__tgl b { font-family: var(--heading-font-family); font-size: 1.35rem; font-weight: 600; letter-spacing: 0; line-height: 1.1; color: var(--green-dark); } .rk-agenda__isi { min-width: 0; } .rk-agenda__nama { display: block; font-weight: 700; line-height: 1.35; color: var(--green-dark); } .rk-agenda__meta { display: block; margin-top: 2px; font-size: .86rem; line-height: 1.45; color: var(--hsn-teks-3); } .rk-agenda__baris.selesai { opacity: .62; } .rk-panel { position: sticky; top: 96px; overflow: hidden; background: #fff; border: 1px solid var(--hsn-garis); border-radius: 20px; box-shadow: var(--hsn-bayang); } .rk-panel__kepala { position: relative; isolation: isolate; padding: 20px 22px 18px; background: var(--hsn-nu); color: #fff; } .rk-panel__kepala::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background-image: var(--hsn-pola); background-size: 48px 48px; } .rk-panel__label { margin: 0; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #F2D48A; } .rk-panel__tanggal { margin: 4px 0 0; font-family: var(--heading-font-family); font-size: 1.4rem; font-weight: 600; line-height: 1.25; color: #fff; } .rk-panel__hijri { margin: 2px 0 0; font-size: .88rem; color: rgba(255,255,255,.78); } .rk-panel__hijri:empty { display: none; } .rk-panel__isi { padding: 2px 22px 6px; } .rk-info { padding: 18px 0; } .rk-info:not([hidden]) ~ .rk-info:not([hidden]) { border-top: 1px solid #E4ECE7; } .rk-info.disorot .rk-info__judul { box-shadow: inset 3px 0 0 var(--hsn-emas); padding-left: 10px; } .rk-info__kategori { margin: 0 0 4px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--hsn-emas-tua); } .rk-info__judul { margin: 0 0 10px; font-family: var(--heading-font-family); font-weight: 600; font-size: 1.22rem; line-height: 1.3; color: var(--green-dark); } .rk-info__ringkas { margin: 10px 0 0; font-size: .95rem; line-height: 1.6; color: var(--hsn-teks-2); } .rk-info__status { display: flex; flex-wrap: wrap; gap: 6px; } .rk-info__aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; } /* ---- seksi pendukung ---- */ .kartu-lomba__aksi { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; } .kartu-tentang p { font-size: 1.02rem; line-height: 1.75; color: #33443B; } .kartu-kontak h3 { font-family: var(--heading-font-family); font-size: 1.25rem; line-height: 1.3; } .kartu-kontak .label-seksi { margin-bottom: 4px; } .faqs-section-home1.seksi-hsn { padding-bottom: 0; } /* ---- responsif ---- */ @media (max-width: 1199.98px) { .unggul__titik-nama { font-size: .78rem; } .rk { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); } } @media (max-width: 991.98px) { .unggul__slide { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; } .unggul__media { order: -1; aspect-ratio: 16 / 9; } .unggul__media--poster { padding: 12px; } .unggul__titik-nama { display: none; } .unggul__tab { grid-template-columns: repeat(5, minmax(0, 46px)); } .hero-hsn__dok { grid-template-columns: minmax(0, 1fr); } .unggulan-grid { grid-template-columns: minmax(0, 1fr); } .unggulan-lain { grid-template-rows: none; } .rk { grid-template-columns: minmax(0, 1fr); } .rk-panel { position: static; } .kartu-lomba__aksi { justify-content: flex-start; } } @media (max-width: 767.98px) { .hero-hsn__rentang { margin-left: 0; } .unggulan-utama__gambar { aspect-ratio: 16 / 9; } .rk-grid td { height: 64px; padding: 6px; } .rk-hari { min-height: 64px; padding: 6px; } .rk-tanda { flex-direction: row; flex-wrap: wrap; gap: 3px; margin-top: auto; } .rk-chip { display: block; width: 8px; height: 8px; padding: 0; border-radius: 50%; font-size: 0; -webkit-line-clamp: unset; } .rk-lagi { font-size: .62rem; line-height: 8px; } .rk-hs { display: none; } .rk-grid td.hari-santri .rk-hari { padding-bottom: 6px; } } @media (max-width: 575.98px) { .hero-hsn { padding: 10px 8px 0; } .hero-hsn__bingkai { border-radius: 22px; padding-inline: 16px; } .hero-hsn__dok { margin-inline: -16px; padding-inline: 16px; } .hero-hsn__lencana { width: 40px; height: 46px; } .hero-hsn__identitas { flex: 0 0 calc(100% - 56px); } .hero-hsn__merek { font-size: .76rem; letter-spacing: .1em; } .hero-hsn__rentang { font-size: .82rem; padding: 6px 12px; } .hero-hsn__rentang span { display: none; } .unggul__ringkas { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .unggul__meta li { font-size: .96rem; } .unggul__ringkas { font-size: .95rem; } .unggul__aksi { gap: 10px; margin-top: 22px; } .unggul__aksi .tombol-hsn { flex: 1 1 auto; padding-inline: 16px; white-space: nowrap; font-size: .94rem; } .unggul__kendali { gap: 12px; } .unggul__tab { gap: 8px; grid-template-columns: repeat(5, minmax(0, 1fr)); } .unggul__nav { width: 40px; height: 40px; } .unggul__tombol { gap: 6px; } .hero-hsn .countdown-hsn .kotak b { font-size: 1.4rem; } .unggulan-baris { grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px 12px 10px 10px; } .unggulan-baris__gambar { min-height: 84px; } .unggulan-baris__panah { display: none; } .unggulan-baris__judul { font-size: 1.02rem; } .rk-kalender { padding: 12px 10px; border-radius: 16px; } .rk-alat { justify-content: center; } .rk-bulan-judul { font-size: 1.12rem; min-width: 8.5em; } .rk-grid { width: calc(100% + 4px); margin: 0 -2px; border-spacing: 2px; } .rk-grid th { padding: 4px 2px; font-size: .64rem; letter-spacing: .02em; text-align: center; } .rk-grid td { height: 52px; padding: 5px 4px; border-radius: 8px; } .rk-hari { min-height: 52px; padding: 5px 4px; border-radius: 8px; } .rk-angka { font-size: .92rem; } .rk-hijri { top: 5px; right: 4px; font-size: .58rem; } .rk-panel__isi { padding-inline: 16px; } .rk-panel__kepala { padding: 16px; } } @media (max-width: 400px) { .unggul__aksi .tombol-hsn--garis i { display: none; } } @media (max-width: 380px) { .rk-hijri { display: none; } .unggul__titik-no { font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .unggul__teks > *, .unggul__media img { transform: none !important; } } /* ---- Linimasa susunan acara halaman kegiatan (03-10-2026): blok jam → butir acara, mudah dipindai ---- */ .linimasa { list-style: none; margin: 4px 0 12px; padding: 0; } .linimasa__blok { position: relative; display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 4px 18px; padding: 0 0 16px; } .linimasa__blok::before { content: ""; position: absolute; left: calc(8.5em + 4px); top: 8px; bottom: -6px; width: 2px; background: #DCE8E0; } .linimasa__blok:last-child::before { display: none; } .linimasa__jam { padding-top: 1px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--hsn-nu, #005221); line-height: 1.5; } .linimasa__isi { position: relative; margin: 0; padding: 0 0 0 18px; list-style: none; display: grid; gap: 4px; } .linimasa__isi::before { content: ""; position: absolute; left: -9px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--hsn-emas, #EAB87A); } .linimasa__isi li { line-height: 1.5; color: #2C3D34; } @media (max-width: 575.98px) { .linimasa__blok { grid-template-columns: minmax(0, 1fr); padding-left: 22px; } .linimasa__blok::before { left: 5px; top: 10px; } .linimasa__jam { position: relative; } .linimasa__jam::before { content: ""; position: absolute; left: -22px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--hsn-emas, #EAB87A); } .linimasa__isi { padding-left: 0; } .linimasa__isi::before { display: none; } } /* gulir ke #rangkaian / panel tidak tertutup header lengket */ .seksi-hsn, .rk-panel { scroll-margin-top: 88px; } /* Paket Partisipasi ber-Jamaah Ma'had (13-10-2026) */ .paket-mahad { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 14px; } .paket-mahad__kartu { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #d6e4dc; border-radius: 16px; padding: 18px; } .paket-mahad__kartu--jamaah { background: var(--hsn-hijau-muda); border-color: #b8d0bf; } .paket-mahad__kartu--unggul { border: 2px solid var(--hsn-emas); box-shadow: 0 6px 22px rgba(234,184,122,.28); } .paket-mahad__jenis { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--hsn-emas-tua); } .paket-mahad__judul { font-weight: 700; font-size: 1.05rem; color: #0D3B22; } .paket-mahad__harga { font-size: 1.6rem; font-weight: 800; color: var(--hsn-hijau); line-height: 1.2; } .paket-mahad__per { font-size: .85rem; color: #4a5d53; margin-bottom: 8px; } .paket-mahad__penuh { font-size: .8rem; color: #8a4b00; } .paket-mahad__tombol { margin-top: auto; } .qris-bayar__kode { background: var(--hsn-emas-muda); color: var(--hsn-emas-tua); border-radius: 6px; padding: 0 4px; font-weight: 700; } /* ---- Pusat Pendaftaran /daftar/ (13-10-2026): satu kolom, blok tanggal, kegiatan selesai disembunyikan ---- */ .hub-daftar .container { max-width: 980px; } .hub-daftar__judul { margin: 0 0 14px !important; font-size: 1.3rem !important; } .hub-daftar__judul--redup { margin-top: 36px !important; color: #5b6b62; } .hub-daftar__daftar, .hub-daftar__ringkas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .hub-kegiatan { display: grid; grid-template-columns: 74px minmax(0, 1fr) 260px; gap: 18px; align-items: start; background: #fff; border: 1px solid #dfe7e1; border-left: 5px solid #1E5A38; border-radius: 14px; padding: 18px 20px; box-shadow: 0 4px 18px rgba(13,59,34,.06); } .hub-kegiatan--nasyid { border-left-color: #B78616; } .hub-kegiatan__tanggal { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 82px; border-radius: 12px; background: #EAF3ED; color: #0d3b22; line-height: 1.1; text-align: center; } .hub-kegiatan--nasyid .hub-kegiatan__tanggal { background: #FFF3CD; color: #3D2B00; } .hub-kegiatan__tanggal b { font-size: 1.9rem; font-weight: 800; } .hub-kegiatan__tanggal span { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; } .hub-kegiatan__isi { min-width: 0; } .hub-kegiatan__isi .jenis-pendaftaran { margin-bottom: 6px; } .hub-kegiatan h3 { margin: 0 0 4px; font-size: 1.15rem; line-height: 1.35; } .hub-kegiatan h3 a { color: #0d3b22; text-decoration: none; } .hub-kegiatan h3 a:hover { text-decoration: underline; } .hub-kegiatan__meta { margin: 0 0 6px; color: #5b6b62; font-size: .9rem; line-height: 1.45; } .hub-kegiatan__sasaran { margin: 0 0 8px; font-size: .95rem; line-height: 1.5; } .hub-kegiatan__lencana { display: flex; flex-wrap: wrap; gap: 6px; } .hub-kegiatan .petunjuk-pendaftaran { margin: 10px 0 0; padding: 8px 12px; font-size: .88rem; } .hub-kegiatan__aksi { display: flex; flex-direction: column; gap: 6px; align-self: center; } .hub-kegiatan__aksi .tombol-pendaftaran { margin: 0; } .tombol-pendaftaran--umum { color: #FFFFFF; background: #1E5A38; border-color: #1E5A38; } .hub-kegiatan__ketentuan { align-self: center; padding: 4px 8px; color: #1E5A38; font-size: .9rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .hub-daftar__ringkas { gap: 8px; } .hub-daftar__ringkas li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 12px 16px; background: #fff; border: 1px solid #dfe7e1; border-radius: 12px; } .hub-daftar__ringkas a { display: flex; flex-direction: column; color: #0d3b22; text-decoration: none; } .hub-daftar__ringkas a span { color: #5b6b62; font-size: .86rem; } .hub-daftar__catatan { margin: 28px 0 0; color: #5b6b62; font-size: .9rem; } @media (max-width: 860px) { .hub-kegiatan { grid-template-columns: 62px minmax(0, 1fr); gap: 12px 14px; padding: 16px; } .hub-kegiatan__tanggal { min-height: 70px; } .hub-kegiatan__tanggal b { font-size: 1.5rem; } .hub-kegiatan__aksi { grid-column: 1 / -1; align-self: stretch; } } @media (max-width: 575px) { .hub-kegiatan { grid-template-columns: minmax(0, 1fr); } .hub-kegiatan__tanggal { flex-direction: row; justify-content: flex-start; gap: 6px; width: fit-content; min-height: 0; padding: 5px 12px; border-radius: 999px; } .hub-kegiatan__tanggal b { font-size: 1rem; } .hub-kegiatan__tanggal span { font-size: .8rem; } } /* ═════════════════════════════════════════════════════════════════════════════ SELESAI PENDAFTARAN & PEMBAYARAN QRIS (14-10-2026) — mobile-first. Prioritas: status → pembayaran → langkah berikutnya → informasi grup. Hijau = sukses, amber = menunggu, merah = galat. ═════════════════════════════════════════════════════════════════════════════ */ :root { --bayar-ok: #E3F4E8; --bayar-ok-teks: #0D5A2B; --bayar-warn: #FFF4DB; --bayar-warn-garis: #E9C46A; --bayar-warn-teks: #6E4500; --bayar-err: #FDECEA; --bayar-err-teks: #9F1D17; } .ikon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; } .selesai-daftar, .bayar-hsn { padding-top: 24px; } .bayar-hsn .container { max-width: 1100px; } .selesai-daftar .kartu-hsn, .bayar-hsn .kartu-hsn { padding: 20px 18px; } @media (min-width: 576px) { .selesai-daftar .kartu-hsn, .bayar-hsn .kartu-hsn { padding: 24px 26px; } } .selesai-daftar .kartu-hsn + .kartu-hsn, .selesai-daftar .kartu-hsn + .lipat-hsn, .selesai-daftar .lipat-hsn + .kartu-hsn, .bayar-hsn .kartu-hsn + .kartu-hsn { margin-top: 16px; } /* lencana status */ .status-bayar { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: .85rem; font-weight: 800; line-height: 1.3; background: var(--bayar-warn); color: var(--bayar-warn-teks); border: 1px solid var(--bayar-warn-garis); } .status-bayar::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; } .status-bayar--ok { background: var(--bayar-ok); color: var(--bayar-ok-teks); border-color: #B7DFC3; } .status-bayar--err { background: var(--bayar-err); color: var(--bayar-err-teks); border-color: #F3B8B2; } /* tombol */ .tombol-utama, .tombol-kedua, .tombol-aksi, .tombol-grup { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font-weight: 800; line-height: 1.25; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .15s; } .tombol-utama { width: 100%; min-height: 56px; padding: 14px 20px; border: 0; border-radius: 14px; background: var(--hsn-hijau); color: #fff; font-size: 1.08rem; box-shadow: 0 6px 18px rgba(0, 82, 33, .22); } .tombol-utama:hover { background: #0A3320; color: #fff; } .tombol-utama .ikon { width: 1.35em; height: 1.35em; } .tombol-utama:disabled { opacity: .7; cursor: progress; } .tombol-kedua { min-height: 48px; padding: 10px 18px; border: 1.5px solid #B8D0BF; border-radius: 12px; background: #fff; color: var(--hsn-hijau); font-size: .98rem; } .tombol-kedua:hover { border-color: var(--hsn-hijau); background: var(--hsn-hijau-muda); color: var(--hsn-hijau); } .tombol-kedua--kecil { min-height: 42px; padding: 8px 14px; font-size: .9rem; font-weight: 700; } .tombol-aksi { min-height: 46px; padding: 10px 14px; border: 1.5px solid #B8D0BF; border-radius: 12px; background: #fff; color: var(--hsn-hijau); font-size: .95rem; font-weight: 700; } .tombol-aksi:hover { background: var(--hsn-hijau-muda); color: var(--hsn-hijau); } .tombol-aksi--teks { border-color: transparent; background: transparent; text-decoration: underline; text-underline-offset: 3px; } .tombol-salin { margin-left: 6px; padding: 2px 10px; border: 1px solid #B8D0BF; border-radius: 8px; background: #fff; color: var(--hsn-hijau); font-size: .78rem; font-weight: 700; vertical-align: middle; } .tombol-utama:focus-visible, .tombol-kedua:focus-visible, .tombol-aksi:focus-visible, .tombol-grup:focus-visible, .tombol-salin:focus-visible, .lipat-hsn > summary:focus-visible { outline: 3px solid var(--hsn-emas); outline-offset: 2px; } .tombol-utama[hidden], .tombol-kedua[hidden], .tombol-aksi[hidden] { display: none !important; } /* kartu konfirmasi */ .konfirmasi-daftar { border-top: 6px solid var(--hsn-hijau); } .konfirmasi-daftar__kepala { display: flex; gap: 14px; align-items: flex-start; } .konfirmasi-daftar__ikon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bayar-ok); color: var(--hsn-hijau); } .konfirmasi-daftar__ikon .ikon { width: 30px; height: 30px; } .konfirmasi-daftar__eyebrow { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hsn-emas-tua); } .konfirmasi-daftar h1 { margin: 2px 0 6px; font-family: var(--heading-font-family); font-size: clamp(1.45rem, 4.6vw, 2rem); line-height: 1.2; color: #0D3B22; } .konfirmasi-daftar__lead { margin: 0; font-size: 1rem; line-height: 1.55; color: #2F4238; } .ringkas-daftar, .tagihan__info, .keadaan__fakta { margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } .ringkas-daftar > div, .tagihan__info > div, .keadaan__fakta > div { min-width: 0; } .ringkas-daftar dt, .tagihan__info dt, .keadaan__fakta dt { margin: 0 0 2px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #5B6B62; } .ringkas-daftar dd, .tagihan__info dd, .keadaan__fakta dd { margin: 0; font-weight: 700; color: #16221B; overflow-wrap: anywhere; } .ringkas-daftar dd small, .tagihan__info dd small { display: block; font-weight: 500; color: #5B6B62; font-size: .85rem; } .ringkas-daftar__nomor dd > span { font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .ringkas-daftar__nomor .tombol-salin { margin: 4px 0 0; } @media (min-width: 576px) { .ringkas-daftar__nomor .tombol-salin { margin: 0 0 0 6px; } } .ringkas-daftar__tagihan dd b { font-size: 1.45rem; color: var(--hsn-hijau); font-variant-numeric: tabular-nums; } @media (max-width: 379px) { .ringkas-daftar, .tagihan__info, .keadaan__fakta { grid-template-columns: minmax(0, 1fr); } } .aksi-utama { display: grid; gap: 10px; margin-top: 20px; } @media (min-width: 768px) { .aksi-utama { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } } /* bilah progres 4 tahap */ .tahap-bayar { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-column: 1 / -1; } .tahap-bayar__langkah { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .78rem; font-weight: 700; line-height: 1.25; color: #5B6B62; } .tahap-bayar__langkah::before { content: ""; position: absolute; top: 15px; left: calc(-50% + 18px); right: calc(50% + 18px); height: 3px; border-radius: 3px; background: #DFE7E1; } .tahap-bayar__langkah:first-child::before { display: none; } .tahap-bayar__langkah--selesai::before, .tahap-bayar__langkah--aktif::before, .tahap-bayar__langkah--gagal::before { background: var(--hsn-hijau); } .tahap-bayar__titik { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; border: 2px solid #C9D6CD; color: #5B6B62; font-weight: 800; font-size: .9rem; } .tahap-bayar__titik .ikon { width: 18px; height: 18px; } .tahap-bayar__langkah--selesai { color: var(--hsn-hijau); } .tahap-bayar__langkah--selesai .tahap-bayar__titik { background: var(--hsn-hijau); border-color: var(--hsn-hijau); color: #fff; } .tahap-bayar__langkah--aktif { color: var(--bayar-warn-teks); } .tahap-bayar__langkah--aktif .tahap-bayar__titik { background: var(--bayar-warn); border-color: #D99A1E; color: var(--bayar-warn-teks); box-shadow: 0 0 0 4px rgba(234, 184, 122, .35); } .tahap-bayar__langkah--gagal { color: var(--bayar-err-teks); } .tahap-bayar__langkah--gagal .tahap-bayar__titik { background: var(--bayar-err); border-color: var(--bayar-err-teks); color: var(--bayar-err-teks); } /* langkah bernomor */ .langkah-lanjut h2, .cara-bayar h2, .sudah-bayar h2, .keadaan h2 { margin: 0 0 12px !important; font-size: 1.25rem !important; color: #0D3B22; } .langkah-bayar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: langkah; } /* teks + dalam
  • tetap satu aliran (bukan grid/flex, yang memecah tiap potongan teks jadi sel tersendiri) */ .langkah-bayar li { counter-increment: langkah; position: relative; min-height: 30px; padding: 3px 0 0 42px; line-height: 1.5; } .langkah-bayar li::before { content: counter(langkah); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--hsn-hijau-muda); color: var(--hsn-hijau); font-weight: 800; font-size: .9rem; } .langkah-bayar .ikon { color: var(--hsn-hijau); } .langkah-lanjut__kabar { margin: 16px 0 0; padding-top: 12px; border-top: 1px dashed #DFE7E1; color: #45554C; } /* panel lipat (accordion) */ .lipat-hsn { background: #fff; border: 1px solid #DFE7E1; border-radius: 16px; box-shadow: 0 4px 18px rgba(13, 59, 34, .06); } .lipat-hsn > summary { list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 14px 18px; cursor: pointer; font-weight: 800; color: #0D3B22; border-radius: 16px; } .lipat-hsn > summary::-webkit-details-marker { display: none; } .lipat-hsn > summary > .ikon { color: var(--hsn-hijau); } .lipat-hsn__tanda { margin-left: auto; display: inline-flex; color: #5B6B62; transition: transform .2s; } .lipat-hsn[open] > summary .lipat-hsn__tanda { transform: rotate(180deg); } .lipat-hsn__isi { padding: 0 18px 18px; } .lipat-hsn--dalam { box-shadow: none; background: #F7FBF8; border-color: #DCE9E0; margin-top: 14px; } .lipat-hsn--dalam > summary { min-height: 48px; padding: 10px 14px; font-size: .95rem; } .lipat-hsn--dalam .lipat-hsn__isi { padding: 0 14px 14px; } .selesai-daftar .lipat-hsn { margin-top: 16px; } .pesan-panitia__blok { margin: 12px 0; padding: 12px 14px; border-radius: 12px; background: #F7FBF8; color: #2F4238; } /* samping: grup peserta & detail kegiatan */ .selesai-daftar__samping .lipat-hsn { margin-top: 0; } .selesai-daftar__samping .kartu-hsn { margin-top: 16px; } .tombol-grup { width: 100%; min-height: 50px; margin-top: 10px; padding: 10px 14px; justify-content: flex-start; text-align: left; border-radius: 12px; font-size: .95rem; } .tombol-grup--wa { background: #E7F7ED; color: #0B5E33; border: 1px solid #B5E3C7; } .tombol-grup--wa:hover { background: #D5F0DF; color: #0B5E33; } .tombol-grup--tg { background: #E8F2FA; color: #1A4F78; border: 1px solid #BBD7EC; } .tombol-grup--tg:hover { background: #D8E9F6; color: #1A4F78; } .tautan-panduan { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-weight: 700; font-size: .92rem; color: var(--hsn-hijau); } .detail-kegiatan__judul { margin: 0 0 10px !important; font-size: 1.05rem !important; } .detail-kegiatan__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: .92rem; } .detail-kegiatan__daftar li { display: flex; gap: 10px; align-items: flex-start; } .detail-kegiatan__daftar .ikon { margin-top: 2px; color: var(--hsn-hijau); } .detail-kegiatan__daftar b { display: block; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: #5B6B62; } /* halaman bayar */ .bayar-kepala { margin-bottom: 16px; } .bayar-kepala h1 { margin: 6px 0 6px; font-family: var(--heading-font-family); font-size: clamp(1.5rem, 4.8vw, 2.2rem); line-height: 1.2; color: #0D3B22; } .bayar-kepala p { margin: 0; font-size: 1rem; color: #2F4238; } .bayar-kembali { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; color: var(--hsn-hijau); text-decoration: none; } .tagihan { display: grid; gap: 16px; } .tagihan__info { margin: 0; } .tagihan__total { order: -1; padding: 16px 18px; border-radius: 14px; background: var(--hsn-hijau-muda); } .tagihan__label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #3D5246; } .tagihan__nominal { font-size: clamp(2rem, 8vw, 2.6rem); font-weight: 800; line-height: 1.15; color: var(--hsn-hijau); font-variant-numeric: tabular-nums; } .tagihan__rinci { margin-top: 2px; font-size: .88rem; color: #3D5246; } .tagihan__status { margin-top: 10px; } .tagihan__batas { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; font-size: .9rem; color: var(--bayar-warn-teks); } @media (min-width: 768px) { .tagihan { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; column-gap: 28px; } .tagihan__total { order: 0; } } .bayar-peringatan { margin: 16px 0 0; } .bayar-grid { margin-top: 0; } .bayar-grid > [class*="col-"] > .kartu-hsn:first-child { margin-top: 16px; } .qris-kartu { text-align: center; } .qris-kartu__label { margin: 0 !important; font-family: inherit !important; font-size: .8rem !important; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #3D5246; } .qris-kartu__nominal { font-size: clamp(1.9rem, 7vw, 2.4rem); font-weight: 800; line-height: 1.15; color: var(--hsn-hijau); font-variant-numeric: tabular-nums; } .qris-kartu__catatan { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: .9rem; font-weight: 700; color: var(--bayar-ok-teks); } .qris-kartu__catatan--ketik { display: block; color: var(--bayar-warn-teks); } /* QRIS: persegi 1:1, utuh (contain), latar putih + zona sunyi (PNG sudah berbingkai 4 modul), tidak melebihi kartu */ .qris-bingkai { position: relative; width: min(100%, 340px); margin: 14px auto 10px; padding: 10px; background: #fff; border: 1px solid #DFE7E1; border-radius: 18px; box-shadow: 0 2px 10px rgba(13, 59, 34, .08); } .qris-gambar { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; image-rendering: pixelated; } .qris-bingkai--foto .qris-gambar { aspect-ratio: auto; max-height: 72vh; image-rendering: auto; } .qris-galat { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--bayar-err); color: var(--bayar-err-teks); text-align: left; font-size: .92rem; } .qris-galat[hidden] { display: none; } .qris-galat > .ikon { margin-top: 2px; } .qris-kartu__merchant { margin: 0; font-size: .88rem; color: #45554C; overflow-wrap: anywhere; } .qris-kartu__petunjuk { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--hsn-hijau-muda); text-align: left; font-size: .95rem; line-height: 1.5; color: #16221B; } .qris-kartu__petunjuk .ikon { margin-top: 2px; color: var(--hsn-hijau); } .qris-kartu__unduh { margin: 10px 0 0; font-size: .88rem; } .qris-kartu__unduh a { display: inline-flex; align-items: center; gap: 6px; color: #45554C; } .qris-kartu__info { margin: 10px 0 0; color: #45554C; text-align: left; } .qris-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .qris-aksi .tombol-aksi { flex: 1 1 140px; } .qris-aksi .tombol-aksi--teks { flex-basis: 100%; } .sudah-bayar .tombol-utama { margin-top: 2px; } .keadaan { display: flex; gap: 16px; align-items: flex-start; margin-top: 16px; border-left: 6px solid var(--bayar-warn-garis); } .keadaan--ok { border-left-color: var(--hsn-hijau); } .keadaan--err { border-left-color: var(--bayar-err-teks); } .keadaan__ikon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bayar-warn); color: var(--bayar-warn-teks); } .keadaan--ok .keadaan__ikon { background: var(--bayar-ok); color: var(--hsn-hijau); } .keadaan--err .keadaan__ikon { background: var(--bayar-err); color: var(--bayar-err-teks); } .keadaan__ikon .ikon { width: 28px; height: 28px; } .keadaan > div { min-width: 0; flex: 1; } .keadaan p { line-height: 1.55; } .keadaan__fakta { margin: 0 0 12px; } .keadaan__besar { font-size: 1.6rem; color: var(--hsn-hijau) !important; font-variant-numeric: tabular-nums; } .keadaan__aksi { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .keadaan__aksi .tombol-utama { width: auto; flex: 1 1 240px; } .keadaan__aksi .tombol-kedua { flex: 1 1 200px; } @media (max-width: 575px) { .keadaan { flex-direction: column; gap: 10px; } } .bayar-hsn > .container > .lipat-hsn .qris-kartu__nominal { margin-top: 4px; } .bantuan-bayar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: #F4F7F5; } .bantuan-bayar__teks { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-weight: 700; color: #2F4238; } @media (max-width: 575px) { .bantuan-bayar > a { flex: 1 1 100%; } } /* ponsel vs layar lebar: ponsel/tablet tegak memakai alur simpan → pindai dari galeri; layar lebar memakai pindai dari layar */ @media (max-width: 991.98px) { .hanya-desktop { display: none !important; } } @media (min-width: 992px) { .hanya-ponsel { display: none !important; } } @media (prefers-reduced-motion: reduce) { .lipat-hsn__tanda, .tombol-utama, .tombol-kedua, .tombol-aksi, .tombol-grup { transition: none; } } /* ===== P0 15-10-2026: daftar "Pendaftaran dibuka" hero, rincian biaya paket, kartu paket ringkas, urutan halaman bayar ===== */ /* hero: semua kegiatan yang membuka pendaftaran sebagai baris ringkas (bukan dua kartu besar) */ h2.hero-hsn__dok-label { font-family: var(--body-font-family); line-height: 1.3; } .daftar-buka { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .daftar-buka__baris { position: relative; display: grid; gap: 2px; min-height: 64px; padding: 12px 44px 12px 16px; border-radius: 14px; background: #fff; color: #0D3B22; text-decoration: none; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 2px 10px rgba(0,0,0,.12); transition: transform .15s, box-shadow .15s; } .daftar-buka__baris:hover { color: #0D3B22; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.18); } .daftar-buka__baris:focus-visible { outline: 3px solid var(--hsn-emas); outline-offset: 2px; } .daftar-buka__baris--mahad { background: #FFF8EC; border-color: var(--hsn-emas); } .daftar-buka__jenis { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--hsn-emas-tua); } .daftar-buka__nama { font-size: 1rem; font-weight: 800; line-height: 1.3; color: #0D3B22; } .daftar-buka__meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .84rem; font-weight: 600; color: #3D5246; } .daftar-buka__biaya { color: var(--hsn-hijau); font-weight: 800; } .daftar-buka__ket { font-size: .8rem; color: #4A5D53; } .daftar-buka__panah { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-weight: 900; color: var(--hsn-hijau); } @media (max-width: 575px) { .daftar-buka { grid-template-columns: minmax(0, 1fr); gap: 8px; } .daftar-buka__baris { min-height: 0; padding-block: 10px; } } @media (prefers-reduced-motion: reduce) { .daftar-buka__baris { transition: none; } } /* detail kegiatan: rincian biaya per paket — baris terpisah (dulu
    disembunyikan tema → "Rp200.0003 orang …") */ .daftar-biaya { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; } .daftar-biaya li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed #DFE7E1; } .daftar-biaya li:last-child { border-bottom: 0; padding-bottom: 0; } .daftar-biaya__nama { font-weight: 700; color: #16221B; } .daftar-biaya__nama small { display: block; font-weight: 500; color: #5B6B62; font-size: .8rem; } .daftar-biaya__harga { font-weight: 800; color: var(--hsn-hijau); white-space: nowrap; font-variant-numeric: tabular-nums; } .daftar-biaya__catatan { display: block; margin-top: 8px; color: #5B6B62; } /* kartu paket Ma'had: nama + jumlah peserta di kiri, harga di kanan; ringkas di ponsel */ .paket-mahad__kepala { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .paket-mahad__nama { min-width: 0; } .paket-mahad__kepala .paket-mahad__harga { font-size: 1.35rem; white-space: nowrap; } .paket-mahad__kepala .paket-mahad__per { margin-bottom: 0; } .paket-mahad__kartu { gap: 12px; } @media (min-width: 992px) { .paket-mahad__kepala { flex-direction: column; gap: 6px; } .paket-mahad__kepala .paket-mahad__harga { font-size: 1.6rem; } } @media (max-width: 575px) { .paket-mahad { grid-template-columns: minmax(0, 1fr); gap: 10px; } .paket-mahad__kartu { padding: 14px; } .paket-mahad__jenis { font-size: .68rem; } .paket-mahad__tombol { min-height: 48px; padding-block: 10px; } } /* halaman bayar: urutan DOM = urutan ponsel (QRIS → Saya Sudah Bayar → cara membayar); layar lebar: QRIS kiri, dua kartu kanan */ .bayar-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; } .bayar-grid > .kartu-hsn, .bayar-hsn .bayar-grid > .kartu-hsn + .kartu-hsn { margin: 0; } @media (min-width: 992px) { .bayar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "qris cara" "qris sudah"; gap: 24px; align-items: start; } .bayar-grid__qris { grid-area: qris; } .bayar-grid__cara { grid-area: cara; } .bayar-grid__sudah { grid-area: sudah; } } .qris-kartu__catatan--periksa { display: block; margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--bayar-warn, #FFF6E5); color: #3D2A06; font-weight: 600; text-align: left; line-height: 1.5; } .qris-kartu__catatan--periksa .tombol-salin { margin-top: 6px; } .status-google { margin-bottom: 16px; } .status-google .tombol-hsn { display: flex; width: fit-content; } /* ===== Verifikasi kuitansi publik (16-10-2026) ===== */ .verifikasi-kuitansi h1 { margin: 0 0 6px; font-family: var(--heading-font-family); font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; color: #0D3B22; } .hasil-cek { border-left: 6px solid var(--hsn-hijau); } .hasil-cek--gagal { border-left-color: #B3261E; } .hasil-cek__kepala { display: flex; gap: 14px; align-items: flex-start; } .hasil-cek__kepala p { margin: 0; color: #2F4238; } .hasil-cek__ikon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #E3F4E8; color: var(--hsn-hijau); } .hasil-cek--gagal .hasil-cek__ikon { background: #FDECEA; color: #B3261E; } .hasil-cek__ikon .ikon { width: 28px; height: 28px; } .hasil-cek__data { display: grid; gap: 10px; margin: 16px 0 0; } .hasil-cek__data > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 8px; padding-top: 10px; border-top: 1px solid #E3EAE5; } .hasil-cek__data dt { font-size: .82rem; font-weight: 700; color: #5B6B62; } .hasil-cek__data dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 420px) { .hasil-cek__data > div { grid-template-columns: 1fr; gap: 2px; } .hasil-cek__kepala { flex-direction: column; } }