window.EKO.admin = function(V){
  return (
    <div style={css("max-width:1100px;margin:0 auto;padding:16px 16px 60px")} data-screen-label="Admin">
      <nav aria-label="Konum" style={css("display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--km-ink-500);margin-bottom:14px")}>
        <button onClick={V.goHome} style={css("color:var(--km-ink-500)")}>Ekosistem</button><span style={css("color:var(--km-ink-300)")}>/</span>
        <span style={css("color:var(--km-ink-700);font-weight:600")}>Admin Paneli</span>
      </nav>
      <div style={css("display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin-bottom:18px")}>
        <div style={css("display:flex;align-items:center;gap:11px")}>
          <span style={css("width:44px;height:44px;border-radius:12px;background:var(--km-deep);color:#fff;display:flex;align-items:center;justify-content:center")}>{V.icPanel}</span>
          <div><h1 style={css("font-size:21px;font-weight:800;margin:0")}>Ekosistem Admin Paneli</h1><div style={css("font-size:12.5px;color:var(--km-ink-500)")}>Platform yönetimi · tüm modüller genelinde</div></div>
        </div>
        <span style={css("font-size:12px;font-weight:700;color:var(--km-good);background:var(--km-good-soft);padding:6px 12px;border-radius:999px")}>● Yönetici oturumu</span>
      </div>

      <div style={css("display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px")}>
        { (V.adminStats || []).map(function(s, $index){ return (
          <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;padding:16px")}>
            <div style={css("font-size:12.5px;color:var(--km-ink-500);font-weight:600")}>{s.k}</div>
            <div style={css("font-size:26px;font-weight:800;color:var(--km-ink-900);margin-top:6px")} className="km-num">{s.v}</div>
            <div style={css("font-size:12px;font-weight:600;color:" + s.dc + ";margin-top:4px")}>{s.d}</div>
          </div>
        ); }) }
      </div>

      <div style={css("display:grid;grid-template-columns:1.4fr .9fr;gap:16px;margin-top:16px")} className="km-bkcols">
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;overflow:hidden")}>
          <div style={css("display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--km-line)")}><h2 style={css("font-size:15px;font-weight:700;margin:0")}>Platform durumu</h2><span style={css("font-size:12px;color:var(--km-ink-400)")}>{V.platformCount} modül</span></div>
          <div style={css("overflow-x:auto")}><table style={css("width:100%;border-collapse:collapse;min-width:460px")}>
            <thead><tr style={css("background:var(--km-paper-2)")}>
              <th style={css("text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--km-ink-400);padding:11px 16px")}>Modül</th>
              <th style={css("text-align:left;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--km-ink-400);padding:11px 16px")}>Durum</th>
              <th style={css("text-align:right;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--km-ink-400);padding:11px 16px")}>İlan</th>
              <th style={css("padding:11px 16px")}></th>
            </tr></thead>
            <tbody>{ (V.adminModules || []).map(function(m, $index){ return (
              <tr key={$index} className="km-rh" style={css("border-top:1px solid var(--km-line)")}>
                <td style={css("padding:12px 16px")}><span style={css("display:flex;align-items:center;gap:9px")}><span style={css("width:9px;height:9px;border-radius:999px;background:" + m.accent)}></span><span style={css("font-size:13.5px;font-weight:600;color:var(--km-ink-900)")}>{m.name}</span></span></td>
                <td style={css("padding:12px 16px")}><span style={css("font-size:11.5px;font-weight:700;color:" + m.sfg + ";background:" + m.sbg + ";padding:3px 10px;border-radius:999px;white-space:nowrap")}>{m.statusLabel}</span></td>
                <td style={css("padding:12px 16px;text-align:right;font-size:13px;color:var(--km-ink-600)")} className="km-num">{m.listings}</td>
                <td style={css("padding:12px 16px;text-align:right")}><button style={css("font-size:12px;font-weight:600;color:var(--km-deep);padding:5px 9px;border-radius:7px;background:var(--km-deep-soft)")}>Yönet</button></td>
              </tr>
            ); }) }</tbody>
          </table></div>
        </div>

        <div style={css("display:flex;flex-direction:column;gap:16px")}>
          <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:16px 18px")}>
            <div style={css("display:flex;align-items:center;justify-content:space-between;margin-bottom:12px")}><h2 style={css("font-size:15px;font-weight:700;margin:0")}>Onay bekleyen</h2><span style={css("font-size:11.5px;font-weight:700;color:var(--km-warn);background:var(--km-warn-soft);padding:3px 9px;border-radius:999px")}>{V.adminApprovals.length}</span></div>
            <div style={css("display:flex;flex-direction:column;gap:11px")}>
              { (V.adminApprovals || []).map(function(a, $index){ return (
                <div key={$index} style={css("border:1px solid var(--km-line);border-radius:11px;padding:11px 13px")}>
                  <div style={css("font-size:13.5px;font-weight:700;color:var(--km-ink-900)")}>{a.name}</div>
                  <div style={css("font-size:12px;color:var(--km-ink-500);margin-top:1px")}>{a.mod} · {a.city} · {a.date}</div>
                  <div style={css("display:flex;gap:7px;margin-top:9px")}><button style={css("flex:1;font-size:12px;font-weight:700;color:#fff;background:var(--km-good);border-radius:8px;padding:7px")}>Onayla</button><button style={css("flex:none;font-size:12px;font-weight:600;color:var(--km-ink-600);border:1px solid var(--km-line);border-radius:8px;padding:7px 12px")}>Reddet</button></div>
                </div>
              ); }) }
            </div>
          </div>
          <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:16px 18px")}>
            <h2 style={css("font-size:15px;font-weight:700;margin:0 0 12px")}>Son etkinlik</h2>
            <div style={css("display:flex;flex-direction:column;gap:0")}>
              { (V.adminActivity || []).map(function(a, $index){ return (
                <div key={$index} style={css("display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--km-line)")}>
                  <span style={css("flex:none;width:7px;height:7px;border-radius:999px;background:var(--km-deep-2);margin-top:6px")}></span>
                  <div style={css("flex:1")}><div style={css("font-size:13px;color:var(--km-ink-700);line-height:1.4")}>{a.t}</div><div style={css("font-size:11px;color:var(--km-ink-400);margin-top:1px")}>{a.d}</div></div>
                </div>
              ); }) }
            </div>
          </div>
        </div>
      </div>
      <p style={css("font-size:12px;color:var(--km-ink-400);margin:16px 0 0")}>Admin paneli demo amaçlıdır; gerçek onay/işlem yapılmaz.</p>
    </div>
  );
};

window.EKO.detail = function(V){
  return (
    <React.Fragment>
      <div style={css("max-width:980px;margin:0 auto;padding:14px 16px 120px")}>
        <nav aria-label="Konum" style={css("display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--km-ink-500);margin-bottom:12px;flex-wrap:wrap")}>
          <button onClick={V.goHome} style={css("color:var(--km-ink-500)")}>Ekosistem</button><span style={css("color:var(--km-ink-300)")}>/</span>
          <button onClick={V.goLanding} style={css("color:var(--km-ink-500)")}>{V.activeModule.name}</button><span style={css("color:var(--km-ink-300)")}>/</span>
          <button onClick={V.openList} style={css("color:var(--km-ink-500)")}>{V.L.listTitle}</button><span style={css("color:var(--km-ink-300)")}>/</span>
          <span style={css("color:var(--km-ink-700);font-weight:600")}>{V.detail.title}</span>
        </nav>

        <div style={css("display:flex;align-items:start;justify-content:space-between;gap:14px;flex-wrap:wrap")}>
          <div>
            <h1 style={css("font-size:26px;font-weight:800;letter-spacing:-.01em;margin:0")}>{V.detail.title}</h1>
            <div style={css("display:flex;align-items:center;gap:10px;margin-top:7px;font-size:13.5px;color:var(--km-ink-500);flex-wrap:wrap")}>
              <span>{V.detail.place}</span>
              <span style={css("display:inline-flex;align-items:center;gap:4px;color:var(--km-warn)")}>{V.icStar} <b style={css("color:var(--km-ink-700)")} className="km-num">{V.detail.rating}</b> ({V.detail.reviews} değerlendirme)</span>
            </div>
          </div>
          <span style={css("display:inline-flex;align-items:center;gap:5px;background:" + V.detail.badgeBg + ";color:" + V.detail.badgeFg + ";font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px")}>{V.detail.badgeIcon}{V.detail.badge}</span>
        </div>

        <ImageSlot src={V.detail.coverSrc || V.activeModule.coverSrc} fit="cover" placeholder={V.detail.ph} style={css("display:block;width:100%;height:230px;margin-top:16px")} />

        <div style={css("display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:16px")}>
          { (V.detail.specs || []).map(function(s, $index){ return (
            <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:12px;padding:13px 14px")}>
              <div style={css("font-size:11.5px;color:var(--km-ink-400);font-weight:600")}>{s.k}</div>
              <div style={css("font-size:15px;font-weight:700;color:var(--km-ink-900);margin-top:3px")} className="km-num">{s.v}</div>
            </div>
          ); }) }
        </div>

        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px;margin-top:16px")}>
          <h2 style={css("font-size:16px;font-weight:700;margin:0 0 8px")}>Hakkında</h2>
          <p style={css("font-size:14px;color:var(--km-ink-600);line-height:1.6;margin:0")}>{V.detail.about}</p>
          <div style={css("font-size:13px;font-weight:700;color:var(--km-ink-700);margin:16px 0 9px")}>Olanaklar & hizmetler</div>
          <div style={css("display:flex;flex-wrap:wrap;gap:8px")}>
            { (V.detail.amenities || []).map(function(a, $index){ return (<span key={$index} style={css("display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--km-ink-700);background:var(--km-paper-2);border:1px solid var(--km-line);padding:7px 11px;border-radius:9px")}>{V.icCheck} {a}</span>); }) }
          </div>
        </div>

        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px;margin-top:16px")}>
          <h2 style={css("font-size:16px;font-weight:700;margin:0 0 12px")}>Fiyatlar</h2>
          <div style={css("display:flex;flex-direction:column;gap:1px;background:var(--km-line);border:1px solid var(--km-line);border-radius:10px;overflow:hidden")}>
            { (V.detail.prices || []).map(function(p, $index){ return (
              <div key={$index} className="km-rh" style={css("display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--km-paper);padding:12px 14px")}>
                <span style={css("font-size:13.5px;color:var(--km-ink-700)")}>{p.k}</span>
                <span style={css("font-size:14px;font-weight:700;color:var(--km-ink-900)")} className="km-num">{p.v}</span>
              </div>
            ); }) }
          </div>
          <p style={css("font-size:12px;color:var(--km-ink-400);margin:11px 0 0;line-height:1.5")}>{V.detail.priceNote}</p>
        </div>

        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px;margin-top:16px")}>
          <div style={css("display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px")}>
            <h2 style={css("font-size:16px;font-weight:700;margin:0")}>Değerlendirmeler</h2>
            <span style={css("display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--km-ink-800,#1F2D43)")}><span style={css("color:var(--km-accent);display:flex")}>{V.icStar}</span>{V.detail.rating} · {V.detail.reviews} yorum</span>
          </div>
          <div style={css("display:flex;flex-direction:column;gap:12px")}>
            { (V.detail.reviewList || []).map(function(rv, $index){ return (
              <div key={$index} style={css("border-top:1px solid var(--km-line);padding-top:12px")}>
                <div style={css("display:flex;align-items:center;gap:9px")}>
                  <span style={css("width:30px;height:30px;border-radius:999px;background:var(--km-deep-soft);color:var(--km-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700")}>{rv.ini}</span>
                  <span style={css("font-size:13.5px;font-weight:600;color:var(--km-ink-900)")}>{rv.name}</span>
                  <span style={css("font-size:12px;color:var(--km-ink-400)")}>· {rv.date}</span>
                </div>
                <p style={css("font-size:13.5px;color:var(--km-ink-600);line-height:1.55;margin:8px 0 0")}>{rv.text}</p>
              </div>
            ); }) }
          </div>
        </div>

        <div style={css("background:var(--km-deep-soft);border:1px solid #D2E2EF;border-radius:14px;padding:18px 18px 16px;margin-top:16px")}>
          <div style={css("font-size:13px;font-weight:700;color:var(--km-deep);margin-bottom:11px")}>Bu yolculukta sıradaki adım</div>
          <div style={css("display:flex;flex-wrap:wrap;gap:10px")}>
            { (V.L.cross || []).map(function(x, $index){ return (
              <button key={$index} onClick={x.open} className="km-ch" style={css("text-align:left;flex:1;min-width:230px;background:var(--km-paper);border:1px solid var(--km-line);border-radius:11px;padding:12px 14px;display:flex;align-items:center;gap:11px")}>
                <span style={css("flex:none;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:" + x.accentSoft + ";color:" + x.accent)}>{x.iconEl}</span>
                <span style={css("flex:1")}><span style={css("display:block;font-size:13.5px;font-weight:700;color:var(--km-ink-900)")}>{x.name}</span><span style={css("display:block;font-size:12px;color:var(--km-ink-500);line-height:1.35;margin-top:1px")}>{x.note}</span></span>
                <span style={css("color:var(--km-ink-300);display:flex")}>{V.icArrow}</span>
              </button>
            ); }) }
          </div>
        </div>
      </div>

      <div style={css("position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--km-paper);border-top:1px solid var(--km-line);box-shadow:0 -4px 20px rgba(15,27,45,.08);padding:12px 16px")}>
        <div style={css("max-width:980px;margin:0 auto;display:flex;align-items:center;gap:12px")}>
          <div style={css("flex:1;min-width:0")}>
            <div style={css("font-size:12px;color:var(--km-ink-500)")}>{V.detail.ctaSub}</div>
            <div style={css("font-size:16px;font-weight:800;color:var(--km-ink-900)")} className="km-num">{V.detail.price}</div>
          </div>
          <button onClick={V.openBooking} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:15px;padding:13px 22px;border-radius:11px;white-space:nowrap")}>{V.detail.ctaLabel}</button>
        </div>
      </div>
    </React.Fragment>
  );
};

window.EKO.booking = function(V){
  return (
    <div style={css("max-width:640px;margin:0 auto;padding:22px 16px 96px")}>

      { (V.bookingPending) ? (<>
        <button onClick={V.openList} style={css("display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--km-ink-500);margin-bottom:14px")}>← Listeye dön</button>
        <div style={css("font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:" + V.activeModule.accent)}>{V.detail.ctaSub}</div>
        <h1 style={css("font-size:22px;font-weight:800;margin:6px 0 0")}>{V.detail.title} · talep oluştur</h1>

        <div style={css("display:flex;flex-wrap:wrap;gap:16px;margin:20px 0 22px")}>
          { (V.bookingSteps || []).map(function(st, $index){ return (
            <div key={$index} style={css("display:flex;align-items:center;gap:8px")}>
              <span style={css("width:28px;height:28px;border-radius:999px;background:" + st.bg + ";color:" + st.fg + ";display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700")}>{st.n}</span>
              <span style={css("font-size:12.5px;font-weight:600;color:var(--km-ink-600)")}>{st.label}</span>
            </div>
          ); }) }
        </div>

        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:20px")}>
          <div style={css("display:" + V.step1Display)}>
            <div style={css("display:flex;flex-direction:column;gap:16px")}>
              <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")}>Tercih edilen tarih</span><input type="date" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:15px;background:var(--km-paper);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")}>Kişi / adet</span><input type="number" min="1" defaultValue="2" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:15px;background:var(--km-paper);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")}>Kısa not (opsiyonel)</span><input type="text" placeholder="Örn. tekne boyu, özel istek…" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:15px;background:var(--km-paper);outline:none")}/></label>
            </div>
          </div>
          <div style={css("display:" + V.step2Display)}>
            <div style={css("display:flex;flex-direction:column;gap:16px")}>
              <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 type="text" placeholder="Adınız Soyadınız" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:15px;background:var(--km-paper);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 type="tel" placeholder="05XX XXX XX XX" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:15px;background:var(--km-paper);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")}>E-posta</span><input type="email" placeholder="ornek@eposta.com" style={css("width:100%;border:1px solid var(--km-line-strong);border-radius:10px;padding:11px 12px;font-size:15px;background:var(--km-paper);outline:none")}/></label>
            </div>
          </div>
          <div style={css("display:" + V.step3Display)}>
            <div style={css("font-size:15px;font-weight:700;color:var(--km-ink-900)")}>Özet</div>
            <p style={css("font-size:13.5px;color:var(--km-ink-600);line-height:1.55;margin:8px 0 0")}><b style={css("color:var(--km-ink-900)")}>{V.detail.title}</b> için talebiniz hazır. Gönderdikten sonra sağlayıcı müsaitliği teyit edip sizinle iletişime geçecek.</p>
            <div style={css("display:flex;align-items:center;gap:8px;margin-top:14px;background:var(--km-deep-soft);border-radius:10px;padding:11px 13px;font-size:12.5px;color:var(--km-deep)")}>{V.icClock} {V.detail.priceNote}</div>
          </div>

          <div style={css("display:flex;gap:10px;margin-top:20px")}>
            { (V.canBack) ? (<><button onClick={V.stepBack} style={css("background:var(--km-paper);border:1px solid var(--km-line-strong);color:var(--km-ink-700);font-weight:600;font-size:14px;padding:12px 20px;border-radius:11px")}>Geri</button></>) : null }
            { (V.canNext) ? (<><button onClick={V.stepNext} style={css("background:var(--km-deep);color:#fff;font-weight:700;font-size:14px;padding:12px 22px;border-radius:11px;margin-left:auto")}>İleri</button></>) : null }
            { (V.isLastStep) ? (<><button onClick={V.submitBooking} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:15px;padding:12px 24px;border-radius:11px;margin-left:auto")}>Talep gönder</button></>) : null }
          </div>
        </div>
        <p style={css("font-size:12px;color:var(--km-ink-400);margin:14px 2px 0")}>Bu bir talep akışıdır; ödeme alınmaz.</p>
      </>) : null }

      { (V.bookingDone) ? (<>
        <div style={css("text-align:center;padding:26px 0 0")}>
          <div style={css("width:68px;height:68px;border-radius:999px;background:var(--km-good-soft);color:var(--km-good);display:flex;align-items:center;justify-content:center;margin:0 auto")}>{V.icBig}</div>
          <h1 style={css("font-size:24px;font-weight:800;margin:18px 0 0")}>Talebiniz alındı</h1>
          <p style={css("font-size:15px;color:var(--km-ink-600);line-height:1.55;margin:10px 0 0")}>{V.detail.title} için talebiniz iletildi. Sağlayıcı müsaitliği teyit edip en kısa sürede sizinle iletişime geçecek.</p>
          <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;padding:18px;margin:22px 0 0")}>
            <div style={css("font-size:12px;color:var(--km-ink-400);font-weight:600")}>Talep referansınız</div>
            <div style={css("font-size:24px;font-weight:800;color:var(--km-deep);letter-spacing:.04em;margin-top:5px;font-family:var(--font-mono)")}>{V.bookingRef}</div>
            <div style={css("font-size:12px;color:var(--km-ink-500);margin-top:8px")}>Bu referansı "Taleplerim" panelinde takip edebilirsiniz.</div>
          </div>
          <div style={css("display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px")}>
            <button onClick={V.goPanel} style={css("background:var(--km-deep);color:#fff;font-weight:700;font-size:14px;padding:12px 20px;border-radius:11px")}>Panele git</button>
            <button onClick={V.goLanding} style={css("background:var(--km-paper);border:1px solid var(--km-line-strong);color:var(--km-ink-700);font-weight:600;font-size:14px;padding:12px 20px;border-radius:11px")}>{V.activeModule.name}'a dön</button>
          </div>
          <p style={css("font-size:12px;color:var(--km-ink-400);margin:18px 0 0")}>Bu bir rezervasyon talebidir; ödeme alınmaz.</p>
        </div>
      </>) : null }

    </div>
  );
};

window.EKO.panel = function(V){
  return (
    <div style={css("max-width:1100px;margin:0 auto;padding:18px 16px 48px")}>
      <div style={css("display:flex;align-items:center;gap:11px;margin-bottom:4px")}>
        <span style={css("width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:" + V.activeModule.accentSoft + ";color:" + V.activeModule.accent)}>{V.activeModule.iconEl}</span>
        <div>
          <h1 style={css("font-size:21px;font-weight:800;margin:0")}>{V.activeModule.name} · İşletme Paneli</h1>
          <div style={css("font-size:12.5px;color:var(--km-ink-500)")}>Son güncelleme: bugün 14:30 · Demo veriler</div>
        </div>
      </div>

      <nav aria-label="Yönetim bölümleri" style={css("display:flex;gap:8px;overflow-x:auto;margin-top:16px;padding-bottom:2px")}>
        { (V.panelTabs || []).map(function(pt, $index){ return (<button key={$index} onClick={pt.set} style={css("flex:none;font-size:12.5px;font-weight:600;color:" + pt.fg + ";background:" + pt.bg + ";border:1px solid " + pt.bd + ";border-radius:999px;padding:8px 14px;white-space:nowrap")}>{pt.label}</button>); }) }
      </nav>
      { (V.pTabGenel) ? (<>
      <div style={css("display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:16px")}>
        { (V.panel.stats || []).map(function(s, $index){ return (
          <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;padding:16px")}>
            <div style={css("font-size:12.5px;color:var(--km-ink-500);font-weight:600")}>{s.k}</div>
            <div style={css("font-size:26px;font-weight:800;color:var(--km-ink-900);margin-top:6px")} className="km-num">{s.v}</div>
            <div style={css("font-size:12px;font-weight:600;color:" + s.deltaColor + ";margin-top:4px")}>{s.delta}</div>
          </div>
        ); }) }
      </div>
      </>) : null }

      { (V.pTabGenelOrTalep) ? (<>
      <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;margin-top:18px;overflow:hidden")}>
        <div style={css("display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--km-line)")}>
          <h2 style={css("font-size:15px;font-weight:700;margin:0")}>{V.panel.tableTitle}</h2>
          <span style={css("font-size:12px;color:var(--km-ink-400)")}>{V.panel.rows.length} kayıt</span>
        </div>
        <div style={css("overflow-x:auto")}>
          <table style={css("width:100%;border-collapse:collapse;min-width:560px")}>
            <thead>
              <tr style={css("background:var(--km-paper-2)")}>
                { (V.panel.cols || []).map(function(c, $index){ return (<th key={$index} style={css("text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--km-ink-400);padding:11px 16px;white-space:nowrap")}>{c}</th>); }) }
                <th style={css("padding:11px 16px")}></th>
              </tr>
            </thead>
            <tbody>
              { (V.panel.rows || []).map(function(r, $index){ return (
                <tr key={$index} className="km-rh" style={css("border-top:1px solid var(--km-line)")}>
                  <td style={css("padding:13px 16px;font-size:13.5px;font-weight:600;color:var(--km-ink-900);white-space:nowrap")}>{r.ref}</td>
                  <td style={css("padding:13px 16px;font-size:13.5px;color:var(--km-ink-700)")}>{r.subject}</td>
                  <td style={css("padding:13px 16px;font-size:13.5px;color:var(--km-ink-600);white-space:nowrap")} className="km-num">{r.amount}</td>
                  <td style={css("padding:13px 16px;white-space:nowrap")}><span style={css("display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:" + r.statusFg + ";background:" + r.statusBg + ";padding:4px 10px;border-radius:999px")}>{r.status}</span></td>
                  <td style={css("padding:13px 16px;font-size:12.5px;color:var(--km-ink-400);white-space:nowrap")}>{r.date}</td>
                  <td style={css("padding:13px 16px;text-align:right")}><button onClick={r.open} style={css("font-size:12px;font-weight:700;color:var(--km-deep);background:var(--km-deep-soft);padding:6px 12px;border-radius:8px")}>Yönet</button></td>
                </tr>
              ); }) }
            </tbody>
          </table>
        </div>
      </div>
      </>) : null }

      { (V.pTabIlan) ? (<>
      <div style={css("display:flex;flex-direction:column;gap:12px;margin-top:18px")}>
        <div style={css("display:flex;align-items:center;justify-content:space-between;gap:12px")}>
          <h2 style={css("font-size:15px;font-weight:700;margin:0")}>İlanlar & içerik</h2>
          <button style={css("font-size:12.5px;font-weight:700;color:#fff;background:" + V.activeModule.accent + ";border-radius:9px;padding:8px 14px")}>+ Yeni ilan</button>
        </div>
        { (V.panelListings || []).map(function(li, $index){ return (
          <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:12px")}>
            <span style={css("flex:none;width:44px;height:44px;border-radius:10px;background:" + V.activeModule.accentSoft + ";color:" + V.activeModule.accent + ";display:flex;align-items:center;justify-content:center")}>{V.activeModule.iconEl}</span>
            <div style={css("flex:1;min-width:0")}><div style={css("font-size:14px;font-weight:700;color:var(--km-ink-900)")}>{li.title}</div><div style={css("font-size:12.5px;color:var(--km-ink-500);margin-top:2px")}>{li.sub}</div></div>
            <span style={css("font-size:12px;font-weight:700;color:" + li.fg + ";background:" + li.bg + ";padding:4px 10px;border-radius:999px;white-space:nowrap")}>{li.status}</span>
            <button style={css("font-size:12.5px;font-weight:600;color:var(--km-deep);border:1px solid var(--km-line);border-radius:8px;padding:7px 12px;white-space:nowrap")}>Düzenle</button>
          </div>
        ); }) }
      </div>
      </>) : null }

      { (V.pTabFiyat) ? (<>
      <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;margin-top:18px;padding:18px")}>
        <div style={css("display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px")}>
          <h2 style={css("font-size:15px;font-weight:700;margin:0")}>Fiyatlandırma</h2>
          <button style={css("font-size:12.5px;font-weight:700;color:#fff;background:" + V.activeModule.accent + ";border-radius:9px;padding:8px 14px")}>Değişiklikleri kaydet</button>
        </div>
        <div style={css("display:flex;flex-direction:column;gap:10px")}>
          { (V.panelPricing || []).map(function(pp, $index){ return (
            <div key={$index} style={css("display:flex;align-items:center;gap:12px;border:1px solid var(--km-line);border-radius:11px;padding:11px 14px")}>
              <div style={css("flex:1;min-width:0")}><div style={css("font-size:13.5px;font-weight:600;color:var(--km-ink-900)")}>{pp.name}</div><div style={css("font-size:11.5px;color:var(--km-ink-400)")}>{pp.unit}</div></div>
              <div style={css("display:flex;align-items:center;gap:8px;border:1px solid var(--km-line-strong);border-radius:9px;padding:6px 12px;background:var(--km-paper-2)")}><span style={css("font-size:14px;font-weight:700;color:var(--km-ink-900)")} className="km-num">{pp.price}</span></div>
            </div>
          ); }) }
        </div>
        <p style={css("font-size:12px;color:var(--km-ink-400);margin:12px 0 0")}>Fiyatlar demo amaçlıdır; yayınlanınca ilan kartlarında görünür.</p>
      </div>
      </>) : null }

      { (V.pTabYorum) ? (<>
      <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;margin-top:18px;padding:18px")}>
        <h2 style={css("font-size:15px;font-weight:700;margin:0 0 12px")}>Müşteri yorumları</h2>
        { (V.panelReviews || []).map(function(rv, $index){ return (
          <div key={$index} style={css("border-top:1px solid var(--km-line);padding:13px 0")}>
            <div style={css("display:flex;align-items:center;gap:9px")}>
              <span style={css("width:30px;height:30px;border-radius:999px;background:var(--km-deep-soft);color:var(--km-deep);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700")}>{rv.ini}</span>
              <span style={css("font-size:13.5px;font-weight:600;color:var(--km-ink-900)")}>{rv.name}</span>
              <span style={css("font-size:12px;color:var(--km-ink-400)")}>· {rv.date}</span>
              <span style={css("margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;color:var(--km-ink-800,#1F2D43)")}><span style={css("color:var(--km-accent);display:flex")}>{V.icStar}</span>{rv.rating}</span>
            </div>
            <p style={css("font-size:13.5px;color:var(--km-ink-600);line-height:1.5;margin:8px 0 0")}>{rv.text}</p>
            { (rv.notReplied) ? (<>
            <button onClick={rv.toggle} style={css("font-size:12px;font-weight:700;color:var(--km-deep);margin-top:8px;display:inline-flex;align-items:center;gap:5px")}>↩ Yanıtla</button>
            { (rv.open) ? (<>
            <div style={css("display:flex;gap:8px;margin-top:9px")}>
              <input placeholder="İşletme yanıtını yaz…" style={css("flex:1;border:1px solid var(--km-line-strong);border-radius:9px;padding:9px 11px;font-size:13px;outline:none")}/>
              <button onClick={rv.send} style={css("flex:none;background:var(--km-deep);color:#fff;font-weight:700;font-size:13px;padding:0 14px;border-radius:9px")}>Gönder</button>
            </div>
            </>) : null }
            </>) : null }
            { (rv.replied) ? (<>
            <div style={css("margin-top:9px;background:var(--km-deep-soft);border-radius:9px;padding:10px 12px")}>
              <div style={css("font-size:11px;font-weight:700;color:var(--km-deep);text-transform:uppercase;letter-spacing:.04em")}>İşletme yanıtı</div>
              <div style={css("font-size:12.5px;color:var(--km-ink-700);line-height:1.5;margin-top:3px")}>Değerli yorumunuz için teşekkür ederiz; memnuniyetiniz bizim için çok önemli. 🙏</div>
            </div>
            </>) : null }
          </div>
        ); }) }
      </div>
      </>) : null }

      { (V.pTabAyar) ? (<>
      <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;margin-top:18px;padding:18px")}>
        <h2 style={css("font-size:15px;font-weight:700;margin:0 0 14px")}>İşletme ayarları</h2>
        <div style={css("display:grid;grid-template-columns:1fr 1fr;gap:12px")}>
          <label style={css("display:block;grid-column:1/-1")}><span style={css("display:block;font-size:12px;font-weight:600;color:var(--km-ink-600);margin-bottom:5px")}>İşletme adı</span><input defaultValue={V.activeModule.name} 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:12px;font-weight:600;color:var(--km-ink-600);margin-bottom:5px")}>İletişim e-postası</span><input 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:12px;font-weight:600;color:var(--km-ink-600);margin-bottom:5px")}>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>
          <label style={css("display:block;grid-column:1/-1")}><span style={css("display:block;font-size:12px;font-weight:600;color:var(--km-ink-600);margin-bottom:5px")}>İşletme açıklaması</span><textarea rows="3" placeholder="Kısa tanıtım…" 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")}/></label>
        </div>
        <div style={css("display:flex;justify-content:flex-end;margin-top:14px")}><button style={css("font-size:13.5px;font-weight:700;color:#fff;background:" + V.activeModule.accent + ";border-radius:10px;padding:11px 20px")}>Kaydet</button></div>
      </div>
      </>) : null }
      <p style={css("font-size:12px;color:var(--km-ink-400);margin:14px 0 0")}>Panel demo amaçlıdır; gerçek tahsilat veya işlem yapılmaz.</p>
    </div>
  );
};
