/* ==========================================================================
   BİLEŞENLER — Rozet, boş durum, çapraz sütunlar, referans linkleri,
   kaynak çipleri, onay penceresi
   ========================================================================== */

/* ---- Rozet (arama sonuçlarında tür etiketi) ---- */
.rozet {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: var(--ak); background: color-mix(in srgb, var(--ak) 12%, transparent);
}

/* ---- Boş durum ---- */
.bos-durum {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 22px; padding: 44px 20px; border: 1px dashed var(--cam-kenar-2); border-radius: 18px;
  color: var(--faint); text-align: center; font-size: 14px;
}

/* ---- Çapraz eşleşmeler: Tevrat, Zebur, İncil, Kur’an (kronolojik) — her kitap alt alta bir kart ---- */
.sutunlar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: clamp(22px, 1.8vw, 32px); }
.sutun { padding: clamp(16px, 1.25vw, 22px); border-radius: 16px; background: var(--cam); border: 1px solid var(--cam-kenar); }
.sutun-baslik { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sutun-ikon { display: grid; place-items: center; color: var(--ak); }
.sutun-ikon svg { width: clamp(20px, 1.4vw, 24px); height: clamp(20px, 1.4vw, 24px); }
.sutun-baslik h3 { font-size: clamp(15px, 1.15vw, 19px); font-weight: 600; color: var(--ak); }
.sutun-sayi {
  font-size: clamp(11.5px, .85vw, 13.5px); font-weight: 600; color: var(--fg-2); font-variant-numeric: tabular-nums;
  padding: 1px 9px; border-radius: 999px; background: var(--cam-2); border: 1px solid var(--cam-kenar);
}

/* ---- Referans çipleri: "Bakara 2:117 ↗" → asıl metin (kart içinde yan yana, sığmayan alt satıra geçer) ---- */
.ref-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ref-link {
  display: inline-flex; align-items: center; gap: 8px; padding: clamp(6px, .5vw, 9px) clamp(13px, 1vw, 17px); border-radius: 999px;
  font-size: clamp(14px, 1.05vw, 17px); font-weight: 500; line-height: 1.3; color: var(--fg); text-decoration: none; font-variant-numeric: tabular-nums;
  background: var(--cam-2); border: 1px solid var(--cam-kenar);
  transition: background .15s, border-color .15s, color .15s; max-width: 100%; overflow-wrap: anywhere;
}
.ref-link:hover { color: var(--ak); background: var(--cam-3); border-color: color-mix(in srgb, var(--ak) 45%, transparent); }
.ref-ok { color: var(--muted); font-size: clamp(12px, .85vw, 14px); }
.ref-link:hover .ref-ok { color: var(--ak); }

.konu-not {
  margin-top: 14px; padding: clamp(14px, 1.1vw, 20px) clamp(16px, 1.25vw, 22px); border-radius: 16px;
  background: var(--cam); border: 1px solid var(--cam-kenar); font-size: clamp(14px, 1.05vw, 17px); line-height: 1.6; color: var(--fg);
}
.konu-not p { margin: 0 0 10px; }
.konu-not p:last-child { margin: 0; }

/* ---- Kaynak çipleri: ayet → quran.com, hadis → sunnah.com, Kutsal Kitap → bible.com ---- */
.kaynaklar { display: flex; flex-wrap: wrap; gap: 6px; }
.kc {
  display: inline-flex; align-items: center; gap: 6px; padding: clamp(4px, .32vw, 6px) clamp(11px, .8vw, 14px); border-radius: 999px;
  font-size: clamp(12.5px, .92vw, 15px); line-height: 1.3; color: var(--fg); text-decoration: none;
  background: var(--cam-2); border: 1px solid var(--cam-kenar); transition: border-color .15s, background .15s, color .15s;
}
a.kc:hover { color: var(--ak); border-color: color-mix(in srgb, var(--ak) 50%, transparent); background: var(--cam-3); }
.kc { max-width: 100%; }
.kc-isim { font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere; }
.kc-ok { font-size: clamp(11px, .8vw, 13px); color: var(--muted); }
.kc-derece { padding: 1px 7px; border-radius: 999px; font-size: clamp(11px, .8vw, 13px); font-weight: 600; color: var(--ak); background: color-mix(in srgb, var(--ak) 14%, transparent); }

/* ---- Onay penceresi (ör. testten çıkarken) ---- */
.onay-katman { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(16, 16, 18, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.onay {
  width: 100%; max-width: 460px; padding: 24px 24px 20px; border-radius: 24px; background: var(--kati);
  border: 1px solid var(--cam-kenar-2); box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.onay h2 { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.onay p { font-size: 14.5px; line-height: 1.65; color: var(--fg-2); }
.onay-dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.onay-btn { padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fg); background: var(--cam-2); border: 1px solid var(--cam-kenar-2); }
.onay-btn:hover { border-color: var(--muted); }
.onay-btn.birincil { color: var(--ak-zit); background: var(--ak); border-color: var(--ak); }
.onay-btn.tehlike { color: var(--hata); background: color-mix(in srgb, var(--hata) 12%, transparent); border-color: color-mix(in srgb, var(--hata) 50%, transparent); }