/* =========================================
   2. TEMEL AYARLAR VE ORTAK ELEMENTLER
   ========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; cursor: none; }
body { background-color: var(--bg-main); color: var(--text-main); font-family: 'Inter', sans-serif; overflow-x: hidden; width: 100%; transition: background-color 0.5s ease; }

.cursor-dot { width: 12px; height: 12px; background-color: var(--accent); border-radius: 50%; position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.2s, height 0.2s, opacity 0.2s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.reveal-text { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-text.active { opacity: 1; transform: translateY(0); }

/* =========================================
   3. ÜST MENÜ (NAVBAR) VE AÇILIR MENÜ
   ========================================= */
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 25px 5%; position: fixed; width: 100%; top: 0; z-index: 1000; background-color: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); }
.logo { font-family: 'Syne', sans-serif; font-size: 32px; font-weight: 800; letter-spacing: -1.5px; color: var(--text-main); }
.logo span { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 400; letter-spacing: 5px; color: var(--accent); display: block; margin-top: -8px; margin-left: 2px; }

.nav-menu { display: flex; gap: 30px; align-items: center; }
.nav-item { position: relative; display: inline-block; padding: 10px 0; }
.nav-item > a { color: var(--text-main) !important; font-weight: 600; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 0.9rem; letter-spacing: 1px; text-transform: uppercase; transition: color 0.3s; }
.nav-item > a:hover { color: var(--accent) !important; }

.dropdown-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-box); border: 1px solid var(--border-color); min-width: 220px; z-index: 999; border-radius: 6px; padding: 10px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.05); margin-top: 10px; }
.dropdown-menu::before { content: ""; position: absolute; top: -10px; left: 0; width: 100%; height: 10px; }
.nav-item:hover .dropdown-menu { display: block; animation: dropdownFade 0.3s ease forwards; }
.dropdown-item { display: block; padding: 12px 20px; color: var(--text-muted); text-decoration: none; font-family: 'Inter', sans-serif; font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s; text-align: center; }
.dropdown-item:hover { color: var(--accent); background: var(--bg-secondary); padding-left: 25px; padding-right: 15px; }

@keyframes dropdownFade { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.mobile-btn { display: none; background: transparent; border: none; color: var(--accent); font-size: 2rem; cursor: pointer; }

/* =========================================
   4. TİPOGRAFİ ODAKLI SLAYT (HERO)
   ========================================= */
.hero { height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hero-bg-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

/* Slaytın kendisi sadece görünüp kaybolma (fade) işlemi yapar */
.hero-bg-slider .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 2s ease-in-out; }
.hero-bg-slider .slide.active { opacity: 1; }

/* Arka plan resimleri BURADA çalışır, blur ve zoom efekti yer */
.hero-bg-slider .slide-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; filter: blur(5px) grayscale(60%); opacity: 0.5; transform: scale(1.1); transition: transform 8s ease-out; }
.hero-bg-slider .slide.active .slide-bg { transform: scale(1); }

.hero-overlay-dark { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(8, 8, 10, 0.4); z-index: 1; }
.hero-content { z-index: 10; position: relative; text-align: center; width: 100%; }
.hero-content h1 { 
    font-family: 'Syne', sans-serif; 
    /* Yazı boyutunu sınırlandırıyoruz (Min: 3rem, İdeal: 5vw, Max: 5.5rem) */
    font-size: clamp(3rem, 5vw, 5.5rem); 
    font-weight: 800; 
    color: var(--text-main); 
    letter-spacing: -2px; 
    line-height: 1.1; 
    margin: 0; 
    padding: 0 20px; 
}

/* Manifesto */
.manifesto { min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 100px 10%; background-color: var(--bg-main); }
.dynamic-manifesto { max-width: 1000px; }
.dynamic-manifesto p { font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 2.2rem; font-weight: 300; line-height: 1.5; margin-bottom: 30px; }
.dynamic-manifesto h1, .dynamic-manifesto h2, .dynamic-manifesto h3, .dynamic-manifesto h4 { font-family: 'Syne', sans-serif; color: var(--accent); font-size: 2.5rem; font-weight: 700; line-height: 1.3; margin-top: 40px; margin-bottom: 20px; }
.dynamic-manifesto strong { color: var(--text-main); font-weight: 600; }

/* Hizmetler Özeti (Anasayfa) */
.services { padding: 100px 5%; background-color: var(--bg-secondary); }
.services-wrapper { margin: 0 auto; }
.services-header { margin-bottom: 60px; }
.services-header h2 { font-family: 'Syne', sans-serif; font-size: 3vw; color: var(--text-main); font-weight: 800; }
.services-header p { color: var(--accent); font-size: 1.2vw; margin-top: 10px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.service-box { background: var(--bg-box); border: 1px solid var(--border-color); padding: 40px; border-radius: 8px; transition: all 0.3s ease; cursor: default; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.service-box:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
.service-icon { height: 40px; margin-bottom: 25px; filter: drop-shadow(0 0 8px rgba(203, 170, 92, 0.2)); }
.service-box h3 { font-family: 'Syne', sans-serif; font-size: 1.4rem; color: var(--text-main); margin-bottom: 15px; }
.service-box p { font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0; }

/* Portfolyo Özeti (Anasayfa) */
.portfolio { padding: 100px 5%; background-color: var(--bg-secondary); }
.portfolio-header { margin-bottom: 60px; }
.portfolio-header h2 { font-family: 'Syne', sans-serif; font-size: 3vw; color: var(--text-main); font-weight: 800; }
.portfolio-header p { color: var(--accent); font-size: 1.2vw; margin-top: 10px; }
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

/* Anasayfa İletişim Formu */
.contact { padding: 150px 5% 50px 5%; background-color: var(--bg-main); display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; }
.contact-container { max-width: 1200px; margin: 0 auto; width: 100%; }
.contact h2 { font-family: 'Syne', sans-serif; font-size: 2vw; color: var(--text-muted); font-weight: 700; margin-bottom: 20px; }
.massive-link { display: block; font-family: 'Syne', sans-serif; font-size: 2vw; font-weight: 800; color: var(--text-main); text-decoration: none; letter-spacing: -2px; margin-bottom: 80px; transition: color 0.3s ease; }
.massive-link:hover { color: var(--accent); }

/* Ortak Form Stilleri (Anasayfa ve İletişim Sayfasında Kullanılır) */
.contact-form { max-width: 600px; }
.input-group { margin-bottom: 40px; position: relative; }
.input-group input, .input-group textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--border-color); padding: 15px 0; color: var(--text-main); font-family: 'Inter', sans-serif; font-size: 1.2rem; outline: none; transition: border-color 0.3s ease; resize: none; }
.input-group input:focus, .input-group textarea:focus { border-bottom-color: var(--accent); }
.input-group input::placeholder, .input-group textarea::placeholder { color: #aaa; }
.submit-btn { background: transparent; border: none; color: var(--text-main); font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; gap: 15px; margin-top: 50px; transition: transform 0.3s ease; }
.submit-btn:hover { transform: translateX(10px); color: var(--accent); }
.btn-dot { width: 12px; height: 12px; background-color: var(--accent); border-radius: 50%; display: inline-block; }

/* =========================================
   5. ALT SAYFALAR & DETAY ALANLARI
   ========================================= */
/* Ortak Üst Kapak (Hero) */
.detail-hero { height: 60vh; width: 100%; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; }
.detail-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, var(--bg-main) 0%, rgba(255,255,255,0.4) 100%); z-index: 1; }
.detail-hero-content { position: relative; z-index: 10; padding: 0 5% 80px 5%; width: 100%; animation: fadeUp 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.5s; opacity: 0; transform: translateY(40px); }
.detail-category { font-family: 'Inter', sans-serif; color: var(--accent); font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: 1rem; margin-bottom: 20px; display: block; }
.detail-title { font-family: 'Syne', sans-serif; font-size: 5vw; font-weight: 800; color: var(--text-main); letter-spacing: -2px; line-height: 1; margin: 0; }

/* Proje Kartları (Ortak) */
.project-card { position: relative; height: 450px; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.project-card.large { grid-row: span 2; height: 100%; min-height: 930px; }
.project-image { width: 100%; height: 100%; background-size: cover; background-position: center; filter: grayscale(20%); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; }
.project-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 60%); opacity: 0.8; transition: opacity 0.5s ease; }
.project-info { position: absolute; bottom: 40px; left: 40px; transform: translateY(20px); opacity: 0; transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.project-info h3 { font-family: 'Syne', sans-serif; font-size: 2.5vw; color: var(--text-main); margin-bottom: 5px; }
.project-info span { font-size: 1vw; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; font-weight: 600;}
.project-card:hover .project-image { transform: scale(1.05); filter: grayscale(0%); }
.project-card:hover .project-overlay { opacity: 1; }
.project-card:hover .project-info { transform: translateY(0); opacity: 1; }
.project-card-link { display: block; text-decoration: none; }

/* Proje Detay & Hakkımızda İçerik */
.proje-hero { height: 70vh; background-size: cover; background-position: center; position: relative; display: flex; align-items: flex-end; padding: 50px 5%; }
.proje-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, var(--bg-main) 0%, rgba(255,255,255,0.2) 100%); z-index: 1; }
.proje-hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%; }
.proje-kategori { color: var(--accent); font-family: 'Inter', sans-serif; font-size: 1rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; display: block; font-weight: 600;}
.proje-baslik { color: var(--text-main); font-family: 'Syne', sans-serif; font-size: 4.5rem; margin: 0; line-height: 1.1; }
.proje-icerik { max-width: 900px; margin: 80px auto; padding: 0 5%; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 1.15rem; line-height: 1.8; }
.proje-icerik h2, .proje-icerik h3 { color: var(--text-main); font-family: 'Syne', sans-serif; margin-top: 50px; margin-bottom: 20px; }
.proje-icerik img, .proje-icerik iframe { max-width: 100%; height: auto; border-radius: 8px; margin: 40px 0; box-shadow: 0 5px 20px rgba(0,0,0,0.05);}
.proje-icerik strong { color: var(--text-main); font-weight: 600; }
.proje-icerik blockquote { border-left: 3px solid var(--accent); padding-left: 20px; font-style: italic; color: var(--text-muted); background: var(--bg-secondary); padding: 20px; border-radius: 0 8px 8px 0;}

/* Hizmetler Sayfası Izgarası */
.hizmetler-wrapper { max-width: 1200px; margin: 0 auto; padding-bottom: 50px; }
.hizmetler-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.hizmet-kutu { background: var(--bg-box); border: 1px solid var(--border-color); padding: 40px; border-radius: 8px; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.hizmet-kutu:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.08); }
.hizmet-kutu img, .hizmet-kutu iframe { max-width: 100%; height: auto; border-radius: 4px; }
.hizmet-kutu p, .hizmet-kutu div, .hizmet-kutu span { color: var(--text-muted) !important; word-break: normal !important; overflow-wrap: normal !important; }
.hizmet-kutu h3 { color: var(--text-main) !important; word-break: normal !important; overflow-wrap: normal !important; font-family: 'Syne', sans-serif; font-size: 1.5rem; margin-bottom: 15px; line-height: 1.4; }
.hizmet-kutu span.hizmet-numara { color: var(--accent) !important; font-size: 1rem; display: block; margin-bottom: 5px; font-weight: 600; }
.hizmet-kutu .hizmet-aciklama { font-family: 'Inter', sans-serif; font-size: 0.95rem; line-height: 1.6; }
.hizmet-bos { color: var(--text-muted); text-align: center; grid-column: 1 / -1; }
.detail-story { padding: 100px 5%; min-height: 50vh; background-color: var(--bg-main); }

/* Projeler Arşivi */
.portfolio-page-desc { text-align: center; margin-bottom: 70px; font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 1.1rem; }
.portfolio-empty { color: var(--text-muted); grid-column: 1 / -1; text-align: center; padding: 40px 0; }

/* Statik Sayfalar (Gizlilik, Bilgi) */
.page-section { padding: 80px 5%; min-height: 50vh; background-color: var(--bg-main); }
.page-box { max-width: 900px; margin: 0 auto; padding: 0; } 
.page-box-content { font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 1.15rem; line-height: 1.8; word-wrap: break-word; overflow-x: hidden; }
.page-box-content h2, .page-box-content h3 { color: var(--text-main); font-family: 'Syne', sans-serif; margin-top: 40px; margin-bottom: 15px; }
.page-box-content strong { color: var(--text-main); font-weight: 600; }

/* Ortak Altın Rengi Buton */
.gold-outline-btn { display: inline-block; color: var(--accent); border: 1px solid var(--accent); padding: 12px 30px; border-radius: 4px; text-decoration: none; font-family: 'Syne', sans-serif; font-weight: 700; transition: all 0.3s; }
.gold-outline-btn:hover { background: var(--accent); color: var(--bg-main); }
.btn-center-wrapper { text-align: center; margin-top: 60px; }

/* =========================================
   6. İLETİŞİM SAYFASI (SPLIT SCREEN)
   ========================================= */
.contact-page { padding: 150px 5% 100px 5%; background-color: var(--bg-main); min-height: 100vh; }
.contact-wrapper { max-width: 1200px; margin: 0 auto; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: stretch; }
.contact-info h1 { font-family: 'Syne', sans-serif; font-size: 4rem; color: var(--text-main); margin-bottom: 20px; line-height: 1.1; letter-spacing: -2px; }
.contact-info p { font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 1.1rem; margin-bottom: 30px; }

.contact-page .massive-mail { display: block; font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: var(--accent); text-decoration: none; margin-bottom: 30px; word-break: break-all; transition: color 0.3s; }
.contact-page .massive-mail:hover { color: var(--text-main); }
.contact-details-box { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--border-color); }
.contact-detail-item { display: block; font-family: 'Inter', sans-serif; font-size: 1.1rem; color: var(--text-muted); margin-bottom: 10px; text-decoration: none; line-height: 1.6; }
.contact-detail-item strong { color: var(--text-main); font-weight: 600; margin-right: 8px; }
.contact-detail-item a { color: var(--text-muted); text-decoration: none; transition: color 0.3s; }
.contact-detail-item a:hover { color: var(--accent); }

/* Harita Kutusu */
.map-container { width: 100%; height: 100%; min-height: 500px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); background: var(--bg-box); box-shadow: 0 10px 30px rgba(0,0,0,0.03); }
.map-container iframe { width: 100% !important; height: 100% !important; min-height: 500px; border: none; filter: grayscale(100%) contrast(90%); }

/* =========================================
   7. FOOTER (ALT BİLGİ)
   ========================================= */
.site-footer { display: flex; justify-content: space-between; align-items: center; padding: 40px 5%; margin-top: 80px; border-top: 1px solid var(--border-color); background-color: var(--bg-main); }
.footer-text { color: var(--text-muted); font-size: 0.9rem; font-family: 'Inter', sans-serif; }
.footer-socials { display: flex; gap: 20px; }
.social-icon { color: var(--text-muted); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; }
.social-icon:hover { color: var(--accent); transform: translateY(-3px); }

/* =========================================
   8. MOBİL UYUMLULUK
   ========================================= */
@media (max-width: 992px) {
    .contact-grid { grid-template-columns: 1fr; gap: 50px; }
    .contact-info h1 { font-size: 3rem; }
    .contact-page .massive-mail { font-size: 1.5rem; }
    .map-container, .map-container iframe { min-height: 400px; }
    .contact-page { padding: 120px 5% 80px 5%; }
    .insta-grid { grid-template-columns: repeat(3, 1fr); } 
    .insta-item:nth-child(4), .insta-item:nth-child(5) { display: none; }
}

@media (max-width: 768px) {
    body { overflow-x: hidden !important; width: 100%; }
    .cursor-dot { display: none !important; }
    * { cursor: auto !important; }

    .mobile-btn { display: block; }
    .nav-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background: var(--bg-main); padding: 20px 5%; border-bottom: 1px solid var(--border-color); box-shadow: 0 10px 30px rgba(0,0,0,0.05); z-index: 1000; align-items: flex-start; gap: 15px; }
    .nav-menu.active { display: flex; }
    .nav-item { width: 100%; border-bottom: 1px solid var(--border-color); padding-bottom: 15px; }
    .nav-item:last-child { border-bottom: none; }
    .nav-item:hover .dropdown-menu { display: none; } 
    .nav-item.mobile-open .dropdown-menu { display: block; position: static; transform: none; box-shadow: none; border: none; background: transparent; padding-left: 15px; margin-top: 10px; width: 100%; }
    .dropdown-item { text-align: left; padding: 10px 0; }

    h1, h2 { word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto; }
    .hero-content h1 { font-size: 3.5rem !important; letter-spacing: -1px; padding: 0 20px; }
    .portfolio-header h2 { font-size: 2.2rem !important; }
    .services-header h2 { font-size: 2.2rem !important; }
    .manifesto { padding: 80px 20px; }
    .dynamic-manifesto p { font-size: 1.4rem; color: var(--text-muted); }
    .dynamic-manifesto h1, .dynamic-manifesto h2, .dynamic-manifesto h3, .dynamic-manifesto h4 { font-size: 1.8rem; margin-top: 25px; }

    .portfolio { padding: 60px 20px; }
    .portfolio-grid, .services-grid, .hizmetler-grid { display: flex !important; flex-direction: column !important; width: 100% !important; gap: 20px !important; }
    .project-card, .project-card.large, .service-box, .hizmet-kutu { width: 100% !important; box-sizing: border-box !important; height: auto; min-height: 350px; grid-row: auto; padding: 25px; }
    .project-info { opacity: 1; transform: translateY(0); }
    .project-info h3 { font-size: 1.5rem; }
    .project-info span { font-size: 0.8rem; }
    
    .detail-hero { height: 40vh; }
    .detail-hero-content { padding-bottom: 40px; }
    .detail-title { font-size: 3rem !important; letter-spacing: -1px; }
    .proje-baslik { font-size: 2.5rem !important; }
    .proje-icerik { font-size: 1rem; margin: 40px auto; }
    .proje-hero { height: 50vh; }

    .contact { padding: 80px 20px 40px 20px; }
    .contact h2 { font-size: 1.5rem; }
    .massive-link { font-size: 1.2rem; letter-spacing: -1px; word-break: break-all; margin-bottom: 50px; }
    .submit-btn { font-size: 1.2rem; }

    .site-footer { flex-direction: column; gap: 20px; text-align: center; padding: 30px 5%; }
    
    .sinematik-title { font-size: 3rem; }
    .sinematik-content { left: 5%; right: 5%; text-align: left; }
    .sinematik-controls { bottom: 20px; left: 5%; right: auto; }
    .floating-whatsapp { bottom: 20px; right: 20px; width: 50px; height: 50px; }
    .floating-whatsapp svg { width: 26px; height: 26px; }
}

@media (max-width: 576px) { 
    .masonry-grid { column-count: 1; } 
    .insta-grid { grid-template-columns: repeat(2, 1fr); } 
    .insta-item:nth-child(3) { display: none; } 
    .insta-header h2 { font-size: 2rem; } 
}

/* =========================================
   9. GALERİ SAYFASI VE MASONRY GRID
   ========================================= */
.gallery-container { padding: 100px 5%; background-color: var(--bg-main); min-height: 50vh; }
.gallery-header { text-align: center; margin-bottom: 50px; }
.gallery-header p { font-family: 'Inter', sans-serif; color: var(--text-muted); font-size: 1.1rem; }

.masonry-grid { column-count: 3; column-gap: 20px; max-width: 1200px; margin: 0 auto; }
.masonry-item { break-inside: avoid; margin-bottom: 20px; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.masonry-item img { width: 100%; display: block; transition: transform 0.5s ease, filter 0.5s ease; filter: grayscale(20%); }
.masonry-item:hover img { transform: scale(1.05); filter: grayscale(0%); }

.masonry-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 8, 10, 0.5); opacity: 0; transition: opacity 0.3s; display: flex; align-items: center; justify-content: center; }
.masonry-item:hover .masonry-overlay { opacity: 1; }
.masonry-overlay span { color: var(--accent); font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 300; }

/* =========================================
   10. LIGHTBOX (SİNEMATİK TAM EKRAN GÖRSEL)
   ========================================= */
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 8, 10, 0.95); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: zoom-out; }
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-img { max-width: 90%; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.lightbox-overlay.active .lightbox-img { transform: scale(1); }
.lightbox-close { position: absolute; top: 30px; right: 40px; color: var(--text-main); font-size: 3rem; font-family: 'Inter', sans-serif; cursor: pointer; transition: color 0.3s; line-height: 1; z-index: 100000; }
.lightbox-close:hover { color: var(--accent); }

/* =========================================
   11. YÜZEN WHATSAPP BUTONU
   ========================================= */
.floating-whatsapp { position: fixed; bottom: 40px; right: 40px; width: 60px; height: 60px; background-color: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4); z-index: 9999; text-decoration: none; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.floating-whatsapp:hover { transform: scale(1.1) translateY(-5px); box-shadow: 0 15px 35px rgba(37, 211, 102, 0.6); }
.floating-whatsapp svg { width: 32px; height: 32px; fill: #fff; }
.floating-whatsapp::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid #25D366; animation: pulse-wa 2s infinite; }
@keyframes pulse-wa { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }

/* =========================================
   12. INSTAGRAM VİTRİN ALANI
   ========================================= */
.insta-section { padding: 100px 0 0 0; background-color: var(--bg-main); overflow: hidden; border-top: 1px solid var(--border-color); }
.insta-header { text-align: center; margin-bottom: 50px; padding: 0 5%; }
.insta-header h2 { font-family: 'Syne', sans-serif; font-size: 2.5rem; color: var(--text-main); margin-bottom: 20px; }
.insta-header a { text-decoration: none; color: var(--text-muted); font-family: 'Inter', sans-serif; transition: color 0.3s; }
.insta-header a:hover { color: var(--accent); }
.insta-grid { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; }
.insta-item { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: block; }
.insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s; filter: grayscale(30%); }
.insta-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(8, 8, 10, 0.7); display: flex; align-items: center; justify-content: center; opacity: 0; transition: all 0.4s ease; }
.insta-overlay svg { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transform: translateY(20px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.insta-item:hover img { transform: scale(1.1); filter: grayscale(0%); }
.insta-item:hover .insta-overlay { opacity: 1; }
.insta-item:hover .insta-overlay svg { transform: translateY(0); }

/* =========================================
   13. SİNEMATİK VİTRİN SLAYTI
   ========================================= */
.sinematik-hero { position: relative; height: 100vh; width: 100%; overflow: hidden; background: var(--bg-main); }
.sinematik-slider-container { width: 100%; height: 100%; position: relative; }
.sinematik-slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease-in-out, transform 8s ease-out; transform: scale(1.05); z-index: 1; }
.sinematik-slide.active { opacity: 1; transform: scale(1); z-index: 2; }
.sinematik-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, rgba(8,8,10,0.9) 0%, rgba(8,8,10,0.2) 100%); z-index: 3; }
.sinematik-content { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 4; max-width: 600px; opacity: 0; transition: all 1s ease 0.5s; }
.sinematik-slide.active .sinematik-content { opacity: 1; left: 10%; }
.sinematik-category { color: var(--accent); font-family: 'Inter', sans-serif; font-size: 0.8rem; letter-spacing: 2px; font-weight: 600; display: block; margin-bottom: 10px; }
.sinematik-title { color: var(--text-main); font-family: 'Syne', sans-serif; font-size: clamp(2rem, 10vw, 2.8rem) !important; line-height: 1.1; margin-bottom: 15px; text-transform: uppercase; word-break: break-word; /* Taşmayı engeller */
        hyphens: auto; /* Gerekirse heceden böler */ }
.sinematik-desc { color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.5; margin-bottom: 30px; }
.sinematik-btn { display: inline-block; padding: 12px 25px; background: transparent; border: 1px solid var(--text-main); color: var(--text-main); font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; transition: all 0.3s; font-size: 0.9rem; }
.sinematik-btn:hover { background: var(--text-main); color: var(--bg-main); }
.sinematik-controls { position: absolute; bottom: 20px; left: 5%; right: auto; z-index: 10; display: flex; gap: 15px; }
.sinematik-controls button { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; width: 50px; height: 50px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.sinematik-controls button:hover { border-color: var(--accent); color: var(--accent); }
/* =========================================
   HİBRİT HİZMET TASARIMI
   ========================================= */
/* Görsel seçilirse kutuyu dolduran geniş resim */
.service-box.style-gorsel .service-icon {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 25px;
    filter: none; /* İkonlardaki gölgeyi kaldır */
}

/* İkon seçilirse Bigraft'ın o zarif küçük stili */
.service-box.style-ikon .service-icon {
    height: 45px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
}

/* Hizmetler sayfasındaki kartlar için ek düzeltme */
.hizmet-kutu .hizmet-resim-buyuk {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 25px;
}