/* ============================================================
   FilmKutusu Gelişmiş Yorumlar — Frontend CSS
   Renkler :root'tan gelir (PHP tarafından dinamik enjekte edilir)
   ============================================================ */

:root {
    --fkc-bg:      #1a1d23;
    --fkc-accent:  #f5a623;
    --fkc-accent2: #e05252;
    --fkc-card:    #22262f;
    --fkc-border:  #2e3340;
    --fkc-text:    #d4d8e2;
    --fkc-muted:   #707585;
    --fkc-radius:  10px;
    --fkc-font:    'Segoe UI', system-ui, sans-serif;
}

/* ---- BÖLÜM ---- */
.fkc-section { margin-top: 2.5rem; font-family: var(--fkc-font); color: var(--fkc-text); }

.fkc-title {
    font-size: 1rem; font-weight: 700; color: var(--fkc-accent);
    letter-spacing: .05em; text-transform: uppercase;
    margin-bottom: 1.4rem;
}

.fkc-no-comments { color: var(--fkc-muted); font-size: .88rem; margin-bottom: 1rem; }

/* ---- LİSTE ---- */
.fkc-list, .fkc-list .children { list-style: none; margin: 0; padding: 0; }

.fkc-comment-item { margin-bottom: .85rem; }

.fkc-list .children {
    margin-left: 2.4rem;
    border-left: 2px solid var(--fkc-border);
    padding-left: 1rem;
    margin-top: .5rem;
}

/* ---- KART ---- */
.fkc-comment-wrap {
    display: flex; gap: 1rem;
    background: var(--fkc-card);
    border: 1px solid var(--fkc-border);
    border-radius: var(--fkc-radius);
    padding: 1rem 1.1rem;
    transition: border-color .2s;
}
.fkc-comment-wrap:hover { border-color: var(--fkc-accent); }

/* ---- AVATAR ---- */
.fkc-comment-avatar { flex-shrink: 0; }
.fkc-avatar {
    width: 48px !important; height: 48px !important;
    border-radius: 50% !important;
    border: 2px solid var(--fkc-accent);
    object-fit: cover; display: block;
}

/* ---- GÖVDE ---- */
.fkc-comment-body { flex: 1; min-width: 0; }

.fkc-comment-header {
    display: flex; align-items: center;
    flex-wrap: wrap; gap: .4rem .8rem;
    margin-bottom: .4rem;
}

.fkc-author { font-weight: 700; font-size: .9rem; color: #fff; }
.fkc-date   { font-size: .73rem; color: var(--fkc-muted); margin-left: auto; }

/* ---- YILDIZLAR ---- */
.fkc-stars { display: inline-flex; gap: 1px; }
.fkc-star  { font-size: .95rem; color: var(--fkc-border); line-height: 1; }
.fkc-star.filled { color: var(--fkc-accent); }

/* ---- METİN ---- */
.fkc-comment-text {
    font-size: .87rem; line-height: 1.65;
    color: var(--fkc-text); margin-bottom: .6rem;
}
.fkc-comment-text p { margin: 0; }

/* ---- AKSİYONLAR ---- */
.fkc-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }

.fkc-vote-btn, .fkc-reply-btn {
    background: transparent;
    border: 1px solid var(--fkc-border);
    color: var(--fkc-muted);
    border-radius: 20px; padding: .22rem .75rem;
    font-size: .76rem; cursor: pointer;
    transition: all .18s;
    display: inline-flex; align-items: center; gap: .3rem;
    font-family: var(--fkc-font);
}

.fkc-vote-btn.fkc-like:hover,
.fkc-vote-btn.fkc-like.active  { border-color: var(--fkc-accent);  color: var(--fkc-accent);  background: rgba(245,166,35,.09); }

.fkc-vote-btn.fkc-dislike:hover,
.fkc-vote-btn.fkc-dislike.active { border-color: var(--fkc-accent2); color: var(--fkc-accent2); background: rgba(224,82,82,.09); }

.fkc-reply-btn { border-style: dashed; }
.fkc-reply-btn:hover { border-color: #7c83ff; color: #7c83ff; background: rgba(124,131,255,.09); }

/* ---- ONAY BEKLİYOR ---- */
.fkc-pending { font-size: .8rem; color: var(--fkc-accent); margin-bottom: .4rem; }

/* ============================================================
   FORM
   ============================================================ */
#respond {
    background: var(--fkc-card);
    border: 1px solid var(--fkc-border);
    border-radius: var(--fkc-radius);
    padding: 1.5rem; margin-top: 2rem;
}

#reply-title {
    font-size: 1rem; font-weight: 700; color: var(--fkc-accent);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 1.1rem;
}

.comment-form label {
    display: block; font-size: .75rem; color: var(--fkc-muted);
    font-weight: 600; text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: .35rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%; background: var(--fkc-bg);
    border: 1px solid var(--fkc-border);
    border-radius: 7px; color: var(--fkc-text);
    padding: .6rem .85rem; font-size: .87rem;
    font-family: var(--fkc-font); transition: border-color .2s;
    box-sizing: border-box;
}
.comment-form input:focus,
.comment-form textarea:focus { outline: none; border-color: var(--fkc-accent); }
.comment-form textarea { min-height: 95px; resize: vertical; }

/* Yıldız alan (form) */
.fkc-star-field { margin-bottom: 1rem; }
.fkc-star-input { display: flex; gap: 5px; margin-top: .4rem; }
.fkc-si {
    font-size: 1.9rem; color: var(--fkc-border);
    cursor: pointer; transition: color .12s, transform .12s;
    user-select: none; line-height: 1;
}
.fkc-si.on { color: var(--fkc-accent); transform: scale(1.12); }

/* Gönder butonu */
#submit {
    background: var(--fkc-accent); color: #111;
    border: none; border-radius: 7px;
    padding: .58rem 1.8rem; font-size: .9rem; font-weight: 700;
    cursor: pointer; font-family: var(--fkc-font);
    transition: opacity .18s, transform .1s; letter-spacing: .03em;
}
#submit:hover { opacity: .85; transform: translateY(-1px); }

/* ---- SAYFALAMA ---- */
.comments-pagination {
    margin-top: 1.2rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
}
.comments-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 .5rem;
    background: var(--fkc-card);
    border: 1px solid var(--fkc-border);
    border-radius: 6px;
    color: var(--fkc-muted);
    font-size: .82rem;
    text-decoration: none;
    transition: all .18s;
}
.comments-pagination .page-numbers:hover    { border-color: var(--fkc-accent); color: var(--fkc-accent); }
.comments-pagination .page-numbers.current  { background: var(--fkc-accent); border-color: var(--fkc-accent); color: #111; font-weight: 700; }
.comments-pagination .page-numbers.dots     { border: none; background: transparent; }

/* Mobil */
@media (max-width: 480px) {
    .fkc-comment-wrap { flex-direction: column; gap: .6rem; }
    .fkc-avatar { width: 38px !important; height: 38px !important; }
    .fkc-list .children { margin-left: 1rem; }
}