/*
 * Bayramoto Suite — WhatsApp modülü görünümü.
 *
 * Ön yüzdeki dört buton (ürün, sepet, teşekkür, yüzen) ile yönetimdeki sipariş
 * butonu bu tek dosyadan biçimlenir. Renk, ölçü ve konum değerleri buraya
 * gömülü DEĞİLDİR: Module::css_variables() bunları `wp_add_inline_style` ile
 * :root üzerine CSS özel değişkeni olarak basar. Böylece ayar değişince bu
 * dosya değişmez ve tarayıcı önbelleğinde kalabilir.
 *
 * Her var() çağrısında bir yedek değer vardır. Eklenti satır içi değişkenleri
 * basamazsa (ör. stil sırası bozulur ya da başka bir eklenti wp_head'i keserse)
 * butonlar biçimsiz kalmak yerine WhatsApp'ın kurumsal yeşiliyle çıkar.
 *
 * Eski "WhatsApp Helper" eklentisinde kurallar `a`, `button` gibi genel etiket
 * seçicilere yazılmıştı ve ürün sayfası için düşünülen dolgu/renk, temanın
 * başka sayfalarındaki bağlantılara da sızıyordu. Buradaki her kural kendi
 * `bos-wa-` önekli sınıfına kapsanmıştır; kapsamsız tek bir seçici yoktur.
 */

/* ---------------------------------------------------------------- Simge */

/*
 * SVG'nin path'i fill="currentColor" kullanıyor; bu yüzden ayrı bir simge
 * rengi yoktur, simge kabın yazı rengini alır.
 */
.bos-wa-icon {
	display: block;
	flex: 0 0 auto;
	width: var(--bos-wa-icon, 18px);
	height: var(--bos-wa-icon, 18px);
}

/* ---------------------------------------------------------------- Ortak buton */

.bos-wa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: var(--bos-wa-height, 48px);
	/* Dokunmatik ekranda isabet alanı: yükseklik ayarı çok küçük seçilse bile
	   buton 44 pikselin altına düşmez. */
	min-height: 44px;
	/* Yatay dolgu yükseklikten türer; böylece hap biçiminde bile orantı bozulmaz. */
	padding: 0 max(14px, calc(var(--bos-wa-height, 48px) * 0.34));
	border: 0;
	border-radius: var(--bos-wa-radius, 999px);
	background: var(--bos-wa-bg, #25d366);
	color: var(--bos-wa-fg, #ffffff);
	font-size: var(--bos-wa-font, 15px);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease;
}

/*
 * Tema sızıntısına karşı: birçok temada `.entry-content a` gibi seçiciler
 * bağlantıya alt çizgi, çerçeve ve kendi rengini verir. Etiketle nitelenmiş
 * bu blok aynı ağırlıkta olduğu için buton görünümü korunur; kural yine
 * yalnızca kendi sınıflarımızı hedefler.
 */
a.bos-wa-btn,
a.bos-wa-btn:hover,
a.bos-wa-btn:focus,
a.bos-wa-float,
a.bos-wa-order__btn {
	text-decoration: none;
	box-shadow: none;
}

.bos-wa-btn:hover,
.bos-wa-btn:focus {
	background: var(--bos-wa-bg-hover, #1ebe5d);
	color: var(--bos-wa-fg, #ffffff);
}

.bos-wa-btn:active {
	transform: translateY(1px);
}

.bos-wa-btn__label {
	display: inline-block;
	/* Uzun buton yazısı butonu taşırmasın; tek satırda kalıp noktalanır. */
	overflow: hidden;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- Ürün butonu */

/*
 * Ürün butonu "Sepete ekle" formunun içine de basılabiliyor. O form birçok
 * temada flex kutusudur; tam satır genişliği vermezsek buton adet kutusunun
 * yanına sıkışır.
 */
.bos-wa-slot {
	display: flex;
	flex: 1 0 100%;
	width: 100%;
	margin: 12px 0;
	clear: both;
}

.bos-wa-btn--product {
	width: 100%;
}

/* ---------------------------------------------------------------- Sepet butonu */

/*
 * Sepet butonu "Ödemeye geç" butonunun altındaki dar sütunda durur; orada
 * satır içi kalırsa yarım genişlikte görünür.
 */
.bos-wa-btn--cart {
	display: flex;
	width: 100%;
	margin-top: 10px;
}

/* ---------------------------------------------------------------- Teşekkür bloğu */

.bos-wa-thanks {
	box-sizing: border-box;
	margin: 0 0 24px;
	padding: 18px 20px;
	/* Eski tarayıcılar için düz yedek; color-mix destekleyenlerde kutu buton
	   rengiyle aynı tondan türer, ayrı bir arka plan ayarı gerekmez. */
	background: rgba(37, 211, 102, 0.08);
	background: color-mix(in srgb, var(--bos-wa-bg, #25d366) 8%, transparent);
	border: 1px solid rgba(37, 211, 102, 0.35);
	border-inline-start: 4px solid var(--bos-wa-bg, #25d366);
	border-radius: 10px;
	/* Yazı rengi temadan miras alınır: koyu temalarda sabit koyu bir renk
	   yazıyı okunmaz hale getirirdi. */
	color: inherit;
}

.bos-wa-thanks__title {
	margin: 0 0 6px;
	font-size: calc(var(--bos-wa-font, 15px) + 5px);
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

.bos-wa-thanks__text {
	margin: 0 0 14px;
	font-size: var(--bos-wa-font, 15px);
	line-height: 1.55;
	color: inherit;
	opacity: 0.85;
}

.bos-wa-btn--thanks {
	max-width: 100%;
}

/* ---------------------------------------------------------------- Yüzen buton */

.bos-wa-float {
	position: fixed;
	/* iPhone'da alt çubuğun altına kaymaması için güvenli alan eklenir;
	   env() bilinmiyorsa 0px ile ayardaki boşluk aynen kalır. */
	bottom: calc(var(--bos-wa-float-y, 22px) + env(safe-area-inset-bottom, 0px));
	/* Tema başlıkları genelde 100–999 arasında kalır, WordPress yönetim çubuğu
	   99999'dur: buton içeriğin üstünde ama çubuğun altında durur. */
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--bos-wa-float-size, 58px);
	height: var(--bos-wa-float-size, 58px);
	/* Çap ayarı 36 pikselе kadar inebiliyor; dokunma hedefi 44 pikselin
	   altına düşmesin. */
	min-width: 44px;
	min-height: 44px;
	border-radius: 50%;
	background: var(--bos-wa-bg, #25d366);
	color: var(--bos-wa-fg, #ffffff);
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.bos-wa-float:hover,
.bos-wa-float:focus {
	background: var(--bos-wa-bg-hover, #1ebe5d);
	color: var(--bos-wa-fg, #ffffff);
	transform: scale(1.06);
}

/* Yüzen butonun simgesi kendi çapından türer: ayrı simge ayarı gerekmez. */
.bos-wa-icon--float {
	width: calc(var(--bos-wa-float-size, 58px) * 0.52);
	height: calc(var(--bos-wa-float-size, 58px) * 0.52);
}

/* Sağ/sol seçeneği: karşı kenar açıkça auto yapılır ki sınıf değişince
   eski kenar değeri asılı kalmasın. */
.bos-wa-float--right {
	right: calc(var(--bos-wa-float-x, 22px) + env(safe-area-inset-right, 0px));
	left: auto;
}

.bos-wa-float--left {
	left: calc(var(--bos-wa-float-x, 22px) + env(safe-area-inset-left, 0px));
	right: auto;
}

/* ---------------------------------------------------------------- İpucu balonu */

/*
 * Balon mutlak konumlandırılır: akışa girseydi butonun yuvarlağını bozardı.
 * Erişilebilir ad zaten aria-label'dadır, bu yüzden balon fare imlecine
 * kapalıdır (pointer-events) ve gizliyken ekran okuyucuya ek yük olmaz.
 */
.bos-wa-float__tip {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
	max-width: 60vw;
	padding: 7px 11px;
	border-radius: 8px;
	background: #1d2327;
	color: #ffffff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.bos-wa-float--right .bos-wa-float__tip {
	right: calc(100% + 12px);
}

.bos-wa-float--left .bos-wa-float__tip {
	left: calc(100% + 12px);
}

.bos-wa-float:hover .bos-wa-float__tip,
.bos-wa-float:focus-visible .bos-wa-float__tip {
	opacity: 1;
	visibility: visible;
}

/* ---------------------------------------------------------------- Görünürlük */

/*
 * Sınır 782 pikseldir; ayar açıklamasında da bu değer yazılı olduğu için
 * başka bir kırılma noktası kullanılmaz.
 */
@media screen and (max-width: 782px) {
	.bos-wa-float--only-desktop {
		display: none;
	}
}

@media screen and (min-width: 783px) {
	.bos-wa-float--only-mobile {
		display: none;
	}
}

/* ---------------------------------------------------------------- Sipariş ekranı */

/*
 * Yönetimdeki kutu: hem sipariş düzenleme ekranında (fatura adresi altında)
 * hem de sipariş önizleme penceresinde aynı biçimi kullanır.
 */
.bos-wa-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
}

.bos-wa-order--preview {
	/* Önizleme penceresinde buton, sipariş bilgilerinin hemen ardına gelir;
	   ince çizgi olmadan not alanına yapışık görünüyordu. */
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #dcdcde;
}

.bos-wa-order__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	/* Yönetim ekranının buton ritmi 30–34 pikseldir; ön yüz için seçilebilen
	   96 piksellik yükseklik burada sipariş kutusunu dağıtırdı. Bu yüzden
	   yükseklik ayarı yalnızca ön yüzde uygulanır, renk ve yuvarlaklık ortaktır. */
	min-height: 34px;
	padding: 0 14px;
	border: 0;
	/* Hap biçimi yönetim panelinde yabancı durduğu için yuvarlaklık 6 pikselle
	   sınırlanır; daha keskin bir ayar seçilmişse o değer aynen geçerlidir. */
	border-radius: min(var(--bos-wa-radius, 999px), 6px);
	background: var(--bos-wa-bg, #25d366);
	color: var(--bos-wa-fg, #ffffff);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.bos-wa-order__btn:hover,
.bos-wa-order__btn:focus {
	background: var(--bos-wa-bg-hover, #1ebe5d);
	color: var(--bos-wa-fg, #ffffff);
}

/* Butonun yazısı sınıfsız bir <span>; seçici yine kendi önekimize kapsanmıştır. */
.bos-wa-order__btn span {
	white-space: nowrap;
}

/* Yönetimde simge, ön yüz ayarı büyük seçilse bile satırı şişirmesin. */
.bos-wa-order__btn .bos-wa-icon {
	width: min(var(--bos-wa-icon, 18px), 18px);
	height: min(var(--bos-wa-icon, 18px), 18px);
}

.bos-wa-order__phone {
	color: #646970;
	font-size: 12px;
	/* Numara her zaman soldan sağa okunur; Arapça gibi RTL yönetim dillerinde
	   "+90" işareti sona kaymasın diye yön sabitlenir. */
	direction: ltr;
	unicode-bidi: isolate;
	white-space: nowrap;
}

.bos-wa-order__error {
	flex: 1 0 100%;
	margin: 0;
	/* WordPress'in uyarı kırmızısı; "numara yok" durumu sessizce geçilmemeli. */
	color: #d63638;
	font-size: 12px;
	line-height: 1.4;
}

/* ---------------------------------------------------------------- Erişilebilirlik */

/*
 * Odak halkası iki katmanlıdır: içeride yazı rengiyle ince bir hat, dışarıda
 * koyu bir gölge. Tek renkli bir hat, butonun kendi rengine yakın bir tema
 * arka planında kaybolabiliyordu. :focus-visible kullanıldığı için fareyle
 * tıklayan kullanıcı halkayı görmez.
 */
.bos-wa-btn:focus-visible,
.bos-wa-float:focus-visible,
.bos-wa-order__btn:focus-visible {
	outline: 2px solid var(--bos-wa-fg, #ffffff);
	outline-offset: -4px;
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.6);
}

/*
 * Hareket duyarlılığı olan kullanıcılar için büyüme ve geçiş efektleri
 * kapatılır; buton yine renk değiştirerek geri bildirim verir.
 */
@media (prefers-reduced-motion: reduce) {
	.bos-wa-btn,
	.bos-wa-float,
	.bos-wa-float__tip,
	.bos-wa-order__btn {
		transition: none;
	}

	.bos-wa-btn:active,
	.bos-wa-float:hover,
	.bos-wa-float:focus {
		transform: none;
	}

	.bos-wa-float__tip {
		transform: translateY(50%);
	}
}

/* ---------------------------------------------------------------- Dar ekran */

@media screen and (max-width: 600px) {
	/* Telefonda ürün ve teşekkür butonu satırın tamamını kaplar; yarım
	   genişlikteki buton başparmakla ıskalanıyordu. */
	.bos-wa-btn--product,
	.bos-wa-btn--thanks {
		display: flex;
		width: 100%;
	}

	.bos-wa-thanks {
		padding: 14px 16px;
	}

	/* Dar ekranda balon ekranın yarısını kaplıyordu ve dokunmatikte zaten
	   "üzerine gelme" durumu yok; yalnızca aria-label kalır. */
	.bos-wa-float__tip {
		display: none;
	}

	.bos-wa-order {
		gap: 8px;
	}

	.bos-wa-order__btn {
		flex: 1 0 100%;
	}
}