/* ============================================================
 * COMMENTS — anime/bolum yorum sistemi
 * Tasarim: AnimeWorld TR / Animeunity tarzi taban
 * ============================================================ */

/* BÖLÜMLER kutusu (.ep-grid-box) ile bire bir ayni cerceve */
.cz-comments {
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 5px;
    overflow: hidden;
    margin: 18px 0 24px;
    font-family: 'Fira Sans', system-ui, sans-serif;
}

/* Head: BÖLÜMLER tab striki gibi — flush ust + gri alt cizgi */
.cz-comments-head {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 14px;
    border-bottom: 1px solid #e3e6ee;
    flex-wrap: wrap;
}
.cz-comments-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1 1 auto;
    flex-wrap: wrap;
}
/* YORUMLAR baslik — sabit, alti cizgisiz */
.cz-c-title {
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #165fa7;
    padding: 11px 0 9px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    user-select: none;
}

/* Aktif tabda mavi alt cizgi — Anime / Bolum / Kurallar arasinda kayar */
.cz-c-tab {
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 11px 0 9px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #9aa3b2;
    cursor: pointer;
    user-select: none;
    transition: color .15s, border-color .15s;
}
.cz-c-tab.is-active {
    color: #165fa7;
    border-bottom-color: #165fa7;
}
.cz-c-tab:not(.is-active):hover { color: #165fa7; }

.cz-c-expand {
    background: #165fa7;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
    margin-left: auto;
}
.cz-c-expand:hover { background: #0d47a1; }

/* ---- Panes ---- */
.cz-c-pane { display: none; padding: 14px 14px 18px; }
.cz-c-pane.is-active { display: block; }

/* ---- Form ---- */
.cz-c-form { margin-bottom: 18px; }
.cz-c-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.cz-c-form-row .cz-c-bg-label {
    margin-left: auto;
    font-size: 13px;
    color: #6b7785;
}
.cz-c-bg-select select {
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    background: #fff;
    padding: 5px 8px;
    font-size: 13px;
    min-width: 130px;
    cursor: pointer;
}

/* ---- Custom bg dropdown (search + groups) ---- */
.cz-c-bg-select { position: relative; }
.cz-c-bg-dd {
    position: relative;
    display: inline-block;
    min-width: 180px;
}
.cz-c-bg-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    background: #fff;
    padding: 6px 10px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.cz-c-bg-trigger:hover { border-color: #6ea1ff; }
.cz-c-bg-dd.is-open .cz-c-bg-trigger {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .18);
}
.cz-c-bg-trigger-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cz-c-bg-trigger-caret {
    color: #98a3b3;
    font-size: 11px;
    transition: transform .15s;
}
.cz-c-bg-dd.is-open .cz-c-bg-trigger-caret { transform: rotate(180deg); color: #1976d2; }

.cz-c-bg-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 50;
    width: 240px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
    display: none;
    flex-direction: column;
    overflow: hidden;
}
.cz-c-bg-dd.is-open .cz-c-bg-panel { display: flex; }

.cz-c-bg-search-wrap {
    position: relative;
    padding: 8px;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
}
.cz-c-bg-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a3b3;
    font-size: 12px;
    pointer-events: none;
}
.cz-c-bg-search {
    width: 100%;
    padding: 6px 10px 6px 28px;
    border: 1px solid #1976d2;
    border-radius: 4px;
    font-size: 13px;
    color: #1f2937;
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .12);
}
.cz-c-bg-search::placeholder { color: #98a3b3; }

.cz-c-bg-options {
    max-height: 260px;
    overflow-y: auto;
    padding: 4px 0 6px;
}

/* Mavi scrollbar — referans gorseldeki stil */
.cz-c-bg-options { scrollbar-width: thin; scrollbar-color: #1976d2 #e7eef9; }
.cz-c-bg-options::-webkit-scrollbar { width: 10px; }
.cz-c-bg-options::-webkit-scrollbar-track {
    background: #e7eef9;
    border-radius: 0;
}
.cz-c-bg-options::-webkit-scrollbar-thumb {
    background: #1976d2;
    border-radius: 0;
    border: 2px solid #e7eef9;
    background-clip: padding-box;
}
.cz-c-bg-options::-webkit-scrollbar-thumb:hover { background: #155fae; background-clip: padding-box; border: 2px solid #e7eef9; }

.cz-c-bg-group { padding: 2px 0 4px; }
.cz-c-bg-group-title {
    padding: 8px 12px 4px;
    font-size: 12px;
    font-weight: 700;
    color: #6b7785;
    text-transform: none;
    letter-spacing: 0;
}
.cz-c-bg-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 12px 6px 24px;
    font-size: 13px;
    color: #1976d2;
    cursor: pointer;
    line-height: 1.4;
    transition: background .12s, color .12s;
}
.cz-c-bg-option:hover { background: #e7eef9; color: #155fae; }
.cz-c-bg-option[aria-selected="true"] {
    background: #1976d2;
    color: #fff;
}
.cz-c-bg-option[aria-selected="true"]:hover { background: #155fae; }
.cz-c-bg-empty {
    padding: 14px 12px;
    font-size: 13px;
    color: #98a3b3;
    text-align: center;
}

/* ---- Textarea + bg ----
 * Wrap = arka plan resmi (cover, zoomlu)
 * Card = icindeki beyaz kutu, sol-asagi ve sag-ustte bg gorunsun diye offset'li
 */
.cz-c-textarea-wrap {
    position: relative;
    background: #f4f6fb;
    border-radius: 6px;
    overflow: hidden;
    min-height: 170px;             /* wrap dis boyutu degismedi */
    /* Wrap ayni boyutta; ic kart sol/sag/alt yonlerine genisledi (top ayni) */
    padding: 12px 170px 8px 12px;
    transition: padding .2s;
}
.cz-c-textarea-wrap[data-bg="none"] {
    padding: 0;
    background: #f4f6fb;
    border: 1px solid #cfd6e0;
}
.cz-c-textarea-card {
    position: relative;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    overflow: hidden;
    transition: border-color .15s;
}
.cz-c-textarea-card:focus-within { border-color: #4974c2; }
.cz-c-textarea-wrap[data-bg="none"] .cz-c-textarea-card {
    border: 0;
    box-shadow: none;
}

.cz-c-textarea {
    width: 100%;
    min-height: 130px;
    padding: 12px 44px 12px 14px;
    border: 0;
    background: transparent;
    resize: vertical;
    font-family: inherit;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    display: block;
}
.cz-c-textarea::placeholder { color: #98a3b3; }

.cz-c-emoji {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    color: #98a3b3;
    cursor: pointer;
    font-size: 18px;
    transition: color .15s;
}
.cz-c-emoji:hover { color: #4974c2; }

/* Karakter arka planlari (compose alaninda) — sag tarafta gercek karakter PNG'si */
.cz-c-bg-image { display: none; }

.cz-c-textarea-wrap[data-bg]:not([data-bg="none"]) {
    background-repeat: no-repeat;
    background-position: calc(100% + 130px) center;  /* karakter daha saga, biraz disari taskin */
    background-size: cover;                           /* full karakter resmi, zoomlu */
    border: 0;
}
/* Adventure Time */
.cz-c-textarea-wrap[data-bg="finn"]      { background-image: url('/img/finnbackgorund.png'); }
.cz-c-textarea-wrap[data-bg="jake"]      { background-image: url('/img/jakebackground.png'); }
.cz-c-textarea-wrap[data-bg="marceline"] { background-image: url('/img/marcelinebackground.png'); }
.cz-c-textarea-wrap[data-bg="bubblegum"] { background-image: url('/img/bublegumbackground.png'); }
/* Gumball */
.cz-c-textarea-wrap[data-bg="gumball"]   { background-image: url('/img/gumballbackground.png'); }
.cz-c-textarea-wrap[data-bg="darwin"]    { background-image: url('/img/darwinbackground.png'); }

/* Ad + submit yan yana, ikisi de dar */
.cz-c-form-row--actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}
.cz-c-name {
    flex: 0 0 auto;
    width: 170px;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
}
.cz-c-name:focus { border-color: #165fa7; }

/* Giriş yapan kullanıcı için: ad inputu yerine küçük "şu hesapla yazılıyor" rozeti */
.cz-c-asuser {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #555;
    background: #f4f7fb;
    border: 1px solid #e0e6ef;
    border-radius: 4px;
    padding: 8px 12px;
    line-height: 1.2;
}
.cz-c-asuser i { color: #2c8c5b; font-size: 13px; }
.cz-c-asuser strong { color: #165fa7; font-weight: 700; }
.cz-c-asuser-label { color: #6b7480; }
body.dark-mode .cz-c-asuser {
    background: #131a23; color: #c2cad6; border-color: #2c3744;
}
body.dark-mode .cz-c-asuser-label { color: #8a95a3; }
body.dark-mode .cz-c-asuser strong { color: #6ea6e8; }

.cz-c-submit {
    flex: 0 0 auto;
    width: 170px;
    background: #165fa7;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}
.cz-c-submit:hover { background: #0d47a1; }
.cz-c-submit:disabled { background: #98a3b3; cursor: not-allowed; }
.cz-c-submit i { margin-right: 6px; }

.cz-c-status {
    margin-top: 6px;
    min-height: 18px;
    font-size: 13px;
}
.cz-c-status.is-error { color: #c0392b; }
.cz-c-status.is-ok    { color: #2c8c5b; }

/* ---- Yorum yasagi banneri (admin tarafindan konuldugunda formun yerine cikar) ---- */
.cz-c-banned {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    padding: 16px 18px;
    background: #fdecea;
    border: 1px solid #f5c6cb;
    border-radius: 6px;
    color: #721c24;
}
.cz-c-banned > i {
    flex: 0 0 auto;
    font-size: 28px;
    color: #c0392b;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(192, 57, 43, .14);
    border-radius: 50%;
}
.cz-c-banned-text { flex: 1 1 auto; }
.cz-c-banned-text h4 {
    margin: 0 0 2px;
    font-size: 15px;
    font-weight: 700;
    color: #8b1a1a;
}
.cz-c-banned-text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #7a1f1f;
}
.cz-c-banned-text strong { color: #5a1212; }
body.dark-mode .cz-c-banned {
    background: rgba(192, 57, 43, .14);
    border-color: rgba(192, 57, 43, .35);
    color: #f0c8c4;
}
body.dark-mode .cz-c-banned-text h4     { color: #f6c1bd; }
body.dark-mode .cz-c-banned-text p      { color: #ecbab6; }
body.dark-mode .cz-c-banned-text strong { color: #fff; }

/* ---- Sıralama / filtre kontrolleri (Yorum Yap altinda, saga yasli) ---- */
.cz-c-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0;
    flex-wrap: wrap;
}
.cz-c-controls select {
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    background: #fff;
    padding: 5px 8px;
    font-size: 12.5px;
    color: #1f2937;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.cz-c-controls select:hover { border-color: #6ea1ff; }
.cz-c-controls select:focus {
    border-color: #1976d2;
    box-shadow: 0 0 0 3px rgba(25, 118, 210, .18);
}

.cz-c-ctrl-apply,
.cz-c-ctrl-reset {
    border: 0;
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.cz-c-ctrl-apply         { background: #165fa7; }
.cz-c-ctrl-apply:hover   { background: #0d47a1; }
.cz-c-ctrl-apply:active  { transform: translateY(1px); }
.cz-c-ctrl-reset         { background: #98a3b3; }
.cz-c-ctrl-reset:hover   { background: #6b7785; }
.cz-c-ctrl-reset:active  { transform: translateY(1px); }
.cz-c-ctrl-apply i,
.cz-c-ctrl-reset i { font-size: 12px; }

body.dark-mode .cz-c-controls select {
    background: #131a23; color: #d7dde6; border-color: #2c3744;
}
body.dark-mode .cz-c-controls select:hover { border-color: #6ea1ff; }
body.dark-mode .cz-c-controls select:focus {
    border-color: #6ea1ff;
    box-shadow: 0 0 0 3px rgba(110, 161, 255, .22);
}

/* ---- Liste ---- */
.cz-c-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cz-c-empty {
    padding: 24px;
    text-align: center;
    color: #98a3b3;
    font-style: italic;
}

/* Tek yorum karti — yazma kutusunun ayni yapisi: bg image + ic beyaz kart */
.cz-comment {
    position: relative;
    background: #f4f6fb;
    border-radius: 6px;
    overflow: hidden;
    min-height: 170px;
    padding: 12px 170px 8px 12px;
    display: flex;                  /* ic kart wrap yuksekligini doldursun */
    flex-direction: column;
}
.cz-comment[data-bg]:not([data-bg=""]):not([data-bg="none"]) {
    background-repeat: no-repeat;
    background-position: calc(100% + 130px) center;
    background-size: cover;
}
/* Adventure Time */
.cz-comment[data-bg="finn"]      { background-image: url('/img/finnbackgorund.png'); }
.cz-comment[data-bg="jake"]      { background-image: url('/img/jakebackground.png'); }
.cz-comment[data-bg="marceline"] { background-image: url('/img/marcelinebackground.png'); }
.cz-comment[data-bg="bubblegum"] { background-image: url('/img/bublegumbackground.png'); }
/* Gumball */
.cz-comment[data-bg="gumball"]   { background-image: url('/img/gumballbackground.png'); }
.cz-comment[data-bg="darwin"]    { background-image: url('/img/darwinbackground.png'); }

/* Ic beyaz kart — textarea-card ile ayni stil */
.cz-c-card {
    position: relative;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    padding: 12px 14px;
    min-width: 0;
    flex: 1 1 auto;                 /* wrap icindeki kalan dikey alani doldur */
}

.cz-c-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 4px;
}
.cz-c-avatar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}
.cz-c-avatar img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #cfd6e0;
}
.cz-c-author {
    flex: 1 1 auto;
    font-weight: 400;
    color: #165fa7;
    font-size: 14px;
    letter-spacing: .2px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cz-c-author-link {
    color: inherit;
    text-decoration: none;
    transition: color .15s;
}
.cz-c-author-link:hover { color: #0d47a1; text-decoration: underline; }
.cz-c-avatar-link { display: block; line-height: 0; }
body.dark-mode .cz-c-author-link:hover { color: #9ec3ff; }
.cz-c-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cz-c-like {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    padding: 3px 8px;
    color: #165fa7;
    cursor: pointer;
    font-size: 13px;
    transition: background .15s, color .15s;
}
.cz-c-like:hover { background: #f4f6fb; }
.cz-c-like[data-liked="1"] {
    background: #fde4e4;
    border-color: #f5b7b7;
    color: #c0392b;
}
.cz-c-like[data-liked="1"] i { font-weight: 900; }
.cz-c-like[data-liked="1"] i::before { content: '\f004'; } /* solid heart */

.cz-c-report,
.cz-c-edit,
.cz-c-delete,
.cz-c-edit-save,
.cz-c-edit-cancel {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    padding: 3px 4px;
    transition: color .15s, transform .15s;
}
.cz-c-report       { color: #f0a020; }
.cz-c-report:hover { color: #c0392b; transform: scale(1.1); }
.cz-c-edit         { color: #165fa7; }
.cz-c-edit:hover   { color: #0d4787; transform: scale(1.1); }
.cz-c-delete       { color: #c0392b; }
.cz-c-delete:hover { color: #8b1a1a; transform: scale(1.1); }
.cz-c-edit-save    { color: #2c8c5b; font-size: 16px; }
.cz-c-edit-save:hover   { color: #1f6a44; transform: scale(1.15); }
.cz-c-edit-cancel  { color: #c0392b; font-size: 16px; }
.cz-c-edit-cancel:hover { color: #8b1a1a; transform: scale(1.15); }

/* Mine vs others: edit/delete only on mine; report only on others */
.cz-c-edit, .cz-c-delete, .cz-c-edit-save, .cz-c-edit-cancel { display: none; }
.cz-comment.is-mine .cz-c-report { display: none; }
.cz-comment.is-mine .cz-c-edit,
.cz-comment.is-mine .cz-c-delete { display: inline-flex; align-items: center; }

/* Edit mode: hide edit/delete, show save/cancel */
.cz-comment.is-mine.is-editing .cz-c-edit,
.cz-comment.is-mine.is-editing .cz-c-delete { display: none; }
.cz-comment.is-mine.is-editing .cz-c-edit-save,
.cz-comment.is-mine.is-editing .cz-c-edit-cancel { display: inline-flex; align-items: center; }

/* Edit textarea */
.cz-c-edit-textarea {
    width: 100%;
    min-height: 70px;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    background: rgba(255,255,255,.85);
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    padding: 8px 10px;
    resize: vertical;
    outline: none;
}
.cz-c-edit-textarea:focus { border-color: #165fa7; box-shadow: 0 0 0 2px rgba(22,95,167,.18); }
body.dark-mode .cz-c-edit-textarea {
    background: rgba(15,23,32,.6);
    border-color: #2c3744;
    color: #e8eef6;
}

/* Delete fade-out */
.cz-comment.is-removing {
    transition: opacity .25s ease, transform .25s ease;
    opacity: 0;
    transform: translateX(-12px);
    pointer-events: none;
}

/* Yorum sahibinin puan rozeti — actions satirinda begeni tusunun solunda yer alir.
 * Renk skalasi: 8-10 yesil, 6-7 turuncu, 1-5 kirmizi. */
.cz-c-score {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    background: #98a3b3;
    white-space: nowrap;
}
.cz-c-score[hidden] { display: none; }
.cz-c-score i { font-size: 11px; opacity: .95; }
.cz-c-score-max { font-weight: 600; opacity: .9; }
.cz-c-score.score-good { background: #2c8c5b; }
.cz-c-score.score-mid  { background: #f08c2e; }
.cz-c-score.score-bad  { background: #c0392b; }

.cz-c-date {
    color: #6b7785;
    font-size: 12px;
    text-align: right;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e3e6ee;
}
.cz-c-text {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* .cz-c-thumb artik kullanilmiyor (yorum kartinda bg dogrudan .cz-comment'te) */

/* Yorumlar arasi bosluk */
.cz-c-list { gap: 14px; }

/* Posted (yeni eklenen) animasyon */
.cz-comment.is-new {
    animation: cz-c-fade-in .35s ease-out;
}
@keyframes cz-c-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Kurallar ---- */
.cz-c-rules { padding: 4px 4px 6px; }
.cz-c-rules-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cz-c-rules-list > li {
    position: relative;
    padding: 14px 4px 14px 26px;
    border-bottom: 1px solid #e3e6ee;
}
.cz-c-rules-list > li:last-child { border-bottom: 0; }
.cz-c-rules-list > li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 20px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 2px solid #f0a020;
    background: transparent;
}
.cz-c-rules-list h5 {
    margin: 0 0 6px;
    color: #f0a020;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.cz-c-rules-list p {
    margin: 0 0 6px;
    color: #4a5360;
    font-size: 13.5px;
    line-height: 1.6;
}
.cz-c-rules-list p:last-child { margin-bottom: 0; }
.cz-c-rules-list strong { color: #1f2937; font-weight: 700; }

/* Genisletme — JS height sinirini uygular; defaultta scroll'lu.
 * Scrollbar stili main.css'teki global mavi ::-webkit-scrollbar kuralindan gelir. */
.cz-comments .cz-c-list { overflow-y: auto; }

/* ---- Toast bildirim (like / unlike) ---- */
.cz-c-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    min-width: 260px;
    max-width: 340px;
    background: #fff;
    border: 1px solid #e0e3ec;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    overflow: hidden;
    z-index: 9999;
    transform: translateY(140%);
    opacity: 0;
    transition: transform .35s ease-out, opacity .35s ease-out;
    font-family: 'Fira Sans', system-ui, sans-serif;
}
.cz-c-toast.is-show { transform: translateY(0); opacity: 1; }
.cz-c-toast.is-hide { transform: translateY(140%); opacity: 0; }
.cz-c-toast-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    color: #1f2937;
    font-size: 13.5px;
}
.cz-c-toast-row i { font-size: 18px; color: #c0392b; }
.cz-c-toast.is-unlike  .cz-c-toast-row i { color: #98a3b3; }
.cz-c-toast.is-success .cz-c-toast-row i { color: #2c8c5b; }
.cz-c-toast.is-delete  .cz-c-toast-row i { color: #c0392b; }
.cz-c-toast.is-info    .cz-c-toast-row i { color: #165fa7; }
.cz-c-toast.is-vote-on  .cz-c-toast-row i { color: #2c8c5b; }
.cz-c-toast.is-vote-off .cz-c-toast-row i { color: #c0392b; }
.cz-c-toast-bar {
    height: 3px;
    background: #c0392b;
    transform-origin: left center;
    animation: cz-c-toast-bar 3s linear forwards;
}
.cz-c-toast.is-unlike  .cz-c-toast-bar { background: #98a3b3; }
.cz-c-toast.is-success .cz-c-toast-bar { background: #2c8c5b; }
.cz-c-toast.is-delete  .cz-c-toast-bar { background: #c0392b; }
.cz-c-toast.is-info    .cz-c-toast-bar { background: #165fa7; }
.cz-c-toast.is-vote-on  .cz-c-toast-bar { background: #2c8c5b; }
.cz-c-toast.is-vote-off .cz-c-toast-bar { background: #c0392b; }
@keyframes cz-c-toast-bar {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
}

body.dark-mode .cz-c-toast {
    background: #1a232d;
    border-color: #2c3744;
    color: #d7dde6;
}
body.dark-mode .cz-c-toast-row { color: #d7dde6; }

/* ---- Emoji picker ---- */
.cz-c-emoji-picker {
    position: absolute;
    top: 34px;
    right: 6px;
    width: 244px;
    max-height: 210px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    padding: 6px;
    display: none;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    z-index: 50;
}
.cz-c-emoji-picker.is-open { display: grid; }
.cz-c-emoji-item {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 18px;
    padding: 4px 0;
    border-radius: 4px;
    line-height: 1;
    transition: background .15s;
}
.cz-c-emoji-item:hover { background: #f4f6fb; }

/* ---- Karanlik tema ---- */
body.dark-mode .cz-comments {
    background: #23262f;
    border-color: #333;
    color: #d7dde6;
}
body.dark-mode .cz-comments-head { border-bottom-color: #2a2d36; }
body.dark-mode .cz-c-tab { color: #98a3b3; }
body.dark-mode .cz-c-tab.is-active,
body.dark-mode .cz-comments-tabs .cz-c-tab:first-child { color: #6ea1ff; border-bottom-color: #6ea1ff; }
body.dark-mode .cz-c-textarea-wrap { background-color: #131a23; border-color: #2c3744; }
body.dark-mode .cz-c-textarea { color: #d7dde6; }
body.dark-mode .cz-c-textarea::placeholder { color: #6b7785; }
body.dark-mode .cz-c-name,
body.dark-mode .cz-c-bg-select select {
    background: #131a23; color: #d7dde6; border-color: #2c3744;
}

/* Custom bg dropdown — dark mode */
body.dark-mode .cz-c-bg-trigger {
    background: #131a23; color: #d7dde6; border-color: #2c3744;
}
body.dark-mode .cz-c-bg-trigger:hover { border-color: #6ea1ff; }
body.dark-mode .cz-c-bg-dd.is-open .cz-c-bg-trigger {
    border-color: #6ea1ff;
    box-shadow: 0 0 0 3px rgba(110, 161, 255, .22);
}
body.dark-mode .cz-c-bg-trigger-caret { color: #98a3b3; }
body.dark-mode .cz-c-bg-dd.is-open .cz-c-bg-trigger-caret { color: #6ea1ff; }
body.dark-mode .cz-c-bg-panel {
    background: #1a232d; border-color: #2c3744;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
body.dark-mode .cz-c-bg-search-wrap { background: #1a232d; border-bottom-color: #2c3744; }
body.dark-mode .cz-c-bg-search {
    background: #131a23; color: #d7dde6;
    border-color: #6ea1ff;
    box-shadow: 0 0 0 3px rgba(110, 161, 255, .18);
}
body.dark-mode .cz-c-bg-search::placeholder { color: #6b7785; }
body.dark-mode .cz-c-bg-options { scrollbar-color: #4a90e2 #1f2a36; }
body.dark-mode .cz-c-bg-options::-webkit-scrollbar-track { background: #1f2a36; }
body.dark-mode .cz-c-bg-options::-webkit-scrollbar-thumb {
    background: #4a90e2;
    border: 2px solid #1f2a36;
    background-clip: padding-box;
}
body.dark-mode .cz-c-bg-options::-webkit-scrollbar-thumb:hover { background: #6ea1ff; background-clip: padding-box; border: 2px solid #1f2a36; }
body.dark-mode .cz-c-bg-group-title { color: #98a3b3; }
body.dark-mode .cz-c-bg-option { color: #6ea1ff; }
body.dark-mode .cz-c-bg-option:hover { background: #131a23; color: #9ec1ff; }
body.dark-mode .cz-c-bg-option[aria-selected="true"] {
    background: #1f6feb; color: #fff;
}
body.dark-mode .cz-c-bg-option[aria-selected="true"]:hover { background: #155fae; }
body.dark-mode .cz-c-bg-empty { color: #6b7785; }
body.dark-mode .cz-comment {
    background-color: #1a232d; border-color: #2c3744;
}
body.dark-mode .cz-c-card {
    background: #131a23;
    border-color: #2c3744;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
body.dark-mode .cz-c-textarea-card {
    background: #131a23;
    border-color: #2c3744;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
body.dark-mode .cz-c-textarea-card:focus-within { border-color: #6ea1ff; }
body.dark-mode .cz-c-textarea-wrap[data-bg="none"] {
    background-color: #1a232d; border-color: #2c3744;
}
body.dark-mode .cz-c-textarea { color: #e8eef6; }
body.dark-mode .cz-c-avatar img { border-color: #1a232d; box-shadow: 0 0 0 1px #2c3744; }
body.dark-mode .cz-c-text { color: #d7dde6; }
body.dark-mode .cz-c-date { color: #98a3b3; border-bottom-color: #2c3744; }
body.dark-mode .cz-c-emoji-picker { background: #1a232d; border-color: #2c3744; }
body.dark-mode .cz-c-emoji-item:hover { background: #131a23; }
body.dark-mode .cz-c-like {
    background: #1d2630; color: #6ea1ff; border-color: #2c3744;
}
body.dark-mode .cz-c-like:hover { background: #131a23; }
body.dark-mode .cz-c-author { color: #6ea1ff; }
body.dark-mode .cz-c-rules-list > li { border-bottom-color: #2c3744; }
body.dark-mode .cz-c-rules-list h5 { color: #f0a020; }
body.dark-mode .cz-c-rules-list p { color: #b6bdc7; }
body.dark-mode .cz-c-rules-list strong { color: #e8eef6; }

/* ---- Modal (Bildir onay / başarı) ---- */
.cz-c-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 32, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity .25s ease-out;
    font-family: 'Fira Sans', system-ui, sans-serif;
    padding: 16px;
}
.cz-c-modal-backdrop.is-show { opacity: 1; }
.cz-c-modal-backdrop.is-hide { opacity: 0; }

.cz-c-modal {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
    width: 100%;
    max-width: 360px;
    padding: 28px 24px 22px;
    text-align: center;
    transform: scale(.5);
    opacity: 0;
}
.cz-c-modal-backdrop.is-show .cz-c-modal {
    animation: cz-c-modal-bounce .55s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
.cz-c-modal-backdrop.is-hide .cz-c-modal {
    animation: cz-c-modal-out .2s ease-in forwards;
}
@keyframes cz-c-modal-bounce {
    0%   { transform: scale(.3);  opacity: 0; }
    50%  { transform: scale(1.08); opacity: 1; }
    75%  { transform: scale(.96); }
    100% { transform: scale(1);   opacity: 1; }
}
@keyframes cz-c-modal-out {
    from { transform: scale(1);   opacity: 1; }
    to   { transform: scale(.85); opacity: 0; }
}

.cz-c-modal-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 18px;
    border-radius: 50%;
    border: 3px solid #f0a020;
    color: #f0a020;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    line-height: 1;
}
.cz-c-modal.is-success .cz-c-modal-icon {
    border-color: #2c8c5b;
    color: #2c8c5b;
    animation: cz-c-modal-tick .45s ease-out .15s both;
}
@keyframes cz-c-modal-tick {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.cz-c-modal-title {
    margin: 0 0 8px;
    font-size: 19px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}
.cz-c-modal-desc {
    margin: 0 0 20px;
    font-size: 13.5px;
    color: #5a6675;
    line-height: 1.4;
}
.cz-c-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.cz-c-modal-btn {
    min-width: 86px;
    padding: 9px 18px;
    border-radius: 5px;
    border: 2px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    transition: filter .15s ease, transform .1s ease;
}
.cz-c-modal-btn:hover  { filter: brightness(1.05); }
.cz-c-modal-btn:active { transform: translateY(1px); }
.cz-c-modal-btn.is-yes { background: #7ed09a; border-color: #5cb87f; }
.cz-c-modal-btn.is-no  { background: #e74c3c; border-color: #c0392b; }

body.dark-mode .cz-c-modal {
    background: #1a232d;
    color: #d7dde6;
}
body.dark-mode .cz-c-modal-title { color: #e8eef6; }
body.dark-mode .cz-c-modal-desc  { color: #a8b2bf; }

/* ===== Spoiler butonu (turuncu) ===== */
.cz-c-spoiler {
    flex: 0 0 auto;
    background: #f08c2e;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.cz-c-spoiler:hover  { background: #d97718; }
.cz-c-spoiler:active { transform: translateY(1px); }
.cz-c-spoiler i      { font-size: 12px; }

/* ===== Puan ver butonu + 1-10 popover ===== */
.cz-c-rate-wrap { position: relative; flex: 0 0 auto; }
.cz-c-rate-btn {
    background: #ffd35a;
    color: #5a3b00;
    border: 0;
    border-radius: 4px;
    padding: 8px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: inherit;
}
.cz-c-rate-btn:hover    { background: #f5c33b; }
.cz-c-rate-btn:active   { transform: translateY(1px); }
.cz-c-rate-btn:disabled { opacity: .6; cursor: not-allowed; }
.cz-c-rate-btn i        { font-size: 12px; color: #b3801a; }
.cz-c-rate-wrap:not(.has-score).is-open .cz-c-rate-btn { background: #f5c33b; }

.cz-c-rate-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e0e6ef;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.12);
    z-index: 50;
    min-width: 240px;
}
.cz-c-rate-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 22px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-right: 1px solid #e0e6ef;
    border-bottom: 1px solid #e0e6ef;
    transform: translateY(-6px) rotate(45deg);
}
.cz-c-rate-menu-title {
    font-size: 12px;
    font-weight: 700;
    color: #5a6675;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.cz-c-rate-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.cz-c-rate-num {
    background: #f4f7fb;
    border: 1px solid #d8dfea;
    color: #1f2937;
    border-radius: 5px;
    padding: 8px 0;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, color .12s, border-color .12s, transform .1s;
}
.cz-c-rate-num:hover {
    background: #165fa7;
    border-color: #0d47a1;
    color: #fff;
}
.cz-c-rate-num:active { transform: translateY(1px); }

/* Renk skalasi: 8-10 yesil, 6-7 turuncu, 1-5 kirmizi.
 * Wrap'taki score-good/mid/bad sinifina gore hem buton hem secili rakam renklenir. */
.cz-c-rate-wrap.score-good .cz-c-rate-btn       { background: #2c8c5b; color: #fff; }
.cz-c-rate-wrap.score-good .cz-c-rate-btn i     { color: #d4f0db; }
.cz-c-rate-wrap.score-good .cz-c-rate-btn:hover,
.cz-c-rate-wrap.score-good.is-open .cz-c-rate-btn { background: #1f6a44; }
.cz-c-rate-wrap.score-good .cz-c-rate-num.is-selected {
    background: #2c8c5b; border-color: #1f6a44; color: #fff;
}
.cz-c-rate-wrap.score-good .cz-c-rate-num.is-selected:hover {
    background: #1f6a44; border-color: #154d31;
}

.cz-c-rate-wrap.score-mid .cz-c-rate-btn        { background: #f08c2e; color: #fff; }
.cz-c-rate-wrap.score-mid .cz-c-rate-btn i      { color: #ffe7c4; }
.cz-c-rate-wrap.score-mid .cz-c-rate-btn:hover,
.cz-c-rate-wrap.score-mid.is-open .cz-c-rate-btn { background: #d97718; }
.cz-c-rate-wrap.score-mid .cz-c-rate-num.is-selected {
    background: #f08c2e; border-color: #d97718; color: #fff;
}
.cz-c-rate-wrap.score-mid .cz-c-rate-num.is-selected:hover {
    background: #d97718; border-color: #c46a13;
}

.cz-c-rate-wrap.score-bad .cz-c-rate-btn        { background: #c0392b; color: #fff; }
.cz-c-rate-wrap.score-bad .cz-c-rate-btn i      { color: #f7c8c4; }
.cz-c-rate-wrap.score-bad .cz-c-rate-btn:hover,
.cz-c-rate-wrap.score-bad.is-open .cz-c-rate-btn { background: #8b1a1a; }
.cz-c-rate-wrap.score-bad .cz-c-rate-num.is-selected {
    background: #c0392b; border-color: #8b1a1a; color: #fff;
}
.cz-c-rate-wrap.score-bad .cz-c-rate-num.is-selected:hover {
    background: #8b1a1a; border-color: #6b1010;
}
.cz-c-rate-hint {
    margin-top: 8px;
    font-size: 11.5px;
    color: #6b7480;
    text-align: center;
}

body.dark-mode .cz-c-rate-menu {
    background: #1a232d;
    border-color: #2c3744;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}
body.dark-mode .cz-c-rate-menu::after { background: #1a232d; border-color: #2c3744; }
body.dark-mode .cz-c-rate-menu-title  { color: #8a95a3; }
body.dark-mode .cz-c-rate-num {
    background: #131a23; border-color: #2c3744; color: #d7dde6;
}
body.dark-mode .cz-c-rate-num:hover { background: #165fa7; border-color: #0d47a1; color: #fff; }
body.dark-mode .cz-c-rate-hint      { color: #8a95a3; }

/* ===== Yorumda spoiler etiketi (tıklayınca açılır) ===== */
.cz-c-spoiler-tag {
    display: inline;
    cursor: pointer;
    border-radius: 3px;
    padding: 1px 6px;
    background: #2b2b2b;
    color: #2b2b2b;
    transition: color .15s, background .15s;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
}
.cz-c-spoiler-tag:hover  { background: #3a3a3a; }
.cz-c-spoiler-tag:focus  { box-shadow: 0 0 0 2px #f08c2e; }
.cz-c-spoiler-tag-label  {
    display: inline;
    font-size: 11px;
    font-weight: 800;
    color: #f08c2e;
    letter-spacing: .5px;
    margin-right: 4px;
}
.cz-c-spoiler-tag-text   { display: none; }
.cz-c-spoiler-tag.is-open {
    background: rgba(240, 140, 46, 0.16);
    color: inherit;
    cursor: default;
}
.cz-c-spoiler-tag.is-open .cz-c-spoiler-tag-label { display: none; }
.cz-c-spoiler-tag.is-open .cz-c-spoiler-tag-text  { display: inline; }
body.dark-mode .cz-c-spoiler-tag         { background: #0e0e0e; color: #0e0e0e; }
body.dark-mode .cz-c-spoiler-tag:hover   { background: #1a1a1a; }
body.dark-mode .cz-c-spoiler-tag.is-open { background: rgba(240, 140, 46, 0.20); color: inherit; }

/* ---- Mobil ---- */
@media (max-width: 720px) {
    .cz-comments { padding: 12px; }
    .cz-c-form-row { gap: 6px; }
    .cz-c-form-row .cz-c-bg-label { margin-left: 0; }
    .cz-c-form-row .cz-c-bg-select { flex: 1 1 auto; min-width: 0; }
    .cz-c-bg-dd { min-width: 0; display: block; width: 100%; }
    .cz-c-bg-panel { width: 100%; right: auto; left: 0; min-width: 260px; }
    .cz-c-bg-options { max-height: 200px; }
    /* Sag padding daraltildi (90 -> 70): ic kart daha genis, emoji/gif/foto butonlari sigsin */
    .cz-c-textarea-wrap { padding: 10px 70px 12px 12px; min-height: 150px; }
    .cz-c-form-row--actions { flex-direction: column; align-items: stretch; }
    .cz-c-name, .cz-c-submit, .cz-c-asuser, .cz-c-spoiler, .cz-c-rate-wrap, .cz-c-rate-btn { width: 100%; }
    .cz-c-rate-menu { right: 0; left: 0; min-width: 0; }
    .cz-comment { padding: 10px 70px 12px 12px; min-height: 150px; }
    .cz-c-avatar img { width: 44px; height: 44px; }
    /* Profil sayfası yorumları (data-bg="none"): karakter bg padding/min-height sıfırla */
    .profile-comment { padding: 0; min-height: 0; }

    /* Karakter arka planini mobilde sola cek — PC'de calc(100% + 130px) ile cok saga
       tasarken telefonda komik sekilde sag-kayik gorunuyordu (ara deger: +40px) */
    .cz-c-textarea-wrap[data-bg]:not([data-bg="none"]),
    .cz-comment[data-bg]:not([data-bg=""]):not([data-bg="none"]) {
        background-position: calc(100% + 40px) center;
    }

    /* Yazi alaninin sag bosluguu artir: emoji/gif/foto butonlari 3'lu sirada
       textarea'nin uzerine binmesin, hepsi gorunur kalsin */
    .cz-c-textarea { padding-right: 104px; }
}