/* TLG Technic · Premium Portal
   Tek stil dosyası; görünüm body[data-concept] ile A / B / C konseptine uyar. */

/* ---------- Konsept tokenları ---------- */
body {
  --bg: #F3F1EC; --surface: #FFFFFF; --surface2: #F7F5F1; --line: #E3DFD7;
  --text: #111111; --muted: #6A6862; --faint: #9A978F;
  --side: #111111; --side-text: #CFCDC7; --side-muted: #8B8983; --side-line: rgba(255,255,255,.08);
  --side-active: #F5C518; --side-active-text: #111111;
  --accent: #F5C518; --accent-text: #8A6A00; --on-accent: #111111;
  --primary: #111111; --on-primary: #FFFFFF;
  --r: 20px; --r-sm: 12px; --r-btn: 999px;
  --head: "Space Grotesk", system-ui, sans-serif; --body: Inter, system-ui, sans-serif; --num: "Space Grotesk", system-ui, sans-serif;
  --head-tf: none; --head-ls: -.03em; --head-w: 700;
  --shadow: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.04);
  --ok: #17864F; --ok-bg: rgba(23,134,79,.1); --warn: #A86B00; --warn-bg: rgba(245,170,24,.16);
  --bad: #C53A3A; --bad-bg: rgba(197,58,58,.1); --info: #2A63C9; --info-bg: rgba(42,99,201,.1); --mute-bg: rgba(17,17,17,.06);
  --chart: #111111;
}
body[data-concept="A"] {
  --bg: #0E0F11; --surface: #17191C; --surface2: #1D2024; --line: #2A2E34;
  --text: #EDEBE6; --muted: #A0A5AC; --faint: #6E737B;
  --side: #08090A; --side-text: #D6D4CF; --side-muted: #7E838A; --side-line: #1E2125;
  --side-active: rgba(245,197,24,.12); --side-active-text: #F5C518;
  --accent-text: #F5C518; --primary: #F5C518; --on-primary: #111111;
  --r: 0px; --r-sm: 0px; --r-btn: 0px;
  --head: "Barlow Condensed", "Arial Narrow", sans-serif; --num: "Barlow Condensed", "Arial Narrow", sans-serif;
  --head-tf: uppercase; --head-ls: .01em;
  --shadow: none;
  --ok: #3DD68C; --ok-bg: rgba(61,214,140,.12); --warn: #F5C518; --warn-bg: rgba(245,197,24,.14);
  --bad: #FF6B6B; --bad-bg: rgba(255,107,107,.13); --info: #6FA8FF; --info-bg: rgba(111,168,255,.13); --mute-bg: rgba(255,255,255,.06);
  --chart: #F5C518;
}
html[data-theme="light"] body[data-concept="A"] {
  --bg: #F4F2EE; --surface: #FFFFFF; --surface2: #F0EDE7; --line: #DCD7CE;
  --text: #16171A; --muted: #5C6068; --faint: #8D9097;
  --accent-text: #8A6A00;
  --ok: #17864F; --ok-bg: rgba(23,134,79,.1); --warn: #A86B00; --warn-bg: rgba(245,170,24,.18);
  --bad: #C53A3A; --bad-bg: rgba(197,58,58,.1); --info: #2A63C9; --info-bg: rgba(42,99,201,.1); --mute-bg: rgba(22,23,26,.06);
  --chart: #16171A;
}
body[data-concept="B"] {
  --bg: #F4F6F8; --surface: #FFFFFF; --surface2: #F8FAFB; --line: #DDE3EA;
  --text: #0E1A2B; --muted: #5B6B7C; --faint: #92A0AE;
  --side: #0B2545; --side-text: #C5D0DC; --side-muted: #7F93AA; --side-line: rgba(255,255,255,.08);
  --side-active: rgba(255,255,255,.08); --side-active-text: #FFFFFF;
  --accent-text: #8A6A00; --primary: #0B2545; --on-primary: #FFFFFF;
  --r: 6px; --r-sm: 4px; --r-btn: 4px;
  --head: "IBM Plex Sans", system-ui, sans-serif; --body: "IBM Plex Sans", system-ui, sans-serif; --num: "IBM Plex Mono", ui-monospace, monospace;
  --head-ls: -.01em; --head-w: 600;
  --shadow: none;
  --chart: #0B2545;
}

/* ---------- Temel ---------- */
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.55 var(--body); }
h1, h2, h3, h4 { font-family: var(--head); font-weight: var(--head-w); text-transform: var(--head-tf); letter-spacing: var(--head-ls); line-height: 1.1; margin: 0; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.ic { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Kabuk ---------- */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 34px); }
.side { background: var(--side); color: var(--side-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side__brand { padding: 24px 22px 18px; border-bottom: 1px solid var(--side-line); }
.side__brand img { height: 30px; width: auto; display: block; }
.side__tag { display: inline-block; margin-top: 12px; font: 700 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 5px 8px; border-radius: 3px; }
body[data-concept="C"] .side__tag { border-radius: 999px; padding: 5px 10px; }
.side__nav { padding: 14px 12px; display: grid; gap: 2px; }
.side__sec { font: 600 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--side-muted); padding: 16px 12px 8px; }
.nav-i { display: flex; align-items: center; gap: 12px; padding: 11px 12px; text-decoration: none; color: var(--side-text); border-radius: var(--r-sm); font-weight: 500; position: relative; transition: background .15s, color .15s; }
.nav-i:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav-i.is-active { background: var(--side-active); color: var(--side-active-text); font-weight: 600; }
body[data-concept="B"] .nav-i.is-active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; background: var(--accent); }
body[data-concept="A"] .nav-i.is-active { box-shadow: inset 3px 0 0 #F5C518; }
body[data-concept="A"] .nav-i { text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; }
body[data-concept="C"] .nav-i { border-radius: 999px; }
.nav-i .cnt { margin-left: auto; font: 700 11px/1 var(--body); background: rgba(255,255,255,.12); color: #fff; padding: 4px 7px; border-radius: 999px; }
.nav-i.is-active .cnt { background: var(--accent); color: var(--on-accent); }
body[data-concept="C"] .nav-i.is-active .cnt { background: #111; color: var(--accent); }
.side__user { margin-top: auto; padding: 16px 18px; border-top: 1px solid var(--side-line); display: flex; gap: 12px; align-items: center; }
.side__user b { display: block; color: #fff; font-size: 14px; }
.side__user small { display: block; color: var(--side-muted); font-size: 12px; line-height: 1.3; }
.side__user a { margin-left: auto; color: var(--side-muted); display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); }
.side__user a:hover { color: #fff; background: rgba(255,255,255,.06); }

.av { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--body); background: var(--accent); color: var(--on-accent); }
body[data-concept="A"] .av { border-radius: 0; }
.av--lg { width: 56px; height: 56px; flex-basis: 56px; font-size: 18px; }
.av--mute { background: var(--mute-bg); color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 14px 32px; background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--line); }
.top__t small { display: block; font-size: 12.5px; color: var(--muted); }
.top__t h1 { font-size: 26px; }
body[data-concept="A"] .top__t h1 { font-size: 30px; }
.top__menu { display: none; width: 42px; height: 42px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; place-items: center; }
.top__search { margin-left: auto; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0 14px; height: 42px; width: min(320px, 30vw); color: var(--muted); }
.top__search input { border: 0; background: transparent; outline: none; width: 100%; color: var(--text); font: inherit; }
.top__ic { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-btn); cursor: pointer; position: relative; color: var(--text); }
.top__ic .dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 10.5px/18px var(--body); text-align: center; padding: 0 4px; }
.view { padding: 28px 32px 64px; max-width: 1440px; width: 100%; box-sizing: border-box; }

@media (max-width: 1000px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; z-index: 60; inset: 0 auto 0 0; width: 280px; clip-path: inset(0 100% 0 0); transition: clip-path .3s ease; }
  .nav-open .side { clip-path: inset(0 0 0 0); }
  .scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .3s; }
  .nav-open .scrim { opacity: 1; pointer-events: auto; }
  .top { padding: 12px 16px; gap: 10px; }
  .top__menu { display: grid; }
  .top__search { display: none; }
  .top__t h1 { font-size: 21px; }
  .view { padding: 20px 16px 56px; }
}

/* ---------- Bileşenler ---------- */
.grid { display: grid; gap: 20px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
@media (max-width: 1100px) { .g-3 { grid-template-columns: 1fr 1fr; } .g-21, .g-12 { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .g-2, .g-3 { grid-template-columns: 1fr; } }
.stack { display: grid; gap: 20px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.card__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card__h h3 { font-size: 18px; }
body[data-concept="A"] .card__h h3 { font-size: 21px; }
.card__h .muted { font-size: 13px; }
.card__b { padding: 20px; }
.card__b--flush { padding: 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); text-decoration: none; position: relative; overflow: hidden; }
.kpi span { font-size: 13px; color: var(--muted); }
.kpi b { font-family: var(--num); font-size: 36px; line-height: 1; font-weight: 700; letter-spacing: -.02em; }
body[data-concept="A"] .kpi b { font-size: 44px; }
body[data-concept="B"] .kpi b { font-weight: 500; font-size: 32px; }
.kpi small { font-size: 12.5px; color: var(--muted); }
.kpi--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.kpi--accent span, .kpi--accent small { color: rgba(17,17,17,.7); }
.kpi--warn b { color: var(--bad); }
.kpi .ic { position: absolute; right: 16px; top: 16px; opacity: .35; width: 22px; height: 22px; }
a.kpi:hover { border-color: var(--text); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-btn); border: 1px solid transparent; font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn--p { background: var(--primary); color: var(--on-primary); }
.btn--p:hover { filter: brightness(1.1); }
.btn--y { background: var(--accent); color: var(--on-accent); }
.btn--g { background: var(--surface); border-color: var(--line); color: var(--text); }
.btn--g:hover { border-color: var(--text); }
.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn .ic { width: 16px; height: 16px; }
body[data-concept="A"] .btn { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; font-weight: 700; }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
body[data-concept="A"] .badge { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.b-ok { color: var(--ok); background: var(--ok-bg); }
.b-warn { color: var(--warn); background: var(--warn-bg); }
.b-bad { color: var(--bad); background: var(--bad-bg); }
.b-info { color: var(--info); background: var(--info-bg); }
.b-mute { color: var(--muted); background: var(--mute-bg); }

.tbl-w { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface2); }
body[data-concept="A"] .tbl th { text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
body[data-concept="B"] .tbl th { font-family: var(--num); text-transform: uppercase; font-weight: 500; font-size: 11px; }
.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr[data-open] { cursor: pointer; }
.tbl tbody tr[data-open]:hover { background: var(--surface2); }
.tbl .strong { font-weight: 600; }
.tbl .sub { display: block; font-size: 12.5px; color: var(--muted); }
.thumb { width: 64px; height: 42px; object-fit: contain; display: block; }
.cell-m { display: flex; align-items: center; gap: 12px; }

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .sp { flex: 1; }
.filter { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 4px; gap: 2px; overflow-x: auto; max-width: 100%; }
.filter button { border: 0; background: transparent; padding: 7px 14px; border-radius: var(--r-btn); cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.filter button.on { background: var(--primary); color: var(--on-primary); }
.search { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-btn); padding: 0 12px; height: 40px; color: var(--muted); min-width: 220px; }
.search input { border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; width: 100%; }

.list { display: grid; }
.li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); text-decoration: none; }
.li:last-child { border-bottom: 0; }
.li[data-open] { cursor: pointer; }
.li[data-open]:hover { background: var(--surface2); }
.li__m { min-width: 0; flex: 1; }
.li__m b { display: block; font-weight: 600; font-size: 14.5px; }
.li__m span { display: block; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.li__r { text-align: right; font-size: 13px; color: var(--muted); display: grid; gap: 4px; justify-items: end; }
.date-box { width: 52px; flex: 0 0 52px; text-align: center; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 0; background: var(--surface2); }
.date-box b { display: block; font-family: var(--num); font-size: 20px; line-height: 1; }
.date-box span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.date-box.late { border-color: var(--bad); color: var(--bad); }

/* Vinç kartları */
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.mcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; cursor: pointer; transition: transform .2s, border-color .2s; box-shadow: var(--shadow); }
.mcard:hover { transform: translateY(-3px); border-color: var(--text); }
.stage { position: relative; background: radial-gradient(ellipse at 50% 62%, #FFFFFF 0%, #ECE9E2 75%); display: grid; place-items: center; }
body[data-concept="A"] .stage { background: radial-gradient(ellipse at 50% 40%, #30343A 0%, #17191C 70%); }
html[data-theme="light"] body[data-concept="A"] .stage { background: radial-gradient(ellipse at 50% 60%, #FFFFFF 0%, #ECE9E3 75%); }
body[data-concept="B"] .stage { background: #fff; background-image: linear-gradient(#EEF1F5 1px, transparent 1px), linear-gradient(90deg, #EEF1F5 1px, transparent 1px); background-size: 20px 20px; }
.mcard .stage { aspect-ratio: 16 / 9.5; }
.stage img { width: 84%; height: 88%; object-fit: contain; filter: drop-shadow(0 14px 14px rgba(0,0,0,.2)); }
.ref { position: absolute; left: 10px; top: 10px; font: 600 10.5px/1.2 var(--body); color: #fff; background: rgba(17,17,17,.7); padding: 4px 8px; border-radius: 999px; z-index: 1; }
.mcard__b { padding: 16px 18px 18px; display: grid; gap: 10px; }
.mcard__b h3 { font-size: 20px; }
body[data-concept="A"] .mcard__b h3 { font-size: 24px; }
.mcard__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; }
.mcard__meta span { color: var(--muted); display: block; font-size: 12px; }
.mcard__meta b { font-weight: 600; }

.prog { height: 6px; background: var(--mute-bg); border-radius: 3px; overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.prog.bad i { background: var(--bad); }
.prog.ok i { background: var(--ok); }

/* Zaman çizelgesi */
.tl { list-style: none; margin: 0; padding: 4px 0 0 0; position: relative; }
.tl li { position: relative; padding: 0 0 22px 30px; }
.tl li::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: -2px; width: 2px; background: var(--line); }
.tl li:last-child::before { display: none; }
.tl li::after { content: ""; position: absolute; left: 1px; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 3px solid var(--accent); box-sizing: border-box; }
.tl li.late::after { border-color: var(--bad); }
.tl li.plan::after { border-color: var(--faint); }
.tl b { display: block; font-weight: 600; }
.tl .t { font-size: 12.5px; color: var(--muted); }
.tl p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }

/* Sipariş adımları */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 6px 0 2px; }
.step { position: relative; text-align: center; font-size: 11.5px; color: var(--faint); padding-top: 22px; }
.step::before { content: ""; position: absolute; top: 6px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); box-sizing: border-box; z-index: 1; }
.step::after { content: ""; position: absolute; top: 12px; left: -50%; right: 50%; height: 2px; background: var(--line); }
.step:first-child::after { display: none; }
.step.done { color: var(--text); font-weight: 600; }
.step.done::before { background: var(--accent); border-color: var(--accent); }
.step.done::after { background: var(--accent); }
.step.cur::before { box-shadow: 0 0 0 5px rgba(245,197,24,.3); }

/* Grafik */
.bars { display: flex; align-items: flex-end; gap: 14px; height: 160px; padding-top: 10px; }
.bars div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bars i { display: block; width: 100%; max-width: 46px; background: var(--chart); border-radius: 4px 4px 0 0; opacity: .85; }
body[data-concept="A"] .bars i { border-radius: 0; }
.bars div:last-child i { background: var(--accent); opacity: 1; }
.bars span { font-size: 12px; color: var(--muted); }
.bars b { font-family: var(--num); font-size: 13px; }

/* Detay */
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 20px; margin: 0; }
.dl div { min-width: 0; }
.dl dt { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.dl dd { margin: 0; font-weight: 600; }
.hero-m { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; margin-bottom: 20px; }
.hero-m .stage { aspect-ratio: 16 / 10; border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; }
.hero-m .stage img.photo { width: 100%; height: 100%; object-fit: cover; filter: none; }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; background: var(--surface2); }
.thumbs button.on { border-color: var(--accent); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumbs img[src$=".png"] { object-fit: contain; }
@media (max-width: 900px) { .hero-m { grid-template-columns: 1fr; } .thumbs { grid-template-columns: repeat(4, 1fr); } }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 12px 14px; font-weight: 600; font-size: 14px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs button.on { color: var(--text); border-color: var(--accent); }
body[data-concept="A"] .tabs button { font-family: var(--head); text-transform: uppercase; font-size: 17px; letter-spacing: .04em; }

.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photos button { padding: 0; border: 0; cursor: zoom-in; border-radius: var(--r-sm); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface2); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.doc { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; background: var(--surface); }
.doc:hover { border-color: var(--text); }
.doc .fi { width: 40px; height: 48px; flex: 0 0 40px; border-radius: 4px; background: var(--bad-bg); color: var(--bad); display: grid; place-items: center; font: 700 10px/1 var(--body); }
.doc b { display: block; font-size: 14px; font-weight: 600; }
.doc span { font-size: 12px; color: var(--muted); }

.note-box { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--warn-bg); color: var(--text); font-size: 14px; align-items: flex-start; }
.note-box.info { background: var(--info-bg); }
.note-box .ic { color: var(--warn); margin-top: 2px; }

.welcome { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 26px 28px; border-radius: var(--r); background: var(--side); color: #fff; margin-bottom: 20px; position: relative; overflow: hidden; }
.welcome h2 { font-size: 30px; color: #fff; }
body[data-concept="A"] .welcome h2 { font-size: 40px; }
.welcome p { margin: 8px 0 0; color: var(--side-text); max-width: 560px; }
.welcome .btn--y { margin-top: 18px; }
.welcome img { width: 300px; max-width: 34vw; filter: drop-shadow(0 18px 20px rgba(0,0,0,.4)); }
body[data-concept="C"] .welcome { background: var(--accent); color: #111; }
body[data-concept="C"] .welcome h2 { color: #111; }
body[data-concept="C"] .welcome p { color: rgba(17,17,17,.72); }
body[data-concept="C"] .welcome .btn--y { background: #111; color: var(--accent); }
@media (max-width: 760px) { .welcome { grid-template-columns: 1fr; } .welcome img { max-width: 80%; justify-self: center; } }

.tech-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.tcard { padding: 20px; display: grid; gap: 14px; }
.tcard__h { display: flex; gap: 14px; align-items: center; }
.tcard__h b { display: block; font-size: 16px; }
.tcard__h span { font-size: 13px; color: var(--muted); }
.tcard__s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; border-top: 1px solid var(--line); padding-top: 14px; }
.tcard__s b { display: block; font-family: var(--num); font-size: 22px; }
.tcard__s span { font-size: 11.5px; color: var(--muted); }
.tcard.off { opacity: .6; }
.switch { position: relative; width: 40px; height: 22px; border-radius: 11px; background: var(--line); border: 0; cursor: pointer; flex: 0 0 40px; }
.switch::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(18px); }

/* Mesajlaşma */
.msgs { display: grid; gap: 12px; }
.msg { max-width: 82%; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface2); border: 1px solid var(--line); }
.msg.me { justify-self: end; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.msg small { display: block; font-size: 11.5px; opacity: .7; margin-bottom: 4px; }

/* Formlar */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form .full { grid-column: 1 / -1; }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.form input, .form select, .form textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; font-weight: 400; font-size: 14.5px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--mute-bg); }
.form .chk { display: flex; gap: 10px; align-items: center; font-weight: 500; color: var(--text); }
.form .chk input { width: 18px; height: 18px; accent-color: var(--accent); }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }
.checks { display: grid; gap: 8px; }
.checks label { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 500; color: var(--text); cursor: pointer; }
.checks input { width: 18px; height: 18px; accent-color: var(--accent); }
.prows { display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: 1fr 80px 36px; gap: 8px; }
.prow button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); cursor: pointer; }
.sig { width: 100%; height: 160px; border: 1px dashed var(--faint); border-radius: var(--r-sm); background: var(--surface2); touch-action: none; cursor: crosshair; display: block; }
.addphoto { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--faint); border-radius: var(--r-sm); cursor: pointer; color: var(--muted); background: transparent; font-size: 13px; gap: 4px; }

/* Modal & çekmece */
.ov { position: fixed; inset: 0; z-index: 90; background: rgba(5,6,8,.55); display: flex; justify-content: center; align-items: flex-start; padding: 6vh 16px; overflow-y: auto; opacity: 0; transition: opacity .2s; }
.ov.show { opacity: 1; }
.modal { background: var(--surface); color: var(--text); border-radius: var(--r); width: min(720px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.35); border: 1px solid var(--line); transform: translateY(12px); transition: transform .25s; }
.ov.show .modal { transform: none; }
.modal--wide { width: min(1040px, 100%); }
.modal__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal__h h3 { font-size: 20px; }
body[data-concept="A"] .modal__h h3 { font-size: 24px; }
.modal__h small { display: block; color: var(--muted); font-size: 12.5px; }
.modal__x { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-btn); cursor: pointer; flex: 0 0 38px; }
.modal__b { padding: 22px; display: grid; gap: 18px; }
.modal__f { display: flex; gap: 10px; justify-content: flex-end; padding: 16px 22px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sec-t { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-family: var(--body); }
.ul-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ul-check li { display: flex; gap: 10px; align-items: flex-start; }
.ul-check li .ic { color: var(--ok); margin-top: 2px; }
.sign-box { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface2); }
.sign-box .sig-name { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 26px; color: var(--info); line-height: 1; }

/* Bildirim */
.toast { position: fixed; z-index: 120; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: #111; color: #fff; padding: 12px 18px; border-radius: 999px; font-weight: 500; font-size: 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: opacity .25s, transform .25s; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { color: #F5C518; }
body[data-concept="A"] .toast { border-radius: 0; border-left: 3px solid #F5C518; }

/* Bildirim paneli */
.pop { position: absolute; z-index: 40; right: 0; top: 52px; width: 340px; max-width: calc(100vw - 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 20px 50px rgba(0,0,0,.2); display: none; text-align: left; }
.pop.show { display: block; }
.pop .li { padding: 12px 16px; }

/* Teknisyen (mobil öncelikli) */
.jobs { display: grid; gap: 14px; }
.job { padding: 18px; display: grid; gap: 12px; }
.job__h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.job__time { font-family: var(--num); font-size: 26px; font-weight: 700; line-height: 1; }
.job__act { display: flex; gap: 8px; flex-wrap: wrap; }
.day-h { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 8px 0 -4px; }

/* Giriş ekranı */
.login { min-height: calc(100vh - 34px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.login__art { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 40px; color: #fff; background: #0E0F11; }
.login__art .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; opacity: .9; }
.login__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(8,9,10,.92) 0%, rgba(8,9,10,.2) 55%, rgba(8,9,10,.5) 100%); }
.login__art > * { position: relative; z-index: 1; }
.login__art .logo { height: 34px; width: auto; }
.login__art h2 { font-size: clamp(36px, 4.4vw, 60px); color: #fff; max-width: 14ch; }
.login__art h2 em { font-style: normal; color: var(--accent); }
.login__art p { color: rgba(255,255,255,.75); max-width: 460px; margin: 14px 0 0; }
.login__feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.login__feats span { font-size: 13px; font-weight: 600; padding: 7px 12px; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-btn); backdrop-filter: blur(4px); }
.login__art .cut { display: none; }
body[data-concept="B"] .login__art { background: #0B2545; }
body[data-concept="B"] .login__art .bg { display: none; }
body[data-concept="B"] .login__art::after { background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 32px 32px; }
body[data-concept="B"] .login__art .cut, body[data-concept="C"] .login__art .cut { display: block; position: absolute; right: -6%; bottom: 22%; width: 78%; z-index: 1; filter: drop-shadow(0 30px 30px rgba(0,0,0,.35)); }
body[data-concept="C"] .login__art { background: var(--accent); color: #111; }
body[data-concept="C"] .login__art .bg { display: none; }
body[data-concept="C"] .login__art::after { display: none; }
body[data-concept="C"] .login__art h2, body[data-concept="C"] .login__art h2 em { color: #111; }
body[data-concept="C"] .login__art h2 em { -webkit-text-stroke: 2px #111; color: transparent; }
body[data-concept="C"] .login__art p { color: rgba(17,17,17,.75); }
body[data-concept="C"] .login__feats span { border-color: rgba(17,17,17,.25); }
.login__form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; background: var(--bg); }
.login__box { width: min(420px, 100%); display: grid; gap: 20px; }
.login__box h1 { font-size: 34px; }
body[data-concept="A"] .login__box h1 { font-size: 44px; }
.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.roles button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-sm); padding: 12px 8px; cursor: pointer; display: grid; gap: 6px; justify-items: center; font-size: 13px; font-weight: 600; color: var(--muted); }
.roles button .ic { width: 22px; height: 22px; }
.roles button.on { border-color: var(--text); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
body[data-concept="C"] .roles button.on { background: var(--accent); border-color: var(--accent); box-shadow: none; color: #111; }
.login__demo { font-size: 13px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--warn-bg); }
.login__foot { font-size: 13px; color: var(--muted); text-align: center; }
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__art { min-height: 300px; padding: 28px 24px; }
  body[data-concept="B"] .login__art .cut, body[data-concept="C"] .login__art .cut { width: 62%; bottom: 10%; }
}
.login__art .logo--d { display: none; }
body[data-concept="C"] .login__art .logo--w { display: none; }
body[data-concept="C"] .login__art .logo--d { display: block; }
body[data-concept="B"] .login__art .cut, body[data-concept="C"] .login__art .cut { right: -4%; bottom: auto; top: 16%; width: 66%; }
@media (max-width: 900px) { body[data-concept="B"] .login__art .cut, body[data-concept="C"] .login__art .cut { width: 52%; top: 10%; } }
.kpis { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.sub { display: block; font-size: 12.5px; color: var(--muted); }
.strong { font-weight: 600; }
.top__t { min-width: 0; }
@media (max-width: 1000px) {
  .top__t { flex: 1; }
  .top__t h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .welcome { padding: 22px 20px; }
  .welcome h2 { font-size: 26px; }
  body[data-concept="A"] .welcome h2 { font-size: 32px; }
  .welcome img { max-width: 62%; width: 62%; }
}
.form label, .form > * { min-width: 0; }
.form input, .form select, .form textarea, .prow select, .prow input { width: 100%; min-width: 0; box-sizing: border-box; }
.prow select, .prow input { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 10px; }
@media (max-width: 600px) {
  .li { flex-wrap: wrap; row-gap: 8px; }
  .li__m { flex: 1 1 0; }
  .li__r { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: flex-start; text-align: left; }
  .li .thumb { width: 54px; height: 36px; }
}