/*
 * Tepa — Kademeli Hiyerarşi (Nested Accordion) + Yüksek Verim Modu
 * + Popover Sözlük Terimleri + İç İçe TOC
 *
 * @package Tepa
 */

/* ═══════════════════════════════════════════════════════════════
   1. AKORDİYON AĞACI
   ══════════════════════════════════════════════════════════════ */

.tepa-acc-root {
  margin-block: 1.5rem;
}

.tepa-acc {
  --acc-bg: var(--tepa-surface, #fff);
  --acc-border: var(--tepa-border, rgba(17,24,39,.08));
  --acc-accent: var(--tepa-primary, #4668f2);

  border: 1px solid var(--acc-border);
  border-radius: var(--tepa-radius-md, 12px);
  background: var(--acc-bg);
  margin-block: .6rem;
  overflow: hidden;
  transition: box-shadow .2s var(--tepa-ease, ease);
}

.tepa-acc.is-expanded {
  box-shadow: var(--tepa-shadow, 0 16px 40px rgba(15,23,42,.07));
}

/* Kademe girintisi: her seviye biraz daha içeri + soluk vurgu çizgisi */
.tepa-acc--l3 { margin-left: 0; border-left: 3px solid var(--acc-accent); opacity: .97; }
.tepa-acc--l4 { border-left: 3px solid var(--tepa-secondary, #1dc4a1); }

.tepa-acc__children {
  padding: 0 .9rem .9rem;
}

.tepa-acc__heading {
  margin: 0;
}

.tepa-acc__toggle {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .65rem;
  width: 100%;
  padding: .9rem 1.1rem;
  cursor: pointer;
  font-family: var(--tepa-font, inherit);
}

.tepa-acc--l3 .tepa-acc__toggle,
.tepa-acc--l4 .tepa-acc__toggle {
  padding-block: .65rem;
}

.tepa-acc__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--tepa-text-muted, #53627c);
  transition: transform .25s var(--tepa-ease, ease);
}

.tepa-acc.is-expanded > .tepa-acc__heading .tepa-acc__chevron {
  transform: rotate(180deg);
  color: var(--acc-accent);
}

.tepa-acc__title {
  flex: 1;
  text-align: left;
  font-weight: var(--tepa-fw-semi, 600);
  color: var(--tepa-text-strong, #0f172a);
  line-height: 1.4;
}

.tepa-acc--l2 .tepa-acc__title { font-size: var(--tepa-size-lg, 1.25rem); }
.tepa-acc--l3 .tepa-acc__title { font-size: var(--tepa-size-md, 1.125rem); font-weight: var(--tepa-fw-medium, 500); }
.tepa-acc--l4 .tepa-acc__title { font-size: var(--tepa-size-base, 1rem); font-weight: var(--tepa-fw-medium, 500); }

.tepa-acc__hy-badge {
  flex-shrink: 0;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .15rem .4rem;
  border-radius: var(--tepa-radius-full, 999px);
  background: color-mix(in srgb, var(--tepa-secondary, #1dc4a1) 18%, transparent);
  color: var(--tepa-secondary-dark, #11957a);
}

/* Panel: CSS grid-rows animasyon tekniği — JS height hesaplaması gerekmez */
.tepa-acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--tepa-ease, ease);
}

.tepa-acc.is-expanded > .tepa-acc__panel {
  grid-template-rows: 1fr;
}

.tepa-acc__panel-inner {
  overflow: hidden;
  min-height: 0;
}

.tepa-acc__body {
  padding: 0 1.1rem 1.1rem;
}

.tepa-acc--l3 > .tepa-acc__panel .tepa-acc__body,
.tepa-acc--l4 > .tepa-acc__panel .tepa-acc__body {
  padding-bottom: .75rem;
}

.tepa-acc__body > *:first-child { margin-top: 0; }
.tepa-acc__body > *:last-child { margin-bottom: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .tepa-acc__panel,
  .tepa-acc__chevron { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   2. YÜKSEK VERİM (HIGH-YIELD) MODU
   ══════════════════════════════════════════════════════════════ */

.tepa-hy-toggle {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  margin: .5rem 1rem;
  font-size: .8rem;
  font-weight: 600;
  border-radius: var(--tepa-radius-full, 999px);
  border: 1.5px solid var(--tepa-secondary, #1dc4a1);
  color: var(--tepa-secondary-dark, #11957a);
  cursor: pointer;
  transition: background .2s var(--tepa-ease, ease), color .2s var(--tepa-ease, ease);
}

.tepa-hy-toggle:hover {
  background: color-mix(in srgb, var(--tepa-secondary, #1dc4a1) 12%, transparent);
}

.tepa-hy-toggle[aria-pressed="true"] {
  background: var(--tepa-secondary, #1dc4a1);
  color: #fff;
}

.tepa-hy-toggle__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* Yazar, Gutenberg'de bir bloğa "Ek CSS sınıfı: tepa-hy" ekleyerek
   o bloğu Yüksek Verim içeriği olarak işaretler. */
.tepa-hy {
  position: relative;
  padding-left: .8rem;
  border-left: 3px solid var(--tepa-secondary, #1dc4a1);
  background: color-mix(in srgb, var(--tepa-secondary, #1dc4a1) 6%, transparent);
  border-radius: 0 var(--tepa-radius-sm, 6px) var(--tepa-radius-sm, 6px) 0;
}

body.tepa-hy-mode .tepa-acc__body > *:not(.tepa-hy) {
  opacity: .38;
}

body.tepa-hy-mode .tepa-acc__body .tepa-hy {
  opacity: 1;
}

body.tepa-hy-mode .tepa-acc:not(.tepa-acc--has-hy) > .tepa-acc__heading .tepa-acc__title {
  color: var(--tepa-text-muted, #53627c);
}

/* ═══════════════════════════════════════════════════════════════
   3. POPOVER SÖZLÜK TERİMLERİ
   ══════════════════════════════════════════════════════════════ */

.tepa-term-trigger {
  cursor: pointer;
  text-decoration: underline dotted var(--tepa-primary, #4668f2) 1.5px;
  text-underline-offset: 3px;
  color: inherit;
}

button.tepa-term-trigger {
  all: unset;
  cursor: pointer;
  text-decoration: underline dotted var(--tepa-primary, #4668f2) 1.5px;
  text-underline-offset: 3px;
  font: inherit;
  color: var(--tepa-link, #3158f0);
}

.tepa-term-trigger:hover,
.tepa-term-trigger[aria-expanded="true"] {
  background: color-mix(in srgb, var(--tepa-primary, #4668f2) 10%, transparent);
}

.tepa-term-trigger:focus-visible {
  outline: 2px solid var(--tepa-primary, #4668f2);
  outline-offset: 2px;
}

.tepa-term-popover {
  position: absolute;
  z-index: 9999;
  width: min(320px, calc(100vw - 32px));
  background: var(--tepa-panel-strong, #fff);
  backdrop-filter: var(--tepa-blur, blur(18px));
  border: 1px solid var(--tepa-border, rgba(17,24,39,.08));
  border-radius: var(--tepa-radius-md, 12px);
  box-shadow: var(--tepa-shadow-lg, 0 28px 70px rgba(15,23,42,.12));
  padding: .9rem 1rem;
  font-size: .875rem;
  line-height: 1.5;
  animation: tepa-term-pop .18s var(--tepa-ease, ease);
}

@keyframes tepa-term-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tepa-term-popover__title {
  font-weight: 700;
  margin-bottom: .35rem;
  color: var(--tepa-text-strong, #0f172a);
}

.tepa-term-popover__body {
  color: var(--tepa-text, #172033);
}

.tepa-term-popover__link {
  display: inline-block;
  margin-top: .55rem;
  font-weight: 600;
  color: var(--tepa-link, #3158f0);
  text-decoration: none;
}

.tepa-term-popover__link:hover { text-decoration: underline; }

.tepa-term-popover__loading {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--tepa-text-muted, #53627c);
}

.tepa-term-popover__spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid var(--tepa-border-strong, rgba(17,24,39,.14));
  border-top-color: var(--tepa-primary, #4668f2);
  animation: tepa-term-spin .7s linear infinite;
}

@keyframes tepa-term-spin {
  to { transform: rotate(360deg); }
}

[data-tepa-dark="1"] .tepa-term-popover {
  background: rgba(26,31,44,.96);
  border-color: #2d3347;
}

/* ═══════════════════════════════════════════════════════════════
   4. İÇ İÇE TOC (nested / kademeli)
   ══════════════════════════════════════════════════════════════ */

.tepa-toc__sublist {
  list-style: none;
  margin: 0;
  padding: 0 0 .25rem 1.1rem;
}

.tepa-toc__sublist .tepa-toc__item a {
  font-size: .82rem;
  padding-block: .35rem;
}

.tepa-toc__item.has-active-child > a {
  color: var(--toc-accent, var(--tepa-primary, #4668f2));
}