/* ═══════════════════════════════════════════════════════════
   Ekipman Takip — Kullanım Kılavuzu (paylaşılan stil)
   Browser print için optimize. A4 sayfa, profesyonel görünüm.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --brand:#ff6030;
  --brand-l:rgba(255,96,48,.08);
  --brand-d:#e54a1e;
  --ink:#1a1d2e;
  --ink-2:#4a4f6a;
  --ink-3:#8a8fa8;
  --paper:#ffffff;
  --paper-2:#f7f8fb;
  --paper-3:#eef0f5;
  --line:#dde1ec;
  --ok:#16a34a;
  --warn:#ca8a04;
  --danger:#dc2626;
  --info:#2563eb;
  --pro:#7c3aed;
}
html{font-size:14px;-webkit-font-smoothing:antialiased}
body{
  font-family:'Inter',sans-serif;
  background:var(--paper-2);
  color:var(--ink);
  line-height:1.6;
  padding:0;
}
.page{
  background:var(--paper);
  max-width:820px;
  margin:0 auto;
  padding:40px 56px 64px;
  min-height:100vh;
  box-shadow:0 2px 18px rgba(0,0,0,.06);
}

/* ─── HEADER ────────────────────────────── */
.doc-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:18px;margin-bottom:32px;
  border-bottom:3px solid var(--brand);
}
.doc-head .brand{display:flex;align-items:center;gap:10px}
.doc-head .brand img{height:34px;width:auto}
.doc-head .brand-text b{display:block;font-size:14px;font-weight:800;letter-spacing:-.2px}
.doc-head .brand-text span{font-size:11px;color:var(--ink-3);font-family:'JetBrains Mono',monospace;letter-spacing:.04em}
.doc-head .doc-meta{text-align:right;font-size:11px;color:var(--ink-3);font-family:'JetBrains Mono',monospace;line-height:1.5}
.doc-head .doc-meta b{display:block;color:var(--brand);font-size:12px;font-weight:700;letter-spacing:.04em}

/* ─── HERO / TITLE BLOCK ─────────────────── */
.hero{margin-bottom:36px}
.hero .badge{display:inline-block;font-size:11px;font-weight:700;color:var(--brand);background:var(--brand-l);padding:5px 12px;border-radius:20px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;font-family:'JetBrains Mono',monospace}
.hero h1{font-size:34px;font-weight:800;letter-spacing:-.8px;line-height:1.15;margin-bottom:10px}
.hero p.subtitle{font-size:15.5px;color:var(--ink-2);max-width:680px;line-height:1.65}

/* ─── TOC ─────────────────────────────────── */
.toc{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 22px;
  margin-bottom:36px;
}
.toc h3{font-size:12px;font-weight:800;color:var(--ink-2);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;font-family:'JetBrains Mono',monospace}
.toc ol{list-style:none;counter-reset:toc;display:grid;grid-template-columns:1fr 1fr;gap:6px 24px}
.toc ol li{counter-increment:toc;display:flex;gap:8px;font-size:13px}
.toc ol li::before{content:counter(toc,decimal-leading-zero);color:var(--brand);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:11px;padding-top:2px}
.toc ol li a{color:var(--ink);text-decoration:none}
.toc ol li a:hover{color:var(--brand)}

/* ─── SECTIONS ────────────────────────────── */
section{margin-bottom:42px}
section.no-break{page-break-inside:avoid}
h2{
  font-size:22px;font-weight:800;letter-spacing:-.4px;
  margin:0 0 14px;padding-top:6px;
  display:flex;align-items:center;gap:10px;
}
h2 .num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:var(--brand);color:#fff;font-size:13px;font-weight:800;font-family:'JetBrains Mono',monospace;flex-shrink:0}
h3{font-size:16.5px;font-weight:700;margin:22px 0 10px;color:var(--ink)}
h4{font-size:13.5px;font-weight:700;margin:14px 0 6px;color:var(--ink-2)}
p{margin-bottom:10px;color:var(--ink-2);font-size:13.5px;line-height:1.7}
p strong,p b{color:var(--ink);font-weight:700}
ul,ol{margin:6px 0 14px 22px;color:var(--ink-2);font-size:13.5px;line-height:1.75}
li{margin-bottom:3px}

/* ─── STEP LIST ───────────────────────────── */
.steps{counter-reset:step;list-style:none;margin:14px 0 18px 0;padding:0}
.steps>li{counter-increment:step;position:relative;padding:0 0 14px 44px;border-left:2px dashed var(--paper-3);margin-left:14px}
.steps>li:last-child{border-left:2px dashed transparent}
.steps>li::before{
  content:counter(step);
  position:absolute;left:-15px;top:-2px;
  width:30px;height:30px;border-radius:50%;
  background:var(--brand);color:#fff;
  font-weight:700;font-size:13px;font-family:'JetBrains Mono',monospace;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 4px var(--paper);
}
.steps>li .stt{display:block;font-weight:700;color:var(--ink);font-size:14px;margin-bottom:4px}
.steps>li .sdesc{color:var(--ink-2);font-size:13px;line-height:1.7}

/* ─── MOCKUP / SCREENSHOT REPLICA ──────── */
.mock{
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  margin:14px 0 18px;
  box-shadow:0 2px 8px rgba(20,25,50,.04);
  position:relative;
  font-size:12.5px;
}
.mock-cap{font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase;font-family:'JetBrains Mono',monospace;margin-bottom:8px}
.mock-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.mock-row:last-child{margin-bottom:0}
.mock-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);font-size:12px;font-weight:600}
.mock-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.mock-btn.success{background:var(--ok);color:#fff;border-color:var(--ok)}
.mock-btn.danger{background:var(--danger);color:#fff;border-color:var(--danger)}
.mock-btn.ghost{background:transparent;color:var(--ink-2)}
.mock-input{flex:1;min-width:120px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:var(--paper-2);color:var(--ink-3);font-size:12px;font-style:italic}
.mock-tag{display:inline-block;padding:2px 8px;border-radius:14px;font-size:10.5px;font-weight:700;background:var(--brand-l);color:var(--brand);letter-spacing:.02em}
.mock-tag.ok{background:rgba(22,163,74,.1);color:var(--ok)}
.mock-tag.warn{background:rgba(202,138,4,.1);color:var(--warn)}
.mock-tag.danger{background:rgba(220,38,38,.1);color:var(--danger)}
.mock-card{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--paper-2);margin-bottom:6px;font-size:12px}
.mock-card .ico{width:32px;height:32px;border-radius:8px;background:var(--brand-l);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.mock-card .col-grow{flex:1;min-width:0}
.mock-card .col-grow b{display:block;font-weight:700;color:var(--ink);font-size:12.5px}
.mock-card .col-grow span{display:block;font-size:11px;color:var(--ink-3)}
.mock-divider{height:1px;background:var(--line);margin:8px 0}
.mock-arrow{display:inline-block;font-size:14px;color:var(--brand);font-weight:700}
.mock-note{font-size:11px;color:var(--ink-3);font-style:italic;margin-top:6px;padding-left:6px;border-left:2px solid var(--brand);padding-left:10px}

/* ─── CALLOUT BOXES ───────────────────── */
.box{
  padding:12px 14px 12px 44px;
  border-radius:10px;
  margin:14px 0;
  border:1px solid;
  position:relative;
  font-size:13px;line-height:1.6;
  page-break-inside:avoid;
}
.box::before{
  content:'';position:absolute;left:14px;top:13px;
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;
}
.box.tip{background:rgba(37,99,235,.05);border-color:rgba(37,99,235,.2);color:#1e3a8a}
.box.tip::before{content:'💡';background:rgba(37,99,235,.1)}
.box.warn{background:rgba(202,138,4,.05);border-color:rgba(202,138,4,.25);color:#854d0e}
.box.warn::before{content:'⚠';background:rgba(202,138,4,.12)}
.box.danger{background:rgba(220,38,38,.05);border-color:rgba(220,38,38,.25);color:#7f1d1d}
.box.danger::before{content:'⛔';background:rgba(220,38,38,.12)}
.box.pro{background:rgba(124,58,237,.05);border-color:rgba(124,58,237,.25);color:#581c87}
.box.pro::before{content:'⭐';background:rgba(124,58,237,.12)}
.box.ok{background:rgba(22,163,74,.05);border-color:rgba(22,163,74,.25);color:#14532d}
.box.ok::before{content:'✓';background:rgba(22,163,74,.12);color:var(--ok)}
.box b{font-weight:700}
.box .ttl{display:block;font-weight:800;margin-bottom:3px;font-size:12.5px;letter-spacing:.02em}

/* ─── KEY-VALUE / SPEC TABLE ─────────── */
table.kv{width:100%;border-collapse:collapse;margin:12px 0 18px;font-size:13px}
table.kv th,table.kv td{padding:9px 12px;text-align:left;vertical-align:top}
table.kv th{background:var(--paper-2);color:var(--ink-2);font-weight:700;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-family:'JetBrains Mono',monospace;border-bottom:1px solid var(--line);width:32%}
table.kv td{border-bottom:1px solid var(--paper-3);color:var(--ink-2)}
table.kv tr:last-child td{border-bottom:none}

/* ─── ROLE BADGE ───────────────────────── */
.role-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:700;background:var(--paper-3);color:var(--ink-2);font-family:'JetBrains Mono',monospace;letter-spacing:.02em;margin-right:4px}
.role-badge.owner{background:#fef3c7;color:#92400e}
.role-badge.admin{background:#fee2e2;color:#991b1b}
.role-badge.personel{background:#dbeafe;color:#1e40af}
.role-badge.sistem{background:#ede9fe;color:#5b21b6}

/* ─── INLINE KEYWORD / KEY ──────────── */
kbd{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--paper-3);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--ink);font-weight:600}
code{font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--brand-l);color:var(--brand-d);padding:1px 5px;border-radius:4px;font-weight:600}

/* ─── FOOTER ───────────────────────────── */
.doc-foot{
  margin-top:48px;padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  font-size:11px;color:var(--ink-3);font-family:'JetBrains Mono',monospace;
}
.doc-foot a{color:var(--brand);text-decoration:none;font-weight:600}

/* ─── PRINT TOOLBAR ─────────────────── */
.print-bar{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;padding:9px 18px;border-radius:30px;
  display:flex;align-items:center;gap:14px;font-size:13px;font-weight:600;
  box-shadow:0 8px 26px rgba(0,0,0,.25);z-index:99;
}
.print-bar button{background:var(--brand);color:#fff;border:none;padding:6px 14px;border-radius:18px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit}
.print-bar button:hover{background:var(--brand-d)}
.print-bar .hint{font-size:11.5px;opacity:.7}
@media(max-width:640px){.print-bar{font-size:11.5px;gap:8px;padding:8px 12px}.print-bar .hint{display:none}}

/* ─── BACK LINK ─────────────────────── */
.back-link{
  display:inline-flex;align-items:center;gap:6px;
  margin-bottom:18px;padding:6px 14px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:8px;
  color:var(--ink-2);text-decoration:none;font-size:12.5px;font-weight:600;
}
.back-link:hover{background:var(--paper-3);color:var(--ink)}

/* ═══════════════════════════════════════════════════════════
   PRINT MEDIA — A4 sayfa düzeni, sayfa kırma kuralları
   ═══════════════════════════════════════════════════════════ */
@media print{
  @page{size:A4;margin:14mm 12mm}
  html,body{background:#fff!important;font-size:11.5pt}
  body{padding:0}
  .page{box-shadow:none;padding:0;max-width:none;margin:0}
  .print-bar,.back-link{display:none!important}
  .doc-head{margin-bottom:18px}
  .hero{margin-bottom:22px}
  .hero h1{font-size:26pt;margin-bottom:6px}
  .hero p.subtitle{font-size:11.5pt}
  h2{font-size:16pt;page-break-after:avoid}
  h3{font-size:13pt;page-break-after:avoid}
  section{margin-bottom:18px;page-break-inside:auto}
  .mock,.box,.steps>li{page-break-inside:avoid}
  a{color:var(--ink)!important;text-decoration:none}
  .doc-foot a{color:var(--brand)!important}
  .toc{page-break-after:always}
}