/* --- TEMEL AYARLAR & FONT --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* --- TIKLAMA VURGUSUNU & MAVİ KUTUYU KALDIRMA --- */
* {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none;
    outline: none;
}

*:focus {
    outline: none !important;
}

:root {
    --primary: #1a1a1a;
    --white: #ffffff;
    --grid-color: #e5e5e5;
}

/* --- MİMARİ ARKA PLAN --- */
body {
    font-family: 'Manrope', sans-serif;
    color: var(--primary);
    background-color: var(--white);
    background-image: radial-gradient(var(--grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow-x: hidden;
    cursor: auto;
}

@media (min-width: 768px) {
    body {
        cursor: none;
        /* PC'de imleci gizle */
    }
}

/* --- CUSTOM CURSOR --- */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    transform: translate(-50%, -50%);
    visibility: hidden;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.5s;
}

body.hovering .cursor-outline {
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.5);
    mix-blend-mode: difference;
}

/* --- SCROLLBAR & SELECTION --- */
::-webkit-scrollbar {
    width: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #000;
}

::selection {
    background: #000;
    color: #fff;
}

h1,
h2,
h3,
h4,
.serif {
    font-family: 'Playfair Display', serif;
}

/* --- PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}

.loader-content {
    text-align: center;
    animation: fadeOut 1s ease-in-out forwards;
    animation-delay: 1.5s;
}

.line-loader {
    width: 0;
    height: 2px;
    background: #000;
    margin: 10px auto;
    animation: loadLine 1.5s ease-in-out forwards;
}

@keyframes loadLine {
    0% {
        width: 0;
    }

    100% {
        width: 100px;
    }
}

/* --- NAVBAR --- */
nav {
    transition: all 0.4s ease;
}

.nav-transparent {
    background: transparent;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-transparent .nav-link,
.nav-transparent .logo-text {
    color: white;
}

.nav-solid {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    color: black;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

.nav-solid .nav-link {
    color: #555;
}

.nav-solid .nav-link:hover {
    color: #000;
}

.nav-solid .logo-text {
    color: black;
}

.nav-link {
    position: relative;
    padding-bottom: 5px;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    transition: color 0.3s;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: currentColor;
    transition: width 0.3s ease;
}

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

.nav-link.active {
    color: #000 !important;
    opacity: 1;
}

.nav-link.active::after {
    width: 100%;
}

.nav-transparent .nav-link.active {
    color: #fff !important;
}

/* --- TEXT REVEAL --- */
.reveal-wrap {
    overflow: hidden;
    position: relative;
    display: block;
}

.reveal-text {
    display: block;
    transform: translateY(100%);
    opacity: 0;
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- HERO & GENERAL --- */
.hero-overlay {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    animation: bounce 2s infinite;
    cursor: pointer;
    color: white;
    font-size: 2rem;
    z-index: 20;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0) translateX(-50%);
    }

    40% {
        transform: translateY(-10px) translateX(-50%);
    }

    60% {
        transform: translateY(-5px) translateX(-50%);
    }
}

.img-hover-zoom {
    overflow: hidden;
    border-radius: 0;
}

.img-hover-zoom img {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.group:hover .img-hover-zoom img {
    transform: scale(1.05);
}

/* MOBILE MENU */
#mobile-menu {
    transition: transform 0.4s ease;
    transform: translateX(100%);
}

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

/* --- FOOTER (GÜNCELLENMİŞ: DAHA KISA & BÜYÜK İKONLAR) --- */
.footer-compact {
    background-color: #ffffff;
    border-top: 1px solid #e5e5e5;
    padding: 20px 0;
    /* Yükseklik kısıldı */
    text-align: center;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 8px;
}

.social-icon-circle {
    width: 45px;
    height: 45px;
    /* Büyütüldü */
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 1.4rem;
    /* İkon boyutu arttı */
    transition: all 0.3s ease;
    background: #fff;
}

.social-icon-circle:hover {
    border-color: #000;
    background-color: #000;
    color: #fff;
    transform: translateY(-3px) scale(1.0);
}

.social-icon-circle .fa-phone-alt {
    transform: scaleX(-1);
}

.copyright-text {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 2px;
    font-weight: 500;
}

.developer-text {
    font-size: 0.9rem;
    color: #333;
}

.developer-text span {
    font-weight: 700;
    color: #000;
}

/* SCROLL TOP BTN */
#scrollTopBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    background-color: #333;
    transform: translateY(-5px);
}

/* --- CONTACT PAGE ANIMATIONS --- */
.group:hover .icon-jump {
    animation: jump 0.6s infinite alternate ease-in-out;
}

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

    100% {
        transform: translateY(-8px);
    }
}

.group:hover .icon-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0) rotate(-1deg);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0) rotate(2deg);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-3px, 0, 0) rotate(-3deg);
    }

    40%,
    60% {
        transform: translate3d(3px, 0, 0) rotate(3deg);
    }
}

.group:hover .icon-fly {
    animation: slideFly 0.6s ease-in-out forwards;
}

@keyframes slideFly {
    0% {
        transform: translate(0, 0);
    }

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

    100% {
        transform: translate(0, 0);
    }
}

.group:hover .icon-spin {
    animation: spinClock 2s linear infinite;
}

@keyframes spinClock {
    100% {
        transform: rotate(360deg);
    }
}

.plane-fly {
    animation: planeFlyAway 1.5s ease-in-out forwards;
}

@keyframes planeFlyAway {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }

    20% {
        transform: translate(-10px, 10px) scale(0.8);
    }

    100% {
        transform: translate(100px, -100px) scale(0.5);
        opacity: 0;
    }
}

/* --- YENİ: HARİTA İKON HAREKETİ --- */
.group:hover .fa-location-arrow {
    animation: locationPoint 0.8s infinite alternate ease-in-out;
}

@keyframes locationPoint {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(3px, -3px);
    }
}

/* --- FORM VALIDATION STYLES --- */
.input-success {
    border-color: #16a34a !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0 center;
    background-size: 1.5em 1.5em;
}

.input-error {
    border-color: #dc2626 !important;
}

/* --- YENİ: INPUT HATALI GİRİŞ TİTREMESİ --- */
.input-shake {
    animation: quickShake 0.3s ease-in-out;
    border-bottom-color: #dc2626 !important;
}

@keyframes quickShake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

/* --- PROJELER FİLTRELEME BUTONLARI --- */
.filter-btn {
    padding: 10px 24px;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    background: white;
    color: #555;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.filter-btn:hover {
    border-color: black;
    color: black;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: black;
    color: white;
    border-color: black;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* --- FİLTRE BUTONLARI & MAGNET --- */
.filter-btn {
    padding: 12px 28px;
    border: 1px solid #f0f0f0;
    border-radius: 50px;
    background: white;
    color: #666;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s, border 0.3s, box-shadow 0.3s;
    /* Transform GSAP tarafından yönetiliyor */
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

.filter-btn:hover {
    border-color: black;
    color: black;
}

.filter-btn.active {
    background: black;
    color: white;
    border-color: black;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* --- PREMIUM GLASSMORPHISM BUTTON --- */
/* Detayları Gör Butonu için çok özel bir buzlu cam efekti */
.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    /* Çok şeffaf beyaz */
    backdrop-filter: blur(12px);
    /* Güçlü bulanıklık */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* İnce parlak kenar */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    /* Derinlik gölgesi */
    transition: all 0.4s ease;
}

.group:hover .glass-btn {
    background: rgba(255, 255, 255, 0.25);
    /* Üzerine gelince biraz daha belirginleşsin */
    transform: scale(1.1);
    /* Hafif büyüsün */
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.3);
}

/* --- YAVAŞLATILMIŞ VE NEFES ALAN FİLTRE BUTONLARI --- */
.filter-btn {
    padding: 12px 30px;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    background: white;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    /* Hover animasyonunu yavaşlatan sihirli kod: */
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.filter-btn:hover {
    border-color: black;
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.filter-btn.active {
    background: black;
    color: white;
    border-color: black;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    /* Aktif buton canlıymış gibi nefes alsın */
    animation: softPulse 3s infinite ease-in-out;
}

@keyframes softPulse {
    0% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    }

    100% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
}

/* --- YAVAŞ GEÇİŞLİ CAM BUTON (GLASS) --- */
.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    /* Burası da yavaşlatıldı */
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.group:hover .glass-btn {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.15);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.3);
}

/* --- TOAST NOTIFICATION (BİLGİ KUTUSU) --- */
#toast-notification {
    /* Backdrop blur ile modern görünüm */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.85);
    /* Tam siyah değil, hafif transparan */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- FİLTRE BUTONLARI (YUMUŞAK GEÇİŞLİ) --- */
.filter-btn {
    padding: 12px 30px;
    border: 1px solid #e5e5e5;
    border-radius: 50px;
    background: white;
    color: #666;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    position: relative;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.filter-btn:hover {
    border-color: black;
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.filter-btn.active {
    background: black;
    color: white;
    border-color: black;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
    animation: softPulse 3s infinite ease-in-out;
}

@keyframes softPulse {
    0% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }

    50% {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
    }

    100% {
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
}

/* --- GLASS BUTTON (AYNI KALDI) --- */
.glass-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.group:hover .glass-btn {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.15);
    box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.3);
}
/* --- YENİ TEKNİK KÜNYE TASARIMI --- */

/* Künye Kartı - Glassmorphism + Teknik Çizgiler */
.spec-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.05);
    position: sticky;
    top: 8rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}

.spec-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #000, transparent);
}

.spec-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 60px -15px rgba(0,0,0,0.1);
}

/* İkon Kutusu */
.tech-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 12px; /* Tam yuvarlak yerine modern yumuşak kare */
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #1a1a1a;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
    overflow: hidden;
}

/* Hover Efekti: İkonun arkası doluyor */
.tech-icon-box::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #000;
    bottom: -100%;
    left: 0;
    transition: bottom 0.4s ease;
    z-index: -1;
    border-radius: 12px;
}

.spec-row:hover .tech-icon-box {
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.spec-row:hover .tech-icon-box::after {
    bottom: 0;
}

/* İkonun kendisi hafifçe döner */
.spec-row:hover .tech-icon-box i {
    animation: gearSpin 1s ease infinite alternate;
}

@keyframes gearSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(45deg); }
}

/* Başlık ve Yazı Stilleri */
.spec-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #888;
    font-weight: 700;
    margin-bottom: 2px;
}

.spec-value {
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000;
    position: relative;
    display: inline-block;
}

/* Altı çizili hover efekti */
.spec-value::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: #f97316; /* Turuncu */
    transition: width 0.4s ease;
}

.spec-row:hover .spec-value::before {
    width: 100%;
}
/* --- YENİ BAŞLIK ANİMASYONU İÇİN --- */
.title-char {
    display: inline-block;
    transform-origin: bottom center;
    will-change: transform, opacity, filter;
}
/* =========================================
   2. INTERACTIVE ACCORDION GALLERY (YAVAŞLATILMIŞ VERSİYON)
   ========================================= */
.accordion-container {
    display: flex;
    width: 100%;
    height: 600px;
    gap: 15px; /* Boşluk biraz arttı */
    overflow: hidden;
    padding: 0 10px; /* Kenarlardan taşmasın diye */
}

.accordion-item {
    position: relative;
    flex: 1;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    /* HIZ AYARI BURADA: 1.5s yaptık (eskisi 0.8s idi) */
    transition: flex 1.5s cubic-bezier(0.25, 1, 0.5, 1); 
}

.accordion-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Görsel de yavaşça büyüsün */
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), filter 1.5s ease;
    filter: grayscale(100%);
    transform: scale(1);
}

/* Hover Durumu */
.accordion-item:hover {
    flex: 3; /* Genişleme oranı */
}

.accordion-item:hover img {
    transform: scale(1.15); /* Zoom miktarı */
    filter: grayscale(0%);
}

/* Diğerleri (Hoverlanmayanlar) */
.accordion-container:hover .accordion-item:not(:hover) {
    filter: brightness(0.5);
}

/* Yazı Stili - Bu da yavaşlatıldı */
.acc-label {
    position: absolute;
    bottom: 30px;
    left: 30px;
    color: white;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    z-index: 10;
    opacity: 0;
    transform: translateY(30px);
    /* Yazının gelişi de ağırlaştırıldı */
    transition: all 0.8s ease-out; 
    white-space: nowrap;
    text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

.accordion-item:hover .acc-label {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s; /* Kart açıldıktan sonra sakince gelsin */
}

/* Mobil Ayarlar */
@media (max-width: 768px) {
    .accordion-container {
        flex-direction: column;
        height: 800px;
    }
    .acc-label {
        opacity: 1;
        transform: translateY(0);
        font-size: 1rem;
        bottom: 20px;
        left: 20px;
    }
    .accordion-item img {
        filter: grayscale(0%);
    }
}
/* --- TEMEL AYARLAR & FONT --- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

:root {
    --primary: #1a1a1a;
    --white: #ffffff;
    --grid-color: #e5e5e5;
}

/* --- MİMARİ ARKA PLAN --- */
body {
    font-family: 'Manrope', sans-serif;
    color: var(--primary);
    background-color: var(--white);
    background-image: radial-gradient(var(--grid-color) 1px, transparent 1px);
    background-size: 40px 40px;
    overflow-x: hidden;
    cursor: auto;
}

@media (min-width: 768px) {
    body { cursor: none; }
}

/* --- CUSTOM CURSOR --- */
.cursor-dot {
    width: 8px;
    height: 8px;
    background-color: #000;
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transform: translate(-50%, -50%);
    visibility: hidden;
}

.cursor-outline {
    width: 40px;
    height: 40px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    transform: translate(-50%, -50%);
    visibility: hidden;
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
        background-color 0.5s;
}

body.hovering .cursor-outline {
    width: 70px;
    height: 70px;
    background-color: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.5);
    mix-blend-mode: difference;
}

/* --- SCROLLBAR & SELECTION --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f9f9f9; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #000; }
::selection { background: #000; color: #fff; }

h1, h2, h3, h4, .serif { font-family: 'Playfair Display', serif; }

/* --- PRELOADER --- */
#preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #fff; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s;
}
.loader-content { text-align: center; animation: fadeOut 1s ease-in-out forwards; animation-delay: 1.5s; }
.line-loader { width: 0; height: 2px; background: #000; margin: 10px auto; animation: loadLine 1.5s ease-in-out forwards; }
@keyframes loadLine { 0% { width: 0; } 100% { width: 100px; } }

/* --- NAVBAR --- */
nav { transition: all 0.4s ease; }
.nav-transparent { background: transparent; color: white; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.nav-transparent .nav-link, .nav-transparent .logo-text { color: white; }
.nav-solid {
    background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px);
    color: black; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
    padding-top: 15px !important; padding-bottom: 15px !important;
}
.nav-solid .nav-link { color: #555; }
.nav-solid .nav-link:hover { color: #000; }
.nav-solid .logo-text { color: black; }
.nav-link {
    position: relative; padding-bottom: 5px; font-size: 0.85rem;
    letter-spacing: 0.1em; font-weight: 600; text-transform: uppercase; transition: color 0.3s;
}
.nav-link::after {
    content: ''; position: absolute; width: 0; height: 1px;
    bottom: 0; left: 0; background-color: currentColor; transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }
.nav-link.active { color: #000 !important; opacity: 1; }
.nav-link.active::after { width: 100%; }
.nav-transparent .nav-link.active { color: #fff !important; }

/* --- TEXT REVEAL --- */
.reveal-wrap { overflow: hidden; position: relative; display: block; }
.reveal-text { display: block; transform: translateY(100%); opacity: 0; transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }

/* --- HERO & GENERAL --- */
.hero-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5)); }
.scroll-down {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    animation: bounce 2s infinite; cursor: pointer; color: white; font-size: 2rem; z-index: 20;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-10px) translateX(-50%); }
    60% { transform: translateY(-5px) translateX(-50%); }
}
.img-hover-zoom { overflow: hidden; border-radius: 0; }
.img-hover-zoom img { transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.group:hover .img-hover-zoom img { transform: scale(1.05); }

/* MOBILE MENU */
#mobile-menu { transition: transform 0.4s ease; transform: translateX(100%); }
#mobile-menu.active { transform: translateX(0); }

/* --- FOOTER --- */
.footer-compact {
    background-color: #ffffff; border-top: 1px solid #e5e5e5;
    padding: 20px 0; text-align: center; margin-top: 0; position: relative; z-index: 10;
}
.social-icons-row { display: flex; justify-content: center; gap: 25px; margin-bottom: 8px; }
.social-icon-circle {
    width: 45px; height: 45px; border: 1px solid #e5e5e5; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #333; font-size: 1.4rem;
    transition: all 0.3s ease; background: #fff;
}
.social-icon-circle:hover {
    border-color: #000; background-color: #000; color: #fff; transform: translateY(-3px) scale(1.0);
}
.social-icon-circle .fa-phone-alt { transform: scaleX(-1); }
.copyright-text { color: #666; font-size: 0.9rem; margin-bottom: 2px; font-weight: 500; }
.developer-text { font-size: 0.9rem; color: #333; }
.developer-text span { font-weight: 700; color: #000; }

/* SCROLL TOP BTN */
#scrollTopBtn {
    position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px;
    background-color: #000; color: #fff; border: none; border-radius: 50%;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; z-index: 100; opacity: 0; visibility: hidden;
    transform: translateY(20px); transition: all 0.4s ease;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}
#scrollTopBtn.show { opacity: 1; visibility: visible; transform: translateY(0); }
#scrollTopBtn:hover { background-color: #333; transform: translateY(-5px); }

/* --- CONTACT PAGE ANIMATIONS --- */
.group:hover .icon-jump { animation: jump 0.6s infinite alternate ease-in-out; }
@keyframes jump { 0% { transform: translateY(0); } 100% { transform: translateY(-8px); } }

.group:hover .icon-shake { animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); }
    20%, 80% { transform: translate3d(2px, 0, 0) rotate(2deg); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0) rotate(-3deg); }
    40%, 60% { transform: translate3d(3px, 0, 0) rotate(3deg); }
}

.group:hover .icon-fly { animation: slideFly 0.6s ease-in-out forwards; }
@keyframes slideFly {
    0% { transform: translate(0, 0); }
    50% { transform: translate(5px, -5px); }
    100% { transform: translate(0, 0); }
}

.group:hover .icon-spin { animation: spinClock 2s linear infinite; }
@keyframes spinClock { 100% { transform: rotate(360deg); } }

.plane-fly { animation: planeFlyAway 1.5s ease-in-out forwards; }
@keyframes planeFlyAway {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    20% { transform: translate(-10px, 10px) scale(0.8); }
    100% { transform: translate(100px, -100px) scale(0.5); opacity: 0; }
}

.group:hover .fa-location-arrow { animation: locationPoint 0.8s infinite alternate ease-in-out; }
@keyframes locationPoint { 0% { transform: translate(0, 0); } 100% { transform: translate(3px, -3px); } }

/* --- FORM VALIDATION STYLES --- */
.input-success {
    border-color: #16a34a !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat; background-position: right 0 center; background-size: 1.5em 1.5em;
}
.input-error { border-color: #dc2626 !important; }
.input-shake { animation: quickShake 0.3s ease-in-out; border-bottom-color: #dc2626 !important; }
@keyframes quickShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* --- PROJELER FİLTRELEME --- */
.filter-btn {
    padding: 12px 30px; border: 1px solid #e5e5e5; border-radius: 50px;
    background: white; color: #666; font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; position: relative;
    overflow: hidden; transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1); cursor: pointer;
}
.filter-btn:hover {
    border-color: black; color: black; transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}
.filter-btn.active {
    background: black; color: white; border-color: black;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); transform: translateY(0);
    animation: softPulse 3s infinite ease-in-out;
}
@keyframes softPulse {
    0% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
    50% { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35); }
    100% { box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
}

/* --- GLASS BUTTON --- */
.glass-btn {
    background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.group:hover .glass-btn {
    background: rgba(255, 255, 255, 0.25); transform: scale(1.15); box-shadow: 0 15px 40px 0 rgba(0, 0, 0, 0.3);
}

/* --- ACCORDION GALLERY --- */
.accordion-container { display: flex; width: 100%; height: 600px; gap: 15px; overflow: hidden; padding: 0 10px; }
.accordion-item {
    position: relative; flex: 1; height: 100%; border-radius: 12px; overflow: hidden;
    cursor: pointer; transition: flex 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.accordion-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1), filter 1.5s ease;
    filter: grayscale(100%); transform: scale(1);
}
.accordion-item:hover { flex: 3; }
.accordion-item:hover img { transform: scale(1.15); filter: grayscale(0%); }
.accordion-container:hover .accordion-item:not(:hover) { filter: brightness(0.5); }
.acc-label {
    position: absolute; bottom: 30px; left: 30px; color: white; font-family: 'Manrope', sans-serif;
    font-weight: 700; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.1em;
    z-index: 10; opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out;
    white-space: nowrap; text-shadow: 0 4px 10px rgba(0,0,0,0.5);
}
.accordion-item:hover .acc-label { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
@media (max-width: 768px) {
    .accordion-container { flex-direction: column; height: 800px; }
    .acc-label { opacity: 1; transform: translateY(0); font-size: 1rem; bottom: 20px; left: 20px; }
    .accordion-item img { filter: grayscale(0%); }
}

/* ======================================================
   GÜNCELLENMİŞ SÜREÇ (PROCESS) STİLLERİ - DAHA KÜÇÜK & SADE
   ====================================================== */

/* 1. Mobil ve Masaüstü Çizgi Mantığı */
.process-wrapper { position: relative; padding: 20px 0; }

/* Yatay Çizgi (Masaüstü) */
.line-horizontal-bg {
    position: absolute;
    top: 45px; /* Yükseklik 90px olduğu için tam ortası 45px */
    left: 0; width: 100%; height: 2px;
    background-image: linear-gradient(to right, #e5e5e5 50%, transparent 50%);
    background-size: 20px 100%; z-index: 0;
}

.line-horizontal-fill {
    position: absolute;
    top: 45px; /* Hiza düzeltildi */
    left: 0; height: 2px; width: 0;
    background-image: linear-gradient(to right, #f97316 50%, transparent 50%);
    background-size: 20px 100%; z-index: 1;
    animation: dashMove 2s linear infinite; /* Akan efekt YAVAŞLATILDI (1s -> 2s) */
}

/* Dikey Çizgi (Mobil) */
.line-vertical-bg {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 2px; height: 100%;
    background-image: linear-gradient(to bottom, #e5e5e5 50%, transparent 50%);
    background-size: 100% 20px; z-index: 0;
}

.line-vertical-fill {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 2px; height: 0;
    background-image: linear-gradient(to bottom, #f97316 50%, transparent 50%);
    background-size: 100% 20px; z-index: 1;
    animation: dashMoveVertical 2s linear infinite; /* Akan efekt YAVAŞLATILDI */
}

@keyframes dashMove {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
}
@keyframes dashMoveVertical {
    0% { background-position: 0 0; }
    100% { background-position: 0 40px; }
}

/* 2. Adım Kutuları - KÜÇÜLTÜLMÜŞ BOYUTLAR */
.process-step {
    position: relative; z-index: 10; background: transparent;
}

.process-icon-wrapper {
    width: 90px; height: 90px; /* 120px -> 90px'e düşürüldü */
    margin: 0 auto 1.2rem auto; position: relative;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 50%; border: 1px solid #f3f4f6;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.process-icon-inner {
    position: relative; z-index: 1;
    font-size: 1.5rem; /* İkon boyutu küçültüldü */
    color: #9ca3af; transition: all 0.4s ease;
}

/* Hover Efektleri */
.process-step:hover .process-icon-wrapper {
    transform: translateY(-8px);
    border-color: #f97316;
    box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15);
}

.process-step:hover .process-icon-inner {
    color: #f97316; transform: scale(1.15);
}

/* Başlık ve Açıklama - KÜÇÜLTÜLMÜŞ */
.process-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem; /* Başlık biraz küçüldü */
    font-weight: 600; margin-bottom: 0.4rem; color: #111;
}

.process-desc {
    font-size: 0.85rem; /* Yazı küçüldü */
    color: #666; line-height: 1.6; padding: 0 5px;
}
/* ======================================================
   YAVAŞLATILMIŞ KESİK ÇİZGİ (SLOW DASHED LINE)
   ====================================================== */

.process-wrapper {
    position: relative;
    padding: 20px 0;
}

/* --- YATAY ÇİZGİLER (MASAÜSTÜ) --- */
.line-horizontal-bg {
    position: absolute;
    top: 45px;
    left: 0;
    width: 100%;
    height: 4px;
    /* Gri Kesik Çizgi */
    background-image: linear-gradient(to right, #e5e5e5 60%, transparent 40%);
    background-size: 20px 100%;
    background-repeat: repeat-x;
    z-index: 0;
    border-radius: 4px;
}

.line-horizontal-fill {
    position: absolute;
    top: 45px;
    left: 0;
    height: 4px;
    width: 0%; /* JS ile dolacak */
    
    /* Turuncu Kesik Çizgi */
    background-image: linear-gradient(to right, #f97316 60%, transparent 40%);
    background-size: 20px 100%;
    background-repeat: repeat-x;
    
    z-index: 1;
    border-radius: 4px;
    
    /* HIZ AYARI BURADA: 1.5s yaptık (Çok daha yavaş) */
    transition: width 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}

/* --- DİKEY ÇİZGİLER (MOBİL) --- */
.line-vertical-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 100%;
    background-image: linear-gradient(to bottom, #e5e5e5 60%, transparent 40%);
    background-size: 100% 20px;
    background-repeat: repeat-y;
    z-index: 0;
    border-radius: 4px;
}

.line-vertical-fill {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 0%;
    background-image: linear-gradient(to bottom, #f97316 60%, transparent 40%);
    background-size: 100% 20px;
    background-repeat: repeat-y;
    z-index: 1;
    border-radius: 4px;
    
    /* HIZ AYARI: 1.5s */
    transition: height 1.5s cubic-bezier(0.25, 1, 0.5, 1);
    
    filter: drop-shadow(0 0 4px rgba(249, 115, 22, 0.4));
}

/* --- ADIM KUTULARI --- */
.process-step {
    position: relative;
    z-index: 10;
    background: transparent;
    cursor: pointer;
}

.process-icon-wrapper {
    width: 90px;
    height: 90px;
    margin: 0 auto 1.2rem auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    border: 2px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.process-icon-inner {
    position: relative;
    z-index: 1;
    font-size: 1.5rem;
    color: #9ca3af;
    transition: all 0.4s ease;
}

/* --- AKTİF DURUM --- */
.process-step.process-active .process-icon-wrapper {
    border-color: #f97316;
    background-color: #fff;
    transform: scale(1.1);
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
}

.process-step.process-active .process-icon-inner {
    color: #f97316;
}

.process-step.process-active .process-title {
    color: #f97316;
}

.process-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #111;
    transition: color 0.3s;
}

.process-desc {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    padding: 0 5px;
}
/* --- BUTTON OK ANİMASYONU --- */
@keyframes arrowPulse {
    0% { transform: translateX(0); }
    50% { transform: translateX(6px); } /* Sağa git */
    100% { transform: translateX(0); } /* Geri gel */
}

/* Butona (submit-btn) hover olunca içindeki ikon (btn-icon) hareket etsin */
#submit-btn:hover .btn-icon {
    animation: arrowPulse 1s infinite ease-in-out;
}
/* --- AUTOFILL (OTOMATİK DOLDURMA) RENGİNİ DÜZELTME --- */
/* Tarayıcının atadığı sarı/mavi arka planı şeffaf/beyaz yapma hilesi */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
textarea:-webkit-autofill {
    -webkit-text-fill-color: #000; /* Yazı rengi siyah kalsın */
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset; /* Arka planı beyazla doldur */
    transition: background-color 5000s ease-in-out 0s; /* Arka plan değişimini sonsuza kadar geciktir */
}
/* --- style.css EN ALTINA EKLE/DEĞİŞTİR --- */

/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 999999; /* Z-index artırıldı */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    /* Geçişi CSS yerine JS ile yöneteceğiz, buradaki transition'ı kaldırabilirsin veya bırakabilirsin */
}

/* LOGO */
.loader-logo {
    width: 130px; 
    height: 130px;
    object-fit: contain;
    border-radius: 50%; 
    background: #fff; 
    padding: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    margin-bottom: 25px;
}

/* SENARYO 1: SAYAÇ */
.loader-count {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums;
}

/* SENARYO 1: DOLUM ÇUBUĞU */
.loader-progress-wrap {
    width: 200px;
    height: 2px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.loader-progress-bar {
    width: 0%;
    height: 100%;
    background: #000; 
    position: absolute;
    top: 0;
    left: 0;
}

/* SENARYO 2: GEZEN ÇUBUK */
.loader-track {
    width: 150px;
    height: 4px;
    background-color: #f3f4f6;
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
}

.loader-bar-ping {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background-color: #f97316; 
    border-radius: 10px;
    animation: pingPongSlow 1.5s infinite ease-in-out;
}

@keyframes pingPongSlow {
    0% { left: 0; width: 40px; }
    50% { left: calc(100% - 40px); width: 60px; } 
    100% { left: 0; width: 40px; }
}
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* --- PRELOADER --- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff; /* En alttaki background #fff olmalı, en son attığın kodda #ffffff yapmışsın, doğru */
    z-index: 999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    /* AŞAĞIDAKİ SATIRI TAMAMEN SİL */
    /* transition: opacity 0.5s ease, visibility 0.5s; */ 
}

/* LOGO */
.loader-logo {
    width: 130px; 
    height: 130px;
    object-fit: contain;
    border-radius: 50%; 
    background: #fff; 
    padding: 10px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    margin-bottom: 25px;
}

/* SENARYO 1: SAYAÇ (Anasayfa İçin) */
.loader-count {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #000;
    margin-bottom: 10px;
    font-variant-numeric: tabular-nums; /* Rakamlar oynama yapmasın diye */
}

/* SENARYO 1: DOLUM ÇUBUĞU (Anasayfa İçin) */
.loader-progress-wrap {
    width: 200px;
    height: 2px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.loader-progress-bar {
    width: 0%;
    height: 100%;
    background: #000; 
    position: absolute;
    top: 0;
    left: 0;
}

/* SENARYO 2: GEZEN ÇUBUK (Diğer Sayfalar İçin) */
.loader-track {
    width: 150px;
    height: 4px;
    background-color: #f3f4f6;
    border-radius: 10px;
    margin-top: 20px;
    overflow: hidden;
    position: relative;
}

.loader-bar-ping {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 100%;
    background-color: #f97316; /* Turuncu renk */
    border-radius: 10px;
    animation: pingPongSlow 1.8s infinite ease-in-out;
}

@keyframes pingPongSlow {
    0% { left: 0; width: 40px; }
    50% { left: calc(100% - 40px); width: 60px; } /* Ortada uzasın */
    100% { left: 0; width: 40px; }
}
/* --- TİK İŞARETİ ANİMASYONU (BOUNCY POP) --- */
.input-success {
    border-color: #16a34a !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3e%3cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    /* Animasyon Tanımlaması */
    animation: successPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; 
}

@keyframes successPop {
    0% {
        background-size: 0; /* Başlangıçta görünmez */
    }
    60% {
        background-size: 1.8em 1.8em; /* Biraz fazla büyür (elastik etki) */
    }
    100% {
        background-size: 1.5em 1.5em; /* Normal boyuta döner */
    }
}
/* =========================================
   CONTACT PAGE ICON ANIMATIONS (SMOOTH RETURN)
   ========================================= */

/* 1. SÜZÜLEREK GERİ DÖNÜŞ (SİHİRLİ KISIM) */
/* Fare çekilince ikonlar aniden durmaz, elastik bir şekilde yerine oturur */
.icon-jump,
.icon-shake,
.icon-fly,
.icon-spin,
.fa-location-arrow {
    /* Dönüş Animasyonu: 0.6sn süren elastik yaylanma */
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: inline-block;
    transform-origin: center;
    will-change: transform; /* Performans için */
}

/* 2. ZIPLAYAN İKON (KONUM) */
.group:hover .icon-jump {
    animation: jump 0.8s infinite alternate ease-in-out;
}
@keyframes jump {
    0% { transform: translateY(0); }
    100% { transform: translateY(-8px); }
}

/* 3. TİTREYEN İKON (TELEFON) */
.group:hover .icon-shake {
    animation: shake 0.6s cubic-bezier(.36, .07, .19, .97) both;
}
@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0) rotate(-1deg); }
    20%, 80% { transform: translate3d(2px, 0, 0) rotate(2deg); }
    30%, 50%, 70% { transform: translate3d(-3px, 0, 0) rotate(-3deg); }
    40%, 60% { transform: translate3d(3px, 0, 0) rotate(3deg); }
}

/* 4. UÇAN İKON (MAIL) */
.group:hover .icon-fly {
    animation: slideFly 0.8s ease-in-out forwards;
}
@keyframes slideFly {
    0% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(4px, -4px) scale(1.1); } /* Hafif büyüyerek uçar */
    100% { transform: translate(0, 0) scale(1); }
}

/* 5. DÖNEN İKON (SAAT) */
.group:hover .icon-spin {
    animation: spinClock 3s linear infinite;
}
@keyframes spinClock {
    100% { transform: rotate(360deg); }
}

/* 6. HARİTA OKU (YOL TARİFİ) */
.group:hover .fa-location-arrow {
    animation: locationPoint 1s infinite alternate ease-in-out;
}
@keyframes locationPoint {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(5px, -5px) rotate(-10deg); }
}
/* =======================================================
   YENİ FOOTER (DAHA BÜYÜK İKONLAR & İDEAL BOŞLUK)
   ======================================================= */

/* 1. Kapsayıcı: Siyah & İnce */
.footer-compact {
    background-color: #0f0f0f !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 25px 0 !important; /* İkonlar büyüdüğü için dikey boşluk çok az arttı */
    text-align: center;
    position: relative;
    z-index: 10;
}

/* 2. İkon Satırı: Geniş Boşluklu */
.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 20px; /* İkonlar arası boşluk arttırıldı (Ferah görünüm) */
    margin-bottom: 25px !important; /* Yazı ile ikonlar arası mesafe */
}

/* 3. İkon Kutuları: BÜYÜTÜLDÜ */
.social-icon-circle {
    width: 40px !important;  /* 38px -> 46px */
    height: 40px !important;
    font-size: 1.25rem !important; /* İkonun kendisi de büyüdü */
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ccc !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* İKON HOVER: BEYAZ NEON PARLAMA */
.social-icon-circle:hover {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #fff !important;
    transform: translateY(-4px); /* Biraz daha yukarı zıplasın */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6) !important;
}

/* 4. Telif Yazısı */
.copyright-text {
    color: #e5e5e5 !important;
    font-size: 0.95rem !important;
    font-weight: 400;
    margin: 0 0 4px 0 !important;
    line-height: 1.4;
}

/* 5. Geliştirici Alanı */
.developer-text {
    color: #9ca3af !important;
    font-size: 0.85rem !important;
    margin: 0 !important;
    line-height: 1.4;
}

.developer-text a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* İSİM HOVER: TURUNCU NEON PARLAMA */
.developer-text a:hover {
    color: #f97316 !important;
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.8);
}
/* --- DAHA ŞEFFAF (GLASS) NAVBAR --- */
/* Bunu dosyanın en altına yapıştır */
.nav-solid {
    /* Şeffaflık %65'e indirildi (Daha cam gibi) */
    background: rgba(255, 255, 255, 0.50) !important;
    
    /* Blur efekti artırıldı (Yazılar karışmasın diye) */
    backdrop-filter: blur(25px) !important;
    -webkit-backdrop-filter: blur(25px) !important;
    
    /* Sınır çizgisi daha da silikleştirildi */
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    
    /* Diğer ayarlar sabit */
    color: black !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}
/* --- MOBİL MENÜ DÜZELTMELERİ (SON HALİ) --- */

/* 1. Web Sürümünde (PC) Hamburger Menüyü Kesinlikle Gizle */
@media (min-width: 768px) {
    #btn-mobile-open {
        display: none !important;
    }
}

/* 2. Hamburger Butonu (Her zaman Siyah ve Görünür) */
#btn-mobile-open {
    color: #000 !important; /* İkon simsiyah */
    background-color: rgba(255, 255, 255, 0.9) !important; /* Arkası beyaz */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.2s ease;
    z-index: 60; /* Menünün üstünde kalmasın ama navbar içinde olsun */
}

#btn-mobile-open:active {
    transform: scale(0.90);
}

/* 3. Aktif Sayfa Linki (Altı Çizili & Turuncu) */
#mobile-menu a.active {
    color: #f97316 !important;
    font-weight: 700;
}

/* 4. Menü Font Boyutu Ayarı (Ekran Görüntüsündeki Gibi) */
#mobile-menu a {
    font-size: 1.5rem !important; /* text-2xl karşılığı */
    line-height: 2rem;
}
/* --- MOBİL MENÜ DÜZELTMELERİ (FINAL) --- */

/* 1. Z-INDEX AYARI (ÇARPIYI KURTARMA) */
/* Menü perdesi 9990'da ise, buton onun üstünde olmalı */
#btn-mobile-open {
    z-index: 10000 !important; /* Menünün üzerine çıkardık */
}

/* 2. MENU LINKLERİ (ANİMASYON DÜZELTME) */
#mobile-menu a {
    display: block;
    opacity: 0; /* Başlangıçta görünmez, JS açacak */
    transform: translateY(20px); /* Hafif aşağıda beklesin */
    
    /* KRİTİK NOKTA: CSS transition'ı kapatıyoruz ki GSAP ile kavga etmesin */
    transition: color 0.3s ease; /* Sadece renk değişimi CSS ile olsun */
    /* transform ve opacity için transition YOK! */
    
    will-change: transform, opacity; /* Tarayıcıya "bunlar değişecek, hazır ol" dedik */
}

/* Link aktif olduğundaki parlama efekti */
#mobile-menu a.active {
    color: #f97316 !important;
    font-weight: 800;
}
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* 1. MENÜ PERDESİNİN HIZI (YAVAŞLATILDI) */
#mobile-menu {
    /* 0.4s yerine 0.8s yaptık. Cubic-bezier ile "lüks" bir kayma hissi verdik */
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) !important;
    transform: translateX(100%);
    will-change: transform; /* Performans artırır */
}

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

/* 2. AKTİF LİNK PARLAMA EFEKTİ (GLOW) */
#mobile-menu a.active {
    color: #f97316 !important; /* Turuncu */
    font-weight: 800;
    
    /* İŞTE SİHİRLİ DOKUNUŞ: Glow Efekti */
    /* İlk değer hafif bir hale, ikinci değer daha geniş ama silik bir ışık */
    text-shadow: 
        0 0 15px rgba(249, 115, 22, 0.4), 
        0 0 30px rgba(249, 115, 22, 0.2);
        
    transition: all 0.5s ease; /* Işık yavaşça yansın */
}
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* MOBİL FOOTER İÇİN "ALTIN ORAN" AYARI */
@media (max-width: 768px) {

    /* 1. Kutu Boşluğu: 15px'den 22px'e çıkardık (Biraz ferahladı) */
    .footer-compact {
        padding: 22px 0 !important; 
    }

    /* 2. İkon-Yazı Arası: 10px'den 18px'e çıkardık */
    .social-icons-row {
        margin-bottom: 18px !important; 
        gap: 20px !important; /* İkonlar birbirine çok yapışmasın */
    }

    /* 3. İkon Boyutu: 36px'den 40px'e çıkardık (Tıklaması daha kolay) */
    .social-icon-circle {
        width: 40px !important; 
        height: 40px !important;
        font-size: 1.2rem !important;
    }

    /* 4. Yazılar: Okunurluğu artırdık */
    .copyright-text {
        font-size: 0.85rem !important; 
        margin-bottom: 4px !important;
    }

    .developer-text {
        font-size: 0.8rem !important;
    }
}
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* === İLETİŞİM SAYFASI MOBİL ÖZEL AYARLARI (REVİZE: İDEAL BOYUT) === */
@media (max-width: 768px) {

    /* 1. BAŞLIK POZİSYONU */
    header {
        /* 180px biraz fazlaydı, 160px'e çektik, tam kararında oldu */
        padding-top: 160px !important; 
        padding-bottom: 50px !important; 
    }

    header h1 {
        /* 3.8rem'den 3rem'e düşürdük (Ne çok büyük, ne çok küçük) */
        font-size: 3.1rem !important; 
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
    }

    header p {
        font-size: 0.8rem !important; 
        letter-spacing: 0.2em !important;
        opacity: 0.9 !important;
    }

    /* 2. FORM VE DİĞER AYARLAR (SABİT) */
    #contact-form { padding: 30px 20px !important; }
    .flex.flex-col.lg\:flex-row.gap-16 { gap: 40px !important; }
    input, textarea { font-size: 1rem !important; padding-top: 1.2rem !important; padding-bottom: 0.5rem !important; }
    #submit-btn .btn-icon { transform: none !important; transition: none !important; }
    /* 1. HARİTA MOBİLDE HEP RENKLİ OLSUN */
    iframe {
        filter: grayscale(0%) !important; /* Gri tonu kaldır */
    }

    /* 2. İKON İLE YAZI ARASINI BİRAZ DARALT (Daha çok yer kalsın) */
    .lg\:w-1\/3 .gap-6 {
        gap: 15px !important; /* 24px yerine 15px */
    }
    
    /* 3. FORMUN SAĞ ÜSTÜNDEKİ DEKORU KÜÇÜLT (Yazı rahatlasın) */
    #contact-form .absolute.top-0.right-0 {
        width: 90px !important;  /* 128px'den 60px'e */
        height: 90px !important;
        border-bottom-left-radius: 45px !important;
    }
    /* 4. MOBİLDE HARİTA BUTONU AYARLARI */
    .directions-fixed-mobile {
        /* Buton mobilde sürekli görünür olsun */
        transform: translateY(0) !important;
        opacity: 1 !important;
        
        /* Buton boyutu mobilde daha uygun olsun */
        padding: 10px 20px !important;
        font-size: 0.75rem !important; /* text-xs'ten biraz büyük */
        bottom: 15px !important; /* En alttan 15px boşluk */
        right: 15px !important; /* Sağdan 15px boşluk */
    }
}
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* === PROJELER SAYFASI MOBİL ÖZEL AYARLARI (SON HALİ) === */
@media (max-width: 768px) {

    /* 1. HEADER AYARLARI */
    header {
        padding-top: 160px !important;
        padding-bottom: 40px !important;
    }

    header h1 {
        font-size: 3rem !important;
        line-height: 1.1 !important;
        margin-bottom: 10px !important;
    }

    /* 2. ALT YAZI (Hem BÜYÜK hem TEK SATIR) */
    header p {
        white-space: nowrap !important;   /* Asla alt satıra geçme */
        font-size: 0.75rem !important;    /* 0.6rem'den 0.75rem'e çıkardık (Büyüdü) */
        letter-spacing: 0.1em !important; /* Harf aralığını biraz kıstık ki ekrana sığsın */
        width: 100% !important;
        display: block !important;
    }

    /* 3. BİLGİLENDİRME MESAJI (TOAST) - TEK SATIR */
    #toast-notification {
        width: auto !important;           /* %90 yerine içeriği kadar yer kaplasın */
        max-width: 95% !important;        /* Ekrandan taşmasın */
        white-space: nowrap !important;   /* Tek satır olsun */
        padding: 12px 25px !important;    /* İç boşluğu dengeledik */
        bottom: 30px !important;          /* Biraz daha yukarı aldık */
        border-radius: 50px !important;   /* Tam yuvarlak kenar */
        font-size: 0.85rem !important;    /* Yazı okunur olsun */
    }

    /* 4. PROJE KARTLARI (SADECE YÜKSEKLİK) */
    .project-card {
        height: 420px !important;
    }
}

/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

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

    /* 1. HERO (GİRİŞ) RESMİ DÜZELTMELERİ */
    header {
        height: 50vh !important; /* Dikeyde kısalttık (Ekranın yarısı) */
        min-height: 350px;       /* Çok küçük ekranlarda da ezilmesin */
    }

    #hero-image {
        /* Bozulmayı (Distortion) Engelleyen Kod */
        height: 100% !important;
        width: 100% !important;
        object-fit: cover !important;
        
        /* Parallax efektini mobilde sıfırlıyoruz ki resim titremesin/uzamasın */
        transform: none !important; 
        will-change: auto !important;
    }

    /* Başlık Boyutu */
    #hero-title {
        font-size: 2.8rem !important; /* Mobilde daha kibar dursun */
        line-height: 1.1 !important;
    }
    
    .hero-tag {
        font-size: 0.65rem !important;
        padding: 4px 12px !important;
    }

    /* 2. BUTONLAR (YAN YANA & YATAY) */
    /* Kapsayıcıyı yatay (row) yap */
    .py-28 .flex-col.md\:flex-row {
        flex-direction: row !important; 
        gap: 10px !important; /* Araları çok açık olmasın */
        padding-left: 10px !important; /* Kenar boşlukları güvenliği */
        padding-right: 10px !important;
    }

    /* Butonların Kendisi */
    .action-btn {
        width: auto !important;
        flex: 1 !important; /* Eşit genişlikte yayılsınlar */
        height: 48px !important; /* Mobilde parmak için ideal yükseklik */
        padding: 0 !important;
    }

    /* Buton Yazıları */
    .action-btn .btn-text {
        font-size: 0.6rem !important; /* Yazıyı sığdırmak için küçülttük */
        letter-spacing: 0.05em !important;
        white-space: nowrap !important; /* Asla alt satıra geçmesin */
    }

    /* Buton İkonları (GİZLEME) */
    /* Mobilde hover olmadığı için ikon animasyonu sorun yaratır. 
       Yazının kaybolmaması için ikonu mobilde iptal ediyoruz. */
    .action-btn .btn-icon {
        display: none !important; 
    }
    
    /* Hover efektini sıfırla ki yazı yukarı kaçmasın */
    .action-btn:hover .btn-text {
        transform: none !important; 
        opacity: 1 !important;
    }

    /* 3. İÇERİK BOŞLUKLARI */
    .spec-card {
        margin-top: -30px !important; /* Yukarıdaki resme biraz daha yaklaşsın */
        padding: 20px !important;
    }
    
    .prose p {
        font-size: 1rem !important;
    }
    
    blockquote {
        font-size: 1.1rem !important;
        margin: 20px 0 !important;
    }
    
    /* NOT: 3 Resimli Galeri kısmına (accordion) dokunmadım, orası orijinal halinde. */
    /* --- BUTONLARA DOKUNUNCA (ACTIVE) İKON GÖSTER --- */
    /* Telefondan basılı tutulduğunda yazı yukarı kaysın, ikon gelsin */
    .action-btn:active .btn-text {
        transform: translateY(-200%) !important;
        opacity: 0 !important;
    }
    
    .action-btn:active .btn-icon {
        transform: translateY(0) !important;
        opacity: 1 !important;
        transition: all 0.2s ease !important; /* Hızlı tepki versin */
    }
}
/* --- style.css EN ALTINDAKİ MOBİL BÖLÜMÜN İÇİNE EKLE --- */

    /* Butona basınca "kütük" gibi durmasın, hafifçe içeri gömülsün */
    .action-btn:active {
        transform: scale(0.96) !important; /* Hafif küçülme */
        transition: transform 0.1s ease !important;
        background-color: #f3f4f6 !important; /* Hafif renk değişimi */
    }
    
    /* Siyah buton için özel active rengi */
    .action-btn.bg-black:active {
        background-color: #333 !important;
    }
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* === HİZMETLER SAYFASI MOBİL ÖZEL AYARLARI (İZOLE EDİLDİ) === */
@media (max-width: 768px) {

    /* Sadece Hizmetler sayfasındaki başlık */
    .page-services header h1 {
        white-space: nowrap !important;
        font-size: 2.8rem !important;
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Sadece Hizmetler sayfasındaki alt yazı */
    .page-services header p {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.2em !important;
        opacity: 0.9 !important;
        line-height: 1.4 !important;
        padding: 0 5px !important;
        text-transform: uppercase !important;
        color: #4b5563 !important;
    }
    
    /* Header boşluğu da sadece buraya özel olsun */
    .page-services header {
        padding-top: 160px !important;
        padding-bottom: 40px !important;
    }
    /* --- 1. KART YÜKSEKLİĞİNİ KISALT (Daha az scroll) --- */
    .page-services .tilt-card {
        height: 420px !important; /* 480px yerine 380px */
    }
    
    /* Kartın içindeki yazı boşluğunu da biraz dengeleyelim */
    .page-services .tilt-content {
        padding: 25px !important; /* 32px yerine 25px */
    }

    /* --- 2. SÜREÇ ADIMLARI ARASINI DARALT --- */
    .page-services .process-wrapper .grid {
        gap: 30px !important; /* 48px (gap-12) yerine 30px */
    }
}

/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* === HAKKIMIZDA SAYFASI MOBİL ÖZEL AYARLARI (DÜZELTİLDİ) === */
@media (max-width: 768px) {

    /* 1. HEADER (BAŞLIK) */
    .page-about header {
        padding-top: 140px !important; 
        padding-bottom: 10px !important;
    }

    /* 2. SAYILARIN OLDUĞU KUTU */
    .page-about .w-full.bg-white.pb-28 {
        /* A. YUKARI ÇEKME İŞLEMİ */
        margin-top: -80px !important; /* Sayıları başlığa yaklaştırdık */
        padding-top: 0 !important;
        
        /* B. ALTAKİ YAZIYI UZAK TUTMA İŞLEMİ (KİLİT NOKTA BURASI) */
        padding-bottom: 70px !important; /* Altına 100px boşluk koyduk ki alttaki yazı yukarı yapışmasın */
        
        position: relative;
        z-index: 20;
    }

    /* 3. SAYILARI YAN YANA (ROW) DİZME & BÜYÜTME */
    .page-about .grid.grid-cols-1.md\:grid-cols-3 {
        display: flex !important;
        flex-direction: row !important; /* Yan yana diz */
        justify-content: space-evenly !important; /* Eşit dağıt */
        align-items: baseline !important;
        gap: 0 !important;
    }

    /* Her bir sayı kutusu */
    .page-about .grid.grid-cols-1.md\:grid-cols-3 > div {
        flex: 1 !important;
        padding: 0 !important;
    }
    
    /* RAKAM BOYUTU (BÜYÜK) */
    .page-about .text-4xl.md\:text-5xl {
        font-size: 2.4rem !important;
        line-height: 1 !important;
    }
    
    /* Semboller (+, %) */
    .page-about .text-2xl.font-serif {
        font-size: 1.6rem !important;
    }

    /* Açıklama Yazısı */
    .page-about .tracking-\[0\.3em\] {
        font-size: 0.65rem !important;
        letter-spacing: 0.05em !important;
        margin-top: 8px !important;
        white-space: nowrap !important;
        font-weight: 800 !important;
        opacity: 0.8 !important;
    }

    /* 4. GELECEĞİ İNŞA EDİYORUZ BÖLÜMÜ (SABİT KALDI) */
    .page-about section.py-20 {
        padding-top: 40px !important; /* Burası normal boşluğunda kalsın */
        padding-bottom: 40px !important;
    }

    /* Metin ile Resim Arası */
    .page-about .gap-16 {
        gap: 30px !important;
        margin-bottom: 30px !important;
    }

    /* Diğer alt bölümler */
    .page-about section.py-48 {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }

    .page-about .fa-quote-left {
        font-size: 3rem !important;
        transform: translateY(-15px) !important;
    }

    .page-about h2.serif.text-4xl {
        font-size: 1.6rem !important; 
        line-height: 1.3 !important;
        margin-bottom: 20px !important;
    }
    
    .page-about .tracking-\[0\.4em\] {
        font-size: 0.7rem !important;
        letter-spacing: 0.2em !important;
    }

    .page-about #values-section {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    /* GELECEĞİ İNŞA EDİYORUZ - RESİM YÜKSEKLİĞİ */
    .page-about .reveal-image-trigger {
        height: 420px !important; /* 500px'den 320px'e indirdik */
    }
      

    /* KARTLARI YAN YANA ALDIĞIMIZ KISIM */
    /* === DEĞERLERİMİZ BÖLÜMÜ (6 KART) - DAHA İRİ İKİLİ IZGARA === */
    .page-about #values-section .grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Yan yana 2'li */
        gap: 15px !important;
    }

    /* Kartların içi biraz daha ferah olsun */
    .page-about .spotlight-card {
        padding: 20px 15px !important; /* Dikeyde 20px, yatayda 15px boşluk */
        min-height: 160px !important; /* Kutuların boyu eşit ve biraz uzun olsun */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }

    /* İkon kutusu büyüdü */
    .page-about .spotlight-card .w-16 {
        width: 3.5rem !important; /* w-14 gibi */
        height: 3.5rem !important;
        margin-bottom: 12px !important;
    }

    /* İkonun kendisi büyüdü */
    .page-about .spotlight-card i {
        font-size: 1.4rem !important;
    }

    /* Başlık büyüdü */
    .page-about .spotlight-card h5 {
        font-size: 1rem !important; /* 0.9rem -> 1rem */
        margin-bottom: 8px !important;
        line-height: 1.2 !important;
    }

    /* Açıklama yazısı büyüdü ve okunur oldu */
    .page-about .spotlight-card p {
        font-size: 0.75rem !important; /* 0.65rem -> 0.75rem */
        line-height: 1.4 !important;
        opacity: 0.8 !important;
        display: block !important; /* Gizlenmesin */
    }
}
/* --- style.css EN ALTINA EKLE/GÜNCELLE --- */

/* === ANASAYFA MOBİL DÜZELTMELERİ (FİNAL BUTTON UPDATE) === */
@media (max-width: 768px) {

    /* HERO RESMİ (SABİT) */
    header.h-screen {
        height: 100vh !important;
        min-height: 700px !important;
    }
    .hero-bg-img {
        object-position: center center !important;
    }

    /* 1. "PROFESYONEL ÇÖZÜMLER" (YUKARIDA KALSIN) */
    header .overflow-hidden.mb-4 {
        transform: translateY(-65px) !important;
        margin-bottom: 0 !important;
    }

    /* 2. "MÜHENDİSLİKTE MÜKEMMELİYET" (BOYUT AYNI) */
    header h1.serif {
        font-size: 3.2rem !important; 
        line-height: 1.1 !important;
        margin-bottom: 0 !important;
        padding: 0 10px !important;
    }

    /* 3. BUTONLAR (DAHA AŞAĞI & YAZILAR BÜYÜDÜ) */
    header .flex-col.md\:flex-row {
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 10px !important;
        
        /* DAHA FAZLA AŞAĞI İTME */
        margin-top: 110px !important; /* 80px'den 110px'e indi */
    }

    /* Buton Tasarımı */
    header .btn-shine {
        flex: 1 !important;
        width: auto !important;
        
        /* Yükseklik ve Yazı Büyüdü */
        padding: 0 !important; 
        height: 48px !important; /* 42px'den 48px'e çıktı */
        
        font-size: 0.75rem !important; /* 0.6rem'den 0.75rem'e çıktı (Daha Okunur) */
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* 4. SEÇKİN PROJELER ÇİZGİSİ (UZUN) */
    .group:hover .h-\[2px\] {
        width: 200px !important; 
        max-width: 70% !important; 
    }
    .h-\[2px\] {
        transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
    }

    /* 5. AŞAĞI YÖNLENDİRME OKU */
    .scroll-down {
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 25px !important; /* Butonlar inince bunu da 5px daha aşağı ittik */
        width: 60px !important;
        display: flex;
        justify-content: center;
    }
    /* === 1. ANASAYFA HERO ETİKET ÇİZGİSİ (ÖZEL TASARIM) === */
    /* Mevcut boydan boya çizgiyi kaldırıyoruz */
    header .hero-stagger.border-b-2 {
        border-bottom: none !important;
        position: relative;
        padding-bottom: 10px !important; /* Yazı ile çizgi arası boşluk */
    }

    /* Yerine kenarlardan kısaltılmış yeni çizgiyi çiziyoruz */
    header .hero-stagger.border-b-2::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 15%; /* Soldan %15 boşluk bırak */
        width: 70%; /* Çizgi genişliği %70 olsun (Ortalanmış olur) */
        height: 2px;
        background-color: #f97316; /* Turuncu renk */
        border-radius: 2px; /* Kenarları yumuşat */
    }

    /* === 2. SEÇKİN PROJELER (KART YÜKSEKLİĞİ) === */
    /* Siyah arka planlı bölümdeki proje kartlarını seçer */
    .page-home section.bg-black .group.relative.h-\[500px\] {
        height: 420px !important; /* 500px'den 420px'e indi */
    }

    /* === 3. GÜVEN VE TECRÜBE (GÖRSEL YÜKSEKLİĞİ) === */
    /* En alttaki hikaye bölümünün görseli */
    .page-home .reveal-image-trigger .h-\[500px\] {
        height: 420px !important; /* Bu da 420px oldu */
    }
}