/*
 * Tepa — Yeni Bileşenler CSS
 * 1. İçindekiler (TOC)
 * 2. Okuma İlerleme Çubuğu
 * 3. İlgili Yazılar
 * 4. Tıbbi Uyarı Kutusu
 *
 * main.css @import ile ya da enqueue'da bağımsız olarak yüklenebilir.
 * @package Tepa
 */

/* ═══════════════════════════════════════════════════════════════
   1. İÇİNDEKİLER (TOC)
   ══════════════════════════════════════════════════════════════ */

.tepa-toc {
  --toc-bg: var(--tepa-surface, #f6f7f9);
  --toc-border: var(--tepa-border, #e2e5ea);
  --toc-accent: var(--tepa-primary, #2563eb);
  --toc-text: var(--tepa-text, #1a1d23);
  --toc-muted: var(--tepa-muted, #6b7280);
  --toc-radius: var(--tepa-radius, 10px);

  background: var(--toc-bg);
  border: 1px solid var(--toc-border);
  border-radius: var(--toc-radius);
  padding: 0;
  margin-block: 2rem;
  overflow: hidden;
}

[data-tepa-dark="1"] .tepa-toc {
  --toc-bg: #1e2330;
  --toc-border: #2d3347;
}

/* Başlık / Toggle Butonu */
.tepa-toc__toggle {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: .75rem 1rem;
  cursor: pointer;
  gap: .5rem;
  border-bottom: 1px solid var(--toc-border);
  box-sizing: border-box;
}

.tepa-toc__title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--toc-text);
  letter-spacing: .01em;
}

.tepa-toc__chevron {
  width: 16px;
  height: 16px;
  color: var(--toc-muted);
  flex-shrink: 0;
  transition: transform .25s var(--tepa-ease, ease);
}

.tepa-toc.is-open .tepa-toc__chevron {
  transform: rotate(180deg);
}

/* Liste */
.tepa-toc__list {
  list-style: none;
  margin: 0;
  padding: .5rem 0;
  counter-reset: toc-counter;
}

.tepa-toc__item {
  counter-increment: toc-counter;
  border-bottom: 1px solid transparent;
}

.tepa-toc__item:last-child {
  border-bottom: none;
}

.tepa-toc__item a {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .4rem 1rem;
  font-size: .875rem;
  color: var(--toc-text);
  text-decoration: none;
  transition: color .15s, background .15s;
  line-height: 1.4;
}

.tepa-toc__item a::before {
  content: counter(toc-counter) ".";
  font-size: .75rem;
  font-weight: 600;
  color: var(--toc-muted);
  min-width: 1.25rem;
  flex-shrink: 0;
}

.tepa-toc__item a:hover {
  color: var(--toc-accent);
  background: color-mix(in srgb, var(--toc-accent) 6%, transparent);
}

.tepa-toc__item.is-active > a {
  color: var(--toc-accent);
  font-weight: 500;
  background: color-mix(in srgb, var(--toc-accent) 8%, transparent);
}

/* H3 girintisi */
.tepa-toc__item--h3 a {
  padding-inline-start: 1.75rem;
  font-size: .8125rem;
}

/* Mobil: kapalı başlayabilir */
@media (max-width: 640px) {
  .tepa-toc:not(.is-open) .tepa-toc__list {
    display: none;
  }
}

/* Sticky sidebar modu (single.php'deki sidebar'a konulursa) */
.tepa-toc--sticky {
  position: sticky;
  top: calc(var(--tepa-header-h, 72px) + 1rem);
  max-height: calc(100vh - var(--tepa-header-h, 72px) - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
}


/* ═══════════════════════════════════════════════════════════════
   2. OKUMA İLERLEME ÇUBUĞU
   ══════════════════════════════════════════════════════════════ */

#tepa-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--tepa-primary, #2563eb);
  z-index: 9999;
  transform-origin: left center;
  transition: width .1s linear;
  pointer-events: none;
}

/* Gradient versiyonu (opsiyonel — CSS custom prop ile kontrol edilebilir) */
.tepa-progress--gradient #tepa-reading-progress {
  background: linear-gradient(to right, var(--tepa-primary, #2563eb), var(--tepa-accent, #7c3aed));
}


/* ═══════════════════════════════════════════════════════════════
   3. İLGİLİ YAZILAR
   ══════════════════════════════════════════════════════════════ */

.tepa-related {
  margin-block: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--tepa-border, #e2e5ea);
}

.tepa-related__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tepa-text, #1a1d23);
  margin-block-end: 1.25rem;
}

.tepa-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}

/* Related card — tepa-card base stillerini devralır, ekstra overridelar */
.tepa-card--related .tepa-card__thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: calc(var(--tepa-radius, 10px) - 2px);
  background: var(--tepa-surface, #f6f7f9);
}

.tepa-card--related .tepa-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s var(--tepa-ease, ease);
}

.tepa-card--related:hover .tepa-card__thumb img {
  transform: scale(1.04);
}

.tepa-card--related .tepa-card__body {
  padding: .75rem 0 0;
}

.tepa-card--related .tepa-card__cat {
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tepa-primary, #2563eb);
  text-decoration: none;
}

.tepa-card--related .tepa-card__title {
  font-size: .9375rem;
  line-height: 1.4;
  margin-block: .35rem .5rem;
}

.tepa-card--related .tepa-card__title a {
  color: var(--tepa-text, #1a1d23);
  text-decoration: none;
  transition: color .15s;
}

.tepa-card--related .tepa-card__title a:hover {
  color: var(--tepa-primary, #2563eb);
}

.tepa-card--related .tepa-card__meta {
  font-size: .75rem;
  color: var(--tepa-muted, #6b7280);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

@media (max-width: 480px) {
  .tepa-related__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
}


/* ═══════════════════════════════════════════════════════════════
   4. TIBBİ UYARI KUTUSU
   ══════════════════════════════════════════════════════════════ */

.tepa-medical-notice {
  display: flex;
  align-items: flex-start;
  gap: .875rem;
  padding: 1rem 1.25rem;
  margin-block: 2.5rem;
  border: 1px solid var(--tepa-border, #e2e5ea);
  border-left: 4px solid var(--tepa-warning, #f59e0b);
  border-radius: var(--tepa-radius, 10px);
  background: color-mix(in srgb, var(--tepa-warning, #f59e0b) 6%, var(--tepa-surface, #fff));
}

[data-tepa-dark="1"] .tepa-medical-notice {
  background: color-mix(in srgb, var(--tepa-warning, #f59e0b) 8%, #1e2330);
  border-color: #2d3347;
  border-left-color: var(--tepa-warning, #f59e0b);
}

.tepa-medical-notice__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--tepa-warning, #f59e0b);
  margin-top: .1rem;
}

.tepa-medical-notice__body {
  flex: 1;
  min-width: 0;
}

.tepa-medical-notice__heading {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tepa-text, #1a1d23);
  margin-block-end: .375rem;
}

.tepa-medical-notice__text {
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--tepa-muted, #6b7280);
  margin: 0;
}