/*!
 * Smart Article Print — print document styles.
 * Values come from CSS variables written by SAP_Print_View::dynamic_css().
 */

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

html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

body.sap-body {
	margin: 0;
	background: #e7e9ee;
	color: var(--sap-text, #111827);
	font-family: var(--sap-font);
	font-size: var(--sap-font-size, 11.5pt);
	line-height: var(--sap-line-height, 1.65);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ── Paper sheet (screen) ───────────────────────────────────────── */
.sap-sheet {
	position: relative;
	width: var(--sap-paper-w, 210mm);
	max-width: calc(100% - 32px);
	min-height: var(--sap-paper-h, 297mm);
	margin: 28px auto 56px;
	padding: var(--sap-m-top) var(--sap-m-right) var(--sap-m-bottom) var(--sap-m-left);
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px -8px rgba(15, 23, 42, .18);
}
.sap-has-toolbar .sap-sheet { margin-top: 92px; }
.sap-is-preview .sap-sheet { margin: 18px auto; max-width: none; }

/* Hidden iframe ("cetak langsung") needs no toolbar. */
.sap-is-frame .sap-toolbar { display: none !important; }

/* ── Toolbar (screen only) ─────────────────────────────────────── */
.sap-toolbar {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 50;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .86);
	backdrop-filter: saturate(1.6) blur(14px);
	-webkit-backdrop-filter: saturate(1.6) blur(14px);
	border-bottom: 1px solid rgba(15, 23, 42, .08);
	font: 14px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: #0f172a;
}
.sap-toolbar__inner {
	max-width: 960px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
}
.sap-tb-back { margin-right: auto; }
.sap-tb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, border-color .15s, transform .1s;
}
.sap-tb-btn:hover { background: #f8fafc; border-color: #cbd5e1; }
.sap-tb-btn:active { transform: translateY(1px); }
.sap-tb-btn svg { width: 18px; height: 18px; flex: none; }
.sap-tb-icon { width: 38px; padding: 0; justify-content: center; }
.sap-tb-group { display: inline-flex; align-items: center; gap: 4px; padding: 0 2px; }
.sap-tb-label { font-weight: 600; color: #475569; padding: 0 4px; }
.sap-tb-primary {
	background: var(--sap-accent, #2563eb);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 6px 16px -6px var(--sap-accent, #2563eb);
}
.sap-tb-primary:hover { background: var(--sap-accent, #2563eb); filter: brightness(1.08); }
.sap-tb-menu { position: relative; }
.sap-tb-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 260px;
	max-height: calc(100vh - 90px);
	overflow-y: auto;
	padding: 10px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .25);
}
.sap-tb-dropdown__title { margin: 4px 8px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 600; }
.sap-tb-check { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; cursor: pointer; }
.sap-tb-check:hover { background: #f1f5f9; }
.sap-tb-check input { width: 16px; height: 16px; accent-color: var(--sap-accent, #2563eb); }
.sap-tb-feat { margin-top: 8px; padding: 10px 8px 4px; border-top: 1px solid #eef2f6; }
.sap-tb-feat .sap-tb-dropdown__title { margin: 0 0 8px; }
.sap-tb-range { display: flex; align-items: center; gap: 10px; }
.sap-tb-range input { flex: 1; accent-color: var(--sap-accent, #2563eb); }
.sap-tb-range output { min-width: 76px; padding: 4px 6px; border-radius: 6px; background: #f1f5f9; font: 600 12px/1.2 ui-monospace, Menlo, monospace; text-align: center; color: #334155; }
.sap-tb-seg { display: flex; gap: 3px; margin-top: 10px; padding: 3px; border-radius: 9px; background: #f1f5f9; }
.sap-tb-seg button { flex: 1; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.2; color: #64748b; cursor: pointer; }
.sap-tb-seg button[aria-pressed="true"] { background: #fff; color: #0f172a; font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.sap-tb-seg button:disabled { opacity: .45; cursor: default; }
.sap-tb-reset { margin-top: 8px; padding: 4px 0; border: 0; background: none; color: var(--sap-accent, #2563eb); font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.sap-tb-reset:hover { text-decoration: underline; }

@media (max-width: 640px) {
	.sap-tb-btn span { display: none; }
	.sap-tb-primary span { display: inline; }
	.sap-sheet { padding: 18px; min-height: 0; }
}

/* ── Watermark ─────────────────────────────────────────────────── */
.sap-watermark {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 5;
}
.sap-watermark span {
	transform: rotate(-32deg);
	font: 700 82pt/1 var(--sap-heading-font);
	color: var(--sap-text);
	opacity: var(--sap-wm-opacity, .07);
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Site header ───────────────────────────────────────────────── */
.sap-site-header {
	display: flex;
	align-items: center;
	gap: 18px;
	padding-bottom: 12px;
	margin-bottom: 22px;
	border-bottom: 2px solid var(--sap-accent);
	break-inside: avoid;
}
.sap-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.sap-logo { display: block; max-width: var(--sap-logo-w, 150px); max-height: 64px; width: auto; height: auto; object-fit: contain; }
.sap-site-name { font: 700 1.25em/1.2 var(--sap-heading-font); color: var(--sap-text); }
.sap-tagline { font-size: .82em; color: #6b7280; margin-top: 2px; }
.sap-header-note { margin-left: auto; font-size: .8em; color: #6b7280; text-align: right; max-width: 45%; }
.sap-header-center { flex-direction: column; text-align: center; }
.sap-header-center .sap-brand { flex-direction: column; gap: 6px; }
.sap-header-center .sap-header-note { margin: 0; text-align: center; max-width: none; }
.sap-header-right { flex-direction: row-reverse; }
.sap-header-right .sap-brand { flex-direction: row-reverse; text-align: right; }
.sap-header-right .sap-header-note { margin: 0 auto 0 0; text-align: left; }
.sap-header-split .sap-brand-text { order: -1; }
.sap-header-split .sap-brand { flex: 1; justify-content: space-between; }

/* ── Article head ──────────────────────────────────────────────── */
.sap-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.sap-chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--sap-accent);
	color: #fff;
	font: 600 7.5pt/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.sap-chip--muted { background: #f1f5f9; color: #334155; text-transform: none; letter-spacing: 0; font-weight: 500; }

.sap-title {
	font: 800 2.05em/1.18 var(--sap-heading-font);
	letter-spacing: -.01em;
	margin: 0 0 12px;
	color: var(--sap-text);
	break-after: avoid;
}
.sap-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	font: .8em/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #6b7280;
	margin-bottom: 18px;
}
.sap-meta-author { color: var(--sap-text); font-weight: 600; }
.sap-dot { color: #cbd5e1; }

.sap-excerpt {
	font-size: 1.1em;
	line-height: 1.55;
	color: #374151;
	font-style: italic;
	padding-left: 14px;
	border-left: 3px solid var(--sap-accent);
	margin: 0 0 20px;
}
.sap-excerpt p { margin: 0; }

/* ── Featured image ───────────────────────────────────────────── */
.sap-featured { margin: 0 auto 22px; width: var(--sap-featured-w, 100%); break-inside: avoid; page-break-inside: avoid; text-align: center; }
.sap-featured img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--sap-featured-max-h, none);
	object-fit: var(--sap-featured-fit, cover);
	border-radius: var(--sap-img-radius);
}
.sap-featured figcaption,
.sap-content figcaption,
.sap-content .wp-caption-text,
.sap-content .gallery-caption {
	margin-top: 6px;
	font: italic .78em/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #6b7280;
	text-align: center;
}

/* ── Body content ─────────────────────────────────────────────── */
.sap-content { text-align: var(--sap-align, justify); hyphens: auto; -webkit-hyphens: auto; column-count: var(--sap-columns, 1); column-gap: 8mm; }
.sap-content::after { content: ""; display: block; clear: both; }
.sap-content > *:first-child { margin-top: 0; }
.sap-content p { margin: 0 0 .9em; orphans: 3; widows: 3; }
.sap-content h1, .sap-content h2, .sap-content h3,
.sap-content h4, .sap-content h5, .sap-content h6 {
	font-family: var(--sap-heading-font);
	line-height: 1.25;
	margin: 1.3em 0 .5em;
	color: var(--sap-text);
	text-align: left;
	break-after: avoid;
	page-break-after: avoid;
	break-inside: avoid;
}
.sap-content h2 { font-size: 1.45em; }
.sap-content h3 { font-size: 1.22em; }
.sap-content h4 { font-size: 1.08em; }
.sap-content a { color: var(--sap-accent); text-decoration: underline; text-underline-offset: 2px; }
.sap-content .sap-url { font-size: .82em; color: #6b7280; word-break: break-all; }
.sap-content ul, .sap-content ol { padding-left: 1.4em; margin: 0 0 1em; }
.sap-content li { margin-bottom: .3em; }
.sap-content blockquote, .sap-content .wp-block-quote {
	margin: 1.2em 0;
	padding: .4em 0 .4em 1.1em;
	border-left: 3px solid var(--sap-accent);
	color: #374151;
	font-style: italic;
	break-inside: avoid;
}
.sap-content .wp-block-pullquote { border-top: 3px solid var(--sap-accent); border-bottom: 3px solid var(--sap-accent); padding: 1em 0; text-align: center; }
.sap-content pre, .sap-content code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .86em; }
.sap-content pre { white-space: pre-wrap; word-break: break-word; background: #f8fafc; border: 1px solid #e5e7eb; padding: 10px 12px; border-radius: 6px; break-inside: avoid; text-align: left; }
.sap-content hr { border: 0; border-top: 1px solid #e5e7eb; margin: 1.6em 0; }
.sap-content table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .88em; text-align: left; }
.sap-content th, .sap-content td { border: 1px solid #d1d5db; padding: 5px 8px; vertical-align: top; }
.sap-content th { background: #f3f4f6; }
.sap-content thead { display: table-header-group; }
.sap-content tr { break-inside: avoid; }
.sap-content .wp-block-table { margin: 0; }
.sap-embed-note {
	padding: 8px 12px;
	border: 1px dashed #cbd5e1;
	border-radius: 6px;
	font: .82em/1.4 system-ui, sans-serif;
	color: #475569;
	word-break: break-all;
	text-align: left;
}

/* ── Images: shared rules ─────────────────────────────────────── */
.sap-content img.sap-img {
	max-width: var(--sap-img-max-w, 100%);
	max-height: var(--sap-img-max-h, none);
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--sap-img-radius);
	vertical-align: middle;
}
.sap-content figure,
.sap-content .wp-caption,
.sap-content .wp-block-image,
.sap-content .sap-img-only {
	margin: 1.1em 0;
	max-width: 100%;
	break-inside: avoid;
	page-break-inside: avoid;
	text-align: center;
}
.sap-content .wp-block-image > figure { margin: 0; }
.sap-content figure img,
.sap-content .wp-caption img,
.sap-content .sap-img-only img { display: block; margin: 0 auto; }
.sap-content picture { display: contents; }

/* Smart layout: keep editor alignment, scale floats to a fixed width. */
.sap-layout-smart .sap-content .sap-align-left,
.sap-layout-smart .sap-content .alignleft {
	float: left;
	width: var(--sap-float-w, 42%);
	margin: .3em 1.4em .8em 0;
}
.sap-layout-smart .sap-content .sap-align-right,
.sap-layout-smart .sap-content .alignright {
	float: right;
	width: var(--sap-float-w, 42%);
	margin: .3em 0 .8em 1.4em;
}
.sap-layout-smart .sap-content .sap-align-left img,
.sap-layout-smart .sap-content .sap-align-right img,
.sap-layout-smart .sap-content img.alignleft,
.sap-layout-smart .sap-content img.alignright { width: 100%; max-width: 100%; }
.sap-layout-smart .sap-content .sap-align-center,
.sap-layout-smart .sap-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.sap-layout-smart .sap-content .sap-align-wide img { width: 100%; }

/* Center layout: every image becomes a full-width block, no floats. */
.sap-layout-center .sap-content .alignleft,
.sap-layout-center .sap-content .alignright,
.sap-layout-center .sap-content .sap-align-left,
.sap-layout-center .sap-content .sap-align-right { float: none; width: auto; margin: 1.1em auto; }
.sap-layout-center .sap-content img { display: block; margin-left: auto; margin-right: auto; }
.sap-layout-center .sap-content .sap-img-only img,
.sap-layout-center .sap-content figure:not(.sap-gallery figure) img { width: var(--sap-img-max-w, 100%); }

/* Compact layout: images stay small and float right to save paper. */
.sap-layout-compact .sap-content figure,
.sap-layout-compact .sap-content .wp-caption,
.sap-layout-compact .sap-content .sap-img-only {
	float: right;
	clear: right;
	width: var(--sap-float-w, 42%);
	margin: .2em 0 .8em 1.2em;
}
.sap-layout-compact .sap-content .sap-gallery,
.sap-layout-compact .sap-content .sap-gallery figure { float: none; width: auto; margin: 1em 0; clear: both; }
.sap-layout-compact .sap-content figure img,
.sap-layout-compact .sap-content .sap-img-only img { width: 100%; }

/* Galleries: even grid, any gallery markup (block, classic, Jetpack). */
.sap-content .sap-gallery {
	display: grid !important;
	grid-template-columns: repeat(var(--sap-gallery-cols, 3), minmax(0, 1fr));
	gap: 8px;
	margin: 1.2em 0;
	padding: 0;
	float: none !important;
	width: auto !important;
	list-style: none;
	break-inside: avoid;
}
.sap-content .sap-gallery > br { display: none; }
.sap-content .sap-gallery > figcaption,
.sap-content .sap-gallery > .blocks-gallery-caption { grid-column: 1 / -1; }
.sap-content .sap-gallery figure,
.sap-content .sap-gallery .gallery-item,
.sap-content .sap-gallery .blocks-gallery-item,
.sap-content .sap-gallery .tiled-gallery-item {
	margin: 0 !important;
	width: auto !important;
	max-width: none !important;
	float: none !important;
	break-inside: avoid;
}
.sap-content .sap-gallery .gallery-icon { margin: 0; }
.sap-content .sap-gallery img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	max-height: none;
	margin: 0;
}
.sap-content .sap-gallery figcaption { position: static !important; background: none !important; color: #6b7280 !important; padding: 4px 0 0 !important; font-size: .72em; }
.sap-content .sap-gallery .tiled-gallery-row,
.sap-content .sap-gallery .gallery-group { display: contents; }

/* Visitor toggles */
[data-sap-section][hidden] { display: none !important; }
.sap-no-images .sap-content img,
.sap-no-images .sap-content figure,
.sap-no-images .sap-content .wp-caption,
.sap-no-images .sap-content .sap-gallery,
.sap-no-images .sap-content .sap-img-only { display: none !important; }

/* ── Tags / source / comments / footer ───────────────────────── */
.sap-article::after { content: ""; display: block; clear: both; }
.sap-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 22px; clear: both; }
.sap-tags-label { font: 600 .8em system-ui, sans-serif; color: #6b7280; margin-right: 2px; }
.sap-source {
	clear: both;
	margin-top: 22px;
	padding: 10px 14px;
	border-radius: 8px;
	background: #f8fafc;
	border: 1px solid #e5e7eb;
	font: .8em/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	break-inside: avoid;
}
.sap-source-label { color: #6b7280; }
.sap-source-url { color: var(--sap-accent); font-weight: 600; word-break: break-all; }

.sap-comments { clear: both; margin-top: 28px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.sap-comments h2 { font: 700 1.15em var(--sap-heading-font); margin: 0 0 12px; }
.sap-comment { padding: 8px 0; border-bottom: 1px dashed #e5e7eb; break-inside: avoid; font-size: .92em; }
.sap-comment-head { font: .82em system-ui, sans-serif; color: #6b7280; }
.sap-comment-head strong { color: var(--sap-text); }
.sap-comment-body p { margin: .3em 0 0; }

.sap-doc-footer {
	clear: both;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 28px;
	padding-top: 10px;
	border-top: 1px solid #e5e7eb;
	font: .74em/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #6b7280;
	break-inside: avoid;
}
.sap-print-date { white-space: nowrap; }

/* ── Print ────────────────────────────────────────────────────── */
@media print {
	body.sap-body { background: #fff; }
	.sap-toolbar { display: none !important; }
	.sap-sheet {
		width: auto;
		max-width: none;
		min-height: 0;
		margin: 0;
		padding: 0;
		box-shadow: none;
		border-radius: 0;
	}
	.sap-content a { color: inherit; text-decoration: none; }
	.sap-watermark span { font-size: 72pt; }
}
