/* Cemal Dashboard — lacivert + altın. Dış kaynak yok, tüm stil burada. */

:root {
  --laci-900: #0a1733;
  --laci-800: #0f2247;
  --laci-700: #16305f;
  --laci-600: #1e3f78;
  --laci-100: #eaf0fb;

  --sari: #f4b301;
  --sari-koyu: #d99a00;
  --sari-soft: #fff6e0;

  --zemin: #f4f6fb;
  --kart: #ffffff;
  --cizgi: #e6eaf3;
  --cizgi-koyu: #d6ddec;

  --yazi: #0c1a35;
  --yazi-sonuk: #5a6b88;
  --yazi-silik: #8493ab;

  --arti: #0f9d68;
  --arti-soft: #e7f7f0;
  --eksi: #e0483d;
  --eksi-soft: #fdeceb;
  --uyari: #b7791f;
  --uyari-soft: #fff8e6;

  --golge: 0 1px 2px rgba(12,26,53,.05), 0 6px 20px rgba(12,26,53,.06);
  --golge-kart: 0 1px 3px rgba(12,26,53,.06);
  --yuvarlak: 14px;
  --sayi: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --yan-genislik: 250px;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--zemin); color: var(--yazi);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  min-height: 100vh; -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 650; letter-spacing: -.015em; }
h2 { font-size: 15.5px; }
code { font-family: var(--sayi); font-size: .92em; color: var(--laci-700); background: var(--laci-100);
       padding: 1px 5px; border-radius: 5px; }

/* --- giriş --- */

.giris-sarmal {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(900px 520px at 20% -10%, #16305f 0%, transparent 60%),
              radial-gradient(800px 480px at 90% 0%, #0f2247 0%, transparent 55%),
              var(--laci-900);
}
.giris-kart {
  width: 100%; max-width: 390px; background: var(--kart);
  border-radius: 20px; padding: 34px 30px;
  box-shadow: 0 24px 70px rgba(4,12,30,.45); display: flex; flex-direction: column;
}
.giris-kart h1 { font-size: 19px; }
.marka-alt { font-size: 12px; color: var(--yazi-silik); letter-spacing: .04em; }
.giris-kart label { font-size: 12px; color: var(--yazi-sonuk); margin-bottom: 7px; font-weight: 500; }
.giris-kart input { margin-bottom: 18px; }
.giris-kart button { margin-top: 8px; padding: 12px; }

/* --- marka logosu --- */

.marka-logo { display: block; height: 40px; width: auto; }
.marka-logo .kus-govde { fill: var(--sari); }
.marka-logo .kus-kanat { fill: var(--laci-900); }
.marka-logo .kus-goz { fill: var(--laci-900); }
.marka-logo .c-halka { stroke: var(--laci-900); }
.marka-logo .marka-yazi {
  fill: var(--laci-900); font-size: 27px; font-weight: 700; letter-spacing: -.01em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.marka-giris { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; }
.marka-giris .marka-logo { height: 46px; }

.yan-marka { display: flex; flex-direction: column; gap: 4px; padding: 4px 8px 24px; }
.yan-marka .marka-logo { height: 38px; }
/* Lacivert zeminde C ve yazı beyaza döner, kuş altın kalır. */
.yan-marka .marka-logo .c-halka { stroke: #ffffff; }
.yan-marka .marka-logo .marka-yazi { fill: #ffffff; }
.yan-marka-alt { color: var(--sari); font-size: 10.5px; letter-spacing: .18em; font-weight: 700; padding-left: 3px; }

/* --- kabuk --- */

.kabuk { display: flex; min-height: 100vh; }

.yan {
  width: var(--yan-genislik); flex: none; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--laci-800) 0%, var(--laci-900) 100%);
  padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.sekmeler { display: flex; flex-direction: column; gap: 4px; }
.sekme {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; color: #a9bad6; font: inherit; font-size: 14.5px;
  padding: 11px 12px; border-radius: 10px; cursor: pointer;
  transition: background .15s, color .15s;
}
.sekme svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor;
             stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sekme:hover { background: rgba(255,255,255,.06); color: #fff; }
.sekme.etkin { background: var(--sari); color: var(--laci-900); font-weight: 600; }
.sekme.etkin svg { stroke: var(--laci-900); }

.yan-alt { margin-top: auto; padding-top: 18px; }
.yan-kullanici {
  display: flex; align-items: center; gap: 11px; padding: 11px;
  background: rgba(255,255,255,.05); border-radius: 12px; margin-bottom: 10px;
}
.yan-avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--sari); color: var(--laci-900); font-weight: 700; font-size: 14px;
}
.yan-kullanici-metin { display: flex; flex-direction: column; min-width: 0; }
.yan-kullanici-metin strong { color: #fff; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
.yan-kullanici-metin span { color: #8399ba; font-size: 11.5px; }
.yan-cikis {
  width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #c3d0e6; padding: 9px; border-radius: 10px; font-size: 13.5px;
}
.yan-cikis:hover { background: rgba(255,255,255,.12); color: #fff; }

.govde { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ust-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px 26px; background: var(--kart); border-bottom: 1px solid var(--cizgi);
  position: sticky; top: 0; z-index: 20;
}
.ust-baslik h1 { font-size: 20px; }
.ust-alt { font-size: 13px; color: var(--yazi-silik); }
.ust-sag { margin-left: auto; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }

.para-secici { display: flex; gap: 3px; background: var(--zemin); padding: 4px; border-radius: 11px;
               border: 1px solid var(--cizgi); }
.para {
  background: none; border: 0; color: var(--yazi-sonuk); font: inherit; font-size: 12.5px;
  font-weight: 600; padding: 6px 13px; border-radius: 8px; cursor: pointer; transition: .15s;
}
.para:hover { color: var(--yazi); }
.para.etkin { background: var(--laci-800); color: var(--sari); }

main { padding: 24px 26px 40px; max-width: 1560px; width: 100%; }

/* --- KPI --- */

.kpi-izgara { display: grid; gap: 16px; margin-bottom: 16px;
              grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.kpi {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 20px; box-shadow: var(--golge-kart); display: flex; flex-direction: column; min-width: 0;
}
.kpi-vurgu {
  background: linear-gradient(150deg, var(--laci-800) 0%, var(--laci-900) 100%);
  border-color: transparent; box-shadow: var(--golge);
}
.kpi-vurgu .kpi-etiket, .kpi-vurgu .kpi-alt { color: #9db0cf; }
.kpi-vurgu .kpi-deger { color: #fff; }
.kpi-vurgu .kpi-ikon { background: rgba(244,179,1,.16); }
.kpi-vurgu .kpi-ikon svg { stroke: var(--sari); }

.kpi-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.kpi-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
            background: var(--laci-100); flex: none; }
.kpi-ikon svg { width: 20px; height: 20px; fill: none; stroke: var(--laci-700);
                stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kpi-deger { font-family: var(--sayi); font-size: 27px; font-weight: 650; letter-spacing: -.03em; line-height: 1.15; }
.kpi-etiket { font-size: 13px; color: var(--yazi-sonuk); margin-top: 7px; }
.kpi-alt { font-size: 12px; color: var(--yazi-silik); margin-top: 3px; min-height: 17px; }

.delta {
  font-family: var(--sayi); font-size: 12px; font-weight: 600; padding: 5px 10px;
  border-radius: 20px; background: var(--arti-soft); color: var(--arti); white-space: nowrap;
}
.delta.eksi { background: var(--eksi-soft); color: var(--eksi); }
.delta.arti { background: var(--arti-soft); color: var(--arti); }
.delta.sonuk, .delta-notr { background: var(--laci-100); color: var(--yazi-sonuk); }

/* --- kartlar --- */

.ikili { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 1180px) {
  .ikili { grid-template-columns: 2.4fr 1fr; }
  .ikili-ters { grid-template-columns: 1fr 2.4fr; }
}

.kart {
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yuvarlak);
  padding: 20px; box-shadow: var(--golge-kart); display: flex; flex-direction: column; min-width: 0;
}
.kart-ust { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.kart-alt-baslik { font-size: 12.5px; color: var(--yazi-silik); display: block; margin-top: 3px; }

.perf-kart { margin-bottom: 16px; }
.perf-izgara { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.perf-kutu {
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 6px;
}
.perf-kutu span { font-size: 11.5px; color: var(--yazi-silik); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.perf-kutu strong { font-family: var(--sayi); font-size: 19px; font-weight: 650; }

.arti { color: var(--arti); }
.eksi { color: var(--eksi); }
.sonuk { color: var(--yazi-silik); }

/* --- tablo --- */

.tablo-sarmal { overflow-x: auto; margin: 0 -20px -20px; padding: 0 20px 6px; }
.tablo { width: 100%; border-collapse: collapse; font-size: 14px; }
.tablo th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--yazi-silik); font-weight: 600; padding: 0 11px 12px; white-space: nowrap;
}
.tablo td { padding: 13px 11px; border-top: 1px solid var(--cizgi); vertical-align: middle; white-space: nowrap; }
.tablo tbody tr { cursor: pointer; transition: background .12s; }
.tablo tbody tr:hover { background: var(--laci-100); }
.sag { text-align: right; }
.tablo .sayi { font-family: var(--sayi); font-size: 13px; }

.tablo th small {
  display: block; font-size: 10px; font-weight: 500; text-transform: none;
  letter-spacing: 0; color: var(--yazi-silik); opacity: .8; margin-top: 2px;
}
.hucre-ust { font-weight: 600; }
.hucre-alt { font-size: 11.5px; margin-top: 2px; }

.varlik-hucre { display: flex; align-items: center; gap: 12px; min-width: 0; }
.varlik-metin { min-width: 0; }
.varlik-ad { font-weight: 650; }
/* Uzun fon adları tabloyu yatay kaydırmaya zorlamasın. */
.varlik-not {
  font-size: 11.5px; color: var(--yazi-silik);
  max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.perf-uclu { display: inline-flex; gap: 4px; }
.perf-cip {
  font-family: var(--sayi); font-size: 11.5px; font-weight: 600; padding: 3px 7px;
  border-radius: 7px; background: var(--laci-100); color: var(--yazi-sonuk); min-width: 56px;
  text-align: right; display: inline-block;
}
.perf-cip.arti { background: var(--arti-soft); color: var(--arti); }
.perf-cip.eksi { background: var(--eksi-soft); color: var(--eksi); }

.islem-hucre { white-space: nowrap; }

.logo {
  width: 34px; height: 34px; border-radius: 50%; flex: none; overflow: hidden; display: block;
  box-shadow: 0 1px 3px rgba(12,26,53,.2), inset 0 0 0 1px rgba(255,255,255,.25);
}
.logo svg { width: 100%; height: 100%; display: block; }
.logo.buyuk { width: 46px; height: 46px; }

.agirlik-cubuk { height: 4px; background: var(--laci-100); border-radius: 3px; overflow: hidden;
                 margin: 5px 0 0 auto; width: 74px; }
.agirlik-dolgu { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--laci-600), var(--sari)); }

/* --- dağılım --- */

.dagilim { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.donut-sarmal { position: relative; width: 178px; height: 178px; }
#donut { width: 178px; height: 178px; }
.donut-orta { position: absolute; inset: 0; display: flex; flex-direction: column;
              align-items: center; justify-content: center; pointer-events: none; }
.donut-orta span { font-family: var(--sayi); font-size: 17px; font-weight: 650; }
.donut-orta small { font-size: 11px; color: var(--yazi-silik); }

.dagilim-liste { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.dagilim-liste li { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.dagilim-nokta { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.dagilim-oran { margin-left: auto; font-family: var(--sayi); color: var(--yazi-sonuk); font-weight: 600; }

.evren-liste, .rapor-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.evren-liste li { display: flex; justify-content: space-between; font-size: 13.5px; padding: 9px 0;
                  border-bottom: 1px solid var(--cizgi); }
.evren-liste li span:last-child { font-family: var(--sayi); color: var(--yazi-silik); }

.rapor-liste button {
  width: 100%; text-align: left; background: none; border: 0; color: var(--yazi);
  font: inherit; padding: 11px 12px; border-radius: 10px; cursor: pointer;
}
.rapor-liste button:hover { background: var(--laci-100); }
.rapor-liste button.etkin { background: var(--laci-800); color: #fff; }
.rapor-liste button.etkin small { color: var(--sari); }
.rapor-liste small { display: block; color: var(--yazi-silik); font-size: 11.5px; }

/* --- grafik --- */

.aralik-secici { display: flex; gap: 3px; background: var(--zemin); padding: 4px; border-radius: 11px;
                 border: 1px solid var(--cizgi); width: fit-content; flex-wrap: wrap; }
.aralik-secici button {
  background: none; border: 0; color: var(--yazi-sonuk); font: inherit; font-size: 13px;
  padding: 7px 14px; border-radius: 8px; cursor: pointer; transition: .15s;
}
.aralik-secici button:hover { color: var(--yazi); }
.aralik-secici button.etkin { background: var(--laci-800); color: var(--sari); font-weight: 600; }
/* Kaydın geriye gitmediği dönem: düğme çalışır ama aynı sonucu vereceği belli olur. */
.aralik-secici button.donem-kapsamsiz { opacity: .45; }
.aralik-secici button.donem-kapsamsiz.etkin { opacity: .8; }

.grafik-sarmal { position: relative; margin: 18px 0 6px; }
/* viewBox çizim anında kabın gerçek piksel ölçüsüne kurulur; burada yalnızca
   kutu boyutu verilir. Dikey kaydırmayı engellememek için touch-action. */
#grafik, #gecmis-grafik, #rapor-grafik {
  width: 100%; display: block; overflow: visible; touch-action: pan-y;
}
#grafik { height: 260px; }

/* Grafik iskeleti: ince, geri planda duran çizgiler; yazılar metin renginde. */
.grafik-kilavuz { stroke: var(--cizgi); stroke-width: 1; shape-rendering: crispEdges; }
.grafik-eksen {
  fill: var(--yazi-silik); font-family: var(--sayi); font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
/* Dönem başı seviyesi bir eşik çizgisidir, kılavuz değil: kesikli çizilir. */
.grafik-taban { stroke: var(--cizgi-koyu); stroke-width: 1; stroke-dasharray: 3 5; }
.grafik-son-nokta, .grafik-imlec-nokta { stroke: var(--kart); stroke-width: 2.5; }
.grafik-rozet-yazi {
  fill: #fff; font-family: var(--sayi); font-size: 11px; font-weight: 600;
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.grafik-imlec-cizgi { stroke: var(--cizgi-koyu); stroke-width: 1; }

.grafik-ipucu {
  position: absolute; background: var(--laci-900); border-radius: 10px; padding: 8px 11px;
  color: #fff; pointer-events: none; white-space: nowrap; z-index: 5;
  box-shadow: 0 6px 22px rgba(12, 26, 53, .24);
  display: grid; gap: 1px; line-height: 1.4;
}
.grafik-ipucu strong { font-family: var(--sayi); font-size: 14.5px; font-weight: 650; }
.grafik-ipucu .ipucu-fark { font-family: var(--sayi); font-size: 12px; }
.grafik-ipucu .ipucu-fark.arti { color: #6ee7b7; }
.grafik-ipucu .ipucu-fark.eksi { color: #fca5a5; }
.grafik-ipucu .ipucu-fark.sonuk { color: #a9b6cd; }
.grafik-ipucu .ipucu-zaman { color: #a9b6cd; font-size: 11.5px; }

.detay-ust { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.detay-kimlik { display: flex; align-items: center; gap: 14px; }
.detay-kimlik h2 { font-size: 19px; }
.detay-fiyat { margin-left: auto; text-align: right; }
.detay-fiyat strong { font-family: var(--sayi); font-size: 23px; font-weight: 650; display: block; }
.detay-izgara { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); margin-top: 18px; }
.detay-kutu { background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 11px; padding: 12px 14px; }
.detay-kutu span { display: block; font-size: 11px; color: var(--yazi-silik); text-transform: uppercase;
                   letter-spacing: .05em; font-weight: 600; }
.detay-kutu strong { font-family: var(--sayi); font-size: 15px; display: block; margin-top: 5px; }

/* --- kripto piyasa havası --- */

.hava-kart { margin-bottom: 16px; }
.hava-satir { display: grid; gap: 10px; margin-top: 16px;
              grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.hava-kutu {
  display: flex; flex-direction: column; background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: 11px; padding: 12px 14px;
}
.hava-kutu span { font-size: 11px; color: var(--yazi-silik); text-transform: uppercase;
                  letter-spacing: .05em; font-weight: 600; }
.hava-kutu strong { font-family: var(--sayi); font-size: 17px; display: block; margin-top: 5px; }
.hava-kutu small { font-size: 11.5px; color: var(--yazi-silik); margin-top: 3px; }
.hava-kutu small.arti { color: var(--arti); }
.hava-kutu small.eksi { color: var(--eksi); }

/* --- dönem kıyası --- */

.kiyas-satir { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.kiyas-cip {
  display: flex; align-items: baseline; gap: 8px;
  background: var(--zemin); border: 1px solid var(--cizgi); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px;
}
.kiyas-cip span { color: var(--yazi-silik); }
.kiyas-cip strong { font-family: var(--sayi); font-size: 13px; font-weight: 650; }
/* Portföy kıyasların arasında kaybolmasın. */
.kiyas-portfoy { background: var(--laci-800); border-color: transparent; }
.kiyas-portfoy span { color: #a9bad6; }
/* Lacivert zeminde --arti/--eksi kontrastı 4,4:1 kalıyor; açık tonlar kullanılır. */
.kiyas-portfoy strong.arti { color: #6ee7b7; }
.kiyas-portfoy strong.eksi { color: #fca5a5; }
.kiyas-portfoy strong.sonuk { color: #a9bad6; }

/* --- sunucu ve depo --- */

.makine-kart { margin-bottom: 16px; }
.makine-izgara { display: grid; gap: 10px; margin-top: 16px;
                 grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.makine-izgara .detay-kutu { display: flex; flex-direction: column; }
.makine-alt { font-size: 11px; color: var(--yazi-silik); margin-top: 3px; }
.makine-servisler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.servis-cip {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 13px;
  border-radius: 999px; font-size: 12.5px; border: 1px solid transparent;
}
.servis-cip strong { font-family: var(--sayi); font-size: 12px; font-weight: 650; }
.servis-iyi { background: var(--arti-soft); border-color: var(--arti-soft); }
.servis-iyi span { color: var(--yazi-sonuk); }
.servis-iyi strong { color: var(--arti); }
.servis-kotu { background: var(--eksi-soft); border-color: var(--eksi-soft); }
.servis-kotu span { color: var(--yazi-sonuk); }
.servis-kotu strong { color: var(--eksi); }

.depo-kart { margin-top: 16px; }
.depo-liste { list-style: none; margin: 0; padding: 0; display: flex;
              flex-direction: column; gap: 2px; }
.depo-satir {
  display: grid; grid-template-columns: 72px 1fr; align-items: start; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border-bottom: 1px solid var(--cizgi);
  transition: background .18s; animation: satir-gir .4s var(--yay) backwards;
}
.depo-satir:hover { background: var(--laci-100); }
.depo-ajan {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-align: center;
  padding: 4px 0; border-radius: 6px;
}
.ajan-claude { background: var(--laci-100); color: var(--laci-700); }
.ajan-codex { background: var(--arti-soft); color: var(--arti); }
.ajan-elle { background: var(--sari-soft); color: var(--sari-koyu); }
.depo-metin { min-width: 0; }
.depo-konu { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depo-alt { font-size: 11.5px; color: var(--yazi-silik); margin-top: 2px;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- sistem sağlığı --- */

.sistem-ust { display: flex; align-items: center; gap: 10px; }
#sistem-ozet { margin: 0 0 14px; }
/* Kart içi .tablo-sarmal negatif alt boşluk taşır ve sonraki paragrafın
   üstüne biner; sistem tablosu kendi sarmalını kullanır. */
.sistem-tablo-sarmal { overflow-x: auto; margin-bottom: 16px; }
.sistem-tablo { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sistem-tablo th { text-align: left; font-size: 11px; color: var(--yazi-silik);
                   text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
                   padding: 8px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.sistem-tablo td { padding: 10px; border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.sistem-tablo th.sag, .sistem-tablo td.sag { text-align: right; }
.sistem-tablo tr:hover td { background: var(--laci-100); }
/* Hata metni satırı şişirmesin; tamamı title'da duruyor. */
.sistem-tablo td:last-child { max-width: 340px; overflow: hidden;
                              text-overflow: ellipsis; white-space: nowrap; }

/* --- aylık rapor arşivi --- */

.arsiv-kart { margin-top: 16px; }
.arsiv-govde { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
.arsiv-liste { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 4px; }
.arsiv-ay {
  width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px;
  border-radius: 10px; font: inherit; transition: background .15s;
}
.arsiv-ay:hover { background: var(--laci-100); }
.arsiv-ay.etkin { background: var(--laci-800); color: #fff; }
.arsiv-ay strong { display: block; font-size: 14px; font-weight: 600; }
.arsiv-ay small { display: block; font-family: var(--sayi); font-size: 12px;
                  color: var(--yazi-silik); margin-top: 2px; }
/* Durum renkleri .arsiv-ay small kuralına yenik düşmesin diye ayrıca yazılır. */
.arsiv-ay small.arti { color: var(--arti); }
.arsiv-ay small.eksi { color: var(--eksi); }
/* Lacivert zeminde kâr/zarar renkleri okunmaz; seçili satırda söndürülür. */
.arsiv-ay.etkin small, .arsiv-ay.etkin small.arti, .arsiv-ay.etkin small.eksi { color: #a9bad6; }
.arsiv-detay { min-width: 0; }
.arsiv-baslik { margin: 0 0 14px; font-size: 16px; font-weight: 650; }
.arsiv-detay .detay-izgara { margin-top: 0; }
.arsiv-islem { margin: 14px 0 0; }
.arsiv-tablo-sarmal { overflow-x: auto; margin-bottom: 14px; }
.arsiv-tablo { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13.5px; }
.arsiv-tablo th { text-align: left; font-size: 11px; color: var(--yazi-silik);
                  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
                  padding: 6px 10px; border-bottom: 1px solid var(--cizgi); }
.arsiv-tablo td { padding: 8px 10px; border-bottom: 1px solid var(--cizgi); }
.arsiv-tablo th.sag, .arsiv-tablo td.sag { text-align: right; }

@media (max-width: 860px) {
  .arsiv-govde { grid-template-columns: 1fr; }
  .arsiv-liste { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .arsiv-ay { width: auto; white-space: nowrap; }
}

/* --- işlem defteri (varlık detayı) --- */

.islem-bolum { margin-top: 26px; border-top: 1px solid var(--cizgi); padding-top: 20px; }
.islem-bolum .kart-ust { margin-bottom: 16px; }

/* Alanlar üstten hizalanır; düğmenin etiketi olmadığı için etiket satırı
   kadar (18px satır + 6px boşluk) aşağıdan başlar. */
.islem-form {
  display: grid; gap: 12px; align-items: start; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.islem-form .alan label { line-height: 18px; }
.islem-form > .islem-dugmeler { margin-top: 24px; }

/* Düğmeler kendi alanında: etiket satırı boşluğunu paylaşırlar. */
.islem-dugmeler { display: flex; gap: 8px; align-items: stretch; }
.islem-dugmeler button { flex: 1; }

.islem-liste { list-style: none; margin: 0; padding: 0; display: flex;
               flex-direction: column; gap: 2px; }
.islem-satir {
  display: grid; grid-template-columns: 62px 1fr auto auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border-bottom: 1px solid var(--cizgi);
  transition: background .18s; animation: satir-gir .4s var(--yay) backwards;
}
.islem-satir:hover { background: var(--laci-100); }
.islem-rozet {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-align: center;
  padding: 4px 0; border-radius: 6px;
}
.islem-rozet.arti { background: var(--arti-soft); color: var(--arti); }
.islem-rozet.eksi { background: var(--eksi-soft); color: var(--eksi); }
.islem-metin { min-width: 0; }
.islem-metin .sayi { font-size: 13.5px; }
.islem-alt { font-size: 11.5px; color: var(--yazi-silik); margin-top: 2px;
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.islem-tutar { font-size: 13px; font-weight: 600; text-align: right; }

@media (max-width: 620px) {
  .islem-satir { grid-template-columns: 54px 1fr auto auto; }
  .islem-tutar { grid-column: 2 / 3; text-align: left; }
}

/* --- düğmeler --- */

button { font: inherit; cursor: pointer; border-radius: 10px; transition: filter .15s, background .15s; }
button:disabled { opacity: .55; cursor: not-allowed; }

.birincil {
  background: var(--sari); color: var(--laci-900); border: 0; padding: 10px 18px; font-weight: 650;
  box-shadow: 0 1px 2px rgba(180,130,0,.25);
}
.birincil:hover:not(:disabled) { background: var(--sari-koyu); }
.ikincil { background: var(--kart); color: var(--yazi-sonuk); border: 1px solid var(--cizgi-koyu); padding: 9px 15px; }
.ikincil:hover { color: var(--yazi); background: var(--zemin); }
.satir-btn { background: none; border: 0; color: var(--yazi-silik); padding: 5px 8px; font-size: 13px; border-radius: 7px; }
.satir-btn:hover { color: var(--laci-700); background: var(--laci-100); }
.satir-btn.sil:hover { color: var(--eksi); background: var(--eksi-soft); }

/* --- form --- */

input, select {
  width: 100%; background: var(--kart); border: 1px solid var(--cizgi-koyu);
  color: var(--yazi); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 14px;
}
input:focus, select:focus { outline: 2px solid var(--sari); outline-offset: -1px; border-color: transparent; }
input[type="number"] { font-family: var(--sayi); }

.kutu-arka {
  position: fixed; inset: 0; background: rgba(10,23,51,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px; z-index: 50; overflow-y: auto;
}
.kutu {
  background: var(--kart); border-radius: 18px; padding: 26px; width: 100%; max-width: 640px;
  box-shadow: 0 30px 80px rgba(4,12,30,.35);
}
.kutu.genis-kutu { max-width: 960px; }
.kutu h2 { margin-bottom: 20px; font-size: 17px; }
.kutu.genis-kutu h2 { margin-bottom: 0; }
.alan-izgara { display: grid; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.alan { display: flex; flex-direction: column; min-width: 0; }
.alan.genis-alan { grid-column: 1 / -1; }
.alan label { font-size: 12px; color: var(--yazi-sonuk); margin-bottom: 6px; font-weight: 500; }
.alan small { font-size: 11.5px; color: var(--yazi-silik); margin-top: 5px; }
.kutu-dugmeler { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* --- durum --- */

.arastirma-kart { margin-bottom: 20px; }
.arastirma-kart .aciklama { margin: 12px 0; }
.rapor-kategorileri { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-bottom: 20px; }
.rapor-kategori { text-align: left; cursor: pointer; border: 2px solid transparent; font: inherit; }
.rapor-kategori strong { display: block; color: var(--yazi); font-size: 17px; margin-bottom: 8px; }
.rapor-kategori span { color: var(--yazi-sonuk); font-size: 13px; }
.rapor-kategori:hover { border-color: var(--laci-100); }
.rapor-kategori.etkin { border-color: var(--sari); background: var(--sari-soft); }

.hata-satiri {
  color: var(--eksi); font-size: 13px; margin: 14px 0 0; background: var(--eksi-soft);
  border: 1px solid rgba(224,72,61,.22); padding: 10px 13px; border-radius: 10px;
}
.uyari {
  color: var(--uyari); font-size: 13px; margin: 0 0 16px; background: var(--uyari-soft);
  border: 1px solid rgba(183,121,31,.22); padding: 12px 15px; border-radius: 11px;
}
.uyari.kalici { color: var(--yazi-sonuk); }
.uyari.kalici strong { color: var(--uyari); }
.aciklama { color: var(--yazi-sonuk); font-size: 13.5px; margin: 0; }
.bos-durum { color: var(--yazi-sonuk); font-size: 14px; text-align: center; padding: 34px 20px; margin: 0; }

.rozet {
  font-size: 12px; padding: 6px 12px; border-radius: 20px; font-family: var(--sayi);
  background: var(--laci-100); color: var(--yazi-sonuk); font-weight: 600;
}
.rozet-canli { background: var(--arti-soft); color: var(--arti); }
.rozet-bayat { background: var(--uyari-soft); color: var(--uyari); }
.rozet-altin { background: var(--sari-soft); color: var(--sari-koyu); }
.rozet-kotu { background: var(--eksi-soft); color: var(--eksi); }

.cikti {
  background: var(--laci-900); border-radius: 11px; padding: 16px; font-family: var(--sayi);
  font-size: 12.5px; line-height: 1.6; overflow: auto; max-height: 60vh; white-space: pre-wrap;
  word-break: break-word; color: #c9d6ea; margin: 0;
}
.test-ozet { font-size: 14px; margin-bottom: 14px; color: var(--yazi-sonuk); }
.test-ozet strong { font-family: var(--sayi); }

.bildirim {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--laci-900); color: #fff; padding: 12px 20px; border-radius: 11px;
  box-shadow: var(--golge); z-index: 80; font-size: 14px;
}
.bildirim.hata { background: var(--eksi); }

@media (max-width: 900px) {
  .kabuk { flex-direction: column; }
  .yan { width: 100%; height: auto; position: static; padding: 14px; }
  .sekmeler { flex-direction: row; overflow-x: auto; }
  .sekme { white-space: nowrap; }
  .yan-alt { display: none; }
  main { padding: 18px 14px 32px; }
  .ust-bar { padding: 14px 16px; }
}

[hidden] { display: none !important; }

/* ============================================================
   HAREKET — animasyon katmanı
   Yapıyı değiştirmez; yalnız görünüm ve geçişler eklenir.
   "Hareketi azalt" tercihi seçiliyse en altta tümü kapatılır.
   ============================================================ */

:root {
  --yay: cubic-bezier(.22, .85, .28, 1);
  --golge-yuksek: 0 4px 12px rgba(12,26,53,.07), 0 18px 40px rgba(12,26,53,.10);
  --golge-altin: 0 8px 22px rgba(244,179,1,.34);
}

html { scroll-behavior: smooth; }

@keyframes yumusak-gir { from { opacity: 0; } to { opacity: 1; } }
@keyframes yukari-gir  { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes satir-gir   { from { opacity: 0; transform: translateY(9px); }  to { opacity: 1; transform: none; } }
@keyframes sag-gir     { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes kutu-gir    { from { opacity: 0; transform: translateY(22px) scale(.965); } to { opacity: 1; transform: none; } }
@keyframes bildirim-gir { from { opacity: 0; transform: translate(-50%, 22px) scale(.96); }
                          to   { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes nabiz       { 0%   { box-shadow: 0 0 0 0 rgba(15,157,104,.5); }
                         70%  { box-shadow: 0 0 0 7px rgba(15,157,104,0); }
                         100% { box-shadow: 0 0 0 0 rgba(15,157,104,0); } }
@keyframes sup         { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes suzul       { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes parilti     { 0% { transform: translateX(-130%) skewX(-18deg); }
                         55%, 100% { transform: translateX(330%) skewX(-18deg); } }
@keyframes ciz         { from { stroke-dasharray: 1; stroke-dashoffset: 1; }
                         to   { stroke-dasharray: 1; stroke-dashoffset: 0; } }
@keyframes donut-dilim { from { opacity: 0; } to { opacity: 1; } }
@keyframes donut-gir   { from { opacity: 0; transform: rotate(-16deg) scale(.9); }
                         to   { opacity: 1; transform: none; } }
@keyframes zemin-kay   { 0%   { transform: translate3d(0,0,0) scale(1); }
                         50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
                         100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes donme       { to { transform: rotate(360deg); } }
@keyframes dolgu-buyu  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes parla-yesil   { 0% { background: transparent; } 18% { background: var(--arti-soft); } 100% { background: transparent; } }
@keyframes parla-kirmizi { 0% { background: transparent; } 18% { background: var(--eksi-soft); } 100% { background: transparent; } }

/* --- giriş ekranı --- */

.giris-sarmal { position: relative; overflow: hidden; }
.giris-sarmal::before {
  content: ""; position: absolute; inset: -25%; pointer-events: none;
  background: radial-gradient(620px 420px at 25% 20%, rgba(244,179,1,.20) 0%, transparent 62%),
              radial-gradient(720px 460px at 78% 78%, rgba(30,63,120,.55) 0%, transparent 60%);
  animation: zemin-kay 17s ease-in-out infinite;
}
.giris-kart { position: relative; animation: kutu-gir .55s var(--yay) backwards; }
.marka-giris .marka-logo { animation: suzul 5.5s ease-in-out infinite; }

/* --- kabuk ve sekmeler --- */

.yan-marka .marka-logo { transition: transform .3s var(--yay); }
.yan-marka:hover .marka-logo { transform: translateY(-2px) scale(1.03); }

.sekme { position: relative; overflow: hidden;
         transition: background .2s, color .2s, transform .2s var(--yay), box-shadow .25s; }
.sekme svg { transition: transform .3s var(--yay); }
.sekme:hover { transform: translateX(3px); }
.sekme:hover svg { transform: scale(1.14); }
.sekme.etkin { box-shadow: var(--golge-altin); animation: sekme-vurgu .4s var(--yay); }
.sekme.etkin svg { transform: scale(1.06); }
@keyframes sekme-vurgu { from { transform: translateX(-7px) scale(.96); opacity: .55; }
                         to   { transform: none; opacity: 1; } }

.yan-cikis, .yan-kullanici { transition: background .2s, color .2s, transform .2s var(--yay); }
.yan-kullanici:hover { transform: translateY(-1px); }
.yan-avatar { transition: transform .3s var(--yay); }
.yan-kullanici:hover .yan-avatar { transform: rotate(-6deg) scale(1.06); }

/* --- bölüm girişleri --- */

.bolum:not([hidden]) { animation: yumusak-gir .28s ease backwards; }
.bolum:not([hidden]) .kpi-izgara > .kpi,
.bolum:not([hidden]) > .kart,
.bolum:not([hidden]) > .uyari,
.bolum:not([hidden]) > .ikili > .kart,
.bolum:not([hidden]) > .rapor-kategorileri > .rapor-kategori,
.bolum:not([hidden]) > .ikili > article {
  animation: yukari-gir .5s var(--yay) backwards;
}
.kpi-izgara > .kpi:nth-child(2) { animation-delay: .06s; }
.kpi-izgara > .kpi:nth-child(3) { animation-delay: .12s; }
.kpi-izgara > .kpi:nth-child(4) { animation-delay: .18s; }
.bolum:not([hidden]) > .kart,
.bolum:not([hidden]) > .uyari { animation-delay: .1s; }
.bolum:not([hidden]) > .ikili > *:nth-child(1) { animation-delay: .14s; }
.bolum:not([hidden]) > .ikili > *:nth-child(2) { animation-delay: .22s; }
.rapor-kategorileri > *:nth-child(2) { animation-delay: .09s; }

/* --- kart ve KPI etkileşimi --- */

.kart, .kpi { transition: transform .28s var(--yay), box-shadow .28s var(--yay), border-color .25s; }
.kart:hover, .kpi:hover { transform: translateY(-3px); box-shadow: var(--golge-yuksek); }

.kpi-vurgu { position: relative; overflow: hidden; }
.kpi-vurgu:hover { box-shadow: 0 10px 34px rgba(10,23,51,.34); }
.kpi-vurgu::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(244,179,1,.14), transparent);
  animation: parilti 7s ease-in-out infinite;
}
.kpi-ikon { transition: transform .3s var(--yay), background .3s; }
.kpi:hover .kpi-ikon { transform: scale(1.1) rotate(-5deg); }

.delta, .rozet, .perf-cip { transition: background .3s, color .3s, transform .2s var(--yay); }
.kpi:hover .delta { transform: scale(1.04); }

.perf-kutu, .detay-kutu { transition: transform .25s var(--yay), border-color .25s, background .25s, box-shadow .25s; }
.perf-kutu:hover, .detay-kutu:hover {
  transform: translateY(-2px); border-color: var(--cizgi-koyu); background: var(--kart);
  box-shadow: var(--golge-kart);
}

/* --- canlı / bayat rozeti --- */

.rozet-canli::before, .rozet-bayat::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; margin-right: 7px; vertical-align: 1px;
}
.rozet-canli::before { animation: nabiz 2.1s ease-out infinite; }
.rozet-bayat::before { animation: sup 1.4s ease-in-out infinite; }

/* --- tablolar --- */

.satir-gir { animation: satir-gir .42s var(--yay) backwards; }
.tablo tbody tr { transition: background .18s, box-shadow .2s; }
.tablo tbody tr:hover { box-shadow: inset 3px 0 0 var(--sari); }
.tablo tbody tr td { transition: background .4s; }
.varlik-hucre .logo { transition: transform .3s var(--yay), box-shadow .3s; }
.tablo tbody tr:hover .logo { transform: scale(1.12) rotate(-6deg); }
.perf-cip:hover { transform: translateY(-1px); }

td.parla-arti { animation: parla-yesil 1.6s ease-out; }
td.parla-eksi { animation: parla-kirmizi 1.6s ease-out; }

.agirlik-dolgu { transform-origin: left center; animation: dolgu-buyu .8s var(--yay) backwards;
                 transition: width .5s var(--yay); }

/* --- dağılım / donut --- */

/* Dilimlerin kendi transform özniteliği var (rotate(-90 60 60)); onlara CSS transformu
   uygulanmaz — yalnız opaklık. Dönerek giriş, svg kökünün kendisine verilir. */
#donut { transform-origin: center; }
#donut.donut-gir { animation: donut-gir .6s var(--yay) backwards; }
#donut circle { transition: opacity .2s; }
#donut circle.dilim-gir { animation: donut-dilim .45s ease backwards; }

.dagilim-liste li { transition: transform .2s var(--yay), color .2s; }
.dagilim-nokta { transition: transform .25s var(--yay); }
.dagilim-liste li:hover .dagilim-nokta { transform: scale(1.45); }

/* --- izlenen evren --- */

.evren-liste li { transition: background .2s, padding-left .2s var(--yay); }
.evren-liste li:hover { background: var(--laci-100); padding-left: 8px; }

/* --- raporlar --- */

.rapor-kategori { position: relative; overflow: hidden;
                  transition: transform .28s var(--yay), box-shadow .28s, border-color .25s, background .3s; }
.rapor-kategori::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--laci-600), var(--sari));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--yay);
}
.rapor-kategori:hover { transform: translateY(-4px); box-shadow: var(--golge-yuksek); }
.rapor-kategori:hover::before,
.rapor-kategori.etkin::before { transform: scaleX(1); }
.rapor-kategori.etkin { box-shadow: 0 6px 20px rgba(244,179,1,.22); }
.rapor-kategori strong { transition: color .25s; }
.rapor-kategori.etkin strong { color: var(--laci-800); }

#rapor-portfoy-alani:not([hidden]),
#rapor-bot-alani:not([hidden]) { animation: yukari-gir .42s var(--yay) backwards; animation-delay: .06s; }

.rapor-liste li { animation: sag-gir .4s var(--yay) backwards; }
.rapor-liste button { position: relative;
                      transition: background .2s, color .2s, transform .2s var(--yay), padding-left .2s; }
.rapor-liste button::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--sari); transform: scaleY(0); transition: transform .28s var(--yay);
}
.rapor-liste button:hover { transform: translateX(3px); padding-left: 16px; }
.rapor-liste button:hover::before,
.rapor-liste button.etkin::before { transform: scaleY(1); }
.rapor-liste button.etkin { padding-left: 16px; }

.cikti { transition: box-shadow .3s; scrollbar-width: thin; scrollbar-color: #34456b transparent; }
.cikti::-webkit-scrollbar { width: 9px; height: 9px; }
.cikti::-webkit-scrollbar-thumb { background: #2b3d63; border-radius: 6px; }
.cikti::-webkit-scrollbar-thumb:hover { background: #3d5280; }
.cikti::-webkit-scrollbar-track { background: transparent; }
.icerik-gir { animation: yumusak-gir .35s ease backwards; }
.icerik-yukleniyor { color: var(--yazi-silik); }
.icerik-yukleniyor::after {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 9px;
  border: 2px solid rgba(201,214,234,.3); border-top-color: var(--sari); border-radius: 50%;
  animation: donme .8s linear infinite; vertical-align: -1px;
}

/* --- grafik --- */

.grafik-cizgi { animation: ciz 1.05s var(--yay) backwards; }
.grafik-dolgu-alan { animation: yumusak-gir .8s ease .3s backwards; }
#grafik text, #grafik line, #gecmis-grafik text, #gecmis-grafik line,
#rapor-grafik text, #rapor-grafik line { animation: yumusak-gir .5s ease backwards; }
.grafik-ipucu { transition: left .12s var(--yay); }
.grafik-imlec { transition: opacity .14s; }

.aralik-secici button { transition: background .2s, color .2s, transform .18s var(--yay); }
.aralik-secici button:hover { transform: translateY(-1px); }

/* --- düğmeler --- */

.birincil { position: relative; overflow: hidden;
            transition: background .2s, transform .18s var(--yay), box-shadow .22s; }
.birincil::after {
  content: ""; position: absolute; top: -50%; bottom: -50%; left: 0; width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-170%) skewX(-18deg); transition: transform .55s var(--yay);
}
.birincil:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--golge-altin); }
.birincil:hover:not(:disabled)::after { transform: translateX(330%) skewX(-18deg); }
.birincil:active:not(:disabled) { transform: translateY(0) scale(.98); }

.ikincil { transition: background .2s, color .2s, transform .18s var(--yay), box-shadow .2s; }
.ikincil:hover { transform: translateY(-2px); box-shadow: var(--golge-kart); }
.ikincil:active { transform: translateY(0) scale(.98); }
.satir-btn { transition: background .18s, color .18s, transform .18s var(--yay); }
.satir-btn:hover { transform: translateY(-1px); }
.para { transition: background .22s, color .22s, transform .18s var(--yay); }
.para:hover:not(.etkin) { transform: translateY(-1px); }
.para.etkin { animation: para-sec .3s var(--yay); }
@keyframes para-sec { from { transform: scale(.9); opacity: .6; } to { transform: scale(1); opacity: 1; } }

/* --- form ve kutular --- */

input, select { transition: border-color .2s, box-shadow .22s, background .2s; }
input:focus, select:focus { box-shadow: 0 0 0 4px rgba(244,179,1,.16); }
input:hover:not(:focus), select:hover:not(:focus) { border-color: var(--laci-600); }

.kutu-arka:not([hidden]) { animation: yumusak-gir .22s ease backwards; }
.kutu-arka:not([hidden]) > .kutu { animation: kutu-gir .38s var(--yay) backwards; }

/* --- bildirim --- */

.bildirim:not([hidden]) { animation: bildirim-gir .38s var(--yay) backwards; }

/* --- hareketi azalt tercihi --- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .kart:hover, .kpi:hover, .rapor-kategori:hover, .sekme:hover,
  .ikincil:hover, .birincil:hover:not(:disabled) { transform: none; }
}

/* ============================================================
   DAĞILIM HALKASI ve SIRALANABİLİR TABLO
   Halka parça-bütün okuması içindir: en çok altı dilim, dilimler
   arasında zemin boşluğu, kimlik listede yazıyla da verilir.
   ============================================================ */

/* Tablo uzun olduğunda halka boş kartın tepesinde asılı kalmasın. */
.dagilim { gap: 18px; flex: 1; justify-content: center; }
.donut-sarmal { width: 190px; height: 190px; }
#donut { width: 190px; height: 190px; overflow: visible; }
.donut-orta span { font-size: 19px; letter-spacing: -.02em; }
.donut-orta small { font-size: 11px; margin-top: 2px; max-width: 120px; text-align: center;
                    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dilim { transition: stroke-width .2s var(--yay), opacity .2s; cursor: pointer; }
.dilim-etkin { stroke-width: 17; }
.dilim-pasif { opacity: .3; }

.dagilim-liste { gap: 1px; }
.dagilim-satir {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: none; border: 0; color: var(--yazi); font: inherit; font-size: 13.5px;
  padding: 7px 9px; border-radius: 9px; cursor: default;
  transition: background .18s, transform .18s var(--yay);
}
button.dagilim-satir { cursor: pointer; }
.dagilim-satir:hover, .dagilim-satir.etkin { background: var(--laci-100); }
button.dagilim-satir:hover, button.dagilim-satir.etkin { transform: translateX(2px); }
button.dagilim-satir:focus-visible { outline: 2px solid var(--sari); outline-offset: -2px; }
.dagilim-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dagilim-tutar { margin-left: auto; font-family: var(--sayi); font-size: 12.5px; color: var(--yazi-sonuk); }
.dagilim-oran { margin-left: 0; min-width: 48px; text-align: right; font-size: 12.5px; }
.dagilim-nokta { width: 10px; height: 10px; border-radius: 3px; }

.dagilim-ozet {
  margin: 2px 0 0; width: 100%; font-size: 12px; color: var(--yazi-silik);
  line-height: 1.45; text-align: center;
}

/* --- sıralanabilir sütun başlıkları --- */

.tablo th .sirala {
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  text-transform: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer;
  border-radius: 6px; transition: color .18s;
}
.tablo th .sirala:hover { color: var(--laci-700); }
.tablo th .sirala:focus-visible { outline: 2px solid var(--sari); outline-offset: 3px; }
.tablo th .sirala::after {
  content: "↕"; font-size: 9px; margin-left: 3px; opacity: .4; display: inline-block;
  transition: opacity .18s, transform .18s var(--yay);
}
.tablo th .sirala:hover::after { opacity: .75; }
.tablo th .sirala.etkin { color: var(--laci-700); }
.tablo th .sirala.artan::after { content: "↑"; opacity: 1; color: var(--sari-koyu); }
.tablo th .sirala.azalan::after { content: "↓"; opacity: 1; color: var(--sari-koyu); }
.tablo th .sirala small { pointer-events: none; }

/* ============================================================
   PORTFÖY DÖNEM RAPORU
   ============================================================ */

.rapor-alani { display: flex; flex-direction: column; }

.rapor-filtre {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.rapor-filtre .rozet { font-size: 12px; }
.rapor-filtre #rapor-yenile { margin-left: auto; }
#rapor-donem button { padding: 8px 15px; }

#rapor-durum { padding: 26px 4px; }
#rapor-govde { display: flex; flex-direction: column; }
#rapor-govde .kpi-izgara { margin-bottom: 16px; }
#rapor-govde .ikili { margin-bottom: 16px; }
#rapor-govde > .kart { margin-bottom: 16px; }
#rapor-varsayim { margin: 0; }
#rapor-disarida { margin-top: 26px; }

#rapor-grafik { height: 260px; }

/* --- katkı çubukları: sıfırdan iki yana --- */

.katki-liste { display: flex; flex-direction: column; gap: 4px; }
.katki-satir {
  display: grid; grid-template-columns: 62px 1fr 92px; align-items: center; gap: 10px;
  padding: 6px 6px; border-radius: 9px; transition: background .18s;
  animation: satir-gir .42s var(--yay) backwards;
}
.katki-satir:hover { background: var(--laci-100); }
.katki-ad { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.katki-cubuk { display: flex; align-items: center; height: 16px; position: relative; }
.katki-cubuk::before {
  content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px;
  background: var(--cizgi-koyu);
}
.katki-yarim { flex: 1; display: flex; height: 9px; }
.katki-yarim.sol { justify-content: flex-end; padding-right: 2px; }
.katki-yarim.sag { justify-content: flex-start; padding-left: 2px; }
.katki-dolgu { border-radius: 4px; min-width: 2px; transition: width .45s var(--yay); }
.katki-dolgu.arti { background: var(--arti); }
.katki-dolgu.eksi { background: var(--eksi); }
.katki-satir:hover .katki-dolgu { filter: brightness(1.08); }
.katki-tutar { text-align: right; font-size: 12.5px; font-weight: 600; }

/* Rapor alanındaki kartlar da kademeli girsin (bölümün doğrudan çocuğu değiller). */
.rapor-alani:not([hidden]) .kpi-izgara > .kpi,
.rapor-alani:not([hidden]) > .kart,
.rapor-alani:not([hidden]) #rapor-govde > .kart,
.rapor-alani:not([hidden]) .ikili > .kart {
  animation: yukari-gir .5s var(--yay) backwards;
}
.rapor-alani .ikili > *:nth-child(2) { animation-delay: .1s; }

@media (max-width: 620px) {
  .rapor-filtre #rapor-yenile { margin-left: 0; }
  .katki-satir { grid-template-columns: 54px 1fr 82px; }
}

/* --- portföy değer geçmişi kartı --- */

.gecmis-kart { margin-bottom: 16px; }
.gecmis-kart .kart-ust { flex-wrap: wrap; gap: 12px; }
#gecmis-grafik { height: 248px; }
#gecmis-ozet { margin-top: 16px; }
#gecmis-not { margin-top: 14px; font-size: 12px; color: var(--yazi-silik); }
#gecmis-bos { padding: 24px 20px; }

/* --- uyarılar kartı --- */

.uyari-kart { margin-top: 16px; }
.uyari-satir {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; background: var(--zemin); border: 1px solid var(--cizgi);
  border-radius: 12px; margin-bottom: 16px;
}
.uyari-satir .aciklama { flex: 1; min-width: 160px; }
.uyari-satir input[type="time"] { width: auto; }
.anahtar { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.anahtar input { width: 17px; height: 17px; accent-color: var(--sari); }

/* Alanlar üstten hizalanır: "Varlık" altındaki ipucu satırı hücreyi
   uzatıyor, alta hizalanınca o sütunun girdisi diğerlerinden yukarı
   kayıyordu. Düğmenin kendi etiketi olmadığı için etiket satırı kadar
   (18px satır + 6px boşluk) aşağıdan başlar; yüksekliği girdilerinkiyle
   aynı kalsın diye sabit yükseklik verilmez. */
.alarm-form {
  display: grid; gap: 12px; align-items: start; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.alarm-form .alan label { line-height: 18px; }
.alarm-form > button { margin-top: 24px; }

.alarm-liste { list-style: none; margin: 0 0 14px; padding: 0; display: flex;
               flex-direction: column; gap: 2px; }
.alarm-satir {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px;
  border-bottom: 1px solid var(--cizgi); transition: background .18s;
  animation: satir-gir .4s var(--yay) backwards;
}
.alarm-satir:hover { background: var(--laci-100); }
.alarm-metin { flex: 1; font-size: 14px; }