/* KartuThic - tampilan publik */

:root {
	--kt-bg: #f6f7fb;
	--kt-surface: #ffffff;
	--kt-border: #e4e7ee;
	--kt-text: #13172a;
	--kt-muted: #646b82;
	--kt-accent: #2563eb;
	--kt-accent-dark: #1e3a8a;
	--kt-ok: #16a34a;
	--kt-warn: #d97706;
	--kt-bad: #dc2626;
	--kt-radius: 16px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--kt-bg: #0b0e16;
		--kt-surface: #141926;
		--kt-border: #262d40;
		--kt-text: #eef1f8;
		--kt-muted: #99a1b8;
	}
}

body.kt-verify {
	margin: 0;
	padding: 0;
	background: var(--kt-bg);
	color: var(--kt-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

.kt-wrap {
	max-width: 620px;
	margin: 0 auto;
	padding: 40px 16px 64px;
}

.kt-wrap--narrow { max-width: 480px; }

.kt-head { text-align: center; margin-bottom: 24px; }
.kt-logo { max-height: 52px; width: auto; margin: 0 auto 12px; display: block; }
.kt-org { margin: 0; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--kt-muted); }
.kt-head h1 { margin: 6px 0 0; font-size: 24px; line-height: 1.25; font-weight: 700; }

.kt-status {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-radius: 12px;
	border: 1px solid var(--kt-border);
	background: var(--kt-surface);
	font-size: 15px;
	margin-bottom: 24px;
}
.kt-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--kt-muted); }
.kt-status--active .kt-dot { background: var(--kt-ok); box-shadow: 0 0 0 4px rgba(22, 163, 74, .16); }
.kt-status--expired .kt-dot { background: var(--kt-warn); box-shadow: 0 0 0 4px rgba(217, 119, 6, .16); }
.kt-status--revoked .kt-dot { background: var(--kt-bad); box-shadow: 0 0 0 4px rgba(220, 38, 38, .16); }

.kt-card-img { margin-bottom: 26px; }
.kt-card-img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kt-radius);
	box-shadow: 0 18px 40px -18px rgba(10, 14, 30, .45);
}

.kt-details {
	margin: 0 0 26px;
	padding: 6px 18px;
	background: var(--kt-surface);
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius);
}
.kt-details > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--kt-border);
}
.kt-details > div:last-child { border-bottom: 0; }
.kt-details dt { margin: 0; color: var(--kt-muted); font-size: 14px; }
.kt-details dd { margin: 0; font-weight: 600; text-align: right; font-size: 15px; }
.kt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }

.kt-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.kt-btn {
	display: inline-block;
	padding: 12px 20px;
	border-radius: 10px;
	border: 1px solid var(--kt-border);
	background: var(--kt-surface);
	color: var(--kt-text);
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
}
.kt-btn:hover { border-color: var(--kt-accent); }
.kt-btn--primary {
	background: var(--kt-accent);
	border-color: var(--kt-accent);
	color: #fff;
}
.kt-btn--primary:hover { filter: brightness(1.08); }

.kt-renew { margin-top: 18px; }
.kt-note {
	margin-top: 24px;
	font-size: 14px;
	color: var(--kt-muted);
}
.kt-foot {
	margin-top: 32px;
	text-align: center;
	font-size: 13px;
	color: var(--kt-muted);
}
.kt-foot a { color: var(--kt-accent); }

/* ---------- Shortcode di member area ---------- */

.kt-member-card { max-width: 560px; }
.kt-member-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kt-radius);
	box-shadow: 0 18px 40px -18px rgba(10, 14, 30, .45);
}
.kt-member-card .kt-actions { margin-top: 16px; }
.kt-empty {
	padding: 22px;
	border: 1px dashed var(--kt-border);
	border-radius: var(--kt-radius);
	color: var(--kt-muted);
	font-size: 15px;
}
.kt-tiers { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kt-tier {
	border: 1px solid var(--kt-border);
	border-radius: var(--kt-radius);
	padding: 20px;
	background: var(--kt-surface);
}
.kt-tier h3 { margin: 0 0 6px; font-size: 18px; }
.kt-tier ul { margin: 12px 0 16px; padding-left: 18px; font-size: 14px; color: var(--kt-muted); }
.kt-tier .kt-badge {
	display: inline-block;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	color: #fff;
}

@media (max-width: 480px) {
	.kt-details > div { flex-direction: column; gap: 2px; }
	.kt-details dd { text-align: left; }
	.kt-actions .kt-btn { flex: 1 1 auto; text-align: center; }
}

.kt-empty-hint {
	display: block;
	margin: 10px 0 14px;
	font-size: 13px;
	line-height: 1.5;
}

.kt-owner {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 12px;
	border: 1px solid var(--kt-accent);
	background: color-mix(in srgb, var(--kt-accent) 10%, var(--kt-surface));
	font-size: 14px;
	line-height: 1.5;
}
.kt-owner-tag {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--kt-accent);
	color: #fff;
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
	.kt-owner { background: var(--kt-surface); }
}

/* ---------- Form klaim mandiri ---------- */

.kt-claim-form { max-width: 460px; }
.kt-field { display: block; margin-bottom: 14px; }
.kt-field > span {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--kt-muted);
}
.kt-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--kt-border);
	background: var(--kt-surface);
	color: var(--kt-text);
	font-size: 15px;
	font-family: inherit;
}
.kt-field input:focus {
	outline: none;
	border-color: var(--kt-accent);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, .16);
}
.kt-claim-form button { border: 0; cursor: pointer; font-family: inherit; }

/* ---------- Halaman validasi publik ---------- */

body.kt-validate {
	margin: 0;
	padding: 0;
	background: #faf8f4;
	color: #1c1b18;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-color-scheme: dark) {
	body.kt-validate { background: #12110f; color: #f0ece4; }
}

.kt-v-wrap {
	max-width: 620px;
	margin: 0 auto;
	padding: 48px 16px 56px;
}

.kt-v-head { text-align: center; margin-bottom: 30px; }
.kt-v-logo { max-height: 48px; width: auto; margin: 0 auto 14px; display: block; }
.kt-v-head h1 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.kt-v-kicker {
	margin: 8px 0 0;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #7d7668;
}

.kt-v-card {
	background: #fff;
	border-radius: 18px;
	padding: 42px 32px 36px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(28, 27, 24, .05), 0 12px 32px -18px rgba(28, 27, 24, .28);
}
@media (prefers-color-scheme: dark) {
	.kt-v-card { background: #1c1a17; box-shadow: none; border: 1px solid #2e2b25; }
}

.kt-v-badge {
	display: inline-block;
	margin: 0 0 22px;
	padding: 10px 28px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	color: #fff;
	background: #2f5d47;
}
.kt-v-badge--expired { background: #a6701c; }
.kt-v-badge--revoked { background: #9c2f2f; }
.kt-v-badge--pending { background: #6b6558; }

.kt-v-name {
	margin: 0 0 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 34px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.01em;
}

.kt-v-sub { margin: 0; font-size: 16px; color: #5d564a; }
@media (prefers-color-scheme: dark) { .kt-v-sub { color: #aba398; } }
.kt-v-sep { opacity: .45; margin: 0 4px; }

.kt-v-thumb {
	display: block;
	width: 100%;
	height: auto;
	margin: 26px auto 0;
	border-radius: 12px;
}

.kt-v-rule {
	border: 0;
	border-top: 1px solid #e8e2d7;
	margin: 30px 0 26px;
}
@media (prefers-color-scheme: dark) { .kt-v-rule { border-top-color: #2e2b25; } }

.kt-v-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px 24px;
	margin: 0;
	text-align: left;
}
.kt-v-grid dt {
	margin: 0 0 3px;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #8a8273;
}
.kt-v-grid dd { margin: 0; font-size: 16px; font-weight: 500; }

.kt-v-statement {
	margin: 30px 0 0;
	font-size: 15px;
	color: #5d564a;
}
@media (prefers-color-scheme: dark) { .kt-v-statement { color: #aba398; } }

.kt-v-note {
	margin-top: 22px;
	text-align: center;
	font-size: 14px;
	color: #7d7668;
}

.kt-v-foot {
	margin-top: 26px;
	text-align: center;
	font-size: 13px;
	color: #8a8273;
}
.kt-v-foot p { margin: 4px 0; }
.kt-v-foot a { color: inherit; }

@media (max-width: 480px) {
	.kt-v-card { padding: 34px 22px 30px; }
	.kt-v-name { font-size: 27px; }
	.kt-v-grid { grid-template-columns: 1fr; gap: 16px; }
}