/* Fiyat alarmi penceresi (public/js/alarm.js).

   Telefonda alttan kayan sayfa, masaustunde ortada kart. Renk, yuvarlaklik
   ve yazi tipi style.css token'larindan; burada sabit renk yok. */

/* ------------------------------------------------------------ tetik */

.alrm-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 30px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-tam);
  background: var(--ucuz-panel);
  color: var(--ucuz-metin2);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.alrm-dugme:hover, .alrm-dugme:focus-visible { border-color: var(--ucuz-gold-cizgi); color: var(--ucuz-gold); background: var(--ucuz-gold-zayif); outline: none; }
.alrm-dugme .bi { font-size: .95em; }
.alrm-dugme-sayi {
  min-width: 17px; height: 17px;
  padding: 0 5px;
  border-radius: var(--r-tam);
  background: var(--ucuz-gold);
  color: var(--ucuz-gold-metin);
  font-family: var(--yt-sayi);
  font-size: .64rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* Tablo hucresinde / kartta kucuk zil. */
.alrm-zil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  margin-left: 4px;
  border: 0;
  border-radius: var(--r-tam);
  background: transparent;
  color: var(--ucuz-sonuk2);
  font-size: .8rem;
  cursor: pointer;
  vertical-align: middle;
  transition: color .15s, background .15s;
}
.alrm-zil:hover, .alrm-zil:focus-visible { color: var(--ucuz-gold); background: var(--ucuz-gold-zayif); outline: none; }

/* ------------------------------------------------------------ perde */

body.alrm-acik { overflow: hidden; }

.alrm-perde {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(4, 6, 10, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .2s ease;
}
.alrm-perde.acik { opacity: 1; }

.alrm-kutu {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ucuz-border-guc);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--ucuz-panel);
  box-shadow: var(--g-3), var(--ic-isik);
  transform: translateY(24px);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}
.alrm-perde.acik .alrm-kutu { transform: translateY(0); }

.alrm-tutamac {
  width: 40px; height: 4px;
  margin: 10px auto 2px;
  border-radius: var(--r-tam);
  background: var(--ucuz-border-guc);
}

@media (min-width: 640px) {
  .alrm-perde { align-items: center; padding: 24px; }
  .alrm-kutu { border-bottom: 1px solid var(--ucuz-border-guc); border-radius: var(--r-xl); max-height: 88vh; transform: translateY(12px) scale(.98); }
  .alrm-tutamac { display: none; }
}

/* ------------------------------------------------------------- bas */

.alrm-bas {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 10px;
}
.alrm-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: 0 0 auto;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-md);
  background: var(--ucuz-dark);
  color: var(--ucuz-gold);
  font-size: 1.3rem;
}
.alrm-ikon img { width: 38px; height: 38px; object-fit: contain; border-radius: var(--r-sm); }
.alrm-bas-yazi { min-width: 0; flex: 1 1 auto; }
.alrm-baslik {
  font-family: var(--yt-baslik);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ucuz-metin);
  overflow-wrap: anywhere;
}
.alrm-sunucu {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 8px;
  border-radius: var(--r-tam);
  background: var(--ucuz-gold-zayif);
  color: var(--ucuz-gold);
  font-family: var(--yt-metin);
  font-size: .7rem;
  font-weight: 700;
  vertical-align: middle;
}
.alrm-alt { margin-top: 2px; font-size: .78rem; color: var(--ucuz-sonuk); }
.alrm-alt b { font-family: var(--yt-sayi); font-weight: 700; color: var(--ucuz-metin2); }
.alrm-kapat {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--r-tam);
  background: transparent;
  color: var(--ucuz-sonuk);
  font-size: .95rem;
  cursor: pointer;
}
.alrm-kapat:hover { background: var(--ucuz-yukselti); color: var(--ucuz-metin); }

/* ----------------------------------------------------------- sekme */

.alrm-sekme {
  display: flex;
  gap: 4px;
  margin: 0 18px;
  padding: 3px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
}
.alrm-sekme button {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ucuz-sonuk);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.alrm-sekme button.secili { background: var(--ucuz-yukselti); color: var(--ucuz-metin); box-shadow: var(--g-1); }
.alrm-sekme button b {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-tam);
  background: var(--ucuz-gold);
  color: var(--ucuz-gold-metin);
  font-family: var(--yt-sayi);
  font-size: .64rem;
  line-height: 18px;
}
.alrm-sekme button b:empty { display: none; }

.alrm-panel {
  padding: 14px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ------------------------------------------------------------- yon */

.alrm-yon { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.alrm-yon-b {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 10px 12px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
  color: var(--ucuz-sonuk);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.alrm-yon-b .bi { font-size: 1rem; color: var(--ucuz-sonuk2); }
.alrm-yon-b span { font-size: .88rem; font-weight: 700; color: var(--ucuz-metin2); }
.alrm-yon-b small { font-size: .7rem; }
.alrm-yon-b.secili { border-color: var(--ucuz-gold-cizgi); background: var(--ucuz-gold-zayif); }
.alrm-yon-b.secili .bi, .alrm-yon-b.secili span { color: var(--ucuz-gold); }
.alrm-yon-b.secili small { color: var(--ucuz-metin2); }

.alrm-et {
  display: block;
  margin: 0 0 6px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ucuz-sonuk2);
}

/* ----------------------------------------------------------- giris */

.alrm-giris { display: flex; align-items: stretch; gap: 8px; }
.alrm-adim {
  width: 48px;
  flex: 0 0 auto;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
  color: var(--ucuz-metin2);
  font-size: 1rem;
  cursor: pointer;
}
.alrm-adim:hover { border-color: var(--ucuz-gold-cizgi); color: var(--ucuz-gold); }
.alrm-giris-ic {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  border: 1px solid var(--ucuz-border-guc);
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
}
.alrm-giris-ic:focus-within { border-color: var(--ucuz-gold); box-shadow: 0 0 0 3px var(--ucuz-gold-zayif); }
.alrm-giris-ic input {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 16px;
  border: 0;
  background: transparent;
  color: var(--ucuz-metin);
  font-family: var(--yt-sayi);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.alrm-birim {
  position: absolute;
  right: 16px;
  font-family: var(--yt-sayi);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ucuz-gold);
}

.alrm-hizli { display: flex; gap: 6px; margin-top: 8px; }
.alrm-hizli button {
  flex: 1 1 0;
  height: 30px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-tam);
  background: transparent;
  color: var(--ucuz-sonuk);
  font-family: var(--yt-sayi);
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}
.alrm-hizli button:hover { border-color: var(--ucuz-gold-cizgi); color: var(--ucuz-metin); }
.alrm-hizli button.secili { border-color: var(--ucuz-gold-cizgi); background: var(--ucuz-gold-zayif); color: var(--ucuz-gold); }

.alrm-fark { min-height: 1.4em; margin: 8px 0 16px; font-size: .78rem; color: var(--ucuz-sonuk); }
.alrm-fark b { color: var(--ucuz-metin2); }
.alrm-fark--uyari { color: var(--ucuz-gold); }

/* ---------------------------------------------------------- kanallar */

.alrm-kanallar { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; }
@media (min-width: 480px) { .alrm-kanallar { grid-template-columns: 1fr 1fr; } }

.alrm-kanal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
  color: var(--ucuz-metin2);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.alrm-kanal:hover { border-color: var(--ucuz-border-guc); }
.alrm-kanal-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--ucuz-yukselti);
  color: var(--ucuz-gold);
  font-size: 1rem;
}
.alrm-kanal-ikon--tg { color: var(--ucuz-info); }
.alrm-kanal-ikon--dc { color: #5865f2; }

/* Discord baglama kodu: kanal kartlarinin altinda, tam genislik */
.alrm-kod {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px dashed var(--ucuz-border);
  border-radius: var(--r-md);
  background: var(--ucuz-panel);
}
.alrm-kod-ust { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .76rem; color: var(--ucuz-metin2); }
.alrm-kod-ust a { display: inline-flex; align-items: center; gap: 4px; color: #5865f2; font-weight: 600; text-decoration: none; }
.alrm-kod-ust a:hover { text-decoration: underline; }
.alrm-kod-kutu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-md);
  background: var(--ucuz-dark);
  color: var(--ucuz-metin);
  cursor: pointer;
  text-align: left;
}
.alrm-kod-kutu:hover { border-color: #5865f2; }
.alrm-kod-kutu code { font-size: .92rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; }
.alrm-kod-kutu code b { color: var(--ucuz-gold); letter-spacing: .12em; }
.alrm-kod-kutu .bi { color: var(--ucuz-sonuk); }
.alrm-kod small { font-size: .7rem; line-height: 1.45; color: var(--ucuz-sonuk); }
.alrm-kanal-yazi { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.alrm-kanal-yazi b { font-size: .84rem; font-weight: 700; color: var(--ucuz-metin); }
.alrm-kanal-yazi small { font-size: .7rem; color: var(--ucuz-sonuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alrm-kanal.hazir .alrm-kanal-yazi small { color: var(--ucuz-green); }
.alrm-kanal-onay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  flex: 0 0 auto;
  border: 1px solid var(--ucuz-border-guc);
  border-radius: var(--r-tam);
  color: transparent;
  font-size: .8rem;
  transition: background .15s, color .15s, border-color .15s;
}
.alrm-kanal.secili { border-color: var(--ucuz-gold-cizgi); background: var(--ucuz-gold-zayif); }
.alrm-kanal.secili .alrm-kanal-onay { background: var(--ucuz-gold); border-color: var(--ucuz-gold); color: var(--ucuz-gold-metin); }

.alrm-kur {
  width: 100%;
  height: 50px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--ucuz-gold);
  color: var(--ucuz-gold-metin);
  font-family: var(--yt-baslik);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(242, 179, 61, .22);
  transition: transform .12s, filter .12s;
}
.alrm-kur:hover { filter: brightness(1.06); }
.alrm-kur:active { transform: translateY(1px); }
.alrm-kur:disabled { opacity: .6; cursor: default; }
.alrm-not { margin: 10px 0 0; font-size: .72rem; line-height: 1.5; color: var(--ucuz-sonuk2); }

/* ------------------------------------------------------------ liste */

.alrm-liste { display: flex; flex-direction: column; gap: 6px; }
.alrm-satir {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-lg);
  background: var(--ucuz-dark);
}
.alrm-satir--caldi { border-color: var(--ucuz-gold-cizgi); }
.alrm-satir-ikon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--ucuz-yukselti);
  color: var(--ucuz-gold);
}
.alrm-satir-ikon img { width: 28px; height: 28px; object-fit: contain; }
.alrm-satir-yazi { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.alrm-satir-yazi b { font-size: .86rem; color: var(--ucuz-metin); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alrm-satir-yazi > span { font-size: .74rem; color: var(--ucuz-sonuk); }
.alrm-durum { display: inline-flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--ucuz-sonuk2); }
.alrm-durum--caldi { color: var(--ucuz-gold); }
.alrm-nabiz {
  width: 7px; height: 7px;
  border-radius: var(--r-tam);
  background: var(--ucuz-green);
  box-shadow: 0 0 0 0 rgba(58, 208, 125, .5);
  animation: alrmNabiz 1.8s ease-out infinite;
}
@keyframes alrmNabiz { 0% { box-shadow: 0 0 0 0 rgba(58, 208, 125, .5); } 100% { box-shadow: 0 0 0 7px rgba(58, 208, 125, 0); } }
.alrm-satir-sag { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.alrm-kanal-mini { display: inline-flex; gap: 4px; margin-right: 4px; font-size: .8rem; color: var(--ucuz-sonuk2); }
.alrm-mini {
  width: 30px; height: 30px;
  border: 1px solid var(--ucuz-border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ucuz-sonuk);
  cursor: pointer;
}
.alrm-mini:hover { border-color: var(--ucuz-gold-cizgi); color: var(--ucuz-gold); }
.alrm-mini--sil:hover { border-color: var(--ucuz-red); color: var(--ucuz-red); }

.alrm-bos { padding: 28px 12px; text-align: center; color: var(--ucuz-sonuk); }
.alrm-bos > .bi { font-size: 1.8rem; color: var(--ucuz-sonuk2); }
.alrm-bos p { margin: 8px 0 2px; font-weight: 600; color: var(--ucuz-metin2); }
.alrm-bos small { font-size: .74rem; }

.alrm-liste-alt { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.alrm-bag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ucuz-sonuk);
  font-size: .76rem;
  cursor: pointer;
}
.alrm-bag:hover { color: var(--ucuz-gold); }
.alrm-bag:disabled { opacity: .5; }

/* ------------------------------------------------------------ toast */

.alrm-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1100;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border: 1px solid var(--ucuz-border-guc);
  border-radius: var(--r-lg);
  background: var(--ucuz-yukselti);
  color: var(--ucuz-metin);
  font-size: .84rem;
  font-weight: 600;
  box-shadow: var(--g-2);
  transform: translate(-50%, 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.alrm-toast.acik { opacity: 1; transform: translate(-50%, 0); }
.alrm-toast--iyi { border-color: var(--ucuz-green); }
.alrm-toast--hata { border-color: var(--ucuz-red); }

/* ------------------------------------------------- sayfaya yerlesim */

.ips-alarm { margin-left: auto; }
.ips-zil { margin-left: 0; }
.alrm-zil--mobil { width: 38px; height: 38px; flex: 0 0 auto; border: 1px solid var(--ucuz-border); background: var(--ucuz-panel); }
.server-header .alrm-zil { margin-left: 2px; }
.alrm-serit .alrm-dugme-sayi { margin-left: 2px; }