/*-----------------------------------=========Main-Style-Sheet=========----------------------------------------*/





@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Philosopher:wght@400;700&display=swap');

@font-face {

  font-family: 'Trajan Pro';

  src: url('../webfonts/TrajanPro-Bold.woff') format('woff'),

      url('../webfonts/TrajanPro-Bold.ttf') format('truetype');

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Trajan Pro';

  src: url('../webfonts/TrajanPro-Regular.woff') format('woff'),

      url('../webfonts/TrajanPro-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Myriad Pro';

  src: url('../webfonts/MyriadPro-Bold.woff2') format('woff2'),

      url('../webfonts/MyriadPro-Bold.woff') format('woff'),

      url('../webfonts/MyriadPro-Bold.ttf') format('truetype');

  font-weight: bold;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Myriad Pro Cond';

  src: url('../webfonts/MyriadPro-Cond.woff2') format('woff2'),

      url('../webfonts/MyriadPro-Cond.woff') format('woff'),

      url('../webfonts/MyriadPro-Cond.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Myriad Pro';

  src: url('../webfonts/MyriadPro-Regular.woff2') format('woff2'),

      url('../webfonts/MyriadPro-Regular.woff') format('woff'),

      url('../webfonts/MyriadPro-Regular.ttf') format('truetype');

  font-weight: normal;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Myriad Pro';

  src: url('../webfonts/MyriadPro-Light.woff2') format('woff2'),

      url('../webfonts/MyriadPro-Light.woff') format('woff'),

      url('../webfonts/MyriadPro-Light.ttf') format('truetype');

  font-weight: 300;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-family: 'Myriad Pro';

  src: url('../webfonts/MyriadPro-Semibold.woff2') format('woff2'),

      url('../webfonts/MyriadPro-Semibold.woff') format('woff'),

      url('../webfonts/MyriadPro-Semibold.ttf') format('truetype');

  font-weight: 600;

  font-style: normal;

  font-display: swap;

}







:root {

  --theme__color1: #581212;

  --theme__color2: #ffffff;

  --font1: 'Open Sans', sans-serif;

  --font2: 'Trajan Pro';

  --font3: 'Myriad Pro';

  --font4: 'Philosopher', sans-serif;

}

*,::before,::after {

  box-sizing: border-box;

}

body {

  font-size: 16px;

  line-height: 1.2;

  background-color: #1e1e1e;

  color: #fff;

  overflow-x: hidden;

  word-wrap: break-word;

  word-break: normal;

  font-weight: 400;

  -webkit-font-smoothing: antialiased;

  font-family: var(--font1);

}

a, a:active, a:focus, a:active, a:hover {

  text-decoration:none !important;

  color: inherit;

}

input{

  -ms-box-sizing: border-box;

  box-sizing: border-box;

}

a:hover,

a:focus,

input:focus,

input:hover,

select:focus,

select:hover,

select:active,

textarea:focus,

textarea:hover,

button:focus {

  outline: none;

}

::placeholder {

  opacity: 1;

}

:focus::placeholder {

  opacity: 0;

}

table {

  border-collapse: separate;

  border-spacing: 0;

  table-layout: fixed; /* Prevents HTML tables from becoming too wide */

  width: 100%;

}

img {

  -ms-interpolation-mode: bicubic;

  border: 0;

  height: auto;

  max-width: 100%;

  vertical-align: middle;

}

iframe {

  width: 100%;

}

h1, h2, h3, h4, h5, h6,

.h1, .h2, .h3, .h4, .h5, .h6{

  font-weight: 700;

}

ul{

    margin: 0;

    padding: 0;

    list-style: none;

}

p{

  font-size: 10px;

  line-height: 1.2;

  margin-bottom: 15px;

}

p:last-child{

  margin: 0;

}

.main-wrap {

  width: 100%;

  overflow: hidden;

}

@media (min-width: 1400px) {

  .container {

    max-width: 1260px;

  }

}









/* header */

:root{
  --nav-bg-1: rgba(18, 12, 8, .72);
  --nav-bg-2: rgba(18, 12, 8, .25);
  --nav-border: rgba(255,255,255,.07);

  --text: rgba(240, 216, 186, .90);
  --text-dim: rgba(240, 216, 186, .72);
  --gold: #fff;
  --gold-strong: #fff;

  --pill-bg: rgba(255,255,255,.06);
  --pill-brd: rgba(255,255,255,.10);
}

/* Header fix + blur */
.header-section{
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  padding: 0;

  background: linear-gradient(to bottom, var(--nav-bg-1), var(--nav-bg-2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--nav-border);
}

.header-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 120px at 50% 0%, rgba(255,190,120,.18), transparent 60%),
    radial-gradient(900px 180px at 60% 40%, rgba(0,0,0,.35), transparent 70%);
  opacity: .95;
}

.header-section .container{ position: relative; }

.header-section-inner{
  position: relative;
  display:flex;
  align-items:center;
  height: 64px;
  gap: 14px;
}

body{ padding-top: 64px; }

/* MENIU FLEX (stabil) */
.main-menu{ flex: 1; }

.main-menu ul{
  display:flex;
  align-items:center;
  justify-content:center; /* centru ca Elveron */
  gap: 26px;

  list-style:none;
  margin:0;
  padding:0;
}

/* logo rămâne în flux, dar îl evidențiem */
.main-menu ul li:has(.header-logo){
  margin: 0 10px;
}

.main-menu a{
  position: relative;
  display:inline-block;

  padding: 10px 2px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .6px;
  text-transform: uppercase;

  color: var(--text-dim);
  text-decoration:none;

  transition: color .18s ease, transform .18s ease;
}

.main-menu a:hover{
  color: var(--gold);
  transform: translateY(-1px);
}

.main-menu a::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 210, 165, .45);
  transform: scaleX(0);
  transform-origin:center;
  transition: transform .18s ease;
}
.main-menu a:hover::after{ transform: scaleX(1); }

/* Logo */
.header-logo{
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.18) inset;
}
.header-logo::after{ display:none; }

.header-logo img{
  height: 42px;
  width:auto;
  display:block;
  opacity:.95;
}

/* Discord accent (dacă pui class="discord") */
.main-menu a.discord{
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(88,101,242,.16);
  border: 1px solid rgba(88,101,242,.32);
}
.main-menu a.discord::after{ display:none; }
.main-menu a.discord:hover{
  background: rgba(88,101,242,.26);
  color:#fff;
}

/* Language select */
/* Fix pentru dropdown nice-select (look Elveron) */
/* ======================================================
   NAVBAR – DARK / GRAYSCALE (potrivit cu site-ul tău)
   COPY-PASTE READY
   ====================================================== */

:root{
  --nav-bg-1: rgba(8, 8, 10, .78);
  --nav-bg-2: rgba(8, 8, 10, .35);
  --nav-border: rgba(255,255,255,.08);

  --text: rgba(255,255,255,.92);
  --text-dim: rgba(255,255,255,.70);

  /* accent rece subtil */
  --accent: rgba(160, 200, 255, .90);
  --accent-soft: rgba(160, 200, 255, .35);
}

/* ================= HEADER ================= */
.header-section{
  position: fixed;
  top:0;
  left:0;
  width:100%;
  z-index:9999;
  padding:0;

  background: linear-gradient(to bottom, var(--nav-bg-1), var(--nav-bg-2));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid var(--nav-border);
  overflow: visible;
}

/* vignette neutră */
.header-section::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(1100px 120px at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(900px 180px at 60% 40%, rgba(0,0,0,.35), transparent 70%);
  opacity:.9;
}

.header-section-inner{
  position: relative;
  display:flex;
  align-items:center;
  gap:16px;
  height:64px;
}

/* spațiu sub navbar */
body{
  padding-top:64px;
}

/* ================= MENU ================= */
.main-menu{
  flex:1;
}

.main-menu ul{
  margin:0;
  padding:0;
  list-style:none;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
}

.main-menu ul li{
  display:flex;
  align-items:center;
}

/* link-uri */
.main-menu ul li a{
  position:relative;
  padding:10px 2px;

  font-size:13px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;

  color:var(--text-dim);
  text-decoration:none;

  transition:color .18s ease, transform .18s ease;
}

.main-menu ul li a:hover{
  color:var(--text);
  transform:translateY(-1px);
}

/* underline */
.main-menu ul li a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:6px;
  height:2px;
  border-radius:2px;

  background:var(--accent-soft);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .18s ease, background .18s ease;
}

.main-menu ul li a:hover::after{
  transform:scaleX(1);
}

/* activ */
.main-menu ul li a.is-active{
  color:var(--text);
}

.main-menu ul li a.is-active::after{
  transform:scaleX(1);
  background:var(--accent);
  opacity:.85;
}

/* ================= LOGO ================= */
.header-logo{
  padding:6px 10px;
  border-radius:14px;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 10px 30px rgba(0,0,0,.18) inset;
}

.header-logo::after{
  display:none;
}

.header-logo img{
  height:42px;
  width:auto;
  display:block;
  opacity:.95;
}

/* ================= DISCORD ================= */
.main-menu a.discord{
  padding:9px 14px;
  border-radius:10px;

  background:rgba(120,160,255,.14);
  border:1px solid rgba(120,160,255,.28);
}

.main-menu a.discord::after{
  display:none;
}

.main-menu a.discord:hover{
  background:rgba(120,160,255,.22);
  color:#fff;
}

/* ================= LANGUAGE SELECT ================= */
.lan-select{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;

  padding:6px 10px;
  border-radius:12px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);

  box-shadow:0 6px 20px rgba(0,0,0,.35);
}

.lan-select img{
  width:18px;
  height:18px;
  border-radius:999px;
  display:block;
}

/* nice-select button */
.lan-select .nice-select{
  background:transparent !important;
  border:0 !important;

  height:34px !important;
  line-height:34px !important;

  padding-left:0 !important;
  padding-right:28px !important;

  min-width:100px;

  color:var(--text) !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}

.lan-select .nice-select .current{
  color:var(--text) !important;
}

/* arrow */
.lan-select .nice-select:after{
  border-bottom:2px solid rgba(255,255,255,.75) !important;
  border-right:2px solid rgba(255,255,255,.75) !important;
  width:6px !important;
  height:6px !important;
  right:6px !important;
  margin-top:-4px !important;
}

/* dropdown list */
.lan-select .nice-select .list{
  margin-top:10px !important;
  background:rgba(10,10,12,.96) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:14px !important;
  box-shadow:0 20px 60px rgba(0,0,0,.55) !important;
  overflow:hidden !important;
  z-index:99999 !important;
}

/* options */
.lan-select .nice-select .option{
  background:transparent !important;
  color:rgba(255,255,255,.88) !important;
  font-weight:600 !important;
}

.lan-select .nice-select .option:hover,
.lan-select .nice-select .option.focus{
  background:rgba(255,255,255,.06) !important;
  color:#fff !important;
}

.lan-select .nice-select .option.selected{
  background:rgba(160,200,255,.12) !important;
  color:#fff !important;
}

.lan-select .nice-select .option.disabled{
  color:rgba(255,255,255,.45) !important;
}

/* ================= MOBILE ================= */
@media (max-width:1199px){
  .header-logo img{
    height:38px;
  }
}





/* header-end */







/* ---offcanvas-css--- */

.offcanvas-open {

  font-size: 22px;

  transition: 0.3s;

}

.offcanvas-open:hover {

  color: #97A3AE;

}

.offcanvas-close {

  color: #fff;
  position: absolute;

  transition: 0.3s;

  right:  15px;

  top: 15px;

  line-height: 1;

  font-size: 22px;

}

.offcanvas-close:hover {

  color: #97A3AE;

}

.offcanvas-menu {

  position: fixed;

  height: 100%;

  width: 100%;

  top: 0;

  left: 0;

  z-index: 1000;

  transform: translateX(-105%);

  transition: 0.3s;

}

.offcanvas-menu.active {

  transform: translate(0);

}

.offcanvas-menu .offmenu {

  max-width: 250px;

  min-width: 200px;

  z-index: 5;

  position: relative;

  background: #1e1e1e;

  height: 100%;

  padding: 50px 20px 40px;

  overflow: auto;

  -ms-overflow-style: none;  /* IE and Edge */

  scrollbar-width: none;  /* Firefox */

}

.offcanvas-menu .offmenu :-webkit-scrollbar {

  display: none;

}

.offcanvas-menu ul li a {

  display: block;

  text-align: center;

  font-size: 16px;

  color: #fff;

  padding: 10px;

}

.dropdown-menu-custom ul {

  background: #fff;

  padding: 20px 0;

}

.dropdown-menu-custom ul li a {

  color: #97A3AE;

}

.offcanvas-overlay {

  position: fixed;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  background: rgba(0, 0, 0, 0.178);

  z-index: 2;

  transform: 0;

  z-index: 900;

  opacity: 0;

  visibility: hidden;

  transition: 0.3s;

}

.offcanvas-overlay.active {

  opacity: 1;

  visibility: visible;

}

/* ---offcanvas-css-end---*/



/* --preloader-- */

#preloader {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 9999;

  overflow: hidden;

  background: #fff;

}

#preloader:before {

  content: "";

  position: fixed;

  top: calc(50% - 30px);

  left: calc(50% - 30px);

  border: 6px solid #06121E;

  border-top-color: #e2eefd;

  border-radius: 50%;

  width: 60px;

  height: 60px;

  -webkit-animation: animate-preloader 1s linear infinite;

  animation: animate-preloader 1s linear infinite;

}

@-webkit-keyframes animate-preloader {

  0% {

      transform: rotate(0deg);

  }

  100% {

      transform: rotate(360deg);

  }

}

@keyframes animate-preloader {

  0% {

      transform: rotate(0deg);

  }

  100% {

      transform: rotate(360deg);

  }

}

/* --preloader-end-- */





/* ---hero-section--- */

/* =========================================================
   HERO STATS + MOBILE FIX (COPY/PASTE COMPLET)
   - pastreaza pozitia pe desktop (jos-stanga)
   - pe mobil elimina spatiul gol dintre stats si slider/news
   - shimmer (loading) functioneaza si se opreste dupa delay
   - alb/gri/negru + dot
   Pune TOT blocul asta la FINAL de tot in style.css
   ========================================================= */


/* -----------------------------
   DESKTOP (layout-ul tau vechi)
   ----------------------------- */
@media (min-width: 992px){

  .hero-section{
    background: url('../images/bg_aop2.webm') no-repeat center center/cover;
    border-bottom: #c9c9c9;
  }

  .hero-section-inner{
    height: 800px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-cont1{
    padding: 0 0 0 40px !important;
    margin-top: auto !important;
    margin-bottom: 240px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    justify-content: flex-start !important;
  }
}


/* -----------------------------
   CARD DESIGN (general)
   ----------------------------- */
.hero-cont1{
  display: flex;
  align-items: center;
  gap: 14px;
}

.hero-cont1 .single-cont{
  --r: 30px;

  display: flex;
  align-items: center;
  position: relative;

  padding: 10px 14px;
  border-radius: var(--r);

  background:
    radial-gradient(140% 140% at 20% 20%, rgba(255,255,255,.14), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.16);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 18px 50px rgba(0,0,0,.60),
    inset 0 1px 0 rgba(255,255,255,.14);

  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}

/* Glow discret */
.hero-cont1 .single-cont::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: calc(var(--r) + 2px);
  background:
    radial-gradient(80% 120% at 25% 0%, rgba(255,255,255,.18), transparent 55%),
    radial-gradient(80% 120% at 90% 35%, rgba(255,255,255,.10), transparent 55%);
  filter: blur(14px);
  opacity:.55;
  pointer-events:none;
}

/* Shimmer loading */
.hero-cont1 .single-cont::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--r);
  background: linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.18) 16%,
    rgba(255,255,255,0) 38%
  );
  transform: translateX(-130%);
  animation: shimmer 1.05s linear infinite;
  opacity:.75;
  pointer-events:none;
}

@keyframes shimmer{
  to{ transform: translateX(130%); }
}

/* Opreste shimmer dupa load */
.hero-cont1.is-loaded .single-cont::after{
  animation: none;
  transform: none;
  opacity: 0;
}

/* Hover */
.hero-cont1 .single-cont:hover{
  transform: translateY(-1px);
  box-shadow:
    0 26px 68px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Icon */
.hero-cont1 .single-cont .image{
  width: 42px;
  height: 42px;
  margin-right: 10px;

  display: grid;
  place-items: center;

  border-radius: 18px;
  background:
    radial-gradient(130% 150% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 55%, rgba(255,255,255,.03) 100%);
  border: 1px solid rgba(255,255,255,.12);

  box-shadow:
    0 14px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.12);

  position: relative;
  overflow: hidden;
}

.hero-cont1 .single-cont .image img{
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.45));
}

/* Text */
.hero-cont1 .single-cont .txt-c h4{
  font-size: 22px;
  margin: 0;
  line-height: 1;
  color: #fff;
  font-family: var(--font2);
}

.hero-cont1 .single-cont .txt-c h3{
  font-size: 12px;
  margin: 5px 0 0;
  font-family: var(--font3);
  font-weight: 400;
  color: rgba(255,255,255,.78);
}

/* Badge 24h */
.hero-cont1 .single-cont .txt-c h3 .dc{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 6px;
  font-size: 11px;
}

/* Dot corect (nu #green) */
.hero-cont1 .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.45);
  animation: pulse 1.6s ease-out infinite;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70%{ box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}


/* -----------------------------
   MOBILE (fix look + elimina gap)
   ----------------------------- */
@media (max-width: 991px){

  /* elimina golul mare */
  .hero-section{
    min-height: auto !important;
    padding-bottom: 0 !important;
    background-position: center top !important;
  }

  .hero-section .container{
    display: block !important;
  }

  .hero-section-inner{
    height: auto !important;
    min-height: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 12px 12px 10px !important; /* control distanta */
  }

  /* stats: centrate, fara margin-bottom urias */
  .hero-cont1{
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }

  /* 1 pe rand, arata clean */
  .hero-cont1 .single-cont{
    width: min(420px, 100%) !important;
    justify-content: flex-start !important;
    padding: 10px 14px !important;
    border-radius: 24px !important;
  }

  /* dimensiuni mai ok */
  .hero-cont1 .single-cont .image{
    width: 38px !important;
    height: 38px !important;
    border-radius: 16px !important;
    margin-right: 10px !important;
  }

  .hero-cont1 .single-cont .txt-c h4{ font-size: 22px !important; }
  .hero-cont1 .single-cont .txt-c h3{ font-size: 12px !important; }

  /* IMPORTANT: lasa shimmer pe mobil (sa se vada) */
  .hero-cont1 .single-cont::after{
    animation: shimmer 1.05s linear infinite !important;
    opacity: .75 !important;
  }

  /* elimina spatiul dintre hero si sectiunea urmatoare */
  .section-wrapper1{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  .h-0{
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .main-section,
  .main-section-inner{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* -----------------------------
   VIDEO hero (daca folosesti .hero-bg-wrap/.hero-bg)
   asigura fill pe mobil
   ----------------------------- */
@media (max-width: 991px){
  .site-header{ position: relative !important; }

  .hero-bg-wrap{
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }

  .hero-bg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* continut peste video */
  .hero-section,
  .hero-section-inner{
    position: relative !important;
    z-index: 1 !important;
  }
}



/* ---hero-section----end */







/* ------section-wrapper1------ */

.section-wrapper1 {

	padding: 0 0 185px;

	background: url('../images/s-group1.png') no-repeat center bottom/cover;

}

/* ------section-wrapper1------end */





/* ---main-section--- */

.main-section {



}

.main-section-inner {

	display: flex;

	justify-content: space-between;

	margin-top: -65px;

}

.m-sidebar {

	width: 23.5%;

}

.m-sidebar-left {

  

}

.m-sidebar-right {



}

.m-main-part {

	width: 46.8%;

  margin-top: 10px;

}



.st-img-button {

  margin: 0 0 25px;

  display: flex;

}

.download-client-button img {

	margin: -21% -13% -23% -16%;

	width: 140%;

	max-width: initial;

}

.itemshop-button img {

  margin: -2% 0 0;

}

.vote-forbuff-button img {

	margin: -10% -5% -11.3% -4.6%;

	max-width: initial;

	width: 108.1%;

}



.s-box {

	padding: 70px 16px 0 18px;

	margin: 0px 0 125px;

	position: relative;

	height: 350px;

	z-index: 1;

}

.s-box .border-img {

	position: absolute;

	top: -9.7%;

	left: -6.3%;

	height: 109.5%;

	width: 112%;

	max-width: initial;

	z-index: -1;

}

.s-box .bt-illustration {

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translate(-50%,0);

}

.s-box-header {

	margin-top: -56px;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	display: flex;

	align-items: center;

}

.s-box-header .bg-img {

  margin: 0 auto;

}

.s-box-header .header-cont {

	padding: 54px 0;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

}

.s-box-header h3 {

  font-size: 13px;

  margin: 0;

  font-family: var(--font2);

  color: #ffffff;

  font-weight: 400;

  text-align: center;

}

.s-box-title {

  display: flex;

  flex-direction: column;

  align-items: center;

}

.s-box-title h3 {

  font-size: 11px;

  color: #d0dffa;

  font-family: var(--font1);

  font-weight: 400;

}

.s-box-title h3 a {

  text-decoration: underline !important;

  color: #8fb0e7;

}



.s-box-form {

	padding: 8px 14px;

	width: 100%;

}

.single-input-x {

	width: 100%;

	margin: 0 0 14px;

}

.single-input-x-input-outer {

  position: relative;

  z-index: 1;

}

.single-input-x-input-outer .icon {

  position: absolute;

  top: 50%;

  left: 12px;

  transform: translate(0,calc(-50% - 1px));

}





.single-input-x-input {

  height: 34px;

  padding-left: 42px;

  width: 100%;

  border: none;

  background: transparent;

  font-size: 12.3px;

  font-weight: 400;

  color: var(--theme__color2);

  background: #232323;

  box-shadow: 0px 1px 0px 0px rgb(255 255 255 / 50%), 0px 10px 24px 0px rgb(0 0 0 / 10%);

}



.single-input-x-search .icon {

  position: absolute;

  top: 50%;

  left: initial;

  right: 12px;

  transform: translate(0,-50%);

}

.single-input-x-search .single-input-x-input {

  padding-left: 18px;

  padding-right: 33px;

}

.x-check-label {

  margin: 0 0 18px;

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 12px;

  color: var(--theme__color2);

}





.s-box-form {



}

.s-box-form .bt-row {

	padding: 8px 0 0;

	display: flex;

	flex-direction: column;

	width: 95%;

	margin: 0 auto;

}

.form-fgt {

  min-height: 33px;

  font-size: 12px;

  padding: 5px;

  color: #ffffff;

  background-color: rgb(35 35 35);

  box-shadow: 0px 1px 0px 0px rgb(255 255 255 / 50%), 0px 10px 24px 0px rgb(0 0 0 / 10%);

  text-align: center;

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}

.bg {



  position: absolute;

  left: 384px;

  top: 955px;

  width: 220px;

  height: 31px;

  z-index: 41;

}









.s-box-s2 {

  height: 399px;

}



.s-box-s2 .border-img {

	top: -8%;

	height: 108%;

}



/* =========================
   GOLD PLAYER – CARD
========================= */
.gold-player {
    position: relative;
    padding: 20px 25px;
    gap: 15px;
    margin: 10px 8px 20px;

    display: flex;
    align-items: center;

    /* Gold dark → black */
    background: linear-gradient(
        135deg,
        #2a240f,
        #1b1607,
        #000000
    );
    background-size: 200% 200%;
    animation: gradientMoveGold 14s ease infinite;

    box-shadow: 
        0 6px 25px rgba(0, 0, 0, 0.55),
        inset 0 2px 6px rgba(255, 215, 100, 0.08),
        inset 0 -4px 10px rgba(0, 0, 0, 0.7);

    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover 3D discret */
.gold-player:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 
        0 10px 35px rgba(0, 0, 0, 0.65),
        inset 0 3px 6px rgba(255, 215, 100, 0.05),
        inset 0 -5px 12px rgba(0, 0, 0, 0.8);
}

/* =========================
   GOLD SHINE / SLIPICI
========================= */
.gold-player::after {
    content: '';
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            rgba(255,215,100,0.0) 30%,
            rgba(255,215,100,0.35) 45%,
            rgba(255,200,70,0.6) 50%,
            rgba(255,215,100,0.35) 55%,
            rgba(255,215,100,0.0) 70%
        );

    background-size: 200% 200%;
    animation: goldShine 9s linear infinite;

    opacity: 0.65;
    filter: blur(1.3px);
    pointer-events: none;
}

/* =========================
   ANIMAȚII
========================= */
@keyframes gradientMoveGold {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes goldShine {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* =========================
   GOLD PLAYER IMAGE
========================= */
.gold-player__image {
    width: 40px;
    height: 40px;
    background: url('../images/gold-player-ellipse.png') no-repeat center / cover;
    position: relative;
}

.gold-player__image .img {
    margin-top: -14px;
}

/* =========================
   BADGE
========================= */
.gold-player__bdg {
    width: 20px;
    height: 20px;
    background: #3a2f0a;
    border-radius: 50%;

    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow:
        0 0 6px rgba(255, 215, 100, 0.45);
}

/* =========================
   CONTENT
========================= */
.gold-player__content h4 {
    font-size: 12px;
    font-weight: 400;
    color: #ff;
    text-align: center;
}

.gold-player__content h4 .yll {
    font-size: 11px;
}

.gold-player__content h5 {
    font-size: 11px;
    font-weight: 400;
    color: #fff;
    display: flex;
    margin: 0;
}

.gold-player__content h5 .line {
    margin: 0 10px;
    border-right: 1px solid #4a3b10;
    border-left: 1px solid #1a1405;
    display: block;
}

.gold-player__content h5 .wht {
    color: #fff1b8;
}




.table-user a {

	width: 100%;

    display: block;

	padding: 3px;

	padding-left: 10px;

	-webkit-transition: all 1s ease!important;

	transition: all 1s ease!important;

}

.table-user a:hover {

  -webkit-filter: brightness(120%);

  filter: brightness(120%);

  color: #b88b4c;

}

.table-st1 {



}

.table-st1 table {



}

.table-st1 table td {

	font-size: 11px;

	padding: 7px;

	color: #fff;

}

.table-st1 tbody tr, 

.table-user a {

  background-image: -moz-linear-gradient( 0deg, rgb(36,4,4) 0%, rgb(36,4,4) 100%);

  background-image: -webkit-linear-gradient(0deg, rgb(18 9 9) 0%, rgb(12 11 11) 100%);

  background-image: -ms-linear-gradient( 0deg, rgb(36,4,4) 0%, rgb(36,4,4) 100%);

}

.table-st1 tbody tr:nth-child(odd), 

.table-user a:nth-child(odd) {

  background-image: -moz-linear-gradient( 0deg, rgb(88,19,19) 0%, rgb(35,5,5) 100%);

  background-image: -webkit-linear-gradient(0deg, rgb(55 55 55) 0%, rgb(26 26 26) 100%);

  background-image: -ms-linear-gradient( 0deg, rgb(88,19,19) 0%, rgb(35,5,5) 100%);

}



.table-st1 .no {

  color: #efe0d0;

}

.table-st1 .color-red {

  color: #eb6565;

}

.table-st1 .color-yellow {

  color: #ebc165;

}

.table-st1 .color-violet {

  color: #656feb;

}

.table-st1 .color-lt {

  color: var(--theme__color2);

}

.emp-1 {

  color: #eb6565;

}

.emp-2 {

  color: #eebe4b;

}

.emp-3 {

  color: #4f6af3

}


/* Container tabel premium */
.table-st1-str1 {
    --con-off: 7px;

    padding: 0 6px;
    display: inline-block;   
    min-width: 220px;        
    width: fit-content;      
    max-width: 100%;         
    max-height: 400px;       
    overflow: auto;          

    /* Gradient subtil premium */
    background: linear-gradient(135deg, #2a2a2a, #1e1e1e, #0d0d0d);
    background-size: 200% 200%;
    animation: tableGradient 12s ease infinite;

    /* Shadow pentru adâncime */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);

    border-radius: 12px;  /* colțuri rotunde container */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover subtil */
.table-st1-str1:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

/* Animatie gradient */
@keyframes tableGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Scroll bar elegant pentru webkit */
.table-st1-str1::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.table-st1-str1::-webkit-scrollbar-thumb {
    background-color: #555; 
    border-radius: 3px;
}

.table-st1-str1::-webkit-scrollbar-track {
    background-color: #1c1c1c; 
    border-radius: 3px;
}

/* Tabel intern */
.table-st1-str1 table {
    border-collapse: separate; /* permite border-radius pe celule */
    border-spacing: 0;         
    width: 100%;
}

/* Colțuri rotunde pentru celulele de la capete */
.table-st1-str1 table tr:first-child td:first-child {
    border-top-left-radius: 12px;
}

.table-st1-str1 table tr:first-child td:last-child {
    border-top-right-radius: 12px;
}

.table-st1-str1 table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}

.table-st1-str1 table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}

/* Celulele tabelului */
.table-st1-str1 table td:nth-child(1) {
  width: 17%;
  text-align: center;
  padding-left: var(--con-off);
}

.table-st1-str1 table td:nth-child(2) {
  width: 31%;
}

.table-st1-str1 table td:nth-child(3) {
  width: 26%;
  padding-right: 10px;
}

.table-st1-str1 table td:last-child {
  padding-right: var(--con-off);
  text-align: right; 
  padding-right: 12px;
}

/* Status */
.table-st1-str1 .status {
  display: flex;
  align-items: center;
  color: #72C82D;
}

.table-st1-str1 .status .dot {
  margin: 2px 6px 0 0;
  height: 5px;
  width: 5px;
  background: #72C82D;
  border-radius: 50%;
  flex-shrink: 0;
}

.table-str2 {

  padding: 10px 2px;

}

.table-str2 table {



}

.table-str2 table thead td {

  padding-top: 0;

  padding-bottom: 4px;

}

.table-str2 table td {

  padding: 6px 3px;

  border: none;

  color: #c3c3c3;

}

.table-str2 table td {

  height: 31px;

}

.table-str2 table td:nth-child(1) {

  padding-left: 5px;

}

.table-str2 table td:last-child {

  text-align: right;

  padding-right: 7px;

} 



.s-box-button-row1 {

  padding: 0 15px;

  display: flex;

  justify-content: space-between;

}





.ac-bottom-button {

	display: flex;

	align-items: center;

	justify-content: center;

	margin: 22px 0 0;

}



.progress-cont-wrap {



}

.server-statics-table {



}

.server-statics-table .s-box-title {



}

.table-update-time__outer {

	margin: 10px auto 0;

	padding: 16px 0px 0;

	border-top: 1px solid #ffffff46;

	display: flex;

	justify-content: center;

	max-width: 225px;

}

.table-update-time {

  margin: 10px 17px 0;

  padding: 6px 15px;

  font-size: 11px;

  font-weight: 400;

  background: #272727;

  color: #c3c3c3;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 7px;

  margin: 0 auto;

}

.table-update-time .arrow-r {

  margin: 1px 8px 0 0;

}



.table-sm-st {

  width: 100%;

}

.table-sm-st table {

  width: 100%;

  table-layout: unset;

}

.table-sm-st td {

  padding: 5px 5px;

  font-size: 13px;

  font-weight: 400;

  color: #7c8597;

}



.table-sm-st-str1 {

	padding: 0px 5px;

}

.table-sm-st-str1 table {



}

.table-sm-st-str1 table td:nth-child(1) {



}

.table-sm-st-str1 table td:nth-child(2) {

  text-align: right;

}





.progress-cont-wrap {

  margin: 7px 0 10px;

  padding: 12px 21px 18px;

  border: 1px solid #5F6697;

  background: #121635;

}

.progress-cont {



}

.progress-cont .title {

  padding: 0 0 5px;

  display: flex;

  justify-content: space-between;

}

.progress-cont .title h3 {

  font-size: 14px;

  font-weight: 400;

  margin: 0;

  color: #97a1b4;

}

.progress-cont .title h3.bold {

  font-weight: 700;

  color: #d0dffa;

}

.progress-cont .progress-elm {

  padding: 1px;

  height: 13px;

  border: 1px solid #1A1E3A;

  border-radius: 40px;

  overflow: hidden;

}

.progress-cont .progress-elm .progress-fill {

  height: 100%;

  background: rgba(255, 255, 255, 0.692);

  border-radius: 40px 0 0 40px;

}





.bt-button-sde {

  margin: 11px 0 0;

}

.bt-button-sde a {

  font-size: 15px;

  font-weight: 700;

  color: #d0dffa;

  text-align: center;

  display: block;

}









.m-box {

  margin: 0 0 50px;

  background: #BACBDB;

  color: #151515;

}

.m-box-full-height {

  height: 100%;

  padding-bottom: 60px;

}

.m-box-design1 {

  height: 260px;

  position: relative;

}

.m-box-design1 .m-box-border {

	position: absolute;

	top: -13%;

	left: -5.7%;

	max-width: initial;

	height: 126%;

	width: 111.5%;

}



.content-ud {

  display: flex;

  flex-direction: column;

}

.content-ud-cont {

  padding: 17px 25px;

  margin-top: auto;

  background: rgba(0, 0, 0, 0.78);

  display: flex;

  justify-content: space-between;

  align-items: center;

  position: relative;

}

.content-ud .update-character {

  position: absolute;

  top: 0;

  right: 7px;

  height: 100%;

  width: auto;

}

.content-ud-cont .left-side {



}

.content-ud-cont .left-side h3 {

  font-size: 17px;

  margin: 0 0 1px;

}

.content-ud-cont .left-side h5 {

  font-size: 14px;

  color: #97a1b4;

  margin: 0;

}

.content-ud-cont .right-side {



}

.content-ud-cont .right-side .button {



}



.xy-news-part {

  background: #1a1919;

  color: #fff;

  min-height: 400px;

  padding-bottom: 25px;

}

.xy-news-header, .page-hd {

  margin: 0 8px;

  padding: 0px 3px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #ffffff21;

  color: #fff;

}

.page-hd {

    align-items: center;

    justify-content: center;

}

.xy-news-header h3, .pre-social {

  font-size: 18px;

  font-weight: 700;

  font-family: var(--font2);

}

.pre-social {

	padding: 10px 0 10px;

}

.xy-nh-ul {

  display: flex;

}

.xy-nh-ul li {

  padding: 0 27px;

}

.xy-nh-ul li:last-child {

  padding-right: 0;

  border-right: none;

}

.xy-nh-ul li a {

  font-size: 12px;

  padding: 28px 3px;

  display: block;

  color: #818181;

  transition: 0.3s;

  border-bottom: 1px solid transparent;

  margin-bottom: -1px;

}

.xy-nh-ul li a.active,

.xy-nh-ul li a:hover {

  color: #e9e9e9;

  border-bottom-color: #6d6d6d;

}



.content-xy {

	padding: 35px 30px 8px;

}

.content-xy .xy-title {

	padding: 16px 25px 16px 25px;

	display: flex;

	justify-content: space-between;

	align-items: center;

	background-image: -moz-linear-gradient( 0deg, rgb(105,24,24) 0%, rgb(69,12,12) 100%);

	background-image: -webkit-linear-gradient(0deg, rgb(67 67 67) 0%, rgb(10 9 9) 100%);

	background-image: -ms-linear-gradient( 0deg, rgb(105,24,24) 0%, rgb(69,12,12) 100%);

	box-shadow: 0px 2px 5px 0px rgba(3, 3, 3, 0.15);

	border-left: #8b8b8b;

	border-right: #8b8b8b;

}



.content-xy .xy-title .left {



}

.content-xy .xy-title .left h4 {

  font-size: 10px;

  margin: 0;

}

.content-xy .xy-title .left h3 {

  font-size: 12px;

  font-weight: 800;

  margin: 0;

}

.content-xy .xy-title .right ul.xy {

  display: flex;

}

.content-xy .xy-title .right ul.xy li {

  font-size: 11px;

  margin-right: 12px;

  border-right: 1px solid #fff;

  padding-right: 12px;

  color: #9b9b9b;

}

.content-xy .xy-title .right ul.xy li:last-child {

  border: none;

  margin-right: 0;

  padding-right: 0;

}

.content-xy .xy-title .right ul.xy li .dark {



}



.xy-text-cont {

  padding: 20px 0 0;

  display: flex;

  flex-direction: column;

}

.xy-text-cont p {

  margin: 0 0 15px;

  font-size: 12px;

  font-weight: 400;

  line-height: 1.45;

  color: #fae9ce;

  text-align: justify;

}

.xy-text-bottom {

  margin: 5px 0 0;

  gap: 5px;

  display: flex;

  align-items: center;

}

.xy-text-bottom .f-line {

  height: 1px;

  display: block;

  background: #0C1823;

  flex-grow: 1;

}









.n-offer-row {

  --inner-space: 18px;

  --bt-space: var(--inner-space);

  --item: 5;

  display: flex;

  flex-wrap: wrap;

  margin: 0 calc(var(--inner-space) * -0.5) calc(var(--bt-space) * -1 );

}

.n-offer {

  width: calc((100% / var(--item)) - var(--inner-space));

  margin: 0  calc(var(--inner-space) * 0.5) var(--bt-space);

  background: url('../images/offer-item-bg.png') no-repeat center center/100% 100%;

  position: relative;

  padding: 3px;

}

.n-offer .new-badge {

  position: absolute;

  top: 0;

  left: 0;

}

.n-offer .image {

  padding: 11px 0 3px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.n-offer .image .img {



}

.n-offer .text-cont {

  padding: 0 0 8px;

  text-align: center;

}

.n-offer .text-cont h3 {

  font-size: 10px;

  margin: 0 0 1px;

  font-weight: 600;

}

.n-offer .text-cont h5 {

  margin: 0;

  font-size: 10px;

  font-weight: 400;

  color: #f8d394;

  display: flex;

  align-items: center;

  justify-content: center;

}

.n-offer .text-cont h5 img {

  margin: 0 0 0 4px;

}







/* ---main-section---end */







/* ---pagination--- */

.pagination {

	padding: 5px 0 28px;

	display: flex;

	justify-content: center;

}

.pagination ul, .pagination .buttons {

  display: flex;

}

.pagination ul li,

.pagination .buttons a,

.pagination .buttons span {

  margin-right: 6px;

} 

.pagination ul li:last-child {

  margin-right: 0;

}

.pagination ul li a,

.pagination .buttons a, 

.pagination .buttons span {

  font-size: 11px;

  height: 19px;

  width: 19px;

  color: #fff;

  background: #180202;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s;

}

.pagination ul li a:hover,

.pagination .buttons a:hover {

  color: #fff;

}

.pagination ul li a.disabled {

  color: #3B3B52;

}

.pagination ul li .i-a {

	background: transparent;

	color: #fff;

	filter: drop-shadow(0px 3px 1px #000);

}

.pagination ul li .i-a.disabled {

  color: #58656D;

}

.pagination ul li a.active,

.pagination ul li a:hover,

.pagination .buttons a:hover,

.pagination .buttons span {

  border-bottom: 1px solid var(--theme__color2);

  background: #474747;

  height: 20px;

}

/* ---pagination---end */







/* ---card-d-section--- */

.card-d-section {

  padding: 100px 0;

}

.card-d-section-inner {



}

.card-d-row {

  --inner-space: 5.4%;

  --bt-space: var(--inner-space);

  --item: 3;

  display: flex;

  flex-wrap: wrap;

  margin: 0 calc(var(--inner-space) * -0.5) calc(var(--bt-space) * -1 );

}

.card-d {

  width: calc((100% / var(--item)) - var(--inner-space));

  margin: 0  calc(var(--inner-space) * 0.5) var(--bt-space);

  height: 232px;

  display: flex;

  flex-direction: column;

  position: relative;

  z-index: 1;

}

.card-d::after {

  content: '';

  height: 100%;

  width: 100%;

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  background: linear-gradient(#0b123e00, #0B123E);

  z-index: -1;

}

.card-d .txt-cont {

  padding: 11px;

  margin-top: auto;

  text-align: center;

}

.card-d .txt-cont h3 {

  margin: 0 0 5px;

  font-size: 21px;

  text-shadow: 2px 2px 0px #000;

}

.card-d .txt-cont h5 {

  margin: 0 0 5px;

  font-size: 13px;

  font-weight: 400;

  font-family: var(--font2);

  color: #747fb5;

}

.card-d .txt-cont .button {

  font-size: 12px;

  font-weight: 700;

  font-family: var(--font2);

  background: linear-gradient(to right,#121E53,#1E3086,#121E53);

  display: block;

  width: max-content;

  margin: 0 auto;

  padding: 10px 20px;

  border-radius: 5px;

  min-width: 180px;



}

/* ---card-d-section---end */







/* ---footer-logo--- */

.footer-logo {

  width: 115px;

  display: flex;

  justify-content: center;

}

.footer-logo-img {

  width: 183px;

}

/* ---footer-logo---end */







/* zona footer */
.footer-section {
  background: transparent;
}

/* wrapper */
.footer-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 18px 14px;
}

/* BAR-ul mare, mai transparent, cu shading ca în poză */
.footer-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;

  /* AICI e “mai mare” */
  padding: 22px 26px;

  /* AICI e “mai transparent” */
  background: rgba(0,0,0,0.0);

  /* border-uri foarte fine ca în screenshot */
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.07);

  /* colțuri și un shading subtil */
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.35);

  /* blur discret (dacă vrei fix ca overlay-ul) */
  backdrop-filter: blur(3px);
}

/* Link-urile stânga: mai “împrăștiate” și încadrate */
.footer-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 28px;             /* distanța dintre link-uri, ca în poză */
}

/* Link style simplu (ca la el, fără underline animat) */
.footer-link{
  color: rgba(255,255,255,0.74);
  text-decoration:none;
  font-size: 12px;
  letter-spacing: 0.2px;
  transition: 0.18s ease;
}

.footer-link:hover{
  color: rgba(255,255,255,0.92);
}

/* Iconițe dreapta: ca “butoane” mici rotunde */
.footer-icons{
  display:flex;
  align-items:center;
  gap: 14px;
}

.footer-ico{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  border-radius: 999px;

  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.06);

  color: rgba(255,255,255,0.62);
  text-decoration:none;
  font-size: 15px;

  transition: 0.18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

.footer-ico:hover{
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.10);
  transform: translateY(-1px);
  background: rgba(0,0,0,0.30);
}

/* linia de jos, centrată, mai “stinsă” */
.footer-copy{
  text-align:center;
  margin-top: 16px;
  font-size: 12px;
  color: rgba(255,255,255,0.42);
}

.footer-credit{
  color: rgba(255,255,255,0.62);
}

/* responsive */
@media (max-width: 768px){

  /* bar mai compact, dar încă “vizibil” */
  .footer-bar{
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 14px 12px;
    gap: 10px;

    /* pe mobil trebuie puțin fundal ca să se citească */
    background: rgba(0,0,0,0.22);
  }

  /* link-uri: mai mici + spacing mai mic + centrare */
  .footer-links{
    width: 100%;
    justify-content: center;
    gap: 10px 14px;
  }

  .footer-link{
    font-size: 12px;
    line-height: 1.2;
    padding: 2px 0;
  }

  /* iconițe: puțin mai mici ca să nu ocupe mult */
  .footer-icons{
    justify-content: center;
    gap: 10px;
  }

  .footer-ico{
    width: 30px;
    height: 30px;
    font-size: 14px;
  }

  /* copyright: mai compact */
  .footer-copy{
    margin-top: 12px;
    padding: 0 10px;
    font-size: 11.5px;
    line-height: 1.35;
  }
}










/* ---ranking--- */

.heading-op {

  padding: 24px 0;

  position: relative;

  z-index: 1;

}

.heading-op h2 {

  font-size: 18px;

  text-align: center;

  margin: 0;

}

.heading-op .heading-op-btb {

	position: absolute;

	bottom: 0;

	left: 50%;

	transform: translate(-50%,59%);

  z-index: 1;

}



.ranking-head-navigation {

  max-width: 240px;

  margin: 20px auto 20px;

  position: relative;

  z-index: 1;

}

/* ---ranking---end */





/* ---download--- */

.download-game {

  padding: 60px 43px 50px;

}

.download-game .title {

  padding: 0 0 20px;

}

.download-game .title h3 {

  font-size: 13px;

  font-weight: 400;

  color: #97a1b4;

  font-family: var(--font2);

  text-align: center;

}

.download-game .download-row1 {

  margin: 0 0 20px;

  display: flex;

  justify-content: space-between;

}

.download-game .download-row2 {

  margin: 0 0 100px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.download-game .download-row3 {

  display: flex;

  justify-content: center;

  margin: 0 0 100px;

}

.download-game .download-row4 {



}

.download-game .download-button {

  display: inline-flex;

  width: 255px;

}

.download-game-requirement {

  padding: 0 33px;

}

.download-game-requirement table {



}

.download-game-requirement table td {

  padding: 2px 0;

  font-size: 13px;

  font-weight: 400;

  color: #97a1b4;

  font-family: var(--font2);

}

.download-game-requirement table td:first-child {

  width: 33%;

}

/* ---download---end */







/* ---create-account--- */

.create-account {

  padding: 90px 16px 20px;

}

.account-form {

  margin: 0 auto 55px;

  max-width: 230px;

}

.account-form-row1 {

  margin: 0 0 40px;

}

.account-form-row1 p {

  font-size: 13px;

  font-weight: 400;

  color: #a6b0d1;

  font-family: var(--font2);

  text-align: center;

}

.account-form-row2 {

  display: flex;

  align-items: center;

  justify-content: center;

}

/* ---create-account---end */





/* ---m-slider--- */

.m-slider {



}

.m-slider .owl-nav {

  position: absolute;

  top: 33px;

  right: 20px;

}

.m-slide {

  position: relative;

}

.m-slide .m-box {

  background: transparent;

}

.m-slide-caption {

  padding: 9px 26px 10px;

  position: absolute;

  top: 20px;

  left: 0;

  width: 100%;

  background: #0000003d;

  color: #fff;

}



.m-slide-caption h3 {

  font-size: 14px;

  margin: 0 0 6px;

  font-weight: 700;

}

.m-slide-caption h4 {

  font-size: 13px;

  color: var(--theme__color2);

  font-weight: 400;

}



.slider-arrow-1 .owl-nav {

  gap: 3px;

  display: flex;

}

.slider-arrow-1 .owl-nav button {

  font-size: 10px !important;

  width: 24px;

  height: 22px;

  background: #161616 !important;

  color: #fff !important;

  transition: 0.3s;

}

.slider-arrow-1 .owl-nav button:hover {

  background: #494949 !important;

}



.slider-arrow--center {

  --offset: 30px;

}

.slider-arrow--center .owl-nav button {

  left: var(--offset);

  position: absolute;

  top: 50%;

  transform: translate(0,-50%);

}

.slider-arrow--center .owl-nav .owl-next {

  left: unset;

  right: var(--offset);

}



.slider-dots-1 .owl-dots { 

  gap: 6px;

  display: flex;

}

.slider-dots-1 .owl-dots .owl-dot {

  height: 5px;

  width: 5px;

  border-radius: 50%;

  background: #7C91C1 !important;

  transition: 0.3s;

}

.slider-dots-1 .owl-dots .owl-dot.active {

  background: #fff !important;

}

/* ---m-slider---end */





.lan-select {

  display: flex;

  align-items: center;

  background: #161616;

  padding: 2px 5px;

  gap: 5px;

}

.lan-select img {

	height: 20px;

}

.lan-select .nice-select {

  display: flex;

  align-items: center;

  background: transparent;

  color: #dbdbdb;

  font-size: 13px;

  min-width: 100px;

}

.lan-select .nice-select::after {

  border-color: #dbdbdb;

  height: 6px;

  width: 6px;

  border-width: 1px;

  margin: -4px 0 0;

}

.lan-select .nice-select .list {

  color: #161616;

}

.g-recaptcha {

	transform: scale(0.85);

	-webkit-transform: scale(0.85);

	transform-origin: 0 0;

	-webkit-transform-origin: 0 0;

}

.login-captcha {

  transform: scale(0.62);

  -webkit-transform: scale(0.62);

  transform-origin: 0 0;

  -webkit-transform-origin: 0 0;

  height: 55px;

  margin-left: 15px;

}

.btn-lg {

	width: 100%;

}



/* ================================

   AOP2 - Animated Header Video CSS by unq_design

   Place in your main stylesheet (style.css) or custom CSS

   IMPORTANT: change .site-header selector to your real header container

   (examples: #header, .header, .top, .main, .page-top)

================================== */

html, body{

  margin:0;

  padding:0;

}

body{ overflow-x:hidden; }



/* IMPORTANT: pune aici containerul REAL al headerului */

.site-header{

  position: relative;

  width: 100%;

  min-height: 800px;     /* cât are animația ta */

  margin: 0 !important;

  padding: 0 !important;

}



/* video în spate pe tot header-ul */

.site-header .hero-bg-wrap{

  position: absolute;

  inset: 0;

  z-index: 0;

  overflow: hidden;

  pointer-events: none;

  background: #000;

}



/* FĂRĂ CROP + LIPIT SUS */

.site-header .hero-bg{

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;



  object-fit: contain;      /* fără crop */

  object-position: top center;  /* 🔑 asta îl lipește SUS */



  display: block;

}



/* conținut peste video */

.site-header > *:not(.hero-bg-wrap){

  position: relative;

  z-index: 2;

}

.color-lt, .wht {
    display: inline;
	color: #fff1b8;
}

.player-minutes {
    display: flex;                /* păstrează textul pe aceeași linie */
    justify-content: flex-end;    /* forțează valoarea să fie la margine */
    align-items: center;
    min-width: 70px;              /* lățime fixă pentru valoare (ajustează după nevoie) */
    gap: 5px;                     /* spațiu între "Minute:" și număr */
    white-space: nowrap;          /* previne spargerea liniei */
}

.table-st1 td {
    vertical-align: middle;       /* aliniază frumos în tabel */
}

/* =========================================================
   HERO STATS - MMORPG / METIN2 VIBE (alb/gri/negru)
   Copy/paste la final in CSS
   ========================================================= */

/* CARD = panel medieval (metal/stone) */
.hero-cont1 .single-cont{
  --r: 26px;

  border-radius: var(--r) !important;

  /* textura + metal */
  background:
    /* vignette */
    radial-gradient(120% 140% at 50% 30%, rgba(255,255,255,.10), rgba(0,0,0,.55) 68%),
    /* brushed metal streaks */
    repeating-linear-gradient(
      115deg,
      rgba(255,255,255,.045) 0px,
      rgba(255,255,255,.045) 2px,
      rgba(255,255,255,0) 8px,
      rgba(255,255,255,0) 14px
    ),
    /* base */
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;

  border: 1px solid rgba(255,255,255,.16) !important;

  box-shadow:
    0 18px 48px rgba(0,0,0,.70),
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.55) !important;

  /* “bevel” look */
  outline: 1px solid rgba(0,0,0,.45);
  outline-offset: -2px;
}

/* rama ornamentala subtila (unic) */
.hero-cont1 .single-cont::before{
  content:"";
  position:absolute;
  inset: 6px;
  border-radius: calc(var(--r) - 10px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.45);
  opacity: .9;
  pointer-events: none;
}

/* Shine sweep ca pe armura (nu shimmer modern) */
.hero-cont1 .single-cont::after{
  content:"";
  position:absolute;
  inset:-40% -60%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.16) 45%,
    transparent 70%
  );
  transform: rotate(18deg) translateX(-55%);
  animation: armorSweep 2.8s ease-in-out infinite;
  opacity:.55;
  pointer-events:none;
}

@keyframes armorSweep{
  0%{ transform: rotate(18deg) translateX(-60%); opacity:.25; }
  45%{ opacity:.60; }
  70%{ transform: rotate(18deg) translateX(65%); opacity:.35; }
  100%{ transform: rotate(18deg) translateX(65%); opacity:.20; }
}

/* Opreste sweep cand ai is-loaded (optional, daca vrei sa ramana mereu scoate blocul) */
.hero-cont1.is-loaded .single-cont::after{
  animation: none !important;
  opacity: 0 !important;
}

/* Hover = “power up” discret */
.hero-cont1 .single-cont:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.80),
    0 0 0 2px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.55) !important;
}

/* ICON badge = medalion metalic */
.hero-cont1 .single-cont .image{
  border-radius: 16px !important;
  background:
    radial-gradient(120% 140% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 55%, rgba(0,0,0,.35) 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 14px 28px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.55) !important;
}

/* Număr = mai “RPG” (emboss) */
.hero-cont1 .single-cont .txt-c h4{
  letter-spacing: .3px !important;
  text-shadow:
    0 14px 24px rgba(0,0,0,.65),
    0 1px 0 rgba(255,255,255,.10) !important;
}

/* Label = mai fantasy, dar păstrează fonturile tale */
.hero-cont1 .single-cont .txt-c h3{
  color: rgba(255,255,255,.76) !important;
  text-shadow: 0 10px 18px rgba(0,0,0,.55) !important;
}

/* Badge (24h) = “sigiliu” */
.hero-cont1 .single-cont .txt-c h3 .dc{
  background:
    radial-gradient(140% 160% at 50% 20%, rgba(255,255,255,.14), rgba(0,0,0,.35) 80%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 10px 18px rgba(0,0,0,.45) !important;
}

/* DOT online = “orb” (mai Metin2) */
.hero-cont1 .dot{
  width: 7px !important;
  height: 7px !important;
  background: rgba(255,255,255,.95) !important;
  box-shadow:
    0 0 0 0 rgba(255,255,255,.28),
    0 0 10px rgba(255,255,255,.22) !important;
  animation: orbPulse 1.9s ease-out infinite !important;
}

@keyframes orbPulse{
  0%{ box-shadow: 0 0 0 0 rgba(255,255,255,.28), 0 0 10px rgba(255,255,255,.22); }
  70%{ box-shadow: 0 0 0 12px rgba(255,255,255,0), 0 0 14px rgba(255,255,255,.18); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0), 0 0 10px rgba(255,255,255,.16); }
}

/* OPTIONAL: pe mobil, mai “tight” si fara sweep continuu (arata mai clean) */
@media (max-width: 991px){
  .hero-cont1 .single-cont::after{
    animation-duration: 3.4s !important;
    opacity: .45 !important;
  }
}

/* =========================================================
   HERO STATS - METIN2 / SILKROAD UI (alb/gri/negru) + WOW
   - rama metal/stone + ornament + shine
   - dot (orb) pulse vizibil
   ========================================================= */

/* card: panel RPG */
.hero-cont1 .single-cont{
  --r: 28px;

  border-radius: var(--r) !important;
  border: 1px solid rgba(255,255,255,.16) !important;

  /* stone/metal layering */
  background:
    /* inner vignette */
    radial-gradient(120% 140% at 50% 25%, rgba(255,255,255,.10), rgba(0,0,0,.62) 70%),
    /* stone grain */
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(255,255,255,0) 6px,
      rgba(255,255,255,0) 12px
    ),
    /* base */
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;

  box-shadow:
    0 22px 65px rgba(0,0,0,.78),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.65) !important;

  outline: 1px solid rgba(0,0,0,.55);
  outline-offset: -2px;

  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

/* ornament frame (ramă în ramă) */
.hero-cont1 .single-cont::before{
  content:"";
  position:absolute;
  inset: 7px;
  border-radius: calc(var(--r) - 12px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -1px 0 rgba(0,0,0,.55);
  opacity: .95;
  pointer-events:none;
}

/* functie noua wow: “sparkle sweep” pe rama (ca pe armură) */
.hero-cont1 .single-cont::after{
  content:"";
  position:absolute;
  inset:-60% -70%;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.18) 45%,
    transparent 70%
  );
  transform: rotate(18deg) translateX(-65%);
  animation: armorSweep 2.6s ease-in-out infinite;
  opacity:.55;
  pointer-events:none;
}

@keyframes armorSweep{
  0%{ transform: rotate(18deg) translateX(-70%); opacity:.18; }
  40%{ opacity:.60; }
  70%{ transform: rotate(18deg) translateX(75%); opacity:.35; }
  100%{ transform: rotate(18deg) translateX(75%); opacity:.18; }
}

/* rune corner (ornament mic) - unic, fara imagini */
.hero-cont1 .single-cont .image{
  position: relative;
  border-radius: 16px !important;
  background:
    radial-gradient(140% 160% at 30% 20%, rgba(255,255,255,.18), rgba(255,255,255,.06) 55%, rgba(0,0,0,.40) 100%) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.60) !important;
  overflow: hidden;
}

/* mic “sigiliu” in coltul badge-ului */
.hero-cont1 .single-cont .image::before{
  content:"";
  position:absolute;
  top: -10px;
  right: -10px;
  width: 26px;
  height: 26px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.22), rgba(0,0,0,.55) 70%);
  border: 1px solid rgba(255,255,255,.12);
  transform: rotate(20deg);
  border-radius: 10px;
  opacity: .75;
}

/* text mai “emboss” (RPG) */
.hero-cont1 .single-cont .txt-c h4{
  text-shadow:
    0 14px 26px rgba(0,0,0,.70),
    0 1px 0 rgba(255,255,255,.10) !important;
  letter-spacing: .3px !important;
}
.hero-cont1 .single-cont .txt-c h3{
  color: rgba(255,255,255,.78) !important;
  text-shadow: 0 10px 18px rgba(0,0,0,.60) !important;
}

/* (24h) = sigiliu */
.hero-cont1 .single-cont .txt-c h3 .dc{
  background:
    radial-gradient(150% 170% at 50% 20%, rgba(255,255,255,.14), rgba(0,0,0,.45) 80%) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.65),
    0 10px 18px rgba(0,0,0,.50) !important;
}

/* DOT: orb pulse vizibil (fix: sa “clipeasca”) */
.hero-cont1 .dot{
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.98) !important;

  /* aura */
  box-shadow:
    0 0 10px rgba(255,255,255,.28),
    0 0 0 0 rgba(255,255,255,.42) !important;

  animation: orbPulse 1.35s ease-out infinite !important;
  opacity: 1 !important;
}

@keyframes orbPulse{
  0%{
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,.28), 0 0 0 0 rgba(255,255,255,.42);
  }
  55%{
    transform: scale(1.08);
    box-shadow: 0 0 14px rgba(255,255,255,.22), 0 0 0 12px rgba(255,255,255,0);
  }
  100%{
    transform: scale(1);
    box-shadow: 0 0 10px rgba(255,255,255,.18), 0 0 0 0 rgba(255,255,255,0);
  }
}

/* Hover: “power-up” */
.hero-cont1 .single-cont:hover{
  transform: translateY(-1px) !important;
  box-shadow:
    0 28px 78px rgba(0,0,0,.85),
    0 0 0 2px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(0,0,0,.70) !important;
}

.hero-section{ position:relative; overflow:hidden; background:none !important; }
.hero-bg-wrap{ position:absolute; inset:0; width:100%; height:100%; z-index:0; overflow:hidden; pointer-events:none; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.hero-section::after{
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0));
}
/* sau doar mai mic */
.hero-section::after{
  background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.15));
}
.hero-section .container, .hero-section-inner, .hero-cont1{ position:relative; z-index:2; }

/* ===== Social Rail (Premium Fantasy) ===== */
:root{
  --rail-bg: rgba(10,12,16,.62);
  --rail-brd: rgba(130, 255, 230, .14);
  --rail-glow: rgba(64, 255, 210, .26);
  --rail-text: rgba(230, 245, 255, .9);
  --rail-muted: rgba(230, 245, 255, .62);
  --rail-shadow: 0 18px 48px rgba(0,0,0,.55);
  --rail-radius: 18px;
}

.social-rail{
  position: fixed;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none; /* ca să nu “fure” clickuri în jur */
}

.social-rail__inner{
  pointer-events: auto;
  width: 66px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 10px 50px;
  border-radius: var(--rail-radius);
  background: linear-gradient(180deg, rgba(12,14,20,.78), rgba(8,10,14,.55));
  border: 1px solid var(--rail-brd);
  box-shadow: var(--rail-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.social-rail__inner::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(120px 220px at 30% 10%, rgba(64,255,210,.18), transparent 55%),
    radial-gradient(120px 220px at 70% 85%, rgba(120,80,255,.14), transparent 60%);
  pointer-events:none;
}

.social-rail__inner::after{
  content:"";
  position:absolute;
  left:-40%;
  top:-30%;
  width: 160%;
  height: 160%;
  background: conic-gradient(from 180deg, transparent, rgba(64,255,210,.10), transparent);
  filter: blur(10px);
  opacity: .45;
  animation: railAura 6.5s linear infinite;
  pointer-events:none;
}

@keyframes railAura{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

.social-rail__item{
  position: relative;
  height: 46px;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  text-decoration: none;
  color: var(--rail-text);
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.social-rail__item::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(110px 80px at 25% 50%, rgba(64,255,210,.16), transparent 60%);
  opacity: 0;
  transition: opacity .18s ease;
}

.social-rail__ico{
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 18px;
  border-right: 1px solid rgba(255,255,255,.06);
}

.social-rail__label{
  position:absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 13px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.social-rail__hint{
  position:absolute;
  left: 62px;
  top: calc(50% + 14px);
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--rail-muted);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}

.social-rail__item:hover{
  transform: translateX(6px);
  border-color: rgba(64,255,210,.28);
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(64,255,210,.10) inset;
  background: rgba(255,255,255,.05);
}
.social-rail__item:hover::before{ opacity: 1; }

.social-rail__item:hover .social-rail__label{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.social-rail__item:hover .social-rail__hint{
  opacity: 1;
}

.social-rail__toggle{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  width: 46px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.04);
  color: var(--rail-text);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.social-rail__toggle:hover{
  transform: translateX(-50%) translateY(-2px);
  border-color: rgba(64,255,210,.28);
  box-shadow: 0 10px 25px rgba(0,0,0,.35);
}

/* Accent pe brand (subtil, pe hover) */
.social-rail__item.is-discord:hover::before{ background: radial-gradient(110px 80px at 25% 50%, rgba(88,101,242,.22), transparent 60%); }
.social-rail__item.is-youtube:hover::before{ background: radial-gradient(110px 80px at 25% 50%, rgba(255,0,0,.18), transparent 60%); }
.social-rail__item.is-facebook:hover::before{ background: radial-gradient(110px 80px at 25% 50%, rgba(24,119,242,.18), transparent 60%); }
.social-rail__item.is-instagram:hover::before{ background: radial-gradient(110px 80px at 25% 50%, rgba(255,90,160,.18), transparent 60%); }
.social-rail__item.is-tiktok:hover::before{ background: radial-gradient(110px 80px at 25% 50%, rgba(0,242,234,.14), transparent 60%); }

/* Expanded hover: rail se lărgește “premium” */
.social-rail__inner{
  transition: width .2s ease, transform .2s ease;
}
.social-rail__inner:hover{
  width: 210px;
}
.social-rail__inner:hover .social-rail__label,
.social-rail__inner:hover .social-rail__hint{
  opacity: 1;
}

/* Collapsed mode */
.social-rail.is-collapsed .social-rail__inner{
  width: 56px !important;
}
.social-rail.is-collapsed .social-rail__label,
.social-rail.is-collapsed .social-rail__hint{
  opacity: 0 !important;
}

/* Mobile: îl ascundem sau îl mutăm jos (alege una) */
@media (max-width: 991px){
  .social-rail{ display:none; }
}

/* Respectă preferințe reduce-motion */
@media (prefers-reduced-motion: reduce){
  .social-rail__inner::after{ animation: none; }
  .social-rail__item, .social-rail__toggle{ transition: none; }
}


/* === Social Rail: hidden + reveal on hover/edge === */
.social-rail{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none;
}

/* zona invizibilă de “hotspot” pe margine (ca să poți prinde cu mouse-ul) */
.social-rail::before{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;              /* cât de ușor să-l “agați” */
  height: 260px;
  pointer-events: auto;
}

/* container-ul efectiv */
.social-rail__inner{
  pointer-events: auto;

  /* IMPORTANT: îl ascundem în afara ecranului */
  transform: translateX(-74px); /* ajustezi dacă schimbi lățimi */
  transition: transform .22s ease, filter .22s ease, opacity .22s ease;

  opacity: .96;
  filter: saturate(1.05);
}

/* când dai hover pe rail SAU pe hotspot (via hover pe .social-rail) iese */
.social-rail:hover .social-rail__inner{
  transform: translateX(10px);
}

/* dacă vrei să se “umfle” în lățime doar când e deschis */
.social-rail:hover .social-rail__inner{
  width: 210px;
}

/* dacă e collapsed din buton */
.social-rail.is-collapsed .social-rail__inner{
  transform: translateX(-74px) !important;
  width: 66px !important;
}

/* mobile: ascuns */
@media (max-width: 991px){
  .social-rail{ display:none; }
}



/* ===========================
   SIDEBAR AOP — B/W ONLY (FINAL)
   Nume nou: .sidebaraop (nu se bate cu nimic)
=========================== */

.sidebaraop{
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  pointer-events: none;
}

/* edge hotspot (invizibil) */
.sidebaraop::before{
  content:"";
  position:absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 340px;
  pointer-events: auto;
}

/* HANDLE (mereu vizibil) */
.sidebaraop__handle{
  pointer-events: auto;
  width: 34px;
  height: 86px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #111;
  border: 1px solid #2b2b2b;
  border-left: none;
  border-radius: 0 14px 14px 0;

  color: #fff;
  cursor: pointer;

  box-shadow: 0 18px 40px rgba(0,0,0,.75);
  transition: background .18s ease, transform .18s ease;
}

.sidebaraop__handle:hover{
  background: #1a1a1a;
  transform: translateX(2px);
}

.sidebaraop__handle i{
  font-size: 14px;
  opacity: .92;
}

/* PANEL (ascuns implicit) */
.sidebaraop__panel{
  pointer-events: auto;
  position: absolute;
  left: 0;
  top: 50%;

  transform: translate(-110%, -50%);
  width: 66px;

  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  background: #0e0e0e;     /* solid, fără culori parazite */
  border: 1px solid #2b2b2b;
  border-left: none;
  border-radius: 0 18px 18px 0;

  box-shadow: 0 18px 48px rgba(0,0,0,.80);

  /* anti “culori fantomă” */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background-image: none !important;

  overflow: hidden;
  transition: transform .22s ease, width .22s ease;
}

/* OPEN pe hover */
.sidebaraop:hover .sidebaraop__panel{
  transform: translate(0, -50%);
  width: 240px;
}

/* OPEN când JS pune class */
.sidebaraop.is-open .sidebaraop__panel{
  transform: translate(0, -50%);
  width: 240px;
}

/* ITEM */
.sidebaraop__item{
  height: 56px; /* ca să încapă titlu + sub */
  border-radius: 14px;

  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  column-gap: 10px;
  padding-right: 12px;

  text-decoration: none;
  color: #fff;

  background: #161616;
  border: 1px solid #2e2e2e;

  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.sidebaraop__item:hover{
  transform: translateX(4px);
  background: #202020;
  border-color: #3a3a3a;
}

/* ICON */
.sidebaraop__ico{
  width: 46px;
  height: 56px;
  display: grid;
  place-items: center;

  border-right: 1px solid #2a2a2a;
}

.sidebaraop__ico i{
  font-size: 18px;
  opacity: .95;
  color: #fff;
}

/* TEXT WRAP */
.sidebaraop__txt{
  display: block;
  min-width: 0; /* obligatoriu pt ellipsis în grid */
}

/* TITLU */
.sidebaraop__title{
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.05;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* SUB */
.sidebaraop__sub{
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #bdbdbd;
  line-height: 1.05;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Când e închis (width 66), ascundem textul complet */
.sidebaraop:not(:hover):not(.is-open) .sidebaraop__txt{
  display: none;
}

/* Mobile off */
@media (max-width: 991px){
  .sidebaraop{ display: none; }
}


/* ===========================
   SIDEBAR AOP — ICON ONLY (SMALL)
=========================== */

/* panel mic */
.sidebaraop__panel{
  width: 64px !important;
  padding: 10px 8px !important;
  gap: 10px !important;
}

/* nu mai lărgi pe hover/open */
.sidebaraop:hover .sidebaraop__panel,
.sidebaraop.is-open .sidebaraop__panel{
  width: 64px !important;
}

/* item mic pătrat */
.sidebaraop__item{
  height: 44px !important;
  border-radius: 14px !important;
  grid-template-columns: 44px !important;
  padding-right: 0 !important;
  justify-items: center !important;
}

/* ico centrat */
.sidebaraop__ico{
  width: 44px !important;
  height: 44px !important;
  border-right: none !important;
}

.sidebaraop__ico i{
  font-size: 18px !important;
}

/* ascunde complet textul */
.sidebaraop__txt{
  display: none !important;
}