/**
 * PP - Popular Posts Realtime — Modern Card Styling
 * Terinspirasi dari layout card "Terpopuler" (icon trending + list card besar).
 * Semua warna diatur lewat CSS variable di bawah ini — tinggal ganti kode HEX-nya.
 */

.ppr-widget {

	/* ====== GANTI WARNA DI SINI (kode HEX manual) ====== */
	--ppr-bg-card: #fdead9;        /* Background utama card, peach lembut seperti referensi */
	--ppr-accent: #ea4c2c;         /* Warna aksen: icon, kategori, garis atas */
	--ppr-text: #1a1a1a;           /* Warna judul artikel */
	--ppr-text-muted: #7a6f68;     /* Warna teks sekunder (tanggal, views) */
	--ppr-divider: #f0d3bd;        /* Warna garis pemisah antar item */
	--ppr-thumb-bg: #e9d3c0;       /* Background placeholder thumbnail */
	--ppr-hover-shadow: rgba(234, 76, 44, 0.14); /* Warna shadow saat hover */
	--ppr-radius-card: 20px;       /* Radius sudut card utama */
	--ppr-radius-thumb: 14px;      /* Radius sudut thumbnail */
	/* ===================================================== */

	font-family: inherit;
}

/* Card pembungkus utama */
.ppr-card {
	background: var(--ppr-bg-card);
	border-radius: var(--ppr-radius-card);
	padding: 24px 22px 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Header: icon trending + judul widget */
.ppr-card-header {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 18px;
	margin-bottom: 4px;
	border-bottom: 1.5px solid var(--ppr-divider);
}

.ppr-card-icon svg {
	display: block;
}

.ppr-card-icon {
	display: inline-flex;
	color: var(--ppr-accent);
	flex: 0 0 auto;
}

.ppr-card-title {
	font-size: 22px;
	font-weight: 800;
	color: var(--ppr-text);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* List */
.ppr-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ppr-item {
	border-bottom: 1.5px solid var(--ppr-divider);
}

.ppr-item-last {
	border-bottom: none;
}

.ppr-item-link {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 0;
	text-decoration: none;
	color: inherit;
	transition: transform 0.22s ease;
}

.ppr-item-link:hover {
	transform: translateX(3px);
}

.ppr-item-link:hover .ppr-title {
	color: var(--ppr-accent);
}

.ppr-item-link:hover .ppr-thumb {
	box-shadow: 0 8px 20px var(--ppr-hover-shadow);
}

.ppr-item-link:hover .ppr-thumb-img {
	transform: scale(1.07);
}

/* Thumbnail persegi besar, seperti referensi */
.ppr-thumb {
	position: relative;
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	border-radius: var(--ppr-radius-thumb);
	overflow: hidden;
	background: var(--ppr-thumb-bg);
	transition: box-shadow 0.25s ease;
}

.ppr-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.ppr-thumb-placeholder {
	width: 100%;
	height: 100%;
	display: block;
	background: linear-gradient(135deg, var(--ppr-thumb-bg), #d9bfa8);
}

/* Nomor peringkat kecil di pojok thumbnail (opsional, default nonaktif) */
.ppr-rank {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 2;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 800;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--ppr-accent);
}

/* Konten teks */
.ppr-content {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 2px;
}

.ppr-title {
	font-size: 17px;
	font-weight: 800;
	line-height: 1.35;
	color: var(--ppr-text);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s ease;
}

.ppr-excerpt {
	font-size: 13px;
	color: var(--ppr-text-muted);
	line-height: 1.45;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ppr-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 2px;
}

.ppr-category {
	font-size: 13px;
	font-weight: 700;
	color: var(--ppr-accent);
}

.ppr-views {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12.5px;
	color: var(--ppr-text-muted);
}

.ppr-icon-eye {
	flex: 0 0 auto;
	opacity: 0.8;
}

.ppr-date {
	font-size: 12.5px;
	color: var(--ppr-text-muted);
	white-space: nowrap;
}

.ppr-empty {
	font-size: 13px;
	color: var(--ppr-text-muted);
	font-style: italic;
	padding: 16px 0;
}

.ppr-shortcode-title {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 700;
}

/* Responsif untuk sidebar sempit / mobile */
@media (max-width: 480px) {
	.ppr-card {
		padding: 18px 16px 6px;
		border-radius: 16px;
	}
	.ppr-card-title {
		font-size: 19px;
	}
	.ppr-thumb {
		width: 78px;
		height: 78px;
	}
	.ppr-title {
		font-size: 15px;
	}
	.ppr-item-link {
		padding: 16px 0;
		gap: 12px;
	}
}

/* Dark mode (tema yang mendukung prefers-color-scheme) */
@media (prefers-color-scheme: dark) {
	.ppr-widget {
		--ppr-bg-card: #2a2320;
		--ppr-text: #f3ede8;
		--ppr-text-muted: #a89c93;
		--ppr-divider: #40342d;
		--ppr-thumb-bg: #3a2f29;
	}
}