/* ============================================================================
   MZR PHONE INPUT — intl-tel-input GÜÇLÜ KAL KİMLİK KATMANI
   guclukal.com · Carmed İlaç
   ----------------------------------------------------------------------------
   Bağımlılık : 'mzr-intl-tel-input' (assets/vendor/intl-tel-input/css/…)
                Bu dosya vendor CSS'ten SONRA yüklenir; bu yüzden eşit
                özgüllükteki kurallarda bu dosya kazanır.
   Token      : guclukal-tokens.css (child tema, :root üzerinde --gk-*)
   ----------------------------------------------------------------------------
   NE İŞE YARAR
   intl-tel-input JS'in çalışma anında ürettiği DOM'u (bayrak seçici, açılır
   ülke paneli, arama kutusu, ülke listesi) Güçlü Kal kimliğiyle uyumlu hale
   getirir. Vendor CSS EZİLMEZ; üstüne ince bir katman yazılır. Renk ve ölçü
   kararlarının çoğu vendor'ın kendi `--iti-*` değişkenleri `--gk-*` token'lara
   köprülenerek verilir (bölüm 0) — böylece kural sayısı düşük kalır.

   DÖRT YERLEŞİM DE KAPSANIR
   1. .gk-fld              → eczacı + partner başvuru formları
   2. .woocommerce-form-row → Hesabım > eczane bilgileri
   3. .wpcf7-form-control-wrap → Contact Form 7
   4. .iti--fullscreen-popup   → mobil tam ekran ülke seçici

   İKİ SERT KURAL
   • Sabit hex renk YAZILMAZ. Her renk `var(--gk-…, fallback)` kalıbındadır.
     Fallback ZORUNLUDUR: CF7 formları `.gk-scope` DIŞINDA olabilir ve açılır
     panel `document.body`'ye taşındığında hiçbir kapsam sınıfını görmez.
   • Köşe yarıçapı SIFIR (kimlik kılavuzu bölüm 7). Vendor'ın 3px/1px
     yarıçapları tek tek sıfırlanır.

   KAPSAM UYARISI
   Açılır panel `iti--detached-country-selector` modunda `<body>` altına
   taşınır — yani `.gk-scope` ve `.gk-b2b` kapsamlarının DIŞINA çıkar. Bu
   yüzden panel içindeki vurgu renkleri anlamsal `--gk-color-action`
   (`.gk-b2b` içinde petrole döner) yerine kapsamdan bağımsız ham marka
   token'ıyla (`--gk-red-600`) verilir. Aksi halde aynı panel, formun içinde
   petrol, gövdeye taşındığında kırmızı görünürdü.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · TOKEN KÖPRÜSÜ — vendor değişkenleri → Güçlü Kal token'ları
   Hem girdi sarmalayıcısına (.iti--input-container) hem gövdeye taşınan
   panele (.iti--detached-country-selector) uygulanır; ikisi de `.iti` taşır.
   NOT: --iti-flag-width / --iti-flag-height ELLENMEZ. Vendor bunları :root'ta
   birbirinden türetir (height = width * 3/4); alt düğümde width'i değiştirmek
   oranı bozar, bayraklar kayar.
   --------------------------------------------------------------------------- */
.iti {
	--iti-border-width: var(--gk-border, 1px);
	--iti-border-color: var(--gk-color-border-strong, #D1CFCD);
	--iti-country-selector-bg: var(--gk-color-surface, #FFFFFF);
	--iti-hover-color: var(--gk-color-surface-sunken, #F3F1EF);
	--iti-icon-color: var(--gk-color-text-muted, #6A6967);

	/* Yatay ritim: bayrak, girdi metniyle aynı hizadan başlasın. */
	--iti-spacer-horizontal: var(--gk-input-px, 1rem);
	--iti-arrow-padding: var(--gk-space-2, 0.5rem);
	--iti-mobile-popup-margin: var(--gk-space-4, 1rem);

	--iti-strict-reject-flash-color: var(--gk-color-danger-soft, #FFEFED);

	/* Açılır panelin katman sırası. WoodMart'ta ölçülen değerler:
	   .wd-toolbar 350 · .whb-main-header 390 · .whb-clone (yapışkan başlık) 391
	   .wd-side-hidden (mobil menü) 500, popup açıkken 900
	   .mfp-wrap 1103 / .mfp-content 1105 (WoodMart popup — form bunun İÇİNDE
	   olabilir, panel ise gövdeye taşınır: paneli 1105'in de üstüne çıkarmak
	   ZORUNLU) · .wd-cookies-popup 1510 · .pswp 1500 / 1620.

	   2026-07-27 DÜZELTMESİ — envanter eksikti. Sayfada TEMA DIŞI iki sabit
	   katman daha var ve ikisi de 9999'da:
	     • `.meshut-contact-buttons` (yüzen WhatsApp/telefon/e-posta düğmeleri)
	     • iyzico'nun `Overlay__Wrapper-…` bindirmesi (sayfa altındaki şerit)
	   Mobilde ÖLÇÜLDÜ: 1660'taki tam ekran panel bu düğmelerin ALTINDA kalıyor,
	   düğmeler ülke satırlarının üstüne biniyor ve dokunmayı engelliyordu.
	   Satır içi panelde aynı çakışma ölçülmedi ama iki katman da sayfa
	   genelinde `position: fixed` olduğu için ikisi birden yükseltildi.
	   Atlama bağlantılarının 999999'u hâlâ üstte kalır. */
	--mzr-pi-z: 10000;
	--mzr-pi-z-fullscreen: 10010;
}

/* ---------------------------------------------------------------------------
   1 · GİRDİ SARMALAYICISI
   Vendor `.iti`'yi inline-block yapar; form alanı her zaman tam genişliktir.
   --------------------------------------------------------------------------- */
.iti--input-container {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Odak halkası artık KAPSAYICIDA. Böylece bayrak düğmesine klavyeyle
   gelindiğinde de alanın tamamı halkalanır. Ölçüler `.gk-fld input:focus`
   ile birebir aynı (2px solid + 1px offset). */
.iti--input-container:focus-within {
	outline: var(--gk-border-thick, 2px) solid var(--gk-color-focus, #D52433);
	outline-offset: 1px;
}

/* Girdinin kenarlığı da odakta renk değiştirsin — `.gk-fld input:focus` ile
   aynı davranış. */
.iti--input-container:focus-within .iti__tel-input {
	border-color: var(--gk-color-focus, #D52433);
}

/* Girdinin KENDİ halkası kapatılır. Halkayı artık kapsayıcı çiziyor ve iki
   kural farklı offset kullandığı için (child tema: `input:focus-visible`
   → offset 2px, `.gk-fld input:focus` → 1px) üst üste iki halka çizilirdi.
   Erişilebilirlik kaybı YOKTUR: :focus-within girdi odaklandığında da
   tetiklenir ve halka aynı kutuyu çevreler. */
.iti--input-container .iti__tel-input:focus,
.iti--input-container .iti__tel-input:focus-visible {
	outline: none;
}

/* Girdinin dolgusunu (padding-left) JS satır içi stille yazar — burada
   ASLA padding tanımlanmaz, yoksa metin bayrağın altına girer. */
.iti__tel-input {
	border-radius: var(--gk-radius, 0);
	font-family: var(--gk-font-sans, inherit);
}

/* ---------------------------------------------------------------------------
   2 · ÜLKE SEÇİCİ DÜĞMESİ (girdinin sol ucundaki bayrak + kod)
   Bu bir <button>'dır ve temanın genel düğme kuralına yakalanır; boya ve
   tipografi sıfırlaması bölüm 9'dadır (aynı kök neden orada anlatılıyor).
   --------------------------------------------------------------------------- */
.iti__selected-country {
	border-radius: var(--gk-radius, 0);
}

/* Seçiciyi girdiden ayıran hairline — keskin dilin taşıyıcısı.
   Kapsayıcı 1px içeriden başladığı için çizgi alanın tam yüksekliğini kaplar.
   Genişlik artışını JS zaten ölçtüğü için girdi dolgusu kendiliğinden uyar. */
.iti__selected-country-primary {
	border-inline-end: var(--gk-border-hairline, 1px) solid var(--gk-color-border, #E5E3E1);
}

.iti__selected-dial-code {
	color: var(--gk-color-text, #404041);
	font-variant-numeric: tabular-nums lining-nums;
}

/* Düğmenin KENDİ odak halkası kapatılır: halkayı kapsayıcı
   (.iti--input-container:focus-within) çiziyor, iki halka üst üste binmesin.
   `.gk-scope :focus-visible` (0,0,2,0) kuralını geçmek için üç sınıflık
   özgüllük kullanılır. Erişilebilirlik kaybı YOKTUR — :focus-within her
   durumda tetiklenir. */
.iti__selected-country:focus,
.iti__selected-country:focus-visible,
.gk-scope .iti__selected-country:focus-visible {
	outline: none;
}

/* Odaklanan parçayı yine de belli et: düğme klavyeyle seçiliyken zemin dolar. */
.iti__selected-country:focus-visible .iti__selected-country-primary {
	background-color: var(--iti-hover-color);
}

/* Bayrak — yarıçap sıfır, çevresi bulanık gölge yerine net hairline. */
.iti__flag {
	border-radius: 0;
	box-shadow: 0 0 0 1px rgba(var(--gk-gray-1000-rgb, 11, 10, 9), 0.16);
}

/* ---------------------------------------------------------------------------
   3 · AÇILIR PANEL
   İki mod: satır içi (panel .iti içinde) ve ayrık (panel <body> altında).
   Her ikisinde de kart dili aynıdır: keskin köşe, hairline kenar, üst katman
   olduğu için YUMUŞAK gölge (kimlik kılavuzu 7.2: sert gölge yalnız kartta).

   SÜRÜM NOTU: v25 öncesinde bu panelin sınıfı `.iti__dropdown-content` idi.
   Yüklü sürüm 29.1.2'de o sınıf ARTIK ÜRETİLMİYOR; karşılığı
   `.iti__country-selector`. Vendor yükseltilir/düşürülürse burası ve
   bölüm 4-5 birlikte gözden geçirilmelidir.
   --------------------------------------------------------------------------- */
.iti__country-selector {
	border-radius: var(--gk-radius, 0);
	background-color: var(--gk-color-surface, #FFFFFF);
	color: var(--gk-color-text, #404041);
	font-family: var(--gk-font-sans, inherit);
}

/* Vendor bu iki seçiciye kenarlık + 1px 1px 4px gölge verir; ikisi de burada
   kimlik değerleriyle değiştirilir. `overflow: hidden` köşelerin keskin
   kalmasını ve listenin kenardan taşmamasını garanti eder. */
.iti--inline-country-selector .iti__country-selector,
.iti--fullscreen-popup .iti__country-selector {
	border: var(--gk-border-hairline, 1px) solid var(--gk-color-border-strong, #D1CFCD);
	border-radius: var(--gk-radius, 0);
	box-shadow: var(--gk-shadow-3, 0 8px 24px rgba(11, 10, 9, 0.12));
	overflow: hidden;
}

/* Katman sırası — bölüm 0'daki gerekçeye bakınız.
   Satır içi modda vendor'ın kuralı (0,0,3,0) özgüllükte olduğu için burada
   dört sınıflık zincir gerekir. */
.iti.iti--input-container:not(.iti--detached-country-selector) .iti__country-selector {
	z-index: var(--mzr-pi-z, 10000);
}

.iti.iti--detached-country-selector {
	z-index: var(--mzr-pi-z, 10000);
}

/* 3.1 · PANEL YÜKSEKLİĞİ — vendor'ın SATIR İÇİ stilini geri alır.
   ----------------------------------------------------------------------------
   `countrySearch` açıkken kütüphane paneli açılışta bir kez ölçüp yüksekliğini
   `element.style.height` ile SABİTLİYOR (minified `#i1()`; `this.#_ !== void 0`
   koruması yüzünden ölçüm bir daha güncellenmiyor). Amacı kullanıcı yazarken
   panelin zıplamaması. Bedeli: arama daralınca panel küçülmüyor, tek sonuçta
   altında ~275px boş beyaz alan kalıyor.

   `height: auto` panelin FİLTRELENMEMİŞ yüksekliğini DEĞİŞTİRMEZ: vendor ölçümü
   gizli bir `.iti .iti--inline-country-selector` klonu üzerinde yapıyor, yani
   bölüm 5'teki `max-height: min(320px, 50vh)` sınırımız klona da uygulanıyor —
   iki yol da aynı sayıyı (48 + 320 + 1 = 369) veriyor. Sadece sonuç azalınca
   panel içeriğe iner.

   Konumlandırma bozulmaz: kütüphane yukarı/aşağı açılma yönünü kendi ölçtüğü
   (değişmeyen) `this.#_` değerine göre seçiyor ve panele ya `top` ya `bottom`
   veriyor; iki durumda da sabitlenen kenar yerinde kalır.

   Tam ekran (mobil) modu KAPSAM DIŞI: orada panel ekranı doldurmalı.

   `!important` ZORUNLU — satır içi stil başka türlü geçilemez. Dosyadaki iki
   `!important`tan biri budur (diğeri bölüm 9.1). */
.iti:not(.iti--fullscreen-popup) .iti__country-selector {
	height: auto !important;
}

/* ---------------------------------------------------------------------------
   4 · ÜLKE ARAMA KUTUSU
   Form alanlarıyla aynı yazı tipi, aynı punto, aynı zemin. Alt sınırı
   `.iti__search-input-wrapper`'ın hairline'ı çizer — kutuya ayrıca kenarlık
   verilmez, iki çizgi üst üste binmesin.

   ÖZGÜLLÜK NOTU — bu kutu bir `input[type="search"]`tir ve panel `.gk-fld`
   alanının İÇİNDE üretilir. Bu yüzden iki kural onu sıradan bir form alanı
   sanıp ele geçiriyordu:
     • guclukal-components.css  `.gk-fld input[type="search"]`  (0,2,1)
     • WoodMart base.css        `input[type="search"]`          (0,1,1)
   İkisi de bu dosyadan SONRA yüklenir ve tek sınıflık `.iti__search-input`
   (0,1,0) kuralını yener. Ölçülen sonuçlar: vendor'ın ikonlara yer açan
   `padding-inline` calc()'i silinip 16px'e düşüyor ve BÜYÜTEÇ İKONU YAZININ
   ÜSTÜNE biniyordu; kutu 48px form alanı yüksekliğine, `content-box` kutu
   modeline ve fazladan 1px kenarlığa zorlanıyordu (alt çizgi çift görünüyordu).
   Çözüm: (0,3,0) zinciri + vendor değerlerinin açıkça geri yazılması. Zincir
   hem satır içi hem ayrık (panel <body>'ye taşınmış) modda tutar; ikisinde de
   `.iti` en üstte durur. Aynı kök nedenin düğme tarafı için bkz. bölüm 9.
   --------------------------------------------------------------------------- */
.iti .iti__country-selector .iti__search-input {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	/* Kenarlık YOK: alt çizgiyi `.iti__search-input-wrapper` çiziyor. */
	border: 0;
	border-radius: var(--gk-radius, 0);
	background-color: var(--gk-color-surface, #FFFFFF);
	box-shadow: none;
	color: var(--gk-color-text, #404041);
	font-family: var(--gk-font-sans, inherit);
	/* 16px ZORUNLU — iOS'ta otomatik yakınlaştırmayı engeller. */
	font-size: var(--gk-input-fs, 1rem);
	font-weight: var(--gk-fw-regular, 400);
	line-height: var(--gk-lh-normal, 1.45);
	padding-block: var(--gk-space-3, 0.75rem);
	/* Vendor'ın ikon payları: solda büyüteç, sağda temizle düğmesi. */
	padding-inline:
		calc(var(--iti-spacer-horizontal) + var(--iti-globe-icon-size) + var(--iti-spacer-horizontal))
		calc(var(--iti-spacer-horizontal) + var(--iti-clear-icon-size) + var(--iti-spacer-horizontal));
	-webkit-appearance: none;
	appearance: none;
}

/* Tarayıcının `type="search"` için bastığı YERLİ temizle düğmesi kaldırılır.
   WoodMart `input[type="search"]`e `appearance: textfield` verdiği için o
   düğme geri geliyor ve kütüphanenin kendi `.iti__search-clear` düğmesiyle
   yan yana iki ✕ olarak görünüyordu. */
.iti .iti__country-selector .iti__search-input::-webkit-search-cancel-button,
.iti .iti__country-selector .iti__search-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.iti .iti__country-selector .iti__search-input::placeholder {
	color: var(--gk-color-text-subtle, #8C8A88);
	opacity: 1;
}

.iti__search-input-wrapper {
	border-bottom-color: var(--gk-color-border, #E5E3E1);
}

/* Halka İÇERİ çizilir (negatif offset): panelin kenarlığıyla çakışmasın.
   `.gk-scope :focus-visible` kuralını geçmek için üç sınıflık zincir.

   ÖLÇÜM NOTU (2026-07-27): negatif offset HER YERDE geçerli değil.
   `registration-form.css` içindeki `.gk-scope :focus-visible` kuralı
   `outline-offset: 2px !important` yazıyor; `!important` özgüllükten
   bağımsız kazandığı için eczacı/partner formlarında halka 2px DIŞARIYA
   çizilir. Sonuç kabul edilebilir: panelin `overflow: hidden`i taşan kısmı
   kırpıyor ve halka panel kenarına oturmuş görünüyor. Ayrık (mobil) modda
   panel `.gk-scope` dışında kaldığı için aşağıdaki -2px geçerli olur.
   `!important` savaşına girmemek için bilinçli olarak DÜZELTİLMEDİ. */
.iti__country-selector .iti__search-input:focus,
.iti__country-selector .iti__search-input:focus-visible {
	outline: var(--gk-border-thick, 2px) solid var(--gk-color-focus, #D52433);
	outline-offset: -2px;
}

/* Temizle düğmesi de bir <button>'dır — bkz. bölüm 9. */

/* ---------------------------------------------------------------------------
   5 · ÜLKE LİSTESİ
   Zebra deseni YOK — ayrımı 1px hairline yapar (kimlik kılavuzu bölüm 6).
   --------------------------------------------------------------------------- */
.iti__country-list {
	overflow-y: auto;
	overscroll-behavior: contain; /* mobilde sayfa kaydırmasına zincirlenmesin */
	scrollbar-width: thin;
}

/* Satır içi panelin 185px'lik vendor sınırı fazla kısa; tam ekran modunda
   ise panel zaten ekranı doldurur, oraya sınır konmaz. */
.iti:not(.iti--fullscreen-popup) .iti__country-list {
	max-height: min(320px, 50vh);
}

.iti__country {
	padding-block: var(--gk-space-3, 0.75rem);
	font-size: var(--gk-fs-sm, 0.875rem);
	line-height: var(--gk-lh-normal, 1.45);
	color: var(--gk-color-text, #404041);
	border-radius: 0;
}

.iti__country + .iti__country {
	border-top: var(--gk-border-hairline, 1px) solid var(--gk-color-border, #E5E3E1);
}

/* Klavye/fare vurgusu — zemin `--iti-hover-color` üzerinden zaten sunken
   griye köprülendi; burada yalnız metin kontrastı artırılır. */
.iti__country.iti__highlight {
	color: var(--gk-color-text-strong, #2E2D2B);
}

.iti__country-name {
	font-weight: var(--gk-fw-regular, 400);
}

.iti__dial-code {
	color: var(--gk-color-text-muted, #6A6967);
	font-variant-numeric: tabular-nums lining-nums;
}

/* Seçili ülkenin tiki. Panel gövdeye taşınabildiği için anlamsal
   --gk-color-action DEĞİL, kapsamdan bağımsız marka kırmızısı kullanılır
   (bkz. dosya başındaki KAPSAM UYARISI). */
.iti__country-check {
	color: var(--gk-red-600, #D52433);
}

.iti__no-results {
	font-size: var(--gk-fs-sm, 0.875rem);
	line-height: var(--gk-lh-normal, 1.45);
	color: var(--gk-color-text-muted, #6A6967);
	padding: var(--gk-space-8, 2rem) var(--gk-space-4, 1rem);
}

/* ---------------------------------------------------------------------------
   6 · MOBİL TAM EKRAN SEÇİCİ
   WoodMart'ın yapışkan başlığı (391), mobil menüsü (500/900) ve popup'ı
   (1105) bu katmanın ALTINDA kalmalıdır.
   --------------------------------------------------------------------------- */
.iti--fullscreen-popup.iti--detached-country-selector {
	z-index: var(--mzr-pi-z-fullscreen, 10010);
	background-color: var(--gk-color-overlay, rgba(11, 10, 9, 0.55));
	/* Çentikli ekranlarda panel durum çubuğunun altına girmesin. */
	padding-block:
		max(var(--gk-space-4, 1rem), env(safe-area-inset-top))
		max(var(--gk-space-4, 1rem), env(safe-area-inset-bottom));
}

/* Dokunmatik hedef en az 44px (kimlik kılavuzu bölüm 2 / WCAG 2.2 AA). */
.iti--fullscreen-popup .iti__country {
	min-height: 44px;
	padding-block: var(--gk-space-3, 0.75rem);
	padding-inline: var(--iti-spacer-horizontal);
}

/* NOT: tam ekran modunun arama kutusu ayrıca tanımlanmaz. Bölüm 4'teki
   (0,3,0) zinciri `.iti` üzerinden her iki modu da kapsıyor; buraya daha
   düşük özgüllükte bir kural yazılırsa SESSİZCE uygulanmaz. */

/* ---------------------------------------------------------------------------
   7 · HATA DURUMU
   Hata hem KENARLIKLA hem METİNLE bildirilir — yalnız renkle bildirilen hata
   erişilebilir değildir (kimlik kılavuzu bölüm 2).
   Özgüllük notu: `.gk-fld input[type="tel"]` (0,0,2,1) ve WooCommerce'in
   `.woocommerce form .form-row input.input-text` (0,0,3,2) kurallarını
   !important olmadan geçmek için sınıf zinciri kullanılır.
   --------------------------------------------------------------------------- */
.iti--input-container input.iti__tel-input.mzr-pi-invalid,
.gk-fld .iti--input-container input.iti__tel-input.mzr-pi-invalid,
.woocommerce-form-row .iti--input-container input.iti__tel-input.mzr-pi-invalid,
.wpcf7-form-control-wrap .iti--input-container input.iti__tel-input.mzr-pi-invalid {
	border-color: var(--gk-danger-500, #A81622);
	box-shadow: inset 0 0 0 1px var(--gk-danger-500, #A81622);
}

/* Ayraç çizgisi de hatayı takip etsin — bayrak seçici alanın dışında kalmasın. */
.iti--input-container:has(.mzr-pi-invalid) .iti__selected-country-primary {
	border-inline-end-color: var(--gk-danger-500, #A81622);
}

/* Hata metni — punto ve satır yüksekliği `.gk-hint` ile aynı. */
.mzr-pi-error {
	display: block;
	margin-top: var(--gk-space-2, 0.5rem);
	font-size: var(--gk-fs-2xs, 0.75rem);
	line-height: var(--gk-lh-normal, 1.45);
	font-weight: var(--gk-fw-medium, 500);
	color: var(--gk-danger-500, #A81622);
}

/* `.gk-fld` bir grid ve satır aralığını kendisi verir; üst boşluk iki kez
   uygulanmasın. */
.gk-fld > .mzr-pi-error {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
   8 · YERLEŞİM UYARLAMALARI
   --------------------------------------------------------------------------- */

/* 8.1 · WooCommerce — Hesabım > eczane bilgileri.
   Alan `<p class="woocommerce-form-row form-row form-row-first">` içindedir;
   yarım genişlikli float satırlarda da kapsayıcı satırın tamamını kaplar.
   Tema `.form-row *` üzerinden display/width dayattığında kural burada
   yeniden söylenmiş olur. */
.woocommerce-form-row .iti--input-container,
.form-row .iti--input-container {
	display: block;
	width: 100%;
}

/* 8.2 · Contact Form 7 — girdi bir `<span class="wpcf7-form-control-wrap">`
   içindedir. Satır içi bir kapsayıcıda `width: 100%` en yakın BLOK ataya göre
   çözülür ve alan taşabilir; sarmalayıcıyı blok yaparak bunu engelleriz. */
.wpcf7-form-control-wrap:has(> .iti--input-container) {
	display: block;
	width: 100%;
}

/* 8.3 · Dokunmatik cihazlarda iOS otomatik yakınlaştırmasını engelle.
   Tema CF7/WooCommerce girdisine 14px verse bile telefon alanı 16px kalır. */
@media (pointer: coarse) {
	.iti.iti--input-container input.iti__tel-input,
	.iti .iti__country-selector input.iti__search-input {
		font-size: max(16px, var(--gk-input-fs, 1rem));
	}
}

/* 8.4 · WordPress yönetim ekranı — orada girdiler sabit genişliklidir
   (.regular-text = 25em). Sarmalayıcı tam genişliğe zorlanmaz. */
.wp-admin .iti--input-container {
	display: inline-block;
	width: auto;
	max-width: 100%;
}

/* ---------------------------------------------------------------------------
   9 · TEMA SAVUNMASI — WoodMart'ın genel <button> kuralı
   ----------------------------------------------------------------------------
   WoodMart `base.css` içinde şu kural var:

       :is(.btn, .button, button, [type="submit"], [type="button"]) { … }

   `:is()`'in özgüllüğü en özgül argümanından gelir (`.btn` → 0,1,0). Bu dosya
   temadan ÖNCE yüklendiği için eşitlikte tema kazanır — ve kütüphanenin kendi
   kuralları da (0,1,0) olduğu için onlar da eziliyordu. Tarayıcıda ölçülen
   somut sonuçlar:

     • `.iti__hide { display: none }` YENİLDİ. Arama kutusunun TEMİZLE düğmesi
       gizli olması gerekirken 55×42'lik gri bir blok olarak duruyor, arama
       alanını daraltıyor ve satırın sağında boş bir kutu gibi görünüyordu.
     • Bayrak düğmesi (`.iti__selected-country`) tema düğmesine dönüştü:
       #F3F3F3 zemin, 42px min-height, 5px/20px dolgu, `position: relative`.
       `text-transform`, `font-weight`, `letter-spacing` MİRAS ALINAN
       özellikler olduğu için içindeki `+90` de BÜYÜK HARF / 600 / 13px /
       0.52px aralık aldı — girdiye yazılan numarayla uyumsuzdu.

   Vendor bu iki düğmede zaten doğru sıfırlamayı yapıyor; aşağıda YALNIZCA
   onun değerleri daha yüksek özgüllükle yeniden söyleniyor — yeni bir görsel
   karar verilmiyor. Tema ileride başka bir düğme özelliği dayatırsa 9.2'deki
   listeye eklenir.

   Kapsam notu: `.iti` zinciri hem satır içi hem ayrık modda tutar; ayrık
   modda panel `<body>` altına taşınır ama sarmalayıcısı yine `.iti` taşır.
   --------------------------------------------------------------------------- */

/* 9.1 · Kütüphanenin gizleme yardımcısı HER ZAMAN kazanmalı.
   Dosyadaki iki `!important`tan biri (diğeri bölüm 3.1) ve bilinçlidir: kural
   "bu düğüm hiç çizilmesin" der, yani her `display` bildiriminden güçlü olmak
   ZORUNDADIR.
   Özgüllükle çözmek denendi ve tuzak çıktı — 9.2'deki `display: flex` de
   (0,2,0) olduğu ve SONRA geldiği için gizleme kuralını eziyordu; temizle
   düğmesi yine görünür kalıyordu. Sıraya bağlı bir çözüm, bu bölüme ileride
   eklenecek her yeni kuralda aynı hatayı yeniden üretirdi. */
.iti__hide {
	display: none !important;
}

/* 9.2 · Widget'ın düğmeleri düğme DEĞİL, ikon taşıyıcısıdır. */
.iti .iti__selected-country,
.iti .iti__search-clear {
	display: flex;
	align-items: center;
	min-height: 0;
	margin: 0;
	border: 0;
	box-shadow: none;
	text-shadow: none;
	gap: 0;
	background-color: transparent;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-align: inherit;
	vertical-align: baseline;
}

/* 9.3 · Kutu ölçüleri iki düğmede farklıdır; vendor değerleri birebir. */
.iti .iti__selected-country {
	height: 100%;
	padding: 0;
	/* `+90` girdiye yazılan numarayla aynı puntoda okunsun. */
	font-size: var(--gk-input-fs, 1rem);
}

.iti .iti__search-clear {
	position: absolute;
	right: calc(var(--iti-spacer-horizontal) / 2);
	justify-content: center;
	padding: calc(var(--iti-spacer-horizontal) / 2);
	border-radius: var(--gk-radius, 0);
	color: var(--gk-color-text-muted, #6A6967);
	transition: background-color 0.15s;
}

.iti .iti__search-clear:hover,
.iti .iti__search-clear:focus-visible {
	background-color: var(--iti-hover-color);
	color: var(--gk-color-text, #404041);
}

/* ---------------------------------------------------------------------------
   10 · HAREKET AZALTMA
   Vendor, reduced-motion'da sarsma animasyonunu yanıp sönmeye çevirir; kimlik
   kuralı gereği animasyon TAMAMEN kapatılır. Geçersiz numara yine kırmızı
   kenarlık ve hata metniyle bildirildiği için bilgi kaybı olmaz.
   Bu bölüm bilerek EN SONDA durur: temizle düğmesinin geçişini bölüm 9.3'te
   verilen değerin üstüne yazması gerekir (eşit özgüllük, sonraki kazanır).
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.iti.iti__strict-reject-animation .iti__tel-input,
	.iti.iti__strict-reject-animation .iti__selected-country {
		animation: none;
	}

	.iti .iti__search-clear {
		transition: none;
	}
}