/**
 * MARCA Çelik Halat — marka teması (Faz 1)
 * Logo mavisi koyulaştırılmış endüstriyel kurumsal palet
 */
:root {
    --theme-color: #004b87;
    --primary-color: #004b87;
    --theme-color2: #0068b5;
    --light-blue-color: #002d52;
    --marca-blue-dark: #001f3d;
    --marca-blue-mid: #004b87;
    --marca-blue-light: #0068b5;
    --marca-accent: #c8102e;
    --title-color: #0b1422;
}

/* Header — container hizası (logo + menü sayfa içeriğiyle aynı genişlikte) */
.header-layout1 .container,
.header-layout1 .th-container {
    max-width: 1320px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.header-layout1 .header-logo {
    padding: 0 !important;
    margin-left: 0 !important;
    max-width: none !important;
}

.header-layout1 .menu-area .row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Header — büyük logo alanı (panelden yüklenecek) */
.header-layout1 .header-logo a {
    display: inline-flex;
    align-items: center;
    min-height: 72px;
    min-width: 160px;
}

.header-layout1 .header-logo img {
    max-height: 72px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.marca-logo-slot {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 72px;
    min-width: 160px;
}

.marca-logo-slot--footer {
    min-height: 56px;
    min-width: 140px;
}

.marca-logo-slot--mobile {
    min-height: 48px;
    min-width: 120px;
    margin: 0 auto 1rem;
}

.marca-logo-slot--sidebar {
    min-height: 56px;
    min-width: 140px;
    margin-bottom: 0.5rem;
}

/* Butonlar ve vurgular */
.th-btn,
.th-btn.style3,
.th-btn.style7 {
    background-color: var(--marca-blue-mid);
    border-color: var(--marca-blue-mid);
}

.th-btn:hover,
.th-btn.style3:hover,
.th-btn.style7:hover {
    background-color: var(--marca-blue-dark);
    border-color: var(--marca-blue-dark);
}

.sub-title.style1,
.hero-style1 .sub-title {
    color: var(--marca-blue-light);
}

.sec-title .text-theme,
.text-theme {
    color: var(--marca-blue-mid) !important;
}

/* Header üst bar */
.header-layout1 .header-top {
    background-color: var(--marca-blue-dark);
}

.header-layout1 .menu-area {
    background-color: #fff;
    box-shadow: 0 2px 16px rgba(0, 31, 61, 0.08);
}

.header-layout1 .main-menu > ul > li > a:hover,
.header-layout1 .main-menu > ul > li > a.active {
    color: var(--marca-blue-mid);
}

/* Footer */
.footer-layout1.black-bg {
    background-color: var(--marca-blue-dark) !important;
}

/* WhatsApp — tüm sayfalarda sabit */
.whatsapp-support-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #25d366;
    color: #fff !important;
    border-radius: 50px;
    padding: 14px 20px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    animation: marcaWaPulse 2.5s infinite;
}

.whatsapp-support-btn:hover {
    background: #128c7e;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.55);
    text-decoration: none;
}

.whatsapp-support-btn i {
    font-size: 24px;
}

@keyframes marcaWaPulse {
    0%,
    100% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45);
    }
    50% {
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45), 0 0 0 10px rgba(37, 211, 102, 0.12);
    }
}

@media (max-width: 768px) {
    body.has-wa-live-support {
        padding-bottom: 72px;
    }

    .whatsapp-support-btn {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        justify-content: center;
        animation: none;
    }

    .whatsapp-support-btn:hover {
        transform: none;
    }

    .header-layout1 .header-logo img {
        max-height: 56px;
        max-width: 180px;
    }

    .header-layout1 .header-logo a,
    .marca-logo-slot {
        min-height: 56px;
        min-width: 120px;
    }
}