/* 
    DOSYA: MultiSiteManager.Web/wwwroot/css/Toku/site.css
==================================================================
TOKU CORPORATE CSS FRAMEWORK v2.0
PROFESYONEL KURUMSAL WEB SİTESİ TASARIMI
==================================================================
🎯 ÖZELLIKLER:
- Modern Professional Design
- Fully Responsive Layout  
- Corporate Color Scheme
- Smooth Animations
- Mobile-First Approach
- Accessibility Features
================================================================== 
*/

/* ===== ROOT VARIABLES ===== */

/* ===== GLOBAL RESET & BASE ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--dark-gray);
    background-color: var(--white);
    overflow-x: hidden;
}

/* Prevent horizontal scroll */
body.mobile-menu-open {
    overflow: hidden;
}

/* ===== MOBILE MENU BUTTON ===== */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-line {
    width: 24px;
    height: 2px;
    background-color: var(--primary-color);
    margin: 3px 0;
    transition: all var(--transition-normal);
    border-radius: 1px;
}

/* Hamburger Animation */
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.3;
    color: var(--black);
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }

p {
    margin-bottom: 1rem;
    color: var(--secondary-color);
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

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



/* ===== LAYOUT CONTAINERS ===== */
.corporate-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.main-content {
    min-height: calc(100vh - var(--navbar-height));
    padding-top: var(--navbar-height);
}


/* ===== BRAND LOGO SECTION ===== */

/* ===== VIDEO HERO SECTION ===== */
.video-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: #000;
}

.video-hero-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.hero-video,
video.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 1;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    z-index: 2;
}

.video-hero-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    text-align: center;
    color: white;
}

.video-content-wrapper {
    max-width: 1200px;
    padding: 0 2rem;
}

.video-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.sustainability-highlight {
    color: #22c55e;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 4px rgba(34, 197, 94, 0.3));
}

.gradient-text-video {
    background: linear-gradient(135deg, #ffffff, #e2e8f0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.video-hero-subtitle {
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.video-hero-actions {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-bottom: 3rem;
    flex-wrap: wrap;
}

.btn-contact-hero, .btn-explore-hero {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.btn-contact-hero {
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: 2px solid rgba(239, 68, 68, 0.5);
}

.btn-contact-hero:hover {
    background: rgba(239, 68, 68, 1);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
    color: white;
}

.btn-explore-hero {
    background: rgba(34, 197, 94, 0.9);
    color: white;
    border: 2px solid rgba(34, 197, 94, 0.5);
}

.btn-explore-hero:hover {
    background: rgba(34, 197, 94, 1);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(34, 197, 94, 0.4);
    color: white;
}

.quick-contact-info {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.contact-item i {
    color: #22c55e;
    font-size: 1.2rem;
}

.scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 3;
    color: white;
}

.scroll-text {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.scroll-arrow {
    animation: bounce 2s infinite;
}

.scroll-arrow i {
    font-size: 1.5rem;
    color: #22c55e;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* 📱 RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .video-hero-section {
        height: 70vh;
        min-height: 500px;
    }
    
    .video-hero-title {
        font-size: 2.5rem;
    }
    
    .video-hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }
    
    .video-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .btn-contact-hero, .btn-explore-hero {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .quick-contact-info {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
    }
}



/* 🎯 PAGE LAYOUT OVERRIDES - FULL WIDTH PAGES */
/* Breadcrumb gizle ve sayfa düzenini tam genişlik yap */
nav[aria-label="breadcrumb"],
.breadcrumb,
.partnership-breadcrumb-section {
    display: none !important;
}

/* Tüm sayfa section'larını navbar'a bitişik başlat */
main.toku-main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Tüm sayfa section'ları tam genişlik */
.partnership-hero-section,
.partnership-types-section,
.partnership-why-section,
.partnership-process-section,
.partnership-benefits-section,
.partnership-testimonials-section,
.partnership-cta-section,
section[class*="hero"],
section[class*="content"],
section[class*="main"] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* İlk section navbar'a bitişik */
.toku-main-content > section:first-child,
.toku-main-content > div:first-child > section:first-child {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* TÜM SAYFA TİPLERİ İÇİN GENEL KURALLAR */
/* Container'ları tam genişlik yap */
.toku-main-content .container,
.toku-main-content .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Grid sistem tam genişlik */
.toku-main-content .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* İçerik padding'leri - her sayfa tipine uygun */
.toku-main-content .col-lg-6,
.toku-main-content .col-lg-4,
.toku-main-content .col-lg-3,
.toku-main-content .col-md-6,
.toku-main-content .col-md-4,
.toku-main-content .col-12 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
}

/* Özel content elementleri */
.toku-main-content [class*="hero-content"],
.toku-main-content [class*="section-header"],
.toku-main-content [class*="card"],
.toku-main-content [class*="content"],
.toku-main-content [class*="item"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* 🎯 NAVBAR BASE STYLES */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}



/* ===========================
   🎯 GLOBAL / HEADER HEIGHT
   =========================== */
/*:root {
    --toku-header-h: 72px;
}*/
/* sticky header yüksekliğini doğru gir */
/**, *::before, *::after {
    box-sizing: border-box;
}*/



/* 🎨 MAIN CONTENT */
.toku-main-content {
    min-height: calc(100vh - 70px);
    padding-top: 40px;
}

/* 🦶 FOOTER */
.toku-footer {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 40px 0 20px;
    margin-top: 60px;
}

.toku-footer-container {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
}

.toku-footer-content {
    text-align: center;
    padding: 20px 0;
}

    .toku-footer-content p {
        margin: 8px 0;
        color: rgba(255, 255, 255, 0.7);
    }

/* 🔼 BACK TO TOP */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
    color: white;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

    .back-to-top-btn.visible {
        opacity: 1;
        visibility: visible;
    }

    .back-to-top-btn:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6);
    }
/* ========================================
    5.2.
   🏢 KARBON AYAK İZİ - PROFESYONEL KURUMSAL TASARIM
   📁 DOSYA: MultiSiteManager.Web/wwwroot/css/Toku/site.css
   ======================================== */

/* Root Variables - Profesyonel Renk Paleti */
.karbon-ayak-izi-page {
    --kai-primary: #0A6847;
    --kai-primary-light: #0F9D68;
    --kai-primary-dark: #064635;
    --kai-accent: #F5A524;
    --kai-dark: #1A1F2E;
    --kai-gray: #2D3748;
    --kai-light: #F7FAFC;
    --kai-white: #FFFFFF;
    --kai-border: #E2E8F0;
    --kai-gradient-primary: linear-gradient(135deg, #0A6847 0%, #0F9D68 100%);
    --kai-gradient-dark: linear-gradient(135deg, #1A1F2E 0%, #2D3748 100%);
    --kai-shadow-sm: 0 2px 8px rgba(10, 104, 71, 0.08);
    --kai-shadow-md: 0 4px 16px rgba(10, 104, 71, 0.12);
    --kai-shadow-lg: 0 8px 32px rgba(10, 104, 71, 0.16);
    --kai-shadow-xl: 0 16px 48px rgba(10, 104, 71, 0.20);
}

    /* ========================================
   SIDEBAR GİZLEME & TAM GENİŞLİK
   ======================================== */

    /* Sidebar'ı tamamen gizle */
    .karbon-ayak-izi-page ~ aside,
    .karbon-ayak-izi-page ~ .sidebar,
    .karbon-ayak-izi-page ~ .right-sidebar,
    .karbon-ayak-izi-page ~ [class*="sidebar"],
    body:has(.karbon-ayak-izi-page) .sidebar,
    body:has(.karbon-ayak-izi-page) aside:not(header aside):not(nav aside),
    body:has(.karbon-ayak-izi-page) .right-sidebar,
    body:has(.karbon-ayak-izi-page) .widget-area {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

/* Main content'i tam genişlik yap */
body:has(.karbon-ayak-izi-page) main,
body:has(.karbon-ayak-izi-page) .main-content,
body:has(.karbon-ayak-izi-page) .content-area,
body:has(.karbon-ayak-izi-page) article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
}

/* Container'ları tam genişlik yap */
body:has(.karbon-ayak-izi-page) .container:has(.karbon-ayak-izi-page),
body:has(.karbon-ayak-izi-page) .container-fluid:has(.karbon-ayak-izi-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid sistemini override et */
body:has(.karbon-ayak-izi-page) .row:has(.karbon-ayak-izi-page) {
    margin: 0 !important;
    width: 100% !important;
}

body:has(.karbon-ayak-izi-page) [class*="col-"]:has(.karbon-ayak-izi-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
}

/* Page wrapper'ı tam genişlik yap */
.karbon-ayak-izi-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--kai-dark);
    line-height: 1.6;
    box-sizing: border-box;
}

    .karbon-ayak-izi-page * {
        box-sizing: border-box;
    }

/* ========================================
   HERO SECTION - Etkileyici Giriş
   ======================================== */
.kai-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--kai-gradient-primary);
    overflow: hidden;
    padding: 120px 0;
    width: 100%;
}

    /* Animated Background Pattern */
    .kai-hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
        animation: kai-bg-shift 20s ease-in-out infinite;
    }

@keyframes kai-bg-shift {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-20px, -20px) scale(1.05);
    }
}

/* Decorative Elements */
.kai-hero-section::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 100px;
    background: var(--kai-white);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}

.kai-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.kai-hero-content {
    max-width: 900px;
    color: var(--kai-white);
}

.kai-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

.kai-hero-title {
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 32px 0;
    letter-spacing: -2px;
}

.kai-hero-subtitle {
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 48px;
    opacity: 0.95;
    font-weight: 400;
}

.kai-hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.kai-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

    .kai-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .kai-btn:hover::before {
        width: 300px;
        height: 300px;
    }

.kai-btn-primary {
    background: var(--kai-white);
    color: var(--kai-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

    .kai-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    }

.kai-btn-outline {
    background: transparent;
    color: var(--kai-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

    .kai-btn-outline:hover {
        border-color: var(--kai-white);
        background: rgba(255, 255, 255, 0.1);
    }

/* ========================================
   STATS SECTION - İstatistikler
   ======================================== */
.kai-stats-section {
    background: var(--kai-gradient-dark);
    padding: 80px 0;
    margin-top: -50px;
    position: relative;
    z-index: 3;
    width: 100%;
}

.kai-stats-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.kai-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
}

.kai-stat-card {
    text-align: center;
    color: var(--kai-white);
}

.kai-stat-number {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    background: linear-gradient(135deg, #0F9D68 0%, #7FE9B6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.kai-stat-label {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* ========================================
   CONTENT SECTIONS - İçerik Bölümleri
   ======================================== */
.kai-section {
    padding: 120px 0;
    position: relative;
    width: 100%;
}

.kai-section-alternate {
    background: var(--kai-light);
}

.kai-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.kai-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.kai-section-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--kai-primary), var(--kai-primary-light));
    color: var(--kai-white);
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.kai-section-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--kai-dark);
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.kai-section-subtitle {
    font-size: 20px;
    color: var(--kai-gray);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   FEATURE CARDS - Özellik Kartları
   ======================================== */
.kai-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.kai-feature-card {
    background: var(--kai-white);
    border-radius: 24px;
    padding: 48px;
    box-shadow: var(--kai-shadow-sm);
    border: 1px solid var(--kai-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .kai-feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--kai-gradient-primary);
        border-radius: 24px 24px 0 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .kai-feature-card:hover {
        transform: translateY(-12px);
        box-shadow: var(--kai-shadow-xl);
        border-color: var(--kai-primary);
    }

        .kai-feature-card:hover::before {
            transform: scaleX(1);
        }

.kai-card-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--kai-primary) 0%, var(--kai-primary-light) 100%);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    box-shadow: 0 8px 24px rgba(10, 104, 71, 0.25);
}

    .kai-card-icon svg {
        width: 40px;
        height: 40px;
        fill: var(--kai-white);
    }

.kai-feature-card h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--kai-dark);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.kai-feature-card p {
    font-size: 16px;
    color: var(--kai-gray);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   TIMELINE / PROCESS - Süreç
   ======================================== */
.kai-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

    .kai-timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(180deg, var(--kai-primary) 0%, var(--kai-primary-light) 100%);
        transform: translateX(-50%);
    }

.kai-timeline-item {
    display: flex;
    margin-bottom: 80px;
    position: relative;
    align-items: center;
}

    .kai-timeline-item:nth-child(odd) {
        flex-direction: row;
    }

    .kai-timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }

.kai-timeline-content {
    flex: 1;
    background: var(--kai-white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--kai-shadow-md);
    margin: 0 40px;
    border: 2px solid var(--kai-border);
    transition: all 0.3s ease;
}

    .kai-timeline-content:hover {
        transform: scale(1.03);
        box-shadow: var(--kai-shadow-xl);
        border-color: var(--kai-primary);
    }

.kai-timeline-step {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: var(--kai-gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--kai-white);
    box-shadow: 0 0 0 10px var(--kai-white), var(--kai-shadow-lg);
    z-index: 2;
}

.kai-timeline-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--kai-dark);
    margin: 0 0 16px 0;
}

.kai-timeline-content p {
    font-size: 16px;
    color: var(--kai-gray);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   SERVICE CARDS - Hizmet Kartları
   ======================================== */
.kai-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.kai-service-card {
    background: var(--kai-white);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: var(--kai-shadow-sm);
    border: 2px solid var(--kai-border);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .kai-service-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--kai-gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }

    .kai-service-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--kai-shadow-xl);
        border-color: var(--kai-primary);
    }

        .kai-service-card:hover::after {
            opacity: 1;
        }

    .kai-service-card > * {
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
    }

    .kai-service-card:hover h4,
    .kai-service-card:hover p {
        color: var(--kai-white);
    }

.kai-service-icon-wrapper {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, var(--kai-primary) 0%, var(--kai-primary-light) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.kai-service-card:hover .kai-service-icon-wrapper {
    background: var(--kai-white);
}

.kai-service-icon-wrapper svg {
    width: 32px;
    height: 32px;
    fill: var(--kai-white);
    transition: fill 0.3s ease;
}

.kai-service-card:hover .kai-service-icon-wrapper svg {
    fill: var(--kai-primary);
}

.kai-service-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--kai-dark);
    margin: 0 0 12px 0;
}

.kai-service-card p {
    font-size: 15px;
    color: var(--kai-gray);
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   BENEFITS SECTION - Faydalar
   ======================================== */
.kai-benefits-section {
    background: var(--kai-gradient-dark);
    color: var(--kai-white);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .kai-benefits-section::before {
        content: '';
        position: absolute;
        top: -200px;
        right: -200px;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(15, 157, 104, 0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

.kai-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 1;
}

.kai-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .kai-benefit-item:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(12px);
        border-color: rgba(255, 255, 255, 0.2);
    }

.kai-benefit-icon-wrapper {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--kai-gradient-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .kai-benefit-icon-wrapper svg {
        width: 28px;
        height: 28px;
        fill: var(--kai-white);
    }

.kai-benefit-content h5 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--kai-white);
}

.kai-benefit-content p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* ========================================
   CTA SECTION - Call to Action
   ======================================== */
.kai-cta-section {
    background: var(--kai-gradient-primary);
    padding: 120px 0;
    text-align: center;
    color: var(--kai-white);
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .kai-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    }

.kai-cta-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.kai-cta-section h2 {
    font-size: 56px;
    font-weight: 800;
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.kai-cta-section p {
    font-size: 22px;
    margin: 0 0 48px 0;
    opacity: 0.95;
    line-height: 1.6;
}

.kai-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */
@media (max-width: 1200px) {
    .kai-hero-title {
        font-size: 56px;
    }

    .kai-section-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .kai-hero-title {
        font-size: 40px;
    }

    .kai-hero-subtitle {
        font-size: 18px;
    }

    .kai-section {
        padding: 80px 0;
    }

    .kai-section-title {
        font-size: 32px;
    }

    .kai-container,
    .kai-hero-container {
        padding: 0 24px;
    }

    .kai-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .kai-timeline::before {
        left: 30px;
    }

    .kai-timeline-item {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .kai-timeline-step {
        left: 30px;
        transform: translateX(0);
    }

    .kai-timeline-content {
        margin-left: 90px;
        margin-right: 0;
    }

    .kai-cta-section h2 {
        font-size: 36px;
    }

    .kai-stat-number {
        font-size: 48px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes kai-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.kai-animate {
    animation: kai-fade-in-up 0.8s ease-out;
}

/* ========================================
    5.3.
   🇹🇷 YERLİ MALI BELGESİ - PROFESYONEL TASARIM
   📁 DOSYA: MultiSiteManager.Web/wwwroot/css/Toku/site.css
   ======================================== */

/* Root Variables - Türk Bayrağı Temalı Renk Paleti */
.yerli-mali-page {
    --ym-primary: #E30A17;
    --ym-primary-light: #FF1E2D;
    --ym-primary-dark: #B80812;
    --ym-accent: #C8102E;
    --ym-dark: #1A1D29;
    --ym-gray: #2D3748;
    --ym-light: #F7F9FC;
    --ym-white: #FFFFFF;
    --ym-gold: #FFD700;
    --ym-border: #E2E8F0;
    --ym-gradient-primary: linear-gradient(135deg, #E30A17 0%, #FF1E2D 100%);
    --ym-gradient-dark: linear-gradient(135deg, #1A1D29 0%, #2D3748 100%);
    --ym-gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    --ym-shadow-sm: 0 2px 8px rgba(227, 10, 23, 0.08);
    --ym-shadow-md: 0 4px 16px rgba(227, 10, 23, 0.12);
    --ym-shadow-lg: 0 8px 32px rgba(227, 10, 23, 0.16);
    --ym-shadow-xl: 0 16px 48px rgba(227, 10, 23, 0.20);
}

    /* ========================================
   🇹🇷 YERLİ MALI - SIDEBAR GİZLEME & TAM GENİŞLİK (GÜNCELLENDİ)
   ======================================== */

    /* Sidebar'ı tamamen gizle */
    .yerli-mali-page ~ aside,
    .yerli-mali-page ~ .sidebar,
    .yerli-mali-page ~ .right-sidebar,
    .yerli-mali-page ~ [class*="sidebar"],
    body:has(.yerli-mali-page) .sidebar,
    body:has(.yerli-mali-page) aside:not(header aside):not(nav aside),
    body:has(.yerli-mali-page) .right-sidebar,
    body:has(.yerli-mali-page) .widget-area {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

/* Main content'i tam genişlik yap */
body:has(.yerli-mali-page) main,
body:has(.yerli-mali-page) .main-content,
body:has(.yerli-mali-page) .content-area,
body:has(.yerli-mali-page) article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
}

/* Container'ları tam genişlik yap */
body:has(.yerli-mali-page) .container:has(.yerli-mali-page),
body:has(.yerli-mali-page) .container-fluid:has(.yerli-mali-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid sistemini override et */
body:has(.yerli-mali-page) .row:has(.yerli-mali-page) {
    margin: 0 !important;
    width: 100% !important;
}

body:has(.yerli-mali-page) [class*="col-"]:has(.yerli-mali-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
}

/* Page wrapper'ı tam genişlik yap */
.yerli-mali-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--ym-dark);
    line-height: 1.6;
    box-sizing: border-box;
}

    .yerli-mali-page * {
        box-sizing: border-box;
    }

/* ========================================
   HERO SECTION
   ======================================== */
.ym-hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: var(--ym-gradient-primary);
    overflow: hidden;
    padding: 120px 0;
    width: 100%;
}

    .ym-hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.05) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.05) 75%);
        background-size: 60px 60px;
        background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
        animation: ym-pattern-move 20s linear infinite;
    }

@keyframes ym-pattern-move {
    0% {
        background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    }

    100% {
        background-position: 60px 60px, 60px 90px, 90px 30px, 30px 60px;
    }
}

.ym-hero-section::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 100px;
    background: var(--ym-white);
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
}

.ym-hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    width: 100%;
}

.ym-hero-content {
    max-width: 900px;
    color: var(--ym-white);
}

.ym-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    padding: 12px 28px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
}

.ym-hero-title {
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 32px 0;
    letter-spacing: -2px;
}

.ym-hero-subtitle {
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 48px;
    opacity: 0.95;
    font-weight: 400;
}

.ym-hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.ym-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

    .ym-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .ym-btn:hover::before {
        width: 300px;
        height: 300px;
    }

.ym-btn-primary {
    background: var(--ym-white);
    color: var(--ym-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

    .ym-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
    }

.ym-btn-outline {
    background: transparent;
    color: var(--ym-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

    .ym-btn-outline:hover {
        border-color: var(--ym-white);
        background: rgba(255, 255, 255, 0.1);
    }

/* ========================================
   STATS SECTION
   ======================================== */
.ym-stats-section {
    background: var(--ym-gradient-dark);
    padding: 80px 0;
    margin-top: -50px;
    position: relative;
    z-index: 3;
    width: 100%;
}

.ym-stats-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.ym-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
}

.ym-stat-card {
    text-align: center;
    color: var(--ym-white);
}

.ym-stat-number {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    background: var(--ym-gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ym-stat-label {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* ========================================
   CONTENT SECTIONS
   ======================================== */
.ym-section {
    padding: 120px 0;
    position: relative;
    width: 100%;
}

.ym-section-alternate {
    background: var(--ym-light);
}

.ym-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.ym-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.ym-section-badge {
    display: inline-block;
    background: var(--ym-gradient-primary);
    color: var(--ym-white);
    padding: 8px 24px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.ym-section-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--ym-dark);
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.ym-section-subtitle {
    font-size: 20px;
    color: var(--ym-gray);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   FEATURE CARDS
   ======================================== */
.ym-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.ym-feature-card {
    background: var(--ym-white);
    border-radius: 24px;
    padding: 48px;
    box-shadow: var(--ym-shadow-sm);
    border: 1px solid var(--ym-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

    .ym-feature-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--ym-gradient-primary);
        border-radius: 24px 24px 0 0;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .ym-feature-card:hover {
        transform: translateY(-12px);
        box-shadow: var(--ym-shadow-xl);
        border-color: var(--ym-primary);
    }

        .ym-feature-card:hover::before {
            transform: scaleX(1);
        }

.ym-card-icon {
    width: 80px;
    height: 80px;
    background: var(--ym-gradient-primary);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    box-shadow: 0 8px 24px rgba(227, 10, 23, 0.25);
}

    .ym-card-icon svg {
        width: 40px;
        height: 40px;
        fill: var(--ym-white);
    }

.ym-feature-card h3 {
    font-size: 26px;
    font-weight: 700;
    color: var(--ym-dark);
    margin: 0 0 16px 0;
    line-height: 1.3;
}

.ym-feature-card p {
    font-size: 16px;
    color: var(--ym-gray);
    line-height: 1.7;
    margin: 0;
}

/* TIMELINE */
.ym-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

    .ym-timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--ym-gradient-primary);
        transform: translateX(-50%);
    }

.ym-timeline-item {
    display: flex;
    margin-bottom: 80px;
    position: relative;
    align-items: center;
}

    .ym-timeline-item:nth-child(odd) {
        flex-direction: row;
    }

    .ym-timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }

.ym-timeline-content {
    flex: 1;
    background: var(--ym-white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--ym-shadow-md);
    margin: 0 40px;
    border: 2px solid var(--ym-border);
    transition: all 0.3s ease;
}

    .ym-timeline-content:hover {
        transform: scale(1.03);
        box-shadow: var(--ym-shadow-xl);
        border-color: var(--ym-primary);
    }

.ym-timeline-step {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    background: var(--ym-gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--ym-white);
    box-shadow: 0 0 0 10px var(--ym-white), var(--ym-shadow-lg);
    z-index: 2;
}

.ym-timeline-content h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--ym-dark);
    margin: 0 0 16px 0;
}

.ym-timeline-content p {
    font-size: 16px;
    color: var(--ym-gray);
    line-height: 1.7;
    margin: 0;
}

/* SERVICE CARDS */
.ym-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.ym-service-card {
    background: var(--ym-white);
    border-radius: 20px;
    padding: 40px 32px;
    box-shadow: var(--ym-shadow-sm);
    border: 2px solid var(--ym-border);
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .ym-service-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--ym-gradient-primary);
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }

    .ym-service-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--ym-shadow-xl);
        border-color: var(--ym-primary);
    }

        .ym-service-card:hover::after {
            opacity: 1;
        }

    .ym-service-card > * {
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
    }

    .ym-service-card:hover h4,
    .ym-service-card:hover p {
        color: var(--ym-white);
    }

.ym-service-icon-wrapper {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: var(--ym-gradient-primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ym-service-card:hover .ym-service-icon-wrapper {
    background: var(--ym-white);
}

.ym-service-icon-wrapper svg {
    width: 32px;
    height: 32px;
    fill: var(--ym-white);
    transition: fill 0.3s ease;
}

.ym-service-card:hover .ym-service-icon-wrapper svg {
    fill: var(--ym-primary);
}

.ym-service-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ym-dark);
    margin: 0 0 12px 0;
}

.ym-service-card p {
    font-size: 15px;
    color: var(--ym-gray);
    line-height: 1.6;
    margin: 0;
}

/* BENEFITS SECTION */
.ym-benefits-section {
    background: var(--ym-gradient-dark);
    color: var(--ym-white);
    padding: 120px 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .ym-benefits-section::before {
        content: '';
        position: absolute;
        top: -200px;
        right: -200px;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(227, 10, 23, 0.15) 0%, transparent 70%);
        border-radius: 50%;
    }

.ym-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    position: relative;
    z-index: 1;
}

.ym-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 32px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

    .ym-benefit-item:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: translateX(12px);
        border-color: rgba(255, 255, 255, 0.2);
    }

.ym-benefit-icon-wrapper {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: var(--ym-gradient-primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .ym-benefit-icon-wrapper svg {
        width: 28px;
        height: 28px;
        fill: var(--ym-white);
    }

.ym-benefit-content h5 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--ym-white);
}

.ym-benefit-content p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    opacity: 0.9;
}

/* CTA SECTION */
.ym-cta-section {
    background: var(--ym-gradient-primary);
    padding: 120px 0;
    text-align: center;
    color: var(--ym-white);
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .ym-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    }

.ym-cta-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.ym-cta-section h2 {
    font-size: 56px;
    font-weight: 800;
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.ym-cta-section p {
    font-size: 22px;
    margin: 0 0 48px 0;
    opacity: 0.95;
    line-height: 1.6;
}

.ym-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .ym-hero-title {
        font-size: 56px;
    }

    .ym-section-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .ym-hero-title {
        font-size: 40px;
    }

    .ym-hero-subtitle {
        font-size: 18px;
    }

    .ym-section {
        padding: 80px 0;
    }

    .ym-section-title {
        font-size: 32px;
    }

    .ym-container, .ym-hero-container {
        padding: 0 24px;
    }

    .ym-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ym-timeline::before {
        left: 30px;
    }

    .ym-timeline-item {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .ym-timeline-step {
        left: 30px;
        transform: translateX(0);
    }

    .ym-timeline-content {
        margin-left: 90px;
        margin-right: 0;
    }

    .ym-cta-section h2 {
        font-size: 36px;
    }

    .ym-stat-number {
        font-size: 48px;
    }
}

/* ANIMATIONS */
@keyframes ym-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.ym-animate {
    animation: ym-fade-in-up 0.8s ease-out;
}
/* ========================================
    5.4.    
   🏆 TURQUALITY DANIŞMANLIĞI - PREMIUM KURUMSAL TASARIM
   📁 DOSYA: MultiSiteManager.Web/wwwroot/css/Toku/site.css
   💎 RENK TEMASİ: Lacivert (Navy Blue) + Altın (Gold)
   ⚠️ ÖNEMLİ: Bu CSS'i site.css dosyanızın SONUNA ekleyin
   ======================================== */

/* Root Variables - Turquality Premium Color Palette */
.turquality-page {
    --tq-primary: #1e40af;
    --tq-primary-light: #3b82f6;
    --tq-primary-dark: #1e3a8a;
    --tq-accent: #fbbf24;
    --tq-accent-light: #fcd34d;
    --tq-accent-dark: #f59e0b;
    --tq-dark: #1e293b;
    --tq-gray: #475569;
    --tq-light: #f8fafc;
    --tq-white: #ffffff;
    --tq-bronze: #cd7f32;
    --tq-border: #e2e8f0;
    /* Gradients */
    --tq-gradient-primary: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    --tq-gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    --tq-gradient-dark: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    --tq-gradient-premium: linear-gradient(135deg, #1e40af 0%, #fbbf24 50%, #1e40af 100%);
    /* Shadows */
    --tq-shadow-sm: 0 2px 8px rgba(30, 64, 175, 0.08);
    --tq-shadow-md: 0 4px 16px rgba(30, 64, 175, 0.12);
    --tq-shadow-lg: 0 8px 32px rgba(30, 64, 175, 0.16);
    --tq-shadow-xl: 0 16px 48px rgba(30, 64, 175, 0.20);
    --tq-shadow-gold: 0 8px 32px rgba(251, 191, 36, 0.25);
}

    /* ========================================
   🏆 TURQUALITY - SIDEBAR GİZLEME & TAM GENİŞLİK (GÜNCELLENDİ)
   ======================================== */

    /* Sidebar'ı tamamen gizle */
    .turquality-page ~ aside,
    .turquality-page ~ .sidebar,
    .turquality-page ~ .right-sidebar,
    .turquality-page ~ [class*="sidebar"],
    body:has(.turquality-page) .sidebar,
    body:has(.turquality-page) aside:not(header aside):not(nav aside),
    body:has(.turquality-page) .right-sidebar,
    body:has(.turquality-page) .widget-area {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

/* Main content'i tam genişlik yap */
body:has(.turquality-page) main,
body:has(.turquality-page) .main-content,
body:has(.turquality-page) .content-area,
body:has(.turquality-page) article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
}

/* Container'ları tam genişlik yap */
body:has(.turquality-page) .container:has(.turquality-page),
body:has(.turquality-page) .container-fluid:has(.turquality-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid sistemini override et */
body:has(.turquality-page) .row:has(.turquality-page) {
    margin: 0 !important;
    width: 100% !important;
}

body:has(.turquality-page) [class*="col-"]:has(.turquality-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
}

/* ========================================
   BASE STYLES
   ======================================== */
.turquality-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--tq-dark);
    background: var(--tq-white);
    overflow-x: hidden;
    box-sizing: border-box;
}

    .turquality-page * {
        box-sizing: border-box;
    }

.tq-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.tq-section {
    padding: 120px 0;
    width: 100%;
}

/* ========================================
   HERO SECTION - Premium Kurumsal
   ======================================== */
.tq-hero {
    background: var(--tq-gradient-primary);
    color: var(--tq-white);
    padding: 160px 0 140px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .tq-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%), radial-gradient(circle at 40% 20%, rgba(251, 191, 36, 0.1) 0%, transparent 40%);
        animation: tq-hero-pulse 15s ease-in-out infinite;
    }

@keyframes tq-hero-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.tq-hero::after {
    content: '🏆';
    position: absolute;
    font-size: 300px;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.05;
}

.tq-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.tq-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(251, 191, 36, 0.2);
    border: 2px solid rgba(251, 191, 36, 0.3);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 32px;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}

.tq-hero-title {
    font-size: 72px;
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 32px 0;
    letter-spacing: -2px;
}

.tq-hero-subtitle {
    font-size: 24px;
    line-height: 1.6;
    margin-bottom: 48px;
    opacity: 0.95;
    font-weight: 400;
}

.tq-hero-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.tq-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

    .tq-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.2);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .tq-btn:hover::before {
        width: 300px;
        height: 300px;
    }

.tq-btn-primary {
    background: var(--tq-gradient-gold);
    color: var(--tq-dark);
    box-shadow: var(--tq-shadow-gold);
}

    .tq-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 40px rgba(251, 191, 36, 0.4);
    }

.tq-btn-outline {
    background: transparent;
    color: var(--tq-white);
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

    .tq-btn-outline:hover {
        border-color: var(--tq-white);
        background: rgba(255, 255, 255, 0.1);
    }

/* ========================================
   STATS SECTION
   ======================================== */
.tq-stats-section {
    background: var(--tq-gradient-dark);
    padding: 80px 0;
    margin-top: -50px;
    position: relative;
    z-index: 3;
    width: 100%;
}

.tq-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
}

.tq-stat-card {
    text-align: center;
    color: var(--tq-white);
}

.tq-stat-number {
    font-size: 64px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    background: var(--tq-gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tq-stat-label {
    font-size: 18px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* ========================================
   SECTION HEADER
   ======================================== */
.tq-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.tq-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(30, 64, 175, 0.1);
    border: 1px solid rgba(30, 64, 175, 0.2);
    border-radius: 100px;
    color: var(--tq-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.tq-section-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--tq-dark);
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.tq-section-subtitle {
    font-size: 20px;
    color: var(--tq-gray);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   PROGRAM CARDS - 3 Program Tipi
   ======================================== */
.tq-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 40px;
}

.tq-program-card {
    background: var(--tq-white);
    border-radius: 24px;
    padding: 48px;
    box-shadow: var(--tq-shadow-sm);
    border: 1px solid var(--tq-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .tq-program-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: var(--tq-gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .tq-program-card.featured {
        background: var(--tq-gradient-primary);
        color: var(--tq-white);
        transform: scale(1.05);
        box-shadow: var(--tq-shadow-xl);
    }

        .tq-program-card.featured::before {
            background: var(--tq-gradient-gold);
            transform: scaleX(1);
        }

    .tq-program-card:hover {
        transform: translateY(-12px);
        box-shadow: var(--tq-shadow-xl);
    }

        .tq-program-card:hover::before {
            transform: scaleX(1);
        }

.tq-program-icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--tq-gradient-gold);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 32px;
    box-shadow: var(--tq-shadow-gold);
}

.tq-program-card.featured .tq-program-icon-wrapper {
    background: var(--tq-gradient-gold);
}

.tq-program-icon-wrapper svg {
    width: 40px;
    height: 40px;
    fill: var(--tq-dark);
}

.tq-program-badge {
    display: inline-block;
    padding: 6px 16px;
    background: var(--tq-gradient-gold);
    color: var(--tq-dark);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 16px;
    text-transform: uppercase;
}

.tq-program-card.featured .tq-program-badge {
    background: rgba(251, 191, 36, 0.3);
    color: var(--tq-accent);
}

.tq-program-card h3 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 16px 0;
    line-height: 1.3;
    color: var(--tq-dark);
}

.tq-program-card.featured h3 {
    color: var(--tq-white);
}

.tq-program-card p {
    font-size: 16px;
    color: var(--tq-gray);
    line-height: 1.7;
    margin: 0 0 32px 0;
}

.tq-program-card.featured p {
    color: rgba(255, 255, 255, 0.9);
}

.tq-program-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px 0;
}

    .tq-program-features li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid var(--tq-border);
        font-size: 15px;
        color: var(--tq-gray);
    }

.tq-program-card.featured .tq-program-features li {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

.tq-program-features li:last-child {
    border-bottom: none;
}

.tq-program-features li svg {
    width: 20px;
    height: 20px;
    fill: var(--tq-accent);
    flex-shrink: 0;
}

.tq-program-card.featured .tq-program-features li svg {
    fill: var(--tq-accent-light);
}

/* ========================================
   BENEFITS SECTION
   ======================================== */
.tq-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.tq-benefit-item {
    display: flex;
    gap: 20px;
    padding: 32px;
    background: var(--tq-white);
    border-radius: 16px;
    box-shadow: var(--tq-shadow-sm);
    border: 1px solid var(--tq-border);
    transition: all 0.3s ease;
}

    .tq-benefit-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--tq-shadow-lg);
        border-color: var(--tq-primary);
    }

.tq-benefit-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--tq-primary) 0%, var(--tq-primary-light) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .tq-benefit-icon-wrapper svg {
        width: 28px;
        height: 28px;
        fill: var(--tq-white);
    }

.tq-benefit-content h5 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--tq-dark);
}

.tq-benefit-content p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: var(--tq-gray);
}

/* ========================================
   TIMELINE / PROCESS
   ======================================== */
.tq-timeline {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

    .tq-timeline::before {
        content: '';
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 3px;
        background: linear-gradient(to bottom, var(--tq-primary) 0%, var(--tq-accent) 50%, var(--tq-primary) 100%);
        transform: translateX(-50%);
    }

.tq-timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 80px;
    position: relative;
}

    .tq-timeline-item:nth-child(even) {
        flex-direction: row-reverse;
    }

.tq-timeline-step {
    width: 70px;
    height: 70px;
    background: var(--tq-gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    color: var(--tq-dark);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    box-shadow: var(--tq-shadow-gold);
    border: 5px solid var(--tq-white);
}

.tq-timeline-content {
    width: 45%;
    background: var(--tq-white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--tq-shadow-md);
    border: 1px solid var(--tq-border);
    transition: all 0.3s ease;
}

.tq-timeline-item:nth-child(odd) .tq-timeline-content {
    margin-right: auto;
    margin-left: 0;
}

.tq-timeline-item:nth-child(even) .tq-timeline-content {
    margin-left: auto;
    margin-right: 0;
}

.tq-timeline-content:hover {
    transform: scale(1.03);
    box-shadow: var(--tq-shadow-lg);
}

.tq-timeline-content h4 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--tq-primary);
}

.tq-timeline-content p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
    color: var(--tq-gray);
}

/* ========================================
   SERVICES SECTION
   ======================================== */
.tq-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.tq-service-card {
    background: var(--tq-white);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--tq-shadow-sm);
    border: 1px solid var(--tq-border);
    transition: all 0.3s ease;
}

    .tq-service-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--tq-shadow-lg);
        border-color: var(--tq-accent);
    }

.tq-service-icon-wrapper {
    width: 70px;
    height: 70px;
    background: var(--tq-gradient-gold);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    box-shadow: var(--tq-shadow-gold);
}

    .tq-service-icon-wrapper svg {
        width: 35px;
        height: 35px;
        fill: var(--tq-dark);
    }

.tq-service-card h4 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--tq-dark);
}

.tq-service-card p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
    color: var(--tq-gray);
}

/* ========================================
   CTA SECTION
   ======================================== */
.tq-cta-section {
    background: var(--tq-gradient-premium);
    padding: 120px 0;
    text-align: center;
    color: var(--tq-white);
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .tq-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 30% 50%, rgba(251, 191, 36, 0.15) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%);
    }

.tq-cta-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.tq-cta-section h2 {
    font-size: 56px;
    font-weight: 900;
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.tq-cta-section p {
    font-size: 22px;
    margin: 0 0 48px 0;
    opacity: 0.95;
    line-height: 1.6;
}

.tq-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
    .tq-hero-title {
        font-size: 56px;
    }

    .tq-section-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .tq-container {
        padding: 0 24px;
    }

    .tq-section {
        padding: 80px 0;
    }

    .tq-hero {
        padding: 120px 0 100px;
    }

    .tq-hero-title {
        font-size: 40px;
    }

    .tq-hero-subtitle {
        font-size: 18px;
    }

    .tq-section-title {
        font-size: 32px;
    }

    .tq-programs-grid,
    .tq-services-grid {
        grid-template-columns: 1fr;
    }

    .tq-timeline::before {
        left: 30px;
    }

    .tq-timeline-item {
        flex-direction: column !important;
        align-items: flex-start;
    }

    .tq-timeline-step {
        left: 30px;
        transform: translateX(0);
    }

    .tq-timeline-content {
        width: 100%;
        margin-left: 90px !important;
        margin-right: 0 !important;
    }

    .tq-cta-section h2 {
        font-size: 36px;
    }

    .tq-stat-number {
        font-size: 48px;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes tq-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.tq-animate {
    animation: tq-fade-in-up 0.8s ease-out;
}

@keyframes tq-float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.tq-float {
    animation: tq-float 3s ease-in-out infinite;
}

/* ========================================
    5.1.
   🎯 GENEL DANIŞMANLIK ANA SAYFASI - PASTEL & HUZUR VERİCİ TEMA
   📁 DOSYA: MultiSiteManager.Web/wwwroot/css/Toku/site.css
   🎨 RENK PALETİ: Soft Blue + Mint Green + Warm Peach (Pastel)
   ⚠️ ÖNEMLİ: Bu CSS'i site.css dosyanızın SONUNA ekleyin
   ======================================== */

/* Root Variables - Pastel & Calming Color Palette */
.danismanlik-page {
    /* Primary Colors - Soft Blue & Teal */
    --dn-primary: #42A5F5;
    --dn-primary-light: #64B5F6;
    --dn-primary-dark: #1E88E5;
    /* Secondary Colors - Mint Green */
    --dn-secondary: #26A69A;
    --dn-secondary-light: #4DB6AC;
    --dn-secondary-dark: #00897B;
    /* Accent Colors - Warm Peach/Coral */
    --dn-accent: #FF8A65;
    --dn-accent-light: #FFAB91;
    --dn-accent-dark: #FF7043;
    /* Neutral Colors */
    --dn-dark: #263238;
    --dn-gray: #546E7A;
    --dn-light: #ECEFF1;
    --dn-white: #FFFFFF;
    --dn-cream: #FFF8F0;
    --dn-border: #CFD8DC;
    /* Gradients - Soft & Smooth */
    --dn-gradient-primary: linear-gradient(135deg, #42A5F5 0%, #26A69A 100%);
    --dn-gradient-warm: linear-gradient(135deg, #FFB74D 0%, #FF8A65 100%);
    --dn-gradient-cool: linear-gradient(135deg, #4DB6AC 0%, #42A5F5 100%);
    --dn-gradient-soft: linear-gradient(135deg, #E3F2FD 0%, #E0F2F1 100%);
    /* Shadows - Soft & Subtle */
    --dn-shadow-sm: 0 2px 8px rgba(66, 165, 245, 0.08);
    --dn-shadow-md: 0 4px 16px rgba(66, 165, 245, 0.12);
    --dn-shadow-lg: 0 8px 32px rgba(66, 165, 245, 0.16);
    --dn-shadow-xl: 0 16px 48px rgba(66, 165, 245, 0.20);
}

    /* ========================================
   SIDEBAR GİZLEME & TAM GENİŞLİK
   ======================================== */

    /* Sidebar'ı tamamen gizle */
    .danismanlik-page ~ aside,
    .danismanlik-page ~ .sidebar,
    .danismanlik-page ~ .right-sidebar,
    .danismanlik-page ~ [class*="sidebar"],
    body:has(.danismanlik-page) .sidebar,
    body:has(.danismanlik-page) aside:not(header aside):not(nav aside),
    body:has(.danismanlik-page) .right-sidebar,
    body:has(.danismanlik-page) .widget-area {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        overflow: hidden !important;
    }

/* Main content'i tam genişlik yap */
body:has(.danismanlik-page) main,
body:has(.danismanlik-page) .main-content,
body:has(.danismanlik-page) .content-area,
body:has(.danismanlik-page) article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 100% !important;
}

/* Container'ları tam genişlik yap */
body:has(.danismanlik-page) .container:has(.danismanlik-page),
body:has(.danismanlik-page) .container-fluid:has(.danismanlik-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Grid sistemini override et */
body:has(.danismanlik-page) .row:has(.danismanlik-page) {
    margin: 0 !important;
    width: 100% !important;
}

body:has(.danismanlik-page) [class*="col-"]:has(.danismanlik-page) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
}

/* ========================================
   BASE STYLES
   ======================================== */
.danismanlik-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--dn-dark);
    background: var(--dn-white);
    overflow-x: hidden;
    box-sizing: border-box;
}

    .danismanlik-page * {
        box-sizing: border-box;
    }

.dn-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    width: 100%;
}

.dn-section {
    padding: 120px 0;
    width: 100%;
}

/* ========================================
   HERO SECTION - Soft & Inviting
   ======================================== */
.dn-hero {
    background: var(--dn-gradient-soft);
    padding: 160px 0 140px;
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .dn-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 20% 30%, rgba(66, 165, 245, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(38, 166, 154, 0.1) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(255, 138, 101, 0.08) 0%, transparent 40%);
        animation: dn-hero-float 20s ease-in-out infinite;
    }

@keyframes dn-hero-float {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-20px) scale(1.05);
    }
}

.dn-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    text-align: center;
    margin: 0 auto;
}

.dn-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(66, 165, 245, 0.3);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 32px;
    color: var(--dn-primary);
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    box-shadow: var(--dn-shadow-sm);
}

.dn-hero-title {
    font-size: 68px;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 32px 0;
    letter-spacing: -2px;
    color: var(--dn-dark);
}

    .dn-hero-title .highlight {
        background: var(--dn-gradient-primary);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

.dn-hero-subtitle {
    font-size: 22px;
    line-height: 1.7;
    margin-bottom: 48px;
    color: var(--dn-gray);
    font-weight: 400;
}

.dn-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.dn-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    position: relative;
    overflow: hidden;
}

    .dn-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        transition: width 0.6s, height 0.6s;
    }

    .dn-btn:hover::before {
        width: 300px;
        height: 300px;
    }

.dn-btn-primary {
    background: var(--dn-gradient-primary);
    color: var(--dn-white);
    box-shadow: var(--dn-shadow-md);
}

    .dn-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: var(--dn-shadow-lg);
    }

.dn-btn-outline {
    background: var(--dn-white);
    color: var(--dn-primary);
    border: 2px solid var(--dn-primary);
}

    .dn-btn-outline:hover {
        background: var(--dn-primary);
        color: var(--dn-white);
        transform: translateY(-3px);
    }

/* ========================================
   STATS SECTION - Trust Building
   ======================================== */
.dn-stats-section {
    background: var(--dn-white);
    padding: 80px 0;
    margin-top: -50px;
    position: relative;
    z-index: 3;
    width: 100%;
}

.dn-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 60px;
    background: var(--dn-white);
    padding: 60px;
    border-radius: 24px;
    box-shadow: var(--dn-shadow-lg);
}

.dn-stat-card {
    text-align: center;
}

.dn-stat-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: var(--dn-gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--dn-shadow-md);
}

    .dn-stat-icon svg {
        width: 35px;
        height: 35px;
        fill: var(--dn-white);
    }

.dn-stat-number {
    font-size: 56px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 12px;
    background: var(--dn-gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dn-stat-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--dn-gray);
    letter-spacing: 0.3px;
}

/* ========================================
   SECTION HEADER
   ======================================== */
.dn-section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 80px;
}

.dn-section-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: rgba(66, 165, 245, 0.1);
    border: 1px solid rgba(66, 165, 245, 0.2);
    border-radius: 100px;
    color: var(--dn-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 24px;
    text-transform: uppercase;
}

.dn-section-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--dn-dark);
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.dn-section-subtitle {
    font-size: 20px;
    color: var(--dn-gray);
    line-height: 1.7;
    margin: 0;
}

/* ========================================
   SERVICES GRID - Main Offerings
   ======================================== */
.dn-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 32px;
}

.dn-service-card {
    background: var(--dn-white);
    border-radius: 20px;
    padding: 48px 40px;
    box-shadow: var(--dn-shadow-sm);
    border: 1px solid var(--dn-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

    .dn-service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--dn-gradient-primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s ease;
    }

    .dn-service-card:hover {
        transform: translateY(-12px);
        box-shadow: var(--dn-shadow-xl);
        border-color: var(--dn-primary);
    }

        .dn-service-card:hover::before {
            transform: scaleX(1);
        }

.dn-service-icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--dn-gradient-soft);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    transition: all 0.3s ease;
}

.dn-service-card:hover .dn-service-icon-wrapper {
    background: var(--dn-gradient-primary);
}

.dn-service-icon-wrapper svg {
    width: 40px;
    height: 40px;
    fill: var(--dn-primary);
    transition: fill 0.3s ease;
}

.dn-service-card:hover .dn-service-icon-wrapper svg {
    fill: var(--dn-white);
}

.dn-service-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 16px 0;
    color: var(--dn-dark);
    line-height: 1.3;
}

.dn-service-card p {
    font-size: 16px;
    line-height: 1.7;
    margin: 0 0 24px 0;
    color: var(--dn-gray);
}

.dn-service-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .dn-service-features li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 0;
        font-size: 14px;
        color: var(--dn-gray);
    }

        .dn-service-features li svg {
            width: 18px;
            height: 18px;
            fill: var(--dn-secondary);
            flex-shrink: 0;
        }

/* ========================================
   PROCESS SECTION - How We Work
   ======================================== */
.dn-process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    position: relative;
}

.dn-process-step {
    position: relative;
    text-align: center;
}

.dn-process-number {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    background: var(--dn-gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--dn-white);
    box-shadow: var(--dn-shadow-md);
    position: relative;
    z-index: 2;
}

.dn-process-step h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: var(--dn-dark);
}

.dn-process-step p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    color: var(--dn-gray);
}

/* ========================================
   SECTORS / INDUSTRIES
   ======================================== */
.dn-sectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

.dn-sector-card {
    background: var(--dn-white);
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: var(--dn-shadow-sm);
    border: 1px solid var(--dn-border);
    transition: all 0.3s ease;
}

    .dn-sector-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--dn-shadow-lg);
        border-color: var(--dn-secondary);
    }

.dn-sector-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: var(--dn-gradient-cool);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .dn-sector-icon svg {
        width: 30px;
        height: 30px;
        fill: var(--dn-white);
    }

.dn-sector-card h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--dn-dark);
}

/* ========================================
   WHY US SECTION
   ======================================== */
.dn-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.dn-feature-item {
    display: flex;
    gap: 20px;
    padding: 32px;
    background: var(--dn-white);
    border-radius: 16px;
    box-shadow: var(--dn-shadow-sm);
    border: 1px solid var(--dn-border);
    transition: all 0.3s ease;
}

    .dn-feature-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--dn-shadow-lg);
    }

.dn-feature-icon-wrapper {
    width: 60px;
    height: 60px;
    background: var(--dn-gradient-warm);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .dn-feature-icon-wrapper svg {
        width: 28px;
        height: 28px;
        fill: var(--dn-white);
    }

.dn-feature-content h5 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--dn-dark);
}

.dn-feature-content p {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
    color: var(--dn-gray);
}

/* ========================================
   CTA SECTION - Soft & Inviting
   ======================================== */
.dn-cta-section {
    background: var(--dn-gradient-primary);
    padding: 120px 0;
    text-align: center;
    color: var(--dn-white);
    position: relative;
    overflow: hidden;
    width: 100%;
}

    .dn-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    }

.dn-cta-content {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.dn-cta-section h2 {
    font-size: 52px;
    font-weight: 800;
    margin: 0 0 24px 0;
    line-height: 1.2;
    letter-spacing: -1px;
}

.dn-cta-section p {
    font-size: 20px;
    margin: 0 0 48px 0;
    opacity: 0.95;
    line-height: 1.6;
}

.dn-cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.dn-btn-white {
    background: var(--dn-white);
    color: var(--dn-primary);
    box-shadow: var(--dn-shadow-lg);
}

    .dn-btn-white:hover {
        transform: translateY(-3px);
        box-shadow: var(--dn-shadow-xl);
    }

.dn-btn-outline-white {
    background: transparent;
    color: var(--dn-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

    .dn-btn-outline-white:hover {
        border-color: var(--dn-white);
        background: rgba(255, 255, 255, 0.1);
    }

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
    .dn-hero-title {
        font-size: 56px;
    }

    .dn-section-title {
        font-size: 40px;
    }
}

@media (max-width: 768px) {
    .dn-container {
        padding: 0 24px;
    }

    .dn-section {
        padding: 80px 0;
    }

    .dn-hero {
        padding: 120px 0 100px;
    }

    .dn-hero-title {
        font-size: 40px;
    }

    .dn-hero-subtitle {
        font-size: 18px;
    }

    .dn-section-title {
        font-size: 32px;
    }

    .dn-services-grid {
        grid-template-columns: 1fr;
    }

    .dn-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 24px;
        gap: 40px;
    }

    .dn-cta-section h2 {
        font-size: 36px;
    }

    .dn-stat-number {
        font-size: 44px;
    }
}

@media (max-width: 480px) {
    .dn-stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes dn-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

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

.dn-animate {
    animation: dn-fade-in-up 0.8s ease-out;
}

@keyframes dn-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.dn-pulse {
    animation: dn-pulse 2s ease-in-out infinite;
}





/* 
    1.1. Hakkımızda
📁 EKLEYİN: MultiSiteManager.Web/wwwroot/css/Toku/site.css EN SONUNA
🎯 AÇIKLAMA: Hakkımızda, MisyonVizyon ve Kurumsal sayfalar için CSS stilleri
⚠️ NOT: Bu kodları mevcut site.css dosyasının en sonuna ekleyin
*/

/* ===== KURUMSAL SAYFA STİLLERİ ===== */

/* 🏃‍♂️ BREADCRUMB STİLLERİ */
.toku-breadcrumb {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /*padding: 16px 0;*/
    border-bottom: 2px solid #e3f2fd;
    /*margin-top: 0px;*/ /* Navbar yüksekliği */
}
.paget-title .h1 {
    color: #1b6ec2;
}

    .toku-breadcrumb .breadcrumb {
        margin-bottom: 0;
        background: transparent;
        padding: 0;
    }

    .toku-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
        content: "→";
        color: #1b6ec2;
        font-weight: 600;
    }

.breadcrumb-link {
    color: #1b6ec2;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .breadcrumb-link:hover {
        color: #0056b3;
        transform: translateX(2px);
    }

.breadcrumb-item.active {
    color: #6c757d;
    font-weight: 600;
}

/* 🎯 PAGE HEADER STİLLERİ */
.toku-page-header {
    padding: 80px 0 60px;
    /*background: linear-gradient(135deg, rgba(27, 110, 194, 0.03) 0%, rgba(40, 167, 69, 0.02) 100%);*/
    border-bottom: 1px solid #e9ecef;
    overflow: hidden;
    position: relative;
}

    .toku-page-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(27,110,194,0.02)"/><circle cx="75" cy="75" r="1" fill="rgba(27,110,194,0.02)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
        pointer-events: none;
    }

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.5rem;
    font-weight: 800;
    color: #212529;
    margin-bottom: 24px;
    line-height: 1.1;
    position: relative;
}

    .page-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 80px;
        height: 4px;
        background: linear-gradient(90deg, #1b6ec2 0%, #28a745 100%);
        border-radius: 2px;
    }

.page-subtitle {
    font-size: 1.25rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 40px;
    font-weight: 400;
}

/* 📊 PAGE STATS */
.page-stats {
    display: flex;
    gap: 40px;
    margin-top: 32px;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #1b6ec2;
    font-family: 'Montserrat', sans-serif;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 500;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 🖼️ HERO IMAGE */
.page-header-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(27, 110, 194, 0.15);
    transform: perspective(1000px) rotateY(-5deg);
    transition: all 0.6s ease;
}

    .page-header-image:hover {
        transform: perspective(1000px) rotateY(0deg);
        box-shadow: 0 30px 60px rgba(27, 110, 194, 0.2);
    }

.hero-image {
    width: 100%;
    height: auto;
    display: block;
    transition: all 0.6s ease;
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(27, 110, 194, 0.1), rgba(40, 167, 69, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.page-header-image:hover .image-overlay {
    opacity: 1;
}

.play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #1b6ec2;
    cursor: pointer;
    transform: scale(0.8);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.page-header-image:hover .play-button {
    transform: scale(1);
}

/* 📖 COMPANY STORY SECTION */
.toku-company-story {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.section-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 16px;
    position: relative;
    display: inline-block;
}

    .section-title::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #1b6ec2 0%, #28a745 100%);
        border-radius: 2px;
    }

.section-subtitle {
    font-size: 1.2rem;
    color: #6c757d;
    margin-bottom: 0;
    font-weight: 400;
    line-height: 1.6;
}

.story-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
}

    .story-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #1b6ec2 0%, #28a745 100%);
        border-radius: 2px;
    }

.story-text {
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.8;
    margin-bottom: 24px;
    font-weight: 400;
    text-align: justify;
}

.story-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(27, 110, 194, 0.1);
    transform: translateY(20px);
    transition: all 0.6s ease;
}

    .story-image:hover {
        transform: translateY(0px);
        box-shadow: 0 25px 50px rgba(27, 110, 194, 0.15);
    }

/* 💎 VALUES SECTION */
.toku-values-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

    .toku-values-section::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 40%;
        height: 200%;
        background: linear-gradient(45deg, rgba(27, 110, 194, 0.02), transparent);
        transform: rotate(15deg);
        pointer-events: none;
    }

.value-card {
    background: #ffffff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    height: 100%;
    transition: all 0.4s ease;
    border: 1px solid #e9ecef;
    position: relative;
    overflow: hidden;
}

    .value-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #1b6ec2 0%, #28a745 100%);
        transform: scaleX(0);
        transition: all 0.4s ease;
    }

    .value-card:hover::before {
        transform: scaleX(1);
    }

    .value-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(27, 110, 194, 0.15);
        border-color: rgba(27, 110, 194, 0.2);
    }

.value-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b6ec2 0%, #28a745 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 32px;
    color: #ffffff;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .value-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.4s ease;
    }

.value-card:hover .value-icon::before {
    width: 100%;
    height: 100%;
}

.value-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 16px;
}

.value-text {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 👥 TEAM SECTION */
.toku-team-section {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.team-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 24px;
    position: relative;
    padding-left: 20px;
}

    .team-title::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 4px;
        height: 100%;
        background: linear-gradient(180deg, #1b6ec2 0%, #28a745 100%);
        border-radius: 2px;
    }

.team-text {
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: justify;
}

.team-stats {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.team-stat {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 12px;
    border-left: 4px solid #1b6ec2;
    transition: all 0.3s ease;
}

    .team-stat:hover {
        transform: translateX(8px);
        box-shadow: 0 8px 20px rgba(27, 110, 194, 0.1);
    }

    .team-stat i {
        font-size: 24px;
        color: #1b6ec2;
        width: 40px;
        text-align: center;
    }

.stat-info strong {
    display: block;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
}

.stat-info span {
    font-size: 0.9rem;
    color: #6c757d;
}

/* 🚀 CTA SECTION */
.toku-cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #1b6ec2 0%, #28a745 100%);
    position: relative;
    overflow: hidden;
}

    .toku-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="cta-pattern" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23cta-pattern)"/></svg>');
        pointer-events: none;
    }

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 24px;
}

.cta-text {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

    .cta-buttons .btn {
        padding: 16px 32px;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 12px;
        transition: all 0.3s ease;
        min-width: 200px;
    }

    .cta-buttons .btn-primary {
        background: #ffffff;
        color: #1b6ec2;
        border: 2px solid #ffffff;
    }

        .cta-buttons .btn-primary:hover {
            background: transparent;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

    .cta-buttons .btn-outline-primary {
        background: transparent;
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.8);
    }

        .cta-buttons .btn-outline-primary:hover {
            background: #ffffff;
            color: #1b6ec2;
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

/* ===== RESPONSIVE TASARIM ===== */

/* Tablet */
@media (max-width: 992px) {
    .page-title {
        font-size: 2.8rem;
    }

    .page-stats {
        gap: 20px;
    }

    .stat-number {
        font-size: 2rem;
    }

    .section-title {
        font-size: 2.5rem;
    }

    .team-stat {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .cta-title {
        font-size: 2.5rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .toku-breadcrumb {
        margin-top: 70px;
    }

    .toku-page-header {
        padding: 60px 0 40px;
    }

    .page-title {
        font-size: 2.2rem;
    }

    .page-subtitle {
        font-size: 1.1rem;
    }

    .page-stats {
        flex-direction: column;
        gap: 16px;
    }

    .page-header-image {
        margin-top: 40px;
        transform: none;
    }

    .toku-company-story,
    .toku-values-section,
    .toku-team-section,
    .toku-cta-section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
    }

    .story-title,
    .team-title {
        font-size: 1.5rem;
    }

    .value-card {
        padding: 30px 20px;
    }

    .cta-title {
        font-size: 2rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

        .cta-buttons .btn {
            width: 100%;
            max-width: 300px;
        }
}

/* Extra Small */
@media (max-width: 480px) {
    .page-title {
        font-size: 1.8rem;
    }

    .section-title {
        font-size: 1.6rem;
    }

    .value-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .story-text,
    .team-text {
        text-align: left;
    }
}

/* 
📁 EKLEYİN: MultiSiteManager.Web/wwwroot/css/Toku/site.css EN SONUNA
🎯 AÇIKLAMA: Hakkımızda, MisyonVizyon ve Kurumsal sayfalar için CSS stilleri
⚠️ NOT: Bu kodları mevcut site.css dosyasının en sonuna ekleyin
*/

/* 
    1.2. Misyon Vizyon
📁 EKLEYİN: MultiSiteManager.Web/wwwroot/css/Toku/site.css EN SONUNA
🎯 AÇIKLAMA: MisyonVizyon sayfası özel CSS stilleri
⚠️ NOT: Bu kodları site.css dosyasının en sonuna ekleyin
*/

/* ===== MİSYON VİZYON SAYFA STİLLERİ ===== */

/* 💭 Intro Quote */
.mission-vision-intro {
    /*    margin-top: 60px;
    padding: 40px;*/
    background: linear-gradient(135deg, rgba(27, 110, 194, 0.05) 0%, rgba(40, 167, 69, 0.05) 100%);
    border-radius: 20px;
    border: 1px solid rgba(27, 110, 194, 0.1);
    position: relative;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
}

    .mission-vision-intro::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(27, 110, 194, 0.03) 0%, transparent 70%);
        animation: float 6s ease-in-out infinite;
    }

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-20px, -20px) rotate(5deg);
    }
}

.intro-quote {
    position: relative;
    z-index: 2;
    text-align: center;
}

.quote-icon {
    font-size: 3rem;
    color: #1b6ec2;
    opacity: 0.3;
    margin-bottom: 20px;
}

.quote-text {
    font-size: 1.4rem;
    font-style: italic;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 20px;
    font-weight: 400;
}

.quote-author {
    font-size: 1rem;
    color: #6c757d;
    font-weight: 600;
    display: block;
}

/* 🎯 Mission & Vision Cards */
.toku-mission-vision-cards {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.mission-card,
.vision-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    overflow: hidden;
    height: 100%;
    transition: all 0.4s ease;
    position: relative;
}

    .mission-card::before,
    .vision-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        transition: all 0.4s ease;
    }

    .mission-card::before {
        background: linear-gradient(90deg, #1b6ec2 0%, #0056b3 100%);
    }

    .vision-card::before {
        background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
    }

    .mission-card:hover,
    .vision-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    }

.card-header {
    padding: 40px 40px 30px;
    text-align: center;
    position: relative;
}

.card-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    font-size: 40px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.mission-icon {
    background: linear-gradient(135deg, #1b6ec2 0%, #0056b3 100%);
}

.vision-icon {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #212529;
    margin-bottom: 16px;
}

.card-divider {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    margin: 0 auto;
}

.mission-card .card-divider {
    background: linear-gradient(90deg, #1b6ec2 0%, #0056b3 100%);
}

.vision-card .card-divider {
    background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

.card-content {
    padding: 0 40px 40px;
}

.card-text {
    font-size: 1.2rem;
    color: #495057;
    line-height: 1.7;
    margin-bottom: 32px;
    text-align: justify;
}

/* Mission Points */
.mission-points {
    margin-bottom: 32px;
}

.mission-point {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    font-size: 1rem;
    color: #495057;
    font-weight: 500;
}

    .mission-point i {
        color: #1b6ec2;
        font-size: 18px;
        flex-shrink: 0;
    }

.mission-stats {
    display: flex;
    justify-content: space-around;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
}

    .mission-stats .stat-item {
        text-align: center;
    }

    .mission-stats .stat-number {
        font-size: 2.5rem;
        font-weight: 800;
        color: #1b6ec2;
        display: block;
        line-height: 1;
    }

        .mission-stats .stat-number::after {
            content: '%';
            font-size: 1.5rem;
        }

    .mission-stats .stat-label {
        font-size: 0.9rem;
        color: #6c757d;
        font-weight: 600;
        margin-top: 8px;
        display: block;
    }

/* Vision Goals */
.vision-goals {
    margin-bottom: 32px;
}

.vision-goal {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 16px;
    border-left: 4px solid #28a745;
    transition: all 0.3s ease;
}

    .vision-goal:hover {
        transform: translateX(8px);
        box-shadow: 0 8px 20px rgba(40, 167, 69, 0.1);
    }

.goal-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    flex-shrink: 0;
}

.goal-content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 8px;
}

.goal-content p {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Vision Timeline */
.vision-timeline {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid #e9ecef;
    gap: 16px;
}

.timeline-year {
    text-align: center;
    flex: 1;
    padding: 16px 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .timeline-year:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(40, 167, 69, 0.1);
    }

    .timeline-year .year {
        display: block;
        font-size: 1.5rem;
        font-weight: 800;
        color: #28a745;
        line-height: 1;
    }

    .timeline-year .milestone {
        display: block;
        font-size: 0.9rem;
        color: #6c757d;
        font-weight: 600;
        margin-top: 8px;
    }

/* 💎 Core Values Section */
.toku-core-values {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

    .toku-core-values::before {
        content: '';
        position: absolute;
        top: -100px;
        right: -100px;
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, rgba(27, 110, 194, 0.05) 0%, transparent 70%);
        border-radius: 50%;
        animation: pulse 8s ease-in-out infinite;
    }

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

.value-principle {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    text-align: center;
    border: 1px solid #e9ecef;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .value-principle::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: linear-gradient(90deg, #1b6ec2 0%, #28a745 100%);
        transform: scaleX(0);
        transition: all 0.4s ease;
    }

    .value-principle:hover::before {
        transform: scaleX(1);
    }

    .value-principle:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

.principle-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.principle-number {
    font-size: 2rem;
    font-weight: 800;
    color: #1b6ec2;
    font-family: 'Montserrat', sans-serif;
    opacity: 0.6;
}

.principle-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1b6ec2 0%, #28a745 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

    .principle-icon::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.4s ease;
    }

.value-principle:hover .principle-icon::before {
    width: 100%;
    height: 100%;
}

.principle-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 16px;
}

.principle-text {
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 0;
}

/* 📅 Goals Timeline */
.toku-goals-timeline {
    padding: 100px 0;
    background: #ffffff;
    position: relative;
}

.timeline-container {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #1b6ec2 0%, #28a745 100%);
    border-radius: 2px;
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-item {
    position: relative;
    margin-bottom: 80px;
    z-index: 2;
}

    .timeline-item:nth-child(even) .timeline-content {
        margin-left: calc(50% + 40px);
        text-align: left;
    }

    .timeline-item:nth-child(odd) .timeline-content {
        margin-right: calc(50% + 40px);
        text-align: right;
    }

.timeline-content {
    background: #ffffff;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    position: relative;
    transition: all 0.4s ease;
}

    .timeline-content:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    }

    .timeline-content::before {
        content: '';
        position: absolute;
        top: 32px;
        width: 20px;
        height: 20px;
        background: #ffffff;
        border: 4px solid #1b6ec2;
        border-radius: 50%;
        z-index: 3;
    }

.timeline-item:nth-child(even) .timeline-content::before {
    left: -50px;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -50px;
}

.timeline-year {
    display: inline-block;
    padding: 8px 20px;
    background: linear-gradient(135deg, #1b6ec2 0%, #28a745 100%);
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    border-radius: 25px;
    margin-bottom: 16px;
}

.timeline-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 16px;
}

.timeline-text {
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.6;
    margin-bottom: 20px;
}

.timeline-goals {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.timeline-item:nth-child(odd) .timeline-goals {
    justify-content: flex-end;
}

.goal-tag {
    padding: 6px 12px;
    background: rgba(27, 110, 194, 0.1);
    color: #1b6ec2;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 12px;
    border: 1px solid rgba(27, 110, 194, 0.2);
    transition: all 0.3s ease;
}

    .goal-tag:hover {
        background: rgba(27, 110, 194, 0.2);
        transform: translateY(-2px);
    }

/* ===== RESPONSIVE TASARIM ===== */

/* Tablet */
@media (max-width: 992px) {
    .quote-text {
        font-size: 1.2rem;
    }

    .card-content {
        padding: 0 30px 30px;
    }

    .vision-timeline {
        flex-direction: column;
        gap: 12px;
    }

    .timeline-item:nth-child(even) .timeline-content,
    .timeline-item:nth-child(odd) .timeline-content {
        margin-left: 40px;
        margin-right: 0;
        text-align: left;
    }

    .timeline-line {
        left: 20px;
    }

    .timeline-content::before,
    .timeline-item:nth-child(even) .timeline-content::before,
    .timeline-item:nth-child(odd) .timeline-content::before {
        left: -50px;
    }

    .timeline-goals,
    .timeline-item:nth-child(odd) .timeline-goals {
        justify-content: flex-start;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .mission-vision-intro {
        padding: 30px 20px;
        margin-top: 40px;
    }

    .quote-text {
        font-size: 1.1rem;
    }

    .card-header {
        padding: 30px 20px 20px;
    }

    .card-content {
        padding: 0 20px 30px;
    }

    .card-icon {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }

    .card-title {
        font-size: 1.8rem;
    }

    .vision-goal {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .principle-header {
        flex-direction: column;
        gap: 16px;
    }

    .timeline-content {
        padding: 24px 20px;
        margin-left: 20px;
    }

    .timeline-line {
        left: 10px;
    }

    .timeline-content::before {
        left: -30px;
    }
}

/* Extra Small */
@media (max-width: 480px) {
    .mission-stats {
        flex-direction: column;
        gap: 20px;
    }

    .value-principle {
        padding: 30px 20px;
    }

    .principle-icon {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    .principle-number {
        font-size: 1.5rem;
    }
}

/* 
📁 EKLEYİN: MultiSiteManager.Web/wwwroot/css/Toku/site.css EN SONUNA
🎯 AÇIKLAMA: MisyonVizyon sayfası özel CSS stilleri
⚠️ NOT: Bu kodları site.css dosyasının en sonuna ekleyin
*/

/*
    1.2. KVKK Sayfası Stilleri
📁 EKLENECEKresmiYER: MultiSiteManager.Web/wwwroot/css/Toku/site.css (dosyanın en sonuna)
🎯 AÇIKLAMA: KVKK Sayfası CSS Stilleri - ÇAKIŞMA ÖNLEYICI
⚠️ NOT: Tüm class isimleri kvkk- prefix ile başlar, diğer sayfalarla çakışmaz
*/

/* ===== KVKK SAYFASI STİLLERİ (ÇAKIŞMASIZ) ===== */

/* KVKK Breadcrumb - Özel */
.kvkk-breadcrumb-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /*    padding: 20px 0;
    margin-top: 80px;*/
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #dee2e6;
}

.kvkk-breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

    .kvkk-breadcrumb .breadcrumb-item a {
        color: var(--toku-primary);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

        .kvkk-breadcrumb .breadcrumb-item a:hover {
            color: var(--toku-secondary);
        }

/* KVKK Header Section */
.kvkk-header-section {
    background: linear-gradient(135deg, #1b6ec2 0%, #17a2b8 100%);
    padding: 80px 0 60px;
    color: white;
    position: relative;
    overflow: hidden;
}

    .kvkk-header-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" fill="none"><circle cx="20" cy="10" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="5" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="50" cy="15" r="2.5" fill="rgba(255,255,255,0.06)"/></svg>') center/cover repeat;
        opacity: 0.3;
    }

.kvkk-header-content {
    text-align: center;
    position: relative;
    z-index: 2;
}

.kvkk-header-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 30px;
    font-size: 40px;
    color: white;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.kvkk-main-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white;
}

.kvkk-header-subtitle {
    font-size: 1.2rem;
    line-height: 1.6;
    opacity: 0.9;
    max-width: 700px;
    margin: 0 auto 30px;
}

.kvkk-last-update {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* KVKK Content Section */
.kvkk-content-section {
    padding: 80px 0;
    background: #fafbfc;
}

/* KVKK Navigation (Sticky Sidebar) */
.kvkk-nav-sticky {
    position: sticky;
    top: 100px;
    z-index: 100;
}

.kvkk-nav-card {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.kvkk-nav-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--toku-primary);
}

.kvkk-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .kvkk-nav-list li {
        margin-bottom: 12px;
    }

.kvkk-nav-link {
    display: block;
    padding: 12px 16px;
    color: var(--toku-gray-600);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

    .kvkk-nav-link:hover {
        background: rgba(27, 110, 194, 0.1);
        color: var(--toku-primary);
        border-left-color: var(--toku-primary);
        transform: translateX(4px);
    }

    .kvkk-nav-link.active {
        background: var(--toku-primary);
        color: white;
        border-left-color: var(--toku-primary-dark);
    }

/* KVKK Main Content */
.kvkk-main-content {
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* KVKK Sections */
.kvkk-section {
    padding: 48px 40px;
    border-bottom: 1px solid #e9ecef;
}

    .kvkk-section:last-child {
        border-bottom: none;
    }

.kvkk-section-header {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
}

.kvkk-section-number {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.kvkk-section-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin: 0;
    line-height: 1.3;
}

.kvkk-section-content {
    margin-left: 84px;
}

.kvkk-text {
    font-size: 16px;
    line-height: 1.8;
    color: var(--toku-gray-700);
    margin-bottom: 24px;
}

/* KVKK Highlight Box */
.kvkk-highlight-box {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.1) 0%, rgba(27, 110, 194, 0.1) 100%);
    border: 1px solid rgba(23, 162, 184, 0.2);
    border-radius: 12px;
    padding: 24px;
    margin: 24px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

    .kvkk-highlight-box i {
        color: var(--toku-secondary);
        font-size: 20px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .kvkk-highlight-box p {
        margin: 0;
        color: var(--toku-gray-700);
        line-height: 1.6;
    }

/* KVKK Info Card */
.kvkk-info-card {
    background: #f8f9fa;
    border-radius: 16px;
    padding: 32px;
    border: 1px solid #e9ecef;
}

    .kvkk-info-card h4 {
        color: var(--toku-primary);
        font-weight: 700;
        font-size: 1.3rem;
        margin-bottom: 24px;
    }

.kvkk-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .kvkk-info-list li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid #dee2e6;
        font-size: 15px;
    }

        .kvkk-info-list li:last-child {
            border-bottom: none;
        }

        .kvkk-info-list li i {
            color: var(--toku-primary);
            width: 20px;
            flex-shrink: 0;
        }

/* KVKK Data Categories */
.kvkk-data-category {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    height: 100%;
}

    .kvkk-data-category h5 {
        color: var(--toku-primary);
        font-weight: 600;
        font-size: 1.1rem;
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .kvkk-data-category ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .kvkk-data-category li {
        padding: 8px 0;
        color: var(--toku-gray-700);
        font-size: 14px;
        border-bottom: 1px solid #f1f3f4;
        position: relative;
        padding-left: 20px;
    }

        .kvkk-data-category li:last-child {
            border-bottom: none;
        }

        .kvkk-data-category li:before {
            content: '•';
            color: var(--toku-secondary);
            font-weight: bold;
            position: absolute;
            left: 0;
            top: 8px;
        }

/* KVKK Purpose Grid */
.kvkk-purpose-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.kvkk-purpose-item {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .kvkk-purpose-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

.kvkk-purpose-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin: 0 auto 20px;
}

.kvkk-purpose-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 12px;
}

.kvkk-purpose-item p {
    font-size: 14px;
    color: var(--toku-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* KVKK Legal Basis */
.kvkk-legal-basis {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.kvkv-legal-item {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.kvkk-legal-code {
    background: var(--toku-primary);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: 2px;
}

/* KVKK Sharing List */
.kvkk-sharing-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.kvkk-sharing-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease;
}

    .kvkk-sharing-item:hover {
        transform: translateY(-2px);
    }

    .kvkk-sharing-item i {
        color: var(--toku-secondary);
        font-size: 24px;
        flex-shrink: 0;
    }

    .kvkk-sharing-item span {
        font-weight: 500;
        color: var(--toku-gray-700);
    }

/* KVKK Security Grid */
.kvkk-security-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.kvkk-security-item {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease;
}

    .kvkk-security-item:hover {
        transform: translateY(-5px);
    }

    .kvkk-security-item i {
        font-size: 32px;
        color: var(--toku-accent);
        margin-bottom: 20px;
    }

    .kvkk-security-item h5 {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--toku-gray-800);
        margin-bottom: 12px;
    }

    .kvkk-security-item p {
        font-size: 14px;
        color: var(--toku-gray-600);
        line-height: 1.6;
        margin: 0;
    }

/* KVKK Rights Grid */
.kvkk-rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.kvkk-right-item {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .kvkk-right-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
        border-color: var(--toku-primary);
    }

.kvkk-right-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.1) 0%, rgba(220, 53, 69, 0.2) 100%);
    border: 2px solid rgba(220, 53, 69, 0.3);
    color: #dc3545;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    margin: 0 auto 16px;
    transition: all 0.3s ease;
}

.kvkk-right-item:hover .kvkk-right-icon {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: white;
    border-color: #dc3545;
}

.kvkk-right-item h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 8px;
}

.kvkk-right-item p {
    font-size: 14px;
    color: var(--toku-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* KVKK Contact Grid */
.kvkk-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin: 32px 0;
}

.kvkk-contact-item {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease;
}

.kvkv-contact-item:hover {
    transform: translateY(-5px);
}

.kvkk-contact-item i {
    font-size: 32px;
    color: var(--toku-primary);
    margin-bottom: 16px;
}

.kvkk-contact-item h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 8px;
}

.kvkk-contact-item p {
    font-size: 14px;
    color: var(--toku-gray-600);
    line-height: 1.5;
    margin: 0;
}

/* KVKK Note Box */
.kvkk-note-box {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.15) 100%);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-left: 4px solid #ffc107;
    border-radius: 12px;
    padding: 24px;
    margin-top: 32px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

    .kvkk-note-box i {
        color: #ffc107;
        font-size: 20px;
        margin-top: 2px;
        flex-shrink: 0;
    }

    .kvkk-note-box p {
        margin: 0;
        color: var(--toku-gray-700);
        line-height: 1.6;
        font-size: 15px;
    }

/* KVKK CTA Section */
.kvkk-cta-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 0;
    border-top: 1px solid #dee2e6;
}

.kvkk-cta-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
}

.kvkk-cta-text {
    font-size: 1.1rem;
    color: var(--toku-gray-600);
    line-height: 1.6;
    margin-bottom: 32px;
}

.kvkk-cta-buttons .btn {
    padding: 16px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 50px;
    margin: 0 8px 16px;
    transition: all 0.3s ease;
}

.kvkk-cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(27, 110, 194, 0.4);
}

.kvkk-cta-buttons .btn-outline-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(27, 110, 194, 0.2);
}

/* KVKK Responsive Design */
@media (max-width: 992px) {
    .kvkk-main-title {
        font-size: 2.5rem;
    }

    .kvkk-content-section {
        padding: 60px 0;
    }

    .kvkk-section {
        padding: 32px 24px;
    }

    .kvkk-section-content {
        margin-left: 0;
        margin-top: 24px;
    }

    .kvkk-section-header {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .kvkk-nav-sticky {
        position: static;
        margin-bottom: 32px;
    }

    .kvkk-purpose-grid,
    .kvkk-security-grid,
    .kvkk-rights-grid {
        grid-template-columns: 1fr;
    }

    .kvkk-cta-section {
        padding: 60px 0;
    }

    .kvkk-cta-title {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .kvkk-breadcrumb-section {
        margin-top: 70px;
        padding: 16px 0;
    }

    .kvkk-header-section {
        padding: 60px 0 40px;
    }

    .kvkk-main-title {
        font-size: 2rem;
    }

    .kvkk-header-subtitle {
        font-size: 1.1rem;
    }

    .kvkk-header-icon {
        width: 80px;
        height: 80px;
        font-size: 32px;
    }

    .kvkk-section {
        padding: 24px 16px;
    }

    .kvkk-section-number {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }

    .kvkk-section-title {
        font-size: 1.5rem;
    }

    .kvkk-nav-card {
        padding: 24px 16px;
    }

    .kvkk-main-content {
        border-radius: 16px;
    }

    .kvkk-sharing-list,
    .kvkk-contact-grid {
        grid-template-columns: 1fr;
    }

    .kvkk-cta-buttons .btn {
        display: block;
        width: 100%;
        margin: 8px 0;
    }
}

@media (max-width: 576px) {
    .kvkk-main-title {
        font-size: 1.75rem;
    }

    .kvkk-header-section {
        padding: 40px 0 32px;
    }

    .kvkk-cta-title {
        font-size: 1.75rem;
    }

    .kvkk-section-title {
        font-size: 1.25rem;
    }

    .kvkk-purpose-item,
    .kvkk-security-item,
    .kvkk-right-item,
    .kvkk-contact-item {
        padding: 24px 16px;
    }

    .kvkk-data-category {
        padding: 16px;
    }
}


/*
📁 EKLENECEKresmiYER: MultiSiteManager.Web/wwwroot/css/Toku/site.css (dosyanın en sonuna)
🎯 AÇIKLAMA: KVKK Sayfası CSS Stilleri - ÇAKIŞMA ÖNLEYICI
⚠️ NOT: Tüm class isimleri kvkk- prefix ile başlar, diğer sayfalarla çakışmaz
*/

/*
    1.4. İş Ortaklığı Sayfası Stilleri
📁 EKLENECEKresmiYER: MultiSiteManager.Web/wwwroot/css/Toku/site.css (dosyanın en sonuna)
🎯 AÇIKLAMA: İş Ortaklığı Sayfası CSS Stilleri - ÇAKIŞMA ÖNLEYICI
⚠️ NOT: Tüm class isimleri partnership- prefix ile başlar, diğer sayfalarla çakışmaz
*/

/* ===== İŞ ORTAKLIĞI SAYFASI STİLLERİ (ÇAKIŞMASIZ) ===== */

/* Partnership Breadcrumb - Özel */
.partnership-breadcrumb-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /*    padding: 20px 0;
    margin-top: 80px;*/
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #dee2e6;
}

.partnership-breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

    .partnership-breadcrumb .breadcrumb-item a {
        color: var(--toku-primary);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

        .partnership-breadcrumb .breadcrumb-item a:hover {
            color: var(--toku-secondary);
        }

/* Partnership Hero Section */
.partnership-hero-section {
    background: linear-gradient(135deg, #1b6ec2 0%, #17a2b8 100%);
    padding: 100px 0 80px;
    color: white;
    position: relative;
    overflow: hidden;
}

    .partnership-hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="none"><path d="M0,0 Q250,80 500,40 T1000,20 L1000,0 Z" fill="rgba(255,255,255,0.1)"/></svg>') bottom center/cover no-repeat;
        opacity: 0.4;
    }

.partnership-hero-content {
    position: relative;
    z-index: 2;
}

.partnership-hero-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.partnership-hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 24px;
    line-height: 1.2;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.partnership-hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 550px;
    margin-bottom: 40px;
}

/* Partnership Hero Stats */
.partnership-hero-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.partnership-stat-item {
    text-align: center;
}

.partnership-stat-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: #d69e2e;
    line-height: 1;
    margin-bottom: 8px;
}

.partnership-stat-label {
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Partnership Hero Visual */
.partnership-hero-visual {
    position: relative;
    z-index: 2;
}

.partnership-visual-container {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.partnership-hero-image {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.partnership-visual-container:hover .partnership-hero-image {
    transform: scale(1.05);
}

.partnership-floating-card {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--toku-primary);
    padding: 20px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 14px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    animation: partnershipFloat 3s ease-in-out infinite;
}

    .partnership-floating-card i {
        font-size: 20px;
        color: var(--toku-secondary);
    }

@keyframes partnershipFloat {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Partnership Section Headers */
.partnership-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.partnership-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
    line-height: 1.3;
}

.partnership-section-subtitle {
    font-size: 1.2rem;
    color: var(--toku-gray-600);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Partnership Types Section */
.partnership-types-section {
    padding: 100px 0;
    background: #fafbfc;
}

.partnership-type-card {
    background: white;
    border-radius: 24px;
    padding: 40px 32px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .partnership-type-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        border-color: var(--toku-primary);
    }

.partnership-featured {
    border: 2px solid var(--toku-primary);
    position: relative;
}

.partnership-featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.partnership-type-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.partnership-type-card:hover .partnership-type-icon {
    transform: scale(1.1) rotate(5deg);
}

.partnership-type-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
}

.partnership-type-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--toku-gray-600);
    margin-bottom: 24px;
}

.partnership-type-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .partnership-type-benefits li {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        font-size: 14px;
        color: var(--toku-gray-700);
        border-bottom: 1px solid #f1f3f4;
    }

        .partnership-type-benefits li:last-child {
            border-bottom: none;
        }

        .partnership-type-benefits li i {
            color: var(--toku-accent);
            font-size: 14px;
            width: 16px;
            flex-shrink: 0;
        }

/* Partnership Why Section */
.partnership-why-section {
    padding: 100px 0;
    background: white;
}

.partnership-why-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
    line-height: 1.3;
}

.partnership-why-subtitle {
    font-size: 1.2rem;
    color: var(--toku-gray-600);
    line-height: 1.6;
    margin-bottom: 40px;
}

.partnership-why-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.partnership-why-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.partnership-why-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(27, 110, 194, 0.1) 0%, rgba(23, 162, 184, 0.1) 100%);
    border: 2px solid rgba(27, 110, 194, 0.2);
    color: var(--toku-primary);
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.partnership-why-item:hover .partnership-why-icon {
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    border-color: var(--toku-primary);
    color: white;
    transform: scale(1.1);
}

.partnership-why-text h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 8px;
}

.partnership-why-text p {
    font-size: 15px;
    color: var(--toku-gray-600);
    line-height: 1.6;
    margin: 0;
}

/* Partnership Achievement Grid */
.partnership-why-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.partnership-achievement-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 400px;
}

.partnership-achievement-item {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease;
}

    .partnership-achievement-item:hover {
        transform: translateY(-5px);
    }

.partnership-achievement-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--toku-primary);
    line-height: 1;
    margin-bottom: 8px;
}

.partnership-achievement-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--toku-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Partnership Process Section */
.partnership-process-section {
    padding: 100px 0;
    background: #fafbfc;
}

.partnership-process-timeline {
    display: flex;
    flex-direction: column;
    gap: 40px;
    max-width: 800px;
    margin: 0 auto;
}

.partnership-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    position: relative;
}

    .partnership-timeline-item:not(:last-child):after {
        content: '';
        position: absolute;
        left: 35px;
        top: 70px;
        width: 2px;
        height: 40px;
        background: linear-gradient(to bottom, var(--toku-secondary), transparent);
    }

.partnership-timeline-number {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 10px 30px rgba(27, 110, 194, 0.3);
}

.partnership-timeline-content {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    flex-grow: 1;
}

    .partnership-timeline-content h4 {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--toku-gray-800);
        margin-bottom: 12px;
    }

    .partnership-timeline-content p {
        font-size: 15px;
        line-height: 1.6;
        color: var(--toku-gray-600);
        margin: 0;
    }

/* Partnership Benefits Section */
.partnership-benefits-section {
    padding: 100px 0;
    background: white;
}

.partnership-benefit-card {
    background: white;
    border-radius: 20px;
    padding: 40px 24px;
    text-align: center;
    height: 100%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .partnership-benefit-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        border-color: var(--toku-primary);
    }

.partnership-benefit-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1) 0%, rgba(40, 167, 69, 0.2) 100%);
    border: 2px solid rgba(40, 167, 69, 0.3);
    color: var(--toku-accent);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    margin: 0 auto 24px;
    transition: all 0.3s ease;
}

.partnership-benefit-card:hover .partnership-benefit-icon {
    background: linear-gradient(135deg, var(--toku-accent) 0%, #20c997 100%);
    border-color: var(--toku-accent);
    color: white;
    transform: scale(1.1);
}

.partnership-benefit-card h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
}

.partnership-benefit-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--toku-gray-600);
    margin: 0;
}

/* Partnership Testimonials Section */
.partnership-testimonials-section {
    padding: 100px 0;
    background: #fafbfc;
}

.partnership-testimonial-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: transform 0.3s ease;
}

    .partnership-testimonial-card:hover {
        transform: translateY(-5px);
    }

.partnership-testimonial-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
}

    .partnership-testimonial-stars i {
        color: #ffc107;
        font-size: 16px;
    }

.partnership-testimonial-content p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--toku-gray-700);
    font-style: italic;
    margin-bottom: 24px;
    position: relative;
}

    .partnership-testimonial-content p:before {
        content: '"';
        position: absolute;
        left: -10px;
        top: -10px;
        font-size: 3rem;
        color: var(--toku-primary);
        opacity: 0.3;
        font-family: serif;
    }

.partnership-testimonial-author {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.partnership-author-info h6 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 4px;
}

.partnership-author-info span {
    font-size: 14px;
    color: var(--toku-gray-600);
}

/* Partnership CTA Section */
.partnership-cta-section {
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    padding: 100px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

    .partnership-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" fill="none"><circle cx="10" cy="10" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="90" cy="5" r="1.5" fill="rgba(255,255,255,0.08)"/><circle cx="50" cy="15" r="2.5" fill="rgba(255,255,255,0.06)"/></svg>') center/cover repeat;
        opacity: 0.3;
    }

.partnership-cta-content {
    position: relative;
    z-index: 2;
}

.partnership-cta-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: white;
    margin: 0 auto 32px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.partnership-cta-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.partnership-cta-text {
    font-size: 1.2rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.partnership-cta-buttons {
    margin-bottom: 40px;
}

.partnership-cta-primary,
.partnership-cta-secondary {
    padding: 18px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    margin: 0 8px 16px;
    transition: all 0.3s ease;
    min-width: 200px;
}

.partnership-cta-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

    .partnership-cta-primary:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        color: white;
    }

.partnership-cta-secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
}

    .partnership-cta-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: white;
        transform: translateY(-3px);
        color: white;
    }

.partnership-contact-info {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.partnership-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

    .partnership-contact-item i {
        font-size: 18px;
    }

/* Partnership Responsive Design */
@media (max-width: 992px) {
    .partnership-hero-title {
        font-size: 2.8rem;
    }

    .partnership-section-title {
        font-size: 2rem;
    }

    .partnership-hero-stats {
        gap: 24px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .partnership-types-section,
    .partnership-why-section,
    .partnership-process-section,
    .partnership-benefits-section,
    .partnership-testimonials-section,
    .partnership-cta-section {
        padding: 80px 0;
    }

    .partnership-why-list {
        gap: 24px;
    }

    .partnership-achievement-grid {
        grid-template-columns: 1fr;
        max-width: 300px;
    }

    .partnership-process-timeline {
        gap: 32px;
    }

    .partnership-timeline-item {
        gap: 20px;
    }

    .partnership-timeline-number {
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .partnership-breadcrumb-section {
        margin-top: 70px;
        padding: 16px 0;
    }

    .partnership-hero-section {
        padding: 80px 0 60px;
    }

    .partnership-hero-title {
        font-size: 2.2rem;
    }

    .partnership-hero-subtitle {
        font-size: 1.1rem;
    }

    .partnership-hero-stats {
        gap: 20px;
    }

    .partnership-stat-number {
        font-size: 2rem;
    }

    .partnership-floating-card {
        bottom: 20px;
        right: 20px;
        padding: 16px 20px;
        font-size: 12px;
    }

    .partnership-why-item {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .partnership-timeline-item {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

        .partnership-timeline-item:not(:last-child):after {
            display: none;
        }

    .partnership-cta-title {
        font-size: 2.2rem;
    }

    .partnership-cta-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .partnership-cta-primary,
    .partnership-cta-secondary {
        width: 100%;
        max-width: 300px;
    }

    .partnership-contact-info {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .partnership-hero-title {
        font-size: 1.9rem;
    }

    .partnership-section-title {
        font-size: 1.75rem;
    }

    .partnership-type-card,
    .partnership-benefit-card,
    .partnership-testimonial-card {
        padding: 32px 20px;
    }

    .partnership-timeline-content {
        padding: 24px 20px;
    }

    .partnership-cta-title {
        font-size: 1.9rem;
    }

    .partnership-cta-text {
        font-size: 1.1rem;
    }
}

/*
📁 EKLENECEKresmiYER: MultiSiteManager.Web/wwwroot/css/Toku/site.css (dosyanın en sonuna)
🎯 AÇIKLAMA: İş Ortaklığı Sayfası CSS Stilleri - ÇAKIŞMA ÖNLEYICI
⚠️ NOT: Tüm class isimleri partnership- prefix ile başlar, diğer sayfalarla çakışmaz
*/

/*
    1.5. Kariyer Sayfası Stilleri
📁 EKLENECEKresmiYER: MultiSiteManager.Web/wwwroot/css/Toku/site.css (dosyanın en sonuna)
🎯 AÇIKLAMA: Kariyer Sayfası CSS Stilleri - ÇAKIŞMA ÖNLEYICI
⚠️ NOT: Tüm class isimleri career- prefix ile başlar, diğer sayfalarla çakışmaz
*/

/* ===== KARİYER SAYFASI STİLLERİ (ÇAKIŞMASIZ) ===== */

/* Career Breadcrumb - Özel */
.career-breadcrumb-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    /*    padding: 20px 0;
    margin-top: 80px;*/
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 1px solid #dee2e6;
}

.career-breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

    .career-breadcrumb .breadcrumb-item a {
        color: var(--toku-primary);
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

        .career-breadcrumb .breadcrumb-item a:hover {
            color: var(--toku-secondary);
        }

/* Career Hero Section */
.career-hero-section {
    background: linear-gradient(135deg, #1b6ec2 0%, #17a2b8 100%);
    padding: 120px 0 100px;
    color: white;
    position: relative;
    overflow: hidden;
}

    .career-hero-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 300" fill="none"><circle cx="100" cy="50" r="3" fill="rgba(255,255,255,0.1)"/><circle cx="200" cy="120" r="2" fill="rgba(255,255,255,0.08)"/><circle cx="300" cy="80" r="2.5" fill="rgba(255,255,255,0.06)"/><circle cx="500" cy="200" r="4" fill="rgba(255,255,255,0.05)"/><circle cx="700" cy="60" r="1.5" fill="rgba(255,255,255,0.1)"/><circle cx="900" cy="180" r="3.5" fill="rgba(255,255,255,0.07)"/></svg>') center/cover no-repeat;
        opacity: 0.4;
    }

.career-hero-content {
    position: relative;
    z-index: 2;
}

.career-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 32px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

    .career-hero-badge i {
        font-size: 16px;
        color: #d69e2e;
    }

.career-hero-title {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 28px;
    line-height: 1.1;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.career-hero-subtitle {
    font-size: 1.3rem;
    line-height: 1.7;
    opacity: 0.9;
    max-width: 580px;
    margin-bottom: 48px;
}

/* Career Hero Stats */
.career-hero-stats {
    display: flex;
    gap: 32px;
    margin-top: 48px;
}

.career-stat-box {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.1);
    padding: 20px 24px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
}

    .career-stat-box:hover {
        transform: translateY(-5px);
    }

.career-stat-icon {
    width: 50px;
    height: 50px;
    background: rgba(214, 158, 46, 0.2);
    color: #d69e2e;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    flex-shrink: 0;
}

.career-stat-number {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: white;
}

.career-stat-label {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 500;
}

/* Career Hero Visual */
.career-hero-visual {
    position: relative;
    z-index: 2;
}

.career-visual-container {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}

.career-hero-image {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

.career-visual-container:hover .career-hero-image {
    transform: scale(1.05);
}

/* Career Floating Elements */
.career-floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.career-float-item {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    color: var(--toku-primary);
    padding: 16px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.career-float-1 {
    top: 20px;
    left: 20px;
    animation: careerFloat1 4s ease-in-out infinite;
}

.career-float-2 {
    top: 50%;
    right: 20px;
    animation: careerFloat2 3s ease-in-out infinite 1s;
}

.career-float-3 {
    bottom: 30px;
    left: 30px;
    animation: careerFloat3 3.5s ease-in-out infinite 2s;
}

@keyframes careerFloat1 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

@keyframes careerFloat2 {
    0%, 100% {
        transform: translateX(0px) translateY(0px);
    }

    50% {
        transform: translateX(-10px) translateY(-10px);
    }
}

@keyframes careerFloat3 {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(-2deg);
    }
}

/* Career Section Headers */
.career-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.career-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
    line-height: 1.3;
}

.career-section-subtitle {
    font-size: 1.2rem;
    color: var(--toku-gray-600);
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Career Why Section */
.career-why-section {
    padding: 100px 0;
    background: #fafbfc;
}

.career-why-card {
    background: white;
    border-radius: 24px;
    padding: 40px 32px;
    height: 100%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

    .career-why-card:hover {
        transform: translateY(-12px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        border-color: var(--toku-primary);
    }

.career-featured-card {
    border: 2px solid var(--toku-primary);
    position: relative;
}

.career-featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.career-why-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--toku-accent) 0%, #20c997 100%);
    color: white;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.career-why-card:hover .career-why-icon {
    transform: scale(1.1) rotate(5deg);
}

.career-why-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 16px;
    line-height: 1.3;
}

.career-why-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--toku-gray-600);
    margin-bottom: 24px;
}

.career-why-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.career-feature-tag {
    background: rgba(27, 110, 194, 0.1);
    color: var(--toku-primary);
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(27, 110, 194, 0.2);
}

/* Career Positions Section */
.career-positions-section {
    padding: 100px 0;
    background: white;
}

/* Career Filter */
.career-filter-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
}

.career-filter-btn {
    background: transparent;
    border: 2px solid #e9ecef;
    color: var(--toku-gray-600);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .career-filter-btn:hover,
    .career-filter-btn.active {
        background: var(--toku-primary);
        border-color: var(--toku-primary);
        color: white;
        transform: translateY(-2px);
    }

/* Career Position Cards */
.career-position-card {
    background: white;
    border-radius: 20px;
    padding: 32px;
    height: 100%;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .career-position-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
        border-color: var(--toku-primary);
    }

.career-position-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.career-position-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--toku-gray-800);
    margin-bottom: 8px;
    line-height: 1.3;
}

.career-position-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.career-position-department {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--toku-primary);
    font-size: 14px;
    font-weight: 600;
}

.career-position-type {
    font-size: 12px;
    color: var(--toku-gray-500);
    font-weight: 500;
}

/* Career Position Badges */
.career-position-badge {
    padding: 6px 16px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.career-badge-hot {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
}

.career-badge-urgent {
    background: linear-gradient(135deg, #dc3545 0%, #fd7e14 100%);
    color: white;
    animation: careerBadgePulse 2s ease-in-out infinite;
}

@keyframes careerBadgePulse {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

.career-position-description {
    font-size: 15px;
    line-height: 1.7;
    color: var(--toku-gray-600);
    margin-bottom: 20px;
}

/* Career Requirements */
.career-position-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.career-req-tag {
    background: rgba(23, 162, 184, 0.1);
    color: var(--toku-secondary);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(23, 162, 184, 0.2);
}

.career-position-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #e9ecef;
}

.career-position-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--toku-gray-600);
    font-size: 14px;
    font-weight: 500;
}

    .career-position-location i {
        color: var(--toku-primary);
        font-size: 12px;
    }

.career-apply-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    transition: all 0.3s ease;
}

    .career-apply-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(27, 110, 194, 0.4);
    }

/* Career Benefits Section */
.career-benefits-section {
    padding: 100px 0;
    background: #fafbfc;
}

.career-benefit-card {
    background: white;
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    height: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
}

    .career-benefit-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        border-color: var(--toku-primary);
    }

.career-benefit-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.2) 100%);
    border: 2px solid rgba(255, 193, 7, 0.3);
    color: #ffc107;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.career-benefit-card:hover .career-benefit-icon {
    background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
    border-color: #ffc107;
    color: white;
    transform: scale(1.1);
}

.career-benefit-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 12px;
}

.career-benefit-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--toku-gray-600);
    margin: 0;
}

/* Career Process Section */
.career-process-section {
    padding: 100px 0;
    background: white;
}

.career-process-flow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

    .career-process-flow::before {
        content: '';
        position: absolute;
        top: 35px;
        left: 50px;
        right: 50px;
        height: 2px;
        background: linear-gradient(to right, var(--toku-primary), var(--toku-secondary));
        z-index: 1;
    }

.career-flow-item {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}

.career-flow-number {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 20px;
    box-shadow: 0 8px 25px rgba(27, 110, 194, 0.3);
    border: 4px solid white;
}

.career-flow-content h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--toku-gray-800);
    margin-bottom: 8px;
}

.career-flow-content p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--toku-gray-600);
    margin: 0;
    max-width: 180px;
    margin-left: auto;
    margin-right: auto;
}

/* Career CTA Section */
.career-cta-section {
    background: linear-gradient(135deg, var(--toku-primary) 0%, var(--toku-secondary) 100%);
    padding: 100px 0;
    color: white;
    position: relative;
    overflow: hidden;
}

    .career-cta-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" fill="none"><path d="M0,10 Q25,0 50,10 T100,10" stroke="rgba(255,255,255,0.1)" stroke-width="0.5" fill="none"/><path d="M0,15 Q25,5 50,15 T100,15" stroke="rgba(255,255,255,0.08)" stroke-width="0.5" fill="none"/></svg>') center/cover repeat;
        opacity: 0.3;
    }

.career-cta-content {
    position: relative;
    z-index: 2;
}

.career-cta-icon {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    color: white;
    margin: 0 auto 32px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
    animation: careerCtaFloat 3s ease-in-out infinite;
}

@keyframes careerCtaFloat {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.career-cta-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.career-cta-text {
    font-size: 1.2rem;
    line-height: 1.7;
    opacity: 0.9;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.career-cta-buttons {
    margin-bottom: 40px;
}

.career-cta-primary,
.career-cta-secondary {
    padding: 18px 36px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 50px;
    margin: 0 8px 16px;
    transition: all 0.3s ease;
    min-width: 200px;
}

.career-cta-primary {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

    .career-cta-primary:hover {
        background: rgba(255, 255, 255, 0.3);
        border-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-3px);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        color: white;
    }

.career-cta-secondary {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
}

    .career-cta-secondary:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: white;
        transform: translateY(-3px);
        color: white;
    }

.career-contact-info {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}

.career-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.9;
}

    .career-contact-item i {
        font-size: 18px;
    }

/* Career Responsive Design */
@media (max-width: 992px) {
    .career-hero-title {
        font-size: 3rem;
    }

    .career-section-title {
        font-size: 2rem;
    }

    .career-hero-stats {
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .career-stat-box {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        min-width: 120px;
    }

    .career-why-section,
    .career-positions-section,
    .career-benefits-section,
    .career-process-section,
    .career-cta-section {
        padding: 80px 0;
    }

    .career-filter-container {
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .career-process-flow {
        flex-direction: column;
        gap: 40px;
        align-items: center;
    }

        .career-process-flow::before {
            display: none;
        }

    .career-flow-content p {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    .career-breadcrumb-section {
        margin-top: 70px;
        padding: 16px 0;
    }

    .career-hero-section {
        padding: 100px 0 80px;
    }

    .career-hero-title {
        font-size: 2.5rem;
    }

    .career-hero-subtitle {
        font-size: 1.1rem;
    }

    .career-hero-stats {
        gap: 16px;
    }

    .career-stat-box {
        padding: 16px 20px;
    }

    .career-stat-number {
        font-size: 1.5rem;
    }

    .career-floating-elements {
        display: none;
    }

    .career-position-header {
        flex-direction: column;
        gap: 12px;
    }

    .career-position-footer {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .career-apply-btn {
        width: 100%;
        text-align: center;
    }

    .career-cta-title {
        font-size: 2.2rem;
    }

    .career-cta-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .career-cta-primary,
    .career-cta-secondary {
        width: 100%;
        max-width: 300px;
    }

    .career-contact-info {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
}

@media (max-width: 576px) {
    .career-hero-title {
        font-size: 2rem;
    }

    .career-section-title {
        font-size: 1.75rem;
    }

    .career-why-card,
    .career-position-card,
    .career-benefit-card {
        padding: 28px 20px;
    }

    .career-filter-btn {
        padding: 10px 16px;
        font-size: 13px;
    }

    .career-cta-title {
        font-size: 1.9rem;
    }

    .career-cta-text {
        font-size: 1.1rem;
    }

    .career-hero-badge {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/*
📁 EKLENECEKresmiYER: MultiSiteManager.Web/wwwroot/css/Toku/site.css (dosyanın en sonuna)
🎯 AÇIKLAMA: Kariyer Sayfası CSS Stilleri - ÇAKIŞMA ÖNLEYICI
⚠️ NOT: Tüm class isimleri career- prefix ile başlar, diğer sayfalarla çakışmaz
*/


/* ============================================================
   🏆 SERTİFİKALAR SAYFASI - KURUMSAL & MODERN TASARIM
   ============================================================
   - Geniş ekran optimizasyonu
   - Kurumsal renkler (Mavi, Altın, Gri)
   - Profesyonel tasarım
   ============================================================ */

/* CSS Variables - Kurumsal Palet */
:root {
    --cert-primary: #0066b3; /* Kurumsal mavi */
    --cert-secondary: #fdb913; /* Altın sarısı */
    --cert-accent: #2c3e50; /* Koyu gri */
    --cert-light: #ecf0f1; /* Açık gri */
    --cert-lighter: #f8f9fa; /* Çok açık gri */
    --cert-text: #2c3e50; /* Koyu metin */
    --cert-text-light: #7f8c8d; /* Açık metin */
    --cert-white: #ffffff; /* Beyaz */
    --cert-border: #bdc3c7; /* Hafif gri sınır */
    --cert-success: #28a745; /* Yeşil */
    --cert-warning: #ffc107; /* Turuncu */
    --cert-danger: #dc3545; /* Kırmızı */

    --cert-transition: 0.3s ease;
    --cert-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --cert-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
    --cert-radius: 8px;
}

/* ============================================================
   CERTIFICATES PAGE - ANA KAPSAYICI
   ============================================================ */
.certificates-page {
    margin: 0;
    padding: 0;
    width: 100%;
}

/* ============================================================
   HERO SECTION - BANNER
   ============================================================ */
.cert-hero-section {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--cert-primary) 0%, var(--cert-accent) 100%);
    color: var(--cert-white);
    padding: 60px 0;
    margin: 0;
    overflow: hidden;
}

.cert-hero-overlay {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,40 Q300,20 600,40 T1200,40 L1200,120 L0,120 Z" fill="%23ffffff" opacity="0.05"/></svg>') repeat-x;
    background-size: auto 100%;
    opacity: 0.1;
}

.cert-hero-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
}

.cert-hero-content {
    animation: slideInUp 0.8s ease;
}

.cert-hero-badge {
    display: inline-block;
    background: rgba(253, 185, 19, 0.2);
    color: var(--cert-secondary);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.cert-hero-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2;
    margin: 20px 0;
    color: var(--cert-white);
}

.cert-gradient-text {
    background: linear-gradient(135deg, var(--cert-secondary) 0%, #fdd835 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cert-hero-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 25px auto 40px;
}

.cert-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cert-hero-stat {
    text-align: center;
}

.cert-stat-number {
    font-size: 36px;
    font-weight: 700;
    color: var(--cert-secondary);
    margin-bottom: 10px;
}

.cert-stat-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* ============================================================
   KONTEYNER
   ============================================================ */
.cert-container {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0 30px;
}

/* ============================================================
   FILTER SECTION
   ============================================================ */
.cert-filter-section {
    background: var(--cert-lighter);
    padding: 50px 0;
    border-bottom: 1px solid var(--cert-light);
}

.cert-filter-header {
    text-align: center;
    margin-bottom: 40px;
}

    .cert-filter-header h2 {
        font-size: 32px;
        font-weight: 700;
        color: var(--cert-primary);
        margin-bottom: 10px;
    }

    .cert-filter-header p {
        font-size: 16px;
        color: var(--cert-text-light);
    }

.cert-filter-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.cert-filter-btn {
    padding: 12px 24px;
    border: 2px solid var(--cert-border);
    background: var(--cert-white);
    color: var(--cert-text);
    border-radius: var(--cert-radius);
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    transition: all var(--cert-transition);
}

    .cert-filter-btn:hover {
        border-color: var(--cert-primary);
        color: var(--cert-primary);
        background: rgba(0, 102, 179, 0.05);
        transform: translateY(-2px);
    }

    .cert-filter-btn.active {
        background: var(--cert-primary);
        color: var(--cert-white);
        border-color: var(--cert-primary);
        box-shadow: 0 4px 12px rgba(0, 102, 179, 0.3);
    }

/* ============================================================
   SECTION HEADER
   ============================================================ */
.cert-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.cert-section-badge {
    display: inline-block;
    background: var(--cert-light);
    color: var(--cert-primary);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.cert-section-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: var(--cert-primary);
    margin-bottom: 12px;
}

.cert-section-header p {
    font-size: 16px;
    color: var(--cert-text-light);
    line-height: 1.6;
}

/* ============================================================
   GRID SECTIONS
   ============================================================ */
.cert-featured-section,
.cert-grid-section,
.cert-stats-section,
.cert-benefits-section {
    padding: 60px 0;
}

.cert-featured-section {
    background: var(--cert-white);
    border-bottom: 1px solid var(--cert-light);
}

.cert-grid-section {
    background: var(--cert-lighter);
    border-bottom: 1px solid var(--cert-light);
}

.cert-stats-section {
    background: var(--cert-white);
    border-bottom: 1px solid var(--cert-light);
}

.cert-benefits-section {
    background: var(--cert-lighter);
}

/* ============================================================
   CERTIFICATE GRID - KARTLAR
   ============================================================ */
.cert-featured-grid,
.cert-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.cert-card {
    background: var(--cert-white);
    border: 2px solid var(--cert-light);
    border-radius: var(--cert-radius);
    overflow: hidden;
    transition: all var(--cert-transition);
    box-shadow: var(--cert-shadow);
    display: flex;
    flex-direction: column;
}

    .cert-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 30px rgba(0, 102, 179, 0.15);
        border-color: var(--cert-primary);
    }

.cert-card-image {
    width: 100%;
    height: 220px;
    object-fit: contain;
    padding: 20px;
    background: var(--cert-lighter);
    border-bottom: 2px solid var(--cert-light);
}

.cert-card-header {
    padding: 25px;
    background: linear-gradient(135deg, var(--cert-primary) 0%, #0052a3 100%);
    color: var(--cert-white);
}

    .cert-card-header h3 {
        font-size: 20px;
        font-weight: 700;
        margin: 0 0 8px 0;
    }

.cert-card-number {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.cert-badge {
    display: inline-block;
    background: rgba(253, 185, 19, 0.9);
    color: var(--cert-accent);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 8px;
}

.cert-category-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 10px;
}

.cert-category-quality {
    background: rgba(0, 102, 179, 0.15);
    color: var(--cert-primary);
}

.cert-category-environment {
    background: rgba(40, 167, 69, 0.15);
    color: var(--cert-success);
}

.cert-category-safety {
    background: rgba(255, 193, 7, 0.15);
    color: #e67e00;
}

.cert-category-international {
    background: rgba(111, 66, 193, 0.15);
    color: #6f42c1;
}

.cert-category-technical {
    background: rgba(253, 126, 20, 0.15);
    color: #fd7e14;
}

.cert-card-body {
    padding: 25px;
    flex: 1;
}

    .cert-card-body p {
        font-size: 14px;
        color: var(--cert-text-light);
        line-height: 1.8;
        margin: 0 0 15px 0;
    }

    .cert-card-body strong {
        color: var(--cert-primary);
        font-weight: 600;
    }

.cert-info-item {
    display: flex;
    align-items: start;
    margin-bottom: 12px;
}

.cert-info-icon {
    margin-right: 10px;
    font-size: 16px;
}

.cert-validity {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

    .cert-validity.active {
        background: rgba(40, 167, 69, 0.1);
        color: var(--cert-success);
    }

    .cert-validity.expiring {
        background: rgba(255, 193, 7, 0.1);
        color: var(--cert-warning);
    }

    .cert-validity.expired {
        background: rgba(220, 53, 69, 0.1);
        color: var(--cert-danger);
    }

.cert-card-footer {
    padding: 20px 25px;
    background: var(--cert-lighter);
    border-top: 2px solid var(--cert-light);
    display: flex;
    gap: 10px;
}

    .cert-card-footer a,
    .cert-card-footer button {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: var(--cert-primary);
        color: var(--cert-white);
        padding: 10px 18px;
        border-radius: 6px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        transition: all var(--cert-transition);
        border: none;
        cursor: pointer;
    }

        .cert-card-footer a:hover,
        .cert-card-footer button:hover {
            background: var(--cert-accent);
            text-decoration: none;
            transform: translateY(-2px);
        }

/* ============================================================
   İSTATİSTİK KARTLARI
   ============================================================ */
.cert-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 40px;
}

.cert-stat-card {
    background: var(--cert-white);
    border: 2px solid var(--cert-light);
    border-radius: var(--cert-radius);
    padding: 35px;
    text-align: center;
    transition: all var(--cert-transition);
}

    .cert-stat-card:hover {
        border-color: var(--cert-primary);
        box-shadow: var(--cert-shadow-md);
        transform: translateY(-5px);
    }

.cert-stat-icon {
    font-size: 40px;
    margin-bottom: 15px;
}

.cert-stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--cert-primary);
    margin-bottom: 10px;
}

.cert-stat-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--cert-text);
    margin-bottom: 8px;
}

.cert-stat-desc {
    font-size: 13px;
    color: var(--cert-text-light);
    line-height: 1.5;
}

/* ============================================================
   FAYDA KARTLARI
   ============================================================ */
.cert-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.cert-benefit-card {
    background: var(--cert-white);
    border: 2px solid var(--cert-light);
    border-radius: var(--cert-radius);
    padding: 35px;
    transition: all var(--cert-transition);
    text-align: center;
}

    .cert-benefit-card:hover {
        border-color: var(--cert-secondary);
        box-shadow: 0 6px 25px rgba(253, 185, 19, 0.2);
        transform: translateY(-5px);
    }

.cert-benefit-icon {
    font-size: 42px;
    margin-bottom: 20px;
}

.cert-benefit-card h3 {
    font-size: 19px;
    font-weight: 700;
    color: var(--cert-primary);
    margin-bottom: 15px;
}

.cert-benefit-card p {
    font-size: 14px;
    color: var(--cert-text-light);
    line-height: 1.7;
}

/* ============================================================
   CTA SECTION
   ============================================================ */
.cert-cta-section {
    position: relative;
    background: linear-gradient(135deg, var(--cert-primary) 0%, var(--cert-accent) 100%);
    color: var(--cert-white);
    padding: 80px 0;
    text-align: center;
    overflow: hidden;
}

.cert-cta-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"><path d="M0,40 Q300,20 600,40 T1200,40 L1200,120 L0,120 Z" fill="%23ffffff" opacity="0.5"/></svg>');
}

.cert-cta-content {
    position: relative;
    z-index: 2;
}

.cert-cta-icon {
    font-size: 48px;
    margin-bottom: 20px;
}

.cert-cta-title {
    font-size: 36px;
    font-weight: 700;
    margin: 20px 0;
    color: var(--cert-white);
}

.cert-cta-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 15px auto 30px;
}

.cert-cta-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin: 30px 0;
    flex-wrap: wrap;
}

.cert-btn {
    padding: 14px 32px;
    border-radius: var(--cert-radius);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: all var(--cert-transition);
    border: 2px solid transparent;
    display: inline-block;
}

.cert-btn-primary {
    background: var(--cert-secondary);
    color: var(--cert-accent);
}

    .cert-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(253, 185, 19, 0.4);
        text-decoration: none;
    }

.cert-btn-outline {
    background: transparent;
    color: var(--cert-white);
    border-color: var(--cert-white);
}

    .cert-btn-outline:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateY(-2px);
        text-decoration: none;
    }

.cert-btn-lg {
    padding: 16px 38px;
    font-size: 16px;
}

.cert-cta-contact-info {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 30px;
    flex-wrap: wrap;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cert-cta-info-item {
    font-size: 14px;
}

    .cert-cta-info-item a {
        color: var(--cert-white);
        text-decoration: none;
        transition: opacity var(--cert-transition);
    }

        .cert-cta-info-item a:hover {
            opacity: 0.8;
        }

/* ============================================================
   FAQ SECTION
   ============================================================ */
.cert-faq-section {
    background: var(--cert-white);
    padding: 60px 0;
    border-bottom: 1px solid var(--cert-light);
}

.cert-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.cert-faq-item {
    background: var(--cert-lighter);
    border: 2px solid var(--cert-light);
    border-radius: var(--cert-radius);
    overflow: hidden;
    transition: all var(--cert-transition);
}

    .cert-faq-item.active {
        border-color: var(--cert-primary);
    }

.cert-faq-question {
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cert-white);
    transition: all var(--cert-transition);
}

    .cert-faq-question:hover {
        background: var(--cert-lighter);
    }

    .cert-faq-question h4 {
        font-size: 16px;
        font-weight: 600;
        color: var(--cert-primary);
        margin: 0;
    }

    .cert-faq-question::after {
        content: '+';
        font-size: 24px;
        color: var(--cert-primary);
        transition: transform var(--cert-transition);
    }

.cert-faq-item.active .cert-faq-question::after {
    transform: rotate(45deg);
}

.cert-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--cert-transition);
}

.cert-faq-item.active .cert-faq-answer {
    max-height: 300px;
}

.cert-faq-answer p {
    padding: 0 25px 25px;
    margin: 0;
    font-size: 14px;
    color: var(--cert-text-light);
    line-height: 1.7;
}

/* ============================================================
   LOADING STATE
   ============================================================ */
.cert-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--cert-text-light);
}

    .cert-loading p {
        font-size: 16px;
        margin: 0;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .cert-hero-title {
        font-size: 36px;
    }

    .cert-hero-stats {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .cert-filter-buttons {
        flex-direction: column;
    }

    .cert-featured-grid,
    .cert-grid {
        grid-template-columns: 1fr;
    }

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

    .cert-benefits-grid {
        grid-template-columns: 1fr;
    }

    .cert-faq-grid {
        grid-template-columns: 1fr;
    }
}


/* QR Business Card - İzole CSS */
/* Tüm class'lar .qr-bc- prefix'i ile başlıyor */

.qr-bc-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.qr-bc-wrapper {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.qr-bc-container {
    max-width: 800px;
    margin: 0 auto;
}

.qr-bc-title {
    text-align: center;
    color: white;
    margin-bottom: 30px;
    font-size: 2em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.qr-bc-form-container {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}

.qr-bc-subtitle {
    color: #667eea;
    margin-bottom: 20px;
    font-size: 1.5em;
}

.qr-bc-form-group {
    margin-bottom: 20px;
}

.qr-bc-label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 600;
}

.qr-bc-input,
.qr-bc-textarea {
    width: 100%;
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.3s;
}

    .qr-bc-input:focus,
    .qr-bc-textarea:focus {
        outline: none;
        border-color: #667eea;
    }

.qr-bc-small-text {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
}

.qr-bc-btn-generate,
.qr-bc-btn-download {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .qr-bc-btn-generate:hover,
    .qr-bc-btn-download:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
    }

.qr-bc-result-container {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    text-align: center;
}

.qr-bc-qrcode-wrapper {
    display: inline-block;
    margin: 20px 0;
    padding: 20px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

    .qr-bc-qrcode-wrapper img {
        max-width: 100%;
        height: auto;
        border: 10px solid white;
    }

.qr-bc-info-text {
    color: #666;
    margin: 20px 0;
    font-size: 14px;
}

.qr-bc-loading {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: qr-bc-spin 1s linear infinite;
}

@keyframes qr-bc-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.qr-bc-photo-preview {
    margin-top: 10px;
    text-align: center;
}

    .qr-bc-photo-preview img {
        max-width: 150px;
        max-height: 150px;
        border-radius: 8px;
        border: 2px solid #e0e0e0;
    }

.qr-bc-warning-box {
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    padding: 12px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 13px;
    color: #856404;
}

/* ========== YENİ: Fotoğraf Upload ve KVKK Stilleri ========== */

.qr-bc-file-input {
    width: 100%;
    padding: 10px;
    border: 2px dashed #667eea;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
    background: #f8f9ff;
}

    .qr-bc-file-input:hover {
        border-color: #764ba2;
        background: #f0f1ff;
    }

.qr-bc-required {
    color: #ef4444;
    font-weight: bold;
    margin-left: 4px;
}

/* KVKK Checkbox Group */
.qr-bc-kvkk-group {
    background: #f0f9ff;
    border: 2px solid #0ea5e9;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 20px;
}

.qr-bc-kvkk-label {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
    gap: 12px;
}

.qr-bc-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-top: 3px;
    flex-shrink: 0;
}

.qr-bc-kvkk-text {
    color: #334155;
    font-size: 13px;
    line-height: 1.6;
}

    .qr-bc-kvkk-text strong {
        color: #0ea5e9;
        display: block;
        margin-bottom: 8px;
        font-size: 14px;
    }

/* Photo Preview Styles */
.qr-bc-photo-preview {
    margin-top: 15px;
    text-align: center;
    min-height: 50px;
}

    .qr-bc-photo-preview img {
        max-width: 200px;
        max-height: 200px;
        border-radius: 12px;
        border: 3px solid #667eea;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
        object-fit: cover;
    }

.qr-bc-photo-preview-info {
    margin-top: 10px;
    font-size: 12px;
    color: #666;
}

    .qr-bc-photo-preview-info .size-info {
        display: inline-block;
        background: #e0e7ff;
        padding: 4px 12px;
        border-radius: 20px;
        margin-top: 5px;
    }

/* Loading Spinner Update */
.qr-bc-loading {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #667eea;
    border-radius: 50%;
    animation: qr-bc-spin 1s linear infinite;
}

/* Success Message */
.qr-bc-success-message {
    background: #dcfce7;
    border-left: 4px solid #22c55e;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    color: #166534;
    font-weight: 600;
}

/* Error Message */
.qr-bc-error-message {
    background: #fee2e2;
    border-left: 4px solid #ef4444;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
    color: #991b1b;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 768px) {
    .qr-bc-title {
        font-size: 1.5em;
    }

    .qr-bc-form-container,
    .qr-bc-result-container {
        padding: 20px;
    }
}




/* TÜM UYGULAMALAR SAYFASI İÇİN*/

/* GENEL YAPI */
/* ================== TOKU UI v1 – CORE ================== */

/* GENEL WRAPPER */
.toku-app {
    max-width: 1180px;
    margin-top: 50px;
    padding: 40px 16px 80px;
}

/* 🖼️ GLOBAL: TinyMCE'den eklenen tüm resimler için */
.toku-app figure,
.toku-app figure.image {
    margin: 24px 0;
    max-width: 100%;
}

.toku-app figure img,
.toku-app figure.image img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* SECTIONS */
.toku-section {
    margin-top: 64px;
}

.toku-section__header {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: left;
}

.toku-h2 {
    font-size: clamp(22px, 3vw, 26px);
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.toku-muted {
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

/* HERO */
.toku-hero-v2 {
    padding-top: 16px;
}

.toku-hero-v2__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    align-items: center;
}

.toku-hero-v2__left {
    flex: 1 1 340px;
}

.toku-hero-v2__right {
    flex: 1 1 320px;
    display: flex;
    justify-content: flex-end;
}

.toku-hero__title {
    font-size: clamp(26px, 4vw, 34px);
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
}

.toku-hero__subtitle {
    font-size: 14px;
    line-height: 1.7;
    color: #4b5563;
    max-width: 520px;
}

/* HERO MEDYA */
.toku-wide-media {
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
    background: #020617;
    max-width: 100%;
    margin: 0 auto;
}

    .toku-wide-media img {
        display: block;
        width: 100% !important;
        height: 450px !important;
        max-width: 100%;
        object-fit: cover;
        object-position: center center;
    }

    /* Mobil için özel ayarlar */
    @media (max-width: 768px) {
        .toku-wide-media {
            border-radius: 16px;
        }

        .toku-wide-media img {
            height: 300px !important;
        }
    }

    @media (max-width: 480px) {
        .toku-wide-media img {
            height: 220px !important;
        }
    }

/* KPI */
.toku-kpi {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 24px 0;
}

.toku-kpi--tight {
    margin-top: 20px;
}

.toku-kpi__item {
    flex: 0 0 auto;
    min-width: 130px;
    padding: 10px 14px;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff, #eef2ff);
    border: 1px solid #e5e7eb;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.toku-kpi__value {
    font-size: 20px;
    font-weight: 700;
    color: #1d4ed8;
}

.toku-kpi__label {
    font-size: 12px;
    color: #6b7280;
}

/* BUTONLAR */
.toku-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.toku-btn--primary {
    background: #2563eb;
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 12px 30px rgba(37, 99, 235, 0.5);
}

    .toku-btn--primary:hover {
        background: #1d4ed8;
        border-color: #1d4ed8;
        transform: translateY(-1px);
    }

.toku-btn--ghost {
    background: #ffffff;
    border-color: #e5e7eb;
    color: #111827;
}

    .toku-btn--ghost:hover {
        border-color: #9ca3af;
        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
        transform: translateY(-1px);
    }

.toku-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* ALT NAV – TÜM MODÜLLER İÇİN PILL MENÜ */
.toku-subnav {
    max-width: 1180px;
    margin: 32px auto 8px;
    padding: 8px 12px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: #f9fafb;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.toku-subnav__link {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    white-space: nowrap;
    transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .toku-subnav__link:hover {
        background: #e5edff;
        border-color: rgba(59, 130, 246, 0.45);
        color: #1d4ed8;
        box-shadow: 0 8px 20px rgba(37, 99, 235, 0.18);
        transform: translateY(-1px);
    }

    .toku-subnav__link.is-active {
        background: #2563eb;
        border-color: #2563eb;
        color: #ffffff;
        box-shadow: 0 10px 26px rgba(37, 99, 235, 0.4);
        transform: translateY(-1px);
    }

/* OHS sayfasındaki eski .toku-ohs-nav da aynı tasarımı kullansın */
.toku-ohs-nav {
    composes: toku-subnav;
}

.toku-ohs-nav__link {
    composes: toku-subnav__link;
}

/* GRIDLER */
.toku-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 18px;
}

.toku-core-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 18px;
}

/* KARTLAR & HOVER */
.hover-raise {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

    .hover-raise:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 55px rgba(15, 23, 42, 0.12);
    }

/* Özet kartları */
.toku-feature {
    background: linear-gradient(135deg, #ffffff, #f3f4ff);
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    padding: 18px 18px 16px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.toku-feature__title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

/* Genel kart */
.toku-card {
    background: linear-gradient(135deg, #ffffff, #f5f7ff);
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    padding: 18px 18px 14px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
}

.toku-card__title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}

.tokucard-ghost {
    background: #ffffff;
}

/* Liste */
.toku-list {
    margin: 8px 0 0;
    padding-left: 18px;
    font-size: 13px;
    color: #4b5563;
}

/* STEPper */
.toku-stepper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.toku-stepper__item {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    padding: 14px 16px;
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.04);
    font-size: 13px;
    color: #4b5563;
}

    .toku-stepper__item h4 {
        font-size: 14px;
        font-weight: 600;
        color: #111827;
        margin-bottom: 4px;
    }

/* ACCORDION – genel (Yetenek Haritası vb.) */
.toku-accordion {
    max-width: 880px;
    margin: 0 auto;
}

.toku-acc__item {
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.04);
    margin-bottom: 10px;
    overflow: hidden;
}

.toku-acc__q {
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.toku-acc__a {
    padding: 0 16px 12px;
    font-size: 13px;
    color: #4b5563;
    display: none;
}

.toku-acc__item.is-open .toku-acc__a {
    display: block;
}

/* SSS (FAQ) */
.toku-faq__item {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    margin-bottom: 8px;
    overflow: hidden;
}

.toku-faq__q {
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    color: #111827;
    cursor: pointer;
}

.toku-faq__a {
    padding: 0 14px 12px;
    font-size: 13px;
    color: #4b5563;
    display: none;
}

.toku-faq__item.is-open .toku-faq__a {
    display: block;
}

/* GALERİ */
.toku-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: 32px 0;
    max-width: 100%;
}

.toku-thumb {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #020617;
    position: relative;
    aspect-ratio: 4 / 3;
    min-height: 250px;
}

    .toku-thumb img {
        display: block;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain;
        object-position: center center;
        transition: transform 0.3s ease;
    }

    .toku-thumb:hover img {
        transform: scale(1.05);
    }

    /* Tablet için */
    @media (max-width: 768px) {
        .toku-gallery {
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        .toku-thumb {
            border-radius: 12px;
            min-height: 180px;
        }
    }

    /* Mobil için */
    @media (max-width: 480px) {
        .toku-gallery {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
        }

        .toku-thumb {
            min-height: 140px;
        }
    }

/* RESPONSIVE */
@media (max-width: 960px) {
    .toku-hero-v2__inner {
        flex-direction: column;
    }

    .toku-hero-v2__right {
        justify-content: center;
    }

    .toku-subnav {
        border-radius: 24px;
    }
}

@media (max-width: 640px) {
    .toku-app {
        padding-top: 32px;
    }

    .toku-section {
        margin-top: 48px;
    }

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