/* ==================================================================== */
/* Vera Panel · "Aurora" tema katmanı                                    */
/*                                                                      */
/* style.css'in üzerine yüklenir. Kaldırmak için index.html/verify.html  */
/* içindeki theme.css satırını silmek yeterli.                           */
/*                                                                      */
/*  - Glassmorphism : sidebar, üst bar, kartlar, modal, toast            */
/*  - Neumorphism   : istatistik kutuları (kabarık), form alanları (gömük)*/
/*  - Skeuomorphism : parlak/basılabilir butonlar, fiziksel anahtarlar   */
/* ==================================================================== */

/* ---------------- Vurgu renkleri (tema seçiciden) ---------------- */
:root,
:root[data-accent="aurora"] {
  --accent: #4f7cff;
  --accent-2: #8b5cf6;
  --accent-3: #22d3ee;
}
:root[data-accent="sunset"] { --accent: #f97316; --accent-2: #ec4899; --accent-3: #facc15; }
:root[data-accent="emerald"] { --accent: #10b981; --accent-2: #0ea5e9; --accent-3: #a3e635; }
:root[data-accent="rose"] { --accent: #f43f5e; --accent-2: #a855f7; --accent-3: #fb7185; }

/* ---------------- Açık tema tokenları ---------------- */
:root {
  --series-blue: var(--accent);
  --series-violet: var(--accent-2);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 45%, transparent);

  --bg-page: #e9edf6;
  --bg-surface: rgba(255, 255, 255, 0.58);
  --bg-surface-2: rgba(255, 255, 255, 0.82);
  --text-primary: #0f1222;
  --text-secondary: #474b63;
  --text-muted: #7a7f98;
  --gridline: rgba(15, 18, 34, 0.08);
  --border: rgba(255, 255, 255, 0.7);
  --border-strong: rgba(15, 18, 34, 0.14);

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-edge-soft: rgba(15, 18, 34, 0.06);
  --glass-blur: 18px;
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 30px -12px rgba(36, 44, 86, 0.25), 0 2px 6px -2px rgba(36, 44, 86, 0.08);

  --neu-surface: #e9edf6;
  --neu-light: rgba(255, 255, 255, 0.95);
  --neu-dark: rgba(166, 177, 205, 0.6);
  --neu-raised: 8px 8px 18px var(--neu-dark), -8px -8px 18px var(--neu-light);
  --neu-raised-sm: 4px 4px 10px var(--neu-dark), -4px -4px 10px var(--neu-light);
  --neu-inset: inset 3px 3px 7px var(--neu-dark), inset -3px -3px 7px var(--neu-light);

  --aurora-opacity: 0.55;
  --grain-opacity: 0.05;

  --sidebar-bg: rgba(18, 20, 38, 0.82);
  --sidebar-bg-2: rgba(24, 22, 44, 0.78);
  --sidebar-text: #eceaf6;
  --sidebar-muted: #9b98b6;
  --sidebar-border: rgba(255, 255, 255, 0.08);

  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-card: var(--glass-shadow);
}

/* ---------------- Koyu tema tokenları ---------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page: #070912;
    --bg-surface: rgba(23, 26, 44, 0.55);
    --bg-surface-2: rgba(30, 34, 56, 0.8);
    --text-primary: #f3f4fb;
    --text-secondary: #b8bbd2;
    --text-muted: #80849f;
    --gridline: rgba(255, 255, 255, 0.07);
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --glass-bg: rgba(20, 23, 40, 0.55);
    --glass-bg-strong: rgba(24, 27, 46, 0.82);
    --glass-edge: rgba(255, 255, 255, 0.12);
    --glass-edge-soft: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.7), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
    --neu-surface: #121528;
    --neu-light: rgba(255, 255, 255, 0.045);
    --neu-dark: rgba(0, 0, 0, 0.6);
    --aurora-opacity: 0.6;
    --grain-opacity: 0.06;
    --sidebar-bg: rgba(10, 11, 22, 0.72);
    --sidebar-bg-2: rgba(14, 14, 30, 0.66);
  }
}
:root[data-theme="dark"] {
  --bg-page: #070912;
  --bg-surface: rgba(23, 26, 44, 0.55);
  --bg-surface-2: rgba(30, 34, 56, 0.8);
  --text-primary: #f3f4fb;
  --text-secondary: #b8bbd2;
  --text-muted: #80849f;
  --gridline: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --glass-bg: rgba(20, 23, 40, 0.55);
  --glass-bg-strong: rgba(24, 27, 46, 0.82);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-edge-soft: rgba(255, 255, 255, 0.05);
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 16px 40px -16px rgba(0, 0, 0, 0.7), 0 2px 8px -2px rgba(0, 0, 0, 0.4);
  --neu-surface: #121528;
  --neu-light: rgba(255, 255, 255, 0.045);
  --neu-dark: rgba(0, 0, 0, 0.6);
  --aurora-opacity: 0.6;
  --grain-opacity: 0.06;
  --sidebar-bg: rgba(10, 11, 22, 0.72);
  --sidebar-bg-2: rgba(14, 14, 30, 0.66);
}

/* ---------------- Arka plan: aurora + gren ---------------- */
html { background: var(--bg-page); }
body { background: transparent; min-height: 100vh; }
body::before {
  content: ""; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38vmax 38vmax at 18% 22%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 62%),
    radial-gradient(34vmax 34vmax at 82% 18%, color-mix(in srgb, var(--accent-2) 65%, transparent), transparent 62%),
    radial-gradient(40vmax 40vmax at 70% 85%, color-mix(in srgb, var(--accent-3) 45%, transparent), transparent 62%),
    radial-gradient(30vmax 30vmax at 12% 90%, color-mix(in srgb, var(--accent-2) 40%, transparent), transparent 60%);
  filter: blur(40px) saturate(130%);
  opacity: var(--aurora-opacity);
  animation: aurora-drift 26s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes aurora-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(-4vmax, 3vmax, 0) rotate(8deg) scale(1.06); }
  100% { transform: translate3d(3vmax, -2vmax, 0) rotate(-6deg) scale(1.02); }
}
::selection { background: var(--accent-glow); }

/* İnce kaydırma çubukları */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text-muted) 50%, transparent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text-muted) 45%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* ---------------- Ortak cam yüzey ---------------- */
.card, .stat-grid ~ .card, .server-card, .guild-card, .command-category, .msg-card,
.login-card, .modal, .toast, .save-bar, .verify-user, .discord-preview-wrap {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.card, .server-card, .guild-card, .command-category, .msg-card { position: relative; isolation: isolate; }

/* Fareyi takip eden ışık (app.js --mx/--my ayarlar) */
.card::before, .server-card::before, .stat-tile::before, .msg-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -200px), color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);
  opacity: 0; transition: opacity 0.3s ease;
}
.card:hover::before, .server-card:hover::before, .stat-tile:hover::before, .msg-card:hover::before { opacity: 1; }

.server-card, .guild-card, .msg-card, .command-category { transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease; }
.server-card:hover, .guild-card:hover, .msg-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow), 0 18px 40px -18px var(--accent-glow);
}

/* Koyu temada Discord görünümlü kartlar kendi renginde kalsın */
.dc-card { background: rgba(49, 51, 56, 0.92); border-color: rgba(255, 255, 255, 0.06); }
.discord-preview { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px -14px rgba(0, 0, 0, 0.6); }

/* ---------------- Sidebar: koyu cam ---------------- */
.sidebar {
  background: linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg-2));
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03), 12px 0 40px -24px rgba(0, 0, 0, 0.6);
}
.brand-mark {
  position: relative; border-radius: 12px; overflow: visible;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15) inset, 0 8px 20px -6px var(--accent-glow);
}
.brand-mark::after {
  content: ""; position: absolute; inset: -3px; border-radius: 14px; z-index: -1;
  background: conic-gradient(from var(--spin, 0deg), var(--accent), var(--accent-2), var(--accent-3), var(--accent));
  animation: ring-spin 6s linear infinite; filter: blur(0.5px); opacity: 0.85;
}
.brand-mark img { border-radius: 11px; }
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ring-spin { to { --spin: 360deg; } }

.nav-item {
  position: relative; border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.06); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 28%, transparent), rgba(255, 255, 255, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px -10px var(--accent-glow);
}
.nav-item.active::before {
  content: ""; position: absolute; left: -14px; top: 22%; bottom: 22%; width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent-3), var(--accent));
  box-shadow: 0 0 12px var(--accent);
  animation: bar-in 0.35s cubic-bezier(.2,.8,.2,1);
}
.nav-item.active .nav-icon { color: color-mix(in srgb, var(--accent) 55%, white); }
@keyframes bar-in { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.guild-switch {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 16px -10px rgba(0, 0, 0, 0.6);
  transition: background 0.2s ease, transform 0.2s ease;
}
.guild-switch:hover { transform: translateY(-1px); }
.user-avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); }

/* ---------------- Üst bar: açık cam ---------------- */
.topbar {
  background: color-mix(in srgb, var(--bg-page) 55%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--glass-edge-soft);
}
.topbar-title h1 {
  background: linear-gradient(120deg, var(--text-primary) 30%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.icon-btn {
  border-radius: 10px; border: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 2px 6px -2px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { color: var(--accent); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(1px); box-shadow: var(--neu-inset); }
#theme-toggle svg { transition: transform 0.5s cubic-bezier(.2,.8,.2,1); }
#theme-toggle:hover svg { transform: rotate(40deg); }
#refresh-btn:active svg { transform: rotate(-180deg); transition: transform 0.4s ease; }

/* ---------------- İstatistik kutuları: neumorphism ---------------- */
.stat-tile {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--neu-surface);
  border: 1px solid color-mix(in srgb, var(--neu-light) 60%, transparent);
  box-shadow: var(--neu-raised);
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.stat-tile:hover { transform: translateY(-2px); }
.stat-tile::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
}
.stat-tile .stat-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; font-weight: 600; color: var(--text-muted); }
.stat-tile .stat-value {
  font-size: 30px; font-weight: 700; letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--text-primary) 40%, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-tile .stat-value .stat-suffix { -webkit-text-fill-color: var(--text-muted); }
.mini-stat, .ticket-info > div {
  background: var(--neu-surface); box-shadow: var(--neu-inset); border: none;
}

/* ---------------- Form alanları: neumorphic gömük ---------------- */
.input, .conn-field input, .color-input {
  background: var(--neu-surface);
  border: 1px solid transparent;
  box-shadow: var(--neu-inset);
  border-radius: 10px;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.input:focus, .conn-field input:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: var(--neu-inset), 0 0 0 4px var(--accent-soft);
}
select.input { appearance: none; -webkit-appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
select.input option, select.input optgroup { background: var(--bg-page); color: var(--text-primary); }

/* ---------------- Butonlar: skeuomorphic ---------------- */
.btn-primary, .btn-danger, .btn-secondary, .btn-xs, .filter-chip, .btn-discord {
  position: relative; border-radius: 10px;
  transition: transform 0.12s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.btn-primary {
  color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 60%, black);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 72%, white) 0%, var(--accent) 52%, color-mix(in srgb, var(--accent) 82%, black) 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.12),
              0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 18px -8px var(--accent-glow);
}
.btn-danger {
  color: #fff; border: 1px solid #9f1d2b;
  background: linear-gradient(180deg, #ff7a85 0%, #e5383b 52%, #b91c2c 100%);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(0, 0, 0, 0.12),
              0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 18px -8px rgba(229, 56, 59, 0.55);
}
.btn-secondary, .btn-xs, .filter-chip {
  color: var(--text-secondary); border: 1px solid var(--glass-edge);
  background: linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.12), 0 4px 10px -6px rgba(0, 0, 0, 0.25);
}
.btn-primary::after, .btn-danger::after {
  content: ""; position: absolute; left: 6%; right: 6%; top: 1px; height: 45%; border-radius: 9px 9px 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); pointer-events: none;
}
.btn-primary:hover, .btn-danger:hover { filter: brightness(1.06) saturate(1.05); opacity: 1; transform: translateY(-1px); }
.btn-secondary:hover, .btn-xs:hover, .filter-chip:hover { color: var(--text-primary); transform: translateY(-1px); }
.btn-primary:active, .btn-danger:active, .btn-secondary:active, .btn-xs:active, .filter-chip:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.btn-primary:disabled, .btn-danger:disabled, .btn-secondary:disabled, .btn-xs:disabled { filter: grayscale(0.4); transform: none; }
.btn-xs { border-radius: 8px; }
.btn-xs.danger { color: var(--status-critical); }
.btn-xs.warn { color: var(--status-serious); }
.filter-chip { border-radius: 999px; }
.filter-chip.active {
  color: #fff; border-color: color-mix(in srgb, var(--accent) 60%, black);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, white), var(--accent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 14px -6px var(--accent-glow);
}
.btn-discord {
  background: linear-gradient(180deg, #7c86ff 0%, #5865f2 55%, #4450d6 100%);
  border: 1px solid #3c45b8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px -10px rgba(88, 101, 242, 0.75);
}
.btn-discord:hover { background: linear-gradient(180deg, #8790ff 0%, #5f6bf5 55%, #4954dc 100%); transform: translateY(-1px); }
.btn-discord:active { transform: translateY(1px); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35); }
.logout-btn { border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }

/* ---------------- Anahtar (toggle): skeuomorphic ---------------- */
.toggle-track {
  width: 46px; height: 26px;
  background: var(--neu-surface);
  box-shadow: var(--neu-inset);
  border: 1px solid var(--glass-edge-soft);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}
.toggle-track::after {
  top: 3px; left: 3px; width: 20px; height: 20px;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #eef0f6 45%, #c9cedd 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.1), inset 0 -1px 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s cubic-bezier(.3,1.4,.5,1);
}
.toggle-input:checked + .toggle-track {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 80%, black), var(--accent));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35), 0 0 14px -2px var(--accent-glow);
}
.toggle-input:checked + .toggle-track::after { transform: translateX(20px); }

/* ---------------- Rozetler: parlak ---------------- */
.action-badge, .chip, .role-chip {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.06);
}
.demo-pill.live-pill { animation: live-pulse 2.4s ease-in-out infinite; }

/* ---------------- Tablolar ---------------- */
table.log-table th { color: var(--text-muted); }
table.log-table tbody tr { transition: background 0.15s ease; }
table.log-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.avatar { box-shadow: 0 0 0 2px var(--glass-edge), 0 2px 6px -2px rgba(0, 0, 0, 0.3); }

/* ---------------- Sunucu ikonları ---------------- */
.g-icon { box-shadow: 0 0 0 2px var(--glass-edge), 0 8px 18px -8px rgba(0, 0, 0, 0.4); }
.g-icon-fallback { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.guild-hero .g-icon.xl { box-shadow: 0 0 0 3px var(--glass-edge), 0 0 0 6px var(--accent-soft), 0 16px 32px -12px var(--accent-glow); }

/* ---------------- Giriş & doğrulama ekranları ---------------- */
.login-screen { background: transparent; }
.login-card {
  border-radius: 24px; padding: 36px 30px;
  background: var(--glass-bg-strong);
  animation: pop-in 0.6s cubic-bezier(.2,.8,.2,1) both;
}
.brand-mark.big { animation: float 5s ease-in-out infinite; }
.login-card h1 {
  background: linear-gradient(120deg, var(--text-primary), var(--accent) 70%, var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.boot-screen .brand-mark.big { animation: float 2.4s ease-in-out infinite; }
.req-icon { box-shadow: var(--neu-raised-sm); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------------- Modal & toast ---------------- */
.modal-backdrop { background: rgba(6, 8, 18, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fade-only 0.2s ease; }
.modal { background: var(--glass-bg-strong); border-radius: 20px; animation: pop-in 0.32s cubic-bezier(.2,.9,.25,1.15); }
.toast {
  background: var(--glass-bg-strong); border-left-width: 1px; border-radius: 12px; padding: 12px 16px 12px 40px; position: relative;
  animation: toast-in 0.4s cubic-bezier(.2,.9,.25,1.1);
}
.toast::before {
  content: "✓"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; color: #fff;
  background: linear-gradient(180deg, #34d399, #059669); box-shadow: 0 0 10px rgba(16, 185, 129, 0.6);
}
.toast-error::before { content: "!"; background: linear-gradient(180deg, #fb7185, #e11d48); box-shadow: 0 0 10px rgba(225, 29, 72, 0.6); }
.toast.leaving { opacity: 0; transform: translateX(16px); transition: opacity 0.3s ease, transform 0.3s ease; }
.save-bar {
  background: color-mix(in srgb, var(--sidebar-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px;
  animation: slide-up 0.35s cubic-bezier(.2,.9,.25,1.1);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-in { from { opacity: 0; transform: translateX(24px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes live-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-good) 45%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

/* ---------------- Görünüm geçişi: sıralı giriş ---------------- */
.content > .view-enter > * { animation: rise-in 0.55s cubic-bezier(.2,.8,.2,1) both; }
.content > .view-enter > *:nth-child(2) { animation-delay: 0.05s; }
.content > .view-enter > *:nth-child(3) { animation-delay: 0.1s; }
.content > .view-enter > *:nth-child(4) { animation-delay: 0.15s; }
.content > .view-enter > *:nth-child(5) { animation-delay: 0.2s; }
.content > .view-enter > *:nth-child(n+6) { animation-delay: 0.25s; }
.stat-grid > .stat-tile, .server-grid > *, .msg-list > * { animation: rise-in 0.5s cubic-bezier(.2,.8,.2,1) both; }
.stat-grid > :nth-child(2), .server-grid > :nth-child(2), .msg-list > :nth-child(2) { animation-delay: 0.06s; }
.stat-grid > :nth-child(3), .server-grid > :nth-child(3), .msg-list > :nth-child(3) { animation-delay: 0.12s; }
.stat-grid > :nth-child(4), .server-grid > :nth-child(4), .msg-list > :nth-child(4) { animation-delay: 0.18s; }
.server-grid > :nth-child(n+5), .msg-list > :nth-child(n+5) { animation-delay: 0.22s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------------- İskelet yükleme ---------------- */
.skeleton-wrap { display: flex; flex-direction: column; gap: 16px; }
.skeleton-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.skeleton {
  border-radius: var(--radius-lg); min-height: 96px;
  background: linear-gradient(100deg, var(--glass-bg) 30%, color-mix(in srgb, var(--accent) 12%, var(--glass-bg-strong)) 50%, var(--glass-bg) 70%);
  background-size: 300% 100%; border: 1px solid var(--glass-edge);
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton.tall { min-height: 260px; }
.skeleton.line { min-height: 22px; width: 40%; border-radius: 999px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------------- Tema seçici ---------------- */
.theme-picker { position: relative; }
.theme-pop {
  position: absolute; right: 0; top: calc(100% + 10px); width: 250px; z-index: 30; padding: 14px;
  border-radius: 16px; background: var(--glass-bg-strong); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--glass-shadow), 0 24px 50px -20px rgba(0, 0, 0, 0.45);
  animation: pop-in 0.25s cubic-bezier(.2,.9,.25,1.15);
}
.theme-pop h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin: 0 0 8px; }
.theme-pop h4 + * { margin-bottom: 14px; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch {
  height: 44px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; position: relative;
  box-shadow: var(--neu-raised-sm); transition: transform 0.15s ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch.active { border-color: var(--text-primary); }
.swatch.active::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.swatch-label { display: block; text-align: center; font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }
.mode-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--neu-surface); box-shadow: var(--neu-inset); }
.mode-switch button {
  border: none; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 4px; border-radius: 9px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.mode-switch button.active {
  color: var(--text-primary); background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.25);
}
.motion-row { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--text-secondary); }

/* Kullanıcı animasyonları kapattıysa */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
}

/* ---------------- Mobil ---------------- */
@media (max-width: 720px) {
  .nav-item.active::before { display: none; }
  .skeleton-row { grid-template-columns: 1fr 1fr; }
  .theme-pop { position: fixed; right: 12px; left: 12px; top: 64px; width: auto; }
  .stat-tile .stat-value { font-size: 24px; }
}

/* Bulanıklık desteklemeyen tarayıcılar: daha opak yüzey */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .server-card, .modal, .toast, .login-card, .topbar, .sidebar { background: var(--glass-bg-strong); }
}

.topbar-title h1 { white-space: nowrap; }
.topbar-title { min-width: 0; }
.topbar-crumb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch { display: block; width: 100%; padding: 0; }
.theme-pop { background: color-mix(in srgb, var(--glass-bg-strong) 70%, var(--bg-page)); }

/* Tür düzenleyici dar ekranda: [emoji][ad] / [açıklama] / [renk][sil] */
@media (max-width: 980px) {
  .type-row { grid-template-columns: 56px 1fr auto; padding: 10px; border-radius: 14px; background: var(--neu-surface); box-shadow: var(--neu-raised-sm); }
  .type-row > :nth-child(2) { grid-column: 2 / -1; }
  .type-row > :nth-child(3) { grid-column: 1 / -1; }
  .type-row > :nth-child(4) { grid-column: 1 / 3; }
  .type-row > :nth-child(5) { grid-column: 3; }
}