/* ==========================================================================
   Konu Medya — Tasarım Sistemi v2 (modern)
   Kimlik: matbaanın CMYK dünyası. Mürekkep kabuk, kâğıt zemin, cyan→magenta
   gradyan imzası, tablosal rakamlar. Her modül ortak kabuğu paylaşır ama
   kendi düzen imzasına sahiptir (Kanban / kart-ızgara / zaman çizelgesi / grafik).
   ========================================================================== */

/* ---- Tipografi (kendi sunucumuzda barındırılan değişken fontlar) ---- */
@font-face { font-family:'Inter'; src:url(../fonts/inter-latin.woff2) format('woff2'); font-weight:100 900; font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Inter'; src:url(../fonts/inter-latin-ext.woff2) format('woff2'); font-weight:100 900; font-display:swap;
    unicode-range:U+0100-02AF,U+0130,U+0131,U+0132-0217,U+011E-011F,U+015E-015F,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Space Grotesk'; src:url(../fonts/spacegrotesk-latin.woff2) format('woff2'); font-weight:300 700; font-display:swap;
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Space Grotesk'; src:url(../fonts/spacegrotesk-latin-ext.woff2) format('woff2'); font-weight:300 700; font-display:swap;
    unicode-range:U+0100-02AF,U+0130,U+0131,U+0132-0217,U+011E-011F,U+015E-015F,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
    --ink:        #12151f;
    --ink-2:      #1a1f2e;
    --ink-3:      #262d40;
    --paper:      #eef1f6;
    --surface:    #ffffff;
    --surface-2:  #f7f9fc;
    --line:       #e5e9f0;
    --line-2:     #eef1f6;
    --muted:      #5f6b7e;
    --muted-2:    #94a0b3;

    --primary:    #0d7fbf;
    --primary-600:#0a6aa1;
    --primary-050:#e6f4fb;

    --cyan:       #12b5d8;
    --magenta:    #e5308a;
    --yellow:     #f6c915;
    --k:          #1b2130;

    --success:    #109c66;  --success-050:#e5f6ef;
    --warning:    #c07d10;  --warning-050:#fbf1dc;
    --danger:     #d64550;  --danger-050:#fdeced;
    --info-050:   #e6f4fb;

    --grad:       linear-gradient(120deg, #12b5d8 0%, #6a5cf0 50%, #e5308a 100%);
    --grad-soft:  linear-gradient(120deg, rgba(18,181,216,.14), rgba(229,48,138,.12));

    --radius:     16px;
    --radius-md:  12px;
    --radius-sm:  9px;
    --pill:       999px;

    --shadow-sm:  0 1px 2px rgba(18,24,40,.05);
    --shadow:     0 2px 4px -1px rgba(18,24,40,.05), 0 6px 16px -4px rgba(18,24,40,.09);
    --shadow-lg:  0 18px 48px -12px rgba(18,24,40,.22);

    --font:       'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-disp:  'Space Grotesk', 'Inter', sans-serif;
    --sidebar-w:  256px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--ink);
    background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, .disp { font-family: var(--font-disp); letter-spacing: -.01em; }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.cmyk-bar { display:flex; height:3px; width:100%; border-radius:2px; overflow:hidden; }
.cmyk-bar > i { flex:1; }
.cmyk-bar > i:nth-child(1){ background:var(--cyan);} .cmyk-bar > i:nth-child(2){ background:var(--magenta);}
.cmyk-bar > i:nth-child(3){ background:var(--yellow);} .cmyk-bar > i:nth-child(4){ background:var(--k);}

/* ===================== Uygulama kabuğu ===================== */
.app { display:flex; min-height:100vh; }

.sidebar {
    width:var(--sidebar-w); position:fixed; inset:0 auto 0 0; z-index:40;
    background:linear-gradient(180deg, #171d2c 0%, #10131d 100%);
    color:#a9b2c3; display:flex; flex-direction:column;
    border-right:1px solid rgba(255,255,255,.05);
}
.sidebar__brand { padding:20px 18px 16px; }
.brand-row { display:flex; align-items:center; gap:11px; margin-bottom:14px; }
.brand-mark {
    width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
    font-family:var(--font-disp); font-weight:700; font-size:16px; color:#fff; letter-spacing:-.5px;
    background:var(--grad); box-shadow:0 6px 16px -4px rgba(229,48,138,.5);
}
.brand-name { color:#fff; font-family:var(--font-disp); font-weight:600; font-size:15.5px; line-height:1.1; }
.brand-name small { display:block; color:var(--muted-2); font-family:var(--font); font-weight:500; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; margin-top:2px; }

.nav { padding:6px 12px; overflow-y:auto; flex:1; }
.nav__group { color:#5c6780; font-size:10px; letter-spacing:.16em; text-transform:uppercase; padding:16px 10px 7px; font-weight:600; }
.nav__item {
    display:flex; align-items:center; gap:11px; padding:9px 11px; margin:2px 0; border-radius:10px;
    color:#aeb7c8; font-weight:500; position:relative; transition:background .15s, color .15s;
}
.nav__item:hover { background:rgba(255,255,255,.05); color:#eef2f8; }
.nav__item.is-active { background:rgba(255,255,255,.07); color:#fff; }
.nav__item.is-active .nav__icon { color:#fff; }
.nav__item.is-active::before {
    content:""; position:absolute; left:-12px; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
    background:var(--grad);
}
.nav__icon { width:19px; height:19px; flex:none; opacity:.92; }

.sidebar__foot { padding:12px; border-top:1px solid rgba(255,255,255,.06); }
.userbox { display:flex; align-items:center; gap:10px; }
.avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; color:#fff; background:var(--grad); flex:none; }
.userbox__name { color:#e8ecf3; font-weight:600; font-size:13px; }
.userbox__role { color:var(--muted-2); font-size:11px; }

.main { margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
    height:60px; background:rgba(255,255,255,.8); backdrop-filter:saturate(1.4) blur(10px);
    border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; padding:0 24px;
    position:sticky; top:0; z-index:30;
}
.topbar__title { font-family:var(--font-disp); font-weight:600; font-size:16px; }
.topbar__spacer { flex:1; }
.menu-toggle { display:none; background:none; border:0; font-size:22px; cursor:pointer; color:var(--ink); }

.content { padding:26px 24px; max-width:1320px; width:100%; animation:rise .35s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.page-head h1 { font-size:23px; margin:0 0 3px; }
.page-head .sub { color:var(--muted); font-size:13.5px; }
.page-head__actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ===================== Kartlar ===================== */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card__head { padding:15px 18px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.card__title { font-family:var(--font-disp); font-weight:600; font-size:14.5px; }
.card__body { padding:18px; }
.card__body--flush { padding:0; }

.grid { display:grid; gap:18px; }
.grid--4 { grid-template-columns:repeat(4,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--auto { grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); }

/* İstatistik kutusu */
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; position:relative; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.stat:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.stat__label { color:var(--muted); font-size:12px; font-weight:600; }
.stat__value { font-family:var(--font-disp); font-size:28px; font-weight:600; margin-top:7px; letter-spacing:-.02em; }
.stat__value small { font-size:14px; font-weight:600; color:var(--muted); }
.stat__foot { margin-top:9px; font-size:12px; color:var(--muted); }
.stat__ic { position:absolute; top:16px; right:16px; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; }
.stat__ic svg { width:18px; height:18px; }
.stat__accent { position:absolute; inset:0 0 auto 0; height:3px; }
.stat__accent--cyan{background:var(--cyan);} .stat__accent--magenta{background:var(--magenta);}
.stat__accent--yellow{background:var(--yellow);} .stat__accent--ink{background:var(--k);}
.stat__accent--grad{background:var(--grad);}

/* Gradyan hero paneli (sayfa imzası) */
.hero {
    border-radius:var(--radius); padding:22px 24px; color:#fff; position:relative; overflow:hidden;
    background:linear-gradient(120deg, #15243a 0%, #1b2540 55%, #37204a 100%);
    box-shadow:var(--shadow);
}
.hero::after { content:""; position:absolute; right:-60px; top:-60px; width:260px; height:260px; border-radius:50%;
    background:var(--grad); opacity:.35; filter:blur(30px); }
.hero__label { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#b9c3d6; font-weight:600; }
.hero__row { display:flex; align-items:flex-end; gap:26px; flex-wrap:wrap; position:relative; z-index:1; margin-top:6px; }
.hero__big { font-family:var(--font-disp); font-size:34px; font-weight:600; line-height:1; }
.hero__sub { color:#c7d0e0; font-size:13px; }

/* ===================== Butonlar ===================== */
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--radius-sm);
    font-family:var(--font); font-size:13.5px; font-weight:600; border:1px solid transparent; cursor:pointer; white-space:nowrap;
    transition:background .14s, border-color .14s, color .14s, transform .05s, box-shadow .14s; }
.btn:active { transform:translateY(1px); }
.btn--primary { background:var(--primary); color:#fff; box-shadow:0 6px 16px -6px rgba(13,127,191,.6); }
.btn--primary:hover { background:var(--primary-600); color:#fff; }
.btn--grad { background:var(--grad); color:#fff; box-shadow:0 8px 20px -8px rgba(229,48,138,.55); }
.btn--grad:hover { color:#fff; filter:brightness(1.05); }
.btn--ghost { background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn--ghost:hover { background:var(--surface-2); border-color:#d3dae5; }
.btn--danger { background:var(--danger); color:#fff; }
.btn--danger:hover { color:#fff; filter:brightness(.95); }
.btn--sm { padding:6px 11px; font-size:12.5px; }
.btn--block { width:100%; justify-content:center; }
.btn:disabled { opacity:.55; cursor:not-allowed; }

/* Segment kontrol (görünüm değiştirici) */
.seg { display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--pill); padding:3px; gap:2px; }
.seg button { border:0; background:transparent; padding:6px 14px; border-radius:var(--pill); font-family:inherit; font-size:12.5px; font-weight:600; color:var(--muted); cursor:pointer; transition:.14s; }
.seg button.is-on { background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm); }

/* ===================== Tablolar ===================== */
.table-wrap { overflow-x:auto; }
table.tbl { width:100%; border-collapse:collapse; font-size:13.5px; }
.tbl thead th { text-align:left; font-weight:600; color:var(--muted); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
    padding:11px 16px; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--surface-2); }
.tbl tbody td { padding:12px 16px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr { transition:background .1s; }
.tbl tbody tr:hover { background:var(--surface-2); }
.tbl .r { text-align:right; font-variant-numeric:tabular-nums; }
.tbl .c { text-align:center; }
.tbl .strong { font-weight:600; }
.empty { padding:46px 16px; text-align:center; color:var(--muted); }
.empty__title { font-family:var(--font-disp); font-weight:600; color:var(--ink); margin-bottom:5px; font-size:15px; }

/* ===================== Çipler ===================== */
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:var(--pill); font-size:12px; font-weight:600; line-height:1.4; }
.chip::before { content:""; width:7px; height:7px; border-radius:2px; background:currentColor; opacity:.9; }
.chip--gray{background:#eef1f6;color:#546074;} .chip--blue{background:var(--primary-050);color:var(--primary-600);}
.chip--green{background:var(--success-050);color:var(--success);} .chip--amber{background:var(--warning-050);color:var(--warning);}
.chip--red{background:var(--danger-050);color:var(--danger);} .chip--magenta{background:#fce7f1;color:var(--magenta);}
.chip--cyan{background:#e2f6fb;color:#0a7f9c;}

/* Seviye çubuğu (stok doluluk) */
.level { height:7px; border-radius:var(--pill); background:var(--line); overflow:hidden; }
.level > i { display:block; height:100%; border-radius:var(--pill); background:var(--grad); }
.level.is-low > i { background:linear-gradient(90deg,#f0a33a,#d64550); }
.level.is-ok > i  { background:linear-gradient(90deg,#12b5d8,#109c66); }

/* Mini çubuk grafik */
.spark { display:flex; align-items:flex-end; gap:3px; height:40px; }
.spark > i { flex:1; background:var(--grad-soft); border-radius:3px 3px 0 0; min-height:3px; position:relative; }
.spark > i::after { content:""; position:absolute; inset:auto 0 0 0; height:35%; background:var(--grad); border-radius:3px 3px 0 0; opacity:.9; }

/* ===================== Kanban (İşler imzası) ===================== */
.kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(268px,1fr); gap:14px; overflow-x:auto; padding-bottom:8px; align-items:start; }
.kcol { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-md); display:flex; flex-direction:column; max-height:calc(100vh - 210px); }
.kcol__head { padding:12px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); position:sticky; top:0; }
.kcol__dot { width:9px; height:9px; border-radius:3px; }
.kcol__title { font-family:var(--font-disp); font-weight:600; font-size:13px; }
.kcol__count { margin-left:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--pill); font-size:11px; font-weight:600; color:var(--muted); padding:1px 8px; }
.kcol__body { padding:10px; display:flex; flex-direction:column; gap:9px; overflow-y:auto; }
.kcard { background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:12px; box-shadow:var(--shadow-sm); transition:transform .12s, box-shadow .12s; text-decoration:none; color:inherit; display:block; }
.kcard:hover { transform:translateY(-2px); box-shadow:var(--shadow); color:inherit; }
.kcard__top { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; }
.kcard__no { font-family:var(--font-disp); font-weight:600; font-size:12px; color:var(--muted); }
.kcard__cust { font-weight:600; font-size:13.5px; margin-bottom:2px; }
.kcard__desc { color:var(--muted); font-size:12.5px; margin-bottom:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kcard__foot { display:flex; justify-content:space-between; align-items:center; }
.kcard__amt { font-family:var(--font-disp); font-weight:600; font-variant-numeric:tabular-nums; }

/* ===================== Zaman çizelgesi (Cari imzası) ===================== */
.timeline { position:relative; padding-left:26px; }
.timeline::before { content:""; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--line); }
.tl-item { position:relative; padding:10px 0; }
.tl-item::before { content:""; position:absolute; left:-21px; top:15px; width:12px; height:12px; border-radius:50%; background:#fff; border:2.5px solid var(--muted-2); }
.tl-item.is-debit::before { border-color:var(--danger); }
.tl-item.is-credit::before { border-color:var(--success); }
.tl-row { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.tl-amt { font-family:var(--font-disp); font-weight:600; font-variant-numeric:tabular-nums; }

/* ===================== Formlar ===================== */
.field { margin-bottom:15px; }
.field > label { display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:#37414f; }
.field .hint { color:var(--muted); font-size:12px; margin-top:5px; }
.input, .select, textarea.input {
    width:100%; padding:10px 12px; font-size:14px; font-family:inherit; color:var(--ink);
    border:1px solid #d5dce6; border-radius:var(--radius-sm); background:#fff; transition:border-color .14s, box-shadow .14s;
}
.input:focus, .select:focus, textarea.input:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3.5px var(--primary-050); }
.input.r { text-align:right; font-variant-numeric:tabular-nums; }
.form-row { display:grid; gap:15px; grid-template-columns:repeat(2,1fr); }
.form-row--3 { display:grid; gap:15px; grid-template-columns:repeat(3,1fr); }
.input-group { display:flex; }
.input-group .input { border-radius:var(--radius-sm) 0 0 var(--radius-sm); }
.input-group .addon { display:inline-flex; align-items:center; padding:0 12px; background:var(--surface-2); border:1px solid #d5dce6; border-left:0; border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--muted); font-size:13px; font-weight:600; white-space:nowrap; }

/* ===================== Uyarılar ===================== */
.alert { padding:12px 15px; border-radius:var(--radius-sm); font-size:13.5px; margin-bottom:18px; border:1px solid; display:flex; gap:9px; align-items:flex-start; }
.alert--error{background:var(--danger-050);border-color:#f3c9cc;color:#9a2b33;}
.alert--success{background:var(--success-050);border-color:#b4e2ce;color:#0d6b47;}
.alert--info{background:var(--info-050);border-color:#bfe3f3;color:var(--primary-600);}

/* ===================== Giriş ===================== */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; position:relative; overflow:hidden;
    background:radial-gradient(1000px 520px at 88% -8%, #dcecfa 0, transparent 55%),
               radial-gradient(820px 460px at -8% 108%, #fbdcec 0, transparent 52%), var(--paper); }
.login-card { width:100%; max-width:392px; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; }
.login-card__top { padding:28px 28px 20px; }
.login-brand { display:flex; align-items:center; gap:12px; }
.login-brand .brand-mark { width:44px; height:44px; font-size:18px; }
.login-title { font-family:var(--font-disp); font-size:16px; font-weight:600; }
.login-title small { display:block; color:var(--muted); font-family:var(--font); font-weight:500; font-size:12px; margin-top:2px; }
.login-card__body { padding:6px 28px 28px; }

/* ===================== Yardımcılar ===================== */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;} .muted{color:var(--muted);} .text-r{text-align:right;}
.flex{display:flex;} .items-center{align-items:center;} .gap-8{gap:8px;} .gap-12{gap:12px;} .wrap{flex-wrap:wrap;}
.spacer{flex:1;} .hidden{display:none;}
.scrim{ display:none; position:fixed; inset:0; background:rgba(14,18,28,.5); z-index:35; backdrop-filter:blur(2px); }
.toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* ===================== Duyarlı ===================== */
@media (max-width:1040px){ .grid--4{grid-template-columns:repeat(2,1fr);} .grid--3{grid-template-columns:1fr;} .grid--2{grid-template-columns:1fr;} }
@media (max-width:860px){
    .sidebar{ transform:translateX(-100%); transition:transform .22s ease; }
    .app.nav-open .sidebar{ transform:translateX(0); }
    .app.nav-open .scrim{ display:block; }
    .main{ margin-left:0; }
    .menu-toggle{ display:inline-flex; }
    .form-row, .form-row--3{ grid-template-columns:1fr; }
    .grid--4{ grid-template-columns:1fr; }
}
/* ===================== v2.1 — Modüler yapı (bento + modül kimliği) ===================== */

/* Bento ızgara: 12 kolon, farklı boy modüller */
.bento { display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
.b-3{grid-column:span 3;} .b-4{grid-column:span 4;} .b-5{grid-column:span 5;}
.b-6{grid-column:span 6;} .b-7{grid-column:span 7;} .b-8{grid-column:span 8;}
.b-9{grid-column:span 9;} .b-12{grid-column:span 12;}
.vstack{ display:flex; flex-direction:column; gap:16px; }

/* Modül ikon rozeti */
.mic { width:32px; height:32px; border-radius:9px; display:inline-grid; place-items:center; flex:none; }
.mic i { font-size:17px; }
.mic--cyan{background:#e2f6fb;color:#0a7f9c;} .mic--magenta{background:#fce7f1;color:var(--magenta);}
.mic--blue{background:var(--primary-050);color:var(--primary-600);} .mic--green{background:var(--success-050);color:var(--success);}
.mic--amber{background:var(--warning-050);color:var(--warning);} .mic--red{background:var(--danger-050);color:var(--danger);}
.mic--ink{background:#e9edf4;color:var(--ink);} .mic--grad{background:var(--grad);color:#fff;}

/* İkonlu modül başlığı */
.card__head--mod { justify-content:flex-start; gap:11px; }
.card__head--mod .card__sub { color:var(--muted); font-size:12px; margin-top:1px; }
.card__head--mod .head-right { margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* KPI — kompakt gösterge modülü */
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px; display:flex; align-items:center; gap:12px; }
.kpi .mic{ width:38px; height:38px; }
.kpi__label{ color:var(--muted); font-size:12px; font-weight:600; }
.kpi__value{ font-family:var(--font-disp); font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.15; }
.kpi__foot{ font-size:11.5px; color:var(--muted); margin-top:1px; }

/* Sekmeli aksiyon modülü */
.mtabs { display:flex; gap:4px; padding:10px 12px 0; border-bottom:1px solid var(--line-2); overflow-x:auto; }
.mtabs button { border:0; background:transparent; font:inherit; font-weight:600; font-size:13px; color:var(--muted);
    padding:9px 13px; border-radius:9px 9px 0 0; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
    border-bottom:2px solid transparent; white-space:nowrap; }
.mtabs button:hover{ color:var(--ink); background:var(--surface-2); }
.mtabs button.is-on{ color:var(--ink); border-bottom-color:var(--magenta); background:var(--surface-2); }
.mtabs button i{ font-size:16px; }
.mpanel{ padding:16px 18px; }
.mpanel.hidden{ display:none; }

/* Hızlı işlem ızgarası */
.qgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.qgrid a { display:flex; flex-direction:column; align-items:center; gap:7px; padding:13px 8px;
    border:1px solid var(--line); border-radius:12px; background:var(--surface);
    color:var(--ink); font-weight:600; font-size:12px; text-align:center; transition:.14s; }
.qgrid a:hover{ border-color:#cfd7e3; background:var(--surface-2); transform:translateY(-1px); color:var(--ink); }
.qgrid .mic{ width:36px; height:36px; }

/* Form modülleri: numaralı adım rozeti + yapışkan özet ray */
.stepchip{ width:22px; height:22px; border-radius:7px; background:var(--grad); color:#fff;
    font-family:var(--font-disp); font-weight:600; font-size:12px; display:inline-grid; place-items:center; flex:none; }
.railcard{ position:sticky; top:76px; }
.sumrow{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); font-size:13.5px; }
.sumrow:last-of-type{ border-bottom:0; }
.sumrow .muted{ font-size:12.5px; }
.sumrow .val{ font-family:var(--font-disp); font-weight:600; font-variant-numeric:tabular-nums; }
.sumrow--big .val{ font-size:20px; }
.tbl--lines td{ padding:8px 10px; }
.tbl--lines .input, .tbl--lines .select{ padding:8px 10px; font-size:13.5px; }

/* Yeni İş ekranı: zorunlu işareti, stok göstergesi, alan şeridi, iş akışı, maliyet paneli */
.req{ color:var(--danger); font-weight:700; }
.stockhint{ font-size:11.5px; margin-top:4px; min-height:0; }
.stockhint--ok{ color:var(--success); }
.stockhint--low{ color:var(--danger); font-weight:600; }
.areastrip{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px;
    padding:11px 15px; border:1px dashed var(--primary-300, #9ec5e8); border-radius:11px; background:var(--primary-050); }
.areastrip__label{ font-size:12.5px; font-weight:600; color:var(--primary-600); display:flex; align-items:center; gap:7px; }
.areastrip__val{ font-family:var(--font-disp); font-weight:700; font-size:19px; color:var(--primary-600); font-variant-numeric:tabular-nums; }
.wfchips{ display:flex; flex-wrap:wrap; gap:9px; }
.wfchip{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
    border:1.5px solid var(--line); border-radius:11px; background:var(--surface); cursor:pointer;
    font-family:inherit; font-size:13.5px; font-weight:600; color:var(--muted); transition:border-color .15s, background .15s, color .15s; }
.wfchip:hover{ border-color:#cfd7e3; color:var(--ink); }
.wfchip.on{ border-color:transparent; background:var(--grad); color:#fff; }
.wfchip__ord{ display:none; width:18px; height:18px; border-radius:6px; background:rgba(255,255,255,.25);
    font-size:11px; font-weight:700; align-items:center; justify-content:center; }
.wfchip.on .wfchip__ord{ display:inline-flex; }
.raillabel{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:13px 0 7px;
    font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.raillabel:first-child{ margin-top:0; }
.costlist{ display:flex; flex-direction:column; gap:6px; }
.costrow{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:7px 10px;
    background:var(--surface-2); border-radius:9px; font-size:12.5px; }
.costrow__name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.costrow__meta{ display:flex; align-items:center; gap:7px; flex:none; }
.costempty{ padding:9px; border:1px dashed var(--line); border-radius:9px; text-align:center;
    font-size:12px; font-style:italic; color:var(--muted); }
.xrow{ display:flex; align-items:center; gap:7px; margin-bottom:7px; }
.xrow .input{ min-width:0; }

/* Montaj takvimi */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal__dow{ text-align:center; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); padding:2px 0 6px; }
.cal__day{ min-height:96px; border:1px solid var(--line-2); border-radius:11px; padding:7px 7px 6px; background:var(--surface);
    cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; display:flex; flex-direction:column; gap:4px; }
.cal__day:hover{ border-color:#cfd7e3; background:var(--surface-2); }
.cal__day--out{ background:transparent; border-color:transparent; cursor:default; }
.cal__day--out:hover{ background:transparent; border-color:transparent; }
.cal__day.is-today{ border-color:var(--primary-600); box-shadow:0 0 0 1px var(--primary-600) inset; }
.cal__day.is-today .cal__num{ background:var(--grad); color:#fff; }
.cal__day.is-picked{ background:var(--primary-050); border-color:var(--primary-600); }
.cal__num{ width:24px; height:24px; border-radius:8px; display:grid; place-items:center; flex:none;
    font-family:var(--font-disp); font-weight:600; font-size:12.5px; color:var(--muted); }
.calev{ display:block; padding:3px 7px; border-radius:7px; font-size:11px; font-weight:600; line-height:1.35;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#fff; }
.calev:hover{ filter:brightness(1.07); color:#fff; }
.calev__t{ opacity:.8; margin-right:4px; font-variant-numeric:tabular-nums; }
.calev--plan{ background:var(--primary-600); }
.calev--late{ background:var(--danger); }
.calev--done{ background:var(--success); }
.calev--off{ background:#a3adbd; text-decoration:line-through; }
.callegend{ display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px; color:var(--muted); }
.callegend span{ display:inline-flex; align-items:center; gap:6px; }
.caldot{ width:10px; height:10px; border-radius:4px; display:inline-block; }
.caldot--plan{ background:var(--primary-600); } .caldot--late{ background:var(--danger); }
.caldot--done{ background:var(--success); } .caldot--off{ background:#a3adbd; }
.uprow{ display:flex; align-items:center; gap:11px; padding:9px 4px; border-bottom:1px solid var(--line-2); color:var(--ink); }
.uprow:last-child{ border-bottom:0; }
.uprow:hover .uprow__title{ color:var(--primary-600); }
.uprow__date{ width:44px; flex:none; text-align:center; background:var(--surface-2); border-radius:10px; padding:5px 0; }
.uprow__date b{ display:block; font-family:var(--font-disp); font-size:16px; line-height:1.1; }
.uprow__date small{ font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.uprow__body{ min-width:0; }
.uprow__title{ display:block; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uprow__meta{ display:block; font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px){ .cal{ gap:4px; } .cal__day{ min-height:64px; padding:4px; } .calev{ font-size:9.5px; padding:2px 4px; } }

/* İş formu: montaj işaret satırı */
.checkrow{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px dashed var(--line);
    border-radius:11px; background:var(--surface-2); cursor:pointer; font-size:13px; }
.checkrow input{ width:17px; height:17px; margin-top:1px; accent-color:var(--primary-600); flex:none; }
.checkrow .muted{ display:block; font-size:12px; margin-top:2px; }
.checkrow:has(input:checked){ border-color:var(--primary-600); background:var(--primary-050); }

/* Kullanıcı listesi */
.urow{ border-bottom:1px solid var(--line-2); }
.urow:last-child{ border-bottom:0; }
.urow__head{ display:flex; align-items:center; gap:11px; padding:12px 16px; cursor:pointer; list-style:none; user-select:none; }
.urow__head::-webkit-details-marker{ display:none; }
.urow__name{ display:block; font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.urow__meta{ display:block; font-size:11.5px; color:var(--muted); }
.urow__body{ padding:4px 16px 14px; }
.urow__actions{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; }

/* İşler akordiyonu */
.jacc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.jacc__head{ display:flex; align-items:center; gap:10px; padding:14px 18px; cursor:pointer; list-style:none; user-select:none; }
.jacc__head::-webkit-details-marker{ display:none; }
.jacc__title{ font-family:var(--font-disp); font-weight:600; font-size:15.5px; }
.jacc__count{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:99px; padding:2px 11px;
    font-family:var(--font-disp); font-weight:600; font-size:12.5px; font-variant-numeric:tabular-nums; }
.jacc__note{ font-size:11.5px; color:var(--muted-2); margin-left:4px; }
.jacc__chev{ margin-left:auto; color:var(--muted-2); transition:transform .18s; }
.jacc[open] .jacc__chev{ transform:rotate(180deg); }
.jacc__body{ border-top:1px solid var(--line-2); padding:14px 16px; }
.jacc__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(235px, 1fr)); gap:12px; }

/* Makina panosu */
.mboard{ display:grid; grid-template-columns:290px 1fr; gap:16px; align-items:start; }
.mcol--pending{ background:linear-gradient(135deg,#fff7ec,#fff2f2); border:1px solid #f3ddc2; border-radius:var(--radius); padding:14px; position:sticky; top:76px; }
.mcol__head{ display:flex; align-items:center; gap:10px; margin-bottom:11px; }
.mcol__title{ font-family:var(--font-disp); font-weight:600; font-size:15px; }
.mcol__sub{ font-size:12px; color:var(--muted); }
.mcol__body{ display:flex; flex-direction:column; gap:9px; min-height:60px; }
.mgrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:16px; }
.mcard{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.mcard--busy{ border-color:#bfe3c9; box-shadow:0 0 0 1px #bfe3c9, var(--shadow); }
.mcard__head{ display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line-2); }
.mcard__name{ font-family:var(--font-disp); font-weight:600; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcard__state{ font-size:11.5px; color:var(--muted); }
.mcard--busy .mcard__state{ color:var(--success); font-weight:600; }
.mcard__body{ padding:12px 14px; display:flex; flex-direction:column; gap:9px; flex:1; min-height:96px; }
.mcard__perf{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:11px 14px; border-top:1px solid var(--line-2); }
.perfbox{ background:var(--primary-050); border-radius:9px; padding:7px 9px; text-align:center; }
.perfbox--m2{ background:#f5ecfb; } .perfbox--rev{ background:var(--success-050); }
.perfbox span{ display:block; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.perfbox b{ font-family:var(--font-disp); font-size:13.5px; }
.mjob{ background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:9px 11px; cursor:grab; box-shadow:0 1px 2px rgba(15,20,30,.05); }
.mjob:active{ cursor:grabbing; }
.mjob.is-dragging{ opacity:.45; }
.mjob__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px; }
.mjob__no{ font-size:11.5px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }
.mjob__no:hover{ color:var(--primary-600); }
.mjob__title{ font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mjob__meta{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mjob__foot{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:12px; }
.mjob__foot .strong{ margin-left:auto; }
.mjob__done{ margin:0; }
.mjob__done .btn{ padding:2px 8px; color:var(--success); }
.mdrop.is-over{ outline:2px dashed var(--primary-600); outline-offset:3px; border-radius:var(--radius); background:var(--primary-050); }
.mempty{ text-align:center; font-size:12.5px; color:var(--muted); padding:14px 8px; }
.mempty--drop{ border:1.5px dashed var(--line); border-radius:11px; padding:22px 8px; }
@media (max-width:1100px){ .mboard{ grid-template-columns:1fr; } .mcol--pending{ position:static; } }

/* Montaj föyü */
.foylabel{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); margin-bottom:3px; }
.foyval{ font-size:14px; font-weight:600; }
.fotogrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.fotocell{ position:relative; border:1px solid var(--line-2); border-radius:11px; overflow:hidden; aspect-ratio:4/3; background:var(--surface-2); }
.fotocell img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .2s; }
.fotocell a:hover img{ transform:scale(1.04); }
.fotodel{ position:absolute; top:6px; right:6px; width:24px; height:24px; border:0; border-radius:8px;
    background:rgba(15,20,30,.55); color:#fff; font-size:12px; cursor:pointer; display:grid; place-items:center; }
.fotodel:hover{ background:var(--danger); }

/* Bakiye satırı (para modülleri) */
.balrow{ display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line-2); }
.balrow:last-child{ border-bottom:0; }
.balrow .val{ margin-left:auto; font-family:var(--font-disp); font-weight:600; font-size:19px; font-variant-numeric:tabular-nums; }

@media (max-width:1100px){
    .b-3{grid-column:span 6;} .b-4{grid-column:span 6;} .b-5,.b-6,.b-7,.b-8,.b-9{grid-column:span 12;}
}
@media (max-width:860px){
    .bento > *{grid-column:span 12;}
    .qgrid{grid-template-columns:repeat(2,1fr);}
}

@media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; } }
:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:5px; }