/* ===== Poppins için metrik-uyumlu yedek font ===== Poppins (display:swap) yüklenene kadar gösterilen yedek, Poppins ile AYNI yeri kaplar -> font swap'inde layout kaymaz (CLS=0). Bu sayede ilk-tıklamada bölüm kaydırması "üstten boşluk" bırakmaz. Değerler Poppins/Arial metriklerinden. */ @font-face { font-family: 'Poppins Fallback'; src: local('Arial'); ascent-override: 93.81%; descent-override: 31.27%; line-gap-override: 8.93%; size-adjust: 111.96%; } :root { --tg-body-font-family: 'Poppins', 'Poppins Fallback', sans-serif; --tg-heading-font-family: 'Poppins', 'Poppins Fallback', sans-serif; } .menu-nav .logo{ margin-top: 10px; } /* ===== Header: arama (telefon) + WhatsApp + sticky hide/show ===== */ /* Arama: yuvarlak ikon + numara, solunda ayraç */ .header-action ul li.header-wa-ic{ padding-left: 26px; border-left: 1px solid rgba(11,11,33,.10); } .header-call > a{ display: flex; align-items: center; gap: 12px; } .header-call .call-ic{ width: 46px; height: 46px; flex: 0 0 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2f8; color: var(--tg-secondary-color); font-size: 17px; transition: all .3s ease; } .header-call > a:hover .call-ic{ background: var(--tg-secondary-color); color: #fff; } .header-call .call-no{ display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; font-size: 16px; color: var(--tg-heading-font-color); white-space: nowrap; } .header-call .call-no small{ font-size: 12px; font-weight: 500; color: #7e8aa0; } /* Header tek satıra sığsın */ .menu-nav{ flex-wrap: nowrap; } .navbar-wrap ul li a{ padding-left: 14px; padding-right: 14px; } .header-action > ul{ margin-left: 22px; } .header-action > ul li{ margin-left: 16px; } /* WhatsApp: telefon ikonunun yanında yeşil yuvarlak ikon */ .header-action .header-wa-ic > a{ width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff; font-size: 20px; transition: all .3s ease; } .header-action .header-wa-ic > a:hover{ background: #1da851; color: #fff; } /* Sticky: aşağı kayınca gizlen, yukarı çıkınca geri gel */ #sticky-header.sticky-menu{ animation: none; transition: transform .35s ease; } #sticky-header.sticky-menu.header-hidden{ transform: translateY(-100%); } /* Anchor menü: yumuşak kaydırma + sticky için üst boşluk */ html{ scroll-behavior: smooth; } /* Hizmetler: header altında biraz boşlukla başlasın */ #hizmetler{ scroll-margin-top: 120px; } /* Gri arka planlı bölümler (yorumlar, mağaza): gri kutu header'a tam yapışsın */ #yorumlar, #iletisim{ scroll-margin-top: 86px; } @media (max-width: 991px){ #hizmetler{ scroll-margin-top: 108px; } /* mobil sticky header ~77px -> gri kutu tam flush otursun (boşluk kalmasın) */ #yorumlar, #iletisim{ scroll-margin-top: 76px; } } /* Mobil: header aksiyonunu sadeleştir (numarayı gizle, butonu ikon yap) */ @media (max-width: 991px){ .header-action > ul{ margin-left: 0; } .header-action ul li.header-wa-ic{ padding-left: 0; border-left: 0; margin-left: 0; } .header-call .call-no{ display: none; } } /* ===== Mobil header bar ===== */ @media (max-width: 991px){ .menu-nav .logo img{ max-width: 175px; } .menu-area .mobile-nav-toggler{ font-size: 26px; color: var(--tg-primary-color); } } /* Mobil hero: metin kolonu üstte header'dan, altta widget'tan ayrılsın */ @media (max-width: 991px){ .banner-area .banner-content{ margin-top: 40px; margin-bottom: 40px; } } /* ===== Mobil yan menü (drawer) — profesyonel ===== */ /* Koyu backdrop (beyaz %50 yerine) -> panel net ayrışır */ .menu-backdrop{ background: rgba(17,24,39,.55) !important; } /* Drawer artık çocuğu -> sticky header'ın (z:99) üstünde dursun */ .mobile-menu{ z-index: 9999; } .menu-backdrop{ z-index: 9998; } /* Çekmece: dikey flex (üst logo / orta nav / alt footer) */ .mobile-menu .menu-box{ display: flex; flex-direction: column; } .mobile-menu .nav-logo{ padding: 24px 24px 18px; border-bottom: 1px solid rgba(17,24,39,.07); } .mobile-menu .nav-logo img{ max-width: 160px; } .mobile-menu .menu-outer{ flex: 1 1 auto; padding-top: 6px; } /* Şablonun çift ayraçlarını sustur: logo altında tek temiz çizgi kalsın */ .mobile-menu .navigation{ border-bottom: 0; } .mobile-menu .navigation li{ border-top: 0; } /* Kapat butonu: yuvarlak, 360° dönüş gimmick'i yok */ .mobile-menu .close-btn{ top: 22px; right: 18px; width: 38px; height: 38px; line-height: 38px; border-radius: 50%; background: #f1f3f7; color: var(--tg-heading-font-color); font-size: 15px; transition: background .25s ease, color .25s ease; } .mobile-menu-visible .mobile-menu .close-btn{ transform: none; } .mobile-menu .close-btn:hover{ background: var(--tg-primary-color); color: #fff; } /* Nav linkleri: büyük dokunma alanı + hover vurgu (sol turuncu şerit) */ .mobile-menu .navigation li > a{ padding: 15px 25px; font-size: 16px; font-weight: 600; border-bottom: 1px solid rgba(17,24,39,.06); border-left: 3px solid transparent; transition: color .25s ease, background .25s ease, border-color .25s ease, padding-left .25s ease; } .mobile-menu .navigation li > a:hover, .mobile-menu .navigation li.active > a{ color: var(--tg-primary-color); background: #faf6f1; border-left-color: var(--tg-primary-color); padding-left: 30px; } /* Alt footer alanı (iletişim + saat + sosyal) */ .mobile-menu-footer{ padding: 20px 24px 26px; border-top: 1px solid rgba(17,24,39,.07); } /* İletişim: header tarzı — WhatsApp ikonu + telefon ikonu + numara */ .mobile-contact{ display: flex; align-items: center; justify-content: center; gap: 10px; } .mobile-contact .m-wa-ic{ flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff !important; font-size: 18px; transition: background .25s ease, transform .12s ease; } .mobile-contact .m-wa-ic:hover{ background: #1da851; } .mobile-contact .m-wa-ic:active{ transform: scale(.95); } .mobile-contact .m-call-row{ display: flex; align-items: center; gap: 9px; } .mobile-contact .m-call-ic{ flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2f8; color: var(--tg-secondary-color); font-size: 15px; } .mobile-contact .m-call-no{ display: flex; flex-direction: column; line-height: 1.2; font-size: 15px; font-weight: 700; color: var(--tg-heading-font-color); white-space: nowrap; } .mobile-contact .m-call-no small{ font-size: 11px; font-weight: 500; color: #8a93a6; } /* Çalışma saati satırı */ .mobile-hours{ display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 2px; font-size: 13px; color: #8a93a6; } .mobile-hours i{ color: var(--tg-primary-color); } /* Sosyal: yuvarlak + marka hover */ .mobile-menu .social-links ul{ padding: 14px 0 0; gap: 12px; } .mobile-menu .social-links li{ margin: 0; } .mobile-menu .social-links li a{ width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(17,24,39,.12); color: var(--tg-heading-font-color); } .mobile-menu .social-links li a:hover{ color: #fff; border-color: transparent; } .mobile-menu .social-links li:nth-child(1) a:hover{ background: #E1306C; } /* Instagram */ .mobile-menu .social-links li:nth-child(2) a:hover{ background: #1877F2; } /* Facebook */ footer .logo img{ max-width: 75%; } /* ===== İletişim / Randevu CTA (Aşama 1.4) — site tasarımı, ortalı ===== */ #iletisim .section-title{ text-align: center; max-width: none; width: 100%; } /* Başlık tek satırda kalsın (uzun metin sarmasın); mobilde doğal sarar */ #iletisim .section-title .title{ font-size: 44px; line-height: 1.15; margin-bottom: 20px; } /* Paragraf okunur bir ölçüde kalsın, ortalı */ #iletisim .section-title p{ max-width: 620px; margin-left: auto; margin-right: auto; } #iletisim .store-hours{ display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 15px; font-weight: 500; color: var(--tg-heading-font-color); background: #eef2f8; border-radius: 999px; padding: 9px 20px; } #iletisim .store-hours i{ color: var(--tg-primary-color); } /* Masaüstünde haritayı kısalt (yüksekliği azalt) */ @media (min-width: 992px){ #iletisim #contact-map{ height: 440px; } } /* Harita ile kanal kartları arası boşluk */ #iletisim #contact-map{ margin-bottom: 40px; } /* Tıklanabilir iletişim kanalı kartları (harita altı) */ .contact-channels{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .contact-channels .cc-card{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 32px 18px 26px; background: #fff; border: 1px solid #ececf3; border-radius: 18px; box-shadow: 0 12px 30px rgba(61,90,125,.05); transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .contact-channels .cc-card:hover{ transform: translateY(-6px); box-shadow: 0 22px 44px rgba(61,90,125,.13); border-color: transparent; } .contact-channels .cc-ic{ width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #eef2f8; color: var(--tg-secondary-color); font-size: 24px; margin-bottom: 6px; transition: all .3s ease; } .contact-channels .cc-card:hover .cc-ic{ background: var(--tg-secondary-color); color: #fff; } .contact-channels .cc-label{ font-weight: 700; font-size: 18px; color: var(--tg-heading-font-color); } .contact-channels .cc-val{ font-size: 14px; color: #605E7A; line-height: 1.55; } .contact-channels .cc-action{ margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--tg-secondary-color); } /* WhatsApp kartı yeşil vurgulu */ .contact-channels .cc-wa .cc-ic{ background: #25D366; color: #fff; } .contact-channels .cc-wa .cc-action{ color: #1da851; } .contact-channels .cc-wa:hover .cc-ic{ background: #1da851; color: #fff; } @media (max-width: 991px){ .contact-channels{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 479px){ .contact-channels{ grid-template-columns: 1fr; } } /* ===== Hero "Net Görüş" gözlük widget'ı (banner_img.png yerine) ===== */ .ng-widget { --ng-blue:#2f6df6; width:100%; max-width:520px; margin:0 auto; font-family:'Poppins',system-ui,sans-serif; } .ng-fit { position:relative; width:100%; aspect-ratio:380/250; } .ng-card { position:absolute; top:0; left:0; width:380px; height:250px; transform-origin:top left; border-radius:24px; overflow:hidden; background:linear-gradient(160deg,#f3f7fd,#ffffff); box-shadow:0 30px 60px -28px rgba(47,109,246,0.4), 0 0 0 1px rgba(47,109,246,0.06); cursor:crosshair; touch-action:none; } .ng-chart { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; gap:6%; font-weight:700; } .ng-mask { position:absolute; inset:0; will-change:transform; } .ng-row { display:flex; justify-content:space-evenly; width:94%; margin:0 auto; line-height:1; } .ng-blur { filter:blur(7px); color:#aebfe0; } .ng-sharp { color:#1b1b21; will-change:transform; } .ng-glass { position:absolute; inset:0; pointer-events:none; will-change:transform; filter:drop-shadow(0 6px 10px rgba(47,109,246,0.28)); } .ng-caption { margin-top:14px; text-align:center; font-size:13px; font-weight:500; color:#7e8aa0; } /* ===== Müşteri Yorumları iyileştirmeleri ===== */ /* Soluk tırnak işareti yerine yıldız kullanıyoruz */ #yorumlar .testimonial-item::before{ display: none; } /* Kartlar üst hizalı (zig-zag kalksın) */ .testimonial-item-wrap .row [class*="col-"]:nth-child(even) .testimonial-item{ margin-top: 0; } #yorumlar .testimonial-item{ padding-top: 34px; } /* 5 yıldız */ .testimonial-stars{ display: flex; gap: 4px; color: #FFB400; font-size: 15px; margin-bottom: 18px; } /* Yorum metni: uzunsa kısalt, "Devamını oku" ile aç */ #yorumlar .testimonial-content > p{ margin-bottom: 12px; } .tm-text.clamped{ display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .tm-readmore{ border: 0; background: none; padding: 0; color: var(--tg-secondary-color); font-weight: 600; font-size: 14px; cursor: pointer; margin-bottom: 22px; display: inline-block; } .tm-readmore:hover{ text-decoration: underline; } .tm-readmore[hidden]{ display: none; } /* Baş harfli renkli avatar */ .tm-avatar{ width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; line-height: 1; } .testimonial-info .thumb{ width: 44px; flex: 0 0 44px; } /* Müşteri ismi: yapısal başlık değil (div) -> başlık görünümünü class'tan al */ .testimonial-info .content .title{ font-family: var(--tg-heading-font-family); color: var(--tg-heading-font-color); font-weight: var(--tg-heading-font-weight); line-height: 1.2; } /* Google rozeti */ .testimonial-info .content .tm-source{ display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #8a93a6; margin-top: 4px; } .testimonial-info .content .tm-source i{ color: #4285F4; font-size: 13px; } /* Mobilde çok fazla nokta olmasın (kaydırma yeterli) */ @media (max-width: 767px){ .testimonial-active .slick-dots{ display: none !important; } } /* Bölüm arka planı: asimetrik köşeyi kaldır, dengeli padding ver */ #yorumlar.testimonial-area{ background: #F3F7FA; border-radius: 24px; margin: 0 24px; overflow: hidden; } @media (min-width: 992px){ #yorumlar.testimonial-area{ padding-top: 100px; padding-bottom: 110px; margin: 0 40px; } } @media (max-width: 575px){ #yorumlar.testimonial-area{ margin: 0 12px; border-radius: 18px; } } /* ===== Section dikey ritim düzeni (tutarlı boşluklar) ===== */ @media (min-width: 992px){ /* 6-hizmet gri kutusunda üst boşluğu azalt */ .services-area-three .services-item-wrap{ padding-top: 80px; padding-bottom: 80px; } /* Sosyal medya bölümü aşırı genişti */ .team-area{ padding-top: 95px; padding-bottom: 95px; } /* Markalar bölümüne alt nefes payı */ .brand-area{ padding-top: 95px; padding-bottom: 30px; } /* İletişim üst boşluğunu diğerleriyle eşitle */ .inner-contact-area{ padding-top: 95px; padding-bottom: 110px; } } /* ===== Markalar (İş Ortaklarımız) bölümü ===== */ .brand-subtitle{ display: block; text-align: center; color: var(--tg-primary-color); font-weight: 600; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; } .brand-panel{ background: #F3F7FA; border-radius: 24px; padding: 36px 26px; } .brand-panel .brand-item-two{ min-height: 60px; } .brand-panel .brand-item-two img{ max-width: 140px; filter: grayscale(100%); opacity: .55; cursor: default; transition: filter .3s ease, opacity .3s ease, transform .3s ease; } .brand-panel .brand-item-two:hover img{ filter: grayscale(0); opacity: 1; transform: scale(1.06); } @media (max-width: 575px){ .brand-panel{ padding: 26px 14px; border-radius: 18px; } } /* ===== Footer: sosyal ikonlar + KVKK linkleri ===== */ .footer-social-links{ display: flex; justify-content: center; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; } .footer-social-links a{ width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(11,11,33,.05); color: var(--tg-heading-font-color); font-size: 16px; transition: all .3s ease; } .footer-social-links a:hover{ background: var(--tg-primary-color); color: #fff; } .copyright-text p{ font-size: 12.5px; margin: 0; } .footer-legal-links{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 0; padding: 0; list-style: none; } .footer-legal-links li{ display: flex; align-items: center; } .footer-legal-links li:not(:last-child)::after{ content: "·"; margin: 0 8px; color: #b9bfce; } .footer-legal-links a{ font-size: 12.5px; color: #6b7280; transition: color .3s ease; } .footer-legal-links a:hover{ color: var(--tg-primary-color); } @media (min-width: 992px){ /* scroll-to-top butonuyla çakışmasın */ .footer-legal-links{ padding-right: 55px; } } @media (max-width: 767px){ .footer-legal-links{ justify-content: center; margin-top: 12px; } .copyright-text{ text-align: center; } } /* ===== Yasal sayfalar (KVKK/Gizlilik/Çerez) ===== */ .legal-area{ padding: 160px 0 90px; } .legal-area .legal-title{ font-size: 38px; margin-bottom: 10px; } .legal-area .legal-updated{ color: #8a93a6; font-size: 14px; margin-bottom: 30px; display: block; } .legal-area h2{ font-size: 22px; margin: 36px 0 12px; color: #1b1b21; } .legal-area h3{ font-size: 17px; margin: 22px 0 8px; color: #1b1b21; } .legal-area p, .legal-area li{ color: #5b5f74; line-height: 1.85; } .legal-area ul, .legal-area ol{ padding-left: 20px; margin-bottom: 16px; } .legal-area li{ margin-bottom: 6px; } .legal-area strong{ color: #1b1b21; } .legal-area a{ color: var(--tg-secondary-color); } .legal-area table{ width: 100%; border-collapse: collapse; margin: 16px 0 26px; font-size: 14px; } .legal-area th, .legal-area td{ border: 1px solid #e6e9f0; padding: 10px 12px; text-align: left; vertical-align: top; } .legal-area th{ background: #f3f7fa; font-weight: 600; color: #1b1b21; } /* Sayfa içi içindekiler */ .legal-toc{ background: #f6f9fb; border: 1px solid #e6e9f0; border-radius: 14px; padding: 20px 24px; margin-bottom: 34px; } .legal-toc strong{ display: block; margin-bottom: 10px; color: #1b1b21; } .legal-toc ol{ margin: 0; padding-left: 18px; } .legal-toc a{ color: #5b5f74; } .legal-toc a:hover{ color: var(--tg-primary-color); } .legal-area section[id]{ scroll-margin-top: 120px; } .legal-note{ background: #fff7ee; border: 1px solid #ffe2c2; color: #8a5a1c; border-radius: 12px; padding: 14px 18px; font-size: 13.5px; margin-bottom: 30px; } /* ===== 404 sayfası (bulanık→net widget; widget sol, metin sağ) ===== */ .error-area{ padding-top: 210px; padding-bottom: 120px; } .error-area .ng-widget{ max-width: 420px; margin: 0 auto; } .error-area .error-title{ margin-bottom: 10px; } .error-area .error-lead{ color: #5b5f74; line-height: 1.8; margin-bottom: 0; } .error-actions{ margin: 26px 0 16px; } .error-actions .btn{ color: var(--tg-white); } .error-links{ font-size: 14px; color: #8a93a6; } .error-links a{ color: var(--tg-primary-color); } @media (max-width: 991px){ .error-area{ padding-top: 150px; padding-bottom: 80px; } .error-area .ng-widget{ max-width: 340px; margin-bottom: 36px; } .error-content{ text-align: center; } } /* Mobil: uzun kelimeli bölüm başlıkları taşmasın (örn. "Seydikemer'deki") #iletisim başlığı ID özgüllüğüyle 44px sabit -> mobilde ID özgüllüğüyle ez */ @media (max-width: 767px){ .section-title .title{ overflow-wrap: break-word; } #iletisim .section-title .title{ font-size: 30px; line-height: 1.25; } } @media (max-width: 480px){ #iletisim .section-title .title{ font-size: 26px; } }