/* Halaman utama Dictio (v0.6.0). Semua dibatasi di .jtd-home. */
.jtd-home {
	--h-surface: #fff; --h-ink: #161c2b; --h-ink2: #3a4358; --h-mute: #7b869b; --h-soft: #9aa3b5;
	--h-line: #e8edf5; --h-hair: #eef0f4; --h-accent: #4a76b5; --h-accent-ink: #2c4a7c; --h-accent-bg: #eef4fc;
	--h-accent-line: #cddcf3; --h-accent-fg: #fff;
	--h-ok-bg: #eef7f0; --h-ok-line: #cfe5d7; --h-ok-ink: #3d7a55;
	--h-warn-bg: #fdf6ea; --h-warn-line: #f0dcb8; --h-warn-ink: #8a5a12;
	--h-shadow: 0 1px 2px rgba(20,30,60,.04), 0 8px 24px rgba(20,30,60,.06);
	/* palet pastel: biru, hijau, ungu, oranye */
	--c0-bg: #eef4fc; --c0-fg: #4a76b5; --c0-a: #dfeafb; --c0-b: #b9cdea;
	--c1-bg: #e8f6ee; --c1-fg: #2b8a58; --c1-a: #d3eedd; --c1-b: #9fd3b6;
	--c2-bg: #f1ecfb; --c2-fg: #6c4db8; --c2-a: #e3d9f7; --c2-b: #bfaae6;
	--c3-bg: #fdf1e4; --c3-fg: #b8661c; --c3-a: #fbe3c8; --c3-b: #f2c08e;
	color: var(--h-ink); display: flex; flex-direction: column; gap: 32px; padding-bottom: 24px;
}
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .jtd-home {
		--band: #1a2d4f; --band2: #213a63;
		--h-surface: #161d2d; --h-ink: #edf1f9; --h-ink2: #c3cbdb; --h-mute: #8d98ae; --h-soft: #7a859b;
		--h-line: #242d42; --h-hair: #1f2839; --h-accent: #7ba3e0; --h-accent-ink: #a9c4ee; --h-accent-bg: #1a2438;
		--h-accent-line: #2e4066; --h-accent-fg: #0e131f;
		--h-ok-bg: #142a1f; --h-ok-line: #25513a; --h-ok-ink: #6fcf9b;
		--h-warn-bg: #2c2113; --h-warn-line: #5a4220; --h-warn-ink: #f0c27a;
		--h-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
		--c0-bg: #1a2438; --c0-fg: #8fb2e8; --c0-a: #1f2d4a; --c0-b: #2c4170;
		--c1-bg: #142a1f; --c1-fg: #6fcf9b; --c1-a: #173626; --c1-b: #256444;
		--c2-bg: #231c38; --c2-fg: #b5a0f0; --c2-a: #2d2450; --c2-b: #4c3a8c;
		--c3-bg: #2c2113; --c3-fg: #f0a867; --c3-a: #3b2a14; --c3-b: #6b4519;
	}
}
html[data-theme="dark"] .jtd-home {
	--band: #1a2d4f; --band2: #213a63;
	--h-surface: #161d2d; --h-ink: #edf1f9; --h-ink2: #c3cbdb; --h-mute: #8d98ae; --h-soft: #7a859b;
	--h-line: #242d42; --h-hair: #1f2839; --h-accent: #7ba3e0; --h-accent-ink: #a9c4ee; --h-accent-bg: #1a2438;
	--h-accent-line: #2e4066; --h-accent-fg: #0e131f;
	--h-ok-bg: #142a1f; --h-ok-line: #25513a; --h-ok-ink: #6fcf9b;
	--h-warn-bg: #2c2113; --h-warn-line: #5a4220; --h-warn-ink: #f0c27a;
	--h-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
	--c0-bg: #1a2438; --c0-fg: #8fb2e8; --c0-a: #1f2d4a; --c0-b: #2c4170;
	--c1-bg: #142a1f; --c1-fg: #6fcf9b; --c1-a: #173626; --c1-b: #256444;
	--c2-bg: #231c38; --c2-fg: #b5a0f0; --c2-a: #2d2450; --c2-b: #4c3a8c;
	--c3-bg: #2c2113; --c3-fg: #f0a867; --c3-a: #3b2a14; --c3-b: #6b4519;
}
.jtd-home *, .jtd-home *::before, .jtd-home *::after { box-sizing: border-box; }
.jtd-home a { color: inherit; text-decoration: none; }
.jtd-home h1, .jtd-home h2, .jtd-home h3 { margin: 0; color: var(--h-ink); }
.jtd-home svg { flex-shrink: 0; }
.jtd-home [hidden], .jt-app .jtd-home [hidden] { display: none !important; }

/* ── Bagian: judul berlatar biru Dictio, konten di atas latar halaman ── */
.jtd-home { --band: #22406f; --band2: #2f4b78; }
.jtd-sections { display: flex; flex-direction: column; gap: 40px; }
.jtd-sec-head {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; padding: 14px 18px;
	border-radius: 18px; background: linear-gradient(135deg, var(--band), var(--band2)); color: #fff;
}
.jtd-ico { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: rgba(255,255,255,.95); color: var(--band); }
.jtd-sec-head .tt { flex: 1; min-width: 200px; }
.jtd-home .jtd-sec-head h2 { font-family: var(--jtds-serif, Georgia, serif); font-size: 22px; line-height: 1.2; font-weight: 700; color: #fff; }
.jtd-sec-head .d { color: rgba(255,255,255,.78); font-size: 14px; }
.jtd-tabs { display: flex; gap: 2px; background: rgba(255,255,255,.16); border-radius: 999px; padding: 3px; }
.jt-app .jtd-tabs button {
	border: 0 !important; background: none !important; padding: 6px 14px !important; border-radius: 999px !important; color: rgba(255,255,255,.82) !important;
	font-size: 13.5px !important; box-shadow: none !important; height: auto !important; cursor: pointer; white-space: nowrap;
}
.jt-app .jtd-tabs button[aria-pressed="true"] { background: #fff !important; color: var(--band) !important; font-weight: 600 !important; }
.jtd-empty { padding: 26px; border: 1px dashed var(--h-accent-line); border-radius: 16px; color: var(--h-mute); text-align: center; font-size: 14.5px; }
.jt-app .jtd-empty button { background: none !important; border: 0 !important; color: var(--h-accent) !important; font-weight: 600 !important; padding: 0 !important; cursor: pointer; text-decoration: underline; font-size: inherit !important; box-shadow: none !important; }

/* ── Kartu ── */
.jtd-card { position: relative; background: var(--h-surface); border: 1px solid var(--h-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; min-width: 0; }
.jtd-card h3 { font-size: 16.5px; line-height: 1.35; font-weight: 700; margin: 10px 0 0; color: var(--h-ink); text-wrap: balance; }
.jtd-card h3 a::after, .jtd-fd p a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.jtd-who { display: flex; align-items: center; gap: 10px; position: relative; z-index: 1; pointer-events: none; }
.jtd-who a { pointer-events: auto; }
.jtd-who div b { display: block; font-size: 14px; color: var(--h-accent-ink); font-weight: 600; line-height: 1.25; }
.jtd-who div span { display: block; font-size: 12.5px; color: var(--h-soft); line-height: 1.3; }
.jtd-ans { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--h-accent-bg); border: 1px solid var(--h-accent-line); }
.jtd-ans.ok { background: var(--h-ok-bg); border-color: var(--h-ok-line); }
.jtd-ans b { font-size: 12.5px; color: var(--h-accent-ink); } .jtd-ans.ok b { color: var(--h-ok-ink); }
.jtd-ans p { margin: 3px 0 0; font-size: 14px; line-height: 1.5; color: var(--h-ink2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jtd-noans { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: var(--h-warn-bg); border: 1px solid var(--h-warn-line); font-size: 13px; color: var(--h-warn-ink); }
.jtd-act { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 12px; color: var(--h-mute); font-size: 13px; }
.jtd-act span { display: inline-flex; align-items: center; gap: 5px; }
.jtd-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

/* Bantu jawab */
.jtd-help { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--h-warn-bg); border: 1px solid var(--h-warn-line); color: var(--h-warn-ink) !important; }
.jtd-help .ht { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jtd-help .ht b { font-size: 14.5px; } .jtd-help .ht span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.jtd-help .hm { display: inline-flex; align-items: center; font-weight: 600; font-size: 14px; white-space: nowrap; }

/* ── Gambar di dalam kartu (gaya media sosial: di bawah teks, lebar penuh) ── */
.jtd-cover { display: block; position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: var(--h-hair); margin-top: 12px; }
.jtd-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jtd-tag { display: inline-block; align-self: flex-start; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--c0-bg); color: var(--c0-fg); }

/* ── Forum: kartu media sosial, 2 kolom; kartu pertama selebar penuh ── */
.jtd-forum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.jtd-fr h3 a { color: var(--h-ink) !important; }
.jtd-fr .jtd-ex { margin: 6px 0 0; color: var(--h-ink2); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jtd-fr.is-feat { grid-column: 1 / -1; }
.jtd-fr.is-feat h3 { font-size: 19px; }
.jtd-fr.is-feat .jtd-cover { aspect-ratio: 21 / 9; }

/* ── Feed: masonry ── */
.jtd-masonry { column-count: 3; column-gap: 16px; }
.jtd-fd { break-inside: avoid; margin-bottom: 16px; }
.jtd-fd[hidden] { display: none; }
.jtd-fd p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--h-ink2); white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 900px) {
	.jtd-masonry { column-count: 2; }
}
@media (max-width: 700px) {
	.jtd-sections { gap: 28px; }
	.jtd-sec-head { padding: 12px 14px; border-radius: 16px; gap: 10px; }
	.jtd-ico { width: 38px; height: 38px; }
	.jtd-home .jtd-sec-head h2 { font-size: 20px; }
	.jtd-sec-head .tt { min-width: 0; }
	.jtd-tabs { width: 100%; overflow-x: auto; }
	.jtd-grid2, .jtd-forum { grid-template-columns: 1fr; }
	.jtd-masonry { column-count: 1; }
	.jtd-fr.is-feat .jtd-cover { aspect-ratio: 16 / 10; }
	.jtd-chips { margin-inline: -16px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: no-preference) {
	.jtd-card { transition: box-shadow .2s, transform .2s; }
	.jtd-card:hover { box-shadow: var(--h-shadow); transform: translateY(-1px); }
}

/* ── Filter kategori per bagian ── */
.jtd-filter { margin-bottom: 16px; }
.jtd-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.jt-app .jtd-chip {
	border: 1px solid var(--h-line) !important; background: var(--h-surface) !important; color: var(--h-ink2) !important;
	padding: 6px 14px !important; border-radius: 999px !important; font-size: 13.5px !important; height: auto !important;
	box-shadow: none !important; cursor: pointer; white-space: nowrap;
}
.jt-app .jtd-chip[aria-pressed="true"] { background: var(--h-accent-bg) !important; border-color: var(--h-accent) !important; color: var(--h-accent-ink) !important; font-weight: 600 !important; }
.jt-app .jtd-chip-more { border-style: dashed !important; border-color: var(--h-accent-line) !important; color: var(--h-accent) !important; font-weight: 600 !important; }
.jt-app .jtd-morebtn {
	display: block; margin: 16px auto 0 !important; background: var(--h-surface) !important; color: var(--h-accent-ink) !important;
	border: 1px solid var(--h-accent-line) !important; border-radius: 999px !important; padding: 9px 22px !important; font-size: 14px !important;
	font-weight: 600 !important; box-shadow: none !important; height: auto !important; cursor: pointer;
}

/* ── Lembar pilih kategori (ditempel ke <body>) ── */
html.jtd-lock { overflow: hidden; }
.jtd-sheet-wrap.jtd-home { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 16px; gap: 0; color: var(--h-ink); }
.jtd-sheet-back { position: absolute; inset: 0; background: rgba(15,22,40,.5); }
.jtd-sheet { position: relative; width: 100%; max-width: 520px; max-height: min(640px, 86vh); display: flex; flex-direction: column; background: var(--h-surface); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.3); overflow: hidden; }
.jtd-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 8px; }
.jtd-sheet-head h3 { font-family: var(--jtds-serif, Georgia, serif); font-size: 19px; margin: 0; }
.jtd-sheet-wrap button { font: inherit; cursor: pointer; }
.jtd-sheet-done { border: 0; background: var(--h-accent); color: var(--h-accent-fg); padding: 7px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.jtd-sheet-q { margin: 4px 18px 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--h-line); background: var(--h-hair); color: var(--h-ink); font: inherit; font-size: 15px; width: auto; }
.jtd-sheet-list { overflow-y: auto; padding: 0 10px 8px; flex: 1; }
.jtd-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 10px; border: 0; background: none; border-radius: 12px; color: var(--h-ink); text-align: left; font-size: 15px; }
.jtd-opt:hover { background: var(--h-hair); }
.jtd-opt .bx { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--h-accent-line); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--h-accent-fg); flex-shrink: 0; }
.jtd-opt[aria-pressed="true"] .bx { background: var(--h-accent); border-color: var(--h-accent); }
.jtd-opt .nm { flex: 1; min-width: 0; }
.jtd-opt .ct { color: var(--h-soft); font-size: 12.5px; }
.jtd-sheet-none { color: var(--h-mute); text-align: center; padding: 24px 0; margin: 0; }
.jtd-sheet-foot { padding: 8px 18px 14px; border-top: 1px solid var(--h-hair); text-align: center; }
.jtd-sheet-clear { border: 0; background: none; color: var(--h-accent); font-weight: 600; font-size: 14px; padding: 6px 10px; }
@media (max-width: 700px) {
	.jtd-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
	.jtd-chips::-webkit-scrollbar { display: none; }
	.jtd-sheet-wrap.jtd-home { align-items: flex-end; padding: 0; }
	.jtd-sheet { max-width: none; border-radius: 20px 20px 0 0; max-height: 88vh; }
}

/* ── Menuju halaman kategori ── */
.jtd-who a.jtd-spacelink { color: inherit; position: relative; z-index: 2; }
.jtd-who a.jtd-spacelink:hover { color: var(--h-accent); text-decoration: underline; }
.jt-app a.jtd-chip-go { background: var(--h-accent) !important; border-color: var(--h-accent) !important; color: var(--h-accent-fg) !important; font-weight: 600 !important; text-decoration: none !important; display: inline-block; }
.jtd-optrow { display: flex; align-items: center; }
.jtd-optrow .jtd-opt { flex: 1; width: auto; min-width: 0; }
.jtd-opt-go { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--h-accent); text-decoration: none; font-size: 17px; }
.jtd-opt-go:hover { background: var(--h-hair); }

/* Keadaan awal dirender server: sisipan ponsel disembunyikan sampai JS siap, supaya tidak ada lompatan tata letak. */
@media (max-width: 700px) { .jtd-home:not(.is-ready) .jtd-card.jtd-x { display: none; } }
.jtd-filter:not([hidden]) { min-height: 38px; }