/* Servisim — 3D renkli ikon sistemi */
.ico {
  --ico-size: 44px;
  --ico-c1: #0d7377;
  --ico-c2: #14919b;
  --ico-glow: rgba(13, 115, 119, .35);
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--ico-size);
  height: var(--ico-size);
  border-radius: calc(var(--ico-size) * .28);
  background: linear-gradient(145deg, var(--ico-c1) 0%, var(--ico-c2) 55%, color-mix(in srgb, var(--ico-c2) 70%, #000) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 -2px 6px rgba(0,0,0,.18) inset,
    0 6px 14px var(--ico-glow),
    0 2px 4px rgba(0,0,0,.12);
  color: #fff;
  flex-shrink: 0;
  transform: translateZ(0);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ico::before {
  content: '';
  position: absolute;
  inset: 2px 2px auto 2px;
  height: 42%;
  border-radius: inherit;
  border-bottom-left-radius: 40%;
  border-bottom-right-radius: 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
  pointer-events: none;
}
.ico svg {
  width: 52%;
  height: 52%;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.ico-sm { --ico-size: 32px; border-radius: 9px; }
.ico-md { --ico-size: 48px; }
.ico-lg { --ico-size: 58px; border-radius: 16px; }
.ico-xl { --ico-size: 72px; border-radius: 20px; }
.ico-press:active { transform: scale(.92) translateY(1px); }

/* Renkler */
.ico-teal   { --ico-c1:#14b8a6; --ico-c2:#0d9488; --ico-glow:rgba(13,148,136,.4); }
.ico-blue   { --ico-c1:#3b82f6; --ico-c2:#2563eb; --ico-glow:rgba(37,99,235,.4); }
.ico-indigo { --ico-c1:#6366f1; --ico-c2:#4f46e5; --ico-glow:rgba(79,70,229,.4); }
.ico-violet { --ico-c1:#a855f7; --ico-c2:#7c3aed; --ico-glow:rgba(124,58,237,.4); }
.ico-pink   { --ico-c1:#ec4899; --ico-c2:#db2777; --ico-glow:rgba(219,39,119,.4); }
.ico-rose   { --ico-c1:#f43f5e; --ico-c2:#e11d48; --ico-glow:rgba(225,29,72,.4); }
.ico-orange { --ico-c1:#fb923c; --ico-c2:#ea580c; --ico-glow:rgba(234,88,12,.4); }
.ico-amber  { --ico-c1:#fbbf24; --ico-c2:#d97706; --ico-glow:rgba(217,119,6,.4); }
.ico-lime   { --ico-c1:#84cc16; --ico-c2:#65a30d; --ico-glow:rgba(101,163,13,.4); }
.ico-green  { --ico-c1:#22c55e; --ico-c2:#16a34a; --ico-glow:rgba(22,163,74,.4); }
.ico-cyan   { --ico-c1:#22d3ee; --ico-c2:#0891b2; --ico-glow:rgba(8,145,178,.4); }
.ico-slate  { --ico-c1:#64748b; --ico-c2:#475569; --ico-glow:rgba(71,85,105,.35); }
.ico-red    { --ico-c1:#ef4444; --ico-c2:#dc2626; --ico-glow:rgba(220,38,38,.4); }
.ico-sky    { --ico-c1:#38bdf8; --ico-c2:#0284c7; --ico-glow:rgba(2,132,199,.4); }

/* Uygulama ızgarası (mobil launcher) */
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem .5rem;
  padding: .25rem 0 1rem;
}
.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .45rem;
  text-decoration: none;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.app-tile span.label {
  font-size: .68rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
  color: var(--ink-muted);
  max-width: 72px;
}
.app-tile:active .ico { transform: scale(.88); }
.app-tile:active span.label { color: var(--ink); }

.stat-ico {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
}
.stat-ico .stat-body { min-width: 0; flex: 1; }

.nav-item .ico,
.sb-link .ico,
.sb-dash .ico,
.sb-group-trigger .ico {
  --ico-size: 30px;
  border-radius: 9px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -2px 4px rgba(0,0,0,.28) inset,
    0 4px 10px var(--ico-glow),
    0 2px 4px rgba(0,0,0,.22);
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease;
}
.sb-link:hover .ico,
.sb-dash:hover .ico,
.sb-group-trigger:hover .ico {
  transform: scale(1.14) translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 4px rgba(0,0,0,.28) inset,
    0 6px 14px var(--ico-glow),
    0 3px 6px rgba(0,0,0,.3);
}
.nav-item .ico svg,
.sb-link .ico svg,
.sb-dash .ico svg,
.sb-group-trigger .ico svg { width: 56%; height: 56%; }

.bottom-nav .ico { --ico-size: 26px; border-radius: 8px; box-shadow: 0 1px 0 rgba(255,255,255,.3) inset, 0 3px 8px var(--ico-glow); }
.bottom-nav a.active .ico {
  transform: translateY(-2px) scale(1.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 16px var(--ico-glow);
}
.btn .ico { --ico-size: 22px; border-radius: 6px; }
.btn-sm .ico { --ico-size: 20px; }
.logo .ico { margin-right: .15rem; }
.menu-toggle .ico { --ico-size: 22px; box-shadow: none; background: linear-gradient(145deg, #64748b, #475569); }