/* İçerik bileşenleri — editör (content_css) ve önyüz ortak kullanır.
   Tek kaynak: adminde görülen ile sitede çıkan birebir aynı olsun.
   var(--x, fallback): editör iframe'inde tema değişkenleri yok, fallback devreye girer. */

/* ---- Bilgi kutusu (5 renk) ---- */
.cbox {
  --c: #1f6fd6;
  --ct: rgba(31, 111, 214, .10);
  margin: 16px 0;
  padding: 13px 15px;
  border: 1px solid var(--line, #eceef2);
  border-left: 3px solid var(--c);
  border-radius: 12px;
  background: var(--ct);
  color: var(--ink, #1b2440);
  font-size: 14.5px;
  line-height: 1.65;
}
.cbox > :first-child { margin-top: 0 }
.cbox > :last-child { margin-bottom: 0 }
.cbox-red    { --c: #e8252d; --ct: rgba(232, 37, 45, .10) }
.cbox-green  { --c: #1fa463; --ct: rgba(31, 164, 99, .10) }
.cbox-yellow { --c: #f5a623; --ct: rgba(245, 166, 35, .13) }
.cbox-purple { --c: #8b5cf6; --ct: rgba(139, 92, 246, .12) }

/* ---- Satır içi vurgu etiketi (pill) ---- */
.chl {
  --c: #f5a623;
  display: inline-block;
  padding: 2px 9px;
  border-radius: 6px;
  background: var(--c);
  color: #fff;
  font-weight: 700;
  font-size: .92em;
  line-height: 1.5;
}
.chl-yellow { --c: #f5a623; color: #3a2a00 }
.chl-red    { --c: #e8252d }
.chl-blue   { --c: #1f6fd6 }
.chl-purple { --c: #8b5cf6 }
.chl-green  { --c: #1fa463 }

/* ---- Renkli metin ---- */
.ctx { --c: #e8252d; color: var(--c); font-weight: 700 }
.ctx-red    { --c: #e8252d }
.ctx-blue   { --c: #1f6fd6 }
.ctx-green  { --c: #1fa463 }
.ctx-yellow { --c: #b8791a }
.ctx-purple { --c: #8b5cf6 }

/* ---- Numaralı rozet listesi ---- */
ol.cnum {
  list-style: none;
  padding-left: 0;
  margin: 16px 0;
  counter-reset: cnum;
}
ol.cnum > li {
  position: relative;
  padding-left: 42px;
  margin: 0 0 13px;
  min-height: 26px;
  line-height: 1.65;
}
ol.cnum > li::before {
  counter-increment: cnum;
  content: counter(cnum);
  position: absolute;
  left: 0;
  top: .1em;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy, #16233f);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ---- Koyu tema: tint'leri güçlendir, rozeti aç ---- */
:root[data-theme="dark"] .cbox { --ct: rgba(31, 111, 214, .18) }
:root[data-theme="dark"] .cbox-red { --ct: rgba(232, 37, 45, .18) }
:root[data-theme="dark"] .cbox-green { --ct: rgba(31, 164, 99, .18) }
:root[data-theme="dark"] .cbox-yellow { --ct: rgba(245, 166, 35, .18) }
:root[data-theme="dark"] .cbox-purple { --ct: rgba(139, 92, 246, .20) }
:root[data-theme="dark"] .ctx-yellow { --c: #f5a623 }
:root[data-theme="dark"] ol.cnum > li::before { background: #2e3c5e }

/* ---- Dar ekran ---- */
@media (max-width: 480px) {
  .cbox { padding: 12px 13px; font-size: 14px }
  ol.cnum > li { padding-left: 38px }
  ol.cnum > li::before { width: 24px; height: 24px; font-size: 12.5px }
}