/* --- style.css | PREMIUM INDUSTRIAL KONSEPT --- */

/* 1. YENİ FONTLAR: Oswald (Güçlü Başlıklar) ve Roboto (Okunaklı Metin) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600&family=Roboto:wght@300;400;500&display=swap');

:root {
    /* Renk Paleti: Premium Dark & Amber */
    --bg-body: #121212;       /* Tam Siyah yerine çok koyu antrasit */
    --bg-glass: rgba(40, 40, 40, 0.6); /* Kartlar için koyu cam */
    
    --primary: #f59e0b;       /* Kehribar / Altın Sarısı (Vurgu rengi) */
    --primary-glow: rgba(245, 158, 11, 0.5);
    --secondary: #a3a3a3;     /* Açık gri metinler */
    --text-main: #f5f5f5;     /* Kırık beyaz metin */
    
    --gradient-text: linear-gradient(to right, #f59e0b, #d97706); /* Altın Gradyan */
    --gradient-btn: linear-gradient(135deg, #f59e0b 0%, #b45309 100%); /* Buton Gradyanı */
    
    --border-glass: 1px solid rgba(255, 255, 255, 0.08);
    --shadow-glow: 0 0 40px rgba(245, 158, 11, 0.15);
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body { 
    font-family: 'Roboto', sans-serif; /* Gövde fontu değişti */
    background-color: var(--bg-body); 
    color: var(--text-main); 
    overflow-x: hidden; 
    line-height: 1.8;
    /* Arka plan ışıklarını sarı tonlarına çektik */
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(245, 158, 11, 0.05), transparent 25%), 
        radial-gradient(circle at 85% 30%, rgba(180, 83, 9, 0.05), transparent 25%);
}

h1, h2, h3, h4, .logo, .nav-btn {
    font-family: 'Oswald', sans-serif; /* Başlık fontu değişti */
    letter-spacing: 0.5px;
}

/* --- YÜZEN NAVBAR (FLOATING PILL) --- */
nav {
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
    width: 90%; max-width: 1200px; height: 70px;
    padding: 0 30px;
    display: flex; justify-content: space-between; align-items: center;
    z-index: 1000;
    
    background: rgba(18, 18, 18, 0.8); /* Daha koyu arka plan */
    backdrop-filter: blur(16px);
    border: var(--border-glass);
    border-radius: 50px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
}

.logo { 
    font-size: 24px; font-weight: 600; color: #fff; 
    text-decoration: none; display: flex; align-items: center; gap: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.logo i { color: var(--primary); text-shadow: 0 0 15px var(--primary-glow); }

.nav-right { display: flex; align-items: center; gap: 30px; }
.nav-menu { display: flex; gap: 25px; }

.nav-menu a { 
    text-decoration: none; color: #d4d4d4; 
    font-weight: 500; font-size: 15px; transition: 0.3s;
}
.nav-menu a:hover, .nav-menu a.active { color: var(--primary); }

.nav-btn {
    padding: 10px 24px;
    background: var(--gradient-btn);
    color: #fff; border-radius: 30px;
    font-weight: 500; font-size: 14px; text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.nav-btn:hover { 
    transform: translateY(-2px); 
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); 
}

/* --- HERO SECTION --- */
.hero { 
    height: 100vh; display: flex; align-items: center; justify-content: center;
    text-align: center; padding: 0 20px; position: relative;
    overflow: hidden;
}

.hero::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.08) 0%, transparent 60%);
    animation: pulse 10s infinite alternate; z-index: -1;
}

.hero-content { max-width: 900px; z-index: 2; margin-top: 50px; }

.badge { 
    display: inline-block; padding: 6px 16px; 
    background: rgba(245, 158, 11, 0.1); color: var(--primary); border-radius: 4px; /* Daha köşeli */
    font-size: 13px; font-weight: 600; border: 1px solid rgba(245, 158, 11, 0.2); 
    margin-bottom: 30px; letter-spacing: 2px; text-transform: uppercase;
}

.hero h1 { 
    font-size: 72px; line-height: 1.1; margin-bottom: 25px; font-weight: 600; 
    background: linear-gradient(to bottom right, #ffffff, #a3a3a3);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    letter-spacing: 0px; text-transform: uppercase;
}

.hero p { font-size: 18px; color: var(--secondary); margin-bottom: 40px; margin-left: auto; margin-right: auto; max-width: 600px; font-weight: 300; }

.hero-btns { display: flex; justify-content: center; gap: 20px; }

.btn-outline { 
    padding: 12px 30px; background: transparent; 
    border: 1px solid rgba(255,255,255,0.15); color: #fff; 
    border-radius: 30px; font-weight: 500; text-decoration: none; transition: 0.3s; 
}
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }

/* --- FEATURES (CAM EFEKTLİ KARTLAR) --- */
.features { 
    padding: 100px 10%; display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; 
}

.feature-card { 
    background: var(--bg-glass); 
    backdrop-filter: blur(10px);
    padding: 40px 30px; border-radius: 12px; /* Daha keskin köşeler */
    border: var(--border-glass); 
    transition: 0.4s; position: relative; overflow: hidden;
}

.feature-card::after {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at top right, rgba(245, 158, 11, 0.1), transparent 60%);
    opacity: 0; transition: 0.4s;
}
.feature-card:hover { transform: translateY(-10px); border-color: rgba(245, 158, 11, 0.3); }
.feature-card:hover::after { opacity: 1; }

.icon-box { 
    font-size: 32px; margin-bottom: 20px; 
    background: var(--gradient-text); -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.feature-card h3 { font-size: 22px; margin-bottom: 10px; color: #fff; text-transform: uppercase; letter-spacing: 0.5px; }
.feature-card p { color: var(--secondary); font-size: 15px; }

/* --- PAGE HEADER (Alt Sayfalar İçin) --- */
.page-header {
    padding: 200px 10% 80px; text-align: center;
}
.page-header h1 { font-size: 56px; margin-bottom: 20px; color: #fff; text-transform: uppercase; }
.page-header p { color: var(--secondary); max-width: 600px; margin: 0 auto; }

/* --- PROJELER --- */
.projects-section { padding: 100px 10%; }
.section-header { text-align: center; margin-bottom: 60px; }
.section-header h2 { font-size: 42px; margin-bottom: 15px; text-transform: uppercase; }
.section-header p { color: var(--secondary); }

.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.project-item { 
    border-radius: 12px; overflow: hidden; height: 350px; position: relative; 
    border: var(--border-glass);
}
.project-item img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.project-item:hover img { transform: scale(1.1); }
.overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    display: flex; flex-direction: column; justify-content: flex-end; padding: 30px;
}

/* --- FOOTER --- */
footer { padding: 80px 10% 40px; border-top: var(--border-glass); background: #0a0a0a; margin-top: auto; }
.footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 60px; }
.footer-brand p { color: var(--secondary); margin-top: 20px; font-size: 14px; }
.footer-col h4 { color: #fff; margin-bottom: 25px; text-transform: uppercase; letter-spacing: 1px; }
.footer-col ul li { margin-bottom: 10px; list-style: none; }
.footer-col ul li a { color: var(--secondary); text-decoration: none; transition: 0.3s; font-size: 14px; }
.footer-col ul li a:hover { color: var(--primary); }

/* --- İLETİŞİM INPUT STİLİ (Ekstra) --- */
.contact-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.2);
}

/* --- ANİMASYONLAR --- */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.1); opacity: 0.8; }
}
.reveal { opacity: 0; transform: translateY(30px); transition: 1s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
    nav { width: 95%; padding: 0 15px; }
    .nav-menu { display: none; }
    .hero h1 { font-size: 48px; }
    .project-grid { grid-template-columns: 1fr; }
}
/* --- YENİ NESİL PRELOADER SİSTEMİ (GÜNCEL) --- */

/* 1. INTRO LOADER (İlk Giriş - SIVI BAR EFEKTİ - AYNI KALDI) */
#intro-loader {
    position: fixed; inset: 0; z-index: 9999;
    background-color: #050505;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: opacity 0.8s ease-out, visibility 0.8s ease-out;
}

.loader-content { text-align: center; width: 100%; max-width: 400px; position: relative; }

.loader-logo {
    width: 90px; height: 90px; margin: 0 auto 40px;
    opacity: 0; transform: scale(0.8);
    animation: fadeInScale 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* SIVI BAR KONTEYNERİ */
.progress-container {
    width: 100%; height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px; position: relative; overflow: hidden;
    margin-top: 20px;
    opacity: 0; animation: fadeIn 0.5s ease-out 0.5s forwards;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

/* SIVI BAR (LIQUID FILL) */
.progress-bar {
    position: absolute; top: 0; left: 0; height: 100%; width: 0%;
    background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24);
    background-size: 200% 100%; border-radius: 10px;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
    transition: width 0.2s linear;
    animation: flowGradient 2s linear infinite;
}

.progress-bar::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0;
    width: 10px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 10px #fff, 0 0 20px #f59e0b; opacity: 0.8;
}

.loader-percentage {
    font-family: 'Rajdhani', sans-serif; color: #f59e0b; font-size: 16px; font-weight: bold;
    margin-top: 15px; letter-spacing: 2px;
    opacity: 0; animation: fadeIn 0.5s ease-out 0.5s forwards;
}

/* 2. TRANSITION LOADER (SAYFA GEÇİŞİ - YENİ TASARIM: LOGO + 3 NOKTA) */
/* --- style.css - GÜNCELLEME --- */

#transition-loader {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 9998;
    background-color: #050505;
    display: flex; align-items: center; justify-content: center;
    
    /* Başlangıç */
    opacity: 0; visibility: hidden; pointer-events: none;
    
    /* BURASI DEĞİŞTİ: 0.4s yerine 1s yaptık (Daha yavaş belirip kaybolur) */
    transition: all 1s ease-in-out; 
}

/* Diğer CSS kodları aynı kalabilir... */

#transition-loader.active {
    opacity: 1; visibility: visible; pointer-events: all;
}

/* İçerik Ortalama ve Animasyon */
.transition-center {
    display: flex; flex-direction: column; align-items: center; gap: 25px;
    transform: scale(0.95); transition: transform 0.4s ease-out;
}

#transition-loader.active .transition-center { transform: scale(1); }

/* Geçiş Logosu */
.t-logo {
    width: 70px; height: auto;
    filter: drop-shadow(0 0 15px rgba(245, 158, 11, 0.4));
    animation: pulseLogo 2s infinite ease-in-out;
}

/* Noktalar */
.dots-wrapper { display: flex; gap: 12px; }

.dot {
    width: 10px; height: 10px;
    background-color: #f59e0b; border-radius: 50%;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.8);
    animation: dotsFlow 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) { animation-delay: -0.32s; }
.dot:nth-child(2) { animation-delay: -0.16s; }
.dot:nth-child(3) { animation-delay: 0s; }

/* ORTAK ANİMASYON KEYFRAMES */
@keyframes fadeInScale { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes flowGradient { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@keyframes dotsFlow {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; } 
    40% { transform: scale(1.2); opacity: 1; }
}

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.05); opacity: 1; }
}

body.loading { overflow: hidden !important; }
/* --- MOBİL PRELOADER DÜZELTMESİ --- */
@media (max-width: 768px) {
    .loader-content {
        width: 60% !important; /* Ekranın sadece %60'ını kaplasın */
        max-width: 250px !important; /* Asla 250px'i geçmesin */
    }
    
    .progress-container {
        border-radius: 50px; /* Mobilde daha oval dursun */
    }
}
/* --- YENİ PREMİUM MOBİL MENÜ CSS --- */

/* Menü Açıkken Overlay */
#mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Linklerin Başlangıç Hali (Gizli, Bulanık ve Aşağıda) */
.mobile-link {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    filter: blur(10px);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Menü Açılınca Linklerin Hali (Görünür, Net ve Yerinde) */
#mobile-menu-overlay.active .mobile-link {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
}

/* Sırayla Gelme Efekti (Stagger Delay) */
#mobile-menu-overlay.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }
#mobile-menu-overlay.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
#mobile-menu-overlay.active .mobile-link:nth-child(3) { transition-delay: 0.2s; }
#mobile-menu-overlay.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }
#mobile-menu-overlay.active .mobile-link:nth-child(5) { transition-delay: 0.35s; } /* İletişim biraz daha geç gelsin */

/* Menü Kapanırken (Daha hızlı ve yumuşak kaybolsun) */
#mobile-menu-overlay:not(.active) .mobile-link {
    transition-duration: 0.3s;
    transform: translateY(-20px); /* Kapanırken yukarı kaçsın */
    opacity: 0;
}

/* Nav Gizleme (Menü açılınca arkadaki nav karışmasın) */
body.menu-open nav {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
/* --- MOBİL MENÜ AKTİF SAYFA STİLİ --- */

/* Aktif Sayfanın Yazısı Sarı Olsun */
.mobile-link.active-page span.block {
    color: #f59e0b !important; /* Amber Rengi */
}

/* Aktif Sayfanın Çizgisi Çekili Dursun */
.mobile-link.active-page span.line-anim {
    transform: translate(0, 0) !important; /* Çizgi görünür */
    background-color: #f59e0b;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); /* Hafif parlama */
}
/* --- MOBİL FOOTER KISALTMA (SON HALİ) --- */
@media (max-width: 768px) {
    /* 1. Footer'ın genel üst/alt boşluğu */
    footer {
        padding-top: 20px !important;
        padding-bottom: 10px !important;
    }

    /* 2. İkon Grubu ile Yazı Grubu arasındaki boşluk */
    footer .flex.flex-col.gap-3 {
        gap: 10px !important; 
    }

    /* 3. İkonlar */
    footer a.w-12 {
        width: 45px !important;
        height: 45px !important;
    }
    
    /* İkon simgeleri */
    footer a.w-12 i {
        font-size: 18px !important;
    }

    /* İkonların yan yana boşluğu */
    footer .gap-4 {
        gap: 12px !important;
        margin-top: 0 !important;
    }

    /* 4. GENEL YAZILAR */
    footer .text-sm {
        font-size: 13px !important;
        line-height: 1.6 !important;
        opacity: 0.9;
    }

    /* 5. "Muhammed ÖRS" YAZISI (EKLENDİ) */
    footer .premium-link {
        font-size: 15px !important; /* Diğer yazılarla aynı boya geldi */
        font-weight: 700 !important; /* Hala kalın ve dikkat çekici */
    }

    /* Satır araları */
    footer .space-y-1 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 4px !important;
    }
}
/* --- MOBİL İÇİN ÖZEL DÜZELTMELER (FORM BOŞLUKLARI ARTIRILDI) --- */
@media (max-width: 768px) {

    /* 1. BAŞLIK DÜZELTMESİ (BÜYÜK KALDI) */
    .pt-44 h1.text-6xl, 
    .pt-32 h1.text-6xl,
    .pt-44 h1.text-3xl,
    .pt-32 h1.text-3xl { 
        font-size: 40px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }
    
    .pt-44 p, .pt-32 p {
        font-size: 14px !important;
        padding: 0 10px !important;
    }

    /* 2. FORM ALANI DÜZELTMESİ (FERAHLATILDI) */
    #contactForm.space-y-10, 
    #contactForm.space-y-8,
    #contactForm.space-y-4 {
        margin-top: 0 !important;
    }
    
    /* SATIRLAR ARASI BOŞLUK (ARTIRILDI) */
    /* 12px yerine 20px yaptık, kutular birbirinden ayrıldı */
    #contactForm > :not([hidden]) ~ :not([hidden]) {
        margin-top: 20px !important; 
    }

    /* GRİD İÇİ BOŞLUK (Ad-Tel / Email-Konu arası) */
    #contactForm .grid {
        gap: 20px !important; /* Eskiden 12px idi, şimdi 20px */
    }

    #contactForm input, #contactForm textarea {
        padding-top: 10px !important; /* İç boşluk hafif arttı */
        padding-bottom: 10px !important;
        font-size: 14px !important;
    }
    #contactForm label {
        font-size: 12px !important;
        top: 10px !important;
    }
    
    /* GÖNDER BUTONU (KİBAR KALDI) */
    #submitBtn {
        padding-top: 10px !important; /* Tıklama alanı rahatlatıldı */
        padding-bottom: 10px !important;
        font-size: 14px !important;
        margin-top: 24px !important; /* Buton formdan biraz daha uzaklaşsın */
    }
    #submitBtn i {
        font-size: 14px !important;
    }

    /* 3. İLETİŞİM KARTLARI (2x2 Grid) */
    .grid-cols-1.lg\:grid-cols-2 .grid.grid-cols-1.md\:grid-cols-2 {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important; /* Kartlar arası boşluk da hafif arttı */
        align-content: start !important;
    }

    .grid-cols-1.lg\:grid-cols-2 .p-5 {
        padding: 10px !important;
        min-height: 100px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    .grid-cols-1.lg\:grid-cols-2 .w-12 {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 6px !important;
    }
    .grid-cols-1.lg\:grid-cols-2 .w-12 i {
        font-size: 14px !important;
    }

    .grid-cols-1.lg\:grid-cols-2 h4 {
        font-size: 12px !important;
        margin-bottom: 2px !important;
    }

    .grid-cols-1.lg\:grid-cols-2 p {
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    /* 4. HARİTA */
    .h-\[450px\] {
        height: 250px !important;
    }
    
    /* 5. GENEL KENAR BOŞLUKLARI */
    section.max-w-7xl {
        padding-left: 15px !important;
        padding-right: 15px !important;
        padding-bottom: 30px !important;
    }
    
    .gap-16 {
        gap: 30px !important; /* Form ile Kartlar arası mesafe */
    }
}

/* --- HİZMETLER VE TIMELINE MOBİL DÜZELTMELERİ (FİNAL: DENGELİ KARTLAR) --- */
@media (max-width: 768px) {

    /* --- 1. BAŞLIK DÜZELTMESİ --- */
    .pt-48 h1.text-6xl {
        font-size: 32px !important;
        white-space: nowrap !important;
        margin-bottom: 10px !important;
    }

    /* --- 2. HİZMET KARTLARI (YÜKSEKLİK KISALTILDI) --- */
    .service-card {
        height: auto !important;
        margin-bottom: 25px !important;
    }

    .service-card > div {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
    }

    /* Resim Alanı: 240px'den 215px'e düşürüldü (İdeal denge) */
    .service-card .w-full.md\:w-1\/2.h-full {
        height: 215px !important; 
        width: 100% !important;
        flex-shrink: 0 !important;
    }

    /* İçerik Alanı: Padding 30px'den 20px'e çekildi (Daha kompakt) */
    .service-card .p-12 {
        padding: 20px !important;
    }
    
    /* İKONLAR: Tam Yuvarlak */
    .service-card .glass-icon {
        width: 50px !important;
        height: 50px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    /* Kart Numaraları */
    .card-number-overlay {
        font-size: 50px !important;
        top: 10px !important;
        left: 10px !important;
        right: auto !important;
    }
    .service-card:nth-child(even) .card-number-overlay {
        left: auto !important;
        right: 10px !important;
    }

    /* --- 3. TEKLİF AL BUTONU --- */
    .btn-fill:active {
        transform: scale(0.92) !important;
        box-shadow: inset 0 0 15px rgba(0,0,0,0.8) !important;
        transition: transform 0.1s ease !important;
    }

    /* --- 4. PROJE YOL HARİTASI (TIMELINE) --- */
    .timeline-container .grid { position: relative !important; gap: 0 !important; }
    
    .timeline-container .grid::before {
        content: ''; position: absolute; top: 20px; bottom: 50px; left: 50%; width: 2px;
        background: linear-gradient(to bottom, #f59e0b 0%, rgba(255,255,255,0.1) 100%);
        transform: translateX(-50%); z-index: 0;
    }

    .timeline-step {
        background: transparent !important; border: none !important; box-shadow: none !important;
        padding: 0 0 40px 0 !important; margin: 0 !important;
    }
    
    .timeline-step h4, .timeline-step p {
        background: transparent !important; border: none !important; box-shadow: none !important;
        text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    }

    /* --- DAİRE ANİMASYONU (60px - İNTERAKTİF) --- */
    @keyframes smoothEntry {
        0% { opacity: 0; transform: translateY(30px) scale(0.8); }
        100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    .timeline-step .w-24 {
        width: 60px !important; height: 60px !important; font-size: 20px !important;   
        line-height: 56px !important; margin: 0 auto 12px auto !important;
        opacity: 0; background-color: #0f0f0f !important; z-index: 10 !important; position: relative !important;
        border: 2px solid rgba(255, 255, 255, 0.15) !important; 
        color: rgba(255, 255, 255, 0.4) !important; box-shadow: none !important;
        transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    }

    /* ACTIVE / HOVER DURUMU */
    .timeline-step:active .w-24 {
        border-color: #f59e0b !important; color: #f59e0b !important;
        transform: scale(1.2) !important; box-shadow: 0 0 20px rgba(245, 158, 11, 0.5) !important;
        background-color: #1a1a1a !important;
    }

    .timeline-step .absolute.w-3 {
        width: 8px !important; height: 8px !important; bottom: -15px !important;
        background-color: #f59e0b !important; opacity: 0 !important;
        transition: opacity 0.2s ease !important;
    }
    .timeline-step:active .absolute.w-3 { opacity: 1 !important; }

    /* Animasyon Tetikleyiciler */
    .timeline-container.active .timeline-step .w-24 { animation: smoothEntry 0.6s ease-out forwards !important; }
    .timeline-container.active .timeline-step:nth-child(1) .w-24 { animation-delay: 0.1s !important; }
    .timeline-container.active .timeline-step:nth-child(2) .w-24 { animation-delay: 0.2s !important; }
    .timeline-container.active .timeline-step:nth-child(3) .w-24 { animation-delay: 0.3s !important; }
    .timeline-container.active .timeline-step:nth-child(4) .w-24 { animation-delay: 0.4s !important; }
}
/* --- PROJELER SAYFASI MOBİL DÜZELTMELERİ (FİNAL: ALT ALTA DİZİLİM) --- */
@media (max-width: 768px) {

    /* --- 1. KATEGORİ BUTONLARI (DEĞİŞMEDİ) --- */
    #filter-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
        padding: 0 5px !important;
        background: transparent !important;
        border: none !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    #active-pill { display: none !important; }

    .filter-btn {
        width: 100% !important;
        border-radius: 9999px !important;
        background-color: rgba(255,255,255,0.05) !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        padding: 14px 0 !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        color: #999 !important;
        transition: all 0.3s ease !important;
    }

    .filter-btn.text-black {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        border-color: #f59e0b !important;
        color: black !important;
        font-weight: 800 !important;
        box-shadow: 0 5px 20px rgba(245, 158, 11, 0.3) !important;
        transform: translateY(-2px) !important;
    }

    @keyframes shakeMobile {
        0%, 100% { transform: translateX(0); }
        20% { transform: translateX(-6px) rotate(-2deg); }
        40% { transform: translateX(6px) rotate(2deg); }
        60% { transform: translateX(-3px); }
        80% { transform: translateX(3px); }
    }

    .shake-btn {
        animation: shakeMobile 0.4s ease-in-out !important;
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
        color: black !important;
        border-color: #f59e0b !important;
    }

    /* --- 2. UYARI MESAJI (TOAST) --- */
    #toast-notification {
        width: auto !important;
        max-width: 90% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 80px !important;
        white-space: nowrap !important;
        font-size: 15px !important;
        padding: 14px 28px !important;
        background-color: rgba(20, 20, 20, 0.95) !important;
        backdrop-filter: blur(12px) !important;
        border: 1px solid rgba(245, 158, 11, 0.4) !important;
        border-radius: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;
        z-index: 10000 !important;
    }
    #toast-notification i { font-size: 18px !important; }

    /* --- 3. PROJE KARTLARI (ALT ALTA - TEK SÜTUN) --- */
    
    /* Grid yapısını TEK SÜTUN yapıyoruz */
    #project-grid {
        grid-template-columns: 1fr !important; /* Alt alta dizilim */
        gap: 30px !important;
    }

    .project-item {
        height: 400px !important; /* Alt alta olunca boyutu biraz kıstım, çok uzun olmasın */
        margin-bottom: 0 !important;
        border-radius: 24px !important;
        width: 100% !important;
    }

    /* --- 4. ETKİLEŞİM VE BUTON KONUMU --- */
    .project-item:active .absolute.inset-0.bg-gradient-to-t {
        opacity: 0.95 !important;
        background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.6) 100%) !important;
    }

    .project-item:active a,
    .project-item:active .absolute.bottom-0 {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    /* --- 5. PROJEYİ İNCELE BUTONU (SOLA YASLI) --- */
    .project-item a {
        width: auto !important;
        display: inline-flex !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        background-color: #f59e0b !important;
        color: black !important;
        border-radius: 12px !important;
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.4) !important;
        transition: transform 0.1s ease, box-shadow 0.1s ease !important;
        position: relative !important;
        margin-top: 10px !important;
    }

    .project-item a:active {
        transform: scale(0.92) !important;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.6) !important;
        background-color: #d97706 !important;
    }
}

/* --- PROJE DETAY SAYFASI MOBİL DÜZELTMELERİ --- */
@media (max-width: 768px) {

    /* 1. BUTONLARI YAN YANA DİZME */
    /* Butonları kapsayan alanı buluyoruz (.mt-28 sınıfından yakaladık) */
    .content-layer .mt-28 {
        flex-direction: row !important; /* Alt alta değil, yan yana olsun */
        gap: 10px !important; /* Aralarındaki boşluk */
        align-items: stretch !important; /* Yükseklikleri eşitlensin */
        padding: 0 5px !important; /* Ekran kenarına yapışmasın */
        margin-top: 50px !important; /* Üst boşluğu mobilde biraz azaltalım (mt-28 çok fazla) */
    }

    /* Butonların Kendisi */
    .content-layer .mt-28 a {
        width: auto !important;
        flex: 1 !important; /* Mevcut alanı yarı yarıya paylaşsınlar */
        padding: 12px 4px !important; /* Yan boşlukları kıstık ki sığsın */
        font-size: 11px !important; /* Yazı boyutu küçüldü (Taşmayı önlemek için) */
        white-space: nowrap !important; /* Asla alt satıra inme */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important; /* İkon ile yazı arası mesafe */
        border-radius: 50px !important; /* Tam yuvarlak köşeler */
    }
    
    /* Buton içindeki İkonlar */
    .content-layer .mt-28 a i {
        font-size: 11px !important; /* İkonlar da yazıya uyumlu olsun */
    }

    /* 2. BASINCA İÇE GÖÇME EFEKTİ (HAPTIC TOUCH) */
    .content-layer .mt-28 a:active {
        transform: scale(0.94) !important; /* %6 Küçülme */
        box-shadow: inset 0 3px 10px rgba(0,0,0,0.5) !important; /* İç gölge (Göçme hissi) */
        transition: transform 0.05s ease !important; /* Çok hızlı tepki */
        background-color: #d97706 !important; /* Basınca renk hafif koyulaşsın */
    }
}
/* --- HAKKIMIZDA SAYFASI MOBİL DÜZELTMELERİ (FİNAL: NAV HİZASI DÜZELDİ) --- */
@media (max-width: 768px) {

    /* 1. BAŞLIK VE KONUM (NAVBARA UYARLANDI) */
    .pt-52 {
        /* Üstten 160px boşluk (Diğer sayfalarla eşitlendi) */
        padding-top: 160px !important; 
        padding-bottom: 40px !important; 
    }

    /* Başlık Stili */
    .pt-52 h1.text-6xl {
        font-size: 42px !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
        margin-bottom: 15px !important;
    }
    
    .pt-52 p {
        font-size: 14px !important;
        padding: 0 10px !important;
    }

    /* 2. SAYAÇLAR (YAN YANA) */
    .pt-52 .flex.flex-wrap {
        flex-wrap: nowrap !important;
        gap: 5px !important;
        justify-content: space-around !important;
        margin-bottom: 20px !important;
    }
    .pt-52 .text-center.group { flex: 1 !important; }
    .pt-52 .text-4xl { font-size: 28px !important; }
    .pt-52 .text-sm {
        font-size: 9px !important;
        letter-spacing: 0.5px !important;
        white-space: nowrap !important;
    }

    /* 3. VİZYON & MİSYON (FERAH) */
    
    /* İki bölüm arasındaki boşluk */
    .space-y-32 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 60px !important; 
    }
    
    /* Resim ile Yazı Kartı arasındaki boşluk */
    .flex.flex-col.lg\:flex-row,
    .flex.flex-col.lg\:flex-row-reverse {
        gap: 20px !important;
    }

    /* Kartın İç Boşluğu */
    .vision-card {
        padding: 30px 25px !important;
        border-radius: 16px !important;
        transform: none !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    }

    /* Yazı Stilleri */
    .vision-card .text-3xl {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }
    .vision-card p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }
    
    .vertical-line { display: none !important; }

    /* Resim Yüksekliği */
    .w-full.lg\:w-1\/2 .relative.h-\[500px\] {
        height: 240px !important; 
    }

    /* 4. DİĞER RESİMLER */
    .owner-img-container img {
        height: 300px !important;
        object-position: top center !important;
    }

    /* 5. DEĞERLER (2x2 GRID) */
    .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }

    .holo-card {
        padding: 15px !important;
        min-height: 130px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    .holo-icon-box {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 10px !important;
        font-size: 18px !important;
    }

    .holo-card h3 {
        font-size: 13px !important;
        margin-bottom: 4px !important;
        color: #fff !important;
    }

    .holo-card p {
        font-size: 10px !important;
        line-height: 1.3 !important;
        opacity: 0.7 !important;
    }

    .holo-card:hover {
        transform: none !important;
    }
}
/* --- ANA SAYFA VE GENEL BOŞLUK DÜZELTMELERİ (FİNAL: İSTATİSTİKLER ORTALANDI) --- */
@media (max-width: 768px) {

    /* --- 1. HERO BÖLÜMÜ --- */
    
    /* Hero Alanı */
    .relative.h-screen {
        height: auto !important;
        min-height: 100vh !important;
        padding-top: 110px !important;
        padding-bottom: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
    }

    /* Mühendisliğin Geleceği Yazısı */
    .relative.z-10 .inline-block {
        margin-bottom: 15px !important;
    }

    /* Ana Başlık */
    .relative.z-10 h1 {
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }

    /* Butonları Yan Yana Diz ve Ortalama */
    .relative.z-10 .flex.flex-col.md\:flex-row {
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 10px !important;
        margin-bottom: 0 !important; 
    }

    /* Butonların Kendisi */
    .relative.z-10 .flex.flex-col.md\:flex-row a {
        width: auto !important;
        flex: 1 !important;
        padding: 14px 5px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 50px !important;
    }
    
    .relative.z-10 .flex.flex-col.md\:flex-row a i { margin-left: 5px !important; }

    /* --- 2. KAYDIR YAZISI --- */
    
    @keyframes mobileBounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    .animate-bounce-slow {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important; 
        animation: mobileBounce 2s infinite ease-in-out !important;
        
        width: 100% !important;
        margin-top: 40px !important;
        opacity: 0.8 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* --- 3. KURUMSAL İSTATİSTİKLER (150+ PROJE / 10+ YIL) - ORTALAMA --- */
    /* İstatistiklerin olduğu div'i yakalıyoruz */
    .flex.gap-10.pt-4.border-t {
        justify-content: center !important; /* Yan yana ortala */
        gap: 40px !important; /* Aralarını biraz aç */
        width: 100% !important;
        text-align: center !important;
    }
    
    /* İçindeki yazı kutuları */
    .flex.gap-10.pt-4.border-t div {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* --- 4. GENEL BOŞLUKLARI KISALTMA --- */
    .py-32, .py-24, .py-20 {
        padding-top: 50px !important;    
        padding-bottom: 50px !important;
    }
    
    .mb-16 { margin-bottom: 30px !important; }
    .mb-12 { margin-bottom: 25px !important; }
    .mt-16 { margin-top: 30px !important; }
    
    .gap-16 { gap: 30px !important; }
    .gap-12 { gap: 20px !important; }

    /* --- 5. DİĞER AYARLAR --- */
    .animate-marquee { animation-duration: 15s !important; }
    .border-y.border-white\/10.py-4 { padding: 10px 0 !important; }
    .animate-marquee span { font-size: 16px !important; }

    /* "Daha Fazlası" Butonu */
    .pt-6 { display: flex !important; justify-content: center !important; width: 100% !important; }

    /* --- 6. GLOBAL BUTON EFEKTİ --- */
    a.rounded-full:active, a.rounded-xl:active, a.nav-btn:active, button:active, .btn-fill:active {
        transform: scale(0.94) !important;
        box-shadow: inset 0 3px 8px rgba(0,0,0,0.5) !important;
        transition: transform 0.05s ease !important;
        background-color: #d97706 !important;
        border-color: transparent !important;
    }
    a.bg-transparent:active { background-color: rgba(245, 158, 11, 0.2) !important; }
}
/* --- SİSTEM TIKLAMA GÖLGESİNİ KALDIRMA (KESİN ÇÖZÜM) --- */

/* 1. O gri tıklama lekesini (Highlight) yok et */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* Android/iOS garanti */
}

/* 2. Odaklanma çizgilerini (Mavi çerçeve) kaldır */
*:focus {
    outline: none !important;
    box-shadow: none !important; /* Varsa ekstra gölgeyi de siler */
}

/* 3. Form elemanlarını temizle */
input, textarea, button, select, a {
    -webkit-tap-highlight-color: transparent !important;
}
/* --- MOBİL MENÜ BUTONU TIKLAMA DÜZELTMESİ (SON) --- */

#mobile-menu-trigger,
#mobile-menu-trigger:focus,
#mobile-menu-trigger:active,
#mobile-menu-trigger:focus-visible {
    /* Tıklayınca çıkan mavi/siyah çerçeveyi siler */
    outline: none !important;
    border: none !important;
    
    /* Tıklayınca arka planın kare şeklinde boyanmasını engeller */
    background-color: transparent !important;
    box-shadow: none !important;
    
    /* Telefondaki gri lekeyi siler */
    -webkit-tap-highlight-color: transparent !important;
}

/* Eğer butonun içindeki İKONUN (çizgilerin) rengi değişsin istersen */
/* (İstemiyorsan burayı silebilirsin) */
#mobile-menu-trigger:active i {
    color: var(--primary) !important; /* Sadece içindeki ikon renk değiştirir */
}
/* --- TİMELINE FİNAL (YAVAŞ GEÇİŞ + SEÇİM STİLİ) --- */
@media (max-width: 768px) {

    /* --- NORMAL HAL (Bekleme Modu) --- */
    .timeline-step .w-24 {
        /* HIZ AYARI: 0.8s yaptık (Yavaş ve akıcı) */
        transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
        
        width: 60px !important; 
        height: 60px !important;
        line-height: 56px !important;
        background-color: #0f0f0f !important;
        border: 2px solid rgba(255, 255, 255, 0.1) !important;
        color: rgba(255, 255, 255, 0.4) !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.5) !important;
        transform: scale(1); /* Varsayılan boyut */
    }

    /* --- AKTİF HAL (Seçilince) --- */
    .timeline-step.is-active .w-24 {
        transform: scale(1.15) !important; /* Hafif büyüme */
        border-color: #f59e0b !important;
        color: #fff !important; 
        background-color: rgba(245, 158, 11, 0.2) !important;
        
        /* Parlama */
        box-shadow: 
            0 0 25px rgba(245, 158, 11, 0.5),
            inset 0 0 15px rgba(245, 158, 11, 0.2) !important;
    }
    
    /* Altındaki Nokta */
    .timeline-step .absolute.w-3 {
        transition: opacity 0.6s ease !important; /* Nokta da yavaş gelsin */
        opacity: 0 !important;
    }
    .timeline-step.is-active .absolute.w-3 { opacity: 1 !important; }
}
/* --- MASAÜSTÜ MENÜ GÜNCELLEMESİ (SONA EKLENECEK) --- */

/* Linklerin temel ayarı */
.nav-menu a {
    position: relative; /* Çizgi buna göre hizalanacak */
    padding-bottom: 5px; /* Çizgi ile yazı arası boşluk */
    transition: color 0.3s ease;
}

/* 1. AKTİF SAYFA RENGİ (Sadece o anki sayfa sarı yanar) */
.nav-menu a.active {
    color: #f59e0b !important; /* Amber rengi */
}

/* 2. HOVER ANİMASYONU (Ortadan Çıkan Çizgi) */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%; /* Ortadan başla */
    transform: translateX(-50%); /* Tam merkezle */
    width: 0; /* Başlangıçta görünmez */
    height: 2px;
    background-color: #f59e0b; /* Çizgi rengi */
    transition: width 0.3s ease-in-out; /* Yumuşak açılma efekti */
}

/* Mouse ile üzerine gelince çizgi genişlesin */
.nav-menu a:hover::after {
    width: 100%;
}

/* Mouse ile üzerine gelince yazı rengi de sarı olsun */
.nav-menu a:hover {
    color: #f59e0b;
}

/* ********************************************************************************************** */




/* --- İLETİŞİM SAYFASI MOBİL REVİZE (V2 - GÜNCEL) --- */
@media (max-width: 768px) {

    /* 1. BAŞLIK AYARI (ORTA YOL) */
    /* 30px küçük geldi, 36px'e çıkardık */
    .pt-52 h1.tech-font {
        font-size: 36px !important; 
        line-height: 1.2 !important;
        margin-bottom: 5px !important;
    }
    
    .pt-52 p {
        font-size: 13px !important;
        padding: 0 15px !important;
    }
    
    .pt-52 {
        padding-top: 140px !important; 
        padding-bottom: 20px !important;
    }

    /* 2. KART YAZILARI (KİBARLAŞTIRMA) */
    /* 15px büyük geldi, 13px'e geri çektik */
    .grid-cols-1.md\:grid-cols-2 .p-5 p,
    .grid-cols-1.md\:grid-cols-2 .p-5 a,
    .grid-cols-1.md\:grid-cols-2 .p-5 div {
        font-size: 13px !important; 
        line-height: 1.6 !important;
    }
    
    /* Kart Başlıkları (Adres, Telefon...) sabit kalsın, iyi duruyor */
    .grid-cols-1.md\:grid-cols-2 h4 {
        font-size: 16px !important;
    }

    /* 3. HARİTA (BİRAZ UZATILDI) */
    /* 250px kısa geldi, 320px yaptık */
    .w-full.h-\[400px\] {
        height: 320px !important; 
        border-radius: 16px !important;
    }

    /* 4. BUTON DONMA ÇÖZÜMÜ (AYNEN KORUNDU) */
    .animate-shake-input {
        transition: none !important;
        will-change: transform;
    }
    button:active {
        box-shadow: none !important; 
        transform: scale(0.98) !important;
    }
}




/* --- HİZMETLER SAYFASI MOBİL REVİZE --- */
@media (max-width: 768px) {

    /* 1. BAŞLIK AYARI (TEK SATIR & ORTALAMA) */
    .pt-52 h1.tech-font {
        font-size: 28px !important; /* Tek satıra sığması için ideal boyut */
        white-space: nowrap !important; /* Asla alt satıra inme */
        line-height: 1.2 !important;
        margin-bottom: 10px !important;
    }
    
    .pt-52 p {
        font-size: 14px !important;
        padding: 0 15px !important;
    }

    /* 2. TIMELINE (YOL HARİTASI) - MASAÜSTÜ GİBİ AMA DİKEY */
    
    /* Konteyner Ayarı */
    .timeline-container .grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important; /* Boşluğu biz ayarlayacağız */
        position: relative !important;
    }

    /* DİKEY GRİ ÇİZGİ (SABİT) */
    .timeline-container .grid::before {
        content: '';
        position: absolute;
        top: 20px; bottom: 50px; left: 50%;
        width: 2px;
        background: #e5e7eb; /* Gri çizgi */
        transform: translateX(-50%);
        z-index: 0;
    }

    /* DİKEY TURUNCU ÇİZGİ (DOLAN KISIM) */
    .timeline-container .grid::after {
        content: '';
        position: absolute;
        top: 20px; left: 50%;
        width: 2px;
        background: #f59e0b; /* Turuncu */
        transform: translateX(-50%);
        z-index: 1;
        height: 0; /* Başlangıçta boş */
        transition: height 4s ease-out; /* 4 saniyede dolacak */
        box-shadow: 0 0 15px rgba(245, 158, 11, 0.6);
    }
    
    /* Animasyon Tetiklenince Dolması İçin */
    .timeline-container.active .grid::after {
        height: 85%; /* Sonuna kadar dolsun */
    }

    /* ADIM KARTLARI (Şeffaf ve Temiz) */
    .timeline-step {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 50px 0 !important; /* Altlarına boşluk */
        margin: 0 !important;
        z-index: 10; /* Çizginin üstünde dursun */
        opacity: 0; /* Başlangıçta gizli */
        transform: translateY(30px);
    }

    /* DAİRELER (Beyaz ve Şık) */
    .timeline-step .w-24 {
        width: 80px !important; 
        height: 80px !important;
        font-size: 24px !important;
        background-color: #ffffff !important; /* İçi kesinlikle beyaz */
        border: 2px solid #e5e7eb !important;
        color: #9ca3af !important; /* Gri yazı */
        margin: 0 auto 15px auto !important; /* Ortala */
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: relative !important;
        z-index: 20;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important;
        transition: all 0.5s ease !important;
    }

    /* Daireler Aktif Olunca (Animasyon Sırasında) */
    .timeline-container.active .timeline-step .w-24 {
        border-color: #f59e0b !important;
        color: #f59e0b !important;
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.3) !important;
        transform: scale(1.1);
    }

    /* Başlık ve Açıklama Metinleri */
    .timeline-step h4 {
        box-shadow: none !important;
        text-shadow: none !important;
        backdrop-filter: none !important;
        border-radius: 4px !important;
        padding: 2px 8px !important;
        
        /* Yazının çizgi üzerinde temiz durması için */
        position: relative !important; 
        z-index: 20 !important;
    }

    .timeline-step p {
        background: transparent !important;
        text-shadow: none !important;
        color: #6b7280 !important; /* Gri tonunu sabitledik */
        margin-top: 5px !important;
    }

    /* 2. MENÜ AÇILINCA BUTON KAYBOLSUN */
    /* Menünün katmanını (Z-Index) en tepeye taşıyoruz */
    #mobile-menu-overlay {
        z-index: 10005 !important; /* Scroll butonu 9999'du, bunu geçtik */
    }
}

/* --- PROJELER SAYFASI MOBİL REVİZE (FİNAL V2) --- */
@media (max-width: 768px) {

    /* 1. KATEGORİ BUTONLARI (2x2 ve TAM PİL GÖRÜNÜMÜ) */
    #filter-container {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Sütun */
        gap: 12px !important;
        
        /* Kapsayıcı süslerini temizle */
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
    }

    #active-pill { display: none !important; }

    .filter-btn {
        width: 100% !important;
        border-radius: 9999px !important; /* TAM YUVARLAK (PİL) */
        background-color: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        color: #6b7280 !important;
        padding: 12px 0 !important;
        font-size: 13px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Aktif Buton */
    .filter-btn.text-white {
        background-color: #f59e0b !important; /* Turuncu zemin */
        border-color: #f59e0b !important;
        color: #000000 !important; /* Siyah yazı (Okunurluk için en iyisi) */
        font-weight: 800 !important;
        box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3) !important;
        transform: translateY(-2px) !important;
    }

    /* 2. BİLGİLENDİRİCİ MESAJ (DARK MOD & BEYAZ YAZI) */
    #toast-notification {
        background-color: #ffffff !important; /* Koyu arka plan */
        color: rgba(20, 20, 20, 0.95) !important; /* BEYAZ YAZI */
        border: 1px solid rgba(245, 158, 11, 0.3) !important; /* İnce turuncu çerçeve */
        backdrop-filter: blur(10px) !important; /* Arkası bulanık */
        box-shadow: 0 10px 30px rgba(0,0,0,0.6) !important;

        /* Genişlik ve konum ayarı */
        width: auto !important;
        min-width: 200px !important;
        white-space: nowrap !important;
        padding: 12px 24px !important;
        border-radius: 50px !important;
    }

    #toast-notification i {
        color: #f59e0b !important; /* İkon turuncu kalsın */
    }

    /* 3. KASMA ÇÖZÜMÜ (Kartlar) */
    .project-item:active, 
    .project-item:focus {
        box-shadow: none !important;
        border-color: #e5e7eb !important;
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }
    /* 4. BOŞ DURUM İKONU DÜZELTMESİ (DAİRE FORMUNU KORU) */
    /* Flexbox'ın şekli bozmasını engelliyoruz */
    #empty-state .w-24 {
        width: 90px !important;       /* Genişlik sabit */
        height: 90px !important;      /* Yükseklik sabit (Kare olması şart) */
        min-width: 90px !important;   /* Asla daralma */
        min-height: 90px !important;  /* Asla basılma */
        
        border-radius: 50% !important; /* Tam daire */
        flex-shrink: 0 !important;     /* Flex yapısı seni sıkıştıramasın */
        
        /* İçerik ortalama garantisi */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 24px auto !important; /* Sayfada ortala ve alt boşluk ver */
    }

    /* İkonun kendisini de ortalayalım */
    #empty-state i {
        font-size: 40px !important; /* İkon boyutu daireye tam otursun */
        line-height: 1 !important;
    }
    /* 1. ÖZEL ANIMASYON TANIMI */
    /* Butonun -2px yukarıdaki halini koruyarak sallar */
    @keyframes aggressiveShake {
        0%, 100% { transform: translate(0, -2px); }
        20% { transform: translate(-6px, -2px) rotate(-3deg); }
        40% { transform: translate(6px, -2px) rotate(3deg); }
        60% { transform: translate(-3px, -2px); }
        80% { transform: translate(3px, -2px); }
    }

    /* 2. SHAKE CLASS (DAHA YÜKSEK ÖNCELİK) */
    /* .filter-btn.shake-btn diyerek hedefi tam 12'den vuruyoruz */
    .filter-btn.shake-btn {
        /* animation ile transform'u zorla tetikliyoruz */
        animation: aggressiveShake 0.4s cubic-bezier(.36,.07,.19,.97) both !important;
        
        /* Renk değişimi (Hata olduğu anlaşılsın diye koyu turuncu) */
        background: #d97706 !important; 
        border-color: #d97706 !important;
        color: #fff !important;
        
        /* Telefonda takılmayı önler */
        will-change: transform;
        backface-visibility: hidden;
    }
}



/* --- HAKKIMIZDA SAYFASI MOBİL REVİZE (FİNAL V2 - DÜZELTİLDİ) --- */
@media (max-width: 768px) {

    /* 1. HERO İLE PROFIL ARASINDAKİ BOŞLUK */
    .pt-52 {
        padding-bottom: 60px !important; /* 20px idi, artırıp arayı açtık */
    }

    /* 2. PROFİL FOTOĞRAFI AYARLARI */
    .owner-img-wrapper {
        /* Yükseklik uzatıldı (400px -> 460px) */
        height: 460px !important; 
        border-radius: 1.5rem !important;
        margin-top: 10px !important; /* Üsten hafif pay */
    }

    /* 3. BAŞLIK AYARI (TEK SATIR) */
    /* "Mühendislik Tutkusuyla" yazısını yakalıyoruz */
    .w-full.lg\:w-7\/12 h2 {
        font-size: 24px !important; /* Tek satıra sığması için boyut */
        white-space: nowrap !important; /* Asla alt satıra inme */
        line-height: 1.3 !important;
    }
    /* "Geleceği İnşa Ediyoruz" alt satırda kalsın */
    .w-full.lg\:w-7\/12 h2 span {
        font-size: 24px !important;
        white-space: normal !important; /* Bu alt satıra inebilir */
    }

    /* 4. VİZYON & MİSYON (DÜZENLEMELER) */
    .vision-card, .mission-card {
        padding: 20px !important;
        text-align: left !important;
    }
    
    .vision-card p, .mission-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    /* Misyon Kartı ile Başlık Arasına Mesafe */
    .mission-card {
        margin-top: 25px !important; /* Yapışıklığı giderdik */
    }

    .flex.flex-col.lg\:flex-row-reverse .mission-card {
        margin-top: 25px !important; /* Garanti olsun diye buraya da ekledik */
    }
    
    /* Bölümler arası genel boşluk */
    .space-y-24 {
        gap: 60px !important; 
    }

    /* 5. DEĞERLER KARTI (2x2 IZGARA) */
    .max-w-7xl .grid.grid-cols-1.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr 1fr !important; 
        gap: 12px !important;
    }

    .value-card {
        padding: 15px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        min-height: 160px !important;
    }

    .value-icon-box {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
        margin-bottom: 10px !important;
    }

    .value-card h3 {
        font-size: 13px !important;
        margin-bottom: 5px !important;
        white-space: nowrap !important;
    }

    .value-card p {
        font-size: 11px !important;
        line-height: 1.3 !important;
        opacity: 0.8;
    }

    /* 6. EKİP KARTLARI (DARALTILDI & KÜÇÜLTÜLDÜ) */
    .team-card-new {
        padding: 20px 10px !important;
        margin-bottom: 20px !important;
        
        /* Kartları YATAYDA DARALTMA */
        margin-left: 25px !important;  /* Soldan boşluk */
        margin-right: 25px !important; /* Sağdan boşluk */
        width: auto !important; /* Genişliği margin belirlesin */
    }

    .team-photo-circle {
        width: 110px !important;
        height: 110px !important;
        margin-bottom: 15px !important;
    }
    
    .team-photo-circle i {
        font-size: 40px !important;
    }

    .team-card-new h3 { font-size: 20px !important; }
    .team-card-new p.text-amber-600 { 
        font-size: 10px !important; 
        margin-bottom: 10px !important; 
    }
    .team-card-new p.italic {
        font-size: 13px !important;
        padding: 0 5px !important;
    }
}


/* --- ANA SAYFA FİNAL RÜTUŞLAR (MOBİL V4 - FİNAL) --- */
@media (max-width: 768px) {

    /* 1. HERO BAŞLIK (BÜYÜK & TEK SATIR) */
    .relative.z-10 h1 {
        font-size: 38px !important; 
        line-height: 1.2 !important;
        width: 100% !important;
        display: block !important;
        letter-spacing: -0.5px !important; 
    }

    #typewriter { display: inline-block !important; }

    /* 2. HERO BUTONLARI (DAHA AŞAĞI ÇEKİLDİ) */
    /* 30px yetmedi, 50px yaptık */
    .relative.z-10 .flex.flex-col.md\:flex-row {
        margin-top: 50px !important; 
    }

    /* 3. "TÜMÜNÜ GÖR" BUTONLARI (STANDART BOY) */
    .mt-16 a.group {
        padding: 12px 32px !important; 
        width: auto !important;
        font-size: 14px !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
    }
    
    .mt-16 a.group i { font-size: 14px !important; }

    /* 4. HİZMET KARTLARI İKON KORUMASI */
    .service-card .w-14 {
        width: 56px !important;
        height: 56px !important;
        min-width: 56px !important;
        min-height: 56px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
    }

    /* 5. VİZYON BÖLÜMÜ BOŞLUK AYARI */
    section.py-32.border-t {
        margin-top: 60px !important;
        padding-top: 60px !important;
        padding-bottom: 40px !important;
    }

    .flex.flex-col.lg\:flex-row.items-center.gap-16 {
        gap: 30px !important;
    }
    @media (max-width: 768px) {
    /* ...diğer mobil kodların burada kalabilir... */

    /* KAYAN YAZI HIZ AYARI (YAVAŞLATILDI) */
    .animate-marquee {
        /* Eski değer: 15s (Çok Hızlıydı) */
        /* Yeni değer: 40s (İdeal Okuma Hızı) */
        animation-duration: 40s !important; 
    }
}
}