/* IGA glass design system — vanilla/src/styles/tokens.css'ten birebir alınmış
   .glass-* blokları (izole demo paketi için). Kök değişken fallback'leri eklendi. */
:root { --font-scale: 1; --z-panel: 600; --map-lum: 0; }
html, body { margin: 0; background: #000; color: #fff;
  font-family: system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
button { font: inherit; }


/* ── Trigger: button that opens glass popover ── */
.glass-trigger {
  border: 0.5px solid transparent !important;
  transition: background 120ms ease, border-color 120ms ease,
              backdrop-filter 120ms ease, box-shadow 120ms ease;
}
.glass-trigger.bordered {
  border: 1px solid rgba(255,255,255,0.12) !important;
}
.glass-trigger:hover,
.glass-trigger.active {
  background: linear-gradient(135deg, rgba(20,20,28,0.50), rgba(12,12,18,0.60), rgba(24,24,32,0.45)) !important;
  backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important;
  -webkit-backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.20),
              inset 0 1px 0 rgba(255,255,255,0.10),
              inset 0 -1px 0 rgba(0,0,0,0.15) !important;
}

/* ── Popover: the floating panel itself ── */
/* --glass-breath: extra right-side space after content (default 32px) */
/* --map-lum: 0.0 (dark map) → 1.0 (bright satellite). Set by AirportMap via JS. */
:root { --map-lum: 0; }

.glass-popover {
  pointer-events: auto;
  z-index: var(--z-panel);
  --glass-breath: 2.500vw; /* 48px */
  transition: border-color 150ms ease, box-shadow 150ms ease;
  /* Adaptive: base opacity 0.50-0.60, boosted up to +0.30 when map is bright */
  --_boost: calc(var(--map-lum, 0) * 0.30);
  background: linear-gradient(135deg,
    rgba(14,14,20, calc(0.50 + var(--_boost))),
    rgba(8,8,14,   calc(0.60 + var(--_boost))),
    rgba(18,18,24, calc(0.45 + var(--_boost))));
  backdrop-filter: blur(120px) saturate(2.2) brightness(calc(0.9 - var(--map-lum, 0) * 0.15));
  -webkit-backdrop-filter: blur(120px) saturate(2.2) brightness(calc(0.9 - var(--map-lum, 0) * 0.15));
  box-shadow: 0 0.052vw 0.104vw rgba(0,0,0,0.15),
              0 0.521vw 2.500vw rgba(0,0,0, calc(0.35 + var(--map-lum, 0) * 0.20)),
              inset 0 1px 0 rgba(255,255,255, calc(0.10 - var(--map-lum, 0) * 0.04)),
              inset 0 -1px 0 rgba(0,0,0,0.15);
  border: 0.5px solid rgba(255,255,255, calc(0.12 - var(--map-lum, 0) * 0.04));
  border-radius: 0.625vw; /* 12px */
  color: rgba(255,255,255,0.90);
}

/* ── Item: interactive row inside popover ── */
/* Inherits --glass-breath from .glass-popover for right-side spacing */
.glass-item {
  transition: background 80ms ease, color 80ms ease;
  color: rgba(255,255,255,0.90);
  border: none;
  background: transparent;
  margin-right: var(--glass-breath, 1.667vw);
}
.glass-item:hover {
  background: rgba(0,168,232,0.22) !important;
  color: #ffffff !important;
}
.glass-item.muted {
  color: rgba(255,255,255,0.40);
}
.glass-item.muted:hover {
  color: #ffffff !important;
}

/* ── Separator ── */
.glass-sep {
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* ── Close / dismiss button ── */
.glass-close {
  border: none;
  background: transparent;
  transition: background 80ms ease;
}
.glass-close:hover {
  background: rgba(255,255,255,0.12) !important;
}

/* ── Backward compat aliases (→ migrate to glass-*) ── */
.glass-icon-hover   { border: 0.5px solid transparent !important; transition: background 120ms ease, border-color 120ms ease; }
.glass-icon-hover:hover, .glass-icon-active { background: linear-gradient(135deg, rgba(20,20,28,0.50), rgba(12,12,18,0.60), rgba(24,24,32,0.45)) !important; backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important; -webkit-backdrop-filter: blur(120px) saturate(2.2) brightness(0.9) !important; border-color: rgba(255,255,255,0.12) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(0,0,0,0.15) !important; }
.macos-menu-item    { transition: background 80ms ease, color 80ms ease; }
.macos-menu-item:hover { background: rgba(0,168,232,0.22) !important; color: #ffffff !important; }
/* ── NotificationPanel başlık aksiyon ikonu — hover TAMAMEN CSS ──
 * Kaynak: src/styles/tokens.css `.row-action-btn`. JS mouseenter/mouseleave
 * ile yönetilen hover takılı kalıyor (sahip 2026-08-21, iki kez bildirdi). */
.row-action-btn {
  border: 1px solid transparent;
  background: transparent;
  opacity: 0.56;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}
.row-action-btn:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  opacity: 1;
}
.row-action-btn:disabled {
  opacity: 0.22;
  cursor: default;
  pointer-events: none; /* hover kuralı pasifken devreye girmesin */
}

/* Bildirim kartı sabit yüksekliği — tüm kartlar eşit boyda, taşan metin
 * ellipsis ile kırpılır (64px @1920). Kaynak: src/styles/tokens.css. */
:root { --notif-card-h: 3.333vw; }

/* ── Onay modali destek stilleri (senkron 2026-08-24, kaynak: tokens.css) ── */
:root { --z-sheet-popover: 700; }
.sheet-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sheet-icon-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.20);
}