window.EKO.modals = function(V){
  return (
    <React.Fragment>
      { (V.filterOpen) ? (
      <div onClick={V.closeFilter} style={css("position:fixed;inset:0;z-index:96;background:rgba(15,27,45,.5);display:flex;align-items:flex-end")}>
        <div onClick={V.stop} role="dialog" aria-label="Filtrele ve sırala" style={css("width:100%;background:var(--km-paper);border-radius:18px 18px 0 0;box-shadow:var(--shadow-4);max-height:82vh;display:flex;flex-direction:column;animation:kmsheet .28s ease both")}>
          <div style={css("display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--km-line)")}>
            <span style={css("font-size:16px;font-weight:800")}>Filtrele & Sırala</span>
            <button onClick={V.closeFilter} aria-label="Kapat" style={css("display:flex;color:var(--km-ink-500)")}>{V.icX}</button>
          </div>
          <div style={css("padding:18px;overflow-y:auto")}>
            <div style={css("font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--km-ink-400);margin-bottom:11px")}>Kategori</div>
            <div style={css("display:flex;flex-wrap:wrap;gap:9px")}>
              { (V.filterChips || []).map(function(f, $index){ return (
                <button key={$index} onClick={f.set} style={css("font-size:13.5px;font-weight:600;color:" + f.fg + ";background:" + f.bg + ";border:1px solid var(--km-line);border-radius:999px;padding:9px 15px")}>{f.label}</button>
              ); }) }
            </div>
            <div style={css("font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--km-ink-400);margin:22px 0 11px")}>Sıralama</div>
            <div style={css("display:flex;flex-wrap:wrap;gap:9px")}>
              { (V.sortOptions || []).map(function(o, $index){ return (
                <button key={$index} onClick={o.set} style={css("font-size:13.5px;font-weight:600;color:" + o.fg + ";background:" + o.bg + ";border:1px solid var(--km-line);border-radius:10px;padding:9px 15px")}>{o.label}</button>
              ); }) }
            </div>
          </div>
          <div style={css("border-top:1px solid var(--km-line);padding:14px 18px;display:flex;gap:10px")}>
            <button onClick={V.clearFilter} style={css("flex:none;font-size:13.5px;font-weight:600;color:var(--km-ink-600);border:1px solid var(--km-line-strong);border-radius:11px;padding:12px 16px")}>Temizle</button>
            <button onClick={V.closeFilter} style={css("flex:1;font-size:14px;font-weight:700;color:#fff;background:var(--km-mod);border-radius:11px;padding:12px")}>Sonuçları gör ({V.itemCount})</button>
          </div>
        </div>
      </div>
      ) : null }

      { (V.photoOpen) ? (
      <div onClick={V.closePhoto} style={css("position:fixed;inset:0;z-index:95;background:rgba(15,27,45,.5);display:flex;align-items:center;justify-content:center;padding:16px")}>
        <div onClick={V.stop} role="dialog" aria-label="Foto ile ara" style={css("width:min(440px,95vw);background:var(--km-paper);border-radius:16px;box-shadow:var(--shadow-4);overflow:hidden")}>
          <div style={css("background:var(--km-deep);color:#fff;padding:17px 20px;position:relative")}><div style={css("font-weight:800;font-size:16px;display:flex;align-items:center;gap:9px")}><span style={css("display:flex")}>{V.icCamera}</span>Foto ile ara</div><div style={css("font-size:12.5px;color:#A8C4DC;margin-top:2px")}>Parçanın fotoğrafını yükle, görselle eşleşenleri bulalım</div><button onClick={V.closePhoto} aria-label="Kapat" style={css("position:absolute;top:15px;right:16px;color:#fff;display:flex")}>{V.icX}</button></div>
          <div style={css("padding:18px")}>
            <div style={css("border:2px dashed var(--km-line-strong);border-radius:14px;padding:32px 20px;text-align:center")}><div style={css("width:52px;height:52px;border-radius:12px;background:var(--km-deep-soft);color:var(--km-deep);display:flex;align-items:center;justify-content:center;margin:0 auto;font-size:22px")}>{V.icCamera}</div><div style={css("font-size:14px;font-weight:700;color:var(--km-ink-900);margin-top:12px")}>Fotoğraf çek veya yükle</div><div style={css("font-size:12.5px;color:var(--km-ink-500);margin-top:4px;line-height:1.5")}>Sürükle-bırak ya da <b style={css("color:var(--km-deep)")}>gözat</b> · JPG/PNG</div><div style={css("display:flex;gap:9px;justify-content:center;margin-top:16px")}><button style={css("background:var(--km-deep);color:#fff;font-weight:700;font-size:13px;padding:10px 16px;border-radius:10px")}>📷 Kamera</button><button style={css("background:var(--km-paper);border:1px solid var(--km-line-strong);color:var(--km-ink-700);font-weight:600;font-size:13px;padding:10px 16px;border-radius:10px")}>🖼 Galeri</button></div></div>
            <div style={css("display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--km-ink-400);margin-top:14px;line-height:1.5")}><span style={css("display:flex;color:var(--km-deep)")}>{V.icAi}</span>Yapay zekâ görseldeki parçayı tanır, OEM no ve uyumlu muadilleri fiyatlarıyla listeler.</div>
          </div>
        </div>
      </div>
      ) : null }

      { (V.loginOpen) ? (
      <div onClick={V.closeLogin} style={css("position:fixed;inset:0;z-index:95;background:var(--km-paper);display:flex")}>
        <div onClick={V.stop} role="dialog" aria-label="KolayLogin ile giriş" style={css("width:100%;height:100%;background:var(--km-paper);display:flex;flex-direction:column;overflow-y:auto")}>
          <div style={css("background:var(--km-deep);color:#fff;padding:20px 22px;position:relative;flex:none")}>
            <div style={css("max-width:420px;margin:0 auto")}>
              <div style={css("font-weight:800;font-size:19px")}>Kolay<span style={css("color:var(--km-accent)")}>Login</span></div>
              <div style={css("font-size:13px;color:#A8C4DC;margin-top:3px")}>Tek üyelik — tüm Kolaymarin ekosisteminde geçerli</div>
            </div>
            <button onClick={V.closeLogin} aria-label="Kapat" style={css("position:absolute;top:18px;right:20px;color:#fff;display:flex")}>{V.icX}</button>
          </div>
          <div style={css("flex:1;display:flex;align-items:flex-start;justify-content:center;padding:32px 20px 40px")}>
          <div style={css("width:100%;max-width:420px;display:flex;flex-direction:column;gap:13px")}>
            { (V.isLoginMode) ? (<>
              <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Telefon veya e-posta</span><input placeholder="+90 5xx xxx xx xx" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:12px 13px;font-size:15px;outline:none")}/></label>
              <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Şifre</span><input type="password" placeholder="••••••••" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:12px 13px;font-size:15px;outline:none")}/></label>
              <button onClick={V.signIn} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:15px;padding:13px;border-radius:11px;width:100%")}>Giriş yap</button>
              <div style={css("text-align:center;font-size:12.5px;color:var(--km-ink-500)")}>Hesabın yok mu? <button onClick={V.setRegisterMode} style={css("color:var(--km-deep);font-weight:700")}>Telefonla üye ol</button></div>
            </>) : null }
            { (V.isRegForm) ? (<>
              <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Ad soyad</span><input placeholder="Ad Soyad" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:12px 13px;font-size:15px;outline:none")}/></label>
              <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Telefon numarası</span>
                <span style={css("display:flex;align-items:center;gap:8px;border:1px solid var(--km-line-strong);border-radius:10px;padding:0 13px")}><span style={css("font-size:15px;color:var(--km-ink-600);font-weight:600")}>🇹🇷 +90</span><input inputMode="tel" placeholder="5xx xxx xx xx" style={css("flex:1;border:0;padding:12px 0;font-size:15px;outline:none;background:none")}/></span>
              </label>
              <label style={css("display:flex;gap:9px;align-items:flex-start;font-size:12px;color:var(--km-ink-500);line-height:1.45")}><input type="checkbox" style={css("margin-top:2px;width:16px;height:16px;accent-color:#0A3D62")}/><span>Kullanım Koşulları ve KVKK Aydınlatma Metni'ni okudum, onaylıyorum. SMS ile doğrulama kodu almayı kabul ediyorum.</span></label>
              <button onClick={V.sendOtp} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:15px;padding:13px;border-radius:11px;width:100%")}>SMS kodu gönder</button>
              <div style={css("text-align:center;font-size:12.5px;color:var(--km-ink-500)")}>Zaten üye misin? <button onClick={V.setLoginMode} style={css("color:var(--km-deep);font-weight:700")}>Giriş yap</button></div>
            </>) : null }
            { (V.isRegOtp) ? (<>
              <div style={css("text-align:center;padding:6px 0 4px")}><span style={css("width:52px;height:52px;border-radius:999px;background:var(--km-deep-soft);color:var(--km-deep);display:inline-flex;align-items:center;justify-content:center;font-size:22px")}>✉</span></div>
              <div style={css("text-align:center;font-size:14px;color:var(--km-ink-700);line-height:1.5")}>Telefonuna <b>6 haneli SMS kodu</b> gönderdik.<br/><span style={css("font-size:12.5px;color:var(--km-ink-400)")}>+90 5xx xxx xx xx numarasına</span></div>
              <div style={css("display:flex;gap:8px;justify-content:center;margin:6px 0")}><input maxLength="1" defaultValue="4" style={css("width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--km-line-strong);border-radius:10px;outline:none")}/><input maxLength="1" defaultValue="8" style={css("width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--km-line-strong);border-radius:10px;outline:none")}/><input maxLength="1" defaultValue="2" style={css("width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--km-line-strong);border-radius:10px;outline:none")}/><input maxLength="1" placeholder="–" style={css("width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--km-line-strong);border-radius:10px;outline:none")}/><input maxLength="1" placeholder="–" style={css("width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--km-line-strong);border-radius:10px;outline:none")}/><input maxLength="1" placeholder="–" style={css("width:44px;height:52px;text-align:center;font-size:20px;font-weight:700;border:1px solid var(--km-line-strong);border-radius:10px;outline:none")}/></div>
              <button onClick={V.signIn} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:15px;padding:13px;border-radius:11px;width:100%")}>Doğrula ve üye ol</button>
              <div style={css("text-align:center;font-size:12.5px;color:var(--km-ink-500)")}>Kod gelmedi mi? <button style={css("color:var(--km-deep);font-weight:700")}>Tekrar gönder (0:32)</button></div>
              <button onClick={V.backToForm} style={css("text-align:center;font-size:12px;color:var(--km-ink-400);font-weight:600")}>← Numarayı değiştir</button>
            </>) : null }
            <div style={css("font-size:11px;color:var(--km-ink-400);text-align:center;margin-top:4px")}>KolayLogin · authfy.io ile güvenli tek oturum (SSO)</div>
          </div>
          </div>
        </div>
      </div>
      ) : null }

      { (V.howOpen) ? (
      <div onClick={V.closeHow} style={css("position:fixed;inset:0;z-index:95;background:rgba(15,27,45,.55);display:flex;align-items:center;justify-content:center;padding:16px")}>
        <div onClick={V.stop} role="dialog" aria-label="Nasıl çalışır" style={css("width:min(560px,95vw);max-height:90vh;overflow-y:auto;background:var(--km-paper);border-radius:18px;box-shadow:var(--shadow-4)")}>
          <div style={css("background:var(--km-deep);color:#fff;padding:22px 24px;position:relative")}>
            <div style={css("font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--km-accent)")}>Kolaymarin nasıl çalışır</div>
            <div style={css("font-size:20px;font-weight:800;margin-top:6px")}>Dört adımda denizde ne varsa</div>
            <button onClick={V.closeHow} aria-label="Kapat" style={css("position:absolute;top:16px;right:16px;color:#fff;display:flex")}>{V.icX}</button>
          </div>
          <div style={css("padding:22px 24px;display:flex;flex-direction:column;gap:4px")}>
            { (V.howSteps || []).map(function(st, $index){ return (
              <div key={$index} style={css("display:flex;gap:15px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--km-line)")}>
                <span style={css("flex:none;width:40px;height:40px;border-radius:12px;background:var(--km-deep-soft);color:var(--km-deep);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px")}>{st.n}</span>
                <div style={css("padding-top:2px")}><div style={css("font-size:15.5px;font-weight:700;color:var(--km-ink-900)")}>{st.t}</div><div style={css("font-size:13.5px;color:var(--km-ink-600);line-height:1.5;margin-top:3px")}>{st.d}</div></div>
              </div>
            ); }) }
            <div style={css("display:flex;gap:10px;flex-wrap:wrap;margin-top:16px")}>
              <button onClick={V.closeHow} style={css("flex:1;min-width:150px;background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:14.5px;padding:12px;border-radius:11px")}>Hemen keşfet</button>
              <button onClick={V.openSellerFromHow} style={css("flex:none;background:var(--km-paper);border:1px solid var(--km-line-strong);color:var(--km-ink-700);font-weight:600;font-size:14px;padding:12px 18px;border-radius:11px")}>İşletmen mi var?</button>
            </div>
            <p style={css("font-size:11.5px;color:var(--km-ink-400);text-align:center;margin:12px 0 0")}>Tüm ödemeler ve talepler demo amaçlıdır; gerçek tahsilat yapılmaz.</p>
          </div>
        </div>
      </div>
      ) : null }

      { (V.reqDetailOpen) ? (
      <div onClick={V.closeReqDetail} style={css("position:fixed;inset:0;z-index:95;background:rgba(15,27,45,.5);display:flex;align-items:center;justify-content:center;padding:16px")}>
        <div onClick={V.stop} role="dialog" aria-label="Talep detayı" style={css("width:min(520px,95vw);max-height:90vh;overflow-y:auto;background:var(--km-paper);border-radius:16px;box-shadow:var(--shadow-4)")}>
          <div style={css("display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--km-line)")}>
            <div>
              <div style={css("font-size:12px;color:var(--km-ink-400);font-weight:600")}>Talep {V.reqDetail.ref}</div>
              <h2 style={css("font-size:18px;font-weight:800;margin:3px 0 0")}>{V.reqDetail.subject}</h2>
              <span style={css("display:inline-block;font-size:11.5px;font-weight:700;color:" + V.reqDetail.statusFg + ";background:" + V.reqDetail.statusBg + ";padding:3px 10px;border-radius:999px;margin-top:7px")}>{V.reqDetail.status}</span>
            </div>
            <button onClick={V.closeReqDetail} aria-label="Kapat" style={css("color:var(--km-ink-500);display:flex")}>{V.icX}</button>
          </div>
          <div style={css("padding:18px 20px")}>
            <div style={css("display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px")}>
              <div style={css("background:var(--km-paper-2);border-radius:10px;padding:12px")}><div style={css("font-size:11px;color:var(--km-ink-400);font-weight:600")}>Müşteri</div><div style={css("font-size:14px;font-weight:700;color:var(--km-ink-900);margin-top:2px")}>{V.reqDetail.who}</div><div style={css("font-size:12px;color:var(--km-ink-500)")}>{V.reqDetail.phone}</div></div>
              <div style={css("background:var(--km-paper-2);border-radius:10px;padding:12px")}><div style={css("font-size:11px;color:var(--km-ink-400);font-weight:600")}>Tahmini tutar</div><div style={css("font-size:14px;font-weight:700;color:var(--km-ink-900);margin-top:2px km-num")}>{V.reqDetail.amount}</div><div style={css("font-size:12px;color:var(--km-ink-500)")}>{V.reqDetail.date}</div></div>
            </div>
            <div style={css("font-size:13px;color:var(--km-ink-600);line-height:1.55;background:var(--km-paper-2);border-radius:10px;padding:13px 15px;margin-bottom:18px")}>{V.reqDetail.note}</div>

            <div style={css("font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--km-ink-400);margin-bottom:11px")}>Talep durumu</div>
            <div style={css("display:flex;flex-direction:column;gap:0;margin-bottom:18px")}>
              { (V.reqTimeline || []).map(function(tl, $index){ return (
                <div key={$index} style={css("display:flex;gap:12px;align-items:flex-start")}>
                  <div style={css("display:flex;flex-direction:column;align-items:center;align-self:stretch")}><span style={css("width:22px;height:22px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;background:" + tl.dotBg + ";color:" + tl.dotFg + ";border:1.5px solid " + tl.dotBd)}>{tl.mark}</span><span style={css("flex:1;width:2px;background:var(--km-line)")}></span></div>
                  <div style={css("padding-bottom:14px")}><div style={css("font-size:13.5px;font-weight:600;color:" + tl.tc)}>{tl.t}</div><div style={css("font-size:11.5px;color:var(--km-ink-400)")}>{tl.d}</div></div>
                </div>
              ); }) }
            </div>

            { (V.reqReplyPending) ? (<>
            <div style={css("font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--km-ink-400);margin-bottom:9px")}>Müşteriye yanıt</div>
            <textarea rows="3" placeholder="Teklif ve müsaitlik bilgisini yaz…" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:14px;outline:none;resize:vertical;font-family:inherit")}/>
            <div style={css("display:flex;gap:9px;margin-top:12px")}>
              <button onClick={V.sendReqReply} style={css("flex:1;background:var(--km-deep);color:#fff;font-weight:700;font-size:14px;padding:12px;border-radius:10px")}>Yanıtı gönder</button>
              <button onClick={V.closeReqDetail} style={css("flex:none;background:var(--km-paper);border:1px solid var(--km-line-strong);color:var(--km-ink-600);font-weight:600;font-size:14px;padding:12px 16px;border-radius:10px")}>Kapat</button>
            </div>
            </>) : null }
            { (V.reqReplied) ? (<>
            <div style={css("display:flex;align-items:center;gap:10px;background:var(--km-good-soft);border-radius:11px;padding:14px 16px")}>
              <span style={css("color:var(--km-good);display:flex")}>{V.icCheck}</span>
              <div style={css("flex:1")}><div style={css("font-size:13.5px;font-weight:700;color:var(--km-good)")}>Yanıt müşteriye gönderildi</div><div style={css("font-size:12px;color:var(--km-ink-500)")}>Müşteri e-posta ve panel bildirimiyle bilgilendirildi.</div></div>
              <button onClick={V.closeReqDetail} style={css("flex:none;font-size:12.5px;font-weight:700;color:var(--km-deep)")}>Tamam</button>
            </div>
            </>) : null }
          </div>
        </div>
      </div>
      ) : null }

      { (V.sellerOpen) ? (
      <div onClick={V.closeSeller} style={css("position:fixed;inset:0;z-index:95;background:rgba(15,27,45,.5);display:flex;align-items:center;justify-content:center;padding:16px")}>
        <div onClick={V.stop} role="dialog" aria-label="Satıcı / İş Ortağı başvurusu" style={css("width:min(480px,95vw);max-height:90vh;overflow-y:auto;background:var(--km-paper);border-radius:16px;box-shadow:var(--shadow-4)")}>
          <div style={css("background:var(--km-deep);color:#fff;padding:18px 20px;position:relative")}>
            <div style={css("display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px")}><span style={css("display:flex;color:var(--km-accent)")}>{V.icStore}</span>Satıcı / İş Ortağı</div>
            <div style={css("font-size:12.5px;color:#A8C4DC;margin-top:2px")}>İşletmeni Kolaymarin ekosistemine ekle</div>
            <button onClick={V.closeSeller} aria-label="Kapat" style={css("position:absolute;top:14px;right:14px;color:#fff;display:flex")}>{V.icX}</button>
          </div>
          { (V.sellerPending) ? (<>
          <div style={css("padding:18px;display:flex;flex-direction:column;gap:12px")}>
            <p style={css("font-size:13px;color:var(--km-ink-600);line-height:1.5;margin:0")}>Marina, servis, broker, tersane ya da tur işletmesi misin? Başvurunu al, ekibimiz seni uygun modülde listelemek için 2 iş günü içinde arasın.</p>
            <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Firma adı</span><input placeholder="Örn. Ege Marine Servis" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:14px;outline:none")}/></label>
            <div style={css("display:grid;grid-template-columns:1fr 1fr;gap:12px")}>
              <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Yetkili ad soyad</span><input placeholder="Ad Soyad" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:14px;outline:none")}/></label>
              <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Telefon</span><input placeholder="+90 5xx xxx xx xx" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:14px;outline:none")}/></label>
            </div>
            <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>E-posta</span><input type="email" placeholder="firma@eposta.com" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:14px;outline:none")}/></label>
            <label style={css("display:block")}><span style={css("display:block;font-size:12.5px;font-weight:600;color:var(--km-ink-600);margin:0 0 6px")}>Hangi modülde yer almak istersin?</span><input placeholder="Örn. KolayService, KolayBroker…" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:14px;outline:none")}/></label>
            <button onClick={V.submitSeller} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:15px;padding:12px;border-radius:11px;width:100%")}>Başvuruyu gönder</button>
            <div style={css("font-size:11px;color:var(--km-ink-400);text-align:center")}>Başvurular demo amaçlıdır; gerçek kayıt oluşturulmaz.</div>
          </div>
          </>) : null }
          { (V.sellerDone) ? (<>
          <div style={css("padding:30px 22px;text-align:center")}>
            <span style={css("width:60px;height:60px;border-radius:999px;background:var(--km-good-soft);color:var(--km-good);display:flex;align-items:center;justify-content:center;margin:0 auto")}><span style={css("transform:scale(1.4);display:flex")}>{V.icCheck}</span></span>
            <h2 style={css("font-size:19px;font-weight:800;margin:16px 0 0")}>Başvurun alındı</h2>
            <p style={css("font-size:13.5px;color:var(--km-ink-600);line-height:1.5;margin:8px auto 0;max-width:340px")}>İş ortağı ekibimiz 2 iş günü içinde seninle iletişime geçecek. İlgin için teşekkürler!</p>
            <button onClick={V.closeSeller} style={css("background:var(--km-deep);color:#fff;font-weight:700;font-size:14px;padding:11px 22px;border-radius:11px;margin-top:20px")}>Kapat</button>
          </div>
          </>) : null }
        </div>
      </div>
      ) : null }

      <div className="km-fab">
        { (V.aiOpen) ? (
          <div role="dialog" aria-label="Yapay zeka asistanı" style={css("width:min(342px,92vw);background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;box-shadow:var(--shadow-4);overflow:hidden;margin-bottom:12px")}>
            <div style={css("background:var(--km-deep);color:#fff;padding:13px 15px;display:flex;align-items:center;justify-content:space-between")}>
              <span style={css("display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px")}><span style={css("display:flex;color:var(--km-accent)")}>{V.icAi}</span>{V.activeModule.name} Asistanı</span>
              <button onClick={V.closeAi} aria-label="Asistanı kapat" style={css("color:#fff;display:flex")}>{V.icX}</button>
            </div>
            <div style={css("padding:15px;display:flex;flex-direction:column;gap:11px")}>
              <div style={css("background:var(--km-deep-soft);border-radius:12px;padding:12px;font-size:13.5px;color:var(--km-ink-700);line-height:1.5;display:flex;align-items:flex-start;gap:9px")}><span style={css("flex:1")}>Merhaba! Ben deniz, sesli asistanın. Ne aradığını yaz ya da söyle, sana en uygun sonucu bulayım. Örnek:</span><button onClick={V.speakGreeting} aria-label="Sesli dinle" title="Sesli dinle" style={css("flex:none;width:30px;height:30px;border-radius:8px;background:var(--km-paper);border:1px solid var(--km-line);color:var(--km-deep);display:flex;align-items:center;justify-content:center")}>{V.icSpeaker}</button></div>
              <div style={css("display:flex;flex-wrap:wrap;gap:7px")}>
                <button onClick={V.openList} style={css("font-size:12px;font-weight:600;color:var(--km-deep);background:var(--km-paper-2);border:1px solid var(--km-line);border-radius:999px;padding:7px 11px")}>En uygun seçenek</button>
                <button onClick={V.openList} style={css("font-size:12px;font-weight:600;color:var(--km-deep);background:var(--km-paper-2);border:1px solid var(--km-line);border-radius:999px;padding:7px 11px")}>Bana öner</button>
                <button onClick={V.goPanel} style={css("font-size:12px;font-weight:600;color:var(--km-deep);background:var(--km-paper-2);border:1px solid var(--km-line);border-radius:999px;padding:7px 11px")}>Taleplerim</button>
              </div>
              <div style={css("font-size:11px;color:var(--km-ink-400);line-height:1.4")}>Yapay zeka asistanı önizlemesi — öneriler seni ilgili sayfaya yönlendirir.</div>
            </div>
            <div style={css("display:flex;align-items:center;gap:8px;border-top:1px solid var(--km-line);padding:10px 12px")}>
              <input placeholder="Bir şey sor…" aria-label="Asistana yaz" style={css("flex:1;border:0;outline:none;font-size:14px;background:none;min-width:0")}/>
              <button onClick={V.openList} aria-label="Gönder" style={css("flex:none;width:36px;height:36px;border-radius:9px;background:var(--km-accent);color:var(--km-ink-900);display:flex;align-items:center;justify-content:center")}>{V.icArrow}</button>
            </div>
          </div>
        ) : null }
        <button onClick={V.toggleAi} aria-label="Yapay zeka asistanı" style={css("width:56px;height:56px;border-radius:999px;background:var(--km-deep);color:#fff;box-shadow:var(--shadow-3);display:flex;align-items:center;justify-content:center;align-self:flex-end")}>{V.icAi}</button>
      </div>
    </React.Fragment>
  );
};
