/* ================================================================== */
/* ===  INDEX.CSS — YALNIZCA index.html (ANA SAYFA) İÇİN GEÇERLİ  === */
/* ===  Bu dosya başka hiçbir sayfa tarafından kullanılmaz.       === */
/* ===  YAPI:                                                     === */
/* ===   BÖLÜM A → MASAÜSTÜ KODLARI  (min-width: 993px)           === */
/* ===   BÖLÜM B → MOBİL KODLARI     (max-width: 992px)           === */
/* ===   BÖLÜM C → KÜÇÜK TELEFON     (max-width: 768px)           === */
/* ===  Masaüstü ve mobil hiçbir kuralı paylaşmaz; her ortamın    === */
/* ===  kendi tam kural seti vardır.                              === */
/* ================================================================== */


/* ################################################################## */
/* #####  BÖLÜM A — MASAÜSTÜ (993px ve üzeri ekranlar)          ##### */
/* ################################################################## */
@media (min-width: 993px) {

    /* ---------- A.1 TEMEL SIFIRLAMA (RESET) — tüm öğelerin varsayılan boşluklarını sıfırlar ---------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* HTML kökü: yumuşak kaydırma ve yatay taşma engeli */
    html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; background: #f7f7f7; }

    /* Gövde: Montserrat yazı tipi, açık gri zemin, dikey esnek düzen (footer'ı en alta iter) */
    body { font-family: 'Montserrat', sans-serif; background: #f7f7f7; color: #2a2a2a; overflow-x: hidden; width: 100%; position: relative; display: flex; flex-direction: column; min-height: 100vh; }

    /* Tüm bağlantılar: alt çizgisiz, rengi bulunduğu öğeden alır */
    a { text-decoration: none; color: inherit; }

    /* Orta hizalı içerik kutusu: maksimum 1200px genişlik */
    .container { max-width: 1200px; margin: auto; padding: 0 20px; }

    /* Çapa (anchor) ile bölüme atlarken sabit menünün altında kalmaması için üst boşluk */
    section { scroll-margin-top: 120px; }

    /* ---------- A.2 YARDIMCI SINIFLAR — index.html'de kullanılan küçük kısayollar ---------- */
    .color-white { color: #f7f7f7; }   /* Beyaz metin (iletişim paneli başlığı) */
    .mb-10 { margin-bottom: 10px; }    /* 10px alt boşluk */
    .font-0-8 { font-size: 0.8rem; }   /* Küçük yazı (menüdeki ok ikonu) */
    .ml-5 { margin-left: 5px; }        /* 5px sol boşluk (menüdeki ok ikonu) */
    .brand-text { display: none; }     /* Kullanılmayan eski marka yazısı kutusu — daima gizli */

    /* ---------- A.3 ARKA PLAN GÖRSELLERİ — masaüstü slider görselleri (1–6) ---------- */
    .bg-slider-1 { background-image: url('img/slider1.webp'); }
    .bg-slider-2 { background-image: url('img/slider2.webp'); }
    .bg-slider-3 { background-image: url('img/slider3.webp'); }
    .bg-slider-4 { background-image: url('img/slider4.webp'); }
    .bg-slider-5 { background-image: url('img/slider5.webp'); }
    .bg-slider-6 { background-image: url('img/slider6.webp'); }

    /* ---------- A.4 HİZMET KARTI GÖRSELLERİ — 6 şirket kartının fotoğrafları ---------- */
    .bg-hizmet-turizm    { background-image: url('img/index-hizmet-turizm.webp'); }
    .bg-hizmet-dugun     { background-image: url('img/index-hizmet-dugun.webp'); }
    /* DÜZELTME: hizmet-kahvalti.jpg dosyası mevcut olmadığı için var olan header-breakfast.webp kullanıldı */
    .bg-hizmet-kahvalti  { background-image: url('img/index-hizmet-kahvalti.webp'); }
    .bg-hizmet-akaryakit { background-image: url('img/index-hizmet-akaryakit.webp'); }
    .bg-hizmet-insaat    { background-image: url('img/index-hizmet-insaat.webp'); }
    .bg-hizmet-seyahat   { background-image: url('img/index-hizmet-seyahat.webp'); }
    /* Yeni restoran sayfaları kart görselleri (geçici placeholder fotoğraflar) */
    .bg-hizmet-sahindagrestoran  { background-image: url('img/index-hizmet-sahindagrestoran.webp'); }
    .bg-hizmet-besyildizrestoran { background-image: url('img/index-hizmet-besyildizrestoran.webp'); }

    /* ---------- A.5 REFERANS LOGO GÖRSELLERİ (ref1–ref16) ---------- */
    .bg-ref1  { background-image: url('img/ref1.webp'); }
    .bg-ref2  { background-image: url('img/ref2.webp'); }
    .bg-ref3  { background-image: url('img/ref3.webp'); }
    .bg-ref4  { background-image: url('img/ref4.webp'); }
    .bg-ref5  { background-image: url('img/ref5.webp'); }
    .bg-ref6  { background-image: url('img/ref6.webp'); }
    .bg-ref7  { background-image: url('img/ref7.webp'); }
    .bg-ref8  { background-image: url('img/ref8.webp'); }
    .bg-ref9  { background-image: url('img/ref9.webp'); }
    .bg-ref10 { background-image: url('img/ref10.webp'); }
    .bg-ref11 { background-image: url('img/ref11.webp'); }
    .bg-ref12 { background-image: url('img/ref12.webp'); }
    .bg-ref13 { background-image: url('img/ref13.webp'); }
    .bg-ref14 { background-image: url('img/ref14.webp'); }
    .bg-ref15 { background-image: url('img/ref15.webp'); }
    .bg-ref16 { background-image: url('img/ref16.webp'); }

    /* ---------- A.6 NAVBAR (ÜST MENÜ) — sayfa başında şeffaf, kaydırınca beyaz zemin ---------- */
    /* Menü çubuğunun kendisi: ekrana sabitlenmiş, en üstte */
    .navbar-home { background: transparent; border: none; padding: 5px 0; position: fixed; width: 100%; top: 0; z-index: 1000; transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; }
    /* Kaydırma sonrası hali: beyaz zemin + hafif gölge (JS .scrolled sınıfını ekler) */
    .navbar-home.scrolled { background: #f7f7f7; padding: 0; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
    /* Menü iç düzeni: logo solda, linkler sağda, 105px yükseklik */
    .navbar-home .container { max-width: 100%; padding: 0 80px; display: flex; justify-content: space-between; align-items: center; height: 105px; position: relative; }

    /* Sol üstteki logo bağlantısı ve görseli */
    .static-logo { display: block; width: 170px; margin-right: auto; }
    .static-logo img { width: 100%; height: auto; display: block; }

    /* Hamburger ikonu ve mobil arama butonu: masaüstünde tamamen gizli */
    .hamburger-menu { display: none; }
    .nav-right-mobile { display: none; }
    /* Mobil menü başlığı ("MENÜ" yazısı): masaüstünde gizli */
    .mobile-menu-header { display: none; }

    /* Menü linklerinin listesi: yatay sıralı, 30px aralıklı */
    .nav-links { display: flex; list-style: none; gap: 30px; align-items: center; }
    .nav-links > li { position: relative; padding: 10px 0; }
    /* Tek tek menü linkleri: beyaz, kalın, büyük harf, gölgeli */
    .nav-links > li > a { color: #f7f7f7; font-weight: bold; font-size: 13px; transition: 0.3s; text-transform: uppercase; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); display: inline-block; position: relative; padding-bottom: 5px; }
    /* Link altındaki kırmızı çizgi animasyonu: hover'da soldan sağa uzar */
    .nav-links > li > a::after { content: ''; position: absolute; width: 0; height: 3px; bottom: 0; left: 0; background-color: #e31c24; transition: width 0.3s ease-in-out; }
    .nav-links > li > a:hover::after { width: 100%; }
    .nav-links > li > a:hover { color: #f7f7f7; transform: translateY(-2px); }
    /* Kaydırılmış menüde linkler koyu renge döner */
    .navbar-home.scrolled .nav-links > li > a { color: #2a2a2a; text-shadow: none; }
    .navbar-home.scrolled .nav-links > li > a:hover { color: #e31c24; }

    /* Açılır alt menü (HİZMETLERİMİZ): hover ile görünür olur */
    .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background: #f7f7f7; min-width: 220px; box-shadow: 0 5px 20px rgba(0,0,0,0.15); border-radius: 8px; padding: 15px 0; opacity: 0; visibility: hidden; transition: all 0.3s ease; list-style: none; z-index: 1200; border-top: 4px solid #e31c24; }
    .nav-links > li.has-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    /* Alt menü öğeleri: koyu metin, hover'da kırmızı ve sağa kayar */
    .dropdown-menu li a { display: block; padding: 10px 20px; color: #2a2a2a; font-size: 13px; font-weight: 600; transition: 0.2s; white-space: nowrap; }
    .dropdown-menu li a:hover { background: #f7f7f7; color: #e31c24; transform: translateX(5px); }

    /* ---------- A.7 TAM EKRAN SLIDER (HERO) — perde efektiyle sabitlenmiş arka plan ---------- */
    /* Hero: ekrana sabitlenir, içerik üzerine kayar (perde/curtain efekti) */
    .home-hero { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; color: #f7f7f7; z-index: 0; }
    /* Slaytları barındıran kapsayıcı */
    .slider-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
    /* Tek slayt: tam ekran arka plan görseli; aktif değilken görünmez */
    .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; z-index: 1; transition: opacity 1s ease-in-out; }
    .slide.active { opacity: 1; z-index: 2; }
    /* Slayt üzerindeki yarı saydam karartma katmanı (yazı okunabilirliği için) */
    .slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; }

    /* Slayt içindeki yazı bloğu: dikeyde ortalanır, aktif slaytta belirir */
    .slide-content { position: relative; top: 50%; transform: translateY(-50%); z-index: 10; text-align: center; opacity: 0; transition: all 0.8s ease-out; max-width: 800px; margin: auto; }
    .slide.active .slide-content { opacity: 1; transform: translateY(-50%); }
    /* Slayt ana başlığı: büyük, kalın, gölgeli */
    .slide-content h2 { font-size: 3rem; margin-bottom: 15px; text-transform: uppercase; font-weight: 900; color: #f7f7f7; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    /* Başlık içindeki vurgulu kelime: kırmızı */
    .slide-content h2 span { color: #e31c24; }
    /* Slayt alt açıklama yazısı */
    .slide-content p { font-size: 1.1rem; margin-bottom: 25px; color: #f7f7f7; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }

    /* Slayttaki kırmızı buton (ör. "Servis Hizmetleri") */
    .btn-hero { display: inline-block; background: #e31c24; color: #f7f7f7; padding: 12px 35px; border-radius: 50px; font-weight: bold; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border: none; cursor: pointer; position: relative; z-index: 2; }
    .btn-hero:hover { background: #c0151c; transform: translateY(-3px) scale(1.05); }

    /* Slider sağ/sol gezinme okları — modern buzlu cam (glassmorphism) yuvarlak butonlar */
    .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: rgba(255, 255, 255, 0.85); font-size: 20px; cursor: pointer; z-index: 20; padding: 0; transition: all 0.3s ease; }
    .slider-btn:hover { background: rgba(227, 28, 36, 0.85); border-color: rgba(227, 28, 36, 0.9); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 30px rgba(227, 28, 36, 0.35); }
    .prev-btn { left: 28px; }
    .next-btn { right: 28px; }

    /* Slider nokta (dot) göstergeleri: aktif slaytı işaret eden modern hap noktalar */
    .slider-dots { position: absolute; bottom: 86px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 20; }
    .slider-dot { width: 10px; height: 10px; border-radius: 50px; border: none; background: rgba(255, 255, 255, 0.35); cursor: pointer; padding: 0; transition: all 0.35s ease; }
    .slider-dot:hover { background: rgba(255, 255, 255, 0.7); }
    .slider-dot.active { width: 30px; background: #e31c24; }

    /* Aşağı kaydırma göstergesi: yalnızca modern animasyonlu çift ok (chevron);
       ok stili ve nabız animasyonu transport/wedding oklarıyla ortaktır (effects.css .hsa-chevron) */
    .scroll-indicator { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; align-items: center; padding: 10px 14px; cursor: pointer; }
    .scroll-indicator:hover .hsa-chevron { border-color: rgba(227, 28, 36, 0.9); }

    /* ---------- A.8 PERDE (CURTAIN) DÜZENİ — içerik hero üzerine kayar ---------- */
    /* Gövde arka planı saydam: sabit hero görünür kalır */
    body.has-hero-reveal { background: transparent; }
    /* Tüm içerik bölümleri ve footer hero'nun üstünde yer alır */
    body.has-hero-reveal section,
    body.has-hero-reveal footer { position: relative; z-index: 1; }
    /* İlk içerik bölümü: tam ekran hero kadar aşağıdan başlar, üst gölgesiyle perde hissi verir */
    .companies-section.over-hero { margin-top: 100vh; background: #f7f7f7; box-shadow: 0 -14px 30px rgba(0,0,0,0.18); }

    /* ---------- A.9 HİZMETLERİMİZ BÖLÜMÜ — 6 şirket kartı (3 sütun) ---------- */
    /* Bölümün dış boşlukları */
    .companies-section { padding: 80px 0; }
    /* Bölüm başlığı: ortalı, kalın */
    .companies-section .section-title { text-align: center; margin-bottom: 35px; font-size: 2rem; color: #2a2a2a; font-weight: 800; }
    /* Kart ızgarası: masaüstünde 3 sütun, ortalanmış */
    .cards-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1100px; margin-left: auto; margin-right: auto; }
    /* Tek şirket kartı: beyaz kutu; sayfa kayınca görünür olur (JS .visible ekler)
       MODERNİZASYON: daha yumuşak köşeler ve katmanlı premium gölge */
    .company-card { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 5px 5px 15px #aaaaaace; border: 4px solid rgba(0,0,0,0.04); display: flex; flex-direction: column; opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
    .company-card.visible { opacity: 1; transform: translateY(0); }
    /* Kart hover: yukarı kalkar, gölge büyür, kırmızı vurgu çizgisi */
    .company-card:hover { transform: translateY(-10px); box-shadow: 0px 6px 10px #e31c24; }
    /* Kart üst görseli: 4:3 oranında, hover'da hafif yakınlaşır */
    .card-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; transition: 0.4s; }
    .company-card:hover .card-img { transform: scale(1); }
    /* Kart alt bilgi alanı: başlık + açıklama + "İncele" yazısı */
    .card-info { padding: 25px 0; text-align: center; background: #f7f7f7; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
    /* Kart başlığı: kırmızı şirket adı */
    .card-info h3 {margin-top: -15px; color: #e31c24; font-size: 1.1rem; }
    /* "İncele →" bağlantı yazısı */
    .link-text { font-weight: bold; color: #2a2a2a; margin-top: 10px; }

    /* ---------- A.10 REFERANSLAR BÖLÜMÜ — masaüstünde 6 sütunlu logo ızgarası ---------- */
    .references-section { padding: 50px 0; background: #f7f7f7; }
    /* Bölüm başlığı */
    .references-section .section-title { text-align: center; margin-bottom: 35px; font-size: 2rem; color: #2a2a2a; font-weight: 800; }
    /* Masaüstü logo ızgarası: 6 eşit sütun */
    .reference-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; justify-items: center; }
    /* Mobil kayan logo şeridi: masaüstünde tamamen gizli */
    .mobile-references-wrapper { display: none; }
    /* Logo bağlantısı: tüm kutuyu kaplar */
    .ref-link { display: block; width: 100%; text-decoration: none; }
    /* Tek referans kutusu: logo + isim; kaydırınca görünür olur */
    .ref-item { width: 100%; text-align: center; background: #f7f7f7; padding: 10px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; height: 100%; opacity: 0; transform: translateY(30px); transition: all 0.5s ease-out; }
    .ref-item.visible { opacity: 1; transform: translateY(0); }
    .ref-item:hover {box-shadow: 0px 5px 10px #e31c24; transform: translateY(-5px); }
    /* Logo görseli kutusu: kare, taşırmadan sığdırır */
    .ref-img { width: 100%; aspect-ratio: 1 / 1; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 5px; margin-bottom: 10px; background-color: #f7f7f7; }
    /* Logo altındaki firma adı */
    .ref-item h4 { font-size: 0.95rem; color: #2a2a2a; font-weight: 700; }

    /* ---------- A.11 HAKKIMIZDA BÖLÜMÜ — görsel + tanıtım metni yan yana ---------- */
    .about-section { padding: 80px 0; background: #f7f7f7; }
    /* Bölüm başlığı */
    .about-section .section-title { text-align: center; margin-bottom: 35px; font-size: 2rem; color: #2a2a2a; font-weight: 800; }
    /* Görsel ve metni yan yana dizen satır */
    .about-row { display: flex; align-items: center; gap: 80px; margin-bottom: 60px; }
    /* Sol taraftaki kurumsal fotoğraf kutusu — MODERNİZASYON: dekoratif çerçeve */
    .about-img { flex: 1; position: relative; }
    .about-img::after { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; box-shadow: 8px 8px 0px #e31c24; border-radius: 16px; z-index: -1; }
    /* Fotoğrafın kendisi: 3:2 oran, yuvarlatılmış köşe, gölge */
    .about-img img { width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,0.2); display: block; }
    /* Sağ taraftaki metin alanı */
    .about-text { flex: 1; }
    /* Metin başlığı ("Yılların Verdiği Güven...") */
    .about-text h3 { font-size: 1.5rem; color: #2a2a2a; margin-bottom: 20px; }
    /* Tanıtım paragrafları */
    .about-text p { font-size: 1rem; color: #555; line-height: 1.8; margin-bottom: 20px; padding: 0 15px; }

    /* ---------- A.12 BİZE ULAŞIN BÖLÜMÜ — bilgi paneli + harita yan yana ---------- */
    .home-contact-modern { padding: 80px 0; background: #f4f6f7; }
    /* Masaüstünde panel ve harita yan yana, eşit yükseklikte */
    .home-contact-modern .container { display: flex; gap: 28px; align-items: stretch; }
    /* Beyaz iletişim kutusu */
    .contact-box-modern { background: #fff; color: #333; flex: 1; border-radius: 22px; overflow: hidden; box-shadow: 0px 0px 25px #a8a8a8;border: 1px solid #eee; }
    /* Kutu içi boşluklar */
    .contact-info-panel { padding: 45px 55px; }
    /* "Bize Ulaşın" başlığı: kırmızı */
    .contact-info-panel h2 { font-size: 2rem; margin-bottom: 28px; color: #ce0000; }
    /* Bilgi satırı: ikon + etiket + değer (adres, telefon, e-posta) */
    .info-row { display: flex; align-items: center; margin-bottom: 22px; }
    /* Satır başındaki yuvarlak kırmızı ikon */
    .info-row i { width: 50px; height: 50px; min-width: 50px; background: rgba(206, 0, 0, 0.10); color: #ce0000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 20px; }
    /* Küçük gri etiket (ADRES / TELEFON / E-POSTA) */
    .info-row div span { display: block; font-size: 0.8rem; color: #999; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; }
    /* Etiketin altındaki asıl bilgi metni */
    .info-row div p { margin: 0; font-size: 1.1rem; color: #333; font-weight: 500; }

    /* Aksiyon butonları ızgarası: Ara, WhatsApp, Mail, Harita, Instagram, Facebook (3 sütun) */
    .contact-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
    /* Ortak buton görünümü: yuvarlak hatlı, beyaz yazılı */
    .btn-action { display: flex; justify-content: center; align-items: center; gap: 9px; padding: 14px 20px; border-radius: 50px; font-weight: bold; transition: transform 0.25s ease, box-shadow 0.25s ease; color: #fff; border: none; cursor: pointer; font-size: 0.95rem; }
    .btn-action i { font-size: 1.1rem; }
    .btn-action:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,0.35); }
    /* Her butonun kendi marka rengi */
    .btn-phone     { background: linear-gradient(to bottom, #66D94E, #1FBE07); }                                                            /* Telefon: yeşil */
    .btn-whatsapp  { background: #25D366; }                                                                                                 /* WhatsApp yeşili */
    .btn-mail      { background: #ea4335; }                                                                                                 /* Gmail kırmızısı */
    .btn-maps      { background: linear-gradient(135deg, #4A89F3 25%, #55AF7B 45%, #F4B327 70%, #E44A3C 90%); }                             /* Google Maps renkleri */
    .btn-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }                 /* Instagram degrade */
    .btn-facebook  { background: #1877f2; }                                                                                                 /* Facebook mavisi */

    /* Sağdaki harita penceresi: beyaz çerçeveli, yuvarlatılmış */
    .contact-map-window { flex: 1; height: auto; min-height: 400px; border-radius: 22px; overflow: hidden; box-shadow: 0px 0px 25px #a8a8a8; border: 6px solid #fff; }
    .contact-map-window iframe { width: 100%; height: 100%; border: 0; display: block; }

    /* ---------- A.13 FOOTER — telif satırı ---------- */
    footer { text-align: center; padding: 9px; background: #e31c24; color: #f7f7f7; font-size: 0.8rem; margin-top: auto; }

    /* ---------- A.14 KAYDIRMA ANİMASYONLARI — öğeler ekrana girince yumuşakça belirir ---------- */
    /* Elle eklenen .scroll-reveal sınıfı için */
    .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease-out, transform 0.65s ease-out; }
    .scroll-reveal.visible { opacity: 1; transform: translateY(0); }
    /* script.js'in resim/başlık/paragraflara otomatik eklediği .sr-auto sınıfı için */
    .sr-auto { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
    .sr-auto.visible { opacity: 1; transform: translateY(0); }
}


































/* ################################################################## */
/* #####  BÖLÜM B — MOBİL (992px ve altı ekranlar)              ##### */
/* ################################################################## */
@media (max-width: 992px) {

    /* ---------- B.1 TEMEL SIFIRLAMA (RESET) — mobil için bağımsız kopya ---------- */
    * { margin: 0; padding: 0; box-sizing: border-box; }

    /* HTML kökü: yumuşak kaydırma, yatay taşma engeli */
    html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; background: #f7f7f7; }

    /* Gövde: Montserrat yazı tipi, açık gri zemin */
    body { font-family: 'Montserrat', sans-serif; background: #f7f7f7; color: #2a2a2a; overflow-x: hidden; width: 100%; position: relative; display: flex; flex-direction: column; min-height: 100vh; }

    /* Bağlantılar: alt çizgisiz */
    a { text-decoration: none; color: inherit; }

    /* İçerik kutusu */
    .container { max-width: 1200px; margin: auto; padding: 0 20px; }

    /* Çapa atlamalarında mobil menü yüksekliği kadar boşluk */
    section { scroll-margin-top: 70px; }

    /* ---------- B.2 YARDIMCI SINIFLAR (mobil kopya) ---------- */
    .color-white { color: #f7f7f7; }   /* Beyaz metin */
    .mb-10 { margin-bottom: 10px; }    /* 10px alt boşluk */
    .font-0-8 { font-size: 0.8rem; }   /* Küçük yazı (menü oku) */
    .ml-5 { margin-left: 5px; }        /* 5px sol boşluk */
    .brand-text { display: none; }     /* Eski marka yazısı — gizli */

    /* ---------- B.3 MOBİL SLIDER GÖRSELLERİ — dikey kadrajlı mobil versiyonlar (1–6) ---------- */
    .bg-slider-1 { background-image: url('img/slidermobile1.webp'); }
    .bg-slider-2 { background-image: url('img/slidermobile2.webp'); }
    .bg-slider-3 { background-image: url('img/slidermobile3.webp'); }
    .bg-slider-4 { background-image: url('img/slidermobile4.webp'); }
    .bg-slider-5 { background-image: url('img/slidermobile5.webp'); }
    .bg-slider-6 { background-image: url('img/slidermobile6.webp'); }

    /* ---------- B.4 HİZMET KARTI GÖRSELLERİ (mobil kopya) ---------- */
    .bg-hizmet-turizm    { background-image: url('img/index-hizmet-turizm.webp'); }
    .bg-hizmet-dugun     { background-image: url('img/index-hizmet-dugun.webp'); }
    /* DÜZELTME: hizmet-kahvalti.jpg mevcut olmadığı için header-breakfast.webp kullanıldı */
    .bg-hizmet-kahvalti  { background-image: url('img/index-hizmet-kahvalti.webp'); }
    .bg-hizmet-akaryakit { background-image: url('img/index-hizmet-akaryakit.webp'); }
    .bg-hizmet-insaat    { background-image: url('img/index-hizmet-insaat.webp'); }
    .bg-hizmet-seyahat   { background-image: url('img/index-hizmet-seyahat.webp'); }
    /* Yeni restoran sayfaları kart görselleri (geçici placeholder fotoğraflar) */
    .bg-hizmet-sahindagrestoran  { background-image: url('img/index-hizmet-sahindagrestoran.webp'); }
    .bg-hizmet-besyildizrestoran { background-image: url('img/index-hizmet-besyildizrestoran.webp'); }

    /* ---------- B.5 REFERANS LOGO GÖRSELLERİ (mobil kopya) ---------- */
    .bg-ref1  { background-image: url('img/ref1.webp'); }
    .bg-ref2  { background-image: url('img/ref2.webp'); }
    .bg-ref3  { background-image: url('img/ref3.webp'); }
    .bg-ref4  { background-image: url('img/ref4.webp'); }
    .bg-ref5  { background-image: url('img/ref5.webp'); }
    .bg-ref6  { background-image: url('img/ref6.webp'); }
    .bg-ref7  { background-image: url('img/ref7.webp'); }
    .bg-ref8  { background-image: url('img/ref8.webp'); }
    .bg-ref9  { background-image: url('img/ref9.webp'); }
    .bg-ref10 { background-image: url('img/ref10.webp'); }
    .bg-ref11 { background-image: url('img/ref11.webp'); }
    .bg-ref12 { background-image: url('img/ref12.webp'); }
    .bg-ref13 { background-image: url('img/ref13.webp'); }
    .bg-ref14 { background-image: url('img/ref14.webp'); }
    .bg-ref15 { background-image: url('img/ref15.webp'); }
    .bg-ref16 { background-image: url('img/ref16.webp'); }

    /* ---------- B.6 MOBİL NAVBAR — küçük yükseklik + hamburger menü ---------- */
    /* Menü çubuğu: şeffaf başlar, kaydırınca beyaz olur */
    .navbar-home { background: transparent; border: none; padding: 5px 0; position: fixed; width: 100%; top: 0; z-index: 1000; transition: background 0.4s ease, padding 0.4s ease, box-shadow 0.4s ease; }
    .navbar-home.scrolled { background: #f7f7f7; padding: 0; box-shadow: 0 2px 15px rgba(0,0,0,0.1); }
    /* Mobil iç düzen: 70px yükseklik, dar kenar boşluğu */
    .navbar-home .container { max-width: 100%; padding: 0 20px; height: 70px; display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; }

    /* Logo */
    .static-logo { display: block; width: 170px; margin-right: auto; }
    .static-logo img { width: 100%; height: auto; display: block; }

    /* Sağdaki mobil buton grubu: telefon ikonu + hamburger */
    .nav-right-mobile { display: flex; align-items: center; }
    /* Hızlı arama butonu (telefon ikonu): beyaz, kaydırınca koyu */
    .mobile-call-btn { display: flex; align-items: center; justify-content: center; color: #f7f7f7; font-size: 20px; margin-right: 15px; transition: color 0.3s; }
    .navbar-home.scrolled .mobile-call-btn { color: #2a2a2a; }

    /* Hamburger ikonu: üç çizgi; menü açıkken X şekline döner */
    .hamburger-menu { display: block; cursor: pointer; z-index: 1200; position: relative; }
    .hamburger-line { width: 30px; height: 3px; background: #f7f7f7; margin: 5px; transition: 0.4s; border-radius: 2px; }
    .navbar-home.scrolled .hamburger-line { background: #2a2a2a; }
    /* Açık durumda (JS .toggle ekler): çizgiler kırmızı X olur */
    .hamburger-menu.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); background: #e31c24; }
    .hamburger-menu.toggle .line2 { opacity: 0; }
    .hamburger-menu.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); background: #e31c24; }

    /* Yan menü paneli: sağdan kayarak açılır, beyaz zemin */
    .nav-links { position: fixed; top: 0; right: -100%; width: 280px; height: 100vh; background: #f7f7f7; list-style: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; transition: right 0.4s ease-in-out; z-index: 1100; padding: 80px 20px 40px 20px; overflow-y: auto; gap: 15px; }
    /* Menü açık hali (JS .active ekler): panel görünür, sol gölge */
    .nav-links.active { right: 0; box-shadow: -5px 0 20px rgba(0,0,0,0.2); }
    /* Panel başlığı: kırmızı "MENÜ" yazısı */
    .mobile-menu-header { display: block; font-size: 20px; font-weight: 900; color: #e31c24; margin-bottom: 10px; }
    /* Menü satırları: tam genişlik */
    .nav-links li { width: 100%; text-align: left; padding: 5px 0; }
    /* Menü linkleri: koyu renk, iki yana yaslanmış (ok ikonu sağda kalır) */
    .nav-links > li > a { color: #2a2a2a; text-shadow: none; font-size: 15px; font-weight: bold; text-transform: uppercase; width: 100%; display: flex; justify-content: space-between; transition: 0.3s; }
    /* Dokunma/hover: kırmızı vurgu */
    .nav-links > li > a:hover,
    .nav-links > li > a:focus,
    .nav-links > li > a:active { color: #e31c24; transform: none; }

    /* Mobil açılır alt menü: panel içinde aşağı doğru açılır (JS .active ekler) */
    .dropdown-menu { position: relative; left: 0; top: 0; transform: none; background: #f7f7f7; width: 100%; display: none; list-style: none; opacity: 1; visibility: visible; border-top: none; padding: 5px 10px; margin-top: 5px; box-shadow: none; border-radius: 0; }
    .has-dropdown.active .dropdown-menu { display: block; }
    /* Alt menü linkleri: gri tonlu, küçük */
    .dropdown-menu li a { display: block; padding: 8px 10px; font-size: 14px; color: #555; font-weight: 600; transition: 0.2s; white-space: nowrap; }
    .dropdown-menu li a:hover { color: #e31c24; }

    /* ---------- B.7 MOBİL HERO SLIDER — 9:16 dikey oranlı sabit perde ---------- */
    /* Hero: ekrana sabit, telefon ekranına uygun 16:9 ters oranlı yükseklik */
    .home-hero { position: fixed; top: 0; left: 0; width: 100%; height: calc(100vw * 16 / 9); overflow: hidden; color: #f7f7f7; z-index: 0; }
    .slider-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
    /* Tek slayt ve karartma katmanı */
    .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; z-index: 1; transition: opacity 1s ease-in-out; }
    .slide.active { opacity: 1; z-index: 2; }
    .slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; }

    /* Slayt yazı bloğu: ortalanmış, kenarlardan 20px boşluklu */
    .slide-content { position: relative; top: 60%; transform: translateY(-50%); z-index: 10; text-align: center; opacity: 0; transition: all 0.8s ease-out; width: 100%; padding: 0 20px; margin: auto; }
    .slide.active .slide-content { opacity: 1; transform: translateY(-50%); }
    /* Mobil slayt başlığı: 26px */
    .slide-content h2 { font-size: 28px; margin-bottom: 10px; line-height: 1.3; text-transform: uppercase; font-weight: 900; color: #f7f7f7; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
    /* Başlıktaki vurgulu kelime: kırmızı, aynı boyut */
    .slide-content h2 span {text-shadow: 0 0px 20px rgb(0, 0, 0); font-size: 28px; color: #e31c24; }
    /* Slayt açıklaması: 14px */
    .slide-content p { font-size: 14px; line-height: 1.6; margin-bottom: 25px; color: #f7f7f7; font-weight: 700; text-shadow: 0 1px 5px rgba(0,0,0,0.5); }

    /* Slayt butonu */
    .btn-hero { display: inline-block; background: #e31c24; color: #f7f7f7; padding: 12px 35px; border-radius: 50px; font-weight: bold; font-size: 14px; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border: none; cursor: pointer; position: relative; z-index: 2; }
    .btn-hero:hover { background: #c0151c; }

    /* MODERNİZASYON (mobil): gezinme okları artık mobilde de görünür —
       küçük buzlu cam yuvarlak butonlar; "aşağı kaydır" göstergesi gizli kalır */
    .slider-btn {opacity: 0 ; position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; color: rgba(255, 255, 255, 0.85); font-size: 15px; cursor: pointer; z-index: 20; padding: 0; transition: all 0.3s ease; }
    .prev-btn { left: 12px; }
    .next-btn { right: 12px; }
    .slider-btn:hover { background: rgba(227, 28, 36, 0.85); border-color: rgba(227, 28, 36, 0.9); color: #fff; transform: translateY(-50%) scale(1.08); box-shadow: 0 10px 30px rgba(227, 28, 36, 0.35); }
    .scroll-indicator { display: none; }

    /* Slider nokta göstergeleri (mobil): altta ortada; 6 nokta da görünür */
    .slider-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 20; }
    .slider-dot { width: 8px; height: 8px; border-radius: 50px; border: none; background: rgba(255, 255, 255, 0.4); cursor: pointer; padding: 0; transition: all 0.35s ease; }
    .slider-dot.active { width: 24px; background: #e31c24; }

    /* ---------- B.8 PERDE (CURTAIN) DÜZENİ — mobil kopya ---------- */
    body.has-hero-reveal { background: transparent; }
    body.has-hero-reveal section,
    body.has-hero-reveal footer { position: relative; z-index: 1; }
    /* İlk içerik bölümü mobil hero yüksekliği kadar aşağıdan başlar */
    /* DÜZELTME (mobil): başlık perde kenarına yapışıyordu; üst iç boşluk eklendi */
    .companies-section.over-hero { margin-top: calc(100vw * 16 / 9); padding-top: 25px; background: #f7f7f7; box-shadow: 0 -14px 30px rgba(0,0,0,0.18); }

    /* ---------- B.9 HİZMETLERİMİZ (mobil) — 2 SÜTUNLU kart ızgarası ---------- */
    /* MODERNİZASYON (mobil): kartlar artık tek sütun yerine 2'li ızgarada;
       kart boyutları iki sütuna sığacak şekilde küçültüldü */
    .companies-section { padding: 30px 0; }
    /* Bölüm başlığı: mobilde 22px */
    .companies-section .section-title { text-align: center;margin-top:15px; margin-bottom: 15px; font-size: 20px; color: #2a2a2a; font-weight: 700; }
    /* Kartlar 2 sütunlu ızgarada */
    .cards-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; width: 100%; }
    /* Tek kart: yarım genişlik, yumuşak köşeler */
    .company-card {height:190px; min-width: 0; width: 100%; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0px 0px 10px #b8b8b8; border: 4px solid rgba(0,0,0,0.04); display: flex; flex-direction: column; opacity: 0; transform: translateY(30px); transition: all 0.6s ease-out; }
    .company-card.visible { opacity: 1; transform: translateY(0); }
    .company-card:hover { transform: translateY(-10px); box-shadow: 0px 6px 10px #e31c24; }
    /* Kart görseli: masaüstüyle aynı 4:3 oran */
    .card-img { aspect-ratio: 16 / 9; background-size: cover; background-position: center; transition: 0.4s; }
    /* Kart bilgi alanı: iki sütuna uygun sıkıştırılmış iç boşluk */
    .card-info { padding: 14px 10px; text-align: center; background: #fff; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
    /* Kart başlığı: 14px kırmızı */
    .card-info h3 { margin:auto; color: #e31c24; font-size: 14px; font-weight: 700; }
    /* Kart açıklaması: 11.5px */
    .company-card p { font-size: 0px; line-height: 1.45; }
    /* "İncele →" yazısı: 12px */
    .link-text { font-weight: bold; color: #2a2a2a;margin-top:5px; margin-bottom: 0px; font-size: 12px; }

    /* ---------- B.10 REFERANSLAR (mobil) — otomatik kayan 3 sıralı logo şeridi ---------- */
    .references-section { padding-top: 40px; padding-bottom: 40px; background: #f7f7f7; }
    /* Başlık */
    .references-section .section-title { text-align: center;margin-top:20px; margin-bottom: 15px; font-size: 20px; color: #2a2a2a; font-weight: 700; }
    /* Masaüstü ızgarası mobilde tamamen gizli */
    .desktop-only-grid { display: none; }
    /* Kayan şerit kapsayıcısı: 3 satır alt alta */
    .mobile-references-wrapper { display: flex; flex-direction: column; gap: 12px; width: 100%; overflow: hidden; }
    /* Tek kayan satır: taşan kısmı gizler */
    .scroll-row { width: 100%; overflow: hidden; }
    /* Kayan iç şerit: logolar yan yana, animasyonla kayar */
    .scroll-track { display: flex; gap: 15px; width: max-content; }
    /* Tek logo kutusu: 90x90, ince çerçeveli */
    .ref-mobile-item { width: 110px; height: 110px; background: #f7f7f7; border-radius: 8px; border: 0px solid #eef; display: flex; align-items: center; justify-content: center; padding: 8px; }
    /* Logo görseli: kutuya sığdırılır */
    .rm-img { width: 100%; height: 100%; background-size: contain; background-position: center; background-repeat: no-repeat; }
    /* Sola ve sağa kayma animasyonları (25 saniyede bir tur) */
    .scroll-left  { animation: indexScrollLeft 25s linear infinite; }
    .scroll-right { animation: indexScrollRight 25s linear infinite; }
    @keyframes indexScrollLeft  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
    @keyframes indexScrollRight { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }

    /* ---------- B.11 HAKKIMIZDA (mobil) — görsel üstte, metin altta ---------- */
    .about-section { padding: 40px 0; background: #f7f7f7; }
    /* Başlık */
    .about-section .section-title { text-align: center; margin-top:5px; margin-bottom: 15px; font-size: 20px; color: #2a2a2a; font-weight: 700; }
    /* Satır dikey dizilime döner */
    .about-row { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-bottom: 0; }
    .about-img { width: 93%; position: relative; }
    .about-img::after { content: ''; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; box-shadow: 6px 6px 0px #e31c24; border-radius: 14px; z-index: -1; }
    /* Fotoğraf: tam genişlik, 3:2 oran */
    .about-img img { width: 100%; height:auto; aspect-ratio: 16/10 !important; object-fit:cover; border-radius: 14px; box-shadow: 0 18px 45px rgba(0,0,0,0.2); display: block; }
    .about-text {margin:20px; width: 100%; }
    /* Metin başlığı: 22px */
    .about-text h3 { font-size: 18px; color: #2a2a2a; margin-bottom: 12px; font-weight: 700; padding: 0 15px;}
    /* Paragraflar: 14px */
    .about-text p { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 20px; padding: 0 20px; }

    /* ---------- B.12 BİZE ULAŞIN (mobil) — panel üstte, harita altta ---------- */
    .home-contact-modern { padding: 30px 0; background: #f4f6f7; }
    /* Beyaz iletişim kutusu: tam genişlik */
    .contact-box-modern { background: #fff; color: #333; width: 100%; margin: 0 auto; border-radius: 22px; overflow: hidden; box-shadow: 0px 0px 25px #a8a8a8; border: 1px solid #eee; }
    /* Kutu içi boşluk: mobilde daraltıldı */
    .contact-info-panel { padding: 30px 20px; }
    /* Başlık: 22px kırmızı */
    .contact-info-panel h2 { font-size: 22px; margin-bottom: 15px; color: #ce0000; font-weight: 700; }
    /* Bilgi satırı (adres/telefon/e-posta) */
    .info-row { display: flex; align-items: center; margin-bottom: 22px; }
    /* Yuvarlak ikon */
    .info-row i { width: 50px; height: 50px; min-width: 50px; background: rgba(206, 0, 0, 0.10); color: #ce0000; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 20px; }
    /* Etiket yazısı */
    .info-row div span { display: block; font-size: 0.8rem; color: #999; text-transform: uppercase; font-weight: bold; letter-spacing: 0.5px; }
    /* Bilgi metni: 14px */
    .info-row div p { margin: 0; font-size: 14px; line-height: 1.6; color: #333; font-weight: 500; }

    /* Aksiyon butonları: mobilde 2 sütun */
    .contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 32px; }
    /* Butonlar: tam genişlik, 13px yazı */
    .btn-action { display: flex; justify-content: center; align-items: center; gap: 9px; width: 100%; padding: 12px 5px; border-radius: 25px; font-weight: bold; transition: transform 0.25s ease, box-shadow 0.25s ease; color: #fff; border: none; cursor: pointer; font-size: 13px; }
    .btn-action i { font-size: 1.1rem; }
    /* Buton marka renkleri (mobil kopya) */
    .btn-phone     { background: linear-gradient(to bottom, #66D94E, #1FBE07); }
    .btn-whatsapp  { background: #25D366; }
    .btn-mail      { background: #ea4335; }
    .btn-maps      { background: linear-gradient(135deg, #4A89F3 25%, #55AF7B 45%, #F4B327 70%, #E44A3C 90%); }
    .btn-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
    .btn-facebook  { background: #1877f2; }

    /* Harita: kutunun altında 250px yükseklikte */
    .contact-map-window { width: 100%; margin: 18px auto 0; height: 250px; border-radius: 22px; overflow: hidden; box-shadow: 0px 0px 25px #a8a8a8; border: 6px solid #fff; }
    .contact-map-window iframe { width: 100%; height: 100%; border: 0; display: block; }

    /* ---------- B.13 FOOTER (mobil) ---------- */
    footer { text-align: center; padding: 10px; background: #e31c24; color: #f7f7f7; font-size: 0.8rem; margin-top: auto; }

    /* ---------- B.14 KAYDIRMA ANİMASYONLARI (mobil kopya) ---------- */
    .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.65s ease-out, transform 0.65s ease-out; }
    .scroll-reveal.visible { opacity: 1; transform: translateY(0); }
    .sr-auto { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
    .sr-auto.visible { opacity: 1; transform: translateY(0); }
}