/* ==========================================================================
   YAN MENÜ v2 — "Altın Sahne" dilinin kenar çubuğuna taşınması
   --------------------------------------------------------------------------
   Kapsam: yalnızca #mainSidebar.sv2 altı. ESKİ .nav-link / .hub-side-action /
   .hub-nav-label SINIFLARINA DOKUNULMAZ — .nav-link admin-header.php ve
   admin-footer.php'de de kullanılıyor, değiştirmek yönetim panelini bozar.

   Menü öğesinin rengi işlevinden gelir (--k): ana sayfa mavi, sponsor
   camgöbeği, süreli etkinlik altın, bilet mor... Aktif öğe kendi rengiyle
   işaretlenir; eskiden hepsi aynı maviydi ve renk bilgi taşımıyordu.
   ========================================================================== */

#mainSidebar.sv2{
  --g:#f5c451; --g2:#ffdf8a;
  --line:rgba(148,169,214,.11); --line2:rgba(148,169,214,.22);
  --tx:#f1f5f9; --tx2:#b6c3da; --tx3:#7d8ca6; --tx4:#5b6980;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  background:linear-gradient(180deg,#0a1020 0%,#080d1b 55%,#060a16 100%);
  border-right:1px solid var(--line2);
}
#mainSidebar.sv2 svg{display:block}

@keyframes sv2rise{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes sv2radar{0%{box-shadow:0 0 0 0 rgba(52,211,153,.65)}70%{box-shadow:0 0 0 7px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
@keyframes sv2sheen{0%{left:-60%;opacity:0}4%{opacity:1}14%{left:130%;opacity:1}15%,100%{left:130%;opacity:0}}

/* ---------- marka ----------
   Logo kendi altin cercevesini tasiyor; disina ikinci bir halka konmaz,
   ikisi cakisirdi. Bunun yerine arkada yumusak ambiyans ve uzerine gelince
   guclenen bir isik var. Ad, sitenin ana rengiyle (altin) sunulur.
   -------------------------------------------------------------------- */
.sv2-brand{
  position:relative; display:flex; align-items:center; gap:13px; overflow:hidden;
  min-height:104px; padding:14px 15px; text-decoration:none;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(78% 120% at 12% 40%, rgba(168,85,247,.16), transparent 66%),
    radial-gradient(60% 100% at 78% 78%, rgba(245,196,81,.09), transparent 70%);
  transition:background .28s;
}
.sv2-brand:hover{
  background:
    radial-gradient(78% 120% at 12% 40%, rgba(168,85,247,.26), transparent 66%),
    radial-gradient(60% 100% at 78% 78%, rgba(245,196,81,.15), transparent 70%);
}
/* alt kenarda ince altin-mor esik */
.sv2-brand::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,rgba(168,85,247,.5),rgba(245,196,81,.45),transparent);
}
.sv2-brand-logo{
  position:relative; flex:none; width:80px; height:80px; display:grid; place-items:center;
  transition:transform .3s cubic-bezier(.34,1.3,.64,1);
}
/* logonun arkasindaki halo — gorselin altin cercevesini one cikarir */
.sv2-brand-logo::before{
  content:''; position:absolute; inset:-8px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(168,85,247,.34), rgba(245,196,81,.14) 58%, transparent 74%);
  filter:blur(7px); transition:opacity .3s; opacity:.85;
}
.sv2-brand:hover .sv2-brand-logo{transform:scale(1.05)}
.sv2-brand:hover .sv2-brand-logo::before{opacity:1}
.sv2-brand-logo img{
  position:relative; z-index:1; width:100%; height:100%; object-fit:contain; display:block;
  border-radius:50%;
  filter:drop-shadow(0 0 10px rgba(168,85,247,.4)) drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.sv2-brand-tx{min-width:0; flex:1}
.sv2-brand-tx .t1,.sv2-brand-tx .t2{
  display:block; font-family:Georgia,'Times New Roman',serif; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* iki kelimelik adda ust satir mor, alt satir altin (mevcut marka dili) */
.sv2-brand-tx .t1{
  font-size:17px; line-height:1; letter-spacing:.03em;
  background:linear-gradient(180deg,#f7e8ff 0%,#d8a7ff 46%,#9333ea 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.sv2-brand-tx .t2{
  margin-top:4px; font-size:23px; line-height:.95; letter-spacing:.015em;
  background:linear-gradient(180deg,#fff4c9 0%,#fbbf24 48%,#c56a0a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* Tek kelimelik ad: mor yerine altin, daha buyuk ve nefes alan harf araligi */
.sv2-brand-tx .t1.solo{
  font-size:25px; line-height:1; letter-spacing:.055em;
  background:linear-gradient(180deg,#fff8e2 0%,#fbbf24 52%,#b45309 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 6px rgba(180,83,9,.35));
}
/* Ad cizgisi: gradyan ray uzerinde yavas kayan bir parlama */
.sv2-brand-rule{
  position:relative; display:block; margin-top:10px; height:3px; width:82px;
  border-radius:99px; overflow:hidden;
  background:linear-gradient(90deg,#a855f7 0%,#d8b4fe 34%,#fbbf24 70%,#f59e0b 100%);
  box-shadow:0 0 9px rgba(168,85,247,.28), 0 0 8px rgba(251,191,36,.22);
}
.sv2-brand-rule::after{
  content:''; position:absolute; top:0; bottom:0; left:-45%; width:40%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  animation:sv2rule 4.5s ease-in-out infinite;
}
@keyframes sv2rule{0%,62%{left:-45%}100%{left:105%}}

/* ---------- hızlı eylemler ---------- */
/* ---------- hızlı eylemler ---------- */
.sv2-acts{
  display:grid; grid-template-columns:1fr 1fr; gap:9px;
  padding:11px 12px; border-bottom:1px solid var(--line);
}
/* Butonlar yan yana durur. Yatay düzende (ikon solda) 114px'lik kutuya
   "Topluluğa Katıl" sığmayıp kırpılıyordu; amblem üstte, metin altta
   ortalanınca aynı genişlikte rahat sığıyor. */
.sv2-act{
  --k:#38bdf8; position:relative; overflow:hidden; cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:12px 8px 11px; border-radius:14px; font-family:inherit;
  border:1px solid color-mix(in srgb,var(--k) 24%,var(--line));
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in srgb,var(--k) 16%,transparent), transparent 62%),
    linear-gradient(158deg,#121b2f,#0a1020);
  box-shadow:0 14px 30px -24px #000, inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .18s cubic-bezier(.4,0,.2,1), border-color .18s, box-shadow .18s;
}
.sv2-act::before{
  content:''; position:absolute; top:0; left:16%; right:16%; height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--k) 85%,#fff),transparent); opacity:.55;
}
.sv2-act:hover{
  transform:translateY(-3px); border-color:color-mix(in srgb,var(--k) 60%,transparent);
  box-shadow:0 18px 34px -20px color-mix(in srgb,var(--k) 85%,transparent);
}
/* ışık süpürmesi — sıra ile geçer, ikisi aynı anda parlamaz */
.sv2-act::after{
  content:''; position:absolute; top:-30%; bottom:-30%; left:-60%; width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.14),transparent);
  transform:skewX(-14deg); opacity:0; pointer-events:none;
  animation:sv2sheen 6s linear infinite; animation-delay:calc(1.2s + var(--i,0)*1.6s);
}
/* Amblem kaidesi: el çizimi SVG'ye nefes alanı ve altında halka ışık */
.sv2-act-i{
  position:relative; width:38px; height:38px; display:grid; place-items:center;
  filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--k) 55%,transparent));
}
.sv2-act-i svg{width:100%; height:100%}
.sv2-act-i::before{
  content:''; position:absolute; inset:-6px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, color-mix(in srgb,var(--k) 26%,transparent), transparent 68%);
}
.sv2-act > span:last-child{min-width:0; width:100%}
.sv2-act strong{
  display:block; font-size:10.5px; font-weight:850; color:#fff; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sv2-act strong + span{
  display:block; margin-top:3px; font-family:var(--mono); font-size:6.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--tx4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Günlük ödül hakkı varken amblemin köşesinde nabız */
.sv2-act.is-ready .sv2-act-i::after{
  content:''; position:absolute; top:-1px; right:-1px; width:8px; height:8px; border-radius:50%;
  background:#34d399; border:2px solid #0b1120; animation:sv2radar 1.8s ease-out infinite;
}
/* Hak kullanılmışsa amblem soluklaşır — durum tek bakışta okunur */
.sv2-act.is-done .sv2-act-i{filter:grayscale(.75) opacity(.6)}
.sv2-act.is-done strong{color:var(--tx3)}

/* ---------- gezinme ---------- */
.sv2-nav{flex-grow:1; overflow-y:auto; padding:8px 0 18px; scrollbar-width:thin; scrollbar-color:rgba(148,169,214,.2) transparent}
.sv2-nav::-webkit-scrollbar{width:4px}
.sv2-nav::-webkit-scrollbar-thumb{background:rgba(148,169,214,.2); border-radius:99px}
.sv2-label{
  display:flex; align-items:center; gap:9px; margin:14px 16px 7px;
  font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:#c8963f;
}
.sv2-label svg{width:11px; height:11px; flex:none}
.sv2-label i{font-size:10px}
.sv2-label::after{content:''; height:1px; flex:1; background:linear-gradient(90deg,rgba(245,196,81,.28),transparent)}
.sv2-label.adm{color:#34d399}
.sv2-label.adm::after{background:linear-gradient(90deg,rgba(52,211,153,.3),transparent)}

.sv2-item{
  --k:#38bdf8; position:relative; display:flex; align-items:center; gap:11px;
  margin:3px 10px; padding:9px 11px; border-radius:11px; text-decoration:none;
  border:1px solid transparent;
  transition:background .18s, border-color .18s, transform .18s;
  animation:sv2rise .4s cubic-bezier(.22,.9,.36,1) backwards; animation-delay:calc(var(--i,0)*28ms);
}
.sv2-item:hover{
  background:color-mix(in srgb,var(--k) 9%,transparent);
  border-color:color-mix(in srgb,var(--k) 22%,transparent);
}
.sv2-item-i{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px;
  font-size:13px; color:var(--k);
  background:color-mix(in srgb,var(--k) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 22%,transparent);
  transition:background .18s, color .18s, box-shadow .18s;
}
/* Skor Tahmin'in top görseli koyu zeminde kayboluyordu: açık bir küre
   zemini ve gölge, mevcut menüdeki davranışın aynısı. */
.sv2-item-i img{
  width:21px; height:21px; object-fit:contain; border-radius:50%;
  background:radial-gradient(circle at 42% 36%,rgba(255,255,255,.92),rgba(255,255,255,.5) 38%,rgba(255,255,255,.16) 62%,transparent 76%);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.55));
}
.sv2-item:hover .sv2-item-i{
  background:color-mix(in srgb,var(--k) 20%,transparent);
  box-shadow:0 0 14px -5px var(--k);
}
.sv2-item-t{
  flex:1; min-width:0; font-size:12px; font-weight:700; color:var(--tx2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .18s;
}
.sv2-item:hover .sv2-item-t{color:#fff}
/* Chevron kalktı: on bir satırda on bir özdeş ok hiçbir şey söylemiyordu.
   Yerine yalnızca imleç üstündeyken beliren, o öğenin renginde bir ok. */
.sv2-item-go{
  flex:none; width:14px; color:var(--k); opacity:0; transform:translateX(-4px);
  transition:opacity .18s, transform .18s;
}
.sv2-item-go svg{width:11px; height:11px}
.sv2-item-go i{font-size:9px}
.sv2-item:hover .sv2-item-go{opacity:.9; transform:translateX(0)}
.sv2-badge{
  flex:none; padding:3px 8px; border-radius:99px; font-family:var(--mono);
  font-size:6.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#2a1c00; background:linear-gradient(135deg,var(--g2),var(--g));
  box-shadow:0 4px 12px -6px rgba(245,196,81,.9);
}
.sv2-badge.soft{
  color:var(--k); background:color-mix(in srgb,var(--k) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 28%,transparent); box-shadow:none;
}
/* Aktif öğe kendi rengini alır — eskiden hepsi aynı maviydi */
.sv2-item.is-on{
  background:linear-gradient(90deg, color-mix(in srgb,var(--k) 17%,transparent), color-mix(in srgb,var(--k) 3%,transparent));
  border-color:color-mix(in srgb,var(--k) 30%,transparent);
}
.sv2-item.is-on::before{
  content:''; position:absolute; left:-10px; top:50%; transform:translateY(-50%);
  width:3px; height:58%; border-radius:0 3px 3px 0;
  background:var(--k); box-shadow:0 0 9px color-mix(in srgb,var(--k) 75%,transparent);
}
.sv2-item.is-on .sv2-item-t{color:#fff; font-weight:800}
.sv2-item.is-on .sv2-item-i{
  color:#0b1120; background:linear-gradient(150deg,color-mix(in srgb,var(--k) 62%,#fff),var(--k));
  border-color:transparent; box-shadow:0 4px 14px -5px var(--k);
}
.sv2-item.is-on .sv2-item-go{opacity:.7; transform:none}

/* yönetim bölümü */
.sv2-item.adm{--k:#34d399}
.sv2-item.adm .sv2-item-t{font-size:11.5px}

/* ---------- topluluk kutusu ----------
   mk kartlarının stili header.php'de ESKİ menü bloğunun içindeki <style>
   etiketindeydi; yeni menüde o blok basılmadığı için kartlar stilsiz
   kalıyordu. Tanımlar buraya taşındı (kapı açıkken eski blok basılmaz,
   çift tanım oluşmaz). */
/* ==== mk topluluk kartlari (2026-08-24) ==== */
@keyframes mkRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes mkSheen{0%{left:-60%;opacity:0}2%{opacity:1}12%{left:130%;opacity:1}13%,100%{left:130%;opacity:0}}
@keyframes mkBob{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-2.5px) rotate(-4deg)}60%{transform:translateY(0) rotate(2deg)}}
@keyframes mkSpin{to{transform:rotate(1turn)}}
@keyframes mkGlow{0%,100%{box-shadow:0 0 16px -8px #fbbf24}50%{box-shadow:0 6px 30px -6px rgba(251,191,36,.85)}}
@keyframes mkShine{0%{background-position:130% 0}55%,100%{background-position:-80% 0}}
@keyframes mkWv{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes mkNudge{0%,100%{transform:none}50%{transform:translate(3px,-3px)}}
@keyframes mkTada{0%,78%,100%{transform:none}82%{transform:scale(1.04) rotate(-1.5deg)}86%{transform:scale(1.04) rotate(1.5deg)}90%{transform:scale(1.02) rotate(-1deg)}94%{transform:none}}
@keyframes mkPing{0%{transform:scale(1);opacity:.8}80%,100%{transform:scale(2.4);opacity:0}}
.mk{position:relative;display:flex;align-items:center;gap:9px;padding:7px 10px;border-radius:12px;overflow:hidden;text-decoration:none;border:1px solid color-mix(in srgb,var(--c) 26%,#1b2740);background:radial-gradient(120% 110% at 0% 0%,color-mix(in srgb,var(--c) 13%,transparent),transparent 58%),linear-gradient(150deg,#10182b,#0b1120);transition:transform .22s cubic-bezier(.34,1.36,.64,1),border-color .2s,box-shadow .2s;animation:mkRise .5s cubic-bezier(.22,.9,.36,1) backwards;animation-delay:calc(var(--i)*90ms)}
.mk:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--c) 70%,transparent);box-shadow:0 12px 26px -14px var(--c)}
.mk::before{content:"";position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c) 85%,#fff),transparent);opacity:.6}
.mk::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:34%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-14deg);opacity:0;animation:mkSheen 4.5s linear infinite;animation-delay:calc(.8s + var(--i)*.6s);pointer-events:none}
.mk-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 50%,#000));box-shadow:0 4px 12px -5px var(--c),inset 0 1px 0 rgba(255,255,255,.25)}
.mk-ic svg{display:block;animation:mkBob 3.4s ease-in-out infinite;animation-delay:calc(var(--i)*.5s)}
.mk-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:0}
.mk-tx strong{font-size:12px;font-weight:800;letter-spacing:-.01em;color:#f7f9fc;line-height:1.2}
.mk-tx span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:7.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c)}
.mk-go{color:#5f6e85;flex-shrink:0;transition:color .2s}
.mk:hover .mk-go{color:#fff}
.mk:hover .mk-go svg{animation:mkNudge .9s ease-in-out infinite}
.mk-tg{--c:#38bdf8}
.mk-chat{--c:#34d399}
.mk-star{--c:#fbbf24;border:0;padding:0;background:none;animation:mkRise .5s backwards,mkGlow 2.4s ease-in-out 1s infinite;animation-delay:calc(var(--i)*90ms),1s}
.mk-star::before{content:"";position:absolute;inset:-120%;top:-120%;left:-120%;right:-120%;bottom:-120%;height:auto;background:conic-gradient(from 0deg,#92400e,#fde68a,#f59e0b,#fff7e0,#92400e);animation:mkSpin 2.6s linear infinite;opacity:1;z-index:0}
.mk-star::after{content:"";position:absolute;inset:1.5px;top:1.5px;left:1.5px;right:1.5px;bottom:1.5px;width:auto;border-radius:10.5px;background:radial-gradient(120% 110% at 0% 0%,rgba(251,191,36,.16),transparent 58%),linear-gradient(150deg,#151b2d,#0d1424);z-index:1;animation:none;transform:none;opacity:1}
.mk-star .mk-in{position:relative;z-index:2;display:flex;align-items:center;gap:9px;padding:8px 10px;width:100%;animation:mkTada 5s ease-in-out 2s infinite}
.mk-star:hover{transform:translateY(-2px)}
.mk-star .mk-tx strong{background:linear-gradient(100deg,#fde68a 40%,#fff 50%,#fbbf24 60%);background-size:230% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mkShine 3.4s ease-in-out infinite}
.mk-star .mk-w1{animation:mkWv 1.5s ease-in-out infinite}
.mk-star .mk-w2{animation:mkWv 1.5s ease-in-out .25s infinite}
.mk-dot{position:relative;width:6px;height:6px;flex-shrink:0}
.mk-dot::before{content:"";position:absolute;inset:0;border-radius:50%;background:#fbbf24}
.mk-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#fbbf24;animation:mkPing 1.8s cubic-bezier(0,0,.2,1) infinite}
@media (prefers-reduced-motion:reduce){.mk,.mk *,.mk::before,.mk::after,.mk *::before,.mk *::after{animation:none!important}}

/* ---------- kutu ---------- */
#mainSidebar.sv2 .hub-community-box{
  padding:11px 12px !important; margin-top:auto;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(4,7,15,.4),rgba(2,5,12,.75)) !important;
}

@media (prefers-reduced-motion:reduce){
  #mainSidebar.sv2 *,#mainSidebar.sv2 *::before,#mainSidebar.sv2 *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}