/* =========================================================================
   KENAN METAL · UYUMSOFT RAPOR KONSOLU
   Kurumsal endüstriyel panel — petrol mavisi (#00567D) + çelik griler
   ========================================================================= */

:root {
    /* Kenan Metal kurumsal renkleri */
    --brand:        #00567d;   /* petrol/çelik mavisi (site header rengi) */
    --brand-600:    #0a6d9a;
    --brand-700:    #044765;
    --navy:         #062a3d;    /* sidebar koyu lacivert */
    --navy-800:     #0a3247;
    --navy-700:     #0f3d55;
    --navy-600:     #164c66;
    --brand-tint:   #e9f1f5;    /* açık mavi vurgu */

    /* Nötrler (soğuk gri — kurumsal yazılım) */
    --ink:          #111c26;    /* ana metin */
    --ink-2:        #29404f;
    --paper:        #eef1f4;    /* uygulama zemini */
    --surface:      #ffffff;    /* kart / panel */
    --surface-2:    #f6f8fa;    /* tablo başlık zebra */
    --line:         #dbe2e8;
    --line-2:       #c6d0d8;
    --muted:        #6a7c88;
    --muted-2:      #4a5b66;

    /* Durum renkleri */
    --pos:          #157347;    /* fazla kadro */
    --neg:          #c0392b;    /* eksik kadro (Kenan kırmızısı tonu) */
    --zero:         #6a7c88;

    --sans:  'Barlow', system-ui, -apple-system, sans-serif;
    --head:  'Archivo', system-ui, sans-serif;
    --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    --radius: 0;
    --radius-sm: 0;
    --shadow-sm: 0 1px 2px rgba(6,42,61,.08);
    --shadow-md: 0 6px 20px -8px rgba(6,42,61,.22);
    --shadow-lg: 0 24px 48px -18px rgba(6,42,61,.35);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }

/* Blueprint ızgara dokusu (endüstriyel/teknik his) */
.bp-grid {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 26px 26px;
}

/* =========================================================================
   GİRİŞ EKRANI
   ========================================================================= */
body.is-login { background: var(--navy); }

.login {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}

.login__aside {
    position: relative;
    background:
        linear-gradient(180deg, rgba(0,86,125,.35), transparent 60%),
        var(--navy);
    color: #eaf1f5;
    padding: 46px 56px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 4px solid var(--brand);
}
.login__grain {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 80%);
    pointer-events: none;
}
.login__mark {
    position: relative;
    display: flex; align-items: center; gap: 13px;
    font-family: var(--head);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .14em;
    color: #fff;
}
.login__mark-dot {
    width: 30px; height: 30px;
    border: 2px solid var(--brand-600);
    display: grid; place-items: center;
    position: relative;
    flex-shrink: 0;
}
.login__mark-dot::before {
    content: ''; width: 12px; height: 12px;
    border: 2px solid #eaf1f5;
}
.login__aside-body { position: relative; margin-top: auto; }
.login__eyebrow {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--brand-600);
    margin: 0 0 16px;
    font-weight: 500;
}
.login__eyebrow--dark { color: var(--brand); }
.login__headline {
    font-family: var(--head);
    font-weight: 800;
    font-size: clamp(46px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -.02em;
    margin: 0;
    text-transform: uppercase;
}
.login__sub {
    max-width: 34ch;
    margin: 22px 0 0;
    color: rgba(234,241,245,.6);
    font-size: 15.5px;
    line-height: 1.62;
}
.login__aside-foot {
    position: relative;
    margin-top: 38px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
    color: rgba(234,241,245,.38);
}

.login__panel {
    background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    padding: 40px;
}
.login__form { width: 100%; max-width: 372px; }
.login__title {
    font-family: var(--head);
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -.01em;
    margin: 0 0 7px;
    color: var(--ink);
}
.login__hint { color: var(--muted-2); margin: 0 0 26px; font-size: 15px; }
.login__error {
    background: #fbece9;
    border: 1px solid #e8b3ab;
    border-left: 3px solid var(--neg);
    color: var(--neg);
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    margin-bottom: 20px;
}

.field { display: block; margin-bottom: 22px; }
.field__label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: 8px;
}
.field__input {
    width: 100%;
    padding: 13px 15px;
    font-size: 16px;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--surface);
    border: 1.5px solid var(--line-2);
    border-radius: var(--radius-sm);
    transition: border-color .16s, box-shadow .16s;
}
.field__input::placeholder { color: #a9b4bc; letter-spacing: .08em; }
.field__input:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,86,125,.15);
}

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 9px;
    border: none; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 15px;
    padding: 13px 20px;
    transition: background .16s, transform .12s;
}
.btn--primary {
    width: 100%;
    background: var(--brand);
    color: #fff;
    letter-spacing: .01em;
}
.btn--primary:hover { background: var(--brand-700); }
.btn--primary:active { transform: translateY(1px); }
.btn--primary svg { transition: transform .18s; }
.btn--primary:hover svg { transform: translateX(3px); }

/* =========================================================================
   UYGULAMA DÜZENİ
   ========================================================================= */
.app {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 100vh;
}

/* ---- SIDEBAR ---- */
.sidebar {
    background: var(--navy);
    color: #c3d1da;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    border-right: 1px solid #041d2b;
}
.sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px;
    border-bottom: 1px solid var(--navy-700);
    background: linear-gradient(180deg, rgba(0,86,125,.28), transparent);
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__dot {
    width: 28px; height: 28px;
    border: 2px solid var(--brand-600);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.brand__dot::before {
    content: ''; width: 11px; height: 11px;
    border: 2px solid #dbe7ed;
}
.brand__name {
    font-family: var(--head);
    font-size: 16px; letter-spacing: .1em; font-weight: 700;
    color: #fff;
}
.sidebar__close {
    display: none;
    background: none; border: none; color: #6f8492; padding: 4px;
}

.sidebar__eyebrow {
    font-family: var(--mono);
    font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
    color: #5d7280;
    margin: 0; padding: 18px 20px 6px;
}

.nav { flex: 1; overflow-y: auto; padding: 0 12px 12px; }
.nav__group-title {
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--brand-600);
    padding: 14px 8px 8px;
}
.nav__item {
    width: 100%;
    display: flex; align-items: center; gap: 12px;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 11px 12px;
    text-align: left;
    color: #b4c4ce;
    transition: background .14s, border-color .14s;
    margin-bottom: 2px;
}
.nav__item:hover { background: var(--navy-700); }
.nav__item.is-active {
    background: var(--navy-800);
    border-left-color: var(--brand-600);
}
.nav__item.is-active .nav__item-title { color: #fff; }
.nav__item.is-active .nav__item-arrow { color: var(--brand-600); }
.nav__item-index {
    font-family: var(--mono);
    font-size: 11px; font-weight: 500;
    color: #566b78;
    padding-top: 2px;
    min-width: 16px;
}
.nav__item.is-active .nav__item-index { color: var(--brand-600); }
.nav__item-body { flex: 1; min-width: 0; }
.nav__item-title {
    display: block;
    font-family: var(--head);
    font-size: 14.5px; font-weight: 600; color: #dbe7ed;
    letter-spacing: .005em;
}
.nav__item-desc {
    display: block;
    font-size: 12px; color: #728793;
    margin-top: 2px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.nav__item-arrow { color: #435663; flex-shrink: 0; transition: color .14s; }

.sidebar__foot {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--navy-700);
}
.sidebar__db {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 10.5px; color: #728793;
    margin-bottom: 12px;
    word-break: break-all;
}
.dot-live {
    width: 7px; height: 7px;
    background: #2fbf71;
    box-shadow: 0 0 0 3px rgba(47,191,113,.18);
    flex-shrink: 0;
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.sidebar__logout {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600;
    color: #8ba0ab; text-decoration: none;
    padding: 7px 10px; border-radius: var(--radius-sm);
    transition: background .14s, color .14s;
}
.sidebar__logout:hover { background: var(--navy-700); color: #dbe7ed; }

/* ---- MAIN ---- */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 16px;
    padding: 0 30px;
    height: 58px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}
.topbar__menu {
    display: none;
    background: none; border: none; color: var(--ink); padding: 4px;
}
.topbar__crumb {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px;
}
.topbar__crumb-root { color: var(--muted); font-weight: 500; }
.topbar__crumb-sep { color: var(--line-2); }
.topbar__crumb-active { color: var(--ink); font-weight: 600; }
.topbar__spacer { flex: 1; }
.topbar__clock {
    font-family: var(--mono);
    font-size: 12px; letter-spacing: .02em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.content { flex: 1; padding: 30px; max-width: 1120px; width: 100%; }

/* ---- HOŞGELDİN EKRANI ---- */
.welcome { padding-top: 12px; animation: fadeUp .4s ease both; }
.welcome__badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-tint);
    border: 1px solid #cfe0e8;
    padding: 6px 12px;
    margin-bottom: 20px;
}
.welcome__title {
    font-family: var(--head);
    font-weight: 800;
    font-size: clamp(34px, 4.6vw, 52px);
    line-height: 1.02; letter-spacing: -.02em;
    margin: 0 0 14px;
    text-transform: uppercase;
    color: var(--ink);
}
.welcome__text { color: var(--muted-2); font-size: 16px; max-width: 54ch; line-height: 1.6; margin: 0 0 34px; }
.welcome__reports { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 16px; }
.rcard {
    position: relative;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 3px solid var(--brand);
    border-radius: var(--radius);
    padding: 20px;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .18s, transform .14s, border-color .16s;
}
.rcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.rcard__num {
    font-family: var(--mono);
    font-size: 12px; color: var(--brand); font-weight: 600;
    margin-bottom: 12px;
}
.rcard__title { font-family: var(--head); font-weight: 700; font-size: 19px; margin-bottom: 6px; color: var(--ink); }
.rcard__desc { font-size: 13.5px; color: var(--muted-2); line-height: 1.5; margin-bottom: 16px; flex: 1; }
.rcard__go { font-size: 13px; font-weight: 700; color: var(--brand); letter-spacing: .01em; }

/* =========================================================================
   RAPOR İÇERİĞİ
   ========================================================================= */
.report { animation: fadeUp .35s ease both; }
.report__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; margin-bottom: 26px;
    padding-bottom: 20px; border-bottom: 2px solid var(--ink);
}
.report__eyebrow {
    font-family: var(--mono);
    font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--brand); margin: 0 0 9px; font-weight: 500;
}
.report__title {
    font-family: var(--head);
    font-weight: 800;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1; letter-spacing: -.02em; margin: 0 0 11px;
    text-transform: uppercase;
    color: var(--ink);
}
.report__meta {
    font-family: var(--mono);
    font-size: 12px; color: var(--muted); margin: 0;
}
.report__print {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 13px; font-weight: 600; color: var(--ink-2);
    transition: background .14s, border-color .14s, color .14s;
    flex-shrink: 0;
}
.report__print:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Özet KPI tileları — kompakt, çizgili */
.stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; margin-bottom: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
}
.stat {
    padding: 18px 22px;
    display: flex; flex-direction: column; gap: 6px;
    border-left: 1px solid var(--line);
    position: relative;
}
.stat:first-child { border-left: none; }
.stat__label {
    font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    color: var(--muted);
}
.stat__value {
    font-family: var(--head);
    font-weight: 800;
    font-size: 34px; line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}
.stat__note { font-size: 12px; color: var(--muted-2); font-weight: 500; }
.stat--accent { background: var(--brand); }
.stat--accent .stat__label { color: rgba(255,255,255,.75); }
.stat--accent .stat__value { color: #fff; }
.stat--accent .stat__note { color: rgba(255,255,255,.7); }
.stat--accent.is-pos .stat__value { color: #7ff0b0; }
.stat--accent.is-neg .stat__value { color: #ffb4aa; }

/* Lokasyon bloğu */
.loc { margin-bottom: 28px; }
.loc__head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 12px;
    padding-left: 2px;
}
.loc__icon { color: var(--brand); display: inline-flex; }
.loc__title {
    font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted-2);
}
.loc__code {
    font-family: var(--mono);
    font-size: 12.5px; font-weight: 600;
    color: var(--brand);
    background: var(--brand-tint);
    border: 1px solid #cfe0e8;
    padding: 2px 10px; border-radius: var(--radius-sm);
}

/* Veri tablosu — yoğun, çizgili, kurumsal */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.dtable { width: 100%; border-collapse: collapse; }
.dtable th {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #fff;
    text-align: right;
    padding: 11px 20px;
    background: var(--brand);
    white-space: nowrap;
}
.dtable th.ta-left { text-align: left; }
.dtable td {
    padding: 11px 20px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}
.dtable tbody tr:nth-child(even) { background: var(--surface-2); }
.dtable tbody tr { transition: background .1s; }
.dtable tbody tr:hover { background: var(--brand-tint); }
.ta-left { text-align: left !important; }
.cell-name { font-weight: 600; color: var(--ink); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--ink-2); }
.num--muted { color: var(--muted); }
.num--fark { font-weight: 700; }
.num--fark.is-pos { color: var(--pos); }
.num--fark.is-neg { color: var(--neg); }
.num--fark.is-zero { color: var(--zero); }

.dtable tfoot td {
    padding: 13px 20px;
    font-weight: 700;
    background: #eaeff3;
    border-bottom: none;
    border-top: 2px solid var(--ink);
    font-size: 14.5px;
}
.dtable tfoot .ta-left { color: var(--ink); font-family: var(--head); text-transform: uppercase; letter-spacing: .03em; font-size: 13px; }
.dtable tfoot .num { color: var(--ink); font-weight: 700; }

.report-error {
    background: #fbece9;
    border: 1px solid #e8b3ab;
    border-left: 3px solid var(--neg);
    color: var(--neg);
    padding: 18px 20px;
    border-radius: var(--radius);
    font-size: 14px; line-height: 1.6;
}
.report-empty {
    color: var(--muted-2);
    padding: 36px; text-align: center;
    border: 1px dashed var(--line-2); border-radius: var(--radius);
}

/* Yükleniyor iskeleti */
.loading { animation: fadeUp .3s ease both; }
.loading__bar {
    height: 13px;
    background: linear-gradient(90deg, #dde4ea 0%, #eef2f5 50%, #dde4ea 100%);
    background-size: 200% 100%;
    animation: shimmer 1.3s ease-in-out infinite;
    margin-bottom: 13px;
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Scrim */
.scrim {
    display: none;
    position: fixed; inset: 0; z-index: 40;
    background: rgba(6,42,61,.5);
    opacity: 0; transition: opacity .2s;
}
.scrim.is-open { display: block; opacity: 1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 980px) {
    .stats { grid-template-columns: 1fr; }
    .stat { border-left: none; border-top: 1px solid var(--line); }
    .stat:first-child { border-top: none; }
}
@media (max-width: 860px) {
    .login { grid-template-columns: 1fr; }
    .login__aside { display: none; }
    body.is-login { background: var(--paper); }

    .app { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; z-index: 50;
        width: 290px; max-width: 84vw;
        transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4,0,.2,1);
    }
    .sidebar.is-open { transform: none; box-shadow: var(--shadow-lg); }
    .sidebar__close { display: inline-flex; }
    .topbar__menu { display: inline-flex; }
    .content { padding: 22px 18px; }
    .topbar { padding: 0 18px; }
    .report__head { flex-direction: column; }
}

@media print {
    .sidebar, .topbar, .report__print, .scrim { display: none !important; }
    .app { grid-template-columns: 1fr; }
    .content { padding: 0; max-width: none; }
    body { background: #fff; }
    .table-wrap, .stats { box-shadow: none; }
    .dtable th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}