/* Merkezin herkese açık sayfaları: tanıtım (/) ve kurulum rehberi (/rehber)
 * — templates/merkez_site_kabuk.html, merkez_tanitim.html, rehber.html
 * (26 Eylül 2026, ilk kullanıcılar).
 *
 * Renk, yazı ve bileşenler style.css'ten (tasarım dili sürüm 2, yön A: sade
 * kurumsal, tek vurgu lacivert). Burada yalnız düzen var; renkler YALNIZ
 * token (sabit renk kodu yok — tests/test_merkez_tanitim.py). Dar ekranda
 * (375 px) tek sütun, yatay kaydırma yok. */

/* ---- kabuk ---- */
.site-govde {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 60% at 50% -10%, var(--vurgu-ton) 0%, transparent 55%) no-repeat,
    var(--zemin);
}

.site-ust {
  position: sticky; top: 0; z-index: 20;
  background: var(--ust-zemin);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
          backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.site-ust-ic {
  max-width: 1040px; margin: 0 auto;
  padding: var(--a-2) var(--a-4);
  display: flex; align-items: center; gap: var(--a-4);
  min-height: 56px;
}
.site-marka { display: inline-flex; align-items: center; gap: 10px; color: var(--metin); text-decoration: none; min-width: 0; }
.site-marka:hover { color: var(--metin); }
.site-marka-isaret {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: var(--r-2);
  background: var(--vurgu-ton); color: var(--vurgu);
}
.site-marka-isaret .ikon { width: 20px; height: 20px; }
.site-marka-ad { font-size: var(--t-15); font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--a-1); }
.site-nav-bag {
  padding: 6px 10px; border-radius: var(--r-1);
  color: var(--metin-2); text-decoration: none;
  font-size: var(--t-14); font-weight: 500; white-space: nowrap;
}
.site-nav-bag:hover, .site-nav-bag[aria-current="page"] { background: var(--yuzey-2); color: var(--metin); }
.site-nav .dugme { margin-left: var(--a-2); }

.site-ana { flex: 1 0 auto; width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 var(--a-4); }

.site-alt { border-top: 1px solid var(--cizgi); background: var(--yuzey); }
.site-alt-ic {
  max-width: 1040px; margin: 0 auto; padding: var(--a-6) var(--a-4);
  display: flex; flex-wrap: wrap; gap: var(--a-3) var(--a-6);
  align-items: center; justify-content: space-between;
  font-size: var(--t-13); color: var(--metin-3);
}
.site-alt-bag { display: flex; flex-wrap: wrap; gap: var(--a-2) var(--a-5); }
.site-alt-bag a { color: var(--metin-2); }
.site-alt-not { margin: 0; }

/* ---- tanıtım: açılış ---- */
.tn-duyuru { margin: var(--a-6) 0 0; }

.tn-acilis {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--a-10);
  align-items: center;
  padding: var(--a-12) 0 var(--a-10);
}
.tn-acilis-metin { min-width: 0; }
.tn-ust-yazi {
  margin: 0;
  font-size: var(--t-13); font-weight: 500; line-height: 18px;
  color: var(--vurgu);
}
.tn-baslik {
  margin: var(--a-3) 0 var(--a-4);
  font-size: clamp(28px, 4.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.tn-acilis-aciklama {
  margin: 0; max-width: 56ch;
  font-size: 17px; line-height: 28px; color: var(--metin-2);
}
.tn-acilis-aciklama strong { color: var(--metin); }
.tn-eylemler { display: flex; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-6); }
.tn-kucuk-not { margin: var(--a-3) 0 0; font-size: var(--t-13); line-height: 19px; color: var(--metin-3); }

/* "Veri nerede durur?" şeması: iki kutu, arada ne gittiğini söyleyen ok. */
.tn-sema {
  margin: 0;
  padding: var(--a-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-4);
  box-shadow: var(--golge-2);
}
.tn-sema-baslik { font-size: var(--t-12); font-weight: 500; color: var(--metin-3); margin: 0 0 var(--a-3); }
.tn-sema-kutu {
  border: 1px solid var(--cizgi);
  border-radius: var(--r-3);
  padding: var(--a-3) var(--a-4) var(--a-4);
  background: var(--yuzey-2);
}
.tn-sema-yerel { background: var(--olumlu-ton); border-color: var(--olumlu-cizgi); }
.tn-sema-ad { display: flex; align-items: center; gap: var(--a-2); margin: 0 0 var(--a-2); font-weight: 600; color: var(--metin); }
.tn-sema-ad .ikon { color: var(--metin-2); }
.tn-sema-yerel .tn-sema-ad .ikon { color: var(--olumlu); }
.tn-cipler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tn-cipler li {
  margin: 0; padding: 2px 10px;
  border-radius: var(--r-tam);
  background: var(--yuzey); border: 1px solid var(--cizgi);
  font-size: var(--t-13); line-height: 20px; color: var(--metin-2);
}
.tn-sema-ok {
  display: flex; align-items: center; gap: var(--a-2);
  margin: var(--a-2) 0; padding-left: var(--a-4);
  font-size: var(--t-12); line-height: 16px; color: var(--metin-3);
}
.tn-sema-ok .ikon { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- tanıtım: bölümler ---- */
.tn-bolum { padding: var(--a-10) 0; border-top: 1px solid var(--cizgi); }
.tn-bolum-baslik { margin: 0 0 var(--a-2); font-size: var(--t-24); line-height: 32px; letter-spacing: -.018em; }
.tn-bolum-aciklama { margin: 0 0 var(--a-6); max-width: 64ch; font-size: var(--t-15); line-height: 24px; color: var(--metin-2); }
.tn-bolum > .tn-bolum-baslik + .tn-izgara,
.tn-bolum > .tn-bolum-baslik + .tn-adimlar,
.tn-bolum > .tn-bolum-baslik + .nasil,
.tn-bolum > .tn-bolum-baslik + .tn-iletisim { margin-top: var(--a-5); }

.tn-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); }
.tn-kart {
  margin: 0;
  padding: var(--a-5);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r-3);
  box-shadow: var(--golge-1);
  min-width: 0;
}
.tn-kart h3 { display: flex; align-items: center; gap: var(--a-2); margin: var(--a-3) 0 6px; font-size: var(--t-16); line-height: 24px; }
.tn-kart h3:first-child { margin-top: 0; }
.tn-kart h3 .ikon { color: var(--metin-3); }
.tn-kart p { margin: 0; font-size: var(--t-14); line-height: 22px; color: var(--metin-2); }
.tn-kart-ikon {
  width: 36px; height: 36px;
  display: inline-grid; place-items: center; flex: 0 0 auto;
  border-radius: var(--r-2);
  background: var(--vurgu-ton); color: var(--vurgu);
}
.tn-kart-yerel { border-color: var(--olumlu-cizgi); }
.tn-kart-yerel h3 .ikon { color: var(--olumlu); }
.tn-ayrica { margin: var(--a-4) 0 0; font-size: var(--t-14); color: var(--metin-3); }

.tn-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tn-liste li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px;
  margin: 0; font-size: var(--t-14); line-height: 22px; color: var(--metin-2);
}
.tn-liste li .ikon { margin-top: 2px; color: var(--olumlu); }
.tn-liste-notr li .ikon { color: var(--metin-3); }
.tn-liste strong { color: var(--metin); }
.tn-not { margin: var(--a-4) 0 0; }

/* Nasıl başlanır: üç adım. */
.tn-adimlar {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4);
  counter-reset: none;
}
.tn-adimlar > li {
  margin: 0; padding: var(--a-5);
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--r-3);
  min-width: 0;
}
.tn-adimlar h3 { margin: var(--a-3) 0 6px; font-size: var(--t-16); line-height: 24px; }
.tn-adimlar p { margin: 0; font-size: var(--t-14); line-height: 22px; color: var(--metin-2); }
.tn-adim-no {
  width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--birincil); color: var(--birincil-yazi);
  font-size: var(--t-13); font-weight: 600; font-variant-numeric: tabular-nums;
}

.tn-indir {
  margin-top: var(--a-6);
  padding: var(--a-5);
  display: flex; flex-wrap: wrap; gap: var(--a-4) var(--a-6);
  align-items: center; justify-content: space-between;
  background: var(--yuzey);
  border: 1px solid var(--vurgu-cizgi);
  border-radius: var(--r-3);
}
.tn-indir-metin { flex: 1 1 320px; min-width: 0; }
.tn-indir-metin h3 { display: flex; align-items: center; gap: var(--a-2); margin: 0 0 4px; font-size: var(--t-16); line-height: 24px; }
.tn-indir-metin h3 .ikon { color: var(--vurgu); }
.tn-indir-metin > p { margin: 0; color: var(--metin-2); }
.tn-indir-metin > p.tn-kucuk-not { margin-top: var(--a-2); }
.tn-indir-eylem { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.tn-ozet { margin-top: var(--a-3); font-size: var(--t-13); color: var(--metin-2); }
.tn-ozet summary { cursor: pointer; color: var(--metin-2); }
.tn-ozet code { display: block; margin-top: 6px; padding: 6px 8px; overflow-wrap: anywhere; word-break: break-all; }
.tn-ozet .tn-kucuk-not code { display: inline; margin: 0; padding: 1px 4px; }

.tn-iletisim { display: flex; gap: var(--a-4); align-items: flex-start; }
.tn-iletisim p { margin: 0; font-size: var(--t-15); line-height: 24px; overflow-wrap: anywhere; }
.tn-iletisim p.tn-kucuk-not { margin-top: 4px; font-size: var(--t-13); line-height: 19px; }

/* ---- kurulum rehberi ---- */
.rh-kap { max-width: 760px; margin: 0 auto; padding: var(--a-10) 0 var(--a-12); }
.rh-ust { margin: 0; }
.rh-baslik { margin: var(--a-2) 0 var(--a-3); font-size: clamp(26px, 4.2vw, 34px); line-height: 1.2; letter-spacing: -.022em; }
.rh-giris { margin: 0; max-width: 62ch; font-size: 16px; line-height: 26px; color: var(--metin-2); }
.rh-eylem { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-top: var(--a-5); }

.rh-gerekenler {
  margin: var(--a-6) 0 var(--a-2);
  padding: var(--a-4) var(--a-5);
  background: var(--vurgu-ton);
  border: 1px solid var(--vurgu-cizgi);
  border-radius: var(--r-3);
}
.rh-gerekenler-baslik { margin: 0 0 6px; font-weight: 600; color: var(--vurgu-metin); }
.rh-gerekenler ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px var(--a-5); }
.rh-gerekenler li { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--t-14); color: var(--metin); }
.rh-gerekenler li .ikon { width: 16px; height: 16px; color: var(--vurgu); }

.rh-liste { list-style: none; margin: 0; padding: 0; }
.rh-bolum {
  display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--a-4);
  margin: 0; padding: var(--a-6) 0;
  border-bottom: 1px solid var(--cizgi);
}
.rh-bolum:last-child { border-bottom: 0; }
.rh-no {
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 50%;
  background: var(--vurgu-ton); color: var(--vurgu-metin);
  font-weight: 600; font-variant-numeric: tabular-nums;
}
.rh-govde { min-width: 0; }
.rh-govde h2 { margin: 4px 0 var(--a-2); font-size: 18px; line-height: 26px; }
.rh-govde > p, .rh-govde li { font-size: var(--t-15); line-height: 24px; color: var(--metin-2); overflow-wrap: anywhere; }
.rh-govde > p { margin: 0 0 var(--a-2); }
.rh-govde strong { color: var(--metin); }
.rh-govde code { overflow-wrap: anywhere; }
.rh-govde .uyari { margin: var(--a-3) 0; }
.rh-govde > :last-child { margin-bottom: 0; }

/* ---- dar ekran ---- */
@media (max-width: 860px) {
  .tn-acilis { grid-template-columns: minmax(0, 1fr); gap: var(--a-8); padding: var(--a-8) 0 var(--a-8); }
  .tn-adimlar { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .site-nav-bag { display: none; }
  .tn-izgara { grid-template-columns: minmax(0, 1fr); }
  .tn-bolum { padding: var(--a-8) 0; }
  .tn-acilis-aciklama { font-size: 16px; line-height: 26px; }
  .tn-eylemler .dugme { flex: 1 1 auto; }
  .tn-indir-eylem { width: 100%; }
  .tn-indir-eylem .dugme { flex: 1 1 auto; }
  .rh-kap { padding: var(--a-6) 0 var(--a-10); }
  .rh-bolum { grid-template-columns: minmax(0, 1fr); gap: var(--a-2); }
  .site-alt-ic { flex-direction: column; align-items: flex-start; }
}

/* ---- baskı: rehber kâğıtta da okunur ---- */
@media print {
  @page { size: A4; margin: 14mm 16mm; }
  .site-govde { background: none; display: block; }
  .site-ust, .site-alt, .rh-eylem { display: none !important; }
  .site-ana { max-width: none; padding: 0; }
  .rh-kap { max-width: none; padding: 0; }
  .rh-kap, .rh-kap * { color: inherit; }
  .rh-bolum { padding: 10px 0; break-inside: avoid; }
  .rh-no { border: 1px solid currentColor; background: none; }
  .rh-gerekenler { background: none; }
  .rh-govde a { text-decoration: underline; }
}