/* Tambahan khusus laman produk (mis. /kemasberkas/) — reuse token dari style.css */

.app-id {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
}
.app-id img {
	width: 56px;
	height: 56px;
	flex-shrink: 0;
}
.app-id .eyebrow { margin: 0; }

.cta-note {
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--muted);
}

.shot {
	margin: 0;
}
.shot img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--line);
}
.shot figcaption {
	margin-top: 8px;
	font-size: 13px;
	color: var(--muted);
}
.hero .shot { margin-top: 40px; }

.feature {
	padding: 26px 0;
	border-top: 1px solid var(--line);
}
.feature:first-of-type { border-top: 0; padding-top: 0; }
.feature h3 {
	margin: 0 0 8px;
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.35;
}
.feature p { margin: 0 0 16px; max-width: 58ch; }
.feature p:last-child { margin-bottom: 0; }

.table-wrap {
	overflow-x: auto;
	margin: 18px 0 0;
}
.size-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
}
.size-table th,
.size-table td {
	text-align: left;
	padding: 9px 14px;
	border: 1px solid var(--line);
}
.size-table th {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--field);
	font-weight: 600;
}
.size-table td:nth-child(2) {
	font-family: var(--mono);
	font-size: 0.9em;
	white-space: nowrap;
}

.steps {
	margin: 0;
	padding-left: 22px;
	max-width: 58ch;
}
.steps li { margin-bottom: 10px; }
.steps li:last-child { margin-bottom: 0; }

.faq details {
	border-top: 1px solid var(--line);
	padding: 14px 0;
}
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}
.faq summary:hover { color: var(--accent); }
.faq details p {
	margin: 10px 0 0;
	max-width: 58ch;
	color: var(--muted);
}

.prose + .prose,
.prose + .table-wrap + .note { margin-top: 14px; }
.prose a,
.feature a,
.faq a { color: var(--text); text-underline-offset: 3px; }
.prose a:hover,
.feature a:hover,
.faq a:hover { color: var(--accent); }

.cta-end { margin-top: 24px; }

.back-link {
	font-family: var(--mono);
	color: var(--muted);
	text-decoration: none;
}
.back-link:hover,
.back-link:focus-visible { color: var(--text); }

/* ---- Panduan (artikel) ---- */
.crumbs {
	padding-top: 24px;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--muted);
}
.crumbs a { color: var(--muted); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--text); }
.article-hero { padding-block: 28px 32px; }
.byline {
	margin: 0;
	font-family: var(--mono);
	font-size: 12.5px;
	color: var(--muted);
}
.article {
	padding-block: 12px 36px;
	border-bottom: 1px solid var(--line);
}
.article h2 {
	margin: 32px 0 10px;
	font-size: 1.3rem;
	line-height: 1.35;
	font-weight: 650;
	letter-spacing: -0.01em;
}
.article p,
.article ul,
.article ol { max-width: 62ch; margin: 0 0 14px; }
.article ul { padding-left: 22px; }
.article li { margin-bottom: 6px; }
.article a { color: var(--text); text-underline-offset: 3px; }
.article a:hover { color: var(--accent); }
.article code {
	font-family: var(--mono);
	font-size: 0.85em;
	background: var(--field);
	padding: 2px 6px;
}
.article .shot { margin: 18px 0; }
.article .table-wrap { margin: 14px 0 18px; }
.faq.article h2 { margin-top: 28px; }

.cta-box {
	margin: 32px 0;
	padding: 22px 24px;
	border: 1px solid var(--line-strong);
}
.cta-box p { margin: 0 0 16px; color: var(--muted); max-width: 58ch; }
.cta-box .cta-box-title {
	margin-bottom: 6px;
	color: var(--text);
	font-weight: 600;
}

.related ul { list-style: none; padding: 0; }
.related li { margin-bottom: 8px; }

.card h3 a,
.block h2 a { color: inherit; text-underline-offset: 3px; }
.card h3 a:hover,
.block h2 a:hover { color: var(--accent); }