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

:root{
  --paper:#f5f7fa; --surface:#ffffff;
  --ink:#17212b; --ink-2:#42505e; --ink-3:#6c7a88;
  --line:#e4e9ef; --line-strong:#c9d4de;
  --blue:#1b5a93; --blue-2:#2e77be; --blue-ink:#123f68; --blue-wash:#eaf1f8;
  --amber:#b26a12; --amber-wash:#f7ecd8;
  --teal:#1b7357; --teal-wash:#e0efe9;
  --red:#b3352a; --red-wash:#f8eae8;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --disp:"Archivo",var(--sans);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
h1,h2,h3{margin:0; font-family:var(--disp); font-weight:700; letter-spacing:-.015em; line-height:1.1}
.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3)}

/* signature: ölçek / cetvel çizgisi */
.scale{height:7px; margin:14px 0;
  background:
    linear-gradient(var(--line-strong),var(--line-strong)) left bottom/100% 1px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 13px) left bottom/100% 6px no-repeat;}
.scale.short{width:64px; margin:9px 0 14px}
.scale.blue{background:
    linear-gradient(var(--blue),var(--blue)) left bottom/100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, var(--blue) 0 1.5px, transparent 1.5px 13px) left bottom/100% 6px no-repeat;}

/* ===== top bar ===== */
.topbar{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.topbar .in{max-width:1180px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; gap:14px}
.mark{width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(160deg,var(--blue-2),var(--blue-ink)); box-shadow:0 2px 8px rgba(18,63,104,.28)}
.brand b{font-family:var(--disp); font-weight:700; font-size:15.5px; letter-spacing:-.01em; display:block; line-height:1.15}
.brand span{font-size:10.5px; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase}
.nav{display:flex; gap:2px; margin-left:10px}
.nav a{padding:8px 12px; border-radius:7px; font-size:13.5px; font-weight:500; color:var(--ink-2); white-space:nowrap}
.nav a:hover{background:var(--blue-wash); color:var(--blue)}
.nav a.on{background:var(--blue-wash); color:var(--blue)}
.topbar .sp{flex:1}
.who{display:flex; align-items:center; gap:10px; font-size:13px}
.who .av{width:34px;height:34px;border-radius:8px;background:var(--blue-wash);color:var(--blue);
  display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:14px; flex:none}
.who .nm{font-weight:600; line-height:1.15}
.who .rl{font-size:11.5px; color:var(--ink-3)}
.linkbtn{font-size:12.5px; color:var(--ink-3); border:1px solid var(--line); padding:7px 12px; border-radius:6px; background:var(--surface); white-space:nowrap}
.linkbtn:hover{border-color:var(--line-strong); color:var(--ink)}

.wrap{max-width:1180px; margin:0 auto; padding:28px 28px 70px}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid transparent; border-radius:7px;
  font-family:var(--sans); font-weight:600; font-size:14px; padding:10px 17px; transition:.15s; letter-spacing:.01em}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 1px 2px rgba(18,63,104,.25)}
.btn-primary:hover{background:var(--blue-ink)}
.btn-ghost{background:var(--surface); border-color:var(--line-strong); color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--blue-2); color:var(--blue)}
.btn-sm{padding:8px 13px; font-size:13px}

/* messages */
.messages{margin-bottom:18px; display:flex; flex-direction:column; gap:8px}
.alert{padding:11px 15px; border-radius:8px; font-size:13.5px; border:1px solid}
.alert-success{background:var(--teal-wash); border-color:#bfe0d1; color:#155c43}
.alert-danger,.alert-error{background:var(--red-wash); border-color:#e6bcb7; color:#8a271d}
.alert-info{background:var(--blue-wash); border-color:#cbdff0; color:var(--blue-ink)}
.alert-warning{background:var(--amber-wash); border-color:#e7d3ab; color:#7c4d10}

/* ===== page head ===== */
.pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:20px}
.pagehead .eyebrow{margin-bottom:7px}
.pagehead h1{font-size:32px}
.context{margin-top:4px; color:var(--ink-3); font-size:13.5px}
.context b{color:var(--ink-2); font-family:var(--mono); font-weight:600}

/* toolbar & form controls */
.toolbar{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin:18px 0 6px}
.inp,.form-control,.form-select,
input[type=text],input[type=password],input[type=date],input[type=number],textarea,select{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:7px; padding:9px 12px; font-size:14px; font-family:inherit}
.inp:focus,.form-control:focus,.form-select:focus,input:focus,textarea:focus,select:focus{
  outline:none; border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(46,119,190,.14)}
.search{position:relative; min-width:240px; flex:1; max-width:340px}
.search .inp{width:100%; padding-left:34px}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--ink-3)}
select.inp,select.form-select,select{appearance:none; padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%236c7a88' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center}
.result-note{margin-left:auto; font-size:13px; color:var(--ink-3)}

/* ===== data table ===== */
.sheet{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:0 1px 2px rgba(23,33,43,.04)}
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse; min-width:720px}
thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); text-align:left; font-weight:500; padding:13px 18px; border-bottom:1px solid var(--line); background:#fbfcfe}
tbody td{padding:15px 18px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer; transition:background .12s}
tbody tr.clickable:hover{background:var(--blue-wash)}
.cert-cell{font-family:var(--mono); font-weight:600; color:var(--blue); font-size:13.5px}
.cust-cell{font-weight:600}
.cust-cell small{display:block; font-weight:400; color:var(--ink-3); font-size:12px; margin-top:1px}
.datecell{font-family:var(--mono); color:var(--ink-2); font-size:13px}
.atanan-td{font-size:12.5px; color:var(--ink-2); max-width:210px}
.empty{text-align:center; color:var(--ink-3); padding:34px 0}

.tip{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.05em; padding:3px 8px; border-radius:5px; border:1px solid}
.tip-SAT{color:#345f9c; border-color:#c3d4ea; background:#eef3fa}
.tip-TUS{color:#1b7357; border-color:#c0ddd1; background:#e8f3ee}
.tip-CIHAZ{color:#7a4499; border-color:#dcc9e6; background:#f4edf8}

.stat{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; font-family:var(--sans);
  padding:4px 11px 4px 9px; border-radius:100px; white-space:nowrap}
.stat .tick{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 18%, transparent)}
.stat-bekliyor{color:var(--amber); background:var(--amber-wash)}
.stat-yuklendi{color:var(--teal); background:var(--teal-wash)}

/* pager */
.pager{display:flex; gap:8px; justify-content:center; align-items:center; margin-top:18px; font-size:13.5px}
.pager a,.pager span{padding:8px 13px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface)}
.pager span.cur{color:var(--ink-3); border-color:var(--line)}

/* ===== login ===== */
.login-wrap{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{width:100%; max-width:370px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:34px 30px; box-shadow:0 1px 2px rgba(23,33,43,.04)}
.login-logo{display:flex; align-items:center; gap:12px; margin-bottom:22px}
.login-logo b{display:block; font-size:15px; font-weight:600; font-family:var(--disp)}
.login-logo small{color:var(--ink-3); font-size:12px}
.login-card h1{font-size:20px; margin-bottom:4px}
.login-card .lead{color:var(--ink-3); font-size:13.5px; margin-bottom:22px}
.login-switch{margin-top:20px; text-align:center; font-size:12.5px; color:var(--ink-3)}
.field{margin-bottom:15px}
.field > label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.field .inp,.field input{width:100%}
.field .inp:focus,.field input{font-size:15px}
.err{color:var(--red); font-size:12.5px; margin-top:4px}
.req{color:var(--red)}

/* ===== certificate masthead ===== */
.backrow{margin-bottom:16px}
.masthead{background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(23,33,43,.04)}
.masthead .body{padding:22px 26px 18px; position:relative}
.masthead .body::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:linear-gradient(var(--blue-2),var(--blue-ink))}
.masthead .row1{display:flex; justify-content:space-between; align-items:flex-start; gap:16px}
.masthead .certno{font-family:var(--mono); font-size:26px; font-weight:600; letter-spacing:-.01em; color:var(--ink)}
.masthead h1{font-size:22px; margin-top:6px}
.masthead .dev{color:var(--ink-3); font-size:14px; margin-top:3px}
.metastrip{display:flex; flex-wrap:wrap; border-top:1px solid var(--line); background:#fbfcfe}
.metastrip .m{padding:12px 22px; border-right:1px solid var(--line); flex:1; min-width:150px}
.metastrip .m .k{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.metastrip .m .v{font-size:14px; font-weight:600; margin-top:3px}
.metastrip .m .v.mono{font-weight:500}

/* ===== detail grid ===== */
.cols{display:grid; grid-template-columns:1.25fr .85fr; gap:20px; align-items:start; margin-top:20px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:0 1px 2px rgba(23,33,43,.04)}
.card .hd{padding:15px 20px 0}
.card .hd h2{font-size:15px; font-family:var(--disp); font-weight:700; display:flex; align-items:baseline; gap:8px}
.card .hd .ct{font-family:var(--mono); font-size:12px; font-weight:400; color:var(--ink-3)}
.card .bd{padding:8px 20px 20px}
.card-pad{padding:20px}

/* spec list */
.specs{display:grid; grid-template-columns:1fr 1fr; gap:0 22px}
.specs .s{padding:11px 0; border-bottom:1px solid var(--line)}
.specs .s.wide{grid-column:1/-1}
.specs .k{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.specs .v{font-size:14px; margin-top:3px; font-weight:500}

/* guided steps */
.step{display:flex; gap:15px; padding:18px 0; border-bottom:1px solid var(--line)}
.step:last-of-type{border-bottom:0}
.step .n{width:26px;height:26px;flex:none;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:600;font-size:13px;color:var(--blue);background:var(--blue-wash); border:1px solid #cfe0f0}
.step .b{flex:1; min-width:0}
.step h3{font-family:var(--sans); font-size:14.5px; font-weight:600; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.step h3 .opt{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
  border:1px solid var(--line-strong); padding:1px 6px; border-radius:4px; font-weight:500}
.step .desc{font-size:12.5px; color:var(--ink-3); margin:3px 0 12px}

.pick{width:100%; border:1.5px dashed var(--line-strong); background:#fbfcfe; border-radius:9px;
  padding:15px 16px; display:flex; align-items:center; gap:13px; color:var(--ink-2); text-align:left; transition:.15s}
.pick:hover{border-color:var(--blue-2); background:var(--blue-wash)}
.pick .ic{width:40px;height:40px;border-radius:9px;background:var(--surface);border:1px solid var(--line); display:grid;place-items:center;color:var(--blue);flex:none}
.pick b{display:block; font-size:14px; color:var(--ink)}
.pick .pk-sub{font-size:12px; color:var(--ink-3)}

/* dosya çipi — yeni_form.js .frow üretir */
.frow{display:flex; align-items:center; gap:11px; margin-top:9px; padding:9px 11px; border:1px solid var(--line); border-radius:8px; background:var(--surface)}
.frow .fdot{width:9px;height:9px;border-radius:2px;flex:none}
.frow .fn{font-family:var(--mono); font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; display:flex; gap:8px; align-items:baseline}
.frow .fn .fmeta{font-family:var(--mono); font-size:11px; color:var(--ink-3); font-weight:400; flex:none}
.frow .ni{flex:1}
.frow .ni input{width:100%; border:1px solid var(--line); border-radius:6px; padding:6px 9px; font-size:12px; font-family:inherit}
.frow .rm{width:28px;height:28px;flex:none;border-radius:6px;border:1px solid var(--line);background:#fff;color:var(--ink-3); display:grid; place-items:center}
.frow .rm:hover{color:var(--red);border-color:#e6bcb7}

.trio{display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.trio .fld label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:5px}
.trio .fld input{width:100%}
.step textarea{width:100%; resize:vertical; min-height:62px}

/* galeri (yüklü dosyalar) */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.thumb{border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fbfcfe}
.thumb .ph{height:78px; display:grid; place-items:center; color:#fff; position:relative}
.thumb .ph img{width:100%;height:100%;object-fit:cover}
.thumb .ph.gorsel{background:linear-gradient(135deg,#8fb0cf,#3f6f9c)}
.thumb .ph.excel{background:#2a7d5f} .thumb .ph.pdf{background:#b1584f} .thumb .ph.diger{background:#7d8894}
.thumb .cap{padding:7px 9px; font-family:var(--mono); font-size:11px}
.thumb .cap .nm{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.thumb .cap .sub{color:var(--ink-3); font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--sans)}
.thumb .acts{display:flex; gap:6px; padding:0 9px 9px}
.thumb .acts a{flex:1; text-align:center; font-size:11.5px; padding:6px; border:1px solid var(--line); border-radius:6px; color:var(--ink-2)}
.thumb .acts a:hover{border-color:var(--blue-2); color:var(--blue)}
.thumb .acts .del{width:30px; flex:none; padding:6px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--ink-3)}
.thumb .acts .del:hover{color:var(--red); border-color:#e6bcb7}

.submitbar{display:flex; align-items:center; gap:14px; margin-top:8px; padding-top:18px; border-top:1px solid var(--line)}
.submitbar .sum{font-size:12.5px; color:var(--ink-3)}
.submitbar .sum b{font-family:var(--mono); color:var(--ink-2)}
.submitbar .btn{margin-left:auto}

/* job form */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:2px 22px}
.checklist{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-top:2px}
.chk{display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:8px; cursor:pointer; font-size:14px; background:var(--surface); text-transform:none; letter-spacing:normal; font-family:var(--sans); color:var(--ink); font-weight:500}
.chk:hover{border-color:var(--blue-2)}
.chk input{width:17px;height:17px; accent-color:var(--blue); flex:none; margin:0}
.chk span{line-height:1.2}
.atanan-tags{display:flex; flex-wrap:wrap; gap:6px}
.atanan-tags .a{font-size:12.5px; font-weight:500; background:var(--blue-wash); color:var(--blue-ink); padding:3px 10px; border-radius:100px}

/* ===== tablet ===== */
@media(max-width:860px){
  .cols{grid-template-columns:1fr}
  .wrap{padding:22px 20px 60px}
  .topbar .in{padding:12px 18px}
  .formgrid{grid-template-columns:1fr}
}

/* ===== telefon ===== */
@media(max-width:640px){
  .inp,input,select,textarea,.form-control,.form-select{font-size:16px}
  .search .inp{padding-left:36px}

  /* top bar: marka + avatar/çıkış üstte, nav altta kaydırmalı şerit */
  .topbar .in{flex-wrap:wrap; padding:10px 14px; gap:10px}
  .mark{width:36px;height:36px}
  .brand b{font-size:15px}
  .brand span{display:none}
  .who .txt{display:none}
  .nav{order:5; flex-basis:100%; margin-left:0; overflow-x:auto; padding-top:9px; border-top:1px solid var(--line); -webkit-overflow-scrolling:touch}
  .nav a{padding:8px 11px}

  .wrap{padding:16px 14px 40px}
  .pagehead{flex-direction:column; align-items:stretch; gap:12px}
  .pagehead h1{font-size:26px}
  .pagehead .btn{width:100%; justify-content:center; padding:14px}
  .context{font-size:13px}

  .toolbar{gap:8px}
  .search{min-width:0; max-width:none; flex:1 1 100%}
  .toolbar select,.toolbar .form-select{flex:1 1 46%}
  .toolbar input[type=date]{flex:1 1 46%}
  .toolbar .btn{flex:1 1 100%; justify-content:center; padding:13px}

  /* tabloyu KARTLARA çevir */
  .tablewrap{overflow:visible}
  table{min-width:0}
  thead{display:none}
  tbody tr{display:block; padding:15px 16px 15px 17px; border-left:4px solid transparent; border-bottom:1px solid var(--line)}
  tbody tr.row-bekliyor{border-left-color:var(--amber)}
  tbody tr.row-yuklendi{border-left-color:var(--teal)}
  tbody tr.clickable:hover{background:transparent}
  tbody tr:active{background:var(--blue-wash)}
  tbody td{display:block; padding:0; border:0}
  td.cert-cell{font-size:13.5px; margin-bottom:2px}
  td.cust-cell{font-size:16.5px; margin:0 0 10px}
  td.cust-cell small{font-size:12.5px; margin-top:2px}
  td.meta{display:inline-flex; align-items:baseline; gap:6px; margin:0 16px 0 0; font-size:13.5px}
  td.meta::before{content:attr(data-label); font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
  td.atanan-td{display:block; max-width:none; margin-top:10px; font-size:13px}
  td.atanan-td::before{content:attr(data-label); font-family:var(--mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); display:block; margin-bottom:3px}
  td.status-td{margin-top:12px; padding-top:11px; border-top:1px solid var(--line)}
  td.status-td .stat{font-size:13px; padding:5px 12px 5px 10px}

  .masthead .body{padding:20px 17px 15px}
  .masthead .body::before{width:3px}
  .masthead .row1{flex-direction:column; gap:11px}
  .masthead .certno{font-size:22px}
  .masthead h1{font-size:20px}
  .metastrip .m{flex:1 1 50%; min-width:0; padding:11px 15px; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
  .metastrip .m:nth-child(2n){border-right:0}

  .cols{gap:16px; margin-top:16px}
  .card .hd{padding:15px 16px 0}
  .card .bd{padding:6px 16px 18px}
  .step{gap:12px; padding:16px 0}
  .step .n{width:28px;height:28px}
  .trio{grid-template-columns:1fr; gap:12px}
  .pick{padding:15px}
  .frow{flex-wrap:wrap; padding:11px}
  .frow .fn{max-width:none}
  .frow .ni{flex-basis:100%; order:5; margin-top:2px}
  .frow .ni input{padding:11px 12px; font-size:15px}
  .frow .rm{order:4; margin-left:auto}
  .gallery{grid-template-columns:repeat(2,1fr)}

  .submitbar{flex-direction:column; align-items:stretch; gap:12px; margin-top:14px}
  .submitbar .sum{order:2; text-align:center}
  .submitbar .btn{order:1; margin-left:0; width:100%; justify-content:center; padding:16px; font-size:16px}
}