/* ============================================================
 * 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'); }

/* Anime karakterleri — compose alaninda + yorum kartinda ortak */
.cz-c-textarea-wrap[data-bg="izuku-midoriya"],         .cz-c-body[data-bg="izuku-midoriya"]         { background-image: url('/img/comments-background/izuku-midoriya.png'); }
.cz-c-textarea-wrap[data-bg="bakugo"],                 .cz-c-body[data-bg="bakugo"]                 { background-image: url('/img/comments-background/bakugo.jpg'); }
.cz-c-textarea-wrap[data-bg="todoroki"],               .cz-c-body[data-bg="todoroki"]               { background-image: url('/img/comments-background/todoroki.jpg'); }
.cz-c-textarea-wrap[data-bg="uraraka"],                .cz-c-body[data-bg="uraraka"]                { background-image: url('/img/comments-background/uraraka.png'); }
.cz-c-textarea-wrap[data-bg="eren-yeager"],            .cz-c-body[data-bg="eren-yeager"]            { background-image: url('/img/comments-background/eren-yeager.jpg'); }
.cz-c-textarea-wrap[data-bg="armin"],                  .cz-c-body[data-bg="armin"]                  { background-image: url('/img/comments-background/armin.jpg'); }
.cz-c-textarea-wrap[data-bg="eren-yeager-mikasa-levi"],.cz-c-body[data-bg="eren-yeager-mikasa-levi"] { background-image: url('/img/comments-background/eren-yeager-mikasa-levi.png'); }
.cz-c-textarea-wrap[data-bg="anya"],                   .cz-c-body[data-bg="anya"]                   { background-image: url('/img/comments-background/anya.png'); }
.cz-c-textarea-wrap[data-bg="anya-2"],                 .cz-c-body[data-bg="anya-2"]                 { background-image: url('/img/comments-background/anya-2.png'); }
.cz-c-textarea-wrap[data-bg="loid"],                   .cz-c-body[data-bg="loid"]                   { background-image: url('/img/comments-background/loid.png'); }
.cz-c-textarea-wrap[data-bg="yor"],                    .cz-c-body[data-bg="yor"]                    { background-image: url('/img/comments-background/yor.png'); }
.cz-c-textarea-wrap[data-bg="emilia"],                 .cz-c-body[data-bg="emilia"]                 { background-image: url('/img/comments-background/emilia.png'); }
.cz-c-textarea-wrap[data-bg="rem"],                    .cz-c-body[data-bg="rem"]                    { background-image: url('/img/comments-background/rem.png'); }
.cz-c-textarea-wrap[data-bg="ram"],                    .cz-c-body[data-bg="ram"]                    { background-image: url('/img/comments-background/ram.png'); }
.cz-c-textarea-wrap[data-bg="emma"],                   .cz-c-body[data-bg="emma"]                   { background-image: url('/img/comments-background/emma.jpg'); }
.cz-c-textarea-wrap[data-bg="norman"],                 .cz-c-body[data-bg="norman"]                 { background-image: url('/img/comments-background/norman.png'); }
.cz-c-textarea-wrap[data-bg="ray"],                    .cz-c-body[data-bg="ray"]                    { background-image: url('/img/comments-background/ray.jpg'); }
.cz-c-textarea-wrap[data-bg="gon"],                    .cz-c-body[data-bg="gon"]                    { background-image: url('/img/comments-background/gon.jpg'); }
.cz-c-textarea-wrap[data-bg="killua"],                 .cz-c-body[data-bg="killua"]                 { background-image: url('/img/comments-background/killua.jpg'); }
.cz-c-textarea-wrap[data-bg="hisoka"],                 .cz-c-body[data-bg="hisoka"]                 { background-image: url('/img/comments-background/hisoka.jpg'); }
.cz-c-textarea-wrap[data-bg="hoshino-ai"],             .cz-c-body[data-bg="hoshino-ai"]             { background-image: url('/img/comments-background/hoshino-ai.png'); }
.cz-c-textarea-wrap[data-bg="hoshina-aquamarine"],     .cz-c-body[data-bg="hoshina-aquamarine"]     { background-image: url('/img/comments-background/hoshina-aquamarine.png'); }
.cz-c-textarea-wrap[data-bg="hoshino-ruby"],           .cz-c-body[data-bg="hoshino-ruby"]           { background-image: url('/img/comments-background/hoshino-ruby.png'); }
.cz-c-textarea-wrap[data-bg="kurowa-akane"],           .cz-c-body[data-bg="kurowa-akane"]           { background-image: url('/img/comments-background/kurowa-akane.png'); }
.cz-c-textarea-wrap[data-bg="mem-cho"],                .cz-c-body[data-bg="mem-cho"]                { background-image: url('/img/comments-background/mem-cho.png'); }
.cz-c-textarea-wrap[data-bg="ainz-owal-goon"],         .cz-c-body[data-bg="ainz-owal-goon"]         { background-image: url('/img/comments-background/ainz-owal-goon.png'); }
.cz-c-textarea-wrap[data-bg="albedo"],                 .cz-c-body[data-bg="albedo"]                 { background-image: url('/img/comments-background/albedo.png'); }
.cz-c-textarea-wrap[data-bg="shalltear"],              .cz-c-body[data-bg="shalltear"]              { background-image: url('/img/comments-background/shalltear.png'); }
.cz-c-textarea-wrap[data-bg="kazuto-kiriyaga"],        .cz-c-body[data-bg="kazuto-kiriyaga"]        { background-image: url('/img/comments-background/kazuto-kiriyaga.png'); }
.cz-c-textarea-wrap[data-bg="asuna-yuuki"],            .cz-c-body[data-bg="asuna-yuuki"]            { background-image: url('/img/comments-background/asuna-yuuki.png'); }
.cz-c-textarea-wrap[data-bg="aqua"],                   .cz-c-body[data-bg="aqua"]                   { background-image: url('/img/comments-background/aqua.png'); }
.cz-c-textarea-wrap[data-bg="megumin"],                .cz-c-body[data-bg="megumin"]                { background-image: url('/img/comments-background/megumin.png'); }
.cz-c-textarea-wrap[data-bg="okabe-rintarau"],         .cz-c-body[data-bg="okabe-rintarau"]         { background-image: url('/img/comments-background/okabe-rintarau.png'); }
.cz-c-textarea-wrap[data-bg="kurisu-makise"],          .cz-c-body[data-bg="kurisu-makise"]          { background-image: url('/img/comments-background/kurisu-makise.png'); }
.cz-c-textarea-wrap[data-bg="keyaru"],                 .cz-c-body[data-bg="keyaru"]                 { background-image: url('/img/comments-background/keyaru.jpg'); }
.cz-c-textarea-wrap[data-bg="flare-jioral"],           .cz-c-body[data-bg="flare-jioral"]           { background-image: url('/img/comments-background/flare-jioral.jpg'); }
.cz-c-textarea-wrap[data-bg="luffy"],                  .cz-c-body[data-bg="luffy"]                  { background-image: url('/img/comments-background/luffy.png'); }
.cz-c-textarea-wrap[data-bg="naruto"],                 .cz-c-body[data-bg="naruto"]                 { background-image: url('/img/comments-background/naruto.png'); }
.cz-c-textarea-wrap[data-bg="ichigo"],                 .cz-c-body[data-bg="ichigo"]                 { background-image: url('/img/comments-background/ichigo.png'); }
.cz-c-textarea-wrap[data-bg="tanjiro-nezuko"],         .cz-c-body[data-bg="tanjiro-nezuko"]         { background-image: url('/img/comments-background/tanjiro-nezuko.png'); }
.cz-c-textarea-wrap[data-bg="ken-kaneki"],             .cz-c-body[data-bg="ken-kaneki"]             { background-image: url('/img/comments-background/ken-kaneki.png'); }
.cz-c-textarea-wrap[data-bg="saitama"],                .cz-c-body[data-bg="saitama"]                { background-image: url('/img/comments-background/saitama.png'); }
.cz-c-textarea-wrap[data-bg="sung-jin-woo"],           .cz-c-body[data-bg="sung-jin-woo"]           { background-image: url('/img/comments-background/sung-jin-woo.png'); }
.cz-c-textarea-wrap[data-bg="friren"],                 .cz-c-body[data-bg="friren"]                 { background-image: url('/img/comments-background/friren.png'); }
.cz-c-textarea-wrap[data-bg="thorfinn"],               .cz-c-body[data-bg="thorfinn"]               { background-image: url('/img/comments-background/thorfinn.png'); }
.cz-c-textarea-wrap[data-bg="asta"],                   .cz-c-body[data-bg="asta"]                   { background-image: url('/img/comments-background/asta.png'); }
.cz-c-textarea-wrap[data-bg="natsu-lucy"],             .cz-c-body[data-bg="natsu-lucy"]             { background-image: url('/img/comments-background/natsu-lucy.png'); }
.cz-c-textarea-wrap[data-bg="meliodas"],               .cz-c-body[data-bg="meliodas"]               { background-image: url('/img/comments-background/meliodas.png'); }
.cz-c-textarea-wrap[data-bg="rimuru"],                 .cz-c-body[data-bg="rimuru"]                 { background-image: url('/img/comments-background/rimuru.png'); }
.cz-c-textarea-wrap[data-bg="akame"],                  .cz-c-body[data-bg="akame"]                  { background-image: url('/img/comments-background/akame.png'); }
.cz-c-textarea-wrap[data-bg="dr-stone"],               .cz-c-body[data-bg="dr-stone"]               { background-image: url('/img/comments-background/dr-stone.png'); }
.cz-c-textarea-wrap[data-bg="fire-force"],             .cz-c-body[data-bg="fire-force"]             { background-image: url('/img/comments-background/fire-force.png'); }
.cz-c-textarea-wrap[data-bg="osamu-dazai"],            .cz-c-body[data-bg="osamu-dazai"]            { background-image: url('/img/comments-background/osamu-dazai.jpg'); }
.cz-c-textarea-wrap[data-bg="yato"],                   .cz-c-body[data-bg="yato"]                   { background-image: url('/img/comments-background/yato.png'); }
.cz-c-textarea-wrap[data-bg="violet-evergarden"],      .cz-c-body[data-bg="violet-evergarden"]      { background-image: url('/img/comments-background/violet-evergarden.png'); }
.cz-c-textarea-wrap[data-bg="zero-two"],               .cz-c-body[data-bg="zero-two"]               { background-image: url('/img/comments-background/zero-two.png'); }
.cz-c-textarea-wrap[data-bg="jabami-yumeko"],          .cz-c-body[data-bg="jabami-yumeko"]          { background-image: url('/img/comments-background/jabami-yumeko.png'); }
.cz-c-textarea-wrap[data-bg="gasai-yuno"],             .cz-c-body[data-bg="gasai-yuno"]             { background-image: url('/img/comments-background/gasai-yuno.png'); }
.cz-c-textarea-wrap[data-bg="kuriyama-mirai"],         .cz-c-body[data-bg="kuriyama-mirai"]         { background-image: url('/img/comments-background/kuriyama-mirai.png'); }
.cz-c-textarea-wrap[data-bg="shiro-sora"],             .cz-c-body[data-bg="shiro-sora"]             { background-image: url('/img/comments-background/shiro-sora.png'); }
.cz-c-textarea-wrap[data-bg="sakurajima-mai"],         .cz-c-body[data-bg="sakurajima-mai"]         { background-image: url('/img/comments-background/sakurajima-mai.png'); }
.cz-c-textarea-wrap[data-bg="marin-kitagara"],         .cz-c-body[data-bg="marin-kitagara"]         { background-image: url('/img/comments-background/marin-kitagara.png'); }
.cz-c-textarea-wrap[data-bg="chizuru-inchose"],        .cz-c-body[data-bg="chizuru-inchose"]        { background-image: url('/img/comments-background/chizuru-inchose.png'); }
.cz-c-textarea-wrap[data-bg="chise-elias"],            .cz-c-body[data-bg="chise-elias"]            { background-image: url('/img/comments-background/chise-elias.png'); }
.cz-c-textarea-wrap[data-bg="nagatoro"],               .cz-c-body[data-bg="nagatoro"]               { background-image: url('/img/comments-background/nagatoro.png'); }
.cz-c-textarea-wrap[data-bg="erina-souma"],            .cz-c-body[data-bg="erina-souma"]            { background-image: url('/img/comments-background/erina-souma.png'); }
.cz-c-textarea-wrap[data-bg="naoufumi-rapthalia"],     .cz-c-body[data-bg="naoufumi-rapthalia"]     { background-image: url('/img/comments-background/naoufumi-rapthalia.png'); }
.cz-c-textarea-wrap[data-bg="tsukasa-nasa"],           .cz-c-body[data-bg="tsukasa-nasa"]           { background-image: url('/img/comments-background/tsukasa-nasa.jpg'); }
.cz-c-textarea-wrap[data-bg="hykkamui-dororo"],        .cz-c-body[data-bg="hykkamui-dororo"]        { background-image: url('/img/comments-background/hykkamui-dororo.png'); }
.cz-c-textarea-wrap[data-bg="akane-shinjo"],           .cz-c-body[data-bg="akane-shinjo"]           { background-image: url('/img/comments-background/akane-shinjo.png'); }
.cz-c-textarea-wrap[data-bg="rias-gremory"],           .cz-c-body[data-bg="rias-gremory"]           { background-image: url('/img/comments-background/rias-gremory.png'); }
.cz-c-textarea-wrap[data-bg="izumu-saigiri"],          .cz-c-body[data-bg="izumu-saigiri"]          { background-image: url('/img/comments-background/izumu-saigiri.png'); }
.cz-c-textarea-wrap[data-bg="melida-kufa"],            .cz-c-body[data-bg="melida-kufa"]            { background-image: url('/img/comments-background/melida-kufa.png'); }
.cz-c-textarea-wrap[data-bg="tooru"],                  .cz-c-body[data-bg="tooru"]                  { background-image: url('/img/comments-background/tooru.png'); }
.cz-c-textarea-wrap[data-bg="aarima-kima"],            .cz-c-body[data-bg="aarima-kima"]            { background-image: url('/img/comments-background/aarima-kima.png'); }
.cz-c-textarea-wrap[data-bg="kureha"],                 .cz-c-body[data-bg="kureha"]                 { background-image: url('/img/comments-background/kureha.jpg'); }
.cz-c-textarea-wrap[data-bg="setsuna"],                .cz-c-body[data-bg="setsuna"]                { background-image: url('/img/comments-background/setsuna.jpg'); }

/* 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;
}

/* Yorum sarmalayici — sadece dizilim; karakter arka plani ic .cz-c-body'de.
 * Boylece cevaplar bu kutunun ALTINDA temiz alanda kalir, bg saga tasmaz. */
.cz-comment {
    position: relative;
    display: flex;
    flex-direction: column;
}
/* Karakter arka planli kart govdesi — eski .cz-comment framing'i buraya tasindi */
.cz-c-body {
    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-c-body[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-c-body[data-bg="finn"]      { background-image: url('/img/finnbackgorund.png'); }
.cz-c-body[data-bg="jake"]      { background-image: url('/img/jakebackground.png'); }
.cz-c-body[data-bg="marceline"] { background-image: url('/img/marcelinebackground.png'); }
.cz-c-body[data-bg="bubblegum"] { background-image: url('/img/bublegumbackground.png'); }
/* Gumball */
.cz-c-body[data-bg="gumball"]   { background-image: url('/img/gumballbackground.png'); }
.cz-c-body[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; }

/* Tarih satiri — sagda bitisik: [Yanitla] [tarih]; alt cizgi basligi metinden ayirir */
.cz-c-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #e3e6ee;
}
.cz-c-date {
    color: #6b7785;
    font-size: 12px;
    text-align: right;
    white-space: nowrap;
}
.cz-c-text {
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* Yanitla butonu */
.cz-c-reply {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    padding: 3px 10px;
    color: #165fa7;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s;
}
.cz-c-reply:hover { background: #eef3fb; color: #0d4787; border-color: #b9c6da; }
.cz-c-reply i { font-size: 11px; }
/* Duzenleme modunda yanitla gizlensin */
.cz-comment.is-editing .cz-c-reply { display: none; }

/* ---- Cevaplar (tek seviye girinti) ----
 * Karakter arka planli kart govdesinin (.cz-c-body) ALTINDA, temiz alanda;
 * sadece sol 32px girinti. Arka plan artik buraya tasmaz. */
.cz-c-replies {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 2px;
    padding-left: 32px;
    position: relative;
}
.cz-c-replies:empty { display: none; margin: 0; }
/* Sol dikey kilavuz cizgisi — cevaplarin koke bagliligini gosterir */
.cz-c-replies::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 2px;
    bottom: 2px;
    width: 2px;
    background: #dbe3ef;
    border-radius: 2px;
}

/* Cevap karti — kompakt, karakter arka plani yok, beyaz/sade.
 * Cevaplar da .cz-c-body kullanir ama framing'i (170px padding, min-height,
 * #f4f6fb bg) sifirlanir; cevaplarda data-bg verilmedigi icin karakter cikmaz. */
.cz-comment.is-reply .cz-c-body {
    min-height: 0;
    padding: 0;
    background: transparent;
    overflow: visible;
}
.cz-comment.is-reply .cz-c-card {
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cz-comment.is-reply .cz-c-avatar img { width: 38px; height: 38px; }
/* Cevaba verilen cevap da AYNI girintide kalir (daha fazla saga kaymaz):
 * cevap dugumlerinin icindeki .cz-c-replies kullanilmaz, gizle. */
.cz-comment.is-reply .cz-c-replies { display: none; }

/* ---- Inline cevap yazma kutusu ---- */
.cz-c-reply-compose {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 6px;
    padding: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.cz-c-reply-ta {
    width: 100%;
    min-height: 52px;
    box-sizing: border-box;
    font: inherit;
    color: #1f2937;
    background: #fff;
    border: 1px solid #cfd6e0;
    border-radius: 4px;
    padding: 8px 10px;
    resize: vertical;
    outline: none;
}
.cz-c-reply-ta:focus { border-color: #165fa7; box-shadow: 0 0 0 2px rgba(22,95,167,.18); }
.cz-c-reply-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}
.cz-c-reply-cancel,
.cz-c-reply-send {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    padding: 5px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.cz-c-reply-cancel { background: #fff; border-color: #cfd6e0; color: #6b7785; }
.cz-c-reply-cancel:hover { background: #f4f6fb; color: #44505e; }
.cz-c-reply-send { background: #165fa7; color: #fff; }
.cz-c-reply-send:hover { background: #0d4787; }
.cz-c-reply-send:disabled { opacity: .6; cursor: default; }

/* ---- Dark mode ---- */
body.dark-mode .cz-c-foot { border-bottom-color: #2c3744; }
body.dark-mode .cz-c-reply { border-color: #2c3744; color: #9ec3ff; }
body.dark-mode .cz-c-reply:hover { background: #1a2733; color: #c7ddff; border-color: #3a4a5c; }
body.dark-mode .cz-c-replies::before { background: #2c3744; }
body.dark-mode .cz-c-reply-compose,
body.dark-mode .cz-comment.is-reply .cz-c-card { background: #0f1720; border-color: #2c3744; }
body.dark-mode .cz-c-reply-ta {
    background: rgba(15,23,32,.6);
    border-color: #2c3744;
    color: #e8eef6;
}
body.dark-mode .cz-c-reply-cancel { background: #0f1720; border-color: #2c3744; color: #98a3b3; }
body.dark-mode .cz-c-reply-cancel:hover { background: #1a2733; color: #c7d3e0; }

/* .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-c-body {
    background-color: #1a232d; border-color: #2c3744;
}
body.dark-mode .cz-comment.is-reply .cz-c-body { background-color: transparent; }
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; }
    /* Mobil framing artik .cz-c-body'de (eski .cz-comment yerine): sag 170->70px
       daraltilir ki beyaz kart mobilde ezilmesin/iyice kuculmesin. */
    .cz-c-body { padding: 10px 70px 12px 12px; min-height: 150px; }
    .cz-comment.is-reply .cz-c-body { padding: 0; min-height: 0; }
    .cz-c-avatar img { width: 44px; height: 44px; }
    /* Cevaplarda mobilde girintiyi azalt (dar ekranda yer kazandirir) */
    .cz-c-replies { padding-left: 18px; }
    /* 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-c-body[data-bg]:not([data-bg=""]):not([data-bg="none"]) {
        background-position: calc(100% + 75px) 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; }
}