/* Tokens (myds-tokens.css) load as their own versioned asset: see joomla.asset.json. */

/*
 * MDTM portal — MyDS / MyGovernment look over Cassiopeia.
 * Mobile-first: base styles target phones; min-width breakpoints enhance for tablet/desktop.
 */

*, *::before, *::after { box-sizing: border-box; }

.mdtm-shell {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1rem;
}

/* ---- Skip link ---- */
.mdtm-skip {
    position: absolute; left: -999px; top: 0; z-index: 2000;
    background: rgb(var(--mdtm-primary)); color: #fff; padding: 0.5rem 1rem;
}
.mdtm-skip:focus { left: 0; }

/* ---- Row 1: dark utility bar ---- */
.mdtm-utility { background: rgb(var(--mdtm-gov-bg)); color: #fff; font-size: 0.8125rem; }
.mdtm-utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-block: 0.35rem; flex-wrap: wrap; }
.mdtm-utility__date { opacity: 0.9; }
.mdtm-utility__hijri { opacity: 0.75; }
.mdtm-utility__right { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.mdtm-utility a { color: #fff; }

/* MyDS masthead: "Official Malaysia Government Website" + how-to-tell panel, Kelantan state portal beside it */
.mdtm-masthead { background: #f8fafc; color: #18181b; font-size: 0.8125rem; border-bottom: 1px solid #e4e4e7; }
.mdtm-masthead__bar { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.4rem; }
.mdtm-masthead__flag { flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.08); width: 24px; height: 12px; }
.mdtm-masthead__title { font-weight: 500; color: inherit; text-decoration: none; }
.mdtm-masthead__title:hover { color: #2563eb; text-decoration: underline; }
.mdtm-masthead__sep { color: #a1a1aa; }
.mdtm-masthead__state { display: inline-flex; align-items: center; gap: 0.45rem; color: inherit; font-weight: 500; text-decoration: none; }
.mdtm-masthead__state:hover { color: #2563eb; text-decoration: underline; }
.mdtm-masthead__toggle {
    margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.25rem; border: 0; background: none;
    color: #2563eb; font: inherit; font-weight: 500; cursor: pointer;
}
.mdtm-masthead__toggle[hidden] { display: none; }
.mdtm-masthead__toggle:hover .mdtm-masthead__how { text-decoration: underline; }
.mdtm-masthead__toggle svg { transition: transform .15s; }
.mdtm-masthead__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mdtm-masthead__panel[hidden] { display: none; }
.mdtm-masthead__panel { position: relative; display: grid; gap: 1rem; padding-block: 0.9rem 1rem; }
.mdtm-masthead__panel::before { content: ""; position: absolute; inset: 0 1rem auto; height: 1px; background: #e4e4e7; }
.mdtm-masthead__tip { display: flex; gap: 0.75rem; align-items: flex-start; }
.mdtm-masthead__tip p { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #52525b; }
.mdtm-masthead__tip .mdtm-masthead__head { font-weight: 600; color: #18181b; }
.mdtm-masthead__ico { flex: 0 0 auto; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; border: 1px solid #e4e4e7; background: #fff; color: #52525b; }
.mdtm-masthead__ico--lock { color: #d97706; }
@media (min-width: 48rem) { .mdtm-masthead__panel { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 47.99rem) {
    /* Phone: the state portal link drops to its own line under the federal one */
    .mdtm-masthead__how, .mdtm-masthead__sep { display: none; }
    .mdtm-masthead__bar { flex-wrap: wrap; row-gap: 0.2rem; }
    .mdtm-masthead__state { order: 3; flex-basis: 100%; }
}

/* Accessibility controls */
.mdtm-a11y { display: inline-flex; gap: 0.25rem; }
.mdtm-a11y__btn {
    min-width: 1.9rem; min-height: 1.9rem; border: 1px solid rgba(255,255,255,.35);
    background: transparent; color: #fff; border-radius: 4px; cursor: pointer; font-size: 0.8rem; line-height: 1;
}
.mdtm-a11y__btn:hover { background: rgba(255,255,255,.15); }
.mdtm-a11y__btn[aria-pressed="true"] { background: #fff; color: rgb(var(--mdtm-gov-bg)); }

/* Social */
.mdtm-social { display: inline-flex; gap: 0.4rem; }
.mdtm-social__link {
    display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: rgba(255,255,255,.15); color: #fff; text-decoration: none;
}
.mdtm-social__link--fb { background: #1877f2; }
.mdtm-social__link--tiktok,
.mdtm-social__link--threads,
.mdtm-social__link--x { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.mdtm-social__link--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.mdtm-social__link:hover { filter: brightness(1.15); color: #fff; }
.mdtm-social__link svg { display: block; }

/* Staff systems (Webmel, HRMIS): icon + label pills in the top bar; icons only on phones */
.mdtm-staff { display: inline-flex; gap: 0.35rem; }
.mdtm-staff__link {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.65rem; min-height: 1.9rem;
    border-radius: 999px; background: rgba(255,255,255,.15); color: #fff; text-decoration: none;
    font-size: 0.8rem; font-weight: 600; line-height: 1.5rem;
}
.mdtm-staff__link svg { display: block; flex: none; }
.mdtm-staff__link:hover { background: rgba(255,255,255,.28); color: #fff; }
.mdtm-footer .mdtm-social--footer a.mdtm-social__link { color: #fff; }
.mdtm-social--footer .mdtm-social__link--fb { background: #1877f2; }
.mdtm-social--footer :is(.mdtm-social__link--tiktok, .mdtm-social__link--threads, .mdtm-social__link--x) { background: #000; }
.mdtm-social--footer .mdtm-social__link--ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.mdtm-footer .mdtm-social--footer a.mdtm-social__link:hover { filter: brightness(1.15); color: #fff; }

/* Language switcher (html/mod_languages override: "BM | EN" text labels) */
.mdtm-lang :is(ul, .mod-languages) { list-style: none; display: inline-flex; align-items: center; gap: 0.2rem; margin: 0; padding: 0; }
.mdtm-lang li { display: inline-flex; align-items: center; gap: 0.2rem; }
.mdtm-lang li + li::before { content: "|"; opacity: 0.45; }
.mdtm-lang a {
    display: inline-grid; place-items: center; min-width: 1.9rem; min-height: 1.9rem; padding: 0 0.4rem;
    color: #fff; text-decoration: none; font-weight: 600; border-radius: 4px; opacity: 0.8;
}
.mdtm-lang .lang-active a { background: rgba(255,255,255,.2); opacity: 1; }
.mdtm-lang a:hover { background: rgba(255,255,255,.15); opacity: 1; color: #fff; }

/* ---- Row 3: brand ---- */
.mdtm-header { background: rgb(var(--mdtm-bg)); border-bottom: 1px solid rgb(var(--mdtm-line)); }
.mdtm-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; flex-wrap: wrap; }
.mdtm-brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; color: rgb(var(--mdtm-ink)); }
.mdtm-brand__crests { display: inline-flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
/* The three marks are sized to look equally big, not to equal pixel heights: the wide Jata
   Negara would dominate at the same height and the MDTM shield (small centre, thin deer)
   would look smallest. Roughly equal area, with the MDTM logo nudged up. */
.mdtm-brand__crest, .mdtm-brand__logo { width: auto; display: block; }
.mdtm-brand__crest--my { height: 47px; }
.mdtm-brand__crest--kel { height: 54px; }
.mdtm-brand__logo { height: 55px; }
.mdtm-brand__name { display: block; font-family: var(--mdtm-font-head); font-weight: 600; font-size: 1.15rem; line-height: 1.2; }
.mdtm-brand__tag { display: block; font-size: 0.8rem; color: rgb(var(--mdtm-muted)); }
.mdtm-header__search { flex: 0 1 320px; }
.mdtm-header__search .search input, .mdtm-header__search input[type="search"], .mdtm-header__search input.form-control {
    width: 100%; border: 1px solid rgb(var(--mdtm-line)); border-radius: 999px; padding: 0.5rem 1rem;
}
/* Hide the Smart Search field label; the placeholder is enough */
.mdtm-header__search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mdtm-header__search :is(search, .mod-finder) { display: flex; width: 100%; }
.mdtm-header__search .mod-finder :is(.awesomplete, input) { flex: 1 1 auto; min-width: 0; width: 100%; }
.mdtm-header__search .awesomplete > input { max-width: none; } /* Cassiopeia caps it at 200px */

/* The homepage hero has its own large search box; don't show a second one in the header. */
.mdtm-has-hero .mdtm-header__search, .mdtm-has-hero .mdtm-searchtoggle { display: none !important; }

/* Mobile search toggle — hidden on desktop */
.mdtm-searchtoggle {
    display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgb(var(--mdtm-line));
    border-radius: 8px; background: rgb(var(--mdtm-bg)); color: rgb(var(--mdtm-ink)); cursor: pointer;
}
.mdtm-searchtoggle[aria-expanded="true"] { border-color: rgb(var(--mdtm-primary)); color: rgb(var(--mdtm-primary)); }

/* Mobile nav toggle (hamburger) — hidden on desktop */
.mdtm-navtoggle {
    display: none; flex-direction: column; justify-content: center; gap: 4px;
    width: 44px; height: 40px; padding: 0 10px; border: 1px solid rgb(var(--mdtm-line));
    border-radius: 8px; background: rgb(var(--mdtm-bg)); cursor: pointer;
}
.mdtm-navtoggle__bar { display: block; height: 2px; background: rgb(var(--mdtm-ink)); border-radius: 2px; }

/* ---- Main navigation ---- */
.mdtm-nav { background: rgb(var(--mdtm-gov-bg)); }
.mdtm-nav .mdtm-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.mdtm-nav .mdtm-menu > li { position: relative; }
.mdtm-nav .mdtm-menu a {
    display: flex; align-items: center; gap: 0.3rem; color: #fff; text-decoration: none;
    padding: 0.8rem 1.1rem; font-weight: 500; font-family: var(--mdtm-font-head); font-size: 0.95rem;
}
.mdtm-nav .mdtm-menu > li > a { box-shadow: inset 0 -3px 0 transparent; }
.mdtm-nav .mdtm-menu > li > a:hover { background: rgb(var(--mdtm-gov-bg-2)); color: #fff; }
.mdtm-nav .mdtm-menu > li.active > a,
.mdtm-nav .mdtm-menu > li.in-trail > a { background: rgb(var(--mdtm-gov-bg-2)); box-shadow: inset 0 -3px 0 rgb(var(--mdtm-accent)); }
.mdtm-menu__caret { font-size: 0.7rem; opacity: 0.85; }
.mdtm-subtoggle { display: none; }

/* Dropdown submenus. Hidden state uses display:none (not just visibility:hidden) so a deep
   multi-level menu doesn't stretch the document height and leave a blank strip under the footer. */
.mdtm-nav .mdtm-submenu {
    list-style: none; margin: 0; padding: 0.35rem 0; position: absolute; top: 100%; left: 0; z-index: 1000;
    min-width: 230px; background: rgb(var(--mdtm-bg)); border: 1px solid rgb(var(--mdtm-line));
    border-top: 3px solid rgb(var(--mdtm-primary)); border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 28px rgba(0,0,0,.14); display: none;
}
.mdtm-nav .mdtm-menu > li:hover > .mdtm-submenu,
.mdtm-nav .mdtm-menu > li:focus-within > .mdtm-submenu { display: block; }
.mdtm-nav .mdtm-submenu a { color: rgb(var(--mdtm-ink)); padding: 0.55rem 1.1rem; font-size: 0.9rem; font-weight: 500; }
.mdtm-nav .mdtm-submenu a:hover { background: rgb(var(--mdtm-bg-alt)); color: rgb(var(--mdtm-primary)); }
.mdtm-nav .mdtm-submenu li.active > a { color: rgb(var(--mdtm-primary)); font-weight: 600; }
/* Third level: nested flyout becomes an indented block inside the dropdown. Visibility and
   pointer-events follow the parent dropdown; forcing them on left an invisible but hoverable
   list over the page that opened the menu (and swallowed clicks) far below the nav. */
.mdtm-nav .mdtm-submenu .mdtm-submenu {
    position: static; opacity: 1; visibility: inherit; transform: none; box-shadow: none; pointer-events: inherit;
    border: 0; border-top: 0; padding: 0 0 0 0.75rem; min-width: 0;
}
.mdtm-nav .mdtm-submenu .mdtm-submenu a { padding-block: 0.4rem; font-size: 0.85rem; color: rgb(var(--mdtm-muted)); }

/* Footer menus use the same override, rendered vertically */
.mdtm-footer__col .mdtm-menu { list-style: none; margin: 0; padding: 0; display: block; }
.mdtm-footer__col .mdtm-menu li { margin-bottom: 0.15rem; }
/* inline-block + vertical padding keeps each link >= 24px tall (WCAG 2.5.8 target size) */
.mdtm-footer__col .mdtm-menu a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 0.9rem; padding: 0.25rem 0; display: inline-block; }
.mdtm-footer__col .mdtm-menu a:hover { color: rgb(var(--mdtm-accent)); text-decoration: underline; }

/* ---- Main content ---- */
.container-main { padding-block: 1.5rem; }

/* ---- Homepage: FB news (layout A) ---- */
.mdtm-news { margin-block: 1.5rem; }
.mdtm-news__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.mdtm-news__rest { display: flex; flex-direction: column; gap: 0.75rem; }
.mdtm-news-card { background: rgb(var(--mdtm-bg)); border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px; overflow: hidden; }
.mdtm-news-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.mdtm-news-card__media { position: relative; display: block; }
/* Posters are mostly text, so never crop them: the picture sits whole (contain) over a blurred,
   cropped copy of itself that fills the box. */
.mdtm-news-card__media { overflow: hidden; background: rgb(var(--mdtm-bg-alt)); }
.mdtm-news-card__media img { display: block; }
.mdtm-news-card__backdrop {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    filter: blur(18px) saturate(1.1); transform: scale(1.15); opacity: 0.55;
}
.mdtm-news-card__img { position: relative; width: 100%; height: 100%; object-fit: contain; }
.mdtm-news-card--lead .mdtm-news-card__media { aspect-ratio: 16 / 10; max-height: 340px; width: 100%; }
.mdtm-news-card--lead .mdtm-news-card__img { position: absolute; inset: 0; }
.mdtm-news-card:not(.mdtm-news-card--lead) .mdtm-news-card__link { display: flex; gap: 0.85rem; align-items: stretch; }
/* Fixed-width media column; the image is absolutely placed so it NEVER dictates the
   row height — the body text alone drives the card height, and the image fits inside. */
.mdtm-news-card:not(.mdtm-news-card--lead) .mdtm-news-card__media {
    flex: 0 0 120px; position: relative; align-self: stretch; overflow: hidden; background: rgb(var(--mdtm-bg-alt));
}
.mdtm-news-card:not(.mdtm-news-card--lead) .mdtm-news-card__media { min-height: 96px; }
.mdtm-news-card:not(.mdtm-news-card--lead) .mdtm-news-card__img { position: absolute; inset: 0; }
.mdtm-news-card:not(.mdtm-news-card--lead) .mdtm-news-card__body { flex: 1 1 auto; min-width: 0; }
.mdtm-news-card__play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2rem; color: #fff; background: rgba(0,0,0,.25); }

/* Text-only news card (no image): reads as a deliberate text update, not a broken image.
   Keep the same outer border/radius as image cards (consistent outline); only override
   the side-list flex layout, which otherwise expects a media thumbnail. */
.mdtm-news-card.mdtm-news-card--noimg .mdtm-news-card__link { display: block; gap: 0; padding: 0; }
.mdtm-news-card.mdtm-news-card--noimg .mdtm-news-card__body { padding: 0.95rem 1rem; }
.mdtm-news-card__meta { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.mdtm-news-card__meta:empty { display: none; }
.mdtm-news-card.mdtm-news-card--noimg .mdtm-news-card__intro { -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.mdtm-news-card__body { display: block; padding: 0.85rem; }
.mdtm-news-card__title { margin: 0.3rem 0; }
.mdtm-news-card--lead .mdtm-news-card__title { font-size: 1.4rem; line-height: 1.9rem; }
.mdtm-news-card:not(.mdtm-news-card--lead) .mdtm-news-card__title { font-size: 1rem; line-height: 1.35rem; }
.mdtm-news-card__intro { display: block; color: rgb(var(--mdtm-muted)); margin: 0.5rem 0; }
.mdtm-news-card__more { color: rgb(var(--mdtm-primary)); font-weight: 600; white-space: nowrap; }
.mdtm-news-card__link:hover .mdtm-news-card__more { text-decoration: underline; }
.mdtm-news-card__time { display: block; font-size: 0.8125rem; color: rgb(var(--mdtm-muted)); }
.mdtm-badge-new { display: inline-block; background: rgb(var(--mdtm-danger)); color: #fff; font-size: 0.6875rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 3px; letter-spacing: .03em; }
.mdtm-news__all-link {
    display: inline-flex; align-items: center; gap: 0.25rem; color: rgb(var(--mdtm-primary));
    font-weight: 600; font-size: 0.9rem; text-decoration: none; font-family: var(--mdtm-font-head);
}
.mdtm-news__all-link:hover { text-decoration: underline; color: rgb(var(--mdtm-primary-700)); }
/* Lead card footer row: timestamp left, "view all" right — inside the card box */
.mdtm-news-card__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    padding: 0.5rem 0.85rem 0.85rem;
}
.mdtm-news-card__foot .mdtm-news-card__time { margin: 0; }

/* ---- Homepage notices (mod_mdtm_berita, layout notis): dated list of announcements,
   job ads and tenders. Two columns from tablet width; each row is one link. ---- */
.mdtm-notis { margin-block: 1.5rem 2rem; }
.mdtm-notis__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 768px) { .mdtm-notis__list { grid-template-columns: 1fr 1fr; } }
.mdtm-notis__link {
    display: flex; gap: 0.85rem; align-items: flex-start; height: 100%; padding: 0.75rem 0.85rem;
    background: rgb(var(--mdtm-bg)); border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px;
    color: inherit; text-decoration: none;
}
.mdtm-notis__link:hover { border-color: rgb(var(--mdtm-primary)); }
.mdtm-notis__link:hover .mdtm-notis__title { color: rgb(var(--mdtm-primary)); text-decoration: underline; }
.mdtm-notis__date {
    flex: 0 0 3.25rem; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.35rem 0; border-radius: 8px; background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary-700));
    font-family: var(--mdtm-font-head); line-height: 1.1;
}
.mdtm-notis__day { font-size: 1.35rem; font-weight: 700; }
.mdtm-notis__mon { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.mdtm-notis__body { flex: 1 1 auto; min-width: 0; }
.mdtm-notis__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-bottom: 0.25rem; }
.mdtm-notis__tag {
    display: inline-block; font-size: 0.6875rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
    padding: 0.1rem 0.45rem; border-radius: 3px; background: rgb(var(--mdtm-bg-alt)); color: rgb(var(--mdtm-ink));
}
.mdtm-notis__tag--iklan-jawatan { background: rgb(var(--mdtm-success) / .14); color: #14532d; }
.mdtm-notis__tag--tender-sebut-harga { background: rgb(var(--mdtm-warning) / .18); color: rgb(var(--mdtm-ink)); }
.mdtm-notis__title {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-weight: 600; line-height: 1.35;
}
.mdtm-notis__cats { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0; padding: 0; }
.mdtm-notis__cats a {
    display: inline-block; padding: 0.35rem 0.8rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 999px;
    font-size: 0.875rem; color: rgb(var(--mdtm-primary)); text-decoration: none; min-height: 24px;
}
.mdtm-notis__cats a:hover { border-color: rgb(var(--mdtm-primary)); background: rgb(var(--mdtm-primary-50)); }
.mdtm-notis__empty { color: rgb(var(--mdtm-muted)); }

/* ---- Homepage "Tanah Merah dalam angka": tabbed stat panels beside a complaints call-out ---- */
.mdtm-figures { margin-block: 2rem; }
.mdtm-figures .mdtm-section-title { margin-bottom: 1rem; }
.mdtm-figures__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 992px) { .mdtm-figures__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: start; } }

/* Tabs (built by stats.js). Without JS each panel shows under its own heading. */
.mdtm-dstats__tabs {
    display: flex; gap: 0.25rem; margin-bottom: 0.75rem; padding: 0.25rem; overflow-x: auto; scrollbar-width: none;
    background: rgb(var(--mdtm-primary-50)); border-radius: 999px;
}
.mdtm-dstats__tabs::-webkit-scrollbar { display: none; }
.mdtm-dstats__tab {
    flex: 1 0 auto; min-height: 36px; padding: 0.3rem 0.9rem; border: 0; border-radius: 999px; background: transparent;
    font: inherit; font-size: 0.875rem; font-weight: 600; color: rgb(var(--mdtm-primary-700)); cursor: pointer; white-space: nowrap;
}
.mdtm-dstats__tab:hover { background: rgb(var(--mdtm-bg)); }
.mdtm-dstats__tab[aria-selected="true"] { background: rgb(var(--mdtm-primary)); color: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .2); }
.mdtm-dstats__tab:focus-visible { outline: 3px solid rgb(var(--mdtm-accent)); outline-offset: 1px; }
.mdtm-dstats__ph { margin: 1rem 0 0.5rem; font-size: 1rem; }
.mdtm-dstats.is-tabbed .mdtm-dstats__ph { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mdtm-dstats__panel { animation: mdtm-fade .2s ease-out; }
@keyframes mdtm-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mdtm-dstats__panel { animation: none; } }

/* Figure tiles */
.mdtm-figures__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 768px) { .mdtm-figures__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mdtm-figures__list li {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.6rem; align-items: center; align-content: center;
    padding: 0.6rem 0.7rem; background: rgb(var(--mdtm-bg)); border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px;
}
.mdtm-figures__icon {
    grid-row: span 2; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary)); font-size: 0.95rem;
}
.mdtm-figures__num { font-family: var(--mdtm-font-head); font-size: clamp(1.05rem, 0.9rem + 0.45vw, 1.3rem); font-weight: 700; color: rgb(var(--mdtm-primary-700)); line-height: 1.2; white-space: nowrap; }
.mdtm-figures__label { font-size: 0.78rem; line-height: 1.3; color: rgb(var(--mdtm-muted)); }
.mdtm-figures__year {
    display: inline-block; padding: 0 0.3rem; border-radius: 4px; border: 1px solid rgb(var(--mdtm-line));
    font-size: 0.7rem; font-weight: 600; color: rgb(var(--mdtm-ink)); font-variant-numeric: tabular-nums;
}

/* Percentage splits: one stacked bar each, with a legend. */
.mdtm-split-row { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
@media (min-width: 768px) { .mdtm-split-row { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } }
.mdtm-split { padding: 0.6rem 0.8rem; background: rgb(var(--mdtm-bg)); border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px; }
.mdtm-split__cap { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 600; color: rgb(var(--mdtm-ink)); }
.mdtm-split__bar { display: flex; height: 1.4rem; border-radius: 6px; overflow: hidden; background: rgb(var(--mdtm-line)); }
.mdtm-split__bar span { display: grid; place-items: center; min-width: 2px; font-size: 0.7rem; font-weight: 700; color: #fff; background: var(--seg); }
.mdtm-split__legend { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; margin: 0.35rem 0 0; padding: 0; list-style: none; font-size: 0.75rem; color: rgb(var(--mdtm-muted)); }
.mdtm-split__legend b { color: rgb(var(--mdtm-ink)); font-weight: 600; }
.mdtm-split__legend li::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.3rem; border-radius: 2px; background: var(--seg); }
.mdtm-split :is(span, li):nth-child(1) { --seg: #172554; }
.mdtm-split :is(span, li):nth-child(2) { --seg: #1e40af; }
.mdtm-split :is(span, li):nth-child(3) { --seg: #2563eb; }
.mdtm-split :is(span, li):nth-child(4) { --seg: #93c5fd; }
.mdtm-split :is(span, li):nth-child(5) { --seg: #dbeafe; }
.mdtm-split__bar span:nth-child(n+4) { color: #172554; }

.mdtm-figures__src { margin: 0.6rem 0 0; font-size: 0.75rem; line-height: 1.5; color: rgb(var(--mdtm-muted)); }
.mdtm-figures__src a { color: rgb(var(--mdtm-primary)); min-height: 0; display: inline; padding: 0; }
@media (max-width: 575.98px) {
    .mdtm-figures__list li { padding: 0.55rem; column-gap: 0.45rem; }
    .mdtm-figures__icon { width: 1.75rem; height: 1.75rem; font-size: 0.8rem; }
}

/* Complaints call-out: dark card so it reads as the action next to the figures. */
.mdtm-figures__cta {
    position: relative; overflow: hidden; padding: 1.1rem 1.1rem 1.2rem; border-radius: 12px; color: #fff;
    background: linear-gradient(150deg, #172554 0%, #1e40af 100%); box-shadow: 0 8px 20px rgba(23, 37, 84, .25);
}
.mdtm-figures__cta::after {
    content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 8rem; height: 8rem; border-radius: 50%;
    background: rgba(255, 255, 255, .06); pointer-events: none;
}
.mdtm-figures__cta-icon {
    display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; margin-bottom: 0.6rem; border-radius: 10px;
    background: rgb(var(--mdtm-accent)); color: #172554; font-size: 1.05rem;
}
.mdtm-figures__cta p { margin: 0 0 0.6rem; font-size: 0.875rem; line-height: 1.5; color: #dbeafe; }
.mdtm-figures__cta .mdtm-figures__cta-title { margin-bottom: 0.25rem; font-family: var(--mdtm-font-head); font-weight: 700; font-size: 1.1rem; color: #fff; }
.mdtm-figures__cta-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mdtm-figures__cta-tags li {
    display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); font-size: 0.78rem; color: #fff;
}
.mdtm-figures__cta-tags .fa-solid { font-size: 0.7rem; color: rgb(var(--mdtm-accent)); }
.mdtm-figures__btn {
    position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0.55rem 1.1rem;
    border-radius: 8px; background: rgb(var(--mdtm-accent)); color: #172554; font-weight: 700; text-decoration: none;
}
.mdtm-figures__btn:hover { background: #fff; color: #172554; }
.mdtm-figures__btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ---- Homepage feature band (Inovasi MDTM: myLicensePBT) ---- */
.mdtm-feature {
    display: grid; gap: 1.25rem; align-items: center; margin-block: 2rem; padding: 1.5rem;
    border-radius: 14px; color: #fff; overflow: hidden;
    background: radial-gradient(120% 140% at 100% 0%, rgb(var(--mdtm-gov-bg-2)) 0%, rgb(var(--mdtm-gov-bg)) 60%);
}
.mdtm-feature__eyebrow {
    display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.6rem; border-radius: 999px;
    background: rgb(var(--mdtm-accent)); color: rgb(var(--mdtm-gov-bg)); font-size: 0.75rem; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
}
.mdtm-feature__title { margin: 0 0 0.5rem; color: #fff; font-family: var(--mdtm-font-head); font-size: clamp(1.2rem, 0.95rem + 1.3vw, 2rem); line-height: 1.25; }
.mdtm-feature__lead { margin: 0 0 1.1rem; color: rgba(255,255,255,.85); max-width: 34rem; }
.mdtm-feature__cta {
    display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.6rem 1.1rem; border-radius: 10px;
    background: #fff; color: rgb(var(--mdtm-gov-bg)); font-weight: 600; font-family: var(--mdtm-font-head); text-decoration: none;
}
.mdtm-feature__cta:hover { background: rgb(var(--mdtm-accent)); color: rgb(var(--mdtm-gov-bg)); }
.mdtm-feature__cta:focus-visible { outline-color: rgb(var(--mdtm-accent)); }
.mdtm-feature__video {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 10px;
    background: #000; object-fit: cover; box-shadow: 0 12px 32px rgba(0,0,0,.35);
}

/* ---- Link grid (quick services): icon disc + label + one-line description ---- */
.mdtm-pautan { margin-block: 2rem; }
.mdtm-pautan__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
.mdtm-pautan__item {
    display: flex; align-items: flex-start; gap: 0.85rem; padding: 1rem;
    border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; background: rgb(var(--mdtm-bg));
    color: rgb(var(--mdtm-ink)); text-decoration: none; transition: box-shadow .12s, border-color .12s;
}
.mdtm-pautan__item:hover { border-color: rgb(var(--mdtm-primary)); box-shadow: 0 6px 18px rgba(37,99,235,.12); color: rgb(var(--mdtm-ink)); }
.mdtm-pautan__icon {
    flex: 0 0 auto; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px;
    background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary)); font-size: 1.1rem;
}
.mdtm-pautan__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.mdtm-pautan__label { font-weight: 600; font-size: 0.975rem; line-height: 1.35; font-family: var(--mdtm-font-head); }
.mdtm-pautan__item:hover .mdtm-pautan__label { color: rgb(var(--mdtm-primary)); }
.mdtm-pautan__desc { font-size: 0.85rem; line-height: 1.4; color: rgb(var(--mdtm-muted)); }
.mdtm-ext { font-size: 0.8em; color: rgb(var(--mdtm-muted)); }
.mdtm-nowrap { white-space: nowrap; }

/* Compact link row (agency / staff systems) */
.mdtm-pautan-compact { margin-block: 2rem 0; padding-top: 1.25rem; border-top: 1px solid rgb(var(--mdtm-line)); }
.mdtm-pautan-compact__title { font-size: 0.95rem; line-height: 1.4; margin: 0 0 0.75rem; color: rgb(var(--mdtm-muted)); }
.mdtm-pautan-compact__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mdtm-pautan-compact__link {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; min-height: 2.25rem;
    border: 1px solid rgb(var(--mdtm-line)); border-radius: 999px; font-size: 0.875rem;
    color: rgb(var(--mdtm-ink)); text-decoration: none; background: rgb(var(--mdtm-bg));
}
.mdtm-pautan-compact__link:hover { border-color: rgb(var(--mdtm-primary)); color: rgb(var(--mdtm-primary)); }
.mdtm-pautan-compact__link [class^="icon-"] { color: rgb(var(--mdtm-muted)); font-size: 0.85em; }

/* ---- Homepage hero: H1, search, top tasks ---- */
.container-main--hero { padding-top: 0; }
.mdtm-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, rgb(var(--mdtm-primary-50)) 0%, #fff 70%);
    border-bottom: 1px solid rgb(var(--mdtm-line));
}
/* Crest-coloured rule under the hero, as on the section titles */
.mdtm-hero::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
    background: linear-gradient(90deg, rgb(var(--mdtm-accent)) 0 50%, rgb(var(--mdtm-accent-2)) 50% 100%);
}
.mdtm-hero__inner { position: relative; }
.mdtm-hero__inner { padding-block: 1.75rem 2rem; }
.mdtm-hero__title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); line-height: 1.2; margin: 0 0 0.35rem; }
.mdtm-hero__intro { margin: 0 0 1rem; color: rgb(var(--mdtm-muted)); }
.mdtm-hero__search { display: flex; max-width: 40rem; border: 2px solid rgb(var(--mdtm-primary)); border-radius: 12px; background: #fff; overflow: hidden; }
.mdtm-hero__search:focus-within { box-shadow: 0 0 0 4px rgba(37,99,235,.2); }
.mdtm-hero__search input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0.8rem 1rem; font: inherit; font-size: 1.05rem; outline: none; background: transparent; }
.mdtm-hero__search button {
    display: inline-flex; align-items: center; gap: 0.4rem; border: 0; padding: 0 1.1rem; cursor: pointer;
    background: rgb(var(--mdtm-primary)); color: #fff; font: inherit; font-weight: 600;
}
.mdtm-hero__search button:hover { background: rgb(var(--mdtm-primary-700)); }
.mdtm-hero__search button span { display: none; }
.mdtm-hero__tasks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
/* Three tasks sit on one line (same width as the direct-line cards below); two or four stay 2x2. */
.mdtm-hero__tasks:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
.mdtm-hero__task {
    display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 0.85rem;
    background: #fff; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px;
    color: rgb(var(--mdtm-ink)); text-decoration: none; transition: border-color .12s, box-shadow .12s;
}
.mdtm-hero__task:hover { border-color: rgb(var(--mdtm-primary)); box-shadow: 0 6px 18px rgba(37,99,235,.12); color: rgb(var(--mdtm-ink)); }
.mdtm-hero__icon {
    display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px;
    background: rgb(var(--mdtm-primary)); color: #fff; font-size: 1.1rem;
}
.mdtm-hero__icon.fa-whatsapp { background: #128c7e; font-size: 1.4rem; } /* recognisable at a glance */
.mdtm-hero__text { display: flex; flex-direction: column; gap: 0.1rem; }
.mdtm-hero__label { font-family: var(--mdtm-font-head); font-weight: 600; font-size: 0.95rem; line-height: 1.3; }
.mdtm-hero__task:hover .mdtm-hero__label { color: rgb(var(--mdtm-primary)); }
.mdtm-hero__desc { font-size: 0.8125rem; line-height: 1.4; color: rgb(var(--mdtm-muted)); }
/* Direct phone lines under the hero tasks (Unit Sewaan, Unit Cukai, Unit Pelesenan): one small card each */
.mdtm-hero__lines { margin-top: 0.6rem; }
.mdtm-hero__lines ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; }
.mdtm-hero__line { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.65rem 0.6rem; overflow: hidden; background: #fff; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; min-width: 0; }
.mdtm-hero__line-text { display: flex; flex-direction: column; min-width: 0; }
.mdtm-hero__line-label { font-family: var(--mdtm-font-head); font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.mdtm-hero__line-desc { font-size: 0.75rem; line-height: 1.3; color: rgb(var(--mdtm-muted)); }
.mdtm-hero__line-actions { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.mdtm-hero__line-tel { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; min-height: 2rem; padding: 0 0.4rem; white-space: nowrap; border-radius: 8px; background: rgb(var(--mdtm-primary)); color: #fff; font-weight: 600; font-size: 0.75rem; letter-spacing: -0.01em; text-decoration: none; }
.mdtm-hero__line-tel .icon-phone { font-size: 0.7rem; }
.mdtm-hero__line-tel:hover { background: rgb(var(--mdtm-primary-700)); color: #fff; }
.mdtm-hero__line-wa { display: grid; place-items: center; width: 2rem; height: 2rem; flex: none; border-radius: 8px; background: #128c7e; color: #fff; font-size: 1.1rem; text-decoration: none; }
.mdtm-hero__line-wa:hover { background: #0d6e63; color: #fff; }
/* Phones: tasks and unit cards flow as one 2-column grid of equal, compact cards (no empty
   cell between the 3 tasks and the 3 units). */
@media (max-width: 47.99rem) {
    .mdtm-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 1.25rem; }
    .mdtm-hero__actions .mdtm-hero__tasks, .mdtm-hero__actions .mdtm-hero__lines, .mdtm-hero__actions .mdtm-hero__lines ul { display: contents; }
    .mdtm-hero__actions .mdtm-hero__tasks > li { min-width: 0; }
    .mdtm-hero__task { padding: 0.65rem 0.6rem; gap: 0.45rem; }
    .mdtm-hero__icon { width: 2rem; height: 2rem; border-radius: 8px; font-size: 1rem; }
    .mdtm-hero__icon.fa-whatsapp { font-size: 1.1rem; }
    .mdtm-hero__label { font-size: 0.9rem; }
    .mdtm-hero__desc { font-size: 0.75rem; line-height: 1.3; }
}
/* Hero banner: one image, or a carousel when there are several (carousel.js adds controls) */
.mdtm-carousel { position: relative; max-width: 44rem; margin-top: 1.5rem; }
.mdtm-carousel__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(15,23,42,.14); }
.mdtm-carousel__track::-webkit-scrollbar { display: none; }
.mdtm-carousel__slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 16 / 9; }
.mdtm-carousel__slide a, .mdtm-carousel__slide img { display: block; width: 100%; height: 100%; }
.mdtm-carousel__slide { position: relative; overflow: hidden; }
/* The picture is sized to its own content (not stretched to the box), so its edges can fade
   into the blurred copy behind it instead of meeting it in a hard line. */
.mdtm-carousel__slide a { position: relative; }
.mdtm-carousel__slide img.mdtm-carousel__img {
    position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 0.9rem, #000 calc(100% - 0.9rem), transparent),
                        linear-gradient(to bottom, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent, #000 0.9rem, #000 calc(100% - 0.9rem), transparent),
                linear-gradient(to bottom, transparent, #000 0.75rem, #000 calc(100% - 0.75rem), transparent);
    mask-composite: intersect;
}
/* carousel.js: near-matching shapes fill the box, with only a thin feathered edge */
.mdtm-carousel__slide img.mdtm-carousel__img.is-fill {
    width: 100%; height: 100%; max-width: none; max-height: none;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 0.4rem, #000 calc(100% - 0.4rem), transparent),
                        linear-gradient(to bottom, transparent, #000 0.4rem, #000 calc(100% - 0.4rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 0.4rem, #000 calc(100% - 0.4rem), transparent),
                linear-gradient(to bottom, transparent, #000 0.4rem, #000 calc(100% - 0.4rem), transparent);
}
.mdtm-carousel__slide img.mdtm-carousel__backdrop { position: absolute; inset: 0; object-fit: cover; filter: blur(28px) saturate(1.1) brightness(.92); transform: scale(1.25); }
/* carousel.js: slides stacked in one cell and cross-faded */
.mdtm-carousel.is-fade .mdtm-carousel__track { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; scroll-snap-type: none; }
.mdtm-carousel.is-fade .mdtm-carousel__slide { grid-area: 1 / 1; width: 100%; opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s linear .8s; }
.mdtm-carousel.is-fade .mdtm-carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s ease; }
@media (prefers-reduced-motion: reduce) { .mdtm-carousel.is-fade .mdtm-carousel__slide { transition: none; } }
/* Controls sit under the picture, never over it: posters carry text right to their edges */
.mdtm-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.5rem; }
.mdtm-carousel__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 50%; background: rgb(var(--mdtm-bg)); color: rgb(var(--mdtm-primary)); font-size: 1.75rem; line-height: 1; padding-bottom: 0.15rem; cursor: pointer; }
.mdtm-carousel__btn--pause { font-size: 1rem; padding-bottom: 0; }
.mdtm-carousel__btn:hover { background: rgb(var(--mdtm-primary-50)); }
.mdtm-carousel__dots { display: flex; gap: 0.1rem; }
.mdtm-carousel__dot { width: 1.5rem; height: 1.5rem; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.mdtm-carousel__dot::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgb(var(--mdtm-line)); transition: width .2s; }
.mdtm-carousel__dot[aria-current="true"]::before { width: 1.1rem; border-radius: 999px; background: rgb(var(--mdtm-primary)); }

/* Section heading helper (module titles on homepage) */
.moduletitle, .mod-mdtm h2, .mdtm-section-title {
    font-family: var(--mdtm-font-head); font-size: 1.5rem; margin: 1.5rem 0 1rem; position: relative; padding-bottom: 0.55rem;
}
/* Crest-coloured underline: yellow then red */
.mdtm-section-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, rgb(var(--mdtm-accent)) 0 60%, rgb(var(--mdtm-accent-2)) 60% 100%);
}
.mdtm-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 1rem; }
.mdtm-section-head .mdtm-section-title { margin: 0; }
.mdtm-section-head .mdtm-news__all-link { padding-block: 0.25rem; margin-bottom: 0.4rem; }

/* ---- Article body: FB imported posts ---- */
/* Main article image shouldn't blow past content width */
.item-page img, .com-content-article img, .mdtm-article img { max-width: 100%; height: auto; }

/* Tables pasted into articles (stats, KPI, fee schedules) carry fixed pt widths from Word/Excel:
   cap them to the column and scroll sideways instead of widening the page. :where() keeps the
   specificity at element level so purpose-built tables (officer directory) still win. */
:where(.com-content-article__body) table:where(:not(.mdtm-dir)) {
    display: block; max-width: 100%; width: auto !important; overflow-x: auto; border-collapse: collapse; margin: 1rem 0;
}
/* Fixed row/table heights from Word would clip rows now that the table scrolls. */
:where(.com-content-article__body table:not(.mdtm-dir)), :where(.com-content-article__body table:not(.mdtm-dir)) :is(tr, td, th) { height: auto !important; }

/* Price lists (Sewaan): item | rate, rates right-aligned with tabular figures */
.com-content-article__body table.mdtm-price { display: table; width: 100% !important; max-width: 44rem; border-collapse: collapse; margin: 0.5rem 0 2rem; font-size: 0.95rem; }
.mdtm-price th { text-align: left; font-family: var(--mdtm-font-head); font-weight: 600; font-size: 0.85rem; color: rgb(var(--mdtm-muted)); padding: 0.5rem 0.75rem; border-bottom: 2px solid rgb(var(--mdtm-ink)); }
.mdtm-price td { padding: 0.65rem 0.75rem; border-bottom: 1px solid rgb(var(--mdtm-line)); vertical-align: top; }
/* Rows only: no cell grid from the generic article-table styles */
.com-content-article__body table.mdtm-price, .com-content-article__body .mdtm-price :is(th, td) { border-top: 0; border-left: 0; border-right: 0; }
.com-content-article__body .mdtm-price th { background: transparent; }
.mdtm-price tbody tr:nth-child(even) { background: rgb(var(--mdtm-bg-alt)); }
.mdtm-price :is(th, td):last-child { text-align: right; white-space: nowrap; }
.mdtm-price__amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.mdtm-price__unit { color: rgb(var(--mdtm-muted)); font-size: 0.85em; }
.com-content-article__body h2[id] { scroll-margin-top: 1rem; }
/* In-page jump links */
.mdtm-toc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 0.5rem; }
.mdtm-toc a {
    display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.35rem 0.9rem; border-radius: 999px;
    border: 1px solid rgb(var(--mdtm-line)); color: rgb(var(--mdtm-ink)); text-decoration: none; font-size: 0.9rem; font-weight: 500;
}
.mdtm-toc a:hover { border-color: rgb(var(--mdtm-primary)); color: rgb(var(--mdtm-primary)); }
/* Call-to-action box at the end of a page */
.mdtm-callout { max-width: 44rem; margin: 1.5rem 0; padding: 1.25rem; border-radius: 12px; background: rgb(var(--mdtm-primary-50)); border: 1px solid rgb(var(--mdtm-line)); }
.mdtm-callout p { margin: 0 0 0.75rem; }
.mdtm-callout__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 !important; }
.mdtm-callout__btn {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.55rem 1.1rem; border-radius: 10px;
    background: rgb(var(--mdtm-primary)); color: #fff; font-weight: 600; text-decoration: none;
}
.mdtm-callout__btn:hover { background: rgb(var(--mdtm-primary-700)); color: #fff; }
.mdtm-callout__btn--alt { background: #fff; color: rgb(var(--mdtm-primary)); border: 1px solid rgb(var(--mdtm-primary)); }
.mdtm-callout__btn--alt:hover { background: rgb(var(--mdtm-primary)); color: #fff; }

/* Print / PDF: the article only */
@media print {
    .mdtm-skip, .mdtm-masthead, .mdtm-utility, .mdtm-header__search, .mdtm-searchtoggle, .mdtm-navtoggle, .mdtm-nav, .mdtm-footer,
    .mod-breadcrumbs__wrapper, nav.mod-breadcrumbs, .breadcrumb, .mdtm-toc, .mdtm-callout { display: none !important; }
    .mdtm-header { border: 0; }
    .container-main { padding-block: 0.5rem; }
    .mdtm-price tbody tr:nth-child(even) { background: #f3f4f6; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .mdtm-price tr, .com-content-article__body h2 { break-inside: avoid; }
    .com-content-article__body table.mdtm-price { font-size: 0.85rem; margin-bottom: 1rem; }
    .mdtm-price :is(th, td) { padding-block: 0.3rem; }
    .com-content-article__body h2 { font-size: 1.25rem; margin: 1rem 0 0.25rem; }
    .com-content-article__body h2 { break-after: avoid; }
}

/* PDF document card (replaces the old DearFlip flipbooks) */
.mdtm-pdf {
    display: flex; gap: 1rem; align-items: flex-start; max-width: 40rem; margin: 1.25rem 0; padding: 1.1rem;
    border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; background: rgb(var(--mdtm-bg-alt));
}
.mdtm-pdf__badge {
    flex: 0 0 auto; display: grid; place-items: center; width: 3.25rem; height: 4rem; border-radius: 6px;
    background: rgb(var(--mdtm-danger)); color: #fff; font: 700 0.8rem var(--mdtm-font-head); letter-spacing: .04em;
}
.mdtm-pdf__body p { margin: 0; }
.mdtm-pdf__title { font-family: var(--mdtm-font-head); font-weight: 600; font-size: 1.05rem; }
.mdtm-pdf__meta { font-size: 0.875rem; color: rgb(var(--mdtm-muted)); }
.mdtm-pdf .mdtm-pdf__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.mdtm-pdf__btn {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.45rem 1rem; border-radius: 8px;
    background: rgb(var(--mdtm-primary)); color: #fff; font-weight: 600; text-decoration: none;
}
.mdtm-pdf__btn:hover { background: rgb(var(--mdtm-primary-700)); color: #fff; }
.mdtm-pdf__btn--alt { background: #fff; color: rgb(var(--mdtm-primary)); border: 1px solid rgb(var(--mdtm-primary)); }
.mdtm-pdf__btn--alt:hover { background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary-700)); }
:where(.com-content-article__body table:not(.mdtm-dir)) :is(td, th) { padding: 0.4rem 0.6rem; border: 1px solid rgb(var(--mdtm-line)); vertical-align: top; }
:where(.com-content-article__body table:not(.mdtm-dir)) th { background: rgb(var(--mdtm-bg-alt)); }
:where(.com-content-article__body) iframe { max-width: 100%; }
/* Photos/logos inside layout tables otherwise shrink to a sliver in narrow cells on phones. */
:where(.com-content-article__body) td img { min-width: min(7.5rem, 30vw); }
:where(.com-content-article__body) .mdtm-list-plain, :where(.com-content-article__body) .mdtm-list-plain ol { list-style: none; padding-left: 0.5rem; }

/* Article info block: the "Butiran" (Details) heading adds noise above a lone date line;
   keep it for screen readers only. */
.article-info .article-info-term { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Feedback form ({mdtm-borang}, plg_system_mdtmborang) */
.mdtm-borang {
    max-width: 760px; margin: 1.5rem 0; padding: 1.5rem; border: 1px solid rgb(var(--mdtm-line));
    border-top: 4px solid rgb(var(--mdtm-primary)); border-radius: 12px; scroll-margin-top: 1rem;
    /* Tinted panel with white fields so the form stands apart from the white page */
    background: rgb(var(--mdtm-bg-alt)); box-shadow: 0 4px 16px rgb(15 23 42 / .06);
}
.mdtm-borang__field { margin: 0 0 1.1rem; padding: 0; border: 0; min-width: 0; }
.mdtm-borang__field > label, .mdtm-borang__field > legend {
    display: block; margin-bottom: 0.35rem; font-size: 1rem; font-weight: 600; color: rgb(var(--mdtm-ink));
}
.mdtm-borang__req { color: rgb(var(--mdtm-danger)); }
.mdtm-borang input[type="text"], .mdtm-borang input[type="email"], .mdtm-borang input[type="tel"],
.mdtm-borang textarea {
    display: block; width: 100%; padding: 0.65rem 0.8rem; font: inherit; color: rgb(var(--mdtm-ink));
    background: #fff; border: 1px solid rgb(var(--mdtm-line)); border-radius: 8px;
}
.mdtm-borang textarea { resize: vertical; min-height: 8rem; }
.mdtm-borang input:focus-visible, .mdtm-borang textarea:focus-visible {
    outline: 3px solid rgb(var(--mdtm-primary) / .25); border-color: rgb(var(--mdtm-primary));
}
.mdtm-borang input[aria-invalid="true"], .mdtm-borang textarea[aria-invalid="true"] { border-color: rgb(var(--mdtm-danger)); }
.mdtm-borang__label { display: block; margin-bottom: 0.35rem; font-weight: 600; color: rgb(var(--mdtm-ink)); }
/* Native file input hidden behind a BM-labelled picker (browser text is always English) */
.mdtm-borang__file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.mdtm-borang__field > .mdtm-borang__pick {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.75rem; margin: 0; font-weight: 400;
    border: 1px dashed rgb(var(--mdtm-line)); border-radius: 8px; background: #fff; cursor: pointer;
}
.mdtm-borang__pick-btn {
    padding: 0.4rem 0.9rem; border: 1px solid rgb(var(--mdtm-primary)); border-radius: 6px;
    color: rgb(var(--mdtm-primary)); background: #fff; font-weight: 600;
}
.mdtm-borang__pick-name { color: rgb(var(--mdtm-muted)); font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.mdtm-borang__picked { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.mdtm-borang__picked:empty { display: none; }
.mdtm-borang__picked li {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.4rem 0.4rem 0.75rem;
    background: #fff; border: 1px solid rgb(var(--mdtm-line)); border-radius: 6px; font-size: 0.9rem;
}
.mdtm-borang__picked span { min-width: 0; overflow-wrap: anywhere; }
.mdtm-borang__picked button {
    flex: none; padding: 0.25rem 0.7rem; font: inherit; border: 1px solid rgb(var(--mdtm-danger) / .5);
    border-radius: 6px; background: #fff; color: rgb(var(--mdtm-danger)); cursor: pointer;
}
.mdtm-borang__file:focus-visible + .mdtm-borang__pick { outline: 3px solid rgb(var(--mdtm-primary) / .35); outline-offset: 2px; }
.mdtm-borang__file[aria-invalid="true"] + .mdtm-borang__pick { border-color: rgb(var(--mdtm-danger)); }
/* Form + side panel */
.mdtm-borang-wrap { display: grid; gap: 1.5rem; margin: 1.5rem 0; align-items: start; }
.mdtm-borang-wrap .mdtm-borang { margin: 0; }
@media (min-width: 992px) { .mdtm-borang-wrap { grid-template-columns: minmax(0, 760px) minmax(240px, 1fr); } }
.mdtm-borang-aside { display: grid; gap: 1rem; }
.mdtm-borang-aside__box { padding: 1.25rem; border-radius: 12px; background: rgb(var(--mdtm-primary-50)); }
.mdtm-borang-aside__box h2 { margin: 0 0 0.75rem; font-size: 1.05rem; color: rgb(var(--mdtm-ink)); }
.mdtm-borang-aside__steps { margin: 0; padding-left: 1.25rem; }
.mdtm-borang-aside__steps li + li, .mdtm-borang-aside__contact li + li { margin-top: 0.5rem; }
.mdtm-borang-aside__contact { margin: 0; padding: 0; list-style: none; }
.mdtm-borang__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 600px) {
    .mdtm-borang { padding: 1rem; }
    .mdtm-borang__row { grid-template-columns: 1fr; }
}
.mdtm-borang__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.mdtm-borang__chip { position: relative; cursor: pointer; }
.mdtm-borang__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mdtm-borang__chip span {
    display: inline-block; padding: 0.45rem 1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 999px;
    background: #fff; color: rgb(var(--mdtm-ink));
}
.mdtm-borang__chip input:checked + span {
    background: rgb(var(--mdtm-primary)); border-color: rgb(var(--mdtm-primary)); color: #fff;
}
.mdtm-borang__chip input:focus-visible + span { outline: 3px solid rgb(var(--mdtm-primary) / .35); outline-offset: 2px; }
.mdtm-borang__hint { margin: 0.35rem 0 0; font-size: 0.875rem; color: rgb(var(--mdtm-muted)); }
.mdtm-borang__err { margin: 0.35rem 0 0; font-size: 0.875rem; color: rgb(var(--mdtm-danger)); font-weight: 600; }
.mdtm-borang__consent label { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; }
.mdtm-borang__consent input { margin-top: 0.3rem; flex: none; width: 1.1rem; height: 1.1rem; }
.mdtm-borang__summary {
    margin-bottom: 1.25rem; padding: 0.9rem 1.1rem; border-left: 4px solid rgb(var(--mdtm-danger));
    background: rgb(var(--mdtm-danger) / .07); border-radius: 0 8px 8px 0;
}
.mdtm-borang__summary p, .mdtm-borang__summary ul { margin: 0; }
.mdtm-borang__summary ul { margin-top: 0.35rem; padding-left: 1.2rem; }
/* Honeypot: off-screen for people, still filled by naive bots */
.mdtm-borang__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mdtm-borang__btn {
    padding: 0.75rem 1.6rem; font: inherit; font-weight: 700; border: 0; border-radius: 8px; cursor: pointer;
    background: rgb(var(--mdtm-primary)); color: #fff;
}
.mdtm-borang__btn:hover { background: rgb(var(--mdtm-primary-700)); }
.mdtm-borang__btn:focus-visible { outline: 3px solid rgb(var(--mdtm-accent)); outline-offset: 2px; }
.mdtm-borang--done { border-left: 4px solid rgb(var(--mdtm-success)); }
.mdtm-borang__done-title { font-size: 1.15rem; font-weight: 700; color: rgb(var(--mdtm-ink)); }
.mdtm-borang__ref { font-size: 1.1rem; letter-spacing: .03em; }

/* Video embed keeps a 16:9 box */
.mdtm-video { position: relative; width: 100%; max-width: 720px; margin: 1.25rem 0; aspect-ratio: 16 / 9; }
.mdtm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 10px; }
.mdtm-video { background: #0f172a; border-radius: 10px; }
/* Portrait videos (importer marks them from the thumbnail's shape; reels can be either way):
   a 9:16 box instead of cropping them into 16:9 */
.mdtm-video--portrait { aspect-ratio: 9 / 16; max-width: min(360px, 100%); margin-inline: auto; }
/* The video already shows the post's picture; skip the duplicate lead image */
.item-page:has(.mdtm-video) .item-image { display: none; }
/* video.js: Facebook SDK player fills the box; our play button sits over Facebook's own
   (a click inside the cross-site frame does not start playback in Safari) */
.mdtm-video .fb-video, .mdtm-video .fb-video > span, .mdtm-video .fb-video iframe {
    position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; border: 0; border-radius: 10px;
}
/* The SDK keeps its iframe visibility:hidden in Safari although the player is ready */
.mdtm-video .fb-video iframe { visibility: visible !important; }
.mdtm-video__play {
    position: absolute; inset: 0; margin: auto; z-index: 2; display: grid; place-items: center;
    width: 76px; height: 76px; padding: 0 0 0 5px; border: 2px solid #fff; border-radius: 50%;
    background: rgba(15, 23, 42, .6); color: #fff; cursor: pointer;
}
.mdtm-video__play:hover, .mdtm-video__play:focus-visible { background: rgba(37, 99, 235, .9); }
.mdtm-video__play[hidden] { display: none; }

/* Imported-post photo gallery — thumbnail grid, not a full-size vertical stack */
.mdtm-gallery {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; margin: 1.25rem 0;
}
.mdtm-gallery__item {
    display: block; border-radius: 8px; overflow: hidden; border: 1px solid rgb(var(--mdtm-line));
    aspect-ratio: 4 / 3; background: rgb(var(--mdtm-bg-alt));
}
.mdtm-gallery__item img {
    width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s;
}
.mdtm-gallery__item:hover img { transform: scale(1.04); }
/* Few extra photos (e.g. a 2-photo post): show them large, not as one small thumbnail. */
.mdtm-gallery:has(> .mdtm-gallery__item:only-child) { grid-template-columns: minmax(0, 32rem) !important; }
.mdtm-gallery:has(> .mdtm-gallery__item:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

.mdtm-fb-link { display: inline-block; margin-top: 1rem; color: rgb(var(--mdtm-primary)); font-weight: 600; text-decoration: none; }
.mdtm-fb-link::before { content: "↗ "; }
.mdtm-fb-link:hover { text-decoration: underline; }

/* ---- News article page (menus tagged pageclass "mdtm-page-berita") ---- */
.mdtm-page-berita .item-page { max-width: 50rem; }
.mdtm-page-berita .item-page .page-header h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); line-height: 1.25; }
/* Lead image: full column width above the text, never floated beside it */
.item-page .item-image { float: none; margin: 1rem 0 1.5rem; }
.item-page .item-image img {
    width: 100%; max-height: 70vh; object-fit: contain; display: block;
    border-radius: 10px; background: rgb(var(--mdtm-bg-alt));
}
.mdtm-page-berita .com-content-article__body { font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
/* The body already ends with "Lihat di Facebook"; drop Joomla's duplicate link list above it */
.item-page:has(.mdtm-fb-link) .com-content-article__links { display: none; }

/* Photo viewer (gallery.js) */
.mdtm-lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: rgb(12 12 12); color: #fff; overflow: hidden;
}
.mdtm-lightbox[open] { display: grid; grid-template-columns: auto 1fr auto; align-items: center; }
.mdtm-lightbox::backdrop { background: rgb(12 12 12); }
.mdtm-lightbox__fig { margin: 0; display: grid; place-items: center; gap: 0.5rem; min-width: 0; height: 100%; padding: 3.5rem 0 1rem; }
.mdtm-lightbox__fig img { max-width: 100%; max-height: calc(100dvh - 6rem); object-fit: contain; }
.mdtm-lightbox__count { font-size: 0.875rem; opacity: 0.85; }
.mdtm-lightbox button {
    background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 999px; cursor: pointer;
    width: 3rem; height: 3rem; font-size: 1.75rem; line-height: 1; display: grid; place-items: center; margin: 0.5rem;
}
.mdtm-lightbox button:hover { background: rgba(255,255,255,.25); }
.mdtm-lightbox__close { position: absolute; top: 0.25rem; right: 0.25rem; }
.mdtm-lightbox.is-single .mdtm-lightbox__nav { visibility: hidden; }

/* ---- News listing (html/com_content/category/blog.php) ---- */
.mdtm-blog__title { font-family: var(--mdtm-font-head); font-size: 1.75rem; margin: 0.5rem 0 1.25rem; }
.mdtm-blog__desc { margin: -0.5rem 0 1.25rem; color: rgb(var(--mdtm-muted)); }
.mdtm-blog__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.mdtm-blog-card { background: rgb(var(--mdtm-bg)); border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px; overflow: hidden; transition: box-shadow .12s, border-color .12s; }
.mdtm-blog-card:hover { border-color: rgb(var(--mdtm-primary)); box-shadow: 0 6px 18px rgba(37,99,235,.12); }
.mdtm-blog-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; }
.mdtm-blog-card__media { position: relative; display: block; aspect-ratio: 16 / 10; background: rgb(var(--mdtm-bg-alt)); overflow: hidden; }
.mdtm-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mdtm-blog-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding: 0.9rem 1rem 1.1rem; }
.mdtm-blog-card__title {
    font-family: var(--mdtm-font-head); font-size: 1.05rem; line-height: 1.4; margin: 0; color: rgb(var(--mdtm-ink));
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.mdtm-blog-card__link:hover .mdtm-blog-card__title { color: rgb(var(--mdtm-primary)); }
.mdtm-blog-card__time { font-size: 0.8125rem; color: rgb(var(--mdtm-muted)); }
.mdtm-blog-card__intro {
    font-size: 0.9rem; color: rgb(var(--mdtm-muted)); line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
/* Text-only post (no picture, no logo stand-in): the text takes the card, with more of the intro. */
.mdtm-blog-card--noimg { border-top: 3px solid rgb(var(--mdtm-primary)); }
.mdtm-blog-card--noimg .mdtm-blog-card__intro { -webkit-line-clamp: 8; line-clamp: 8; }
.mdtm-blog__nav { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 2rem; }
.mdtm-blog__counter { margin: 0; font-size: 0.875rem; color: rgb(var(--mdtm-muted)); }

/* Pagination: wrap instead of overflowing; on phones keep only first/prev, the current page
   with its neighbours, and next/last (the first two and last two items are the arrows). */
.pagination { flex-wrap: wrap; justify-content: center; gap: 0.25rem; margin: 0; }
@media (max-width: 47.99rem) {
    .pagination .page-item:not(:nth-child(-n+2)):not(:nth-last-child(-n+2)):not(.active):not(:has(+ .active)):not(.active + .page-item) { display: none; }
}

/* ---- Breadcrumbs ---- */
.mod-breadcrumbs__wrapper { margin-bottom: 0.75rem; }
.mod-breadcrumbs__wrapper nav, .mdtm-shell .breadcrumb { background: none; padding: 0; margin: 0; font-size: 0.875rem; flex-wrap: wrap; }
/* mod_breadcrumbs hard-codes Bootstrap px-3 py-2 (!important utilities); align with the page edge */
.mdtm-shell .mod-breadcrumbs.breadcrumb { padding: 0 !important; }
.mdtm-shell .breadcrumb-item { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdtm-shell .breadcrumb a { color: rgb(var(--mdtm-primary)); text-decoration: none; display: inline-block; padding-block: 0.2rem; } /* >= 24px target */
.mdtm-shell .breadcrumb a:hover { text-decoration: underline; }

/* ---- Peta Laman (menus embedded with {loadmoduleid}) ---- */
.mdtm-sitemap h2 { font-family: var(--mdtm-font-head); font-size: 1.2rem; margin: 1.75rem 0 0.5rem; }
.mdtm-sitemap ul { list-style: none; margin: 0; padding-left: 1.1rem; border-left: 2px solid rgb(var(--mdtm-line)); }
.mdtm-sitemap > ul { padding-left: 0; border-left: 0; }
.mdtm-sitemap li { margin: 0.15rem 0; }
.mdtm-sitemap a { display: inline-block; padding-block: 0.2rem; }
.mdtm-sitemap .mdtm-menu__caret { display: none; }

/* ---- Officer profile card (Profil Setiausaha etc.): photo, name, post, facts ---- */
.mdtm-profile {
    display: grid; gap: 1.5rem; max-width: 56rem; padding: 1.5rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 16px;
    background: linear-gradient(135deg, rgb(var(--mdtm-primary-50)) 0%, #fff 55%);
}
.mdtm-profile__photo { margin: 0; display: flex; align-items: flex-end; justify-content: center; border-radius: 12px; overflow: hidden;
    background: radial-gradient(circle at 50% 35%, #fff 0%, rgb(var(--mdtm-primary-50)) 70%); }
.mdtm-profile__photo img { display: block; width: auto; max-width: 100%; height: 22rem; object-fit: contain; }
.mdtm-profile__role { margin: 0 0 0.35rem; font-size: 0.8125rem; line-height: 1.4; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgb(var(--mdtm-primary)); }
.mdtm-profile__name { margin: 0 0 1.25rem; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); line-height: 1.25; }
.mdtm-profile__name::after { content: ""; display: block; width: 3rem; height: 4px; margin-top: 0.75rem; border-radius: 2px;
    background: linear-gradient(90deg, rgb(var(--mdtm-accent)) 0 50%, rgb(var(--mdtm-accent-2)) 50% 100%); }
.mdtm-profile__facts { display: grid; gap: 0.9rem 1.5rem; margin: 0; }
.mdtm-profile__facts dt { font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--mdtm-muted)); }
.mdtm-profile__facts dd { margin: 0.1rem 0 0; font-weight: 500; }
@media (min-width: 48rem) {
    .mdtm-profile { grid-template-columns: 16rem 1fr; gap: 2rem; padding: 2rem; align-items: center; }
    .mdtm-profile__photo img { height: 24rem; }
    .mdtm-profile__facts { grid-template-columns: 1fr 1fr; }
    .mdtm-profile__wide { grid-column: 1 / -1; }
}

/* Portrait that fills its box (a cropped photo with its own backdrop) */
.mdtm-profile__photo--fill img { width: 100%; height: 22rem; object-fit: cover; object-position: 50% 15%; }
.mdtm-profile__more { max-width: 56rem; margin: 1rem 0 0; text-align: right; font-weight: 600; }

/* ---- Message from the council head (Perutusan YDP): letter beside portrait ---- */
.mdtm-message { display: grid; gap: 1.5rem; max-width: 62rem; }
.mdtm-message__from { display: grid; grid-template-columns: 6rem 1fr; gap: 0 1rem; align-items: center; }
.mdtm-message__from img { grid-row: span 3; width: 6rem; height: 6rem; object-fit: cover; object-position: 50% 25%; border-radius: 12px; }
.mdtm-message__from img[height="612"] { object-position: 50% 0; }
.mdtm-message__name { margin: 0; font-family: var(--mdtm-font-head); font-weight: 600; line-height: 1.3; }
.mdtm-message__post { margin: 0.2rem 0 0; font-size: 0.875rem; line-height: 1.45; color: rgb(var(--mdtm-muted)); }
.mdtm-message__more { margin: 0.35rem 0 0; font-size: 0.875rem; font-weight: 600; }
.mdtm-message__text { max-width: 68ch; font-size: 1.05rem; line-height: 1.75; }
.mdtm-message__text p { margin: 0 0 1rem; }
.mdtm-message__salam { font-family: var(--mdtm-font-head); font-size: 1.15rem; font-weight: 600; color: rgb(var(--mdtm-primary)); }
.mdtm-message__motto {
    margin: 1.5rem 0; padding: 1rem 1.25rem; border-left: 4px solid rgb(var(--mdtm-accent)); border-radius: 0 12px 12px 0;
    background: rgb(var(--mdtm-primary-50)); font-family: var(--mdtm-font-head); font-weight: 600; font-style: italic; line-height: 1.5;
}
.mdtm-message__motto p { margin: 0; }
.mdtm-message__motto p + p { margin-top: 0.35rem; }
.mdtm-message__sign { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgb(var(--mdtm-line)); line-height: 1.5; }
@media (min-width: 48rem) {
    .mdtm-message { grid-template-columns: 15rem 1fr; gap: 2.5rem; align-items: start; }
    .mdtm-message__from { position: sticky; top: 1.5rem; display: block; padding: 1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 16px;
        background: linear-gradient(180deg, rgb(var(--mdtm-primary-50)) 0%, #fff 60%); }
    .mdtm-message__from img { width: 100%; height: auto; aspect-ratio: 6 / 5; object-position: 50% 30%; margin-bottom: 0.85rem; }
    /* Portrait photo (e.g. a cut-out on white): show it upright from the top, face included. */
    .mdtm-message__from img[height="612"] { aspect-ratio: 4 / 5; object-position: 50% 0; background: #fff; }
    .mdtm-profile__photo--fill img { height: 24rem; }
}

/* ---- Council members (Profil Ahli Majlis): chair card above a portrait grid ---- */
.mdtm-people__chair {
    display: grid; grid-template-columns: 6.5rem 1fr; gap: 1.25rem; align-items: center; max-width: 36rem; margin: 1.25rem 0 1.5rem;
    padding: 1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 16px; color: inherit; text-decoration: none;
    background: linear-gradient(135deg, rgb(var(--mdtm-primary-50)) 0%, #fff 60%);
}
.mdtm-people__chair img { width: 6.5rem; height: 8.75rem; object-fit: cover; object-position: 50% 15%; border-radius: 12px; }
.mdtm-people__chair > span { display: grid; gap: 0.25rem; }
.mdtm-people__chair .mdtm-people__name { font-size: 1.15rem; }
.mdtm-people__more { font-size: 0.875rem; font-weight: 600; color: rgb(var(--mdtm-primary)); }
.mdtm-people__chair:hover .mdtm-people__more, .mdtm-people__chair:focus-visible .mdtm-people__more { text-decoration: underline; }
.mdtm-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.mdtm-people__item { display: grid; align-content: start; gap: 0.2rem; padding: 0.6rem 0.6rem 0.8rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; background: #fff; text-align: center; }
.mdtm-people__item img { width: 100%; height: auto; aspect-ratio: 240 / 324; object-fit: cover; margin-bottom: 0.4rem; border-radius: 8px; background: rgb(var(--mdtm-primary-50)); }
.mdtm-people__item--lead { border-color: rgb(var(--mdtm-accent)); box-shadow: inset 0 3px 0 rgb(var(--mdtm-accent)); }
.mdtm-people__name { font-family: var(--mdtm-font-head); font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.mdtm-people__role { font-size: 0.75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--mdtm-muted)); }
.mdtm-people__item--lead .mdtm-people__role, .mdtm-people__chair .mdtm-people__role { color: rgb(var(--mdtm-primary)); }

/* ---- Organisation chart image with its text version ---- */
.mdtm-chart { margin: 0 0 1.5rem; }
.mdtm-chart img { display: block; width: 100%; height: auto; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; }
.mdtm-chart figcaption { margin-top: 0.4rem; font-size: 0.875rem; color: rgb(var(--mdtm-muted)); }
.mdtm-chart__list { columns: 2 16rem; column-gap: 2rem; }
.mdtm-chart__list li { break-inside: avoid; margin-bottom: 0.25rem; }
.mdtm-chart__units { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0.75rem; margin: 0; }
.mdtm-chart__units > div { padding: 0.75rem 1rem; border: 1px solid rgb(var(--mdtm-line)); border-left: 4px solid rgb(var(--mdtm-primary)); border-radius: 8px; }
.mdtm-chart__units dt { font-size: 0.8125rem; font-weight: 600; color: rgb(var(--mdtm-primary)); }
.mdtm-chart__units dd { margin: 0.2rem 0 0; font-weight: 500; }

/* ---- Rebuilt content pages (deploy/fix-pages.php): shared building blocks ---- */
.mdtm-lead { max-width: 48rem; font-size: 1.125rem; line-height: 1.65; color: rgb(var(--mdtm-ink)); }
.mdtm-note { max-width: 48rem; font-size: 0.9375rem; color: rgb(var(--mdtm-muted)); }
.mdtm-prose { max-width: 48rem; line-height: 1.75; }
/* One heading scale on rebuilt pages (the template's h3 is larger than its h2 here) */
.com-content-article__body:has(.mdtm-lead, .mdtm-prose, .mdtm-points) h2 { margin: 2rem 0 0.75rem; font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.3; }
.com-content-article__body:has(.mdtm-lead, .mdtm-prose, .mdtm-points) h3 { margin: 1.5rem 0 0.5rem; font-size: 1.1rem; line-height: 1.35; }
.com-content-article__body:has(.mdtm-lead, .mdtm-prose, .mdtm-points) :is(.mdtm-card, .mdtm-statement, .mdtm-motto) :is(h2, h3) { margin-top: 0; }
.com-content-article__body .mdtm-statement h2, .com-content-article__body .mdtm-motto h2 { font-size: 0.8125rem; }
.mdtm-profile + h2 { margin-top: 2.5rem !important; }
.mdtm-card { padding: 1.1rem 1.25rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; background: rgb(var(--mdtm-bg)); }
.mdtm-card h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.mdtm-card__label { margin: 0.75rem 0 0.25rem; font-size: 0.75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--mdtm-muted)); }
.mdtm-address { max-width: 32rem; margin: 0.75rem 0 1.5rem; font-style: normal; line-height: 1.7; border-left: 4px solid rgb(var(--mdtm-primary)); }

/* Key figures */
.mdtm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.5rem 0 2rem; padding: 0; list-style: none; }
.mdtm-stats li { display: grid; gap: 0.35rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: rgb(var(--mdtm-primary-50)); border-top: 4px solid rgb(var(--mdtm-accent)); }
.mdtm-stats__num { font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.1 var(--mdtm-font-head); color: rgb(var(--mdtm-primary)); }
.mdtm-stats__label { font-size: 0.9rem; line-height: 1.45; color: rgb(var(--mdtm-muted)); }

/* Vision / mission / motto */
.mdtm-statements { display: grid; gap: 1rem; margin: 0.5rem 0 1rem; }
.mdtm-statement { padding: 1.5rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 16px; background: linear-gradient(135deg, rgb(var(--mdtm-primary-50)) 0%, #fff 70%); }
.mdtm-statement h2, .mdtm-motto h2 { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--mdtm-primary)); }
.mdtm-statement p { margin: 0; font-family: var(--mdtm-font-head); font-size: 1.15rem; line-height: 1.55; }
.mdtm-motto { padding: 1.5rem; border-radius: 16px; background: rgb(var(--mdtm-gov-bg)); color: #fff; text-align: center; }
.mdtm-motto h2 { color: rgb(var(--mdtm-accent)); }
.mdtm-motto p { margin: 0; font: 600 clamp(1.3rem, 1rem + 1.2vw, 1.75rem)/1.35 var(--mdtm-font-head); }
@media (min-width: 48rem) { .mdtm-statements { grid-template-columns: 1fr 1fr; } }

/* Numbered points as cards (objectives, charter pledges, terms) */
.mdtm-points { counter-reset: pt; display: grid; gap: 0.75rem; max-width: 52rem; margin: 1rem 0 1.5rem; padding: 0; list-style: none; }
.mdtm-points > li { counter-increment: pt; position: relative; padding: 0.95rem 1.1rem 0.95rem 3.6rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; background: rgb(var(--mdtm-bg)); line-height: 1.55; }
.mdtm-points > li::before {
    content: counter(pt); position: absolute; left: 1rem; top: 0.8rem; display: grid; place-items: center; width: 1.85rem; height: 1.85rem;
    border-radius: 50%; background: rgb(var(--mdtm-primary)); color: #fff; font: 600 0.875rem var(--mdtm-font-head);
}
.mdtm-points--compact { gap: 0; }
.mdtm-points--compact > li { padding: 0.6rem 0 0.6rem 2.6rem; border: 0; border-bottom: 1px solid rgb(var(--mdtm-line)); border-radius: 0; background: none; }
.mdtm-points--compact > li:last-child { border-bottom: 0; }
.mdtm-points--compact > li::before { left: 0; top: 0.55rem; width: 1.6rem; height: 1.6rem; font-size: 0.8rem; background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary)); }
.mdtm-sections { display: grid; gap: 1rem; margin-top: 1rem; }
.mdtm-sections h3 { scroll-margin-top: 1rem; }
@media (min-width: 62rem) { .mdtm-sections { grid-template-columns: 1fr 1fr; } }

/* Department cards (Piagam Pelanggan): one colour + icon per department, on the card's
   header band, its numbers and its chip in the contents row. Colours are 700-level so
   white icons and coloured text both pass AA. */
.mdtm-dept--pentadbiran { --dept: 29 78 216; }
.mdtm-dept--kewangan { --dept: 21 128 61; }
.mdtm-dept--penilaian { --dept: 126 34 206; }
.mdtm-dept--kejuruteraan { --dept: 194 65 12; }
.mdtm-dept--pelesenan { --dept: 15 118 110; }
.mdtm-dept { padding: 0; overflow: hidden; border-top: 4px solid rgb(var(--dept)); }
.mdtm-dept:last-child:nth-child(odd) { grid-column: 1 / -1; }
.com-content-article__body .mdtm-dept h3.mdtm-dept__head {
    display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0.9rem 1.25rem;
    background: rgb(var(--dept) / .08); font-size: 1.05rem; color: rgb(var(--dept));
}
.mdtm-dept__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: rgb(var(--dept)); color: #fff; font-size: 1.05rem; }
.mdtm-dept__title { display: grid; line-height: 1.3; }
.mdtm-dept__title small { font: 500 0.8125rem var(--mdtm-font-body); color: rgb(var(--mdtm-muted)); }
.mdtm-dept .mdtm-points { margin: 0; padding: 0.4rem 1.25rem 0.9rem; max-width: none; }
.mdtm-dept .mdtm-points--compact > li::before { background: rgb(var(--dept) / .12); color: rgb(var(--dept)); }
.mdtm-toc a.mdtm-dept-chip { display: inline-flex; align-items: center; gap: 0.45rem; }
.mdtm-toc a.mdtm-dept-chip::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: rgb(var(--dept)); }
.mdtm-toc a.mdtm-dept-chip:hover { border-color: rgb(var(--dept)); color: rgb(var(--dept)); }
.com-content-article__body .mdtm-section h2 { scroll-margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgb(var(--mdtm-line)); }

/* "See also" links at the end of a page */
.mdtm-related { margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid rgb(var(--mdtm-line)); }
.mdtm-related__title { margin: 0 0 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--mdtm-muted)); }
.mdtm-related ul { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.mdtm-related a {
    display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid rgb(var(--mdtm-line));
    color: rgb(var(--mdtm-ink)); font-weight: 500; text-decoration: none;
}
.mdtm-related a::after { content: "→"; margin-left: 0.4rem; color: rgb(var(--mdtm-primary)); }
.mdtm-related a:hover { border-color: rgb(var(--mdtm-primary)); color: rgb(var(--mdtm-primary)); }

/* Tags / chips */
.mdtm-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; padding: 0; list-style: none; }
.mdtm-chips li { padding: 0.35rem 0.85rem; border-radius: 999px; background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary-700)); font-size: 0.9rem; font-weight: 500; }
.mdtm-chips--sm { gap: 0.35rem; margin: 0; }
.mdtm-chips--sm li { padding: 0.2rem 0.6rem; font-size: 0.8125rem; }

/* Big action links (apply online, form, external system) */
.mdtm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.mdtm-action {
    display: grid; gap: 0.3rem; align-content: start; padding: 1.1rem 1.25rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px;
    border-left: 4px solid rgb(var(--mdtm-primary)); color: rgb(var(--mdtm-ink)); text-decoration: none; transition: border-color .12s, box-shadow .12s;
}
.mdtm-action:hover { border-color: rgb(var(--mdtm-primary)); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.mdtm-action__title { font-family: var(--mdtm-font-head); font-weight: 600; color: rgb(var(--mdtm-primary)); }
.mdtm-action__title::after { content: " →"; }
.mdtm-action__desc { font-size: 0.9rem; color: rgb(var(--mdtm-muted)); }

/* Payment box (JomPAY details) and calculation example */
.mdtm-paybox {
    display: grid; grid-template-columns: auto 1fr; gap: 0.75rem 1.25rem; align-items: center; max-width: 44rem; margin: 1rem 0 1.5rem; padding: 1.1rem 1.25rem;
    border: 1px solid rgb(var(--mdtm-line)); border-radius: 14px; background: rgb(var(--mdtm-primary-50));
}
.mdtm-paybox img { width: 4.5rem; height: auto; border-radius: 10px; }
.mdtm-paybox dl { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; }
.mdtm-paybox dt { font-size: 0.75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--mdtm-muted)); }
.mdtm-paybox dd { margin: 0; font: 600 1.15rem var(--mdtm-font-head); }
.mdtm-paybox > p { grid-column: 1 / -1; margin: 0; font-size: 0.9375rem; }
.mdtm-paybox--slim { grid-template-columns: auto 1fr; }
.mdtm-paybox--slim img { width: 3.5rem; }
.mdtm-paybox--slim > p { grid-column: auto; }
.mdtm-calc { max-width: 32rem; margin: 1rem 0; padding: 1rem 1.25rem; border-radius: 12px; border: 1px dashed rgb(var(--mdtm-primary)); font-variant-numeric: tabular-nums; }
.mdtm-calc p { margin: 0; }
.mdtm-calc__title { margin-bottom: 0.35rem !important; font-size: 0.75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: rgb(var(--mdtm-primary)); }
.mdtm-pair { display: grid; gap: 1rem; margin: 1rem 0; }
@media (min-width: 48rem) { .mdtm-pair { grid-template-columns: 1fr 1fr; } }

/* Online services (e-Perkhidmatan) */
.mdtm-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; padding: 0; list-style: none; }
.mdtm-svc { position: relative; display: grid; align-content: start; gap: 0.35rem; padding: 1rem 1.1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; }
.mdtm-svc:hover { border-color: rgb(var(--mdtm-primary)); box-shadow: 0 6px 18px rgba(15,23,42,.08); }
.mdtm-svc img { width: auto; max-width: 100%; height: 2.5rem; object-fit: contain; object-position: left; margin-bottom: 0.4rem; }
.com-content-article__body .mdtm-svc img { min-width: 0; }
.mdtm-svc__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.4rem; border-radius: 10px; background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary)); font-size: 1.15rem; }
.mdtm-svc__icon.fa-whatsapp { background: #128c7e; color: #fff; font-size: 1.4rem; }
.mdtm-svc p { margin: 0; font-size: 0.9375rem; color: rgb(var(--mdtm-muted)); }
.mdtm-svc__name { font-family: var(--mdtm-font-head); font-weight: 600; font-size: 1.05rem; text-decoration: none; }
.mdtm-svc__name::after { content: ""; position: absolute; inset: 0; } /* whole card clickable */
.mdtm-svc__guide { position: relative; z-index: 1; font-size: 0.875rem !important; }

/* Banks (e-Bayaran) */
.mdtm-banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0.75rem; margin: 1rem 0; padding: 0; list-style: none; }
.mdtm-banks > li { display: grid; gap: 0.5rem; align-content: start; padding: 0.9rem 1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 12px; }
.mdtm-banks__name { font-family: var(--mdtm-font-head); font-weight: 600; min-height: 40px; display: flex; align-items: center; }
.mdtm-banks > li > img.mdtm-banks__logo { display: block; height: 40px; width: auto; max-width: 100%; margin: 0; object-fit: contain; object-position: left center; }

/* Data tables that scroll sideways inside their own box */
.mdtm-tablewrap { max-width: 100%; overflow-x: auto; margin: 1rem 0; border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px; }
.com-content-article__body .mdtm-tablewrap table { display: table; width: 100% !important; margin: 0; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.com-content-article__body .mdtm-tablewrap caption { padding: 0.75rem 1rem; text-align: left; font-weight: 600; caption-side: top; }
.com-content-article__body .mdtm-tablewrap :is(th, td) { padding: 0.55rem 0.6rem; border: 0; border-top: 1px solid rgb(var(--mdtm-line)); text-align: center; font-size: 0.875rem; }
.com-content-article__body .mdtm-tablewrap thead th { background: rgb(var(--mdtm-primary)); color: #fff; font-family: var(--mdtm-font-head); font-weight: 600; }
.com-content-article__body .mdtm-tablewrap tbody th { text-align: left; font-weight: 500; background: rgb(var(--mdtm-bg)); min-width: 14rem; position: sticky; left: 0; }
.com-content-article__body .mdtm-tablewrap tbody tr:nth-child(even) :is(td, th) { background: rgb(var(--mdtm-bg-alt)); }
.mdtm-kpi tbody th { min-width: 20rem !important; }
.mdtm-kpi__n { display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin-right: 0.5rem; border-radius: 50%; background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-primary)); font-size: 0.75rem; font-weight: 600; }
.mdtm-kpi td { color: rgb(var(--mdtm-success)); font-weight: 600; }
.mdtm-kpi td.mdtm-kpi__under { color: #b45309; }
@media (max-width: 47.99rem) {
    .com-content-article__body .mdtm-tablewrap tbody th { min-width: 9.5rem; max-width: 11rem; font-size: 0.8125rem; }
    .mdtm-kpi tbody th { min-width: 11rem !important; }
}
.mdtm-zero { color: rgb(var(--mdtm-muted)); opacity: .5; }
.mdtm-stat__sum { font-weight: 700; }
.mdtm-downloads__group .mdtm-tablewrap { margin: 0; border: 0; border-radius: 0; }

/* FAQ accordion */
.mdtm-faq { display: grid; gap: 0.6rem; max-width: 52rem; margin: 1rem 0 1.5rem; }
.mdtm-faq__item { border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px; background: rgb(var(--mdtm-bg)); }
.mdtm-faq__item summary {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.9rem 1.1rem; cursor: pointer; list-style: none;
    font-family: var(--mdtm-font-head); font-weight: 600; line-height: 1.45;
}
.mdtm-faq__item summary::-webkit-details-marker { display: none; }
.mdtm-faq__item summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; line-height: 1; color: rgb(var(--mdtm-primary)); }
.mdtm-faq__item[open] summary::after { content: "−"; }
.mdtm-faq__item[open] summary { border-bottom: 1px solid rgb(var(--mdtm-line)); }
.mdtm-faq__item summary:hover { color: rgb(var(--mdtm-primary)); }
.mdtm-faq__a { padding: 0.25rem 1.1rem 0.75rem; line-height: 1.65; }

/* ---- Officer directory (clean 2-column table) ---- */
.mdtm-dir__title { font-family: var(--mdtm-font-head); font-size: 1.6rem; margin: 0 0 1rem; }
.mdtm-dir { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.mdtm-dir th, .mdtm-dir td { text-align: left; padding: 0.7rem 1rem; border-bottom: 1px solid rgb(var(--mdtm-line)); vertical-align: top; }
.mdtm-dir thead th { background: rgb(var(--mdtm-primary)); color: #fff; font-family: var(--mdtm-font-head); }
.mdtm-dir tbody tr:nth-child(even) { background: rgb(var(--mdtm-bg-alt)); }
.mdtm-dir tbody tr:hover { background: rgba(37,99,235,.06); }
.mdtm-dir td:first-child { font-weight: 600; }
.mdtm-dir tr[hidden] { display: none !important; } /* beats the phone display:block below */
.mdtm-dir-filter { display: grid; gap: 0.35rem; max-width: 28rem; margin: 1rem 0 0.5rem; }
.mdtm-dir-filter label { font-weight: 600; font-size: 0.9rem; }
.mdtm-dir-filter input { border: 1px solid rgb(var(--mdtm-line)); border-radius: 8px; padding: 0.6rem 0.85rem; font: inherit; }
.mdtm-dir-filter input:focus { border-color: rgb(var(--mdtm-primary)); }
.mdtm-dir-filter__count { margin: 0; font-size: 0.85rem; color: rgb(var(--mdtm-muted)); }
/* Phones: stack each officer as a two-line row instead of a cramped two-column table */
@media (max-width: 47.99rem) {
    .mdtm-dir thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .mdtm-dir tr { display: block; padding: 0.6rem 0.75rem; border-bottom: 1px solid rgb(var(--mdtm-line)); }
    .mdtm-dir td { display: block; padding: 0; border: 0; }
    .mdtm-dir td + td { color: rgb(var(--mdtm-muted)); font-size: 0.875rem; }
}

/* ---- Downloads (Muat Turun) — accordion grouped by department ---- */
.mdtm-downloads { margin: 1rem 0; }
.mdtm-downloads__lead { color: rgb(var(--mdtm-muted)); margin-bottom: 1rem; }
.mdtm-downloads__group {
    border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden; background: rgb(var(--mdtm-bg));
}
.mdtm-downloads__dept {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; cursor: pointer;
    padding: 0.9rem 1.1rem; font-family: var(--mdtm-font-head); font-weight: 600; color: rgb(var(--mdtm-ink));
    background: rgb(var(--mdtm-bg-alt)); list-style: none; user-select: none;
}
.mdtm-downloads__dept::-webkit-details-marker { display: none; }
.mdtm-downloads__dept::after { content: "▾"; margin-left: auto; transition: transform .2s; color: rgb(var(--mdtm-primary)); }
.mdtm-downloads__group[open] .mdtm-downloads__dept::after { transform: rotate(180deg); }
.mdtm-downloads__dept:hover { background: rgba(37,99,235,.06); }
.mdtm-downloads__count {
    background: rgb(var(--mdtm-primary)); color: #fff; font-size: 0.75rem; font-weight: 600;
    min-width: 1.6rem; height: 1.6rem; border-radius: 999px; display: inline-grid; place-items: center; padding: 0 0.4rem;
}
.mdtm-downloads__list { list-style: none; margin: 0; padding: 0.35rem 0.5rem 0.6rem; }
.mdtm-downloads__item { margin: 0; }
.mdtm-downloads__link {
    display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 0.75rem; border-radius: 8px;
    color: rgb(var(--mdtm-ink)); text-decoration: none; transition: background .12s;
}
.mdtm-downloads__link:hover { background: rgb(var(--mdtm-bg-alt)); }
.mdtm-downloads__badge {
    flex: 0 0 auto; min-width: 3.4rem; text-align: center; font-size: 0.7rem; font-weight: 700; letter-spacing: .03em;
    padding: 0.25rem 0.4rem; border-radius: 5px; background: rgb(var(--mdtm-primary)); color: #fff; font-family: var(--mdtm-font-head);
}
.mdtm-downloads__name { flex: 1 1 auto; font-weight: 500; }
.mdtm-downloads__meta { display: block; font-size: 0.8125rem; font-weight: 400; color: rgb(var(--mdtm-muted)); }
.mdtm-downloads__dl { flex: 0 0 auto; color: rgb(var(--mdtm-primary)); opacity: .55; transition: opacity .12s; }
.mdtm-downloads__link:hover .mdtm-downloads__dl, .mdtm-downloads__link:focus-visible .mdtm-downloads__dl { opacity: 1; }

/* ---- Footer ---- */
/* Footer: navy like the top bar and the nav. Three tiers: brand row, four link columns,
   then a darker base holding the small print (staff systems, copyright, visitors). */
.mdtm-footer { margin-top: 2.5rem; background: rgb(var(--mdtm-gov-bg)); color: rgba(255,255,255,.78); border-top: 4px solid rgb(var(--mdtm-accent)); }
.mdtm-footer__brand {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
    padding-block: 2rem 1.5rem; position: relative;
}
/* Divider spans the content width, not the shell's side padding */
.mdtm-footer__brand::after { content: ""; position: absolute; inset: auto 1rem 0; height: 1px; background: rgba(255,255,255,.12); }
.mdtm-footer__id { display: flex; align-items: center; gap: 0.9rem; }
.mdtm-footer__logo-link { flex: 0 0 auto; display: block; border-radius: 8px; }
.mdtm-footer__logo-link:hover .mdtm-footer__logo { transform: scale(1.05); }
.mdtm-footer__logo { display: block; height: 64px; width: auto; transition: transform .15s; }
.mdtm-footer__name { font-family: var(--mdtm-font-head); font-weight: 700; font-size: 1.2rem; color: #fff; margin: 0; line-height: 1.25; }
.mdtm-footer__tag { margin: 0.2rem 0 0; font-size: 0.875rem; color: rgb(var(--mdtm-accent)); }
.mdtm-footer .mdtm-social--footer { gap: 0.6rem; }
.mdtm-footer .mdtm-social--footer .mdtm-social__link { width: 2.4rem; height: 2.4rem; }
.mdtm-footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; padding-block: 2rem 2.25rem; }
.mdtm-footer__col:nth-child(-n+2) { grid-column: 1 / -1; }
.mdtm-footer__addr { font-style: normal; font-size: 0.875rem; line-height: 1.55; margin: 0; display: grid; gap: 0.5rem; }
.mdtm-footer__line { display: flex; gap: 0.6rem; align-items: flex-start; }
.mdtm-footer__ico { flex: 0 0 auto; margin-top: 0.2rem; color: rgb(var(--mdtm-accent)); }
.mdtm-footer__addr a { color: inherit; text-decoration: none; }
.mdtm-footer__addr a:hover { color: #fff; text-decoration: underline; }
.mdtm-footer__head { font-family: var(--mdtm-font-head); font-size: 1rem; font-weight: 600; color: #fff; margin: 0 0 1rem; padding-bottom: 0.5rem; position: relative; }
.mdtm-footer__head::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 3px; border-radius: 2px; background: rgb(var(--mdtm-accent)); }
.mdtm-hours { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.9rem; margin: 0 0 0.6rem; font-size: 0.875rem; }
.mdtm-hours dt { font-weight: 600; color: #fff; }
.mdtm-hours dd { margin: 0; white-space: nowrap; }
.mdtm-hours__note { font-size: 0.8125rem; line-height: 1.5; margin: 0 0 1rem; opacity: 0.85; }
.mdtm-footer__col a.mdtm-footer__map {
    display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.3); color: #fff; font-weight: 600; font-size: 0.875rem; text-decoration: none;
}
.mdtm-footer__col a.mdtm-footer__map:hover { background: rgba(255,255,255,.1); border-color: rgb(var(--mdtm-accent)); }
.mdtm-footer__map .mdtm-footer__ico { margin-top: 0; }
.mdtm-footer__col :is(ul, .mod-menu) { list-style: none; margin: 0; padding: 0; }
.mdtm-footer__col li { margin-bottom: 0; }
.mdtm-footer__col a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 0.9rem; }
.mdtm-footer__col a:hover { color: rgb(var(--mdtm-accent)); text-decoration: underline; }
/* Base bands: staff systems (light blue, outlined pills), visitors (white, count chips), then
   the dark copyright bar. */
.mdtm-footer__band { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding-block: 0.85rem; font-size: 0.8125rem; }
.mdtm-footer__staff { background: rgb(var(--mdtm-primary-50)); border-top: 1px solid rgb(var(--mdtm-line)); color: rgb(var(--mdtm-muted)); }
.mdtm-footer__staff-head, .mdtm-footer__stats-head {
    margin: 0; font-family: var(--mdtm-font-head); font-size: 0.75rem; font-weight: 700; color: rgb(var(--mdtm-ink));
    text-transform: uppercase; letter-spacing: .06em;
}
.mdtm-footer__staff :is(ul, .mod-menu, .mdtm-menu) { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mdtm-footer__staff a {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0.2rem 0.85rem; border: 1px solid rgb(var(--mdtm-primary) / .35);
    border-radius: 999px; background: #fff; color: rgb(var(--mdtm-primary-700)); font-size: 0.8125rem; font-weight: 600; text-decoration: none;
}
.mdtm-footer__staff a:hover { background: rgb(var(--mdtm-primary)); border-color: rgb(var(--mdtm-primary)); color: #fff; }
.mdtm-footer__stats { background: #fff; border-top: 1px solid rgb(var(--mdtm-line)); color: rgb(var(--mdtm-muted)); }
.mdtm-footer__stats .mdtm-visitor { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mdtm-footer__stats .mdtm-visitor li {
    display: inline-flex; align-items: baseline; gap: 0.3rem; padding: 0.25rem 0.7rem; border-radius: 8px;
    background: rgb(var(--mdtm-primary-50) / .45); border: 1px solid rgb(var(--mdtm-line)); font-size: 0.78rem;
}
.mdtm-footer__stats .mdtm-visitor strong { color: rgb(var(--mdtm-primary-700)); font-family: var(--mdtm-font-head); font-size: 0.9rem; font-weight: 700; }
.mdtm-footer__meta { background: rgb(var(--mdtm-gov-bg)); font-size: 0.8125rem; color: rgba(255,255,255,.75); }
.mdtm-footer__meta .mdtm-shell { padding-block: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.5rem; }

/* Font-size steps (on <html> by a11y.js). Set on <html> itself: nearly every size in this
   sheet is in rem, which follows the root, so scaling body alone changed nothing. */
html.mdtm-fs-1 { font-size: 112.5%; }
html.mdtm-fs-2 { font-size: 125%; }

/* High-contrast mode: white text on black, yellow links, white borders. Pictures, video
   and flags are left alone; background images (gradients, watermarks) are dropped. */
html.mdtm-contrast { --mdtm-ink: 255 255 255; --mdtm-muted: 255 255 255; --mdtm-bg: 0 0 0; --mdtm-line: 255 255 255; color-scheme: dark; }
.mdtm-contrast body *:not(img):not(video):not(svg):not(svg *):not(iframe) {
    background-color: #000 !important; background-image: none !important; color: #fff !important;
    border-color: #fff !important; box-shadow: none !important; text-shadow: none !important;
}
.mdtm-contrast body { background: #000 !important; color: #fff !important; }
.mdtm-contrast body :is(a, a *, button, button *, summary) { color: #ff0 !important; }
.mdtm-contrast body a { text-decoration: underline !important; }
.mdtm-contrast body :is(button, input, select, textarea) { border: 1px solid #fff !important; }
.mdtm-contrast body [aria-pressed="true"] { outline: 2px solid #ff0; }
.mdtm-contrast :focus-visible { outline-color: #ff0 !important; }

/* Keyboard focus */
:focus-visible { outline: 3px solid rgb(var(--mdtm-primary)); outline-offset: 2px; }

/* ====================================================================
   RESPONSIVE — mobile-first; enhance upward
   ==================================================================== */

/* Tablet and up */
@media (min-width: 48rem) {
    .mdtm-feature { grid-template-columns: 1fr 1.15fr; gap: 2rem; padding: 2rem 2.25rem; }
    .mdtm-news__grid { grid-template-columns: 2fr 1fr; }
    /* Lead card fills the row next to the list; the extra height goes to the picture. */
    .mdtm-news__lead .mdtm-news-card, .mdtm-news__lead .mdtm-news-card__link { display: flex; flex-direction: column; height: 100%; }
    .mdtm-news__lead .mdtm-news-card__media { flex: 1 1 auto; }
    .mdtm-pautan__grid { grid-template-columns: repeat(2, 1fr); }
    .mdtm-hero__inner { padding-block: 2.5rem 2.75rem; }
    .mdtm-hero__tasks { grid-template-columns: repeat(4, 1fr); gap: 0.85rem; }
    .mdtm-hero__tasks:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
    .mdtm-hero__task { padding: 1rem; }
    .mdtm-hero__search button span { display: inline; }
    .mdtm-footer__cols { grid-template-columns: 1.3fr 1.2fr 1fr 1fr; gap: 2rem; }
    .mdtm-footer__col:nth-child(-n+2) { grid-column: auto; }
    .mdtm-pautan--cols-4 .mdtm-pautan__grid { grid-template-columns: repeat(2, 1fr); }
    .mdtm-pautan--cols-6 .mdtm-pautan__grid { grid-template-columns: repeat(6, 1fr); }
    .mdtm-gallery { grid-template-columns: repeat(3, 1fr); }
    .mdtm-blog__grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: gallery can breathe a bit wider */
@media (min-width: 64rem) {
    /* Faint council crest in the empty space beside the hero search. The image is set per-PBT via
       the --mdtm-crest custom property (template inlines it from brand.json); falls back to MDTM. */
    .mdtm-hero__inner::before {
        content: ""; position: absolute; right: 1rem; top: 1.25rem; width: 200px; height: 200px; pointer-events: none;
        background: var(--mdtm-crest, url("../images/mdtm-icon-180.png")) center / contain no-repeat; opacity: 0.06; filter: grayscale(1);
    }
    .mdtm-pautan--cols-4 .mdtm-pautan__grid { grid-template-columns: repeat(4, 1fr); }
    .mdtm-gallery { grid-template-columns: repeat(4, 1fr); }
    .mdtm-blog__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Wide screens with a banner: search and compact tasks left, banner right, both the same
   height (the slide box fills the left column; each picture shows whole inside it). */
@media (min-width: 75rem) {
    .mdtm-hero--banner .mdtm-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.5rem; align-items: stretch; }
    .mdtm-hero--banner .mdtm-hero__tasks { grid-template-columns: 1fr 1fr; margin-top: 0.9rem; gap: 0.6rem; }
    .mdtm-hero--banner .mdtm-hero__tasks:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
    .mdtm-hero--banner .mdtm-hero__task { flex-direction: row; align-items: center; gap: 0.75rem; padding: 0.6rem 0.85rem; }
    /* Same scale as the unit cards below: icon = WhatsApp button (2rem), description = card text (0.75rem). */
    .mdtm-hero--banner .mdtm-hero__icon { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 8px; font-size: 1rem; }
    .mdtm-hero--banner .mdtm-hero__icon.fa-whatsapp { font-size: 1.1rem; }
    .mdtm-hero--banner .mdtm-hero__desc { font-size: 0.75rem; line-height: 1.3; }
    .mdtm-hero--banner .mdtm-carousel { max-width: none; margin-top: 0; display: flex; flex-direction: column; }
    .mdtm-hero--banner .mdtm-carousel__track { flex: 1 1 auto; }
    .mdtm-hero--banner .mdtm-carousel__slide { aspect-ratio: auto; position: relative; }
    .mdtm-hero--banner .mdtm-carousel__slide img { position: absolute; inset: 0; }
    /* Larger text makes the left column much taller: keep the banner 16:9, centred */
    :is(.mdtm-fs-1, .mdtm-fs-2) .mdtm-hero--banner .mdtm-hero__inner { align-items: center; }
    :is(.mdtm-fs-1, .mdtm-fs-2) .mdtm-hero--banner .mdtm-carousel__slide { aspect-ratio: 16 / 9; }
}
.mdtm-hero--banner .mdtm-hero__inner::before { display: none; }

/* Phone: one compact header row (crests + name, search icon, hamburger); the search field
   and the nav open below it on demand. */
@media (max-width: 47.99rem) {
    /* One row: the date (Hijri date on a second line) + text-size buttons. Social links are in the footer. */
    .mdtm-utility .mdtm-social, .mdtm-utility__pipe { display: none; }
    .mdtm-staff__label { display: none; }
    .mdtm-staff__link { padding: 0; width: 1.9rem; justify-content: center; }
    .mdtm-utility__inner { flex-wrap: nowrap; gap: 0.5rem; }
    .mdtm-utility__date { min-width: 0; line-height: 1.3; }
    .mdtm-utility__hijri { display: block; }
    .mdtm-utility__right { flex: 0 0 auto; }
    /* Quick services: two compact columns (icon over text) instead of eight full-width rows */
    .mdtm-pautan__item { flex-direction: column; gap: 0.5rem; padding: 0.85rem; }
    .mdtm-pautan__label { font-size: 0.9rem; }
    .mdtm-pautan__desc { font-size: 0.8rem; }
    .mdtm-hero__search input { font-size: 1rem; padding: 0.75rem 0.85rem; }
    .mdtm-header__inner { flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 0.6rem; }
    .mdtm-brand { flex: 1 1 0; min-width: 0; gap: 0.5rem; }
    .mdtm-brand__crests { gap: 0.3rem; }
    .mdtm-brand__crest--my { height: 28px; }
    .mdtm-brand__crest--kel { height: 33px; }
    .mdtm-brand__logo { height: 33px; }
    .mdtm-brand__name { font-size: 0.95rem; }
    .mdtm-brand__tag { display: none; }
    .mdtm-searchtoggle { display: grid; order: 2; flex: 0 0 auto; }
    .mdtm-navtoggle { display: flex; order: 3; width: 40px; flex: 0 0 auto; }
    .mdtm-header__search { display: none; width: 100%; flex-basis: 100%; order: 4; }
    .mdtm-header__search.is-open { display: block; }
    .mdtm-nav { display: none; }
    .mdtm-nav.is-open { display: block; }
    .mdtm-nav .mdtm-menu { flex-direction: column; }
    .mdtm-nav .mdtm-menu > li { position: static; }
    .mdtm-nav .mdtm-menu a { border-top: 1px solid rgba(255,255,255,.12); }
    .mdtm-nav .mdtm-menu > li.active > a, .mdtm-nav .mdtm-menu > li.in-trail > a { box-shadow: inset 3px 0 0 rgb(var(--mdtm-accent)); }
    /* Submenus: expand inline (accordion-style) instead of floating */
    .mdtm-nav .mdtm-submenu {
        position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; pointer-events: auto;
        border: 0; border-radius: 0; min-width: 0; padding: 0; background: rgb(var(--mdtm-gov-bg-2));
    }
    .mdtm-nav .mdtm-submenu a { color: #fff; padding-left: 2rem; }
    .mdtm-nav .mdtm-submenu a:hover { background: rgba(255,255,255,.12); color: #fff; }
    .mdtm-nav .mdtm-submenu li.active > a { color: #fff; box-shadow: inset 3px 0 0 rgb(var(--mdtm-accent)); }
    .mdtm-nav .mdtm-submenu .mdtm-submenu a { padding-left: 3rem; color: rgba(255,255,255,.85); }
    .mdtm-menu__caret { display: none; }
    /* Accordion: a parent's submenu shows only when opened with its toggle (a11y.js). */
    .mdtm-nav .mdtm-menu > li.has-children { position: relative; }
    .mdtm-nav .mdtm-menu > li > a { min-height: 3.05rem; }
    .mdtm-nav .mdtm-menu > li.has-children > a { padding-right: 3.5rem; }
    .mdtm-nav .mdtm-menu > li > .mdtm-submenu { display: none; }
    .mdtm-nav .mdtm-menu > li.is-open > .mdtm-submenu { display: block; }
    .mdtm-subtoggle {
        display: grid; place-items: center; position: absolute; top: 0; right: 0; width: 3.25rem; height: 3.05rem;
        border: 0; border-left: 1px solid rgba(255,255,255,.12); background: transparent; color: #fff; cursor: pointer;
    }
    .mdtm-subtoggle::before { content: ""; width: 0.55rem; height: 0.55rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform .15s; }
    .mdtm-subtoggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
    .mdtm-subtoggle:focus-visible { outline: 3px solid rgb(var(--mdtm-accent)); outline-offset: -3px; }
    .mdtm-utility__inner { font-size: 0.75rem; }
    /* Justified text from the old editor leaves wide gaps in a phone-width column. */
    .com-content-article__body [style*="justify"] { text-align: left !important; }
}

/* ---- Data Terbuka: kompaun cards, stacked bars, heatmap (markup from lib_mdtm OpenData) ---- */
.mdtm-opendata { margin: 1rem 0 2rem; }
.mdtm-opendata__meta { font-size: 0.8125rem; color: rgb(var(--mdtm-muted)); margin: 0 0 0.75rem; }
.mdtm-opendata__empty, .mdtm-opendata__note { color: rgb(var(--mdtm-muted)); font-size: 0.875rem; }
.mdtm-opendata__stale { margin: -0.4rem 0 0.75rem; font-size: 0.8125rem; font-style: italic; color: rgb(var(--mdtm-muted)); }
.com-content-article__body .mdtm-opendata__h { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; color: rgb(var(--mdtm-gov-bg)); }
.mdtm-opendata__years, .mdtm-opendata__sort { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; }
.mdtm-opendata__years[hidden], .mdtm-opendata__sort[hidden], .mdtm-kpis[hidden], .mdtm-kbars[hidden] { display: none; }
.mdtm-opendata__sort > span { font-size: 0.8125rem; color: rgb(var(--mdtm-muted)); margin-right: 0.15rem; }
.mdtm-opendata :is(.mdtm-opendata__years, .mdtm-opendata__sort) button {
    min-height: 2.25rem; padding: 0.25rem 0.85rem; border-radius: 999px; cursor: pointer;
    border: 1px solid #cbd5e1; background: rgb(var(--mdtm-bg)); color: rgb(var(--mdtm-ink)); font: inherit; font-size: 0.8125rem;
}
.mdtm-opendata :is(.mdtm-opendata__years, .mdtm-opendata__sort) button:hover { background: rgb(var(--mdtm-bg-alt)); }
.mdtm-opendata :is(.mdtm-opendata__years, .mdtm-opendata__sort) button[aria-pressed="true"] {
    background: rgb(var(--mdtm-gov-bg)); border-color: rgb(var(--mdtm-gov-bg)); color: #fff;
}

.mdtm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 1rem; }
@media (min-width: 48rem) { .mdtm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mdtm-kpi { border: 1px solid rgb(var(--mdtm-line)); border-top: 3px solid rgb(var(--mdtm-primary)); border-radius: 8px; padding: 0.65rem 0.75rem; background: rgb(var(--mdtm-bg)); }
.mdtm-kpi b { display: block; font-family: var(--mdtm-font-head); font-size: 1.4rem; line-height: 1.25; color: rgb(var(--mdtm-gov-bg)); font-variant-numeric: tabular-nums; }
.mdtm-kpi span { display: block; font-size: 0.75rem; line-height: 1.35; color: rgb(var(--mdtm-muted)); }

.mdtm-klegend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; list-style: none; margin: 0 0 0.5rem; padding: 0; font-size: 0.75rem; color: rgb(var(--mdtm-muted)); }
.mdtm-klegend li { margin: 0; display: flex; align-items: center; }
.mdtm-klegend i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 2px; margin-right: 0.35rem; }
.seg--paid { background: #16a34a; }
.seg--unpaid { background: rgb(var(--mdtm-primary)); }
.seg--cancelled { background: #f59e0b; }
.seg--other { background: #94a3b8; }

.mdtm-kbars__year { margin: 0 0 0.35rem; font-size: 0.8125rem; font-weight: 600; color: rgb(var(--mdtm-muted)); }
.mdtm-kbars ol { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.4rem; }
.mdtm-kbars li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.25rem; align-items: center; gap: 0.5rem; margin: 0; padding: 0.1rem 0.25rem; font-size: 0.8125rem; border-radius: 6px; }
@media (min-width: 48rem) { .mdtm-kbars li { grid-template-columns: 7.5rem minmax(0, 1fr) 5.5rem; font-size: 0.875rem; } }
.mdtm-kbars li.is-mdtm { font-weight: 700; color: rgb(var(--mdtm-gov-bg)); background: rgb(var(--mdtm-primary-50)); }
.mdtm-kbars__name { overflow-wrap: anywhere; line-height: 1.25; }
.mdtm-kbars__track { display: flex; height: 0.9rem; border-radius: 4px; background: #e2e8f0; overflow: hidden; }
.mdtm-kbars__track .seg { display: block; height: 100%; flex: 0 0 auto; }
.mdtm-kbars__num { text-align: right; font-variant-numeric: tabular-nums; line-height: 1.2; }
.mdtm-kbars__num small { display: block; font-weight: 400; font-size: 0.7rem; color: rgb(var(--mdtm-muted)); }

/* Heatmap tables (kompaun by year, district indicators) */
.mdtm-opendata .mdtm-tablewrap { background: rgb(var(--mdtm-bg)); }
.com-content-article__body .mdtm-heat { width: 100% !important; }
.com-content-article__body .mdtm-heat :is(th, td) { white-space: nowrap; font-size: 0.8125rem; }
.com-content-article__body .mdtm-heat thead th { vertical-align: bottom; }
.com-content-article__body .mdtm-heat thead th a { color: #fff; text-decoration: underline; }
.com-content-article__body .mdtm-heat thead small { font-weight: 400; opacity: .85; }
.com-content-article__body .mdtm-heat :is(td, tbody th) { text-align: right; }
.com-content-article__body .mdtm-heat tbody th { min-width: 8rem; max-width: none; left: 0; z-index: 1; text-align: left; border-right: 1px solid rgb(var(--mdtm-line)); }
.com-content-article__body .mdtm-heat thead th:first-child { position: sticky; left: 0; z-index: 2; text-align: left; }
.com-content-article__body .mdtm-heat td.mdtm-heat__na { text-align: left; font-style: italic; color: rgb(var(--mdtm-muted)); }
.com-content-article__body .mdtm-heat tbody tr.is-unpublished th { font-weight: 400; color: rgb(var(--mdtm-muted)); }
/* District rows: the PBTs under each district, allowed to wrap so the sticky column stays narrow on phones. */
.com-content-article__body .mdtm-opendata--daerah .mdtm-heat tbody th small { display: block; white-space: normal; max-width: 10rem; font-weight: 400; font-size: 0.7rem; line-height: 1.25; color: rgb(var(--mdtm-muted)); }
.com-content-article__body .mdtm-heat .mdtm-stale { display: block; font-weight: 400; font-size: 0.7rem; color: rgb(var(--mdtm-muted)); }
.com-content-article__body .mdtm-heat tbody tr:nth-child(even) td.h0 { background: #f1f5f9; }
.com-content-article__body .mdtm-heat tbody tr :is(td.h0) { background: #f1f5f9; color: rgb(var(--mdtm-ink)); }
.com-content-article__body .mdtm-heat tbody tr td.h1 { background: #dbeafe; color: #0f172a; }
.com-content-article__body .mdtm-heat tbody tr td.h2 { background: #93c5fd; color: #0f172a; }
.com-content-article__body .mdtm-heat tbody tr td.h3 { background: #2563eb; color: #fff; }
.com-content-article__body .mdtm-heat tbody tr td.h4 { background: #1e3a8a; color: #fff; }
.com-content-article__body .mdtm-heat tbody tr.is-mdtm th { background: rgb(var(--mdtm-primary-50)); color: rgb(var(--mdtm-gov-bg)); font-weight: 700; box-shadow: inset 3px 0 0 rgb(var(--mdtm-primary)); }
.com-content-article__body .mdtm-heat tbody tr.is-mdtm td { font-weight: 700; box-shadow: inset 0 1px 0 rgb(var(--mdtm-primary)), inset 0 -1px 0 rgb(var(--mdtm-primary)); }
.com-content-article__body .mdtm-heat tbody tr.mdtm-heat__total :is(th, td) { font-weight: 700; border-top: 2px solid rgb(var(--mdtm-gov-bg)); background: rgb(var(--mdtm-bg-alt)); }
.mdtm-dl { display: inline-block; margin-top: 0.25rem; padding: 0.4rem 0.9rem; border: 1px solid rgb(var(--mdtm-primary)); border-radius: 6px; font-size: 0.8125rem; text-decoration: none; }
.mdtm-dl::before { content: "\2193\00a0"; }
.mdtm-dl:hover { background: rgb(var(--mdtm-primary-50)); }

/* High contrast: the generic rule blanks backgrounds, so keep bars and heat steps apart with borders. */
.mdtm-contrast .mdtm-heat td { border: 1px solid #fff !important; }
.mdtm-contrast .mdtm-heat td.h3, .mdtm-contrast .mdtm-heat td.h4 { font-weight: 700; }
.mdtm-contrast .mdtm-kbars__track { border: 1px solid #fff !important; }
.mdtm-contrast body .mdtm-kbars__track .seg { border-right: 1px solid #fff !important; }
.mdtm-contrast body .mdtm-kbars__track .seg--paid { background-color: #0f0 !important; }
.mdtm-contrast body .mdtm-kbars__track .seg--unpaid { background-color: #0ff !important; }
.mdtm-contrast body .mdtm-kbars__track .seg--cancelled { background-color: #ff0 !important; }
.mdtm-contrast body .mdtm-kbars__track .seg--other { background-color: #888 !important; }
.mdtm-contrast body .mdtm-klegend i.seg--paid { background-color: #0f0 !important; }
.mdtm-contrast body .mdtm-klegend i.seg--unpaid { background-color: #0ff !important; }
.mdtm-contrast body .mdtm-klegend i.seg--cancelled { background-color: #ff0 !important; }
.mdtm-contrast body .mdtm-klegend i.seg--other { background-color: #888 !important; }
.mdtm-contrast .mdtm-kbars li.is-mdtm, .mdtm-contrast .mdtm-heat tr.is-mdtm { outline: 2px solid #ff0; }

/* Laporan Pengemaskinian Laman Web (monthly website-update report) */
.mdtm-laporan { margin: 1rem 0 2rem; }
.mdtm-laporan__list { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.6rem; }
.mdtm-laporan__list li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem;
    padding: 0.8rem 1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px;
    background: rgb(var(--mdtm-bg));
}
.mdtm-laporan__list li:hover { border-color: rgb(var(--mdtm-primary)); }
.mdtm-laporan__label { flex: 1 1 18rem; font-weight: 500; color: rgb(var(--mdtm-gov-bg)); }
.mdtm-laporan__lihat, .mdtm-laporan__list .mdtm-dl {
    display: inline-flex; align-items: center; gap: 0.35rem; text-decoration: none;
    padding: 0.4rem 0.9rem; border-radius: 8px; font-size: 0.875rem; font-weight: 600;
    border: 1px solid rgb(var(--mdtm-primary));
}
.mdtm-laporan__lihat { color: rgb(var(--mdtm-primary)); background: transparent; }
.mdtm-laporan__lihat:hover { background: rgb(var(--mdtm-bg-alt)); }
.mdtm-laporan__list .mdtm-dl { color: #fff; background: rgb(var(--mdtm-primary)); }
.mdtm-laporan__list .mdtm-dl:hover { filter: brightness(1.08); }

/* Single-month report body */
.mdtm-laporan__pbt { color: rgb(var(--mdtm-muted)); margin: -0.25rem 0 1rem; }
.mdtm-laporan__ringkas { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0 0 1.25rem; }
.mdtm-laporan__ringkas table { border-collapse: separate; border-spacing: 1rem 0; margin-left: -1rem; }
.mdtm-laporan__ringkas td {
    padding: 0.6rem 1rem; border: 1px solid rgb(var(--mdtm-line)); border-radius: 10px;
    background: rgb(var(--mdtm-bg)); font-size: 0.9rem;
}
.mdtm-laporan__ringkas b { font-size: 1.15rem; color: rgb(var(--mdtm-primary)); }
.com-content-article__body .mdtm-laporan__tbl {
    width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; font-variant-numeric: tabular-nums;
}
.com-content-article__body .mdtm-laporan__tbl :is(th, td) {
    padding: 0.5rem 0.7rem; border-top: 1px solid rgb(var(--mdtm-line)); text-align: left;
    font-size: 0.875rem; vertical-align: top;
}
.com-content-article__body .mdtm-laporan__tbl thead th {
    background: rgb(var(--mdtm-primary)); color: #fff; font-family: var(--mdtm-font-head); border-top: 0;
}
.com-content-article__body .mdtm-laporan__tbl tbody tr:nth-child(even) td { background: rgb(var(--mdtm-bg-alt)); }
.com-content-article__body .mdtm-laporan__tbl td:first-child { white-space: nowrap; color: rgb(var(--mdtm-muted)); width: 6.5rem; }
.com-content-article__body .mdtm-laporan__tbl td:last-child { color: rgb(var(--mdtm-muted)); width: 11rem; }
.mdtm-laporan__empty { color: rgb(var(--mdtm-muted)); font-style: italic; }
.mdtm-laporan__nota { margin-top: 1rem; font-size: 0.8125rem; color: rgb(var(--mdtm-muted)); }
@media (max-width: 40rem) {
    .com-content-article__body .mdtm-laporan__tbl td:is(:first-child, :last-child) { width: auto; }
}
.mdtm-laporan__x { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 6px; background: rgb(var(--mdtm-bg-alt)); color: rgb(var(--mdtm-muted)); font-size: 0.8em; font-weight: 600; }