/*
 * Sahah Addariyah — Laman Daftar Rekaman Suara
 * Palet brand hijau + emas + hitam. Dark/light via prefers-color-scheme,
 * bisa dipaksa ikut toggle tema lewat data-sahah-theme (theme-sync).
 */
.sahah-rekaman {
	--rk-bg: #0c0d0c;
	--rk-card: #14161a;
	--rk-text: #f3f3f0;
	--rk-muted: #a6a9a6;
	--rk-green: #2eb86a;
	--rk-green-deep: #1e8a4c;
	--rk-gold: #d4a530;
	--rk-border: rgba(255, 255, 255, 0.10);

	background: var(--rk-bg);
	color: var(--rk-text);
	min-height: 60vh;
}
@media (prefers-color-scheme: light) {
	.sahah-rekaman {
		--rk-bg: #faf9f5; --rk-card: #ffffff; --rk-text: #17181a; --rk-muted: #5c5f5c;
		--rk-green: #1e8a4c; --rk-green-deep: #157a41; --rk-gold: #b8891f;
		--rk-border: rgba(0, 0, 0, 0.10);
	}
}
.sahah-rekaman[data-sahah-theme="light"] {
	--rk-bg: #faf9f5; --rk-card: #ffffff; --rk-text: #17181a; --rk-muted: #5c5f5c;
	--rk-green: #1e8a4c; --rk-green-deep: #157a41; --rk-gold: #b8891f;
	--rk-border: rgba(0, 0, 0, 0.10);
}
.sahah-rekaman[data-sahah-theme="dark"] {
	--rk-bg: #0c0d0c; --rk-card: #14161a; --rk-text: #f3f3f0; --rk-muted: #a6a9a6;
	--rk-green: #2eb86a; --rk-green-deep: #1e8a4c; --rk-gold: #d4a530;
	--rk-border: rgba(255, 255, 255, 0.10);
}

.sahah-rekaman * { box-sizing: border-box; }

.sahah-rk-hero { padding: 70px 24px 24px; text-align: center; }
.sahah-rk-hero-inner { max-width: 680px; margin: 0 auto; }
.sahah-rk-eyebrow {
	display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--rk-green); margin-bottom: 10px;
}
.sahah-rk-h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin: 0 0 14px; line-height: 1.1; }
.sahah-rk-intro { color: var(--rk-muted); font-size: 1.03rem; line-height: 1.7; margin: 0; }

.sahah-rk-body { max-width: 1100px; margin: 0 auto; padding: 10px 24px 80px; }
.sahah-rk-empty {
	text-align: center; color: var(--rk-muted); padding: 40px 0;
	border: 1px dashed var(--rk-border); border-radius: 16px;
}

.sahah-rk-group { margin-top: 40px; }
.sahah-rk-fan {
	font-size: 1.35rem; margin: 0 0 16px; padding-bottom: 10px;
	border-bottom: 1px solid var(--rk-border); color: var(--rk-gold);
}

.sahah-rk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
}

.sahah-rk-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--rk-card);
	border: 1px solid var(--rk-border);
	border-radius: 16px;
	padding: 18px;
	text-decoration: none;
	color: var(--rk-text);
	transition: transform 0.2s ease, border-color 0.2s ease;
}
.sahah-rk-card:hover { transform: translateY(-4px); border-color: var(--rk-green); }

.sahah-rk-badge {
	align-self: flex-start;
	font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px;
}
.sahah-rk-badge.is-premium { background: rgba(212, 165, 48, 0.16); color: var(--rk-gold); }
.sahah-rk-badge.is-gratis  { background: rgba(46, 184, 106, 0.16); color: var(--rk-green); }

.sahah-rk-title { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
.sahah-rk-kitab { font-size: 0.9rem; color: var(--rk-muted); }
.sahah-rk-play { margin-top: 4px; font-size: 0.92rem; font-weight: 600; color: var(--rk-green); }

/* RTL */
.sahah-rekaman[dir="rtl"] .sahah-rk-badge { align-self: flex-end; }
.sahah-rekaman[dir="rtl"] .sahah-rk-fan { text-align: right; }