:root { 
  --tc-primary: #ff6a00;
  --tc-bg: #5E5C5C;
  --tc-card: #ffffff;
  --tc-text: #0e2b68;
  --tc-muted: #666;
  --tc-border: #e6e6e6;
  --tc-soft: #f6f6f6;
}

#tc-root.tc-dark {
  --tc-bg: #0f1115;
  --tc-card: #171923;
  --tc-text: #e8e8e8;
  --tc-muted: #5E5C5C;
  --tc-border: #2a2f3a;
  --tc-soft: #1f2430;
}

.tc-root, #tc-root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--tc-text); }
#tc-root { background: transparent; }

/* Header */
#tc-root .tc-header { display:flex; align-items:center; justify-content:space-between; margin: 16px 0; }
#tc-root .tc-header strong { font-size: 1.5rem; }
#tc-root .tc-sort { display:flex; gap:8px; align-items:center; color: var(--tc-muted); }
#tc-root .tc-sort select { padding:8px 8px; border:1px solid var(--tc-border); background: var(--tc-card); color: var(--tc-text); border-radius:8px; }

/* Editor */
#tc-root .tc-editor { border:1px solid var(--tc-border); border-radius:18px; padding:18px; background:var(--tc-card); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
#tc-root .tc-text { width:96%; border:1px solid var(--tc-border); border-radius:10px; padding:10px; resize:vertical; background:var(--tc-bg); color: var(--tc-text); }
#tc-root .tc-editor-actions { display:flex; gap:18px; align-items:center; margin-top:8px; flex-wrap: wrap; }
#tc-root .tc-editor-actions input { border:1px solid var(--tc-border); border-radius:10px; padding:8px 10px; background: var(--tc-bg); color: var(--tc-text); }
#tc-root .tc-send { background:var(--tc-primary); color:#fff; border:0; border-radius:10px; padding:8px 14px; cursor:pointer; font-weight:600; }

#tc-root .tc-need-login { padding:10px; background:var(--tc-soft); border-radius:10px; color: var(--tc-muted); }

/* Items */

.tc-avatar { width:36px; height:36px; border-radius:50%; flex:0 0 36px; background:#eee; object-fit: cover; }


.tc-content { margin:16px 0 18px; line-height:1.9; color: var(--tc-text); }

.tc-action { background:var(--tc-soft); border:1px solid var(--tc-border); border-radius:999px; padding:4px 12px; cursor:pointer; font-size:.85rem; color: var(--tc-text); }
.tc-action[data-active="1"] { background: color-mix(in srgb, var(--tc-primary) 12%, transparent); border-color: color-mix(in srgb, var(--tc-primary) 30%, var(--tc-border)); }
.tc-score { font-weight:600; }

.tc-children { margin-left: 46px; border-left:2px solid color-mix(in srgb, var(--tc-primary) 15%, transparent); padding-left:12px; }

/* Load more */
.tc-load-more-wrap { text-align:center; margin:12px 0; }
.tc-load-more { padding:8px 14px; border:1px solid var(--tc-border); background:var(--tc-card); color: var(--tc-text); border-radius:10px; cursor:pointer; }

/* Primary accents */
#tc-root .tc-send, #tc-root .tc-action:hover { background: var(--tc-primary); color:#fff; border-color: var(--tc-primary); }

/* Smooth */
#tc-root .tc-action, #tc-root .tc-send, #tc-root .tc-text, #tc-root .tc-editor, #tc-root .tc-load-more, #tc-root .tc-sort select { transition: all .18s ease; }


/*  ROLE BADGES */
.tc-badge{display:inline-block;padding:3px 7px;font-size:.72rem;border-radius:6px;font-weight:600;margin-left:6px;text-transform:uppercase;color:#fff;}
.tc-badge.admin{background:linear-gradient(45deg,#ff4444,#ff6b6b);box-shadow:0 0 9px #ff3d3d;}
.tc-badge.editor{background:linear-gradient(45deg,#b86bff,#d3a6ff);box-shadow:0 0 9px #b86bff;}
.tc-badge.fansub{background:linear-gradient(45deg,#ff9c40,#ffb86b);box-shadow:0 0 9px #ff9c40;}
.tc-badge.vip{background:linear-gradient(135deg,#f7d774,#f5b100);box-shadow:0 0 12px #f5d77a;border:1px solid rgba(255,255,255,0.35);}
.tc-badge.user{background:linear-gradient(45deg,#ff9c40,#ffb86b);box-shadow:0 0 9px #ff9c40;}
.tc-badge.demo{background:linear-gradient(45deg,#ff9c40,#ffb86b);box-shadow:0 0 9px #ff9c40;}
#tc-root,
#tc-root * {
  position: relative;
  z-index: 999999 !important;
}

.tc-editor textarea,
.tc-editor-actions button {
  pointer-events: auto !important;
}
/* Arka planları koyu yap */
#tc-root {
  --tc-bg: #5E5C5C;
  --tc-bg2: #2a2c33;
  background: var(--tc-bg);
  color: #e2e2e2;
}

.tc-item {
  border-bottom: 1px solid #333;
  padding: 12px 0;
}

/* Avatar yuvarlak */
.tc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

/* Metin */
.tc-meta {
  opacity: .8;
}

/* Butonlar */
.tc-action, .tc-send {
  background: #ffcc00;
  color: #000;
  border-radius: 6px;
  padding: 6px 12px;
  font-weight: 600;
}

/* Hover efekti */
.tc-action:hover, .tc-send:hover {
  background: #e4b600;
}

/* Çocuk (reply) indent */
.tc-children {
  border-left: 2px solid #ffcc00;
  margin-left: 40px;
  padding-left: 20px;
}

/* YouTube style nested replies */
.tc-children {
  border-left: 1px solid rgba(255,255,255,0.2);
  margin-left: 32px;
  padding-left: 16px;
}
.tc-item { padding:14px 0; }
.tc-meta { opacity:.75; }
.tc-action, .tc-send {
  background:#ffcc00;
  color:#000;
  border-radius:6px;
  padding:6px 12px;
  font-weight:600;
}
.tc-action:hover, .tc-send:hover { background:#e4b600; }


/* Pinned badge */
.tc-pinned{
  background:#ffcc00;
  color:#000;
  padding:3px 8px;
  border-radius:6px;
  font-weight:700;
  box-shadow:0 0 10px #ffcc00;
  margin-left:6px;
}
/* İç içe cevap görünümü (YouTube Style B) */
.tc-children {
  display: block;
  margin-left: 36px !important;
  padding-left: 16px !important;
  border-left: 1px solid rgba(255,255,255,0.18);
}

/* Cevapların yan yana değil dikey gelmesi için */
.tc-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Çocuklar kesinlikle kendi satırına geçsin */
.tc-children {
  display: block !important;
  margin-left: 36px !important;
  padding-left: 16px !important;
  border-left: 1px solid rgba(255,255,255,0.25);
}

/* Çocuk içindeki tc-item flex davranışını kır */
.tc-children .tc-item {
  display: flex !important;
  flex-direction: row !important;
}

/* Cevap iç içe büyüdükçe daha da içeri kaydır */
.tc-children .tc-children {
  margin-left: 36px !important;
}

/* Avatar + içerik hizalama */
.tc-body {
  flex: 1;
}
/* Yorum bileşenini tema grid sisteminden kurtar */
#tc-root {
  width: 100% !important;
  display: block !important;
}

/* Üst parent container hangi .row içinde olursa olsun kolonları iptal et */
#tc-root .row,
#tc-root [class*="col-"] {
  display: block !important;
  width: 96% !important;
  max-width: 96% !important;
  float: none !important;
  padding: 0 !important;
}

/* Artık iç içe cevaplar düzgün çalışacak */
.tc-children {
  margin-left: 32px !important;
  border-left: 1px solid rgba(255,255,255,0.2);
  padding-left: 14px;
}
/* --- Yorum listesinde kolon/flex/grid'i TAMAMEN kapat --- */
#tc-root .tc-list {
  display: block !important;           /* flex/grid/columns kapat */
  grid-template-columns: none !important;
  column-count: 1 !important;
  column-gap: 0 !important;
  columns: auto !important;
  flex-wrap: nowrap !important;
}

/* Liste öğeleri tek sütunda kalsın, bölünmesin */
#tc-root .tc-list > .tc-item {
  width: 100% !important;
  break-inside: avoid !important;      /* CSS columns/masonry kırmasını engelle */
}

/* Cevap konteyneri de asla kolona bölünmesin */
#tc-root .tc-children {
  display: block !important;
  grid-template-columns: none !important;
  column-count: 1 !important;
  column-gap: 0 !important;
  columns: auto !important;

  margin-left: 36px !important;        /* içe kaydırma */
  padding-left: 16px !important;
  border-left: 1px solid rgba(255,255,255,0.22);
}

/* Cevap içindeki öğeler yatay (avatar+gövde) ama satır taşması yok */
#tc-root .tc-children .tc-item {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

/* Güvenlik: tc-root içinde olası .row/.col kolonlarını iptal et */
#tc-root .row,
#tc-root [class*="col-"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}
/* Listeyi mutlak dikey listeye zorla */
#tc-root .tc-list {
  display: block !important;
}

/* Her yorum satırı kendi satırını alsın */
#tc-root .tc-item {
  display: flex !important;
  width: 100% !important;
}

/* Yanıt grubunu satır kırarak içeri kaydır */
#tc-root .tc-children {
  display: block !important;
  width: 100% !important;
}

/* --- AŞIRI ÖNEMLİ: Önce tüm önceki tc-children ve layout kurallarını sıfırlarız --- */
#tc-root .tc-children,
#tc-root .tc-list,
#tc-root .tc-item {
  all: unset;
}

/* --- Şimdi YouTube stilini kuruyoruz --- */

#tc-root .tc-list {
  display: block;
}

#tc-root .tc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 14px;
}

#tc-root .tc-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}

#tc-root .tc-body {
  flex: 1;
}

#tc-root .tc-children {
  display: block;
  margin-left: 48px;      /* içe kaydırma burası */
  border-left: 2px solid rgba(255,255,255,0.15);
  padding-left: 18px;
}

/* Cevaplar ana yorumun flex düzenini DEVRALMASIN diye */
#tc-root .tc-children .tc-item {
  display: block !important;   /* YAN YANA değil, ÜST ÜSTE */
  margin-top: 12px;
}

/* Avatar yine solda dursun ama block içinde */
#tc-root .tc-children .tc-item .tc-avatar {
  float: left;
  margin-right: 12px;
}

/* İçerik alanı, float avatar yüzünden taşmasın */
#tc-root .tc-children .tc-item .tc-body {
  overflow: hidden;
}

/* Tema 3 kolon bölmeyi TC içinde kapat */
.filmcontent #tc-root,
.filmcontent #tc-root * {
  column-count: 1 !important;
  columns: auto !important;
  column-gap: 0 !important;
  break-inside: avoid !important;
  float: none !important;
}

#tc-root .tc-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

#tc-root .tc-children {
  display: block;
  margin-left: 36px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,0.2);
}

/* --- ANA Aksiyon Kapsayıcı --- */
#tc-root .tc-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

/* Beğeni Grubu (tek çubuk) */
#tc-root .tc-reactions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 18px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  box-shadow: 0 0 6px rgba(0,0,0,0.25);
}

/* Beğen / Beğenme butonları minimal */
#tc-root .tc-action {
  background: none !important;
  border: none !important;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 0;
  display: flex;
  align-items: center;
  transition: .2s ease;
}

/* SVG ikon boyutu */
#tc-root .tc-action::before {
  content: "";
  width: 22px;
  height: 22px;
  mask-size: cover;
  mask-repeat: no-repeat;
  background: #5E5C5C;
  transition: .2s ease;
}

/* 👍 icon */
#tc-root .tc-action.like::before {
  mask-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24"><path d="M14 1a4 4 0 0 1 4 4v3h4v9a3 3 0 0 1-3 3h-4l1 4H9l1-4H6a3 3 0 0 1-3-3v-7a3 3 0 0 1 3-3h5l1.4-4.2A4 4 0 0 1 14 1Z"/></svg>');
}

/* 👎 icon */
#tc-root .tc-action.dislike::before {
  mask-image: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 24 24"><path d="M10 23a4 4 0 0 1-4-4v-3H2V7a3 3 0 0 1 3-3h4L8 0h8l-1 4h3a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3h-5l-1.4 4.2A4 4 0 0 1 10 23Z"/></svg>');
}

/* Hover Parlama */
#tc-root .tc-action:hover::before {
  background: #ffcc00;
  filter: drop-shadow(0 0 8px #ffcc00);
  transform: scale(1.15);
}

/* PUAN ORTADA */
#tc-root .tc-score {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  transition: .25s;
}

/* Puan değişince animasyon */
#tc-root .tc-score.flash {
  color: #ffcc00 !important;
  text-shadow: 0 0 12px #ffcc00;
}

/* Yanıtla Butonu Ayrı */
#tc-root .tc-action.reply {
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #fff !important;
}
#tc-root .tc-action.reply:hover {
  background: #ffcc00 !important;
  color: #000 !important;
  border-color: #ffcc00 !important;
}
/* REACTION BAR */
.tc-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

/* Yeni beğeni alanı */
.tc-reactions {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #3a3a3a;
    border-radius: 50px;
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.12);
}

/* Sayı */
.tc-score {
    font-weight: 700;
    color: #fff;
}

/* Flash animasyonu */
.tc-score.flash {
    animation: scoreflash .4s ease;
}
@keyframes scoreflash {
    0% { transform: scale(1); color: #fff; }
    50% { transform: scale(1.35); color: #ffcc00; }
    100% { transform: scale(1); color: #fff; }
}

/* Beğen ve Beğenme ikon butonları */
.tc-reactions .tc-action {
    background: transparent !important;
    border: none !important;
    padding: 0;
    cursor: pointer;
    filter: brightness(1);
    transition: .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Hover efekti */
.tc-reactions .tc-action:hover {
    filter: brightness(1.8);
}

/* İkonlar */
.tc-action.like::before {
    content: "👍";
}

.tc-action.dislike::before {
    content: "👎";
}

/* Yanıtla butonu */
.tc-action.reply {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 4px 12px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
}
.tc-action.reply:hover {
    background: rgba(255,255,255,0.28);
}

/* Reaction bar */
.tc-reactions {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Reaction buttons */
.tc-action {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ICON */
.tc-action img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
}

/* Score */
.tc-score {
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}

/* Hover Glow */
.tc-action img:hover {
  filter: drop-shadow(0 0 6px #ffcc00);
  transform: scale(1.1);
  transition: .2s;
}

/* Reaction bar */
.tc-reactions {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.07);
  padding: 6px 14px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.15);
}

/* Reaction buttons */
.tc-action {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ICON */
.tc-action img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: inline-block;
}

/* Score */
.tc-score {
  font-weight: 600;
  min-width: 18px;
  text-align: center;
  display: inline-block;
}

/* Hover Glow */
.tc-action img:hover {
  filter: drop-shadow(0 0 6px #ffcc00);
  transform: scale(1.1);
  transition: .2s;
}

/* Reaction Bar */
.tc-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 6px 14px;
  border-radius: 30px;
}

/* Single reaction button */
.tc-btn-like,
.tc-btn-dislike {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 50px;
  transition: .2s;
}

/* PNG icons */
.tc-btn-like img,
.tc-btn-dislike img {
  width: 20px;
  height: 20px;
}

/* Score */
.tc-score {
  font-weight: 600;
  font-size: 15px;
  min-width: 24px;
  text-align: center;
}

/* States */
.tc-btn-like:hover { filter: drop-shadow(0 0 6px #3cff75); transform: scale(1.15); }
.tc-btn-dislike:hover { filter: drop-shadow(0 0 6px #ff4444); transform: scale(1.15); }

/* Yanıtla butonu */
.tc-reply-btn {
  background: rgba(255,255,255,0.08);
  padding: 6px 14px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.2);
  transition:.2s;
}

.tc-reply-btn:hover {
  background: rgba(255,255,255,0.22);
}