/* Galeri sayfası (/galeri) — yalnız token. Izgara, süzgeç ve lightbox main.css'tedir; burada yalnız teklif notu var. */

/* Not, ızgaranın son hücresidir. Varsayılan: tam satır. ≥ 900 px'te (3 sütun) son sıranın boş kalan sütunlarını kaplar:
   görünen görsel sayısı 3n+1 ise iki, 3n+2 ise tek sütun ("son görünen görsel kaçıncı?" → ardından gelen not).
   Sayı süzgeçle değişince kendiliğinden yeniden hesaplanır; nth-child(… of …) desteklemeyen tarayıcıda kural
   yok sayılır ve not tam satır kalır. */
.gal-tail {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  container: gal-tail / inline-size;
}

@media (min-width: 900px) {
  li:nth-child(3n+1 of li:not([hidden]):not(.gal-tail)):nth-last-child(1 of li:not([hidden]):not(.gal-tail)) ~ .gal-tail { grid-column: span 2; }
  li:nth-child(3n+2 of li:not([hidden]):not(.gal-tail)):nth-last-child(1 of li:not([hidden]):not(.gal-tail)) ~ .gal-tail { grid-column: span 1; }
}

/* Not kutusu: simge karesi + başlık / metin + düğme (teklif kutusuyla aynı yüzey dili, daha sakin).
   Hücre yüksekliğine uzar; düğme alta yaslanır. */
.gal-note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 12rem);
}

.gal-note::before {                /* sol üst köşede vurgu çentiği */
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 4rem;
  height: 2px;
  background: var(--accent);
}

.gal-list > .gal-note { margin-top: var(--s-6); }   /* ızgara dışına düşerse */
.gal-note__title { font-size: var(--fs-h3); }

.gal-note__text {
  max-width: 46rem;
  margin-top: .625rem;
  color: var(--text-2);
  line-height: 1.6;
}

.gal-note .btn { margin-top: auto; }

@media (min-width: 640px) {
  .gal-note { padding: var(--s-6); }
}

/* Geniş kutu (tam satır): simge · metin · düğme yan yana */
@container gal-tail (min-width: 58rem) {
  .gal-note { flex-direction: row; align-items: center; gap: var(--s-6); }
  .gal-note__body { flex: 1; min-width: 0; }
  .gal-note .btn { flex: none; margin-top: 0; }
}