/*
 * Keysletter - Brand Skin & Overrides
 *
 * Product:     Keysletter Email Marketing Platform
 * Version:     1.0.0
 * Author:      Key Design & Art
 * Website:     https://keysletter.com
 *
 * Copyright (c) 2025-2026 Keysletter. All rights reserved.
 */

/* Keysletter Brand — Global Font */
body, h1, h2, h3, h4, h5, h6, p, a, span, li, label, input, button, select, textarea, .nav-link, .breadcrumb, .badge, .btn, .card-title, .feature-box-info {
    font-family: 'Poppins', sans-serif !important;
}

/* Keysletter Brand Colors */
:root {
    --primary: #f59e0b;
    --primary-100: #e0900a;
    --primary-200: #cc8309;
    --primary-300: #b87608;
    --primary--100: #f6a825;
    --primary--200: #f7b23e;
    --primary--300: #f8bc58;
    --primary-rgba-0: rgba(245, 158, 11, 0);
    --primary-rgba-10: rgba(245, 158, 11, 0.1);
    --primary-rgba-20: rgba(245, 158, 11, 0.2);
    --primary-rgba-30: rgba(245, 158, 11, 0.3);
    --primary-rgba-40: rgba(245, 158, 11, 0.4);
    --primary-rgba-50: rgba(245, 158, 11, 0.5);
    --primary-rgba-60: rgba(245, 158, 11, 0.6);
    --primary-rgba-70: rgba(245, 158, 11, 0.7);
    --primary-rgba-80: rgba(245, 158, 11, 0.8);
    --primary-rgba-90: rgba(245, 158, 11, 0.9);
    --secondary: #1a1200;
    --secondary-100: #110c00;
    --secondary-200: #0d0900;
    --secondary-300: #080600;
    --secondary--100: #2a1e00;
    --secondary--200: #332400;
    --secondary--300: #3d2b00;
    --secondary-rgba-0: rgba(26, 18, 0, 0);
    --secondary-rgba-10: rgba(26, 18, 0, 0.1);
    --secondary-rgba-20: rgba(26, 18, 0, 0.2);
    --secondary-rgba-30: rgba(26, 18, 0, 0.3);
    --secondary-rgba-40: rgba(26, 18, 0, 0.4);
    --secondary-rgba-50: rgba(26, 18, 0, 0.5);
    --secondary-rgba-60: rgba(26, 18, 0, 0.6);
    --secondary-rgba-70: rgba(26, 18, 0, 0.7);
    --secondary-rgba-80: rgba(26, 18, 0, 0.8);
    --secondary-rgba-90: rgba(26, 18, 0, 0.9);
    --dark: #1d2124;
    --dark-100: #16191b;
    --dark-200: #0f1113;
    --dark-300: #090909;
    --dark--100: #272d31;
    --dark--200: #2d3338;
    --dark--300: #333a40;
    --dark-rgba-0: rgba(29, 33, 36, 0);
    --dark-rgba-10: rgba(29, 33, 36, 0.1);
    --dark-rgba-20: rgba(29, 33, 36, 0.2);
    --dark-rgba-30: rgba(29, 33, 36, 0.3);
    --dark-rgba-40: rgba(29, 33, 36, 0.4);
    --dark-rgba-50: rgba(29, 33, 36, 0.5);
    --dark-rgba-60: rgba(29, 33, 36, 0.6);
    --dark-rgba-70: rgba(29, 33, 36, 0.7);
    --dark-rgba-80: rgba(29, 33, 36, 0.8);
    --dark-rgba-90: rgba(29, 33, 36, 0.9);
    --light: #FFF;
    --light-100: #f2f2f2;
    --light-200: #ececec;
    --light-300: #e6e6e6;
    --light--100: #ffffff;
    --light--200: #ffffff;
    --light--300: #ffffff;
    --light-rgba-0: rgba(255, 255, 255, 0);
    --light-rgba-10: rgba(255, 255, 255, 0.1);
    --light-rgba-20: rgba(255, 255, 255, 0.2);
    --light-rgba-30: rgba(255, 255, 255, 0.3);
    --light-rgba-40: rgba(255, 255, 255, 0.4);
    --light-rgba-50: rgba(255, 255, 255, 0.5);
    --light-rgba-60: rgba(255, 255, 255, 0.6);
    --light-rgba-70: rgba(255, 255, 255, 0.7);
    --light-rgba-80: rgba(255, 255, 255, 0.8);
    --light-rgba-90: rgba(255, 255, 255, 0.9);
}

/* Nav hover */
#header .header-nav-main nav > ul > li:hover > a,
#header .header-nav-main nav > ul > li.open > a,
#header .header-nav-main nav > ul > li.accessibility-open > a {
    color: #f59e0b !important;
    background: transparent !important;
}

/* Nav active */
#header .header-nav-main nav > ul > li > a.active,
#header .header-nav-main nav > ul > li.active > a {
    color: #f59e0b !important;
    background: transparent !important;
    font-weight: 700 !important;
    position: relative;
}
#header .header-nav-main nav > ul > li > a.active::after,
#header .header-nav-main nav > ul > li.active > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    height: 2px;
    background: #f59e0b;
    border-radius: 2px;
}

/* Basariya Uc Adim: 1200px altinda kartlar alt alta gecer; yatay cizgi gizlenir, tema 48px yan boslugu daraltilir */
@media (max-width: 1199.98px) {
    .process-connecting-line .connecting-line {
        display: none;
    }
    .process-connecting-line .process-step {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}