/* Tarayıcı Eklentisi sayfası — yalnızca bu sayfaya özgü stiller.
 *
 * Renkler app.css belirteçlerinden alınır (yeni değer TANIMLANMAZ);
 * kontrast denetimi (check-contrast.mjs) bu belirteçleri zaten doğruluyor.
 */

.ekl-baslik { max-width: 640px; margin-bottom: 26px; }
.ekl-baslik h1 { font-size: 28px; margin-bottom: 10px; }
.ekl-baslik p { color: var(--muted); line-height: 1.6; }

/* ─────────────────────────────────────────────── SINIR BİLDİRİMİ
 * "Yapar / yapmaz" listesi — beklenti gerçekle çarpışmadan önce netleşsin. */
.ekl-sinir { margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; }
.ekl-sinir-satir { display: flex; align-items: flex-start; gap: 12px; line-height: 1.5; }
.ekl-sinir-ikon {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; margin-top: 1px;
}
.ekl-sinir-evet .ekl-sinir-ikon { background: var(--ok-soft); color: var(--ok); }
.ekl-sinir-hayir .ekl-sinir-ikon { background: var(--danger-soft); color: var(--danger); }
.ekl-sinir-hayir { font-weight: 500; }

/* ─────────────────────────────────────────────────────── KURULUM */
.ekl-kurulum { margin-bottom: 20px; }
.ekl-adimlar { list-style: none; display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.ekl-adimlar li { display: flex; align-items: flex-start; gap: 14px; line-height: 1.5; }
.ekl-adim-no {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sunken); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}

/* ───────────────────────────────────────────────────── ANAHTAR LİSTESİ */
.ekl-iskelet { height: 64px; border-radius: var(--r); background: var(--sunken); margin-top: 16px; }
.ekl-bos { margin-top: 16px; padding: 24px; text-align: center; color: var(--muted); }

.ekl-anahtar-liste { list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ekl-anahtar-satir {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r);
}
.ekl-anahtar-etiket { font-weight: 600; }

.ekl-rozet {
  flex: none; padding: 4px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.ekl-rozet-aktif { background: var(--ok-soft); color: var(--ok); }
.ekl-rozet-iptal { background: var(--sunken); color: var(--muted); }

/* ─────────────────────────────────────────────────── YENİ ANAHTAR MODALI */
.ekl-uyari-tek {
  background: var(--amber-soft); color: var(--amber-ink);
  border-radius: var(--r); padding: 12px 14px; line-height: 1.55; font-size: 14px;
}
.ekl-anahtar-kutu {
  display: flex; align-items: center; gap: 10px;
  background: var(--sunken); border-radius: var(--r);
  padding: 12px 14px;
}
.ekl-anahtar-kutu code {
  flex: 1; font-family: var(--mono); font-size: 13.5px;
  overflow-wrap: anywhere; user-select: all;
}

@media (max-width: 640px) {
  .ekl-anahtar-satir { flex-direction: column; align-items: flex-start; }
}