/* Yeni bileşenler + tam responsive (telefon / tablet / masaüstü). Sayfanın en sonunda yüklenir. */
html{-webkit-text-size-adjust:100%}img,video{max-width:100%}main{overflow-x:clip}.grid>*,.side-grid>*,.row>*{min-width:0}.tabs{max-width:100%}
/* üretim aşaması + hedef çubukları */
.prod{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line2)}.pbar{display:flex;gap:3px;margin:6px 0}.pbar i{flex:1;height:6px;border-radius:99px;background:#e5e7eb}.pbar i.on{background:var(--cyan)}.pbar i.cur{background:var(--ink)}
.tg{margin:12px 0}.tbar{position:relative;height:10px;background:#eef0f3;border-radius:99px;margin-top:6px}.tbar i{display:block;height:100%;border-radius:99px;background:var(--cyan);transition:width .4s}
.tbar i.ok{background:var(--green)}.tbar i.mid{background:#f59e0b}.tbar i.low{background:var(--red)}.tbar u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.5}
.tp{font-weight:800}.tp.ok{color:var(--green)}.tp.mid{color:var(--amber)}.tp.low{color:var(--red)}
.card:has(table.perm){overflow-x:auto}

/* ---------- tablet ---------- */
@media(max-width:1100px){.side{width:220px}#view{padding:18px 20px 40px}.g5{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(2,1fr)}.top{padding:12px 20px}.subbar{padding:14px 20px 0}}

/* ---------- küçük tablet + telefon ---------- */
@media(max-width:900px){
  .side{width:280px;max-width:86vw;left:-310px;top:0;bottom:0;height:100vh;height:100dvh;z-index:70;position:fixed}
  .side.open{left:0}.side.open+main::after{content:'';position:fixed;inset:0;background:#0f111385;z-index:65}
  body:has(.side.open){overflow:hidden}
  .top{flex-wrap:wrap;gap:8px;padding:10px 12px}.top h1{display:block!important;font-size:15px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .top .spacer{display:none}.search{order:10;flex:1 1 100%;width:100%;display:block!important}.company-sel{max-width:150px;text-overflow:ellipsis}
  #view{padding:14px 12px calc(70px + env(safe-area-inset-bottom))}.subbar{padding:10px 12px 0}.subbar .btn{flex:1 1 auto;justify-content:center}
  .card{padding:14px}h2{font-size:22px}.g2{grid-template-columns:1fr}.g3,.g4,.g5{grid-template-columns:1fr 1fr}.hero{padding:16px}.hero .row{width:100%}.hero .row .btn{flex:1;justify-content:center}
  input,select,textarea{font-size:16px}.btn{min-height:40px}.btn.sm{min-height:34px}.icon-btn{min-width:38px;min-height:38px}
  .tabs button{padding:10px 12px}.steps .step{min-width:96px}
  .modal{padding:0}.modal-card,.modal-card.wide{width:100%;max-height:100vh;max-height:100dvh;min-height:100dvh;border-radius:0;padding:14px 14px calc(80px + env(safe-area-inset-bottom))}
  .modal-head{position:sticky;top:-14px;z-index:3;background:#fff;margin:-14px -14px 10px;padding:12px 14px;border-bottom:1px solid var(--line)}
  .toast{bottom:calc(18px + env(safe-area-inset-bottom));max-width:92vw;text-align:center}
  .tl{margin-bottom:16px}.timeline{padding-left:16px}
  .fp-head{padding:12px 14px}.fp-body{padding:4px 14px 14px}
}

/* ---------- telefon ---------- */
@media(max-width:700px){
  .gt{display:none}.guide-btn{padding:8px 11px}.xdupe label{flex-wrap:wrap}.xdupe label>span{flex:1 1 100%;min-width:0}
  .kanban{scroll-snap-type:x proximity;margin:0 -12px;padding:0 12px 12px}.col{min-width:84vw;width:84vw;scroll-snap-align:center}
  /* tablolar kart görünümüne dönüşür (mobile.js her tabloya başlık etiketi ekler) */
  table.stack,table.stack tbody{display:block;width:100%}table.stack tr:first-child:has(th){display:none}
  table.stack tr{display:block;border:1px solid var(--line);border-radius:12px;margin:8px 0;padding:6px 12px;background:#fff;box-shadow:var(--shadow)}
  table.stack td{display:flex;justify-content:space-between;gap:12px;border:0;padding:5px 0;text-align:right;align-items:flex-start}
  table.stack td::before{content:attr(data-l);color:var(--muted);font-size:12px;font-weight:600;text-align:left;flex:none;max-width:42%}
  table.stack td[data-l=""]::before{display:none}table.stack td[data-l=""]{justify-content:flex-start;text-align:left}
  table.stack td .sv{display:block;min-width:0;text-align:right;overflow-wrap:anywhere}table.stack td[data-l=""] .sv{text-align:left}table.stack td[data-e]{display:none}
  table.stack td:first-child{font-size:14px}table.stack td>*{max-width:100%}table.stack td input,table.stack td select{max-width:60%}
  .card.tbl:has(table.stack){background:none;border:0;box-shadow:none;padding:0;overflow:visible}
  .card:has(table.stack):not(.tbl){padding:10px}
  table.stack tr.tot td{font-weight:700}
  .grid:has(>.card.kpi){grid-template-columns:1fr 1fr;gap:10px}.card.kpi{padding:12px}.card.kpi small{display:block;overflow:hidden;text-overflow:ellipsis}
  .kpi b{font-size:19px;word-break:break-word}.g5.qsum,.g5{grid-template-columns:1fr 1fr}
  .xbars .r{grid-template-columns:96px 1fr 72px;font-size:12px}.xcols{height:150px}
  .dl{grid-template-columns:110px 1fr}
  /* teklif belgesi */
  .paper.q{padding:18px 12px}.q-head{flex-direction:column;gap:10px}.q-title{text-align:left}.q-meta{grid-template-columns:auto 1fr}.q-parties{grid-template-columns:1fr}.q-bottom{flex-direction:column}.q-tot{width:100%}.q-logo{height:56px}
  .paper.q table.q-items{display:block;overflow-x:auto;white-space:normal}.paper.q table.q-items tr{display:table-row;border:0;box-shadow:none;margin:0;padding:0}.paper.q table.q-items td{display:table-cell}
  .login .lg-card{padding:24px}.lg-top{padding:16px}.lg-card-wrap{padding:0 12px 24px}
  #tourTip{width:calc(100vw - 20px)}#tourPick .pc{padding:16px}#tourPick .tl{grid-template-columns:1fr}
}
@media(max-width:420px){.g3,.g4{grid-template-columns:1fr}.btn{padding:8px 11px}.top .company-sel{max-width:118px}}
@media print{.paper.q{padding:0!important}.paper.q table.q-items{display:table!important}}
.fx{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--muted);background:var(--soft);border-radius:10px;padding:8px 12px;cursor:pointer;white-space:nowrap}.fx b{color:var(--text);margin-right:3px}.fx:hover{background:#eceef2}
.nextstep{border-left:4px solid var(--cyan);background:linear-gradient(135deg,#fff,#f3fbfd)}.nextstep li{margin:2px 0}.tg2{font-weight:600;color:#0a7f8c}
@media(max-width:1250px){.fx{display:none}}
.tpc{text-align:center;font-weight:700;white-space:nowrap}.tpc.ok{color:var(--green);background:#ecfdf5}.tpc.mid{color:var(--amber);background:#fff8eb}.tpc.low{color:var(--red);background:#fef2f2}