/*
 * P-EPC Teknik Ürün — görsel katman.
 *
 * TEK DOĞRU KAYNAK: pepcsaas/crm/pepc-crm-design-spec.md (+ Osman'ın 2026-07-05 EK KARARLARI).
 * Çelişkide SPEC kazanır. Buradaki değerler spec §2/§3/§4/§6/§7/§8'den birebir alınmıştır.
 *
 * EK KARAR 2: indigo #394DFE ailesi GEÇERSİZ — marka/accent de Signal Amber'e döner.
 * EK KARAR 1: aksiyon butonları amber zemin + SİYAH BOLD font.
 */

:root {
  --bg: #F6F8FB;
  --surface: #FFFFFF;
  --surface-2: #FBFCFE;
  --line: #E6EAF0;
  --line-2: #EEF1F6;
  --ink: #0B1F3A;
  --text: #37465A;
  --muted: #7A8A9B;
  --muted-2: #9AA7B6;

  /* Tek marka rengi: Signal Amber. */
  --brand: #FF9F00;
  --brand-ink: #B45309;      /* metin rolünde okunabilir koyu amber */
  --brand-tint: #FFF4E5;
  --brand-tint-2: #FFE7C2;
  --cta: #FF9F00;
  --cta-hover: #F09200;
  --cta-text: #000;

  --amber: #B45309; --amber-bg: #FDF1E1; --amber-fill: #F59E0B;
  --blue: #1D4FD8;  --blue-bg: #ECF1FE;  --blue-fill: #1D4FD8;
  --green: #047857; --green-bg: #E6F6EF; --green-fill: #12B76A;
  --teal: #0E7490;  --teal-bg: #E3F5FA;  --teal-fill: #0E7490;
  --red: #C0392B;   --red-bg: #FCEEEC;   --red-fill: #C0392B;
  --slate: #5B6B7E; --slate-bg: #EFF2F6; --slate-fill: #5B6B7E;

  --radius: 10px;
  --radius-sm: 7px;
  --shadow-sm: 0 1px 2px rgba(11, 31, 58, .04), 0 1px 3px rgba(11, 31, 58, .05);
  --shadow-md: 0 6px 20px rgba(11, 31, 58, .07), 0 1px 3px rgba(11, 31, 58, .05);

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Sayı · kod · tutar · tarih DAİMA mono + tabular (spec §3). */
.mono, code, time, td.sayi, .kpi-sayi {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Odak HER ZAMAN görünür (spec §11 + a11y `focus-states`). */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Klavye kullanıcısı nav'ı atlayabilmeli (a11y `skip-links`). */
.atla {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cta); color: var(--cta-text);
  font: 700 14px var(--sans); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0;
}
.atla:focus { left: 0; }

/* ---------------------------------------------------------------- KABUK */

.app { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }

.yan {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  padding: 18px 14px;
  gap: 6px;
}

.marka { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; }
.marka-kutu {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand); color: #000;
  font: 700 16px/32px var(--mono); text-align: center;
}
.marka-ad { font: 600 16px var(--sans); color: var(--ink); }
.marka-alt { font: 500 10.5px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

.nav-grup { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 14px 10px 6px; }

.nav-oge {
  display: block; padding: 8px 10px; border-radius: 8px;
  font: 500 15.5px var(--sans); color: var(--text); text-decoration: none;
}
.nav-oge:hover { background: var(--surface-2); text-decoration: none; }
.nav-oge[aria-current="page"] { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }

.yan-alt { margin-top: auto; padding: 12px 10px 0; border-top: 1px solid var(--line-2); font: 400 12px var(--mono); color: var(--muted); }

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

.ust {
  height: 58px; flex: 0 0 auto;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 26px; gap: 16px;
}
.ust h1 { font: 600 15.5px var(--sans); color: var(--ink); letter-spacing: -.01em; }
.ust-sag { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.ust-kisi { font: 600 14.5px var(--sans); color: var(--ink); }
.ust-rol { font: 400 11px var(--sans); color: var(--muted); }

.icerik { flex: 1 1 auto; padding: 22px 26px 48px; }

/* ------------------------------------------------------- KİMLİK EKRANLARI */

.kimlik { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.kimlik-kart {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 28px;
}
.kimlik-kart h1 { font: 600 23px var(--sans); color: var(--ink); letter-spacing: -.015em; margin-bottom: 6px; }
.kimlik-kart .aciklama { color: var(--muted); font-size: 14px; margin-bottom: 20px; }

/* ------------------------------------------------------------ BİLEŞENLER */

h1 { font: 600 23px var(--sans); color: var(--ink); letter-spacing: -.015em; }
h2 { font: 600 15px var(--sans); color: var(--ink); }
h3 { font: 600 14px var(--sans); color: var(--ink); }

.kart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.kart > h2 { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.kart-govde { padding: 16px; }

.kpi-satir { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
.kpi { flex: 1 1 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px; }
.kpi-etiket { font: 400 14.5px var(--sans); color: var(--muted); }
.kpi-sayi { font: 600 31px var(--mono); color: var(--ink); letter-spacing: -.02em; margin-top: 11px; }

/* Butonlar — EK KARAR 1: aksiyon = amber zemin + SİYAH BOLD. */
.btn {
  font: 700 13px/1 var(--sans); padding: 10px 15px; border-radius: 8px;
  border: 1px solid transparent; display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; transition: background .15s, border-color .15s;
  background: var(--cta); color: var(--cta-text);
}
.btn:hover { background: var(--cta-hover); }
.btn-ikincil { background: var(--surface); color: var(--text); border-color: var(--line); font-weight: 600; }
.btn-ikincil:hover { background: var(--surface-2); }
.btn-tehlike { background: var(--surface); color: var(--red); border-color: var(--line); font-weight: 600; }
.btn-tehlike:hover { background: var(--red-bg); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Tablolar (spec §6). Dar ekranda YATAY KAYAR, düzeni kırmaz. */
.tablo-sar { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th {
  font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); background: var(--surface-2);
  padding: 11px 16px; text-align: left; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--line-2); color: var(--text); vertical-align: middle; }
tbody tr:hover { background: #FAFBFD; }
td.sayi, th.sayi { text-align: right; }

/* Rozetler (spec §8) — renk TEK BAŞINA anlam taşımaz, metin her zaman yanında. */
.rozet {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 13px var(--sans); padding: 3px 9px 3px 8px; border-radius: 20px;
  white-space: nowrap;
}
.rozet .nokta { width: 6px; height: 6px; border-radius: 50%; }
.r-green { color: var(--green); background: var(--green-bg); } .r-green .nokta { background: var(--green-fill); }
.r-blue  { color: var(--blue);  background: var(--blue-bg); }  .r-blue .nokta  { background: var(--blue-fill); }
.r-amber { color: var(--amber); background: var(--amber-bg); } .r-amber .nokta { background: var(--amber-fill); }
.r-red   { color: var(--red);   background: var(--red-bg); }   .r-red .nokta   { background: var(--red-fill); }
.r-teal  { color: var(--teal);  background: var(--teal-bg); }  .r-teal .nokta  { background: var(--teal-fill); }
.r-slate { color: var(--slate); background: var(--slate-bg); } .r-slate .nokta { background: var(--slate-fill); }

/* Formlar (spec §7): genişlik = gireceği veri kadar; 1fr 1fr ızgarayla DOLDURMA. */
.alanlar { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: flex-start; }
.alan { display: flex; flex-direction: column; gap: 7px; }
.alan > label { font: 600 14px var(--sans); color: var(--text); }

/* Form satırındaki buton, komşu input'un ALT hizasına oturur.
   (`.alan` bir sütun olduğu için `justify-content` burada iş görmez — `align-self` gerekir.) */
.alan-aksiyon { align-self: flex-end; }
.alan .ipucu { font: 400 12px var(--sans); color: var(--muted); }

.inp {
  font: 400 14px var(--sans); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; background: var(--surface); width: 100%;
  transition: border-color .14s, box-shadow .14s;
}
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint); outline: none; }
select.inp { appearance: none; padding-right: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A8A9B' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
textarea.inp { min-height: 78px; resize: vertical; }
input[type="number"].inp, .sayi-inp { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Genişlik tablosu — spec §7.2, birebir. */
.w-qty { width: 72px; } .w-time { width: 90px; } .w-unit { width: 110px; }
.w-vkn { width: 120px; } .w-price { width: 130px; } .w-code { width: 130px; }
.w-date { width: 140px; } .w-phone { width: 140px; } .w-cur { width: 150px; }
.w-city { width: 160px; } .w-short { width: 170px; } .w-vin { width: 200px; }
.w-person { width: 220px; } .w-email { width: 240px; }
.w-cust { width: 400px; max-width: 100%; } .w-addr { width: 520px; max-width: 100%; }
.w-title, .w-full { width: 100%; }

/* Geri bildirim */
.uyari, .durum-serit {
  border-radius: var(--radius-sm); padding: 11px 14px; margin-bottom: 16px;
  font: 500 14px var(--sans); border: 1px solid;
}
.durum-serit { color: var(--green); background: var(--green-bg); border-color: rgba(4, 120, 87, .18); }
.uyari { color: var(--red); background: var(--red-bg); border-color: rgba(192, 57, 43, .18); }
.uyari p + p { margin-top: 4px; }

/* Boş durum = EYLEME ÇAĞRI, üzgün mesaj değil (spec §11). */
.bos {
  text-align: center; padding: 40px 20px; color: var(--muted);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.bos strong { display: block; color: var(--ink); font: 600 15px var(--sans); margin-bottom: 6px; }

/* Kimliğe bürünme şeridi — KALICI ve kırmızı (spec §6.6). */
.burunme {
  position: sticky; top: 0; z-index: 50;
  background: #B91C1C; color: #fff;
  font: 600 14px var(--sans);
  padding: 9px 26px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.burunme .btn { background: #fff; color: #B91C1C; padding: 6px 12px; }
.burunme .btn:hover { background: #FEE2E2; }

.arac-cubugu { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 16px; }
.bolum { margin-bottom: 26px; }
.satir-islem { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.meta { font: 400 13px var(--sans); color: var(--muted); }

/* Responsive (spec §12) */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .yan { flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .yan-alt, .nav-grup { display: none; }
  .marka { padding: 0 12px 0 0; }
  .icerik, .ust { padding-left: 16px; padding-right: 16px; }
}
@media (max-width: 760px) {
  .alan[class*="w-"], .inp[class*="w-"] { width: 100%; }
  .alanlar > .alan { width: 100%; }
}