/* * PEHAM Event — halaman utama event (kategori, carian, arkib). * Warna & tipografi ikut tema laman PEHAM (Enfold): teal #046b76, hijau laut #30a196, Cabin + Roboto. * :is(#top,html) menaikkan kekhususan supaya gaya tema Enfold (#top …) tidak menindih. */ :is(#top,html) .peham-hub { --ph-teal: #046b76; --ph-teal-d: #03525a; --ph-sea: #30a196; --ph-sky: #9cc2df; --ph-ink: #16292c; --ph-text: #3d4f52; --ph-muted: #667a7d; --ph-line: #e2eaeb; --ph-bg2: #f3f8f8; --ph-r: 14px; --ph-head: "Cabin", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; --ph-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; font-family: var(--ph-body); font-size: 15px; line-height: 1.5; color: var(--ph-text); margin: 0 0 48px; -webkit-font-smoothing: antialiased; } :is(#top,html) .peham-hub *, :is(#top,html) .peham-hub *::before, :is(#top,html) .peham-hub *::after { box-sizing: border-box; } :is(#top,html) .peham-hub [hidden] { display: none !important; } :is(#top,html) .peham-hub a { text-decoration: none; } :is(#top,html) .peham-hub ul { list-style: none; margin: 0; padding: 0; } :is(#top,html) .peham-hub li { margin: 0; padding: 0; } :is(#top,html) .peham-hub p { margin: 0; } :is(#top,html) .peham-hub h1, :is(#top,html) .peham-hub h2, :is(#top,html) .peham-hub h3 { font-family: var(--ph-head); letter-spacing: -0.01em; text-transform: none; margin: 0; padding: 0; } :is(#top,html) .peham-hub .ph-ic { width: 16px; height: 16px; flex: 0 0 auto; } :is(#top,html) .peham-hub .ph-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--ph-teal)); flex: 0 0 auto; } :is(#top,html) .peham-hub .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } :is(#top,html) .peham-hub .ph-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.78); margin: 0 0 10px; } :is(#top,html) .peham-hub .ph-eyebrow--dark { color: var(--ph-sea); letter-spacing: .1em; } :is(#top,html) .peham-hub .ph-eyebrow--dark span { color: var(--ph-teal); } /* ---------- Hero ---------- */ :is(#top,html) .peham-hub .ph-hero { position: relative; overflow: hidden; border-radius: 22px; color: #fff; background: radial-gradient(circle at 92% 8%, rgba(156,194,223,.35) 0, rgba(156,194,223,0) 38%), radial-gradient(circle at 8% 110%, rgba(48,161,150,.55) 0, rgba(48,161,150,0) 45%), linear-gradient(135deg, #046b76 0%, #035760 60%, #024a52 100%); padding: 44px 44px 36px; margin: 0 0 18px; } :is(#top,html) .peham-hub .ph-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; border-radius: 50%; border: 46px solid rgba(255,255,255,.06); pointer-events: none; } :is(#top,html) .peham-hub .ph-hero__in { position: relative; z-index: 1; max-width: 760px; } :is(#top,html) .peham-hub .ph-hero__title { font-size: clamp(28px, 4vw, 42px); line-height: 1.12; font-weight: 700; color: #fff; margin: 0 0 12px; } :is(#top,html) .peham-hub .ph-hero__lead { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); max-width: 600px; margin: 0 0 24px; } :is(#top,html) .peham-hub .ph-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.82); } :is(#top,html) .peham-hub .ph-hero__stats b { color: #fff; font-size: 18px; font-family: var(--ph-head); margin-right: 4px; } /* ---------- Carian ---------- */ :is(#top,html) .peham-hub .ph-search { position: relative; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--ph-line); border-radius: 999px; padding: 5px 5px 5px 16px; width: 100%; max-width: 420px; margin: 0; box-shadow: 0 1px 2px rgba(16,41,44,.04); } :is(#top,html) .peham-hub .ph-search:focus-within { border-color: var(--ph-teal); box-shadow: 0 0 0 3px rgba(4,107,118,.15); } :is(#top,html) .peham-hub .ph-search .ph-ic { color: var(--ph-muted); width: 18px; height: 18px; } :is(#top,html) .peham-hub .ph-search input[type="search"] { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; outline: none; font: 15px/1.4 var(--ph-body); color: var(--ph-ink); padding: 8px 4px; margin: 0; height: auto; width: auto; border-radius: 0; -webkit-appearance: none; appearance: none; } :is(#top,html) .peham-hub .ph-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } :is(#top,html) .peham-hub .ph-search button { border: 0; border-radius: 999px; background: var(--ph-teal); color: #fff; font: 600 14px/1 var(--ph-body); padding: 11px 20px; margin: 0; cursor: pointer; transition: background .15s; min-width: 0; height: auto; box-shadow: none; text-transform: none; letter-spacing: 0; } :is(#top,html) .peham-hub .ph-search button:hover { background: var(--ph-teal-d); } :is(#top,html) .peham-hub .ph-search--lg { max-width: 620px; padding: 6px 6px 6px 20px; border: 0; box-shadow: 0 10px 30px rgba(0,0,0,.18); } :is(#top,html) .peham-hub .ph-search--lg input[type="search"] { font-size: 16px; padding: 10px 4px; } :is(#top,html) .peham-hub .ph-search--lg button { padding: 13px 26px; font-size: 15px; background: var(--ph-sea); } :is(#top,html) .peham-hub .ph-search--lg button:hover { background: #278a80; } /* ---------- Cip kategori ---------- */ :is(#top,html) .peham-hub .ph-chips { margin: 0 0 30px; position: relative; } :is(#top,html) .peham-hub .ph-chips__in { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } :is(#top,html) .peham-hub .ph-chips a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: 0 0 auto; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink); font-size: 14px; font-weight: 500; transition: border-color .15s, background .15s, color .15s; } :is(#top,html) .peham-hub .ph-chips a:hover { border-color: var(--c, var(--ph-teal)); color: var(--c, var(--ph-teal)); } :is(#top,html) .peham-hub .ph-chips a span { font-size: 12px; font-weight: 600; color: var(--ph-muted); background: var(--ph-bg2); border-radius: 999px; padding: 1px 7px; } :is(#top,html) .peham-hub .ph-chips a.is-on { background: var(--c, var(--ph-teal)); border-color: var(--c, var(--ph-teal)); color: #fff; } :is(#top,html) .peham-hub .ph-chips a.is-on .ph-dot { background: #fff; } :is(#top,html) .peham-hub .ph-chips a.is-on span { background: rgba(255,255,255,.2); color: #fff; } /* ---------- Sorotan ---------- */ :is(#top,html) .peham-hub .ph-spot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; background: #fff; border: 1px solid var(--ph-line); border-radius: 20px; overflow: hidden; margin: 0 0 44px; box-shadow: 0 1px 2px rgba(16,41,44,.04), 0 12px 32px -18px rgba(4,107,118,.35); } :is(#top,html) .peham-hub .ph-spot__media { position: relative; display: block; min-height: 320px; background: var(--ph-bg2); overflow: hidden; } :is(#top,html) .peham-hub .ph-spot__media .ph-spot__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; z-index: 1; } :is(#top,html) .peham-hub .ph-spot__body { padding: 32px 36px; display: flex; flex-direction: column; gap: 12px; } :is(#top,html) .peham-hub .ph-spot__title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; font-weight: 700; } :is(#top,html) .peham-hub .ph-spot__title a { color: var(--ph-ink); } :is(#top,html) .peham-hub .ph-spot__title a:hover { color: var(--ph-teal); } :is(#top,html) .peham-hub .ph-spot__desc { color: var(--ph-muted); font-size: 15px; line-height: 1.6; } :is(#top,html) .peham-hub .ph-spot__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin: 6px 0 4px; padding: 16px 0 0; border-top: 1px solid var(--ph-line); } :is(#top,html) .peham-hub .ph-spot__facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ph-ink); line-height: 1.45; } :is(#top,html) .peham-hub .ph-spot__facts .ph-ic { width: 18px; height: 18px; color: var(--ph-teal); margin-top: 2px; } :is(#top,html) .peham-hub .ph-spot__facts small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ph-muted); margin-bottom: 1px; } :is(#top,html) .peham-hub .ph-spot__facts b { font-weight: 700; } :is(#top,html) .peham-hub .ph-spot__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; } :is(#top,html) .peham-hub .ph-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ph-teal); color: #fff !important; font: 600 15px/1 var(--ph-body); padding: 13px 22px; border-radius: 999px; border: 1px solid var(--ph-teal); transition: background .15s, transform .1s; } :is(#top,html) .peham-hub .ph-btn:hover { background: var(--ph-teal-d); } :is(#top,html) .peham-hub .ph-btn:active { transform: translateY(1px); } :is(#top,html) .peham-hub .ph-btn--ghost { background: #fff; color: var(--ph-teal) !important; } :is(#top,html) .peham-hub .ph-btn--ghost:hover { background: var(--ph-bg2); } /* ---------- Baris kategori ---------- */ :is(#top,html) .peham-hub .ph-row { margin: 0 0 44px; } :is(#top,html) .peham-hub .ph-row__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--ph-line); position: relative; } :is(#top,html) .peham-hub .ph-row__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; border-radius: 3px; background: var(--c, var(--ph-teal)); } :is(#top,html) .peham-hub .ph-row__title { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 1.2; font-weight: 700; color: var(--ph-ink); } :is(#top,html) .peham-hub .ph-row__sub { font-size: 13.5px; color: var(--ph-muted); margin-top: 4px; } :is(#top,html) .peham-hub .ph-more { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-weight: 600; font-size: 14px; color: var(--c, var(--ph-teal)); padding: 6px 2px; } :is(#top,html) .peham-hub .ph-more:hover { gap: 9px; } :is(#top,html) .peham-hub .ph-rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } /* ---------- Grid (halaman kategori / carian) ---------- */ :is(#top,html) .peham-hub .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 22px 18px; } :is(#top,html) .peham-hub .ph-grid--embed { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } :is(#top,html) .peham-hub .ph-embed-more { margin-top: 14px; text-align: right; } /* ---------- Kad event ---------- */ :is(#top,html) .peham-hub .ph-card { --c: var(--ph-teal); position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--ph-line); border-radius: var(--ph-r); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } :is(#top,html) .peham-hub .ph-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--ph-line)); box-shadow: 0 14px 30px -16px rgba(16,41,44,.35); } :is(#top,html) .peham-hub .ph-card:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); } :is(#top,html) .peham-hub .ph-card__media { position: relative; aspect-ratio: 1 / 1; background: var(--ph-bg2); overflow: hidden; } :is(#top,html) .peham-hub .ph-card__blur { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(18px) saturate(1.1); opacity: .55; transform: scale(1.05); } :is(#top,html) .peham-hub .ph-card__media .ph-card__img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; } :is(#top,html) .peham-hub .ph-card__ph { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; background: radial-gradient(circle at 85% 15%, rgba(255,255,255,.22) 0, rgba(255,255,255,0) 40%), linear-gradient(140deg, var(--c, var(--ph-teal)) 0%, color-mix(in srgb, var(--c, var(--ph-teal)) 70%, #000) 100%); } :is(#top,html) .peham-hub .ph-spot .ph-card__ph { padding: 28px; } :is(#top,html) .peham-hub .ph-spot .ph-card__ph span { font-size: 40px; } :is(#top,html) .peham-hub .ph-card__ph span { font-family: var(--ph-head); font-weight: 700; font-size: 26px; line-height: 1.05; color: rgba(255,255,255,.92); word-break: break-word; } :is(#top,html) .peham-hub .ph-date { position: absolute; z-index: 2; left: 10px; top: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 46px; padding: 6px 6px 5px; border-radius: 10px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.14); line-height: 1; } :is(#top,html) .peham-hub .ph-date b { font-family: var(--ph-head); font-size: 19px; font-weight: 700; color: var(--ph-ink); } :is(#top,html) .peham-hub .ph-date span { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c); margin-top: 3px; } :is(#top,html) .peham-hub .ph-status { position: absolute; z-index: 2; right: 10px; top: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.1; background: rgba(255,255,255,.94); box-shadow: 0 2px 8px rgba(0,0,0,.1); color: var(--ph-muted); max-width: calc(100% - 76px); } :is(#top,html) .peham-hub .ph-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } :is(#top,html) .peham-hub .ph-status--ok { color: #0d7a4c; } :is(#top,html) .peham-hub .ph-status--warn { color: #a05a00; } :is(#top,html) .peham-hub .ph-status--bad { color: #b42318; } :is(#top,html) .peham-hub .ph-status--info { color: #1f5f99; } :is(#top,html) .peham-hub .ph-status--muted { color: #5b6b6e; } :is(#top,html) .peham-hub .ph-status--inline { position: static; box-shadow: none; background: var(--ph-bg2); max-width: none; font-size: 13px; padding: 7px 12px; } :is(#top,html) .peham-hub .ph-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 15px 14px; flex: 1; } :is(#top,html) .peham-hub .ph-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; } :is(#top,html) .peham-hub .ph-tags span { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); } :is(#top,html) .peham-hub .ph-spot .ph-tags span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c) 10%, #fff); } :is(#top,html) .peham-hub .ph-card__title { font-size: 16px; line-height: 1.32; font-weight: 700; } :is(#top,html) .peham-hub .ph-card__title a { color: var(--ph-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } :is(#top,html) .peham-hub .ph-card__link::after { content: ""; position: absolute; inset: 0; z-index: 3; } :is(#top,html) .peham-hub .ph-card:hover .ph-card__title a { color: var(--ph-teal); } :is(#top,html) .peham-hub .ph-card__meta { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ph-muted); } :is(#top,html) .peham-hub .ph-card__meta li { display: flex; gap: 7px; align-items: flex-start; line-height: 1.4; } :is(#top,html) .peham-hub .ph-card__meta li span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } :is(#top,html) .peham-hub .ph-card__meta .ph-ic { width: 14px; height: 14px; margin-top: 2px; color: var(--ph-sea); } :is(#top,html) .peham-hub .ph-card__foot { margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--ph-line); display: flex; align-items: center; justify-content: space-between; gap: 8px; } :is(#top,html) .peham-hub .ph-price { font-size: 13px; color: var(--ph-muted); } :is(#top,html) .peham-hub .ph-price__dual { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; } :is(#top,html) .peham-hub .ph-price__dual span { font-size: 12px; } :is(#top,html) .peham-hub .ph-price__dual b { font-size: 14px; } :is(#top,html) .peham-hub .ph-card__meta li.ph-cpd { color: #8a5a00; font-weight: 600; } :is(#top,html) .peham-hub .ph-card__meta li.ph-cpd .ph-ic { color: #b7791f; } :is(#top,html) .peham-hub .ph-price b { font-size: 15px; color: var(--ph-ink); font-weight: 700; } :is(#top,html) .peham-hub .ph-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--ph-teal); white-space: nowrap; } :is(#top,html) .peham-hub .ph-cta .ph-ic { width: 14px; height: 14px; transition: transform .15s; } :is(#top,html) .peham-hub .ph-card:hover .ph-cta .ph-ic { transform: translateX(3px); } :is(#top,html) .peham-hub .ph-card.is-past .ph-card__media > :not(.ph-status):not(.ph-date) { filter: grayscale(.55); opacity: .85; } :is(#top,html) .peham-hub .ph-card.is-past .ph-cta { color: var(--ph-muted); } /* ---------- Kepala halaman kategori / carian ---------- */ :is(#top,html) .peham-hub .ph-subhead { margin: 0 0 18px; padding: 22px 26px; border-radius: 18px; background: var(--ph-bg2); border: 1px solid var(--ph-line); position: relative; overflow: hidden; } :is(#top,html) .peham-hub .ph-subhead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c, var(--ph-teal)); } :is(#top,html) .peham-hub .ph-crumbs a { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--ph-teal); } :is(#top,html) .peham-hub .ph-crumbs .ph-ic { width: 15px; height: 15px; } :is(#top,html) .peham-hub .ph-subhead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; margin-top: 10px; } :is(#top,html) .peham-hub .ph-subhead__title { display: flex; align-items: center; gap: 12px; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; font-weight: 700; color: var(--ph-ink); } :is(#top,html) .peham-hub .ph-subhead__title .ph-dot { width: 14px; height: 14px; } :is(#top,html) .peham-hub .ph-subhead__sub { margin-top: 6px; color: var(--ph-muted); font-size: 14.5px; } :is(#top,html) .peham-hub .ph-subhead .ph-search { max-width: 360px; } :is(#top,html) .peham-hub .ph-toolbar { display: flex; align-items: center; justify-content: space-between; margin: -8px 0 20px; } :is(#top,html) .peham-hub .ph-tabs { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--ph-bg2); border: 1px solid var(--ph-line); } :is(#top,html) .peham-hub .ph-tabs a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ph-muted); } :is(#top,html) .peham-hub .ph-tabs a span { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--ph-muted); } :is(#top,html) .peham-hub .ph-tabs a.is-on { background: #fff; color: var(--ph-ink); box-shadow: 0 1px 3px rgba(16,41,44,.12); } :is(#top,html) .peham-hub .ph-tabs a.is-on span { background: var(--ph-teal); color: #fff; } /* ---------- Halaman & kosong ---------- */ :is(#top,html) .peham-hub .ph-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 32px 0 0; } :is(#top,html) .peham-hub .ph-pager a, :is(#top,html) .peham-hub .ph-pager span { min-width: 40px; height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink); font-weight: 600; font-size: 14px; } :is(#top,html) .peham-hub .ph-pager a:hover { border-color: var(--ph-teal); color: var(--ph-teal); } :is(#top,html) .peham-hub .ph-pager .is-on { background: var(--ph-teal); border-color: var(--ph-teal); color: #fff; } :is(#top,html) .peham-hub .ph-empty { text-align: center; padding: 48px 20px; border: 1px dashed #cdd9da; border-radius: 18px; background: #fbfdfd; } :is(#top,html) .peham-hub .ph-empty__icon { width: 40px; height: 40px; color: var(--ph-sky); margin: 0 auto 12px; display: block; } :is(#top,html) .peham-hub .ph-empty__title { font-family: var(--ph-head); font-size: 19px; font-weight: 700; color: var(--ph-ink); margin-bottom: 6px; } :is(#top,html) .peham-hub .ph-empty__text { color: var(--ph-muted); margin-bottom: 16px; } /* ---------- Responsif ---------- */ @media (max-width: 1180px) { :is(#top,html) .peham-hub .ph-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); } :is(#top,html) .peham-hub .ph-rail > :nth-child(n+5) { display: none; } } @media (max-width: 960px) { :is(#top,html) .peham-hub .ph-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); } :is(#top,html) .peham-hub .ph-rail > :nth-child(n+4) { display: none; } :is(#top,html) .peham-hub .ph-spot { grid-template-columns: 1fr; } :is(#top,html) .peham-hub .ph-spot__media { min-height: 0; aspect-ratio: 16 / 10; } } @media (max-width: 720px) { :is(#top,html) .peham-hub { font-size: 15px; } :is(#top,html) .peham-hub .ph-hero { padding: 30px 22px 26px; border-radius: 18px; } :is(#top,html) .peham-hub .ph-hero__lead { font-size: 15px; } :is(#top,html) .peham-hub .ph-search--lg { padding-left: 14px; } :is(#top,html) .peham-hub .ph-search--lg button { padding: 12px 18px; } :is(#top,html) .peham-hub .ph-chips { margin: 0 0 24px; } :is(#top,html) .peham-hub .ph-chips__in { padding: 4px 0 8px; scrollbar-width: none; } :is(#top,html) .peham-hub .ph-chips__in::-webkit-scrollbar { display: none; } /* Baris: tatal mendatar seperti aplikasi */ :is(#top,html) .peham-hub .ph-rail { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 72%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0; padding: 4px 0 12px; scrollbar-width: none; } :is(#top,html) .peham-hub .ph-rail::-webkit-scrollbar { display: none; } :is(#top,html) .peham-hub .ph-rail > * { scroll-snap-align: start; } :is(#top,html) .peham-hub .ph-rail > :nth-child(n) { display: flex; } :is(#top,html) .peham-hub .ph-card:hover { transform: none; } :is(#top,html) .peham-hub .ph-row__title { font-size: 19px; } :is(#top,html) .peham-hub .ph-spot__body { padding: 22px 20px; } :is(#top,html) .peham-hub .ph-spot__facts { grid-template-columns: 1fr; } :is(#top,html) .peham-hub .ph-subhead { padding: 18px 18px 18px 22px; } :is(#top,html) .peham-hub .ph-subhead .ph-search { max-width: none; } :is(#top,html) .peham-hub .ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } :is(#top,html) .peham-hub .ph-grid .ph-card__body { padding: 11px 11px 12px; } :is(#top,html) .peham-hub .ph-grid .ph-card__title { font-size: 14.5px; } :is(#top,html) .peham-hub .ph-grid .ph-status { font-size: 10.5px; padding: 4px 8px; right: 6px; top: 6px; max-width: calc(100% - 60px); } :is(#top,html) .peham-hub .ph-grid .ph-date { left: 6px; top: 6px; min-width: 40px; } :is(#top,html) .peham-hub .ph-grid .ph-card__foot { flex-direction: column; align-items: flex-start; gap: 4px; } } @media (max-width: 380px) { :is(#top,html) .peham-hub .ph-grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { :is(#top,html) .peham-hub * { transition: none !important; } } /* ===================================================================== * Halaman event (pendaftaran) — bahagian atas * ===================================================================== */ :is(#top,html) .peham-er.per-event { max-width: 1160px; } :is(#top,html) .peham-er.per-event > .per-form, :is(#top,html) .peham-er.per-event > .per-notice { max-width: 860px; margin-left: auto; margin-right: auto; } :is(#top,html) .peham-er.per-event > .per-form { scroll-margin-top: 110px; border-radius: 18px; padding: 26px 28px; box-shadow: 0 1px 2px rgba(16,41,44,.04); } :is(#top,html) .peham-er.per-event > .per-form .per-section-title { font-family: var(--ph-head, "Cabin", sans-serif); font-size: 24px; } :is(#top,html) .peham-hub.pev { margin: 0 0 28px; } :is(#top,html) .peham-hub .pev-crumbs { margin: 0 0 14px; } :is(#top,html) .peham-hub .pev-hero { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 0; background: #fff; border: 1px solid var(--ph-line); border-radius: 22px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,41,44,.04), 0 18px 40px -26px rgba(4,107,118,.45); } :is(#top,html) .peham-hub .pev-hero--noimg { grid-template-columns: 1fr; } :is(#top,html) .peham-hub .pev-media { position: relative; display: block; min-height: 420px; background: var(--ph-bg2); overflow: hidden; cursor: zoom-in; } :is(#top,html) .peham-hub .pev-media .pev-media__img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 18px; } :is(#top,html) .peham-hub .pev-zoom { position: absolute; z-index: 2; right: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(16,41,44,.72); color: #fff; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: all .18s; } :is(#top,html) .peham-hub .pev-zoom .ph-ic { width: 14px; height: 14px; } :is(#top,html) .peham-hub .pev-media:hover .pev-zoom, :is(#top,html) .peham-hub .pev-media:focus-visible .pev-zoom { opacity: 1; transform: none; } :is(#top,html) .peham-hub .pev-info { padding: 32px 34px 28px; display: flex; flex-direction: column; gap: 16px; min-width: 0; } :is(#top,html) .peham-hub .pev-tags { display: flex; flex-wrap: wrap; gap: 6px; } :is(#top,html) .peham-hub .pev-tags a { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 10%, #fff); padding: 4px 11px; border-radius: 999px; } :is(#top,html) .peham-hub .pev-tags a:hover { background: color-mix(in srgb, var(--c) 18%, #fff); } :is(#top,html) .peham-hub .pev-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 700; color: var(--ph-ink); } :is(#top,html) .peham-hub .pev-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: -4px; } :is(#top,html) .peham-hub .pev-when { font-size: 13.5px; font-weight: 600; color: var(--ph-teal); } :is(#top,html) .peham-hub .pev-facts { display: grid; gap: 12px; padding: 16px 0; border-top: 1px solid var(--ph-line); border-bottom: 1px solid var(--ph-line); } :is(#top,html) .peham-hub .pev-facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--ph-ink); line-height: 1.45; } :is(#top,html) .peham-hub .pev-facts .ph-ic { width: 20px; height: 20px; color: var(--ph-teal); margin-top: 2px; } :is(#top,html) .peham-hub .pev-facts small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ph-muted); margin-bottom: 1px; } :is(#top,html) .peham-hub .pev-facts .pev-cpd { color: #7a4f00; } :is(#top,html) .peham-hub .pev-facts .pev-cpd .ph-ic { color: #b7791f; } :is(#top,html) .peham-hub .pev-map { font-size: 13px; font-weight: 600; color: var(--ph-teal); margin-left: 4px; white-space: nowrap; } :is(#top,html) .peham-hub .pev-map::after { content: " ↗"; } :is(#top,html) .peham-hub .pev-feebox { background: var(--ph-bg2); border: 1px solid var(--ph-line); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } :is(#top,html) .peham-hub .pev-label { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ph-muted); } :is(#top,html) .peham-hub .pev-fees { display: flex; flex-direction: column; } :is(#top,html) .peham-hub .pev-fees li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px dashed #d5e0e1; } :is(#top,html) .peham-hub .pev-fees li:last-child { border-bottom: 0; } :is(#top,html) .peham-hub .pev-fee__name { color: var(--ph-ink); font-weight: 500; font-size: 15px; } :is(#top,html) .peham-hub .pev-fee__name small { display: block; font-size: 12.5px; color: var(--ph-muted); font-weight: 400; } :is(#top,html) .peham-hub .pev-fees b { font-family: var(--ph-head); font-size: 19px; color: var(--ph-ink); white-space: nowrap; } :is(#top,html) .peham-hub .pev-free { font-family: var(--ph-head); font-size: 22px; font-weight: 700; color: var(--ph-ink); } :is(#top,html) .peham-hub .pev-cta { justify-content: center; width: 100%; padding: 15px 22px; font-size: 16px; margin-top: 4px; } /* Ringkasan yuran dalam kad. */ :is(#top,html) .peham-hub .pev-pricehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } :is(#top,html) .peham-hub .pev-from { font-family: var(--ph-head); font-size: 30px; line-height: 1.1; font-weight: 700; color: var(--ph-ink); margin: 2px 0 0; } :is(#top,html) .peham-hub .pev-from small { font-family: var(--ph-body); font-size: 14px; font-weight: 500; color: var(--ph-muted); margin-right: 6px; } :is(#top,html) .peham-hub .pev-pricenote { font-size: 13.5px; color: var(--ph-text); margin: -2px 0 0; } :is(#top,html) .peham-hub .pev-seefees { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--ph-teal); padding-bottom: 4px; } :is(#top,html) .peham-hub .pev-seefees .ph-ic { width: 15px; height: 15px; transform: rotate(90deg); } :is(#top,html) .peham-hub .pev-seefees:hover { text-decoration: underline; } /* Bahagian "Yuran penyertaan". */ :is(#top,html) .peham-hub .pev-yuran { max-width: 860px; margin: 32px auto 0; scroll-margin-top: 110px; } :is(#top,html) .peham-hub .pev-yuran__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } :is(#top,html) .peham-hub .pev-yuran__head .pev-h2 { margin: 0; } :is(#top,html) .peham-hub .pev-yuran__cta { padding: 10px 18px; font-size: 14.5px; } :is(#top,html) .peham-hub .pev-ft { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--ph-line); border-radius: 16px; overflow: hidden; margin: 0; table-layout: fixed; } :is(#top,html) .peham-hub .pev-ft th, :is(#top,html) .peham-hub .pev-ft td { padding: 14px 18px; border: 0; border-bottom: 1px solid var(--ph-line); text-align: left; vertical-align: middle; background: transparent; } :is(#top,html) .peham-hub .pev-ft tbody tr:last-child > * { border-bottom: 0; } :is(#top,html) .peham-hub .pev-ft thead th { background: var(--ph-bg2); font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-muted); padding-top: 11px; padding-bottom: 11px; } :is(#top,html) .peham-hub .pev-ft thead th:first-child { width: 46%; } :is(#top,html) .peham-hub .pev-ft tbody th { font-size: 15px; font-weight: 600; color: var(--ph-ink); } :is(#top,html) .peham-hub .pev-ft small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ph-muted); margin-top: 2px; line-height: 1.35; } :is(#top,html) .peham-hub .pev-ft td b { font-family: var(--ph-head); font-size: 21px; color: var(--ph-ink); white-space: nowrap; } :is(#top,html) .peham-hub .pev-ft td:nth-child(2) { background: color-mix(in srgb, var(--ph-teal) 5%, #fff); } :is(#top,html) .peham-hub .pev-ft .pev-ft__save { color: #1d7a46; font-weight: 600; } :is(#top,html) .peham-hub .pev-ft .pev-ft__na { color: var(--ph-muted); } :is(#top,html) .peham-hub .pev-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } :is(#top,html) .peham-hub .pev-fgrid li { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: #fff; border: 1px solid var(--ph-line); border-radius: 14px; } :is(#top,html) .peham-hub .pev-fgrid span { font-size: 14.5px; font-weight: 600; color: var(--ph-ink); } :is(#top,html) .peham-hub .pev-fgrid b { font-family: var(--ph-head); font-size: 22px; color: var(--ph-ink); } :is(#top,html) .peham-hub .pev-fgrid small { font-size: 12.5px; color: var(--ph-muted); } :is(#top,html) .peham-hub .pev-yuran__note { font-size: 13.5px; color: var(--ph-muted); margin: 10px 2px 0; } :is(#top,html) .peham-hub .pev-yuran__note a { color: var(--ph-teal); font-weight: 600; text-decoration: underline; } :is(#top,html) .peham-hub .pev-tools { display: flex; flex-wrap: wrap; gap: 8px; } :is(#top,html) .peham-hub .pev-tool, :is(#top,html) .peham-hub .pev-cal > summary { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--ph-line); background: #fff; color: var(--ph-ink); font: 500 13.5px/1.2 var(--ph-body); cursor: pointer; list-style: none; margin: 0; box-shadow: none; text-transform: none; letter-spacing: 0; height: auto; min-width: 0; } :is(#top,html) .peham-hub .pev-cal > summary::-webkit-details-marker { display: none; } :is(#top,html) .peham-hub .pev-tool:hover, :is(#top,html) .peham-hub .pev-cal > summary:hover { border-color: var(--ph-teal); color: var(--ph-teal); } :is(#top,html) .peham-hub .pev-tool--wa .ph-ic { color: #1fa855; } :is(#top,html) .peham-hub .pev-cal { position: relative; } :is(#top,html) .peham-hub .pev-cal__menu { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); min-width: 250px; background: #fff; border: 1px solid var(--ph-line); border-radius: 12px; box-shadow: 0 16px 36px -12px rgba(16,41,44,.3); padding: 6px; display: flex; flex-direction: column; } :is(#top,html) .peham-hub .pev-cal__menu a { padding: 10px 12px; border-radius: 8px; color: var(--ph-ink); font-size: 14px; } :is(#top,html) .peham-hub .pev-cal__menu a:hover { background: var(--ph-bg2); color: var(--ph-teal); } :is(#top,html) .peham-hub .pev-about { max-width: 860px; margin: 36px auto 0; } :is(#top,html) .peham-hub .pev-h2 { font-size: 24px; font-weight: 700; color: var(--ph-ink); margin: 0 0 12px; } :is(#top,html) .peham-hub .pev-desc { font-size: 16px; line-height: 1.75; color: var(--ph-text); } :is(#top,html) .peham-hub .pev-desc p { margin: 0 0 1em; } :is(#top,html) .peham-hub .pev-desc ul { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; } :is(#top,html) .peham-hub .pev-desc ol { list-style: decimal; padding-left: 1.3em; margin: 0 0 1em; } :is(#top,html) .peham-hub .pev-desc li { margin: 0 0 .35em; } :is(#top,html) .peham-hub .pev-desc img { max-width: 100%; height: auto; border-radius: 12px; } :is(#top,html) .peham-hub .pev-desc a { color: var(--ph-teal); text-decoration: underline; } :is(#top,html) .peham-hub .pev-sticky { display: none; } @media (max-width: 900px) { :is(#top,html) .peham-hub .pev-hero { grid-template-columns: 1fr; border-radius: 18px; } :is(#top,html) .peham-hub .pev-media { min-height: 0; aspect-ratio: 4 / 4.2; max-height: 70vh; } :is(#top,html) .peham-hub .pev-media .pev-media__img { padding: 10px; } :is(#top,html) .peham-hub .pev-zoom { opacity: 1; transform: none; } :is(#top,html) .peham-hub .pev-info { padding: 22px 20px 22px; gap: 14px; } } @media (max-width: 720px) { :is(#top,html) .peham-hub .pev-sticky:not([hidden]) { display: flex; position: fixed; z-index: 9990; left: 10px; right: 10px; bottom: 10px; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; background: #fff; border: 1px solid var(--ph-line); border-radius: 16px; box-shadow: 0 14px 34px -10px rgba(16,41,44,.45); } :is(#top,html) .peham-hub .pev-sticky div { display: flex; flex-direction: column; min-width: 0; } :is(#top,html) .peham-hub .pev-sticky b { font-size: 14px; color: var(--ph-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#top,html) .peham-hub .pev-sticky span { font-size: 12px; color: var(--ph-muted); } :is(#top,html) .peham-hub .pev-sticky .ph-btn { padding: 11px 18px; flex: 0 0 auto; } :is(#top,html) .peham-er.per-event > .per-form { padding: 18px 16px; } :is(#top,html) .peham-hub .pev-about { margin-top: 26px; } :is(#top,html) .peham-hub .pev-yuran { margin-top: 24px; } :is(#top,html) .peham-hub .pev-yuran__cta { display: none; } :is(#top,html) .peham-hub .pev-ft th, :is(#top,html) .peham-hub .pev-ft td { padding: 12px 10px; } :is(#top,html) .peham-hub .pev-ft thead th { font-size: 10.5px; letter-spacing: .04em; } :is(#top,html) .peham-hub .pev-ft thead th:first-child { width: 42%; } :is(#top,html) .peham-hub .pev-ft tbody th { font-size: 14px; padding-left: 14px; } :is(#top,html) .peham-hub .pev-ft td b { font-size: 18px; } :is(#top,html) .peham-hub .pev-ft small { font-size: 11.5px; } } /* ===================================================================== * Langganan makluman event * ===================================================================== */ :is(#top,html) .peham-hub .ph-gap { height: 36px; } :is(#top,html) .peham-hub.pev-subwrap { max-width: 860px; margin: 36px auto 0; } :is(#top,html) .peham-hub .ph-sub { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: center; margin: 8px 0 44px; padding: 30px 32px; border-radius: 22px; color: #fff; background: radial-gradient(circle at 100% 0, rgba(156,194,223,.35), rgba(156,194,223,0) 45%), linear-gradient(135deg, #035760, #046b76); } :is(#top,html) .peham-hub .ph-sub h2 { font-size: 24px; line-height: 1.2; color: #fff; margin: 0 0 8px; } :is(#top,html) .peham-hub .ph-sub p { color: rgba(255,255,255,.85); font-size: 14.5px; line-height: 1.55; } :is(#top,html) .peham-hub .ph-sub__form { display: flex; flex-direction: column; gap: 12px; } :is(#top,html) .peham-hub .ph-sub__row { display: flex; gap: 8px; flex-wrap: wrap; } :is(#top,html) .peham-hub .ph-sub input[type="email"], :is(#top,html) .peham-hub .ph-sub input[type="text"] { flex: 1 1 140px; min-width: 0; border: 0; border-radius: 12px; padding: 12px 14px; margin: 0; font: 15px/1.3 var(--ph-body); color: var(--ph-ink); background: #fff; box-shadow: none; height: auto; width: auto; } :is(#top,html) .peham-hub .ph-sub button[type="submit"] { border: 0; border-radius: 12px; padding: 12px 22px; margin: 0; background: var(--ph-sea); color: #fff; font: 700 15px/1 var(--ph-body); cursor: pointer; height: auto; min-width: 0; box-shadow: none; text-transform: none; letter-spacing: 0; } :is(#top,html) .peham-hub .ph-sub button[type="submit"]:hover { background: #278a80; } :is(#top,html) .peham-hub .ph-sub button[disabled] { opacity: .7; cursor: wait; } :is(#top,html) .peham-hub .ph-sub__topics { display: flex; flex-wrap: wrap; gap: 6px; } :is(#top,html) .peham-hub .ph-sub__topics label { position: relative; cursor: pointer; margin: 0; } :is(#top,html) .peham-hub .ph-sub__topics input { position: absolute; opacity: 0; pointer-events: none; } :is(#top,html) .peham-hub .ph-sub__topics span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); color: #fff; font-size: 13px; font-weight: 500; transition: all .12s; } :is(#top,html) .peham-hub .ph-sub__topics input:checked + span { background: #fff; color: var(--ph-teal); border-color: #fff; } :is(#top,html) .peham-hub .ph-sub__topics input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; } :is(#top,html) .peham-hub .ph-sub__msg { font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.14); } :is(#top,html) .peham-hub .ph-sub__msg.is-error { background: #fdecea; color: #a12a1f; } :is(#top,html) .peham-hub .ph-sub__note { font-size: 12px !important; color: rgba(255,255,255,.7) !important; } :is(#top,html) .peham-hub .ph-manage { max-width: 640px; margin: 0 auto 40px; background: #fff; border: 1px solid var(--ph-line); border-radius: 20px; padding: 28px; } :is(#top,html) .peham-hub .ph-manage h1 { font-size: 26px; color: var(--ph-ink); margin: 0 0 6px; } :is(#top,html) .peham-hub .ph-manage p { color: var(--ph-muted); margin: 0 0 16px; } :is(#top,html) .peham-hub .ph-manage .ph-sub__topics span { color: var(--ph-ink); border-color: var(--ph-line); } :is(#top,html) .peham-hub .ph-manage .ph-sub__topics input:checked + span { background: var(--ph-teal); color: #fff; border-color: var(--ph-teal); } :is(#top,html) .peham-hub .ph-manage__acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; } :is(#top,html) .peham-hub .ph-manage button { border: 1px solid var(--ph-teal); border-radius: 999px; padding: 11px 20px; margin: 0; font: 600 14px/1 var(--ph-body); cursor: pointer; background: var(--ph-teal); color: #fff; height: auto; min-width: 0; box-shadow: none; text-transform: none; } :is(#top,html) .peham-hub .ph-manage button.is-ghost { background: #fff; color: #a12a1f; border-color: #e7c4c0; } :is(#top,html) .peham-hub .ph-manage .ph-sub__msg { background: var(--ph-bg2); color: var(--ph-ink); margin-top: 14px; } :is(#top,html) .peham-hub .ph-manage .ph-sub__msg.is-error { background: #fdecea; color: #a12a1f; } @media (max-width: 820px) { :is(#top,html) .peham-hub .ph-sub { grid-template-columns: 1fr; padding: 24px 20px; gap: 16px; } }