/* Mahasiswa.co.id UI system — shared presentation tokens, 2026-10-06. */
:root {
  color-scheme: light;
  --ui-font: var(--brand-font-ui);
  --ui-red: var(--brand-red); --ui-red-hover: #D9161F; --ui-red-soft: #FDEBEC;
  --ui-bg: #F0F0F0; --ui-surface: var(--brand-white); --ui-section: var(--brand-white);
  --ui-text: var(--brand-black); --ui-secondary: #5F6368; --ui-meta: #8A8F98; --ui-border: #E5E5E5;
  --ui-hover: #FAFAFA; --ui-hover-border: #D0D0D0;
  --ui-shadow: 0 4px 12px rgb(24 24 24 / 5%);
  --ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px; --ui-space-4: 16px;
  --ui-space-5: 20px; --ui-space-6: 24px; --ui-space-8: 32px; --ui-space-10: 40px;
  --ui-space-12: 48px; --ui-space-16: 64px;
  --ui-radius-card: 10px; --ui-radius-control: 8px; --ui-radius-image: 8px;
  --ui-motion: 250ms ease; --ui-container: 1200px; --ui-reading: 700px;
  --ui-card-title: 20px; --ui-small-title: 17px; --ui-meta-size: 14px;
  --ui-article-size: 18px; --ui-article-leading: 1.8;
  /* Compatibility aliases keep existing templates and JS untouched. */
  --mh-brand: var(--ui-red); --mh-brand-hover: var(--ui-red-hover);
  --mh-blue: var(--ui-red); --mh-hover: var(--ui-red-hover);
  --mh-navy: var(--ui-text); --mh-ink: var(--ui-text); --mh-text: var(--ui-text);
  --mh-muted: var(--ui-meta); --mh-bg: var(--ui-bg); --mh-card: var(--ui-surface);
  --mh-border: var(--ui-border); --mh-soft: var(--ui-red-soft); --mh-hero: var(--ui-section);
  --site-primary: var(--ui-red); --site-button: var(--ui-red); --site-link: var(--ui-red);
  --theme-text-primary: var(--ui-text); --font-sans: var(--ui-font); --font-serif: var(--ui-font);
  --color-brand-50: var(--ui-red-soft); --color-brand-100: var(--ui-red-soft);
  --color-brand-600: var(--ui-red); --color-brand-700: var(--ui-red); --color-brand-800: var(--ui-red-hover);
}
html.dark {
  color-scheme: dark;
  --ui-bg: #181818; --ui-surface: #222222; --ui-section: #1D1D1D;
  --ui-text: #FFFFFF; --ui-secondary: #D0D0D0; --ui-meta: #999999; --ui-border: #333333;
  --ui-hover: #292929; --ui-hover-border: #484848;
  --ui-shadow: 0 4px 12px rgb(0 0 0 / 12%);
  --ui-red-soft: #302022;
}
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) {
  font-family: var(--ui-font); font-size: 16px; line-height: 1.65;
  color: var(--ui-text); background: var(--ui-bg); -webkit-font-smoothing: antialiased;
}
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(h1,h2,h3,h4,h5,h6,button,input,select,textarea,.font-serif,.font-sans) { font-family: var(--ui-font); }
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) ::selection { background: var(--ui-red); color: #FFFFFF; }
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--ui-red); outline-offset: 3px;
}
/* Shared controls: checkbox/radio geometry and editor controls retain their roles. */
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.mh-button,.btn-primary,.auth-v06-submit,.article-comment-submit,.ed-login) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 20px; border: 1px solid var(--ui-red); border-radius: var(--ui-radius-control);
  background: var(--ui-red); color: #FFFFFF; font-size: 15px; font-weight: 600; line-height: 1.4;
  box-shadow: none; transition: background-color var(--ui-motion), border-color var(--ui-motion);
}
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.mh-button-secondary,.btn-secondary) {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px;
  border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control);
  color: var(--ui-text); background: var(--ui-surface); font-size: 15px; font-weight: 600; line-height: 1.4; box-shadow: none;
}
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.button-small,.btn-sm) { min-height: 36px; font-size: 14px; padding-inline: 16px; }
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.form-input,.mh-search input,.mh-header-search-form input,.article-comment-field input,.article-comment-field textarea,select) {
  min-height: 44px; border: 1px solid var(--ui-border); border-radius: var(--ui-radius-control);
  background: var(--ui-surface); color: var(--ui-text); font-size: 16px; line-height: 1.5;
  box-shadow: none; backdrop-filter: none; transition: border-color var(--ui-motion);
}
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.form-input,.mh-search input,.mh-header-search-form input,.article-comment-field input,.article-comment-field textarea,select):focus {
  border-color: var(--ui-red); background: var(--ui-surface); color: var(--ui-text); box-shadow: none;
}
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(input,textarea)::placeholder { color: var(--ui-meta); opacity: 1; }
body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) input:is([type=checkbox],[type=radio]) { accent-color: var(--ui-red); }
/* Header, navigation, archives and footer share the same content boundaries. */
.mh-site .mh-container { width: min(var(--ui-container),calc(100% - 64px)); margin-inline: auto; }
.mh-site .mh-header,.mh-site .mh-footer { background: var(--ui-surface); border-color: var(--ui-border); }
.mh-site .mh-desktop-nav>a,.mh-site .mh-mobile-menu nav a,.mh-site .ed-header-account { font-size: 15px; font-weight: 600; line-height: 1.4; }
.mh-site .mh-desktop-nav>a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 8px; }
.mh-site .mh-icon-button,.mh-site .mh-header-search-close,.mh-site .mh-related-arrow { width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--ui-radius-control); background: var(--ui-surface); color: var(--ui-secondary); border-color: var(--ui-border); }
.mh-site .mh-header .mh-icon-button { width: 44px; height: 44px; flex-basis: 44px; border-radius: 8px; }
.mh-site .mh-masthead-top time { font-size: 14px; }
.mh-site .mh-masthead-account { font-size: 15px; min-height: 44px; display: inline-flex; align-items: center; }
.mh-site .mh-masthead-utilities .mh-social-icon { width: 44px; height: 44px; }
.mh-site .google-auto-placed { max-width: 100%; overflow: hidden; }
.mh-site .mh-header-search-close { display: grid; place-items: center; }
.mh-site .mh-mobile-menu nav,.mh-site .mh-category-panel { border-radius: var(--ui-radius-card); }
.mh-site .mh-categories a,.mh-site .mh-category-more summary { font-size: 15px; font-weight: 600; min-height: 44px; padding: 8px 12px; display: inline-flex; align-items: center; }
.mh-site .mh-categories { gap: 8px; padding-block: 12px; }
.mh-site .mh-hero { background: var(--ui-section); padding-block: 40px; }
.mh-site .mh-hero h1 { font-size: 42px; font-weight: 700; line-height: 1.2; color: var(--ui-text); }
.mh-site .mh-hero-description { color: var(--ui-secondary); font-size: 16px; margin-top: 16px!important; }
.mh-site .mh-content { padding-block: 40px 48px; }
.mh-site .mh-search { gap: 8px; margin-top: 24px; }
.mh-site .mh-search input { height: 44px; }
.mh-site .mh-eyebrow { font-size: 12px; font-weight: 700; }
.mh-site .mh-section-heading { gap: 16px; margin-bottom: 20px; }
.mh-site .mh-section-heading h2 { font-size: 28px; font-weight: 700; line-height: 1.3; }
.mh-site .mh-section-heading>a,.mh-site .ed-text-link { font-size: 15px; font-weight: 600; color: var(--ui-red); }
.mh-site .mh-section-heading h2::after { background: var(--ui-red); }
.mh-site .mh-results-count { font-size: 15px; color: var(--ui-secondary); margin-bottom: 16px!important; }
.mh-site .mh-footer-directory { display: grid; grid-template-columns: minmax(0,1.4fr) repeat(4,minmax(0,1fr)); align-items: start; gap: 20px; padding-block: 32px; }
.mh-site .mh-footer-group { min-width: 0; grid-column: auto; text-align: left; }
.mh-site .mh-footer-group h2 { font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ui-text); margin: 0 0 12px; }
.mh-site .mh-footer-directory nav { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; max-width: none; margin: 0; gap: 4px; }
.mh-site .mh-footer-directory>*,.mh-site .mh-footer-directory nav { min-width: 0; }
.mh-site .mh-footer-directory nav a { max-width: 100%; overflow-wrap: normal; }
.mh-site .mh-footer-directory nav a { font-size: 13px; line-height: 1.5; min-height: 24px; display: inline-flex; align-items: center; }
.mh-site .mh-footer-brand>p,.mh-site .mh-footer-bottom { font-size: 14px; color: var(--ui-secondary); }
.mh-site .mh-footer-bottom { padding-block: 20px; }
.mh-site .mh-footer-social-links { gap: 4px; }
.mh-site .mh-footer-social-links .mh-social-icon { position: relative; width: 44px; height: 44px; background: transparent; border-radius: 8px; isolation: isolate; --ui-social-bg: #181818; }
.mh-site .mh-footer-social-links .mh-social-icon::after { content: ""; position: absolute; z-index: -1; inset: 8px; border-radius: 6px; background: var(--ui-social-bg); }
.mh-site .mh-footer-social-links .mh-social-instagram { --ui-social-bg: linear-gradient(135deg,#833ab4,#c13584,#e1306c,#f77737); }
.mh-site .mh-footer-social-links .mh-social-youtube { --ui-social-bg: #FF0000; }
.mh-site .mh-footer-social-links .mh-social-facebook { --ui-social-bg: #0866FF; }
.mh-site .mh-footer-social-links .mh-social-linkedin { --ui-social-bg: #0A66C2; }
.mh-site .mh-masthead-utilities .mh-social-icon::after { display: none; }
.mh-site .mh-masthead-utilities .mh-footer-social-links { gap: 4px; }
.mh-site .mh-footer-social-links .mh-social-icon svg { width: 14px; height: 14px; }
.mh-site .mh-footer-social-links .mh-social-icon:focus-visible { outline-color: var(--ui-red); }
/* Editorial cards: stable geometry and a restrained, neutral surface. */
.mh-site :is(.mh-panel,.ed-box,.ed-card,.mh-page-card,.mh-package-card,.mh-donation,.article-comments) { border-radius: var(--ui-radius-card); border-color: var(--ui-border); background: var(--ui-surface); box-shadow: none; }
.mh-site :is(.mh-page-band,.mh-page-callout,.mh-package-notice,.mh-donation-card,.ed-discover) { background: var(--ui-section); border-color: var(--ui-border); }
.mh-site .ed-discover :is(h2,p,.ed-kicker) { color: var(--ui-text); }
.mh-site .mh-panel { overflow: visible; background: transparent; border: 0; }
.mh-site .mh-article-list { display: grid; gap: 16px; padding: 0; }
.mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card) {
  position: relative; min-width: 0; border: 1px solid var(--ui-card-border,transparent); border-radius: var(--ui-radius-card);
  background: var(--ui-surface); box-shadow: none;
  transition: background-color var(--ui-motion), border-color var(--ui-motion), transform var(--ui-motion), box-shadow var(--ui-motion);
}
.mh-site .mh-list-item { align-items: flex-start; gap: 16px; padding: 20px; }
.mh-site .mh-list-item:last-child { border-bottom: 1px solid var(--ui-card-border,transparent); }
.mh-site .mh-list-copy h2,.mh-site .mh-category-story h3,.mh-site .mh-home-companion h2,.mh-site .ed-card h3,.mh-site .mh-related-card h3 {
  font-size: var(--ui-card-title); font-weight: 700; line-height: 1.35; color: var(--ui-text); letter-spacing: -.02em;
}
.mh-site .mh-list-meta { gap: 8px; margin-bottom: 8px; font-size: var(--ui-meta-size); color: var(--ui-meta); }
.mh-site .mh-list-meta a,.mh-site .mh-article-category,.mh-site .ed-slide-category { font-size: 12px; font-weight: 700; }
.mh-site .mh-list-copy p,.mh-site .mh-category-excerpt,.mh-site .ed-card-copy>p { margin-top: 12px; font-size: 15px; line-height: 1.65; color: var(--ui-secondary); }
.mh-site :is(.mh-thumbnail,.mh-category-story-image,.ed-card-image) { overflow: hidden; border-radius: var(--ui-radius-image); }
.mh-site :is(.mh-thumbnail img,.mh-category-story-image img,.ed-card-image img,.mh-home-companion img,.mh-related-card img,.mh-article-image img,.ed-news-link img) { border-radius: var(--ui-radius-image); object-fit: cover; }
.mh-site :is(.mh-thumbnail img,.mh-category-story-image img,.ed-card-image img) { transition: transform var(--ui-motion); }
.mh-site .mh-thumbnail { flex: 0 0 160px; }
.mh-site .mh-thumbnail img { width: 160px; height: 100px; display: block; }
.mh-site .ed-card-copy { padding: 20px; }
.mh-site .ed-card-grid { gap: 24px; }
.mh-site .mh-category-story { padding: 20px; gap: 16px; }
.mh-site .mh-category-story time,.mh-site .mh-category-author { margin-top: 8px; font-size: var(--ui-meta-size); line-height: 1.5; color: var(--ui-meta); white-space: normal; }
.mh-site .mh-home-companion { padding: 20px; overflow: hidden; }
.mh-site .mh-home-companion h2 { margin-top: 12px; }
.mh-site .mh-home-companion>a,.mh-site .mh-related-card>a { border-radius: var(--ui-radius-card); cursor: pointer; }
.mh-site .mh-related-card { flex-basis: calc((100% - 16px) / 2); padding: 16px; overflow: hidden; }
.mh-site .mh-related-card h3 { margin-top: 12px; min-height: 4.35em; font-size: 16px; font-weight: 600; line-height: 1.45; }
.mh-site .mh-related-track { gap: 16px; padding-block: 4px 12px; }
.mh-site .mh-recommendations { margin-top: 40px; padding-top: 24px; }
.mh-site .mh-recommendations h2 { font-size: 20px; font-weight: 700; line-height: 1.3; }
.mh-site .mh-pagination { padding: 24px 0 0; margin-top: 24px; font-size: 14px; }
.mh-site .mh-pagination a,.mh-site .mh-page-current { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: var(--ui-radius-control); }
.mh-site .mh-page-current { background: var(--ui-red); color: #FFFFFF; }
/* Homepage sections keep the established editorial grid. */
.mh-site.mh-home .mh-magazine { padding-block: 32px 48px; }
.mh-site.mh-home .mh-magazine-lead { gap: 24px; margin-bottom: 48px; }
.mh-site.mh-home .mh-magazine .ed-latest,.mh-site.mh-home .mh-category-section { margin-bottom: 48px; }
.mh-site.mh-home .mh-magazine .mh-section-heading { margin-bottom: 20px; }
.mh-site.mh-home .mh-magazine .mh-section-heading h2 { font-size: 28px; gap: 16px; }
.mh-site.mh-home .mh-magazine .ed-latest .mh-article-list { gap: 24px; background: transparent; }
.mh-site.mh-home .mh-magazine .ed-latest .mh-list-item { padding: 20px; gap: 16px; border: 1px solid var(--ui-card-border,transparent); }
.mh-site.mh-home .mh-magazine .ed-latest .mh-list-copy h2 { font-size: var(--ui-card-title); line-height: 1.35; }
.mh-site.mh-home .mh-magazine .ed-latest .mh-list-copy p { font-size: 15px; line-height: 1.65; }
.mh-site.mh-home .mh-magazine .ed-latest .mh-thumbnail { flex-basis: 120px; }
.mh-site.mh-home .mh-magazine .ed-latest .mh-thumbnail img { width: 120px; height: 90px; }
.mh-site.mh-home .mh-category-stories { gap: 16px; }
.mh-site.mh-home .mh-category-feature .mh-category-stories,.mh-site.mh-home .mh-magazine-pair,.mh-site.mh-home .mh-category-opinion .mh-category-stories { column-gap: 24px; }
.mh-site.mh-home .mh-category-feature .mh-category-story:not(.mh-category-story-lead),.mh-site.mh-home .mh-category-list .mh-category-story { padding: 20px; border: 1px solid var(--ui-card-border,transparent); }
.mh-site.mh-home .mh-category-story h3,.mh-site.mh-home .mh-category-story-lead h3,.mh-site.mh-home .mh-category-opinion .mh-category-story h3 { font-size: var(--ui-card-title); line-height: 1.35; }
.mh-site.mh-home .mh-category-story-image { border-radius: var(--ui-radius-image); }
.mh-site.mh-home .mh-home-companions { gap: 24px; margin-top: 24px; }
.mh-site .ed-slider { border-radius: var(--ui-radius-card); background: #181818; }
.mh-site .ed-slide::before { background: linear-gradient(180deg,rgb(24 24 24 / 3%) 12%,rgb(24 24 24 / 32%) 40%,rgb(24 24 24 / 94%) 100%); }
.mh-site .ed-slide h2 { color: #FFFFFF; font-weight: 700; }
.mh-site .ed-slide-copy>p { color: #FFFFFF; font-size: 16px; line-height: 1.65; }
.mh-site .ed-slide-category { background: var(--ui-red); color: #FFFFFF; border-radius: 8px; padding: 4px 8px; }
.mh-site .ed-slide-read { background: #FFFFFF; color: #181818!important; min-height: 44px; align-items: center; border-radius: 8px; padding: 8px 20px; font-size: 15px; font-weight: 600; }
.mh-site .ed-slider-arrows { gap: 8px; }
.mh-site .ed-slider-arrows button { width: 44px; height: 44px; background: #FFFFFF; color: #181818; border-radius: 8px; }
.mh-site.mh-home .ed-slider-arrows .mh-slider-pause { min-width: 44px; border-radius: 8px; font-size: 14px; padding-inline: 12px; }
.mh-site .ed-dots button { width: 24px; min-height: 44px; }
.mh-site .ed-dots button::after { background: #D0D0D0; }
.mh-site .ed-dots button[aria-pressed=true]::after { background: #FFFFFF; box-shadow: 0 0 0 3px var(--ui-red); }
/* Sidebar hierarchy remains lighter than the main headlines. */
.mh-site .ed-news-panel,.mh-site.mh-home .mh-magazine-popular .ed-news-panel { padding: 16px; }
.mh-site .ed-news-panel h2,.mh-site.mh-home .mh-magazine-popular .ed-news-panel h2 { font-size: var(--ui-small-title); font-weight: 700; line-height: 1.4; margin-bottom: 16px; padding-bottom: 12px; }
.mh-site .ed-news-link,.mh-site.mh-home .mh-magazine-popular .ed-news-link { gap: 12px; padding: 12px 8px; border: 1px solid transparent; border-radius: var(--ui-radius-card); cursor: pointer; transition: background-color var(--ui-motion), border-color var(--ui-motion), transform var(--ui-motion), box-shadow var(--ui-motion); }
.mh-site .ed-news-link img { width: 48px; height: 48px; flex-basis: 48px; }
/* Balance compact article sidebar rows: image height matches three title lines. */
.mh-site.mh-article-page .ed-article-sidebar .ed-news-link:not(.ed-news-link-lead) { gap: 10px; padding-inline: 0; }
.mh-site.mh-article-page .ed-article-sidebar .ed-news-link:not(.ed-news-link-lead) img { width: 60px; height: 60px; flex-basis: 60px; }
.mh-site.mh-article-page .ed-article-sidebar .ed-news-link:not(.ed-news-link-lead) .ed-news-title { font-size: 14px; line-height: 1.4; -webkit-line-clamp: 3; line-clamp: 3; }
.mh-site .ed-news-title,.mh-site .ed-news-panel .ed-news-link-lead .ed-news-title,.mh-site.mh-home .mh-magazine-popular .ed-news-title { font-size: var(--ui-small-title); font-weight: 600; line-height: 1.4; -webkit-line-clamp: 4; line-clamp: 4; }
.mh-site .ed-news-panel .ed-news-link-lead .ed-news-title { -webkit-line-clamp: 3; line-clamp: 3; }
.mh-site .ed-news-link small,.mh-site .ed-news-link time,.mh-site.mh-home .mh-magazine-popular .ed-news-copy small { font-size: var(--ui-meta-size); line-height: 1.5; color: var(--ui-meta); margin-top: 8px; white-space: normal; }
/* Article reading measure and type scale. */
.mh-site.mh-article-page .mh-reading { max-width: var(--ui-reading); width: 100%; min-width: 0; padding: 0; margin-inline: auto; }
.mh-site .mh-article-header h1 { font-size: 42px; font-weight: 700; line-height: 1.15; color: var(--ui-text); letter-spacing: -.025em; }
.mh-site .mh-article-category { margin-bottom: 16px; }
.mh-site .mh-breadcrumb { font-size: 14px; gap: 8px; margin-bottom: 20px; }
.mh-site .mh-article-meta { font-size: var(--ui-meta-size); line-height: 1.6; gap: 4px; margin-top: 12px; padding-bottom: 0; border: 0; color: var(--ui-meta); }
.mh-site .mh-article-meta strong { color: var(--ui-secondary); font-weight: 600; }
.mh-site .mh-article-deck { color: var(--ui-secondary); }
.mh-site .mh-article-image { margin: 24px 0; }
.mh-site .mh-article-image figcaption,.mh-site .mh-prose figcaption { font-size: var(--ui-meta-size); line-height: 1.6; color: var(--ui-meta); margin-top: 8px; }
.mh-site .mh-prose,.site-public .article-body,.member-panel .member-preview-content { font-family: var(--ui-font); font-size: var(--ui-article-size); line-height: var(--ui-article-leading); color: var(--ui-text); }
.mh-site .mh-prose p,.site-public .article-body p { margin: 0 0 20px; }
.mh-site .mh-prose h2,.site-public .article-body h2 { font-size: 28px; font-weight: 700; line-height: 1.3; margin: 32px 0 16px; }
.mh-site .mh-prose h3,.site-public .article-body h3 { font-size: 23px; font-weight: 700; line-height: 1.35; margin: 24px 0 12px; }
.mh-site .mh-prose ul,.mh-site .mh-prose ol { margin-block: 20px; }
.mh-site .mh-prose li { margin-block: 8px; }
.mh-site .mh-prose blockquote { background: var(--ui-section); border-left-color: var(--ui-red); margin: 24px 0; padding: 20px 24px; }
.mh-site .mh-prose a { color: var(--ui-red); }
.mh-site .mh-tags { gap: 8px; margin-block: 32px; }
.mh-site .mh-tags a { font-size: 14px; min-height: 36px; display: inline-flex; align-items: center; padding: 4px 12px; }
.mh-site .article-comments { margin-top: 40px; padding: 20px; }
.mh-site .article-comments h2 { font-size: 24px; font-weight: 700; }
.mh-site .article-comment-form__intro h3 { font-size: 20px; }
.mh-site :is(.article-comment-form__intro p,.article-comment-field label,.article-comments__empty,.article-reader-comment__meta time) { font-size: 14px; }
.mh-site .article-comment-form__grid { gap: 16px; }
.mh-site .comment-accordion__toggle { min-height: 44px; font-size: 14px!important; }
/* Compact article share buttons for desktop and mobile. */
.mh-site .article-share-action,.mh-site .article-share-actions--mobile .article-share-action { width: 32px; height: 32px; flex-basis: 32px; }
.mh-site .article-share-action svg { width: 16px; height: 16px; }
.mh-site .article-share-actions--mobile { padding: 6px; }
.mh-site .article-share-count,.mh-site .mh-package-badge { background: var(--ui-red); }
.mh-site .article-reader-bar__title { font-size: 15px; }
.mh-site .article-reader-bar__label { font-size: 13px; }
.mh-site .mh-brand-art { display: block; position: relative; max-width: 100%; min-width: 0; line-height: 0; }
/* Authentication and workspace chrome use the same controls and neutral palette. */
body.auth-v06-page,.dark body.auth-v06-page,.auth-v06-page .auth-v06-stage,.dark .auth-v06-stage { background: var(--ui-bg); }
.auth-v06-page .auth-v06-story { background: #181818; padding: 48px; }
.auth-v06-page :is(.auth-v06-logo,.auth-v06-mobile-logo) { position: relative; line-height: 0; }
.auth-v06-page .auth-v06-story::before,.auth-v06-page .auth-v06-story::after { display: none; }
.auth-v06-page .auth-v06-story-copy h1 { font-size: clamp(36px,4vw,56px); font-weight: 700; line-height: 1.15; }
.auth-v06-page .auth-v06-story-copy>p:last-child,.auth-v06-page .auth-v06-trust { color: #D0D0D0; }
.auth-v06-page .auth-v06-story-copy .auth-v06-kicker { color: #FFFFFF; }
.auth-v06-page .auth-v06-heading h2 { color: var(--ui-text); font-size: 42px; font-weight: 700; line-height: 1.15; }
.auth-v06-page :is(.auth-v06-heading>p:last-child,.auth-v06-switch,.auth-v06-remember,.auth-v06-terms) { color: var(--ui-secondary); }
.auth-v06-page .auth-v06-form label:not(.auth-v06-remember):not(.auth-v06-terms) { color: var(--ui-text); font-weight: 600; margin-bottom: 8px; }
body.auth-v06-page .auth-v06-form .form-input,body.member-panel .member-content-area .form-input { min-height: 44px; border-radius: 8px; border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); font-size: 16px; box-shadow: none; backdrop-filter: none; }
body.auth-v06-page .auth-v06-form .form-input:focus,body.member-panel .member-content-area .form-input:focus { border-color: var(--ui-red); background: var(--ui-surface); box-shadow: none; }
body.member-panel .member-content-area .btn-secondary { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.auth-v06-page :is(.auth-v06-kicker,.auth-v06-switch a,.auth-v06-back) { color: var(--ui-red); }
.auth-v06-page .auth-v06-help { color: var(--ui-meta); font-size: 14px; }
.auth-v06-page .auth-v06-tool,.member-panel .member-topbar-tool,.member-panel .member-profile-trigger { border-radius: 8px; border-color: var(--ui-border); color: var(--ui-secondary); background: var(--ui-surface); box-shadow: none; backdrop-filter: none; width: 44px; min-height: 44px; }
.member-panel .member-profile-trigger { width: auto; }
.member-panel :is(.member-topbar,.member-profile-dropdown,.member-surface-card,.member-preview-dialog,.member-preview-header,.member-preview-article,.member-avatar-editor) { background: var(--ui-surface); border-color: var(--ui-border); border-radius: 10px; box-shadow: none; backdrop-filter: none; }
.member-panel .member-topbar { border-radius: 0; }
.member-panel :is(.member-page-heading h1,.member-section-heading h2,.member-topbar-heading h1,.member-preview-article h1,.member-subheading,.member-profile-trigger-copy strong,.member-profile-dropdown-head strong,.member-field-label) { color: var(--ui-text); font-weight: 700; }
.member-panel .member-page-heading h1 { font-size: 36px; line-height: 1.2; }
.member-panel .member-section-heading h2 { font-size: 28px; line-height: 1.3; }
.member-panel :is(.member-page-heading>div>p:last-child,.member-section-heading p:last-child,.member-profile-dropdown-head span,.member-profile-dropdown a,.member-checkbox-row) { color: var(--ui-secondary); font-size: 15px; }
.member-panel :is(.member-page-eyebrow,.member-section-kicker) { color: var(--ui-red); font-size: 12px; font-weight: 700; }
.member-panel :is(.member-field-help,.member-profile-trigger-copy small) { color: var(--ui-meta); font-size: 14px; }
.member-panel :is(.member-sidebar,.member-sidebar-footer) { background: #181818; border-color: #333333; }
.member-panel .member-sidebar-brand>a { position: relative; display: inline-flex; line-height: 0; }
.member-panel .member-sidebar-link { font-size: 15px; min-height: 44px; border-radius: 8px; color: #D0D0D0; font-weight: 600; }
.member-panel .member-sidebar-link.is-active { background: #222222; color: #FFFFFF; box-shadow: inset 3px 0 var(--ui-red); }
.member-panel :is(.member-sidebar-write,.member-topbar-write) { background: var(--ui-red); color: #FFFFFF; min-height: 44px; border-radius: 8px; box-shadow: none; font-size: 15px; font-weight: 600; }
.member-panel .member-profile-progress { background: var(--ui-section); border-color: var(--ui-border); border-radius: 10px; box-shadow: none; }
.member-panel .member-profile-progress-bar span { background: var(--ui-red); }
.member-panel .member-profile-progress-copy strong { color: var(--ui-text); }
.member-panel .member-profile-progress-copy p { color: var(--ui-secondary); }
.member-panel :is(.member-profile-progress-action a,.member-profile-progress-copy span) { color: var(--ui-red); }
.member-panel .member-surface-card { padding: 24px; }
.admin-panel .admin-sidebar { background: #181818; color: #D0D0D0; border-color: #333333; }
.admin-panel .admin-sidebar-logo-full { position: relative; display: inline-flex; line-height: 0; }
.admin-panel .admin-sidebar-brand>p { font-size: 12px; color: #999999; }
.admin-panel .admin-nav-link { min-height: 44px; font-size: 15px; font-weight: 600; border-radius: 8px; }
.admin-panel .admin-nav-link.is-active { background: #222222; color: #FFFFFF; box-shadow: inset 3px 0 var(--ui-red); }
.admin-panel .admin-menu-group-toggle { color: #999999; font-size: 12px; letter-spacing: .08em; }
body:is(.admin-panel,.member-panel) :is(.bg-white,.bg-slate-50,.bg-slate-100) { background-color: var(--ui-surface); }
body:is(.admin-panel,.member-panel) main :is(.text-slate-950,.text-slate-900,.text-slate-800) { color: var(--ui-text); }
body:is(.admin-panel,.member-panel) main :is(.text-slate-700,.text-slate-600) { color: var(--ui-secondary); }
body:is(.admin-panel,.member-panel) main :is(.text-slate-500,.text-slate-400) { color: var(--ui-meta); }
body:is(.admin-panel,.member-panel) :is(.border-slate-100,.border-slate-200,.border-slate-300) { border-color: var(--ui-border); }
:is(.admin-panel,.member-panel) main :is(.rounded-xl,.rounded-2xl,.rounded-3xl) { border-radius: var(--ui-radius-card); }
/* Fine-pointer desktop interactions never change internal layout dimensions. */
@media (hover: hover) and (pointer: fine) {
  body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.mh-button:not(.mh-button-secondary),.btn-primary,.auth-v06-submit,.article-comment-submit,.ed-login):hover { background: var(--ui-red-hover); border-color: var(--ui-red-hover); color: #FFFFFF; }
  body:is(.mh-site,.site-public,.auth-v06-page,.member-panel,.admin-panel) :is(.mh-button-secondary,.btn-secondary):hover { background: var(--ui-hover); border-color: var(--ui-hover-border); color: var(--ui-text); }
  .mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card,.ed-news-link):hover { --ui-card-border: var(--ui-hover-border); background: var(--ui-hover); border-color: var(--ui-hover-border); transform: translateY(-2px); box-shadow: var(--ui-shadow); }
  .mh-site :is(.mh-list-item,.mh-category-story,.ed-card):hover :is(.mh-thumbnail img,.mh-category-story-image img,.ed-card-image img) { transform: scale(1.03); }
  .mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card,.ed-news-link):hover :is(h2,h3,.ed-news-title) { color: var(--ui-red); }
}
@media (min-width: 1101px) {
  .mh-site .mh-header-inner { gap: 24px; min-height: 88px; }
  .mh-site .mh-header-inner>.mh-brand img { width: 180px; }
  .mh-site .mh-header-actions { flex: 1; min-width: 0; gap: 12px; }
  body.mh-site .mh-header .mh-desktop-nav { flex: 1; flex-wrap: nowrap; gap: 0 16px; }
  body.mh-site .mh-header-inner { min-height: 80px; }
  .mh-site .mh-header .ed-header-account { display: inline-flex; }
  .mh-site.mh-home .mh-masthead-account { display: none; }
  .mh-site.mh-home .mh-desktop-nav { justify-content: center; }
}
@media (max-width: 1100px) {
  .mh-site .mh-header-inner { grid-template-columns: 92px minmax(0,1fr) 92px; gap: 0; min-height: 72px; }
  .mh-site .mh-header .mh-brand img { width: min(175px,calc(100vw - 216px)); }
  .mh-site .mh-header .mh-icon-button { width: 44px; height: 44px; flex-basis: 44px; }
  .mh-site .mh-header .ed-header-account { display: none; }
  .mh-site .mh-mobile-menu summary { width: 44px; min-height: 44px; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .mh-site .mh-footer-directory { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mh-site .mh-footer-directory>div:first-child { grid-column: 1/-1; }
}
@media (max-width: 767px) {
  :root { --ui-card-title: 18px; --ui-small-title: 16px; --ui-meta-size: 13px; --ui-article-size: 17px; --ui-article-leading: 1.75; }
  .mh-site .mh-container { width: calc(100% - 32px); }
  .mh-site .mh-categories { gap: 0; }
  .mh-site .mh-categories>a,.mh-site .mh-category-more summary { padding-inline: 8px; }
  .mh-site .mh-categories>.mh-category-desktop { display: none; }
  .mh-site .mh-hero { padding-block: 32px; }
  .mh-site .mh-hero h1,.mh-site .mh-article-header h1 { font-size: 30px; font-weight: 700; line-height: 1.2; }
  .mh-site .mh-content { padding-block: 32px; }
  .mh-site .mh-section-heading h2,.mh-site.mh-home .mh-magazine .mh-section-heading h2 { font-size: 24px; }
  .mh-site .mh-recommendations h2 { font-size: 18px; }
  .mh-site .mh-section-heading { margin-bottom: 16px; flex-wrap: wrap; }
  .mh-site .mh-section-heading>a { font-size: 14px; }
  .mh-site.mh-home .mh-magazine { padding-block: 24px 32px; }
  .mh-site.mh-home .mh-magazine-lead { gap: 32px; margin-bottom: 32px; }
  .mh-site.mh-home .mh-magazine .ed-latest,.mh-site.mh-home .mh-category-section { margin-bottom: 32px; }
  .mh-site.mh-home .mh-magazine .ed-latest .mh-article-list { gap: 16px; }
  .mh-site .mh-list-item,.mh-site.mh-home .mh-magazine .ed-latest .mh-list-item,.mh-site .mh-category-story,.mh-site.mh-home .mh-category-feature .mh-category-story,.mh-site.mh-home .mh-category-list .mh-category-story,.mh-site.mh-home .mh-category-opinion .mh-category-story { padding: 16px; gap: 12px; border: 1px solid transparent; }
  .mh-site .mh-thumbnail,.mh-site.mh-home .mh-magazine .ed-latest .mh-thumbnail { flex-basis: 88px; }
  .mh-site .mh-thumbnail img,.mh-site.mh-home .mh-magazine .ed-latest .mh-thumbnail img { width: 88px; height: 72px; }
  .mh-site.mh-home .mh-category-story-image { flex-basis: 88px; }
  .mh-site.mh-home .mh-category-story-image img { height: 72px; }
  .mh-site.mh-home .mh-home-companions { gap: 16px; margin-top: 16px; }
  .mh-site .mh-home-companion { padding: 16px; }
  .mh-site.mh-home .mh-home-companion>a { gap: 12px; }
  .mh-site.mh-home .mh-home-companion img { width: 88px; height: 72px; flex-basis: 88px; }
  .mh-site.mh-home .mh-home-companion h2 { margin-top: 0; }
  .mh-site .mh-related-card { flex-basis: 85%; padding: 16px; }
  .mh-site .mh-prose h2,.site-public .article-body h2 { font-size: 24px; }
  .mh-site .mh-prose h3,.site-public .article-body h3 { font-size: 20px; }
  .mh-site .mh-recommendations,.mh-site .article-comments { margin-top: 32px; }
  .mh-site .mh-article-image { margin: 20px 0; }
  .mh-site .article-comments { padding: 16px; }
  .mh-site .mh-footer-directory { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 20px; padding-block: 32px; }
  .mh-site .mh-footer-directory>div:first-child { grid-column: 1/-1; text-align: center; }
  .mh-site .mh-footer-directory>div:first-child>.mh-brand { justify-content: center; }
  .mh-site .mh-footer-directory nav { gap: 4px; }
  .mh-site .mh-footer-directory nav a { width: 100%; min-height: 32px; }
  .mh-site .mh-footer-group h2 { font-size: 14px; margin-bottom: 12px; }
  .mh-site .mh-footer-bottom { text-align: center; }
  .mh-site .mh-pagination { flex-wrap: wrap; gap: 12px; }
  .mh-site .mh-prose blockquote { padding: 16px; }
  .auth-v06-page .auth-v06-heading h2 { font-size: 30px; line-height: 1.2; }
  .member-panel .member-page-heading h1 { font-size: 30px; }
  .member-panel .member-surface-card { padding: 16px; }
}
@media (hover: none), (pointer: coarse), (max-width: 767px) {
  .mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card,.ed-news-link):hover { --ui-card-border: transparent; transform: none; box-shadow: none; background: var(--ui-surface); border-color: transparent; }
  .mh-site :is(.mh-list-item,.mh-category-story,.ed-card):hover :is(.mh-thumbnail img,.mh-category-story-image img,.ed-card-image img) { transform: none; }
  .mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card,.ed-news-link):hover :is(h2,h3,.ed-news-title) { color: var(--ui-text); }
  .mh-site .article-share-action:hover,.auth-v06-page .auth-v06-tool:hover,.member-panel .member-topbar-tool:hover,.member-panel .member-sidebar-link:hover { transform: none; box-shadow: none; }
  .mh-site .mh-footer-social-links .mh-social-icon:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card,.ed-news-link,.mh-thumbnail img,.mh-category-story-image img,.ed-card-image img) { transition: none; }
  .mh-site :is(.mh-list-item,.mh-category-story,.mh-home-companion,.mh-related-card,.ed-card,.ed-news-link):hover,.mh-site :is(.mh-list-item,.mh-category-story,.ed-card):hover :is(.mh-thumbnail img,.mh-category-story-image img,.ed-card-image img) { transform: none; }
}
@media print {
  :root,html.dark { --ui-bg: #FFFFFF; --ui-surface: var(--brand-white); --ui-section: var(--brand-white); --ui-text: var(--brand-black); --ui-secondary: #181818; --ui-meta: #5F6368; --ui-border: #E5E5E5; }
  .mh-site .mh-prose { font-size: 12pt; line-height: 1.6; }
  .mh-site .mh-article-header h1 { font-size: 24pt; }
}

/* Guest account actions match the paired Masuk / Gabung header. */
.mh-site .mh-header .ed-header-account { flex-shrink: 0; min-width: 80px; white-space: nowrap; }
.mh-site .mh-header .ed-header-register { background: var(--ui-red-hover); border-color: var(--ui-red-hover); }

/* Show the official compact brand after the desktop homepage masthead scrolls away. */
.mh-site .mh-header .mh-home-scroll-icon { display: none; }
@media screen and (min-width: 1101px) {
  body.mh-site.mh-home .mh-header-inner > .mh-brand { display: inline-flex; flex: 0 0 44px; width: 44px; height: 44px; justify-content: center; visibility: hidden; pointer-events: none; }
  body.mh-site.mh-home .mh-header.is-stuck .mh-header-inner > .mh-brand { visibility: visible; pointer-events: auto; }
  .mh-site.mh-home .mh-header .mm-brand--mobile-wordmark { display: none; }
  .mh-site.mh-home .mh-header .mh-home-scroll-icon { display: inline-flex; }
}