/*
 * Bizim eklerimiz. Tema derlemesi (tema.css) biyolink.com'dan geldiği gibi
 * duruyor — yeniden indirilebilir olsun diye ona hiç dokunmuyoruz; özgün
 * sitede sayfaya gömülü olan kurallar ve bizim iki ekimiz burada.
 */

/* Özgün sitede ana sayfaya gömülü: başlıktaki daireyi çizen animasyon. */
@keyframes draw-circle {
  0% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
.animate-draw {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw-circle 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

/* Özgün sitede gömülü: kaydırıcı noktalarının marka rengi. */
.splide__pagination__page.is-active {
  background: #75b76f !important;
  transform: scale(1.2);
}
.splide__pagination__page {
  background: #d1d5db;
}

/* Klavye kullanıcısı için içeriğe atlama bağlantısı. */
.atlaBaglantisi {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #75b76f;
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.75rem 0;
  font-weight: 600;
}
.atlaBaglantisi:focus {
  left: 0;
}

/* EKİMİZ: üst menüdeki giriş / satış düğmeleri ve dil değiştirici. */
.girisDugmesi,
.satDugmesi {
  display: inline-block;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  border-radius: 1.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s;
}
.girisDugmesi {
  border: 2px solid #75b76f;
  color: #3c3b3d;
}
.girisDugmesi:hover {
  background: #75b76f;
  color: #fff;
}
.satDugmesi {
  background: #75b76f;
  color: #fff;
}
.satDugmesi:hover {
  background: #3c3b3d;
  transform: translateY(-1px);
}

/* Uygulamadaki TR/EN pili — statik sitede iki bağlantı. */
.dilSecici {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.125rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  background: rgb(241 245 249 / 0.9);
  box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.05);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}
.dilSecici a {
  padding: 0.25rem 0.5rem;
  border-radius: 0.5rem;
  color: rgb(60 59 61 / 0.6);
  transition: all 0.2s;
}
.dilSecici a:hover {
  color: #3c3b3d;
}
.dilSecici a.aktif {
  background: #fff;
  color: #75b76f;
  font-weight: 800;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

@media (width < 1320px) {
  .girisDugmesi,
  .satDugmesi {
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
  }
  /* Menü + dil + iki düğme dar ekranda sığmıyor; logoyu küçültüp yer açıyoruz. */
  .logoKutusu {
    max-width: 200px;
  }
}

/*
 * Özgün sitede üst menü 975px'te çekmeceye giriyordu; bizim iki düğmemizle
 * birlikte 1100px'in altında satır atlıyor. Çekmece eşiğini yukarı aldık —
 * menü de düğmeler de çekmecenin içinde zaten var, hiçbir şey kaybolmuyor.
 */
@media (width < 1100px) {
  .headerLinkList,
  .ustAksiyonlar {
    display: none;
  }
  .mobileMenuBtn {
    display: flex;
  }
}

/* EKİMİZ: ana sayfadaki görselin altındaki "Biyokütle Sat" çağrısı. */
.uygulamaCagrisi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  border-radius: 9999px;
  background: #75b76f;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  transition: all 0.3s;
}
.uygulamaCagrisi:hover {
  background: #3c3b3d;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(117 183 111 / 0.3);
}

/*
 * Türkiye haritası — özgün sitedeki eklentinin oranı (%56).
 * Yükseklik `aspect-ratio` ile KESİN verilmeli: amCharts kabın ölçüsünü
 * okuyor, dolgu hilesiyle kurulan yükseklikte kendi varsayılanına düşüyor.
 */
.haritaKutusu {
  width: 100%;
  max-width: 2000px;
  margin: 0 auto;
  aspect-ratio: 25 / 14;
}

/*
 * İletişim formu. Özgün sitede form WPForms eklentisinden geliyor; biçimi
 * temada tanımlı ama eklentinin kendi yerleşim CSS'i bizde yok. Görüntü
 * aynı kalsın diye gereken asgari kuralları burada tamamlıyoruz.
 */
.wpforms-label-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wpforms-field-container input,
.wpforms-field-container textarea {
  width: 100%;
  padding: 0 14px;
  font-size: 16px;
  color: #3c3b3d;
  outline: none;
}
.wpforms-field-container textarea {
  padding: 12px 14px;
  line-height: 1.5;
  resize: vertical;
}
.wpforms-field-container input:focus,
.wpforms-field-container textarea:focus {
  border-color: #75b76f !important;
}
.wpforms-submit-container {
  margin-top: 10px;
}
.wpforms-submit {
  border: 0;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  transition: all 0.3s;
}
.wpforms-submit:hover {
  background: #3c3b3d !important;
  transform: translateY(-1px);
}