/* ============================================================
   HOLEYBET - CUSTOM SKIN JS
   PortoBet mantığı: Tek IIFE, lib.js/conn.js yok, CSS içinde
   ============================================================ */
(() => {
  /* ================ CONFIG ================ */
  const BASE = 'https://holeybetcss.com/holeybetv2/img';
  const CFG = {
    categories: {
      section: 'section.casino.landing',
      cards: [
        { img: BASE + '/icons/slot-oyunlari.webp',  href: '/casino' },
        { img: BASE + '/icons/canli-casino.webp',   href: '/livecasino' },
        { img: BASE + '/icons/spor-bahisleri.webp', href: '/Sport/upgaming/prematch' },
        { img: BASE + '/icons/holey-bonuslari.webp',href: '/promotions' }
      ]
    },
    games: {
      section: 'section.casino.landing',
      title: 'POPÜLER SLOT OYUNLARI',
      icon: '🎰',
      cards: [
        { img: BASE + '/oyunlar/oyun-01.webp', href: '/PlayGame/222872' },
        { img: BASE + '/oyunlar/oyun-02.webp', href: '/PlayGame/188957' },
        { img: BASE + '/oyunlar/oyun-03.webp', href: '/PlayGame/222872' },
        { img: BASE + '/oyunlar/oyun-04.webp', href: '/PlayGame/187956' },
        { img: BASE + '/oyunlar/oyun-05.webp', href: '/PlayGame/188894' },
        { img: BASE + '/oyunlar/oyun-06.webp', href: '/PlayGame/188979' }
      ]
    },
    livecasino: {
      title: 'POPÜLER CANLI CASINO',
      icon: '🎲',
      cards: [
        { img: BASE + '/canli/canli-01.webp', href: '/PlayGame/179516' },
        { img: BASE + '/canli/canli-02.webp', href: '/PlayGame/178989' },
        { img: BASE + '/canli/canli-03.webp', href: '/PlayGame/179639' },
        { img: BASE + '/canli/canli-04.webp', href: '/PlayGame/179639' },
        { img: BASE + '/canli/canli-05.webp', href: '/PlayGame/179065' },
        { img: BASE + '/canli/canli-06.webp', href: '/PlayGame/179516' }
      ]
    },
    sponsorluklar: {
      img: BASE + '/sponsorlar/sponsorluklarimiz.webp',
      href: 'javascript:void(0)'
    },
    sponsors: {
      cards: [
        { img: BASE + '/sponsorlar/atletico-madrid.webp', href: 'javascript:void(0)' },
        { img: BASE + '/sponsorlar/mcgregor.webp',        href: 'javascript:void(0)' },
        { img: BASE + '/sponsorlar/efes-pilsen.webp',     href: 'javascript:void(0)' },
        { img: BASE + '/sponsorlar/la-liga.webp',         href: 'javascript:void(0)' }
      ]
    },
    slot:      { img: BASE + '/banners/site-mac.webp',        href: 'https://Holeytv.com' },
    tv:        { img: BASE + '/gif/gold-banner.gif',           href: 'https://t.me/holeybetofficial' },
    affiliate: { img: BASE + '/banners/ortaklik.webp', href: 'javascript:void(0)' }
  };
  /* ================ CSS ================ */
  const CSS = `
    /* Tema */
    :root, html { --theme-color: #c9a227 !important; }
    /* Arka plan */
    body {
      background-color: #0a0a0a !important;
      background-image: url('https://holeybetcss.com/holeybetv2/img/arkaplan.webp') !important;
      background-size: cover !important;
      background-attachment: fixed !important;
      background-position: center top !important;
    }
    /* Navigation */
    header .navigation { border-bottom: 2px solid #c9a227 !important; }
    /* Hamburger */
    html body header .navigation .container .hamburger,
    html body header .navigation .hamburger {
      background: linear-gradient(135deg, #8a6d0f, #c9a227, #f0d060) !important;
      background-color: #c9a227 !important;
      border: none !important;
    }
    html body header .navigation .hamburger i,
    html body header .navigation .hamburger span,
    html body header .navigation .hamburger::before,
    html body header .navigation .hamburger::after { background-color: #000 !important; }
    /* WhatsApp */
    html body a.button.primary.whatsapp-header[href*="whatsapp"] { background: #25D366 !important; color: #fff !important; }
    html body a.button.primary.whatsapp-header:not([href*="whatsapp"]) { background: #1a1a1a !important; border: 1px solid #2a2a2a !important; color: #fff !important; }
    /* Telegram butonu — mavi */
    html body a.button.secondary.telegram-header,
    html body a[href*="t.me"].button { 
      background: #229ED9 !important; 
      color: #fff !important;
      border: none !important;
    }
    /* FlashBar kapat butonu */
    .FlashBar button.close_bar,
    .FlashBar .close_bar,
    .FlashBar button[class*="close"] {
      background: rgba(0,0,0,0.3) !important;
      color: #000 !important;
      border-radius: 50% !important;
      width: 24px !important;
      height: 24px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 14px !important;
      opacity: 1 !important;
    }
    /* Hamburger — header rengiyle uyumlu */
    html body header .navigation .hamburger,
    html body .hamburger {
      background: transparent !important;
      border: 1px solid rgba(201,162,39,0.4) !important;
      border-radius: 6px !important;
    }
    html body .hamburger i {
      background-color: #c9a227 !important;
      display: block !important;
    }
    /* FlashBar kapat butonu */
    .FlashBar button.close_bar,
    .FlashBar .close_bar {
      background: transparent !important;
      border: none !important;
      color: #000 !important;
      font-size: 20px !important;
      font-weight: 900 !important;
      opacity: 1 !important;
      cursor: pointer !important;
      filter: none !important;
      visibility: visible !important;
    }
    /* Kayıt */
    header .top .functions a.button.primary.deposit { background: linear-gradient(135deg,#8a6d0f,#c9a227,#f0d060) !important; color: #000 !important; font-weight: 700 !important; }
    /* FlashBar */
    .FlashBar { background: linear-gradient(90deg,#8a6d0f,#c9a227,#f0d060,#c9a227,#8a6d0f) !important; color: #000 !important; }
    .FlashBar * { color: #000 !important; }
    /* Back to top */
    button.back-to-top { background: linear-gradient(135deg,#8a6d0f,#c9a227,#f0d060) !important; color: #000 !important; }
    /* Footer */
    footer { border-top: 2px solid #8a6d0f !important; }
    /* Bonus talep butonları — altın */
    .promotions .tab, .promotions button,
    [class*="bonus"] .tab, [class*="filter"] button,
    [class*="tab-item"], [class*="tabItem"] {
      background: #1a1a1a !important;
      border: 1px solid #c9a227 !important;
      color: #c9a227 !important;
    }
    .promotions .tab.active, .promotions .tab[class*="active"],
    [class*="tab-item"][class*="active"], [class*="tabItem"][class*="active"] {
      background: linear-gradient(135deg, #8a6d0f, #c9a227, #f0d060) !important;
      color: #000 !important;
    }
    /* Kullan butonu */
    .promotions [class*="btn"], [class*="promo"] [class*="btn"] {
      background: linear-gradient(135deg, #8a6d0f, #c9a227, #f0d060) !important;
      color: #000 !important;
      font-weight: 700 !important;
    }
    /* Swiper */
    .swiper-pagination-bullet-active { background: #c9a227 !important; }
    /* Scrollbar */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-thumb { background: #8a6d0f; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #c9a227; }
    /* Jackpot section normal akışta olsun */
    section.cards.landing { position: relative !important; }
    /* main.home overflow düzelt */
    main.home { overflow: visible !important; height: auto !important; min-height: 100vh !important; }
    /* Boş section'ları gizle */
    main.home section.casino.landing { display: none !important; }
    main.home section.casino:empty { display: none !important; }
    /* Sohbet */
    .chatButton, .chatButton--ripple { background: linear-gradient(135deg,#FAD961,#C28F2C) !important; }
    /* Mobile sticky */
    header .mobile-sticky-bar { border-top: 2px solid #c9a227 !important; }
    /* Mobil çarkıfelek a'sını gizle, div'i koru */
    header .navigation .guest.guest-telegram a.button { visibility: hidden !important; width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; }
    /* ---- CUSTOM SECTION'LAR ---- */
    .hb-section { display: block; width: 100%; margin: 0 auto 40px auto; padding: 0 24px; box-sizing: border-box; max-width: 1420px; }
    /* Kategoriler */
    .hb-categories { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
    .hb-categories a { display: block; border-radius: 12px; overflow: hidden; transition: transform .2s; }
    .hb-categories a:hover { transform: translateY(-3px); }
    .hb-categories img { width: 100%; height: auto; display: block; }
    /* Oyunlar */
    .hb-games-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
    .hb-games-icon { width: 44px; height: 44px; background: #c9a227; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
    .hb-games-title { font-size: 22px; font-weight: 800; color: #fff; }
    .hb-games-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; }
    .hb-games-grid a { display: block; border-radius: 12px; overflow: hidden; transition: transform .2s; }
    .hb-games-grid a:hover { transform: translateY(-3px); }
    .hb-games-grid img { width: 100%; height: auto; display: block; }
    /* Sponsorluklar banner */
    .hb-banner a { display: block; border-radius: 12px; overflow: hidden; transition: transform .2s, box-shadow .2s; }
    .hb-banner a:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(201,162,39,.45); }
    .hb-banner img { width: 100%; height: auto; display: block; border-radius: 12px; }
    /* Popup açıkken sayfa kaymasını engelle */
    .promotion_modal.home-popup.active {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      z-index: 99999 !important;
    }
    .hb-sponsors { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; border: 1px solid #c9a227; border-radius: 18px; padding: 18px; }
    .hb-sponsors a { position: relative; display: block; border-radius: 12px; overflow: hidden; transition: transform .2s; }
    .hb-sponsors a:hover { transform: translateY(-3px); }
    .hb-sponsors img { width: 100%; height: auto; display: block; }
    .hb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: rgba(14,25,39,.85); color: #c9a227; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; }
    /* Responsive */
    @media (max-width: 767px) {
      .hb-section { padding: 0 10px !important; margin-bottom: 24px !important; }
      .hb-categories { grid-template-columns: repeat(2,1fr); gap: 8px; }
      .hb-games-grid { grid-template-columns: repeat(2,1fr); gap: 8px; }
      .hb-sponsors { grid-template-columns: repeat(2,1fr); gap: 8px; padding: 10px !important; }
    }
  `;
  /* ================ Utils ================ */
  const el = (tag, cls, html) => {
    const e = document.createElement(tag);
    if (cls) e.className = cls;
    if (html != null) e.innerHTML = html;
    return e;
  };
  const injectOnce = (id, cssText) => {
    if (document.getElementById(id)) return;
    const st = document.createElement('style');
    st.id = id;
    st.textContent = cssText;
    document.head.appendChild(st);
  };
  const waitFor = (sel, timeout = 5000) => new Promise(res => {
    const found = document.querySelector(sel);
    if (found) return res(found);
    const start = Date.now();
    const interval = setInterval(() => {
      const f = document.querySelector(sel);
      if (f) { clearInterval(interval); res(f); return; }
      if (Date.now() - start > timeout) { clearInterval(interval); res(null); }
    }, 100);
  });
  /* ================ Builders ================ */
  const buildCategories = () => {
    const wrap = el('div', 'hb-section');
    wrap.setAttribute('data-hb', 'categories');
    const grid = el('div', 'hb-categories');
    CFG.categories.cards.forEach(c => {
      const a = document.createElement('a');
      a.href = c.href;
      a.innerHTML = `<img src="${c.img}" alt="">`;
      grid.appendChild(a);
    });
    wrap.appendChild(grid);
    return wrap;
  };
  const buildGames = () => {
    const wrap = el('div', 'hb-section');
    wrap.setAttribute('data-hb', 'games');
    const head = el('div', 'hb-games-head', `
      <div class="hb-games-icon">${CFG.games.icon}</div>
      <div class="hb-games-title">${CFG.games.title}</div>
    `);
    const grid = el('div', 'hb-games-grid');
    CFG.games.cards.forEach(c => {
      const a = document.createElement('a');
      a.href = c.href;
      a.innerHTML = `<img src="${c.img}" alt="">`;
      grid.appendChild(a);
    });
    wrap.appendChild(head);
    wrap.appendChild(grid);
    return wrap;
  };
  const buildLiveCasino = () => {
    const wrap = el('div', 'hb-section');
    wrap.setAttribute('data-hb', 'livecasino');
    const head = el('div', 'hb-games-head', `
      <div class="hb-games-icon">${CFG.livecasino.icon}</div>
      <div class="hb-games-title">${CFG.livecasino.title}</div>
    `);
    const grid = el('div', 'hb-games-grid');
    CFG.livecasino.cards.forEach(c => {
      const a = document.createElement('a');
      a.href = c.href;
      a.innerHTML = `<img src="${c.img}" alt="">`;
      grid.appendChild(a);
    });
    wrap.appendChild(head);
    wrap.appendChild(grid);
    return wrap;
  };
  const buildBanner = (cfg, dataKey) => {
    const wrap = el('div', 'hb-section hb-banner');
    wrap.setAttribute('data-hb', dataKey);
    wrap.innerHTML = `<a href="${cfg.href}"><img src="${cfg.img}" alt=""></a>`;
    return wrap;
  };
  const buildSponsors = () => {
    const wrap = el('div', 'hb-section');
    wrap.setAttribute('data-hb', 'sponsors');
    const grid = el('div', 'hb-sponsors');
    CFG.sponsors.cards.forEach(c => {
      const a = document.createElement('a');
      a.href = c.href || 'javascript:void(0)';
      a.innerHTML = `<img src="${c.img}" alt="">`;
      grid.appendChild(a);
    });
    wrap.appendChild(grid);
    return wrap;
  };
  /* ================ Mount ================ */
  const mount = async () => {
    const host = await waitFor('section.casino.landing');
    if (!host) return;
    if (document.querySelector('[data-hb="games"]')) return;
    document.querySelectorAll('.customElement').forEach(el => el.remove());
    // main.home'u flex column yap - elementler sırayla dizilsin
    const main = document.querySelector('main.home');
    main.style.cssText = 'display:flex!important;flex-direction:column!important;height:auto!important;';
    // main.home içindeki tüm child'ları normal akışa al
    Array.from(main.children).forEach(child => {
      if (!child.style.position || child.style.position === 'absolute') {
        child.style.position = 'relative';
      }
    });
    const wrap = document.createElement('div');
    wrap.id = 'hb-wrapper';
    wrap.appendChild(buildCategories());
    wrap.appendChild(buildGames());
    wrap.appendChild(buildLiveCasino());
    wrap.appendChild(buildBanner(CFG.sponsorluklar, 'sponsorluklar'));
    wrap.appendChild(buildSponsors());
    wrap.appendChild(buildBanner(CFG.slot, 'slot'));
    wrap.appendChild(buildBanner(CFG.tv, 'tv'));
    wrap.appendChild(buildBanner(CFG.affiliate, 'affiliate'));
    main.appendChild(wrap);
  };
  /* ================ Renk Düzeltmeleri ================ */
  const fixColors = () => {
    // FlashBar
    const fb = document.querySelector('.FlashBar');
    if (fb && !fb.dataset.hbFixed) {
      fb.querySelectorAll('*').forEach(e => e.style.color = '#000');
      fb.dataset.hbFixed = '1';
    }
    // Hamburger — transparan
    document.querySelectorAll('.hamburger').forEach(hbg => {
      hbg.setAttribute('style', 'background: transparent !important; border: 1px solid rgba(201,162,39,0.4) !important; border-radius: 6px !important;');
    });
    // # href olan linkleri devre dışı bırak
    document.querySelectorAll('[data-hb] a[href="#"]').forEach(a => {
      a.addEventListener('click', e => e.preventDefault());
      a.style.cursor = 'default';
    });
    // TV Logo ekle — web
    const telegramDiv = document.querySelector('header .top .functions .b-links');
    if (telegramDiv && !document.querySelector('.hb-tv-logo')) {
      const tvLink = document.createElement('a');
      tvLink.className = 'hb-tv-logo';
      tvLink.href = 'https://Holeytv.com';
      tvLink.target = '_blank';
      tvLink.style.cssText = 'display:inline-block;margin-left:8px;cursor:pointer;vertical-align:middle;';
      tvLink.innerHTML = '<img src="https://holeybetcss.com/holeybetv2/img/icons/tv-logo.webp" alt="HoleyTV" style="width:32px;height:32px;object-fit:contain;">';
      telegramDiv.after(tvLink);
    }
    // TV Logo ekle — mobil (guest-telegram div içine append et)
    const guestTelegram = document.querySelector('header .navigation .guest.guest-telegram');
    if (guestTelegram && !document.querySelector('.hb-tv-mobile')) {
      const tvLink = document.createElement('a');
      tvLink.className = 'hb-tv-mobile';
      tvLink.href = 'https://Holeytv.com';
      tvLink.target = '_blank';
      tvLink.style.cssText = 'display:inline-flex;align-items:center;justify-content:center;cursor:pointer;';
      tvLink.innerHTML = '<img src="https://holeybetcss.com/holeybetv2/img/icons/tv-logo.webp" alt="HoleyTV" style="width:32px;height:32px;object-fit:contain;">';
      guestTelegram.appendChild(tvLink);
    }
    // Chat button
    try {
      document.querySelectorAll('linearGradient#linear stop').forEach((s, i) => {
        s.setAttribute('stop-color', i === 0 ? '#FAD961' : '#C28F2C');
      });
    } catch(e) {}
  };
  /* ================ SPA ================ */
  const hookHistory = () => {
    if (history._hbPatched) return;
    const _ps = history.pushState, _rs = history.replaceState;
    history.pushState = function() { const r = _ps.apply(this, arguments); setTimeout(mountAll, 300); return r; };
    history.replaceState = function() { const r = _rs.apply(this, arguments); setTimeout(mountAll, 300); return r; };
    history._hbPatched = true;
  };
  const mountAll = () => { mount(); fixColors(); };
  const onNavigate = () => {
    document.querySelectorAll('[data-hb], #hb-wrapper').forEach(el => el.remove());
    mountAll();
  };
  /* ================ Başlat ================ */
  injectOnce('hb-style', CSS);
  hookHistory();
  mountAll();
  window.addEventListener('hb:navigate', onNavigate);
  window.addEventListener('popstate', onNavigate);
  document.addEventListener('visibilitychange', () => { if (!document.hidden) mountAll(); });
  console.log('[HoleyBet Skin] ✅ Yüklendi');
})();