:root {
  --zemin: #f5f5f7;
  --yuzey: #ffffff;
  --yuzey-2: #fafafc;
  --metin: #1d1d1f;
  --metin-2: #6e6e73;
  --metin-3: #86868b;
  --cizgi: rgba(0, 0, 0, 0.08);
  --cizgi-2: rgba(0, 0, 0, 0.14);
  --ametist: #7a45b8;
  --ametist-acik: #f1eaf9;
  --ametist-koyu: #5e2f96;
  --ametist-yumusak: rgba(122, 69, 184, 0.1);
  --gumus: linear-gradient(135deg, #c9c6cf 0%, #eeedf1 55%, #dcd9e1 100%);
  --yesil: #1f9d55;
  --amber: #c27c0e;
  --kirmizi: #e5372b;
  --golge: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.04);
  --golge-yuksek: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.05), 0 16px 40px rgba(0, 0, 0, 0.10);
  --egri: cubic-bezier(.2, .8, .2, 1);
  --sure-1: 160ms;
  --sure-2: 240ms;
  --sure-3: 400ms;
  --yazi: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', 'Helvetica Neue', 'Segoe UI', Roboto, Arial, sans-serif;
  --kart: #ffffff;
  --ikincil: #6e6e73;
  --ucuncul: #86868b;
  --cizgi-koyu: #d2d2d7;
  --mavi: #7a45b8;
  --mavi-ustu: #8a55c8;
  --vurgu-acik: rgba(122, 69, 184, 0.1);
  --dolgu: rgba(118, 118, 128, 0.12);
  --yaricap: 18px;
  color-scheme: light;
}

.sayi, .tabular, td, .kpi__deger, .cy__deger, .cg, .cd, .menu__sayi, time { font-variant-numeric: tabular-nums; }

a { color: var(--ametist); }
a:hover { text-decoration: none; color: var(--ametist-koyu); }
:focus-visible { outline: 2px solid var(--ametist); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--ametist-acik); }
kbd { display: inline-flex; align-items: center; height: 18px; padding: 0 5px; border-radius: 5px; background: rgba(28, 26, 33, 0.05); box-shadow: inset 0 0 0 0.5px var(--cizgi-2); color: var(--metin-3); font: 500 11px/1 var(--yazi); letter-spacing: 0; }

.kaydirma-kilit { overflow: hidden; }

.ikon-dugme { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--metin-3); cursor: pointer; transition: background var(--sure-1), color var(--sure-1); }
.ikon-dugme:hover { background: rgba(28, 26, 33, 0.05); color: var(--metin); }

.avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; background: hsl(var(--a-ton) 30% 92%); color: hsl(var(--a-ton) 28% 34%); font-weight: 600; letter-spacing: 0; box-shadow: inset 0 0 0 0.5px rgba(28, 26, 33, 0.06); }

.sayfa-gecis { animation: sayfaGir var(--sure-2) var(--egri) both; }
@keyframes sayfaGir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.ust { align-items: flex-end; margin-bottom: 24px; }
.ust h1, .ekran-bas h1 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.02em; }
.ust p, .ekran-bas p { margin-top: 4px; color: var(--metin-2); font-size: 14px; }
.ust__rozetler { margin-top: 10px; }

.ekran-bas { margin-bottom: 24px; }
.ekran-bas__ust { margin-bottom: 6px; color: var(--metin-3); font-size: 13px; }
.ekran-bas__satir { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ekran-bas__eylem { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.kart__bas { padding: 18px 20px 0; align-items: flex-start; }
.kart__bas h2 { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; display: flex; align-items: center; gap: 8px; }
.kart__bas p { color: var(--metin-3); font-size: 12px; line-height: 16px; margin-top: 2px; }
.kart__bas > a { font-size: 13px; font-weight: 500; white-space: nowrap; }
.kart__govde { padding: 14px 20px 20px; }
.izgara { gap: 16px; }
.izgara > .kart + .kart, .kpi + .kpi, [class*="izgara"] > .kart + .kart, [class*="kpiler"] > .kart + .kart { margin-top: 0; }
.brif-izgara > .kart:not(.brif-mesaj):not(.kpi), .brif-gecmis { padding: 20px; }
.kpi__alt { flex-wrap: wrap; row-gap: 2px; min-width: 0; }
.kpi__not { min-width: 0; overflow-wrap: anywhere; }
.izgara + .kart, .izgara + .izgara, .kart + .izgara { margin-top: 16px; }

.baglanti { padding: 0; border: 0; background: none; color: var(--ametist); font: inherit; font-weight: 500; cursor: pointer; }

.rozet--ornek {
  gap: 6px;
  height: 20px;
  padding: 0 8px 0 7px;
  background: rgba(28, 26, 33, 0.05);
  color: var(--metin-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
}
.rozet--ornek::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }

.hap { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(28, 26, 33, 0.05); color: var(--metin-2); font-size: 12px; font-weight: 500; white-space: nowrap; }
.nokta { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--metin-3); }
.nokta--yesil { background: var(--yesil); }
.nokta--amber { background: var(--amber); }
.nokta--kirmizi { background: var(--kirmizi); }
.nokta--ametist { background: var(--ametist); }

.uyari { border-radius: 12px; padding: 12px 14px; font-size: 13px; box-shadow: inset 0 0 0 0.5px var(--cizgi); background: var(--yuzey); color: var(--metin); }
.uyari--hata { box-shadow: inset 0 0 0 0.5px rgba(209, 68, 58, 0.35); background: rgba(209, 68, 58, 0.04); color: #9c2c24; }
.uyari--basari { box-shadow: inset 0 0 0 0.5px rgba(47, 158, 91, 0.3); background: rgba(47, 158, 91, 0.04); color: #1f6b3e; }

.kpi { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-height: 124px; color: var(--metin); text-decoration: none; }
a.kpi--bag { transition: box-shadow var(--sure-1) var(--egri), transform var(--sure-1) var(--egri); }
a.kpi--bag:hover { box-shadow: 0 0 0 0.5px var(--cizgi-2), var(--golge-yuksek); color: var(--metin); }
.kpi__ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi__etiket { color: var(--metin-2); font-size: 12px; line-height: 16px; font-weight: 500; }
.kpi__ust .rozet--ornek { height: 18px; font-size: 10.5px; padding: 0 7px 0 6px; }
.kpi__deger { display: flex; align-items: baseline; gap: 8px; font-size: 32px; line-height: 36px; font-weight: 600; letter-spacing: -0.025em; white-space: nowrap; }
.kpi__eski { color: var(--metin-3); font-size: 15px; font-weight: 500; animation: eskiSol 1s 1s forwards; }
@keyframes eskiSol { to { opacity: 0; } }
.kpi__alt { display: flex; align-items: center; gap: 10px; margin-top: auto; min-height: 24px; }
.kpi__alt .kivilcim { margin-left: auto; }
.kpi__not { color: var(--metin-3); font-size: 12px; line-height: 16px; }
.kpi__neden { position: absolute; right: 16px; bottom: 14px; font-size: 12px; font-weight: 500; }
.kpi:has(.kpi__neden) .kpi__alt { padding-right: 56px; }
.degisim { display: inline-flex; align-items: center; gap: 6px; color: var(--metin); font-size: 12px; font-weight: 600; white-space: nowrap; }
.degisim__alt { color: var(--metin-3); font-weight: 400; }
.kpi .degisim { flex-wrap: wrap; white-space: normal; min-width: 0; }
.kpi .degisim__alt { white-space: nowrap; }

.kivilcim { flex: none; overflow: visible; }
.kivilcim__cizgi { fill: none; stroke: var(--ametist); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.kivilcim__alan { fill: var(--ametist); opacity: 0.08; }
.kivilcim__nokta { fill: var(--ametist); }
.kivilcim--gri .kivilcim__cizgi { stroke: var(--metin-3); }
.kivilcim--gri .kivilcim__alan, .kivilcim--gri .kivilcim__nokta { fill: var(--metin-3); }

.grafik-cumle, .cg figcaption, .cy figcaption, .cd figcaption { margin: 12px 0 0; color: var(--metin-2); font-size: 13px; line-height: 19px; }
.cg figcaption b, .cy figcaption b, .cd figcaption b, .grafik-cumle b { color: var(--metin); font-weight: 600; }

.cg { margin: 0; }
.cg__lejant { display: flex; gap: 16px; margin-bottom: 10px; color: var(--metin-2); font-size: 12px; }
.cg__lejant span { display: inline-flex; align-items: center; gap: 6px; }
.cg__lejant i { width: 12px; height: 2px; border-radius: 2px; background: var(--ametist); }
.cg__lejant i.kiyas { background: #c9c6cf; }
.cg__alan-kutu { display: grid; grid-template-columns: 52px minmax(0, 1fr); height: var(--cg-y, 200px); }
.cg__y-eksen { position: relative; }
.cg__y { position: absolute; right: 10px; transform: translateY(-50%); color: var(--metin-3); font-size: 11px; line-height: 1; white-space: nowrap; }
.cg__cizim { position: relative; }
.cg__cizim svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.izgara-cizgi { stroke: var(--cizgi); stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.cg__cizgi { fill: none; stroke: var(--ametist); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; transition: d var(--sure-3) var(--egri); }
.cg__cizgi--kiyas { stroke: #c9c6cf; stroke-width: 1.5; }
.cg__alan { fill: var(--ametist); opacity: 0.08; transition: d var(--sure-3) var(--egri); }
.cg__esik { stroke: var(--kirmizi); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.cg__eksi { fill: var(--kirmizi); opacity: 0.05; }
.cg__nokta { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ametist); box-shadow: 0 0 0 3px var(--yuzey); }
.cg__deger { position: absolute; transform: translate(-100%, -150%); padding-right: 2px; color: var(--metin); font-size: 12px; font-weight: 600; white-space: nowrap; }
.cg__x-eksen { position: relative; height: 22px; margin-left: 52px; }
.cg__x { position: absolute; top: 8px; transform: translateX(-50%); color: var(--metin-3); font-size: 11px; white-space: nowrap; }
.cg__x:first-child { transform: none; }
.cg__x:last-child { transform: translateX(-100%); }
.cg__ipucu { position: absolute; top: -6px; transform: translate(-50%, -100%); display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--metin); color: #fff; font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 2; }
.cg__ipucu b { font-weight: 600; }
.cg .cg__cizim svg, .cg .cg__nokta, .cg .cg__deger { clip-path: inset(0 100% 0 0); }
.cg.gorundu .cg__cizim svg { animation: ciz var(--sure-3) var(--egri) forwards; }
.cg.gorundu .cg__nokta, .cg.gorundu .cg__deger { animation: belir var(--sure-2) var(--sure-3) var(--egri) forwards; clip-path: none; opacity: 0; }
.cg--hazir .cg__cizim svg, .cg--hazir .cg__nokta, .cg--hazir .cg__deger { clip-path: none; opacity: 1; animation: none; }
@keyframes ciz { to { clip-path: inset(0 0 0 0); } }
@keyframes belir { to { opacity: 1; } }

.cy { display: grid; gap: 2px; margin: 0; }
.cy__satir { display: grid; grid-template-columns: minmax(96px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 30px; padding: 0 6px; margin: 0 -6px; border-radius: 8px; color: var(--metin); text-decoration: none; }
a.cy__satir:hover { background: var(--yuzey-2); color: var(--metin); }
.cy__ad { overflow: hidden; color: var(--metin-2); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.cy__iz { height: 8px; border-radius: 4px; background: rgba(28, 26, 33, 0.04); overflow: hidden; }
.cy__dolgu { display: block; width: var(--oran); height: 100%; border-radius: 4px; background: #c9c6cf; transform-origin: left; transform: scaleX(0); }
.cy.gorundu .cy__dolgu { animation: uza var(--sure-3) calc(var(--i) * 30ms) var(--egri) forwards; }
.cy__satir--vurgu .cy__ad { color: var(--metin); font-weight: 600; }
.cy__satir--vurgu .cy__dolgu { background: var(--ametist); }
.cy__deger { min-width: 72px; font-size: 13px; font-weight: 500; text-align: right; white-space: nowrap; }
.cy__deger small { margin-left: 6px; color: var(--metin-3); font-weight: 400; }
@keyframes uza { to { transform: scaleX(1); } }

.cd { margin: 0; }
.cd__alan { display: flex; align-items: flex-end; gap: 6px; height: var(--cd-y, 160px); padding-top: 22px; }
.cd__sutun { position: relative; display: flex; flex-direction: column; justify-content: flex-end; flex: 1; height: 100%; min-width: 0; }
.cd__cubuk { position: relative; display: block; height: var(--oran); min-height: 2px; border-radius: 5px 5px 2px 2px; background: #dedbe3; transform-origin: bottom; transform: scaleY(0); }
.cd.gorundu .cd__cubuk { animation: yuksel var(--sure-3) calc(var(--i) * 25ms) var(--egri) forwards; }
.cd__sutun--vurgu .cd__cubuk { background: var(--ametist); }
.cd__cubuk b { position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); font-size: 11px; font-weight: 600; white-space: nowrap; }
.cd__et { position: absolute; top: 100%; left: 0; right: 0; padding-top: 6px; color: var(--metin-3); font-size: 11px; text-align: center; white-space: nowrap; overflow: hidden; }
.cd figcaption { margin-top: 28px; }
@keyframes yuksel { to { transform: scaleY(1); } }

.halka { position: relative; display: inline-grid; justify-items: center; gap: 8px; margin: 0; }
.halka svg { width: var(--boyut); height: var(--boyut); }
.halka__iz { fill: none; stroke: rgba(28, 26, 33, 0.06); stroke-width: 8; }
.halka__dolgu { fill: none; stroke: var(--ametist); stroke-width: 8; stroke-linecap: round; stroke-dasharray: var(--cevre); stroke-dashoffset: var(--cevre); }
.halka.gorundu .halka__dolgu { animation: halkaDol var(--sure-3) var(--egri) forwards; }
.halka--yesil .halka__dolgu { stroke: var(--yesil); }
.halka--amber .halka__dolgu { stroke: var(--amber); }
.halka--kirmizi .halka__dolgu { stroke: var(--kirmizi); }
.halka__ic { position: absolute; top: 0; left: 50%; display: grid; place-items: center; width: var(--boyut); height: var(--boyut); transform: translateX(-50%); }
.halka__ic b { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.halka figcaption { display: grid; justify-items: center; color: var(--metin-2); font-size: 12px; text-align: center; }
.halka figcaption small { color: var(--metin-3); font-size: 11px; }
@keyframes halkaDol { to { stroke-dashoffset: var(--hedef); } }

.zc { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
.zc__adim { position: relative; flex: 1; min-width: 0; padding: 0 8px 0 0; }
.zc__adim::before { content: ''; position: absolute; top: 9px; left: 20px; right: 0; height: 2px; background: rgba(28, 26, 33, 0.08); }
.zc__adim:last-child::before { display: none; }
.zc__adim::after { content: ''; position: absolute; top: 9px; left: 20px; height: 2px; width: 0; background: var(--ametist); }
.zc__adim--tamam::after { width: calc(100% - 20px); }
.zc.gorundu .zc__adim--tamam::after { animation: zcDol var(--sure-3) calc(var(--i) * 70ms) var(--egri) both; }
.zc__isaret { position: relative; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--yuzey); box-shadow: inset 0 0 0 1.5px rgba(28, 26, 33, 0.16); color: #fff; font-size: 11px; font-weight: 700; }
.zc__adim--tamam .zc__isaret { background: var(--ametist); box-shadow: none; }
.zc__adim--devam .zc__isaret { box-shadow: inset 0 0 0 2px var(--ametist); }
.zc__adim--devam .zc__isaret::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ametist); }
.zc__adim--gecikti .zc__isaret, .zc__adim--atlandi .zc__isaret { background: var(--kirmizi); box-shadow: none; }
.zc.gorundu .zc__adim--gecikti .zc__isaret, .zc.gorundu .zc__adim--atlandi .zc__isaret { animation: nabiz 900ms 500ms var(--egri) 1; }
.zc__adim--gecikti .zc__isaret { background: var(--amber); }
.zc__metin { display: grid; gap: 2px; margin-top: 10px; padding-right: 6px; }
.zc__metin b { font-size: 12px; line-height: 16px; font-weight: 600; }
.zc__metin span { color: var(--metin-3); font-size: 11px; line-height: 15px; }
.zc__metin em { color: var(--kirmizi); font-size: 11px; font-style: normal; line-height: 15px; }
.zc__adim--bekliyor .zc__metin b { color: var(--metin-2); font-weight: 500; }
.zc--dikey { flex-direction: column; gap: 0; }
.zc--dikey .zc__adim { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 0 0 18px; }
.zc--dikey .zc__adim::before { top: 22px; bottom: 2px; left: 9px; right: auto; width: 2px; height: auto; }
.zc--dikey .zc__adim::after { top: 22px; left: 9px; width: 2px; height: 0; }
.zc--dikey .zc__adim--tamam::after { width: 2px; height: calc(100% - 24px); }
.zc--dikey .zc__metin { margin-top: 1px; }
@keyframes zcDol { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes nabiz { 0% { box-shadow: 0 0 0 0 rgba(209, 68, 58, 0.45); } 100% { box-shadow: 0 0 0 10px rgba(209, 68, 58, 0); } }

.aksiyon { display: grid; gap: 10px; padding: 16px 18px; border-radius: 16px; background: var(--yuzey); box-shadow: var(--golge-yuksek); animation: belirAlt var(--sure-2) var(--egri) both; }
.aksiyon__etiket { display: inline-flex; align-items: center; gap: 6px; color: var(--ametist); font-size: 12px; font-weight: 600; }
.aksiyon__metin { margin: 0; font-size: 14px; line-height: 21px; }
.aksiyon__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--metin-2); font-size: 12px; }
.aksiyon__meta span { display: inline-flex; align-items: center; gap: 6px; }
.aksiyon__meta svg { color: var(--metin-3); }
.aksiyon__dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.aksiyon--yapildi, .aksiyon--kapali { padding: 12px 16px; box-shadow: 0 0 0 0.5px var(--cizgi); background: var(--yuzey-2); }
.aksiyon__bas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--metin-2); }
.aksiyon__bas b { color: var(--metin); }
.aksiyon__bas svg, .aksiyon__tik { color: var(--yesil); }
.aksiyon__tik { width: 16px; height: 16px; border-radius: 50%; background: var(--yesil); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E"); }
.aksiyon__bas .baglanti { margin-left: auto; }
@keyframes belirAlt { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.arac-satiri { display: flex; align-items: center; gap: 8px; height: 26px; color: var(--metin-2); font-size: 13px; animation: belirAlt var(--sure-2) var(--egri) both; }
.arac-satiri small { color: var(--metin-3); font-size: 12px; }
.arac-satiri__isaret { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--yesil); }
.arac-satiri--calisiyor .arac-satiri__isaret { box-shadow: inset 0 0 0 1.5px var(--ametist-acik); position: relative; }
.arac-satiri--calisiyor .arac-satiri__isaret::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 1.5px 0 0 0 var(--ametist); animation: don 900ms linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

.kaynak-cip { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 6px; background: rgba(28, 26, 33, 0.04); color: var(--metin-2); font-size: 11px; font-weight: 500; text-decoration: none; vertical-align: middle; }
a.kaynak-cip:hover { background: var(--ametist-acik); color: var(--ametist-koyu); }
.kaynak-cip svg { color: var(--metin-3); }

.bos-durum { display: grid; justify-items: center; gap: 8px; padding: 40px 24px; text-align: center; }
.bos-durum__simge { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 16px; background: var(--gumus); box-shadow: inset 0 0 0 0.5px rgba(28, 26, 33, 0.06); color: var(--ametist); }
.bos-durum b { font-size: 15px; font-weight: 600; }
.bos-durum p { max-width: 380px; color: var(--metin-2); font-size: 13px; }
.bos-durum .dugme { margin-top: 6px; }
.bos-durum__sorular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.bos-durum--kucuk { padding: 20px 12px; }
.bos-durum--kucuk b { font-size: 13px; font-weight: 500; color: var(--metin-2); }
.soru-hap { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--yuzey); box-shadow: inset 0 0 0 0.5px var(--cizgi-2); color: var(--metin); font: 500 12.5px/1 var(--yazi); cursor: pointer; transition: box-shadow var(--sure-1), background var(--sure-1); }
.soru-hap:hover { background: var(--ametist-acik); box-shadow: inset 0 0 0 0.5px rgba(107, 63, 160, 0.3); color: var(--ametist-koyu); }

.iskelet { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(28, 26, 33, 0.05) 0%, rgba(28, 26, 33, 0.09) 50%, rgba(28, 26, 33, 0.05) 100%); background-size: 200% 100%; animation: parilti 1.4s ease-in-out infinite; }
.iskelet--buyuk { height: 28px; }
.iskelet--daire { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.iskelet--alan { height: 140px; border-radius: 12px; }
.iskelet-liste { display: grid; gap: 14px; padding: 4px 0; }
.iskelet-satir { display: flex; align-items: center; gap: 12px; }
.iskelet-metin, .iskelet-grafik, .iskelet-kart { display: grid; gap: 10px; }
.yuklenen--hazir { animation: belir var(--sure-2) var(--egri); }
@keyframes parilti { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.ls { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px; color: var(--metin); text-decoration: none; border-top: 0.5px solid var(--cizgi); transition: background var(--sure-1); }
.ls:first-child { border-top: 0; }
a.ls:hover { background: var(--yuzey-2); color: var(--metin); }
.ls__on { flex: none; color: var(--metin-3); }
.ls__metin { display: grid; flex: 1; min-width: 0; }
.ls__metin b { overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.ls__metin span { overflow: hidden; color: var(--metin-3); font-size: 12px; line-height: 16px; white-space: nowrap; text-overflow: ellipsis; }
.ls__sag { display: flex; align-items: center; gap: 10px; flex: none; }
.ls__deger { color: var(--metin-2); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.liste-kart { padding: 4px 0; }
.liste-kart .ls { padding-left: 20px; padding-right: 20px; }

.sekmeler { display: flex; gap: 4px; margin: -8px 0 24px; padding: 3px; width: max-content; max-width: 100%; overflow-x: auto; border-radius: 11px; background: rgba(28, 26, 33, 0.05); scrollbar-width: none; }
.sekmeler a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 14px; border-radius: 8px; color: var(--metin-2); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background var(--sure-1), color var(--sure-1); }
.sekmeler a:hover { color: var(--metin); }
.sekmeler a.secili { background: var(--yuzey); color: var(--metin); box-shadow: 0 1px 2px rgba(28, 26, 33, 0.08), 0 0 0 0.5px var(--cizgi); }
.sekmeler a span { color: var(--metin-3); font-size: 11px; }

.komut { position: fixed; inset: 0; z-index: 90; display: grid; justify-items: center; align-items: start; padding-top: 14vh; }
.komut__perde { position: absolute; inset: 0; background: rgba(28, 26, 33, 0.18); opacity: 0; transition: opacity var(--sure-1) var(--egri); }
.komut__kutu { position: relative; width: min(640px, calc(100vw - 24px)); max-height: 64vh; display: flex; flex-direction: column; border-radius: 16px; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); box-shadow: 0 0 0 0.5px var(--cizgi-2), 0 24px 64px rgba(28, 26, 33, 0.18); overflow: hidden; opacity: 0; transform: translateY(-6px) scale(0.985); transition: opacity var(--sure-1) var(--egri), transform var(--sure-1) var(--egri); }
.komut--acik .komut__perde { opacity: 1; }
.komut--acik .komut__kutu { opacity: 1; transform: none; }
.komut__giris { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 16px 0 18px; border-bottom: 0.5px solid var(--cizgi); color: var(--metin-3); }
.komut__giris input { flex: 1; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none !important; color: var(--metin); font: 400 16px/1 var(--yazi); }
.komut__liste { flex: 1; padding: 6px; overflow-y: auto; }
.komut__grup { padding: 10px 12px 4px; color: var(--metin-3); font-size: 11px; font-weight: 500; }
.komut__oge { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 6px 12px; border-radius: 10px; color: var(--metin); text-decoration: none; }
.komut__oge:hover { color: var(--metin); }
.komut__oge.secili { background: var(--ametist-acik); color: var(--ametist-koyu); }
.komut__ikon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(28, 26, 33, 0.04); color: var(--metin-2); flex: none; }
.komut__oge.secili .komut__ikon { background: rgba(255, 255, 255, 0.7); color: var(--ametist); }
.komut__ad { display: grid; flex: 1; min-width: 0; font-size: 14px; }
.komut__ad small { overflow: hidden; color: var(--metin-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.komut__tur { color: var(--metin-3); font-size: 12px; }
.komut__tas { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--ametist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.7' stroke-linejoin='round'%3E%3Cpath d='M6 3h12l3 6-9 12L3 9l3-6Z'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E") center / 16px no-repeat; }
.komut__bos { padding: 28px; color: var(--metin-3); text-align: center; }
.komut__alt { display: flex; gap: 16px; padding: 10px 16px; border-top: 0.5px solid var(--cizgi); color: var(--metin-3); font-size: 12px; }
.komut__alt span { display: inline-flex; align-items: center; gap: 4px; }

.sag-panel { position: fixed; inset: 0; z-index: 80; }
.sag-panel__perde { position: absolute; inset: 0; background: rgba(28, 26, 33, 0.12); opacity: 0; transition: opacity var(--sure-2) var(--egri); }
.sag-panel__kutu { position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(560px, calc(100vw - 16px)); display: flex; flex-direction: column; border-radius: 18px; background: var(--yuzey); box-shadow: 0 0 0 0.5px var(--cizgi-2), 0 24px 64px rgba(28, 26, 33, 0.16); transform: translateX(24px); opacity: 0; transition: transform var(--sure-2) var(--egri), opacity var(--sure-2) var(--egri); }
.sag-panel--acik .sag-panel__perde { opacity: 1; }
.sag-panel--acik .sag-panel__kutu { transform: none; opacity: 1; }
.sag-panel__ust { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 20px; border-bottom: 0.5px solid var(--cizgi); }
.sag-panel__ust b { flex: 1; overflow: hidden; font-size: 15px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.sag-panel__govde { flex: 1; padding: 20px; overflow-y: auto; }
.sag-panel__govde .ust h1, .sag-panel__govde .ekran-bas h1 { font-size: 22px; line-height: 28px; }
.sag-panel__govde .izgara--ana, .sag-panel__govde .izgara--2, .sag-panel__govde .izgara--3 { grid-template-columns: minmax(0, 1fr); }

.bildirimler { position: fixed; right: 20px; bottom: 20px; z-index: 95; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.bildirim { display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 420px; padding: 12px 10px 12px 16px; border-radius: 14px; background: #1c1a21; color: #fff; box-shadow: 0 12px 32px rgba(28, 26, 33, 0.24); pointer-events: auto; opacity: 0; transform: translateY(8px) scale(0.98); transition: opacity var(--sure-2) var(--egri), transform var(--sure-2) var(--egri); }
.bildirim--acik { opacity: 1; transform: none; }
.bildirim__isaret { width: 8px; height: 8px; border-radius: 50%; background: #b48ae6; flex: none; }
.bildirim--basari .bildirim__isaret { background: #5fd18f; }
.bildirim--hata .bildirim__isaret { background: #ff7a6e; }
.bildirim__metin { display: grid; flex: 1; font-size: 13px; line-height: 18px; }
.bildirim__metin span { color: rgba(255, 255, 255, 0.64); font-size: 12px; }
.bildirim__geri { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.12); color: #fff; font: 600 12px/1 var(--yazi); cursor: pointer; }
.bildirim__geri:hover { background: rgba(255, 255, 255, 0.2); }
.bildirim__kapat { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: rgba(255, 255, 255, 0.5); font-size: 18px; line-height: 1; cursor: pointer; }

.dogus { position: fixed; z-index: 99; border-radius: 16px; background: var(--ametist-acik); box-shadow: 0 0 0 1px var(--ametist); pointer-events: none; transition: transform var(--sure-2) cubic-bezier(.5, 0, .7, .4), opacity var(--sure-2) ease-in; }

.bolum-basligi { margin: 28px 0 12px; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }

@media (max-width: 860px) {
  .ust, .ekran-bas { margin-top: 12px; margin-bottom: 20px; }
  .ust h1, .ekran-bas h1 { font-size: 26px; line-height: 32px; }
  .kart__bas { padding: 16px 16px 0; }
  .kart__govde { padding: 12px 16px 16px; }
  .kpi { padding: 16px; min-height: 0; }
  .kpi__deger { font-size: 28px; line-height: 32px; }
  .ls, .liste-kart .ls { padding-left: 16px; padding-right: 16px; }
  .komut { padding-top: 8px; }
  .komut__kutu { max-height: calc(100vh - 16px); }
  .komut__alt { display: none; }
  .sag-panel__kutu { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: 92vh; border-radius: 20px 20px 0 0; transform: translateY(24px); }
  .bildirimler { left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); justify-items: stretch; }
  .bildirim { min-width: 0; max-width: none; }
  .sekmeler { margin-top: -4px; }
  .cg__alan-kutu { grid-template-columns: 40px minmax(0, 1fr); }
  .cg__x-eksen { margin-left: 40px; }
  .cy__satir { grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) auto; gap: 8px; }
  .zc--yatay { overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
  .zc--yatay .zc__adim { min-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  .cg .cg__cizim svg, .cg .cg__nokta, .cg .cg__deger { clip-path: none; opacity: 1; }
  .cy__dolgu, .cd__cubuk { transform: none; }
  .halka__dolgu { stroke-dashoffset: var(--hedef); }
}

.kabuk { grid-template-columns: 268px minmax(0, 1fr); background: linear-gradient(90deg, #f8f8fa 0 267.5px, #d2d2d7 267.5px 268px, transparent 268px); }
.yan { padding: 16px 12px 10px; border-right: 0; }
.yan__icerik { gap: 0; }

.gy-marka { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 12px 4px; }
.gy-marka .marka { padding: 0; gap: 10px; }
.gy-marka .marka__simge { width: 36px; height: 36px; border-radius: 10px; }
.gy-marka .marka__simge img { width: 24px; height: 24px; }
.gy-marka .marka__ad { font-size: 15.5px; }
.gy-marka .marka__ad small { font-size: 12px; }
.gy-marka__sag { display: flex; align-items: center; gap: 2px; }
.gy-kapat { display: none; }

.gy-aai { position: relative; display: flex; align-items: center; gap: 11px; margin: 0 0 8px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(135deg, #f7f1fe 0%, #efe5fa 100%); box-shadow: inset 0 0 0 0.5px rgba(122, 69, 184, 0.28), 0 1px 2px rgba(91, 47, 143, 0.06); color: var(--metin); text-decoration: none; transition: box-shadow var(--sure-1) var(--egri), transform var(--sure-1) var(--egri); }
.gy-aai:hover { text-decoration: none; color: var(--metin); box-shadow: inset 0 0 0 1px rgba(122, 69, 184, 0.45), 0 6px 18px rgba(91, 47, 143, 0.14); }
.gy-aai:active { transform: scale(0.99); }
.gy-aai.secili { background: linear-gradient(135deg, #efe4fb 0%, #e4d4f7 100%); box-shadow: inset 0 0 0 1px rgba(122, 69, 184, 0.55), 0 0 0 4px rgba(122, 69, 184, 0.10); }
.gy-aai__tas { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(150deg, #a57ade 0%, #7a45b8 55%, #55288c 100%); color: #fff; box-shadow: 0 4px 10px rgba(91, 47, 143, 0.30), inset 0 0 0 0.5px rgba(255, 255, 255, 0.25); }
.gy-aai__tas svg { width: 18px; height: 18px; }
.gy-aai__metin { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.gy-aai__metin b { font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; color: #4b2380; }
.gy-aai__metin span { overflow: hidden; color: var(--metin-2); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.gy-aai kbd { background: rgba(255, 255, 255, 0.7); }
.gy-aai__nokta { position: absolute; top: 8px; left: 36px; width: 9px; height: 9px; border-radius: 50%; background: #ff9f0a; box-shadow: 0 0 0 2px #f4ecfc; }

.yan .menu { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.gy-grup + .gy-grup { margin-top: 6px; }
.gy-grup .menu__baslik { padding: 5px 10px 1px; }
.yan .menu a { min-height: 30px; gap: 10px; font-size: 14.5px; }
.yan .menu a svg { width: 17px; height: 17px; }
.yan .menu a.secili .gy-rozet--notr { background: rgba(122, 69, 184, 0.14); color: #5e2f96; }
.gy-dis { width: 12px !important; height: 12px !important; margin-left: -4px; opacity: 0.5; }

.gy-rozet { display: inline-flex; flex: none; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 11.5px; font-weight: 600; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gy-rozet--notr { background: rgba(118, 118, 128, 0.13); color: #6e6e73; }
.gy-rozet--kirmizi { background: #ff3b30; color: #fff; }
.gy-rozet--amber { background: rgba(255, 159, 10, 0.18); color: #945400; }
.gy-rozet--yesil { background: rgba(52, 199, 89, 0.16); color: #1b7a34; }
.gy-rozet--ametist { background: rgba(122, 69, 184, 0.12); color: #5e2f96; }
.gy-rozet--nokta { min-width: 0; width: 8px; height: 8px; padding: 0; margin-right: 6px; border-radius: 50%; font-size: 0; }
.gy-rozet--nokta.gy-rozet--yesil { background: #34c759; box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.16); }

.yan__alt { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 10px; padding-top: 10px; }
.gy-magaza { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--metin-3); font-size: 12px; line-height: 1.3; }
.gy-magaza i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #34c759; }
.gy-magaza b { color: var(--metin-2); font-weight: 600; }
.gy-kisi { display: flex; align-items: center; gap: 6px; }
.gy-kisi .kisi { padding: 4px 6px; }
.gy-kisi .kisi__resim { width: 34px; height: 34px; background: linear-gradient(160deg, #a57ade, #6a36a6); }
.gy-kisi .kisi__rol { overflow: hidden; color: var(--metin-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.gy-kisi .kisi__metin { min-width: 0; }
.gy-kisi .dugme { flex: none; height: 32px; padding: 0 11px; font-size: 13px; }

.gy-ust, .gy-alt, .gy-perde { display: none; }

.ana { max-width: 1280px; }

@media (max-width: 1080px) {
  .kabuk { grid-template-columns: 236px minmax(0, 1fr); background: linear-gradient(90deg, #f8f8fa 0 235.5px, #d2d2d7 235.5px 236px, transparent 236px); }
  .ana { padding: 28px 24px 64px; }
  .gy-aai__metin span { display: none; }
}

@media (max-width: 860px) {
  .kabuk { display: block; background: none; }
  .yan { display: none; }
  body.gy-menu-acik { overflow: hidden; }
  body.gy-menu-acik .yan { position: fixed; inset: 0; z-index: 75; display: flex; height: 100%; padding: calc(12px + env(safe-area-inset-top)) 16px calc(84px + env(safe-area-inset-bottom)); border: 0; background: rgba(245, 245, 247, 0.98); overflow-y: auto; animation: gyAc var(--sure-2) var(--egri); }
  body.gy-menu-acik .yan__icerik { display: flex; max-height: none; overflow: visible; padding-top: 0; }
  body.gy-menu-acik .yan .menu { overflow: visible; flex: none; }
  .gy-kapat { display: grid; }
  .gy-marka .ikon-dugme[data-komut-ac] { display: none; }
  .yan .menu a { min-height: 44px; font-size: 16px; border-radius: 12px; }
  .gy-grup { padding: 4px; border-radius: 16px; background: #fff; box-shadow: var(--golge); }
  .gy-grup + .gy-grup { margin-top: 12px; }
  .gy-grup .menu__baslik { padding: 8px 10px 2px; }
  .gy-aai { padding: 12px; }
  .gy-aai__metin span { display: block; }
  .gy-aai kbd { display: none; }

  .gy-ust { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; height: calc(52px + env(safe-area-inset-top)); margin: 0 -16px 6px; padding: env(safe-area-inset-top) 8px 0 16px; background: rgba(245, 245, 247, 0.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0.5px solid var(--cizgi); }
  .gy-ust .marka { flex: 1; min-width: 0; padding: 0; gap: 9px; }
  .gy-ust .marka__simge { width: 30px; height: 30px; border-radius: 8.5px; }
  .gy-ust .marka__simge img { width: 20px; height: 20px; }
  .gy-ust .marka__ad { font-size: 15px; }
  .gy-ust .marka__ad small { display: none; }
  .gy-ust .ikon-dugme { width: 36px; height: 36px; }

  .ana { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }

  .gy-alt { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; height: calc(62px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: rgba(250, 250, 252, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-top: 0.5px solid var(--cizgi-koyu); }
  .gy-alt > a, .gy-alt > button { position: relative; display: grid; justify-items: center; gap: 3px; padding: 6px 0; border: 0; background: none; color: var(--metin-3); font: 500 10.5px/1.1 var(--yazi); text-decoration: none; cursor: pointer; }
  .gy-alt > a:hover { text-decoration: none; }
  .gy-alt > a.secili, .gy-alt > button.secili { color: var(--ametist); }
  .gy-alt svg { width: 22px; height: 22px; }
  .gy-alt .gy-rozet { position: absolute; top: 1px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
  .gy-alt__aai .gy-alt__tas { display: grid; place-items: center; width: 46px; height: 46px; margin-top: -6px; border-radius: 15px; background: linear-gradient(150deg, #a57ade 0%, #7a45b8 55%, #55288c 100%); color: #fff; box-shadow: 0 6px 16px rgba(91, 47, 143, 0.32); }
  .gy-alt__aai span:last-child { display: none; }
}

@keyframes gyAc { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kart.kpi, a.kpi { box-shadow: var(--golge); }
.kart { box-shadow: var(--golge); }
.izgara > .kart, .kpiler > .kart { border-radius: var(--yaricap); }

.marka__logo { display: block; width: 104px; height: 46px; background: var(--ametist-koyu); -webkit-mask: url(/img/ametist-logo.png) left center / contain no-repeat; mask: url(/img/ametist-logo.png) left center / contain no-repeat; }
.marka__ai { display: inline-grid; place-items: center; height: 18px; padding: 0 6px; margin-top: 22px; border-radius: 999px; background: var(--ametist-acik); color: var(--ametist); font: 600 11px/1 var(--yazi); letter-spacing: 0.02em; }
.marka__ad:has(> .marka__ai) { display: inline-flex; }