html { scroll-behavior: smooth; }
body { 
    background-color: #1a1a1a; 
    color: #f0f0f0; 
    font-family: 'Poppins', sans-serif; 
    text-align: center; 
    margin: 0; 
    padding: 0; 
    line-height: 1.6; 
}

.page-wrapper {
    transition: transform 0.4s ease;
}
body.menu-open .page-wrapper {
    transform: translateX(-280px);
}

.container { width: 90%; max-width: 1200px; margin: 0 auto; }
header { background-color: transparent; padding: 15px 0; position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; transition: background-color 0.5s ease, box-shadow 0.5s ease; }
header.header-scrolled { background-color: #111; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
header .container { display: flex; justify-content: space-between; align-items: center; }
#logo { display: flex; align-items: center; text-decoration: none; color: #f0f0f0; }
.logo-image-wrapper { position: relative; border-radius: 50%; display: flex; width: 60px; height: 60px; }
.logo-image-wrapper::after { content: ''; position: absolute; top: 50%; left: 50%; width: 120%; aspect-ratio: 1 / 1; background: conic-gradient(from 0deg, transparent 0, rgba(255, 255, 255, 0.4), transparent 40%); z-index: 1; animation: border-animation 4s linear infinite; border-radius: 50%; }
#logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 2px solid #00aeff; position: relative; z-index: 2; }
#logo span { font-size: 20px; font-weight: 600; margin-left: 15px; }
.menu-toggle { display: none; }
nav ul { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
nav ul li { margin-left: 10px; }
nav ul li a { position: relative; z-index: 1; overflow: hidden; color: #f0f0f0; text-decoration: none; background-color: transparent; border: none; transition: all 0.5s ease; font-size: 16px; padding: 11px 16px; border-radius: 5px; display: block; }
.cta-button { position: relative; z-index: 1; overflow: hidden; color: #f0f0f0; text-decoration: none; background-color: #1c1c1c; border: none; transition: all 0.5s ease; display: inline-block; padding: 16px 31px; font-size: 18px; border-radius: 5px; font-weight: 600; will-change: transform, opacity; }
.cta-button::before, nav ul li a::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/karbon.jpg'); background-size: cover; background-position: center; filter: brightness(0.4); clip-path: inset(0 100% 0 0); transition: clip-path 0.5s ease-in-out; z-index: -1; }
.cta-button::after { content: ''; position: absolute; top: 50%; left: 50%; width: 200%; aspect-ratio: 1 / 1; background: conic-gradient(from 0deg, transparent 0, rgba(255,255,255,0.5), transparent); z-index: -2; animation: border-animation 4s linear infinite; transition: opacity 0.5s ease; }
nav ul li a:hover { color: #fff; background-color: #1c1c1c; }
.cta-button:hover { color: #fff; }
.cta-button:hover::before, nav ul li a:hover::before { clip-path: inset(0 0 0 0); }
.cta-button:hover::after { opacity: 0; }
.hero { position: relative; height: 100vh; text-align: center; color: #f0f0f0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; }
.hero-bg-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('../img/anasayfa-gorseli.jpg') no-repeat center center/cover; filter: brightness(0.4) grayscale(0.7); z-index: -1; }
.hero .container { position: relative; z-index: 1; }
.hero p { font-size: 22px; font-weight: 400; margin-bottom: 40px; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); will-change: transform, opacity; }
.hero h1.shimmer-text { position: relative; font-size: 68px; font-weight: 700; margin-bottom: 20px; background: linear-gradient(to right, #fff 0%, #fff 45%, #444 50%, #fff 55%, #fff 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer-wave 8s linear infinite; will-change: transform, opacity; }
.hero h1.shimmer-text::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-text-stroke: 1.5px #fff; text-shadow: 0 0 15px rgba(255, 255, 255, 0.5); }
@keyframes shimmer-wave { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
#hizmetler { background-color: #111; padding: 80px 0; }
#hizmetler h2 { font-size: 42px; font-weight: 600; margin-bottom: 60px; text-transform: uppercase; letter-spacing: 2px; }
.hizmetler-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.hizmet-kart { background-color: #1c1c1c; padding: 40px; border-radius: 10px; border: 1px solid #333; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.hizmet-kart:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.hizmet-kart h3 { font-size: 24px; margin-top: 0; margin-bottom: 20px; color: #00aeff; }
.hizmet-kart p { font-size: 16px; color: #ccc; }
.scroll-down { position: absolute; bottom: 30px; left: 50%; width: 24px; height: 24px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateX(-50%) rotate(-45deg); animation: bounce 2s infinite; opacity: 0.7; will-change: transform, opacity; }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-45deg); } 40% { transform: translateY(-15px) rotate(-45deg); } 60% { transform: translateY(-5px) rotate(-45deg); } }
footer { background-color: #0d0d0d; padding: 40px 0; border-top: 2px solid #222; }
.social-icons { margin-bottom: 20px; }
.social-icons a { color: #888; font-size: 24px; margin: 0 15px; transition: color 0.4s ease, transform 0.4s ease; }
.social-icons a:hover { color: #00aeff; transform: translateY(-5px); }
footer p { font-size: 14px; color: #666; }
.fab-container { position: fixed; bottom: 30px; right: 30px; z-index: 999; display: flex; flex-direction: column; gap: 15px; }
.fab-link { --glow-color: #fff; position: relative; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 24px; text-decoration: none; background-color: #1c1c1c; overflow: hidden; transition: transform 0.3s ease; }
.fab-link:hover { transform: scale(1.1); }
.fab-link::before { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; z-index: 1; background-image: conic-gradient( transparent, var(--glow-color), transparent 30% ); animation: border-animation 4s linear infinite; }
.fab-link i { z-index: 2; }
.fab-link.whatsapp { --glow-color: #25D366; }
.fab-link.instagram { --glow-color: #d6249f; }
.fab-link.youtube { --glow-color: #FF0000; }
@keyframes border-animation { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
/* GEÇİŞ EFEKTİ DÜZELTMESİ */
.transition-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100vh; /* Tam ekran yüksekliği */
    background-color: #111; 
    z-index: 9999; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
.transition-overlay img { max-width: 300px; width: 80%; height: auto; }
.transition-overlay h1 { font-size: 24px; }
nav ul li a.active { color: #00aeff; }
.page-header { position: relative; padding-top: 200px; padding-bottom: 100px; text-align: center; color: #f0f0f0; min-height: 250px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.page-header h1 { font-size: 56px; margin-bottom: 10px; }
.about-story { padding: 100px 0; background: #1a1a1a; }
.about-story .container { display: flex; align-items: center; gap: 60px; text-align: left; }
.story-image { flex-basis: 40%; }
.story-image img { width: 100%; height: auto; border-radius: 10px; }
.story-text { flex-basis: 60%; }
.story-text h2 { font-size: 42px; margin-top: 0; margin-bottom: 20px; color: #00aeff; }
#degerler { background-color: #111; padding: 80px 0; }
#degerler h2 { font-size: 42px; font-weight: 600; margin-bottom: 60px; text-transform: uppercase; letter-spacing: 2px; }
.hizmet-kart i { font-size: 48px; color: #00aeff; margin-bottom: 25px; }
#hizmet-detaylari { padding: 100px 0; }
.service-section { display: flex; align-items: center; gap: 60px; margin-bottom: 100px; }
.service-section:last-child { margin-bottom: 0; }
.service-section.reverse { flex-direction: row-reverse; }
.service-image { flex-basis: 50%; }
.service-image img { width: 100%; border-radius: 10px; }
.service-text { flex-basis: 50%; text-align: left; }
.service-text h2 { font-size: 42px; margin-top: 0; margin-bottom: 20px; color: #00aeff; }
.service-text p { color: #ccc; font-size: 18px; margin-bottom: 30px; }
.service-text ul { list-style: none; padding: 0; }
.service-text ul li { margin-bottom: 15px; font-size: 16px; }
.service-text ul li i { color: #00aeff; margin-right: 15px; }
#portfolio { padding: 100px 0; }
.portfolio-filters { margin-bottom: 40px; display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.filter-btn { background: none; border: 1px solid #444; color: #ccc; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: all 0.3s ease; }
.filter-btn:hover, .filter-btn.active { background-color: #00aeff; color: #fff; border-color: #00aeff; }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; }
.card { background-color: #1c1c1c; border-radius: 10px; overflow: hidden; border: 1px solid #333; transition: transform 0.4s ease, box-shadow 0.4s ease; text-align: left; display: flex; flex-direction: column; cursor: pointer; }
.card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.card-link { text-decoration: none; color: #f0f0f0; display: flex; flex-direction: column; height: 100%; }
.card-image { width: 100%; height: 200px; overflow: hidden; position: relative; }
.card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-image img { transform: scale(1.1); }
.card-image-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; font-size: 32px; color: #fff; opacity: 0; transition: opacity 0.4s ease; }
.portfolio-item:hover .card-image-overlay { opacity: 1; }
.card-content { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; }
.card-date { font-size: 13px; color: #888; margin-bottom: 10px; display: block; }
.card-title { font-size: 22px; margin-top: 0; margin-bottom: 10px; color: #00aeff; }
.card-excerpt, .card-customer { font-size: 15px; color: #ccc; line-height: 1.6; margin: 0; flex-grow: 1; }
.card-customer { font-style: italic; font-size: 14px; color: #888; flex-grow: 0; }
.read-more { display: inline-block; margin-top: 20px; font-weight: 600; color: #00aeff; transition: transform 0.3s ease; align-self: flex-start; }
.read-more:hover { transform: translateX(5px); }
#lightbox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 10000; display: none; justify-content: center; align-items: center; }
.lightbox-content { position: relative; max-width: 800px; background: #1c1c1c; padding: 30px; border-radius: 10px; text-align: center; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; }
.close-lightbox { position: absolute; top: 15px; right: 25px; font-size: 35px; color: #fff; cursor: pointer; transition: transform 0.3s ease; }
.close-lightbox:hover { transform: scale(1.2); }
#lightbox-img { max-width: 100%; max-height: 60vh; border-radius: 5px; margin-bottom: 20px; object-fit: cover; }
#lightbox-title { font-size: 28px; color: #00aeff; margin: 0 0 10px 0; }
#lightbox-comment { font-size: 16px; color: #ccc; text-align: left; white-space: pre-wrap; }
#contact-details { padding: 100px 0; }
.contact-wrapper { display: flex; gap: 60px; text-align: left; }
.contact-info { flex-basis: 40%; }
.contact-info h2 { font-size: 42px; margin-top: 0; margin-bottom: 20px; color: #00aeff; }
.contact-info ul { list-style: none; padding: 0; }
.contact-info li { display: flex; align-items: start; margin-bottom: 25px; font-size: 18px; }
.contact-info li i { font-size: 24px; color: #00aeff; margin-right: 20px; margin-top: 5px; }
.contact-map { flex-basis: 60%; }
.contact-map iframe { width: 100%; height: 100%; min-height: 400px; border-radius: 10px; }
#musteri-yorumlari { padding: 80px 0; background-color: #1a1a1a; }
#musteri-yorumlari h2 { font-size: 42px; font-weight: 600; margin-bottom: 60px; text-transform: uppercase; letter-spacing: 2px; }
.yorumlar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.yorum-kart { background-color: #1c1c1c; padding: 30px; border-radius: 10px; border: 1px solid #333; text-align: center; }
.yildizlar { color: #ffd700; font-size: 20px; margin-bottom: 20px; }
.yorum-metni { font-size: 16px; color: #ccc; font-style: italic; margin-bottom: 20px; }
.musteri-ismi { font-weight: 600; color: #fff; }

/* MOBİL GÖRÜNÜM İÇİN DÜZENLEMELER */
@media (max-width: 992px) {
    #logo span { display: none; }
    .logo-image-wrapper { margin-right: 0; }
    
    .menu-toggle { 
        display: block; 
        background: none; 
        border: none; 
        color: #fff; 
        font-size: 28px; 
        cursor: pointer; 
        z-index: 1002; /* YENİ: Menünün üstünde kalması için */
        position: relative;
    }
    
    /* YENİ MOBİL MENÜ STİLLERİ (OFF-CANVAS) */
    nav ul {
    position: fixed;
    top: 0;
    right: 0; /* 'left' yerine 'right' */
    width: 280px;
    height: 100vh;
    background-color: #111;
    flex-direction: column;
    align-items: flex-start;
    padding: 100px 30px 30px 30px;
    box-sizing: border-box;
    transform: translateX(100%); /* Menüyü sağa gizle */
    transition: transform 0.4s ease;
    box-shadow: -5px 0px 15px rgba(0,0,0,0.2); /* Gölgeyi sola ver */
    z-index: 1001;
}
    nav ul.mobil-menu-aktif {
        transform: translateX(0);
    }
    nav ul li {
        width: 100%;
        margin: 0;
        text-align: left;
    }
    nav ul li a {
        padding: 15px 0;
        width: 100%;
        border-bottom: 1px solid #222;
        border-radius: 0;
        font-size: 18px;
        background-color: transparent !important;
    }
    nav ul li a::before { display: none; }

    .hero h1.shimmer-text { font-size: 48px; }
    .hero p { font-size: 18px; }
    .hizmetler-grid { grid-template-columns: 1fr; }
    .about-story .container { flex-direction: column; }
    .service-section, .service-section.reverse { flex-direction: column; gap: 30px; margin-bottom: 60px; }
    .service-text { text-align: center; }
    .lightbox-content { max-width: 90%; }
    .listing-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .contact-wrapper { flex-direction: column; }
}
@media (max-width: 576px) {
    #logo img { max-height: 50px; }
    .logo-image-wrapper { width: 50px; height: 50px; }
    .hero h1.shimmer-text { font-size: 32px; }
    .hero p { font-size: 16px; }
    .cta-button { padding: 12px 24px; font-size: 16px; }
    .fab-container { right: 20px; bottom: 20px; gap: 10px; }
    .fab-link { width: 45px; height: 45px; font-size: 22px; }
    .page-header h1 { font-size: 42px; }
    .transition-overlay h1 { font-size: 24px; }
    .service-text h2 { font-size: 32px; }
    .contact-info h2 { font-size: 32px; }
}