/* ═══════════════════════════════════════════════
   KUYUMCU SATIŞ SİSTEMİ — STYLE.CSS
   ═══════════════════════════════════════════════ */

:root{
  /* Kurumsal Palet */
  --bg:#f2ede6;
  --surface:#ffffff;
  --surface2:#faf7f3;
  --surface3:#f5f0e8;

  --border:#e4ddd3;
  --border2:#cfc7ba;
  --border3:#b8ae9f;

  --text:#18160f;
  --text2:#5c5649;
  --text3:#9c9284;

  /* Altın — ana kimlik rengi */
  --gold:#a07828;
  --gold-mid:#c49a2e;
  --gold-light:#f8f3e8;
  --gold-bright:#e8b84b;
  --gold-dark:#7a5c1e;

  /* Durum renkleri — daha çarpıcı */
  --blue:#1b3f7a;
  --blue-light:#edf2fc;
  --red:#7c1d1d;
  --red-light:#fdf0f0;
  --green:#14532d;
  --green-light:#edfaf3;
  --orange:#7c3d0a;
  --orange-light:#fef6ee;
  --purple:#4c1d95;
  --purple-light:#f5f3ff;

  --radius:12px;
  --radius-sm:7px;
  --radius-lg:16px;

  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 1px 4px rgba(0,0,0,.06),0 4px 20px rgba(0,0,0,.05);
  --shadow-md:0 2px 12px rgba(0,0,0,.08),0 8px 40px rgba(0,0,0,.07);
  --shadow-gold:0 4px 24px rgba(160,120,40,.18);

  /* Tipografi */
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-display:'Cormorant Garamond',serif;
  --font-mono:'JetBrains Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -webkit-print-color-adjust:exact;
  print-color-adjust:exact;
}

/* ══════════ HEADER ══════════ */
header{
  background:linear-gradient(135deg,#110f08 0%,#1c1a10 60%,#211e12 100%);
  padding:0 28px;
  display:flex;
  align-items:center;
  gap:18px;
  height:62px;
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid rgba(196,154,46,.25);
  box-shadow:0 2px 20px rgba(0,0,0,.35);
}
header::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent 0%,var(--gold-bright) 30%,#e8b84b 50%,var(--gold-bright) 70%,transparent 100%);
  opacity:.7;
}

.logo{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  color:#fff;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  gap:10px;
  text-shadow:0 1px 8px rgba(0,0,0,.3);
}
.logo-gem{
  width:34px;height:34px;
  background:linear-gradient(135deg,#c49a2e 0%,#e8b84b 50%,#a07828 100%);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;
  box-shadow:0 2px 12px rgba(196,154,46,.5),inset 0 1px 0 rgba(255,255,255,.2);
}
.logo-subtitle{
  font-family:var(--font-body);
  font-size:9px;
  font-weight:500;
  color:rgba(255,255,255,.35);
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-top:1px;
  display:block;
}

.header-right{margin-left:auto;display:flex;align-items:center;gap:14px}

.gf-wrap{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(196,154,46,.25);
  border-radius:8px;
  padding:6px 13px;
  transition:border .2s;
}
.gf-wrap:focus-within{border-color:rgba(196,154,46,.6);}
.gf-wrap label{font-size:10px;color:rgba(255,255,255,.45);font-weight:600;white-space:nowrap;letter-spacing:.08em;text-transform:uppercase}
.gf-wrap input{
  background:transparent;border:none;outline:none;
  color:#e8b84b;
  font-family:var(--font-mono);
  font-size:15px;font-weight:500;width:96px;
}

.tarih-chip{
  font-size:11px;
  color:rgba(255,255,255,.35);
  font-family:var(--font-mono);
  letter-spacing:.04em;
}

/* ══════════ LAYOUT ══════════ */
.app-body{max-width:1120px;margin:0 auto;padding:28px 22px}

/* ══════════ TABS ══════════ */
.tabs{
  display:flex;gap:3px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:4px;
  margin-bottom:24px;
  width:fit-content;
  box-shadow:var(--shadow-xs);
}
.tab{
  padding:8px 20px;
  border-radius:9px;
  border:none;
  background:transparent;
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  color:var(--text3);
  cursor:pointer;
  transition:all .18s;
  display:flex;align-items:center;gap:7px;
  letter-spacing:.01em;
}
.tab:hover{color:var(--text);background:var(--surface2)}
.tab.active{
  background:linear-gradient(135deg,#18150a,#2a2412);
  color:#e8b84b;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
}
.tab-cnt{
  background:var(--gold);
  color:#fff;
  border-radius:10px;
  padding:1px 7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ══════════ CARDS ══════════ */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  margin-bottom:16px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:3px;
  background:linear-gradient(90deg,transparent,rgba(196,154,46,.4),transparent);
  border-radius:var(--radius) var(--radius) 0 0;
}

.sec-hd{
  font-family:var(--font-body);
  font-size:10px;
  font-weight:700;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:16px;
  display:flex;align-items:center;gap:8px;
}
.sec-hd::before{
  content:'';
  display:inline-block;
  width:3px;height:12px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-radius:2px;
  flex-shrink:0;
}

/* ══════════ GRIDS ══════════ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:14px}
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;margin-bottom:14px}

/* ══════════ FORM ══════════ */
.fg{display:flex;flex-direction:column;gap:5px}
.fg label{
  font-size:10.5px;
  font-weight:700;
  color:var(--text2);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.fg input,.fg select{
  padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:13px;
  color:var(--text);
  background:var(--surface2);
  transition:all .18s;
  outline:none;
}
.fg input:focus,.fg select:focus{
  border-color:var(--gold-mid);
  background:#fff;
  box-shadow:0 0 0 3px rgba(196,154,46,.12);
}
.fg input::placeholder{color:var(--text3)}
.fg input[type="file"]{padding:8px;cursor:pointer;font-size:12px;background:#fff}

/* ══════════ STATUS BUTTONS ══════════ */
.status-wrap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.sopt{
  padding:6px 14px;
  border:1.5px solid var(--border2);
  border-radius:20px;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer;
  background:transparent;
  color:var(--text2);
  transition:all .15s;
  font-family:var(--font-body);
  letter-spacing:.01em;
}
.sopt:hover{border-color:var(--text2);color:var(--text);background:var(--surface2)}
.sopt.active{
  background:linear-gradient(135deg,#18150a,#2a2412);
  color:#e8b84b;
  border-color:#2a2412;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

.sip-extra{display:none;border-top:1px dashed var(--border2);margin-top:4px;padding-top:16px;margin-bottom:2px}
.sip-extra-lbl{font-size:12px;font-weight:600;color:var(--gold);margin-bottom:12px}
.foto-preview-wrap{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;margin-bottom:4px}
.foto-thumb{width:70px;height:70px;object-fit:cover;border-radius:var(--radius-sm);border:1.5px solid var(--border);cursor:pointer;transition:transform .15s,box-shadow .15s}
.foto-thumb:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}

/* ══════════ KALAN BOX ══════════ */
.kalan-box{
  background:linear-gradient(135deg,#fdfaf5,#f8f3e8);
  border:1.5px solid #e4d9c0;
  border-radius:var(--radius-sm);
  padding:14px 18px;
  margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center;
}
.kalan-lbl{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em}
.kalan-sub{font-size:10px;color:var(--text3);margin-top:2px}
.kalan-bos{font-size:14px;font-weight:500;color:var(--text3);font-style:italic}
.kalan-tl{font-size:18px;font-weight:700;color:var(--red);font-family:var(--font-mono)}
.kalan-gr{font-size:11px;color:var(--text2);margin-top:3px;font-family:var(--font-mono);text-align:right}

/* ══════════ BUTTONS ══════════ */
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.btn{
  padding:9px 18px;
  border:1.5px solid var(--border2);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
  background:#fff;
  color:var(--text);
  transition:all .18s;
  letter-spacing:.01em;
}
.btn:hover{background:var(--bg);border-color:var(--text2);transform:translateY(-1px);box-shadow:var(--shadow-xs)}

.btn-p{
  background:linear-gradient(135deg,#18150a,#2e2818);
  color:#e8b84b;
  border-color:#18150a;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.btn-p:hover{background:linear-gradient(135deg,#0f0d06,#1c1810);box-shadow:0 4px 16px rgba(0,0,0,.3)}

.btn-g{background:var(--green);color:#fff;border-color:var(--green);box-shadow:0 2px 8px rgba(20,83,45,.25)}
.btn-g:hover{background:#0d3d20;box-shadow:0 4px 14px rgba(20,83,45,.35)}

.btn-clr{background:transparent;color:var(--text3);border-color:transparent;margin-left:auto}
.btn-clr:hover{color:var(--text);background:var(--surface2);border-color:var(--border)}

.wp-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:linear-gradient(135deg,#1a9e4e,#25D366);
  color:#fff;border:none;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:12px;font-weight:700;
  cursor:pointer;transition:all .18s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(37,211,102,.25);
}
.wp-btn:hover{background:linear-gradient(135deg,#148a40,#1eb859);transform:translateY(-1px)}

.dl-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 16px;
  background:linear-gradient(135deg,var(--blue),#2456a0);
  color:#fff;border:none;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;
  box-shadow:0 2px 8px rgba(27,63,122,.25);
}
.dl-btn:hover{background:linear-gradient(135deg,#122c58,#1b4090);transform:translateY(-1px)}

/* ══════════ BADGES ══════════ */
.badge{display:inline-block;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.03em}
.bd-s{background:var(--blue-light);color:var(--blue);border:1px solid #d0ddf7}
.bd-a{background:var(--green-light);color:var(--green);border:1px solid #c0ecd5}
.bd-e{background:var(--orange-light);color:var(--orange);border:1px solid #f0d8be}
.bd-b{background:var(--red-light);color:var(--red);border:1px solid #f0cccc}
.bd-sp{background:var(--gold-light);color:var(--gold-dark);border:1px solid #e4d4a0}

/* ══════════ SİPARİŞ STEPS ══════════ */
.steps{display:flex;align-items:flex-start;margin:10px 0 6px;position:relative}
.step{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;position:relative}
.step:not(:last-child)::after{content:'';position:absolute;top:11px;left:55%;width:90%;height:2px;background:var(--border2);z-index:0}
.step.done:not(:last-child)::after{background:var(--green)}
.step-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--border2);background:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;position:relative;z-index:1;flex-shrink:0;font-weight:700}
.step.done .step-dot{background:var(--green);border-color:var(--green);color:#fff}
.step.cur .step-dot{background:linear-gradient(135deg,var(--gold),var(--gold-bright));border-color:var(--gold);color:#fff;box-shadow:0 0 0 3px rgba(196,154,46,.2)}
.step-lbl{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;text-align:center;white-space:nowrap}
.step.done .step-lbl,.step.cur .step-lbl{color:var(--text2)}

/* ══════════ SİPARİŞ KART ══════════ */
.sip-card{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow)}
.sip-head{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 10px}
.sip-body{padding:0 18px 12px}
.sip-fotos{display:flex;gap:7px;flex-wrap:wrap;padding:0 18px 10px}
.sip-fotos img{width:82px;height:82px;object-fit:cover;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:pointer;transition:all .15s}
.sip-fotos img:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}
.sip-actions{padding:11px 18px;background:var(--surface2);border-top:1px solid var(--border);display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.sip-no{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.06em}
.sip-name{font-size:15px;font-weight:600;margin-top:2px}
.sip-sub{font-size:12px;color:var(--text2);margin-top:2px}
.sip-info{display:flex;gap:14px;font-size:11px;color:var(--text3);flex-wrap:wrap;font-family:var(--font-mono);margin-top:6px}
.sip-info b{color:var(--text);font-weight:500}
.sip-not{font-size:12px;color:var(--text2);font-style:italic;margin-top:6px;padding-top:6px;border-top:1px dashed var(--border)}

/* ══════════ STATS ══════════ */
.stats4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.sc{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow);
  position:relative;overflow:hidden;
  transition:transform .18s,box-shadow .18s;
}
.sc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.sc::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),transparent);
  opacity:.5;
}
.sc-lbl{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.09em;margin-bottom:6px}
.sc-val{font-size:26px;font-weight:700;font-family:var(--font-mono);line-height:1}

/* ══════════ TABLO ══════════ */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:620px;background:var(--surface)}
th{
  text-align:left;
  padding:11px 13px;
  font-size:10px;font-weight:700;
  color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;
  border-bottom:2px solid var(--border);
  white-space:nowrap;
  background:var(--surface2);
}
td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--gold-light)}

@keyframes blink-red{0%,100%{opacity:1;background:#dc2626;}50%{opacity:.55;background:#ef4444;}}
@keyframes pulse-red{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5);}70%{box-shadow:0 0 0 6px rgba(220,38,38,0);}}
.gram-borc-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#dc2626;color:#fff;border-radius:12px;font-size:10px;font-weight:800;font-family:JetBrains Mono,monospace;animation:pulse-red 1.4s infinite;letter-spacing:.03em;white-space:nowrap;}
.icon-btn{
  width:30px;height:30px;
  border:1.5px solid var(--border);
  background:#fff;cursor:pointer;
  color:var(--text3);font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);transition:all .15s;
  position:relative;
}
.icon-btn:hover{border-color:var(--text2);color:var(--text);background:var(--bg);transform:scale(1.05)}

/* ══════════ MÜŞTERİ ══════════ */
.m-av{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--gold-light),#f0e8d0);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;
  color:var(--gold-dark);
  flex-shrink:0;
  border:2px solid #e4d4a0;
  box-shadow:0 2px 8px rgba(160,120,40,.15);
}

/* ══════════ MODAL ══════════ */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(8,6,3,.72);z-index:200;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(6px)}
.modal-overlay.open{display:flex}
.modal-box{
  background:var(--bg);
  border-radius:var(--radius-lg);
  max-width:420px;width:100%;overflow:hidden;
  box-shadow:0 8px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);
}
.fis-area{background:#e8e2d8;padding:22px;display:flex;justify-content:center;align-items:center;min-height:160px}
.fis-area canvas{border-radius:6px;box-shadow:0 6px 30px rgba(0,0,0,.25);max-width:100%}
.modal-actions{display:flex;gap:8px;padding:14px 16px;background:var(--surface);flex-wrap:wrap;align-items:center}
.m-close{
  margin-left:auto;padding:9px 18px;
  background:transparent;border:1.5px solid var(--border2);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--text2);cursor:pointer;transition:all .15s;
}
.m-close:hover{background:var(--bg);color:var(--text);border-color:var(--text2)}

.foto-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;align-items:center;justify-content:center;cursor:zoom-out}
.foto-modal.open{display:flex}
.foto-modal img{max-width:90vw;max-height:90vh;border-radius:10px;box-shadow:0 8px 60px rgba(0,0,0,.5)}

/* ══════════ TOAST ══════════ */
.toast{
  position:fixed;bottom:28px;right:28px;
  background:linear-gradient(135deg,#18150a,#2a2412);
  color:#e8b84b;
  padding:12px 20px;
  border-radius:var(--radius-sm);
  font-size:13px;font-weight:600;
  z-index:500;opacity:0;transform:translateY(10px);
  transition:all .25s;pointer-events:none;
  box-shadow:var(--shadow-md);
  border:1px solid rgba(196,154,46,.3);
  letter-spacing:.01em;
}
.toast.show{opacity:1;transform:translateY(0)}

.empty{padding:40px;text-align:center;color:var(--text3);font-size:13px}
.empty-icon{font-size:30px;margin-bottom:10px;opacity:.6}

@media(max-width:680px){
  .grid2,.grid3,.grid4{grid-template-columns:1fr}
  .stats4{grid-template-columns:1fr 1fr}
  .app-body{padding:16px 14px}
  header{padding:0 16px}
  .gf-wrap{display:none}
}

/* ══════════ PRINT ══════════ */
.qbtn{
  padding:5px 12px;
  border:1.5px solid var(--border2);
  border-radius:20px;
  font-size:11px;font-weight:700;
  cursor:pointer;background:#fff;color:var(--text2);
  font-family:var(--font-body);transition:all .15s;letter-spacing:.01em;
}
.qbtn:hover{background:var(--gold-light);border-color:var(--gold-mid);color:var(--gold-dark)}
.qbtn.sel{background:linear-gradient(135deg,#18150a,#2a2412);color:#e8b84b;border-color:#18150a}

@page {size:72mm auto;margin:4mm 3mm}
@media print {
  html,body{
    margin:0;padding:0;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  body>*:not(#print-area){display:none !important}
  #print-area{
    display:block !important;
    font-family:'Courier New',Courier,monospace;
    width:72mm;
    color:#000 !important;
    font-size:11pt;
    font-weight:700;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
    background:#fff !important;
  }
  .pr-title{
    text-align:center;font-size:16pt;font-weight:900;
    border-bottom:3px solid #000;
    padding-bottom:5px;margin-bottom:6px;
    color:#000 !important;letter-spacing:.05em;
  }
  .pr-sub{
    text-align:center;font-size:10pt;font-weight:700;
    margin-bottom:8px;color:#000 !important;
  }
  .pr-body{margin-bottom:6px}
  .pr-row{
    display:flex;justify-content:space-between;align-items:baseline;
    border-bottom:1px solid #555;padding:3px 0;gap:4px;
  }
  .pk{
    font-size:10pt;font-weight:900;color:#000 !important;
    white-space:nowrap;min-width:35%;
  }
  .pv{
    font-size:11pt;font-weight:900;color:#000 !important;
    text-align:right;word-break:break-word;
  }
  .pr-kalan{
    display:flex;justify-content:space-between;
    font-size:14pt;font-weight:900;
    border-top:3px solid #000;border-bottom:3px solid #000;
    padding:4px 0;margin:6px 0;
    color:#000 !important;background:#e8e8e8 !important;
    -webkit-print-color-adjust:exact !important;
    print-color-adjust:exact !important;
  }
  .pr-foot{
    text-align:center;font-size:9pt;font-weight:700;
    color:#000 !important;border-top:2px dashed #000;
    padding-top:4px;margin-top:6px;
  }
}
#print-area{display:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}

/* ══════════ ÖDEME KARTLARI ══════════ */
.odeme-card{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;
  border:1.5px solid var(--border2);
  border-radius:var(--radius-sm);
  cursor:pointer;background:#fff;
  transition:all .18s;min-width:160px;user-select:none;
}
.odeme-card:hover{border-color:var(--gold-mid);background:var(--gold-light);transform:translateY(-1px)}
.odeme-card.active{border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 3px rgba(20,83,45,.1)}
.odeme-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--border2);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:11px;color:#fff}
.odeme-card.active .odeme-check{background:var(--green);border-color:var(--green)}
.odeme-card.active .odeme-check::after{content:'✓'}
.odeme-card-lbl{font-size:13px;font-weight:700;color:var(--text);letter-spacing:.01em}
.odeme-card.active .odeme-card-lbl{color:var(--green)}
.odeme-card-sub{font-size:10px;color:var(--text3);margin-top:1px}

/* ══════════ SATIR FORM ══════════ */
.stip-btn{
  padding:7px 16px;
  border:1.5px solid var(--border2);
  border-radius:20px;font-size:12px;font-weight:700;
  cursor:pointer;background:#fff;color:var(--text2);
  font-family:var(--font-body);transition:all .15s;white-space:nowrap;
}
.stip-btn:hover{opacity:.85;transform:translateY(-1px)}
.stip-btn.sp-s{border-color:var(--blue);color:var(--blue);background:var(--blue-light)}
.stip-btn.sp-a{border-color:var(--green);color:var(--green);background:var(--green-light)}
.stip-btn.sp-n{border-color:var(--orange);color:var(--orange);background:var(--orange-light)}
.stip-btn.sp-h{border-color:var(--purple);color:var(--purple);background:var(--purple-light)}

.str-tbl{width:100%;border-collapse:collapse;font-size:13px}
.str-tbl th{
  text-align:left;padding:10px 15px;
  font-size:9.5px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:.07em;
  border-bottom:2px solid var(--border2);white-space:nowrap;
  background:var(--surface2);
}
.str-tbl td{padding:11px 15px;border-bottom:1px solid var(--border);vertical-align:middle}
.str-tbl tbody tr:last-child td{border-bottom:none}
.str-satis td{background:#eef3ff}
.str-alis td{background:#edfaf3}
.str-nakit td{background:#fef7ed}
.str-havale td{background:#f5f3ff}

.str-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:10px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.str-badge-s{background:var(--blue-light);color:var(--blue);border:1px solid #d0ddf7}
.str-badge-a{background:var(--green-light);color:var(--green);border:1px solid #c0ecd5}
.str-badge-n{background:var(--orange-light);color:var(--orange);border:1px solid #f0d8be}
.str-badge-h{background:var(--purple-light);color:var(--purple);border:1px solid #ddd6fe}

.ozet-row{display:flex;gap:22px;flex-wrap:wrap;padding:14px 18px;background:var(--surface2);border-top:2px solid var(--border2);align-items:center}
.ozet-item{display:flex;flex-direction:column;gap:2px}
.ozet-lbl{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.ozet-val{font-size:15px;font-weight:700;font-family:var(--font-mono)}

.str-inp{
  padding:10px 13px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:13px;
  color:var(--text);background:#fff;
  transition:all .18s;width:100%;box-sizing:border-box;
  outline:none;
}
.str-inp:focus{border-color:var(--gold-mid);box-shadow:0 0 0 3px rgba(196,154,46,.12)}

.banka-btn{
  padding:5px 13px;
  border:1.5px solid var(--purple);
  border-radius:20px;font-size:11px;font-weight:700;
  cursor:pointer;background:var(--purple-light);color:var(--purple);
  font-family:var(--font-body);transition:all .15s;white-space:nowrap;letter-spacing:.01em;
}
.banka-btn:hover{background:#ede9fe;transform:translateY(-1px)}

.wp-blue{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 14px;
  background:linear-gradient(135deg,var(--blue),#2456a0);
  color:#fff;border:none;
  border-radius:var(--radius-sm);
  font-family:var(--font-body);font-size:12px;font-weight:600;
  cursor:pointer;transition:all .18s;white-space:nowrap;
  box-shadow:0 2px 8px rgba(27,63,122,.25);
}
.wp-blue:hover{background:linear-gradient(135deg,#122c58,#1b4090)}

/* ══════════ BANKA UYARI BANDI ══════════ */
#banka-uyari-bant{
  display:none;
  overflow:hidden;
  height:38px;
  position:sticky;
  top:62px;
  z-index:49;
  cursor:pointer;
  background:linear-gradient(90deg,#5c0a0a 0%,#991b1b 40%,#7f1d1d 60%,#991b1b 80%,#5c0a0a 100%);
  border-bottom:2px solid rgba(252,165,165,.4);
  animation:bantParlak 1.2s ease-in-out infinite alternate;
}
#banka-uyari-bant:hover{filter:brightness(1.2)}
.bant-icerik{
  display:inline-flex;align-items:center;
  white-space:nowrap;height:38px;
  padding-left:100vw;
  animation:bantKayan 22s linear infinite;
}
.bant-item{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-size:12px;font-weight:800;
  color:#fff;letter-spacing:.06em;text-transform:uppercase;
  padding-right:60px;
}
.bant-ikaz{display:inline-block;animation:ikazYanip .65s ease-in-out infinite alternate}
.bant-sayi{
  background:#fff;color:#991b1b;
  border-radius:20px;padding:2px 9px;
  font-size:11px;font-weight:900;letter-spacing:.02em;
}
.bant-tutar{
  background:rgba(255,255,255,.15);color:#fff;
  border-radius:6px;padding:2px 9px;
  font-size:12px;font-weight:700;font-family:var(--font-mono);
  border:1px solid rgba(255,255,255,.25);
}
@keyframes bantKayan{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes bantParlak{0%{box-shadow:0 3px 16px rgba(153,27,27,.5)}100%{box-shadow:0 3px 32px rgba(239,68,68,.7)}}
@keyframes ikazYanip{0%{opacity:1;transform:scale(1.1)}100%{opacity:.2;transform:scale(.9)}}
</style>