:root{
  --brand:#63A361;     /* marka rengi */
  --ink:#111827;       /* ana metin */
  --muted:#6b7280;     /* ikincil metin */
  --line:#eef2f7;      /* ayırıcı çizgiler */
  --bg:#ffffff;        /* kart zemini */
  --bg-soft:#fafbfc;   /* yumuşak zemin */
}

#composerBody {
  display: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: all .25s ease;
}

#composerBody.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-5px);}
  to {opacity: 1; transform: translateY(0);}
}

/* Toast – gönder butonu yanında */
.cmt-toast {
  display: inline-block;
  margin-left: 10px;           /* butonla aralık */
  background: #059669;
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  opacity: 0;
  transform: translateY(-3px);
  transition: all .25s ease;
  vertical-align: middle;
}
.cmt-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.cmt-toast.error { background:#b91c1c; }


/* ====== Yorum yaz (stub) birleşik alan stili ====== */

/* Dış çerçeve (ikon + input birlikte) */
.cmt-composer .top{
  display:flex;
  align-items:center;
  border:1px solid #63A361;         /* gri çerçeve */
  border-radius:10px;                /* yuvarlak köşe */
  overflow:hidden;                   /* ikon bloğunun taşmasını engelle */
  background:#fff;
}

/* Soldaki kırmızı ikon bloğu */
.cmt-composer .top i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:65px;
  height:65px;
  background:#63A361;                /* marka/kırmızı ton */
  color:#fff;
  flex:0 0 38px;                     /* sabit genişlik */
  border-right:1px solid #63A361;  /* hafif ayraç */
}

/* Sağdaki input */
#composerStub.collapsed-input{
  border:0;
  outline:0;
  width:100%;
  height:65x;
  padding:0 12px;
  font-size:14px;
  background:#fff;
}

/* Placeholder görünümü */
#composerStub::placeholder{
  color:#222;
  font-weight:600;                   /* “Yorum yaz” kalın */
}

/* Hover / focus halinde çerçeveyi vurgula */
.cmt-composer .top:hover,
.cmt-composer .top:focus-within{
  border-color:#63A361;
  box-shadow:0 0 0 3px rgba(200,36,36,.06);
}



/* kapsayıcı */
.cmt-wrap{max-width:900px;margin:28px auto}

/* composer */
.cmt-composer{border:1px solid var(--line);border-radius:14px;background:var(--bg);box-shadow:0 1px 2px rgba(0,0,0,.04);transition:.2s}
.cmt-composer .collapsed-input{background:transparent}
.cmt-composer .body{padding:14px;background:var(--bg-soft)}
.cmt-composer .body textarea {
  min-height: 130px;      /* varsayılan yükseklik */
  resize: vertical;       /* kullanıcı isterse uzatabilsin */
  width: 100%;            /* tam genişlik */
  padding: 10px 12px;     /* iç boşluk */
  font-size: 15px;
  line-height: 1.5;
}
.cmt-composer .body textarea:focus{border-color:var(--brand);}
.cmt-btn{background:var(--brand);border-radius:10px;font-weight:600}
.cmt-btn:hover{filter:brightness(.95)}

/* başlık */
.cmt-title{font-weight:800;letter-spacing:.2px}
.cmt-count{color:var(--muted)}

/* yorum kartı */
.cmt-item{position:relative;padding:16px 0}
.cmt-sep{height:1px;background:var(--line);margin:6px 0 2px}
.cmt-avatar{width:40px;height:40px;border-radius:12px;background:var(--brand);display:flex;align-items:center;justify-content:center;color:#fff;flex:0 0 40px;box-shadow:0 2px 6px rgba(185,28,28,.15)}
.cmt-card{flex:1;background:transparent;border-radius:12px;padding-left: 15px;margin-left: 10px;}
.cmt-head{gap:8px;display: flex;}
.cmt-name{color:var(--brand);font-weight:700}
.cmt-text{color:var(--ink);font-size:15px}
.text-muted{font-size: smaller;}

/* aksiyon barı */
.cmt-actions{gap:18px;color:var(--muted);font-size:14px}
.cmt-action{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;transition:.15s}
.cmt-action:hover{background:var(--bg-soft);color:var(--ink)}
.cmt-action.active{color:var(--brand);background:rgba(185,28,28,.06);font-weight:700}

/* reply kutusu */
.cmt-reply textarea{border-radius:10px;border:1px solid var(--line)}
.cmt-reply textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(185,28,28,.12)}

/* hiyerarşi çizgisi (thread) */
.comment-item>.d-flex{position:relative}
.replies{position:relative}
.replies::before{
  content:"";
  position:absolute;left:14px;top:0;bottom:8px;
  width:2px;background:var(--line);
}
.comment-item .replies .comment-item{padding-left:12px}

/* responsive */
@media (max-width:640px){
  .cmt-wrap{padding:0 12px}
  .cmt-actions{gap:12px}
  .cmt-avatar{width:34px;height:34px;border-radius:10px}
}

/* küçük yardımcılar */
.text-sm{font-size:13px}