/* Google Fonts: Montserrat */ /* içine eklenmeli: */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Montserrat", sans-serif; background-color: #f0f9f4; color: #2a4d3f; overflow-x: hidden; margin-top: 100px; /* topbar (40) + navbar (60) */ } /* =================== TOPBAR =================== */ .topbar { background-color: #2a4d3f; color: #ffffff; font-size: 0.85rem; padding: 8px 0; height: 40px; width: 100%; position: fixed; top: 0; left: 0; z-index: 1100; display: flex; align-items: center; } .topbar .container { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 0 40px; flex-wrap: nowrap; box-sizing: border-box; } .topbar .contact-info { display: flex; flex-wrap: nowrap; gap: 15px; overflow: hidden; text-overflow: ellipsis; } .topbar .contact-info span { margin-right: 15px; cursor: default; } .topbar .contact-info span:last-child { transition: filter 0.3s ease, color 0.3s ease; cursor: pointer; } .topbar .contact-info span:last-child:hover { filter: none; color: #a5d6a7; } .topbar .social-icons { display: flex; gap: 10px; flex-wrap: nowrap; } .topbar .social-icons a { display: inline-block; transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease; } .topbar .social-icons a:hover { transform: scale(1.2); opacity: 1; filter: none; color: #a5d6a7; } .topbar .social-icons img { width: 18px; height: 18px; vertical-align: middle; filter: brightness(0) invert(1); } /* =================== NAVBAR =================== */ .navbar { background-color: #ffffff; color: #2a4d3f; height: 60px; /* SABİT */ width: 100%; position: fixed; top: 40px; left: 0; z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .navbar .container { max-width: 1200px; /* laptop genişliği - TÜM CİHAZLARDA KORUNUR */ margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; height: 100%; } /* Logo — tüm cihazlarda aynı boyut */ .logo img { max-height: 64px; /* navbar 60px, logo güvenli 64px ile contain */ width: auto; height: auto; object-fit: contain; display: block; } .nav-links { display: flex; gap: 20px; } /* ------- NAV-LINKS YEŞİL ------- */ .nav-links a { text-decoration: none; color: #247053 !important; font-weight: 500; font-family: "Montserrat", sans-serif; transition: color 0.3s ease; cursor: pointer; display: inline-block; padding: 10px 15px; border-bottom: none; position: relative; z-index: 10; } .nav-links a:hover { color: #a5d6a7 !important; } .nav-links a.active { color: #247053 !important; border-bottom: none !important; } .nav-links a.active:hover { color: #a5d6a7 !important; } .hamburger { display: none; font-size: 26px; cursor: pointer; } /* =================== ANA BÖLÜMLER =================== */ main section { padding: 40px 20px; text-align: center; min-height: 80vh; display: none; border-bottom: none; } main section.active { display: block; } /* ========== SEKME İÇİ BAŞLIKLAR YEŞİL ========== */ .section-title, .contact-title { color: #247053 !important; } .section-title { font-size: 2rem; margin-bottom: 30px; opacity: 0; transform: translateY(-30px); animation: slideDown 1s ease-out forwards; } .about-content { max-width: 900px; margin: 0 auto; text-align: left; font-size: 1.05rem; line-height: 1.8; color: #2a4d3f; padding: 0 20px; opacity: 0; transform: translateY(-30px); animation: slideDown 1s ease-out forwards; } .about-content p { margin-bottom: 20px; } .about-content strong { color: #2a4d3f; } /* ============= ANASAYFA VURGULAMA ============= */ .home-content em, .highlight { color: #0e2e22; font-style: normal; font-weight: bold; background: none; border-radius: 0; padding: 0; font-size: 1.09em; letter-spacing: 0.6px; display: inline; box-shadow: none; transition: none; } .highlight:hover { background: none; box-shadow: none; } /* =================== PROJELER MADDE İŞARETLERİNİ KALDIR =================== */ #projeler ul { list-style: none; padding-left: 0; } /* =================== ANASAYFA SLIDER =================== */ .home-slider-section { padding: 0; margin: 0; background: #f0f9f4; } .home-slider { position: relative; width: 100vw; min-width: 100vw; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; max-width: 100vw; aspect-ratio: 16/6; min-height: 230px; max-height: 520px; height: 38vw; overflow: hidden; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); background: #d6e3db; } /* Slider yazıları */ .slide-caption.custom-caption { display: flex; align-items: flex-end; justify-content: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; text-align: center; background: none !important; padding: 0 6vw 5vw 6vw; } .slide-caption.custom-caption p { width: 100%; max-width: 800px; margin: 0 auto; color: #fff; font-size: 1.38rem; font-weight: 500; line-height: 1.5; text-shadow: 0 2px 16px #000a, 0 1px 6px #0008; letter-spacing: 0.01em; background: none !important; border-radius: 0 !important; padding: 0; box-sizing: border-box; display: inline-block; border: none; } /* Mobil slider optimizasyonu */ @media (max-width: 700px) { .home-slider { min-height: 105px; max-height: 200px; aspect-ratio: 16/11; height: 54vw; } .slide-caption h2 { font-size: 1.2rem; } .slide-caption p, .slide-caption.custom-caption p { font-size: 1rem; max-width: 96vw; padding: 0; } .slide-caption { bottom: 10%; padding: 0 6vw; } .slide-caption.custom-caption { padding: 0 2vw 6vw 2vw; } } /* Slide görünürlük */ .home-slide { position: absolute; top: 0; left: 0; width: 105%; height: 100%; opacity: 0; transition: opacity 0.7s cubic-bezier(0.66, 0.08, 0.41, 1.04); z-index: 1; display: flex; align-items: center; justify-content: center; } .home-slide.active { opacity: 1; z-index: 2; } .home-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; filter: brightness(0.7) contrast(1.03); } .slide-caption { position: absolute; left: 0; right: 0; bottom: 16%; text-align: center; color: #fff; z-index: 3; padding: 0 30px; } .slide-caption h2 { font-size: 2.5rem; font-weight: 700; text-shadow: 0 4px 20px #0007; margin-bottom: 12px; letter-spacing: 1px; } .slide-caption p { font-size: 1.25rem; font-weight: 400; text-shadow: 0 2px 12px #0005; } /* =================== İLETİŞİM =================== */ #iletisim { padding: 60px 20px; background-color: #f0f9f4; text-align: center; } .contact-title { font-size: 2rem; margin-bottom: 40px; opacity: 0; transform: translateY(-30px); animation: slideDown 1s ease-out forwards; } .contact-title { color: #247053 !important; } .contact-cards { display: flex; justify-content: center; gap: 40px; flex-wrap: wrap; } .contact-card { background-color: #ffffff; border: 1px solid #d0e4db; border-radius: 16px; padding: 30px 40px; width: 250px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); opacity: 0; transform: translateY(-30px); animation: slideDown 1s ease-out forwards; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; } .contact-card:hover { transform: translateY(-10px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); background-color: #e8f5e9; } .contact-card:hover h3, .contact-card:hover p { color: #2a4d3f; } .contact-card h3 { margin-bottom: 10px; color: #2a4d3f; } .contact-card p { color: #4a6f5a; font-size: 1rem; } /* =================== FOOTER =================== */ .footer { background-color: #ffffff; color: #2a4d3f; font-family: "Montserrat", sans-serif; font-size: 0.9rem; padding: 20px 0; width: 100%; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; bottom: 0; margin-top: auto; box-shadow: none; } /* =================== RESPONSIVE =================== */ @media (max-width: 1024px) { .nav-links { gap: 15px; } } /* Mobil: navbar yüksekliği sabit, menü konumu ayarlı */ @media (max-width: 768px) { body { margin-top: 100px; /* 40 + 60 */ } .navbar { height: 60px; /* sabit */ padding: 0; /* taşmayı önle */ } .nav-links { position: absolute; top: 60px; /* sabit navbar yüksekliği kadar aşağıda */ left: 0; width: 100%; background-color: #ffffff; flex-direction: column; display: none; padding: 20px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); } .nav-links.active { display: flex; } .hamburger { display: block; } .topbar .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } .topbar .contact-info { justify-content: center; text-align: center; } .topbar .social-icons { justify-content: flex-end; } .footer { font-size: 0.8rem; padding: 15px 10px; } } @media (max-width: 480px) { .nav-links a { font-size: 0.95rem; padding: 6px 0; } .topbar .social-icons { gap: 8px; } } /* =================== ANİMASYON =================== */ @keyframes slideDown { to { opacity: 1; transform: translateY(0); } } .animate-up { opacity: 0; transform: translateY(-30px); animation: slideDown 1s ease-out forwards; } main section.animate { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /* =================== GALERİ FLEX & LIGHTBOX =================== */ .gallery-flex { display: flex; flex-direction: column; gap: 24px; align-items: center; justify-content: center; width: 100%; margin: 0 auto; padding: 16px 0 0 0; } .gallery-row { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; width: 100%; max-width: 1350px; } .gallery-item { width: 270px; height: 150px; border-radius: 16px; overflow: hidden; background: #e4efe9; box-shadow: none; transition: box-shadow 0.18s, transform 0.15s; cursor: pointer; display: flex; align-items: center; justify-content: center; aspect-ratio: 16/9; position: relative; margin: 0; padding: 0; } .gallery-item:hover, .gallery-item:focus { box-shadow: 0 4px 24px 0 rgba(42, 77, 63, 0.14), 0 1px 6px rgba(42, 77, 63, 0.1); transform: scale(1.04); z-index: 2; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: none; border-radius: 16px; background: #dde8e1; pointer-events: none; margin: 0; padding: 0; } /* Lightbox modal */ .gallery-lightbox { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh; background: rgba(34, 42, 36, 0.88); align-items: center; justify-content: center; overflow: auto; animation: fadeInLightbox 0.25s; } @keyframes fadeInLightbox { from { opacity: 0; } to { opacity: 1; } } .gallery-lightbox.active { display: flex; } .gallery-lightbox .lightbox-img { max-width: 92vw; max-height: 80vh; border-radius: 16px; box-shadow: 0 12px 36px 0 rgba(10, 40, 18, 0.28), 0 2px 8px rgba(42, 77, 63, 0.1); background: #fff; object-fit: contain; object-position: center; margin: 0 auto; } .close-lightbox { position: absolute; top: 32px; right: 48px; font-size: 3.2rem; color: #fff; font-weight: 900; cursor: pointer; z-index: 2; user-select: none; transition: color 0.18s; } .close-lightbox:hover { color: #78bb99; } /* Lightbox okları */ .lightbox-arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 3rem; color: #fff; background: rgba(42, 77, 63, 0.16); border-radius: 50%; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; user-select: none; transition: background 0.19s, color 0.16s; } .lightbox-arrow.left { left: 28px; } .lightbox-arrow.right { right: 28px; } .lightbox-arrow:hover { background: #a5d6a7; color: #1b5e20; } .home-content { max-width: 900px; margin: 48px auto 0 auto; padding: 40px 24px 10px 24px; background: none; font-size: 1.08rem; color: #2a4d3f; text-align: left; line-height: 1.8; border-radius: 0; box-shadow: none; } .home-content h2 { color: #247053; margin-bottom: 18px; text-align: center; } .home-content p { margin-bottom: 18px; text-align: left; } /* --- DİL SEÇİCİ --- */ .language-selector { position: relative; display: inline-block; margin-left: 16px; z-index: 1300; } .lang-btn { background: transparent; border: none; font-size: 16px; font-family: "Montserrat", Arial, sans-serif; color: #247053; padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 4px; letter-spacing: 0.03em; transition: background 0.18s; font-weight: 500; } .lang-btn:focus, .lang-btn:hover { background: #e6f4ef; border-radius: 8px; outline: none; } .lang-arrow { font-size: 13px; margin-left: 4px; } .lang-dropdown { display: none; position: absolute; top: 100%; right: 0; min-width: 80px; background: #fff; border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); list-style: none; padding: 0; margin: 0; z-index: 1400; } .language-selector:hover .lang-dropdown, .language-selector:focus-within .lang-dropdown { display: block; } .lang-dropdown li { border-bottom: 1px solid #f1f1f1; } .lang-dropdown li:last-child { border-bottom: none; } .lang-dropdown a { display: block; padding: 11px 18px; color: #247053; font-family: "Montserrat", Arial, sans-serif; font-size: 15px; text-decoration: none; font-weight: 500; letter-spacing: 0.02em; transition: background 0.18s, color 0.18s; } .lang-dropdown a:hover, .lang-dropdown a:focus { background: #e6f4ef; color: #17523a; border-radius: 8px; } /* Responsive dil seçici */ @media (max-width: 600px) { .lang-btn { font-size: 14px; padding: 6px 9px; } .lang-dropdown a { padding: 8px 12px; font-size: 14px; } } /* Hamburger içinde dil seçici */ @media (max-width: 768px) { .nav-links { flex-direction: column; align-items: flex-start; } .nav-links .language-selector { margin-top: 10px; width: 100%; } .nav-links .language-selector .lang-btn { width: 100%; text-align: left; padding: 10px; } .nav-links .language-selector .lang-dropdown { position: static; box-shadow: none; background: transparent; margin-top: 6px; } .nav-links .language-selector .lang-dropdown a { padding: 8px 10px; display: block; } } /* =================== İLETİŞİM FORMU =================== */ .contact-form { max-width: 860px; margin: 24px auto 0 auto; padding: 24px; background: #ffffff; border: 1px solid #e6eeea; border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); display: grid; grid-template-columns: 1fr; gap: 20px; } .contact-form .form-group { text-align: left; } .contact-form label { display: block; margin-bottom: 8px; font-weight: 500; color: #247053; font-size: 14px; } .contact-form input, .contact-form textarea { width: 100%; height: 52px; padding: 12px 14px; border: 1px solid #dfe7e3; border-radius: 6px; background: #fff; font-size: 15px; font-family: "Montserrat", sans-serif; outline: none; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; } .contact-form textarea { height: auto; min-height: 180px; resize: vertical; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #a9b6b0; } .contact-form input:focus, .contact-form textarea:focus { border-color: #247053; box-shadow: 0 0 0 2px rgba(36, 112, 83, 0.12); background-color: #fff; } .btn-submit { background-color: #ea6a58; color: #fff; padding: 13px 28px; font-size: 16px; font-weight: 600; border: 0; border-radius: 999px; cursor: pointer; transition: background-color 0.2s, transform 0.06s; width: 180px; justify-self: center; } .btn-submit:hover { background-color: #dd5c49; } .btn-submit:active { transform: translateY(1px); } @media (min-width: 768px) { .contact-form { grid-template-columns: 1fr 1fr; } .contact-form .form-group:nth-child(1), .contact-form .form-group:nth-child(2) { grid-column: auto; } .contact-form .form-group:nth-child(3) { grid-column: 1 / -1; } .contact-form .btn-submit { grid-column: 1 / -1; } } @media (max-width: 600px) { .contact-form { padding: 18px; } .btn-submit { width: 160px; font-size: 15px; padding: 12px 22px; } } /* WhatsApp Sabit Buton */ .whatsapp-float { position: fixed; bottom: 20px; right: 20px; width: 58px; height: 58px; border-radius: 50%; background-color: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); z-index: 9999; transition: transform 0.2s ease, box-shadow 0.2s ease; } .whatsapp-float i { font-size: 28px; line-height: 1; } .whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25); } @media (max-width: 480px) { .whatsapp-float { width: 50px; height: 50px; bottom: 15px; right: 15px; } .whatsapp-float i { font-size: 24px; } } /* ============ NAVBAR & LOGO RESPONSIVE BOYUTLAR ============ */ :root { --nav-h: 60px; /* varsayılan navbar yüksekliği */ --logo-max: 64px; /* varsayılan logo max yükseklik */ } /* Navbar ve body offset'i dinamikleştir */ .navbar { height: var(--nav-h); } body { margin-top: calc(40px + var(--nav-h)); } /* topbar(40) + navbar */ /* Logo görseli, mevcutla aynı seçici: .logo img */ .logo img { max-height: var(--logo-max); } /* Orta-büyük ekran: nav ve logo biraz büyüsün */ @media (min-width: 992px) { :root { --nav-h: 80px; --logo-max: 88px; } } /* Büyük ekran: daha ferah görünüm */ @media (min-width: 1280px) { :root { --nav-h: 96px; --logo-max: 100px; } } /* ============ GALERİ: 3 → 2 → 1 SÜTUN RESPONSIVE GRID ============ */ /* 1) Tüm gallery öğelerini tek grid sistemi içinde yöneteceğiz */ .galeri-section .gallery-flex { display: grid; grid-template-columns: 1fr; /* mobil varsayılan: 1 sütun */ gap: 16px; align-items: stretch; justify-items: stretch; } /* 2) Var olan .gallery-row sarmalayıcılarını HTML'yi bozmadan "şeffaf" yap */ .galeri-section .gallery-row { display: contents; /* çocukları üst grid'e katılır */ } /* 3) Öğelerin bloklaşması ve oranlı görünmesi */ .galeri-section .gallery-item { width: 100%; /* 16:9 veya istersen 4:3/1:1; görsel tipine göre değiştirebilirsin */ aspect-ratio: 16 / 9; height: auto; /* artık sabit yükseklik yok */ border-radius: 16px; overflow: hidden; background: #e4efe9; } /* 4) Görseli kutuya güzelce sığdır */ .galeri-section .gallery-item img { width: 100%; height: 100%; object-fit: cover; /* taşma yerine kırpma, uniform görünüm */ object-position: center; display: block; } /* 5) Tablet: 3 sütuna düşelim (isteğin doğrultusunda) */ @media (min-width: 768px) { .galeri-section .gallery-flex { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* 6) Küçülünce 2 ve sonra 1 olsun demiştin: - 768px altı otomatik 1 sütun (yukarıda) - Ara bir eşik: 600–767px arası → 2 sütun iyi durur */ @media (min-width: 600px) and (max-width: 767.98px) { .galeri-section .gallery-flex { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 7) İstersen büyük masaüstünde 4 sütunla daha dolu görünüm: Bu opsiyonel. Açmak istersen aşağıdaki bloğu aktif bırak. */ @media (min-width: 1280px) { .galeri-section .gallery-flex { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* === SLIDER YAZILAR MOBİL TAŞMA DÜZELTME === */ /* Genel: metin kutusu her zaman ekrana sığsın */ .slide-caption.custom-caption p { max-width: 92vw; /* ekranın %92’sini geçmez */ word-wrap: break-word; overflow-wrap: anywhere; /* uzun kelimeleri kır */ line-height: 1.4; } /* Telefon boyutları */ @media (max-width: 600px) { .slide-caption.custom-caption p { font-size: clamp(0.85rem, 3.5vw, 1rem); /* ekran genişliğine göre küçülür */ padding: 0 4vw; /* kenarlardan boşluk */ } } /* Çok küçük ekran (örneğin ≤380px) */ @media (max-width: 380px) { .slide-caption.custom-caption p { font-size: clamp(0.75rem, 3.8vw, 0.9rem); line-height: 1.35; } } /* === Responsive fix: topbar contact info on small screens === */ @media (max-width: 576px) { .topbar { height: auto; padding: 6px 0; } .topbar .container { flex-direction: column; align-items: center; gap: 6px; padding: 0 12px; } .contact-info { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .contact-info .phone, .contact-info .email, .contact-info span, .contact-info a { white-space: nowrap; } .social-icons { gap: 8px; } } /* =================== KONUM / HARİTA (fix) =================== */ .map-wrap { max-width: 1000px; margin: 28px auto 0 auto; padding: 0 20px; } .map-title { color: #247053; font-size: 1.4rem; margin-bottom: 14px; text-align: center; } .map-container { position: relative; /* <-- eklendi */ width: 100%; background: #ffffff; border: 1px solid #d0e4db; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06); } /* 16:9 oranı: yüksekliği container belirler */ .map-container::before { content: ""; display: block; width: 100%; padding-top: 56.25%; /* 16:9 */ } /* iframe’i boşluk bırakmadan container’a yapıştır */ .map-iframe { position: absolute; /* <-- değişti */ inset: 0; /* top:0; right:0; bottom:0; left:0; */ width: 100%; height: 100%; border: 0; } /* İstersen mobilde biraz daha uzun görünmesi için: */ @media (max-width: 600px) { .map-container::before { padding-top: 62.5%; } /* 16:10 gibi, opsiyonel */ }