/*
 * Theme Name:   MACI GP Child
 * Theme URI:    https://maci.co.id
 * Description:  GeneratePress Child Theme untuk PT Mega Andalan Cleanroom Industri.
 *               Bergantung pada plugin MACI Core untuk fungsionalitas backend (CPT,
 *               REST API, Contact Form). Mendukung Elementor (Homepage) dan
 *               Rank Math SEO. Full Classic Editor — Gutenberg dinonaktifkan.
 * Version:      1.11.8
 * Template:     generatepress
 * Author:       MACI Dev Team
 * Author URI:   https://maci.co.id
 * Text Domain:  maci-gp-child
 * Domain Path:  /languages
 * Requires at least: 6.3
 * Requires PHP: 8.1
 * License:      GPL-2.0-or-later
 * License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */
:root {
	--maci-blue:        #4e9ad6;
	--maci-teal:        #5bbe9f;
	--maci-gradient:    linear-gradient( 135deg, #4e9ad6, #5bbe9f );
	--color-ink:        #0f172a;
	--color-muted:      #64748b;
	--color-muted-rgba: rgba( 15, 23, 42, 0.72 );
	--bg-light:         #f5f9ff;
	--bg-teal-light:    #f4fdfa;
	--bg-topbar:        #0f172a;
	--radius-card:      18px;
	--radius-btn:       14px;
	--shadow-card:      0 10px 30px rgba( 0, 0, 0, 0.05 );
	--shadow-md:        0 20px 60px rgba( 2, 10, 20, 0.10 );
	--glass-bg:         rgba( 255, 255, 255, 0.6 );
	--glass-blur:       blur( 16px );
	--glass-border:     rgba( 15, 23, 42, 0.08 );
	--container-max:    1140px;
	--section-gap:      80px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 15px;
	font-weight: 400;
	color: var(--color-ink);
	background: #fff;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity 0.2s ease; }
a:hover { opacity: 0.85; }
ul, ol { list-style: none; }

/* ==========================================================================
   3. AKSESIBILITAS (a11y)
   ========================================================================== */

/**
 * :focus-visible — tampilkan outline hanya untuk navigasi keyboard,
 * bukan klik mouse. Standar WCAG 2.1 level AA.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline:        2px solid var(--maci-blue);
	outline-offset: 3px;
	border-radius:  4px;
}

/**
 * Screen reader text — konten tersedia untuk AT (screen reader) tapi
 * tidak terlihat secara visual. Standar WordPress a11y utility.
 */
.screen-reader-text {
	clip:     rect(1px, 1px, 1px, 1px);
	height:   1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width:    1px;
}
.screen-reader-text:focus {
	clip:     auto;
	height:   auto;
	overflow: visible;
	position: static;
	white-space: normal;
	width:    auto;
}

/* Skip-link: tersembunyi sampai difokus (akses keyboard). */
.maci-skip-link {
	position:      absolute;
	left:          12px;
	top:           -120px;
	background:    #111827;
	color:         #fff;
	padding:       10px 14px;
	border-radius: 10px;
	font-weight:   700;
	font-size:     14px;
	z-index:       9999;
	transition:    top 0.2s ease;
}
.maci-skip-link:focus-visible {
	top: 12px;
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */
.maci-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: 24px; }
.maci-row       { display: flex; align-items: center; }
.maci-section   { padding-block: var(--section-gap); }

/* ==========================================================================
   5. TOPBAR
   ========================================================================== */
.maci-topbar {
	background:    rgba(255,255,255,0.92);
	color:         var(--color-muted);
	font-size:     12px;
	font-weight:   500;
	letter-spacing: 0.02em;
	padding-block: 9px;
	position:      relative;
	z-index:       200;
	border-bottom: 1px solid var(--glass-border);
}
.maci-topbar .maci-row { justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.maci-topbar__left,
.maci-topbar__right     { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.maci-topbar__left a,
.maci-topbar__right > a,
.maci-lang-switcher,
.maci-lang-link,
.maci-lang-current {
	display: inline-flex;
	align-items: center;
}
.maci-topbar a          { color: var(--color-muted); white-space: nowrap; transition: color 0.2s ease; line-height: 1; }
.maci-topbar a:hover    { color: var(--color-ink); opacity: 1; }
.maci-lang-switcher {
	font-weight:    700;
	font-size:      12px;
	letter-spacing: 0.06em;
	color:          var(--color-muted);
	border-left:    1px solid var(--glass-border);
	padding-left:   16px;
	min-height:     18px;
	line-height:    1;
}
.maci-topbar .maci-lang-switcher {
	position: relative;
	top:      2px;
}
.maci-lang-list {
	display:     inline-flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         0;
	line-height: 1;
}
.maci-lang-item {
	display:     inline-flex;
	align-items: center;
}
.maci-lang-item + .maci-lang-item::before {
	content: "|";
	display: inline-block;
	margin:  0 10px;
	color:   currentColor;
	opacity: 0.7;
	font-weight: 400;
}
.maci-lang-link,
.maci-lang-current {
	gap:             6px;
	color:           inherit;
	text-decoration: none;
	line-height:     1;
}
.maci-lang-link img,
.maci-lang-current img {
	width:  16px;
	height: auto;
	display: block;
	flex-shrink: 0;
	vertical-align: middle;
}

/* ==========================================================================
   6. NAVBAR
   ========================================================================== */
.maci-header {
	position:          sticky;
	top:               0;
	z-index:           100;
	background:        var(--glass-bg);
	backdrop-filter:   var(--glass-blur);
	-webkit-backdrop-filter: var(--glass-blur);
	border-bottom:     1px solid var(--glass-border);
	box-shadow:        0 2px 20px rgba(0,0,0,0.04);
	transition:        box-shadow 0.3s ease;
}
.maci-header.is-scrolled { background: rgba(255,255,255,0.88); box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

/*
 * .maci-navbar-inner — layout 3-kolom di desktop:
 *   [logo]  [nav-center]  [cta + hamburger]
 * Menggunakan grid agar nav selalu presisi di tengah antara logo dan CTA,
 * tidak tergeser walau panjang teks berbeda.
 */
.maci-navbar-inner {
	display:     grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	height:      68px;
	gap:         0;
}

/* Logo — kolom kiri, tidak shrink */
.maci-brand {
	display:         flex;
	align-items:     center;
	gap:             12px;
	flex-shrink:     0;
	text-decoration: none;
	justify-self:    start;
}
.maci-brand .custom-logo { width: var(--maci-header-logo-width, 140px); height: auto; max-width: none; }
.maci-brand__logo        { width: var(--maci-header-logo-width, 140px); height: auto; max-width: none; }

/*
 * Nav — kolom tengah, di-center secara presisi
 * display:flex dengan justify-content:center memastikan
 * menu items selalu di tengah kolom grid.
 */
.maci-nav-menu {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
}
.maci-nav-menu > ul {
	display:     flex;
	align-items: center;
	gap:         2px;
	list-style:  none;
	padding:     0;
	margin:      0;
	height:      100%;
}
.maci-nav-menu > ul > li {
	display:     flex;
	align-items: center;
	height:      100%;
}
.maci-nav-menu > ul > li > a {
	display:        flex;
	align-items:    center;
	height:         100%;
	padding:        0 14px;
	font-size:      13px;
	font-weight:    700;
	letter-spacing: 0.04em;
	color:          var(--color-ink);
	border-radius:  0;
	transition:     color 0.2s ease, background 0.2s ease;
	white-space:    nowrap;
}
.maci-nav-menu > ul > li > a:hover,
.maci-nav-menu > ul > li.current-menu-item > a,
.maci-nav-menu > ul > li.current_page_item > a {
	color:      var(--maci-blue);
	background: rgba(78,154,214,0.08);
	opacity:    1;
}
.maci-sub-toggle { display: none; }

/* Kolom kanan: CTA + hamburger */
.maci-header-cta {
	display:     inline-flex;
	flex-shrink: 0;
	justify-self: end;
}
.maci-hamburger {
	display:          none; /* hidden desktop */
	justify-self:     end;
}

/* CTA Button */
.maci-btn-cta {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         10px 20px;
	border-radius:   var(--radius-btn);
	font-size:       13px;
	font-weight:     800;
	letter-spacing:  0.03em;
	color:           #fff;
	background:      var(--maci-gradient);
	border:          none;
	cursor:          pointer;
	white-space:     nowrap;
	box-shadow:      0 8px 24px rgba(78,154,214,0.28);
	transition:      transform 0.2s ease, box-shadow 0.2s ease;
	text-decoration: none;
	flex-shrink:     0;
}
.maci-btn-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(78,154,214,0.36); opacity: 1; color: #fff; }

/* Backdrop (hidden desktop) */
.maci-nav-backdrop { display: none; }

/* Mobile panel elements — sembunyikan di desktop */
.maci-panel-header,
.maci-panel-lang,
.maci-panel-cta-wrap,
.maci-panel-social { display: none; }

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.maci-footer            { background: var(--maci-gradient); color: rgba(255,255,255,0.92); padding-top: 56px; }
.maci-footer__grid      { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.maci-footer__grid > *  { min-width: 0; }
.maci-footer__brand     { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.maci-footer__brand-link { display: inline-flex; align-items: center; }
.maci-footer__logo      { width: var(--maci-footer-logo-width, 140px); height: auto; max-width: none; }
.maci-footer__description { color: #ffffff; font-size: 0.95rem; line-height: 1.6; margin: 20px 0 25px; padding-right: 15px; }
.maci-footer__tagline   { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.80); line-height: 1.6; max-width: 240px; }
.maci-footer__social    { display: flex; gap: 12px; }
.maci-footer__social a  { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.20); transition: background 0.2s ease; }
.maci-footer__social a:hover { background: rgba(255,255,255,0.30); opacity: 1; }
.maci-footer__social img,
.maci-footer__social svg { width: 18px; height: 18px; filter: brightness(0) invert(1); }
.maci-footer__col       { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.maci-footer__col h4     { font-size: 14px; font-weight: 700; letter-spacing: 0.12em; color: rgba(255,255,255,0.70); margin-bottom: 14px; }
.maci-footer__address   { display: flex; flex-direction: column; gap: 8px; }
.maci-footer__address p  { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.75; margin: 0; }
.maci-footer-menu ul,
#menu-footer            { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.maci-footer-menu ul li a      { font-size: 14px; color: rgba(255,255,255,0.85); transition: color 0.2s ease; }
.maci-footer-menu ul li a:hover { color: #fff; opacity: 1; }
.maci-footer__bottom     { border-top: 1px solid rgba(255,255,255,0.18); padding-block: 18px; text-align: center; font-size: 12px; color: rgba(255,255,255,0.70); }
.maci-footer__bottom p   { margin: 0; }

/* Widget di dalam kolom footer */
.maci-footer-widget                 { display: flex; flex-direction: column; gap: 12px; }
.maci-footer-widget p               { font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.75; margin: 0; }
.maci-footer-widget a               { color: rgba(255,255,255,0.85); transition: color 0.2s ease; }
.maci-footer-widget a:hover         { color: #fff; opacity: 1; }
.maci-footer-widget ul              { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.maci-footer-widget ul li a         { font-size: 14px; color: rgba(255,255,255,0.85); transition: color 0.2s ease; }
.maci-footer-widget ul li a:hover   { color: #fff; opacity: 1; }
.maci-footer-widget .maci-btn-cta   { align-self: flex-start; margin-top: 4px; }

/* part of footer */
.maci-footer__bottom {
  text-align: center;
  margin-top: 20px;
}

.maci-footer__copyright {
  font-size: 13px;
  color: #fff;
  margin: 0;
}

.maci-footer__sub {
  font-size: 12px;
  color: #fff;
  opacity: 0.8;
  margin-top: 4px;
}

.maci-footer-widget li a {
  position: relative;
}

.maci-footer-widget li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #fff;
  transition: width 0.3s ease;
}

.maci-footer-widget li a:hover::after {
  width: 100%;
}


.maci-footer__col h4 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.maci-footer__col h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px; /* panjang garis */
  height: 1px;
  background: rgba(255,255,255,0.3);
}
/* ==========================================================================
   8. ARCHIVE GRID
   ========================================================================== */
.maci-archive-header    { padding-block: 56px 32px; text-align: center; }
.maci-archive-header h1 { font-size: clamp(28px,4vw,42px); font-weight: 900; letter-spacing: -0.03em; color: var(--color-ink); margin-bottom: 12px; }
.maci-archive-header p  { font-size: 15px; color: var(--color-muted); max-width: 600px; margin-inline: auto; line-height: 1.7; }

.maci-post-grid             { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding-bottom: var(--section-gap); }
.maci-post-card             { background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-card); border: 1px solid rgba(15,23,42,0.06); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease; display: flex; flex-direction: column; }
.maci-post-card:hover       { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,0.10); }
.maci-post-card__thumb      { aspect-ratio: 16/9; overflow: hidden; border-radius: 16px 16px 0 0; }
.maci-post-card__thumb img  { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.maci-post-card:hover .maci-post-card__thumb img { transform: scale(1.04); }
.maci-post-card__thumb-placeholder { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(78,154,214,0.12), rgba(91,190,159,0.10)); display: flex; align-items: center; justify-content: center; color: var(--color-muted); font-size: 13px; }
.maci-post-card__body       { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.maci-post-card__meta       { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.maci-post-card__cat        { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; background: linear-gradient(135deg, rgba(78,154,214,0.12), rgba(91,190,159,0.10)); border: 1px solid rgba(78,154,214,0.14); color: var(--maci-blue); }
.maci-post-card__date       { font-size: 12px; color: var(--color-muted); font-weight: 500; }
.maci-post-card__title      { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink); line-height: 1.35; }
.maci-post-card__title a    { color: inherit; transition: color 0.2s ease; }
.maci-post-card__title a:hover { color: var(--maci-blue); opacity: 1; }
.maci-post-card__excerpt    { font-size: 13.5px; color: var(--color-muted); line-height: 1.7; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.maci-post-card__read-more  { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--maci-blue); margin-top: 4px; }
.maci-post-card__read-more::after { content: '\2192'; transition: transform 0.2s ease; }
.maci-post-card:hover .maci-post-card__read-more::after { transform: translateX(4px); }

.maci-pagination              { display: flex; justify-content: center; padding-bottom: var(--section-gap); }
.maci-pagination .nav-links   { display: flex; gap: 8px; }
.maci-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; font-size: 14px; font-weight: 700; color: var(--color-ink); background: #fff; border: 1px solid rgba(15,23,42,0.10); transition: all 0.2s ease; }
.maci-pagination .page-numbers.current,
.maci-pagination .page-numbers:hover { background: var(--maci-gradient); color: #fff; border-color: transparent; opacity: 1; }

/* ==========================================================================
   9. SINGLE POST
   ========================================================================== */
.maci-single           { padding-block: 56px var(--section-gap); }
.maci-single__inner    { max-width: 800px; margin-inline: auto; }
.maci-single__header   { margin-bottom: 32px; }
.maci-single__cat      { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: 0.10em; background: linear-gradient(135deg, rgba(78,154,214,0.12), rgba(91,190,159,0.10)); border: 1px solid rgba(78,154,214,0.18); color: var(--maci-blue); margin-bottom: 16px; }
 
.maci-single__byline   { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--color-muted); }
.maci-single__byline span { display: inline-flex; align-items: center; gap: 5px; }
.maci-single__divider  { height: 1px; background: rgba(15,23,42,0.08); margin-block: 28px; }
.maci-single__featured { border-radius: 16px; overflow: hidden; margin-bottom: 40px; aspect-ratio: 16/9; }
.maci-single__featured img { width: 100%; height: 100%; object-fit: cover; }
.maci-single__content  { font-size: 1rem; line-height: 1.8; color: #334155; }
.maci-single__content h2,
.maci-single__content h3,
.maci-single__content h4 { color: var(--color-ink); font-weight: 800; letter-spacing: -0.02em; margin-top: 2em; margin-bottom: 0.75em; }
.maci-single__content h2 { font-size: 1.5rem; }
.maci-single__content h3 { font-size: 1.25rem; }
.maci-single__content h4 { font-size: 1.1rem; }
.maci-single__content p  { margin-bottom: 1.5em; }
.maci-single__content ul,
.maci-single__content ol { margin-bottom: 1.5em; padding-left: 1.5em; }
.maci-single__content ul  { list-style: disc; }
.maci-single__content ol  { list-style: decimal; }
.maci-single__content li  { margin-bottom: 0.5em; }
.maci-single__content a   { color: var(--maci-blue); text-decoration: underline; text-underline-offset: 3px; }
.maci-single__content blockquote { border-left: 4px solid var(--maci-blue); padding: 16px 20px; background: rgba(78,154,214,0.06); border-radius: 0 12px 12px 0; font-style: italic; margin-block: 2em; }
.maci-single__content img { border-radius: 12px; margin-block: 1.5em; }
/* Modifikasi Judul dengan Gradien MACI */
.maci-single__title { 
    font-size: clamp(26px,4vw,38px); 
    font-weight: 800; 
    letter-spacing: -0.03em; 
    line-height: 1.2; 
    margin-bottom: 18px; 
    /* Efek Gradien */
    background: var(--maci-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}
/* ==========================================================================
   10. REVEAL ANIMATION
   ========================================================================== */
.maci-reveal          { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.maci-reveal.is-visible { opacity: 1; transform: translateY(0); }

/**
 * Nonaktifkan animasi untuk pengguna yang memilih "reduce motion".
 * Standar WCAG 2.1 — 2.3.3 Animation from Interactions (Level AAA).
 */
@media (prefers-reduced-motion: reduce) {
	.maci-reveal,
	.maci-reveal.is-visible {
		opacity:    1;
		transform:  none;
		transition: none;
	}
}

/* ==========================================================================
   11. CERTIFICATION BADGE
   Digunakan oleh maci_render_cert_status_badge() di plugin MACI Core.
   ========================================================================== */
.maci-cert-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            5px;
	padding:        4px 10px;
	border-radius:  999px;
	font-size:      11px;
	font-weight:    800;
	letter-spacing: 0.08em;
}
.maci-cert-badge--active {
	background: rgba(91,190,159,.12);
	color:      #5bbe9f;
}
.maci-cert-badge--expired {
	background: rgba(239,68,68,.12);
	color:      #ef4444;
}
.maci-cert-badge--no_expiry {
	background: rgba(100,116,139,.12);
	color:      #64748b;
}

/* ==========================================================================
   12. CONTACT FORM — HONEYPOT
   Field honeypot disembunyikan via class ini (dipindahkan dari inline style
   di PHP ke sini agar sesuai standar Separation of Concerns).
   !important diperlukan agar tidak teroverride oleh user agent stylesheet.
   ========================================================================== */
.maci-form-honeypot {
	display:    none !important;
	visibility: hidden !important;
	position:   absolute !important;
	left:       -9999px !important;
}

/* ==========================================================================
   13. BREADCRUMBS (Rank Math)
   Rank Math menampilkan breadcrumbs dengan class .rank-math-breadcrumb.
   Overrides ini menyesuaikan tampilan dengan design token MACI.
   ========================================================================== */
.maci-breadcrumbs-wrap {
	padding-block: 12px 0;
}
.rank-math-breadcrumb,
.rank-math-breadcrumb p {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         6px;
	font-size:   12px;
	color:       var(--color-muted);
	font-weight: 500;
}
.rank-math-breadcrumb a {
	color:      var(--color-muted);
	transition: color 0.2s ease;
}
.rank-math-breadcrumb a:hover {
	color:   var(--maci-blue);
	opacity: 1;
}
.rank-math-breadcrumb .separator {
	color:   var(--glass-border);
	margin:  0 2px;
}
.rank-math-breadcrumb .last {
	color:       var(--color-ink);
	font-weight: 600;
}

/* ==========================================================================
   14. GENERATEPRESS INTEGRATION
   Override selektif terhadap GeneratePress defaults untuk menyatu
   dengan design system MACI. Hanya mengubah apa yang perlu diubah.
   ========================================================================== */

/* Reset margin bawaan GP pada .site-main agar padding dikendalikan
   oleh wrapper section template MACI. */
.is-project-archive .site-main,
.is-project-single  .site-main,
.is-cert-archive    .site-main,
.is-cert-single     .site-main {
	padding-top:    0;
	padding-bottom: 0;
}

/* Nonaktifkan padding bawaan GP .inside-article untuk halaman CPT MACI.
   Setiap template mengelola paddingnya sendiri via .maci-section / .maci-container. */
.is-project-archive .inside-article,
.is-project-single  .inside-article,
.is-cert-archive    .inside-article,
.is-cert-single     .inside-article {
	padding: 0;
}

/* Sembunyikan .entry-header bawaan GP pada halaman CPT MACI karena
   setiap template punya section header sendiri. */
.is-project-archive .entry-header,
.is-project-single  .entry-header,
.is-cert-archive    .entry-header,
.is-cert-single     .entry-header {
	display: none;
}

/* Pastikan .entry-content tidak menambahkan margin ekstra. */
.is-project-archive .entry-content,
.is-project-single  .entry-content,
.is-cert-archive    .entry-content,
.is-cert-single     .entry-content {
	margin-top: 0;
}

/* Nonaktifkan padding bawaan GP .content-area untuk Elementor full-width. */
.page-template-page-front-page-builder .content-area,
.page-template-page-front-page-builder .site-main,
.page-template-page-front-page-builder .inside-article {
	padding: 0;
}

/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */

/* ── Tablet: 768px – 980px ── */
@media (max-width: 980px) {
	.maci-footer__grid { grid-template-columns: 1fr 1fr; }

	/* Single Certification: stack kolom info + preview. */
	.is-cert-single .maci-cert-layout {
		display: block !important;
	}
	.is-cert-single .maci-cert-preview-sticky {
		position:   static !important;
		margin-top: 32px;
	}

	/* Single Project: hero grid stack. */
	.is-project-single .maci-project-hero-layout {
		display: block !important;
	}

	/* Filter region sticky di tablet. */
	.maci-region-filter { top: 0 !important; }
}

/* ── Mobile: max 768px ── */
@media (max-width: 768px) {
	/* Topbar disembunyikan penuh di mobile sesuai kebutuhan UX. */
	.maci-topbar { display: none !important; }

	/* Saat nav mobile terbuka, pastikan header + panel berada di atas backdrop. */
	body.maci-nav-open .maci-header { z-index: 10001 !important; }

	/* ── Navbar inner: kembali ke flexbox di mobile ── */
	.maci-navbar-inner {
		display:         flex !important;
		justify-content: space-between;
		align-items:     center;
		height:          60px;
		gap:             0;
	}

	/* CTA desktop tersembunyi */
	.maci-header-cta { display: none !important; }

	/* Hamburger: tampil di mobile */
	.maci-hamburger {
		display:          flex !important;
		flex-direction:   column;
		justify-content:  center;
		align-items:      center;
		gap:              5px;
		background:       transparent !important;
		background-color: transparent !important;
		background-image: none !important;
		border:           none !important;
		box-shadow:       none !important;
		cursor:           pointer;
		padding:          8px;
		width:            40px;
		height:           40px;
		flex-shrink:      0;
	}
	.maci-hamburger span {
		display:       block !important;
		width:         22px !important;
		height:        2px !important;
		background:    var(--color-ink) !important;
		border-radius: 2px !important;
		transition:    transform 0.3s ease, opacity 0.3s ease;
	}

	/* ── Backdrop overlay ── */
.maci-nav-backdrop {
		display:    block;
		position:   fixed;
		inset:      0;
		background: rgba(0, 0, 0, 0.55);
		z-index:    9998; /* Nilai diturunkan agar berada di bawah panel menu */
		opacity:    0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.32s ease, visibility 0.32s ease;
	}
	.maci-nav-backdrop.is-active {
		opacity:    1;
		visibility: visible;
		pointer-events: auto;
	}

	/* ── Nav panel: left-side drawer ── */
	.maci-nav-menu {
		display:        flex !important;
		flex-direction: column !important;
		align-items:    stretch !important;
		justify-content: flex-start !important;
		gap:            0 !important;

		position:   fixed !important;
		top:        0 !important;
		left:       0 !important;
		bottom:     0 !important;
		width:      82vw !important;
		max-width:  340px !important;
		height:     100dvh !important;
		z-index:    9999 !important;
		overflow-y: auto !important;

		background:  #ffffff !important;
		box-shadow:  6px 0 32px rgba(0, 0, 0, 0.14) !important;
		padding:     0 !important;

		transform:   translateX(-110%) !important;
		transition:  transform 0.32s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	.maci-nav-menu.is-open {
		transform: translateX(0) !important;
	}

	/* ── Panel header: logo kiri + X button kanan ── */
	.maci-panel-header {
		display:         flex !important;
		align-items:     center;
		justify-content: space-between;
		padding:         0 16px 0 20px;
		height:          64px;
		min-height:      64px;
		border-bottom:   1px solid #f0f2f5;
		flex-shrink:     0;
		background:      #fff;
	}
	.maci-panel-brand img,
	.maci-panel-brand .custom-logo {
		height:  38px;
		width:   auto;
		display: block;
	}

	/* Tombol X — di dalam panel header, kanan atas */
	.maci-nav-close {
		display:         flex !important;
		align-items:     center;
		justify-content: center;
		width:           36px;
		height:          36px;
		min-width:       36px;
		background:      #f0f2f5 !important;
		color:           var(--color-ink) !important;
		border:          none !important;
		border-radius:   8px;
		cursor:          pointer;
		flex-shrink:     0;
		transition:      background 0.2s ease, color 0.2s ease;
		box-shadow:      none !important;
		padding:         0 !important;
	}
	.maci-nav-close:hover {
		background: #dde1e8 !important;
		color:      var(--maci-blue) !important;
	}
	.maci-nav-close svg { display: block; }

	/* ── Menu items ── */
	.maci-nav-menu > ul {
		display:        flex !important;
		flex-direction: column !important;
		list-style:     none !important;
		padding:        0 !important;
		margin:         0 !important;
		gap:            0 !important;
		height:         auto !important;
		flex:           0 0 auto;
	}
	.maci-nav-menu > ul > li {
		display:       block !important;
		height:        auto !important;
		border-bottom: 1px solid #f0f2f5;
		position:      relative;
	}
	.maci-nav-menu > ul > li > a {
		display:        block !important;
		height:         auto !important;
		padding:        15px 20px !important;
		font-size:      15px !important;
		font-weight:    600 !important;
		color:          var(--color-ink) !important;
		background:     transparent !important;
		border-radius:  0 !important;
		letter-spacing: 0.02em;
	}
	.maci-nav-menu > ul > li > a:hover,
	.maci-nav-menu > ul > li.current-menu-item > a {
		color:      var(--maci-blue) !important;
		background: rgba(78,154,214,0.06) !important;
	}

	/* Sub-menu toggle */
	.maci-sub-toggle {
		position:    absolute;
		right:       0;
		top:         0;
		height:      50px;
		width:       50px;
		background:  none !important;
		border:      none !important;
		box-shadow:  none !important;
		cursor:      pointer;
		display:     flex;
		align-items: center;
		justify-content: center;
		color:       var(--color-muted);
		font-size:   18px;
		transition:  transform 0.25s ease;
	}
	.maci-sub-toggle.is-open { transform: rotate(180deg); }

	/* Sub-menu */
	.maci-nav-menu ul ul {
		display:        none !important;
		flex-direction: column !important;
		padding:        0 0 8px 0 !important;
		background:     #f8f9fa;
	}
	.maci-nav-menu ul ul.is-open { display: flex !important; }
	.maci-nav-menu ul ul li { border-bottom: 1px solid #eee; }
	.maci-nav-menu ul ul li:last-child { border-bottom: none; }
	.maci-nav-menu ul ul li a {
		display:     block !important;
		padding:     12px 20px 12px 32px !important;
		font-size:   14px !important;
		font-weight: 500 !important;
		color:       var(--color-muted) !important;
	}
	.maci-nav-menu ul ul li a:hover { color: var(--maci-blue) !important; }

	.maci-panel-lang {
		display:     block !important;
		padding:     18px 20px 0;
		flex-shrink: 0;
	}
	.maci-lang-switcher--panel {
		display:         flex;
		align-items:     center;
		justify-content: flex-start;
		min-height:      56px;
		padding:         0 18px;
		border:          1px solid #e8edf3;
		border-radius:   16px;
		background:      #fff;
		font-size:       14px;
		font-weight:     700;
		letter-spacing:  0.06em;
		color:           var(--color-ink);
		box-shadow:      0 10px 24px rgba(15,23,42,0.04);
	}
	.maci-lang-switcher--panel,
	.maci-lang-switcher--panel * {
		border-left:  none !important;
		padding-left: 0 !important;
	}
	.maci-lang-switcher--panel a,
	.maci-lang-switcher--panel span {
		color: inherit;
	}

	/* ── Panel CTA ── */
	.maci-panel-cta-wrap {
		display:  block !important;
		padding:  16px 20px 0;
		flex-shrink: 0;
	}
	.maci-panel-cta {
		display:         flex !important;
		width:           100% !important;
		justify-content: center !important;
		padding:         14px 20px !important;
		font-size:       15px !important;
		font-weight:     700 !important;
		border-radius:   10px !important;
	}

	/* ── Panel social ── */
	.maci-panel-social {
		display:     flex !important;
		align-items: center;
		gap:         20px;
		padding:     14px 20px 24px;
		flex-shrink: 0;
		flex-wrap:   wrap;
	}
	.maci-panel-social a {
		font-size:   14px;
		font-weight: 600;
		color:       var(--color-muted);
		transition:  color 0.2s ease;
	}
	.maci-panel-social a:first-child  { color: #ff0000; }
	.maci-panel-social a:nth-child(2) { color: #c13584; }
	.maci-panel-social a:nth-child(3) { color: #010101; }
	.maci-panel-social a:hover { opacity: 0.75; }

	/* Grid layouts mobile */
	.maci-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.maci-post-grid    { grid-template-columns: 1fr !important; }
	.maci-cert-grid    { grid-template-columns: 1fr !important; }
	.maci-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }

	/* Filter scroll horizontal */
	.maci-region-filter .maci-container {
		overflow-x:    auto;
		flex-wrap:     nowrap !important;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
	}
	.maci-region-filter .maci-container::-webkit-scrollbar { display: none; }
	.maci-region-filter { top: 0 !important; }

	/* Lightbox controls */
	.maci-lb-close,
	#maciCertModalClose { top: 12px !important; right: 12px !important; width: 40px !important; height: 40px !important; font-size: 22px !important; }
	.maci-lb-prev { left: 8px !important; width: 40px !important; height: 40px !important; }
	.maci-lb-next { right: 8px !important; width: 40px !important; height: 40px !important; }

	/* Search */
	.maci-search-form { width: 100%; }
	.maci-brand__name small { display: none; }
}

/* ── Small Mobile: max 480px ── */
@media (max-width: 480px) {
	.maci-gallery-grid      { grid-template-columns: 1fr !important; }
	.maci-cert-card__footer { flex-direction: column; }
	.maci-cert-btn          { width: 100%; justify-content: center; }
	.maci-form-grid         { grid-template-columns: 1fr !important; }
	.maci-single__byline    { gap: 8px; font-size: 12px; flex-wrap: wrap; }
	.maci-footer__tagline   { max-width: 100% !important; }
	.maci-footer__bottom    { font-size: 11px; padding-block: 14px; }
	.maci-post-card__body   { padding: 16px 18px 20px; }
	.maci-pagination .page-numbers { width: 34px; height: 34px; font-size: 13px; }
}

/* ==========================================================================
   16. ARCHIVE HERO SECTION
   Menggantikan inline style="background:linear-gradient(...)..." pada
   <section> di archive-maci_project.php dan archive-maci_certification.php.
   ========================================================================== */
.maci-archive-hero {
	background:    linear-gradient(135deg, rgba(78,154,214,.07), rgba(91,190,159,.05));
	border-bottom: 1px solid rgba(15,23,42,0.06);
	padding-block: 56px 32px;
}
.maci-archive-hero--cert  { padding-block: 56px 36px; }
.maci-archive-hero__title {
	font-size:      clamp(28px, 4vw, 44px);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--color-ink);
	margin:         0 0 12px;
	line-height:    1.15;
}
.maci-archive-hero__desc {
	margin:      0;
	color:       var(--color-muted);
	max-width:   720px;
	line-height: 1.7;
}

/* ==========================================================================
   17. REGION FILTER BAR
   Dipindahkan dari <style> embed di archive-maci_project.php.
   ========================================================================== */
.maci-region-filter {
	background:    #fff;
	border-bottom: 1px solid rgba(15,23,42,0.06);
	padding-block: 16px;
	position:      sticky;
	top:           68px; /* tinggi navbar MACI */
	z-index:       90;
}
.maci-region-filter .maci-container {
	display:     flex;
	gap:         8px;
	flex-wrap:   wrap;
	align-items: center;
}
.maci-filter-btn {
	display:         inline-flex;
	align-items:     center;
	padding:         8px 16px;
	border-radius:   999px;
	font-size:       13px;
	font-weight:     700;
	color:           var(--color-ink);
	background:      rgba(15,23,42,0.05);
	border:          1px solid rgba(15,23,42,0.08);
	text-decoration: none;
	transition:      all 0.2s ease;
	white-space:     nowrap;
}
.maci-filter-btn:hover,
.maci-filter-btn.is-active { background: var(--maci-gradient); color: #fff; border-color: transparent; opacity: 1; }
.maci-filter-btn__count    { font-size: 10px; font-weight: 500; opacity: 0.7; margin-left: 4px; }

/* ==========================================================================
   18. GALLERY GRID & LIGHTBOX
   Dipindahkan dari <style> embed di archive & single project.
   ========================================================================== */
.maci-gallery-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap:                   14px;
}
.maci-g-item {
	display:       block;
	border-radius: 14px;
	overflow:      hidden;
	aspect-ratio:  4/3;
	background:    rgba(15,23,42,0.04);
	cursor:        zoom-in;
	transition:    transform 0.25s ease, box-shadow 0.25s ease;
}
.maci-g-item:hover          { transform: scale(1.02); box-shadow: 0 14px 40px rgba(0,0,0,.14); opacity: 1; }
.maci-g-item img            { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.maci-g-item:hover img      { transform: scale(1.06); }
.maci-gallery-empty         { color: var(--color-muted); grid-column: 1 / -1; }

/* Region section di archive project. */
.maci-project-region        { margin-bottom: 56px; }
.maci-region-title          { font-size: 18px; font-weight: 900; letter-spacing: -0.02em; color: var(--color-ink); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 2px solid rgba(78,154,214,0.18); display: flex; align-items: baseline; gap: 8px; }
.maci-region-title__count   { font-size: 13px; font-weight: 500; color: var(--color-muted); }

/* Lightbox overlay. */
.maci-lightbox {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         9999;
	background:      rgba(0,0,0,0.90);
	align-items:     center;
	justify-content: center;
}
.maci-lightbox.is-open  { display: flex; }
.maci-lb-img {
	max-width:     90vw;
	max-height:    88vh;
	border-radius: 12px;
	object-fit:    contain;
	box-shadow:    0 30px 80px rgba(0,0,0,.60);
}
.maci-lb-close,
.maci-lb-prev,
.maci-lb-next {
	position:      absolute;
	background:    rgba(255,255,255,0.12);
	border:        none;
	color:         #fff;
	border-radius: 50%;
	cursor:        pointer;
	display:       flex;
	align-items:   center;
	justify-content: center;
	transition:    background 0.2s ease;
}
.maci-lb-close:hover,
.maci-lb-prev:hover,
.maci-lb-next:hover  { background: rgba(255,255,255,0.25); }
.maci-lb-close       { top: 20px; right: 24px; width: 44px; height: 44px; font-size: 28px; line-height: 1; }
.maci-lb-prev        { left: 16px; width: 48px; height: 48px; font-size: 32px; }
.maci-lb-next        { right: 16px; width: 48px; height: 48px; font-size: 32px; }

/* ==========================================================================
   19. CERTIFICATION CARD (Archive Grid)
   Dipindahkan dari <style> embed di archive-maci_certification.php.
   ========================================================================== */
.maci-cert-card {
	background:  #fff;
	border-radius: 20px;
	border:      1px solid rgba(15,23,42,0.07);
	box-shadow:  var(--shadow-card);
	overflow:    hidden;
	display:     flex;
	flex-direction: column;
	transition:  transform 0.25s ease, box-shadow 0.25s ease;
}
.maci-cert-card:hover              { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(0,0,0,.10); }
.maci-cert-card__top               { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid rgba(15,23,42,0.06); }
.maci-cert-card__badge             { height: 44px; width: auto; max-width: 120px; object-fit: contain; }
.maci-cert-card__badge-placeholder { width: 44px; height: 44px; border-radius: 12px; background: var(--maci-gradient); color: #fff; font-size: 14px; font-weight: 900; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.maci-cert-card__body              { padding: 18px 22px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.maci-cert-card__title             { font-size: 16px; font-weight: 800; color: var(--color-ink); letter-spacing: -0.02em; line-height: 1.3; margin: 0; }
.maci-cert-card__label             { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 0.10em; color: var(--color-muted); text-transform: uppercase; margin-right: 6px; }
.maci-cert-card__number,
.maci-cert-card__issuer,
.maci-cert-card__dates             { font-size: 13px; color: var(--color-ink); margin: 0; }
.maci-cert-card__scope             { font-size: 13px; color: var(--color-muted); line-height: 1.6; margin: 4px 0 0; }
.maci-cert-card__footer            { padding: 16px 22px; border-top: 1px solid rgba(15,23,42,0.06); display: flex; gap: 10px; flex-wrap: wrap; }

/* Cert buttons (dipakai di archive dan single). */
.maci-cert-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	padding:         9px 16px;
	border-radius:   12px;
	font-size:       12px;
	font-weight:     800;
	letter-spacing:  0.04em;
	cursor:          pointer;
	text-decoration: none;
	transition:      all 0.2s ease;
	white-space:     nowrap;
}
.maci-cert-btn--view              { background: rgba(78,154,214,.10); color: var(--maci-blue); border: 1px solid rgba(78,154,214,.20); }
.maci-cert-btn--view:hover        { background: var(--maci-blue); color: #fff; border-color: transparent; opacity: 1; }
.maci-cert-btn--download          { background: var(--maci-gradient); color: #fff; border: none; box-shadow: 0 6px 18px rgba(78,154,214,.24); }
.maci-cert-btn--download:hover    { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(78,154,214,.34); opacity: 1; color: #fff; }

/* Cert grid. */
.maci-cert-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap:                   24px;
}

/* ==========================================================================
   20. CERT MODAL (Archive + Single Certification)
   Dipindahkan dari <style> embed di kedua template sertifikat.
   Toggle via class .is-open (dikelola cert-modal.js).
   ========================================================================== */
#maciCertModal {
	display:         none;
	position:        fixed;
	inset:           0;
	z-index:         9999;
	background:      rgba(0,0,0,0.88);
	align-items:     center;
	justify-content: center;
	padding:         24px;
}
#maciCertModal.is-open { display: flex; }
#maciCertModalClose {
	position:        absolute;
	top:             20px;
	right:           24px;
	background:      rgba(255,255,255,0.12);
	border:          none;
	color:           #fff;
	font-size:       28px;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	cursor:          pointer;
	display:         flex;
	align-items:     center;
	justify-content: center;
	line-height:     1;
	transition:      background 0.2s ease;
}
#maciCertModalClose:hover { background: rgba(255,255,255,0.25); }
#maciCertModalImg {
	max-width:     90vw;
	max-height:    88vh;
	border-radius: 12px;
	object-fit:    contain;
	box-shadow:    0 30px 80px rgba(0,0,0,.60);
}

/* ==========================================================================
   21. EMPTY STATE
   Menggantikan <p style="text-align:center; padding:80px 0; color:...">
   ========================================================================== */
.maci-empty-state {
	text-align:   center;
	padding:      80px 0;
	color:        var(--color-muted);
	font-size:    15px;
	grid-column:  1 / -1;
}

/* ==========================================================================
   22. SINGLE PROJECT — HERO & LAYOUT
   Menggantikan semua inline style pada section hero di single-maci_project.php.
   ========================================================================== */
.maci-single-hero {
	background:    linear-gradient(135deg, rgba(78,154,214,.08), rgba(91,190,159,.06));
	border-bottom: 1px solid rgba(15,23,42,0.06);
	padding-block: 56px 40px;
}

/* Grid 2 kolom: info kiri + badge status kanan. */
.maci-project-hero-layout {
	display:     grid;
	grid-template-columns: 1fr auto;
	gap:         32px;
	align-items: start;
}
.maci-project-type-chips {
	display:       flex;
	gap:           8px;
	flex-wrap:     wrap;
	margin-bottom: 16px;
}
.maci-single-hero__title {
	font-size:      clamp(26px, 4vw, 44px);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--color-ink);
	margin:         0 0 16px;
	line-height:    1.15;
}
.maci-project-meta {
	display:   flex;
	flex-wrap: wrap;
	gap:       20px;
	font-size: 14px;
	color:     var(--color-muted);
}
.maci-project-meta__item { display: inline-flex; align-items: center; gap: 5px; }
.maci-project-status-wrap { flex-shrink: 0; padding-top: 4px; }

/* Project status badge — nilai warna via modifier class (bukan inline). */
.maci-project-status-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            6px;
	padding:        8px 18px;
	border-radius:  999px;
	font-size:      13px;
	font-weight:    800;
	letter-spacing: 0.06em;
	border:         1px solid transparent;
}
.maci-project-status-badge__dot {
	width:         7px;
	height:        7px;
	border-radius: 50%;
	flex-shrink:   0;
}
/* Status: Selesai */
.maci-project-status-badge--completed {
	background:   rgba(91,190,159,.12);
	color:        #5bbe9f;
	border-color: rgba(91,190,159,.25);
}
.maci-project-status-badge--completed .maci-project-status-badge__dot { background: #5bbe9f; }
/* Status: Dalam Progres */
.maci-project-status-badge--in_progress {
	background:   rgba(245,158,11,.12);
	color:        #f59e0b;
	border-color: rgba(245,158,11,.25);
}
.maci-project-status-badge--in_progress .maci-project-status-badge__dot { background: #f59e0b; }

/* ==========================================================================
   23. SECTION HEADING
   Menggantikan <h2 style="font-size:18px; font-weight:900; ...">
   Dipakai di gallery, deskripsi proyek, dan detail sertifikat.
   ========================================================================== */
.maci-section-heading {
	font-size:      18px;
	font-weight:    900;
	letter-spacing: -0.02em;
	color:          var(--color-ink);
	margin:         0 0 24px;
	padding-bottom: 12px;
	border-bottom:  2px solid rgba(78,154,214,0.18);
}

/* ==========================================================================
   24. POST NAVIGATION (Single Project)
   Menggantikan inline styles pada area navigasi prev/next.
   ========================================================================== */
.maci-post-nav {
	padding-top:   24px;
	border-top:    1px solid rgba(15,23,42,0.08);
	display:       flex;
	justify-content: space-between;
	align-items:   center;
	gap:           16px;
	flex-wrap:     wrap;
}
.maci-post-nav__back {
	display:     inline-flex;
	align-items: center;
	gap:         8px;
	font-weight: 700;
	color:       var(--maci-blue);
	font-size:   14px;
}
.maci-post-nav__back:hover { opacity: 1; color: var(--maci-blue); text-decoration: underline; }
.maci-post-nav__links { display: flex; gap: 12px; flex-wrap: wrap; }
.maci-post-nav__btn {
	padding:       10px 18px;
	border-radius: 12px;
	background:    var(--bg-light);
	font-size:     13px;
	font-weight:   700;
	color:         var(--color-ink);
	max-width:     240px;
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
}
.maci-post-nav__btn:hover { background: rgba(78,154,214,.10); color: var(--maci-blue); opacity: 1; }

/* ==========================================================================
   25. SINGLE CERTIFICATION — HERO LAYOUT
   Menggantikan inline styles pada hero section single-maci_certification.php.
   ========================================================================== */
.maci-cert-hero-layout {
	display:     grid;
	grid-template-columns: auto 1fr;
	gap:         32px;
	align-items: center;
}
.maci-cert-hero__badge-img {
	height:    80px;
	width:     auto;
	max-width: 160px;
	object-fit: contain;
}
.maci-cert-hero__badge-placeholder {
	width:           80px;
	height:          80px;
	border-radius:   20px;
	background:      var(--maci-gradient);
	color:           #fff;
	font-size:       24px;
	font-weight:     900;
	display:         flex;
	align-items:     center;
	justify-content: center;
	flex-shrink:     0;
}
.maci-cert-hero__title {
	font-size:      clamp(22px, 3.5vw, 38px);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--color-ink);
	margin:         10px 0 0;
	line-height:    1.15;
}
.maci-cert-hero__issuer { font-size: 14px; color: var(--color-muted); margin: 8px 0 0; }

/* ==========================================================================
   26. SINGLE CERTIFICATION — DETAIL LAYOUT
   Menggantikan inline styles pada section konten detail sertifikat.
   ========================================================================== */

/* Grid 2 kolom: info kiri + preview kanan. */
.maci-cert-layout {
	display:     grid;
	grid-template-columns: 1fr 1.3fr;
	gap:         48px;
	align-items: start;
}

/* Preview kolom kanan (sticky). */
.maci-cert-preview-sticky { position: sticky; top: 88px; }
.maci-cert-preview-frame {
	border-radius: 20px;
	overflow:      hidden;
	box-shadow:    var(--shadow-md);
	border:        1px solid rgba(15,23,42,.08);
	background:    #f8fafc;
	padding:       24px;
}
.maci-cert-preview-frame img {
	width:         100%;
	height:        auto;
	border-radius: 12px;
	display:       block;
}

/* Definition list info sertifikat. */
.maci-cert-dl                { display: flex; flex-direction: column; gap: 16px; }
.maci-cert-dl__row {
	display:               grid;
	grid-template-columns: 140px 1fr;
	gap:                   12px;
	padding:               14px;
	background:            var(--bg-light);
	border-radius:         12px;
	border:                1px solid rgba(15,23,42,.06);
}
.maci-cert-dl__label {
	font-size:      11px;
	font-weight:    900;
	letter-spacing: 0.08em;
	color:          var(--color-muted);
	text-transform: uppercase;
	align-self:     center;
}
.maci-cert-dl__value { font-size: 14px; font-weight: 600; color: var(--color-ink); margin: 0; }

/* Scope block. */
.maci-cert-scope-block {
	margin-top:    24px;
	padding:       20px;
	background:    var(--bg-light);
	border-radius: 16px;
	border:        1px solid rgba(15,23,42,.06);
}
.maci-cert-scope-block__label {
	font-size:      12px;
	font-weight:    900;
	letter-spacing: 0.08em;
	color:          var(--color-muted);
	text-transform: uppercase;
	margin-bottom:  10px;
}
.maci-cert-scope-block__text { font-size: 14px; color: var(--color-ink); line-height: 1.7; margin: 0; }

/* Aksi tombol. */
.maci-cert-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

/* Back navigation. */
.maci-cert-back-nav { padding-bottom: 60px; }

/* ==========================================================================
   27. RESPONSIVE — TAMBAHAN UNTUK TEMPLATE BARU
   ========================================================================== */
@media (max-width: 980px) {
	/* Project hero: stack layout. */
	.maci-project-hero-layout   { grid-template-columns: 1fr; }
	.maci-project-status-wrap   { padding-top: 0; }
	/* Cert single: stack layout. */
	.maci-cert-layout           { grid-template-columns: 1fr; gap: 32px; }
	.maci-cert-preview-sticky   { position: static; }
	/* Cert hero: stack di tablet kecil. */
	.maci-cert-hero-layout      { gap: 20px; }
}
@media (max-width: 768px) {
	.maci-cert-hero-layout      { grid-template-columns: 1fr; }
	.maci-cert-hero__badge-img,
	.maci-cert-hero__badge-placeholder { display: none; } /* sembunyikan badge di mobile kecil */
	.maci-cert-dl__row          { grid-template-columns: 1fr; gap: 4px; }
}

/* ==========================================================================
   28. PAGE HERO (reused by page.php, singular.php, search.php)
   Bisa digabung pakai class .maci-archive-hero — section ini mendefinisikan
   alias dan elemen turunannya.
   ========================================================================== */
.maci-page-hero { /* alias — sama dengan .maci-archive-hero */ }
.maci-page-hero__breadcrumb {
	display:        flex;
	align-items:    center;
	gap:            6px;
	font-size:      12px;
	font-weight:    600;
	letter-spacing: 0.04em;
	color:          var(--color-muted);
	margin-bottom:  14px;
}
.maci-page-hero__breadcrumb a { color: var(--color-muted); transition: color 0.2s ease; }
.maci-page-hero__breadcrumb a:hover { color: var(--color-ink); opacity: 1; }
.maci-page-hero__sep { opacity: 0.4; margin-inline: 4px; }
.maci-page-hero__title {
	font-size:      clamp(26px, 4vw, 44px);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--color-ink);
	margin:         0;
	line-height:    1.15;
}

/* Featured image dibawah hero untuk page/singular. */
.maci-page-featured {
	max-width:    var(--container-max);
	margin:       40px auto 0;
	padding-inline: 24px;
}
.maci-page-featured figure {
	border-radius: 20px;
	overflow:      hidden;
	aspect-ratio:  16/6;
	margin:        0;
}
.maci-page-featured figure img { width: 100%; height: 100%; object-fit: cover; }

/* Content wrapper lebar tetap. */
.maci-content-wrap        { max-width: 800px; }
.maci-content-wrap--wide  { max-width: 960px; }
.maci-content-wrap--full  { max-width: 100%; }

/* ==========================================================================
   29. SINGLE POST — FOOTER (tags + navigasi prev/next)
   Menggantikan inline style di single.php.
   ========================================================================== */
.maci-single__footer {
	margin-top:  48px;
	padding-top: 24px;
	border-top:  1px solid rgba(15,23,42,0.08);
}
.maci-single__tags {
	display:    flex;
	gap:        8px;
	flex-wrap:  wrap;
	margin-bottom: 24px;
}
.maci-single__nav {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   16px;
}
.maci-single__nav-item {
	padding:       16px;
	border-radius: 14px;
	background:    var(--bg-light);
	border:        1px solid rgba(15,23,42,0.06);
	display:       flex;
	flex-direction: column;
	gap:           6px;
	text-decoration: none;
	transition:    background 0.2s ease;
}
.maci-single__nav-item:hover { background: #edf3fb; opacity: 1; }
.maci-single__nav-item--next { text-align: right; }
.maci-single__nav-label {
	display:        block;
	color:          var(--color-muted);
	font-size:      11px;
	font-weight:    700;
	letter-spacing: 0.08em;
}
.maci-single__nav-title {
	display:     block;
	font-weight: 700;
	color:       var(--color-ink);
	font-size:   14px;
	line-height: 1.4;
	margin:      0;
}

/* Link */
.maci-single__byline span a{
  font-weight:600;
  color:#2980b9;
  
}


/* ==========================================================================
   30. ARCHIVE / INDEX — EMPTY STATE
   ========================================================================== */
.maci-archive-header--left { text-align: left; padding-top: 0; }
.maci-archive-empty {
	text-align:  center;
	padding:     80px 0;
	color:       var(--color-muted);
}
.maci-archive-empty p { font-size: 18px; }

/* ==========================================================================
   31. 404 PAGE
   ========================================================================== */
.maci-404 {
	min-height:      70vh;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         80px 24px;
	text-align:      center;
	background:      linear-gradient(135deg, rgba(78,154,214,.05), rgba(91,190,159,.04));
}
.maci-404__inner   { max-width: 560px; }
.maci-404__number {
	font-size:         clamp(100px, 18vw, 160px);
	font-weight:       900;
	letter-spacing:    -0.06em;
	line-height:       1;
	background:        var(--maci-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip:   text;
	margin-bottom:     24px;
	user-select:       none;
}
.maci-404__title {
	font-size:      clamp(22px, 3vw, 32px);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--color-ink);
	margin-bottom:  14px;
}
.maci-404__text {
	font-size:    15px;
	color:        var(--color-muted);
	line-height:  1.7;
	margin-bottom: 36px;
}
.maci-404__search  { margin-bottom: 28px; }
.maci-404__actions { display: flex; justify-content: center; }

/* ==========================================================================
   32. SEARCH PAGE
   ========================================================================== */
.maci-search-keyword { color: var(--maci-blue); }
.maci-search-count   { color: var(--color-muted); font-size: 14px; margin: 0 0 28px; }
.maci-search-refine  { max-width: 520px; }
.maci-no-results {
	text-align:  center;
	padding:     80px 0;
}
.maci-no-results__icon {
	font-size:     64px;
	margin-bottom: 20px;
	opacity:       0.3;
	line-height:   1;
}
.maci-no-results__title {
	font-size:      22px;
	font-weight:    800;
	color:          var(--color-ink);
	margin-bottom:  12px;
}
.maci-no-results__text {
	color:         var(--color-muted);
	margin-bottom: 32px;
	max-width:     400px;
	margin-inline: auto;
}
.maci-no-results__actions { display: flex; justify-content: center; }

/* ==========================================================================
   33. SEARCH FORM (searchform.php)
   Menggantikan semua inline style di form pencarian.
   ========================================================================== */
.maci-search-form {
	display: flex;
	gap:     0;
	width:   100%;
}
.maci-search-form__input {
	flex:          1;
	padding:       12px 16px;
	border:        1px solid rgba(15,23,42,0.14);
	border-right:  none;
	border-radius: 14px 0 0 14px;
	font-size:     14px;
	color:         var(--color-ink);
	background:    #fff;
	outline:       none;
	font-family:   inherit;
	transition:    border-color 0.2s ease;
}
.maci-search-form__input:focus-visible {
	border-color: var(--maci-blue);
	outline:      none;
}
.maci-search-form__btn {
	padding:       12px 20px;
	background:    var(--maci-gradient);
	color:         #fff;
	border:        none;
	border-radius: 0 14px 14px 0;
	font-size:     14px;
	font-weight:   800;
	cursor:        pointer;
	white-space:   nowrap;
	transition:    opacity 0.2s ease;
}
.maci-search-form__btn:hover { opacity: 0.88; }

/* ==========================================================================
   34. FOOTER UTILITIES
   ========================================================================== */

/* Ghost CTA button — dipakai di footer di atas latar gradient. */
.maci-btn-cta--ghost {
	margin-top:  20px;
	background:  rgba(255,255,255,0.20);
	box-shadow:  none;
	border:      1px solid rgba(255,255,255,0.30);
}
.maci-btn-cta--ghost:hover {
	background: rgba(255,255,255,0.30);
	box-shadow: none;
}

/* Link di dalam alamat footer. */
.maci-footer__address a { color: inherit; transition: opacity 0.2s ease; }
.maci-footer__address a:hover { opacity: 0.75; }

/* ==========================================================================
   35. HEADER UTILITIES
   ========================================================================== */

/* Fallback language switcher (ID | EN teks). */
.maci-lang-fallback       { display: inline-flex; align-items: center; gap: 4px; }
.maci-lang-fallback__muted { opacity: 0.5; font-weight: 400; }

/* ==========================================================================
   36. WIDE PAGE TEMPLATE (templates/page-wide.php)
   ========================================================================== */
.maci-wide-wrap {
	max-width:    1440px;
	margin-inline: auto;
	padding-inline: 32px;
}
.maci-wide-hero {
	background:    linear-gradient(135deg, rgba(78,154,214,.06), rgba(91,190,159,.04));
	border-bottom: 1px solid rgba(15,23,42,0.06);
	padding-block: 56px 32px;
}
.maci-wide-content {
	max-width:    1440px;
	margin-inline: auto;
	padding:       56px 32px;
}

/* ==========================================================================
   37. RESPONSIVE — TAMBAHAN §28–§36
   ========================================================================== */
@media (max-width: 768px) {
	.maci-single__nav { grid-template-columns: 1fr; }
	.maci-wide-wrap,
	.maci-wide-content { padding-inline: 20px; }
	.maci-single__content { font-size: 0.9375rem; } /* 15px mobile */
}
@media (max-width: 480px) {
	.maci-page-featured figure { aspect-ratio: 4/3; }
	.maci-404__number           { font-size: clamp(80px, 22vw, 120px); }
}

/* ── Print ── */
@media print {
	.maci-topbar,
	.maci-header,
	.maci-footer,
	.maci-hamburger,
	.maci-btn-cta,
	.maci-cert-card__footer,
	.maci-pagination,
	#maciCertModal,
	#maci-lightbox { display: none !important; }
	body { color: #000; }
}


/* ── Verified Badge ──────────────────────────────────────────────────────── */
.maci-single__author-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.maci-verified-badge {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.maci-verified-badge svg {
    display: block;
    /* Agar badge turun sedikit sejajar baseline huruf */
    transform: translateY(1px);
}



/* ── footer ─────── */

/* Separator */
.rank-math-breadcrumb p .separator{
	color:#2c3e50;
}

/* ==========================================================
   Menyembunyikan Breadcrumb di Versi Mobile (Maks 768px)
   ========================================================== */
@media (max-width: 768px) {
    .rank-math-breadcrumb {
        display: none !important;
    }
}

/* ==========================================================================
   38. ELEMENTOR SHORTS WIDGET
   ========================================================================== */
.maci-short-empty {
	color:      var(--color-muted);
	text-align: center;
	padding:    40px 0;
}
.maci-shorts-header {
	text-align:    center;
	margin-bottom: 32px;
}
.maci-shorts-title {
	font-size:      clamp(24px, 3.5vw, 36px);
	font-weight:    900;
	letter-spacing: -0.03em;
	color:          var(--color-ink);
	margin:         0 0 8px;
}
.maci-shorts-subtitle {
	font-size: 15px;
	color:     var(--color-muted);
	margin:    0;
}
.maci-shorts-shell {
	position: relative;
}
.maci-shorts-track {
	display:                   flex;
	gap:                       16px;
	overflow-x:                auto;
	scroll-snap-type:          x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:           none;
	padding-block:             8px;
}
.maci-shorts-track::-webkit-scrollbar {
	display: none;
}
.maci-short-card {
	position:          relative;
	flex:              0 0 248px;
	height:            440px;
	border-radius:     20px;
	overflow:          hidden;
	cursor:            pointer;
	scroll-snap-align: start;
	background:        #0f172a;
}
.maci-short-media {
	width:  100%;
	height: 100%;
}
.maci-short-thumb {
	width:      100%;
	height:     100%;
	object-fit: cover;
}
.maci-short-player,
.maci-short-gradient,
.maci-short-overlay {
	position: absolute;
	inset:    0;
}
.maci-short-gradient {
	background:     linear-gradient(to top, rgba(0,0,0,0.60) 0%, transparent 55%);
	pointer-events: none;
}
.maci-short-overlay {
	display:         flex;
	align-items:     center;
	justify-content: center;
	transition:      opacity 0.3s ease;
}
.maci-short-play {
	width:           52px;
	height:          52px;
	border-radius:   50%;
	background:      rgba(255,255,255,0.92);
	display:         flex;
	align-items:     center;
	justify-content: center;
	box-shadow:      0 8px 24px rgba(0,0,0,0.30);
}
.maci-short-title {
	position:    absolute;
	bottom:      14px;
	left:        14px;
	right:       14px;
	color:       #fff;
	font-size:   13px;
	font-weight: 700;
	line-height: 1.35;
	margin:      0;
	text-shadow: 0 1px 4px rgba(0,0,0,0.60);
}