/* Domain kartlarına özel renkler */
.domain-feature--security {
    --feature-color: #2563eb;
    --feature-soft: #eff6ff;
    --feature-rgb: 37, 99, 235;
}

.domain-feature--management {
    --feature-color: #7c3aed;
    --feature-soft: #f5f3ff;
    --feature-rgb: 124, 58, 237;
}

.domain-feature--pricing {
    --feature-color: #f59e0b;
    --feature-soft: #fffbeb;
    --feature-rgb: 245, 158, 11;
}

.domain-feature--privacy {
    --feature-color: #059669;
    --feature-soft: #ecfdf5;
    --feature-rgb: 5, 150, 105;
}

.domain-feature--routing {
    --feature-color: #0891b2;
    --feature-soft: #ecfeff;
    --feature-rgb: 8, 145, 178;
}

.domain-feature--support {
    --feature-color: #e11d48;
    --feature-soft: #fff1f2;
    --feature-rgb: 225, 29, 72;
}

/* İkon kutusu */
.domain-benefits-section .domain-feature-icon {
    background: var(--feature-soft) !important;
    color: var(--feature-color) !important;
    border: 1px solid rgba(var(--feature-rgb), 0.18) !important;
    box-shadow: 0 12px 24px rgba(var(--feature-rgb), 0.15) !important;
}

/* Temanın siyah SVG dolgusunu kesin olarak geçersiz kılar */
.domain-benefits-section .domain-feature-icon svg,
.domain-benefits-section .domain-feature-icon svg path,
.domain-benefits-section .domain-feature-icon svg circle,
.domain-benefits-section .domain-feature-icon svg rect,
.domain-benefits-section .domain-feature-icon svg line,
.domain-benefits-section .domain-feature-icon svg polyline {
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Kart kategori etiketi */
.domain-benefits-section .domain-feature-tag {
    color: var(--feature-color);
    background: var(--feature-soft);
    border-color: rgba(var(--feature-rgb), 0.18);
}

/* Kart üzerindeki renkli üst çizgi */
.domain-benefits-section .domain-feature::before {
    background: linear-gradient(
        90deg,
        var(--feature-color),
        rgba(var(--feature-rgb), 0.35)
    );
}

/* Hover rengi */
.domain-benefits-section .domain-feature:hover {
    border-color: rgba(var(--feature-rgb), 0.3);
}

.domain-benefits-section .domain-feature:hover .domain-feature-icon {
    box-shadow: 0 16px 30px rgba(var(--feature-rgb), 0.24) !important;
}