:root{ --neon:#0ff0fc; --neon-pink:#ff00ff; --neon-purple:#9600ff; --gold:#ffd700; --bg:#000; --text:#e7e7e7; --ink:#0d0d0d; --ok:#29d18c; --warn:#ffb300; --err:#ff4d4f; } html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:'Oxanium',sans-serif;line-height:1.6} .container{max-width:980px;margin:0 auto;padding:0 16px} /* NAV */ .nav{position:sticky;top:0;z-index:20;background:rgba(0,0,0,.92); border-bottom:1px solid var(--neon);backdrop-filter:blur(6px); box-shadow:0 0 12px var(--neon),0 0 20px rgba(150,0,255,.25); padding-inline:8px} .nav > .container{max-width:1100px;margin-inline:auto;padding-inline:16px} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0} .left-ops{display:flex;align-items:center;gap:16px;min-width:0} .brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap} .brand i{color:var(--gold);font-size:20px;filter:drop-shadow(0 0 6px rgba(255,215,0,.6))} .brand .logo{ font-family:'Cinzel Decorative',cursive;font-weight:900;font-size:22px;letter-spacing:.5px;line-height:1; background:linear-gradient(90deg,#ffd700 0%,#ff00ff 40%,#0ff0fc 80%,#ffd700 100%); -webkit-background-clip:text;-webkit-text-fill-color:transparent; text-shadow:0 0 10px rgba(255,215,0,.25) } .nav-chips{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 auto;justify-content:center} .nav-chip{--c:var(--neon);display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--c); color:var(--c);text-decoration:none;transition:.2s;box-shadow:0 0 10px rgba(15,240,252,.12);font-weight:700} .nav-chip:hover,.nav-chip:focus{background:var(--c);color:var(--ink);box-shadow:0 0 18px var(--c)} .right-ops{display:flex;align-items:center;gap:10px;margin-left:24px} .dropdown{position:relative} .drop-btn{background:transparent;color:var(--neon);border:1px solid var(--neon);padding:6px 12px;border-radius:8px;cursor:pointer;font-weight:700} .drop-btn:hover{background:var(--neon);color:var(--ink)} .drop-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:160px;background:#080808;border:1px solid #1c364e;border-radius:10px;display:none;box-shadow:0 10px 24px rgba(0,0,0,.45)} .drop-menu a{display:block;padding:8px 10px;color:#cfeff4;text-decoration:none;border-bottom:1px solid #0b2233} .drop-menu a:last-child{border-bottom:0} .dropdown:focus-within .drop-menu, .dropdown:hover .drop-menu{display:block} .btn-neon-glow{background:linear-gradient(90deg,var(--neon-pink),var(--neon-purple));color:#fff;border:none; font-weight:800;padding:6px 14px;border-radius:10px;box-shadow:0 0 10px var(--neon-pink),0 0 18px var(--neon-purple);text-decoration:none} .btn-neon-glow:hover{filter:brightness(1.08);box-shadow:0 0 14px var(--neon-pink),0 0 26px var(--neon-purple),0 0 26px var(--neon)} /* HERO */ .hero{border-bottom:3px solid var(--neon);background:#050505;padding:22px 0;box-shadow:0 0 20px rgba(0,255,255,.12)} .hero h1{margin:0;font-size:28px;color:#0ff;text-shadow:0 0 10px #0ff} .muted{color:#b9b9b9} /* Kutu ve gridler */ .box{background:linear-gradient(180deg,#0a0a0a,#0c0c0c);border:1px solid rgba(0,255,255,.18);border-radius:14px;padding:16px;box-shadow:0 6px 18px rgba(0,0,0,.45);margin:16px 0} .row{display:flex;flex-wrap:wrap;gap:12px} .h5{font-size:18px;margin:0 0 10px 0} .btn{cursor:pointer;border:1px solid var(--neon);color:var(--neon);background:transparent;border-radius:10px;padding:8px 12px} .btn:hover{background:var(--neon);color:var(--ink)} .btn.sm{padding:6px 10px;font-size:14px} .btn.ok{border-color:var(--ok);color:var(--ok)} .btn.warn{border-color:var(--warn);color:var(--warn)} .btn.err{border-color:var(--err);color:var(--err)} input,select,textarea{width:100%;box-sizing:border-box;background:#0f0f0f;border:1px solid #1c364e;color:#eaeaea;border-radius:10px;padding:8px} label{font-size:13px;color:#cbd6e2} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px} .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} @media(max-width:720px){.grid3,.grid4{grid-template-columns:1fr}} /* Embedler */ .stream-embed,.chat-embed{width:100%;height:500px;border:none;border-radius:12px} .chat-embed{height:420px} @media(max-width:720px){ .stream-embed{height:360px} .chat-embed{height:340px} } .switch-wrap{text-align:center} .switch-wrap .active{background:var(--neon);color:var(--ink)} .fallback{background:#0b0b0b;border:1px dashed #355;padding:12px;border-radius:12px} /* Ticker */ .ticker{display:flex;gap:12px;overflow:auto;padding:8px;background:#0b0b0b;border:1px solid #133;border-radius:10px;scrollbar-width:thin} .chip{white-space:nowrap;border:1px solid #2a5f7a;background:#0b1b24;color:#cfeaff;border-radius:999px;padding:6px 10px;font-size:12px} .chip.llc{border-color:#4bd8ff;background:#07222a} .chip.gbc{border-color:#ffd84b;background:#241f07;color:#ffeaa1} /* Yayın Akışı tablo */ .schedule-wrap{overflow:auto;border:1px solid #144a4a;border-radius:12px} table.schedule{border-collapse:separate;border-spacing:0;min-width:900px} .schedule th,.schedule td{border-right:1px solid #0c2b2b;border-bottom:1px solid #0c2b2b;padding:8px;white-space:nowrap;text-align:center} .schedule thead th{position:sticky;top:0;background:#061a1a;z-index:2;font-weight:700} .schedule tbody th{position:sticky;left:0;background:#082525;z-index:1} .cell{min-width:90px;font-size:12px} .slot{border-radius:8px;padding:4px 6px;display:inline-block;font-weight:700} .slot[data-platform="twitch"]{background:rgba(100,0,255,.22);border:1px solid rgba(150,0,255,.5)} .slot[data-platform="youtube"]{background:rgba(255,0,0,.18);border:1px solid rgba(255,70,70,.4)} .tiny{font-size:12px;color:#9fb0be} .right{text-align:right} .mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px} /* Skip link */ .skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} .skip-link:focus{left:8px;top:8px;width:auto;height:auto;z-index:999;background:#111;color:#0ff;padding:8px 10px;border-radius:8px} /* ==== NAV RESPONSIVE DÜZELTME ==== */ /* Orta ekranlarda: sağ bloğun sıkışmasını engelle, chip'ler sarılabilsin */ @media (max-width: 1060px){ .nav-inner{flex-wrap:wrap;gap:10px} .right-ops{margin-left:0} } /* Küçük ekranlarda: dikey istif, ortalama ve küçültülmüş chip boyutu */ @media (max-width: 840px){ .nav-inner{flex-direction:column;align-items:center;justify-content:center} .left-ops{flex-direction:column;align-items:center;gap:10px} .nav-chips{justify-content:center} .right-ops{margin-left:0} .nav-chip{padding:5px 10px;font-size:14px} /* Açılır menüyü ortala ki taşma/çarpmalar olmasın */ .dropdown .drop-menu{left:50%;right:auto;transform:translateX(-50%)} }

Live Now

Tek sütun düzen • Twitch ↔ YouTube • Cüzdan & Bağış • Yayın Akışı • Fallback

Canlı Yayın ve Sohbet

Canlı Yayın (Twitch)
Canlı Sohbet (Twitch)

Cüzdan & Bağış

Bu demo, cüzdanları tarayıcı LocalStorage’da tutar.
Cüzdanım
LLC: 0
GBC: 0
Bağış Yap
Bağışlar anında yayıncıya düşer (demo). Gerçekte API + WebSocket gerekir.
Bağış Yayını (Ticker)
Yayıncı Kazançları (Toplam)

Yayın Akışı

Gün
Hücreye tıklayınca detay görünür.