@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    --navy-950: #070B16;
    --navy-900: #0B1024;
    --navy-800: #121A3A;
    --blue-700: #1439A6;
    --blue-600: #1E4FFF;
    --blue-500: #2A74FF;
    --bg: #FFFFFF;
    --bg-light: #F3F5F8;
    --card: #FFFFFF;
    --text: #0B1024;
    --muted: #3E4657;
    --border: #D7DCE6;
    --white: #FFFFFF;

    --radius: 10px;
    --radius-sm: 8px;
    --radius-md: 10px;

    --shadow-sm: 0 4px 12px rgba(10, 25, 60, .10);
    --shadow-md: 0 8px 22px rgba(10, 25, 60, .14);

    /* Corporate Cards Theme */
    --theme-blue: #0E1F40;
    --card-radius: 14px;

    /* Header Layout Variables */
    --top-strip-h: 40px;
    --navbar-h: 80px;
    --header-offset: var(--top-strip-h);
    --main-offset: calc(var(--top-strip-h) + var(--navbar-h));

    /* Top Bar Professional Design Variables */
    --topbar-bg: #0b1730;
    --topbar-border: rgba(255, 255, 255, 0.08);
    --topbar-text: rgba(255, 255, 255, 0.90);
    --topbar-muted: rgba(255, 255, 255, 0.70);
    --topbar-accent: #3b82f6;
    --topbar-height: 40px;
    --topbar-gap: 10px;
    --topbar-container-pad: 14px;
    --control-height: 28px;
    --control-border: rgba(255, 255, 255, 0.18);
    --control-bg: rgba(255, 255, 255, 0.06);
    --control-bg-hover: rgba(255, 255, 255, 0.10);
}

@media (max-width: 992px) {
    :root {
        --top-strip-h: 44px;
        --navbar-h: 72px;
        --header-offset: var(--top-strip-h);
        --main-offset: calc(var(--top-strip-h) + var(--navbar-h));
        --topbar-height: 44px;
        --topbar-gap: 8px;
        --topbar-container-pad: 10px;
    }
}

body.top-strip-hidden {
    --header-offset: 0px;
    --main-offset: var(--navbar-h);
}

/* ========================================
   GLOBAL FOCUS MANAGEMENT (Accessibility)
   ========================================
   Mouse clicks: No focus outline
   Keyboard (Tab): Visible focus outline
   ======================================== */

/* Mouse ile tıklamalarda focus çizgisi görünmesin - Global override */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* Klavye (Tab) ile gezinirken focus çizgisi GÖRÜNSÜN */
:focus-visible {
    outline: 2px solid var(--theme-blue) !important;
    outline-offset: 2px;
}

/* Default browser border/outline normalize - Mouse click'te çerçeve yok */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible),
h1:focus:not(:focus-visible),
h2:focus:not(:focus-visible),
h3:focus:not(:focus-visible),
h4:focus:not(:focus-visible),
h5:focus:not(:focus-visible),
h6:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.nav-link:focus:not(:focus-visible),
.dropdown-item:focus:not(:focus-visible),
.navbar-toggler:focus:not(:focus-visible),
.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible),
.hero-slide-content h1:focus:not(:focus-visible),
.hero-slide-content h1:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-color: inherit !important;
}

html,
body {
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--bg);
    color: var(--text);
}

a,
.btn-link {
    color: var(--navy-900);
    text-decoration: none;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

a:not(footer a):hover,
.btn-link:not(footer .btn-link):hover {
    color: var(--theme-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--navy-900) !important;
    line-height: 1.15;
}

h1 {
    line-height: 1.08;
}

.content {
    padding-top: 1.1rem;
}

.main-content p,
.main-content li,
.main-content span,
.main-content div {
    color: var(--text);
}

/* Default body text color; scoped overrides (e.g. hero) can change this */

.btn-primary {
    color: var(--white);
    background-color: var(--theme-blue);
    border-color: var(--theme-blue);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: #0a172f;
    border-color: #0a172f;
    box-shadow: var(--shadow-md);
}

/* Button focus - sadece klavye navigasyonunda görünsün */
.btn:not(footer .btn):focus-visible,
.btn:not(footer .btn):active:focus-visible,
.btn-link.nav-link:not(footer .btn-link.nav-link):focus-visible,
.form-check-input:not(footer .form-check-input):focus-visible {
    box-shadow: 0 0 0 3px rgba(14, 31, 64, .18) !important;
    outline: 2px solid var(--theme-blue) !important;
    outline-offset: 2px !important;
}

/* Mouse click'te focus outline yok - Bootstrap override */
.btn:focus:not(:focus-visible),
.btn:active:focus:not(:focus-visible),
.btn:active:not(:focus-visible),
.btn-link.nav-link:focus:not(:focus-visible),
.form-check-input:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: inherit !important;
}

.card,
.panel,
.glass-card {
    background-color: var(--card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Form element focus - sadece klavye navigasyonunda görünsün */
.form-control:not(footer .form-control):focus-visible,
.form-select:not(footer .form-select):focus-visible,
input[type="text"]:not(footer input[type="text"]):focus-visible,
input[type="email"]:not(footer input[type="email"]):focus-visible,
input[type="tel"]:not(footer input[type="tel"]):focus-visible,
input[type="search"]:not(footer input[type="search"]):focus-visible,
input[type="password"]:not(footer input[type="password"]):focus-visible,
input[type="number"]:not(footer input[type="number"]):focus-visible,
textarea:not(footer textarea):focus-visible {
    outline: 2px solid var(--theme-blue);
    outline-offset: 2px;
    border-color: var(--theme-blue);
    box-shadow: 0 0 0 3px rgba(14, 31, 64, .18);
}

/* Mouse click'te form element focus outline yok */
.form-control:not(footer .form-control):focus:not(:focus-visible),
.form-select:not(footer .form-select):focus:not(:focus-visible),
input[type="text"]:not(footer input[type="text"]):focus:not(:focus-visible),
input[type="email"]:not(footer input[type="email"]):focus:not(:focus-visible),
input[type="tel"]:not(footer input[type="tel"]):focus:not(:focus-visible),
input[type="search"]:not(footer input[type="search"]):focus:not(:focus-visible),
input[type="password"]:not(footer input[type="password"]):focus:not(:focus-visible),
input[type="number"]:not(footer input[type="number"]):focus:not(:focus-visible),
textarea:not(footer textarea):focus:not(:focus-visible) {
    outline: none;
    border-color: var(--theme-blue);
    box-shadow: 0 0 0 3px rgba(14, 31, 64, .18);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background-color: #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.card:not(footer .card):hover,
.panel:not(footer .panel):hover,
.glass-card:not(footer .glass-card):hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: rgba(14, 31, 64, 0.2);
}

.panel,
.glass-card {
    padding: 24px;
}

@media (max-width: 767.98px) {

    .panel,
    .glass-card {
        padding: 18px;
    }
}

.site-footer {
    background-color: var(--navy-900) !important;
    color: rgba(255, 255, 255, 0.85);
    border-top: 1px solid rgba(10, 25, 60, 0.6);
}

.site-footer h4,
.site-footer .text-white {
    color: #FFFFFF;
}

.site-footer a {
    color: rgba(226, 232, 255, 0.85);
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: #FFFFFF;
}

.site-footer .text-gray-400 {
    color: rgba(203, 213, 225, 0.9);
}

.site-footer .text-gray-500 {
    color: rgba(148, 163, 184, 0.9);
}

/* Eski topbar stilleri kaldırıldı - yeni landing.css kullanılıyor */

/* Footer color override - tema mavisi - LEFT UNCHANGED PER REQUIREMENTS */
.landing-footer,
.landing-footer * {
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
    background-image: none !important;
}

.landing-footer::before,
.landing-footer::after {
    background: #3b82f6 !important;
    background-color: #3b82f6 !important;
    background-image: none !important;
}

/* Global layout helpers */
.site-container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding-inline: 24px;
}

@media (max-width: 767.98px) {
    .site-container {
        padding-inline: 16px;
    }
}

.section {
    padding-top: 72px;
    padding-bottom: 72px;
}

@media (max-width: 991.98px) {
    .section {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

@media (max-width: 767.98px) {
    .section {
        padding-top: 44px;
        padding-bottom: 44px;
    }
}

.section[class*="py-"] {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
}

@media (max-width: 991.98px) {
    .section[class*="py-"] {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

@media (max-width: 767.98px) {
    .section[class*="py-"] {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
}

.bg-base {
    background-color: var(--bg) !important;
}

.bg-soft {
    background-color: var(--bg-light) !important;
}

/* Gradient / teal / cyan cleanup (office theme) */
.gradient-animate,
.bg-gradient-to-br,
.bg-gradient-to-r {
    background-image: none !important;
}

.text-cyan-400,
.text-teal-400 {
    color: var(--text) !important;
}

.bg-cyan-500,
.bg-teal-500,
.from-cyan-600,
.from-teal-600 {
    background: var(--bg-light) !important;
    background-image: none !important;
}

/* Main content offset - landing.css'te tanımlı */

/* Remove all backgrounds from slider and hero slides */
.slider-container,
.slider-slides-wrapper,
.slider-slide,
.hero-slide,
.hero-slide::before,
.hero-slide::after,
.slider-slide::before,
.slider-slide::after,
.hero-slide--1::before,
.hero-slide--1::after,
.hero-slide--2::before,
.hero-slide--2::after,
.hero-slide--3::before,
.hero-slide--3::after,
.hero-slide--4::before,
.hero-slide--4::after,
.hero-slide--5::before,
.hero-slide--5::after,
.hero-slide-with-icon,
.hero-slide-content,
.hero-slide-icon-wrapper {
    background: transparent !important;
    background-image: none !important;
    background-color: transparent !important;
}

.slider-container *::before,
.slider-container *::after,
.slider-slides-wrapper *::before,
.slider-slides-wrapper *::after,
.slider-slide *::before,
.slider-slide *::after,
.hero-slide *::before,
.hero-slide *::after {
    background-image: none !important;
    background: transparent !important;
}

/* Digital Transformation Background Classes - CSS Only */
:root {
    --brand-blue: #0E1F40;
    --brand-blue-light: rgba(14, 31, 64, 0.12);
    --brand-blue-subtle: rgba(14, 31, 64, 0.06);
    --brand-blue-dots: rgba(14, 31, 64, 0.08);
}

/* Base Digital Transformation Background */
.dt-bg {
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.dt-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Base gradient - blue to white */
        linear-gradient(120deg, var(--brand-blue-light) 0%, rgba(255, 255, 255, 1) 60%),
        /* Subtle diagonal band */
        linear-gradient(45deg, transparent 30%, var(--brand-blue-subtle) 50%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.dt-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Grid pattern - very subtle */
        repeating-linear-gradient(0deg,
            transparent,
            transparent 48px,
            var(--brand-blue-subtle) 48px,
            var(--brand-blue-subtle) 50px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 48px,
            var(--brand-blue-subtle) 48px,
            var(--brand-blue-subtle) 50px);
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

/* Variant 1 - Circuit-like pattern */
.dt-bg--variant-1 {
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.dt-bg--variant-1::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Base gradient */
        linear-gradient(135deg, var(--brand-blue-light) 0%, rgba(255, 255, 255, 1) 50%),
        /* Diagonal soft band */
        linear-gradient(60deg, transparent 40%, var(--brand-blue-subtle) 50%, transparent 60%);
    z-index: 0;
    pointer-events: none;
}

.dt-bg--variant-1::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Dots pattern - data nodes */
        radial-gradient(circle at 20% 30%, var(--brand-blue-dots) 1px, transparent 1px),
        radial-gradient(circle at 80% 70%, var(--brand-blue-dots) 1px, transparent 1px),
        radial-gradient(circle at 40% 80%, var(--brand-blue-dots) 1px, transparent 1px),
        radial-gradient(circle at 90% 20%, var(--brand-blue-dots) 1px, transparent 1px),
        /* Connecting lines - very subtle */
        repeating-linear-gradient(30deg,
            transparent,
            transparent 60px,
            var(--brand-blue-subtle) 60px,
            var(--brand-blue-subtle) 61px);
    background-size: 200px 200px, 180px 180px, 220px 220px, 190px 190px, 100% 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* Variant 2 - Hexagonal/network pattern */
.dt-bg--variant-2 {
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.dt-bg--variant-2::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Base gradient - different angle */
        linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, var(--brand-blue-light) 100%);
    z-index: 0;
    pointer-events: none;
}

.dt-bg--variant-2::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Hexagonal dots */
        radial-gradient(circle at 15% 25%, var(--brand-blue-dots) 2px, transparent 2px),
        radial-gradient(circle at 85% 75%, var(--brand-blue-dots) 2px, transparent 2px),
        radial-gradient(circle at 50% 50%, var(--brand-blue-dots) 1.5px, transparent 1.5px),
        /* Grid lines */
        repeating-linear-gradient(0deg,
            transparent,
            transparent 39px,
            var(--brand-blue-subtle) 39px,
            var(--brand-blue-subtle) 40px),
        repeating-linear-gradient(90deg,
            transparent,
            transparent 39px,
            var(--brand-blue-subtle) 39px,
            var(--brand-blue-subtle) 40px);
    background-size: 150px 150px, 150px 150px, 100px 100px, 100% 100%, 100% 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.35;
}

/* Variant 3 - Network/constellation pattern */
.dt-bg--variant-3 {
    background-color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.dt-bg--variant-3::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Base gradient */
        linear-gradient(180deg, var(--brand-blue-light) 0%, rgba(255, 255, 255, 1) 70%);
    z-index: 0;
    pointer-events: none;
}

.dt-bg--variant-3::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        /* Network dots - scattered */
        radial-gradient(circle at 25% 35%, var(--brand-blue-dots) 1.5px, transparent 1.5px),
        radial-gradient(circle at 75% 65%, var(--brand-blue-dots) 1.5px, transparent 1.5px),
        radial-gradient(circle at 45% 15%, var(--brand-blue-dots) 1px, transparent 1px),
        radial-gradient(circle at 90% 40%, var(--brand-blue-dots) 1px, transparent 1px),
        radial-gradient(circle at 10% 80%, var(--brand-blue-dots) 1.5px, transparent 1.5px),
        /* Connecting lines - diagonal */
        repeating-linear-gradient(135deg,
            transparent,
            transparent 80px,
            var(--brand-blue-subtle) 80px,
            var(--brand-blue-subtle) 81px);
    background-size: 200px 200px, 180px 180px, 150px 150px, 160px 160px, 170px 170px, 100% 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.4;
}

/* Ensure content stays above background layers */
.dt-bg>*,
.dt-bg--variant-1>*,
.dt-bg--variant-2>*,
.dt-bg--variant-3>* {
    position: relative;
    z-index: 1;
}

/* Corporate Values Cards Section */
.corp-values-section {
    padding: 4rem 2rem;
    background: #fff;
}

.corp-cards {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.corp-card {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.corp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.corp-card-header:not(footer .corp-card-header) {
    background: var(--theme-blue);
    color: #fff;
    padding: 1.2rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.corp-card-body {
    padding: 1.8rem 1.6rem;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.6;
    flex: 1;
}

@media (max-width: 992px) {
    .corp-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .corp-values-section {
        padding: 3rem 1rem;
    }

    .corp-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .corp-card-header {
        padding: 1rem 1.2rem;
        font-size: 1rem;
    }

    .corp-card-body {
        padding: 1.5rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* Hero Images - Remove all borders completely */
.service-hero__media img,
.finance-hero__media img,
.health-hero__media img,
.sports-hero__media img,
.realestate-hero__media img,
.education-hero__media img,
.ecommerce-hero__media img {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.service-hero__media,
.finance-hero__media,
.health-hero__media,
.sports-hero__media,
.realestate-hero__media,
.education-hero__media,
.ecommerce-hero__media {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: 0 !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
}

.service-hero__media::before,
.service-hero__media::after,
.finance-hero__media::before,
.finance-hero__media::after,
.health-hero__media::before,
.health-hero__media::after,
.sports-hero__media::before,
.sports-hero__media::after,
.realestate-hero__media::before,
.realestate-hero__media::after,
.education-hero__media::before,
.education-hero__media::after,
.ecommerce-hero__media::before,
.ecommerce-hero__media::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

.service-hero__grid,
.finance-hero__grid,
.health-hero__grid,
.sports-hero__grid,
.realestate-hero__grid,
.education-hero__grid,
.ecommerce-hero__grid {
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

.service-hero__grid>*,
.finance-hero__grid>*,
.health-hero__grid>*,
.sports-hero__grid>*,
.realestate-hero__grid>*,
.education-hero__grid>*,
.ecommerce-hero__grid>* {
    border: 0 !important;
    border-right: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

.service-hero__content,
.finance-hero__content,
.health-hero__content,
.sports-hero__content,
.realestate-hero__content,
.education-hero__content,
.ecommerce-hero__content {
    border: 0 !important;
    border-right: 0 !important;
}

.service-hero,
.finance-hero,
.health-hero,
.sports-hero,
.realestate-hero,
.education-hero,
.ecommerce-hero {
    border: 0 !important;
}

.service-hero__inner,
.finance-hero__inner,
.health-hero__inner,
.sports-hero__inner,
.realestate-hero__inner,
.education-hero__inner,
.ecommerce-hero__inner {
    border: 0 !important;
}

/* Force remove any border from all hero elements */
.service-hero *,
.finance-hero *,
.health-hero *,
.sports-hero *,
.realestate-hero *,
.education-hero *,
.ecommerce-hero * {
    border-right: 0 !important;
    border-left: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
}

/* Global header offset - Home hariç tüm sayfalara uygulanır */
/* Global blue color overrides - excluding footer */
h1:not(footer h1),
h2:not(footer h2),
h3:not(footer h3),
h4:not(footer h4),
h5:not(footer h5),
h6:not(footer h6) {
    color: var(--theme-blue);
}

a:not(footer a),
.nav-link:not(footer .nav-link) {
    color: var(--theme-blue);
}

a:not(footer a):hover,
.nav-link:not(footer .nav-link):hover {
    color: var(--theme-blue);
}

.card-title:not(footer .card-title),
.icon:not(footer .icon) {
    color: var(--theme-blue);
}

svg:not(footer svg) path[stroke],
svg:not(footer svg) path[fill] {
    stroke: var(--theme-blue);
    fill: var(--theme-blue);
}

/* Tailwind blue utility class overrides - excluding footer */
.bg-blue-600:not(footer .bg-blue-600),
.bg-blue-700:not(footer .bg-blue-700),
.bg-blue-500:not(footer .bg-blue-500) {
    background-color: var(--theme-blue) !important;
}

.text-blue-600:not(footer .text-blue-600),
.text-blue-700:not(footer .text-blue-700),
.text-blue-500:not(footer .text-blue-500) {
    color: var(--theme-blue) !important;
}

.border-blue-600:not(footer .border-blue-600),
.border-blue-700:not(footer .border-blue-700) {
    border-color: var(--theme-blue) !important;
}

/* Hover states - global overrides (footer excluded via specificity) */
main .hover\:bg-blue-50:hover,
section .hover\:bg-blue-50:hover,
.hover\:bg-blue-600:hover,
.hover\:bg-blue-700:hover {
    background-color: var(--theme-blue) !important;
}

main .hover\:text-blue-600:hover,
section .hover\:text-blue-600:hover,
.hover\:text-blue-700:hover {
    color: var(--theme-blue) !important;
}

main .hover\:border-blue-600:hover,
section .hover\:border-blue-600:hover {
    border-color: var(--theme-blue) !important;
}

main .hover\:shadow-blue-500\/30:hover,
section .hover\:shadow-blue-500\/30:hover,
.hover\:shadow-blue-500\/50:hover {
    box-shadow: 0 10px 40px rgba(14, 31, 64, 0.3) !important;
}

.bg-blue-50:not(footer .bg-blue-50) {
    background-color: rgba(14, 31, 64, 0.05) !important;
}

/* ========================================
   CONTRAST FIX: Koyu mavi arkaplan üzerine beyaz metin/ikon
   ========================================
   Arkaplan koyu mavi (#0E1F40, blue-600, blue-700) olduğunda,
   üzerindeki tüm metin/ikonlar beyaz olmalı.
   NOT: Footer hariç tutulmuştur.
   ======================================== */

/* Mavi arkaplan hover durumlarında metin/ikonlar beyaz olsun (footer hariç) */
a:not(footer a):hover[class*="hover:bg-blue-600"],
a:not(footer a):hover[class*="hover:bg-blue-700"],
button:not(footer button):hover[class*="hover:bg-blue-600"],
button:not(footer button):hover[class*="hover:bg-blue-700"],
.hover\:bg-blue-600:hover:not(footer .hover\:bg-blue-600),
.hover\:bg-blue-700:hover:not(footer .hover\:bg-blue-700),
a.hover\:bg-blue-600:hover:not(footer a),
button.hover\:bg-blue-600:hover:not(footer button),
a.hover\:bg-blue-700:hover:not(footer a),
button.hover\:bg-blue-700:hover:not(footer button) {
    color: #ffffff !important;
}

/* Group hover durumlarında mavi arkaplan varsa metin/ikonlar beyaz (footer hariç) */
.group:hover .group-hover\:bg-blue-600:not(footer .group-hover\:bg-blue-600),
.group:hover .group-hover\:bg-blue-700:not(footer .group-hover\:bg-blue-700),
a.group:hover[class*="hover:bg-blue-600"]:not(footer a),
button.group:hover[class*="hover:bg-blue-600"]:not(footer button),
a.group:hover[class*="hover:bg-blue-700"]:not(footer a),
button.group:hover[class*="hover:bg-blue-700"]:not(footer button) {
    color: #ffffff !important;
}

/* Mavi arkaplan hover durumlarında SVG ikonlar ve path'ler beyaz (footer hariç) */
a:not(footer a):hover[class*="hover:bg-blue-600"] svg,
a:not(footer a):hover[class*="hover:bg-blue-700"] svg,
button:not(footer button):hover[class*="hover:bg-blue-600"] svg,
button:not(footer button):hover[class*="hover:bg-blue-700"] svg,
.hover\:bg-blue-600:hover:not(footer .hover\:bg-blue-600) svg,
.hover\:bg-blue-700:hover:not(footer .hover\:bg-blue-700) svg,
.group:hover .group-hover\:bg-blue-600:not(footer .group-hover\:bg-blue-600) svg,
.group:hover .group-hover\:bg-blue-700:not(footer .group-hover\:bg-blue-700) svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

a:not(footer a):hover[class*="hover:bg-blue-600"] svg path,
a:not(footer a):hover[class*="hover:bg-blue-700"] svg path,
button:not(footer button):hover[class*="hover:bg-blue-600"] svg path,
button:not(footer button):hover[class*="hover:bg-blue-700"] svg path,
.hover\:bg-blue-600:hover:not(footer .hover\:bg-blue-600) svg path,
.hover\:bg-blue-700:hover:not(footer .hover\:bg-blue-700) svg path,
.group:hover .group-hover\:bg-blue-600:not(footer .group-hover\:bg-blue-600) svg path,
.group:hover .group-hover\:bg-blue-700:not(footer .group-hover\:bg-blue-700) svg path {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Theme blue (#0E1F40) arkaplan hover durumları (footer hariç) */
a:not(footer a):hover[style*="background: var(--theme-blue)"],
a:not(footer a):hover[style*="background-color: var(--theme-blue)"],
a:not(footer a):hover[style*="background: #0E1F40"],
a:not(footer a):hover[style*="background-color: #0E1F40"],
button:not(footer button):hover[style*="background: var(--theme-blue)"],
button:not(footer button):hover[style*="background-color: var(--theme-blue)"],
button:not(footer button):hover[style*="background: #0E1F40"],
button:not(footer button):hover[style*="background-color: #0E1F40"] {
    color: #ffffff !important;
}

a:not(footer a):hover[style*="background: var(--theme-blue)"] svg,
a:not(footer a):hover[style*="background-color: var(--theme-blue)"] svg,
a:not(footer a):hover[style*="background: #0E1F40"] svg,
a:not(footer a):hover[style*="background-color: #0E1F40"] svg,
button:not(footer button):hover[style*="background: var(--theme-blue)"] svg,
button:not(footer button):hover[style*="background-color: var(--theme-blue)"] svg,
button:not(footer button):hover[style*="background: #0E1F40"] svg,
button:not(footer button):hover[style*="background-color: #0E1F40"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Card/container hover durumları - mavi arkaplan varsa içerik beyaz (footer hariç) */
a:not(footer a):hover[class*="hover:bg-blue-600"] *,
a:not(footer a):hover[class*="hover:bg-blue-700"] *,
button:not(footer button):hover[class*="hover:bg-blue-600"] *,
button:not(footer button):hover[class*="hover:bg-blue-700"] *,
.hover\:bg-blue-600:hover:not(footer .hover\:bg-blue-600) *,
.hover\:bg-blue-700:hover:not(footer .hover\:bg-blue-700) * {
    color: #ffffff !important;
}

/* Özel: hover:bg-blue-600 veya hover:bg-blue-700 olan elementlerdeki tüm metinler (footer hariç) */
[class*="hover:bg-blue-600"]:hover:not(footer [class*="hover:bg-blue-600"]),
[class*="hover:bg-blue-700"]:hover:not(footer [class*="hover:bg-blue-700"]) {
    color: #ffffff !important;
}

[class*="hover:bg-blue-600"]:hover:not(footer [class*="hover:bg-blue-600"]) *,
[class*="hover:bg-blue-700"]:hover:not(footer [class*="hover:bg-blue-700"]) * {
    color: #ffffff !important;
}

[class*="hover:bg-blue-600"]:hover:not(footer [class*="hover:bg-blue-600"]) svg,
[class*="hover:bg-blue-700"]:hover:not(footer [class*="hover:bg-blue-700"]) svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Parent element hover:bg-blue-600/700 olduğunda, child'lardaki group-hover:text-blue-600'ü override et */
[class*="hover:bg-blue-600"]:hover:not(footer [class*="hover:bg-blue-600"]) .group-hover\:text-blue-600,
[class*="hover:bg-blue-700"]:hover:not(footer [class*="hover:bg-blue-700"]) .group-hover\:text-blue-600,
[class*="hover:bg-blue-600"]:hover:not(footer [class*="hover:bg-blue-600"]) [class*="group-hover:text-blue"],
[class*="hover:bg-blue-700"]:hover:not(footer [class*="hover:bg-blue-700"]) [class*="group-hover:text-blue"],
a:hover[class*="hover:bg-blue-600"] .group-hover\:text-blue-600,
a:hover[class*="hover:bg-blue-700"] .group-hover\:text-blue-600,
a:hover[class*="hover:bg-blue-600"] [class*="group-hover:text-blue"],
a:hover[class*="hover:bg-blue-700"] [class*="group-hover:text-blue"] {
    color: #ffffff !important;
}

/* Parent element hover:bg-blue-600/700 olduğunda, child'lardaki tüm metinler beyaz */
.group:hover[class*="hover:bg-blue-600"] *,
.group:hover[class*="hover:bg-blue-700"] *,
a.group:hover[class*="hover:bg-blue-600"] *,
a.group:hover[class*="hover:bg-blue-700"] *,
a:hover[class*="hover:bg-blue-600"] *,
a:hover[class*="hover:bg-blue-700"] * {
    color: #ffffff !important;
}

.group:hover[class*="hover:bg-blue-600"] svg,
.group:hover[class*="hover:bg-blue-700"] svg,
a.group:hover[class*="hover:bg-blue-600"] svg,
a.group:hover[class*="hover:bg-blue-700"] svg,
a:hover[class*="hover:bg-blue-600"] svg,
a:hover[class*="hover:bg-blue-700"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

.group:hover[class*="hover:bg-blue-600"] svg path,
.group:hover[class*="hover:bg-blue-700"] svg path,
a.group:hover[class*="hover:bg-blue-600"] svg path,
a.group:hover[class*="hover:bg-blue-700"] svg path,
a:hover[class*="hover:bg-blue-600"] svg path,
a:hover[class*="hover:bg-blue-700"] svg path {
    stroke: #ffffff !important;
    fill: #ffffff !important;
}

/* Main content wrapper - dynamic padding based on top strip visibility */
main.main-content-wrapper,
main {
    padding-top: calc(var(--topbar-height) + var(--navbar-h));
}

/* When top strip is hidden, reduce padding */
body.top-strip-hidden main.main-content-wrapper,
body.top-strip-hidden main {
    padding-top: var(--navbar-h);
}

/* Remove any top margin on first child that would create double spacing */
main>*:first-child {
    margin-top: 0 !important;
}

/* Ensure home wrapper and its first child have no top spacing */
.home-wrapper.page-home,
.page-home,
.home-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.home-wrapper.page-home>*:first-child,
.page-home>*:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Header/Navbar solid background override - must match footer exactly */
header,
header[class*="bg-transparent"],
header[class*="bg-white"],
header.bg-transparent,
header.bg-white\/95,
header.bg-white,
header.site-header,
header.main-header,
.navbar:not(footer .navbar),
.top-nav:not(footer .top-nav) {
    background-color: #0f172a !important;
    /* slate-950 - footer color */
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    animation: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
}

/* Remove any border-bottom that creates a visual gap */
header:not(footer header),
.site-header:not(footer .site-header),
.navbar:not(footer .navbar) {
    border-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Remove any scroll-based background changes */
header.scrolled,
header.scrolled[class*="bg-white"],
header.scrolled.bg-white\/95,
header.scrolled.bg-transparent {
    background-color: #0f172a !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}

/* Override Tailwind utility classes on header */
header[class*="bg-"],
header .bg-transparent,
header .bg-white\/95,
header .backdrop-blur-md {
    background-color: #0f172a !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Non-home pages get top padding, but hero sections should have zero */
main>*:first-child:not(.page-home):not(.hero-landing):not(.slider-container):not(section.hero-landing) {
    padding-top: 4rem;
    /* 64px */
}

@media (min-width: 768px) {
    main>*:first-child:not(.page-home):not(.hero-landing):not(.slider-container):not(section.hero-landing) {
        padding-top: 5rem;
        /* 80px */
    }
}

@media (min-width: 1024px) {
    main>*:first-child:not(.page-home):not(.hero-landing):not(.slider-container):not(section.hero-landing) {
        padding-top: 6rem;
        /* 96px */
    }
}

/* Home sayfası hero slider'ı sayfanın en üstüne yapıştır */
.page-home,
.home-wrapper.page-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.page-home>div:first-child,
.home-wrapper.page-home>div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero/Slider zero gap with header - Global rules */
.hero-landing,
section.hero-landing,
.slider-container,
.home-wrapper .hero-landing,
.page-home .hero-landing,
.page-home .slider-container,
.home-wrapper.page-home .hero-landing,
.home-wrapper.page-home .slider-container,
section.hero-landing,
.page-home section.hero-landing,
.home-wrapper.page-home section.hero-landing,
main>.hero-landing:first-child,
main>section.hero-landing:first-child,
main>.slider-container:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: 0 !important;
}

/* Ensure any wrapper divs around hero don't add spacing */
main>div:first-child>.hero-landing,
main>div:first-child>section.hero-landing,
main>div:first-child>.slider-container,
.home-wrapper>div:first-child>.hero-landing,
.home-wrapper>div:first-child,
.home-wrapper.page-home>div:first-child,
.page-home>div:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important;
    border-top: 0 !important;
}

main .page-home,
main .home-wrapper.page-home {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Override global main padding for home page to ensure it starts at the very top */
main.page-home-main {
    padding-top: 0 !important;
}

/* ========================================
   SUBPAGE HERO LAYOUT
   Shared standard for Solutions & Services detail pages
   Professional, dense, visually full design
   ======================================== */

.subpage-hero {
    padding: clamp(2.5rem, 5vh, 3.5rem) 0;
}

.subpage-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    min-height: clamp(280px, 45vh, 400px);
}

/* Desktop: Text LEFT (smaller), Image RIGHT (larger, visually strong) */
@media (min-width: 1024px) {
    .subpage-hero-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
        min-height: clamp(320px, 50vh, 450px);
    }
}

/* Text content area - ensures proper width, not thin */
.subpage-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    min-width: 0;
    /* Prevents overflow in grid */
}

/* Ensure text block doesn't look narrow - add max-width for readability */
.subpage-hero-content h1 {
    max-width: 100%;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

.subpage-hero-content p {
    max-width: 100%;
    line-height: 1.75;
    font-size: 1.25rem;
    color: #475569;
}

/* Image media area - larger, visually strong, anchored right */
.subpage-hero-media {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    /* Crop the scaled image */
}

.subpage-hero-media img,
.subpage-hero-media picture {
    max-width: 100%;
    width: 100%;
    height: auto;
    display: block;
    max-height: clamp(400px, 65vh, 550px);
    object-fit: contain;
    object-position: left center;
    transform: scale(1.08);
    /* Enlarge to hide borders */
    transform-origin: center center;
}

/* Force remove any borders from subpage hero media and images */
.subpage-hero-media,
.subpage-hero-media *,
.solution-hero-media,
.solution-hero-media * {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Mobile: Stack layout, dense spacing */
@media (max-width: 1023px) {
    .subpage-hero {
        padding: clamp(2rem, 4vh, 2.75rem) 0;
    }

    .subpage-hero-grid {
        grid-template-columns: minmax(0, 1fr);
        min-height: auto;
        gap: 2rem;
    }

    .subpage-hero-content p {
        max-width: 100%;
    }

    .subpage-hero-media img,
    .subpage-hero-media picture {
        max-height: clamp(280px, 50vh, 380px);
    }
}

/* Solution-specific hero styles - wider text, image shifted left */
@media (min-width: 1024px) {
    .solution-hero-grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }

    .solution-hero-content {
        max-width: 100%;
        padding-right: 0;
    }

    .solution-hero-content p {
        max-width: 100%;
        line-height: 1.8;
    }

    .solution-hero-media {
        justify-content: flex-start;
    }

    .solution-hero-media img {
        object-position: left center;
        max-width: 100%;
    }
}

/* ========================================
   UNIFIED CARD LAYOUT SYSTEM
   Design System Standard for Solutions & Services Detail Pages
   ======================================== */

/* Primary Grid Container */
.subpage-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

/* Tablet and Desktop: 2-column grid */
@media (min-width: 1024px) {
    .subpage-content-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

/* Card Base Styles - Ensures flex column layout internally */
.subpage-content-grid .subpage-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    overflow: hidden;
    border: 1px solid rgb(241 245 249);
    padding: 2rem;
}

.subpage-content-grid .subpage-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
}

/* Card Content - Flex-grow ensures content stretches */
.subpage-content-grid .subpage-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Row Spanning for Asymmetric Layouts (2+1 pattern) */
@media (min-width: 1024px) {
    .subpage-content-grid .subpage-card-span-2 {
        grid-row: span 2;
    }
}

/* Mobile: Remove row spanning, cards flow naturally */
@media (max-width: 1023px) {
    .subpage-content-grid .subpage-card-span-2 {
        grid-row: span 1;
    }

    .subpage-content-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   PRODUCT DETAIL PAGES SHARED LAYOUT
   ======================================== */
.product-detail-page .product-section {
    padding: 96px 0;
}

.product-detail-page .product-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}

.product-detail-page .section-header {
    text-align: left;
    max-width: 800px;
    margin-bottom: 64px;
}

.product-detail-page .section-header h2 {
    font-size: 2.75rem;
    line-height: 1.2;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1.5rem;
    text-align: left !important;
}

.product-detail-page .section-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
    text-align: left !important;
}

.product-detail-page .section-header p {
    font-size: 1.25rem;
    line-height: 1.75;
    color: #475569;
    font-weight: 400;
    text-align: left !important;
    max-width: 720px;
}

.product-detail-page .section-grid {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    .product-detail-page .section-grid {
        grid-template-columns: 1fr;
    }

    .product-detail-page .section-header {
        max-width: 100%;
    }
}