/* Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Phosphor Icons */
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/fill/style.css');

/* ========================
   1. CSS VARIABLES (:root)
   ======================== */
:root {
    /* Renkler */
    --color-primary: #4170A2;
    --color-primary-dark: #26466D;
    --color-primary-light: #73B5E0;
    --color-gray-900: #1A2130;
    --color-gray-600: #4A5568;
    --color-gray-200: #E2E8F0;
    --color-gray-50: #F8FAFC;
    --color-white: #FFFFFF;
    --color-white-65: rgba(255, 255, 255, 0.65);

    /* Tipografi - Font Ailesi ve Boyutlar */
    --font-family: 'Inter', sans-serif;

    --font-size-h1: 48px;
    --font-size-h2: 36px;
    --font-size-h3: 24px;
    --font-size-h4: 18px;
    --font-size-body: 16px;
    --font-size-small: 14px;

    /* Tipografi - Line Height (Satır Yüksekliği) */
    --line-height-h1: 1.1;
    --line-height-h2: 1.15;
    --line-height-h3: 1.2;
    --line-height-h4: 1.3;
    --line-height-body: 1.6;
    --line-height-small: 1.5;

    /* Tipografi - Font Weight (Kalınlık) */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing (Boşluklar) */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-16: 16px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-48: 48px;
    --spacing-64: 64px;
    --spacing-72: 72px;
    --spacing-96: 96px;

    /* Buton ve Kart Özel Boşlukları / Border Değerleri */
    --btn-padding-y: 10px;
    --btn-padding-x: 22px;
    --border-width-btn: 1.5px;
    --border-width-card: 1px;
    --card-padding: var(--spacing-24);
    --section-padding: var(--spacing-64);

    /* Radius (Köşe Yuvarlama) */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Shadows (Gölgeler) */
    --shadow-sm: 0 1px 3px rgba(26, 33, 48, 0.08);
    --shadow-md: 0 2px 8px rgba(38, 70, 109, 0.10);
    --shadow-lg: 0 4px 16px rgba(38, 70, 109, 0.14);

    /* Etkileşimler */
    --opacity-disabled: 0.35;
}

/* ========================
   2. RESET & BASE
   ======================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-gray-50);
    color: var(--color-gray-900);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    font-weight: var(--font-weight-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ========================
   3. TİPOGRAFİ
   ======================== */
h1,
h2,
h3,
h4 {
    color: var(--color-gray-900);
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h1);
    margin-bottom: var(--spacing-24);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-h2);
    margin-bottom: var(--spacing-24);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h3);
    margin-bottom: var(--spacing-16);
}

h4 {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-h4);
    margin-bottom: var(--spacing-16);
}

p {
    color: var(--color-gray-600);
    margin-bottom: var(--spacing-16);
}

small,
.text-small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--color-gray-600);
}

/* ========================
   4. LAYOUT & GRID
   ======================== */
.section {
    padding: var(--section-padding) 0;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-24);
}

/* ========================
   5. COMPONENTS
   ======================== */
/* Navigasyon (Ön Hazırlık) */
.pt-navbar {
    padding-top: var(--spacing-96);
}


.navbar {
    background-color: var(--color-white);
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right,
            transparent 0%,
            #73B5E0 30%,
            #4170A2 50%,
            #26466D 80%,
            transparent 100%) 1;
    padding: var(--spacing-16) 0;
}

.nav-brand {
    text-decoration: none;
    transition: transform 0.3s ease;
}

.nav-brand:hover {
    transform: scale(1.05);
}

.nav-logo {
    height: var(--spacing-64);
    width: auto;
    object-fit: contain;
    margin: 0;
}

/* Ana Navigasyon */
.nav-left,
.nav-right {
    flex: 1;
    display: flex;
    align-items: center;
}

.nav-right {
    justify-content: flex-end;
}

.nav-center {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
}

/* Menü Öğeleri */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-8) 0;
    transition: color 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.nav-link:hover {
    color: var(--color-primary);
}

/* Hover Bridge */
.dropdown-bridge {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: var(--spacing-16);
    background: transparent;
    display: none;
    z-index: 40;
}

.nav-item.group:hover .dropdown-bridge {
    display: block;
}

/* Dropdown */
.dropdown-menu {
    position: absolute;
    top: calc(100% + var(--spacing-16));
    left: 0;
    min-width: 160px;
    background-color: var(--color-white);
    border: var(--border-width-card) solid var(--color-gray-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(var(--spacing-8) * -1));
    transition: all 0.3s ease;
    z-index: 50;
    padding: var(--spacing-8) 0;
}


.nav-item.group:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: block;
    padding: var(--spacing-8) var(--spacing-16);
    color: var(--color-gray-900);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.dropdown-item:hover {
    background-color: var(--color-gray-50);
    color: var(--color-primary);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}


.lang-switcher {
    padding: var(--spacing-8) var(--spacing-16);
    color: var(--color-gray-900);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    user-select: none;
    transition: background-color 0.2s ease;
}

.lang-switcher:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
}


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
    border: var(--border-width-btn) solid transparent;
}

.btn:disabled,
.btn[disabled],
.btn.disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

.btn-primary {
    /* Gradyanı 3 renkli ve geniş tanımlıyoruz */
    background: linear-gradient(135deg, #73B5E0 0%, #4170A2 50%, #26466D 100%);
    background-size: 200% auto;
    background-position: left center;
    color: var(--color-white);
    border: none;
    /* Dikdörtgenleşme sorununa yol açan kenarlık çakışmasını önler */
    transition: background-position 0.5s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(38, 70, 109, 0.15);
}

.btn-primary:hover {
    background-position: right center;
    /* Gradyanı kaydırarak yumuşak geçiş sağlar */
    color: var(--color-white);
    box-shadow: 0 6px 18px rgba(38, 70, 109, 0.25);
    transform: translateY(-1px);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Kartlar */
.card {
    background-color: var(--color-white);
    border: var(--border-width-card) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--card-padding);
    transition: box-shadow 0.3s ease;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}

/* Badges (Etiketler) */
.badge {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-primary-light);
    color: var(--color-white);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

/* ========================
   6. UTILITIES
   ======================== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-primary {
    color: var(--color-primary);
}

.mb-8 {
    margin-bottom: var(--spacing-8);
}

.mb-16 {
    margin-bottom: var(--spacing-16);
}

.mb-24 {
    margin-bottom: var(--spacing-24);
}

.mb-32 {
    margin-bottom: var(--spacing-32);
}

.mb-48 {
    margin-bottom: var(--spacing-48);
}

.mb-64 {
    margin-bottom: var(--spacing-64);
}

.mt-8 {
    margin-top: var(--spacing-8);
}

.mt-16 {
    margin-top: var(--spacing-16);
}

.mt-24 {
    margin-top: var(--spacing-24);
}

.mt-32 {
    margin-top: var(--spacing-32);
}

.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.align-items-center {
    align-items: center;
}

.align-items-stretch {
    align-items: stretch !important;
}

.justify-content-center {
    justify-content: center;
}

.justify-content-between {
    justify-content: space-between;
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-16 {
    gap: var(--spacing-16);
}

.gap-24 {
    gap: var(--spacing-24);
}

.gap-32 {
    gap: var(--spacing-32);
}

.gap-48 {
    gap: var(--spacing-48);
}

/* ========================
   6.5 GÖRSEL EFEKTLERİ (IMAGE WRAPPERS)
   ======================== */
.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}

.image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(30%) brightness(0.85);
    transition: filter 0.5s ease;
}

.image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(65, 112, 162, 0.15);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.image-wrapper.no-effect img {
    filter: none;
}

.image-wrapper.no-effect::after {
    display: none;
}

/* .image-wrapper:hover img {
    filter: grayscale(0%) brightness(1);
} */

/* ========================
   7. HERO SECTION (ANA SAYFA GİRİŞ)
   ======================== */
.hero {
    position: relative;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary-dark);
}

.hero-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--color-gray-900), transparent);
    z-index: 1;
}

.hero-scale-wrapper {
    transform: scale(0.9);
    transform-origin: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
}

.hero-main-row {
    flex-direction: column;
}

@media (max-width: 991px) {
    .hero-main-row {
        justify-content: center !important;
    }
}

@media (min-width: 992px) {
    .hero-main-row {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: var(--spacing-24);
    }
}

.hero-text-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

@media (min-width: 992px) {
    .hero-text-col {
        margin: 0;
        align-items: flex-start;
    }
}

.hero-subtitle {
    color: var(--color-primary-light);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.hero-title {
    color: var(--color-white);
    font-family: var(--font-family);
    margin: 0;
}

.hero-tags {
    color: var(--color-primary-light);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-h3);
    white-space: nowrap;
    width: 100%;
}

.hero-desc {
    color: var(--color-gray-200);
    text-align: justify;
    text-align-last: left;
    width: 100%;
}

/* Yüzen Kartlar */
.hero-visuals {
    display: none;
}

@media (min-width: 992px) {
    .hero-visuals {
        display: block;
        margin-left: auto;
        transform: translateY(var(--spacing-64));
    }
}

.floating-card {
    background-color: transparent;
    padding: var(--spacing-8);
    border-radius: var(--radius-xl);
    border: var(--border-width-card) solid var(--color-gray-200);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    animation: float 6s ease-in-out infinite;
    width: max-content;
    margin-left: auto;
    margin-bottom: var(--spacing-16);
}

.floating-card:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-lg);
}

.floating-card-img {
    height: auto;
    width: 160px;
    border-radius: var(--radius-md);
}

.delay-1 {
    animation-delay: 0.2s;
}

.delay-2 {
    animation-delay: 0.4s;
}

.delay-3 {
    animation-delay: 0.6s;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(calc(var(--spacing-16) * -1));
    }

    100% {
        transform: translateY(0);
    }
}

/* Partner Logoları */
.hero-partners {
    width: 100%;
    margin: 0 auto;
    max-width: 800px;
}

.partner-card {
    background-color: transparent;
    border: var(--border-width-card) solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-16);
    transition: background-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.partner-card:hover {
    background-color: var(--color-primary-dark);
}

.partner-img {
    height: var(--spacing-64);
    width: auto;
    margin: 0 auto;
    filter: brightness(0) invert(1);
    object-fit: contain;
}

.partner-label {
    color: var(--color-primary-light);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
}

/* Utilities */
.position-relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.z-0 {
    z-index: 0;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

.m-0 {
    margin: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.pb-24 {
    padding-bottom: var(--spacing-24);
}

.pt-96 {
    padding-top: var(--spacing-96);
}

/* ========================
   8. UZMANLIK ALANLARI (EXPERTISE SECTION)
   ======================== */

/* Açık renk arka planlı bölüm (Global utility olarak da kullanılabilir) */
.bg-light {
    background-color: var(--color-gray-50);
}

/* Bölüm Başlığı Yapısı */
.section-header {
    text-align: center;
    margin-bottom: var(--spacing-64);
}

.section-badge {
    display: inline-block;
    background-color: var(--color-primary-light);
    color: var(--color-white);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--spacing-16);
}

.section-desc {
    color: var(--color-gray-600);
    font-size: var(--font-size-h4);
    max-width: 800px;
    margin: 0 auto;
    line-height: var(--line-height-body);
}

/* Başlık Altı Noktalar (Görsel Zenginlik) */
.dots-wrapper {
    display: flex;
    justify-content: center;
    gap: var(--spacing-8);
    margin-top: var(--spacing-24);
}

.dot {
    width: var(--spacing-8);
    height: var(--spacing-8);
    background-color: var(--color-primary);
    border-radius: 50%;
    opacity: 0.3;
}

.dot:nth-child(2) {
    opacity: 0.6;
}

.dot:nth-child(3) {
    opacity: 1;
}

/* Kart Izgarası (Grid) */
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-32);
}

/* Uzmanlık Kartı */
.expertise-card {
    background-color: var(--color-white);
    border: var(--border-width-card) solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--spacing-32);
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    cursor: pointer;
}

.expertise-card:hover {
    border-color: var(--color-primary-light);
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(-1 * var(--spacing-8)));
}

/* Kart Üst Kısım (Numara ve İkon) */
.expertise-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--spacing-24);
}

.expertise-number {
    width: var(--spacing-48);
    height: var(--spacing-48);
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-bold);
}

.expertise-icon {
    width: var(--spacing-64);
    height: var(--spacing-64);
    background-color: var(--color-gray-50);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.expertise-icon img {
    width: var(--spacing-64);
    height: auto;
    object-fit: contain;
}

/* Kart Metinleri */
.expertise-title {
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-16);
    transition: color 0.3s ease;
}

.expertise-card:hover .expertise-title {
    color: var(--color-primary);
}

.expertise-text {
    color: var(--color-gray-600);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-24);
}

/* Detayları Gör Linki */
.expertise-link {
    margin-top: auto;
    /* Metinler kısa kalsa bile butonu en alta iter */
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
    opacity: 0;
    transform: translateX(calc(-1 * var(--spacing-8)));
    transition: all 0.3s ease;
}

.expertise-card:hover .expertise-link {
    opacity: 1;
    transform: translateX(0);
}

/* ========================
   9. FOOTER (ALT BİLGİ ALANI)
   ======================== */
.footer {
    background: #1e3a5f;
    padding: var(--spacing-32) 0 0 0;
    color: var(--color-white);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--spacing-32);
    margin-bottom: var(--spacing-32);
}

@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Footer İçerikleri */
.footer-logo {
    height: var(--spacing-64);
    width: auto;
    object-fit: contain;
    margin-bottom: var(--spacing-16);
}

.footer-desc {
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-16);
    text-align: justify;
    padding-right: var(--spacing-24);
    color: var(--color-white-65);
}

.footer-heading {
    color: var(--color-white);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-16);
    position: relative;
    padding-bottom: var(--spacing-8);
}

.footer-heading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--spacing-32);
    height: 2px;
    background-color: var(--color-primary-light);
}

/* Sertifikalar ve Sosyal Medya */
.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-8);
    margin-bottom: var(--spacing-16);
}

.footer-badge {
    background-color: var(--color-gray-900);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-8) var(--spacing-16);
    border-radius: var(--radius-md);
    font-size: var(--font-size-small);
    color: var(--color-white);
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.footer-badge i {
    color: var(--color-primary-light);
}

.footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-16);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white-65) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 32px;
}

.social-link:hover {
    color: var(--color-primary-light) !important;
    transform: translateY(-5px);
}

.social-link.dark {
    color: var(--color-gray-400) !important;
}

.social-link.dark:hover {
    color: var(--color-primary) !important;
}

.social-link.branded:hover {
    color: var(--color-white) !important;
    border-radius: var(--radius-md);
}

.social-link.branded.linkedin:hover {
    background-color: #0077b5;
}

.social-link.branded.twitter:hover {
    background-color: #000000;
}

.social-link.branded.instagram:hover {
    background-color: #e4405f;
}

.social-link.branded.youtube:hover {
    background-color: #cd201f;
}

.social-link.branded.facebook:hover {
    background-color: #1877f2;
}

/* Liste Linkleri */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-8);
}

.footer-links a {
    color: var(--color-white);
    text-decoration: none;
    font-size: var(--font-size-body);
    transition: color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.footer-links a i {
    width: var(--spacing-16);
    text-align: center;
    font-size: var(--font-size-small);
}

.footer-links a:hover {
    color: var(--color-primary-light);
    transform: translateX(var(--spacing-8));
}

/* İletişim Bilgileri */
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-8) var(--spacing-16);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: border-color 0.3s ease;
}

.footer-contact-item:hover {
    border-color: var(--color-primary-light);
}

.footer-contact-item>i {
    color: var(--color-primary-light);
    font-size: var(--font-size-h4);
    margin-top: 2px;
    width: var(--spacing-24);
    text-align: center;
}

.footer-contact-title {
    color: var(--color-white);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-4);
}

.footer-contact-text {
    font-size: var(--font-size-small);
    line-height: var(--line-height-body);
    color: var(--color-white);
}

.footer-contact-text a {
    color: var(--color-white);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-contact-text a:hover {
    color: var(--color-primary-light);
}

/* En Alt Bilgi (Copyright Alanı) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: var(--spacing-16) 0;
    background-color: var(--color-gray-900);
    font-size: var(--font-size-small);
    color: var(--color-white-65);
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-16);
}

.footer-bottom-links {
    display: flex;
    gap: var(--spacing-16);
}

.footer-bottom-links a {
    color: var(--color-white-65);
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: var(--color-primary-light);
}


/* ========================
   10. METİN SAYFALARI (KVKK, GİZLİLİK VB.)
   ======================== */
.article-content {
    background-color: var(--color-white);
    padding: var(--spacing-48);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: var(--border-width-card) solid var(--color-gray-200);
}

.article-content p {
    color: var(--color-gray-900);
    /* Metinler okunaklı koyu renk */
    text-align: justify;
    line-height: var(--line-height-body);
}

.article-content h3 {
    color: var(--color-gray-900);
    /* Başlıklar da lacivert değil, siyah/koyu gri */
    margin-top: var(--spacing-32);
    padding-bottom: var(--spacing-8);
    border-bottom: 1px solid var(--color-gray-200);
    font-size: var(--font-size-h3);
}

.article-content ul {
    margin-left: var(--spacing-24);
    margin-bottom: var(--spacing-24);
    color: var(--color-gray-900);
}

.article-content li {
    margin-bottom: var(--spacing-8);
    line-height: var(--line-height-body);
}

.article-content strong {
    font-weight: var(--font-weight-bold);
}

/* ========================
   11. INNER PAGE HERO
   ======================== */
.page-hero {
    background-color: #1e3a5f;
    background-image:
        linear-gradient(135deg, rgba(30, 58, 95, 0.97) 0%, rgba(38, 70, 109, 0.99) 100%),
        radial-gradient(rgba(115, 181, 224, 0.07) 1px, transparent 1px);
    background-size: 100%, 20px 20px;
    padding: var(--spacing-64) 0 var(--spacing-48);
}

.page-hero .breadcrumb {
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--font-size-small);
    display: flex;
    align-items: center;
    gap: var(--spacing-8);
}

.page-hero .breadcrumb a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s;
}

.page-hero .breadcrumb a:hover {
    color: var(--color-white);
}

/* Deneme: Ortalanmış Hero Yapısı */
.page-hero.centered {
    text-align: center;
    padding: var(--spacing-32) 0 var(--spacing-64); /* Üst boşluk azaltıldı */
}

.page-hero.centered .breadcrumb {
    justify-content: flex-start; /* Sola yaslı kalsın */
    margin-bottom: var(--spacing-48); /* Başlıktan uzaklaştırıldı, yukarıda kalsın */
}

.page-hero h1 {
    color: var(--color-white);
    margin-top: var(--spacing-16);
    margin-bottom: 0;
}

.page-hero .hero-sub {
    color: rgba(255, 255, 255, 0.65);
    font-size: var(--font-size-body);
    margin-top: var(--spacing-8);
}

.page-hero .hero-mail-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-8);
    color: var(--color-primary-light);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    padding: var(--spacing-8) var(--spacing-24);
    border-radius: 50px;
    background-color: rgba(115, 181, 224, 0.1);
    border: 1px solid rgba(115, 181, 224, 0.2);
    transition: all 0.3s ease;
    margin-top: var(--spacing-8);
}

.page-hero .hero-mail-link:hover {
    color: var(--color-white);
    background-color: rgba(115, 181, 224, 0.25);
    border-color: var(--color-primary-light);
    box-shadow: 0 0 15px rgba(115, 181, 224, 0.4);
    text-shadow: 0 0 8px rgba(115, 181, 224, 0.8);
}

/* ========================
   12. CONTENT COMPONENTS
   ======================== */
.content-image {
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-md);
}

.content-image img {
    width: 100%;
    display: block;
    filter: grayscale(20%) brightness(0.9);
}

.content-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(65, 112, 162, 0.12);
    mix-blend-mode: multiply;
}

/* Kutu ve İkon Tasarımları */
.icon-box-primary {
    width: 64px;
    height: 64px;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.icon-circle {
    width: 80px;
    height: 80px;
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto var(--spacing-24);
}

.icon-lg {
    font-size: 48px;
    color: var(--color-primary);
    margin-bottom: var(--spacing-24);
    display: block;
}

.icon-md {
    font-size: 32px;
    color: var(--color-primary);
    margin-bottom: var(--spacing-16);
    display: block;
}

.icon-box-gradient {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin: 0 auto var(--spacing-24);
}

/* Grid Yardımcıları */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-48);
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing-32);
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--spacing-32);
}

.grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-64);
}

@media (min-width: 992px) {
    .grid-md-reverse>*:first-child {
        order: 2;
    }

    .grid-md-reverse>*:last-child {
        order: 1;
    }
}

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

.section-accent {
    width: 48px;
    height: 3px;
    background: linear-gradient(to right, #26466D, #73B5E0);
    border-radius: 2px;
    margin: 12px auto 24px;
}

/* ========================
   13. HAKKIMIZDA & EDITORIAL LAYOUT
   ======================== */

/* Spacing Utilities Ekleri (Eksik olanlar) */
.py-96 {
    padding-top: var(--spacing-96);
    padding-bottom: var(--spacing-96);
}

.mt-48 {
    margin-top: var(--spacing-48);
}

/* Grid Gap Varyasyonları */
.gap-64 {
    gap: var(--spacing-64);
}

.gap-48 {
    gap: var(--spacing-48);
}

.gap-32 {
    gap: var(--spacing-32);
}

/* Misyon & Vizyon Alanı Özel Stilleri */
.section-label {
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    text-transform: uppercase;
    display: block;
    margin-bottom: var(--spacing-8);
    font-weight: var(--font-weight-bold);
}

.border-left-primary {
    border-left: 3px solid transparent;
    border-image: linear-gradient(to bottom, #73B5E0, #26466D) 1;
    padding-left: var(--spacing-24);
}

/* Değerlerimiz Alanı Özel Stilleri */
.value-number {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    display: block;
    margin-bottom: 12px;
    /* Tasarım kuralına özel istisna */
}

/* CTA Bölümü Özel Stilleri */
.cta-section {
    background-color: var(--color-gray-50);
    padding: var(--spacing-72) 0;
    text-align: center;
    position: relative;
    border-top: 1px solid var(--color-gray-200);
}

.cta-section h3 {
    color: var(--color-primary);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-16);
}

.cta-section p {
    color: var(--color-gray-600);
    font-size: var(--font-size-body);
    max-width: 600px;
    margin: 0 auto var(--spacing-32);
}

/* Koyu Zemin Uyumlu Secondary Buton (Footer veya Hero gibi yerler için saklıyoruz) */
.btn-secondary-dark {
    border: var(--border-width-btn) solid rgba(255, 255, 255, 0.5);
    color: var(--color-white);
    background-color: transparent;
}

.btn-secondary-dark:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* İkonlu Liste Yapısı (Editorial Layout) */
.icon-list {
    list-style: none;
    padding: 0;
    margin: var(--spacing-24) 0;
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-16);
    color: var(--color-gray-600);
    line-height: var(--line-height-body);
}

.icon-list li i {
    color: var(--color-primary);
    font-size: 20px;
    margin-top: 4px;
    flex-shrink: 0;
}

.text-justify {
    text-align: justify;
}

/* CTA Karanlık Versiyon */
.cta-dark {
    background-color: var(--color-primary-dark) !important;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
}

.cta-dark h3 {
    color: var(--color-white) !important;
}

.cta-dark p {
    color: var(--color-white-65) !important;
}

/* Padding Yardımcıları (96px Sistem Uyumu İçin) */
.py-72 {
    padding-top: var(--spacing-72);
    padding-bottom: var(--spacing-72);
}

.py-64 {
    padding-top: var(--spacing-64);
    padding-bottom: var(--spacing-64);
}

.py-48 {
    padding-top: var(--spacing-48);
    padding-bottom: var(--spacing-48);
}

.pt-48 {
    padding-top: var(--spacing-48);
}

.pb-48 {
    padding-bottom: var(--spacing-48);
}

.pt-96 {
    padding-top: var(--spacing-96);
}

.pb-96 {
    padding-bottom: var(--spacing-96);
}

/* ========================
   14. SEKTÖRLER & TAB NAVIGATION
   ======================== */
.tab-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: var(--spacing-16);
    margin-bottom: var(--spacing-64);
    padding: var(--spacing-32) 0;
    position: sticky;
    top: 80px;
    background-color: var(--color-gray-50);
    backdrop-filter: blur(8px);
    z-index: 30;
    border: none;
}

.tab-btn {
    background-color: var(--color-white);
    border: 1.5px solid var(--color-gray-200);
    padding: var(--spacing-16) var(--spacing-48);
    min-width: 280px;
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-600);
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.tab-btn:hover {
    background-color: var(--color-gray-50);
    border-color: var(--color-gray-600);
    color: var(--color-gray-900);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.tab-btn.active {
    background-color: var(--color-gray-200);
    border-color: var(--color-gray-600);
    color: var(--color-gray-900);
    box-shadow: var(--shadow-sm);
}

.tab-btn.active::after {
    display: none;
}

/* Sektör Kartları (Sector Cards) */
.sector-card {
    position: relative;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.5s ease;
    cursor: pointer;
}

.sector-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.sector-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.sector-card:hover img {
    transform: scale(1.1);
}

.sector-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.3) 60%, transparent 100%);
    opacity: 0.85;
    transition: opacity 0.5s ease;
}

.sector-card:hover .sector-card-overlay {
    opacity: 0.95;
}

.sector-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-32);
    z-index: 2;
}

.sector-card-content h3 {
    color: var(--color-white);
    margin-bottom: var(--spacing-8);
    transform: translateY(var(--spacing-12));
    transition: transform 0.5s ease;
    font-size: var(--font-size-h3);
}

.sector-card:hover .sector-card-content h3 {
    transform: translateY(0);
}

.sector-card-content p {
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-size-small);
    margin: 0;
    opacity: 0;
    transform: translateY(var(--spacing-16));
    transition: all 0.5s ease;
    line-height: 1.4;
}

.sector-card:hover .sector-card-content p {
    opacity: 1;
    transform: translateY(0);
}

.sector-content {
    display: none;
}

.sector-content.active {
    display: block;
    animation: sectorFadeIn 0.6s ease-out forwards;
}

@keyframes sectorFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================
   15. MOBİL UYUMLULUK (RESPONSIVE)
   ======================== */

@media (max-width: 992px) {
    :root {
        --font-size-h1: 40px;
        --font-size-h2: 32px;
        --font-size-h3: 22px;
        --section-padding: var(--spacing-48);
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-h1: 32px;
        --font-size-h2: 28px;
        --section-padding: var(--spacing-32);
    }

    .pt-navbar {
        padding-top: 70px;
    }

    /* Page Hero Responsive */
    .page-hero {
        padding: var(--spacing-64) 0;
        text-align: center;
        min-height: 300px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-hero .container {
        width: 100%;
    }

    .page-hero .breadcrumb {
        justify-content: center;
        margin-bottom: var(--spacing-12);
    }

    .page-hero h1 {
        line-height: 1.2;
    }

    .hero-contact-row {
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-12) !important;
    }

    /* Tab Navigation Responsive */
    .tab-navigation {
        position: relative;
        top: 0;
        padding: var(--spacing-16);
        gap: var(--spacing-16);
        margin-bottom: var(--spacing-32);
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .tab-btn {
        width: auto;
        min-width: 140px;
        padding: var(--spacing-16) var(--spacing-24);
        font-size: var(--font-size-body);
    }

    /* Grid Stacks */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
        gap: var(--spacing-32);
    }

    /* Section Alternating Layouts Fix */
    .grid-2.align-items-center {
        display: flex;
        flex-direction: column;
    }

    .grid-4-mobile-2 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-24) !important;
    }

    /* Ensure image comes after text in alternating layouts on mobile if desired */
    /* .grid-2 > div:first-child { order: 2; } */
    /* Optional */

    .content-image {
        width: 100%;
        margin-top: var(--spacing-16);
    }

    .content-image img {
        width: 100%;
        height: auto;
    }

    /* Sector Cards Responsive */
    .sector-card {
        height: 280px;
    }

    .sector-card-content {
        padding: var(--spacing-24);
    }

    .sector-card-content p {
        opacity: 1;
        transform: translateY(0);
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .pb-96 {
        padding-bottom: var(--spacing-48);
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 var(--spacing-16);
    }

    .page-hero h1 {
        font-size: 28px;
    }

    .btn {
        padding: var(--spacing-16) var(--spacing-32);
        font-size: var(--font-size-body);
    }

    .contact-quick-btns {
        gap: var(--spacing-16) !important;
    }

    .contact-quick-btns .btn {
        flex: 1 1 100px;
        /* Allow smaller buttons to fit side-by-side */
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: var(--spacing-16) var(--spacing-8);
        gap: var(--spacing-8) !important;
        min-height: 90px;
        font-size: 13px;
        /* Slightly smaller text for better fit */
    }

    .contact-quick-btns .btn i {
        font-size: 24px;
        margin: 0;
    }
}

/* CTA ve Diğer Bölüm Paddingleri Mobile Fix */
@media (max-width: 768px) {
    .cta-section {
        padding: var(--spacing-48) 0;
    }

    .py-72 {
        padding-top: var(--spacing-48);
        padding-bottom: var(--spacing-48);
    }

    .py-96 {
        padding-top: var(--spacing-64);
        padding-bottom: var(--spacing-64);
    }
}

/* ========================
   NAVBAR MOBILE & UTILITIES
   ======================== */

.d-none {
    display: none !important;
}

.d-flex {
    display: flex !important;
}

@media (min-width: 768px) {
    .md-flex {
        display: flex !important;
    }

    .md-none {
        display: none !important;
    }

    .md-block {
        display: block !important;
    }
}

.mobile-toggle {
    background: none;
    border: none;
    font-size: 32px;
    color: var(--color-gray-900);
    cursor: pointer;
    padding: var(--spacing-8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobil Menü Overlay */
.mobile-menu {
    position: fixed;
    inset: 0;
    background-color: var(--color-white);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu.active {
    transform: translateX(0);
}

.mobile-menu-header {
    padding: var(--spacing-16) var(--spacing-24);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-gray-200);
}

.mobile-close {
    background: none;
    border: none;
    font-size: 32px;
    color: var(--color-gray-900);
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    padding: var(--spacing-32) var(--spacing-24);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-24);
    overflow-y: auto;
    flex: 1;
}

.mobile-nav-list li a {
    font-size: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    text-decoration: none;
    display: block;
    transition: color 0.2s;
}

.mobile-nav-list li a:hover {
    color: var(--color-primary);
}

.mobile-menu-footer {
    padding: var(--spacing-24);
    border-top: 1px solid var(--color-gray-200);
    background-color: var(--color-gray-50);
}

.mobile-lang {
    display: flex;
    align-items: center;
    gap: var(--spacing-16);
    justify-content: center;
}

.mobile-lang a {
    text-decoration: none;
    color: var(--color-gray-600);
    font-weight: var(--font-weight-semibold);
}

.mobile-lang a.active {
    color: var(--color-primary);
}

.mobile-lang span {
    color: var(--color-gray-200);
}

/* Form Elemanları */
.form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
}

.form-control {
    padding: var(--spacing-16);
    border: var(--border-width-card) solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.form-control:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 112, 162, 0.15);
    background-color: var(--color-white);
}

.file-upload-wrapper {
    padding: var(--spacing-8);
    border: var(--border-width-card) dashed var(--color-gray-200);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.file-upload-wrapper:hover,
.file-upload-wrapper:focus-within {
    border-color: var(--color-primary);
    background-color: rgba(65, 112, 162, 0.03);
}

.file-input {
    opacity: 0;
    cursor: pointer;
}

/* İletişim Sayfası Özel */
.contact-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-32);
}

.contact-info-item {
    display: flex;
    gap: var(--spacing-24);
}

.contact-info-item i {
    font-size: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 4px;
}

.contact-info-title {
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin-bottom: var(--spacing-4);
    font-size: var(--font-size-h4);
}

.contact-info-text {
    color: var(--color-gray-600);
    line-height: var(--line-height-body);
}

.contact-form-wrapper {
    padding: var(--spacing-48);
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.btn-whatsapp {
    background-color: #25D366;
    color: var(--color-white);
    border: none;
}

.btn-whatsapp:hover {
    background-color: #128C7E;
    color: var(--color-white);
}

.map-container {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    line-height: 0;
}

/* Utilities */
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

.text-center {
    text-align: center !important;
}

.d-block {
    display: block !important;
}

.w-100 {
    width: 100% !important;
}

/* Spacing Utilities */
.mt-8 {
    margin-top: 8px !important;
}

.mt-16 {
    margin-top: 16px !important;
}

.mt-24 {
    margin-top: 24px !important;
}

.mt-32 {
    margin-top: 32px !important;
}

.mt-48 {
    margin-top: 48px !important;
}

.mt-64 {
    margin-top: 64px !important;
}

.mt-96 {
    margin-top: 96px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mb-32 {
    margin-bottom: 32px !important;
}

.mb-48 {
    margin-bottom: 48px !important;
}

.mb-64 {
    margin-bottom: 64px !important;
}

.mb-96 {
    margin-bottom: 96px !important;
}

.pt-8 {
    padding-top: 8px !important;
}

.pt-16 {
    padding-top: 16px !important;
}

.pt-24 {
    padding-top: 24px !important;
}

.pt-32 {
    padding-top: 32px !important;
}

.pt-48 {
    padding-top: 48px !important;
}

.pt-64 {
    padding-top: 64px !important;
}

.pt-96 {
    padding-top: 96px !important;
}

.pb-8 {
    padding-bottom: 8px !important;
}

.pb-16 {
    padding-bottom: 16px !important;
}

.pb-24 {
    padding-bottom: 24px !important;
}

.pb-32 {
    padding-bottom: 32px !important;
}

.pb-48 {
    padding-bottom: 48px !important;
}

.pb-64 {
    padding-bottom: 64px !important;
}

.pb-96 {
    padding-bottom: 96px !important;
}

/* Color Utilities */
.text-primary {
    color: var(--color-primary) !important;
}

.text-gray-400 {
    color: var(--color-gray-400) !important;
}

.text-gray-600 {
    color: var(--color-gray-600) !important;
}

.text-gray-900 {
    color: var(--color-gray-900) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-small {
    font-size: var(--font-size-small) !important;
}

.font-semibold {
    font-weight: var(--font-weight-semibold) !important;
}

/* Desktop Navbar Centering */
@media (min-width: 768px) {
    .navbar .container {
        position: relative;
    }

    .nav-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}