/* LİHKAB ofis ekranları. Renk ve yazı değişkenleri tema.css'ten; burada yalnız ofise özgü
   değişkenler (aralık, köşe, gölge, durum renkleri) tanımlanır. Dış kaynak yok. */

:root {
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 20px; --a-6: 24px; --a-7: 32px; --a-8: 48px;
  --k-1: 6px; --k-2: 8px; --k-3: 12px; --k-4: 16px;
  --golge-1: 0 1px 2px rgb(30 25 20 / 0.05);
  --golge-2: 0 1px 2px rgb(30 25 20 / 0.04), 0 4px 14px rgb(30 25 20 / 0.06);
  --golge-3: 0 24px 60px rgb(20 15 10 / 0.22), 0 2px 6px rgb(20 15 10 / 0.08);
  --kenar-gen: 252px;
  --ust-yuk: 60px;
  --vurgu-acik: color-mix(in srgb, var(--vurgu) 12%, transparent);
  --vurgu-hafif: color-mix(in srgb, var(--vurgu) 6%, var(--yuzey));
  --uzerinde: color-mix(in srgb, var(--metin) 5%, transparent);
  --basari: #1c7a47; --basari-zemin: #e5f3ea;
  --dikkat: #9a5b00; --dikkat-zemin: #fcf1dc;
  --d-yeni: #2a64a8; --d-yeni-z: #e6eef8;
  --d-sahada: #9a5b00; --d-sahada-z: #fcf0da;
  --d-hazir: #1c7a47; --d-hazir-z: #e3f2e8;
  --d-teslim: #5d5a6e; --d-teslim-z: #ecebf1;
  --d-iptal: #b42318; --d-iptal-z: #fbe9e7;
  --odak: 0 0 0 3px color-mix(in srgb, var(--vurgu) 35%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="light"]) {
    --golge-1: 0 1px 2px rgb(0 0 0 / 0.3);
    --golge-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);
    --golge-3: 0 24px 60px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3);
    --basari: #5cc98b; --basari-zemin: #173324;
    --dikkat: #e8b04c; --dikkat-zemin: #382a12;
    --d-yeni: #7fb0ec; --d-yeni-z: #172a40;
    --d-sahada: #e8b04c; --d-sahada-z: #382a12;
    --d-hazir: #5cc98b; --d-hazir-z: #173324;
    --d-teslim: #b1aec4; --d-teslim-z: #2a2933;
    --d-iptal: #ff8a7a; --d-iptal-z: #3a1d19;
  }
}
:root[data-tema="dark"] {
  --golge-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --golge-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.25);
  --golge-3: 0 24px 60px rgb(0 0 0 / 0.55), 0 2px 6px rgb(0 0 0 / 0.3);
  --basari: #5cc98b; --basari-zemin: #173324;
  --dikkat: #e8b04c; --dikkat-zemin: #382a12;
  --d-yeni: #7fb0ec; --d-yeni-z: #172a40;
  --d-sahada: #e8b04c; --d-sahada-z: #382a12;
  --d-hazir: #5cc98b; --d-hazir-z: #173324;
  --d-teslim: #b1aec4; --d-teslim-z: #2a2933;
  --d-iptal: #ff8a7a; --d-iptal-z: #3a1d19;
}

/* ---------- Temel */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.ofis {
  margin: 0; min-height: 100vh; background: var(--zemin); color: var(--metin);
  font: 14px/1.5 var(--yazi); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
h2 { font-size: 22px; }
h3 { font-size: 15px; }
p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--vurgu); outline-offset: 2px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.soluk { color: var(--soluk); }
.sayisal, .veri-tablosu td, .istatistik-sayi { font-variant-numeric: tabular-nums; }
.kucuk-yazi { font-size: 12px; }
.sabit-yazi { font-family: var(--sabit); }
.tehlike-metin { color: var(--uyari) !important; }
.noscript { padding: var(--a-6); text-align: center; }

.ikon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.marka-isaret { width: 28px; height: 28px; flex: none; fill: none; stroke: var(--vurgu); stroke-width: 2.6; stroke-linejoin: round; }
.marka-isaret circle { fill: var(--vurgu); stroke: none; }

.atla { position: absolute; left: var(--a-3); top: -60px; z-index: 100; background: var(--vurgu); color: var(--vurgu-metin); padding: var(--a-2) var(--a-3); border-radius: var(--k-1); }
.atla:focus { top: var(--a-3); }

/* ---------- Düğmeler */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px; border-radius: var(--k-2);
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin);
  font-weight: 550; text-decoration: none; white-space: nowrap; box-shadow: var(--golge-1);
  transition: background-color .15s, border-color .15s, box-shadow .15s, transform .05s;
}
.dugme:hover:not(:disabled) { background: var(--yuzey-2); border-color: color-mix(in srgb, var(--soluk) 50%, var(--cizgi)); }
.dugme:active:not(:disabled) { transform: translateY(1px); }
.dugme:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.dugme .ikon { width: 16px; height: 16px; }
.dugme.birincil { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); }
.dugme.birincil:hover:not(:disabled) { background: color-mix(in srgb, var(--vurgu) 88%, #000); border-color: color-mix(in srgb, var(--vurgu) 88%, #000); }
.dugme.tehlikeli { background: var(--uyari); border-color: var(--uyari); color: #fff; }
.dugme.tehlikeli:hover:not(:disabled) { background: color-mix(in srgb, var(--uyari) 88%, #000); }
.dugme.sade { background: transparent; border-color: transparent; box-shadow: none; }
.dugme.sade:hover:not(:disabled) { background: var(--uzerinde); border-color: transparent; }
.dugme.kucuk { height: 30px; padding: 0 10px; font-size: 13px; border-radius: var(--k-1); }
.dugme.buyuk { height: 44px; font-size: 15px; }
.dugme.tam { width: 100%; }
.dugme[aria-busy="true"]:not(.mesgul-dugme), label.dugme.mesgul { position: relative; color: transparent !important; pointer-events: none; }
.dugme[aria-busy="true"]:not(.mesgul-dugme)::after, label.dugme.mesgul::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--soluk); border-top-color: transparent;
  animation: don .7s linear infinite;
}
.dugme.birincil[aria-busy="true"]::after { border-color: var(--vurgu-metin); border-top-color: transparent; }
/* Meşgul düğme: içinde dönen simge ve metin ("İndiriliyor…") */
.mesgul-dugme { pointer-events: none; cursor: progress; }
.dugme.mesgul-dugme:disabled, .dugme.mesgul-dugme[aria-disabled="true"] { opacity: .8; }
.mesgul-dugme .donen { width: 14px; height: 14px; border-width: 2px; flex: none; }
.dugme.birincil.mesgul-dugme .donen { border-color: color-mix(in srgb, var(--vurgu-metin) 35%, transparent); border-top-color: var(--vurgu-metin); }
.dugme.kopyalandi { color: var(--basari); border-color: color-mix(in srgb, var(--basari) 40%, var(--cizgi)); background: var(--basari-zemin); }
.ikon-dugme.kopyalandi { color: var(--basari); }
.ikon-dugme {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0;
  border: 0; border-radius: var(--k-2); background: transparent; color: var(--soluk); text-decoration: none;
  transition: background-color .15s, color .15s;
}
.ikon-dugme:hover { background: var(--uzerinde); color: var(--metin); }
.ikon-dugme.kucuk { width: 30px; height: 30px; border-radius: var(--k-1); }
.ikon-dugme.kucuk .ikon { width: 16px; height: 16px; }
.bag { display: inline-flex; align-items: center; gap: 2px; color: var(--vurgu); text-decoration: none; font-weight: 550; font-size: 13px; }
.bag:hover { text-decoration: underline; }
.bag .ikon { width: 14px; height: 14px; }

.donen { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cizgi); border-top-color: var(--vurgu); animation: don .7s linear infinite; }
@keyframes don { to { transform: rotate(360deg); } }

/* ---------- Rozetler */
.rozet {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--yuzey-2); color: var(--soluk);
  border: 1px solid var(--cizgi);
}
.rozet.kucuk { height: 18px; padding: 0 6px; font-size: 11px; font-weight: 550; }
.rozet.vurgu { background: var(--vurgu-acik); color: var(--vurgu); border-color: transparent; }
.rozet.basari { background: var(--basari-zemin); color: var(--basari); border-color: transparent; }
.rozet.uyari { background: var(--dikkat-zemin); color: var(--dikkat); border-color: transparent; }
.rozet > i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.durum-yeni { --d: var(--d-yeni); --dz: var(--d-yeni-z); }
.durum-sahada { --d: var(--d-sahada); --dz: var(--d-sahada-z); }
.durum-hazir { --d: var(--d-hazir); --dz: var(--d-hazir-z); }
.durum-teslim { --d: var(--d-teslim); --dz: var(--d-teslim-z); }
.durum-iptal { --d: var(--d-iptal); --dz: var(--d-iptal-z); }
.rozet[class*="durum-"] { background: var(--dz); color: var(--d); border-color: transparent; }

.avatar {
  display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%;
  background: var(--vurgu-acik); color: var(--vurgu); font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.avatar.kucuk { width: 28px; height: 28px; font-size: 11px; }
.avatar.buyuk { width: 56px; height: 56px; font-size: 19px; }
.kim { display: flex; flex-direction: column; min-width: 0; }
.kim b, .kim a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kim a { text-decoration: none; }
.kim a:hover b { text-decoration: underline; }
.kim small { color: var(--soluk); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.kisi { display: flex; align-items: center; gap: var(--a-3); min-width: 0; }
.kisi.buyuk { gap: var(--a-4); }
.kisi.buyuk h2 { font-size: 22px; }
.kisi-hucre { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }

/* ---------- Açılış */
.acilis { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: var(--a-4); }
.acilis .marka-isaret { width: 44px; height: 44px; }

/* ---------- Çerçeve */
.kabuk { display: grid; grid-template-columns: var(--kenar-gen) minmax(0, 1fr); min-height: 100vh; }
.kenar {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: var(--a-2);
  background: var(--yuzey); border-right: 1px solid var(--cizgi); padding: var(--a-4) var(--a-3); z-index: 30;
}
.kenar-marka { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; }
.kenar-marka b { display: block; letter-spacing: .08em; font-size: 15px; }
.kenar-marka small { display: block; color: var(--soluk); font-size: 12px; margin-top: -2px; }
.kenar-menu { display: flex; flex-direction: column; gap: 2px; }
.kenar-menu a {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--k-2);
  color: var(--soluk); text-decoration: none; font-weight: 550; position: relative;
}
.kenar-menu a:hover { background: var(--uzerinde); color: var(--metin); }
.kenar-menu a[aria-current="page"] { background: var(--vurgu-acik); color: var(--vurgu); }
.kenar-menu a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vurgu); }
.kenar-yeni { display: none; padding: var(--a-2) 0; }
.kenar-alt { margin-top: auto; display: flex; flex-direction: column; gap: var(--a-3); }
.kenar-buro { padding: 12px; border-radius: var(--k-3); background: var(--yuzey-2); border: 1px solid var(--cizgi); display: flex; flex-direction: column; min-width: 0; }
.kenar-buro small { color: var(--soluk); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.kenar-buro b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kenar-buro span { color: var(--soluk); font-size: 12px; font-variant-numeric: tabular-nums; }
.kenar-kullanici { display: flex; align-items: center; gap: 8px; padding: 4px; min-width: 0; }
.kenar-kullanici .kim { flex: 1; }
.kenar-kullanici .kim b { font-size: 13px; }
.kenar-kullanici .ikon-dugme { width: 32px; height: 32px; }
.perde { position: fixed; inset: 0; z-index: 25; background: rgb(10 8 6 / 0.45); }

.ana { min-width: 0; display: flex; flex-direction: column; }
.ust-cubuk {
  position: sticky; top: 0; z-index: 20; height: var(--ust-yuk); display: flex; align-items: center; gap: var(--a-3);
  padding: 0 var(--a-7); background: color-mix(in srgb, var(--zemin) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--cizgi) 70%, transparent);
}
.menu-dugme { display: none; margin-left: -8px; }
.sayfa-basligi { font-size: 15px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ust-sag { display: flex; align-items: center; gap: var(--a-2); }
.icerik { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--a-6) var(--a-7) var(--a-8); outline: none; }
.sayfa { display: flex; flex-direction: column; gap: var(--a-6); animation: belir .2s ease-out; }
@keyframes belir { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Sayfa başı */
.sayfa-ust { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--a-4); flex-wrap: wrap; }
.sayfa-ust > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sayfa-eylem { display: flex; gap: var(--a-2); flex-wrap: wrap; }
.selam { font-size: 24px; }
.kirinti { display: flex; align-items: center; gap: 4px; color: var(--soluk); font-size: 13px; margin-bottom: 2px; }
.kirinti a { color: var(--soluk); text-decoration: none; }
.kirinti a:hover { color: var(--metin); text-decoration: underline; }
.kirinti .ikon { width: 14px; height: 14px; }
.bolum { display: flex; flex-direction: column; gap: var(--a-3); }
.bolum-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: var(--a-3); }

/* ---------- Kartlar */
.kart {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--k-3);
  box-shadow: var(--golge-1); padding: var(--a-5);
}
.kart-baslik { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); margin-bottom: var(--a-4); flex-wrap: wrap; }
.kart-baslik h3 { display: flex; align-items: center; gap: 8px; }
.kart-baslik h3 .ikon { color: var(--soluk); }
.kart-baslik h3 .soluk { font-weight: 500; }
.kart-alt { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); margin-top: var(--a-4); padding-top: var(--a-4); border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.tablo-karti { padding: 0; overflow: hidden; }
.tablo-karti > .kart-baslik { padding: var(--a-4) var(--a-5) 0; margin-bottom: var(--a-3); }
.izgara-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-4); }
.izgara-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
.izgara-ay { display: grid; grid-template-columns: 2fr 1fr; gap: var(--a-4); }
.iki-sutun { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--a-5); align-items: start; }
.iki-sutun.esit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sutun-ana, .sutun-yan { display: flex; flex-direction: column; gap: var(--a-5); min-width: 0; }

/* ---------- Pano */
.istatistik { display: flex; flex-direction: column; gap: 6px; text-decoration: none; position: relative; overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.istatistik::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--d); opacity: .85; }
.istatistik:hover { border-color: color-mix(in srgb, var(--d) 45%, var(--cizgi)); box-shadow: var(--golge-2); transform: translateY(-1px); }
.istatistik-ust { display: flex; align-items: center; gap: 8px; color: var(--soluk); font-weight: 550; font-size: 13px; }
.istatistik-simge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--k-2); background: var(--dz); color: var(--d); }
.istatistik-simge .ikon { width: 16px; height: 16px; }
.istatistik-sayi { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.istatistik small { color: var(--soluk); font-size: 12px; }
.dagilim { display: flex; height: 8px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--yuzey-2); }
.dagilim span { background: var(--d); min-width: 4px; }
.olcutler { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); margin: 0; }
.olcutler > div { padding-left: var(--a-4); border-left: 1px solid var(--cizgi); }
.olcutler > div:first-child { padding-left: 0; border-left: 0; }
.olcutler dt { color: var(--soluk); font-size: 13px; }
.olcutler dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bekleyen-karti { display: flex; flex-direction: column; gap: 4px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.bekleyen-karti:hover { box-shadow: var(--golge-2); border-color: color-mix(in srgb, var(--vurgu) 40%, var(--cizgi)); }
.bekleyen-karti .kart-baslik { margin-bottom: var(--a-2); }
.bekleyen-karti .kart-baslik .ikon { color: var(--soluk); }
.bekleyen-karti.var { background: var(--vurgu-hafif); border-color: color-mix(in srgb, var(--vurgu) 30%, var(--cizgi)); }
.bekleyen-karti.var .istatistik-sayi { color: var(--vurgu); }
.ilk-adimlar { background: linear-gradient(135deg, var(--vurgu-hafif), var(--yuzey) 60%); border-color: color-mix(in srgb, var(--vurgu) 25%, var(--cizgi)); }
.ilk-adimlar-ust { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: var(--a-5); }
.ilk-adimlar-ust h3 { font-size: 18px; }
.adimlar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--a-3); }
.adimlar li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--a-4); border-radius: var(--k-3); background: var(--yuzey); border: 1px solid var(--cizgi); }
.adimlar li > div { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; flex: 1; }
.adimlar li p { color: var(--soluk); font-size: 13px; flex: 1; }
.adim-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--vurgu); color: var(--vurgu-metin); font-weight: 700; font-size: 13px; }
.adimlar li.tamam .adim-no { background: var(--basari); color: #fff; }
.adimlar li.tamam b { color: var(--soluk); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--soluk) 50%, transparent); }
.adim-simge { position: absolute; right: var(--a-4); top: var(--a-4); color: color-mix(in srgb, var(--soluk) 45%, transparent); }
.adim-simge .ikon { width: 22px; height: 22px; }

/* ---------- Tablolar */
.tablo-kap { overflow-x: auto; }
.veri-tablosu { width: 100%; border-collapse: collapse; }
.veri-tablosu th {
  text-align: left; font-size: 12px; font-weight: 600; color: var(--soluk); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px var(--a-4); background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); white-space: nowrap;
}
.veri-tablosu td { padding: 12px var(--a-4); border-bottom: 1px solid var(--cizgi); vertical-align: middle; }
.veri-tablosu th:first-child, .veri-tablosu td:first-child { padding-left: var(--a-5); }
.veri-tablosu th:last-child, .veri-tablosu td:last-child { padding-right: var(--a-5); }
.veri-tablosu tbody tr:last-child td { border-bottom: 0; }
.veri-tablosu .sag { text-align: right; }
.veri-tablosu.tikla tbody tr[data-href] { cursor: pointer; transition: background-color .1s; }
.veri-tablosu.tikla tbody tr[data-href]:hover { background: var(--vurgu-hafif); }
.veri-tablosu tr.pasif td { color: var(--soluk); }
.veri-tablosu tr.pasif .avatar { filter: grayscale(1); opacity: .6; }
.sutun-no { white-space: nowrap; }
.satir-baglanti { font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.satir-baglanti:hover { color: var(--vurgu); text-decoration: underline; }
.baslik-hucre { font-weight: 550; }
.veri-tablosu.gunluk td { font-size: 13px; }
.ayrinti-hucre { color: var(--soluk); max-width: 420px; overflow-wrap: anywhere; }
.satir-eylem { display: inline-flex; align-items: center; gap: 2px; }
.durum-nokta { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); }
.durum-nokta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi); }
.durum-nokta.etkin { color: var(--metin); }
.durum-nokta.etkin::before { background: var(--basari); box-shadow: 0 0 0 3px var(--basari-zemin); }

/* İskelet */
.iskelet {
  display: block; height: 12px; border-radius: 6px; width: 70%;
  background: linear-gradient(90deg, var(--yuzey-2) 0%, color-mix(in srgb, var(--cizgi) 70%, var(--yuzey-2)) 50%, var(--yuzey-2) 100%);
  background-size: 200% 100%; animation: parilti 1.2s ease-in-out infinite;
}
.iskelet.genis { width: 40%; height: 22px; }
.iskelet.buyuk { height: 28px; width: 50%; margin-top: 12px; }
.iskelet.kisa { width: 30%; }
.iskelet-satir td { padding-top: 16px; padding-bottom: 16px; }
.sayfa-iskelet { display: flex; flex-direction: column; gap: var(--a-5); }
.sayfa-iskelet .kart { display: flex; flex-direction: column; gap: 12px; }
@keyframes parilti { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Boş durum */
.bos-durum { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: var(--a-8) var(--a-5); }
.bos-durum.kucuk { padding: var(--a-6) var(--a-3); }
.bos-durum h3 { font-size: 15px; }
.bos-durum p { color: var(--soluk); max-width: 420px; }
.bos-durum .dugme { margin-top: 8px; }
.bos-simge { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu); margin-bottom: 4px; }
.bos-simge .ikon { width: 22px; height: 22px; }
.hata-durum .bos-simge { background: var(--uyari-zemin); color: var(--uyari); }

/* ---------- Araç çubuğu, arama, çipler, sayfalama */
.arac-cubugu { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-4) var(--a-5); border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.arama {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; flex: 1 1 260px; max-width: 420px; min-width: 0;
  border: 1px solid var(--cizgi); border-radius: var(--k-2); background: var(--yuzey-2); color: var(--soluk);
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.arama:focus-within { border-color: var(--vurgu); box-shadow: var(--odak); background: var(--yuzey); }
.arama input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--metin); height: 100%; }
.arama input::-webkit-search-cancel-button { cursor: pointer; }
.cipler { display: flex; gap: 6px; flex-wrap: wrap; }
.cip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--soluk); font-weight: 550; font-size: 13px;
}
.cip:hover { color: var(--metin); border-color: color-mix(in srgb, var(--soluk) 50%, var(--cizgi)); }
.cip > i { width: 7px; height: 7px; border-radius: 50%; background: var(--d); }
.cip[aria-pressed="true"] { background: var(--metin); color: var(--zemin); border-color: var(--metin); }
.cip[aria-pressed="true"][class*="durum-"] { background: var(--dz); color: var(--d); border-color: color-mix(in srgb, var(--d) 40%, transparent); }
.cip-sayi { font-variant-numeric: tabular-nums; opacity: .7; font-size: 12px; }
.cip-sayi:empty { display: none; }
.sayfalama { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); padding: var(--a-3) var(--a-5); border-top: 1px solid var(--cizgi); flex-wrap: wrap; }
.sayfalama-dugmeler { display: flex; align-items: center; gap: var(--a-2); }
[data-liste][aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* ---------- Formlar */
.form { display: flex; flex-direction: column; gap: var(--a-4); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14px; margin-bottom: var(--a-3); padding: 0; }
legend .ikon { color: var(--vurgu); }
.alanlar-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--a-4); }
.alanlar-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--a-4); }
.alan { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alan.genis { grid-column: 1 / -1; }
.alan.genis-2 { grid-column: span 2; }
.alan label { font-size: 13px; font-weight: 550; }
.zorunlu { color: var(--vurgu); margin-left: 2px; }
.ipucu { color: var(--soluk); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.ipucu .ikon { width: 14px; height: 14px; }
.alan input, .alan select, .alan textarea, .kopya-satir input, .birimli input, .kucuk-secim, .diyalog textarea, textarea[data-notlar], .girdi {
  width: 100%; min-width: 0; height: 38px; padding: 0 12px; border-radius: var(--k-2);
  border: 1px solid var(--cizgi); background: var(--yuzey); color: var(--metin);
  transition: border-color .15s, box-shadow .15s;
}
.alan textarea, textarea[data-notlar], textarea.girdi { height: auto; padding: 9px 12px; resize: vertical; line-height: 1.5; }
.alan input:hover, .alan select:hover, .alan textarea:hover, textarea[data-notlar]:hover, .birimli input:hover, .girdi:hover { border-color: color-mix(in srgb, var(--soluk) 45%, var(--cizgi)); }
.alan input:focus, .alan select:focus, .alan textarea:focus, textarea[data-notlar]:focus, .birimli input:focus, .kucuk-secim:focus, .kopya-satir input:focus, .girdi:focus {
  outline: 0; border-color: var(--vurgu); box-shadow: var(--odak);
}
.alan input[aria-invalid="true"] { border-color: var(--uyari); }
.alan input:user-invalid, .alan textarea:user-invalid { border-color: var(--uyari); }
.alan input::placeholder, textarea::placeholder, .arama input::placeholder { color: color-mix(in srgb, var(--soluk) 75%, transparent); }
fieldset:disabled input, fieldset:disabled textarea, fieldset:disabled select { background: var(--yuzey-2); color: var(--soluk); cursor: not-allowed; }
.kucuk-secim { height: 30px; width: auto; padding: 0 8px; font-size: 13px; }
.birimli { position: relative; display: flex; align-items: center; }
.birimli input { padding-right: 38px; font-variant-numeric: tabular-nums; }
.birimli span { position: absolute; right: 12px; color: var(--soluk); font-size: 13px; pointer-events: none; }
.parola-kutu { position: relative; display: flex; }
.parola-kutu input { padding-right: 44px; }
.parola-kutu .ikon-dugme { position: absolute; right: 4px; top: 4px; }
.parola-kutu .ikon-dugme[aria-pressed="true"] { color: var(--vurgu); }
.form-hata {
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--k-2);
  background: var(--uyari-zemin); color: var(--uyari); font-weight: 550; font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--uyari) 25%, transparent);
}
.form-karti { display: flex; flex-direction: column; gap: 0; }
.form-karti > .alan + .alan { margin-top: var(--a-4); }
.form-alt { display: flex; justify-content: flex-end; gap: var(--a-2); grid-column: 1 / -1; position: sticky; bottom: 0; padding: var(--a-3) 0; background: linear-gradient(to top, var(--zemin) 70%, transparent); }
.satir-ici { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; }
.satir-ici > input { flex: 1; }
.satir-ici.bosluklu { margin-top: var(--a-4); }
.onay-satiri { display: flex; align-items: center; gap: 8px; margin-top: var(--a-4); font-size: 13px; }

/* Bölümlü seçim (radyo düğmeleri) */
.bolumlu { display: inline-flex; padding: 3px; border-radius: var(--k-2); background: var(--yuzey-2); border: 1px solid var(--cizgi); gap: 2px; flex-wrap: wrap; }
.bolumlu label { cursor: pointer; position: relative; }
.bolumlu input { position: absolute; opacity: 0; pointer-events: none; }
.bolumlu span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 6px; color: var(--soluk); font-weight: 550; font-size: 13px; white-space: nowrap; }
.bolumlu span .ikon { width: 15px; height: 15px; }
.bolumlu label:hover span { color: var(--metin); }
.bolumlu input:checked + span { background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-2); }
.bolumlu input:focus-visible + span { outline: 2px solid var(--vurgu); outline-offset: 1px; }

/* Anahtar (switch) */
.anahtar { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 550; user-select: none; }
.anahtar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anahtar-iz { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--cizgi); transition: background-color .15s; flex: none; }
.anahtar-iz::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .15s; }
.anahtar input:checked + .anahtar-iz { background: var(--basari); }
.anahtar input:checked + .anahtar-iz::after { transform: translateX(16px); }
.anahtar input:focus-visible + .anahtar-iz { box-shadow: var(--odak); }

/* Dosya bırakma */
.birak-alani {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--a-6) var(--a-4); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--cizgi); border-radius: var(--k-3); background: var(--yuzey-2); transition: border-color .15s, background-color .15s;
}
.birak-alani:hover, .birak-alani.uzerinde, .birak-alani:focus-within { border-color: var(--vurgu); background: var(--vurgu-hafif); }
.birak-alani small { color: var(--soluk); font-size: 12px; }
.birak-simge { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu); margin-bottom: 6px; }
.secili-dosya, .dosya-karti { display: flex; align-items: center; gap: var(--a-3); padding: var(--a-3); border: 1px solid var(--cizgi); border-radius: var(--k-2); background: var(--yuzey-2); min-width: 0; }
.secili-dosya .kim, .dosya-karti .kim { flex: 1; }
.dosya-simge { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--k-2); background: var(--yuzey-2); color: var(--soluk); border: 1px solid var(--cizgi); }
.dosya-simge.tur-noktalar, .secili-dosya .dosya-simge { background: var(--d-yeni-z); color: var(--d-yeni); border-color: transparent; }
.dosya-simge.tur-dns { background: var(--vurgu-acik); color: var(--vurgu); border-color: transparent; }
.yardim-karti { background: var(--yuzey-2); box-shadow: none; display: flex; flex-direction: column; gap: var(--a-3); }
.kucuk-adimlar { margin: 0; padding-left: 18px; color: var(--soluk); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.not-satiri { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 10px 12px; border-radius: var(--k-2); }
.not-satiri .ikon { width: 16px; height: 16px; margin-top: 2px; }
.not-satiri b { overflow-wrap: anywhere; }
.not-satiri.basari { background: var(--basari-zemin); color: var(--basari); }
.not-satiri.uyari { background: var(--dikkat-zemin); color: var(--dikkat); }
.not-satiri a { font-weight: 600; }
.yeni-is .form-alt { padding-top: var(--a-4); }

/* Müşteri seçici (combobox) */
musteri-sec { display: block; position: relative; }
.secici { position: relative; }
.secici-girdi {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--cizgi); border-radius: var(--k-2);
  background: var(--yuzey); color: var(--soluk); transition: border-color .15s, box-shadow .15s;
}
.secici-girdi:focus-within { border-color: var(--vurgu); box-shadow: var(--odak); }
.secici-girdi input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--metin); height: 100%; }
.secici-liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; margin: 0; padding: 6px; list-style: none;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--k-3); box-shadow: var(--golge-3); max-height: 320px; overflow: auto;
}
.secici-liste li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--k-2); cursor: pointer; min-width: 0; }
.secici-liste li[aria-selected="true"], .secici-liste li[role=option]:hover { background: var(--vurgu-hafif); }
.secici-liste li.secici-bos { color: var(--soluk); cursor: default; font-size: 13px; }
.secici-liste li.secici-yeni { color: var(--vurgu); font-weight: 600; border-top: 1px solid var(--cizgi); border-radius: 0 0 var(--k-2) var(--k-2); margin-top: 4px; }
.secili-musteri { display: flex; align-items: center; gap: var(--a-3); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--vurgu) 30%, var(--cizgi)); border-radius: var(--k-2); background: var(--vurgu-hafif); }
.secili-musteri .kim { flex: 1; }
musteri-sec + .ipucu { margin-top: 8px; }
.diyalog musteri-sec .secici-liste { position: static; box-shadow: none; margin-top: 8px; max-height: 260px; }

/* ---------- İş sayfası */
.is-ust { display: flex; flex-direction: column; gap: var(--a-4); }
.is-baslik-satir { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--a-4); flex-wrap: wrap; }
.is-baslik { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.is-baslik h2 { font-size: 26px; overflow-wrap: anywhere; }
.is-baslik p { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.teslim-bilgi { display: inline-flex; align-items: center; gap: 4px; color: var(--basari); font-weight: 550; }
.teslim-bilgi .ikon { width: 15px; height: 15px; }
.adim-cubugu { list-style: none; margin: 0; padding: 4px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--k-3); box-shadow: var(--golge-1); }
.adim-cubugu li { position: relative; min-width: 0; }
.adim-cubugu button {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--k-2);
  background: transparent; color: var(--soluk); font-weight: 600; text-align: left; min-width: 0;
}
.adim-cubugu button span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adim-cubugu button:hover { background: var(--uzerinde); color: var(--metin); }
.adim-isaret { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 1.5px solid var(--cizgi); font-size: 12px; font-variant-numeric: tabular-nums; }
.adim-isaret .ikon { width: 14px; height: 14px; stroke-width: 2.5; }
.adim-cubugu .gecti button { color: var(--metin); }
.adim-cubugu .gecti .adim-isaret { background: var(--basari); border-color: var(--basari); color: #fff; }
.adim-cubugu .simdi button { background: var(--vurgu-acik); color: var(--vurgu); cursor: default; }
.adim-cubugu .simdi .adim-isaret { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); }
.serit {
  display: flex; align-items: center; gap: 10px; padding: 12px var(--a-4); border-radius: var(--k-3); flex-wrap: wrap;
  background: var(--yuzey-2); border: 1px solid var(--cizgi); color: var(--soluk);
}
.serit > span { flex: 1; }
.serit.iptal { background: var(--d-iptal-z); color: var(--d-iptal); border-color: transparent; font-weight: 550; }
.serit.bilgi { background: var(--d-yeni-z); color: var(--d-yeni); border-color: transparent; }
.ilerleme { height: 6px; border-radius: 999px; background: var(--yuzey-2); overflow: hidden; margin: calc(-1 * var(--a-2)) 0 var(--a-3); border: 1px solid var(--cizgi); }
.ilerleme span { display: block; height: 100%; background: var(--basari); border-radius: 999px; transition: width .3s; }
.denetim-listesi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.denetim-listesi li { display: flex; align-items: flex-start; gap: var(--a-3); padding: 12px 0; border-top: 1px solid var(--cizgi); }
.denetim-listesi li:first-child { border-top: 0; }
.denetim-listesi li > div { flex: 1; min-width: 0; }
.denetim-listesi li p { color: var(--soluk); font-size: 13px; overflow-wrap: anywhere; }
.denetim-listesi li > .dugme { flex: none; margin-top: 2px; }
.denetim-simge { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; margin-top: 1px; }
.denetim-simge .ikon { width: 14px; height: 14px; stroke-width: 2.5; }
.denetim-listesi .tamam .denetim-simge { background: var(--basari-zemin); color: var(--basari); }
.denetim-listesi .eksik .denetim-simge { background: var(--uyari-zemin); color: var(--uyari); }
.denetim-listesi .oneri .denetim-simge { background: var(--dikkat-zemin); color: var(--dikkat); }
.denetim-listesi .tamam b { font-weight: 550; }
.surum { display: flex; flex-direction: column; gap: var(--a-3); padding: var(--a-4); border: 1px solid var(--cizgi); border-radius: var(--k-3); background: var(--yuzey); }
.surum.guncel { border-color: color-mix(in srgb, var(--basari) 35%, var(--cizgi)); }
.surum-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.surum-ust .soluk { margin-left: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.ozet-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: var(--cizgi); border: 1px solid var(--cizgi); border-radius: var(--k-2); overflow: hidden; }
.ozet-izgara > div { background: var(--yuzey-2); padding: 10px 12px; min-width: 0; }
.ozet-izgara dt { color: var(--soluk); font-size: 12px; }
.ozet-izgara dd { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ozet-izgara .asim dd { color: var(--uyari); }
.ozet-izgara .uyarili dd { color: var(--dikkat); }
.surum-eylem { display: flex; align-items: center; gap: var(--a-2); flex-wrap: wrap; }
.surum-eylem .soluk { margin-left: auto; }
.paylasim { padding: var(--a-3); border-radius: var(--k-2); background: var(--vurgu-hafif); border: 1px solid color-mix(in srgb, var(--vurgu) 25%, var(--cizgi)); display: flex; flex-direction: column; gap: 8px; }
.paylasim-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.paylasim-ust .ikon { color: var(--vurgu); width: 16px; height: 16px; }
.paylasim-ust .soluk { margin-left: auto; font-size: 12px; }
.kopya-satir { display: flex; gap: 6px; align-items: center; }
.kopya-satir input { height: 30px; font-family: var(--sabit); font-size: 12px; flex: 1; background: var(--yuzey); }
.eski-surumler { margin-top: var(--a-3); }
.eski-surumler summary { cursor: pointer; color: var(--soluk); font-weight: 550; font-size: 13px; padding: 6px 0; }
.eski-surumler summary:hover { color: var(--metin); }
.eski-surumler .surum { margin-top: var(--a-2); background: var(--yuzey-2); }
.dosya-listesi { list-style: none; margin: 0; padding: 0; }
.dosya-listesi li { display: flex; align-items: center; gap: var(--a-3); padding: 10px 0; border-top: 1px solid var(--cizgi); min-width: 0; }
.dosya-listesi li:first-child { border-top: 0; padding-top: 0; }
.dosya-listesi .kim { flex: 1; }
.dosya-listesi .kim small .rozet { flex: none; }
[data-dosya-karti] { transition: border-color .15s, background-color .15s; }
[data-dosya-karti].uzerinde { border-color: var(--vurgu); border-style: dashed; background: var(--vurgu-hafif); }
[data-dosya-karti].yukleniyor { opacity: .6; pointer-events: none; }
.birak-ipucu { margin-top: var(--a-3); }
.kunye { margin: 0; display: flex; flex-direction: column; }
.kunye > div { display: flex; justify-content: space-between; gap: var(--a-3); padding: 8px 0; border-top: 1px solid var(--cizgi); font-size: 13px; }
.kunye > div:first-child { border-top: 0; padding-top: 0; }
.kunye dt { color: var(--soluk); flex: none; }
.kunye dd { margin: 0; text-align: right; font-weight: 550; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.iletisim { list-style: none; margin: var(--a-3) 0 0; padding: var(--a-3) 0 0; border-top: 1px solid var(--cizgi); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.iletisim li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.iletisim .ikon { width: 16px; height: 16px; color: var(--soluk); }
.iletisim a { text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iletisim a:hover { color: var(--vurgu); text-decoration: underline; }
.kucuk-kart { display: flex; flex-direction: column; gap: var(--a-2); padding: var(--a-4); }
.kucuk-kart .kunye { margin-bottom: var(--a-2); }
.kucuk-kart .dugme.tam { justify-content: flex-start; }

/* Müşteri sayfası */
.kucuk-istatistik .kart { display: flex; flex-direction: column; gap: 4px; padding: var(--a-4); }
.kucuk-istatistik small { color: var(--soluk); font-size: 12px; font-weight: 550; text-transform: uppercase; letter-spacing: .04em; }
.kucuk-istatistik b { font-size: 22px; font-weight: 700; }
.kucuk-istatistik .vurgulu b { color: var(--vurgu); }

/* ---------- Büro ayarları */
.sekmeler { display: flex; gap: 4px; border-bottom: 1px solid var(--cizgi); overflow-x: auto; scrollbar-width: none; }
.sekmeler::-webkit-scrollbar { display: none; }
.sekmeler [role=tab] {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; background: none;
  color: var(--soluk); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.sekmeler [role=tab]:hover { color: var(--metin); }
.sekmeler [role=tab][aria-selected="true"] { color: var(--vurgu); border-bottom-color: var(--vurgu); }
.sekmeler .ikon { width: 16px; height: 16px; }
.sekme-panel { outline: none; }
.sekme-panel > div { animation: belir .15s ease-out; }
.ayar-formu { display: flex; flex-direction: column; gap: var(--a-4); }
.ayar-bolum { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--a-6); padding: var(--a-5) 0; border-top: 1px solid var(--cizgi); }
.ayar-bolum:first-child { border-top: 0; padding-top: 0; }
.ayar-bolum:last-child { padding-bottom: 0; }
.ayar-aciklama { display: flex; flex-direction: column; gap: 6px; }
.ayar-aciklama p { color: var(--soluk); font-size: 13px; }
.ayar-formu > .form-alt { justify-content: flex-end; }

/* ---------- Diyaloglar */
.diyalog {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--cizgi);
  border-radius: var(--k-4); background: var(--yuzey); color: var(--metin); box-shadow: var(--golge-3); overflow: visible;
}
.diyalog.dar { width: min(440px, calc(100vw - 24px)); }
.diyalog[open] { animation: diyalog-gir .18s ease-out; }
.diyalog::backdrop { background: rgb(15 12 8 / 0.5); backdrop-filter: blur(2px); }
@keyframes diyalog-gir { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.diyalog-govde { display: flex; flex-direction: column; max-height: calc(100vh - 34px); }
.diyalog-baslik { display: flex; align-items: flex-start; gap: var(--a-3); padding: var(--a-5) var(--a-5) var(--a-3); }
.diyalog-baslik > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.diyalog-baslik h2 { font-size: 17px; flex: 1; align-self: center; }
.diyalog-baslik p { font-size: 13px; }
.diyalog-baslik .ikon-dugme { margin: -6px -8px 0 0; }
.diyalog-simge { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--vurgu-acik); color: var(--vurgu); }
.diyalog-simge.tehlike { background: var(--uyari-zemin); color: var(--uyari); }
.diyalog-icerik { padding: var(--a-2) var(--a-5) var(--a-5); overflow: auto; display: flex; flex-direction: column; gap: var(--a-4); }
.diyalog.dar .diyalog-icerik p { color: var(--soluk); }
.diyalog-alt { display: flex; justify-content: flex-end; gap: var(--a-2); padding: var(--a-4) var(--a-5); border-top: 1px solid var(--cizgi); background: var(--yuzey-2); border-radius: 0 0 var(--k-4) var(--k-4); }

/* ---------- Bildirimler */
.bildirimler { position: fixed; right: var(--a-5); bottom: var(--a-5); z-index: 1000; display: flex; flex-direction: column; gap: var(--a-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.bildirim {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 8px 12px 14px; border-radius: var(--k-3);
  background: var(--metin); color: var(--zemin); box-shadow: var(--golge-3); pointer-events: auto;
  animation: bildirim-gir .2s ease-out; font-size: 13px; font-weight: 500;
}
.bildirim p { flex: 1; padding-top: 1px; overflow-wrap: anywhere; }
.bildirim > .ikon { margin-top: 1px; }
.bildirim.basari > .ikon { color: color-mix(in srgb, var(--basari) 70%, var(--zemin)); }
.bildirim.hata { background: var(--uyari); color: #fff; }
.bildirim.bilgi > .ikon { color: color-mix(in srgb, var(--vurgu) 70%, var(--zemin)); }
.bildirim .ikon-dugme { color: inherit; opacity: .7; margin: -4px 0; }
.bildirim .ikon-dugme:hover { opacity: 1; background: rgb(255 255 255 / .12); }
.bildirim.gidiyor { opacity: 0; transform: translateX(16px); transition: opacity .2s, transform .2s; }
@keyframes bildirim-gir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Giriş ve kayıt */
body.karsilama-sayfasi { background: var(--yuzey); }
.karsilama { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.tanitim {
  position: relative; display: flex; flex-direction: column; gap: var(--a-6); padding: var(--a-7) clamp(24px, 5vw, 64px);
  background: radial-gradient(1200px 500px at -10% -10%, var(--vurgu-acik), transparent 60%), var(--zemin);
  border-right: 1px solid var(--cizgi); overflow: hidden;
}
.tanitim-marka { display: flex; align-items: center; gap: 10px; }
.tanitim-marka b { display: block; letter-spacing: .08em; }
.tanitim-marka small { display: block; color: var(--soluk); font-size: 12px; margin-top: -2px; }
.tanitim-govde { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--a-5); max-width: 540px; }
.tanitim-govde h1 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.tanitim-alt { color: var(--soluk); font-size: 16px; max-width: 460px; }
.tanitim-cizim { width: 100%; max-width: 440px; height: auto; color: var(--metin); border: 1px solid var(--cizgi); border-radius: var(--k-3); background: var(--yuzey); box-shadow: var(--golge-2); }
.tanitim-cizim .komsu { fill: color-mix(in srgb, var(--soluk) 8%, transparent); stroke: var(--soluk); stroke-width: 1; stroke-dasharray: 4 3; }
.tanitim-cizim .parsel { fill: var(--vurgu-acik); stroke: var(--vurgu); stroke-width: 2; stroke-linejoin: round; }
.tanitim-cizim .taskin { fill: color-mix(in srgb, var(--uyari) 18%, transparent); stroke: var(--uyari); stroke-width: 1; stroke-dasharray: 3 2; }
.tanitim-cizim .koseler circle { fill: var(--yuzey); stroke: var(--vurgu); stroke-width: 2; }
.tanitim-cizim text { font-family: var(--sabit); font-size: 10px; fill: var(--soluk); }
.tanitim-cizim .adlar text { fill: var(--metin); font-weight: 700; font-family: var(--yazi); font-size: 11px; }
.tanitim-cizim .alan-yazi { font-family: var(--yazi); font-size: 15px; font-weight: 700; fill: var(--metin); text-anchor: middle; }
.tanitim-cizim .alan-yazi.kucuk { font-size: 11px; font-weight: 500; fill: var(--soluk); font-family: var(--sabit); }
.ozellikler { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-4); }
.ozellikler li { display: flex; gap: var(--a-3); align-items: flex-start; }
.ozellikler p { color: var(--soluk); font-size: 13px; margin-top: 2px; }
.ozellik-simge { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--k-2); background: var(--yuzey); border: 1px solid var(--cizgi); color: var(--vurgu); box-shadow: var(--golge-1); }
.tanitim-dip { display: flex; align-items: center; gap: 8px; color: var(--soluk); font-size: 12px; }
.tanitim-dip .ikon { width: 16px; height: 16px; }
.giris-taraf { display: flex; flex-direction: column; padding: var(--a-5) clamp(16px, 4vw, 48px) var(--a-7); background: var(--yuzey); }
.giris-ust { display: flex; justify-content: flex-end; }
.giris-kart { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 460px; margin: 0 auto; padding: var(--a-5) 0; }
.giris-baslik { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--a-2); }
.giris-baslik h2 { font-size: 26px; letter-spacing: -0.02em; }
.giris-baslik p { color: var(--soluk); }
.giris-kart fieldset { padding: var(--a-4) 0 0; border-top: 1px solid var(--cizgi); }
.giris-kart .dugme.buyuk { margin-top: var(--a-2); }
.giris-kart .dugme.buyuk .ikon { margin-left: 2px; }
.giris-gecis { text-align: center; color: var(--soluk); font-size: 13px; }
.giris-gecis a { color: var(--vurgu); font-weight: 600; text-decoration: none; }
.giris-gecis a:hover { text-decoration: underline; }

/* ---------- İşlem bildirimi (ilerleme, onay, yeniden dene) ve parıltı */
.bildirim.islem { align-items: center; }
.islem-simge { display: grid; place-items: center; width: 22px; height: 22px; flex: none; }
.bildirim .islem-simge .donen { width: 16px; height: 16px; border-color: color-mix(in srgb, var(--zemin) 30%, transparent); border-top-color: var(--zemin); }
.islem-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.islem-govde p { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.islem-cubuk { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--zemin) 22%, transparent); overflow: hidden; }
.islem-cubuk span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--zemin); transition: width .2s ease-out; }
.islem-tik { width: 22px; height: 22px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.islem-tik circle { stroke: color-mix(in srgb, var(--basari) 70%, var(--zemin)); stroke-width: 1.75; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ciz-tik .45s ease-out forwards; }
.islem-tik path { stroke: color-mix(in srgb, var(--basari) 70%, var(--zemin)); stroke-width: 2.4; stroke-dasharray: 16; stroke-dashoffset: 16; animation: ciz-tik .3s .3s ease-out forwards; }
@keyframes ciz-tik { to { stroke-dashoffset: 0; } }
.bildirim.islem.basari .islem-simge { animation: tik-zipla .4s .25s ease-out; }
@keyframes tik-zipla { 50% { transform: scale(1.18); } }
.islem-yeniden {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--k-1);
  border: 1px solid rgb(255 255 255 / .45); background: rgb(255 255 255 / .12); color: inherit; font-weight: 600; font-size: 12px;
}
.islem-yeniden:hover { background: rgb(255 255 255 / .22); }
.islem-yeniden .ikon { width: 14px; height: 14px; }
.parla { animation: parla 1.8s ease-out; }
@keyframes parla {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vurgu) 50%, transparent); background-color: var(--vurgu-hafif); }
  60% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--vurgu) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- LİHKAB belgesi sayfası */
.belge-duzen { display: grid; grid-template-columns: minmax(360px, 460px) minmax(0, 1fr); gap: var(--a-5); align-items: start; }
.belge-adimlar { display: flex; flex-direction: column; gap: var(--a-4); }
.belge-adimlar > .kart-baslik { margin-bottom: 0; }
.kayit-durum { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-size: 12px; font-variant-numeric: tabular-nums; }
.kayit-durum .ikon { width: 14px; height: 14px; }
.kayit-durum .donen { width: 12px; height: 12px; }
.kayit-durum.kaydedildi .ikon { color: var(--basari); }
.kayit-durum.hata { color: var(--uyari); }
.kayit-durum .bag { font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; }
.hazirlik-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); flex-wrap: wrap; }
.hazirlik-ust p { font-size: 13px; }
.hazirlik-ust .rozet .ikon { width: 14px; height: 14px; }
.belge-adimlar .ilerleme { margin: 10px 0 0; }
.belge-olcu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.belge-olcu dt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.belge-olcu dd small { font-weight: 500; }
.belge-olcu.bekliyor .iskelet { height: 14px; width: 60%; margin-top: 4px; }
.uyari-listesi { list-style: none; margin: var(--a-2) 0 0; padding: 10px 12px; border-radius: var(--k-2); background: var(--dikkat-zemin); color: var(--dikkat); display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.uyari-listesi li { display: flex; gap: 8px; align-items: flex-start; overflow-wrap: anywhere; }
.uyari-listesi .ikon { width: 15px; height: 15px; margin-top: 2px; }

.adim-listesi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--cizgi); border-radius: var(--k-3); overflow: hidden; }
.adim-listesi > li + li { border-top: 1px solid var(--cizgi); }
.adim > summary { display: flex; align-items: center; gap: var(--a-3); padding: 12px 14px; cursor: pointer; list-style: none; user-select: none; transition: background-color .15s; }
.adim > summary::-webkit-details-marker { display: none; }
.adim > summary:hover { background: var(--uzerinde); }
.adim[open] > summary { background: var(--yuzey-2); border-bottom: 1px solid var(--cizgi); }
.adim-no {
  display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--cizgi); color: var(--soluk); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background-color .2s, border-color .2s, color .2s;
}
.adim-no .ikon { width: 14px; height: 14px; stroke-width: 2.6; }
.adim.tamam .adim-no { background: var(--basari); border-color: var(--basari); color: #fff; }
.adim.eksik .adim-no { border-color: color-mix(in srgb, var(--uyari) 55%, var(--cizgi)); color: var(--uyari); background: var(--uyari-zemin); }
.adim-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.adim-metin b { font-weight: 650; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.adim-metin small { color: var(--soluk); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adim.eksik .adim-metin small { color: var(--uyari); }
.adim-ok { color: var(--soluk); transition: transform .2s; }
.adim[open] .adim-ok { transform: rotate(180deg); }
.adim-govde { display: flex; flex-direction: column; gap: var(--a-4); padding: var(--a-4) 14px var(--a-5); }
.alt-baslik { font-size: 13px; font-weight: 650; margin-top: var(--a-2); }
.alt-baslik:first-child { margin-top: 0; }
.bolum-govde { display: flex; flex-direction: column; gap: var(--a-4); }
.bolum-baslik { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--soluk); padding-top: var(--a-3); border-top: 1px solid var(--cizgi); }
.bolum-baslik:first-child { padding-top: 0; border-top: 0; }
:is(.adim-govde, .bolum-govde) > .alt-baslik + .ipucu { margin-top: calc(-1 * var(--a-3)); }
.sistem-bilgi { display: flex; flex-direction: column; gap: 4px; margin-top: calc(-1 * var(--a-2)); }
.sistem-bilgi:empty { display: none; }
.sistem-bilgi .ipucu { margin: 0; }
.belge-acik { margin-top: var(--a-2); border: 1px solid var(--cizgi); border-radius: var(--k-2); font-size: 13px; }
.belge-acik > summary { display: flex; align-items: center; gap: 8px; padding: 8px 12px; cursor: pointer; color: var(--soluk); }
.belge-acik > summary .ikon { width: 15px; height: 15px; }
.belge-acik.bos > summary { color: var(--metin); font-weight: 600; }
.belge-acik ul { margin: 0; padding: 0 12px 10px 35px; display: flex; flex-direction: column; gap: 4px; color: var(--soluk); overflow-wrap: anywhere; }
.tarih-satir { display: flex; gap: 6px; align-items: center; }
.tarih-satir input { flex: 1; }
.tarih-satir .dugme { height: 38px; flex: none; }
.buyuk-harf { text-transform: uppercase; }
.uyari-metin { color: var(--dikkat); }
.bag.kenara { margin-left: auto; }
.imza legend { font-size: 13px; margin-bottom: var(--a-2); }
.yapistir { border: 1px dashed var(--cizgi); border-radius: var(--k-2); padding: 0 12px; }
.yapistir[open] { padding-bottom: 12px; display: flex; flex-direction: column; gap: var(--a-3); }
.yapistir > summary { display: flex; align-items: center; gap: 8px; padding: 10px 0; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--soluk); list-style: none; }
.yapistir > summary::-webkit-details-marker { display: none; }
.yapistir > summary:hover { color: var(--metin); }
.yapistir > summary .ikon { width: 16px; height: 16px; }
.yapistir textarea { font-size: 12px; white-space: pre; }

.nokta-cizim { position: relative; border: 1px solid var(--cizgi); border-radius: var(--k-2); background: var(--cizim-zemin); overflow: hidden; }
.ck { display: block; width: 100%; height: 300px; touch-action: none; cursor: grab; user-select: none; }
.ck:active { cursor: grabbing; }
.ck-parsel { fill: var(--vurgu-acik); stroke: var(--vurgu); stroke-width: 2px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.ck-parsel.acik { fill: none; }
.ck-taskin { stroke: var(--uyari, #c0392b); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.ck-tarama { stroke: var(--uyari, #c0392b); }
.ck-yapi { fill: none; stroke: var(--cizim-ortak); stroke-width: 2px; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.ck-yeni { fill: none; stroke: var(--cizim-secili); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.ck-n { cursor: pointer; }
.ck-n circle { fill: var(--cizim-girdi); }
.ck-n .ck-hedef { fill: transparent; }
.ck-n text { fill: var(--cizim-yazi); paint-order: stroke; stroke: var(--cizim-hale); stroke-width: .3em; stroke-linejoin: round; font-family: var(--sabit); pointer-events: none; }
.ck-n:hover circle:not(.ck-hedef) { fill: var(--vurgu); }
.ck-n.yapi circle:not(.ck-hedef) { fill: var(--cizim-ortak); }
.ck-n.secili circle:not(.ck-hedef) { fill: var(--vurgu); }
.ck.yapi .ck-n.secili circle:not(.ck-hedef) { fill: var(--cizim-secili); }
.ck-n.secili text { font-weight: 700; fill: var(--metin); }
.ck-n.ilk circle:not(.ck-hedef) { stroke: var(--vurgu); stroke-width: 3px; vector-effect: non-scaling-stroke; fill: var(--cizim-zemin); }
.ck-arac { position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 2px; padding: 2px; border-radius: var(--k-2); background: color-mix(in srgb, var(--yuzey) 88%, transparent); border: 1px solid var(--cizgi); box-shadow: var(--golge-1); }
.cizim-bos { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 160px; padding: var(--a-5); text-align: center; color: var(--soluk); font-size: 13px; }
.cizim-bos.hata { color: var(--uyari); }
.cizim-ileti { min-height: 18px; font-size: 12px; color: var(--soluk); margin-top: calc(-1 * var(--a-2)); }
.cizim-ileti:empty { display: none; }

.komsu-listesi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--a-2); }
.komsu-listesi li { display: grid; grid-template-columns: 76px auto minmax(0, 1fr); align-items: center; gap: var(--a-2); }
.kenar-ad { font-size: 13px; font-weight: 600; white-space: nowrap; }
.komsu-listesi .cipler { flex-wrap: nowrap; gap: 4px; }
.komsu-listesi .cip { height: 28px; padding: 0 9px; font-size: 12px; }
.komsu-listesi .girdi { height: 32px; }
.yeni-yapi { display: flex; gap: var(--a-2); align-items: center; }
.yeni-yapi .girdi { flex: 1; height: 32px; }
.yapi-listesi { display: flex; flex-direction: column; gap: var(--a-3); }
.yapi-listesi:empty { display: none; }
.yapi-kart { display: flex; flex-direction: column; gap: var(--a-3); padding: var(--a-3); border: 1px solid var(--cizgi); border-radius: var(--k-2); background: var(--yuzey-2); }
.yapi-ust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.yapi-ust .soluk { flex: 1; font-size: 12px; min-width: 0; }
.kontrol-listesi { display: flex; flex-direction: column; gap: var(--a-2); }
.kontrol-listesi:empty { display: none; }
.kontrol-satir { display: grid; grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: var(--a-2); align-items: end; }
.kontrol-satir .alan label { font-size: 12px; }
.kontrol-satir .ikon-dugme, .kontrol-sonuc { margin-bottom: 4px; }
.liste-ogeler { display: flex; flex-direction: column; gap: var(--a-2); }
.liste-ogeler:empty { display: none; }
.liste-oge { display: flex; gap: 6px; align-items: flex-start; }
.liste-oge .girdi { flex: 1; }
.liste-oge .ikon-dugme { margin-top: 4px; }

.belge-onizleme { position: sticky; top: calc(var(--ust-yuk) + var(--a-4)); padding: 0; overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - var(--ust-yuk) - var(--a-6)); }
.belge-serit { display: flex; align-items: center; gap: var(--a-3); flex-wrap: wrap; padding: var(--a-3) var(--a-4); border-bottom: 1px solid var(--cizgi); border-radius: var(--k-3) var(--k-3) 0 0; }
.belge-durum { display: flex; align-items: center; gap: 6px 8px; flex: 1 1 220px; min-width: 0; font-size: 13px; flex-wrap: wrap; }
.belge-durum > i { width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi); flex: none; }
.belge-durum.guncel > i { background: var(--basari); box-shadow: 0 0 0 3px var(--basari-zemin); }
.belge-durum.degisik > i { background: var(--dikkat); box-shadow: 0 0 0 3px var(--dikkat-zemin); }
.belge-durum.degisik b { color: var(--dikkat); }
.belge-durum b { font-variant-numeric: tabular-nums; }
.belge-durum .soluk { font-size: 12px; font-variant-numeric: tabular-nums; }
.belge-serit-eylem { display: flex; gap: var(--a-2); flex-wrap: wrap; }
.belge-arac { display: flex; align-items: center; gap: 4px; padding: 6px var(--a-3); border-bottom: 1px solid var(--cizgi); background: var(--yuzey-2); }
.belge-arac .olcek { min-width: 44px; text-align: center; font-size: 12px; font-weight: 600; color: var(--soluk); font-variant-numeric: tabular-nums; }
.belge-arac > .soluk { margin-left: auto; font-size: 12px; }
.belge-arac .ikon-dugme:disabled { opacity: .4; cursor: not-allowed; }
.kagit-alan { position: relative; flex: 1; min-height: 0; display: flex; }
.kagit-kap { flex: 1; overflow: auto; padding: var(--a-5); background: color-mix(in srgb, var(--soluk) 12%, var(--yuzey-2)); }
.kagit { position: relative; margin: 0 auto; width: 100%; background: #fff; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 8px 28px rgb(20 15 10 / .16); transition: width .15s; }
.kagit.bos { aspect-ratio: 210 / 297; }
.kagit img { display: block; width: 100%; height: auto; transition: opacity .2s; }
.kagit-alan[aria-busy="true"] .kagit img { opacity: .78; }
.kagit-alan[aria-busy="true"] .kagit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgb(255 255 255 / .55) 50%, transparent 65%);
  background-size: 250% 100%; animation: parilti 1.3s ease-in-out infinite;
}
.kagit-yukleniyor {
  position: absolute; bottom: var(--a-4); left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px; background: var(--yuzey); border: 1px solid var(--cizgi); box-shadow: var(--golge-2);
  font-size: 12px; font-weight: 550; color: var(--soluk); white-space: nowrap; animation: belir .2s ease-out;
}
.kagit-yukleniyor .donen { width: 13px; height: 13px; }
.kagit-hata {
  position: absolute; left: var(--a-4); right: var(--a-4); top: var(--a-4); display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--k-2); background: var(--uyari-zemin); color: var(--uyari); font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--uyari) 30%, transparent); box-shadow: var(--golge-2); animation: belir .2s ease-out;
}
.kagit-hata p { overflow-wrap: anywhere; margin-top: 2px; }
.kagit-hata .ikon { margin-top: 1px; }
.kagit-bilgi {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%); width: min(340px, calc(100% - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--a-5); text-align: center;
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: var(--k-3); box-shadow: var(--golge-2);
}
.kagit-bilgi ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; text-align: left; }
.kagit-bilgi li { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--k-2); background: var(--yuzey-2); }
.kagit-bilgi li .bag { background: none; border: 0; padding: 0; cursor: pointer; justify-content: flex-start; }
.kagit-bilgi li small { color: var(--soluk); font-size: 12px; }

/* ---------- Duyarlı yerleşim */
@media (max-width: 1180px) {
  .orta-gizle { display: none; }
  .iki-sutun { grid-template-columns: minmax(0, 1fr) 300px; }
  .adimlar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .iki-sutun, .iki-sutun.esit { grid-template-columns: minmax(0, 1fr); }
  .belge-duzen { grid-template-columns: minmax(0, 1fr); }
  .belge-onizleme { position: static; max-height: none; order: -1; }
  .kagit-kap { max-height: 78vh; }
  .izgara-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ayar-bolum { grid-template-columns: minmax(0, 1fr); gap: var(--a-3); }
  .karsilama { display: flex; flex-direction: column; }
  .tanitim { border-right: 0; border-bottom: 1px solid var(--cizgi); padding-bottom: var(--a-6); }
  .tanitim-cizim, .ozellikler li p { display: none; }
  .tanitim-govde { gap: var(--a-4); }
}
@media (max-width: 900px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .kenar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(288px, 86vw); height: auto;
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: var(--golge-3);
  }
  .kabuk.menu-acik .kenar { transform: none; }
  .kenar-yeni { display: block; }
  .menu-dugme { display: inline-grid; }
  .ust-cubuk { padding: 0 var(--a-4); }
  .icerik { padding: var(--a-5) var(--a-4) var(--a-8); }
  .izgara-ay { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  h2 { font-size: 20px; }
  .dar-gizle { display: none; }
  .ust-yeni span { display: none; }
  .ust-yeni { width: 36px; padding: 0; }
  .alanlar-2, .alanlar-3 { grid-template-columns: minmax(0, 1fr); }
  .alan.genis-2 { grid-column: auto; }
  .izgara-3 { grid-template-columns: minmax(0, 1fr); }
  .adimlar { grid-template-columns: minmax(0, 1fr); }
  .olcutler { grid-template-columns: minmax(0, 1fr); gap: var(--a-3); }
  .olcutler > div { padding-left: 0; border-left: 0; display: flex; justify-content: space-between; align-items: baseline; }
  .olcutler dd { font-size: 18px; margin: 0; }
  .kart { padding: var(--a-4); }
  .tablo-karti { padding: 0; }
  .tablo-karti > .kart-baslik, .arac-cubugu { padding-left: var(--a-4); padding-right: var(--a-4); }
  .veri-tablosu th:first-child, .veri-tablosu td:first-child { padding-left: var(--a-4); }
  .veri-tablosu th:last-child, .veri-tablosu td:last-child { padding-right: var(--a-4); }
  .veri-tablosu td, .veri-tablosu th { padding-left: 10px; padding-right: 10px; }
  .arama { max-width: none; flex-basis: 100%; }
  .cipler { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--a-4)); padding: 0 var(--a-4) 2px; scrollbar-width: none; }
  .cipler::-webkit-scrollbar { display: none; }
  .cip { flex: none; }
  .sayfa-eylem { width: 100%; }
  .sayfa-eylem > .dugme { flex: 1; }
  .adim-cubugu { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ozet-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .is-baslik h2 { font-size: 22px; }
  .istatistik-sayi { font-size: 26px; }
  .bildirimler { right: var(--a-4); bottom: var(--a-4); left: var(--a-4); width: auto; }
  .surum-ust .soluk, .surum-eylem .soluk, .paylasim-ust .soluk { margin-left: 0; width: 100%; }
  .belge-serit-eylem { width: 100%; }
  .belge-serit-eylem > .dugme { flex: 1 1 auto; }
  .belge-arac > .soluk { display: none; }
  .kagit-kap { padding: var(--a-3); max-height: 70vh; }
  .komsu-listesi li { grid-template-columns: 1fr; gap: 6px; padding-bottom: var(--a-2); border-bottom: 1px solid var(--cizgi); }
  .kontrol-satir { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) auto; }
  .kontrol-sonuc { grid-column: 1 / -1; order: 5; margin: 0; }
  .ck { height: 260px; }
  .adim-govde { padding-left: var(--a-3); padding-right: var(--a-3); }
  .form-alt > * { flex: 1; }
  .tanitim { padding: var(--a-5) var(--a-4); }
  .giris-taraf { padding: var(--a-4) var(--a-4) var(--a-6); }
}
@media (max-width: 400px) {
  .izgara-4 { grid-template-columns: minmax(0, 1fr); }
  .ust-sag .ikon-dugme { width: 32px; }
}

/* <nokta-girisi>: yazarak, tablo olarak ya da dosyadan nokta girişi */
.nokta-girisi { display: flex; flex-direction: column; gap: var(--a-3); }
.ng-ust { display: flex; align-items: center; justify-content: space-between; gap: var(--a-3); flex-wrap: wrap; }
.ng-sira { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); }
.ng-sira select { width: auto; height: 32px; }
.nokta-girisi textarea { font-size: 13px; white-space: pre; overflow-x: auto; }
.ng-govde { display: flex; flex-direction: column; gap: 6px; }
.ng-kaynak { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 0; }
.ng-kaynak .ikon { width: 16px; height: 16px; color: var(--soluk); }
.ng-tablo-kap { max-height: 320px; overflow: auto; border: 1px solid var(--cizgi); border-radius: var(--k-2); }
.ng-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.ng-tablo th { position: sticky; top: 0; background: var(--yuzey-2); text-align: left; font-weight: 600; font-size: 12px; color: var(--soluk); padding: 6px 8px; border-bottom: 1px solid var(--cizgi); }
.ng-tablo td { padding: 0; border-bottom: 1px solid var(--cizgi); }
.ng-tablo td:last-child { width: 36px; text-align: center; }
.ng-tablo input { width: 100%; min-width: 0; height: 34px; padding: 0 8px; border: 0; background: transparent; color: var(--metin); font-size: 13px; }
.ng-tablo input:focus { outline: 2px solid var(--vurgu); outline-offset: -2px; background: var(--yuzey); }
.ng-tablo tbody tr:last-child input::placeholder { color: var(--soluk); }
.ng-tablo.okunan td { padding: 4px 8px; font-family: var(--sabit); }
.ng-durum { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ng-durum:empty { display: none; }
.ng-durum p { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.ng-durum p .ikon { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.ng-onizleme > summary { cursor: pointer; color: var(--soluk); font-size: 13px; padding: 4px 0; }
.ng-onizleme .ng-tablo { margin-top: 4px; }

/* Kontrol okumaları tablosu (hazırla sayfası, saha adımı) */
.kontrol-tablo-kap { overflow-x: auto; border: 1px solid var(--cizgi); border-radius: var(--k-2); }
.kontrol-tablo { width: 100%; border-collapse: collapse; font-size: 13px; }
.kontrol-tablo th, .kontrol-tablo td { padding: 4px 8px; border-bottom: 1px solid var(--cizgi); text-align: left; white-space: nowrap; }
.kontrol-tablo thead th { background: var(--yuzey-2); font-size: 12px; font-weight: 600; color: var(--soluk); }
.kontrol-tablo tbody tr:last-child > * { border-bottom: 0; }
.kontrol-tablo td:has(input) { padding: 0; }
.kontrol-tablo input { width: 100%; min-width: 110px; height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--metin); font-size: 13px; }
.kontrol-tablo input:focus { outline: 2px solid var(--vurgu); outline-offset: -2px; background: var(--yuzey); }
.kontrol-tablo input[aria-invalid] { color: var(--dikkat); }
.ince-ayar > summary { cursor: pointer; font-size: 12.5px; color: var(--soluk); padding: 2px 0; }
.ince-ayar[open] > summary { margin-bottom: 8px; }
.uzanti-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.uzanti-satir { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.uzanti-satir span { min-width: 36px; }
.uzanti-satir select { flex: 1; height: 30px; }
.roper-listesi { display: flex; flex-direction: column; gap: var(--a-2); }
.roper-listesi:empty { display: none; }
.roper-satir { display: grid; grid-template-columns: 90px minmax(0, 1.4fr) minmax(0, 1fr) 110px auto; gap: var(--a-2); align-items: end; }
.roper-satir .alan label { font-size: 12px; }
.roper-satir select { height: 38px; width: 100%; }
.roper-satir .ikon-dugme { margin-bottom: 4px; }
@media (max-width: 640px) { .roper-satir { grid-template-columns: 1fr 1fr; } }

/* ---------- Fen kayıt no: öneri ve çakışma uyarısı (belge sayfası) */
.fk-not { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.fk-not:empty { display: none; }
.fk-not small { font-size: 12px; }
.fk-uyari { display: flex; align-items: flex-start; gap: 6px; padding: 6px 10px; border-radius: var(--k-2); background: var(--dikkat-zemin); color: var(--dikkat); }
.fk-uyari .ikon { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.fk-uyari .bag { display: inline; color: inherit; text-decoration: underline; }

/* ---------- Fen kayıt defteri (#/fen-kayit) */
.fk-arac { align-items: center; }
.fk-yil select { width: auto; min-width: 90px; }
.fk-ozet { padding: var(--a-4) var(--a-5) 0; font-size: 13px; }
.fk-bos { padding: var(--a-5); }
.fk-yazdir-baslik { display: none; }
.fk-no { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fk-tablo .fk-tekrar td { background: var(--dikkat-zemin); }
.fk-atlanan td { padding: 5px var(--a-5); font-size: 12px; background: var(--yuzey-2); color: var(--dikkat); border-bottom: 1px dashed var(--cizgi); }
.fk-atlanan .ikon { width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }
.fk-numarasiz { margin-top: var(--a-5); border-top: 1px solid var(--cizgi); }
.fk-numarasiz h3 { padding: var(--a-4) var(--a-5) var(--a-2); font-size: 14px; }
.fk-numarasiz h3 .soluk { font-weight: 500; }

@media print {
  @page { size: A4 landscape; margin: 12mm; }
  body.ofis { background: #fff; color: #000; }
  .kenar, .ust-cubuk, .perde, .atla, .bildirimler, .sayfa-ust { display: none !important; }
  .kabuk { display: block; }
  .icerik { max-width: none; padding: 0; }
  .fk-kart { border: 0; box-shadow: none; padding: 0; background: #fff; }
  .fk-yazdir-baslik { display: block; font-size: 14px; margin-bottom: 6px; }
  .fk-ozet { padding: 0 0 8px; color: #000; }
  .fk-tablo { font-size: 11px; }
  .fk-tablo th, .fk-tablo td { padding: 3px 6px !important; border-bottom: 1px solid #888; color: #000; background: none !important; }
  .fk-tablo thead { display: table-header-group; }
  .fk-tablo tr { break-inside: avoid; }
  .fk-atlanan td { border-bottom: 1px dashed #888; font-style: italic; }
  .fk-tablo .rozet { background: none !important; color: #000 !important; border: 1px solid #888; }
  .satir-baglanti { color: #000; text-decoration: none; }
  .fk-numarasiz h3 { padding-left: 0; }
}