CryptoYogi

/* Tabs — renkler JS ile set edilen --tab-color üzerinden */
  .category-switch { --tab-color:#58a6ff; display:flex; justify-content:center; align-items:center; background:#262c34; border-radius:10px; padding:6px; margin-bottom:18px; gap:6px; }
  .category-switch input[type="radio"]{ display:none; }
  .category-switch label{ flex:1; text-align:center; padding:9px 12px; font-size:15px; font-weight:800; color:#98a3ad; cursor:pointer; border-radius:8px; transition: background-color .25s, color .25s, box-shadow .25s; white-space:nowrap; }
  .category-switch input[type="radio"]:checked + label{ background:var(--tab-color); color:#07121e; box-shadow:0 2px 10px color-mix(in srgb, var(--tab-color), transparent 70%); }
  /* Inactive tints */
  .category-switch label[for="destekci"]{ color:#b9c0c7 }
  .category-switch label[for="onerilen"]{ color:#bfe7cc }
  .category-switch label[for="yillik"]{ color:#d2c2ff }

/* Wrapper (desktop grid) */
  .rank-table-wrapper{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; justify-items:stretch; align-items:start; overflow:visible; justify-content:center; }

/* Card */
  .plan-card{ background:#0d1117; border:1px solid #30363d; border-radius:12px; padding:16px; display:flex; flex-direction:column; position:relative; cursor:pointer; overflow:visible; transition: box-shadow .2s, transform .2s, border-color .2s; }
  .plan-card h2{ font-size:19px; font-weight:900; margin:0 0 4px 0; color:#c9d1d9; text-align:left }
  .rank-desc { font-size:13px; color:#adb9c3; margin:4px 0 8px; opacity:.9; text-align:left }
  .price{ font-size:26px; font-weight:900; color:#58a6ff; margin-bottom:6px; text-align:center }
  .price-duration{ font-size:13px; color:#8b949e; margin-bottom:10px; text-align:center }

/* Glow highlight (rank gradient) */
  .plan-card::before{ content:""; position:absolute; inset:-8px -8px 0; border-radius:16px; background:radial-gradient(55% 38% at 50% 0%, color-mix(in srgb, var(--bar), #000 35%), transparent 65%); filter:blur(12px); opacity:0; transition:opacity .18s ease; pointer-events:none; }
  .plan-card:hover::before, .plan-card.highlighted::before{ opacity:.9; }
  .plan-card:hover{ box-shadow:0 8px 28px color-mix(in srgb, var(--glow), transparent 45%); transform:translateY(-2px); }
  .plan-card.highlighted{ box-shadow:0 10px 40px color-mix(in srgb, var(--glow), transparent 35%); }

/* Unified progress (rank gradient) */
  .credit-progress{ margin-bottom:12px; }
  .credit-progress-label{ font-size:14px; font-weight:900; color:#c9d1d9; margin-bottom:8px; text-align:center }
  .progress-bar-container{ width:100%; height:10px; background:#30363d; border-radius:8px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
  .progress-bar-fill{ height:100%; background:var(--bar, #58a6ff); box-shadow:0 0 10px var(--glow, rgba(88,166,255,.45)); border-radius:8px; transition: width .45s ease; }

/* BUY NFT — taşma FIX */
  .buy-nft-button{ --btnBg:#101722; display:block; width:100%; height:40px; line-height:40px; padding:0 12px; font-size:13px; font-weight:900; letter-spacing:.25px; color:#eaf7ff; text-decoration:none; border-radius:10px; position:relative; background:var(--btnBg); box-sizing:border-box; overflow:hidden; border:1px solid rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
  .buy-nft-button::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:var(--bar, linear-gradient(90deg,#58a6ff,#7ab6ff)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.8; pointer-events:none; }
  .buy-nft-button:hover{ box-shadow:0 8px 18px color-mix(in srgb, var(--glow, rgba(88,166,255,.45)), transparent 40%), inset 0 0 0 1px rgba(255,255,255,.06); transform:translateY(-1px); }

.plan-card ul{ list-style:none; padding:0; margin:0; flex-grow:1; margin-top:10px; overflow:hidden; max-height:120px; transition:max-height .35s ease; text-align:left }
  .plan-card ul.expanded{ max-height:900px; }
  .plan-card ul li{ display:flex; align-items:flex-start; margin-bottom:8px; font-size:14px; color:#c9d1d9; }
  .plan-card ul li .icon{ margin-right:10px; color:#1bd663; font-size:16px; }
  .plan-card ul li .icon.red{ color:#f85149; }
  .plan-card .show-more{ font-size:13px; color:#58a6ff; margin-top:10px; margin-bottom:10px; cursor:pointer; text-align:center }
  .ton-logo { position: absolute; top: 10px; right: 10px; height: 20px; width: auto; }

.rank-img-wrap { width:100%; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; overflow:hidden; margin-bottom:10px; }
  .rank-img { display:block; width:100%; height:auto; object-fit:contain; }

/* Desktop */
  @media(min-width:1024px){
    .rank-table-container{ padding-left:8px; padding-right:8px; }
  }
  
  /* ===== Mobile (peek + scroller) ===== */
  @media(max-width:768px){
    .category-switch label{ font-size:14px; padding:8px 9px; }
    .rank-table-wrapper{
      display:flex !important;
      gap:12px;
      overflow-x:auto;
      overflow-y:visible !important;
      padding: 0 12vw 24px 4vw;      /* sağ peek */
      margin-left: calc(-4vw);       /* sadece solda negatif */
      margin-right: 0;
      scroll-snap-type:x mandatory;
      scroll-padding-left:4vw;
      scroll-padding-right:12vw;
      -webkit-overflow-scrolling:touch;
    }
    .rank-table-wrapper::-webkit-scrollbar{ display:none; }
    .rank-table-wrapper > .plan-card{ flex:0 0 65vw; max-width:65vw; }
    .plan-card{ scroll-snap-align:start; scroll-snap-stop:always; }
  }
</style>
<div class="rank-table-container">
  <div class="header-section">
    <div class="category-switch" id="catSwitch">
      <input type="radio" id="destekci" name="category" value="destekci">
      <label for="destekci">Destekçi</label>
      <input type="radio" id="onerilen" name="category" value="onerilen" checked>
      <label for="onerilen">Önerilen</label>
      <input type="radio" id="yillik" name="category" value="yillik">
      <label for="yillik">Pro</label>
    </div>
  </div>
  <div class="rank-table-wrapper">
    
    <div class="plan-card" data-category="destekci" style="--bar:linear-gradient(90deg,#9AA3AD,#6B7380);--glow:rgba(122,134,150,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Observer" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68c22f9344f4f10464f72d5a_observers.png"></div>
      <h2>Observer</h2>
      <p class="rank-desc">Topluluğu uzaktan izler.</p>
      <div class="price">3 TON</div>
      <div class="price-duration">Destekçi</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+50 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (50 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Sadece topluluğu izleyebilir.</li>
        <li><span class="icon red">✖</span> Neural Storm yok.</li>
        <li><span class="icon red">✖</span> Görev sistemine erişim yok.</li>
        <li><span class="icon red">✖</span> Temel eğitime erişim yok.</li>
        <li><span class="icon red">✖</span> Telegram Kanalı yok.</li>
        <li><span class="icon red">✖</span> YOGI Arena yok.</li>
        <li><span class="icon red">✖</span> YOGI.AI yok.</li>
        <li><span class="icon red">✖</span> Sinyal Analizi yok.</li>
        <li><span class="icon red">✖</span> Özel Yayınlar yok.</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>

<div class="plan-card" data-category="destekci" style="--bar:linear-gradient(90deg,#3A86FF,#7AB6FF);--glow:rgba(58,134,255,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Novice" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68b0e7e30d7b10b41412a354_spiders.png"></div>
      <h2>Novice</h2>
      <p class="rank-desc">İlk görevlerini tamamlar.</p>
      <div class="price">9 TON</div>
      <div class="price-duration">Sınırlı Erişim</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+100 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (100 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Görev sistemine erişim sağlar.</li>
        <li><span class="icon">✓</span> Temel eğitime erişim sağlar.</li>
        <li><span class="icon red">✖</span> Neural Storm yok.</li>
        <li><span class="icon red">✖</span> Telegram Kanalı yok.</li>
        <li><span class="icon red">✖</span> YOGI Arena yok.</li>
        <li><span class="icon red">✖</span> YOGI.AI yok.</li>
        <li><span class="icon red">✖</span> Sinyal Analizi yok.</li>
        <li><span class="icon red">✖</span> Özel Yayınlar yok.</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>

<div class="plan-card" data-category="onerilen" data-default="true" style="--bar:linear-gradient(90deg,#FF9F1C,#FF6F61);--glow:rgba(255,127,61,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Seeker" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68c02fc26a1d89632fa5770d_Seekers%20-%20burjuvas.png"></div>
      <h2>Seeker</h2>
      <p class="rank-desc">Sinyalleri takip eder, pet sahibi olur.</p>
      <div class="price">15 TON</div>
      <div class="price-duration">1 Ay</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+500 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (500 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Neural Storm</li>
        <li><span class="icon">✓</span> Telegram Kanalı</li>
        <li><span class="icon">✓</span> Temel Eğitim</li>
        <li><span class="icon">✓</span> Seeker Görevleri</li>
        <li><span class="icon">✓</span> YOGI Arena</li>
        <li><span class="icon">✓</span> YOGI.AI</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>

<div class="plan-card" data-category="onerilen" style="--bar:linear-gradient(90deg,#0B3D2E,#0F8B4C);--glow:rgba(15,139,76,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Monk" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68c22f92d1949f0985635134_Monks.png"></div>
      <h2>Monk</h2>
      <p class="rank-desc">Derin analizlere erişir.</p>
      <div class="price">30 TON</div>
      <div class="price-duration">3 Ay</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+1.500 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (1500 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Neural Storm</li>
        <li><span class="icon">✓</span> Telegram Kanalı</li>
        <li><span class="icon">✓</span> Temel Eğitim + Akademi</li>
        <li><span class="icon">✓</span> Monk Görevleri</li>
        <li><span class="icon">✓</span> YOGI Arena</li>
        <li><span class="icon">✓</span> YOGI.AI</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>

<div class="plan-card" data-category="onerilen" style="--bar:linear-gradient(90deg,#B8F2E6,#7AE582);--glow:rgba(122,229,130,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Oracle" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68c22f93e9d11265dfad2023_oracles.png"></div>
      <h2>Oracle</h2>
      <p class="rank-desc">Geleceği yorumlar.</p>
      <div class="price">80 TON</div>
      <div class="price-duration">6 Ay</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+3.000 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (3000 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Neural Storm</li>
        <li><span class="icon">✓</span> Telegram Kanalı</li>
        <li><span class="icon">✓</span> Temel Eğitim + Akademi</li>
        <li><span class="icon">✓</span> Oracle Görevleri</li>
        <li><span class="icon">✓</span> YOGI Arena</li>
        <li><span class="icon">✓</span> YOGI.AI</li>
        <li><span class="icon">✓</span> Sinyal Analizi</li>
        <li><span class="icon">✓</span> Özel Yayınlar</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>

<div class="plan-card" data-category="yillik" style="--bar:linear-gradient(90deg,#7b61ff,#9b81f5);--glow:rgba(123,97,255,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Master" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68c6e4f333b7296eb964b9d7_masters.png"></div>
      <h2>Master</h2>
      <p class="rank-desc">Teknik ve içsel ustalık.</p>
      <div class="price">150 TON</div>
      <div class="price-duration">Yıllık</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+5.000 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (5000 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Neural Storm</li>
        <li><span class="icon">✓</span> Telegram Kanalı</li>
        <li><span class="icon">✓</span> Temel Eğitim + Akademi</li>
        <li><span class="icon">✓</span> Tüm Görevler</li>
        <li><span class="icon">✓</span> YOGI Arena</li>
        <li><span class="icon">✓</span> YOGI.AI</li>
        <li><span class="icon">✓</span> Sinyal Analizi</li>
        <li><span class="icon">✓</span> Özel Yayınlar</li>
        <li><span class="icon">✓</span> Beta Test Hakları</li>
        <li><span class="icon">✓</span> Öncelikli Destek</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>

<div class="plan-card" data-category="yillik" style="--bar:linear-gradient(90deg,#00FFE0,#00BFB3);--glow:rgba(0,200,180,.45)">
      <img src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/689670388705689d92e1355d_ton_symbol.png" alt="TON" class="ton-logo" />
      <div class="rank-img-wrap"><img class="rank-img" alt="Yogi" src="https://cdn.prod.website-files.com/67fb1cd83af51c4fe96dacb2/68c6cd204d5db86ac5baf1da_yogies3-yatay3.png"></div>
      <h2>Yogi</h2>
      <p class="rank-desc">En yüksek bilgelik ve toplulukta liderlik.</p>
      <div class="price">300 TON</div>
      <div class="price-duration">Ömür Boyu</div>
      <div class="credit-progress">
        <div class="credit-progress-label">+10.000 Kredi</div>
        <div class="progress-bar-container"><div class="progress-bar-fill" style="width: calc( (10000 / 10000) * 100%);"></div></div>
      </div>
      <ul>
        <li><span class="icon">✓</span> Neural Storm</li>
        <li><span class="icon">✓</span> Telegram Kanalı</li>
        <li><span class="icon">✓</span> Temel Eğitim + Akademi</li>
        <li><span class="icon">✓</span> Monk Görevleri</li>
        <li><span class="icon">✓</span> YOGI Arena</li>
        <li><span class="icon">✓</span> YOGI.AI</li>
        <li><span class="icon">✓</span> Sinyal Analizi</li>
        <li><span class="icon">✓</span> Özel Yayınlar</li>
        <li><span class="icon">✓</span> Beta Test Hakları</li>
        <li><span class="icon">✓</span> Öncelikli Destek</li>
        <li><span class="icon">✓</span> Marka Elçiliği</li>
        <li><span class="icon">✓</span> Sponsorluk Fırsatları</li>
      </ul>
      <div class="show-more">Daha Fazla Göster ▼</div>
      <a href="#" class="buy-nft-button">NFT SATIN AL</a>
    </div>
  </div>
</div>
<script>
  // Kategori filtreleme + default highlight (Seeker) + tab renkleri + per-card expand + snap-to-click
  const categoryRadios = document.querySelectorAll('input[name="category"]');
  const planCards = document.querySelectorAll('.plan-card');
  const rankTableWrapper = document.querySelector('.rank-table-wrapper');
  const catSwitch = document.getElementById('catSwitch');

const TAB_COLORS = { destekci:'#9aa3ad', onerilen:'#1bd663', yillik:'#9b81f5' };

function applyTabColor(){
    const selected = document.querySelector('input[name="category"]:checked').value;
    catSwitch.style.setProperty('--tab-color', TAB_COLORS[selected] || '#58a6ff');
  }

function isMobile(){ return window.matchMedia('(max-width:768px)').matches; }

function scrollToCard(card, behavior='smooth'){
    if (!isMobile()) return; // desktop gridte kaydırma yok
    const wrap = rankTableWrapper;
    const padLeft = parseFloat(getComputedStyle(wrap).paddingLeft)||0;
    const left = card.offsetLeft - padLeft;
    wrap.scrollTo({ left, behavior });
  }

const target = (defaultCard || firstVisibleCard);
      if (target) {
        target.classList.add('highlighted');
        // Mobilde ilk yüklemede ve kategori değişiminde seçili karta hizala
        if(!preserveScroll) scrollToCard(target, 'auto');
      }

adjustColumnsDesktop(visibleCount);
      applyTabColor();
      setTimeout(() => { parent.postMessage({ type: 'nftHeight', h: document.body.scrollHeight }, '*'); }, 30);
  }

categoryRadios.forEach(r => r.addEventListener('change', () => filterPlans({preserveScroll:false})) );
  planCards.forEach(card => card.addEventListener('click', function(e) {
      // Kart içindeki Show More tıklamalarını etkilemesin
      if (e.target && (e.target.classList.contains('show-more') || e.target.closest('.show-more'))) return;
      planCards.forEach(pc => pc.classList.remove('highlighted'));
      this.classList.add('highlighted');
      scrollToCard(this);
  }));

// Show more: sadece ilgili kartın UL'ünü aç/kapat, ardından parent'a yeni yükseklik gönder
  document.querySelectorAll('.show-more').forEach(button => {
      button.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
          const parentCard = this.closest('.plan-card');
          const ul = parentCard.querySelector('ul');
          const isExpanded = ul.classList.contains('expanded');
          ul.classList.toggle('expanded', !isExpanded);
          this.innerHTML = isExpanded ? 'Daha Fazla Göster ▼' : 'Daha Az Göster ▲';
          setTimeout(() => { parent.postMessage({ type: 'nftHeight', h: document.body.scrollHeight }, '*'); }, 60);
      });
  });

window.addEventListener('load', () => filterPlans({preserveScroll:false}));
  window.addEventListener('resize', () => setTimeout(() => filterPlans({preserveScroll:true}), 30));
</script>

Topluluğa Katıl – Yolculuğunu Başlat

Join the Community – Begin Your Journey