/* Detay iş uygulaması · Faz 1 maketi · belirteçler 06-tasarim-sistemi.md */

:root {
  --marka: #1f5f9e; --marka-basili: #174a7c; --marka-zemin: #eaf2fb; --marka-uzeri: #ffffff;
  --yazi: #0f172a; --yazi-2: #475569; --yazi-3: #94a3b8;
  --zemin: #f5f7fa; --yuzey: #ffffff; --yuzey-2: #f8fafc; --yuzey-3: #f1f5f9;
  --cizgi: #e5e9f0; --cizgi-2: #cbd5e1;
  --basari: #15803d; --basari-zemin: #ecfdf3;
  --uyari: #b45309; --uyari-zemin: #fff7e6;
  --hata: #b91c1c; --hata-zemin: #fef2f2;
  --bilgi: #1d4ed8; --bilgi-zemin: #eff6ff;
  --vurgu: #7c3aed; --vurgu-zemin: #f5f3ff;
  --notr: #475569; --notr-zemin: #f1f5f9;

  --a-yeni: #64748b; --a-gor: #2563eb; --a-tek: #7c3aed; --a-ona: #15803d; --a-red: #b91c1c;
  --gr-1: #1f5f9e; --gr-2: #0ea5a4; --gr-3: #f59e0b; --gr-4: #7c3aed; --gr-5: #e11d48; --gr-6: #64748b;

  --kisi-1: #7c3aed; --kisi-2: #1f5f9e; --kisi-3: #0f8b8a; --kisi-4: #db2777; --kisi-5: #c2410c;
  --kisi-6: #15803d; --kisi-7: #9333ea; --kisi-8: #475569; --kisi-9: #0369a1; --kisi-10: #64748b;

  --yazi-tipi: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 20px; --b-6: 24px; --b-8: 32px; --b-10: 40px;
  --k-1: 6px; --k-2: 10px; --k-3: 14px; --k-tam: 999px;
  --g-1: 0 1px 2px rgb(15 23 42 / .06);
  --g-2: 0 8px 24px rgb(15 23 42 / .12), 0 2px 4px rgb(15 23 42 / .06);
  --g-3: 0 24px 64px rgb(15 23 42 / .20), 0 4px 12px rgb(15 23 42 / .08);
  --perde: rgb(15 23 42 / .36);
  --denetim: 36px; --satir: 44px;
  --menu-g: 240px; --ust-y: 56px; --cekmece: 520px; --cekmece-genis: 720px;
  --ipucu-zemin: #0f172a; --ipucu-yazi: #f8fafc;
  --iskelet-1: #eef2f6; --iskelet-2: #f8fafc;
  color-scheme: light;
}

[data-tema="koyu"] {
  --marka: #5b9be0; --marka-basili: #7cb1ea; --marka-zemin: #16263a; --marka-uzeri: #0b1420;
  --yazi: #e6edf5; --yazi-2: #9fb0c3; --yazi-3: #64748b;
  --zemin: #0b1118; --yuzey: #121a24; --yuzey-2: #17212d; --yuzey-3: #1c2836;
  --cizgi: #223042; --cizgi-2: #2e3e52;
  --basari: #4ade80; --basari-zemin: #0f2a1b;
  --uyari: #fbbf24; --uyari-zemin: #2d2209;
  --hata: #f87171; --hata-zemin: #2e1414;
  --bilgi: #60a5fa; --bilgi-zemin: #111f3a;
  --vurgu: #a78bfa; --vurgu-zemin: #221a3d;
  --notr: #9fb0c3; --notr-zemin: #1c2836;
  --a-yeni: #94a3b8; --a-gor: #60a5fa; --a-tek: #a78bfa; --a-ona: #4ade80; --a-red: #f87171;
  --gr-1: #5b9be0; --gr-2: #2dd4bf; --gr-3: #fbbf24; --gr-4: #a78bfa; --gr-5: #fb7185; --gr-6: #94a3b8;
  --g-1: 0 0 0 0 transparent;
  --g-2: 0 0 0 1px var(--cizgi-2), 0 12px 32px rgb(0 0 0 / .45);
  --g-3: 0 0 0 1px var(--cizgi-2), 0 24px 64px rgb(0 0 0 / .55);
  --perde: rgb(0 0 0 / .55);
  --ipucu-zemin: #e6edf5; --ipucu-yazi: #0b1118;
  --iskelet-1: #17212d; --iskelet-2: #1f2b3a;
  color-scheme: dark;
}

[data-yogunluk="sik"] { --satir: 36px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--yazi-tipi); font-size: 14px; line-height: 20px; color: var(--yazi);
  background: var(--zemin); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01";
}
a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--marka); outline-offset: 2px; border-radius: var(--k-1); }
.rakam, .tabular { font-variant-numeric: tabular-nums; }
.gizli { display: none !important; }
.ik { width: 16px; height: 16px; flex: none; display: inline-block; vertical-align: middle; }
.ik-s { width: 14px; height: 14px; }
.ik-b { width: 20px; height: 20px; }
.ik-xl { width: 28px; height: 28px; }

/* ---------- Tipografi ---------- */
.baslik-1 { font-size: 22px; line-height: 30px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.baslik-2 { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
.baslik-3 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0; }
.etiket { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--yazi-2); }
.kucuk { font-size: 12px; line-height: 16px; }
.soluk { color: var(--yazi-2); }
.soluk-2 { color: var(--yazi-3); }
.kalin { font-weight: 600; }
.sag { text-align: right; }
.orta { text-align: center; }
.tek-satir { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.renk-basari { color: var(--basari); } .renk-hata { color: var(--hata); } .renk-uyari { color: var(--uyari); }

/* ---------- Kabuk ---------- */
.kabuk { display: grid; grid-template-columns: var(--menu-g) minmax(0, 1fr); min-height: 100vh; }
.yan {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
  background: var(--yuzey); border-right: 1px solid var(--cizgi); z-index: 30;
}
.yan-logo { height: var(--ust-y); display: flex; align-items: center; gap: var(--b-3); padding: 0 var(--b-4); border-bottom: 1px solid var(--cizgi); }
.logo-im { width: 28px; height: 28px; border-radius: 8px; background: var(--marka); color: var(--marka-uzeri); display: grid; place-items: center; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; }
.logo-yazi { font-weight: 650; font-size: 15px; letter-spacing: -0.01em; }
.logo-yazi small { display: block; font-size: 11px; line-height: 14px; font-weight: 500; color: var(--yazi-3); letter-spacing: 0; }
.yan-govde { flex: 1; overflow-y: auto; padding: var(--b-3) var(--b-3) var(--b-4); }
.yan-grup { margin-top: var(--b-4); }
.yan-grup:first-child { margin-top: 0; }
.yan-grup-ad { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--yazi-3); padding: 0 var(--b-2) var(--b-1); }
.yan-oge {
  display: flex; align-items: center; gap: var(--b-3); height: 32px; padding: 0 var(--b-2); border-radius: var(--k-1);
  color: var(--yazi-2); font-weight: 500; position: relative; cursor: pointer;
}
.yan-oge:hover { background: var(--yuzey-3); color: var(--yazi); text-decoration: none; }
.yan-oge.etkin { background: var(--marka-zemin); color: var(--marka); }
.yan-oge.etkin::before { content: ""; position: absolute; left: calc(var(--b-3) * -1); top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--marka); }
.yan-oge .sayi { margin-left: auto; }
.yan-alt { border-top: 1px solid var(--cizgi); padding: var(--b-3); display: flex; align-items: center; gap: var(--b-3); }
.yan-alt .ad { font-weight: 600; font-size: 13px; line-height: 18px; }
.yan-alt .rol { font-size: 12px; line-height: 16px; color: var(--yazi-2); }

.ana { min-width: 0; display: flex; flex-direction: column; }
.ust {
  height: var(--ust-y); position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--b-3);
  padding: 0 var(--b-6); background: color-mix(in srgb, var(--yuzey) 88%, transparent); backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--cizgi);
}
.yol { display: flex; align-items: center; gap: var(--b-2); color: var(--yazi-2); min-width: 0; font-size: 13px; }
.yol a { color: var(--yazi-2); }
.yol .son { color: var(--yazi); font-weight: 600; }
.yol .ayrac { color: var(--yazi-3); }
.ust-bosluk { flex: 1; }
.arama-dugme {
  display: flex; align-items: center; gap: var(--b-2); height: 32px; width: 280px; padding: 0 var(--b-2) 0 var(--b-3);
  border: 1px solid var(--cizgi); border-radius: var(--k-1); background: var(--yuzey-2); color: var(--yazi-3); cursor: pointer; font-size: 13px;
}
.arama-dugme:hover { border-color: var(--cizgi-2); }
.arama-dugme .tus { margin-left: auto; }
.tus { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--cizgi); border-bottom-width: 2px; border-radius: 4px; font-size: 11px; color: var(--yazi-2); background: var(--yuzey); font-weight: 500; }
.rol-sec { display: flex; align-items: center; gap: var(--b-2); height: 32px; padding: 0 var(--b-1) 0 var(--b-3); border: 1px dashed var(--cizgi-2); border-radius: var(--k-1); font-size: 13px; color: var(--yazi-2); }
.rol-sec select { border: 0; background: transparent; font-weight: 600; color: var(--yazi); height: 28px; cursor: pointer; padding-right: var(--b-1); }
.rol-sec select:focus-visible { outline: none; }
.zil { position: relative; }
.zil .nokta { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--hata); box-shadow: 0 0 0 2px var(--yuzey); }
.hamburger { display: none; }
.icerik { width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--b-6); flex: 1; }

/* ---------- Düğme ---------- */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--b-2); height: var(--denetim); padding: 0 var(--b-3);
  border-radius: var(--k-1); border: 1px solid transparent; font-weight: 500; font-size: 14px; line-height: 20px; cursor: pointer;
  white-space: nowrap; text-decoration: none; transition: background .12s, border-color .12s, color .12s; user-select: none;
}
.dugme:hover { text-decoration: none; }
.dugme-birincil { background: var(--marka); color: var(--marka-uzeri); box-shadow: inset 0 -1px 0 rgb(0 0 0 / .12); }
.dugme-birincil:hover { background: var(--marka-basili); }
.dugme-ikincil { background: var(--yuzey); border-color: var(--cizgi-2); color: var(--yazi); box-shadow: var(--g-1); }
.dugme-ikincil:hover { background: var(--yuzey-2); }
.dugme-hayalet { background: transparent; color: var(--yazi-2); }
.dugme-hayalet:hover { background: var(--yuzey-3); color: var(--yazi); }
.dugme-tehlike { background: var(--hata); color: #fff; }
.dugme-tehlike:hover { filter: brightness(.94); }
.dugme-s { height: 28px; padding: 0 var(--b-2); font-size: 13px; gap: 6px; }
.dugme-simge { width: var(--denetim); padding: 0; }
.dugme-simge.dugme-s { width: 28px; }
.dugme[disabled], .dugme.pasif { opacity: .5; cursor: not-allowed; pointer-events: none; }
.dugme.yukleniyor { pointer-events: none; }
.dugme.yukleniyor .donen { display: inline-block; }
.donen { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }
.dugme-grup { display: inline-flex; border: 1px solid var(--cizgi-2); border-radius: var(--k-1); padding: 2px; background: var(--yuzey-2); gap: 2px; }
.dugme-grup button { height: 28px; padding: 0 var(--b-3); border: 0; background: transparent; border-radius: 4px; color: var(--yazi-2); font-weight: 500; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.dugme-grup button.etkin { background: var(--yuzey); color: var(--yazi); box-shadow: var(--g-1), 0 0 0 1px var(--cizgi); }

/* ---------- Rozet, avatar ---------- */
.rozet {
  --c: var(--notr); --cz: var(--notr-zemin);
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--b-2); border-radius: var(--k-tam);
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--c); background: var(--cz); white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
}
.rozet .ik { width: 12px; height: 12px; }
.rozet-nokta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.rozet-bilgi { --c: var(--bilgi); --cz: var(--bilgi-zemin); }
.rozet-basari { --c: var(--basari); --cz: var(--basari-zemin); }
.rozet-uyari { --c: var(--uyari); --cz: var(--uyari-zemin); }
.rozet-hata { --c: var(--hata); --cz: var(--hata-zemin); }
.rozet-vurgu { --c: var(--vurgu); --cz: var(--vurgu-zemin); }
.rozet-asama-yeni { --c: var(--a-yeni); --cz: color-mix(in srgb, var(--a-yeni) 12%, var(--yuzey)); }
.rozet-asama-gor { --c: var(--a-gor); --cz: color-mix(in srgb, var(--a-gor) 10%, var(--yuzey)); }
.rozet-asama-tek { --c: var(--a-tek); --cz: color-mix(in srgb, var(--a-tek) 10%, var(--yuzey)); }
.rozet-asama-ona { --c: var(--a-ona); --cz: color-mix(in srgb, var(--a-ona) 10%, var(--yuzey)); }
.rozet-asama-red { --c: var(--a-red); --cz: color-mix(in srgb, var(--a-red) 10%, var(--yuzey)); }
.rozet-kod { --c: var(--yazi-2); --cz: var(--yuzey-3); font-variant-numeric: tabular-nums; border-radius: var(--k-1); font-weight: 600; letter-spacing: .01em; }
.sayi { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--k-tam); background: var(--yuzey-3); color: var(--yazi-2); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sayi-hata { background: var(--hata); color: #fff; }
.sayi-marka { background: var(--marka); color: var(--marka-uzeri); }

.avatar {
  --c: var(--kisi-10);
  width: 24px; height: 24px; border-radius: 50%; background: var(--c); color: #fff; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 600; letter-spacing: .02em; flex: none; user-select: none;
}
.avatar-s { width: 20px; height: 20px; font-size: 9px; }
.avatar-l { width: 32px; height: 32px; font-size: 12px; }
.avatar-xl { width: 44px; height: 44px; font-size: 15px; }
.avatar-firma { border-radius: 8px; background: color-mix(in srgb, var(--c) 14%, var(--yuzey)); color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); }
.avatar-yigin { display: inline-flex; }
.avatar-yigin .avatar { box-shadow: 0 0 0 2px var(--yuzey); }
.avatar-yigin .avatar + .avatar { margin-left: -6px; }
.r1 { --c: var(--kisi-1); } .r2 { --c: var(--kisi-2); } .r3 { --c: var(--kisi-3); } .r4 { --c: var(--kisi-4); } .r5 { --c: var(--kisi-5); }
.r6 { --c: var(--kisi-6); } .r7 { --c: var(--kisi-7); } .r8 { --c: var(--kisi-8); } .r9 { --c: var(--kisi-9); } .r10 { --c: var(--kisi-10); }
.kisi { display: inline-flex; align-items: center; gap: var(--b-2); min-width: 0; }

/* ---------- Kart ---------- */
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--k-2); box-shadow: var(--g-1); min-width: 0; }
.kart-bas { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-4) var(--b-5); min-height: 56px; }
.kart-bas .baslik-2 { display: flex; align-items: center; gap: var(--b-2); }
.kart-bas .sag-eylem { margin-left: auto; display: flex; gap: var(--b-2); align-items: center; }
.kart-bas.cizgili { border-bottom: 1px solid var(--cizgi); }
.kart-govde { padding: var(--b-5); }
.kart-govde.dar { padding: var(--b-4) var(--b-5); }
.kart-alt { border-top: 1px solid var(--cizgi); padding: var(--b-3) var(--b-5); display: flex; align-items: center; gap: var(--b-3); }

/* ---------- Sayfa ---------- */
.sayfa-bas { display: flex; align-items: flex-start; gap: var(--b-4); margin-bottom: var(--b-5); flex-wrap: wrap; }
.sayfa-bas .alt { margin-top: 2px; color: var(--yazi-2); }
.sayfa-bas .eylemler { margin-left: auto; display: flex; gap: var(--b-2); align-items: center; flex-wrap: wrap; }
.baslik-satir { display: flex; align-items: center; gap: var(--b-3); flex-wrap: wrap; }
.izgara { display: grid; gap: var(--b-4); }
.iki-kolon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--b-4); }
.pano-kolon { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--b-4); }
.detay-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--b-5); align-items: start; }
.yigin > * + * { margin-top: var(--b-4); }
.satir { display: flex; align-items: center; gap: var(--b-2); }
.satir-3 { display: flex; align-items: center; gap: var(--b-3); }
.arala { justify-content: space-between; }
.esnek { flex: 1; min-width: 0; }
.mt-2 { margin-top: var(--b-2); } .mt-3 { margin-top: var(--b-3); } .mt-4 { margin-top: var(--b-4); } .mt-5 { margin-top: var(--b-5); } .mt-6 { margin-top: var(--b-6); }
.ayirici { height: 1px; background: var(--cizgi); margin: var(--b-4) 0; border: 0; }

/* ---------- KPI ---------- */
.kpi-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b-4); }
.kpi-serit.alti { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.kpi { padding: var(--b-4) var(--b-5); cursor: pointer; transition: border-color .12s, box-shadow .12s; display: flex; flex-direction: column; gap: var(--b-1); position: relative; }
.kpi:hover { border-color: var(--cizgi-2); box-shadow: var(--g-2); }
.kpi-ust { display: flex; align-items: center; gap: 6px; }
.kpi-deger { font-size: 26px; line-height: 32px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: var(--b-1); }
.alti .kpi-deger { font-size: 22px; line-height: 28px; }
.kpi-alt { display: flex; align-items: flex-end; gap: var(--b-2); justify-content: space-between; min-height: 32px; }
.degisim { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; padding: 2px 6px; border-radius: var(--k-1); }
.degisim.art { color: var(--basari); background: var(--basari-zemin); }
.degisim.az { color: var(--hata); background: var(--hata-zemin); }
.degisim.yatay { color: var(--yazi-2); background: var(--yuzey-3); }
.degisim .ik { width: 12px; height: 12px; }
.kivilcim { width: 96px; height: 32px; flex: none; }
.kivilcim path.cizgi { fill: none; stroke: var(--marka); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kivilcim path.alan { fill: color-mix(in srgb, var(--marka) 12%, transparent); stroke: none; }
.bune { width: 16px; height: 16px; border-radius: 50%; display: inline-grid; place-items: center; color: var(--yazi-3); cursor: pointer; border: 0; background: transparent; padding: 0; }
.bune:hover { color: var(--yazi-2); }
.ilerleme { height: 6px; border-radius: var(--k-tam); background: var(--yuzey-3); overflow: hidden; position: relative; }
.ilerleme > i { position: absolute; inset: 0 auto 0 0; border-radius: var(--k-tam); background: var(--marka); }
.ilerleme.basari > i { background: var(--basari); } .ilerleme.uyari > i { background: var(--uyari); } .ilerleme.hata > i { background: var(--hata); }
.ilerleme-k { height: 8px; }

/* ---------- Dikkat çipleri ---------- */
.dikkat { display: flex; align-items: center; gap: var(--b-2); flex-wrap: wrap; padding: var(--b-3) var(--b-4); }
.dikkat .bas { display: flex; align-items: center; gap: var(--b-2); font-weight: 600; margin-right: var(--b-2); }
.cip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 var(--b-3); border-radius: var(--k-tam);
  border: 1px solid var(--cizgi-2); background: var(--yuzey); color: var(--yazi); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.cip:hover { border-color: var(--yazi-3); text-decoration: none; }
.cip b { font-variant-numeric: tabular-nums; }
.cip-hata { border-color: color-mix(in srgb, var(--hata) 35%, transparent); background: var(--hata-zemin); color: var(--hata); }
.cip-uyari { border-color: color-mix(in srgb, var(--uyari) 35%, transparent); background: var(--uyari-zemin); color: var(--uyari); }
.cip-basari { border-color: color-mix(in srgb, var(--basari) 35%, transparent); background: var(--basari-zemin); color: var(--basari); }
.cip-etkin { border-color: var(--marka); background: var(--marka-zemin); color: var(--marka); }
.cip .kapat { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-right: -4px; }
.cip .kapat:hover { background: color-mix(in srgb, currentColor 15%, transparent); }

/* ---------- Süzgeç çubuğu ---------- */
.suzgec { display: flex; align-items: center; gap: var(--b-2); flex-wrap: wrap; margin-bottom: var(--b-3); }
.arama-alan { position: relative; width: 260px; }
.arama-alan .ik { position: absolute; left: 10px; top: 10px; color: var(--yazi-3); }
.arama-alan input { padding-left: 32px; height: 36px; }
.suzgec .cip { border-style: dashed; }
.suzgec .cip.cip-etkin { border-style: solid; }
.suzgec .sag-eylem { margin-left: auto; display: flex; gap: var(--b-2); }

/* ---------- Sekme ---------- */
.sekmeler { display: flex; gap: var(--b-1); border-bottom: 1px solid var(--cizgi); margin-bottom: var(--b-4); overflow-x: auto; scrollbar-width: none; }
.sekmeler::-webkit-scrollbar { display: none; }
.sekme {
  display: inline-flex; align-items: center; gap: var(--b-2); height: 40px; padding: 0 var(--b-3); border: 0; background: transparent;
  color: var(--yazi-2); font-weight: 500; cursor: pointer; position: relative; white-space: nowrap;
}
.sekme:hover { color: var(--yazi); text-decoration: none; }
.sekme.etkin { color: var(--yazi); }
.sekme.etkin::after { content: ""; position: absolute; left: var(--b-2); right: var(--b-2); bottom: -1px; height: 2px; border-radius: 2px; background: var(--marka); }

/* ---------- Tablo ---------- */
.tablo-kap { overflow-x: auto; }
.tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.tablo th {
  position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 var(--b-3); text-align: left; white-space: nowrap;
  font-size: 12px; line-height: 16px; font-weight: 500; color: var(--yazi-2); background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi);
}
.tablo th:first-child, .tablo td:first-child { padding-left: var(--b-5); }
.tablo th:last-child, .tablo td:last-child { padding-right: var(--b-5); }
.tablo th.siralanir { cursor: pointer; user-select: none; }
.tablo th.siralanir:hover { color: var(--yazi); }
.tablo th .ok { opacity: .8; margin-left: 2px; }
.tablo td { height: var(--satir); padding: 0 var(--b-3); border-bottom: 1px solid var(--cizgi); white-space: nowrap; vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr.tik { cursor: pointer; }
.tablo tbody tr:hover td { background: var(--yuzey-2); }
.tablo tbody tr.secili td { background: var(--marka-zemin); }
.tablo td.para, .tablo th.para { text-align: right; }
.tablo tfoot td { height: 40px; padding: 0 var(--b-3); background: var(--yuzey-2); border-top: 1px solid var(--cizgi); font-weight: 600; }
.tablo .hizli { opacity: 0; transition: opacity .1s; display: inline-flex; gap: var(--b-1); }
.tablo tr:hover .hizli { opacity: 1; }
.tablo .onay { width: 36px; padding-right: 0; }
.tablo-kart { overflow: hidden; }
.sayfalama { display: flex; align-items: center; gap: var(--b-2); padding: var(--b-3) var(--b-5); border-top: 1px solid var(--cizgi); color: var(--yazi-2); font-size: 13px; }
.sayfalama .sag-eylem { margin-left: auto; display: flex; gap: var(--b-1); }
.toplu { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-2) var(--b-5); background: var(--marka-zemin); border-bottom: 1px solid var(--cizgi); color: var(--marka); font-weight: 600; font-size: 13px; }
.firma-hucre { display: flex; align-items: center; gap: var(--b-3); min-width: 0; }
.firma-hucre .ad { font-weight: 600; color: var(--yazi); }
.firma-hucre .alt { font-size: 12px; line-height: 16px; color: var(--yazi-2); }

/* ---------- Alan ---------- */
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan > label, .alan > .etiket { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--yazi-2); }
.alan .istege { color: var(--yazi-3); font-weight: 400; }
.girdi {
  width: 100%; height: var(--denetim); padding: 0 var(--b-3); border: 1px solid var(--cizgi-2); border-radius: var(--k-1);
  background: var(--yuzey); color: var(--yazi); outline: none; transition: border-color .12s, box-shadow .12s;
}
.girdi::placeholder { color: var(--yazi-3); }
.girdi:hover { border-color: var(--yazi-3); }
.girdi:focus { border-color: var(--marka); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marka) 22%, transparent); }
textarea.girdi { height: auto; min-height: 88px; padding: var(--b-2) var(--b-3); resize: vertical; line-height: 20px; }
select.girdi { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--yazi-2) 50%), linear-gradient(135deg, var(--yazi-2) 50%, transparent 50%); background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px; background-size: 5px 5px; background-repeat: no-repeat; }
.girdi.hatali { border-color: var(--hata); }
.girdi.hatali:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--hata) 20%, transparent); }
.girdi[disabled], .girdi[readonly] { background: var(--yuzey-2); color: var(--yazi-2); }
.alan-hata { color: var(--hata); font-size: 12px; line-height: 16px; display: flex; gap: 4px; align-items: center; }
.alan-yardim { color: var(--yazi-2); font-size: 12px; line-height: 16px; }
.para-alan { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--b-2); }
.para-alan .girdi:first-child { text-align: right; font-variant-numeric: tabular-nums; }
.form-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-4); }
.form-izgara .tam { grid-column: 1 / -1; }
.onay-kutu { display: inline-flex; align-items: center; gap: var(--b-2); cursor: pointer; user-select: none; }
.onay-kutu input { width: 16px; height: 16px; margin: 0; accent-color: var(--marka); cursor: pointer; }
.anahtar { position: relative; width: 36px; height: 20px; flex: none; }
.anahtar input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.anahtar span { position: absolute; inset: 0; border-radius: 999px; background: var(--cizgi-2); transition: background .15s; }
.anahtar span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform .15s; }
.anahtar input:checked + span { background: var(--marka); }
.anahtar input:checked + span::after { transform: translateX(16px); }
.anahtar input:focus-visible + span { outline: 2px solid var(--marka); outline-offset: 2px; }
.secenek-izgara { display: flex; flex-wrap: wrap; gap: var(--b-2); }
.secenek { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--b-3); border-radius: var(--k-1); border: 1px solid var(--cizgi-2); background: var(--yuzey); cursor: pointer; font-weight: 500; font-size: 13px; color: var(--yazi-2); }
.secenek:hover { border-color: var(--yazi-3); color: var(--yazi); }
.secenek.etkin { border-color: var(--marka); background: var(--marka-zemin); color: var(--marka); }

/* ---------- Form sayfası ---------- */
.form-grup { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--b-6); padding: var(--b-6) 0; border-bottom: 1px solid var(--cizgi); }
.form-grup:first-child { padding-top: 0; }
.form-grup:last-of-type { border-bottom: 0; }
.form-grup .aciklama { color: var(--yazi-2); font-size: 13px; margin-top: var(--b-1); }
.form-alt { display: flex; justify-content: flex-end; gap: var(--b-2); padding: var(--b-4) var(--b-5); border-top: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 0 0 var(--k-2) var(--k-2); position: sticky; bottom: 0; }
.uyari-kart { display: flex; gap: var(--b-3); padding: var(--b-3) var(--b-4); border-radius: var(--k-1); border: 1px solid; font-size: 13px; }
.uyari-kart .ik { margin-top: 2px; }
.uyari-kart.hata { background: var(--hata-zemin); border-color: color-mix(in srgb, var(--hata) 30%, transparent); color: var(--yazi); }
.uyari-kart.hata > .ik { color: var(--hata); }
.uyari-kart.uyari { background: var(--uyari-zemin); border-color: color-mix(in srgb, var(--uyari) 30%, transparent); color: var(--yazi); }
.uyari-kart.uyari > .ik { color: var(--uyari); }
.uyari-kart.bilgi { background: var(--bilgi-zemin); border-color: color-mix(in srgb, var(--bilgi) 25%, transparent); color: var(--yazi); }
.uyari-kart.bilgi > .ik { color: var(--bilgi); }
.uyari-kart.basari { background: var(--basari-zemin); border-color: color-mix(in srgb, var(--basari) 30%, transparent); }
.uyari-kart.basari > .ik { color: var(--basari); }
.uyari-kart ul { margin: var(--b-2) 0 0; padding: 0; list-style: none; }
.uyari-kart li { padding: 2px 0; }

/* ---------- Bant ---------- */
.bant { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-2) var(--b-4); border-radius: var(--k-2); border: 1px solid; font-size: 13px; min-height: 48px; }
.bant .esnek { min-width: 0; }
.bant.bilgi { background: var(--bilgi-zemin); border-color: color-mix(in srgb, var(--bilgi) 25%, transparent); }
.bant.bilgi > .ik { color: var(--bilgi); }
.bant.uyari { background: var(--uyari-zemin); border-color: color-mix(in srgb, var(--uyari) 30%, transparent); }
.bant.uyari > .ik { color: var(--uyari); }
.bant.hata { background: var(--hata-zemin); border-color: color-mix(in srgb, var(--hata) 30%, transparent); }
.bant.hata > .ik { color: var(--hata); }
.bant.basari { background: var(--basari-zemin); border-color: color-mix(in srgb, var(--basari) 30%, transparent); }
.bant.basari > .ik { color: var(--basari); }
.bant.notr { background: var(--yuzey-2); border-color: var(--cizgi); }

/* ---------- Liste (aktivite) ---------- */
.liste { list-style: none; margin: 0; padding: 0; }
.liste-oge { display: flex; align-items: center; gap: var(--b-3); padding: var(--b-3) var(--b-5); border-top: 1px solid var(--cizgi); min-height: 56px; }
.liste-oge:first-child { border-top: 0; }
.liste-oge:hover { background: var(--yuzey-2); }
.liste-oge .zaman { width: 52px; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.liste-oge .zaman small { display: block; font-weight: 400; color: var(--yazi-2); font-size: 12px; }
.liste-oge .govde { flex: 1; min-width: 0; }
.liste-oge .govde .ust-s { font-weight: 600; display: flex; gap: var(--b-2); align-items: center; min-width: 0; }
.liste-oge .govde .alt-s { font-size: 12px; line-height: 16px; color: var(--yazi-2); margin-top: 2px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.liste-oge .eylem { display: flex; gap: var(--b-1); align-items: center; }
.liste-oge.gecikmis { box-shadow: inset 3px 0 0 var(--hata); }
.liste-oge.gecikmis .zaman { color: var(--hata); }
.liste-oge.tamam .govde .ust-s { color: var(--yazi-2); }
.tip-ik { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--yuzey-3); color: var(--yazi-2); flex: none; }
.tip-ik.ziyaret { background: color-mix(in srgb, var(--gr-2) 12%, var(--yuzey)); color: var(--gr-2); }
.tip-ik.telefon { background: color-mix(in srgb, var(--gr-1) 12%, var(--yuzey)); color: var(--gr-1); }
.tip-ik.demo { background: color-mix(in srgb, var(--gr-4) 12%, var(--yuzey)); color: var(--gr-4); }
.tip-ik.toplanti { background: color-mix(in srgb, var(--gr-3) 14%, var(--yuzey)); color: var(--uyari); }
.tip-ik.eposta { background: color-mix(in srgb, var(--gr-6) 14%, var(--yuzey)); color: var(--gr-6); }
.tip-ik.uzaktan, .tip-ik.yerinde { background: color-mix(in srgb, var(--gr-5) 10%, var(--yuzey)); color: var(--gr-5); }
.grup-bas { display: flex; align-items: center; gap: var(--b-2); padding: var(--b-2) var(--b-5); background: var(--yuzey-2); border-top: 1px solid var(--cizgi); border-bottom: 1px solid var(--cizgi); font-size: 12px; font-weight: 600; color: var(--yazi-2); position: sticky; top: 0; }
.grup-bas.hata { color: var(--hata); }
.durum-nokta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; }
.durum-nokta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Grafik ---------- */
.grafik { width: 100%; position: relative; }
.grafik svg { display: block; overflow: visible; }
.grafik text { font-family: var(--yazi-tipi); font-size: 11px; fill: var(--yazi-3); font-variant-numeric: tabular-nums; }
.grafik .izgara-cizgi { stroke: var(--cizgi); stroke-width: 1; }
.grafik .eksen { stroke: var(--cizgi-2); }
.grafik .sutun { fill: var(--marka); transition: opacity .12s; }
.grafik .sutun.gelecek { fill: var(--yuzey-3); }
.grafik .sutun.hedef-ustu { fill: var(--marka); }
.grafik .hedef-cizgi { fill: none; stroke: var(--yazi-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.grafik .seri-cizgi { fill: none; stroke: var(--marka); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafik .seri-alan { fill: url(#alanGr); }
.grafik .hover-kolon { fill: transparent; cursor: default; }
.grafik .hover-kolon:hover { fill: color-mix(in srgb, var(--yazi-3) 10%, transparent); }
.grafik .nokta { fill: var(--yuzey); stroke: var(--marka); stroke-width: 2; }
.grafik .bugun-cizgi { stroke: var(--hata); stroke-width: 1; stroke-dasharray: 2 3; }
.lejant { display: flex; gap: var(--b-4); align-items: center; font-size: 12px; color: var(--yazi-2); flex-wrap: wrap; }
.lejant span { display: inline-flex; align-items: center; gap: 6px; }
.lejant i { width: 10px; height: 10px; border-radius: 3px; background: var(--marka); display: inline-block; }
.lejant i.kesik { height: 0; width: 14px; border-top: 2px dashed var(--yazi-2); border-radius: 0; background: none; }
.ipucu {
  position: fixed; z-index: 200; pointer-events: none; background: var(--ipucu-zemin); color: var(--ipucu-yazi); padding: var(--b-2) var(--b-3);
  border-radius: var(--k-1); font-size: 12px; line-height: 18px; box-shadow: var(--g-2); max-width: 280px; opacity: 0; transition: opacity .08s;
  font-variant-numeric: tabular-nums;
}
.ipucu.acik { opacity: 1; }
.ipucu b { font-weight: 600; }
.ipucu .s { display: flex; justify-content: space-between; gap: var(--b-4); }
.ipucu .s i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

/* Huni */
.huni { display: flex; flex-direction: column; gap: var(--b-2); }
.huni-satir { display: grid; grid-template-columns: 120px minmax(0, 1fr) 140px; align-items: center; gap: var(--b-3); cursor: pointer; border-radius: var(--k-1); padding: 2px 0; }
.huni-satir:hover .huni-cubuk i { filter: brightness(1.08); }
.huni-ad { display: flex; align-items: center; gap: var(--b-2); font-weight: 500; font-size: 13px; }
.huni-ad .sayi { margin-left: auto; }
.huni-cubuk { height: 28px; display: flex; justify-content: center; }
.huni-cubuk i { display: block; height: 100%; border-radius: 4px; background: var(--c); }
.huni-deger { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.huni-deger small { display: block; font-weight: 400; color: var(--yazi-2); font-size: 12px; line-height: 14px; }
.huni-donusum { display: grid; grid-template-columns: 120px minmax(0, 1fr) 140px; gap: var(--b-3); font-size: 11px; color: var(--yazi-3); margin: -4px 0; }
.huni-donusum span { text-align: center; }
.a-yeni { --c: var(--a-yeni); } .a-gor { --c: var(--a-gor); } .a-tek { --c: var(--a-tek); } .a-ona { --c: var(--a-ona); } .a-red { --c: var(--a-red); }
.asama-nokta { width: 8px; height: 8px; border-radius: 50%; background: var(--c); flex: none; }

/* ---------- Kanban ---------- */
.ozet-serit { display: flex; gap: 0; margin-bottom: var(--b-4); overflow-x: auto; }
.ozet-serit .oz { padding: var(--b-3) var(--b-5); border-left: 1px solid var(--cizgi); min-width: 180px; }
.ozet-serit .oz:first-child { border-left: 0; }
.ozet-serit .oz .d { font-size: 18px; line-height: 26px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 1fr); gap: var(--b-3); overflow-x: auto; padding-bottom: var(--b-3); align-items: start; }
.kolon { background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: var(--k-2); display: flex; flex-direction: column; min-height: 240px; max-height: calc(100vh - 280px); }
.kolon-bas { padding: var(--b-3); border-bottom: 1px solid var(--cizgi); }
.kolon-bas .ad { display: flex; align-items: center; gap: var(--b-2); font-weight: 600; }
.kolon-bas .toplam { font-size: 12px; color: var(--yazi-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.kolon-bas .cizgi { height: 3px; border-radius: 3px; background: var(--c); margin-top: var(--b-2); opacity: .9; }
.kolon-govde { padding: var(--b-2); display: flex; flex-direction: column; gap: var(--b-2); overflow-y: auto; flex: 1; transition: background .12s; border-radius: 0 0 var(--k-2) var(--k-2); }
.kolon.uzerinde .kolon-govde { background: color-mix(in srgb, var(--marka) 8%, transparent); outline: 2px dashed var(--marka); outline-offset: -4px; }
.kolon-bos { border: 1px dashed var(--cizgi-2); border-radius: var(--k-1); padding: var(--b-5) var(--b-3); text-align: center; color: var(--yazi-3); font-size: 12px; }
.fkart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 8px; padding: var(--b-3); cursor: grab; box-shadow: var(--g-1); transition: border-color .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 6px; }
.fkart:hover { border-color: var(--cizgi-2); box-shadow: var(--g-2); }
.fkart.surukleniyor { opacity: .45; }
.fkart .firma { font-size: 12px; color: var(--yazi-2); display: flex; align-items: center; gap: 6px; }
.fkart .bas { font-weight: 600; line-height: 18px; }
.fkart .tutar { font-weight: 650; font-variant-numeric: tabular-nums; }
.fkart .alt { display: flex; align-items: center; gap: var(--b-2); font-size: 12px; color: var(--yazi-2); }
.fkart .sonraki { border-top: 1px solid var(--cizgi); padding-top: var(--b-2); margin-top: 2px; font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--yazi-2); min-height: 22px; }
.fkart .sonraki { overflow: hidden; white-space: nowrap; }
.fkart .sonraki > * { flex-shrink: 0; }
.fkart .sonraki > .tek-satir { flex-shrink: 1; min-width: 0; }

/* ---------- Aşama çubuğu ---------- */
.asama-cubugu { display: flex; gap: 4px; }
.asama-adim {
  flex: 1; min-width: 0; height: 48px; display: flex; flex-direction: column; justify-content: center; padding: 0 var(--b-3) 0 var(--b-6);
  background: var(--yuzey-3); color: var(--yazi-2); border: 0; cursor: pointer; text-align: left;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.asama-adim:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); border-radius: 8px 0 0 8px; padding-left: var(--b-4); }
.asama-adim:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); border-radius: 0 8px 8px 0; }
.asama-adim .a { font-weight: 600; font-size: 13px; line-height: 18px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.asama-adim .g { font-size: 12px; line-height: 16px; opacity: .85; font-variant-numeric: tabular-nums; }
.asama-adim:hover { filter: brightness(.97); }
.asama-adim.gecti { background: color-mix(in srgb, var(--c) 14%, var(--yuzey)); color: var(--c); }
.asama-adim.simdi { background: var(--c); color: #fff; }
[data-tema="koyu"] .asama-adim.simdi { color: #0b1118; }

/* ---------- Detay ---------- */
.bas-bant { padding: var(--b-5); display: flex; gap: var(--b-4); align-items: flex-start; flex-wrap: wrap; }
.bas-bant .bilgi { flex: 1; min-width: 260px; }
.bas-bant .meta { display: flex; gap: var(--b-2) var(--b-4); flex-wrap: wrap; color: var(--yazi-2); font-size: 13px; margin-top: var(--b-2); align-items: center; }
.bas-bant .meta > span { display: inline-flex; align-items: center; gap: 6px; }
.bas-bant .eylemler { display: flex; gap: var(--b-2); }
.bas-bant .tutar-blok { display: flex; gap: var(--b-6); margin-top: var(--b-4); flex-wrap: wrap; }
.bas-bant .tutar-blok .d { font-size: 18px; line-height: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.ozet-hucre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ozet-hucre > div { padding: var(--b-3) var(--b-5); border-left: 1px solid var(--cizgi); min-width: 0; }
.ozet-hucre > div:first-child { border-left: 0; }
.ozet-hucre .d { font-weight: 650; font-size: 16px; line-height: 24px; margin-top: 2px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; min-width: 0; }
.bilgiler { position: sticky; top: calc(var(--ust-y) + var(--b-4)); }
.bilgi-alan { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--b-3); padding: 6px var(--b-2); margin: 0 calc(var(--b-2) * -1); border-radius: var(--k-1); align-items: start; font-size: 13px; }
.bilgi-alan:hover { background: var(--yuzey-2); }
.bilgi-alan .e { color: var(--yazi-2); }
.bilgi-alan .v { min-width: 0; display: flex; align-items: center; gap: 6px; word-break: break-word; }
.bilgi-alan .kopyala { opacity: 0; color: var(--yazi-3); cursor: pointer; border: 0; background: transparent; padding: 0; display: inline-grid; }
.bilgi-alan:hover .kopyala { opacity: 1; }

/* Zaman tüneli */
.tunel { list-style: none; margin: 0; padding: 0; position: relative; }
.tunel::before { content: ""; position: absolute; left: 15px; top: 8px; bottom: 8px; width: 1px; background: var(--cizgi); }
.tunel-oge { display: flex; gap: var(--b-3); padding: var(--b-2) 0 var(--b-4); position: relative; }
.tunel-oge .tip-ik { box-shadow: 0 0 0 4px var(--yuzey); z-index: 1; }
.tunel-oge .ic { flex: 1; min-width: 0; padding-top: 6px; }
.tunel-oge .ic .s1 { display: flex; gap: var(--b-2); align-items: center; flex-wrap: wrap; }
.tunel-oge .ic .z { margin-left: auto; color: var(--yazi-3); font-size: 12px; white-space: nowrap; }
.tunel-oge .not { margin-top: 6px; padding: var(--b-2) var(--b-3); background: var(--yuzey-2); border: 1px solid var(--cizgi); border-radius: 8px; color: var(--yazi); font-size: 13px; }
.tunel-ay { font-size: 12px; font-weight: 600; color: var(--yazi-3); padding: var(--b-2) 0 var(--b-2) 44px; }
.hizli-not { display: flex; gap: var(--b-2); align-items: flex-start; margin-bottom: var(--b-4); }
.hizli-not textarea { min-height: 40px; height: 40px; }

/* ---------- Çekmece, modal, açılır ---------- */
.perde { position: fixed; inset: 0; background: var(--perde); z-index: 90; opacity: 0; transition: opacity .18s; }
.perde.acik { opacity: 1; }
.cekmece {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(var(--cekmece), 100vw); background: var(--yuzey); z-index: 100;
  box-shadow: var(--g-3); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.2, .8, .2, 1);
  border-left: 1px solid var(--cizgi);
}
.cekmece.genis { width: min(var(--cekmece-genis), 100vw); }
.cekmece.acik { transform: none; }
.cekmece-bas { display: flex; align-items: flex-start; gap: var(--b-3); padding: var(--b-5) var(--b-6) var(--b-4); border-bottom: 1px solid var(--cizgi); }
.cekmece-bas .esnek .alt { color: var(--yazi-2); font-size: 13px; margin-top: 2px; }
.cekmece-govde { flex: 1; overflow-y: auto; padding: var(--b-5) var(--b-6); }
.cekmece-govde > * + * { margin-top: var(--b-4); }
.cekmece-alt { display: flex; align-items: center; justify-content: flex-end; gap: var(--b-2); padding: var(--b-4) var(--b-6); border-top: 1px solid var(--cizgi); background: var(--yuzey-2); }
.cekmece-alt .sol { margin-right: auto; display: flex; align-items: center; gap: var(--b-2); }
.bolum-bas { display: flex; align-items: center; gap: var(--b-2); font-size: 14px; font-weight: 600; margin-top: var(--b-6) !important; }
.modal { position: fixed; left: 50%; top: 18vh; transform: translateX(-50%) scale(.98); width: min(480px, calc(100vw - 32px)); background: var(--yuzey); border-radius: var(--k-2); box-shadow: var(--g-3); z-index: 110; opacity: 0; transition: opacity .15s, transform .15s; border: 1px solid var(--cizgi); }
.modal.acik { opacity: 1; transform: translateX(-50%) scale(1); }
.modal-govde { padding: var(--b-6); }
.modal-alt { display: flex; justify-content: flex-end; gap: var(--b-2); padding: var(--b-4) var(--b-6); border-top: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 0 0 var(--k-2) var(--k-2); }
.acilir { position: fixed; z-index: 120; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--k-2); box-shadow: var(--g-2); padding: var(--b-1); min-width: 200px; max-height: 60vh; overflow-y: auto; }
.acilir-oge { display: flex; align-items: center; gap: var(--b-2); width: 100%; height: 32px; padding: 0 var(--b-2); border: 0; background: transparent; border-radius: var(--k-1); cursor: pointer; text-align: left; color: var(--yazi); font-size: 13px; white-space: nowrap; }
.acilir-oge:hover, .acilir-oge.etkin { background: var(--yuzey-3); text-decoration: none; }
.acilir-oge .ik { color: var(--yazi-2); }
.acilir-oge .sag { margin-left: auto; color: var(--yazi-3); }
.acilir-oge.tehlike { color: var(--hata); }
.acilir-oge.tehlike .ik { color: var(--hata); }
.acilir-ayrac { height: 1px; background: var(--cizgi); margin: var(--b-1) 0; }
.acilir-baslik { font-size: 12px; color: var(--yazi-3); padding: 6px var(--b-2) 2px; font-weight: 500; }

/* Bildirim paneli */
.bildirim-panel { width: 400px; padding: 0; }
.bildirim-panel .bp-bas { display: flex; align-items: center; padding: var(--b-3) var(--b-4); border-bottom: 1px solid var(--cizgi); gap: var(--b-2); }
.bildirim { display: flex; gap: var(--b-3); padding: var(--b-3) var(--b-4); border-bottom: 1px solid var(--cizgi); cursor: pointer; position: relative; }
.bildirim:hover { background: var(--yuzey-2); }
.bildirim .metin { font-size: 13px; line-height: 18px; }
.bildirim .z { font-size: 12px; color: var(--yazi-3); margin-top: 2px; }
.bildirim.okunmamis::after { content: ""; position: absolute; right: var(--b-4); top: 18px; width: 8px; height: 8px; border-radius: 50%; background: var(--marka); }
.bildirim.okunmamis { padding-right: var(--b-8); }
.bildirim-panel .bp-alt { padding: var(--b-2); text-align: center; }

/* Komut paleti */
.palet { position: fixed; left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100vw - 24px)); background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; box-shadow: var(--g-3); z-index: 130; overflow: hidden; }
.palet-girdi { display: flex; align-items: center; gap: var(--b-3); padding: 0 var(--b-4); height: 56px; border-bottom: 1px solid var(--cizgi); }
.palet-girdi input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 16px; height: 100%; }
.palet-liste { max-height: 420px; overflow-y: auto; padding: var(--b-2); }
.palet-grup { font-size: 12px; color: var(--yazi-3); padding: var(--b-2) var(--b-2) var(--b-1); font-weight: 500; }
.palet-oge { display: flex; align-items: center; gap: var(--b-3); padding: 0 var(--b-2); height: 40px; border-radius: 8px; cursor: pointer; }
.palet-oge .alt { color: var(--yazi-2); font-size: 12px; margin-left: auto; white-space: nowrap; }
.palet-oge.etkin { background: var(--marka-zemin); }
.palet-oge.etkin .ok-tus { visibility: visible; }
.palet-alt { display: flex; gap: var(--b-4); padding: var(--b-2) var(--b-4); border-top: 1px solid var(--cizgi); background: var(--yuzey-2); color: var(--yazi-2); font-size: 12px; }
.palet-alt span { display: inline-flex; align-items: center; gap: 6px; }

/* Toast */
.toastlar { position: fixed; right: var(--b-6); bottom: var(--b-6); z-index: 150; display: flex; flex-direction: column; gap: var(--b-2); align-items: flex-end; }
.toast { display: flex; align-items: center; gap: var(--b-3); min-width: 300px; max-width: 420px; padding: var(--b-3) var(--b-4); border-radius: var(--k-2); background: var(--ipucu-zemin); color: var(--ipucu-yazi); box-shadow: var(--g-3); font-size: 13px; animation: toastGir .2s ease-out; }
.toast .ik { flex: none; }
.toast.basari .ik { color: #4ade80; } .toast.hata .ik { color: #f87171; } .toast.bilgi .ik { color: #60a5fa; }
[data-tema="koyu"] .toast.basari .ik { color: #15803d; } [data-tema="koyu"] .toast.hata .ik { color: #b91c1c; } [data-tema="koyu"] .toast.bilgi .ik { color: #1d4ed8; }
.toast .esnek { flex: 1; }
.toast button { border: 0; background: transparent; color: inherit; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 4px; text-decoration: underline; text-underline-offset: 2px; }
.toast.cikis { opacity: 0; transform: translateY(8px); transition: all .2s; }
@keyframes toastGir { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Durumlar ---------- */
.iskelet { background: linear-gradient(90deg, var(--iskelet-1) 25%, var(--iskelet-2) 50%, var(--iskelet-1) 75%); background-size: 200% 100%; animation: parla 1.4s infinite; border-radius: 4px; }
@keyframes parla { to { background-position: -200% 0; } }
.bos { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--b-10) var(--b-6); gap: var(--b-2); }
.bos .simge { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--yuzey-3); color: var(--yazi-2); margin-bottom: var(--b-2); }
.bos .simge.hata { background: var(--hata-zemin); color: var(--hata); }
.bos p { margin: 0 0 var(--b-2); color: var(--yazi-2); max-width: 360px; }
.yok-sayfa { min-height: calc(100vh - 160px); display: grid; place-items: center; }
.yok-sayfa .kod { font-size: 64px; line-height: 72px; font-weight: 700; letter-spacing: -0.04em; color: var(--yazi-3); }

/* ---------- Takvim ---------- */
.takvim-yer { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--b-4); align-items: start; }
.takvim-arac { display: flex; align-items: center; gap: var(--b-2); margin-bottom: var(--b-3); flex-wrap: wrap; }
.takvim-arac .donem-ad { font-weight: 650; font-size: 16px; margin-left: var(--b-2); }
.takvim { overflow: auto; max-height: calc(100vh - 220px); }
.takvim-izgara { display: grid; min-width: 760px; position: relative; }
.tk-bas { position: sticky; top: 0; z-index: 3; background: var(--yuzey); border-bottom: 1px solid var(--cizgi); padding: var(--b-2); text-align: center; font-size: 12px; color: var(--yazi-2); }
.tk-bas b { display: block; font-size: 18px; line-height: 24px; color: var(--yazi); font-weight: 600; font-variant-numeric: tabular-nums; }
.tk-bas.bugun b { color: var(--marka-uzeri); background: var(--marka); width: 32px; height: 32px; line-height: 32px; border-radius: 50%; margin: 2px auto 0; font-size: 15px; }
.tk-bas.hs { color: var(--yazi-3); }
.tk-saatler { position: relative; }
.tk-saat { height: 48px; font-size: 11px; color: var(--yazi-3); text-align: right; padding-right: var(--b-2); transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.tk-gun { position: relative; border-left: 1px solid var(--cizgi); background-image: repeating-linear-gradient(to bottom, var(--cizgi) 0, var(--cizgi) 1px, transparent 1px, transparent 48px); cursor: cell; }
.tk-gun.hs { background-color: var(--yuzey-2); }
.tk-gun.bugun { background-color: color-mix(in srgb, var(--marka) 4%, transparent); }
.tk-olay {
  position: absolute; left: 3px; right: 3px; border-radius: 6px; padding: 3px 6px; font-size: 12px; line-height: 15px; overflow: hidden; cursor: pointer;
  background: color-mix(in srgb, var(--c) 14%, var(--yuzey)); color: var(--yazi); border-left: 3px solid var(--c); z-index: 1;
}
.tk-olay:hover { box-shadow: var(--g-2); z-index: 2; }
.tk-olay .b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-olay .s { color: var(--yazi-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-olay.gecikmis { box-shadow: inset 0 0 0 1.5px var(--hata); }
.tk-olay.tamam { opacity: .55; }
.tk-olay.dolu { background: repeating-linear-gradient(135deg, var(--yuzey-3) 0 6px, var(--yuzey-2) 6px 12px); border-left-color: var(--yazi-3); color: var(--yazi-2); cursor: default; }
.tk-simdi { position: absolute; left: 0; right: 0; height: 2px; background: var(--hata); z-index: 2; }
.tk-simdi::before { content: ""; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--hata); }
.tk-ay { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); min-width: 700px; }
.tk-ay-gun { min-height: 112px; border-left: 1px solid var(--cizgi); border-top: 1px solid var(--cizgi); padding: 6px; font-size: 12px; }
.tk-ay-gun .n { font-weight: 600; font-variant-numeric: tabular-nums; margin-bottom: 4px; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.tk-ay-gun.diger { background: var(--yuzey-2); color: var(--yazi-3); }
.tk-ay-gun.bugun .n { background: var(--marka); color: var(--marka-uzeri); }
.tk-ay-olay { display: flex; align-items: center; gap: 4px; padding: 1px 4px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.tk-ay-olay:hover { background: var(--yuzey-3); }
.tk-ay-olay::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); flex: none; }
.kisi-sec { display: flex; align-items: center; gap: var(--b-2); padding: 6px var(--b-2); border-radius: var(--k-1); cursor: pointer; font-size: 13px; }
.kisi-sec:hover { background: var(--yuzey-2); }
.kisi-sec input { accent-color: var(--c); width: 16px; height: 16px; margin: 0; }
.mini-ay { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
.mini-ay span { height: 28px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; }
.mini-ay span:hover { background: var(--yuzey-3); }
.mini-ay .g { color: var(--yazi-3); cursor: default; }
.mini-ay .g:hover { background: none; }
.mini-ay .d { color: var(--yazi-3); }
.mini-ay .bugun { background: var(--marka); color: var(--marka-uzeri); font-weight: 600; }
.mini-ay .hafta { background: var(--marka-zemin); color: var(--marka); }

/* İzin matrisi */
.matris td.hucre { text-align: center; padding: 0 var(--b-2); }
.matris .kapsam { height: 24px; font-size: 12px; border: 1px solid var(--cizgi-2); border-radius: 4px; background: var(--yuzey); padding: 0 4px; margin-left: 4px; }
.matris .kapsam[disabled] { opacity: .35; }
.matris .hucre-ic { display: inline-flex; align-items: center; }
.rol-liste .acilir-oge { height: 44px; }
.rol-liste .acilir-oge small { display: block; color: var(--yazi-2); font-size: 12px; }

/* Ayar kalıbı */
.ayar-yer { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--b-5); align-items: start; }
.alt-menu { display: flex; flex-direction: column; gap: 2px; }
.alt-menu a { display: flex; align-items: center; gap: var(--b-2); height: 32px; padding: 0 var(--b-3); border-radius: var(--k-1); color: var(--yazi-2); font-weight: 500; cursor: pointer; }
.alt-menu a:hover { background: var(--yuzey-3); color: var(--yazi); text-decoration: none; }
.alt-menu a.etkin { background: var(--marka-zemin); color: var(--marka); }
.agac-ac { width: 20px; height: 20px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--yazi-2); cursor: pointer; border-radius: 4px; padding: 0; }

/* Sayaç kartları */
.sayac-serit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--b-3); margin-bottom: var(--b-4); }
.sayac { padding: var(--b-3) var(--b-4); cursor: pointer; display: flex; align-items: center; gap: var(--b-3); border-width: 1px; }
.sayac:hover { border-color: var(--cizgi-2); }
.sayac.etkin { border-color: var(--marka); box-shadow: 0 0 0 1px var(--marka); }
.sayac .d { font-size: 22px; line-height: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }
.sayac .tip-ik { width: 36px; height: 36px; }
.sayac.hata .d { color: var(--hata); }

/* Halka */
.halka-yer { display: flex; align-items: center; gap: var(--b-6); flex-wrap: wrap; }
.halka-lejant { display: flex; flex-direction: column; gap: var(--b-2); flex: 1; min-width: 200px; font-size: 13px; }
.halka-lejant .s { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto auto; gap: var(--b-2); align-items: center; font-variant-numeric: tabular-nums; }
.halka-lejant .s i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }

/* ---------- Giriş ---------- */
.giris { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--yuzey); }
.giris-sol { display: flex; flex-direction: column; padding: var(--b-8) var(--b-10); }
.giris-form { width: 100%; max-width: 380px; margin: auto; }
.giris-form .alan + .alan { margin-top: var(--b-4); }
.giris-sag { background: var(--marka); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--b-10); color: #fff; }
[data-tema="koyu"] .giris-sag { background: #102a45; }
.giris-sag svg.desen { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .16; }
.giris-sag .soz { position: relative; max-width: 440px; }
.giris-sag .soz h2 { font-size: 28px; line-height: 36px; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 var(--b-3); }
.giris-sag .soz p { margin: 0; opacity: .85; font-size: 15px; line-height: 24px; }
.giris-sag .rozetler { display: flex; gap: var(--b-2); margin-top: var(--b-6); flex-wrap: wrap; }
.giris-sag .rozetler span { border: 1px solid rgb(255 255 255 / .3); border-radius: 999px; padding: 4px 12px; font-size: 12px; background: rgb(255 255 255 / .08); }
.sifre-alan { position: relative; }
.sifre-alan .girdi { padding-right: 44px; }
.sifre-alan button { position: absolute; right: 4px; top: 4px; }

/* ---------- Mobil önizleme ---------- */
.tel-sira { display: flex; gap: var(--b-8); overflow-x: auto; padding: var(--b-2) var(--b-1) var(--b-6); align-items: flex-start; }
.tel-sutun { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--b-3); }
.tel-sutun .etk { font-weight: 600; font-size: 13px; color: var(--yazi-2); }
.tel { width: 414px; height: 868px; border-radius: 56px; padding: 12px; background: #0b0f14; box-shadow: var(--g-3), inset 0 0 0 2px #2a313a; flex: none; }
.tel-ekran { width: 390px; height: 844px; border-radius: 44px; overflow: hidden; background: var(--zemin); position: relative; display: flex; flex-direction: column; }
.tel-durum { height: 50px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 6px 32px 0; font-weight: 600; font-size: 15px; background: var(--yuzey); }
.tel-durum .ada { width: 120px; height: 34px; border-radius: 20px; background: #0b0f14; }
.tel-durum .sim { display: flex; gap: 6px; align-items: center; }
.tel-bas { background: var(--yuzey); padding: var(--b-2) var(--b-4) var(--b-3); border-bottom: 1px solid var(--cizgi); flex: none; }
.tel-bas h3 { margin: 0; font-size: 20px; line-height: 28px; font-weight: 650; letter-spacing: -0.01em; }
.tel-bas .ust-sat { display: flex; align-items: center; gap: var(--b-2); min-height: 44px; }
.tel-govde { flex: 1; overflow-y: auto; padding: var(--b-4); display: flex; flex-direction: column; gap: var(--b-3); }
.tel-kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: var(--b-3) var(--b-4); }
.tel-kart.gecikmis { border-color: color-mix(in srgb, var(--hata) 45%, var(--cizgi)); box-shadow: inset 3px 0 0 var(--hata); }
.tel-sekme { height: 84px; flex: none; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--yuzey); border-top: 1px solid var(--cizgi); padding: 6px 4px 28px; }
.tel-sekme a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--yazi-3); min-height: 44px; }
.tel-sekme a.etkin { color: var(--marka); }
.tel-sekme a .ik { width: 22px; height: 22px; }
.tel-sekme .arti { width: 48px; height: 48px; border-radius: 16px; background: var(--marka); color: var(--marka-uzeri); display: grid; place-items: center; margin-top: -4px; box-shadow: var(--g-2); }
.tel-sekme .arti .ik { width: 24px; height: 24px; }
.tel-dugme { height: 44px; border-radius: 10px; font-size: 15px; width: 100%; }
.tel-eylem-cubuk { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--b-2); }
.tel-eylem-cubuk a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--b-2) 0; border-radius: 12px; background: var(--marka-zemin); color: var(--marka); font-size: 12px; font-weight: 600; min-height: 60px; justify-content: center; }
.tel-alt-sayfa { position: absolute; left: 0; right: 0; bottom: 0; background: var(--yuzey); border-radius: var(--k-3) var(--k-3) 0 0; box-shadow: var(--g-3); padding: var(--b-2) var(--b-4) var(--b-8); z-index: 5; transform: translateY(105%); transition: transform .22s; }
.tel-alt-sayfa.acik { transform: none; }
.tel-alt-sayfa .tutamak { width: 36px; height: 5px; border-radius: 3px; background: var(--cizgi-2); margin: 0 auto var(--b-3); }
.tel-perde { position: absolute; inset: 0; background: var(--perde); z-index: 4; opacity: 0; pointer-events: none; transition: opacity .2s; }
.tel-perde.acik { opacity: 1; pointer-events: auto; }
.tel-serit { background: var(--uyari-zemin); color: var(--uyari); padding: var(--b-2) var(--b-4); font-size: 13px; font-weight: 500; display: flex; gap: var(--b-2); align-items: center; border-bottom: 1px solid color-mix(in srgb, var(--uyari) 30%, transparent); }
.tel .girdi { height: 44px; font-size: 15px; }
.tel .secenek { height: 36px; }
.tel-asama { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tel-asama .asama-adim { flex: none; min-width: 120px; height: 44px; }

/* ---------- Tasarım sayfası ---------- */
.katalog-blok { display: flex; flex-wrap: wrap; gap: var(--b-3); align-items: center; }
.renk-ornek { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--b-3); }
.renk-ornek div { border: 1px solid var(--cizgi); border-radius: 8px; overflow: hidden; font-size: 12px; }
.renk-ornek div i { display: block; height: 40px; background: var(--c); }
.renk-ornek div span { display: block; padding: 6px 8px; }

/* ---------- Duyarlı ---------- */
@media (max-width: 1280px) {
  .kpi-serit.alti { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pano-kolon { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .detay-izgara { grid-template-columns: minmax(0, 1fr); }
  .bilgiler { position: static; }
  .kpi-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iki-kolon { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1024px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .yan { position: fixed; left: 0; top: 0; bottom: 0; width: 280px; transform: translateX(-100%); transition: transform .22s; box-shadow: var(--g-3); z-index: 95; }
  .kabuk.menu-acik .yan { transform: none; }
  .hamburger { display: inline-flex; }
  .arama-dugme { width: 36px; padding: 0; justify-content: center; }
  .arama-dugme .yazi, .arama-dugme .tus { display: none; }
  .takvim-yer { grid-template-columns: minmax(0, 1fr); }
  .takvim-yan { display: none; }
  .ayar-yer { grid-template-columns: minmax(0, 1fr); }
  .alt-menu { flex-direction: row; overflow-x: auto; }
  .form-grup { grid-template-columns: minmax(0, 1fr); gap: var(--b-3); }
}
@media (max-width: 720px) {
  .ust { padding: 0 var(--b-3); gap: var(--b-2); }
  .yol { display: none; }
  .rol-sec .etk { display: none; }
  .rol-sec select { max-width: 120px; }
  .ust .yeni-yazi { display: none; }
  .icerik { padding: var(--b-4); }
  .baslik-1 { font-size: 20px; line-height: 28px; }
  .kpi-deger { font-size: 22px; line-height: 28px; }
  .kpi-serit.alti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: var(--b-3) var(--b-4); }
  .kivilcim { display: none; }
  .form-izgara { grid-template-columns: minmax(0, 1fr); }
  .ozet-hucre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ozet-hucre > div:nth-child(3) { border-left: 0; }
  .ozet-hucre > div:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .sayac-serit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arama-alan { width: 100%; }
  .suzgec .sag-eylem { margin-left: 0; }
  .huni-satir, .huni-donusum { grid-template-columns: 96px minmax(0, 1fr) 104px; gap: var(--b-2); }
  .giris { grid-template-columns: minmax(0, 1fr); }
  .giris-sag { display: none; }
  .giris-sol { padding: var(--b-6) var(--b-5); }
  .toastlar { left: var(--b-3); right: var(--b-3); top: var(--b-3); bottom: auto; align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
  .bildirim-panel { width: calc(100vw - 24px); }
  .liste-oge { padding: var(--b-3) var(--b-4); flex-wrap: wrap; }
  .liste-oge .eylem { width: 100%; justify-content: flex-end; }
  .cekmece-bas, .cekmece-govde { padding-left: var(--b-4); padding-right: var(--b-4); }
  .cekmece-alt { padding: var(--b-3) var(--b-4); }
  .bas-bant .eylemler { width: 100%; }
  .tel { zoom: .86; }
  .asama-cubugu { overflow-x: auto; }
  .asama-adim { flex: none; min-width: 132px; }
  .tablo th:first-child, .tablo td:first-child { padding-left: var(--b-4); }
  .tablo th:last-child, .tablo td:last-child { padding-right: var(--b-4); }
  .kart-bas { padding: var(--b-3) var(--b-4); flex-wrap: wrap; }
  .kart-govde { padding: var(--b-4); }
  .grup-bas { padding: var(--b-2) var(--b-4); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }