/* Web push bildirimleri — zil, açılır kutu, izin kutusu, kısa mesaj (2026-10-24). header.php yükler (bildirimler açıksa). */

/* Header'daki zil: arama kutusuyla aynı yarı saydam hap dili; arama kutusunun soluna yaslanır */
header .push-bell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  margin-left: auto;
  margin-right: 10px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
header .push-bell[hidden] { display: none; }
header .push-bell:hover,
header .push-bell[aria-expanded="true"] {
  background-color: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.8);
}
header .push-bell:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5); }
header .push-bell svg { width: 16px; height: 16px; fill: #fff; }
/* Durum noktası: açık = yeşil, engelli = gri */
header .push-bell::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--main-color);
  background: transparent;
  box-sizing: content-box;
}
header .push-bell[data-state="on"]::after { background: #2ecc71; }
header .push-bell[data-state="blocked"]::after { background: #adb5bd; }
header .push-bell[data-state="off"]::after,
header .push-bell[data-state="ios"]::after { display: none; }

/* Ortak düğme */
.push-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 1px solid var(--main-color);
  border-radius: 999px;
  background: var(--main-color);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 0.15s ease, background-color 0.15s ease;
}
.push-btn:hover { filter: brightness(1.1); }
.push-btn:focus-visible { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15); }
.push-btn.is-ghost { background: transparent; color: #555; border-color: #ddd; }
.push-btn.is-ghost:hover { filter: none; background: #f4f4f4; }

/* Zilin açılır kutusu */
.push-pop {
  position: fixed;
  z-index: 1000;
  width: 290px;
  max-width: calc(100vw - 24px);
  padding: 16px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  outline: none;
}
.push-pop strong { display: block; margin-bottom: 6px; font-size: 0.95rem; color: #111; }
.push-pop p { margin-bottom: 12px; font-size: 0.85rem; line-height: 1.5; color: #555; }
.push-pop p:last-child { margin-bottom: 0; }
.push-pop .push-btn { width: 100%; }

/* Nazik izin kutusu (sol altta; mobilde altta tam genişlik) */
.push-prompt {
  position: fixed;
  z-index: 999;
  left: 20px;
  bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  width: 380px;
  max-width: calc(100vw - 32px);
  padding: 16px 18px;
  border-radius: 14px;
  border-left: 4px solid var(--main-color);
  background: #fff;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.push-prompt.is-open { opacity: 1; transform: none; }
.push-prompt-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--main-color);
}
.push-prompt-icon svg { width: 18px; height: 18px; fill: #fff; }
.push-prompt-text { flex: 1 1 200px; min-width: 0; }
.push-prompt-text strong { display: block; font-size: 0.95rem; color: #111; }
.push-prompt-text span { display: block; margin-top: 2px; font-size: 0.85rem; line-height: 1.45; color: #555; }
.push-prompt-actions { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }

/* Kısa süreli mesaj */
.push-toast {
  position: fixed;
  z-index: 1001;
  left: 50%;
  bottom: 24px;
  max-width: calc(100vw - 32px);
  padding: 11px 18px;
  border-radius: 10px;
  background: #222;
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.push-toast.is-open { opacity: 1; transform: translate(-50%, 0); }
.push-toast.is-ok { background: #1e7e45; }

@media (max-width: 768px) {
  /* Mobilde zil arama kutusunun solunda, aynı satırda */
  header .push-bell { margin: 0 10px 0 0; } /* arama kutusunun satır içi margin:0'ı ile aynı hizada */
  header .push-bell:not([hidden]) + .search { width: calc(100% - 44px); }
  .push-prompt { left: 16px; right: 16px; bottom: 16px; width: auto; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .push-prompt, .push-toast { transition: none; }
}