/*
 * PSLC - Sistem reka bentuk halaman awam (prefix pg-)
 * Digunakan oleh: about-us, school-based-program, ourteam, education-and-autism,
 * services, event, webinar-talk, gallery, resources, downloads, contact-us
 */

:root {
    --pg-primary: #1d4ed8;
    --pg-primary-dark: #1e3a8a;
    --pg-navy: #0b1437;
    --pg-ink: #0f172a;
    --pg-text: #475569;
    --pg-muted: #64748b;
    --pg-line: #e2e8f0;
    --pg-soft: #f1f5f9;
    --pg-bg: #f8fafc;
    --pg-radius: 24px;
    --pg-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 18px 40px -18px rgba(15, 23, 42, .22);
}

.pg h1, .pg h2, .pg h3, .pg h4 { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; color: var(--pg-ink); letter-spacing: -.012em; }
.pg { color: var(--pg-text); }
.pg a { transition: color .2s; }

/* ================= HERO ================= */
.pg-hero {
    position: relative; overflow: hidden; color: #fff; text-align: center; padding: 4.2rem 0 7rem;
    background:
        radial-gradient(800px 420px at 90% 0%, rgba(14, 165, 233, .5), transparent 60%),
        radial-gradient(600px 420px at 0% 100%, rgba(168, 85, 247, .35), transparent 60%),
        linear-gradient(135deg, #0b1437 0%, #122a7a 55%, #1d4ed8 100%);
}
.pg-hero::before {
    content: ''; position: absolute; inset: 0; opacity: .3; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, .35) 1px, transparent 1.4px); background-size: 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.pg-hero .wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.pg-hero .wave svg { display: block; width: 100%; height: 64px; }
.pg-hero .puz { position: absolute; font-size: 1.8rem; opacity: .85; pointer-events: none; animation: pgFloat 7s ease-in-out infinite; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .25)); }
.pg-hero .puz.a { color: #fbbf24; left: 8%; top: 28%; }
.pg-hero .puz.b { color: #f472b6; right: 9%; top: 22%; animation-delay: -3s; font-size: 2.2rem; }
.pg-hero .puz.c { color: #4ade80; right: 24%; bottom: 26%; animation-delay: -1.5s; font-size: 1.4rem; }
@media (max-width: 767px) { .pg-hero .puz { display: none; } }
@keyframes pgFloat { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-14px) rotate(8deg); } }

.pg-crumb {
    display: inline-flex; align-items: center; gap: .6rem; padding: .4rem 1rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #e0e7ff;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); margin-bottom: 1.2rem;
}
.pg-crumb a { color: #fff; text-decoration: none; opacity: .85; }
.pg-crumb a:hover { opacity: 1; }
.pg-crumb i { font-size: .6rem; opacity: .7; }

.pg-hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.2rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 1rem; position: relative; z-index: 2; }
.pg-hero h1 .accent { background: linear-gradient(90deg, #fde047, #fb923c 50%, #f472b6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-hero p { max-width: 660px; margin: 0 auto 1.6rem; color: #c7d2fe; font-size: 1.08rem; line-height: 1.75; position: relative; z-index: 2; }
.pg-hero p:last-child { margin-bottom: 0; }

.pg-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-bottom: 1.8rem; position: relative; z-index: 2; }
.pg-stat { min-width: 120px; padding: .75rem 1.25rem; border-radius: 18px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(10px); }
.pg-stat b { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1; color: #fff; }
.pg-stat small { display: block; margin-top: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #a5b4fc; }

.pg-search { position: relative; max-width: 560px; margin: 0 auto; z-index: 2; }
.pg-search i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.pg-search input { width: 100%; border: 0; outline: 0; border-radius: 999px; padding: 1.05rem 1.4rem 1.05rem 3rem; font-size: 1rem; color: var(--pg-ink); background: #fff; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .55); }
.pg-search input:focus { box-shadow: 0 0 0 4px rgba(250, 204, 21, .5), 0 24px 40px -18px rgba(0, 0, 0, .55); }

.pg-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; position: relative; z-index: 2; }

/* ================= BODY ================= */
.pg-body { background: var(--pg-bg); padding: 0 0 5rem; position: relative; }
.pg-body.pull > .container > :first-child { margin-top: -3.6rem; position: relative; z-index: 3; }
.pg-section { padding: 4.5rem 0; }
.pg-section.white { background: #fff; }
.pg-section.tight { padding: 3rem 0; }

.pg-head { text-align: center; max-width: 680px; margin: 0 auto 2.8rem; }
.pg-head.left { text-align: left; margin-left: 0; }
.pg-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pg-primary); background: #eff6ff; padding: .4rem .95rem; border-radius: 999px; margin-bottom: 1rem; }
.pg-title { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.2; margin: 0 0 .8rem; }
.pg-sub { color: var(--pg-text); font-size: 1.04rem; line-height: 1.75; margin: 0; }

.pg-card { background: #fff; border: 1px solid var(--pg-line); border-radius: 28px; box-shadow: var(--pg-shadow); padding: 2.4rem; }
.pg-card.flat { box-shadow: none; }
@media (max-width: 767px) { .pg-card { padding: 1.4rem; border-radius: 22px; } .pg-hero { padding: 3rem 0 6rem; } .pg-section { padding: 3rem 0; } }

.pg-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.pg-badge { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #3730a3; background: #eef2ff; border: 1px solid #e0e7ff; }
.pg-badge i { font-size: .7rem; color: #6366f1; }

/* ================= BUTANG ================= */
.pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.5rem; border-radius: 14px; font-weight: 700; font-size: .92rem; text-decoration: none !important;
    border: 1px solid transparent; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.pg-btn:hover { transform: translateY(-3px); }
.pg-btn-primary { background: linear-gradient(135deg, #1d4ed8, #3b82f6); color: #fff; box-shadow: 0 14px 28px -12px rgba(29, 78, 216, .7); }
.pg-btn-primary:hover { color: #fff; box-shadow: 0 20px 34px -12px rgba(29, 78, 216, .85); }
.pg-btn-light { background: #fff; color: var(--pg-ink); border-color: var(--pg-line); box-shadow: 0 8px 18px -10px rgba(15, 23, 42, .25); }
.pg-btn-light:hover { color: var(--pg-primary); border-color: #bfdbfe; }
.pg-btn-yellow { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1c1917; box-shadow: 0 14px 28px -12px rgba(245, 158, 11, .7); }
.pg-btn-yellow:hover { color: #1c1917; }
.pg-btn-ghost { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(6px); }
.pg-btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, .22); }
.pg-btn-sm { padding: .55rem 1.05rem; font-size: .82rem; border-radius: 11px; }

/* ================= CHIP / PENAPIS ================= */
.pg-filter { background: #fff; border: 1px solid var(--pg-line); border-radius: 22px; padding: 1rem 1.2rem; box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .35); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.pg-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.pg-chip { border: 1px solid var(--pg-line); background: #fff; color: var(--pg-text); font-size: .85rem; font-weight: 600; padding: .5rem 1rem; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; transition: all .2s; text-decoration: none; }
.pg-chip small { font-size: .72rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; background: var(--pg-soft); color: #64748b; }
.pg-chip:hover { border-color: #bfdbfe; color: var(--pg-primary); }
.pg-chip.active { background: linear-gradient(135deg, #1d4ed8, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 10px 20px -10px rgba(29, 78, 216, .7); }
.pg-chip.active small { background: rgba(255, 255, 255, .25); color: #fff; }
.pg-count { font-size: .88rem; color: var(--pg-muted); font-weight: 500; }
.pg-count b { color: var(--pg-ink); }
@media (max-width: 767px) { .pg-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: 100%; } .pg-chips::-webkit-scrollbar { display: none; } .pg-chip { flex-shrink: 0; } }

/* ================= KAD GENERIK ================= */
.pg-tile { height: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--pg-line); border-radius: var(--pg-radius); overflow: hidden; text-decoration: none !important; color: inherit; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pg-tile:hover { transform: translateY(-7px); box-shadow: 0 30px 50px -26px rgba(15, 23, 42, .4); }

/* ================= KANDUNGAN CMS ================= */
.cms-content { font-size: 1rem; line-height: 1.85; color: var(--pg-text); word-wrap: break-word; }
.cms-content > :first-child { margin-top: 0 !important; }
.cms-content p { margin: 0 0 1.05rem !important; }
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4 { color: var(--pg-ink); font-weight: 800; margin: 1.8rem 0 .8rem !important; line-height: 1.3; }
.cms-content h2 { font-size: 1.55rem; } .cms-content h3 { font-size: 1.28rem; } .cms-content h4 { font-size: 1.1rem; }
.cms-content strong, .cms-content b { color: var(--pg-ink); }
.cms-content a { color: var(--pg-primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(29, 78, 216, .35); }
.cms-content a:hover { text-decoration-color: currentColor; }
.cms-content ul, .cms-content ol { margin: 0 0 1.2rem !important; padding-left: 1.4rem; }
.cms-content ul { list-style: none; padding-left: 0; }
.cms-content ul li { position: relative; padding-left: 1.9rem; margin-bottom: .65rem !important; }
.cms-content ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .22em; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #dcfce7; color: #15803d; font-size: .6rem; display: flex; align-items: center; justify-content: center; }
.cms-content ol li { margin-bottom: .6rem !important; padding-left: .3rem; }
.cms-content ol li::marker { font-weight: 800; color: var(--pg-primary); }
.cms-content li p { margin: 0 !important; }
.cms-content img { max-width: 100%; height: auto; border-radius: 18px; }
.cms-content blockquote { margin: 1.4rem 0; padding: 1rem 1.3rem; border-left: 4px solid #6366f1; background: #f5f3ff; border-radius: 0 14px 14px 0; color: #3730a3; font-style: italic; }
.cms-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.2rem 0; border: 1px solid var(--pg-line); border-radius: 14px; overflow: hidden; font-size: .94rem; }
.cms-content th { background: var(--pg-soft); color: var(--pg-ink); font-weight: 700; text-align: left; }
.cms-content th, .cms-content td { padding: .75rem 1rem; border-bottom: 1px solid var(--pg-line); }
.cms-content tr:last-child td { border-bottom: 0; }
.cms-content hr { border: 0; height: 1px; background: var(--pg-line); margin: 2rem 0; }
.cms-content iframe { max-width: 100%; border-radius: 16px; }

/* ================= CTA ================= */
.pg-cta { position: relative; overflow: hidden; border-radius: 32px; padding: 3rem 2.6rem; color: #fff; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: radial-gradient(520px 320px at 92% 0%, rgba(244, 114, 182, .45), transparent 60%), radial-gradient(500px 300px at 0% 100%, rgba(14, 165, 233, .4), transparent 60%), linear-gradient(135deg, #0b1437 0%, #1e3a8a 55%, #1d4ed8 100%);
    box-shadow: 0 36px 60px -30px rgba(29, 78, 216, .8); }
.pg-cta::after { content: ''; position: absolute; right: -70px; bottom: -110px; width: 280px; height: 280px; border-radius: 50%; border: 34px solid rgba(255, 255, 255, .06); pointer-events: none; }
.pg-cta h2 { color: #fff; font-size: clamp(1.4rem, 2.6vw, 1.9rem); font-weight: 800; margin: 0 0 .5rem; }
.pg-cta p { color: #c7d2fe; margin: 0; max-width: 520px; line-height: 1.7; }
.pg-cta .btns { display: flex; flex-wrap: wrap; gap: .75rem; position: relative; z-index: 2; }
@media (max-width: 767px) { .pg-cta { padding: 2rem 1.5rem; border-radius: 24px; } }

/* ================= KOSONG ================= */
.pg-empty { text-align: center; padding: 3.5rem 1.5rem; background: #fff; border: 1px dashed #cbd5e1; border-radius: var(--pg-radius); color: var(--pg-muted); }
.pg-empty i { font-size: 2.6rem; color: #cbd5e1; display: block; margin-bottom: 1rem; }
.pg-empty h3 { font-size: 1.2rem; margin: 0 0 .4rem; }
.pg-empty p { margin: 0; }

/* ================= PAGINATION ================= */
.pg-pager { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin: 2.5rem 0 0; }
.pg-pager .info { color: var(--pg-muted); font-size: .9rem; }
.pg-pager .pagination { gap: 4px; }
.pg-pager .page-link { border: 1px solid var(--pg-line); color: var(--pg-text); border-radius: 10px !important; min-width: 40px; text-align: center; font-weight: 600; }
.pg-pager .page-link:hover { background: #eef2ff; color: var(--pg-primary); border-color: #c7d2fe; }
.pg-pager .page-item.active .page-link { background: linear-gradient(135deg, #1d4ed8, #3b82f6); border-color: transparent; color: #fff; box-shadow: 0 6px 12px -3px rgba(29, 78, 216, .4); }
.pg-pager .page-item.disabled .page-link { background: #f8fafc; color: #cbd5e1; }

/* ================= LIGHTBOX ================= */
.pg-lightbox { position: fixed; inset: 0; z-index: 99999; background: rgba(8, 12, 32, .9); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.pg-lightbox.active { display: flex; animation: pgFade .25s ease; }
.pg-lightbox img { max-width: min(1000px, 94vw); max-height: 88vh; border-radius: 16px; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .7); background: #fff; }
.pg-lightbox .x { position: absolute; top: 1.2rem; right: 1.4rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); cursor: pointer; }
@keyframes pgFade { from { opacity: 0; } to { opacity: 1; } }

/* ================= ANIMASI ================= */
.js .pg-reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .pg-reveal.in { opacity: 1; transform: none; }
.js .pg-reveal.d1 { transition-delay: .08s; } .js .pg-reveal.d2 { transition-delay: .16s; } .js .pg-reveal.d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .js .pg-reveal { opacity: 1; transform: none; transition: none; } .pg-hero .puz { animation: none; } }