/**
 * Custom Styles - Blog + Profesyonel Portföy
 * Professional Business Website Level
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Gloria+Hallelujah&family=Kalam:wght@300;400;700&family=Manrope:wght@300;400;500;600;700;800&family=Marck+Script&family=Merienda:wght@300;400;500;600;700;800&family=Nunito:wght@300;400;500;600;700;800&family=Patrick+Hand&family=Rubik:wght@300;400;500;600;700;800&family=Satisfy&family=Work+Sans:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@400;500;600;700;800&display=swap');

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

/* Global responsive media defaults (prevents overflow/CLS) */
img, video, svg, canvas {
    max-width: 100%;
    height: auto;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
}

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Theme tokens (Light default) */
    --bg: #ffffff;
    --bg-muted: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --text: #0f172a;
    --text-muted: #475569;
    --border: rgba(15, 23, 42, 0.12);
    --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
}

/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    padding-top: 76px;
    line-height: 1.7; /* daha okunabilir */
    color: var(--text);
    background: var(--bg);
}

/* Readability: consistent paragraph rhythm */
p {
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Avoid horizontal overflow from long strings inside flex/grid */
.container, .row, [class*="col-"] {
    min-width: 0;
}

/* Long titles: wrap safely (except elements that intentionally ellipsis) */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Detay sayfasında içerik navbar'ın altından başlasın */
body:has(.case-study-hero) {
    padding-top: 76px;
}

/* Ana sayfa için body düzenlemesi */
body.index-page {
    padding-top: 0;
    overflow-x: hidden;
}

/* Fullscreen cover pages should not scroll */
body.cover-fullscreen-page {
    height: 100vh;
    overflow: hidden;
}

/* Fullscreen cover page: keep floating icons above the cover */
body.cover-fullscreen-page .social-whatsapp-container {
    z-index: 10050;
}

/* ============================================
   1️⃣ HEADER - Professional Sticky Navigation
   ============================================ */

.navbar {
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transition: var(--transition);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    min-height: 76px; /* Menü yüksekliğini sabit tut */
    display: flex;
    align-items: center;
}

/* Dropdown menüler navbar'ın altında kalmalı */
.navbar .dropdown-menu {
    z-index: 10000;
}

.navbar-collapse {
    z-index: 10000;
}

.navbar.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 0;
    min-height: 70px; /* Scroll durumunda da sabit yükseklik */
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b !important;
    letter-spacing: -0.5px;
    transition: var(--transition);
    display: flex;
    align-items: center;
    text-decoration: none;
}

.navbar-brand:hover {
    transform: translateX(2px);
}

/* Site Logo Wrapper */
.site-logo-wrapper {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch; /* alt satırı üst satırla aynı genişlikte hizala */
    line-height: 1.15;
}

/* Site Logo Text - Logo gibi stilize edilmiş yazı */
.site-logo-text {
    font-size: 1.25rem;
    font-weight: 800;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: var(--transition);
    position: relative;
    display: block;
    margin-bottom: 0;
}

/* Site Domain - Alt satır küçük yazı */
.site-domain {
    font-size: 0.65rem;
    font-weight: 500;
    color: #1e293b;
    /* Harf aralığını parçalara vereceğiz; container'da 0 kalsın ki hizalama bozulmasın */
    letter-spacing: 0;
    opacity: 0.8;
    transition: var(--transition);
    display: flex;
    align-items: baseline;
    justify-content: space-between; /* başlangıç ve bitişi üst yazıyla hizala */
    gap: 0.75rem;
    width: 100%;
    line-height: 1.1;
    margin-top: 2px;
    white-space: nowrap;
}

.site-domain-part {
    white-space: nowrap;
    letter-spacing: 0.40em; /* harfler arası boşluk */
}

/* Öğretmen unvanı */
.site-domain .teacher-title {
    margin-left: -0.5ch;
    letter-spacing: 2.5px;
    font-weight: 600;
    opacity: 0.9;
}

/* Slogan ayırıcı ve eğitim yazısı için özel stil */
.site-logo-text .separator {
    margin: 0 6px;
    opacity: 0.6;
    font-weight: 400;
}

.site-logo-text .education-text {
    font-size: 0.95em;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}

.site-logo-text {
    position: relative;
}

.site-logo-text::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        #3b82f6 0%, 
        #8b5cf6 25%, 
        #ec4899 50%, 
        #3b82f6 75%, 
        #8b5cf6 100%);
    background-size: 200% 100%;
    transition: width 2s ease;
    opacity: 0;
}

.navbar-brand:hover .site-logo-text {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.navbar-brand:hover .site-logo-text::after {
    width: 100%;
    opacity: 1;
    animation: flowGradient 2s linear infinite;
}

@keyframes flowGradient {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 0%;
    }
}

.navbar-brand:hover .site-domain {
    opacity: 1;
    color: #0f172a;
}

/* Scroll durumunda logo text */
.navbar.scrolled .site-logo-text {
    font-size: 1.15rem;
}

.navbar.scrolled .site-domain {
    font-size: 0.6rem;
}

.navbar-brand:hover .site-logo {
    opacity: 0.9;
    transform: scale(1.05);
}

/* Site Logo Stilleri */
.site-logo {
    height: auto; /* Orijinal oranını koru */
    max-height: 44px; /* Navbar yüksekliğini değiştirmeden maksimum yükseklik (76px - 32px padding) */
    width: auto;
    max-width: 200px;
    object-fit: contain;
    transition: var(--transition);
    display: block;
    vertical-align: middle;
}

.navbar.scrolled .site-logo {
    height: auto; /* Orijinal oranını koru */
    max-height: 44px; /* Scroll durumunda da aynı yükseklik (70px - 24px padding) */
    max-width: 180px;
}

/* Responsive Logo */
@media (max-width: 768px) {
    .navbar {
        min-height: 60px; /* Mobilde sabit yükseklik */
    }
    
    .navbar.scrolled {
        min-height: 56px; /* Mobil scroll durumunda */
    }
    
    .site-logo {
        height: auto; /* Orijinal oranını koru */
        max-height: 36px; /* Mobilde maksimum yükseklik (60px - 24px padding) */
        max-width: 150px;
    }
    
    .navbar.scrolled .site-logo {
        height: auto; /* Orijinal oranını koru */
        max-height: 36px; /* Mobil scroll durumunda (56px - 16px padding) */
        max-width: 130px;
    }
    
    .site-logo-text {
        font-size: 1rem;
        letter-spacing: 0.3px;
    }
    
    .navbar.scrolled .site-logo-text {
        font-size: 0.95rem;
    }
    
    .site-domain {
        font-size: 0.55rem;
    }
    
    .navbar.scrolled .site-domain {
        font-size: 0.5rem;
    }
}

@media (max-width: 576px) {
    .site-logo-text {
        font-size: 0.9rem;
        letter-spacing: 0.2px;
    }
    
    .navbar.scrolled .site-logo-text {
        font-size: 0.85rem;
    }
}

.nav-link {
    font-weight: 500;
    font-size: 0.95rem;
    color: #475569 !important;
    transition: var(--transition);
    position: relative;
    padding: 0.5rem 1rem !important;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: var(--transition);
    transform: translateX(-50%);
}

.nav-link:hover {
    color: #3b82f6 !important;
}

.nav-link:hover::after {
    width: 70%;
}

/* ============================================
   2️⃣ HERO SECTION - Deep Corporate Gradient
   ============================================ */

.hero-section-modern {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 0;
    margin: 0;
    background: #0a0f1e;
    box-sizing: border-box;
}

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

/* Aurora & Mesh Gradients - Komple Efekt */
.hero-background::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.25) 0%,
        rgba(139, 92, 246, 0.2) 30%,
        rgba(59, 130, 246, 0.25) 60%,
        transparent 100%);
    animation: auroraMove 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

.hero-background::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle,
        rgba(236, 72, 153, 0.2) 0%,
        rgba(59, 130, 246, 0.15) 40%,
        transparent 70%);
    animation: auroraMoveReverse 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

/* Deeper, more corporate gradient with Aurora & Mesh Gradients */
.hero-gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        #0a0f1e 0%, 
        #1a1f3a 20%, 
        #1e293b 40%, 
        #334155 60%, 
        #475569 80%, 
        #64748b 100%),
        linear-gradient(135deg,
        rgba(99, 102, 241, 0.15) 0%,
        rgba(139, 92, 246, 0.12) 25%,
        rgba(59, 130, 246, 0.15) 50%,
        rgba(236, 72, 153, 0.12) 75%,
        rgba(99, 102, 241, 0.15) 100%);
    background-size: 200% 200%, 200% 200%;
    opacity: 1;
    animation: gradientShift 25s ease infinite, auroraGradient 12s ease infinite;
    z-index: 1;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-pattern {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 40% 20%, rgba(139, 92, 246, 0.1) 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, rgba(10, 15, 30, 0.4) 100%);
    animation: patternMove 30s ease-in-out infinite;
    z-index: 3;
}

/* Aurora Mesh Gradient Overlay - Komple */
.hero-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg,
        rgba(99, 102, 241, 0.12) 0%,
        rgba(139, 92, 246, 0.1) 25%,
        rgba(59, 130, 246, 0.12) 50%,
        rgba(236, 72, 153, 0.1) 75%,
        rgba(99, 102, 241, 0.12) 100%);
    background-size: 200% 200%;
    animation: auroraGradient 15s ease infinite;
    z-index: 1;
}

.hero-pattern::after {
    content: '';
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.15) 0%,
        rgba(139, 92, 246, 0.12) 35%,
        rgba(59, 130, 246, 0.15) 65%,
        transparent 90%);
    animation: auroraMove 22s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes patternMove {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-30px, -30px) scale(1.05); }
}

.hero-section-modern .container {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
}

.min-vh-75 {
    min-height: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hero-content {
    animation: fadeInUp 1s ease-out;
    padding: 40px 20px;
    width: 100%;
    box-sizing: border-box;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    animation: fadeIn 0.8s ease-out 0.2s both;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hero-badge i {
    color: #60a5fa;
    font-size: 1rem;
}

.hero-title {
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 800;
    line-height: 1.1;
    margin: 35px 0;
    color: #ffffff;
    text-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 1s ease-out 0.3s both;
    letter-spacing: -1px;
}

.title-line-1 {
    display: block;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 50%, #e2e8f0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.2));
}

.title-line-2 {
    display: block;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-top: -10px;
    filter: drop-shadow(0 2px 10px rgba(59, 130, 246, 0.3));
}

.hero-subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    margin: 25px 0;
    line-height: 1.7;
    animation: fadeInUp 1s ease-out 0.5s both;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.hero-description {
    margin-top: 30px;
    animation: fadeInUp 1s ease-out 0.7s both;
}

.hero-description p {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.8;
    max-width: 650px;
    margin: 0 auto;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Ana sayfa hero açıklaması: tek satırda kalsın (admin metni) */
.hero-description .hero-description-line {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(0.5rem, 2.8vw, 1.15rem);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* Professional CTA Button */
.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 45px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
    border: none;
    border-radius: 50px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 35px rgba(59, 130, 246, 0.35), 
                0 4px 15px rgba(59, 130, 246, 0.2);
    transition: var(--transition);
    animation: fadeInUp 1s ease-out 0.9s both;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.3px;
}

.btn-hero-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-primary:hover::before {
    left: 100%;
}

.btn-hero-primary:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 45px rgba(59, 130, 246, 0.45), 
                0 6px 20px rgba(59, 130, 246, 0.3);
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
    color: #ffffff;
    text-decoration: none;
}

.btn-hero-primary:active {
    transform: translateY(-2px) scale(1);
}

.btn-hero-primary i {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.1rem;
}

.btn-hero-primary:hover i {
    transform: translateY(4px);
}

/* ============================================
   3️⃣ EXPERTISE CARDS - Professional Cards
   ============================================ */

#expertise {
    padding: 100px 0;
    position: relative;
    background: #ffffff;
    margin-top: 0;
    scroll-margin-top: 76px;
    transition: var(--transition-slow);
}

/* Flexible Grid Layout for Content Cards - Responsive Bootstrap Grid */
/* Bootstrap row/col yapısı korunuyor, ekstra CSS gerekmiyor */

/* Smooth transition from hero */
body.index-page #expertise {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease-out 0.3s both;
}

.expertise-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08), 
                0 1px 5px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
    overflow: hidden;
    color: inherit;
    height: 100%;
    background: #ffffff;
    position: relative;
}

.expertise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transform: scaleX(0);
    transition: var(--transition);
    transform-origin: left;
}

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

.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12), 
                0 4px 15px rgba(59, 130, 246, 0.1);
    text-decoration: none;
    color: inherit;
}

.card-image-wrapper {
    overflow: hidden;
    height: 260px;
    background: #f8f9fa;
    position: relative;
}

.card-image-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.05) 100%);
    opacity: 0;
    transition: var(--transition);
}

.expertise-card:hover .card-image-wrapper::after {
    opacity: 1;
}

.expertise-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
    background: #f1f5f9;
}

.expertise-card:hover .card-img-top {
    transform: scale(1.08);
}

.expertise-card .card-body {
    padding: 2rem 1.75rem;
}

.expertise-card .card-title {
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 0.875rem;
    color: #1e293b;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.expertise-card .card-text {
    font-size: 0.975rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
}

/* ============================================
   4️⃣ TYPOGRAPHY - Corporate & Strong
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.2;
    color: #1e293b;
    letter-spacing: -0.5px;
}

p {
    line-height: 1.75;
    color: #475569;
}

/* ============================================
   5️⃣ FOOTER - Professional Closing
   ============================================ */

footer {
    margin-top: 80px;
    background: #f8f9fa;
    border-top: 1px solid #e2e8f0;
    padding: 3rem 0 2rem;
}

footer .container {
    max-width: 1200px;
}

footer p {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

footer .footer-links {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

footer .footer-link {
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
    padding: 4px 0;
}

footer .footer-link:hover {
    color: #3b82f6;
}

footer .footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    transition: width 0.3s ease;
}

footer .footer-link:hover::after {
    width: 100%;
}

/* Sosyal Medya İkonları - Özel Renkler */
footer a.social-icon[aria-label="Instagram"]:hover {
    color: #E4405F;
    background: rgba(228, 64, 95, 0.1);
    box-shadow: 0 4px 12px rgba(228, 64, 95, 0.3);
}

footer a.social-icon[aria-label="Facebook"]:hover {
    color: #1877F2;
    background: rgba(24, 119, 242, 0.1);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

footer a.social-icon[aria-label="YouTube"]:hover {
    color: #FF0000;
    background: rgba(255, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

/* ============================================
   6️⃣ CASE STUDY DETAIL PAGE - Professional
   ============================================ */

/* Case Study Hero */
.case-study-hero {
    position: relative;
    margin-top: 10px;
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    z-index: 1;
}

.case-study-cover {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 450px;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 1;
}

.cover-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cover-image-wrapper.no-image {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
}

.cover-image {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.cover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    z-index: 1;
    display: none;
}

/* Expertise detail special: show wide cover image centered (web-gelistirme) */
.case-study-hero.cover-centered .case-study-cover {
    height: auto;
    min-height: 0;
    padding: 18px 0;
    background: #0b1220;
}

.case-study-hero.cover-centered .cover-image-wrapper {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
}

.case-study-hero.cover-centered .cover-image {
    width: 60%;
    max-width: 1200px;
    height: auto;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    object-position: center;
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(2, 6, 23, 0.45);
}

.case-study-hero.cover-centered .cover-overlay {
    display: none;
}

/* Header should not overlap the centered cover */
.case-study-hero.cover-centered .case-study-header {
    margin-top: 18px;
}

/* Expertise detail special: place title + breadcrumb under the cover (deneme-2) */
.case-study-hero.header-below-cover .case-study-header {
    margin-top: 16px;
    margin-bottom: 20px;
}

.case-study-hero.header-below-cover .case-study-title-section {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.case-study-hero.header-below-cover .case-breadcrumb .breadcrumb-modern {
    background: rgba(15, 23, 42, 0.92);
}

@media (max-width: 992px) {
    .case-study-hero.cover-centered .cover-image {
        width: 88%;
    }
}

/* Expertise detail special: full-viewport cover under navbar (web-gelistirme) */
.case-study-hero.cover-fullscreen .case-study-cover {
    height: calc(100vh - 86px); /* 76px navbar + 10px gap */
    min-height: 0;
}

.case-study-hero.cover-fullscreen .cover-image-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.case-study-hero.cover-fullscreen .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.case-study-hero.cover-fullscreen .case-study-header {
    display: none;
}

.case-study-hero.cover-fullscreen .cover-title-overlay {
    position: absolute;
    /* Sayfanın alt-ortası */
    top: auto;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(92%, 820px);
    padding: 0;
    border-radius: 0;
    color: #ffffff;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Buton grubu (Detaylar + Drone Talep vb.) */
.case-study-hero.cover-fullscreen .cover-title-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.case-study-hero.cover-fullscreen .cover-drone-talep-btn {
    text-decoration: none;
}

/* "Detay Oku" button (above title) */
.case-study-hero.cover-fullscreen .cover-readmore-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    /* Turuncu (premium) */
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 55%, #ea580c 100%);
    color: #ffffff;
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

.case-study-hero.cover-fullscreen .cover-readmore-btn i {
    font-size: 1.05em;
    line-height: 1;
    filter: drop-shadow(0 8px 18px rgba(2, 6, 23, 0.25));
}

.case-study-hero.cover-fullscreen .cover-readmore-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 65px rgba(2, 6, 23, 0.36);
    filter: saturate(1.08) brightness(1.02);
}

.case-study-hero.cover-fullscreen .cover-readmore-btn:focus-visible {
    outline: 3px solid rgba(59, 130, 246, 0.45);
    outline-offset: 3px;
}

.case-study-hero.cover-fullscreen .cover-readmore-btn:active {
    transform: translateY(0) scale(0.99);
}

/* Modal (overview card) */
.cover-overview-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
    z-index: 10060;
}

.cover-overview-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end; /* sayfa içinde sheet hissi */
    justify-content: center;
    padding: 16px 14px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
    z-index: 10061;
}

.cover-overview-modal.is-open,
.cover-overview-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.cover-overview-modal.is-open {
    pointer-events: auto;
}

.cover-overview-card {
    width: min(980px, 94vw);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 18px 18px 14px 14px;
    box-shadow: 0 40px 110px rgba(2, 6, 23, 0.35);
    overflow: hidden;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(22px);
    opacity: 0;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 220ms ease;
}

.cover-overview-modal.is-open .cover-overview-card {
    transform: translateY(0);
    opacity: 1;
}

.cover-overview-handle {
    width: 52px;
    height: 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.16);
    margin: 10px auto 2px;
}

.cover-overview-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(0, 0, 0, 0.35);
}

.cover-overview-card-title {
    font-weight: 900;
    letter-spacing: -0.4px;
    color: #ffffff;
    font-size: 1.2rem;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 72vw;
}

.cover-overview-close-btn {
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.55);
    color: #0b1220;
    padding: 9px 12px;
    border-radius: 12px;
    font-weight: 800;
    transition: background 160ms ease, transform 160ms ease;
}

.cover-overview-close-btn:hover {
    background: rgba(255, 255, 255, 0.72);
    transform: translateY(-1px);
}

.cover-overview-card-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px 18px 20px;
    max-height: min(62vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: transparent;
}

.cover-overview-card-body .cover-overview-text {
    color: #ffffff;
    font-size: 18px;
    line-height: 1.6;
    text-align: left;
    -webkit-font-smoothing: antialiased;
}

.cover-overview-text img {
    max-width: 200px;
    height: auto;
    cursor: pointer;
    border-radius: 8px;
    margin: 6px 8px 6px 0;
    vertical-align: middle;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.overview-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10070;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.2s, opacity 0.2s;
}

.overview-lightbox[aria-hidden="false"] {
    visibility: visible;
    opacity: 1;
}

.overview-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}

.overview-lightbox-content {
    position: relative;
    max-width: 95vw;
    max-height: 95vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.overview-lightbox-close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 40px;
    height: 40px;
    border: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
    z-index: 1;
}

.overview-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

.overview-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Detaylar modal: sayfanın %60'ı, açık tonlar, Google tarzı sekmeler */
.cover-overview-modal.cover-overview-modal--light {
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-card {
    width: 76vw;
    max-width: 911px;
    height: 66vh;
    max-height: 572px;
    min-height: 308px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 12px 24px rgba(0, 0, 0, 0.08);
    transform: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-handle {
    display: none;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-card-header--light {
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    padding: 16px 20px;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-card-title--light {
    color: #202124;
    font-size: 1.25rem;
    font-weight: 600;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-close-btn--light {
    background: #f1f3f4;
    color: #5f6368;
    border: 0;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-close-btn--light:hover {
    background: #e8eaed;
    color: #202124;
}

/* Sekmeler (Google tarzı) */
.cover-overview-tabs {
    display: flex;
    gap: 0;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e8eaed;
    min-height: 48px;
}

.cover-overview-tab {
    position: relative;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: #5f6368;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.cover-overview-tab:hover {
    color: #202124;
}

.cover-overview-tab.is-active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-card-body--light {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: #f8f9fa;
    max-height: none;
}

.cover-overview-panel {
    display: none;
    animation: none;
}

.cover-overview-panel.is-active {
    display: block;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-text--light {
    color: #202124;
    font-size: 1rem;
    line-height: 1.6;
}

.cover-overview-modal.cover-overview-modal--light .cover-overview-text--light img {
    max-width: 200px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Linkler sekmesi */
.cover-overview-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cover-overview-links-empty {
    color: #5f6368;
    font-size: 0.9375rem;
    margin: 0;
}

.cover-overview-link-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-radius: 12px;
    color: #1a73e8;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.cover-overview-link-item:hover {
    background: #e8f0fe;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
}

.cover-overview-link-item span {
    flex: 1;
    text-align: left;
}

.cover-overview-link-item .bi-box-arrow-up-right {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Ders Notları sekmesi */
.cover-overview-lessons {
    padding: 0;
}

.cover-overview-lessons-empty {
    color: #5f6368;
    font-size: 0.9375rem;
    margin: 0;
    text-align: center;
    padding: 40px 20px;
}

.lesson-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.lesson-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #e8eaed;
    border-left: 4px solid #1a73e8;
    border-radius: 8px;
    text-decoration: none;
    color: #202124;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    position: relative;
}

.lesson-card:hover {
    border-left-color: #1557b0;
    box-shadow: 0 2px 8px rgba(26, 115, 232, 0.12);
    transform: translateX(4px);
    background: #f8f9fa;
}

.lesson-card-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
    border-radius: 10px;
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(26, 115, 232, 0.1);
}

.lesson-card-icon i {
    font-size: 28px;
    color: #1a73e8;
}

.lesson-card:hover .lesson-card-icon {
    background: linear-gradient(135deg, #1a73e8 0%, #1557b0 100%);
    box-shadow: 0 4px 8px rgba(26, 115, 232, 0.2);
}

.lesson-card:hover .lesson-card-icon i {
    color: #fff;
}

.lesson-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.lesson-card-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.5;
    color: #202124;
    letter-spacing: -0.2px;
}

.lesson-card:hover .lesson-card-title {
    color: #1a73e8;
}

.lesson-card-type {
    font-size: 0.8125rem;
    color: #5f6368;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #f1f3f4;
    border-radius: 6px;
    width: fit-content;
    font-weight: 500;
}

.lesson-card:hover .lesson-card-type {
    background: #e8f0fe;
    color: #1a73e8;
}

.lesson-card-action {
    flex-shrink: 0;
    color: #5f6368;
    transition: color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f1f3f4;
}

.lesson-card:hover .lesson-card-action {
    color: #1a73e8;
    background: #e8f0fe;
    transform: scale(1.1);
}

.lesson-card-action i {
    font-size: 1.125rem;
}

@media (max-width: 768px) {
    .lesson-card {
        padding: 16px 18px;
        gap: 14px;
    }
    .lesson-card-icon {
        width: 50px;
        height: 50px;
    }
    .lesson-card-icon i {
        font-size: 24px;
    }
    .lesson-card-title {
        font-size: 0.9375rem;
    }
    .lesson-card-action {
        width: 36px;
        height: 36px;
    }
}

.cover-overview-backdrop.is-open {
    background: rgba(32, 33, 36, 0.4);
}

@media (max-width: 768px) {
    .cover-overview-modal.cover-overview-modal--light .cover-overview-card {
        width: 92vw;
        height: 70vh;
        max-height: 80vh;
    }
    .cover-overview-tabs {
        padding: 0 12px;
    }
    .cover-overview-tab {
        padding: 10px 12px;
        font-size: 0.875rem;
    }
}

.case-study-hero.cover-fullscreen .cover-title-text {
    /* h2 boyutu */
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.15;
    margin: 0;
    color: #ffffff;
    /* Okunurluk için profesyonel "glass" fon (mevcut yapıyı bozmaz) */
    display: inline-block;
    padding: 0 14px; /* üst-alt sıfır */
    border-radius: 0;
    /* Glass kaldır: sadece siyah arka plan */
    background: rgba(0, 0, 0, 0.50);
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: 0 2px 14px rgba(2, 6, 23, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92vw;
}

/* Technologies overlay (web-gelistirme) - bottom-left stacked */
.case-study-hero.cover-fullscreen .cover-tech-overlay {
    position: absolute;
    left: 16px;
    bottom: 22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: min(42%, 360px);
}

.case-study-hero.cover-fullscreen .cover-tech-item {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 12px rgba(2, 6, 23, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sample media thumbnails (max 3) */
.case-study-hero.cover-fullscreen .cover-samples-left,
.case-study-hero.cover-fullscreen .cover-samples-right {
    position: absolute;
    top: 16px;
    z-index: 4;
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

.case-study-hero.cover-fullscreen .cover-samples-left {
    left: 50px;
    flex-direction: column;
}

.case-study-hero.cover-fullscreen .cover-samples-right {
    right: 50px;
    flex-direction: column;
}

.case-study-hero.cover-fullscreen .cover-sample-item {
    display: block; /* <a> için tıklanabilir alanı büyüt */
    width: 80px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: 0 18px 60px rgba(2, 6, 23, 0.22);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* Soldaki görsellerin çerçevesi: varsayılan (2px) */
.case-study-hero.cover-fullscreen .cover-samples-left .cover-sample-item {
    border: 2px solid rgba(255, 255, 255, 0.40);
}

.case-study-hero.cover-fullscreen .cover-sample-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 70px rgba(2, 6, 23, 0.28);
    filter: saturate(1.04);
}

.case-study-hero.cover-fullscreen .cover-sample-media {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    pointer-events: none; /* tıklama her zaman linke gitsin */
}

.case-study-hero.cover-fullscreen .cover-sample-item.is-video {
    position: relative;
}

.case-study-hero.cover-fullscreen .cover-sample-item.is-video::after {
    content: "\f4f5"; /* bi-play-circle-fill */
    font-family: "bootstrap-icons";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 10px 25px rgba(2, 6, 23, 0.65);
    font-size: 22px;
    pointer-events: none;
}

/* 360 badge */
.case-study-hero.cover-fullscreen .cover-sample-item.is-360 {
    position: relative;
}
.case-study-hero.cover-fullscreen .cover-sample-item.is-360::after {
    content: "360°";
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 6px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: #0b1220;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.60);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.18);
    pointer-events: none;
}

/* In-page media panel (bottom sheet) */
.cover-media-panel-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10080;
    background: rgba(2, 6, 23, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}
.cover-media-panel-backdrop.is-open {
    opacity: 1;
    visibility: visible;
}

.cover-media-panel {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translate(-50%, 18px);
    width: min(1100px, 94vw);
    max-height: 78vh;
    z-index: 10081;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease, visibility 180ms ease;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 14px;
    box-shadow: 0 30px 100px rgba(2, 6, 23, 0.38);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}
.cover-media-panel.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.cover-media-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.cover-media-panel-title {
    font-weight: 800;
    color: #0b1220;
    letter-spacing: -0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cover-media-panel-close {
    border: 0;
    background: rgba(15, 23, 42, 0.06);
    color: #0b1220;
    padding: 8px 10px;
    border-radius: 10px;
    font-weight: 800;
}
.cover-media-panel-body {
    padding: 12px 14px 14px;
    max-height: calc(78vh - 54px);
}
.cover-media-panel-body img,
.cover-media-panel-body video {
    width: 100%;
    max-height: calc(78vh - 54px - 28px);
    display: block;
    object-fit: contain;
    background: #0b1220;
    border-radius: 10px;
}

@media (max-width: 768px) {
    .case-study-hero.cover-fullscreen .cover-samples-left,
    .case-study-hero.cover-fullscreen .cover-samples-right {
        top: 12px;
    }
    .case-study-hero.cover-fullscreen .cover-samples-left {
        left: 12px;
    }
    .case-study-hero.cover-fullscreen .cover-samples-right {
        right: 12px;
    }
    .case-study-hero.cover-fullscreen .cover-sample-item {
        width: 72px;
        height: 118px;
        border-radius: 10px;
    }
}

@media (max-width: 768px) {
    .case-study-hero.cover-fullscreen .case-study-cover {
        height: calc(100vh - 60px);
        min-height: calc(100dvh - 60px);
        max-height: calc(100vh - 60px);
    }
    .case-study-hero.cover-fullscreen .cover-image-wrapper {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .case-study-hero.cover-fullscreen .cover-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    .case-study-hero.cover-fullscreen .cover-title-overlay {
        /* Mobilde başlığı sayfa ortasına al */
        top: 50%;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 92%;
        padding: 0;
        gap: 12px;
    }
    .case-study-hero.cover-fullscreen .cover-title-text {
        /* 2. satıra düşmesin: tek satır + akıllı küçülme */
        font-size: clamp(1.35rem, 5.2vw, 2rem);
        max-width: 92vw;
        padding: 0 12px; /* üst-alt sıfır */
        border-radius: 10px;
    }

    .case-study-hero.cover-fullscreen .cover-tech-overlay {
        /* Mobilde soldaki teknolojileri kaldır */
        display: none;
    }

    .case-study-hero.cover-fullscreen .cover-tech-item {
        font-size: 0.9rem;
    }

    /* Mobilde butonları daha kompakt yap + başlığın altına al (ortada kalsın) */
    .case-study-hero.cover-fullscreen .cover-title-buttons {
        order: 2;
    }
    .case-study-hero.cover-fullscreen .cover-readmore-btn {
        padding: 10px 14px;
        font-size: 0.9rem;
    }
    .case-study-hero.cover-fullscreen .cover-title-text {
        order: 1;
    }

    /* Detay modalı: üst menünün hemen altından başlat, okunaklı metin + scroll */
    .cover-overview-backdrop {
        top: 60px;
    }
    .cover-overview-modal {
        top: 60px;
        padding: 0 10px 16px;
        padding-top: 8px;
        align-items: flex-end;
    }
    .cover-overview-card {
        max-height: calc(100vh - 68px);
        width: 100%;
    }
    .cover-overview-card-body {
        max-height: calc(100vh - 68px - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .cover-overview-card-body .cover-overview-text {
        font-size: 1.0625rem;
        line-height: 1.75;
        color: #ffffff;
        -webkit-font-smoothing: antialiased;
    }
}

/* Tablet & mobile: hide technologies overlay on expertise detail cover (incl. iPad landscape) */
@media (max-width: 1366px) {
    .case-study-hero.cover-fullscreen .cover-tech-overlay {
        display: none !important;
    }
}

.case-study-header {
    position: relative;
    z-index: 10;
    margin-top: -200px;
    padding-bottom: 0;
    margin-bottom: 20px;
}

.case-breadcrumb {
    margin: 0;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Neumorphism + Aurora & Mesh Gradients - Breadcrumb */
.case-breadcrumb .breadcrumb-modern {
    background: rgba(30, 41, 59, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 10px 18px;
    border-radius: 16px;
    margin: 0;
    border: none;
    box-shadow: 
        /* Dış gölgeler - yükseltilmiş görünüm */
        8px 8px 16px rgba(0, 0, 0, 0.35),
        -8px -8px 16px rgba(255, 255, 255, 0.04),
        /* İç gölgeler - soft depth */
        inset 3px 3px 6px rgba(0, 0, 0, 0.15),
        inset -3px -3px 6px rgba(255, 255, 255, 0.06);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Aurora & Mesh Gradients - Breadcrumb Overlay */
.case-breadcrumb .breadcrumb-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.2) 0%,
        rgba(139, 92, 246, 0.15) 30%,
        rgba(59, 130, 246, 0.2) 60%,
        transparent 100%);
    animation: auroraMove 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

.case-breadcrumb .breadcrumb-modern::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle,
        rgba(236, 72, 153, 0.15) 0%,
        rgba(59, 130, 246, 0.12) 40%,
        transparent 70%);
    animation: auroraMoveReverse 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
}

.case-breadcrumb .breadcrumb-modern:hover {
    background: rgba(30, 41, 59, 0.95);
    box-shadow: 
        /* Daha belirgin dış gölgeler */
        10px 10px 20px rgba(0, 0, 0, 0.4),
        -10px -10px 20px rgba(255, 255, 255, 0.05),
        /* Daha derin iç gölgeler */
        inset 4px 4px 8px rgba(0, 0, 0, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 0.08);
    /* Hareket efekti kaldırıldı - sabit kalıyor */
}

.case-breadcrumb .breadcrumb-modern:hover::before {
    opacity: 0.7;
    animation: auroraMove 10s ease-in-out infinite;
}

.case-breadcrumb .breadcrumb-modern:hover::after {
    opacity: 0.6;
    animation: auroraMoveReverse 8s ease-in-out infinite;
}

.case-breadcrumb .breadcrumb-modern > * {
    position: relative;
    z-index: 1;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    padding: 0;
    line-height: 1.5;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item::before {
    content: '\203A';
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 300;
    padding: 0 8px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item:first-child::before {
    display: none;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    position: relative;
    font-weight: 400;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item a i {
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.25s ease;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item a:hover {
    color: #ffffff;
    text-decoration: none;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item a:hover i {
    opacity: 1;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item a:hover::after {
    width: 100%;
}

.case-breadcrumb .breadcrumb-modern .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    padding: 4px 0;
}

/* Neumorphism + Aurora & Mesh Gradients - Title Section */
.case-study-title-section {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 40px 48px;
    border-radius: 24px;
    border: none;
    box-shadow: 
        /* Dış gölgeler - yükseltilmiş görünüm */
        12px 12px 24px rgba(0, 0, 0, 0.4),
        -12px -12px 24px rgba(255, 255, 255, 0.05),
        /* İç gölgeler - soft depth */
        inset 4px 4px 8px rgba(0, 0, 0, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 0.08);
    margin-top: 1px;
    position: relative;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Aurora & Mesh Gradients - Animated Background Overlay */
.case-study-title-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.25) 0%,
        rgba(139, 92, 246, 0.2) 30%,
        rgba(59, 130, 246, 0.25) 60%,
        transparent 100%);
    animation: auroraMove 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

/* Teknik projeler için genel ::before animasyonunu devre dışı bırak */
.technical-case-hero .case-study-title-section::before {
    /* Genel animasyonu override et - baklava dilimi sabit kalacak */
    animation: none !important;
    transform: none !important;
}

.case-study-title-section::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle,
        rgba(236, 72, 153, 0.2) 0%,
        rgba(59, 130, 246, 0.15) 40%,
        transparent 70%);
    animation: auroraMoveReverse 12s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
    opacity: 0.5;
}

/* Neumorphism Hover + Enhanced Aurora */
.case-study-title-section:hover {
    background: rgba(30, 41, 59, 0.97);
    box-shadow: 
        /* Daha belirgin dış gölgeler */
        16px 16px 32px rgba(0, 0, 0, 0.5),
        -16px -16px 32px rgba(255, 255, 255, 0.06),
        /* Daha derin iç gölgeler */
        inset 6px 6px 12px rgba(0, 0, 0, 0.25),
        inset -6px -6px 12px rgba(255, 255, 255, 0.1);
    /* Hareket efekti kaldırıldı - sabit kalıyor */
}

.case-study-title-section:hover::before {
    opacity: 0.8;
    animation: auroraMove 12s ease-in-out infinite;
}

.case-study-title-section:hover::after {
    opacity: 0.7;
    animation: auroraMoveReverse 10s ease-in-out infinite;
}

/* Teknik projeler için genel hover efektlerini override et */
.technical-case-hero .case-study-title-section:hover::before {
    /* Baklava dilimi çizgileri tamamen sabit - genel hover animasyonunu override et */
    animation: none !important;
    transform: none !important;
    background-position: 0 0, 0 0 !important;
    opacity: 0.75;
}

/* Technical Projects - Neumorphism + Aurora with Orange Accent + Technical Drawing Lines */
.technical-case-hero .case-study-title-section {
    background: rgba(30, 41, 59, 0.95);
    position: relative;
}

/* Technical Drawing Lines Pattern - Sabit Baklava Dilimi Deseni (Modern Indigo-Purple Tema) */
.technical-case-hero .case-study-title-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Sabit baklava dilimi çizgileri - Indigo-Purple tonlar, TAMAMEN SABİT */
    background-image: 
        /* Çapraz çizgiler - 45° (Baklava dilimi) - Indigo */
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 49px,
            rgba(99, 102, 241, 0.2) 49px,
            rgba(99, 102, 241, 0.2) 51px,
            transparent 51px,
            transparent 99px,
            rgba(99, 102, 241, 0.2) 99px,
            rgba(99, 102, 241, 0.2) 101px
        ),
        /* Ters çapraz çizgiler - -45° (Baklava dilimi) - Purple */
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 49px,
            rgba(139, 92, 246, 0.18) 49px,
            rgba(139, 92, 246, 0.18) 51px,
            transparent 51px,
            transparent 99px,
            rgba(139, 92, 246, 0.18) 99px,
            rgba(139, 92, 246, 0.18) 101px
        );
    background-size: 
        100% 100%,
        100% 100%;
    background-position: 
        0 0,
        0 0;
    /* HİÇBİR ANİMASYON YOK - TAMAMEN SABİT */
    animation: none !important;
    transform: none !important;
    pointer-events: none;
    z-index: 0;
    opacity: 0.65;
    border-radius: 24px;
}

/* Animasyonlu Renkler - Üzerinden Dönen Modern Indigo-Purple-Cyan Aurora Efektleri */
.technical-case-hero .case-study-title-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        /* Birinci Aurora katmanı - Indigo tonlar */
        radial-gradient(circle at 20% 30%,
            rgba(99, 102, 241, 0.3) 0%,
            rgba(139, 92, 246, 0.25) 30%,
            rgba(67, 56, 202, 0.3) 60%,
            transparent 100%),
        /* İkinci Aurora katmanı - Purple-Cyan blend */
        radial-gradient(circle at 80% 70%,
            rgba(139, 92, 246, 0.25) 0%,
            rgba(6, 182, 212, 0.2) 40%,
            transparent 70%),
        /* Üçüncü Aurora katmanı - Cyan vurgu */
        radial-gradient(circle at 50% 50%,
            rgba(6, 182, 212, 0.2) 0%,
            rgba(99, 102, 241, 0.18) 50%,
            transparent 80%);
    animation: 
        auroraMove 18s ease-in-out infinite,
        auroraMoveReverse 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
    opacity: 0.75;
    border-radius: 24px;
}

/* Technical Lines Animation - Artık kullanılmıyor (çizgiler sabit) */

.technical-case-hero .case-study-title-section:hover {
    box-shadow: 
        18px 18px 36px rgba(0, 0, 0, 0.5),
        -18px -18px 36px rgba(99, 102, 241, 0.12),
        inset 6px 6px 12px rgba(0, 0, 0, 0.25),
        inset -6px -6px 12px rgba(139, 92, 246, 0.15);
}

.technical-case-hero .case-study-title-section:hover::before {
    opacity: 0.8;
    /* Çizgiler tamamen sabit kalıyor, hiçbir animasyon yok */
    animation: none !important;
    transform: none !important;
    background-position: 0 0, 0 0 !important;
}

.technical-case-hero .case-study-title-section:hover::after {
    opacity: 0.9;
    animation: 
        auroraMove 15s ease-in-out infinite,
        auroraMoveReverse 12s ease-in-out infinite;
}

.technical-case-hero .case-study-title-section:hover .case-study-title {
    text-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(99, 102, 241, 0.3);
}

/* Education Projects - Neumorphism + Aurora with Green Accent */
.education-case-hero .case-study-title-section {
    background: rgba(30, 41, 59, 0.95);
}

.education-case-hero .case-study-title-section::before {
    background: radial-gradient(circle,
        rgba(34, 197, 94, 0.3) 0%,
        rgba(22, 163, 74, 0.25) 30%,
        rgba(16, 185, 129, 0.3) 60%,
        transparent 100%);
}

.education-case-hero .case-study-title-section::after {
    background: radial-gradient(circle,
        rgba(16, 185, 129, 0.25) 0%,
        rgba(34, 197, 94, 0.2) 40%,
        transparent 70%);
}

.education-case-hero .case-study-title-section:hover {
    box-shadow: 
        18px 18px 36px rgba(0, 0, 0, 0.5),
        -18px -18px 36px rgba(34, 197, 94, 0.08),
        inset 6px 6px 12px rgba(0, 0, 0, 0.25),
        inset -6px -6px 12px rgba(34, 197, 94, 0.1);
}

.education-case-hero .case-study-title-section:hover .case-study-title {
    text-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(34, 197, 94, 0.2);
}

.case-study-title-section > * {
    position: relative;
    z-index: 1;
}

.title-breadcrumb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.case-study-title {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    color: rgba(255, 255, 255, 0.98);
    margin: 0;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-shadow: 
        0 2px 12px rgba(0, 0, 0, 0.3),
        0 1px 4px rgba(0, 0, 0, 0.2);
    flex: 1;
    transition: all 0.3s ease;
}

.case-study-title-section:hover .case-study-title {
    color: rgba(255, 255, 255, 1);
    text-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.4),
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(59, 130, 246, 0.2);
}

.case-study-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-shadow: 
        0 1px 6px rgba(0, 0, 0, 0.25),
        0 1px 2px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.case-study-title-section:hover .case-study-subtitle {
    color: rgba(255, 255, 255, 0.95);
}

/* Case Study Content */
.case-study-content {
    padding: 80px 0 100px;
    background: #ffffff;
    position: relative;
}

.case-study-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(15, 23, 42, 0.08) 50%, 
        transparent 100%);
}

.case-section {
    margin-bottom: 80px;
}

.case-section:last-child {
    margin-bottom: 0;
}

.section-header {
    margin-bottom: 48px;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
}

.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 14px;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.section-title i {
    color: #3b82f6;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-radius: 10px;
    flex-shrink: 0;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 54px;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 2px;
}

/* Overview Section */
.overview-section {
    animation: fadeInUp 0.6s ease-out;
}

.overview-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    padding: 48px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 1px 2px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.overview-card:hover {
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08),
                0 2px 8px rgba(15, 23, 42, 0.04);
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.15);
}

.overview-card:hover::before {
    opacity: 1;
}

.overview-content p {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.overview-content p:first-child {
    font-size: 1.2rem;
    color: #334155;
    font-weight: 500;
    line-height: 1.8;
}

.overview-content p:last-child {
    margin-bottom: 0;
}

/* Section Content */
.section-content {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
}

.section-content p {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
    margin-bottom: 24px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.section-content p:last-child {
    margin-bottom: 0;
}

/* Technologies Grid */
.technologies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.tech-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.tech-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
    border-color: rgba(59, 130, 246, 0.15);
}

.tech-item i {
    color: #3b82f6;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tech-item span {
    font-size: 1rem;
    font-weight: 500;
    color: #1e293b;
}

/* Sidebar List */
.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-list li {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.sidebar-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sidebar-list li i {
    color: #3b82f6;
    font-size: 1.25rem;
    margin-top: 2px;
    flex-shrink: 0;
    width: 24px;
}

.sidebar-list li div {
    flex: 1;
}

.sidebar-list li strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-list li span {
    display: block;
    font-size: 1rem;
    color: #1e293b;
    font-weight: 500;
}

/* Sidebar Content */
.sidebar-content {
    margin-top: 8px;
}

.sidebar-item {
    margin-bottom: 24px;
}

.sidebar-item:last-child {
    margin-bottom: 0;
}

.sidebar-item strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-item p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

/* Section Title Main */
.section-title-main {
    font-size: 2.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 48px 0;
    text-align: center;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.similar-projects-section {
    margin-top: 80px;
    padding-top: 80px;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
}

/* Proje Bilgileri Özel Kartı */
.project-info-section {
    margin-bottom: 60px;
}

.project-info-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 1px 2px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.project-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-info-card:hover {
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08),
                0 2px 8px rgba(15, 23, 42, 0.04);
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.15);
}

.project-info-card:hover::before {
    opacity: 1;
}

.project-info-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 32px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.4px;
    line-height: 1.3;
}

.project-info-title i {
    color: #3b82f6;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-radius: 10px;
    flex-shrink: 0;
}

.project-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
}

.project-info-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: rgba(15, 23, 42, 0.02);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.project-info-item:hover {
    background: rgba(15, 23, 42, 0.04);
    transform: translateY(-2px);
}

.project-info-item-full {
    grid-column: 1 / -1;
}

.project-info-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #3b82f6;
    font-size: 1.25rem;
}

.project-info-content {
    flex: 1;
}

.project-info-content strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-info-content span {
    display: block;
    font-size: 1.125rem;
    color: #1e293b;
    font-weight: 600;
    line-height: 1.4;
}

.project-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.project-info-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(59, 130, 246, 0.1);
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.project-info-tag:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

/* Teknik Projeler için Modern Indigo-Purple-Cyan Renkler */
.technical-case-hero ~ .case-study-content .section-title i {
    color: #6366F1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
}

.technical-case-hero ~ .case-study-content .section-title::after {
    background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
}

.technical-case-hero ~ .case-study-content .overview-card::before,
.technical-case-hero ~ .case-study-content .sidebar-card::before {
    background: linear-gradient(180deg, #6366F1 0%, #8B5CF6 100%);
}

.technical-case-hero ~ .case-study-content .overview-card:hover,
.technical-case-hero ~ .case-study-content .sidebar-card:hover {
    border-color: rgba(99, 102, 241, 0.18);
}

.technical-case-hero ~ .case-study-content .tech-item i {
    color: #6366F1;
}

.technical-case-hero ~ .case-study-content .sidebar-title i {
    color: #6366F1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
}

.technical-case-hero ~ .case-study-content .sidebar-list li i {
    color: #6366F1;
}

.technical-case-hero ~ .case-study-content .tech-badge {
    background: rgba(99, 102, 241, 0.1);
    color: #4338CA;
    border-color: rgba(139, 92, 246, 0.18);
}

.technical-case-hero ~ .case-study-content .tech-badge:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(139, 92, 246, 0.28);
    color: #3730A3;
}

.technical-case-hero ~ .case-study-content .project-info-card::before {
    background: linear-gradient(180deg, #6366F1 0%, #8B5CF6 100%);
}

.technical-case-hero ~ .case-study-content .project-info-card:hover {
    border-color: rgba(99, 102, 241, 0.18);
}

.technical-case-hero ~ .case-study-content .project-info-title i {
    color: #6366F1;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
}

.technical-case-hero ~ .case-study-content .project-info-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
    color: #6366F1;
}

.technical-case-hero ~ .case-study-content .project-info-tag {
    background: rgba(99, 102, 241, 0.12);
    color: #4338CA;
    border-color: rgba(139, 92, 246, 0.22);
}

.technical-case-hero ~ .case-study-content .project-info-tag:hover {
    background: rgba(99, 102, 241, 0.18);
    border-color: rgba(139, 92, 246, 0.32);
}

/* Teknik Projeler - Process Step ve Result Card Modern Renkler */
.technical-case-hero ~ .case-study-content .process-step {
    border-left: 3px solid #6366F1;
}

.technical-case-hero ~ .case-study-content .process-step::before {
    background: linear-gradient(180deg, #6366F1 0%, #8B5CF6 100%);
}

.technical-case-hero ~ .case-study-content .process-step:hover {
    border-color: rgba(99, 102, 241, 0.22);
}

.technical-case-hero ~ .case-study-content .step-icon {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.technical-case-hero ~ .case-study-content .process-step:hover .step-icon {
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);
}

.technical-case-hero ~ .case-study-content .result-card::before {
    background: linear-gradient(90deg, #6366F1 0%, #8B5CF6 100%);
}

.technical-case-hero ~ .case-study-content .result-card:hover {
    border-color: rgba(99, 102, 241, 0.18);
}

.technical-case-hero ~ .case-study-content .result-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(139, 92, 246, 0.12) 100%);
    color: #6366F1;
}

.technical-case-hero ~ .case-study-content .result-card:hover .result-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.18) 0%, rgba(139, 92, 246, 0.18) 100%);
}

/* Eğitim Projeleri için Renkler */
.education-case-hero ~ .case-study-content .project-info-card::before {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.education-case-hero ~ .case-study-content .project-info-card:hover {
    border-color: rgba(34, 197, 94, 0.15);
}

.education-case-hero ~ .case-study-content .project-info-title i {
    color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
}

.education-case-hero ~ .case-study-content .project-info-icon {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
    color: #22c55e;
}

.education-case-hero ~ .case-study-content .project-info-tag {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.2);
}

.education-case-hero ~ .case-study-content .project-info-tag:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
}

/* Process Section */
.process-section {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.process-step {
    display: flex;
    gap: 28px;
    padding: 36px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    border-left: 3px solid #3b82f6;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 1px 2px rgba(15, 23, 42, 0.02);
    position: relative;
}

.process-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 20px 0 0 20px;
}

.process-step:hover {
    transform: translateX(6px);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08),
                0 2px 8px rgba(15, 23, 42, 0.04);
    border-color: rgba(59, 130, 246, 0.2);
    border-left-width: 4px;
}

.step-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.process-step:hover .step-icon {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.step-content {
    flex: 1;
}

.step-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
    letter-spacing: -0.4px;
    line-height: 1.3;
}

.step-description {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Results Section */
.results-section {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.result-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    padding: 40px 32px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 1px 2px rgba(15, 23, 42, 0.02);
    position: relative;
    overflow: hidden;
}

.result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08),
                0 2px 8px rgba(15, 23, 42, 0.04);
    border-color: rgba(59, 130, 246, 0.15);
}

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

.result-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    color: #3b82f6;
    font-size: 1.75rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.result-card:hover .result-icon {
    transform: scale(1.1);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(37, 99, 235, 0.15) 100%);
}

.result-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 14px 0;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.result-description {
    font-size: 1rem;
    line-height: 1.7;
    color: #64748b;
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* CTA Section */
.cta-section {
    margin-top: 60px;
    margin-bottom: 0;
}

.cta-container {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 24px;
    padding: 64px 48px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(59, 130, 246, 0.25),
                0 2px 8px rgba(59, 130, 246, 0.15);
    position: relative;
    overflow: hidden;
    border: none;
}

.cta-container::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: ctaPulse 3s ease-in-out infinite;
}

@keyframes ctaPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

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

.cta-title {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 16px 0;
    letter-spacing: -0.8px;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px 0;
    line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: #ffffff;
    color: #3b82f6;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
}

.btn-cta-primary:hover {
    background: #f8fafc;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    color: #2563eb;
    text-decoration: none;
}

.btn-cta-primary i {
    font-size: 1.2rem;
}

/* Sidebar */
.case-sidebar {
    position: sticky;
    top: 100px;
}

.sidebar-description {
    font-size: 0.9375rem;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.7;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.sidebar-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 20px;
    padding: 36px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04),
                0 1px 2px rgba(15, 23, 42, 0.02);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sidebar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sidebar-card:hover {
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.08),
                0 2px 8px rgba(15, 23, 42, 0.04);
    transform: translateY(-4px);
    border-color: rgba(59, 130, 246, 0.15);
}

.sidebar-card:hover::before {
    opacity: 1;
}

.sidebar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.4px;
    line-height: 1.3;
}

.sidebar-title i {
    color: #3b82f6;
    font-size: 1.25rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
    border-radius: 10px;
    flex-shrink: 0;
}

/* Technologies */
.technologies-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-badge {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(59, 130, 246, 0.08);
    color: #1e40af;
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: -0.01em;
}

.tech-badge:hover {
    background: rgba(59, 130, 246, 0.12);
    transform: translateY(-2px);
    border-color: rgba(59, 130, 246, 0.25);
    color: #1e3a8a;
}

/* Quick Info */
.quick-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.quick-info-list li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    font-size: 0.9375rem;
    color: #64748b;
    font-weight: 400;
    transition: all 0.2s ease;
    letter-spacing: -0.01em;
}

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

.quick-info-list li:hover {
    color: #0f172a;
    padding-left: 4px;
}

.quick-info-list li i {
    color: #3b82f6;
    font-size: 1.125rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* CTA Card */
.cta-card {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    text-align: center;
}

.cta-card .btn {
    background: #ffffff;
    color: #3b82f6;
    border: none;
    font-weight: 600;
    padding: 14px 24px;
    transition: var(--transition);
}

.cta-card .btn:hover {
    background: #f8f9fa;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    color: #2563eb;
}

/* Responsive Case Study */
@media (max-width: 992px) {
    .case-study-cover {
        height: 350px;
        width: 100%;
        max-width: 100%;
    }
    
    .cover-image-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .cover-image {
        width: 100%;
        max-width: 100%;
    }
    
    .case-study-header {
        margin-top: -150px;
        padding-bottom: 0;
        margin-bottom: 20px;
    }
    
    .education-case-hero .case-study-header {
        margin-top: -150px;
    }
    
    .technical-case-hero .case-study-header {
        margin-top: -150px;
    }
    
    .case-study-content {
        padding: 20px 0 60px;
    }
    
    .case-study-title-section {
        padding: 32px 28px;
        border-radius: 20px;
        box-shadow: 
            10px 10px 20px rgba(0, 0, 0, 0.35),
            -10px -10px 20px rgba(255, 255, 255, 0.04),
            inset 3px 3px 6px rgba(0, 0, 0, 0.18),
            inset -3px -3px 6px rgba(255, 255, 255, 0.07);
    }
    
    .case-study-title-section:hover {
        box-shadow: 
            12px 12px 24px rgba(0, 0, 0, 0.4),
            -12px -12px 24px rgba(255, 255, 255, 0.05),
            inset 4px 4px 8px rgba(0, 0, 0, 0.2),
            inset -4px -4px 8px rgba(255, 255, 255, 0.08);
    }
    
    .title-breadcrumb-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .case-breadcrumb {
        width: 100%;
        justify-content: flex-start;
    }
    
    .case-study-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        margin-bottom: 0;
    }
    
    .case-study-subtitle {
        font-size: 1.05rem;
    }
    
    .case-sidebar {
        position: static;
        margin-top: 40px;
    }
    
    .case-breadcrumb .breadcrumb-modern {
        padding: 8px 16px;
        gap: 3px;
        box-shadow: 
            6px 6px 12px rgba(0, 0, 0, 0.3),
            -6px -6px 12px rgba(255, 255, 255, 0.03),
            inset 2px 2px 4px rgba(0, 0, 0, 0.15),
            inset -2px -2px 4px rgba(255, 255, 255, 0.05);
    }
    
    .case-breadcrumb .breadcrumb-modern:hover {
        box-shadow: 
            8px 8px 16px rgba(0, 0, 0, 0.35),
            -8px -8px 16px rgba(255, 255, 255, 0.04),
            inset 3px 3px 6px rgba(0, 0, 0, 0.18),
            inset -3px -3px 6px rgba(255, 255, 255, 0.07);
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item {
        font-size: 0.82rem;
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item::before {
        padding: 0 7px;
    }
    
    .education-project-meta-info-inline {
        gap: 8px;
    }
    
    .education-meta-badge-inline {
        font-size: 0.8125rem;
        padding: 6px 12px;
    }
    
    .technologies-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 12px;
    }
    
    .results-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .case-study-cover {
        height: 280px;
        width: 100%;
        max-width: 100%;
    }
    
    .cover-image-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .cover-image {
        width: 100%;
        max-width: 100%;
    }
    
    .case-study-header {
        margin-top: -120px;
        padding-bottom: 20px;
    }
    
    .education-case-hero .case-study-header {
        margin-top: -120px;
    }
    
    .technical-case-hero .case-study-header {
        margin-top: -120px;
    }
    
    .technical-project-meta-info-inline {
        flex-direction: column;
        gap: 8px;
    }
    
    .technical-meta-badge-inline {
        font-size: 0.8125rem;
        padding: 6px 12px;
    }
    
    .technical-project-tags-inline {
        gap: 6px;
    }
    
    .technical-tag-badge-inline {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    
    .case-study-title-section {
        padding: 25px 20px;
    }
    
    .case-study-title {
        font-size: 2rem;
    }
    
    .case-study-subtitle {
        font-size: 1.1rem;
    }
    
    .case-study-content {
        padding: 20px 0 50px;
    }
    
    .case-section {
        margin-bottom: 50px;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .section-title-main {
        font-size: 2rem;
    }
    
    .overview-card {
        padding: 25px 20px;
    }
    
    .section-content p {
        font-size: 1rem;
    }
    
    .education-project-meta-info-inline {
        flex-direction: column;
        gap: 8px;
    }
    
    .education-meta-badge-inline {
        font-size: 0.8125rem;
        padding: 6px 12px;
    }
    
    .education-learning-outcomes-inline {
        gap: 6px;
    }
    
    .learning-outcome-badge-inline {
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    
    .technologies-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .tech-item {
        padding: 14px 16px;
    }
    
    .similar-projects-section {
        margin-top: 60px;
        padding-top: 60px;
    }
    
    .project-info-card {
        padding: 28px 24px;
    }
    
    .project-info-title {
        font-size: 1.25rem;
        margin-bottom: 24px;
    }
    
    .project-info-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .project-info-item {
        padding: 16px;
    }
    
    .project-info-icon {
        width: 40px;
        height: 40px;
        font-size: 1.125rem;
    }
    
    .project-info-content span {
        font-size: 1rem;
    }
    
    .process-step {
        flex-direction: column;
        padding: 25px 20px;
        gap: 20px;
    }
    
    .step-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .results-grid {
        grid-template-columns: 1fr;
    }
    
    .sidebar-card {
        padding: 25px 20px;
    }
    
    .cta-container {
        padding: 40px 25px;
    }
    
    .cta-title {
        font-size: 1.75rem;
    }
    
    .cta-subtitle {
        font-size: 1.05rem;
    }
    
    .btn-cta-primary {
        padding: 16px 35px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .case-study-cover {
        height: 220px;
        width: 100%;
        max-width: 100%;
    }
    
    .cover-image-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .cover-image {
        width: 100%;
        max-width: 100%;
    }
    
    .case-study-header {
        margin-top: -100px;
        padding-bottom: 0;
        margin-bottom: 20px;
    }
    
    .case-study-content {
        padding: 20px 0 40px;
    }
    
    .case-breadcrumb .breadcrumb-modern {
        padding: 8px 12px;
        gap: 2px;
        box-shadow: 
            4px 4px 8px rgba(0, 0, 0, 0.3),
            -4px -4px 8px rgba(255, 255, 255, 0.03),
            inset 2px 2px 4px rgba(0, 0, 0, 0.15),
            inset -2px -2px 4px rgba(255, 255, 255, 0.05);
    }
    
    .case-breadcrumb .breadcrumb-modern:hover {
        box-shadow: 
            6px 6px 12px rgba(0, 0, 0, 0.35),
            -6px -6px 12px rgba(255, 255, 255, 0.04),
            inset 3px 3px 6px rgba(0, 0, 0, 0.18),
            inset -3px -3px 6px rgba(255, 255, 255, 0.07);
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item {
        font-size: 0.75rem;
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item::before {
        padding: 0 5px;
        font-size: 0.85rem;
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item a {
        gap: 3px;
        padding: 3px 0;
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item a i {
        font-size: 0.8rem;
    }
    
    .case-breadcrumb .breadcrumb-modern .breadcrumb-item.active {
        padding: 3px 0;
    }
    
    .case-study-title-section {
        padding: 24px 20px;
    }
    
    .case-study-title {
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 12px;
    }
    
    .case-study-subtitle {
        font-size: 1rem;
    }
    
    .case-study-title {
        font-size: 1.75rem;
    }
    
    .overview-card {
        padding: 20px 15px;
    }
    
    .overview-content p {
        font-size: 1rem;
    }
}

/* ============================================
   7️⃣ ADMIN STYLES
   ============================================ */

.navbar-dark {
    background-color: #212529 !important;
}

/* ============================================
   8️⃣ RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 992px) {
    .hero-section-modern {
        min-height: 100vh;
        height: auto;
        padding: 80px 0 60px;
    }
    
    .hero-title {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }
    
    .hero-subtitle {
        font-size: clamp(1rem, 2.5vw, 1.3rem);
    }
    
    .hero-description p {
        font-size: 1rem;
    }
    
    #expertise {
        padding: 80px 0;
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: 0.75rem 0;
        min-height: 60px; /* Mobilde sabit yükseklik */
    }
    
    .navbar.scrolled {
        padding: 0.5rem 0;
        min-height: 56px; /* Mobil scroll durumunda */
    }
    
    .hero-section-modern {
        min-height: 100vh;
        height: auto;
        padding: 60px 0 40px;
    }
    
    .hero-content {
        padding: 20px 15px;
    }
    
    .hero-badge {
        font-size: 0.75rem;
        padding: 8px 16px;
        gap: 6px;
    }
    .hero-badge i {
        font-size: 0.85rem;
    }
    
    .hero-title {
        font-size: 2.375rem; /* 38px */
        margin: 20px 0;
        letter-spacing: -0.02em;
    }
    .hero-title .title-line-2 {
        margin-top: 2px;
    }
    
    .hero-subtitle {
        font-size: 0.95rem;
        margin: 14px 0;
        line-height: 1.5;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    .hero-description {
        margin-top: 16px;
    }
    .hero-description p {
        font-size: 0.9rem;
    }
    /* Açıklama: mobilde sığmıyorsa alt satıra geçer */
    .hero-description .hero-description-line {
        font-size: 0.8rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    .btn-hero-primary {
        padding: 16px 35px;
        font-size: 1rem;
    }
    
    .hero-cta {
        margin-top: 30px !important;
    }
    
    .expertise-card {
        margin-bottom: 1.5rem;
    }
    
    .expertise-card .card-body {
        padding: 1.5rem;
    }
    
    #expertise {
        padding: 60px 0;
    }
    
    .technologies-section {
        position: static;
        margin-top: 2rem;
    }
    
    .detail-cover-image img {
        max-height: 250px;
    }
    
    .detail-hero {
        padding: 1.5rem;
    }
    
    .detail-content {
        padding: 20px 0;
    }
    
    .content-text {
        font-size: 1rem;
    }
    
    footer {
        padding: 2rem 0 1.5rem;
        margin-top: 60px;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .detail-content .row {
        flex-direction: column;
    }
    
    .technologies-section {
        margin-top: 2rem;
        position: static;
    }
}

@media (max-width: 576px) {
    .hero-section-modern {
        padding: 50px 0 30px;
    }
    
    .hero-badge {
        font-size: 0.7rem;
        padding: 6px 12px;
    }
    .hero-badge i {
        font-size: 0.8rem;
    }
    
    .hero-title {
        font-size: 2rem; /* 32px */
        margin: 16px 0;
    }
    
    .hero-subtitle {
        font-size: 0.85rem;
        margin: 12px 0;
        white-space: normal;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    .hero-description {
        margin-top: 12px;
    }
    .hero-description p {
        font-size: 0.85rem;
    }
    /* Açıklama: mobilde sığmıyorsa alt satıra geçer */
    .hero-description .hero-description-line {
        font-size: 0.72rem;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    
    .btn-hero-primary {
        padding: 14px 28px;
        font-size: 0.95rem;
    }
    
    .card-image-wrapper {
        height: 220px;
    }
    
    .expertise-card .card-body {
        padding: 1.25rem;
    }
}

/* ============================================
   9️⃣ ANIMATIONS & UTILITIES
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Aurora & Mesh Gradients Animations */
@keyframes auroraGradient {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes auroraMove {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

@keyframes auroraMoveReverse {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-40px, 40px) rotate(180deg);
    }
}

/* ============================================
   PREMIUM / CLEAN OVERRIDES (minimal, modern)
   ============================================ */

/* Reduce heavy hero gradients (cleaner, more corporate) */
.hero-background::before,
.hero-background::after,
.hero-pattern::before,
.hero-pattern::after {
    opacity: 0.18;
}

.hero-gradient {
    background: linear-gradient(135deg, #0b1020 0%, #111a33 45%, #0b1020 100%);
    background-size: 100% 100%;
    animation: none;
    opacity: 1;
}

.hero-pattern {
    background-image:
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.10) 0%, transparent 55%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 55%),
        linear-gradient(180deg, transparent 0%, rgba(10, 15, 30, 0.35) 100%);
    animation: none;
}

/* More premium typography rhythm */
.hero-title {
    letter-spacing: -1px;
}

.hero-subtitle,
.hero-description p {
    opacity: 0.92;
}

/* Modern nav underline animation (desktop) */
.navbar-nav .nav-link {
    position: relative;
}

@media (min-width: 769px) {
    .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -10px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 220ms ease, opacity 220ms ease;
        opacity: 0;
    }

    /* "Referans Projeler" gibi dropdown menüleri: altına küçük aşağı ok */
    .navbar-nav .dropdown-toggle::before {
        content: '';
        position: absolute;
        left: 50%;
        /* Yazının hemen altına (linkin içinde) */
        bottom: 2px;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid rgba(15, 23, 42, 0.32);
        transform: translateX(-50%);
        opacity: 0.65;
        transition: opacity 180ms ease, transform 180ms ease, border-top-color 180ms ease;
        pointer-events: none;
    }

    .navbar-nav .dropdown-toggle:hover::before,
    .navbar-nav .dropdown-toggle[aria-expanded="true"]::before,
    .navbar-nav .dropdown.show > .dropdown-toggle::before {
        opacity: 1;
        transform: translateX(-50%) translateY(1px);
        border-top-color: rgba(59, 130, 246, 0.95);
    }

    .navbar-nav .nav-link:hover::after {
        transform: scaleX(1);
        opacity: 0.55;
    }

    .navbar-nav .nav-link.active::after {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* Soft mockup styling (if device images exist) */
.mockup-image,
.device-mockup,
.device-mockup img,
img.mockup,
img.device {
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(2, 6, 23, 0.16);
}

/* Glassmorphism: bottom grey text box on fullscreen cover */
.case-study-hero.cover-fullscreen .cover-overview-text {
    background: transparent;
    border: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* Technologies as premium tags (bottom-left overlay) */
.case-study-hero.cover-fullscreen .cover-tech-overlay {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    max-width: min(42%, 360px);
}

.case-study-hero.cover-fullscreen .cover-tech-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px; /* Detay Başlığı gibi: üst-alt 0 */
    border-radius: 0; /* köşeler 0 */
    background: rgba(255, 255, 255, 0.85); /* beyaz arka plan */
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #0b1220; /* siyah yazı */
    text-shadow: none;
}

.case-study-hero.cover-fullscreen .cover-tech-item::before {
    content: "✓";
    color: #22c55e; /* yeşil tik */
    font-weight: 900;
    line-height: 1;
    font-size: 1em;
}


/* ============================================
   🔟 MOBILE POLISH (non-breaking overrides)
   Amaç: Mevcut yapıyı bozmadan mobilde daha sade/şık görünüm
   ============================================ */

/* Better defaults for media/content */
img, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* Always hide the legacy mobile drawer close button */
.mobile-nav-close {
    display: none !important;
}

/* Navbar is navbar-expand-lg => collapse starts under 992px.
   Drawer UX must apply up to 992px (otherwise overlay shows but menu doesn't). */
@media (max-width: 992px) {
    /* Ensure drawer is above overlay (navbar creates stacking context) */
    .navbar {
        z-index: 10010;
    }

    /* Better touch target for toggler */
    .navbar-toggler {
        min-width: 44px;
        min-height: 44px;
    }

    /* Mobile nav becomes a right-side drawer (<= 992px) */
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(92vw, 380px);
        height: 100vh;
        margin-top: 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.98);
        border-left: 1px solid rgba(15, 23, 42, 0.10);
        border-top: 0;
        border-radius: 0;
        box-shadow: -24px 0 80px rgba(2, 6, 23, 0.18);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(110%);
        transition: transform 0.25s ease, visibility 0.25s ease;
        z-index: 10011; /* above overlay */
    }

    /* Keep element available for transforms */
    .navbar-collapse.collapse:not(.show) {
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Overlay */
    .mobile-nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 10000; /* under navbar/drawer */
    }

    .mobile-nav-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    /* Drawer nav items */
    .navbar-nav {
        gap: 6px;
        padding-top: 6px;
    }

    /* Mobile drawer: underline/lines kapat (dokunmada hover çizgisi kalmasın) */
    .navbar-nav .nav-link::after {
        display: none !important;
    }

    .navbar-nav .nav-link {
        padding: 0.9rem 0.9rem;
        border-radius: 14px;
        font-weight: 600;
        color: #0f172a !important;
        min-height: 44px; /* touch target */
        display: flex;
        align-items: center;
    }

    .navbar-nav .nav-link:hover {
        background: rgba(59, 130, 246, 0.08);
    }

    /* Dropdown in drawer: chevron + full width menu */
    .navbar-nav .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        cursor: pointer;
        user-select: none;
    }

    .navbar-nav .dropdown-toggle::after {
        border: 0;
        margin-left: 10px;
        content: "\f282"; /* bi-chevron-down */
        font-family: "bootstrap-icons";
        font-size: 0.95rem;
        line-height: 1;
        opacity: 0.75;
        transition: transform 0.2s ease, opacity 0.2s ease;
        width: 1.25rem;           /* sabit alan: sayfa kaymasın */
        flex: 0 0 1.25rem;
        text-align: center;
    }

    .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    .navbar .dropdown-menu {
        width: 100%;
        border: 0;
        box-shadow: none;
        padding: 0.25rem 0 0.25rem;
        margin-top: 0.25rem;
        background: transparent;
        position: static; /* drawer içinde accordion gibi aksın */
        transform: none !important;
        display: none; /* Varsayılan olarak gizli */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }

    .navbar .dropdown-menu.show {
        display: block !important; /* Açıldığında göster */
        max-height: 500px; /* Yeterince büyük bir değer */
        opacity: 1;
        padding: 0.25rem 0 0.25rem;
    }

    .navbar-nav .dropdown {
        position: static;
    }

    .navbar .dropdown-item {
        border-radius: 12px;
        padding: 0.75rem 0.85rem;
        background: rgba(15, 23, 42, 0.03);
        margin: 6px 0;
        min-height: 44px; /* touch target */
        display: flex;
        align-items: center;
    }

    .navbar .dropdown-item:hover {
        background: rgba(59, 130, 246, 0.10);
    }

    /* Lock scroll when drawer open */
    html.mobile-nav-open,
    body.mobile-nav-open {
        overflow: hidden;
        height: 100%;
    }
}

@media (max-width: 768px) {
    /* Body spacing: navbar mobile height */
    body {
        padding-top: 60px;
    }

    body.index-page {
        padding-top: 0;
    }

    /* Fallback for browsers not supporting :has() */
    .case-study-hero {
        margin-top: -60px;
    }

    /* Navbar: tighter, cleaner, better touch targets */
    .navbar .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .navbar-brand {
        max-width: 78%;
    }

    /* Logo text: mobile'de üstte ortalı, alt satırı gizle */
    .site-logo-wrapper {
        width: 100%;
        align-items: center;
        text-align: center;
    }

    .site-logo {
        max-height: 36px;
        width: auto;
    }

    .site-logo-text {
        font-size: 0.95rem;
        line-height: 1.1;
        white-space: nowrap;
        text-align: center;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .site-domain {
        display: none;
    }

    .navbar-toggler {
        border-radius: 12px;
        padding: 0.35rem 0.55rem;
        min-width: 44px;
        min-height: 44px; /* dokunma hedefi */
    }

    .navbar-toggler:focus {
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }

    /* Mobile nav becomes a right-side drawer */
    .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(92vw, 380px);
        height: 100vh;
        margin-top: 0;
        padding: 16px;
        background: rgba(255, 255, 255, 0.98);
        border-left: 1px solid rgba(15, 23, 42, 0.10);
        border-top: 0;
        border-radius: 0;
        box-shadow: -24px 0 80px rgba(2, 6, 23, 0.18);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateX(110%);
        transition: transform 0.25s ease, visibility 0.25s ease;
        z-index: 10001;
    }

    /* Keep element available for transforms */
    .navbar-collapse.collapse:not(.show) {
        display: block;
        visibility: hidden;
        pointer-events: none;
    }

    .navbar-collapse.show {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }

    /* Drawer close button */
    .mobile-nav-close {
        display: none;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 14px;
        border: 1px solid rgba(15, 23, 42, 0.10);
        background: rgba(255, 255, 255, 0.9);
        color: #0f172a;
        margin-left: auto;
        margin-bottom: 8px;
        box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
    }

    .mobile-nav-close:active {
        transform: scale(0.98);
    }

    /* Overlay */
    .mobile-nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.45);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
        z-index: 10000;
    }

    .mobile-nav-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .navbar-nav .nav-link {
        padding: 0.9rem 0.9rem;
        border-radius: 14px;
        font-weight: 600;
        color: #0f172a !important;
    }

    .navbar-nav {
        gap: 6px;
        padding-top: 6px;
    }

    .navbar-nav .nav-link:hover {
        background: rgba(59, 130, 246, 0.08);
    }

    .navbar-nav .nav-link:active {
        transform: scale(0.99);
    }

    .navbar-nav .nav-link.active::after {
        bottom: 8px;
        width: 18px;
        height: 2px;
    }

    /* Mobil menüde aktif link çizgisini kaldır (özellikle "Referans Projeler") */
    .navbar-nav .nav-link.active::after {
        display: none;
    }

    /* Dropdown olduğunu daha net göster: aşağı ok */
    .navbar-nav .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
        cursor: pointer;
        user-select: none;
    }

    .navbar-nav .dropdown-toggle::after {
        border: 0; /* Bootstrap caret'i devre dışı */
        margin-left: auto;
        content: "\f282"; /* bi-chevron-down */
        font-family: "bootstrap-icons";
        font-size: 0.95rem;
        line-height: 1;
        opacity: 0.75;
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    .navbar-nav .dropdown-toggle[aria-expanded="true"]::after {
        transform: rotate(180deg);
        opacity: 1;
    }

    .navbar .dropdown-menu {
        width: 100%;
        border: 0;
        box-shadow: none;
        padding: 0.25rem 0 0.25rem;
        margin-top: 0.25rem;
        background: transparent;
        display: none; /* Varsayılan olarak gizli */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
    }

    .navbar .dropdown-menu.show {
        display: block !important; /* Açıldığında göster */
        max-height: 500px; /* Yeterince büyük bir değer */
        opacity: 1;
        padding: 0.25rem 0 0.25rem;
    }

    .navbar .dropdown-item {
        border-radius: 12px;
        padding: 0.75rem 0.85rem;
        background: rgba(15, 23, 42, 0.03);
        margin: 6px 0;
    }

    .navbar .dropdown-item:hover {
        background: rgba(59, 130, 246, 0.10);
    }

    /* Lock scroll when drawer open */
    html.mobile-nav-open,
    body.mobile-nav-open {
        overflow: hidden;
        height: 100%;
    }

    /* Headings & text rhythm (mobile) */
    h1, .h1 { letter-spacing: -0.5px; }
    p { word-break: break-word; }

    /* Projects pages */
    .projects-hero {
        padding: 90px 0 52px;
    }

    .projects-hero h1 {
        font-size: 2.15rem;
        letter-spacing: -0.7px;
        margin-bottom: 1rem;
    }

    .projects-hero p {
        font-size: 1.05rem;
        padding: 0 0.25rem;
    }

    .projects-grid {
        padding: 52px 0;
    }

    .project-card-body {
        padding: 18px 18px;
    }

    .project-card-title {
        font-size: 1.1rem;
    }

    .project-card-description {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    /* Breadcrumbs should wrap on small screens */
    .breadcrumb,
    .breadcrumb-modern {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    /* Footer links: nicer mobile layout */
    footer .footer-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 0.75rem;
    }

    footer .footer-link {
        display: inline-flex;
        align-items: center;
        padding: 7px 12px;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.04);
    }

    /* Touch targets: minimum 44px */
    .navbar-nav .nav-link,
    .navbar .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

@media (max-width: 576px) {
    /* Even tighter logo + navbar */
    .navbar-brand {
        max-width: 74%;
    }

    .site-logo-text {
        font-size: 0.9rem;
    }

    .site-domain {
        letter-spacing: 1px;
    }

    /* Hero titles */
    .hero-title {
        line-height: 1.05;
    }

    /* Cards: slightly reduced padding */
    .expertise-card .card-body {
        padding: 1.15rem;
    }

    .project-card-body {
        padding: 16px;
    }
}

/* Professional Animations for Title Section */
@keyframes professionalGlow {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

@keyframes professionalGlowHover {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1) translate(0, 0);
    }
    33% {
        opacity: 1;
        transform: scale(1.08) translate(10px, -10px);
    }
    66% {
        opacity: 0.9;
        transform: scale(1.06) translate(-8px, 8px);
    }
}

@keyframes subtleShine {
    0% {
        transform: translate(-100%, -100%) rotate(0deg);
        opacity: 0;
    }
    50% {
        opacity: 0.3;
    }
    100% {
        transform: translate(100%, 100%) rotate(360deg);
        opacity: 0;
    }
}

.expertise-card {
    animation: fadeIn 0.6s ease-out;
}

.expertise-card:nth-child(1) { animation-delay: 0.1s; }
.expertise-card:nth-child(2) { animation-delay: 0.2s; }
.expertise-card:nth-child(3) { animation-delay: 0.3s; }
.expertise-card:nth-child(4) { animation-delay: 0.4s; }
.expertise-card:nth-child(5) { animation-delay: 0.5s; }

/* Utility Classes */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

/* Sosyal Medya ve WhatsApp Container */
.social-whatsapp-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    overflow: visible;
}

/* Sosyal Medya İkonları - Küçük ve Üst Üste */
.social-media-icons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    overflow: visible;
    position: relative; /* ana sayfada dikey metin için referans */
}

/* Ana sayfa: sosyal ikonların yanında dikey slogan (aşağıdan yukarıya) */
body.index-page .social-media-icons::before {
    content: attr(data-home-social-vertical-text);
    position: absolute;
    /* Sosyal medya ikon grubu bittiği yerden (üstten) başlat */
    left: 50%;
    top: 0;
    writing-mode: vertical-rl;
    transform: translate(-50%, calc(-100% - 26px)) rotate(180deg); /* +20px daha yukarı */
    /* Harfleri sağa 90° döndür (yukarı doğru tek sütun) */
    text-orientation: sideways;
    white-space: nowrap;       /* asla yeni sütuna kırma */
    font-family: 'Caveat', 'Segoe Script', 'Comic Sans MS', cursive;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    text-transform: none;
    /* Sadece yazı: arka plan/çerçeve yok */
    color: #ffffff;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* Açık/koyu zeminlerde okunabilirlik */
    mix-blend-mode: difference;
    pointer-events: none; /* tıklamayı engellemesin */
    z-index: 1002;
}

/* Admin panel font seçimi: 15 seçenek */
body.index-page .social-media-icons[data-home-social-vertical-font="caveat"]::before { font-family: 'Caveat', 'Segoe Script', cursive; }
body.index-page .social-media-icons[data-home-social-vertical-font="dancing"]::before { font-family: 'Dancing Script', 'Segoe Script', cursive; }
body.index-page .social-media-icons[data-home-social-vertical-font="kalam"]::before { font-family: 'Kalam', 'Segoe Script', cursive; }
body.index-page .social-media-icons[data-home-social-vertical-font="merienda"]::before { font-family: 'Merienda', 'Inter', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="patrick"]::before { font-family: 'Patrick Hand', 'Segoe Script', cursive; }
body.index-page .social-media-icons[data-home-social-vertical-font="gloria"]::before { font-family: 'Gloria Hallelujah', 'Segoe Script', cursive; }
body.index-page .social-media-icons[data-home-social-vertical-font="marck"]::before { font-family: 'Marck Script', 'Segoe Script', cursive; }
body.index-page .social-media-icons[data-home-social-vertical-font="satisfy"]::before { font-family: 'Satisfy', 'Segoe Script', cursive; }

body.index-page .social-media-icons[data-home-social-vertical-font="inter"]::before { font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="montserrat"]::before { font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="manrope"]::before { font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="dm_sans"]::before { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="nunito"]::before { font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="rubik"]::before { font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif; }
body.index-page .social-media-icons[data-home-social-vertical-font="work_sans"]::before { font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; }

@media (max-width: 768px) {
    body.index-page .social-media-icons::before {
        display: none !important;
    }
}

.social-icon-small {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                0 2px 6px rgba(0, 0, 0, 0.1);
    color: #64748b;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    z-index: 1001;
}

.social-icon-small i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.social-icon-small:hover {
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2),
                0 4px 10px rgba(0, 0, 0, 0.15);
}

.social-icon-small:hover i {
    transform: scale(1.15);
}

/* Instagram Hover */
.social-icon-small[aria-label="Instagram"]:hover {
    color: #E4405F;
    background: rgba(228, 64, 95, 0.1);
    box-shadow: 0 6px 20px rgba(228, 64, 95, 0.3),
                0 4px 10px rgba(228, 64, 95, 0.2);
}

/* Facebook Hover */
.social-icon-small[aria-label="Facebook"]:hover {
    color: #1877F2;
    background: rgba(24, 119, 242, 0.1);
    box-shadow: 0 6px 20px rgba(24, 119, 242, 0.3),
                0 4px 10px rgba(24, 119, 242, 0.2);
}

/* YouTube Hover */
.social-icon-small[aria-label="YouTube"]:hover {
    color: #FF0000;
    background: rgba(255, 0, 0, 0.1);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.3),
                0 4px 10px rgba(255, 0, 0, 0.2);
}

/* Sosyal Medya Preview Card */
.social-preview-card {
    position: absolute;
    right: calc(100% + 20px);
    top: 50%;
    transform: translateY(-50%) scale(0.9);
    transform-origin: right center;
    opacity: 0;
    visibility: hidden;
    width: 280px;
    max-width: calc(100vw - 100px);
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
                0 8px 24px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 10050;
    overflow: hidden;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.social-icon-small:hover .social-preview-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) scale(1) !important;
    pointer-events: auto !important;
}

.social-preview-card:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) scale(1) !important;
    pointer-events: auto !important;
}

.social-preview-phone {
    padding: 12px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.phone-frame {
    width: 100%;
    max-width: 256px;
    margin: 0 auto;
    background: #1a1a1a;
    border-radius: 24px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                inset 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.phone-screen {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    position: relative;
}

.phone-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.phone-status-bar {
    height: 20px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    font-size: 10px;
    color: #1f2937;
}

.phone-nav {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    background: #ffffff;
}

.phone-back,
.phone-menu {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e5e7eb;
}

.phone-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.phone-content {
    padding: 16px;
    height: calc(100% - 64px);
    overflow-y: auto;
}

/* Ghost Elements */
.phone-profile-ghost {
    margin-bottom: 20px;
}

.ghost-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%);
    margin: 0 auto 12px;
    animation: ghostPulse 2s ease-in-out infinite;
}

.ghost-line {
    height: 12px;
    background: linear-gradient(90deg, #e5e7eb 0%, #cbd5e1 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    border-radius: 6px;
    margin-bottom: 8px;
    animation: ghostShimmer 1.5s ease-in-out infinite;
}

.ghost-line:first-of-type {
    width: 60%;
    margin: 0 auto 8px;
}

.ghost-line.short {
    width: 40%;
    margin: 0 auto;
}

.ghost-post {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%);
    border-radius: 8px;
    margin-bottom: 12px;
    animation: ghostPulse 2s ease-in-out infinite;
}

.ghost-video {
    width: 100%;
    height: 140px;
    background: linear-gradient(135deg, #e5e7eb 0%, #cbd5e1 100%);
    border-radius: 8px;
    margin-bottom: 12px;
    animation: ghostPulse 2s ease-in-out infinite;
}

@keyframes ghostPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

@keyframes ghostShimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Platform Specific Colors */
.social-preview-instagram .phone-nav {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

.social-preview-instagram .phone-title {
    color: #ffffff;
}

.social-preview-facebook .phone-nav {
    background: #1877F2;
}

.social-preview-facebook .phone-title {
    color: #ffffff;
}

.social-preview-youtube .phone-nav {
    background: #FF0000;
}

.social-preview-youtube .phone-title {
    color: #ffffff;
}

/* Follow Button */
.social-preview-footer {
    padding: 16px;
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
}

.social-follow-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.social-follow-instagram {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    color: #ffffff;
}

.social-follow-instagram:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(131, 58, 180, 0.4);
    color: #ffffff;
}

.social-follow-facebook {
    background: #1877F2;
    color: #ffffff;
}

.social-follow-facebook:hover {
    background: #166fe5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
    color: #ffffff;
}

.social-follow-youtube {
    background: #FF0000;
    color: #ffffff;
}

.social-follow-youtube:hover {
    background: #e60000;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.4);
    color: #ffffff;
}

.social-follow-btn i {
    font-size: 16px;
}

/* WhatsApp İletişim Butonu */
.whatsapp-contact-btn {
    position: relative;
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4),
                0 4px 12px rgba(37, 211, 102, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    overflow: visible;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.whatsapp-contact-btn:hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(37, 211, 102, 0.5),
                0 6px 16px rgba(37, 211, 102, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    background: linear-gradient(135deg, #2FE576 0%, #25D366 100%);
}

.whatsapp-contact-btn:active {
    transform: translateY(-2px) scale(1.02);
}

.whatsapp-icon-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.whatsapp-icon-wrapper i {
    font-size: 32px;
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

.whatsapp-contact-btn:hover .whatsapp-icon-wrapper i {
    transform: scale(1.1) rotate(5deg);
}

.whatsapp-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.95);
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

.whatsapp-tooltip::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: rgba(15, 23, 42, 0.95);
}

.whatsapp-contact-btn:hover .whatsapp-tooltip {
    opacity: 1;
    visibility: visible;
    right: 75px;
}

.whatsapp-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.6);
    animation: whatsappPulse 2s ease-out infinite;
    z-index: 1;
}

@keyframes whatsappPulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Responsive Sosyal Medya ve WhatsApp */
@media (max-width: 768px) {
    .social-whatsapp-container {
        bottom: 20px;
        right: 20px;
        gap: 10px;
    }
    
    .social-icon-small {
        width: 40px;
        height: 40px;
    }
    
    .social-icon-small i {
        font-size: 16px;
    }
    
    .social-preview-card {
        display: none;
    }
    
    .whatsapp-contact-btn {
        width: 56px;
        height: 56px;
    }
    
    .whatsapp-icon-wrapper i {
        font-size: 28px;
    }
    
    .whatsapp-tooltip {
        display: none;
    }
}

@media (max-width: 576px) {
    .social-whatsapp-container {
        bottom: 16px;
        right: 16px;
        gap: 8px;
    }
    
    .social-icon-small {
        width: 36px;
        height: 36px;
    }
    
    .social-icon-small i {
        font-size: 14px;
    }
    
    .whatsapp-contact-btn {
        width: 52px;
        height: 52px;
    }
    
    .whatsapp-icon-wrapper i {
        font-size: 24px;
    }
}

/* ============================================
   PROJELER SAYFASI - Modern Case Showcase
   ============================================ */

/* Navbar Active Link */
.navbar-nav .nav-link.active {
    position: relative;
    color: #3b82f6 !important;
    font-weight: 600;
}

.navbar-nav .nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 3px;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 2px;
    animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
    from {
        width: 0;
        opacity: 0;
    }
    to {
        width: 30px;
        opacity: 1;
    }
}

/* Projeler Hero Section */
.projects-hero {
    position: relative;
    padding: 120px 0 80px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    overflow: hidden;
}

.projects-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
    pointer-events: none;
}

.projects-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%233b82f6' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.4;
    pointer-events: none;
}

.projects-hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.projects-hero h1 {
    font-size: 3.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.projects-hero p {
    font-size: 1.25rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Proje Kartları Grid */
.projects-grid {
    padding: 80px 0;
}

.project-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    border-color: rgba(59, 130, 246, 0.3);
}

.project-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%; /* 16:10 aspect ratio */
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
}

.project-card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-card:hover .project-card-image-wrapper img {
    transform: scale(1.1);
}

.project-card-body {
    padding: 1.75rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.project-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.project-card:hover .project-card-title {
    color: #3b82f6;
}

.project-card-description {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.project-card-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: #475569;
}
.project-date-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.project-date-item i {
    font-size: 1rem;
    color: #64748b;
    flex-shrink: 0;
}
.project-date-item span {
    white-space: nowrap;
}
.project-date-ongoing {
    color: #0d9488;
}
.project-date-ongoing i {
    color: #0d9488;
}

.project-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.project-tag {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #3b82f6;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.2);
    transition: all 0.3s ease;
}

.project-card:hover .project-tag {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border-color: rgba(59, 130, 246, 0.3);
    transform: translateY(-2px);
}

.project-card-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #3b82f6;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    margin-top: auto;
}

.project-card-button i {
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-button {
    color: #2563eb;
}

.project-card:hover .project-card-button i {
    transform: translateX(4px);
}

/* Proje Detay Sayfası */
.project-detail-hero {
    position: relative;
    padding: 96px 0 60px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}

/* Modern Breadcrumb Tasarımı - Proje Detay Sayfaları */
.project-breadcrumb-nav {
    margin: 0 0 2rem 0;
    display: flex;
    justify-content: flex-start;
    flex-shrink: 0;
}

.project-detail-hero .breadcrumb-modern,
.education-project-detail-hero .breadcrumb-modern {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.85) 0%,
        rgba(51, 65, 85, 0.8) 25%,
        rgba(30, 41, 59, 0.85) 50%,
        rgba(51, 65, 85, 0.8) 75%,
        rgba(30, 41, 59, 0.85) 100%),
        linear-gradient(135deg,
        rgba(99, 102, 241, 0.25) 0%,
        rgba(139, 92, 246, 0.2) 25%,
        rgba(59, 130, 246, 0.25) 50%,
        rgba(236, 72, 153, 0.2) 75%,
        rgba(99, 102, 241, 0.25) 100%);
    background-size: 200% 200%, 200% 200%;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 10px 18px;
    border-radius: 16px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
                0 2px 8px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    animation: auroraGradient 8s ease infinite;
}

/* Aurora & Mesh Gradients - Animated Background */
.project-detail-hero .breadcrumb-modern::before,
.education-project-detail-hero .breadcrumb-modern::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle,
        rgba(99, 102, 241, 0.3) 0%,
        rgba(139, 92, 246, 0.25) 30%,
        rgba(59, 130, 246, 0.3) 60%,
        transparent 100%);
    animation: auroraMove 12s ease-in-out infinite;
    pointer-events: none;
}

.project-detail-hero .breadcrumb-modern::after,
.education-project-detail-hero .breadcrumb-modern::after {
    content: '';
    position: absolute;
    top: -30%;
    right: -30%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle,
        rgba(236, 72, 153, 0.25) 0%,
        rgba(59, 130, 246, 0.2) 40%,
        transparent 70%);
    animation: auroraMoveReverse 10s ease-in-out infinite;
    pointer-events: none;
}

.project-detail-hero .breadcrumb-modern:hover,
.education-project-detail-hero .breadcrumb-modern:hover {
    background: linear-gradient(135deg,
        rgba(30, 41, 59, 0.9) 0%,
        rgba(51, 65, 85, 0.85) 25%,
        rgba(30, 41, 59, 0.9) 50%,
        rgba(51, 65, 85, 0.85) 75%,
        rgba(30, 41, 59, 0.9) 100%),
        linear-gradient(135deg,
        rgba(99, 102, 241, 0.3) 0%,
        rgba(139, 92, 246, 0.25) 25%,
        rgba(59, 130, 246, 0.3) 50%,
        rgba(236, 72, 153, 0.25) 75%,
        rgba(99, 102, 241, 0.3) 100%);
    background-size: 200% 200%, 200% 200%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
                0 4px 12px rgba(0, 0, 0, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.project-detail-hero .breadcrumb-modern > *,
.education-project-detail-hero .breadcrumb-modern > * {
    position: relative;
    z-index: 1;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    padding: 0;
    line-height: 1.5;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item::before,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item::before {
    content: '\203A';
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 300;
    padding: 0 8px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item:first-child::before,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item:first-child::before {
    display: none;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item a,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    position: relative;
    font-weight: 400;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item a i,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item a i {
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.25s ease;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item a:hover,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item a:hover {
    color: #ffffff;
    text-decoration: none;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item a:hover i,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item a:hover i {
    opacity: 1;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item a::after,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.8);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item a:hover::after,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item a:hover::after {
    width: 100%;
}

.project-detail-hero .breadcrumb-modern .breadcrumb-item.active,
.education-project-detail-hero .breadcrumb-modern .breadcrumb-item.active {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    padding: 4px 0;
}

.project-cover-wrapper {
    margin-bottom: 2rem;
}

.project-detail-cover {
    width: 100%;
    min-height: 400px;
    max-height: 630px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

/* Google Discover için görsel optimizasyonu */
@media (min-width: 768px) {
    .project-detail-cover {
        min-height: 500px;
    }
}

@media (min-width: 1200px) {
    .project-detail-cover {
        min-height: 630px;
    }
}

.project-detail-header {
    margin-bottom: 3rem;
}

.project-detail-title {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.project-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
}

.project-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.project-detail-section {
    margin-bottom: 4rem;
}

.project-detail-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    scroll-margin-top: 100px; /* Smooth scroll için */
}

.project-detail-section h2 i {
    color: #3b82f6;
    font-size: 1.75rem;
}

.project-detail-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 1.25rem;
}

.project-summary {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    padding: 2rem;
    border-radius: 16px;
    border-left: 4px solid #3b82f6;
    margin-top: 1.5rem;
}

.project-summary p {
    margin-bottom: 1rem;
}

.project-summary p:last-child {
    margin-bottom: 0;
}

.project-detail-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.project-detail-tech-badge {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    color: #3b82f6;
    border-radius: 8px;
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.similar-projects {
    margin-top: 5rem;
    padding-top: 4rem;
    border-top: 2px solid #e2e8f0;
}

.similar-projects h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 992px) {
    .projects-hero h1 {
        font-size: 2.5rem;
    }
    
    .project-detail-title {
        font-size: 2.25rem;
    }
}

@media (max-width: 768px) {
    .projects-hero {
        padding: 100px 0 60px;
    }
    
    .projects-hero h1 {
        font-size: 2rem;
    }
    
    .projects-hero p {
        font-size: 1.1rem;
    }
    
    .projects-grid {
        padding: 60px 0;
    }
    
    .project-detail-hero {
        padding: 96px 0 40px;
    }
    
    .education-project-detail-hero {
        padding: 96px 0 40px;
    }
    
    .project-breadcrumb-nav {
        margin-bottom: 1.5rem;
        justify-content: flex-start;
    }
    
    .project-detail-hero .breadcrumb-modern,
    .education-project-detail-hero .breadcrumb-modern {
        padding: 8px 16px;
        gap: 3px;
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item {
        font-size: 0.82rem;
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item::before,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item::before {
        padding: 0 7px;
    }
    
    .project-detail-title {
        font-size: 1.75rem;
    }
    
    .project-detail-section h2 {
        font-size: 1.5rem;
    }
}

/* ============================================
   EĞİTİM PROJELERİ STİLLERİ
   ============================================ */

/* =========================================================
   PM (SaaS) UI - Eğitim Projesi Detay
   ========================================================= */
body.education-project-detail-page {
    background: #F8FAFC;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Proje takip vitrin (timeline + kartlar + galeri) */
.pt-showcase { padding: 18px 0 10px; }
.pt-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 14px;
}
.pt-col, .pt-side { min-width: 0; }

.pt-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
    overflow: hidden;
}
.pt-card + .pt-card { margin-top: 14px; }

.pt-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
}
.pt-card-title {
    font-weight: 900;
    color: #0f172a;
    font-size: 0.98rem;
    letter-spacing: -0.01em;
}
.pt-small { font-size: 0.86rem; color: rgba(15, 23, 42, 0.56); }

.pt-card--hero { position: relative; }
.pt-hero-bg { position: relative; height: clamp(220px, 34vh, 360px); background: #0b1220; }
.pt-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,6,23,.25), rgba(2,6,23,.55));
}
.pt-hero-content {
    position: absolute;
    inset: auto 0 0 0;
    padding: 14px 14px 12px;
    color: #fff;
}
.pt-hero-top { display:flex; align-items:center; gap:10px; justify-content: space-between; }
.pt-badge {
    display:inline-flex;
    align-items:center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 0.78rem;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.12);
}
.pt-badge--ok { background: rgba(34,197,94,0.16); border-color: rgba(34,197,94,0.30); }
.pt-badge--warn { background: rgba(245,158,11,0.18); border-color: rgba(245,158,11,0.30); }
.pt-badge--risk { background: rgba(239,68,68,0.16); border-color: rgba(239,68,68,0.30); }
.pt-title {
    margin: 8px 0 6px;
    font-weight: 950;
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
    letter-spacing: -0.02em;
    text-shadow: 0 10px 24px rgba(0,0,0,0.35);
}
.pt-desc {
    margin: 0;
    color: rgba(255,255,255,0.92);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.pt-hero-meta { margin-top: 10px; display:flex; flex-wrap:wrap; gap:8px; }
.pt-chip {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    font-weight: 800;
    font-size: 0.82rem;
}
.pt-chip i { opacity: 0.9; }

.pt-card--timeline .pt-card-head { padding-bottom: 8px; }
.pt-progress {
    height: 10px;
    background: rgba(15, 23, 42, 0.06);
    border-radius: 999px;
    margin: 0 14px 12px;
    overflow: hidden;
}
.pt-progress-bar {
    height: 100%;
    background: rgba(37, 99, 235, 0.95);
    border-radius: 999px;
    width: 0;
}
.pt-milestones {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0 14px 14px;
}
.pt-milestone {
    text-align: center;
    font-weight: 900;
    font-size: 0.85rem;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #F8F9FB;
    color: rgba(15, 23, 42, 0.70);
}
.pt-milestone.is-done {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
    color: rgba(30, 64, 175, 0.95);
}

.pt-gallery {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(120px, 1fr);
    gap: 10px;
    overflow-x: auto;
    padding: 0 14px 14px;
    scroll-snap-type: x mandatory;
}
.pt-gallery-item { scroll-snap-align: start; display:block; border-radius: 14px; overflow:hidden; border: 1px solid rgba(15,23,42,0.08); }
.pt-gallery-item img { width: 100%; height: 120px; object-fit: cover; display:block; transition: transform 220ms ease; }
.pt-gallery-item:hover img { transform: scale(1.05); }
.pt-empty { padding: 0 14px 14px; color: rgba(15,23,42,0.58); }

.pt-card--color { padding: 14px; }
.pt-card--color .pt-card-title { margin-bottom: 10px; display:flex; gap:10px; align-items:center; }
.pt-card--blue { background: linear-gradient(180deg, rgba(37,99,235,0.10), #ffffff 55%); }
.pt-card--green { background: linear-gradient(180deg, rgba(34,197,94,0.10), #ffffff 55%); }
.pt-card--amber { background: linear-gradient(180deg, rgba(245,158,11,0.12), #ffffff 55%); }
.pt-card--indigo { background: linear-gradient(180deg, rgba(99,102,241,0.12), #ffffff 55%); }
.pt-body { color: rgba(15, 23, 42, 0.76); line-height: 1.7; }
.pt-body--muted { margin-top: 10px; font-size: 0.95rem; }
.pt-tags { display:flex; flex-wrap:wrap; gap:8px; }
.pt-tag {
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 800;
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.85);
}
.pt-tag--soft { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.18); }
.pt-card--cta { padding: 14px; }

/* Lightbox */
.pt-lightbox { position: fixed; inset: 0; z-index: 10080; display: none; }
.pt-lightbox.is-open { display: block; }
.pt-lightbox-backdrop { position:absolute; inset:0; background: rgba(2,6,23,0.65); }
.pt-lightbox-panel {
    position: relative;
    width: min(980px, 94vw);
    margin: 6vh auto 0;
    background: #0b1220;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.14);
    overflow: hidden;
    box-shadow: 0 50px 120px rgba(0,0,0,0.45);
}
.pt-lightbox-img { width: 100%; height: auto; display:block; }
.pt-lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #fff;
    padding: 8px 10px;
    border-radius: 12px;
    font-weight: 900;
}
.pt-lightbox-open { overflow: hidden !important; }

/* Gereksiz uzun blokları gizle (benzer projeler kalsın) */
.pm-section[aria-label="Görev & Aşama Takibi"],
.pm-section[aria-label="Notlar & Güncellemeler"],
.pm-section[aria-label="Yönetici Alanı"],
.edu-project-hero,
.edu-quick-info,
.case-study-content .row.g-5 {
    display: none !important;
}

@media (max-width: 992px) {
    .pt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .pt-milestones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pt-gallery-item img { height: 110px; }
}

.pm-commandbar {
    position: sticky;
    top: 76px; /* navbar altında */
    z-index: 1005;
    background: rgba(248, 249, 251, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding: 12px 0;
}

.pm-commandbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pm-title-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.pm-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #fff;
    flex: 0 0 auto;
}
.pm-avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(37, 99, 235, 0.95);
    background: rgba(37, 99, 235, 0.08);
}

.pm-title-meta { min-width: 0; }

.pm-title-line {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.pm-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: min(62vw, 680px);
}

.pm-submeta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(15, 23, 42, 0.62);
    font-size: 0.85rem;
    margin-top: 2px;
    flex-wrap: wrap;
}
.pm-submeta-item i { margin-right: 6px; }
.pm-submeta-sep { opacity: 0.5; }

.pm-actions {
    display: inline-flex;
    gap: 10px;
    flex: 0 0 auto;
}

.pm-btn {
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #0f172a;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.pm-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(2,6,23,0.10); }
.pm-btn--primary {
    background: rgba(37, 99, 235, 0.95);
    border-color: rgba(37, 99, 235, 0.20);
    color: #fff;
}
.pm-btn--ghost {
    background: rgba(255, 255, 255, 0.60);
}

.pm-section { padding: 18px 0; }

.pm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pm-kpi {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 14px 14px 12px;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.06);
}
.pm-kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(15, 23, 42, 0.55);
    font-weight: 800;
    font-size: 0.82rem;
}
.pm-kpi-value {
    font-weight: 900;
    font-size: 1.65rem;
    letter-spacing: -0.02em;
    color: #0f172a;
    margin-top: 8px;
}

.pm-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.78rem;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(15, 23, 42, 0.04);
    color: rgba(15, 23, 42, 0.85);
}
.pm-badge--ok { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.22); color: rgba(22, 101, 52, 0.95); }
.pm-badge--warn { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.22); color: rgba(146, 64, 14, 0.95); }
.pm-badge--risk { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.22); color: rgba(153, 27, 27, 0.95); }

.pm-card {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 18px;
    padding: 14px;
    box-shadow: 0 12px 26px rgba(2, 6, 23, 0.06);
}
.pm-card--risk { border-color: rgba(239, 68, 68, 0.28); }
.pm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}
.pm-h2 {
    font-size: 1rem;
    font-weight: 900;
    margin: 0;
    color: #0f172a;
}
.pm-h3 {
    font-size: 0.95rem;
    font-weight: 900;
    margin: 0 0 10px;
    color: #0f172a;
}
.pm-small {
    font-size: 0.85rem;
    color: rgba(15, 23, 42, 0.55);
}
.pm-body { color: rgba(15, 23, 42, 0.72); line-height: 1.7; }
.pm-hr { border-color: rgba(15, 23, 42, 0.08); margin: 12px 0; }

.pm-timeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}
.pm-step {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: #F8F9FB;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.70);
    text-align: center;
}
.pm-step.is-done {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.18);
    color: rgba(30, 64, 175, 0.95);
}

.pm-tabs .nav-link {
    font-weight: 800;
    color: rgba(15, 23, 42, 0.65);
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 12px 14px;
}
.pm-tabs .nav-link.active {
    color: rgba(30, 64, 175, 0.95);
    border-bottom-color: rgba(37, 99, 235, 0.65);
}
.pm-tab-content { padding-top: 12px; }

.pm-table thead th {
    font-size: 0.8rem;
    color: rgba(15, 23, 42, 0.55);
    font-weight: 900;
    border-bottom-color: rgba(15, 23, 42, 0.08);
}
.pm-table tbody td {
    border-top-color: rgba(15, 23, 42, 0.06);
    color: rgba(15, 23, 42, 0.78);
}
.pm-table tbody tr:hover { background: rgba(37, 99, 235, 0.04); }
.pm-td-title { font-weight: 900; color: #0f172a; }

.pm-progress-wrap { padding: 4px 0; }
.pm-progress-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 10px;
}
.pm-progress-pct { font-weight: 900; font-size: 1.1rem; color: rgba(30, 64, 175, 0.95); }
.pm-progress { height: 10px; border-radius: 999px; background: rgba(15, 23, 42, 0.06); overflow: hidden; }
.pm-progress .progress-bar { background: rgba(37, 99, 235, 0.95); }
.pm-stage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}
.pm-stage {
    background: #F8F9FB;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(15, 23, 42, 0.70);
    font-weight: 800;
}
.pm-stage strong { color: #0f172a; }

.pm-edu-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 12px;
}
.pm-subcard {
    background: #F8F9FB;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 16px;
    padding: 14px;
}
.pm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-chip {
    background: rgba(37, 99, 235, 0.10);
    border: 1px solid rgba(37, 99, 235, 0.16);
    color: rgba(30, 64, 175, 0.95);
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 0.82rem;
}

.pm-log { display: grid; gap: 10px; }
.pm-log-item { display: flex; gap: 10px; align-items: flex-start; }
.pm-log-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.85);
    margin-top: 6px;
    flex: 0 0 auto;
}
.pm-log-title { font-weight: 900; color: #0f172a; }

.pm-admin-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.pm-admin-item {
    background: #F8F9FB;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 14px;
    padding: 12px;
}
.pm-admin-label { font-weight: 900; font-size: 0.82rem; color: rgba(15, 23, 42, 0.55); }
.pm-admin-value { font-weight: 900; color: #0f172a; margin-top: 6px; }

@media (max-width: 992px) {
    .pm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pm-title { max-width: 56vw; }
    .pm-edu-grid { grid-template-columns: 1fr; }
    .pm-admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .pm-commandbar-row { flex-direction: column; align-items: stretch; }
    .pm-actions { width: 100%; }
    .pm-btn { width: 100%; justify-content: center; }
    .pm-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================
   EDU VITRIN (Prompt tasarımı) - Detay sayfası
   ========================================================= */
.edu-project-hero {
    margin-top: 76px;
}

.edu-hero-cover {
    position: relative;
    width: 100%;
    height: clamp(320px, 52vh, 560px);
    overflow: hidden;
    background: #0b1220;
}

.edu-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(2, 6, 23, 0.30) 0%,
        rgba(2, 6, 23, 0.40) 45%,
        rgba(2, 6, 23, 0.62) 100%
    );
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.edu-hero-inner {
    position: absolute;
    inset: 0;
    padding: clamp(16px, 3vw, 28px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 14px;
}

.edu-hero-chips {
    position: absolute;
    top: clamp(14px, 2.2vw, 22px);
    right: clamp(14px, 2.2vw, 22px);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.edu-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.edu-chip--accent {
    background: rgba(59, 130, 246, 0.18);
    border-color: rgba(59, 130, 246, 0.28);
}

.edu-hero-title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0,0,0,0.35);
    font-size: clamp(1.6rem, 4.2vw, 3rem);
    line-height: 1.08;
}

.edu-hero-desc {
    margin: 0;
    max-width: min(780px, 94%);
    color: rgba(255, 255, 255, 0.90);
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.edu-breadcrumb {
    margin-top: 10px;
    margin-bottom: 0;
}

.edu-quick-info {
    padding: 18px 0 6px;
}

.edu-info-card {
    height: 100%;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.06);
    padding: 14px 14px 12px;
    transition: transform 180ms ease, box-shadow 180ms ease;
    overflow: hidden;
}

.edu-info-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.10);
}

.edu-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(59, 130, 246, 0.10);
    color: rgba(37, 99, 235, 0.95);
    margin-bottom: 10px;
}

.edu-info-label {
    font-weight: 800;
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 6px;
}

.edu-info-value {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
    line-height: 1.35;
}

@media (max-width: 576px) {
    .edu-hero-cover { height: 360px; }
    .edu-chip { font-size: 0.8rem; padding: 7px 10px; }
    .edu-info-card { border-radius: 14px; padding: 12px; }
}

/* Eğitim Projeleri Hero */
.education-projects-hero {
    position: relative;
    padding: 120px 0 80px;
    background: #f8fafc; /* slate-50 */
    margin-top: 76px;
}

.education-projects-hero-content {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.education-projects-hero-content h1 {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.education-projects-hero-content .lead {
    font-size: 1.25rem;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.education-hero-badges {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

.education-hero-badges .badge {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
}

/* Make hero badges feel premium/corporate (override Bootstrap colors) */
body.education-projects-page .education-hero-badges .badge {
    background: rgba(79, 70, 229, 0.08) !important;
    color: rgba(49, 46, 129, 0.95) !important;
    border: 1px solid rgba(79, 70, 229, 0.18) !important;
}

/* Eğitim Projeleri Grid */
.education-projects-grid {
    padding: 80px 0;
    background: #f8fafc; /* slate-50 */
}

.education-project-card {
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.06);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.education-project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}

.education-project-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    min-height: 200px;
}

.education-project-card-image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
    z-index: 1;
}

.education-project-card:hover .education-project-card-image-wrapper img {
    transform: scale(1.1);
}

.education-project-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.10) 0%, rgba(148, 163, 184, 0.10) 100%);
    z-index: 0;
}

.education-project-placeholder i {
    font-size: 4rem;
    color: rgba(79, 70, 229, 0.95);
}

.education-project-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.education-card-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.25rem;
}
.education-project-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.75rem;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.education-project-card:hover .education-project-card-title {
    color: rgba(79, 70, 229, 0.95);
}

.education-project-card-description {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.education-project-meta {
    margin-bottom: 1rem;
}

.education-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem; /* mobil min 14px hedefiyle uyumlu */
    color: #64748b;
    background: rgba(79, 70, 229, 0.08);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.education-meta-item i {
    color: rgba(79, 70, 229, 0.95);
}

.education-learning-outcomes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.learning-outcome-badge {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    background: rgba(79, 70, 229, 0.08);
    color: rgba(49, 46, 129, 0.95);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(79, 70, 229, 0.18);
}

.education-project-card-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(79, 70, 229, 0.95);
    font-weight: 700;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    margin-top: auto;
}

.education-project-card-button i {
    transition: transform 0.3s ease;
}

.education-project-card:hover .education-project-card-button {
    color: rgba(49, 46, 129, 0.98);
}

.education-project-card:hover .education-project-card-button i {
    transform: translateX(4px);
}

/* Eğitim Projesi Detay Sayfası */
/* Eğitim Projeleri Detay Hero - Case Study Yapısı */
.education-case-hero {
    margin-top: 76px;
}

.education-case-hero .case-study-cover {
    height: 450px;
}

.education-case-hero .case-study-header {
    margin-top: -200px;
}

/* Eğitim Projesi Meta Bilgileri - Inline */
.education-project-meta-info-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 16px;
}

.education-meta-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.education-meta-badge-inline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.education-meta-badge-inline i {
    font-size: 1rem;
    opacity: 0.9;
}

.education-learning-outcomes-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.learning-outcome-badge-inline {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(34, 197, 94, 0.2);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(34, 197, 94, 0.3);
    transition: all 0.2s ease;
}

.learning-outcome-badge-inline:hover {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
    transform: translateY(-2px);
}

/* Eğitim Projesi için Section Title Renkleri */
.education-case-hero ~ .case-study-content .section-title i {
    color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
}

.education-case-hero ~ .case-study-content .section-title::after {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%);
}

.education-case-hero ~ .case-study-content .overview-card::before,
.education-case-hero ~ .case-study-content .sidebar-card::before {
    background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
}

.education-case-hero ~ .case-study-content .overview-card:hover,
.education-case-hero ~ .case-study-content .sidebar-card:hover {
    border-color: rgba(34, 197, 94, 0.15);
}

.education-case-hero ~ .case-study-content .tech-item i {
    color: #22c55e;
}

.education-case-hero ~ .case-study-content .sidebar-title i {
    color: #22c55e;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
}

.education-case-hero ~ .case-study-content .sidebar-list li i {
    color: #22c55e;
}

.education-case-hero ~ .case-study-content .tech-badge {
    background: rgba(34, 197, 94, 0.08);
    color: #15803d;
    border-color: rgba(34, 197, 94, 0.15);
}

.education-case-hero ~ .case-study-content .tech-badge:hover {
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.25);
    color: #166534;
}

/* Teknik Projeler için Meta Bilgileri - Inline */
.technical-case-hero {
    margin-top: 76px;
}

.technical-case-hero .case-study-cover {
    height: 450px;
}

.technical-case-hero .case-study-header {
    margin-top: -200px;
}

.technical-project-meta-info-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
    margin-bottom: 16px;
}

.technical-meta-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.technical-meta-badge-inline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.technical-meta-badge-inline i {
    font-size: 1rem;
    opacity: 0.9;
}

.technical-project-tags-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.technical-tag-badge-inline {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(99, 102, 241, 0.25);
    backdrop-filter: blur(10px);
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid rgba(139, 92, 246, 0.35);
    transition: all 0.2s ease;
}

.technical-tag-badge-inline:hover {
    background: rgba(99, 102, 241, 0.35);
    border-color: rgba(139, 92, 246, 0.45);
    transform: translateY(-2px);
}


.education-project-cover-wrapper {
    margin-bottom: 2rem;
}

.education-project-detail-cover {
    width: 100%;
    min-height: 400px;
    max-height: 630px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
    margin-bottom: 2rem;
}

.education-project-detail-header {
    margin-bottom: 3rem;
}

.education-project-detail-title {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    margin-bottom: 1rem;
}

.education-project-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.education-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(34, 197, 94, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    color: #16a34a;
    font-weight: 600;
    font-size: 0.9rem;
}

.education-meta-badge i {
    font-size: 1.1rem;
}

.education-learning-outcomes-header {
    margin-bottom: 1rem;
}

.education-project-detail-content {
    padding: 60px 0;
    background: #ffffff;
}

.education-project-detail-section {
    margin-bottom: 4rem;
}

.education-project-detail-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    scroll-margin-top: 100px;
}

.education-project-detail-section p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 1.25rem;
}

.education-project-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.education-tech-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    color: #16a34a;
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Eğitim Sidebar */
.education-case-sidebar {
    position: sticky;
    top: 100px;
}

.education-sidebar-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.education-sidebar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.education-sidebar-title i {
    color: #22c55e;
}

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

.education-info-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

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

.education-info-list li i {
    color: #22c55e;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.education-trust-info {
    margin-top: 1rem;
}

.trust-item {
    margin-bottom: 1.5rem;
}

.trust-item:last-child {
    margin-bottom: 0;
}

.trust-item strong {
    display: block;
    color: #1e293b;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.trust-item p {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

.similar-education-projects {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 2px solid #e2e8f0;
}

.similar-education-projects h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 2rem;
    text-align: center;
}

/* Responsive */
@media (max-width: 992px) {
    .education-projects-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .education-project-detail-title {
        font-size: 2.25rem;
    }
    
    .education-case-sidebar {
        position: static;
        margin-top: 3rem;
    }
}

@media (max-width: 768px) {
    .education-projects-hero {
        padding: 100px 0 60px;
    }
    
    .education-projects-hero-content h1 {
        font-size: 2rem;
    }
    
    .education-projects-hero-content .lead {
        font-size: 1.1rem;
    }
    
    .education-projects-grid {
        padding: 60px 0;
    }
    
    .education-project-detail-hero {
        padding: 96px 0 40px;
    }
    
    .project-breadcrumb-nav {
        justify-content: flex-start;
    }
    
    .project-detail-hero .breadcrumb-modern,
    .education-project-detail-hero .breadcrumb-modern {
        padding: 8px 12px;
        gap: 2px;
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item {
        font-size: 0.875rem; /* mobil min 14px */
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item::before,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item::before {
        padding: 0 5px;
        font-size: 0.85rem;
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item a,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item a {
        gap: 3px;
        padding: 3px 0;
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item a i,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item a i {
        font-size: 0.875rem;
    }
    
    .project-detail-hero .breadcrumb-modern .breadcrumb-item.active,
    .education-project-detail-hero .breadcrumb-modern .breadcrumb-item.active {
        padding: 3px 0;
    }
    
    .education-project-detail-title {
        font-size: 1.75rem;
    }
    
    .education-project-detail-section h2 {
        font-size: 1.5rem;
    }
    
    .education-project-meta-info {
        flex-direction: column;
    }
}

/* ============================================
   PAGE TEMPLATE - Hakkımda, SSS, Bana Ulaş
   ============================================ */

/* Page Hero Section */
.page-hero-section {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    padding: 120px 0 60px;
    margin-top: 76px;
    position: relative;
    overflow: hidden;
}

.page-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.page-hero-content {
    position: relative;
    z-index: 1;
}

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

.page-breadcrumb .breadcrumb-item {
    font-size: 0.9rem;
    color: #64748b;
}

.page-breadcrumb .breadcrumb-item a {
    color: #3b82f6;
    text-decoration: none;
    transition: var(--transition);
}

.page-breadcrumb .breadcrumb-item a:hover {
    color: #2563eb;
    text-decoration: underline;
}

.page-breadcrumb .breadcrumb-item.active {
    color: #1e293b;
    font-weight: 500;
}

.page-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '›';
    color: #94a3b8;
    padding: 0 8px;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 1.25rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

/* Page Content Section */
.page-content-section {
    padding: 80px 0;
    background: #ffffff;
}

.page-content-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 60px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.page-content {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
}

.page-content h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e2e8f0;
}

.page-content h2:first-of-type {
    margin-top: 0;
}

.page-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #334155;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.page-content h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #475569;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.page-content p {
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
}

.page-content ul,
.page-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.page-content li {
    margin-bottom: 0.75rem;
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
}

.page-content a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
    border-bottom: 1px solid transparent;
}

.page-content a:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.page-content blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #64748b;
    background: #f8fafc;
    padding: 1.5rem;
    border-radius: 8px;
}

.page-content code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
    color: #e11d48;
    font-family: 'Courier New', monospace;
}

.page-content pre {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1.5rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.page-content pre code {
    background: transparent;
    color: #e2e8f0;
    padding: 0;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    margin: 2rem 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
}

.page-content table th,
.page-content table td {
    padding: 12px;
    border: 1px solid #e2e8f0;
    text-align: left;
}

.page-content table th {
    background: #f8fafc;
    font-weight: 600;
    color: #1e293b;
}

/* Contact Form Styles (Bana Ulaş sayfası için) */
.contact-form-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

.contact-form .form-label {
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.contact-form .form-control {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: var(--transition);
}

.contact-form .form-control:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.contact-form .btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border: none;
    padding: 12px 32px;
    font-weight: 600;
    border-radius: 8px;
    transition: var(--transition);
}

.contact-form .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
}

/* FAQ Styles (SSS sayfası için) */
.faq-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
    transition: var(--transition);
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
}

.faq-question {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.faq-question::before {
    content: 'Q';
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-answer {
    font-size: 1.125rem;
    line-height: 1.85;
    color: #475569;
    margin: 0;
    padding-left: 44px;
}

/* Responsive */
@media (max-width: 992px) {
    .page-title {
        font-size: 2.5rem;
    }
    
    .page-content-wrapper {
        padding: 40px;
    }
}

@media (max-width: 768px) {
    .page-hero-section {
        padding: 100px 0 40px;
    }
    
    .page-title {
        font-size: 2rem;
    }
    
    .page-subtitle {
        font-size: 1.1rem;
    }
    
    .page-content-wrapper {
        padding: 30px 20px;
    }
    
    .page-content h2 {
        font-size: 1.75rem;
    }
    
    .page-content h3 {
        font-size: 1.35rem;
    }
    
    .contact-form-wrapper {
        padding: 30px 20px;
    }
}

/* Dark mode kaldırıldı (sadece aydınlık tema) */

/* =========================================================
   Project Case Study (Eğitim Projesi Detay) - Modern UI
   (Slate-50 + Indigo accent, low-contrast borders)
   ========================================================= */

body.education-project-detail-page {
    background: #f8fafc; /* slate-50 */
}

/* Arduino page: professional palette polish */
body.arduino-project-page {
    background: linear-gradient(180deg, #eef2ff 0%, #f8fafc 55%, #ffffff 100%);
}

body.arduino-project-page .pc-hero {
    padding-bottom: 6px;
}

/* Dual cards (Amaç + Proje Sonucu) */
.pc-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.pc-card--accent {
    position: relative;
    overflow: hidden;
}
.pc-card--accent::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    opacity: 0.95;
}
.pc-card--accent::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(900px 360px at 20% 15%, rgba(255,255,255,0.55), rgba(255,255,255,0.00) 60%);
    opacity: 0.8;
}
.pc-card--indigo::before {
    background: linear-gradient(180deg, rgba(79,70,229,0.95), rgba(99,102,241,0.35));
}
.pc-card--emerald::before {
    background: linear-gradient(180deg, rgba(16,185,129,0.95), rgba(52,211,153,0.35));
}
.pc-card--indigo {
    background: linear-gradient(135deg, rgba(79,70,229,0.12) 0%, rgba(99,102,241,0.08) 50%, rgba(255,255,255,0.95) 100%);
}
.pc-card--emerald {
    background: linear-gradient(180deg, rgba(16,185,129,0.06) 0%, rgba(255,255,255,0.92) 60%);
}

.pc-card--accent .pc-card-head,
.pc-card--accent .pc-prose,
.pc-card--accent .pc-tech-block {
    position: relative;
    z-index: 1;
}

body.arduino-project-page .pc-card-head {
    position: relative;
    z-index: 1;
}
body.arduino-project-page .pc-prose {
    position: relative;
    z-index: 1;
}

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

/* Arduino page: "Kullanılan Teknolojiler" under results */
body.arduino-project-page .pc-tech-block {
    position: relative;
    z-index: 1;
    padding: 0 16px 16px;
    margin-top: auto; /* push to bottom of the card */
}
body.arduino-project-page .pc-tech-title {
    font-weight: 950;
    font-size: 0.95rem;
    color: rgba(15, 23, 42, 0.85);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.45);
}
body.arduino-project-page .pc-tech-list {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
body.arduino-project-page .pc-tech-item {
    font-size: 0.78rem;
    color: rgba(15, 23, 42, 0.72);
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: rgba(255, 255, 255, 0.65);
}

/* Eğitim projesi: Kullanılan Teknolojiler – alana sığan küçük punto, profesyonel renkler */
.education-project-detail-page .pc-tech-block {
    margin-top: 1rem;
    padding-top: 0;
    padding-bottom: 20px;
    max-width: 100%;
    min-width: 0;
}
.education-project-detail-page .pc-tech-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #475569;
    padding-bottom: 6px;
    padding-left: 10px;
    margin-bottom: 0;
    border-bottom: 1px solid #e2e8f0;
    letter-spacing: 0.02em;
}
.education-project-detail-page .pc-tech-list {
    margin-top: 8px;
    padding-left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 8px;
    max-width: 100%;
    min-width: 0;
}
.education-project-detail-page .pc-tech-item {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 3px 6px;
    border-radius: 4px;
    max-width: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}
.education-project-detail-page .pc-tech-item:nth-child(6n+1) { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.education-project-detail-page .pc-tech-item:nth-child(6n+2) { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.education-project-detail-page .pc-tech-item:nth-child(6n+3) { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }
.education-project-detail-page .pc-tech-item:nth-child(6n+4) { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.education-project-detail-page .pc-tech-item:nth-child(6n+5) { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.education-project-detail-page .pc-tech-item:nth-child(6n+6) { background: #fdf4ff; color: #86198f; border-color: #f5d0fe; }

/* ===== Eğitim Projesi Detay: Modern Kurumsal Görsel Override (yapı/hiyerarşi korunur) ===== */
/* Renk paleti: Ana #1E293B, Vurgu #38BDF8 / #5EEAD4, Arka plan #F8FAFC, Kart #FFFFFF, Başlık #0F172A, Metin #475569 */

.education-project-detail-page .pc-breadcrumb { color: #475569; }
.education-project-detail-page .pc-breadcrumb a { color: #1E293B; transition: color 200ms ease; }
.education-project-detail-page .pc-breadcrumb a:hover { color: #0ea5e9; }
.education-project-detail-page .pc-breadcrumb-current { color: #0F172A; }

.education-project-detail-page .pc-title { color: #0F172A; font-weight: 800; }
.education-project-detail-page .pc-subtitle {
    color: #334155;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.928125rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pc-hero-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    margin-bottom: 10px;
}
.pc-hero-title-row .pc-title { margin-bottom: 0; }
.pc-hero-dates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    font-size: 0.9rem;
    color: #475569;
}
.pc-hero-date-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.pc-hero-date-item i {
    color: #64748b;
    font-size: 1rem;
}
.pc-hero-date-ongoing { color: #0d9488; }
.pc-hero-date-ongoing i { color: #0d9488; }
@media (max-width: 576px) {
    .pc-hero-title-row { flex-direction: column; align-items: flex-start; }
}

.education-project-detail-page .pc-badge { background: #FFFFFF; border-color: rgba(30, 41, 59, 0.12); color: #475569; }
.education-project-detail-page .pc-badge--accent { border-color: rgba(56, 189, 248, 0.35); color: #0c4a6e; background: rgba(56, 189, 248, 0.08); }
.education-project-detail-page .pc-badge--ok { border-color: rgba(94, 234, 212, 0.4); background: rgba(94, 234, 212, 0.1); color: #134e4a; }
.education-project-detail-page .pc-badge--risk { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); color: #991b1b; }

/* Kartlar: beyaz, 14–18px radius, hafif gölge */
.education-project-detail-page .pc-card {
    background: #FFFFFF;
    border: 1px solid rgba(30, 41, 59, 0.08);
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: box-shadow 200ms ease, transform 200ms ease;
}
.education-project-detail-page .pc-card:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08); }

.education-project-detail-page .pc-card-head { padding: 18px 18px 12px; }
.education-project-detail-page .pc-h2 {
    color: #0F172A;
    font-weight: 700;
    font-size: 1.1rem;
}
.education-project-detail-page .pc-h2 i { color: #38BDF8; }
.education-project-detail-page .pc-small { color: #64748b; font-weight: 600; }

.education-project-detail-page .pc-prose {
    color: #334155;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.01em;
    padding: 0 18px 18px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.education-project-detail-page .pc-prose--compact { line-height: 1.6; font-size: 0.825rem; }

/* Amaç & Proje Sonucu: dengeli, sol şerit vurgu, kurumsal renkler */
.education-project-detail-page .pc-card--indigo::before {
    background: linear-gradient(180deg, #1E293B 0%, rgba(30, 41, 59, 0.4) 100%);
}
.education-project-detail-page .pc-card--indigo {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.04) 0%, #FFFFFF 40%);
}
.education-project-detail-page .pc-card--emerald::before {
    background: linear-gradient(180deg, #0d9488 0%, #5EEAD4 100%);
}
.education-project-detail-page .pc-card--emerald {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.06) 0%, #FFFFFF 40%);
}

/* Teknoloji etiketleri: pastel, yuvarlak, hover koyulaşma, 200ms */
.education-project-detail-page .pc-tech-title {
    color: #475569;
    border-bottom-color: #e2e8f0;
}
.education-project-detail-page .pc-tech-item {
    border-radius: 999px;
    transition: filter 200ms ease, box-shadow 200ms ease;
}
.education-project-detail-page .pc-tech-item:hover {
    filter: brightness(0.96);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Bento / önizleme: premium görünüm */
.education-project-detail-page .pc-bento-main,
.education-project-detail-page .pc-bento-mini {
    border-radius: 16px;
    border: 1px solid rgba(30, 41, 59, 0.08);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    padding: 4px;
    transition: box-shadow 200ms ease;
}
.education-project-detail-page .pc-bento-main:hover,
.education-project-detail-page .pc-bento-mini:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
.education-project-detail-page .pc-bento-main img,
.education-project-detail-page .pc-bento-mini img {
    transition: transform 200ms ease;
}
.education-project-detail-page .pc-bento-mini--empty {
    background: #F8FAFC;
    color: #64748b;
}

/* Galeri: yumuşak kenar, hafif boşluk */
.education-project-detail-page .pc-card--gallery { background: #FFFFFF; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); }
.education-project-detail-page .pc-gallery { padding: 0 18px 18px; gap: 12px; }
.education-project-detail-page .pc-gallery-item {
    border-radius: 14px;
    border: 1px solid rgba(30, 41, 59, 0.06);
    overflow: hidden;
    transition: box-shadow 200ms ease;
}
.education-project-detail-page .pc-gallery-item:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
.education-project-detail-page .pc-gallery-item img { transition: transform 200ms ease; }

/* Benzer projeler kartları */
.education-project-detail-page .education-project-card--compact {
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 200ms ease, box-shadow 200ms ease;
}
.education-project-detail-page .education-project-card--compact:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Ensure "Proje Sonucu" card can push tech block down */
body.arduino-project-page .pc-arduino-dual .pc-card--emerald {
    display: flex;
    flex-direction: column;
}

.pc-case {
    padding: 18px 0 56px;
}

/* Full-bleed helper (only used for timeline strip) */
.pc-fullbleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Background: clean single gradient (top darker → bottom lighter) */
body.education-project-detail-page,
body.education-projects-page {
    background-color: #f8fafc;
    background-image: linear-gradient(
        180deg,
        #e2e8f0 0%,
        #f8fafc 55%,
        #ffffff 100%
    );
}

.pc-section {
    padding: 26px 0;
}

.pc-hero {
    padding: 26px 0 10px;
}

.pc-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.92rem;
    color: rgba(15, 23, 42, 0.62);
    margin-bottom: 14px;
}
.pc-breadcrumb a {
    color: rgba(15, 23, 42, 0.70);
    text-decoration: none;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.pc-breadcrumb a:hover { color: rgba(79, 70, 229, 0.95); }
.pc-breadcrumb-sep { opacity: 0.55; }
.pc-breadcrumb-current {
    color: rgba(15, 23, 42, 0.70);
    font-weight: 800;
}

.pc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: start;
}

.pc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.pc-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.35); /* slate-400/35 */
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-weight: 800;
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.78);
}
.pc-badge--accent {
    border-color: rgba(79, 70, 229, 0.26);
    color: rgba(49, 46, 129, 0.92);
    background: rgba(79, 70, 229, 0.08);
}
.pc-badge--ok {
    border-color: rgba(16, 185, 129, 0.28);
    background: rgba(16, 185, 129, 0.10);
    color: rgba(6, 95, 70, 0.95);
}
.pc-badge--risk {
    border-color: rgba(239, 68, 68, 0.28);
    background: rgba(239, 68, 68, 0.08);
    color: rgba(127, 29, 29, 0.95);
}

.pc-title {
    margin: 0 0 10px;
    font-weight: 950;
    font-size: clamp(1.6rem, 3.0vw, 2.6rem);
    letter-spacing: -0.03em;
    color: #0f172a;
}
.pc-subtitle {
    margin: 0 0 14px;
    color: rgba(15, 23, 42, 0.66);
    font-size: 1.05rem;
    line-height: 1.65;
    max-width: 60ch;
}

.pc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    color: rgba(15, 23, 42, 0.60);
    font-weight: 700;
    font-size: 0.92rem;
}
.pc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.70);
    border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Hero timeline (horizontal) */
.pc-hero-timeline-wrap {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.06);
}

/* Full width modern strip variant (unused currently) */
.pc-hero-timeline-wrap--full {
    display: none;
}

.pc-hero-timeline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 4px 10px;
}
.pc-hero-timeline-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.92);
    letter-spacing: -0.01em;
}
.pc-hero-timeline-title i {
    width: 32px;
    height: 32px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.10);
    color: rgba(79, 70, 229, 0.95);
}
.pc-hero-timeline-range {
    font-weight: 900;
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.60);
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.85);
}

.pc-hero-timeline-progress {
    margin-left: auto;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.82);
    font-size: 0.95rem;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.85);
}

/* ---------------------------------------------------------
   Corporate Timeline Component (only for timeline area)
   Navy/Anthracite base + soft blue/green accent
   --------------------------------------------------------- */
.pc-hero-timeline-wrap .corp-timeline {
    /* Align with page palette: Slate + Indigo */
    --base: #0f172a;         /* slate-900 */
    --muted: #64748b;        /* slate-500 */
    --line: #cbd5e1;         /* slate-300 */
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --accent: #4f46e5;       /* indigo-600 */
    --accent-done: #10b981;  /* emerald-500 (soft, premium) */
    --ring: rgba(79, 70, 229, 0.22);

    position: relative;
    padding: 8px 0 6px;
}

.pc-hero-timeline-wrap .corp-track {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 23px; /* aligns with node center */
    height: 4px;
    border-radius: 999px;
    background: rgba(203, 213, 225, 0.75);
    overflow: hidden;
}
.pc-hero-timeline-wrap .corp-track-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-done), var(--accent));
}

.pc-hero-timeline-wrap .corp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(200px, 1fr);
    gap: 14px;
    overflow-x: auto;
    padding: 0 2px 6px;
    scroll-snap-type: x mandatory;
}

.pc-hero-timeline-wrap .corp-step {
    position: relative;
    scroll-snap-align: start;
    padding-top: 44px; /* space for node on the line */
}

.pc-hero-timeline-wrap .corp-node {
    all: unset;
    cursor: default;
    position: absolute;
    top: 6px;
    left: 10px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.pc-hero-timeline-wrap .corp-dot {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(255,255,255,0.96);
    border: 2px solid rgba(15, 23, 42, 0.20);
    box-shadow: 0 0 0 6px rgba(15, 23, 42, 0.04);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.72);
    font-size: 0.95rem;
}
.pc-hero-timeline-wrap .corp-dot i { line-height: 1; }

.pc-hero-timeline-wrap .corp-label {
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: var(--surface);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.05);
    padding: 12px 12px 10px;
    min-height: 84px;
    position: relative;
}
.pc-hero-timeline-wrap .corp-title {
    font-weight: 950;
    color: rgba(15, 23, 42, 0.92);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.pc-hero-timeline-wrap .corp-date {
    margin-top: 6px;
    font-weight: 800;
    font-size: 0.88rem;
    color: rgba(15, 23, 42, 0.62);
}
.pc-hero-timeline-wrap .corp-note {
    margin-top: 8px;
    color: rgba(15, 23, 42, 0.62);
    font-weight: 650;
    font-size: 0.92rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* States */
.pc-hero-timeline-wrap .corp-step.is-done .corp-dot {
    background: var(--accent-done);
    border-color: rgba(16, 185, 129, 0.75);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
    color: #ffffff;
}
.pc-hero-timeline-wrap .corp-step.is-active .corp-dot {
    background: var(--accent);
    border-color: rgba(79, 70, 229, 0.85);
    transform: scale(1.15);
    box-shadow: 0 0 0 7px var(--ring), 0 16px 34px rgba(2, 6, 23, 0.18);
    animation: corpPulse 1.8s ease-in-out infinite;
    color: #ffffff;
}
.pc-hero-timeline-wrap .corp-step.is-todo .corp-label {
    background: rgba(248, 250, 252, 0.85);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.04);
}
.pc-hero-timeline-wrap .corp-step.is-todo .corp-title,
.pc-hero-timeline-wrap .corp-step.is-todo .corp-date {
    color: rgba(15, 23, 42, 0.48);
}
.pc-hero-timeline-wrap .corp-step.is-todo .corp-dot {
    border-color: rgba(148, 163, 184, 0.75);
    box-shadow: 0 0 0 6px rgba(148, 163, 184, 0.10);
    color: rgba(15, 23, 42, 0.45);
}

@keyframes corpPulse {
    0%, 100% { box-shadow: 0 0 0 7px rgba(79, 70, 229, 0.18), 0 16px 34px rgba(2, 6, 23, 0.18); }
    50% { box-shadow: 0 0 0 10px rgba(79, 70, 229, 0.10), 0 16px 34px rgba(2, 6, 23, 0.18); }
}

/* Tooltip card with optional thumbnail (hover/focus) */
.pc-hero-timeline-wrap .corp-tooltip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 10;
}
.pc-hero-timeline-wrap .corp-tooltip-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(15, 23, 42, 0.92);
    color: #ffffff;
    box-shadow: 0 22px 60px rgba(2, 6, 23, 0.25);
}
.pc-hero-timeline-wrap .corp-tooltip-thumb {
    width: 100%;
    height: 86px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
}
.pc-hero-timeline-wrap .corp-tooltip-body { min-width: 0; }
.pc-hero-timeline-wrap .corp-tooltip-title {
    font-weight: 950;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-hero-timeline-wrap .corp-tooltip-date {
    margin-top: 6px;
    font-weight: 800;
    font-size: 0.86rem;
    color: rgba(255,255,255,0.75);
}
.pc-hero-timeline-wrap .corp-tooltip-text {
    margin-top: 8px;
    font-size: 0.92rem;
    line-height: 1.35;
    color: rgba(255,255,255,0.88);
}
.pc-hero-timeline-wrap .corp-tooltip-card:not(:has(.corp-tooltip-thumb)) {
    grid-template-columns: 1fr;
}
.pc-hero-timeline-wrap .corp-step:hover .corp-tooltip,
.pc-hero-timeline-wrap .corp-step:focus-within .corp-tooltip {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: vertical timeline */
@media (max-width: 992px) {
    .pc-hero-timeline-wrap .corp-track { display: none; }
    .pc-hero-timeline-wrap .corp-steps {
        position: relative;
        grid-auto-flow: row;
        grid-auto-columns: unset;
        overflow: visible;
        padding-left: 28px;
    }
    .pc-hero-timeline-wrap .corp-steps::before {
        content: '';
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        width: 4px;
        border-radius: 999px;
        background: rgba(203, 213, 225, 0.75);
    }
    .pc-hero-timeline-wrap .corp-step {
        padding-top: 0;
        padding-left: 0;
        min-width: 0;
    }
    .pc-hero-timeline-wrap .corp-node {
        position: relative;
        top: auto;
        left: -24px;
        margin-top: 10px;
    }
    .pc-hero-timeline-wrap .corp-tooltip { display: none; }
}

.pc-hero-timeline {
    position: relative;
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding: 6px 4px 2px;
    scroll-snap-type: x mandatory;
}
.pc-hero-tl-item {
    --pc-accent: rgba(79, 70, 229, 0.95);
    --pc-accent-soft: rgba(79, 70, 229, 0.08);
    position: relative;
    min-width: 190px;
    max-width: 240px;
    padding: 10px 12px 10px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    /* opaque card so connectors never "show through" */
    background: #ffffff;
    scroll-snap-align: start;
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.05);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.pc-hero-tl-item::after {
    /* connector line only in the gap → no overlap on cards */
    content: '';
    position: absolute;
    top: 17px; /* dot center */
    right: -14px; /* equals gap */
    width: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--pc-accent), rgba(148, 163, 184, 0.35));
    opacity: 0.8;
    pointer-events: none;
}
.pc-hero-tl-item:last-child::after { display: none; }
.pc-hero-tl-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--pc-accent), rgba(148, 163, 184, 0.25));
    opacity: 0.85;
}
.pc-hero-tl-item:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 70, 229, 0.22);
    box-shadow: 0 18px 46px rgba(2, 6, 23, 0.10);
}
.pc-hero-tl-item.is-start,
.pc-hero-tl-item.is-end {
    --pc-accent: rgba(79, 70, 229, 0.95);
    --pc-accent-soft: rgba(79, 70, 229, 0.10);
    background: linear-gradient(180deg, rgba(79, 70, 229, 0.08) 0%, rgba(255,255,255,0.90) 100%);
    border-color: rgba(79, 70, 229, 0.20);
}

.pc-hero-tl-item.is-start::before {
    background: linear-gradient(180deg, rgba(79,70,229,0.95), rgba(79,70,229,0.22));
}
.pc-hero-tl-item.is-end::before {
    background: linear-gradient(180deg, rgba(15,23,42,0.70), rgba(148,163,184,0.25));
}

.pc-hero-tl-dot {
    position: absolute;
    top: 11px;
    left: 14px;
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), var(--pc-accent));
    box-shadow:
        0 0 0 5px rgba(79, 70, 229, 0.10),
        0 12px 30px rgba(2, 6, 23, 0.12);
    z-index: 1;
}
.pc-hero-tl-date {
    margin-left: 22px;
    font-weight: 900;
    font-size: 0.82rem;
    color: rgba(15, 23, 42, 0.62);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.88);
}
.pc-hero-tl-title {
    margin-top: 6px;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.90);
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-hero-tl-item.is-start .pc-hero-tl-title,
.pc-hero-tl-item.is-end .pc-hero-tl-title {
    color: rgba(49, 46, 129, 0.96);
}

.pc-hero-tl-item.is-end .pc-hero-tl-title {
    color: rgba(15, 23, 42, 0.88);
}
.pc-hero-tl-note {
    margin-top: 6px;
    color: rgba(15, 23, 42, 0.64);
    font-weight: 650;
    font-size: 0.92rem;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

/* Color variety (professional, subtle) */
.pc-hero-timeline .pc-hero-tl-item:nth-child(5n+1) { --pc-accent: rgba(79, 70, 229, 0.95); } /* indigo */
.pc-hero-timeline .pc-hero-tl-item:nth-child(5n+2) { --pc-accent: rgba(59, 130, 246, 0.95); } /* blue */
.pc-hero-timeline .pc-hero-tl-item:nth-child(5n+3) { --pc-accent: rgba(99, 102, 241, 0.95); } /* violet */
.pc-hero-timeline .pc-hero-tl-item:nth-child(5n+4) { --pc-accent: rgba(14, 165, 233, 0.95); } /* sky */
.pc-hero-timeline .pc-hero-tl-item:nth-child(5n)   { --pc-accent: rgba(71, 85, 105, 0.85); }  /* slate */
.pc-hero-tl-empty {
    margin-top: 8px;
    color: rgba(15, 23, 42, 0.55);
    font-weight: 700;
    font-size: 0.92rem;
}

/* Quick stats (legacy - no longer used in education project detail) */
.pc-quickstats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.pc-stat {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.05);
}
.pc-stat-ico {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.10);
    color: rgba(79, 70, 229, 0.95);
    flex: 0 0 auto;
}
.pc-stat-label {
    font-size: 0.82rem;
    font-weight: 800;
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 2px;
}
.pc-stat-value {
    font-weight: 900;
    color: rgba(15, 23, 42, 0.86);
    font-size: 0.95rem;
    line-height: 1.3;
}

/* Bento grid */
.pc-bento {
    display: grid;
    grid-template-columns: 1.35fr 0.65fr;
    gap: 12px;
    align-items: stretch;
}
.pc-bento-main {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #fff;
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.08);
}
.pc-bento-main img {
    width: 100%;
    height: clamp(240px, 38vh, 420px);
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 280ms ease;
}
.pc-bento-main:hover img { transform: scale(1.03); }
.pc-bento-fallback {
    width: 100%;
    height: clamp(240px, 38vh, 420px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(15, 23, 42, 0.55);
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(16, 185, 129, 0.08));
    font-size: 2rem;
}
.pc-bento-side {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
}
.pc-bento-mini {
    display: block;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: #fff;
    box-shadow: 0 12px 34px rgba(2, 6, 23, 0.06);
}
.pc-bento-mini img {
    width: 100%;
    height: 100%;
    min-height: 130px;
    object-fit: cover;
    display: block;
    transition: transform 260ms ease;
}
.pc-bento-mini:hover img { transform: scale(1.04); }
.pc-bento-mini--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    color: rgba(15, 23, 42, 0.52);
    font-weight: 900;
    background: rgba(255, 255, 255, 0.65);
}

/* Cards */
.pc-card {
    background: rgba(255, 255, 255, 0.90);
    border: 1px solid rgba(148, 163, 184, 0.24); /* border-slate-200/50 feel */
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.06);
    overflow: hidden;
}
.pc-card--soft {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.pc-card--gallery { padding-bottom: 12px; }

.pc-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 10px;
}
.pc-h2 {
    margin: 0;
    font-weight: 950;
    font-size: 1.15rem;
    color: rgba(15, 23, 42, 0.92);
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.pc-h2--center { text-align: center; justify-content: center; width: 100%; margin-bottom: 14px; }
.pc-small { font-size: 0.9rem; font-weight: 700; color: rgba(15, 23, 42, 0.54); }
.pc-subhead {
    padding: 0 16px;
    margin-top: 4px;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.75);
}

.pc-prose {
    padding: 0 16px 16px;
    color: rgba(15, 23, 42, 0.74);
    line-height: 1.8;
}
.pc-prose--compact { line-height: 1.75; }

/* KV grid */
.pc-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 0 16px 16px;
}
.pc-kv {
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(248, 250, 252, 0.75);
}
.pc-kv-k {
    font-size: 0.82rem;
    font-weight: 900;
    color: rgba(15, 23, 42, 0.55);
    margin-bottom: 4px;
}
.pc-kv-v {
    font-weight: 800;
    color: rgba(15, 23, 42, 0.86);
}

/* Timeline */
.pc-card--timeline { padding-bottom: 16px; }
.pc-timeline {
    display: flex;
    gap: 14px;
    padding: 0 16px;
    overflow-x: auto;
}
.pc-timeline-step {
    position: relative;
    min-width: 220px;
    padding: 14px 14px 14px 18px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(248, 250, 252, 0.85);
    transition: transform 240ms ease, box-shadow 240ms ease, background 240ms ease;
}
.pc-timeline-step:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.08);
    background: rgba(255, 255, 255, 0.92);
}
.pc-dot {
    position: absolute;
    left: 10px;
    top: 16px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: rgba(79, 70, 229, 0.95);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.14);
}
.pc-step-title { font-weight: 950; color: rgba(15, 23, 42, 0.92); margin-bottom: 6px; }
.pc-step-desc { color: rgba(15, 23, 42, 0.65); font-weight: 650; font-size: 0.95rem; }

/* Glass split Problem/Solution */
.pc-glass-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.pc-split {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.70);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 50px rgba(2, 6, 23, 0.06);
    overflow: hidden;
}
.pc-split--problem { background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), rgba(255, 255, 255, 0.75)); }
.pc-split--solution { background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(255, 255, 255, 0.75)); }
.pc-split-head {
    padding: 14px 16px 10px;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.90);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.pc-split .pc-prose { padding-top: 0; }

/* Skills */
.pc-skill-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 16px 8px;
}
.pc-skill-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.20);
    background: rgba(248, 250, 252, 0.85);
    transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.pc-skill-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.08);
    background: rgba(255, 255, 255, 0.92);
}
.pc-skill-ico {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(79, 70, 229, 0.10);
    color: rgba(79, 70, 229, 0.95);
    flex: 0 0 auto;
}
.pc-skill-label { font-weight: 800; color: rgba(15, 23, 42, 0.82); line-height: 1.35; }

.pc-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 10px 16px 16px;
}
.pc-panel {
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.05);
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease;
}
.pc-panel:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgba(2, 6, 23, 0.10); }
.pc-panel-head {
    padding: 14px 16px 8px;
    font-weight: 950;
    color: rgba(15, 23, 42, 0.90);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.pc-panel .pc-prose { padding-top: 0; }
.pc-panel--student { background: linear-gradient(135deg, rgba(79, 70, 229, 0.08), rgba(255, 255, 255, 0.80)); }
.pc-panel--teacher { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.80)); }

/* Floating tags */
.pc-float-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 16px 16px;
}
.pc-float-tag {
    --d: 0;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    background: rgba(255, 255, 255, 0.82);
    font-weight: 900;
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.78);
    box-shadow: 0 10px 26px rgba(2, 6, 23, 0.05);
    animation: pcFloat 3.6s ease-in-out infinite;
    animation-delay: calc(var(--d) * 0.12s);
}
@keyframes pcFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Metrics (count-up) */
.pc-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px 14px;
}
.pc-metric {
    padding: 14px 12px;
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: rgba(248, 250, 252, 0.85);
    text-align: center;
}
.pc-metric-value {
    font-weight: 950;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    color: rgba(79, 70, 229, 0.95);
}
.pc-metric-label {
    margin-top: 2px;
    font-weight: 900;
    font-size: 0.9rem;
    color: rgba(15, 23, 42, 0.62);
}

/* Gallery */
.pc-gallery {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    padding: 0 16px;
}
.pc-gallery-item {
    display: block;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.22);
    background: #fff;
}
.pc-gallery-item img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    display: block;
    transition: transform 220ms ease;
}
.pc-gallery-item:hover img { transform: scale(1.05); }

/* Similar projects compact */
.education-project-card--compact:hover { transform: translateY(-6px); }

/* Responsive */
@media (max-width: 992px) {
    .pc-hero-grid { grid-template-columns: 1fr; }
    .pc-hero-timeline { flex-direction: column; overflow: visible; }
    .pc-hero-timeline::before { display: none; }
    .pc-hero-tl-item::after { display: none; }
    .pc-hero-tl-item { min-width: 0; max-width: none; }
    .pc-bento { grid-template-columns: 1fr; }
    .pc-bento-side { grid-template-columns: 1fr 1fr; grid-template-rows: unset; }
    .pc-timeline { flex-direction: column; overflow: visible; }
    .pc-timeline-step { min-width: 0; }
    .pc-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-duo { grid-template-columns: 1fr; }
    .pc-glass-split { grid-template-columns: 1fr; }
    .pc-kv-grid { grid-template-columns: 1fr; }
    .pc-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
    .pc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pc-gallery-item img { height: 120px; }
    .pc-timeline-step { min-width: 0; }
}