:root {
	--bg: #f6f7f8;
	--panel: #ffffff;
	--ink: #12202b;
	--muted: #5f6b75;
	--brand: #234C6A;
	--accent: #1B3C53;
	--beige: #D2C1B6;
	--mid: #456882;
	--line: #e6e8ec;
	--ease: cubic-bezier(.22,.61,.36,1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--ink); }

.wrap { display: grid; grid-template-columns: 320px 1fr; min-height: 100vh; }

aside { background: linear-gradient(180deg, #eef2f6, #ffffff); border-right: 1px solid var(--line); padding: 20px 18px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.brand { font-weight: 700; font-size: 20px; margin-bottom: 18px; color: var(--accent); animation: softPulse 3s ease-in-out infinite; letter-spacing: .2px; }

.brand {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.brand.typing::after {
  content: "|";
  display: inline-block;
  margin-left: 4px;
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

.search input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #f9fafb; transition: all .3s var(--ease); }
.search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px rgba(35,76,106,0.18); }

.toc { list-style: none; margin: 20px 0 0; padding: 0; }
.toc a { display: block; padding: 10px 12px; margin-bottom: 4px; border-radius: 8px; color: var(--ink); text-decoration: none; transition: all .25s var(--ease); }
.toc a:hover { background: rgba(27,60,83,0.08); transform: translateX(3px); }
.toc a.active { background: rgba(35,76,106,0.16); color: var(--accent); font-weight: 600; border-left: 3px solid var(--mid); }

main { padding: 40px 50px; background: var(--bg); animation: fadeIn .6s var(--ease); display: flex; flex-direction: column; align-items: center; }

.crumb { color: var(--muted); font-size: 14px; margin-bottom: 10px; align-self: flex-start; }
h1 { font-size: 32px; margin-bottom: 20px; color: var(--accent); text-align: center; }

.page-title { padding-left: 33px; }

article { max-width: 900px; animation: fadeUp .6s var(--ease); }
.meta { display: flex; gap: 24px; color: var(--muted); font-size: 14px; margin-bottom: 16px; justify-content: center; }
.divider { height: 1px; background: var(--line); margin: 20px auto; width: 80%; }

.hero-wrapper { display: flex; justify-content: center; width: 100%; }

.hero { display: flex; justify-content: center; align-items: center; background: var(--panel); border-radius: 20px; padding: 32px; box-shadow: 0 12px 35px rgba(0,0,0,0.06); transition: all .4s var(--ease); border: 1px solid var(--line); gap: 48px; width: 100%; max-width: 900px; margin: 0 auto; }
.hero:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.08); }

.hero .copy { flex: 1; text-align: left; display: flex; flex-direction: column; justify-content: center; padding-left: 40px; }
.hero h2 { margin: 0 0 8px; font-size: 28px; color: var(--brand); }
.hero p { margin: 0; color: var(--muted); }

.hero .img { flex: 1; display: flex; justify-content: center; align-items: center; aspect-ratio: 16/9; border-radius: 14px; background: linear-gradient(135deg, var(--mid), var(--brand)); color: #e7ecf1; font-size: 13px; font-style: italic; border: 1px solid rgba(27,60,83,.25); max-width: 360px; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes softPulse { 0%,100% { opacity: 1; } 50% { opacity: .8; } }

/* paragraf justify */
article p {text-align: justify;}

@media (max-width: 920px) {
	.wrap { grid-template-columns: 1fr; }
	aside { position: static; height: auto; }
	main { padding: 24px; }
	.hero { flex-direction: column; gap: 24px; width: 100%; text-align: center; }
	.hero .copy { padding-left: 0; align-items: center; text-align: center; }
}

/* ========== SHAPE TABLE ========== */
.shape-wrap{max-width:950px;margin:28px auto 0;padding:0 4px}
.shape-table{
	width:100%; border-collapse:separate; border-spacing:0;
	background:var(--panel); color:var(--ink);
	border:1px solid var(--line); border-radius:14px; overflow:hidden;
	box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.shape-table thead th{
	background:linear-gradient(180deg, var(--accent), var(--brand));
	color:#fff; text-align:left; padding:14px 16px; font-weight:600; letter-spacing:.2px;
}
.shape-table tbody td, .shape-table tbody th{
	padding:14px 16px; vertical-align:top; border-top:1px solid var(--line);
}
.shape-table tbody th{ width:26%; color:var(--accent)}
.shape-table tbody tr:nth-child(even){ background:#fafbfc }
.shape-caption{
	font-weight:700; color:var(--accent); margin:0 0 10px; display:flex; gap:8px; align-items:center;
}
.shape-caption::before{content:'📘'}
.shape-note{ color:var(--muted); font-size:13px; text-align:right; margin:6px 0 0 }
@media (max-width: 720px){
	.shape-table thead{display:none}
	.shape-table, .shape-table tbody, .shape-table tr, .shape-table td, .shape-table th{display:block;width:100%}
	.shape-table tbody tr{border-top:1px solid var(--line)}
	.shape-table tbody th{background:#f4f6f8}
	.shape-table tbody td{padding-top:8px}
	.page-title { padding-left: 0; }
}

mark{
	background: var(--beige);
	color: var(--ink);
	padding: 0 2px;
	border-radius: 3px;
}