/* Halaman awam: nav, footer, Home, Gallery, Project, Committee, Panelists. Tema terang; warna neon bukan warna teks. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lead { font-size: 1.125rem; color: var(--ink-2); max-width: 60ch; }
.section { padding-block: 2.5rem; scroll-margin-top: 5rem; }
.page-head { padding-block: 3rem 1.5rem; }
.no-scroll { overflow: hidden; }
[hidden] { display: none !important; }

/* ---- Nav ---- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--surface-strong); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.nav__bar { width: min(1160px, 100% - 2rem); margin-inline: auto; display: flex; align-items: center; gap: 1rem; min-height: 64px; }
.nav__brand { display: inline-flex; align-items: center; min-height: var(--tap); }
.nav__brand img { height: 44px; width: auto; }
.nav__pill { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .7rem; border-radius: 999px; border: 1px solid var(--border); font: 500 .75rem var(--font-mono); color: #0B6B45; background: #fff; }
.nav__pill i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.nav__links { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.nav__links a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 .8rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav__links a:not(.btn):hover { background: rgba(47, 91, 234, .08); }
.nav__links a[aria-current="page"] { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; }
.nav__burger { display: none; min-width: var(--tap); min-height: var(--tap); border: 1px solid var(--border); border-radius: 12px; background: #fff; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
@media (max-width: 960px) {
  .nav__pill { display: none; }
  .lang-toggle { margin-left: auto; }
  .nav__burger { display: inline-flex; align-items: center; justify-content: center; }
  .nav__bar { flex-wrap: wrap; }
  .nav__links { display: none; order: 9; flex-basis: 100%; flex-direction: column; align-items: stretch; margin: 0; padding-bottom: .75rem; }
  .js .nav--open .nav__links, .nav__links:target { display: flex; }
  .nav__links a:not(.btn) { padding: 0 1rem; }
  .nav__login { width: 100%; margin-top: .5rem; }
}
/* Tanpa JS: menu sentiasa kelihatan pada skrin kecil */
html:not(.js) .nav__links { display: flex; }
html:not(.js) .nav__burger { display: none; }

/* ---- Footer ---- */
.footer { margin-top: 4rem; padding: 2.5rem 0 5rem; background: linear-gradient(180deg, transparent, rgba(47, 91, 234, .06)); border-top: 1px solid var(--border); }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__logo, .footer__mara { height: 48px; width: auto; }
.footer__org { margin: 0; text-align: center; color: var(--ink-2); }
.footer__org strong { color: var(--ink); }
.footer__copy { text-align: center; color: var(--ink-2); font: 400 .8rem var(--font-mono); margin: 1.5rem 0 0; }
@media (max-width: 960px) { .footer__inner { flex-direction: column; } }
.totop { position: fixed; right: 1rem; bottom: 1rem; z-index: 40; width: 56px; height: 56px; border-radius: 50%; border: 0; padding: 0; background: #fff; box-shadow: var(--shadow); cursor: pointer; color: var(--ink); }
.totop svg { position: absolute; inset: 4px; width: 48px; height: 48px; transform: rotate(-90deg); }
.totop circle { fill: none; stroke-width: 3; }
.totop__track { stroke: var(--border); }
.totop__ring { stroke: var(--blue); stroke-linecap: round; }
.totop__icon { position: absolute; inset: 0; display: grid; place-items: center; font-size: .9rem; transition: opacity .2s; }
.totop__label { position: absolute; inset: 0; display: grid; place-items: center; font: 600 .7rem var(--font-mono); opacity: 0; transition: opacity .2s; }
.totop:hover .totop__icon, .totop:focus-visible .totop__icon { opacity: 0; }
.totop:hover .totop__label, .totop:focus-visible .totop__label { opacity: 1; }

/* ---- Home ---- */
.hero__cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-block: 1.25rem; }
.stats { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.stats li { display: flex; flex-direction: column; gap: .25rem; }
.stats b { font: 700 2.25rem var(--font-head); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats span { color: var(--ink-2); font-size: .9rem; }
@media (max-width: 640px) { .stats { grid-template-columns: repeat(2, 1fr); } .stats li { aspect-ratio: 1 / 1; justify-content: center; align-items: center; text-align: center; } }

.orbit { list-style: none; padding: 0; margin: 1.25rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.orbit__node { display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: .6rem 1rem; border-radius: var(--r-md); background: var(--surface-strong); border: 2px solid var(--border); color: var(--ink); text-decoration: none; font-weight: 600; }
.orbit__node small { font-weight: 400; color: var(--ink-2); }
.orbit__node[aria-pressed="true"] { border-color: var(--tile-c, var(--blue)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tile-c, var(--blue)) 25%, transparent); }
.preview-h { margin-top: 1.5rem; }

.timeline { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.75rem; border-left: 2px solid var(--border); display: grid; gap: 1rem; }
.timeline__item { position: relative; display: grid; gap: .35rem; }
.timeline__dot { position: absolute; left: calc(-1.75rem - 7px); top: .3rem; width: 12px; height: 12px; border-radius: 50%; background: var(--grad); }
.timeline__item h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.timeline__item p { margin: 0; }
.links2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.linkcard { text-decoration: none; color: var(--ink); min-height: 96px; }
.linkcard h3 { margin: 0 0 .25rem; }
@media (max-width: 640px) { .links2 { grid-template-columns: 1fr; } }

/* ---- Jubin projek (gradien mengikut tema dan kod; tiada ilustrasi berulang) ---- */
.tile--t0 { --tile-c: #0A7E8F; --tile-d: #12A36B; } .tile--t1 { --tile-c: #C0392B; --tile-d: #7B4DF0; }
.tile--t2 { --tile-c: #B45309; --tile-d: #D49A12; } .tile--t3 { --tile-c: #2F5BEA; --tile-d: #0891B2; }
.tile--t4 { --tile-c: #12846A; --tile-d: #2F5BEA; } .tile--t5 { --tile-c: #7B4DF0; --tile-d: #2F5BEA; }
.tile--t6 { --tile-c: #3A8A1E; --tile-d: #0A7E8F; } .tile--t7 { --tile-c: #4A3FA0; --tile-d: #0891B2; }
.tile--t8 { --tile-c: #334A7A; --tile-d: #7B4DF0; }
.tile--v0 { --tile-a: 135deg; } .tile--v1 { --tile-a: 200deg; } .tile--v2 { --tile-a: 60deg; } .tile--v3 { --tile-a: 160deg; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-block: 1rem; }
.pgrid--mini { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.pcard { display: flex; flex-direction: column; border-radius: var(--r-md); background: var(--surface-strong); border: 1px solid var(--border); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .15s; }
.pcard:hover { transform: translateY(-2px); }
.pcard__tile { display: flex; align-items: flex-end; min-height: 96px; padding: .75rem 1rem; background: linear-gradient(var(--tile-a, 135deg), var(--tile-c, var(--blue)), var(--tile-d, var(--violet))); }
.pcard__code { font: 500 .875rem var(--font-mono); color: #fff; background: rgba(11, 27, 63, .55); padding: .15rem .6rem; border-radius: 999px; }
.pcard__body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; }
.pcard__title { font: 600 1rem/1.35 var(--font-head); }
.pcard__meta { color: var(--ink-2); font-size: .85rem; }
.pgrid--list { grid-template-columns: 1fr; }
.pgrid--list .pcard { flex-direction: row; align-items: stretch; }
.pgrid--list .pcard__tile { min-width: 130px; min-height: 0; }

/* ---- Gallery ---- */
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.toolbar .field { margin: 0; }
.field--grow { flex: 1 1 260px; }
.field--search { max-width: 420px; }
.filters-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; }
.filters-btn, .viewtoggle { display: none; }
.viewtoggle { gap: .5rem; }
.js .viewtoggle { display: flex; }
.viewtoggle [aria-pressed="true"] { background: var(--ink); color: #fff; }
.badge { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; margin-left: .4rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: .75rem; }
@media (max-width: 960px) {
  .js .filters-btn { display: inline-flex; }
  .js .filters-panel { display: none; width: 100%; display: none; grid-template-columns: repeat(2, 1fr); }
  .js .filters-panel--open { display: grid; }
  .js .filters-panel .field { min-width: 0; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .pgrid--list { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .pgrid:not(.pgrid--list) { grid-template-columns: 1fr; } .pgrid:not(.pgrid--list) .pcard__tile { min-height: 72px; } }
#g-sentinel { height: 1px; }

/* ---- Project detail ---- */
.project { padding-block: 1.5rem; }
.project__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2rem; align-items: start; }
@media (max-width: 960px) { .project__cols { grid-template-columns: 1fr; } }
.poster { width: 100%; border-radius: var(--r-md); border: 1px solid var(--border); background: #fff; }
.poster--none { display: grid; place-items: center; aspect-ratio: 3 / 4; background: linear-gradient(var(--tile-a, 135deg), var(--tile-c), var(--tile-d)); }
.poster--none span { background: rgba(11, 27, 63, .65); color: #fff; padding: .5rem 1rem; border-radius: 999px; }
.spec { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1.25rem; margin: 0 0 1.5rem; }
.spec dt { color: var(--ink-2); font-size: .9rem; }
.spec dd { margin: 0; overflow-wrap: anywhere; }
.tabs__list { display: flex; gap: .5rem; margin-bottom: .75rem; overflow-x: auto; }
.tabs__list [role="tab"] { min-height: var(--tap); padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-strong); color: var(--ink); font: 600 .95rem var(--font-body); cursor: pointer; white-space: nowrap; }
.tabs__list [aria-selected="true"] { background: var(--ink); color: #fff; }
html:not(.js) .tabs__list { display: none; }
.js .tabs__nojs { display: none; }
.tabs__panel { margin-bottom: 1rem; }
.tabs__panel p { margin: 0 0 .75rem; }

/* ---- Committee + Panelists ---- */
.cgroup { margin-block: 2rem; }
.cgroup__name { font-size: 1.15rem; padding-bottom: .5rem; border-bottom: 2px solid var(--border); }
.people { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.person { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; font: inherit; color: var(--ink); width: 100%; }
button.person { cursor: pointer; min-height: var(--tap); }
button.person[aria-expanded="true"] { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(47, 91, 234, .2); }
.person__name { font: 600 1rem var(--font-head); }
.person__role { font-size: .875rem; }
.avatar { display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; overflow: hidden; background: var(--grad); color: #fff; font: 700 1.6rem var(--font-head); }
.avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.avatar--lg { width: 140px; height: 140px; }
.panelists__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 2rem; align-items: start; }
.panelists .people { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.profile { position: sticky; top: 5rem; padding: 1.5rem; border-radius: var(--r-md); background: var(--surface-strong); border: 1px solid var(--border); box-shadow: var(--shadow); }
.profile__close { position: absolute; top: .5rem; right: .5rem; font-size: 1.5rem; padding: 0; display: none; }
.profile__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.profile__item h2 { font-size: 1.25rem; margin-top: 1rem; }
.profile__item .spec { text-align: left; }
.profile--has .profile__hint { display: none; }
html:not(.js) .profile__item { display: flex; }
@media (max-width: 960px) {
  .panelists__layout { grid-template-columns: 1fr; }
  .js .profile { position: fixed; left: 0; right: 0; bottom: 0; top: auto; max-height: 80vh; overflow-y: auto; z-index: 70; border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(105%); transition: transform .25s; visibility: hidden; }
  .js .profile--open { transform: none; visibility: visible; }
  .js .profile__close { display: inline-flex; }
  .js .profile__hint { display: none; }
  .sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(11, 27, 63, .45); }
}
@media (max-width: 960px) { .people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .people { grid-template-columns: 1fr; } }