/* Veznora Ege Zirve: koyu yan menü, sade zemin, proje başına vurgu rengi.
   Vurgu rengi (--vurgu) gövdeye projeye göre verilir: ALİŞAN-MİLAS kobalt, VİZYONLOG-YATAĞAN bakır.
   Metin/zemin çiftleri WCAG AA (4.5:1) ve üstü kontrast sağlar. */

:root {
    --zemin: #F3F4F6;
    --kart: #FFFFFF;
    --kart-2: #FAFBFC;
    --baslik-zemin: #F8F9FB;
    --cizgi: #E3E5EA;
    --cizgi-ince: #EEF0F3;
    --cizgi-koyu: #C9CED7;
    --metin: #141821;
    --metin-2: #3B4250;
    --ikincil: #5B6372;
    --soluk: #8A919E;
    --ink: #10151F;
    --ink-2: #1B2230;
    --ink-cizgi: #252D3C;
    --ink-metin: #E7EAF0;
    --ink-ikincil: #9AA3B2;
    --vurgu: #2546C7;
    --vurgu-acik: #EBEFFC;
    --vurgu-koyu: #18308F;
    --yesil: #1F6B3A;   --yesil-acik: #E4F3E8;   --yesil-nokta: #2E9A55;
    --kirmizi: #A3261F; --kirmizi-acik: #FCE9E7; --kirmizi-nokta: #D9483B; --kirmizi-cizgi: #F3C6C1;
    --amber: #8A5A00;   --amber-acik: #FFF3D6;   --amber-nokta: #E0A21B;
    --gri: #334155;     --gri-acik: #E9EDF3;     --gri-nokta: #64748B;
    --mavi: #1D4ED8;    --mavi-acik: #E7EEFD;
    --odak: #FFDD00;
    --yari: 14px;
    --yazi: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--yazi); font-size: 14.5px; line-height: 1.5; color: var(--metin); background: var(--zemin); }
a { color: var(--vurgu); text-underline-offset: 3px; }
a:hover { color: var(--vurgu-koyu); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 600; letter-spacing: -.015em; }
h1 { font-size: 30px; letter-spacing: -.02em; }
h2 { font-size: 16px; }
h3 { font-size: 14.5px; }
.m, .plaka { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; }
.q { color: var(--soluk); }

/* ---------- Odak göstergesi ---------- */
:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--odak); outline-offset: 0; border-color: var(--metin); }
.dugme:focus-visible, button:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; }
main:focus { outline: none; }
.gorunmez { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atla { position: absolute; left: -999px; top: 0; z-index: 100; padding: .75rem 1rem; background: var(--odak); color: #0B0C0C; font-weight: 600; }
.atla:focus { left: 1rem; }

/* ---------- Yerleşim: yan menü + içerik ---------- */
.uygulama { min-height: 100vh; display: flex; flex-wrap: wrap; }
.yan {
    flex: 1 0 248px; max-width: 272px; background: var(--ink); color: var(--ink-metin);
    padding: 26px 16px; display: flex; flex-direction: column; gap: 26px;
}
.icerik { flex: 999 1 560px; min-width: 0; padding: 30px 38px 56px; display: flex; flex-direction: column; gap: 22px; }
.icerik > * { margin-bottom: 0; }

.marka { display: flex; align-items: center; gap: 11px; padding: 0 8px; color: var(--ink-metin); text-decoration: none; }
.marka:hover { color: #fff; }
.marka-isaret { width: 34px; height: 34px; border-radius: 9px; background: var(--zemin); color: var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; flex: none; }
.marka b { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.marka small { display: block; font-size: 12px; color: var(--ink-ikincil); }

.yan-grup { display: flex; flex-direction: column; gap: 4px; }
.yan-etiket { font-size: 11px; letter-spacing: .08em; color: #7D8696; padding: 0 10px 4px; text-transform: uppercase; }
.yan-proje {
    display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; min-height: 52px;
    color: var(--ink-metin); text-decoration: none; border: 1px solid transparent;
}
.yan-proje:hover { background: var(--ink-2); color: #fff; }
.yan-proje[aria-current="page"] { background: var(--ink-2); border-color: #2E3747; }
.yan-proje .nokta { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.yan-proje b { display: block; font-size: 13.5px; font-weight: 600; }
.yan-proje small { display: block; font-size: 12px; color: var(--ink-ikincil); }
.yan-proje .sayi-kucuk { margin-left: auto; font-size: 12px; color: #C9CFDA; font-variant-numeric: tabular-nums; }
.yan-link { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; color: #C9CFDA; text-decoration: none; font-size: 13.5px; }
.yan-link:hover { background: var(--ink-2); color: #fff; }
.yan-link[aria-current="page"] { background: var(--ink-2); color: #fff; }
.yan-link svg { flex: none; }
.menu-sayi { margin-left: auto; background: #F2B33D; color: #241A04; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.yan-kullanici { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 14px 10px 0; border-top: 1px solid var(--ink-cizgi); }
.yan-kullanici .avatar { width: 32px; height: 32px; border-radius: 50%; background: #2A3344; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.yan-kullanici b { display: block; font-size: 13px; font-weight: 500; }
.yan-kullanici small { display: block; font-size: 11.5px; color: var(--ink-ikincil); }
.yan-kullanici form { margin: 0 0 0 auto; }
.yan-kullanici button { background: transparent; border: 1px solid #3A4456; color: #C9CFDA; font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 8px; cursor: pointer; min-height: 32px; }
.yan-kullanici button:hover { background: var(--ink-2); color: #fff; }

/* Giriş/kurulum: yan menüsüz, ortalanmış */
.yalin { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.giris-kutu { width: 100%; max-width: 440px; }

/* ---------- Sayfa başlığı ---------- */
.sayfa-baslik { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sayfa-baslik > div:first-child { display: flex; flex-direction: column; gap: 6px; margin-right: auto; }
.sayfa-baslik h1 { margin: 0; }
.ust-baslik { align-self: flex-start; margin: 0; font-size: 12px; font-weight: 500; color: var(--vurgu-koyu); background: var(--vurgu-acik); padding: 4px 10px; border-radius: 999px; }
.alt-baslik { margin: 0; color: var(--ikincil); font-size: 13.5px; }
.dugme-grubu { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- Kart ---------- */
.kart { background: var(--kart); border: 1px solid var(--cizgi); border-radius: var(--yari); padding: 20px 22px; }
.kart > h2:first-child { margin-bottom: 14px; }
.tablo-kart { padding: 0; overflow: hidden; }
.tablo-ozet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; margin: 0; border-bottom: 1px solid var(--cizgi); font-size: 16px; font-weight: 600; }
.tablo-ozet small, .tablo-ozet .alt { font-size: 12.5px; font-weight: 400; color: var(--ikincil); }
.tablo-kart > .bos, .tablo-kart > .sayfalama { padding: 20px; margin: 0; }
.kart-ic { padding: 16px 20px 20px; border-top: 1px solid var(--cizgi); }
.bos { color: var(--ikincil); text-align: center; padding: 36px 16px; margin: 0; }

/* ---------- Düğmeler ---------- */
.dugme, button {
    font: inherit; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; line-height: 1.2; font-size: 13.5px;
}
.dugme-birincil { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.dugme-birincil:hover { background: var(--vurgu-koyu); border-color: var(--vurgu-koyu); color: #fff; }
.dugme-ikincil, .dugme-kucuk { background: #fff; color: var(--metin); border-color: #D5D9E0; }
.dugme-ikincil:hover, .dugme-kucuk:hover { background: var(--kart-2); border-color: var(--cizgi-koyu); color: var(--metin); }
.dugme-tehlike { background: #fff; color: var(--kirmizi); border-color: var(--kirmizi-cizgi); }
.dugme-tehlike:hover { background: var(--kirmizi); color: #fff; border-color: var(--kirmizi); }
.dugme-koyu { background: var(--ink); color: #fff; border-color: var(--ink); }
.dugme-koyu:hover { background: #000; color: #fff; }
.dugme-kucuk { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.dugme-genis { width: 100%; }
.dugme.mesgul { opacity: .7; cursor: progress; }

/* ---------- Bildirimler ---------- */
.bildirim { padding: 13px 16px; border-radius: 12px; font-weight: 500; border: 1px solid; font-size: 13.5px; }
.bildirim-basari { background: var(--yesil-acik); border-color: #BFE3C9; color: var(--yesil); }
.bildirim-hata { background: var(--kirmizi-acik); border-color: var(--kirmizi-cizgi); color: var(--kirmizi); }
.not-kutusu { background: var(--amber-acik); border: 1px solid #F1D79A; color: var(--amber); padding: 13px 16px; border-radius: 12px; font-size: 13.5px; }
.not-kutusu p { margin: 0 0 .25rem; }
.not-kutusu ul { margin: .25rem 0 0; padding-left: 1.1rem; }
.hata-ozeti { background: var(--kirmizi-acik); border: 1px solid var(--kirmizi-cizgi); border-radius: var(--yari); padding: 16px 18px; color: #7E1D17; }
.hata-ozeti h2 { color: #7E1D17; font-size: 14.5px; margin: 0 0 6px; }
.hata-ozeti ul { margin: 0; padding-left: 1.1rem; }
.hata-ozeti a { color: var(--kirmizi); font-weight: 600; }

/* ---------- Form ---------- */
.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; align-items: start; }
.izgara-2col { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.izgara-2col > * { flex: 1 1 380px; min-width: 0; }
.alan { margin-bottom: 14px; }
.alan label { display: block; font-weight: 500; font-size: 13px; margin-bottom: 6px; color: var(--metin-2); }
.zorunlu { color: var(--kirmizi); font-weight: 500; font-size: 12px; }
.istege-bagli { color: var(--soluk); font-weight: 400; font-size: 12px; }
.ipucu { margin: -2px 0 6px; color: var(--ikincil); font-size: 12.5px; }
input[type=text], input[type=search], input[type=tel], input[type=password], input[type=date], input[type=number], select, textarea {
    font: inherit; font-size: max(14px, 16px); display: block; width: 100%; min-width: 0; height: 44px; padding: 0 12px;
    border: 1px solid #D5D9E0; border-radius: 10px; background: #fff; color: var(--metin); -webkit-appearance: none; appearance: none;
}
@media (min-width: 721px) { input[type=text], input[type=search], input[type=tel], input[type=password], input[type=date], input[type=number], select, textarea { font-size: 14px; } }
textarea { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; }
select { padding-right: 2.4rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B6372' stroke-width='1.8'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; }
input:hover, select:hover, textarea:hover { border-color: var(--cizgi-koyu); }
input[type=file] { font: inherit; font-size: 13px; max-width: 100%; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--vurgu); vertical-align: middle; }
[data-buyuk] { text-transform: uppercase; }
.alan-hatali input, .alan-hatali select, .alan-hatali textarea { border-color: var(--kirmizi-nokta); }
.hata-mesaji { color: var(--kirmizi); font-weight: 500; font-size: 12.5px; margin: -2px 0 6px; }
.bolum { border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 16px 6px; margin: 0 0 16px; min-width: 0; }
.bolum legend { font-weight: 600; font-size: 13.5px; padding: 0 6px; color: var(--metin); }
.bolum-acilir summary { cursor: pointer; font-weight: 600; font-size: 13.5px; min-height: 40px; display: flex; align-items: center; }
.filtre { display: flex; flex-direction: column; gap: 4px; }
.filtre .izgara { align-items: end; }
.filtre-dugmeler { display: flex; gap: 8px; flex-wrap: wrap; }
.satir-form { display: flex; gap: 6px; margin: 0; align-items: center; }
.parola-form input { height: 36px; max-width: 170px; font-size: 13px; }
.satir-ekle { margin-bottom: 8px; }
.kucuk-not { font-size: 12.5px; color: var(--ikincil); margin: 4px 0 0; }

/* ---------- Tablo ---------- */
.tablo-sarmal { overflow-x: auto; position: relative; }
.tablo { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tablo th {
    text-align: left; background: var(--baslik-zemin); color: var(--ikincil); font-weight: 500; font-size: 11.5px; letter-spacing: .02em;
    padding: 11px 14px; border-bottom: 1px solid var(--cizgi); white-space: nowrap;
}
.tablo td { padding: 12px 14px; border-bottom: 1px solid var(--cizgi-ince); vertical-align: middle; }
.tablo tbody tr:hover td { background: var(--kart-2); }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo .sayi, .tablo th.sayi { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tablo td.plaka { font-weight: 500; white-space: nowrap; }
.tablo tfoot td { background: var(--baslik-zemin); font-weight: 600; border-top: 1px solid var(--cizgi); border-bottom: 0; }
.tablo-sefer td { white-space: nowrap; }
.tablo-sefer tr.tikla { cursor: pointer; }
.tablo-sefer tr.iptal td { color: var(--soluk); text-decoration: line-through; }
.kart .tablo-sarmal { margin: 0 -22px -20px; }
.kart.tablo-kart .tablo-sarmal { margin: 0; }
.sayfalama { display: flex; align-items: center; justify-content: center; gap: 12px; }

/* ---------- Rozet / durum çipi ---------- */
.rozet, .cip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; white-space: nowrap; vertical-align: middle; }
.cip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }
.rozet-gecerli, .cip-hazir { color: var(--yesil); background: var(--yesil-acik); }
.rozet-iptal, .cip-kontrol { color: var(--kirmizi); background: var(--kirmizi-acik); }
.rozet-eksik, .cip-eksik { color: var(--amber); background: var(--amber-acik); }
.rozet-bekliyor, .cip-bekliyor { color: var(--mavi); background: var(--mavi-acik); }
.rozet-odendi, .cip-odendi { color: var(--gri); background: var(--gri-acik); }
.rozet-pasif, .cip-iptal { color: var(--ikincil); background: #F1F3F6; }
.etiket { font-size: 12px; background: #F1F3F6; color: var(--metin-2); padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.neden { display: block; font-size: 11.5px; color: #8A3B33; margin-top: 3px; white-space: nowrap; }
.sorun-link { display: block; margin-top: .25rem; font-size: 12px; color: var(--kirmizi); }

/* ---------- Özet kartları (eski sayfalar) ---------- */
.ozet-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.ozet-kutu { background: var(--kart); border: 1px solid var(--cizgi); border-radius: 12px; padding: 14px 16px; }
.ozet-kutu dt { color: var(--ikincil); font-size: 12.5px; }
.ozet-kutu dd { margin: 4px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ozet-kutu dt a { color: inherit; }
.ozet-ana { background: var(--ink); border-color: var(--ink); }
.ozet-ana dt, .ozet-ana dd { color: #fff; }

/* ---------- Proje sayfası ---------- */
.donem { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--cizgi); border-radius: 10px; padding: 4px; }
.donem a { font-size: 13px; color: var(--metin-2); padding: 8px 14px; border-radius: 7px; text-decoration: none; }
.donem a:hover { background: var(--zemin); }
.donem a[aria-current="true"] { background: var(--ink); color: #fff; font-weight: 500; }
.donem .ayrac { width: 1px; height: 22px; background: var(--cizgi); margin: 0 4px; }
.donem form { display: flex; align-items: center; gap: 4px; margin: 0; }
.donem input[type=date] { height: 34px; width: 150px; font-size: 13px; padding: 0 8px; border-radius: 7px; }
.donem button { min-height: 34px; padding: 0 10px; font-size: 13px; border-radius: 7px; background: var(--zemin); border: 0; }

.ozet-panel { display: flex; flex-direction: column; gap: 18px; }
.kpi-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi {
    display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-decoration: none; color: var(--metin);
    padding: 14px 16px; border-radius: 11px; min-height: 104px; background: var(--kart-2); border: 1.5px solid var(--cizgi-ince);
}
.kpi:hover { border-color: var(--cizgi-koyu); color: var(--metin); }
.kpi[aria-current="true"] { background: var(--vurgu-acik); border-color: var(--vurgu); }
.kpi-ad { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ikincil); }
.kpi-ad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--nokta, var(--ink)); }
.kpi-sayi { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-alt { font-size: 12px; color: var(--ikincil); font-variant-numeric: tabular-nums; }
.serit { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--cizgi-ince); }
.serit span { display: block; height: 100%; }
.serit-etiket { font-size: 12.5px; color: var(--ikincil); margin: 0; }

.yukle-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.yukle-alan {
    position: relative; display: flex; align-items: center; gap: 16px; background: #fff; border: 1.5px dashed var(--cizgi-koyu);
    border-radius: var(--yari); padding: 18px 20px; cursor: pointer; min-height: 84px;
}
.yukle-alan:hover, .yukle-alan.surukle { border-color: var(--vurgu); background: var(--vurgu-acik); }
.yukle-alan:focus-within { outline: 3px solid var(--odak); outline-offset: 2px; }
.yukle-ikon { width: 44px; height: 44px; border-radius: 11px; background: #F1F3F6; display: flex; align-items: center; justify-content: center; color: var(--metin-2); flex: none; }
.yukle-alan b { display: block; font-size: 14px; font-weight: 600; }
.yukle-alan small { display: block; font-size: 12.5px; color: var(--ikincil); }
.yukle-alan input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.yukle-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.yukle-liste:empty { display: none; }
.yukle-liste li { display: flex; align-items: center; gap: 10px; font-size: 13px; background: #fff; border: 1px solid var(--cizgi-ince); border-radius: 10px; padding: 9px 12px; }
.yukle-liste li .ad { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yukle-liste li .sonuc { font-size: 12.5px; color: var(--ikincil); }

.ara-kutu { display: flex; align-items: center; gap: 8px; border: 1px solid var(--cizgi); border-radius: 9px; padding: 0 12px; height: 38px; min-width: 240px; color: var(--ikincil); margin: 0; }
.ara-kutu input { border: 0; outline: 0; height: 36px; padding: 0; font-size: 13px; background: transparent; }
.ara-kutu input:focus-visible { outline: 0; }
.ara-kutu:focus-within { outline: 3px solid var(--odak); outline-offset: 0; }

.esles-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 10px; }
.esles-kart { display: flex; gap: 14px; border: 1px solid var(--cizgi-ince); border-radius: 12px; padding: 12px 14px; align-items: flex-start; }
.esles-kucuk { width: 52px; height: 64px; border-radius: 7px; background: #F1F3F6; border: 1px solid var(--cizgi); display: flex; align-items: center; justify-content: center; color: var(--soluk); flex: none; font-size: 10.5px; font-weight: 600; overflow: hidden; }
.esles-kucuk img { width: 100%; height: 100%; object-fit: cover; }
.esles-govde { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.esles-govde b { font-size: 13.5px; font-weight: 600; }
.esles-govde small { font-size: 12.5px; color: var(--ikincil); }
.esles-govde form { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; align-items: center; }
.esles-govde select { height: 36px; font-size: 13px; width: auto; flex: 1 1 200px; border-radius: 9px; }
.uyari-ikon { width: 28px; height: 28px; border-radius: 8px; background: var(--amber-acik); color: var(--amber); display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------- Sefer detayı ---------- */
.konum-yolu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ikincil); margin: 0; }
.konum-yolu a { color: var(--ikincil); text-decoration: none; }
.konum-yolu a:hover { color: var(--metin); }
.engel-serit { display: flex; align-items: flex-start; gap: 14px; background: var(--kirmizi-acik); border: 1px solid var(--kirmizi-cizgi); border-radius: var(--yari); padding: 16px 18px; color: #7E1D17; }
.engel-serit ul { margin: 4px 0 0; padding-left: 1.1rem; color: #8A3B33; font-size: 13.5px; }
.engel-serit b { font-size: 14.5px; }
.engel-ikon { width: 32px; height: 32px; border-radius: 9px; background: #fff; color: var(--kirmizi); display: flex; align-items: center; justify-content: center; flex: none; }
.uyari-serit { display: flex; align-items: flex-start; gap: 14px; background: var(--amber-acik); border: 1px solid #F1D79A; border-radius: var(--yari); padding: 16px 18px; color: var(--amber); }
.uyari-serit.onayli { background: var(--yesil-acik); border-color: #BFE3C9; color: var(--yesil); }
.uyari-serit ul { margin: 4px 0 8px; padding-left: 1.1rem; font-size: 13.5px; }
.belge-kart { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.belge-kart-bas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cizgi-ince); }
.belge-kart-bas h2 { margin: 0; font-size: 15px; }
.belge-kart-bas small { margin-left: auto; font-size: 12px; color: var(--ikincil); }
.belge-onizleme { display: block; width: 100%; height: 260px; object-fit: contain; background: var(--cizgi-ince); border: 0; }
iframe.belge-onizleme { height: 360px; }
.belge-bos { height: 160px; display: flex; align-items: center; justify-content: center; background: var(--cizgi-ince); color: var(--soluk); font-size: 13px; }
.belge-form { padding: 14px 16px; }
.belge-form .izgara { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.belge-form .alan { margin-bottom: 10px; }
.belge-form .alan label { font-size: 11.5px; color: var(--ikincil); font-weight: 500; }
.belge-form input { height: 38px; font-size: 13px; border-radius: 9px; }
.kontrol-liste { list-style: none; margin: 0; padding: 0; }
.kontrol-liste li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--cizgi-ince); font-size: 13.5px; }
.kontrol-liste li:last-child { border-bottom: 0; }
.kontrol-liste .ik { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.kontrol-liste .ik-ok { background: var(--yesil-acik); color: var(--yesil); }
.kontrol-liste .ik-uyari { background: var(--amber-acik); color: var(--amber); }
.kontrol-liste .ik-engel { background: var(--kirmizi-acik); color: var(--kirmizi); }
.kontrol-liste .deger { margin-left: auto; font-size: 12.5px; color: var(--ikincil); font-variant-numeric: tabular-nums; text-align: right; }
.hesap-kart { background: var(--ink); color: var(--ink-metin); border-radius: var(--yari); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.hesap-kart .tutar { font-size: 32px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hesap-kart small { font-size: 12.5px; color: var(--ink-ikincil); }
.hesap-kart .ayir { height: 1px; background: var(--ink-cizgi); }
.hesap-kart .satir { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.hesap-kart .satir span:first-child { color: #B5BDCA; }
.hesap-kart .satir span:last-child { font-variant-numeric: tabular-nums; }
.hesap-kart .aciklama { background: var(--ink-2); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: #B5BDCA; line-height: 1.55; }
.hesap-kart a { color: #C9D6FF; }
.zaman-cizgi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.zaman-cizgi li { display: flex; gap: 12px; font-size: 13px; }
.zaman-cizgi li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cizgi-koyu); margin-top: 6px; flex: none; }
.zaman-cizgi small { display: block; font-size: 12px; color: var(--ikincil); }

/* Eski sayfalarda kullanılan parçalar */
.kayit-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 24px; margin: 0; }
.kayit-bilgi div { display: flex; justify-content: space-between; gap: 1rem; padding: 9px 0; border-bottom: 1px solid var(--cizgi-ince); font-size: 13.5px; }
.kayit-bilgi dt { color: var(--ikincil); }
.kayit-bilgi dd { margin: 0; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.sabit-bilgi { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--vurgu-acik); }
.sabit-bilgi dt { font-size: 11.5px; color: var(--vurgu-koyu); }
.sabit-bilgi dd { margin: 0; font-weight: 600; }
.sorun-listesi, .not-listesi { margin: 0 0 12px; padding-left: 1.1rem; font-size: 13.5px; }
.sorun-listesi { color: var(--kirmizi); }
.not-listesi { color: var(--amber); }
.hesap-tablo td:last-child, .hesap-tablo th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kalem-tablo input { height: 36px; padding: 0 8px; font-size: 13px; min-width: 90px; border-radius: 8px; }
.kalem-tablo td { padding: 6px 6px; }
.kalem-tablo td:nth-child(2) input { min-width: 220px; }
.kalem-tablo tr.kalem-bu td { background: var(--yesil-acik) !important; }
.gecmis-deger { font-size: 12px; overflow-wrap: anywhere; max-width: 260px; white-space: normal; }
.iban-karar { display: grid; gap: 6px; min-width: 220px; margin: 0; }
.iban-karar input { height: 36px; font-size: 13px; }
.dosya-girdi { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bolum .tablo-sarmal { margin: 0; max-width: 100%; }
details > summary.tablo-ozet { cursor: pointer; list-style: revert; }

/* ---------- Dar ekran ---------- */
@media (max-width: 900px) {
    .yan { max-width: none; flex-basis: 100%; padding: 16px; gap: 14px; }
    .yan-grup { flex-direction: row; flex-wrap: wrap; }
    .yan-etiket { display: none; }
    .yan-proje, .yan-link { flex: 1 1 auto; }
    .yan-kullanici { margin-top: 0; }
    .icerik { padding: 20px 16px 40px; }
    h1 { font-size: 24px; }
    .ara-kutu { min-width: 0; flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
.belge-form .alan-genis { grid-column: 1 / -1; }
.belge-form .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.onizleme-sar { position: relative; background: var(--cizgi-ince); overflow: hidden; }
.onizleme-sar img { transition: transform .2s; }
.onizleme-sar .dondur { position: absolute; right: 10px; bottom: 10px; min-height: 34px; padding: 0 10px; font-size: 12.5px; background: rgba(16, 21, 31, .82); color: #fff; border: 0; border-radius: 8px; }
.onizleme-sar .dondur:hover { background: var(--ink); }

/* ---------- Tablo: ekrana sığan kutu, sabit başlık ve ilk iki sütun, Excel tarzı filtre ---------- */
.tablo-kutu { max-height: calc(100vh - 110px); overflow: auto; }
.tablo-kutu thead th { position: sticky; top: 0; z-index: 3; }
.tablo-kutu tfoot td { position: sticky; bottom: 0; z-index: 3; }
.tablo-kutu .sabit { position: sticky; z-index: 2; background: var(--kart); }
.tablo-kutu thead th.sabit { z-index: 4; background: var(--baslik-zemin); }
.tablo-kutu tfoot td.sabit { z-index: 4; background: var(--baslik-zemin); }
.tablo-kutu .sabit-0 { left: 0; min-width: 112px; max-width: 112px; }
.tablo-kutu .sabit-1 { left: 112px; box-shadow: 1px 0 0 var(--cizgi); }
.tablo-kutu tbody tr:hover td.sabit { background: var(--kart-2); }
.th-ic { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tablo th.sayi .th-ic { justify-content: flex-end; }
.filtre-btn { min-height: 24px; width: 24px; padding: 0; border-radius: 6px; border: 1px solid transparent; background: transparent; color: var(--soluk); flex: none; }
.filtre-btn:hover { border-color: var(--cizgi-koyu); color: var(--metin); background: #fff; }
.filtre-btn.aktif { background: var(--vurgu); color: #fff; border-color: var(--vurgu); }
.filtre-btn.sirali { color: var(--vurgu); border-color: var(--vurgu); }
.filtre-cubuk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 20px; border-bottom: 1px solid var(--cizgi); background: var(--vurgu-acik); }
.filtre-sayac { font-size: 12.5px; font-weight: 500; color: var(--vurgu-koyu); }
.filtre-cipler { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.filtre-cip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 2px 4px 2px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--vurgu); color: var(--vurgu-koyu); }
.filtre-cip button { min-height: 22px; width: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--vurgu-koyu); font-size: 13px; }
.filtre-cip button:hover { background: var(--vurgu-acik); }
.filtre-menu {
    position: fixed; z-index: 60; width: 280px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--cizgi-koyu);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 21, 31, .16); padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 13px;
}
.filtre-menu .baslik { font-weight: 600; font-size: 13px; }
.filtre-menu .sirala { display: flex; gap: 6px; }
.filtre-menu .sirala button { flex: 1; min-height: 34px; font-size: 12.5px; padding: 0 8px; border: 1px solid #D5D9E0; background: #fff; border-radius: 8px; }
.filtre-menu .sirala button[aria-pressed="true"] { border-color: var(--vurgu); color: var(--vurgu-koyu); background: var(--vurgu-acik); }
.filtre-menu input[type=search], .filtre-menu input[type=text] { height: 36px; font-size: 13px; border-radius: 8px; }
.filtre-menu .aralik { display: flex; gap: 6px; }
.filtre-liste { max-height: 230px; overflow: auto; display: flex; flex-direction: column; border: 1px solid var(--cizgi-ince); border-radius: 8px; padding: 4px; }
.filtre-liste label { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-weight: 400; color: var(--metin); }
.filtre-liste label:hover { background: var(--zemin); }
.filtre-liste label span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filtre-liste .adet { color: var(--soluk); font-size: 12px; font-variant-numeric: tabular-nums; }
.filtre-liste .tumu { border-bottom: 1px solid var(--cizgi-ince); margin-bottom: 2px; font-weight: 500; }
.filtre-menu .alt { display: flex; gap: 6px; justify-content: flex-end; }
.filtre-menu .alt button { min-height: 34px; font-size: 13px; padding: 0 12px; border-radius: 8px; }
.filtre-cubuk[hidden], .filtre-bos[hidden], .tablo-sefer tr[hidden] { display: none; }