/**
 * Madara Modern Comments — Stiller
 * ----------------------------------------------------------------------------
 * Madara'nın görsel diline uyacak şekilde yazıldı:
 *   - Ana renk için Madara'nın ürettiği  --madara-main-color  değişkeni kullanılır
 *     (Tema Ayarları > Custom Colors'tan gelen renk; otomatik uyum sağlar).
 *   - Border-radius, spacing Madara token'larıyla aynı (5px / daire avatar).
 *   - Madara'nın koyu teması  body.text-ui-light  sınıfıyla gelir (ters isim!),
 *     açık teması  body.text-ui-dark . İkisi için de optimize edildi.
 *
 * Hiçbir UIkit/ek framework gerektirmez. Sadece FontAwesome 5 (Madara'da yüklü).
 *
 * @version 1.0.0
 */

/* Yerel değişkenler — Madara ana rengine bağlanır, yedeği var */
#madara-comments,
.mmc-reactions {
	--mmc-accent: var(--madara-main-color, #eb3349);
	--mmc-radius: 8px;
	--mmc-radius-pill: 999px;
	--mmc-border: rgba(0, 0, 0, .08);
	--mmc-muted: #9aa0a6;
	--mmc-surface: #f6f7f9;
	--mmc-surface-hover: #eceef1;
	--mmc-text: inherit;
}

/* Koyu tema (Madara'da body.text-ui-light = dark) */
body.text-ui-light #madara-comments,
body.text-ui-light .mmc-reactions {
	--mmc-border: rgba(255, 255, 255, .10);
	--mmc-muted: #8b9096;
	--mmc-surface: rgba(255, 255, 255, .05);
	--mmc-surface-hover: rgba(255, 255, 255, .10);
}

/* ============================================================
 * YORUM AKSİYON ÇUBUĞU
 * ==========================================================*/
#madara-comments .mmc-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 10px;
}

/* Genel mmc butonu (like/dislike/reply/pin/replies) */
#madara-comments .mmc-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: none;
	background: transparent;
	color: var(--mmc-muted);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	padding: 7px 10px;
	margin: 0;
	border-radius: var(--mmc-radius-pill);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
#madara-comments .mmc-btn:hover {
	background: var(--mmc-surface-hover);
	color: var(--mmc-accent);
}
#madara-comments .mmc-btn i {
	font-size: 13px;
}
#madara-comments .mmc-btn.is-active {
	color: var(--mmc-accent);
}

/* Like / Dislike grubu */
#madara-comments .mmc-vote {
	display: inline-flex;
	align-items: center;
	background: var(--mmc-surface);
	border-radius: var(--mmc-radius-pill);
	padding: 0 2px;
}
#madara-comments .mmc-vote .mmc-btn:hover {
	background: transparent;
}
#madara-comments .mmc-like.is-active i { transform: translateY(-1px); }

/* Reply linki Madara default <div.reply> yerine inline geliyor */
#madara-comments .mmc-actions .mmc-reply-wrap a,
#madara-comments .mmc-actions a.comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--mmc-muted);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	padding: 7px 10px;
	border-radius: var(--mmc-radius-pill);
	transition: background-color .15s ease, color .15s ease;
}
#madara-comments .mmc-actions .mmc-reply-wrap a:hover,
#madara-comments .mmc-actions a.comment-reply-link:hover {
	background: var(--mmc-surface-hover);
	color: var(--mmc-accent);
}

/* Madara default sağ-üst reply kutusunu gizle (artık aksiyon çubuğunda) */
#madara-comments ol.comment-list li.comment article.comment-body div.reply {
	position: static;
}

/* Pin butonu */
#madara-comments .mmc-pin.is-pinned {
	color: var(--mmc-accent);
}
#madara-comments .mmc-pin.is-pinned i {
	transform: rotate(-30deg);
}

/* Toggle replies açık durumu */
#madara-comments .mmc-toggle-replies.is-open {
	color: var(--mmc-accent);
	background: var(--mmc-surface-hover);
}

/* ============================================================
 * SABİTLENMİŞ YORUM
 * ==========================================================*/
#madara-comments li.mmc-pinned > article.comment-body,
#madara-comments li.mmc-pinned > .mmc-comment-body {
	position: relative;
}
#madara-comments .mmc-pin-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	color: var(--mmc-accent);
	margin-bottom: 6px;
}
#madara-comments .mmc-pin-badge i { font-size: 10px; }

/* ============================================================
 * UZUN YORUM KIRPMA
 * ==========================================================*/
#madara-comments .mmc-content.mmc-clamp {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#madara-comments .mmc-toggle-clamp {
	border: none;
	background: none;
	color: var(--mmc-accent);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0;
	margin: 0;
}

/* Yorum meta saat ikonu Madara'da zaten var; emoji büyütme */
#madara-comments .mmc-content img.emoji,
#madara-comments .mmc-content img.wp-smiley {
	height: 1.2em;
	width: 1.2em;
	vertical-align: -0.2em;
	margin: 0 1px;
}

/* ============================================================
 * SIRALAMA ÇUBUĞU (comments.php içine eklenecek)
 * ==========================================================*/
.mmc-sortbar {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 22px;
	flex-wrap: wrap;
}
.mmc-sortbar .mmc-sort {
	border: none;
	background: var(--mmc-surface, #f6f7f9);
	color: var(--mmc-muted, #9aa0a6);
	font-size: 12px;
	font-weight: 700;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	margin: 0;
	transition: all .15s ease;
}
body.text-ui-light .mmc-sortbar .mmc-sort {
	background: rgba(255,255,255,.06);
}
.mmc-sortbar .mmc-sort:hover { color: var(--madara-main-color, #eb3349); }
.mmc-sortbar .mmc-sort.is-active {
	background: var(--madara-main-color, #eb3349);
	color: #fff;
}

/* ============================================================
 * EMOJI PICKER
 * ==========================================================*/
.mmc-comment-field-wrap {
	position: relative;
	display: block;
}
/* Madara'nın global buton stillerini emoji butonlarına uygulanmasını engelle */
.mmc-comment-field-wrap .mmc-emoji-trigger,
.mmc-emoji-panel .mmc-emoji-item {
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-transform: none;
	min-width: 0;
	width: auto;
	height: auto;
}
.mmc-emoji-trigger {
	position: absolute;
	right: 12px;
	bottom: 14px;
	z-index: 6;
	border: none;
	background: var(--mmc-surface, #f1f2f4);
	font-size: 19px;
	line-height: 1;
	cursor: pointer;
	padding: 5px 7px;
	margin: 0;
	border-radius: 8px;
	opacity: .85;
	transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
}
body.text-ui-light .mmc-emoji-trigger {
	background: rgba(255,255,255,.08);
}
.mmc-emoji-trigger:hover { opacity: 1; transform: scale(1.1); }

.mmc-emoji-panel {
	position: absolute;
	right: 0;
	bottom: 56px;
	z-index: 60;
	width: 300px;
	max-height: 260px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--mmc-border, rgba(0,0,0,.08));
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	padding: 10px 12px;
}
body.text-ui-light .mmc-emoji-panel {
	background: #1f2125;
	border-color: rgba(255,255,255,.12);
}
.mmc-emoji-cat-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--mmc-muted, #9aa0a6);
	margin: 8px 0 4px;
}
.mmc-emoji-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 2px;
}
.mmc-emoji-item {
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	padding: 5px 0;
	margin: 0;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color .12s ease, transform .12s ease;
}
.mmc-emoji-item:hover {
	background: var(--mmc-surface-hover, #eceef1);
	transform: scale(1.18);
}

/* ============================================================
 * TEPKİ KUTUSU — "Bölümü Nasıl Buldunuz?"
 * ==========================================================*/
.mmc-reactions {
	background: var(--mmc-surface, #f6f7f9);
	border: 1px solid var(--mmc-border, rgba(0,0,0,.08));
	border-radius: 14px;
	padding: 22px 18px 18px;
	margin: 30px 0;
	text-align: center;
}
body.text-ui-light .mmc-reactions {
	background: rgba(255,255,255,.04);
}
.mmc-reactions-title {
	font-size: 18px;
	font-weight: 800;
	margin-bottom: 4px;
	color: var(--mmc-text, inherit);
}
.mmc-reactions-total {
	font-size: 13px;
	color: var(--mmc-muted, #9aa0a6);
	margin-bottom: 18px;
}
.mmc-reactions-list {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
}
.mmc-rx {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 72px;
	border: 1px solid var(--mmc-border, rgba(0,0,0,.08));
	background: #fff;
	border-radius: 14px;
	padding: 10px 6px 8px;
	margin: 0;
	cursor: pointer;
	transition: transform .15s ease, border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
body.text-ui-light .mmc-rx {
	background: rgba(255,255,255,.05);
}
.mmc-rx:hover {
	transform: translateY(-3px);
	border-color: var(--madara-main-color, #eb3349);
	box-shadow: 0 8px 18px rgba(0,0,0,.10);
}
.mmc-rx .mmc-rx-emoji {
	font-size: 28px;
	line-height: 1;
	transition: transform .15s ease;
}
.mmc-rx:hover .mmc-rx-emoji { transform: scale(1.18); }
.mmc-rx .mmc-rx-label {
	font-size: 11px;
	font-weight: 700;
	color: var(--mmc-muted, #9aa0a6);
}
.mmc-rx .mmc-rx-count {
	font-size: 13px;
	font-weight: 800;
	color: var(--mmc-text, inherit);
}
/* Seçili tepki */
.mmc-rx.is-active {
	border-color: var(--madara-main-color, #eb3349);
	background: color-mix(in srgb, var(--madara-main-color, #eb3349) 12%, transparent);
}
.mmc-rx.is-active .mmc-rx-label,
.mmc-rx.is-active .mmc-rx-count {
	color: var(--madara-main-color, #eb3349);
}
/* color-mix desteklemeyen tarayıcılar için yedek */
@supports not (background: color-mix(in srgb, red, blue)) {
	.mmc-rx.is-active { background: rgba(235, 51, 73, .10); }
}

/* ============================================================
 * MOBİL
 * ==========================================================*/
@media (max-width: 600px) {
	.mmc-reactions-list { gap: 6px; }
	.mmc-rx { min-width: 60px; padding: 8px 4px 6px; }
	.mmc-rx .mmc-rx-emoji { font-size: 24px; }
	.mmc-emoji-panel { width: 260px; }
	.mmc-emoji-grid { grid-template-columns: repeat(7, 1fr); }
	#madara-comments .mmc-actions { gap: 2px; }
	#madara-comments .mmc-btn { padding: 6px 8px; font-size: 12px; }
}