/* SIDEBAR TEMEL DEĞERLERİ */
:root {
  --sidebar-genislik: 258px;
  --sidebar-dar-genislik: 66px;
  --navbar-yukseklik: 80px;
  --sidebar-animasyon: 210ms ease;
}

/* SIDEBAR ANA YAPISI */
#ana-sidebar {
  position: fixed;
  top: var(--navbar-yukseklik);
  bottom: 0;
  left: 0;
  z-index: 900;

  width: var(--sidebar-genislik);
  padding: 12px 10px;

  display: flex;
  flex-direction: column;

  color: #eeeaf5;
  background:
    linear-gradient(180deg, rgba(123, 47, 190, 0.07), transparent 190px),
    #0e0a14;

  border-right: 1px solid rgba(170, 83, 229, 0.14);
  overflow: hidden;

  transition:
    width var(--sidebar-animasyon),
    transform var(--sidebar-animasyon),
    box-shadow var(--sidebar-animasyon);
}

/* FONT AWESOME İKON AYARI */
#ana-sidebar i {
  width: 20px;
  flex-shrink: 0;

  font-size: 16px;
  line-height: 1;
  text-align: center;
}

/* SIDEBAR ÜST ALANI */
#sidebar-ust-alani {
  margin-bottom: 14px;

  display: flex;
  align-items: center;
  gap: 8px;
}

#sidebar-ana-sayfa-baglantisi,
#sidebar-daraltma-butonu {
  height: 42px;

  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  color: #9b92a5;
  background: #17121e;

  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;

  transition:
    color var(--sidebar-animasyon),
    background-color var(--sidebar-animasyon),
    border-color var(--sidebar-animasyon);
}

#sidebar-ana-sayfa-baglantisi {
  min-width: 0;
  padding: 0 12px;

  flex: 1;
  justify-content: flex-start;

  color: #ffffff;
  background: rgba(123, 47, 190, 0.18);
  border-color: rgba(185, 91, 238, 0.3);
}

#sidebar-ana-sayfa-baglantisi i {
  color: #d78cff;
}

#sidebar-ana-sayfa-baglantisi:hover {
  background: rgba(123, 47, 190, 0.27);
  border-color: rgba(198, 112, 245, 0.42);
}

#sidebar-ana-sayfa-yazisi {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

#sidebar-daraltma-butonu {
  width: 42px;
  padding: 0;
  flex: 0 0 42px;
}

#sidebar-daraltma-butonu:hover {
  color: #ffffff;
  background: #21172b;
  border-color: rgba(175, 79, 230, 0.25);
}

/* SIDEBAR MENÜ */
#sidebar-menu {
  min-height: 0;

  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;

  overflow-x: hidden;
  overflow-y: auto;

  scrollbar-width: thin;
  scrollbar-color: rgba(133, 55, 190, 0.32) transparent;
}

#sidebar-menu::-webkit-scrollbar {
  width: 4px;
}

#sidebar-menu::-webkit-scrollbar-thumb {
  background: rgba(133, 55, 190, 0.32);
  border-radius: 10px;
}

/* MENÜ BAŞLIKLARI */
.sidebar-bolum-butonu {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;

  border: 1px solid transparent;
  border-radius: 10px;

  display: flex;
  align-items: center;
  gap: 11px;

  color: #b9b1c3;
  background: transparent;

  font-family: "Exo 2", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: left;

  cursor: pointer;

  transition:
    color var(--sidebar-animasyon),
    background-color var(--sidebar-animasyon),
    border-color var(--sidebar-animasyon);
}

.sidebar-bolum-butonu:hover {
  color: #ffffff;
  background: rgba(123, 47, 190, 0.11);
  border-color: rgba(176, 89, 232, 0.12);
}

.sidebar-menu-bolumu.acik > .sidebar-bolum-butonu {
  color: #ffffff;
  background: rgba(123, 47, 190, 0.16);
  border-color: rgba(176, 89, 232, 0.18);
}

.sidebar-menu-bolumu.acik > .sidebar-bolum-butonu .sidebar-bolum-sol-alani > i {
  color: #c77cff;
}

.sidebar-bolum-sol-alani {
  min-width: 0;

  display: flex;
  align-items: center;
  flex: 1;
  gap: 11px;
}

.sidebar-menu-yazisi {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.sidebar-acilma-ikonu {
  width: 17px !important;
  font-size: 12px !important;

  transition: transform var(--sidebar-animasyon);
}

.sidebar-menu-bolumu.acik .sidebar-acilma-ikonu {
  transform: rotate(180deg);
}

/* ALT MENÜLER */
.sidebar-alt-menu {
  max-height: 0;
  margin-left: 20px;
  padding-left: 14px;

  display: grid;
  gap: 3px;

  border-left: 1px solid rgba(166, 76, 222, 0.18);

  overflow: hidden;
  opacity: 0;

  transition:
    max-height 240ms ease,
    opacity 180ms ease,
    margin-top 240ms ease,
    margin-bottom 240ms ease;
}

.sidebar-menu-bolumu.acik .sidebar-alt-menu {
  max-height: 230px;
  margin-top: 4px;
  margin-bottom: 5px;
  opacity: 1;
}

.sidebar-alt-menu a {
  min-height: 36px;
  padding: 0 9px;

  border-radius: 8px;

  display: flex;
  align-items: center;
  gap: 9px;

  color: #968e9f;
  background: transparent;

  font-family: "Exo 2", sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;

  transition:
    color var(--sidebar-animasyon),
    background-color var(--sidebar-animasyon),
    transform var(--sidebar-animasyon);
}

.sidebar-alt-menu a i {
  width: 17px !important;
  font-size: 14px !important;
}

.sidebar-alt-menu a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.045);
  transform: translateX(2px);
}

/* YAKINDA */
#sidebar-yakinda-bolumu {
  margin-top: 8px;
  padding-top: 9px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#sidebar-yakinda-basligi {
  min-height: 36px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  gap: 11px;

  color: #776f80;

  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sidebar-yakinda-secenegi {
  width: 100%;
  min-height: 38px;
  padding: 0 11px;

  border: 0;
  border-radius: 8px;

  display: flex;
  align-items: center;
  gap: 10px;

  color: #69616f;
  background: transparent;

  font-family: "Exo 2", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.sidebar-yakinda-secenegi span {
  flex: 1;
  white-space: nowrap;
}

.sidebar-yakinda-secenegi small {
  padding: 3px 6px;
  border-radius: 20px;

  color: #9562b1;
  background: rgba(123, 47, 190, 0.09);

  font-size: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ALT ALAN */
#sidebar-alt-alani {
  padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

#sidebar-mobil-uyelik-alani {
  display: none;
}

/* SORUMLU OYUN */
#sidebar-sorumlu-oyun-baglantisi {
  min-height: 57px;
  padding: 9px 11px;

  border: 1px solid rgba(224, 150, 35, 0.15);
  border-radius: 11px;

  display: flex;
  align-items: center;
  gap: 10px;

  color: #d7cfdd;
  background: rgba(199, 116, 16, 0.055);
  text-decoration: none;

  transition:
    color var(--sidebar-animasyon),
    background-color var(--sidebar-animasyon),
    border-color var(--sidebar-animasyon);
}

#sidebar-sorumlu-oyun-baglantisi:hover {
  color: #ffffff;
  background: rgba(199, 116, 16, 0.1);
  border-color: rgba(224, 150, 35, 0.28);
}

/* GAMBLEAWARE LOGOSU */
#sidebar-gamble-aware-logosu {
  width: 34px;
  height: 34px;
  flex-shrink: 0;

  display: block;
  object-fit: cover;

  border-radius: 50%;
}

.sidebar-sorumlu-oyun-yazilari {
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;

  white-space: nowrap;
}

.sidebar-sorumlu-oyun-yazilari strong {
  font-size: 12px;
}

.sidebar-sorumlu-oyun-yazilari small {
  color: #7f7787;
  font-size: 9px;
}

#ana-sidebar.sidebar-dar #sidebar-gamble-aware-logosu {
  width: 30px;
  height: 30px;
}

/* DAR SIDEBAR */
#ana-sidebar.sidebar-dar {
  width: var(--sidebar-dar-genislik);
}

/* AÇMA BUTONU EN ÜSTE GELİR */
#ana-sidebar.sidebar-dar #sidebar-ust-alani {
  flex-direction: column;
}

#ana-sidebar.sidebar-dar #sidebar-daraltma-butonu {
  order: -1;
}

/* ANA SAYFA İKON OLARAK KALIR */
#ana-sidebar.sidebar-dar #sidebar-ana-sayfa-baglantisi {
  width: 42px;
  flex: 0 0 42px;
  padding: 0;
  justify-content: center;
}

#ana-sidebar.sidebar-dar #sidebar-ana-sayfa-yazisi,
#ana-sidebar.sidebar-dar .sidebar-menu-yazisi,
#ana-sidebar.sidebar-dar .sidebar-acilma-ikonu,
#ana-sidebar.sidebar-dar .sidebar-alt-menu,
#ana-sidebar.sidebar-dar .sidebar-yakinda-secenegi span,
#ana-sidebar.sidebar-dar .sidebar-yakinda-secenegi small,
#ana-sidebar.sidebar-dar .sidebar-sorumlu-oyun-yazilari {
  display: none;
}

#ana-sidebar.sidebar-dar .sidebar-bolum-butonu,
#ana-sidebar.sidebar-dar .sidebar-yakinda-secenegi,
#ana-sidebar.sidebar-dar #sidebar-yakinda-basligi,
#ana-sidebar.sidebar-dar #sidebar-sorumlu-oyun-baglantisi {
  justify-content: center;
  padding-right: 0;
  padding-left: 0;
}

#ana-sidebar.sidebar-dar .sidebar-bolum-sol-alani {
  flex: none;
}

/* MOBİL ELEMANLAR */
#sidebar-mobil-acma-butonu,
#sidebar-mobil-arka-plan {
  display: none;
}

/* MOBİL */
@media (max-width: 768px) {
  #ana-sidebar {
    top: 0;
    z-index: 1200;

    width: min(290px, 86vw);

    padding-top: calc(14px + env(safe-area-inset-top, 0px));

    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));

    transform: translateX(-105%);
    box-shadow: none;
  }

  #ana-sidebar.sidebar-mobil-acik {
    transform: translateX(0);
    box-shadow: 20px 0 50px rgba(0, 0, 0, 0.38);
  }

  #sidebar-mobil-acma-butonu {
    position: fixed;

    top: calc(17px + env(safe-area-inset-top, 0px));

    left: calc(14px + env(safe-area-inset-left, 0px));

    z-index: 1100;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

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

    color: #ffffff;
    background: rgba(20, 13, 27, 0.92);

    cursor: pointer;
  }

  #sidebar-mobil-arka-plan {
    position: fixed;
    inset: 0;
    z-index: 1150;

    display: block;

    background: rgba(3, 2, 7, 0.62);

    opacity: 0;
    visibility: hidden;

    transition:
      opacity var(--sidebar-animasyon),
      visibility var(--sidebar-animasyon);
  }

  #sidebar-mobil-arka-plan.aktif {
    opacity: 1;
    visibility: visible;
  }

  #sidebar-mobil-uyelik-alani {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;

    margin-bottom: 10px;
  }

  #sidebar-giris-yap-butonu,
  #sidebar-kayit-ol-butonu {
    height: 40px;

    border-radius: 9px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    color: #ffffff;

    font-family: "Exo 2", sans-serif;
    font-size: 12px;
    font-weight: 700;

    cursor: default;
  }

  #sidebar-giris-yap-butonu {
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: #292735;
  }

  #sidebar-kayit-ol-butonu {
    border: 1px solid rgba(211, 144, 255, 0.24);
    background: #812cc1;
  }
}

/* SOSYAL MEDYA PNG LOGOLARI */
.sidebar-sosyal-medya-logosu {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;

  display: block;
  object-fit: contain;
}

#sidebar-telegram-baglantisi:hover {
  color: #ffffff;
  background: rgba(34, 158, 217, 0.1);
}

#sidebar-kick-baglantisi:hover {
  color: #ffffff;
  background: rgba(83, 252, 24, 0.1);
}

#sidebar-youtube-baglantisi:hover {
  color: #ffffff;
  background: rgba(255, 0, 51, 0.1);
}
/* ==================================================
   ERİŞİLEBİLİRLİK VE SON GÜVENLİK AYARLARI
================================================== */

#sidebar-ana-sayfa-baglantisi:focus-visible,
#sidebar-daraltma-butonu:focus-visible,
.sidebar-bolum-butonu:focus-visible,
.sidebar-alt-menu a:focus-visible,
#sidebar-sorumlu-oyun-baglantisi:focus-visible,
#sidebar-mobil-acma-butonu:focus-visible {
  outline: 2px solid #c77cff;
  outline-offset: 2px;
}

/* Kapalı mobil arka plan görünmezken tıklamaları engellemez. */
@media (max-width: 768px) {
  #sidebar-mobil-arka-plan {
    pointer-events: none;
  }

  #sidebar-mobil-arka-plan.aktif {
    pointer-events: auto;
  }
}

/* Hareket azaltma tercihini kullanan ziyaretçiler için animasyonları kapatır. */
@media (prefers-reduced-motion: reduce) {
  #ana-sidebar,
  #sidebar-mobil-arka-plan,
  .sidebar-acilma-ikonu,
  .sidebar-alt-menu,
  .sidebar-alt-menu a {
    transition: none;
  }
}

/* SORUMLU OYUN FOOTER'A TAŞINDIĞI İÇİN
   SIDEBAR ALT ALANI MASAÜSTÜNDE GİZLİ */
#sidebar-alt-alani {
  display: none;
}

/* MOBİL GİRİŞ VE KAYIT BUTONLARI KORUNUR */
@media (max-width: 768px) {
  #sidebar-alt-alani {
    display: block;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
}
.helen-sidebar-ozel-ikonu {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

.sidebar-ozel-kutucuk {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  margin: 5px 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: #c8bdd2;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.sidebar-ozel-kutucuk:hover { background: rgba(168,85,247,.12); color: #fff; }