/* ==========================================================================
   NUZANTHRAPRESS — Main Stylesheet v2.0.0 "Élite Sage"
   Design tokens (Sage Green) · Light + Dark · 8pt grid · Fluid clamp()
   Container queries · WCAG 2.2 AA · Modular components
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — Primitives (Sage Green palette)
   ========================================================================== */

:root {
	/* Sage scale */
	--sage-900: #2f3a33;
	--sage-800: #38473e;
	--sage-700: #4a5d52;
	--sage-600: #5e7468;
	--sage-500: #8a9a82;
	--sage-400: #a3b18a;
	--sage-300: #c2cdb4;
	--sage-200: #d8dfcc;
	--sage-100: #eaefe2;
	--sage-50:  #f2f5ec;

	/* Neutrals (warm) */
	--ivory: #faf9f5;
	--warm-white: #ffffff;
	--charcoal: #262b27;
	--stone: #6b7269;
	--hairline: #e4e6dd;

	/* Accents */
	--terracotta: #c08457;
	--terracotta-dark: #a96e45;
	--brass: #bfa06a;

	/* Semantic status */
	--success: #3e7c5a;
	--warning: #c9933b;
	--error: #b4544a;

	/* Spacing — 8pt grid (step 4px untuk detail) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 16px;
	--space-4: 24px;
	--space-5: 32px;
	--space-6: 48px;
	--space-7: 64px;
	--space-8: 96px;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;

	/* Shadow (warm-tinted) */
	--shadow-sm: 0 2px 8px rgba(47, 58, 51, 0.08);
	--shadow-md: 0 8px 24px rgba(47, 58, 51, 0.10);
	--shadow-lg: 0 16px 40px rgba(47, 58, 51, 0.14);

	/* ----- Semantic tokens (defaults; Customizer dapat meng-override) ----- */
	--color-bg: var(--ivory);
	--color-bg-alt: var(--sage-50);
	--color-surface: var(--warm-white);
	--color-text: var(--charcoal);
	--color-heading: var(--sage-900);
	--color-muted: var(--stone);
	--color-link: var(--sage-700);
	--color-link-hover: var(--terracotta);
	--color-accent: var(--terracotta);
	--color-accent-text: #8F4F2E;
	--color-accent-hover: var(--terracotta-dark);
	--color-accent-2: var(--brass);
	--color-accent-soft: rgba(192, 132, 87, 0.18);
	--color-on-accent: #ffffff;
	--color-border: var(--hairline);
	--color-header-bg: var(--ivory);
	--color-header-text: var(--charcoal);
	--color-header-blur: rgba(250, 249, 245, 0.85);
	--color-footer-bg: var(--sage-900);
	--color-footer-text: var(--sage-200);

	/* Layout */
	--container-width: 1280px;
	--sidebar-width: 320px;
	--gutter: 24px;
	--archive-gap: 32px;
	--hero-height: 520px;
	--header-height: 80px;
}

/* ==========================================================================
   2. DARK MODE — token swap
   ========================================================================== */

:root[data-theme="dark"] {
	--color-bg: #1c211e;
	--color-bg-alt: #262b27;
	--color-surface: #2e342f;
	--color-text: #e8ebe2;
	--color-heading: #f2f5ec;
	--color-muted: #a3b18a;
	--color-link: #a3b18a;
	--color-link-hover: #d9b48c;
	--color-accent: #c8895c;
	--color-accent-text: #E0A276;
	--color-accent-hover: #d49a6e;
	--color-accent-2: #cbac76;
	--color-accent-soft: rgba(200, 137, 92, 0.22);
	--color-on-accent: #1c211e;
	--color-border: rgba(255, 255, 255, 0.10);
	--color-header-bg: #1c211e;
	--color-header-text: #e8ebe2;
	--color-header-blur: rgba(28, 33, 30, 0.82);
	--color-footer-bg: #161a17;
	--color-footer-text: #c2cdb4;
	--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.55);
}

/* Auto dark mode (jika user TIDAK memaksa light) */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]):not([data-theme="dark"]) {
		--color-bg: #1c211e;
		--color-bg-alt: #262b27;
		--color-surface: #2e342f;
		--color-text: #e8ebe2;
		--color-heading: #f2f5ec;
		--color-muted: #a3b18a;
		--color-link: #a3b18a;
		--color-link-hover: #d9b48c;
		--color-accent: #c8895c;
		--color-accent-hover: #d49a6e;
		--color-accent-2: #cbac76;
		--color-accent-soft: rgba(200, 137, 92, 0.22);
		--color-on-accent: #1c211e;
		--color-border: rgba(255, 255, 255, 0.10);
		--color-header-bg: #1c211e;
		--color-header-text: #e8ebe2;
		--color-header-blur: rgba(28, 33, 30, 0.82);
		--color-footer-bg: #161a17;
		--color-footer-text: #c2cdb4;
	}
}

/* ==========================================================================
   3. Layout Container
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-width, 1280px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--gutter, 24px);
	padding-right: var(--gutter, 24px);
}

/* ==========================================================================
   4. Site Header — 72-96px desktop, 56-64px mobile
   ========================================================================== */

.site-header {
	color: var(--color-header-text);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--color-header-blur);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
	.site-header { background: var(--color-header-bg); }
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	min-height: 72px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.custom-logo-link { display: block; line-height: 0; }
.custom-logo { max-height: 44px; width: auto; height: auto; }

.site-title {
	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}

.site-title a { color: var(--color-header-text); text-decoration: none; }
.site-title a:hover { color: var(--color-accent); }

.site-description {
	font-size: 0.8rem;
	color: var(--color-muted);
	margin: 4px 0 0;
}

/* Header actions wrapper (nav + toggle) */
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Primary Navigation */

.main-navigation { display: flex; align-items: center; }

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 4px;
}

.main-navigation li { margin: 0; position: relative; }

.main-navigation a {
	display: block;
	padding: 8px 16px;
	color: var(--color-header-text);
	text-decoration: none;
	font-size: clamp(0.9rem, 1vw, 0.975rem);
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: background 0.2s ease, color 0.2s ease;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	background: var(--color-bg-alt);
	color: var(--color-accent);
}

/* Sub-menus */

.main-navigation .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: var(--color-surface);
	min-width: 220px;
	box-shadow: var(--shadow-md);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 8px;
	flex-direction: column;
	z-index: 200;
}

.main-navigation li:hover > .sub-menu,
.main-navigation li:focus-within > .sub-menu { display: flex; }

.main-navigation .sub-menu a { padding: 8px 12px; border-radius: var(--radius-sm); }

/* Mobile Menu Toggle + Theme Toggle */

.menu-toggle,
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid transparent;
	color: var(--color-header-text);
	cursor: pointer;
	padding: 8px;
	line-height: 1;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--radius-sm);
	transition: background 0.2s ease;
}

.theme-toggle:hover { background: var(--color-bg-alt); }

.menu-toggle { display: none; font-size: 1.5rem; }

.menu-toggle:focus-visible,
.theme-toggle:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* Theme toggle icon swap */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
	:root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

/* ==========================================================================
   5. Content Area — Grid sidebar + body
   ========================================================================== */

.content-area {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding: var(--space-6) 0;
}

.content-area.has-sidebar { grid-template-columns: 1fr; }
.content-primary { min-width: 0; }

/* ==========================================================================
   6. Sidebar
   ========================================================================== */

.site-sidebar { font-size: 0.9rem; }

.site-sidebar .widget,
.widget {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.widget:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

.widget-title {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: 12px;
	color: var(--color-heading);
}

.widget ul, .widget ol { list-style: none; padding: 0; margin: 0; }
.widget li { margin-bottom: 8px; }
.widget li a { color: var(--color-text); }
.widget li a:hover { color: var(--color-link); }

.widget_search .search-form { display: flex; }
.widget_search .search-field { flex: 1; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.widget_search .search-submit { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 10px 16px; }

/* ==========================================================================
   7. Page Header
   ========================================================================== */

.page-header { margin-bottom: var(--space-5); }
.page-title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 4px; }
.archive-description { font-size: 0.95rem; color: var(--color-muted); margin-bottom: 0; }
.archive-description p { margin-bottom: 0; }

/* ==========================================================================
   8. Posts Grid — Archive / Blog (container-query aware)
   ========================================================================== */

.posts-grid { display: grid; gap: var(--archive-gap, 32px); }
.posts-grid--list { grid-template-columns: 1fr; }
.archive-layout-grid-2 .posts-grid--list { grid-template-columns: repeat(2, 1fr); }
.archive-layout-grid-3 .posts-grid--list { grid-template-columns: repeat(3, 1fr); }

/* Wrapper jadi container untuk container-query */
.content-primary { container-type: inline-size; container-name: content; }

.post-card {
	border-bottom: 1px solid var(--color-border);
	padding-bottom: var(--space-4);
}

.archive-layout-grid-2 .post-card,
.archive-layout-grid-3 .post-card {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 0;
	overflow: hidden;
	background: var(--color-surface);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.archive-layout-grid-2 .post-card:hover,
.archive-layout-grid-3 .post-card:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

.archive-layout-grid-2 .post-card .post-card-body,
.archive-layout-grid-3 .post-card .post-card-body { padding: var(--space-4); }

/* Post Thumbnail */
.post-thumbnail { display: block; margin-bottom: var(--space-3); border-radius: var(--radius-md); overflow: hidden; }
.archive-layout-grid-2 .post-thumbnail,
.archive-layout-grid-3 .post-thumbnail { margin-bottom: 0; border-radius: 0; aspect-ratio: 16 / 10; }
.archive-layout-grid-2 .post-thumbnail img,
.archive-layout-grid-3 .post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.post-thumbnail img { width: 100%; height: auto; display: block; transition: transform 0.3s ease; }
.post-thumbnail:hover img { transform: scale(1.03); }

/* Entry Title */
.entry-title { font-size: clamp(1.1rem, 2vw, 1.35rem); margin-bottom: 8px; }
.entry-title a { color: var(--color-heading); text-decoration: none; }
.entry-title a:hover { color: var(--color-link); }
.archive-layout-grid-2 .entry-title,
.archive-layout-grid-3 .entry-title { font-size: 1.15rem; }

/* Entry Meta */
.entry-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-size: 0.8rem; color: var(--color-muted); margin-bottom: 12px; }
.entry-meta a { color: var(--color-muted); }
.entry-meta a:hover { color: var(--color-link); }

.cat-links a {
	display: inline-block;
	padding: 4px 10px;
	background: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-link);
}

.cat-links a:hover { background: var(--color-accent); color: #fff; text-decoration: none; }

/* Entry Summary */
.entry-summary { font-size: 0.95rem; color: var(--color-text); }
.entry-summary p:last-child { margin-bottom: 0; }
.read-more { display: inline-block; margin-top: 8px; font-size: 0.85rem; font-weight: 600; }

/* Container query: kartu post otomatis stack saat kontainer sempit */
@container content (max-width: 520px) {
	.archive-layout-grid-2 .posts-grid--list,
	.archive-layout-grid-3 .posts-grid--list { grid-template-columns: 1fr; }
}

/* ==========================================================================
   9. Single Post — optimal reading width 60-75ch
   ========================================================================== */

.single .post-thumbnail { margin-bottom: var(--space-4); }
.single .post-thumbnail img { border-radius: var(--radius-md); width: 100%; display: block; }
.single .entry-title { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 12px; }
.single .entry-content { font-size: var(--font-size-body, 1.0625rem); max-width: 72ch; }
.single .entry-content > *:first-child { margin-top: 0; }

.entry-footer {
	margin-top: var(--space-5);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-size: 0.85rem;
	color: var(--color-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   10. Author Box
   ========================================================================== */

.author-box {
	display: flex;
	gap: 20px;
	padding: var(--space-4);
	margin: var(--space-5) 0;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
}

.author-avatar { flex-shrink: 0; }
.author-avatar img { border-radius: 50%; width: 80px; height: 80px; }
.author-name { font-size: 1.05rem; margin-bottom: 4px; }
.author-name a { color: var(--color-heading); }
.author-description { font-size: 0.9rem; color: var(--color-text); margin-bottom: 0; }

/* ==========================================================================
   11. Related Posts
   ========================================================================== */

.related-posts { margin: var(--space-6) 0; }

.related-posts-title {
	font-size: 1.25rem;
	margin-bottom: 20px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--color-accent);
	display: inline-block;
}

.related-posts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }

.related-post-item {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.related-post-item:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.related-post-thumbnail { display: block; aspect-ratio: 16 / 10; }
.related-post-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.related-post-title { font-size: 0.95rem; padding: 12px 16px 0; margin-bottom: 4px; }
.related-post-title a { color: var(--color-heading); text-decoration: none; }
.related-post-title a:hover { color: var(--color-link); }
.related-post-date { display: block; padding: 0 16px 12px; font-size: 0.72rem; color: var(--color-muted); }

/* ==========================================================================
   12. Breadcrumbs
   ========================================================================== */

.breadcrumbs { margin-bottom: var(--space-4); font-size: 0.8rem; color: var(--color-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; gap: 4px; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 4px; color: var(--color-border); }
.breadcrumbs a { color: var(--color-muted); }
.breadcrumbs .current { color: var(--color-text); font-weight: 600; }

/* ==========================================================================
   13. Pagination
   ========================================================================== */

.pagination { margin-top: var(--space-6); }
.pagination .nav-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size: 0.9rem;
	color: var(--color-text);
	text-decoration: none;
	transition: all 0.2s ease;
}

.pagination .page-numbers.current { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); font-weight: 600; }
.pagination .page-numbers:hover:not(.current) { background: var(--color-bg-alt); border-color: var(--color-link); color: var(--color-link); }
.pagination .page-numbers.dots { border: none; min-width: auto; padding: 0; }
.pagination .page-numbers.dots:hover { background: none; }

/* ==========================================================================
   14. Comments
   ========================================================================== */

.comments-area { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 2px solid var(--color-border); }
.comments-title { font-size: 1.25rem; margin-bottom: var(--space-4); }
.comment-list { list-style: none; padding: 0; margin: 0; }
.comment-list .children { list-style: none; margin-left: var(--space-5); border-left: 2px solid var(--color-border); padding-left: var(--space-4); }
.comment-body { padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.comment-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.comment-author img { border-radius: 50%; }
.comment-author .fn { font-weight: 600; font-size: 0.95rem; font-style: normal; }
.comment-author .fn a { color: var(--color-heading); }
.comment-metadata { font-size: 0.72rem; color: var(--color-muted); }
.comment-metadata a { color: var(--color-muted); }
.comment-content { font-size: 0.95rem; margin-bottom: 8px; }
.comment-content p:last-child { margin-bottom: 0; }
.reply { font-size: 0.8rem; }
.comment-reply-link { font-weight: 600; }
.comment-respond { margin-top: var(--space-5); }
.comment-reply-title { font-size: 1.1rem; margin-bottom: var(--space-3); }
.comment-form p { margin-bottom: var(--space-3); }
.comment-form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--color-text); }
.comment-form .required { color: var(--error); }
.comment-form-cookies-consent { display: flex; align-items: baseline; gap: 8px; }
.comment-form-cookies-consent input { width: auto; min-height: 0; }
.comment-form-cookies-consent label { display: inline; font-weight: 400; }

/* ==========================================================================
   15. Search Form
   ========================================================================== */

.search-form { display: flex; max-width: 400px; }
.search-form label { flex: 1; }

/* ==========================================================================
   16. 404 Page
   ========================================================================== */

.error-404 { text-align: center; padding: var(--space-8) 0; }
.error-404 .page-title { font-size: clamp(4rem, 10vw, 8rem); font-weight: 800; color: var(--color-accent); line-height: 1; margin-bottom: 8px; }
.error-404 .page-content p { font-size: 1.1rem; color: var(--color-muted); margin-bottom: var(--space-4); }
.error-404 .search-form { margin: 0 auto var(--space-4); }

/* ==========================================================================
   17. Site Footer — sage-900, 3-4 kolom
   ========================================================================== */

.site-footer {
	background: var(--color-footer-bg);
	color: var(--color-footer-text);
	padding: var(--space-7) 0 var(--space-5);
	margin-top: var(--space-7);
	font-size: 0.9rem;
}

.footer-widgets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-bottom: var(--space-6); }
.footer-widget { font-size: 0.85rem; }
.footer-widget-title { font-size: 1rem; color: #fff; margin-bottom: var(--space-3); }
.footer-widget ul { list-style: none; padding: 0; margin: 0; }
.footer-widget li { margin-bottom: 6px; }
.footer-widget a { color: var(--color-footer-text); }
.footer-widget a:hover { color: var(--color-accent-2); }

.footer-bottom { text-align: center; padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.8rem; }
.footer-bottom a { color: var(--color-footer-text); font-weight: 600; }
.footer-bottom a:hover { color: var(--color-accent-2); }
.footer-navigation ul { display: flex; justify-content: center; flex-wrap: wrap; gap: 16px; list-style: none; padding: 0; margin: 0 0 12px; }
.footer-navigation a { color: var(--color-footer-text); font-size: 0.8rem; }

/* ==========================================================================
   18. Hero Bento Grid — Static, No CLS
   ========================================================================== */

.hero-bento {
	min-height: var(--hero-height, 520px);
	background-color: var(--hero-bg, var(--sage-50));
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero-bento::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(47,58,51,0.15), rgba(47,58,51,0.45));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.hero-bento[style*="background-image"]::before { opacity: 1; }

.hero-bento__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	padding-top: var(--space-5);
	padding-bottom: var(--space-5);
	width: 100%;
}

.hero-bento__main {
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	padding: 40px 32px;
	display: flex;
	align-items: center;
	min-height: 240px;
}

.hero-bento__main-inner { width: 100%; max-width: 640px; }

.hero-bento__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 16px;
	color: var(--color-heading);
	letter-spacing: -0.02em;
}

.hero-bento__subtitle { font-size: clamp(1rem, 1.8vw, 1.2rem); color: var(--color-muted); max-width: 560px; margin-bottom: var(--space-4); line-height: 1.6; }

.hero-bento__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 32px;
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-weight: 600;
	font-size: 1rem;
	border-radius: var(--radius-md);
	text-decoration: none;
	min-height: 48px;
	transition: background 0.2s ease, transform 0.2s ease;
}

.hero-bento__cta:hover { background: var(--color-accent-hover); transform: translateY(-2px); color: var(--color-on-accent); text-decoration: none; }
.hero-bento__cta::after { content: "\2192"; font-size: 1.1rem; }

.hero-bento__card {
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
	min-height: 140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}

.hero-bento__card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; justify-content: center; }
.hero-bento__card-link:hover .hero-bento__card-title { color: var(--color-link); }
.hero-bento__card-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-accent); margin-bottom: 8px; }
.hero-bento__card-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; line-height: 1.3; color: var(--color-heading); transition: color 0.2s ease; }
.hero-bento__card-meta { font-size: 0.75rem; color: var(--color-muted); }
.hero-bento__cat-list { list-style: none; padding: 0; margin: 0; }
.hero-bento__cat-list li { margin-bottom: 4px; }
.hero-bento__cat-list a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: var(--color-text); font-size: 0.9rem; font-weight: 500; padding: 6px 0; }
.hero-bento__cat-list a:hover { color: var(--color-link); }
.hero-bento__cat-count { font-size: 0.7rem; color: var(--color-muted); background: var(--color-bg-alt); padding: 2px 8px; border-radius: var(--radius-full); }
.hero-bento__quick-links { display: flex; flex-direction: column; gap: 8px; }
.hero-bento__quick-links a { font-size: 0.9rem; font-weight: 500; text-decoration: none; color: var(--color-text); padding: 6px 0; display: flex; align-items: center; gap: 8px; transition: color 0.2s ease; }
.hero-bento__quick-links a::before { content: "\203a"; font-size: 1.3rem; font-weight: 700; color: var(--color-accent); }
.hero-bento__quick-links a:hover { color: var(--color-link); }

/* ==========================================================================
   19. Back to Top Button
   ========================================================================== */

.back-to-top {
	position: fixed;
	bottom: 32px;
	right: 32px;
	z-index: 998;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-md);
	background: var(--color-accent);
	color: var(--color-on-accent);
	font-size: 1.25rem;
	border: none;
	cursor: pointer;
	opacity: 0;
	transform: translateY(12px);
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
	box-shadow: var(--shadow-md);
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-accent-hover); transform: translateY(-2px); }
.back-to-top:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ==========================================================================
   20. Block Patterns helpers (modular sections)
   ========================================================================== */

.np-section { padding: var(--space-7) 0; }
.np-faq__item { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--color-surface); }
.np-faq__item summary { font-weight: 700; cursor: pointer; color: var(--color-heading); }
.np-faq__item[open] summary { margin-bottom: var(--space-2); }

/* ==========================================================================
   21. Responsive — Desktop >=1024px
   ========================================================================== */

@media (min-width: 1024px) {
	.content-area.has-sidebar { grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 320px); }
	.sidebar-left .content-area.has-sidebar { grid-template-columns: var(--sidebar-width, 320px) minmax(0, 1fr); }
	.sidebar-left .content-area.has-sidebar .content-primary { order: 2; }
	.sidebar-left .content-area.has-sidebar .site-sidebar { order: 1; }

	.site-sidebar { position: sticky; top: calc(var(--header-height, 80px) + var(--space-3)); align-self: start; }

	.container { padding-left: 40px; padding-right: 40px; }
	.site-header .container { min-height: 80px; }

	.hero-bento__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 20px; }
	.hero-bento__main { grid-column: 1; grid-row: 1 / 3; }
	.hero-bento__card--1 { grid-column: 2; grid-row: 1; }
	.hero-bento__card--2 { grid-column: 2; grid-row: 2; }
	.hero-bento__card--3 { grid-column: 1 / 3; grid-row: 3; min-height: 80px; }
}

/* ==========================================================================
   22. Responsive — Tablet 768-1023px
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
	.content-area.has-sidebar { grid-template-columns: minmax(0, 1fr) 260px; }
	.sidebar-left .content-area.has-sidebar { grid-template-columns: 260px minmax(0, 1fr); }
	.sidebar-left .content-area.has-sidebar .content-primary { order: 2; }
	.sidebar-left .content-area.has-sidebar .site-sidebar { order: 1; }
	.container { padding-left: 24px; padding-right: 24px; }
	.archive-layout-grid-3 .posts-grid--list { grid-template-columns: repeat(2, 1fr); }
	.hero-bento__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
	.hero-bento__main { grid-column: 1 / 3; grid-row: 1; }
	.hero-bento__card--1 { grid-column: 1; grid-row: 2; }
	.hero-bento__card--2 { grid-column: 2; grid-row: 2; }
	.hero-bento__card--3 { grid-column: 1 / 3; grid-row: 3; }
}

/* ==========================================================================
   23. Responsive — Mobile <768px
   ========================================================================== */

@media (max-width: 767px) {
	.container { padding-left: 16px; padding-right: 16px; }
	.site-header .container { min-height: 56px; }
	.hero-bento { min-height: 420px; }
	.hero-bento__main { min-height: 180px; padding: 24px 20px; }

	.menu-toggle { display: inline-flex; }

	.main-navigation { width: 100%; order: 3; }
	.main-navigation ul { display: none; flex-direction: column; width: 100%; padding: 8px 0; gap: 2px; }
	.main-navigation.is-active > ul,
	.main-navigation ul.is-active { display: flex; }
	.main-navigation .sub-menu { position: static; box-shadow: none; border: none; padding-left: 16px; background: transparent; border-radius: 0; }
	.main-navigation a { padding: 12px 0; min-height: 48px; display: flex; align-items: center; }

	.single .entry-title { font-size: 1.5rem; }
	.single .entry-content { max-width: none; }
	.author-box { flex-direction: column; text-align: center; align-items: center; }
	.related-posts-grid { grid-template-columns: repeat(2, 1fr); }
	.archive-layout-grid-2 .posts-grid--list,
	.archive-layout-grid-3 .posts-grid--list { grid-template-columns: 1fr; }
	.footer-widgets { grid-template-columns: 1fr; gap: var(--space-4); }
	.content-area { padding: var(--space-5) 0; gap: var(--space-4); }
}

/* ==========================================================================
   24. Responsive — Small Mobile <480px
   ========================================================================== */

@media (max-width: 479px) {
	.related-posts-grid { grid-template-columns: 1fr; }
	.single .entry-title { font-size: 1.3rem; }
	.entry-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
	.comment-list .children { margin-left: 16px; padding-left: 16px; }
	.back-to-top { bottom: 20px; right: 20px; }
}


/* =========================================================================
   v2.1.0 ENHANCEMENTS
   ====================================================================== */

/* ----- Table of Contents ----- */
.toc {
	margin: 0 0 var(--space-5, 32px);
	padding: var(--space-3, 16px) var(--space-4, 24px);
	background: var(--color-bg-alt, #f2f5ec);
	border: 1px solid var(--color-border, #e4e6dd);
	border-radius: 12px;
}
.toc-title { font-weight: 600; cursor: pointer; color: var(--color-heading, #2f3a33); }
.toc-list { margin: var(--space-2, 12px) 0 0; padding-left: 1.25em; }
.toc-list li { margin: 0.25em 0; }
.toc-list .toc-level-3 { margin-left: 1em; font-size: 0.95em; }
.toc-list a { text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }

/* ----- Reading progress bar ----- */
.reading-progress {
	position: fixed; inset: 0 0 auto 0; height: 3px;
	background: transparent; z-index: 9999; pointer-events: none;
}
.reading-progress span {
	display: block; height: 100%; width: 0;
	background: var(--color-accent, #c08457);
	transition: width 0.1s linear;
}

/* ----- Block styles ----- */
.wp-block-button.is-style-np-ghost .wp-block-button__link {
	background: transparent; color: var(--color-accent, #c08457);
	box-shadow: inset 0 0 0 2px var(--color-accent, #c08457);
}
.wp-block-button.is-style-np-pill .wp-block-button__link { border-radius: 999px; }
.wp-block-quote.is-style-np-sage {
	border-left: 4px solid var(--color-accent, #c08457);
	background: var(--color-bg-alt, #f2f5ec);
	padding: var(--space-3, 16px) var(--space-4, 24px); border-radius: 0 12px 12px 0;
}
.wp-block-image.is-style-np-frame img {
	border: 1px solid var(--color-border, #e4e6dd);
	padding: 8px; background: var(--color-surface, #ffffff); border-radius: 12px;
}
.wp-block-group.is-style-np-card {
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, #e4e6dd);
	border-radius: 16px; padding: var(--space-4, 24px);
}

/* ----- Author social + author archive (E-E-A-T) ----- */
.author-social { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 1em; margin: var(--space-2, 12px) 0 0; padding: 0; }
.author-social a { font-size: 0.9em; font-weight: 600; text-decoration: none; }
.author-social a:hover { text-decoration: underline; }
.author-archive-header { display: flex; gap: var(--space-4, 24px); align-items: flex-start; margin-bottom: var(--space-5, 32px); padding-bottom: var(--space-4, 24px); border-bottom: 1px solid var(--color-border, #e4e6dd); }
.author-archive-avatar img { border-radius: 50%; }
.author-archive-name { margin: 0 0 0.25em; }
.author-archive-bio { color: var(--color-text, #262b27); margin: 0; }
.author-archive-posts-title { margin: var(--space-5, 32px) 0 var(--space-4, 24px); }

/* ----- Grid niche: magazine & portfolio ----- */
.archive-layout-magazine .posts-grid--list { grid-template-columns: repeat(2, 1fr); }
.archive-layout-magazine .posts-grid--list > article:first-child { grid-column: 1 / -1; }
.archive-layout-magazine .posts-grid--list > article:first-child .post-card-body { padding: var(--space-5, 32px); }
.archive-layout-magazine .posts-grid--list > article:first-child .entry-title { font-size: var(--fs-h2, 1.75rem); }

.archive-layout-portfolio .posts-grid--list { grid-template-columns: repeat(3, 1fr); }
.archive-layout-portfolio .post-card { text-align: center; }
.archive-layout-portfolio .entry-summary,
.archive-layout-portfolio .entry-meta { display: none; }
.archive-layout-portfolio .post-card-body { padding: var(--space-3, 16px); }

@media (max-width: 880px) {
	.archive-layout-magazine .posts-grid--list,
	.archive-layout-portfolio .posts-grid--list { grid-template-columns: repeat(2, 1fr); }
	.archive-layout-magazine .posts-grid--list > article:first-child { grid-column: auto; }
}
@media (max-width: 560px) {
	.archive-layout-magazine .posts-grid--list,
	.archive-layout-portfolio .posts-grid--list { grid-template-columns: 1fr; }
	.author-archive-header { flex-direction: column; align-items: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
	.reading-progress span { transition: none; }
}


/* =========================================================================
   v2.2.0 ENHANCEMENTS
   ====================================================================== */

/* ----- Anti-CLS images ----- */
img { height: auto; }
.post-card-thumb img, .wp-post-image { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

/* ----- News ticker ----- */
.news-ticker { background: var(--color-accent, #c08457); color: var(--color-on-accent, #ffffff); border-block: 1px solid rgba(0,0,0,0.08); }
.news-ticker__inner { display: flex; align-items: center; gap: 1rem; height: 44px; overflow: hidden; }
.news-ticker__label { flex: 0 0 auto; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; padding: 0.2em 0.7em; background: rgba(0,0,0,0.18); border-radius: 999px; }
.news-ticker__viewport { flex: 1 1 auto; overflow: hidden; position: relative; }
.news-ticker__track { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap; will-change: transform; animation: np-ticker var(--ticker-duration, 50s) linear infinite; }
.news-ticker__viewport:hover .news-ticker__track,
.news-ticker__viewport:focus-within .news-ticker__track { animation-play-state: paused; }
.news-ticker__item { color: inherit; text-decoration: none; font-size: 0.9rem; opacity: 0.95; }
.news-ticker__item::before { content: "\2022"; margin-right: 2.5rem; opacity: 0.5; }
.news-ticker__item:hover { text-decoration: underline; opacity: 1; }
@keyframes np-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.news-ticker__inner { height: auto; }
	.news-ticker__track { animation: none; white-space: normal; flex-wrap: wrap; gap: 0.5rem 1.5rem; padding: 0.5rem 0; }
}

/* ----- AJAX filter bar ----- */
.np-filter-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: var(--space-4, 24px); align-items: center; }
.np-filter-bar select { padding: 0.5em 0.8em; border: 1px solid var(--color-border, #e4e6dd); border-radius: 10px; background: var(--color-surface, #ffffff); color: var(--color-text, #262b27); font: inherit; }
.np-posts-loading { opacity: 0.45; pointer-events: none; transition: opacity 0.2s ease; }

/* ----- Comment ratings ----- */
.np-comment-rating { display: inline-block; margin-right: 0.5em; color: var(--color-accent, #c08457); letter-spacing: 0.05em; }
.comment-form-rating { display: flex; align-items: center; gap: 0.5em; }
.comment-form-rating select { padding: 0.4em 0.7em; border: 1px solid var(--color-border, #e4e6dd); border-radius: 8px; background: var(--color-surface, #ffffff); color: var(--color-text, #262b27); }

/* ----- Hero featured-post image (v2.2.0) ----- */
.hero-bento__card--1:has(.hero-bento__card-link.has-thumb) { padding: 0; min-height: 180px; }
.hero-bento__card-link.has-thumb { position: relative; height: 100%; min-height: 180px; justify-content: flex-end; border-radius: inherit; overflow: hidden; }
.hero-bento__card-thumb { position: absolute; inset: 0; z-index: 0; }
.hero-bento__card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bento__card-link.has-thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%); }
.hero-bento__card-link.has-thumb .hero-bento__card-body { position: relative; z-index: 2; padding: 16px; display: flex; flex-direction: column; }
.hero-bento__card-link.has-thumb .hero-bento__card-label { color: #fff; background: var(--color-accent); padding: 2px 10px; border-radius: 999px; align-self: flex-start; margin-bottom: 8px; }
.hero-bento__card-link.has-thumb .hero-bento__card-title { color: #fff; }
.hero-bento__card-link.has-thumb .hero-bento__card-meta { color: rgba(255,255,255,0.85); }
.hero-bento__card-link.has-thumb:hover .hero-bento__card-title { color: #fff; text-decoration: underline; }

/* ----- Hero: all cards as image cards (v2.2.0) ----- */
.hero-bento__card:has(> .hero-bento__card-link.has-thumb) { padding: 0; }

/* ----- Header search (v2.2.0) ----- */
.header-search { position: relative; display: flex; align-items: center; }
.header-search__toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; color: var(--color-header-text, var(--color-text)); border-radius: var(--radius-md, 8px); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
.header-search__toggle:hover, .header-search__toggle:focus-visible { background: var(--color-accent-soft, rgba(0,0,0,0.06)); color: var(--color-accent); }
.header-search__panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: min(360px, 80vw); padding: 12px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e4e6dd); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,0.12)); }
.header-search__panel[hidden] { display: none; }
.header-search__panel .search-form { display: flex; max-width: none; margin: 0; gap: 8px; }
.header-search__panel .search-form label { flex: 1; }
.header-search__panel .search-field { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border, #e4e6dd); border-radius: var(--radius-md, 8px); background: var(--color-bg, #fff); color: var(--color-text); }
.header-search__panel .search-submit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 42px; border: none; border-radius: var(--radius-md, 8px); background: var(--color-accent); color: var(--color-on-accent, #fff); cursor: pointer; }
@media (max-width: 768px) {
	.header-search__panel { position: fixed; left: 16px; right: 16px; width: auto; top: 64px; }
}

/* ===== Hero main as featured post (v2.2.0) ===== */
.hero-bento__main.has-thumb { position: relative; overflow: hidden; padding: 0; align-items: flex-end; color: #fff; min-height: 320px; }
.hero-bento__main-thumb { position: absolute; inset: 0; z-index: 0; }
.hero-bento__main-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-bento__main.has-thumb::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,24,21,0) 25%, rgba(20,24,21,0.55) 60%, rgba(20,24,21,0.9) 100%); }
.hero-bento__main.has-thumb .hero-bento__main-inner { position: relative; z-index: 2; padding: 32px; max-width: 760px; }
.hero-bento__main.has-thumb .hero-bento__title { color: #fff; margin-bottom: 12px; }
.hero-bento__main.has-thumb .hero-bento__title a { color: #fff; text-decoration: none; }
.hero-bento__main.has-thumb .hero-bento__title a:hover { text-decoration: underline; }
.hero-bento__main.has-thumb .hero-bento__subtitle { color: rgba(255,255,255,0.9); margin-bottom: 20px; }
.hero-bento__eyebrow { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; background: var(--color-accent); padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }

/* ===== Premium news section header (below ticker) (v2.2.0) ===== */
.section-header--news { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 16px; padding-bottom: 14px; margin-bottom: var(--space-5, 32px); border-bottom: 2px solid var(--color-border, #e4e6dd); position: relative; }
.section-header--news::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 72px; height: 2px; background: var(--color-accent); }
.section-header__eyebrow { display: block; width: 100%; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 2px; }
.section-header__title { margin: 0; }
.section-header__more { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--color-link); text-decoration: none; white-space: nowrap; }
.section-header__more:hover { color: var(--color-accent); text-decoration: underline; }

/* ===== Premium news cards (front grid) (v2.2.0) ===== */
.archive-layout-grid-3 .post-card { border: 1px solid var(--color-border, #e4e6dd); background: var(--color-surface, #fff); border-radius: var(--radius-lg, 14px); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.archive-layout-grid-3 .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md, 0 12px 28px rgba(0,0,0,0.1)); border-color: var(--color-accent); }
.archive-layout-grid-3 .post-card .entry-title { font-size: 1.15rem; line-height: 1.3; }
.archive-layout-grid-3 .post-card .entry-title a { color: var(--color-heading); text-decoration: none; }
.archive-layout-grid-3 .post-card .entry-title a:hover { color: var(--color-accent); }
.archive-layout-grid-3 .post-card .read-more { font-weight: 600; color: var(--color-accent); }

/* ===== Premium elite sidebar (news) (v2.2.0) ===== */
.site-sidebar .widget { position: relative; margin-bottom: var(--space-4, 24px); padding: 20px; background: var(--color-surface, #fff); border: 1px solid var(--color-border, #e4e6dd); border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.05)); }
.site-sidebar .widget:last-child { margin-bottom: 0; padding-bottom: 20px; border: 1px solid var(--color-border, #e4e6dd); }
.site-sidebar .widget-title { position: relative; font-size: 0.95rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--color-border, #e4e6dd); }
.site-sidebar .widget-title::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: var(--color-accent); }
.site-sidebar .widget ul li { margin-bottom: 0; padding: 9px 0; border-bottom: 1px dashed var(--color-border, #e4e6dd); }
.site-sidebar .widget ul li:last-child { border-bottom: none; padding-bottom: 0; }
.site-sidebar .widget a { color: var(--color-text); text-decoration: none; transition: color 0.2s ease; }
.site-sidebar .widget a:hover { color: var(--color-accent); }
.site-sidebar .widget_recent_entries a { font-weight: 600; color: var(--color-heading); }
.site-sidebar .widget_recent_entries a:hover { color: var(--color-accent); }
.site-sidebar .widget_search .search-field { border-radius: var(--radius-md, 8px) 0 0 var(--radius-md, 8px); }

/* =========================================================================
   v2.3.0 — Advanced features
   ========================================================================= */

/* Cross-document View Transitions (instant-nav animation) */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
}

/* --- Grid 3 kolom: hanya judul (proporsional) --------------------------- */
.archive-layout-grid-3 .post-card .entry-summary,
.archive-layout-grid-3 .post-card .read-more,
.archive-layout-grid-3 .post-card .post-card__excerpt {
	display: none;
}
.archive-layout-grid-3 .post-card .post-card-body,
.archive-layout-grid-3 .post-card .post-card__body {
	padding: 16px 18px 20px;
}
.archive-layout-grid-3 .post-card .entry-title,
.archive-layout-grid-3 .post-card .post-card-title {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.35;
}

/* --- Command Palette (Cmd/Ctrl + K) ------------------------------------- */
.np-cmdk {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
}
.np-cmdk[hidden] { display: none; }
.np-cmdk__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 24, 21, 0.45);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	animation: npFade 0.18s ease;
}
.np-cmdk__panel {
	position: relative;
	width: min(620px, 100%);
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e4e6dd);
	border-radius: var(--radius-lg, 16px);
	box-shadow: 0 24px 60px rgba(20, 24, 21, 0.28);
	overflow: hidden;
	animation: npPop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.np-cmdk__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--color-border, #e4e6dd);
	color: var(--color-muted, #6b7269);
}
.np-cmdk__input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: 1.05rem;
	color: var(--color-text, #262b27);
	outline: none;
}
.np-cmdk__esc {
	font-size: 0.7rem;
	padding: 2px 7px;
	border-radius: 6px;
	background: var(--color-bg-alt, #f2f5ec);
	border: 1px solid var(--color-border, #e4e6dd);
	color: var(--color-muted, #6b7269);
}
.np-cmdk__results {
	max-height: 56vh;
	overflow-y: auto;
	padding: 8px;
}
.np-cmdk__group-label {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-muted, #6b7269);
	padding: 10px 12px 4px;
}
.np-cmdk__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--color-text, #262b27);
	text-decoration: none;
	border: 0;
	background: transparent;
	cursor: pointer;
	font-size: 0.95rem;
}
.np-cmdk__item:hover,
.np-cmdk__item.is-active {
	background: var(--color-accent-soft, #eef2e6);
	color: var(--color-accent-hover, #4a5d52);
}
.np-cmdk__item-sub {
	margin-left: auto;
	font-size: 0.72rem;
	color: var(--color-muted, #6b7269);
}
.np-cmdk__empty {
	padding: 22px 12px;
	text-align: center;
	color: var(--color-muted, #6b7269);
}
@keyframes npFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes npPop { from { opacity: 0; transform: translateY(-8px) scale(0.98); } to { opacity: 1; transform: none; } }

/* --- Series box --------------------------------------------------------- */
.np-series {
	margin: 32px 0;
	padding: 22px 24px;
	border: 1px solid var(--color-border, #e4e6dd);
	border-left: 4px solid var(--color-accent, #8a9a82);
	border-radius: var(--radius-lg, 16px);
	background: var(--color-bg-alt, #f2f5ec);
}
.np-series__eyebrow {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent-hover, #4a5d52);
	font-weight: 700;
}
.np-series__title {
	margin: 4px 0 14px;
	font-size: 1.25rem;
}
.np-series__list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: npseries;
}
.np-series__item {
	counter-increment: npseries;
	position: relative;
	padding: 8px 8px 8px 38px;
	border-radius: 8px;
}
.np-series__item::before {
	content: counter(npseries);
	position: absolute;
	left: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	font-size: 0.72rem;
	font-weight: 700;
	border-radius: 50%;
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e4e6dd);
	color: var(--color-muted, #6b7269);
}
.np-series__item.is-current { background: var(--color-surface, #fff); }
.np-series__item.is-current::before {
	background: var(--color-accent, #8a9a82);
	border-color: var(--color-accent, #8a9a82);
	color: var(--color-on-accent, #fff);
}
.np-series__item.is-current > span { font-weight: 700; color: var(--color-heading, #2f3a33); }
.np-series__item a { text-decoration: none; color: var(--color-text, #262b27); }
.np-series__item a:hover { color: var(--color-accent-hover, #4a5d52); }

/* --- Floating share bar + bookmark -------------------------------------- */
.np-share {
	position: fixed;
	left: max(16px, calc((100vw - var(--container-width, 1100px)) / 2 - 64px));
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 8px;
	background: var(--color-surface, #fff);
	border: 1px solid var(--color-border, #e4e6dd);
	border-radius: 999px;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,0.06));
}
.np-share__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--color-muted, #6b7269);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.np-share__btn:hover {
	background: var(--color-accent-soft, #eef2e6);
	color: var(--color-accent-hover, #4a5d52);
	transform: scale(1.08);
}
.np-share__bookmark.is-saved {
	color: var(--color-accent, #8a9a82);
}
.np-share__bookmark.is-saved svg { fill: var(--color-accent, #8a9a82); }
.np-share__copy.is-copied { color: var(--color-accent, #8a9a82); }
@media (max-width: 1180px) {
	.np-share {
		left: 0;
		right: 0;
		top: auto;
		bottom: 0;
		transform: none;
		flex-direction: row;
		justify-content: center;
		border-radius: 16px 16px 0 0;
		border-bottom: 0;
	}
}

/* --- Inline newsletter -------------------------------------------------- */
.np-newsletter {
	margin: 36px 0 8px;
	padding: 28px;
	border-radius: var(--radius-lg, 16px);
	background: linear-gradient(135deg, var(--color-accent-soft, #eef2e6), var(--color-bg-alt, #f2f5ec));
	border: 1px solid var(--color-border, #e4e6dd);
}
.np-newsletter__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.np-newsletter__text { flex: 1 1 260px; }
.np-newsletter__title { margin: 0 0 6px; font-size: 1.3rem; }
.np-newsletter__desc { margin: 0; color: var(--color-muted, #6b7269); }
.np-newsletter__form { display: flex; gap: 8px; flex: 1 1 280px; }
.np-newsletter__input {
	flex: 1;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--color-border, #e4e6dd);
	background: var(--color-surface, #fff);
	color: var(--color-text, #262b27);
	font-size: 0.95rem;
}
.np-newsletter__btn {
	padding: 12px 20px;
	border-radius: 10px;
	border: 0;
	background: var(--color-accent, #8a9a82);
	color: var(--color-on-accent, #fff);
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.np-newsletter__btn:hover { background: var(--color-accent-hover, #4a5d52); }

/* --- Glassmorphism header ----------------------------------------------- */
.np-glass-header .site-header {
	background: color-mix(in srgb, var(--color-header-bg, #faf9f5) 72%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid color-mix(in srgb, var(--color-border, #e4e6dd) 60%, transparent);
}

/* --- Scroll-driven reveal animations ------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.np-anim .post-card,
	.np-anim .np-series,
	.np-anim .np-newsletter,
	.np-anim .entry-content > p,
	.np-anim .entry-content > h2,
	.np-anim .entry-content > figure {
		animation: npReveal linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 22%;
	}
	@keyframes npReveal {
		from { opacity: 0; transform: translateY(22px); }
		to { opacity: 1; transform: none; }
	}
}

/* --- Card tilt 3D (JS adds CSS vars) ------------------------------------ */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
	.np-tilt .post-card {
		transform: perspective(800px) rotateX(var(--np-rx, 0deg)) rotateY(var(--np-ry, 0deg));
		transform-style: preserve-3d;
		transition: transform 0.12s ease;
		will-change: transform;
	}
}

/* --- Focus / reading mode ----------------------------------------------- */
.np-focus-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 14px;
	padding: 6px 12px;
	font-size: 0.8rem;
	border-radius: 999px;
	border: 1px solid var(--color-border, #e4e6dd);
	background: var(--color-surface, #fff);
	color: var(--color-muted, #6b7269);
	cursor: pointer;
}
.np-focus-toggle:hover { color: var(--color-accent-hover, #4a5d52); border-color: var(--color-accent, #8a9a82); }
body.np-focus .site-header,
body.np-focus .site-footer,
body.np-focus .site-sidebar,
body.np-focus .np-share,
body.np-focus .breadcrumbs,
body.np-focus .np-newsletter,
body.np-focus .author-box,
body.np-focus .related-posts { display: none !important; }
body.np-focus .content-area.has-sidebar { display: block; }
body.np-focus .content-primary { max-width: 720px; margin: 0 auto; }
body.np-focus .entry-content { font-size: 1.18rem; line-height: 1.85; }
body.np-focus .entry-content p { margin-bottom: 1.5em; }

/* --- TOC scroll-spy active state ---------------------------------------- */
.toc a.is-active,
.table-of-contents a.is-active {
	color: var(--color-accent-hover, #4a5d52);
	font-weight: 700;
	border-left: 2px solid var(--color-accent, #8a9a82);
	padding-left: 8px;
	margin-left: -10px;
}

/* =========================================================================
 * v2.4.0 — Standalone Pro: announcement bar, off-canvas, mega menu,
 * carousel, utility & device-visibility classes
 * ====================================================================== */

/* Announcement bar */
.np-annbar {
	background: var(--color-accent, #4A5D52);
	color: var(--color-on-accent, #FAF9F5);
	font-size: 0.9rem;
}
.np-annbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 0.55rem 1rem;
	flex-wrap: wrap;
}
.np-annbar__cta {
	color: inherit;
	text-decoration: underline;
	font-weight: 600;
}
.np-annbar__close {
	background: transparent;
	border: 0;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	margin-inline-start: auto;
	padding: 0 0.25rem;
}
.np-annbar.is-hidden { display: none; }

/* Off-canvas toggle (dibuat via JS) */
.np-oc-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px;
	height: 42px;
	padding: 9px;
	background: transparent;
	border: 1px solid var(--color-border, #E4E6DD);
	border-radius: var(--radius-sm, 8px);
	cursor: pointer;
}
.np-oc-toggle span {
	display: block;
	height: 2px;
	width: 100%;
	background: var(--color-heading, #2F3A33);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Off-canvas drawer */
.np-offcanvas {
	position: fixed;
	inset: 0;
	z-index: 1000;
}
.np-offcanvas[hidden] { display: none; }
.np-offcanvas__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(28, 33, 30, 0.45);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.np-offcanvas.is-open .np-offcanvas__backdrop { opacity: 1; }
.np-offcanvas__panel {
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	height: 100%;
	width: min(82vw, 320px);
	background: var(--color-surface, #FAF9F5);
	box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,0.12));
	padding: 3.5rem 1.5rem 2rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}
.np-offcanvas.is-open .np-offcanvas__panel { transform: translateX(0); }
.np-offcanvas__close {
	position: absolute;
	top: 0.75rem;
	inset-inline-end: 1rem;
	background: transparent;
	border: 0;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: var(--color-heading, #2F3A33);
}
.np-offcanvas__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.np-offcanvas__list li { border-bottom: 1px solid var(--color-border, #E4E6DD); }
.np-offcanvas__list a {
	display: block;
	padding: 0.85rem 0.25rem;
	color: var(--color-text, #262B27);
	text-decoration: none;
	font-weight: 500;
}
.np-offcanvas__list a:hover { color: var(--color-link, #4A5D52); }
body.np-oc-locked { overflow: hidden; }

@media (max-width: 768px) {
	.np-has-offcanvas .main-navigation { display: none; }
	.np-has-offcanvas .np-oc-toggle { display: flex; }
}

/* CSS-only mega menu: beri class `mega` pada item menu */
.main-navigation .menu-item.mega { position: static; }
.main-navigation .menu-item.mega > .sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 2rem;
	inset-inline-start: 0;
	width: 100%;
	max-width: var(--container-width, 1140px);
	margin-inline: auto;
	padding: 1.5rem;
}
.main-navigation .menu-item.mega > .sub-menu > li {
	flex: 1 1 180px;
	min-width: 160px;
}
.main-navigation .menu-item.mega > .sub-menu .sub-menu {
	position: static;
	display: block;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Posts carousel */
.np-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: var(--space-5, 2rem) 0;
}
.np-carousel__track {
	display: flex;
	gap: var(--space-3, 1rem);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 0.5rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.np-carousel__slide {
	flex: 0 0 clamp(220px, 30%, 300px);
	scroll-snap-align: start;
}
.np-carousel__link { text-decoration: none; color: inherit; }
.np-carousel__thumb img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	border-radius: var(--radius-md, 12px);
}
.np-carousel__title {
	font-size: 1rem;
	margin: 0.6rem 0 0;
	line-height: 1.35;
}
.np-carousel__nav {
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--color-border, #E4E6DD);
	background: var(--color-surface, #FAF9F5);
	color: var(--color-heading, #2F3A33);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}
.np-carousel__nav:hover {
	background: var(--color-accent, #4A5D52);
	color: var(--color-on-accent, #FAF9F5);
}
@media (max-width: 600px) {
	.np-carousel__nav { display: none; }
	.np-carousel__slide { flex-basis: 78%; }
}

/* Utility classes */
.np-text-center { text-align: center; }
.np-text-right { text-align: right; }
.np-mt-0 { margin-top: 0 !important; }
.np-mb-0 { margin-bottom: 0 !important; }
.np-mt-4 { margin-top: var(--space-4, 1.5rem) !important; }
.np-mb-4 { margin-bottom: var(--space-4, 1.5rem) !important; }
.np-rounded { border-radius: var(--radius-md, 12px); }
.np-shadow { box-shadow: var(--shadow-md, 0 8px 30px rgba(0,0,0,0.12)); }
.np-muted { color: var(--color-muted, #6B7269); }
.np-container-narrow { max-width: 720px; margin-inline: auto; }

/* Device-visibility classes */
@media (max-width: 600px) {
	.np-hide-mobile { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
	.np-hide-tablet { display: none !important; }
}
@media (min-width: 1025px) {
	.np-hide-desktop { display: none !important; }
}

/* =========================================================================
   v2.5.0 — UX & Engagement
   ========================================================================= */

/* Toolbar aksesibilitas */
.np-a11y-btn{position:fixed;left:1rem;bottom:1rem;z-index:9990;width:48px;height:48px;border-radius:50%;border:0;background:var(--color-accent);color:var(--color-on-accent,#fff);font-size:1.4rem;cursor:pointer;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center}
.np-a11y-btn:hover{background:var(--color-accent-hover)}
.np-a11y-panel{position:fixed;left:1rem;bottom:4.5rem;z-index:9990;width:240px;background:var(--color-surface,#fff);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:.75rem;display:flex;flex-direction:column;gap:.4rem}
.np-a11y-panel[hidden]{display:none}
.np-a11y-title{margin:0 0 .25rem;font-weight:700;color:var(--color-heading)}
.np-a11y-panel button{text-align:left;padding:.5rem .65rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-alt,#f6f6f2);color:var(--color-text);cursor:pointer;font-size:.92rem}
.np-a11y-panel button:hover{background:var(--color-accent-soft);border-color:var(--color-accent)}

/* Body classes aksesibilitas */
body.np-a11y-large{font-size:118%}
body.np-a11y-contrast{--color-bg:#fff;--color-text:#000;--color-heading:#000;--color-link:#003a8c;filter:contrast(1.12)}
body.np-a11y-dyslexia,body.np-a11y-dyslexia *{font-family:Verdana,Tahoma,sans-serif !important;letter-spacing:.03em;word-spacing:.12em;line-height:1.8 !important}
body.np-a11y-links a{text-decoration:underline !important;outline:2px solid var(--color-accent);outline-offset:2px}

/* Live AJAX search */
.np-search-wrap{position:relative}
.np-search-results{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--color-surface,#fff);border:1px solid var(--color-border);border-top:0;border-radius:0 0 var(--radius-md) var(--radius-md);box-shadow:var(--shadow-md);max-height:60vh;overflow:auto;margin:0;padding:.25rem;list-style:none}
.np-search-results[hidden]{display:none}
.np-search-results li{margin:0}
.np-search-results a{display:block;padding:.55rem .65rem;border-radius:var(--radius-sm);color:var(--color-text);text-decoration:none}
.np-search-results a:hover,.np-search-results a:focus{background:var(--color-accent-soft);color:var(--color-heading)}
.np-search-results .np-search-empty{padding:.55rem .65rem;color:var(--color-muted)}

/* Cookie consent */
.np-cookie{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:9995;max-width:560px;margin:0 auto;background:var(--color-surface,#fff);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-md);padding:1rem 1.15rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.np-cookie[hidden]{display:none}
.np-cookie__text{margin:0;flex:1 1 240px;font-size:.92rem;color:var(--color-text)}
.np-cookie__actions{display:flex;gap:.5rem}
.np-cookie__decline{background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.45rem .9rem;cursor:pointer;color:var(--color-text)}
.np-cookie__decline:hover{border-color:var(--color-accent)}

/* FAQ accordion (shortcode) */
.np-faq{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem 0}
.np-faq__item{border:1px solid var(--color-border);border-radius:var(--radius-md);padding:.25rem .9rem;background:var(--color-bg-alt,#f6f6f2)}
.np-faq__item summary{cursor:pointer;font-weight:600;color:var(--color-heading);padding:.6rem 0;list-style:none}
.np-faq__item summary::-webkit-details-marker{display:none}
.np-faq__item summary::before{content:"+";display:inline-block;width:1.1em;color:var(--color-accent);font-weight:700}
.np-faq__item[open] summary::before{content:"–"}
.np-faq__a{padding:0 0 .8rem .1rem;color:var(--color-text)}

/* HTML sitemap (shortcode) */
.np-sitemap{margin:1.5rem 0}
.np-sitemap h2{margin-top:1.5rem;color:var(--color-heading)}
.np-sitemap h3{margin-top:1.1rem;color:var(--color-accent)}
.np-sitemap ul{margin:.4rem 0 0;padding-left:1.2rem}
.np-sitemap li{margin:.2rem 0}

/* 404 populer */
.np-404-popular{margin:2rem 0;text-align:left}
.np-404-popular h2{color:var(--color-heading);font-size:1.2rem}
.np-404-popular ul{padding-left:1.2rem}

@media (prefers-reduced-motion: reduce){.np-a11y-btn,.np-a11y-panel,.np-cookie{transition:none}}


/* =========================================================================
   v2.5.1 — UI/UX Polish: nav, search, a11y, cookie, share, contrast
   ========================================================================= */

/* Contrast-safe accent text for small UI labels */
.read-more,
.archive-layout-grid-3 .post-card .read-more,
.np-faq__item summary::before,
.np-sitemap h3,
.np-search-results a:hover,
.np-search-results a:focus {
	color: var(--color-accent-text, #8F4F2E);
}

/* Avoid double mobile navigation when off-canvas is enabled */
@media (max-width: 768px) {
	.np-has-offcanvas .menu-toggle { display: none !important; }
	.np-has-offcanvas .header-actions { gap: 8px; }
}

/* Multi-instance live search polish */
.np-search-wrap { position: relative; width: 100%; }
.header-search__panel .np-search-wrap { width: 100%; }
.np-search-results { min-width: 100%; }
.np-search-results li[role="option"] { margin: 0; }
.np-search-results a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.search-results-wrap { margin-top: 2rem; }
.np-404-actions { margin-top: 2rem; }

/* Accessibility toolbar active and non-overlap states */
.np-a11y-panel button[aria-pressed="true"],
.np-a11y-panel button.is-active {
	background: var(--color-accent, #C08457);
	border-color: var(--color-accent, #C08457);
	color: var(--color-on-accent, #fff);
}
body.np-cookie-visible .np-a11y-btn { bottom: 6.5rem; }
body.np-cookie-visible .np-a11y-panel { bottom: 10rem; }
@media (max-width: 600px) {
	body.np-cookie-visible .np-a11y-btn { bottom: 8.75rem; }
	body.np-cookie-visible .np-a11y-panel { bottom: 12rem; max-width: calc(100vw - 2rem); }
}

/* Share bar v2.5.1: minimize + draggable, read-friendly */
.np-share { touch-action: none; transition: opacity .18s ease, box-shadow .18s ease, transform .18s ease; }
.np-share.is-custom-pos { position: fixed; }
.np-share.is-dragging { cursor: grabbing; box-shadow: var(--shadow-lg, 0 16px 40px rgba(0,0,0,.18)); opacity: .92; }
.np-share__toggle {
	background: var(--color-bg-alt, #F2F5EC);
	color: var(--color-accent-text, #8F4F2E);
	font-weight: 800;
	cursor: grab;
}
.np-share__toggle:active { cursor: grabbing; }
.np-share__toggle span { line-height: 1; transform: rotate(90deg); display: inline-block; }
.np-share.is-minimized { padding: 6px; gap: 0; }
.np-share.is-minimized .np-share__btn:not(.np-share__toggle) {
	width: 0;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}
.np-share.is-minimized .np-share__toggle {
	width: 42px;
	height: 42px;
	background: var(--color-accent, #C08457);
	color: var(--color-on-accent, #fff);
}
.np-share.is-minimized .np-share__toggle span { transform: rotate(0deg); }
@media (max-width: 1180px) {
	.np-share { padding: 6px max(12px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
	.np-share.is-minimized {
		left: auto;
		right: 12px;
		bottom: 12px;
		border-radius: 999px;
		border: 1px solid var(--color-border, #E4E6DD);
		width: auto;
	}
}
@media (prefers-reduced-motion: reduce) {
	.post-card,
	.hero-bento__cta,
	.related-post-item,
	.np-share__btn {
		transition: none !important;
		transform: none !important;
	}
}

/* =========================================================================
   v2.6.0 — Editorial Revenue & Automation System
   ========================================================================= */

/* 6 Featured Category Groups */
.np-cat-hub{margin:var(--space-6,48px) 0;padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--color-border,#E4E6DD);border-radius:var(--radius-xl,24px);background:linear-gradient(135deg,var(--color-surface,#fff),var(--color-bg-alt,#F2F5EC));box-shadow:var(--shadow-sm)}
.np-cat-hub__header{margin-bottom:1rem}.np-cat-hub__desc{margin:.35rem 0 0;color:var(--color-muted);max-width:720px}.np-cat-hub__pills{display:flex;gap:.5rem;overflow:auto;padding:.25rem 0 1rem;margin-bottom:1rem;scrollbar-width:thin}.np-cat-hub__pills a{flex:0 0 auto;text-decoration:none;padding:.45rem .85rem;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text);font-size:.86rem;font-weight:700}.np-cat-hub__pills a:hover,.np-cat-hub__pills a:focus-visible{border-color:var(--color-accent);color:var(--color-accent-text,#8F4F2E);background:var(--color-accent-soft)}
.np-cat-hub__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.np-cat-group{background:var(--color-surface,#fff);border:1px solid var(--color-border);border-radius:var(--radius-lg,16px);padding:1rem;box-shadow:var(--shadow-sm);min-width:0}.np-cat-group__head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding-bottom:.75rem;margin-bottom:.85rem;border-bottom:1px solid var(--color-border)}.np-cat-group__label{display:block;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--color-accent-text,#8F4F2E);margin-bottom:.2rem}.np-cat-group h3{margin:0;font-size:clamp(1.08rem,2vw,1.35rem)}.np-cat-group h3 a{text-decoration:none;color:var(--color-heading)}.np-cat-group__more{flex:0 0 auto;font-size:.78rem;font-weight:800;text-decoration:none;color:var(--color-accent-text,#8F4F2E)}
.np-cat-group__posts{display:grid;gap:.75rem}.np-cat-featured{display:grid;grid-template-columns:138px minmax(0,1fr);gap:.85rem;align-items:center}.np-cat-featured__thumb{display:block;aspect-ratio:16/10;background:var(--color-bg-alt);border-radius:var(--radius-md);overflow:hidden}.np-cat-featured__thumb img{width:100%;height:100%;object-fit:cover;display:block}.np-cat-featured h4{margin:0 0 .35rem;font-size:1rem;line-height:1.3}.np-cat-featured h4 a{text-decoration:none;color:var(--color-heading)}.np-cat-featured p{margin:0;color:var(--color-muted);font-size:.88rem;line-height:1.55}.np-cat-compact{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-top:1px dashed var(--color-border)}.np-cat-compact a{font-weight:700;text-decoration:none;color:var(--color-text);line-height:1.35}.np-cat-compact a:hover{color:var(--color-accent-text,#8F4F2E)}.np-cat-compact time{flex:0 0 auto;font-size:.72rem;color:var(--color-muted);white-space:nowrap;margin-top:.12rem}
@media(max-width:980px){.np-cat-hub__grid{grid-template-columns:1fr}.np-cat-featured{grid-template-columns:120px minmax(0,1fr)}}@media(max-width:560px){.np-cat-hub{margin:2rem 0;padding:.85rem}.np-cat-group{padding:.85rem}.np-cat-group__head{align-items:flex-start}.np-cat-featured{grid-template-columns:1fr}.np-cat-featured__thumb{aspect-ratio:16/9}.np-cat-compact{display:block}.np-cat-compact time{display:block;margin-top:.25rem}}

/* Ads Manager */
.np-ad{margin:1.5rem auto;padding:.75rem;border:1px dashed var(--color-border,#E4E6DD);border-radius:var(--radius-lg,16px);background:color-mix(in srgb,var(--color-bg-alt,#F2F5EC) 70%,transparent);text-align:center;max-width:100%;overflow:hidden}.np-ad__label{display:block;margin-bottom:.45rem;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);font-weight:800}.np-ad__code{display:block;min-height:1px}.np-ad--after_hero,.np-ad--before_footer{max-width:var(--container-width,1280px)}.np-ad--between_category_rows_2,.np-ad--between_category_rows_4{grid-column:1/-1;margin-block:.5rem 1rem}.site-sidebar .np-ad{position:relative;margin:0 0 var(--space-4,24px);background:var(--color-surface,#fff);box-shadow:var(--shadow-sm)}

/* Safe snippets are intentionally output raw by admin only; no frontend chrome. */

/* AI admin helper visual (editor side) */
#nuzanthrapress_ai .inside p{font-size:12px;color:#4A5D52}#nuzanthrapress_ai .np-ai-result{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:#FAF9F5;border-color:#D8DFCC;border-radius:8px}