/**
 * BiiTest — Cross-browser compatibility layer
 *
 * Tasarımı değiştirmeden modern CSS özelliklerinin hedef tarayıcıların
 * eski sürümlerinde çalışmasını ve görsel tutarlılığı garanti eder.
 *
 * Hedef matris:
 *   - Chrome / Edge: son 3 sürüm
 *   - Firefox: son 3 + ESR
 *   - Safari: 15.4+ (iOS 15.4+ / macOS 11 Big Sur+)
 *   - Samsung Internet: son 2 sürüm
 *
 * Burada uygulanan koruma katmanları:
 *   1. iOS Safari viewport — 100vh düzeltmesi (100dvh + --vh JS fallback)
 *   2. iOS notch / safe-area-inset
 *   3. iOS form input zoom önleme (mobil 16px minimum font-size)
 *   4. Number input spinner kaldırma (Firefox + WebKit)
 *   5. Custom select arrow (cross-browser tutarlı)
 *   6. Firefox scrollbar styling (scrollbar-color / scrollbar-width)
 *   7. -webkit- vendor prefix tamamlama
 *   8. prefers-reduced-motion uyumluluğu
 *   9. Forced-colors (Windows High Contrast / a11y)
 *  10. :focus-visible fallback (eski Safari için :focus polyfill)
 *  11. Tap highlight color kaldırma (mobilde gri flash önleme)
 *
 * Hiçbir kural mevcut tasarımı görsel olarak değiştirmez — yalnızca eksik
 * tarayıcı davranışlarını tamamlar.
 */

/* ============================================================
 * 1. iOS Safari viewport — 100vh yerine 100dvh
 *
 * iOS Safari'de 100vh, URL bar açıkken sayfanın altını klipliyor.
 * 100dvh (dynamic viewport) iOS 15.4+ ile çalışır. Eski iOS için
 * --vh custom property'yi browser-compat.js dolduruyor:
 *   --vh: 1vh karşılığı px değer.
 *
 * Bu CSS sadece SAFE fallback'ler içeriyor; ana stillerde 100vh
 * kullanılan yerleri buradan değiştirmeye çalışmıyoruz — mevcut
 * 100vh kuralları aynı kalıyor, JS ile --vh güncelleniyor.
 * ============================================================ */
:root {
	/* Default — JS bunu DOMContentLoaded'da gerçek pixel değerine günceller. */
	--vh: 1vh;
	--dvh: 1dvh;
}

/* ============================================================
 * 2. iOS safe-area-inset — iPhone notch / home-indicator alanı
 *
 * Focused checkout footer'ı + sticky element'ler için env() ile
 * cihaz çentik bölgesini hesaba kat. Body'ye uygulamak yerine
 * sadece gerekli element'lere ekliyoruz — desktop'ı etkilemez.
 * ============================================================ */
body.biitest-focused-checkout .biitest-checkout-footer {
	padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
}
body.biitest-focused-checkout .biitest-checkout-header {
	padding-top: calc(14px + env(safe-area-inset-top, 0px));
}
@supports (padding: env(safe-area-inset-bottom)) {
	body.woocommerce-checkout #place_order,
	body.woocommerce-checkout .place-order-actions {
		margin-bottom: env(safe-area-inset-bottom, 0px);
	}
}

/* ============================================================
 * 3. iOS form input zoom önleme
 *
 * iOS Safari focus'ta font-size < 16px olan input'a otomatik zoom
 * yapıyor — UX'i bozar, sayfa yatay scroll'a girer.
 * Çözüm: mobil viewport'ta min 16px, desktop'ta görsel boyut
 * unchanged kalır. Sadece <600px viewport'ta uyguluyoruz.
 *
 * ÖNEMLİ: Mevcut tema'da çoğu input zaten >=16px; bu kural
 * sadece daha küçük boyut belirten yerlerde devreye girer.
 * ============================================================ */
@media (max-width: 600px) {
	body input[type="text"],
	body input[type="email"],
	body input[type="tel"],
	body input[type="number"],
	body input[type="password"],
	body input[type="search"],
	body input[type="url"],
	body input[type="date"],
	body input[type="time"],
	body select,
	body textarea {
		font-size: max(16px, 1rem) !important;
	}
}

/* ============================================================
 * 4. Number input spinner — cross-browser kaldırma
 *
 * Custom stepper button'larımız (qty, checkout) varken native
 * spinner çift kontrol oluyor. Firefox için -moz, WebKit için
 * appearance: none.
 * ============================================================ */
input[type="number"].whoop-no-spinner,
input[type="number"].tier-qty-input,
input[type="number"].whoop-checkout-qty-input,
input[type="number"].qty {
	-moz-appearance: textfield;
	appearance: textfield;
}
input[type="number"].whoop-no-spinner::-webkit-outer-spin-button,
input[type="number"].whoop-no-spinner::-webkit-inner-spin-button,
input[type="number"].tier-qty-input::-webkit-outer-spin-button,
input[type="number"].tier-qty-input::-webkit-inner-spin-button,
input[type="number"].whoop-checkout-qty-input::-webkit-outer-spin-button,
input[type="number"].whoop-checkout-qty-input::-webkit-inner-spin-button,
input[type="number"].qty::-webkit-outer-spin-button,
input[type="number"].qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ============================================================
 * 5. Custom select arrow — cross-browser tutarlı görünüm
 *
 * Safari, Firefox ve Chrome native select arrow'ları farklı.
 * Custom SVG arrow ekleyip native arrow'ı bastırıyoruz. Sadece
 * .whoop-select / WC select'lere uygulanıyor; başka eklenti
 * select'lerini bozmaz.
 * ============================================================ */
body.woocommerce-checkout select,
body.woocommerce select,
.whoop-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 50%,
		calc(100% - 12px) 50%;
	background-size:
		6px 6px,
		6px 6px;
	background-repeat: no-repeat;
	padding-right: 36px !important;
}
/* Firefox text color override quirk — select option color */
body.woocommerce-checkout select::-ms-expand,
body.woocommerce select::-ms-expand {
	display: none;
}

/* ============================================================
 * 6. Firefox custom scrollbar — webkit eşdeğeri
 *
 * Yatay scroll alanlarda (.feature-track vb.) ::-webkit-scrollbar
 * stilleri Firefox'ta görünmüyor. scrollbar-color / scrollbar-width
 * standart property'leri ile karşılığını verelim.
 * ============================================================ */
.feature-track,
.features .feature-track,
.tier-bundle-offers,
.whoop-product-bundle-offers,
.editorial-carousel,
.checkout-summary {
	scrollbar-width: thin;
	scrollbar-color: rgba(107, 61, 240, 0.4) transparent;
	/* Yatay scroll'da pull-to-refresh chain'i engelle — kullanıcı kart
	 * dizisinin sonuna gelince sayfa altına geçmesin. */
	overscroll-behavior-x: contain;
}

/* ============================================================
 * 7. Tap highlight rengi kaldır (mobilde gri flash önleme)
 * ============================================================ */
a, button, [role="button"], input, select, textarea, label {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ============================================================
 * 8. prefers-reduced-motion — kullanıcı azaltılmış hareket
 *
 * Sistem ayarında "azaltılmış hareket" seçili kullanıcılar için
 * tüm animasyon/transition'lar minimuma indirilir. Tasarım
 * static görünür ama erişilebilir kalır.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
 * 9. Forced-colors / Windows High Contrast
 *
 * High Contrast modunda border ve focus indicator'ların
 * görünür kalması için. Background-image'lar bu modda kaldırılır.
 * ============================================================ */
@media (forced-colors: active) {
	.btn, .btn-primary, .btn-outline, button {
		border: 1px solid ButtonText;
	}
	a:focus-visible, button:focus-visible, input:focus-visible,
	select:focus-visible, textarea:focus-visible {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}

/* ============================================================
 * 10. :focus-visible fallback (eski Safari)
 *
 * :focus-visible Safari 15.4+ ile destekli. Daha eski Safari'de
 * :focus için minimum görünür outline. Modern tarayıcılarda
 * :focus-visible kuralı önceliği alır.
 * ============================================================ */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus, [role="button"]:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible {
	outline: 2px solid #6b3df0;
	outline-offset: 2px;
}
/* Klavye kullanıcısı dışında focus halka göstermesin (modern). */
@supports selector(:focus-visible) {
	a:focus:not(:focus-visible),
	button:focus:not(:focus-visible),
	input:focus:not(:focus-visible),
	select:focus:not(:focus-visible),
	textarea:focus:not(:focus-visible) {
		outline: none;
	}
}

/* ============================================================
 * 11. overscroll-behavior — pull-to-refresh kaza önleme
 *
 * Checkout / modal içinde mobilde aşağı/yukarı çekiş, parent
 * sayfayı kaydırmasın.
 * ============================================================ */
.biitest-popup,
.biitest-modal,
.biitest-checkout-footer,
.modal,
.dialog {
	overscroll-behavior: contain;
}

/* ============================================================
 * 12. text-size-adjust — Safari iOS otomatik yazı boyutlandırma
 *     yatay scroll'da yazı boyutunu büyütmesini önle.
 * ============================================================ */
html {
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* ============================================================
 * 12b. Checkout reassurance section
 *
 * /odeme/ sayfasında footer'dan ÖNCE render olan HIW video + steps
 * blokları için tutarlı dikey ritim. Focused-checkout body class'ı ile
 * sınırlı; başka sayfalardaki block görünümünü değiştirmez.
 * ============================================================ */
body.biitest-focused-checkout .biitest-checkout-reassurance {
	background: #fff;
	border-top: 1px solid rgba(38, 18, 70, 0.06);
}
body.biitest-focused-checkout .biitest-checkout-reassurance .hiw-video {
	padding-top: clamp(32px, 5vw, 64px);
	padding-bottom: clamp(8px, 2vw, 24px);
}
body.biitest-focused-checkout .biitest-checkout-reassurance .hiw-steps {
	padding-top: clamp(8px, 2vw, 24px);
	padding-bottom: clamp(40px, 6vw, 80px);
}

/* ============================================================
 * 13. SVG güvenlik — width/height eksik SVG'lerde Safari 15 öncesi
 *     sıfır boyutta render edebilir. Parent CSS boyut vermezse
 *     default makul boyut.
 * ============================================================ */
svg:not([width]):not([height]) {
	width: 1em;
	height: 1em;
}
/* Tema spesifik wrapper'lar zaten boyut veriyor — bu sadece güvenlik. */
.hiw-step__icon svg,
.qsum-product__media svg,
.whoop-checkout-qty svg,
.tier-qty svg,
.btn svg {
	width: auto;
	height: auto;
}

/* ============================================================
 * 14. Print stylesheet — sipariş özeti / thank-you sayfası için
 *     yazdırılabilir görünüm. Header, footer, navigasyon, popup
 *     ve interactive element'ler kaldırılır. Sadece sipariş data'sı
 *     ve iletişim bilgisi kalır.
 * ============================================================ */
@media print {
	/* Sıfırla — bütün interactive ve dekoratif element'leri kaldır. */
	header,
	.site-header,
	.biitest-checkout-header,
	footer,
	.site-footer,
	.biitest-checkout-footer,
	nav,
	.whoop-cart-popup,
	.biitest-popup,
	.lepopup-overlay,
	.grecaptcha-badge,
	.chaty-widget,
	[class^="chaty-"],
	#wpforms-chat,
	.whatsapp-button,
	.feature-track,
	.featured-slider,
	.tier-bundle-offers,
	.hiw-video,
	.hiw-steps,
	.story-page-hero,
	.tier-cta,
	.whoop-product-bundle-offers,
	.product_meta,
	.biitest-bill-different-toggle,
	form input[type="submit"],
	.btn,
	button {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
		font-size: 11pt !important;
		line-height: 1.4 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Sipariş özeti / fatura kartlarını sayfaya yay. */
	.woocommerce-order,
	.woocommerce-order-details,
	.woocommerce-order-overview,
	.woocommerce-customer-details,
	.order_details,
	#order_review,
	.qsum-product,
	.shop_table {
		break-inside: avoid;
		page-break-inside: avoid;
		box-shadow: none !important;
		border: 1px solid #ddd !important;
		background: #fff !important;
		padding: 12pt !important;
		margin: 0 0 12pt !important;
		border-radius: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	/* Total — vurgulu kalsın ama yazdırılırken kontrast yeterli. */
	.shop_table tfoot tr.order-total th,
	.shop_table tfoot tr.order-total td {
		font-size: 13pt !important;
		font-weight: 800 !important;
		color: #000 !important;
		border-top: 2px solid #000 !important;
	}

	/* Linkler URL'i de göstersin (yazdırılan kâğıtta tıklanamaz). */
	a[href]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}
	a[href^="javascript:"]::after,
	a[href^="#"]::after,
	a[href^="tel:"]::after,
	a[href^="mailto:"]::after {
		content: "";
	}

	/* Page break davranışı. */
	h1, h2, h3, h4 {
		break-after: avoid;
		page-break-after: avoid;
	}
	tr, .cart_item, .qsum-product {
		break-inside: avoid;
		page-break-inside: avoid;
	}
}