:root{
    --ink:#12232A;
    --ink-soft:#4B5D63;
    --paper:#F4F6F4;
    --card:#FFFFFF;
    --line:#DFE4DF;
    --brass:#9C7A3C;
    --brass-deep:#7A5E2B;
    --teal:#245B57;
    --teal-deep:#173E3B;
    --success:#2F6B4F;
    --success-soft:#E5F0E9;
    --serif:'Source Serif 4', serif;
    --sans:'Inter', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    font-family:var(--sans);
    color:var(--ink);
    min-height:100vh;
  }

  .shell{
    max-width:960px;
    margin:0 auto;
    padding:36px 20px 80px;
    display:grid;
    grid-template-columns:260px 1fr;
    gap:32px;
  }

  /* ---------- SIDEBAR ---------- */
  .sidebar{
    position:sticky;
    top:36px;
    align-self:start;
  }
  .brand-row{
    display:flex; align-items:center; gap:0;
    margin-bottom:4px; margin-left:-8px;
  }
  .brand-mark-img{ width:44px; height:44px; object-fit:contain; flex:none; margin:0; }
  .brand-logo-img{ height:32px; width:auto; object-fit:contain; margin-left:-4px; }
  .brand-mark{
    width:30px;height:30px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--teal),var(--teal-deep));
    display:flex;align-items:center;justify-content:center;
    color:#EFE7D4; font-family:var(--serif); font-weight:700; font-size:14px;
  }
  .brand-name{
    font-family:var(--serif);
    font-weight:600;
    font-size:16.5px;
    letter-spacing:0.01em;
  }
  .brand-sub{ font-size:11px; color:var(--ink-soft); margin-top:1px; }
  .brand-sub-line{ font-size:11px; color:var(--ink-soft); margin:0 0 28px 32px; }

  .steps{
    position:relative;
    padding-left:2px;
  }
  .step-item{
    display:flex; gap:14px;
    padding-bottom:26px;
    position:relative;
  }
  .step-item::before{
    content:"";
    position:absolute;
    left:11px; top:26px; bottom:0;
    width:1.5px;
    background:var(--line);
  }
  .step-item:last-child::before{ display:none; }
  .step-item.done::before{ background:var(--success); }

  .dot{
    width:23px;height:23px;flex:none;
    border-radius:50%;
    border:1.5px solid var(--line);
    background:var(--card);
    display:flex;align-items:center;justify-content:center;
    font-size:10.5px; font-weight:700; color:var(--ink-soft);
    transition:all .3s ease;
    z-index:1;
  }
  .step-item.done .dot{
    background:var(--success);
    border-color:var(--success);
    color:#fff;
  }
  .step-item.active .dot{
    border-color:var(--brass);
    color:var(--brass-deep);
  }
  .step-label{ padding-top:2px; }
  .step-label .t{ font-size:13px; font-weight:600; color:var(--ink); }
  .step-label .d{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }

  .trust-list{
    margin-top:22px;
    display:flex; flex-direction:column; gap:9px;
  }
  .trust-item{
    display:flex; align-items:center; gap:8px;
    font-size:11px; color:var(--ink-soft);
  }
  .trust-item .ic{
    width:14px;height:14px; flex:none;
    color:var(--teal);
  }

  /* ---------- MAIN ---------- */
  .main{ display:flex; flex-direction:column; }
  #app{ display:flex; flex-direction:column; gap:22px; }

  .doc-header{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:20px 24px;
    display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:10px;
  }
  .doc-header .title{ font-family:var(--serif); font-size:19px; font-weight:600; }
  .doc-header .ref{ font-size:12px; color:var(--ink-soft); margin-top:3px; }
  .doc-header .amount{ text-align:right; }
  .doc-header .amount .lbl{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.08em; }
  .doc-header .amount .val{ font-family:var(--serif); font-size:22px; font-weight:700; color:var(--teal-deep); }

  .card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px 26px;
  }
  .card h2{
    font-family:var(--serif);
    font-size:16px;
    font-weight:600;
    margin:0 0 4px;
    display:flex; align-items:center; gap:9px;
  }
  .card h2 .n{
    width:22px;height:22px; border-radius:50%;
    background:var(--teal-deep); color:#fff;
    font-size:11px; font-family:var(--sans); font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .card .hint{ font-size:12px; color:var(--ink-soft); margin:0 0 16px 31px; }

  .section-divider{
    height:1px;
    background:var(--line);
    margin:22px 0 6px;
  }

  label{
    display:block; font-size:12px; font-weight:600;
    color:var(--ink-soft); margin:12px 0 5px;
  }
  input{
    width:100%;
    border:1px solid var(--line);
    border-radius:7px;
    background:var(--paper);
    padding:10px 12px;
    font-family:var(--sans);
    font-size:14px;
    color:var(--ink);
    outline:none;
    transition:border-color .15s ease, background .15s ease;
  }
  input:focus{ border-color:var(--teal); background:#fff; }
  input::placeholder{ color:#A6ACA5; }
  .row2{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }

  /* order lines */
  .oline{
    display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
    font-size:13.5px; padding:9px 0;
    border-bottom:1px solid var(--line);
  }
  .oline:last-of-type{ border-bottom:none; }
  .oline > div:first-child{ min-width:0; flex:1 1 auto; }
  .oline .name{ color:var(--ink); }
  .oline .qty{ font-size:11.5px; color:var(--ink-soft); margin-left:6px; }
  .oline .amt{
    font-variant-numeric:tabular-nums; color:var(--ink);
    white-space:nowrap; flex:0 0 auto;
  }

  .totals{ margin-top:6px; }
  .trow{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px; color:var(--ink-soft); padding:4px 0; }
  .trow span:last-child{ white-space:nowrap; }
  .trow.grand{
    margin-top:8px; padding-top:12px;
    border-top:1.5px solid var(--ink);
    font-family:var(--serif); font-size:17px; font-weight:700; color:var(--teal-deep);
  }

  /* card fields */
  .card-visual{
    background:linear-gradient(135deg, var(--teal-deep), var(--ink));
    border-radius:10px;
    padding:16px 18px;
    color:#EAF3EF;
    margin-bottom:22px;
  }
  .card-visual .top{ display:flex; justify-content:space-between; font-size:10px; letter-spacing:0.08em; color:#9FC0BA;}
  .card-visual .num{ font-family:var(--serif); font-size:17px; letter-spacing:0.06em; margin-top:14px; }
  .card-visual .bottom{ display:flex; justify-content:space-between; margin-top:14px; font-size:10px; color:#B9CBC6; }

  .secure-note{
    display:flex; gap:8px; align-items:flex-start;
    font-size:11.5px; color:var(--success);
    background:var(--success-soft);
    border-radius:7px; padding:9px 11px; margin-top:12px; line-height:1.45;
  }

  /* contract */
  .commercial-summary{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:14px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 16px;
  }
  .cs-row{ display:flex; flex-direction:column; font-size:11px; color:var(--ink-soft); }
  .cs-row b{ font-size:13px; color:var(--teal-deep); margin-top:2px; }

  .contract-box{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:8px;
    padding:16px 18px;
    font-size:12.5px; line-height:1.65; color:var(--ink-soft);
    max-height:210px; overflow-y:auto;
    font-family:var(--sans);
    transition:max-height .35s ease;
  }
  .contract-box.expanded{ max-height:1400px; }
  .contract-box p{ margin:0 0 12px; }
  .contract-box p:last-child{ margin-bottom:0; }
  .contract-box b{ color:var(--ink); }

  .ek-table{ width:100%; border-collapse:collapse; margin:6px 0 12px; font-size:12px; }
  .ek-table th{ text-align:left; border-bottom:1.5px solid var(--ink); padding:5px 6px; color:var(--ink); font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; }
  .ek-table td{ padding:5px 6px; border-bottom:1px solid var(--line); color:var(--ink-soft); }

  .expand-btn{
    display:block; width:100%; text-align:center;
    background:none; border:none; cursor:pointer;
    font-family:var(--sans); font-size:12px; font-weight:600;
    color:var(--teal); padding:8px 0 2px;
    margin-top:16px;
  }
  .expand-btn:hover{ color:var(--teal-deep); }
  .check-row{
    display:flex; align-items:center; gap:14px;
    margin-top:18px; font-size:13.5px; color:var(--ink); cursor:pointer;
    background:var(--paper);
    border:1.5px solid var(--line);
    border-radius:10px;
    padding:14px 16px;
    transition:border-color .15s ease, background .15s ease;
  }
  .check-row:hover{ border-color:var(--brass); }
  .check-row input{
    width:24px; height:24px; flex:none;
    accent-color:var(--success);
    cursor:pointer;
  }
  .check-row:has(input:checked){
    border-color:var(--success);
    background:var(--success-soft);
  }
  .check-row span{ line-height:1.5; font-weight:500; }

  .cta{
    width:100%; margin-top:6px;
    padding:15px; border:none; border-radius:9px;
    background:var(--success); color:#fff;
    font-family:var(--sans); font-weight:700; font-size:14.5px;
    cursor:not-allowed; opacity:0.4;
    transition:opacity .2s ease, transform .1s ease;
  }
  .cta.active{ cursor:pointer; opacity:1; }
  .cta.active:active{ transform:scale(0.985); }

  .footnote{ text-align:center; font-size:11px; color:var(--ink-soft); margin-top:4px; }

  @media (max-width:760px){
    .shell{ grid-template-columns:1fr; }
    .sidebar{ position:static; }
    .steps{ display:flex; overflow-x:auto; gap:0; }
    .step-item{ flex-direction:column; align-items:center; padding:0 18px 12px 0; min-width:74px; }
    .step-item::before{ left:34px; top:11px; right:-34px; bottom:auto; width:auto; height:1.5px; }
    .step-label{ text-align:center; margin-top:6px; }
    .step-label .d{ display:none; }
    .seal-wrap{ display:none; }
    .row2{ grid-template-columns:1fr; }
    .commercial-summary{ grid-template-columns:1fr; }
    .cs-row b{ word-break:break-word; }
  }

/* --- gerçek/dinamik akış için ek stiller (mockup'ta yoktu) --- */
input:disabled{ opacity:.6; cursor:not-allowed; }
input.field-error{
  border-color:#A23B2E !important;
  background:#FBEAE7 !important;
}
.secondary-btn{
  width:100%; margin-top:16px; padding:12px;
  background:var(--teal); color:#fff; border:none; border-radius:8px;
  font-family:var(--sans); font-weight:700; font-size:13.5px; cursor:pointer;
  transition:opacity .2s ease;
}
.secondary-btn:disabled{ opacity:.6; cursor:not-allowed; }
.status-note{ font-size:12px; margin-top:8px; color:var(--ink-soft); text-align:center; }
.status-note.is-error{ color:#A23B2E; font-weight:600; }
.error-box{ color:#A23B2E; background:#FBEAE7; border:1px solid #A23B2E; }
#sign-widget-container{ margin-top:14px; }
#sign-iframe{
  width:100%; height:420px; border:1px solid var(--line); border-radius:8px;
}
.check-row input:disabled{ opacity:.4; cursor:not-allowed; }
.loading-box{ text-align:center; color:var(--ink-soft); }