/* =============================================================
   CHATOPYA — Rehber (Blog)
   -------------------------------------------------------------
   Bu dosya chatopya-product.css ile BIRLIKTE yuklenir: pr-head,
   pr-related, pr-related-card, pr-cta, pr-list gibi ortak siniflar
   oradan gelir. Burada yalnizca rehbere ozgu olan kart izgarasi,
   filtre, icindekiler ve makale govdesi tanimlanir.
   ============================================================= */

/* ---------- FİLTRE ---------- */
.gd-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cy-space-2);
  margin-bottom: var(--cy-space-8);
}
.gd-filter-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--cy-space-2) var(--cy-space-4);
  border-radius: var(--cy-radius-pill);
  border: 1px solid var(--cy-ink-100);
  background: var(--cy-surface);
  color: var(--cy-ink-700);
  font-family: var(--cy-font-body);
  font-size: var(--cy-text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--cy-duration) var(--cy-ease), color var(--cy-duration) var(--cy-ease), background-color var(--cy-duration) var(--cy-ease);
}
.gd-filter-btn:hover { border-color: var(--cy-brand-600); color: var(--cy-brand); }
.gd-filter-btn.is-active { background: var(--cy-brand); border-color: var(--cy-brand); color: #fff; }

/* ---------- KART IZGARASI ---------- */
.gd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cy-space-6); }
.gd-card {
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  padding: var(--cy-space-6);
  border-radius: var(--cy-radius-lg);
  border: 1px solid var(--cy-ink-100);
  background: var(--cy-surface);
  text-decoration: none;
  transition: border-color var(--cy-duration) var(--cy-ease), transform var(--cy-duration) var(--cy-ease);
}
.gd-card:hover { border-color: var(--cy-brand-600); transform: translateY(-2px); }
.gd-card-icon {
  width: 44px; height: 44px;
  border-radius: var(--cy-radius);
  background: var(--cy-brand-050);
  color: var(--cy-brand-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.gd-card-cat { font-size: var(--cy-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cy-brand-600); }
.gd-card h2, .gd-card h3 { margin: 0; font-size: var(--cy-text-xl); font-weight: 600; color: var(--cy-ink-900); line-height: 1.3; }
.gd-card p { margin: 0; font-size: var(--cy-text-sm); line-height: 1.6; color: var(--cy-ink-500); flex-grow: 1; }
.gd-card-meta { display: flex; align-items: center; gap: var(--cy-space-3); font-size: var(--cy-text-xs); color: var(--cy-ink-400); padding-top: var(--cy-space-2); border-top: 1px solid var(--cy-ink-050); }

@media (max-width: 991.98px) { .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .gd-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- MAKALE BAŞLIĞI ---------- */
.gd-article-head { display: flex; flex-direction: column; gap: var(--cy-space-3); max-width: 46rem; }
.gd-article-head h1 {
  margin: 0;
  font-size: clamp(1.8rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
}
.gd-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-2) var(--cy-space-4);
  font-size: var(--cy-text-sm);
  color: var(--cy-ink-500);
}
.gd-article-meta span { display: flex; align-items: center; gap: var(--cy-space-2); }
.gd-article-lead { margin: 0; font-size: var(--cy-text-lg); line-height: 1.65; color: var(--cy-ink-700); }
/* EN/DE secildiginde: makale govdesinin yalnizca Turkce oldugunu belirtir */
.gd-lang-note {
  display: inline-flex;
  align-items: center;
  gap: var(--cy-space-2);
  align-self: flex-start;
  margin: 0;
  padding: var(--cy-space-2) var(--cy-space-4);
  border-radius: var(--cy-radius-pill);
  background: var(--cy-brand-050);
  color: var(--cy-brand);
  font-size: var(--cy-text-sm);
  font-weight: 600;
}
.gd-lang-note[hidden] { display: none; }

/* ---------- MAKALE DÜZENİ: İÇİNDEKİLER + GÖVDE ---------- */
.gd-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--cy-space-12); align-items: start; }

.gd-toc {
  position: sticky;
  top: calc(76px + var(--cy-space-6));
  display: flex;
  flex-direction: column;
  gap: var(--cy-space-3);
  padding: var(--cy-space-5, 1.25rem);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-sunk);
  border: 1px solid var(--cy-ink-100);
}
.gd-toc-label { font-size: var(--cy-text-xs); font-weight: 700; letter-spacing: var(--cy-tracking-wide); text-transform: uppercase; color: var(--cy-ink-400); }
.gd-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cy-space-2); counter-reset: gd-toc; }
.gd-toc li { counter-increment: gd-toc; }
.gd-toc a {
  display: flex;
  gap: var(--cy-space-2);
  font-size: var(--cy-text-sm);
  line-height: 1.4;
  color: var(--cy-ink-700);
  text-decoration: none;
}
.gd-toc a::before {
  content: counter(gd-toc);
  flex-shrink: 0;
  color: var(--cy-ink-300);
  font-weight: 700;
}
.gd-toc a:hover { color: var(--cy-brand); }

/* ---------- MAKALE GÖVDESİ (PROSE) ---------- */
.gd-body { max-width: 42rem; display: flex; flex-direction: column; gap: var(--cy-space-6); }
.gd-body h2 {
  margin: var(--cy-space-4) 0 0;
  font-size: var(--cy-text-2xl);
  font-weight: 600;
  line-height: 1.25;
  scroll-margin-top: calc(76px + var(--cy-space-4));
}
.gd-body h3 {
  margin: var(--cy-space-2) 0 0;
  font-size: var(--cy-text-xl);
  font-weight: 600;
  scroll-margin-top: calc(76px + var(--cy-space-4));
}
.gd-body p { margin: 0; font-size: var(--cy-text-base); line-height: var(--cy-leading-body); color: var(--cy-ink-700); }
.gd-body ul, .gd-body ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--cy-space-2); }
.gd-body li { font-size: var(--cy-text-base); line-height: 1.65; color: var(--cy-ink-700); }
.gd-body li::marker { color: var(--cy-brand-600); font-weight: 700; }
.gd-body strong { color: var(--cy-ink-900); }
.gd-body a:not(.cy-btn):not(.cy-link-accent) { color: var(--cy-brand); text-decoration: underline; text-decoration-color: var(--cy-ink-200); text-underline-offset: 2px; }
.gd-body a:not(.cy-btn):not(.cy-link-accent):hover { text-decoration-color: currentColor; }

/* ---------- BİLGİ / UYARI KUTUSU ---------- */
.gd-callout {
  display: flex;
  gap: var(--cy-space-3);
  padding: var(--cy-space-5, 1.25rem);
  border-radius: var(--cy-radius);
  border: 1px solid var(--cy-ink-100);
  border-left: 3px solid var(--cy-brand);
  background: var(--cy-surface-alt);
}
.gd-callout.is-warn { border-left-color: var(--cy-warn); background: var(--cy-warn-050); }
.gd-callout i { flex-shrink: 0; margin-top: 2px; color: var(--cy-brand-600); font-size: 1.1rem; }
.gd-callout.is-warn i { color: var(--cy-warn-ink); }
.gd-callout p { margin: 0; font-size: var(--cy-text-sm); line-height: 1.65; color: var(--cy-ink-700); }
.gd-callout strong { display: block; margin-bottom: 2px; color: var(--cy-ink-900); }

/* ---------- MAKALE İÇİ TABLO ---------- */
.gd-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gd-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--cy-ink-100);
  border-radius: var(--cy-radius);
  overflow: hidden;
  font-size: var(--cy-text-sm);
}
.gd-table th, .gd-table td { padding: var(--cy-space-3) var(--cy-space-4); text-align: left; vertical-align: top; }
.gd-table thead th { background: var(--cy-surface-sunk); font-weight: 700; color: var(--cy-ink-700); border-bottom: 1px solid var(--cy-ink-100); }
.gd-table tbody tr + tr td, .gd-table tbody tr + tr th { border-top: 1px solid var(--cy-ink-050); }
.gd-table tbody th { font-weight: 600; color: var(--cy-ink-900); }
.gd-table tbody td { color: var(--cy-ink-500); }

/* ---------- MAKALE İÇİ CTA ŞERİDİ ---------- */
.gd-inline-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cy-space-4);
  padding: var(--cy-space-5, 1.25rem) var(--cy-space-6);
  border-radius: var(--cy-radius-lg);
  background: var(--cy-surface-alt);
  border: 1px solid var(--cy-ink-100);
}
.gd-inline-cta p { margin: 0; flex-grow: 1; min-width: 14rem; font-size: var(--cy-text-sm); color: var(--cy-ink-700); }
.gd-inline-cta strong { display: block; font-family: var(--cy-font-display); font-size: var(--cy-text-base); color: var(--cy-ink-900); margin-bottom: 2px; }

@media (max-width: 991.98px) {
  .gd-layout { grid-template-columns: minmax(0, 1fr); gap: var(--cy-space-8); }
  .gd-toc { position: static; }
  .gd-body { max-width: none; }
}

/* ---------- YÖNETİM PANELİNDEN GELEN İÇERİK ---------- */
/* Editör düz <table>, <img>, <blockquote> üretir; mevcut .gd-table / .gd-callout
   yazıları da aynen çalışmaya devam eder. */
.gd-layout.no-toc { grid-template-columns: minmax(0, 1fr); }
.gd-body img { max-width: 100%; height: auto; border-radius: var(--cy-radius); border: 1px solid var(--cy-ink-100); }
.gd-body figure { margin: 0; }
.gd-body figcaption { margin-top: var(--cy-space-2); font-size: var(--cy-text-xs); color: var(--cy-ink-400); }
.gd-body blockquote {
  margin: 0;
  padding: var(--cy-space-4) var(--cy-space-6);
  border-left: 3px solid var(--cy-brand);
  background: var(--cy-surface-alt);
  border-radius: 0 var(--cy-radius) var(--cy-radius) 0;
}
.gd-body blockquote p { color: var(--cy-ink-700); }
.gd-body table:not(.gd-table) {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cy-text-sm);
}
.gd-body table:not(.gd-table) th,
.gd-body table:not(.gd-table) td { padding: var(--cy-space-3) var(--cy-space-4); text-align: left; vertical-align: top; border: 1px solid var(--cy-ink-100); }
.gd-body table:not(.gd-table) th { background: var(--cy-surface-sunk); font-weight: 700; color: var(--cy-ink-900); }

.gd-empty { margin: 0 0 var(--cy-space-6); color: var(--cy-ink-500); }

.gd-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cy-space-2);
  padding: var(--cy-space-3) var(--cy-space-4);
  background: var(--cy-warn-050);
  color: var(--cy-warn-ink);
  font-size: var(--cy-text-sm);
  font-weight: 600;
}
.gd-preview-bar a { color: inherit; text-decoration: underline; }