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

      <section style={css("max-width:1100px;margin:0 auto;padding:18px 16px 8px")}>
        <div className="km-hero" style={css("background:linear-gradient(155deg," + V.activeModule.accentSoft + ",var(--km-paper));border:1px solid var(--km-line);border-radius:18px;padding:26px;overflow:hidden;align-items:center")}>
          <div style={css("min-width:0")}>
            <div style={css("font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:" + V.activeModule.accent + ";animation:kmrise .5s ease both")}>{V.L.eyebrow}</div>
            { (V.hasModeSwitch) ? (<>
              <div style={css("display:inline-flex;background:var(--km-paper-2);border:1px solid var(--km-line);border-radius:11px;padding:3px;margin-top:12px;gap:2px")}>
                { (V.yachtModes || []).map(function(mo, $index){ return (<button key={$index} onClick={mo.set} style={css("font-size:13px;font-weight:700;color:" + mo.fg + ";background:" + mo.bg + ";border-radius:8px;padding:8px 16px")}>{mo.label}</button>); }) }
              </div>
              <div style={css("font-size:12.5px;color:var(--km-ink-500);margin-top:8px")}>{V.yachtModeNote}</div>
            </>) : null }
            <h1 style={css("font-size:clamp(24px,4.4vw,34px);line-height:1.12;font-weight:800;letter-spacing:-.02em;margin:10px 0 0;max-width:680px;text-wrap:balance;animation:kmrise .6s ease .08s both")}>{V.L.h1}</h1>
            <p style={css("font-size:16px;color:var(--km-ink-600);max-width:600px;margin:12px 0 0;line-height:1.55;animation:kmrise .6s ease .16s both")}>{V.L.sub}</p>
            <div style={css("display:flex;align-items:center;gap:9px;background:var(--km-paper);border:1px solid var(--km-line-strong);border-radius:12px;padding:0 12px;height:48px;max-width:520px;margin-top:20px;animation:kmrise .6s ease .24s both")}>
              <span style={css("color:var(--km-ink-400);display:inline-flex")}>{V.icSearch}</span>
              <input value={V.query} onInput={V.onQuery} placeholder={V.activeModule.ph} aria-label="Ara" style={css("flex:1;border:0;background:none;outline:none;font-size:15px;min-width:0")}/>
              <button onClick={V.openList} style={css("font-size:13px;font-weight:700;color:#fff;background:" + V.activeModule.accent + ";padding:9px 16px;border-radius:9px")}>{V.L.searchCta}</button>
            </div>
            { (V.activeModule.live) ? (<>
              <div style={css("margin-top:16px;display:inline-flex;align-items:center;gap:9px;background:var(--km-good-soft);color:var(--km-good);font-size:13px;font-weight:600;padding:8px 13px;border-radius:10px")}>{V.icCheck} Bu ürün canlıda — kolaymarin.com. Burası ekosistem önizlemesidir.</div>
            </>) : null }
          </div>
          <div style={css("position:relative;border-radius:14px;overflow:hidden;min-height:236px;background:" + V.activeModule.accent + ";animation:kmrise .7s ease .2s both")}>
            <ImageSlot src={V.activeModule.coverSrc} fit="cover" placeholder="Kapak görseli bırak" style={css("position:absolute;inset:0;width:100%;height:100%;display:block")} />
            <div aria-hidden="true" style={css("position:absolute;left:14px;bottom:12px;display:inline-flex;align-items:center;gap:7px;background:rgba(6,20,35,.55);color:#fff;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;padding:4px 9px;border-radius:7px;pointer-events:none")}><span style={css("display:flex;width:15px;height:15px")}>{V.activeModule.iconEl}</span>{V.activeModule.name}</div>
          </div>
        </div>
      </section>

      <section style={css("max-width:1100px;margin:0 auto;padding:18px 16px 0")}>
        <div style={css("font-size:13px;font-weight:700;color:var(--km-ink-600);margin-bottom:11px")}>{V.L.catsTitle}</div>
        <div style={css("display:flex;flex-wrap:wrap;gap:9px")}>
          { (V.L.cats || []).map(function(c, $index){ return (
            <button key={$index} onClick={V.openList} style={css("display:inline-flex;align-items:center;gap:7px;background:var(--km-paper);border:1px solid var(--km-line);border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--km-ink-700)")}><span style={css("width:7px;height:7px;border-radius:999px;background:" + V.activeModule.accent)}></span>{c}</button>
          ); }) }
        </div>
      </section>

      <section style={css("max-width:1100px;margin:0 auto;padding:26px 16px 0")}>
        <div style={css("background:linear-gradient(160deg,#06294A,#0A3D62 60%,#1F6FB2);border-radius:18px;padding:24px 26px;color:#fff;overflow:hidden;position:relative")}>
          <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap")}>
            <div><div style={css("font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--km-accent)")}>Türkiye · denizcilik yoğunluğu</div><h2 style={css("font-size:clamp(19px,2.4vw,24px);font-weight:800;margin:8px 0 0;letter-spacing:-.01em")}>Hangi kıyıda ne kadar ilan var?</h2></div>
            <div style={css("display:flex;flex-direction:column;align-items:flex-end;gap:7px")}>
              <span style={css("display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.14);border:1px solid rgba(34,197,94,.35);border-radius:999px;padding:5px 12px")}><span style={css("width:8px;height:8px;border-radius:999px;background:#22C55E;animation:kmpulse 1.8s ease-out infinite")}></span><span className="km-num" style={css("font-size:13px;font-weight:800;color:#7ff0ac")}>{V.liveCount}</span><span style={css("font-size:11.5px;color:#A8C4DC")}>şu an arıyor</span></span>
              <span style={css("font-size:12.5px;color:#A8C4DC")}>Şehre tıkla → o bölgede ara</span>
            </div>
          </div>
          <div style={css("height:26px;overflow:hidden;margin-top:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:9px")}>
            <div style={css("display:flex;align-items:center;gap:8px;animation:kmtickerin .4s ease")} key={V.tickerKey}><span style={css("width:6px;height:6px;border-radius:999px;background:var(--km-accent);flex:none")}></span><span style={css("font-size:12.5px;color:#C3D7EE")}><b style={css("color:#fff")}>{V.tickerCity}</b> · "{V.tickerQuery}" <span style={css("color:#7E98B4")}>{V.tickerAgo}</span></span></div>
          </div>
          <div style={css("display:flex;gap:7px;overflow-x:auto;margin-top:14px;padding-bottom:4px;-webkit-overflow-scrolling:touch")}>
            { (V.mapCats || []).map(function(c, $index){ return (<button key={$index} onClick={c.set} style={css("flex:none;white-space:nowrap;font-size:12px;font-weight:600;color:" + c.fg + ";background:" + c.bg + ";border:1px solid " + c.bd + ";border-radius:999px;padding:6px 13px;cursor:pointer;transition:all .15s")}>{c.label}</button>); }) }
          </div>
          <div className="km-mapgrid" style={css("display:grid;grid-template-columns:1.5fr .8fr;gap:20px;align-items:center;margin-top:18px")}>
            <div style={css("position:relative")}>
              <svg viewBox="0 0 1007.478 527.323" style={css("width:100%;height:auto;display:block")} role="img" aria-label="Türkiye il bazlı denizcilik ısı haritası">
                { (V.trProvinces || []).map(function(p, $index){ return (
                  <path key={$index} className="km-prov" d={p.d} fill={p.fill} stroke={p.stroke} strokeWidth="0.6" style={css("cursor:pointer;transition:fill .15s,filter .15s,stroke-width .15s;transform-box:fill-box;transform-origin:center")} onClick={p.open}><title>{p.title}</title></path>
                ); }) }
              </svg>
              <div key={V.tickerKey} style={css("position:absolute;left:" + V.tickerX + ";top:" + V.tickerY + ";transform:translate(-50%,-100%);pointer-events:none;z-index:6;animation:kmpindrop .45s cubic-bezier(.2,.85,.3,1) both")}>
                <div style={css("display:flex;align-items:center;gap:6px;background:#fff;color:#0A3D62;font-size:11px;font-weight:700;padding:5px 9px;border-radius:9px;box-shadow:0 8px 20px rgba(0,20,40,.4);white-space:nowrap")}><span style={css("opacity:.7")}>🔎</span><span><b style={css("color:var(--km-accent-2,#D88B00)")}>{V.tickerCity}</b> · "{V.tickerQuery}"</span></div>
                <div style={css("width:9px;height:9px;background:#fff;transform:rotate(45deg);margin:-4px auto 0;box-shadow:3px 3px 5px rgba(0,20,40,.15)")}></div>
                <div style={css("width:11px;height:11px;border-radius:999px;background:var(--km-accent);border:2px solid #fff;margin:3px auto 0;animation:kmpinpulse 1.8s ease-out infinite")}></div>
              </div>
            </div>
            <div style={css("display:flex;flex-direction:column;gap:9px")}>
              { (V.heatRank || []).map(function(h, $index){ return (
                <button key={$index} onClick={h.open} style={css("position:relative;display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:11px;padding:9px 12px;text-align:left;cursor:pointer;overflow:hidden;animation:kmrowin .4s ease both;animation-delay:" + h.delay)}>
                  <span aria-hidden="true" style={css("position:absolute;left:0;top:0;bottom:0;width:" + h.barPct + ";background:linear-gradient(90deg,rgba(242,163,16,.22),rgba(242,163,16,.03))")}></span>
                  <span style={css("position:relative;width:10px;height:10px;border-radius:999px;background:" + h.dot + ";flex:none")}></span>
                  <span style={css("position:relative;flex:1;font-size:13.5px;font-weight:600")}>{h.name}</span>
                  <span className="km-num" style={css("position:relative;font-size:13px;font-weight:700;color:var(--km-accent)")}>{h.count}</span>
                </button>
              ); }) }
              <div style={css("display:flex;align-items:center;gap:8px;margin-top:4px;font-size:11px;color:#8FAAC6")}><span>Az</span><span style={css("flex:1;height:8px;border-radius:6px;background:linear-gradient(90deg,#DCEBF5,#F2A310)")}></span><span>Çok</span></div>
            </div>
          </div>
        </div>
      </section>

      { (V.hasPriceIndex) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:26px 16px 0")}>
        <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:baseline;justify-content:space-between;gap:10px;padding:15px 18px;border-bottom:1px solid var(--km-line)")}>
            <h2 style={css("font-size:16px;font-weight:700;margin:0")}>{V.priceIndex.title}</h2>
            <span style={css("display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--km-ink-400)")}>{V.icClock} {V.priceIndex.fresh}</span>
          </div>
          { (V.priceIndex.rows || []).map(function(r, $index){ return (
            <div key={$index} className="km-rh" style={css("display:flex;align-items:center;gap:12px;padding:11px 18px;border-top:1px solid var(--km-line)")}>
              <span style={css("flex:1;min-width:0;font-size:14px;font-weight:600;color:var(--km-ink-900)")}>{r.name}</span>
              <span aria-hidden="true" style={css("flex:none;display:flex;align-items:flex-end;gap:2px;height:30px;width:72px")}>
                { (r.bars || []).map(function(b, $index){ return (<span key={$index} style={css("flex:1;background:" + V.activeModule.accent + ";opacity:.55;border-radius:1px;height:" + b.h)}></span>); }) }
              </span>
              <span style={css("flex:none;width:86px;text-align:right;font-size:15px;font-weight:800;color:var(--km-ink-900)")} className="km-num">{r.price}</span>
              <span style={css("flex:none;width:56px;text-align:right;font-size:12.5px;font-weight:700;color:" + r.dcolor)}>{r.delta}</span>
            </div>
          ); }) }
          <div style={css("padding:11px 18px;font-size:12px;color:var(--km-ink-400)")}>{V.priceIndex.note} · birim {V.priceIndex.unit}</div>
        </div>
      </section>
      </>) : null }
      <section style={css("max-width:1100px;margin:0 auto;padding:26px 16px 0")}>
        <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px")}>
          <h2 style={css("font-size:18px;font-weight:700;margin:0")}>{V.L.featuredTitle}</h2>
          <button onClick={V.openList} style={css("font-size:13px;font-weight:600;color:" + V.activeModule.accent + ";display:inline-flex;align-items:center;gap:5px")}>Tümünü gör {V.icArrow}</button>
        </div>
        <div className="km-grid6">
          { (V.L.featured || []).map(function(f, $index){ return (
            <button key={$index} onClick={V.openList} className="km-ch" style={css("text-align:left;background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column")}>
              <span onClick={V.stop} style={css("display:block;height:128px")}><ImageSlot src={V.activeModule.coverSrc} fit="cover" placeholder={f.ph} style={css("width:100%;height:100%;display:block")} /></span>
              <span style={css("padding:13px 14px 15px")}>
                <span style={css("display:flex;align-items:center;justify-content:space-between;gap:8px")}>
                  <span style={css("font-size:14.5px;font-weight:700;color:var(--km-ink-900)")}>{f.title}</span>
                  <span style={css("font-size:13px;font-weight:700;color:" + V.activeModule.accent)} className="km-num">{f.price}</span>
                </span>
                <span style={css("display:block;font-size:12.5px;color:var(--km-ink-500);margin-top:4px")}>{f.sub}</span>
                <span style={css("display:flex;align-items:center;gap:6px;margin-top:9px;font-size:11.5px;color:var(--km-ink-400)")}>{V.icClock} {f.fresh}</span>
              </span>
            </button>
          ); }) }
        </div>
      </section>

      { (V.isAcademy) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px")}>
          <h2 style={css("font-size:18px;font-weight:700;margin:0")}>Örnek müfredat · Amatör Denizci Belgesi</h2>
          <span style={css("display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--km-good);background:var(--km-good-soft);padding:5px 11px;border-radius:999px")}>{V.icCheck} Sertifikalı</span>
        </div>
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px")}>
          <div style={css("display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px")}>
            { (V.academySyllabus || []).map(function(c, $index){ return (<span key={$index} style={css("display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--km-ink-700);padding:6px 0")}><span style={css("flex:none;width:22px;height:22px;border-radius:999px;background:" + V.activeModule.accentSoft + ";color:" + V.activeModule.accent + ";display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700")}>{c.n}</span>{c.t}</span>); }) }
          </div>
          <div style={css("display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--km-line);margin-top:12px;padding-top:14px")}>
            <span style={css("font-size:13px;color:var(--km-ink-600)")}>Tamamlayan katılımcılar <b style={css("color:var(--km-ink-900)")}>yetkili kurs merkezi sertifikası</b> alır.</span>
            <button onClick={V.openList} style={css("background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:13px;padding:10px 16px;border-radius:10px")}>Kayıt talebi</button>
          </div>
        </div>
      </section>
      </>) : null }
      { (V.isRacing) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <h2 style={css("font-size:18px;font-weight:700;margin:0 0 12px")}>Yarış takvimi</h2>
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;overflow:hidden")}>
          <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)")}>
              <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")}>Yarış</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")}>Bölge</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")}>Tarih</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")}>Kategori</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></tr></thead>
            <tbody>{ (V.racingCal || []).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:700;color:var(--km-ink-900);white-space:nowrap")}>{r.race}</td>
                <td style={css("padding:13px 16px;font-size:13px;color:var(--km-ink-700)")}>{r.region}</td>
                <td style={css("padding:13px 16px;font-size:13px;color:var(--km-ink-600);white-space:nowrap")}>{r.date}</td>
                <td style={css("padding:13px 16px;font-size:13px;color:var(--km-ink-600)")}>{r.cat}</td>
                <td style={css("padding:13px 16px")}><span style={css("font-size:12px;font-weight:700;color:" + r.sfg + ";background:" + r.sbg + ";padding:4px 10px;border-radius:999px;white-space:nowrap")}>{r.status}</span></td></tr>
            ); }) }</tbody>
          </table></div>
        </div>
      </section>
      </>) : null }
      { (V.isExper) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <h2 style={css("font-size:18px;font-weight:700;margin:0 0 12px")}>Sörvey rapor kalemleri</h2>
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px")}>
          <div style={css("display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px")}>
            { (V.experItems || []).map(function(e, $index){ return (<span key={$index} style={css("display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--km-ink-700);padding:6px 0")}><span style={css("display:flex;color:var(--km-good)")}>{V.icCheck}</span>{e}</span>); }) }
          </div>
          <div style={css("font-size:12px;color:var(--km-ink-400);margin-top:12px")}>Kapsamlı sörvey raporu bu kalemleri kapsar; rapor yetkili firma tarafından düzenlenir.</div>
        </div>
      </section>
      </>) : null }
      { (V.isAuction) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <h2 style={css("font-size:18px;font-weight:700;margin:0 0 12px")}>Öne çıkan açık artırma</h2>
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px")}>
          <div style={css("display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-start")}>
            <div><div style={css("font-size:16px;font-weight:700;color:var(--km-ink-900)")}>{V.auctionLive.title}</div><div style={css("font-size:12.5px;color:var(--km-ink-500);margin-top:3px")}>{V.auctionLive.bids} teklif · min artış {V.auctionLive.minInc}</div></div>
            <div style={css("text-align:right")}><div style={css("font-size:12px;color:var(--km-ink-400)")}>Güncel teklif</div><div style={css("font-size:22px;font-weight:800;color:var(--km-ink-900)")} className="km-num">{V.auctionLive.bid}</div></div>
          </div>
          <div style={css("display:inline-flex;align-items:center;gap:6px;background:var(--km-bad-soft);color:var(--km-bad);font-weight:700;font-size:12.5px;padding:6px 11px;border-radius:999px;margin-top:12px")}>{V.icClock} Bitişe {V.auctionLive.ends}</div>
          <div style={css("margin-top:14px;border-top:1px solid var(--km-line);padding-top:12px")}>
            <div style={css("font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--km-ink-400);margin-bottom:8px")}>Teklif geçmişi</div>
            { (V.auctionLive.history || []).map(function(h, $index){ return (<div key={$index} className="km-rh" style={css("display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0")}><span style={css("color:var(--km-ink-600)")}>{h.who} · {h.when}</span><span style={css("font-weight:700;color:var(--km-ink-900)")} className="km-num">{h.amount}</span></div>); }) }
          </div>
          <button onClick={V.openList} style={css("margin-top:14px;background:var(--km-accent);color:var(--km-ink-900);font-weight:700;font-size:14px;padding:11px 20px;border-radius:10px")}>Teklif ver</button>
        </div>
      </section>
      </>) : null }
      { (V.isRadyo) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <div style={css("background:linear-gradient(135deg,#062E2D,#0EA5A4);border-radius:18px;padding:20px;color:#fff;display:flex;gap:18px;align-items:center;flex-wrap:wrap")}>
          <button onClick={V.radyoTogglePlay} aria-label="Oynat/Duraklat" style={css("flex:none;width:64px;height:64px;border-radius:999px;background:#fff;color:#0EA5A4;font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)")}>{V.radyoPlayIcon}</button>
          <div style={css("flex:1;min-width:180px")}>
            <div style={css("display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.16);padding:3px 9px;border-radius:999px")}><span style={css("width:6px;height:6px;border-radius:999px;background:#FF5A5A")}></span>{V.radyoNow.type} · Canlı</div>
            <div style={css("font-size:20px;font-weight:800;margin-top:8px")}>{V.radyoNow.name}</div>
            <div style={css("font-size:13.5px;color:#BEEDEB;margin-top:2px")}>Şimdi: {V.radyoNow.now}</div>
            <div style={css("display:flex;align-items:center;gap:14px;margin-top:12px;font-size:12px;color:#9FDBD9")}>
              <span>♪ {V.radyoNow.listeners} dinleyici</span>
              <span style={css("display:flex;align-items:center;gap:5px")}>Ses <span style={css("width:70px;height:4px;border-radius:999px;background:rgba(255,255,255,.25);position:relative;display:inline-block")}><span style={css("position:absolute;left:0;top:0;bottom:0;width:62%;border-radius:999px;background:#fff")}></span></span></span>
            </div>
          </div>
          <div aria-hidden="true" style={css("flex:none;display:flex;align-items:flex-end;gap:3px;height:44px")}>
            <span style={css("width:4px;height:40%;background:rgba(255,255,255,.7);border-radius:2px;animation:kmEq 900ms ease-in-out infinite")}></span>
            <span style={css("width:4px;height:80%;background:rgba(255,255,255,.85);border-radius:2px;animation:kmEq 700ms ease-in-out infinite .15s")}></span>
            <span style={css("width:4px;height:55%;background:rgba(255,255,255,.7);border-radius:2px;animation:kmEq 800ms ease-in-out infinite .3s")}></span>
            <span style={css("width:4px;height:95%;background:#fff;border-radius:2px;animation:kmEq 650ms ease-in-out infinite .1s")}></span>
            <span style={css("width:4px;height:65%;background:rgba(255,255,255,.8);border-radius:2px;animation:kmEq 750ms ease-in-out infinite .22s")}></span>
          </div>
        </div>
        <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 12px")}><h2 style={css("font-size:18px;font-weight:700;margin:0")}>Kanallar</h2><span style={css("font-size:12px;color:var(--km-ink-400)")}>tümü ücretsiz · reklamsız</span></div>
        <div style={css("display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px")} className="km-bkgrid">
          { (V.radyoChannels || []).map(function(c, $index){ return (
            <button key={$index} onClick={c.pick} className="km-ch" style={css("text-align:left;background:var(--km-paper);border:1px solid " + (c.active ? V.activeModule.accent : 'var(--km-line)') + ";border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px")}>
              <span style={css("flex:none;width:44px;height:44px;border-radius:11px;background:" + c.typeBg + ";color:" + c.typeFg + ";display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px")}>{c.type}</span>
              <span style={css("flex:1;min-width:0")}><span style={css("display:flex;align-items:center;gap:7px")}><span style={css("font-size:14.5px;font-weight:700;color:var(--km-ink-900)")}>{c.name}</span><span style={css("width:7px;height:7px;border-radius:999px;background:" + c.dot)}></span></span><span style={css("display:block;font-size:12.5px;color:var(--km-ink-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis")}>{c.now}</span><span style={css("display:block;font-size:11px;color:var(--km-ink-400);margin-top:1px")}>{c.cat} · {c.listeners} dinleyici</span></span>
              <span style={css("flex:none;color:" + V.activeModule.accent + ";font-size:18px")}>►</span>
            </button>
          ); }) }
        </div>
      </section>
      </>) : null }

      { (V.isStars) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <div style={css("display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px")}>
          { (V.starsStats || []).map(function(s, $index){ return (<div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;padding:15px;text-align:center")}><div style={css("font-size:24px;font-weight:800;color:var(--km-ink-900)")}>{s.v}</div><div style={css("font-size:12px;color:var(--km-ink-500);margin-top:2px")}>{s.k}</div></div>); }) }
        </div>
        <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px")}><h2 style={css("font-size:18px;font-weight:700;margin:0")}>Öne çıkan yıldızlar</h2><button onClick={V.openList} style={css("font-size:13px;font-weight:600;color:" + V.activeModule.accent)}>Tümünü gör →</button></div>
        <div className="km-bkgrid">
          { (V.starsList || []).map(function(p, $index){ return (
            <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;overflow:hidden")}>
              <div style={css("height:74px;background:linear-gradient(120deg," + V.activeModule.accent + ",#7C1D6B);position:relative")}></div>
              <div style={css("padding:0 15px 15px;margin-top:-30px")}>
                <span style={css("width:58px;height:58px;border-radius:999px;background:#fff;border:3px solid #fff;box-shadow:var(--shadow-2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:" + V.activeModule.accent)}>{p.ini}</span>
                <div style={css("display:flex;align-items:center;gap:6px;margin-top:9px")}><span style={css("font-size:15.5px;font-weight:700;color:var(--km-ink-900)")}>{p.name}</span>{ (p.verified) ? (<><span title="Doğrulanmış" style={css("color:var(--km-deep-2);display:flex")}>{V.icCheck}</span></>) : null }</div>
                <div style={css("font-size:12.5px;color:var(--km-ink-500)")}>{p.role} · {p.plat}</div>
                <div style={css("display:flex;gap:16px;margin-top:11px;border-top:1px solid var(--km-line);padding-top:11px")}>
                  <span><span style={css("display:block;font-size:15px;font-weight:800;color:var(--km-ink-900)")}>{p.followers}</span><span style={css("font-size:11px;color:var(--km-ink-400)")}>takipçi</span></span>
                  <span><span style={css("display:block;font-size:15px;font-weight:800;color:var(--km-ink-900)")}>{p.eng}</span><span style={css("font-size:11px;color:var(--km-ink-400)")}>etkileşim</span></span>
                </div>
                <button onClick={p.open} style={css("width:100%;margin-top:13px;background:" + V.activeModule.accent + ";color:#fff;font-weight:700;font-size:13.5px;padding:10px;border-radius:10px")}>İşbirliği talebi</button>
              </div>
            </div>
          ); }) }
        </div>
      </section>
      </>) : null }

      { (V.isCharter) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <h2 style={css("font-size:18px;font-weight:700;margin:0 0 12px")}>Örnek rota · gün gün program</h2>
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;padding:18px")}>
          { (V.itinerary || []).map(function(d, $index){ return (<div key={$index} style={css("display:flex;gap:12px;padding:9px 0;border-top:1px solid var(--km-line)")}>
            <span style={css("flex:none;font-size:12px;font-weight:700;color:#fff;background:" + V.activeModule.accent + ";border-radius:8px;padding:5px 9px;height:fit-content;white-space:nowrap")}>{d.d}</span>
            <div style={css("min-width:0")}><div style={css("font-size:14px;font-weight:600;color:var(--km-ink-900)")}>{d.t}</div><div style={css("font-size:12.5px;color:var(--km-ink-500);margin-top:1px")}>{d.n}</div></div>
          </div>); }) }
        </div>
      </section>
      </>) : null }

      { (V.isCrew) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px")}>
          <h2 style={css("font-size:18px;font-weight:700;margin:0")}>Öne çıkan mürettebat</h2>
          <button onClick={V.openList} style={css("font-size:13px;font-weight:600;color:" + V.activeModule.accent)}>Tümünü gör →</button>
        </div>
        <div className="km-grid6" style={css("grid-template-columns:repeat(4,minmax(0,1fr))")}>
          { (V.crewPeople || []).map(function(p, $index){ return (
            <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;overflow:hidden")}>
              <div className="km-ph" style={css("height:92px")}>profil</div>
              <div style={css("padding:12px")}>
                <div style={css("font-size:14px;font-weight:700;color:var(--km-ink-900)")}>{p.name}</div>
                <div style={css("font-size:12px;color:var(--km-ink-500);margin-top:2px")}>{p.role} · {p.exp}</div>
                <div style={css("display:flex;flex-wrap:wrap;gap:4px;margin-top:8px")}>
                  { (p.lic || []).map(function(l, $index){ return (<span key={$index} style={css("font-size:10.5px;font-weight:700;color:var(--km-deep);background:var(--km-deep-soft);padding:3px 7px;border-radius:6px")}>{l}</span>); }) }
                </div>
                <div style={css("font-size:13px;font-weight:800;color:var(--km-ink-900);margin-top:8px")} className="km-num">{p.rate}</div>
              </div>
            </div>
          ); }) }
        </div>
      </section>
      </>) : null }
      { (V.isInsurance) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <h2 style={css("font-size:18px;font-weight:700;margin:0 0 12px")}>Teklif karşılaştırma</h2>
        <div style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:16px;overflow:hidden")}>
          <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)")}>
                <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")}>Şirket</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")}>Teminat</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")}>Muafiyet</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")}>Tahmini yıllık prim</th>
                <th style={css("padding:11px 16px")}></th>
              </tr></thead>
              <tbody>
                { (V.insurerQuotes || []).map(function(q, $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:700;color:var(--km-ink-900);white-space:nowrap")}>{q.name}</td>
                    <td style={css("padding:13px 16px;font-size:13px;color:var(--km-ink-700)")}>{q.coverage}</td>
                    <td style={css("padding:13px 16px;font-size:13px;color:var(--km-ink-600)")} className="km-num">{q.muaf}</td>
                    <td style={css("padding:13px 16px;font-size:14px;font-weight:800;color:var(--km-ink-900);text-align:right;white-space:nowrap")} className="km-num">{q.prim}</td>
                    <td style={css("padding:13px 16px;text-align:right")}><button onClick={V.openList} style={css("font-size:12px;font-weight:700;color:var(--km-ink-900);background:var(--km-accent);padding:8px 12px;border-radius:8px;white-space:nowrap")}>Teklif iste</button></td>
                  </tr>
                ); }) }
              </tbody>
            </table>
          </div>
          <div style={css("padding:11px 16px;font-size:12px;color:var(--km-ink-400)")}>Primler tahminîdir; nihai teklif sigorta şirketinin değerlendirmesine bağlıdır.</div>
        </div>
      </section>
      </>) : null }
      { (V.isBroker) ? (<>
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <div style={css("display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px")}>
          <h2 style={css("font-size:18px;font-weight:700;margin:0")}>Aktif portföy</h2>
          <button onClick={V.openList} style={css("font-size:13px;font-weight:600;color:" + V.activeModule.accent)}>Tüm brokerler →</button>
        </div>
        <div className="km-grid6" style={css("grid-template-columns:repeat(4,minmax(0,1fr))")}>
          { (V.brokerPortfolio || []).map(function(y, $index){ return (
            <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:14px;overflow:hidden")}>
              <div className="km-ph" style={css("height:96px")}>yat görseli</div>
              <div style={css("padding:11px 12px")}>
                <div style={css("font-size:14px;font-weight:700;color:var(--km-ink-900)")}>{y.title}</div>
                <div style={css("font-size:12px;color:var(--km-ink-500);margin-top:2px")}>{y.sub}</div>
                <div style={css("font-size:14px;font-weight:800;color:" + V.activeModule.accent + ";margin-top:6px")} className="km-num">{y.price}</div>
              </div>
            </div>
          ); }) }
        </div>
        <div style={css("background:var(--km-deep-soft);border:1px solid #D2E2EF;border-radius:12px;padding:14px 16px;margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap")}>
          <span style={css("font-size:13.5px;color:var(--km-deep);font-weight:600")}>Aradığın yatı bulamadın mı? Broker'a talebini ilet.</span>
          <button onClick={V.openList} style={css("background:var(--km-deep);color:#fff;font-weight:700;font-size:13px;padding:10px 16px;border-radius:10px")}>Alıcı talebi gönder</button>
        </div>
      </section>
      </>) : null }
      <section style={css("max-width:1100px;margin:0 auto;padding:28px 16px 0")}>
        <div style={css("background:var(--km-deep-soft);border:1px solid #D2E2EF;border-radius:14px;padding:18px 18px 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>
      </section>

      <section style={css("max-width:760px;margin:0 auto;padding:34px 16px 8px")}>
        <h2 style={css("font-size:18px;font-weight:700;margin:0 0 14px")}>Sıkça sorulan sorular</h2>
        <div style={css("display:flex;flex-direction:column;gap:10px")}>
          { (V.L.faq || []).map(function(q, $index){ return (
            <div key={$index} style={css("background:var(--km-paper);border:1px solid var(--km-line);border-radius:12px;padding:15px 17px")}>
              <div style={css("font-size:14.5px;font-weight:700;color:var(--km-ink-900)")}>{q.q}</div>
              <div style={css("font-size:13.5px;color:var(--km-ink-600);line-height:1.55;margin-top:6px")}>{q.a}</div>
            </div>
          ); }) }
        </div>
        <p style={css("font-size:12px;color:var(--km-ink-400);margin:16px 0 0;line-height:1.5")}>{V.L.honesty}</p>
      </section>
    </div>
  );
};
