/* Düz ikon seti: SVG dosyaları CSS maskesiyle renklendirilir */
.i { display: inline-block; flex: none; width: 1.5em; height: 1.5em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: -.3em; }
.i-web { --ico: url("../icons/web.svg"); }
.i-bag { --ico: url("../icons/bag.svg"); }
.i-calendar { --ico: url("../icons/calendar.svg"); }
.i-chart { --ico: url("../icons/chart.svg"); }
.i-search { --ico: url("../icons/search.svg"); }
.i-mail { --ico: url("../icons/mail.svg"); }
.i-image { --ico: url("../icons/image.svg"); }
.i-users { --ico: url("../icons/users.svg"); }
.i-shield { --ico: url("../icons/shield.svg"); }
.i-bolt { --ico: url("../icons/bolt.svg"); }
.i-layers { --ico: url("../icons/layers.svg"); }
.i-file { --ico: url("../icons/file.svg"); }
.i-globe { --ico: url("../icons/globe.svg"); }
.i-clock { --ico: url("../icons/clock.svg"); }
.i-check { --ico: url("../icons/check.svg"); }
.i-palette { --ico: url("../icons/palette.svg"); }
.i-rocket { --ico: url("../icons/rocket.svg"); }
.i-headset { --ico: url("../icons/headset.svg"); }
.i-database { --ico: url("../icons/database.svg"); }
.i-lock { --ico: url("../icons/lock.svg"); }
.i-phone { --ico: url("../icons/phone.svg"); }
.i-monitor { --ico: url("../icons/monitor.svg"); }
.i-store { --ico: url("../icons/store.svg"); }
.i-form { --ico: url("../icons/form.svg"); }
.i-tag { --ico: url("../icons/tag.svg"); }
.i-sliders { --ico: url("../icons/sliders.svg"); }
.i-arrow { --ico: url("../icons/arrow.svg"); }
.i-plug { --ico: url("../icons/plug.svg"); }
.i-cookie { --ico: url("../icons/cookie.svg"); }
.i-history { --ico: url("../icons/history.svg"); }
.i-briefcase { --ico: url("../icons/briefcase.svg"); }
.i-heart { --ico: url("../icons/heart.svg"); }
.i-utensils { --ico: url("../icons/utensils.svg"); }
.i-scale { --ico: url("../icons/scale.svg"); }
.i-building { --ico: url("../icons/building.svg"); }
.i-scissors { --ico: url("../icons/scissors.svg"); }
.i-wrench { --ico: url("../icons/wrench.svg"); }
.i-factory { --ico: url("../icons/factory.svg"); }
.i-star { --ico: url("../icons/star.svg"); }
.i-pin { --ico: url("../icons/pin.svg"); }
.i-call { --ico: url("../icons/call.svg"); }
.i-send { --ico: url("../icons/send.svg"); }
.i-link { --ico: url("../icons/link.svg"); }
.i-gauge { --ico: url("../icons/gauge.svg"); }
.i-bell { --ico: url("../icons/bell.svg"); }
.i-refresh { --ico: url("../icons/refresh.svg"); }
.i-eye { --ico: url("../icons/eye.svg"); }
.i-grid { --ico: url("../icons/grid.svg"); }
.i-tasks { --ico: url("../icons/tasks.svg"); }
.i-news { --ico: url("../icons/news.svg"); }
.i-user { --ico: url("../icons/user.svg"); }
.i-bars { --ico: url("../icons/bars.svg"); }
.i-target { --ico: url("../icons/target.svg"); }
.i-truck { --ico: url("../icons/truck.svg"); }
.i-cart { --ico: url("../icons/cart.svg"); }
.i-language { --ico: url("../icons/language.svg"); }
.i-backup { --ico: url("../icons/backup.svg"); }
.i-cube { --ico: url("../icons/cube.svg"); }

/* İkon rozetleri */
.ib { position: relative; display: inline-grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 18px; color: #fff; font-size: 26px; background: linear-gradient(145deg, #5CE0D2, #39D9C4 60%, #26CAAD); box-shadow: 0 14px 26px -10px rgba(57, 217, 196, .65), inset 0 1px 0 rgba(255, 255, 255, .4); }
.ib.dark { background: #000; color: #39D9C4; box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12); }
.ib.soft { background: #DFFDFA; color: #39D9C4; box-shadow: inset 0 0 0 1px rgba(57, 217, 196, .18); }
.ib.xl { width: 84px; height: 84px; border-radius: 26px; font-size: 38px; }
.ib.sm { width: 42px; height: 42px; border-radius: 13px; font-size: 20px; }