/* ============================================================
 * features/install.css — "uygulamayı yükle" teklif kutusu
 * (JS karşılığı: js/features/install/index.js;
 *  kararı veren katman: js/core/install.js)
 *
 * Reçete BİLEREK çerez banner'ının ikizi (.cook-bd/.cook-banner):
 * ikisi de aynı işi yapıyor — uygulamanın üstünde duran, kapatılabilir,
 * ekranın ortasını kapatmayan küçük bir kart. İki farklı dil kurmak
 * yerine aynı dili konuşuyorlar.
 *
 * K10: giriş jesti KABA değil, camın KENDİ üstünde. Şeffaf bir kap
 * opacity ile fade ederken altındaki cam örnekleyecek zemin bulamıyor
 * ve geçiş bitene kadar düz leke kalıyor.
 * ============================================================ */

/* Kap: tıklamayı geçirir (dışına basmak uygulamaya gider, kutuyu
   yanlışlıkla kapatmaz). Mobilde dock'un ÜSTÜNE oturur — shell.css'in
   --shellbar-h'si tek kaynak, burada sayı tekrar edilmez. */
.inst-bd {
  position: absolute;
  right: 18px; bottom: 18px; z-index: var(--z-toast);
  width: min(360px, calc(100vw - 36px));
  pointer-events: none;
}
@media (max-width: 860px) {
  .inst-bd {
    left: 12px; right: 12px; width: auto;
    bottom: calc(var(--shellbar-h) + var(--safe-bottom) + 12px);
  }
}

/* Çizgisiz cam yüzey — iç öğelere zemin/border VERİLMEZ (kullanıcı
   kararı), ayrımı boşluk ve tipografi yapar. */
.inst-card {
  pointer-events: auto;
  padding: 16px 18px 14px;
  border-radius: var(--r-lg);
  background-color: var(--panel-bg);
  background-image: var(--bgg-img, none);
  box-shadow: var(--shadow-3), var(--glass-edge);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  animation: inst-in var(--tr-med);
}
@keyframes inst-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.inst-head { display: flex; align-items: center; gap: 10px; }
.inst-head > i { font-size: 16px; color: var(--accent); }
.inst-title { flex: 1; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.inst-x {
  width: var(--circle-xs); height: var(--circle-xs); border-radius: 50%;
  /* padding: 0 ŞART — base.css button reset'i padding'i sıfırlamıyor,
     tarayıcının `1px 6px`'i kalıyor. 22px dairede iç kutu 10px'e düşer,
     12.5px'lik fa-fw ikonu sığmayınca ortalanmaz, sola yaslanır
     (2026-09-08, chat.css .ac-x'te ölçülen aynı hata). */
  padding: 0;
  display: grid; place-items: center; flex: none;
  color: var(--text-4); font-size: 12px;
  transition: background var(--tr-fast), color var(--tr-fast);
}
.inst-x:hover { background: var(--surface-2); color: var(--text); }

.inst-body { margin-top: 6px; font-size: 12px; line-height: 1.55; color: var(--text-3); }

/* CHROMIUM yolu: tek buton, basınca işletim sisteminin kendi diyaloğu. */
.inst-actions { margin-top: 14px; display: flex; gap: 8px; }
.inst-go { flex: 1; }

/* WEBKIT yolu: buton YOK — Safari'de açılabilecek bir diyalog yok,
   yapılabilecek tek şey adımları tarif etmek. Numara, ikon yerine:
   uydurma ikon koymaktansa sırayı saymak dürüst. */
.inst-steps { margin-top: 12px; display: grid; gap: 9px; }
.inst-step { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline; }
.inst-n {
  font-size: 11px; font-weight: 700; color: var(--accent-bright);
  font-variant-numeric: tabular-nums;
}
.inst-step span:last-child { font-size: 12px; line-height: 1.5; color: var(--text-3); }