/* ==========================================================================
   Azadel Community v2.0 — App Shell
   Dokumen ini berdiri sendiri. Tiada CSS Enfold dimuatkan pada halaman ini.
   Breakpoint milik ACM sendiri (bukan 959px Enfold).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Token
   -------------------------------------------------------------------------- */
:root {
	--acm-brand: #0095d3;
	--acm-brand-soft: #0095d31a;
	--acm-brand-dark: #007bb0;
	--acm-emas: #ffb800;
	--acm-emas-dark: #e8a800;

	--acm-bg: #f4f5f7;
	--acm-surface: #ffffff;
	--acm-surface-2: #fafbfc;
	--acm-border: #e3e5e8;
	--acm-border-kuat: #d2d6db;

	--acm-teks: #14171a;
	--acm-teks-2: #5b6470;
	--acm-teks-3: #8b94a0;

	--acm-hijau: #16a34a;
	--acm-merah: #dc2626;
	--acm-amber: #d97706;

	--acm-r-sm: 6px;
	--acm-r: 10px;
	--acm-r-lg: 14px;
	--acm-r-full: 999px;

	--acm-shadow: 0 1px 2px rgba(16,24,40,.05);
	--acm-shadow-md: 0 4px 12px rgba(16,24,40,.08);
	--acm-shadow-lg: 0 12px 32px rgba(16,24,40,.14);

	--acm-topbar-h: 58px;
	--acm-nav-h: 46px;
	--acm-maks: 1120px;
	--acm-maks-lebar: 1400px;

	--acm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	            'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html.acm-html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body.acm-body {
	margin: 0;
	padding: 0;
	font-family: var(--acm-font);
	font-size: 15px;
	line-height: 1.55;
	color: var(--acm-teks);
	background: var(--acm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

/* ⚠️ SETIAP peraturan reset di bawah dibalut :where() — keistimewaan sifar.
   Tanpa ini `.acm-body a` (0,1,1) mengatasi setiap kelas komponen (0,1,0):
   tab nav bertukar biru, <button> kehilangan padding, avatar kehilangan tinggi.
   Dengan :where(), mana-mana kelas komponen sentiasa menang. */

:where(.acm-body h1, .acm-body h2, .acm-body h3,
       .acm-body h4, .acm-body h5, .acm-body h6) {
	margin: 0;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.011em;
	color: var(--acm-teks);
}
:where(.acm-body h1) { font-size: 26px; }
:where(.acm-body h2) { font-size: 20px; }
:where(.acm-body h3) { font-size: 16px; }
:where(.acm-body h4) { font-size: 15px; }

:where(.acm-body p) { margin: 0 0 12px; }
:where(.acm-body p:last-child) { margin-bottom: 0; }

:where(.acm-body a) { color: var(--acm-brand); text-decoration: none; }
:where(.acm-body a:hover) { text-decoration: underline; }
.acm-body a { text-decoration: none; }

:where(.acm-body img, .acm-body video, .acm-body iframe) { max-width: 100%; }
:where(.acm-body img) { height: auto; border: 0; }

:where(.acm-body ul, .acm-body ol) { margin: 0 0 12px; padding-left: 20px; }

:where(.acm-body button, .acm-body input, .acm-body select, .acm-body textarea) {
	font: inherit;
	color: inherit;
	margin: 0;
}
:where(.acm-body button) { cursor: pointer; background: none; border: 0; padding: 0; }
.acm-body button { cursor: pointer; }

:where(.acm-body hr) { border: 0; border-top: 1px solid var(--acm-border); margin: 18px 0; }

.acm-body :focus-visible {
	outline: 2px solid var(--acm-brand);
	outline-offset: 2px;
	border-radius: 3px;
}

.acm-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--acm-surface); padding: 10px 16px; border-radius: 0 0 var(--acm-r) 0;
	box-shadow: var(--acm-shadow-md);
}
.acm-skip:focus { left: 0; }

/* ⚠️ Peraturan pelayar untuk [hidden] ialah `display:none` dalam helaian UA —
   sebarang peraturan penulis yang menetapkan `display` (contoh .acm-btn) akan
   mengatasinya, dan elemen tersembunyi tetap kelihatan. Kunci di sini. */
.acm-body [hidden] { display: none !important; }

.acm-app { display: flex; flex-direction: column; min-height: 100vh; }

/* --------------------------------------------------------------------------
   3. Ikon (mask SVG — tiada fail luar)
   -------------------------------------------------------------------------- */
[class^="acm-ico-"], [class*=" acm-ico-"] {
	display: inline-block;
	width: 18px; height: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center;  mask-position: center;
	-webkit-mask-size: contain;     mask-size: contain;
	vertical-align: -3px;
}
.acm-ico-search  { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.acm-ico-bell    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.7 21a2 2 0 0 1-3.4 0'/%3E%3C/svg%3E"); }
.acm-ico-grid    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
.acm-ico-cog     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 9 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 9a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-1.8-.3 1.6 1.6 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 9 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0 .3-1.8 1.6 1.6 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 4.6 9a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.6 1.6 0 0 0 1.8.3H9a1.6 1.6 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 1 1.5 1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0-.3 1.8V9a1.6 1.6 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z'/%3E%3C/svg%3E"); }
.acm-ico-user    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E"); }
.acm-ico-users   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5.2a3.5 3.5 0 0 1 0 5.6M17.5 14.3A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20a6.5 6.5 0 0 1 13 0'/%3E%3Cpath d='M16 5.2a3.5 3.5 0 0 1 0 5.6M17.5 14.3A6.5 6.5 0 0 1 21.5 20'/%3E%3C/svg%3E"); }
.acm-ico-out     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3M10 17l-5-5 5-5M5 12h11'/%3E%3C/svg%3E"); }
.acm-ico-check   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12.5 5.5 5.5L20 6.5'/%3E%3C/svg%3E"); }
.acm-ico-lock    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.acm-ico-play    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); }
.acm-ico-plus    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.acm-ico-heart   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20s-7-4.4-7-9.3A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7 2.7C19 15.6 12 20 12 20z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 20s-7-4.4-7-9.3A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7 2.7C19 15.6 12 20 12 20z'/%3E%3C/svg%3E"); }
.acm-ico-heart-isi { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 20s-7-4.4-7-9.3A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7 2.7C19 15.6 12 20 12 20z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 20s-7-4.4-7-9.3A4.2 4.2 0 0 1 12 8a4.2 4.2 0 0 1 7 2.7C19 15.6 12 20 12 20z'/%3E%3C/svg%3E"); }
.acm-ico-chat    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M20 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.acm-ico-pin     { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3h6l-1 6 4 3v2H6v-2l4-3z'/%3E%3Cpath d='M12 14v7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 3h6l-1 6 4 3v2H6v-2l4-3z'/%3E%3Cpath d='M12 14v7'/%3E%3C/svg%3E"); }
.acm-ico-image   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m4 18 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='8.5' cy='9.5' r='1.6'/%3E%3Cpath d='m4 18 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); }
.acm-ico-dots    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E"); }
.acm-ico-kiri    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); }
.acm-ico-kanan   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); }
.acm-ico-kalendar{ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.acm-ico-buku    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M6 19h13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M6 19h13'/%3E%3C/svg%3E"); }
.acm-ico-kotak   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.acm-ico-luar   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); }
.acm-ico-trofi   { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M7 4h10v6a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3M9 20h6M12 15v5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M7 4h10v6a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4v2a3 3 0 0 0 3 3M17 6h3v2a3 3 0 0 1-3 3M9 20h6M12 15v5'/%3E%3C/svg%3E"); }
.acm-ico-tong    { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M9 7V5h6v2M6 7l1 13h10l1-13'/%3E%3C/svg%3E"); }
.acm-ico-x       { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

.acm-caret {
	width: 0; height: 0; flex: 0 0 auto;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid var(--acm-teks-3);
	margin-left: 2px;
}

/* --------------------------------------------------------------------------
   4. Topbar
   -------------------------------------------------------------------------- */
.acm-topbar {
	position: sticky; top: 0; z-index: 900;
	background: var(--acm-surface);
	border-bottom: 1px solid var(--acm-border);
	height: var(--acm-topbar-h);
}
.acm-topbar__in {
	max-width: var(--acm-maks);
	margin: 0 auto;
	height: 100%;
	padding: 0 18px;
	display: flex; align-items: center; gap: 14px;
}

.acm-brand { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; color: var(--acm-teks); }
.acm-brand:hover { text-decoration: none; opacity: .85; }
.acm-brand__mark {
	width: 26px; height: 26px; border-radius: 7px;
	background: linear-gradient(135deg, var(--acm-brand), var(--acm-brand-dark));
	flex: 0 0 auto;
}
.acm-brand__text { font-weight: 700; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }

/* Logo imej menggantikan petak + teks sepenuhnya */
.acm-brand--imej { gap: 0; }
.acm-brand__logo {
	display: block;
	height: 30px; width: auto; max-width: 170px;
	object-fit: contain;
}

.acm-switcher { position: relative; flex: 0 0 auto; }
.acm-switcher__btn {
	display: flex; align-items: center; gap: 8px;
	padding: 6px 10px; border-radius: var(--acm-r);
	border: 1px solid var(--acm-border);
	background: var(--acm-surface);
	max-width: 260px;
	transition: background .12s, border-color .12s;
}
.acm-switcher__btn:hover { background: var(--acm-surface-2); border-color: var(--acm-border-kuat); }
.acm-switcher__name {
	font-weight: 600; font-size: 14px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acm-search {
	flex: 1 1 auto; max-width: 420px;
	position: relative; display: flex; align-items: center;
}
.acm-search .acm-ico-search {
	position: absolute; left: 11px; color: var(--acm-teks-3); pointer-events: none;
}
.acm-search input {
	width: 100%;
	height: 36px;
	padding: 0 12px 0 35px;
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r-full);
	background: var(--acm-surface-2);
	font-size: 14px;
	transition: border-color .12s, background .12s;
}
.acm-search input:focus { outline: none; border-color: var(--acm-brand); background: var(--acm-surface); }
.acm-search input::-webkit-search-cancel-button { cursor: pointer; }

.acm-search__status {
	position: absolute; right: 12px; display: inline-flex; pointer-events: none;
}
/* Panel hasil carian segera */
.acm-search__panel {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
	max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
	padding: 6px;
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r);
	box-shadow: var(--acm-shadow-md);
}
.acm-cari__label {
	padding: 8px 10px 4px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--acm-teks-3);
}
.acm-cari__item {
	display: flex; align-items: center; gap: 10px;
	padding: 8px 10px; border-radius: var(--acm-r-sm);
	color: var(--acm-teks); font-size: 14px;
}
.acm-cari__item:hover, .acm-cari__item.is-fokus {
	background: var(--acm-brand-soft); text-decoration: none;
}
.acm-cari__item [class^="acm-ico-"] { color: var(--acm-teks-3); }
.acm-cari__teks { min-width: 0; flex: 1 1 auto; }
.acm-cari__tajuk {
	display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acm-cari__nota { display: block; font-size: 12px; color: var(--acm-teks-3); }
.acm-cari__kosong { padding: 16px 10px; text-align: center; color: var(--acm-teks-3); font-size: 13.5px; }

.acm-topbar__kanan { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.acm-ikonbtn {
	position: relative;
	width: 36px; height: 36px; border-radius: var(--acm-r-full);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--acm-teks-2);
	transition: background .12s, color .12s;
}
.acm-ikonbtn:hover { background: var(--acm-surface-2); color: var(--acm-teks); }
.acm-ikonbtn [class^="acm-ico-"] { width: 20px; height: 20px; }

.acm-dot {
	position: absolute; top: 2px; right: 0;
	min-width: 17px; height: 17px; padding: 0 4px;
	border-radius: var(--acm-r-full);
	background: var(--acm-merah); color: #fff;
	font-size: 10px; font-weight: 700; line-height: 17px; text-align: center;
	border: 2px solid var(--acm-surface);
	box-sizing: content-box;
}

.acm-avatarbtn { width: 34px; height: 34px; border-radius: var(--acm-r-full); overflow: hidden; display: block; }
.acm-avatarbtn img { width: 34px; height: 34px; object-fit: cover; border-radius: var(--acm-r-full); display: block; }
.acm-akaun, .acm-notif { position: relative; }

/* --------------------------------------------------------------------------
   5. Menu jatuh
   -------------------------------------------------------------------------- */
.acm-menu {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
	min-width: 258px; max-width: 320px;
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r-lg);
	box-shadow: var(--acm-shadow-lg);
	padding: 6px;
	max-height: min(70vh, 520px);
	overflow-y: auto;
	animation: acm-turun .12s ease-out;
}
.acm-menu[hidden] { display: none; }
.acm-menu--switcher { left: 0; right: auto; }
.acm-menu--notif { min-width: 330px; }

@keyframes acm-turun {
	from { opacity: 0; transform: translateY(-5px); }
	to   { opacity: 1; transform: none; }
}

.acm-menu__label {
	font-size: 11px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .05em; color: var(--acm-teks-3);
	padding: 8px 10px 6px;
}
.acm-menu__item {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: var(--acm-r-sm);
	color: var(--acm-teks); font-size: 14px; font-weight: 500;
	transition: background .1s;
}
.acm-menu__item:hover { background: var(--acm-surface-2); text-decoration: none; }
/* Sesetengah item menu ialah <button> (contoh: suis Mod Pentadbir), bukan <a>.
   Reset :where() membuang padding butang, jadi kembalikan lebar & jajaran. */
button.acm-menu__item { width: 100%; text-align: left; font-family: inherit; padding: 9px 10px; }
.acm-menu__item.is-current { background: var(--acm-brand-soft); color: var(--acm-brand-dark); font-weight: 600; }
.acm-menu__item [class^="acm-ico-"] { color: var(--acm-teks-3); }
.acm-menu__item span:not([class]) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acm-menu__pisah { height: 1px; background: var(--acm-border); margin: 6px 4px; }
.acm-menu__kosong { padding: 14px 10px; color: var(--acm-teks-3); font-size: 13px; text-align: center; }
.acm-menu__kepala {
	display: flex; gap: 10px; align-items: center;
	padding: 10px; margin-bottom: 4px;
	border-bottom: 1px solid var(--acm-border);
}
.acm-menu__kepala img { border-radius: var(--acm-r-full); }
.acm-menu__kepala div { min-width: 0; }
.acm-menu__kepala strong { display: block; font-size: 14px; }
.acm-menu__kepala span {
	display: block; font-size: 12px; color: var(--acm-teks-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acm-notif__isi .acm-notif-item {
	display: flex; gap: 10px; padding: 10px;
	border-radius: var(--acm-r-sm); font-size: 13.5px; line-height: 1.45;
	color: var(--acm-teks);
}
.acm-notif__isi .acm-notif-item:hover { background: var(--acm-surface-2); text-decoration: none; }
.acm-notif__isi .acm-notif-item.is-unread { background: var(--acm-brand-soft); }
.acm-notif__isi .acm-notif-item time { display: block; font-size: 11.5px; color: var(--acm-teks-3); margin-top: 2px; }

/* --------------------------------------------------------------------------
   6. Nav community
   -------------------------------------------------------------------------- */
.acm-groupnav {
	position: sticky; top: var(--acm-topbar-h); z-index: 880;
	background: var(--acm-surface);
	border-bottom: 1px solid var(--acm-border);
}
.acm-groupnav__in {
	max-width: var(--acm-maks);
	margin: 0 auto; padding: 0 18px;
	display: flex; gap: 2px;
	height: var(--acm-nav-h);
	overflow-x: auto;
	scrollbar-width: none;
}
.acm-groupnav__in::-webkit-scrollbar { display: none; }
.acm-groupnav__item {
	display: inline-flex; align-items: center;
	padding: 0 14px; white-space: nowrap;
	font-size: 14px; font-weight: 600; color: var(--acm-teks-2);
	border-bottom: 2px solid transparent;
	transition: color .12s, border-color .12s;
}
.acm-groupnav__item:hover { color: var(--acm-teks); text-decoration: none; }
.acm-groupnav__item.is-active { color: var(--acm-teks); border-bottom-color: var(--acm-teks); }

/* --------------------------------------------------------------------------
   7. Susun atur
   -------------------------------------------------------------------------- */
.acm-main { flex: 1 0 auto; padding: 22px 0 46px; }

.acm-wrap {
	max-width: var(--acm-maks);
	margin: 0 auto;
	padding: 0 18px;
}
.acm-wrap--sempit { max-width: 720px; }
.acm-wrap--lebar  { max-width: var(--acm-maks-lebar); }
.acm-wrap--belajar { max-width: var(--acm-maks); }

.acm-kolum {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 328px;
	gap: 22px;
	align-items: start;
}
.acm-kolum__sisi { position: sticky; top: calc(var(--acm-topbar-h) + var(--acm-nav-h) + 18px); display: grid; gap: 14px; }

.acm-tindanan { display: grid; gap: 14px; }

/* --------------------------------------------------------------------------
   8. Kad & butang
   -------------------------------------------------------------------------- */
.acm-kad {
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r-lg);
	box-shadow: var(--acm-shadow);
}
.acm-kad__isi { padding: 16px; }
.acm-kad__kepala {
	padding: 14px 16px; border-bottom: 1px solid var(--acm-border);
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.acm-kad__kepala h3 { font-size: 14px; }
.acm-kad__kaki { padding: 12px 16px; border-top: 1px solid var(--acm-border); }

.acm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	height: 38px; padding: 0 16px;
	border-radius: var(--acm-r);
	font-size: 14px; font-weight: 600; line-height: 1;
	border: 1px solid transparent;
	transition: background .12s, border-color .12s, color .12s, transform .06s;
	white-space: nowrap;
	text-decoration: none !important;
}
.acm-btn:active { transform: translateY(1px); }
.acm-btn--primary { background: var(--acm-brand); color: #fff; }
.acm-btn--primary:hover { background: var(--acm-brand-dark); color: #fff; }
.acm-btn--emas { background: var(--acm-emas); color: #14171a; }
.acm-btn--emas:hover { background: var(--acm-emas-dark); color: #14171a; }
.acm-btn--garis { background: var(--acm-surface); color: var(--acm-teks); border-color: var(--acm-border-kuat); }
.acm-btn--garis:hover { background: var(--acm-surface-2); border-color: var(--acm-teks-3); }
.acm-btn--ghost { background: transparent; color: var(--acm-teks-2); border-color: var(--acm-border); }
.acm-btn--ghost:hover { background: var(--acm-surface-2); color: var(--acm-teks); }
.acm-btn--bahaya { background: var(--acm-merah); color: #fff; }
.acm-btn--bahaya:hover { background: #b91c1c; color: #fff; }
.acm-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.acm-btn--lg { height: 46px; padding: 0 22px; font-size: 15px; }
.acm-btn--penuh { width: 100%; }
.acm-btn[disabled], .acm-btn.is-disabled { opacity: .55; pointer-events: none; }

.acm-btnikon {
	width: 32px; height: 32px; border-radius: var(--acm-r-sm);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--acm-teks-3);
	transition: background .12s, color .12s;
}
.acm-btnikon:hover { background: var(--acm-surface-2); color: var(--acm-teks); }

/* Borang */
.acm-input, .acm-body select.acm-input, .acm-body textarea.acm-input {
	width: 100%;
	min-height: 38px;
	padding: 8px 12px;
	border: 1px solid var(--acm-border-kuat);
	border-radius: var(--acm-r);
	background: var(--acm-surface);
	font-size: 14px;
	transition: border-color .12s, box-shadow .12s;
}
.acm-input:focus {
	outline: none;
	border-color: var(--acm-brand);
	box-shadow: 0 0 0 3px var(--acm-brand-soft);
}
.acm-body textarea.acm-input { min-height: 90px; resize: vertical; line-height: 1.55; }
.acm-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--acm-teks-2); }
.acm-medan { margin-bottom: 14px; }
.acm-medan__bantuan { font-size: 12px; color: var(--acm-teks-3); margin-top: 4px; }

/* Lencana */
.acm-lencana {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 3px 9px; border-radius: var(--acm-r-full);
	font-size: 11.5px; font-weight: 600; line-height: 1.5;
	background: var(--acm-surface-2); color: var(--acm-teks-2);
	border: 1px solid var(--acm-border);
}
.acm-lencana--brand { background: var(--acm-brand-soft); color: var(--acm-brand-dark); border-color: transparent; }
.acm-lencana--emas  { background: #fff4d6; color: #92610a; border-color: transparent; }
.acm-lencana--hijau { background: #dcfce7; color: #15803d; border-color: transparent; }
.acm-lencana--kunci { background: #eef0f3; color: var(--acm-teks-2); }

/* Avatar */
.acm-avatar { border-radius: var(--acm-r-full); object-fit: cover; flex: 0 0 auto; background: var(--acm-surface-2); }
.acm-avatar--32 { width: 32px; height: 32px; }
.acm-avatar--40 { width: 40px; height: 40px; }
.acm-avatar--48 { width: 48px; height: 48px; }

.acm-ikon {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 7px; object-fit: cover; flex: 0 0 auto;
	background: linear-gradient(135deg, var(--acm-brand), var(--acm-brand-dark));
	color: #fff; font-weight: 700;
}
.acm-ikon--sm { width: 24px; height: 24px; font-size: 12px; }
.acm-ikon--md { width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
.acm-ikon--lg { width: 64px; height: 64px; font-size: 28px; border-radius: 14px; }
.acm-ikon--huruf { text-transform: uppercase; letter-spacing: 0; }

/* Notis & kosong */
.acm-notis {
	padding: 12px 14px; border-radius: var(--acm-r);
	font-size: 14px; border: 1px solid var(--acm-border);
	background: var(--acm-surface-2);
	margin-bottom: 14px;
}
.acm-notis--amaran { background: #fff8e6; border-color: #fde3a7; color: #8a5a00; }
.acm-notis--ralat  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.acm-notis--ok     { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

.acm-kosong { text-align: center; padding: 34px 18px; color: var(--acm-teks-2); }
.acm-kosong__ikon { width: 40px; height: 40px; color: var(--acm-teks-3); margin-bottom: 10px; }
.acm-kosong h1, .acm-kosong h2, .acm-kosong h3 { margin-bottom: 6px; }
.acm-kosong p { color: var(--acm-teks-3); font-size: 14px; margin-bottom: 16px; }
.acm-kosong--besar { padding: 70px 18px; }

/* Bar progres */
.acm-progres {
	display: block;
	height: 6px; border-radius: var(--acm-r-full);
	background: var(--acm-border); overflow: hidden;
}
.acm-progres__isi {
	display: block;          /* <span> inline mengabaikan width/height */
	height: 100%; border-radius: inherit;
	background: var(--acm-brand);
	transition: width .3s ease;
}
.acm-progres--hijau .acm-progres__isi { background: var(--acm-hijau); }

/* --------------------------------------------------------------------------
   9. Terokai (discovery)
   -------------------------------------------------------------------------- */
.acm-terokai__kepala { text-align: center; padding: 12px 0 26px; }
.acm-terokai__kepala h1 { font-size: 30px; margin-bottom: 6px; }
.acm-terokai__kepala p { color: var(--acm-teks-2); font-size: 15px; }

.acm-grid-community {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
}

.acm-ck {
	display: block; overflow: hidden;
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r-lg);
	box-shadow: var(--acm-shadow);
	transition: transform .14s, box-shadow .14s;
	color: inherit;
}
.acm-ck:hover { transform: translateY(-2px); box-shadow: var(--acm-shadow-md); text-decoration: none; }
.acm-ck__cover {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--acm-brand), var(--acm-brand-dark));
	background-size: cover; background-position: center;
	position: relative;
}
.acm-ck__ikon {
	position: absolute; left: 14px; bottom: -18px;
	display: block; line-height: 0;
	border: 3px solid var(--acm-surface);
	border-radius: 13px;
	background: var(--acm-surface);
	box-shadow: var(--acm-shadow);
}
.acm-ck__isi { padding: 26px 15px 15px; }
.acm-ck__tajuk { font-size: 15.5px; font-weight: 700; margin-bottom: 5px; }
.acm-ck__teks {
	font-size: 13.5px; color: var(--acm-teks-2); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 40px; margin-bottom: 10px;
}
.acm-ck__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--acm-teks-3); }
.acm-ck__meta b { color: var(--acm-teks-2); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. Halaman About (awam)
   -------------------------------------------------------------------------- */
.acm-about { display: grid; grid-template-columns: minmax(0,1fr) 328px; gap: 22px; align-items: start; }

.acm-about__media {
	aspect-ratio: 16 / 9; border-radius: var(--acm-r); overflow: hidden;
	background: #0d1117 center/cover no-repeat;
	position: relative; display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
}
.acm-about__media iframe { width: 100%; height: 100%; border: 0; display: block; }
.acm-about__fakta {
	display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
	padding: 14px 0; margin: 4px 0 16px;
	border-top: 1px solid var(--acm-border); border-bottom: 1px solid var(--acm-border);
	font-size: 13.5px; color: var(--acm-teks-2);
}
.acm-about__fakta span { display: inline-flex; align-items: center; gap: 7px; }
.acm-about__teks { font-size: 15px; line-height: 1.7; color: var(--acm-teks); }
.acm-about__teks ul { padding-left: 18px; }

.acm-sisi-join { text-align: center; overflow: hidden; }
.acm-sisi-join__cover {
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, var(--acm-brand), var(--acm-brand-dark)) center/cover no-repeat;
}
.acm-sisi-join__isi { padding: 16px; }
.acm-sisi-join h2 { font-size: 17px; margin-bottom: 3px; }
.acm-sisi-join__url { font-size: 12.5px; color: var(--acm-teks-3); word-break: break-all; margin-bottom: 10px; }
.acm-sisi-join__teks { font-size: 13.5px; color: var(--acm-teks-2); line-height: 1.55; margin-bottom: 14px; text-align: left; }
.acm-statgrid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--acm-border); border-bottom: 1px solid var(--acm-border);
	margin-bottom: 14px;
}
.acm-statgrid div { padding: 10px 4px; }
.acm-statgrid div + div { border-left: 1px solid var(--acm-border); }
.acm-statgrid b { display: block; font-size: 17px; font-weight: 700; }
.acm-statgrid span { font-size: 11.5px; color: var(--acm-teks-3); }

/* --------------------------------------------------------------------------
   11. Feed
   -------------------------------------------------------------------------- */
.acm-tulis__cetus {
	display: flex; align-items: center; gap: 11px;
	padding: 14px 16px; cursor: text;
}
.acm-tulis__cetus span {
	flex: 1; color: var(--acm-teks-3); font-size: 14.5px;
	padding: 9px 14px; border-radius: var(--acm-r-full);
	background: var(--acm-surface-2); border: 1px solid var(--acm-border);
}
.acm-tulis__borang { padding: 14px 16px; display: none; }
.acm-tulis.is-buka .acm-tulis__cetus { display: none; }
.acm-tulis.is-buka .acm-tulis__borang { display: block; }
.acm-tulis__alat { display: flex; align-items: center; gap: 8px; margin-top: 11px; }
.acm-tulis__alat .acm-tolak { margin-left: auto; }

.acm-pratonton { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.acm-pratonton__item { position: relative; }
.acm-pratonton__item img { width: 78px; height: 78px; object-fit: cover; border-radius: var(--acm-r-sm); display: block; }
.acm-pratonton__buang {
	position: absolute; top: -6px; right: -6px;
	width: 22px; height: 22px; border-radius: var(--acm-r-full);
	background: var(--acm-teks); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.acm-pratonton__buang [class^="acm-ico-"] { width: 12px; height: 12px; }

.acm-post { padding: 16px; }
.acm-post + .acm-post { border-top: 1px solid var(--acm-border); }
.acm-post--pin { box-shadow: inset 3px 0 0 var(--acm-emas); }
.acm-post--umum { box-shadow: inset 3px 0 0 var(--acm-brand); }
.acm-post__kepala { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.acm-post__meta { flex: 1; min-width: 0; }
.acm-post__nama { font-weight: 600; font-size: 14.5px; color: var(--acm-teks); }
.acm-post__masa { font-size: 12.5px; color: var(--acm-teks-3); }
.acm-post__isi { font-size: 15px; line-height: 1.65; word-wrap: break-word; overflow-wrap: anywhere; }
.acm-post__isi a { text-decoration: underline; }
.acm-post__media { margin-top: 12px; display: grid; gap: 5px; border-radius: var(--acm-r); overflow: hidden; }
.acm-post__media--2 { grid-template-columns: 1fr 1fr; }
.acm-post__media--3, .acm-post__media--4 { grid-template-columns: 1fr 1fr; }
.acm-post__media img { width: 100%; height: 100%; max-height: 460px; object-fit: cover; display: block; }
.acm-post__media--2 img, .acm-post__media--3 img, .acm-post__media--4 img { aspect-ratio: 1; max-height: none; }
.acm-post__kaki {
	display: flex; align-items: center; gap: 4px;
	margin-top: 12px; padding-top: 10px;
	border-top: 1px solid var(--acm-border);
}
.acm-aksi {
	display: inline-flex; align-items: center; gap: 6px;
	height: 32px; padding: 0 11px; border-radius: var(--acm-r-sm);
	font-size: 13.5px; font-weight: 500; color: var(--acm-teks-2);
	transition: background .1s, color .1s;
}
.acm-aksi:hover { background: var(--acm-surface-2); color: var(--acm-teks); text-decoration: none; }
.acm-aksi.is-suka { color: var(--acm-merah); }

.acm-komen-blok { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--acm-border); display: none; }
.acm-komen-blok.is-buka { display: block; }
.acm-komen { display: flex; gap: 10px; margin-bottom: 11px; }
.acm-komen--balas { margin-left: 42px; }
.acm-komen__gelembung {
	background: var(--acm-surface-2); border: 1px solid var(--acm-border);
	border-radius: var(--acm-r); padding: 9px 12px; flex: 1; min-width: 0;
}
.acm-komen__nama { font-weight: 600; font-size: 13.5px; display: block; margin-bottom: 2px; }
.acm-komen__gelembung p { font-size: 14px; margin: 0; word-wrap: break-word; overflow-wrap: anywhere; }
.acm-komen__meta { display: flex; gap: 12px; font-size: 12px; color: var(--acm-teks-3); margin-top: 5px; }
.acm-komen__meta button { color: inherit; font-size: inherit; font-weight: 500; }
.acm-komen__meta button:hover { color: var(--acm-teks); text-decoration: underline; }
.acm-komen-tulis { display: flex; gap: 10px; align-items: flex-start; }
.acm-komen-tulis .acm-input { min-height: 36px; }

/* --------------------------------------------------------------------------
   12. Classroom
   -------------------------------------------------------------------------- */
.acm-grid-kursus {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: 20px;
}

.acm-kk {
	position: relative; display: flex; flex-direction: column;
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r-lg);
	overflow: hidden;
	box-shadow: var(--acm-shadow);
	transition: transform .14s, box-shadow .14s;
	color: inherit;
}
.acm-kk:hover { transform: translateY(-2px); box-shadow: var(--acm-shadow-md); text-decoration: none; }
.acm-kk__cover {
	aspect-ratio: 16 / 9; position: relative;
	background: linear-gradient(135deg, #1f2937, #0b1220) center/cover no-repeat;
}
.acm-kk__kunci {
	position: absolute; inset: 0;
	background: rgba(9, 14, 22, .62);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
	color: #fff; text-align: center; padding: 12px;
	backdrop-filter: saturate(120%) blur(1px);
}
.acm-kk__kunci [class^="acm-ico-"] { width: 26px; height: 26px; }
.acm-kk__kunci b { font-size: 13.5px; font-weight: 600; }
.acm-kk__kunci small { font-size: 12px; opacity: .82; }
.acm-kk__isi { padding: 14px 15px 15px; display: flex; flex-direction: column; flex: 1; }
.acm-kk__tajuk { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.acm-kk__teks {
	font-size: 13px; color: var(--acm-teks-2); line-height: 1.5;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	margin-bottom: 12px; min-height: 38px;
}
.acm-kk__bawah { margin-top: auto; }
.acm-kk__baris { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--acm-teks-3); margin-bottom: 6px; }
.acm-kk__harga { font-weight: 700; color: var(--acm-teks); font-size: 14px; }
.acm-kk__harga del { color: var(--acm-teks-3); font-weight: 400; font-size: 12.5px; margin-right: 5px; }
/* Kursus yang sudah termasuk dalam keahlian — jangan papar harga langsung,
   supaya ahli tidak menyangka mereka perlu bayar lagi. */
.acm-kk__harga--ahli {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 2px 9px; border-radius: 999px;
	background: var(--acm-brand-soft); color: var(--acm-brand);
	font-size: 12px; font-weight: 700;
}
.acm-kk--tuntut { cursor: pointer; }
.acm-kk--memuat { opacity: .6; pointer-events: none; }

/* --------------------------------------------------------------------------
   13. Pemain pelajaran
   -------------------------------------------------------------------------- */
.acm-belajar {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 0;
	background: var(--acm-surface-2);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r-lg);
	box-shadow: var(--acm-shadow);
	min-height: 60vh;
	/* ⚠️ JANGAN tambah overflow:hidden di sini — ia menjadikan elemen ini bekas
	   skrol bagi .acm-kurikulum yang sticky, dan sidebar akan tertolak ke bawah
	   sebanyak nilai `top` walaupun halaman belum digulung. */
}

/* Grid item: latar penuh tinggi. Sticky diletakkan pada anak di dalamnya —
   elemen sticky yang diregangkan tidak berfungsi. */
.acm-kurikulum {
	border-right: 1px solid var(--acm-border);
	border-radius: var(--acm-r-lg) 0 0 var(--acm-r-lg);
	background: var(--acm-surface-2);
}
.acm-kurikulum__lekat {
	position: sticky;
	top: calc(var(--acm-topbar-h) + var(--acm-nav-h));
	max-height: calc(100vh - var(--acm-topbar-h) - var(--acm-nav-h));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.acm-kurikulum__kepala {
	padding: 15px 16px; border-bottom: 1px solid var(--acm-border);
	background: var(--acm-surface);
	border-radius: var(--acm-r-lg) 0 0 0;
}
.acm-kurikulum__kepala h2 { font-size: 15px; margin-bottom: 8px; }
.acm-kurikulum__kepala .acm-progres { margin-bottom: 6px; }
.acm-kurikulum__kepala small { font-size: 12px; color: var(--acm-teks-3); }

.acm-topik { border-bottom: 1px solid var(--acm-border); }
.acm-topik__btn {
	width: 100%; text-align: left;
	display: flex; align-items: center; gap: 9px;
	padding: 12px 16px;
	font-size: 13.5px; font-weight: 700; color: var(--acm-teks);
}
.acm-topik__btn:hover { background: rgba(0,0,0,.02); }
.acm-topik__btn .acm-caret { margin-left: auto; transition: transform .15s; }
.acm-topik.is-tutup .acm-topik__btn .acm-caret { transform: rotate(-90deg); }
.acm-topik.is-tutup .acm-topik__senarai { display: none; }
.acm-topik__kira { font-size: 11.5px; font-weight: 500; color: var(--acm-teks-3); }

.acm-plj {
	display: flex; align-items: flex-start; gap: 9px;
	padding: 9px 16px 9px 18px;
	font-size: 13.5px; color: var(--acm-teks-2); line-height: 1.4;
	border-left: 3px solid transparent;
	transition: background .1s;
}
.acm-plj:hover { background: rgba(0,0,0,.03); text-decoration: none; color: var(--acm-teks); }
.acm-plj.is-aktif {
	background: var(--acm-surface); color: var(--acm-teks);
	font-weight: 600; border-left-color: var(--acm-brand);
}
.acm-plj__tanda {
	width: 17px; height: 17px; border-radius: var(--acm-r-full);
	border: 1.5px solid var(--acm-border-kuat);
	flex: 0 0 auto; margin-top: 1px;
	display: flex; align-items: center; justify-content: center;
}
.acm-plj.is-siap .acm-plj__tanda { background: var(--acm-hijau); border-color: var(--acm-hijau); color: #fff; }
.acm-plj.is-siap .acm-plj__tanda [class^="acm-ico-"] { width: 10px; height: 10px; }
.acm-plj__tajuk { flex: 1; min-width: 0; }
.acm-plj__tempoh { font-size: 11.5px; color: var(--acm-teks-3); font-weight: 400; flex: 0 0 auto; }

.acm-pemain {
	display: flex; flex-direction: column; min-width: 0;
	background: var(--acm-surface);
	border-radius: 0 var(--acm-r-lg) var(--acm-r-lg) 0;
	overflow: hidden;
}
.acm-pemain__video { background: #000; aspect-ratio: 16 / 9; max-height: 66vh; position: relative; }
.acm-pemain__video iframe, .acm-pemain__video video {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.acm-pemain__tiada {
	position: absolute; inset: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	color: #6b7280; font-size: 14px;
}
.acm-pemain__isi { padding: 20px 22px 24px; }
.acm-pemain__tajuk { font-size: 21px; margin-bottom: 4px; }
.acm-pemain__meta { font-size: 13px; color: var(--acm-teks-3); margin-bottom: 16px; }
.acm-pemain__nota { font-size: 15px; line-height: 1.7; }
.acm-pemain__nota img { border-radius: var(--acm-r); }
.acm-pemain__bar {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 14px 22px;
	border-top: 1px solid var(--acm-border);
	background: var(--acm-surface-2);
}
.acm-pemain__bar .acm-tolak { margin-left: auto; }
.acm-complete-form { display: inline-flex; margin: 0; }
.acm-menu--akaun { min-width: 250px; }
.acm-siap-tanda {
	display: inline-flex; align-items: center; gap: 7px;
	font-size: 14px; font-weight: 600; color: var(--acm-hijau);
}

/* --------------------------------------------------------------------------
   14. Ahli & papan markah
   -------------------------------------------------------------------------- */
.acm-grid-ahli {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px;
}
.acm-ahli {
	display: flex; align-items: center; gap: 11px;
	padding: 13px 14px;
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r);
}
.acm-ahli__nama { font-weight: 600; font-size: 14px; }
.acm-ahli__meta { font-size: 12px; color: var(--acm-teks-3); }

/* --------------------------------------------------------------------------
   15. Modal & toast
   -------------------------------------------------------------------------- */
.acm-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 18px; }
.acm-modal__tirai { position: absolute; inset: 0; background: rgba(15,23,42,.55); }
.acm-modal__kotak {
	position: relative; z-index: 1;
	background: var(--acm-surface);
	border-radius: var(--acm-r-lg);
	box-shadow: var(--acm-shadow-lg);
	width: 100%; max-width: 560px;
	max-height: 88vh; overflow-y: auto;
	animation: acm-naik .16s ease-out;
}
@keyframes acm-naik { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.acm-modal__kepala {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 15px 18px; border-bottom: 1px solid var(--acm-border);
	position: sticky; top: 0; background: var(--acm-surface); z-index: 1;
}
.acm-modal__isi { padding: 18px; }
.acm-modal__kaki { padding: 14px 18px; border-top: 1px solid var(--acm-border); display: flex; gap: 9px; justify-content: flex-end; }

.acm-toast-bekas { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100001; display: grid; gap: 8px; }
.acm-toast {
	background: #14171a; color: #fff;
	padding: 11px 18px; border-radius: var(--acm-r);
	font-size: 14px; box-shadow: var(--acm-shadow-lg);
	animation: acm-naik .16s ease-out;
	max-width: 90vw;
}
.acm-toast--ralat { background: var(--acm-merah); }
.acm-toast--ok { background: var(--acm-hijau); }
.acm-toast--amaran { background: var(--acm-amber); }

.acm-spin {
	width: 17px; height: 17px; flex: 0 0 auto;
	border: 2px solid currentColor; border-right-color: transparent;
	border-radius: 50%; display: inline-block;
	animation: acm-putar .7s linear infinite;
}
@keyframes acm-putar { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   16. Responsif — breakpoint ACM sendiri
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.acm-kolum, .acm-about { grid-template-columns: minmax(0, 1fr); }
	.acm-kolum__sisi, .acm-about > aside { position: static; }
	.acm-about > aside { order: -1; }
}

@media (max-width: 900px) {
	.acm-belajar { grid-template-columns: minmax(0, 1fr); }
	.acm-kurikulum {
		border-right: 0; border-top: 1px solid var(--acm-border);
		border-radius: 0 0 var(--acm-r-lg) var(--acm-r-lg);
		order: 2;
	}
	.acm-kurikulum__lekat { position: static; max-height: none; overflow: visible; }
	.acm-kurikulum__kepala { border-radius: 0; }
	.acm-pemain { order: 1; border-radius: var(--acm-r-lg) var(--acm-r-lg) 0 0; }
}

@media (max-width: 760px) {
	:root { --acm-topbar-h: 54px; }
	.acm-topbar__in { padding: 0 12px; gap: 9px; }
	.acm-brand__text { display: none; }
	/* Logo TIDAK disorok — ia satu-satunya penanda jenama yang tinggal */
	.acm-brand__logo { height: 26px; max-width: 128px; }
	.acm-switcher__btn { max-width: 170px; }
	.acm-switcher__name { font-size: 13.5px; }
	.acm-search { max-width: none; }
	.acm-groupnav__in { padding: 0 12px; }
	.acm-wrap { padding: 0 12px; }
	.acm-main { padding: 14px 0 34px; }
	.acm-menu { position: fixed; left: 10px; right: 10px; top: auto; max-width: none; min-width: 0; }
	.acm-pemain__isi { padding: 16px; }
	.acm-pemain__bar { padding: 12px 16px; }
	.acm-terokai__kepala h1 { font-size: 24px; }
	.acm-komen--balas { margin-left: 22px; }
}

@media (max-width: 560px) {
	/* Kotak carian disorok pada telefon; panel hasil ikut sama kerana ia anak borang */
	.acm-search { display: none; }
	.acm-grid-community, .acm-grid-kursus { grid-template-columns: 1fr; }
	.acm-statgrid b { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
	.acm-body *, .acm-body *::before, .acm-body *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
	html.acm-html { scroll-behavior: auto; }
}

/* Cetak */
@media print {
	.acm-topbar, .acm-groupnav, .acm-foot, .acm-pemain__bar { display: none !important; }
	.acm-body { background: #fff; }
}

/* --------------------------------------------------------------------------
   17. Kaki
   -------------------------------------------------------------------------- */
.acm-foot {
	flex: 0 0 auto;
	border-top: 1px solid var(--acm-border);
	background: var(--acm-surface);
	padding: 16px 0;
	margin-top: auto;
}
.acm-foot__in {
	max-width: var(--acm-maks); margin: 0 auto; padding: 0 18px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	font-size: 13px; color: var(--acm-teks-3);
}
.acm-foot__nav { display: flex; gap: 16px; }
.acm-foot__nav a { color: var(--acm-teks-2); }

/* --------------------------------------------------------------------------
   16b. Permohonan menyertai & zon bahaya
   -------------------------------------------------------------------------- */
.acm-mohon {
	display: flex; align-items: center; gap: 11px;
	padding: 12px 16px;
	flex-wrap: wrap;
}
.acm-mohon + .acm-mohon { border-top: 1px solid var(--acm-border); }
.acm-mohon .acm-baris { margin-left: auto; }

.acm-bahaya {
	border-top: 1px solid var(--acm-border);
	background: var(--acm-surface-2);
	border-radius: 0 0 var(--acm-r-lg) var(--acm-r-lg);
}
.acm-bahaya > summary {
	cursor: pointer;
	padding: 12px 16px;
	font-size: 13px; font-weight: 600;
	color: var(--acm-teks-3);
	list-style: none;
	user-select: none;
}
.acm-bahaya > summary::-webkit-details-marker { display: none; }
.acm-bahaya > summary::before { content: '▸ '; }
.acm-bahaya[open] > summary { color: var(--acm-merah); }
.acm-bahaya[open] > summary::before { content: '▾ '; }
.acm-bahaya__isi { padding: 0 16px 16px; }
.acm-bahaya__isi p { margin-bottom: 11px; max-width: 62ch; }

/* --------------------------------------------------------------------------
   17a. Muat naik gambar community
   -------------------------------------------------------------------------- */
.acm-gambar__baris { display: flex; gap: 14px; align-items: flex-start; }

.acm-gambar__pratonton {
	position: relative;
	flex: 0 0 auto;
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r);
	overflow: hidden;
	background: var(--acm-surface-2);
	display: flex; align-items: center; justify-content: center;
}
.acm-gambar__pratonton img { width: 100%; height: 100%; object-fit: cover; display: block; }
.acm-gambar__pratonton.is-kosong { border-style: dashed; }
.acm-gambar__pratonton.is-kosong [class^="acm-ico-"] { width: 22px; height: 22px; color: var(--acm-teks-3); }
.acm-gambar__pratonton.is-sibuk { opacity: .5; }

.acm-gambar--cover .acm-gambar__pratonton { width: 176px; aspect-ratio: 16 / 9; }
.acm-gambar--icon  .acm-gambar__pratonton { width: 76px;  aspect-ratio: 1; border-radius: 12px; }

.acm-gambar__kawalan { flex: 1; min-width: 0; }
.acm-gambar__kawalan .acm-medan__bantuan { margin-top: 8px; line-height: 1.55; }

@media (max-width: 560px) {
	.acm-gambar__baris { flex-direction: column; }
	.acm-gambar--cover .acm-gambar__pratonton { width: 100%; }
}

/* --------------------------------------------------------------------------
   17b. Pemilih kursus / produk
   -------------------------------------------------------------------------- */
.acm-pemilih { margin-top: 2px; }

.acm-pemilih__cari { position: relative; display: flex; align-items: center; margin-bottom: 9px; }
.acm-pemilih__cari .acm-ico-search {
	position: absolute; left: 11px; color: var(--acm-teks-3); pointer-events: none;
}
.acm-pemilih__cari .acm-input { padding-left: 35px; padding-right: 96px; }
.acm-pemilih__status {
	position: absolute; right: 12px;
	font-size: 12px; color: var(--acm-teks-3);
	display: inline-flex; align-items: center; gap: 5px;
	pointer-events: none;
}

.acm-pemilih__senarai {
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r);
	max-height: 260px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--acm-surface);
}

.acm-pemilih__tajuk {
	position: sticky; top: 0; z-index: 1;
	padding: 8px 12px 5px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--acm-teks-3);
	background: var(--acm-surface-2);
	border-bottom: 1px solid var(--acm-border);
}

.acm-pemilih__baris {
	display: flex; align-items: flex-start; gap: 9px;
	padding: 8px 12px;
	font-size: 13.5px; line-height: 1.45;
	transition: background .1s;
}
.acm-pemilih__baris:hover { background: var(--acm-surface-2); }
.acm-pemilih__baris input { margin-top: 2px; flex: 0 0 auto; }
/* Baris peranan masih <label> tunggal; baris kursus/produk ialah <div> dengan
   <label class="acm-pemilih__nama"> di dalam. Kedua-duanya perlu disokong. */
label.acm-pemilih__baris { cursor: pointer; }
.acm-pemilih__nama {
	display: flex; align-items: flex-start; gap: 9px;
	flex: 1 1 auto; min-width: 0; cursor: pointer;
}
.acm-pemilih__baris > span,
.acm-pemilih__nama > span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
/* ⚠️ Hanya checkbox kursus/produk/peranan yang menyalakan baris — bukan suis Eksklusif. */
.acm-pemilih__baris:has(> input:checked),
.acm-pemilih__baris:has(> .acm-pemilih__nama input:checked) {
	background: var(--acm-brand-soft); font-weight: 500;
}

/* Suis "Eksklusif" per-kursus (pagar akses) */
.acm-pagar {
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 5px;
	flex: 0 0 auto; align-self: center;
	padding: 3px 8px 3px 6px;
	border: 1px solid var(--acm-border);
	border-radius: 999px;
	background: var(--acm-surface);
	font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
	color: var(--acm-teks-3);
	white-space: nowrap;
	transition: color .12s, border-color .12s, background .12s;
}
.acm-pagar input { margin: 0 !important; }
.acm-pagar > span { min-width: 0; }
.acm-pagar:has(input:checked) {
	color: var(--acm-brand);
	border-color: var(--acm-brand);
	background: var(--acm-brand-soft);
}
/* Suis hanya bermakna bila kursus itu dipilih */
.acm-pemilih__baris:not(:has(> .acm-pemilih__nama input:checked)) .acm-pagar { opacity: .45; }

/* Skrin sempit: benarkan suis turun ke baris kedua, jangan picit nama kursus */
@media (max-width: 560px) {
	.acm-pemilih__baris { flex-wrap: wrap; }
	.acm-pagar { margin-left: 26px; }
}

.acm-pemilih__nota {
	padding: 14px 12px;
	font-size: 13px; color: var(--acm-teks-3); text-align: center;
}

/* --------------------------------------------------------------------------
   18. Pampasan untuk widget luar (bar affiliate, butang share, dsb.)
   -------------------------------------------------------------------------- */

/* ⚠️ WordPress menukar emoji kepada <img class="emoji">. CSS yang mengecilkannya
   datang dari handle `wp-emoji-styles` — yang dibuang oleh dequeue shell.
   Tanpa peraturan ini, emoji 🔗 dalam bar affiliate dipaparkan pada saiz asal
   (ratusan piksel) dan memecahkan susun atur bar.
   Peraturan ini menjadikannya kebal tanpa mengira nama handle. */
.acm-body img.emoji,
.acm-body img.wp-smiley {
	display: inline !important;
	width: 1em !important;
	height: 1em !important;
	max-width: 1em !important;
	margin: 0 .07em !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
	vertical-align: -.1em !important;
}

/* Bar affiliate Azadel (AAB) — pastikan ia duduk kemas di atas shell */
.acm-body #aab-bar {
	flex-wrap: wrap;
	row-gap: 6px;
}

/* Util */
.acm-sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.acm-tolak { margin-left: auto; }
.acm-baris { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.acm-t2 { color: var(--acm-teks-2); }
.acm-t3 { color: var(--acm-teks-3); }
.acm-kecil { font-size: 13px; }

/* --------------------------------------------------------------------------
   19. Bar Mod Pentadbir Platform
   -------------------------------------------------------------------------- */

/* ⚠️ Sengaja menonjol. Mod ini memaparkan kedai orang lain; kalau ia kelihatan
   seperti paparan biasa, admin boleh tersilap memautkan produk rakan seteam. */
.acm-barplat {
	background: var(--acm-amber);
	color: #fff;
	font-size: 13px; line-height: 1.4;
}
.acm-barplat__in {
	max-width: var(--acm-maks);
	margin: 0 auto;
	padding: 8px 16px;
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.acm-barplat__in > span:nth-child(2) { flex: 1 1 260px; min-width: 0; }
.acm-barplat em { font-style: normal; text-decoration: underline; }
.acm-barplat__masa {
	flex: 0 0 auto;
	padding: 2px 9px; border-radius: 999px;
	background: rgba(255,255,255,.22); font-weight: 700; white-space: nowrap;
}
.acm-barplat__btn {
	flex: 0 0 auto;
	padding: 4px 12px; border-radius: 999px;
	border: 1px solid rgba(255,255,255,.65); background: transparent; color: #fff;
	font-size: 12.5px; font-weight: 700; cursor: pointer;
	transition: background .12s;
}
.acm-barplat__btn:hover { background: rgba(255,255,255,.18); }

/* Ikon mewarisi currentColor; .acm-menu__item memaksa kelabu, jadi tarik balik */
.acm-menu__item.is-amaran { color: var(--acm-amber); font-weight: 700; }
.acm-menu__item.is-amaran [class^="acm-ico-"] { color: inherit; }
.acm-t-amaran { color: var(--acm-amber) !important; }

/* --------------------------------------------------------------------------
   20. Kalendar & agenda
   -------------------------------------------------------------------------- */

.acm-tersembunyi {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
	white-space: nowrap; border: 0;
}

.acm-kal {
	background: var(--acm-surface);
	border: 1px solid var(--acm-border);
	border-radius: var(--acm-r);
	overflow: hidden;
}
.acm-kal__kepala {
	display: flex; align-items: center; gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--acm-border);
}
.acm-kal__bulan { font-size: 15.5px; font-weight: 700; }

.acm-kal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.acm-kal__dow {
	padding: 9px 4px;
	text-align: center;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
	color: var(--acm-teks-3);
	background: var(--acm-surface-2);
	border-bottom: 1px solid var(--acm-border);
}
.acm-kal__sel {
	position: relative;
	min-height: 62px;
	padding: 7px 6px 16px;
	border-right: 1px solid var(--acm-border);
	border-bottom: 1px solid var(--acm-border);
	font-size: 13px;
	color: var(--acm-teks-2);
}
/* Sempadan kanan lajur terakhir bertindih dengan sempadan kad */
.acm-kal__grid > .acm-kal__sel:nth-child(7n) { border-right: 0; }
.acm-kal__sel--kosong { background: var(--acm-surface-2); }
.acm-kal__no { display: block; font-weight: 600; }
a.acm-kal__sel { color: var(--acm-teks); text-decoration: none; transition: background .1s; }
a.acm-kal__sel:hover { background: var(--acm-brand-soft); }
.acm-kal__sel.is-kini .acm-kal__no {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px; margin: -3px 0 0 -4px;
	border-radius: var(--acm-r-full);
	background: var(--acm-brand); color: #fff;
}
.acm-kal__titik {
	position: absolute; left: 0; right: 0; bottom: 7px;
	display: flex; justify-content: center; gap: 3px;
}
.acm-kal__titik i { width: 5px; height: 5px; border-radius: 50%; background: var(--acm-brand); }

/* Agenda */
.acm-agenda__hari {
	display: flex; gap: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--acm-border);
	scroll-margin-top: calc(var(--acm-topbar-h) + var(--acm-nav-h) + 12px);
}
.acm-agenda__hari:first-child { border-top: 0; }
.acm-agenda__hari.is-sorot { background: var(--acm-brand-soft); border-radius: var(--acm-r); }
.acm-agenda__tarikh {
	flex: 0 0 44px; text-align: center; line-height: 1.15;
}
.acm-agenda__dd { display: block; font-size: 20px; font-weight: 800; }
.acm-agenda__dow {
	display: block; font-size: 11px; font-weight: 700;
	text-transform: uppercase; color: var(--acm-teks-3);
}
.acm-agenda__isi { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }

.acm-acara {
	display: flex; align-items: flex-start; gap: 12px;
	padding: 11px 13px;
	border: 1px solid var(--acm-border);
	border-left: 3px solid var(--acm-teks-3);
	border-radius: var(--acm-r-sm);
	background: var(--acm-surface);
	color: var(--acm-teks);
	transition: box-shadow .12s, border-color .12s;
}
a.acm-acara:hover { box-shadow: var(--acm-shadow-sm); text-decoration: none; }
.acm-acara--webinar { border-left-color: var(--acm-brand); }
.acm-acara--kelas   { border-left-color: var(--acm-hijau); }
.acm-acara.is-peribadi { border-left-color: var(--acm-amber); }
.acm-acara__masa {
	flex: 0 0 auto; font-size: 12.5px; font-weight: 700; color: var(--acm-teks-2);
	white-space: nowrap; padding-top: 1px;
}
.acm-acara__teks { flex: 1 1 auto; min-width: 0; }
.acm-acara__tajuk { display: block; font-weight: 600; overflow-wrap: anywhere; }
.acm-acara__nota { display: block; font-size: 12.5px; color: var(--acm-teks-3); margin-top: 2px; }

@media (max-width: 560px) {
	.acm-kal__sel { min-height: 52px; padding: 5px 3px 14px; font-size: 12px; }
	.acm-acara { flex-wrap: wrap; gap: 4px 10px; }
	.acm-agenda__tarikh { flex-basis: 36px; }
}

/* ── Lencana jenis akses community (v2.4.0) ───────────────── */
.acm-lencana--percuma   { background: rgba(34,197,94,.14);  color: #16a34a; }
.acm-lencana--berbayar  { background: rgba(255,184,0,.16);  color: #b45309; }
.acm-lencana--jemputan  { background: rgba(148,163,184,.18); color: #475569; }
.acm-lencana--affiliate { background: rgba(0,149,211,.14);  color: #0369a1; }
.acm-lencana--peranan   { background: rgba(139,92,246,.14); color: #6d28d9; }

.acm-ck__nota { margin-left: auto; font-size: 12px; color: var(--acm-teks-3); }

/* Kad jemputan tanpa halaman pendaratan — tiada destinasi, jadi bukan pautan */
.acm-ck--kunci { cursor: default; opacity: .82; }
.acm-ck--kunci:hover { transform: none; box-shadow: var(--acm-shadow); }

/* --------------------------------------------------------------------------
   21. Tab luar, grid produk, penomboran
   -------------------------------------------------------------------------- */

/* Tab yang membuka tab pelayar baharu (contoh: Kedai) */
.acm-groupnav__item--luar { gap: 5px; }
.acm-groupnav__item--luar .acm-ico-luar { width: 13px; height: 13px; opacity: .6; }

/* ⚠️ .acm-kk__cover menetapkan `background` (shorthand) dengan kecerunan gelap,
   jadi `background-color` sahaja tidak akan menang. Ikon perlu warna terang. */
.acm-kk__cover--produk {
	display: flex; align-items: center; justify-content: center;
}
.acm-kk__cover--produk .acm-ico-kotak {
	width: 34px; height: 34px; color: rgba(255, 255, 255, .34);
}

.acm-halaman {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin-top: 22px;
}

/* Butang Join | Detail pada halaman Tentang.
   Lebih kecil daripada .acm-btn--lg biasa — label "Join RM199/thn" jauh lebih
   panjang daripada satu perkataan, jadi saiz penuh nampak sesak dan berisiko
   membungkus dua baris pada sidebar yang sempit. */
.acm-daftar2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.acm-daftar2 .acm-btn {
	width: 100%; justify-content: center;
	height: 42px; padding: 0 12px;
	font-size: 13.5px; letter-spacing: -.005em;
	white-space: nowrap;
}

@media (max-width: 380px) {
	.acm-daftar2 .acm-btn { font-size: 12.5px; padding: 0 8px; }
}

/* Cip penapis (halaman Ahli) */
.acm-cip { display: flex; flex-wrap: wrap; gap: 6px; }
.acm-cip__item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 12px; border-radius: 999px;
	border: 1px solid var(--acm-border);
	background: var(--acm-surface);
	color: var(--acm-teks-2); font-size: 13px; font-weight: 600;
	transition: background .12s, border-color .12s, color .12s;
}
.acm-cip__item:hover { background: var(--acm-surface-2); text-decoration: none; color: var(--acm-teks); }
.acm-cip__item span { font-weight: 700; color: var(--acm-teks-3); }
.acm-cip__item.is-active {
	background: var(--acm-brand-soft); border-color: var(--acm-brand); color: var(--acm-brand-dark);
}
.acm-cip__item.is-active span { color: inherit; }

/* Emel ahli — pengurus sahaja */
.acm-ahli__emel {
	display: block; margin-top: 2px;
	font-size: 11.5px; color: var(--acm-teks-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acm-ahli__emel:hover { color: var(--acm-brand); }

/* ── Panel "Jemput ahli" — tab, senarai pelanggan, cip produk ───────── */
.acm-jtab{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--acm-border)}
.acm-jtab__btn{appearance:none;background:none;border:0;cursor:pointer;
	padding:10px 12px;font:inherit;font-size:14px;font-weight:600;
	color:var(--acm-teks-3);border-bottom:2px solid transparent;margin-bottom:-1px;
	display:inline-flex;align-items:center;gap:6px}
.acm-jtab__btn:hover{color:var(--acm-teks)}
.acm-jtab__btn.is-active{color:var(--acm-brand);border-bottom-color:var(--acm-brand)}
.acm-jsenarai{max-height:420px;overflow-y:auto;margin:0 -16px;padding:0 16px}
.acm-jprod{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.acm-jprod__cip{display:inline-block;max-width:230px;overflow:hidden;text-overflow:ellipsis;
	white-space:nowrap;padding:1px 8px;border-radius:999px;font-size:11.5px;line-height:1.7;
	background:var(--acm-surface-2);color:var(--acm-teks-2);border:1px solid var(--acm-border)}
@media (max-width:959px){
	.acm-jsenarai{max-height:none}
	.acm-jprod__cip{max-width:100%}
}