.quiz-button {
    display: inline-block;
    background: rgba(255, 255, 255, 0.07); 
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 14px;
    cursor: pointer;
    margin-left: 10px;
    font-weight: bold; /* 🔥 Yazıyı kalın yapar */
    color: white;  /* 🔵 Yazıyı mavi yapar */
}

@media (max-width: 768px) {
    .quiz-button {
        display: none;
    }
}

/* 🔥 TV BUTTON */

#openTvButton {
  position: fixed;
  top: 68%;
  left: 0;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 10px 18px;
  font-size: 17px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/haber-cursor.cur'), pointer !important;
  z-index: 99 !important;
  transition: all 0.25s ease;
}
#openTvButton:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #666;
  transform: translateY(50%) rotate(-90deg) scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}


#openTvButton:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #666;
  transform: translateY(50%) rotate(-90deg) scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}


/* 🔥 RUSSIANBALL KISMI */
body {
  cursor: url('media/cursor.cur') 16 16, auto !important;
}

p, span, a, h1, h2, h3, h4, h5, h6 {
  cursor: url('media/text-cursor.cur'), text;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
  cursor: url('media/klavye-cursor.cur'), text;
}

button {
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.tooltip-text {
  pointer-events: auto; /* Varsayılan: none olabilir */
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.tooltip-text-mobile {
  pointer-events: auto; /* Varsayılan: none olabilir */
  cursor: url('media/text-cursor.cur'), pointer !important;
}



li a, li a:hover {
  cursor: url('media/text-cursor.cur'), pointer !important;
}


/* 🔥 BİLİNMİYOR */

body, html {
  overflow: hidden;
  height: 100%;
}

.hidden {
  display: none !important;
}

/* 🔥 MOBIL SAG IKONLAR */
/* Masaüstünde gizle */
.social-container-mobile,
.social-toggle-mobile,
#socialMenu {
  display: none;
}

@media (max-width: 768px) {
  .social-container-mobile {
    position: fixed;
    top: 8px;  /* 🔥 burada değişiklik yaptık */
    right: 5px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .social-toggle-mobile {
    display: inline-block;
  background: rgba(255, 255, 255, 0.07); 
    color: white;
    border: none;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 30px;
    cursor: pointer;
  }




#socialMenu {
  position: fixed;

  right: -75px;  /* Ekran dışında başlasın */
  width: 26px;
  height: 67%;
  align-items: center;   /* 🔥 burada dikey ortalama yapılır */
  margin: -10px 0;        /* 🔥 dikey boşluk verir */
  background: rgba(255, 255, 255, 0.07); 
  transition: right 0.4s ease;
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  z-index: 9999;
  border-radius: 10px;
}

#socialMenu.show {
  right: 5px;  /* Görünür hale gelsin */
}


  .ru-icon-container-mobile {
    display: flex;
    align-items: center;
  }

  .ru-icon-container-mobile img {
    width: 30px;
    height: 30px;
  }
}


.slide-menu {
  position: fixed;
  top: 0;
  right: -250px; /* Menü başlangıçta ekran dışında */
  width: 250px;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 20px;
  z-index: 9999;
}

.slide-menu.show {
  right: 0; /* Menü ekrana girer */
}




/* 🔥 MOBIL SAG IKONLAR ENGEL SAYFA MOBIL TASARIMI */
#popupIframe, #fallbackMessage {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#fallbackMessage {
  padding: 30px;
  font-size: 22px;
  font-weight: bold;
  background: #000;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 16px;
}

#fallbackMessage > div:first-child {
  font-size: 48px;
}

#fallbackMessage > div:nth-child(2) {
  font-size: 18px;
}

#fallbackMessage > div:nth-child(3) {
  font-size: 14px;
  font-weight: normal;
  color: #999;
}

#fallbackLink {
  margin-top: 20px;
  padding: 12px 20px;
  background: #0066ff;
  color: white;
  border-radius: 8px;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s ease;
}

#fallbackLink:hover {
  background: #0052cc;
}

/* Mobil ekranlara özel ayarlar */
@media (max-width: 768px) {
  #fallbackMessage {
    padding: 20px;
    font-size: 18px;
  }

  #fallbackMessage > div:first-child {
    font-size: 36px;
  }

  #fallbackMessage > div:nth-child(2) {
    font-size: 16px;
  }

  #fallbackLink {
    font-size: 16px;
    padding: 10px 16px;
  }
}








/* 🔥 COLOR PICKER */

.color-picker-wrapper {
  position: relative;
  text-align: center;
  margin: 0px;
}

#colorPickerButton {
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #0084ff, #00c6ff);
  color: white;
  cursor: url('media/ressam-cursor.cur'), pointer !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

#colorPickerButton:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

.color-options {
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: #2e2e2e;
  border-radius: 10px;
  padding: 5px;
  display: flex;
  gap: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  z-index: 999;
}

.color-options.hidden {
  display: none;
}

.color-option {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid white;
  transition: transform 0.2s;
}

.color-option:hover {
  transform: scale(1.2);
}








/* 🔥 GİRİŞ YAP YAZISI NAVBAR */

/* 🔑 Giriş Yap yazısı */
.login-text {
  margin-left: 0px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  font-weight: 600;
  transition: color 0.3s ease;
  cursor: url('media/key-cursor.cur'), pointer !important;
border-radius: 8px;
padding: 4px 10px;
    background: rgba(255, 255, 255, 0.07); 

}

.login-text:hover {
  color: #ffa733; /* Üzerine gelince hafif turuncumsu renk değişimi */
}




#openRTButton {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/haber-cursor.cur'), pointer !important;
  z-index: 999999 !important;
  transition: all 0.25s ease;
}



#sputnikButton {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/haber-cursor.cur'), pointer !important;
  z-index: 999999 !important;
  transition: all 0.25s ease;
}

#sputnikButton:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #666;
  transform: translateY(50%) rotate(-90deg) scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}





/* 🔥 SOL KTU */

#openktuButton {
  position: fixed;
  top: 59%;
  left: 0;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 10px 18px;
  font-size: 2px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/haber-cursor.cur'), pointer !important;
  z-index: 99 !important;
  transition: all 0.25s ease;
}

#openRTButton:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #666;
  transform: translateY(50%) rotate(-90deg) scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}


#openktuButton:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #666;
  transform: translateY(50%) rotate(-90deg) scale(1.05);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.15);
}







/* 🔥 GİRİŞ YAP ARKAPLAN */


/* 🔒 Modal Arka Plan */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 1000;
}


/* 🔥 GİRİŞ YAP ARKAPLAN İÇERİK */


/* 🔒 Modal İçerik */
.modal-content {
  background-color: #1c1c1c;
  padding: 30px 25px;
  border-radius: 12px;
  text-align: center;
  width: 320px;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  color: #fff;
}


.modal-content h2 {
  margin-bottom: 20px;
}






















/* 🔥 MESAJ BALONU */

.bubble {
  display: flex;
  align-items: center;
  margin: 8px 0;
  word-break: break-word;
}

.bubble-icon {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}

.bubble-icon-user {
  width: 20px;
  height: 28px;
  margin-right: 8px;
}





/* 🔥 LOGIN KISMI PASSWORD */

.modal-content input[type="text"],
.modal-content input[type="password"] {
  width: 100%;
  height: 45px;
  margin: 10px 0;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid #555;
  background-color: #2c2c2c;
  color: #fff;
  font-size: 16px;
  box-sizing: border-box;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.3s ease;
}

.modal-content input[type="text"]::placeholder,
.modal-content input[type="password"]::placeholder {
  color: #aaa; /* Placeholder renklerini de eşitle */
}

/* 🔵 Modal başlık kısmı */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

/* ❌ X butonu (kare içinde) */
.close-box {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  font-size: 22px;
  font-weight: bold;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.close-box:hover {
  background: rgba(255, 152, 0, 0.15);
  color: #ff9800;
}








.modal-content button {
  margin-top: 15px;
  padding: 12px 25px;
  background-color: #ff9800;
  color: black;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

.modal-content button:hover {
  background-color: #ffa733;
}


/* 🔥 BG FADE */

.bg-fade {
  position: fixed;
  top: 0;
  left: 0;
width: 100%;
height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.5s ease-in-out; /* fade geçiş */
  z-index: -1;
  filter: blur(0px) brightness(0.3);
}














/* 🔥 SAĞ LOGOLAR ÜZERİNE GELİNCE YAZI */

/* Sadece RU ikonları için tooltip */
.ru-icon-container {
  position: relative;
  display: inline-block;
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.ru-icon-container {
  position: relative;
  display: inline-block;
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.ru-icon-container .tooltip-text {
  visibility: hidden;
  background-color: #000; /* Siyah arka plan */
  color: #fff; /* Beyaz yazı */
  text-align: center;
  padding: 4px 8px;
  border-radius: 5px;
  position: absolute;
  right: 100%; /* İKONUN SOLUNDA */
  bottom: -5px; /* Hafif aşağıda */
  transform: translateX(-10px); /* Biraz daha sol çapraz yapsın */
  white-space: nowrap;
  font-size: 12px;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: url('media/text-cursor.cur'), pointer !important;
}


.ru-icon-container-mobile .tooltip-text-mobile {
  visibility: hidden;
  background-color: #000; /* Siyah arka plan */
  color: #fff; /* Beyaz yazı */
  text-align: center;
  padding: 4px 8px;
  border-radius: 5px;
  position: absolute;
  right: 100%; /* İKONUN SOLUNDA */
  bottom: -5px; /* Hafif aşağıda */
  transform: translateX(-10px); /* Biraz daha sol çapraz yapsın */
  white-space: nowrap;
  font-size: 12px;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: url('media/text-cursor.cur'), pointer !important;
}


.ru-icon-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.ru-icon-container-mobile:hover .tooltip-text-mobile {
  visibility: visible;
  opacity: 1;
  cursor: url('media/text-cursor.cur'), pointer !important;
}




















.quiz-icon {
  width: 50px;  /* WhatsApp ikonu */
  margin-top: 2px;  /* w ikonunu biraz aşağı kaydırıyoruz */
  margin-right: -5px; /* w ikonunu sağa kaydırıyoruz */
}

@media (max-width: 768px) {
.quiz-icon {
  width: 50px;  /* WhatsApp ikonu */
  margin-top: 2px;  /* w ikonunu biraz aşağı kaydırıyoruz */
  margin-right: 15px; /* w ikonunu sağa kaydırıyoruz */
  }
}

/* 🔥 WHATSAPP ICON BUYUT */

.awhatsapp-icon {
  width: 30px;  /* WhatsApp ikonu */
  margin-top: 2px;  /* w ikonunu biraz aşağı kaydırıyoruz */
  margin-right: -17px; /* w ikonunu sağa kaydırıyoruz */
  height: 30px; /* WhatsApp ikonu */
}


/* 🔥 TELEGRAM ICON BUYUT */


.atelegram-icon {
  width: 40px;  /* Telegram ikonu büyütüldü */
  height: 40px; /* Telegram ikonu büyütüldü */
  margin-top: 3px;  /* Telegram ikonunu biraz aşağı kaydırıyoruz */
  margin-right: -15px; /* Telegram ikonunu sağa kaydırıyoruz */
  object-fit: contain;
  transition: transform 0.3s ease;
}

@media (max-width: 768px) {
  .atelegram-icon {
    width: 35px;
    height: 35px;
    margin-right: -10px;
  }

  .awhatsapp-icon {
    width: 25px;
    height: 25px;
  }

}

/* 🔥 TELEGRAM HOVER */

  transform: scale(1.2); /* 🔥 Bayrak büyüsün */
  filter: drop-shadow(0 0 2px #ff0000); /* Dış kenardan mavi parlama! */
}




/* 🔥 TELEGRAM ICON HOVER */

.awhatsapp-icon:hover {
  transform: scale(1.2); /* 🔥 Bayrak büyüsün */
  filter: drop-shadow(0 0 2px #ff0000); /* Dış kenardan mavi parlama! */
}















/* Hover efektleri */
.social-icon:hover {
  transform: scale(1.2); /* İkonları hover ile büyütme */
}



/* Shrink hali */
.hilem.shrink {
  transform: scale(0.8) translateY(40px);
  opacity: 1.0;
}









.footer {
  margin-top: 30px;
  text-align: center;
  font-size: 16px;  /* rem yerine px */
  color: #ccc;
  font-family: 'Poppins', sans-serif;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
  cursor: url('media/ktu-cursor.cur'), pointer !important;
}





.footer img {
  margin-top: 12px;
  width: 50px;
  opacity: 0.85;
  transition: transform 0.3s ease;
  cursor: url('media/ktu-cursor.cur'), pointer !important;
}

.footer.shrink {
  transform: scale(0.8) translateY(-10px);
  opacity: 0.7;
}



















/* 🔥 MESAJBOX */


#messageBox {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-family: sans-serif;
  display: none;
  z-index: 111;
}



/* Sol alt köşede ikonları üst üste yerleştir */
/* Sol alt köşede ikonları üst üste yerleştir */
/* Sol alt köşede ikonları üst üste yerleştir */

.social-icons {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Telegram ikonu için boyutları arttırıyoruz */
.telegram-icon {
  width: 77px;  /* Telegram ikonu büyütüldü */
  height: 77px; /* Telegram ikonu büyütüldü */
  margin-left: -10px; /* Telegram ikonunu sola kaydırıyoruz */
}



/* Hover efektleri */
.social-icon:hover {
  transform: scale(1.2); /* İkonları hover ile büyütme */
}



















/* Sol alt köşede ikonları üst üste yerleştir */
/* Sol alt köşede ikonları üst üste yerleştir */
/* Sol alt köşede ikonları üst üste yerleştir */

.social-icons {
  position: fixed;
  bottom: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Telegram ikonu için boyutları arttırıyoruz */
.telegram-icon {
  width: 77px;  /* Telegram ikonu büyütüldü */
  height: 77px; /* Telegram ikonu büyütüldü */
  margin-left: -10px; /* Telegram ikonunu sola kaydırıyoruz */
}

/* WhatsApp ikonu için boyutları arttırıyoruz */
.whatsapp-icon {
  width: 60px;  /* WhatsApp ikonu */
  height: 60px; /* WhatsApp ikonu */
  margin-top: -19px;  /* Telegram ikonunu biraz aşağı kaydırıyoruz */
}

/* Hover efektleri */
.social-icon:hover {
  transform: scale(1.2); /* İkonları hover ile büyütme */
}







/* ÜST ÇUBUK (NAVBAR) */
.top-navbar {
  position: fixed;
  z-index: 999 !important;
  top: 1%;
  left: 2%;
  width: 96%;
  background: rgba(255, 255, 255, 0.07); 
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  padding: 0 13px;
  height: 45px;
  box-sizing: border-box;
  cursor: url('media/text-cursor.cur'), pointer !important;

  /* 🔥 Eklediklerimiz */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
}

/* LOGO KISMI */
.top-navbar .logo {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.chatbotlogo-solust {
  margin-right: 15px;
  width: 32px;
  height: 32px;
  object-fit: cover;
  vertical-align: middle;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.chatbotlogo-solust:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 2px #ff0000);
}

/* BAYRAK İKONLARI */
.flag-icon {
  width: 25px;
  height: 17px;
  object-fit: cover;
  border-radius: 3px;
  vertical-align: middle;
  transition: transform 0.3s ease, filter 0.3s ease;
  cursor: url('media/tr-cursor.cur'), pointer !important;
}

.flag-icon:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 2px #ff0000);
}

/* MENÜ DÜZENİ */
.top-navbar nav ul {
  list-style: none;
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: center;
}

.top-navbar nav ul li {
  display: inline-flex;
}




.top-navbar nav ul {
  display: flex;
  gap: 15px;  /* 🔥 boşluğu buradan veriyoruz */
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  align-items: center;
}

.top-navbar nav ul li a {
  text-decoration: none;
  color: white;
  font-size: 14px;
  transition: color 0.3s ease;
  font-weight: 560;
  display: flex;
}


.top-navbar nav ul li a:hover {
  color: #3498db;
}



/* EMOJİ BUTON */
#toggleAnimationBtn {
  background-color: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin-right: -5px;
}

@media (max-width: 768px) {
/* EMOJİ BUTON */
#toggleAnimationBtn {
  background-color: transparent;
  font-size: 20px;
  margin-right: -13px;
  font-size: 16px;
  }
}


/* 🔥 MOBİLDE YAZILARI GİZLE (Ana Sayfa, Hakkımızda, İletişim) */
@media (max-width: 768px) {
  .top-navbar nav ul li a.nav-text {
    display: none;
  }
}

/* 🔥 MOBİL ÖZEL DÜZENLEMELER */
@media (max-width: 768px) {
  .top-navbar {
    top: 1%;
    left: 2%;
    width: 85%;
    border-radius: 15px;
    padding: 0 10px;
    height: 50px;
  }

  .chatbotlogo-solust {
    width: 28px;
    height: 28px;
  }

  .flag-icon {
    width: 22px;
    height: 15px;
    border-radius: 2px;
  }

  .top-navbar nav ul {
    gap: 10px;
  }

  .top-navbar nav ul li a.nav-text {
    display: none; /* Ana Sayfa, Hakkımızda, İletişim yazıları gizlensin */
  }




}






/* Sayfanın dikey kaydırma çubuğunun gizlenmesi */
html, body {
  margin: 0;
  height: 100%;
  overflow-x: hidden; /* Yalnızca yatay kaydırmayı gizler */
}

/* Webkit tarayıcıları için kaydırma çubuğunun gizlenmesi */
::-webkit-scrollbar {
  display: none; /* Kaydırma çubuğunu tamamen gizler */
}

/* Sayfanın kaymasını sürdürmek için */
body {
  overflow-y: scroll; /* İçeriğin kaymasını sağlar */
}





body {
  background-color: #000000;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 🔥 Ortalamayı geri getiriyoruz */
}


video {
  border-radius: 12px;
  margin-bottom: 10px;
}

h2 {
  color: #ff9800;
  margin: 10px 0 15px 0;
}

#mainMenu, #subMenu {

  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 9999;
}


#mainMenu button, #subMenu button {


  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.07); /* saydam gri */
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 600;
  font-size: 18px;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


#mainMenu button:hover,
#subMenu button:hover {
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}



.input-area {
  display: flex;
  gap: 10px;
  width: 80%;
  max-width: 800px;
  margin-bottom: 10px;
}

input[type="text"] {
  flex-grow: 1;
  background-color: rgba(28, 28, 28, 0.07);  /* ✅ %60 opaklık */
  backdrop-filter: blur(2px);               /* ✅ arkaya blur efekti */
  color: #ffffff;
  border: 1px solid #444;
  border-radius: 10px;
  padding: 20px;
  font-size: 18px;
}


.input-area button {
  background-color: #ff9800;
  color: #000000;
  font-weight: 600;
  font-size: 15px;
  border: none;
  border-radius: 10px;
  padding: 15px 18px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.input-area button:hover {
  background-color: #ffa733;
}

#output-wrapper {
  position: relative; /* 🔥 Bu satırı EKLE */
  z-index: -1; /* düşük ve sabit */
  width: 100%;
  max-height: 300px;
  flex-grow: 1;
  border: 2px solid #444;
  border-radius: 15px;
  padding: 10px;
  overflow-y: auto;
  background-color: rgba(18, 18, 18, 0.3);
  backdrop-filter: blur(3px);
  scrollbar-width: thin;
  scrollbar-color: #666 transparent;
}


#output-wrapper::-webkit-scrollbar {
  width: 6px;
}
#output-wrapper::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}
#output-wrapper::-webkit-scrollbar-track {
  background: transparent;
}

#output {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 17px;
  line-height: 1.4;
  word-wrap: break-word;
  white-space: pre-wrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  animation: appear 0.3s ease;
}

.bubble.user {
  align-self: flex-end;
  background-color: #0000ff;
  color: #fff;
  border-bottom-right-radius: 0;
}

.bubble.bot {
  align-self: flex-start;
  background-color: #1e1e1e;
  border: 1px solid #444;
  color: #fff;
  border-bottom-left-radius: 0;
}

@keyframes appear {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.flash {
  box-shadow: 0 0 20px 6px #ffa733;
  transition: box-shadow 0.6s ease;
}

/* ✨ Sohbet kutusu parlaması */
.frame-flash {
  box-shadow: 0 0 18px 5px #42a5f5;
  transition: box-shadow 0.5s ease;
}

#clearButton {
  background-color: rgba(255, 255, 255, 0.05); /* 🔘 saydam gri */
  color: #ddd; /* Açık gri yazı */
  font-weight: 500;
  font-size: 25px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Hafif sınır çizgisi */
  border-radius: 8px;
  padding: 3px 8px;
  margin-left: 10px;
  cursor: url('media/temizle-cursor.cur'), pointer !important;
  transition: all 0.3s ease;
}


#tamekranbutonu {
  background-color: rgba(255, 255, 255, 0.05); /* 🔘 saydam gri */
  color: #ddd; /* Açık gri yazı */
  font-weight: 500;
  font-size: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Hafif sınır çizgisi */
  border-radius: 8px;
  padding: 12px 16px;
  margin-left: 10px;
  cursor: url('media/zoom-cursor.cur'), pointer !important;
  transition: all 0.3s ease;
}

#clearButton:hover {
  background-color: rgba(255, 255, 255, 0.12); /* Hover’da biraz daha parlak */
  color: #fff;
}

#sendButton {
  background-color: rgba(255, 255, 255, 0.05); /* 🔘 saydam gri */
  color: #ddd; /* Açık gri yazı */
  font-weight: 500;
  font-size: 25px;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Hafif sınır çizgisi */
  border-radius: 8px;
  padding: 3px 8px;
  margin-left: 10px;
  cursor: url('media/send-cursor.cur'), pointer !important;
  transition: all 0.3s ease;
}

#sendButton:hover {
  background-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}



#output-wrapper {
  z-index: 1; /* düşük ve sabit */
  position: relative;
  /* diğer stillerin burada kalabilir */
}

#toggleFullscreenBtn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  font-size: 18px;
  cursor: url('media/zoom-cursor.cur'), pointer !important;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

#toggleFullscreenBtn:hover {
  background-color: rgba(255, 255, 255, 0.25);
}


/* Normal görünümde sınır koy (ortalı büyük kutu gibi) */
#chat-container {
  width: 150%;
  position: relative; /* ✅ Ekle bunu */
  z-index: 1; /* düşük ve sabit */
  top: 20px;
  right: -5px;
  width: 70%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Mobilde genişliği artır */
@media (max-width: 768px) {
  #chat-container {
    width: 90%;    /* mobilde neredeyse tam genişlik */
  }
}


/* Tam ekran modundayken tam ekran gibi davransın */
#chat-container:fullscreen {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.9);
  box-sizing: border-box;
}







/* style.css dosyasında: aşağıya bunu EKLE */
#chat-container:fullscreen #output-wrapper {
  flex-grow: 1;
  max-height: none;
  height: 100%;
}

/* Tam ekran modunda output-wrapper'ın esnemesini sağla */
#chat-container:fullscreen #output-wrapper {
  flex-grow: 1;
  max-height: none;
  height: 100%;
}



.social-right {
  position: fixed;
  top: 52%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;     /* ✅ ARTTIRILDIIII bunu */
}

.social-right-mobile {
  position: fixed;
  top: 52%;
  right: 1px;
  transform: translateY(-47%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;     /* ✅ ARTTIRILDIIII bunu */
}

.social-right-mobile img {
  width: 35px;    /* ✅ Daha küçük ikonlar */
  height: 35px;
  object-fit: contain;
}

@media (max-width: 1400px) {
  .content-wrapper {
    max-width: 95%;
    margin: 0 auto;
  }
}


@media (max-width: 1400px) {
  .ru-icon {
    width: 46px !important;
    height: 46px !important;
    margin-top: -8px !important;
    transform: none !important;
  }

  .ru-icon img {
    object-fit: cover;
  }
}


.ru-icon {
  width: 53px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.06); /* Arka planı hafif şeffaf bırak */
  border: 5px solid rgba(255, 255, 255, 0.25); /* Yuvarlak çerçeve */
  border-radius: 50%; /* Yuvarlak yapı */
  overflow: hidden;
  box-sizing: border-box;
  transition: transform 0.3s ease;
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.ru-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Resmi yuvarlak kutuya uygun şekilde yerleştir */
  cursor: url('media/text-cursor.cur'), pointer !important;
}

.ru-icon:hover {
  transform: scale(1.1);
}








/* 📱 Sabit Logo, Yazısız Navbar, Yukarıdan Taşmayan Sayfa */
@media (max-width: 768px) {
  html, body {
    width: 97%;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    font-size: 15px;
    box-sizing: border-box;
  }
}


  .hilem {
    display: block;
    margin: 15px auto 10px auto; /* navbar altında sabit */
  }

@media (max-width: 1400px) {
  .hilem {
    width: 210px;
    height: auto;
    margin: -7px; /* üst boşluğu azalt → yukarı kayar */
  }
}

@media (max-width: 1440px) {
  .hilem.shrink {
    transform: scale(0.7) translateY(45px);!important;
    opacity: 0 !important;
  }
}


/* Logo küçültme ve yukarı kaydırma */
.hilem.shrink {
  transform: scale(0.7) translateY(45px);
  opacity: 0.8;
  transition: all 0.7s ease;
}

@media (max-width: 768px) {
  .hilem.shrink {
    transform: none !important;
    opacity: 1 !important;
  }
}


//////////////////
/* ❗ Alarm İkonu */
.alert-icon {
  position: fixed;
  top: 12px;
  right: 15px;
  font-size: 24px;
  color: #ff0000;
  animation: blink 1s infinite;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 9999;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* 📢 Popup Arka Plan Blur */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

/* 📢 Popup İçeriği */
.popup-content {
  background: #222;
  padding: 25px 30px;
  border-radius: 14px;
  text-align: center;
  color: white;
  font-size: 18px;
  position: relative;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}



@media (max-width: 1400px) {
  footer {
  margin-top: 18px !important;
  text-align: center;
  font-size: 10px !important;
  color: #ccc;
  font-family: 'Poppins', sans-serif;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s ease;
  cursor: url('media/ktu-cursor.cur'), pointer !important;
  }


@media (max-width: 1400px) {
footer.shrink {
  transform: scale(0.8) translateY(-20px);
  opacity: 0;
  transition: all 0.4s ease;
}


/* Footer küçültme ve yukarı kaydırma */
footer.shrink {
  transform: scale(0.8) translateY(-20px);
  opacity: 0.5;
  transition: all 0.4s ease;
}



@media (max-width: 768px) {
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 8px !important;
    line-height: 1.4;
    padding: 8px 0;
    text-align: center;
    cursor: url('media/ktu-cursor.cur'), pointer !important;
  }





@media (max-width: 768px) {
footer.shrink {
  transform: scale(0.8) translateY(0px) !important;
  opacity: 0.7 !important;
  transition: all 0.4s ease;
}

@media (max-width: 768px) {
.footer img {
  margin-top: 5px !important;
  width: 50px;
  opacity: 0.85;
  transition: transform 0.3s ease;
}







/* Normal görünümde sınır koy (ortalı büyük kutu gibi) */


@media (max-width: 768px) {
  #mainMenu, #subMenu {
    position: relative;  /* 🔥 veya absolute */
    z-index: -1;
    display: grid; /* 🔥 Flex değil GRID kullanıyoruz */
    grid-template-columns: repeat(2, 1fr); /* 🔥 2 sütun olacak */
    gap: 10px;
    justify-items: center; /* 🔥 Butonları ortala */
    top: -110px;          /* 🔥 yukarı taşı */
  }

  #mainMenu button, #subMenu button {
    width: 100%; /* 🔥 Her buton sütunu tam kaplasın */
    min-width: 140px;
    box-sizing: border-box;
    font-size: 14px;
    padding: 12px;
    text-align: center;
    border-radius: 10px;
  }









  .input-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 100%;
flex-wrap: nowrap; /* ❗ Alt alta inme */
  }

  .input-area input[type="text"] {
    flex-grow: 1;
    font-size: 13px;
    padding: 10px;
    min-width: 60%;
  }

  .input-area button {
    padding: 6px;
    font-size: 13px;
    max-width: 60px;
  }

  #clearButton, #tamekranbutonu {
    max-width: 40px;
    padding: 2px;
    font-size: 23px;
  }



  #sendButton, #sendbutton {
    max-width: 40px;
    padding: 2px;
    font-size: 23px;
  }



#output-wrapper {
    max-height: 200px;
    padding: 6px;
    margin-top: -105px; /* ❗ MOBIL YENILIK */
    z-index: 1; /* düşük ve sabit */
  }

  .bubble {
    max-width: 100%;
    font-size: 12px;
    padding: 6px 8px;
  }

  #toggleFullscreenBtn {
    margin: 6px auto 0;
    display: block;
    width: 30px;
  cursor: url('media/zoom-cursor.cur'), pointer !important;
  }

.social-icons, .social-right {
  display: none;
}

  .login-text, .login-text {
    display: none;
  }


  #tamekranbutonu, #tamekranbutonu {
    display: none;
  }

.hilem {
    display: none;
  }


}

@media (max-width: 768px) {
  html, body {
    overflow: hidden;      /* 📱 Kaydırmayı tamamen kapatır */
    height: 100vh;         /* 🔒 Sayfayı ekran boyuna sabitler */
    touch-action: none;    /* 🚫 Dokunarak kaydırmayı da engeller */
    position: fixed;       /* 📌 Sayfayı sabitler */
  }
}

/* 📱 Mobil Bakım Blur Ekranı */

#mobileMaintenance {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* 🔥 Blur desteklemeyen cihazlar için garanti koyu zemin */
  -webkit-backdrop-filter: blur(10px) brightness(0.7);
  backdrop-filter: blur(10px) brightness(0.7); /* 🔥 Destekleyenlerde ekstra blur ve koyulaştırma */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  padding: 20px;
  box-sizing: border-box;
}



.maintenance-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 20px 30px;
  border-radius: 12px;
  color: #ff9800;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.2);
  backdrop-filter: blur(6px);
  letter-spacing: 0.5px;
}

.emoji-line {
  font-size: 22px;
  font-weight: 800; /* 🔥 Başlığı ekstra kalın yapıyoruz */
  margin-bottom: 15px;
  text-transform: uppercase;
}

.counter-line {
  font-size: 16px;
}

.counter-line code {
  font-family: 'Courier New', monospace; /* 🔥 Kod fontu */
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 8px;
  border-radius: 8px;
  color: #ffcc00;
  font-size: 18px;
}

@keyframes rgbColor {
  0%   { color: rgb(255, 0, 0); }     /* kırmızı */
  20%  { color: rgb(255, 255, 0); }   /* sarı */
  40%  { color: rgb(0, 255, 0); }     /* yeşil */
  60%  { color: rgb(0, 255, 255); }   /* turkuaz */
  80%  { color: rgb(0, 0, 255); }     /* mavi */
  100% { color: rgb(255, 0, 255); }   /* mor */
}

.emoji-line strong {
  animation: rgbColor 5s linear infinite;
}

/* 📱 Wrapper */
.maintenance-content-wrapper {
  position: relative;
  width: 320px;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Blur Kutusu */
.maintenance-content {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 25px 35px;
  border-radius: 12px;
  color: #ff9800;
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  text-align: center;
  box-shadow: 0 0 15px rgba(255, 152, 0, 0.2);
  backdrop-filter: blur(6px);
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}

/* Çark Ortak Ayarları */
.gear {
  position: absolute;
  font-size: 18px;
  color: #ff9800;
  z-index: 3;
}

/* 🔥 4 Çark Animasyonu */
.gear1 { animation: gearMove1 10s linear infinite; }
.gear2 { animation: gearMove2 12s linear infinite reverse; }
.gear3 { animation: gearMove3 9s linear infinite; }
.gear4 { animation: gearMove4 11s linear infinite reverse; }

/* 🔄 Çarkların Dikdörtgen Çevresi Animasyonları */
@keyframes gearMove1 {
  0% { top: 0; left: 0; }
  25% { top: 0; left: 100%; transform: translateX(-100%); }
  50% { top: 100%; left: 100%; transform: translate(-100%, -100%); }
  75% { top: 100%; left: 0; transform: translateY(-100%); }
  100% { top: 0; left: 0; }
}

@keyframes gearMove2 {
  0% { top: 100%; left: 0; transform: translateY(-100%); }
  25% { top: 0; left: 0; }
  50% { top: 0; left: 100%; transform: translateX(-100%); }
  75% { top: 100%; left: 100%; transform: translate(-100%, -100%); }
  100% { top: 100%; left: 0; transform: translateY(-100%); }
}

@keyframes gearMove3 {
  0% { top: 0; left: 50%; transform: translateX(-50%); }
  25% { top: 100%; left: 50%; transform: translate(-50%, -100%); }
  50% { top: 100%; left: 0; transform: translateY(-100%); }
  75% { top: 0; left: 0; }
  100% { top: 0; left: 50%; transform: translateX(-50%); }
}

@keyframes gearMove4 {
  0% { top: 50%; left: 0; transform: translateY(-50%); }
  25% { top: 0; left: 50%; transform: translateX(-50%); }
  50% { top: 50%; left: 100%; transform: translate(-100%, -50%); }
  75% { top: 100%; left: 50%; transform: translate(-50%, -100%); }
  100% { top: 50%; left: 0; transform: translateY(-50%); }
}

/* Alarm İkonu */
#alertIcon {
  font-size: 20px;
  color: red;
  position: absolute;
  right: 100px;
  top: 10px;
  animation: blink 1s infinite;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 999;
}

/* Sadece MOBİLDE göster */
@media (max-width: 768px) {
  #alertIcon {
    display: inline-block;
  }
}

/* Blink (yanıp sönme) efekti */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Popup Blur Arka Plan */
#mobilePopup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* Popup içeriği */
.popup-content {
  background: #1c1c1c;
  padding: 25px 30px;
  border-radius: 10px;
  text-align: center;
  font-size: 18px;
  color: white;
  position: relative;
  z-index: 1000;
}

/* Kapatma Butonu */
#closePopup {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 1000;
}










/* RT Butonu */
.modern-news-button {
  position: fixed;
  bottom: 25px;
  left: 20px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(145deg, #1f1f1f, #2a2a2a);
  color: #fff;
  border: 1px solid #444;
  border-radius: 12px;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
  backdrop-filter: blur(3px);
  transition: 0.2s ease-in-out;
  z-index: 9999;
}

.modern-news-button:hover {
  background: linear-gradient(145deg, #0066ff, #003b99);
  color: white;
  transform: scale(1.03);
  box-shadow: 0 0 12px rgba(0, 102, 255, 0.4);
}

/* RT Popup */
#rtOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}

#ktuOverlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  backdrop-filter: blur(8px);
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  align-items: center;
  justify-content: center;
}



.rt-container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 85%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.ktu-container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 85%;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

.rt-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.ktu-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.ktu-container button#closektuButton {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 9999;
}


@media (max-width: 768px) {
#openRTButton {
  position: fixed;
  top: 40%;
  left: 0;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 10px 18px;
  font-size: 7px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 99 !important;
  transition: all 0.25s ease;
}



@media (max-width: 768px) {
#openktuButton {
  position: fixed;
  top: 50%;
  left: 0;,
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 2px 10px;
  font-size: 7px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 99;
  transition: all 0.25s ease;
}



@media (max-width: 1440px) {
#sputnikButton {
  position: fixed;
  top: 90% !important;
  left: -5px !important;
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 6px 3px !important;
  font-size: 7px;
  font-weight: 600 !important;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 99 !important;
  transition: all 0.25s ease;
}




@media (max-width: 768px) {
#openTvButton {
  position: fixed;
  top: 80%;
  left: 0;,
  transform: translateY(50%) rotate(-90deg);
  transform-origin: left top;
  padding: 2px 6px;
  font-size: 20px;
  font-weight: 600;
  background: rgba(31, 31, 31, 0.3);
  border: 1px solid #444;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  color: white;
  cursor: url('media/text-cursor.cur'), pointer !important;
  z-index: 9999999999;
  transition: all 0.25s ease;
}