/* Rehber: merkez ve kategori kartları, makale okuma düzeni */

/* ---------- Merkez ve kategori ---------- */
.guide-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.guide-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg);
  font-size: var(--fs-small);
  transition: border-color .2s, background-color .2s;
}
.guide-chip:hover { border-color: var(--line-strong); background: var(--surface); }
.guide-chip .orb { width: 24px; }
.guide-chip small { color: var(--muted); font-size: var(--fs-micro); }

.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  padding: 22px 22px 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: background-color .25s, border-color .25s, transform .4s var(--ease-out);
}
.guide-card:hover { background: var(--bg); border-color: var(--line-strong); transform: translateY(-2px); }
.guide-card__meta { font-size: var(--fs-micro); color: var(--muted); }
.guide-card h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; text-wrap: pretty; }
.guide-card p { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; }
.guide-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding-top: 6px; font-size: var(--fs-small); font-weight: 500; }
.guide-card__more svg { width: 16px; height: 16px; }
@media (max-width: 1000px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Makale ---------- */
.article-hero .page-title { font-size: clamp(2rem, 1.35rem + 2.3vw, 3.25rem); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 46rem);
  justify-content: center;
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}
.toc {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  max-height: calc(100vh - var(--header-h) - 48px);
  overflow: auto;
  font-size: var(--fs-small);
}
.toc__title { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 10px; }
.toc ol { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
.toc a {
  display: block;
  margin-left: -1px;
  padding: 7px 0 7px 14px;
  border-left: 1px solid transparent;
  color: var(--muted);
  line-height: 1.35;
  transition: color .2s, border-color .2s;
}
.toc a:hover { color: var(--ink); border-color: var(--akin-plum); }

.article-body { min-width: 0; font-size: clamp(1.0625rem, 1rem + .2vw, 1.125rem); line-height: 1.75; color: var(--ink-2); }
.article-body > * + * { margin-top: 36px; }
.article-section > * + * { margin-top: 14px; }
.article-section h2, .sources h2 {
  margin-bottom: 4px;
  font-size: clamp(1.4rem, 1.15rem + .8vw, 1.875rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--ink);
  font-weight: 500;
  text-wrap: balance;
}
.article-section h3 { margin-top: 26px; font-size: 1.12em; line-height: 1.35; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.article-body a { color: var(--akin-plum); text-decoration: underline; text-decoration-color: rgba(129, 28, 98, .35); text-underline-offset: 3px; }
.article-body a:hover { text-decoration-color: currentColor; }
.article-body strong { color: var(--ink); font-weight: 600; }

.bullet-list, .steps-list { display: flex; flex-direction: column; gap: 10px; }
.bullet-list li { position: relative; padding-left: 24px; }
.bullet-list li::before {
  content: "";
  position: absolute;
  left: 5px;
  top: .72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--grad-brand);
}
.steps-list { counter-reset: adim; }
.steps-list li { position: relative; padding-left: 42px; counter-increment: adim; }
.steps-list li::before {
  content: counter(adim);
  position: absolute;
  left: 0;
  top: .15em;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--on-dark);
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.note {
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  border-left: 3px solid var(--akin-orange);
  color: var(--ink);
}

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.table-wrap:focus-visible { outline-offset: 2px; }
.table-wrap table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .92em; line-height: 1.5; }
.table-wrap th, .table-wrap td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap th { background: var(--surface); color: var(--ink); font-weight: 500; }
.table-wrap tr:last-child td { border-bottom: 0; }

.takeaways { padding: 22px 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.takeaways h2 { margin-bottom: 12px; font-size: var(--fs-micro); color: var(--muted); font-weight: 500; letter-spacing: .02em; }
.takeaways ul { display: flex; flex-direction: column; gap: 10px; }
.takeaways li { position: relative; padding-left: 26px; color: var(--ink); line-height: 1.55; }
.takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--grad-brand);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 34%, transparent 36%), linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .9;
}

.article-figure { margin: 22px 0 8px; }
.article-figure img { width: 100%; height: auto; }
.article-figure figcaption { margin-top: 10px; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.article-cover img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
.sources ul { display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-small); }
.sources li { padding-left: 18px; position: relative; }
.sources li::before { content: "↗"; position: absolute; left: 0; color: var(--muted-2); }

@media (max-width: 1000px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: none; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); }
  .toc ol { border-left: 0; }
  .toc a { padding-left: 0; }
}
@media print {
  .toc, .cta-band, .related, .site-header, .site-footer { display: none !important; }
  .article-layout { display: block; }
}