/* Catalogue (/): one sentence, the page list, the shell footer. Spec: "Yeni Türkiye homepage/HANDOFF.md".
   One DOM for both layouts: desktop = cards in a grid (the title/date wrapper dissolves with display: contents),
   ≤840px = rows (preview | title + date, then description, then source). Logical properties only (Arabic is rtl). */
/* Big centred logo, landing only (spec: "Yeni Türkiye homepage/BRIEF-logo.md", mock 3a–3d). This file loads on / alone,
   so the shell's header on the data pages is untouched. The tools (language + theme) sit absolutely in the end corner. */
.site-header { padding: 48px 0 0; }
.hd-wrap { position: relative; justify-content: center; align-items: center; }
.brand { align-items: center; }
.hd-tools { position: absolute; top: -28px; inset-inline-end: 28px; }
.wordmark-yeni { font-size: 28px; }
.wordmark-turkiye { font-size: 76px; }
.wordmark-arc { width: 249px; margin-top: 5px; }

.katalog { margin-block-end: 24px; } /* + the footer's 16px = the mock's 40px */
.katalog-cumle {
  margin: 16px 0; /* logo ↔ sentence ↔ grid = the 16px between cards */
  max-width: none;
  font: 400 var(--fs-lead)/1.45 var(--font-sans);
  color: var(--text-body);
  text-align: center;
  /* One line wherever it fits (brief: nowrap); balance instead of nowrap so the longer languages (fr 96 chars)
     break evenly on a narrow desktop instead of overflowing. */
  text-wrap: balance;
}
.katalog-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* iki sütun (sahibin kararı, teslimdeki 2a–2d seçeneği) */
  gap: 16px;
}
.katalog-liste > li { display: grid; }

.katalog-giris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto 1fr auto; /* the description row takes the slack: meta rows line up */
  grid-template-areas: "on on" "ba ba" "ac ac" "ka ta";
  gap: 6px 12px;
  padding: 0 16px 16px;
  border-radius: 2px;
  background: var(--surface-card);
  box-shadow: var(--card-lift);
  color: inherit;
  text-decoration: none;
  transition: background .12s var(--ease-standard);
}
.katalog-onizleme { grid-area: on; position: relative; margin-block-start: 16px; aspect-ratio: 2 / 1; border-radius: 2px; }
.katalog-onizleme img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the file per theme: dark is the absence of html.light */
.onizleme-acik { display: none; }
html.light .onizleme-acik { display: block; }
html.light .onizleme-koyu { display: none; }

.katalog-bas { display: contents; }
.katalog-baslik { grid-area: ba; margin-block-start: 10px; font: 500 var(--fs-lead)/1.25 var(--font-sans); color: var(--text-heading); }
.katalog-aciklama { grid-area: ac; font-size: var(--fs-snippet); line-height: 1.5; color: var(--text-body); text-wrap: pretty; }
.katalog-kaynak, .katalog-tarih {
  padding-block-start: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: .04em;
  line-height: 1.5;
  color: var(--text-faint);
}
.katalog-kaynak { grid-area: ka; }
.katalog-tarih { grid-area: ta; white-space: nowrap; }

@media (min-width: 841px) {
  .katalog-giris:hover { background: var(--surface-hover); }
}

/* ── ≤840px: rows, edge to edge ─────────────────────────────────────────── */
@media (max-width: 840px) {
  .site-header { padding: 0; border-bottom: none; }
  .hd-wrap { padding: 28px 20px 0; }
  .hd-tools { top: 12px; inset-inline-end: 20px; }
  .wordmark-yeni { font-size: 21px; }
  .wordmark-turkiye { font-size: 54px; }
  .wordmark-arc { width: 177px; margin-top: 4px; }
  .katalog { margin-block-end: 0; }
  .katalog-cumle { margin: 0; max-width: none; padding: 12px 20px 16px; font-size: var(--fs-card); }
  .katalog-liste { display: block; border-block-start: 1px solid var(--border); }
  .katalog-liste > li { display: block; }
  .katalog-giris {
    grid-template-columns: 128px minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: "on bas" "ac ac" "ka ka";
    gap: 10px 14px;
    padding: 16px 20px;
    border-block-end: 1px solid var(--border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  .katalog-giris:active { background: var(--surface-hover); }
  .katalog-onizleme { margin: 0; width: 128px; background: var(--surface-card); box-shadow: var(--card-lift); }
  .katalog-onizleme img { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
  .katalog-bas { grid-area: bas; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
  .katalog-baslik { margin: 0; font-size: var(--fs-card); }
  .katalog-kaynak, .katalog-tarih { padding: 0; }
  .katalog-tarih { white-space: normal; }
}