/* RK Compare — tampilan depan */

.rkcmp {
	--rkcmp-teks: #1b1f24;
	--rkcmp-samar: #6b7280;
	--rkcmp-garis: #e3e6ea;
	--rkcmp-kartu: #ffffff;
	--rkcmp-latar: #f7f8fa;
	--rkcmp-unggul: #0a7c2f;
	--rkcmp-unggul-bg: #eaf7ee;
	--rkcmp-kurang: #b42318;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rkcmp-teks);
	margin: 26px 0;
	box-sizing: border-box;
}

.rkcmp *, .rkcmp *::before, .rkcmp *::after { box-sizing: border-box; }

.rkcmp-tema-gelap {
	--rkcmp-teks: #f3f4f6;
	--rkcmp-samar: #9ca3af;
	--rkcmp-garis: #333941;
	--rkcmp-kartu: #1e2228;
	--rkcmp-latar: #171a1f;
	--rkcmp-unggul: #4ade80;
	--rkcmp-unggul-bg: #16301f;
	--rkcmp-kurang: #f87171;
}

.rkcmp .rkcmp-h2 {
	font-size: 23px;
	font-weight: 800;
	line-height: 1.3;
	margin: 30px 0 12px;
	color: var(--rkcmp-teks);
}

.rkcmp .rkcmp-h3 {
	font-size: 17px;
	font-weight: 700;
	margin: 18px 0 8px;
	color: var(--rkcmp-teks);
}

.rkcmp p { line-height: 1.7; margin: 0 0 14px; }

/* ---------- Kartu ringkas ---------- */
.rkcmp-ringkas {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: stretch;
	gap: 10px;
	margin-bottom: 8px;
}

.rkcmp-sisi {
	position: relative;
	background: var(--rkcmp-kartu);
	border: 1px solid var(--rkcmp-garis);
	border-radius: 14px;
	padding: 18px 14px 16px;
	text-align: center;
}

.rkcmp-sisi.rkcmp-juara {
	border-color: var(--rkcmp-unggul);
	box-shadow: 0 0 0 2px var(--rkcmp-unggul-bg);
}

.rkcmp-pita {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--rkcmp-unggul);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .4px;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

/*
 * Tinggi kotak foto dikunci, lebarnya mengikuti. Dengan cara ini gambar
 * potret (foto HP) dan lanskap (foto laptop) sama-sama tampil dengan tinggi
 * yang sama, jadi kedua kartu terlihat seimbang.
 *
 * Ukuran diatur lewat --rkcmp-foto-tinggi yang disuntik dari pengaturan.
 * Memakai max-width 150px seperti sebelumnya membuat foto HP yang ramping
 * tampak kerdil di tengah kartu yang lebar.
 */
.rkcmp-foto {
	margin-bottom: 12px;
	height: var(--rkcmp-foto-tinggi, 220px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.rkcmp .rkcmp-foto img {
	display: block !important;
	width: auto !important;
	max-width: 100% !important;
	height: 100% !important;
	max-height: var(--rkcmp-foto-tinggi, 220px) !important;
	margin: 0 auto !important;
	padding: 0 !important;
	border: none !important;
	float: none !important;
	object-fit: contain;
	border-radius: 10px;
}

.rkcmp-foto-kosong {
	font-size: calc(var(--rkcmp-foto-tinggi, 220px) * .32);
	line-height: 1;
	opacity: .3;
}

.rkcmp-nama {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.35;
	margin-bottom: 8px;
}

.rkcmp-skor strong {
	display: block;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--rkcmp-unggul);
}

.rkcmp-juara .rkcmp-skor strong { color: var(--rkcmp-unggul); }
.rkcmp-sisi:not(.rkcmp-juara) .rkcmp-skor strong { color: var(--rkcmp-samar); }

.rkcmp-skor span {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--rkcmp-samar);
}

.rkcmp-vs {
	align-self: center;
	font-size: 15px;
	font-weight: 800;
	color: var(--rkcmp-samar);
	padding: 0 4px;
}

.rkcmp-catatan-seri {
	text-align: center;
	font-size: 13px;
	color: var(--rkcmp-samar);
	margin: 10px 0 0;
}

/* ---------- Tabel ---------- */
.rkcmp-tabel-bungkus {
	overflow-x: auto;
	border: 1px solid var(--rkcmp-garis);
	border-radius: 12px;
	background: var(--rkcmp-kartu);
}

.rkcmp .rkcmp-tabel {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
	background: transparent;
}

.rkcmp .rkcmp-tabel th,
.rkcmp .rkcmp-tabel td {
	padding: 11px 14px;
	border: none;
	border-bottom: 1px solid var(--rkcmp-garis);
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
}

.rkcmp .rkcmp-tabel thead th {
	background: var(--rkcmp-latar);
	font-weight: 800;
	font-size: 14px;
	position: sticky;
	top: 0;
	z-index: 2;
}

.rkcmp .rkcmp-tabel tbody tr:last-child td,
.rkcmp .rkcmp-tabel tbody tr:last-child th { border-bottom: none; }

.rkcmp-baris-grup th {
	background: var(--rkcmp-latar) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--rkcmp-samar) !important;
	padding: 8px 14px !important;
}

.rkcmp-kol-label {
	color: var(--rkcmp-samar);
	font-weight: 600;
	width: 30%;
	min-width: 140px;
}

.rkcmp-nilai { width: 35%; }

.rkcmp-nilai.rkcmp-unggul,
.rkcmp-baris-total td.rkcmp-unggul {
	background: var(--rkcmp-unggul-bg);
	color: var(--rkcmp-unggul);
	font-weight: 700;
}

.rkcmp-centang {
	display: inline-block;
	margin-right: 5px;
	font-weight: 800;
}

.rkcmp-seri {
	display: inline-block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
	background: var(--rkcmp-latar);
	color: var(--rkcmp-samar);
	border: 1px solid var(--rkcmp-garis);
	border-radius: 999px;
	padding: 1px 7px;
	margin-left: 6px;
	vertical-align: middle;
}

.rkcmp-baris-total th,
.rkcmp-baris-total td {
	background: var(--rkcmp-latar);
	font-size: 15px;
	border-top: 2px solid var(--rkcmp-garis);
}

.rkcmp-sumber {
	font-size: 12px;
	color: var(--rkcmp-samar);
	margin: 8px 0 0;
}

/* ---------- Daftar isi ---------- */
.rkcmp-toc {
	background: var(--rkcmp-latar);
	border: 1px solid var(--rkcmp-garis);
	border-radius: 12px;
	padding: 14px 18px;
	margin: 26px 0 20px;
}

.rkcmp-toc-judul {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--rkcmp-samar);
	margin-bottom: 8px;
}

.rkcmp .rkcmp-toc ol { margin: 0; padding-left: 20px; }
.rkcmp .rkcmp-toc li { margin: 4px 0; line-height: 1.5; }
.rkcmp .rkcmp-toc a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rkcmp-garis); }
.rkcmp .rkcmp-toc a:hover { border-bottom-color: currentColor; }

.rkcmp-pembuka { font-size: 16px; }

/* ---------- Kelebihan & kekurangan ---------- */
.rkcmp-pc {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 8px;
}

.rkcmp-pc-kartu {
	background: var(--rkcmp-kartu);
	border: 1px solid var(--rkcmp-garis);
	border-radius: 12px;
	padding: 16px 18px;
}

.rkcmp-pc-kartu .rkcmp-h3 { margin-top: 0; }

.rkcmp-pc-judul {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin: 12px 0 6px;
}

.rkcmp-pros .rkcmp-pc-judul { color: var(--rkcmp-unggul); }
.rkcmp-cons .rkcmp-pc-judul { color: var(--rkcmp-kurang); }

.rkcmp .rkcmp-pc-kartu ul { margin: 0; padding: 0; list-style: none; }

.rkcmp .rkcmp-pc-kartu li {
	position: relative;
	padding-left: 20px;
	margin: 5px 0;
	font-size: 13.5px;
	line-height: 1.55;
}

.rkcmp .rkcmp-pros li::before {
	content: "+";
	position: absolute;
	left: 2px;
	font-weight: 800;
	color: var(--rkcmp-unggul);
}

.rkcmp .rkcmp-cons li::before {
	content: "–";
	position: absolute;
	left: 2px;
	font-weight: 800;
	color: var(--rkcmp-kurang);
}

/* ---------- Kesimpulan ---------- */
.rkcmp-kesimpulan {
	background: var(--rkcmp-latar);
	border-left: 4px solid var(--rkcmp-unggul);
	border-radius: 0 10px 10px 0;
	padding: 16px 20px;
}

.rkcmp-kesimpulan p:last-child { margin-bottom: 0; }

/* ---------- Layar kecil ---------- */
@media (max-width: 680px) {
	.rkcmp-pc { grid-template-columns: minmax(0, 1fr); }
	.rkcmp .rkcmp-h2 { font-size: 20px; }
	.rkcmp .rkcmp-tabel { font-size: 13px; }
	.rkcmp .rkcmp-tabel th,
	.rkcmp .rkcmp-tabel td { padding: 9px 10px; }
	.rkcmp-kol-label { min-width: 110px; }
	.rkcmp-foto { height: calc(var(--rkcmp-foto-tinggi, 220px) * .62); }
	.rkcmp .rkcmp-foto img { max-height: calc(var(--rkcmp-foto-tinggi, 220px) * .62) !important; }
	.rkcmp-skor strong { font-size: 24px; }
	.rkcmp-ringkas { gap: 6px; }
	.rkcmp-sisi { padding: 16px 8px 14px; }
	.rkcmp-nama { font-size: 13.5px; }
}