/* =========================================
   LIBRARY PAGE (/icerikler/)
   Content entries paired with their source paper
   ========================================= */
:root {
  --lib-max-w: 1080px;
  --lib-poster-w: 328px; /* Instagram embed minimum width */
  --lib-embed-h: 640px;
  --lib-paper-w: 260px;
  --lib-gap: 32px;
  --lib-hairline: rgba(255, 255, 255, 0.1);
  --lib-muted: rgba(255, 255, 255, 0.4);
  --menu-gutter-mobile: 48px;
}

.library-page {
  width: 100%;
  max-width: calc(var(--lib-max-w) + var(--menu-gutter));
  margin: 0 auto;
  padding: 0 22px 120px var(--menu-gutter);
}

/* Top bar: reuse hero top-bar styles inside normal flow */
.library-topbar {
  position: relative;
  height: 80px;
}

.library-topbar .top-bar {
  left: 0;
  right: 0;
}

/* Heading */
.library-head {
  padding-top: 24px;
  margin-bottom: 48px;
}

.library-head-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.library-title {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

/* Jump-to-number selector next to the title */
.library-jump {
  position: relative;
  align-self: center;
}

.library-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  color: #ffffff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.library-jump-btn:hover,
.library-jump-btn:focus-visible,
.library-jump.open .library-jump-btn {
  border-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.06);
  outline: none;
}

.jump-count {
  color: #ffffff;
}

.jump-sep,
.jump-label {
  color: var(--lib-muted);
  transition: color 0.25s ease;
}

.library-jump-btn:hover .jump-label,
.library-jump.open .jump-label {
  color: #ffffff;
}

.jump-caret {
  font-size: 9px;
  color: var(--lib-muted);
  transition: transform 0.3s var(--ease-out-expo);
}

.library-jump.open .jump-caret {
  transform: rotate(180deg);
}

.library-jump-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 300px;
  max-width: min(420px, 80vw);
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--lib-hairline);
  border-radius: 4px;
  z-index: 50;
  transform-origin: top left;
  animation: jumpPanelIn 0.25s var(--ease-out-expo);
}

@keyframes jumpPanelIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.jump-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);   /* "pilot 1", "gün 12" */
  gap: 12px;
  align-items: baseline;
  padding: 10px 14px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.jump-item:hover,
.jump-item:focus-visible {
  background-color: #ffffff;
  color: #000000;
  outline: none;
}

.jump-item-no {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.jump-item-title {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entry landing: room under the top edge and a brief highlight */
.library-entry {
  scroll-margin-top: 24px;
}

.library-entry.is-targeted {
  animation: entryFlash 1.6s ease-out;
}

@keyframes entryFlash {
  0%   { background-color: rgba(255, 255, 255, 0.08); }
  100% { background-color: transparent; }
}

.library-intro {
  margin-top: 14px;
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.6px;
  color: var(--lib-muted);
  max-width: 420px;
}

/* Entry list: a ledger of rows, each row = content ↔ source */
.library-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lib-hairline);
}

.library-entry {
  display: grid;
  grid-template-columns: var(--lib-poster-w) minmax(0, 1fr) var(--lib-paper-w);
  gap: var(--lib-gap);
  padding: 32px 0;
  border-bottom: 1px solid var(--lib-hairline);
}

/* Column 1: the reel */
.entry-poster {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 4px;
  border: 1px solid var(--lib-hairline);
  overflow: hidden;
  background: #0a0a0a;
  color: #ffffff;
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.entry-poster:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

.entry-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out-expo);
}

.entry-poster:hover img {
  transform: scale(1.03);
}

/* Instagram embed (shown instead of the poster when embedUrl exists) */
.entry-embed {
  width: 100%;
  height: var(--lib-embed-h);
  border-radius: 4px;
  border: 1px solid var(--lib-hairline);
  overflow: hidden;
  background: #0a0a0a;
}

.entry-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #0a0a0a;
}

/* Typographic tile shown when no poster image exists yet */
.poster-tile {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px 14px;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(255, 255, 255, 0.08), transparent 60%),
    #050505;
}

.poster-tile-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lib-muted);
}

.poster-tile-hook {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.poster-play {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  color: #ffffff;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out-expo);
}

/* Entry published on the site before its video goes live */
.entry-poster.is-pending:hover {
  border-color: var(--lib-hairline);
}

.poster-soon {
  position: absolute;
  right: 12px;
  top: 12px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #ffffff;
  opacity: 0.7;
}

.entry-poster:hover .poster-play {
  opacity: 1;
  transform: scale(1.1);
}

/* Column 2: content meta */
.entry-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.entry-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lib-muted);
  margin-bottom: 14px;
}

.entry-index b {
  font-weight: 500;
  color: #ffffff;
}

.entry-title {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  max-width: 22ch;
}

.entry-summary {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.6px;
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
}

.entry-links {
  margin-top: auto;
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Column 3: the source paper, one big link */
/* Column 3: the source(s) — one card, or a stack when a piece rests on several */
.entry-sources {
  display: flex;
  flex-direction: column;
  gap: 28px;          /* cards bleed 14px each way for their hover surface */
  min-width: 0;
}

.entry-paper {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  align-content: start;
  color: #ffffff;
  text-decoration: none;
  padding: 14px;
  margin: -14px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.entry-paper:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Talk played inline: player on top, citation below; no hover surface (only its link is clickable) */
.entry-paper.is-embedded {
  grid-template-columns: minmax(0, 1fr);
}

.entry-paper.is-embedded:hover {
  background-color: transparent;
}

.talk-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--lib-hairline);
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
}

.talk-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.paper-preview {
  width: 88px;
  aspect-ratio: 754 / 1070;
  border: 1px solid var(--lib-hairline);
  border-radius: 2px;
  overflow: hidden;
  background: #ffffff;
  transition: transform 0.5s var(--ease-out-expo), border-color 0.3s ease;
}

.entry-paper:hover .paper-preview {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.35);
}

.paper-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* Each citation part sits on its own line */
.paper-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.paper-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lib-muted);
  margin-bottom: 8px;
}

.paper-authors {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.6px;
}

.paper-title {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin: 4px 0 10px 0;
}

.paper-journal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--lib-muted);
  line-height: 14px;
}

.paper-doi {
  display: block;
  margin-top: 2px;
  overflow-wrap: anywhere;   /* long PLOS DOIs otherwise poke past the column */
}

.paper-open {
  margin-top: 10px;
}

/* Shared inline link style (matches social links) */
.lib-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.6px;
  color: var(--lib-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.lib-link:hover,
.entry-paper:hover .lib-link {
  color: #ffffff;
}

.lib-link .hover-arrow {
  width: 0;
  opacity: 0;
}

.lib-link:hover .hover-arrow,
.entry-paper:hover .lib-link .hover-arrow {
  width: 18px;
  opacity: 1;
}

/* Empty state */
.library-empty {
  padding: 48px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--lib-muted);
}

/* Responsive */
@media (max-width: 1023.98px) {
  .library-entry {
    grid-template-columns: var(--lib-poster-w) minmax(0, 1fr);
  }
  .entry-sources {
    grid-column: 2;
  }
}

@media (max-width: 809.98px) {
  .library-page {
    /* Left gutter clears the fixed menu toggle (40px wide) */
    padding: 0 22px 80px var(--menu-gutter-mobile);
  }
  .library-topbar {
    height: 72px;
  }
  .library-head {
    margin-bottom: 32px;
  }
  .library-head-row {
    flex-wrap: wrap;
    gap: 14px;
  }
  .library-jump-panel {
    min-width: min(300px, 80vw);
  }
  .library-entry {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 0;
  }
  .entry-poster,
  .entry-embed {
    width: min(100%, 328px);
    margin: 0 auto;
  }
  .entry-sources {
    grid-column: 1;
    gap: 12px;
  }
  .entry-paper {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--lib-hairline);
  }
  .entry-links {
    padding-top: 16px;
  }
}

/* =========================================
   Entry permalinks + single-entry page (/icerikler/002/)
   ========================================= */
.entry-permalink,
.entry-title-link {
  color: inherit;
  text-decoration: none;
}

.entry-permalink:hover b,
.entry-permalink:focus-visible b {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-title-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.4s var(--ease-out-expo);
}

.entry-title-link:hover,
.entry-title-link:focus-visible {
  background-size: 100% 1px;
  outline: none;
}

/* Current entry in the jump menu */
.jump-item.is-current {
  color: var(--lib-muted);
}

.jump-item.is-current .jump-item-no::after {
  content: ' ·';
}

/* Back link above the heading on a single page */
.library-back {
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lib-muted);
  text-decoration: none;
  transition: color 0.25s ease;
}

.library-back:hover,
.library-back:focus-visible {
  color: #ffffff;
  outline: none;
}

.library-back .hover-arrow {
  display: inline-block;
  width: 16px;
  opacity: 1; /* the global .hover-arrow hides until hover; this arrow is always shown */
  transition: transform 0.3s var(--ease-out-expo);
}

.library-back:hover .hover-arrow {
  transform: translateX(-3px);
}

/* Single page: the entry is the page, so its title reads as the h1 */
.library-page.is-single .library-title {
  font-size: clamp(22px, 2.6vw, 30px);
  color: var(--lib-muted);
}

.library-page.is-single .library-intro {
  display: none;
}

.library-page.is-single .library-list {
  border-top: 0;
}

.library-page.is-single .library-entry {
  padding-top: 0;
}

.library-page.is-single .entry-title {
  font-size: clamp(24px, 2.6vw, 34px);
  max-width: 20ch;
}

/* Previous / next */
.library-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lib-gap);
  padding-top: 32px;
}

.pager-link {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  margin: -14px;
  border-radius: 4px;
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.pager-link:not(.is-empty):hover,
.pager-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.04);
  outline: none;
}

.pager-next {
  flex-direction: row-reverse;
  text-align: right;
}

.pager-arrow {
  flex: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 14px;
  color: var(--lib-muted);
  transition: transform 0.3s var(--ease-out-expo), color 0.25s ease;
}

.pager-link:hover .pager-arrow {
  color: #ffffff;
}

.pager-prev:hover .pager-arrow { transform: translateX(-3px); }
.pager-next:hover .pager-arrow { transform: translateX(3px); }

.pager-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pager-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--lib-muted);
  margin-bottom: 6px;
}

.pager-title {
  font-family: 'Stack Sans Headline', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 18.6px;
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.25s ease;
}

.pager-link:hover .pager-title {
  color: #ffffff;
}

@media (max-width: 809.98px) {
  .library-pager {
    grid-template-columns: 1fr;
    gap: 8px;
    padding-top: 24px;
  }
  .pager-link {
    margin: 0;
    border: 1px solid var(--lib-hairline);
  }
  .pager-link.is-empty {
    display: none;
  }
}