/* =====================================================================
   FİYAT TABLOSU BİLEŞENİ — js/fiyat-tablosu.js ile birlikte kullanılır.
   Tüm sınıflar "ft-" önekli; renk ve yazı tipleri sitenin tema
   değişkenlerinden gelir (css/site.css). Değişkenler yoksa yanlarındaki
   yedek değerler kullanılır, böylece başka bir sayfada da düzgün görünür.
   ===================================================================== */

.ft {
  --ft-panel:   var(--panel, #FFFBF4);
  --ft-yazi:    var(--yazi, #14261F);
  --ft-soluk:   var(--yazi-3, #56635A);
  --ft-vurgu:   var(--vurgu, #80591A);
  --ft-cizgi:   var(--cizgi, rgba(160, 120, 50, 0.26));
  --ft-ince:    var(--cizgi-yumusak, rgba(20, 38, 31, 0.10));
  --ft-yukari:  var(--yukari, #1B7547);
  --ft-asagi:   var(--asagi, #AE3F2D);
  --ft-uyari:   var(--uyari, #8C5F0E);
  --ft-yukari-z: var(--yukari-zemin, rgba(27, 117, 71, 0.12));
  --ft-asagi-z:  var(--asagi-zemin, rgba(174, 63, 45, 0.12));
  /* Aynı renklerin "kırmızı, yeşil, mavi" hali: saydam tonlar rgba() ile çizilir.
     (color-mix() eski TV ve bilgisayar tarayıcılarında çalışmıyor.) */
  --ft-yukari-rgb: var(--yukari-rgb, 27, 117, 71);
  --ft-asagi-rgb:  var(--asagi-rgb, 174, 63, 45);
  --ft-uyari-rgb:  var(--uyari-rgb, 140, 95, 14);
  --ft-vurgu-rgb:  var(--vurgu-rgb, 128, 89, 26);
  --ft-satir-uzerine: var(--satir-uzerine, rgba(20, 38, 31, 0.03));
  --ft-altin:   var(--altin, #B08A45);
  --ft-baslik-font: var(--font-baslik, Georgia, serif);
  --ft-govde-font:  var(--font-govde, system-ui, sans-serif);

  font-family: var(--ft-govde-font);
  color: var(--ft-yazi);
}

/* Bileşen tek başına kullanıldığında da gizleme çalışsın */
.ft [hidden] { display: none !important; }

/* Fiyat denetiminden geçmeyen veri: rakamlar soluk, uyarı kutusu kırmızı (js: data-denetim) */
.ft[data-denetim] .ft-alis,
.ft[data-denetim] .ft-satis { opacity: 0.55; }

.ft-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 16px;
  margin-bottom: 14px;
}
.ft-baslik {
  margin: 0;
  font-family: var(--ft-baslik-font);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
}
.ft-zaman {
  font-size: 13px;
  color: var(--ft-soluk);
  font-variant-numeric: tabular-nums;
}
.ft-zaman.ft-uyari { color: var(--ft-uyari); font-weight: 600; }

/* Veri güncel değilken belirgin uyarı */
.ft-uyari-kutu {
  margin: 0 0 16px;
  padding: 13px 16px 13px 46px;
  position: relative;
  border: 1px solid rgba(var(--ft-uyari-rgb), 0.55);
  border-left: 4px solid var(--ft-uyari);
  border-radius: 6px;
  background: linear-gradient(rgba(var(--ft-uyari-rgb), 0.12), rgba(var(--ft-uyari-rgb), 0.12)) var(--ft-panel);
  color: var(--ft-uyari);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 1px 4px rgba(var(--ft-uyari-rgb), 0.22);
}
.ft-uyari-kutu::before {
  content: "!";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ft-uyari);
  color: var(--ft-panel);
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  text-align: center;
}
/* Ağır durum (fiyat alınamıyor / bayat): kırmızı ve badge hafif nabız atar */
.ft-uyari-agir { --ft-uyari: var(--ft-asagi, #AE3F2D); --ft-uyari-rgb: var(--ft-asagi-rgb); }
@media (prefers-reduced-motion: no-preference) {
  .ft-uyari-agir::before { animation: ft-uyari-nabiz 1.6s ease-in-out infinite; }
}
@keyframes ft-uyari-nabiz {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.16); }
}

.ft-mesaj {
  margin: 0;
  padding: 28px 20px;
  border: 1px dashed var(--ft-cizgi);
  border-radius: 6px;
  text-align: center;
  color: var(--ft-soluk);
}
.ft-mesaj.ft-hata { color: var(--ft-asagi); font-weight: 600; }

.ft-gruplar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.ft-kutu {
  min-width: 0;
  overflow-x: auto;
  background: var(--ft-panel);
  border: 1px solid var(--ft-ince);
  border-radius: 6px;
}

.ft-tablo {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.ft-grup {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--ft-cizgi);
  font-family: var(--ft-baslik-font);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  text-align: left;
}
/* Grup başlığı: ad, ondan sağa uzanan çizgi (başında kısa kalın vurgu), çizginin
   ucunda günün küçük grafiği ve bugünkü değişim (js: baslikKur, grafikCiz) */
/* width: 0 + min-width: 100%: başlık tabloyu genişletmez (kutuda yana kaydırma çubuğu
   çıkmaz). Sığmazsa js önce grafiği (ft-sik1), sonra "bugün" yazısını (ft-sik2) gizler. */
.ft-grup-ic { display: flex; align-items: flex-end; gap: 10px; width: 0; min-width: 100%; overflow: hidden; }
.ft-grup-ad { flex: none; }
.ft-sik1 .ft-grafik { display: none; }
.ft-sik2 .ft-gun small { display: none; }
.ft-sik3 .ft-gun { display: none; }
.ft-grup-cizgi {
  flex: 1 1 auto;
  min-width: 0;
  height: 2px;
  margin-bottom: 0.36em;
  background:
    linear-gradient(var(--ft-vurgu), var(--ft-vurgu)) left bottom / 26px 2px no-repeat,
    linear-gradient(var(--ft-cizgi), var(--ft-cizgi)) left bottom / 100% 1px no-repeat;
}
.ft-grafik { flex: none; width: 58px; height: 18px; margin-bottom: 0.2em; overflow: visible; }
.ft-grafik path { fill: none; stroke: var(--ft-altin); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ft-grafik .ft-alan { fill: var(--ft-altin); stroke: none; opacity: 0.12; }
.ft-grafik circle { fill: var(--ft-altin); stroke: none; }
/* İlk açılışta çizgi soldan sağa çizilir, sonra altı dolar ve uç noktası belirir */
.ft-grafik.ft-ciz .ft-yol { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ft-ciz 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards; }
.ft-grafik.ft-ciz .ft-alan { opacity: 0; animation: ft-dolgu 1s ease 1.2s forwards; }
.ft-grafik.ft-ciz circle { opacity: 0; animation: ft-nokta 0.4s ease 1.7s forwards; }
@keyframes ft-ciz { to { stroke-dashoffset: 0; } }
@keyframes ft-dolgu { to { opacity: 0.12; } }
@keyframes ft-nokta { to { opacity: 1; } }

/* Grup başlığında bugünkü değişim: "▲ %0,82 bugün" (js: gunYaz) */
.ft-gun {
  flex: none;
  margin: 0 0 0.22em;
  font-family: var(--ft-govde-font);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--ft-soluk);
}
.ft-gun small { font-size: 0.9em; font-weight: 500; color: var(--ft-soluk); }
.ft-gun[data-yon="yukari"] { color: var(--ft-yukari); }
.ft-gun[data-yon="asagi"]  { color: var(--ft-asagi); }
.ft-tek .ft-grup-satir .ft-gun { margin: 0 0 0.12em; font-size: 11.5px; line-height: 1.3; }
.ft-tek .ft-grup-satir .ft-grafik { width: 48px; height: 16px; margin-bottom: 0.12em; }
.ft-tek .ft-grup-satir .ft-grup-cizgi { margin-bottom: 0.32em; }
/* Dar kutularda (üç kutu yan yana, 900–1199 px) başlık tek satırda kalsın */
@media (min-width: 900px) and (max-width: 1199px) {
  .fiyat-genis .ft-gun { font-size: 12px; }
  .fiyat-genis .ft-gun small { display: none; }
  .fiyat-genis .ft-grafik { display: none; }
}

.ft-tablo thead th {
  padding: 12px 18px 8px 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ft-soluk);
}
.ft-tablo thead th:first-child { padding-left: 18px; text-align: left; }

.ft-tablo tbody tr { border-top: 1px solid var(--ft-ince); }
.ft-tablo tbody th {
  padding: 12px 4px 12px 18px;
  text-align: left;
  font-size: 15px;
  font-weight: 500;
}
.ft-tablo td {
  padding: 12px 18px 12px 8px;
  text-align: right;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}
.ft-tablo td + td { padding-left: 4px; }
.ft-satis { color: var(--ft-vurgu); }

.ft-tablo tbody tr:not(.ft-grup-satir) { transition: background-color 0.25s ease; }
.ft-tablo tbody tr:not(.ft-grup-satir):hover { background: var(--ft-satir-uzerine); }

/* ---------- Fiyat değişince ----------
   Bütün satırın zemini yükselişte yeşil, düşüşte kırmızı yanar ve 2,5 saniyede
   yavaşça söner; değişen rakam da bir süre o renkte kalır. Renk her hücrede ayrı
   bir katmanda durur, yalnızca saydamlığı değişir: eski TV ve bilgisayar
   tarayıcılarında da çalışır (color-mix() kullanılmaz). */
.ft-tablo tbody th,
.ft-tablo td { position: relative; z-index: 0; }
.ft-tablo tr.ft-yukari > *::after,
.ft-tablo tr.ft-asagi > *::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  animation: ft-zemin 2.5s ease-out both;
}
.ft-tablo tr.ft-yukari > *::after { background: rgba(var(--ft-yukari-rgb), 0.18); }
.ft-tablo tr.ft-asagi > *::after  { background: rgba(var(--ft-asagi-rgb), 0.18); }
/* İlk anda bir ton daha belirgin yanar, sonra yavaşça söner */
@keyframes ft-zemin {
  0%   { opacity: 1; }
  25%  { opacity: 0.72; }
  100% { opacity: 0; }
}
.ft-tablo td.ft-yukari { animation: ft-yukari 2.5s ease-out; }
.ft-tablo td.ft-asagi  { animation: ft-asagi 2.5s ease-out; }
@keyframes ft-yukari { 0%, 25% { color: var(--ft-yukari); } }
@keyframes ft-asagi  { 0%, 25% { color: var(--ft-asagi); } }

/* Rakam değişimi (js: kaydir): fiyatın değişen kısmı (ilk farklı haneden sona) tek parça
   kayar; yükselişte alttan, düşüşte üstten gelir. Eski rakam en başta hızla solarak çekilir (iz bırakmaz),
   yenisi solarak yerine oturur: sayı hiçbir an yarım ya da boş görünmez, ~0,3 sn'de yerindedir.
   Satır yüksekliğinde kırpılır; clip-path rakamın hizasını etkilemez (bilmeyen eski
   tarayıcıda rakamlar yine solarak kayar). */
.ft-kay {
  position: relative;
  display: inline-block;
  -webkit-clip-path: inset(0 -2em);
  clip-path: inset(0 -2em);
}
.ft-kay > span { display: inline-block; animation-fill-mode: both; }
.ft-kay > .ft-kay-yeni { animation-duration: 0.5s; animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
.ft-kay > .ft-kay-eski {
  position: absolute;
  top: 0;
  right: 0;
  animation-duration: 0.24s;
  animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1);
}
.ft-kay-yukari > .ft-kay-yeni { animation-name: ft-kay-alttan; }
.ft-kay-yukari > .ft-kay-eski { animation-name: ft-kay-yukari; }
.ft-kay-asagi > .ft-kay-yeni  { animation-name: ft-kay-ustten; }
.ft-kay-asagi > .ft-kay-eski  { animation-name: ft-kay-asagi; }
@keyframes ft-kay-alttan { from { transform: translateY(45%); opacity: 0; } }
@keyframes ft-kay-ustten { from { transform: translateY(-45%); opacity: 0; } }
@keyframes ft-kay-yukari { to { transform: translateY(-45%); opacity: 0; } }
@keyframes ft-kay-asagi  { to { transform: translateY(45%); opacity: 0; } }

/* Kaynakta şu an gelmeyen ürün: fiyat yerine "—", adının yanında "!" (js: adYaz) */
.ft-isaret {
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  margin-left: 7px;
  border-radius: 50%;
  background: var(--ft-uyari);
  color: var(--ft-panel);
  font-size: 0.72em;
  font-weight: 800;
  font-style: normal;
  line-height: 1.3em;
  text-align: center;
  vertical-align: 0.12em;
  cursor: help;
}
.ft-tablo tr.ft-eksik td { color: var(--ft-soluk); }

.ft-tablo tr[data-yon] .ft-satis::before {
  display: inline-block;
  margin-right: 6px;
  font-size: 8px;
  vertical-align: 2px;
}
.ft-tablo tr[data-yon="yukari"] .ft-satis::before { content: "▲"; color: var(--ft-yukari); }
.ft-tablo tr[data-yon="asagi"]  .ft-satis::before { content: "▼"; color: var(--ft-asagi); }

/* Fiyatlar gelene kadar tablo iskeleti: küçük, yuvarlak altın çubuklar; parıltı
   satırdan satıra dalga gibi geçer (js: iskeletKur, gecikme --ft-dalga) */
.ft-iskelet {
  display: inline-block;
  height: 0.6em;
  max-width: 100%;
  border-radius: 999px;
  vertical-align: middle;
  background:
    linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) 0 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(var(--ft-vurgu-rgb), 0.16), rgba(var(--ft-vurgu-rgb), 0.3));
  animation: ft-iskelet 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite, ft-iskelet-nabiz 1.8s ease-in-out infinite;
  animation-delay: var(--ft-dalga, 0s);
}
:root[data-tema="koyu"] .ft-iskelet {
  background:
    linear-gradient(100deg, transparent 35%, rgba(255, 240, 200, 0.28) 50%, transparent 65%) 0 0 / 300% 100% no-repeat,
    linear-gradient(90deg, rgba(var(--ft-vurgu-rgb), 0.12), rgba(var(--ft-vurgu-rgb), 0.24));
}
.ft-iskelet-satir th { color: var(--ft-soluk); }
.ft-iskelet-satir td { text-align: center; }
@keyframes ft-iskelet { from { background-position: 120% 0, 0 0; } to { background-position: -120% 0, 0 0; } }
@keyframes ft-iskelet-nabiz { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

/* Fiyatlar ilk geldiğinde satırlar sırayla, yumuşakça belirir (js: ft-giris) */
.ft-giris > th,
.ft-giris > td { animation: ft-giris 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--ft-sira, 0ms); }
@keyframes ft-giris { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ft-kaynak {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--ft-soluk);
}

@media (max-width: 420px) {
  .ft-tablo tbody th,
  .ft-tablo thead th:first-child { padding-left: 14px; }
  .ft-tablo td,
  .ft-tablo thead th { padding-right: 14px; }
  .ft-tablo tbody th, .ft-tablo td { font-size: 14px; }
}

/* "Hareketi azalt" açıkken (Windows'ta animasyonlar kapalı, bazı TV'ler) renk yine
   yanıp söner: renk değişimi hareket sayılmaz. site.css'teki genel kural her
   animasyonu 0,01 ms'ye indirdiği için süre burada yeniden verilir. */
@media (prefers-reduced-motion: reduce) {
  .ft .ft-tablo tr.ft-yukari > *::after,
  .ft .ft-tablo tr.ft-asagi > *::after,
  .ft .ft-tablo td.ft-yukari,
  .ft .ft-tablo td.ft-asagi { animation-duration: 2.5s !important; }
  .ft .ft-giris > th,
  .ft .ft-giris > td { animation: none !important; }
}

/* ---------- Tek tablo düzeni (data-duzen="tek"): fiyat panosu ----------
   Satır boşlukları ve yazılar ekran yüksekliğine göre ölçeklenir; böylece
   bütün fiyatlar telefonda da bilgisayarda da kaydırmadan sığar. */

.ft-tek { display: block; }
.ft-tek .ft-kutu {
  border-color: var(--ft-cizgi);
  box-shadow: 0 24px 50px -36px rgba(16, 32, 26, 0.35);
}
.ft-tek .ft-tablo { line-height: 1.2; }
.ft-tek .ft-tablo thead th {
  padding-top: clamp(3px, 0.8vh, 12px);
  padding-bottom: clamp(3px, 0.8vh, 12px);
  font-size: clamp(10.5px, 1.4vh, 12px);
  border-bottom: 1px solid var(--ft-cizgi);
}
.ft-tek .ft-tablo tbody th {
  padding-block: clamp(3px, 0.78vh, 13px);
  font-size: clamp(14px, 1.95vh, 17px);
  font-weight: 600;
}
.ft-tek .ft-tablo td {
  padding-block: clamp(3px, 0.78vh, 13px);
  font-size: clamp(15px, 2.2vh, 20px);
  font-weight: 700;
}

.ft-tek .ft-tablo tbody .ft-grup-satir th {
  padding: clamp(3px, 0.7vh, 12px) 18px clamp(1px, 0.4vh, 8px);
  border-top: 1px solid var(--ft-cizgi);
  font-family: var(--ft-baslik-font);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 1.9vh, 20px);
  text-align: left;
  color: var(--ft-vurgu);
  background: linear-gradient(rgba(var(--ft-vurgu-rgb), 0.05), rgba(var(--ft-vurgu-rgb), 0.05)) var(--ft-panel);
}
.ft-tek .ft-tablo tbody:first-of-type .ft-grup-satir th { border-top: 0; }

@media (min-width: 700px) {
  .ft-tek .ft-tablo thead th:first-child,
  .ft-tek .ft-tablo tbody th { padding-left: 26px; }
  .ft-tek .ft-tablo td,
  .ft-tek .ft-tablo thead th { padding-right: 26px; }
  .ft-tek .ft-tablo tbody .ft-grup-satir th { padding-left: 26px; }
}
@media (max-width: 420px) {
  .ft-tek .ft-tablo tbody th,
  .ft-tek .ft-tablo thead th:first-child,
  .ft-tek .ft-tablo tbody .ft-grup-satir th { padding-left: 12px; }
  .ft-tek .ft-tablo td,
  .ft-tek .ft-tablo thead th { padding-right: 12px; }
}

/* Geniş ekranda üç kutu: rakamlar biraz daha büyük */
@media (min-width: 900px) {
  .fiyat-genis .ft-tablo tbody th { font-size: 16px; font-weight: 600; }
  .fiyat-genis .ft-tablo td { font-size: clamp(16px, 2.2vh, 19px); font-weight: 700; padding-block: clamp(8px, 1.4vh, 14px); }
  .fiyat-genis .ft-kutu { border-color: var(--ft-cizgi); box-shadow: 0 24px 50px -36px rgba(16, 32, 26, 0.35); }
}

/* Telefonda tablonun altındaki firma/imza da ilk ekrana sığsın diye biraz daha sıkı */
@media (max-width: 560px) {
  .ft-tek .ft-tablo tbody th,
  .ft-tek .ft-tablo td { padding-block: clamp(2px, 0.62vh, 13px); }
}

/* Çok alçak telefon ekranları (iPhone SE vb.): biraz daha sıkı */
@media (max-width: 899px) and (max-height: 640px) {
  .ft-tek .ft-tablo tbody th { padding-block: 2px; font-size: 13.5px; }
  .ft-tek .ft-tablo td { padding-block: 2px; font-size: 14.5px; }
  .ft-tek .ft-tablo thead th { padding-top: 2px; padding-bottom: 2px; }
  .ft-tek .ft-tablo tbody .ft-grup-satir th { padding-top: 2px; padding-bottom: 0; font-size: 13.5px; }
}
@media (max-width: 899px) and (max-height: 640px) {
  .ft-tek .ft-tablo tbody th,
  .ft-tek .ft-tablo td { padding-block: 2px; }
}

/* Geniş ekranlarda kutular büyüdükçe yazılar ve boşluklar da büyüsün */
@media (min-width: 1360px) {
  .fiyat-genis .ft-gruplar { gap: 24px; }
  .fiyat-genis .ft-grup { font-size: 26px; padding: 18px 26px 14px; }
  .fiyat-genis .ft-tablo thead th { font-size: 12px; padding-right: 26px; }
  .fiyat-genis .ft-tablo thead th:first-child,
  .fiyat-genis .ft-tablo tbody th { padding-left: 26px; }
  .fiyat-genis .ft-tablo tbody th { font-size: 17px; }
  .fiyat-genis .ft-tablo td { font-size: clamp(17px, 2.3vh, 21px); padding-right: 26px; }
}
@media (min-width: 1700px) {
  .fiyat-genis .ft-tablo tbody th { font-size: 18px; }
  .fiyat-genis .ft-tablo td { font-size: clamp(18px, 2.4vh, 23px); }
}

/* Geniş ekranda (TV dahil) üç kutu her zaman yan yana: Döviz alta düşmesin */
@media (min-width: 900px) {
  .fiyat-genis .ft-gruplar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}
/* 900–1100 px ve yüksek ekran: kutular dar, döviz rakamları (4 hane + ok) sığsın diye
   rakam genişliğe göre de küçülür (yoksa 900–920 px'de kutuda yana kaydırma çıkıyordu).
   min() bilmeyen eski tarayıcı ilk değeri kullanır. */
@media (min-width: 900px) and (max-width: 1100px) {
  .fiyat-genis .ft-tablo td { font-size: 16.5px; font-size: max(15px, min(2.2vh, 1.85vw, 19px)); }
}

/* Alçak geniş ekranlar (TV tarayıcısı, küçük laptop): her şey tek ekrana sığsın */
@media (min-width: 900px) and (max-height: 700px) {
  .fiyat-genis .ft-grup { padding: 10px 16px 8px; font-size: 20px; }
  .fiyat-genis .ft-tablo thead th { padding-top: 5px; padding-bottom: 4px; font-size: 10.5px; }
  .fiyat-genis .ft-tablo tbody th { font-size: 15px; }
  .fiyat-genis .ft-tablo tbody th,
  .fiyat-genis .ft-tablo td { padding-block: clamp(3px, 0.9vh, 7px); }
  .fiyat-genis .ft-tablo td { font-size: clamp(15px, 2.6vh, 18px); }
}
@media (min-width: 900px) and (max-width: 1100px) {
  .fiyat-genis .ft-tablo tbody th,
  .fiyat-genis .ft-tablo thead th:first-child { padding-left: 12px; }
  .fiyat-genis .ft-tablo td,
  .fiyat-genis .ft-tablo thead th { padding-right: 12px; }
  .fiyat-genis .ft-grup { padding-left: 12px; padding-right: 12px; font-size: 21px; }
}

/* Döviz kaynağı (Nadir Döviz) notu: ana uyarıdan ayrı, küçük ve sakin */
.ft-not {
  margin: 0;
  padding: 8px 14px 10px 32px;
  position: relative;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ft-uyari);
  background: rgba(var(--ft-uyari-rgb), 0.07);
}
.ft-not::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 13px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ft-grup-not {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.1em;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(var(--ft-uyari-rgb), 0.12);
  color: var(--ft-uyari);
  font-family: var(--ft-govde-font);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.ft-grup-not::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ft-kutu > .ft-not { border-top: 1px solid var(--ft-ince); }