/* ═══════════════════════════════════════════════════════════════════
   VEGA STAR — Skinler sayfasinda SITENIN ust bari (15 Eki 2026)

   Isaretleme gizli/lib/sayfa.php::ust_bar()'dan gelir (skin/index.php ekler).
   Kurallar stil.css'teki ust bar bolumunun KOPYASI ama hepsi .top altina
   sinirli ve degiskenler .top uzerinde: skin uygulamasinin kendi CSS'iyle
   iki yonde de cakismasin. stil.css'te ust bar degisirse BURAYI DA guncelle
   (degisken adlari ve olculer ayni tutuldu).
   ═══════════════════════════════════════════════════════════════════ */

/* ── yazi tipleri: sitenin YEREL dosyalari (15 Eki 2026) ── */
/* Skin sayfasi Google Fonts kullaniyordu: yavas baglantida 1 MB paket ve harita gorselleriyle
   yaristigi icin ust bar yazisi 11 sn gec ciziliyordu (Lighthouse LCP). Ana sitenin dosyalari;
   ana sayfadan gelen ziyaretcide zaten onbellekte. */
/* Barlow 400 latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/font/barlow-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 400 latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/font/barlow-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 500 latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/font/barlow-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 500 latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/font/barlow-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 600 latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/font/barlow-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 600 latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/font/barlow-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Barlow 700 latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/font/barlow-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Barlow 700 latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/font/barlow-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 600 latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/font/chakra-petch-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 600 latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(/font/chakra-petch-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Chakra Petch 700 latin-ext */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/font/chakra-petch-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Chakra Petch 700 latin */
@font-face {
  font-family: 'Chakra Petch';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/font/chakra-petch-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono 500 latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/font/jetbrains-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono 500 latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/font/jetbrains-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Oswald: skin uygulamasinin basliklari (takim secimi vb.); paket CSS'indeki Google @import yerine */
/* Oswald 500-700 latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/font/oswald-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Oswald 500-700 latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/font/oswald-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.top {
  --zemin-2: #0A111A; --yuzey-3: #213249; --cizgi: #24364C; --cizgi-2: #31476A;
  --metin: #E8EEF5; --metin-2: #A9B7C9; --soluk: #8090A6;
  --altin: #F0B23E; --altin-acik: #FFD480; --ct: #5E93DC; --ct-acik: #94BBF2;
  --canli: #3DDC84; --kapali: #F0524A;
  --d: "Chakra Petch", "Barlow", system-ui, sans-serif;
  --g: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --m: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --kenar: 24px; --kesik-s: 8px;

  position: sticky; top: 0; z-index: 1000;
  overflow-x: clip;
  background: rgba(10, 17, 26, .96);
  border-bottom: 1px solid var(--cizgi);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font: 400 16px/1.6 var(--g); color: var(--metin);
  -webkit-font-smoothing: antialiased;
}
.top, .top *, .top *::before, .top *::after { box-sizing: border-box; }
.top a { text-decoration: none; }
.top img { max-width: none; display: block; content-visibility: visible; }
.top p { margin: 0; }
.top :focus-visible { outline: 2px solid var(--ct-acik); outline-offset: 3px; }

.top::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 200%;
  background: linear-gradient(90deg, var(--ct), var(--altin) 25%, var(--ct) 50%, var(--altin) 75%, var(--ct));
  animation: vsb-cizgi 8s linear infinite; opacity: .9;
}
@keyframes vsb-cizgi { to { transform: translateX(-50%); } }

.top .wrap {
  width: 100%; max-width: calc(1240px + 2 * var(--kenar)); margin: 0 auto; padding: 0 var(--kenar);
  display: flex; align-items: center; gap: 24px; min-height: 70px;
}
.top .mark { position: relative; display: flex; align-items: center; gap: 10px; color: var(--metin); flex: none; }
.top .mark:hover { color: #fff; }
.top .mark img { width: 36px; height: auto; transition: transform .4s cubic-bezier(.2, .7, .2, 1), filter .3s; }
.top .mark:hover img { transform: rotate(-8deg) scale(1.08); filter: drop-shadow(0 0 12px rgba(240, 178, 62, .55)); }
.top .mark b { font: 700 18px/1 var(--d); letter-spacing: .06em; }

.top nav { display: flex; gap: 2px; }
.top nav a {
  position: relative; font: 600 15px/1 var(--g); color: var(--metin-2);
  padding: 11px 13px; border-radius: 4px; transition: color .15s, background-color .15s;
}
.top nav a::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--altin), var(--altin-acik));
  transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}
.top nav a:hover { color: var(--metin); background: rgba(255, 255, 255, .05); }
.top nav a:hover::after, .top nav a.secili::after { transform: scaleX(1); }
.top nav a.secili { color: #fff; }

.top .sag { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top .mini { font: 600 14px var(--g); color: var(--metin-2); }

/* dugmeler (yalniz ust bardakiler) */
.top .btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 13.5px/1 var(--d); letter-spacing: .03em;
  min-height: 40px; padding: 11px 16px; border: 0; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.top .kesik-s { clip-path: polygon(0 0, calc(100% - var(--kesik-s)) 0, 100% var(--kesik-s), 100% 100%, var(--kesik-s) 100%, 0 calc(100% - var(--kesik-s))); }
.top .btn-altin { background: var(--altin); color: #1A1204; }
.top .btn-altin:hover { background: var(--altin-acik); color: #1A1204; }
.top .btn-altin::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); transition: left .55s cubic-bezier(.2, .7, .2, 1);
}
.top .btn-altin:hover::after { left: 130%; }
.top .btn-hayalet { background: rgba(255, 255, 255, .06); color: var(--metin); box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.top .btn-hayalet:hover { background: rgba(255, 255, 255, .11); color: #fff; }

/* canli nokta */
.top .puls { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--canli); }
.top .puls::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(61, 220, 132, .55); animation: vsb-puls 2.2s ease-out infinite; }
.top .off .puls { background: var(--kapali); }
.top .off .puls::after { display: none; }
@keyframes vsb-puls { from { transform: scale(1); opacity: .9; } to { transform: scale(3); opacity: 0; } }

/* canli sayac + hizli baglan */
.top .hizli { position: relative; }
.top .canli-rozet {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; min-height: 40px;
  font: 600 13.5px/1 var(--g); color: var(--metin-2);
  background: rgba(61, 220, 132, .08); border: 1px solid rgba(61, 220, 132, .28); border-radius: 999px;
  transition: background-color .15s, border-color .15s;
}
.top .canli-rozet::-webkit-details-marker { display: none; }
.top .canli-rozet:hover, .top .hizli[open] .canli-rozet { background: rgba(61, 220, 132, .14); border-color: rgba(61, 220, 132, .5); color: var(--metin); }
.top .canli-rozet b { font: 700 15px/1 var(--d); color: var(--metin); font-variant-numeric: tabular-nums; }
.top .canli-rozet .ok { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.top .hizli[open] .ok { transform: rotate(225deg) translateY(-2px); }
.top .hizli-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  width: min(340px, calc(100vw - 32px)); padding: 10px;
  background: rgba(14, 22, 33, .98); border: 1px solid var(--cizgi-2); border-top: 2px solid var(--altin);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
  animation: vsb-menu .22s cubic-bezier(.2, .7, .2, 1);
}
@keyframes vsb-menu { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.top .hm-bas { font: 700 12.5px/1 var(--d); letter-spacing: .08em; text-transform: uppercase; color: var(--soluk); margin: 4px 8px 10px; }
.top .hm-satir { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 10px; color: var(--metin); border-radius: 4px; }
.top .hm-satir:hover { background: rgba(94, 147, 220, .1); color: #fff; }
.top .hm-ad { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.top .hm-ad b { font: 700 14.5px/1.1 var(--d); }
.top .hm-ad small { font: 500 12px/1.2 var(--m); color: var(--soluk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .hm-sayi { font: 700 17px/1 var(--d); font-variant-numeric: tabular-nums; }
.top .hm-sayi small { font-size: 12px; color: var(--soluk); }
.top .hm-cubuk { grid-column: 2 / -1; height: 3px; background: rgba(255, 255, 255, .07); }
.top .hm-cubuk i { display: block; height: 100%; background: linear-gradient(90deg, var(--ct), var(--altin)); }
.top .hm-satir.off { opacity: .6; }
.top .hm-tum { display: block; margin-top: 6px; padding: 10px; text-align: center; font: 600 13.5px/1 var(--g); border-top: 1px solid var(--cizgi); color: var(--metin-2); }
.top .hm-tum:hover { color: var(--altin); }
.top .ikon-dugme {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  color: var(--metin-2); background: rgba(255, 255, 255, .06); border: 1px solid var(--cizgi-2); border-radius: 50%;
  transition: color .15s, background-color .15s, transform .2s;
}
.top .discord-ikon:hover { color: #fff; background: #5865F2; border-color: #5865F2; transform: translateY(-1px); }

/* icerige gec baglantisi */
.vega-skin .atla { position: absolute; left: 12px; top: -60px; z-index: 1100; background: #F0B23E; color: #1A1204; padding: 10px 16px; font: 700 14px/1 "Barlow", sans-serif; text-decoration: none; }
.vega-skin .atla:focus { top: 12px; }

@media (max-width: 1060px) { .top .cr-metin { display: none; } }
@media (max-width: 900px) {
  .top .wrap { flex-wrap: wrap; gap: 0 10px; min-height: 0; padding-top: 10px; }
  .top nav {
    order: 3; overflow-x: auto; scrollbar-width: none;
    margin: 6px calc(-1 * var(--kenar)) 0; padding: 0 var(--kenar) 6px; width: calc(100% + 2 * var(--kenar));
  }
  .top nav::-webkit-scrollbar { display: none; }
  .top nav a { white-space: nowrap; padding: 9px 10px; font-size: 14.5px; }
  .top nav a::after { left: 10px; right: 10px; }
  .top .mini { display: none; }
}
@media (max-width: 640px) { .top { --kenar: 16px; } }
@media (max-width: 520px) {
  .top .mark b { font-size: 15px; }
  .top .sag { gap: 6px; }
  .top .btn { padding: 10px 12px; font-size: 13px; }
  .top .btn-hayalet, .top .discord-ikon { display: none; }
  .top .hizli-menu { position: fixed; left: 16px; right: 16px; top: 64px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .top *, .top::before, .top *::before, .top *::after { animation: none !important; transition: none !important; }
}

/* oyuncu arama ikonu (15 Eki 2026; sitedeki .ara-ikon ile ayni) */
.top .ara-ikon:hover, .top .ikon-dugme.secili { color: #1A1204; background: #F0B23E; border-color: #F0B23E; transform: translateY(-1px); }

/* VEGA VIP menu baglantisi (16 Eki 2026; sitedeki .vip-link ile ayni) */
.top nav a.vip-link { color: #F0B23E; }
.top nav a.vip-link:hover { color: #FFD480; }