/* PV.5 — Projects archive (references.html only; loaded after styles.css). Dark, compact layout:
   title band with breadcrumb, a catalog band, a filter strip (category dropdown, search, result
   count, reset) and a 3-column grid of cards. Only the look changes here: filters, search, links and
   data work as references.js builds them. Selectors start with .archive-page, so they win over
   styles.css; its breakpoints are repeated below for the properties overridden here.
   PV.5.10: anthracite layers (no pure black), a much shorter top so the first cards show sooner on
   a desktop screen, and the shared card layout of styles.css (.card-topline: place / year above
   the photo; category and the large project name below; no box, border or shadow). Cyan
   (--blue-2) only for thin lines and hover. */

.archive-page {
  --arc-bg: var(--an-1);
  --arc-band: var(--an-2);
  --arc-panel: var(--an-2);
  --arc-control: var(--an-3);
  --arc-line: var(--an-line);
  --arc-line-strong: var(--an-line-2);
  color: var(--an-text);
  background: var(--arc-bg);
}
.archive-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Title band: "Projeler" on the left right under the header, the breadcrumb close under it */
.archive-page .archive-hero { padding: 116px 0 22px; text-align: left; background: var(--arc-band); border-bottom: 1px solid var(--arc-line); }
.archive-page .archive-hero::after { display: none; }
.archive-page .archive-hero h1 { max-width: none; margin: 0; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 500; line-height: 1.05; letter-spacing: -.025em; }
.archive-crumbs { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; margin-top: 8px; color: var(--an-muted); font-size: .76rem; }
.archive-crumbs a { transition: color .2s ease; }
.archive-crumbs a:hover { color: var(--an-text); }
.archive-crumbs [aria-current] { color: var(--an-body); }

/* Catalog band: one compact row */
.archive-catalog { padding: 16px 0; color: var(--an-text); background: var(--arc-panel); border-bottom: 1px solid var(--arc-line); }
.archive-catalog-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.archive-catalog h2 { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.archive-catalog p { max-width: 820px; margin: 4px 0 0; color: var(--an-muted); font-size: .84rem; line-height: 1.55; }
.archive-catalog-action { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.archive-catalog-button { min-height: 44px; padding: 0 22px; color: var(--an-text); background: transparent; border-color: var(--arc-line-strong); }
.archive-catalog-button:hover { color: var(--an-0); background: var(--an-text); border-color: var(--an-text); box-shadow: none; }
.archive-catalog-action small { color: var(--an-faint); font-size: .7rem; }

/* Filter strip: category dropdown, search, result count, reset */
.archive-page .archive-section { padding: 0 0 96px; background: var(--arc-bg); }
.archive-filterbar { position: relative; z-index: 5; padding: 12px 0; background: var(--arc-bg); border-bottom: 1px solid var(--arc-line); }
.archive-page .archive-toolbar { grid-template-columns: minmax(220px, 280px) minmax(220px, 320px) minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.archive-dropdown { position: relative; }
.archive-dropdown-toggle,
.archive-page .archive-search { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; height: 48px; margin: 0; padding: 0 44px 0 14px; color: var(--an-text); background: var(--arc-control); border: 1px solid var(--arc-line-strong); text-align: left; transition: border-color .2s ease; }
.archive-dropdown-toggle { cursor: pointer; }
.archive-dropdown-toggle:hover { border-color: rgba(236, 234, 228, .32); }
.archive-dropdown-toggle span,
.archive-page .archive-search span { margin: 0; color: var(--an-muted); font-size: .62rem; font-weight: 800; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.archive-dropdown-toggle b { overflow: hidden; font-size: .88rem; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.archive-dropdown-toggle::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--an-body); border-bottom: 1.5px solid var(--an-body); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.archive-dropdown-toggle[aria-expanded="true"] { border-color: var(--blue-2); }
.archive-dropdown-toggle[aria-expanded="true"]::after { transform: translateY(-20%) rotate(-135deg); }
.archive-page .archive-search { padding-right: 14px; cursor: text; }
.archive-page .archive-search input { width: 100%; min-height: 0; padding: 0; color: var(--an-text); background: transparent; border: 0; font-size: .88rem; line-height: 1.3; }
.archive-page .archive-search input::placeholder { color: var(--an-faint); }
.archive-page .archive-search input:focus { box-shadow: none; }
.archive-page .archive-search:focus-within { border-color: var(--blue-2); box-shadow: 0 0 0 1px var(--blue-2); }

/* The category buttons (same markup as before) as the dropdown's panel */
.archive-page .archive-filters { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 0; width: max-content; min-width: 100%; max-width: min(360px, calc(100vw - 2 * var(--gutter))); margin: 0; padding: 6px 0; overflow: visible; background: var(--an-4); border: 1px solid var(--arc-line-strong); box-shadow: 0 18px 40px rgba(10, 11, 13, .4); -webkit-mask-image: none; mask-image: none; }
.archive-page .archive-filters button { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; width: 100%; padding: 11px 16px; color: var(--an-body); text-align: left; white-space: normal; }
.archive-page .archive-filters button::after { display: none; }
.archive-page .archive-filters button b { font-size: .82rem; font-weight: 600; letter-spacing: .01em; text-transform: none; }
.archive-page .archive-filters button span { color: var(--an-muted); font-size: .72rem; }
.archive-page .archive-filters button:hover { color: var(--an-text); background: rgba(236, 234, 228, .05); }
.archive-page .archive-filters button.is-active { color: var(--an-text); background: rgba(236, 234, 228, .06); box-shadow: inset 2px 0 0 var(--blue-2); }
.archive-page .archive-filters button.is-active span { color: var(--blue-2); }
.archive-page .archive-result { margin: 0; padding-left: 8px; color: var(--an-muted); font-size: .8rem; }
.archive-reset { height: 48px; padding: 0 20px; color: var(--an-body); background: transparent; border: 1px solid var(--arc-line-strong); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.archive-reset:hover { color: var(--an-text); border-color: var(--blue-2); }

/* Project grid: 3 columns; the card is the photo and its text, no box (see .card-topline in styles.css) */
.archive-page .archive-list { padding-top: 26px; }
.archive-page .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px 28px; }
.archive-page .reference-card { background: transparent; }
.archive-page .reference-link { height: 100%; }
.archive-page .reference-media { aspect-ratio: 4 / 3; background: var(--an-3); }
.archive-page .reference-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--blue-2); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.archive-page .reference-media img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.archive-page .reference-card:hover .reference-media img { transform: scale(1.04); filter: none; }
.archive-page .reference-card:hover .reference-media::after,
.archive-page .reference-link:focus-visible .reference-media::after { transform: scaleX(1); }
.archive-page .reference-index { display: none; }
.archive-page .reference-placeholder { color: var(--an-faint); background: linear-gradient(135deg, var(--an-3), var(--an-2)); }
.archive-page .reference-placeholder::before,
.archive-page .reference-placeholder::after { border-color: var(--an-line); }
.archive-page .reference-placeholder span { font-size: 1.6rem; font-weight: 700; }

/* Under the photo: the category (small line, with the photo count at its right) and the project
   name (large line). DOM order stays category, name, photo count (tests and screen readers read it
   that way); the grid puts category and photo count on one line above the name. */
.archive-page .reference-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 15px 0 0; }
.archive-page .reference-copy > span { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; color: var(--an-muted); font-size: .66rem; font-weight: 700; letter-spacing: .16em; }
.archive-page .reference-copy > span::before { content: ""; flex: none; width: 14px; height: 1px; background: var(--blue-2); }
.archive-page .reference-copy > p { grid-area: 1 / 2; margin: 0; color: var(--an-faint); font-size: .7rem; font-variant-numeric: tabular-nums; text-align: right; }
.archive-page .reference-copy h3 { grid-area: 2 / 1 / 3 / 3; margin: 8px 0 0; color: var(--an-text); font-size: 1.3rem; font-weight: 500; line-height: 1.25; letter-spacing: -.015em; }
.archive-page .reference-link:hover h3 { color: var(--an-text); }
.archive-page .reference-copy h3::after { content: "→" / ""; display: inline-block; margin-left: .35em; color: var(--blue-2); opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.archive-page .reference-link:hover h3::after,
.archive-page .reference-link:focus-visible h3::after { opacity: 1; transform: none; }

/* "Daha fazla göster" as an outline button */
.archive-page .archive-more { margin-top: 56px; }
.archive-page .archive-more .button { min-height: 50px; padding: 0 32px; color: var(--an-text); background: transparent; border: 1px solid var(--arc-line-strong); transition: color .2s ease, border-color .2s ease, background .2s ease; }
.archive-page .archive-more .button:hover { color: var(--an-0); border-color: var(--an-text); background: var(--an-text); box-shadow: none; }

@media (max-width: 1050px) {
  .archive-page .archive-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .archive-page .archive-result { padding-left: 2px; }
  .archive-reset { justify-self: end; }
  .archive-page .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 22px; }
}

@media (max-width: 820px) {
  .archive-page .archive-hero { padding: 100px 0 20px; }
  .archive-catalog-grid { grid-template-columns: 1fr; gap: 12px; }
  .archive-catalog-action { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
}

@media (max-width: 560px) {
  .archive-page .archive-hero { padding: 96px 0 18px; }
  .archive-page .archive-hero h1 { font-size: 2rem; }
  .archive-catalog { padding: 14px 0; }
  /* Dropdown and search full width; the result count and reset share one row. */
  .archive-page .archive-toolbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .archive-dropdown, .archive-page .archive-search { grid-column: 1 / -1; }
  .archive-page .archive-filters { width: 100%; max-width: none; }
  .archive-reset { height: 42px; justify-self: end; }
  .archive-page .archive-list { padding-top: 22px; }
  .archive-page .reference-grid { grid-template-columns: 1fr; gap: 40px; }
  .archive-page .reference-copy h3 { font-size: 1.2rem; }
  .archive-page .archive-more { margin-top: 40px; }
}