*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ══════════════════════════════════════
   DARK THEME (web paneli ile aynı: #03091A + #0A7EC2)
══════════════════════════════════════ */
[data-theme="dark"] {
  --bg: #03091A;
  --bg2: #060F22;
  --bg-card: rgba(10,30,60,.35);
  --bg-card-solid: #060F22;
  --bg-hover: rgba(60,186,224,.08);
  --bg-glass: rgba(3,9,26,.88);
  --border: rgba(10,30,60,.8);
  --border2: rgba(60,186,224,.18);
  --accent: #0A7EC2;
  --accent2: #3CBAE0;
  --accent3: #0E9FD8;
  --accent-glow: rgba(60,186,224,.16);
  --cyan: #3CBAE0;
  --emerald: #34d399;
  --rose: #fb7185;
  --amber: #fbbf24;
  --text1: #9ADAF4;
  --text2: rgba(154,218,244,.7);
  --text3: rgba(154,218,244,.4);
  --drawer-bg: #060F22;
  --shadow: rgba(0,0,0,.45);
  --theme-icon: 'bi-sun-fill';
  --meta-color: #03091A;
}

/* ══════════════════════════════════════
   LIGHT THEME (web paneli ile aynı: #EDF3FC + #054E8A)
══════════════════════════════════════ */
[data-theme="light"] {
  --bg: #EDF3FC;
  --bg2: #F0F7FF;
  --bg-card: rgba(255,255,255,.88);
  --bg-card-solid: #ffffff;
  --bg-hover: #E6F2FA;
  --bg-glass: rgba(237,243,252,.9);
  --border: #C2D9EF;
  --border2: #A4CDE8;
  --accent: #054E8A;
  --accent2: #0A7EC2;
  --accent3: #0E9FD8;
  --accent-glow: rgba(5,78,138,.08);
  --cyan: #0A7EC2;
  --emerald: #059669;
  --rose: #e11d48;
  --amber: #d97706;
  --text1: #052E52;
  --text2: #2E75AA;
  --text3: #5AACD0;
  --drawer-bg: #ffffff;
  --shadow: rgba(5,78,138,.14);
  --theme-icon: 'bi-moon-fill';
  --meta-color: #EDF3FC;
}

html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text1);
  min-height: 100%;
  overflow-x: hidden;
  transition: background .3s, color .3s;
  position: relative;
}
body > main,
body > .app-toast,
body > .pwa-install,
body > .ptr-indicator,
body > .fab-back { position: relative; z-index: 1; }

/* ══════ ANIMATED MESH GRADIENT BACKGROUND ══════ */
.mesh-bg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
/* PERF: canlı filter:blur(80px) yerine gradient'in kendisi yumuşatıldı —
   görünüm aynı, GPU her karede 4 dev blur katmanı compositlemez (eski cihaz ana yavaşlık sebebi) */
.mesh-bg span {
  position: absolute; border-radius: 50%;
  will-change: transform;
}
.mesh-bg span:nth-child(1) {
  width: 420px; height: 420px; top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(10,126,194,.50) 0%, rgba(10,126,194,.34) 28%, rgba(10,126,194,.14) 55%, transparent 82%);
  animation: meshDrift1 22s ease-in-out infinite;
}
.mesh-bg span:nth-child(2) {
  width: 380px; height: 380px; top: 30%; right: -140px;
  background: radial-gradient(circle, rgba(14,159,216,.41) 0%, rgba(14,159,216,.28) 28%, rgba(14,159,216,.11) 55%, transparent 82%);
  animation: meshDrift2 28s ease-in-out infinite;
}
.mesh-bg span:nth-child(3) {
  width: 340px; height: 340px; bottom: -80px; left: 20%;
  background: radial-gradient(circle, rgba(34,211,238,.36) 0%, rgba(34,211,238,.25) 28%, rgba(34,211,238,.10) 55%, transparent 82%);
  animation: meshDrift3 26s ease-in-out infinite;
}
.mesh-bg span:nth-child(4) {
  width: 300px; height: 300px; top: 55%; left: -80px;
  background: radial-gradient(circle, rgba(236,72,153,.27) 0%, rgba(236,72,153,.19) 28%, rgba(236,72,153,.08) 55%, transparent 82%);
  animation: meshDrift4 30s ease-in-out infinite;
}
[data-theme="dark"] .mesh-bg span { opacity: .35; }
[data-theme="light"] .mesh-bg span { opacity: .55; }
[data-theme="light"] .mesh-bg span:nth-child(1) { background: radial-gradient(circle, rgba(10,126,194,.50) 0%, rgba(10,126,194,.34) 28%, rgba(10,126,194,.14) 55%, transparent 82%); }
[data-theme="light"] .mesh-bg span:nth-child(2) { background: radial-gradient(circle, rgba(236,72,153,.41) 0%, rgba(236,72,153,.28) 28%, rgba(236,72,153,.11) 55%, transparent 82%); }
[data-theme="light"] .mesh-bg span:nth-child(3) { background: radial-gradient(circle, rgba(34,211,238,.45) 0%, rgba(34,211,238,.31) 28%, rgba(34,211,238,.13) 55%, transparent 82%); }
[data-theme="light"] .mesh-bg span:nth-child(4) { background: radial-gradient(circle, rgba(251,191,36,.36) 0%, rgba(251,191,36,.25) 28%, rgba(251,191,36,.10) 55%, transparent 82%); }

@keyframes meshDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  33%     { transform: translate(40vw, 20vh) scale(1.1); }
  66%     { transform: translate(20vw, 50vh) scale(.95); }
}
@keyframes meshDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-45vw, 30vh) scale(1.15); }
}
@keyframes meshDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  40%     { transform: translate(30vw, -40vh) scale(1.1); }
  75%     { transform: translate(-20vw, -20vh) scale(.9); }
}
@keyframes meshDrift4 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(50vw, -30vh) scale(1.2); }
}

/* Reduce motion: freeze blobs */
@media (prefers-reduced-motion: reduce) {
  .mesh-bg span { animation: none !important; }
}
/* Mesh noise overlay for texture */
.mesh-bg::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: .5;
}
[data-theme="light"] .mesh-bg::after {
  background-image: radial-gradient(rgba(0,0,0,.02) 1px, transparent 1px);
}

/* ══════ HEADER ══════ */
.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--bg-glass);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
.app-header-inner {
  height: 56px;
  display: flex; align-items: center;
  padding: 0 16px; gap: 12px;
}
.hdr-title {
  font-size: 1.08rem; font-weight: 800;
  flex: 1; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hdr-logo-img {
  height: 22px;
  object-fit: contain;
  display: block;
}
.hdr-logo-dark { display: block; }
.hdr-logo-light { display: none; }
[data-theme="light"] .hdr-logo-dark { display: none; }
[data-theme="light"] .hdr-logo-light { display: block; }
.hdr-btn {
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  position: relative;
  flex-shrink: 0;
}
.hdr-btn:active { transform: scale(.9); background: var(--bg-hover); }

/* ══════ DRAWER OVERLAY ══════ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 9400;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.drawer-overlay.open { opacity: 1; visibility: visible; }

/* ══════ DRAWER ══════ */
.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 300px; max-width: 82vw;
  z-index: 9500;
  background: var(--drawer-bg);
  border-right: 1px solid var(--border);
  box-shadow: 16px 0 48px var(--shadow);
  transform: translateX(-105%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0px);
}
.drawer.open { transform: translateX(0); }

/* Drawer header */
.drawer-head {
  padding: 28px 22px 22px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.drawer-profile {
  display: flex; align-items: center; gap: 14px;
}
.drawer-avatar {
  width: 52px; height: 52px; border-radius: 16px;
  background: linear-gradient(135deg, #054E8A, #0E9FD8);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: 900; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(10,126,194,.25);
}
.drawer-avatar img { width:100%; height:100%; object-fit:cover; }
.drawer-name {
  font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
}
.drawer-email {
  font-size: .76rem; color: var(--text3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
}

/* Drawer menu */
.drawer-menu {
  flex: 1;
  padding: 12px 10px;
}
.drawer-label {
  padding: 12px 14px 6px;
  font-size: .65rem; font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.drawer-item {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--text2);
  font-size: .9rem; font-weight: 600;
  transition: all .15s;
  margin: 2px 0;
}
.drawer-item:active { background: var(--bg-hover); transform: scale(.98); }
.drawer-item.active {
  background: var(--accent-glow);
  color: var(--accent2);
}
.drawer-item i {
  width: 22px; text-align: center;
  font-size: 1.15rem;
}
.drawer-item .di-badge {
  margin-left: auto;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--rose);
  color: #fff; font-size: .64rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(251,113,133,.3);
}

/* Drawer footer */
.drawer-foot {
  padding: 14px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.theme-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  width: 100%;
}
.theme-toggle:active { transform: scale(.97); }
.theme-toggle-track {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(10,126,194,.2);
  position: relative;
  flex-shrink: 0;
  transition: background .3s;
}
[data-theme="light"] .theme-toggle-track {
  background: rgba(10,126,194,.15);
}
.theme-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent2);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 6px rgba(10,126,194,.3);
}
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(20px);
}
/* Push notification toggle (independent of theme) */
.push-toggle {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
  width: 100%;
  margin-top: 8px;
}
.push-toggle:active { transform: scale(.97); }
.push-toggle-track {
  width: 44px; height: 24px; border-radius: 12px;
  background: rgba(148,163,184,.25);
  position: relative;
  flex-shrink: 0;
  transition: background .3s;
}
.push-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #94a3b8;
  transition: transform .3s cubic-bezier(.4,0,.2,1), background .3s;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.push-toggle.on .push-toggle-track {
  background: rgba(10,126,194,.25);
}
.push-toggle.on .push-toggle-thumb {
  transform: translateX(20px);
  background: linear-gradient(135deg, #054E8A, #0E9FD8);
  box-shadow: 0 2px 8px rgba(10,126,194,.35);
}
.push-toggle span { font-size: .84rem; font-weight: 600; color: var(--text2); flex: 1; }
.push-toggle i { color: var(--text3); transition: color .3s; }
.push-toggle.on i { color: var(--accent2); }
.push-toggle.disabled { opacity: .5; pointer-events: none; }
.theme-toggle span {
  font-size: .84rem; font-weight: 600; color: var(--text2);
}
.theme-toggle i { font-size: 1rem; color: var(--accent2); }

.drawer-logout {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-top: 8px;
  border-radius: 14px;
  background: rgba(251,113,133,.06);
  border: 1px solid rgba(251,113,133,.1);
  text-decoration: none;
  color: var(--rose);
  font-size: .88rem; font-weight: 700;
  transition: all .15s;
  width: 100%;
  cursor: pointer;
}
.drawer-logout:active { transform: scale(.97); background: rgba(251,113,133,.1); }

/* ══════ CONTENT ══════ */
.app-content {
  position: relative; z-index: 1;
  padding: 16px 16px 32px;
  max-width: 520px;
  margin: 0 auto;
}
/* Header fixed olduğu için main elementine offset (page override'larının üstünde kalır) */
main.app-content { margin-top: calc(56px + env(safe-area-inset-top, 0px)); }

/* ── Alerts ── */
.app-alert {
  border-radius: 14px; padding: 13px 16px;
  font-size: .84rem; margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  animation: fadeUp .3s ease both;
}
.app-alert-error {
  background: rgba(251,113,133,.08);
  color: var(--rose);
  border: 1px solid rgba(251,113,133,.12);
}
.app-alert-success {
  background: rgba(52,211,153,.08);
  color: var(--emerald);
  border: 1px solid rgba(52,211,153,.12);
}

/* ══════ PROFİL EKSİK UYARISI — POPUP OVERLAY ══════ */
.profil-warn-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  z-index: 10000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.profil-warn-overlay.open {
  display: flex;
  animation: pwOvlIn .22s ease both;
}
@keyframes pwOvlIn { from { opacity: 0 } to { opacity: 1 } }
.profil-warn-modal {
  position: relative;
  width: 100%; max-width: 480px;
  animation: pwBoxIn .3s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pwBoxIn {
  from { transform: translateY(40px) scale(.96); opacity: 0 }
  to   { transform: translateY(0) scale(1);       opacity: 1 }
}
.profil-warn-x {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(251,191,36,.35);
  background: rgba(0,0,0,.3);
  color: #fbbf24;
  font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform .15s, background .15s;
}
.profil-warn-x:active { transform: scale(.9); background: rgba(0,0,0,.5); }
.profil-warn--modal {
  margin: 0 !important;
  padding: 22px 20px 18px;
  border-radius: 22px;
  box-shadow:
    0 30px 60px -20px rgba(245,158,11,.35),
    0 12px 28px -10px rgba(0,0,0,.55);
}
@media (min-width: 640px) {
  .profil-warn-overlay { align-items: center; }
}
.profil-warn-actions {
  display: flex; gap: 10px;
  margin-top: 12px;
  align-items: center;
}
.profil-warn-actions .profil-warn-cta { flex: 1; margin-top: 0; }
.profil-warn-later {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 11px 16px;
  border-radius: 12px;
  font-size: .82rem; font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  white-space: nowrap;
}
.profil-warn-later:active { background: var(--bg-hover); }

/* ══════ PROFİL EKSİK UYARISI (liquid glass amber) ══════ */
.profil-warn {
  position: relative;
  margin: 0 0 14px;
  padding: 16px 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(251,191,36,.18), rgba(245,158,11,.08));
  border: 1px solid rgba(251,191,36,.28);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  box-shadow:
    0 14px 34px -14px rgba(245,158,11,.35),
    inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
  animation: fadeUp .4s cubic-bezier(.16,1,.3,1) both;
}
[data-theme="light"] .profil-warn {
  background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(245,158,11,.08));
  border-color: rgba(245,158,11,.3);
  box-shadow: 0 14px 34px -14px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.8);
}
.profil-warn::before {
  content: ''; position: absolute;
  top: -30px; right: -30px; width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(251,191,36,.3) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.profil-warn-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.profil-warn-ic {
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 6px 16px rgba(245,158,11,.4);
  flex-shrink: 0;
  animation: profilWarnPulse 2s ease-in-out infinite;
}
@keyframes profilWarnPulse {
  0%,100% { transform: scale(1); box-shadow: 0 6px 16px rgba(245,158,11,.4); }
  50%     { transform: scale(1.06); box-shadow: 0 8px 22px rgba(245,158,11,.6); }
}
.profil-warn-body { flex: 1; min-width: 0; }
.profil-warn-title {
  font-size: .92rem; font-weight: 800;
  color: #fbbf24;
  letter-spacing: -.01em;
  line-height: 1.2;
}
[data-theme="light"] .profil-warn-title { color: #92400e; }
.profil-warn-sub {
  font-size: .74rem; color: var(--text2);
  margin-top: 2px; line-height: 1.35;
}
.profil-warn-prog {
  display: flex; align-items: center; justify-content: space-between;
  margin: 10px 0 6px;
  font-size: .68rem; font-weight: 700;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.profil-warn-prog-val { color: #fbbf24; font-size: .82rem; }
[data-theme="light"] .profil-warn-prog-val { color: #b45309; }
.profil-warn-bar {
  height: 6px; border-radius: 6px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
  margin-bottom: 12px;
  border: 1px solid rgba(251,191,36,.15);
}
[data-theme="light"] .profil-warn-bar { background: rgba(0,0,0,.04); }
.profil-warn-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #fbbf24, #facc15);
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(251,191,36,.5);
  transition: width .6s cubic-bezier(.16,1,.3,1);
}
.profil-warn-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.profil-warn-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px;
  border-radius: 10px;
  background: rgba(251,191,36,.1);
  border: 1px solid rgba(251,191,36,.22);
  font-size: .72rem; font-weight: 600;
  color: #fbbf24;
}
[data-theme="light"] .profil-warn-chip {
  background: rgba(255,255,255,.7);
  color: #92400e;
}
.profil-warn-chip i { font-size: .78rem; opacity: .9; }
.profil-warn-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  font-size: .8rem; font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px -6px rgba(245,158,11,.55);
  transition: transform .15s;
}
.profil-warn-cta:active { transform: scale(.96); }
.profil-warn-cta i { font-size: .88rem; }

/* ══════ SHARED COMPONENTS ══════ */

/* ══════ LIQUID GLASS BASE ══════ */
.glass {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  transition: background .3s, border-color .3s, transform .25s, box-shadow .25s;
  box-shadow:
    0 10px 30px -12px rgba(0,0,0,.35),
    0 2px 6px -2px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,.06);
}
[data-theme="light"] .glass {
  box-shadow:
    0 10px 30px -12px rgba(10,126,194,.18),
    0 2px 6px -2px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.7);
}
/* Sheen highlight */
.glass::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
[data-theme="light"] .glass::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
/* Floating variant — stronger shadow, softer blur */
.glass-float {
  transform: translateZ(0);
  box-shadow:
    0 20px 48px -18px rgba(0,0,0,.55),
    0 6px 14px -6px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="light"] .glass-float {
  box-shadow:
    0 20px 48px -18px rgba(10,126,194,.28),
    0 6px 14px -6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.8);
}
a.glass:active, button.glass:active { transform: scale(.985); }
.glass-head {
  padding: 16px 18px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.glass-head h3 {
  font-size: .76rem; font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.glass-head .see-all {
  font-size: .76rem; font-weight: 700;
  color: var(--accent2);
  text-decoration: none;
  display: flex; align-items: center; gap: 3px;
}
.glass-body { padding: 0 18px 18px; }

/* Section Label */
.sec-label {
  font-size: .7rem; font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 18px 0 10px;
}

/* Badges */
.badge {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 8px;
  font-size: .66rem; font-weight: 700;
}
.badge-accent { background: rgba(10,126,194,.12); color: var(--accent2); }
.badge-emerald { background: rgba(52,211,153,.1); color: var(--emerald); }
.badge-rose { background: rgba(251,113,133,.1); color: var(--rose); }
.badge-amber { background: rgba(251,191,36,.1); color: var(--amber); }
.badge-muted { background: var(--bg-card); color: var(--text3); }

/* List Row */
.list-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text1);
  transition: background .15s;
}
.list-row:last-child { border-bottom: none; }
.list-row:active { background: var(--bg-hover); }
.list-icon {
  width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; flex-shrink: 0;
}
.list-body { flex: 1; min-width: 0; }
.list-title {
  font-size: .9rem; font-weight: 650;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.list-sub {
  font-size: .74rem; color: var(--text3); margin-top: 2px;
}
.list-trail { color: var(--text3); font-size: .85rem; flex-shrink: 0; }

/* Empty State */
.empty-state {
  text-align: center; padding: 48px 24px;
}
.empty-state-icon {
  width: 68px; height: 68px; border-radius: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px; font-size: 1.6rem; color: var(--text3);
}
.empty-state p { font-size: .86rem; color: var(--text3); font-weight: 500; }

/* Progress */
.progress-track {
  height: 4px; border-radius: 4px;
  background: var(--bg-card); overflow: hidden;
}
.progress-fill {
  height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--accent), var(--cyan));
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.anim-in { animation: fadeUp .4s cubic-bezier(.16,1,.3,1) both; }
.anim-d1 { animation-delay: .06s; }
.anim-d2 { animation-delay: .12s; }
.anim-d3 { animation-delay: .18s; }
.anim-d4 { animation-delay: .24s; }
.anim-d5 { animation-delay: .3s; }

@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-12 { margin-bottom: 12px; }
.mb-16 { margin-bottom: 16px; }

/* Skip paint/style for below-the-fold sections (big perf win). */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: 1px 420px;
}

/* ══════ PULL-TO-REFRESH ══════ */
.ptr-indicator {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 200; height: 0; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
  pointer-events: none;
  transition: height .15s ease;
  background: linear-gradient(180deg, var(--bg-glass) 0%, transparent 100%);
  backdrop-filter: blur(8px);
}
.ptr-indicator.active { transition: none; }
.ptr-indicator.loading { height: 56px !important; }
.ptr-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2.5px solid var(--border2);
  border-top-color: var(--accent);
  animation: ptrSpin 0.8s linear infinite;
  opacity: 0; transition: opacity .2s;
}
.ptr-indicator.visible .ptr-spinner { opacity: 1; }
.ptr-indicator.loading .ptr-spinner { animation: ptrSpin 0.8s linear infinite; }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* ══════ SKELETON LOADER ══════ */
.sk {
  background: linear-gradient(90deg,
    var(--bg-hover) 0%,
    var(--border2) 50%,
    var(--bg-hover) 100%);
  background-size: 200% 100%;
  animation: skShimmer 1.4s linear infinite;
  border-radius: 8px;
  display: inline-block;
}
.sk-line { height: 14px; width: 100%; display: block; margin: 6px 0; }
.sk-line.short { width: 60%; }
.sk-line.title { height: 20px; width: 80%; }
.sk-circle { border-radius: 50%; }
.sk-box { height: 80px; width: 100%; border-radius: 14px; display: block; }
@keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ══════ PWA INSTALL BANNER ══════ */
.pwa-install {
  position: fixed; left: 16px; right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 110;
  display: none; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  animation: pwaIn .3s ease;
}
.pwa-install.show { display: flex; }
@keyframes pwaIn { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.pwa-install-ic {
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(135deg, #054E8A, #0E9FD8);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.1rem; flex-shrink: 0;
}
.pwa-install-body { flex: 1; min-width: 0; }
.pwa-install-ttl { font-size: .82rem; font-weight: 800; color: var(--text1); }
.pwa-install-sub { font-size: .72rem; color: var(--text2); }
.pwa-install-btn {
  padding: 8px 14px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, #054E8A, #0E9FD8);
  color: #fff; font-weight: 700; font-size: .78rem;
  font-family: inherit; cursor: pointer; flex-shrink: 0;
}
.pwa-install-close {
  width: 28px; height: 28px; border: none; border-radius: 8px;
  background: var(--bg-hover); color: var(--text3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}

/* ══════ BOTTOM NAV (fixed tab bar — solid opaque) ══════ */
.app-botnav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9000;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 6px;
  padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  background: #03091A;
  border-top: 1px solid #0A1E3C;
  box-shadow: 0 -6px 24px -10px rgba(0,0,0,.7);
}
[data-theme="light"] .app-botnav {
  background: #ffffff;
  border-top: 1px solid #C2D9EF;
  box-shadow: 0 -6px 24px -10px rgba(5,78,138,.12);
}
.app-botnav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  border-radius: 14px;
  color: #ffffff;
  text-decoration: none;
  font-size: .65rem; font-weight: 600;
  letter-spacing: .01em;
  transition: color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  text-align: center;
}
[data-theme="light"] .app-botnav-item { color: #000000; }
.app-botnav-item i { font-size: 1.25rem; line-height: 1; }
.app-botnav-item:active { transform: scale(.94); }
.app-botnav-item.active { color: #ffffff; }
[data-theme="light"] .app-botnav-item.active { color: #000000; }
.app-botnav-item.active::before {
  content: ''; position: absolute;
  top: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 3px;
  background: linear-gradient(90deg, #054E8A, #0A7EC2, #0E9FD8);
}
.app-botnav-item.logout { color: #fb7185; }

/* Content bottom padding for nav clearance (ensures no content is hidden) */
main.app-content { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }

/* FAB back: sit above bottom nav */
.fab-back { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px) !important; }

/* Profil warn popup: above bottom nav — higher z-index AND extra clearance */
.profil-warn-overlay { z-index: 99990 !important; padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important; }

/* PWA install banner: sit above bottom nav */
.pwa-install { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px) !important; }

/* ══════ FLOATING BACK FAB ══════ */
.fab-back {
  position: fixed; z-index: 120;
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--bg-card);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  display: flex; align-items: center; justify-content: center;
  color: var(--text1);
  font-size: 1.4rem;
  text-decoration: none; cursor: pointer;
  box-shadow:
    0 14px 32px -10px rgba(0,0,0,.5),
    0 4px 10px -4px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition: transform .2s, background .2s, opacity .25s;
  opacity: 0; transform: translateY(20px) scale(.9);
  pointer-events: none;
}
[data-theme="light"] .fab-back {
  box-shadow:
    0 14px 32px -10px rgba(10,126,194,.3),
    0 4px 10px -4px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.fab-back.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-back:active { transform: scale(.92); background: var(--bg-hover); }
.fab-back::before {
  content: ''; position: absolute;
  inset: -1px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(10,126,194,.5), rgba(14,159,216,.3), transparent);
  z-index: -1; opacity: .6;
  filter: blur(6px);
}

/* ══════ PAGE LOADER — TOP HAIRLINE ══════ */
.page-loader {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s;
}
.page-loader.active { opacity: 1; }
.page-loader-bar {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--accent) 25%,
    var(--accent3) 50%,
    var(--cyan) 75%,
    transparent 100%);
  background-size: 200% 100%;
  border-radius: 0 2px 2px 0;
  transition: width .35s cubic-bezier(.1,.5,.2,1);
  box-shadow:
    0 0 10px rgba(10,126,194,.7),
    0 0 22px rgba(14,159,216,.45),
    0 0 40px rgba(34,211,238,.22);
  animation: plSlide 2.5s linear infinite;
}
.page-loader.done .page-loader-bar {
  width: 100% !important;
  transition: width .22s linear;
}
@keyframes plSlide {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════ PAGE LOADER — LIQUID GLASS SPLASH CARD ══════ */
/* Appears after 180ms if page still loading (so fast navs only show hairline) */
.page-fx {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
  backdrop-filter: blur(8px) saturate(1.15);
  -webkit-backdrop-filter: blur(8px) saturate(1.15);
  background: radial-gradient(ellipse at center, transparent 0%, rgba(10,14,26,.35) 100%);
}
[data-theme="light"] .page-fx {
  background: radial-gradient(ellipse at center, transparent 0%, rgba(240,242,248,.45) 100%);
}
.page-fx.active { opacity: 1; pointer-events: auto; }

.page-fx-card {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -42%) scale(.9);
  padding: 24px 30px 22px;
  border-radius: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border2);
  backdrop-filter: blur(30px) saturate(1.7);
  -webkit-backdrop-filter: blur(30px) saturate(1.7);
  box-shadow:
    0 30px 70px -20px rgba(0,0,0,.6),
    0 8px 18px -6px rgba(10,126,194,.25),
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.02);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  opacity: 0;
  transition: opacity .3s ease, transform .4s cubic-bezier(.25,.9,.3,1.1);
}
[data-theme="light"] .page-fx-card {
  box-shadow:
    0 30px 70px -20px rgba(10,126,194,.35),
    0 8px 18px -6px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.page-fx.active .page-fx-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Sheen stripe on top of card */
.page-fx-card::before {
  content: ''; position: absolute;
  top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

/* Dual rotating ring spinner */
.page-fx-ring {
  position: relative;
  width: 56px; height: 56px;
}
.page-fx-ring::before,
.page-fx-ring::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--accent2);
  border-right-color: var(--accent3);
  animation: pfxSpin 1s cubic-bezier(.45,0,.55,1) infinite;
  filter: drop-shadow(0 0 6px rgba(10,126,194,.55));
}
.page-fx-ring::after {
  inset: 8px;
  border-top-color: var(--cyan);
  border-right-color: transparent;
  animation: pfxSpin 1.6s cubic-bezier(.45,0,.55,1) infinite reverse;
  opacity: .7;
  filter: drop-shadow(0 0 4px rgba(34,211,238,.6));
}

/* Center dot (pulsing core) */
.page-fx-core {
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #054E8A, #0E9FD8);
  box-shadow:
    0 0 12px rgba(10,126,194,.8),
    0 0 24px rgba(14,159,216,.4);
  animation: pfxCore 1.4s ease-in-out infinite;
}

/* Bouncing dots under spinner */
.page-fx-dots {
  display: flex; gap: 6px;
  margin-top: 2px;
}
.page-fx-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent2);
  opacity: .35;
  animation: pfxDot 1.1s ease-in-out infinite;
}
.page-fx-dots span:nth-child(2) { animation-delay: .15s; background: var(--accent3); }
.page-fx-dots span:nth-child(3) { animation-delay: .3s; background: var(--cyan); }

.page-fx-label {
  font-size: .72rem; font-weight: 700;
  color: var(--text2);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

@keyframes pfxSpin { to { transform: rotate(360deg); } }
@keyframes pfxCore {
  0%,100% { transform: scale(1); opacity: 1; }
  50%     { transform: scale(1.45); opacity: .55; }
}
@keyframes pfxDot {
  0%, 60%, 100% { transform: translateY(0) scale(.85); opacity: .3; }
  30%           { transform: translateY(-4px) scale(1);  opacity: 1;  }
}

/* Reduced motion: freeze spins, keep fade */
@media (prefers-reduced-motion: reduce) {
  .page-fx-ring::before,
  .page-fx-ring::after,
  .page-fx-core,
  .page-fx-dots span,
  .page-loader-bar { animation: none !important; }
}

/* ══════ TOAST ══════ */
.app-toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  z-index: 300;
  background: var(--bg-card-solid); border: 1px solid var(--border);
  color: var(--text1); font-size: .84rem; font-weight: 600;
  padding: 12px 18px; border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  display: flex; align-items: center; gap: 8px;
  max-width: calc(100vw - 40px);
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.app-toast i { font-size: 1rem; }
.app-toast.ok i { color: var(--emerald); }
.app-toast.err i { color: var(--rose); }

/* ══════ HİKAYE (stories) — tüm sayfalarda üstte ══════ */
.hk-wrap {
  padding: 12px 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  background: transparent;
}
.hk-wrap::-webkit-scrollbar { display: none; }
.hk-row {
  display: flex;
  gap: 16px;
  padding: 0 16px 4px;
}
.hk-item {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  width: 64px;
}
.hk-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  padding: 2.5px;
  background: conic-gradient(from 220deg,
    #054E8A 0%, #0A7EC2 22%, #ec4899 44%,
    #f59e0b 66%, #22d3ee 88%, #054E8A 100%);
  position: relative;
  box-shadow: 0 4px 14px -4px rgba(10,126,194,.5);
  transition: transform .2s;
}
.hk-item:active .hk-avatar { transform: scale(.93); }
.hk-avatar.seen {
  background: var(--border);
  box-shadow: none;
}
.hk-avatar-inner {
  width: 100%; height: 100%; border-radius: 50%;
  overflow: hidden; display: block;
  background: var(--bg-card);
  border: 2.5px solid var(--bg-page);
}
.hk-avatar-inner img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.hk-avatar-fb {
  display: flex; align-items: center; justify-content: center;
  height: 100%; width: 100%;
  font-size: 1.15rem; color: var(--text3);
  background: linear-gradient(135deg, var(--bg-hover), var(--bg-card));
}
.hk-name {
  font-size: .68rem; font-weight: 700;
  color: var(--text2);
  text-align: center;
  line-height: 1.2;
  max-width: 64px;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Viewer (full-screen) */
.hk-viewer {
  position: fixed; inset: 0;
  background: #000;
  z-index: 9999;
  display: none;
  flex-direction: column;
  animation: hkFadeIn .2s ease;
}
.hk-viewer.open { display: flex; }
@keyframes hkFadeIn { from { opacity: 0 } to { opacity: 1 } }
.hk-viewer-bars {
  display: flex; gap: 4px;
  padding: 10px 14px 6px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  z-index: 3;
}
.hk-viewer-bar {
  flex: 1; height: 2.5px;
  background: rgba(255,255,255,.32);
  border-radius: 2px; overflow: hidden;
  position: relative;
}
.hk-viewer-bar-fill {
  position: absolute; inset: 0; width: 0%;
  background: #fff; border-radius: 2px;
}
.hk-viewer-bar.done .hk-viewer-bar-fill { width: 100%; }
.hk-viewer-header {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px 10px;
  color: #fff;
  z-index: 3;
}
.hk-viewer-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.6);
  flex-shrink: 0;
}
.hk-viewer-avatar img { width:100%; height:100%; object-fit: cover }
.hk-viewer-title { font-size: .86rem; font-weight: 700; line-height: 1.2; }
.hk-viewer-time  { font-size: .68rem; opacity: .65; }
.hk-viewer-close {
  margin-left: auto;
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.45);
  color: #fff; font-size: 1.15rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s, background .15s;
}
.hk-viewer-close:active { transform: scale(.9); background: rgba(0,0,0,.75); }
.hk-viewer-body {
  flex: 1; position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hk-viewer-img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}
.hk-viewer-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 18px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%);
  color: #fff;
  z-index: 2;
}
.hk-viewer-caption-title {
  font-size: 1rem; font-weight: 800; margin-bottom: 6px;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.hk-viewer-caption-text {
  font-size: .82rem; line-height: 1.5;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 4px rgba(0,0,0,.4);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.hk-viewer-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 10px; padding: 8px 16px;
  background: #fff; color: #111; border-radius: 20px;
  font-size: .78rem; font-weight: 700;
  text-decoration: none;
}
.hk-viewer-zones {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  z-index: 4;
}
.hk-viewer-zone {
  width: 100%; height: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ══════ PERF-LITE — zayıf cihaz modu ══════
   mobile.js düşük çekirdek/RAM tespit edince <html>'e .perf-lite ekler.
   Görünüm korunur: arka plan blob'ları sabitlenir (dekoratif hareket durur),
   cam efektlerinin blur yarıçapı düşürülür (cam görünümü kalır, kare maliyeti düşer). */
html.perf-lite .mesh-bg span { animation: none !important; will-change: auto; }
html.perf-lite .di-badge { animation: none !important; }
html.perf-lite .app-header {
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
html.perf-lite .glass,
html.perf-lite .fab-back,
html.perf-lite .profil-warn {
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
}
html.perf-lite .page-fx-card {
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
}
html.perf-lite .drawer-overlay,
html.perf-lite .profil-warn-overlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}