/* ============================================================
   comments-widget.css
   Site genelindeki :root değişkenlerini (--panel, --primary vb.)
   yeniden kullanır — style.css'ten SONRA yüklenmeli.
   ============================================================ */

.comment-form{
    display:flex;gap:14px;align-items:flex-end;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
    padding:18px;margin-bottom:26px;
}
.comment-form textarea{
    flex:1;resize:none;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);
    color:var(--ink);font-family:var(--font-body);font-size:14px;padding:12px 14px;
}
.comment-form textarea:focus{outline:none;border-color:var(--primary-soft);}
.comment-form-msg{font-family:var(--font-mono);font-size:12.5px;color:var(--good);margin-bottom:20px;min-height:16px;}
.comment-form-msg.error{color:#ff8080;}
.comment-login-hint{color:var(--muted);margin-bottom:26px;font-size:14px;display:flex;align-items:center;gap:10px;}

/* ---- Yatay kaydırılabilir kart şeridi ---- */
.comment-carousel-wrap{position:relative;display:flex;align-items:center;gap:8px;}

.comment-carousel{
    overflow-x:auto;overflow-y:hidden;flex:1;
    scroll-snap-type:x proximity;
    cursor:grab;
    /* Kaydırma çubuğunu gizle ama işlevi koru */
    scrollbar-width:none;
    -ms-overflow-style:none;
}
.comment-carousel::-webkit-scrollbar{display:none;}
.comment-carousel.dragging{cursor:grabbing;scroll-snap-type:none;}

.comment-carousel-track{
    display:flex;gap:20px;padding:6px 4px 18px;
}

.testi-card.comment-card{
    flex:0 0 auto;width:300px;scroll-snap-align:start;
    user-select:none; /* sürüklerken metin seçimini engelle */
}
.comment-card .testi-text{
    min-height:60px;
    /* JS içeriği textContent ile basar; bu yüzden burada HTML enjeksiyonu mümkün değildir */
}
.comment-card .featured-tag{
    font-family:var(--font-mono);font-size:10px;color:#ffb400;letter-spacing:.05em;
    display:inline-flex;align-items:center;gap:4px;margin-bottom:6px;
}
.testi-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;}

.comment-skeleton{width:300px;height:150px;background:linear-gradient(90deg,var(--panel) 25%,var(--panel-2) 50%,var(--panel) 75%);background-size:200% 100%;animation:skeletonShine 1.4s infinite;flex:0 0 auto;}
@keyframes skeletonShine{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

.carousel-arrow{
    flex-shrink:0;width:40px;height:40px;border-radius:50%;
    background:var(--panel);border:1px solid var(--line-glow);color:#fff;font-size:20px;
    display:flex;align-items:center;justify-content:center;transition:background .2s ease,transform .2s ease;
}
.carousel-arrow:hover{background:rgba(191,0,255,.18);transform:scale(1.06);}
@media (max-width:640px){ .carousel-arrow{display:none;} }

.comment-empty{color:var(--muted);font-size:14px;padding:20px 0;}