/* Steps, DashboardMockup, AL section (HeroCredit), KobiCards */

/* Steps — NEW "Nasıl çalışır" */
const STEPS = [
  { num: 1, t: "Mükellefleri içe aktarın", d: "Zirve veya Luca'dan tek tıkla içe aktarın — VKN, ad, vergi dairesi otomatik gelir." },
  { num: 2, t: "Modülleri açın", d: "Beyanname, e-tebligat, SGK, karşıt inceleme — hangileri gerekli ise. Her modül bağımsız çalışır." },
  { num: 3, t: "Ofisimnet çalışsın", d: "Her gece DVD üzerinden otomatik tarama: e-tebligat, vergi borcu, karşıt inceleme — sabah özet rapor." },
  { num: 4, t: "Tek tıkla erişim", d: "Dijital Vergi Dairesi otomatik giriş — E-Tebligat, Vergi Borcu, E-Beyanname tek tıkla açılır. AL ile WhatsApp'tan gelen fatura 3 saniyede e-fatura." },
];

function Steps() {
  return (
    <section className="section-pad" style={{ background: "#fff", borderTop: "1px solid var(--border-light)" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <span className="section-eyebrow">Nasıl Çalışır</span>
          <h2 className="h-section" style={{ marginTop: 16 }}>
            Kurulum 15 dakika, sonra <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>her gece sizin için çalışır</span></span>
          </h2>
          <p className="body-lg" style={{ marginTop: 14, color: "var(--text-muted)" }}>
            Mali müşavir ofisinizi otomatikleştirmek için 4 adım. Demoyu izleyin, 15 dakika içinde canlı.
          </p>
        </div>

        <div style={{ marginTop: 56, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, position: "relative" }} className="steps-grid">
          {/* connector line */}
          <div aria-hidden style={{ position: "absolute", top: 18, left: "calc(12.5% + 30px)", right: "calc(12.5% + 30px)", height: 2, background: "repeating-linear-gradient(90deg, var(--border-light) 0 6px, transparent 6px 12px)", zIndex: 0 }} className="steps-connector" />
          {STEPS.map((s) => (
            <div key={s.num} style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
              <div className="step-num" style={{ margin: "0 auto", background: "linear-gradient(135deg, var(--brand-500), var(--ai-purple))" }}>{s.num}</div>
              <h3 style={{ marginTop: 18, fontSize: 16, fontWeight: 700 }}>{s.t}</h3>
              <p style={{ marginTop: 8, fontSize: 13.5, lineHeight: "21px", color: "var(--text-muted)" }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .steps-grid { grid-template-columns: 1fr 1fr !important; }
          .steps-connector { display: none; }
        }
      `}</style>
    </section>
  );
}

/* DashboardMockup */
const DASH_BULLETS = [
  "Zirve / Mikro / Logo / Eta uyumlu içe aktarım — VKN bazlı eşleşme",
  "Beyanname son tarihleri için otomatik e-posta & SMS hatırlatıcı",
  "Ekipteki herkes için rol bazlı yetki — mükellefe atanmış müşavir",
  "Mevzuat değişiklikleri uygulamaya otomatik yansır — siz okumayın",
];

/* Bento-style compact mockup — widget-rich panel, kucuk format */
function CompactPanelMock() {
  return (
    <div style={{
      position: "relative",
      background: "#fff",
      borderRadius: 14,
      overflow: "hidden",
      boxShadow: "0 28px 60px -16px rgba(11,23,39,.28), 0 0 0 1px rgba(11,23,39,.06)",
      zIndex: 1,
      fontFamily: "Montserrat, system-ui, sans-serif",
      width: "100%",
      maxWidth: 500,
      margin: "0 auto",
    }}>
      {/* Browser titlebar */}
      <div style={{ background: "#eef1f5", padding: "8px 12px", display: "flex", alignItems: "center", gap: 8, borderBottom: "1px solid #e2e6ee" }}>
        <span style={{ display: "flex", gap: 4 }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#ed6a5f" }} />
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#f5bf4f" }} />
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "#62c553" }} />
        </span>
        <span style={{ flex: 1, background: "#fff", borderRadius: 5, padding: "3px 10px", fontSize: 9.5, color: "#5b6577", border: "1px solid #e2e6ee" }}>🔒 ofisimnet.com/panel</span>
      </div>

      {/* App header */}
      <div style={{ padding: "10px 14px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: "1px solid #f1f5f9" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ fontSize: 12.5, fontWeight: 800, color: "#0b1727", letterSpacing: "-0.3px" }}>
            Ofisim<span style={{ color: "#ed7c3a" }}>Net</span>
          </div>
          <span style={{ fontSize: 9.5, color: "#5b6577" }}>Panel · Mayıs 2026</span>
        </div>
        <div style={{ display: "flex", gap: 5, alignItems: "center" }}>
          <span style={{ padding: "2px 7px", background: "color-mix(in oklch, #22c55e 14%, white)", color: "#16a34a", borderRadius: 999, fontSize: 9, fontWeight: 700 }}>● Canlı</span>
          <span style={{ width: 18, height: 18, borderRadius: 5, background: "#f1f5f9", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 10 }}>🔔</span>
        </div>
      </div>

      {/* Main panel — widgets bento grid */}
      <div style={{ padding: 12, background: "#f4f6f9", display: "flex", flexDirection: "column", gap: 8 }}>
        {/* Top row: 4 mini KPI widgets */}
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8 }}>
          {[
            { l: "Beyanname", v: "142", s: "/165", c: "#3558d4", i: "📋" },
            { l: "Tebligat", v: "3", s: "1 acil", c: "#ef4444", i: "📬" },
            { l: "SGK", v: "12", s: "tamam", c: "#22c55e", i: "🩺" },
            { l: "Karşıt", v: "4", s: "bekliyor", c: "#f59e0b", i: "🔍" },
          ].map((w) => (
            <div key={w.l} style={{ background: "#fff", border: "1px solid #e5e9f0", borderRadius: 8, padding: "8px 9px" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 4, marginBottom: 3 }}>
                <span style={{ fontSize: 9, color: w.c }}>{w.i}</span>
                <span style={{ fontSize: 8.5, fontWeight: 600, color: "#5b6577", letterSpacing: ".02em" }}>{w.l}</span>
              </div>
              <div style={{ fontSize: 16, fontWeight: 800, color: "#0b1727", letterSpacing: "-0.4px", lineHeight: 1 }}>{w.v}</div>
              <div style={{ fontSize: 8.5, color: "#5b6577", marginTop: 2 }}>{w.s}</div>
            </div>
          ))}
        </div>

        {/* Hero card: Beyanname ilerleme detayi */}
        <div style={{ background: "#fff", border: "1px solid #e5e9f0", borderRadius: 10, padding: "10px 12px" }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 7 }}>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#0b1727" }}>Beyanname Türleri</div>
            <span style={{ fontSize: 9, fontWeight: 700, color: "#16a34a", background: "color-mix(in oklch, #22c55e 14%, white)", padding: "2px 7px", borderRadius: 999 }}>%87 tamam</span>
          </div>
          {[
            { l: "MUH-SGK", p: 95, c: "#22c55e", v: "19/20" },
            { l: "KDV1", p: 78, c: "#3558d4", v: "11/14" },
            { l: "Geçici Vergi", p: 50, c: "#f59e0b", v: "10/20" },
            { l: "KDV2", p: 33, c: "#ef4444", v: "1/3" },
          ].map((r) => (
            <div key={r.l} style={{ display: "grid", gridTemplateColumns: "72px 1fr 40px", gap: 8, alignItems: "center", marginTop: 5 }}>
              <span style={{ fontSize: 9.5, fontWeight: 600, color: "#0b1727" }}>{r.l}</span>
              <div style={{ height: 5, background: "#f1f5f9", borderRadius: 999, overflow: "hidden" }}>
                <div style={{ width: `${r.p}%`, height: "100%", background: r.c, borderRadius: 999 }} />
              </div>
              <span style={{ fontSize: 9, color: "#5b6577", textAlign: "right" }}>{r.v}</span>
            </div>
          ))}
        </div>

        {/* Bottom row: 2 widgets (Son Tebligatlar + Son Tarihler) */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
          <div style={{ background: "#fff", border: "1px solid #e5e9f0", borderRadius: 10, padding: "9px 11px" }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "#0b1727", marginBottom: 5 }}>Son Tebligatlar</div>
            {[
              { v: "VDK", t: "GÜNEŞOĞLU İNŞ.", c: "#ef4444" },
              { v: "TRFK", t: "AKDENİZ TEKS.", c: "#3558d4" },
              { v: "TRFK", t: "MERIDA OTO.", c: "#3558d4" },
            ].map((t, i) => (
              <div key={i} style={{ display: "flex", gap: 5, alignItems: "center", padding: "3px 0", borderTop: i ? "1px solid #f1f5f9" : "none" }}>
                <span style={{ fontSize: 7.5, fontWeight: 800, padding: "1px 4px", borderRadius: 3, background: `color-mix(in oklch, ${t.c} 14%, white)`, color: t.c }}>{t.v}</span>
                <span style={{ fontSize: 9, color: "#0b1727", flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.t}</span>
              </div>
            ))}
          </div>
          <div style={{ background: "#fff", border: "1px solid #e5e9f0", borderRadius: 10, padding: "9px 11px" }}>
            <div style={{ fontSize: 10, fontWeight: 700, color: "#0b1727", marginBottom: 5 }}>Yaklaşan Son Tarihler</div>
            {[
              { t: "KDV1", d: "26 May", c: "#ef4444" },
              { t: "MUHSGK", d: "26 May", c: "#f59e0b" },
              { t: "Geçici", d: "17 Haz", c: "#5b6577" },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 5, alignItems: "center", justifyContent: "space-between", padding: "3px 0", borderTop: i ? "1px solid #f1f5f9" : "none" }}>
                <span style={{ fontSize: 9, fontWeight: 600, color: "#0b1727" }}>{s.t}</span>
                <span style={{ fontSize: 8.5, fontWeight: 700, color: s.c }}>{s.d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

/* HTML panel mockup — gerçek panele yakın (eski, artik kullanilmiyor) */
function DashboardPanelMock() {
  return (
    <div style={{
      position: "relative",
      background: "#fff",
      borderRadius: 14,
      overflow: "hidden",
      boxShadow: "0 28px 60px -16px rgba(11,23,39,.32), 0 0 0 1px rgba(11,23,39,.06)",
      zIndex: 1,
      fontFamily: "Montserrat, system-ui, sans-serif",
      fontSize: 9,
      lineHeight: 1.45,
      width: "100%",
    }}>
      <div>
      {/* Browser titlebar */}
      <div style={{ background: "#eef1f5", padding: "10px 14px", display: "flex", alignItems: "center", gap: 10, borderBottom: "1px solid #e2e6ee" }}>
        <span style={{ display: "flex", gap: 5 }}>
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#ed6a5f" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#f5bf4f" }} />
          <span style={{ width: 10, height: 10, borderRadius: "50%", background: "#62c553" }} />
        </span>
        <span style={{ flex: 1, maxWidth: 320, background: "#fff", borderRadius: 6, padding: "4px 12px", fontSize: 10.5, color: "#5b6577", border: "1px solid #e2e6ee" }}>🔒 ofisimnet.com/panel</span>
      </div>

      <div style={{ display: "flex" }}>
        {/* Sidebar */}
        <div style={{ width: 110, background: "linear-gradient(180deg, #0b1727, #0e1d3a)", color: "#fff", padding: "12px 8px", flexShrink: 0 }}>
          <div style={{ fontSize: 13, fontWeight: 800, padding: "0 6px 16px", letterSpacing: "-0.4px" }}>
            Ofisim<span style={{ color: "#ed7c3a" }}>Net</span>
          </div>
          <div style={{ background: "linear-gradient(135deg, #1e3a8a, #3558d4)", borderRadius: 8, padding: "8px 10px", marginBottom: 14, display: "flex", alignItems: "center", gap: 6, fontSize: 11, fontWeight: 700 }}>
            <span>📅</span> Mayıs 2026 <span style={{ marginLeft: "auto", opacity: .7 }}>▾</span>
          </div>
          <div style={{ fontSize: 9, fontWeight: 800, color: "rgba(255,255,255,.4)", letterSpacing: ".08em", padding: "0 6px 6px" }}>ANA MENÜ</div>
          {[
            { i: "▦", t: "Panel", active: true },
            { i: "📋", t: "Beyannameler" },
            { i: "👥", t: "Mükellefler" },
            { i: "📬", t: "e-Tebligat" },
            { i: "📊", t: "Tebligat Özetleri" },
            { i: "🩺", t: "SGK Rapor" },
          ].map((n, i) => (
            <div key={i} style={{ padding: "5px 10px", borderRadius: 6, fontSize: 9.5, color: n.active ? "#fff" : "rgba(255,255,255,.65)", fontWeight: n.active ? 600 : 400, background: n.active ? "rgba(255,255,255,.12)" : "transparent", display: "flex", alignItems: "center", gap: 8, marginBottom: 1 }}>
              <span style={{ width: 14, textAlign: "center" }}>{n.i}</span>{n.t}
            </div>
          ))}
          <div style={{ fontSize: 9, fontWeight: 800, color: "rgba(255,255,255,.4)", letterSpacing: ".08em", padding: "12px 6px 6px" }}>İŞLEMLER</div>
          {[
            { i: "✓", t: "Görevler" },
            { i: "📁", t: "Arşiv" },
            { i: "🧾", t: "Fatura" },
            { i: "🏢", t: "Büro Yönetimi" },
          ].map((n, i) => (
            <div key={i} style={{ padding: "5px 10px", borderRadius: 6, fontSize: 9.5, color: "rgba(255,255,255,.65)", display: "flex", alignItems: "center", gap: 8, marginBottom: 1 }}>
              <span style={{ width: 14, textAlign: "center" }}>{n.i}</span>{n.t}
            </div>
          ))}
        </div>

        {/* Main */}
        <div style={{ flex: 1, background: "#f4f6f9", padding: 14, minHeight: 360 }}>
          {/* Top header */}
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22, gap: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
              <div>
                <div style={{ fontSize: 17, fontWeight: 800, color: "#0b1727", letterSpacing: "-0.5px" }}>Panel</div>
              </div>
              <span style={{ fontSize: 9.5, color: "#5b6577" }}>Mayıs 2026 · Genel Durum</span>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <button style={{ padding: "5px 9px", background: "#1e3a8a", color: "#fff", border: 0, borderRadius: 6, fontSize: 10, fontWeight: 700 }}>🔒 DVD</button>
              <button style={{ padding: "5px 8px", background: "#16a34a", color: "#fff", border: 0, borderRadius: 6, fontSize: 10, fontWeight: 700 }}>💬</button>
              <span style={{ padding: "5px 9px", background: "#fef3c7", color: "#b45309", borderRadius: 6, fontSize: 10.5, fontWeight: 700 }}>⚠ 2</span>
              <span style={{ position: "relative", padding: "5px 9px", borderRadius: 6, background: "#fff", border: "1px solid #e2e6ee", fontSize: 10.5 }}>
                🔔
                <span style={{ position: "absolute", top: -5, right: -5, background: "#ef4444", color: "#fff", fontSize: 8, fontWeight: 800, padding: "1px 5px", borderRadius: 999 }}>7</span>
              </span>
            </div>
          </div>

          {/* Row 1 — progress + tebligat */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, marginBottom: 18 }}>
            {/* Beyanname İlerlemesi */}
            <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 12, padding: 22 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <div>
                  <div style={{ fontSize: 12.5, fontWeight: 800, color: "#0b1727" }}>Beyanname İlerlemesi</div>
                  <div style={{ fontSize: 9.5, color: "#5b6577", marginTop: 2 }}>Tür bazında tamamlanma</div>
                </div>
                <span style={{ padding: "3px 8px", background: "#f1f5f9", color: "#5b6577", borderRadius: 5, fontSize: 9, fontWeight: 700 }}>⚙ Klasik Çubuk</span>
              </div>
              {[
                { l: "MUH-SGK", p: 5, v: "1/19", err: false },
                { l: "KDV4", p: 0, v: "0/4", err: true },
                { l: "Geçici", p: 5, v: "1/20", err: false },
                { l: "KDV1", p: 0, v: "0/14", err: true },
                { l: "SGK", p: 0, v: "0/3", err: true },
                { l: "KDV2", p: 0, v: "0/2", err: true },
              ].map((b, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 44px", gap: 10, alignItems: "center", marginBottom: 10 }}>
                  <span style={{ fontSize: 10, fontWeight: 700, color: b.err ? "#ef4444" : "#3558d4" }}>{b.l}</span>
                  <div style={{ height: 6, background: b.err ? "#fee2e2" : "#e0e7ff", borderRadius: 999, overflow: "hidden" }}>
                    <div style={{ width: `${b.p}%`, height: "100%", background: b.err ? "#ef4444" : "#3558d4" }} />
                  </div>
                  <span style={{ fontSize: 10, color: "#5b6577", textAlign: "right" }}>{b.err && <span style={{ color: "#ef4444", marginRight: 3 }}>⚠</span>}{b.v}</span>
                </div>
              ))}
            </div>

            {/* Tebligat */}
            <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 12, padding: 22 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                  <span style={{ fontSize: 10.5, fontWeight: 800, color: "#0b1727" }}>📬 Tebligat</span>
                  <span style={{ padding: "1px 6px", background: "#f1f5f9", color: "#5b6577", borderRadius: 4, fontSize: 9, fontWeight: 700 }}>5</span>
                </div>
                <div style={{ display: "flex", gap: 3 }}>
                  <span style={{ padding: "2px 7px", background: "#0b1727", color: "#fff", borderRadius: 4, fontSize: 8.5, fontWeight: 700 }}>Hafta</span>
                  <span style={{ padding: "2px 7px", background: "#f1f5f9", color: "#5b6577", borderRadius: 4, fontSize: 8.5, fontWeight: 700 }}>15 G</span>
                  <span style={{ padding: "2px 7px", background: "#f1f5f9", color: "#5b6577", borderRadius: 4, fontSize: 8.5, fontWeight: 700 }}>Ay</span>
                </div>
              </div>
              {[
                { type: "TRFK CZ", body: "EGM - TRAFİK - İPC", m: "AKDENIZ TEKSTIL LTD.", d1: "14 May", d2: "19 May", dot: "#0ba5ec", urgent: false },
                { type: "TRFK CZ", body: "EGM - TRAFİK - İPC", m: "MERIDA OTOMOTIV A.Ş.", d1: "13 May", d2: "18 May", dot: "#0ba5ec", urgent: false },
                { type: "VDK", body: "VERGİ DENETİM KURULU - KAÇAKÇILIĞI", m: "GÜNEŞOĞULLARI İNŞAAT", d1: "12 May", d2: "17 May", dot: "#ef4444", urgent: true },
                { type: "TRFK CZ", body: "EGM - TRAFİK - İPC", m: "ÇINAR YAZILIM LTD.", d1: "09 May", d2: "14 May", dot: "#5b6577", urgent: false },
              ].map((t, i) => (
                <div key={i} style={{ display: "flex", gap: 8, padding: "10px 0", borderTop: i ? "1px solid #f1f5f9" : "none", alignItems: "flex-start" }}>
                  <span style={{ width: 6, height: 6, borderRadius: 999, background: t.dot, marginTop: 4, flexShrink: 0 }} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ display: "flex", alignItems: "center", gap: 5, marginBottom: 2 }}>
                      <span style={{ padding: "1px 5px", background: t.urgent ? "#fee2e2" : "#fef3c7", color: t.urgent ? "#b91c1c" : "#b45309", fontSize: 8, fontWeight: 800, borderRadius: 3 }}>{t.type}</span>
                      <span style={{ fontSize: 9.5, color: t.urgent ? "#0b1727" : "#5b6577", fontWeight: t.urgent ? 700 : 400, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.body}</span>
                    </div>
                    <div style={{ fontSize: 9.5, color: "#3f4756", fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{t.m}</div>
                  </div>
                  <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 1, flexShrink: 0 }}>
                    <span style={{ fontSize: 9, color: "#5b6577", display: "inline-flex", alignItems: "center", gap: 3 }}><span style={{ width: 4, height: 4, borderRadius: 999, background: "#5b6577" }} />{t.d1}</span>
                    <span style={{ fontSize: 9, color: "#ef4444", display: "inline-flex", alignItems: "center", gap: 3 }}><span style={{ width: 4, height: 4, borderRadius: 999, background: "#ef4444" }} />{t.d2}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Row 2 — beyannameler + karsi + sgk */}
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 18 }}>
            {/* Son Verilen Beyannameler */}
            <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 12, padding: 22 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <span style={{ fontSize: 10.5, fontWeight: 800, color: "#0b1727", display: "inline-flex", alignItems: "center", gap: 5 }}>✓ Son Verilen Beyannameler</span>
                <span style={{ padding: "1px 6px", background: "#dcfce7", color: "#16a34a", borderRadius: 4, fontSize: 9, fontWeight: 800 }}>4</span>
              </div>
              {[
                { t: "Kurumlar", m: "AKDENIZ TEKSTIL LTD.", d: "06 May" },
                { t: "Kurumlar", m: "MERIDA OTOMOTIV A.Ş.", d: "06 May" },
                { t: "GGECİCİ", m: "— —", d: "04 May" },
                { t: "GGECİCİ", m: "ÇINAR YAZILIM LTD.", d: "13 Nis" },
              ].map((r, i) => (
                <div key={i} style={{ display: "grid", gridTemplateColumns: "60px 1fr 70px 40px", gap: 8, alignItems: "center", padding: "8px 0", borderTop: i ? "1px solid #f1f5f9" : "none", fontSize: 10.5 }}>
                  <span style={{ padding: "2px 6px", background: "#fef3c7", color: "#b45309", borderRadius: 4, fontSize: 8.5, fontWeight: 700, textAlign: "center" }}>{r.t}</span>
                  <span style={{ fontWeight: 600, color: "#0b1727", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.m}</span>
                  <span style={{ padding: "2px 6px", background: "#dcfce7", color: "#16a34a", fontSize: 8.5, fontWeight: 800, borderRadius: 4, textAlign: "center" }}>VERİLDİ</span>
                  <span style={{ fontSize: 9, color: "#5b6577", textAlign: "right" }}>{r.d}</span>
                </div>
              ))}
            </div>

            {/* Karşıt İnceleme */}
            <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 12, padding: 22 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <span style={{ fontSize: 10.5, fontWeight: 800, color: "#0b1727", display: "inline-flex", alignItems: "center", gap: 5 }}>🔍 Karşıt İnceleme</span>
                <span style={{ padding: "1px 6px", background: "#fef3c7", color: "#b45309", borderRadius: 4, fontSize: 9, fontWeight: 800 }}>2</span>
              </div>
              {[
                { m: "GÜNEŞOĞULLARI İNŞAAT", s: "EFE ENERJİ TİC.", d: "07 May" },
                { m: "GÜNEŞOĞULLARI İNŞAAT", s: "BORAN MAKİNE LTD.", d: "07 May" },
              ].map((r, i) => (
                <div key={i} style={{ padding: "10px 0", borderTop: i ? "1px solid #f1f5f9" : "none" }}>
                  <div style={{ fontSize: 10, fontWeight: 700, color: "#0b1727" }}>{r.m}</div>
                  <div style={{ fontSize: 9, color: "#5b6577", marginTop: 1 }}>{r.s}</div>
                  <div style={{ fontSize: 8.5, color: "#5b6577", marginTop: 2, display: "inline-flex", alignItems: "center", gap: 3 }}><span style={{ width: 4, height: 4, borderRadius: 999, background: "#0ba5ec" }} />{r.d}</div>
                </div>
              ))}
            </div>

            {/* SGK Rapor */}
            <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 12, padding: 22 }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                <span style={{ fontSize: 10.5, fontWeight: 800, color: "#0b1727", display: "inline-flex", alignItems: "center", gap: 5 }}>👥 SGK Rapor</span>
                <span style={{ padding: "1px 6px", background: "#dcfce7", color: "#16a34a", borderRadius: 4, fontSize: 9, fontWeight: 800 }}>0</span>
              </div>
              <div style={{ background: "linear-gradient(135deg, #eff6ff, #f0f9ff)", border: "1px solid #bfdbfe", borderRadius: 8, padding: 10 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "#1e3a8a", display: "inline-flex", alignItems: "center", gap: 5 }}>📄 SGK kontrolü tamamlandı</div>
                <div style={{ fontSize: 9, color: "#5b6577", marginTop: 4 }}>15 Mayıs 2026 · 00:33</div>
                <div style={{ fontSize: 9.5, color: "#0b1727", marginTop: 8 }}>Mayıs dönemi için yeni rapor yok.</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
  );
}

function DashboardMockup() {
  return (
    <section className="section-pad" style={{ background: "var(--bg-muted)" }}>
      <div className="container-kolaybi">
        <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 40, alignItems: "center" }} className="dash-grid">
          <div>
            <span className="section-eyebrow">Tek Panel</span>
            <h2 className="h-section" style={{ marginTop: 14 }}>
              Tüm işlemler <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>tek ekranda</span></span>
            </h2>
            <p className="body-lg" style={{ marginTop: 18, maxWidth: 520, color: "var(--text-body)" }}>
              Ofisinizdeki tüm rutin — beyannameler, son tarihler, e-tebligat, SGK, karşıt inceleme — hepsi tek paneldeki anlık durumla karşınızda. Zirve, Mikro, Logo ve Eta ile çift yönlü senkron.
            </p>

            <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
              {DASH_BULLETS.map((b) => (
                <li key={b} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ flexShrink: 0, width: 20, height: 20, borderRadius: "50%", background: "color-mix(in oklch, var(--success-green) 18%, white)", color: "var(--success-green)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginTop: 1 }}>
                    <Icon.Check style={{ width: 11, height: 11 }} />
                  </span>
                  <span style={{ fontSize: 13.5, lineHeight: 1.5, color: "var(--text-body)" }}>{b}</span>
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 28, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a href="#" className="kb-btn-primary">Ücretsiz hesap aç <Icon.ArrowRight /></a>
              <a href="#" className="kb-btn-secondary">Demo iste</a>
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <div aria-hidden style={{ position: "absolute", inset: -16, background: "linear-gradient(135deg, color-mix(in oklch, var(--brand-500) 12%, transparent), color-mix(in oklch, var(--ai-purple) 14%, transparent))", filter: "blur(40px)", borderRadius: 32, zIndex: 0 }} />
            <CompactPanelMock />
          </div>
        </div>
        <style>{`
          @media (min-width: 992px) { .dash-grid { grid-template-columns: 1fr 1fr !important; gap: 56px !important; } }
        `}</style>
      </div>
    </section>
  );
}

/* AL section (renamed from HeroCredit) */
function ALSection({ onWatchDemo }) {
  return (
    <section id="al" className="section-pad" style={{ background: "linear-gradient(135deg, #fff7ed 0%, #fff 40%, #fff7ed 100%)", position: "relative", overflow: "hidden" }}>
      <div aria-hidden style={{ position: "absolute", top: 80, right: -100, width: 320, height: 320, borderRadius: "50%", background: "color-mix(in oklch, var(--ai-purple) 12%, transparent)", filter: "blur(60px)" }} />
      <div className="container-kolaybi" style={{ position: "relative" }}>
        <div className="grid-2">
          <div>
            <span className="section-eyebrow ai"><span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--ai-purple)" }} />AL · Yapay Zekâ</span>

            <h2 style={{ marginTop: 18, fontSize: 28, fontWeight: 700, color: "var(--brand-700)", lineHeight: 1.2 }}>Yapay zekâ ile e-Fatura,</h2>
            <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 4 }}>
              <h2 style={{ fontSize: 48, fontWeight: 800, color: "var(--brand-700)", lineHeight: 1.05, letterSpacing: "-1.5px" }}>
                <span className="ink-bar"><span style={{ position: "relative" }}>3 saniyede</span></span>
              </h2>
              <h2 style={{ fontSize: 48, fontWeight: 800, color: "var(--brand-700)", lineHeight: 1.05, letterSpacing: "-1.5px" }}>
                <span className="ink-bar"><span>hatasız fatura!</span></span>
              </h2>
            </div>

            <p className="body-lg" style={{ marginTop: 24, maxWidth: 480 }}>
              Mükellefin gönderdiği WhatsApp mesajı, PDF veya fotoğrafı AL'a verin. Kalemleri, KDV oranlarını ve hesap kodlarını otomatik çıkarır — siz yalnızca onaylarsınız.
            </p>

            <div style={{ marginTop: 28, display: "flex", flexWrap: "wrap", gap: 12 }}>
              <button 
                onClick={onWatchDemo} 
                className="kb-btn-primary" 
                style={{ background: "var(--ai-purple)", cursor: "pointer", border: 0, font: "inherit" }}
              >
                Demoyu izle <Icon.ArrowRight style={{ marginLeft: 4 }} />
              </button>
              <a href="#fiyatlar" className="kb-btn-secondary">Fiyatlar</a>
            </div>

            <div style={{ marginTop: 24, display: "flex", flexWrap: "wrap", gap: 18 }}>
              {["Türkçe OCR + LLM", "KDV / ÖTV otomatik", "Zirve / Mikro aktarım"].map((c) => (
                <span key={c} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12.5, color: "var(--text-muted)" }}>
                  <Icon.Check style={{ color: "var(--ai-purple)", width: 12, height: 12 }} />
                  {c}
                </span>
              ))}
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <img src="assets/al-ai-fatura.png" alt="Ofisimnet AL — yapay zekâ ile fatura kesme" style={{ width: "100%", height: "auto", borderRadius: 24, objectFit: "cover" }} />
          </div>
        </div>
      </div>
    </section>
  );
}

/* KobiCards */
const KOBI_CARDS = [
  {
    title: "Mükellef Portalı",
    body: "Mükelleflerin evrak ve fatura gönderebilmesi için mobil + web portal — tek bağlantı paylaş, evrak toplama derdi bitsin.",
    glyph: "MP",
    accent: "#0ba5ec",
    detail: {
      tagline: "Mükellef evrağı kendisi gönderir",
      bullets: [
        { t: "Tek bağlantı, tek QR kod", d: "WhatsApp üzerinden gönder, mükellef portalına direkt giriş." },
        { t: "Mobil uyumlu yükleme", d: "Telefondan fotoğraf çek ya da PDF seç — anında size düşer." },
        { t: "Kategori ayrımı", d: "Fatura / dekont / SGK / mukteza ayrı klasörlerde otomatik sınıflandırılır." },
        { t: "Bildirim", d: "Mükellef yükleme yapınca size push + e-posta bildirimi gelir." },
      ],
      illustration: "portal",
    },
  },
  {
    title: "DVD Otomatik Giriş",
    body: "Dijital Vergi Dairesi'ne tek tıkla otomatik giriş. Mükellef bazlı kimlik bilgileri saklı, oturum açma derdi yok.",
    glyph: "DV",
    accent: "#22c55e",
    detail: {
      tagline: "CAPTCHA'yı yapay zekâ çözüyor",
      bullets: [
        { t: "Şifreler şifreli saklanır", d: "Mükellef GİB şifresi şifrelenip sistemde tutulur." },
        { t: "Türkiye özel altyapımız", d: "GİB token IP'ye bağlı — Bulut sağlayıcılarının değişen IP'leri yerine altyapımız sabit." },
        { t: "CAPTCHA", d: "yapay zekâ ile CAPTCHA otomatik çözülür, login 5 saniyede tamamlanır." },
        { t: "Tek tıkla giriş", d: "Mükellef satırından 'DVD Aç' butonuna basın — tarayıcıda zaten login olmuş şekilde açılır." },
      ],
      illustration: "dvd",
    },
  },
  {
    title: "DVD Tek Tıkla Sorgular",
    body: "E-Tebligat, vergi borcu, e-beyanname ve karşıt inceleme — hepsi DVD'den tek tıkla, sonuç anında ekranda.",
    glyph: "TS",
    accent: "#f59e0b",
    detail: {
      tagline: "Login + Borç + Tebligat tek seferde",
      bullets: [
        { t: "Tek HTTP çağrı", d: "altyapımız tek sorgu API'i: login, vergi borcu ve e-tebligat aynı oturumda çekilir." },
        { t: "her gün otomatik", d: "Tüm mükellefler için arka plan otomasyonu job ile arka planda toplu sorgu. Manuel tetikleme her zaman mümkün." },
        { t: "Sonuçlar sistemde", d: "panele yazılır, panelde anlık güncellenir." },
        { t: "Tebligat PDF'i arşivde", d: "Tebligat geldiyse PDF güvenli format olarak çekilir, güvenli bulut depolama'ye yüklenir." },
      ],
      illustration: "queries",
    },
  },
  {
    title: "Karşıt İnceleme Tarayıcı",
    body: "DVD'de mükellef adına karşıt inceleme talebi var mı saatlik kontrol — gelirse SMS ile haber.",
    glyph: "Kİ",
    accent: "#6d59ff",
    detail: {
      tagline: "Karşıt inceleme talepleri saatlik taranır",
      bullets: [
        { t: "Saatlik DVD taraması", d: "Tüm mükellefler için DVD bildirim kutusu saatte bir kontrol edilir." },
        { t: "Karşıt inceleme talebi varsa", d: "Talep tespit edildiğinde mükellef ve süreç bilgisi panele düşer." },
        { t: "Anlık WhatsApp + SMS", d: "Müşaviri uyarmak için anlık bildirim + WhatsApp bildirimi anında gönderilir." },
        { t: "Geçmiş kayıt", d: "Tüm talepler tarihçe ile kayıt altında — hangi mükellefte ne zaman geldi, görsel takip." },
      ],
      illustration: "karsi",
    },
  },
];

function KobiCards() {
  const [openIdx, setOpenIdx] = React.useState(-1);
  React.useEffect(() => {
    if (openIdx < 0) return;
    const onKey = (e) => { if (e.key === "Escape") setOpenIdx(-1); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [openIdx]);

  return (
    <section className="section-pad" style={{ background: "#fff" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 680, margin: "0 auto", textAlign: "center" }}>
          <span className="section-eyebrow">Özel Araçlar</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Mali Müşavirin Tüm İhtiyaçlarına <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>Özel Modüller</span></span>
          </h2>
          <p className="body-lg" style={{ marginTop: 14, color: "var(--text-muted)" }}>
            Ofisinizin günlük rutinini otomatikleştiren, mevzuat değişikliklerini sizin için takip eden modüller — tek lisans, tüm mükellefler.
          </p>
        </div>

        <div style={{ marginTop: 48 }} className="grid-4">
          {KOBI_CARDS.map((c, i) => (
            <div key={c.title} className="card-pop" style={{ padding: 20, display: "flex", flexDirection: "column" }}>
              <div style={{ height: 120, borderRadius: 12, background: `linear-gradient(135deg, ${c.accent}, color-mix(in oklch, ${c.accent} 70%, black))`, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 30, fontWeight: 800, fontFamily: "Montserrat", letterSpacing: "-0.5px", position: "relative", overflow: "hidden" }}>
                <span style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 70% 30%, rgba(255,255,255,.3), transparent 50%)" }} />
                <span style={{ position: "relative" }}>{c.glyph}</span>
              </div>
              <h3 style={{ marginTop: 18, fontSize: 16, fontWeight: 700 }}>{c.title}</h3>
              <p style={{ marginTop: 8, flex: 1, fontSize: 13.5, lineHeight: "21px", color: "var(--text-body)" }}>{c.body}</p>
              <button
                onClick={() => setOpenIdx(i)}
                className="kb-btn-secondary"
                style={{ width: "fit-content", marginTop: 16, padding: "8px 14px", fontSize: 12.5, cursor: "pointer", font: "inherit" }}
              >
                Detaylı Bilgi <Icon.ArrowRight style={{ marginLeft: 4, width: 12, height: 12 }} />
              </button>
            </div>
          ))}
        </div>
      </div>

      {openIdx >= 0 && <KobiModal card={KOBI_CARDS[openIdx]} onClose={() => setOpenIdx(-1)} />}
    </section>
  );
}

/* ---------- Modal ---------- */
function KobiModal({ card, onClose }) {
  return (
    <div
      onClick={onClose}
      style={{
        position: "fixed", inset: 0, zIndex: 200,
        background: "rgba(11,23,39,.6)", backdropFilter: "blur(6px)",
        display: "flex", alignItems: "center", justifyContent: "center",
        padding: 20, animation: "modalFadeIn .2s ease",
      }}
    >
      <style>{`
        @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: none; } }
      `}</style>
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: "#fff", borderRadius: 20,
          maxWidth: 920, width: "100%", maxHeight: "90vh", overflow: "auto",
          display: "grid", gridTemplateColumns: "1.1fr 1fr",
          animation: "modalSlideUp .25s ease",
          boxShadow: "0 40px 80px -20px rgba(11,23,39,.5)",
          position: "relative",
        }}
        className="kobi-modal"
      >
        {/* Close button */}
        <button
          onClick={onClose}
          aria-label="Kapat"
          style={{
            position: "absolute", top: 16, right: 16, zIndex: 2,
            width: 36, height: 36, borderRadius: "50%",
            background: "rgba(11,23,39,.06)", border: 0, cursor: "pointer",
            display: "inline-flex", alignItems: "center", justifyContent: "center",
            color: "var(--brand-700)",
          }}
        >
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="6" y1="18" x2="18" y2="6"/></svg>
        </button>

        {/* Left — content */}
        <div style={{ padding: 36 }}>
          <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "6px 12px", borderRadius: 999, background: `color-mix(in oklch, ${card.accent} 12%, white)`, color: card.accent, fontSize: 11, fontWeight: 800, letterSpacing: ".06em", textTransform: "uppercase" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: card.accent }} />
            {card.glyph} · Modül Detayı
          </div>
          <h3 style={{ marginTop: 14, fontSize: 26, fontWeight: 800, color: "var(--brand-700)", letterSpacing: "-0.5px" }}>{card.title}</h3>
          <p style={{ marginTop: 8, fontSize: 14.5, color: "var(--text-muted)", lineHeight: 1.5 }}>{card.detail.tagline}</p>

          <ul style={{ listStyle: "none", padding: 0, margin: "24px 0 0", display: "flex", flexDirection: "column", gap: 16 }}>
            {card.detail.bullets.map((b, i) => (
              <li key={i} style={{ display: "flex", gap: 14 }}>
                <span style={{ flexShrink: 0, width: 28, height: 28, borderRadius: 8, background: `color-mix(in oklch, ${card.accent} 12%, white)`, color: card.accent, display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 12 }}>{i + 1}</span>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 700, color: "var(--brand-700)" }}>{b.t}</div>
                  <div style={{ marginTop: 4, fontSize: 13, lineHeight: "20px", color: "var(--text-muted)" }}>{b.d}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>

        {/* Right — illustration */}
        <div style={{ background: `linear-gradient(135deg, ${card.accent}, color-mix(in oklch, ${card.accent} 60%, black))`, padding: 28, display: "flex", alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden" }}>
          <div aria-hidden style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 20%, rgba(255,255,255,.18), transparent 60%)" }} />
          <KobiIllustration kind={card.detail.illustration} accent={card.accent} />
        </div>
      </div>
      <style>{`
        @media (max-width: 720px) {
          .kobi-modal { grid-template-columns: 1fr !important; max-height: 95vh !important; }
          .kobi-modal > div:last-child { order: -1; padding: 20px !important; min-height: 200px; }
        }
      `}</style>
    </div>
  );
}

/* ---------- SVG/HTML illustrations per card ---------- */
function KobiIllustration({ kind }) {
  if (kind === "portal") {
    return (
      <div style={{ position: "relative", width: "100%", maxWidth: 320 }}>
        {/* phone */}
        <div style={{ background: "#0e1423", borderRadius: 28, padding: 8, boxShadow: "0 30px 60px -20px rgba(0,0,0,.5)" }}>
          <div style={{ background: "#fff", borderRadius: 22, padding: "18px 16px", display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 10, paddingBottom: 12, borderBottom: "1px solid #e5e7eb" }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: "#0ba5ec", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 13, fontWeight: 800 }}>O</div>
              <div>
                <div style={{ fontSize: 12, fontWeight: 800, color: "#0b1727" }}>OfisimNet Portal</div>
                <div style={{ fontSize: 10, color: "#5b6577" }}>Mükellef Yükleme</div>
              </div>
            </div>
            {[
              { i: "📄", t: "Mart Faturaları.pdf", s: "2.3 MB · az önce", c: "#22c55e" },
              { i: "📸", t: "kasa-fisi-mart.jpg", s: "1.1 MB · az önce", c: "#22c55e" },
              { i: "📂", t: "Banka Ekstresi.xlsx", s: "yükleniyor… 64%", c: "#f59e0b" },
            ].map((f, i) => (
              <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: 10, background: "#f6f7f9", borderRadius: 10 }}>
                <span style={{ fontSize: 18 }}>{f.i}</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 11, fontWeight: 600, color: "#0b1727", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{f.t}</div>
                  <div style={{ fontSize: 9, color: "#5b6577" }}>{f.s}</div>
                </div>
                <span style={{ width: 8, height: 8, borderRadius: "50%", background: f.c }} />
              </div>
            ))}
            <button style={{ marginTop: 4, padding: "12px", border: "2px dashed #cbd5e1", borderRadius: 12, background: "transparent", color: "#5b6577", fontSize: 11, fontWeight: 600 }}>+ Dosya Ekle</button>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "dvd") {
    return (
      <div style={{ width: "100%", maxWidth: 340 }}>
        <div style={{ background: "#fff", borderRadius: 14, overflow: "hidden", boxShadow: "0 20px 50px -15px rgba(0,0,0,.4)" }}>
          {/* browser bar */}
          <div style={{ background: "#f1f5f9", padding: "10px 12px", display: "flex", alignItems: "center", gap: 8, borderBottom: "1px solid #e5e7eb" }}>
            <div style={{ display: "flex", gap: 5 }}>
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#ef4444" }} />
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#f59e0b" }} />
              <span style={{ width: 9, height: 9, borderRadius: "50%", background: "#22c55e" }} />
            </div>
            <div style={{ flex: 1, background: "#fff", borderRadius: 6, padding: "4px 10px", fontSize: 10, color: "#5b6577", border: "1px solid #e5e7eb" }}>🔒 dijital.gib.gov.tr</div>
          </div>
          {/* DVD content */}
          <div style={{ padding: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            <div style={{ fontSize: 12, fontWeight: 800, color: "#0b1727" }}>Dijital Vergi Dairesi</div>
            <div style={{ background: "#f6f7f9", borderRadius: 8, padding: 10, display: "flex", alignItems: "center", gap: 10 }}>
              <div style={{ width: 28, height: 28, borderRadius: "50%", background: "linear-gradient(135deg, #6d59ff, #3558d4)", display: "inline-flex", alignItems: "center", justifyContent: "center", color: "#fff", fontSize: 11 }}>🤖</div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 10, fontWeight: 700, color: "#6d59ff" }}>yapay zekâ CAPTCHA</div>
                <div style={{ fontSize: 10, color: "#5b6577" }}>3X8Y4Z — çözüldü ✓</div>
              </div>
            </div>
            <div style={{ background: "color-mix(in oklch, #22c55e 10%, white)", borderRadius: 8, padding: 12, border: "1px solid color-mix(in oklch, #22c55e 22%, white)" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
                <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#22c55e" }} />
                <span style={{ fontSize: 10, fontWeight: 700, color: "#16a34a" }}>OTURUM AKTİF</span>
              </div>
              <div style={{ marginTop: 6, fontSize: 11, color: "#0b1727" }}>AHMET YÜKSEL · 9930208214</div>
              <div style={{ fontSize: 10, color: "#5b6577", marginTop: 2 }}>Türkiye · Türkiye</div>
            </div>
            <button style={{ padding: "10px", background: "#1e3a8a", color: "#fff", border: 0, borderRadius: 8, fontSize: 11, fontWeight: 700 }}>DVD Sayfasını Aç →</button>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "queries") {
    return (
      <div style={{ width: "100%", maxWidth: 340 }}>
        <div style={{ background: "#fff", borderRadius: 14, padding: 18, boxShadow: "0 20px 50px -15px rgba(0,0,0,.4)", display: "flex", flexDirection: "column", gap: 10 }}>
          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <div style={{ fontSize: 12, fontWeight: 800, color: "#0b1727" }}>Tek Tıkla Sorgu</div>
            <div style={{ fontSize: 10, color: "#5b6577" }}>3 sn önce</div>
          </div>
          {[
            { t: "E-Tebligat", v: "2 okunmamış", c: "#f59e0b", i: "📬" },
            { t: "Vergi Borcu", v: "₺12.450,30", c: "#ef4444", i: "💰" },
            { t: "E-Beyanname", v: "Tüm beyannameler güncel", c: "#22c55e", i: "📋" },
            { t: "Karşıt İnceleme", v: "Talep yok", c: "#22c55e", i: "🔍" },
          ].map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: 10, background: "#f6f7f9", borderRadius: 8 }}>
              <span style={{ fontSize: 16 }}>{r.i}</span>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 11, fontWeight: 700, color: "#0b1727" }}>{r.t}</div>
                <div style={{ fontSize: 10, color: "#5b6577" }}>{r.v}</div>
              </div>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: r.c }} />
            </div>
          ))}
          <div style={{ marginTop: 4, padding: "10px 12px", borderRadius: 8, background: "linear-gradient(135deg, #1e3a8a, #3558d4)", color: "#fff", fontSize: 10, fontWeight: 700, display: "flex", alignItems: "center", justifyContent: "space-between" }}>
            <span>Süre</span>
            <span>1.8 sn · 3 sorgu</span>
          </div>
        </div>
      </div>
    );
  }
  if (kind === "karsi") {
    return (
      <div style={{ width: "100%", maxWidth: 340 }}>
        <div style={{ background: "#fff", borderRadius: 14, padding: 18, boxShadow: "0 20px 50px -15px rgba(0,0,0,.4)" }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8, paddingBottom: 12, borderBottom: "1px solid #e5e7eb" }}>
            <div style={{ width: 28, height: 28, borderRadius: 8, background: "#6d59ff", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 11 }}>Kİ</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, fontWeight: 800, color: "#0b1727" }}>Karşıt İnceleme Tarayıcı</div>
              <div style={{ fontSize: 9, color: "#5b6577" }}>Saatlik tarama · son: 12 dk önce</div>
            </div>
          </div>

          {/* Alert */}
          <div style={{ marginTop: 12, padding: 12, background: "linear-gradient(135deg, #fff7ed, #fff)", border: "1px solid #fcd34d", borderRadius: 10 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ fontSize: 14 }}>⚠️</span>
              <span style={{ fontSize: 10, fontWeight: 800, color: "#b45309", letterSpacing: ".05em" }}>YENİ TALEP TESPİT EDİLDİ</span>
            </div>
            <div style={{ marginTop: 8, fontSize: 12, fontWeight: 700, color: "#0b1727" }}>PARS KALİTE KONTROL LTD.</div>
            <div style={{ fontSize: 10, color: "#5b6577", marginTop: 2 }}>Ankara V.D. — 2026/Q1 · VDK</div>
            <div style={{ marginTop: 10, display: "flex", gap: 6 }}>
              <span style={{ padding: "3px 8px", background: "#22c55e", color: "#fff", fontSize: 9, fontWeight: 700, borderRadius: 4 }}>📱 SMS gönderildi</span>
              <span style={{ padding: "3px 8px", background: "#16a34a", color: "#fff", fontSize: 9, fontWeight: 700, borderRadius: 4 }}>💬 WhatsApp</span>
            </div>
          </div>

          {/* Recent */}
          <div style={{ marginTop: 12, fontSize: 9, fontWeight: 700, color: "#5b6577", letterSpacing: ".06em" }}>SON 7 GÜN</div>
          {[
            { d: "12 May", t: "AHMET YÜKSEL", s: "Talep yok" },
            { d: "11 May", t: "OSMAN OKTAY", s: "Talep yok" },
            { d: "10 May", t: "MAHMUT TEMIZSOY", s: "Tamamlandı" },
          ].map((r, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 0", borderBottom: i < 2 ? "1px solid #f1f5f9" : "none" }}>
              <span style={{ fontSize: 10, color: "#5b6577", width: 40 }}>{r.d}</span>
              <span style={{ flex: 1, fontSize: 11, color: "#0b1727", fontWeight: 600 }}>{r.t}</span>
              <span style={{ fontSize: 9, color: "#5b6577" }}>{r.s}</span>
            </div>
          ))}
        </div>
      </div>
    );
  }
  return null;
}

/* CTA strip */
function CtaStrip() {
  return (
    <section style={{ background: "linear-gradient(90deg, color-mix(in oklch, var(--bluelight-500) 8%, white), color-mix(in oklch, var(--ai-purple) 10%, white))" }}>
      <div className="container-kolaybi" style={{ display: "flex", flexDirection: "column", gap: 20, padding: "44px 24px", alignItems: "center" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 24, width: "100%" }}>
          <div>
            <h3 style={{ fontSize: 26, fontWeight: 800, color: "var(--brand-700)", letterSpacing: "-0.6px" }}>14 gün boyunca ücretsiz kullanın!</h3>
            <p style={{ marginTop: 8, fontSize: 14, color: "var(--text-body)", maxWidth: 560 }}>Ofisimnet'i kredi kartı vermeden 14 gün boyunca tüm modülleriyle deneyin. AL ile ilk 50 fatura sizden hediye.</p>
          </div>
          <a href="#" className="kb-btn-success" style={{ padding: "14px 24px", fontSize: 15 }}>Hemen Başla <Icon.ArrowRight /></a>
        </div>
      </div>
    </section>
  );
}

/* CardsLoop — interactive 4-card selector + product image */
const LOOP_CARDS = [
  { title: "Beyanname Takibi", desc: "Aylık & yıllık beyanname son tarihleri otomatik hatırlatma ile.", glyph: "B", accent: "#0ba5ec", mock: "beyanname" },
  { title: "E-Tebligat", desc: "Tüm mükelleflerin tebligat kutuları DVD üzerinden her gün otomatik taranır.", glyph: "T", accent: "#22c55e", mock: "tebligat" },
  { title: "SGK Rapor", desc: "Aylık SGK bildirimleri, eksik gün ve rapor takibi tek panelde.", glyph: "S", accent: "#f59e0b", mock: "sgk" },
  { title: "Karşıt İnceleme Tarayıcı", desc: "DVD'de mükellef adına karşıt inceleme var mı otomatik kontrol — saatlik tarama.", glyph: "K", accent: "#6d59ff", mock: "karsi" },
];

/* Beyanname mockup — matrix table */
function LoopMockBeyanname() {
  const rows = [
    { m: "AKDENIZ TEKSTIL LTD.", v: "9988774411", dot: "#22c55e", cols: ["g:₺1.245,00", "g:₺3.420,00", "—", "g", "—", "g:₺14.290,55"] },
    { m: "MERIDA OTOMOTIV A.Ş.", v: "5566778899", dot: "#22c55e", cols: ["g:₺28.450,00", "g:₺12.300,00", "g", "—", "—", "g:₺8.760,30"] },
    { m: "GÜNEŞOĞULLARI İNŞAAT", v: "1122334455", dot: "#ef4444", cols: ["—", "r", "—", "—", "g:₺6.430,00", "g:₺9.870,12"] },
    { m: "ÇINAR YAZILIM LTD.", v: "3344556677", dot: "#22c55e", cols: ["g:₺3.910,00", "b", "—", "—", "—", "g:₺2.150,40"] },
    { m: "BORAN MAKİNE LTD.", v: "7788990011", dot: "#22c55e", cols: ["g:₺18.290,00", "g:₺7.450,00", "—", "—", "—", "g:₺22.180,60"] },
    { m: "EFE ENERJİ TİC.", v: "9911223344", dot: "#ef4444", cols: ["—", "r", "—", "—", "—", "g"] },
    { m: "ALİ TAŞDEMİR", v: "2233445566", dot: "#22c55e", cols: ["g:₺790,00", "b", "—", "—", "—", "g:₺1.460,80"] },
    { m: "NEHİR SEVİNÇ", v: "4455667788", dot: "#22c55e", cols: ["g:₺2.130,00", "b", "—", "g:₺3.240,00", "—", "g:₺5.890,15"] },
  ];
  const Cell = ({ v }) => {
    if (v === "—") return <span style={{ width: 6, height: 6, borderRadius: 999, background: "#cbd5e1", display: "inline-block" }} />;
    if (v === "g") return <span style={{ width: 18, height: 18, borderRadius: 4, background: "color-mix(in oklch, #22c55e 22%, white)", color: "#16a34a", fontSize: 10, fontWeight: 800, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>✓</span>;
    if (v === "b") return <span style={{ width: 18, height: 18, borderRadius: 4, background: "color-mix(in oklch, #3558d4 22%, white)", color: "#1e3a8a", fontSize: 10, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>🔒</span>;
    if (v === "r") return <span style={{ width: 18, height: 18, borderRadius: 4, background: "color-mix(in oklch, #ef4444 18%, white)", color: "#b91c1c", fontSize: 11, fontWeight: 800, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>−</span>;
    if (v.startsWith("g:")) {
      return (
        <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 1 }}>
          <span style={{ width: 18, height: 18, borderRadius: 4, background: "color-mix(in oklch, #22c55e 22%, white)", color: "#16a34a", fontSize: 10, fontWeight: 800, display: "inline-flex", alignItems: "center", justifyContent: "center" }}>✓</span>
          <span style={{ fontSize: 7.5, color: "#5b6577" }}>{v.slice(2)}</span>
        </div>
      );
    }
    return null;
  };
  const COLS = ["KDV1", "MUH-SGK", "SGK", "KDV2", "KDV4", "Gelir"];
  return (
    <div style={{ background: "#fff", fontFamily: "Montserrat, system-ui, sans-serif", padding: 18 }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ fontSize: 16, fontWeight: 800, color: "#0b1727", letterSpacing: "-0.4px" }}>Beyannameler</div>
          <div style={{ fontSize: 10, color: "#5b6577" }}>Mart 2026 · 27 mükellef</div>
          <span style={{ padding: "2px 8px", borderRadius: 999, background: "#fef3c7", color: "#b45309", fontSize: 8.5, fontWeight: 800, letterSpacing: ".04em" }}>★ YENİ</span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ padding: "5px 11px", background: "#1e3a8a", color: "#fff", borderRadius: 6, fontSize: 9.5, fontWeight: 700 }}>E-Beyanname</span>
          <span style={{ padding: "5px 11px", background: "#16a34a", color: "#fff", borderRadius: 6, fontSize: 9.5, fontWeight: 700 }}>💬 Toplu WhatsApp</span>
        </div>
      </div>

      {/* Tabs + legend */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10, flexWrap: "wrap", gap: 8 }}>
        <div style={{ display: "flex", gap: 4 }}>
          <span style={{ padding: "4px 10px", background: "#0b1727", color: "#fff", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>Tümü (27)</span>
          <span style={{ padding: "4px 10px", background: "#f1f5f9", color: "#5b6577", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>✓ Tamam (20)</span>
          <span style={{ padding: "4px 10px", background: "#f1f5f9", color: "#5b6577", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>⚠ Eksik (7)</span>
        </div>
        <div style={{ display: "flex", gap: 10, fontSize: 8.5, color: "#5b6577" }}>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "#22c55e" }} />Verildi</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "#3558d4" }} />Hazır</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "#f59e0b" }} />Onay</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 4 }}><span style={{ width: 6, height: 6, borderRadius: 999, background: "#ef4444" }} />Eksik</span>
        </div>
      </div>

      {/* Table */}
      <div style={{ border: "1px solid #e2e6ee", borderRadius: 8, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.6fr repeat(6, 1fr)", padding: "8px 10px", background: "#f1f5f9", fontSize: 8.5, fontWeight: 800, color: "#0b1727", letterSpacing: ".02em" }}>
          <span style={{ color: "#5b6577" }}>Mükellef</span>
          {COLS.map((c) => <span key={c} style={{ textAlign: "center" }}>{c}</span>)}
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.6fr repeat(6, 1fr)", padding: "7px 10px", borderTop: "1px solid #f1f5f9", alignItems: "center", fontSize: 9.5 }}>
            <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: r.dot }} />
              <span style={{ display: "flex", flexDirection: "column", lineHeight: 1.2, minWidth: 0 }}>
                <span style={{ fontWeight: 700, color: "#0b1727", fontSize: 9.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.m}</span>
                <span style={{ fontSize: 8, color: "#5b6577" }}>{r.v}</span>
              </span>
            </span>
            {r.cols.map((c, ci) => (
              <span key={ci} style={{ display: "flex", justifyContent: "center", alignItems: "center" }}><Cell v={c} /></span>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* E-Tebligat mockup */
function LoopMockTebligat() {
  const rows = [
    { type: "TRFK CZ", typeColor: "#fef3c7", typeText: "#b45309", konu: "EGM - TRAFİK - İPC", m: "AKDENIZ TEKSTIL LTD.", o: "Düşük", oc: "#5b6577", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "14 May 26", t: "19 May 26", urgent: false },
    { type: "TRFK CZ", typeColor: "#fef3c7", typeText: "#b45309", konu: "EGM - TRAFİK - İPC", m: "MERIDA OTOMOTIV A.Ş.", o: "Düşük", oc: "#5b6577", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "14 May 26", t: "19 May 26", urgent: false },
    { type: "TRFK CZ", typeColor: "#fef3c7", typeText: "#b45309", konu: "EGM - TRAFİK - İPC", m: "KAAN DEMİRTAŞ", o: "Düşük", oc: "#5b6577", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "13 May 26", t: "18 May 26", urgent: false },
    { type: "VDK", typeColor: "#fee2e2", typeText: "#b91c1c", konu: "VERGİ DENETİM KURULU - KAÇAKÇILIK", m: "GÜNEŞOĞULLARI İNŞAAT LTD.", o: "Yüksek", oc: "#b91c1c", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "12 May 26", t: "17 May 26", urgent: true },
    { type: "TRFK CZ", typeColor: "#fef3c7", typeText: "#b45309", konu: "EGM - TRAFİK - İPC", m: "ÇINAR YAZILIM LTD.", o: "Düşük", oc: "#5b6577", d: "Okundu", dc: "color-mix(in oklch, #22c55e 14%, white)", dtc: "#16a34a", g: "09 May 26", t: "14 May 26", urgent: false },
    { type: "ÖDM EMR", typeColor: "#ede9fe", typeText: "#6d59ff", konu: "YEĞENBEY V.D. - ÖDEME EMRİ", m: "ELİF ÇAKMAK", o: "Düşük", oc: "#5b6577", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "05 May 26", t: "10 May 26", urgent: false },
    { type: "ÖDM EMR", typeColor: "#ede9fe", typeText: "#6d59ff", konu: "YEĞENBEY V.D. - ÖDEME EMRİ", m: "TOLGA YAZICIOĞLU", o: "Düşük", oc: "#5b6577", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "05 May 26", t: "10 May 26", urgent: false },
    { type: "ÖDM EMR", typeColor: "#ede9fe", typeText: "#6d59ff", konu: "KAHRAMANKAZAN V.D. - ÖDEME EMRİ", m: "NEHİR SEVİNÇ", o: "Düşük", oc: "#5b6577", d: "Okunmadı", dc: "#fee2e2", dtc: "#b91c1c", g: "28 Nis 26", t: "03 May 26", urgent: false },
  ];
  return (
    <div style={{ background: "#fff", fontFamily: "Montserrat, system-ui, sans-serif", padding: 18 }}>
      {/* Header */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
          <div style={{ fontSize: 16, fontWeight: 800, color: "#0b1727", letterSpacing: "-0.4px" }}>e-Tebligat</div>
          <div style={{ fontSize: 10, color: "#5b6577" }}>Tüm tebligatlar · 445 kayıt</div>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{ padding: "5px 11px", background: "#16a34a", color: "#fff", borderRadius: 6, fontSize: 9.5, fontWeight: 700 }}>💬 Toplu WhatsApp</span>
          <span style={{ padding: "5px 9px", background: "#fef3c7", color: "#b45309", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>⚠ 2</span>
        </div>
      </div>

      {/* Filter */}
      <div style={{ display: "flex", gap: 4, marginBottom: 10 }}>
        <span style={{ padding: "4px 12px", background: "#f1f5f9", color: "#5b6577", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>Bugün</span>
        <span style={{ padding: "4px 12px", background: "#f1f5f9", color: "#5b6577", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>Hafta</span>
        <span style={{ padding: "4px 12px", background: "#f1f5f9", color: "#5b6577", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>15 Gün</span>
        <span style={{ padding: "4px 12px", background: "#3558d4", color: "#fff", borderRadius: 6, fontSize: 9, fontWeight: 700 }}>Ay</span>
      </div>

      {/* Table */}
      <div style={{ border: "1px solid #e2e6ee", borderRadius: 8, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.5fr 1.2fr 50px 70px 60px 60px", padding: "8px 10px", background: "#f1f5f9", fontSize: 8.5, fontWeight: 800, color: "#5b6577", letterSpacing: ".04em", textTransform: "uppercase" }}>
          <span>Konu</span><span>Mükellef</span><span>Önem</span><span>Durum</span><span>Gönd.</span><span>Tebliğ</span>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1.5fr 1.2fr 50px 70px 60px 60px", gap: 6, padding: "7px 10px", borderTop: "1px solid #f1f5f9", alignItems: "center", fontSize: 9, position: "relative" }}>
            {r.urgent && <span style={{ position: "absolute", left: 0, top: "10%", bottom: "10%", width: 3, background: "#ef4444", borderRadius: "0 2px 2px 0" }} />}
            <span style={{ display: "flex", alignItems: "center", gap: 5, minWidth: 0 }}>
              <span style={{ flexShrink: 0, padding: "1px 5px", background: r.typeColor, color: r.typeText, fontSize: 7.5, fontWeight: 800, borderRadius: 3, letterSpacing: ".02em" }}>{r.type}</span>
              <span style={{ color: r.urgent ? "#0b1727" : "#5b6577", fontWeight: r.urgent ? 700 : 400, fontSize: 8.5, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.konu}</span>
            </span>
            <span style={{ fontWeight: 700, color: "#0b1727", fontSize: 9, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.m}</span>
            <span style={{ color: r.oc, fontWeight: r.urgent ? 700 : 500, fontSize: 8.5 }}>{r.o}</span>
            <span><span style={{ padding: "2px 6px", background: r.dc, color: r.dtc, fontSize: 7.5, fontWeight: 700, borderRadius: 3 }}>{r.d}</span></span>
            <span style={{ color: "#5b6577", fontSize: 8 }}>{r.g}</span>
            <span style={{ color: "#5b6577", fontSize: 8 }}>{r.t}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* Inline HTML mocks for loop section */
function LoopMockSgk() {
  return (
    <div style={{ background: "#fff", fontFamily: "Montserrat, system-ui, sans-serif", padding: 22 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 800, color: "#5b6577", letterSpacing: ".08em", textTransform: "uppercase" }}>SGK Vizite Web Servisi</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: "#0b1727", marginTop: 4 }}>Personel Rapor Listesi</div>
        </div>
        <span style={{ padding: "5px 10px", background: "color-mix(in oklch, #22c55e 14%, white)", color: "#16a34a", borderRadius: 999, fontSize: 9.5, fontWeight: 700, display: "inline-flex", alignItems: "center", gap: 5 }}>● SOAP Bağlı</span>
      </div>

      {/* Quick stats */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, marginBottom: 14 }}>
        {[
          { l: "Personel", v: "47", c: "#1e3a8a" },
          { l: "Aktif Rapor", v: "12", c: "#f59e0b" },
          { l: "Onay Bekliyor", v: "3", c: "#ef4444" },
          { l: "Toplam Gün", v: "84", c: "#5b6577" },
        ].map((s, i) => (
          <div key={i} style={{ padding: "8px 10px", background: "#f6f7f9", borderRadius: 8 }}>
            <div style={{ fontSize: 8.5, fontWeight: 700, color: "#5b6577", letterSpacing: ".04em", textTransform: "uppercase" }}>{s.l}</div>
            <div style={{ fontSize: 16, fontWeight: 800, color: s.c, marginTop: 2 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Table */}
      <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 10, overflow: "hidden" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 80px 70px 80px 90px", padding: "8px 12px", background: "#f1f5f9", fontSize: 9, fontWeight: 800, color: "#5b6577", letterSpacing: ".04em", textTransform: "uppercase" }}>
          <span>Personel</span><span>Tür</span><span>Süre</span><span>Tarih</span><span>Durum</span>
        </div>
        {[
          { p: "Mehmet Aksoy", t: "İstirahat", s: "5 gün", d: "13–17 May", st: "ONAY BEKL.", c: "#fef3c7", tc: "#b45309" },
          { p: "Ayşe Demirel", t: "İstirahat", s: "3 gün", d: "12–14 May", st: "ONAYLANDI", c: "color-mix(in oklch, #22c55e 14%, white)", tc: "#16a34a" },
          { p: "Hasan Çelik", t: "İş Kazası", s: "—", d: "10 May", st: "İPTAL", c: "#f1f5f9", tc: "#64748b" },
          { p: "Selin Öz", t: "İstirahat", s: "7 gün", d: "13–19 May", st: "ONAYLANDI", c: "color-mix(in oklch, #22c55e 14%, white)", tc: "#16a34a" },
          { p: "Burak Yıldız", t: "Hastalık", s: "2 gün", d: "11–12 May", st: "ONAYLANDI", c: "color-mix(in oklch, #22c55e 14%, white)", tc: "#16a34a" },
          { p: "Deniz Polat", t: "İstirahat", s: "1 gün", d: "13 May", st: "ONAY BEKL.", c: "#fef3c7", tc: "#b45309" },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 80px 70px 80px 90px", padding: "8px 12px", borderTop: "1px solid #f1f5f9", fontSize: 10.5, alignItems: "center" }}>
            <span style={{ fontWeight: 600, color: "#0b1727" }}>{r.p}</span>
            <span style={{ color: "#5b6577" }}>{r.t}</span>
            <span style={{ color: "#5b6577" }}>{r.s}</span>
            <span style={{ color: "#5b6577", fontSize: 10 }}>{r.d}</span>
            <span style={{ padding: "2px 7px", background: r.c, color: r.tc, fontSize: 8.5, fontWeight: 700, borderRadius: 4, textAlign: "center", letterSpacing: ".02em" }}>{r.st}</span>
          </div>
        ))}
      </div>

      <div style={{ marginTop: 12, display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 10, color: "#5b6577" }}>
        <span>Son senkron: bugün 09:14</span>
        <button style={{ padding: "6px 12px", background: "#f59e0b", color: "#fff", border: 0, borderRadius: 6, fontSize: 10, fontWeight: 700 }}>+ Toplu Sorgu</button>
      </div>
    </div>
  );
}

function LoopMockKarsi() {
  return (
    <div style={{ background: "#fff", fontFamily: "Montserrat, system-ui, sans-serif", padding: 22 }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div>
          <div style={{ fontSize: 10, fontWeight: 800, color: "#5b6577", letterSpacing: ".08em", textTransform: "uppercase" }}>Karşıt İnceleme Tarayıcı</div>
          <div style={{ fontSize: 16, fontWeight: 800, color: "#0b1727", marginTop: 4 }}>DVD Bildirim Tarama</div>
        </div>
        <span style={{ padding: "5px 10px", background: "#eef2ff", color: "#6d59ff", borderRadius: 999, fontSize: 9.5, fontWeight: 700 }}>🕐 Saatlik · 12 dk önce</span>
      </div>

      {/* Alert banner */}
      <div style={{ background: "linear-gradient(135deg, #fff7ed, #fff)", border: "1px solid #fcd34d", borderRadius: 10, padding: 14, marginBottom: 14, display: "flex", gap: 12, alignItems: "center" }}>
        <div style={{ width: 36, height: 36, borderRadius: 8, background: "#fef3c7", color: "#b45309", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 18, flexShrink: 0 }}>⚠</div>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ fontSize: 9, fontWeight: 800, color: "#b45309", letterSpacing: ".08em", textTransform: "uppercase" }}>Yeni talep tespit edildi</div>
          <div style={{ marginTop: 4, fontSize: 12.5, fontWeight: 700, color: "#0b1727" }}>GÜNEŞOĞULLARI İNŞAAT LTD.</div>
          <div style={{ marginTop: 2, fontSize: 10, color: "#5b6577" }}>Ankara V.D. · 2026/Q1 · VDK</div>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 4, flexShrink: 0 }}>
          <span style={{ padding: "3px 8px", background: "#22c55e", color: "#fff", fontSize: 8.5, fontWeight: 700, borderRadius: 4 }}>📱 SMS</span>
          <span style={{ padding: "3px 8px", background: "#16a34a", color: "#fff", fontSize: 8.5, fontWeight: 700, borderRadius: 4 }}>💬 WhatsApp</span>
        </div>
      </div>

      {/* Mini summary */}
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 8, marginBottom: 14 }}>
        {[
          { l: "Son 7 gün", v: "1 talep", c: "#b45309" },
          { l: "Tüm mükellefler", v: "127 takipte", c: "#1e3a8a" },
          { l: "Sonraki tarama", v: "48 dk", c: "#5b6577" },
        ].map((s, i) => (
          <div key={i} style={{ padding: "8px 10px", background: "#f6f7f9", borderRadius: 8 }}>
            <div style={{ fontSize: 8.5, fontWeight: 700, color: "#5b6577", letterSpacing: ".04em", textTransform: "uppercase" }}>{s.l}</div>
            <div style={{ fontSize: 13, fontWeight: 800, color: s.c, marginTop: 2 }}>{s.v}</div>
          </div>
        ))}
      </div>

      {/* Recent history */}
      <div style={{ fontSize: 9, fontWeight: 800, color: "#5b6577", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 6 }}>Son Taramalar</div>
      <div style={{ background: "#fff", border: "1px solid #e2e6ee", borderRadius: 10, overflow: "hidden" }}>
        {[
          { d: "13 May 14:08", m: "GÜNEŞOĞULLARI İNŞAAT", s: "VDK talebi tespit edildi", c: "#ef4444", icon: "⚠" },
          { d: "13 May 13:08", m: "AKDENIZ TEKSTIL LTD.", s: "Talep yok", c: "#22c55e", icon: "✓" },
          { d: "13 May 12:08", m: "MERIDA OTOMOTIV A.Ş.", s: "Talep yok", c: "#22c55e", icon: "✓" },
          { d: "13 May 11:08", m: "ÇINAR YAZILIM LTD.", s: "Talep yok", c: "#22c55e", icon: "✓" },
          { d: "13 May 10:08", m: "BORAN MAKİNE LTD.", s: "Talep yok", c: "#22c55e", icon: "✓" },
        ].map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "20px 80px 1fr auto", gap: 10, padding: "8px 12px", borderTop: i ? "1px solid #f1f5f9" : "none", fontSize: 10.5, alignItems: "center" }}>
            <span style={{ color: r.c, fontWeight: 800, textAlign: "center" }}>{r.icon}</span>
            <span style={{ color: "#5b6577", fontSize: 9.5 }}>{r.d}</span>
            <span style={{ fontWeight: 600, color: "#0b1727", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.m}</span>
            <span style={{ color: r.c, fontWeight: 600, fontSize: 9.5 }}>{r.s}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

function CardsLoop() {
  const [active, setActive] = React.useState(0);
  return (
    <section className="section-pad" style={{ background: "#fff" }}>
      <div className="container-kolaybi">
        <div style={{ maxWidth: 720, margin: "0 auto", textAlign: "center" }}>
          <span className="section-eyebrow">Otomasyon</span>
          <h2 className="h-section" style={{ marginTop: 14 }}>
            Mali Müşavir Ofisinizi <span className="ink-bar"><span style={{ color: "var(--brand-500)" }}>Otomatikleştirin</span></span>
          </h2>
          <p className="body-lg" style={{ marginTop: 14, color: "var(--text-muted)" }}>
            Beyannameleri, e-tebligatları, SGK son tarihlerini ve karşıt incelemeleri Ofisimnet sizin yerinize takip eder.
          </p>
        </div>

        <div style={{ marginTop: 48, display: "grid", gridTemplateColumns: "1fr 1.5fr", gap: 56, alignItems: "center" }} className="loop-grid">
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14 }}>
            {LOOP_CARDS.map((c, i) => (
              <button
                key={c.title}
                onMouseEnter={() => setActive(i)}
                onFocus={() => setActive(i)}
                style={{
                  textAlign: "left",
                  display: "flex", flexDirection: "column", gap: 10,
                  padding: 18,
                  borderRadius: 16,
                  border: i === active ? "2px solid var(--brand-500)" : "1px solid var(--border-light)",
                  background: i === active ? "color-mix(in oklch, var(--brand-500) 5%, white)" : "#fff",
                  boxShadow: i === active ? "0 14px 28px -12px rgba(22,77,132,.25)" : "none",
                  cursor: "pointer",
                  transition: "all .2s ease",
                  fontFamily: "inherit",
                }}
              >
                <div style={{ width: 48, height: 48, borderRadius: 12, background: c.accent, color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontWeight: 800, fontSize: 18 }}>{c.glyph}</div>
                <span style={{ fontSize: 15, fontWeight: 700, color: i === active ? "var(--brand-500)" : "var(--brand-700)" }}>{c.title}</span>
                <span style={{ fontSize: 12, lineHeight: "17px", color: "var(--text-muted)" }}>{c.desc}</span>
              </button>
            ))}
          </div>

          <div style={{ position: "relative", width: "100%", maxWidth: 580, marginInline: "auto", borderRadius: 14, overflow: "hidden", boxShadow: "0 24px 50px -16px rgba(11,23,39,.28), 0 0 0 1px rgba(11,23,39,.06)", background: "#fff", height: 560, display: "flex", flexDirection: "column" }}>
            <div key={LOOP_CARDS[active].mock} style={{ animation: "loopFade .25s ease", flex: 1, overflow: "hidden" }}>
              {LOOP_CARDS[active].mock === "beyanname" && <LoopMockBeyanname />}
              {LOOP_CARDS[active].mock === "tebligat" && <LoopMockTebligat />}
              {LOOP_CARDS[active].mock === "sgk" && <LoopMockSgk />}
              {LOOP_CARDS[active].mock === "karsi" && <LoopMockKarsi />}
            </div>
            <style>{`@keyframes loopFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }`}</style>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 992px) {
          .loop-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Steps, DashboardMockup, ALSection, KobiCards, CtaStrip, CardsLoop });