/* Saldos Hub — panel görünümü (Saldos paneli tarzı): renkli KPI kartları, analizör kartları, Buybox firma ızgarası.
   Renkler tema değişkenlerinden gelir (açık/koyu); yalnız kart gradyanları sabittir (beyaz metin kontrastı için koyu tonlar). */

/* ── renkli KPI kartları ── */
.rkpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; margin-bottom: 1rem; }
.rkpi { position: relative; overflow: hidden; border-radius: 16px; padding: 1rem 1.15rem; min-height: 132px; color: #fff; box-shadow: var(--golge);
  display: flex; flex-direction: column; gap: .15rem; background: linear-gradient(135deg, var(--ka), var(--kb)); }
.rkpi.turuncu { --ka: #cc5309; --kb: #a83a07; }
.rkpi.mavi { --ka: #2b57d6; --kb: #1a3a9e; }
.rkpi.yesil { --ka: #0d8557; --kb: #0a6244; }
.rkpi.mor { --ka: #9333d4; --kb: #6b21a8; }
.rkpi.kehribar { --ka: #b45f06; --kb: #8a4503; }
.rkpi.kirmizi { --ka: #c62828; --kb: #8e1b1b; }
.rkpi .baslik { font-size: .86rem; font-weight: 600; opacity: .95; }
.rkpi .deger { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.rkpi .degisim { font-size: .86rem; font-weight: 700; }
.rkpi .degisim small { font-weight: 500; opacity: .9; }
.rkpi .alt { font-size: .82rem; opacity: .92; max-width: 56%; }
.rkpi .seri { position: absolute; right: .7rem; bottom: .6rem; width: 38%; height: 54px; pointer-events: none; }
.rkpi .seri polyline { fill: none; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.rkpi .seri polygon { fill: rgba(255, 255, 255, .18); stroke: none; }
.rkpi.iskelet-kart { background: linear-gradient(90deg, var(--yuzey-2), var(--kenar), var(--yuzey-2)); background-size: 200% 100%; animation: kayma 1.3s infinite linear; color: transparent; }

/* ── firma seçimi + süzgeç çubuğu ── */
.perf-ust { padding-bottom: .5rem; }
.suzgec-cubugu { display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end; }
.suzgec-cubugu .alan { min-width: 130px; }
.suzgec-cubugu .alan.genis { flex: 1 1 220px; }
.suzgec-cubugu .alan.dar { min-width: 90px; max-width: 110px; }
.aralik-cifti { display: flex; gap: .35rem; align-items: center; }
.aralik-cifti span { color: var(--soluk); font-size: .8rem; }
.suzgec-ozeti { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0 .2rem; font-size: .86rem; color: var(--soluk); }

/* ── analizör kartları (Lower Price / Stock / Opportunities) ── */
.analiz-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.analiz-kart { background: var(--yuzey); border: 1px solid var(--kenar); border-radius: var(--yaricap); padding: .8rem .95rem; box-shadow: var(--golge); }
.analiz-kart.aktif { border-color: var(--marka); box-shadow: 0 0 0 2px color-mix(in srgb, var(--marka) 32%, transparent); }
.analiz-kart h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .15rem; font-size: .96rem; }
.analiz-kart p { margin: 0 0 .6rem; font-size: .8rem; color: var(--soluk); line-height: 1.35; }
.cipler { display: flex; flex-wrap: wrap; gap: .4rem; }
.cip { font: inherit; font-weight: 700; font-size: .85rem; padding: .32rem .7rem; border-radius: 9px; border: 1px solid var(--kenar); background: var(--yuzey-2); color: var(--metin); cursor: pointer; display: inline-flex; gap: .4rem; align-items: center; }
.cip:hover { border-color: var(--marka); }
.cip.aktif { background: var(--marka); border-color: var(--marka); color: var(--on-marka); }
.cip .say { font-size: .72rem; font-weight: 700; padding: .02rem .42rem; border-radius: 999px; background: color-mix(in srgb, currentColor 16%, transparent); }
.cip:disabled { opacity: .5; cursor: not-allowed; }

/* ── Buybox: kademe özeti + firma kartları ── */
.kademe-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kademe { border-radius: var(--yaricap); border: 1px solid var(--kenar); background: var(--yuzey); padding: .8rem 1rem; text-align: center; font: inherit; color: inherit; cursor: pointer; }
.kademe .sayi { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.kademe .etiket { font-size: .84rem; color: var(--soluk); }
.kademe.iyi { background: var(--iyi-bg); border-color: color-mix(in srgb, var(--iyi) 30%, transparent); } .kademe.iyi .sayi { color: var(--iyi); }
.kademe.orta { background: var(--uyari-bg); border-color: color-mix(in srgb, var(--uyari) 30%, transparent); } .kademe.orta .sayi { color: var(--uyari); }
.kademe.kotu { background: var(--kritik-bg); border-color: color-mix(in srgb, var(--kritik) 30%, transparent); } .kademe.kotu .sayi { color: var(--kritik); }
.kademe.aktif { outline: 3px solid color-mix(in srgb, var(--marka) 55%, transparent); outline-offset: 1px; }

.firma-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.firma-kart { position: relative; border-radius: 14px; padding: .7rem .85rem .6rem; border: 1px solid var(--kenar); background: var(--yuzey); cursor: pointer; text-align: left; font: inherit; color: inherit; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.firma-kart:hover { filter: brightness(.97); }
.firma-kart .ust { display: flex; justify-content: space-between; gap: .4rem; align-items: baseline; }
.firma-kart .oran { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.firma-kart .sayi { font-size: .76rem; color: var(--soluk); white-space: nowrap; }
.firma-kart .ad { font-weight: 700; font-size: .92rem; overflow-wrap: anywhere; margin-top: .15rem; }
.firma-kart .fark { font-size: .76rem; color: var(--soluk); }
.firma-kart .cubuk { height: 5px; border-radius: 3px; background: color-mix(in srgb, currentColor 14%, transparent); margin-top: .35rem; overflow: hidden; }
.firma-kart .cubuk i { display: block; height: 100%; background: currentColor; border-radius: 3px; }
.firma-kart.iyi { background: var(--iyi-bg); color: var(--iyi); border-color: color-mix(in srgb, var(--iyi) 28%, transparent); }
.firma-kart.orta { background: var(--uyari-bg); color: var(--uyari); border-color: color-mix(in srgb, var(--uyari) 28%, transparent); }
.firma-kart.kotu { background: var(--kritik-bg); color: var(--kritik); border-color: color-mix(in srgb, var(--kritik) 28%, transparent); }
.firma-kart .ad, .firma-kart .sayi, .firma-kart .fark { color: var(--metin); }
.firma-kart .sayi, .firma-kart .fark { opacity: .8; }
.firma-kart.secili { outline: 3px solid color-mix(in srgb, var(--marka) 60%, transparent); outline-offset: 1px; }

/* ── tablo: sayılar hiçbir tabloda satır sonuna sarılmaz; "yogun" çok sütunlu paneller içindir ── */
.tablo td.sayisal { white-space: nowrap; }
.tablo.yogun { font-size: .84rem; }
.tablo.yogun th, .tablo.yogun td { white-space: nowrap; padding: .42rem .6rem; }
.tablo.yogun td { max-width: 300px; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.tablo.yogun td:nth-child(2) { min-width: 220px; }
.tablo.yogun thead th { top: 0; }
.rkpi .degisim small { margin-left: .35rem; }

/* ── sonuç sayısı / uyarı çubuğu ── */
.sonuc-serit { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.sonuc-serit h2 { margin: 0; }

/* ── Pano: kartların veri kaynağı ve tazelik şeridi ── */
.kaynak-serit { display: flex; flex-wrap: wrap; gap: .3rem 1.5rem; margin: -.3rem 0 1rem; font-size: .84rem; color: var(--soluk); }
.kaynak-serit > div { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.kaynak-serit .kaynak-satiri { margin: 0; font-size: inherit; }

@media (max-width: 720px) {
  .rkpi .deger { font-size: 1.7rem; }
  .rkpi .alt { max-width: 100%; }
  .rkpi .seri { width: 36%; height: 44px; }
  .suzgec-cubugu .alan { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { .rkpi.iskelet-kart { animation: none; } }