﻿:root {
    --alarm-primary: #ef4444;
    --alarm-primary-light: #f87171;
    --alarm-primary-dark: #dc2626;
    --alarm-gradient: linear-gradient(135deg, #ef4444, #f87171);
}

.kamera-hero-bg {
    background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(239, 68, 68, 0.15), transparent 50%), linear-gradient(180deg, #0f172a 0%, #7f1d1d 50%, #0f172a 100%);
}

    .kamera-hero-bg::before {
        background-image: radial-gradient(circle at 20% 30%, rgba(248, 113, 113, 0.1) 1px, transparent 1px), radial-gradient(circle at 80% 70%, rgba(239, 68, 68, 0.08) 1px, transparent 1px);
    }

.kamera-hero-badge {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.kamera-hero-title .title-gradient {
    background: linear-gradient(135deg, #ef4444, #f87171);
    -webkit-background-clip: text;
    background-clip: text;
}

.kamera-hero .breadcrumb a:hover, .kamera-hero .breadcrumb .current {
    color: #f87171;
}

.kamera-hero-actions .btn-primary {
    background: var(--alarm-gradient);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
}

    .kamera-hero-actions .btn-primary:hover {
        box-shadow: 0 6px 30px rgba(239, 68, 68, 0.4);
    }

.section-badge {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: var(--alarm-primary);
}

.info-box {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(248, 113, 113, 0.05));
    border-left-color: var(--alarm-primary);
}

.info-box-title {
    color: var(--alarm-primary-dark);
}

.feature-highlight-icon {
    background: var(--alarm-gradient);
}

.feature-highlight:hover {
    border-color: var(--alarm-primary);
    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.1);
}

.article-content h2 {
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

.article-content ul li::marker {
    color: var(--alarm-primary);
}

.toc-list a:hover, .toc-list a.active {
    background: rgba(239, 68, 68, 0.1);
    color: var(--alarm-primary);
}

.toc-list a.active {
    border-left-color: var(--alarm-primary);
}

.faq-item:hover {
    border-color: var(--alarm-primary);
}

.faq-question:hover {
    color: var(--alarm-primary);
}

.faq-icon {
    color: var(--alarm-primary);
}

.kamera-cta {
    background: var(--alarm-gradient);
}

    .kamera-cta .btn-white {
        color: var(--alarm-primary);
    }
