/* ================================
   Product Icons CSS
   Kullanım:
   <i class="product-icon icon-welding-table"></i>
================================ */

.product-icon {
    display: inline-block;
    width: 68px;
    height: 68px;
    background-color: #000;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 42px 42px;
    mask-size: 60px 60px;
    transition: background-color .25s ease;
}

/* Tab kutuları */
.nav-link {
    background: #fff;
    color: #000;
    border-radius: 14px;
    transition: all .25s ease;
}

    .nav-link .product-icon {
        background-color: #000;
    }

    .nav-link.active {
        background: #c40000;
        color: #fff;
    }

        .nav-link.active .product-icon {
            background-color: #fff;
        }


/* 1 - 4in1 Lazer Kaynak */
.icon-laser-4in1 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12h30v10H10zM14 24h22v24H14zM42 16h10v28H42zM20 52h8v6h-8zM40 52h8v6h-8zM50 10l8-6v18zM46 48l10 8M56 48l-10 8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 12h30v10H10zM14 24h22v24H14zM42 16h10v28H42zM20 52h8v6h-8zM40 52h8v6h-8zM50 10l8-6v18zM46 48l10 8M56 48l-10 8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 2 - Gazaltı Kaynak Torçları */
.icon-welding-torch {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 47c8-2 15-6 21-12l10-10M30 35l-7-7M23 28l11-11c3-3 8-3 11 0l3 3M40 25l9 9M49 34l5-5M54 29l5 5M54 29v9M54 29h-9M15 49l-6 6M43 39l4 4M51 45l6 6M50 42h9' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 47c8-2 15-6 21-12l10-10M30 35l-7-7M23 28l11-11c3-3 8-3 11 0l3 3M40 25l9 9M49 34l5-5M54 29l5 5M54 29v9M54 29h-9M15 49l-6 6M43 39l4 4M51 45l6 6M50 42h9' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 3 - Modüler Kaynak Masaları */
.icon-welding-table {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 20h48v18H8zM16 38v18M48 38v18M18 28h4M30 28h4M42 28h4M20 12h24M24 8v8M40 8v8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 20h48v18H8zM16 38v18M48 38v18M18 28h4M30 28h4M42 28h4M20 12h24M24 8v8M40 8v8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 4 - Cobot */
.icon-cobot {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 52h16M20 52V36M20 36l14-14M34 22l10 10M44 32l8-8M52 24l6 6M30 18a6 6 0 1112 0 6 6 0 01-12 0zM14 30a6 6 0 1112 0 6 6 0 01-12 0z' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 52h16M20 52V36M20 36l14-14M34 22l10 10M44 32l8-8M52 24l6 6M30 18a6 6 0 1112 0 6 6 0 01-12 0zM14 30a6 6 0 1112 0 6 6 0 01-12 0z' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 5 - Lineer Ray Araba */
.icon-linear-guide {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 44h48M12 34h40M20 18h24v18H20zM18 52h28M16 44l-6 8M48 44l6 8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 44h48M12 34h40M20 18h24v18H20zM18 52h28M16 44l-6 8M48 44l6 8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 6 - Vidalı Mil Somun (Minimal) */
.icon-ball-screw {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 32h48M26 22h12v20H26zM18 26l6 6-6 6M46 26l-6 6 6 6' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 32h48M26 22h12v20H26zM18 26l6 6-6 6M46 26l-6 6 6 6' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 7 - Kramayer Pinyon */
.icon-rack-pinion {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 46h48M10 38l4 8 4-8 4 8 4-8 4 8 4-8 4 8 4-8 4 8 4-8 4 8M32 14a12 12 0 100 24 12 12 0 000-24zM32 8v6M32 38v6M20 26h-6M50 26h-6M24 18l-4-4M40 18l4-4M24 34l-4 4M40 34l4 4M32 22a4 4 0 100 8 4 4 0 000-8z' stroke='black' stroke-width='4.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 46h48M10 38l4 8 4-8 4 8 4-8 4 8 4-8 4 8 4-8 4 8 4-8 4 8M32 14a12 12 0 100 24 12 12 0 000-24zM32 8v6M32 38v6M20 26h-6M50 26h-6M24 18l-4-4M40 18l4-4M24 34l-4 4M40 34l4 4M32 22a4 4 0 100 8 4 4 0 000-8z' stroke='black' stroke-width='4.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 8 - Spindle Motor */
.icon-spindle {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 8h16l6 14v18L32 58 18 40V22zM24 22h16M24 34h16M12 18c4-6 10-10 20-10M52 46c-4 6-10 10-20 10' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24 8h16l6 14v18L32 58 18 40V22zM24 22h16M24 34h16M12 18c4-6 10-10 20-10M52 46c-4 6-10 10-20 10' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 9 - Harmonic Redüktör */
.icon-harmonic-reducer {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8a24 24 0 100 48 24 24 0 000-48zM20 32c4-10 20-10 24 0-4 10-20 10-24 0zM32 24v16M24 32h16' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8a24 24 0 100 48 24 24 0 000-48zM20 32c4-10 20-10 24 0-4 10-20 10-24 0zM32 24v16M24 32h16' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 10 - Cycloid Redüktör */
.icon-cycloid-reducer {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8a24 24 0 100 48 24 24 0 000-48zM18 32a8 8 0 1016 0 8 8 0 00-16 0zM30 32a8 8 0 1016 0 8 8 0 00-16 0zM28 28a4 4 0 108 0 4 4 0 00-8 0zM32 8v6M32 50v6M14 32H8M56 32h-6M20 14l3 5M44 14l-3 5M20 50l3-5M44 50l-3-5M50 20l-5 3M50 44l-5-3M14 20l5 3M14 44l5-3' stroke='black' stroke-width='4.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M32 8a24 24 0 100 48 24 24 0 000-48zM18 32a8 8 0 1016 0 8 8 0 00-16 0zM30 32a8 8 0 1016 0 8 8 0 00-16 0zM28 28a4 4 0 108 0 4 4 0 00-8 0zM32 8v6M32 50v6M14 32H8M56 32h-6M20 14l3 5M44 14l-3 5M20 50l3-5M44 50l-3-5M50 20l-5 3M50 44l-5-3M14 20l5 3M14 44l5-3' stroke='black' stroke-width='4.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.icon-planetary-reducer {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Ccircle cx='22' cy='24' r='5'/%3E%3Ccircle cx='42' cy='24' r='5'/%3E%3Ccircle cx='32' cy='44' r='5'/%3E%3Cpath d='M32 26V14M22 29l-8 8M42 29l8 8M27 44H16M37 44h11'/%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Ccircle cx='32' cy='32' r='6'/%3E%3Ccircle cx='22' cy='24' r='5'/%3E%3Ccircle cx='42' cy='24' r='5'/%3E%3Ccircle cx='32' cy='44' r='5'/%3E%3Cpath d='M32 26V14M22 29l-8 8M42 29l8 8M27 44H16M37 44h11'/%3E%3C/g%3E%3C/svg%3E");
}

/* 12 - Lineer Motor */
.icon-linear-motor {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 42h48M12 28h40M18 20h28v12H18zM14 50h36M20 12v8M28 12v8M36 12v8M44 12v8M48 34l8 8-8 8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 42h48M12 28h40M18 20h28v12H18zM14 50h36M20 12v8M28 12v8M36 12v8M44 12v8M48 34l8 8-8 8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* 13 - Rotary Table */
.icon-rotary-table {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 46h32v10H16zM12 30a20 12 0 1040 0 20 12 0 10-40 0zM32 18v12l10 6M22 12l-8 8M42 12l8 8M16 30h8M40 30h8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 46h32v10H16zM12 30a20 12 0 1040 0 20 12 0 10-40 0zM32 18v12l10 6M22 12l-8 8M42 12l8 8M16 30h8M40 30h8' stroke='black' stroke-width='5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}