/* ÜRÜN SAYFASI — Favori · Listeye ekle · Fiyatı düşünce haber ver (2026-11-11) · assets/js/urun-takip.js */
.utk-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.utk-bar[hidden] { display: none; }
#utkBar .utk-btn { box-sizing: border-box; margin: 0; text-transform: none; letter-spacing: normal; box-shadow: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: 999px; background: #fff; color: #374151;
  font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
#utkBar .utk-btn[hidden] { display: none; }
#utkBar .utk-btn i { font-size: 16px; }
#utkBar .utk-btn:hover:not(:disabled), .utk-btn:focus-visible { border-color: #9ca3af; color: #111827; }
#utkBar .utk-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
#utkBar .utk-btn:disabled { opacity: .6; cursor: progress; }
#utkBar .utk-btn.acik { border-color: #f43f5e; color: #be123c; background: #fff1f2; }
#utkBar .utk-btn[data-utk="alarm"].acik { border-color: #059669; color: #047857; background: #ecfdf5; }
.utk-pen { position: fixed; inset: 0; margin: auto; width: min(480px, calc(100vw - 24px)); max-width: none; height: fit-content; max-height: calc(100vh - 24px); overflow: auto;
  padding: 0; border: 0; border-radius: 14px; background: #fff; color: #111827; box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .45); font-size: 14px; }
.utk-pen::backdrop { background: rgba(15, 23, 42, .55); }
.utk-pen-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #e5e7eb; }
.utk-pen-bas h3 { margin: 0; font-size: 16px; font-weight: 700; }
.utk-pen-kapat { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #6b7280; font-size: 22px; line-height: 1; cursor: pointer; }
.utk-pen-kapat:hover { background: #f3f4f6; color: #111827; }
.utk-pen-govde { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.utk-pen-uyari { margin: 0 18px; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 13px; }
.utk-pen-uyari[hidden] { display: none; }
.utk-pen-alt { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; }
.utk-urun { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f9fafb; }
.utk-urun span { font-size: 13px; color: #4b5563; }
.utk-not { margin: 0; color: #4b5563; font-size: 13px; }
.utk-not--tamam { color: #047857; }
.utk-listeler { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.utk-secim { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 2px; cursor: pointer; }
.utk-secim small { color: #6b7280; margin-left: auto; }
.utk-secim.pasif { color: #9ca3af; cursor: not-allowed; }
.utk-girdi, .utk-miktar input { height: 38px; padding: 0 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; width: 100%; }
.utk-girdi[hidden] { display: none; }
.utk-miktar { display: flex; align-items: center; gap: 10px; margin: 0; }
.utk-miktar input { width: 110px; }
.utk-kanallar { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.utk-riza { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 10px; font-size: 12.5px; color: #374151; line-height: 1.5; cursor: pointer; }
.utk-riza input { margin-top: 3px; flex: 0 0 auto; }
.utk-d { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: #111827; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.utk-d:disabled { opacity: .6; cursor: progress; }
.utk-d--ikincil { background: #f3f4f6; color: #111827; }
.utk-d--tehlike { background: #fef2f2; color: #b91c1c; margin-right: auto; }
.utk-tost { position: fixed; left: 50%; bottom: 24px; z-index: 2147483000; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  padding: 10px 16px; border-radius: 10px; background: #111827; color: #fff; font-size: 14px; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .4); transition: opacity .2s, transform .2s; }
.utk-tost.acik { opacity: 1; transform: translate(-50%, 0); }
.utk-tost--hata { background: #b91c1c; }
@media (max-width: 575px) {
  #utkBar .utk-btn { flex: 1 1 auto; justify-content: center; }
}