/* Bilesen: Buton
   Kullanim: core/button blogunda "Alien Road – Primary CTA" veya "Outline"
   blok stilini secin. Duz HTML icinde .ar-cta-button sinifi da ayni gorunumu verir. */

.ar-cta-button,
.wp-block-button.is-style-ar-cta .wp-block-button__link {
  display: inline-block;
  background: var(--ar-navy);
  color: #fff !important;
  border-radius: var(--ar-radius-full);
  padding: 14px 28px;
  font-family: var(--ar-font-heading);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ar-shadow-sm);
  transition: all var(--ar-transition);
}

.ar-cta-button:hover,
.wp-block-button.is-style-ar-cta .wp-block-button__link:hover {
  background: var(--ar-midnight);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--ar-shadow-md);
}

.wp-block-button.is-style-ar-outline .wp-block-button__link {
  background: transparent;
  border: 1.5px solid var(--ar-navy);
  color: var(--ar-navy) !important;
  border-radius: var(--ar-radius-full);
  padding: 12.5px 26px;
  font-family: var(--ar-font-heading);
  font-weight: 600;
}

.wp-block-button.is-style-ar-outline .wp-block-button__link:hover {
  background: var(--ar-navy);
  color: #fff !important;
}

/* Koyu zeminlerde (hero, footer, CTA bantlari) kullanilan acik cerceve. */
.wp-block-button.is-style-ar-outline-light .wp-block-button__link {
  border-color: #fff !important;
  color: #fff !important;
}

.wp-block-button.is-style-ar-outline-light .wp-block-button__link:hover {
  background: #fff;
  color: var(--ar-navy) !important;
}


/* Anahat dugme: beyaz zemin, acik yesil cerceve, lacivert yazi.
   Koyu dolgulu dugmenin yaninda ikincil eylem olarak durur.
   Cerceve "inset box-shadow" DEGIL gercek border — dugme yuksekligi
   dolgulu kardesiyle ayni kalsin diye (border-box zaten acik). */
.ar-dugme--anahat {
  color: var(--ar-navy);
  background: #fff;
  border: 2px solid var(--ar-green-light);
}

.ar-dugme--anahat:hover,
.ar-dugme--anahat:focus-visible {
  color: var(--ar-navy);
  background: var(--ar-silver-soft);
  border-color: var(--ar-green);
}

/* Metnin bittigi noktada saga bakan ok.
   Yazi ile arasindaki bosluk margin ile veriliyor; metnin icinde bosluk
   karakteri olsaydi satir sonunda ok tek basina alt satira duserdi. */
.ar-dugme__ok {
  display: inline-block;
  margin-left: 0.5em;
  color: var(--ar-green-light);
  transition: transform 0.25s ease;
}

.ar-dugme:hover .ar-dugme__ok {
  transform: translateX(4px);
}

/* Koyu zemin korumasi (components/dark.css) dolgulu dugmenin metnini
   lacivert yapiyor; ok bundan etkilenmemeli, vurgu rengi kalsin. */
.ar-sahne.ar-sahne .ar-dugme__ok {
  color: var(--ar-green-light);
}

@media (prefers-reduced-motion: reduce) {
  .ar-dugme__ok { transition: none; }
  .ar-dugme:hover .ar-dugme__ok { transform: none; }
}

/* =========================================================================
   ORTAK BUTON — BANNER HARİÇ HER YERDE
   -------------------------------------------------------------------------
   Referans: yeşil çerçeveli hap, yeşil yazı, beyaz zemin, sağda ok.

   Renkler PANELDEN yönetilir (Görünüm > Tema Ayarları > Renkler).
   var(--x, yedek) kalıbı: ayar boşsa değişken hiç tanımlanmaz ve
   yedek devreye girer. Boş değeri basmak bildirimi geçersiz kılardı.

   BANNER HARİÇ: banner kendi koyu zemininde farklı bir kontrast
   dengesi istiyor; oradaki butonlar kendi kurallarını korur
   (.ar-banner .ar-dugme).
   ========================================================================= */

.ar-dugme:not(.ar-banner .ar-dugme) {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  font-family: var(--ar-font-heading);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;

  color: var(--ar-btn-yazi, var(--ar-green-deep));
  background: var(--ar-btn-arka, #fff);
  border: 2px solid var(--ar-btn-cerceve, var(--ar-green-light));
  /* Hap biçimi: referanstaki tam yuvarlak uç. */
  border-radius: var(--ar-radius-full, 999px);

  transition: color 0.22s ease, background-color 0.22s ease,
              border-color 0.22s ease, transform 0.22s ease;
}

.ar-dugme:not(.ar-banner .ar-dugme):hover,
.ar-dugme:not(.ar-banner .ar-dugme):focus-visible {
  color: var(--ar-btn-yazi-h, #fff);
  background: var(--ar-btn-arka-h, var(--ar-green));
  border-color: var(--ar-btn-cerceve-h, var(--ar-green));
  transform: translateY(-2px);
}

/* Ok işareti — metnin bittiği yerde. */
.ar-dugme:not(.ar-banner .ar-dugme) .ar-dugme__ok {
  color: var(--ar-btn-ok, currentColor);
}

.ar-dugme:not(.ar-banner .ar-dugme):hover .ar-dugme__ok {
  /* Üzerine gelince zemin doluyor; ok metinle aynı renge geçmeli,
     yoksa yeşil zeminde yeşil ok kayboluyor. */
  color: currentColor;
}

/*
 * TEK TASARIM: --dolu ve --anahat varyantlari BANNER DISINDA ayni
 * gorunur. Onceki hali dolgulu butonu yesil zeminli yapiyordu ve
 * sayfada iki farkli buton dili olusuyordu; referans tek bir cerceveli
 * hap gosteriyor.
 *
 * Varyant siniflari isaretlemede KALIYOR: banner icinde hala anlamli
 * ve ileride panelden ayri renk verilmek istenirse kanca hazir.
 */
.ar-dugme.ar-dugme--dolu:not(.ar-banner .ar-dugme),
.ar-dugme.ar-dugme--anahat:not(.ar-banner .ar-dugme),
.ar-dugme.ar-dugme--koyu:not(.ar-banner .ar-dugme),
.ar-dugme.ar-dugme--cizgi:not(.ar-banner .ar-dugme),
.ar-sahne.ar-sahne .ar-dugme.ar-dugme--cizgi:not(.ar-banner .ar-dugme) {
  color: var(--ar-btn-yazi, var(--ar-green-deep));
  background: var(--ar-btn-arka, #fff);
  border-color: var(--ar-btn-cerceve, var(--ar-green-light));
}

.ar-dugme.ar-dugme--dolu:not(.ar-banner .ar-dugme):hover,
.ar-dugme.ar-dugme--anahat:not(.ar-banner .ar-dugme):hover,
.ar-dugme.ar-dugme--koyu:not(.ar-banner .ar-dugme):hover,
.ar-dugme.ar-dugme--cizgi:not(.ar-banner .ar-dugme):hover,
.ar-sahne.ar-sahne .ar-dugme.ar-dugme--cizgi:not(.ar-banner .ar-dugme):hover {
  color: var(--ar-btn-yazi-h, #fff);
  background: var(--ar-btn-arka-h, var(--ar-green));
  border-color: var(--ar-btn-cerceve-h, var(--ar-green));
}

@media (prefers-reduced-motion: reduce) {
  .ar-dugme:not(.ar-banner .ar-dugme) { transition: none; }
  .ar-dugme:not(.ar-banner .ar-dugme):hover { transform: none; }
}


/*
 * "--cizgi" VARYANTI beyaz yazi kurali tasiyordu ve butonu BEYAZ ZEMINDE
 * BEYAZ YAZI birakiyordu — tumden gorunmez. Ayrica ".ar-sahne.ar-sahne"
 * ile ozgullugu (0,3,x) yukseltilmisti; ustune yazabilmek icin yukaridaki
 * seciciler de sinif-uzeri-sinif kalibiyla ayni seviyeye cikarildi.
 *
 * Sinif isaretlemede kaliyor: banner icinde hala kendi anlamini koruyor.
 */
.ar-sahne.ar-sahne .ar-dugme:not(.ar-banner .ar-dugme) {
  color: var(--ar-btn-yazi, var(--ar-green-deep));
  background: var(--ar-btn-arka, #fff);
  border-color: var(--ar-btn-cerceve, var(--ar-green-light));
}

.ar-sahne.ar-sahne .ar-dugme:not(.ar-banner .ar-dugme):hover {
  color: var(--ar-btn-yazi-h, #fff);
  background: var(--ar-btn-arka-h, var(--ar-green));
  border-color: var(--ar-btn-cerceve-h, var(--ar-green));
}