/**
 * WP Finance Hub — Ön yüz stilleri (v1.5)
 *
 * TASARIM İLKELERİ:
 *  1. MOBİL ÖNCELİKLİ: Temel kurallar dar ekran içindir; geniş ekran
 *     iyileştirmeleri `min-width` sorgularıyla EKLENİR. Bu, mobilde
 *     "masaüstü düzenini sıkıştırma" kaynaklı taşmaları kökten önler.
 *  2. TABLO YERİNE KART: Dar ekranda tablolar yatay kaydırma yerine
 *     kartlara dönüşür; başlıklar `data-label` ile hücrenin soluna yazılır.
 *  3. TEMA ÇAKIŞMASINA DİRENÇ: Tema tabloları/butonları ezmesin diye tüm
 *     kritik özellikler açıkça sıfırlanır (appearance, margin, font).
 *  4. TOKEN TABANLI: Renk, boşluk, yuvarlaklık ve gölge değişkenlerle
 *     yönetilir; tema `--wpfh-*` değişkenlerini ezerek görünümü değiştirir.
 */

/* =========================================================================
 * TASARIM TOKENLARI
 * ===================================================================== */

.wpfh-widget {
	/*
	 * CSS DOSYA SÜRÜMÜ — teşhis için.
	 *
	 * PHP tarafı ayrıca --wpfh-version basar. İKİSİ FARKLIYSA tarayıcıya
	 * veya sunucu önbelleğine eski stil dosyası geliyor demektir. Bu ayrım
	 * önemli: PHP her zaman günceldir, statik dosya önbelleğe takılabilir
	 * ve yalnızca PHP sürümüne bakmak yanıltıcıdır.
	 */
	--wpfh-css-version: "1.42.0";

	/*
	 * RENK PALETİ
	 *
	 * Nötrler BİLİNÇLİ OLARAK NÖTR GRİ. Önceki palet slate ailesindendi
	 * (mavi tonlu gri: #f8fafc, #e2e8f0, #64748b). Nötr gri kullanan
	 * temalarda bu, bileşene hafif mavi bir sis giydiriyor ve sayfanın
	 * geri kalanından kopuk görünmesine yol açıyordu. Mavi tonlu grinin
	 * yabancılığı tek başına fark edilmez ama yan yana konunca belirgindir.
	 *
	 * Birincil ve vurgu renkleri Ayarlar > Görünüm'den değiştirilebilir;
	 * aşağıdakiler yalnızca varsayılandır ve satır içi stille ezilir.
	 */
	--wpfh-primary: #102a58;
	--wpfh-primary-600: #1b3d75;
	--wpfh-primary-soft: #eef2f7;
	--wpfh-surface: #ffffff;
	--wpfh-surface-alt: #fafafa;
	--wpfh-border: #e5e5e5;
	--wpfh-border-strong: #cccccc;
	--wpfh-text: #333333;
	--wpfh-muted: #777777;
	--wpfh-up: #15803d;
	--wpfh-up-bg: #e6f4ea;
	--wpfh-down: #b91c1c;
	--wpfh-down-bg: #fdeaea;
	--wpfh-accent: #e2a13a;
	/* Koyu zemin üzerindeki metin. Koyu temada da beyaz kalır: primary
	   rengi her iki temada da koyudur, bu yüzden kontrast korunur. */
	--wpfh-on-primary: #ffffff;

	/* Ölçek */
	--wpfh-radius: 12px;
	--wpfh-radius-sm: 8px;
	/*
	 * Boşluklar akışkan. Kap birimi (cqi) BİLİNÇLİ OLARAK kullanılmadı:
	 * kap sorgusu birimleri, kabın KENDİ üzerinde tanımlandığında dış
	 * kaba göre çözülür ve beklenenden farklı davranır. Dar kaplardaki
	 * sıkılaştırma aşağıdaki @container kuralıyla yapılır.
	 */
	--wpfh-gap: clamp(8px, 2vw, 12px);
	--wpfh-pad: clamp(10px, 3vw, 16px);
	--wpfh-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.06);
	--wpfh-shadow-lg: 0 4px 16px rgba(15, 23, 42, 0.1);

	/* Taban */
	box-sizing: border-box;
	max-width: 100%;
	/*
	 * Gövde metni renginin KENDİSİ temadan devralınır; --wpfh-text yalnızca
	 * başlık ve sayı gibi vurgulanması gereken öğelerde kullanılır. Böylece
	 * paragraf metni sayfanın geri kalanıyla aynı tonda olur.
	 */
	color: inherit;
	margin: 0 0 clamp(16px, 4vw, 24px);
	/* İç içe bileşenler (panel içindeki hesaplayıcı) alt boşluk üretmesin. */
	-webkit-text-size-adjust: 100%;

	/*
	 * TEMA UYUMU — TİPOGRAFİ DEVRALINIR.
	 * Önceden font-size: 1.0em sabitti. Taban yazı tipi 18px olan bir temada
	 * bileşen küçük ve yabancı duruyordu; 14px olan temada ise iri. Artık
	 * çevresindeki metinle aynı boyutta başlar ve iç ölçekler em ile buna
	 * göre büyür. Yazı tipi ailesi zaten devralınıyordu.
	 */
	font-family: inherit;
	font-size: inherit;

	/*
	 * Satır yüksekliği DEVRALINMAZ. Yazı tipi ve boyutu temadan gelir ama
	 * satır aralığı gelmez: taban satır yüksekliği 1.9 olan bir temada
	 * sayı tabloları gereksiz yayvan görünür ve okunması zorlaşır.
	 * Tablo verisi gövde metninden daha sıkı bir aralık ister.
	 */
	line-height: 1.5;

	/*
	 * KAPSAYICI SORGULARI — asıl mobil uyum düzeltmesi budur.
	 * Kırılım noktaları eskiden GÖRÜNÜM PENCERESİNE bakıyordu. Bu yüzden
	 * 300 piksellik bir kenar çubuğuna konan tablo, ekran geniş olduğu için
	 * masaüstü düzenini seçiyor ve taşıyordu. Artık bileşen KENDİ
	 * genişliğini sorguluyor; nereye konursa konsun doğru düzeni seçer.
	 */
	container-type: inline-size;
	container-name: wpfh;
}

.wpfh-widget *,
.wpfh-widget *::before,
.wpfh-widget *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * <pre>/<code> İÇİNE YAPIŞTIRMA KURTARMASI
 *
 * Editörde kısa kod yerine eklenti HTML'i "Kod bloğu" olarak yapıştırılırsa
 * tarayıcı içeriği düz metin gibi basar: yazılar alt alta kayar, hizalama
 * kaybolur. Bu bir kullanım hatasıdır (doğrusu `[gold_panel]` yazmaktır),
 * ancak sayfayı tamamen bozuk göstermek yerine okunabilir kılıyoruz.
 * ----------------------------------------------------------------------- */

pre .wpfh-widget,
code .wpfh-widget {
	white-space: normal;
	font-family: inherit;
	text-align: left;
	display: block;
}

pre .wpfh-widget *,
code .wpfh-widget * {
	white-space: normal;
	font-family: inherit;
}

/* -------------------------------------------------------------------------
 * TEMA ÇAKIŞMA KALKANI
 *
 * Pixwell gibi temalar `.entry-content table td` benzeri kurallar yazar.
 * Bu kuralların özgüllüğü bizimkiyle EŞİT olabildiği için, tema CSS'i
 * eklentiden sonra yüklendiğinde düzen bozulur ("yazılar kayar").
 *
 * Çözüm: tüm eklenti seçicileri `.wpfh-widget` ile öne alınarak bir
 * seviye yukarı çekilir (yukarıdaki kurallar), burada ise temanın en sık
 * ezdiği özellikler açıkça sıfırlanır. `!important` yalnızca düzeni
 * doğrudan kıran birkaç özellik için kullanılır.
 * --------------------------------------------------------------------- */

.wpfh-widget table,
.wpfh-widget thead,
.wpfh-widget tbody,
.wpfh-widget tr,
.wpfh-widget th,
.wpfh-widget td {
	/*
	 * background-COLOR da sıfırlanır. Blok yalnızca background-image'ı
	 * temizliyordu; Pixwell ise `thead` öğesine background-color veriyor
	 * ve o hayatta kalıyordu. Sonuç, tablo başlığının koyu bir bloğa
	 * dönüşmesiydi — 36.000 piksel karelik bir alan. Kullanıcı bunu
	 * eklentinin rengi sanıyordu; oysa eklenti o alana hiç dokunmuyordu.
	 * Hücrelerin kendi zeminini veren kurallar bu bloktan SONRA geldiği
	 * için ezilmez.
	 */
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	text-indent: 0;
	float: none;
	position: static;
	width: auto;
	height: auto;
	min-height: 0;
	max-width: none;
}

/* Tema bazen tüm hücreleri table-cell'e zorlar; mobil kart düzeni buna
   dayanamaz. Kart modunda display'i kilitliyoruz. */
.wpfh-widget .wpfh-table tbody tr { display: block !important; }
.wpfh-widget .wpfh-table tbody td { display: flex !important; }
.wpfh-widget .wpfh-table thead { display: none !important; }

.wpfh-widget img { max-width: 100%; height: auto; }

.wpfh-widget svg { max-width: 100%; vertical-align: middle; }

.wpfh-widget p { margin: 0 0 8px; }
.wpfh-widget p:last-child { margin-bottom: 0; }

.wpfh-widget ul,
.wpfh-widget ol { margin: 0; padding: 0; list-style: none; }

/* Tema sıfırlamaları */
.wpfh-widget button {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
	text-transform: none;
}

.wpfh-widget table {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0;
	width: 100%;
	max-width: 100%;
	font-size: inherit;
}

.wpfh-widget th,
.wpfh-widget td {
	vertical-align: middle;
}

.wpfh-widget h3,
.wpfh-widget h4 {
	margin: 0;
	padding: 0;
	line-height: 1.3;
	color: var(--wpfh-text);
}

/* Sayısal hizalama */
.wpfh-widget .wpfh-num {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
	white-space: nowrap;
}

.wpfh-up { color: var(--wpfh-up); }
.wpfh-down { color: var(--wpfh-down); }
.wpfh-muted { color: var(--wpfh-muted); }

.wpfh-widget .wpfh-source-note {
	font-size: 0.8em;
	color: var(--wpfh-muted);
	line-height: 1.5;
}

.wpfh-widget .wpfh-updated {
	font-size: 0.8em;
	color: var(--wpfh-muted);
	margin-top: 10px;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.wpfh-widget .wpfh-updated::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wpfh-up);
	flex: 0 0 auto;
	animation: wpfh-live 2.4s ease-in-out infinite;
}

@keyframes wpfh-live {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* =========================================================================
 * FLASH — fiyat değişim vurgusu
 * ===================================================================== */

@keyframes wpfh-flash-up {
	0% { background-color: var(--wpfh-up-bg); }
	100% { background-color: transparent; }
}

@keyframes wpfh-flash-down {
	0% { background-color: var(--wpfh-down-bg); }
	100% { background-color: transparent; }
}

.wpfh-flash-up { animation: wpfh-flash-up 1s ease-out; }
.wpfh-flash-down { animation: wpfh-flash-down 1s ease-out; }

/* =========================================================================
 * TABLO — [finance_table]
 * ===================================================================== */

.wpfh-widget .wpfh-table-card {
	background: var(--wpfh-surface);
	border: 1px solid var(--wpfh-border);
	border-radius: var(--wpfh-radius);
	box-shadow: var(--wpfh-shadow);
	overflow: hidden;
}

.wpfh-widget .wpfh-table-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding: 14px var(--wpfh-pad);
	background: var(--wpfh-surface-alt);
	/* Renk DOLGU olarak değil VURGU olarak kullanılır: haber/finans
	   temalarında geniş doygun yüzeyler eklenti gibi durur, ince bir
	   renkli şerit ise sayfayla bütünleşir. */
	border-left: 3px solid var(--wpfh-primary);
	color: var(--wpfh-text);
}

.wpfh-widget .wpfh-table-title {
	font-size: 1.0em;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--wpfh-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpfh-widget .wpfh-table-head .wpfh-updated {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.733em;
}

/* --- Mobil: kart düzeni (varsayılan) --- */
.wpfh-widget .wpfh-table thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.wpfh-widget .wpfh-table tbody tr {
	display: block;
	padding: 12px var(--wpfh-pad);
	border-bottom: 1px solid var(--wpfh-border);
}

.wpfh-table tbody tr:last-child { border-bottom: 0; }

.wpfh-widget .wpfh-table tbody td {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 3px 0;
	border: 0;
	font-size: 0.933em;
}

.wpfh-widget .wpfh-table tbody td::before {
	content: attr(data-label);
	font-size: 0.733em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wpfh-muted);
	flex: 0 0 auto;
}

.wpfh-widget .wpfh-table tbody td.wpfh-cell-name {
	justify-content: flex-start;
	padding-bottom: 8px;
	margin-bottom: 4px;
	border-bottom: 1px dashed var(--wpfh-border);
}

.wpfh-table tbody td.wpfh-cell-name::before { content: none; }

.wpfh-widget .wpfh-name {
	font-weight: 700;
	font-size: 1.0em;
	color: var(--wpfh-text);
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
}

.wpfh-widget .wpfh-unit {
	font-weight: 500;
	color: var(--wpfh-muted);
	font-size: 0.8em;
}

/* Değişim rozeti */
.wpfh-widget .wpfh-change {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.867em;
	font-weight: 700;
	background: var(--wpfh-surface-alt);
}

.wpfh-change.wpfh-up { background: var(--wpfh-up-bg); color: var(--wpfh-up); }
.wpfh-change.wpfh-down { background: var(--wpfh-down-bg); color: var(--wpfh-down); }

.wpfh-widget .wpfh-table-foot {
	padding: 10px var(--wpfh-pad);
	background: var(--wpfh-surface-alt);
	border-top: 1px solid var(--wpfh-border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}

.wpfh-table-foot .wpfh-updated { margin: 0; }

/* --- Masaüstü: gerçek tablo --- */
@container wpfh (min-width: 720px) {
	/* Kart modu kilidini aç: masaüstünde gerçek tablo düzeni. */
	.wpfh-widget .wpfh-table thead { display: table-header-group !important; }
	.wpfh-widget .wpfh-table tbody tr { display: table-row !important; }
	.wpfh-widget .wpfh-table tbody td { display: table-cell !important; }

	.wpfh-widget .wpfh-table thead {
		position: static;
		width: auto;
		height: auto;
		clip: auto;
		clip-path: none;
	}

	.wpfh-widget .wpfh-table thead th {
		background: var(--wpfh-surface-alt);
		/*
		 * Başlık metni --wpfh-text kullanır, --wpfh-muted DEĞİL.
		 * Zemin koyuyken metin beyazdı ve kontrast yüksekti; zemin açığa
		 * alınınca soluk gri kaldı ve oran 4.29'a düştü (WCAG AA eşiği 4.5).
		 */
		color: var(--wpfh-text);
		text-align: left;
		padding: 11px var(--wpfh-pad);
		font-weight: 700;
		font-size: 0.733em;
		text-transform: uppercase;
		letter-spacing: 0.6px;
		white-space: nowrap;
		border-bottom: 1px solid var(--wpfh-border);
	}

	.wpfh-table thead th.wpfh-col-num { text-align: right; }

	.wpfh-widget .wpfh-table tbody tr {
		display: table-row;
		padding: 0;
		transition: background-color 0.15s ease;
	}

	.wpfh-table tbody tr:hover { background: var(--wpfh-primary-soft); }

	.wpfh-widget .wpfh-table tbody td {
		display: table-cell;
		padding: 12px var(--wpfh-pad);
		border-bottom: 1px solid var(--wpfh-border);
		font-size: 0.933em;
	}

	.wpfh-table tbody tr:last-child td { border-bottom: 0; }

	/*
	 * Kart etiketlerini temizle. Seçici, temel kuralla EN AZ AYNI
	 * özgüllükte olmalıdır: temel kural `.wpfh-widget .wpfh-table tbody
	 * td::before` (0,2,3) iken burası `.wpfh-table tbody td::before`
	 * (0,1,3) yazılıydı ve hiçbir zaman kazanamıyordu. Sonuç, masaüstü
	 * tablo görünümünde hücrelerin "ALIŞ47,1234" gibi görünmesiydi.
	 */
	.wpfh-widget .wpfh-table tbody td::before { content: none; }

	.wpfh-widget .wpfh-table tbody td.wpfh-cell-name {
		border-bottom: 1px solid var(--wpfh-border);
		margin: 0;
		padding: 12px var(--wpfh-pad);
	}

	.wpfh-table td.wpfh-col-num { text-align: right; }
	.wpfh-table td.wpfh-col-num .wpfh-change { justify-content: flex-end; }
}

/* =========================================================================
 * SPARKLINE
 * ===================================================================== */

.wpfh-widget .wpfh-sparkline {
	display: block;
	width: 100%;
	max-width: 110px;
	height: 28px;
}

.wpfh-spark-up { color: var(--wpfh-up); }
.wpfh-spark-down { color: var(--wpfh-down); }

.wpfh-table tbody td.wpfh-col-spark { justify-content: space-between; }

@container wpfh (min-width: 720px) {
	.wpfh-col-spark { width: 130px; }
	.wpfh-table td.wpfh-col-spark .wpfh-sparkline { margin-left: auto; }
}

/* =========================================================================
 * TICKER — [finance_ticker]
 * ===================================================================== */

.wpfh-widget .wpfh-ticker {
	overflow: hidden;
	background: var(--wpfh-surface-alt);
	/* Renk DOLGU olarak değil VURGU olarak kullanılır: haber/finans
	   temalarında geniş doygun yüzeyler eklenti gibi durur, ince bir
	   renkli şerit ise sayfayla bütünleşir. */
	border-left: 3px solid var(--wpfh-primary);
	color: var(--wpfh-text);
	border-radius: var(--wpfh-radius);
	position: relative;
	box-shadow: var(--wpfh-shadow);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.wpfh-widget .wpfh-ticker-track {
	display: inline-flex;
	white-space: nowrap;
	animation: wpfh-marquee var(--wpfh-ticker-speed, 40s) linear infinite;
	will-change: transform;
}

.wpfh-ticker:hover .wpfh-ticker-track,
.wpfh-ticker:focus-within .wpfh-ticker-track { animation-play-state: paused; }

@keyframes wpfh-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.wpfh-ticker-copy { display: inline-flex; }

.wpfh-widget .wpfh-ticker-item {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 12px 18px;
	border-right: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.867em;
}

.wpfh-widget .wpfh-ticker-item .wpfh-tick-name {
	font-weight: 700;
	letter-spacing: 0.4px;
	opacity: 0.9;
}

.wpfh-ticker-item .wpfh-num { font-weight: 600; }
.wpfh-ticker-item .wpfh-up { color: #86efac; }
.wpfh-ticker-item .wpfh-down { color: #fca5a5; }
.wpfh-ticker-item .wpfh-change { background: rgba(255, 255, 255, 0.12); }
.wpfh-ticker-item .wpfh-change.wpfh-up { background: rgba(134, 239, 172, 0.16); color: #86efac; }
.wpfh-ticker-item .wpfh-change.wpfh-down { background: rgba(252, 165, 165, 0.16); color: #fca5a5; }

/* =========================================================================
 * PANEL — hesaplayıcı + tablo birleşik görünümleri
 * ===================================================================== */

.wpfh-panel { display: flex; flex-direction: column; gap: 18px; }

.wpfh-panel-header {
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Hiyerarşi renkle değil çizgiyle kurulur; daha sakin ve tema-nötr. */
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--wpfh-border);
}

.wpfh-widget .wpfh-panel-title {
	font-size: 1.267em;
	font-weight: 700;
	/*
	 * Başlıklar TEMA BAŞLIK RENGİNİ alır, marka rengini değil.
	 * Sayfada beş panel, sekiz sekme ve sekiz hesaplayıcı olabiliyor;
	 * hepsinin başlığı lacivert olunca zemin açık olsa bile bileşen
	 * "mavi" görünüyor. Renk artık yalnızca ETKİLEŞİMLİ öğelerde
	 * (aktif sekme, bağlantı) ve küçük vurgularda kullanılır.
	 */
	color: var(--wpfh-text);
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpfh-panel-sub { font-size: 0.867em; color: var(--wpfh-muted); }

/* =========================================================================
 * HESAPLAYICILAR
 * ===================================================================== */

.wpfh-widget .wpfh-calc {
	background: var(--wpfh-surface);
	border: 1px solid var(--wpfh-border);
	border-radius: var(--wpfh-radius);
	box-shadow: var(--wpfh-shadow);
	padding: var(--wpfh-pad);
	width: 100%;
}

.wpfh-widget .wpfh-calc h3 {
	font-size: 1.067em;
	font-weight: 700;
	color: var(--wpfh-text);
	margin-bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.wpfh-widget .wpfh-calc-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wpfh-gap);
	margin-bottom: var(--wpfh-gap);
}

@container wpfh (min-width: 480px) {
	.wpfh-widget .wpfh-calc-row {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

.wpfh-widget .wpfh-calc-row > label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--wpfh-muted);
	min-width: 0;
}

.wpfh-calc input[type="number"],
.wpfh-calc input[type="text"],
.wpfh-widget .wpfh-calc select {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	padding: 11px 12px;
	border: 1px solid var(--wpfh-border-strong);
	border-radius: var(--wpfh-radius-sm);
	/*
	 * MUTLAK 16 PİKSEL — em'e ÇEVRİLMEMELİDİR.
	 *
	 * iOS Safari, yazı boyutu 16 pikselin altındaki bir form alanına
	 * dokunulduğunda sayfayı yakınlaştırır. Bu değer bir tipografi tercihi
	 * değil, o davranışı engelleyen bir eşiktir; göreli birime çevrilirse
	 * ata öğenin boyutuna bağlı olarak eşiğin altına düşer ve koruma
	 * sessizce kaybolur. Bir kez tam olarak bu oldu: değer em'e çevrildi,
	 * etiket 12,8 piksel olduğu için alan 13,66 piksele indi ve iOS
	 * zoom'u geri geldi.
	 */
	font-size: 16px;
	font-family: inherit;
	font-weight: 600;
	color: var(--wpfh-text);
	background: var(--wpfh-surface);
	appearance: none;
	-webkit-appearance: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wpfh-widget .wpfh-calc select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 34px;
}

.wpfh-calc input:focus,
.wpfh-widget .wpfh-calc select:focus {
	outline: none;
	border-color: var(--wpfh-primary);
	box-shadow: 0 0 0 3px rgba(16, 42, 88, 0.12);
}

.wpfh-widget .wpfh-calc-result {
	background: var(--wpfh-surface-alt);
	/* Renk DOLGU olarak değil VURGU olarak kullanılır: haber/finans
	   temalarında geniş doygun yüzeyler eklenti gibi durur, ince bir
	   renkli şerit ise sayfayla bütünleşir. */
	border-left: 3px solid var(--wpfh-primary);
	color: var(--wpfh-text);
	border-radius: var(--wpfh-radius-sm);
	padding: 14px var(--wpfh-pad);
	margin-top: 4px;
}

.wpfh-widget .wpfh-calc-result-main {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.wpfh-widget .wpfh-calc-result-label {
	font-size: 0.8em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.85;
}

.wpfh-widget .wpfh-calc-result strong.wpfh-num {
	font-size: clamp(22px, 6vw, 30px);
	font-weight: 800;
	line-height: 1.15;
	color: var(--wpfh-text);
	word-break: break-word;
}

.wpfh-widget .wpfh-calc-result table {
	margin-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.wpfh-widget .wpfh-calc-result table td {
	padding: 7px 0;
	font-size: 0.867em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.9);
}

.wpfh-calc-result table tr:last-child td { border-bottom: 0; }
.wpfh-calc-result table td:last-child { text-align: right; font-weight: 700; color: var(--wpfh-text); }

.wpfh-calc .wpfh-source-note { margin-top: 10px; }

/* =========================================================================
 * FAİZ ORANLARI
 * ===================================================================== */

.wpfh-widget .wpfh-policy-rate {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	background: var(--wpfh-surface-alt);
	/* Renk DOLGU olarak değil VURGU olarak kullanılır: haber/finans
	   temalarında geniş doygun yüzeyler eklenti gibi durur, ince bir
	   renkli şerit ise sayfayla bütünleşir. */
	border-left: 3px solid var(--wpfh-primary);
	color: var(--wpfh-text);
	border-radius: var(--wpfh-radius);
	padding: 16px var(--wpfh-pad);
	margin-bottom: 16px;
	box-shadow: var(--wpfh-shadow);
}

.wpfh-policy-label { font-size: 0.867em; font-weight: 600; opacity: 0.92; }
.wpfh-policy-rate .wpfh-num { font-size: clamp(24px, 7vw, 34px); font-weight: 800; }
.wpfh-policy-rate .wpfh-source-note { color: rgba(255, 255, 255, 0.75); }

.wpfh-rates-sector { background: var(--wpfh-primary-soft) !important; font-weight: 700; }

@container wpfh (min-width: 720px) {
	.wpfh-rates-sector td { border-bottom: 2px solid var(--wpfh-primary) !important; }
}

/* =========================================================================
 * EKONOMİK TAKVİM
 * ===================================================================== */

.wpfh-widget .wpfh-cal-filters {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	overflow-x: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.wpfh-widget .wpfh-cal-filter {
	appearance: none;
	-webkit-appearance: none;
	background: var(--wpfh-surface);
	border: 1px solid var(--wpfh-border-strong);
	border-radius: 999px;
	padding: 7px 15px;
	font-size: 0.867em;
	font-weight: 600;
	color: var(--wpfh-muted);
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: all 0.15s ease;
}

.wpfh-cal-filter:hover { border-color: var(--wpfh-primary); color: var(--wpfh-primary); }

.wpfh-widget .wpfh-cal-filter.is-active {
	/*
	 * Seçili filtre dolu renkle değil, açık tonla ve KALIN kenarlıkla
	 * ayrılır. Filtre çubuğunda beş altı düğme yan yana durur; birinin
	 * doygun lacivert olması sayfada gereğinden fazla ağırlık yaratıyordu.
	 * Durum bilgisi renkle DEĞİL, kenarlık ve yazı kalınlığıyla da
	 * taşındığı için renk körlüğünde de ayırt edilebilir.
	 */
	background: var(--wpfh-primary-soft);
	border-color: var(--wpfh-primary);
	color: var(--wpfh-primary);
	font-weight: 700;
}

.wpfh-cal-list { display: flex; flex-direction: column; gap: 10px; }

.wpfh-widget .wpfh-cal-item {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	background: var(--wpfh-surface);
	border: 1px solid var(--wpfh-border);
	border-left: 4px solid var(--wpfh-border-strong);
	border-radius: var(--wpfh-radius);
	padding: 14px var(--wpfh-pad);
	box-shadow: var(--wpfh-shadow);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.wpfh-cal-high { border-left-color: var(--wpfh-down); }
.wpfh-cal-medium { border-left-color: var(--wpfh-accent); }
.wpfh-cal-low { border-left-color: var(--wpfh-border-strong); }

.wpfh-cal-item.is-today { background: var(--wpfh-primary-soft); }
.wpfh-cal-item.is-released { opacity: 0.7; }

.wpfh-widget .wpfh-cal-when {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.wpfh-cal-date { font-weight: 700; font-size: 0.933em; color: var(--wpfh-text); }
.wpfh-cal-time { font-size: 0.867em; color: var(--wpfh-muted); font-variant-numeric: tabular-nums; }

.wpfh-widget .wpfh-cal-badge {
	/*
	 * Dolu marka rengi yerine AÇIK TON. Bu öğeler listede her satırda
	 * tekrar eder; doygun lacivert küçük de olsa toplamda göz yorar.
	 * Yumuşak zemin + koyu metin aynı vurguyu daha az gürültüyle verir.
	 */
	background: var(--wpfh-primary-soft);
	color: var(--wpfh-primary);
	border: 1px solid var(--wpfh-border-strong);
	font-size: 0.667em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: 4px;
	padding: 3px 7px;
}

.wpfh-cal-head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }

.wpfh-widget .wpfh-cal-country {
	font-weight: 700;
	font-size: 0.733em;
	background: var(--wpfh-primary-soft);
	color: var(--wpfh-text);
	border-radius: 4px;
	padding: 3px 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.wpfh-widget .wpfh-cal-imp {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex: 0 0 auto;
}

.wpfh-cal-imp-low { background: var(--wpfh-border-strong); }
.wpfh-cal-imp-medium { background: var(--wpfh-accent); }
.wpfh-cal-imp-high { background: var(--wpfh-down); }

.wpfh-widget .wpfh-cal-item:not(.is-released) .wpfh-cal-imp-high {
	animation: wpfh-pulse 2s ease-in-out infinite;
}

@keyframes wpfh-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.5); }
	50% { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}

.wpfh-cal-title { font-size: 1.0em; font-weight: 600; }

.wpfh-widget .wpfh-cal-countdown {
	margin-top: 6px;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--wpfh-muted);
	font-variant-numeric: tabular-nums;
}

.wpfh-cal-countdown.is-soon { color: var(--wpfh-down); }

.wpfh-widget .wpfh-cal-countdown.is-live {
	color: var(--wpfh-text);
	background: var(--wpfh-down);
	border-radius: 4px;
	padding: 2px 9px;
	display: inline-block;
	animation: wpfh-blink 1.4s ease-in-out infinite;
}

@keyframes wpfh-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.wpfh-widget .wpfh-cal-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding-top: 10px;
	border-top: 1px dashed var(--wpfh-border);
}

.wpfh-cal-val { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wpfh-widget .wpfh-cal-val-label {
	font-size: 0.667em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--wpfh-muted);
}

.wpfh-cal-val .wpfh-num { font-size: 0.933em; font-weight: 700; }
.wpfh-cal-val-actual .wpfh-num { color: var(--wpfh-primary); }

.wpfh-widget .wpfh-cal-empty {
	background: var(--wpfh-primary-soft);
	border-radius: var(--wpfh-radius);
	padding: 24px var(--wpfh-pad);
	text-align: center;
}

.wpfh-cal-note { margin-top: 12px; }

@container wpfh (min-width: 720px) {
	.wpfh-widget .wpfh-cal-item {
		grid-template-columns: 110px minmax(0, 1fr) auto;
		align-items: center;
		gap: 18px;
	}

	.wpfh-cal-item:hover { box-shadow: var(--wpfh-shadow-lg); transform: translateY(-1px); }

	.wpfh-cal-when { flex-direction: column; align-items: flex-start; gap: 2px; }

	.wpfh-widget .wpfh-cal-values {
		grid-template-columns: repeat(3, minmax(64px, auto));
		padding-top: 0;
		border-top: 0;
		gap: 18px;
	}

	.wpfh-cal-val { align-items: flex-end; }
}

/* =========================================================================
 * SEKMELER — [finance_tabs]
 * ===================================================================== */

.wpfh-widget .wpfh-tabs-nav {
	display: flex;
	gap: 2px;
	border-bottom: 2px solid var(--wpfh-border);
	margin-bottom: 18px;

	/*
	 * Sekmeler dar alanda SARILIR, kaydırılmaz.
	 *
	 * Önceki davranış yatay kaydırmaydı ve kaydırma çubuğu da gizliydi
	 * (scrollbar-width: none). 360 piksellik bir kapta beş sekmenin
	 * 114 pikseli görünmez oluyordu ve kullanıcının daha fazla sekme
	 * olduğunu anlamasının HİÇBİR yolu yoktu — son sekme fiilen
	 * erişilemezdi. Sarmak iki satır yer kaplar ama hepsini görünür kılar.
	 */
	flex-wrap: wrap;
	overflow-x: visible;
}



.wpfh-widget .wpfh-tab {
	appearance: none;
	-webkit-appearance: none;
	background: none;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	padding: 11px 16px;
	font-size: 0.933em;
	font-weight: 700;
	color: var(--wpfh-muted);
	cursor: pointer;
	white-space: nowrap;
	flex: 0 0 auto;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.wpfh-tab:hover { color: var(--wpfh-primary); }
.wpfh-tab.is-active { color: var(--wpfh-primary); border-bottom-color: var(--wpfh-primary); }

.wpfh-widget .wpfh-tab:focus-visible {
	outline: 2px solid var(--wpfh-primary);
	outline-offset: -2px;
	border-radius: 4px 4px 0 0;
}

.wpfh-tabs.wpfh-js .wpfh-tab-panel { display: none; }
.wpfh-tabs.wpfh-js .wpfh-tab-panel.is-active { display: block; }

.wpfh-tab-panel > .wpfh-widget:last-child { margin-bottom: 0; }

/* =========================================================================
 * ERİŞİLEBİLİRLİK
 * ===================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wpfh-widget *,
	.wpfh-widget *::before,
	.wpfh-widget *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.wpfh-ticker { overflow-x: auto; }
	.wpfh-ticker-copy { display: none; }
	.wpfh-cal-item:hover { transform: none; }
}

@media print {
	.wpfh-cal-filters,
	.wpfh-tabs-nav { display: none; }
	.wpfh-tabs.wpfh-js .wpfh-tab-panel { display: block; }
	.wpfh-widget { box-shadow: none; }
}

/* =========================================================================
 * TAKVİM ÖZET ŞERİDİ
 * ===================================================================== */

.wpfh-widget .wpfh-cal-summary {
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--wpfh-surface-alt);
	/* Renk DOLGU olarak değil VURGU olarak kullanılır: haber/finans
	   temalarında geniş doygun yüzeyler eklenti gibi durur, ince bir
	   renkli şerit ise sayfayla bütünleşir. */
	border-left: 3px solid var(--wpfh-primary);
	color: var(--wpfh-text);
	border-radius: var(--wpfh-radius);
	padding: var(--wpfh-pad);
	margin-bottom: 14px;
	box-shadow: var(--wpfh-shadow);
}

.wpfh-widget .wpfh-cal-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.wpfh-widget .wpfh-cal-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
}

.wpfh-widget .wpfh-cal-stat-num {
	font-size: clamp(22px, 6vw, 28px);
	font-weight: 800;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.wpfh-widget .wpfh-cal-stat-label {
	font-size: 0.667em;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	opacity: 0.82;
}

.wpfh-cal-stat-high .wpfh-cal-stat-num { color: #fca5a5; }

.wpfh-widget .wpfh-cal-next {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.867em;
}

.wpfh-widget .wpfh-cal-next-label {
	font-size: 0.667em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: rgba(255, 255, 255, 0.16);
	border-radius: 4px;
	padding: 3px 8px;
}

.wpfh-widget .wpfh-cal-next-name {
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.wpfh-widget .wpfh-cal-next-countdown {
	margin-left: auto;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	background: rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 3px 12px;
	white-space: nowrap;
}

.wpfh-cal-next-countdown.is-soon { background: rgba(252, 165, 165, 0.28); color: #fecaca; }

.wpfh-widget .wpfh-cal-next-countdown.is-live {
	background: var(--wpfh-down);
	color: var(--wpfh-text);
	animation: wpfh-blink 1.4s ease-in-out infinite;
}

@container wpfh (min-width: 600px) {
	.wpfh-cal-summary { flex-direction: row; align-items: center; gap: 20px; }
	.wpfh-cal-stats { grid-template-columns: repeat(3, auto); gap: 22px; flex: 0 0 auto; }
	.wpfh-cal-next { padding-top: 0; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.18); padding-left: 20px; flex: 1 1 auto; }
}

/* Faiz tablosu boş durumu */
.wpfh-widget .wpfh-rates-empty {
	background: var(--wpfh-surface-alt);
	border: 1px dashed var(--wpfh-border-strong);
	border-radius: var(--wpfh-radius);
	padding: 18px var(--wpfh-pad);
	margin-bottom: 16px;
	text-align: center;
}

.wpfh-widget .wpfh-rates-empty strong { color: var(--wpfh-primary); display: block; margin-bottom: 4px; }

/* Bayrak emojisi: sistem emoji fontuna zorla (Windows'ta kutu görünmesin) */
.wpfh-widget .wpfh-flag {
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
	font-style: normal;
	line-height: 1;
}

/* Ekran okuyucu metni (tema sağlamıyorsa) */
.wpfh-widget .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* =========================================================================
 * RENK ŞEMASI
 *
 * KOYU TEMA OTOMATİK DEĞİLDİR — bilinçli bir karar.
 *
 * Önceki sürüm koyu temayı ziyaretçinin İŞLETİM SİSTEMİ tercihine
 * bağlıyordu. Sorun şu: bileşen bir SİTENİN içinde yaşar. Site açık
 * temalıysa ve ziyaretçinin işletim sistemi koyu moddaysa, sayfa beyaz
 * kalırken bileşen tek başına siyah bir kutuya dönüşüyordu. Uyum sağlaması
 * gereken şey işletim sistemi değil, çevresindeki sayfadır.
 *
 * Şema Ayarlar > Genel'den seçilir: açık (varsayılan), koyu, sistem.
 * İşaret gövde sınıfı olarak basılır (body_class kancası); böylece on bir
 * şablonun her birine öznitelik eklemek — ve birini unutmak — gerekmez.
 * Kurallar yalnızca AÇIK BİR TERCİH varsa devreye girer.
 * ===================================================================== */

.wpfh-scheme-dark .wpfh-widget {
	--wpfh-primary: #1e40af;
	--wpfh-primary-600: #2563eb;
	--wpfh-primary-soft: #1e293b;
	--wpfh-surface: #0f172a;
	--wpfh-surface-alt: #111c33;
	--wpfh-border: #24324a;
	--wpfh-border-strong: #35486a;
	--wpfh-text: #e6edf7;
	--wpfh-muted: #94a3b8;
	--wpfh-up: #4ade80;
	--wpfh-up-bg: rgba(74, 222, 128, 0.14);
	--wpfh-down: #f87171;
	--wpfh-down-bg: rgba(248, 113, 113, 0.14);
	--wpfh-accent: #e3bf51;
	--wpfh-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
	--wpfh-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
	.wpfh-scheme-auto .wpfh-widget {
		--wpfh-primary: #1e40af;
		--wpfh-primary-600: #2563eb;
		--wpfh-primary-soft: #1e293b;
		--wpfh-surface: #0f172a;
		--wpfh-surface-alt: #111c33;
		--wpfh-border: #24324a;
		--wpfh-border-strong: #35486a;
		--wpfh-text: #e6edf7;
		--wpfh-muted: #94a3b8;
		--wpfh-up: #4ade80;
		--wpfh-up-bg: rgba(74, 222, 128, 0.14);
		--wpfh-down: #f87171;
		--wpfh-down-bg: rgba(248, 113, 113, 0.14);
		--wpfh-accent: #e3bf51;
		--wpfh-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
		--wpfh-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.45);
	}
}

.wpfh-scheme-dark .wpfh-widget input,
.wpfh-scheme-dark .wpfh-widget select,
.wpfh-scheme-auto .wpfh-widget input,
.wpfh-scheme-auto .wpfh-widget select {
	background: var(--wpfh-surface-alt);
	color: var(--wpfh-text);
	border-color: var(--wpfh-border-strong);
}

.wpfh-scheme-dark .wpfh-widget { color-scheme: dark; }

/* =========================================================================
 * ERİŞİLEBİLİRLİK
 * ===================================================================== */

/*
 * DOKUNMA HEDEFLERİ: WCAG 2.5.8 asgari 24×24 CSS pikseli ister; mobil
 * kılavuzları 44px önerir. Filtre düğmeleri ve sekmeler parmakla
 * kullanıldığı için taban yükseklik verilir.
 */
@media (pointer: coarse) {
	.wpfh-widget .wpfh-cal-filter,
	.wpfh-widget .wpfh-tab,
	.wpfh-widget button,
	.wpfh-widget select,
	.wpfh-widget input {
		min-height: 44px;
	}
}

/*
 * KLAVYE ODAĞI: Tema `outline: none` uygulamış olabilir. Odak halkası
 * etkileşimli her öğe için açıkça geri getirilir; yalnızca klavyeyle
 * gezinirken görünür (:focus-visible), fare tıklamasında değil.
 */
.wpfh-widget a:focus-visible,
.wpfh-widget button:focus-visible,
.wpfh-widget input:focus-visible,
.wpfh-widget select:focus-visible,
.wpfh-widget [tabindex]:focus-visible {
	outline: 2px solid var(--wpfh-primary-600);
	outline-offset: 2px;
	border-radius: var(--wpfh-radius-sm);
}

/*
 * YÜKSEK KONTRAST ve WINDOWS YÜKSEK KONTRAST MODU: Renkle taşınan bilgi
 * (artış/azalış) kenarlıkla da desteklenir; forced-colors modunda tarayıcı
 * arka planları sıfırladığı için yalnız renge güvenmek bilgiyi yok eder.
 */
@media (forced-colors: active) {
	.wpfh-widget .wpfh-change,
	.wpfh-widget .wpfh-badge {
		border: 1px solid currentColor;
	}

	.wpfh-widget .wpfh-tab[aria-selected="true"] {
		border-bottom: 3px solid currentColor;
	}
}

/*
 * CANLI GÜNCELLEME DURAKLATMA: Kayan şerit animasyonu, hareket
 * hassasiyeti olan kullanıcılar için zaten kapatılıyor; üzerine gelince
 * veya odaklanınca da durur ki değer okunabilsin.
 */
.wpfh-widget .wpfh-ticker:hover .wpfh-ticker-track,
.wpfh-widget .wpfh-ticker:focus-within .wpfh-ticker-track {
	animation-play-state: paused;
}

/*
 * EKRAN OKUYUCUYA ÖZEL METİN: Görsel olarak gizli ama okunur.
 */
.wpfh-widget .wpfh-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
 * BOŞ DURUM ve KURTARMA
 *
 * Veri henüz hazır değilken gösterilen yer tutucular. Bileşenin
 * "bozulmuş" değil "hazırlanıyor" göründüğünden emin olmak önemlidir:
 * boş bir kutu ziyaretçiye hata gibi görünür.
 * ===================================================================== */

.wpfh-widget .wpfh-empty-msg {
	display: block;
	padding: 8px 0;
	color: var(--wpfh-muted);
	font-size: 0.933em;
	text-align: center;
}

.wpfh-ticker-placeholder {
	padding: 12px var(--wpfh-pad);
	background: var(--wpfh-surface-alt);
	border: 1px solid var(--wpfh-border);
	border-radius: var(--wpfh-radius);
}

/* Veri hazır olduğunda beliren eylem düğmesi. */
.wpfh-widget .wpfh-empty-reload {
	appearance: none;
	-webkit-appearance: none;
	display: inline-block;
	margin: 0;
	padding: 8px 16px;
	/*
	 * Dolu marka rengi yerine AÇIK TON. Bu öğeler listede her satırda
	 * tekrar eder; doygun lacivert küçük de olsa toplamda göz yorar.
	 * Yumuşak zemin + koyu metin aynı vurguyu daha az gürültüyle verir.
	 */
	background: var(--wpfh-primary-soft);
	color: var(--wpfh-primary);
	border: 1px solid var(--wpfh-border-strong);
	border: 0;
	border-radius: var(--wpfh-radius-sm);
	font: inherit;
	font-size: 0.933em;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

.wpfh-widget .wpfh-empty-reload:hover,
.wpfh-widget .wpfh-empty-reload:focus-visible {
	background: var(--wpfh-primary-600);
}

/* Yasal uyarı ve kaynak beyanı. */
.wpfh-disclaimer {
	padding: 12px var(--wpfh-pad);
	background: var(--wpfh-surface-alt);
	border: 1px solid var(--wpfh-border);
	border-radius: var(--wpfh-radius);
	color: var(--wpfh-muted);
	font-size: 0.867em;
	line-height: 1.5;
}

.wpfh-disclaimer p { margin: 0; }
.wpfh-disclaimer p + p { margin-top: 6px; }
.wpfh-disclaimer a { color: var(--wpfh-primary-600); }

/* Akaryakıt bayatlık göstergeleri. */
.wpfh-widget .wpfh-badge-warn {
	background: var(--wpfh-down-bg);
	color: var(--wpfh-down);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}

.wpfh-widget .wpfh-badge-stale {
	background: var(--wpfh-border);
	color: var(--wpfh-muted);
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 0.8em;
	font-weight: 600;
	white-space: nowrap;
}

.wpfh-widget .wpfh-row-stale { opacity: 0.6; }
.wpfh-widget .wpfh-muted { color: var(--wpfh-muted); }

/* =========================================================================
 * DAR KAP SIKILAŞTIRMASI
 *
 * Bileşen dar bir kenar çubuğuna veya sütuna konduğunda boşluklar
 * küçülür. Görünüm penceresi değil KAP genişliği ölçülür: geniş ekranda
 * dar bir sütuna konan tablo da bu kurala girer.
 * ===================================================================== */

@container wpfh (max-width: 380px) {
	.wpfh-widget {
		--wpfh-pad: 10px;
		--wpfh-gap: 8px;
		--wpfh-radius: 8px;
	}

	/* Dar alanda gölge ve kalın kenarlık görsel gürültü yaratır. */
	.wpfh-widget .wpfh-card,
	.wpfh-widget .wpfh-widget-table {
		box-shadow: none;
	}
}

/* =========================================================================
 * KAPSAYICI SORGUSU DESTEKLENMİYORSA
 *
 * Kap sorgusu tanımayan eski tarayıcılar tüm düzen kurallarını atlar ve
 * her yerde mobil kart düzeninde kalır. Kart düzeni okunabilir olduğu
 * için bu güvenli bir gerileme, ancak geniş ekranda gereksiz. Aşağıdaki
 * blok yalnızca destek YOKSA devreye girer ve eski görünüm penceresi
 * kırılımını geri getirir.
 * ===================================================================== */

@supports not (container-type: inline-size) {
	@media (min-width: 720px) {
		.wpfh-widget .wpfh-table thead { display: table-header-group !important; }
		.wpfh-widget .wpfh-table tbody tr { display: table-row !important; }
		.wpfh-widget .wpfh-table tbody td { display: table-cell !important; }

		.wpfh-widget .wpfh-table thead {
			position: static;
			width: auto;
			height: auto;
			clip: auto;
			clip-path: none;
		}

		.wpfh-widget .wpfh-table tbody td::before { content: none; }
	}
}

/* =========================================================================
 * MOBİL KART DÜZENİ — CİLA
 *
 * Dar ekranda tablo satırları karta dönüşür. Etiketler ::before ile
 * yazılır; ekran okuyucular gerçek <th> başlıklarını kullanmaya devam
 * eder, bu yüzden etiketler yalnızca görseldir.
 * ===================================================================== */

@container wpfh (max-width: 719px) {
	.wpfh-widget .wpfh-table tbody tr {
		padding: var(--wpfh-pad);
		border-bottom: 1px solid var(--wpfh-border);
	}

	.wpfh-widget .wpfh-table tbody tr:last-child { border-bottom: 0; }

	.wpfh-widget .wpfh-table tbody td {
		align-items: baseline;
		justify-content: space-between;
		gap: var(--wpfh-gap);
		padding: 3px 0;
		border: 0;
	}

	/* Etiket solda, değer sağda; uzun etiket değeri ezmesin. */
	.wpfh-widget .wpfh-table tbody td::before {
		flex: 0 1 auto;
		min-width: 0;
		color: var(--wpfh-muted);
		font-size: 0.8em;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.02em;
	}

	/* Satırın adı kart başlığı gibi öne çıkar. */
	.wpfh-widget .wpfh-table tbody th[scope="row"] {
		display: block;
		padding: 0 0 6px;
		border: 0;
		font-size: 1.067em;
		font-weight: 700;
	}

	/* Grafik dar kartta yer kaplar, gizlenir. */
	.wpfh-widget .wpfh-table td.wpfh-col-spark { display: none !important; }
}

/* Kira hesaplayıcı hükmü. */
.wpfh-widget .wpfh-rent-verdict:empty { display: none; }

.wpfh-widget .wpfh-rent-verdict {
	margin: 10px 0 0;
	padding: 8px 12px;
	border-radius: var(--wpfh-radius-sm);
	font-size: 0.867em;
	font-weight: 600;
}

.wpfh-widget .wpfh-rent-verdict.is-over { background: var(--wpfh-down-bg); color: var(--wpfh-down); }
.wpfh-widget .wpfh-rent-verdict.is-ok { background: var(--wpfh-up-bg); color: var(--wpfh-up); }

/* =========================================================================
 * BAYRAKLAR
 *
 * Emoji bayrak KULLANILMAZ: bölgesel gösterge çiftleri Windows'ta bayrak
 * olarak çizilmez, kullanıcı iki harf görür. SVG her platformda aynıdır.
 * ===================================================================== */

.wpfh-widget .wpfh-flag-svg {
	display: inline-block;
	width: 1.15em;
	height: auto;
	vertical-align: -0.15em;
	border-radius: 2px;
	/* İnce kenarlık, beyaz zeminli bayrakların (JP) kaybolmasını önler. */
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
	flex: 0 0 auto;
}

/* =========================================================================
 * YANLIŞLIKLA KOD BLOĞUNA YAPIŞTIRILMA
 *
 * Kısa kodlar sık sık bir kod bloğundan kopyalanıp yazıya yapıştırılır ve
 * kopyalama sırasında <pre> sarmalayıcısı da birlikte gelir. WordPress
 * kısa kodu yine çalıştırır, ama bileşen artık <pre> içindedir ve temanın
 * kod bloğu stilini miras alır: koyu arka plan, tek aralıklı yazı tipi,
 * ön biçimlendirilmiş boşluk. Kullanıcı bunu eklentinin rengi sanır —
 * gerçek bir vakada tam olarak böyle oldu.
 *
 * Bunu sessizce tolere etmek yerine ortam etkisiz hâle getirilir. Asıl
 * çözüm sarmalayıcıyı yazıdan silmektir, ancak bileşen bozuk görünmemeli.
 * ===================================================================== */

pre:has(.wpfh-widget),
code:has(.wpfh-widget) {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	overflow: visible;
	white-space: normal;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

/*
 * :has() desteklenmiyorsa bileşenin kendisi savunur: kendi zeminini
 * bastırır ve tek aralıklı yazı tipi ile ön biçimlendirmeyi geri alır.
 */
pre .wpfh-widget,
code .wpfh-widget {
	white-space: normal;
	font-family: inherit;
	font-size: inherit;
	text-align: left;
	background: var(--wpfh-surface);
	border-radius: var(--wpfh-radius);
}

pre .wpfh-widget *,
code .wpfh-widget * {
	white-space: normal;
	font-family: inherit;
}

pre .wpfh-widget .wpfh-num,
code .wpfh-widget .wpfh-num {
	font-variant-numeric: tabular-nums;
}


/* Panel içindeki bileşenler kendi alt boşluğunu üretmez; ritmi panel kurar. */
.wpfh-panel .wpfh-widget:last-child { margin-bottom: 0; }
.wpfh-tab-panel > .wpfh-widget:last-child { margin-bottom: 0; }

/* =========================================================================
 * iOS ODAK ZOOMU
 *
 * iOS Safari, yazı boyutu 16 pikselin ALTINDA olan bir form alanına
 * dokunulduğunda sayfayı otomatik yakınlaştırır. Kullanıcı kredi tutarını
 * girmek için alana dokunur, sayfa zıplar, sonra elle geri küçültmesi
 * gerekir. Her hesaplayıcıda yaşandığı için bileşen "mobilde bozuk"
 * hissi verir.
 *
 * Çözüm, yalnızca DOKUNMATİK cihazlarda taban boyutu 16 piksele çekmek.
 * Fare kullanan masaüstünde tipografi değişmez; orada 16 piksel gereksiz
 * iri durur ve tabloların dengesini bozar.
 *
 * `max()` kullanılır: temanın daha büyük bir taban boyutu varsa o korunur.
 * ===================================================================== */

@media (pointer: coarse) {
	/* Yukarıdaki 16 piksel kuralını kapsamayan alanlar için güvenlik ağı. */
	.wpfh-widget input,
	.wpfh-widget select,
	.wpfh-widget textarea {
		font-size: max(16px, 1em);
	}
}

/* =========================================================================
 * TEK VARLIK DETAY BLOĞU
 *
 * Varlığın kendi sayfası için: fiyat başrolde, gerisi destek.
 * ===================================================================== */

.wpfh-asset {
	padding: var(--wpfh-pad);
	background: var(--wpfh-surface);
	border: 1px solid var(--wpfh-border);
	border-radius: var(--wpfh-radius);
}

.wpfh-asset-id { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wpfh-widget .wpfh-asset-name { font-size: 1.133em; font-weight: 700; }
.wpfh-widget .wpfh-asset-sym {
	font-size: 0.8em;
	font-weight: 600;
	color: var(--wpfh-muted);
	letter-spacing: 0.04em;
}

.wpfh-asset-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 4px;
}

/* Fiyat sayfanın odağı; boyut buradan gelir. clamp ile dar ekranda taşmaz. */
.wpfh-widget .wpfh-asset-price strong {
	font-size: clamp(28px, 7vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

.wpfh-widget .wpfh-asset-unit { font-size: 1.133em; color: var(--wpfh-muted); font-weight: 600; }

.wpfh-asset-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--wpfh-gap);
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--wpfh-border);
}

.wpfh-asset-stats > div { min-width: 0; }
.wpfh-asset-stats dt { font-size: 0.733em; color: var(--wpfh-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.wpfh-asset-stats dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.wpfh-asset-chart { margin-top: 14px; color: var(--wpfh-primary); opacity: 0.55; }
.wpfh-asset-chart svg { display: block; width: 100%; height: 44px; }