/* Aşama 8 · Konu görselleri: yalnızca konu sayfaları yükler; neon tema değişkenleri korunur. */
.topic-visual-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(14px, 2.3vw, 22px);
  margin: clamp(25px, 3.5vw, 38px) 0 clamp(30px, 4vw, 44px);
}
.topic-visual-gallery .visual-gallery__figure {
  min-width: 0;
  border-color: rgba(57, 255, 136, .32);
  background: linear-gradient(145deg, #1a2427, #13191b 78%);
  box-shadow: 0 0 0 1px rgba(57, 255, 136, .055), 0 15px 38px rgba(0, 0, 0, .25);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.topic-visual-gallery .visual-gallery__figure:hover {
  transform: translateY(-2px);
  border-color: rgba(57, 255, 136, .72);
  box-shadow: 0 0 0 1px rgba(57, 255, 136, .15), 0 0 20px rgba(57, 255, 136, .12), 0 18px 40px rgba(0, 0, 0, .3);
}
.topic-visual-gallery .visual-gallery__figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #11191b;
}
.topic-visual-gallery .visual-gallery__figure--raster img {
  aspect-ratio: auto;
  object-fit: contain;
}
.topic-visual-gallery .visual-gallery__figure figcaption {
  min-height: 70px;
  padding: 14px 16px 16px;
  border-top-color: rgba(57, 255, 136, .18);
  color: #bbcdc3;
  font-size: 13px;
  line-height: 1.65;
}
.topic-visual-gallery .visual-gallery__figure figcaption strong {
  margin-bottom: 4px;
  color: #bdffda;
  font-size: 13px;
  font-weight: 680;
}
.topic-visual-gallery .visual-gallery__figure:nth-child(3n + 2) figcaption strong { color: #a9fff1; }
.topic-visual-gallery .visual-gallery__figure:nth-child(3n) figcaption strong { color: #b9ddff; }
.topic-visual-gallery .visual-gallery__figure:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .topic-visual-gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    margin: 23px 0 32px;
  }
  .topic-visual-gallery .visual-gallery__figure:last-child:nth-child(odd) { grid-column: auto; }
  .topic-visual-gallery .visual-gallery__figure figcaption {
    min-height: 0;
    padding: 12px 14px 14px;
    font-size: 12px;
  }
  .topic-visual-gallery .visual-gallery__figure figcaption strong { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .topic-visual-gallery .visual-gallery__figure { transition: none; }
  .topic-visual-gallery .visual-gallery__figure:hover { transform: none; }
}