/* Bileşenler: düğme, girdi, alan, rozet, kart, sayfa başlığı, KPI, sekmeler,
   arama, tablo, seçici, tarih/dönem seçici, açılır menü, katmanlar (modal,
   çekmece), bildirim, bant, iskelet, boş durum, grafik.
   Yalnız mantıksal yön özellikleri; renkler tokenlar.css'ten. */

/* ======================================================================
   Düğmeler
   ====================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-block-size: var(--dokunma); padding-block: 0; padding-inline: 15px;
  border: 1px solid rgb(var(--cizgi) / .13); border-radius: var(--r);
  background: rgb(var(--yuzey)); color: rgb(var(--metin));
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap; user-select: none;
  box-shadow: var(--golge-1);
  -webkit-tap-highlight-color: transparent;
  transition: background var(--hiz-1) var(--egri), border-color var(--hiz-1) var(--egri),
    box-shadow var(--hiz-2) var(--egri), transform var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri), filter var(--hiz-1) var(--egri);
}
.btn > .simge { flex-shrink: 0; }
/* Yön taşıyan simgeler (geri, ileri, çıkış…) sağdan sola arayüzde aynalanır. */
[dir="rtl"] .simge--yon { transform: scaleX(-1); }
.btn:hover { background: rgb(var(--yuzey-2)); border-color: rgb(var(--cizgi) / .2); }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .48; cursor: not-allowed; box-shadow: none; }
.btn--birincil {
  background: linear-gradient(180deg, rgb(var(--vurgu)) 0%, rgb(var(--vurgu-koyu)) 100%);
  border-color: rgb(var(--vurgu-koyu)); color: rgb(var(--vurgu-yz));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 1px 2px rgb(var(--vurgu-koyu) / .3), 0 6px 16px -6px rgb(var(--vurgu) / .55);
  text-shadow: 0 1px 0 rgb(0 0 0 / .08);
}
.btn--birincil:hover { background: linear-gradient(180deg, rgb(var(--vurgu)) 0%, rgb(var(--vurgu-koyu)) 100%); filter: brightness(1.06) saturate(1.05); box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 2px 4px rgb(var(--vurgu-koyu) / .3), 0 10px 22px -8px rgb(var(--vurgu) / .65); border-color: rgb(var(--vurgu-koyu)); }
.btn--tehlike { background: linear-gradient(180deg, rgb(239 68 68), rgb(220 38 38)); border-color: rgb(185 28 28); color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 6px 16px -6px rgb(220 38 38 / .5); }
.btn--tehlike:hover { background: linear-gradient(180deg, rgb(239 68 68), rgb(220 38 38)); filter: brightness(1.06); border-color: rgb(185 28 28); }
.btn--yumusak { background: rgb(var(--vurgu) / .1); border-color: transparent; color: rgb(var(--vurgu-metin)); box-shadow: none; }
.btn--yumusak:hover { background: rgb(var(--vurgu) / .16); border-color: transparent; }
.btn--sade { background: transparent; border-color: transparent; box-shadow: none; color: rgb(var(--metin-2)); }
.btn--sade:hover { background: rgb(var(--cizgi) / .06); border-color: transparent; color: rgb(var(--metin)); }
.btn--kucuk { min-block-size: 32px; padding-inline: 11px; font-size: .8125rem; border-radius: var(--r-s); gap: 6px; }
.btn--buyuk { min-block-size: 50px; padding-inline: 24px; font-size: 1rem; border-radius: 14px; gap: 10px; }
.btn--ikon { inline-size: var(--dokunma); padding-inline: 0; }
.btn--kucuk.btn--ikon { inline-size: 32px; }
.btn--tam { inline-size: 100%; }
.btn--yukleniyor { position: relative; color: transparent !important; text-shadow: none; pointer-events: none; }
.btn--yukleniyor > * { visibility: hidden; }
.btn--yukleniyor::after {
  content: ''; position: absolute; inset: 0; margin: auto; inline-size: 18px; block-size: 18px; border-radius: 50%;
  border: 2px solid rgb(var(--metin-3) / .35); border-block-start-color: rgb(var(--metin-2));
  animation: don 700ms linear infinite; /* sonsuz: iş bitene kadar dönen yükleniyor göstergesi */
}
.btn--birincil.btn--yukleniyor::after, .btn--tehlike.btn--yukleniyor::after { border-color: rgb(255 255 255 / .35); border-block-start-color: #fff; }
@keyframes don { to { transform: rotate(1turn); } }

/* ======================================================================
   Girdiler ve alanlar
   ====================================================================== */
.input {
  inline-size: 100%; min-block-size: var(--dokunma); padding-block: 8px; padding-inline: 12px;
  border: 1px solid rgb(var(--cizgi) / .16); border-radius: var(--r);
  background: rgb(var(--yuzey)); color: rgb(var(--metin));
  font: inherit; font-size: .9375rem; line-height: 1.4;
  box-shadow: inset 0 1px 2px rgb(var(--cizgi) / .04);
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri), background var(--hiz-1) var(--egri);
}
.input:hover { border-color: rgb(var(--cizgi) / .28); }
.input:focus { outline: none; border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.input::placeholder { color: rgb(var(--metin-3)); opacity: 1; }
.input:disabled { background: rgb(var(--yuzey-3)); color: rgb(var(--metin-3)); cursor: not-allowed; }
.input--hata, .input--hata:hover { border-color: rgb(var(--tehlike)); }
.input--hata:focus { box-shadow: 0 0 0 3px rgb(var(--tehlike) / .2); }
textarea.input { min-block-size: 92px; resize: vertical; }
select.input {
  appearance: none; cursor: pointer; padding-inline-end: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 16px; background-position: calc(100% - 12px) center;
}
/* Ok simgesi bitiş kenarında: background-position'ın mantıksal karşılığı yok. */
[dir="rtl"] select.input { background-position: 12px center; }

.alan { display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.alan__etiket { font-size: .8125rem; font-weight: 600; color: rgb(var(--metin-2)); }
.alan__yildiz { color: rgb(var(--tehlike)); font-style: normal; margin-inline-start: 3px; }
.alan__ipucu { font-size: .75rem; color: rgb(var(--metin-3)); }
.alan__hata { display: flex; align-items: center; gap: 5px; font-size: .75rem; font-weight: 600; color: rgb(var(--tehlike-metin)); animation: titre 300ms var(--egri); }
.alan--genis { grid-column: 1 / -1; }
@keyframes titre { 20%, 60% { transform: translateX(-3px); } 40%, 80% { transform: translateX(3px); } }
.form-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px 18px; }

/* Ek (birim, para işareti) girdiye yapışık kutu: yön akışla çevrilir. */
.alan__kap, .sayi-kutu--ekli {
  display: flex; align-items: stretch; inline-size: 100%;
  border: 1px solid rgb(var(--cizgi) / .16); border-radius: var(--r); background: rgb(var(--yuzey));
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.alan__kap:focus-within, .sayi-kutu--ekli:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.alan__kap .input, .sayi-kutu--ekli .input { border: 0; box-shadow: none; background: transparent; min-inline-size: 0; flex: 1; }
.alan__kap .input:focus, .sayi-kutu--ekli .input:focus { box-shadow: none; }
.alan__ek, .sayi-kutu__ek {
  display: flex; align-items: center; padding-inline: 12px; flex-shrink: 0;
  background: rgb(var(--yuzey-2)); color: rgb(var(--metin-2)); font-size: .8125rem; font-weight: 600;
  border-inline-start: 1px solid rgb(var(--cizgi) / .1); border-start-end-radius: var(--r); border-end-end-radius: var(--r);
}
.sayi-kutu { display: block; inline-size: 100%; }
.sayi-kutu--ekli { display: flex; }
.sayi-kutu__girdi { text-align: end; font-variant-numeric: tabular-nums; }
.sayi-kutu--ekli:has(.input--hata) { border-color: rgb(var(--tehlike)); }
.skt-kutu { display: block; }
.skt-girdi { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Onay kutusu */
.onay { display: inline-flex; align-items: center; gap: 10px; min-block-size: var(--dokunma); cursor: pointer; font-size: .9375rem; user-select: none; }
.onay input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.onay__kutu {
  display: grid; place-items: center; inline-size: 20px; block-size: 20px; flex-shrink: 0;
  border: 1.5px solid rgb(var(--cizgi) / .3); border-radius: 6px; background: rgb(var(--yuzey)); color: transparent;
  transition: background var(--hiz-1) var(--egri), border-color var(--hiz-1) var(--egri), transform var(--hiz-1) var(--egri);
}
.onay input:checked + .onay__kutu { background: rgb(var(--vurgu-koyu)); border-color: rgb(var(--vurgu-koyu)); color: #fff; }
.onay input:focus-visible + .onay__kutu { box-shadow: var(--halka); }
.onay:active .onay__kutu { transform: scale(.9); }

/* Aç/kapa anahtarı */
.ac-kapa { display: inline-flex; align-items: center; gap: 12px; min-block-size: var(--dokunma); cursor: pointer; user-select: none; }
.ac-kapa input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.ac-kapa__yol {
  position: relative; inline-size: 42px; block-size: 24px; flex-shrink: 0; border-radius: var(--r-tam);
  background: rgb(var(--cizgi) / .18); transition: background var(--hiz-2) var(--egri);
}
.ac-kapa__top {
  position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 18px; block-size: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25);
  transition: transform var(--hiz-2) var(--egri-yay);
}
.ac-kapa input:checked + .ac-kapa__yol { background: rgb(var(--vurgu)); }
.ac-kapa input:checked + .ac-kapa__yol .ac-kapa__top { transform: translateX(18px); }
[dir="rtl"] .ac-kapa input:checked + .ac-kapa__yol .ac-kapa__top { transform: translateX(-18px); }
.ac-kapa input:focus-visible + .ac-kapa__yol { box-shadow: var(--halka); }
.ac-kapa__metin { display: flex; flex-direction: column; line-height: 1.35; }
.ac-kapa__metin small { color: rgb(var(--metin-3)); font-size: .75rem; }

/* ======================================================================
   Rozet, kbd, avatar, eğilim çipi
   ====================================================================== */
.rozet {
  display: inline-flex; align-items: center; gap: 5px; padding-block: 2px; padding-inline: 9px;
  border-radius: var(--r-tam); font-size: .75rem; font-weight: 700; line-height: 1.6; white-space: nowrap;
  background: rgb(var(--cizgi) / .07); color: rgb(var(--metin-2));
  --rozet: var(--metin-2);
}
.rozet--vurgu { background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu-metin)); --rozet: var(--vurgu); }
.rozet--basari { background: rgb(var(--basari) / .13); color: rgb(var(--basari-metin)); --rozet: var(--basari); }
.rozet--uyari { background: rgb(var(--uyari) / .14); color: rgb(var(--uyari-metin)); --rozet: var(--uyari); }
.rozet--tehlike { background: rgb(var(--tehlike) / .12); color: rgb(var(--tehlike-metin)); --rozet: var(--tehlike); }
.rozet--bilgi { background: rgb(var(--bilgi) / .12); color: rgb(var(--bilgi-metin)); --rozet: var(--bilgi); }
.rozet--mor { background: rgb(124 58 237 / .12); color: rgb(109 40 217); --rozet: 124 58 237; }
:root[data-tema="karanlik"] .rozet--mor { color: rgb(196 181 253); }
.rozet__nokta { inline-size: 6px; block-size: 6px; border-radius: 50%; background: rgb(var(--rozet)); box-shadow: 0 0 0 3px rgb(var(--rozet) / .18); }

.kbd {
  display: inline-grid; place-items: center; min-inline-size: 22px; block-size: 22px; padding-inline: 6px;
  border: 1px solid rgb(var(--cizgi) / .16); border-block-end-width: 2px; border-radius: 6px;
  background: rgb(var(--yuzey)); color: rgb(var(--metin-2));
  font-family: var(--yazi); font-size: .6875rem; font-weight: 600; line-height: 1; white-space: nowrap;
}

.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0; border-radius: 50%;
  background: hsl(calc(var(--avatar-ton, 160) * 1deg) 55% 90%); color: hsl(calc(var(--avatar-ton, 160) * 1deg) 55% 28%);
  font-weight: 700; line-height: 1; letter-spacing: -.02em; user-select: none;
}
:root[data-tema="karanlik"] .avatar { background: hsl(calc(var(--avatar-ton, 160) * 1deg) 35% 26%); color: hsl(calc(var(--avatar-ton, 160) * 1deg) 70% 86%); }

.trend {
  display: inline-flex; align-items: center; gap: 2px; padding-block: 1px; padding-inline: 7px;
  border-radius: var(--r-tam); font-size: .75rem; font-weight: 700; line-height: 1.6; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.trend--iyi { background: rgb(var(--basari) / .13); color: rgb(var(--basari-metin)); }
.trend--kotu { background: rgb(var(--tehlike) / .12); color: rgb(var(--tehlike-metin)); }
.trend--notr { background: rgb(var(--cizgi) / .07); color: rgb(var(--metin-3)); }

/* ======================================================================
   Kartlar ve sayfa başlığı
   ====================================================================== */
.kart {
  position: relative; min-inline-size: 0;
  background: rgb(var(--yuzey)); border: var(--kenarlik); border-radius: var(--r-kart);
  box-shadow: var(--golge-2); padding: 20px;
}
.kart--tablo { padding: 0; overflow: hidden; }
.kart--sade { box-shadow: none; }
.kart__bas { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; min-block-size: 32px; }
.kart--tablo .kart__bas { padding: 16px 20px 0; }
.kart__simge { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; background: rgb(var(--ton) / .12); color: rgb(var(--ton)); flex-shrink: 0; }
.kart__baslik-kap { flex: 1; min-inline-size: 0; }
.kart__baslik { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; }
.kart__alt { margin: 2px 0 0; font-size: .8125rem; color: rgb(var(--metin-3)); }
.kart__eylem { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.sayfa-bas { display: flex; align-items: center; gap: 14px; margin-block-end: 22px; flex-wrap: wrap; }
.sayfa-bas__geri { flex-shrink: 0; }
.sayfa-bas__simge {
  display: grid; place-items: center; inline-size: 48px; block-size: 48px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(145deg, rgb(var(--ton) / .2), rgb(var(--ton) / .08));
  color: rgb(var(--ton)); box-shadow: inset 0 0 0 1px rgb(var(--ton) / .16);
}
.sayfa-bas__govde { flex: 1 1 260px; min-inline-size: 0; }
.sayfa-bas__ust { font-size: .8125rem; color: rgb(var(--metin-3)); margin-block-end: 2px; }
.sayfa-bas__ust a { color: inherit; text-decoration: none; }
.sayfa-bas__ust a:hover { color: rgb(var(--vurgu-metin)); }
.sayfa-bas__satir { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sayfa-bas h1 { margin: 0; font-size: clamp(1.25rem, 1.05rem + .7vw, 1.6rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.3; }
.sayfa-bas__alt { margin: 3px 0 0; color: rgb(var(--metin-3)); font-size: .875rem; }
.sayfa-bas__eylem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ======================================================================
   Büyük tutar (paraOgesi, KPI): para adı küçük ve soluk
   ====================================================================== */
/* «1,250 افغانی»: ad rakamın yarısından biraz büyük (orta boy rakamda en az
   .72rem: telefondaki KPI'da okunur kalsın); taban çizgisi ortak. Harf
   aralığı sıfır: rakamlara verilen eksi aralık Arapça harflerin bitişmesini
   bozuyordu. */
.para__ad { font-size: max(.56em, .72rem); font-weight: 700; letter-spacing: 0; opacity: .72; }
/* Tablo hücresinde (bilesen.js paraAdiniAyir): ad bir boy küçük ve gri; her
   satırda tekrarlanan «افغانی» sütunu genişletmesin, rakamlar okunsun. */
.tablo .para__ad { font-size: .82em; font-weight: 500; opacity: 1; color: rgb(var(--metin-3)); }
/* Taşan tek satır küçülür (bilesen.js sigdir): ölçek çocuk öğelerde, kutunun
   boyu sabit kalır. */
.sigdir > * { font-size: calc(1em * var(--sigdir, 1)); }

/* ======================================================================
   KPI kartı
   ====================================================================== */
.kpi-izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 16px; }
/* Yetim kart olmasın: dört kartlık şerit ya tek satır ya 2×2; beş kartlık 5
   ya da 3+2; üç kartlık 3 ya da alt alta. «3 + 1» tablette yarım boş bir satır
   bırakıyordu. clamp() eşik genişliğin altında büyük sütunu, üstünde küçüğü
   seçer (çarpan 999 bir anahtar gibi çalışır; konteyner sorgusu gerekmez).
   Payların yarım pikseli yuvarlama taşmasında bir sütun kaybolmasın diye. */
@media (min-width: 641px) {
  .kpi-izgara:has(> :nth-child(4):last-child),
  .kpi-izgara:has(> :nth-child(5):last-child):has(> .kpi[hidden]) {
    grid-template-columns: repeat(auto-fill, minmax(clamp(25% - 12.5px, (860px - 100%) * 999, 50% - 8.5px), 1fr));
  }
  .kpi-izgara:has(> :nth-child(5):last-child):not(:has(> .kpi[hidden])) {
    grid-template-columns: repeat(auto-fill, minmax(clamp(20% - 13px, (1000px - 100%) * 999, 33.33% - 11px), 1fr));
  }
  .kpi-izgara:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(auto-fill, minmax(clamp(33.33% - 11px, (620px - 100%) * 999, 100%), 1fr));
  }
}
.kpi {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  padding: 18px 18px 16px; border-radius: var(--r-kart);
  background: rgb(var(--yuzey)); border: var(--kenarlik); box-shadow: var(--golge-2);
  color: rgb(var(--metin)); text-decoration: none;
  transition: transform var(--hiz-2) var(--egri), box-shadow var(--hiz-2) var(--egri);
}
a.kpi:hover { transform: translateY(-2px); box-shadow: var(--golge-3); }
a.kpi:active { transform: translateY(0) scale(.99); }
.kpi__ic { position: relative; z-index: 1; display: flex; flex-direction: column; block-size: 100%; }
.kpi__ust { display: flex; align-items: center; gap: 10px; min-block-size: 38px; }
.kpi__simge {
  display: grid; place-items: center; inline-size: 38px; block-size: 38px; flex-shrink: 0; border-radius: 11px;
  background: rgb(var(--ton) / .12); color: rgb(var(--ton));
}
.kpi__baslik { flex: 1; min-inline-size: 0; font-size: .84rem; font-weight: 600; color: rgb(var(--metin-2)); line-height: 1.4; }
.kpi__deger {
  display: block; margin-block: 14px 4px; font-size: clamp(1.35rem, 1.05rem + .9vw, 1.8rem); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Sayaç kutusu yerleşim sınırı: boyu satır yüksekliğine sabit (size), içi
   dışarıyı etkilemez (layout). Yazı değiştikçe yalnız bu kutu dizilir. */
.kpi__sayi { display: block; contain: strict; block-size: 1.2em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Görünen sayı kartına sığmazsa küçülür (--kpi-olcek: bilesen.js kpiSigdir).
   Kutunun boyu değişmez; küçülen yazı aynı taban çizgisinde durur. */
.kpi__olcu { font-size: calc(1em * var(--kpi-olcek, 1)); }
/* KPI son değerinin ölçü öğesi (bilesen.js sonGenislik): sayfada tek,
   görünmez, yer tutmaz; yazı tipi ölçülen karttan kopyalanır. */
.kpi-cetvel { position: fixed; inset-block-start: 0; inset-inline-start: 0; visibility: hidden; pointer-events: none; white-space: nowrap; contain: layout style; }
.kpi .iskelet--buyuk { margin-block: 16px 8px; }
.kpi__alt-kap { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-block-start: auto; min-block-size: 22px; }
.kpi__alt { font-size: .78rem; color: rgb(var(--metin-3)); line-height: 1.5; min-inline-size: 0; }
.kpi__kivilcim { inline-size: 46%; max-inline-size: 150px; block-size: 34px; flex-shrink: 0; --vurgu: var(--ton); }
.kpi--uyari .kpi__deger { color: rgb(var(--uyari-metin)); }
.kpi--tehlike .kpi__deger { color: rgb(var(--tehlike-metin)); }
.kpi--uyari .kpi__simge { background: rgb(var(--uyari) / .14); color: rgb(var(--uyari-metin)); }
.kpi--tehlike .kpi__simge { background: rgb(var(--tehlike) / .12); color: rgb(var(--tehlike-metin)); }
/* "Bugün" kartları: zengin degrade, beyaz yazı, köşede ışık ve kapsül deseni. */
.kpi--gradyan { color: #fff; border: 0; box-shadow: 0 14px 30px -14px var(--kpi-golge, rgb(4 120 87 / .6)), 0 2px 6px -2px rgb(0 0 0 / .12); }
.kpi--gradyan::before {
  content: ''; position: absolute; z-index: 0; inset-block-start: -60%; inset-inline-end: -25%; inline-size: 85%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .28), rgb(255 255 255 / 0) 65%);
}
.kpi--gradyan::after {
  content: ''; position: absolute; z-index: 0; inset-block-end: -18px; inset-inline-start: -14px; inline-size: 120px; block-size: 46px; border-radius: 23px;
  border: 10px solid rgb(255 255 255 / .07); transform: rotate(-35deg);
}
.kpi--zumrut { background: var(--gr-zumrut); --kpi-golge: rgb(4 120 87 / .55); }
.kpi--indigo { background: var(--gr-indigo); --kpi-golge: rgb(67 56 202 / .55); }
.kpi--gok { background: var(--gr-gok); --kpi-golge: rgb(3 105 161 / .55); }
.kpi--kehribar { background: var(--gr-kehribar); --kpi-golge: rgb(180 83 9 / .55); }
.kpi--gul { background: var(--gr-gul); --kpi-golge: rgb(190 18 60 / .55); }
.kpi--mor { background: var(--gr-mor); --kpi-golge: rgb(109 40 217 / .55); }
.kpi--gradyan .kpi__simge { background: rgb(255 255 255 / .18); color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); backdrop-filter: blur(4px); }
.kpi--gradyan .kpi__baslik { color: rgb(255 255 255 / .9); }
.kpi--gradyan .kpi__alt { color: rgb(255 255 255 / .82); }
.kpi--gradyan .trend { background: rgb(255 255 255 / .2); color: #fff; }
.kpi--gradyan .iskelet { background: rgb(255 255 255 / .2); }
:root[data-tema="karanlik"] .kpi--gradyan { box-shadow: 0 14px 34px -14px var(--kpi-golge), inset 0 1px 0 rgb(255 255 255 / .12); }
/* Telefonda KPI'lar ikişerli: on iki rakamlık pano tek sütunda bitmeyen bir
   kaydırmaya dönüyordu. Kart sıkılaşır, kıvılcım alt satırda tam genişlik. */
@media (max-width: 560px) {
  .kpi-izgara, .iskelet-kap--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 13px 13px 12px; border-radius: 14px; }
  .kpi__ust { gap: 8px; min-block-size: 32px; flex-wrap: wrap; }
  .kpi__simge { inline-size: 32px; block-size: 32px; border-radius: 9px; }
  .kpi__simge .simge { inline-size: 17px; block-size: 17px; }
  .kpi__baslik { font-size: .76rem; line-height: 1.35; }
  /* Eğilim çipi hep başlığın altında: yanına sığmayınca başlık iki satıra
     bölünüyor, kartlar farklı boylarda kalıyordu. */
  .kpi__baslik { flex: 1 1 calc(100% - 40px); }
  .kpi .trend { order: 3; }
  .kpi__deger { margin-block: 10px 2px; font-size: 1.12rem; }
  .kpi__alt-kap { flex-direction: column; align-items: stretch; gap: 6px; }
  .kpi__alt { font-size: .72rem; }
  .kpi__kivilcim { inline-size: 100%; max-inline-size: none; block-size: 26px; }
}

/* ======================================================================
   Sekmeler (kayan göstergeli) ve bölümlü seçim
   ====================================================================== */
.sekmeler {
  position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  border-block-end: 1px solid rgb(var(--cizgi) / .1);
}
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler__sekme {
  position: relative; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  min-block-size: 44px; padding-block: 0; padding-inline: 14px; border: 0; background: none;
  color: rgb(var(--metin-2)); font: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap; cursor: pointer; text-decoration: none;
  border-radius: 10px 10px 0 0; transition: color var(--hiz-1) var(--egri), background var(--hiz-1) var(--egri);
}
.sekmeler__sekme:hover { color: rgb(var(--metin)); background: rgb(var(--cizgi) / .04); }
.sekmeler__sekme[aria-selected="true"] { color: rgb(var(--vurgu-metin)); }
.sekmeler__sayi {
  min-inline-size: 22px; padding-inline: 6px; border-radius: var(--r-tam); text-align: center;
  background: rgb(var(--cizgi) / .08); color: rgb(var(--metin-2)); font-size: .72rem; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums;
}
.sekmeler__sekme[aria-selected="true"] .sekmeler__sayi { background: rgb(var(--vurgu) / .1); color: rgb(var(--vurgu-metin)); }
.sekmeler__gosterge {
  position: absolute; inset-block-end: -1px; inset-inline-start: var(--g-bas, 0); inline-size: var(--g-en, 0); block-size: 2.5px;
  border-radius: 3px 3px 0 0; background: rgb(var(--vurgu)); pointer-events: none;
  transition: inset-inline-start var(--hiz-3) var(--egri), inline-size var(--hiz-3) var(--egri);
}
.sekmeler__gosterge--hareketsiz { transition: none; }
.sekmeler--hap {
  display: inline-flex; inline-size: fit-content; justify-self: start; align-self: start; max-inline-size: 100%; padding: 4px; gap: 2px; border: 0; border-radius: 13px; background: rgb(var(--cizgi) / .06);
}
.sekmeler--hap .sekmeler__sekme { z-index: 1; min-block-size: 38px; border-radius: 10px; padding-inline: 16px; }
.sekmeler--hap .sekmeler__sekme:hover { background: transparent; }
.sekmeler--hap .sekmeler__gosterge {
  z-index: 0; inset-block: 4px; block-size: auto; border-radius: 10px; background: rgb(var(--yuzey));
  box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 2px 8px -2px rgb(0 0 0 / .08);
}
:root[data-tema="karanlik"] .sekmeler--hap .sekmeler__gosterge { background: rgb(var(--yuzey-4)); }

.segmentli {
  position: relative; display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: rgb(var(--cizgi) / .06); max-inline-size: 100%;
}
.segmentli__zemin {
  position: absolute; inset-block: 3px; inset-inline-start: var(--g-bas, 3px); inline-size: var(--g-en, 0); border-radius: 9px;
  background: rgb(var(--yuzey)); box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 2px 8px -2px rgb(0 0 0 / .1);
  transition: inset-inline-start var(--hiz-3) var(--egri), inline-size var(--hiz-3) var(--egri);
}
:root[data-tema="karanlik"] .segmentli__zemin { background: rgb(var(--yuzey-4)); }
.segmentli__oge {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1;
  min-block-size: 36px; padding-inline: 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  font-size: .875rem; font-weight: 600; color: rgb(var(--metin-2)); transition: color var(--hiz-1) var(--egri);
}
.segmentli__oge input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.segmentli__oge:has(input:checked) { color: rgb(var(--metin)); }
.segmentli__oge:has(input:focus-visible) { box-shadow: var(--halka); }
.segmentli--kucuk .segmentli__oge { min-block-size: 32px; padding-inline: 10px; font-size: .8125rem; }

/* ======================================================================
   Arama kutusu ve süzgeç çubuğu
   ====================================================================== */
.ara-kutu {
  display: flex; align-items: center; gap: 8px; min-inline-size: 0; flex: 1 1 260px;
  min-block-size: var(--dokunma); padding-inline: 12px 8px;
  border: 1px solid rgb(var(--cizgi) / .16); border-radius: var(--r); background: rgb(var(--yuzey));
  box-shadow: inset 0 1px 2px rgb(var(--cizgi) / .04);
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.ara-kutu:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.ara-kutu__simge { display: flex; color: rgb(var(--metin-3)); flex-shrink: 0; }
.ara-kutu__girdi { flex: 1; min-inline-size: 0; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-size: .9375rem; block-size: 38px; }
.ara-kutu__girdi:focus { outline: none; }
.ara-kutu__girdi::placeholder { color: rgb(var(--metin-3)); }
.ara-kutu__girdi::-webkit-search-cancel-button { display: none; }
.ara-kutu__temizle {
  display: grid; place-items: center; inline-size: 26px; block-size: 26px; border: 0; border-radius: 50%; flex-shrink: 0;
  background: rgb(var(--cizgi) / .08); color: rgb(var(--metin-2)); cursor: pointer;
}
.ara-kutu__temizle:hover { background: rgb(var(--cizgi) / .14); }
.suzgec-cubugu { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-block-end: 16px; }
.suzgec-cubugu > .input, .suzgec-cubugu > select.input { inline-size: auto; min-inline-size: 150px; flex: 0 1 200px; }
.suzgec-cubugu__bosluk { flex: 1; }
/* Telefonda bütün bölümlerde aynı düzen: dönem ve arama tam satır, seçimler
   ikişerli yan yana. Her sayfa bunu ayrı yazınca kimi sayfada dönem düğmesi
   satırın yarısında kalıyordu. */
@media (max-width: 640px) {
  .suzgec-cubugu > .donem, .suzgec-cubugu > .ara-kutu { flex: 1 1 100%; }
  .suzgec-cubugu > select.input, .suzgec-cubugu > .secici { flex: 1 1 140px; min-inline-size: 0; }
  .donem .donem__metin { flex: 1; }
}

/* ======================================================================
   Tablo
   ====================================================================== */
.tablo-kap { min-inline-size: 0; }
.tablo-kutu { overflow: auto; max-block-size: var(--tablo-en-boy, none); overscroll-behavior-inline: contain; }
.tablo { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.tablo th {
  position: sticky; inset-block-start: 0; z-index: 2;
  padding-block: 10px; padding-inline: 16px; text-align: start; white-space: nowrap;
  background: rgb(var(--yuzey-2)); color: rgb(var(--metin-3));
  font-size: .75rem; font-weight: 700; letter-spacing: .01em;
  border-block-end: 1px solid rgb(var(--cizgi) / .09);
}
.tablo td { padding-block: 12px; padding-inline: 16px; border-block-end: 1px solid rgb(var(--cizgi) / .06); vertical-align: middle; }
.tablo tbody tr { transition: background var(--hiz-1) var(--egri); }
.tablo tbody tr:hover { background: rgb(var(--vurgu) / .04); }
.tablo tbody tr:last-child td { border-block-end: 0; }
.tablo__satir--tik { cursor: pointer; }
.tablo__satir--tik:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: -2px; }
.tablo__satir--iptal td { color: rgb(var(--metin-3)); }
.tablo__satir--iptal td:first-child { text-decoration: line-through; text-decoration-color: rgb(var(--tehlike) / .6); }
.tablo__satir--vurgu { background: rgb(var(--uyari) / .06); }
.tablo tfoot td { font-weight: 800; background: rgb(var(--yuzey-2)); border-block-start: 1px solid rgb(var(--cizgi) / .12); border-block-end: 0; }
.hiza-son { text-align: end; font-variant-numeric: tabular-nums; }
th.hiza-son { text-align: end; }
.hiza-orta { text-align: center; }
.tablo__sirala {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; cursor: pointer; white-space: nowrap;
}
.tablo__sirala:hover { color: rgb(var(--metin)); }
.hiza-son .tablo__sirala { flex-direction: row-reverse; }
/* Dokunmatik ekranda sıralama düğmesi başlık hücresini boydan boya kaplar:
   yazı boyundaki 18 px'lik hedefe parmakla basılamıyordu. Eksi pay başlık
   satırının yüksekliğini değiştirmez. */
@media (pointer: coarse) {
  .tablo__sirala { min-block-size: 36px; margin-block: -9px; }
  /* Hücre içindeki bağlantılar (ilaç adı, telefon, fatura) parmakla basılacak
     kadar uzun: iç boşluk tıklama alanını büyütür, eksi pay satırı büyütmez. */
  .tablo td a:not(.btn) { padding-block: 8px; margin-block: -8px; }
}
.tablo__ok { display: flex; opacity: .45; transition: opacity var(--hiz-1) var(--egri); }
.tablo__sirala:hover .tablo__ok { opacity: .8; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: rgb(var(--metin)); }
th[aria-sort="ascending"] .tablo__ok, th[aria-sort="descending"] .tablo__ok { opacity: 1; color: rgb(var(--vurgu-metin)); }
.hucre-ad { display: flex; flex-direction: column; min-inline-size: 0; line-height: 1.4; }
.hucre-ad small { color: rgb(var(--metin-3)); font-size: .78rem; }
.tablo-kap--yogun .tablo td { padding-block: 8px; }
.tablo .durum { padding-block: 40px; }

.sayfalama { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 12px; padding-inline: 16px; border-block-start: 1px solid rgb(var(--cizgi) / .06); }
.sayfalama__bilgi { font-size: .8125rem; color: rgb(var(--metin-3)); font-variant-numeric: tabular-nums; }
.sayfalama__dugmeler { display: flex; align-items: center; gap: 4px; }
.sayfalama__no { min-inline-size: 32px; padding-inline: 6px; border-color: transparent; box-shadow: none; background: transparent; font-variant-numeric: tabular-nums; }
.sayfalama__no--aktif, .sayfalama__no--aktif:hover { background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu-metin)); }
.sayfalama__bosluk { padding-inline: 4px; color: rgb(var(--metin-3)); }

/* Telefonda satırlar karta döner: başlık satırı (tel-baslik) üstte, gerisi
   «etiket ······ değer» satırları. */
@media (max-width: 640px) {
  .tablo-kap--kart .tablo thead { display: none; }
  .tablo-kap--kart .tablo, .tablo-kap--kart .tablo tbody, .tablo-kap--kart .tablo tfoot { display: block; }
  .tablo-kap--kart .tablo tr { display: grid; gap: 6px; padding-block: 14px; padding-inline: 16px; border-block-end: 1px solid rgb(var(--cizgi) / .07); }
  /* Etiket ile değer yazı tabanından hizalanır: ortadan hizalayınca küçük
     etiket (.78rem) büyük değerin (.875rem, kalın) birkaç piksel altında
     kalıyordu; değer iki satırsa (rozet + açıklama) etiket ilk satıra oturur. */
  .tablo-kap--kart .tablo td { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; border: 0; text-align: end; min-inline-size: 0; line-height: 1.5; }
  .tablo-kap--kart .tablo td::before { content: attr(data-etiket); color: rgb(var(--metin-3)); font-size: .78rem; font-weight: 600; text-align: start; flex-shrink: 0; }
  .tablo-kap--kart .tablo td.tel-baslik { align-items: center; justify-content: flex-start; text-align: start; font-size: .95rem; font-weight: 700; }
  .tablo-kap--kart .tablo td.tel-alt { align-items: center; justify-content: flex-start; text-align: start; color: rgb(var(--metin-3)); font-size: .8125rem; margin-block-start: -4px; }
  .tablo-kap--kart .tablo td.tel-baslik::before, .tablo-kap--kart .tablo td.tel-alt::before { display: none; }
  .tablo-kap--kart .tablo td.tel-gizle, .tablo-kap--kart .tablo th.tel-gizle { display: none; }
  .tablo-kap--kart .tablo td:empty { display: none; }
  .tablo-kap--kart .tablo tfoot tr { background: rgb(var(--yuzey-2)); }
  .sayfalama { justify-content: center; }
  .sayfalama__bilgi { inline-size: 100%; text-align: center; }
}

/* ======================================================================
   Yüzen kutular: seçici listesi, açılır menü, takvim, dönem, zil
   ====================================================================== */
.yuzen {
  position: fixed; z-index: 90; inset-block-start: 0; inset-inline-start: 0;
  min-inline-size: 200px; max-inline-size: calc(100vw - 16px); overflow: auto; overscroll-behavior: contain;
  background: rgb(var(--yuzey)); border: var(--kenarlik-2); border-radius: 14px; box-shadow: var(--golge-3);
  animation: yuzen-gir var(--hiz-2) var(--egri);
  transform-origin: top center;
}
.yuzen[data-yon="ust"] { transform-origin: bottom center; }
.yuzen--kapaniyor { animation: yuzen-cik var(--hiz-1) var(--egri) forwards; pointer-events: none; }
@keyframes yuzen-gir { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes yuzen-cik { to { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* Seçici (combobox) */
.secici {
  position: relative; display: flex; align-items: center; gap: 8px; inline-size: 100%;
  min-block-size: var(--dokunma); padding-inline: 12px 8px;
  border: 1px solid rgb(var(--cizgi) / .16); border-radius: var(--r); background: rgb(var(--yuzey));
  box-shadow: inset 0 1px 2px rgb(var(--cizgi) / .04);
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.secici:hover { border-color: rgb(var(--cizgi) / .28); }
.secici:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.secici--pasif { background: rgb(var(--yuzey-3)); }
.secici__simge, .secici__ok { display: flex; color: rgb(var(--metin-3)); flex-shrink: 0; }
.secici--dolu .secici__simge { color: rgb(var(--vurgu-metin)); }
.secici__girdi { flex: 1; min-inline-size: 0; block-size: 38px; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-size: .9375rem; }
.secici__girdi:focus { outline: none; }
.secici__girdi::placeholder { color: rgb(var(--metin-3)); }
.secici--dolu .secici__girdi { font-weight: 600; }
.secici__temizle { display: grid; place-items: center; inline-size: 24px; block-size: 24px; border: 0; border-radius: 50%; background: rgb(var(--cizgi) / .08); color: rgb(var(--metin-2)); cursor: pointer; }
.secici__liste { padding: 6px; max-block-size: 340px; }
.secici__oge {
  display: flex; align-items: center; gap: 10px; min-block-size: 44px; padding-block: 6px; padding-inline: 10px;
  border-radius: 10px; cursor: pointer; transition: background var(--hiz-1) var(--egri);
}
.secici__oge--aktif { background: rgb(var(--vurgu) / .09); }
.secici__oge--pasif { opacity: .5; cursor: not-allowed; }
.secici__oge-simge { display: grid; place-items: center; inline-size: 30px; block-size: 30px; flex-shrink: 0; border-radius: 9px; background: rgb(var(--cizgi) / .06); color: rgb(var(--metin-2)); }
.secici__oge--aktif .secici__oge-simge { background: rgb(var(--vurgu) / .14); color: rgb(var(--vurgu-metin)); }
.secici__oge-govde { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; line-height: 1.35; }
.secici__oge-ad { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secici__oge-alt { font-size: .78rem; color: rgb(var(--metin-3)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secici__oge-rozet { flex-shrink: 0; font-size: .8125rem; font-weight: 700; color: rgb(var(--metin-2)); font-variant-numeric: tabular-nums; }
.secici__oge--yeni { color: rgb(var(--vurgu-metin)); border-block-start: 1px dashed rgb(var(--cizgi) / .14); border-radius: 0 0 10px 10px; margin-block-start: 4px; }
.secici__oge--yeni .secici__oge-simge { background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu-metin)); }
.secici__durum { padding: 16px 12px; text-align: center; color: rgb(var(--metin-3)); font-size: .875rem; }

/* Açılır menü */
.acilir-menu { padding: 6px; min-inline-size: 230px; }
.acilir-menu__oge {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 40px; padding-block: 6px; padding-inline: 10px;
  border: 0; border-radius: 9px; background: none; color: rgb(var(--metin)); font: inherit; font-size: .9rem; text-align: start; cursor: pointer;
}
.acilir-menu__oge .simge { color: rgb(var(--metin-3)); flex-shrink: 0; }
.acilir-menu__oge:hover, .acilir-menu__oge:focus-visible { background: rgb(var(--cizgi) / .06); outline: none; }
.acilir-menu__oge:disabled { opacity: .45; cursor: not-allowed; }
.acilir-menu__oge--tehlike { color: rgb(var(--tehlike-metin)); }
.acilir-menu__oge--tehlike .simge { color: rgb(var(--tehlike)); }
.acilir-menu__oge--tehlike:hover { background: rgb(var(--tehlike) / .08); }
.acilir-menu__metin { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.35; }
.acilir-menu__metin small { color: rgb(var(--metin-3)); font-size: .75rem; }
.acilir-menu__isaret { color: rgb(var(--vurgu-metin)) !important; }
.acilir-menu__bos-simge { inline-size: 17px; flex-shrink: 0; }
.acilir-menu__ayrac { block-size: 1px; margin-block: 6px; margin-inline: 6px; background: rgb(var(--cizgi) / .08); }
.acilir-menu__baslik { padding-block: 8px 4px; padding-inline: 10px; font-size: .72rem; font-weight: 700; color: rgb(var(--metin-3)); }

/* Tarih seçici: girdi + takvim düğmesi tek kutu (yön akışla çevrilir). */
.tarih-secici {
  display: flex; align-items: center; gap: 4px; inline-size: 100%; padding-inline-end: 4px;
  border: 1px solid rgb(var(--cizgi) / .16); border-radius: var(--r); background: rgb(var(--yuzey));
  box-shadow: inset 0 1px 2px rgb(var(--cizgi) / .04);
  transition: border-color var(--hiz-1) var(--egri), box-shadow var(--hiz-1) var(--egri);
}
.tarih-secici:hover { border-color: rgb(var(--cizgi) / .28); }
.tarih-secici:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.tarih-secici:has(.input--hata) { border-color: rgb(var(--tehlike)); }
.tarih-secici__girdi.input { flex: 1; min-inline-size: 0; border: 0; box-shadow: none; background: transparent; font-variant-numeric: tabular-nums; }
.tarih-secici__girdi.input:focus { box-shadow: none; }
/* Rakamlı kutular kendi içinde soldan sağa; sağdan sola sayfada okuma
   başına (sağa) yaslanır. */
[dir="rtl"] .tarih-secici__girdi, [dir="rtl"] .skt-girdi { text-align: end; }
.tarih-secici__dugme {
  inline-size: 34px; block-size: 32px; display: grid; place-items: center; flex-shrink: 0;
  border: 0; border-radius: 9px; background: rgb(var(--cizgi) / .05); color: rgb(var(--metin-2)); cursor: pointer;
}
.tarih-secici__dugme:hover, .tarih-secici__dugme[aria-expanded="true"] { background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu-metin)); }
.tarih-kutu { inline-size: 304px; padding: 12px; }
.tarih-kutu__bas { display: flex; align-items: center; gap: 2px; margin-block-end: 8px; }
.tarih-kutu__ad { flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: .95rem; }
.tarih-kutu__ad span { color: rgb(var(--metin-3)); font-variant-numeric: tabular-nums; }
.tarih-kutu__izgara { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.tarih-kutu__gunadi { display: grid; place-items: center; block-size: 28px; font-size: .72rem; font-weight: 700; color: rgb(var(--metin-3)); }
.tarih-kutu__gun {
  display: grid; place-items: center; aspect-ratio: 1; min-block-size: 36px; border: 0; border-radius: 10px;
  background: none; color: rgb(var(--metin)); font: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri);
}
.tarih-kutu__gun:hover { background: rgb(var(--cizgi) / .07); }
.tarih-kutu__gun:disabled { color: rgb(var(--metin-3) / .5); cursor: not-allowed; background: none; }
.tarih-kutu__gun--bugun { box-shadow: inset 0 0 0 1.5px rgb(var(--vurgu) / .6); font-weight: 700; color: rgb(var(--vurgu-metin)); }
.tarih-kutu__gun--secili, .tarih-kutu__gun--secili:hover { background: rgb(var(--vurgu-koyu)); color: #fff; font-weight: 700; box-shadow: 0 4px 12px -4px rgb(var(--vurgu) / .7); }
.tarih-kutu__ayak { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px solid rgb(var(--cizgi) / .08); }
.tarih-kutu__diger { font-size: .75rem; color: rgb(var(--metin-3)); font-variant-numeric: tabular-nums; }

/* Dönem seçici */
.donem { gap: 8px; max-inline-size: 100%; }
.donem__metin { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; overflow: hidden; }
.donem__metin b { font-weight: 700; }
.donem__aralik { color: rgb(var(--metin-3)); font-weight: 500; font-size: .8125rem; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }
.donem__ok { color: rgb(var(--metin-3)); }
.donem-kutu { inline-size: 380px; padding: 6px; }
.donem-kutu__liste { display: flex; flex-direction: column; }
.donem-kutu__oge {
  display: flex; align-items: center; gap: 10px; min-block-size: 40px; padding-inline: 10px; border: 0; border-radius: 9px;
  background: none; color: rgb(var(--metin)); font: inherit; font-size: .9rem; text-align: start; cursor: pointer;
}
.donem-kutu__oge:hover, .donem-kutu__oge:focus-visible { background: rgb(var(--cizgi) / .05); outline: none; }
.donem-kutu__oge--secili { font-weight: 700; }
.donem-kutu__isaret { display: flex; inline-size: 16px; color: rgb(var(--vurgu-metin)); }
.donem-kutu__ad { flex: 1; }
.donem-kutu__tarih { font-size: .75rem; color: rgb(var(--metin-3)); font-variant-numeric: tabular-nums; }
.donem-kutu__ozel { display: grid; gap: 10px; margin-block-start: 6px; padding: 10px; border-block-start: 1px solid rgb(var(--cizgi) / .08); }
.donem-kutu__ozel-baslik { font-size: .8125rem; font-weight: 700; color: rgb(var(--metin-2)); }
.donem-kutu__ozel-alanlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.donem-kutu__ozel-alanlar .tarih-secici__girdi.input { padding-inline: 10px; }
.donem-kutu__hata:empty { display: none; }
.donem-kutu__hata { color: rgb(var(--tehlike-metin)); font-size: .8125rem; }

/* ======================================================================
   Bilgi listesi, ilerleme, adet sayacı
   ====================================================================== */
.bilgi-listesi { display: grid; gap: 2px 24px; margin: 0; }
.bilgi-listesi--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.bilgi-listesi--1 { grid-template-columns: 1fr; }
.bilgi-satiri { display: flex; flex-direction: column; gap: 2px; padding-block: 10px; border-block-end: 1px dashed rgb(var(--cizgi) / .1); min-inline-size: 0; }
.bilgi-satiri dt { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: rgb(var(--metin-3)); }
.bilgi-satiri dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

.ilerleme { display: grid; gap: 6px; }
.ilerleme__ust { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; color: rgb(var(--metin-2)); }
.ilerleme__ust b { font-variant-numeric: tabular-nums; }
.ilerleme__yol { block-size: 8px; border-radius: var(--r-tam); background: rgb(var(--cizgi) / .08); overflow: hidden; }
.ilerleme--ince .ilerleme__yol { block-size: 5px; }
.ilerleme__dolu {
  block-size: 100%; inline-size: calc(var(--oran, 0) * 100%); border-radius: inherit; background: rgb(var(--vurgu));
  /* Açılışta dolma hareketi transform'la (ölçek): genişlik canlandırılınca her
     karede bütün sayfa yeniden diziliyordu (panelde on çubuk birlikte). */
  transform-origin: left center;
  animation: ilerleme-dol var(--hiz-4) var(--egri) both; transition: inline-size var(--hiz-3) var(--egri);
}
[dir="rtl"] .ilerleme__dolu { transform-origin: right center; }
.ilerleme--basari .ilerleme__dolu { background: rgb(var(--basari)); }
.ilerleme--uyari .ilerleme__dolu { background: rgb(var(--uyari)); }
.ilerleme--tehlike .ilerleme__dolu { background: rgb(var(--tehlike)); }
.ilerleme--bolum .ilerleme__dolu { background: rgb(var(--ton)); }
@keyframes ilerleme-dol { from { transform: scaleX(0); } }

.adim {
  display: inline-flex; align-items: stretch; block-size: var(--dokunma); border: 1px solid rgb(var(--cizgi) / .16);
  border-radius: var(--r); background: rgb(var(--yuzey)); overflow: hidden;
}
.adim:focus-within { border-color: rgb(var(--vurgu)); box-shadow: var(--halka); }
.adim__dugme {
  display: grid; place-items: center; inline-size: 38px; border: 0; background: rgb(var(--cizgi) / .04); color: rgb(var(--metin-2));
  cursor: pointer; touch-action: manipulation; transition: background var(--hiz-1) var(--egri), color var(--hiz-1) var(--egri);
}
.adim__dugme:hover:not(:disabled) { background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu-metin)); }
.adim__dugme:active:not(:disabled) { background: rgb(var(--vurgu) / .2); }
.adim__dugme:disabled { color: rgb(var(--metin-3) / .5); cursor: not-allowed; }
.adim__girdi { inline-size: 56px; border: 0; background: none; text-align: center; font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: inherit; }
.adim__girdi:focus { outline: none; }
.adim--kucuk { block-size: 32px; border-radius: var(--r-s); }
.adim--kucuk .adim__dugme { inline-size: 30px; }
.adim--kucuk .adim__girdi { inline-size: 40px; font-size: .875rem; }

/* ======================================================================
   Katmanlar: modal, çekmece
   ====================================================================== */
.katman-ortu {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: rgb(var(--ortu)); backdrop-filter: blur(3px);
  animation: ortu-gir var(--hiz-2) var(--egri);
}
.katman-ortu--kapaniyor { animation: ortu-cik 160ms var(--egri) forwards; pointer-events: none; }
.katman-ortu--kapaniyor .katman { animation: katman-cik 160ms var(--egri) forwards; }
@keyframes ortu-gir { from { opacity: 0; } }
@keyframes ortu-cik { to { opacity: 0; } }
.katman {
  display: flex; flex-direction: column; inline-size: min(560px, 100%); max-block-size: calc(100dvh - 32px);
  background: rgb(var(--yuzey)); border: var(--kenarlik); border-radius: var(--r-l); box-shadow: var(--golge-4);
  animation: katman-gir var(--hiz-4) var(--egri-yay);
  outline: none;
}
@keyframes katman-gir { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes katman-cik { to { opacity: 0; transform: translateY(8px) scale(.97); } }
.katman--kucuk { inline-size: min(440px, 100%); }
.katman--genis { inline-size: min(860px, 100%); }
.katman--tam { inline-size: min(1140px, 100%); }
.katman__bas { display: flex; align-items: flex-start; gap: 12px; padding-block: 20px 10px; padding-inline: 22px 14px; }
.katman__simge { display: grid; place-items: center; inline-size: 40px; block-size: 40px; flex-shrink: 0; border-radius: 12px; background: rgb(var(--vurgu) / .12); color: rgb(var(--vurgu-metin)); }
.katman--tehlikeli .katman__simge { background: rgb(var(--tehlike) / .12); color: rgb(var(--tehlike-metin)); }
.katman__baslik-kap { flex: 1; min-inline-size: 0; padding-block-start: 6px; }
.katman__bas h2 { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.4; }
.katman__alt { margin: 2px 0 0; color: rgb(var(--metin-3)); font-size: .85rem; }
.katman__kapat { margin-block-start: 2px; flex-shrink: 0; }
.katman__govde { padding-block: 6px 20px; padding-inline: 22px; overflow: auto; overscroll-behavior: contain; }
.katman__mesaj { margin: 0; color: rgb(var(--metin-2)); }
.katman__ayak {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding-block: 14px; padding-inline: 22px; border-block-start: var(--kenarlik); background: rgb(var(--yuzey-2));
  border-end-start-radius: var(--r-l); border-end-end-radius: var(--r-l);
}
/* Çekmece: bitiş kenarından kayan tam boy panel. Kayma yönü yazı yönüne bağlı. */
.katman-ortu--cekmece { place-items: stretch; justify-items: end; padding: 0; --cekmece-kayma: 100%; }
[dir="rtl"] .katman-ortu--cekmece { --cekmece-kayma: -100%; }
.katman--cekmece {
  block-size: 100dvh; max-block-size: none; inline-size: min(480px, 100%); border-radius: 0;
  border-start-start-radius: var(--r-l); border-end-start-radius: var(--r-l);
  animation: cekmece-gir var(--hiz-4) var(--egri);
}
.katman--cekmece.katman--genis { inline-size: min(720px, 100%); }
.katman--cekmece .katman__govde { flex: 1; }
.katman--cekmece .katman__ayak { border-end-start-radius: var(--r-l); border-end-end-radius: 0; }
.katman-ortu--kapaniyor .katman--cekmece { animation: cekmece-cik 160ms var(--egri) forwards; }
@keyframes cekmece-gir { from { transform: translateX(var(--cekmece-kayma)); } }
@keyframes cekmece-cik { to { transform: translateX(var(--cekmece-kayma)); } }
/* Telefonda modal alttan çıkan sayfa. */
@media (max-width: 640px) {
  .katman-ortu--modal { place-items: end center; padding: 0; }
  .katman--modal { inline-size: 100%; max-block-size: 92dvh; border-radius: var(--r-l) var(--r-l) 0 0; animation: alt-sayfa-gir var(--hiz-4) var(--egri); padding-block-end: var(--guvenli-alt); }
  .katman--modal .katman__ayak { border-radius: 0; }
  .katman--modal .katman__ayak .btn { flex: 1; }
  .katman-ortu--kapaniyor .katman--modal { animation: alt-sayfa-cik 160ms var(--egri) forwards; }
  .katman--cekmece { inline-size: 100%; border-radius: 0; }
  @keyframes alt-sayfa-gir { from { transform: translateY(100%); } }
  @keyframes alt-sayfa-cik { to { transform: translateY(100%); } }
}

/* ======================================================================
   Bildirimler (toast) ve bantlar
   ====================================================================== */
.bildirimler {
  position: fixed; z-index: 200; inset-block-end: 20px; inset-inline-end: 20px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
  max-inline-size: min(420px, calc(100vw - 32px));
}
/* Çekmece de bitiş kenarından açılıyor: bildirim onun «Kaydet» düğmesinin
   üstüne düşüp tıklamayı yutuyordu. Çekmece açıkken karşı kenara geçer. */
@media (min-width: 641px) {
  html:has(.katman-ortu--cekmece) .bildirimler { inset-inline-end: auto; inset-inline-start: 20px; align-items: flex-start; }
}
.bildirim {
  position: relative; display: flex; align-items: center; gap: 12px; pointer-events: auto; overflow: hidden;
  min-inline-size: 260px; max-inline-size: 100%; padding-block: 12px; padding-inline: 14px 10px;
  border-radius: 14px; background: rgb(17 26 25); color: #f1f5f4; box-shadow: 0 18px 40px -12px rgb(0 0 0 / .45), 0 0 0 1px rgb(255 255 255 / .05);
  font-size: .9rem; animation: bildirim-gir var(--hiz-4) var(--egri-yay);
}
:root[data-tema="karanlik"] .bildirim { background: rgb(var(--yuzey-3)); color: rgb(var(--metin)); box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .07); }
.bildirim--cikis { animation: bildirim-cik 180ms var(--egri) forwards; }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes bildirim-cik { to { opacity: 0; transform: translateY(6px) scale(.97); } }
.bildirim__simge { display: grid; place-items: center; inline-size: 30px; block-size: 30px; flex-shrink: 0; border-radius: 9px; background: rgb(255 255 255 / .1); color: #93c5fd; }
.bildirim--basari .bildirim__simge { color: #4ade80; background: rgb(74 222 128 / .14); }
.bildirim--uyari .bildirim__simge { color: #fbbf24; background: rgb(251 191 36 / .14); }
.bildirim--hata .bildirim__simge { color: #f87171; background: rgb(248 113 113 / .15); }
.bildirim__metin { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; line-height: 1.45; }
.bildirim__eylem { background: rgb(255 255 255 / .12); border-color: transparent; color: inherit; box-shadow: none; }
.bildirim__eylem:hover { background: rgb(255 255 255 / .2); border-color: transparent; }
.bildirim__kapat { display: grid; place-items: center; inline-size: 28px; block-size: 28px; flex-shrink: 0; border: 0; border-radius: 8px; background: none; color: inherit; opacity: .6; cursor: pointer; }
.bildirim__kapat:hover { opacity: 1; background: rgb(255 255 255 / .1); }
.bildirim__sure {
  position: absolute; inset-block-end: 0; inset-inline-start: 0; block-size: 2px; inline-size: 100%;
  background: currentColor; opacity: .25; animation: bildirim-sure var(--sure, 4s) linear forwards;
  /* Süre çubuğu ölçekle kısalır: genişlik canlandırılınca bildirim açık
     kaldığı dört saniye boyunca her kare yerleşim hesaplatıyordu. */
  transform-origin: left center;
}
[dir="rtl"] .bildirim__sure { transform-origin: right center; }
.bildirim--durdu .bildirim__sure { animation-play-state: paused; }
@keyframes bildirim-sure { to { transform: scaleX(0); } }
@media (max-width: 900px) {
  .bildirimler { inset-inline: 12px; inset-block-end: calc(var(--alt-cubuk) + var(--guvenli-alt) + 12px); align-items: stretch; max-inline-size: none; }
}
/* Telefonda modal alttan çıkan sayfa: açıkken bildirim ekranın tepesine geçer.
   Altta kalınca onay kutusunun başlığını ve sorusunu örtüyordu («لغو فاکتور»
   neyi soruyor görünmüyordu). */
@media (max-width: 640px) {
  html:has(.katman-ortu--modal:not(.katman-ortu--kapaniyor)) .bildirimler { inset-block-end: auto; inset-block-start: calc(env(safe-area-inset-top, 0px) + 12px); }
}

.bantlar { display: grid; gap: 10px; }
.bantlar:not(:empty) { margin-block-end: 18px; }
.bant {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 10px; padding-inline: 14px 10px;
  border-radius: 14px; border: 1px solid rgb(var(--bant) / .22); background: rgb(var(--bant) / .08);
  --bant: var(--bilgi); animation: bant-gir var(--hiz-3) var(--egri);
}
.bant--yerinde { animation: none; }
.bant--cikis { animation: bant-cik 200ms var(--egri) forwards; }
@keyframes bant-gir { from { opacity: 0; transform: translateY(-6px); } }
@keyframes bant-cik { to { opacity: 0; transform: translateY(-6px); } }
.bant--uyari { --bant: var(--uyari); }
.bant--hata { --bant: var(--tehlike); }
.bant--basari { --bant: var(--basari); }
.bant--deneme {
  --bant: 124 58 237; border: 0; color: #fff;
  background: linear-gradient(120deg, #4c1d95 0%, #6d28d9 45%, #0f766e 100%);
  box-shadow: 0 10px 24px -14px rgb(76 29 149 / .7);
}
.bant__simge { display: grid; place-items: center; inline-size: 32px; block-size: 32px; flex-shrink: 0; border-radius: 10px; background: rgb(var(--bant) / .14); color: rgb(var(--bant)); }
:root[data-tema="karanlik"] .bant__simge { filter: brightness(1.25); }
.bant--deneme .bant__simge { background: rgb(255 255 255 / .16); color: #fff; }
.bant__metin { flex: 1 1 240px; min-inline-size: 0; font-size: .875rem; line-height: 1.5; }
.bant__metin b { margin-inline-end: 6px; }
.bant__eylemler { display: flex; gap: 8px; flex-wrap: wrap; }
.bant--deneme .btn { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .2); color: #fff; box-shadow: none; }
.bant--deneme .btn:hover { background: rgb(255 255 255 / .24); }
.bant__kapat { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border: 0; border-radius: 10px; background: none; color: inherit; opacity: .6; cursor: pointer; }
.bant__kapat:hover { opacity: 1; background: rgb(var(--cizgi) / .06); }
/* Telefonda bant derli toplu: simge · metin · kapat üst satırda, eylemler
   metnin altında. Kapat düğmesi eylem satırının ortasında yüzüyordu ve bant
   ekranın altıda birini kaplıyordu. */
@media (max-width: 640px) {
  .bant { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 6px 10px; padding-block: 10px; padding-inline: 12px 6px; }
  .bant__simge { inline-size: 28px; block-size: 28px; border-radius: 9px; }
  .bant__metin { grid-column: 2; grid-row: 1; font-size: .8125rem; }
  .bant__eylemler { grid-column: 2 / -1; grid-row: 2; }
  .bant__kapat { grid-column: 3; grid-row: 1; margin-block-start: -4px; }
}

/* ======================================================================
   Durumlar: iskelet, boş durum, uyarı kutusu
   ====================================================================== */
.iskelet {
  display: block; border-radius: 8px;
  background: linear-gradient(90deg, rgb(var(--cizgi) / .06) 25%, rgb(var(--cizgi) / .11) 37%, rgb(var(--cizgi) / .06) 63%);
  background-size: 400% 100%;
  animation: parilti 1.4s ease infinite; /* sonsuz: yalnız yükleme sürerken görünen parıltı */
}
@keyframes parilti { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.iskelet--satir { block-size: 12px; }
.iskelet--buyuk { block-size: 28px; inline-size: 60%; border-radius: 9px; }
.iskelet--kare { inline-size: 38px; block-size: 38px; border-radius: 11px; }
.iskelet--daire { inline-size: 34px; block-size: 34px; border-radius: 50%; flex-shrink: 0; }
.iskelet--blok { block-size: 120px; border-radius: 12px; }
.iskelet--grafik { block-size: 220px; border-radius: 14px; }
.iskelet-kap { display: grid; gap: 12px; }
.iskelet-kap--kpi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 16px; }
.iskelet-kpi { display: grid; gap: 12px; padding: 18px; border-radius: var(--r-kart); background: rgb(var(--yuzey)); border: var(--kenarlik); }
.iskelet-kap--tablo { gap: 0; }
.iskelet-satir { display: flex; align-items: center; gap: 16px; padding-block: 14px; padding-inline: 16px; border-block-end: 1px solid rgb(var(--cizgi) / .05); }
.iskelet-satir .iskelet--satir:nth-child(2) { flex: 1; }
.iskelet-kart { display: grid; gap: 12px; }

.durum { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-block: 48px; padding-inline: 20px; }
.durum__simge {
  position: relative; display: grid; place-items: center; inline-size: 72px; block-size: 72px; margin-block-end: 10px; border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, rgb(var(--ton) / .2), rgb(var(--ton) / .07)); color: rgb(var(--ton));
}
.durum__simge::before { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgb(var(--ton) / .25); }
.durum--hata { --ton: var(--tehlike); }
.durum__baslik { font-size: 1.02rem; font-weight: 700; }
.durum__alt { margin: 0; max-inline-size: 42ch; color: rgb(var(--metin-3)); font-size: .875rem; }
.durum__eylem { margin-block-start: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.durum--kucuk { padding-block: 24px; }
.durum--kucuk .durum__simge { inline-size: 48px; block-size: 48px; margin-block-end: 6px; }
.durum--kucuk .durum__simge::before { display: none; }

.uyari-kutu {
  display: flex; align-items: flex-start; gap: 10px; padding-block: 12px; padding-inline: 14px;
  border-radius: 12px; background: rgb(var(--uk) / .08); border: 1px solid rgb(var(--uk) / .2); border-inline-start: 3px solid rgb(var(--uk));
  --uk: var(--uyari); font-size: .875rem; line-height: 1.55;
}
.uyari-kutu > .simge { color: rgb(var(--uk)); flex-shrink: 0; margin-block-start: 2px; }
.uyari-kutu--bilgi { --uk: var(--bilgi); }
.uyari-kutu--tehlike { --uk: var(--tehlike); }
.uyari-kutu--basari { --uk: var(--basari); }
.uyari-kutu__govde { display: flex; flex-direction: column; flex: 1; min-inline-size: 0; }

/* ======================================================================
   Grafikler
   ====================================================================== */
.grafik { position: relative; min-inline-size: 0; }
.grafik__cizim { position: relative; border-radius: 10px; }
.grafik__cizim:focus-visible { outline: 2px solid rgb(var(--vurgu)); outline-offset: 4px; }
.grafik__svg { display: block; overflow: visible; font-family: var(--yazi); }
.grafik__bos {
  position: absolute; inset: 0 0 30px; display: grid; place-items: center; pointer-events: none;
  color: rgb(var(--metin-3)); font-size: .8125rem; font-weight: 600;
}
.grafik__izgara line { stroke: rgb(var(--grafik-izgara)); stroke-width: 1; shape-rendering: crispEdges; }
.grafik__izgara line.grafik__sifir { stroke: rgb(var(--cizgi) / .22); }
.grafik__eksen-yazi { fill: rgb(var(--metin-3)); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.grafik__eksen-yazi--vurgu { fill: rgb(var(--metin)); font-weight: 700; }
.grafik__cizgi { fill: none; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.grafik__nokta { stroke: rgb(var(--yuzey)); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.grafik__kilavuz { stroke: rgb(var(--metin-3) / .45); stroke-width: 1; shape-rendering: crispEdges; }
.grafik__sutun { transform-box: fill-box; transform-origin: bottom; transition: opacity var(--hiz-2) var(--egri); }
.grafik__sutun--eksi { transform-origin: top; }
.grafik__grup--soluk .grafik__sutun { opacity: .38; }
.grafik__grup--vurgu .grafik__sutun { filter: saturate(1.15); }
.grafik__bant-vurgu { fill: rgb(var(--cizgi) / .045); }
.grafik__lejant { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-block-end: 12px; font-size: .8125rem; color: rgb(var(--metin-2)); }
.grafik__lejant-oge { display: inline-flex; align-items: center; gap: 7px; }
.grafik__anahtar { display: inline-block; inline-size: 14px; block-size: 3px; border-radius: 2px; background: var(--renk); flex-shrink: 0; }
.grafik__anahtar--kutu { inline-size: 10px; block-size: 10px; border-radius: 3px; }
.grafik__ipucu {
  position: absolute; z-index: 5; pointer-events: none; min-inline-size: 150px; max-inline-size: 260px;
  padding-block: 10px; padding-inline: 12px; border-radius: 12px; background: rgb(var(--yuzey));
  border: var(--kenarlik-2); box-shadow: var(--golge-3); font-size: .8125rem;
}
.grafik__ipucu-baslik { margin-block-end: 6px; color: rgb(var(--metin-3)); font-size: .75rem; font-weight: 600; }
.grafik__ipucu-satir { display: flex; align-items: center; gap: 8px; line-height: 1.7; }
.grafik__ipucu-satir b { font-variant-numeric: tabular-nums; }
.grafik__ipucu-satir span { color: rgb(var(--metin-3)); }
.grafik--halka { display: flex; flex-direction: column; align-items: stretch; }
.grafik__halka-kap { position: relative; margin-inline: auto; }
.grafik__halka-kap .grafik__svg { overflow: visible; }
.grafik__halka-orta { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; padding: 30px; }
.grafik__halka-orta b { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.3; }
.grafik__halka-orta span { font-size: .75rem; color: rgb(var(--metin-3)); }
/* Para adı rakamın altında, küçük (grafik.js ortaYaz): delik dar. */
.grafik__halka-orta .para__ad { display: block; font-size: .7rem; font-weight: 600; opacity: 1; color: rgb(var(--metin-3)); }
.grafik__dilim { stroke: rgb(var(--yuzey)); stroke-width: 2; transition: opacity var(--hiz-2) var(--egri); }
.grafik__dilim--soluk { opacity: .28; }
.grafik__halka-bos { fill: rgb(var(--cizgi) / .07); }
.grafik__halka-lejant { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 2px; }
.grafik__halka-lejant li {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding-block: 6px; padding-inline: 8px;
  border-radius: 9px; font-size: .84rem; cursor: default; transition: background var(--hiz-1) var(--egri);
}
.grafik__halka-lejant li:hover, .grafik__halka-lejant li.aktif, .grafik__halka-lejant li:focus-visible { background: rgb(var(--cizgi) / .05); outline: none; }
.grafik__halka-lejant b { font-variant-numeric: tabular-nums; font-size: .8125rem; }
.grafik__halka-lejant small { min-inline-size: 38px; text-align: end; color: rgb(var(--metin-3)); font-variant-numeric: tabular-nums; }
.grafik__halka-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kivilcim-kap { position: relative; display: block; inline-size: 100%; block-size: 100%; }
.kivilcim { display: block; inline-size: 100%; block-size: 100%; overflow: visible; }
.kivilcim__cizgi { fill: none; stroke: rgb(var(--renk)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kivilcim__dur1 { stop-color: rgb(var(--renk)); stop-opacity: .26; }
.kivilcim__dur2 { stop-color: rgb(var(--renk)); stop-opacity: 0; }
.kivilcim__nokta { position: absolute; inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgb(var(--renk)); box-shadow: 0 0 0 2px rgb(var(--yuzey)); }
.kpi--gradyan .kivilcim__nokta { box-shadow: 0 0 0 2px rgb(255 255 255 / .35); }

.yatay-cubuk { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.yatay-cubuk__satir { display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 10px; }
a.yatay-cubuk__satir:hover .yatay-cubuk__ad { color: rgb(var(--vurgu-metin)); }
.yatay-cubuk__sira { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 8px; background: rgb(var(--cizgi) / .06); color: rgb(var(--metin-2)); font-size: .75rem; font-weight: 700; }
li:first-child .yatay-cubuk__sira { background: rgb(var(--vurgu) / .14); color: rgb(var(--vurgu-metin)); }
.yatay-cubuk__govde { min-inline-size: 0; }
.yatay-cubuk__ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: .875rem; }
.yatay-cubuk__ad { display: flex; align-items: baseline; gap: 8px; min-inline-size: 0; font-weight: 600; transition: color var(--hiz-1) var(--egri); }
.yatay-cubuk__ad small { color: rgb(var(--metin-3)); font-weight: 400; font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yatay-cubuk__deger { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.yatay-cubuk__yol { block-size: 7px; margin-block-start: 6px; border-radius: var(--r-tam); background: rgb(var(--cizgi) / .07); overflow: hidden; }
.yatay-cubuk__dolu {
  block-size: 100%; inline-size: calc(var(--oran) * 100%); border-radius: inherit; background: var(--renk);
  /* Giriş hareketi ölçekle (bileşik katman): genişlik geçişi her karede sayfayı yeniden diziyordu. */
  transform-origin: left center;
  transition: transform 800ms var(--egri) calc(var(--i, 0) * 50ms);
}
[dir="rtl"] .yatay-cubuk__dolu { transform-origin: right center; }
.yatay-cubuk--bekliyor .yatay-cubuk__dolu { transform: scaleX(0); }

/* Ekran okuyucuya açık, ekranda görünmez. */
.gorunmez {
  position: absolute !important; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}