/*!
 * Kojisha — halaman Kontak (0.5.0) & Tentang (0.6.2), kojisha-catalog. Token --kj-* dari site.css.
 */
body.kj-page #content > .ast-container { max-width: none; padding: 0; display: block; }
body.kj-page .site-content { background: var(--kj-bg); }

.kj-c { font-family: var(--kj-font-sans); color: var(--kj-ink); font-size: 16px; line-height: 1.6; background: var(--kj-bg); padding-bottom: var(--kj-space-7); }
.kj-c *, .kj-c *::before, .kj-c *::after { box-sizing: border-box; }
.kj-c p { margin: 0; }
.kj-c a { color: var(--kj-red-strong); }
.kj-c a:hover { color: var(--kj-red-deep); }
.kj-c a:focus-visible { outline: 3px solid var(--kj-red); outline-offset: 2px; }
.kj-c .kj-btn--primary, .kj-c .kj-btn--primary:hover { color: var(--kj-on-red); text-decoration: none; }
.kj-c .kj-btn--outline { color: var(--kj-ink); text-decoration: none; }
.kj-c .kj-btn--outline:hover { color: var(--kj-surface); }
.kj-c-wrap { max-width: var(--kj-container); margin: 0 auto; padding: 0 var(--kj-space-4); }
.kj-c-mono { font-family: var(--kj-font-mono); font-size: 12px; color: var(--kj-muted); }

/* Hero */
.kj-c-hero { background: var(--kj-ink); border-bottom: var(--kj-border-accent) solid var(--kj-red); padding: 20px 0 28px; }
.kj-c-hero .kj-c-wrap { display: flex; flex-direction: column; gap: var(--kj-space-3); }
.kj-c-crumb { font: 400 12px/1.4 var(--kj-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kj-hero-meta); }
.kj-c .kj-c-crumb a { color: var(--kj-hero-meta); text-decoration: none; }
.kj-c .kj-c-crumb a:hover { color: var(--kj-surface); text-decoration: underline; }
.kj-c-crumb [aria-current] { color: var(--kj-surface); }
.kj-c .kj-c-h1 { margin: 0; font: 800 32px/1.05 var(--kj-font-display); letter-spacing: 0; text-transform: uppercase; color: var(--kj-surface); }
.kj-c-lead { max-width: 640px; font-size: 17px; color: var(--kj-hero-text); }
.kj-c-lead p + p { margin-top: var(--kj-space-2); }

/* Tata letak */
.kj-c-grid { display: grid; gap: var(--kj-space-7); padding-top: var(--kj-space-5); }
.kj-c-col { display: flex; flex-direction: column; gap: var(--kj-space-7); min-width: 0; }
.kj-c section { display: flex; flex-direction: column; gap: var(--kj-space-3); }
/* margin:auto pada wrap mematikan stretch flex → wrap menyusut ke lebar isi (hero Kontak/Tentang/Layanan). 0.8.1 */
.kj-c section > .kj-c-wrap { width: 100%; }
.kj-c .kj-c-h2 { margin: 0; font: 700 24px/1.1 var(--kj-font-display); letter-spacing: 0; text-transform: uppercase; color: var(--kj-ink); }
.kj-c .kj-c-label { margin: 0; font: 400 12px/1.4 var(--kj-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kj-muted); }
.kj-c-note { font-size: 14px; color: var(--kj-muted); }
.kj-c-box { padding: var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); }

/* WhatsApp */
.kj-c .kj-c-wa { gap: 14px; padding: var(--kj-space-5) var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); border-top: var(--kj-border-accent) solid var(--kj-red); }
.kj-c-wa__num { font: 400 30px/1.1 var(--kj-font-mono); color: var(--kj-ink); }

/* Daftar */
.kj-c-checks, .kj-c-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kj-c-checks { gap: 10px; }
.kj-c-checks li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.kj-c-checks svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--kj-red); }
.kj-c-list { background: var(--kj-surface); border: 1px solid var(--kj-line); }
.kj-c-list li { display: flex; gap: var(--kj-space-3); align-items: flex-start; margin: 0; padding: var(--kj-space-3) var(--kj-space-4); border-top: 1px solid var(--kj-line); }
.kj-c-list li:first-child { border-top: 0; }
.kj-c-list svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }

/* Alamat */
.kj-c .kj-c-addr { gap: var(--kj-space-4); }
.kj-c-addr > div { display: flex; flex-direction: column; gap: var(--kj-space-2); }
.kj-c address { margin: 0; font-style: normal; }
.kj-c address strong { font-weight: 600; }

/* Jam */
.kj-c-dl { margin: 0; background: var(--kj-surface); border: 1px solid var(--kj-line); }
.kj-c-dl > div { display: grid; grid-template-columns: 1fr auto; border-top: 1px solid var(--kj-line); }
.kj-c-dl > div:first-child { border-top: 0; }
.kj-c-dl dt { padding: var(--kj-space-3) var(--kj-space-4); font-weight: 600; }
.kj-c-dl dd { margin: 0; padding: var(--kj-space-3) var(--kj-space-4); font: 400 14px/1.6 var(--kj-font-mono); }
.kj-c-dl dd.is-closed { color: var(--kj-muted); }

/* Toko online */
.kj-c .kj-c-shops { gap: var(--kj-space-3); }
.kj-c-shops__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kj-space-3); }
.kj-c .kj-c-shops__links a { display: flex; flex-direction: column; gap: 2px; min-height: var(--kj-tap); padding: 10px var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-ink); color: var(--kj-ink); text-decoration: none; }
.kj-c .kj-c-shops__links a:hover { background: var(--kj-ink); color: var(--kj-surface); }
.kj-c .kj-c-shops__links a:hover .kj-c-mono { color: var(--kj-hero-text); }
.kj-c-shops__links a > span:first-child { font-weight: 600; }

@media (min-width: 768px) {
	.kj-c-wrap { padding: 0 var(--kj-space-5); }
	.kj-c-hero { padding: 48px 0 44px; }
	.kj-c .kj-c-h1 { font-size: 44px; }
}

@media (min-width: 1024px) {
	.kj-c { padding-bottom: var(--kj-space-9); }
	.kj-c .kj-c-h1 { font-size: 52px; }
	.kj-c-grid { grid-template-columns: 5fr 7fr; gap: var(--kj-space-5); align-items: start; padding-top: var(--kj-space-7); }
	.kj-c-col { gap: var(--kj-space-5); }
	.kj-c-col--main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kj-space-5); align-content: start; }
	.kj-c .kj-c-wa { padding: var(--kj-space-6); }
	.kj-c-wa__num { font-size: 36px; }
	.kj-c-prep { padding: 0 var(--kj-space-1); }
	.kj-c .kj-c-addr, .kj-c .kj-c-shops { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: var(--kj-space-6); }
	.kj-c .kj-c-addr .kj-btn { white-space: nowrap; flex: none; }
	.kj-c-shops__links { display: flex; }
	.kj-c .kj-c-shops__links a { min-width: 150px; }
}

/* ---------- Tentang (0.6.2) ---------- */
.kj-a-grid { display: grid; gap: var(--kj-space-7); padding-top: var(--kj-space-7); padding-bottom: var(--kj-space-7); }
.kj-a-prose { min-width: 0; max-width: 720px; font-size: 17px; line-height: 1.7; }
.kj-c .kj-a-prose > * + * { margin-top: var(--kj-space-4); }
.kj-c .kj-a-prose h2 { margin: var(--kj-space-7) 0 0; font: 700 26px/1.1 var(--kj-font-display); letter-spacing: 0; text-transform: uppercase; color: var(--kj-ink); }
.kj-c .kj-a-prose h2:first-child { margin-top: 0; }
.kj-c .kj-a-prose h3 { margin: var(--kj-space-5) 0 0; font: 700 20px/1.2 var(--kj-font-display); text-transform: uppercase; }
.kj-c .kj-a-prose ul, .kj-c .kj-a-prose ol { margin-bottom: 0; margin-left: 0; padding-left: 1.3em; }
.kj-a-prose li + li { margin-top: var(--kj-space-2); }
.kj-a-prose strong { font-weight: 600; }
.kj-a-prose img { max-width: 100%; height: auto; }
.kj-c .kj-a-facts { display: flex; flex-direction: column; align-self: start; gap: var(--kj-space-4); padding: var(--kj-space-5) var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); border-top: var(--kj-border-accent) solid var(--kj-red); }
.kj-a-facts dl { margin: 0; display: flex; flex-direction: column; }
.kj-a-facts dl > div { padding: var(--kj-space-3) 0; border-top: 1px solid var(--kj-line); }
.kj-a-facts dl > div:first-child { border-top: 0; padding-top: 0; }
.kj-a-facts dt { font: 400 12px/1.4 var(--kj-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kj-muted); }
.kj-a-facts dd { margin: 4px 0 0; }
.kj-a-num { font: 800 32px/1 var(--kj-font-display); color: var(--kj-ink); }
.kj-c .kj-a-cta { gap: var(--kj-space-4); padding: var(--kj-space-6) var(--kj-space-4); background: var(--kj-ink); border-bottom: var(--kj-border-accent) solid var(--kj-red); }
.kj-a-cta > div { display: flex; flex-direction: column; gap: var(--kj-space-2); }
.kj-c .kj-a-cta .kj-c-h2 { color: var(--kj-surface); }
.kj-a-cta p { color: var(--kj-hero-text); }
.kj-a-cta__btns { display: flex; flex-direction: column; gap: var(--kj-space-3); }
.kj-c .kj-a-cta .kj-btn--outline { background: transparent; color: var(--kj-surface); border-color: var(--kj-surface); }
.kj-c .kj-a-cta .kj-btn--outline:hover { background: var(--kj-surface); color: var(--kj-ink); }

@media (min-width: 1024px) {
	.kj-a-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--kj-space-8); padding-top: var(--kj-space-8); }
	.kj-c .kj-a-facts { position: sticky; top: var(--kj-space-5); padding: var(--kj-space-6); }
	.kj-c .kj-a-cta { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--kj-space-6) var(--kj-space-7); }
	.kj-a-cta__btns { flex-direction: row; flex: none; }
}