/* =========================================================
   PROYAZ - siteye özel ek stiller
   ========================================================= */

/* Sayfa başlık resmi: resmin tamamı görünsün
   - menünün altından başlar (menü resmin üstünü kapatmaz)
   - yükseklik resmin kendi oranına göre (--oran: genişlik / yükseklik)
   - sabit arka plan efekti kapalı, resim sayfayla birlikte kayar
   - koyu katman %35 */
.hero-tam {
  margin-top: 73px;
  height: auto !important;
  aspect-ratio: var(--oran, 16 / 9);
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: scroll !important;
}
.hero-tam:before {
  background: rgba(0, 0, 0, 0.35) !important;
}
.hero-tam .container {
  padding-top: 0 !important;
}
@media (max-width: 991px) {
  .hero-tam { margin-top: 60px; }
}
/* Telefonda başlık yazısı sığsın diye en az yükseklik */
@media (max-width: 767px) {
  .hero-tam { min-height: 280px; }
}

/* Başlık resmin alt ortasında */
.hero-alt { align-items: flex-end !important; }
.hero-alt:before { background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 45%) !important; }
.hero-alt .container { padding-bottom: 30px; }
@media (max-width: 767px) {
  .hero-alt .container { padding-bottom: 15px; }
  .hero-alt h9, .hero-alt h1.hero-baslik { font-size: 30px !important; line-height: 36px !important; }
}

/* Başlık resmin üst ortasında (alt ortası dolu resimler için) */
.hero-ust { align-items: flex-start !important; }
.hero-ust:before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.35) 55%, rgba(0, 0, 0, 0) 80%) !important; }
.hero-ust .container { padding-top: 12% !important; }
.hero-ust h9, .hero-ust h1.hero-baslik { font-size: 40px !important; line-height: 46px !important; }
@media (max-width: 767px) {
  .hero-ust .container { padding-top: 15px !important; }
  .hero-ust h9, .hero-ust h1.hero-baslik { font-size: 26px !important; line-height: 32px !important; }
  .hero-ust:before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 75%) !important; }
}

/* Başlık resmin tam ortasında */
.hero-orta { align-items: center !important; }
.hero-orta .container { padding-bottom: 5%; }
.hero-orta.tam-orta .container { padding-bottom: 0 !important; }
.hero-orta:before { background: radial-gradient(ellipse 45% 40% at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%) !important; }
@media (max-width: 767px) {
  .hero-orta .container { padding-bottom: 0; }
  .hero-orta h9, .hero-orta h1.hero-baslik { font-size: 30px !important; line-height: 36px !important; }
  .hero-orta:before { background: radial-gradient(ellipse 70% 50% at center, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%) !important; }
}

/* Başlık resmin en üst bandında (resmin geri kalanı dolu olduğunda) */
.hero-tepe { align-items: flex-start !important; padding-top: 0 !important; }
.hero-tepe:before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 32%) !important; }
.hero-tepe .container { padding-top: 6px !important; }
.hero-tepe h9, .hero-tepe h1.hero-baslik { font-size: 34px !important; line-height: 38px !important; }
@media (max-width: 767px) {
  .hero-tepe h9, .hero-tepe h1.hero-baslik { font-size: 24px !important; line-height: 30px !important; }
  .hero-tepe:before { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 60%) !important; }
}

/* Hareketli metin: kelime ortadan açılsın, her an başlıkla aynı merkezde dursun */
.hero-tam .cd-words-wrapper b { left: 50%; transform: translateX(-50%); }

/* Sistemden Gerçek Ekranlar galerisi */
.ekranlar { padding: 40px 0 20px; }
.ekranlar .ekran-aciklama { color: #666; margin: 0 0 20px; }
.ekran-kutu { display: block; margin-bottom: 25px; color: #444; }
.ekran-kutu:hover { color: #444; }
.ekran-kutu img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top;
  border: 1px solid #ddd; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
.ekran-kutu:hover img { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); border-color: #ffa500; }
.ekran-kutu span { display: block; margin-top: 8px; font-size: 14px; text-align: center; }

/* WhatsApp butonu (sol alt) */
.whatsapp-buton { position: fixed; left: 15px; bottom: 15px; z-index: 99999; width: 52px; height: 52px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
.whatsapp-buton:hover { color: #fff; transform: scale(1.08); }

/* Resmin üstündeki ürün adı sayfanın ana başlığı (H1) - eski h9 görünümüyle aynı */
.hero-tam h1.hero-baslik { display: inline; margin: 0; font-size: 50px; font-weight: 650; line-height: 50px;
  color: #fff; font-family: "Poppins", sans-serif; }
.hero-tam h1.hero-baslik span { color: orange; }

/* Daktilo efekti (resim üstündeki dönen yazı) - sınıf: cd-headline letters type */
.cd-headline.type .cd-words-wrapper { padding-right: 0.35em; }
.cd-headline.type .cd-words-wrapper::after { width: 3px; height: 1.25em; background-color: #fff; }
.cd-headline.type .cd-words-wrapper.waiting::after { animation: imlec-yanip-son 1s step-end infinite; }
.cd-headline.type .cd-words-wrapper.selected { background-color: transparent; }
.cd-headline.type .cd-words-wrapper.selected b { color: #fff; }
@keyframes imlec-yanip-son { 50% { opacity: 0; } }

/* Ana sayfa başlığı (H1) - eski h9 görünümüyle aynı */
#hero h1.ana-baslik { display: inline; margin: 0; font-size: 40px; font-weight: 700; line-height: 54px;
  color: #fff; font-family: "Poppins", sans-serif; }
#hero h1.ana-baslik span { color: orange; }

/* Blog: sayfadaki ikinci ana başlık (H2) - H1 görünümüyle aynı */
.section-title h2.ikinci-baslik { font-size: 40px; font-weight: 500; line-height: 48px; margin: 0 0 8px 0;
  letter-spacing: normal; text-transform: none; color: #444444; font-family: Futura, sans-serif; }
.section-title h2.ikinci-baslik::after { display: none; }

/* İletişim bölümündeki telefon ve e-posta turuncu olmasın */
#iletisim .info a, #iletisim .info a:hover { color: inherit; }
