/* ==========================================================================
   Lojix Admin Panel — M13.05
   Tum renkler _Layout.cshtml icinde applicationconfig.json'dan uretilen CSS
   degiskenlerinden gelir. BU DOSYADA SABIT RENK KODU YOKTUR; palet degisince
   panel de degisir. Dis kaynak (CDN, web font) kullanilmaz.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--govde);
    background: var(--yuzey);
}

a { color: var(--birincil); }
a:hover { color: var(--vurgu-metin); }

h1, h2, h3 { margin: 0 0 12px; color: var(--birincil); font-weight: 700; line-height: 1.25; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

p { margin: 0 0 12px; }

/* ---------------------------------------------------------------- DUZEN */
.kabuk { display: flex; min-height: 100vh; }

.yan {
    width: 232px;
    flex: 0 0 232px;
    background: var(--birincil);
    color: #fff;
    display: flex;
    flex-direction: column;
}

.yan-marka {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Ikon marka renginde (lacivert) uretilmistir; koyu yan menude kaybolmamasi
   icin beyaz bir zemine oturtulur. */
.yan-marka img {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 7px;
    background: #fff;
    padding: 3px;
}

.yan-marka .ad { font-size: 14px; font-weight: 700; letter-spacing: .2px; line-height: 1.25; }
.yan-marka .alt { font-size: 11px; color: var(--birincil-sonuk); }

.yan-menu { list-style: none; margin: 0; padding: 10px 0; flex: 1; }

.yan-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: var(--birincil-sonuk);
    text-decoration: none;
    font-size: 13.5px;
    border-left: 3px solid transparent;
}

.yan-menu a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

.yan-menu a.etkin {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-left-color: var(--vurgu);
    font-weight: 600;
}

.yan-menu .rozet {
    margin-left: auto;
    background: var(--vurgu);
    color: #24160a;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 9px;
}

.yan-alt {
    padding: 12px 18px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 11.5px;
    color: var(--birincil-sonuk);
}

.icerik { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.ust {
    background: #fff;
    border-bottom: 1px solid var(--kenarlik);
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ust .baslik { font-size: 17px; font-weight: 700; color: var(--birincil); }
.ust .sag { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ust .kullanici { font-size: 13px; color: var(--sonuk); }
.ust .kullanici b { color: var(--govde); }

main { padding: 20px 24px 32px; flex: 1; }

.alt-bilgi {
    padding: 12px 24px;
    border-top: 1px solid var(--kenarlik);
    font-size: 11.5px;
    color: var(--sonuk);
    background: #fff;
}

/* ---------------------------------------------------------------- KART */
.kart {
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: 8px;
    margin-bottom: 18px;
}

.kart-baslik {
    padding: 12px 16px;
    border-bottom: 1px solid var(--kenarlik);
    display: flex;
    align-items: center;
    gap: 12px;
}

.kart-baslik h2 { margin: 0; }
.kart-baslik .sag { margin-left: auto; }
.kart-govde { padding: 16px; }

/* ------------------------------------------------------------- SAYACLAR */
.sayaclar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.sayac {
    background: #fff;
    border: 1px solid var(--kenarlik);
    border-radius: 8px;
    padding: 14px 16px;
}

.sayac .etiket {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--sonuk);
}

.sayac .deger {
    font-size: 26px;
    font-weight: 700;
    color: var(--birincil);
    line-height: 1.2;
    margin-top: 4px;
}

.sayac .aciklama { font-size: 11.5px; color: var(--sonuk); }
.sayac.vurgulu { border-color: var(--vurgu); }
.sayac.vurgulu .deger { color: var(--vurgu-metin); }

/* --------------------------------------------------------------- TABLO */
.tablo-sarmal { overflow-x: auto; }

table.tablo {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.tablo th,
table.tablo td {
    padding: 9px 12px;
    text-align: left;
    border-bottom: 1px solid var(--kenarlik);
    vertical-align: top;
}

table.tablo th {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--sonuk);
    background: var(--yuzey);
    white-space: nowrap;
}

table.tablo tbody tr:hover { background: var(--yuzey); }
table.tablo td.sayi { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.tablo td.daralt { white-space: nowrap; }
table.tablo .ikincil { display: block; font-size: 11.5px; color: var(--sonuk); }

/* --------------------------------------------------------------- ROZET */
.rozet {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--kenarlik);
    background: var(--yuzey);
    color: var(--govde);
}

.rozet.bekleyen { background: var(--vurgu-acik); border-color: var(--vurgu); color: var(--vurgu-metin-acik); }
.rozet.olumlu   { background: #E7F4EC; border-color: #9CCFB0; color: #1D6B3A; }
.rozet.olumsuz  { background: #FBE9E9; border-color: #E4A9A9; color: #9B2226; }
.rozet.notr     { background: var(--yuzey); border-color: var(--kenarlik); color: var(--sonuk); }
.rozet.surec    { background: #E8EEF6; border-color: #A9BFD8; color: var(--birincil); }

/* --------------------------------------------------------------- BUTON */
.dugme {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid var(--birincil);
    background: var(--birincil);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.4;
}

.dugme:hover { filter: brightness(1.12); color: #fff; }
.dugme:disabled, .dugme.pasif { opacity: .5; cursor: not-allowed; filter: none; }

.dugme.ikincil { background: #fff; color: var(--birincil); }
.dugme.ikincil:hover { background: var(--yuzey); color: var(--birincil); }

.dugme.tehlike { background: #9B2226; border-color: #9B2226; }
.dugme.vurgu { background: var(--vurgu); border-color: var(--vurgu); color: #24160a; }
.dugme.vurgu:hover { color: #24160a; }
.dugme.kucuk { padding: 4px 10px; font-size: 12px; }

/* ---------------------------------------------------------------- FORM */
.form-satir { margin-bottom: 14px; }
.form-satir label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }

.form-satir input[type=text],
.form-satir input[type=email],
.form-satir input[type=password],
.form-satir input[type=date],
.form-satir input[type=number],
.form-satir select,
.form-satir textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--kenarlik);
    border-radius: 6px;
    font-size: 13.5px;
    font-family: inherit;
    color: var(--govde);
    background: #fff;
}

.form-satir input:focus,
.form-satir select:focus,
.form-satir textarea:focus {
    outline: 2px solid var(--vurgu);
    outline-offset: 1px;
    border-color: var(--vurgu);
}

.form-satir .yardim { font-size: 11.5px; color: var(--sonuk); margin-top: 4px; }
.form-satir .hata { font-size: 12px; color: #9B2226; margin-top: 4px; }

.filtre {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.filtre .form-satir { margin-bottom: 0; min-width: 150px; }
.filtre .form-satir.genis { flex: 1; min-width: 220px; }

/* -------------------------------------------------------------- UYARI */
.uyari {
    padding: 11px 14px;
    border-radius: 7px;
    border: 1px solid var(--kenarlik);
    background: var(--yuzey);
    margin-bottom: 16px;
    font-size: 13.5px;
}

.uyari.basari { background: #E7F4EC; border-color: #9CCFB0; color: #1D6B3A; }
.uyari.hata   { background: #FBE9E9; border-color: #E4A9A9; color: #9B2226; }
.uyari.bilgi  { background: var(--vurgu-acik); border-color: var(--vurgu); color: var(--vurgu-metin-acik); }
.uyari b { font-weight: 700; }
.uyari ul { margin: 6px 0 0; padding-left: 20px; }

/* --------------------------------------------------------- BOS DURUM */
.bos-durum {
    text-align: center;
    padding: 40px 20px;
    color: var(--sonuk);
}

.bos-durum .simge {
    width: 46px; height: 46px; line-height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--yuzey);
    border: 1px solid var(--kenarlik);
    font-size: 22px;
    color: var(--sonuk);
}

.bos-durum .baslik { font-size: 15px; font-weight: 600; color: var(--govde); margin-bottom: 4px; }

/* --------------------------------------------------------- SAYFALAMA */
.sayfalama {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--kenarlik);
    font-size: 13px;
    flex-wrap: wrap;
}

.sayfalama .bilgi { color: var(--sonuk); margin-right: auto; }

.sayfalama a, .sayfalama span.gecerli {
    display: inline-block;
    min-width: 32px;
    text-align: center;
    padding: 4px 8px;
    border: 1px solid var(--kenarlik);
    border-radius: 6px;
    text-decoration: none;
    color: var(--birincil);
    background: #fff;
}

.sayfalama a:hover { background: var(--yuzey); }
.sayfalama span.gecerli { background: var(--birincil); color: #fff; border-color: var(--birincil); }
.sayfalama span.pasif { color: var(--sonuk); padding: 4px 8px; }

/* ------------------------------------------------------------- DETAY */
.detay-izgara {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

dl.alanlar { margin: 0; display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 7px 14px; }
dl.alanlar dt { font-size: 12px; color: var(--sonuk); font-weight: 600; }
dl.alanlar dd { margin: 0; font-size: 13.5px; word-break: break-word; }

.zaman-cizgisi { list-style: none; margin: 0; padding: 0; }

.zaman-cizgisi li {
    position: relative;
    padding: 0 0 14px 20px;
    border-left: 2px solid var(--kenarlik);
}

.zaman-cizgisi li:last-child { border-left-color: transparent; padding-bottom: 0; }

.zaman-cizgisi li::before {
    content: "";
    position: absolute;
    left: -6px; top: 4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--vurgu);
    border: 2px solid #fff;
}

.zaman-cizgisi .ne { font-size: 13.5px; font-weight: 600; }
.zaman-cizgisi .ne-zaman { font-size: 11.5px; color: var(--sonuk); }
.zaman-cizgisi .not { font-size: 12.5px; color: var(--govde); margin-top: 2px; }

/* -------------------------------------------------------------- GIRIS */
.giris-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--birincil);
    padding: 20px;
}

.giris-kutu {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: 10px;
    padding: 28px;
}

.giris-kutu .marka { text-align: center; margin-bottom: 20px; }
.giris-kutu .marka img { width: 56px; height: 56px; border-radius: 12px; }
.giris-kutu .marka .ad { font-size: 18px; font-weight: 700; color: var(--birincil); margin-top: 8px; }
.giris-kutu .marka .alt { font-size: 12px; color: var(--sonuk); }
.giris-kutu .dugme { width: 100%; justify-content: center; margin-top: 4px; }

/* ------------------------------------------------------------- YARDIM */
.sag { text-align: right; }
.sonuk { color: var(--sonuk); }
.kucuk { font-size: 12px; }
.bosluk-ust { margin-top: 16px; }
.satir-arasi { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------- KILAVUZ
   M16.12 — Sistem kilavuzu sayfasinin bilesenleri. Sayfaya satir ici stil
   YAZILMAZ; kilavuzun ihtiyaci olan duzenler burada, ortak yerde tanimlidir. */

.kilavuz { max-width: 900px; }
.kilavuz h2 { font-size: 17px; color: var(--birincil); margin: 0 0 4px; }
.kilavuz h3 { font-size: 14px; color: var(--birincil); margin: 22px 0 6px; }
.kilavuz p { margin: 0 0 10px; }
.kilavuz ul, .kilavuz ol { margin: 0 0 10px; padding-left: 20px; }
.kilavuz li { margin: 5px 0; }
.kilavuz code {
    font-family: Consolas, "Courier New", monospace;
    background: var(--yuzey);
    border: 1px solid var(--kenarlik);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 12px;
}

/* Kilavuzlar arasi gecis seridi */
.kilavuz-sekme { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kilavuz-sekme a {
    display: block;
    padding: 8px 14px;
    border: 1px solid var(--kenarlik);
    border-radius: 6px;
    background: #fff;
    color: var(--birincil);
    text-decoration: none;
    font-size: 13px;
}
.kilavuz-sekme a:hover { border-color: var(--vurgu); }
.kilavuz-sekme a.etkin {
    background: var(--birincil);
    border-color: var(--birincil);
    color: #fff;
    font-weight: 600;
}
.kilavuz-sekme a .kim { display: block; font-size: 11px; opacity: .75; font-weight: 400; }

/* Icindekiler */
.kilavuz-icindekiler { display: flex; flex-wrap: wrap; gap: 8px; }
.kilavuz-icindekiler a {
    display: block;
    padding: 7px 12px;
    background: var(--yuzey);
    border: 1px solid var(--kenarlik);
    border-radius: 6px;
    font-size: 13px;
    color: var(--birincil);
    text-decoration: none;
}
.kilavuz-icindekiler a:hover { border-color: var(--vurgu); }

/* Akis seridi: adimlar ve aralarindaki oklar */
.akis { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 14px 0; }
.akis .adim {
    flex: 1 1 128px;
    background: var(--yuzey);
    border: 1px solid var(--kenarlik);
    border-top: 3px solid var(--birincil);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 12px;
}
.akis .adim .no { font-size: 10px; font-weight: 700; color: var(--sonuk); letter-spacing: .5px; }
.akis .adim .ad { font-weight: 600; color: var(--birincil); margin-top: 2px; }
.akis .adim .kim { color: var(--sonuk); margin-top: 3px; }
.akis .adim.bitis { border-top-color: var(--vurgu); }

/* Rol kartlari */
.roller { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.roller .rol {
    border: 1px solid var(--kenarlik);
    border-radius: 8px;
    padding: 12px 14px;
    background: #fff;
}
.roller .rol h4 { margin: 0 0 6px; font-size: 13px; color: var(--birincil); }
.roller .rol ul { margin: 0; padding-left: 17px; font-size: 12px; }
.roller .rol .nerede {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--vurgu-metin);
    font-weight: 600;
}

/* Kural kutusu — "neden boyle" aciklamalari */
.kural {
    border-left: 4px solid var(--vurgu);
    background: var(--vurgu-acik);
    color: var(--vurgu-metin-acik);
    padding: 10px 14px;
    margin: 12px 0;
    font-size: 13px;
    line-height: 1.6;
}
.kural b { color: var(--vurgu-metin-acik); }

@media (max-width: 860px) {
    .kabuk { flex-direction: column; }
    .yan { width: 100%; flex: none; }
    .yan-menu { display: flex; flex-wrap: wrap; padding: 4px 0; }
    .yan-menu a { border-left: none; border-bottom: 3px solid transparent; }
    .yan-menu a.etkin { border-left: none; border-bottom-color: var(--vurgu); }
}