/* Ortak fotoğraf arşivi: filtreli kolaj ızgarası + tam ekran görüntüleyici.
   Her tasarım kendi renklerini .eg-g--dN değişkenleriyle verir. */
.eg-g {
  --g-fg: currentColor;
  --g-muted: rgba(127, 127, 127, .9);
  --g-line: rgba(127, 127, 127, .3);
  --g-accent: currentColor;
  --g-accent-ink: #fff;
  --g-font: inherit;
  --g-radius: 0px;
  --g-gap: clamp(8px, 1.2vw, 16px);
  --g-cols: 4;
  color: var(--g-fg);
  margin-top: clamp(24px, 3.4vw, 44px);
}
.eg-g__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: clamp(18px, 2.4vw, 28px); }
.eg-g__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.eg-g__chip {
  font: 500 .8rem/1 var(--g-font); letter-spacing: .04em; text-transform: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; min-height: 40px; border: 1px solid var(--g-line); border-radius: 999px;
  background: transparent; color: var(--g-fg); cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.eg-g__chip sup { font-size: .72em; opacity: .7; top: 0; }
.eg-g__chip:hover { border-color: var(--g-fg); }
.eg-g__chip[aria-pressed="true"] { background: var(--g-accent); border-color: var(--g-accent); color: var(--g-accent-ink); }
.eg-g__hint { margin: 0; font: 400 .8rem/1.4 var(--g-font); color: var(--g-muted); }

.eg-g__grid { list-style: none; margin: 0; padding: 0; columns: var(--g-cols); column-gap: var(--g-gap); }
.eg-g__item { break-inside: avoid; margin: 0 0 var(--g-gap); }
.eg-g__item[hidden] { display: none; }
.eg-g__open {
  display: block; width: 100%; padding: 0; border: 0; background: rgba(127, 127, 127, .14); cursor: zoom-in;
  border-radius: var(--g-radius); overflow: hidden; position: relative;
}
.eg-g__open img { display: block; width: 100%; height: auto; transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s; }
.eg-g__open:hover img { transform: scale(1.035); }
.eg-g__open:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 3px; }
.eg-g__cap { display: flex; gap: 8px; align-items: baseline; margin: 8px 0 0; font: 400 .78rem/1.35 var(--g-font); color: var(--g-muted); }
.eg-g__n { font-variant-numeric: tabular-nums; opacity: .7; }
.eg-g__item--f1 .eg-g__n { color: var(--g-accent); opacity: 1; }

@media (max-width: 1100px) { .eg-g { --g-cols: 3; } }
@media (max-width: 700px) { .eg-g { --g-cols: 2; } .eg-g__hint { display: none; } }

/* ---------- Tam ekran görüntüleyici ---------- */
.eg-lb {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: rgba(8, 8, 9, .96); color: #f4f1ea; overflow: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.eg-lb::backdrop { background: rgba(8, 8, 9, .96); }
.eg-lb[open] { display: grid; grid-template-rows: 1fr auto; }
.eg-lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 56px 64px 8px; touch-action: pan-y; }
.eg-lb__img { max-width: calc(100vw - 128px); max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; transition: opacity .25s; }
.eg-lb__img.is-loading { opacity: .25; }
.eg-lb__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 20px 18px; font-size: .9rem; }
.eg-lb__cap { margin: 0; }
.eg-lb__count { font-variant-numeric: tabular-nums; color: #a19e96; white-space: nowrap; }
.eg-lb__btn {
  position: absolute; z-index: 2; display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(244, 241, 234, .25); border-radius: 50%; background: rgba(8, 8, 9, .55); color: inherit;
  font-size: 20px; line-height: 1; cursor: pointer; transition: background .2s, border-color .2s;
}
.eg-lb__btn:hover, .eg-lb__btn:focus-visible { background: rgba(244, 241, 234, .14); border-color: #f4f1ea; outline: none; }
.eg-lb__close { top: 10px; right: 12px; }
.eg-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.eg-lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px) {
  .eg-lb__stage { padding: 60px 8px 4px; }
  .eg-lb__img { max-width: calc(100vw - 16px); max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  .eg-lb__prev, .eg-lb__next { top: auto; bottom: 8px; transform: none; }
  .eg-lb__bar { padding: 12px 70px 18px; text-align: center; flex-direction: column; gap: 4px; }
}
html.eg-lb-open { overflow: hidden; }
/* Görüntüleyici en üst katmanda açılır: özel imleç onun altında kalır, bu yüzden burada normal imleç görünsün */
.eg-lb, .eg-lb * { cursor: auto !important; }
.eg-lb .eg-lb__btn { cursor: pointer !important; }
html.eg-lb-open .cursor { display: none !important; }

/* ---------- Tasarım temaları ---------- */
.eg-g--d1 { --g-fg: var(--ink); --g-muted: var(--muted-light); --g-line: var(--line-light); --g-accent: var(--signal-ink); --g-font: var(--font-mono); --g-radius: 4px; }
.eg-g--d2 { --g-fg: var(--ink); --g-muted: var(--muted); --g-line: var(--line); --g-accent: var(--accent); --g-font: var(--mono); --g-radius: 0px; }
.eg-g--d3 { --g-fg: var(--fg); --g-muted: var(--gray); --g-line: var(--line); --g-accent: var(--pink); --g-accent-ink: var(--ink); --g-font: var(--mono); --g-radius: 16px; }
.eg-g--d4 { --g-fg: var(--ink); --g-muted: var(--muted); --g-line: var(--line-2); --g-accent: var(--yellow); --g-accent-ink: var(--navy); --g-font: var(--f-mono); --g-radius: 2px; }
.eg-g--d4 .eg-g__chip { border-radius: 2px; text-transform: uppercase; }
.eg-g--d5 { --g-fg: var(--ink); --g-muted: var(--muted); --g-line: var(--line); --g-accent: var(--ink); --g-font: var(--f-mono); --g-radius: 6px; --g-cols: 3; }
.eg-g--d6 { --g-fg: var(--brown); --g-muted: var(--muted); --g-line: var(--line); --g-accent: var(--terra); --g-font: var(--f-sans); --g-radius: 22px; --g-cols: 3; }
.eg-g--d7 { --g-fg: var(--ink); --g-muted: var(--muted); --g-line: var(--line); --g-accent: var(--ink); --g-font: var(--sans); --g-radius: 0px; }
.eg-g--d8 { --g-fg: var(--ink); --g-muted: var(--muted); --g-line: var(--line); --g-accent: var(--ink); --g-font: var(--f-body); --g-radius: 0px; }
.eg-g--d9 { --g-fg: var(--ink); --g-muted: var(--muted); --g-line: rgba(19, 19, 19, .2); --g-accent: var(--live); --g-font: var(--f-type); --g-radius: 2px; }
@media (max-width: 1100px) { .eg-g--d5, .eg-g--d6 { --g-cols: 3; } }
@media (max-width: 700px) { .eg-g--d5, .eg-g--d6 { --g-cols: 2; } }
@media (hover: hover) and (pointer: fine) {
  .eg-g--d5 .eg-g__open img, .eg-g--d7 .eg-g__open img { filter: grayscale(1) contrast(1.04); }
  .eg-g--d5 .eg-g__open:hover img, .eg-g--d7 .eg-g__open:hover img { filter: none; }
}