/* Paroner — /ozellikler/ hub-scoped layout. Enqueued ONLY on the hub page, so the
   unprefixed .oz-* classes do not leak elsewhere. Reuses paroner-landing.css tokens. */

.oz-grid { display: grid; gap: 16px; }
.oz-cat-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.oz-feat-grid,
.oz-pain-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.oz-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line, #E6E8EF);
	border-radius: var(--r-md, 14px);
	padding: 20px;
	box-shadow: var(--shadow-sm, 0 2px 8px rgba(15, 23, 42, .06));
}
.oz-card h3 { font-size: 17px; margin: 0 0 6px; color: var(--ink, #0F172A); }
.oz-card p { font-size: 13.5px; color: var(--muted, #475569); margin: 0 0 14px; line-height: 1.5; }

.oz-cluster {
	font-size: 11px;
	color: var(--primary, #5B21B6);
	text-transform: uppercase;
	letter-spacing: .05em;
	font-weight: 700;
	margin-bottom: 8px;
}

.oz-link {
	margin-top: auto;
	font-weight: 600;
	color: var(--primary, #5B21B6);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.oz-link:hover { text-decoration: underline; }

.oz-cat-links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.oz-cat-links a { color: var(--ink, #0F172A); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.oz-cat-links a:hover { color: var(--primary, #5B21B6); }

a.oz-pain { transition: transform .15s ease, box-shadow .15s ease; }
a.oz-pain:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 8px 24px rgba(15, 23, 42, .08)); }

.oz-flow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.oz-flow .oz-step {
	background: var(--bg-tint, #FAF7FF);
	color: var(--primary-ink, #2E1065);
	border: 1px solid var(--line, #E6E8EF);
	border-radius: 999px;
	padding: 8px 14px;
	font-weight: 600;
	font-size: 14px;
}
.oz-flow span[aria-hidden] { color: var(--muted, #475569); font-weight: 700; }

.oz-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .oz-ba { grid-template-columns: 1fr; } }