/* Dashboard ahli — design Kama 2026-09-26 ("ada program" / "tiada program").
   Hanya dashboard.html (body.du). Sidebar gelap, topbar dengan nama persatuan,
   halaman Utama baru (kad program, misi, Kad Perantau, persatuan, berita, peniaga).
   Halaman lain dalam dashboard kekal guna portal.css. */

body.du {
  --d-ink: #0E1412;
  --d-ink-2: #26302C;
  --d-meta: #4A5550;
  --d-meta-2: #5B6662;
  --d-meta-3: #6B7571;
  --d-green: #237568;
  --d-green-2: #2c5a43;
  --d-green-deep: #1e4535;
  --d-mint: #74D6BE;
  --d-mint-2: #8FDCC6;
  --d-mint-strong: #4FC1A0;
  --d-mint-bg: #E3F4EE;
  --d-line: #E7F1ED;
  --d-line-2: #E4ECE9;
  --d-dash: #DCE9E4;
  --d-ground: #F4F4F2;
  --d-wa: #1FAF55;
  --d-wa-hover: #23C160;
  --d-display: "Unbounded", "Schibsted Grotesk", system-ui, sans-serif;
  --d-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --d-lift: 0 5px 0 -1px var(--d-mint-2), 0 12px 26px -18px rgba(15, 107, 87, .45);
  --ground: var(--d-ground);
}
body.du .p-app { background: var(--d-ground); }

/* ---------- sidebar gelap (desktop) ---------- */
@media (min-width: 1024px) {
  body.du .p-sidebar { background: var(--d-ink); border-right: 0; color: #fff; font-family: var(--d-sans); }
}
body.du .p-sidebar__head,
body.du button.p-sidebar__head { border-bottom: 1px solid rgba(255, 255, 255, .08); color: #fff; }
body.du button.p-sidebar__head:hover { background: rgba(255, 255, 255, .04); }
body.du .p-sidebar__head .p-logo { background: var(--d-green-2); color: #fff; }
body.du .p-sidebar__brand-name { color: #fff; font-weight: 700; }
body.du .p-sidebar__brand-sub { color: #AEB9B4; }
body.du .p-sidebar .p-navgroup { border-bottom: 1px solid rgba(255, 255, 255, .08); }
body.du .p-sidebar .p-navgroup.is-open { background: #141B19; }
body.du .p-sidebar .p-navitem { color: #C9D2CE; font-family: var(--d-sans); }
body.du .p-sidebar .p-navitem:hover { background: rgba(255, 255, 255, .05); color: #fff; }
body.du .p-sidebar .p-navitem:active { background: rgba(255, 255, 255, .08); }
body.du .p-sidebar .p-navitem--top { color: #fff; font-weight: 600; }
body.du .p-sidebar .p-navitem.is-active,
body.du .p-sidebar .p-navitem[aria-current="page"] { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: inset 3px 0 0 var(--d-mint); }
body.du .p-sidebar .p-nav--sub { border-left: 0; margin-left: 0; }
body.du .p-sidebar .p-nav--sub .p-navitem { padding-left: 60px; color: #C9D2CE; }
body.du .p-sidebar .p-nav--sub .p-navitem::before { content: ""; position: absolute; left: 44px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #56615D; }
body.du .p-sidebar .p-nav--sub .p-navitem.is-active,
body.du .p-sidebar .p-nav--sub .p-navitem[aria-current="page"] { color: var(--d-mint); background: transparent; box-shadow: none; }
body.du .p-sidebar .p-nav--sub .p-navitem.is-active::before,
body.du .p-sidebar .p-nav--sub .p-navitem[aria-current="page"]::before { background: var(--d-mint); }
body.du .p-sidebar .p-nav--sub .p-navitem--soon { color: #7E8A85; }
body.du .p-sidebar .p-soon { color: #7E8A85; }
body.du .p-sidebar .p-navitem__trail, body.du .p-sidebar .p-nav--sub .p-navitem__trail .ti { color: #7E8A85; }
body.du .p-sidebar .p-navgroup--foot { border-top: 1px solid rgba(255, 255, 255, .08); }
body.du .p-sidebar .p-navgroup--foot > .p-navitem--top { color: #E6ECE9; }
body.du .p-sidebar__foot { border-top: 1px solid rgba(255, 255, 255, .08); }
body.du .p-sidebar .p-userpill__name { color: #fff; }
body.du .p-sidebar .p-userpill__sub { color: var(--d-mint); }
body.du .p-sidebar .p-logoutpill { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .22); }
body.du .p-sidebar .p-logoutpill:hover { border-color: var(--d-mint); color: #fff; background: rgba(255, 255, 255, .04); }
body.du .p-sidebar :focus-visible { outline-color: var(--d-mint); }
body.du .p-sidebar .p-navcount { background: var(--d-mint); color: var(--d-ink); }

/* ---------- topbar ---------- */
body.du .p-topbar { font-family: var(--d-sans); }
@media (min-width: 1024px) {
  body.du .p-topbar__name { font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--d-green); }
  body.du .p-topbar__sub { display: none; }
  body.du .p-topbar__logout { display: none; }
}
body.du #rankBadge { background: var(--d-mint-bg); border-color: transparent; color: var(--d-green-deep); font-weight: 700; border-radius: 99px; padding-inline: 14px; }
body.du #rankBadge:hover { background: #D3EEE4; }
body.du #bellBtn { border: 1px solid var(--d-line-2); border-radius: 12px; }

/* ---------- Utama ---------- */
.du-page { font-family: var(--d-sans); color: var(--d-ink); }
.du-page :where(h1, h2, h3, p) { margin: 0; }
.du-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.du-date { font-size: 14.5px; font-weight: 600; color: var(--d-meta-2); }
.du-salam { font-weight: 800; font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.025em; line-height: 1.05; margin-top: 6px !important; }
.du-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1180px) { .du-grid { grid-template-columns: minmax(0, 1fr); } }
.du-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.du-card { background: #fff; border: 1px solid var(--d-line); border-radius: 26px; padding: 28px 30px; min-width: 0; }
@media (max-width: 640px) { .du-card { padding: 22px 18px; border-radius: 22px; } .du-grid, .du-col { gap: 16px; } }
.du-card--lift { box-shadow: var(--d-lift); }
.du-eyebrow { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--d-green); }
.du-h2 { font-weight: 800; font-size: clamp(21px, 2vw, 27px); letter-spacing: -.02em; line-height: 1.15; margin-top: 6px !important; }
.du-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.du-link { font-size: 14.5px; font-weight: 700; color: var(--d-green); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 4px 0; cursor: pointer; font-family: var(--d-sans); }
.du-link:hover { color: var(--d-green-deep); }
.du-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 26px; border-radius: 99px; font-family: var(--d-sans); font-size: 16px; font-weight: 800; line-height: 1.2; cursor: pointer; text-decoration: none; border: 0; transition: background-color .2s, border-color .2s, color .2s; white-space: nowrap; }
.du-btn .ti { font-size: 18px; }
.du-btn--green { background: var(--d-green-2); color: #fff; }
.du-btn--green:hover { background: var(--d-green-deep); color: #fff; }
.du-btn--dark { background: var(--d-ink); color: #fff; }
.du-btn--dark:hover { background: #26302C; color: #fff; }
.du-btn--line { background: #fff; color: var(--d-ink); border: 1.5px solid #D9DEDB; }
.du-btn--line:hover { border-color: var(--d-green); color: var(--d-green); }
.du-btn--mint { background: var(--d-mint); color: #062A22; }
.du-btn--mint:hover { background: #9BE5D2; color: #062A22; }
.du-btn--ghostdark { background: transparent; color: #fff; border: 1.5px solid #3A4541; }
.du-btn--ghostdark:hover { border-color: var(--d-mint); color: #fff; }
.du-btn--wa { background: var(--d-wa); color: #fff; }
.du-btn--wa:hover { background: var(--d-wa-hover); color: #fff; }
.du-btn--sm { min-height: 40px; padding: 9px 18px; font-size: 15px; }
.du-btn:focus-visible, .du-link:focus-visible { outline: 3px solid var(--d-mint-strong); outline-offset: 2px; }
.du-skel { display: block; background: #EEF3F1; border-radius: 10px; }

/* Kad program (ada program) — gelap */
.du-hero { position: relative; overflow: hidden; background: var(--d-ink); color: #fff; border-radius: 28px; padding: 30px 34px; }
.du-hero::after { content: ""; position: absolute; top: 0; right: 0; width: 240px; height: 240px; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 1px, transparent 1px 12px);
  -webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 70%); mask-image: linear-gradient(225deg, #000 20%, transparent 70%); }
@media (max-width: 640px) { .du-hero { padding: 24px 20px; border-radius: 24px; } }
.du-hero > * { position: relative; z-index: 1; }
.du-hero__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.du-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: rgba(116, 214, 190, .16); color: var(--d-mint); font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.du-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--d-mint); }
.du-hero__note { font-size: 14.5px; color: #AEB9B4; }
.du-hero__title { font-weight: 800; font-size: clamp(28px, 3.1vw, 42px); letter-spacing: -.02em; line-height: 1.08; margin-top: 18px !important; max-width: 20ch; text-wrap: balance; overflow-wrap: anywhere; }
.du-hero__meta { margin-top: 14px !important; display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: #E3EAE7; }
.du-hero__meta span { display: inline-flex; align-items: center; gap: 8px; }
.du-hero__meta .ti { color: var(--d-mint); font-size: 17px; }
.du-hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
.du-hero__aksi { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.du-hero__aksi .prog-status { color: #E3EAE7; margin: 0; }
.du-hero__aksi .prog-status .ti { color: var(--d-mint); }
.du-hero__aksi .p-btn { min-height: 48px; border-radius: 99px; padding-inline: 24px; font-family: var(--d-sans); font-weight: 800; }
.du-hero__aksi .p-btn--primary { background: var(--d-mint); color: #062A22; border-color: transparent; }
.du-hero__aksi .p-btn--primary:hover { background: #9BE5D2; }
.du-hero__aksi .p-btn--ghost, .du-hero__aksi .p-btn--secondary { background: transparent; color: #fff; border: 1.5px solid #3A4541; }
.du-hero__aksi .p-btn--ghost:hover, .du-hero__aksi .p-btn--secondary:hover { border-color: var(--d-mint); color: #fff; }
.du-count { display: flex; gap: 12px; }
.du-count__box { min-width: 92px; padding: 14px 10px 10px; border-radius: 18px; background: #1A2320; text-align: center; }
.du-count__n { display: block; font-family: var(--d-display); font-weight: 800; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.du-count__l { display: block; margin-top: 8px; font-size: 13.5px; color: #AEB9B4; }
@media (max-width: 640px) { .du-count { width: 100%; } .du-count__box { flex: 1; min-width: 0; } .du-count__n { font-size: 26px; } }
.du-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); }
@media (max-width: 640px) { .du-hero__stats { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.du-hstat__head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #AEB9B4; }
.du-hstat__head b { color: #fff; font-weight: 700; }
.du-hstat__n { font-family: var(--d-display); font-weight: 800; font-size: 26px; line-height: 1.1; margin-top: 6px; font-variant-numeric: tabular-nums; }
.du-bar { height: 5px; margin-top: 10px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.du-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--d-mint); }
.du-bar--light { background: #E6ECE9; }
.du-bar--light > span { background: var(--d-green-2); }

/* Kad program (tiada program) */
.du-tiada { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
@media (max-width: 760px) { .du-tiada { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.du-tiada__h { font-weight: 800; font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.02em; line-height: 1.12; margin-top: 8px !important; text-wrap: balance; }
.du-tiada__p { font-size: 16.5px; line-height: 1.6; color: var(--d-ink-2); margin: 14px 0 22px !important; text-wrap: pretty; }
.du-lepas { list-style: none; margin: 12px 0 0; padding: 0; }
.du-lepas li { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--d-line-2); }
.du-lepas__d { text-align: center; line-height: 1; }
.du-lepas__d b { display: block; font-family: var(--d-display); font-weight: 800; font-size: 25px; }
.du-lepas__d span { display: block; margin-top: 5px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; color: var(--d-meta); }
.du-lepas__nama { font-weight: 700; font-size: 16px; overflow-wrap: anywhere; }
.du-lepas__sub { font-size: 14px; color: var(--d-meta-2); margin-top: 3px; }
.du-kosong { font-size: 14.5px; color: var(--d-meta-2); padding: 14px 0; border-top: 1px solid var(--d-line-2); margin-top: 12px; }

/* Misi */
.du-misi__count { font-size: 15px; font-weight: 700; color: var(--d-meta); }
.du-misi__list { list-style: none; margin: 16px 0 0; padding: 0; }
.du-misi__row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--d-line-2); }
.du-misi__tick { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #CFD6D3; display: grid; place-items: center; color: #fff; font-size: 16px; }
.du-misi__row.is-siap .du-misi__tick { background: #7FA99B; border-color: #7FA99B; }
.du-misi__t { font-weight: 700; font-size: 16.5px; }
.du-misi__s { font-size: 14px; color: var(--d-meta-2); margin-top: 2px; }
.du-misi__row.is-siap .du-misi__t { text-decoration: line-through; color: var(--d-meta-3); font-weight: 600; }
.du-misi__row.is-siap .du-misi__s { color: #9AA39F; }
.du-misi__pts { font-weight: 800; font-size: 15px; color: var(--d-green); font-variant-numeric: tabular-nums; }
.du-misi__row.is-siap .du-misi__pts { color: #8FB3A7; grid-column: 4; }
@media (max-width: 560px) {
  .du-misi__row { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 10px; }
  .du-misi__row .du-btn { grid-column: 2 / -1; justify-self: start; }
  .du-misi__row.is-siap .du-misi__pts { grid-column: 3; }
}

/* Kad Perantau */
.du-kad { display: flex; flex-direction: column; box-shadow: 0 8px 0 -1px var(--d-mint-strong), 0 30px 60px -32px rgba(15, 107, 87, .45); }
.du-kad__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.du-kad__top .du-eyebrow { white-space: nowrap; }
.du-kad__no { font-family: var(--d-display); font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--d-meta); }
.du-kad__pts { display: flex; align-items: baseline; gap: 10px; margin-top: 16px; }
.du-kad__n { font-family: var(--d-display); font-weight: 900; font-size: clamp(52px, 5vw, 72px); line-height: .9; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.du-kad__unit { font-size: 18px; font-weight: 600; color: var(--d-meta); }
.du-kad__rank { font-weight: 800; font-size: 18px; margin-top: 14px !important; }
.du-kad__meter { margin-top: 12px; }
.du-kad__meter .du-bar { height: 8px; margin-top: 0; }
.du-kad__next { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 14.5px; color: var(--d-meta); }
.du-kad__next b { color: var(--d-ink); }
.du-kad__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
.du-kad__btns .du-btn { border-radius: 16px; padding-inline: 12px; }

/* Persatuan (gelap) */
.du-org { background: var(--d-ink); color: #fff; border-radius: 26px; padding: 24px 26px; }
.du-org__top { display: flex; align-items: center; gap: 14px; min-width: 0; }
.du-org__kod { flex: none; font-family: var(--d-display); font-weight: 900; font-size: 32px; line-height: 1; color: var(--d-mint); }
.du-org__nama { font-weight: 800; font-size: 17px; overflow-wrap: anywhere; }
.du-org__sub { font-size: 14px; color: #AEB9B4; margin-top: 2px; }
.du-org__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.du-org__btns .du-btn { border-radius: 16px; padding-inline: 12px; font-size: 15px; }
.du-org__btns .du-btn:only-child { grid-column: 1 / -1; }

/* Berita */
.du-berita__list { list-style: none; margin: 10px 0 0; padding: 0; }
.du-berita__list button { display: block; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--d-line-2); background: none; text-align: left; cursor: pointer; font-family: var(--d-sans); color: var(--d-ink); }
.du-berita__list button:hover .du-berita__t { color: var(--d-green); }
.du-berita__m { font-size: 13.5px; font-weight: 700; color: var(--d-meta); }
.du-berita__t { font-size: 16px; font-weight: 700; line-height: 1.35; margin-top: 4px; }

/* Peniaga */
.du-peniaga { margin-top: 24px; }
.du-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-top: 20px; }
.du-pcard { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--d-line); border-radius: 18px; box-shadow: var(--d-lift); text-decoration: none; color: var(--d-ink); transition: transform .2s, box-shadow .2s; }
.du-pcard:hover { transform: translateY(-3px); color: var(--d-ink); }
.du-pcard:focus-visible { outline: 3px solid var(--d-green); outline-offset: 3px; }
.du-pcard__img { position: relative; height: 112px; background: repeating-linear-gradient(135deg, #EEF2F0 0 14px, #E6ECE9 14px 28px); display: grid; place-items: center; font-size: 40px; }
.du-pcard__kat { position: absolute; left: 12px; bottom: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--d-meta-3); }
.du-pcard__body { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.du-pcard__n { font-weight: 800; font-size: 16.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-pcard__s { font-size: 14px; color: var(--d-meta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-pcard__foot { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 700; }
.du-pcard__ci { color: var(--d-green); }

/* Ranking sheet */
.du-rank { list-style: none; margin: 0; padding: 0; font-family: var(--d-sans); }
.du-rank li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); }
.du-rank li.is-saya { background: var(--d-mint-bg); border-radius: 12px; border-top-color: transparent; padding-inline: 10px; }
.du-rank__k { font-family: var(--d-display); font-weight: 800; font-size: 15px; text-align: center; color: var(--d-meta); }
.du-rank__n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-rank__s { font-size: 13px; color: var(--d-meta-2); }
.du-rank__p { font-family: var(--d-display); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.du-rank__sep { text-align: center; color: var(--d-meta-3); padding: 4px 0; border-top: 0 !important; display: block !important; }

/* Topbar: nama penuh persatuan di desktop (design), singkatan + kod negeri di telefon */
body.du .p-topbar__full { display: none; }
@media (min-width: 1024px) {
  body.du .p-topbar__full { display: inline; }
  body.du .p-topbar__org, body.du .p-topbar__negeri { display: none !important; }
}

/* Tajuk dalam kad gelap: mengatasi warna h1–h3 global portal.css */
.du-page .du-hero__title, .du-page .du-org__nama { color: #fff; }
.du-count { gap: 10px; }
.du-count__box { min-width: 82px; }

/* ===== Pendaftaran berperingkat (Fasa 1) ===== */
.du-h3 { font-weight: 800; font-size: 20px; letter-spacing: -.015em; line-height: 1.2; }
@media (max-width: 640px) { .du-h3 { font-size: 19px; } }

/* Kad "Lengkapkan profil": meter + baris sama seperti Misi */
.du-lengkap__pct { font-family: var(--d-display); font-weight: 800; font-size: 20px; color: var(--d-green); font-variant-numeric: tabular-nums; }
.du-lengkap__bar { height: 8px; margin-top: 14px; }
.du-lengkap__meta { margin-top: 10px !important; font-size: 14.5px; line-height: 1.5; color: var(--d-meta-2); text-wrap: pretty; }
.du-lengkap__list { margin-top: 10px; }
.du-lengkap__row { grid-template-columns: 30px minmax(0, 1fr) 0 auto; }
.du-lengkap__row.is-pilihan .du-misi__tick { border-style: dashed; }
.du-lengkap__row.is-siap .du-misi__t { text-decoration: none; }
@media (max-width: 640px) {
  .du-lengkap__row { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 0; }
  .du-lengkap__row > span:nth-child(3) { display: none; }
  .du-lengkap__row .du-btn { grid-column: auto; justify-self: end; }
}

/* Panel "Keahlian komuniti" */
.du-ahli .du-cardhead { align-items: center; }
.du-ahli .p-tag .ti { font-size: 15px; }
.du-ahli__kumpulan { margin-top: 6px !important; font-size: 14.5px; font-weight: 600; color: var(--d-meta); }
.du-ahli__body { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.du-ahli__p { font-size: 15.5px; line-height: 1.55; color: var(--d-ink-2); text-wrap: pretty; }
.du-ahli__nota { font-size: 13.5px; color: var(--d-meta-2); margin-top: -2px !important; }
.du-ahli__nolabel { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--d-meta-2); }
.du-ahli__no { font-family: var(--d-display); font-weight: 800; font-size: 30px; line-height: 1; letter-spacing: .01em; color: var(--d-ink); margin-top: -6px !important; font-variant-numeric: tabular-nums; }
.du-ahli__sebab { width: 100%; padding: 12px 14px; border-radius: 14px; background: var(--danger-bg); color: var(--danger); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.du-ahli__sebab-h { font-size: 13px; font-weight: 700; margin-bottom: 2px !important; }
.du-ahli .du-btn { white-space: normal; text-align: center; }

/* Sheet syarat (p-sheet) */
.sy-body { display: flex; flex-direction: column; gap: var(--sp-20); }
.sy-body > * { flex-shrink: 0; }
.sy-body [hidden] { display: none !important; }
.sy-terbit { margin-top: var(--sp-4); font-weight: var(--fw-medium); color: var(--ink-2); }
.sy-kunci { display: flex; gap: var(--sp-12); align-items: flex-start; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--panel); }
.sy-kunci__icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.sy-kunci__label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--ink-2); }
.sy-kunci__nilai { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); letter-spacing: .02em; }
.sy-kunci .p-help { margin-top: 2px; }
.sy-pasangan { margin: 0; padding: var(--sp-12) var(--sp-16) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--ground); min-width: 0; }
.sy-pasangan legend { padding: 0 var(--sp-4); }
.sy-pasangan .p-form-row { margin-top: var(--sp-12); }
.sy-alamat { display: flex; flex-direction: column; gap: var(--sp-16); }
.sy-poskodline { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--ink-2); }
.sy-terma { align-items: flex-start; padding: var(--sp-12) var(--sp-16); border: 1px solid var(--line); border-radius: var(--r-control); }
.sy-terma .p-link { font-size: inherit; }
#sheetSyarat .p-sheet__foot .p-notice { margin-bottom: var(--sp-12); }

/* ===== Sertai Komuniti PERANTAU (BRIEF-2) ===== */
/* Kad ajakan di atas Utama: hijau pudar, slot nombor kosong menunggu diisi */
.du-sertai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 28px; align-items: center; margin-bottom: 24px;
  background: var(--d-mint-bg); border: 1px solid #CBE9DE; border-radius: 26px; padding: 28px 30px; color: var(--d-ink); }
.du-sertai[hidden] { display: none; }
.du-sertai__h { font-family: var(--d-display); font-weight: 800; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.02em; line-height: 1.12; color: var(--d-green-deep); text-wrap: balance; }
.du-sertai__p { margin-top: 10px !important; font-size: 16px; line-height: 1.55; color: var(--d-ink-2); max-width: 56ch; text-wrap: pretty; }
.du-sertai .du-btn { margin-top: 20px; }
.du-sertai__slot, .ajak__slot { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 2px dashed var(--d-mint-strong); border-radius: 18px; min-width: 0; }
.du-sertai__slotlbl { font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--d-green); }
.du-sertai__slotno { font-family: var(--d-display); font-weight: 800; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.1; letter-spacing: .01em; color: var(--d-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.du-sertai__titik { color: #9FCFC0; letter-spacing: .08em; }
.du-sertai__slotnota { font-size: 14px; color: var(--d-meta-2); }
@media (max-width: 760px) {
  .du-sertai { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 18px; border-radius: 22px; margin-bottom: 16px; }
  .du-sertai__slot { order: -1; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; padding: 14px 16px; }
  .du-sertai__slotlbl { flex-basis: 100%; }
  .du-sertai .du-btn { margin-top: 16px; width: 100%; }
}

/* Kad Perantau: belum sertai → butang kecil di tempat nombor */
.du-kad__belum { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 12px; border-radius: 99px; border: 1.5px dashed var(--d-mint-strong); background: #fff;
  font-family: var(--d-sans); font-size: 13.5px; font-weight: 700; color: var(--d-green); cursor: pointer; transition: background-color .2s, border-color .2s; white-space: nowrap; }
.du-kad__belum:hover { background: var(--d-mint-bg); border-style: solid; }
.du-kad__belum:focus-visible { outline: 3px solid var(--d-mint-strong); outline-offset: 2px; }
.du-kad__belum .ti { font-size: 15px; }
.du-kad__belum[hidden] { display: none; }

/* Borang Sertai: pratonton kumpulan ikut poskod */
.sy-poskod { max-width: 180px; font-size: var(--fs-18, 18px); letter-spacing: .08em; }
.sy-kumpulan { margin-top: var(--sp-12); padding: var(--sp-12) var(--sp-16); border-radius: var(--r-control); background: #E3F4EE; color: #08463A; display: flex; flex-direction: column; gap: 2px; }
.sy-kumpulan[hidden] { display: none; }
.sy-kumpulan__tempat { font-size: var(--fs-14); color: #2E6B5A; }
.sy-kumpulan__nama { display: flex; align-items: center; gap: 6px; font-size: var(--fs-16); font-weight: 700; overflow-wrap: anywhere; }
.sy-kumpulan__nama .ti { font-size: 16px; flex: none; }
.sy-kumpulan__no { font-size: var(--fs-13); color: #2E6B5A; margin-top: 4px; }
.sy-kumpulan.is-muat { background: var(--panel); color: var(--ink-2); font-size: var(--fs-14); }
.sy-kumpulan.is-ralat { background: var(--danger-bg); color: var(--danger); font-size: var(--fs-14); }

/* Sheet ajakan */
.ajak { display: flex; flex-direction: column; gap: var(--sp-16); }
.ajak__title { font-family: "Unbounded", "Schibsted Grotesk", system-ui, sans-serif; letter-spacing: -.015em; }
.ajak__slot { border-color: #4FC1A0; }
.ajak__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ajak__list li { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-15, 15px); color: var(--ink-2); line-height: 1.45; }
.ajak__list .ti { color: #0F6B57; font-size: 18px; flex: none; margin-top: 1px; }

/* Detik berjaya: nombor dicetak ke kad */
.jaya { display: flex; flex-direction: column; gap: var(--sp-16); }
.jaya__kad { position: relative; overflow: hidden; background: #0E1412; color: #fff; border-radius: 20px; padding: 22px 22px 20px;
  box-shadow: 0 6px 0 -1px #4FC1A0, 0 24px 40px -28px rgba(15, 107, 87, .6); }
.jaya__kad::after { content: ""; position: absolute; top: 0; right: 0; width: 160px; height: 160px; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 1px, transparent 1px 11px);
  -webkit-mask-image: linear-gradient(225deg, #000 20%, transparent 70%); mask-image: linear-gradient(225deg, #000 20%, transparent 70%); }
.jaya__lbl { position: relative; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #74D6BE; }
.jaya__no { position: relative; margin: 8px 0 0; font-family: "Unbounded", "Schibsted Grotesk", system-ui, sans-serif; font-weight: 900; font-size: clamp(34px, 9vw, 46px); line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: #fff; overflow-wrap: anywhere; }
.jaya__no--teks { font-size: 20px; font-weight: 800; line-height: 1.3; letter-spacing: 0; }
.jaya__org { position: relative; margin: 12px 0 0; font-size: 15px; color: #C9D2CE; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  #sheetSertaiJaya[open] .jaya__no { animation: jaya-cetak .9s cubic-bezier(.16, 1, .3, 1) .15s both; }
}
@keyframes jaya-cetak {
  from { clip-path: inset(0 100% 0 0); filter: blur(6px); transform: translateY(4px); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); transform: none; }
}