// NEKO — Shop layer: catalog, product cards, cart, FAQ accordion, sky/terrain decor
// Exports to window. Requires site-core.jsx.

// ---------------------------------------------------------------
// Catalog (placeholder content — cosmetic / supporter only)
// ---------------------------------------------------------------
const NEKO_CATEGORIES = ["Rütbeler", "Kozmetikler", "Petler", "Efektler", "Kasalar", "Etiketler", "Paketler", "Diyar Özelleştirme"];

const NEKO_PRODUCTS = [
  { id: "rank-gezgin", name: "Gezgin Rütbesi", cat: "Rütbeler", price: 950, badge: "Destekçi", badgeCls: "badge-supporter", desc: "Renkli sohbet rengi, /nick ve sezonluk selamlama.", ph: "rütbe ikonu\n(piksel art)" },
  { id: "rank-muhafiz", name: "Muhafız Rütbesi", cat: "Rütbeler", price: 1900, badge: "Destekçi", badgeCls: "badge-supporter", desc: "Gezgin'in tümü + dolu sunucuda sıra önceliği.", ph: "rütbe ikonu\n(piksel art)" },
  { id: "koz-sapka", name: "Kâşif Şapkası", cat: "Kozmetikler", price: 260, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Geniş kenarlı piksel şapka. Yalnızca görünüm.", ph: "şapka ikonu\n(piksel art)" },
  { id: "koz-pelerin", name: "Gece Pelerini", cat: "Kozmetikler", price: 540, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Yıldız desenli pelerin; rüzgârda dalgalanır.", ph: "pelerin ikonu\n(piksel art)" },
  { id: "pet-tilki", name: "Alev Tilkisi", cat: "Petler", price: 480, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Yanında dolaşan tilki dostun. Oyun gücü vermez.", ph: "pet ikonu\n(piksel art)" },
  { id: "pet-golem", name: "Taş Golemi", cat: "Petler", price: 520, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Ağır, sessiz ve sadık. Peşinden gelir.", ph: "pet ikonu\n(piksel art)" },
  { id: "fx-ender", name: "Ender İzi", cat: "Efektler", price: 320, badge: "Yeni", badgeCls: "badge-new", desc: "Yürürken beliren mor kıvılcımlar.", ph: "efekt ikonu\n(piksel art)" },
  { id: "fx-bal", name: "Bal Damlası", cat: "Efektler", price: 300, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Zıpladığında altın damlalar saçılır.", ph: "efekt ikonu\n(piksel art)" },
  { id: "kasa-gun", name: "Gün Batımı Kasası", cat: "Kasalar", price: 250, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Rastgele bir kozmetik içerir. Yalnızca görsel ödüller.", ph: "kasa ikonu\n(piksel art)" },
  { id: "kasa-obs", name: "Obsidyen Kasası", cat: "Kasalar", price: 400, badge: "Yeni", badgeCls: "badge-new", desc: "Gece temalı kozmetik koleksiyonu.", ph: "kasa ikonu\n(piksel art)", soldOut: true },
  { id: "tag-kasif", name: "\u201CKâşif\u201D Etiketi", cat: "Etiketler", price: 150, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Sohbette isminin yanında belirir.", ph: "etiket\n(piksel art)" },
  { id: "tag-bekci", name: "\u201CSurların Bekçisi\u201D", cat: "Etiketler", price: 180, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Sezon 4'e özel sohbet etiketi.", ph: "etiket\n(piksel art)" },
  { id: "paket-sezon", name: "Sezon Destekçi Paketi", cat: "Paketler", price: 2400, badge: "Destekçi", badgeCls: "badge-supporter", desc: "Gezgin Rütbesi + bir pet + bir etiket.", ph: "paket ikonu\n(piksel art)" },
  { id: "paket-koz", name: "Kozmetik Başlangıç", cat: "Paketler", price: 900, badge: "Kozmetik", badgeCls: "badge-cosmetic", desc: "Bir pet, bir efekt ve bir etiket seç.", ph: "paket ikonu\n(piksel art)" },
  { id: "diyar-renk", name: "Diyar Renk Paketi", cat: "Diyar Özelleştirme", price: 700, badge: "Diyar", badgeCls: "badge-diyar", desc: "Kasabanın profil rengini ve harita vurgusunu özelleştir.", ph: "renk paleti\n(piksel art)" },
  { id: "diyar-ikon", name: "Diyar İkon Paketi", cat: "Diyar Özelleştirme", price: 850, badge: "Diyar", badgeCls: "badge-diyar", desc: "Diyarın için özel ikonlar, amblemler ve küçük rozetler.", ph: "amblem seti\n(piksel art)" },
  { id: "diyar-bayrak", name: "Diyar Bayrak Seti", cat: "Diyar Özelleştirme", price: 1100, badge: "Diyar", badgeCls: "badge-diyar", desc: "Topluluğunu temsil eden piksel bayrak stilleri.", ph: "bayrak önizleme\n(piksel art)" },
  { id: "diyar-kimlik", name: "Diyar Kimlik Paketi", cat: "Diyar Özelleştirme", price: 2100, badge: "Diyar", badgeCls: "badge-diyar", desc: "Renk, ikon ve çerçeveyi tek pakette aç.", ph: "kimlik paketi\n(piksel art)" },
];

const NEKO_PACKS = [
  { id: "k500", amount: 500, bonus: null, note: "Denemek için" },
  { id: "k1000", amount: 1000, bonus: "+%5 bonus", note: "En çok tercih edilen başlangıç" },
  { id: "k2500", amount: 2500, bonus: "+%10 bonus", note: "En popüler", popular: true },
  { id: "k5000", amount: 5000, bonus: "+%15 bonus", note: "Sezonu rahat geçir" },
];

const NEKO_MODES = [
  { name: "RPG Towny", desc: "Kasabanı kur, ittifaklar oluştur, bölgeni geliştir ve Neko dünyasında kendi hikâyeni yaz.", stat: "128 kasaba", href: null },
  { name: "Görevler", desc: "Haftalık görev zincirleri, özel NPC rotaları, zindanlar ve ödüllü maceralar.", stat: "240+ görev", href: null },
  { name: "Pazar", desc: "Oyuncular arası ticaret, ilanlar, ürün listeleme ve sunucu ekonomisinin merkezi.", stat: "Oyuncu pazarı", href: "Pazar.html" },
  { name: "Etkinlikler", desc: "Sezonluk etkinlikler, topluluk yarışmaları, özel görevler ve ödüllü aktiviteler.", stat: "Haftalık", href: "Etkinlikler.html" },
  { name: "Kozmetikler", desc: "Şapka, pelerin, efekt, pet ve karakterini öne çıkaran görsel özelleştirmeler.", stat: "Yeni: Alev Tilkisi", href: "Magaza.html?kategori=Kozmetikler" },
  { name: "Topluluk", desc: "Discord, arkadaşlıklar, ekipler, sohbet kanalları ve oyuncularla birlikte büyüyen bir dünya.", stat: NEKO.discord, href: "#topluluk", mascot: true },
  { name: "Duyurular & Güncellemeler", desc: "Sunucu duyuruları, bakım notları, yenilikler, sezon haberleri ve geliştirme güncellemeleri.", stat: "Sezon 4", href: "Duyurular.html" },
];

const NEKO_NEWS = [
  { title: "Sezon 4 başladı: yeni harita ve sur bölgesi", cat: "Güncelleme", date: "12 Mayıs 2026", ph: "sezon görseli — 16:9" },
  { title: "Cuma etkinliği: Sur Savunması geri döndü", cat: "Etkinlik", date: "29 Mayıs 2026", ph: "etkinlik görseli — 16:9" },
  { title: "Mağazaya yaz kozmetikleri eklendi", cat: "Mağaza", date: "3 Haziran 2026", ph: "kozmetik görseli — 16:9" },
  { title: "Kural güncellemesi: yeni itiraz süreci", cat: "Duyuru", date: "8 Haziran 2026", ph: "duyuru görseli — 16:9" },
];

const NEKO_SUPPORTERS = [
  { user: "TaşçıUsta", item: "Gezgin Rütbesi", hours: 128, seed: 0, showCosmetics: true, cosmetics: ["Kâşif Şapkası", "Ender İzi", "Alev Tilkisi"] },
  { user: "GölgeNehri", item: "Alev Tilkisi", hours: 342, seed: 1, showCosmetics: false, cosmetics: [] },
  { user: "KuleMimarı", item: "Ender İzi", hours: 76, seed: 2, showCosmetics: true, cosmetics: ["Gece Pelerini", "“Kâşif” Etiketi"] },
  { user: "SessizDağ", item: "Gün Batımı Kasası", hours: 215, seed: 3, showCosmetics: true, cosmetics: ["Taş Golemi", "Bal Damlası", "“Surların Bekçisi”"] },
];
// Backwards-compatible alias (older drafts referenced NEKO_ACTIVITY)
const NEKO_ACTIVITY = NEKO_SUPPORTERS;

const NEKO_FAQ_KREDI = [
  { q: "Kredi nedir?", a: "Kredi, Neko'nın site bakiyesidir. Hesabına yüklersin ve mağazadaki kozmetik ürünlerde harcarsın. Gerçek paraya geri çevrilemez." },
  { q: "Krediler oyun gücü verir mi?", a: "Hayır. Kredilerle yalnızca görsel ürünler alınır: petler, efektler, etiketler ve sezonluk kozmetikler. Neko'da oyun gücü satılmaz." },
  { q: "Yüklediğim kredi ne zaman hesabıma geçer?", a: "Ödeme altyapısı bağlandığında yükleme anında işlenecek. Şu an bu sayfa tasarım önizlemesidir; gerçek ödeme alınmaz." },
  { q: "İade alabilir miyim?", a: "Kullanılmamış krediler için 14 gün içinde destek ekibine yazabilirsin. Harcanan krediler iade edilmez." },
];

const NEKO_FAQ_DESTEK = [
  { q: "Sunucuya bağlanamıyorum", a: "Adresi kontrol et: " + NEKO.ip + " ve sürümün " + NEKO.version + " aralığında olduğundan emin ol. Sorun sürerse Hata Bildirimi kategorisinden bilet aç." },
  { q: "Satın aldığım ürün gelmedi", a: "Önce sunucudan çıkıp tekrar gir. Ürün hâlâ yoksa Ödeme Sorunu kategorisinden, işlem numaranla birlikte bilet aç." },
  { q: "Ban itirazı nasıl yapılır?", a: "Aşağıdaki formdan Ban İtirazı kategorisini seç. Kullanıcı adını ve itiraz gerekçeni yaz; ekip 48 saat içinde döner." },
  { q: "Hesabıma giremiyorum", a: "Giriş, Minecraft hesabınla yapılır; ayrı bir şifre yoktur. Sorun yaşıyorsan Hesap / Giriş kategorisinden bize ulaş." },
];

// ---------------------------------------------------------------
// Small shared pieces
// ---------------------------------------------------------------
function ItemSlot({ label, size }) {
  const tiny = typeof size === "number" && size < 72;
  return (
    <div style={{
      width: size || "100%", aspectRatio: "1", display: "grid", placeItems: "center", flexShrink: 0, overflow: "hidden",
      background: "rgba(var(--c-text-rgb), 0.07)",
      boxShadow: "inset 3px 3px 0 rgba(var(--c-text-rgb), .18), inset -3px -3px 0 rgba(247,249,253,.25)",
    }}>
      <div className="img-ph" style={{ width: "72%", height: "72%", whiteSpace: "pre-line", fontSize: 10.5 }} aria-hidden={tiny ? "true" : undefined}>{tiny ? "" : label}</div>
    </div>
  );
}

function Price({ value, big }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "baseline", gap: 5 }}>
      <span aria-hidden="true" style={{
        width: 10, height: 10, background: "var(--c-gold)", alignSelf: "center",
        boxShadow: "inset -2px -2px 0 rgba(8,8,18,.25), inset 2px 2px 0 rgba(247,249,253,.4)",
      }}></span>
      <span style={{ fontFamily: "var(--font-pixel)", fontSize: big ? 24 : 18, fontWeight: 700 }}>{value}</span>
      <span style={{ fontFamily: "var(--font-body)", fontSize: 11, color: "var(--c-text-2)" }}>Kredi</span>
    </span>
  );
}

// ---------------------------------------------------------------
// Product card types — active site logic (category → A/B/C)
//   A: V.I.P. / rütbe / destekçi paketleri (premium, altın vurgu)
//   B: eşya & kozmetik satışları (eşya çerçevesi, kompakt)
//   C: efekt / pet / karakter görselleri (büyülü, cyan-mor)
// Eski taslak varyantlar ("A/B/C" tek tip) Tweaks'te durmaya devam eder;
// "auto" seçiliyken kart tipi ürün kategorisinden türetilir.
// ---------------------------------------------------------------
function nekoCardType(p) {
  if (p.cat === "Diyar Özelleştirme") return "D";
  if (p.cat === "Rütbeler" || p.badge === "Destekçi") return "A";
  if (p.cat === "Petler" || p.cat === "Efektler") return "C";
  return "B";
}
const NEKO_TYPE_COLORS = { A: "var(--c-gold)", B: "var(--c-accent)", C: "var(--c-magic)", D: "var(--c-diyar)" };

function CardAddBtn({ p, onAdd, cls, style, label }) {
  return (
    <button type="button" className={cls} style={style} disabled={p.soldOut}
      onClick={() => { if (!p.soldOut && onAdd) onAdd(p); }}>
      {label || (p.soldOut ? "Tükendi" : "Sepete Ekle")}
    </button>
  );
}

// Type A — V.I.P. / Destekçi: güçlü çerçeve, altın vurgu, p2w-değil notu
function ProductCardTypeA({ p, onAdd }) {
  return (
    <div className="px-shadow card-hover pcard pcard-a">
      <div className="block-3" style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <div className="pcard-a-ribbon">
          <span className="pcard-a-label"><span className="px-gold-dot" aria-hidden="true"></span>V.I.P. · Destekçi</span>
          <span className={"badge " + p.badgeCls} style={{ fontSize: 11 }}>{p.badge}</span>
        </div>
        <div style={{ padding: 16, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
          <div className="pcard-a-slot"><ItemSlot label={p.ph} /></div>
          <div style={{ fontFamily: "var(--font-pixel)", fontSize: 19, fontWeight: 700 }}>{p.name}</div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.55, color: "var(--c-text-2)", margin: 0, flex: 1 }}>{p.desc}</p>
          <span className="pcard-note">Oyun gücü vermez — görsel & destekçi ayrıcalıkları</span>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Price value={p.price} />
            <CardAddBtn p={p} onAdd={onAdd} cls="btn btn-primary btn-sm" />
          </div>
        </div>
      </div>
    </div>
  );
}

// Type B — Eşya / Kozmetik: eşya-çerçevesi hissi, kompakt, grid dostu
function ProductCardTypeB({ p, onAdd }) {
  return (
    <div className="px-shadow-sm card-hover pcard pcard-b">
      <div className="frost-2" style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10, height: "100%" }}>
        <div className="pcard-b-slot"><ItemSlot label={p.ph} /></div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-pixel)", fontSize: 16.5, fontWeight: 600, lineHeight: 1.2, minWidth: 0 }}>{p.name}</span>
          <span className={"badge " + p.badgeCls} style={{ fontSize: 10.5, flexShrink: 0 }}>{p.badge}</span>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, marginTop: "auto" }}>
          <Price value={p.price} />
          <CardAddBtn p={p} onAdd={onAdd} cls="btn btn-secondary btn-sm" style={{ fontSize: 13, padding: "7px 13px 9px" }}
            label={p.soldOut ? "Tükendi" : "Ekle"} />
        </div>
      </div>
    </div>
  );
}

// Type C — Efekt / Pet: büyülü önizleme alanı, cyan-mor detaylar
function ProductCardTypeC({ p, onAdd }) {
  const kind = p.cat === "Petler" ? "Pet" : "Efekt";
  return (
    <div className="px-shadow card-hover pcard pcard-c">
      <div className="block-3" style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <div className="pcard-c-preview">
          <ItemSlot label={p.ph} />
          <span className="fx-spark fx-s1 deco" aria-hidden="true"></span>
          <span className="fx-spark fx-s2 deco" aria-hidden="true"></span>
          <span className="fx-spark fx-s3 deco deco-extra" aria-hidden="true"></span>
        </div>
        <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
            <span style={{ fontFamily: "var(--font-pixel)", fontSize: 18, fontWeight: 600, lineHeight: 1.25 }}>{p.name}</span>
            <span className="badge pcard-c-badge" style={{ fontSize: 10.5, flexShrink: 0 }}>{kind}</span>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.55, color: "var(--c-text-2)", margin: 0, flex: 1 }}>{p.desc}</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <Price value={p.price} />
            <CardAddBtn p={p} onAdd={onAdd} cls="btn btn-primary btn-sm" />
          </div>
        </div>
      </div>
    </div>
  );
}

// Type D — Diyar Özelleştirme: arma/sancak hissi, RPG Towny diyar kimliği
// "Diyar Önizle" → DiyarPreviewModal (görsel prototip editörü)
function ProductCardTypeD({ p, onAdd }) {
  const [pv, setPv] = React.useState(false);
  return (
    <div className="px-shadow card-hover pcard pcard-d">
      <div className="block-3" style={{ display: "flex", flexDirection: "column", height: "100%" }}>
        <div className="pcard-d-head">
          <span className="pcard-d-flag" aria-hidden="true"><span></span></span>
          <span className="pcard-d-label">Diyar Kimliği</span>
          <span className="badge badge-diyar" style={{ fontSize: 10.5 }}>Diyar</span>
        </div>
        <div className="pcard-d-preview">
          <ItemSlot label={p.ph} />
          <div className="pcard-d-swatches" aria-hidden="true">
            <span style={{ background: "var(--c-diyar)" }}></span>
            <span style={{ background: "var(--c-accent)" }}></span>
            <span style={{ background: "var(--c-magic)" }}></span>
            <span style={{ background: "var(--c-gold)" }}></span>
          </div>
        </div>
        <div style={{ padding: "12px 14px 14px", display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", gap: 8 }}>
            <span style={{ fontFamily: "var(--font-pixel)", fontSize: 18, fontWeight: 600, lineHeight: 1.25 }}>{p.name}</span>
            <span className="pcard-d-compat" title="RPG Towny diyarlarıyla uyumlu">RPG Towny</span>
          </div>
          <p style={{ fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.55, color: "var(--c-text-2)", margin: 0, flex: 1 }}>{p.desc}</p>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
            <Price value={p.price} />
            <button type="button" className="btn btn-ghost btn-sm" style={{ fontSize: 12.5 }}
              onClick={() => setPv(true)} aria-haspopup="dialog">Diyar Önizle</button>
          </div>
          <CardAddBtn p={p} onAdd={onAdd} cls="btn btn-primary btn-sm" style={{ width: "100%", justifyContent: "center" }}
            label={p.soldOut ? "Tükendi" : "Sepete Ekle"} />
        </div>
      </div>
      {pv && <DiyarPreviewModal p={p} onAdd={onAdd} onClose={() => setPv(false)} />}
    </div>
  );
}

// ---------------------------------------------------------------
// Diyar Önizlemesi — RPG Towny diyar kimliği editörü (görsel prototip)
// Renk / arma / sancak seçimleri örnek “Asteria Diyarı” üzerinde canlı
// önizlenir. Seçimler satın alım sonrası oyun içinde uygulanır.
// ---------------------------------------------------------------
const DIYAR_COLORS = [
  ["Zümrüt", "#76C5FF"], ["Buz Mavisi", "#76C5FF"], ["Mor Sis", "#C48CF5"],
  ["Güneş", "#F5C53C"], ["Kor", "#EE3F86"], ["Gümüş", "#A6B0BC"],
];
const DIYAR_EMBLEMS = ["Kale", "Kılıç", "Yıldız", "Kurt", "Çapa", "Taç"];
const DIYAR_BANNERS = [
  ["Kırlangıç", "polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%)"],
  ["Sivri Uç", "polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%)"],
  ["Kalıp", "polygon(0 0, 100% 0, 100% 100%, 0 100%)"],
];

function DiyarPreviewModal({ p, onAdd, onClose }) {
  const [ci, setCi] = React.useState(0);
  const [ei, setEi] = React.useState(0);
  const [bi, setBi] = React.useState(0);
  const [after, setAfter] = React.useState(true);
  React.useEffect(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);
  const col = after ? DIYAR_COLORS[ci][1] : "#5B6473"; // önce: boyasız taş grisi
  const emblem = DIYAR_EMBLEMS[ei].slice(0, 2);
  const mapCells = 21; // 7×3 mini harita
  const body = (
    <React.Fragment>
      <div className="pz-modal-overlay" onClick={onClose}></div>
      <div className="pz-modal glass-1" role="dialog" aria-modal="true" aria-label={"Diyar önizlemesi — " + p.name}
        style={{ padding: "clamp(18px, 3vw, 28px)", width: "min(640px, calc(100vw - 24px))" }}>
        <div style={{ display: "flex", alignItems: "flex-start", gap: 12, marginBottom: 14 }}>
          <div style={{ flex: 1, minWidth: 0 }}>
            <h2 style={{ fontFamily: "var(--font-pixel)", fontSize: 22, margin: "0 0 4px" }}>Diyar Önizlemesi</h2>
            <div style={{ display: "flex", gap: 8, alignItems: "center", flexWrap: "wrap", fontFamily: "var(--font-body)", fontSize: 12, color: "var(--c-text-2)" }}>
              {p.name}
              <span className="pcard-d-compat">RPG Towny</span>
            </div>
          </div>
          <button type="button" className="cart-remove" onClick={onClose} aria-label="Önizlemeyi kapat">×</button>
        </div>

        <div className="dp-grid">
          {/* Sol — canlı önizleme: Asteria Diyarı */}
          <div className="px-shadow-sm">
            <div className="block-3" style={{ padding: 14, display: "flex", flexDirection: "column", gap: 12, "--px-step": "6px" }}>
              {/* Diyar künyesi */}
              <div style={{ display: "flex", gap: 9, alignItems: "center" }}>
                <span aria-hidden="true" style={{ width: 12, height: 20, flexShrink: 0, background: col, clipPath: "polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%)", boxShadow: "inset 0 2px 0 rgba(247,249,253,.3)" }}></span>
                <strong style={{ fontFamily: "var(--font-pixel)", fontSize: 15.5, flex: 1, minWidth: 0 }}>Asteria Diyarı</strong>
                <span style={{ fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 700, letterSpacing: ".08em", padding: "2px 6px", color: col, boxShadow: "inset 0 0 0 1px " + col }}>LV 24</span>
              </div>
              {/* Sancak */}
              <div style={{ display: "flex", justifyContent: "center", padding: "4px 0" }}>
                <div aria-hidden="true" style={{ width: 86, height: 122, position: "relative", background: "linear-gradient(180deg, " + col + ", " + col + "99)", clipPath: DIYAR_BANNERS[bi][1], boxShadow: "inset 0 3px 0 rgba(247,249,253,.28), inset -3px 0 0 rgba(8,8,18,.18)" }}>
                  <span style={{ position: "absolute", left: "50%", top: 34, transform: "translateX(-50%)", width: 34, height: 34, display: "grid", placeItems: "center", background: "rgba(12, 23, 48, .45)", color: "#F7F9FD", fontFamily: "var(--font-pixel)", fontSize: 14.5, fontWeight: 700, boxShadow: "inset 0 0 0 2px rgba(247,249,253,.35)" }}>{emblem}</span>
                </div>
              </div>
              {/* Harita işaretçisi */}
              <div>
                <div style={{ fontFamily: "var(--font-body)", fontSize: 9.5, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--c-text-2)", marginBottom: 6 }}>Harita görünümü</div>
                <div style={{ position: "relative", display: "grid", gridTemplateColumns: "repeat(7, 1fr)", gap: 2 }}>
                  {Array.from({ length: mapCells }).map((_, i) => <span key={i} className="dp-mapcell"></span>)}
                  <span aria-hidden="true" style={{ position: "absolute", left: "44%", top: "18%", width: 14, height: 14, background: col, transform: "rotate(45deg)", boxShadow: "0 0 0 2px rgba(var(--c-bg-rgb), .9), inset -3px -3px 0 rgba(8,8,18,.3)" }}></span>
                  <span style={{ position: "absolute", left: "44%", top: "52%", transform: "translateX(-22%)", fontFamily: "var(--font-body)", fontSize: 9, fontWeight: 700, color: "var(--c-text)", background: "rgba(var(--c-bg-rgb), .85)", padding: "1px 5px" }}>Asteria</span>
                </div>
              </div>
              {/* Önce / Sonra */}
              <div style={{ display: "flex", gap: 6 }} role="group" aria-label="Önce / sonra karşılaştırması">
                <button type="button" className="chip" aria-pressed={!after} onClick={() => setAfter(false)} style={{ flex: 1, justifyContent: "center", display: "inline-flex" }}>Önce</button>
                <button type="button" className="chip" aria-pressed={after} onClick={() => setAfter(true)} style={{ flex: 1, justifyContent: "center", display: "inline-flex" }}>Sonra</button>
              </div>
            </div>
          </div>

          {/* Sağ — seçiciler */}
          <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
            <div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--c-text-2)", marginBottom: 8 }}>
                Sancak rengi — <span style={{ color: "var(--c-text)" }}>{DIYAR_COLORS[ci][0]}</span>
              </div>
              <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                {DIYAR_COLORS.map(([n, c], i) => (
                  <button key={n} type="button" className="dp-swatch" style={{ background: c }} aria-pressed={ci === i} aria-label={"Renk: " + n} onClick={() => { setCi(i); setAfter(true); }}></button>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--c-text-2)", marginBottom: 8 }}>
                Arma — <span style={{ color: "var(--c-text)" }}>{DIYAR_EMBLEMS[ei]}</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 6 }}>
                {DIYAR_EMBLEMS.map((n, i) => (
                  <button key={n} type="button" className="dp-emblem" aria-pressed={ei === i} aria-label={"Arma: " + n} onClick={() => { setEi(i); setAfter(true); }}>{n.slice(0, 2)}</button>
                ))}
              </div>
            </div>
            <div>
              <div style={{ fontFamily: "var(--font-body)", fontSize: 10.5, fontWeight: 700, letterSpacing: ".1em", textTransform: "uppercase", color: "var(--c-text-2)", marginBottom: 8 }}>
                Sancak stili — <span style={{ color: "var(--c-text)" }}>{DIYAR_BANNERS[bi][0]}</span>
              </div>
              <div style={{ display: "flex", gap: 8 }}>
                {DIYAR_BANNERS.map(([n, clip], i) => (
                  <button key={n} type="button" className="dp-emblem" style={{ aspectRatio: "auto", width: 44, height: 52, padding: 6 }} aria-pressed={bi === i} aria-label={"Sancak stili: " + n} onClick={() => { setBi(i); setAfter(true); }}>
                    <span aria-hidden="true" style={{ display: "block", width: 20, height: 32, background: "currentColor", clipPath: clip, opacity: .8 }}></span>
                  </button>
                ))}
              </div>
            </div>
            <span className="pz-safety">Görsel önizleme — seçimlerin satın alım sonrası oyun içinde diyarına uygulanır.</span>
          </div>
        </div>

        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginTop: 18 }}>
          <button type="button" className="btn btn-primary btn-sm" onClick={() => { onAdd && onAdd(p); onClose(); }}>
            Sepete Ekle · {p.price} Kredi
          </button>
          <button type="button" className="btn btn-ghost btn-sm" onClick={onClose}>Önizlemeyi Kapat</button>
        </div>
      </div>
    </React.Fragment>
  );
  // Kartın clip-path'li atalarından kaçmak için body'ye portal
  return ReactDOM.createPortal(body, document.body);
}

// ---------------------------------------------------------------
// Product card — "auto" (aktif site: kategoriye göre A/B/C/D) +
// eski taslak varyantlar A / B / C (Tweaks'ten zorlanabilir, silinmedi)
// + D (yeni diyar kartı, Tweaks'ten tüm ürünlerde önizlenebilir)
// ---------------------------------------------------------------
function ProductCard({ p, variant, onAdd }) {
  const v = variant || "auto";
  if (v === "auto") {
    const t = nekoCardType(p);
    if (t === "A") return <ProductCardTypeA p={p} onAdd={onAdd} />;
    if (t === "C") return <ProductCardTypeC p={p} onAdd={onAdd} />;
    if (t === "D") return <ProductCardTypeD p={p} onAdd={onAdd} />;
    return <ProductCardTypeB p={p} onAdd={onAdd} />;
  }
  if (v === "D") return <ProductCardTypeD p={p} onAdd={onAdd} />;
  const addBtn = (cls, style, label) => (
    <button type="button" className={cls} style={style} disabled={p.soldOut}
      onClick={() => { if (!p.soldOut && onAdd) onAdd(p); }}>
      {label || (p.soldOut ? "Tükendi" : "Sepete Ekle")}
    </button>
  );
  if (v === "B") {
    return (
      <div className="px-shadow card-hover">
        <div className="frost-2" style={{ display: "flex", flexDirection: "column" }}>
          <div style={{
            background: "rgba(var(--c-accent-rgb), .14)", padding: "8px 14px",
            display: "flex", justifyContent: "space-between", alignItems: "center",
            boxShadow: "inset 0 -2px 0 var(--frost-border)",
          }}>
            <span className={"badge " + p.badgeCls} style={{ fontSize: 11 }}>{p.badge}</span>
            <Price value={p.price} />
          </div>
          <div style={{ padding: 14, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
            <ItemSlot label={p.ph} />
            <div style={{ fontFamily: "var(--font-pixel)", fontSize: 18, fontWeight: 600 }}>{p.name}</div>
            <p style={{ fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.55, color: "var(--c-text-2)", margin: 0, flex: 1 }}>{p.desc}</p>
            {addBtn("btn btn-secondary btn-sm", { width: "100%" })}
          </div>
        </div>
      </div>
    );
  }
  if (v === "C") {
    return (
      <div className="px-shadow-sm card-hover">
        <div className="block-3" style={{ padding: 12, display: "flex", flexDirection: "column", gap: 10, "--px-step": "5px" }}>
          <div style={{ display: "flex", gap: 12, alignItems: "center" }}>
            <ItemSlot label={p.ph} size={64} />
            <div style={{ display: "flex", flexDirection: "column", gap: 4, minWidth: 0 }}>
              <span style={{ fontFamily: "var(--font-pixel)", fontSize: 16.5, fontWeight: 600, lineHeight: 1.15 }}>{p.name}</span>
              <span className={"badge " + p.badgeCls} style={{ fontSize: 10.5, alignSelf: "flex-start" }}>{p.badge}</span>
            </div>
          </div>
          {addBtn("btn btn-primary btn-sm", { width: "100%", justifyContent: "space-between", fontFamily: "var(--font-body)", fontSize: 13 },
            p.soldOut ? "Tükendi" : <React.Fragment><span>Sepete Ekle</span><span style={{ fontFamily: "var(--font-pixel)", fontSize: 15 }}>{p.price} Kredi</span></React.Fragment>)}
        </div>
      </div>
    );
  }
  // Variant A — Eşya Çerçevesi
  return (
    <div className="px-shadow card-hover">
      <div className="block-3" style={{ padding: 14, display: "flex", flexDirection: "column", gap: 12, height: "100%" }}>
        <ItemSlot label={p.ph} />
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8 }}>
          <span style={{ fontFamily: "var(--font-pixel)", fontSize: 18, fontWeight: 600 }}>{p.name}</span>
          <span className={"badge " + p.badgeCls} style={{ fontSize: 11, flexShrink: 0 }}>{p.badge}</span>
        </div>
        <p style={{ fontFamily: "var(--font-body)", fontSize: 12, lineHeight: 1.55, color: "var(--c-text-2)", margin: 0, flex: 1 }}>{p.desc}</p>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <Price value={p.price} />
          {addBtn("btn btn-primary btn-sm")}
        </div>
      </div>
    </div>
  );
}

// ---------------------------------------------------------------
// Cart — localStorage, cross-component event sync
// ---------------------------------------------------------------
function readCart() {
  try { return JSON.parse(localStorage.getItem("neko-cart-v1") || "[]"); } catch (e) { return []; }
}
function writeCart(items) {
  try { localStorage.setItem("neko-cart-v1", JSON.stringify(items)); } catch (e) {}
  window.dispatchEvent(new CustomEvent("neko:cart"));
}
function useCart() {
  const [items, setItems] = React.useState(readCart);
  React.useEffect(() => {
    const on = () => setItems(readCart());
    window.addEventListener("neko:cart", on);
    window.addEventListener("storage", on);
    return () => { window.removeEventListener("neko:cart", on); window.removeEventListener("storage", on); };
  }, []);
  const add = (p) => {
    const next = [...readCart()];
    const ex = next.find((i) => i.id === p.id);
    if (ex) ex.qty += 1; else next.push({ id: p.id, qty: 1 });
    writeCart(next);
    nekoToast(p.name + " sepete eklendi");
  };
  const remove = (id) => writeCart(readCart().filter((i) => i.id !== id));
  const count = items.reduce((s, i) => s + i.qty, 0);
  const detailed = items.map((i) => ({ ...i, p: NEKO_PRODUCTS.find((p) => p.id === i.id) })).filter((i) => i.p);
  const total = detailed.reduce((s, i) => s + i.p.price * i.qty, 0);
  return { items: detailed, add, remove, count, total };
}

function CartDrawer({ cart, open, onClose }) {
  React.useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <React.Fragment>
      <div className="cart-overlay" onClick={onClose}></div>
      <div className="cart-drawer glass-1" role="dialog" aria-modal="true" aria-label="Sepet önizlemesi" style={{ padding: 20 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
          <h2 style={{ fontFamily: "var(--font-pixel)", fontSize: 22, margin: 0 }}>Sepet {cart.count > 0 ? "· " + cart.count : ""}</h2>
          <button type="button" className="cart-remove" onClick={onClose} aria-label="Sepeti kapat">×</button>
        </div>
        {cart.items.length === 0 ? (
          <div className="empty-state" style={{ padding: "40px 10px" }}>
            <div className="face" aria-hidden="true">[ ]</div>
            <p style={{ fontSize: 13.5, color: "var(--c-text-2)" }}>Sepetin boş. Mağazadan kozmetik bir şeyler seç.</p>
          </div>
        ) : (
          <React.Fragment>
            <div className="cart-items">
              {cart.items.map((i) => (
                <div key={i.id} className="cart-row block-3" style={{ "--px-step": "5px", boxShadow: "inset 4px 0 0 " + NEKO_TYPE_COLORS[nekoCardType(i.p)] }}>
                  <ItemSlot label={i.p.ph} size={46} />
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontFamily: "var(--font-pixel)", fontSize: 15, fontWeight: 600 }}>{i.p.name}{i.qty > 1 ? " ×" + i.qty : ""}</div>
                    <div style={{ fontSize: 12, color: "var(--c-text-2)" }}>{i.p.price * i.qty} Kredi</div>
                  </div>
                  <button type="button" className="cart-remove" onClick={() => cart.remove(i.id)} aria-label={i.p.name + " ürününü sepetten çıkar"}>×</button>
                </div>
              ))}
            </div>
            <div style={{ borderTop: "2px solid rgba(var(--c-border-rgb), .6)", paddingTop: 14, marginTop: 12 }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 12 }}>
                <span style={{ fontSize: 13, fontWeight: 700 }}>Toplam</span>
                <Price value={cart.total} big />
              </div>
              <a href="Giris Yap.html" className="btn btn-primary" style={{ width: "100%" }}>Devam için Giriş Yap</a>
              <p style={{ fontSize: 11.5, color: "var(--c-text-2)", textAlign: "center", marginTop: 10 }}>
                Önizleme — gerçek ödeme alınmaz.
              </p>
            </div>
          </React.Fragment>
        )}
      </div>
    </React.Fragment>
  );
}

// ---------------------------------------------------------------
// FAQ accordion
// ---------------------------------------------------------------
function FAQAccordion({ items, idPrefix }) {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <div className="faq-list">
      {items.map((f, i) => {
        const open = openIdx === i;
        return (
          <div key={i} className="px-shadow-sm">
            <div className="frost-2" style={{ "--px-step": "6px" }}>
              <h3 style={{ margin: 0 }}>
                <button type="button" className="faq-q" aria-expanded={open}
                  aria-controls={idPrefix + "-a-" + i} id={idPrefix + "-q-" + i}
                  onClick={() => setOpenIdx(open ? -1 : i)}>
                  {f.q}
                  <span className="ind" aria-hidden="true">{open ? "−" : "+"}</span>
                </button>
              </h3>
              {open && (
                <div className="faq-a" id={idPrefix + "-a-" + i} role="region" aria-labelledby={idPrefix + "-q-" + i}>
                  {f.a}
                </div>
              )}
            </div>
          </div>
        );
      })}
    </div>
  );
}

// ---------------------------------------------------------------
// Sky + blocky terrain (hero decor — squares only, no SVG)
// ---------------------------------------------------------------
const nekoTerrainHeights = [3, 4, 4, 5, 6, 5, 7, 8, 8, 7, 6, 5, 5, 4, 5, 6, 7, 7, 6, 5, 4, 4, 3, 3, 4, 5, 5, 6, 5, 4, 3, 3];
const nekoOreCols = { 7: 2, 12: 1, 18: 3, 25: 1 };

function NekoTerrain({ theme, unit }) {
  const u = unit || 16;
  const sun = theme === "sunlight";
  return (
    <div aria-hidden="true" style={{ display: "flex", alignItems: "flex-end", width: "100%", overflow: "hidden" }}>
      {nekoTerrainHeights.map((h, i) => (
        <div key={i} style={{ flex: 1, display: "flex", flexDirection: "column" }}>
          {Array.from({ length: h }).map((_, j) => (
            <div key={j} style={{
              height: u,
              background: j === 0 ? (sun ? "#20227A" : "#20227A") : (nekoOreCols[i] === j ? (sun ? "#F5C53C" : "#76C5FF") : (sun ? "#0A1C4A" : "#0A1C4A")),
              boxShadow: "inset 0 1px 0 rgba(247,249,253,.12), inset 1px 0 0 rgba(8,8,18,.08)",
            }}></div>
          ))}
        </div>
      ))}
    </div>
  );
}

function NekoSky({ theme }) {
  const sun = theme === "sunlight";
  const stars = [[8, 18, 4], [16, 38, 3], [26, 12, 5], [38, 30, 3], [55, 10, 4], [64, 26, 3], [76, 16, 5], [88, 34, 3], [93, 12, 4], [46, 44, 3]];
  return (
    <div aria-hidden="true" style={{
      position: "absolute", inset: 0,
      background: sun
        ? "linear-gradient(180deg, #0A1C4A 0%, #20227A 45%, #0C1730 100%)"
        : "linear-gradient(180deg, #0C1730 0%, #0A1C4A 55%, #20227A 100%)",
    }}>
      {sun ? (
        <div className="deco" style={{
          position: "absolute", left: "9%", top: 100, width: 42, height: 42, background: "#F5C53C",
          boxShadow: "0 -54px 0 -14px #F5C53C, 0 54px 0 -14px #F5C53C, -54px 0 0 -14px #F5C53C, 54px 0 0 -14px #F5C53C, -40px -40px 0 -16px #F8D44E, 40px -40px 0 -16px #F8D44E, -40px 40px 0 -16px #F8D44E, 40px 40px 0 -16px #F8D44E",
        }}></div>
      ) : (
        <React.Fragment>
          <div className="deco" style={{ position: "absolute", right: "11%", top: 96, width: 38, height: 38, background: "#F7F9FD", opacity: .9, clipPath: "polygon(0 0, 62% 0, 62% 38%, 100% 38%, 100% 100%, 0 100%)" }}></div>
          {stars.map(([x, y, s], i) => (
            <div key={i} className={"deco" + (i % 2 ? " deco-extra" : "")} style={{ position: "absolute", left: x + "%", top: y + "%", width: s, height: s, background: i % 3 === 0 ? "#C48CF5" : "#76C5FF", opacity: .8 }}></div>
          ))}
        </React.Fragment>
      )}
    </div>
  );
}

Object.assign(window, {
  NEKO_CATEGORIES, NEKO_PRODUCTS, NEKO_PACKS, NEKO_MODES, NEKO_NEWS,
  NEKO_ACTIVITY, NEKO_SUPPORTERS, NEKO_FAQ_KREDI, NEKO_FAQ_DESTEK,
  NEKO_TYPE_COLORS, nekoCardType, CardAddBtn,
  ProductCardTypeA, ProductCardTypeB, ProductCardTypeC, ProductCardTypeD,
  ItemSlot, Price, ProductCard, useCart, CartDrawer, FAQAccordion,
  NekoTerrain, NekoSky, DiyarPreviewModal, DIYAR_COLORS, DIYAR_EMBLEMS, DIYAR_BANNERS,
});
