/* ==========================================================================
   OKUMA KARTI SAYFALARI — Neden ateistim?, Kaynaklar, Dini görüşüm ne?,
   Günün sözü, Hakkında. Sayfa kaymaz; yalnızca kartın içi kayar.
   ========================================================================== */

/* ---- Okuma kartı (bütün bu sayfalar aynı kartı kullanır) ---- */
.neden { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
.neden-kart {
  position: relative; display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 22px;
  background: var(--cam); border: 1px solid var(--cam-kenar);
}
.neden-kaydir { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 40px clamp(24px, 5vw, 80px) 48px; scrollbar-gutter: stable; }
.neden-metin { max-width: 1200px; margin: 0 auto; font-family: var(--serif); font-size: clamp(17.5px, 1.2vw, 20px); line-height: 1.9; color: var(--fg-2); }
.neden-metin p { margin: 0 0 1.15em; line-height: 1.9; }
.neden-metin p.giris { font-size: clamp(20px, 1.4vw, 23px); line-height: 1.75; color: var(--fg); }
.neden-metin .sonuc {
  margin: 1.6em 0 0; padding: 18px 20px; border-radius: 16px; font-family: var(--sans); font-size: 16px; line-height: 1.75; color: var(--fg);
  background: color-mix(in srgb, var(--ak) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ak) 28%, transparent);
  border-left: 2px solid var(--ak);
}

@media (max-width: 860px) {
  .neden-kart { border-radius: 18px; }
  .neden-metin { font-size: 16px; line-height: 1.8; }
  .neden-metin p.giris { font-size: 17px; }
}

/* ---- Kaynaklar: Neden ateistim? kartıyla aynı ---- */
.kay-metin h2 { margin: 1.6em 0 .6em; font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ak); }
.kay-madde { margin-bottom: 1.2em; }
.kay-madde p { margin: 0; }
.kay-ust { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 2px !important; font-family: var(--sans); }
.kay-ust a { font-size: 17px; font-weight: 600; color: var(--fg); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--ak) 45%, transparent); }
.kay-ust a:hover { color: var(--ak); }
.kay-ust a span { color: var(--ak); font-size: 13px; }
.kay-site { font-size: 13px; color: var(--muted); }
.kay-sayi {
  padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ak); background: color-mix(in srgb, var(--ak) 13%, transparent); border: 1px solid color-mix(in srgb, var(--ak) 30%, transparent);
}
.kay-alt { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; font-family: var(--sans); }
.kay-alt b { color: var(--ak); font-weight: 600; margin-left: 2px; }
.kay-metin .sonuc h2 { margin-top: 0; }
.kay-kaynak { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ak); text-decoration: none; white-space: nowrap; }
.kay-kaynak:hover { text-decoration: underline; }

/* ---- Dini görüşüm ne? (test) ---- */

.test-ic { max-width: 720px; margin: 0 auto; }
.test-ic .giris { font-family: var(--serif); font-size: 18px; line-height: 1.75; color: var(--fg); }
.test-madde { margin: 18px 0 0; padding-left: 20px; color: var(--fg-2); font-size: 15px; line-height: 1.75; }
.test-madde li { margin-bottom: 6px; }
.test-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.test-btn {
  padding: 11px 18px; border-radius: 12px; font-size: 14.5px; font-weight: 600; color: var(--fg);
  background: var(--cam-2); border: 1px solid var(--cam-kenar-2); transition: border-color .15s, background .15s, filter .15s;
}
.test-btn:hover { border-color: var(--ak); }
.test-btn.birincil {
  min-width: 200px; padding: 13px 26px; font-size: 15.5px; color: var(--ak-zit); background: var(--ak); border-color: var(--ak);
  box-shadow: 0 0 22px color-mix(in srgb, var(--ak) 30%, transparent);
}
.test-btn.birincil:hover { filter: brightness(1.08); }

.test-ilerleme { height: 6px; border-radius: 99px; background: var(--cam-3); overflow: hidden; }
.test-ilerleme span { display: block; height: 100%; border-radius: 99px; background: var(--ak); box-shadow: 0 0 12px var(--ak); transition: width .25s; }
.test-sayac { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.test-soru { margin: 26px 0 22px; font-family: var(--serif); font-size: clamp(20px, 2.4vw, 25px); font-weight: 500; line-height: 1.5; color: var(--fg); min-height: 3em; }
.test-secenekler { display: flex; flex-direction: column; gap: 8px; }
.test-secenek {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 13px; text-align: left;
  font-size: 15px; color: var(--fg); background: color-mix(in srgb, var(--cam-2) 90%, transparent); border: 1px solid var(--cam-kenar-2);
  transition: border-color .15s, background .15s;
}
.test-secenek:hover { border-color: color-mix(in srgb, var(--ak) 60%, transparent); background: color-mix(in srgb, var(--ak) 7%, var(--cam-2)); }
.test-secenek.secili { border-color: var(--ak); background: color-mix(in srgb, var(--ak) 15%, var(--cam-2)); box-shadow: 0 0 16px color-mix(in srgb, var(--ak) 20%, transparent); }
.test-secenek kbd { margin-left: auto; font: 600 11.5px var(--sans); color: var(--faint); padding: 1px 7px; border-radius: 6px; border: 1px solid var(--cam-kenar-2); }
.test-nokta { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px solid currentColor; }
.test-nokta.s0 { color: #d9796d; } .test-nokta.s1{ color: #e0a79e; } .test-nokta.s2{ color: #a29d93; }
.test-nokta.s3 { color: #8cc3a2; } .test-nokta.s4{ color: #5fae86; }
.test-secenek.secili .test-nokta { background: currentColor; }
.test-alt { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
.test-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--muted); border: 1px solid transparent; transition: color .15s, border-color .15s;
}
.test-link:hover { color: var(--ak); border-color: color-mix(in srgb, var(--ak) 35%, transparent); }

.test-sonuclar { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.test-sonuc { padding: 16px 18px; border-radius: 16px; background: color-mix(in srgb, var(--cam-2) 92%, transparent); border: 1px solid var(--cam-kenar-2); }
.test-sonuc.ilk { border-color: var(--ak); background: color-mix(in srgb, var(--ak) 9%, var(--cam-2)); box-shadow: 0 0 22px color-mix(in srgb, var(--ak) 18%, transparent); }
.ts-ust { display: flex; align-items: center; gap: 12px; }
.ts-ust strong { font-size: 18px; font-weight: 600; }
.ts-sira {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 14px; font-weight: 700; color: var(--ak); background: color-mix(in srgb, var(--ak) 14%, transparent);
}
.ts-yuzde { margin-left: auto; font-size: 20px; font-weight: 700; color: var(--ak); font-variant-numeric: tabular-nums; }
.ts-cubuk { height: 6px; margin: 10px 0; border-radius: 99px; background: var(--cam-3); overflow: hidden; }
.ts-cubuk span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, color-mix(in srgb, var(--ak) 50%, transparent), var(--ak)); }
.test-sonuc p { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); }
.test-sonuc .test-link { margin: 8px 0 0 -12px; }
.test-ara { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ak); }
.test-eksenler { display: flex; flex-direction: column; gap: 10px; }
.te-cizgi { position: relative; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--cam-3), color-mix(in srgb, var(--ak) 35%, var(--cam-3))); }
.te-cizgi i { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--ak); box-shadow: 0 0 10px var(--ak); }
.test-not { margin-top: 22px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.6; color: var(--muted); background: var(--cam-koyu); border: 1px solid var(--cam-kenar); }
@media (max-width: 600px) {
  .test-secenek kbd { display: none; }
}
.test-dugmeler.orta { justify-content: center; }
.test-vurgu {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 14px 16px; border-radius: 14px;
  font-size: 14.5px; line-height: 1.65; color: var(--fg-2);
  background: color-mix(in srgb, var(--ak) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ak) 30%, transparent);
}
.test-vurgu svg { color: var(--ak); margin-top: 3px; }
.test-vurgu b { color: var(--fg); }
.test-alt-not { margin-top: 6px; font-size: 14px; color: var(--muted); }
.test-uzunluklar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.test-uzunluk {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 18px; border-radius: 18px; text-align: center;
  background: color-mix(in srgb, var(--cam-2) 92%, transparent); border: 1px solid var(--cam-kenar-2); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.test-uzunluk:hover { border-color: var(--ak); transform: translateY(-2px); box-shadow: 0 0 22px color-mix(in srgb, var(--ak) 20%, transparent); }
.test-uzunluk.onerilen { border-color: color-mix(in srgb, var(--ak) 60%, transparent); background: color-mix(in srgb, var(--ak) 8%, var(--cam-2)); }
/* Seçilen uzunluk: kalın vurgu çerçevesi ve parlama; test "Teste başla" ile başlar */
.test-uzunluk.secili {
  border: 2px solid var(--ak); padding: 21px 15px 17px;
  background: color-mix(in srgb, var(--ak) 16%, var(--cam-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ak) 22%, transparent), 0 0 26px color-mix(in srgb, var(--ak) 35%, transparent);
}
.test-uzunluk.secili .tu-sayi { color: var(--ak); }
.tu-rozet { position: absolute; top: -10px; padding: 2px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--ak-zit); background: var(--ak); }
.tu-sayi { font-size: 34px; font-weight: 700; line-height: 1; color: var(--ak); font-variant-numeric: tabular-nums; }
.tu-isim { font-size: 15px; font-weight: 600; color: var(--fg); }
/* Açıklama ve oran yazısı için yer sabit: TR ve EN'de kartlar aynı boyda kalır */
.tu-acik { font-size: 12.5px; line-height: 1.5; color: var(--muted); min-height: 4.5em; }
.tu-oran { width: 100%; height: 5px; margin-top: 6px; border-radius: 99px; background: var(--cam-3); overflow: hidden; }
.tu-oran span { display: block; height: 100%; background: var(--ak); }
.tu-oran-yazi { font-size: 11.5px; line-height: 1.45; color: var(--faint); min-height: 2.9em; }
@media (max-width: 600px) {
  .test-uzunluklar { grid-template-columns: 1fr; }
  .tu-acik { min-height: 3em; }
}

/* ---- Test: duraklatma, inceleme, uyarılar ---- */
.test-ust-sag { margin-left: auto; display: flex; align-items: center; }
.test-geri-sonuc { color: var(--ak); border-color: color-mix(in srgb, var(--ak) 40%, transparent); }
.test-uyari {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--uyari) 10%, transparent); border: 1px solid color-mix(in srgb, var(--uyari) 40%, transparent);
}
.test-uyari svg { color: var(--uyari); margin-top: 3px; flex-shrink: 0; }
.test-uyari p { font-size: 14px; line-height: 1.65; color: var(--fg-2); }
.test-uyari b { color: var(--uyari); }
.test-madde b { color: var(--fg); }
.test-bildiri { margin-bottom: 16px; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: var(--hata); background: color-mix(in srgb, var(--hata) 10%, transparent); border: 1px solid color-mix(in srgb, var(--hata) 40%, transparent); }

/* Soru ekranı: sabit yükseklik, sayfa/kart kaymasın */
.neden-kaydir.sabit { display: flex; flex-direction: column; }
.neden-kaydir.sabit .test-ic { width: 100%; margin-block: auto; }
.test-soru-alani .test-soru { margin: 20px 0 18px; min-height: 4.5em; display: flex; align-items: flex-end; font-size: clamp(19px, 2.2vw, 23px); }
.test-secenek:disabled { opacity: .55; }
.test-secenek.secili:disabled { opacity: 1; }
.test-soru-alani.salt .test-secenek:hover:not(.secili) { border-color: var(--cam-kenar-2); background: color-mix(in srgb, var(--cam-2) 90%, transparent); }
.test-salt-not { margin-top: 12px; font-size: 12.5px; color: var(--faint); text-align: center; }
.test-link.duraklat { min-width: 100px; justify-content: center; color: var(--uyari); border-color: color-mix(in srgb, var(--uyari) 35%, transparent); }
.test-link.duraklat:hover { color: var(--uyari); border-color: var(--uyari); }

/* Duraklatma ekranı */
.test-durak { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 30px 0; }
.td-etiket { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--uyari); }
.td-sure { margin: 10px 0 6px; font-size: 64px; font-weight: 600; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; text-shadow: 0 0 24px color-mix(in srgb, var(--ak) 35%, transparent); }
.td-acik { max-width: 440px; font-size: 14px; line-height: 1.6; color: var(--muted); }

@media (max-width: 600px) {
  .test-ust-sag .test-geri-sonuc { padding: 6px 8px; font-size: 12.5px; }
  .test-soru-alani .test-soru { min-height: 3.6em; margin: 14px 0 12px; }
  .test-secenek { padding: 10px 12px; font-size: 14px; }
  .test-secenekler { gap: 6px; }
}
@media (max-height: 820px) {
  /* Kısa ekran: soru ekranı (uzun sorular dahil) kaydırmasız sığsın */
  .neden-kaydir.sabit { padding-top: 18px; padding-bottom: 18px; }
  .test-soru-alani .test-dugmeler { margin-top: 16px; }
}
@media (max-height: 760px) {
  .test-soru-alani .test-soru { min-height: 3.2em; margin: 14px 0 12px; font-size: clamp(18px, 2vw, 21px); }
  .test-secenek { padding: 9px 12px; }
  .test-secenekler { gap: 6px; }
}
.test-btn.test-gezin { min-width: 132px; justify-content: center; padding: 10px 18px; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.test-btn.test-gezin:disabled { opacity: .35; box-shadow: none; filter: grayscale(.4); }
.test-durak .test-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 120px; }
@media (max-width: 600px) {
  .test-alt { gap: 8px; }
  .test-alt > button { flex: 1 1 0; min-width: 0; justify-content: center; padding-left: 8px; padding-right: 8px; }
  .test-alt > button.test-btn.test-gezin { min-width: 0; padding: 10px 6px; }
  .test-alt > button.test-link.duraklat { padding: 10px 6px; }
}
@media (max-width: 400px) {
  .test-alt { gap: 6px; }
  .test-alt > button { font-size: 13.5px; gap: 4px; padding-left: 6px; padding-right: 6px; }
}

/* Kaynaklar: her ana kaynağın altında sitede kullanılan eserlerin açılır listesi */
.kay-eser { margin-top: 8px; font-family: var(--sans); font-size: 13.5px; }
.kay-eser summary { cursor: pointer; color: var(--ak); font-weight: 600; width: fit-content; list-style: none; }
.kay-eser summary::-webkit-details-marker { display: none; }
.kay-eser summary::before { content: '▸ '; }
.kay-eser[open] summary::before { content: '▾ '; }
.kay-eser ul { margin: 6px 0 0; padding-left: 18px; columns: 2 260px; column-gap: 24px; }
.kay-eser li { margin: 0 0 4px; break-inside: avoid; line-height: 1.45; }
.kay-eser a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted color-mix(in srgb, var(--ak) 60%, transparent); }
.kay-eser a:hover { color: var(--ak); }
.kay-link { text-decoration: none; color: var(--fg); }
.kay-link:hover { color: var(--ak); border-color: var(--ak); }

/* Kaynaklar: her ana başlığın altında ince bir çizgi */
.kay-grup h2 {
  padding-bottom: 7px; border-bottom: 1px solid color-mix(in srgb, var(--ak) 35%, transparent);
}
.test-uzunluk.secili::after {
  content: "✓"; position: absolute; top: 10px; right: 12px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--ak-zit); background: var(--ak);
}

/* ---- Günün sözü ---- */
.soz .neden-kaydir { display: flex; flex-direction: column; }
.soz-ic { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 760px; width: 100%; margin: 0 auto; min-height: 0; }
.soz-figur { position: relative; margin: 0; padding: 34px 34px 28px; border-radius: 22px;
  background: color-mix(in srgb, var(--ak) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ak) 28%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--ak) 10%, transparent); }
.soz-tirnak { position: absolute; top: -18px; left: 26px; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  color: var(--ak); background: var(--cam); border: 1px solid color-mix(in srgb, var(--ak) 45%, transparent); box-shadow: 0 0 16px color-mix(in srgb, var(--ak) 30%, transparent); }
.soz-tirnak svg { width: 22px; height: 22px; }
.soz-metin { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(20px, 2.3vw, 26px); line-height: 1.6; color: var(--fg); }
.soz-metin.siir { white-space: pre-line; font-style: italic; }
.soz-alt { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--ak) 20%, var(--cam-kenar)); }
.soz-yazar { font-size: 17px; color: var(--ak); letter-spacing: .01em; }
.soz-eser { font-size: 14px; color: var(--muted); }
.soz-eser cite { font-style: italic; color: var(--fg-2); }
.soz-kaynak { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; margin: 16px 4px 0; font-size: 13px; color: var(--faint); }
.soz-kaynak a { color: var(--ak); font-weight: 600; text-decoration: none; }
.soz-kaynak a:hover { text-decoration: underline; }
.soz-not { margin: 22px 0 0; min-height: 1.2em; text-align: center; font-size: 13px; color: var(--faint); }
.soz-ic.yeni-acildi .soz-figur { animation: sozBelir .6s ease both; }
@keyframes sozBelir { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* Kapalı mektup: "Mektubu aç"a basınca kapak açılır, söz belirir */
.soz-zarf-alan { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.soz-zarf { position: relative; width: min(300px, 76vw); aspect-ratio: 3 / 2; perspective: 700px;
  border-radius: 14px; animation: zarfSalla 3.2s ease-in-out infinite; }
.zarf-govde { position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--ak) 22%, var(--cam-2)), color-mix(in srgb, var(--ak) 8%, var(--cam)));
  border: 1px solid color-mix(in srgb, var(--ak) 50%, transparent); box-shadow: 0 0 34px color-mix(in srgb, var(--ak) 25%, transparent), 0 16px 34px rgba(0,0,0,.35); }
.zarf-govde::before, .zarf-govde::after { content: ""; position: absolute; bottom: 0; width: 60%; height: 70%;
  background: color-mix(in srgb, var(--ak) 12%, var(--cam-2)); border-top: 1px solid color-mix(in srgb, var(--ak) 35%, transparent); }
.zarf-govde::before { left: 0; transform-origin: bottom left; transform: skewY(-34deg); }
.zarf-govde::after { right: 0; transform-origin: bottom right; transform: skewY(34deg); }
.zarf-kapak { position: absolute; left: 0; right: 0; top: 0; height: 58%; transform-origin: top center; transition: transform .6s ease;
  clip-path: polygon(0 0, 100% 0, 50% 100%); border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ak) 34%, var(--cam-2)), color-mix(in srgb, var(--ak) 18%, var(--cam-2))); }
.zarf-muhur { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ak-zit); background: var(--ak); box-shadow: 0 0 20px color-mix(in srgb, var(--ak) 60%, transparent); transition: opacity .3s; }
.soz-zarf-yazi { margin: 6px 0 0; font-family: var(--serif); font-size: 19px; color: var(--fg); }
.soz-zarf-alan.aciliyor .zarf-kapak { transform: rotateX(180deg); }
.soz-zarf-alan.aciliyor .zarf-muhur { opacity: 0; }
.soz-zarf-alan.aciliyor .soz-zarf { animation: none; }
@keyframes zarfSalla { 0%, 86%, 100% { transform: rotate(0); } 90% { transform: rotate(-2.5deg); } 94% { transform: rotate(2.5deg); } }
@media (max-width: 860px) {
  .soz-figur { padding: 30px 18px 20px; }
  .soz-metin { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .soz-zarf, .soz-ic.yeni-acildi .soz-figur { animation: none; }
  .zarf-kapak { transition: none; }
}

/* ---- Hakkında ---- */
.hk-bolum { margin-top: 1.6em; }
.hk-bolum h2 { margin: 0 0 .5em; font-family: var(--sans); font-size: 19px; color: var(--ak); }
.hk-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--sans); font-size: 15px; line-height: 1.6; }
.hk-liste li { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--ak) 6%, transparent); border: 1px solid color-mix(in srgb, var(--ak) 22%, transparent); }
.hk-liste strong { color: var(--fg); }
.hk-liste span { color: var(--muted); }
.hk-baglanti { margin: 1em 0 0 !important; }
.hk-baglanti .pager-btn { font-family: var(--sans); }
.hk-guncelleme { margin-top: 2em; font-family: var(--sans); font-size: 13px; color: var(--faint); }


/* ---- Test girişi: üç sütun — anlatım · nasıl çalışır ve sonuçlar · soru sayısı ve "Teste başla" ----
   Geniş ekranda sayfanın tamamını kullanır. Bütün yazı boyları --tf ölçeğine bağlıdır (em); js/pages/test.js
   (girisSigdir) bu ölçeği sütunlar taşmayacak en büyük değere ayarlar, böylece büyük ekranda boşluk kalmaz. */
.test-kart .test-ic:has(.test-iki) { max-width: none; }
.test-iki {
  --tf: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch;
}
.test-iki > section { font-size: calc(14px * var(--tf)); }
.test-sol, .test-orta, .test-sag { min-width: 0; padding: 1.6em 1.75em; border-radius: 20px; background: var(--cam); border: 1px solid var(--cam-kenar); }
/* Kart kaymaz: üç sütun kartın yüksekliğini doldurur; en küçük yazı ölçeğinde de sığmazsa yalnızca sütunun içi kayar */
@media (min-width: 861px) {
  .neden-kaydir:has(.test-iki) { overflow: hidden; display: flex; flex-direction: column; padding: clamp(20px, 2vw, 36px) clamp(20px, 2.4vw, 44px); }
  .test-kart .test-ic:has(.test-iki) { flex: 1; min-height: 0; width: 100%; }
  .test-iki { height: 100%; }
  .test-sol, .test-orta, .test-sag { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* Kısa ekran: sütunlar doğal boyunda, kart aşağı kayar */
  .neden-kaydir:has(.test-iki.akar) { overflow-y: auto; display: block; }
  .test-iki.akar { height: auto; }
  .test-iki.akar { align-items: start; }
  .test-iki.akar > section { overflow: visible; }
  /* "Teste başla" görünür kalsın: sağ sütun kaydırırken üstte sabit durur */
  .test-iki.akar .test-sag { position: sticky; top: 0; }
}
.test-sol, .test-sag { display: flex; flex-direction: column; }
.test-iki .giris { font-size: 1.25em; line-height: 1.65; }
.test-iki .test-uyari, .test-iki .test-vurgu, .test-iki .test-gizlilik { margin-top: 1.1em; padding: .9em 1.05em; gap: .85em; }
.test-iki .test-uyari p, .test-iki .test-vurgu, .test-iki .test-gizlilik { font-size: 1em; line-height: 1.6; }
.test-iki .test-ara { margin: 1.6em 0 .7em; font-size: .9em; }
.test-iki .test-ara:first-child { margin-top: 0; }
.test-iki .test-madde { margin-top: 0; font-size: 1em; line-height: 1.6; }
.test-iki .test-madde li { margin-bottom: .45em; }
.test-iki svg { width: 1.25em; height: 1.25em; }
/* Bölümler: soru sayısıyla birlikte küçük çipler */
.test-bolumler { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; }
.test-bolumler li {
  display: inline-flex; align-items: center; gap: .5em; padding: .3em .55em .3em .85em; border-radius: 999px; font-size: .93em; color: var(--fg);
  background: var(--cam-2); border: 1px solid var(--cam-kenar);
}
.test-bolumler span { padding: 0 .5em; border-radius: 999px; font-size: .85em; font-weight: 600; color: var(--ak); background: color-mix(in srgb, var(--ak) 14%, transparent); font-variant-numeric: tabular-nums; }
.test-gizlilik { display: flex; align-items: flex-start; border-radius: 14px; color: var(--fg-2); background: var(--cam-koyu); border: 1px solid var(--cam-kenar); }
.test-gizlilik svg { color: var(--muted); margin-top: .15em; flex-shrink: 0; }
.test-gizlilik b { color: var(--fg); }
.test-iki .test-vurgu svg, .test-iki .test-uyari svg { margin-top: .15em; flex-shrink: 0; }
/* Sağ sütun: soru sayısı seçenekleri alt alta satırlar (solda sayı ve süre, sağda ad, açıklama ve doğruluk oranı) */
.test-sag .test-sec-baslik { font-family: var(--sans); font-size: 1.35em; line-height: 1.35; font-weight: 600; color: var(--fg); }
.test-sag .test-alt-not { font-size: .95em; line-height: 1.55; margin-top: .45em; }
.test-sag .test-uzunluklar { grid-template-columns: 1fr; gap: .7em; margin-top: 1.1em; }
.test-sag .test-uzunluk {
  display: grid; grid-template-columns: 5.6em minmax(0, 1fr); grid-template-areas: "s i" "s a" "s o" "s y";
  align-items: center; column-gap: 1em; row-gap: .2em; padding: 1em 3.2em 1em 1em; text-align: left; border-radius: 16px;
}
.test-sag .test-uzunluk.secili { padding: calc(1em - 1px) calc(3.2em - 1px) calc(1em - 1px) calc(1em - 1px); }
.test-sag .test-uzunluk:hover { transform: none; }
.test-sag .tu-sol { grid-area: s; display: flex; flex-direction: column; align-items: center; gap: .35em; }
.test-sag .tu-sayi { font-size: 2.3em; text-align: center; }
.tu-sure { font-size: .85em; font-weight: 600; color: var(--muted); white-space: nowrap; }
.test-sag .tu-isim { grid-area: i; font-size: 1.12em; }
.test-sag .tu-acik { grid-area: a; font-size: .92em; min-height: 0; }
.test-sag .tu-oran { grid-area: o; margin-top: .3em; }
.test-sag .tu-oran-yazi { grid-area: y; font-size: .8em; min-height: 0; }
.test-sag .tu-rozet { position: static; grid-area: i; justify-self: end; font-size: .82em; }
.test-sag .test-uzunluk.secili::after { top: 50%; right: .9em; margin-top: -12px; }
.test-sag .test-dugmeler { margin-top: auto; padding-top: 1.2em; }
.test-iki .test-btn.birincil { font-size: 1.1em; padding: .8em 2.2em; }
@media (max-width: 860px) {
  .test-iki { grid-template-columns: 1fr; gap: 12px; }
  .test-iki > section { font-size: 14.5px; }
  .neden-kaydir:has(.test-iki) { padding: 12px 10px 20px; }
  .test-sol, .test-orta, .test-sag { padding: 16px; border-radius: 16px; }
}

/* ---- Test sonucu: iki sütun — solda sonuçlar, sağda daha uzun teste geçiş, eksenler ve not ----
   Geniş ekranda kart kaymaz: iki sütun kartın yüksekliğini doldurur; yazı boyları --tf ölçeğine bağlıdır (em)
   ve js/pages/test.js (sonucSigdir) bu ölçeği sütunlar taşmayacak en büyük değere ayarlar. */
.test-kart .test-ic:has(.test-sonuc-iki) { max-width: 1400px; }
.test-sonuc-iki { --tf: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.test-sonuc-iki > section {
  min-width: 0; display: flex; flex-direction: column; font-size: calc(14px * var(--tf));
  padding: 1.5em 1.7em; border-radius: 20px; background: var(--cam); border: 1px solid var(--cam-kenar);
}
.test-sonuc-iki .test-ara { margin: 1.3em 0 .55em; font-size: .86em; }
.test-sonuc-iki .test-ara:first-child { margin-top: 0; }
.test-sonuc-iki .giris { font-size: 1.12em; line-height: 1.55; }
.test-sonuc-iki svg { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.test-sonuc-iki .test-vurgu { margin-top: .9em; padding: .8em 1em; gap: .8em; font-size: 1em; line-height: 1.55; }
.test-sonuc-iki .test-vurgu svg { margin-top: .15em; }
.test-sonuc-iki .test-btn { font-size: 1em; padding: .7em 1.2em; }
.test-sonuc-iki .test-btn.birincil { min-width: 0; font-size: 1.05em; padding: .7em 1.5em; }
/* Sonuç kartları sol sütunu doldurur */
.tsi-sol .test-sonuclar { flex: 1; min-height: 0; margin-top: .9em; gap: .7em; }
.tsi-sol .test-sonuc { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; padding: .9em 1.15em; border-radius: 14px; }
.tsi-sol .ts-ust { gap: .8em; }
.tsi-sol .ts-ust strong { font-size: 1.22em; }
.tsi-sol .ts-sira { width: 2em; height: 2em; border-radius: .6em; font-size: .95em; }
.tsi-sol .ts-yuzde { font-size: 1.35em; }
.tsi-sol .ts-cubuk { height: .4em; margin: .6em 0 .55em; }
.tsi-sol .test-sonuc p { font-size: 1em; line-height: 1.5; }
.tsi-sol .ts-ac { margin: 0; padding: .25em .6em; gap: .3em; font-size: .82em; white-space: nowrap; }
.tsi-sol .ts-ac svg { width: 1em; height: 1em; }
/* Sağ sütun */
.tsi-uzat { margin-top: 0 !important; }
.tsi-uzat > div { min-width: 0; flex: 1; }
.tsi-uzat .test-dugmeler { margin-top: .7em; gap: .6em; }
.tsi-acik { font-size: .9em; line-height: 1.5; color: var(--muted); margin-bottom: .2em; }
.tsi-sag .test-eksenler { gap: 0; }
.tsi-sag .te {
  display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 6.4em) minmax(3em, 1fr) minmax(0, 6.4em) 4.8em;
  align-items: center; gap: .75em; padding: .5em 0; border-bottom: 1px solid var(--cam-kenar); font-size: 1em; color: var(--muted);
}
.tsi-sag .te:last-child { border-bottom: 0; }
.te-ad { font-size: .95em; font-weight: 600; color: var(--fg); }
.te-uc { font-size: .86em; line-height: 1.25; color: var(--faint); text-align: right; }
.te-uc.sag { text-align: left; }
.te-uc.egilim { color: var(--fg); font-weight: 600; }
.te-deger { justify-self: end; padding: .15em .6em; border-radius: 99px; font-size: .8em; font-weight: 600; color: var(--ak); background: color-mix(in srgb, var(--ak) 12%, transparent); white-space: nowrap; }
.te.orta .te-deger { color: var(--faint); background: var(--cam-2); font-weight: 500; }
.tsi-sag .te-cizgi { height: .4em; background: color-mix(in srgb, var(--fg) 13%, transparent); }
.tsi-sag .te-cizgi b { position: absolute; left: 50%; top: -.3em; bottom: -.3em; width: 1px; margin-left: -.5px; background: var(--faint); opacity: .55; }
.tsi-sag .te-cizgi s { position: absolute; top: 0; bottom: 0; border-radius: 99px; background: color-mix(in srgb, var(--ak) 45%, transparent); text-decoration: none; }
/* Konum işareti: parlayan dikey çizgi */
.tsi-sag .te-cizgi i {
  top: 50%; width: 4px; height: 1.5em; margin: -.75em 0 0 -2px; border-radius: 2px; background: var(--ak);
  box-shadow: 0 0 6px var(--ak), 0 0 14px color-mix(in srgb, var(--ak) 70%, transparent);
}
.tsi-son { margin-top: auto; padding-top: .9em; border-top: 1px solid var(--cam-kenar); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7em 1em; }
.tsi-son .test-not { margin: 0; padding: 0; background: none; border: 0; display: flex; align-items: center; gap: .5em; font-size: .88em; line-height: 1.45; color: var(--muted); }
.tsi-son .test-not svg { width: 1.1em; height: 1.1em; color: var(--faint); }
.tsi-son .test-dugmeler { margin: 0; gap: .6em; }
.test-vurgu.uyari { color: var(--fg-2); background: color-mix(in srgb, var(--uyari) 9%, transparent); border-color: color-mix(in srgb, var(--uyari) 38%, transparent); }
.test-vurgu.uyari svg { color: var(--uyari); }
.test-vurgu.uyari b { color: var(--uyari); }
@media (min-width: 861px) {
  .neden-kaydir:has(.test-sonuc-iki) { overflow: hidden; display: flex; flex-direction: column; padding: clamp(16px, 1.8vw, 32px) clamp(16px, 2.2vw, 40px); }
  .test-kart .test-ic:has(.test-sonuc-iki) { flex: 1; min-height: 0; width: 100%; }
  .test-sonuc-iki { height: 100%; }
  .test-sonuc-iki > section { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
/* Kısa ekranda (ör. 1280×720) boşluklar sıkılaşır */
@media (min-width: 861px) and (max-height: 800px) {
  .neden-kaydir:has(.test-sonuc-iki) { padding-block: 14px; }
  .test-sonuc-iki { gap: 14px; }
  .test-sonuc-iki > section { padding: 1.1em 1.3em; }
  .tsi-sol .test-sonuclar { gap: .5em; margin-top: .6em; }
  .tsi-sol .test-sonuc { padding: .6em 1em; }
  .tsi-sol .ts-cubuk { margin: .45em 0 .4em; }
  .tsi-sag .te { padding: .36em 0; }
  .test-sonuc-iki .test-ara { margin: .9em 0 .4em; }
  .tsi-uzat .test-dugmeler { margin-top: .5em; }
  .test-sonuc-iki .test-vurgu { padding: .6em .9em; }
  .tsi-son { padding-top: .6em; }
}
@media (max-width: 860px) {
  .test-sonuc-iki { grid-template-columns: 1fr; gap: 12px; }
  .test-sonuc-iki > section { font-size: 14.5px; padding: 16px; border-radius: 16px; }
  .neden-kaydir:has(.test-sonuc-iki) { padding: 12px 10px 20px; }
  .tsi-son { margin-top: 1em; }
}
@media (max-width: 520px) {
  .tsi-sag .te { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ad deger" "cizgi cizgi" "sol sag"; row-gap: .35em; }
  .tsi-sag .te .te-ad { grid-area: ad; }
  .tsi-sag .te .te-deger { grid-area: deger; }
  .tsi-sag .te .te-cizgi { grid-area: cizgi; }
  .tsi-sag .te .te-uc { grid-area: sol; text-align: left; }
  .tsi-sag .te .te-uc.sag { grid-area: sag; text-align: right; }
}

/* ---- Neden ateistim?: açık kitap düzeni — giriş üstte, altında ince bir çizgiyle ayrılmış iki sayfa ---- */
.neden-kitap {
  flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  padding: 34px clamp(24px, 4vw, 64px) 0;
}
.neden-giris {
  grid-column: 1 / -1; max-width: 1000px; justify-self: center; text-align: center; margin: 0 0 26px; padding-bottom: 24px;
  font-family: var(--serif); font-size: clamp(18px, 1.6vw, 24px); line-height: 1.6; color: var(--fg);
  border-bottom: 1px solid var(--cam-kenar);
}
.neden-sayfa {
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  max-width: none; padding: 4px clamp(18px, 2.4vw, 40px) 36px;
  font-size: clamp(16px, 1.2vw, 19.5px); line-height: 1.85; color: var(--fg-2); text-align: left; hyphens: auto;
}
.neden-sayfa + .neden-sayfa { border-left: 1px solid var(--cam-kenar); }
.neden-sayfa p { margin: 0 0 1.1em; }
.neden-sayfa p:first-child::first-letter { float: left; margin: 6px 10px 0 0; font-size: 3.1em; line-height: .8; color: var(--ak); font-weight: 500; }
.neden-sayfa .sonuc { margin-top: 1.4em; }
@media (max-width: 1000px) {
  .neden-kitap { display: block; overflow-y: auto; overscroll-behavior: contain; padding: 22px 20px 30px; }
  .neden-giris { text-align: left; margin-bottom: 18px; padding-bottom: 16px; }
  .neden-sayfa { overflow: visible; padding: 0; }
  .neden-sayfa + .neden-sayfa { border-left: 0; }
  .neden-sayfa p:first-child::first-letter { float: none; margin: 0; font-size: inherit; color: inherit; font-weight: inherit; }
}