/*
 * Yeni CMS yapısı için küçük eklemeler. Eski stil dosyalarına dokunmadan en sona yüklenir.
 * Editörden gelen içerik not/vurgu kutularında paragraf (<p>) olarak üretildiği için boşlukları sıfırlıyoruz.
 */
.editorial-note p,
.callout p,
.pullquote p {
  margin: 0;
}
.editorial-note p + p,
.callout p + p,
.pullquote p + p {
  margin-top: 8px;
}

/* "Bu yazıda" maddeleri artık ilgili ara başlığa götüren bağlantılar. */
.side-box li a {
  color: inherit;
  text-decoration: none;
}
.side-box li a:hover {
  text-decoration: underline;
}
.prose h2[id] {
  scroll-margin-top: 24px;
}

/* Editörle eklenen görseller metin genişliğini aşmasın. */
.prose figure img {
  max-width: 100%;
  height: auto;
}

/* Ana sayfa yazı kartlarının tamamı tıklanabilir; bağlantı ızgarada yer kaplamaz. */
.editorial-card {
  position: relative;
}
.editorial-card > .editorial-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  font-size: 0;
}

/* Başlık altındaki yazar adı yazar sayfasına bağlanır; görünümü eski düz metinle aynı kalsın. */
.article-top .meta a {
  color: inherit;
  text-decoration: none;
}
.article-top .meta a:hover {
  text-decoration: underline;
}

/* ------------------------------------------------------------------ Analizler: branş filtresi */
/* Seçili filtre kırmızı zemin + beyaz yazı; seçili olmayanlar (Tümü dahil) aynı sade görünümde. */
.analyses-page .filter-row > [data-filter] {
  background: #fff;
  border-color: #dfe4e8;
  color: #596572;
}
.analyses-page .filter-row > [data-filter].active {
  background: #d71920;
  border-color: #d71920;
  color: #fff;
}

/* ------------------------------------------------------------------ Yazı: mobil "Bu yazıda" */
.mobile-toc {
  display: none;
}
@media (max-width: 900px) {
  .mobile-toc {
    display: block;
    margin: 0 0 28px;
    background: #fff;
    border: 1px solid #dce3e7;
    border-left: 4px solid #e31b23;
  }
  .mobile-toc summary {
    cursor: pointer;
    list-style: none;
    padding: 14px 16px;
    font:
      800 12px/1 Inter,
      Arial,
      sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #172737;
  }
  .mobile-toc summary::-webkit-details-marker {
    display: none;
  }
  .mobile-toc summary::after {
    content: '+';
    float: right;
    font-size: 16px;
    line-height: 12px;
    color: #e31b23;
  }
  .mobile-toc[open] summary::after {
    content: '–';
  }
  .mobile-toc ul {
    margin: 0;
    padding: 0 16px 16px 34px;
    color: #405560;
    font-size: 15px;
    line-height: 1.5;
  }
  .mobile-toc li + li {
    margin-top: 6px;
  }
  .mobile-toc a {
    color: inherit;
    text-decoration: none;
  }
  /* Aynı liste artık yukarıda; yazının sonundaki kopyasını gösterme. */
  .side .toc-box {
    display: none;
  }
}

/* ------------------------------------------------------------------ Ana sayfa: tablet */
/* portal-refine.css girişi her ekranda iki sütuna zorluyordu; 1100px altında öne çıkan analiz alta insin. */
@media (max-width: 1100px) {
  .reference-home .hero-grid {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------------ Ana sayfa: telefon */
@media (max-width: 650px) {
  /* Giriş: metin üstte, görsel altında tam genişlikte (eskiden sağ alta sıkışıp boşluk bırakıyordu). */
  .reference-home .hero-intro {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
  }
  .reference-home .intro-copy {
    padding: 30px 20px 22px;
  }
  .reference-home .hero-intro figure {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    height: 320px;
    margin: 0 16px 18px;
    opacity: 1;
    overflow: hidden;
    border-radius: 12px;
  }
  .reference-home .hero-intro figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
  }
  .reference-home .hero-intro figcaption {
    display: block;
    left: 7%;
    bottom: 16%;
    font-size: 22px;
  }

  /* Yazı kartları: tek sütun, görsel solda metin sağda. */
  .reference-home .content-rail {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .reference-home .editorial-card {
    grid-template-columns: 112px minmax(0, 1fr);
    grid-template-rows: auto;
    min-height: 0;
  }
  /* Eski CSS'teki "span 2" kuralları tek sütunlu ızgarada gizli ikinci sütun açıyordu. */
  .reference-home .content-rail > * {
    grid-column: 1 / -1;
  }
  .reference-home .editorial-card img {
    height: 100%;
    min-height: 120px;
  }
  .reference-home .editorial-card > div {
    padding: 14px 14px 12px;
  }
  .reference-home .editorial-card h3 {
    font-size: 16px;
    line-height: 1.2;
  }
  .reference-home .editorial-card > div > a {
    display: none;
  }

  /* Maçın Zihinsel Akışı: başlık alt alta, timeline yana taşmadan 3 sütun. */
  .reference-home .mind-heading {
    display: block;
  }
  .reference-home .mind-heading span {
    display: block;
    margin-bottom: 6px;
    line-height: 1.4;
  }
  .reference-home .mind-heading h2 {
    font-size: 24px;
  }
  .reference-home .mind-timeline {
    overflow: visible;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #dce3e6;
  }
  .reference-home .mind-timeline div {
    min-width: 0;
    padding: 11px 10px;
    border: 0;
    background: #fff;
  }
  .reference-home .mind-timeline div.active {
    background: var(--red, #d71920);
  }
  /* Anlar 3'e bölünmüyorsa son kutu satırı doldursun. */
  .reference-home .mind-timeline div:last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }
  .reference-home .mind-timeline div:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }
  .reference-home .mind-timeline b {
    font-size: 20px;
  }
}

/* ------------------------------------------------------------------ Mobil menü */
/* styles.css / portal-home.css'teki eski menünün kuralları (.site-header nav{height:0;overflow:hidden})
   ana sayfa ve Analizler'de yeni menüyü de kapatıyordu; açılan menü 25px'e sıkışıp görünmüyordu. */
@media (max-width: 820px) {
  body.psikospor-shell .ps-shell-header .ps-shell-nav {
    height: auto;
    overflow: visible;
    transition: none;
    gap: 0;
    margin: 0;
  }
}

/* ------------------------------------------------------------------ Yazı içi maç merkezi: telefon */
/* Timeline yana kayan gizli bir şeritti; ana sayfadaki gibi 3 sütunlu ızgara. */
@media (max-width: 760px) {
  .article-match-center__timeline {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
  .article-match-center__timeline-item {
    flex: none;
    padding: 12px 10px;
  }
  .article-match-center__timeline-item:last-child:nth-child(3n + 1) {
    grid-column: span 3;
  }
  .article-match-center__timeline-item:last-child:nth-child(3n + 2) {
    grid-column: span 2;
  }
}
/* Profil puanları henüz girilmemiş analiz: psikolojik özet tek başına tam genişlikte. */
.article-match-center__body--single {
  grid-template-columns: 1fr;
}

/* Ana sayfada da aynısı: profil puanı yoksa sağ taraf boş kalmasın. */
.reference-home .mind-profiles--single {
  grid-template-columns: 1fr;
}
.reference-home .mind-profiles--single #home-comparison {
  display: none;
}

/* ------------------------------------------------------------------ Ana sayfa: öne çıkan analiz okları */
/* Eski sitede oklar süstü; artık analizler arasında geçiş yapıyor. Kartı kaplayan bağlantının üstünde kalsın. */
.reference-home .featured-analysis .feature-arrows {
  z-index: 5;
}
.reference-home .featured-analysis .feature-arrows button {
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
/* Her <b> kendi düğmesinin tek çocuğu; eski ":last-child kırmızı" kuralı ikisini de boyamasın. */
.reference-home .featured-analysis .feature-arrows button:first-child b {
  background: #33404c;
}
.reference-home .featured-analysis .feature-arrows button:hover b {
  filter: brightness(1.15);
}
.reference-home .featured-analysis .feature-arrows button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ------------------------------------------------------------------ Maç analizi görselleri */
/* Panelden yüklenen timeline, psikolojik özet ve zihinsel profil görselleri "Maçın Zihinsel Akışı" düzeninde:
   timeline üstte tam genişlik, özet solda, profil sağda. Tıklayınca tam boyutu açılır. */
.analysis-image {
  min-width: 0;
  margin: 0;
  align-self: start;
}
.analysis-image a {
  display: block;
}
.analysis-image img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #dce3e6;
}
.article-match-center__timeline-image {
  margin-top: 22px;
}
.reference-home .mind-timeline-image {
  margin: 19px 0;
}