/**
 * Kart katmanı — admin araçları (kısa ID rozeti), (i) bilgi butonu ve modalı.
 * Mekanizma base.html'de merkezî; bkz. docs/paketler/KART-KATMANI-TASARIM.md.
 *
 * 2026-07-15: base.html içinde inline <style> olarak duruyordu (KURALLAR §3:
 * "Inline <style> veya <script> — harici dosyaya taşı"). Jinja ifadesi
 * içermiyordu → birebir taşındı, kural değişmedi.
 *
 * NOT: Buradaki renkler sabit (#0f172a vb.) — CSS token sistemine
 * (var(--color-*)) geçirilmedi, çünkü taşıma sırasında görsel davranış
 * değişmemeliydi. Token'a çevirme ayrı iş.
 */

.kk-card-admin-tools {
  position: absolute; top: 6px; right: 6px; z-index: 20;
  display: inline-flex; align-items: center; gap: 4px;
}

.kk-card-id-badge {
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #0f172a; color: #a5b4fc; padding: 3px 6px; border-radius: 5px;
  opacity: .65; user-select: all; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); pointer-events: none;
}

/* (i) bilgi butonu — başlığın hemen sağında, akış içinde (inline) */
.kk-card-info-btn {
  width: 16px; height: 16px; border: none; border-radius: 50%;
  background: #6366f1; color: #fff; font-size: 9px; line-height: 1;
  cursor: pointer; opacity: .7; transition: opacity .15s, background .15s;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .2); padding: 0;
  vertical-align: middle; flex: none;
}

.kk-card-info-btn:hover { opacity: 1; background: #4f46e5; }
.kk-card-info-btn::before { content: ""; }  /* gap başlıktan ::after ile gelir */

/* başlık ile (i) arasında normal kelime-arası boşluk */
.kk-info-gap { display: inline-block; width: .4em; }

#kk-card-info-modal-overlay {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .6); z-index: 10050;
  display: none; align-items: center; justify-content: center; padding: 20px;
}

#kk-card-info-modal {
  background: #fff; border-radius: 12px; width: min(560px, 94vw); max-height: 80vh;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); overflow: hidden;
}

#kk-card-info-modal .kk-h {
  padding: 14px 18px; border-bottom: 1px solid #e2e8f0;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

#kk-card-info-modal .kk-h h3 { margin: 0; font-size: 15px; font-weight: 700; color: #0f172a; }

#kk-card-info-modal .kk-h code {
  font: 600 11px/1 ui-monospace, monospace; color: #6366f1;
  background: #eef2ff; padding: 3px 7px; border-radius: 5px;
}

/* Govde JS tarafinda yapilandirilmis dugumlerle (p/ul/li) kurulur — bkz.
   base.html::renderInfoBody. pre-wrap KULLANILMAZ: paragraf ayrimi zaten
   dugum bazli; pre-wrap ile birleserek cift bosluk olustururdu. */
#kk-card-info-modal .kk-b {
  padding: 18px; overflow-y: auto; font-size: 13.5px; line-height: 1.6;
  color: #334155;
}
#kk-card-info-modal .kk-b p:last-child { margin-bottom: 0; }

#kk-card-info-modal .kk-x {
  border: none; background: none; font-size: 20px; color: #94a3b8;
  cursor: pointer; line-height: 1;
}