/* =====================================================================
   EXENA kurumsal renkleri
   Ana renk  : #252525 (koyu antrasit)
   Zemin     : #f6f6f6 (açık gri)
   Bu dosya en son yüklenir; Molla temasının altın (#c96) vurgularını
   Exena renkleriyle değiştirir. Renk değişecekse sadece değişkenleri düzenleyin.
   ===================================================================== */

:root {
    --exena-dark: #252525;
    --exena-dark-hover: #000000;
    --exena-light: #f6f6f6;
    --exena-border: #e2e2e2;
    --exena-muted: #6f6f6f;
    --exena-white: #ffffff;
}

/* ---- Genel ---- */
body {
    background-color: var(--exena-white);
    color: var(--exena-dark);
}

a {
    color: var(--exena-dark);
}

    a:hover, a:focus {
        color: var(--exena-dark-hover);
    }

::selection {
    background: var(--exena-dark);
    color: var(--exena-white);
}

.text-primary {
    color: var(--exena-dark) !important;
}

.bg-light, .bg-lighter {
    background-color: var(--exena-light) !important;
}

/* ---- Butonlar ---- */
.btn-primary,
.btn-dark,
.btn-contact-send {
    background-color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
    color: var(--exena-white) !important;
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active,
    .btn-dark:hover, .btn-dark:focus,
    .btn-contact-send:hover {
        background-color: var(--exena-dark-hover) !important;
        border-color: var(--exena-dark-hover) !important;
        color: var(--exena-white) !important;
    }

.btn-outline-primary, .btn-outline-primary-2, .btn-outline-dark, .btn-outline-dark-2 {
    color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
    background-color: transparent !important;
}

    .btn-outline-primary:hover, .btn-outline-primary-2:hover, .btn-outline-dark:hover, .btn-outline-dark-2:hover,
    .btn-outline-primary:focus, .btn-outline-primary-2:focus {
        color: var(--exena-white) !important;
        background-color: var(--exena-dark) !important;
        border-color: var(--exena-dark) !important;
    }

/* ---- Header / menü (koyu zemin, açık yazı) ---- */
.header.header-5,
.header-5 .header-middle,
.header-5 .sticky-header.fixed {
    background-color: var(--exena-dark) !important;
}

.header-5 .menu > li > a,
.header-5 .header-search .search-toggle,
.header-5 .mobile-menu-toggler {
    color: var(--exena-light) !important;
}

    .header-5 .menu > li:hover > a,
    .header-5 .menu > li.show > a,
    .header-5 .menu > li.active > a,
    .header-5 .menu > li > a:hover {
        color: var(--exena-white) !important;
    }

    .header-5 .menu > li > a::before {
        background-color: var(--exena-light) !important;
    }

.header-5 .header-search-wrapper {
    background-color: var(--exena-white) !important;
    border-color: var(--exena-white) !important;
}

    .header-5 .header-search-wrapper .form-control {
        color: var(--exena-dark) !important;
    }

.header-search-extended .btn.btn-primary,
.header-search-extended .btn.btn-primary:hover,
.header-search-extended .btn.btn-primary:focus {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--exena-dark) !important;
}
/* Açılır menü (megamenü) açık zeminde kalır */
.megamenu {
    border-top: 2px solid var(--exena-dark) !important;
}

    .megamenu .menu-title a, .megamenu ul li a {
        color: var(--exena-dark) !important;
    }

        .megamenu .menu-title a:hover, .megamenu ul li a:hover {
            color: var(--exena-dark-hover) !important;
            text-decoration: underline;
        }

/* Mobil menü */
.mobile-menu li a:hover, .mobile-menu li a:focus,
.mobile-menu li.open > a, .mobile-menu li.active > a {
    color: var(--exena-dark-hover) !important;
}

.mobile-search .btn {
    background-color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
}

/* ---- Sayfa başlığı (tüm iç sayfalar) / breadcrumb ----
   demo-15.css .page-header'a sabit 420px yükseklik veriyor, style.css sadece üst boşluk veriyordu:
   başlık kutunun üstünde kalıyordu. Başlık artık dikey + yatay ortalı; satır içi verilen arka plan
   görseli (style="background-image:...") gösterilir, okunabilirlik için üstüne koyu katman gelir.
   Banner görselinin ortasında "exena." logosu olduğu için başlık solda (görselin boş tarafında) durur.
   Header (.header-5) demo-15'te position:absolute + 1.5rem üst boşlukla sayfanın üstüne biniyor (yükseklik ~81px):
   başlık header'ın altında kalmasın diye o kadar üst boşluk bırakılır. */
:root {
    --exena-header-offset: 81px;
}

.page-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto !important;
    min-height: 400px;
    padding: calc(var(--exena-header-offset) + 2rem) 0 2rem !important;
    background-color: var(--exena-dark) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

    .page-header::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .45);
    }

    .page-header > .container {
        position: relative;
        z-index: 1;
        width: 100%;
    }

.page-header.text-center {
    text-align: left !important;
}

    .page-header .page-title {
        color: var(--exena-white) !important;
        margin: 0;
        font-size: 4rem;
        font-weight: 600;
    }

        .page-header .page-title span {
            color: var(--exena-light) !important;
            opacity: .85;
            margin-top: .8rem;
        }

@media (max-width: 767px) {
    /* Mobilde başlık alta iner, logonun üstüne binmez */
    .page-header {
        min-height: 280px;
        align-items: flex-end;
        padding: calc(var(--exena-header-offset) + 1.5rem) 0 2.4rem !important;
    }

        .page-header > .container {
            padding-left: 20px;
            padding-right: 20px;
        }

        .page-header::before {
            background: linear-gradient(to top, rgba(0, 0, 0, .75), rgba(0, 0, 0, .25));
        }

        .page-header .page-title {
            font-size: 2.8rem;
        }
}

.breadcrumb-nav {
    background-color: var(--exena-light) !important;
    border-bottom-color: var(--exena-border) !important;
}

.breadcrumb-item a {
    color: var(--exena-muted) !important;
}

    .breadcrumb-item a:hover, .breadcrumb-item a:focus {
        color: var(--exena-dark) !important;
    }

.breadcrumb-item.active {
    color: var(--exena-dark) !important;
}

/* ---- Ürün kartları ---- */
.product {
    background-color: var(--exena-white);
}

.product-media {
    background-color: var(--exena-light) !important;
}

.product-title a:hover, .product-title a:focus,
.product-cat a:hover, .product-cat a:focus {
    color: var(--exena-dark-hover) !important;
}

.product-label {
    background-color: var(--exena-dark) !important;
    color: var(--exena-white) !important;
}

.btn-product, .btn-product-icon {
    color: var(--exena-dark) !important;
}

    .btn-product:hover, .btn-product-icon:hover {
        background-color: var(--exena-dark) !important;
        color: var(--exena-white) !important;
    }

.toolbox-info span {
    color: var(--exena-dark) !important;
    font-weight: 600;
}

/* Ürün detayı */
.product-gallery-item::before, .product-gallery-item.active::before {
    border-color: var(--exena-dark) !important;
}

.product-details-tab .nav.nav-pills .nav-link:hover,
.product-details-tab .nav.nav-pills .nav-link.active,
.nav.nav-pills .nav-link.active {
    color: var(--exena-dark) !important;
    border-bottom-color: var(--exena-dark) !important;
}

.exena-spec-table th {
    background: var(--exena-light) !important;
    color: var(--exena-dark);
}

/* ---- Sayfalama ---- */
.pagination .page-link {
    color: var(--exena-dark);
}

.pagination .page-item.active .page-link,
.page-link.active {
    background-color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
    color: var(--exena-white) !important;
}

.pagination .page-link:hover, .pagination .page-link:focus {
    color: var(--exena-dark-hover) !important;
    background-color: var(--exena-light) !important;
}

/* ---- Blog / haber ---- */
.entry-title a:hover, .entry-title a:focus,
.entry-meta a:hover, .entry-cats a:hover {
    color: var(--exena-dark-hover) !important;
}

.read-more {
    color: var(--exena-dark) !important;
}

    .read-more:hover {
        color: var(--exena-dark-hover) !important;
    }

.entry-media {
    background-color: var(--exena-light);
}

/* ---- Başlıklar / ikon kutuları ---- */
.title, .heading .title {
    color: var(--exena-dark);
}

.icon-box-icon {
    color: var(--exena-dark) !important;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
}

/* ---- Footer (koyu zemin, açık yazı) ---- */
.footer, .footer .footer-middle, .footer .footer-bottom {
    background-color: var(--exena-dark) !important;
}

    .footer, .footer p, .footer .widget-list li, .footer .widget-list a {
        color: rgba(246, 246, 246, .72) !important;
    }

        .footer .widget-title {
            color: var(--exena-light) !important;
        }

        .footer a:hover, .footer .widget-list a:hover {
            color: var(--exena-white) !important;
        }

.footer-bottom {
    border-top: 1px solid rgba(246, 246, 246, .12);
}

.footer-copyright, .footer .social-label {
    color: rgba(246, 246, 246, .6) !important;
}

.footer .btn-dark {
    background-color: var(--exena-light) !important;
    border-color: var(--exena-light) !important;
    color: var(--exena-dark) !important;
}

    .footer .btn-dark:hover {
        background-color: var(--exena-white) !important;
        color: var(--exena-dark) !important;
    }

.footer .social-icon {
    color: var(--exena-light) !important;
    border-color: rgba(246, 246, 246, .3) !important;
}

    .footer .social-icon:hover {
        color: var(--exena-dark) !important;
        background-color: var(--exena-light) !important;
        border-color: var(--exena-light) !important;
    }

/* ---- Yukarı çık ---- */
#scroll-top {
    background-color: var(--exena-dark) !important;
    color: var(--exena-white) !important;
}

    #scroll-top:hover {
        background-color: var(--exena-dark-hover) !important;
    }

/* ---- Formlar ---- */
.form-control:focus {
    border-color: var(--exena-dark) !important;
    box-shadow: 0 0 0 .1rem rgba(37, 37, 37, .15) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
}

/* ---- Sol kategori ağacı ---- */
.cf-wrap {
    border-color: var(--exena-border);
}

.cf-header {
    background: var(--exena-dark);
}

.cf-row:hover, .cf-row.is-active {
    background: var(--exena-light);
}

.cf-children {
    background: var(--exena-light);
}

.cf-link:hover, .cf-link.selected {
    color: var(--exena-dark) !important;
}

/* ---- İletişim sayfası ---- */
.contact-hero {
    background-color: var(--exena-dark) !important;
}

.contact-info-panel, .contact-form-panel {
    background-color: var(--exena-white);
}

.contact-main-area {
    background-color: transparent;
}

.contact-info-item i {
    color: var(--exena-white) !important;
    background-color: var(--exena-dark) !important;
}

.contact-page-pro {
    background-color: var(--exena-light) !important;
}

.contact-info-item a:hover {
    color: var(--exena-dark-hover) !important;
}

/* ---- Altın vurguların yerine (hakkımızda, SSS, sertifikalar) ---- */
.about-simple-title span,
.simple-feature span,
.exena-numbers span,
.cert-intro span,
.cert-number,
.faq-modern-title span,
.faq-wide-content span,
.footer .widget-about-info a,
.blog-posts .read-more {
    color: var(--exena-dark) !important;
}

.cert-icon {
    color: var(--exena-dark) !important;
    border-color: var(--exena-dark) !important;
}

.product.product-4 .btn-product:hover,
.product.product-4 .btn-product:focus {
    background-color: var(--exena-dark) !important;
    color: var(--exena-white) !important;
}

/* ---- Görsel yok kutusu ---- */
.exena-no-image {
    background: var(--exena-light);
    color: #c4c4c4;
}