/* ══════════════════════════════════════════════════════════════════
 * EKRAN EKLE — kurumsal akış (3.12)
 * Numaralı adımlar, kota göstergesi, haneli kod girişi, yön önizlemesi.
 * ══════════════════════════════════════════════════════════════════ */

.ek-baslik{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ek-baslik h1{margin:0 0 4px}

/* ---- kota ---- */
.ek-kota{min-width:220px;background:#fff;border:1px solid var(--line,#dbe4e8);border-radius:14px;padding:12px 14px}
.ek-kota .ek-kota-ust{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ek-kota b{font-size:13px;color:#183241}
.ek-kota em{font-style:normal;font-size:13px;font-weight:800;color:#0f766e}
.ek-kota .ek-bar{margin-top:8px;height:6px;border-radius:99px;background:#e9eff2;overflow:hidden}
.ek-kota .ek-bar i{display:block;height:100%;background:#0f766e;border-radius:99px;transition:width .3s}
.ek-kota small{display:block;margin-top:7px;font-size:11px;color:#64748b;line-height:1.45}
.ek-kota.uyari em,.ek-kota.uyari .ek-bar i{color:#b45309;background:#d97706}
.ek-kota.uyari em{background:none}
.ek-kota.dolu em,.ek-kota.dolu .ek-bar i{color:#be123c;background:#e11d48}
.ek-kota.dolu em{background:none}

/* ---- adımlar ---- */
.ek-akis{margin-top:18px;display:grid;gap:14px}
.ek-adim{display:flex;gap:14px;background:#fff;border:1px solid var(--line,#dbe4e8);border-radius:18px;padding:18px 20px}
.ek-adim .ek-no{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:#eef4f5;color:#5b6b78;font-weight:800;font-size:14px;transition:background .25s,color .25s}
/* Tamamlanan adımda rakam yerine onay işareti görünür. */
.ek-adim.tamam .ek-no{background:#0f766e;color:#fff;font-size:0}
.ek-adim.tamam .ek-no::after{content:'✓';font-size:17px;line-height:1}
.ek-govde{flex:1 1 auto;min-width:0}
.ek-govde h3{margin:4px 0 6px;font-size:16px}
.ek-not{margin:0 0 12px;font-size:13px;color:#5b6b78;line-height:1.55}
.ek-not a{color:#0f766e;font-weight:700}

/* ---- kod haneleri ---- */
.ek-kod{display:flex;gap:9px;flex-wrap:wrap}
.ek-kod input{width:52px;height:60px;text-align:center;font-size:24px;font-weight:800;color:#12313d;
  border:1.5px solid #d7e2e7;border-radius:12px;background:#fbfdfd;transition:border-color .15s,box-shadow .15s}
.ek-kod input:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px #0f766e22;background:#fff}
.ek-kod input.dolu{border-color:#0f766e;background:#fff}
.ek-arac{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.ek-durum{font-size:12px;color:#5b6b78}
.ek-durum.ok{color:#0f766e;font-weight:700}
.ek-durum.err{color:#be123c;font-weight:700}

/* ---- kamera ---- */
.ek-kamera{position:relative;margin-top:12px;max-width:420px;border-radius:14px;overflow:hidden;background:#0b1720}
.ek-kamera video{display:block;width:100%;max-height:320px;object-fit:cover}
.ek-cerceve{position:absolute;inset:18% 22%;border:2px solid #14b8a6;border-radius:12px;
  box-shadow:0 0 0 9999px #0b172066;pointer-events:none}

/* ---- alanlar ---- */
.ek-alanlar{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ek-alan label{display:block;font-size:12px;font-weight:800;color:#25404d;margin-bottom:6px}
.ek-zorunlu{color:#e11d48}
.ek-alan input,.ek-alan select{width:100%;padding:11px 12px;border:1px solid #d7e2e7;border-radius:11px;
  background:#fff;color:#183241;font-size:14px}
.ek-alan input:focus,.ek-alan select:focus{outline:0;border-color:#0f766e;box-shadow:0 0 0 3px #0f766e22}
.ek-alan input.eksik{border-color:#e11d48;box-shadow:0 0 0 3px #e11d4822}
.ek-alan small{display:block;margin-top:6px;font-size:11px;color:#64748b;line-height:1.5}
.ek-alan small i{font-style:normal;color:#0f5f59}

/* ---- yön önizleme ---- */
.ek-onizleme{margin-top:14px;display:flex;align-items:center;gap:12px}
.ek-onizleme>span{font-size:12px;font-weight:800;color:#25404d}
.ek-yon{display:block;border:2px solid #24515f;border-radius:5px;background:
  repeating-linear-gradient(135deg,#e8f1f3 0 7px,#dbe9ec 7px 14px);transition:width .25s,height .25s}
.ek-yon.yatay{width:74px;height:42px}
.ek-yon.dikey{width:42px;height:74px}

/* ---- özet ---- */
.ek-ozet{display:grid;gap:7px;margin-bottom:14px}
.ek-ozet-sat{display:flex;gap:10px;font-size:13px}
.ek-ozet-sat>span{flex:0 0 120px;color:#64748b}
.ek-ozet-sat>b{color:#183241;font-weight:700;min-width:0;overflow-wrap:anywhere}
.ek-ozet-sat.eksik>b{color:#b45309}

/* ---- düğmeler ---- */
.ek-dugme{padding:13px 22px;border:0;border-radius:12px;background:#0f766e;color:#fff;
  font-weight:800;font-size:15px;cursor:pointer;transition:background .2s,opacity .2s}
.ek-dugme:hover{background:#0c5f59}
.ek-dugme[disabled]{background:#9db6b8;cursor:not-allowed}
.ek-dugme-alt{padding:10px 15px;border:1px solid #cfe0e3;border-radius:11px;background:#fff;
  color:#0f5f59;font-weight:700;font-size:13px;cursor:pointer}
.ek-dugme-alt:hover{background:#f2f9f9}

.ek-msg{margin-top:14px}
.ek-msg:empty{display:none}

/* ---- başarı ---- */
.ek-basari{margin-top:18px;background:#fff;border:1px solid #bfe3cb;border-left:4px solid #0f766e;
  border-radius:16px;padding:20px 22px}
.ek-basari h3{margin:0 0 6px;font-size:17px;color:#14603f}
.ek-basari p{margin:0 0 14px;font-size:13px;color:#42606b;line-height:1.6}
.ek-basari .ek-satir{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:820px){
  .ek-alanlar{grid-template-columns:1fr}
  .ek-kota{min-width:100%}
  .ek-adim{padding:16px}
  .ek-kod input{width:44px;height:54px;font-size:21px}
}