:root{
  --navy:#131f2b;
  --blue:#006fc0;
  --red:#e2001a;
  --ink:#1a1a1a;
  --line:#d7dbe0;
  --bg:#f2f4f7;
  --card:#ffffff;
  --accent:#0d6efd;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
[hidden]{display:none !important;}
body{
  font-family:"Segoe UI",Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
}

.app{
  display:flex;
  min-height:100vh;
  align-items:flex-start;
}

/* ================= FORM PANEL ================= */
.panel{
  width:420px;
  min-width:420px;
  max-height:100vh;
  overflow-y:auto;
  background:var(--card);
  border-right:1px solid var(--line);
  padding:18px 18px 40px;
}
.panel-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  gap:8px;
  flex-wrap:wrap;
}
.panel-header h1{
  font-size:18px;
  margin:0;
}
.panel-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.reset-confirm{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#c0242c;
  font-weight:600;
}

.card{
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin-bottom:14px;
  background:#fbfcfe;
}
.card h2{
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#556;
  margin:0 0 10px;
}
.hint{
  font-weight:400;
  text-transform:none;
  letter-spacing:0;
  color:#8a93a3;
  font-size:11px;
}
.hint.indent{margin:2px 0 10px 26px;}

label{
  display:block;
  font-size:12px;
  color:#445;
  margin-bottom:10px;
  font-weight:600;
}
label input[type="text"],
label input[type="date"],
label input[type="number"],
label textarea{
  display:block;
  width:100%;
  margin-top:4px;
  padding:7px 9px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13px;
  font-family:inherit;
  font-weight:400;
  color:var(--ink);
}
label textarea{resize:vertical;}

.field-row{
  display:flex;
  gap:10px;
}
.field-row label{flex:1;}

/* buttons */
.btn{
  border:none;
  border-radius:7px;
  padding:9px 12px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:opacity .15s;
}
.btn:hover{opacity:.85;}
.btn-block{width:100%;margin-top:4px;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-secondary{background:#eef1f6;color:#334;}
.btn-ghost{background:transparent;color:#556;border:1px solid var(--line);}
.btn-pdf{
  background:var(--navy);
  color:#fff;
  font-size:14px;
  padding:12px;
}
.btn-danger{background:#fdeaea;color:#c0242c;}
.btn-sm{padding:5px 8px;font-size:12px;border-radius:6px;}
.btn-save{
  background:#1a7f4b;
  color:#fff;
  font-size:14px;
  padding:12px;
  margin-top:6px;
}
.btn-list-link{
  text-decoration:none;
  white-space:nowrap;
  font-size:12px;
  padding:8px 10px;
}

/* item editor rows */
.item-edit-row{
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  margin-bottom:8px;
  background:#fff;
}
.item-edit-row .item-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
}
.item-edit-row .item-num{
  font-size:11px;
  font-weight:700;
  color:#8a93a3;
}
.item-edit-row input[type="text"]{
  width:100%;
  margin-bottom:6px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:13px;
}
.item-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
}
.item-grid label{
  font-size:10px;
  color:#8a93a3;
  margin-bottom:0;
  font-weight:600;
}
.item-grid input, .item-grid select{
  width:100%;
  margin-top:2px;
  padding:6px 6px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
}
.item-total{
  text-align:right;
  font-size:12px;
  font-weight:700;
  margin-top:6px;
  color:var(--navy);
}

/* extras */
.extra-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}
.chk{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  margin:0;
  cursor:pointer;
}
.chk input{width:16px;height:16px;}
.extra-amt{
  width:130px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  text-align:right;
}
.extra-kdv{display:flex;align-items:center;gap:4px;}
.extra-pct{
  width:60px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  text-align:right;
}
.custom-extra-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  margin-bottom:6px;
  padding:8px;
  background:#fff;
  border:1px dashed var(--line);
  border-radius:8px;
}
.custom-extra-row input[type="text"]{
  flex:1 1 100%;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
}
.custom-extra-row input[type="number"]{
  flex:1 1 70px;
  min-width:0;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
  text-align:right;
}
.custom-extra-row select{
  flex:1 1 90px;
  min-width:0;
  padding:6px 4px;
  border:1px solid var(--line);
  border-radius:6px;
  font-size:12px;
}
.custom-extra-row .btn{
  flex:0 0 auto;
}

/* toggle buttons */
.toggle-group{margin-bottom:14px;}
.toggle-label{
  font-size:12px;
  font-weight:700;
  color:#334;
  margin-bottom:6px;
}
.toggle-buttons{
  display:flex;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.toggle-btn{
  flex:1;
  border:none;
  background:#fff;
  padding:8px 6px;
  font-size:12px;
  font-weight:600;
  color:#556;
  cursor:pointer;
  border-right:1px solid var(--line);
}
.toggle-btn:last-child{border-right:none;}
.toggle-btn.active{
  background:var(--accent);
  color:#fff;
}

/* ================= PREVIEW ================= */
.preview-wrap{
  flex:1;
  display:flex;
  justify-content:center;
  padding:30px 20px;
  overflow-x:auto;
}
.preview{
  width:794px;
  min-width:794px;
  background:#fff;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
  padding:14px;
}

.doc-table{
  width:100%;
  border-collapse:collapse;
  border:1.25px solid #000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:9px;
  color:#000;
  table-layout:fixed;
}
.doc-table td{
  vertical-align:middle;
  padding:2px 4px;
  word-wrap:break-word;
}

.logo-cell{
  background:#fff;
  text-align:center;
  padding:5px !important;
  border:1px solid #000;
}
.logo-box{
  background:var(--navy);
  padding:5px 10px;
  display:inline-block;
}
.logo-box img{
  max-width:100%;
  max-height:82px;
  display:block;
  margin:0 auto;
}

.company-cell{
  text-align:center;
  font-weight:700;
  font-size:8px;
  line-height:1.5;
  border:1px solid #000;
}

.tarihno-cell{
  vertical-align:top;
  padding:0 !important;
}
.boxed{
  border:1.25px solid #000;
  text-align:center;
  font-weight:700;
  font-size:7px;
  padding:3px 2px;
  margin:2px;
  line-height:1.5;
  white-space:nowrap;
}
.boxed span{font-weight:700;}

.row-customer td{padding-top:6px;padding-bottom:6px;}
.label-cell{
  font-weight:700;
  font-size:9px;
  vertical-align:middle;
  border:1px solid #000;
}
.customer-cell{
  font-weight:700;
  font-size:9px;
  text-align:center;
  border:1.25px solid #000 !important;
}
.contact-cell{
  font-size:8px;
  color:#111;
  border:1px solid #000;
}

.title-cell{
  text-align:center;
  font-weight:700;
  font-size:11px;
  padding:8px 0 !important;
  border:1px solid #000;
}

.col-headers td{
  text-align:center;
  font-weight:700;
  color:var(--blue);
  font-size:8px;
  border:1px solid #000;
  padding:4px 2px;
  line-height:1.4;
}

#itemsPreview td{
  border:1px solid #000;
  font-size:8.5px;
  padding:3px 4px;
}
.it-no{text-align:center;}
.it-name{text-align:left;}
.it-olcu{text-align:center;}
.it-birim{text-align:center;}
.it-fiyat{text-align:right;}
.it-toplam{text-align:right;font-weight:600;}
.empty-row td{border:1px solid #000;height:14px;}

#totalsPreview td{
  font-size:8.5px;
}
.tot-label{
  text-align:right;
  padding-right:8px !important;
  font-weight:600;
  border:1px solid #000;
  white-space:nowrap;
}
.tot-value{
  text-align:right;
  font-weight:700;
  border:1px solid #000;
  white-space:nowrap;
}
.tot-final .tot-label, .tot-final .tot-value{
  font-size:8.5px;
  padding-top:4px !important;
  padding-bottom:4px !important;
}
.tot-iskonto .tot-label, .tot-iskonto .tot-value{color:var(--red);}

.spacer-row td{height:14px;border:none;}
.spacer-row-sm td{height:8px;border:none;}

.madde-row td{
  font-size:8.5px;
  font-weight:700;
  padding:1px 2px;
  white-space:pre-line;
}

.approval-note{
  text-align:center;
  font-size:8.5px;
  color:#1f487c;
  padding:10px 0 !important;
}

.sig-row td{
  font-size:8.5px;
  padding:4px 4px 2px;
  border:1px solid #000;
}
.sig-row .center{text-align:center;}
.sig-box-row td{
  border:1px solid #000;
  height:60px;
}

.footer-note{
  text-align:center;
  font-weight:700;
  font-size:9px;
  color:#1f487c;
  padding:10px 0 4px !important;
}

/* ================= PRINT ================= */
@media print{
  @page{
    size:A4;
    margin:8mm;
  }
  body{background:#fff;}
  .no-print{display:none !important;}
  .app{display:block;}
  .preview-wrap{padding:0;overflow:visible;}
  .preview{
    width:100%;
    min-width:0;
    box-shadow:none;
    padding:0;
  }
  .doc-table{font-size:9px;}
}

/* ================= MOBILE TABS ================= */
.mobile-tabs{display:none;}

/* ================= RESPONSIVE ================= */
@media (max-width:900px){
  .mobile-tabs{
    display:flex;
    position:sticky;
    top:0;
    left:0;
    right:0;
    z-index:30;
    background:#fff;
    border-bottom:1px solid var(--line);
  }
  .mtab-btn{
    flex:1;
    border:none;
    background:#fff;
    padding:12px 4px;
    font-size:12.5px;
    font-weight:700;
    color:#8a93a3;
    border-bottom:3px solid transparent;
    text-align:center;
    text-decoration:none;
    white-space:nowrap;
  }
  .mtab-btn.active{
    color:var(--accent);
    border-bottom-color:var(--accent);
  }
  .mtab-link{color:#8a93a3;}

  .app{flex-direction:column;}

  .panel{
    width:100%;
    min-width:0;
    max-height:none;
    border-right:none;
    border-bottom:none;
    display:block;
    padding:16px 14px 40px;
  }
  .app.show-preview .panel{display:none;}

  .preview-wrap{
    width:100%;
    min-width:0;
    display:none;
    justify-content:flex-start;
    padding:14px 10px 40px;
  }
  .app.show-preview .preview-wrap{display:flex;}

  .preview-scale-wrap{
    width:100%;
  }
  .preview{width:794px;min-width:0;}

  .panel-header{
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .panel-header h1{font-size:17px;}
  .btn-list-link{display:none;}

  /* touch-friendly form controls: 16px prevents iOS auto-zoom on focus */
  label input[type="text"],
  label input[type="date"],
  label input[type="number"],
  label textarea,
  .item-grid input,
  .item-grid select,
  .extra-amt,
  .extra-pct,
  .custom-extra-row input,
  .custom-extra-row select{
    font-size:16px;
  }
  .btn{min-height:44px;}
  .btn-sm{min-height:34px;}
  .chk input{width:20px;height:20px;flex-shrink:0;}
  .panel-actions{gap:8px;}
  .reset-confirm{width:100%;flex-wrap:wrap;}
}

/* ================= LIST PAGE (teklifler.html) ================= */
.list-page{
  max-width:820px;
  margin:0 auto;
  padding:24px 16px 70px;
  font-family:"Segoe UI",Arial,sans-serif;
}
.list-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.list-header h1{font-size:20px;margin:0;color:var(--ink);}
.list-header .btn{text-decoration:none;}

.list-empty{
  text-align:center;
  padding:70px 20px;
  color:#8a93a3;
}
.list-empty .btn{
  text-decoration:none;
  display:inline-block;
  margin-top:14px;
}

.list-items{display:flex;flex-direction:column;gap:12px;}
.list-card{
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  overflow:hidden;
}
.list-card-main{padding:14px 16px;cursor:pointer;}
.list-card-main:hover{background:#fbfcfe;}
.list-card-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:10px;
  margin-bottom:4px;
}
.list-card-customer{font-weight:700;font-size:15px;color:var(--ink);}
.list-card-total{font-weight:700;font-size:15px;color:var(--navy);white-space:nowrap;}
.list-card-meta{
  font-size:12px;
  color:#8a93a3;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:4px;
}
.list-card-items{font-size:12px;color:#556;}
.list-card-actions{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-top:1px solid var(--line);
  background:#fbfcfe;
  flex-wrap:wrap;
}
.list-card-actions .btn{text-decoration:none;}
.del-confirm{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#c0242c;
  font-weight:600;
}

@media (max-width:600px){
  .list-page{padding:16px 12px 60px;}
  .list-card-customer{font-size:14px;}
  .list-card-total{font-size:14px;}
  .list-card-actions .btn, .list-card-actions .del-confirm .btn{min-height:38px;}
}