/* ==========================================================================
   Yorumlar & Sorular — Figma Comment/Form 10:4813, Comment/Item 10:4874, Comment/Staff Reply 10:4904.
   ========================================================================== */

.eg-comments { display: flex; flex-direction: column; gap: 28px; }
.eg-comments__head { display: flex; align-items: flex-start; gap: 16px; padding-top: 16px; }
.eg-comments__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--eg-color-brand-primary); color: #fff; }
.eg-comments__title { font: var(--eg-type-heading-h2); letter-spacing: var(--eg-tracking-h2); color: var(--eg-color-text-primary); }
.eg-comments__count { font-weight: 400; color: var(--eg-color-text-muted); }
.eg-comments__desc { margin-top: 6px; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }

.eg-comments__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.eg-comments__tabs { display: flex; gap: 10px; }
.eg-chip-filter { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid var(--eg-color-border-default); background: var(--eg-color-surface-default); font: var(--eg-type-label-md); color: var(--eg-color-text-primary); white-space: nowrap; transition: background-color var(--eg-motion-fast) var(--eg-ease); }
.eg-chip-filter:hover { background: var(--eg-color-surface-brand-soft); }
.eg-chip-filter.is-active { background: var(--eg-color-brand-primary); border-color: var(--eg-color-brand-primary); color: #fff; }
.eg-comments__sort { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font: var(--eg-type-label-sm); color: var(--eg-color-text-primary); }
.eg-comments__sort[data-eg-csort="oldest"] .eg-icon--chevron-down { transform: rotate(180deg); }
.eg-comments__notice { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--eg-color-surface-success-soft); color: #11663d; font: var(--eg-type-label-sm); }
.eg-comments__closed { font: var(--eg-type-body-sm); color: var(--eg-color-text-muted); }

/* --- Form ---------------------------------------------------------------- */
.eg-cform { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); border-radius: 16px; box-shadow: var(--eg-shadow-xs); }
.eg-cform__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.eg-cform__title { font: var(--eg-type-heading-h5); color: var(--eg-color-text-primary); }
.eg-cform__types { display: flex; gap: 8px; margin: 0; padding: 0; border: 0; }
.eg-type-pill { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--eg-color-border-default); background: var(--eg-color-surface-default); font: var(--eg-type-label-sm); color: var(--eg-color-text-secondary); cursor: pointer; }
.eg-type-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.eg-type-pill:has(input:checked) { background: var(--eg-color-surface-brand-soft); border-color: var(--eg-color-border-brand); color: var(--eg-color-brand-primary); }
.eg-type-pill:has(input:focus-visible) { box-shadow: var(--eg-focus-ring); }
.eg-cform__cancel { margin-left: auto; font: var(--eg-type-label-sm); }
.eg-cform__cancel a { color: var(--eg-color-status-danger); }
.eg-cform__as { font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); }
.eg-cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.eg-cform__field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.eg-cform__field > label { display: inline-flex; align-items: center; gap: 8px; font: var(--eg-type-label-sm); color: var(--eg-color-text-secondary); }
.eg-cform__field > label .eg-icon { color: var(--eg-color-text-secondary); }
.eg-req { color: var(--eg-color-status-danger); }
.eg-cform .eg-field { display: block; width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--eg-color-border-strong); border-radius: 10px; background: var(--eg-color-surface-default); font: var(--eg-type-body-sm); color: var(--eg-color-text-primary); transition: border-color var(--eg-motion-fast) var(--eg-ease), box-shadow var(--eg-motion-fast) var(--eg-ease); }
.eg-cform .eg-field--area { height: 120px; min-height: 120px; padding: 12px 16px; resize: vertical; }
.eg-cform .eg-field::placeholder { color: var(--eg-color-text-muted); }
.eg-cform .eg-field:focus { outline: none; border-color: var(--eg-color-border-focus); box-shadow: var(--eg-focus-ring); }
.eg-cform .eg-field[aria-invalid="true"] { border-color: var(--eg-color-status-danger); }
.eg-cform__note { font: var(--eg-type-body-xs); color: var(--eg-color-text-muted); }
.eg-cform__field .eg-counter { margin: -2px 0 0; }
.eg-cform__checks { display: flex; flex-direction: column; gap: 12px; }
.eg-check { position: relative; display: flex; align-items: center; gap: 10px; font: var(--eg-type-body-sm); color: var(--eg-color-text-secondary); cursor: pointer; }
.eg-check input { position: absolute; left: 0; top: 50%; width: 18px; height: 18px; margin: -9px 0 0; opacity: 0; cursor: pointer; }
.eg-check__box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--eg-color-border-strong); border-radius: 4px; background: var(--eg-color-surface-default); color: transparent; transition: background-color var(--eg-motion-fast) var(--eg-ease), border-color var(--eg-motion-fast) var(--eg-ease); }
.eg-check__box .eg-icon { stroke-width: 3; }
.eg-check input:checked + .eg-check__box { background: var(--eg-color-brand-primary); border-color: var(--eg-color-brand-primary); color: #fff; }
.eg-check input:focus-visible + .eg-check__box { box-shadow: var(--eg-focus-ring); }
.eg-check a { font-weight: 600; color: var(--eg-color-brand-primary); }
.eg-cform__error { padding: 10px 14px; border-radius: 10px; background: var(--eg-color-surface-danger-soft); color: #a8272c; font: var(--eg-type-body-sm); }
.eg-cform__foot { display: flex; align-items: center; gap: 16px; }
.eg-cform__mod { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-radius: 10px; background: var(--eg-color-surface-muted); font: var(--eg-type-body-xs); color: var(--eg-color-text-secondary); }
.eg-cform__mod .eg-icon { flex: none; }
.eg-cform__send { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 15px 40px; border-radius: 10px; background: var(--eg-color-brand-primary); color: #fff; font: var(--eg-type-ui-button); box-shadow: var(--eg-shadow-brand); transition: background-color var(--eg-motion-fast) var(--eg-ease); }
.eg-cform__send:hover { background: var(--eg-color-brand-primary-hover); }
/* Yanıt modunda form (comment-reply.js diziye taşır) */
.eg-comments__list .eg-cform-wrap { margin: 16px 0 4px; }
.eg-comments__list .eg-cform { box-shadow: none; }

/* --- Liste --------------------------------------------------------------- */
.eg-comments__list { display: flex; flex-direction: column; gap: 16px; }
.eg-comments__list > .eg-thread { padding: 20px; background: var(--eg-color-surface-default); border: 1px solid var(--eg-color-border-default); border-radius: 16px; box-shadow: var(--eg-shadow-xs); }
.eg-thread.is-filtered { display: none; }
.eg-comments__list .children { position: relative; display: flex; flex-direction: column; gap: 12px; margin: 16px 0 0; padding: 0 0 0 48px; list-style: none; }
.eg-comments__list .children::before { content: ""; position: absolute; left: 17px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--eg-color-border-default); }
.eg-comment { display: flex; align-items: flex-start; gap: 14px; }
.eg-comment__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; font: var(--eg-type-label-md); }
.eg-comment__avatar--sky { background: var(--eg-color-brand-sky); }
.eg-comment__avatar--brand { background: var(--eg-color-brand-primary); }
.eg-comment__avatar--muted { background: var(--eg-color-text-muted); }
img.eg-comment__avatar--brand { width: 30px; height: 30px; background: none; border-radius: 8px; }
.eg-comment__main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.eg-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.eg-comment__name { font: 700 15px/22px var(--eg-font-family); color: var(--eg-color-text-primary); }
.eg-comment__verified { display: inline-flex; color: var(--eg-color-brand-primary); margin-left: -2px; }
.eg-comment__date { font: var(--eg-type-body-xs); color: var(--eg-color-text-muted); }
.eg-comment__tag { display: inline-flex; padding: 3px 10px; border-radius: 999px; font: var(--eg-type-label-xs); letter-spacing: var(--eg-tracking-label-xs); }
.eg-comment__tag--soru { background: var(--eg-color-surface-danger-soft); color: var(--eg-color-status-danger); }
.eg-comment__tag--yorum { background: var(--eg-color-surface-brand-soft); color: var(--eg-color-brand-primary); }
.eg-comment__pending { padding: 8px 12px; border-radius: 8px; background: var(--eg-color-surface-warning-soft); font: var(--eg-type-body-xs); color: #8a5a00; }
.eg-comment__text { font: var(--eg-type-body-sm); color: var(--eg-color-text-primary); overflow-wrap: anywhere; }
.eg-comment__text p { margin: 0; }
.eg-comment__text p + p { margin-top: 6px; }
.eg-comment--staff .eg-comment__text p + p { margin-top: 0; }
.eg-comment__actions { display: flex; align-items: center; gap: 20px; }
.eg-comment__reply { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font: var(--eg-type-label-sm); color: var(--eg-color-brand-primary); }
.eg-comment--staff { gap: 12px; padding: 16px 20px 16px 18px; border-radius: 12px; background: var(--eg-color-background-subtle); }
.eg-comment--staff .eg-comment__head { gap: 8px; }
.eg-comment--staff .eg-comment__main { gap: 6px; }
.eg-comment--staff .eg-comment__text { color: var(--eg-color-text-secondary); }
.eg-comment--staff .eg-comment__actions { padding-top: 4px; }
.eg-comment--reply:not(.eg-comment--staff) .eg-comment__avatar { width: 30px; height: 30px; font-size: 13px; }
.eg-comments__empty { padding: 20px; text-align: center; font: var(--eg-type-body-sm); color: var(--eg-color-text-muted); }

.eg-comments__more { display: flex; justify-content: center; }
.eg-comments__more-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 14px 40px; border-radius: 10px; background: var(--eg-color-surface-brand-soft); font: var(--eg-type-label-sm); color: var(--eg-color-brand-primary); }
.eg-comments__more-btn:hover { background: #dce9ff; }
.eg-comments__more-btn.is-loading .eg-icon { animation: eg-spin 1s linear infinite; }

@media (max-width: 767px) {
	.eg-comments { gap: 32px; }
	.eg-comments__head { gap: 12px; padding-top: 8px; }
	.eg-comments__icon { width: 40px; height: 40px; }
	.eg-comments__title { font: var(--eg-type-mobile-h2); letter-spacing: var(--eg-tracking-mobile-h2); }
	.eg-comments__bar { flex-direction: column; align-items: flex-start; gap: 12px; }
	.eg-comments__tabs { max-width: calc(100% + var(--eg-gutter)); overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--eg-gutter)); padding-right: var(--eg-gutter); gap: 8px; }
	.eg-comments__tabs::-webkit-scrollbar { display: none; }
	.eg-comments__sort { min-height: 24px; }
	.eg-cform { padding: 18px; gap: 16px; }
	.eg-cform__head { flex-direction: column; align-items: flex-start; }
	.eg-cform__row { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.eg-check { align-items: flex-start; }
	.eg-check input { top: 2px; margin-top: 0; }
	.eg-check__box { margin-top: 2px; }
	.eg-cform__foot { flex-direction: column; align-items: stretch; gap: 12px; }
	.eg-cform__send { width: 100%; }
	.eg-comments__list > .eg-thread { padding: 16px; }
	.eg-comments__list .children { padding-left: 16px; margin-top: 14px; }
	.eg-comments__list .children::before { left: 4px; }
	.eg-comment { gap: 12px; }
	.eg-comment--staff { padding: 14px; }
	.eg-comments__more-btn { width: 100%; justify-content: center; }
}