/* Proje arşivi (projects.html) · v2 */

.archive-hero {
  padding-top: clamp(130px, 16vw, 200px);
  padding-bottom: clamp(32px, 5vw, 64px);
}
.archive-hero__title {
  margin: 12px 0 16px;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

/* Liste: no · ad · rol · yıl · ok */
.archive-head,
.archive-row {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 0.55fr) 64px 28px;
  align-items: baseline;
  gap: 16px;
}
.archive-head {
  padding: 0 12px 12px;
  border-bottom: 1px solid var(--ink);
}
.archive-head span:nth-child(4) { text-align: right; }

.archive-list {
  list-style: none;
  margin: 0 0 clamp(72px, 10vw, 140px);
  padding: 0;
}
.archive-list li { border-bottom: 1px solid var(--line); }

.archive-row {
  position: relative;
  padding: 20px 12px;
  color: var(--ink);
  text-decoration: none;
  border-radius: 12px;
  transition: background-color 0.25s;
}
.archive-row:hover,
.archive-row:focus-visible { background: color-mix(in srgb, var(--white) 85%, transparent); }
.archive-row__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}
.archive-row__role { font-size: var(--fs-small); color: var(--ink-soft); }
.archive-row__year { text-align: right; color: var(--ink); }
.archive-row__arrow { transition: transform 0.35s var(--ease); }
.archive-row:hover .archive-row__arrow { transform: translateX(6px); }

/* Ana sayfada da gösterilen projeler */
.archive-row__star {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 8px;
  vertical-align: middle;
  font: 500 0.625rem/1 var(--font-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--lime);
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
}

/* Fareyi takip eden sticker önizlemesi */
.archive-preview {
  position: fixed;
  z-index: 15;
  left: 0; top: 0;
  width: 240px;
  aspect-ratio: 4 / 3;
  padding: 8px;
  background: var(--white);
  border-radius: 18px;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink) 45%, transparent);
  pointer-events: none;
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.25s, scale 0.35s var(--ease);
}
.archive-preview.is-on { opacity: 1; scale: 1; }
.archive-preview .sticker__art { border-radius: 12px; }
.archive-preview .mock { border-width: 1.5px; border-radius: 10px; }
.archive-preview .mock i { height: 8px; }
.archive-preview .mock i:first-child { height: 22px; }
@media (hover: none), (pointer: coarse) { .archive-preview { display: none; } }

/* ---------- Mobil: satırlar alt alta ---------- */

@media (max-width: 640px) {
  .archive-head { display: none; }
  .archive-list { border-top: 1px solid var(--ink); }
  .archive-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "no title arrow"
      "no meta  meta";
    gap: 4px 12px;
    padding: 16px 4px;
  }
  .archive-row__no { grid-area: no; }
  .archive-row__title { grid-area: title; }
  .archive-row__arrow { grid-area: arrow; }
  .archive-row__role { grid-area: meta; }
  .archive-row__year { display: none; }
  .archive-row__role::after { content: " · " attr(data-year); }
}

/* ---------- Hareket ---------- */

.js .archive-reveal,
.js .archive-list li { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .js .archive-reveal,
  .js .archive-list li { opacity: 1; }
  .archive-preview { display: none; }
}