/* ============================================================
   🎨 svg-icons.css - ВСЕ SVG-ИКОНКИ (отдельный файл)
   ============================================================ */

/* ============================================================ */
/*  🎯 БАЗОВЫЕ ПРАВИЛА ДЛЯ ВСЕХ SVG                           */
/* ============================================================ */

svg {
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}

svg[stroke="currentColor"] {
    stroke: currentColor;
}

svg[fill="currentColor"] {
    fill: currentColor;
}

/* ============================================================ */
/*  📌 ИКОНКИ В ЗАГОЛОВКАХ (h2)                                */
/* ============================================================ */

.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.6rem;
    flex-shrink: 0;
}

.section-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 1.8;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-title:hover .section-icon svg {
    transform: scale(1.1) rotate(-3deg);
    filter: drop-shadow(0 0 16px rgba(var(--accent-rgb), 0.3));
}

/* ============================================================ */
/*  📌 ИКОНКИ В ПОДЗАГОЛОВКАХ (h3)                             */
/* ============================================================ */

.subtitle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.subtitle-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-subtitle:hover .subtitle-icon svg {
    transform: scale(1.15) rotate(-2deg);
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.25));
}

/* ============================================================ */
/*  📌 ИКОНКИ В ФОРМЕ ОТЗЫВА                                   */
/* ============================================================ */

.form-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.form-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.form-title:hover .form-icon svg {
    transform: scale(1.1) rotate(-5deg);
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.25));
}

/* ============================================================ */
/*  📌 ИКОНКИ В КНОПКАХ                                        */
/* ============================================================ */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.btn-icon svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn:hover .btn-icon svg {
    transform: rotate(15deg) scale(1.1);
}

/* ============================================================ */
/*  📌 ИКОНКИ В ЛЕГЕНДЕ ЛОГОТИПА                               */
/* ============================================================ */

.logo-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.logo-legend-item svg {
    width: 16px;
    height: 16px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.logo-legend-item:hover svg {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.2));
}

.logo-legend-separator {
    color: var(--border-color);
    margin: 0 0.3rem;
}

/* ============================================================ */
/*  📌 ИКОНКИ В НОВОСТЯХ                                       */
/* ============================================================ */

.news-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
    flex-shrink: 0;
    color: var(--accent-main);
}

.news-icon svg {
    width: 22px;
    height: 22px;
    stroke: var(--accent-main);
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.news-item:hover .news-icon svg {
    transform: scale(1.15) rotate(-3deg);
    filter: drop-shadow(0 0 12px rgba(var(--accent-rgb), 0.3));
}

/* ============================================================ */
/*  📌 АВАТАР РАЗРАБОТЧИКА                                     */
/* ============================================================ */

.developer-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 2px solid var(--accent-border);
    margin: 0 auto 1rem;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.developer-avatar svg {
    width: 48px;
    height: 48px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.developer-avatar:hover {
    background: var(--accent-glass);
    border-color: var(--accent-border-hover);
    transform: scale(1.05);
}

.developer-avatar:hover svg {
    transform: scale(1.05) rotate(-3deg);
    filter: drop-shadow(0 0 30px rgba(var(--accent-rgb), 0.3));
}

/* ============================================================ */
/*  📌 ИКОНКИ В СЛАЙДЕРЕ                                       */
/* ============================================================ */

.expert-slide .slide-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.expert-slide .slide-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.expert-slide .slide-icon:hover {
    background: var(--accent-glass);
    border-color: var(--accent-border-hover);
    transform: scale(1.05);
}

.expert-slide .slide-icon:hover svg {
    stroke: var(--accent-light, #e8c9a0);
    transform: scale(1.1) translateY(-2px);
    filter: drop-shadow(0 0 20px rgba(var(--accent-rgb), 0.4));
}

/* ============================================================ */
/*  📌 МОТИВАЦИОННАЯ ИКОНКА                                    */
/* ============================================================ */

.motivation-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    margin: 0 auto 0.8rem;
    transition: all 0.3s ease;
}

.motivation-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--accent-main, #d4a574);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.motivation-icon:hover {
    background: var(--accent-glass);
    border-color: var(--accent-border-hover);
    transform: scale(1.05);
}

.motivation-icon:hover svg {
    transform: scale(1.08) translateY(-4px);
    filter: drop-shadow(0 0 30px rgba(var(--accent-rgb), 0.4));
}

/* ============================================================ */
/*  📌 АДАПТИВ                                                 */
/* ============================================================ */

@media (max-width: 768px) {
    .section-icon svg { width: 24px; height: 24px; }
    .subtitle-icon svg { width: 20px; height: 20px; }
    .form-icon svg { width: 20px; height: 20px; }
    .developer-avatar { width: 64px; height: 64px; }
    .developer-avatar svg { width: 36px; height: 36px; }
    .expert-slide .slide-icon { width: 50px; height: 50px; }
    .expert-slide .slide-icon svg { width: 26px; height: 26px; }
    .motivation-icon { width: 60px; height: 60px; }
    .motivation-icon svg { width: 32px; height: 32px; }
    .logo-legend-item svg { width: 14px; height: 14px; }
}

@media (max-width: 480px) {
    .section-icon svg { width: 20px; height: 20px; }
    .subtitle-icon svg { width: 18px; height: 18px; }
    .form-icon svg { width: 18px; height: 18px; }
    .developer-avatar { width: 56px; height: 56px; }
    .developer-avatar svg { width: 30px; height: 30px; }
    .expert-slide .slide-icon { width: 44px; height: 44px; }
    .expert-slide .slide-icon svg { width: 22px; height: 22px; }
    .motivation-icon { width: 52px; height: 52px; }
    .motivation-icon svg { width: 28px; height: 28px; }
    .logo-legend-item svg { width: 12px; height: 12px; }
    .btn-icon svg { width: 14px; height: 14px; }
}