/*
 * Babosan Pano A.S. — katalog tabanli marka katmani (v2.58)
 * Marka renklerinin tek kaynagi bu :root blogudur.
 */
:root {
    --marka-ana: #E20026;
    --marka-ikincil: #AC1E2C;
    --marka-vurgu: #EAB2BB;
    --marka-koyu: #1F415D;
    --marka-acik: #FFFFFF;
    --marka-metin: #000000;
    --font-baslik: "Bebas Neue", "Righteous", Arial, sans-serif;
    --font-vurgu: "Righteous", "Bebas Neue", Arial, sans-serif;
    --font-imza: "Allura", cursive;
    --font-govde: "Barlow", "Axiforma", Arial, sans-serif;
}

html,
body {
    overflow-x: hidden;
}

@font-face {
    font-family: "Bebas Neue";
    src: url("fonts/BebasNeue-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Righteous";
    src: url("fonts/Righteous-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Allura";
    src: url("fonts/Allura-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("fonts/Rajdhani-SemiBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Rajdhani";
    src: url("fonts/Rajdhani-Bold.ttf") format("truetype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow-Regular.ttf") format("truetype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Barlow";
    src: url("fonts/Barlow-Medium.ttf") format("truetype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

html,
body,
button,
input,
textarea,
select {
    color: var(--marka-metin);
    font-family: var(--font-govde);
}

h1,
h2,
h3,
h4,
h5,
h6,
.babosan-section-title,
.babosan-bold-title,
.site-title,
.site-title-tagline,
.btn,
.nav_scroll a {
    font-family: var(--font-baslik);
    letter-spacing: .035em;
    font-weight: 500;
}

.btn,
.nav_scroll a,
.site-title-tagline,
.section-sub-title,
.blog-meta,
.category-title {
    font-family: var(--font-vurgu);
    letter-spacing: .055em;
}

body, p, li, label, input, textarea, select {
    letter-spacing: .012em;
}

.fw-bold { font-weight: 600 !important; }

.modern-brand-section .brand-img,
.brands-page-section .brand-logo-img,
.brand-logo img,
.marka-card img {
    filter: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-dark,
.text-muted,
p,
li,
label {
    color: var(--marka-metin) !important;
}

.bg-dark,
.bg-danger,
.footer-section,
.topbar-area,
.iletisim-sol,
.babosan-dark-surface {
    background-color: var(--marka-koyu) !important;
    color: var(--marka-acik) !important;
}

.bg-dark *,
.bg-danger *,
.footer-section *,
.topbar-area *,
.iletisim-sol *,
.babosan-dark-surface * {
    color: var(--marka-acik) !important;
}

a {
    color: var(--marka-ikincil);
}

a:hover,
a:focus {
    color: var(--marka-ana);
}

.text-danger,
.site-title-tagline,
.section-sub-title,
.counter {
    color: var(--marka-ana) !important;
}

.bg-light,
.bg-white,
.card,
.form-control,
.form-select,
.input-group-text {
    background-color: var(--marka-acik) !important;
}

.btn,
button,
.custom-btn-outline,
.home-proje-btn {
    border-radius: 4px !important;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.rounded,
.rounded-1,
.rounded-2,
.rounded-3,
.rounded-4,
.rounded-pill {
    border-radius: 4px !important;
}

.btn-danger,
.btn-primary,
.btn-success,
.hover-fill-btn:hover,
.custom-btn-outline:hover {
    background: var(--marka-ana) !important;
    border-color: var(--marka-ana) !important;
    color: var(--marka-acik) !important;
}

.btn-outline-danger,
.text-danger,
.custom-btn-outline {
    border-color: var(--marka-ana) !important;
    color: var(--marka-ana) !important;
}

.btn-outline-dark {
    border-color: var(--marka-koyu) !important;
    color: var(--marka-koyu) !important;
}

.btn-outline-dark:hover,
.btn-dark {
    background: var(--marka-koyu) !important;
    border-color: var(--marka-koyu) !important;
    color: var(--marka-acik) !important;
}

.card,
.single-service-box,
.babosan-single-service-box,
.home-proje-card,
.blog-card,
.urun-card,
.marka-card,
.category-card {
    border: 1px solid var(--marka-koyu) !important;
    border-radius: 6px !important;
    box-shadow: 8px 8px 0 var(--marka-vurgu) !important;
    overflow: hidden;
}

.babosan-section-title,
.babosan-bold-title,
.site-title {
    position: relative;
    padding-left: 20px;
}

.babosan-section-title::before,
.babosan-bold-title::before,
.site-title::before {
    background: var(--marka-ana);
    content: "";
    height: 100%;
    left: 0;
    max-height: 72px;
    position: absolute;
    top: 0;
    width: 6px;
}

section,
.section,
.service-section,
.blog-section,
.project-section {
    position: relative;
}

section + section::before,
.section + .section::before {
    background: linear-gradient(90deg, var(--marka-ana) 0 18%, var(--marka-koyu) 18% 100%);
    content: "";
    height: 3px;
    left: 50%;
    max-width: 1320px;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: calc(100% - 48px);
}

.babosan_nav_manu,
#sticky-header {
    background: var(--marka-acik) !important;
    border-bottom: 4px solid var(--marka-ana);
}

.babosan_menu > ul > li > a,
.babosan_menu .sub-menu a {
    color: var(--marka-metin) !important;
    font-family: "Rajdhani", Arial, sans-serif;
    font-weight: 700;
}

.babosan_menu .sub-menu {
    background: var(--marka-acik) !important;
    border: 1px solid var(--marka-koyu) !important;
    border-top: 4px solid var(--marka-ana) !important;
    border-radius: 0 0 4px 4px !important;
}

.babosan_menu a:hover,
.babosan_menu a:focus,
.babosan_menu .active > a {
    color: var(--marka-ana) !important;
}

.form-control,
.form-select {
    border: 1px solid var(--marka-koyu) !important;
    border-radius: 4px !important;
    color: var(--marka-metin) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: var(--marka-metin) !important;
    opacity: .7;
}

.brand-logo img,
.marka-card img {
    filter: none !important;
}

/* Koyu yüzeylerde okunabilirlik: genel başlık kuralının siyah !important değeri
   breadcrumb, proje katmanı ve footer üzerinde tekrar uygulanmasın. */
html body .dyn-breadcrumb .dyn-breadcrumb-title,
html body .dyn-breadcrumb .dyn-breadcrumb-list,
html body .dyn-breadcrumb .dyn-breadcrumb-list a,
html body .dyn-breadcrumb .dyn-breadcrumb-list span,
.home-proje-overlay h3,
.home-proje-overlay p,
.home-proje-overlay span,
.footer-section h1,
.footer-section h2,
.footer-section h3,
.footer-section h4,
.footer-section h5,
.footer-section h6,
.footer-section p,
.footer-section li,
.footer-section a,
.footer-section span,
.iletisim-bilgi-kart h1,
.iletisim-bilgi-kart h2,
.iletisim-bilgi-kart h3,
.iletisim-bilgi-kart h4,
.iletisim-bilgi-kart h5,
.iletisim-bilgi-kart p,
.iletisim-bilgi-kart a,
.iletisim-bilgi-kart span {
    color: var(--marka-acik) !important;
}

.dyn-breadcrumb {
    isolation: isolate;
}

.dyn-breadcrumb-title {
    font-family: var(--font-baslik) !important;
    font-size: clamp(2.2rem, 5vw, 4.6rem) !important;
    letter-spacing: .035em;
    line-height: .95;
    text-shadow: 0 3px 16px rgba(0,0,0,.85);
}

.dyn-breadcrumb-list {
    text-shadow: 0 2px 8px rgba(0,0,0,.9);
}

.footer-section {
    position: relative;
    text-shadow: 0 2px 7px rgba(0,0,0,.95);
}

.footer-section::before {
    background: rgba(31,65,93,.91);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.footer-section > * {
    position: relative;
    z-index: 1;
}

.footer-section h1,
.footer-section h2,
.footer-section h3,
.footer-section h4,
.footer-section h5,
.footer-section h6,
.footer-section p,
.footer-section li,
.footer-section a,
.footer-section td,
.footer-section span {
    opacity: 1 !important;
    text-shadow: 0 2px 7px rgba(0,0,0,.98) !important;
}

/* Buton metni ve iç ikon hover sırasında aynı kontrastı korur. */
.btn:hover,
.btn:focus,
.btn:hover *,
.btn:focus *,
.custom-btn-outline:hover,
.custom-btn-outline:hover *,
.home-proje-btn:hover,
.home-proje-btn:hover * {
    color: var(--marka-acik) !important;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:hover *,
.btn-light:focus * {
    background: var(--marka-ana) !important;
    border-color: var(--marka-ana) !important;
    color: var(--marka-acik) !important;
}

/* Uzun kategori ve kart başlıkları birbirinin üzerine binmez. */
.modern-brand-content h3,
.modern-category-card .category-title,
.home-proje-overlay h3,
.service-title,
.blog-card-title,
.home-blog-card h3 {
    hyphens: auto;
    line-height: 1.18 !important;
    overflow-wrap: anywhere;
    word-break: normal;
}

.modern-brand-content h3,
.modern-category-card .category-title {
    display: -webkit-box;
    min-height: 2.4em;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product-specification-content ul {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-specification-content li {
    border-left: 4px solid var(--marka-ana);
    padding: 10px 14px;
}

@media (max-width: 767.98px) {
    .product-specification-content ul { grid-template-columns: 1fr; }
}

.sektor-ikon {
    display: inline-block;
    height: 1em;
    overflow: visible;
    vertical-align: -.125em;
    width: 1em;
}

.sektor-ikon-hizmet {
    height: 54px;
    width: 54px;
}

.sektor-ikon-rozet {
    background: var(--marka-koyu);
    color: var(--marka-acik);
    display: grid;
    font-size: 28px;
    height: 52px;
    left: 16px;
    place-items: center;
    position: absolute;
    top: 16px;
    width: 52px;
    z-index: 2;
}

.modern-category-thumb,
.modern-brand-thumb {
    position: relative;
}

.devamini-oku {
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--marka-ana);
    color: var(--marka-ana);
    cursor: pointer;
    display: inline-block;
    margin-top: 14px;
    padding: 4px 0;
}

@media (max-width: 767.98px) {
    .babosan-section-title,
    .babosan-bold-title,
    .site-title {
        padding-left: 14px;
    }

    section + section::before,
    .section + .section::before {
        width: calc(100% - 24px);
    }
}